/* When Dynamic Scaling Fails - project page.

   Colour carries meaning here and only one meaning each, so the roles do not move:

     --brand  the page itself -- nav, kickers, links, controls -- and, in the charts,
              persistent group-wise scaling: the policy that survives.
     --fail   per-token dynamic scaling: the runaway.
     --mid    partial containment -- persistent static, where the norm is held and the
              function is lost anyway.
     grey     everything else, including unquantized references and random baselines.

   Each hue appears twice. --brand-lite and --fail-lite are the light forms and fill
   large areas only: the rule across the top, the hero wash, the heading gradient,
   the slider track. The plain tokens are the same hues darkened until they are legible as
   12px bold text or a chart line, because a colour that is lovely at 70px is unreadable at
   12, and in the charts colour is data. --fail-2 is the INT3 line, one step worse than
   INT4, and is a darker shade rather than a lighter one, because a light tint of any red
   is pink.

   Checked against this page's ivory background: --brand 4.53:1, --fail 5.49:1,
   --mid 4.50:1, --ink-3 3.75:1, and the three data colours at least 64 apart in CIE Lab,
   so no two lines can be read for one another. */

:root {
  --brand: #946f1d;  --brand-lite: #d9a83c;  --brand-2: #c9973a;
  --brand-soft: #fbeeca;  --brand-faint: #fdf8ea;
  --keep: #946f1d;
  --fail: #8b3fd4;   --fail-lite: #a855f7;   --fail-2: #6321a3;
  --fail-soft: #ece0fa;   --fail-faint: #faf6fe;
  --mid: #17837f;
  --ink: #23211a;    --ink-2: #55503f;    --ink-3: #8a8270;
  --line: #ece5d5;   --line-2: #f7f2e6;   --grid: #f1ebdd;        --grey: #c3bba7;
  --bg: #fffdf6;     --bg-alt: #faf5e9;
  /* the two washes behind the hero are the two roles: gold on the left for the policy
     that holds, violet on the right for the one that runs. */
  --hero-a: #fbeeca; --hero-b: #ece0fa;
  --shadow: 0 1px 2px rgba(35, 33, 26, .05), 0 8px 28px rgba(148, 111, 29, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16.5px/1.68 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; transition: background .3s, color .3s;
}
/* the thread across the top: a slack gold line, and over it the length already drawn,
   which runs gold into wine as the page is pulled through */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50;
  background: var(--brand-soft);
}
#spool {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 51;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-lite), var(--fail-lite));
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }

/* ── nav ───────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(1.4) blur(10px);
  background: var(--bg); border-bottom: 1px solid var(--line); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .nav { background: color-mix(in srgb, var(--bg) 84%, transparent); }
}
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-weight: 800; font-size: 18px;
  color: var(--ink); letter-spacing: -.02em; }
.brand span { background: linear-gradient(100deg, var(--brand), var(--fail));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav ul a { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.nav ul a:hover { color: var(--brand); text-decoration: none; }
@media (max-width: 960px) { .nav ul { display: none; } }

/* ── hero ──────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; text-align: center; padding: 88px 0 62px;
  background:
    radial-gradient(1100px 520px at 12% -14%, var(--hero-a) 0%, transparent 62%),
    radial-gradient(900px 480px at 94% -6%, var(--hero-b) 0%, transparent 58%),
    var(--bg);
}
.hero .container { position: relative; z-index: 1; }
.eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-2); padding: 6px 14px; border-radius: 999px; }
.hero h1 {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-weight: 800;
  font-size: clamp(34px, 5.4vw, 60px); line-height: 1.08; letter-spacing: -.035em;
  text-wrap: balance;
  /* background-clip:text paints only inside the box, so the descender of the "y" in
     "Dynamic" is clipped at this line-height. The padding extends the painted area. */
  padding: .04em 0 .14em; margin: 18px 0 10px;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 30%,
                              var(--brand) 60%, var(--fail-lite) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* No positioning inside the heading: a positioned descendant of a background-clip:text
   element is painted above the clipped background, and since its colour is transparent it
   disappears. That is what hid "Fails". The gradient already lands the word in the wine,
   which is the whole point, so nothing else is needed here. */
.hero h1 .hl { color: inherit; white-space: nowrap; }
.subtitle { max-width: 680px; margin: 0 auto 18px; font-size: 17.5px; color: var(--ink-2);
  font-weight: 500; text-wrap: balance; line-height: 1.5; }
.authors { margin: 6px 0 2px; font-weight: 600; }
.affil { margin: 0; color: var(--ink-3); font-size: 14.5px; }
/* the venue sits under the affiliation and should not compete with it */
.affil.venue { margin: 2px 0 22px; font-size: 13.5px; opacity: .88; }
.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--ink); font-size: 14.5px; font-weight: 600;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow);
  border-color: var(--brand-2); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn.soon { color: var(--ink-3); cursor: default; }
.btn.soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.btn .tag { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .06em; }

/* ── stats strip ───────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px;
  margin: -26px 0 8px; position: relative; z-index: 2; }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; box-shadow: var(--shadow); }
.stat b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: 25px; letter-spacing: -.03em; color: var(--brand); line-height: 1.1; }
.stat.warn b { color: var(--fail); }
.stat.dim b { color: var(--ink); }
.stat span { display: block; margin-top: 5px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* ── sections ──────────────────────────────────────────── */
.block { padding: 62px 0; }
.block.alt { background: var(--bg-alt); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 10px; }
h2 { font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-weight: 700;
  font-size: clamp(24px, 3.2vw, 33px); line-height: 1.2; letter-spacing: -.025em; margin: 0 0 14px; }
h3 { font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: -.02em; margin: 40px 0 8px; }
.lede { max-width: 780px; color: var(--ink-2); margin: 0 0 22px; }
.narrow-p { max-width: 780px; }
.aside { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }
.note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.tldr { font-size: 17px; line-height: 1.66; border-left: 3px solid var(--brand);
  box-shadow: var(--shadow); }
.abstract { margin-top: 14px; }
.abstract summary { cursor: pointer; font-weight: 600; color: var(--brand); font-size: 14.5px; }
.abstract p { color: var(--ink-2); font-size: 15px; }

/* ── layout helpers ────────────────────────────────────── */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two.wide-left { grid-template-columns: 1.35fr 1fr; }
.panel { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px 18px; }
.panel figcaption { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.panel.prose { font-size: 15px; color: var(--ink-2); line-height: 1.62; }
.panel.prose b { color: var(--ink); }
.panel svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── sliders ───────────────────────────────────────────── */
.slider-row { margin: 0 0 22px; max-width: 620px; }
.slider-row label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 8px; }
.slider-row label .mono { color: var(--brand); font-weight: 700; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-soft), var(--fail-soft)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-soft), var(--fail-soft)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--brand);
  border: 3px solid var(--bg); box-shadow: 0 1px 6px rgba(21, 32, 58, .25); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--bg);
  box-shadow: 0 1px 6px rgba(21, 32, 58, .25); }
.ticks { display: flex; justify-content: space-between; margin-top: 2px; }
.ticks span { font: 700 11.5px "JetBrains Mono", monospace; color: var(--ink-3); }
.ticks span.on { color: var(--brand); }

/* ── segmented toggles ─────────────────────────────────── */
.switch-row { margin: 0 0 20px; }
.seg { display: inline-flex; background: var(--line-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--brand);
  box-shadow: 0 1px 3px rgba(21, 32, 58, .12); }

/* ── the loop diagram ──────────────────────────────────── */
.loopwrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; }
.loopdiag { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.readouts { display: grid; gap: 12px; }
.ro { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.ro .lbl { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); }
.ro .big { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 30px;
  letter-spacing: -.03em; margin-top: 4px; }
.ro .sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.ro.wide { border-left: 3px solid var(--brand); font-size: 14.5px; line-height: 1.6; }

/* ── intervention cards ────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
  margin-bottom: 20px; }
.ic { text-align: left; font: inherit; cursor: pointer; background: var(--bg);
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.ic:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.ic .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); }
.ic .n { font-weight: 650; font-size: 14.5px; margin-top: 3px; }
.ic .v { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.ic[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-faint);
  box-shadow: 0 0 0 1px var(--brand) inset; }
.ic[aria-pressed="true"] .k { color: var(--brand); }

/* ── verdict cards ─────────────────────────────────────── */
.verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
  margin-bottom: 22px; }
.vd { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px;
  border-left: 3px solid var(--grey); }
.vd.ok { border-left-color: var(--brand); }
.vd.bad { border-left-color: var(--fail); }
.vd .n { font-weight: 650; font-size: 15px; }
.vd .v { font-size: 13px; color: var(--ink-2); margin-top: 5px; }
.vd .m { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

/* ── takeaways, bib, footer ────────────────────────────── */
.takeaways { display: grid; gap: 12px; }
.tk { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  font-size: 15px; color: var(--ink-2); line-height: 1.62; }
.tk b { color: var(--ink); }
.bib { background: var(--ink); color: #e9ecf4; border-radius: 14px; padding: 18px 20px;
  font-size: 13px; line-height: 1.62; overflow-x: auto; }
.foot { padding: 34px 0 48px; border-top: 1px solid var(--line); }
.foot p { margin: 0; font-size: 13.5px; color: var(--ink-3); max-width: 760px; }

/* ── tooltip ───────────────────────────────────────────── */
.tip { position: fixed; z-index: 70; max-width: 300px; pointer-events: none; opacity: 0;
  transition: opacity .12s; background: var(--ink); color: #eef1f8; font-size: 12.5px;
  line-height: 1.5; padding: 9px 11px; border-radius: 9px; box-shadow: 0 8px 26px rgba(16, 24, 44, .26); }
.tip.on { opacity: 1; }
.tip b { color: #fff; }

/* ── the loom, and the motion ───────────────────────────── */
.hero > .container { position: relative; z-index: 1; }

.rise { opacity: 0; transform: translateY(14px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1); }
.rise.in { opacity: 1; transform: none; }
.stats .rise:nth-child(2) { transition-delay: .06s; }
.stats .rise:nth-child(3) { transition-delay: .12s; }
.stats .rise:nth-child(4) { transition-delay: .18s; }
.stats .rise:nth-child(5) { transition-delay: .24s; }
.cards .rise:nth-child(2), .verdicts .rise:nth-child(2) { transition-delay: .05s; }
.cards .rise:nth-child(3), .verdicts .rise:nth-child(3) { transition-delay: .10s; }
.cards .rise:nth-child(4), .verdicts .rise:nth-child(4) { transition-delay: .15s; }
.cards .rise:nth-child(5), .verdicts .rise:nth-child(5) { transition-delay: .20s; }

/* the live feedback loop: current flowing the wrong way round it */
.flow { stroke-dasharray: 5 7; animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }

.ic, .vd, .btn, .stat { will-change: transform; }
.vd { transition: border-color .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .flow { animation: none; }
  #spool { transition: none; }
  html { scroll-behavior: auto; }
}

/* in Supreme Stance the page is held under tension */

/* ── narrow screens ────────────────────────────────────── */
@media (max-width: 880px) {
  .two, .two.wide-left, .loopwrap { grid-template-columns: 1fr; }
  .block { padding: 46px 0; }
  .stats { margin-top: 10px; }
}