/* ==========================================================================
   SIFT — Subspace Control · project page
   --------------------------------------------------------------------------
   Design system
   Palette is semantic, not decorative: the two accents stand for the two
   objectives the paper balances (indigo = primary objective f, teal =
   constraint objective g) and crimson marks their interference.
   Type: Spectral (display) + IBM Plex Sans (body) + IBM Plex Mono (data).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* surfaces */
  --ink:          #0b0e1a;
  --ink-2:        #131829;
  --ink-3:        #1e2438;
  --paper:        #fcfcfd;
  --paper-alt:    #f3f4f9;
  --card:         #ffffff;

  /* lines + text */
  --line:         #e4e6f0;
  --line-strong:  #cfd3e4;
  --text:         #11131f;   /* headings, body copy          */
  --text-2:       #242938;   /* ledes, secondary prose       */
  --muted:        #3f465a;   /* captions, labels, table text */
  --muted-ink:    #b3bad4;   /* the same role on dark        */

  /* semantic accents */
  --f:            #3b41d4;   /* primary objective  f */
  --f-tint:       #eeeefb;
  --g:            #0e8c86;   /* constraint objective g */
  --g-tint:       #e5f4f2;
  --conflict:     #ce2a4e;   /* negative alignment τ < 0 */
  --conflict-tint:#fceaee;
  --good:         #0f7146;

  /* typefaces */
  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- TYPE SCALE -------------------------------------------------------
     Every font size on the page reads from one of these. Change a value
     here and it updates everywhere that role is used — no need to hunt
     through the file. Sizes in rem are relative to --fs-body.            */
  --fs-body:     18px;                          /* base: body copy         */
  --fs-prose:    1.08rem;                       /* paragraphs in .prose    */
  --fs-lede:     clamp(1.12rem, 1.5vw, 1.3rem);  /* section intro sentences */
  --fs-eyebrow:  .82rem;                        /* AT A GLANCE, ABSTRACT…  */
  --fs-caption:  1rem;                          /* figure + table captions */
  --fs-small:    1rem;                          /* notes, cards, footer    */
  --fs-table:    .96rem;                        /* numbers in tables       */
  --fs-label:    .78rem;                        /* tiny mono labels        */
  --fs-h2:       clamp(1.95rem, 3.1vw, 2.5rem); /* section headings        */
  --fs-h3:       clamp(1.3rem, 1.9vw, 1.55rem);
  --fs-h4:       1.15rem;

  /* metrics */
  --wrap:      1160px;
  --prose:     720px;
  --radius:    14px;
  --radius-sm: 8px;
  --section-y: clamp(76px, 9vw, 136px);

  --shadow-card: 0 1px 2px rgba(17, 19, 31, .05), 0 18px 40px -30px rgba(17, 19, 31, .35);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* rem resolves against this, so every rem-based token in the TYPE SCALE
     really is relative to --fs-body */
  font-size: var(--fs-body);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--f); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: #d9dbfa; color: var(--text); }

:focus-visible {
  outline: 2px solid var(--f);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); font-size: .9rem;
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- 3. Layout units */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--prose { width: min(100% - 2.5rem, var(--prose)); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--paper-alt); }
.section--ink { background: var(--ink); color: #e9ebf4; }
.section--tight { padding-block: clamp(52px, 6vw, 84px); }

.rule {
  border: 0; height: 1px; background: var(--line); margin: 0;
}

/* --------------------------------------------------------- 4. Type helpers */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--f);
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; flex: none;
}
.section--ink .eyebrow { color: #8f97ee; }

.h1, .h2, .h3 { font-family: var(--display); font-weight: 600; margin: 0; }

/* headings run on one line where they fit; when they must break, they break
   into even lines rather than leaving a single orphaned word */
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -.021em;
  text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.24;
  letter-spacing: -.014em;
  text-wrap: balance;
}
.h4 {
  font-family: var(--body);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -.005em;
  margin: 0;
}

.lede {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 90ch;
  margin: 1.2rem 0 0;
  text-wrap: pretty;
}
.section--ink .lede { color: var(--muted-ink); }

.section-head { margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }

.prose p {
  margin: 0 0 1.2rem;
  max-width: 92ch;
  font-size: var(--fs-prose);
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }

/* full-measure prose: lines run the whole column instead of breaking early */
.prose--full p { max-width: none; text-wrap: wrap; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

.note {
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.7;
}

/* inline math-ish variables, set in the display serif */
.m {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05em;
  letter-spacing: .01em;
}
.m--up { font-style: normal; }

/* ------------------------------------------------------------------ 5. Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(252, 252, 253, .86);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  transition: transform .34s var(--ease), border-color .34s var(--ease);
}
.nav.is-visible { transform: translateY(0); border-bottom-color: var(--line); }

.nav__inner {
  display: flex; align-items: center; gap: 1.5rem;
  height: 60px;
}
.nav__mark {
  font-family: var(--display);
  font-weight: 600; font-size: 1.16rem; letter-spacing: -.01em;
  color: var(--text); text-decoration: none; flex: none;
}
.nav__mark:hover { text-decoration: none; color: var(--f); }
.nav__links {
  display: flex; gap: 1.35rem; margin-left: auto;
  list-style: none; padding: 0; margin-block: 0;
  overflow-x: auto; scrollbar-width: none;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  font-size: .92rem; color: var(--muted); white-space: nowrap;
  padding-block: 4px; border-bottom: 1.5px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__links a:hover { color: var(--text); text-decoration: none; }
.nav__links a.is-current { color: var(--f); border-bottom-color: var(--f); }

.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--f), var(--g));
  width: 0%;
}

/* ----------------------------------------------------------------- 6. Hero */
.hero {
  position: relative;
  background: var(--ink);
  color: #eef0f8;
  padding-block: clamp(78px, 11vw, 132px) clamp(58px, 7vw, 92px);
  overflow: hidden;
  isolation: isolate;
}
.hero::before,
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; }

/* layer × step lattice — the coordinate system the paper localizes over */
.hero::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 92% at 22% 8%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 92% at 22% 8%, #000 12%, transparent 76%);
}
.hero::after {
  background:
    radial-gradient(52rem 30rem at 88% 6%, rgba(59, 65, 212, .34), transparent 62%),
    radial-gradient(40rem 26rem at 4% 92%, rgba(14, 140, 134, .24), transparent 64%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 4vw, 3.5rem);
  align-items: start;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: #a9b0d8;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: .38rem .82rem;
  margin-bottom: 1.6rem;
}
.hero__badge b { color: #fff; font-weight: 500; }
.hero__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--g);
  box-shadow: 0 0 0 3px rgba(14,140,134,.22);
}

.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.032em;
  margin: 0;
  color: #fff;
}
.hero__title em {
  display: block; font-style: normal; font-weight: 300;
  color: #b9c0e6;
}
.hero__sub {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.26rem);
  font-weight: 300;
  line-height: 1.36;
  color: #c9cfe9;
  margin: 1.15rem 0 0;
  max-width: 34ch;
}

.authors {
  margin: 2.1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.85;
  color: #e6e9f5;
  max-width: 56ch;
}
.authors a { color: #dfe3f2; border-bottom: 1px solid rgba(255,255,255,.28); }
.authors a:hover { color: #fff; border-bottom-color: #fff; text-decoration: none; }
.authors sup { font-size: .68em; color: #949cc8; padding-left: 1px; }
.authors .star, .affil .star { color: #949cc8; font-style: normal; }

.affil {
  margin: .9rem 0 0;
  font-size: .92rem;
  line-height: 1.75;
  color: #aab1d2;
  max-width: 56ch;
}
.affil sup { color: #6f78a8; }

.links {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 2.1rem 0 0; padding: 0; list-style: none;
}
.link-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 500;
  color: #0d1020; background: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .6rem 1.1rem;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.link-pill:hover { text-decoration: none; transform: translateY(-2px); }
.link-pill--ghost {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.2);
  color: #e7eaf6;
}
.link-pill--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.link-pill svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------- 7. Hero teaser figure */
.hero__fig { margin: 0; align-self: center; }
.hero__fig .figure__frame {
  background: #fff;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .85);
  padding: clamp(.7rem, 1.4vw, 1.1rem);
}
.hero__fig .figure__cap { color: #b3bad4; }
.hero__fig .figure__cap b { color: #fff; }

/* -------------------------------------------------------- 8. Headline stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--card); padding: 1.5rem 1.35rem 1.4rem; }
.stat__task {
  font-family: var(--mono); font-size: .86rem; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text); margin: 0 0 .95rem;
}
.stat__value {
  font-family: var(--display); font-weight: 600;
  font-size: 2.5rem; line-height: 1; letter-spacing: -.026em;
  color: var(--text);
}
.stat__value span { font-size: .48em; font-weight: 400; color: var(--muted); }
.stat__metric { font-size: var(--fs-small); color: var(--text); margin: .65rem 0 0; line-height: 1.5; }
.stat__base { font-size: .95rem; color: var(--muted); margin: .45rem 0 0; text-wrap: balance; }
.stat__base b { color: var(--text); font-weight: 600; }
.stat__delta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  color: var(--good); background: #e8f6ef;
  border-radius: 999px; padding: .18rem .55rem; margin-top: .8rem;
}

/* --------------------------------------------------------- 9. Figure block */
.figure { margin: 0; }
.figure__frame {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(.9rem, 2vw, 1.75rem);
  box-shadow: var(--shadow-card);
}
.figure__frame img {
  width: 100%; cursor: zoom-in;
  transition: opacity .2s var(--ease);
}
.figure__frame img:hover { opacity: .9; }
.figure--narrow .figure__frame img { margin-inline: auto; }
.figure__cap {
  margin: 1rem 0 0;
  font-size: var(--fs-caption); line-height: 1.64; color: var(--text-2);
}
.figure__cap b {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); margin-right: .5rem;
}
.figure__cap em { font-style: italic; }
.section--ink .figure__frame { background: #fff; border-color: rgba(255,255,255,.1); }
.section--ink .figure__cap { color: var(--muted-ink); }
.section--ink .figure__cap b { color: #e4e7f4; }

/* ------------------------------------------------------------ 9b. References */
.refs {
  list-style: none; counter-reset: ref;
  margin: 0; padding: 0;
  display: grid; gap: 1.1rem;
}
.refs li {
  counter-increment: ref;
  position: relative; padding-left: 2.9rem;
  font-size: var(--fs-small); color: var(--text-2); line-height: 1.7;
}
.refs li::before {
  content: "[" counter(ref) "]";
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: .88em; color: var(--f);
}
.refs em { font-style: italic; }
.refs li[id] { scroll-margin-top: 96px; }
.refs li:target { color: var(--text); }

.ref-link {
  font-family: var(--mono); font-size: .68em; font-weight: 500;
  vertical-align: super; line-height: 0;
  color: var(--f); padding-left: .12em; white-space: nowrap;
}
.ref-link:hover { text-decoration: underline; }
.hero .ref-link, .section--ink .ref-link { color: #9aa2f2; }

.fig-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.fig-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fig-grid--sidebar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }

/* Uniform panel: source images have slightly different aspect ratios, so each
   one is letterboxed into an identical box. The frame is white and so are the
   plot backgrounds, which makes the padding invisible. Nothing about the image
   files themselves needs to change. */
.fig-grid--uniform .figure { display: flex; flex-direction: column; }
.fig-grid--uniform .figure__frame img {
  aspect-ratio: 5 / 4;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ------------------------------------------------------------ 10. Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8, 10, 20, .9);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%; max-height: 86vh;
  background: #fff; border-radius: 10px; padding: 1rem;
}
.lightbox__close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,.24); }
.lightbox__cap {
  color: #b9c0d8; font-size: .84rem; margin-top: .9rem;
  max-width: 70ch; text-align: center;
}

/* --------------------------------------------------------- 11. Equations */
/* Math is LaTeX, rendered by the locally vendored KaTeX in assets/vendor.
   Edit the LaTeX in index.html; nothing here needs to change.               */

.eq {
  margin: 1.7rem 0;
  padding: 1.3rem 1.45rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--f);
  border-radius: var(--radius-sm);
}
.eq--g { border-left-color: var(--g); }

.eq__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
}
.eq__line + .eq__line {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* the math itself scrolls rather than pushing the card wide */
.eq__math {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 3px;
}
.eq__math .katex-display { margin: 0; text-align: left; }
.eq__math .katex-display > .katex { text-align: left; }

.eq__tag {
  flex: none;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

.eq__gloss {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-2);
}

/* labels around the page are uppercased; math inside them must not be —
   this is what keeps f and g lowercase in table headers and card labels */
.katex { text-transform: none; }

/* KaTeX sizing: display slightly up, inline matched to the body face */
.katex { font-size: 1.04em; }
.katex-display > .katex { font-size: 1.12em; }

/* inline math should never break a line mid-symbol */
p .katex, li .katex, td .katex, th .katex, figcaption .katex { white-space: nowrap; }

/* ----------------------------------------------------------- 12. Callout */
.callout {
  background: var(--ink);
  color: #e8ebf6;
  border-radius: 18px;
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  position: relative; overflow: hidden;
}
.callout::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(30rem 18rem at 100% 0%, rgba(59,65,212,.35), transparent 62%);
  pointer-events: none;
}
.callout > * { position: relative; z-index: 1; }
.callout__kicker {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .13em;
  text-transform: uppercase; color: #9aa2f2; margin: 0 0 1rem;
}
.callout__body {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.44; margin: 0; max-width: 46ch; color: #fff;
}
.callout__body--full { max-width: none; text-wrap: wrap; }
.callout__body b { font-weight: 600; color: #a8aef8; }
.callout__eq {
  margin: 1.4rem 0 .2rem;
  padding: 1.1rem 1.25rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  display: grid;
  gap: .9rem;
}
.callout__eq .eq__math { color: #eef0fa; }

.callout__foot {
  margin: 1.3rem 0 0; font-size: var(--fs-small); color: #bfc5dd;
  max-width: 62ch; line-height: 1.7;
}

/* --------------------------------------------------------- 13. Step list */
.steps { counter-reset: none; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.step { background: var(--card); display: grid; grid-template-columns: 68px 1fr; }
.step__key {
  font-family: var(--mono); font-size: .92rem; font-weight: 500;
  color: var(--f); background: var(--f-tint);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.35rem 0 0;
}
.step__body { padding: 1.3rem 1.5rem 1.35rem; }
.step__body h4 { margin: 0 0 .45rem; }
.step__body p { margin: 0; font-size: var(--fs-small); color: var(--text-2); line-height: 1.7; max-width: 72ch; }
.step__body code {
  font-family: var(--mono); font-size: .86em;
  background: var(--paper-alt); padding: .1em .35em; border-radius: 4px; color: var(--text);
}

/* ------------------------------------------------- 14. Localization widget */
.loc {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.15rem, 2.6vw, 1.9rem);
  box-shadow: var(--shadow-card);
}
.loc__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.loc__title { font-family: var(--body); font-size: var(--fs-h4); font-weight: 600; margin: 0; }
.loc__hint { margin: .4rem 0 0; font-size: var(--fs-small); color: var(--text-2); max-width: 54ch; }

.loc__control { display: flex; align-items: center; gap: .8rem; flex: none; }
.loc__control label {
  font-family: var(--mono); font-size: .8rem; color: var(--muted);
  letter-spacing: .04em; white-space: nowrap;
}
.loc__control output {
  font-family: var(--mono); font-size: .88rem; font-weight: 500;
  color: var(--conflict); min-width: 3.4em; text-align: right;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: clamp(110px, 22vw, 190px); height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--conflict), var(--line-strong));
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--conflict); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--conflict); cursor: pointer;
}

.loc__plot { display: grid; grid-template-columns: 46px 1fr; gap: .5rem; }
.loc__ylab {
  font-family: var(--mono); font-size: .7rem; color: var(--muted);
  display: grid; gap: 2px; align-items: center; text-align: right;
}
.loc__grid { display: grid; gap: 2px; }
.loc__row { display: grid; gap: 2px; }
.loc__cell { aspect-ratio: 1; border-radius: 2px; position: relative; }
.loc__cell.is-hit { box-shadow: inset 0 0 0 1.5px var(--ink); }
.loc__cell.is-hit::after {
  content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--ink);
}
.loc__xlab {
  grid-column: 2; display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-top: .5rem;
}
.loc__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.loc__stat dt {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.loc__stat dd {
  margin: 0; font-family: var(--display); font-size: 1.5rem;
  font-weight: 600; letter-spacing: -.02em;
}
.loc__stat dd span { font-size: .58em; font-weight: 400; color: var(--muted); }

/* --------------------------------------------------------------- 15. Tabs */
.tabs {
  display: flex; gap: .4rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.2rem;
}
.tab {
  font: inherit; font-size: 1.12rem; font-weight: 600;
  letter-spacing: -.005em;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); padding: .8rem 1.15rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--f); border-bottom-color: var(--f); }
.tab__idx {
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
  color: var(--muted); margin-right: .5rem;
}
.tab[aria-selected="true"] .tab__idx { color: var(--f); }

.panel[hidden] { display: none; }
.panel__head { margin-bottom: 1.8rem; }
.panel__head h3 { margin-bottom: .5rem; }

.objectives {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem; margin: 1.5rem 0 2rem;
}
.obj {
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--radius-sm); padding: .95rem 1.1rem; background: var(--card);
}
.obj--f { border-left-color: var(--f); }
.obj--g { border-left-color: var(--g); }
.obj__key {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 .35rem;
}
.obj--f .obj__key { color: var(--f); }
.obj--g .obj__key { color: var(--g); }
.obj__val { margin: 0; font-size: var(--fs-small); line-height: 1.64; color: var(--text); }
.obj__val span { color: var(--text-2); }

/* -------------------------------------------------------------- 16. Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-table);
  font-variant-numeric: tabular-nums;
}
caption {
  caption-side: bottom; text-align: left; padding: 1rem 1.15rem 0;
  font-size: var(--fs-caption); color: var(--text-2); line-height: 1.62;
}
caption b {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text);
  margin-right: .5rem;
}
th, td { padding: .62rem .8rem; text-align: right; white-space: nowrap; }
thead th {
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text); border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
}
thead tr:first-child th { padding-bottom: .45rem; }
th[scope="col"].group {
  text-align: center; color: var(--text);
  border-bottom: 1px solid var(--line);
}
th[scope="row"], td:first-child {
  text-align: left; font-weight: 500; color: var(--text);
  position: sticky; left: 0; background: var(--card); z-index: 1;
}
tbody tr + tr th[scope="row"],
tbody tr + tr td { border-top: 1px solid var(--line); }
tbody tr.is-base { color: var(--muted); }
tbody tr.is-base th[scope="row"] { color: var(--muted); font-weight: 400; font-style: italic; }
tbody tr.is-ours { background: var(--f-tint); }
tbody tr.is-ours th[scope="row"] { background: var(--f-tint); color: var(--f); font-weight: 600; }
tbody tr.is-ours td { font-weight: 600; }
td.best { color: var(--f); }
tbody tr:not(.is-ours) td.best { color: var(--text); font-weight: 600; }
td .sd { color: var(--muted); font-size: .84em; font-weight: 400; padding-left: .12em; }
tbody tr.is-ours td .sd { color: #4f55c9; }
.col-sep { border-left: 1px solid var(--line); }

.table-note {
  margin: 1rem 0 0; font-size: var(--fs-small); color: var(--text-2); line-height: 1.7; max-width: 92ch; text-wrap: pretty;
}

/* simple two-column reference tables */
.table--plain th, .table--plain td { text-align: left; white-space: normal; }
.table--plain thead th {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  padding-bottom: .7rem;
}
.table--plain td { color: var(--text-2); font-size: var(--fs-table); line-height: 1.66; }
.table--plain th[scope="row"] { width: 26%; min-width: 160px; }

/* ------------------------------------------------------- 17. Takeaway grid */
.takeaways {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.15rem;
}
.take {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.take__key {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: #8f97ee; margin: 0 0 .8rem;
}
.take h4 { color: #fff; margin-bottom: .55rem; font-size: var(--fs-h4); }
.take p { margin: 0; font-size: var(--fs-small); line-height: 1.7; color: #c3c9de; }

.limits {
  margin-top: 1.15rem;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.limits h4 { color: #fff; margin-bottom: .5rem; }
.limits p { margin: 0; font-size: var(--fs-small); color: #c3c9de; line-height: 1.7; max-width: 80ch; }

/* ------------------------------------------------------------- 18. BibTeX */
.bib { position: relative; }
.bib pre {
  margin: 0; overflow-x: auto;
  background: var(--ink); color: #dfe3f4;
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
  font-family: var(--mono); font-size: .81rem; line-height: 1.7;
}
.bib .k { color: #8f97ee; }
.bib .s { color: #74d6c9; }
.copy {
  position: absolute; top: .85rem; right: .85rem;
  font: inherit; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: #b8bfe0; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: .34rem .8rem; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.copy:hover { background: rgba(255,255,255,.18); color: #fff; }
.copy.is-done { background: var(--good); border-color: var(--good); color: #fff; }

/* ------------------------------------------------------------- 19. Footer */
.footer {
  background: var(--ink); color: #8f96b4;
  padding-block: clamp(2.6rem, 5vw, 4rem);
  font-size: var(--fs-small); line-height: 1.75;
}
.footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem;
}
.footer h3 {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: #8d95b6; margin: 0 0 .8rem; font-weight: 500;
}
.footer a { color: #ccd2e6; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer__bottom {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .88rem; color: #8189a6;
}

/* ---------------------------------------------------------- 20. Reveal fx */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------- 21. Responsive */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__fig { max-width: 620px; }
  .fig-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* give the equation the full width; its label drops underneath */
  .eq__line { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .eq__math { width: 100%; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  /* hint that the section nav scrolls sideways */
  .nav__links {
    mask-image: linear-gradient(90deg, #000 84%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
  }
  .fig-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 52px 1fr; }
  .step__body { padding: 1.15rem 1.15rem 1.2rem; }
  .loc__plot { grid-template-columns: 34px 1fr; }
  .nav__links { gap: 1rem; }
  .stat { padding: 1.25rem 1.15rem; }
  .stat__value { font-size: 2.15rem; }
  th, td { padding: .55rem .65rem; }
}

@media (max-width: 520px) {
  /* the threshold slider needs the full card width on small phones */
  .loc__head { flex-direction: column; align-items: stretch; }
  .loc__control { width: 100%; }
  .loc__control input[type="range"] { flex: 1; width: auto; min-width: 0; }
}

@media (max-width: 480px) {
  .hero__title { font-size: 2.1rem; }
  .hero__badge { flex-wrap: wrap; letter-spacing: .1em; font-size: .64rem; }
  .nav__mark { display: none; }
  .nav__links { margin-left: 0; }
}

/* ---------------------------------------------------- 22. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- 23. Printing */
@media print {
  .nav, .lightbox, .loc__control, .copy { display: none !important; }
  .hero, .section--ink, .callout, .footer { background: #fff !important; color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}