/* ============================================================
   Lady Talk Matters Health Hub — "Warm editorial" design system
   Display: Fraunces (serif)  ·  Body: Hanken Grotesk
   ============================================================ */
:root{
  --paper:#f5efe4;        /* warm cream base   */
  --paper-2:#efe7d8;      /* alt section       */
  --card:#fffdf8;         /* warm white card   */
  --ink:#26201d;          /* warm near-black   */
  --ink-2:#4a403b;        /* secondary ink     */
  --muted:#7a6f67;        /* muted body        */
  --berry:#9d2b50;        /* signature accent  */
  --berry-deep:#7c1f3e;
  --ochre:#c0843a;        /* honey accent      */
  --sage:#5e7560;         /* muted sage        */
  --line:rgba(38,32,29,.16);
  --line-soft:rgba(38,32,29,.09);
  --shadow:0 18px 50px -28px rgba(54,30,24,.45);
  --radius:6px;
  --radius-lg:14px;
  --max:1200px;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);background:var(--paper);color:var(--ink);
  line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;
}
/* subtle paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--berry);color:var(--paper)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:560;letter-spacing:-.02em;line-height:1.05;font-optical-sizing:auto}
h1 em,h2 em{font-style:italic;color:var(--berry);font-weight:500}

.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.75rem 1rem;border-radius:4px;z-index:99}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Announce bar ---------- */
.announce{display:flex;gap:1rem;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font-size:.85rem;flex-wrap:wrap}
.announce span{background:var(--berry);padding:.2rem .6rem;border-radius:999px;font-weight:700;letter-spacing:.02em}
.announce p{margin:0;color:rgba(245,239,228,.78)}
.announce a{text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* ---------- Header ---------- */
/* The bar stays full-bleed (background + border span the whole width), but its
   contents are pulled in to the same centred max-width as the page body, so the
   brand lines up with the content's left edge and the nav with its right edge. On
   wide screens the header used to run ~300px past the content on both sides. */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:1rem max(clamp(1.1rem,3vw,2rem), calc((100% - var(--max)) / 2 + clamp(1.1rem,3vw,2rem)));background:rgba(245,239,228,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem;min-width:max-content}
.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--berry);color:var(--paper);font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:-.03em}
.brand strong{display:block;line-height:1.05;font-family:var(--font-display);font-weight:560;font-size:1.12rem}
.brand small{display:block;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.18em}
.site-nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.site-nav a{color:var(--ink-2);font-size:.96rem;font-weight:500;position:relative;padding:.15rem 0}
.site-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--berry);transition:width .25s ease}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::after{width:100%}
.header-actions{display:flex;gap:.6rem}
.menu-toggle{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;border-radius:999px;padding:.8rem 1.3rem;font-family:var(--font-body);font-weight:600;font-size:.97rem;line-height:1;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn-primary{background:var(--berry);color:var(--paper)}
.btn-primary:hover{background:var(--berry-deep);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{transform:translateY(-2px)}
.btn-light{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-light:hover{border-color:var(--ink)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--berry);color:var(--berry)}

/* ---------- Layout primitives ---------- */
.container{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,3vw,2rem)}
.section-pad{padding:clamp(3.5rem,7vw,6rem) 0}
.section-pad.compact{padding-top:3rem}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;color:var(--berry);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem}
.eyebrow::before{content:"";width:1.6rem;height:1.5px;background:var(--berry)}
.lead{font-size:1.18rem;color:var(--ink-2);max-width:54ch;line-height:1.55}

/* ---------- Hero (home) ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(3rem,6vw,5.5rem) 0 clamp(3.5rem,7vw,6rem);background:linear-gradient(180deg,var(--paper) 0,var(--paper-2) 100%)}
.hero::after{content:"";position:absolute;right:-6%;top:-20%;width:46vw;height:46vw;max-width:640px;max-height:640px;border-radius:50%;background:radial-gradient(circle,rgba(157,43,80,.10),transparent 68%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative}
.hero h1{font-size:clamp(2.7rem,6.2vw,5rem);letter-spacing:-.035em;margin:.2rem 0 1.3rem;max-width:15ch}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.8rem 0 1.4rem}
.safety-note{color:var(--muted);font-size:.9rem;margin:0;padding-left:1rem;border-left:2px solid var(--ochre)}

/* hero "contents" panel */
.hero-index{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem 1.5rem;box-shadow:var(--shadow)}
.hero-index-label{margin:.1rem 0 .9rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--muted)}
.hero-index-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.95rem 0;border-top:1px solid var(--line-soft);transition:padding .25s ease}
.hero-index-row:first-of-type{border-top:0}
.hero-index-row .num{font-family:var(--font-display);font-size:1.5rem;color:var(--berry);font-weight:520;width:2ch}
.hero-index-row .t strong{display:block;font-family:var(--font-display);font-size:1.18rem;font-weight:560;line-height:1.1}
.hero-index-row .t small{display:block;color:var(--muted);font-size:.86rem;margin-top:.1rem}
.hero-index-row .arrow{color:var(--muted);transition:transform .25s ease,color .25s ease}
.hero-index-row:hover{padding-left:.5rem}
.hero-index-row:hover .arrow{transform:translateX(4px);color:var(--berry)}

/* ---------- Section headings ---------- */
.section-heading{max-width:60ch;margin-bottom:2.4rem}
.schools-curriculum-heading{max-width:none}
.parents-guides-heading{max-width:86ch}
.sport-pathway-heading{max-width:78ch}
.section-heading h2{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.03em}
.row-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;max-width:none}
.row-heading a{color:var(--berry);font-weight:700;text-underline-offset:4px}
.row-heading a:hover{text-decoration:underline}

/* ---------- Pathway grid ---------- */
.pathway-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.pathway-card{padding:1.6rem 1.4rem 1.5rem;background:var(--card);transition:background .25s ease,transform .25s ease}
.pathway-card span{font-family:var(--font-display);color:var(--berry);font-weight:560;font-size:1.6rem}
.pathway-card h3{font-size:1.3rem;margin:.7rem 0 .5rem}
.pathway-card p{color:var(--muted);margin:0;font-size:.96rem}
.pathway-card:hover{background:var(--paper)}

/* ---------- Split / feature sections ---------- */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.split-grid h2,.info-card h2,.trust-grid h2,.signup-grid h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.split-grid p{color:var(--ink-2);font-size:1.06rem}
.reverse{grid-template-columns:1fr 1fr}
.feature-band{background:var(--paper-2)}
.assistant-preview{background:var(--paper-2)}
.muted{background:var(--paper-2)}

.modern-card{padding:1.8rem}
.dark-card{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:2rem}
.dark-card h2{color:var(--paper)}
.dark-card p{color:rgba(245,239,228,.74)}
.dark-card .tag{background:rgba(245,239,228,.12);color:var(--paper)}

.tag,.resource-card span,.article-card .tag{display:inline-flex;border-radius:999px;padding:.32rem .7rem;background:transparent;border:1px solid var(--line);color:var(--sage);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}

.icon-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.icon-list div{background:var(--card);padding:1.3rem}
.icon-list strong{font-family:var(--font-display);font-weight:560;font-size:1.08rem}
.icon-list p{margin:.3rem 0 0;color:var(--muted);font-size:.94rem}

.steps-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;display:grid;gap:1rem;background:var(--card)}
.steps-card div{display:grid;grid-template-columns:48px 1fr;gap:.2rem 1rem;align-items:start;border-bottom:1px solid var(--line-soft);padding-bottom:1rem}
.steps-card div:last-child{border-bottom:0;padding-bottom:0}
.steps-card span{grid-row:span 2;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--berry);color:var(--paper);font-family:var(--font-display);font-weight:560}
.steps-card strong{font-family:var(--font-display);font-weight:560;font-size:1.1rem}
.steps-card p{margin:0;color:var(--muted)}

/* ---------- Resource / article cards ---------- */
.resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.resource-card,.article-card{padding:1.4rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;gap:.55rem}
.resource-card:hover,.article-card:hover{transform:translateY(-4px);border-color:var(--berry);box-shadow:var(--shadow)}
.resource-card h3,.article-card h3{font-size:1.18rem;margin:.5rem 0 .15rem;line-height:1.15}
.resource-card p,.article-card p{color:var(--muted);font-size:.95rem;margin:0}
.resource-card a,.article-card a{margin-top:auto;font-weight:700;color:var(--berry);text-underline-offset:4px}
.resource-card a:hover,.article-card a:hover{text-decoration:underline}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
[class*="theme-"] .article-card .tag{border-color:transparent;background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent)}
.theme-kids .article-grid .article-card .tag{background:#fff4f6;color:#a64f72}
.theme-kids .article-grid .article-card:nth-child(3n+2) .tag{background:#f7f4ff;color:#806ab3}
.theme-kids .article-grid .article-card:nth-child(3n+3) .tag{background:#f2fbf6;color:#67836d}
.theme-parents .article-card .tag{background:#fff3dc;color:#8f5e22}
.theme-sport .article-card .tag{background:#fff4f6;color:#9f3d6c}
.theme-endo .article-card .tag{background:#f8edf3;color:#8a3a5e}
.theme-schools .article-card.is-static .tag{border-color:transparent;background:#f1eadc;color:#7a6b4d}
.theme-schools .article-grid .article-card.is-static:nth-child(3n+1) .tag{background:#eef4ea;color:#63795d}
.theme-schools .article-grid .article-card.is-static:nth-child(3n+2) .tag{background:#f6eaf1;color:#9a5f78}
.theme-schools .article-grid .article-card.is-static:nth-child(3n+3) .tag{background:#edeafb;color:#7267a4}
.pill-row{display:flex;gap:.45rem;flex-wrap:wrap;margin:.4rem 0}
.pill{display:inline-flex;padding:.3rem .6rem;border-radius:999px;background:var(--paper-2);color:var(--ink-2);font-size:.74rem;font-weight:600}

/* ---------- Info / trust / signup ---------- */
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.info-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;background:var(--card)}
.info-card h2{font-size:1.5rem;margin:.4rem 0 .7rem}
.info-card p{color:var(--muted)}
.trust-section{background:var(--ink);color:var(--paper)}
.trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3rem)}
.trust-grid h2{color:var(--paper)}
.trust-grid p{color:rgba(245,239,228,.72)}
.trust-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(245,239,228,.14);border:1px solid rgba(245,239,228,.14);border-radius:var(--radius-lg);overflow:hidden}
.trust-cards div{background:var(--ink);padding:1.3rem}
.trust-cards strong{font-family:var(--font-display);font-weight:560;color:var(--paper);font-size:1.06rem}
.trust-cards p{margin:.3rem 0 0}
.signup-band{background:linear-gradient(120deg,var(--paper-2),#e7dcc8)}
.signup-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}

/* ---------- Forms ---------- */
.form-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;background:var(--card)}
.form-card label{display:grid;gap:.35rem;color:var(--ink-2);font-size:.88rem;font-weight:600}
.form-card input,.form-card select,.form-card textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.85rem .95rem;font:inherit;background:var(--paper);color:var(--ink);transition:border-color .2s ease}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--berry)}
.form-card .btn,.form-card label:has(textarea),.form-card .form-note,.form-card .cf-turnstile,.form-card .form-status{grid-column:1/-1}
.form-note{font-size:.82rem;color:var(--muted);margin:0}
.form-wide{max-width:760px}
.form-status{margin:0;font-size:.92rem;font-weight:600;min-height:1.2em}
.form-status[data-state="pending"]{color:var(--muted)}
.form-status[data-state="success"]{color:var(--sage)}
.form-status[data-state="error"]{color:var(--berry)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);padding:3.2rem 0 1.3rem}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem;max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,3vw,2rem)}
.footer-grid>div>p{color:rgba(245,239,228,.6)}
.site-footer a{display:block;color:rgba(245,239,228,.72);margin:.45rem 0;font-size:.95rem}
.site-footer a:hover{color:var(--paper)}
.footer-brand{color:var(--paper)}
.site-footer h3{font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(245,239,228,.55);font-weight:700}
.footer-bottom{text-align:center;color:rgba(245,239,228,.5);border-top:1px solid rgba(245,239,228,.14);margin:2.2rem auto 0;padding-top:1.2rem;max-width:var(--max);font-size:.88rem}

/* ---------- Interior page hero & content ---------- */
.page-hero{background:linear-gradient(180deg,var(--paper),var(--paper-2));padding:clamp(3.5rem,7vw,5.5rem) 0;border-bottom:1px solid var(--line)}
.page-hero .container{max-width:920px}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4.2rem);letter-spacing:-.03em;margin:0 0 1rem}
.content-section{padding:clamp(2.5rem,5vw,4rem) 0}
.content-section.alt{background:var(--paper-2)}
.rich-copy{display:grid;gap:1.1rem}
.rich-copy h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.rich-copy h3{font-size:1.25rem;margin:.3rem 0;font-family:var(--font-display);font-weight:560}
.rich-copy p,.rich-copy li{color:var(--ink-2)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.3rem,3vw,2rem)}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.callout{border-left:3px solid var(--berry);background:var(--card);padding:1.1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;color:var(--ink-2)}
blockquote{margin:1.2rem 0;padding:1rem 1.15rem;border-left:3px solid var(--berry);border-radius:0 var(--radius) var(--radius) 0;background:var(--paper-2);color:var(--ink-2)}
blockquote p{margin:0}
.safe-box{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:1.6rem}
.safe-box h3{color:var(--paper);font-family:var(--font-display);font-weight:560}
.safe-box p,.safe-box li{color:rgba(245,239,228,.78)}
.theme-schools #get-resources .safe-box{background:linear-gradient(145deg,#f2f5ea,#f8edf3);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));box-shadow:0 18px 40px rgba(83,68,43,.08)}
.theme-schools #get-resources .safe-box h3{color:var(--ink)}
.theme-schools #get-resources .safe-box p,.theme-schools #get-resources .safe-box li{color:var(--ink-2)}
.theme-parents .safe-box{background:linear-gradient(145deg,#fff3dc,#f6eaf1);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:0 18px 40px rgba(83,68,43,.08)}
.theme-parents .safe-box h3{color:var(--ink)}
.theme-parents .safe-box p,.theme-parents .safe-box li{color:var(--ink-2)}
.theme-kids .safe-box{background:linear-gradient(145deg,#fff4f6,#f7f4ff);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));box-shadow:0 18px 40px rgba(90,42,66,.08)}
.theme-kids .safe-box h3{color:var(--ink)}
.theme-kids .safe-box p,.theme-kids .safe-box li{color:var(--ink-2)}
.theme-kids .safe-box .btn-light{background:var(--card);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
.theme-safety .safe-box{background:linear-gradient(145deg,#fff4f6,#f7f4ff 68%,#f2fbf6);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));box-shadow:0 18px 40px rgba(90,42,66,.08)}
.theme-safety .safe-box h2,.theme-safety .safe-box h3{color:var(--ink)}
.theme-safety .safe-box p,.theme-safety .safe-box li{color:var(--ink-2)}
.theme-privacy .safe-box{background:linear-gradient(145deg,#f2fbf6,#f7f4ff 58%,#fff8ef);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));box-shadow:0 18px 40px rgba(68,83,60,.08)}
.theme-privacy .safe-box h2,.theme-privacy .safe-box h3{color:var(--ink)}
.theme-privacy .safe-box p,.theme-privacy .safe-box li{color:var(--ink-2)}
.theme-about .safe-box{background:linear-gradient(145deg,#fff8ef,#fff4f6 55%,#f7f4ff);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));box-shadow:0 18px 40px rgba(90,42,66,.08)}
.theme-about .safe-box h2,.theme-about .safe-box h3{color:var(--ink)}
.theme-about .safe-box p,.theme-about .safe-box li{color:var(--ink-2)}
.theme-sport .safe-box{background:linear-gradient(145deg,#fff4f6,#f7f4ff);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));box-shadow:0 18px 40px rgba(90,42,66,.08)}
.theme-sport .safe-box h3{color:var(--ink)}
.theme-sport .safe-box p,.theme-sport .safe-box li{color:var(--ink-2)}
.theme-sport .safe-box a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.theme-endo .safe-box{background:linear-gradient(145deg,#fff4f6,#f7f4ff);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));box-shadow:0 18px 40px rgba(90,42,66,.08)}
.theme-endo .safe-box h3{color:var(--ink)}
.theme-endo .safe-box p,.theme-endo .safe-box li{color:var(--ink-2)}
.theme-endo .safe-box a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.theme-luma .safe-box{background:linear-gradient(145deg,#fff4f6,#f7f4ff);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));box-shadow:0 18px 40px rgba(90,42,66,.08)}
.theme-luma .safe-box h2,.theme-luma .safe-box h3{color:var(--ink)}
.theme-luma .safe-box p,.theme-luma .safe-box li{color:var(--ink-2)}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}
.small-note{font-size:.9rem;color:var(--muted)}
.topic-band{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem}
.topic-band h3{font-family:var(--font-display);font-weight:560;font-size:1.3rem;margin-top:0}

.check-list{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.check-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem .95rem;position:relative;padding-left:2.6rem}
.check-list li::before{content:"";position:absolute;left:.85rem;top:1.05rem;width:1rem;height:.55rem;border-left:2px solid var(--berry);border-bottom:2px solid var(--berry);transform:rotate(-45deg)}

/* article layout */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
.article-main{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.4rem)}
.article-main h2{font-size:1.6rem;margin-top:2rem}
.article-main h2:first-child{margin-top:0}
.article-main p{color:var(--ink-2)}
.article-side{position:sticky;top:108px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem}
.article-side a{display:block;color:var(--berry);font-weight:600;margin:.7rem 0;text-underline-offset:3px}
.article-side a:hover{text-decoration:underline}

.content-grid{display:grid;gap:1rem}
.content-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.3rem}
.demo-warning{background:#fbf0df;border:1px solid rgba(192,132,58,.4);border-radius:var(--radius);padding:1rem;color:#7d531f}

/* ---------- Resource filter ---------- */
.resource-filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.resource-filter button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.55rem .95rem;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.2s ease}
.resource-filter button:hover{border-color:var(--berry);color:var(--berry)}
.resource-filter button.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- Appointment prep ---------- */
.prep-app{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.output-box{white-space:pre-wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem;min-height:360px;font-size:.95rem;line-height:1.55}
.prep-summary-panel>.btn{margin-top:1rem}
.notice{border-left:3px solid var(--ochre);background:var(--card);padding:1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;color:var(--ink-2)}

@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.page-hero,.demo-warning,.prep-app>form,.prep-summary-panel>h2,.prep-summary-panel>.btn,.prep-summary-panel>.form-note,.content-section.alt{display:none!important}
  main,.content-section,.prep-app,.prep-summary-panel{display:block!important;padding:0!important;margin:0!important;max-width:none!important}
  .prep-summary-panel .output-box{border:0;box-shadow:none;padding:0;min-height:0;white-space:pre-wrap;font-size:12pt;line-height:1.55;color:#000;background:#fff}
}

/* ---------- AI assistant ---------- */
.assistant-hero{background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.assistant-hero .container{max-width:1060px}
.assistant-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(15rem,.65fr);gap:clamp(1.6rem,5vw,4rem);align-items:center}
.assistant-hero-copy{max-width:46rem}
.luma-avatar-card{justify-self:end;width:min(100%,18rem);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:30px;padding:1.4rem;background:linear-gradient(145deg,#fff4f6,#f7f4ff 62%,#f2fbf6);box-shadow:0 22px 48px rgba(90,42,66,.12);display:grid;gap:1rem;place-items:center;text-align:center}
.luma-avatar-orb{position:relative;width:clamp(8.5rem,18vw,11rem);aspect-ratio:1;border-radius:38% 44% 40% 46%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#fff 0 24%,#fbe3ec 25% 46%,#e9e2fb 74%,#dff2e7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 18px 38px rgba(90,42,66,.16)}
.luma-avatar-symbol{font-family:var(--font-display);font-size:clamp(4rem,8vw,5.8rem);font-weight:560;color:var(--accent);line-height:1}
.luma-avatar-spark{position:absolute;display:grid;place-items:center;border-radius:999px;background:var(--card);color:var(--accent);box-shadow:0 8px 18px rgba(68,36,24,.08);font-weight:800}
.luma-avatar-spark-one{right:.5rem;top:1rem;width:2.2rem;height:2.2rem}
.luma-avatar-spark-two{left:.55rem;bottom:1rem;width:2rem;height:2rem;color:#63795d}
.luma-avatar-caption span{display:block;font-weight:800;color:var(--ink)}
.luma-avatar-caption small{display:block;margin-top:.2rem;color:var(--muted);font-weight:600}
.assistant-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.3rem;align-items:start}
.assistant-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.assistant-top{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--line);background:var(--paper)}
.assistant-top strong{font-family:var(--font-display);font-weight:560}
.assistant-top span{display:block;color:var(--muted);font-size:.84rem}
.status-dot{display:inline-flex!important;align-items:center;gap:.4rem;border:1px solid rgba(94,117,96,.4);background:rgba(94,117,96,.1);color:var(--sage)!important;border-radius:999px;padding:.3rem .65rem;font-weight:700;font-size:.8rem}
.status-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sage)}
.chat-window{min-height:420px;max-height:520px;overflow:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.85rem;background:var(--card)}
.chat-message{max-width:84%;border-radius:var(--radius-lg);padding:.85rem 1.05rem;line-height:1.5}
.chat-message p{margin:0;color:inherit}
.chat-message.bot{align-self:flex-start;background:var(--paper-2);color:var(--ink);border-bottom-left-radius:4px}
.chat-message.user{align-self:flex-end;background:var(--berry);color:var(--paper);border-bottom-right-radius:4px}
.chat-message small{display:block;margin-top:.6rem;color:var(--muted);line-height:1.7}
.chat-message.user small{color:rgba(245,239,228,.78)}
/* The quoted article summary — reads as a cited resource, not the bot's own words. */
.chat-message .chat-cite{margin:.7rem 0 0;padding:.65rem .8rem;border-left:3px solid var(--berry);
  background:rgba(157,43,80,.06);border-radius:0 8px 8px 0;font-size:.95rem;line-height:1.55;color:var(--ink)}
.chat-message .chat-cite a{color:var(--berry);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.chat-message .chat-cite a:hover{color:var(--berry-deep)}
/* Safety disclaimer: a quiet footnote AFTER the answer, not a wall of text before it. */
.chat-message .chat-note{margin:.7rem 0 0;font-size:.82rem;line-height:1.5;color:var(--muted)}
/* Suggested-resource links should read as clickable links, not muted text. */
.chat-message small a{color:var(--berry);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.chat-message small a:hover{color:var(--berry-deep)}
.chat-message.user small a{color:var(--paper)}
.chat-form{display:grid;grid-template-columns:1fr auto;gap:.7rem;padding:1rem;border-top:1px solid var(--line);background:var(--card)}
.chat-form input{width:100%;border:1px solid var(--line);border-radius:999px;padding:.9rem 1.1rem;font:inherit;background:var(--paper)}
.chat-form input:focus{outline:none;border-color:var(--berry)}
.assistant-side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.1rem;display:grid;gap:.6rem}
.assistant-side h3{margin:.2rem 0;font-family:var(--font-display);font-weight:560}
.assistant-side button{text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:.75rem .85rem;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;transition:.2s ease}
.assistant-side button:hover{border-color:var(--berry);color:var(--berry)}

/* ---------- Motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.13s}
.hero-copy>*:nth-child(3){animation-delay:.21s}
.hero-copy>*:nth-child(4){animation-delay:.29s}
.hero-copy>*:nth-child(5){animation-delay:.37s}
.hero-index{animation:rise .8s cubic-bezier(.2,.7,.2,1) .3s backwards}

/* ---------- Responsive ---------- */

/* The header collapses to the burger menu EARLIER than the page layouts below.
   With eight nav items the header needs ~1060px, so between 981px and that width
   the nav used to overflow and scroll the whole page sideways. Keep this
   breakpoint above the widest the nav can get; the layout grids stay at 980px. */
@media (max-width:1100px){
  .site-nav,.header-actions{display:none}
  .menu-toggle{display:block;margin-left:auto;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.6rem .9rem;font:inherit;font-weight:600;cursor:pointer}
  .site-nav.open{display:flex;position:absolute;top:100%;left:1rem;right:1rem;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow);gap:.4rem}
  .site-nav.open a::after{display:none}
}

@media (max-width:980px){
  .hero-grid,.split-grid,.reverse,.trust-grid,.signup-grid,.prep-app,.two-col,.three-col,.article-layout,.assistant-shell,.assistant-hero-grid{grid-template-columns:1fr}
  .pathway-grid,.resource-grid,.article-grid{grid-template-columns:repeat(2,1fr)}
  .three-grid,.footer-grid{grid-template-columns:1fr}
  .icon-list,.trust-cards{grid-template-columns:1fr}
  .article-side{position:relative;top:auto}
  .announce{flex-wrap:wrap}
  .luma-avatar-card{justify-self:start;width:min(100%,16rem)}
}
@media (max-width:600px){
  .hero h1{font-size:2.5rem}
  .pathway-grid,.resource-grid,.article-grid{grid-template-columns:1fr}
  .form-card{grid-template-columns:1fr}
  .row-heading{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   DEPTH PASS — cycle motif · atmosphere · reveals · micro-detail
   ============================================================ */

/* Recurring "cycle / phase" mark on every eyebrow (brand device) */
.eyebrow::before{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--berry);background:radial-gradient(circle,var(--ochre) 0 2px,transparent 2.6px)}

/* Hero atmosphere: faint concentric cycle rings */
.hero::before{content:"";position:absolute;right:-7%;top:-34%;width:660px;height:660px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle, transparent 0 26px, rgba(38,32,29,.06) 26px 27px);
  -webkit-mask:radial-gradient(circle,#000 36%,transparent 70%);mask:radial-gradient(circle,#000 36%,transparent 70%)}

/* Atmosphere inside the dark moments */
.trust-section,.dark-card{position:relative;overflow:hidden}
.trust-section::before,.dark-card::before{content:"";position:absolute;right:-90px;bottom:-130px;width:360px;height:360px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle, transparent 0 22px, rgba(245,239,228,.07) 22px 23px);
  -webkit-mask:radial-gradient(circle,#000 38%,transparent 72%);mask:radial-gradient(circle,#000 38%,transparent 72%)}
.trust-section .container,.dark-card>*{position:relative;z-index:1}

/* Card hover: accent line sweeps in */
.resource-card,.article-card{position:relative;overflow:hidden}
.resource-card::after,.article-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--berry),var(--ochre));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.resource-card:hover::after,.article-card:hover::after{transform:scaleX(1)}

/* Animated underline for in-content links */
.rich-copy a:not(.btn),.article-main p a:not(.btn){color:var(--berry);
  background-image:linear-gradient(var(--berry),var(--berry));background-size:0% 1.5px;background-repeat:no-repeat;background-position:left 100%;
  transition:background-size .3s ease;padding-bottom:1px}
.rich-copy a:not(.btn):hover,.article-main p a:not(.btn):hover{background-size:100% 1.5px}

/* Editorial rhythm in articles: hairline-separated sections */
.article-main h2{border-top:1px solid var(--line-soft);padding-top:1.5rem;margin-top:1.9rem}

/* Pull-quote utility (available for editorial use) */
.pull-quote{font-family:var(--font-display);font-weight:500;font-style:italic;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.32;color:var(--ink);border-top:2px solid var(--berry);border-bottom:1px solid var(--line);padding:1.1rem 0;margin:1.8rem 0;max-width:38ch}

/* Scroll reveal — class added by JS only, so no-JS shows everything */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* Scroll-reveal is a desktop-only nicety. On mobile the IntersectionObserver can
   leave a section stuck at opacity:0 (content flashes then vanishes on some Android
   browsers, leaving only header + footer), so force everything visible with no
   transition at/below the mobile breakpoint. */
@media (max-width:980px){
  .reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important}
}

/* Focus-visible polish */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2.5px solid var(--berry);outline-offset:2px;border-radius:3px}

/* Berry scrollbar (webkit) */
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--berry);border:3px solid var(--paper-2);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--berry-deep)}

/* ============================================================
   FURTHER — statement moment · phase dividers · pathway identity
   ============================================================ */
:root{--plum:#7a3360}

/* Per-pathway accent identity */
.pathway-card{position:relative}
.pathway-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc,var(--berry));transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pathway-card:hover::after{transform:scaleY(1)}
.pathway-grid .pathway-card:nth-child(1){--acc:var(--berry)}
.pathway-grid .pathway-card:nth-child(2){--acc:var(--plum)}
.pathway-grid .pathway-card:nth-child(3){--acc:var(--ochre)}
.pathway-grid .pathway-card:nth-child(4){--acc:var(--sage)}
.pathway-card span{color:var(--acc,var(--berry))}
.hero-index a.hero-index-row:nth-of-type(1) .num{color:var(--berry)}
.hero-index a.hero-index-row:nth-of-type(2) .num{color:var(--plum)}
.hero-index a.hero-index-row:nth-of-type(3) .num{color:var(--ochre)}
.hero-index a.hero-index-row:nth-of-type(4) .num{color:var(--sage)}

/* Cycle-phase divider (waxing crescent → full) */
.phase-rule{display:flex;align-items:center;justify-content:center;gap:.65rem;max-width:var(--max);margin:0 auto;padding:clamp(2rem,5vw,3.4rem) clamp(1.1rem,3vw,2rem)}
.phase-rule::before,.phase-rule::after{content:"";flex:1;max-width:32%;height:1px;background:var(--line)}
.phase-rule i{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--berry);flex:none;background:linear-gradient(90deg,var(--berry) var(--f,0%),transparent var(--f,0%))}
.phase-rule i.p0{--f:0%}.phase-rule i.p1{--f:27%}.phase-rule i.p2{--f:52%}.phase-rule i.p3{--f:76%}.phase-rule i.p4{--f:100%}

/* Statement moment (full-bleed dark anchor) */
.statement{background:var(--ink);color:var(--paper);padding:clamp(4rem,9vw,7rem) 0;position:relative;overflow:hidden}
.statement::before{content:"";position:absolute;left:-120px;top:50%;transform:translateY(-50%);width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle, transparent 0 26px, rgba(245,239,228,.06) 26px 27px);
  -webkit-mask:radial-gradient(circle,#000 40%,transparent 72%);mask:radial-gradient(circle,#000 40%,transparent 72%)}
.statement .container{position:relative;z-index:1;max-width:980px}
.statement .eyebrow{color:var(--ochre)}
.statement .eyebrow::before{border-color:var(--ochre);background:radial-gradient(circle,var(--paper) 0 2px,transparent 2.6px)}
.statement-line{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,4.8vw,3.7rem);line-height:1.1;letter-spacing:-.02em;max-width:19ch;margin:.3rem 0 1.2rem;color:var(--paper);text-wrap:balance}
.statement-line em{font-style:italic;color:var(--ochre)}
.statement-sub{color:rgba(245,239,228,.76);max-width:54ch;font-size:1.12rem;margin:0 0 1.9rem}

/* Footer atmosphere */
.site-footer{position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle, transparent 0 24px, rgba(245,239,228,.05) 24px 25px);
  -webkit-mask:radial-gradient(circle,#000 42%,transparent 72%);mask:radial-gradient(circle,#000 42%,transparent 72%)}
.footer-grid,.footer-bottom{position:relative;z-index:1}

/* Premium micro-typography */
body{font-feature-settings:"liga" 1,"calt" 1;font-variant-numeric:oldstyle-nums}
.hero-index-row .num,.pathway-card span,.steps-card span,.brand-mark,.statement-line,h1,h2,h3{font-variant-numeric:lining-nums}
h1,h2,.statement-line{text-wrap:balance}
.lead,.statement-sub{text-wrap:pretty}
.hero h1{hanging-punctuation:first}

/* ============================================================
   EVEN FURTHER — per-pathway theming · footer wordmark · 404
   ============================================================ */
:root{--accent:var(--berry)}
.theme-periods{--accent:#9d2b50}
/* Section accents were retuned to sit in the homepage's warm berry/cream family:
   softer and more consistent than the original cool teal/green/deep-plum, while
   still distinct per section and dark enough for legible eyebrow/link text. */
.theme-endo{--accent:#8a3a5e}
.theme-kids{--accent:#b0587a}
.theme-luma{--accent:#b0587a}
.theme-safety{--accent:#b0587a}
.theme-privacy{--accent:#6f8168}
.theme-about{--accent:#b0587a}
.theme-parents{--accent:#a86a26}
.theme-schools{--accent:#6f8168}
/* Periods & Sport hub: a warm rose that suits the young, active audience. */
.theme-sport{--accent:#b5417a}

/* themed pages take on their accent for hero + editorial details */
[class*="theme-"] .page-hero{background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--accent) 13%,var(--paper-2)));border-bottom-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
[class*="theme-"] .eyebrow{color:var(--accent)}
[class*="theme-"] .eyebrow::before{border-color:var(--accent)}
[class*="theme-"] .callout{border-left-color:var(--accent)}
[class*="theme-"] blockquote{border-left-color:var(--accent)}
[class*="theme-"] .check-list li::before{border-color:var(--accent)}
[class*="theme-"] .topic-band h3{color:var(--accent)}
[class*="theme-"] .article-card a{color:var(--accent)}
[class*="theme-"] .article-card:hover{border-color:var(--accent)}
[class*="theme-"] .resource-card:hover::after,[class*="theme-"] .article-card:hover::after{background:linear-gradient(90deg,var(--accent),var(--ochre))}
[class*="theme-"] .resource-filter button:hover,[class*="theme-"] .resource-filter button.is-active{border-color:var(--accent)}
[class*="theme-"] .resource-filter button.is-active{background:var(--accent);color:var(--paper)}
.theme-safety .safety-card-grid .article-card:nth-child(3n+1) .tag{background:#fff4f6;color:#a64f72}
.theme-safety .safety-card-grid .article-card:nth-child(3n+2) .tag{background:#f7f4ff;color:#806ab3}
.theme-safety .safety-card-grid .article-card:nth-child(3n+3) .tag{background:#f2fbf6;color:#67836d}
.theme-safety .safety-card-grid .article-card{box-shadow:0 10px 26px rgba(68,36,24,.04)}
.theme-safety .callout{background:#fff8ef;border-color:#d7a265}
.theme-privacy .privacy-card-grid .article-card:nth-child(3n+1) .tag{background:#eef4ea;color:#63795d}
.theme-privacy .privacy-card-grid .article-card:nth-child(3n+2) .tag{background:#f7f4ff;color:#806ab3}
.theme-privacy .privacy-card-grid .article-card:nth-child(3n+3) .tag{background:#fff4f6;color:#a64f72}
.theme-privacy .privacy-card-grid .article-card{box-shadow:0 10px 26px rgba(68,83,60,.04)}
.theme-privacy .callout{background:#f2fbf6;border-color:#9eb59a}
.theme-about .about-card-grid .article-card:nth-child(3n+1) .tag{background:#fff4f6;color:#a64f72}
.theme-about .about-card-grid .article-card:nth-child(3n+2) .tag{background:#f7f4ff;color:#806ab3}
.theme-about .about-card-grid .article-card:nth-child(3n+3) .tag{background:#f2fbf6;color:#67836d}
.theme-about .about-card-grid .article-card{box-shadow:0 10px 26px rgba(90,42,66,.04)}
.theme-about .callout{background:#fff8ef;border-color:#d7a265}

/* giant faint wordmark watermark in the footer (CSS-only, all pages) */
.site-footer::after{content:"Lady Talk Matters";position:absolute;left:clamp(1rem,3vw,2rem);bottom:-.16em;
  font-family:var(--font-display);font-weight:560;font-size:clamp(3rem,11vw,8.5rem);line-height:.8;letter-spacing:-.03em;
  color:rgba(245,239,228,.045);white-space:nowrap;pointer-events:none;z-index:0}

/* 404 page */
.notfound{min-height:62vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.notfound::before{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:560px;height:560px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle, transparent 0 26px, rgba(38,32,29,.06) 26px 27px);
  -webkit-mask:radial-gradient(circle,#000 36%,transparent 70%);mask:radial-gradient(circle,#000 36%,transparent 70%)}
.notfound .inner{position:relative;z-index:1;max-width:620px;padding:clamp(3rem,8vw,6rem) clamp(1.1rem,3vw,2rem)}
.notfound .code{font-family:var(--font-display);font-weight:560;font-size:clamp(4rem,12vw,8rem);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.notfound .code em{font-style:italic;color:var(--berry)}
.notfound h1{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:1rem 0 .8rem}
.notfound p{color:var(--ink-2);font-size:1.1rem;margin:0 auto 1.8rem;max-width:46ch}
.notfound .cta-row{justify-content:center}

/* header + footer share the same LTM monogram (the floral emblem is used as the favicon) */

/* Photo feature (authentic imagery) */
.photo-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.photo-wrap{position:relative}
.photo-wrap::before{content:"";position:absolute;left:-16px;bottom:-16px;width:62%;height:58%;background:var(--ochre);opacity:.16;border-radius:var(--radius-lg);z-index:0}
.photo-frame{position:relative;z-index:1;margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.photo-frame img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.photo-frame figcaption{padding:.7rem 1rem;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line)}

/* Inline-content font-size classes (used by the editable-content system). */
.fs-sm { font-size: 0.85em; }
.fs-lg { font-size: 1.25em; }
.fs-xl { font-size: 1.6em; }
@media (max-width:980px){.photo-grid{grid-template-columns:1fr}.photo-wrap{max-width:420px;margin:0 auto}}

/* ---------- Schools sign-up + download hub ---------- */
/* Name/surname sit side by side on a roomy form, and stack on narrow screens. */
/* The sign-up form has ten fields, so give it more room than the side panel;
   an even 1fr 1fr split squeezed every input to about 200px. */
.signup-split{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.3rem,3vw,2rem);align-items:start}
@media (max-width:980px){.signup-split{grid-template-columns:1fr}}
/* Consent: the checkbox must sit beside its (long) label, not above it. */
/* Scoped under .form-card: the generic ".form-card label{display:grid}" rule has
   higher specificity than a lone .check-label, so the checkbox stacked ABOVE its
   sentence instead of sitting beside it. */
.form-card .check-label{grid-column:1/-1;display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;line-height:1.5;font-weight:500}
.check-label input[type="checkbox"]{flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.15rem}
/* Revealed only after a successful sign-up; `hidden` must win over the display. */
.download-hub{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.download-hub[hidden]{display:none}
.download-hub .article-card a{font-weight:800}

/* Cards that DESCRIBE rather than link. Everywhere else on the site an
   .article-card is a link target, so it lifts and lights up on hover. The schools
   module list and "what you can download" list have nothing to click — the modules
   are PDFs inside the ZIPs, not pages — so that hover is a promise the page can't
   keep. This keeps the card look and drops the interactive cues. */
.article-card.is-static{cursor:default}
.article-card.is-static:hover{transform:none;border-color:var(--line);box-shadow:none}
.article-card.is-static:hover::after{transform:scaleX(0)}

/* ---------- Schools: expandable curriculum modules ---------- */
/* Native <details> so it opens with a keyboard and reads correctly to screen
   readers without any JS. These DO respond to a click, unlike the .is-static
   cards, so they keep a pointer cursor and a hover cue. */
/* align-items:start so an expanded module doesn't stretch its row partner into a
   tall empty card. */
.module-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
@media (max-width:760px){.module-list{grid-template-columns:1fr}}
.module-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);
  padding:1.25rem 1.3rem;transition:border-color .25s ease,box-shadow .25s ease}
.module-card:hover{border-color:var(--berry);box-shadow:var(--shadow)}
.module-card[open]{border-color:var(--berry)}
.module-card summary{display:grid;gap:.5rem;cursor:pointer;list-style:none}
.module-card summary::-webkit-details-marker{display:none}
/* Chevron doubles as the affordance that this opens. */
/* The chevron lives in its own grid column rather than being absolutely positioned.
   A rotated "›" rendered its ink outside the pseudo-element's box and clipped the
   card's right border; this keeps it in normal flow so it cannot escape. */
.module-card summary{grid-template-columns:1fr auto;align-items:start}
.module-card summary > .tag{grid-column:1;justify-self:start}
.theme-schools .module-card summary > .tag{border-color:transparent;background:#eef4ea;color:#63795d}
.theme-schools .module-card:nth-child(4n+2) summary > .tag{background:#f6eaf1;color:#9a5f78}
.theme-schools .module-card:nth-child(4n+3) summary > .tag{background:#edeafb;color:#7267a4}
.theme-schools .module-card:nth-child(4n+4) summary > .tag{background:#fff3dc;color:#9b7245}
.module-card summary > .module-title,
.module-card summary > .module-desc{grid-column:1}
.module-card summary::after{content:"";grid-column:2;grid-row:1;align-self:center;
  width:.6rem;height:.6rem;margin-left:.75rem;
  border-right:2px solid var(--berry);border-bottom:2px solid var(--berry);
  transform:rotate(45deg);transform-origin:center;transition:transform .25s ease}
.module-card[open] summary::after{transform:rotate(-135deg)}
.module-card .module-title{font-family:var(--font-display);font-weight:560;font-size:1.18rem;line-height:1.15;padding-right:1.5rem}
.module-card .module-desc{color:var(--muted);font-size:.95rem}
.module-contents{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line-soft)}
.module-count{margin:0 0 .5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--sage)}
.module-contents ul{margin:0;padding-left:1.1rem;color:var(--ink-2);font-size:.94rem;line-height:1.7}

/* Honeypot field: kept in the DOM and fillable (so a naive bot completes it), but
   moved off-screen and out of the layout. Paired with aria-hidden + tabindex=-1 on
   the field so no real user — sighted, screen-reader or keyboard — ever reaches it. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ============================================================
   Homepage (2026 refresh) — namespaced .hp-* so it can't collide with the
   site-wide .hero/.btn/.pathway-card/etc. Uses the site design tokens and
   Fraunces/Hanken, matching the client's mockup proportions.
   ============================================================ */
.hp-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.05rem;border-radius:999px;
  background:#fff8f2;border:1px solid #eccbd9;color:var(--berry-deep);font-weight:800;font-size:.82rem;
  letter-spacing:.01em;margin-bottom:1.5rem;box-shadow:0 12px 30px rgba(157,43,80,.07)}

.hp-hero{background:
  radial-gradient(circle at 18% 20%,rgba(247,220,233,.7),transparent 32%),
  radial-gradient(circle at 80% 6%,rgba(239,176,113,.22),transparent 34%),
  linear-gradient(110deg,#fff7ef 0%,#f9eee9 52%,var(--paper-2) 100%);
  border-bottom:1px solid var(--line)}
.hp-hero-inner{max-width:var(--max);margin:0 auto;padding:clamp(3rem,6vw,4.6rem) clamp(1.1rem,3vw,2rem);
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.hp-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(3.2rem,6.8vw,6rem);
  line-height:1;letter-spacing:-.03em;margin:0 0 1.4rem}
.hp-hero h1 .accent{background:linear-gradient(90deg,var(--berry),#8976c8);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;font-weight:560}
.hp-hero .hp-lead{font-size:clamp(1.22rem,2.15vw,1.52rem);color:var(--ink-2);max-width:54ch;margin:0 0 1.6rem;line-height:1.42}
.hp-hero .hp-lead-support{font-size:clamp(1.1rem,1.85vw,1.32rem);color:var(--muted);margin-top:-.75rem;max-width:58ch}
.hp-cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:0 0 1.1rem}
.hp-safety{font-size:.95rem;color:var(--muted);margin:0;padding-left:1rem;border-left:2px solid var(--ochre)}

.hp-panel{background:rgba(255,250,243,.9);border:1px solid #e3d4c9;border-radius:28px;
  padding:1.6rem;box-shadow:var(--shadow)}
.hp-welcome-art{position:relative;min-height:520px;border:1px solid #e3d4c9;border-radius:34px;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),transparent 24%),
    radial-gradient(circle at 76% 75%,rgba(217,232,247,.72),transparent 32%),
    linear-gradient(135deg,rgba(247,220,233,.9),rgba(231,220,242,.72) 58%,rgba(219,234,223,.72));
  box-shadow:var(--shadow);overflow:hidden;display:grid;place-items:center;padding:2rem;text-align:center}
.hp-welcome-art::before{content:"";position:absolute;inset:2rem;border-radius:28px;
  border:1px solid rgba(255,255,255,.62);background:rgba(255,250,246,.26)}
.hp-welcome-art::after{content:"";position:absolute;right:-5rem;bottom:-5rem;width:17rem;height:17rem;
  border-radius:50%;background:repeating-radial-gradient(circle,rgba(157,43,80,.09) 0 1px,transparent 1px 22px)}
.hp-art-orb{position:relative;z-index:2;width:clamp(13rem,26vw,20rem);height:clamp(13rem,26vw,20rem);
  border-radius:42% 58% 54% 46% / 48% 42% 58% 52%;display:grid;place-items:center;
  background:
    radial-gradient(circle at 34% 24%,#fff 0 0,transparent 24%),
    linear-gradient(145deg,#f7dce9 0%,#eadcf7 54%,#eef8f2 100%);
  border:1px solid rgba(181,91,123,.22);box-shadow:0 28px 60px rgba(68,36,24,.13)}
.hp-art-logo{width:86%;height:auto;display:block;mix-blend-mode:multiply;filter:contrast(1.08);
  opacity:.9}
.hp-panel-title{font-weight:800;color:var(--berry-deep);font-size:1.1rem;margin:0 0 1rem}
.hp-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.hp-quick-card{background:#fffaf6;border:1px solid #e7d8ce;border-radius:18px;padding:1.1rem;
  min-height:150px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .2s ease,box-shadow .2s ease}
.hp-quick-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(68,36,24,.09)}
.hp-num{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-weight:800;
  color:var(--berry-deep);background:#f7dce9;margin-bottom:.8rem;font-family:var(--font-display)}
.hp-quick-card:nth-child(2) .hp-num{background:#dbeadf;color:#356247}
.hp-quick-card:nth-child(3) .hp-num{background:#d9e8f7;color:#365b77}
.hp-quick-card:nth-child(4) .hp-num{background:#f7edcf;color:#7a5b20}
.hp-quick-card h3{font-family:var(--font-display);font-weight:560;font-size:1.02rem;margin:0 0 .3rem;line-height:1.1}
.hp-quick-card p{font-size:.88rem;color:var(--muted);margin:0}
.hp-quick-card .hp-arrow{font-weight:800;color:var(--berry);margin-top:.8rem;font-size:.9rem}

.hp-intro{background:linear-gradient(180deg,var(--paper) 0%,#fffaf4 100%)}
.hp-intro-card{background:rgba(255,250,246,.82);border:1px solid #e2d4c9;border-radius:28px;padding:clamp(1.6rem,3vw,2.5rem);
  box-shadow:0 18px 45px rgba(68,36,24,.055);max-width:980px}
.hp-intro-card h2,.hp-feature-card h2{font-family:var(--font-display);font-weight:560;font-size:clamp(2rem,4vw,3.35rem);
  letter-spacing:-.02em;line-height:1.05;margin:0 0 1rem}
.hp-intro-card p:not(.hp-pill),.hp-feature-card p{font-size:1.08rem;line-height:1.7;color:var(--ink-2);max-width:76ch;margin:0 0 1rem}

.hp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.2rem;flex-wrap:wrap}
.hp-head h2{font-family:var(--font-display);font-weight:560;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.02em;margin:0}
.hp-head .hp-head-note{max-width:52ch;font-size:1.08rem;color:var(--muted);margin:0}
#start .hp-head{display:block}
#start .hp-head .hp-head-note{max-width:78ch;margin-top:1.25rem}

.hp-pathways{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.hp-path-card{background:var(--card);border:1px solid #e2d4c9;border-radius:22px;padding:1.4rem;
  min-height:290px;box-shadow:0 18px 45px rgba(68,36,24,.06);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s ease,box-shadow .2s ease}
.hp-path-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(68,36,24,.1)}
.hp-path-card::after{content:"";position:absolute;right:-44px;top:-44px;width:120px;height:120px;border-radius:50%;background:rgba(247,220,233,.6)}
.hp-path-card:nth-child(2)::after{background:rgba(219,234,223,.7)}
.hp-path-card:nth-child(3)::after{background:rgba(217,232,247,.7)}
.hp-path-card:nth-child(4)::after{background:rgba(247,237,207,.8)}
.hp-path-card:nth-child(5)::after{background:rgba(231,220,242,.7)}
.hp-path-card:nth-child(6)::after{background:rgba(38,32,29,.09)}
.hp-path-label{position:relative;z-index:1;width:44px;height:44px;border-radius:14px;background:#f7dce9;color:var(--berry-deep);
  display:grid;place-items:center;font-weight:800;margin-bottom:1.3rem;font-family:var(--font-display)}
.hp-path-card:nth-child(2) .hp-path-label{background:#dbeadf;color:#356247}
.hp-path-card:nth-child(3) .hp-path-label{background:#d9e8f7;color:#365b77}
.hp-path-card:nth-child(4) .hp-path-label{background:#f7edcf;color:#7a5b20}
.hp-path-card:nth-child(5) .hp-path-label{background:#e7dcf2;color:#5b3f77}
.hp-path-card:nth-child(6) .hp-path-label{background:var(--ink);color:#fff}
.hp-path-card h3{font-family:var(--font-display);font-weight:560;font-size:1.25rem;position:relative;z-index:1;margin:0 0 .5rem;line-height:1.1}
.hp-path-card h4{position:relative;z-index:1;margin:0 0 .7rem;font-size:.96rem;line-height:1.35;color:var(--berry-deep);font-weight:800}
.hp-path-card p{position:relative;z-index:1;font-size:.97rem;color:var(--muted);margin:0}
.hp-text-link{font-weight:800;color:var(--berry-deep);position:relative;z-index:1;margin-top:1rem;font-size:.95rem}

.hp-feature-strip{background:linear-gradient(120deg,#fff7ef 0%,#f8ece8 58%,#f4f6ee 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hp-feature-card{background:var(--card);border:1px solid #e2d4c9;border-radius:30px;padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:var(--shadow);display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:start}
.hp-feature-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.hp-feature-list li{background:#fffaf6;border:1px solid #e7d8ce;border-radius:18px;padding:1rem 1.1rem 1rem 3rem;
  position:relative;color:var(--ink-2);font-weight:700;line-height:1.45}
.hp-feature-list li::before{content:"✓";position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;background:#f7dce9;color:var(--berry-deep);font-weight:900}

.hp-luma{background:linear-gradient(130deg,#fff7ef,#f7dce9 52%,var(--paper-2));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hp-luma-card{background:var(--card);border:1px solid #e2d4c9;border-radius:30px;padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:center}
.hp-luma-card h2{font-family:var(--font-display);font-weight:560;font-size:clamp(1.9rem,3.5vw,3rem);letter-spacing:-.02em;margin:0 0 1rem}
.hp-luma-note{margin-top:.8rem}
.hp-chat{display:grid;gap:.7rem}
.hp-bubble{border-radius:18px;padding:.9rem 1.1rem;max-width:92%;font-size:.98rem;line-height:1.5}
.hp-bubble.q{background:var(--ink);color:var(--paper);justify-self:end;font-weight:600}
.hp-bubble.a{background:#f7ecf2;color:#3b2a27;justify-self:start}
.hp-bubble small{display:block;color:inherit;opacity:.65;margin-top:.4rem;font-size:.82rem}

.hp-band{background:var(--ink);color:var(--paper)}
.hp-band h2{color:var(--paper)}
.hp-band .hp-head-note{color:rgba(245,239,228,.8)}
.hp-band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.hp-band-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:1.4rem;min-height:200px;display:flex;flex-direction:column}
.hp-band-card .hp-tag{color:#f6bfd7;font-weight:800;font-size:.82rem;margin-bottom:.7rem;text-transform:uppercase;letter-spacing:.06em}
.hp-band-card h3{font-family:var(--font-display);font-weight:560;color:var(--paper);font-size:1.2rem;margin:0 0 .5rem;line-height:1.15}
.hp-band-card p{color:rgba(245,239,228,.78);font-size:.95rem;margin:0 0 1rem}
.hp-band-card a{color:#fff;font-weight:800;font-size:.95rem;margin-top:auto}

.hp-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.hp-trust-card{background:var(--card);border:1px solid #e2d4c9;border-radius:20px;padding:1.5rem}
.hp-trust-card h3{font-family:var(--font-display);font-weight:560;font-size:1.2rem;margin:0 0 .5rem}
.hp-trust-card p{color:var(--muted);font-size:.97rem;margin:0}

/* Ask Luma nav link, styled as a soft page-aware pill. The extra left margin
   (plus a hair-line divider) sets it apart from the plain links so it reads as a
   distinct call to action rather than a fifth, crammed-in nav item. */
.site-nav a.nav-ask{background:linear-gradient(135deg,color-mix(in srgb,var(--accent,var(--berry)) 14%,var(--card)),color-mix(in srgb,var(--accent,var(--berry)) 8%,var(--paper)));color:var(--accent,var(--berry));border:1px solid color-mix(in srgb,var(--accent,var(--berry)) 28%,var(--line));border-radius:999px;padding:.55rem 1.2rem;
  margin-left:.9rem;padding-left:1.2rem;box-shadow:0 8px 18px rgba(68,36,24,.06)}
.site-nav a.nav-ask::after{display:none}
.site-nav a.nav-ask:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--accent,var(--berry)) 22%,var(--card)),color-mix(in srgb,var(--accent,var(--berry)) 12%,var(--paper)));color:var(--accent,var(--berry));border-color:color-mix(in srgb,var(--accent,var(--berry)) 45%,var(--line));transform:translateY(-1px)}
/* thin separator before the CTA */
.site-nav a.nav-ask::before{content:"";position:absolute;left:-.9rem;top:50%;transform:translateY(-50%);
  width:1px;height:1.4rem;background:var(--line)}
.site-nav a.nav-ask{position:relative}
/* In the mobile burger menu the nav stacks vertically, so drop the CTA's left margin
   and divider — otherwise the pill sits offset with a stray line beside it. */
@media (max-width:1100px){
  .site-nav a.nav-ask{margin-left:0}
  .site-nav a.nav-ask::before{display:none}
}

@media (max-width:1050px){
  .hp-hero-inner,.hp-luma-card,.hp-feature-card{grid-template-columns:1fr}
  .hp-hero-inner{text-align:center;justify-items:center}
  .hp-hero-copy{max-width:980px;margin-inline:auto}
  .hp-hero h1{max-width:980px;margin-left:auto;margin-right:auto}
  .hp-hero .hp-lead,.hp-hero .hp-lead-support{margin-left:auto;margin-right:auto}
  .hp-cta-row{justify-content:center}
  .hp-safety{display:inline-block;text-align:left;max-width:980px}
  .hp-welcome-art{width:min(100%,980px)}
  .hp-pathways{grid-template-columns:repeat(2,1fr)}
  .hp-band-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .hp-quick-grid,.hp-pathways,.hp-band-grid,.hp-trust-grid{grid-template-columns:1fr}
  .hp-head{display:block}.hp-head .hp-head-note{margin-top:1rem}
}

/* Schools FAQ: a real 2-column grid so each question aligns row-by-row. The old
   two independent columns (3 items + 2 items) drifted out of line as answers varied
   in length. align-items:start keeps each row's questions on the same baseline. */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 3rem;align-items:start;margin-bottom:2rem}
.faq-item h3{margin:0 0 .5rem;font-size:1.2rem}
.faq-item p{margin:0;color:var(--muted)}
@media (max-width:720px){.faq-grid{grid-template-columns:1fr;gap:1.4rem}}

/* ============================================================
   PERIODS & SPORT hub — emoji "icon tile" cards, hero tiles,
   section bands, and per-article prev/next. Cards read the page
   accent, so on .theme-sport pages they take the rose accent.
   ============================================================ */
.sport-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1.1rem}
.sport-grid-follow{margin-top:1.1rem}
.sport-card{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem 1.35rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);text-decoration:none;color:var(--ink);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
a.sport-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.sport-card h3{font-family:var(--font-display);font-size:1.14rem;font-weight:560;line-height:1.16;margin:.2rem 0 0}
.sport-card p{color:var(--muted);font-size:.95rem;margin:0}
.sport-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,var(--card));font-size:1.6rem;line-height:1}
.sport-more{margin-top:auto;padding-top:.4rem;font-weight:700;font-size:.92rem;color:var(--accent)}
.sport-card.soft-pink{background:color-mix(in srgb,#d6608f 9%,var(--card))}
.sport-card.soft-lilac{background:color-mix(in srgb,#8f7bd6 9%,var(--card))}
.sport-card.soft-green{background:color-mix(in srgb,#6fae7d 11%,var(--card))}
.sport-card.soft-cream{background:color-mix(in srgb,#d8b45a 12%,var(--card))}
.theme-parents .sport-card .sport-ico{background:#fff3dc;color:#8f5e22}
.theme-parents .sport-card:nth-child(4n+2) .sport-ico{background:#f6eaf1;color:#9a5f78}
.theme-parents .sport-card:nth-child(4n+3) .sport-ico{background:#edeafb;color:#7267a4}
.theme-parents .sport-card:nth-child(4n+4) .sport-ico{background:#eef4ea;color:#63795d}
.theme-parents .visual-hero .hero-actions .btn-primary{background:var(--card);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:0 8px 18px rgba(68,36,24,.05)}
.theme-parents .visual-hero .hero-actions .btn-primary:hover{background:#fff8ef;border-color:color-mix(in srgb,var(--accent) 38%,var(--line));transform:translateY(-2px)}
.theme-parents .visual-hero .hero-actions .btn-dark{background:#f6eaf1;color:#9a5f78;border-color:#ead1dc}
.theme-parents .visual-hero .hero-actions .btn-dark:hover{background:#f2dde8;color:#8c4e68;transform:translateY(-2px)}
.sport-card.is-soon{border-style:dashed;background:var(--paper-2)}
.coming-soon{color:var(--muted);font-style:italic;margin:0}

/* --- Warmer "toward the mockup" treatment, scoped to the Periods & Sport pages
   (.theme-sport) so other sections keep the standard cards. Rounder pastel cards,
   friendlier icon tiles, a gradient hero art-panel and a gradient hero accent —
   the mockup's youthful feel for the 10-14 audience, on the site's type/tokens. */
.theme-sport .sport-card{border-radius:22px;padding:1.7rem 1.5rem;box-shadow:0 10px 26px rgba(55,43,56,.05)}
.theme-sport .sport-card h3{font-size:1.18rem}
.theme-sport .sport-ico{width:60px;height:60px;border-radius:18px;font-size:1.85rem;background:color-mix(in srgb,var(--accent) 14%,var(--card))}
.theme-sport .sport-card.soft-pink{background:#fff4f6}
.theme-sport .sport-card.soft-lilac{background:#f7f4ff}
.theme-sport .sport-card.soft-green{background:#f2fbf6}
.theme-sport .sport-card.soft-pink .sport-ico{background:#fcdfe6}
.theme-sport .sport-card.soft-lilac .sport-ico{background:#ebe3ff}
.theme-sport .sport-card.soft-green .sport-ico{background:#dff2e7}
.theme-sport .content-section.alt{background:color-mix(in srgb,#df6f86 6%,var(--paper-2))}
.theme-sport .sport-strip{background:linear-gradient(100deg,var(--ink),#3a2b40)}
.visual-hero .lead + .lead{margin-top:.8rem}

/* Gradient hero accent (rose -> lilac), echoing the mockup's headline */
[class*="theme-"] h1 .accent{background:linear-gradient(90deg,var(--accent),#8976c8);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;font-weight:560}

/* Two-column hub hero with a soft gradient sport-tile panel */
.sport-hero .container,.visual-hero .container{max-width:1160px}
.sport-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.sport-hero-panel{position:relative;min-height:300px;border-radius:30px;border:1px solid color-mix(in srgb,var(--accent) 18%,#efdfe3);box-shadow:var(--shadow);padding:1.5rem;display:flex;align-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,#fff4f6),color-mix(in srgb,var(--accent) 20%,#f7d7df) 48%,#e9e3fa)}
.sport-hero-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;width:100%}
.sport-hero-tiles:has(span:only-child){grid-template-columns:1fr;max-width:16rem;margin-inline:auto}
.sport-hero-tiles:has(span:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.sport-hero-tiles span{aspect-ratio:1;display:grid;place-items:center;border-radius:20px;font-size:clamp(4.5rem,7vw,6.5rem);line-height:1;background:#fff;box-shadow:0 8px 22px rgba(55,43,56,.07)}
.sport-hero-tiles:has(span:only-child) span{font-size:clamp(6.5rem,11vw,9rem);background:#f7f4ff}
.sport-hero-tiles:has(span:nth-child(2):last-child) span{font-size:clamp(5.5rem,9vw,8rem)}
.sport-hero-tiles span:nth-child(1){background:#fff4f6}
.sport-hero-tiles span:nth-child(2){background:#f7f4ff}
.sport-hero-tiles span:nth-child(3){background:#f2fbf6}
.sport-hero-tiles span:nth-child(4){background:#fffdf8}
.theme-parents .sport-hero-tiles span{filter:saturate(.74) contrast(.92) brightness(1.06)}
.theme-parents .sport-hero-tiles span:nth-child(2),.theme-parents .sport-hero-tiles span:nth-child(3){filter:saturate(.5) contrast(.88) brightness(1.1)}
.transparent-hero-image{min-height:300px;display:grid;place-items:center}
.transparent-hero-image span{display:block;font-size:clamp(10rem,19vw,17rem);line-height:1;filter:drop-shadow(0 22px 34px rgba(90,42,66,.16))}
.theme-schools .transparent-hero-image span{opacity:.9;filter:saturate(.58) contrast(.88) brightness(1.08) drop-shadow(0 22px 34px rgba(90,42,66,.13))}
@media (max-width:820px){
  .sport-hero-grid{grid-template-columns:1fr}
  .sport-hero-panel,.transparent-hero-image{min-height:200px}
  .transparent-hero-image span{font-size:clamp(7rem,36vw,10rem)}
}

/* Kids & Teens topic cards */
.kids-topic-card .kids-topic-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:color-mix(in srgb,var(--accent) 12%,var(--card));font-size:1.95rem;line-height:1;margin:.25rem 0 .1rem;box-shadow:0 10px 22px rgba(68,36,24,.06)}
.kids-topic-card:nth-child(3n+1) .kids-topic-icon{background:#fff4f6}
.kids-topic-card:nth-child(3n+2) .kids-topic-icon{background:#f7f4ff}
.kids-topic-card:nth-child(3n+3) .kids-topic-icon{background:#f2fbf6}

/* "Simple rule" band */
.rule-band{text-align:center;max-width:46rem;margin:0 auto}
.rule-band h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.25rem 0 .55rem}
.rule-band p{color:var(--ink-2);font-size:1.05rem;margin:0}

/* Period-pants strip */
.sport-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem)}
.sport-strip h2{color:var(--paper);font-family:var(--font-display);font-weight:560;margin:.15rem 0 .5rem;font-size:clamp(1.6rem,3vw,2.15rem)}
.sport-strip p{color:rgba(245,239,228,.82);max-width:40rem;margin:0}
.sport-strip .eyebrow{color:#f3bac7}
.sport-strip .eyebrow::before{border-color:#f3bac7}

/* Simple link lists inside .safe-box panels */
.link-list{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.link-list a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.link-list a:hover{text-decoration-color:currentColor}

/* Per-article previous / next (Periods & Sport articles) */
.article-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.prevnext-link{display:flex;flex-direction:column;gap:.25rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:border-color .2s ease}
.prevnext-link:hover{border-color:var(--accent)}
.prevnext-link.next{text-align:right}
.prevnext-dir{font-size:.78rem;font-weight:700;color:var(--accent);letter-spacing:.03em;text-transform:uppercase}
.prevnext-title{font-size:.98rem;font-weight:600;line-height:1.2}

@media (max-width:600px){
  .article-prevnext{grid-template-columns:1fr}
  .prevnext-link.next{text-align:left}
}

/* ============================================================
   PARENTS & CARERS hub — reassurance box, "what you could say"
   script boxes, sidebar groups and the guide prev/next nav.
   Cards reuse .sport-card; these are the section-specific bits.
   ============================================================ */
.parents-msg{background:color-mix(in srgb,var(--accent) 9%,var(--card));border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.2rem;margin:1.1rem 0 0;font-weight:500;color:var(--ink)}
.parents-scripts{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem}
.parents-script{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:.85rem 1.05rem;color:var(--ink-2)}
.parents-script strong{color:var(--ink)}
.article-main h3{font-family:var(--font-display);font-weight:560;font-size:1.14rem;margin:1.2rem 0 .1rem}
.article-main h3+p{margin-top:.15rem}

/* Sidebar with three labelled link groups */
.parents-aside strong{display:block;font-family:var(--font-display);font-weight:560;font-size:1.02rem;margin:1.35rem 0 .2rem;color:var(--ink)}
.parents-aside strong:first-child{margin-top:0}

/* Back-to-landing / previous / next guide navigation */
.parents-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:2.1rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.parents-nav a{display:flex;flex-direction:column;gap:.22rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:border-color .2s ease,transform .2s ease}
.parents-nav a:hover{border-color:var(--accent);transform:translateY(-2px)}
.parents-nav .nav-label{font-size:.75rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}
.parents-nav .nav-title{font-size:.92rem;font-weight:600;line-height:1.2}
.parents-nav .next{text-align:right}
.parents-nav-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){
  .parents-nav,.parents-nav-2{grid-template-columns:1fr}
  .parents-nav .next{text-align:left}
}