/* Case studies, template 3.0.0.
   One DOM, one sheet, ten layout families. The palette and the type come from the
   same catalogue the rest of the host uses: /case/tokens.css carries the signature
   designs, /designs-runtime.js writes the derived ones inline, and /case/design.js
   sets data-design plus data-layout on <html>. Nothing here knows a colour by name. */

:root {
  --paper: #f7f4ed; --card: #fffdf8; --ink: #17150f; --body: #3a362d; --body-strong: #2d2a22;
  --muted: #6b665a; --line: #d9d2c1; --accent: #1f5d45; --on-accent: #f7f4ed;
  --chip: #efe6d0; --chip-ink: #7a3a0d; --shadow-card: none;
  --radius-card: 16px; --radius-panel: 16px; --radius-btn: 999px;
  --display-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --display-weight: 500; --display-ls: -.035em; --display-lh: .98;
  --body-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ui-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ui-tracking: .07em; --section-pad: 64px; --card-pad: 20px; --hero-gap: 56px;
  --rule-w: 1px; --measure: 38rem; --sp: clamp(18px, 2.2vw, 28px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font: 400 clamp(16.5px, 0.5vw + 15px, 18px)/1.66 var(--body-font);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; border-bottom: var(--rule-w) solid color-mix(in srgb, var(--accent) 35%, transparent); }
a:hover { border-bottom-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { color: var(--ink); margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 10px 14px; font: 600 13px/1 var(--body-font); z-index: 30; }
.skip:focus { left: 12px; }
code, kbd { font-family: var(--ui-font); }

/* the bar */
.bar { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: var(--rule-w) solid var(--line); }
.bar .in { max-width: 1320px; margin: 0 auto; padding: 12px var(--sp); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { font: 700 12px/1 var(--body-font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); border: 0; }
.brand b { font-weight: 700; }
.controls { display: flex; gap: 6px; }
.ctrl, .tool {
  font: 500 11px/1 var(--ui-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: var(--rule-w) solid var(--line);
  border-radius: var(--radius-btn); padding: 7px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.ctrl:hover, .tool:hover { border-color: var(--accent); color: var(--accent); }
.ctrl[disabled] { opacity: .38; cursor: default; }
.ctrl[disabled]:hover { border-color: var(--line); color: var(--ink); }
kbd { font-size: 10px; padding: 2px 5px; border: 1px solid currentColor; border-radius: 3px; opacity: .75; }
.bar-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.work { font: 500 11px/1 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; border: 0; color: var(--muted); }
.tool .short { display: none; }

/* the catalogue panel: every design on the host, not a sample */
.design-panel { max-width: 1320px; margin: 0 auto; padding: 18px var(--sp) 22px; border-bottom: var(--rule-w) solid var(--line); background: var(--card); }
.dp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dp-title { font: 600 1rem/1.3 var(--body-font); letter-spacing: -.01em; }
.dp-count { font: 500 10px/1 var(--ui-font); letter-spacing: var(--ui-tracking); text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.dp-note { font-size: .84rem; color: var(--muted); max-width: 74ch; margin: 6px 0 14px; }
.dp-sigs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dp-sig { background: transparent; border: var(--rule-w) solid var(--line); border-radius: var(--radius-btn); padding: 6px 10px; cursor: pointer; text-align: left; color: var(--ink); }
.dp-sig:hover { border-color: var(--accent); }
.dp-sig[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dp-sig-name { display: block; font: 600 11.5px/1.2 var(--body-font); }
.dp-sig-fam { display: block; font: 500 9px/1.4 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dp-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.dp-chip { background: transparent; border: var(--rule-w) solid var(--line); border-radius: 999px; padding: 4px 9px; font: 500 9.5px/1.3 var(--ui-font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.dp-chip:hover { color: var(--ink); border-color: var(--accent); }
.dp-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dp-search { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dp-search input { flex: 1 1 220px; min-width: 0; font: 12px/1.4 var(--ui-font); color: var(--ink); background: var(--paper); border: var(--rule-w) solid var(--line); border-radius: var(--radius-btn); padding: 7px 10px; }
.dp-search input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-search input[aria-invalid="true"] { border-color: #b3261e; }
.dp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dp-cell { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--paper); border: var(--rule-w) solid var(--line); border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--ink); }
.dp-cell:hover { border-color: var(--accent); }
.dp-cell[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dp-sw { display: inline-flex; flex: none; width: 26px; height: 18px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(0,0,0,.15); }
.dp-sw i { display: block; width: 33.33%; height: 100%; }
.dp-name { font: 500 10.5px/1.25 var(--ui-font); letter-spacing: .01em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-foot { display: flex; justify-content: center; padding-top: 12px; }

/* the hero */
.case { max-width: 1320px; margin: 0 auto; padding: 0 var(--sp) 72px; }
.hero { padding: clamp(34px, 5vw, 72px) 0 calc(var(--hero-gap) * .7); border-bottom: var(--rule-w) solid var(--line); }
.kicker { font: 500 11px/1.4 var(--ui-font); letter-spacing: var(--ui-tracking); text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.kicker span { color: var(--accent); margin: 0 6px; }
h1 { font-family: var(--display-font); font-weight: var(--display-weight); font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: var(--display-lh); letter-spacing: var(--display-ls); max-width: 20ch; text-wrap: balance; }
.hook { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.45; color: var(--ink); max-width: 46ch; margin: clamp(16px, 2vw, 24px) 0 0; }
.lede { max-width: 52ch; color: var(--muted); margin: 14px 0 0; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 14px 24px; margin: clamp(24px, 3vw, 40px) 0 0; padding-top: 16px; border-top: var(--rule-w) solid var(--line); }
.meta-item dt { font: 500 10px/1.4 var(--ui-font); letter-spacing: var(--ui-tracking); text-transform: uppercase; color: var(--muted); }
.meta-item dd { margin: 4px 0 0; font-size: .94rem; color: var(--ink); }
.stack { display: flex; flex-wrap: wrap; gap: 0 .4em; }
.stack span + span::before { content: "·"; margin-right: .4em; color: var(--muted); }

/* the hero fills the window: the words in one column, the facts in the other.
   A text column beside a column of blank paper is a defect, not restraint. */
@media (min-width: 1100px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 290px); grid-template-rows: auto auto auto auto; column-gap: clamp(36px, 6vw, 96px); align-items: start; }
  .hero .kicker, .hero h1, .hero .hook, .hero .lede { grid-column: 1; }
  .hero .meta { grid-column: 2; grid-row: 1 / -1; align-self: end; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border-top: 0; }
  .hero .meta .meta-item { border-top: var(--rule-w) solid var(--line); padding: 9px 0 11px; }
  h1 { max-width: 24ch; }
  .hook { max-width: 52ch; }
  .lede { max-width: 56ch; }
  html[data-layout="centered"] .hero { grid-template-columns: minmax(0, 1fr); }
  html[data-layout="centered"] .hero .meta { grid-row: auto; grid-column: 1; justify-items: center; margin-top: 28px; }
  html[data-layout="centered"] .hero .meta .meta-item { border-top: 0; }
}

/* grid, rail, body */
.grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-top: calc(var(--section-pad) * .5); }
.rail { position: sticky; top: 64px; align-self: start; }
.toc-k { font: 500 10px/1 var(--ui-font); letter-spacing: var(--ui-tracking); text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.toc a { font-size: .84rem; color: var(--muted); border: 0; }
.toc a:hover { color: var(--accent); }
.body { max-width: var(--measure); }
section { padding: var(--section-pad) 0 0; }
h2 { font-family: var(--display-font); font-weight: var(--display-weight); font-size: clamp(1.3rem, 2vw, 1.62rem); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 14px; }
p { margin: 0 0 1em; }
.bullets { margin: 0 0 1em; padding-left: 1.15em; }
.bullets li { margin-bottom: .5em; }
.bullets li::marker { color: var(--accent); }

/* the numbers */
.numbers-k { color: var(--muted); max-width: 48ch; margin-bottom: 26px; }
.metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule-w) solid var(--line); }
.metric { padding: 18px 0 20px; border-bottom: var(--rule-w) solid var(--line); display: grid; gap: 4px; }
.metric:nth-child(odd) { padding-right: 22px; }
.metric:nth-child(even) { padding-left: 22px; border-left: var(--rule-w) solid var(--line); }
.metric-value { font: 600 clamp(1.9rem, 3.4vw, 2.7rem)/1 var(--display-font); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric-label { font: 600 .86rem/1.3 var(--body-font); color: var(--ink); }
.metric-when { font: 500 10.5px/1.4 var(--ui-font); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.metric-note { font-size: .84rem; line-height: 1.5; color: var(--muted); }

/* decisions: the choice, the road not taken, the reason */
.decisions { list-style: none; margin: 0; padding: 0; counter-reset: d; }
.decisions li { counter-increment: d; padding: 18px 0; border-top: var(--rule-w) solid var(--line); }
.decisions h3 { font: 600 1.02rem/1.35 var(--body-font); letter-spacing: -.01em; margin: 0 0 10px; display: grid; grid-template-columns: 2.2ch 1fr; gap: 8px; }
.decisions h3::before { content: counter(d, decimal-leading-zero); font: 500 11px/1.6 var(--ui-font); color: var(--accent); }
.decisions p { margin: 0 0 6px; font-size: .95rem; display: grid; grid-template-columns: 3.6rem 1fr; gap: 8px; }
.decisions .tag { font: 500 9.5px/1.9 var(--ui-font); letter-spacing: var(--ui-tracking); text-transform: uppercase; color: var(--muted); }
.decided { color: var(--ink); }
.rejected { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 35%, transparent); }
.decisions .why { color: var(--body); grid-template-columns: 1fr; margin-top: 8px; }

/* receipts, timeline, quote, plate */
.receipts { list-style: none; margin: 0; padding: 0; border-top: var(--rule-w) solid var(--line); }
.receipts li { padding: 12px 0; border-bottom: var(--rule-w) solid var(--line); display: grid; gap: 3px; }
.receipts a { font-weight: 500; font-size: .94rem; justify-self: start; }
.receipts span { font-size: .84rem; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 9px 0; border-top: var(--rule-w) solid var(--line); font-size: .92rem; }
.timeline time { font: 500 11px/1.6 var(--ui-font); letter-spacing: .04em; color: var(--muted); }
.quote { margin: 0; padding: 22px 0 22px 22px; border-left: 3px solid var(--accent); }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--display-font); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.35; color: var(--ink); }
.quote figcaption { font-size: .84rem; color: var(--muted); }
.plate { margin: 0; padding: var(--section-pad) 0 0; }
.plate img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); border: var(--rule-w) solid var(--line); }
.plate figcaption { font-size: .82rem; color: var(--muted); margin-top: 8px; }

/* next */
.next { padding-top: var(--section-pad); }
.next-a { font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.3 var(--display-font); letter-spacing: -.015em; border: 0; border-bottom: 2px solid var(--accent); }
.next-n { color: var(--muted); margin-top: 8px; font-size: .9rem; }

/* foot */
.foot { border-top: var(--rule-w) solid var(--line); padding: 22px var(--sp) 40px; font-size: .78rem; color: var(--muted); max-width: 1320px; margin: 0 auto; }
.foot p { margin: 0 0 6px; }
.foot code { font-size: .76rem; }
.live:empty { display: none; }

/* the share card, rendered at 1200x630 */
.og { margin: 0; background: var(--paper); }
.og-card { width: 1200px; height: 630px; padding: 52px 72px 46px; display: flex; flex-direction: column; gap: 14px; background: var(--paper); border-top: 5px solid var(--accent); overflow: hidden; }
.og-bot { margin-top: auto; display: grid; gap: 14px; }
.og-k { font: 500 15px/1 var(--ui-font); letter-spacing: var(--ui-tracking); text-transform: uppercase; color: var(--muted); margin: 0; }
.og h1 { font-family: var(--display-font); font-weight: var(--display-weight); font-size: 40px; line-height: 1.08; letter-spacing: var(--display-ls); max-width: 30ch; max-height: 4.35em; margin: 0; overflow: hidden; }
.og-m { font: 400 20px/1.45 var(--body-font); color: var(--muted); max-width: 46ch; max-height: 2.9em; margin: 0; overflow: hidden; }
.og-n { display: flex; align-items: baseline; gap: 14px; border-top: var(--rule-w) solid var(--line); padding-top: 18px; }
.og-v { font: 600 42px/1 var(--display-font); letter-spacing: -.02em; color: var(--ink); }
.og-l { font: 13px/1.3 var(--ui-font); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.og-f { display: flex; justify-content: space-between; font: 12px/1 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* motion */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
  html.design-enter .hero h1, html.design-enter .hook { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ten layout families: each changes the structure, not the colour. Where the
   contents sit, how wide the prose runs, how the numbers are shown, how a
   section is framed. The palette arrives separately, from the catalogue. */

/* 1. editorial: a margin rail, a serif measure, rules between sections */
html[data-layout="editorial"] .body { max-width: 38rem; }
html[data-layout="editorial"] .kicker { text-transform: none; letter-spacing: 0; font-style: italic; font-size: 13px; }

/* 2. list: no rail, contents as a strip, numbers as ruled rows */
html[data-layout="list"] .grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="list"] .rail { position: static; border-bottom: var(--rule-w) solid var(--line); padding-bottom: 14px; margin-bottom: 8px; }
html[data-layout="list"] .toc ol { display: flex; flex-wrap: wrap; gap: 6px 16px; counter-reset: t; }
html[data-layout="list"] .toc li { counter-increment: t; }
html[data-layout="list"] .toc a { font: 500 11px/1.6 var(--ui-font); letter-spacing: .04em; text-transform: uppercase; }
html[data-layout="list"] .toc a::before { content: counter(t, decimal-leading-zero) " "; color: var(--accent); }
html[data-layout="list"] .body { max-width: 44rem; }
html[data-layout="list"] .metrics { grid-template-columns: 1fr; }
html[data-layout="list"] .metric { grid-template-columns: 7rem 1fr; column-gap: 18px; align-items: baseline; }
html[data-layout="list"] .metric:nth-child(odd) { padding-right: 0; }
html[data-layout="list"] .metric:nth-child(even) { padding-left: 0; border-left: 0; }
html[data-layout="list"] .metric-value { font-size: 1.75rem; grid-row: span 3; }
html[data-layout="list"] .body section h2 { font-family: var(--body-font); font-weight: 650; font-size: 1.05rem; letter-spacing: 0; }
html[data-layout="list"] section { border-top: var(--rule-w) solid var(--line); margin-top: 28px; padding-top: 22px; }

/* 3. swiss: a label column, no rail, a strip of numbers, hard rules */
html[data-layout="swiss"] .grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="swiss"] .rail { display: none; }
html[data-layout="swiss"] .body { max-width: 52rem; }
html[data-layout="swiss"] h1 { font-family: var(--body-font); font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; line-height: .9; max-width: 16ch; }
html[data-layout="swiss"] .hook { font-size: 1.15rem; max-width: 44ch; }
html[data-layout="swiss"] section, html[data-layout="swiss"] .numbers { display: grid; grid-template-columns: 9rem minmax(0, 34rem); gap: 0 28px; border-top: 2px solid var(--ink); padding-top: 16px; margin-top: 26px; }
html[data-layout="swiss"] section h2, html[data-layout="swiss"] .numbers h2 { grid-column: 1; font: 600 10.5px/1.5 var(--ui-font); letter-spacing: var(--ui-tracking); text-transform: uppercase; margin: 2px 0 0; }
html[data-layout="swiss"] section > p, html[data-layout="swiss"] section > ul, html[data-layout="swiss"] section > ol,
html[data-layout="swiss"] .numbers > * { grid-column: 2; }
html[data-layout="swiss"] .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
html[data-layout="swiss"] .metric { border-top: 2px solid var(--ink); border-bottom: 0; padding: 12px 14px 0 0; }
html[data-layout="swiss"] .metric:nth-child(odd) { padding-right: 14px; }
html[data-layout="swiss"] .metric:nth-child(even) { padding-left: 0; border-left: 0; }
html[data-layout="swiss"] .metric-value { font-family: var(--body-font); font-weight: 800; letter-spacing: -.04em; font-size: 2.1rem; }
html[data-layout="swiss"] .meta { border-top: 2px solid var(--ink); }

/* 4. centered: a narrow column, everything on the axis, numbers stacked */
html[data-layout="centered"] .grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="centered"] .rail { display: none; }
html[data-layout="centered"] .body { max-width: 33rem; margin: 0 auto; }
html[data-layout="centered"] .hero { text-align: center; }
html[data-layout="centered"] .hero h1, html[data-layout="centered"] .hook, html[data-layout="centered"] .lede, html[data-layout="centered"] .kicker { margin-left: auto; margin-right: auto; }
html[data-layout="centered"] .meta { justify-items: center; text-align: center; }
html[data-layout="centered"] .metrics { grid-template-columns: 1fr; border-top: 0; }
html[data-layout="centered"] .metric { text-align: center; border-bottom: 0; padding: 22px 0; }
html[data-layout="centered"] .metric:nth-child(odd), html[data-layout="centered"] .metric:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
html[data-layout="centered"] .metric-value { font-size: 3rem; }
html[data-layout="centered"] .metric-when { letter-spacing: .1em; }
html[data-layout="centered"] .body section h2 { text-align: center; }
html[data-layout="centered"] .decisions h3, html[data-layout="centered"] .decisions p { grid-template-columns: 1fr; text-align: left; }

/* 5. hud: a readout, rail on the right, dashed rules, bracketed sections */
html[data-layout="hud"] .grid { grid-template-columns: minmax(0, 1fr) 190px; }
html[data-layout="hud"] .rail { order: 2; border-left: var(--rule-w) solid var(--line); padding-left: 18px; }
html[data-layout="hud"] .body { order: 1; max-width: 44rem; }
html[data-layout="hud"] h1, html[data-layout="hud"] .body section h2, html[data-layout="hud"] .metric-value { font-family: var(--ui-font); font-weight: 600; letter-spacing: -.02em; }
html[data-layout="hud"] h1 { text-transform: uppercase; font-size: clamp(1.55rem, 3.2vw, 2.5rem); line-height: 1.05; }
html[data-layout="hud"] .body section h2 { font-size: .98rem; text-transform: uppercase; letter-spacing: .08em; }
html[data-layout="hud"] .body section h2::before { content: "[ "; color: var(--accent); }
html[data-layout="hud"] .body section h2::after { content: " ]"; color: var(--accent); }
html[data-layout="hud"] .body .numbers h2::before, html[data-layout="hud"] .body .numbers h2::after { content: ""; }
html[data-layout="hud"] .metrics { grid-template-columns: 1fr; border-top: 0; }
html[data-layout="hud"] .metric { grid-template-columns: 8rem 1fr auto; align-items: baseline; border-top: var(--rule-w) dashed var(--line); border-bottom: 0; padding: 10px 0; }
html[data-layout="hud"] .metric:nth-child(odd), html[data-layout="hud"] .metric:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
html[data-layout="hud"] .metric-value { font-size: 1.35rem; color: var(--accent); grid-row: span 3; }
html[data-layout="hud"] .metric-note { grid-column: 2 / -1; }
html[data-layout="hud"] .metric-when { grid-column: 3; text-align: right; }
html[data-layout="hud"] .kicker { color: var(--accent); }
html[data-layout="hud"] .toc a::before { content: "> "; color: var(--accent); }

/* 6. rowcards: every section a card, no rail, cards for the numbers */
html[data-layout="rowcards"] .grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="rowcards"] .rail { display: none; }
html[data-layout="rowcards"] .body { max-width: 46rem; }
html[data-layout="rowcards"] section, html[data-layout="rowcards"] .numbers {
  background: var(--card); border: var(--rule-w) solid var(--line); border-radius: var(--radius-card);
  padding: var(--card-pad); margin-top: 14px; box-shadow: var(--shadow-card);
}
html[data-layout="rowcards"] .metrics { grid-template-columns: 1fr 1fr; gap: 10px; border-top: 0; }
html[data-layout="rowcards"] .metric { border: var(--rule-w) solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; background: var(--paper); }
html[data-layout="rowcards"] .metric:nth-child(odd), html[data-layout="rowcards"] .metric:nth-child(even) { padding: 14px 16px; border-left: var(--rule-w) solid var(--line); }
html[data-layout="rowcards"] .hero { border: 0; }

/* 7. menu: contents as a menu, sections as courses, numbers as prices */
html[data-layout="menu"] .grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="menu"] .rail { position: static; border-top: var(--rule-w) solid var(--line); border-bottom: var(--rule-w) solid var(--line); padding: 14px 0; }
html[data-layout="menu"] .toc ol { grid-template-columns: 1fr 1fr; gap: 4px 28px; }
html[data-layout="menu"] .toc li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
html[data-layout="menu"] .toc li::after { content: ""; flex: 1; border-bottom: 1px dotted var(--line); order: 2; }
html[data-layout="menu"] .toc a { order: 1; font-family: var(--display-font); font-size: 1rem; color: var(--ink); }
html[data-layout="menu"] .body { max-width: 40rem; }
html[data-layout="menu"] .body section h2 { font-family: var(--display-font); font-size: 1.35rem; font-style: italic; text-align: center; }
html[data-layout="menu"] .metrics { grid-template-columns: 1fr; border-top: 0; }
html[data-layout="menu"] .metric { grid-template-columns: 1fr auto; border-bottom: 1px dotted var(--line); padding: 10px 0; }
html[data-layout="menu"] .metric:nth-child(odd), html[data-layout="menu"] .metric:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
html[data-layout="menu"] .metric-value { grid-column: 2; grid-row: 1; font-size: 1.3rem; }
html[data-layout="menu"] .metric-label { grid-column: 1; }
html[data-layout="menu"] .metric-when { grid-column: 1; }
html[data-layout="menu"] .metric-note { grid-column: 1; }

/* 8. poster: giant type, numbers as a headline band, sections numbered huge */
html[data-layout="poster"] .grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="poster"] .rail { display: none; }
html[data-layout="poster"] .body { max-width: 64rem; counter-reset: p; }
html[data-layout="poster"] .prose, html[data-layout="poster"] .next { max-width: 36rem; }
html[data-layout="poster"] h1 { font-family: var(--display-font); font-weight: 700; font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: .92; letter-spacing: -.045em; max-width: 14ch; }
html[data-layout="poster"] .hook { font-size: clamp(1.15rem, 2vw, 1.5rem); max-width: 30ch; }
html[data-layout="poster"] .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
html[data-layout="poster"] .metric { border: 0; padding: 20px 18px 20px 0; }
html[data-layout="poster"] .metric:nth-child(even) { padding-left: 18px; border-left: 3px solid var(--ink); }
html[data-layout="poster"] .metric-value { font-size: clamp(2.6rem, 6vw, 4rem); letter-spacing: -.05em; }
html[data-layout="poster"] .kicker { display: none; }
html[data-layout="poster"] section { counter-increment: p; }
html[data-layout="poster"] .body section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; }
html[data-layout="poster"] .body section h2::before { content: counter(p, decimal-leading-zero); display: block; font: 500 11px/1 var(--ui-font); color: var(--accent); margin-bottom: 10px; }
html[data-layout="poster"] .body .numbers h2::before { content: ""; }

/* 9. amp: bands. the hero sits on the accent, the numbers in a panel, sections ruled */
html[data-layout="amp"] .grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="amp"] .rail { display: none; }
html[data-layout="amp"] .body { max-width: 46rem; margin: 0 auto; }
html[data-layout="amp"] .hero { background: var(--accent); color: var(--on-accent); margin: 0 calc(var(--sp) * -1); padding: clamp(34px, 5vw, 64px) var(--sp); border: 0; }
html[data-layout="amp"] .hero h1, html[data-layout="amp"] .hero .hook, html[data-layout="amp"] .hero .lede, html[data-layout="amp"] .hero .kicker, html[data-layout="amp"] .hero .meta-item dd { color: var(--on-accent); }
html[data-layout="amp"] .hero .kicker, html[data-layout="amp"] .hero .lede, html[data-layout="amp"] .hero .meta-item dt { color: color-mix(in srgb, var(--on-accent) 72%, transparent); }
html[data-layout="amp"] .hero .meta { border-top-color: color-mix(in srgb, var(--on-accent) 30%, transparent); }
html[data-layout="amp"] h1 { font-family: var(--body-font); font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; max-width: 16ch; }
html[data-layout="amp"] .numbers { background: var(--card); border: var(--rule-w) solid var(--line); border-radius: var(--radius-card); padding: var(--card-pad); margin-top: calc(var(--section-pad) * .7); }
html[data-layout="amp"] .metric-value { color: var(--accent); }
html[data-layout="amp"] section { border-top: var(--rule-w) solid var(--line); margin-top: 30px; padding-top: 22px; }
html[data-layout="amp"] .body section h2 { font-family: var(--body-font); font-weight: 750; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .01em; }

/* 10. gallery: plates. contents as chips, numbers as tiles, sections as cards */
html[data-layout="gallery"] .grid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="gallery"] .rail { position: static; margin-bottom: 6px; }
html[data-layout="gallery"] .toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-layout="gallery"] .toc a { display: inline-block; border: var(--rule-w) solid var(--line); border-radius: 999px; padding: 5px 10px; font: 500 10.5px/1.4 var(--ui-font); letter-spacing: .05em; text-transform: uppercase; }
html[data-layout="gallery"] .toc a:hover { border-color: var(--accent); }
html[data-layout="gallery"] .body { max-width: 56rem; }
html[data-layout="gallery"] .metrics { grid-template-columns: 1fr 1fr; gap: 12px; border-top: 0; }
html[data-layout="gallery"] .metric { background: var(--card); border: var(--rule-w) solid var(--line); border-radius: var(--radius-card); padding: 18px; }
html[data-layout="gallery"] .metric:nth-child(odd), html[data-layout="gallery"] .metric:nth-child(even) { padding: 18px; border-left: var(--rule-w) solid var(--line); }
html[data-layout="gallery"] section { background: var(--card); border: var(--rule-w) solid var(--line); border-radius: var(--radius-card); padding: var(--card-pad); margin-top: 12px; }
html[data-layout="gallery"] .body section h2 { font-family: var(--display-font); font-size: 1.2rem; }

/* below 760 px every family collapses to one column */
@media (max-width: 760px) {
  .grid, html[data-layout="hud"] .grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rail, html[data-layout="hud"] .rail { position: static; order: 0; border: 0; padding: 0 0 10px; border-bottom: var(--rule-w) solid var(--line); }
  html[data-layout="hud"] .body { order: 0; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .metrics, html[data-layout="swiss"] .metrics, html[data-layout="poster"] .metrics, html[data-layout="gallery"] .metrics { grid-template-columns: 1fr; }
  .metric, html[data-layout="swiss"] .metric, html[data-layout="poster"] .metric { padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; }
  html[data-layout="swiss"] section, html[data-layout="swiss"] .numbers { grid-template-columns: minmax(0, 1fr); }
  html[data-layout="swiss"] section > p, html[data-layout="swiss"] section > ul, html[data-layout="swiss"] .numbers > * { grid-column: 1; }
  .dp-grid { grid-template-columns: 1fr 1fr; }
  .tool .long { display: none; }
  .tool .short { display: inline; }
  .bar-tools { margin-left: 0; }
  h1 { max-width: 100%; }
  .foot { padding-bottom: 28px; }
}

/* print: one page, no chrome, every link's destination shown */
@media print {
  /* !important, because a generated design writes its tokens inline on <html>
     and an inline declaration beats a plain :root rule. On paper the palette is
     the paper's. */
  :root, html[style] {
    --paper: #fff !important; --card: #fff !important; --ink: #111 !important;
    --body: #222 !important; --muted: #555 !important; --line: #d8d8d8 !important;
    --accent: #111 !important; --on-accent: #fff !important; --shadow-card: none !important;
  }
  .hero { display: block; }
  @page { margin: 16mm 15mm; }
  body { font-size: 10.5pt; line-height: 1.5; }
  .bar, .rail, .skip, .controls, .live, script, .design-panel { display: none !important; }
  .case { padding: 0; max-width: none; }
  .grid { display: block; padding-top: 0; }
  .body { max-width: none; }
  .hero { border-bottom: 1px solid #999; padding-bottom: 12pt; }
  h1 { font-size: 24pt; max-width: none; }
  .hook { font-size: 11pt; }
  h2 { font-size: 13pt; padding-top: 10pt; }
  section, .numbers { padding-top: 12pt; break-inside: avoid; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric-value { font-size: 18pt; }
  a { color: #111; border: 0; }
  .receipts a::after, .next-a::after, .foot a::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }
  .decisions li, .receipts li, .timeline li, .plate, .quote { break-inside: avoid; }
  .foot { border-top: 1px solid #ccc; padding-top: 8pt; }
}