/* ==========================================================
   Angel Moreno — redesign
   Paper + hairline grid + mono HUD + lime accent
   ========================================================== */
:root{
  --paper:#fbfaf4;
  --paper-2:#efede7;
  --ink:#0d0d0d;
  --ink-dim:#6f6d66;
  --line:rgba(13,13,13,.12);
  --lime:#c0fe04;
  --sky:#bfddf0;
  --sky-deep:#8ec3e6;
  --night:#07080c;

  --f-display:"TikTok Sans", "Inter", system-ui, sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter:clamp(16px, 2.2vw, 32px);
  --hud-h:56px;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-mono);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.mono{ font-family:var(--f-mono); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

::selection{ background:var(--lime); color:var(--ink); }

/* ---------- precision grid (fixed, behind everything) ---------- */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  --cell:calc((100vw - var(--gutter)*2) / 4);
}
.grid-bg::before{
  content:""; position:absolute; inset:0 var(--gutter);
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / var(--cell) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 1px);
}
.grid-bg .cross{
  position:absolute; width:11px; height:11px; translate:-5px -5px;
}
.grid-bg .cross::before, .grid-bg .cross::after{
  content:""; position:absolute; background:var(--ink); opacity:.45;
}
.grid-bg .cross::before{ left:5px; top:0; width:1px; height:11px; }
.grid-bg .cross::after{ top:5px; left:0; height:1px; width:11px; }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--paper);
  display:grid; place-items:center;
  transition:background-color .6s ease, opacity .5s ease .1s, visibility 0s linear .6s;
}
.loader__track{
  width:48px; height:1px; background:rgba(13,13,13,.18); position:relative; overflow:hidden;
}
.loader__fill{
  position:absolute; inset:0; background:var(--ink);
  transform-origin:left; transform:scaleX(var(--p,0));
  transition:transform .35s var(--ease-out);
}
.loader__pct{
  position:absolute; top:calc(50% + 14px); left:50%; translate:-50% 0;
  font:400 11px/1 var(--f-mono); letter-spacing:.08em; color:var(--ink-dim);
}
.loader.is-done{ background:var(--paper-2); opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px var(--gutter);
  font:400 13px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.02em;
  pointer-events:none;
  mix-blend-mode:normal;
}
.topbar > *{ pointer-events:auto; }
.brand{
  font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:-.01em;
  text-decoration:none;
}
.nav{ display:flex; gap:clamp(14px, 3vw, 44px); list-style:none; }

.ctl{
  appearance:none; background:none; border:0; color:inherit; cursor:pointer;
  font:inherit; text-transform:inherit; letter-spacing:inherit; text-decoration:none;
  position:relative; padding:6px 4px; display:inline-block;
}
.ctl::before{
  content:""; position:absolute; inset:0;
  border:2px solid currentColor; opacity:0; transform:scale(.92);
  transition:opacity .15s ease, transform .15s ease;
}
.ctl:hover::before, .ctl:focus-visible::before, .ctl[aria-current="true"]::before{ opacity:1; transform:scale(1); }
.ctl:focus-visible{ outline:none; }
.ctl .state{ display:inline-block; min-width:1ch; text-align:center; }

.menu-btn{ display:none; }

/* ---------- bottom HUD ---------- */
.hud{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:14px var(--gutter);
  font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.04em;
  pointer-events:none;
}
.hud__left{ display:flex; gap:14px; }
.hud__coords{ font-variant-numeric:tabular-nums; }
.hud__right{ justify-self:end; display:flex; gap:12px; align-items:center; }
.hud__orbit{ width:22px; height:22px; }
.hud__orbit .sat{ transform-origin:11px 11px; animation:orbit 6s linear infinite; }
@keyframes orbit{ to{ transform:rotate(360deg); } }

/* scroll indicator */
.scrollbar{
  position:fixed; right:calc(var(--gutter) - 6px); top:50%; z-index:100;
  width:2px; height:60px; translate:0 -50%; background:var(--line);
}
.scrollbar__thumb{ position:absolute; left:0; right:0; top:0; height:16px; background:var(--ink); }

/* ---------- sections ---------- */
main{ position:relative; z-index:1; }
section{ position:relative; }

/* ---------- HERO ---------- */
.hero{
  height:100svh; min-height:560px;
  position:relative; overflow:hidden;
  background:var(--sky);
  color:var(--ink);
}
.hero__sky{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__sky--fallback{
  background:
    radial-gradient(120% 80% at 70% 20%, #e8f4fb 0%, transparent 60%),
    radial-gradient(90% 70% at 10% 90%, #a9d2ee 0%, transparent 60%),
    var(--sky);
}
.hero__grid{
  position:absolute; inset:0; pointer-events:none;
  --cell:calc((100vw - var(--gutter)*2) / 4);
}
.hero__grid::before{
  content:""; position:absolute; inset:0 var(--gutter);
  background:
    linear-gradient(90deg, rgba(13,13,13,.10) 1px, transparent 1px) 0 0 / var(--cell) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(13,13,13,.10) 1px),
    linear-gradient(rgba(13,13,13,.10) 1px, transparent 1px) 0 33.333% / 100% 100% no-repeat;
}

.hero__top{
  position:absolute; left:var(--gutter); right:var(--gutter); top:64px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  z-index:3;
}
.hero__top > *{ padding-right:24px; }
.hero__role{
  font:500 clamp(20px, 2vw, 30px)/1.15 var(--f-display); letter-spacing:-.01em;
}
.hero__motto{ font-size:13px; line-height:1.5; }
.hero__bio{ grid-column:3 / span 2; font-size:13px; line-height:1.5; max-width:46ch; }
.redact{
  background:var(--ink); color:transparent; border-radius:1px;
  padding:0 .1em; transition:background-color .25s ease, color .25s ease;
  cursor:help;
}
.redact:hover, .redact:focus{ background:var(--lime); color:var(--ink); outline:none; }

.hero__title{
  position:absolute; left:var(--gutter); bottom:calc(var(--hud-h) + 24px); z-index:4;
  font:700 clamp(44px, 6.2vw, 96px)/.96 var(--f-display);
  text-transform:uppercase; letter-spacing:-.02em;
}
.hero__title .line{ display:block; }
.hero__title .amp{
  display:inline-grid; place-items:center;
  width:.9em; height:.9em; border-radius:50%;
  background:var(--ink); color:var(--lime);
  font-size:.62em; vertical-align:.12em;
}

/* floating objects */
.hero__objects{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.obj{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  translate:-50% -50%;
  will-change:transform;
  pointer-events:auto;
}
.obj__inner{
  animation:bob var(--dur,7s) ease-in-out var(--delay,0s) infinite alternate;
  transition:transform .5s var(--ease-out);
}
.obj:hover .obj__inner{ transform:scale(1.08) rotate(var(--tilt, -6deg)); }
.obj img{ width:100%; height:auto; filter:drop-shadow(0 24px 30px rgba(30,70,110,.25)); user-select:none; -webkit-user-drag:none; }
@keyframes bob{
  from{ transform:translate3d(0,-6px,0) rotate(calc(var(--rot,0deg) - 2deg)); }
  to  { transform:translate3d(0, 8px,0) rotate(calc(var(--rot,0deg) + 2deg)); }
}
/* placeholder shapes until generated objects land */
.obj--ph .obj__inner{
  aspect-ratio:1; border-radius:42%;
  background:radial-gradient(60% 60% at 35% 30%, #fff 0%, #d8ecf8 35%, #9ccbea 100%);
  box-shadow:inset -10px -16px 30px rgba(40,90,140,.25), 0 24px 30px rgba(30,70,110,.18);
  display:grid; place-items:center;
  font:400 10px/1.2 var(--f-mono); text-transform:uppercase; color:rgba(13,13,13,.5); text-align:center;
}
.obj--hero{ z-index:1; }

/* ---------- placeholder ported sections (refined one by one later) ---------- */
.block{
  padding:clamp(96px, 14vh, 160px) var(--gutter);
  border-top:1px solid var(--line);
}
.label{
  font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em;
  display:flex; align-items:center; gap:10px; margin-bottom:28px;
}
.label::before{ content:""; width:7px; height:7px; background:var(--ink); }
.block h2{
  font:400 clamp(30px, 4.2vw, 60px)/1.08 var(--f-display); letter-spacing:-.02em;
  max-width:22ch; margin-bottom:40px;
}
.block p{ max-width:62ch; margin-bottom:16px; color:#2b2a27; }

.intro{
  display:grid; grid-template-columns:1fr 3fr; gap:var(--gutter);
}
.intro__text{
  font:400 clamp(26px, 3.6vw, 52px)/1.12 var(--f-display); letter-spacing:-.02em;
}
.intro__text .dim{ color:var(--ink-dim); }
.intro__text a{ text-decoration-thickness:2px; text-underline-offset:.12em; }

.tiles{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--gutter); }
.tile{ text-decoration:none; display:block; }
.tile__media{
  position:relative; aspect-ratio:4/3; background:var(--paper-2); overflow:hidden;
}
.tile__media img{ width:100%; height:100%; object-fit:cover; }
.tile__tag{
  position:absolute; top:0; right:0; z-index:2;
  background:var(--lime); font:500 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em;
  padding:5px 7px;
}
.tile__meta{
  display:flex; justify-content:space-between; gap:12px; padding-top:10px;
  font:400 13px/1.3 var(--f-mono); text-transform:uppercase;
}
.tile--ph .tile__media{ display:grid; place-items:center; border:1px dashed var(--line); background:transparent; color:var(--ink-dim); font-size:12px; text-transform:uppercase; }

.contact{
  min-height:100svh; background:var(--night); color:#f3f2ec;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--gutter); padding-bottom:calc(var(--hud-h) + 40px);
}
.contact h2{
  font:700 clamp(44px, 7vw, 112px)/.95 var(--f-display); text-transform:uppercase; letter-spacing:-.02em;
  margin-bottom:40px;
}
.contact__links{ display:flex; flex-wrap:wrap; gap:24px; font:400 13px/1 var(--f-mono); text-transform:uppercase; }

/* HUD + topbar invert over dark sections */
body.on-dark .topbar, body.on-dark .hud{ color:#f3f2ec; }
body.on-dark .scrollbar__thumb{ background:#f3f2ec; }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- phone ---------- */
@media (max-width:760px){
  .nav{ display:none; }
  .menu-btn{ display:inline-block; }
  .nav.is-open{
    display:flex; flex-direction:column; gap:8px;
    position:fixed; inset:0; z-index:150; padding:80px var(--gutter);
    background:var(--paper); font-size:28px; font-family:var(--f-display); font-weight:700;
  }
  .topbar .menu-btn{ z-index:160; }
  .grid-bg, .hero__grid{ --cell:calc((100vw - var(--gutter)*2) / 2); }
  .hero__top{ grid-template-columns:1fr 1fr; top:56px; row-gap:14px; }
  .hero__bio{ display:none; }
  .hero__title{ top:auto; bottom:calc(var(--hud-h) + 12px); font-size:clamp(36px, 11vw, 56px); }
  .hud{ grid-template-columns:1fr auto; }
  .hud__coords{ display:none; }
  .scrollbar{ display:none; }
  .intro{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; }
}

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

/* hero objects on phone: smaller, kept clear of the headline */
@media (max-width:760px){
  .obj{ --w:22vw !important; }
  .obj--hero{ --w:58vw !important; --y:42% !important; --x:56% !important; }
  .hero__objects .obj:nth-child(6){ --x:18% !important; --y:46% !important; --w:16vw !important; }
  .hero__objects .obj:nth-child(2){ --x:84% !important; --y:21% !important; --w:17vw !important; }
  .hero__objects .obj:nth-child(5){ --w:13vw !important; --y:60% !important; --x:86% !important; }
}

/* ==========================================================
   ABOUT
   ========================================================== */
.about{
  padding:clamp(110px, 16vh, 180px) var(--gutter) clamp(90px, 12vh, 140px);
  background:var(--paper);
  position:relative; z-index:1;
}
.about::before{ /* section-local grid so it reads over the paper */
  content:""; position:absolute; inset:0 var(--gutter); pointer-events:none;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc((100% + 1px) / 4) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 1px);
}
.about > *{ position:relative; }

.sec-label{
  display:flex; align-items:center; gap:10px;
  font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em;
}
.sec-num{
  display:inline-grid; place-items:center; min-width:26px; height:18px; padding:0 4px;
  background:var(--ink); color:var(--lime); font-size:10px;
}
.sec-label--small{ margin-bottom:18px; }

.about__head{
  display:grid; grid-template-columns:repeat(4, 1fr);
  margin-bottom:clamp(64px, 10vh, 120px);
}
.about__head .sec-label{ padding-top:.9em; }
.about__intro{
  grid-column:2 / span 3; padding-left:1px;
  font:400 clamp(28px, 3.9vw, 60px)/1.1 var(--f-display); letter-spacing:-.025em;
  max-width:22ch;
}
.about__intro a{
  text-decoration:underline; text-decoration-thickness:.07em; text-underline-offset:.12em;
  transition:background-color .2s ease;
}
.about__intro a:hover, .about__intro a:focus-visible{ background:var(--lime); outline:none; }
/* scroll-linked word fill */
.about__intro .w{ color:rgba(13,13,13,.18); transition:color .25s linear; }
.about__intro .w.on{ color:var(--ink); }

.about__body{
  display:grid; grid-template-columns:repeat(4, 1fr);
  align-items:start;
  margin-bottom:clamp(72px, 11vh, 130px);
}
.about__body > *{ padding-right:24px; }

/* portrait */
.portrait{ grid-column:1; position:sticky; top:84px; }
.portrait__frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--sky);
}
.portrait__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.portrait__frame img.is-missing{ display:none; }
.portrait__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(70% 55% at 30% 25%, #eaf5fc 0%, transparent 70%),
    linear-gradient(160deg, #cfe6f4, #9ccbea);
}
.portrait__mono{
  font:700 clamp(56px, 7vw, 110px)/1 var(--f-display); letter-spacing:-.04em;
  color:rgba(255,255,255,.85);
  text-shadow:0 10px 30px rgba(30,70,110,.25);
}
.portrait__hint{
  position:absolute; left:10px; bottom:10px;
  font:400 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:rgba(13,13,13,.55);
}
.portrait__tag{
  position:absolute; top:0; right:0; z-index:2;
  background:var(--lime); font:500 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em;
  padding:5px 7px;
}
.signature{
  position:absolute; left:-4%; bottom:-34px; width:92%; z-index:3; overflow:visible; pointer-events:none;
}
.signature text{
  font:600 74px/1 "Caveat", cursive;
  fill:transparent; stroke:var(--lime); stroke-width:1.6;
  paint-order:stroke;
  stroke-dasharray:900; stroke-dashoffset:900;
  filter:drop-shadow(0 1px 0 rgba(13,13,13,.35));
}
.signature.draw text{
  animation:sign-stroke 2.2s cubic-bezier(.65,0,.35,1) forwards, sign-fill .6s ease 1.7s forwards;
}
@keyframes sign-stroke{ to{ stroke-dashoffset:0; } }
@keyframes sign-fill{ to{ fill:var(--lime); } }

/* body text */
.about__text{ grid-column:2 / span 2; padding-left:1px; }
.about__text p{ max-width:52ch; margin-bottom:18px; font-size:15px; line-height:1.65; color:#2b2a27; }

/* facts table */
.facts{ grid-column:4; padding-left:1px; font-size:12px; }
.facts > div{
  display:grid; grid-template-columns:1fr 1.4fr; gap:10px;
  padding:11px 0; border-top:1px solid var(--line);
}
.facts > div:last-child{ border-bottom:1px solid var(--line); }
.facts dt{ text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); }
.facts dd{ color:var(--ink); }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--lime); padding:2px 7px; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
}
.pill::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--ink);
  animation:blink 1.6s steps(2, jump-none) infinite;
}
@keyframes blink{ 50%{ opacity:.15; } }

@media (max-width:1000px){
  .about__body{ grid-template-columns:1fr 1fr; row-gap:48px; }
  .portrait{ grid-column:1; position:relative; top:0; }
  .about__text{ grid-column:2; }
  .facts{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .about::before{ background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc((100% + 1px) / 2) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 1px); }
  .about__head, .about__body{ grid-template-columns:1fr; }
  .about__head .sec-label{ margin-bottom:22px; padding-top:0; }
  .about__intro{ grid-column:1; }
  .about__body > *{ padding-right:0; }
  .portrait{ max-width:78%; }
  .about__text, .facts{ grid-column:1; }
}
@media (prefers-reduced-motion:reduce){
  .signature text{ stroke-dashoffset:0; fill:var(--lime); }
  .about__intro .w{ color:var(--ink); }
}
/* about: polish */
.about__head .sec-label{ align-self:start; }
.portrait__hint{ top:10px; bottom:auto; }
.facts{ padding-right:0 !important; }
@media (min-width:761px){
  .about__intro, .about__text, .facts{ padding-left:14px; }
}

/* ==========================================================
   MOTION LAYER v2 — curved reveal, ruler, marquee, tracks
   ========================================================== */

/* hero stays pinned while About rises over it with a curved edge */
.stage{ position:relative; }
.hero{ position:sticky; top:0; z-index:0; transform-origin:50% 30%;
  transform:scale(calc(1 - var(--cover,0) * .07)); }
.hero::after{ content:""; position:absolute; inset:0; background:var(--ink); opacity:calc(var(--cover,0) * .35); pointer-events:none; z-index:5; }
.about{
  z-index:2;
  border-top-left-radius:50% var(--arc, 0px);
  border-top-right-radius:50% var(--arc, 0px);
  box-shadow:0 -30px 60px rgba(13,40,70,.12);
}

/* header scroll ruler (tick marks fill as you scroll) */
.ruler{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:flex; align-items:center; gap:10px; pointer-events:none;
}
.ruler__ticks{ display:flex; align-items:center; gap:3px; height:14px; }
.ruler__ticks i{ width:1px; height:7px; background:currentColor; opacity:.22; transition:opacity .2s, height .2s; }
.ruler__ticks i:nth-child(5n+1){ height:12px; }
.ruler__ticks i.on{ opacity:.9; }
.ruler__ticks i.now{ opacity:1; height:14px; width:2px; background:currentColor; box-shadow:0 0 0 1px var(--lime); }
.ruler__val{ font-size:11px; font-variant-numeric:tabular-nums; min-width:3ch; }
@media (max-width:1100px){ .ruler{ display:none; } }

/* giant marquee driven by scroll velocity */
.marquee{
  margin:0 calc(var(--gutter) * -1) clamp(64px, 10vh, 120px);
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(6px, 1vw, 14px) 0; user-select:none;
}
.marquee__track{
  display:flex; align-items:center; gap:.28em; width:max-content;
  font:700 clamp(72px, 13vw, 220px)/.86 var(--f-display); text-transform:uppercase; letter-spacing:-.035em;
  will-change:transform;
}
.marquee__track span{ display:inline-block; }
.shape{ display:inline-block; width:.62em; height:.62em; flex:none; animation:spin 9s linear infinite; }
.shape--sq{ background:var(--lime); border-radius:.08em; }
.shape--ci{ background:var(--sky); border-radius:50%; box-shadow:inset -.06em -.08em 0 rgba(13,13,13,.12); animation:none; }
.shape--tri{ background:var(--ink); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.shape--star{ background:var(--lime); clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); animation-duration:5s; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* two tracks */
.tracks{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter);
  margin-top:clamp(40px, 6vh, 80px);
  perspective:1200px;
}
.track{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:min(560px, 72vh);
  padding:clamp(20px, 2.4vw, 36px);
  display:flex; flex-direction:column;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-out), opacity .8s var(--ease-out);
}
.track--aero{ background:linear-gradient(165deg, #dbeef9 0%, var(--sky) 55%, #a7d1ec 100%); color:var(--ink); }
.track--studio{ background:var(--night); color:#f3f2ec; }
.track::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.4), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.track--studio::before{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(192,254,4,.14), transparent 60%); }
.track:hover::before{ opacity:1; }

.track__head{
  display:flex; align-items:center; gap:12px;
  font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em;
}
.track__idx{ display:inline-grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; }
.track__status{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; }
.track__status i{ width:7px; height:7px; border-radius:50%; background:var(--lime); animation:ping 1.8s ease-out infinite; }
.track--aero .track__status i{ background:var(--ink); }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(192,254,4,.7); } 70%,100%{ box-shadow:0 0 0 9px rgba(192,254,4,0); } }

.track__title{
  margin:clamp(40px, 8vh, 90px) 0 auto;
  font:700 clamp(34px, 3.8vw, 64px)/.95 var(--f-display); text-transform:uppercase; letter-spacing:-.025em;
  max-width:11ch; position:relative; z-index:2;
}
.track--studio .track__title{ max-width:13ch; }

.spec{ list-style:none; margin:28px 0 22px; font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.04em; max-width:420px; position:relative; z-index:2; }
.spec li{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid rgba(128,128,128,.35); }
.spec li:last-child{ border-bottom:1px solid rgba(128,128,128,.35); }
.spec span{ opacity:.6; }
.spec b{ font-weight:500; text-align:right; }

.track__cta{
  position:relative; z-index:2; align-self:flex-start; isolation:isolate;
  display:inline-flex; align-items:center; gap:14px;
  padding:13px 16px; text-decoration:none;
  font:500 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em;
  background:var(--ink); color:#f3f2ec; overflow:hidden; transition:color .3s;
}
.track--studio .track__cta{ background:var(--lime); color:var(--ink); }
.track__cta::before{
  content:""; position:absolute; inset:0; background:var(--lime); transform:translateY(101%);
  transition:transform .45s var(--ease-out); z-index:-1;
}
.track--studio .track__cta::before{ background:#f3f2ec; }
.track__cta:hover, .track__cta:focus-visible{ color:var(--ink); outline:none; }
.track__cta:hover::before, .track__cta:focus-visible::before{ transform:none; }
.track__cta .arr{ display:inline-block; transition:transform .45s var(--ease-out); }
.track__cta:hover .arr{ transform:translateX(5px) rotate(-45deg); }

.track__obj{
  position:absolute; right:-4%; bottom:-8%; width:min(52%, 360px); z-index:1; pointer-events:none;
  transform:translate3d(0, var(--lift, 0px), 0) rotate(var(--spin, 0deg));
  filter:drop-shadow(0 30px 40px rgba(30,70,110,.3));
}
/* studio card: animated website wireframe */
.track--studio::after{
  content:""; position:absolute; right:clamp(20px,2.4vw,36px); top:96px; width:44%; aspect-ratio:4/3;
  border:1px solid rgba(243,242,236,.25);
  background:
    linear-gradient(rgba(243,242,236,.25), rgba(243,242,236,.25)) 0 18px / 100% 1px no-repeat,
    radial-gradient(circle, #c0fe04 2px, transparent 2.5px) 4px 4px / 10px 10px no-repeat,
    linear-gradient(90deg, rgba(192,254,4,.85), rgba(192,254,4,.85)) 12% 42% / 46% 9% no-repeat,
    linear-gradient(90deg, rgba(243,242,236,.35), rgba(243,242,236,.35)) 12% 58% / 66% 4% no-repeat,
    linear-gradient(90deg, rgba(243,242,236,.2), rgba(243,242,236,.2)) 12% 66% / 54% 4% no-repeat,
    linear-gradient(90deg, rgba(243,242,236,.12), rgba(243,242,236,.12)) 12% 86% / 76% 12% no-repeat;
  animation:wire 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes wire{
  0%,100%{ background-size:100% 1px, 10px 10px, 46% 9%, 66% 4%, 54% 4%, 76% 12%; }
  50%{ background-size:100% 1px, 10px 10px, 30% 9%, 40% 4%, 70% 4%, 50% 12%; }
}

/* intro links: lime sweep */
.about__intro a{ background:linear-gradient(var(--lime), var(--lime)) 0 100% / 0 100% no-repeat; transition:background-size .5s var(--ease-out); }
.about__intro a:hover, .about__intro a:focus-visible{ background-size:100% 100%; background-color:transparent; }

@media (max-width:900px){
  .tracks{ grid-template-columns:1fr; }
  .track{ min-height:auto; }
  .track__title{ margin-bottom:24px; }
  .track--studio::after{ display:none; }
  .track__obj{ width:40%; bottom:-12%; opacity:.9; }
}
@media (max-width:760px){
  .hero{ transform:none; }
  .marquee__track{ font-size:clamp(64px, 22vw, 120px); }
}
@media (prefers-reduced-motion:reduce){
  .hero{ transform:none; } .hero::after{ display:none; }
  .about{ border-radius:0; }
}
/* tracks: art top-right, copy anchored to the bottom */
.track{ min-height:min(700px, 88vh); }
.track__title{ margin:auto 0 0; }
.track__obj{ top:9%; bottom:auto; right:3%; width:min(40%, 270px); }
.track--studio::after{ top:84px; width:40%; }
@media (max-width:900px){
  .track{ min-height:auto; }
  .track__title{ margin-top:150px; }
  .track__obj{ top:56px; right:4%; width:30%; }
  .track--studio .track__title{ margin-top:48px; }
}
/* top bar gets a frosted backing once the hero is behind us */
.topbar{ transition:background-color .35s ease, backdrop-filter .35s ease; }
body.past-hero .topbar{ background:rgba(251,250,244,.84); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
body.past-hero.on-dark .topbar{ background:rgba(7,8,12,.72); border-bottom-color:rgba(243,242,236,.12); }
@media (max-width:900px){ .track__obj{ top:64px; width:26%; } }

/* ==========================================================
   Rocketry card: deep-space to twilight-sky gradient (SpaceX-inspired)
   ========================================================== */
.track--aero{
  color:#f3f2ec;
  background:
    radial-gradient(60% 45% at 78% 28%, rgba(146,104,255,.55) 0%, transparent 70%),   /* nebula core */
    radial-gradient(45% 35% at 20% 18%, rgba(88,52,190,.45) 0%, transparent 70%),     /* second nebula */
    radial-gradient(120% 60% at 50% 120%, rgba(191,221,240,.95) 0%, rgba(142,195,230,.75) 30%, transparent 62%), /* sky-blue horizon glow */
    linear-gradient(180deg, #07061a 0%, #140d3a 34%, #2d1f6e 58%, #5b4bb0 78%, #8ec3e6 100%);
}
/* starfield: two layers of tiny stars that slowly twinkle */
.track--aero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 14%, #fff 98%, transparent),
    radial-gradient(1px 1px at 28% 32%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 44% 9%, #fff 98%, transparent),
    radial-gradient(1px 1px at 63% 22%, #fff 98%, transparent),
    radial-gradient(1px 1px at 81% 11%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 90% 38%, #fff 98%, transparent),
    radial-gradient(1px 1px at 8% 46%, #fff 98%, transparent),
    radial-gradient(1px 1px at 36% 52%, rgba(255,255,255,.8) 98%, transparent),
    radial-gradient(1px 1px at 57% 41%, #fff 98%, transparent),
    radial-gradient(1px 1px at 72% 58%, rgba(255,255,255,.7) 98%, transparent),
    radial-gradient(1px 1px at 18% 66%, rgba(255,255,255,.6) 98%, transparent),
    radial-gradient(1.5px 1.5px at 52% 24%, #c0fe04 98%, transparent),
    radial-gradient(1px 1px at 95% 70%, rgba(255,255,255,.5) 98%, transparent),
    radial-gradient(1px 1px at 3% 28%, #fff 98%, transparent),
    radial-gradient(1px 1px at 68% 6%, #fff 98%, transparent);
  background-size:100% 100%;
  animation:twinkle 5s ease-in-out infinite alternate;
}
.track--aero .stars2{ display:none; }
@keyframes twinkle{ 0%{ opacity:.55; } 100%{ opacity:1; } }
.track--aero::before{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(170,140,255,.28), transparent 60%); }
.track--aero > *{ position:relative; z-index:2; }
.track--aero .track__obj{ position:absolute; z-index:1; filter:drop-shadow(0 30px 50px rgba(120,90,255,.45)); }
.track--aero .track__status i{ background:#f3f2ec; }
.track--aero .spec li{ border-color:rgba(243,242,236,.22); }
.track--aero .track__title{ text-shadow:0 2px 30px rgba(40,20,120,.5); }
@media (prefers-reduced-motion:reduce){ .track--aero::after{ animation:none; opacity:.85; } }
/* rocketry card: keep the status clear and the spec legible on the horizon */
.track--aero{
  background:
    radial-gradient(60% 45% at 78% 34%, rgba(146,104,255,.55) 0%, transparent 70%),
    radial-gradient(45% 35% at 20% 18%, rgba(88,52,190,.45) 0%, transparent 70%),
    radial-gradient(120% 40% at 50% 125%, rgba(191,221,240,.9) 0%, rgba(142,195,230,.6) 35%, transparent 70%),
    linear-gradient(180deg, #07061a 0%, #140d3a 34%, #2d1f6e 60%, #4a3c9e 82%, #7fb3dc 100%);
}
.track--aero .track__obj{ top:15%; width:min(36%, 240px); }
.track--aero .spec span{ opacity:.75; }
.track--aero .spec{ text-shadow:0 1px 8px rgba(20,10,60,.55); }

/* ==========================================================
   WORK — haoqi-style project grid with pixel-dissolve hover
   ========================================================== */
.work{
  position:relative; z-index:2; background:var(--paper);
  padding:clamp(110px, 16vh, 180px) var(--gutter) clamp(100px, 14vh, 160px);
  border-top:1px solid var(--line);
}
.work::before{
  content:""; position:absolute; inset:0 var(--gutter); pointer-events:none;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc((100% + 1px) / 4) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 1px);
}
.work > *{ position:relative; }
.work__head{ display:grid; grid-template-columns:repeat(4, 1fr); align-items:end; margin-bottom:clamp(48px, 8vh, 90px); }
.work__head .sec-label{ align-self:start; padding-top:.9em; }
.work__title{
  grid-column:2 / span 2; padding-left:14px;
  font:700 clamp(56px, 8.4vw, 150px)/.88 var(--f-display); text-transform:uppercase; letter-spacing:-.035em;
}
.work__line{ display:block; overflow:hidden; }
.work__line .ch{ display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease-out); }
.work__title.in .work__line .ch{ transform:none; }
.work__title sup{ font:400 .16em/1 var(--f-mono); vertical-align:top; letter-spacing:0; margin-left:.3em; position:relative; top:.6em; }
.work__lede{ grid-column:4; padding-left:14px; font-size:13px; line-height:1.55; color:var(--ink-dim); max-width:30ch; }

.work__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:auto auto; gap:var(--gutter) 0;
}
.wt{
  all:unset; box-sizing:border-box; cursor:pointer; display:block; text-decoration:none; color:inherit;
  padding:0 14px; position:relative;
}
.wt:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.wt--feature{ grid-column:1 / span 2; grid-row:1 / span 2; padding-left:0; }
.work__grid > .wt:nth-child(2), .work__grid > .wt:nth-child(3){ grid-column:3 / span 2; padding-right:0; }

.wt__media{
  position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--paper-2);
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.1s var(--ease-out);
}
.wt--feature .wt__media{ aspect-ratio:auto; height:calc(100% - 44px); min-height:520px; }
.wt[data-wipe]:not(.in) .wt__media{ clip-path:inset(100% 0 0 0); }
.wt__media > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); transition:transform 1.4s var(--ease-out);
}
.wt.in .wt__media > img{ transform:scale(1); }
.wt:hover .wt__media > img{ transform:scale(1.03); }

.wt__tag{
  position:absolute; top:0; right:0; z-index:5;
  background:var(--lime); color:var(--ink); padding:5px 7px;
  font:500 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em;
}

/* hover alternate (logomark plate) revealed through a pixel grid */
.wt__alt{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none;
  visibility:hidden;
}
.wt__alt--sky{ background:radial-gradient(80% 70% at 30% 25%, #e8f4fb, var(--sky) 60%, #9ccbea); }
.wt__alt--lime{ background:radial-gradient(80% 70% at 30% 25%, #e5ff8a, var(--lime) 60%, #a6dc00); }
.wt__alt img{ width:38%; filter:drop-shadow(0 20px 30px rgba(30,70,110,.3)); }
.wt__alt b{
  position:absolute; left:14px; bottom:12px;
  font:700 clamp(28px, 3vw, 46px)/1 var(--f-display); text-transform:uppercase; letter-spacing:-.02em;
}
.wt__pix{ position:absolute; inset:0; z-index:4; display:grid; pointer-events:none; }
.wt__pix i{
  background-image:var(--alt); background-size:var(--bw) var(--bh); background-position:var(--bx) var(--by);
  opacity:0; transition:opacity 0s linear var(--d);
}
.wt.hover .wt__pix i{ opacity:1; }

/* featured: deep space plate */
.wt__media--space{
  background:
    radial-gradient(60% 45% at 75% 28%, rgba(146,104,255,.55) 0%, transparent 70%),
    radial-gradient(120% 45% at 50% 125%, rgba(191,221,240,.9) 0%, rgba(142,195,230,.55) 35%, transparent 70%),
    linear-gradient(180deg, #07061a 0%, #140d3a 40%, #2d1f6e 70%, #6f9fd0 100%);
}
.wt__stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 10% 12%, #fff 98%, transparent), radial-gradient(1px 1px at 24% 40%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 40% 8%, #fff 98%, transparent), radial-gradient(1px 1px at 62% 20%, #fff 98%, transparent),
    radial-gradient(1px 1px at 84% 14%, #fff 98%, transparent), radial-gradient(1.5px 1.5px at 92% 44%, #c0fe04 98%, transparent),
    radial-gradient(1px 1px at 6% 58%, #fff 98%, transparent), radial-gradient(1px 1px at 52% 52%, rgba(255,255,255,.7) 98%, transparent),
    radial-gradient(1px 1px at 76% 64%, rgba(255,255,255,.6) 98%, transparent), radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.5) 98%, transparent);
  animation:twinkle 4s ease-in-out infinite alternate;
}
.wt__obj{
  position:absolute; left:50%; top:46%; width:min(46%, 360px); translate:-50% -50%;
  filter:drop-shadow(0 40px 60px rgba(120,90,255,.45));
  transition:transform .9s var(--ease-out);
}
.wt--feature:hover .wt__obj{ transform:translateY(-26px) rotate(6deg) scale(1.04); }
.wt__overlay{
  position:absolute; left:0; right:0; bottom:0; padding:22px; color:#f3f2ec;
  display:flex; flex-direction:column; gap:6px;
  font:400 11px/1.3 var(--f-mono); text-transform:uppercase; letter-spacing:.08em;
  background:linear-gradient(transparent, rgba(7,6,26,.55));
}
.wt__overlay b{ font:700 clamp(26px, 2.8vw, 44px)/1 var(--f-display); letter-spacing:-.02em; max-width:14ch; }

.wt__meta{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline;
  padding-top:12px; font:400 13px/1.3 var(--f-mono); text-transform:uppercase;
}
.wt__name{ position:relative; }
.wt__name::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out); }
.wt:hover .wt__name::after, .wt:focus-visible .wt__name::after{ transform:scaleX(1); transform-origin:left; }
.wt__kind, .wt__year{ color:var(--ink-dim); font-size:11px; }

/* cursor label that follows the pointer over tiles */
.cursor-tag{
  position:fixed; left:0; top:0; z-index:120; pointer-events:none;
  translate:-50% -50%; scale:0; transition:scale .25s var(--ease-out);
}
.cursor-tag span{
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  background:var(--lime); color:var(--ink);
  font:500 11px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em;
}
.cursor-tag.on{ scale:1; }

/* ---------- project panel ---------- */
.proj{ position:fixed; inset:0; z-index:90; }
.proj[hidden]{ display:none; }
.proj__curtain{
  position:absolute; inset:0; background:var(--paper);
  transform:scaleY(0); transform-origin:bottom; transition:transform .5s cubic-bezier(.76,0,.24,1);
}
.proj.open .proj__curtain{ transform:scaleY(1); }
.proj.closing .proj__curtain{ transform-origin:top; transform:scaleY(0); transition-delay:.15s; }
.proj__inner{
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  padding:90px var(--gutter) 100px;
  opacity:0; transform:translateY(30px); transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.proj.open .proj__inner{ opacity:1; transform:none; transition-delay:.35s; }
.proj.closing .proj__inner{ opacity:0; transform:translateY(-20px); transition-delay:0s; transition-duration:.25s; }
.proj__close{ position:sticky; top:0; float:right; font:400 13px/1 var(--f-mono); text-transform:uppercase; background:var(--paper); }
.proj__top{ display:flex; align-items:center; gap:10px; font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; margin-bottom:22px; }
.proj__title{ font:700 clamp(40px, 6vw, 104px)/.92 var(--f-display); text-transform:uppercase; letter-spacing:-.03em; max-width:16ch; margin-bottom:40px; }
.proj__cols{ display:grid; grid-template-columns:2fr 1fr; gap:calc(var(--gutter) * 2); margin-bottom:48px; }
.proj__text p{ max-width:56ch; margin-bottom:14px; font-size:15px; line-height:1.7; color:#2b2a27; }
.proj__cta{ margin-top:12px; }
.proj__table{ font-size:12px; }
.proj__table > div{ display:grid; grid-template-columns:1fr 1.2fr; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.proj__table > div:last-child{ border-bottom:1px solid var(--line); }
.proj__table dt{ text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); }
.proj__table dd{ font-variant-numeric:tabular-nums; }
.proj__fig{ background:var(--paper-2); border:1px solid var(--line); }
.proj__fig img{ width:100%; height:auto; }
body.proj-open{ overflow:hidden; }
body.proj-open .scrollbar, body.proj-open .ruler{ opacity:0; }

@media (max-width:900px){
  .work__head{ grid-template-columns:1fr; gap:18px; }
  .work__title, .work__lede{ grid-column:1; padding-left:0; }
  .work::before{ background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc((100% + 1px) / 2) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 1px); }
  .work__grid{ grid-template-columns:1fr; gap:48px; }
  .wt, .wt--feature, .work__grid > .wt:nth-child(2), .work__grid > .wt:nth-child(3){ grid-column:1; grid-row:auto; padding:0; }
  .wt--feature .wt__media{ height:auto; min-height:0; aspect-ratio:4/5; }
  .proj__cols{ grid-template-columns:1fr; }
  .cursor-tag{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wt[data-wipe]:not(.in) .wt__media{ clip-path:none; }
  .work__line .ch{ transform:none !important; }
  .proj__curtain, .proj__inner{ transition:none !important; }
}
/* featured tile: keep the rocket as an object, not a cover image */
.wt__media > img.wt__obj{ inset:auto; left:50%; top:44%; width:min(42%, 340px); height:auto; object-fit:contain; transform:none; }
.wt.in .wt__media > img.wt__obj{ transform:none; }
.wt--feature:hover .wt__media > img.wt__obj{ transform:translateY(-26px) rotate(6deg) scale(1.04); }

/* ==========================================================
   SKILLS — dark warp-speed scene, rotating headline, readout rows
   ========================================================== */
.skills{
  position:relative; z-index:2; overflow:hidden; color:#f3f2ec;
  background:radial-gradient(90% 70% at 50% 45%, #1b1446 0%, #0b0822 55%, #050412 100%);
  min-height:100svh;
}
.skills__warp{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.skills__inner{ position:relative; padding:clamp(110px, 16vh, 180px) var(--gutter) clamp(110px, 14vh, 160px); }
.skills__inner::before{
  content:""; position:absolute; inset:0 var(--gutter); pointer-events:none;
  background:
    linear-gradient(90deg, rgba(243,242,236,.08) 1px, transparent 1px) 0 0 / calc((100% + 1px) / 4) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(243,242,236,.08) 1px);
}
.skills__head{ display:grid; grid-template-columns:repeat(4, 1fr); margin-bottom:clamp(56px, 9vh, 110px); position:relative; }
.skills__label{ align-self:start; padding-top:.9em; }
.skills__title{
  grid-column:2 / span 3; padding-left:14px;
  font:700 clamp(54px, 8.6vw, 156px)/.9 var(--f-display); text-transform:uppercase; letter-spacing:-.035em;
}
.skills__static{ display:block; color:transparent; -webkit-text-stroke:1.5px rgba(243,242,236,.85); }
.skills__swap{ display:block; color:var(--lime); min-height:1em; }

.skills__cols{ display:grid; grid-template-columns:repeat(4, 1fr); position:relative; }
.skills__col:first-child{ grid-column:1 / span 2; padding-right:calc(var(--gutter) * 1.5); }
.skills__col:last-child{ grid-column:3 / span 2; padding-left:14px; }
.skills__group{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:rgba(243,242,236,.7);
}
.skills__group span{ display:inline-grid; place-items:center; width:20px; height:20px; border:1px solid currentColor; }
.skills__group--gap{ margin-top:48px; }

.sk{ list-style:none; }
.sk li{
  position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:16px 0; border-top:1px solid rgba(243,242,236,.14);
  transition:padding-left .4s var(--ease-out), color .3s;
}
.sk li:last-child{ border-bottom:1px solid rgba(243,242,236,.14); }
.sk li::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--lime);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);
}
.sk li:hover{ padding-left:14px; }
.sk li:hover::before{ transform:scaleX(1); }
.sk b{ font:500 clamp(19px, 1.9vw, 30px)/1.1 var(--f-display); letter-spacing:-.015em; }
.sk em{ font:400 11px/1.2 var(--f-mono); font-style:normal; text-transform:uppercase; letter-spacing:.06em; color:rgba(243,242,236,.55); text-align:right; white-space:nowrap; transition:color .3s; }
.sk li:hover em{ color:var(--lime); }

/* rows slide in one after another when a column reveals */
.skills__col .sk li{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), padding-left .4s var(--ease-out); }
.skills__col.in .sk li{ opacity:1; transform:none; }
.skills__col.in .sk li:nth-child(2){ transition-delay:.05s; } .skills__col.in .sk li:nth-child(3){ transition-delay:.1s; }
.skills__col.in .sk li:nth-child(4){ transition-delay:.15s; } .skills__col.in .sk li:nth-child(5){ transition-delay:.2s; }
.skills__col.in .sk li:nth-child(6){ transition-delay:.25s; } .skills__col.in .sk li:nth-child(7){ transition-delay:.3s; }
.skills__col.in .sk li:nth-child(8){ transition-delay:.35s; } .skills__col.in .sk li:nth-child(9){ transition-delay:.4s; }
.skills__col.in .sk li:hover{ transition-delay:0s; }

@media (max-width:900px){
  .skills__head, .skills__cols{ grid-template-columns:1fr; }
  .skills__title{ grid-column:1; padding-left:0; margin-top:18px; }
  .skills__col:first-child, .skills__col:last-child{ grid-column:1; padding:0; }
  .skills__col:last-child{ margin-top:48px; }
  .skills__inner::before{ background:
    linear-gradient(90deg, rgba(243,242,236,.08) 1px, transparent 1px) 0 0 / calc((100% + 1px) / 2) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(243,242,236,.08) 1px); }
  .sk em{ white-space:normal; max-width:12ch; }
}
@media (prefers-reduced-motion:reduce){
  .skills__col .sk li{ opacity:1; transform:none; }
}

/* ==========================================================
   RÉSUMÉ — paper timeline
   ========================================================== */
.resume{
  position:relative; z-index:2; background:var(--paper);
  padding:clamp(110px, 16vh, 180px) var(--gutter) clamp(100px, 14vh, 160px);
}
.resume::before{
  content:""; position:absolute; inset:0 var(--gutter); pointer-events:none;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc((100% + 1px) / 4) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 1px);
}
.resume > *{ position:relative; }
.resume__head{ display:grid; grid-template-columns:repeat(4, 1fr); align-items:end; margin-bottom:clamp(56px, 9vh, 100px); }
.resume__head .sec-label{ align-self:start; padding-top:.9em; }
.resume__title{ grid-column:2 / span 2; padding-left:14px; font:700 clamp(52px, 7.6vw, 136px)/.9 var(--f-display); text-transform:uppercase; letter-spacing:-.035em; }
.resume__dl{ grid-column:4; padding-left:14px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.resume__btn{ background:var(--ink); color:#f3f2ec; }
.resume__fmt{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); }
.resume__group{ display:grid; grid-template-columns:1fr 3fr; margin-bottom:56px; }
.resume__gl{ display:flex; align-items:center; gap:10px; align-self:start; padding-top:22px; font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; }
.resume__gl span{ display:inline-grid; place-items:center; width:20px; height:20px; border:1px solid currentColor; }
.tl{ list-style:none; padding-left:14px; }
.tl li{
  position:relative; display:grid; grid-template-columns:150px 1fr auto; gap:20px; align-items:baseline;
  padding:20px 0; border-top:1px solid var(--line); transition:background-color .3s;
}
.tl li:last-child{ border-bottom:1px solid var(--line); }
.tl li::after{ content:""; position:absolute; left:-14px; top:-1px; width:3px; height:calc(100% + 2px); background:var(--lime); transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease-out); }
.tl li:hover::after{ transform:scaleY(1); }
.tl__when{ font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); }
.tl__what b{ display:block; font:500 clamp(20px, 2vw, 30px)/1.1 var(--f-display); letter-spacing:-.015em; margin-bottom:6px; }
.tl__what span{ font-size:13px; color:#4a4843; }
.tl__where{ font:400 11px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); text-align:right; }

/* ==========================================================
   CONTACT — sky bookend with floating objects
   ========================================================== */
.contact2{
  position:relative; z-index:2; overflow:hidden; min-height:100svh;
  background:var(--sky); color:var(--ink);
}
.contact2__sky{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.contact2__objects{ position:absolute; inset:0; pointer-events:none; }
.cobj{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); translate:-50% -50%;
  filter:drop-shadow(0 24px 30px rgba(30,70,110,.25));
  animation:bob 7s ease-in-out infinite alternate;
}
.cobj:nth-child(2){ animation-duration:9s; animation-delay:-3s; }
.cobj:nth-child(3){ animation-duration:5s; animation-delay:-1s; }
.cobj:nth-child(4){ animation-duration:8s; animation-delay:-5s; }
.contact2__inner{ position:relative; padding:clamp(110px, 16vh, 170px) var(--gutter) calc(var(--hud-h) + 40px); display:flex; flex-direction:column; min-height:100svh; }
.contact2__title{ font:700 clamp(56px, 9vw, 168px)/.88 var(--f-display); text-transform:uppercase; letter-spacing:-.035em; margin:28px 0 clamp(40px, 6vh, 70px); }
.contact2__paths{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); max-width:900px; margin-bottom:40px; }
.cpath{
  position:relative; display:grid; grid-template-columns:1fr auto; gap:8px 16px; align-items:end;
  padding:22px; text-decoration:none; background:rgba(251,250,244,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(13,13,13,.12); transition:background-color .3s, color .3s, transform .35s var(--ease-out);
}
.cpath--dark{ background:var(--night); color:#f3f2ec; border-color:transparent; }
.cpath:hover{ background:var(--lime); color:var(--ink); }
.cpath__k{ grid-column:1 / -1; font:400 11px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
.cpath__t{ font:700 clamp(24px, 2.6vw, 40px)/1 var(--f-display); text-transform:uppercase; letter-spacing:-.02em; }
.cpath__a{ font:400 28px/1 var(--f-display); transition:transform .45s var(--ease-out); }
.cpath:hover .cpath__a{ transform:translateX(6px) rotate(-45deg); }
.contact2__mail{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:auto; }
.contact2__email{ font:500 clamp(20px, 2.4vw, 36px)/1.1 var(--f-display); letter-spacing:-.01em; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.15em; }
.contact2__email:hover{ background:var(--lime); }
.contact2__copy{ font:400 12px/1 var(--f-mono); text-transform:uppercase; }
.contact2__foot{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; margin-top:56px; padding-top:18px;
  border-top:1px solid rgba(13,13,13,.18);
  font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.03em;
}
.contact2__foot .ctl{ padding:6px 4px; }
.contact2__copy-r{ margin-left:auto; color:rgba(13,13,13,.6); }

@media (max-width:900px){
  .resume__head{ grid-template-columns:1fr; gap:20px; }
  .resume__title, .resume__dl{ grid-column:1; padding-left:0; }
  .resume::before{ background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc((100% + 1px) / 2) 100%,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 1px); }
  .resume__group{ grid-template-columns:1fr; }
  .resume__gl{ padding-top:0; margin-bottom:12px; }
  .tl{ padding-left:0; }
  .tl li{ grid-template-columns:1fr; gap:6px; }
  .tl__where{ text-align:left; }
  .tl li::after{ left:-8px; }
  .contact2__paths{ grid-template-columns:1fr; }
  .cobj{ opacity:.85; }
  .contact2__copy-r{ margin-left:0; }
}
/* split headlines reveal anywhere, not only in Work */
.in .work__line .ch{ transform:none; }
/* contact: soft moving light instead of a second WebGL canvas */
.contact2__sky{ display:none; }
.contact2::before{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(40% 30% at 30% 30%, rgba(255,255,250,.7), transparent 70%),
    radial-gradient(35% 28% at 75% 60%, rgba(255,255,250,.55), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, rgba(142,195,230,.8), transparent 70%);
  animation:skydrift 18s ease-in-out infinite alternate;
}
@keyframes skydrift{ to{ transform:translate3d(6%, -4%, 0) rotate(4deg); } }
@media (prefers-reduced-motion:reduce){ .contact2::before{ animation:none; } }
/* résumé: give the headline three columns, keep the timeline inside the page */
.resume__title{ grid-column:2 / span 3; font-size:clamp(52px, 7vw, 128px); }
.resume__dl{ grid-column:2; grid-row:2; margin-top:26px; }
.resume{ overflow:hidden; }
.resume__group > *{ min-width:0; }
.tl li{ grid-template-columns:150px minmax(0, 1fr) auto; }
.tl__where{ padding-right:4px; }
@media (max-width:900px){ .resume__dl{ grid-column:1; grid-row:auto; margin-top:0; } .tl li{ grid-template-columns:1fr; } }
/* low-key proof line under the Studio skills */
.sk-note{
  margin-top:14px; max-width:46ch;
  font:400 12px/1.6 var(--f-mono); color:rgba(243,242,236,.55);
  padding-left:12px; border-left:2px solid var(--lime);
}