/* ══════════════════════════════════════════════════════════════
   Stockton Huskinson — interactive resume
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:        #ffffff;
  /* The video bakes in #7d7b7c, but Chrome composites video layers a shade
     lighter than the identical CSS colour. #868485 is what actually matches
     on screen; the mask feathering below covers any residual delta. */
  /* The hero video's baked background decodes as #7c7c7c but Chrome
     colour-manages video layers separately and paints it lighter, so this is
     tuned to the *rendered* result, not the decoded one. Re-check on screen
     if the video is ever re-encoded. */
  --card:      #868485;
  --ink:       #0b0b0b;
  --ink-2:     #3a3a3c;
  --ink-3:     #6b6c6f;
  --muted:     #8e9094;
  --hair:      #e4e4e6;
  --tint:      #f4f4f5;
  --brex:      #0b0b0b;
  --rippling:  #7a005d;

  --accent:    var(--brex);

  --maxw:      1180px;
  --ease:      cubic-bezier(.16,1,.3,1);
  --dur:       .8s;
}

*{ box-sizing:border-box; }

/* deliberately NOT scroll-behavior:smooth — the pinned career section is
   scroll-driven and animated root scrolling makes it lag behind the wheel */

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
  /* clip, not hidden — `hidden` makes body a scroll container
     and silently kills position:sticky on the career section */
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ─────────────── shared reveal ─────────────── */

[data-reveal]{
  opacity:0;
  transform:translate3d(0,24px,0);
  filter:blur(6px);
  transition:
    opacity   var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    filter    var(--dur) var(--ease);
}
[data-reveal].is-in{
  opacity:1; transform:none; filter:blur(0);
  transition-delay:calc(var(--stagger,0) * 100ms);
}

.mini-label{
  margin:0 0 14px;
  font-size:10.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted);
}

/* ═══════════════════════ HERO ═══════════════════════ */

.hero{
  padding:clamp(14px,2.2vw,30px);
  padding-bottom:clamp(20px,3vw,40px);
}

.hero-card{
  position:relative;
  min-height:min(84svh,860px);
  border-radius:clamp(20px,2.2vw,32px);
  background:var(--card);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
  align-items:end;
  isolation:isolate;
}

.hero-video{
  align-self:end;
  line-height:0;
  padding-left:clamp(0px,2vw,40px);
}
.hero-video video{
  --cap:min(82svh,860px);
  display:block;
  width:min(100%,calc(var(--cap) * 0.8945));
  height:auto;
  aspect-ratio:1000 / 1118;
  margin-inline:auto;
  /* fades him into the card; the narrow side/top feather softens the video
     layer's edge in case the browser colour-manages video slightly differently.
     Kept clear of the subject, who spans roughly 7%–95% of the frame. */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 46%,
      rgba(0,0,0,.85) 66%, rgba(0,0,0,.42) 82%, rgba(0,0,0,.10) 93%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to bottom, #000 0%, #000 46%,
      rgba(0,0,0,.85) 66%, rgba(0,0,0,.42) 82%, rgba(0,0,0,.10) 93%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%);
          mask-composite:intersect;
  animation:videoIn 1.5s var(--ease) both;
}
@keyframes videoIn{
  from{ opacity:0; transform:translate3d(0,30px,0) scale(1.012); }
  to  { opacity:1; transform:none; }
}

.hero-copy{
  align-self:center;
  padding:clamp(28px,5vh,64px) clamp(20px,4vw,60px);
  text-align:center;
  color:#fff;
}

.hero-name{
  margin:0;
  font-size:clamp(2.3rem,5.6vw,4.6rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.hero-lede{
  margin:clamp(18px,2.4vh,28px) auto 0;
  max-width:34ch;
  font-size:clamp(.95rem,1.32vw,1.28rem);
  line-height:1.42;
  letter-spacing:-.012em;
  color:rgba(255,255,255,.94);
  text-wrap:balance;
}

.cta{
  margin-top:clamp(24px,3.6vh,44px);
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 26px;
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font-size:clamp(1rem,1.15vw,1.15rem);
  font-weight:500;
  letter-spacing:-.015em;
  text-decoration:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.cta svg{ width:12px; height:12px; transition:transform .35s var(--ease); }
.cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,0,0,.5); }
.cta:hover svg{ transform:translateX(3px); }

/* ═══════════ CAREER HISTORY — the pinned section ═══════════ */

.career{ position:relative; }        /* height set inline-ish below */
.career{ height:400vh; }

.career-sticky{
  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  flex-direction:column;
  padding:clamp(20px,4vh,52px) clamp(20px,5vw,64px) clamp(20px,4vh,48px);
  overflow:hidden;
}

.career-head{
  flex:none;
  margin:0 0 clamp(14px,2.8vh,34px);
  text-align:center;
}
.career-title{
  margin:0;
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:400;
  letter-spacing:-.03em;
}
.career-sub{
  margin:8px auto 0;
  max-width:56ch;
  font-size:clamp(13px,1.05vw,15px);
  line-height:1.45;
  letter-spacing:-.008em;
  color:var(--ink-3);
  text-wrap:balance;
}

.stage{
  flex:1;
  min-height:0;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:180px 64px minmax(0,1fr);
  gap:0 clamp(16px,2.6vw,40px);
}

/* ── logo rail ── */

.rail-col{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  padding:26px 0;
}
.tile-slot{
  height:128px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
}
.tile{
  flex:none;                       /* never let the column squash it oblong */
  width:96px; height:96px;
  aspect-ratio:1;
  display:block;
  border-radius:20px;
  overflow:hidden;
  transform:scale(.5);
  transform-origin:center;
  opacity:.62;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
  will-change:transform;
}
.tile img{ width:100%; height:100%; object-fit:cover; }
.tile-slot.is-active .tile{ transform:scale(1); opacity:1; }

.tile-date{
  flex:none;
  font-size:12.5px;
  letter-spacing:-.005em;
  color:var(--ink-3);
  white-space:nowrap;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.tile-slot.is-active .tile-date{ opacity:1; transform:none; }

/* ── the axis ── */

.axis{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.axis-cap{
  flex:none;
  font-size:13px;
  color:var(--muted);
  letter-spacing:-.005em;
}
.axis-track{
  position:relative;
  flex:1;
  width:4px;
  border-radius:4px;
  background:var(--hair);
}
.axis-fill{
  position:absolute;
  top:0; left:0; right:0;
  height:0;
  border-radius:4px;
  background:var(--accent);
  transition:background-color .55s var(--ease);
  will-change:height;
}
.axis-dot{
  position:absolute;
  left:50%; top:0;
  width:17px; height:17px;
  margin-left:-8.5px; margin-top:-8.5px;
  border-radius:50%;
  background:var(--accent);
  transition:background-color .55s var(--ease);
  will-change:transform;
}

/* ── the panels ── */

.panels{
  position:relative;
  min-height:0;
  padding-top:6px;
}
.panel-step{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translate3d(0,26px,0);
  filter:blur(7px);
  pointer-events:none;
  transition:
    opacity   .55s var(--ease),
    transform .55s var(--ease),
    filter    .55s var(--ease);
}
.panel-step.is-above{ transform:translate3d(0,-26px,0); }   /* already scrolled past */
.panel-step.is-active{
  opacity:1;
  transform:none;
  filter:blur(0);
  pointer-events:auto;
}

.panel-step h3{
  margin:0 0 16px;
  font-size:clamp(1.05rem,1.75vw,1.6rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.028em;
  text-wrap:balance;
}
.panel-step h3 .bar{ color:var(--muted); font-weight:300; }

/* All three panels now carry five-ish bullets, and every one of them has to
   fit inside a pinned viewport, so the compact type is the baseline. */
.panel-step .grp{
  margin:14px 0 5px;
  font-size:13.5px;
  color:var(--ink-3);
  letter-spacing:-.008em;
}
.panel-step .grp:first-of-type{ margin-top:0; }

.panel-step ul li{
  position:relative;
  padding-left:17px;
  font-size:13.5px;
  line-height:1.46;
  color:var(--ink-2);
  letter-spacing:-.008em;
}
.panel-step ul li + li{ margin-top:6px; }
.panel-step ul li::before{
  content:"";
  position:absolute; left:2px; top:.62em;
  width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:.45;
  transition:background-color .55s var(--ease);
}
.panel-step ul li b{ font-weight:600; color:var(--ink); }

/* ═══════════════════════ FULL-BLEED REELS ═══════════════════════ */

/* edge to edge at every width — body has no padding, so 100% is the viewport */
.reel{
  width:100%;
  line-height:0;
  background:var(--tint);
}
/* each reel is cropped differently, so it carries its own ratio */
.reel video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--reel-ar, 1280 / 576);
  object-fit:cover;
}

/* ═══════════════════════ PANELS ═══════════════════════ */

.panel{ padding:clamp(60px,12vh,140px) clamp(20px,5vw,64px); }
.panel-inner{ max-width:var(--maxw); margin:0 auto; }

.panel-head{ margin-bottom:clamp(30px,5vh,54px); }
.panel-eyebrow{
  margin:0 0 10px;
  font-size:15px;
  font-weight:400;
  letter-spacing:-.008em;
  color:var(--ink-3);
}
.panel-title{
  margin:0;
  max-width:22ch;
  font-size:clamp(1.6rem,3.4vw,2.7rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.035em;
  text-wrap:balance;
}

/* ── the three dataset modules ── */

.modules{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);
}
.module{
  position:relative;
  padding:clamp(24px,2.7vw,38px);
  border-radius:14px;
  background:#f5f5f6;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.045);
}

/* the numbered pip straddles the card's top-left corner */
.module-num{
  position:absolute;
  top:-13px; left:-11px;
  width:27px; height:27px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.11);
  font-size:11.5px;
  line-height:1;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.module-icon{
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  margin-bottom:clamp(26px,3.2vw,46px);
}
.module-icon svg{ width:21px; height:21px; display:block; }

.module h3{
  margin:0 0 12px;
  font-size:clamp(1.05rem,1.45vw,1.25rem);
  font-weight:400;
  letter-spacing:-.028em;
  line-height:1.22;
}
.module p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  letter-spacing:-.008em;
  color:var(--ink-3);
}

/* ── why runway ── */

.why{ background:#fafafa; }

.reasons{ display:grid; gap:clamp(28px,4.6vh,50px); }
.reasons li{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:clamp(12px,2.4vw,32px);
  align-items:start;
  max-width:940px;
}
.reasons .num{
  font-size:clamp(1.9rem,3.8vw,2.9rem);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.05em;
  color:var(--ink);
  opacity:.18;
  font-variant-numeric:tabular-nums;
}
.reasons h3{
  margin:0 0 9px;
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  font-weight:500;
  letter-spacing:-.028em;
}
.reasons p{
  margin:0;
  max-width:62ch;
  font-size:15.5px;
  line-height:1.65;
  letter-spacing:-.008em;
  color:var(--ink-2);
}

.made{
  margin-top:clamp(44px,7vh,80px);
  padding-top:clamp(24px,3.6vh,38px);
  border-top:1px solid var(--hair);
}
.made-steps{
  display:flex; flex-wrap:wrap; gap:12px 40px;
  font-size:15px; color:var(--ink-2);
  letter-spacing:-.008em;
}
.made-steps li{ display:flex; align-items:baseline; gap:10px; }
.made-steps span{
  font-size:11px; font-weight:600;
  letter-spacing:.12em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ═══════════════════════ OUTRO ═══════════════════════ */

.outro{
  padding:clamp(60px,12vh,140px) clamp(20px,5vw,64px) clamp(70px,14vh,150px);
  border-top:1px solid var(--hair);
}
.outro-inner{ max-width:var(--maxw); margin:0 auto; }
.outro-line{
  margin:0;
  max-width:20ch;
  font-size:clamp(1.7rem,4.2vw,3.1rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.04em;
  text-wrap:balance;
}
.outro-links{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px; }
.outro-links a{
  padding:12px 22px;
  border-radius:12px;
  font-size:14.5px; font-weight:500;
  letter-spacing:-.012em;
  color:var(--ink);
  text-decoration:none;
  background:var(--tint);
  transition:background .3s ease, color .3s ease, transform .3s var(--ease);
}
.outro-links a:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.outro-fine{
  margin:46px 0 0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

/* ═══════════════════════ TABLET ═══════════════════════ */

@media (max-width:1080px){
  .stage{ grid-template-columns:140px 52px minmax(0,1fr); }
  .tile{ width:78px; height:78px; border-radius:17px; }
  .tile-slot{ height:110px; }
  .modules{ grid-template-columns:1fr; }
}

/* ═══════════════════════ MOBILE ═══════════════════════ */

@media (max-width:860px){

  /* ── hero: copy on top, video below ── */
  .hero-card{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    align-items:stretch;
    min-height:min(92svh,900px);
  }
  .hero-copy{
    order:-1;
    align-self:start;
    padding:clamp(34px,6svh,56px) 22px 0;
  }
  .hero-name{ font-size:clamp(2.1rem,9.4vw,3.1rem); }
  .hero-lede{ max-width:38ch; font-size:clamp(.92rem,3.7vw,1.05rem); }
  .cta{ margin-top:26px; padding:13px 22px; font-size:1rem; }

  .hero-video{ align-self:end; padding-left:0; }
  .hero-video video{ --cap:min(56svh,520px); }

  /* ── career: horizontal timeline ── */
  .career{ height:360vh; }
  .career-sticky{ padding:clamp(18px,3svh,30px) 20px clamp(16px,3svh,28px); }
  .career-title{ margin-bottom:16px; font-size:clamp(1.35rem,6vw,1.8rem); }

  .stage{
    grid-template-columns:1fr;
    grid-template-rows:auto auto minmax(0,1fr);
    gap:0;
  }

  /* axis first, laid on its side */
  .axis{
    order:-2;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:0 2px;
  }
  .axis-cap{ font-size:11.5px; }
  .axis-track{
    width:auto; height:4px;
    flex:1;
  }
  .axis-fill{
    top:0; bottom:0; left:0; right:auto;
    height:auto; width:0;
  }
  .axis-dot{
    top:50%; left:0;
    width:15px; height:15px;
    margin-left:-7.5px; margin-top:-7.5px;
  }

  /* three tiles side by side under the line */
  .rail-col{
    order:-1;
    flex-direction:row;
    justify-content:space-around;
    align-items:flex-start;
    padding:14px 0 4px;
  }
  .tile-slot{ height:auto; gap:6px; flex:1; }
  .tile{ width:62px; height:62px; border-radius:15px; transform:scale(.62); }
  .tile-date{ font-size:10.5px; }

  .panels{ padding-top:10px; }
  .panel-step h3{ font-size:clamp(1rem,4.4vw,1.22rem); margin-bottom:12px; }
  .panel-step .grp{ font-size:12px; margin:10px 0 4px; }
  .panel-step ul li{ font-size:12px; line-height:1.4; padding-left:15px; }
  .panel-step ul li + li{ margin-top:4px; }




  .modules{ grid-template-columns:1fr; gap:12px; }
  .reasons li{ grid-template-columns:1fr; gap:5px; }
  .reasons .num{ font-size:1.4rem; opacity:.22; }
  .made-steps{ gap:9px 0; flex-direction:column; }
}

/* Short phones (SE-class). The pinned stage is capped at the viewport, so on
   a 667px screen the chrome has to give up room or the dense panels clip. */
@media (max-width:860px) and (max-height:720px){
  .career-sticky{ padding-top:12px; padding-bottom:12px; }
  .career-head{ margin-bottom:10px; }
  .career-title{ font-size:1.18rem; }
  .career-sub{ display:none; }
  .rail-col{ padding:10px 0 2px; }
  .tile{ width:50px; height:50px; border-radius:12px; }
  .tile-date{ font-size:9.5px; }
  .panels{ padding-top:6px; }
  .panel-step h3{ font-size:1rem; margin-bottom:9px; }
  .panel-step ul li{ font-size:11.5px; line-height:1.38; }
}

@media (max-width:390px){
  .tile{ width:54px; height:54px; border-radius:13px; }
  .axis-cap{ font-size:10.5px; }
}

/* ═══════════════════════ A11Y ═══════════════════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
}