/* =====================================================================
   ANNONTRIX · DESIGN SYSTEM · "Field Guide"
   Light theme: Pressed Paper      Dark theme: Night Trail
   Every colour grows out of the fox mark (ink, slate, steel, cream,
   teal, ice). Signature edge: the fox's banded underside, used as a
   hard offset "print shadow" on framed things.

   Read _design/DESIGN.md before building a page.

   CONTENTS
    1  Tokens · constants (fonts, fox palette, textures, masks)
    2  Tokens · Pressed Paper (light, default)
    3  Tokens · Night Trail (dark: system preference + toggle)
    4  Base
    5  Type roles
    6  Layout utilities
    7  Framed + print shadow
    8  Skip link
    9  Site header · brand · theme switch · tabs
   10  Sub-tabs
   11  Buttons + links
   12  Audience modifiers (.is-studio / .is-students / .is-academics)
   13  Page hero ("plate header")
   14  Section heading
   15  Doors + trail fork
   16  Plate / figure + callouts + key (+ Plate I)
   17  Steps (paw trail)
   18  Principles
   19  Service rows · FAQ · disclosure
   20  Chips + tags + mark lists + facts
   21  Specimen (draft) cards
   22  Feedback wall
   23  Founder cards
   24  Placeholder text
   25  Forms
   26  Contact block
   27  Callout
   28  Site footer
   29  Motion (only when allowed)
   30  Forced colours
   ===================================================================== */


/* =====================================================================
   1 · TOKENS · CONSTANTS
   ===================================================================== */
:root {
  --f-display: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-text: 'Alegreya Sans', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;
  --f-hand: 'Kalam', 'Bradley Hand', 'Segoe Print', cursive;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;   /* placeholders only */

  --maxw: 1160px;
  --gut: 32px;
  --section: 96px;
  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ring: 3px;

  /* The fox mark. Constant in both themes so the brand never shifts. */
  --fx-ink: #16191E;
  --fx-navy: #2E4057;
  --fx-steel: #5C7A86;
  --fx-cream: #F2EEE6;
  --fx-teal: #2F7FA3;
  --fx-ice: #C6DAE6;
  --fx-glint: #4C9DB0;
  --teal-deep: #1F5570;

  /* Textures: each tile is one small SVG, declared once, swapped by theme below. */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .13 0 0 0 0 .17 .38 0 0 0 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.2' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 0 0 0 26 -20.5'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");

  /* Masks (shape only; colour comes from background-color, so art follows the theme). */
  --mask-trail-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='9.3' cy='5.2' rx='2.5' ry='3.3'/%3E%3Cellipse cx='14.7' cy='5.2' rx='2.5' ry='3.3'/%3E%3Cellipse cx='4.6' cy='11.8' rx='2.3' ry='3' transform='rotate(-18 4.6 11.8)'/%3E%3Cellipse cx='19.4' cy='11.8' rx='2.3' ry='3' transform='rotate(18 19.4 11.8)'/%3E%3Cpath d='M6.6 21.2C7.8 16 16.2 16 17.4 21.2C16.4 24.6 13.8 23.4 12 25.4C10.2 23.4 7.6 24.6 6.6 21.2Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(25 11) rotate(90) scale(.75)'/%3E%3Cuse href='%23p' transform='translate(57 1) rotate(90) scale(.75)'/%3E%3C/svg%3E");
  --mask-trail-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='9.3' cy='5.2' rx='2.5' ry='3.3'/%3E%3Cellipse cx='14.7' cy='5.2' rx='2.5' ry='3.3'/%3E%3Cellipse cx='4.6' cy='11.8' rx='2.3' ry='3' transform='rotate(-18 4.6 11.8)'/%3E%3Cellipse cx='19.4' cy='11.8' rx='2.3' ry='3' transform='rotate(18 19.4 11.8)'/%3E%3Cpath d='M6.6 21.2C7.8 16 16.2 16 17.4 21.2C16.4 24.6 13.8 23.4 12 25.4C10.2 23.4 7.6 24.6 6.6 21.2Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(20 25) rotate(180) scale(.75)'/%3E%3Cuse href='%23p' transform='translate(31 57) rotate(180) scale(.75)'/%3E%3C/svg%3E");
  --mask-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'%3E%3Crect x='5' y='2' width='2.6' height='31' rx='1.3'/%3E%3Cpath d='M7.6 3.5C13 .8 18 6.6 26 3.4V16.6C18 19.8 13 14 7.6 16.6Z'/%3E%3C/svg%3E");
  --mask-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M10 1.4L12.6 7L18.6 7.7L14.1 11.8L15.3 17.8L10 14.8L4.7 17.8L5.9 11.8L1.4 7.7L7.4 7Z'/%3E%3C/svg%3E");
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5L8 15.5L17 4.5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* =====================================================================
   2 · TOKENS · PRESSED PAPER (light, default)
   ===================================================================== */
:root {
  color-scheme: light;
  --bg: #F1ECE1;            /* herbarium paper */
  --surface: #FAF7F1;       /* plates, cards */
  --band: #E4DCCB;          /* header mount board, idle tabs */
  --field: #FFFDF8;         /* inputs */
  --foot: #E4DCCB;          /* footer ground + tree fill */
  --ink: #17212C;           /* body text: the fox outline, blued */
  --ink-2: #46525D;         /* secondary text */
  --rule: #17212C;          /* frames, UI borders */
  --hair: #BFB6A4;          /* decorative hairlines only */
  --accent: #1C5E7E;        /* links (text-safe teal) */
  --focus: #1C5E7E;
  --leader: #2F7FA3;        /* annotation leaders, ribbons, numerals */
  --wash: #C6DAE6;          /* ice-blue watercolour */
  --callout: #E3ECEF;       /* note box ground */
  --rating-fill: #D3E3EB;   /* 1–5 scale: values up to the choice */
  --btn: #2E4057;  --btn-ink: #F7F3EB;  --btn-edge: #17212C;
  --sel: #2E4057;  --sel-ink: #F7F3EB;
  --paw: #5C7A86;           /* tracks */
  --hatch: rgba(23, 33, 44, .55);
  --hatch-soft: rgba(23, 33, 44, .14);
  --err: #9E3B24;
  --ok: #2B5E43;
  --star-on: #1C5E7E;  --star-off: #978D7B;

  /* print shadow bands (outside the ink edge): teal edge, cream line, steel band, slate body */
  --ps-1: #2F7FA3;  --ps-2: #FBF8F2;  --ps-3: #5C7A86;  --ps-4: #2E4057;

  /* audiences */
  --studio: #2E4057;    --studio-ground: #DCDFE0;   --studio-fill: #2E4057;    --studio-on: #F7F3EB;
  --students: #1F5570;  --students-ground: #D3E4E6; --students-fill: #1F5570;  --students-on: #F4F1E9;
  --academics: #6A3557; --academics-ground: #E7DCDF; --academics-fill: #6A3557; --academics-on: #F7F1EA;

  /* theme switches for art + brand */
  --keyline: transparent;   /* cream die-cut edge around the fox: dark only */
  --day: 1;  --night: 0;    /* opacity multipliers for day/night art layers */
  --show-day: block;  --show-night: none;
  --art-dim: 1;             /* brightness of draft artwork */
  --texture: var(--tex-grain);
  --texture-size: 200px 200px;
}


/* =====================================================================
   3 · TOKENS · NIGHT TRAIL (dark)
   The same block appears twice: once for "system prefers dark and no
   choice stored" (also the no-JS path), once for the toggle. They must
   stay identical; _design/tools/contrast.py checks that they do.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1A2533; --surface: #223142; --band: #243447; --field: #1D2B3B; --foot: #16212E;
    --ink: #EDE6D6; --ink-2: #B3C0CB; --rule: #A7B8C6; --hair: #3A4D62;
    --accent: #9FD0EA; --focus: #9FD0EA; --leader: #7DBAD8; --wash: #C6DAE6;
    --callout: #1F3447; --rating-fill: #2E4A60;
    --btn: #C6DAE6; --btn-ink: #15202C; --btn-edge: #0E151D;
    --sel: #C6DAE6; --sel-ink: #15202C;
    --paw: #8FA9BA; --hatch: rgba(237, 230, 214, .5); --hatch-soft: rgba(237, 230, 214, .12);
    --err: #F2A48C; --ok: #9ED3B4; --star-on: #9FD0EA; --star-off: #6F8599;
    --ps-1: #3F95BD; --ps-2: #E6DFCF; --ps-3: #5C7A86; --ps-4: #2E4057;
    --studio: #B9C8D7; --studio-ground: #243549; --studio-fill: #C3D0DD; --studio-on: #15202C;
    --students: #8ED0DE; --students-ground: #163847; --students-fill: #8ED0DE; --students-on: #0E2530;
    --academics: #E3B5D2; --academics-ground: #35253A; --academics-fill: #E3B5D2; --academics-on: #26131F;
    --keyline: #F2EEE6; --day: 0; --night: 1; --show-day: none; --show-night: block; --art-dim: .92;
    --texture: var(--tex-speckle); --texture-size: 240px 240px;
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1A2533; --surface: #223142; --band: #243447; --field: #1D2B3B; --foot: #16212E;
    --ink: #EDE6D6; --ink-2: #B3C0CB; --rule: #A7B8C6; --hair: #3A4D62;
    --accent: #9FD0EA; --focus: #9FD0EA; --leader: #7DBAD8; --wash: #C6DAE6;
    --callout: #1F3447; --rating-fill: #2E4A60;
    --btn: #C6DAE6; --btn-ink: #15202C; --btn-edge: #0E151D;
    --sel: #C6DAE6; --sel-ink: #15202C;
    --paw: #8FA9BA; --hatch: rgba(237, 230, 214, .5); --hatch-soft: rgba(237, 230, 214, .12);
    --err: #F2A48C; --ok: #9ED3B4; --star-on: #9FD0EA; --star-off: #6F8599;
    --ps-1: #3F95BD; --ps-2: #E6DFCF; --ps-3: #5C7A86; --ps-4: #2E4057;
    --studio: #B9C8D7; --studio-ground: #243549; --studio-fill: #C3D0DD; --studio-on: #15202C;
    --students: #8ED0DE; --students-ground: #163847; --students-fill: #8ED0DE; --students-on: #0E2530;
    --academics: #E3B5D2; --academics-ground: #35253A; --academics-fill: #E3B5D2; --academics-on: #26131F;
    --keyline: #F2EEE6; --day: 0; --night: 1; --show-day: none; --show-night: block; --art-dim: .92;
    --texture: var(--tex-speckle); --texture-size: 240px 240px;
}

/* Derived tokens (theme-independent formulas) */
:root {
  --print-shadow:    2px 2px 0 var(--ps-1), 4px 4px 0 var(--ps-2), 7px 7px 0 var(--ps-3), 10px 10px 0 var(--ps-4);
  --print-shadow-lg: 3px 3px 0 var(--ps-1), 5px 5px 0 var(--ps-2), 9px 9px 0 var(--ps-3), 13px 13px 0 var(--ps-4);
  --print-shadow-sm: 2px 2px 0 var(--ps-1), 3px 3px 0 var(--ps-2), 5px 5px 0 var(--ps-3), 6px 6px 0 var(--ps-4);
  --print-shadow-xs: 1px 1px 0 var(--ps-1), 2px 2px 0 var(--ps-2), 3px 3px 0 var(--ps-3);
  --band-edge: linear-gradient(var(--ps-1) 0 2px, var(--ps-2) 2px 4px, var(--ps-3) 4px 8px);   /* 8px bottom edge: audience hero, .panel--banded */
}


/* =====================================================================
   4 · BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-feature-settings: "lnum" 1; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--texture);
  background-size: var(--texture-size);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.1; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
h1 { font-weight: 800; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--sel); color: var(--sel-ink); }
:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: 3px; border-radius: 2px; }
main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
main:focus-visible { outline: none; }
[hidden] { display: none !important; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html:not(.js) .js-only { display: none !important; }
main section[id] { scroll-margin-top: 16px; }   /* in-page jumps (#brief, #feedback, "On this page") clear the edge */


/* =====================================================================
   5 · TYPE ROLES
   ===================================================================== */
.eyebrow, .label {
  font: 700 .875rem/1.35 var(--f-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow { margin-bottom: 14px; }
.display-1 { font: 800 clamp(2.6rem, 1.6rem + 3.9vw, 4.5rem)/1.02 var(--f-display); letter-spacing: -.015em; }
.display-2 { font: 700 clamp(1.9rem, 1.4rem + 1.9vw, 2.7rem)/1.08 var(--f-display); }
.dek { font-size: 1.25rem; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.meta-line { font: italic 400 1.0625rem/1.4 var(--f-display); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.fine { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }          /* smallest text on the site: 14px */
.hand-note { display: inline-block; font-family: var(--f-hand); font-weight: 400; font-size: 1.125rem; line-height: 1.2; color: var(--accent); transform: rotate(-3deg); }
em.inked {  /* one word in a heading, underlined like a pen stroke */
  font-style: italic; font-weight: 700;
  text-decoration: underline wavy var(--leader) .06em; text-underline-offset: .2em; text-decoration-skip-ink: none;
}
.prose > * + * { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }


/* =====================================================================
   6 · LAYOUT UTILITIES
   ===================================================================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-top: var(--section); }
.section--tight { padding-top: 64px; }
.measure { max-width: 64ch; }
.stack > * + * { margin-top: var(--stack, 1rem); }
.grid-2, .grid-3 { display: grid; gap: 32px; align-items: start; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.action-note { margin-top: 12px; font-size: 1rem; color: var(--ink-2); }
.sec-indent { padding-left: calc(170px + 28px); }   /* content that lines up with a .sec-head's heading column */
.noscript-note { margin-bottom: 24px; }             /* <noscript><p class="callout noscript-note">…</p></noscript> above a js-only form */

@media (max-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --gut: 16px; --section: 64px; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dek { font-size: 1.125rem; }
  .sec-indent { padding-left: 0; }
}


/* =====================================================================
   7 · FRAMED + PRINT SHADOW
   One class for every plate-like thing: ink edge, inner hairline, and
   the fox's underside bands as a hard offset shadow.
   NOTE: .framed owns ::before. Don't use ::before on a framed element.
   ===================================================================== */
.framed {
  position: relative;
  background-color: var(--surface);
  border: 1.5px solid var(--rule);
  box-shadow: var(--print-shadow);
}
.framed::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hair);
  pointer-events: none;
}
.framed--sm { box-shadow: var(--print-shadow-sm); }
.framed--sm::before { inset: 4px; }
.framed--flat { box-shadow: none; }
.framed--bare::before { content: none; }       /* no inner hairline */
@media (max-width: 720px) {                     /* small-screen modifier: thinner bands, tighter rule */
  .framed { box-shadow: var(--print-shadow-sm); }
  .framed::before { inset: 4px; }
  .framed--flat { box-shadow: none; }
}

/* Panel: a tinted, textured, ruled card with no print shadow. It takes the
   audience ground inside (or on) .is-studio / .is-students, plain surface
   otherwise. Used for route cards, "what we need" and closing start bands.
   .panel--banded adds the fox's underside as an 8px bottom edge (owns ::after). */
.panel {
  background-color: var(--aud-ground, var(--surface));
  background-image: var(--texture); background-size: var(--texture-size);
  border: 1.5px solid var(--rule); border-radius: var(--radius);
}
.panel--banded { position: relative; border-radius: 0; }
.panel--banded::after {
  content: ""; position: absolute; left: -1.5px; right: -1.5px; top: 100%; height: 8px; margin-top: 1.5px;
  background: var(--band-edge);
}


/* =====================================================================
   8 · SKIP LINK
   ===================================================================== */
.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; font-weight: 700; text-decoration: none;
  background: var(--btn); color: var(--btn-ink); border: 2px solid var(--btn-edge); border-radius: var(--radius);
  box-shadow: var(--print-shadow-sm);
}
.skip-link:focus { top: 12px; }


/* =====================================================================
   9 · SITE HEADER · BRAND · THEME SWITCH · TABS
   ===================================================================== */
.site-header {
  position: relative;
  background-color: var(--band);
  background-image: var(--texture);
  background-size: var(--texture-size);
  border-bottom: 1.5px solid var(--rule);
}
.site-header__top { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 18px 14px; }
.site-header__tools { display: flex; align-items: center; gap: 14px; flex: none; }

/* brand: fox + wordmark are the link; the sub-line sits beside it, outside the link */
.brand {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  justify-content: start;
  min-width: 0;
}
.brand__link {
  grid-area: 1 / 1 / 3 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
}
.brand__mark { grid-area: 1 / 1 / 3 / 2; width: 56px; }
.brand__mark img { width: 100%; }
.brand__img--day { display: var(--show-day); }
.brand__img--night { display: var(--show-night); }
.brand__name { grid-area: 1 / 2 / 2 / 3; align-self: end; font: 800 1.8rem/1 var(--f-display); letter-spacing: .005em; }
.brand__sub { grid-area: 2 / 2 / 3 / 3; align-self: start; margin-top: 5px; font: italic 400 1rem/1.25 var(--f-display); color: var(--ink-2); position: relative; }
.brand__sub span { white-space: nowrap; }
.brand__link:hover .brand__name { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--leader); text-underline-offset: .14em; }

/* theme switch: a real switch (role="switch"), hidden without JS */
.theme-switch {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 12px 6px 10px;
  font: 500 1rem/1 var(--f-text); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--radius);
}
html:not(.js) .theme-switch { display: none; }            /* no JS: no switch */
html.js:not(.js-ready) .theme-switch { visibility: hidden; } /* site.js failed or not yet run */
.theme-switch:hover { box-shadow: var(--print-shadow-xs); }
.theme-switch__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.theme-switch[aria-checked="true"] .theme-switch__icon { fill: var(--wash); }
.theme-switch__track { position: relative; flex: none; width: 38px; height: 22px; border: 1.5px solid var(--rule); border-radius: 11px; background: var(--bg); }
.theme-switch__knob { position: absolute; top: 2.5px; left: 2.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.theme-switch[aria-checked="true"] .theme-switch__track { background: var(--accent); border-color: var(--accent); }
.theme-switch[aria-checked="true"] .theme-switch__knob { transform: translateX(16px); background: var(--bg); }

/* primary nav: thumb-index tabs; the current one joins the page below */
.tabs__list { display: flex; gap: 3px; margin: 0 0 -1.5px; position: relative; z-index: 1; }
.tab {
  position: relative; z-index: 0; display: block;
  padding: 12px 22px 13px;
  font: 500 1.0625rem/1.2 var(--f-text); color: var(--ink-2); text-decoration: none;
}
.tab::before {
  content: ""; position: absolute; inset: 0 0 1.5px; z-index: -1;
  background: var(--band); border: 1.5px solid var(--hair); border-bottom: 0; border-radius: 9px 9px 0 0;
  transform: perspective(26px) rotateX(2.4deg); transform-origin: 50% 100%;
}
.tab:hover { color: var(--ink); }
.tab:hover::before { background: var(--surface); border-color: var(--rule); }
.tab:is([aria-current="page"], [data-current="parent"]) { color: var(--ink); font-weight: 700; }
.tab:is([aria-current="page"], [data-current="parent"])::before {
  inset: 0; border-color: var(--rule);
  background-color: var(--join, var(--bg));
  background-image: var(--texture); background-size: var(--texture-size);
}
.tab:is([aria-current="page"], [data-current="parent"])::after {   /* ribbon bookmark */
  content: ""; position: absolute; left: 50%; top: -1.5px; width: 22px; height: 9px; margin-left: -11px;
  background: var(--join-mark, var(--leader));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 58%, 0 100%);
}
.tab:focus-visible { outline-offset: -5px; }

/* the current tab takes the colour of an audience page's hero ground */
body:has(#main > .is-studio:first-child)   { --join: var(--studio-ground);   --join-mark: var(--studio); }
body:has(#main > .is-students:first-child) { --join: var(--students-ground); --join-mark: var(--students); }
body:has(#main > .is-academics:first-child) { --join: var(--academics-ground); --join-mark: var(--academics); }

@media (max-width: 860px) {
  .brand__sub { font-size: .9375rem; }
  .tab { padding-inline: 16px; }
}
@media (max-width: 720px) {
  .site-header__top { padding-block: 14px 12px; gap: 12px; }
  .brand { column-gap: 11px; }
  .brand__mark { width: 46px; }
  .brand__name { font-size: 1.55rem; }
  .brand__sub { font-size: .875rem; margin-top: 3px; }
  .theme-switch { padding: 6px 9px; }
  .theme-switch__label { display: none; }
  /* all six tabs stay visible: a 3 x 2 grid of 48px targets */
  .tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 14px; }
  .tab { display: grid; place-items: center; min-height: 48px; padding: 8px 4px; text-align: center; font-size: 1rem; }
  .tab::before, .tab:is([aria-current="page"], [data-current="parent"])::before { inset: 0; transform: none; border: 1.5px solid var(--hair); border-radius: 4px; }
  .tab:is([aria-current="page"], [data-current="parent"])::before { border-color: var(--rule); box-shadow: var(--print-shadow-xs); }
}
@media (max-width: 560px) {
  .site-header .header-cta { display: none; }   /* every page repeats its primary action in the hero */
}


/* =====================================================================
   10 · SUB-TABS (second tier: Students | Start your site, Drafts | Leave feedback)
   ===================================================================== */
.subtabs { padding-top: 22px; }
.subtabs__list { display: flex; flex-wrap: wrap; gap: 4px 6px; border-bottom: 1px solid var(--hair); }
.subtab {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 16px 10px 12px; margin-bottom: -1px;
  font: 500 1.0625rem/1.2 var(--f-text); color: var(--ink-2); text-decoration: none;
  border: 1.5px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0;
}
.subtab::before {   /* trail blaze: hollow for other tabs, painted for the current one */
  content: ""; width: 10px; height: 14px; flex: none;
  border: 1.5px solid currentColor; border-radius: 1px;
}
.subtab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.subtab[aria-current="page"] {
  color: var(--ink); font-weight: 700;
  border-color: var(--rule);
  background-color: var(--aud-ground, var(--bg));
}
.subtab[aria-current="page"]::before { background: var(--aud, var(--leader)); border-color: var(--aud, var(--leader)); }
.subtab:focus-visible { outline-offset: -4px; }
@media (max-width: 480px) {
  .subtabs__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .subtab { justify-content: center; padding-inline: 8px; }
  .subtabs__list:has(> :nth-child(3)) .subtab { width: 100%; gap: 6px; padding-inline: 2px; font-size: .9375rem; white-space: nowrap; }
  .subtabs__list:has(> :nth-child(3)) .subtab:not([aria-current="page"])::before { display: none; }
}


/* =====================================================================
   11 · BUTTONS + LINKS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 11px 22px;
  font: 700 1.0625rem/1.2 var(--f-text); text-align: center; text-decoration: none;
  border: 2px solid var(--rule); border-radius: var(--radius);
}
.btn--primary {   /* ink edge + the fox's band edge */
  background: var(--btn-bg, var(--btn));
  color: var(--btn-fg, var(--btn-ink));
  border-color: var(--btn-edge);
  box-shadow: var(--print-shadow-sm);
}
.btn--primary:hover { box-shadow: var(--print-shadow); }
.btn--primary:active { box-shadow: var(--print-shadow-xs); }
.btn--secondary { background: var(--surface); color: var(--ink); }
.btn--secondary:hover { box-shadow: var(--print-shadow-xs); }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 1rem; }
.btn:disabled, .btn[aria-disabled="true"] {   /* busy/disabled ("Sending…"): explicit colours, label stays AA */
  --btn-bg: var(--band); --btn-fg: var(--ink);
  background: var(--band); color: var(--ink); border-style: dashed; border-color: var(--ink-2);
  cursor: not-allowed; box-shadow: none; transform: none;
}
.btn .arr { display: inline-block; }

.link-arrow {   /* standalone text link: "See Studio →" (arrow in <span class="arr" aria-hidden="true">) */
  display: inline-block; padding-block: 9px;
  font-weight: 700; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.link-arrow:hover { text-decoration-thickness: 2px; }
.link-arrow .arr { position: relative; left: 0; }


/* =====================================================================
   12 · AUDIENCE MODIFIERS
   Put .is-studio, .is-students or .is-academics on a door, page hero, section or card.
   Inside, --aud (text-safe colour), --aud-ground, --aud-fill and --aud-on
   are set, and primary buttons take the audience colour.
   ===================================================================== */
.is-studio {
  --aud: var(--studio); --aud-ground: var(--studio-ground); --aud-fill: var(--studio-fill); --aud-on: var(--studio-on);
  --btn-bg: var(--studio-fill); --btn-fg: var(--studio-on);
}
.is-students {
  --aud: var(--students); --aud-ground: var(--students-ground); --aud-fill: var(--students-fill); --aud-on: var(--students-on);
  --btn-bg: var(--students-fill); --btn-fg: var(--students-on);
}
.is-academics {
  --aud: var(--academics); --aud-ground: var(--academics-ground); --aud-fill: var(--academics-fill); --aud-on: var(--academics-on);
  --btn-bg: var(--academics-fill); --btn-fg: var(--academics-on);
}
:is(.is-studio, .is-students, .is-academics) .eyebrow { color: var(--aud); }
.blaze, .door__blaze b {  /* painted trail marker: "Trail A", "Studio", "Students" */
  display: inline-block; padding: 5px 10px 4px;
  font: 700 .875rem/1.2 var(--f-text); letter-spacing: .1em; text-transform: uppercase;
  background: var(--aud-fill, var(--btn)); color: var(--aud-on, var(--btn-ink));
  border-radius: 2px 4px 3px 2px; transform: rotate(-1.5deg);
}


/* =====================================================================
   13 · PAGE HERO ("plate header")
   ===================================================================== */
.plate-hero { position: relative; padding-bottom: 64px; }
.plate-hero:is(.is-studio, .is-students, .is-academics) {
  background-color: var(--aud-ground);
  background-image: var(--texture);
  background-size: var(--texture-size);
  border-bottom: 1.5px solid var(--rule);
}
.plate-hero__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px 44px; align-items: start; padding-top: 56px; }
.plate-hero__grid:has(> .plate-hero__art) { grid-template-columns: auto minmax(0, 1.25fr) minmax(0, .9fr); }
.plate-no {   /* use with .framed .framed--sm */
  display: grid; justify-items: center; gap: 4px;
  min-width: 96px; padding: 14px 14px 12px;
}
.plate-no__label { font: 700 .875rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.plate-no__numeral { font: italic 700 3rem/1 var(--f-display); color: var(--aud, var(--ink)); }
.plate-hero__body h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.1rem); line-height: 1.03; letter-spacing: -.015em; max-width: 17ch; }
.plate-hero__body .dek { margin-top: 18px; }
.plate-hero__body .meta-line { margin-top: 14px; }
.plate-hero__art { align-self: center; justify-self: end; }
.plate-hero:is(.is-studio, .is-students, .is-academics)::after {   /* the fox's underside as the hero's bottom edge */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; margin-top: 1.5px;
  background: var(--band-edge);
}
.medallion {   /* round framed art for heroes: <div class="medallion"><svg …></div> */
  position: relative; display: grid; place-items: center;
  width: clamp(150px, 20vw, 232px); aspect-ratio: 1; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--rule); box-shadow: var(--print-shadow);
}
.medallion::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--hair); border-radius: 50%; }
.medallion svg { width: 56%; height: auto; }
@media (max-width: 980px) {
  .plate-hero__grid:has(> .plate-hero__art) { grid-template-columns: auto minmax(0, 1fr); }
  .plate-hero__art { grid-column: 1 / -1; max-width: 560px; }
  /* a medallion stays beside the text, just smaller */
  .plate-hero__grid:has(> .plate-hero__art > .medallion) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .plate-hero__art:has(> .medallion) { grid-column: auto; }
}
@media (max-width: 720px) {
  .plate-hero { padding-bottom: 44px; }
  .plate-hero__grid, .plate-hero__grid:has(> .plate-hero__art),
  .plate-hero__grid:has(> .plate-hero__art > .medallion) { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 28px; }
  .plate-no { display: inline-flex; align-items: baseline; justify-self: start; gap: 10px; min-width: 0; padding: 8px 14px 6px; }
  .plate-no__numeral { font-size: 1.75rem; }
  .plate-hero__art:has(> .medallion) { display: none; }   /* decorative: skip it on phones */
}


/* =====================================================================
   14 · SECTION HEADING (with plate numeral)
   ===================================================================== */
.sec-head {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px;
  border-top: 4px double var(--rule); padding-top: 20px; margin-bottom: 44px;
}
.sec-head__no { display: flex; flex-direction: column; gap: 4px; }
.sec-head__no b { font: italic 700 2.6rem/1 var(--f-display); color: var(--aud, var(--ink)); }
.sec-head__no span { font: 700 .875rem/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sec-head h2 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.7rem); line-height: 1.08; }
.sec-head__dek { margin-top: 10px; color: var(--ink-2); max-width: 54ch; }
@media (max-width: 720px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 30px; }
  .sec-head__no { flex-direction: row; align-items: baseline; gap: 12px; }
  .sec-head__no b { font-size: 1.9rem; }
}


/* =====================================================================
   15 · DOORS + TRAIL FORK (Home)
   ===================================================================== */
.trail-fork-wrap { display: flex; justify-content: center; margin-bottom: -4px; }
.trail-fork { width: 100%; height: auto; overflow: visible; }
.trail-fork__ring { fill: var(--bg); stroke: var(--leader); stroke-width: 2.4; }
.trail-fork__dot { fill: var(--leader); }
.trail-fork__note { font: 400 22px var(--f-hand); fill: var(--accent); }
.trail-fork__prints { fill: var(--paw); }

.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: stretch; }
.door { display: flex; flex-direction: column; padding: 22px 26px 24px; }
.door__blaze {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font: 700 .875rem/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--aud, var(--ink-2));
}
.door__main { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 18px; margin-top: 14px; }
.door__title { font-size: clamp(1.7rem, 1.4rem + .9vw, 2.05rem); }
.door__text { margin-top: 8px; color: var(--ink-2); max-width: 40ch; }
.door__art { width: 88px; height: 88px; padding: 6px; background: var(--aud-ground, var(--bg)); border: 1.5px solid var(--rule); border-radius: 50%; }
.door__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding-top: 24px; }
.door__note { margin-top: 10px; font-size: 1rem; color: var(--ink-2); }

/* small inked icons (door art and friends): colour by token */
.art-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.art-line--thin { stroke-width: 1.7; }
.art-line--heavy { stroke-width: 3; }
.art-paper { fill: var(--surface); }
.art-wash { fill: var(--wash); }
.art-ribbon { fill: var(--leader); }
.art-hatch { stroke: var(--hatch); stroke-width: 1.2; }
.art-smoke { fill: none; stroke: var(--leader); stroke-width: 2; stroke-linecap: round; }
.art-paw { fill: var(--paw); }
.art-err { fill: none; stroke: var(--err); stroke-width: 3; stroke-linecap: round; }

@media (max-width: 860px) { .trail-fork-wrap { display: none; } }
@media (max-width: 720px) {
  .doors { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .door { padding: 18px 18px 20px; }
  .door__main { grid-template-columns: minmax(0, 1fr) 60px; gap: 14px; }
  .door__art { width: 60px; height: 60px; padding: 4px; }
}


/* =====================================================================
   16 · PLATE / FIGURE + CALLOUTS + KEY  (+ Plate I, the annotated fox)
   ===================================================================== */
.plate { margin: 0; padding: 16px 18px 20px; }
.plate__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 6px 0; }
.plate__label { font: 700 .875rem/1.3 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.plate__aside { font: italic 400 1.0625rem/1.3 var(--f-display); color: var(--ink-2); }
.plate__art { width: 100%; height: auto; margin: 6px 0 8px; overflow: visible; }
.plate__caption { border-top: 1px solid var(--hair); padding: 12px 6px 0; }
.fig-title { font: italic 400 1.0625rem/1.4 var(--f-display); color: var(--ink-2); }
.fig-title b { font-style: normal; font-weight: 700; color: var(--ink); }
.key { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; counter-reset: key; }
.key li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 1rem; line-height: 1.45; counter-increment: key; }
.key li::before {
  content: counter(key); display: grid; place-items: center; width: 27px; height: 27px; margin-top: -1px;
  border: 1.5px solid var(--rule); border-radius: 50%; background: var(--bg);
  font: 700 .9375rem/1 var(--f-text); color: var(--ink);
}
.key b { font-family: var(--f-display); font-style: italic; font-weight: 700; }

/* generic SVG callouts (any figure) */
.fig-leader { fill: none; stroke: var(--leader); stroke-width: 2.4; stroke-linecap: round; }
.fig-dot { fill: var(--leader); stroke: var(--surface); stroke-width: 3; }
.fig-marker circle { fill: var(--surface); stroke: var(--rule); stroke-width: 2.2; }
.fig-marker text { font: 700 30px var(--f-text); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }

/* Plate I */
.plate-fox .pf-wash { fill: var(--wash); opacity: .72; }
.plate-fox .pf-wash--pool { opacity: .55; }
.plate-fox .pf-wash--ground { opacity: .7; }
.plate-fox .pf-tide { fill: none; stroke: var(--leader); stroke-width: 1.4; opacity: .35; }
.plate-fox .pf-day { opacity: var(--day); }
.plate-fox .pf-night { opacity: var(--night); }
.plate-fox .pf-moon { fill: var(--wash); fill-opacity: .13; }
.plate-fox .pf-moon-line { stroke: rgba(237, 230, 214, .34); stroke-width: 1.2; }
.plate-fox .pf-moon-hatch { fill: url(#pf-hatch-moon); }
.plate-fox .pf-moon-ring { fill: none; stroke: var(--leader); stroke-width: 1.8; stroke-dasharray: 2 8; stroke-linecap: round; }
.plate-fox .pf-star { fill: var(--ink-2); opacity: .7; }
.plate-fox .pf-hatch-line { stroke: var(--hatch); stroke-width: 1.3; }
.plate-fox .pf-shadow { fill: url(#pf-hatch); }
.plate-fox .pf-ground { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.plate-fox .pf-tracks { fill: var(--paw); }
.plate-fox .pf-keyline { fill: var(--keyline); }
.plate-fox .pf-teal { fill: var(--fx-teal); }
.plate-fox .pf-cream { fill: var(--fx-cream); }
.plate-fox .pf-steel { fill: var(--fx-steel); }
.plate-fox .pf-navy { fill: var(--fx-navy); }
.plate-fox .pf-ice { fill: var(--fx-ice); }
.plate-fox .pf-ink { fill: var(--fx-ink); }
.plate-fox .pf-glint { fill: var(--fx-glint); }
.plate-fox .pf-teal  { --dx: -34px; --dy: 26px; --d: .10s; }
.plate-fox .pf-cream { --dx: 26px;  --dy: -18px; --d: .18s; }
.plate-fox .pf-steel { --dx: -22px; --dy: -30px; --d: .26s; }
.plate-fox .pf-navy  { --dx: 30px;  --dy: 22px; --d: .34s; }
.plate-fox .pf-ice   { --dx: 18px;  --dy: -14px; --d: .42s; }

@media (max-width: 720px) {
  .plate { padding: 12px 12px 16px; }
  .plate-fox .fig-marker { transform-box: fill-box; transform-origin: center; transform: scale(1.45); }   /* keeps the numerals >= 14px */
  .key { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   17 · STEPS (paw trail) — <ol class="steps">
   Horizontal on desktop (any number of steps), vertical below 980px.
   ===================================================================== */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; }
.step {
  display: grid; align-content: start;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark prints" "title title" "text text" "meta meta";
  align-items: center; column-gap: 10px; padding-right: 20px;
}
.step__mark {
  grid-area: mark; position: relative; display: grid; place-items: center;
  width: 48px; height: 48px; border: 1.5px solid var(--rule); border-radius: 50%;
  background: var(--surface); font: 700 1.3rem/1 var(--f-text); color: var(--ink);
}
.step__mark::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--hair); border-radius: 50%; }
.step__prints {
  grid-area: prints; height: 30px; background: var(--paw);
  -webkit-mask: var(--mask-trail-x) 0 50% / 60px 30px round no-repeat;
          mask: var(--mask-trail-x) 0 50% / 60px 30px round no-repeat;
}
.step:last-child .step__prints {   /* the trail ends at a flag */
  width: 28px; height: 34px; background: var(--leader);
  -webkit-mask: var(--mask-flag) 0 0 / 28px 34px no-repeat;
          mask: var(--mask-flag) 0 0 / 28px 34px no-repeat;
}
.step__note { grid-area: prints; justify-self: start; align-self: start; margin: -30px 0 0 6px; }
.step__title { grid-area: title; font-size: 1.4rem; line-height: 1.2; margin-top: 18px; }
.step__text { grid-area: text; margin-top: 6px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
.step__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) { .step__prints { visibility: hidden; } }

@media (max-width: 980px) {
  .steps { grid-auto-flow: row; grid-auto-columns: auto; }
  .step {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: "mark title" "prints text" "prints meta";
    column-gap: 18px; align-items: start; padding: 0;
  }
  .step__title { margin-top: 10px; }
  .step__text { margin-top: 4px; max-width: none; }
  .step__meta { margin-top: 10px; }
  .step > :last-child { margin-bottom: 30px; }
  .step__prints {
    justify-self: center; align-self: stretch; width: 28px; height: auto; min-height: 56px; margin: 6px 0;
    -webkit-mask: var(--mask-trail-y) 50% 4px / 28px 56px no-repeat round;
            mask: var(--mask-trail-y) 50% 4px / 28px 56px no-repeat round;
  }
  .step:last-child .step__prints { display: none; }
  .step__note { grid-area: title; justify-self: end; align-self: center; margin: 8px 4px 0 0; }
}


/* =====================================================================
   18 · PRINCIPLES / VALUES — <ol class="principles">
   ===================================================================== */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 30px 48px; counter-reset: pr; }
.principles > li {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 16px; align-content: start;
  padding-top: 18px; border-top: 1px solid var(--hair); counter-increment: pr;
}
.principles > li::before { content: counter(pr); grid-row: 1 / span 2; font: italic 700 2.7rem/.95 var(--f-display); color: var(--leader); }
.principles h3 { font-size: 1.3rem; line-height: 1.25; }
.principles p { margin-top: 6px; color: var(--ink-2); }


/* =====================================================================
   19 · SERVICE ROWS · FAQ · DISCLOSURE  (all native <details>)
   ===================================================================== */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.toggle {   /* plus that turns into a minus */
  position: relative; flex: none; width: 34px; height: 34px;
  border: 1.5px solid var(--rule); border-radius: 50%; background: var(--surface);
}
.toggle::before, .toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--ink); border-radius: 1px; }
.toggle::after { transform: rotate(90deg); }
details[open] > summary .toggle::after { transform: rotate(90deg) scaleX(0); }

/* service rows */
.services { border-bottom: 1.5px solid var(--rule); }
.service { border-top: 1.5px solid var(--rule); }
.service > details > summary {   /* no · title/label · hook · toggle; title and label are direct children */
  display: grid; grid-template-columns: 3.4rem minmax(0, 1.05fr) minmax(0, 1fr) 34px;
  gap: 0 26px; align-items: center; padding: 24px 6px; min-height: 44px;
}
.service .service__no { grid-column: 1; grid-row: 1 / span 2; }
.service .service__title { grid-column: 2; grid-row: 1; align-self: end; }
.service .service__label { grid-column: 2; grid-row: 2; align-self: start; }
.service .service__hook { grid-column: 3; grid-row: 1 / span 2; }
.service .toggle { grid-column: 4; grid-row: 1 / span 2; }
.service > details > summary:hover { background: color-mix(in srgb, var(--surface) 65%, transparent); }
.service__no { font: italic 700 1.9rem/1 var(--f-display); color: var(--aud, var(--leader)); }
.service__title { font-size: 1.6rem; line-height: 1.15; }
.service__label { display: block; margin-top: 4px; font-size: 1rem; color: var(--ink-2); }
.service__hook { font: italic 400 1.25rem/1.35 var(--f-display); color: var(--ink); }
.service__body { padding: 0 6px 30px calc(3.4rem + 32px); }
.service__fine { margin-top: 14px; font-size: .875rem; color: var(--ink-2); }
@media (max-width: 720px) {
  .service > details > summary { grid-template-columns: 2.4rem minmax(0, 1fr) 34px; gap: 0 14px; padding: 20px 2px; align-items: start; }
  .service__no { font-size: 1.5rem; padding-top: 2px; }
  .service__title { font-size: 1.4rem; }
  .service .service__hook { grid-column: 2 / 3; grid-row: 3; margin-top: 6px; font-size: 1.125rem; }
  .service .toggle { grid-column: 3; grid-row: 1 / span 2; }
  .service__body { padding: 0 2px 24px; }
}

/* FAQ */
.faq { border-top: 1.5px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 2px; min-height: 44px; font-weight: 700; font-size: 1.1875rem; line-height: 1.35; }
.faq__item > summary:hover { color: var(--accent); }
.faq__answer { padding: 0 56px 22px 2px; color: var(--ink-2); }
.faq__answer > * + * { margin-top: .8em; }
@media (max-width: 720px) { .faq__answer { padding-right: 2px; } }

/* disclosure: "+ Add a second project", "Show the list", "Selected work" */
.disclosure > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 8px;
  font-weight: 700; color: var(--ink); border: 1.5px dashed var(--rule); border-radius: var(--radius); background: transparent;
}
.disclosure > summary .toggle { width: 28px; height: 28px; }
.disclosure > summary .toggle::before, .disclosure > summary .toggle::after { width: 12px; margin-left: -6px; }
.disclosure > summary:hover { background: var(--surface); }
.disclosure[open] > summary { border-style: solid; margin-bottom: 18px; }


/* =====================================================================
   20 · CHIPS · TAGS · MARK LISTS · FACTS
   ===================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips > li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--surface); font-weight: 500; font-size: 1rem; }
.chips > li > span:first-child { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 5px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font: 700 .875rem/1 var(--f-text); }
.tag { display: inline-block; padding: 3px 10px; border: 1.5px solid var(--rule); border-radius: var(--radius); font: 500 .9375rem/1.4 var(--f-text); color: var(--ink); background: var(--surface); }
.tag--quiet { border-style: dashed; color: var(--ink-2); background: transparent; }
.mark-list > li { position: relative; padding-left: 26px; }
.mark-list > li + li { margin-top: 8px; }
.mark-list > li::before {   /* small inked diamond in fox teal */
  content: ""; position: absolute; left: 3px; top: .5em; width: 10px; height: 10px;
  background: var(--leader); border: 1.5px solid var(--rule); transform: rotate(45deg); border-radius: 1px;
}
.facts { display: grid; }
.facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px dotted var(--hair); }
.facts > div:first-child { border-top: 0; }
.facts dt { font: 700 .875rem/1.6 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.facts dd { font-size: 1.0625rem; }
@media (max-width: 720px) { .facts > div, .founder .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }


/* =====================================================================
   21 · SPECIMEN (DRAFT) CARDS — the whole card is one link via the h3
   ===================================================================== */
.specimens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 40px 34px; }
.specimen { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--rule); }
.specimen:hover { box-shadow: var(--print-shadow); }
.specimen:has(a:focus-visible) { outline: var(--ring) solid var(--focus); outline-offset: 5px; }
@supports not selector(:has(*)) { .specimen:focus-within { outline: var(--ring) solid var(--focus); outline-offset: 5px; } }
.specimen__art {
  position: relative; padding: 20px 24px 18px; border-bottom: 1.5px solid var(--rule);
  background-color: var(--bg); background-image: var(--texture); background-size: var(--texture-size);
}
.specimen__art::before, .specimen__art::after {   /* washi tape */
  content: ""; position: absolute; z-index: 1; width: 46px; height: 15px; background: var(--wash); opacity: .82;
}
.specimen__art::before { left: 12px; top: 14px; transform: rotate(-28deg); }
.specimen__art::after { right: 14px; bottom: 12px; transform: rotate(-28deg); }
.specimen__sheet {
  --tilt: -1.3deg;
  aspect-ratio: 16 / 10; overflow: hidden; border: 1.5px solid var(--fx-ink);
  box-shadow: 4px 4px 0 var(--hair); transform: rotate(var(--tilt)); filter: brightness(var(--art-dim));
}
.specimen:nth-child(even) .specimen__sheet { --tilt: 1deg; }
.specimen__sheet svg { width: 100%; height: 100%; }
.specimen__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 22px 22px; }
.specimen__tag { font: 700 .875rem/1.4 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.specimen__name { font-size: 1.45rem; line-height: 1.2; }
.specimen__name a { color: var(--ink); text-decoration: none; }
.specimen__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.specimen__name a:focus-visible { outline: none; }
.specimen__desc { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.specimen__go { margin-top: auto; padding-top: 12px; font-weight: 700; color: var(--accent); }
.specimen:hover .specimen__go { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
/* wide card: an odd last card (e.g. the 7th) spans the row, art beside the words */
@media (min-width: 720px) {
  .specimens > .specimen--wide { grid-column: 1 / -1; display: grid; grid-template-columns: calc((100% - 34px) / 2) minmax(0, 1fr); }
  .specimen--wide .specimen__art { border-bottom: 0; border-right: 1.5px solid var(--rule); }
  .specimen--wide .specimen__body { justify-content: center; padding: 28px 36px 30px; }
  .specimen--wide .specimen__name { font-size: 1.7rem; }
  .specimen--wide .specimen__desc { max-width: 46ch; }
  .specimen--wide .specimen__go { margin-top: 6px; }
  .specimen--wide .specimen__sheet { --tilt: -1deg; }
}
@media (min-width: 1092px) {   /* three columns above this width */
  .specimens > .specimen--wide { grid-template-columns: calc((100% - 68px) / 3) minmax(0, 1fr); }
}
/* each draft artwork's own hover gesture (motion in §29): the same card art on Home and Drafts */
.specimen__sheet :is(.s-a, .s-b, .sk-flower, .b-ring) { transform-box: fill-box; transform-origin: center; }
.specimen__sheet .k-needle { transform-box: view-box; transform-origin: 160px 100px; }


/* =====================================================================
   22 · FEEDBACK WALL — summary, quote cards, stars, states, "show more"
   ===================================================================== */
.wall__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.wall__summary { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-top: 20px; padding: 14px 2px; border-block: 1px solid var(--hair); color: var(--ink-2); }
.wall__summary b { margin-right: 6px; font: 700 1.6rem/1 var(--f-display); color: var(--ink); }
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 30px; margin-top: 30px; align-items: start; }
.quote {
  --tilt: -.6deg;
  position: relative; padding: 26px 22px 20px;
  background: var(--surface); border: 1.5px solid var(--rule);
  box-shadow: 3px 3px 0 var(--hair); transform: rotate(var(--tilt));
}
.quote:nth-child(3n+2) { --tilt: .5deg; }
.quote:nth-child(3n) { --tilt: -.2deg; }
.quote::before {   /* tape strip */
  content: ""; position: absolute; left: 50%; top: -9px; width: 72px; height: 17px; margin-left: -36px;
  background: var(--wash); opacity: .8; transform: rotate(-3deg);
}
.quote__text { margin-top: 12px; font: italic 400 1.1875rem/1.5 var(--f-display); color: var(--ink); }
.quote__by { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 16px; padding-top: 10px; border-top: 1px dotted var(--hair); font-size: 1rem; }
.quote__name { font-weight: 700; }
.quote__date { color: var(--ink-2); }
.stars {   /* <span class="stars" style="--rating:4" role="img" aria-label="Rated 4 out of 5"></span> */
  display: block; width: calc(5 * 22px); height: 20px;
  background: linear-gradient(90deg, var(--star-on) calc(var(--rating, 0) * 20%), var(--star-off) 0);
  -webkit-mask: var(--mask-star) 0 0 / 22px 20px repeat-x;
          mask: var(--mask-star) 0 0 / 22px 20px repeat-x;
}
.wall-state { display: flex; align-items: center; gap: 20px; margin-top: 26px; padding: 22px 24px; border: 1.5px dashed var(--rule); }
.wall-state__art { width: 64px; height: 64px; flex: none; }
.wall-state p { color: var(--ink-2); }
.wall-state.is-loading p { font-style: italic; }
.wall-state.is-loading .wall-state__art { opacity: .6; }
.wall-state.is-error { border-color: var(--err); }
.wall-state.is-error p { color: var(--err); font-weight: 700; }
.wall__more { margin-top: 32px; }


/* =====================================================================
   23 · FOUNDER CARDS (field-guide entries)
   ===================================================================== */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: start; }
.founder { padding: 28px 30px 30px; }   /* always with .framed (placeholder: .founder.is-placeholder, no .framed) */
.founder__head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.founder__cameo { width: 88px; height: 106px; }
.founder__photo { width: 88px; height: 106px; object-fit: cover; border-radius: 50%; border: 1.5px solid var(--rule); }
.founder__no { font: 700 .875rem/1.35 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.founder__name { margin-top: 6px; font-size: 1.65rem; line-height: 1.12; }
.founder__meta { margin-top: 6px; font: italic 400 1.0625rem/1.4 var(--f-display); color: var(--ink-2); }
.founder__bio { margin-top: 18px; }
.founder__bio > * + * { margin-top: .8em; }
.founder .facts { margin-top: 16px; }
.founder .facts > div { grid-template-columns: 112px minmax(0, 1fr); }
.founder__close { margin-top: 16px; color: var(--ink-2); }
.founder__link { margin-top: 6px; }
.cameo-ring { fill: var(--bg); stroke: var(--rule); stroke-width: 1.5; }
.cameo-hatch { stroke: var(--hair); stroke-width: 1; }   /* fill: its own hatch pattern */
.cameo-text { fill: var(--ink); font: italic 700 23px var(--f-display); text-anchor: middle; dominant-baseline: central; }
/* placeholder founder: unfinished on purpose */
.founder.is-placeholder {
  position: relative; border: 1.5px dashed; border-color: var(--ink-2); box-shadow: none;
  background: repeating-linear-gradient(135deg, var(--surface) 0 9px, var(--bg) 9px 10px);
}
.founder.is-placeholder .founder__name { color: var(--ink-2); }
.cameo-empty { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 5; }
.stamp {
  position: absolute; right: 22px; top: 20px; z-index: 1;
  padding: 6px 10px 4px; font: 400 1.125rem/1 var(--f-hand); color: var(--err);
  background: var(--surface); border: 2px solid currentColor; border-radius: var(--radius); transform: rotate(6deg);
}
@media (max-width: 980px) { .founders { grid-template-columns: minmax(0, 1fr); max-width: 680px; } }
@media (max-width: 720px) {
  .founder { padding: 20px 18px 22px; }
  .founder__head { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .founder__cameo, .founder__photo { width: 64px; height: 78px; }
  .founder__name { font-size: 1.4rem; }
  .stamp { position: static; display: inline-block; margin-bottom: 14px; transform: rotate(-2deg); }
}


/* =====================================================================
   24 · PLACEHOLDER TEXT — <span class="placeholder" data-placeholder>[Label]</span>
   ===================================================================== */
.placeholder, [data-placeholder] {
  display: inline; padding: 0 .35em;
  font-family: var(--f-mono); font-size: max(.86em, .8125rem); font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink);
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hatch-soft) 5px 6px);
  border: 1.5px dashed var(--ink-2); border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}


/* =====================================================================
   25 · FORMS
   ===================================================================== */
.form-panel { padding: 38px 42px 40px; }
.fieldset { min-width: 0; margin: 0 0 38px; padding: 0; border: 0; }
.fieldset__legend {
  float: left; width: 100%; display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; padding: 0 0 12px; border-bottom: 1px solid var(--hair);
  font: 700 1.5rem/1.2 var(--f-display); color: var(--ink);
}
.fieldset__legend + * { clear: both; }
.fieldset__no {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border: 1.5px solid var(--rule); border-radius: 50%; background: var(--bg);
  font: 700 1rem/1 var(--f-text); box-shadow: var(--print-shadow-xs);
}
.fieldset__note { margin: -4px 0 20px; font: italic 400 1.0625rem/1.45 var(--f-display); color: var(--ink-2); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.field-grid > .field--full { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; align-content: start; min-width: 0; margin-bottom: 22px; }
.field__label { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); }
.field__hint { margin-top: -3px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.field__error { font-size: 1rem; font-weight: 700; color: var(--err); }
.req { margin-left: 3px; font-weight: 700; color: var(--err); }
.opt { margin-left: .4em; font-weight: 400; font-style: italic; color: var(--ink-2); }
:where(input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="file"]), textarea, select) {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font-size: 1.0625rem; line-height: 1.4; color: var(--ink);
  background-color: var(--field); border: 1.5px solid var(--rule); border-radius: var(--radius);
}
textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
::placeholder { color: var(--ink-2); opacity: 1; }
:where(input, textarea, select):focus-visible { outline: var(--ring) solid var(--focus); outline-offset: 2px; box-shadow: var(--print-shadow-xs); }
[aria-invalid="true"] { border-color: var(--err) !important; box-shadow: inset 0 0 0 1px var(--err); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 24px) 52%, calc(100% - 17px) 52%;
  background-size: 7px 7px; background-repeat: no-repeat;
}

/* radio tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.tile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: start;
  padding: 14px 16px 16px; background: var(--field); border: 1.5px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.tile input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid var(--rule); border-radius: 50%; background: var(--bg); cursor: pointer;
}
.tile input:checked { background: radial-gradient(circle, var(--ink) 0 5px, var(--bg) 5.5px); }
.tile input:focus-visible { outline: none; }
.tile:has(input:checked) { background: var(--surface); box-shadow: var(--print-shadow-sm); }
.tile:has(input:focus-visible) { outline: var(--ring) solid var(--focus); outline-offset: 3px; }
.tile:hover { background: var(--surface); }
.tile__title { display: block; font-weight: 700; }
.tile__hint { display: block; font-size: 1rem; color: var(--ink-2); }
.tile__swatch { grid-column: 1 / -1; height: 52px; border: 1.5px solid var(--rule); border-radius: 2px; }
.tile__swatch--light { background: #F1ECE1; }
.tile__swatch--dark { background: #1A2533; }
.tile__swatch--both { background: linear-gradient(115deg, #F1ECE1 0 50%, #1A2533 50%); }

/* 1–5 rating: native radios, keyboard arrows work; :has() fills the range up to the choice */
.rating { min-width: 0; margin: 0 0 26px; padding: 0; border: 0; }
.rating > legend { margin-bottom: 10px; padding: 0; }
.rating__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1.5px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--field); }
.rating__cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 66px; padding: 10px 4px; cursor: pointer; }
.rating__cell + .rating__cell { border-left: 1.5px solid var(--rule); }
.rating__cell input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rating__num { font: 700 1.4rem/1.1 var(--f-text); }
.rating__word { font-size: .9375rem; color: var(--ink-2); }
.rating__cell:hover { background: var(--band); }
.rating__scale:has(> :nth-child(2) input:checked) > :nth-child(-n+1),
.rating__scale:has(> :nth-child(3) input:checked) > :nth-child(-n+2),
.rating__scale:has(> :nth-child(4) input:checked) > :nth-child(-n+3),
.rating__scale:has(> :nth-child(5) input:checked) > :nth-child(-n+4) { background: var(--rating-fill); }
.rating__cell:has(input:checked) { background: var(--sel); color: var(--sel-ink); }
.rating__cell:has(input:checked) .rating__word { color: var(--sel-ink); }
.rating__cell:has(input:focus-visible) { outline: var(--ring) solid var(--focus); outline-offset: -6px; z-index: 1; }
.rating__cell:has(input:checked:focus-visible) { outline-color: var(--sel-ink); }
.rating__legend { display: none; }
@media (max-width: 480px) {
  .rating__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .rating__cell { min-height: 56px; }
  .rating__legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .9375rem; color: var(--ink-2); }
}

/* honeypot: off-screen, out of the tab order (tabindex="-1" on the input) */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* send row, status line, success panel */
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 8px; }
.submit-note { flex-basis: 100%; font-size: 1rem; color: var(--ink-2); }
.status { min-height: 1.6em; margin-top: 14px; font-size: 1.0625rem; color: var(--ink-2); }
.status.is-err { color: var(--err); font-weight: 700; }
.status.is-ok { color: var(--ok); font-weight: 700; }
.success { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 26px; align-items: start; padding: 34px 38px 36px; }
.success__art { width: 76px; height: 76px; }
.success h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); }
.success p { margin-top: 10px; color: var(--ink-2); max-width: 52ch; }
.success .link-arrow { margin-top: 10px; }
@media (max-width: 720px) {
  .form-panel { padding: 24px 18px 26px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .fieldset__legend { font-size: 1.3rem; }
  .success { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 26px; }
  .success__art { width: 60px; height: 60px; }
}


/* =====================================================================
   26 · CONTACT BLOCK (footer, Contact hero, Studio closing)
   ===================================================================== */
.contact-rows { display: grid; gap: 8px; }
.contact-rows > div { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.contact-rows dt { min-width: 92px; font: italic 400 1.0625rem/1.4 var(--f-display); color: var(--ink-2); }
.contact-rows dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; }
.contact-rows a { display: inline-block; padding: 6px 0; font-weight: 700; overflow-wrap: anywhere; }
.contact-rows--lg a { font-size: 1.25rem; }
/* stacked rows (label above value): narrow columns such as the footer and the Studio closing block */
.contact-rows--stack > div, .site-footer .contact-rows > div { flex-direction: column; align-items: flex-start; gap: 0; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px;
  font: 700 .9375rem/1 var(--f-text); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--radius);
}
.copy-btn:hover { box-shadow: var(--print-shadow-xs); }
.copy-btn[data-copied]::before {
  content: ""; width: 14px; height: 14px; background: var(--ok);
  -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat;
}


/* =====================================================================
   27 · CALLOUT (side note) — the fox's bands become its left edge
   ===================================================================== */
.callout {
  position: relative; padding: 18px 22px 18px 34px;
  background: var(--callout); border: 1.5px solid var(--rule);
  box-shadow: inset 5px 0 0 var(--ps-1), inset 8px 0 0 var(--ps-2), inset 14px 0 0 var(--ps-3);
}
.callout__title { margin-bottom: 6px; font: 700 .875rem/1.35 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.callout > * + * { margin-top: .6em; }


/* =====================================================================
   28 · SITE FOOTER — pen-hatched pine treeline on the footer ground
   ===================================================================== */
.site-footer {
  position: relative; margin-top: 150px;
  background-color: var(--foot); background-image: var(--texture); background-size: var(--texture-size);
  border-top: 1.5px solid var(--rule);
}
.site-footer__trees { position: absolute; left: 0; right: 0; bottom: 100%; height: 100px; margin-bottom: -1px; pointer-events: none; }
.site-footer__trees::before, .site-footer__trees::after { content: ""; position: absolute; inset: 0; }
.site-footer__trees::before {
  background: var(--foot);
  -webkit-mask: url("../img/art/treeline-fill.svg") 50% 100% / auto 100% repeat-x;
          mask: url("../img/art/treeline-fill.svg") 50% 100% / auto 100% repeat-x;
}
.site-footer__trees::after {
  background: var(--ink);
  -webkit-mask: url("../img/art/treeline-ink.svg") 50% 100% / auto 100% repeat-x;
          mask: url("../img/art/treeline-ink.svg") 50% 100% / auto 100% repeat-x;
}
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; padding-block: 50px 38px; }
.site-footer .brand__name { font-size: 1.6rem; }
.site-footer .brand { grid-template-rows: auto; }
.site-footer .brand__link { grid-area: 1 / 1 / 2 / 3; }
.site-footer .brand__mark { grid-area: 1 / 1 / 2 / 2; width: 50px; }
.site-footer .brand__name { grid-area: 1 / 2 / 2 / 3; align-self: center; }
.site-footer__tagline { margin-top: 18px; font: italic 700 1.55rem/1.2 var(--f-display); color: var(--ink); }
.site-footer__mission { margin-top: 8px; max-width: 36ch; color: var(--ink-2); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.site-footer__h { margin-bottom: 10px; font: 700 .875rem/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.site-footer__list > li > a { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: 6px 0; font-weight: 500; text-decoration: none; }
.site-footer__list > li > a:hover { text-decoration: underline; }
.site-footer__place { margin-top: 10px; color: var(--ink-2); }
.site-footer__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 16px 30px; font-size: 1rem; color: var(--ink-2); }
.site-footer__base::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid var(--hair); }
@media (max-width: 980px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .site-footer { margin-top: 110px; }
  .site-footer__trees { height: 66px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 36px 28px; }
}


/* =====================================================================
   29 · MOTION — everything that moves lives here, behind
   prefers-reduced-motion: no-preference. Reduced motion = fully static,
   including hover lifts.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .tab::before { transition: background-color .15s; }
  .theme-switch__knob { transition: transform .2s var(--ease), background-color .2s; }
  .btn, .copy-btn, .theme-switch, .tile { transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s; }
  .btn--primary:hover { transform: translate(-2px, -2px); }
  .btn--primary:active { transform: translate(2px, 2px); }
  .btn--secondary:hover, .copy-btn:hover, .theme-switch:hover { transform: translate(-1px, -1px); }
  .btn .arr { transition: transform .18s var(--ease); }
  .btn:hover .arr { transform: translateX(3px); }
  .link-arrow .arr { transition: left .18s var(--ease); }
  .link-arrow:hover .arr { left: 3px; }
  .specimen { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
  .specimen:hover { transform: translate(-3px, -3px); }
  .specimen__sheet { transition: transform .45s var(--ease); }
  .specimen:hover .specimen__sheet { transform: rotate(0deg) translate(-1px, -2px); }
  .specimen__sheet :is(.m-dot, .m-col, .r-win, .r-cur, .s-a, .s-b, .k-needle, .sk-flower, .b-ring) { transition: transform .7s cubic-bezier(.2, .7, .1, 1); }
  .specimen:is(:hover, :focus-within) .m-dot { transform: translate(-26px, 14px); }
  .specimen:is(:hover, :focus-within) .m-col { transform: translateY(-6px); }
  .specimen:is(:hover, :focus-within) .r-win { transform: translate(10px, -8px); }
  .specimen:is(:hover, :focus-within) .r-cur { transform: translate(-34px, -22px); }
  .specimen:is(:hover, :focus-within) .s-a { transform: rotate(-6deg); }
  .specimen:is(:hover, :focus-within) .s-b { transform: rotate(7deg); }
  .specimen:is(:hover, :focus-within) .k-needle { transform: rotate(196deg); }
  .specimen:is(:hover, :focus-within) .sk-flower { transform: rotate(72deg); }
  .specimen:is(:hover, :focus-within) .b-ring { transform: rotate(45deg); }
  .toggle::after { transition: transform .2s var(--ease); }

  /* Plate I: plates slide into register, then the field marks draw in */
  .plate-fox .pf-reg { animation: pf-register 1.1s var(--ease) var(--d) both; }
  .plate-fox .fig-leader { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pf-draw .7s ease-out forwards; animation-delay: calc(1.25s + var(--i) * .2s); }
  .plate-fox .fig-dot { opacity: 0; animation: pf-fade .3s ease-out forwards; animation-delay: calc(1.2s + var(--i) * .2s); }
  .plate-fox .fig-marker { opacity: 0; animation: pf-fade .35s ease-out forwards; animation-delay: calc(1.8s + var(--i) * .2s); }

  /* paw prints walk in when the steps scroll into view (JS adds .is-in) */
  .js-ready .steps .step__prints { clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(5, end); }
  .js-ready .steps.is-in .step__prints { clip-path: inset(0 0 0 0); }
  .js-ready .steps.is-in .step:nth-child(2) .step__prints { transition-delay: .35s; }
  .js-ready .steps.is-in .step:nth-child(3) .step__prints { transition-delay: .7s; }
  .js-ready .steps.is-in .step:nth-child(4) .step__prints { transition-delay: 1.05s; }
  .js-ready .steps.is-in .step:nth-child(5) .step__prints { transition-delay: 1.4s; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 980px) {
  .js-ready .steps .step__prints { clip-path: inset(0 0 100% 0); }
  .js-ready .steps.is-in .step__prints { clip-path: inset(0 0 0 0); }
}
@keyframes pf-register { from { transform: translate(var(--dx), var(--dy)); opacity: 0; } 30% { opacity: 1; } }
@keyframes pf-draw { to { stroke-dashoffset: 0; } }
@keyframes pf-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {   /* safety net */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* =====================================================================
   30 · FORCED COLOURS (Windows High Contrast)
   ===================================================================== */
@media (forced-colors: active) {
  body, .site-header, .site-footer, .plate-hero, .tab::before, .specimen__art { background-image: none !important; }
  .framed, .framed::before, .founder, .specimen, .specimen__sheet, .quote, .callout, .tile, .rating__scale,
  .rating__cell + .rating__cell, .tab::before, .subtab[aria-current="page"], .theme-switch, .theme-switch__track,
  .btn, .copy-btn, .toggle, .step__mark, .plate-no, .door__art, .wall-state, .placeholder, [data-placeholder] { border-color: CanvasText; }
  .framed, .btn, .specimen:hover, .tile:has(input:checked), .quote, .callout, .skip-link, .specimen__sheet { box-shadow: none; }
  /* decorative art is dropped; the words carry everything */
  .site-footer__trees, .step__prints, .trail-fork-wrap, .specimen__art::before, .specimen__art::after,
  .quote::before, .plate-fox .pf-day, .plate-fox .pf-night, .plate-fox .pf-shadow, .plate-fox .pf-tracks, .door__art, .wall-state__art { display: none; }
  .tab:is([aria-current="page"], [data-current="parent"])::before { border-color: Highlight; border-width: 3px; }
  .tab:is([aria-current="page"], [data-current="parent"])::after { background: Highlight; }
  .rating__cell:has(input:checked) { outline: 3px solid Highlight; outline-offset: -5px; }
  .tile:has(input:checked) { outline: 3px solid Highlight; outline-offset: 2px; }
  .tile input:checked { forced-color-adjust: none; background: radial-gradient(circle, Highlight 0 5px, Canvas 5.5px); border-color: Highlight; }
  .theme-switch[aria-checked="true"] .theme-switch__knob { forced-color-adjust: none; background: Highlight; }
  .stars { forced-color-adjust: none; background: linear-gradient(90deg, CanvasText calc(var(--rating, 0) * 20%), GrayText 0); }
  .toggle::before, .toggle::after { forced-color-adjust: none; background: CanvasText; }
  :focus-visible { outline-color: Highlight; }
  select { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: 14px; }
  .rating__cell:has(input:focus-visible) { outline: 6px double Highlight; outline-offset: -9px; }
  .btn:disabled, .btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  .panel { background-image: none; border-color: CanvasText; }
  .panel--banded::after { display: none; }
}