/* =========================================================
   Cadenza — shared styles (homepage, science, deployment)
   ========================================================= */
:root{
  --chalk:#EDEEF0;
  --white:#FFFFFF;
  --graphite:#1D1F24;
  --mist:#8A8F99;
  --lilac:#C3B4F0;
  --lilac-wash:#F1EDFC;
  --violet:#8E77E0;      /* deep lilac: strokes and small accents */
  --amber:#E9C27A;       /* warm accent in illustrations; "too close / too far" states */
  --mint:#A8DCC0;        /* illustration only */
  --line:rgba(29,31,36,.14);
  --body:#3d4148;
  --display:"Fraunces", Georgia, serif;
  --sans:"Geist", system-ui, sans-serif;
  --gutter:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --r-lg:28px; --r-md:20px; --r-sm:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--chalk);color:var(--graphite);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;min-width:1280px}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
h1,h2,h3,h4,.display{font-family:var(--display);font-optical-sizing:auto;font-variation-settings:"SOFT" 50,"WONK" 0;font-weight:400;letter-spacing:-.012em;line-height:1.08}
.kicker{display:block;font:500 15px/1.4 var(--sans);color:var(--violet);margin-bottom:20px}
.dark .kicker,.on-dark .kicker{color:var(--lilac)}
/* entrance: fade and lift once, as the block arrives */
[data-rise]{opacity:0;transform:translateY(56px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0s)}
[data-rise].in{opacity:1;transform:none}
/* zoomable photo frames */
[data-zoom]{overflow:hidden}
[data-zoom] img{will-change:transform,opacity;transform-origin:50% 50%}
.more{display:inline-flex;align-items:center;gap:10px;font:500 15px var(--sans);color:var(--graphite);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .2s,gap .3s var(--ease)}
.more:hover{color:var(--violet);gap:14px}
.more svg{width:14px;height:14px}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:38px;height:38px;overflow:visible}
.logo .arc{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.logo .echo{fill:none;stroke:var(--lilac);stroke-width:1.6;stroke-linecap:round}
.logo .dot{fill:currentColor}
.logo .word{font:400 29px/1.15 var(--display);font-variation-settings:"SOFT" 50,"WONK" 0;letter-spacing:-.005em}
.logo .by{display:block;font:400 11px/1.3 var(--sans);opacity:.7;margin-top:1px}

/* ---------- Header: glass ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);color:var(--white);
  background:rgba(20,22,28,.14);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.14);transition:background .4s,color .4s,border-color .4s}
.site-header.solid{background:rgba(237,238,240,.78);color:var(--graphite);border-bottom-color:var(--line)}
.site-nav{display:flex;gap:34px;align-items:center;font-size:15px}
.site-nav a{text-decoration:none;opacity:.85;transition:opacity .2s}
.site-nav a:hover,.site-nav a[aria-current]{opacity:1}
.site-nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;font:500 15px/1 var(--sans);text-decoration:none;padding:15px 26px;border-radius:999px;border:1px solid currentColor;color:inherit;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
/* frosted glass for buttons that sit on photos */
.btn.glass{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:var(--white);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 8px 24px rgba(10,12,18,.18)}
.btn.glass:hover{background:rgba(255,255,255,.94);color:var(--graphite)}
.site-header .btn.glass{box-shadow:none}
.site-header.solid .btn.glass{background:rgba(29,31,36,.04);border-color:rgba(29,31,36,.35);color:var(--graphite)}
.site-header.solid .btn.glass:hover{background:var(--graphite);color:var(--white)}
.btn.solid{background:var(--graphite);color:var(--white);border-color:var(--graphite)}
.btn.solid:hover{background:var(--violet);border-color:var(--violet)}

/* line reveal (the padding keeps descenders visible) */
.ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.ln > span{display:block;transform:translateY(110%)}
.in .ln > span{transform:none;transition:transform 1.1s var(--ease)}
.in .ln:nth-child(2) > span{transition-delay:.1s}
.in .ln:nth-child(3) > span{transition-delay:.2s}

/* ---------- Page head for subpages ---------- */
.page-head{padding:240px var(--gutter) 120px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.page-head .h{grid-column:1 / span 8}
.page-head h1{font-size:104px;font-weight:350;line-height:1.02}
.page-head p{grid-column:9 / span 4;color:var(--body)}
.toc{grid-column:1 / -1;margin-top:56px;display:flex;gap:10px;flex-wrap:wrap}
.toc a{font-size:14px;text-decoration:none;padding:9px 16px;border-radius:999px;background:var(--white);transition:background .2s,color .2s}
.toc a:hover{background:var(--graphite);color:var(--white)}

/* ---------- Footer ---------- */
footer{padding:72px var(--gutter) 48px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(12,1fr);gap:24px;font-size:14px;color:var(--mist)}
footer .logo{color:var(--graphite);grid-column:1 / span 4;align-self:start}
footer .col{grid-column:span 2;display:flex;flex-direction:column;gap:10px}
footer .col b{font-weight:500;color:var(--graphite);margin-bottom:4px}
footer .col a{text-decoration:none}
footer .col a:hover{color:var(--graphite)}
footer .base{grid-column:1 / -1;margin-top:48px;display:flex;justify-content:space-between;font-size:13px}

/* ---------- Shadowing lab (dark) ---------- */
.lab{overflow-anchor:none;--lab-bg:var(--graphite);--lab-native:#EDEEF0;--lab-child:var(--lilac);--lab-window:rgba(195,180,240,.14);--lab-ink:#EDEEF0;--lab-muted:#8d929c;--lab-grid:rgba(237,238,240,.14);--lab-node:#262931;--lab-warn:var(--amber);
  border:1px solid rgba(237,238,240,.12);border-radius:var(--r-lg);padding:48px 48px 40px;background:rgba(255,255,255,.02);color:var(--chalk)}
.lab-top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;margin-bottom:40px;height:150px;contain:layout}
.lab-readout{grid-column:1 / span 6;display:flex;align-items:baseline;gap:20px;white-space:nowrap}
.lab-ms{font:350 96px/1.05 var(--display);font-variation-settings:"SOFT" 50,"WONK" 0;color:var(--white);font-variant-numeric:tabular-nums;display:inline-block;width:5.4ch}
.lab-zone{font:500 15px var(--sans);padding:7px 14px;border-radius:999px;min-width:132px;text-align:center;background:rgba(195,180,240,.16);color:var(--lilac);white-space:nowrap}
.lab[data-zone=early] .lab-zone,.lab[data-zone=late] .lab-zone{background:rgba(233,194,122,.16);color:var(--amber)}
.lab-verdict{grid-column:7 / span 6;color:#c9ccd3;height:7.2em;overflow:hidden;align-self:end;display:flex;align-items:flex-end}
.lab-control{contain:layout;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;margin:28px 0 8px}
.lab-control label{grid-column:1 / span 3;font-size:15px;color:#b9bdc6}
.lab-range{grid-column:4 / span 5}
.lab-presets{grid-column:9 / span 4;justify-content:flex-end;flex-wrap:nowrap;white-space:nowrap}
.lab-presets button{background:rgba(255,255,255,.06);color:var(--chalk);border:1px solid rgba(237,238,240,.2);border-radius:999px;padding:8px 14px;backdrop-filter:blur(10px)}
.lab-presets button:hover{background:rgba(255,255,255,.14)}
.lab-flowwrap{border-top:1px solid rgba(237,238,240,.12);padding-top:48px;margin-top:48px}
.lab-flowwrap h3{font-size:34px;margin-bottom:28px;color:var(--white)}
/* ===== Shadowing lab (shared) — colours set per page via --lab-* ===== */
.lab-chart,.lab-flow{width:100%;height:auto;display:block;overflow:visible}
.lab-gridline{stroke:var(--lab-grid);stroke-width:1}
.lab-tick,.lab-key,.lab-node-s,.lab-loopt{fill:var(--lab-muted);font-size:13px}
.lab-key{font-size:14px}
.lab-key.native{fill:var(--lab-native)}
.lab-key.child{fill:var(--lab-child)}
.lab-sylt{fill:var(--lab-ink);font-size:16px}
.lab-syl{fill:var(--lab-muted);opacity:.45}
.lab-syl.stress{fill:var(--lab-child);opacity:1}
.lab-window{fill:var(--lab-window)}
.lab-native{fill:none;stroke:var(--lab-native);stroke-width:2;stroke-linejoin:round}
.lab-child{fill:none;stroke:var(--lab-child);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.lab-head{stroke:var(--lab-native);stroke-width:1;opacity:.45}
.lab-dot-native{fill:var(--lab-native)}
.lab-dot-child{fill:var(--lab-bg);stroke:var(--lab-child);stroke-width:3;transition:fill .2s}
.lab-dot-child.in{fill:var(--lab-child)}
.lab-path{fill:none;stroke:var(--lab-grid);stroke-width:2.5;stroke-linecap:round;transition:stroke .3s,opacity .3s}
.lab-path.detour{stroke-dasharray:2 8}
[data-zone=ok] .lab-path.direct,[data-zone=ok] .lab-path.out,[data-zone=ok] .lab-path.loop{stroke:var(--lab-child)}
[data-zone=early] .lab-path.direct{stroke:var(--lab-warn);stroke-dasharray:3 9}
[data-zone=early] .lab-path.out{stroke:var(--lab-warn)}
[data-zone=late] .lab-path.detour{stroke:var(--lab-warn)}
[data-zone=late] .lab-path.out{stroke:var(--lab-warn)}
.lab-node-shape{fill:var(--lab-node);stroke:var(--lab-grid);stroke-width:1.5;transition:stroke .3s,fill .3s}
.lab-node.trans{opacity:.4;transition:opacity .3s}
[data-zone=late] .lab-node.trans{opacity:1}
[data-zone=late] .lab-node.trans .lab-node-shape{stroke:var(--lab-warn)}
[data-zone=ok] .lab-node:not(.trans) .lab-node-shape{stroke:var(--lab-child)}
[data-zone=early] .lab-node.map .lab-node-shape{stroke:var(--lab-warn)}
[data-zone=late] .lab-node.map{opacity:.4}
.lab-node-t{fill:var(--lab-ink);font-size:16px}
.lab-icon{fill:none;stroke:var(--lab-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lab-pulse{fill:var(--lab-child)}
.lab-pulse.slow,[data-zone=early] .lab-pulse{fill:var(--lab-warn)}
.lab-pulse.fb{fill:var(--lab-native);opacity:.8}
.lab-loopt{font-size:13px}
.lab-range{width:100%;accent-color:var(--lab-child);cursor:pointer}
.lab-presets{display:flex;gap:8px;flex-wrap:wrap}
.lab-presets button{font:inherit;font-size:14px;cursor:pointer}
@media (prefers-reduced-motion: reduce){.lab-pulse{display:none}}

.lab-link{stroke:var(--lab-child);stroke-width:1.5;stroke-dasharray:3 4}
.lab-src{fill:none;stroke:var(--lab-child);stroke-width:2}
[data-zone=early] .lab-link,[data-zone=late] .lab-link,[data-zone=early] .lab-src,[data-zone=late] .lab-src{stroke:var(--lab-warn)}
[data-zone=late] .lab-pulse:not(.fb){fill:var(--lab-warn)}


/* ---------- Ladder and facts (dark sections) ---------- */
.ladder{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.ladder-intro{grid-column:1 / span 4}
.ladder-intro h3{font-size:48px;color:var(--white)}
.ladder-intro p{margin-top:20px;color:#b9bdc6;font-size:16px}
.ladder ol{grid-column:6 / span 7;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.rung{border:1px solid rgba(237,238,240,.14);border-radius:var(--r-md);padding:28px 24px;position:relative;transition:transform .8s var(--ease),opacity .8s;color:var(--chalk)}
.rung:nth-child(1){height:220px}.rung:nth-child(2){height:290px;border-color:var(--lilac);background:rgba(195,180,240,.08)}.rung:nth-child(3){height:360px}
.ladder:not(.in) .rung{transform:translateY(40px);opacity:0}
.ladder .rung:nth-child(2){transition-delay:.15s}.ladder .rung:nth-child(3){transition-delay:.3s}
.rung .n{font:350 40px/1.05 var(--display);color:var(--mist)}
.rung h4{margin-top:14px;font:500 18px/1.3 var(--sans)}
.rung p{margin-top:8px;font-size:15px;color:#b9bdc6}
.rung .here{position:absolute;top:-14px;left:24px;font-size:13px;font-weight:500;background:var(--lilac);color:var(--graphite);padding:4px 12px;border-radius:999px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.fact{border-top:1px solid rgba(237,238,240,.18);padding-top:28px}
.fact h3{font-size:28px;color:var(--white)}
.fact p{margin-top:14px;color:#b9bdc6;font-size:16px}
.fact cite{display:block;margin-top:16px;font-style:normal;font-size:13px;color:#7e848f}
.fact cite a{text-decoration-color:rgba(255,255,255,.25)}

/* ---------- Forms ---------- */
.form{background:var(--white);border-radius:var(--r-lg);padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:32px 28px}
.form h3{grid-column:1 / -1;font-size:32px}
.field{display:flex;flex-direction:column;gap:8px}
.field.wide{grid-column:1 / -1}
.field label{font-size:14px;color:#4b4f57}
.field input,.field select,.field textarea{font:400 18px/1.4 var(--sans);color:var(--graphite);background:transparent;border:0;border-bottom:1px solid rgba(29,31,36,.3);padding:8px 0;border-radius:0;transition:border-color .2s}
.field textarea{resize:vertical;min-height:100px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--violet)}
.form-foot{grid-column:1 / -1;margin-top:4px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .ln > span{transform:none!important}
  [data-rise]{opacity:1;transform:none}
  .ladder .rung{transform:none;opacity:1}
}