/* ============================================================
   TECH-GURUNOMICS — shared design system
   Navy ground · clay structure · ONE warm accent.

   The palette is lifted verbatim from the AI Vocab card decks so the
   site and the slides read as one object. That deck's own rule, kept
   here: structure (rules, counters, labels, captions) never reaches
   full chroma; only emphasis does. There is no second accent — an
   earlier deck ran teal against the warm and nothing owned the eye.
   ============================================================ */

:root{
  --navy:#0B1E2E; --navy-hi:#113047; --navy-lo:#06131D; --navy-deep:#040D15;
  --ink:#F5F7F8;
  --ink-70:rgba(245,247,248,.72); --ink-50:rgba(245,247,248,.52);
  --ink-32:rgba(245,247,248,.32); --ink-16:rgba(245,247,248,.16);
  --ink-08:rgba(245,247,248,.08);
  --struct-hi:#C4B2A6; --struct:#A89386;
  --struct-60:rgba(168,147,134,.62); --struct-28:rgba(168,147,134,.32);
  --struct-14:rgba(168,147,134,.16);
  --warm:#FF8A5B; --warm-hi:#FFB08C; --warm-lo:#C4562E;
  --panel:rgba(255,255,255,.035);
  /* driven by script.js */
  --mx:50%; --my:32%; --lamp:0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--navy-deep); color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px; line-height:1.75; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---- ambient background (fixed layers, same anatomy as the deck cards) ---- */
.backdrop{position:fixed;inset:0;z-index:-4;
  background:radial-gradient(130% 95% at 50% -12%, var(--navy-hi) 0%, var(--navy) 46%, var(--navy-deep) 100%);}
.grain{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.42;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* the faintest CRT ruling — the "terminal" cue, kept well under the type */
.scan{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 1px,transparent 4px);}
.vignette{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(125% 100% at 50% 28%, transparent 42%, rgba(4,13,21,.55) 78%, rgba(3,8,13,.92) 100%);}
.lamp{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(380px 380px at var(--mx) var(--my),
    rgba(255,138,91,calc(.14*var(--lamp))) 0%, rgba(255,138,91,calc(.055*var(--lamp))) 36%, transparent 70%);
  transition:background .35s ease-out;}

/* ---- shared bits ---- */
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
section{position:relative;padding:120px 0;}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.42em;color:var(--struct);
  font-weight:400;margin:0 0 20px;}
h2{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:800;
  font-size:clamp(30px,4.4vw,54px);line-height:1.06;letter-spacing:-.02em;margin:0 0 18px;}
h3{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:20px;line-height:1.25;
  letter-spacing:-.01em;margin:0;}
p{margin:0 0 18px;color:var(--ink-70);}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-70);max-width:62ch;}
.emph{color:var(--warm);}
.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,var(--struct-28),transparent);}
a{color:var(--warm);text-decoration-color:var(--warm-lo);text-underline-offset:3px;}
a:hover,a:focus-visible{color:var(--warm-hi);}
:focus-visible{outline:2px solid var(--warm);outline-offset:3px;border-radius:2px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:60;background:var(--navy-hi);color:var(--ink);
  padding:10px 16px;border:1px solid var(--warm);}

/* ---- NAV ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;padding:20px 32px;
  transition:background .4s ease,padding .4s ease,box-shadow .4s ease;}
.nav.scrolled{background:rgba(6,19,29,.88);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);padding:12px 32px;box-shadow:0 1px 0 var(--struct-28);}
.nav .brand{font-size:13px;letter-spacing:.24em;color:var(--ink);text-decoration:none;font-weight:700;}
.nav .brand b{color:var(--warm);font-weight:700;}
.nav .links{display:flex;gap:26px;align-items:center;}
.nav .links a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);
  text-decoration:none;transition:color .2s ease;}
.nav .links a:hover,.nav .links a:focus-visible{color:var(--warm);}
@media(max-width:640px){
  .nav{padding:14px 18px;} .nav.scrolled{padding:10px 18px;}
  .nav .links{gap:14px;} .nav .links a{font-size:10px;letter-spacing:.1em;}
  .nav .brand{font-size:11px;letter-spacing:.14em;white-space:nowrap;}
  /* Four links plus the wordmark measure ~477px against a 354px usable bar, so
     the brand wrapped onto two lines and sat under the links. Section links are
     the droppable half: this is one page read top to bottom, every section is
     reachable by scrolling, and all of them are listed again in the footer.
     Subscribe is the one action worth a permanent slot. */
  .nav .links a:not(.cta){display:none;}
  .nav .links a.cta{font-size:10px;letter-spacing:.14em;color:var(--warm);}
}

/* ---- HERO ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:110px 24px 96px;position:relative;
  /* clips the wordmark sheen. The sweep ends at translateX(120%) of a box already
     wider than the wordmark, which pushed the document ~1500px wide and gave the
     whole page a horizontal scrollbar. Clipping here rather than on .wordmark
     keeps the glyphs themselves out of any clip box. */
  overflow:hidden;}
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.mote{position:absolute;bottom:-12px;border-radius:50%;background:rgba(255,176,140,.72);
  filter:blur(.4px);opacity:0;animation:float linear infinite;}
.spark-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.spark{position:absolute;border-radius:50%;background:rgba(255,176,140,.8);filter:blur(.4px);
  opacity:0;will-change:transform,opacity;animation:spark-rise ease-out forwards;}

.hero .kicker{font-size:12px;letter-spacing:.44em;text-transform:uppercase;color:var(--struct);
  margin:0 0 26px;opacity:0;animation:fade .9s ease-out .15s forwards;}
.wordmark{position:relative;display:inline-block;font-family:Fraunces,Georgia,serif;font-weight:900;
  font-size:clamp(38px,8.6vw,116px);line-height:.94;letter-spacing:-.035em;margin:0;
  color:var(--ink);}
.wordmark .grp{white-space:nowrap;}
.wordmark .ltr{display:inline-block;opacity:0;transform:translateY(26px) rotateX(38deg);
  animation:rise-in .85s cubic-bezier(.2,.7,.2,1) forwards;}
.wordmark .dash{color:var(--warm);}
.wordmark .sheen{position:absolute;inset:-8% -12%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  mix-blend-mode:overlay;transform:translateX(-120%);animation:sweep 7s ease-in-out 2.2s infinite;}
.hero .tagline{max-width:640px;margin:26px auto 0;font-size:clamp(16px,2.1vw,20px);color:var(--ink-70);
  opacity:0;animation:rise 1s ease-out 1.15s forwards;}
.hero .tagline em{font-family:Fraunces,Georgia,serif;font-style:italic;color:var(--ink);}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;
  opacity:0;animation:rise 1s ease-out 1.4s forwards;}
.scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:10px;
  letter-spacing:.34em;color:var(--struct-60);text-transform:uppercase;text-decoration:none;
  opacity:0;animation:fade 1s ease-out 2s forwards;}
.scrollcue span{display:block;margin:10px auto 0;width:1px;height:40px;
  background:linear-gradient(var(--struct),transparent);animation:drop 2.4s ease-in-out infinite;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:2px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--struct-28);color:var(--ink);background:var(--panel);
  transition:border-color .22s ease,background .22s ease,transform .22s ease,color .22s ease;}
.btn:hover,.btn:focus-visible{border-color:var(--warm);color:var(--ink);transform:translateY(-2px);}
.btn.primary{background:var(--warm);border-color:var(--warm);color:#20120C;font-weight:700;}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--warm-hi);border-color:var(--warm-hi);color:#20120C;}
.btn svg{width:15px;height:15px;flex:none;}

/* ---- reveals ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---- VIDEO GRID ---- */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;margin-top:44px;}
.vid{display:block;text-decoration:none;color:inherit;border:1px solid var(--ink-08);
  background:var(--panel);border-radius:3px;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;}
.vid:hover,.vid:focus-visible{border-color:var(--struct-60);transform:translateY(-4px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);}
/* display:block is load-bearing, not decoration: .shot and .meta are <span>s
   (a block element cannot legally nest inside the <a> that wraps a card), and
   `aspect-ratio` is ignored on a non-replaced INLINE box. Without this the 16:9
   frame never forms, the box takes a portrait shape, and object-fit:cover
   answers by zooming each 1280x720 thumbnail until only its middle shows. */
.vid .shot{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-lo);}
.vid .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.vid:hover .shot img{transform:scale(1.035);}
.vid .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:rgba(4,13,21,.42);transition:opacity .25s ease;}
.vid:hover .play,.vid:focus-visible .play{opacity:1;}
.vid .play svg{width:52px;height:52px;color:var(--warm);filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));}
.vid .meta{display:block;padding:18px 20px 20px;}
.vid .meta .tag{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--struct);
  display:block;margin-bottom:9px;}
.vid .meta p{font-size:13.5px;line-height:1.6;color:var(--ink-50);margin:9px 0 0;}

/* ---- DECK CAROUSEL ---- */
.deck{margin-top:52px;}
.deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:18px;}
.deck-head .who{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--struct);}
.deck-head h3{font-size:clamp(19px,2.4vw,26px);}
.deck-head .count{font-size:11px;letter-spacing:.2em;color:var(--struct-60);
  font-variant-numeric:tabular-nums;}

.rail-outer{position:relative;}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 20px;scrollbar-width:thin;
  scrollbar-color:var(--struct-28) transparent;
  -webkit-overflow-scrolling:touch;}
.rail::-webkit-scrollbar{height:7px;}
.rail::-webkit-scrollbar-track{background:transparent;}
.rail::-webkit-scrollbar-thumb{background:var(--struct-28);border-radius:99px;}
.rail::-webkit-scrollbar-thumb:hover{background:var(--struct-60);}
.rail figure{margin:0;flex:0 0 auto;scroll-snap-align:center;width:min(340px,74vw);}
.rail img{width:100%;height:auto;display:block;border-radius:3px;border:1px solid var(--ink-08);
  background:var(--navy-lo);
  transition:border-color .25s ease,transform .25s ease;}
/* Casual-copy deterrent on the card artwork only. This is a speed bump, not
   protection -- see the note in script.js. Scoped to the cards so the rest of
   the page keeps normal text selection and right-click. */
.rail img,.lb img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  -webkit-touch-callout:none;}
.rail figure:hover img{border-color:var(--struct-28);}

/* arrows sit outside the rail so they never cover a slide */
.rail-btn{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:4;
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:rgba(6,19,29,.86);border:1px solid var(--struct-28);border-radius:50%;
  color:var(--ink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .2s ease,color .2s ease,opacity .2s ease,background .2s ease;}
.rail-btn:hover:not(:disabled){border-color:var(--warm);color:var(--warm);}
.rail-btn:disabled{opacity:0;pointer-events:none;}
.rail-btn.prev{left:-14px;} .rail-btn.next{right:-14px;}
.rail-btn svg{width:17px;height:17px;}
@media(max-width:900px){.rail-btn{display:none;}}

/* fade the rail's edges so a half-visible card reads as "more", not as clipped */
.rail-outer::before,.rail-outer::after{content:"";position:absolute;top:0;bottom:20px;width:56px;
  pointer-events:none;z-index:3;transition:opacity .3s ease;}
.rail-outer::before{left:0;background:linear-gradient(90deg,var(--navy-deep),transparent);}
.rail-outer::after{right:0;background:linear-gradient(270deg,var(--navy-deep),transparent);}
.rail-outer.at-start::before{opacity:0;} .rail-outer.at-end::after{opacity:0;}

.deck-hint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--struct-60);
  margin:2px 0 0;display:flex;align-items:center;gap:9px;}
.deck-hint svg{width:14px;height:14px;flex:none;}

/* ---- lightbox: one slide, full size, silent ---- */
.lb{position:fixed;inset:0;z-index:50;display:none;place-items:center;
  background:rgba(3,8,13,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:24px;}
.lb.open{display:grid;}
.lb img{max-width:min(560px,92vw);max-height:88svh;width:auto;height:auto;border-radius:4px;
  border:1px solid var(--struct-28);box-shadow:0 40px 100px -40px #000;}
.lb-close{position:absolute;top:20px;right:22px;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:1px solid var(--struct-28);border-radius:50%;color:var(--ink);cursor:pointer;}
.lb-close:hover{border-color:var(--warm);color:var(--warm);}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  display:grid;place-items:center;background:none;border:1px solid var(--struct-28);
  border-radius:50%;color:var(--ink);cursor:pointer;}
.lb-nav:hover:not(:disabled){border-color:var(--warm);color:var(--warm);}
.lb-nav:disabled{opacity:.25;cursor:default;}
.lb-nav.prev{left:16px;} .lb-nav.next{right:16px;}
.lb-cap{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--struct);font-variant-numeric:tabular-nums;}
@media(max-width:620px){.lb-nav{display:none;}}

/* ---- NOTE / how it's made ---- */
.note{border-left:2px solid var(--warm);padding:4px 0 4px 24px;max-width:64ch;}
.note .said{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:clamp(19px,2.6vw,26px);
  line-height:1.4;color:var(--ink);margin:0 0 14px;}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  margin-top:44px;border:1px solid var(--ink-08);background:var(--ink-08);}
.facts div{background:var(--navy-lo);padding:24px 22px;}
.facts .n{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:clamp(28px,4vw,42px);
  line-height:1;color:var(--warm);display:block;}
.facts .l{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--struct);
  display:block;margin-top:10px;}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--ink-08);padding:56px 0 44px;}
footer .cols{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start;}
footer .mark{font-size:13px;letter-spacing:.24em;font-weight:700;color:var(--ink);}
footer .mark b{color:var(--warm);}
footer p{font-size:12.5px;color:var(--ink-32);margin:12px 0 0;max-width:46ch;}
footer .fl{display:flex;gap:22px;flex-wrap:wrap;}
footer .fl a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);
  text-decoration:none;}
footer .fl a:hover,footer .fl a:focus-visible{color:var(--warm);}

/* ---- keyframes ---- */
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes rise-in{to{opacity:1;transform:none;}}
@keyframes fade{to{opacity:1;}}
@keyframes drop{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.5;}
  50%{transform:scaleY(1);transform-origin:top;opacity:1;}}
@keyframes sweep{0%{transform:translateX(-120%);}38%,100%{transform:translateX(120%);}}
@keyframes float{0%{opacity:0;transform:translateY(0);}
  12%{opacity:.75;}88%{opacity:.5;}100%{opacity:0;transform:translateY(-102vh);}}
@keyframes spark-rise{0%{opacity:0;transform:translate(0,0) scale(.7);}
  18%{opacity:.85;}100%{opacity:0;transform:translate(var(--dx),calc(var(--rise)*-1)) scale(.3);}}

/* ---- reduced motion: kill movement, keep everything legible ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
  .wordmark .ltr,.hero .kicker,.hero .tagline,.hero-cta,.scrollcue{opacity:1;transform:none;}
  .reveal{opacity:1;transform:none;}
  .mote,.spark,.wordmark .sheen{display:none;}
  .rail{scroll-snap-type:none;}
}