/* Self hosted fonts (OFL) */
@font-face { font-family: "Geist"; src: url("fonts/geist-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* =========================================================
   Same page system as the Kalcend case study:
   light editorial, one centred column, mono labels,
   a chapter list that tracks where you are, framed visuals.
   ========================================================= */
:root {
  --bg: #fafafa;
  --card: #ffffff;
  --card-2: #f4f4f5;
  --frame: #f0f0f1;
  --line: #e4e4e7;
  --line-2: #e4e4e7;
  --ink: #0a0a0a;
  --body: #3f3f46;
  --muted: #52525b;
  --faint: #71717a;
  --accent: #2563eb;
  --accent-bg: rgba(37, 99, 235, .07);
  --accent-line: rgba(37, 99, 235, .25);
  --strong-line: #d4d4d8;
  --hover-line: #a1a1aa;

  --font: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --r-sm: 8px;
  --r-md: 12px;

  --col: 768px;
  --measure: 640px;
  --gut: 24px;
  --nav: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 32px); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(37, 99, 235, .15); color: var(--ink); }
a { color: var(--ink); text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }

.wrap { padding: 0 var(--gut); }
main > .hero, main > section, footer .col { max-width: var(--col); margin-left: auto; margin-right: auto; }

/* ---------- Top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav);
  display: flex; justify-content: space-between; align-items: center;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 0 max(var(--gut), calc(50vw - 480px));
  background: rgba(250, 250, 250, .9);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 500;
}
.top a { color: var(--ink); }
.top span { color: var(--muted); }
.top a:hover { color: var(--muted); }

/* ---------- Labels ---------- */
.eyebrow, .facts dt, .toc li a, .toc-pill, .label, .num-k {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.eyebrow { color: var(--muted); margin: 0 0 12px; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { color: var(--ink); font-weight: 500; }
h2 { font-size: 26px; line-height: 1.3; letter-spacing: -0.016em; margin: 0 0 20px; max-width: var(--measure); }
h3 { font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; margin: 48px 0 8px; max-width: var(--measure); }
h4 { font-size: 15.5px; line-height: 1.4; margin: 0 0 4px; }
p { margin: 0 0 18px; max-width: var(--measure); }
b { color: var(--ink); font-weight: 500; }
.muted { color: var(--muted); }
.lead { font-size: 18px; line-height: 1.6; color: var(--body); }
.prose { max-width: var(--measure); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 0; }
.hero h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 20px; }
.subtitle { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; }
.hero .lead { font-size: 17px; line-height: 1.7; color: var(--body); margin: 0 0 32px; }

.guide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 40px; font-size: 14px; }
.guide span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }
.guide a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--body); transition: border-color .2s ease, color .2s ease; }
.guide a:hover { border-color: var(--hover-line); color: var(--ink); }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; border-top: 1px solid var(--line); padding-top: 24px; margin: 40px 0 0; }
.facts dt { color: var(--faint); }
.facts dd { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.facts .key { grid-column: span 2; }

/* Numbers */
.nums { display: grid; grid-template-columns: repeat(2, 1fr); margin: 40px 0; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.num { padding: 28px; border-bottom: 1px solid var(--line); }
.num:nth-child(odd) { border-right: 1px solid var(--line); }
.num:nth-last-child(-n+2) { border-bottom: 0; }
.num strong { display: block; font-weight: 500; font-size: clamp(34px, 4vw, 44px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.num span { display: block; font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.45; }
.num.hl strong { color: var(--accent); }

/* Demo video, ready for when it is added */
.video { display: block; width: 100%; margin: 40px 0 0; aspect-ratio: 16 / 9; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--frame); object-fit: cover; }

/* ---------- Sections ---------- */
section { padding: 96px 0 0; position: relative; }
section > .eyebrow:first-child { margin-top: 0; }

/* ---------- Figures: framed, as in the reference ---------- */
figure { margin: 40px 0; }
figure.frame > .frame-in { background: var(--frame); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: clamp(10px, 2.5vw, 24px); }
figure.frame > .frame-in > img { width: 100%; }
figcaption { font-size: 13px; color: var(--muted); margin: 12px 0 0; max-width: var(--measure); line-height: 1.55; }
figcaption b { color: var(--ink); }
/* Square corners on every visual, so nothing near an edge gets clipped */
main img { border-radius: 0 !important; }

/* Two clips side by side */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; }
.pair > figure { margin: 0; display: flex; flex-direction: column; }
.pair .clip-box { background: var(--frame); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: clamp(10px, 2.5vw, 20px); display: flex; justify-content: center; }
.clip { width: auto; max-width: 100%; height: 420px; object-fit: contain; }
.cap3 { margin-top: 16px; font-size: 13.5px; }
.cap3 b { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.cap3 dl { display: grid; grid-template-columns: 52px 1fr; gap: 6px 12px; margin: 0; }
.cap3 dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.cap3 dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* Contact sheet trio */
.cs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 560px; }
.cs div { display: flex; flex-direction: column; gap: 10px; }
.cs img { width: 100%; }
.cs span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Problem grid ---------- */
.gap { margin: 32px 0; display: grid; grid-template-columns: 128px repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.gap > div { padding: 16px 14px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.gap > div:nth-child(5n+1) { border-left: 0; }
.gap > div:nth-last-child(-n+5) { border-bottom: 0; }
.gap .step { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.gap .step small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.45; margin-top: 6px; }
.gap .row { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.gap .alone { color: var(--muted); }
.gap .alone::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hover-line); margin-right: 8px; vertical-align: middle; }
.gap .with { color: var(--ink); background: var(--card-2); }
.gap .with span { color: var(--ink); }
.gap .with::before { content: ""; display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--accent); margin-bottom: 10px; }

/* ---------- Mini cards ---------- */
.mini { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 0; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.mini > div { padding: 20px; border-left: 1px solid var(--line); }
.mini > div:first-child { border-left: 0; }
.mini .k { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.mini p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.mini.steps > div:last-child .k { color: var(--accent); }

/* ---------- Rules (Meera's behaviour) ---------- */
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 40px 0 0; }
.rule { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.rule:last-child:nth-child(odd) { grid-column: span 2; }
.rule .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rule .q { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.rule p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { border: 1px solid var(--strong-line); border-radius: 99px; padding: 3px 12px; font-size: 13px; color: var(--ink); background: var(--card-2); }

/* ---------- "How it was made" note ---------- */
.made { margin: 32px 0 0; max-width: var(--measure); padding: 16px 20px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.made b { color: var(--ink); }

/* ---------- Points ---------- */
.points { margin: 48px 0 0; display: grid; gap: 32px; max-width: var(--measure); }
.points h3 { margin: 0 0 8px; }
.points p { margin: 0; }

/* ---------- Under the hood ---------- */
details.uth { margin: 32px 0 0; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); }
details.uth summary { cursor: pointer; list-style: none; padding: 16px 20px; font-size: 15px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 12px; }
details.uth summary::-webkit-details-marker { display: none; }
details.uth summary span { white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-right: 12px; border-right: 1px solid var(--line); }
details.uth summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 18px; font-weight: 400; color: var(--muted); transition: transform .2s ease; }
details.uth[open] summary::after { content: "−"; }
details.uth[open] summary { border-bottom: 1px solid var(--line); }
details.uth > :not(summary) { margin-left: 20px; margin-right: 20px; }
details.uth > :nth-child(2) { margin-top: 20px; }
details.uth > :last-child { margin-bottom: 20px; }
details.uth p { font-size: 15px; color: var(--body); }
details.uth > img { width: calc(100% - 40px); }

ul.clean { list-style: none; padding: 0; margin: 20px 0 0; max-width: var(--measure); }
ul.clean li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--body); }
ul.clean li:last-child { border-bottom: 1px solid var(--line); }
details.uth ul.clean { margin-top: 20px; max-width: none; }
details.uth ul.clean li:first-child { border-top: 0; padding-top: 0; }
details.uth ul.clean li:last-child { border-bottom: 0; padding-bottom: 0; }

pre.term { background: var(--card-2); border: 1px solid var(--line); color: var(--body); border-radius: var(--r-sm); padding: 14px 16px; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 16px 10px 0; border-bottom: 1px solid var(--line); }
td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
td:first-child { color: var(--ink); width: 30%; }
tbody tr:last-child td { border-bottom: 0; }
details.uth table { width: calc(100% - 40px); }
table.rub td:first-child { width: 16%; }

/* ---------- Trust blocks ---------- */
.tb { margin: 72px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.tb-head { max-width: var(--measure); margin-bottom: 24px; }
.tb-head .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.tb-head h3 { margin: 0 0 8px; }
.tb-head p { margin: 0; color: var(--body); }

.fails { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); padding: 4px 20px; }
.f { display: grid; grid-template-columns: 1fr 24px 1.3fr; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.f:first-child { border-top: 0; }
.f .if { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.f .ar { color: var(--faint); text-align: center; }
.f .out { font-size: 14px; line-height: 1.5; color: var(--muted); }
.f .out b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.f .ui { display: inline-block; font-size: 13px; background: var(--card-2); border: 1px solid var(--strong-line); border-radius: var(--r-sm); padding: 4px 10px; color: var(--ink); }

.tl { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
.seg { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.seg .when { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.seg b { font-size: 17px; line-height: 1.25; }
.seg ul { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--muted); display: grid; gap: 4px; }
.seg ul li { position: relative; padding-left: 14px; }
.seg ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--muted); }
.seg .cost { margin-top: auto; align-self: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.seg.on { background: var(--card-2); border-color: var(--strong-line); }
.seg.on .cost { color: var(--ink); border-color: var(--strong-line); background: var(--card); }
.clock { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 2px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.clock i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--ink); display: inline-block; min-width: 86px; }

.rm { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 4px 20px; }
.rm-r { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; align-items: center; color: var(--muted); }
.rm-r:last-child { border-bottom: 0; }
.rm-r > span:first-child { color: var(--ink); }
.rm-h { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rm-h > span { color: var(--faint) !important; }
.rm .y, .rm .n { display: inline-flex; align-items: center; gap: 8px; }
.rm .y::before, .rm .n::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.rm .y::before { background: var(--accent); }
.rm .n::before { border: 1.2px solid var(--hover-line); }

.bridge { margin: 72px 0 0; max-width: var(--measure); font-size: 21px; line-height: 1.5; letter-spacing: -0.012em; color: var(--ink); }

h3.sub { font-size: 22px; line-height: 1.3; letter-spacing: -0.016em; margin: 72px 0 0; }

/* ---------- Overrules and bugs ---------- */
.ovr2 { margin-bottom: 8px; }
.o { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.o:first-child { border-top: 0; padding-top: 4px; }
.ov { display: flex; gap: 8px; height: 150px; }
.ov img { flex: 1; min-width: 0; height: 100%; object-fit: cover; }
.ov-q { flex-direction: column; justify-content: center; gap: 8px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; }
.ov-q .qc { margin: 0; background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 8px 10px; font-size: 13px; line-height: 1.35; }
.ov-q .qc.dim { color: #71717a; }
.ov small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ov-q mark { background: rgba(37, 99, 235, .15); color: var(--ink); border-radius: 4px; padding: 0 4px; }
.ov-strips { flex-direction: column; justify-content: center; gap: 6px; height: auto; }
.ov-strips img { flex: none; height: auto; width: 100%; }
.ov-gif { height: auto; }
.ov-gif img { height: auto; width: 100%; }
.ot h4 { font-size: 15.5px; margin: 0 0 10px; }
.ot p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--muted); display: grid; grid-template-columns: 72px 1fr; gap: 10px; }
.ot p span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-top: 3px; white-space: nowrap; }

/* ---------- Pull quote ---------- */
.pull { margin: 32px 0 0; padding: 0; border: 0; max-width: var(--measure); }
.pull .pq { color: var(--ink); font-size: 21px; line-height: 1.5; letter-spacing: -0.012em; margin: 0 0 12px; }
.pull p:last-child { margin: 0; }

/* ---------- Footer ---------- */
footer { margin-top: 96px; padding: 28px 0 56px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

/* ---------- Chapter list (desktop) and section pill (phone) ---------- */
.toc { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 15; display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.toc li a { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 10.5px; transition: color .2s ease; }
.toc li a::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .2s ease, background .2s ease; }
.toc li a:hover { color: var(--body); }
.toc li a[aria-current="true"] { color: var(--ink); }
.toc li a[aria-current="true"]::before { width: 24px; background: var(--accent); }

.toc-pill { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 15; display: none; align-items: center; justify-content: space-between; gap: 24px; min-width: 260px; max-width: calc(100vw - 40px); padding: 12px 20px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px -8px rgba(0,0,0,.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; }
.toc-pill-n { color: var(--muted); }
.toc-pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc.open { display: block; left: 20px; right: 20px; top: auto; bottom: 76px; transform: none; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 32px -12px rgba(0,0,0,.18); }
.toc.open li a { font-size: 12px; padding: 4px 0; }

@media (min-width: 1300px) { .toc { display: block; } }
@media (max-width: 1299px) { .toc-pill { display: inline-flex; } body { padding-bottom: 80px; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .gap { grid-template-columns: 1fr 1fr; }
  .gap > div { border-left: 0; border-bottom: 0; }
  .gap .rowlabel { display: none; }
  .gap .step { grid-column: 1 / -1; padding-top: 20px; padding-bottom: 4px; border-top: 1px solid var(--line); }
  .gap .step:nth-child(2) { border-top: 0; }
  .gap .with { background: transparent; border-left: 1px solid var(--line); }
  .gap > div:nth-child(2) { order: 3; } .gap > div:nth-child(7) { order: 4; } .gap > div:nth-child(12) { order: 5; }
  .gap > div:nth-child(3) { order: 6; } .gap > div:nth-child(8) { order: 7; } .gap > div:nth-child(13) { order: 8; }
  .gap > div:nth-child(4) { order: 9; } .gap > div:nth-child(9) { order: 10; } .gap > div:nth-child(14) { order: 11; }
  .gap > div:nth-child(5) { order: 12; } .gap > div:nth-child(10) { order: 13; } .gap > div:nth-child(15) { order: 14; }
  .tl { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .rule:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 700px) {
  .mini { grid-template-columns: 1fr; }
  .mini > div { border-left: 0; border-top: 1px solid var(--line); }
  .mini > div:first-child { border-top: 0; }
  .pair { grid-template-columns: 1fr; gap: 40px; }
  .clip { height: auto; width: 100%; max-width: 320px; }
  .o { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  :root { --gut: 20px; --nav: 56px; }
  section { padding-top: 72px; }
  .hero { padding: 48px 0 0; }
  .subtitle { font-size: 17px; }
  h2 { font-size: 23px; }
  .facts .key { grid-column: span 2; }
  .nums { grid-template-columns: 1fr; }
  .num { padding: 22px; }
  .num:nth-child(odd) { border-right: 0; }
  .num:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  figure.frame > .frame-in { padding: 8px; }
  .f { grid-template-columns: 1fr; gap: 6px; }
  .f .ar { display: none; }
  .rm-r { font-size: 13.5px; grid-template-columns: 1.2fr 1fr 1fr; }
  details.uth summary { flex-wrap: wrap; row-gap: 6px; }
  .cs { gap: 8px; }
  .bridge, .pull .pq { font-size: 19px; }
  table.rub { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ---------- Refactor, 13 Nov ---------- */
.hero .lead { margin-bottom: 16px; }
.meta { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.meta.links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 32px; }
.meta.links a { color: var(--accent); }
.meta.links a::after { content: " ↗"; }
.meta.links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-clip { margin: 0 0 40px; }
.hero-clip .clip-box { background: var(--frame); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: clamp(10px, 2.5vw, 20px); display: flex; justify-content: center; }
.pair.one { grid-template-columns: minmax(0, 424px); }
ul.rules-list { margin-top: 40px; }
ol.order { margin: 12px 0 0; padding-left: 22px; }
ol.order li { margin: 0 0 10px; padding-left: 4px; }
ol.order li::marker { color: var(--faint); font-family: var(--mono); font-size: 13px; }
.numk { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 40px 0 12px; }
.numk + .nums { margin-top: 0; }
.ovr2.open { margin-top: 8px; }
.ovr2.open > .o:first-child { border-top: 0; }
/* Failure states as plain rows, no card */
.fails { border: 0; border-radius: 0; background: none; padding: 0; }
.f { grid-template-columns: 1fr 1.3fr; }
.f:first-child { border-top: 1px solid var(--line); }
.f:last-child { border-bottom: 1px solid var(--line); }
.f .ar { display: none; }
@media (max-width: 640px) {
  .hero-clip .clip { height: auto; width: 100%; max-width: 280px; }
  .f { grid-template-columns: 1fr; }
}
pre.term.term-open { margin: 24px 0 0; }
details.uth > img + img { margin-top: 16px; }
.tb details.uth { margin-top: 0; }
details.uth .tl, details.uth .rm { margin-left: 20px; margin-right: 20px; }
details.uth .rm { border: 0; padding: 0; background: none; }
details.uth > .prose p { font-size: 15px; }
.hero .facts { margin: 0 0 40px; }
.hero .lead { margin-bottom: 32px; }
.facts dd.links { display: flex; flex-direction: column; gap: 4px; }
.facts dd.links a { color: var(--accent); }
.facts dd.links a::after { content: " ↗"; }
.facts dd.links a:hover { text-decoration: underline; text-underline-offset: 3px; }