/* CodeKasten's home page. The page is a slip box: the first screen is the front card of a drawer,
   and each section after it is another card (paper on the dark ground) or a stretch of the dark
   room the box stands in. One ground, one paper, one ink, one accent (the brand's amber), on the
   action. Motion lives in main.js; everything here is the still page. */

@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --ground: #0b0b0b;
  --ground-step: #151514;
  --ground-lift: #1d1c1a;
  --paper: #ebe8e1;
  --paper-step: #e0dcd3;
  --paper-deep: #d3cec3;
  --ink: #141312;
  --ink-soft: #4b4843;
  --light: #f1efea;
  --light-soft: #b4b0a8;
  --accent: #f5a623;
  --accent-ink: #1a1306;

  --margin: clamp(16px, 2.6vw, 40px);
  --gap: clamp(16px, 2vw, 28px);
  --section: clamp(96px, 13vw, 200px);
  --radius: 6px;

  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --text: "Inter", system-ui, sans-serif;
  --size-1: clamp(46px, 7.4vw, 118px);
  --size-2: clamp(34px, 4.4vw, 66px);
  --size-lead: clamp(19px, 1.6vw, 24px);
  --size-body: 18px;
  --size-small: 14px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--light);
  font: 400 var(--size-body)/1.55 var(--text);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 750; letter-spacing: -0.035em; line-height: 0.98; margin: 0; text-wrap: balance; }
h2 { font-size: var(--size-2); line-height: 1.02; }
h3 { font-size: var(--size-lead); letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
code, kbd, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
p code, li code, dd code, figcaption code { font-size: 0.88em; padding: 0.1em 0.35em; border-radius: 4px; background: rgba(127, 120, 110, 0.18); }
kbd { font-size: 0.85em; padding: 0.12em 0.45em; border-radius: 5px; background: var(--ground-lift); color: var(--light); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.skip { position: absolute; left: var(--margin); top: -60px; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Buttons: flat, square cornered, one fill */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--accent); color: var(--accent-ink);
  font: 600 17px/1 var(--text); text-decoration: none; letter-spacing: -0.01em;
  border: 0; border-radius: 2px; cursor: pointer;
  transition: background var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.button:hover { background: #ffb73d; }
.button:active { transform: translateY(1px) scale(0.98); }
.button-small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.button-ghost { background: var(--paper-step); color: var(--ink); min-height: 44px; padding: 0 18px; font-size: 15px; }
.button-ghost:hover { background: var(--paper-deep); }
.text-link {
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--t-hover) ease;
}
.text-link:hover { text-decoration-color: var(--accent); }

/* The bar: wordmark, three links, one action */
.bar {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 28px;
  padding: 18px var(--margin);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: -0.02em; }
.bar-links { display: flex; gap: 26px; margin-left: auto; }
.bar-links a { text-decoration: none; color: var(--light-soft); font-size: 16px; transition: color var(--t-hover) ease; }
.bar-links a:hover { color: var(--light); }

/* The grid every section shares */
.grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 72px);
  padding: 0 var(--margin);
  max-width: 1600px; margin: 0 auto;
}

/* ---------- The first screen: a drawer with its front card ---------- */
.hero { padding: clamp(28px, 5vw, 64px) var(--margin) 0; max-width: 1600px; margin: 0 auto; }
.drawer { position: relative; padding-top: 74px; }
.riffle { position: absolute; left: 0; right: 0; top: 0; height: 190px; pointer-events: none; }
/* a card behind the front one: a filled shape with its tab, the tab at its own place along the top */
.tab-card {
  --tab-h: 30px;
  position: absolute; top: 0; left: 2.5%; right: 2.5%; height: 100%;
  background: var(--paper-step); color: var(--ink);
  border-radius: var(--radius);
  clip-path: polygon(0 var(--tab-h), 0 100%, 100% 100%, 100% var(--tab-h), var(--tab-end) var(--tab-h), calc(var(--tab-end) - 12px) 0, calc(var(--tab-start) + 12px) 0, var(--tab-start) var(--tab-h));
  font-size: 15px;
}
.tab-card:nth-child(1) { --tab-start: 4%; --tab-end: 24%; filter: brightness(0.88); }
.tab-card:nth-child(2) { --tab-start: 40%; --tab-end: 60%; filter: brightness(0.94); }
.tab-card:nth-child(3) { --tab-start: 76%; --tab-end: 96%; }
.tc-type { position: absolute; top: 7px; left: calc(var(--tab-start) + 22px); right: calc(100% - var(--tab-end) + 22px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-row { position: absolute; top: calc(var(--tab-h) + 10px); left: 28px; right: 28px; display: flex; gap: 16px; align-items: baseline; }
.tc-name { color: var(--ink-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tc-id { margin-left: auto; color: var(--ink-soft); white-space: nowrap; }
.tc-id, .card-id { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

.front-card {
  position: relative; z-index: 2;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 52px) clamp(22px, 3.6vw, 56px) clamp(150px, 15vw, 210px);
  min-height: min(78vh, 800px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); grid-template-rows: auto 1fr;
}
.card-head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--ink-soft); }
.card-id { color: var(--ink); font-weight: 500; }
.card-main { grid-column: 1 / span 8; align-self: end; padding-top: clamp(40px, 6vw, 96px); }
.front-card h1 { font-size: clamp(36px, 6.9vw, 108px); max-width: 16ch; }
.lead { font-size: var(--size-lead); line-height: 1.42; max-width: 36ch; margin-top: clamp(24px, 2.6vw, 40px); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 3vw, 44px); }
.register { grid-column: 9 / span 4; align-self: end; background: var(--paper-step); border-radius: 4px; padding: 20px 22px 14px; }
.register h2 { font-size: var(--size-lead); letter-spacing: -0.02em; }
.register-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; }
.register-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; margin: 0 -10px; border-radius: 3px; transition: background var(--t-ui) ease, color var(--t-ui) ease; }
.register-list b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); transition: color var(--t-ui) ease; }
.register-list li.is-on { background: var(--ink); color: var(--paper); }
.register-list li.is-on b { color: var(--accent); }

.drawer-front {
  position: absolute; z-index: 3; left: calc(-1 * var(--margin) / 2); right: calc(-1 * var(--margin) / 2); bottom: 0;
  height: clamp(110px, 11vw, 160px);
  background: var(--ground-lift);
  border-radius: 4px 4px 0 0;
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px);
}
.label-holder {
  display: grid; place-items: center;
  width: clamp(120px, 12vw, 170px); height: clamp(48px, 4.4vw, 62px);
  background: #a8814a; border-radius: 4px; padding: 6px;
}
.label-holder span { width: 100%; height: 100%; display: grid; place-items: center; background: var(--paper); color: var(--ink); border-radius: 2px; font: 600 16px/1 var(--display); letter-spacing: 0.02em; }
.pull { width: clamp(70px, 7vw, 100px); height: 22px; border-radius: 0 0 40px 40px; background: #a8814a; }

/* ---------- Paper sections: each a card, with its tab somewhere along the top ---------- */
.sheet {
  --tab-start: 4%; --tab-end: 22%;
  position: relative;
  margin: var(--section) auto 0;
  max-width: calc(1600px - 2 * var(--margin));
  width: calc(100% - 2 * var(--margin));
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
  clip-path: polygon(0 26px, 0 100%, 100% 100%, 100% 26px, var(--tab-end) 26px, calc(var(--tab-end) - 18px) 0, calc(var(--tab-start) + 18px) 0, var(--tab-start) 26px);
  padding: calc(26px + clamp(40px, 6vw, 96px)) 0 clamp(48px, 6vw, 96px);
}
.sheet-tab-mid { --tab-start: 40%; --tab-end: 58%; }
.sheet-tab-right { --tab-start: 76%; --tab-end: 94%; }
.sheet .grid { padding: 0 clamp(20px, 3.6vw, 56px); }
.sheet p, .sheet li { color: var(--ink); }

.col-text { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 24px; align-self: start; }
.col-text p { max-width: 60ch; }
.facts { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.facts li { position: relative; padding-left: 26px; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 8px; border-radius: 2px; background: currentColor; opacity: 0.55; }

/* The live thing: numbering a card */
.numbering {
  grid-column: 8 / span 5; align-self: start;
  background: var(--paper-step); border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 18px;
}
.numbering-help { color: var(--ink-soft); font-size: 16px; }
.type-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--paper-deep); color: var(--ink); font: 500 15px/1 var(--text);
  transition: background var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.chip:hover { background: #c7c1b4; }
.chip:active { transform: scale(0.96); }
.chip.is-on { background: var(--ink); color: var(--paper); }
.id-out {
  display: block; overflow-wrap: anywhere;
  font: 600 clamp(19px, 1.62vw, 25px)/1.25 var(--display); letter-spacing: 0; font-variant-numeric: tabular-nums;
  background: var(--paper); border-radius: 4px; padding: 16px 18px;
}
.seg { display: inline-block; transition: color var(--t-ui) ease; }
.seg-prefix, .key-prefix { color: #9a5b00; }
.seg-sum, .key-sum { color: #2f5d8a; }
.id-out.is-new .seg { animation: segIn 520ms var(--ease-expo) both; }
.id-out.is-new .seg-random { animation-delay: 70ms; }
.id-out.is-new .seg-sum { animation-delay: 140ms; }
@keyframes segIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.id-parts { margin: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.id-parts div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.id-parts dt { font-weight: 600; }
.id-parts dd { margin: 0; color: var(--ink-soft); }
.numbering-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shout-out { font-size: 15px; color: var(--ink-soft); min-height: 3em; }
.shout-out b { color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Pictures: interface plates (square, dark) and photographs */
figure { margin: 0; }
figcaption { margin-top: 12px; font-size: var(--size-small); line-height: 1.45; color: var(--ink-soft); }
.dark figcaption, .foot figcaption { color: var(--light-soft); }
.plate img, .photo img { width: 100%; border-radius: 4px; background: #000; }
.photo img { object-fit: cover; }
.plate-wide { grid-column: 1 / span 8; }
.photo-drawer { grid-column: 9 / span 4; align-self: start; }
.photo-drawer img { aspect-ratio: 5 / 4; object-position: 40% 50%; }

/* ---------- Dark sections ---------- */
.dark { margin-top: var(--section); }
.dark-step { background: var(--ground-step); padding: clamp(72px, 8vw, 128px) 0; }
.dark p, .dark li { color: var(--light); }

.bleed { position: relative; overflow: hidden; margin: 0 0 clamp(56px, 7vw, 104px); }
.bleed img { width: 100%; height: clamp(320px, 62vh, 720px); object-fit: cover; object-position: 50% 45%; transform-origin: 50% 40%; }
.bleed figcaption { padding: 0 var(--margin); }

.branch-grid .col-text { grid-column: 1 / span 5; }
.branch-figure { grid-column: 7 / span 6; align-self: start; }
.branch-figure svg { width: 100%; height: auto; overflow: visible; }
.br-line { fill: none; stroke-width: 10; stroke-linecap: round; }
.br-main { stroke: #3a3936; }
.br-side { stroke: var(--paper-deep); }
.br-twig { stroke: #8a857b; }
.br-node circle { fill: var(--ground); stroke: var(--paper); stroke-width: 6; }
.br-merge circle { fill: var(--accent); stroke: var(--accent); }
.br-node text, .br-label { fill: var(--light); font: 600 22px var(--display); text-anchor: middle; letter-spacing: -0.01em; }
.br-label { fill: var(--light-soft); text-anchor: start; font: 500 18px var(--text); }
.plate-history { grid-column: 1 / span 5; }
.plate-menu { grid-column: 6 / span 4; align-self: end; }
.photo-label { grid-column: 10 / span 3; align-self: end; }
.photo-label img { aspect-ratio: 3 / 4; }

/* Apps */
#apps .col-text { grid-column: 1 / span 5; grid-row: 1 / span 2; position: sticky; top: 32px; }
.path { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: none; display: grid; gap: 4px; }
.path li { background: var(--paper-step); border-radius: 4px; padding: 14px 18px; }
.path li:nth-child(2) { margin-left: 20px; }
.path li:nth-child(3) { margin-left: 40px; }
.path li:nth-child(4) { margin-left: 60px; background: var(--paper-deep); }
.aside { color: var(--ink-soft) !important; font-size: 16px; }
.plate-builder { grid-column: 7 / span 6; grid-row: 1; }
.plate-market { grid-column: 8 / span 5; grid-row: 2; }

/* Workflows: a working piece of the canvas */
.col-text-wide { grid-column: 1 / span 6; }
.flow {
  grid-column: 1 / -1;
  background: #0d0d0d; border: 1px solid #262626; border-radius: 10px;
  padding: 16px clamp(14px, 2vw, 24px) 18px;
  font-family: var(--text); color: #e9e9e9;
}
.flow-bar { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.flow-title { font-weight: 600; }
.flow-state { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #1f1f1f; color: #b5b5b5; }
.flow-run {
  margin-left: auto; height: 34px; padding: 0 14px; border-radius: 7px; border: 1px solid #3a3a3a;
  background: #ececec; color: #111; font: 600 14px var(--text); cursor: pointer;
  transition: background var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.flow-run:hover { background: #fff; }
.flow-run:active { transform: scale(0.97); }
.flow-canvas {
  position: relative; margin-top: 18px; padding: clamp(28px, 4vw, 56px) 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 4vw, 64px);
  background-color: #121212; border-radius: 8px;
  background-image: radial-gradient(#2a2a2a 1px, transparent 1px); background-size: 18px 18px;
  padding-inline: clamp(14px, 2.4vw, 32px);
}
.flow-wires { position: absolute; left: clamp(14px, 2.4vw, 32px); right: clamp(14px, 2.4vw, 32px); top: calc(50% - 6px); height: 2px; width: calc(100% - 2 * clamp(14px, 2.4vw, 32px)); transform: translateY(-1px); overflow: visible; }
.flow-wires path { stroke: #3c3c3c; stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.flow-step {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 10px;
  background: #171717; border: 1px solid #2e2e2e; border-radius: 9px; padding: 12px 12px 10px;
  transition: border-color var(--t-ui) ease, background var(--t-ui) ease, transform var(--t-ui) var(--ease-out);
}
.flow-step b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.flow-step small { display: block; font-size: 12px; color: #8d8d8d; }
.flow-step .port { grid-column: 1 / -1; justify-self: end; font-size: 12px; color: #8d8d8d; border-top: 1px solid #262626; width: 100%; text-align: right; padding-top: 7px; }
.flow-step.is-active { border-color: var(--accent); background: #1d1a14; transform: translateY(-3px); }
.flow-step.is-done { border-color: #4a4a4a; }
.dot { width: 22px; height: 22px; border-radius: 6px; display: inline-block; }
.dot-trigger { background: #3b2f12; box-shadow: inset 0 0 0 6px #3b2f12, inset 0 0 0 11px #e8a92a; }
.dot-delay { background: #2b2140; box-shadow: inset 0 0 0 6px #2b2140, inset 0 0 0 11px #9c7cf0; }
.dot-inbox { background: #10283a; box-shadow: inset 0 0 0 6px #10283a, inset 0 0 0 11px #46a3e8; }
.dot-end { background: #10203c; box-shadow: inset 0 0 0 6px #10203c, inset 0 0 0 11px #4d8df5; }
.flow-token { position: absolute; z-index: 2; top: 50%; box-sizing: content-box; border: 4px solid #121212; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); opacity: 0; }
.flow-log { margin-top: 12px; font-size: 13px; color: #9b9b9b; min-height: 1.5em; }
.triggers { grid-column: 8 / span 5; align-self: end; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); }
.triggers dt { font: 700 var(--size-lead)/1.2 var(--display); letter-spacing: -0.02em; }
.triggers dd { margin: 8px 0 0; color: var(--light-soft); font-size: 16px; }

/* Agents */
.plate-transcript { grid-column: 1 / span 7; grid-row: 1; align-self: start; }
#agents .col-text { grid-column: 8 / span 5; grid-row: 1 / span 2; position: sticky; top: 32px; }
.code {
  margin: 0; padding: 18px 20px; border-radius: 4px; background: var(--ink); color: var(--paper);
  font-size: 14px; line-height: 1.6; overflow-x: auto; white-space: pre;
}
.plate-inbox { grid-column: 1 / span 7; grid-row: 2; }

/* Fleeting notes */
.notes-grid { align-items: center; }
.key-stage { grid-column: 1 / span 5; display: grid; place-items: center; min-height: clamp(260px, 30vw, 440px); background: var(--ground-step); border-radius: var(--radius); }
.key { display: block; border-radius: 22px; background: var(--paper-deep); padding-bottom: 14px; }
.keycap {
  display: grid; place-items: center;
  width: clamp(150px, 16vw, 240px); aspect-ratio: 1;
  background: var(--paper); color: var(--ink); border-radius: 22px;
  font: 700 clamp(80px, 9vw, 132px)/1 var(--display); letter-spacing: -0.04em;
  transition: transform 120ms var(--ease-out);
}
/* pressed: the face goes down onto the key's side */
.keycap.is-down { transform: translateY(12px); }
.notes-grid .col-text { grid-column: 7 / span 6; }
.plate-capture { margin-top: 8px; }

/* Read on */
.read-grid { align-items: start; }
.photo-wall { grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; }
.photo-wall img { flex: 1; min-height: 0; height: 100%; }
.read-grid .col-text { grid-column: 7 / span 6; grid-row: 1; }
.read-grid .entries { grid-row: 2; }
.doc-links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--gap); }
.doc-links a { display: block; padding: 14px 16px; border-radius: 4px; background: var(--paper-step); text-decoration: none; font-weight: 600; transition: background var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.doc-links a:hover { background: var(--paper-deep); }
.doc-links a:active { transform: scale(0.98); }
.entries { grid-column: span 3; }
.entries-blog { grid-column: 7 / span 3 !important; }
.entries-releases { grid-column: 10 / span 3 !important; }
.entries h3 a { text-decoration: none; }
.entries h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.entries ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.entry a { font-weight: 600; text-decoration: none; }
.entry a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.entry-date { display: block; font-size: var(--size-small); color: var(--ink-soft); margin-top: 2px; }
.entry p { font-size: 15px; margin-top: 6px; color: var(--ink-soft) !important; }

/* ---------- The footer: the back of the box ---------- */
.foot { margin-top: var(--section); }
.foot-photo img { width: 100%; height: clamp(220px, 34vw, 460px); object-fit: cover; object-position: 50% 60%; }
.foot-body { padding: clamp(32px, 4vw, 56px) var(--margin) clamp(32px, 4vw, 48px); max-width: 1600px; margin: 0 auto; }
.foot-name { font: 800 clamp(64px, 18.1vw, 288px)/0.82 var(--display); letter-spacing: -0.055em; margin-left: -0.04em; white-space: nowrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: clamp(28px, 3vw, 44px); }
.foot-links a { text-decoration: none; font-weight: 600; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.credits { margin-top: 28px; font-size: var(--size-small); color: var(--light-soft); max-width: 110ch; }
.credits a { color: var(--light); }

/* ---------- Tablet and phone: compositions of their own ---------- */
@media (max-width: 1000px) {
  .card-main, .register { grid-column: 1 / -1; }
  .register { margin-top: 40px; }
  .register-list { columns: 2; column-gap: 28px; }
  .register-list li { break-inside: avoid; }
  #apps .col-text, .plate-builder, .plate-market, .plate-transcript, .plate-inbox, #agents .col-text { grid-row: auto; position: static; }
  .triggers { grid-column: 1 / -1; }
  .read-grid .col-text, .read-grid .entries { grid-row: auto; }
  .col-text, .branch-grid .col-text, #apps .col-text, .col-text-wide, #agents .col-text, .notes-grid .col-text, .read-grid .col-text { grid-column: 1 / -1; }
  .numbering { grid-column: 1 / -1; }
  .plate-wide { grid-column: 1 / -1; }
  .photo-drawer { grid-column: 1 / span 8; }
  .photo-drawer img { aspect-ratio: 3 / 2; }
  .branch-figure { grid-column: 1 / -1; }
  .plate-history { grid-column: 1 / span 7; }
  .plate-menu { grid-column: 8 / span 5; }
  .photo-label { display: none; }
  .plate-builder { grid-column: 1 / span 10; }
  .plate-market { grid-column: 4 / -1; }
  .plate-transcript { grid-column: 1 / -1; order: 2; }
  .plate-inbox { grid-column: 1 / -1; order: 3; }
  .triggers { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .key-stage { grid-column: 1 / -1; min-height: 240px; }
  .photo-wall { grid-column: 1 / -1; grid-row: auto; }
  .photo-wall img { aspect-ratio: 16 / 9; height: auto; flex: none; }
  .entries-blog { grid-column: 1 / span 6 !important; }
  .entries-releases { grid-column: 7 / span 6 !important; }
}
@media (max-width: 640px) {
  :root { --size-body: 17px; }
  .bar { gap: 14px; }
  .bar-links { gap: 16px; }
  .bar-links a:nth-child(3) { display: none; }
  .wordmark span { display: none; }
  .drawer { padding-top: 70px; }
  .tab-card { font-size: 14px; }
  .tab-card:nth-child(1) { --tab-start: 3%; --tab-end: 33%; }
  .tab-card:nth-child(2) { --tab-start: 35%; --tab-end: 65%; }
  .tab-card:nth-child(3) { --tab-start: 67%; --tab-end: 97%; }
  .tc-type { left: calc(var(--tab-start) + 14px); right: calc(100% - var(--tab-end) + 10px); font-size: 13px; }
  .tc-row { left: 16px; right: 16px; }
  .tab-card .tc-id { display: none; }
  .front-card { min-height: 0; padding-bottom: 130px; }
  .card-main { padding-top: 48px; }
  .register-list { columns: 1; }
  .card-head { flex-direction: column; gap: 2px; }
  .drawer-front { height: 96px; }
  .sheet { --tab-start: 6%; --tab-end: 44%; }
  .sheet-tab-mid { --tab-start: 30%; --tab-end: 68%; }
  .sheet-tab-right { --tab-start: 54%; --tab-end: 92%; }
  .photo-drawer, .plate-history, .plate-menu, .plate-builder, .plate-market { grid-column: 1 / -1; }
  .plate-market { margin-top: 0; }
  .path li:nth-child(n) { margin-left: 0; }
  .id-parts div { grid-template-columns: 1fr; gap: 2px; }
  .flow-canvas { grid-template-columns: 1fr; padding-block: 18px; }
  .flow-wires { left: 50%; top: 18px; bottom: 18px; height: auto; width: 2px; transform: none; }
  .flow-wires path { d: path("M0 0 V120"); }
  .flow-token { left: 50%; top: 0; }
  .triggers { grid-template-columns: 1fr; }
  .doc-links { grid-template-columns: 1fr; }
  .entries-blog, .entries-releases { grid-column: 1 / -1 !important; grid-row: auto; }
  .foot-name { font-size: 18.1vw; }
}

/* ---------- Motion: hidden states only when the script runs, and never under reduced motion ---------- */
.js [data-reveal] > *, .js [data-reveal].plate, .js [data-reveal].photo, .js [data-reveal].numbering, .js [data-reveal].triggers > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--ease-expo), transform var(--t-reveal) var(--ease-expo);
  transition-delay: calc(var(--k, 0) * 80ms);
}
.js [data-reveal].plate, .js [data-reveal].photo { transform: translateY(32px) scale(0.985); }
.js [data-reveal].plate > *, .js [data-reveal].photo > *, .js [data-reveal].numbering > * { opacity: 1; transform: none; transition: none; }
.js [data-reveal].is-in > *, .js [data-reveal].is-in.plate, .js [data-reveal].is-in.photo, .js [data-reveal].is-in.numbering, .js [data-reveal].is-in.triggers > * { opacity: 1; transform: none; }

.js .front-card h1, .js .front-card .lead, .js .front-card .actions, .js .card-head { animation: rise 900ms var(--ease-expo) both; }
.js .card-head { animation-delay: 80ms; }
.js .front-card h1 { animation-delay: 160ms; }
.js .front-card .lead { animation-delay: 260ms; }
.js .front-card .actions { animation-delay: 340ms; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.js .front-card { animation: cardIn 1100ms var(--ease-expo) both; }
@keyframes cardIn { from { transform: translateY(70px); } to { transform: none; } }

/* the riffle: the card behind lifts, shows its tab and number, and drops back */
.riffle.is-live .tab-card { transition: transform 900ms var(--ease-expo), filter 600ms ease; }
.riffle.is-live .tab-card.is-up { transform: translateY(-34px); filter: none; z-index: 2; }
.riffle.is-live .tab-card.is-swap { transition: none; transform: translateY(80px); }

.br-line { stroke-dasharray: var(--len, 1200); stroke-dashoffset: 0; }
.js [data-branch]:not(.is-in) .br-line { stroke-dashoffset: var(--len, 1200); }
.js [data-branch]:not(.is-in) .br-node { opacity: 0; transform: scale(0.4); }
.js [data-branch] .br-line { transition: stroke-dashoffset 1400ms var(--ease-in-out); }
.js [data-branch] .br-side { transition-delay: 500ms; }
.js [data-branch] .br-twig { transition-delay: 1100ms; }
.br-node { transform-box: fill-box; transform-origin: 50% 0; transition: opacity 500ms ease, transform 600ms var(--ease-expo); }
.br-node circle { transform-box: fill-box; transform-origin: center; }
.js [data-branch] .br-node { transition-delay: calc(300ms + var(--n) * 380ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] > *, .js [data-reveal].plate, .js [data-reveal].photo, .js [data-reveal].numbering, .js [data-reveal].triggers > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .front-card, .js .front-card h1, .js .front-card .lead, .js .front-card .actions, .js .card-head { animation: none; }
  .js [data-branch] .br-line { stroke-dashoffset: 0 !important; transition: none; }
  .js [data-branch] .br-node { opacity: 1 !important; transform: none !important; transition: none; }
  .riffle.is-live .tab-card { transition: none; }
  .id-out.is-new .seg { animation: none; }
  .flow-step, .keycap, .button, .chip { transition: none; }
}

/* The 404 page: one card, nothing behind it */
.missing-card { min-height: min(70vh, 640px); padding-bottom: clamp(40px, 5vw, 64px); }