/* ==========================================================================
   SO What Works? website, 2026 rebrand prototype
   Colours come from palette.css (the brand kit file, unchanged). This file maps
   them to web roles and adds type, spacing and components.
   Light = the Print (coated) theme values; dark = the Night theme values.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, subset to Latin, woff2) ---------- */
@font-face{font-family:"Fraunces";src:url("../fonts/Fraunces-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/Fraunces-SemiBoldItalic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url("../fonts/Lora-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("../fonts/Lora-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url("../fonts/Lora-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. Web tokens ---------- */
:root{
  color-scheme:light dark;
  /* roles (colours from palette.css) */
  --bg:var(--paper);
  --bg-alt:var(--surface);
  --text:var(--ink);
  --text-2:var(--muted);
  --link:var(--blue-deep);
  --accent-text:var(--berry-deep);
  --line:var(--rule);            /* dividers, 3:1 on paper */
  --control:var(--rule-strong);  /* input and checkbox borders */
  --btn-bg:var(--berry-deep);
  --btn-fg:var(--on-strong);
  --hero-bg:var(--night);
  --hero-fg:var(--on-night);
  --focus:#005799;               /* design system token `focus`, print theme */
  --shadow:0 1px 2px rgba(43,43,42,.08),0 8px 24px rgba(64,35,81,.10);

  /* type */
  --font-display:"Fraunces",Georgia,serif;
  --font-text:"Lora",Georgia,"Times New Roman",serif;
  --font-label:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --fs-cover:clamp(2.5rem,1.4rem + 4.6vw,4.5rem);
  --fs-page:clamp(2.25rem,1.6rem + 2.6vw,3.25rem);
  --fs-statement:clamp(1.75rem,1.35rem + 1.6vw,2.375rem);
  --fs-heading:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --fs-standfirst:clamp(1.1875rem,1.1rem + .4vw,1.4375rem);
  --fs-body:1.125rem;     /* 18 px */
  --fs-small:1rem;        /* 16 px, never smaller for reading text */
  --fs-label:.875rem;     /* 14 px labels (print uses 7 to 8 pt) */

  /* space (design system space-1..8, plus web section steps) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
  --gutter:clamp(16px,4vw,40px);
  --measure:680px;
  --wrap:1200px;
  --radius-sm:4px;--radius-md:8px;
  --target:44px;
  --stripe-h:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --focus:#ffd84a;                /* focus token, Night theme */
    --btn-bg:var(--berry-deep);     /* #ff85b0 with on-strong #170f1d */
    --shadow:none;
  }
}
/* optional manual override hooks (not wired to a toggle in the prototype) */
:root[data-theme="dark"]{--focus:#ffd84a;--shadow:none}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--s4)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-text);font-size:var(--fs-body);line-height:1.6;text-rendering:optimizeLegibility;overflow-wrap:break-word}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:1.1;letter-spacing:-.01em;margin:0 0 var(--s4);color:var(--text);text-wrap:balance}
h1{font-size:var(--fs-page);line-height:1.05}
h2{font-size:var(--fs-statement);line-height:1.15}
h3{font-size:var(--fs-heading);line-height:1.25}
h4{font-size:1.125rem;line-height:1.3}
p,ul,ol,dl,figure,blockquote,table{margin:0 0 var(--s4)}
p{max-width:var(--measure);text-wrap:pretty}
/* Generic link colour is zero-specificity (:where) so no component rule, button or night surface can lose to it. */
:where(a){color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
:where(a):hover{text-decoration-thickness:2px}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:var(--s8) 0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
::selection{background:var(--sun);color:var(--on-bright)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.flow>*+*{margin-top:var(--s4)}

/* skip link: first focusable element, visible on focus */
.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:100;background:var(--night);color:var(--on-night);font-family:var(--font-label);font-weight:700;padding:var(--s3) var(--s4);border-radius:var(--radius-md);text-decoration:none;min-height:var(--target);display:inline-flex;align-items:center}
.skip-link:focus{top:var(--s4);outline:2px solid var(--focus);outline-offset:2px}

/* ---------- 4. Labels ---------- */
.eyebrow{font-family:var(--font-label);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin:0 0 var(--s3);line-height:1.3}
.standfirst{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:var(--fs-standfirst);line-height:1.4;max-width:var(--measure)}
.meta{font-family:var(--font-label);font-size:var(--fs-label);color:var(--text-2);line-height:1.5}
.draft{display:inline-block;font-family:var(--font-label);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:var(--on-bright);padding:2px 8px;border-radius:var(--radius-sm);vertical-align:middle;margin-inline-end:var(--s2)}
.draft-block{border:2px dashed var(--rule-strong);padding:var(--s4);border-radius:var(--radius-sm)}
/* print section header: hue bar, tint band, black label */
.section-label{display:flex;align-items:center;gap:var(--s3);background:var(--hue-tint,var(--berry-tint));color:var(--text);font-family:var(--font-label);font-weight:700;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;padding:var(--s2) var(--s3);border-inline-start:6px solid var(--hue,var(--berry));margin:0 0 var(--s4);max-width:max-content}
.section-label img{width:24px;height:24px}
.hue-berry{--hue:var(--berry);--hue-tint:var(--berry-tint)}
.hue-plum{--hue:var(--plum);--hue-tint:var(--plum-tint)}
.hue-blue{--hue:var(--blue);--hue-tint:var(--blue-tint)}
.hue-teal{--hue:var(--teal);--hue-tint:var(--teal-tint)}
.hue-orange{--hue:var(--orange);--hue-tint:var(--orange-tint)}
.hue-sun{--hue:var(--sun);--hue-tint:var(--sun-tint)}

/* the stripe: six equal bands, once per surface, decorative */
.stripe{height:var(--stripe-h);background:linear-gradient(90deg,var(--plum) 0 16.666%,var(--berry) 0 33.333%,var(--orange) 0 50%,var(--sun) 0 66.666%,var(--teal) 0 83.333%,var(--blue) 0 100%)}

/* theme-dependent images: logo and icon swaps */
.for-dark{display:none!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .for-light{display:none!important}
  :root:not([data-theme="light"]) .for-dark{display:block!important}
  :root:not([data-theme="light"]) .icon.for-dark{display:inline-block!important}
}
.icon{width:24px;height:24px;flex:none;display:inline-block}

/* ---------- 5. Buttons and links ---------- */
.btn,.btn:link,.btn:visited,.btn:hover,.btn:active,.btn:focus-visible{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;min-width:var(--target);padding:var(--s3) var(--s6);border-radius:var(--radius-md);border:2px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);font-family:var(--font-label);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px}
.btn.btn--ghost,.btn.btn--ghost:link,.btn.btn--ghost:visited,.btn.btn--ghost:hover{background:transparent;color:var(--text);border-color:currentColor}
.btn--bright{--btn-bg:var(--sun);--btn-fg:var(--on-bright)}
.btn[aria-disabled="true"]{cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s6)}
.link-arrow{font-family:var(--font-label);font-weight:700;font-size:1rem;display:inline-flex;align-items:center;min-height:var(--target);gap:var(--s2)}
.link-arrow::after{content:"\2192";text-decoration:none;display:inline-block}

/* ---------- 6. Header and navigation ---------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line)}
.header-bar{display:flex;align-items:center;gap:var(--s4);min-height:76px;padding-block:var(--s3);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;min-height:var(--target);margin-inline-end:auto;text-decoration:none}
.brand img{width:auto;height:40px}
/* the reversed lockup carries 16/132 of padding: draw it taller and pull the padding back so the artwork matches */
.brand img.for-dark{height:52px;margin:-6px}
.crisis-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--target);padding:var(--s2) var(--s3);border:2px solid var(--accent-text);border-radius:var(--radius-md);color:var(--accent-text);font-family:var(--font-label);font-weight:700;font-size:.9375rem;text-decoration:none;line-height:1.2}
.crisis-link:hover{text-decoration:underline}
.nav-toggle{display:none;align-items:center;gap:var(--s2);min-height:var(--target);min-width:var(--target);padding:var(--s2) var(--s3);background:transparent;color:var(--text);border:2px solid var(--control);border-radius:var(--radius-md);font-family:var(--font-label);font-weight:700;font-size:1rem;cursor:pointer}
.nav-toggle .bars{width:18px;height:12px;position:relative;border-block:2px solid currentColor}
.nav-toggle .bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)}
.primary-nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:var(--s2) var(--s3);font-family:var(--font-label);font-weight:600;font-size:1rem;color:var(--text);text-decoration:none;border-radius:var(--radius-sm)}
.primary-nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.primary-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.4em;text-decoration-color:var(--berry)}
/* DOM order = visual order at every width: brand, menu button, nav, crisis link */
@media (max-width:1079px){
  .js .nav-toggle{display:inline-flex}
  .header-bar .primary-nav{flex-basis:100%}
  .js .primary-nav[data-open="false"]{display:none}
  .primary-nav ul{flex-direction:column;gap:0;padding-block:var(--s2);border-top:1px solid var(--line)}
  .primary-nav a{width:100%;padding-inline:0}
}
@media (max-width:640px){
  /* phones: logo and Menu on the first row, the crisis link as its own full-width row, never hidden */
  .brand img.for-light{height:34px}
  .brand img.for-dark{height:44px;margin:-5px}
  .header-bar{gap:var(--s2) var(--s3)}
  .header-bar .crisis-link{flex-basis:100%;justify-content:center}
}
@media (max-width:359px){
  .brand img.for-light{height:30px}
  .brand img.for-dark{height:40px;margin:-5px}
}

/* breadcrumbs */
.breadcrumbs{font-family:var(--font-label);font-size:var(--fs-label);padding-block:var(--s4) 0}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.breadcrumbs li+li::before{content:"/";margin-inline-end:var(--s2);color:var(--text-2)}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--link)}
.breadcrumbs [aria-current]{display:inline-flex;align-items:center;min-height:var(--target);color:var(--text-2)}

/* ---------- 7. Sections ---------- */
.section{padding-block:clamp(48px,6vw,96px)}
.section--alt{background:var(--bg-alt)}
.section--tight{padding-block:var(--s12)}
.section-head{max-width:var(--measure);margin-bottom:var(--s8)}
.section-head p{color:var(--text)}
.grid{display:grid;gap:var(--s6)}
@media (min-width:720px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:720px) and (max-width:1079px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.split{display:grid;gap:var(--s8);align-items:center}
@media (min-width:880px){.split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.split--rev>:first-child{order:2}}

/* night surfaces (hero, footer, callouts) */
.on-night{background:var(--hero-bg);color:var(--hero-fg);--text:var(--on-night);--text-2:var(--on-night);--link:var(--on-night);--focus:var(--sun);--accent-text:var(--sun);--control:var(--on-night)}
.on-night h1,.on-night h2,.on-night h3{color:var(--on-night)}
.on-night .btn{--btn-bg:var(--sun);--btn-fg:var(--on-bright)}
.on-night .btn.btn--ghost,.on-night .btn.btn--ghost:link,.on-night .btn.btn--ghost:visited,.on-night .btn.btn--ghost:hover{color:var(--on-night);background:transparent;border-color:var(--on-night)}
.on-night .meta{color:var(--on-night)}

/* ---------- 8. Hero ---------- */
.hero{position:relative}
.hero .wrap{padding-block:clamp(48px,7vw,104px) clamp(48px,6vw,88px)}
.hero h1{font-size:var(--fs-cover);line-height:1;max-width:14ch;margin-bottom:var(--s6)}
.hero h1 .hl{color:var(--berry)}
.hero .standfirst{color:var(--on-night)}
.status{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-label);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s4);color:var(--sun)}
.page-hero .wrap{padding-block:clamp(40px,5vw,72px) clamp(40px,5vw,64px)}
.page-hero h1{max-width:20ch}
.page-hero .standfirst{margin:0}

/* ---------- 9. Covers (HTML mock-ups until the new cover art is final) ---------- */
.cover{--ratio:5.5/8.5;aspect-ratio:var(--ratio);background:var(--hero-bg);color:var(--on-night);display:flex;flex-direction:column;justify-content:space-between;padding:9% 8% 7%;box-shadow:0 2px 4px rgba(0,0,0,.18),0 16px 32px rgba(23,15,29,.28);border-radius:2px 4px 4px 2px;position:relative;overflow:hidden;width:100%;container-type:inline-size}
.cover .stripe{height:4.5cqi;margin-inline:-9%;}
.cover .c-lockup img{width:100%;height:auto}
.cover .c-sub{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:6.4cqi;line-height:1.3;margin:0}
.cover .c-kind{font-family:var(--font-label);font-weight:700;font-size:5.6cqi;letter-spacing:.12em;text-transform:uppercase;margin:0}
.cover .c-author{font-family:var(--font-label);font-weight:700;font-size:6cqi;letter-spacing:.14em;text-transform:uppercase;margin:0}
.cover .c-title{font-family:var(--font-display);font-weight:900;font-size:13cqi;line-height:.98;margin:0}
.cover .c-title .hl{color:var(--berry)}
.cover .c-imprint{width:46%}
.cover--workbook{--ratio:8.5/11}
.cover--a4{--ratio:210/297}
.cover-stack{width:100%;max-width:520px;margin-inline:auto;display:flex;align-items:flex-end;justify-content:center;padding-block:var(--s4)}
.cover-stack .cover{flex:none}
.cover-stack .cover--workbook{width:40%}
.cover-stack .cover--workbook:first-child{margin-inline-end:-9%;transform:rotate(-3deg)}
.cover-stack .cover--workbook:last-child{margin-inline-start:-9%;transform:rotate(3deg)}
.cover-stack .cover--book{width:28%;position:relative;z-index:2;outline:3px solid var(--hero-bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cover{outline:1px solid var(--rule)}}

/* ---------- 10. Cards ---------- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s6);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--s3);height:100%}
.card h3{margin:0}
.card p{margin:0}
.card .card-foot{margin-top:auto;padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.product-card .cover{margin:0 auto var(--s4);max-width:100%}
/* same printed height for every cover in a row, so titles line up: 300 px tall */
.product-card .cover--book{width:194px}
.product-card .cover--workbook{width:232px}
.product-card .cover--a4{width:212px}
.product-card h3 a{color:var(--text);text-decoration:none}
.product-card h3 a:hover{text-decoration:underline}
/* the whole card is not a link: the title link carries the name; the button is a separate target */
.facts{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0}
.facts li{font-family:var(--font-label);font-size:var(--fs-label);font-weight:600;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px var(--s2);line-height:1.6}
.status-badge{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-label);font-weight:700;font-size:var(--fs-label);color:var(--text);background:var(--sun-tint);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px var(--s2) 2px var(--s1)}
.status-badge .icon{width:20px;height:20px}
.price{font-family:var(--font-label);font-weight:700;font-size:1.25rem}
.price small{font-weight:400;font-size:var(--fs-label);color:var(--text-2)}

/* GROWTH and DESIGN letter lists */
.acrostic{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.acrostic li{display:grid;grid-template-columns:48px 1fr;gap:var(--s3);align-items:center}
.acrostic .letter{width:48px;height:48px;display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:1.75rem;line-height:1;background:var(--hue-tint);border-radius:var(--radius-sm)}
.acrostic dt,.acrostic .term{font-family:var(--font-label);font-weight:700;font-size:1rem;line-height:1.3}
.acrostic .desc{display:block;font-size:var(--fs-small);line-height:1.45}

/* ---------- 11. Forms ---------- */
.form{display:grid;gap:var(--s4);max-width:520px}
.field{display:grid;gap:var(--s1)}
.field label,.fieldset legend{font-family:var(--font-label);font-weight:700;font-size:1rem;color:var(--text)}
.field .hint{font-family:var(--font-label);font-size:var(--fs-label);color:var(--text-2);margin:0}
.on-night .field .hint{color:var(--on-night)}
.input,.textarea,.select{width:100%;min-height:48px;padding:var(--s3);font:inherit;font-family:var(--font-label);font-size:1rem;color:var(--ink);background:var(--paper);border:2px solid var(--control);border-radius:var(--radius-sm)}
.textarea{min-height:160px;resize:vertical;line-height:1.5}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.on-night .input{border-color:var(--on-night)}
.check{display:grid;grid-template-columns:28px 1fr;gap:var(--s3);align-items:start;font-size:var(--fs-small);line-height:1.45}
.check input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--berry-deep)}
.embed-slot{position:relative;border:2px dashed currentColor;border-radius:var(--radius-sm);padding:var(--s6) var(--s4) var(--s4)}
.embed-slot::before{content:attr(data-slot);position:absolute;top:-12px;left:var(--s3);background:var(--sun);color:var(--on-bright);font-family:var(--font-label);font-weight:700;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-sm)}
.form-status{font-family:var(--font-label);font-size:1rem;font-weight:600;margin:0}
.fine{font-family:var(--font-label);font-size:var(--fs-label);line-height:1.5;margin:0}

/* ---------- 12. Callouts, lists, tables ---------- */
.callout{--link:var(--text);display:grid;grid-template-columns:32px 1fr;gap:var(--s3);padding:var(--s6);border-radius:var(--radius-sm);background:var(--hue-tint,var(--berry-tint));color:var(--text)}
.callout .icon{width:32px;height:32px}
.callout>div>:last-child{margin-bottom:0}
.answer{border-top:4px solid var(--berry);background:var(--bg-alt);padding:var(--s6);margin:0 0 var(--s8);max-width:var(--measure)}
.answer strong{font-family:var(--font-label);font-weight:700}
.steps{counter-reset:step;list-style:none;padding:0;display:grid;gap:var(--s4);max-width:var(--measure)}
.steps li{counter-increment:step;display:grid;grid-template-columns:48px 1fr;gap:var(--s3);align-items:start}
.steps li::before{content:counter(step);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--sun);color:var(--on-bright);font-family:var(--font-label);font-weight:700;font-size:1.125rem}
.steps strong{font-family:var(--font-label);font-weight:700}
.table-wrap{overflow-x:auto;max-width:100%}
.table-wrap:focus-visible{outline:2px solid var(--focus)}
table{border-collapse:collapse;width:100%;font-family:var(--font-label);font-size:1rem}
caption{text-align:left;font-family:var(--font-display);font-weight:900;font-size:var(--fs-heading);padding-bottom:var(--s3)}
th,td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
thead th{border-bottom:2px solid var(--rule-strong);font-weight:700}
tbody th{font-weight:700}
.helplines{list-style:none;padding:0;margin:0 0 var(--s6);display:grid;gap:var(--s3)}
@media (min-width:720px){.helplines{grid-template-columns:repeat(3,minmax(0,1fr))}}
.helplines a{display:flex;flex-direction:column;gap:2px;min-height:var(--target);padding:var(--s4);border:2px solid var(--control);border-radius:var(--radius-sm);text-decoration:none;color:var(--text);background:var(--bg)}
.helplines a:hover{border-color:var(--link)}
.helplines .when{font-family:var(--font-label);font-size:var(--fs-label);color:var(--text-2)}
.helplines .num{font-family:var(--font-label);font-weight:700;font-size:1.25rem;text-decoration:underline;text-underline-offset:.18em;color:var(--link)}
details.region{border-top:1px solid var(--line)}
details.region:last-of-type{border-bottom:1px solid var(--line)}
details.region summary,.faq summary{cursor:pointer;min-height:var(--target);display:flex;align-items:center;gap:var(--s2);font-family:var(--font-label);font-weight:700;font-size:1.0625rem;padding-block:var(--s3);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid currentColor;border-radius:50%;flex:none;font-size:1.125rem;line-height:1}
details[open]>summary::before{content:"\2212"}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq details>div{padding-bottom:var(--s4)}

/* article */
.article{padding-block:var(--s8) var(--s16)}
.article-body{max-width:var(--measure)}
.article-body h2{margin-top:var(--s12)}
.article-body h3{margin-top:var(--s8)}
.article-body li{margin-bottom:var(--s2)}
.article-body ul,.article-body ol{padding-inline-start:1.4em}
.byline{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;margin-block:var(--s4) var(--s8)}

/* ---------- 13. Footer ---------- */
.site-footer{margin-top:0}
.site-footer .foot-rule{height:4px;background:var(--berry)}
.site-footer .wrap{padding-block:var(--s12) var(--s8)}
.footer-grid{display:grid;gap:var(--s8)}
@media (min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.site-footer h2{font-family:var(--font-label);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--s3)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li a{display:inline-flex;align-items:center;min-height:var(--target);min-width:var(--target);font-family:var(--font-label);font-size:1rem;color:var(--on-night)}
.site-footer .footer-brand img{height:44px;width:auto;margin-bottom:var(--s4)}
.site-footer p{font-size:var(--fs-small)}
.social{display:flex;flex-wrap:wrap;gap:var(--s1)}
.social a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--target);min-height:var(--target);padding:0 var(--s2);text-decoration:underline}
.legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);justify-content:space-between;border-top:1px solid rgba(255,255,255,.35);margin-top:var(--s8);padding-top:var(--s6);font-family:var(--font-label);font-size:var(--fs-label)}
.legal a{color:var(--on-night)}

/* ---------- 14. 404 ---------- */
.lost{min-height:55vh;display:grid;align-content:center}
.lost .big{font-family:var(--font-display);font-weight:900;font-size:clamp(4rem,12vw,8rem);line-height:1;margin:0 0 var(--s4);color:var(--accent-text)}

/* ---------- 15. Motion and print ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn,.primary-nav a,.helplines a{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .btn,.crisis-link,.nav-toggle,.input,.helplines a{border:2px solid ButtonText}
  .stripe{forced-color-adjust:none}
  :focus-visible{outline:2px solid Highlight}
}
@media print{
  .site-header nav,.nav-toggle,.skip-link,.site-footer .social,.embed-slot{display:none!important}
  .on-night{background:#fff;color:#000;--text:#000}
  a{color:#000}
}

/* ---------- 16. Additions ---------- */
.field [data-error]{color:var(--accent-text);font-weight:700;font-size:1rem}
.field [data-error]::before{content:"Error: "}
.input[aria-invalid="true"]{border-color:var(--accent-text);border-width:3px}
.on-night .field [data-error]{color:var(--sun)}
.card-link{text-decoration:none;color:inherit}
.card-link:hover h3{text-decoration:underline}
.card-link .link-arrow{color:var(--link)}
.product-hero-cover{max-width:320px;width:100%;justify-self:center}
.list-plain{list-style:none;padding:0;margin:0}
.icon-list{list-style:none;padding:0;margin:0 0 var(--s6);display:grid;gap:var(--s3);max-width:var(--measure)}
.icon-list li{display:grid;grid-template-columns:28px 1fr;gap:var(--s3);align-items:start}
.icon-list .icon{margin-top:3px}
.shop-group+.shop-group{margin-top:var(--s16)}
.section-label.keep-case{text-transform:none;letter-spacing:.02em;font-size:1rem}
.icon-list a{display:inline-flex;align-items:center;min-height:var(--target)}
.icon-list li{align-items:center}
.product-card h3 a{display:inline-block;padding-block:10px}
/* Night: the kit's reversed icons put berry emphasis on the ground, and berry is under 3:1 on the Night
   sun and teal tints (2.90 and 2.95). Those two grounds switch to `surface` (4.13) and keep a hue bar. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hue-sun,:root:not([data-theme="light"]) .hue-teal{--hue-tint:var(--surface)}
  :root:not([data-theme="light"]) .callout.hue-sun,:root:not([data-theme="light"]) .callout.hue-teal{box-shadow:inset 4px 0 0 var(--hue)}
  :root:not([data-theme="light"]) .status-badge{background:var(--surface)}
}