/* Mama Shepherd — national edition. One stylesheet, no framework. */
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{--page:1160px;--read:44rem;--side:17rem}
:root,[data-theme="light"]{
  color-scheme:light;
  --paper:#F7F3EE; --card:#FFFFFF; --sunk:#F0EAE2;
  --ink:#24211D; --ink2:#4B453F; --ink3:#675F57;
  --line:#E6DED4; --line2:#D4C9BC;
  --teal:#2D6A66; --tealBg:#E2EFED;
  --blue:#395F87; --blueBg:#E5EDF6;
  --plum:#5A5594; --plumBg:#ECEAF5;
  --amber:#7D5210; --amberBg:#F6ECDA;
  --focus:#395F87;
  /* slightly more visible shadow so cards read as tappable */
  --shadow:0 1px 3px rgba(36,33,29,.07),0 5px 18px rgba(36,33,29,.08);
}
[data-theme="dark"]{
  color-scheme:dark;
  /* twilight plum: soft, restful night colors that echo the lavender brand */
  --paper:#17132A; --card:#221C3A; --sunk:#1C1732;
  --ink:#F4F0FB; --ink2:#D9D2EA; --ink3:#B7AECD;
  --line:#352D52; --line2:#4A4170;
  --teal:#93D6CB; --tealBg:#1D3040;
  --blue:#B3C8F2; --blueBg:#232A4C;
  --plum:#CBBEFA; --plumBg:#2E2550;
  --amber:#F0C88A; --amberBg:#33283A;
  --focus:#CBBEFA;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 6px 20px rgba(0,0,0,.18);
}
html{font-size:100%;-webkit-text-size-adjust:100%}
html[data-size="l"]{font-size:112.5%}
html[data-size="xl"]{font-size:125%}
html[data-size="xxl"]{font-size:150%}
*,*::before,*::after{box-sizing:border-box}
body{overflow-x:clip;margin:0;background:var(--paper);color:var(--ink);font-family:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--blue);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
img,svg{display:block}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:-.01em;line-height:1.2;margin:0;color:var(--ink);font-variation-settings:"opsz" 72}
h1{font-size:clamp(1.85rem,4.6vw,2.4rem)}
h2{font-size:1.45rem}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.skip{position:absolute;left:-9999px;top:8px;background:var(--card);padding:10px 14px;border-radius:10px;z-index:100}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── header ── */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--page);margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;gap:12px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:"Fraunces",Georgia,serif;font-size:1.3rem;letter-spacing:-.01em;white-space:nowrap}
.mark b{font-weight:600;color:var(--teal)}
.mark span{font-weight:400}
.mark svg{flex:none}
.topnav{display:none;margin-left:auto;gap:2px}
.topnav a{color:var(--ink2);text-decoration:none;font-size:.95rem;padding:8px 12px;border-radius:999px}
.topnav a:hover{background:var(--sunk)}
.topnav a[aria-current="page"]{color:var(--ink);background:var(--sunk);font-weight:700}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.topnav + .hdr-actions{margin-left:10px}
.iconbtn{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink2);height:40px;min-width:40px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:.92rem;cursor:pointer}
.iconbtn:hover{border-color:var(--line2)}
.helpnow{appearance:none;text-decoration:none;border:0;background:var(--plum);color:#fff;height:40px;padding:0 15px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.95rem;white-space:nowrap}
[data-theme="dark"] .helpnow{color:#16141f}
.helpnow:hover{filter:brightness(1.07)}

/* ── bottom nav (phones) ── */
.botnav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.botnav ul{list-style:none;margin:0 auto;padding:0;display:flex;max-width:560px}
.botnav li{flex:1}
.botnav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 0 12px;text-decoration:none;color:var(--ink3);font-size:.83rem;font-weight:700}
.botnav a[aria-current="page"]{color:var(--blue)}
.botnav a[aria-current="page"] svg{stroke-width:2.1}
body{padding-bottom:82px}
@media (min-width:900px){
  .topnav{display:flex}
  .botnav{display:none}
  body{padding-bottom:0}
  .hdr-in{padding:0 24px}
}

/* ── layout ── */
main{display:block}
.wrap{max-width:720px;margin:0 auto;padding:0 18px}
.wrap-narrow{max-width:560px;margin:0 auto;padding:0 18px}
.sec{padding:28px 0}
.kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.lede{font-size:1.15rem;color:var(--ink2);line-height:1.6}
.muted{color:var(--ink3)}
.crumbs{font-size:.9rem;color:var(--ink3);padding-top:22px}
.crumbs a{color:var(--ink3)}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem;color:var(--ink3);margin-top:12px}
.meta span{display:inline-flex;align-items:center;gap:5px}

/* ── cards & rows ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.rows{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:14px;padding:15px 18px;background:var(--card);border:1px solid var(--line);border-radius:18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.row:hover{border-color:var(--line2);transform:translateY(-1px)}
.row .t{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.08rem;font-weight:500;line-height:1.3}
.row .d{display:block;font-size:.95rem;color:var(--ink2);margin-top:2px;line-height:1.45}
.row .go{margin-left:auto;flex:none;color:var(--ink3)}
.tile{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.t-blue{background:var(--blueBg);color:var(--blue)}
.t-plum{background:var(--plumBg);color:var(--plum)}
.t-teal{background:var(--tealBg);color:var(--teal)}
.t-amber{background:var(--amberBg);color:var(--amber)}
.row.soft-plum{background:var(--plumBg);border-color:transparent}
.row.soft-plum .tile{background:color-mix(in srgb,var(--card) 70%,transparent)}

/* first-person "where are you" list */
.moments{display:grid;gap:10px}
.moment{display:flex;align-items:center;gap:14px;padding:18px 18px;border-radius:20px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:1.07rem;font-family:"Fraunces",Georgia,serif;font-weight:500;box-shadow:var(--shadow);transition:border-color .18s,transform .18s,box-shadow .18s}
.moment:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 20px rgba(45,106,102,.12)}
.moment .go{margin-left:auto;color:var(--ink3);flex:none}
.moment.urgent{background:var(--plumBg);border-color:transparent}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:700;cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--line2)}
.chip[aria-pressed="true"],.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
[data-theme="dark"] .chip[aria-pressed="true"],[data-theme="dark"] .chip.on{color:#111}
.chip small{font-weight:400;color:inherit;opacity:.8}

/* ── topic page ── */
.short{background:var(--tealBg);border-radius:18px;padding:18px 20px 16px;margin-top:22px}
.short h2{font-family:"Atkinson",system-ui,sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.short ul{margin:0;padding-left:1.15em}
.short li{margin:4px 0;color:var(--ink)}
.reassure{font-size:1.1rem;color:var(--ink2);border-left:3px solid var(--line2);padding-left:18px;margin:26px 0 0}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.jump a{font-size:.9rem;font-weight:700;color:var(--blue);background:var(--blueBg);text-decoration:none;padding:7px 14px;border-radius:999px}
.h2row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.src{font-size:.88rem;color:var(--ink3)}
.know{display:grid;gap:12px;counter-reset:k}
.know article{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow)}
.know h3{font-size:1.08rem;margin-bottom:6px}
.know p{margin:0;color:var(--ink2)}
.links{display:grid;gap:8px}
.ext{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.ext:hover{border-color:var(--line2)}
.ext .t{font-weight:700;line-height:1.35;display:block}
.ext .s{font-size:.88rem;color:var(--ink3);display:block;margin-top:2px}
.ext svg{margin-left:auto;flex:none;color:var(--blue)}
.call{background:var(--amberBg);border-radius:18px;padding:18px 20px;display:flex;gap:14px}
.call svg{flex:none;color:var(--amber);margin-top:3px}
.call h2{font-family:"Atkinson",system-ui,sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.call p{margin:0;color:var(--ink)}
.call.top{margin-top:18px}
.verse{text-align:center;padding:30px 12px 8px}
.verse .lab{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.verse blockquote{margin:10px auto 8px;max-width:30em;font-family:"Fraunces",Georgia,serif;font-size:1.22rem;line-height:1.5;color:var(--ink)}
.verse a{font-size:.92rem;color:var(--ink3)}
.bridge{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:18px;background:var(--sunk);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.bridge:hover{border-color:var(--line2)}
.bridge .site{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.bridge .t{display:block;font-weight:700;line-height:1.35;margin-top:1px}
.bridge svg{margin-left:auto;flex:none;color:var(--ink3)}
.state-note{background:var(--blueBg);border-radius:14px;padding:13px 16px;font-size:.98rem;color:var(--ink)}
.state-note button{font:inherit;font-weight:700;color:var(--blue);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.next{border-top:1px solid var(--line);padding-top:26px;margin-top:8px}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}

/* ── help items ── */
.help{display:grid;gap:10px}
.helpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 17px}
.helpi .t{font-weight:700;display:block}
.helpi .d{font-size:.95rem;color:var(--ink2);display:block;margin:2px 0 10px}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.act{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:var(--blueBg);color:var(--blue);font-weight:700;font-size:.95rem;text-decoration:none}
.act:hover{filter:brightness(.97)}
.act.primary{background:var(--plum);color:#fff}
[data-theme="dark"] .act.primary{color:#16141f}

.crisis{background:var(--card);border:2px solid var(--plum);border-radius:20px;padding:20px}
.crisis h2{font-size:1.3rem;margin-bottom:4px}
.box{background:var(--sunk);border-radius:18px;padding:18px 20px}

/* ── home ── */
.hero{padding:40px 0 16px;text-align:center}
.hero h1{font-size:clamp(2rem,6vw,2.6rem)}
.hero h1 span{font-weight:300}
.hero p{margin:10px auto 0;max-width:30em;color:var(--ink2)}
.promise{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:16px;font-size:.94rem;color:var(--ink2)}
.promise span{display:inline-flex;align-items:center;gap:6px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 12px}
.sechead h2{font-size:1.25rem}
.label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}

/* search */
.search{position:relative}
.search label{display:block}
.sbox{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line2);border-radius:16px;padding:0 14px;height:54px}
.sbox:focus-within{border-color:var(--blue)}
.sbox input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:1.02rem;color:var(--ink);min-width:0}
.sbox input::placeholder{color:var(--ink3)}
.sres{margin-top:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sres a,.sres div.alert{display:block;padding:13px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.sres a:last-child{border-bottom:0}
.sres .t{font-weight:700;display:block}
.sres .s{font-size:.88rem;color:var(--ink3);display:block}
.sres .alert{background:var(--plumBg)}
.sres .alert.danger{background:var(--plumBg);border-left:4px solid var(--plum)}

/* settings sheet */
.sheet{position:fixed;inset:0;z-index:60;display:none}
.sheet.open{display:block}
.sheet .scrim{position:absolute;inset:0;background:rgba(20,18,16,.45)}
.sheet .panel{position:absolute;right:12px;top:68px;width:min(360px,calc(100% - 24px));background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.sheet h2{font-size:1.15rem;margin-bottom:12px}
.sheet .grp{margin-bottom:16px}
.sheet .grp:last-child{margin-bottom:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
select,.input{font:inherit;font-size:1rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line2);border-radius:12px;height:46px;padding:0 12px;width:100%}

/* directory */
.dir{display:grid;gap:12px}
.res{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.res h3{font-family:"Atkinson",system-ui,sans-serif;font-size:1.05rem;font-weight:700}
.res .badge{display:inline-block;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px;margin-left:6px;vertical-align:2px}
.b-free{background:var(--tealBg);color:var(--teal)}
.b-slide{background:var(--amberBg);color:var(--amber)}
.b-ins{background:var(--blueBg);color:var(--blue)}
.res p{margin:6px 0 4px;color:var(--ink2);font-size:.98rem}
.res .where{font-size:.9rem;color:var(--ink3)}

/* footer */
.ftr{border-top:1px solid var(--line);margin-top:40px;padding:30px 18px 34px;text-align:center;font-size:.92rem;color:var(--ink3)}
.ftr nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:12px 0}
.ftr a{color:var(--ink2)}
.ftr .mark{justify-content:center;font-size:1.1rem}

/* quick exit (partner page) */
.qexit{position:fixed;right:12px;bottom:88px;z-index:45;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:11px 16px;font:inherit;font-weight:700;font-size:.92rem;box-shadow:0 4px 18px rgba(0,0,0,.2);cursor:pointer}
@media (min-width:900px){.qexit{bottom:20px}}

/* gentle entrance, content never hidden */
@media (prefers-reduced-motion:no-preference){
  .fade{animation:fade .5s ease both}
  @keyframes fade{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media print{
  .hdr,.botnav,.tools,.qexit,.sheet,.jump,.ftr nav{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .card,.know article,.row,.ext{box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555;word-break:break-all}
}
@media (max-width:440px){
  .hdr-in{gap:8px;padding:0 12px}
  .mark{font-size:1.12rem;gap:7px}
  .mark svg{width:24px;height:24px}
  .helpnow{padding:0 13px;font-size:.92rem}
  .iconbtn{min-width:38px;height:38px;padding:0 8px}
}
@media (max-width:350px){ .helpnow svg{display:none} }
@media (max-width:380px){
  .hdr-in{padding:0 10px;gap:6px}
  .mark{font-size:1.02rem;gap:6px}
  .mark svg{width:22px;height:22px}
  .helpnow{padding:0 11px}
  .hdr-actions{gap:5px}
}
.langbtn{font-weight:700;text-decoration:none;font-size:.88rem;padding:0 12px}
@media (max-width:560px){ .langbtn{display:none} }
.langline{margin-top:12px;font-size:.92rem}
.langline a{font-weight:700;color:var(--ink2);text-decoration-color:var(--line2)}

/* ═════════════ Responsive layout (Oct 2026) ═════════════
   Phones (<600px) keep the original one-column design.
   Grids use rem-based minimums, so larger text sizes
   automatically drop to fewer, wider columns. */

/* anything marked hidden stays hidden, even with display:flex classes */
[hidden]{display:none!important}

/* page containers */
.wrap-wide,.wrap-mid,.wrap-home,.wrap-support{margin:0 auto;padding:0 18px}
.wrap-home{max-width:560px}
.wrap-support{max-width:560px}
.wrap-wide{max-width:var(--page)}
.wrap-mid{max-width:1000px}
.wrap-topic{max-width:720px}

/* auto grids: one column on phones, more as room allows */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.help.grid,.dir.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));align-items:start}
.rows.grid > .row{height:100%}

/* home pieces */
.hero h1,.hero p,h1{text-wrap:balance}
.home-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:4px 0 8px}
.home-search .label{display:none}
.home-age{padding:24px 0 4px}

/* topic page sidebar is a desktop-only extra */
.topic-side{display:none}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav .label{margin-bottom:6px}
.side-nav a{display:block;padding:8px 12px;border-radius:10px;color:var(--ink2);text-decoration:none;font-weight:700;font-size:.95rem;line-height:1.35}
.side-nav a:hover{background:var(--sunk);color:var(--ink)}
.side-nav a.sub{font-weight:400;padding:6px 12px 6px 24px;font-size:.92rem}
.side-help{margin-top:18px;background:var(--plumBg);border-radius:18px;padding:16px 16px 18px}
.side-help .t{font-family:"Fraunces",Georgia,serif;font-size:1.08rem;font-weight:500;margin:0 0 4px;color:var(--ink)}
.side-help .d{font-size:.92rem;color:var(--ink2);margin:0 0 12px;line-height:1.45}
.side-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.idx-side{display:none}

/* settings button gets a visible label once there is room */
.iconbtn .lab{display:none;font-weight:700}

/* settings panel never runs off a short screen */
.sheet .panel{max-height:calc(100dvh - 84px);overflow:auto;overscroll-behavior:contain}

/* ── tablets (600px+) ── */
@media (min-width:600px){
  .wrap,.wrap-topic{padding:0 28px;max-width:776px}
  .wrap-home{max-width:820px;padding:0 28px}
  .wrap-support{max-width:720px;padding:0 28px}
  .wrap-wide,.wrap-mid{padding:0 28px}
  .moments{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
  .moment{height:100%}
  .moment.urgent{grid-column:1/-1;justify-content:flex-start}
  .iconbtn .lab{display:inline}
  .iconbtn{padding:0 14px}
  .hero{padding:52px 0 20px}
  .home-search .label{display:block}
  .home-age{padding:24px 0 4px}
  .sec{padding:34px 0}
}

/* ── laptops and desktops (1024px+) ── */
@media (min-width:1024px){
  .wrap,.wrap-topic,.wrap-wide,.wrap-mid,.wrap-home,.wrap-support{padding:0 32px}
  .hdr-in{padding:0 32px}
  .wrap-home{max-width:var(--page)}
  .wrap-support{max-width:760px}
  .hero{padding:64px 0 24px}
  .hero h1{font-size:clamp(2.4rem,3.4vw,3rem)}
  .hero p{font-size:1.15rem}
  /* home: three columns of "where are you", then search + ages side by side */
  .moments{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:14px}
  .moment.urgent{grid-column:auto}
  .home-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;padding:18px 0 8px}
  .home-age{padding:0}
  /* topic pages: comfortable reading column + sticky sidebar */
  .wrap-topic{max-width:var(--page)}
  .wrap-topic > header{max-width:var(--read)}
  .topic-grid{display:grid;grid-template-columns:minmax(0,var(--read)) var(--side);gap:56px;align-items:start;justify-content:space-between}
  .topic-side{display:block;position:sticky;top:84px;padding-top:22px}
  .topic-main > .jump,.topic-main > .tools{display:none}
  .topic-main .links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:10px}
  /* topics index: sticky jump list on the left */
  .idx-head{max-width:46rem}
  .idx-chips{display:none}
  .idx-grid{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:48px;align-items:start}
  .idx-side{display:block;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;padding-bottom:12px}
  .fh-head{max-width:46rem}
  .dir.grid .res{height:100%}
}

/* very large text on laptops: give the reading column the room, drop the sidebar until wider */
@media (min-width:1024px) and (max-width:1279px){
  html[data-size="xl"] .topic-grid,html[data-size="xxl"] .topic-grid{display:block}
  html[data-size="xl"] .topic-side,html[data-size="xxl"] .topic-side{display:none}
  html[data-size="xl"] .topic-main > .jump,html[data-size="xxl"] .topic-main > .jump{display:flex}
  html[data-size="xl"] .topic-main > .tools,html[data-size="xxl"] .topic-main > .tools{display:flex}
  html[data-size="xxl"] .idx-grid{display:block}
  html[data-size="xxl"] .idx-side{display:none}
  html[data-size="xxl"] .idx-chips{display:block}
}

/* ── larger text on phones and small tablets: keep the header on one line ── */
.botnav a{font-size:min(.83rem,15px)}
.botnav a span{line-height:1.15;text-align:center}
@media (max-width:599px){
  html[data-size="l"] .mark span,html[data-size="l"] .mark b{font-size:min(1em,19px)}
  html[data-size="xl"] .mark span,html[data-size="xl"] .mark b,
  html[data-size="xxl"] .mark span,html[data-size="xxl"] .mark b{display:none}
  html[data-size="xl"] .helpnow,html[data-size="xxl"] .helpnow{font-size:16px;padding:0 14px;height:42px}
  html[data-size="xl"] .iconbtn,html[data-size="xxl"] .iconbtn{height:42px;min-width:42px}
  html[data-size="xxl"] .hdr-in{height:64px}
  html[data-size="xxl"] .sheet .panel{top:72px}
}
@media (max-width:899px){
  html[data-size="xl"] body,html[data-size="xxl"] body{padding-bottom:92px}
}
@media (min-width:600px) and (max-width:899px){
  html[data-size="xl"] .langbtn,html[data-size="xxl"] .langbtn{display:none}
}

@media (max-width:380px){
  html[data-size="l"] .mark span,html[data-size="l"] .mark b{display:none}
}
/* big text on laptops: trim header extras so nothing spills (language stays in the footer and settings) */
@media (min-width:900px) and (max-width:1279px){
  html[data-size="xl"] .langbtn,html[data-size="xxl"] .langbtn{display:none}
  html[data-size="xxl"] .iconbtn .lab{display:none}
  html[data-size="xxl"] .iconbtn{padding:0 10px}
  html[data-size="xxl"] .topnav a{padding:8px 9px}
}

/* header buttons sit on the right when the top nav is hidden */
@media (max-width:899px){ .topnav + .hdr-actions{margin-left:auto} }

/* ── light/dark switch in the header ── */
.themebtn .i-sun{display:none}
[data-theme="dark"] .themebtn .i-sun{display:inline-flex}
[data-theme="dark"] .themebtn .i-moon{display:none}
.themebtn span{display:inline-flex}
@media (max-width:439px){ .themebtn{display:none} }
html[data-size="xl"] .themebtn,html[data-size="xxl"] .themebtn{display:none}
@media (min-width:1024px){ html[data-size="xl"] .themebtn{display:inline-flex} }

/* ── home: search + ages get their own roomy panel, right under the greeting ── */
.home-tools{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:20px 18px 22px;margin:8px 0 12px;gap:0}
.home-search .label{display:block}
.home-age{padding:22px 0 0;margin-top:20px;border-top:1px solid var(--line)}
.home-age .chips{gap:10px}
.home-where{padding-top:30px}
.home-more{padding-top:12px}
.home-more .label,.home-where .label{margin-bottom:14px}
@media (min-width:600px){
  .home-tools{padding:26px 28px 28px;margin:12px 0 16px}
}
@media (min-width:1024px){
  .home-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:30px 36px 32px;align-items:start}
  .home-age{border-top:0;margin-top:0;padding:0 0 0 36px;border-left:1px solid var(--line)}
  .home-search{padding-right:36px}
  .home-where{padding-top:40px}
  .home-more{padding-top:20px}
}

/* popular shortcuts under the home search */
.popular{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:14px 0 0;font-size:.92rem;color:var(--ink3)}
.popular span{font-weight:700}
.popular a{color:var(--ink2);font-weight:700;text-decoration-color:var(--line2)}
.popular a:hover{color:var(--blue)}
/* phones: age chips become one swipeable row so the "where are you" cards stay close */
@media (max-width:599px){
  .home-age .chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:0;padding:2px 0 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .home-age .chips::-webkit-scrollbar{display:none}
  .home-age .chips .chip{flex:none;scroll-snap-align:start}
  .home-age .chips .chip:last-child{margin-right:24px}
  .popular{display:none}
}
@media (max-width:699px){ html[data-size="l"] .langbtn{display:none} }