/* Wild Inside: the lexicon catalog world (D57), for the web.
   Engraving ink on cream stock, vermilion plates and buttons, a navy frame for what is chosen,
   Georgia throughout, small caps for labels, double rules everywhere. Colours match app/WildInside/Lexicon.swift. */

/* ---------- Tokens ---------- */
:root {
  /* Colour: the app's palette */
  --paper: #F6EFE2;
  --ink: #1E1A16;
  --vermilion: #AB2F1B;
  --vermilion-deep: #7A1F10;
  --grey: #E8DFCD;
  --hair: #9C9285;
  --active: #1F2E57;
  --muted: #5C544A;
  --on-vermilion: #FBF1E4;

  /* Colour roles */
  --surface: var(--paper);
  --surface-quiet: var(--grey);
  --text: var(--ink);
  --caption: var(--muted);
  --accent: var(--vermilion);
  --accent-deep: var(--vermilion-deep);
  --on-accent: var(--on-vermilion);
  --chosen: var(--active);
  --rule: var(--ink);
  --rule-quiet: var(--hair);

  /* Night plates: the cat's hunting surface, measured from the app's grounds */
  --night-floorboards: #2E2418;
  --night-soil: #281F17;
  --night-pond: #1C1D15;
  --night-hall: #101923;
  --night-deep: #100D0A;
  --prey-contrast-min: 0.8;   /* her brightness contrast, the app's target (ground-contrast.json) */

  /* Type: Georgia, scaled from the reader's own text size */
  --serif: Georgia, "Noto Serif", "DejaVu Serif", serif;
  --step--2: 0.6875rem;   /* badges */
  --step--1: 0.8125rem;   /* small-caps labels */
  --step-small: 0.9375rem; /* notes, hints, specimen captions */
  --step-0: 1.125rem;     /* body */
  --step-1: 1.3125rem;    /* lede, captions, buttons */
  --step-2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --step-4: clamp(2.75rem, 1.5rem + 5.2vw, 5.75rem);
  --leading: 1.6;
  --leading-tight: 1.06;
  --measure: 66ch;
  --caps: 0.15em;

  /* Space: a 12px baseline */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2.25rem; --s7: 3rem; --s8: 4.5rem; --s9: 6rem;

  /* Rules: every frame is a double rule */
  --rule-heavy: 1.5px;
  --rule-mid: 1.2px;
  --rule-hair: 1px;
  --rule-plate: 1.4px;    /* the vermilion plate frame, hairline 3px inside it (Lexicon.swift Plate) */
  --double-gap: 4px;
  --tick: 5px;            /* the corner ticks cut from a button's frame */
  --chosen-frame: inset 0 0 0 2.5px var(--chosen), inset 0 0 0 6.5px var(--surface), inset 0 0 0 7.5px var(--chosen);

  /* Ornament: the four-petal fleuron, drawn (Lexicon.swift Fleuron), never a font glyph */
  --fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E1A16' d='M12 12Q19.43 17.08 24 12Q19.43 6.92 12 12ZM12 12Q6.92 19.43 12 24Q17.08 19.43 12 12ZM12 12Q4.57 6.92 0 12Q4.57 17.08 12 12ZM12 12Q17.08 4.57 12 0Q6.92 4.57 12 12Z'/%3E%3C/svg%3E");

  /* Shape and depth: none; the engraving carries both */
  --radius: 0;
  --shadow: none;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --press: 120ms;
  --fade: 450ms;          /* the hunt reel's crossfade */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--surface);
  color: var(--text);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s5);
}
body { margin: 0; font-size: var(--step-0); line-height: var(--leading); font-variant-numeric: oldstyle-nums; }
::selection { background: var(--chosen); color: var(--paper); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--chosen); outline-offset: 3px; }
h1, h2, h3, h4 { font-weight: normal; line-height: var(--leading-tight); text-wrap: balance; margin: 0; }
p { margin: 0 0 var(--s4); max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
table { font-variant-numeric: lining-nums tabular-nums; }
sup { line-height: 0; }

.skip { position: absolute; left: var(--s4); top: -100px; background: var(--paper); padding: var(--s2) var(--s4); border: 1px solid var(--ink); z-index: 10; }
.skip:focus { top: var(--s4); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.display { font-size: var(--step-4); letter-spacing: -0.012em; }
.h2 { font-size: var(--step-3); letter-spacing: -0.008em; }
.h3 { font-size: var(--step-2); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 36ch; }
.sc { text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--step--1); line-height: 1.4; font-weight: normal; }
.it { font-style: italic; }
.caption { font-style: italic; color: var(--caption); font-size: var(--step-0); line-height: 1.45; }
.muted { color: var(--caption); }
.latin { font-style: italic; color: var(--caption); margin: 0; }

/* ---------- Ornaments ---------- */
.fleuron {
  display: inline-block; flex: none; width: 12px; height: 12px;
  background: var(--fleuron) center / contain no-repeat;
}
.fleuron--lg { width: 18px; height: 18px; }
.swash {
  display: block; width: 64px; height: 12px; margin-inline: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12' fill='none' stroke='%231E1A16' stroke-width='1'%3E%3Cpath d='M0 6h23M41 6h23'/%3E%3Cpath fill='%231E1A16' d='M24 6l4-4 4 4-4 4z'/%3E%3Ccircle cx='36.5' cy='6' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
hr.rule { border: 0; border-top: var(--rule-heavy) solid var(--rule); border-bottom: var(--rule-hair) solid var(--rule); height: 3px; margin: 0; }
hr.hair { border: 0; border-top: var(--rule-hair) solid var(--rule-quiet); margin: 0; }
hr.orn {
  border: 0; height: 18px; margin: var(--s6) 0;
  background:
    linear-gradient(var(--rule), var(--rule)) left center / calc(50% - 22px) 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) right center / calc(50% - 22px) 1px no-repeat,
    var(--fleuron) center / 16px no-repeat;
}

/* ---------- Layout ---------- */
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.section { padding-block: var(--s8); }
.section + .section { padding-top: 0; }
.stack > * + * { margin-top: var(--s4); }
.two { display: grid; gap: var(--s6); }
.three { display: grid; gap: var(--s6); }
@media (min-width: 760px) {
  .two { grid-template-columns: 1fr 1fr; align-items: start; }
  .three { grid-template-columns: repeat(3, 1fr); }
}
.page-head { padding-block: var(--s7) var(--s6); }
.page-head .lede { max-width: 44ch; margin-top: var(--s4); }
.section-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); max-width: 52rem; }
.section-head p { margin: 0; }

/* ---------- Header ---------- */
.site-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); padding-block: var(--s5) var(--s4); }
.mark { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--ink); }
.mark:hover { color: var(--ink); }
.mark-name { font-size: var(--step-1); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.1; }
.mark-sub { font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.nav a { display: inline-block; padding-block: var(--s2); text-decoration: none; text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--step--1); }
.nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -1.5px var(--accent); }
.site-head .nav { margin-left: auto; }
@media (max-width: 759px) {
  .site-head { justify-content: center; text-align: center; }
  .nav { width: 100%; }
  .nav ul { justify-content: center; gap: 0 var(--s3); max-width: 19rem; margin-inline: auto; }
  .nav a { letter-spacing: 0.1em; }
  .site-head { padding-block: var(--s4) var(--s2); gap: var(--s2); }
}

/* ---------- Footer ---------- */
.site-foot { margin-top: var(--s8); padding-block: var(--s6) var(--s7); }
.foot-grid { display: grid; gap: var(--s6); margin-top: var(--s6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-grid h2 { margin-bottom: var(--s3); }
.foot-grid ul { list-style: none; display: grid; gap: var(--s1); }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.foot-note { margin-top: var(--s6); display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.foot-note p { margin: 0; max-width: 60ch; font-size: var(--step--1); color: var(--caption); }

/* ---------- Ruled button ---------- */
.btn {
  --frame: var(--accent-deep);
  --inner: color-mix(in srgb, var(--on-accent) 60%, transparent);
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px; padding: var(--s3) var(--s6); gap: 2px;
  font: inherit; font-size: var(--step-1); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: var(--rule-heavy) solid var(--frame); border-radius: var(--radius);
  transition: transform var(--press) var(--ease-out), filter var(--press) var(--ease-out);
}
.btn::before { content: ""; position: absolute; inset: var(--double-gap); border: 1px solid var(--inner); pointer-events: none; }
.btn::after {
  content: ""; position: absolute; inset: calc(-1 * var(--rule-heavy)); pointer-events: none;
  background:
    linear-gradient(var(--tick-fill, var(--paper)), var(--tick-fill, var(--paper))) 0 0 / var(--tick) var(--tick) no-repeat,
    linear-gradient(var(--tick-fill, var(--paper)), var(--tick-fill, var(--paper))) 100% 0 / var(--tick) var(--tick) no-repeat,
    linear-gradient(var(--tick-fill, var(--paper)), var(--tick-fill, var(--paper))) 0 100% / var(--tick) var(--tick) no-repeat,
    linear-gradient(var(--tick-fill, var(--paper)), var(--tick-fill, var(--paper))) 100% 100% / var(--tick) var(--tick) no-repeat;
}
.btn:hover { color: var(--on-accent); filter: brightness(0.93); }
.btn:active { transform: scale(0.985); filter: brightness(0.88); }
.btn small { font-size: var(--step--1); font-style: italic; opacity: 0.92; }
.btn--secondary { --frame: var(--ink); --inner: color-mix(in srgb, var(--ink) 60%, transparent); background: var(--surface-quiet); color: var(--ink); }
.btn--secondary:hover { color: var(--ink); }
.btn--small { min-height: 44px; padding: var(--s2) var(--s5); font-size: var(--step-0); }
.btn--wide { width: 100%; }
.btn--soon { cursor: default; filter: saturate(0.5); opacity: 0.75; }   /* not available yet: a label, not a control */
.btn--soon:hover { filter: saturate(0.5); }
.btn--soon:active { transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: stretch; }
@media (max-width: 479px) { .actions .btn { width: 100%; } }

/* ---------- Text link with a circled arrow ---------- */
.link { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; text-decoration: underline; }
.link::after, .link--back::before {
  content: ""; width: 1.05em; height: 1.05em; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231E1A16' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.5'/%3E%3Cpath d='M6 10h7.6M10.6 6.9l3.1 3.1-3.1 3.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.link--back::after { content: none; }
.link--back::before { transform: scaleX(-1); }

/* ---------- Plate ---------- */
.plate {
  border: var(--rule-mid) solid var(--rule); outline: var(--rule-hair) solid var(--rule); outline-offset: calc(-1 * var(--rule-mid) - var(--double-gap));
  padding: var(--s4) var(--s5) var(--s5); background: var(--surface);
}
figure.plate { margin: 0; }
.more { margin-top: var(--s4); }
.plate-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s3); padding-inline: 2px; }
.plate-title { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--step--1); line-height: 1.4; }
.plate-frame {
  position: relative; isolation: isolate; background: var(--surface);
  border: var(--rule-plate) solid var(--accent); outline: var(--rule-hair) solid var(--accent); outline-offset: calc(-1 * var(--rule-plate) - 3px);
  padding: var(--s5);
}
.plate-caption { margin: var(--s3) 0 0; font-style: italic; font-size: var(--step-1); line-height: 1.4; max-width: none; }
.plate-caption.small { font-size: var(--step-0); }
.plate--night .plate-frame { background: var(--night-floorboards); }
.plate--tight .plate-frame { padding: var(--s3); }
@media (max-width: 599px) {
  .plate { padding: var(--s3) var(--s3) var(--s4); outline-offset: -5px; }
  .plate-frame { padding: var(--s3); outline-offset: -5px; }
  .plate-caption { font-size: var(--step-0); }
}

/* Specimens: plates on white paper, multiplied onto the cream so they sit straight on the page (D208, D211). */
.specimen-img { mix-blend-mode: multiply; }

/* Numbered specimen row (the board's Plate VII) */
.quarry { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); align-items: start; }
.quarry figure { margin: 0; display: grid; gap: var(--s2); }
.quarry figcaption { font-size: var(--step-small); line-height: 1.3; }
.quarry .n { font-style: italic; font-size: var(--step-0); }
.quarry figcaption small { display: block; font-size: inherit; font-style: italic; color: var(--caption); }   /* a sample of the kinds, as the app lists them (D78) */
.quarry img { height: clamp(110px, 16vw, 220px); width: 100%; object-fit: contain; }
@media (max-width: 639px) {
  .quarry { grid-template-columns: repeat(3, 1fr); row-gap: var(--s5); }
}

/* ---------- The drawn iPad, lying flat ---------- */
.ipad {
  position: relative; background: var(--ink); padding: 2.6%; border-radius: 3.2% / 4.6%;
}
.ipad::before {   /* a ruled shadow at the page's one light angle */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translate(12px, 12px);
  background: repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 5px); opacity: 0.5;
}
.ipad > img, .ipad > video { width: 100%; border-radius: 1.1% / 1.6%; background: var(--night-floorboards); aspect-ratio: 1210 / 834; object-fit: cover; }

/* ---------- The hunt reel (the hero): the clips stacked in one drawn iPad; the one on show fades in over the last ---------- */
.reel { display: grid; }
.reel > video { grid-area: 1 / 1; }
.reel > video + video, .reel[data-scripted] > video {   /* the outgoing clip stays whole beneath until the new one is in */
  opacity: 0; visibility: hidden; transition: opacity 0s var(--fade), visibility 0s var(--fade);
}
.reel[data-scripted] > video[data-on] { z-index: 1; opacity: 1; visibility: visible; transition: opacity var(--fade) var(--ease-out); cursor: pointer; }
.reel-picks { margin-top: var(--s4); gap: var(--s2); }
.reel-picks .option { position: relative; }
.reel-picks .option[aria-pressed="true"]::after {   /* time to the next hunt, ruled along the foot inside the 7.5px chosen frame */
  content: ""; position: absolute; inset: auto 10px 9px; height: var(--rule-mid); background: var(--rule);
  transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform 250ms linear;   /* timeupdate comes every ~250ms */
}
@media (prefers-reduced-motion: reduce) {
  .reel > video + video, .reel[data-scripted] > video, .reel[data-scripted] > video[data-on],
  .reel-picks .option[aria-pressed="true"]::after { transition: none; }
}

/* ---------- Hero ---------- */
.hero { display: grid; gap: var(--s7); padding-block: var(--s6) var(--s8); align-items: center; }
.hero .display { margin-bottom: var(--s4); }
.hero .lede { margin-bottom: var(--s5); }
.hero .terms { margin-top: var(--s4); font-size: var(--step--1); }
@media (min-width: 1000px) { .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); } }
@media (max-width: 999px) {   /* the hunt right under the headline, so a phone sees what it is */
  .hero { gap: var(--s5); padding-top: var(--s5); }
  .hero-copy { display: contents; }
  .hero .display { order: 1; margin: 0; }
  .hero-media { order: 2; }
  .hero .lede { order: 3; margin: 0; }
  .hero .terms { order: 4; margin: 0; }
}

/* ---------- Steps ---------- */
.steps { display: grid; gap: var(--s6); list-style: none; }
.steps > li { display: grid; gap: var(--s3); align-content: start; }
.steps .num { font-style: italic; font-size: var(--step-2); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .steps .ipad { display: none; } .steps { gap: var(--s5); } }   /* the hero reel already shows the app on a phone */

/* ---------- Feature rows: copy beside a plate ---------- */
.feature { display: grid; gap: var(--s6); align-items: center; padding-block: var(--s7); }
.feature + .feature { border-top: var(--rule-hair) solid var(--rule-quiet); }
.feature .h2 { margin-bottom: var(--s4); }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); }
}

/* ---------- Facts: a ruled list of measured things ---------- */
.facts { list-style: none; display: grid; }
.facts > li { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s4); padding-block: var(--s3); border-top: var(--rule-hair) solid var(--rule-quiet); }
.facts > li:last-child { border-bottom: var(--rule-hair) solid var(--rule-quiet); }
.facts .sc { padding-top: 0.3em; }
.facts p { margin: 0; }
@media (max-width: 479px) { .facts > li { grid-template-columns: 1fr; gap: var(--s1); } }

/* ---------- Guided Play timeline ---------- */
.timeline { display: grid; grid-template-columns: 1fr 1fr 1fr; border: var(--rule-heavy) solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; margin: var(--s2) 4px; }
.timeline > div { padding: var(--s3) var(--s4); display: grid; gap: 2px; min-height: 92px; align-content: center; }
.timeline > div + div { border-left: var(--rule-hair) solid var(--ink); }
.timeline .hunt { background: var(--surface); }
.timeline .rest { background: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--ink) 28%, transparent) 5px 6px); }
.timeline b { font-weight: normal; font-size: var(--step-1); }

/* ---------- Specimen card and critter grid (The prey) ---------- */
.specimens { list-style: none; display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.specimen { display: grid; gap: var(--s2); align-content: start; }
.specimen-frame {
  aspect-ratio: 3 / 4; display: grid; place-items: center; padding: var(--s4); position: relative;
  border: var(--rule-hair) solid var(--rule-quiet);
}
/* The image is laid over the frame, so a tall plate can never stretch the 3:4 box. */
.specimen-frame > img { position: absolute; top: var(--s4); left: var(--s4); width: calc(100% - 2 * var(--s4)); height: calc(100% - 2 * var(--s4)); object-fit: contain; }
.specimen-frame--night { background: var(--night-hall); border-color: var(--ink); padding: 0; }
.specimen-frame--night > img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.specimen--built .specimen-frame { border: var(--rule-plate) solid var(--accent); outline: var(--rule-hair) solid var(--accent); outline-offset: calc(-1 * var(--rule-plate) - 3px); }
.specimen-empty { display: grid; justify-items: center; gap: var(--s2); color: var(--caption); font-style: italic; font-size: var(--step-small); text-align: center; }
.specimen-empty::before { content: ""; width: 44px; height: 44px; opacity: 0.35; background: var(--fleuron) center / contain no-repeat; }
.specimen h3 { font-size: var(--step-1); margin-top: var(--s2); }
.specimen h3 .n { font-style: italic; }
.specimen p { margin: 0; font-size: var(--step-small); line-height: 1.5; }
.specimen .badge { justify-self: start; margin-top: var(--s1); }

/* ---------- Badge ---------- */
.badge {
  display: inline-block; font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  padding: 5px 7px 4px; border: 1px solid var(--ink); white-space: nowrap; font-style: normal;
}
.badge--built { background: var(--ink); color: var(--paper); }
.badge--coming { color: var(--caption); border-color: var(--rule-quiet); }
.badge--next { background: var(--accent); border-color: var(--accent-deep); color: var(--on-accent); }

/* ---------- Chosen frame and option box ---------- */
.chosen { box-shadow: var(--chosen-frame); }
.option {
  font: inherit; font-size: var(--step-1); min-height: 56px; min-width: 72px; padding: 0 var(--s5);
  background: var(--surface); color: var(--ink); border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--rule-quiet); transition: transform var(--press) var(--ease-out);
}
.option[aria-pressed="true"], .option[aria-checked="true"] { box-shadow: var(--chosen-frame); }
.option:active { transform: scale(0.985); }
.option--small { font-size: var(--step-small); min-height: 44px; min-width: 0; padding: 0 var(--s3); }   /* a row of short labels; 44px, the smallest target */
.options { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- Citation and footnotes ---------- */
.cite a, a.cite { text-decoration: none; font-size: 0.75em; padding-inline: 0.15em; color: var(--accent); }
.cite a:hover { text-decoration: underline; }
.notes { list-style: none; counter-reset: note; display: grid; gap: var(--s2); font-size: var(--step-small); line-height: 1.5; color: var(--caption); }
.notes li { counter-increment: note; position: relative; padding-left: 2rem; max-width: var(--measure); }
.notes li::before { content: counter(note) "."; font-style: italic; position: absolute; left: 0; }
.notes li:target { color: var(--ink); box-shadow: inset 0 0 0 1px var(--chosen); }
.notes a { word-break: break-word; }

/* ---------- Myth versus evidence plate ---------- */
.myth { display: grid; }
.myth > div { padding: var(--s4) var(--s2); }
.myth .said { font-style: italic; font-size: var(--step-1); line-height: 1.4; }
.myth .said p { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--accent); }
.myth .sc { display: block; margin-bottom: var(--s2); color: var(--caption); }
@media (min-width: 760px) {
  .myth { grid-template-columns: 2fr 3fr; }
  .myth > div + div { border-left: var(--rule-hair) solid var(--rule-quiet); padding-left: var(--s5); }
}
@media (max-width: 759px) { .myth > div + div { border-top: var(--rule-hair) solid var(--rule-quiet); } }
.myths { display: grid; gap: var(--s5); }

/* ---------- FAQ item ---------- */
.faq { border-top: var(--rule-hair) solid var(--rule-quiet); }
.faq:last-child { border-bottom: var(--rule-hair) solid var(--rule-quiet); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding-block: var(--s4); font-size: var(--step-1); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: linear-gradient(var(--ink), var(--ink)) center / 16px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 16px no-repeat;
}
.faq[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 16px 1.5px no-repeat; }
.faq summary:hover { color: var(--accent); }
.faq > div { padding-bottom: var(--s5); }

/* ---------- Callout ---------- */
.callout { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; padding: var(--s4) 0; border-top: var(--rule-heavy) solid var(--rule); border-bottom: var(--rule-hair) solid var(--rule); }
.callout .fleuron { margin-top: 0.45em; }
.callout p { margin: 0; }
.callout--warn { border-top-color: var(--accent); }

/* ---------- Table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.table caption { text-align: left; font-style: italic; color: var(--caption); padding-bottom: var(--s3); }
.table th { text-align: left; font-weight: normal; text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--step--1); padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: var(--rule-heavy) solid var(--rule); }
.table td { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: var(--rule-hair) solid var(--rule-quiet); vertical-align: top; }
.table-wrap { overflow-x: auto; }

/* ---------- Form fields ---------- */
.field { display: grid; gap: var(--s2); max-width: 28rem; }
.field label { text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--step--1); }
.field .hint { font-style: italic; color: var(--caption); font-size: var(--step-small); margin: 0; }
.input {
  font: inherit; font-size: var(--step-0); color: var(--ink); background: var(--surface);
  min-height: 52px; padding: var(--s3) var(--s4); border: 0; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--rule-quiet);
}
.input::placeholder { color: var(--caption); font-style: italic; }
.input:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--chosen), inset 0 0 0 5.5px var(--surface), inset 0 0 0 6.5px var(--chosen); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--accent); }
.input:disabled { background: var(--surface-quiet); color: var(--caption); cursor: not-allowed; }
.error { color: var(--accent); font-style: italic; margin: 0; font-size: var(--step-small); }
.waitlist { display: grid; gap: var(--s3); border: 0; padding: 0; margin: 0; }
.waitlist .row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: stretch; }
.waitlist .row .input { flex: 1 1 16rem; }
.waitlist[disabled] .btn { cursor: not-allowed; filter: saturate(0.4); opacity: 0.7; }

/* ---------- Portrait plate (Gina) ---------- */
.portrait .plate-frame { display: grid; place-items: center; }
.portrait .plate-frame img { max-height: 320px; width: auto; }

/* ---------- States ---------- */
.state { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s6) var(--s4); }
.state p { margin: 0; }
.loading-rule { width: min(240px, 60%); height: 3px; border-top: var(--rule-heavy) solid var(--accent); border-bottom: 1px solid var(--accent); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .loading-rule { animation: draw 1.6s var(--ease-out) infinite; }
  @keyframes draw { from { transform: scaleX(0); } 70%, to { transform: scaleX(1); } }
}

/* ---------- Swatch (design system) ---------- */
.swatches { list-style: none; display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.swatch code { white-space: nowrap; }
.swatch { display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); align-items: center; }
.swatch span:first-child { aspect-ratio: 1; border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; margin: 3px; }
.swatch code, code { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; font-size: var(--step-small); }
.specimen-row { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; padding-block: var(--s4); }
.spec-label { display: block; margin-bottom: var(--s2); color: var(--caption); }
.do-dont { display: grid; gap: var(--s4); }
.do-dont > div { padding: var(--s4) var(--s5); }
.do-dont .do { box-shadow: var(--chosen-frame); }
.do-dont .dont { box-shadow: inset 0 0 0 1px var(--rule-quiet); }
.do-dont .dont p:not(.sc) { text-decoration: line-through; text-decoration-color: var(--accent); }
@media (min-width: 760px) { .do-dont { grid-template-columns: 1fr 1fr; } }
.toc { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.toc a { text-transform: uppercase; letter-spacing: var(--caps); font-size: var(--step--1); text-decoration: none; display: inline-block; padding-block: var(--s2); }
.toc a:hover { text-decoration: underline; }
.night-demo { background: var(--night-floorboards); color: var(--paper); padding: var(--s5); display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.night-demo div { display: grid; gap: var(--s2); }
.night-demo span:first-child { height: 56px; border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); }

/* ---------- Motion: the plates print, ink first, then their colour ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .print { animation: print linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes print { from { filter: grayscale(1) contrast(1.25) brightness(1.04); } to { filter: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .option { transition: none; }
  .btn:active, .option:active { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-head .nav, .skip { display: none; }
  body { font-size: 11pt; }
  a { text-decoration: none; }
}