/* ═══════════════════════════════════════════════════════════════
   index2.html stylesheet
   Everything you'd want to reskin lives in the :root block below —
   swap the color values or type-scale sizes and the whole page follows.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ---------- Color palette — edit here to reskin ---------- */
  --ink:#0F1923;        /* page background        */
  --ink-2:#0A1017;      /* deeper wells, tag chips */
  --surface:#1B2733;    /* cards, panels          */
  --surface-2:#1E2B38;  /* card hover             */
  --line:#2A3945;       /* hairlines              */
  --bone:#ECE8E1;       /* headings, warm white   */
  --text:#AEB9C2;       /* body copy              */
  --muted:#7C8B99;      /* labels, meta           */

  --accent:#8b65d8;       /* marks & small text on dark */
  --accent-solid:#8B5CF6; /* filled buttons, bone text  */
  --accent-deep:#4C2E86;  /* quiet borders and ticks    */
  --cyan:#28E0C6;         /* cold accent — status dot, card tags */

  /* ISO purple — drives the player card frame and the background animation */
  --iso-violet:#8B5CF6;
  --iso-violet-dim:#4C2E86;
  --iso-black:#0A0612;

  /* ---------- Type scale — edit here to resize ---------- */
  --display:"Big Shoulders Display", Impact, sans-serif;
  --body:"Barlow", system-ui, -apple-system, sans-serif;
  --util:"Barlow Condensed", "Barlow", sans-serif;

  /* Font-size multiplier — scales every font on the page at once (spacing,
     cards and layout stay put). 1 = design size; e.g. .9 smaller, 1.1 larger. */
  --fs-scale:0.95;

  /* Per-section multipliers — stack on top of --fs-scale
     (a section's fonts = design size × --fs-scale × its own value). */
  --fs-sidebar:1.07;
  --fs-hero:1.2;
  --fs-skills:1;
  --fs-education:0.9;
  --fs-experience:1;
  --fs-projects:0.8;
  --fs-extracurriculars:1;
  --fs-contact:1;
  --fs-footer:1;

  --fs-root:16.5px;                     /* base body copy size          */
  --fs-hero-name:clamp(70px,12vw,188px);/* hero headline                */
  --fs-h2:clamp(36px,5.4vw,58px);       /* section headings             */
  --fs-tagline:18px;                    /* hero tagline paragraph       */
  --fs-card-h3:32px;                    /* project card titles          */
  --fs-job-title:19.5px;                /* education/experience titles  */
  --fs-fact-value:17.5px;               /* hero stat values             */
  --fs-nav:14px;                        /* rail section-nav links       */
  --fs-label:12.5px;                    /* small tracked-out labels     */
  --fs-card-stat:25px;                  /* project card metric number   */
  --fs-playercard-name:26px;            /* player-card name (bottom-left)*/

  --notch:12px;
  --sidebar-w:240px;
}

/* Per-section font scale wiring — see --fs-scale / --fs-<section> above. */
:root{--fs-s:var(--fs-scale)}
.bar{--fs-s:calc(var(--fs-scale) * var(--fs-sidebar))}
#home{--fs-s:calc(var(--fs-scale) * var(--fs-hero))}
#skills{--fs-s:calc(var(--fs-scale) * var(--fs-skills))}
#education{--fs-s:calc(var(--fs-scale) * var(--fs-education))}
#experience{--fs-s:calc(var(--fs-scale) * var(--fs-experience))}
#projects{--fs-s:calc(var(--fs-scale) * var(--fs-projects))}
#extracurriculars{--fs-s:calc(var(--fs-scale) * var(--fs-extracurriculars))}
#contact{--fs-s:calc(var(--fs-scale) * var(--fs-contact))}
body > footer{--fs-s:calc(var(--fs-scale) * var(--fs-footer))}
.bar,#home,#skills,#education,#experience,#projects,#extracurriculars,#contact,body > footer{
  font-size:calc(var(--fs-root) * var(--fs-s));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:24px;overflow-x:hidden}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:calc(var(--fs-root) * var(--fs-s));
  line-height:1.65;
  margin-left:var(--sidebar-w);
  max-width:100vw;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(236,232,225,.02) 0 1px,transparent 1px 3px);
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--ink)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--ink);padding:10px 18px;
  font-family:var(--util);letter-spacing:.16em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.notch{clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}

.label{
  font-family:var(--util);font-weight:600;font-size:calc(var(--fs-label) * var(--fs-s));
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}

/* ---------- Interactive ISO background ----------
   Fixed behind everything (z-index:-1), painted by NeonMandala at the
   bottom of index2.html. No fill of its own — stays transparent so the
   body's own background shows through beneath the glowing strokes. */
#seal{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;
  display:block;
}

/* ───────────── Side bar ─────────────
   Same component, same design (colors, blur, border, fonts, dot animation,
   pill styles) — just reflowed as a fixed left column instead of a fixed
   top row. The nav now lives inside it, so it stays available at every
   scroll position instead of only within the hero. */
.bar{
  position:fixed;top:0;left:0;bottom:0;z-index:60;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  width:var(--sidebar-w);padding:32px 24px;
  background:rgba(10,16,23,.86);
  backdrop-filter:blur(12px);
  border-right:1px solid var(--line);
  overflow-y:auto;
}
.bar__id{display:flex;align-items:baseline;flex-wrap:wrap;gap:11px;flex:none}
.bar__id a{transition:opacity .2s}
.bar__id a:hover{opacity:.75}
.bar__id b{
  font-family:var(--util);font-weight:700;font-size:calc(18px * var(--fs-s));
  letter-spacing:.13em;text-transform:uppercase;color:var(--bone);
}
.bar__id span{
  font-family:var(--util);font-size:calc(var(--fs-label) * var(--fs-s));letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}
.bar__id span::before{content:"// "}
.bar__status{
  display:flex;align-items:center;gap:8px;flex:none;
  font-family:var(--util);font-size:calc(var(--fs-label) * var(--fs-s));letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.dot{width:7px;height:7px;background:var(--cyan);transform:rotate(45deg);animation:blip 2.4s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
/* Same nav — same font, size, spacing, colors, hover/active states as
   before — just stacked in a column instead of a row. */
.sidenav{display:flex;flex-direction:column;gap:20px}
.sidenav a{
  font-family:var(--util);font-size:calc(var(--fs-nav) * var(--fs-s));font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.sidenav a:hover{color:var(--bone)}
.sidenav a[aria-current="true"]{color:var(--bone);border-color:var(--accent)}
.sidenav__n{
  display:inline-grid;place-items:center;vertical-align:middle;
  width:26px;height:26px;margin-right:4px;
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color:var(--accent);
  font-size:calc(12px * var(--fs-s));
}
.bar__cta{display:flex;flex-wrap:wrap;gap:10px;flex:none;margin-top:auto}
.pill{
  font-family:var(--util);font-size:calc(13.5px * var(--fs-s));font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:8px 18px;border:1px solid var(--line);color:var(--text);
  transition:border-color .2s,color .2s,background .2s;
}
.pill:hover{border-color:var(--muted);color:var(--bone)}
.pill--solid{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--ink);font-weight:700}
.pill--solid:hover{background:var(--bone);border-color:var(--bone);color:var(--ink-2)}

/* ───────────── Hero ─────────────
   Base fill is translucent so the #seal canvas glows through. */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  padding:90px 0;
  background:
    radial-gradient(820px 560px at 82% 26%,rgba(255,70,85,.11),transparent 68%),
    radial-gradient(620px 420px at 6% 92%,rgba(40,224,198,.05),transparent 72%),
    linear-gradient(180deg,rgba(10,16,23,.55),rgba(15,25,35,.32) 62%);
}
.hero__grid{display:grid;grid-template-columns:52px 1fr;gap:40px;width:100%}

.rail{
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:4px 0;min-height:380px;
}
.rail__txt{
  writing-mode:vertical-rl;font-family:var(--util);font-size:calc(11.5px * var(--fs-s));
  letter-spacing:.44em;text-transform:uppercase;color:var(--muted);
}
.rail__ticks{display:flex;flex-direction:column;gap:7px;align-items:center}
.rail__ticks i{width:12px;height:1px;background:var(--line)}
.rail__ticks i:nth-child(2){background:var(--accent);width:20px}

.eyebrow{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.eyebrow i{
  font-style:normal;font-family:var(--util);font-weight:700;
  font-size:calc(15px * var(--fs-s));letter-spacing:.05em;color:var(--accent);flex:none;
}

/* Name + player card share a row */
.hero__top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}

.name{
  font-family:var(--display);font-weight:800;
  font-size:calc(var(--fs-hero-name) * var(--fs-s));line-height:.84;
  letter-spacing:-.005em;text-transform:uppercase;color:var(--bone);
  flex:1 1 420px;
}
.name .l2{
  display:block;color:transparent;
  -webkit-text-stroke:2px rgba(236,232,225,.7);
  margin-left:.05em;
}
.reveal{animation:wipe .9s cubic-bezier(.2,.8,.2,1) both}
.reveal.d2{animation-delay:.11s}
@keyframes wipe{
  from{clip-path:inset(0 100% 0 0);transform:translateX(-12px)}
  to{clip-path:inset(0 0 0 0);transform:none}
}

.tagline{max-width:56ch;margin-top:28px;font-size:calc(var(--fs-tagline) * var(--fs-s));color:var(--text)}
.tagline strong{color:var(--bone);font-weight:600}

.facts{display:flex;flex-wrap:wrap;gap:28px;margin:38px 0 44px}
.fact{border-left:2px solid var(--accent-deep);padding-left:14px}
.fact dt{font-family:var(--util);font-size:calc(11.5px * var(--fs-s));letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.fact dd{
  font-family:var(--util);font-size:calc(var(--fs-fact-value) * var(--fs-s));letter-spacing:.07em;
  text-transform:uppercase;font-weight:600;color:var(--bone);margin-top:2px;
}

.jump{display:flex;flex-wrap:wrap;gap:12px}
.jump a{
  position:relative;overflow:hidden;
  font-family:var(--util);font-size:calc(14.5px * var(--fs-s));font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text);
  border:1px solid var(--line);padding:11px 22px;
  transition:color .22s,border-color .22s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.jump a::after{
  content:"";position:absolute;inset:0;background:var(--accent-solid);z-index:0;
  transform:translateX(-101%) skewX(-14deg);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.jump a span{position:relative;z-index:1}
.jump a:hover{border-color:var(--accent-solid);color:var(--ink)}
.jump a:hover::after{transform:translateX(0) skewX(0)}

/* ───────────── Player card ─────────────
   Format follows a Valorant agent-reveal card: square corner ticks, a small
   top badge + rules, a full-bleed photo with a vertical side label, and a
   bottom-left name block with a thin foot rule. No scan animation. */
.playercard{
  flex:none;width:280px;
  animation:pc-in .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.25s;
}
@keyframes pc-in{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:none}}

.playercard__frame{
  position:relative;aspect-ratio:320/472;
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(165deg,#1B1C20,#111216 85%);
  border:1px solid rgba(139,92,246,.22);
  box-shadow:0 0 0 1px rgba(139,92,246,.1),0 22px 40px rgba(0,0,0,.4);
}

.playercard__corner{position:absolute;width:4px;height:4px;background:var(--iso-violet);opacity:.75;z-index:3}
.playercard__corner--tl{top:10px;left:10px}
.playercard__corner--tr{top:10px;right:10px}
.playercard__corner--bl{bottom:10px;left:10px}
.playercard__corner--br{bottom:10px;right:10px}

.playercard__topline{flex:none;display:flex;align-items:center;gap:9px;padding:14px 14px 0}
.playercard__badge{
  flex:none;width:22px;height:22px;display:grid;place-items:center;
  border:1px solid var(--iso-violet-dim);background:rgba(139,92,246,.08);
  color:var(--iso-violet);font-size:calc(10px * var(--fs-s));
}
.playercard__rule{height:1px;background:rgba(236,232,225,.3)}
.playercard__rule--sm{flex:none;width:20px}
.playercard__rule--lg{flex:1}

.playercard__art{position:relative;flex:1;min-height:0;margin-top:12px;overflow:hidden;background:#0D0E11}
.playercard__art img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  display:block;filter:grayscale(.08) contrast(1.05) saturate(1.05);
}
.playercard__art-fallback{
  display:none;position:absolute;inset:0;z-index:1;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:calc(56px * var(--fs-s));letter-spacing:.04em;
  color:var(--iso-violet-dim);
}
.playercard__art--empty .playercard__art-fallback{display:flex}

.playercard__foot{flex:none;padding:14px 16px 16px}
.playercard__name{
  display:block;font-family:var(--display);font-weight:800;font-size:calc(var(--fs-playercard-name) * var(--fs-s));
  line-height:.92;letter-spacing:.01em;text-transform:uppercase;color:var(--bone);
}
.playercard__name .first{display:block}
.playercard__name .last{display:block;color:transparent;-webkit-text-stroke:1.3px rgba(236,232,225,.6)}
.playercard__footrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.playercard__role{
  font-family:var(--util);font-size:calc(11px * var(--fs-s));letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.playercard__footrow-right{display:flex;align-items:center;gap:8px}
.playercard__mark{font-family:var(--display);font-size:calc(15px * var(--fs-s));color:var(--iso-violet)}

/* ───────────── Sections ───────────── */
section{padding:104px 0}
.sechead{
  display:flex;align-items:flex-end;gap:20px;margin-bottom:44px;
  border-bottom:1px solid var(--line);padding-bottom:16px;
}
.sechead__n{
  font-family:var(--util);font-weight:700;font-size:calc(14px * var(--fs-s));letter-spacing:.2em;
  color:var(--accent);flex:none;padding-bottom:9px;
  font-variant-numeric:tabular-nums;
}
.sechead h2{
  font-family:var(--display);font-weight:800;
  font-size:calc(var(--fs-h2) * var(--fs-s));line-height:.92;
  text-transform:uppercase;color:var(--bone);letter-spacing:.005em;
}
.sechead p{
  margin-left:auto;text-align:right;max-width:34ch;
  color:var(--muted);font-size:calc(14.5px * var(--fs-s));line-height:1.5;
}

.fade{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.fade.in{opacity:1;transform:none}

/* ── 01 Skills ──
   Shares the .hscroll horizontal-scroll-strip treatment with Projects —
   see that section for the shared rules and the scroll arrows. */
/* Two-layer notch "border": clip-path clips corners diagonally, but a plain
   border never draws along that diagonal cut — so the outer layer (this
   element) supplies the ring color, and an inset ::before supplies the
   surface color, leaving a uniform colored edge all the way round,
   including the notched corner. */
.col{
  position:relative;background:var(--line);padding:22px 20px;
  flex:0 0 260px;scroll-snap-align:start;
  transition:background .22s;
}
.col::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--surface);
  clip-path:polygon(
    calc(var(--notch) - 1px) 0,100% 0,
    100% calc(100% - var(--notch) + 1px),
    calc(100% - var(--notch) + 1px) 100%,
    0 100%,0 calc(var(--notch) - 1px)
  );
}
.col:hover{background:var(--accent)}
.col__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:4px;
}
.col__h b{
  font-family:var(--util);font-weight:700;font-size:calc(16.5px * var(--fs-s));
  letter-spacing:.17em;text-transform:uppercase;color:var(--bone);
}
.col__h i{font-family:var(--util);font-style:normal;font-size:calc(11.5px * var(--fs-s));letter-spacing:.2em;color:var(--accent)}
.col ul{list-style:none}
.col li{
  padding:10px 0;border-bottom:1px dashed rgba(42,57,69,.7);
  font-family:var(--util);font-size:calc(16.5px * var(--fs-s));letter-spacing:.07em;
  text-transform:uppercase;color:var(--text);
  transition:color .18s,padding-left .18s;
}
.col li:last-child{border-bottom:0}
.col li:hover{color:var(--accent);padding-left:6px}

/* ── 02 Experience / Education ── */
/* Same two-layer notch "border" as the skills cards — see .col above. */
.board{position:relative;background:var(--line);transition:background .22s}
.board::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--surface);
  clip-path:polygon(
    calc(var(--notch) - 1px) 0,100% 0,
    100% calc(100% - var(--notch) + 1px),
    calc(100% - var(--notch) + 1px) 100%,
    0 100%,0 calc(var(--notch) - 1px)
  );
}
.board:hover{background:var(--accent)}
.job{
  display:grid;grid-template-columns:3px 1.15fr 1fr 168px;
  align-items:start;gap:22px;
  padding:24px 26px 24px 0;
  border-bottom:1px solid var(--line);transition:background .22s;
}
.job:last-child{border-bottom:0}
.job:hover{background:var(--surface-2)}
.job__mark{width:3px;align-self:stretch;min-height:56px;background:var(--line)}
.job--now .job__mark{background:var(--accent)}
.job b{
  font-family:var(--util);font-weight:700;font-size:calc(var(--fs-job-title) * var(--fs-s));
  letter-spacing:.08em;text-transform:uppercase;color:var(--bone);display:block;
}
.job__org{
  font-family:var(--util);font-size:calc(14.5px * var(--fs-s));letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:3px;display:block;
}
.job p{font-size:calc(15px * var(--fs-s));color:var(--text);margin-top:2px}
.job__points{list-style:none;margin-top:6px}
.job__points li{
  position:relative;padding-left:16px;margin-top:7px;
  font-size:calc(15px * var(--fs-s));line-height:1.5;color:var(--text);
}
.job__points li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;background:var(--cyan);
  transform:rotate(45deg);
}
.job .tags{margin-top:11px}
.job time{
  font-family:var(--util);font-size:calc(14.5px * var(--fs-s));letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right;display:block;padding-top:3px;
}
.job--now time{color:var(--accent)}

/* ── Shared horizontal scroll strip (Skills + Projects) ──
   A flex row that never wraps, so overflow-x is always there to scroll
   through the cards side to side. */
.hscroll-wrap{position:relative}
.hscroll{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;
  padding:16px 0 20px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--accent-deep) var(--surface);
}
.hscroll::-webkit-scrollbar{height:8px}
.hscroll::-webkit-scrollbar-track{background:var(--surface)}
.hscroll::-webkit-scrollbar-thumb{background:var(--accent-deep)}
.hscroll::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* Scrollability hint — pinned outside the scrolling strip (so it never
   scrolls away with the content) as a double hollow chevron, pulsing in
   the same violet glow/stroke style as the #seal background fractal.
   Real <button>s underneath: click to page the strip left/right. */
.scroll-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:26px;height:20px;z-index:2;
  background:none;border:0;padding:0;cursor:pointer;
  filter:drop-shadow(0 0 6px var(--cyan));
  animation:scroll-arrow-pulse 1.8s ease-in-out infinite;
}
.scroll-arrow i{
  position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;
  border:0 solid var(--cyan);
}
.scroll-arrow i:first-child{left:0}
.scroll-arrow i:last-child{left:9px}
.scroll-arrow--left{left:-6px}
.scroll-arrow--right{right:-6px}
.scroll-arrow--left i{border-top-width:2px;border-left-width:2px;transform:rotate(-45deg)}
.scroll-arrow--right i{border-top-width:2px;border-right-width:2px;transform:rotate(45deg)}
@keyframes scroll-arrow-pulse{
  0%,100%{opacity:.35;transform:translateY(-50%) scale(.9)}
  50%{opacity:1;transform:translateY(-50%) scale(1.2)}
}

/* ── 03 Projects ── */
/* Same two-layer notch "border" as the skills cards — see .col above. */
.card{
  position:relative;background:var(--line);
  padding:26px 24px;display:flex;flex-direction:column;gap:15px;
  flex:0 0 min(420px,85%);scroll-snap-align:start;
  transition:transform .26s,background .26s,box-shadow .26s;
}
.card::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--surface);transition:background .26s;
  clip-path:polygon(
    calc(var(--notch) - 1px) 0,100% 0,
    100% calc(100% - var(--notch) + 1px),
    calc(100% - var(--notch) + 1px) 100%,
    0 100%,0 calc(var(--notch) - 1px)
  );
}

.card:hover{transform:translateY(-5px);background:var(--accent);box-shadow:0 12px 30px rgba(255,70,85,.14)}
.card:hover::before{background:var(--surface-2)}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card__kind{
  font-family:var(--util);font-size:calc(11.5px * var(--fs-s));font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  border:1px solid rgba(40,224,198,.4);padding:3px 10px;
}
.card__n{
  font-family:var(--util);font-size:calc(12.5px * var(--fs-s));letter-spacing:.2em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.card h3{
  font-family:var(--display);font-weight:700;font-size:calc(var(--fs-card-h3) * var(--fs-s));
  line-height:1;text-transform:uppercase;color:var(--bone);
}
.card h3 a{transition:color .2s}
.card h3 a:hover{color:var(--accent)}
/* Media slot under the title — fixed 4:3 frame so mixed image/video sizes
   never change card size or throw the row out of alignment. The media is
   shown whole (contain, not cropped); tall or wide shots get a blurred,
   dimmed copy of themselves (--media-bg, set in JS) behind the letterbox. */
.card__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;flex:none;isolation:isolate;
  background:var(--ink-2);border:1px solid var(--line);
  transition:border-color .26s;
}
.card__media::before{
  content:"";position:absolute;inset:-24px;z-index:-1;
  background:var(--media-bg,none) center/cover no-repeat;
  filter:blur(18px) brightness(.45) saturate(1.2);
}
.card__media img,.card__media video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
}
.card:hover .card__media{border-color:var(--accent)}
.card__media--empty{
  background:repeating-linear-gradient(135deg,var(--ink-2) 0 10px,transparent 10px 20px);
  opacity:.5;
}
.card p{font-size:calc(15.5px * var(--fs-s));flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.tags li{
  font-family:var(--util);font-size:calc(12.5px * var(--fs-s));letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
  background:var(--ink-2);padding:3px 10px;
}
.card__stat{
  display:flex;align-items:baseline;gap:10px;
  border-top:1px solid var(--line);padding-top:14px;
}
.card__stat b{
  font-family:var(--util);font-size:calc(var(--fs-card-stat) * var(--fs-s));font-weight:700;letter-spacing:.04em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.card__stat span{
  font-family:var(--util);font-size:calc(11.5px * var(--fs-s));letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}

/* ── 04 Extracurriculars ── */
/* .extras is fill-based (its background shows through the grid gaps as the
   dividers/border), so it already clips cleanly at the notched corner —
   just add the same hover-to-accent used by the other card sections. */
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;background:var(--line);transition:background .22s}
.extras:hover{background:var(--accent)}
.extra{background:var(--ink);padding:24px 24px 26px;transition:background .22s}
.extra:hover{background:var(--surface)}
.extra .label{display:block;margin-bottom:9px}
.extra b{
  font-family:var(--util);font-weight:700;font-size:calc(19px * var(--fs-s));
  letter-spacing:.09em;text-transform:uppercase;color:var(--bone);display:block;
}
.extra p{font-size:calc(15px * var(--fs-s));margin-top:7px}

/* ───────────── Contact ───────────── */
.contact{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-top:1px solid var(--accent-deep);
  background:linear-gradient(150deg,var(--surface),#241A20 78%);
  padding:56px 44px;
}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 260px at 12% 0%,rgba(110, 70, 255, 0.16),transparent 70%);
}
.contact > *{position:relative}
.contact h2{
  font-family:var(--display);font-weight:800;
  font-size:calc(clamp(38px,6.4vw,66px) * var(--fs-s));line-height:.9;
  text-transform:uppercase;color:var(--bone);margin:10px 0 16px;
}
.contact p{max-width:50ch;margin-bottom:32px}
.contact__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.btn{
  display:inline-block;background:var(--accent-solid);color:var(--ink);
  font-family:var(--util);font-weight:700;font-size:calc(17.5px * var(--fs-s));
  letter-spacing:.18em;text-transform:uppercase;
  padding:14px 34px;transition:background .2s,color .2s,transform .2s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.btn:hover{background:var(--bone);color:var(--ink-2);transform:translateY(-2px)}
.links{display:flex;flex-wrap:wrap;gap:24px}
.links a{
  font-family:var(--util);font-size:calc(14.5px * var(--fs-s));letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s;
}
.links a:hover{color:var(--bone);border-color:var(--accent)}

footer{border-top:1px solid var(--line);padding:26px 0;margin-top:88px}
.foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.foot p{
  font-family:var(--util);font-size:calc(var(--fs-label) * var(--fs-s));letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}

/* ───────────── Responsive ───────────── */
@media (max-width:960px){
  :root{--sidebar-w:200px}
  .bar{gap:16px;padding:24px 18px}
  .bar__status{display:none}
}
@media (max-width:820px){
  html{scroll-padding-top:76px}
  /* The desktop clamp's 70px floor doesn't shrink past that on narrow
     phones, which was wide enough to force horizontal overflow — give it
     a smaller floor that actually scales down with the viewport. */
  :root{--fs-hero-name:clamp(48px,14vw,110px)}
  .wrap{padding:0 28px}
  /* Smartphone / narrow view — the side panel becomes a top bar again. */
  .bar{
    top:0;left:0;right:0;bottom:auto;
    flex-direction:row;flex-wrap:wrap;align-items:center;
    width:100%;height:auto;min-height:60px;
    padding:10px 20px;gap:16px;
    border-right:none;border-bottom:1px solid var(--line);
    overflow:visible;
  }
  .bar__cta{margin-top:0;margin-left:auto}
  body{margin-left:0}
  .hero{min-height:auto;padding:104px 0 70px}
  .hero__grid{grid-template-columns:1fr;gap:0}
  .sidenav{display:none}
  .rail{display:none}
  /* First section (hero) centers its content on mobile. */
  .eyebrow{justify-content:center}
  .hero__top{flex-wrap:wrap-reverse;justify-content:center;gap:24px}
  .name{text-align:center}
  .tagline{text-align:center;margin-left:auto;margin-right:auto}
  .facts{justify-content:center}
  .jump{justify-content:center}
  .playercard{width:210px}
  .sechead{flex-direction:column;align-items:flex-start;gap:8px}
  .sechead p{margin-left:0;text-align:left}
  .job{grid-template-columns:3px 1fr;gap:6px 18px;padding:20px 18px 20px 9px;display:inline-table}
  .job time{text-align:left;grid-column:2}
  .contact{padding:40px 26px}
}
@media (max-width:520px){
  .bar__id span{display:none}
  section{padding:74px 0}
  .jump{gap:8px}
  .jump a{padding:10px 16px;font-size:calc(13.5px * var(--fs-s))}
  .playercard{width:100%;max-width:280px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fade{opacity:1;transform:none}
}