/* ============================================================
   KSENIYA SATSEVICH — PORTFOLIO STYLES
   Design thesis: "Signal, extracted from noise."
   Financial-terminal vernacular. Two sessions:
   NIGHT (default) — after-hours terminal: ink, Bloomberg amber
   DAY — the morning ledger: paper, deep amber ink
   ============================================================ */

:root{
  /* NIGHT — soft pastel terminal: lifted slate, apricot warm, UT orange as a sparing accent */
  --ink:        #171922;
  --panel:      #1F2230;
  --panel-t:    rgba(31,34,48,.92);
  --panel-edge: #333849;
  --amber:      #E9BE8C;   /* soft apricot — the workhorse warm */
  --amber-dim:  #B79067;
  --ut:         #E07B3C;   /* UT burnt orange — accent, used sparingly */
  --blue:       #6FA8DC;   /* steel blue — cool co-accent, complement to the amber */
  --blue-dim:   #4E7BA6;
  --green:      #93CBA9;   /* sage mint */
  --red:        #E39B94;   /* dusty rose */
  --paper:      #E7E3D9;
  --body-text:  #C3C7D0;
  --muted:      #8C95A5;
  --faint:      #3A4152;
  --grid-line:  rgba(120,128,148,.13);
  --glow:       rgba(233,190,140,.38);
  --beam-a:     rgba(233,190,140,.06);
  --beam-b:     rgba(147,203,169,.04);
  --beam-c:     rgba(120,110,255,.05);
  --wash:       rgba(23,25,34,.82);
  --tape-bg:    rgba(27,30,42,.9);
  --nav-bg:     rgba(23,25,34,.72);
  /* validated data-series colors (charts only — UI amber stays --amber) */
  --chart-1:    #C87F12;
  --chart-2:    #1E9E54;
  --chart-3:    #6E8BEA;   /* periwinkle — colorblind-safe 3rd series vs orange/green */
  --chart-grid: rgba(140,149,165,.16);
  /* hero backdrop — pinned so the hero stays put while the page bg whitens */
  --hero-bg:    #171922;
  --hero-beam:  rgba(233,190,140,.06);
}
html[data-theme="light"]{
  /* DAY — brushed-steel ledger: cool near-white, metallic surfaces, steel-blue lead accent */
  --ink:        #F6F9FD;   /* cool steel page — whiter */
  --panel:      #F7FAFD;   /* metallic panel — top of the sheen */
  --panel-2:    #E7EEF5;   /* metallic panel — bottom of the sheen */
  --panel-t:    rgba(247,250,253,.96);
  --panel-edge: #CFD9E5;   /* cool steel hairline */
  --amber:      #B4772A;   /* warm minor accent, kept for contrast */
  --amber-dim:  #C29A5C;
  --ut:         #BF5700;   /* real UT orange, sparing */
  --blue:       #2C6AAB;   /* steel blue — the lead accent now */
  --blue-dim:   #6E8DAC;
  --green:      #3F7D5A;
  --red:        #B25A50;
  --paper:      #1F2937;   /* cool slate ink */
  --body-text:  #3D4756;
  --muted:      #63707F;   /* cool grey-blue */
  --faint:      #C3CCD8;
  --grid-line:  rgba(40,64,96,.06);
  --glow:       rgba(180,119,42,.30);
  --beam-a:     rgba(191,87,0,.025);   /* was .07 — softened so the content bg reads truly white (hero keeps its own beam) */
  --beam-b:     rgba(63,125,90,.05);
  --beam-c:     rgba(90,80,220,.05);
  --wash:       rgba(246,249,253,.82);
  --tape-bg:    rgba(248,251,254,.92);
  --nav-bg:     rgba(246,249,253,.80);
  --nav-cream:  rgba(243,240,231,.66);  /* nav blends with the hero cream, then eases to --nav-bg */
  --chart-1:    #C77E1F;
  --chart-2:    #15803D;
  --chart-3:    #2C6AAB;   /* steel blue — colorblind-safe 3rd series vs orange/green */
  --chart-grid: rgba(40,64,96,.12);
  /* brushed-metal surface: bright top edge easing into a cooler base */
  --metal:      linear-gradient(180deg, #FFFFFF 0%, var(--panel) 46%, var(--panel-2) 100%);
  /* hero backdrop — pinned to the original cream so the hero is untouched */
  --hero-bg:    #F3F0E7;
  --hero-beam:  rgba(191,87,0,.07);
}

:root{
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --max: 1120px;
  --pad: clamp(20px, 5vw, 56px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:72px 72px;
  background-position:center top;
  transition:background-color .5s ease, color .5s ease;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 70% -10%, var(--beam-a), transparent 60%),
    linear-gradient(var(--wash), var(--wash));
  transition:background .5s ease;
}

::selection{ background:var(--amber); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); position:relative; z-index:1; }

/* ---------- scroll progress ---------- */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:linear-gradient(90deg, var(--amber), var(--blue));
  box-shadow:0 0 8px var(--glow);
}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue);
}
.eyebrow .slash{ color:var(--muted); }
h2.sec-title{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(28px, 4.5vw, 46px);
  letter-spacing:-.02em; line-height:1.1; margin:14px 0 10px;
}
.sec-sub{ color:var(--muted); max-width:56ch; }
section{ padding:clamp(64px, 8vw, 104px) 0; position:relative; }

/* ---------- reveal on scroll (hidden only when JS alive) ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal.d1{ transition-delay:.08s } .js .reveal.d2{ transition-delay:.16s }
.js .reveal.d3{ transition-delay:.24s } .js .reveal.d4{ transition-delay:.32s }

/* ============================================================ NAV */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  /* over the hero: cream, seamless with the hero backdrop */
  background:var(--nav-cream);
  border-bottom:1px solid transparent;
  transition:background-color .7s ease, border-color .7s ease;
}
/* past the hero: eases to the cool steel bar */
nav.scrolled{
  background:var(--nav-bg);
  border-bottom-color:var(--panel-edge);
}
.nav-in{
  max-width:var(--max); margin:0 auto; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:var(--mono); font-size:13px;
}
.nav-logo{ color:var(--amber); letter-spacing:.1em; white-space:nowrap; }
.nav-logo b{ color:var(--paper); font-weight:600; }
.nav-links{ display:flex; gap:26px; }
.nav-links a{ color:var(--muted); letter-spacing:.06em; transition:color .25s; position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-right{ display:flex; align-items:center; gap:14px; }
/* burger toggle: injected by app.js, only shown on phones (media query below) */
.nav-burger{ display:none; }
#themeBtn{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; cursor:pointer;
  color:var(--paper); background:transparent; border:1px solid var(--panel-edge);
  border-radius:4px; padding:6px 12px; transition:border-color .3s, color .3s, transform .2s;
  white-space:nowrap;
}
#themeBtn:hover{ border-color:var(--amber); color:var(--amber); }
/* phones: the section links collapse into a burger dropdown (app.js). The
   EN|RU switch and the burger stay in the bar; the links drop into a panel
   under it. Without JS the links stay inline and scroll horizontally. */
@media (max-width:860px){
  /* no-JS fallback — keep the old scrollable row */
  html:not(.js) .nav-links{ gap:16px; overflow-x:auto; font-size:11px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  html:not(.js) .nav-links::-webkit-scrollbar{ display:none }

  /* burger button — mono, bordered to match the EN|RU switch */
  html.js .nav-burger{
    display:inline-flex; align-items:center; justify-content:center; order:2;
    width:36px; height:28px; padding:0; cursor:pointer;
    background:transparent; border:1px solid var(--panel-edge); border-radius:4px;
    transition:border-color .3s;
  }
  html.js .nav-burger:hover{ border-color:var(--amber); }
  html.js .nav-burger .nb-box{ position:relative; display:block; width:16px; height:11px; }
  html.js .nav-burger .nb-box i{
    position:absolute; left:0; width:100%; height:1.5px; border-radius:2px; background:var(--paper);
    transition:top .3s ease, transform .3s ease, opacity .2s ease;
  }
  html.js .nav-burger .nb-box i:nth-child(1){ top:0; }
  html.js .nav-burger .nb-box i:nth-child(2){ top:50%; transform:translateY(-50%); }
  html.js .nav-burger .nb-box i:nth-child(3){ top:100%; transform:translateY(-100%); }
  /* open → morph the bars into an X */
  html.js nav.nav-open .nav-burger{ border-color:var(--amber); }
  html.js nav.nav-open .nav-burger .nb-box i:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
  html.js nav.nav-open .nav-burger .nb-box i:nth-child(2){ opacity:0; }
  html.js nav.nav-open .nav-burger .nb-box i:nth-child(3){ top:50%; transform:translateY(-50%) rotate(-45deg); }

  /* links become a dropdown panel spanning the bar. Opaque (not translucent)
     so the animated hero dot-field can't bleed through it; the fill matches
     the bar — cream over the hero, steel once scrolled / on case pages. */
  html.js .nav-links{
    position:absolute; top:100%; left:0; right:0;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:4px var(--pad) 10px;
    background:var(--hero-bg);
    border-bottom:1px solid var(--panel-edge);
    box-shadow:0 14px 26px -18px rgba(31,41,55,.4);
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  html.js nav.scrolled .nav-links{ background:var(--panel); }
  html.js nav.nav-open .nav-links{
    opacity:1; transform:none; pointer-events:auto; visibility:visible;
    transition:opacity .25s ease, transform .25s ease, visibility 0s;
  }
  html.js .nav-links a{
    padding:13px 2px; font-size:13px; letter-spacing:.08em;
    border-top:1px solid color-mix(in srgb, var(--panel-edge) 55%, transparent);
  }
  html.js .nav-links a::after{ display:none; }  /* drop the desktop underline sweep */
}

/* ============================================================ i18n / LANGUAGE
   The site is bilingual (EN default / RU). Language lives on <html data-lang>,
   set before first paint by an inline <head> script and toggled by the nav
   switch (injected in assets/i18n.js). Every translatable string exists twice —
   the original tagged .t-en and the Russian tagged .t-ru — and only the active
   language is shown. Numbers, structure and proper nouns stay single/shared. */
html[data-lang="en"] .t-ru,
html[data-lang="ru"] .t-en{ display:none !important; }

/* nav switch — segmented EN | RU, styled to match #themeBtn */
.lang-toggle{
  display:inline-flex; align-items:center; flex:none; margin-left:4px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  border:1px solid var(--panel-edge); border-radius:4px; overflow:hidden;
  transition:border-color .3s;
}
.lang-toggle:hover{ border-color:var(--amber); }
.lang-toggle button{
  font:inherit; letter-spacing:inherit; cursor:pointer;
  color:var(--muted); background:transparent; border:0;
  padding:5px 9px; line-height:1; transition:color .25s, background-color .25s;
}
.lang-toggle button:hover{ color:var(--paper); }
.lang-toggle button[aria-pressed="true"]{
  color:var(--amber);
  background:color-mix(in srgb, var(--amber) 15%, transparent);
}

/* ============================================================ HERO */
.hero{
  min-height:100vh; min-height:100svh; padding:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
  cursor:crosshair;
  /* own stacking context + clip so parallax content can't bleed onto the tape below */
  isolation:isolate; overflow:hidden; z-index:1;
}
/* hero is off-limits: pin the variables it reads back to their pre-steel values
   so the steel/metallic retune of the rest of the page never reaches it.
   color: is re-asserted so the h1 re-resolves --paper at hero scope. */
html[data-theme="light"] .hero{
  --paper:#2A2E38; --muted:#6A7180;
  --panel-t:rgba(253,252,249,.95); --panel-edge:#E4DFD5;
  color:var(--paper);
}
/* hero keeps its original backdrop even as the page background whitens:
   an opaque cream layer pinned to --hero-bg, painted behind the field canvas */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 70% -10%, var(--hero-beam), transparent 60%),
    var(--hero-bg);
}
#field{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }

.xhair{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; z-index:2; }
.hero:hover .xhair{ opacity:1; }
.xhair .vline,.xhair .hline{ position:absolute; background:var(--glow); opacity:.5; }
.xhair .vline{ top:0; bottom:0; width:1px; }
.xhair .hline{ left:0; right:0; height:1px; }
.xhair .tag{
  position:absolute; transform:translate(14px, 14px);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--amber); background:var(--panel-t);
  border:1px solid var(--panel-edge); padding:4px 8px; border-radius:3px;
  white-space:nowrap;
}
@media (hover:none){ .xhair{ display:none } }

.hero-body{ position:relative; z-index:3; padding-bottom:clamp(28px, 5vh, 64px); }
.nw{ white-space:nowrap; }

.hero-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.hero-eyebrow em{ font-style:normal; color:var(--amber); }

h1{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(44px, 9.2vw, 120px);
  line-height:.98; letter-spacing:-.04em;
  text-transform:uppercase;
}
h1 .line{ display:block; overflow:hidden; }
h1 .ch{
  display:inline-block; transform:translateY(115%);
  animation:rise .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(.35s + var(--i) * .035s);
}
@keyframes rise{ to{ transform:translateY(0) } }
h1 .accent{ color:var(--ut); }

.boot{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; color:var(--green);
  margin-top:16px; min-height:1.4em;
  opacity:0; animation:fadeUp .6s ease .75s forwards;
}
.boot .cursor{ display:inline-block; width:.6em; height:1.1em; background:var(--green); vertical-align:text-bottom; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

.hero-sub{
  margin-top:16px; max-width:52ch; color:var(--muted); font-size:clamp(15px, 1.6vw, 18px);
  opacity:0; animation:fadeUp 1s ease .9s forwards;
}
.hero-sub b{ color:var(--paper); font-weight:600; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.stats{
  margin-top:clamp(28px, 4.5vh, 52px);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--panel-edge); border:1px solid var(--panel-edge);
  opacity:0; animation:fadeUp 1s ease 3.05s forwards; /* lands as the regression completes */
}
.stat{ background:var(--panel-t); padding:16px 18px; transition:background-color .6s; }
.stat.flash{ background:rgba(147,203,169,.12); transition:none; }
.stat .n{
  font-family:var(--mono); font-size:clamp(22px, 2.8vw, 32px); font-weight:700;
  color:var(--amber); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stat .n .up{ color:var(--green); font-size:.6em; vertical-align:.25em; }
.stat .l{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
/* phones: 2×2 grid, but compacted so the stat strip stays lean and the whole
   hero (name → sub → stats) reads like the desktop version instead of bulking up */
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); margin-top:clamp(14px, 2vh, 22px); }
  .stat{ padding:6px 9px; }
  .stat .n{ font-size:12px; }
  .stat .n .up{ font-size:.5em; }
  .stat .l{ font-size:7px; letter-spacing:.06em; margin-top:1px; }
}

.scroll-cue{
  position:absolute; right:var(--pad); bottom:24px; z-index:3;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted);
  writing-mode:vertical-rl; display:flex; align-items:center; gap:10px;
  opacity:0; animation:fadeUp 1s ease 3.5s forwards;
}
.scroll-cue::after{
  content:""; width:1px; height:48px; background:linear-gradient(var(--amber), transparent);
  animation:drip 1.8s ease-in-out infinite;
}
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } 51%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }
@media (max-width:760px){ .scroll-cue{ display:none } }

/* ============================================================ TICKER */
.tape{
  border-top:1px solid var(--panel-edge); border-bottom:1px solid var(--panel-edge);
  background:var(--tape-bg); overflow:hidden; position:relative; z-index:1;
}
.tape-track{ display:flex; width:max-content; animation:tape 36s linear infinite; }
.tape:hover .tape-track, .tape:focus-within .tape-track, .tape.paused .tape-track{ animation-play-state:paused; }
.tape-list{ display:flex; align-items:center; gap:0; padding:13px 0; }
.tick{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; white-space:nowrap;
  padding:0 28px; border-right:1px solid var(--panel-edge);
  color:var(--paper);
}
.tick .sym{ color:var(--muted); margin-right:10px; }
.tick .chg{ color:var(--green); margin-left:10px; }
.tick .chg.dn{ color:var(--red); }
@keyframes tape{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ============================================================ TRAJECTORY */
.traj{ position:relative; }
#trajsvg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
#trajpath{
  fill:none; stroke:var(--amber); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px var(--glow));
}
#trajghost{ fill:none; stroke:var(--faint); stroke-width:1; stroke-dasharray:3 6; }

.jobs{ display:flex; flex-direction:column; gap:clamp(40px, 6vw, 72px); margin-top:clamp(40px, 6vw, 72px); position:relative; perspective:1200px; }
/* 3-column grid: cards left/right, an 88px center channel owns the line + nodes */
.job{ display:grid; grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr); align-items:start; position:relative; }
.job .spacer{ min-height:1px; }
.job .card{ grid-column:1; grid-row:1; }
.job .spacer{ grid-column:3; grid-row:1; }
.job:nth-child(even) .card{ grid-column:3; grid-row:1; }
.job:nth-child(even) .spacer{ grid-column:1; grid-row:1; }

.t-node{
  position:absolute; left:calc(50% - 22px); top:26px; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:var(--ink); border:2px solid var(--muted);
  transition:border-color .4s, box-shadow .4s, background .4s;
  z-index:2;
}
.job:nth-child(even) .t-node{ left:calc(50% + 22px); }
/* date flag riding the drawn tip of the trajectory */
.tip-tag{
  position:absolute; z-index:3; pointer-events:none;
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  color:var(--ink); background:var(--amber); padding:2px 7px; border-radius:3px;
  transform:translate(14px,-50%); white-space:nowrap;
  opacity:0; transition:opacity .3s;
}
.tip-tag.on{ opacity:1; }
.t-node.lit{
  border-color:var(--amber); background:var(--amber);
  box-shadow:0 0 0 5px rgba(233,190,140,.16), 0 0 18px var(--glow);
}

.card{
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:6px;
  padding:clamp(20px, 3vw, 30px); position:relative;
  transition:border-color .35s, background-color .5s;
}
/* no lift — the reticle corner-brackets (via data-cursor) frame the card on hover */
.card:hover{ border-color:var(--blue-dim); }
.card .date{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; color:var(--blue);
  text-transform:uppercase; margin-bottom:10px;
}
.card h3{ font-size:20px; font-weight:650; letter-spacing:-.01em; }
.card .org{ color:var(--muted); font-family:var(--mono); font-size:13px; margin-top:2px; }
.card ul{ margin-top:14px; list-style:none; display:flex; flex-direction:column; gap:9px; }
.card li{ padding-left:20px; position:relative; color:var(--body-text); font-size:15px; line-height:1.55; }
.card li::before{ content:"▸"; position:absolute; left:0; color:var(--amber-dim); font-size:12px; top:3px; }
.card li b{ color:var(--paper); font-weight:600; }

@media (max-width:860px){
  .job{ grid-template-columns:1fr; padding-left:34px; }
  .job .card, .job:nth-child(even) .card{ grid-column:1; }
  .job .spacer{ display:none; }
  /* keep translateX(-50%) so the drawn line (centerOf() in home.js assumes it)
     runs through the dot centers; left:7px places the 14px dot flush at x=0 */
  .job .t-node, .job:nth-child(even) .t-node{ left:7px; transform:translateX(-50%); }
  .tip-tag{ display:none; }
}

/* ============================================================ PROJECTS (index) */
.proj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:clamp(36px, 5vw, 56px); perspective:1200px; }
@media (max-width:860px){ .proj-grid{ grid-template-columns:1fr } }

.proj{
  background:var(--metal, var(--panel-t)); border:1px solid var(--panel-edge); border-radius:6px;
  padding:clamp(22px, 3vw, 30px); position:relative; overflow:hidden; cursor:pointer;
  transition:border-color .35s, background-color .5s;
  transform-style:preserve-3d; will-change:transform;
}
.proj:hover{ border-color:var(--amber-dim); }
.proj .glare{
  position:absolute; inset:-40%; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(360px 360px at var(--gx,50%) var(--gy,50%), rgba(233,190,140,.09), transparent 60%);
}
html[data-theme="light"] .proj .glare{ background:radial-gradient(360px 360px at var(--gx,50%) var(--gy,50%), rgba(191,87,0,.07), transparent 60%); }
.proj:hover .glare{ opacity:1; }
.proj .pid{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted); }
.proj h3{ font-size:21px; font-weight:650; margin-top:10px; letter-spacing:-.01em; }
.proj p{ color:var(--muted); font-size:15px; margin-top:10px; }
.proj .spark{ display:block; width:100%; height:56px; margin-top:18px; }
.spark-read{
  position:absolute; right:20px; top:20px; display:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.proj .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--blue);
  border:1px solid var(--blue-dim); border-radius:3px; padding:3px 9px;
}
.proj .go{
  position:absolute; top:20px; right:20px; font-family:var(--mono); color:var(--muted);
  transition:transform .3s, color .3s;
}
.proj:hover .go{ transform:translate(4px,-4px); color:var(--amber); }

/* ============================================================ LONGHORN (sticky ambient background)
   Fixed full-viewport layer behind all content; fades in past the hero.
   Opacity ramps via the .show class (driven by scroll in app.js). */
.lh-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .2s linear;   /* scroll sets opacity; short smoothing only */
}
#asciiField{ display:block; width:100%; height:100%; }

/* ============================================================ PANELS */
.edu-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; margin-top:clamp(36px,5vw,56px); perspective:1200px; }
@media (max-width:860px){ .edu-grid{ grid-template-columns:1fr } }
.panel{
  background:var(--metal, var(--panel-t)); border:1px solid var(--panel-edge); border-radius:6px;
  padding:clamp(22px,3vw,32px); position:relative;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s, background-color .5s;
}
/* no lift — the reticle corner-brackets frame the panel on hover */
.panel:hover{ border-color:var(--blue-dim); }
.panel h3{ font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.panel .big{ font-size:20px; font-weight:650; }
.panel .sub{ color:var(--muted); font-size:14.5px; margin-top:4px; }
.panel .row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--faint); font-size:14.5px; }
.panel .row:last-child{ border-bottom:none; }
.panel .row > span:last-child{ text-align:right; }
.panel .row .k{ color:var(--muted); font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; }
.gpa{ font-variant-numeric:tabular-nums; color:var(--green); font-family:var(--mono); }
.pub{ padding:11px 0; border-bottom:1px dashed var(--faint); }
.pub-t{ font-size:14.5px; color:var(--paper); line-height:1.4; }
.pub-t a{ color:var(--paper); border-bottom:1px solid var(--blue-dim); transition:color .25s, border-color .25s; }
.pub-t a:hover{ color:var(--blue); border-color:var(--blue); }
.pub-t .pub-go{ color:var(--blue); font-family:var(--mono); font-size:.85em; opacity:0; transition:opacity .25s; }
.pub-t a:hover .pub-go{ opacity:1; }
.pub-m{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted); margin-top:3px; }

/* ============================================================ CONTACT */
.contact{ text-align:left; }
.mail{
  display:inline-block; font-family:var(--mono); font-weight:700;
  font-size:clamp(22px, 4.6vw, 58px); letter-spacing:-.03em; color:var(--paper);
  margin-top:18px; position:relative; line-height:1.15; word-break:break-all;
  will-change:transform;
}
.mail::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; width:100%;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.mail:hover{ color:var(--amber); }
.mail:hover::after{ transform:scaleX(1); }
.contact-meta{
  display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:34px;
  font-family:var(--mono); font-size:13px; color:var(--muted); letter-spacing:.06em;
}
.contact-meta a{ color:var(--paper); border-bottom:1px solid var(--faint); transition:color .25s, border-color .25s; }
.contact-meta a:hover{ color:var(--amber); border-color:var(--amber); }

/* résumé download card — a small first-page preview + link */
.resume{ margin-top:36px; }
.resume-card{
  display:inline-flex; align-items:center; gap:18px; max-width:100%;
  background:var(--metal, var(--panel-t)); border:1px solid var(--panel-edge); border-radius:8px;
  padding:14px 18px; position:relative; overflow:hidden;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.resume-card:hover{ border-color:var(--blue-dim); transform:translateY(-2px); box-shadow:0 14px 34px -20px rgba(31,41,55,.5); }
.resume-thumb{
  flex:none; width:58px; height:76px; border-radius:3px; overflow:hidden;
  border:1px solid var(--panel-edge); box-shadow:0 4px 12px -6px rgba(31,41,55,.35); background:#fff;
}
.resume-thumb img{ display:block; width:100%; height:100%; }
.resume-meta{ display:flex; flex-direction:column; min-width:0; }
.resume-k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
.resume-t{ font-size:15.5px; font-weight:650; color:var(--paper); margin-top:3px; letter-spacing:-.01em; }
.resume-go{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--blue); margin-top:8px; }
.resume-card:hover .resume-go{ text-decoration:underline; }

footer{
  border-top:1px solid var(--panel-edge); padding:26px 0 40px;
  font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.08em;
  position:relative; z-index:1;
}
.foot-in{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   CASE-STUDY PAGES (projects/*.html)
   ============================================================ */
.case-hero{ padding:clamp(140px, 20vh, 220px) 0 clamp(48px, 7vw, 84px); position:relative; }
.case-hero .back{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--muted);
  display:inline-block; margin-bottom:26px; transition:color .25s, transform .25s;
}
.case-hero .back:hover{ color:var(--amber); transform:translateX(-4px); }
.case-title{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px, 6.4vw, 76px); line-height:1.02; letter-spacing:-.03em; margin-top:12px;
}
.case-thesis{ margin-top:18px; color:var(--muted); font-size:clamp(16px,1.8vw,19px); max-width:60ch; }
.case-thesis b{ color:var(--paper); }
.case-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--panel-edge);
  border:1px solid var(--panel-edge); margin-top:clamp(28px,4vw,44px);
}
.case-meta .m{ background:var(--panel-t); padding:14px 16px; }
.case-meta .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
.case-meta .v{ font-family:var(--mono); font-size:14px; color:var(--paper); margin-top:5px; }
@media (max-width:760px){ .case-meta{ grid-template-columns:repeat(2,1fr) } }

.case-section{ padding:clamp(40px, 6vw, 72px) 0; }
.case-section .prose{ max-width:68ch; color:var(--body-text); margin-top:18px; display:flex; flex-direction:column; gap:16px; }
.case-section .prose b{ color:var(--paper); }

/* terminal log — the approach, typed line by line */
.termlog{
  background:var(--panel-t); border:1px solid var(--panel-edge); border-radius:6px;
  padding:clamp(20px,3vw,30px); margin-top:24px; font-family:var(--mono); font-size:14px;
  display:flex; flex-direction:column; gap:12px;
}
.termlog .ln{ display:flex; gap:14px; opacity:0; transform:translateX(-8px); transition:opacity .5s ease, transform .5s ease; }
.termlog .ln.on{ opacity:1; transform:none; }
.termlog .p{ color:var(--green); flex-shrink:0; }
.termlog .c{ color:var(--body-text); }
.termlog .c b{ color:var(--amber); font-weight:600; }

/* figures */
.fig{
  background:var(--panel-t); border:1px solid var(--panel-edge); border-radius:6px;
  padding:clamp(18px,2.6vw,28px); margin-top:26px; position:relative; overflow:hidden;
}
.fig .fig-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; }
.fig .fig-id{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--blue); }
.fig .fig-cap{ font-size:13.5px; color:var(--muted); }
.fig canvas{ display:block; width:100%; height:300px; margin-top:14px; }
.fig .legend{ display:flex; gap:20px; margin-top:12px; font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.06em; flex-wrap:wrap; }
.legend .sw{ display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:7px; }
.fig .readout{
  position:absolute; pointer-events:none; display:none;
  font-family:var(--mono); font-size:11px; color:var(--amber);
  background:var(--panel-t); border:1px solid var(--panel-edge); border-radius:3px;
  padding:4px 8px; white-space:nowrap; z-index:3;
}
@media (max-width:760px){ .fig canvas{ height:230px } }

/* results tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
@media (max-width:760px){ .tiles{ grid-template-columns:1fr } }
.tile{
  background:var(--metal, var(--panel-t)); border:1px solid var(--panel-edge); border-radius:6px; padding:20px;
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s;
}
.tile:hover{ transform:translateY(-4px); border-color:var(--amber-dim); }
.tile .n{ font-family:var(--mono); font-size:clamp(26px,3vw,34px); font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; }
.tile .l{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

/* prev / next */
.case-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin:clamp(48px,8vw,90px) 0 0; padding-top:32px; border-top:1px solid var(--panel-edge);
}
.case-nav a{
  font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  padding:18px; border:1px solid var(--panel-edge); border-radius:6px;
  transition:border-color .3s, transform .3s;
  display:flex; flex-direction:column; gap:6px;
}
.case-nav a:hover{ border-color:var(--amber); transform:translateY(-3px); }
.case-nav .dir{ color:var(--muted); font-size:11px; letter-spacing:.16em; }
.case-nav .next{ text-align:right; }
.placeholder-note{
  margin-top:26px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--muted); border:1px dashed var(--faint); border-radius:4px; padding:10px 14px;
}

/* focus + a11y */
a:focus-visible, button:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100; background:var(--amber); color:var(--ink);
  padding:10px 16px; font-family:var(--mono); font-size:13px;
}
.skip:focus{ left:0; }

/* ============================================================ BOOT GATE */
#bootgate{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--mono); opacity:1; transition:opacity .45s ease;
}
#bootgate.wipe{ opacity:0; }
#bootgate .bg-inner{ width:min(440px, 84vw); }
#bootgate .bg-log{
  color:var(--green); font-size:12.5px; line-height:1.7; letter-spacing:.06em;
  min-height:5.4em; white-space:pre-wrap; margin-bottom:14px;
}
#bootgate .bg-sn{
  color:var(--amber); font-variant-numeric:tabular-nums; font-weight:700; line-height:1;
  font-size:clamp(44px, 10vw, 84px); letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:.16em;
}
#bootgate .bg-lbl{ font-size:.26em; letter-spacing:.24em; color:var(--muted); align-self:center; font-weight:600; }
#bootgate .bg-pct{ font-size:.5em; color:var(--amber-dim); }
#bootgate .bg-bar{
  position:absolute; left:0; top:0; height:2px; width:100%;
  background:var(--amber); box-shadow:0 0 12px var(--glow); transform:translateY(0);
}
#bootgate.wipe .bg-bar{ transform:translateY(100vh); transition:transform .45s ease; }
/* hold the headline rise until the gate opens */
html.gating h1 .ch{ animation-play-state:paused; }

/* ============================================================ RETICLE CURSOR */
#reticle{
  position:fixed; left:0; top:0; width:0; height:0; z-index:9000;
  pointer-events:none; opacity:0; transition:opacity .25s ease; will-change:transform;
}
#reticle.on{ opacity:1; }
#reticle.hide{ opacity:0; }
#reticle .r-plus{ position:absolute; mix-blend-mode:difference; }
#reticle .r-plus i{ position:absolute; display:block; background:#fff; transition:opacity .2s ease; }
#reticle .v{ left:-.5px; top:-11px; width:1px; height:22px; }
#reticle .h{ left:-11px; top:-.5px; width:22px; height:1px; }
#reticle .dot{ left:-1px; top:-1px; width:2px; height:2px; border-radius:50%; }
#reticle .c{ width:9px; height:9px; background:transparent; border:1px solid #fff; opacity:0; }
#reticle .c.tl{ border-right:0; border-bottom:0; left:calc(var(--bw,22px) / -2); top:calc(var(--bh,22px) / -2); }
#reticle .c.tr{ border-left:0;  border-bottom:0; left:calc(var(--bw,22px) / 2 - 9px); top:calc(var(--bh,22px) / -2); }
#reticle .c.bl{ border-right:0; border-top:0;    left:calc(var(--bw,22px) / -2); top:calc(var(--bh,22px) / 2 - 9px); }
#reticle .c.br{ border-left:0;  border-top:0;    left:calc(var(--bw,22px) / 2 - 9px); top:calc(var(--bh,22px) / 2 - 9px); }
#reticle.snap .v, #reticle.snap .h, #reticle.snap .dot{ opacity:0; }
#reticle.snap .c{ opacity:.9; }
#reticle.pulse .r-plus{ animation:retpulse .2s ease; }
@keyframes retpulse{ 50%{ transform:scale(.78); } }
#reticle .r-label{
  position:absolute; left:16px; top:12px; white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--ink); background:var(--amber); padding:2px 6px; border-radius:3px;
}
#reticle .r-label:empty{ display:none; }

/* ============================================================
   LBO / DEAL MODEL — interactive controls (projects/lbo-model.html)
   The site's first input UI. Terminal-native: mono labels, amber
   accents, square sliders, live tabular readouts. All themed via
   the existing custom properties, so day/night just works.
   ============================================================ */
.model-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:20px; margin-top:26px; align-items:start; }
@media (max-width:900px){ .model-grid{ grid-template-columns:1fr; } }

.lbo-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px; }
.lbo-head .t{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
.lbo-reset{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); background:transparent; border:1px solid var(--panel-edge); border-radius:4px;
  padding:5px 10px; cursor:pointer; transition:border-color .25s, color .25s;
}
.lbo-reset:hover{ color:var(--amber); border-color:var(--amber-dim); }

/* one assumption row: label + live value, slider beneath */
.ctrl{ position:relative; padding:12px 0; border-bottom:1px dashed var(--faint); }
.ctrl:last-child{ border-bottom:none; }
.ctrl .ctrl-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; }
.ctrl label{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ctrl .ctrl-val{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--amber); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* directional caret — flashes ▲/▼ on change, faded out by JS after ~500ms */
.ctrl .ctrl-val .cv-caret{ display:inline-block; width:.8em; margin-left:2px; font-size:10px; }
.ctrl .ctrl-val .cv-caret.up{ color:var(--green); }
.ctrl .ctrl-val .cv-caret.up::after{ content:"▲"; }
.ctrl .ctrl-val .cv-caret.down{ color:var(--red); }
.ctrl .ctrl-val .cv-caret.down::after{ content:"▼"; }
@media (prefers-reduced-motion: no-preference){
  .ctrl .ctrl-val .cv-caret.up, .ctrl .ctrl-val .cv-caret.down{ animation:cvCaret .5s ease both; }
  @keyframes cvCaret{ 0%{ opacity:0; transform:translateY(2px); } 30%{ opacity:1; transform:none; } 100%{ opacity:.55; } }
}

/* value bubble — rides the thumb (left:var(--fill)); shown on hover / focus / drag */
.ctrl-bubble{
  position:absolute; left:var(--fill,0%); bottom:30px; transform:translateX(-50%) translateY(4px);
  font-family:var(--mono); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--amber); background:var(--panel-t); border:1px solid var(--panel-edge); border-radius:4px;
  padding:2px 7px; white-space:nowrap; pointer-events:none; z-index:3;
  opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease;
}
.ctrl-bubble::after{
  content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  border:4px solid transparent; border-bottom:0; border-top-color:var(--panel-edge);
}
.ctrl:hover .ctrl-bubble, .ctrl:focus-within .ctrl-bubble, .ctrl.dragging .ctrl-bubble{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

/* range slider — cross-browser, terminal square thumb */
.ctrl input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:16px; background:transparent; cursor:pointer; display:block; }
.ctrl input[type=range]::-webkit-slider-runnable-track{ height:3px; border-radius:2px; background:linear-gradient(90deg, var(--amber) var(--fill,0%), var(--faint) var(--fill,0%)); }
.ctrl input[type=range]::-moz-range-track{ height:3px; border-radius:2px; background:linear-gradient(90deg, var(--amber) var(--fill,0%), var(--faint) var(--fill,0%)); }
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:15px; height:15px; margin-top:-6px; border-radius:2px;
  background:var(--amber); border:1px solid var(--ink); box-shadow:0 0 0 0 var(--glow); transition:box-shadow .2s;
}
.ctrl input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:2px; background:var(--amber); border:1px solid var(--ink);
  box-shadow:0 0 0 0 var(--glow); transition:box-shadow .2s;
}
.ctrl input[type=range]:hover::-webkit-slider-thumb,
.ctrl input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 5px var(--glow); }
.ctrl input[type=range]:hover::-moz-range-thumb,
.ctrl input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 5px var(--glow); }
.ctrl input[type=range]:focus{ outline:none; }
.ctrl input[type=range]:focus-visible{ outline:2px solid var(--amber); outline-offset:4px; border-radius:3px; }

/* live returns readouts */
.lbo-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--panel-edge); border:1px solid var(--panel-edge); border-radius:6px; overflow:hidden; margin-top:12px; }
.lbo-kpi{ background:var(--panel); padding:15px 16px; }
.lbo-kpi .kpi-l{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.lbo-kpi .kpi-v{ font-family:var(--mono); font-size:clamp(21px,3vw,28px); font-weight:700; color:var(--amber); font-variant-numeric:tabular-nums; margin-top:6px; line-height:1; transition:color .3s; }
.lbo-kpi.big .kpi-v{ font-size:clamp(30px,5vw,42px); }
.lbo-kpi .kpi-v.pos{ color:var(--green); }
.lbo-kpi .kpi-v.neg{ color:var(--red); }

/* Δ-vs-base-case badge — compact second line under IRR / MOIC / exit-leverage */
.lbo-kpi .kpi-delta{
  display:none; margin-top:6px; font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  font-variant-numeric:tabular-nums; color:var(--muted); line-height:1.3; max-width:100%; overflow-wrap:anywhere;
}
.lbo-kpi .kpi-delta.on{ display:block; }
.lbo-kpi .kpi-delta.pos{ color:var(--green); }
.lbo-kpi .kpi-delta.neg{ color:var(--red); }

.lbo-note{ margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); border-left:2px solid var(--amber-dim); padding:4px 0 4px 12px; }

/* per-figure takeaway — what to look for, tight under .fig-cap */
.fig-take{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.02em; line-height:1.45; color:var(--body-text); margin-top:7px; }
:root[data-theme="dark"] .fig-take{ color:var(--paper); }

/* taller / shorter figure variants used on this page */
.fig.fig-tall canvas{ height:400px; }
.fig.fig-short canvas{ height:210px; }
@media (max-width:760px){ .fig.fig-tall canvas{ height:330px; } .fig.fig-short canvas{ height:190px; } }

/* interactive polish — hover glow on figures, live "reprice" flash on the KPIs */
.fig{ transition:border-color .35s, box-shadow .4s; }
.fig:hover{ border-color:var(--amber-dim); box-shadow:0 16px 44px -24px rgba(0,0,0,.5); }
.fig canvas{ cursor:crosshair; }
.lbo-kpi{ transition:background-color .3s; }
.lbo-kpi:hover{ background:var(--panel-t); }
.lbo-kpi .kpi-v.flash{ animation:kpiReprice .5s cubic-bezier(.22,1,.36,1); }
@keyframes kpiReprice{ 0%{ transform:translateY(-4px); opacity:.55; } 100%{ transform:none; opacity:1; } }
.lbo-reset:active{ transform:translateY(1px); }

/* rich hover tooltip — structured card built by richReadout() (lbo-model.html).
   Scoped under .readout.rich AND a page marker (.lbo) so it can never bleed
   onto other project pages that also use a .readout.rich card. */
.readout.rich.lbo{
  max-width:230px; padding:9px 11px; white-space:normal; font-variant-numeric:tabular-nums;
  background:var(--panel-t); border:1px solid var(--panel-edge); border-radius:6px;
  color:var(--body-text); box-shadow:0 12px 30px -18px rgba(0,0,0,.55);
}
.readout.rich.lbo .r-title{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.readout.rich.lbo .r-div{ height:1px; background:var(--panel-edge); margin:7px 0; }
.readout.rich.lbo .r-rows{ display:grid; grid-template-columns:auto auto; gap:4px 16px; }
.readout.rich.lbo .r-rows .label{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:left; }
.readout.rich.lbo .r-rows .val{ font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--paper); text-align:right; }
.readout.rich.lbo .r-rows .val.pos{ color:var(--green); }
.readout.rich.lbo .r-rows .val.neg{ color:var(--red); }
.readout.rich.lbo .r-rows .val.amber{ color:var(--amber); }
.readout.rich.lbo .r-note{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--muted); margin-top:8px; line-height:1.45; font-style:italic; }
@media (prefers-reduced-motion: no-preference){
  .readout.rich.lbo{ animation:richIn .16s cubic-bezier(.22,1,.36,1); }
  @keyframes richIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
}

/* FIG 00 — radial IRR gauge (hero of the Returns panel; lives inside a .panel,
   so it drops the outer .fig frame and just borrows the tooltip plumbing) */
.gauge-fig{
  background:none; border:0; border-radius:0; padding:0; margin:14px 0 6px;
  position:relative; overflow:visible;
}
.gauge-fig:hover{ box-shadow:none; border-color:transparent; }
.gauge-fig canvas{ display:block; width:100%; height:220px; margin:0; cursor:grab; }
.gauge-fig canvas.grabbing{ cursor:grabbing; }
@media (max-width:760px){ .gauge-fig canvas{ height:190px; } }
.gauge-fig .readout{ z-index:5; }

.gauge-chip{
  display:block; text-align:center; margin-top:2px; min-height:1.3em;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums; transition:color .3s;
}
.gauge-chip.cleared{ color:var(--green); }
.gauge-chip.missed{ color:var(--red); }
@media (prefers-reduced-motion: no-preference){
  .gauge-chip.beat{ animation:gaugePulse .6s cubic-bezier(.22,1,.36,1); }
  @keyframes gaugePulse{ 0%{ transform:scale(.9); opacity:.45; } 40%{ transform:scale(1.06); opacity:1; } 100%{ transform:none; } }
}

/* recommendation / verdict */
.verdict{ background:var(--panel-t); border:1px solid var(--panel-edge); border-left:3px solid var(--amber); border-radius:6px; padding:clamp(20px,3vw,28px); margin-top:24px; }
.verdict .v-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
.verdict .v-call{ font-family:var(--mono); font-size:clamp(19px,2.8vw,26px); font-weight:700; letter-spacing:-.01em; margin-top:8px; color:var(--paper); line-height:1.25; }
.verdict .v-sub{ color:var(--body-text); margin-top:12px; max-width:64ch; }
.verdict .v-sub b{ color:var(--paper); }

.rec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
@media (max-width:760px){ .rec-grid{ grid-template-columns:1fr; } }
.rec-list h4{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:12px; }
.rec-list ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.rec-list li{ position:relative; padding-left:20px; color:var(--body-text); font-size:15px; line-height:1.55; }
.rec-list li::before{ content:"▸"; position:absolute; left:0; top:2px; color:var(--amber-dim); font-size:12px; }
.rec-list li b{ color:var(--paper); font-weight:600; }
.rec-list.risk li::before{ content:"▲"; color:var(--red); font-size:10px; top:4px; }

/* ============================================================
   RESEARCH PAPER — the long-form write-up (projects/lbo-model.html #paper)
   Reads like a document: readable measure, mono headings, ledger tables,
   sans body for 15 pages of legibility. Fully theme-aware via tokens.
   ============================================================ */
.paper-doc{ max-width:760px; margin:26px auto 0; }
.paper-head{ border-top:2px solid var(--paper); padding-top:22px; }
.paper-title{ font-family:var(--mono); font-weight:700; font-size:clamp(22px,3vw,31px); letter-spacing:-.01em; line-height:1.18; color:var(--paper); }
.paper-byline{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:12px; }
.paper-abstract{ margin-top:22px; padding:18px 20px; background:var(--panel-t); border:1px solid var(--panel-edge); border-left:3px solid var(--amber); border-radius:5px; }
.paper-abstract .paper-lbl{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:8px; }
.paper-abstract p{ font-size:15px; line-height:1.7; color:var(--body-text); }

.paper-h{ font-family:var(--mono); font-weight:650; font-size:clamp(17px,2vw,20px); letter-spacing:-.005em; color:var(--paper); margin:42px 0 6px; padding-top:16px; border-top:1px solid var(--panel-edge); scroll-margin-top:80px; }
.paper-sh{ font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--amber-dim); margin:26px 0 2px; }
.paper-doc > p{ font-size:15.5px; line-height:1.72; color:var(--body-text); margin-top:14px; max-width:72ch; }
.paper-doc p b, .paper-doc p strong{ color:var(--paper); font-weight:650; }
.paper-doc em, .paper-doc i{ color:var(--paper); font-style:italic; }

.paper-tbl-wrap{ overflow-x:auto; margin:22px 0 4px; -webkit-overflow-scrolling:touch; }
.paper-tbl{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; }
.paper-tbl caption{ caption-side:top; text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin-bottom:10px; }
.paper-tbl th, .paper-tbl td{ text-align:left; padding:8px 12px; border-bottom:1px solid var(--panel-edge); vertical-align:top; }
.paper-tbl thead th{ color:var(--muted); font-weight:600; letter-spacing:.04em; border-bottom:1px solid var(--amber-dim); white-space:nowrap; }
.paper-tbl tbody td{ color:var(--body-text); }
.paper-tbl tbody td:first-child{ color:var(--paper); }
.paper-tbl tbody tr:last-child td{ border-bottom:none; }
.paper-tbl tbody tr:hover td{ background:var(--panel-t); }

.paper-refs{ margin:16px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.paper-refs li{ font-family:var(--mono); font-size:12px; line-height:1.55; color:var(--muted); word-break:break-word; }
.paper-refs li i{ color:var(--body-text); font-style:italic; }

@media (max-width:760px){
  .paper-doc{ margin-top:16px; }
  .paper-doc > p{ font-size:15px; }
  .paper-tbl{ font-size:11.5px; }
}

/* ---------- paper reader: PDF / Kindle-style paginated viewer ---------- */
.reader{ max-width:940px; margin:26px auto 0; }
.reader-viewport{ position:relative; }
.reader-bar{ display:none; }
/* paginated mode is switched on by JS; without JS the paper just flows as a normal document */
.reader.paginated .reader-viewport{
  height:clamp(560px, 82vh, 980px); overflow:hidden; padding:30px 34px;   /* inset lives on the fixed frame, not on the moving columns */
  background:var(--panel-t); border:1px solid var(--panel-edge); border-radius:8px;
  box-shadow:0 20px 60px -34px rgba(0,0,0,.55);
}
.reader.paginated .reader-pages{
  height:100%; box-sizing:border-box; column-fill:auto; -webkit-column-fill:auto;
  padding:0; margin:0; will-change:transform; transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.reader.paginated .reader-bar{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:16px; }
/* inside the reader the document fills the page column (override the scroll-doc measure) */
.reader .paper-doc{ max-width:none; margin:0; }
.reader .paper-doc > p{ max-width:none; }
/* the first page's top rule already frames the title; drop the doc's own top margin */
.reader.paginated .paper-head{ border-top:none; padding-top:0; }
.reader-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); background:transparent; border:1px solid var(--panel-edge); border-radius:6px;
  padding:9px 18px; cursor:pointer; transition:border-color .25s, color .25s, opacity .25s;
}
.reader-btn:hover:not(:disabled){ border-color:var(--amber); color:var(--amber); }
.reader-btn:disabled{ opacity:.32; cursor:default; }
.reader-count{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--muted); font-variant-numeric:tabular-nums; min-width:66px; text-align:center; }
.reader:focus-visible{ outline:2px solid var(--amber); outline-offset:5px; border-radius:8px; }
/* keep tables/figures whole and headings attached to their text across page breaks */
.reader.paginated .paper-tbl-wrap, .reader.paginated figure{ break-inside:avoid; }
.reader.paginated .paper-h, .reader.paginated .paper-sh{ break-after:avoid; }
.reader.paginated .paper-tbl{ font-size:11.5px; }
@media (max-width:760px){ .reader.paginated .reader-viewport{ height:clamp(460px, 72vh, 720px); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
  h1 .ch{ transform:none; }
  .hero-sub, .stats, .scroll-cue, .boot{ opacity:1; }
  .termlog .ln{ opacity:1; transform:none; }
  /* the tape stops animating — make it scrollable so no skill is lost */
  .tape{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tape-track{ width:auto; }
}

/* ============================================================
   APPLYMAXXING FINANCIAL MODEL (projects/applymaxxing.html)
   A live, driver-based SaaS model. Reuses the deal-model control
   vocabulary above (.ctrl sliders, .lbo-kpi tiles, .verdict,
   .rec-list) and adds only what's new: scenario tabs, a wide KPI
   strip, the sticky assumptions layout, chart legends. All themed
   via the existing custom properties — day/night just works.
   ============================================================ */

/* "LIVE" pulse in the hero eyebrow */
.live-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green);
  margin-right:7px; vertical-align:middle; animation:livepulse 2.4s ease-in-out infinite;
}
@keyframes livepulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(147,203,169,.55); } 50%{ box-shadow:0 0 0 6px rgba(147,203,169,0); } }

/* seed-data chips under the hero thesis — "these are the founder's real numbers" */
.seed-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.seed-chip{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--body-text);
  border:1px solid var(--panel-edge); border-radius:4px; padding:6px 12px; background:var(--panel-t);
}
.seed-chip b{ color:var(--amber); font-weight:600; }
.seed-chip .sk{ color:var(--muted); }

/* section rhythm on the model page */
.mx-sec{ padding:clamp(34px,5vw,60px) 0 0; }
.mx-sec > .eyebrow{ display:block; margin-bottom:16px; }
.mx-sec .sec-title{ margin-top:6px; }

/* wide KPI strip — auto-fill tiles reusing .lbo-kpi styling */
.kpi-strip{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:1px; background:var(--panel-edge); border:1px solid var(--panel-edge);
  border-radius:6px; overflow:hidden; margin-top:8px;
}
.kpi-strip .lbo-kpi{ transition:background-color .55s ease; }
.kpi-strip .lbo-kpi .kpi-v{ font-size:clamp(19px,2.3vw,25px); }
.kpi-strip .kpi-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); margin-top:6px; }
.kpi-strip .lbo-kpi.flash{ background:rgba(147,203,169,.13); transition:none; }

/* scenario segmented control BEAR / BASE / BULL */
.scn-tabs{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--panel-edge); border-radius:5px; overflow:hidden; }
.scn-tabs button{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:transparent; border:0; border-right:1px solid var(--panel-edge);
  padding:10px 6px; cursor:pointer; transition:background-color .25s, color .25s;
}
.scn-tabs button:last-child{ border-right:0; }
.scn-tabs button:hover{ color:var(--paper); }
.scn-tabs button.on{ background:var(--amber); color:var(--ink); font-weight:600; }

/* sticky assumptions panel + figures column */
.mx-layout{ display:grid; grid-template-columns:302px 1fr; gap:24px; align-items:start; margin-top:22px; }
.mx-panel{
  position:sticky; top:74px; align-self:start;
  background:var(--panel-t); border:1px solid var(--panel-edge); border-radius:6px;
  padding:16px 18px 14px; max-height:calc(100vh - 92px); overflow:auto;
}
.mx-panel .lbo-head{ margin-bottom:10px; }
.mx-panel .ctrl{ padding:11px 0; }
.mx-panel .scn-tabs{ margin-bottom:12px; }
.mx-figs{ display:flex; flex-direction:column; gap:20px; min-width:0; }
@media (max-width:960px){
  .mx-layout{ grid-template-columns:1fr; }
  .mx-panel{ position:static; max-height:none; }
}

/* chart legends — dashed "line" swatch + heatmap gradient key (reuses .legend/.sw) */
.legend .sw.dash{ height:0; border-top:2px dashed currentColor; background:none !important; border-radius:0; }
.heat-legend{ display:flex; align-items:center; gap:9px; margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted); flex-wrap:wrap; }
.heat-legend .grad{ height:10px; width:130px; border-radius:2px; border:1px solid var(--panel-edge);
  background:linear-gradient(90deg, var(--chart-grid), var(--chart-1)); }

/* recommendation list item: inline metric trigger (reuses .rec-list) */
.rec-list li .trig{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--muted); margin-top:4px; }
.rec-list li .trig b{ color:var(--amber); font-weight:600; }

/* the read (verdict) — live-updated highlighted numbers + default-alive accent */
.verdict .v-sub .hl{ color:var(--amber); font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
.verdict.alive{ border-left-color:var(--green); }
.verdict.alive .v-tag{ color:var(--green); }
.verdict.risk{ border-left-color:var(--red); }
.verdict.risk .v-tag{ color:var(--red); }

/* ---------- rich hover tooltips (opt-in via .readout.rich; base .readout untouched) ---------- */
.readout.rich{ white-space:normal; max-width:240px; line-height:1.5; padding:8px 10px; }
.readout.rich .ro-h{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); font-weight:600;
}
.readout.rich .ro-today{
  font-size:8.5px; letter-spacing:.12em; color:var(--ink); background:var(--amber);
  padding:1px 5px; border-radius:2px; font-weight:700;
}
.readout.rich .ro-r{ display:flex; align-items:center; gap:6px; margin-top:3px; color:var(--body-text); }
.readout.rich .ro-sw{ width:9px; height:9px; border-radius:2px; flex:none; }
.readout.rich .ro-lbl{ color:var(--muted); flex:1 1 auto; min-width:0; }
.readout.rich .ro-v{ color:var(--paper); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.readout.rich .ro-d{ font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.readout.rich .pos{ color:var(--green); }
.readout.rich .neg{ color:var(--red); }
.readout.rich .ro-foot{ margin-top:6px; font-size:10px; color:var(--muted); letter-spacing:.03em; }
.readout.rich .ro-spark-wrap{ margin-top:7px; }
.readout.rich .ro-spark{ display:block; }

/* ---------- KPI Δ-vs-base badge ---------- */
.kpi-delta{
  display:none; margin-top:6px; font-family:var(--mono); font-size:10px;
  letter-spacing:.03em; font-variant-numeric:tabular-nums; color:var(--muted);
}
.kpi-delta.on{ display:inline-block; }
.kpi-delta.pos{ color:var(--green); }
.kpi-delta.neg{ color:var(--red); }

/* ---------- tornado click → slider highlight (amber outline pulse) ---------- */
.ctrl.ctrl-flash{
  outline:2px solid var(--amber); outline-offset:3px; border-radius:3px;
  animation:ctrlFlash .7s ease;
}
@keyframes ctrlFlash{
  0%{ outline-color:var(--amber); box-shadow:0 0 0 0 var(--glow); }
  60%{ outline-color:var(--amber); }
  100%{ outline-color:rgba(0,0,0,0); box-shadow:0 0 0 6px rgba(0,0,0,0); }
}

/* ---------- prominent "Implied EV" hero tile in the KPI strip ---------- */
.kpi-strip .lbo-kpi.kpi-hero{
  background:linear-gradient(180deg, rgba(180,119,42,.10), transparent 70%);
  box-shadow:inset 3px 0 0 0 var(--amber);
}
.kpi-strip .lbo-kpi.kpi-hero .kpi-l{ color:var(--paper); }
.kpi-strip .lbo-kpi.kpi-hero .kpi-v{ color:var(--amber); }

/* ---------- verdict fine-print: framing caveats (honesty layer) ---------- */
.verdict .v-fine{
  margin-top:14px; padding-top:10px; border-top:1px solid var(--panel-edge);
  font-size:11.5px; line-height:1.55; color:var(--muted); letter-spacing:.01em;
}
.verdict .v-fine b{ color:var(--body-text); font-weight:600; }

/* ============================================================
   APPLYMAXXING WORKING PAPER (the long-form analysis at the
   bottom of projects/applymaxxing.html). A genuine research-
   paper look: serif body, ruled tables, hanging references,
   print-clean. Themed to the light ledger; own serif stack. */
/* ---------- paginated reader (PDF / Kindle-style page flipper) ---------- */
.reader{ max-width: 880px; margin: 0 auto; }
.reader-viewport{
  position: relative; overflow: hidden;
  height: clamp(560px, 82vh, 920px);
  padding: clamp(30px,4vw,52px) clamp(26px,4vw,54px);
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 8px 8px 0 0;
  box-shadow: 0 30px 80px -52px rgba(0,0,0,.45);
  cursor: default;
}
/* the document flows into full-viewport-wide columns; JS sets column-width/gap + slides it */
.reader-doc{
  height: 100%; column-fill: auto; -webkit-column-fill: auto;
  transition: transform .45s cubic-bezier(.22,1,.36,1); will-change: transform;
}
.reader-bar{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; background: var(--panel-t);
  border: 1px solid var(--panel-edge); border-top: none; border-radius: 0 0 8px 8px;
}
.reader-btn{
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper); background: transparent; border: 1px solid var(--panel-edge);
  border-radius: 5px; padding: 8px 16px; cursor: pointer;
  transition: border-color .25s, color .25s, background-color .25s, opacity .25s;
}
.reader-btn:hover{ border-color: var(--amber); color: var(--amber); }
.reader-btn:disabled{ opacity: .34; cursor: default; border-color: var(--panel-edge); color: var(--muted); }
.reader-status{ font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.reader-status #readerCur{ color: var(--amber); font-weight: 600; }
.reader-status .sep{ margin: 0 4px; opacity: .6; }

.paper{
  --serif: "Charter", "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-family: var(--serif); color: var(--body-text);
  font-size: 16px; line-height: 1.6; counter-reset: sec fig tab fn;
}
.paper > :first-child{ margin-top: 0; }
.paper-mast{
  font-family: var(--mono); font-size: 11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding-bottom:14px; border-bottom:2px solid var(--paper);
}
.paper-mast .doi{ color: var(--amber-dim); }
.paper h1.paper-title{
  font-family: var(--serif); font-weight:700; font-size: clamp(25px,3.6vw,36px);
  line-height:1.16; letter-spacing:-.01em; color: var(--paper); margin:26px 0 6px;
}
.paper .subtitle{ font-family:var(--serif); font-style:italic; font-size:1.06rem; color:var(--muted); margin-bottom:20px; }
.paper .byline{ font-family:var(--serif); font-size:.98rem; color:var(--paper); }
.paper .byline .affil{ color:var(--muted); font-style:italic; font-size:.92rem; }
.paper .paper-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--muted); margin-top:8px; }

.paper .abstract{
  margin:24px 0 6px; padding:18px 22px; background:var(--panel-t);
  border:1px solid var(--panel-edge); border-left:3px solid var(--amber); border-radius:4px;
}
.paper .abstract h4, .paper .kw h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); margin-bottom:8px;
}
.paper .abstract p{ margin:0; font-size:.96rem; line-height:1.6; }
.paper .kw{ margin:14px 0 8px; font-size:.9rem; color:var(--muted); }
.paper .kw b{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); font-weight:600; }

.paper h2{
  font-family:var(--serif); font-weight:700; font-size:1.32rem; color:var(--paper);
  margin:30px 0 6px; padding-top:4px; line-height:1.25;
  counter-reset:sub; break-after:avoid; page-break-after:avoid;
}
.paper h2::before{ counter-increment:sec; content: counter(sec) ".\00a0\00a0"; color:var(--amber); font-variant-numeric:tabular-nums; }
.paper h2.nonum{ counter-reset:none; }
.paper h2.nonum::before{ content:none; }
.paper h3{ font-family:var(--serif); font-weight:700; font-size:1.06rem; font-style:italic; color:var(--paper); margin:20px 0 4px; break-after:avoid; page-break-after:avoid; }
.paper h3::before{ counter-increment:sub; content: counter(sec) "." counter(sub) "\00a0\00a0"; color:var(--amber); font-style:normal; font-variant-numeric:tabular-nums; }
.paper p{ margin:0 0 2px; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.paper h2 + p, .paper h3 + p, .paper .abstract + *, .paper figure + p, .paper table + p, .paper .box + p{ text-indent:0; }
.paper p + p{ text-indent:1.4em; }
.paper b, .paper strong{ color:var(--paper); font-weight:700; }
.paper em{ font-style:italic; }
.paper a{ color:var(--amber); border-bottom:1px solid var(--faint); }
.paper a:hover{ border-color:var(--amber); }
.paper ul, .paper ol{ margin:8px 0 10px 1.4em; }
.paper li{ margin:4px 0; text-align:justify; }

/* citation superscripts */
.paper sup.c{ font-family:var(--mono); font-size:.62em; line-height:0; vertical-align:super; }
.paper sup.c a{ color:var(--amber); border:none; font-weight:600; }

/* booktabs-style exhibits */
.paper figure{ margin:20px 0; break-inside:avoid; page-break-inside:avoid; }
.paper .box{ break-inside:avoid; page-break-inside:avoid; }
.paper table{ break-inside:avoid; page-break-inside:avoid; }
.paper figure.tbl{ overflow-x:auto; }
.paper table{ border-collapse:collapse; width:100%; font-family:var(--mono); font-size:12.5px; color:var(--body-text); }
.paper caption, .paper figure > .cap{
  caption-side:top; text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--muted); margin-bottom:8px; line-height:1.5;
}
.paper figure > .cap b, .paper caption b{ color:var(--paper); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.paper caption::before{ counter-increment:tab; content:"Table " counter(tab) ". "; color:var(--amber); font-weight:600; }
.paper figure > .cap.figc::before{ counter-increment:fig; content:"Exhibit " counter(fig) ". "; color:var(--amber); font-weight:600; }
.paper thead th{ text-align:right; padding:7px 10px; border-bottom:1px solid var(--paper); font-weight:600; color:var(--paper); }
.paper thead th:first-child, .paper tbody td:first-child{ text-align:left; }
.paper tbody td{ padding:6px 10px; border-bottom:1px dotted var(--faint); font-variant-numeric:tabular-nums; }
.paper tbody tr:last-child td{ border-bottom:1px solid var(--paper); }
.paper table.top-rule thead th{ border-top:2px solid var(--paper); }

/* key-finding callout */
.paper .box{
  margin:20px 0; padding:16px 20px; background:var(--panel-t);
  border:1px solid var(--panel-edge); border-left:3px solid var(--chart-2); border-radius:4px;
  font-size:.97rem;
}
.paper .box .box-l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--chart-2); display:block; margin-bottom:6px; }

/* footnotes + references */
.paper hr.rule{ border:none; border-top:1px solid var(--panel-edge); margin:34px 0 0; }
.paper .refs{ margin-top:14px; font-size:.86rem; line-height:1.5; color:var(--body-text); }
.paper .refs h2{ font-size:1.2rem; }
.paper .refs ol{ list-style:none; margin:12px 0 0; padding:0; counter-reset:ref; }
.paper .refs li{ position:relative; padding-left:2.4em; margin:9px 0; text-align:left; }
.paper .refs li::before{ counter-increment:ref; content:"[" counter(ref) "]"; position:absolute; left:0; font-family:var(--mono); font-size:.8em; color:var(--amber); }
.paper .refs li a{ word-break:break-word; }
.paper .disclaimer{ margin-top:22px; font-family:var(--mono); font-size:10.5px; line-height:1.6; letter-spacing:.02em; color:var(--muted); border-top:1px dashed var(--faint); padding-top:14px; }

@media (max-width:640px){ .paper{ font-size:15.5px; } .paper p{ text-align:left; } .paper li{ text-align:left; } }

/* print: clean paper, hide the app chrome; the reader reverts to normal multi-page flow */
@media print{
  nav, #progress, footer, .case-nav, .case-hero, #mx-model > .mx-sec:not(#paper-sec),
  #mx-model > .case-section, .reader-bar, .beams, .live-dot, .lh-bg{ display:none !important; }
  body{ background:#fff; color:#111; }
  #paper-sec > .eyebrow{ display:none !important; }
  .reader, .reader-viewport{ max-width:none !important; height:auto !important; overflow:visible !important;
    padding:0 !important; border:none !important; box-shadow:none !important; background:#fff !important; }
  .reader-doc{ columns:auto !important; -webkit-columns:auto !important; column-width:auto !important;
    transform:none !important; height:auto !important; transition:none !important; }
  .paper{ color:#111; background:#fff; font-size:11pt; }
  .paper h1.paper-title, .paper h2, .paper h3, .paper b, .paper .byline{ color:#000; }
  .paper h2{ break-after:avoid; page-break-after:avoid; }
  .paper figure, .paper .box, .paper table{ break-inside:avoid; page-break-inside:avoid; }
  .paper a{ color:#000; border:none; }
}