/* Red Relic
   One stylesheet for every page. Hairlines, black, a little red. */

@view-transition { navigation: auto; }

:root {
  --ink: #060606;
  --ink-2: #0d0d0d;
  --ink-3: #141313;
  --paper: #e9e5df;
  --dim: #a8a29b;
  --faint: #6f6964;
  --hair: rgba(233, 229, 223, .13);
  --hair-2: rgba(233, 229, 223, .24);
  --red: #ff2b3a;
  --red-ink: #ff5560;
  --red-hair: rgba(255, 43, 58, .45);
  --red-wash: rgba(255, 43, 58, .07);
  --amber: #e8b04a;
  --ok: #a9c7a0;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --pad: clamp(16px, 4.2vw, 64px);
  --max: 1360px;
  --top: 68px;
  --pnav: 0px;
  --cut: 10px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + var(--pnav) + 24px); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--ink); color: var(--paper);
  font: 400 17px/1.62 var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--red); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; }
[hidden] { display: none !important; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; z-index: 100; left: var(--pad); top: -80px;
  padding: 10px 14px; background: var(--paper); color: var(--ink); font: 500 13px/1 var(--mono);
}
.skip:focus { top: 12px; }

/* ---------- background membrane ---------- */
.wall { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; view-transition-name: wall; }
.no-gl .wall { display: none; }
.no-gl body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 85% 50%, rgba(255, 43, 58, .14), transparent 70%);
}

/* drafting guides: two hairlines down the page edges */
.guides { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.guides::before, .guides::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair);
  left: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)) - 1px);
}
.guides::after { left: auto; right: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)) - 1px); }

.page { position: relative; z-index: 2; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- type ---------- */
.d1, .d2, .d3 { font-family: var(--display); font-weight: 300; line-height: .9; letter-spacing: -.005em; }
.d1 { font-size: clamp(3.4rem, 10.5vw, 10.5rem); }
.d2 { font-size: clamp(2.6rem, 6.4vw, 6rem); font-weight: 400; }
.d3 { font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: .96; font-weight: 400; }
.d1 strong, .d2 strong, .d3 strong { font-weight: 600; }
.d1, .d2 { text-transform: uppercase; letter-spacing: .004em; }
.h4 { font: 600 1.05rem/1.35 var(--text); letter-spacing: -.005em; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.34rem); line-height: 1.5; color: var(--paper); max-width: 36em; font-weight: 400; }
.body { color: var(--dim); max-width: 38em; line-height: 1.65; }
.body p + p { margin-top: 1em; }
.body strong { color: var(--paper); font-weight: 500; }
.list { list-style: none; margin: 1em 0; }
.list > li { position: relative; padding-left: 22px; }
.list > li + li { margin-top: .6em; }
.list > li::before { content: ""; position: absolute; left: 0; top: .82em; width: 10px; height: 1px; background: var(--red); }
.small { font-size: 14px; color: var(--dim); }
.mono { font-family: var(--mono); font-size: .86em; }
.label { font: 500 12px/1.3 var(--mono); color: var(--dim); letter-spacing: .02em; }
.red { color: var(--red-ink); }
.nowrap { white-space: nowrap; }
.link { color: var(--paper); text-decoration: underline; text-decoration-color: var(--red-hair); }
.link:hover { text-decoration-color: var(--red); }
.cite { font: 400 12.5px/1.4 var(--mono); color: var(--red-ink); white-space: nowrap; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--top);
  view-transition-name: top;
}
.top::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(6, 6, 6, .88); border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .25s ease;
}
.is-scrolled .top::after { opacity: 1; }
.top .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.logo svg { width: 34px; height: 34px; overflow: visible; }
.logo__word { font: 600 19px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.top__nav { display: flex; gap: 26px; }
.top__nav a, .kbar-btn {
  font-size: 14px; color: var(--dim); text-decoration: none; position: relative; padding: 6px 0;
  transition: color .15s ease;
}
.top__nav a:hover, .kbar-btn:hover { color: var(--paper); }
.top__nav a[aria-current="page"] { color: var(--paper); }
.top__nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--red);
}
.kbar-btn { background: none; border: 0; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
kbd {
  font: 500 11px/1 var(--mono); color: var(--dim); padding: 3px 5px 2px;
  border: 1px solid var(--hair-2); border-radius: 3px;
}
.top__cta {
  font-size: 14px; text-decoration: none; padding: 9px 14px;
  border: 1px solid var(--red-hair); color: var(--paper); --cb: var(--red-hair); --cut: 8px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.top__cta:hover { background-color: var(--red); border-color: var(--red); color: var(--ink); }
.top__hud { font: 500 11.5px/1 var(--mono); color: var(--faint); white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--hair); }
.top__hud b { color: var(--red-ink); font-weight: 500; }
.burger { display: none; background: none; border: 0; padding: 8px 0; cursor: pointer; font-size: 14px; color: var(--paper); }

.menu {
  position: fixed; inset: 0; z-index: 39; background: var(--ink);
  padding: calc(var(--top) + 32px) var(--pad) 40px; display: none; flex-direction: column; gap: 6px;
}
.menu.is-open { display: flex; }
.menu > a { font: 300 clamp(2.4rem, 11vw, 3.6rem)/1.05 var(--display); text-decoration: none; }
.menu > a[aria-current="page"] { color: var(--red-ink); }
.menu .small { margin-top: auto; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--paper);
  position: relative; display: inline-flex; align-items: center; gap: 18px;
  padding: 15px 22px 15px 20px; cursor: pointer; text-decoration: none;
  background-color: transparent; color: var(--paper); border: 1px solid var(--b);
  font: 500 15px/1 var(--text); letter-spacing: .01em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn, .top__cta, .mock, .panel, .app {
  /* cut corners: the box is clipped and a 1px diagonal closes each cut */
  --cb: var(--b, var(--hair-2));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background-image:
    linear-gradient(to top right, transparent calc(50% - .75px), var(--cb) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(to top right, transparent calc(50% - .75px), var(--cb) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px));
  background-size: var(--cut) var(--cut);
  background-position: top right, bottom left;
  background-repeat: no-repeat;
}
.btn:hover { background-color: var(--paper); color: var(--ink); }
.btn--red { --b: var(--red); }
.btn--red:hover { background-color: var(--red); color: var(--ink); }
.btn--quiet { --b: var(--hair-2); color: var(--dim); }
.btn--quiet:hover { background-color: transparent; border-color: var(--paper); --b: var(--paper); color: var(--paper); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; }

/* ---------- page skeleton ---------- */
.intro { padding: calc(var(--top) + clamp(56px, 12vh, 140px)) 0 clamp(48px, 9vh, 110px); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px clamp(24px, 4vw, 64px); align-items: end; }
.intro .crumb { margin-bottom: 28px; }
.intro .lede { margin-top: 36px; }
.intro__side { border-left: 1px solid var(--hair); padding-left: 20px; }

.crumb { display: flex; gap: 10px; align-items: center; font: 500 12px/1 var(--mono); color: var(--dim); }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--paper); }
.crumb span[aria-hidden] { color: var(--faint); }

.sec { padding: clamp(64px, 12vh, 140px) 0; position: relative; }
.sec + .sec { border-top: 1px solid var(--hair); }
.sec__head { max-width: 1000px; margin-bottom: clamp(40px, 7vh, 72px); }
.sec__head > .label { margin-bottom: 18px; color: var(--paper); }
.sec__head > .label::before, .split > div > .label:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 1px 1px; background: var(--red); transform: rotate(45deg); }
.sec__head .body, .sec__head > div > .body { font-size: 18px; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(24px, 4vw, 64px); }
.split--even { grid-template-columns: 1fr 1fr; }

/* crosshair where a section starts */
.sec::before {
  content: ""; position: absolute; top: -6px; left: max(calc(var(--pad) - 6px), calc((100vw - var(--max)) / 2 + var(--pad) - 6px));
  width: 11px; height: 11px;
  background: linear-gradient(var(--red), var(--red)) center / 1px 100% no-repeat, linear-gradient(var(--red), var(--red)) center / 100% 1px no-repeat;
}
.intro + .sec::before { display: none; }

/* ---------- home ---------- */
.home { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.home__main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--top) + 40px); padding-bottom: 40px; }
.home h1 { max-width: 9.5em; }
.home .lede { margin: 40px 0 44px; max-width: 30em; }
.home__foot { padding-bottom: 28px; }

.dimline { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; max-width: 820px; }
.dimline__end { font: 500 12px/1.45 var(--mono); color: var(--dim); }
.dimline__end b { display: block; color: var(--paper); font-weight: 500; }
.dimline__end:last-child { text-align: right; }
.dimline__bar { position: relative; height: 22px; }
.dimline__bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hair-2);
}
.dimline__bar::after {
  content: ""; position: absolute; inset: 0;
  border-inline: 1px solid var(--hair-2);
}
.dimline__val {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0 12px; background: var(--ink); font: 500 13px/1 var(--mono); color: var(--red-ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.home__meta { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 40px; }
.home__meta .small { max-width: 26em; }

/* three ways in, by what the visitor already knows */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--hair-2); max-width: 1100px; }
.doors a { display: grid; gap: 6px; padding: 18px 24px 20px 0; text-decoration: none; position: relative; }
.doors a + a { padding-left: 24px; border-left: 1px solid var(--hair); }
.doors span { font: 500 12px/1.4 var(--mono); color: var(--faint); }
.doors b { font: 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.15 var(--display); letter-spacing: .01em; color: var(--paper); }
.doors small { font-size: 14px; color: var(--dim); text-decoration: underline; text-decoration-color: var(--red-hair); text-underline-offset: .25em; }
.doors a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease; }
.doors a:hover::before, .doors a:focus-visible::before { transform: scaleX(1); }
.doors a:hover small { color: var(--paper); }

/* entry surge */
.is-leaving .page, .is-leaving .top { opacity: 0; transition: opacity .45s ease .05s; }

/* ---------- lists without cards ---------- */
.ledger { list-style: none; border-top: 1px solid var(--hair); }
.ledger > li { display: grid; grid-template-columns: 70px minmax(0, 4fr) minmax(0, 7fr); gap: 8px 28px; padding: 26px 0; border-bottom: 1px solid var(--hair); }
.ledger__k { font: 500 12px/1.9 var(--mono); color: var(--red-ink); }
.ledger h3 { font: 400 1.6rem/1.1 var(--display); letter-spacing: .01em; }
.ledger p { color: var(--dim); }
.ledger p + p { margin-top: .6em; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.facts > div { padding: 22px 22px 26px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.facts dt { font: 500 12px/1.4 var(--mono); color: var(--dim); }
.facts dd { margin-top: 18px; font: 300 clamp(2rem, 3.4vw, 2.9rem)/1 var(--display); }
.facts dd small { display: block; margin-top: 10px; font: 400 13px/1.45 var(--text); color: var(--dim); }

/* spec table */
.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--hair); }
.spec thead th { font: 500 12px/1.3 var(--mono); color: var(--dim); border-bottom-color: var(--hair-2); padding-top: 0; }
.spec td { color: var(--dim); }
.spec td:first-child, .spec th[scope="row"] { color: var(--paper); font-weight: 500; }
.spec .state { font: 500 12px/1.6 var(--mono); white-space: nowrap; }
.state--now { color: var(--red-ink); }
.state--next { color: var(--paper); }
.state--later { color: var(--faint); }
.table-scroll { overflow-x: auto; }
/* subsector rows inside a spec table */
.spec .grp th { padding: 40px 0 12px; font: 500 12px/1.3 var(--mono); color: var(--red-ink); border-bottom-color: var(--hair-2); }
.spec thead + tbody .grp th { padding-top: 8px; }
.spec td.src { font: 400 13px/1.5 var(--mono); color: var(--faint); }
.spec .state--now, .spec .state--next, .spec .state--later { font: 500 12px/1.6 var(--mono); }

/* note / callout */
.note { border-left: 1px solid var(--red); padding: 4px 0 4px 18px; color: var(--dim); font-size: 15px; max-width: 42em; }
.note strong { color: var(--paper); font-weight: 500; }

/* timeline */
.tl { position: relative; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--hair-2); }
.tl > li { position: relative; padding: 32px 18px 0 0; }
.tl > li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border: 1px solid var(--hair-2); background: var(--ink);
  transform: rotate(45deg) scale(.7);
}
.tl > li.is-past::before { background: var(--faint); border-color: var(--faint); }
.tl > li.is-next::before { border-color: var(--red); background: var(--red); }
.tl time { display: block; font: 500 13px/1.3 var(--mono); color: var(--paper); }
.tl > li.is-past time { color: var(--dim); }
.tl h3 { margin-top: 10px; font: 600 15px/1.35 var(--text); }
.tl p { margin-top: 6px; font-size: 14px; color: var(--dim); }
.tl .cite { display: inline-block; margin-top: 10px; }

/* glossary */
.gloss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.gloss > div { padding: 20px 0; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--top) + 30px); }
.gloss > div:target dt { color: var(--red-ink); }
.gloss dt { font: 500 17px/1.3 var(--text); }
.gloss dd { margin-top: 6px; color: var(--dim); font-size: 15px; }

/* index of things (tools, pages) */
.index { list-style: none; border-top: 1px solid var(--hair); counter-reset: idx; }
.index > li { border-bottom: 1px solid var(--hair); }
.index a {
  display: grid; grid-template-columns: 70px minmax(0, 5fr) minmax(0, 6fr) 40px; gap: 8px 28px; align-items: baseline;
  padding: 30px 0; text-decoration: none; position: relative;
}
.index a::before { counter-increment: idx; content: counter(idx, decimal-leading-zero); font: 500 12px/1 var(--mono); color: var(--red-ink); }
.index h3 { font: 300 clamp(2rem, 3.6vw, 3.2rem)/1 var(--display); transition: transform .25s ease; }
.index p { color: var(--dim); }
.index .go { justify-self: end; width: 26px; height: 1px; background: var(--paper); position: relative; transition: width .25s ease; align-self: center; }
.index a:hover h3 { transform: translateX(10px); }
.index a:hover .go { width: 40px; background: var(--red); }

/* ---------- product flow diagram ---------- */
.flow { width: 100%; height: auto; overflow: visible; }
.flow text { font-family: var(--mono); font-size: 12px; fill: var(--dim); }
.flow .t { font-family: var(--text); font-size: 17px; fill: var(--paper); font-weight: 500; }
.flow .ln { stroke: var(--hair-2); fill: none; }
.flow .rd { stroke: var(--red); fill: none; }
.flow .dot { fill: var(--red); }
.flow-scroll { overflow-x: auto; padding-bottom: 8px; }
.flow-scroll .flow { min-width: 860px; }

/* sample panel (mini product view) */
.panel { position: relative; border: 1px solid var(--hair-2); background-color: rgba(13, 13, 13, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); --cut: 14px; }
.panel__bar { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--hair); font: 500 12px/1 var(--mono); color: var(--dim); }
.panel__bar b { color: var(--paper); font-weight: 500; }
.panel__bar .r { margin-left: auto; }
.req { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 6px 18px; padding: 16px; border-bottom: 1px solid var(--hair); align-items: baseline; }
.req:last-child { border-bottom: 0; }
.req p { font-size: 15px; }
.req small { display: block; color: var(--dim); font-size: 13.5px; margin-top: 4px; }
.pill { font: 500 11.5px/1 var(--mono); padding: 5px 7px; border: 1px solid currentColor; justify-self: start; white-space: nowrap; }
.pill--gap { color: var(--red-ink); }
.pill--part { color: var(--amber); }
.pill--ok { color: var(--ok); }
.pill--info { color: var(--dim); }

/* ---------- forms & tools ---------- */
.field { display: grid; gap: 8px; }
.field > span, .field legend { font: 500 12px/1.3 var(--mono); color: var(--dim); }
.input, .select, .textarea {
  width: 100%; padding: 13px 0; background: transparent; border: 0; border-bottom: 1px solid var(--hair-2);
  font-size: 17px; border-radius: 0; appearance: none; -webkit-appearance: none;
}
.select { padding-right: 28px; background: linear-gradient(45deg, transparent 50%, var(--dim) 50%) right 10px center / 6px 6px no-repeat; }
.select option { background: var(--ink-2); }
.input::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-bottom-color: var(--red); }
.input[aria-invalid="true"] { border-bottom-color: var(--red); }
.input[type="number"] { font-variant-numeric: tabular-nums; }
.input[type="datetime-local"] { color-scheme: dark; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--dim); cursor: pointer; }
.check input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--red); }
.check a { color: var(--paper); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { min-height: 1.6em; font: 500 13px/1.5 var(--mono); }
.msg--ok { color: var(--ok); }
.msg--err { color: var(--red-ink); }

/* option rows */
.opts { border: 0; margin: 0; padding: 0; min-width: 0; }
.opts legend { padding: 0; margin-bottom: 14px; }
.opt { display: block; position: relative; cursor: pointer; border-top: 1px solid var(--hair); }
.opt:last-of-type { border-bottom: 1px solid var(--hair); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt > span { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; padding: 15px 12px 15px 4px; transition: background .12s ease; }
.opt > span::before {
  content: ""; width: 11px; height: 11px; margin-top: 6px; border: 1px solid var(--dim); border-radius: 50%;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.opt b { font-weight: 500; grid-column: 2; }
.opt small { grid-column: 2; color: var(--dim); font-size: 13.5px; line-height: 1.45; }
.opt:hover > span { background: var(--red-wash); }
.opt:hover > span::before { border-color: var(--red); }
.opt input:checked + span::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--red); }
.opt input:checked + span b { color: var(--paper); }
.opt input:focus-visible + span { outline: 1px solid var(--red); outline-offset: -1px; }
.opts--inline { display: flex; flex-wrap: wrap; gap: 0; }
.opts--inline legend { width: 100%; }
.opts--inline .opt { border: 1px solid var(--hair); margin: 0 -1px -1px 0; }
.opts--inline .opt > span { grid-template-columns: auto; padding: 10px 16px; }
.opts--inline .opt > span::before { display: none; }
.opts--inline .opt input:checked + span { background: var(--paper); color: var(--ink); }

/* stepper */
.stepper { display: flex; gap: 6px; margin-bottom: 28px; }
.stepper i { flex: 1; height: 1px; background: var(--hair-2); position: relative; }
.stepper i.is-done { background: var(--paper); }
.stepper i.is-now { background: var(--red); }
.step-count { font: 500 12px/1 var(--mono); color: var(--dim); margin-bottom: 14px; }

/* tool result */
.out { border-top: 1px solid var(--red); padding-top: 22px; }
.out h3 { font: 300 clamp(2rem, 4vw, 3.4rem)/1 var(--display); margin: 10px 0 18px; }
.out .body { max-width: 46em; }
.out ul { list-style: none; margin-top: 18px; border-top: 1px solid var(--hair); }
.out li { padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--dim); font-size: 15px; display: grid; grid-template-columns: 26px minmax(0, 1fr); }
.out li::before { content: "–"; color: var(--red-ink); }

.meter { position: relative; height: 1px; background: var(--hair-2); margin: 30px 0 12px; }
.meter i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--red); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.meter__scale { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: var(--faint); }

.big-num { font: 300 clamp(3.4rem, 9vw, 7.5rem)/.9 var(--display); font-variant-numeric: tabular-nums; }
.big-num small { font: 500 13px/1 var(--mono); color: var(--dim); margin-left: 10px; }

/* deadlines list (incident tool) */
.dl { list-style: none; border-top: 1px solid var(--hair); }
.dl li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.dl h3 { font: 600 15px/1.35 var(--text); }
.dl p { color: var(--dim); font-size: 14.5px; }
.dl time { font: 500 15px/1.4 var(--mono); color: var(--paper); }
.dl .left { display: block; font: 500 12px/1.4 var(--mono); color: var(--red-ink); margin-top: 4px; }
.dl .left.is-over { color: var(--faint); }

/* ---------- demo app ---------- */
.app { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 640px; border: 1px solid var(--hair-2); background-color: rgba(9, 9, 9, .92); --cut: 18px; }
.app__side { border-right: 1px solid var(--hair); padding: 16px 0; display: flex; flex-direction: column; }
.app__org { padding: 4px 18px 18px; border-bottom: 1px solid var(--hair); margin-bottom: 10px; }
.app__org b { display: block; font-weight: 500; font-size: 14.5px; }
.app__org span { font: 500 11.5px/1.4 var(--mono); color: var(--dim); }
.app__nav button {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 18px; background: none; border: 0; border-left: 1px solid transparent; cursor: pointer;
  color: var(--dim); font-size: 14.5px; text-align: left;
}
.app__nav button:hover { color: var(--paper); background: rgba(233, 229, 223, .03); }
.app__nav button[aria-selected="true"] { color: var(--paper); border-left-color: var(--red); background: rgba(233, 229, 223, .04); }
.app__nav em { font: 500 11px/1 var(--mono); font-style: normal; color: var(--faint); }
.app__foot { margin-top: auto; padding: 14px 18px 4px; font: 500 11px/1.5 var(--mono); color: var(--faint); border-top: 1px solid var(--hair); }
.app__main { padding: 26px clamp(18px, 3vw, 34px) 34px; min-width: 0; }
.app__title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.app__title h2 { font: 400 2rem/1 var(--display); letter-spacing: .01em; }
.areas { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.areas li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 140px 46px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.areas .k { font: 500 12px/1 var(--mono); color: var(--dim); }
.areas .bar { height: 1px; background: var(--hair-2); position: relative; }
.areas .bar i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--paper); }
.areas .bar i.lo { background: var(--red); }
.areas .pct { font: 500 12px/1 var(--mono); text-align: right; color: var(--dim); }
.app-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; }
.app-block h3 { font: 500 12px/1.3 var(--mono); color: var(--dim); margin-bottom: 12px; }
.tasks { list-style: none; border-top: 1px solid var(--hair); }
.tasks li { padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.tasks span { font: 500 11.5px/1.6 var(--mono); color: var(--dim); white-space: nowrap; }
.req-list { border-top: 1px solid var(--hair); }
.req-list > button {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; width: 100%;
  padding: 13px 8px 13px 0; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--paper); text-align: left; cursor: pointer; font-size: 14.5px;
}
.req-list > button:hover, .req-list > button[aria-expanded="true"] { background: rgba(233, 229, 223, .03); }
.req-list .cite { font-size: 11.5px; }
.req-detail { padding: 18px 0 22px 110px; border-bottom: 1px solid var(--hair); display: grid; gap: 16px; }
.req-detail blockquote { margin: 0; border-left: 1px solid var(--red); padding-left: 14px; color: var(--paper); font-size: 14.5px; }
.req-detail blockquote footer { margin-top: 6px; font: 500 11.5px/1.4 var(--mono); color: var(--dim); }
.req-detail .small { font-size: 13.5px; }
.doc { border: 1px solid var(--hair); padding: 22px 24px; min-height: 280px; font-size: 14.5px; color: var(--paper); background: rgba(6, 6, 6, .6); white-space: pre-wrap; font-family: var(--text); line-height: 1.65; }
.doc h4 { font: 600 15px/1.4 var(--text); }
.caret { display: inline-block; width: 7px; height: 1.1em; background: var(--red); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.doc-list { list-style: none; border-top: 1px solid var(--hair); margin-bottom: 22px; }
.doc-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; align-items: baseline; }
.doc-list span { font: 500 11.5px/1 var(--mono); color: var(--dim); }
.mini-btn { background: none; border: 1px solid var(--hair-2); padding: 6px 10px; font: 500 12px/1 var(--mono); cursor: pointer; color: var(--paper); }
.mini-btn:hover { border-color: var(--red); color: var(--red-ink); }
.ev { list-style: none; border-top: 1px solid var(--hair); }
.ev li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14px; align-items: baseline; }
.ev li::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--dim); transform: rotate(45deg) translateY(-1px); }
.ev li.ok::before { background: var(--ok); border-color: var(--ok); }
.ev span { font: 500 11.5px/1 var(--mono); color: var(--dim); }
.clock { font: 300 clamp(2.4rem, 5vw, 3.6rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.demo-note { margin-top: 18px; }

/* ---------- command palette ---------- */
.kbar { padding: 0; border: 1px solid var(--hair-2); background: var(--ink-2); color: var(--paper); width: min(640px, calc(100vw - 32px)); max-height: min(560px, 80vh); margin: 12vh auto auto; }
.kbar::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.kbar[open] { display: flex; flex-direction: column; }
.kbar input { width: 100%; padding: 20px 22px; border: 0; border-bottom: 1px solid var(--hair); background: transparent; font-size: 18px; }
.kbar input:focus { outline: none; }
.kbar ul { list-style: none; overflow-y: auto; padding: 8px 0; }
.kbar li a { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 10px 22px; text-decoration: none; font-size: 15px; }
.kbar li a span { font: 500 11.5px/1.9 var(--mono); color: var(--faint); }
.kbar li a small { display: block; color: var(--dim); font-size: 13px; }
.kbar li[aria-selected="true"] a { background: var(--red-wash); box-shadow: inset 1px 0 var(--red); }
.kbar__empty { padding: 18px 22px; color: var(--dim); font-size: 14px; }
.kbar__foot { display: flex; gap: 18px; padding: 10px 22px; border-top: 1px solid var(--hair); font: 500 11px/1 var(--mono); color: var(--faint); }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 2; border-top: 1px solid var(--hair); padding: 56px 0 36px; margin-top: 40px; background: linear-gradient(transparent, var(--ink) 30%); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 32px clamp(24px, 4vw, 64px); }
.foot__brand p { margin-top: 18px; color: var(--dim); font-size: 14px; max-width: 24em; }
.foot h2 { font: 500 12px/1.3 var(--mono); color: var(--faint); margin-bottom: 14px; }
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot a { text-decoration: none; color: var(--dim); font-size: 14.5px; }
.foot a:hover { color: var(--paper); }
.foot__base { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--hair); font: 500 12px/1.5 var(--mono); color: var(--faint); }

/* ---------- legal ---------- */
.prose { max-width: 44em; color: var(--dim); }
.prose h2 { font: 600 1.15rem/1.35 var(--text); color: var(--paper); margin: 48px 0 12px; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 12px; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--paper); }
.todo { background: rgba(232, 176, 74, .14); color: var(--amber); padding: 0 5px; }

/* ---------- reveal ---------- */
.js [data-in] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-in].is-in { opacity: 1; transform: none; }
.draw path, .draw line, .draw polyline { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.draw.is-in path, .draw.is-in line, .draw.is-in polyline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .2, 1); }

/* ---------- view transitions ---------- */
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0); } }

/* ---------- section modes ----------
   Neighbouring sections should not look alike. A page mixes plain sections with:
   plate (opaque raised surface), paper (light slab, used for the law itself) and red (the last call to action).
   Paper and red swap the colour tokens, so every component inside re-themes itself. */
.sec--plate { background: var(--ink-2); border-block: 1px solid var(--hair); }
.sec--plate + .sec { border-top: 0; }
.sec--paper {
  --ink: #e9e5df; --ink-2: #dcd7cf; --paper: #0b0b0b; --dim: #4b4743; --faint: #7a746e;
  --hair: rgba(11, 11, 11, .16); --hair-2: rgba(11, 11, 11, .32);
  --red-ink: #c8101e; --red-hair: rgba(200, 16, 30, .5); --red-wash: rgba(200, 16, 30, .07);
  background: #e9e5df; color: #0b0b0b; border-top: 0 !important;
}
.sec--paper ::selection { background: #0b0b0b; color: #e9e5df; }
.sec--red {
  --ink: #ff2b3a; --paper: #060606; --dim: rgba(6, 6, 6, .74); --faint: rgba(6, 6, 6, .55);
  --hair: rgba(6, 6, 6, .22); --hair-2: rgba(6, 6, 6, .4); --red: #060606; --red-ink: #060606; --red-hair: #060606;
  background: #ff2b3a; color: #060606; border-top: 0 !important;
}
.sec--red .btn:hover { background: #060606; color: #ff2b3a; }
.sec--red .btn--quiet { --b: rgba(6, 6, 6, .45); color: #060606; }
.sec--plate::before, .sec--paper::before, .sec--red::before, .sec--plate + .sec::before, .sec--paper + .sec::before, .sec--red + .sec::before { display: none; }

/* call to action at the end of a page */
.endcall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(24px, 4vw, 64px); align-items: end; }
.endcall .d2 { font-weight: 500; }
.endcall .lede { color: var(--paper); }

/* law quoted on a paper slab */
.law { font: 400 clamp(1.25rem, 2.1vw, 1.75rem)/1.45 var(--text); max-width: 34em; margin: 0; }
.law::before { content: "„"; }
.law::after { content: "”"; }
.law-src { display: block; margin-top: 18px; font: 500 13px/1.4 var(--mono); color: var(--red-ink); }

/* numbered articles, like paragraphs of an act (used on paper) */
.rules { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 80px); border-top: 1px solid var(--hair-2); }
.rules > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 16px; padding: 26px 0 30px; border-bottom: 1px solid var(--hair); }
.rules > li > span { font: 400 1.6rem/1 var(--display); color: var(--red-ink); grid-row: span 2; }
.rules h3 { font: 500 clamp(1.5rem, 2.4vw, 2.1rem)/1.1 var(--display); letter-spacing: .005em; }
.rules p { color: var(--dim); max-width: 32em; }

/* ---------- sticky page navigation ---------- */
.pnav {
  position: sticky; top: var(--top); z-index: 30;
  background: rgba(6, 6, 6, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--hair);
}
.pnav .wrap { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pnav .wrap::-webkit-scrollbar { display: none; }
.pnav a {
  flex: none; padding: 14px 14px 13px; font-size: 14px; color: var(--dim); text-decoration: none; white-space: nowrap;
  transition: color .15s ease, box-shadow .15s ease;
}
.pnav a:first-child { padding-left: 0; }
.pnav a:hover { color: var(--paper); }
.pnav a[aria-current="true"] { color: var(--paper); box-shadow: inset 0 -2px var(--red); }
.pnav a b { font: 500 11px/1 var(--mono); color: var(--faint); margin-right: 8px; }
.pnav a[aria-current="true"] b { color: var(--red-ink); }
.pnav__bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .55; }

/* ---------- module explorer (platform) ---------- */
.explorer { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(24px, 4vw, 56px); }
.explorer__tabs { position: relative; display: grid; align-content: start; border-top: 1px solid var(--hair); }
.explorer__tabs button {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; text-align: left; width: 100%;
  padding: 16px 12px 16px 0; background: none; border: 0; border-bottom: 1px solid var(--hair); cursor: pointer; color: var(--dim);
  transition: color .15s ease, background .15s ease;
}
.explorer__tabs button span { font: 500 12px/1.9 var(--mono); color: var(--faint); grid-row: span 2; }
.explorer__tabs button b { font: 400 1.5rem/1.15 var(--display); letter-spacing: .01em; color: var(--paper); }
.explorer__tabs button small { font-size: 14px; line-height: 1.45; }
.explorer__tabs button:hover { background: rgba(233, 229, 223, .03); }
.explorer__tabs button[aria-selected="true"] { box-shadow: inset 2px 0 var(--red); padding-left: 14px; background: rgba(233, 229, 223, .04); }
.explorer__tabs button[aria-selected="true"] span { color: var(--red-ink); }
.explorer__tabs button[aria-selected="true"] small { color: var(--paper); }
.explorer__panel { display: grid; gap: 22px; align-content: start; }
.explorer__panel h3 { font: 400 clamp(2rem, 3.4vw, 3rem)/1 var(--display); }
.explorer__panel .body { font-size: 17px; }
html:not(.js) .explorer__tabs { display: none; }
html:not(.js) .explorer { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .explorer__panel[hidden] { display: grid !important; margin-bottom: 64px; }

/* mini mocks inside panels */
.mock { position: relative; border: 1px solid var(--hair-2); background-color: rgba(13, 13, 13, .9); font-size: 14.5px; --cut: 14px; }
/* registration marks on the two corners that are not cut */
.mock::before, .mock::after, .panel::before, .panel::after, .app::before, .app::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; border: 0 solid var(--red); z-index: 1;
}
.mock::before, .panel::before, .app::before { left: -1px; top: -1px; border-left-width: 1px; border-top-width: 1px; }
.mock::after, .panel::after, .app::after { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
.mock__bar { display: flex; gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--hair); font: 500 12px/1 var(--mono); color: var(--dim); }
.mock__bar b { color: var(--paper); font-weight: 500; }
.mock__bar .r { margin-left: auto; }
.mock__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 13px 16px; border-bottom: 1px solid var(--hair); align-items: baseline; }
.mock__row:last-child { border-bottom: 0; }
.mock__row small { display: block; color: var(--dim); font-size: 13px; margin-top: 2px; }
.mock__big { padding: 22px 16px; border-bottom: 1px solid var(--hair); }
.mock__big strong { display: block; font: 400 clamp(2.2rem, 4vw, 3.2rem)/1 var(--display); }
.mock__big span { font: 500 12px/1.5 var(--mono); color: var(--dim); }
.mock .cite { font-size: 11.5px; }
.stamp { font: 500 11.5px/1 var(--mono); padding: 5px 7px; border: 1px solid var(--ok); color: var(--ok); white-space: nowrap; }
.diff-del { color: var(--faint); text-decoration: line-through; }
.diff-add { color: var(--paper); box-shadow: inset 2px 0 var(--red); padding-left: 8px; }

/* ---------- measures matrix (art. 8 lit. a-n) ---------- */
.matrix { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.matrix > li { position: relative; padding: 16px 16px 22px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); min-height: 210px; }
.matrix__k { font: 300 2.6rem/1 var(--display); color: var(--red-ink); }
.matrix h3 { margin-top: 14px; font: 600 15px/1.3 var(--text); }
.matrix p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.matrix .pl { position: absolute; top: 16px; right: 14px; font: 500 10.5px/1 var(--mono); color: var(--faint); border: 1px solid var(--hair-2); padding: 4px 5px; }
.matrix > li:hover { background: var(--red-wash); }

/* key fact at the side of an intro */
.keyfact { border-left: 1px solid var(--red); padding-left: 20px; }
.keyfact strong { display: block; font: 400 clamp(2.6rem, 4.6vw, 4rem)/.95 var(--display); color: var(--paper); }
.keyfact span { display: block; margin-top: 12px; color: var(--dim); font-size: 14.5px; max-width: 22em; }

/* tool index: a sample of what each tool returns */
.index a { grid-template-columns: 70px minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }
.index__peek { justify-self: end; text-align: right; font: 300 clamp(1.8rem, 3vw, 2.8rem)/1 var(--display); color: var(--faint); transition: color .25s ease; }
.index__peek small { display: block; margin-top: 8px; font: 500 11.5px/1.3 var(--mono); }
.index a:hover .index__peek { color: var(--red-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__side { border-right: 0; border-bottom: 1px solid var(--hair); padding-bottom: 0; }
  .app__nav { display: flex; overflow-x: auto; }
  .app__nav button { border-left: 0; border-bottom: 1px solid transparent; white-space: nowrap; width: auto; }
  .app__nav button[aria-selected="true"] { border-bottom-color: var(--red); }
  .app__foot { display: none; }
}

@media (max-width: 900px) {
  :root { --top: 60px; }
  .top__nav, .kbar-btn, .top__cta, .top__hud { display: none; }
  .burger { display: block; }
  .intro__grid, .sec__head, .split, .split--even { grid-template-columns: 1fr; }
  .intro__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 18px; }
  .ledger > li { grid-template-columns: 48px minmax(0, 1fr); }
  .ledger > li > :nth-child(n + 3) { grid-column: 2; }
  .index a { grid-template-columns: 44px minmax(0, 1fr); }
  .index a p { grid-column: 2; }
  .index .go { display: none; }
  .tl { grid-template-columns: 1fr; }
  .tl::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .tl > li { padding: 0 0 30px 40px; }
  .gloss { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; margin-top: 36px; }
  .doors a, .doors a + a { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--hair); }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer__tabs { display: flex; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--hair); margin-bottom: 28px; scrollbar-width: none; }
  .explorer__tabs button { display: block; width: auto; flex: none; padding: 12px 14px; }
  .explorer__tabs button[aria-selected="true"] { box-shadow: inset 0 -2px var(--red); padding-left: 14px; background: none; }
  .explorer__tabs button span, .explorer__tabs button small { display: none; }
  .explorer__tabs button b { font-size: 1.2rem; }
  .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix > li { min-height: 0; }
  .rules { grid-template-columns: 1fr; }
  .rules > li { grid-template-columns: 48px minmax(0, 1fr); }
  .endcall { grid-template-columns: 1fr; }
  .index a { grid-template-columns: 44px minmax(0, 1fr); }
  .index__peek { grid-column: 2; justify-self: start; text-align: left; font-size: 1.6rem; }
  .app-grid { grid-template-columns: minmax(0, 1fr); }
  .dl li { grid-template-columns: 1fr; }
  .req-detail { padding-left: 0; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .guides { display: none; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .dimline { grid-template-columns: 1fr; gap: 10px; }
  .dimline__end:last-child { text-align: left; }
  .dimline__bar { order: -1; }
  .home__meta { flex-direction: column; align-items: flex-start; }

  .req { grid-template-columns: 1fr; }
  .areas li { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  .areas .bar { grid-column: 2 / -1; grid-row: 2; }
  .req-list > button { grid-template-columns: 1fr; gap: 6px; }
  .spec { font-size: 14px; }
  .spec--stack thead { display: none; }
  .spec--stack tr, .spec--stack td, .spec--stack th { display: block; }
  .spec--stack tr:not(.grp) { padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .spec--stack td, .spec--stack th[scope="row"] { padding: 0; border: 0; }
  .spec--stack td + td { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js [data-in] { opacity: 1; transform: none; transition: none; }
  .draw path, .draw line, .draw polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
  .caret { animation: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* ---------- print (tool reports) ---------- */
@media print {
  :root { --paper: #111; --dim: #444; --faint: #777; --hair: #ccc; --hair-2: #999; --red: #c00; --red-ink: #c00; --ink: #fff; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .wall, .guides, .top, .menu, .foot, .no-print, .kbar, .skip { display: none !important; }
  .intro { padding-top: 0; }
  .sec { padding: 24px 0; }
  .js [data-in] { opacity: 1; transform: none; }
  a { text-decoration: none; }
}

/* numbered steps in a narrow column */
.steps-list { list-style: none; counter-reset: st; margin-top: 18px; border-top: 1px solid var(--hair); }
.steps-list li { counter-increment: st; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--hair); color: var(--dim); font-size: 15px; }
.steps-list li::before { content: counter(st); font: 500 12px/1.9 var(--mono); color: var(--red-ink); }
.steps-list b { color: var(--paper); font-weight: 500; }
.split > .panel { align-self: start; }
.opts--inline .opt input:checked + span b { color: var(--ink); }