@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Terracotta on linen measures 3.52:1, so it is for large text only (the h1's em). */
:root {
  --paper: #F3EEE4; --ink: #1E2422; --muted: #5C625F; --teal: #1D5E5B; --terra: #C4623A; --line: #E0D8C8;
  --serif: "Instrument Serif", Georgia, serif; --sans: "Instrument Sans", system-ui, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--sans); font-size: 17px; line-height: 1.55; }
a { color: var(--teal); }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }

.skip-link { position: absolute; left: 12px; top: -64px; z-index: 30; padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; color: var(--paper); }

.site-header, main, .site-footer { max-width: 1080px; margin: 0 auto; padding-inline: 16px; }

.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-height: 80px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 32px; color: var(--ink); text-decoration: none; letter-spacing: .02em; }
.pill { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: #F6E3D6; color: #8A3E1E; }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; font-size: 15px; font-weight: 600; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 40px; align-items: center; padding: 28px 0 56px; }
.hero > * { min-width: 0; }
/* One column: the figure's margin is the gap below the copy (the rows have none, so the empty card region adds no
   space). */
@media (max-width: 820px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-figure { margin-top: 40px; } }
.eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; margin: 0 0 18px; }
h1 em { color: var(--terra); }
.lede { margin: 0; color: var(--muted); max-width: 52ch; }

.hero-stage { position: relative; width: 100%; aspect-ratio: 1600 / 1000; border-radius: 6px; overflow: hidden; }
.hero-still { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-controls { display: flex; gap: 12px; margin-top: 12px; }
.hero-stage > .hero-still, .hero-stage > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-stage > .hero-still { transition: opacity 0.6s ease; }
.hero-stage.is-live > .hero-still { opacity: 0; }
.hero-pause, .hero-toggle { min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: #FFFDF8; color: var(--ink); font: 600 15px/1 var(--sans); cursor: pointer; }
.hero-pause:hover, .hero-toggle:hover { border-color: var(--teal); }
/* Wide enough for "Sew it back", so the label change never moves Pause beside it. */
.hero-toggle { min-width: 8.5em; }
/* ?frame=still (D19): the stage alone, filling the viewport, for the captured still; anything later stays hidden
   without being named. */
html[data-frame="still"], html[data-frame="still"] body { overflow: hidden; }
html[data-frame="still"] body * { visibility: hidden; }
html[data-frame="still"] .hero-stage, html[data-frame="still"] .hero-stage > canvas, html[data-frame="still"] .hero-stage > .hero-still { visibility: visible; }
html[data-frame="still"] .hero-stage { position: fixed; inset: 0; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; z-index: 100; }
/* #10's hover tooltip: opaque, never a pointer target, no fade; it sets no display, so [hidden] still hides it. */
.hero-tip { position: absolute; z-index: 2; pointer-events: none; max-width: 18em; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #FFFDF8; color: var(--ink); font-size: 14px; line-height: 1.35; box-shadow: 0 2px 8px rgba(30, 36, 34, .12); }
.hero-tip-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.hero-tip-status { display: block; color: var(--muted); }
.hero-hint { min-height: 1.55em; margin: 10px 0 0; font-size: 15px; color: var(--muted); }
/* Live only: room for the longest live hint (#9's quilt hint: two lines, three on a narrow window), so the hint
   changing on unstitch never moves the page under it. The still hint never changes, so the still path keeps 1.55em. */
.hero-stage[data-hero-state="live"] ~ .hero-hint { min-height: 3.1em; }
@media (max-width: 440px) { .hero-stage[data-hero-state="live"] ~ .hero-hint { min-height: 4.65em; } }
/* #15's what's-new card, below the hint, so it never covers the canvas or the controls. Its region is the hero's own
   row under the figure, never inside the figure: the hero centres its first row, so a card that grew that row would
   move the headline as it shows and as it closes. The region has no box of its own (an empty block, never display:
   contents, which can drop it from the accessibility tree), so it takes no space while empty. Every colour is opaque
   and nothing fades, on either path. */
.whatsnew { grid-column: 2; }
@media (max-width: 820px) { .whatsnew { grid-column: auto; } }
.whatsnew-card { margin-top: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 6px; background: #FFFDF8; color: var(--ink); }
.whatsnew-heading { margin: 0 0 8px; font: 600 18px/1.3 var(--sans); }
.whatsnew-version { margin: 8px 0 2px; font: 600 13px/1.4 var(--sans); letter-spacing: .08em; color: var(--teal); }
.whatsnew-list { margin: 0 0 12px; padding-left: 20px; }
.whatsnew-name { font-size: 16px; font-weight: 400; overflow-wrap: anywhere; }
/* Its own rule: the border is ink, well over 3:1 against the card, where the controls' --line border is not. */
.whatsnew-close { min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: #FFFDF8; color: var(--ink); font: 600 15px/1 var(--sans); cursor: pointer; }
.whatsnew-close:hover { border-color: var(--teal); }

.panels, .why { border-top: 1px solid var(--line); padding: 36px 0 8px; }
.panels h2, .why h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 16px; }
.panels-status { margin: 0 0 16px; font-weight: 600; }
.panel-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
@media (max-width: 820px) { .panel-groups { grid-template-columns: minmax(0, 1fr); } }
.panel-group { min-width: 0; }
.panel-group h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.panel-list { list-style: none; margin: 0; padding: 0; }
.panel { padding: 12px 0; border-bottom: 1px solid var(--line); }
.panel-name { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
/* #14: a tagged panel's name runs inline, so the "New" badge sits beside it. Both colours are opaque (about 7.3:1). */
.panel.is-new > .panel-name { display: inline; }
.panel-new { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--teal); color: #FFFDF8; font: 600 13px/1.4 var(--sans); letter-spacing: .04em; vertical-align: 5px; white-space: nowrap; }
.panel-figure { display: block; font-weight: 600; color: var(--teal); overflow-wrap: anywhere; }
.panel-blurb { margin: 4px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.panel-none { padding: 12px 0; color: var(--muted); }
.suggest { margin: 24px 0 0; font-weight: 600; overflow-wrap: anywhere; }

.why p { max-width: 70ch; margin: 0 0 12px; }

.site-footer { padding-block: 24px 40px; color: var(--muted); font-size: 14px; }