/* ===================================================================
   oscartellez.com
   One dark world in the Regen Portal family of greens: forest for the
   glow, bright green for the signal, brand black for the ground. The
   portrait's backdrop is the page; the page is the portrait's world.
   Montserrat carries the headlines (the Regen Portal house face),
   Source Sans 3 carries the reading, JetBrains Mono carries the labels.
   =================================================================== */

/* ---- FONTS ----------------------------------------------------------
   Self-hosted variable fonts, latin subset, from Google Fonts (OFL).
   No third-party request on page load.
   -------------------------------------------------------------------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/montserrat-var.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("/assets/fonts/source-sans-3-var.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2")}

/* ---- TOKENS ------------------------------------------------------- */
:root{
  color-scheme: dark;
  --ground:#0B0E0A; --deep:#060805; --surface:#111510; --surface-2:#171C15;
  --ink:#EEF1E9; --muted:#A3AC9C; --faint:#6F7969;
  --rule:#1F261C; --rule-lit:#2C3628;
  --forest:#1E5A00; --forest-deep:#123600;
  --green:#55E039; --green-dim:#3E9E2C; --green-bg:rgba(85,224,57,.10);

  --display:"Montserrat",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --sans:"Source Sans 3","Source Sans Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --rail:11rem; --gap:2.75rem; --measure:60ch; --pad:2rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:1.125rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;
}
p,h1,h2,h3,ul{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--green-dim);
  padding-bottom:1px;transition:color .15s ease,border-color .15s ease,background-color .15s ease}
a:hover{color:var(--green);border-color:var(--green);background:var(--green-bg)}
a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

.wrap{max-width:74rem;margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--surface);padding:.6rem 1rem;border:1px solid var(--green)}

/* ---- AMBIENT LAYERS ------------------------------------------------
   .glow holds three forest-green fields that drift slowly behind the
   page. Pure CSS, no canvas. .grain is a fixed film-grain overlay so
   the large flat areas do not read as flat vector.
   ------------------------------------------------------------------- */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.6;
  will-change:transform}
.glow i:nth-child(1){width:60vw;height:60vw;left:-15vw;top:-20vw;
  background:radial-gradient(closest-side,rgba(30,90,0,.55),rgba(30,90,0,.12) 55%,transparent 75%);
  animation:drift1 38s ease-in-out infinite alternate}
.glow i:nth-child(2){width:50vw;height:50vw;right:-18vw;top:10vh;
  background:radial-gradient(closest-side,rgba(85,224,57,.22),rgba(85,224,57,.05) 55%,transparent 75%);
  animation:drift2 46s ease-in-out infinite alternate}
.glow i:nth-child(3){width:70vw;height:70vw;left:20vw;bottom:-45vw;
  background:radial-gradient(closest-side,rgba(18,54,0,.6),rgba(18,54,0,.1) 55%,transparent 75%);
  animation:drift3 54s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-10vw,12vh) scale(.92)}}
@keyframes drift3{from{transform:translate(0,0)}to{transform:translate(-12vw,-8vh)}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#arcs{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease}
#arcs.on{opacity:.42}
.js .glow i{opacity:.38}
.page{position:relative;z-index:2}

/* ---- PROGRESS ------------------------------------------------------ */
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:50;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--green-dim),var(--green));
  box-shadow:0 0 10px rgba(85,224,57,.6)}

/* ---- INDEX ---------------------------------------------------------
   Section index on the right edge. Dots with a label that slides out
   for the active section and on hover. Desktop only. */
.index{position:fixed;right:1.1rem;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:.55rem;align-items:flex-end;
  opacity:0;pointer-events:none;transition:opacity .5s ease}
.index.show{opacity:1;pointer-events:auto}
.index a{display:flex;align-items:center;gap:.6rem;border:0;padding:.15rem 0;color:var(--faint)}
.index a:hover{background:none}
.index a::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--rule-lit);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;flex:0 0 6px}
.index a span{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateX(.4rem);transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
.index a:hover span,.index a.on span{opacity:1;transform:none}
.index a.on{color:var(--green)}
.index a.on::after{background:var(--green);box-shadow:0 0 10px rgba(85,224,57,.7);transform:scale(1.25)}
@media (max-width:74rem){.index{display:none}}

/* ---- SHARED BITS --------------------------------------------------- */
.eyebrow,.rail{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
.rail{line-height:1.7;padding-top:.55rem}
.grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--gap)}
.section{padding:4.75rem 0;border-top:1px solid var(--rule)}
.section--first{border-top:0}
.section--tight{padding:2.25rem 0}
.col{display:flex;flex-direction:column;gap:1.4rem}
.col>p{max-width:var(--measure);color:var(--muted)}
.col>p.lead{color:var(--ink);font-size:1.25rem;line-height:1.55}
.col>p.fine{font-size:.9375rem;color:var(--faint);border-left:2px solid var(--rule-lit);padding-left:1rem}
.cta{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);border-bottom-color:var(--green-dim)}

/* ---- REVEAL --------------------------------------------------------
   Visible by default. Only with JS running does content get the hidden
   start state, so nothing disappears without scripting.
   -------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(1.4rem);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.js .reveal.seen{opacity:1;transform:none}

/* ---- HERO ---------------------------------------------------------- */
.hero{position:relative;padding:3rem 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--ground) 14%,rgba(11,14,10,.86) 36%,rgba(11,14,10,0) 64%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;min-height:min(84vh,44rem)}
.hero-text{padding-bottom:3.5rem;position:relative;z-index:3;max-width:42rem}

.badge{display:inline-flex;align-items:flex-start;gap:.6rem;font-family:var(--mono);
  font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--rule-lit);padding:.45rem .85rem;margin-bottom:2rem;
  background:rgba(6,8,5,.55);backdrop-filter:blur(6px)}
.badge::before{content:"";flex:0 0 6px;width:6px;height:6px;margin-top:.3em;background:var(--green);border-radius:50%;
  animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--green-bg);opacity:1}
  50%{box-shadow:0 0 0 5px rgba(85,224,57,0);opacity:.55}}

.name{font-family:var(--display);font-weight:800;
  font-size:clamp(3.25rem,10.5vw,7.75rem);line-height:.88;letter-spacing:-.04em;
  text-transform:uppercase}
.name span{display:block}
.name .hollow{color:transparent;-webkit-text-stroke:2px var(--green);
  paint-order:stroke fill;text-shadow:0 0 38px rgba(85,224,57,.30)}
@supports not ((-webkit-text-stroke: 2px black)){.name .hollow{color:var(--green)}}

.claim{font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.7vw,2rem);line-height:1.2;letter-spacing:-.02em;
  max-width:26ch;margin-top:1.75rem;text-wrap:balance}
.claim em{font-style:normal;color:var(--green)}

.role{font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--muted);
  max-width:52ch;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:1.5rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--faint)}

.hero-portrait{position:absolute;right:-2%;bottom:0;width:min(46vw,36rem);z-index:2;pointer-events:none}
.hero-portrait img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%),
    linear-gradient(to bottom,transparent 0%,#000 26%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 42%),
    linear-gradient(to bottom,transparent 0%,#000 26%,#000 76%,transparent 100%);
  mask-composite:intersect}

/* ---- THE RECORD ----------------------------------------------------
   A statement of account, not a stat row. Label left, figure right,
   dotted leader between, one line per row, figures on tabular numerals.
   ------------------------------------------------------------------- */
.record{position:relative;padding:2.5rem 2.5rem 2.25rem;
  background:rgba(6,8,5,.6);border:1px solid var(--rule);overflow:hidden}
.record::before{content:"";position:absolute;left:-18%;top:-70%;width:80%;height:240%;
  background:radial-gradient(closest-side,rgba(30,90,0,.5),rgba(30,90,0,.12) 45%,transparent 72%);
  pointer-events:none}
.record::after{content:"";position:absolute;right:-22%;bottom:-90%;width:60%;height:200%;
  background:radial-gradient(closest-side,rgba(85,224,57,.10),transparent 70%);
  pointer-events:none}
.ledger{position:relative;display:flex;flex-direction:column}
.ledger .row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:1.5rem;padding:1.05rem 0;border-top:1px solid var(--rule)}
.ledger .row:first-child{border-top:0;padding-top:0}
.ledger .row:last-child{padding-bottom:0}
.ledger .k{display:flex;align-items:baseline;gap:1rem;font-family:var(--mono);
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ledger .k::after{content:"";flex:1 1 auto;min-width:1.5rem;height:1px;
  background:repeating-linear-gradient(90deg,var(--rule-lit) 0 2px,transparent 2px 7px)}
.ledger .v{font-family:var(--display);font-weight:800;
  font-size:clamp(1.875rem,3.6vw,2.875rem);line-height:1;letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger .row:nth-child(1) .v,.ledger .row:nth-child(6) .v{color:var(--green);
  text-shadow:0 0 32px rgba(85,224,57,.35)}

/* ---- PULL QUOTE ---------------------------------------------------- */
.pull{padding:4.75rem 0;border-top:1px solid var(--rule);position:relative}
.pull q{quotes:none;display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.75rem);line-height:1.16;letter-spacing:-.03em;
  max-width:24ch;text-wrap:balance}
.pull q b{font-weight:700;color:var(--green)}
.pull .attr{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:1.75rem;max-width:60ch;line-height:1.7}

/* ---- MARQUEE ------------------------------------------------------- */
.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.9rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:2.75rem;width:max-content;animation:slide 60s linear infinite}
.track span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;display:inline-flex;align-items:center;gap:2.75rem}
.track span::after{content:"";width:5px;height:5px;background:var(--green-dim);transform:rotate(45deg)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- CARDS ---------------------------------------------------------
   The highlight tracks the cursor via --mx/--my set in site.js. Same
   green as the ambient glow, so the cards read as lit by the page.
   -------------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.card{position:relative;background:var(--ground);padding:1.9rem 1.75rem 2rem;
  overflow:hidden;transition:background .3s ease;display:flex;flex-direction:column}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(19rem circle at var(--mx,50%) var(--my,50%),
    rgba(85,224,57,.13),transparent 62%)}
.card:hover::before{opacity:1}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.card:hover::after{transform:scaleX(1)}
.card{transform:perspective(60rem) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:background .3s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.card.tilting{transition:background .3s ease,transform .08s linear}
.card .own{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);margin-top:auto;padding-top:1.1rem;position:relative;
  border-bottom-color:transparent}
.card .own:hover{border-bottom-color:var(--green);background:none}
.card-n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;color:var(--green-dim);
  display:block;margin-bottom:1rem;font-variant-numeric:tabular-nums;text-transform:uppercase}
.card h3{font-family:var(--display);font-size:1.2rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.25;margin-bottom:.55rem;position:relative}
.card p{color:var(--muted);font-size:1rem;line-height:1.6;position:relative}
.card--note{background:var(--surface)}
.card--wide{grid-column:1/-1}
.card--note h3{color:var(--green)}

/* ---- Q AND A ------------------------------------------------------- */
.qa{display:flex;flex-direction:column}
.qa-item{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:1.5rem 2.5rem;
  padding:1.75rem 0;border-top:1px solid var(--rule)}
.qa-item:first-child{border-top:0;padding-top:0}
.qa-item h3{font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.015em;
  line-height:1.3;color:var(--ink)}
.qa-item h3::before{content:"";display:block;width:2rem;height:2px;background:var(--green);
  margin-bottom:.8rem;box-shadow:0 0 12px rgba(85,224,57,.6)}
.qa-item p{color:var(--muted);max-width:var(--measure)}

/* ---- WHY PEOPLE CALL ----------------------------------------------- */
.calls{display:flex;flex-direction:column;gap:2.25rem}
.call{max-width:62ch;display:flex;flex-direction:column;gap:.5rem}
.call h3{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.65rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.2}
.call h3::before{content:"";display:block;width:2.25rem;height:2px;background:var(--green);
  margin-bottom:.9rem;box-shadow:0 0 12px rgba(85,224,57,.6)}
.call p{color:var(--muted)}

/* ---- EPISODES ------------------------------------------------------ */
.episodes{display:flex;flex-direction:column;border-top:1px solid var(--rule);max-width:44rem}
.episodes li{border-bottom:1px solid var(--rule)}
.episodes a{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.35rem 1.5rem;
  padding:.95rem 0;border-bottom:0;align-items:baseline}
.episodes a:hover{background:none}
.ep-guest{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dim)}
.episodes a:hover .ep-guest{color:var(--green)}
.ep-q{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.episodes a:hover .ep-q{color:var(--green)}

/* ---- EVENT --------------------------------------------------------- */
.event{max-width:var(--measure);display:flex;flex-direction:column;gap:.75rem;
  padding:2rem 2.25rem;border:1px solid var(--rule);background:rgba(6,8,5,.5);position:relative;overflow:hidden}
.event::before{content:"";position:absolute;left:-30%;top:-60%;width:80%;height:220%;
  background:radial-gradient(closest-side,rgba(30,90,0,.45),transparent 70%);pointer-events:none}
.event>*{position:relative}
.event-when{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.event h3{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.event p{color:var(--muted)}
.event .cta{align-self:flex-start;margin-top:.5rem}

/* ---- NOW ----------------------------------------------------------- */
.now{display:flex;flex-direction:column;gap:.9rem;max-width:var(--measure)}
.now li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);align-items:baseline;color:var(--muted)}
.now li::before{content:"\2192";font-family:var(--mono);color:var(--green);font-size:.875rem}

/* ---- LOG ----------------------------------------------------------- */
.logwrap{position:relative;padding-left:1.4rem}
.spine{position:absolute;left:0;top:.4rem;bottom:0;width:1px;background:var(--rule);z-index:0}
.spine i{position:absolute;left:0;top:0;width:1px;height:0;display:block;
  background:linear-gradient(180deg,var(--green),var(--green-dim));
  box-shadow:0 0 10px rgba(85,224,57,.55);transition:height .25s ease-out}
.log{display:flex;flex-direction:column;position:relative;z-index:1}
.log .entry{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1.5rem;
  padding:1.6rem 0;border-top:1px solid var(--rule)}
.log .entry:first-child{border-top:0;padding-top:0}
.log .entry>.rail{padding-top:.4rem;color:var(--green-dim)}
.log .entry-body{max-width:62ch;display:flex;flex-direction:column;gap:.4rem}
.log .entry-body h3{font-family:var(--display);font-size:1.2rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.25}
.log .entry-body p{color:var(--muted);font-size:1rem}

/* ---- FOOT ---------------------------------------------------------- */
.foot-block{border-top:1px solid var(--rule);padding:3rem 0 3.25rem}
.standing{max-width:var(--measure);color:var(--muted);font-size:1rem;line-height:1.65;
  padding-left:1.1rem;border-left:2px solid var(--green-dim);margin-bottom:2.5rem}
.foot{display:flex;flex-wrap:wrap;gap:.85rem 2rem;align-items:baseline;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--faint)}
.foot .spacer{flex:1}

/* ---- LEGAL PAGES --------------------------------------------------- */
.doc{max-width:44rem;padding:3.5rem 0 4rem}
.doc h1{font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,6vw,3.5rem);
  line-height:.95;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:.9rem}
.doc .updated{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:2.75rem}
.doc h2{font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:-.015em;
  margin:2.5rem 0 .75rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.doc p,.doc li{color:var(--muted);margin-bottom:.9rem}
.doc ul{list-style:none;padding:0}
.doc li{display:grid;grid-template-columns:1.3rem minmax(0,1fr);align-items:baseline}
.doc li::before{content:"\2022";color:var(--green-dim)}
.doc .back{display:inline-block;margin-bottom:2.5rem;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase}

/* ---- OSCAR BITS ------------------------------------------------------ */
.why>p{max-width:64ch}
.why-lead{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.3;
  letter-spacing:-.02em;color:var(--ink) !important;max-width:30ch !important;text-wrap:balance;margin-bottom:.5rem}
.why-lead::first-letter{color:var(--green)}
.why-future{color:var(--ink) !important;font-size:1.2rem;line-height:1.6;padding:1.4rem 1.6rem;border:1px solid var(--rule);
  background:rgba(6,8,5,.5);position:relative;overflow:hidden}
.why-future::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);box-shadow:0 0 16px rgba(85,224,57,.7)}
.for{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:.5rem}
.for-item{background:var(--ground);padding:1.5rem 1.4rem 1.6rem}
.for-item h3{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.015em;line-height:1.25;margin-bottom:.55rem}
.for-item h3::before{content:"";display:block;width:1.6rem;height:2px;background:var(--green);margin-bottom:.75rem;box-shadow:0 0 10px rgba(85,224,57,.6)}
.for-item p{color:var(--muted);font-size:.98rem;line-height:1.55}
.notfor{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;line-height:1.7;color:var(--faint) !important}
@media (max-width:62rem){.for{grid-template-columns:minmax(0,1fr)}}
.badge .today{color:var(--ink)}
.record-note{position:relative;color:var(--muted);font-size:1rem;margin-bottom:1.6rem;max-width:var(--measure)}
.linkish{display:none;font:inherit;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);background:none;border:0;border-bottom:1px solid var(--green-dim);padding:0 0 1px;cursor:pointer;margin-left:.3rem}
.js .linkish{display:inline}
.linkish:hover,.linkish:focus-visible{border-color:var(--green);outline:none;text-shadow:0 0 10px rgba(85,224,57,.6)}
.fixes{display:flex;flex-direction:column;gap:1rem;max-width:var(--measure)}
.fixes li{position:relative;padding-left:1.7rem;color:var(--muted);line-height:1.6}
.fixes li::before{content:"\2717";position:absolute;left:0;top:.2em;font-family:var(--mono);color:var(--green);font-size:.95rem}
.fixes li b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em;margin-bottom:.2rem}
.reach{max-width:62ch;color:var(--ink);font-size:1.15rem;line-height:1.55;padding-top:.5rem;border-top:1px solid var(--rule);margin-top:.5rem}
.reach a{color:var(--green)}
.signoff{font-family:var(--display);font-weight:800;font-size:clamp(1.75rem,4.2vw,3.25rem);letter-spacing:-.035em;line-height:1.05;
  margin-bottom:2.25rem;text-wrap:balance}
.signoff b{color:transparent;-webkit-text-stroke:2px var(--green);paint-order:stroke fill;text-shadow:0 0 30px rgba(85,224,57,.3);font-weight:800}
@supports not ((-webkit-text-stroke: 2px black)){.signoff b{color:var(--green)}}

/* ---- PAZZAZ ----------------------------------------------------------
   The load sequence and the small delights. Every one of these is a
   pure enhancement: with JS off or reduced motion on, the page is the
   same page, just still. */

/* cursor glow, desktop only, rides under the grain and over the arcs */
.cursor{position:fixed;left:0;top:0;width:44rem;height:44rem;margin:-22rem 0 0 -22rem;z-index:1;
  pointer-events:none;border-radius:50%;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(closest-side,rgba(85,224,57,.11),rgba(85,224,57,.03) 45%,transparent 70%);
  mix-blend-mode:screen;will-change:transform}
.cursor.on{opacity:1}
@media (pointer:coarse){.cursor{display:none}}

/* scanline: one pass down the hero on load */
.scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(85,224,57,.9),transparent);
  box-shadow:0 0 18px rgba(85,224,57,.7)}
.js .scan{animation:scan 1.7s cubic-bezier(.4,0,.2,1) .35s both}
@keyframes scan{0%{transform:translateY(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(min(84vh,44rem));opacity:0}}

/* the name: letters rise one at a time when JS has split them */
.name span i{display:inline-block;font-style:normal;
  animation:letter .9s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(90ms + var(--i,0) * 55ms)}
.name .hollow i{animation-name:letterHollow;animation-delay:calc(360ms + var(--i,0) * 55ms)}
@keyframes letter{from{opacity:0;transform:translateY(.45em) skewX(-6deg)}to{opacity:1;transform:none}}
@keyframes letterHollow{0%{opacity:0;transform:translateY(.45em);-webkit-text-stroke-color:transparent;text-shadow:none}
  60%{opacity:1;transform:none;-webkit-text-stroke-color:var(--green);text-shadow:0 0 70px rgba(85,224,57,.75)}
  100%{opacity:1;transform:none;-webkit-text-stroke-color:var(--green);text-shadow:0 0 38px rgba(85,224,57,.30)}}

/* the claim: the three refusals light in sequence */
.claim em b{font-weight:inherit;color:var(--green)}
.js .claim em b{opacity:.18;animation:light .55s ease-out both}
.js .claim em b:nth-child(1){animation-delay:1.05s}
.js .claim em b:nth-child(2){animation-delay:1.35s}
.js .claim em b:nth-child(3){animation-delay:1.65s}
@keyframes light{0%{opacity:.18;text-shadow:none}60%{opacity:1;text-shadow:0 0 26px rgba(85,224,57,.8)}100%{opacity:1;text-shadow:0 0 12px rgba(85,224,57,.25)}}

/* portrait: breathes, and leans a few pixels toward the cursor */
.hero-portrait{transform:translate(var(--px,0px),var(--py,0px));transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.hero-portrait::before{content:"";position:absolute;left:18%;top:8%;width:70%;height:70%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(85,224,57,.22),transparent 72%);filter:blur(30px);
  animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}

/* rails: a green tick draws in when the section arrives */
.grid>.rail{position:relative;padding-left:0}
.grid>.rail::before{content:"";display:block;width:0;height:2px;background:var(--green);margin-bottom:.7rem;
  box-shadow:0 0 12px rgba(85,224,57,.7);transition:width .7s cubic-bezier(.2,.7,.3,1) .15s}
.grid>.rail.seen::before{width:2rem}

/* the record: figures count up (JS) and each row lands a beat apart */
.js .ledger .row{opacity:0;transform:translateX(.6rem);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .record.seen .ledger .row{opacity:1;transform:none}
.js .record.seen .ledger .row:nth-child(2){transition-delay:.08s}
.js .record.seen .ledger .row:nth-child(3){transition-delay:.16s}
.js .record.seen .ledger .row:nth-child(4){transition-delay:.24s}
.js .record.seen .ledger .row:nth-child(5){transition-delay:.32s}
.js .record.seen .ledger .row:nth-child(6){transition-delay:.40s}
.ledger .k::after{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.7,.3,1) .3s}
.record.seen .ledger .k::after{transform:scaleX(1)}

/* the question: the accent pulses once when it arrives, then rests */
.pull.seen q b{animation:qpulse 2.4s ease-out .3s both}
@keyframes qpulse{0%{text-shadow:none}35%{text-shadow:0 0 40px rgba(85,224,57,.85)}100%{text-shadow:0 0 14px rgba(85,224,57,.25)}}
.pull q{position:relative}
.pull.seen q::before{content:"";position:absolute;left:-1.5rem;top:.1em;bottom:.1em;width:3px;background:var(--green);
  box-shadow:0 0 16px rgba(85,224,57,.8);transform-origin:50% 0;animation:bar 1s cubic-bezier(.2,.7,.3,1) both}
@keyframes bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* cards: a light sweep on hover */
.card .sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(85,224,57,.10) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.card:hover .sheen{transform:translateX(120%)}
.card:hover .card-n{color:var(--green);text-shadow:0 0 12px rgba(85,224,57,.6)}
.card:hover h3{color:#fff}

/* episodes: the guest tag lights on hover, the row slides a hair */
.episodes a{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.episodes a:hover{transform:translateX(.35rem)}

/* log: the year lights as the spine passes it */
.log .entry.lit>.rail{color:var(--green);text-shadow:0 0 10px rgba(85,224,57,.6)}
.log .entry>.rail{transition:color .3s ease,text-shadow .3s ease}

/* marquee: brighter diamonds, slow breathing */
.track span::after{box-shadow:0 0 8px rgba(85,224,57,.5);animation:pulse 3s ease-in-out infinite}
.marquee:hover .track{animation-play-state:paused}

/* ---- HIDDEN THINGS -------------------------------------------------
   Panels and the HUD that the keyboard and the console open. None of
   this renders on a normal visit. */
.ot-panel{position:fixed;left:50%;bottom:1.25rem;z-index:80;width:min(40rem,calc(100% - 2rem));
  max-height:min(76vh,44rem);overflow:auto;transform:translate(-50%,120%);
  background:rgba(8,11,7,.97);border:1px solid var(--rule-lit);padding:1.6rem 1.7rem 1.8rem;
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(85,224,57,.08);backdrop-filter:blur(10px);
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.ot-panel.up{transform:translate(-50%,0)}
.ot-panel h3{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.025em;
  line-height:1.15;margin-bottom:1.1rem;padding-right:2.5rem}
.ot-panel .ot-eyebrow{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);margin-bottom:.6rem}
.ot-panel p{color:var(--muted);margin-bottom:.8rem}
.ot-panel dl{margin:0;display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.7rem 1.4rem}
.ot-panel dt{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.ot-panel dd{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.ot-panel dd a{color:var(--ink)}
.ot-close{position:absolute;right:.9rem;top:.8rem;font:1.4rem/1 var(--sans);color:var(--faint);
  background:none;border:1px solid var(--rule);width:2rem;height:2rem;cursor:pointer;transition:all .15s ease}
.ot-close:hover,.ot-close:focus-visible{color:var(--green);border-color:var(--green);outline:none}
.ot-hud{position:fixed;left:50%;top:1.25rem;z-index:81;transform:translate(-50%,-150%);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  background:rgba(8,11,7,.95);border:1px solid var(--green-dim);padding:.6rem 1rem;white-space:nowrap;
  max-width:calc(100% - 2rem);overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 0 24px rgba(85,224,57,.25);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.ot-hud.up{transform:translate(-50%,0)}
body.overdrive #arcs{opacity:1}
body.overdrive .name .hollow{text-shadow:0 0 60px rgba(85,224,57,.8),0 0 120px rgba(85,224,57,.45)}
body.overdrive .card{border-color:var(--green-dim)}
body.overdrive .progress i{box-shadow:0 0 24px rgba(85,224,57,1)}
@media (max-width:48rem){.ot-panel dl{grid-template-columns:minmax(0,1fr);gap:.2rem 0}.ot-panel dd{margin-bottom:.7rem}}

/* ---- PRINT --------------------------------------------------------- */
@media print{
  .glow,#arcs,.grain,.progress,.index,.marquee,.badge,.ot-panel,.ot-hud{display:none !important}
  body{background:#fff;color:#111}
  .js .reveal{opacity:1;transform:none}
  a{color:#111;border-bottom-color:#999}
  .name .hollow{color:#1E5A00;-webkit-text-stroke:0;text-shadow:none}
  .claim em,.card .own,.cta,.ep-guest,.event-when{color:#1E5A00}
  .col>p,.card p,.qa-item p,.call p,.now li,.log .entry-body p,.standing,.foot{color:#333}
  .hero-portrait{display:none}
}

/* ---- MOTION -------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(1.1rem)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero-text .badge{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.hero-text .name{animation:rise .8s cubic-bezier(.2,.7,.3,1) 80ms both}
.hero-text .claim{animation:rise .8s cubic-bezier(.2,.7,.3,1) 170ms both}
.hero-text .role,.hero-text .hero-meta{animation:rise .8s cubic-bezier(.2,.7,.3,1) 260ms both}
.hero-portrait{animation:fade 1.2s ease 120ms both}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
  .track{animation:none;flex-wrap:wrap;width:auto}
  #arcs{display:none}
  .card{transform:none !important}
  .cursor,.scan{display:none}
  .js .claim em b,.name span i{animation:none;opacity:1}
  .js .ledger .row{opacity:1;transform:none}
  .hero-portrait::before{animation:none}
}

/* ---- NARROW -------------------------------------------------------- */
@media (max-width:62rem){
  .cards{grid-template-columns:minmax(0,1fr)}
  .qa-item{grid-template-columns:minmax(0,1fr);gap:.75rem}
}

@media (max-width:48rem){
  :root{--gap:1.15rem;--pad:1.35rem}
  body{font-size:1.0625rem}
  .hero{padding-top:2rem}
  .hero::before{display:none}
  .hero-grid{min-height:0;display:flex;flex-direction:column}
  .hero-text{padding-bottom:2.5rem;order:2;max-width:none}
  .hero-portrait{position:static;width:auto;right:auto;order:1;margin:0}
  .hero-portrait img{width:86%;margin:0 auto;max-width:21rem;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 74%,transparent 100%),
      linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 74%,transparent 100%),
      linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%);
    mask-composite:intersect}
  .name{letter-spacing:-.03em}
  .name .hollow{-webkit-text-stroke-width:1.5px}
  .claim{max-width:none}
  .section,.pull{padding:3rem 0}
  .section--tight{padding:1.5rem 0}
  .record{padding:1.6rem 1.35rem 1.4rem}
  .ledger .k{font-size:.6875rem;letter-spacing:.1em;gap:.6rem}
  .ledger .row{gap:.9rem;padding:.9rem 0}
  .grid{grid-template-columns:minmax(0,1fr)}
  .rail{padding-top:0}
  .log .entry{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .log .entry>.rail{padding-top:0}
  .calls{gap:1.85rem}
  .card{padding:1.5rem 1.35rem 1.6rem}
  .episodes a{grid-template-columns:minmax(0,1fr)}
  .event{padding:1.5rem 1.35rem}
  .foot .spacer{display:none}
}