/* ============================================================
   CHEN YU — DRONE TECH PORTFOLIO
   1. Tokens / Base
   2. Utilities, glass, buttons, cursor, motion
   3. Header / menu
   4. Hero
   5. Ticker / section headers
   6. Profile
   7. Capabilities bento
   8. Projects
   9. Flight log
   10. Snake lab
   11. Contact / footer
   12. Responsive / reduced motion
   ============================================================ */

/* ---------- 1. Tokens / Base ---------- */
:root{
  --bg:#E9E9E4;
  --bg-2:#F3F3EF;
  --ink:#0A0A0A;
  --ink-2:#161714;
  --white:#F6F6F1;
  --ace:#C9FF3D;
  --ace-deep:#A9E51D;
  --cyan:#63F5D0;
  --dark:#0A0B09;
  --dark-2:#121410;
  --muted:rgba(10,10,10,.56);
  --muted-2:rgba(10,10,10,.38);
  --muted-w:rgba(246,246,241,.58);
  --muted-w2:rgba(246,246,241,.36);
  --line:rgba(10,10,10,.13);
  --line-strong:rgba(10,10,10,.26);
  --line-w:rgba(246,246,241,.12);
  --glass-bg:linear-gradient(140deg,rgba(255,255,255,.64),rgba(255,255,255,.28));
  --glass-border:rgba(255,255,255,.74);
  --shadow-soft:0 30px 70px -35px rgba(22,22,18,.32);
  --shadow-card:0 42px 90px -45px rgba(10,10,10,.55);
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Archivo","Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.7,0,.2,1);
  --r-xl:44px;
  --r-lg:34px;
  --r-md:24px;
  --r-sm:16px;
  --pad:clamp(1.15rem,3.6vw,4.25rem);
  --maxw:1700px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem;overflow-x:clip}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 780px at 88% -4%, rgba(201,255,61,.1), transparent 60%),
    radial-gradient(900px 700px at 2% 38%, rgba(99,245,208,.08), transparent 62%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  font-synthesis-weight:none;
}
body.locked{overflow:hidden}
main{position:relative;z-index:2}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
figure,dl,dd,ol,ul,h1,h2,h3,p{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
kbd{font-family:var(--mono);font-size:.78em;padding:.18em .5em;border:1px solid var(--line-w);border-radius:6px;background:rgba(255,255,255,.06);box-shadow:0 1px 0 rgba(0,0,0,.5)}
::selection{background:var(--ace);color:var(--ink)}
:focus-visible{outline:2px solid var(--ace-deep);outline-offset:4px;border-radius:4px}
.mono{font-family:var(--mono);font-weight:450;letter-spacing:.09em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip-link{position:fixed;top:10px;left:10px;z-index:1200;background:var(--ink);color:var(--white);padding:.6rem 1.1rem;border-radius:999px;font-size:.8rem;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .25s,transform .25s,visibility .25s}
.skip-link:focus,.skip-link:focus-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none;outline:2px solid var(--ace);outline-offset:2px}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.3;mix-blend-mode:multiply;background-image:url("../assets/noise.svg");background-size:220px 220px}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:400;pointer-events:none;background:transparent}
.scroll-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--ace-deep),var(--cyan));box-shadow:0 0 14px rgba(169,229,29,.7)}

/* ---------- 2. Reveal / glass / buttons / cursor ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform}
.js .reveal.is-in{opacity:1;transform:none}
.glass{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px -34px rgba(20,20,16,.3),inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:46px;padding:.4rem 1.35rem;border-radius:999px;
  font-size:.82rem;font-weight:560;letter-spacing:.005em;white-space:nowrap;
  transition:transform .45s var(--ease),background-color .35s,color .35s,box-shadow .45s,border-color .35s;
  will-change:transform;position:relative;
}
.pill svg{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.pill:hover svg{transform:translate(2px,-2px)}
.pill--dark{background:var(--ink);color:var(--white);box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}
.pill--dark:hover{background:var(--ace);color:var(--ink);transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(169,229,29,.65)}
.pill--neon{background:var(--ace);color:var(--ink);border:1px solid rgba(201,255,61,.7);box-shadow:0 8px 26px -10px rgba(201,255,61,.45),inset 0 -2px 0 rgba(0,0,0,.16)}
.pill--neon:hover{transform:translateY(-2px);box-shadow:0 16px 44px -12px rgba(201,255,61,.62),inset 0 -2px 0 rgba(0,0,0,.16)}
.pill--glass{background:rgba(255,255,255,.14);color:var(--white);border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pill--glass:hover{background:var(--white);color:var(--ink);border-color:var(--white);transform:translateY(-2px)}
.pill--light{background:rgba(246,246,241,.94);color:var(--ink);border:1px solid rgba(10,10,10,.08)}
.pill--light:hover{background:var(--ace);transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(10,10,10,.4)}
.btn-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;animation:blink 1.6s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}
@media (hover:hover) and (pointer:fine){body.cursor-ready{cursor:none}body.cursor-ready a,body.cursor-ready button,body.cursor-ready [data-cursor]{cursor:none}}

.cursor{
  position:fixed;left:0;top:0;z-index:1000;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .25s;
  display:flex;align-items:center;justify-content:center;will-change:transform;
}
.cursor::before{
  content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.9);
  border-radius:50%;transition:transform .4s var(--ease),border-color .3s,background-color .3s;
  transform:scale(var(--ring,1));
}
body.cursor-ready .cursor{opacity:1}
.cursor.is-active::before{transform:scale(1.6);background:rgba(255,255,255,.09)}
.cursor.is-label::before{transform:scale(var(--ring,3));background:rgba(255,255,255,.14);border-color:transparent}
.cursor-label{font-family:var(--mono);font-size:7px;line-height:1;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .2s;color:#fff;text-align:center;white-space:nowrap}
.cursor.is-label .cursor-label{opacity:1}

/* ---------- 3. Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:300;padding-block:clamp(1rem,1.7vw,1.5rem);transition:padding .6s var(--ease),background-color .4s,box-shadow .4s;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
.header-inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.site-header.is-scrolled{padding-block:.7rem;background:rgba(233,233,228,.7);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 1px 0 rgba(10,10,10,.08),0 20px 40px -34px rgba(10,10,10,.35)}
.brand{display:inline-flex;align-items:center;gap:.62rem;flex:none}
.brand-mark{width:27px;height:27px;display:grid;place-items:center;color:var(--ink);transition:transform .6s var(--ease),color .3s}
.brand-mark svg{width:100%;height:100%}
.brand:hover .brand-mark{transform:rotate(90deg)}
.brand-type{font-size:.78rem;font-weight:700;letter-spacing:.14em;line-height:1}
.brand-type i{font-style:normal;color:var(--ace-deep);padding-inline:.25em}
.site-nav{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2.1rem)}
.site-nav a{position:relative;font-size:.78rem;font-weight:500;letter-spacing:.02em;padding-block:.35rem;display:inline-flex;align-items:baseline;gap:.35rem;color:rgba(10,10,10,.72);transition:color .3s}
.site-nav a span{font-family:var(--mono);font-size:.56rem;color:var(--muted-2);transition:color .3s}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover span{color:var(--ace-deep)}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.site-nav a[aria-current="true"]{color:var(--ink)}
.site-nav a[aria-current="true"] span{color:var(--ace-deep)}
.site-nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:0 50%}
.header-actions{display:flex;align-items:center;gap:1.1rem;flex:none}
.header-clock{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--muted-2);white-space:nowrap}
.header-cta{min-height:44px}
.menu-btn{display:none;position:relative;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;transition:background-color .3s,border-color .3s}
.menu-btn span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease),top .45s var(--ease)}
.menu-btn span:nth-child(1){top:19px}
.menu-btn span:nth-child(2){top:24px}
.menu-btn:hover{background:var(--ace);border-color:var(--ace)}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}

.menu-overlay{position:fixed;inset:0;z-index:500;visibility:hidden;pointer-events:none;overflow:hidden}
.menu-overlay.is-open{visibility:visible;pointer-events:auto}
.menu-scrim{position:absolute;inset:0;background:rgba(10,10,10,.45);opacity:0;transition:opacity .5s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.menu-overlay.is-open .menu-scrim{opacity:1}
.menu-panel{position:absolute;top:0;right:0;height:100%;width:min(600px,94vw);background:var(--dark);color:var(--white);padding:clamp(1.4rem,4vw,3rem);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .72s var(--ease);overflow:auto}
.menu-overlay.is-open .menu-panel{transform:none}
.menu-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted-w);font-size:.62rem}
.menu-close{position:relative;width:46px;height:46px;border:1px solid var(--line-w);border-radius:50%;transition:background-color .3s}
.menu-close span{position:absolute;left:13px;right:13px;top:22px;height:1.5px;background:var(--white)}
.menu-close span:nth-child(1){transform:rotate(45deg)}
.menu-close span:nth-child(2){transform:rotate(-45deg)}
.menu-close:hover{background:var(--ace)}
.menu-close:hover span{background:var(--ink)}
.menu-links{margin-block:clamp(2rem,7vh,5rem) auto;display:flex;flex-direction:column}
.menu-links a{display:grid;grid-template-columns:2.6rem 1fr auto;align-items:center;gap:.8rem;padding-block:clamp(.8rem,2.2vh,1.3rem);border-bottom:1px solid var(--line-w);transition:padding-left .5s var(--ease),color .3s}
.menu-links a .mono{font-size:.6rem;color:var(--muted-w2)}
.menu-links a em{font-style:normal;font-weight:600;font-size:clamp(1.9rem,5.4vw,3rem);line-height:1;letter-spacing:-.035em;transition:color .3s}
.menu-links a i{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--muted-w2)}
.menu-links a:hover{padding-left:.6rem}
.menu-links a:hover em{color:var(--ace)}
.menu-links a:hover i{color:var(--ace)}
.menu-foot{display:grid;grid-template-columns:1.2fr 1fr;gap:1.2rem;padding-top:1.4rem;border-top:1px solid var(--line-w);font-size:.8rem}
.menu-foot span{display:block;color:var(--muted-w2);font-size:.55rem;margin-bottom:.4rem}
.menu-foot a{color:var(--ace)}
.menu-foot p{color:var(--muted-w);line-height:1.5}

/* ---------- 4. Hero ---------- */
.hero{position:relative;padding-top:clamp(6.8rem,13vh,9.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);overflow:clip}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:-1}
.hero::before{width:640px;height:640px;right:-14%;top:-22%;background:rgba(201,255,61,.16)}
.hero::after{width:520px;height:520px;left:-12%;bottom:8%;background:rgba(99,245,208,.12)}
.hero .container{position:relative;z-index:1}
.hero-eyebrow{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:clamp(1.2rem,2.6vw,2.2rem)}
.eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.7)}
.eyebrow span{color:var(--muted-2);padding-inline:.3em}
.hero-live{display:inline-flex;align-items:center;gap:.55rem;font-size:.68rem;font-weight:550;letter-spacing:.04em;color:rgba(10,10,10,.78);border:1px solid var(--line);border-radius:999px;padding:.38rem .85rem;background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;flex:none}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--ace-deep);position:relative;flex:none}
.pulse-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;animation:ping 2.1s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(3.2);opacity:0}}

.hero-title{font-size:clamp(3.15rem,12.2vw,11.6rem);line-height:.82;font-weight:680;letter-spacing:-.052em;text-transform:uppercase;margin-block:.12em .16em;font-variation-settings:"wght" 680}
.title-line{display:flex;align-items:flex-end;gap:clamp(.9rem,3vw,2.4rem);overflow:hidden;padding-bottom:.075em}
.title-line--2{padding-left:clamp(0rem,7vw,7.6rem)}
.title-line--3{align-items:center}
.title-word{display:inline-block;transform-origin:0 100%;animation:titleUp 1.2s var(--ease) both;animation-delay:calc(.08s + var(--d,0s));white-space:nowrap}
.title-aside{font-family:var(--mono);font-size:.58rem;line-height:1.65;letter-spacing:.13em;color:var(--muted-2);margin-left:auto;padding-bottom:clamp(.4rem,1.1vw,1.3rem);animation:fadeUp 1s var(--ease) both;animation-delay:calc(.55s + var(--d,0s));flex:none}
.title-aside b{color:var(--ink);font-weight:500}
.title-badge{position:relative;width:clamp(64px,9vw,128px);aspect-ratio:1;flex:none;margin-left:auto;margin-bottom:clamp(.2rem,.8vw,.8rem);animation:fadeUp 1s var(--ease) both;animation-delay:calc(.4s + var(--d,0s))}
.title-badge-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.title-badge-ring text{fill:rgba(10,10,10,.62);font-family:var(--mono);font-size:8.6px;letter-spacing:.16em;text-transform:uppercase}
.title-badge-core{position:absolute;inset:28%;border-radius:50%;background:var(--ace);display:grid;place-items:center;color:var(--ink);box-shadow:0 0 0 1px rgba(10,10,10,.08),0 16px 34px -14px rgba(169,229,29,.8);transition:background-color .3s,transform .6s var(--ease)}
.title-badge-core svg{width:58%;height:58%}
.title-badge:hover .title-badge-core{background:var(--ink);color:var(--ace);transform:scale(1.06)}
.title-mark{align-self:flex-end;display:flex;gap:clamp(3px,.5vw,7px);margin-left:auto;padding-bottom:clamp(.6rem,2vw,2.4rem);animation:fadeUp 1s var(--ease) both;animation-delay:calc(.6s + var(--d,0s))}
.title-mark i{width:clamp(6px,1vw,13px);aspect-ratio:1;background:var(--ink);border-radius:50%}
.title-mark i:nth-child(4){background:var(--ace)}
@keyframes titleUp{from{transform:translateY(108%) rotate(2.5deg)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(1turn)}}

.hero-foot{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:end;gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2rem,4vw,3.5rem);padding-top:1.25rem;border-top:1px solid var(--line)}
.hero-intro{font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.66;color:var(--muted);max-width:38ch}
.hero-intro strong{color:var(--ink);font-weight:600;box-shadow:inset 0 -.42em 0 rgba(201,255,61,.4)}
.hero-stats{display:flex;gap:clamp(1.2rem,2.8vw,2.8rem)}
.hero-stats>div{border-left:1px solid var(--line);padding-left:clamp(.7rem,1.4vw,1.2rem)}
.hero-stats dt{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--muted-2);margin-bottom:.25rem}
.hero-stats dd{font-size:clamp(1.7rem,2.9vw,2.8rem);line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-stats dd i{font-style:normal;font-family:var(--mono);font-size:.65rem;font-weight:450;letter-spacing:0;color:var(--muted-2);margin-left:.22em}
.hero-scroll{display:flex;flex-direction:column;align-items:center;gap:.55rem;font-size:.52rem;line-height:1.5;color:var(--muted-2);text-align:center}
.scroll-cue{width:24px;height:40px;border:1px solid var(--line-strong);border-radius:999px;display:grid;justify-content:center;padding-top:7px}
.scroll-cue i{width:3px;height:7px;border-radius:2px;background:var(--ink);animation:scrollCue 2s var(--ease) infinite}
@keyframes scrollCue{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
.hero-scroll:hover .scroll-cue{border-color:var(--ace-deep)}

.hero-reel{position:relative;margin-top:clamp(2.8rem,6vw,5.5rem);border-radius:var(--r-xl);overflow:hidden;background:var(--dark);box-shadow:var(--shadow-card);border:1px solid rgba(255,255,255,.5)}
.reel-media{position:relative;aspect-ratio:16/8.4;overflow:hidden;background:var(--dark)}
.reel-media img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform;filter:saturate(.92) contrast(1.03)}
.reel-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,6,.22),transparent 32%,rgba(6,8,6,.82) 100%)}
.reel-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:clamp(40px,6vw,90px) clamp(40px,6vw,90px);mask-image:radial-gradient(circle at 50% 50%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 25%,transparent 78%)}
.hud{position:absolute;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:rgba(246,246,241,.82);text-transform:uppercase;background:rgba(8,10,8,.42);border:1px solid rgba(246,246,241,.16);border-radius:999px;padding:.4rem .72rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:inline-flex;align-items:center;gap:.42rem}
.hud--tl{top:clamp(.9rem,2vw,1.6rem);left:clamp(.9rem,2vw,1.6rem)}
.hud--tr{top:clamp(.9rem,2vw,1.6rem);right:clamp(.9rem,2vw,1.6rem)}
.hud--bl{bottom:clamp(.9rem,2vw,1.6rem);left:clamp(.9rem,2vw,1.6rem)}
.hud--br{bottom:clamp(.9rem,2vw,1.6rem);right:clamp(.9rem,2vw,1.6rem)}
.hud-dot{width:6px;height:6px;border-radius:50%;background:var(--ace);box-shadow:0 0 10px var(--ace);flex:none}
.hud-cross{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;opacity:.7}
.hud-cross::before,.hud-cross::after{content:"";position:absolute;background:rgba(246,246,241,.7)}
.hud-cross::before{left:50%;top:0;width:1px;height:100%}
.hud-cross::after{top:50%;left:0;height:1px;width:100%}
.hud-cross i{position:absolute;inset:9px;border:1px solid rgba(201,255,61,.85);border-radius:50%}
.hud-cross i:nth-child(2){inset:15px;background:rgba(201,255,61,.9);border:0}
.ping{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;border-radius:50%;background:var(--ace);box-shadow:0 0 0 4px rgba(201,255,61,.18),0 0 16px rgba(201,255,61,.85)}
.ping::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--ace);animation:ping 2.6s var(--ease) infinite}
.reel-caption{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.3rem);padding:clamp(1rem,2.2vw,1.8rem);background:linear-gradient(0deg,rgba(6,8,6,.78),rgba(6,8,6,0));color:var(--white)}
.reel-no{font-size:.58rem;color:var(--ace);border:1px solid rgba(201,255,61,.4);padding:.34rem .55rem;border-radius:999px;flex:none}
.reel-text{font-weight:550;font-size:clamp(.78rem,1.1vw,1.02rem);letter-spacing:.01em;line-height:1.4}
.reel-text i{font-style:normal;color:var(--ace);padding-inline:.25em}
.reel-meta{font-size:.56rem;color:var(--muted-w);margin-left:auto;white-space:nowrap}
.reel-caption .pill{flex:none}

/* ---------- 5. ticker + section headers ---------- */
.ticker{position:relative;z-index:2;width:104%;margin-left:-2%;margin-block:clamp(3rem,6vw,6rem);background:var(--dark);color:var(--white);padding-block:clamp(.8rem,1.4vw,1.15rem);transform:rotate(-1.1deg);overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.6);border-block:1px solid rgba(255,255,255,.06)}
.ticker-track{display:flex;width:max-content;animation:marquee 30s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;gap:1.4rem;padding-inline:1.4rem;font-size:clamp(.78rem,1.2vw,1.02rem);font-weight:500;letter-spacing:.02em;white-space:nowrap;text-transform:uppercase}
.ticker-track i{font-style:normal;font-size:.5em;color:var(--ace)}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{position:relative;padding-block:clamp(4.5rem,8vw,7.5rem);z-index:2}
.section .container{position:relative}
.sec-head{margin-bottom:clamp(2.4rem,5vw,4.5rem)}
.sec-meta{display:flex;align-items:center;gap:.8rem;padding-top:.85rem;border-top:1px solid var(--line);margin-bottom:clamp(1.3rem,3vw,2.6rem)}
.sec-no{display:inline-grid;place-items:center;min-width:2rem;height:1.55rem;padding-inline:.45rem;background:var(--ink);color:var(--bg);border-radius:999px;font-size:.56rem;letter-spacing:.1em}
.sec-label{font-size:.6rem;color:var(--muted);letter-spacing:.18em}
.sec-head-main{display:grid;grid-template-columns:1.35fr .52fr;align-items:end;gap:clamp(1.2rem,4vw,4rem)}
.sec-title{font-size:clamp(2.4rem,5.6vw,5.3rem);line-height:1;font-weight:620;letter-spacing:-.04em;text-wrap:balance}
.sec-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.25px var(--ink);text-stroke:1.25px var(--ink)}
.sec-lead{font-size:clamp(.86rem,1.05vw,1rem);line-height:1.7;color:var(--muted);max-width:36ch;padding-bottom:.35rem}

/* ---------- 6. profile ---------- */
.section--profile::before{content:"";position:absolute;right:-14%;top:8%;width:620px;height:620px;border-radius:50%;background:rgba(201,255,61,.2);filter:blur(110px);z-index:-1}
.section--profile::after{content:"";position:absolute;left:-10%;bottom:4%;width:520px;height:520px;border-radius:50%;background:rgba(99,245,208,.15);filter:blur(110px);z-index:-1}
.section--profile .container::after{content:"";position:absolute;left:31%;top:42%;width:min(520px,42vw);height:min(430px,38vw);border-radius:50%;background:radial-gradient(circle,rgba(201,255,61,.42),rgba(99,245,208,.16) 58%,transparent 70%);filter:blur(46px);z-index:-1;pointer-events:none}
.profile-grid{display:grid;grid-template-columns:minmax(290px,.82fr) 1.5fr;gap:clamp(1rem,2vw,1.7rem);align-items:stretch}
.profile-panel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:540px;padding:clamp(1.4rem,2.6vw,2.4rem);border-radius:var(--r-lg);color:var(--white);background:radial-gradient(120% 78% at 76% -12%,rgba(201,255,61,.2),transparent 58%),linear-gradient(160deg,#161813,#090A08 62%);border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow-card)}
.profile-panel::after{content:"";position:absolute;inset:auto 0 0 0;height:146px;background:linear-gradient(0deg,#090A08 12%,transparent);z-index:0;pointer-events:none}
.panel-topo{position:absolute;inset:38% -16% -12% -20%;color:rgba(201,255,61,.24);z-index:0;mask-image:linear-gradient(180deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%)}
.panel-topo svg{width:100%;height:100%}
.panel-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-w)}
.status-chip{display:inline-flex;align-items:center;gap:.42rem;padding:.3rem .6rem;border:1px solid var(--line-w);border-radius:999px;font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;color:var(--muted-w)}
.status-chip i{width:6px;height:6px;border-radius:50%;background:var(--ace);box-shadow:0 0 9px var(--ace);flex:none;animation:blink 2s steps(2,end) infinite}
.panel-number{position:relative;z-index:1;display:flex;align-items:baseline;gap:.15em;font-size:clamp(4.6rem,8.4vw,8.4rem);font-weight:640;line-height:.9;letter-spacing:-.06em;margin-top:clamp(1.4rem,3vw,2.4rem);font-variant-numeric:tabular-nums}
.panel-number small{font-family:var(--mono);font-size:.09em;letter-spacing:.14em;color:var(--ace);font-weight:500}
.panel-cap{position:relative;z-index:1;margin-top:.7rem;font-size:.78rem;color:var(--muted-w)}
.panel-rows{position:relative;z-index:1;margin-top:auto;display:flex;flex-direction:column}
.panel-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.72rem;border-top:1px solid var(--line-w)}
.panel-rows dt{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-w2)}
.panel-rows dd{font-size:.74rem;text-align:right;color:rgba(246,246,241,.88)}
.profile-copy{padding:clamp(1.5rem,3.4vw,3.3rem);display:flex;flex-direction:column;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.profile-copy:hover{transform:translateY(-3px);box-shadow:0 40px 80px -40px rgba(20,20,16,.38),inset 0 1px 0 rgba(255,255,255,.85)}
.profile-lead{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.3;font-weight:560;letter-spacing:-.025em;max-width:24ch;margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.profile-text p{font-size:clamp(.88rem,1.03vw,.98rem);line-height:1.78;color:var(--muted);max-width:66ch}
.profile-text p+p{margin-top:.9rem}
.profile-text strong{color:var(--ink);font-weight:600;box-shadow:inset 0 -.45em 0 rgba(201,255,61,.38)}
.chip-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.chip-list li{font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;padding:.4rem .7rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.34);transition:background-color .3s,color .3s,border-color .3s}
.chip-list li:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.approach-list{margin-top:clamp(1.4rem,2.8vw,2.3rem);display:flex;flex-direction:column}
.approach-list li{display:grid;grid-template-columns:2rem 1fr;gap:1rem;align-items:start;padding-block:clamp(.85rem,1.6vw,1.2rem);border-top:1px solid var(--line)}
.approach-list li .mono{display:grid;place-items:center;width:1.7rem;height:1.7rem;border:1px solid var(--line);border-radius:50%;font-size:.55rem;color:var(--muted);transition:background-color .3s,color .3s,border-color .3s}
.approach-list h3{font-size:.95rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.15rem}
.approach-list p{font-size:.8rem;line-height:1.65;color:var(--muted);max-width:58ch}
.approach-list li:hover .mono{background:var(--ace);color:var(--ink);border-color:var(--ace)}

/* ---------- 7. capabilities ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.8rem,1.4vw,1.4rem)}
.cap-card{position:relative;grid-column:span 5;isolation:isolate;display:flex;flex-direction:column;min-height:clamp(480px,44vw,600px);padding:clamp(1.35rem,2.3vw,2.2rem);border-radius:var(--r-lg);overflow:hidden;color:var(--white);background:radial-gradient(120% 80% at 80% -10%,rgba(201,255,61,.1),transparent 58%),linear-gradient(160deg,#171914,#0A0B09 66%);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 38px 80px -42px rgba(10,10,10,.72);transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .5s}
.cap-card--wide{grid-column:span 7}
.cap-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 26%,transparent 70%,rgba(201,255,61,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .6s;pointer-events:none;z-index:3}
.cap-card:hover{transform:translateY(-7px) scale(1.012);border-color:rgba(201,255,61,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 56px 96px -46px rgba(10,10,10,.85),0 0 40px -18px rgba(201,255,61,.35)}
.cap-card:hover::after{opacity:1}
.card-glow{position:absolute;inset:-1px;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .55s;background:radial-gradient(360px circle at var(--mx,72%) var(--my,0%),rgba(201,255,61,.2),transparent 62%),radial-gradient(500px circle at calc(100% - var(--mx,72%)) calc(100% - var(--my,0%)),rgba(99,245,208,.1),transparent 60%),linear-gradient(120deg,rgba(255,255,255,.08),transparent 44%)}
.cap-card:hover .card-glow,.project:hover .card-glow,.contact-card:hover .card-glow{opacity:1}
.cap-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-w);font-size:.58rem;color:var(--muted-w2)}
.cap-no{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;border:1px solid var(--line-w);color:var(--white);font-size:.55rem}
.cap-en{text-align:right}
.cap-main{position:relative;z-index:2;margin-top:clamp(1rem,1.8vw,1.6rem)}
.cap-main h3{font-size:clamp(1.8rem,3.1vw,3rem);line-height:1.02;font-weight:600;letter-spacing:-.04em;margin-bottom:.65rem}
.cap-main p{font-size:clamp(.82rem,.95vw,.92rem);line-height:1.72;color:var(--muted-w);max-width:48ch}
.cap-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.cap-tags li{font-family:var(--mono);font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;padding:.34rem .62rem;border:1px solid var(--line-w);border-radius:999px;color:var(--muted-w);transition:border-color .3s,color .3s}
.cap-card:hover .cap-tags li{border-color:rgba(201,255,61,.28);color:rgba(246,246,241,.82)}
.cap-art{position:relative;z-index:1;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-w);transition:transform .8s var(--ease)}
.cap-card:hover .cap-art{transform:translateY(-4px)}
.cap-art svg{width:100%;height:auto;overflow:visible}
.art-grid path,.art-grid circle{fill:none;stroke:rgba(255,255,255,.055);stroke-width:1}
.art-grid.dotted{stroke-dasharray:3 7;stroke:rgba(255,255,255,.1)}
.art-contour path{stroke:rgba(255,255,255,.33)}
.art-flight{stroke:var(--ace);stroke-width:1.4;stroke-dasharray:5 6;animation:dash 10s linear infinite}
.art-wp circle{fill:#0B0C09;stroke:var(--ace);stroke-width:1.5}
.art-drone{color:var(--white)}
.art-drone circle{fill:var(--ace)}
.art-drone path{stroke:var(--white);stroke-width:1}
.art-drone rect{fill:var(--white)}
.art-label text{fill:rgba(246,246,241,.52);font-family:var(--mono);font-size:8.6px;letter-spacing:.12em}
.art-blueprint{stroke:rgba(246,246,241,.46)}
.art-dims path{stroke:rgba(246,246,241,.24);stroke-dasharray:2 4}
.art-props ellipse{fill:rgba(201,255,61,.16);stroke:var(--ace);stroke-width:1;stroke-dasharray:3 5;transform-box:fill-box;transform-origin:center}
.cap-card:hover .art-props ellipse{animation:propSpin 1.6s linear infinite}
.art-motor circle{fill:var(--ace)}
.art-rows path{stroke:rgba(201,255,61,.4);stroke-width:1}
.art-spray path{stroke:var(--cyan);stroke-width:1.1;stroke-dasharray:2 8;animation:dash 6s linear infinite}
.art-drops circle{fill:var(--cyan);opacity:.75}
.art-hexa path,.art-hexa rect{fill:none;stroke:rgba(246,246,241,.7);stroke-width:1.3}
.art-hexa circle{fill:rgba(201,255,61,.85)}
.art-hexa circle:nth-of-type(5),.art-hexa circle:nth-of-type(6),.art-hexa circle:nth-of-type(7),.art-hexa circle:nth-of-type(8){fill:rgba(246,246,241,.7)}
.art-tiles rect{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.14)}
.art-tiles rect:nth-child(4),.art-tiles rect:nth-child(9){fill:rgba(201,255,61,.14);stroke:rgba(201,255,61,.3)}
.art-cloud circle{fill:rgba(255,255,255,.3)}
.art-target rect,.art-target path{fill:none;stroke:var(--ace);stroke-width:1.3}
.art-target path:last-of-type{stroke-dasharray:2 3;opacity:.6}
@keyframes dash{to{stroke-dashoffset:-200}}
@keyframes propSpin{to{transform:rotate(1turn)}}

/* ---------- 8. projects ---------- */
.section--work::before{content:"";position:absolute;left:-12%;top:22%;width:620px;height:620px;border-radius:50%;background:rgba(99,245,208,.12);filter:blur(120px);z-index:-1}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,1.7vw,1.7rem)}
.project{position:relative;isolation:isolate;overflow:hidden;display:grid;color:var(--white);background:linear-gradient(160deg,#161813,#0A0B09 58%);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);box-shadow:0 44px 90px -46px rgba(10,10,10,.72);transition:transform .75s var(--ease),box-shadow .75s var(--ease),border-color .5s}
.project::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.28),transparent 30%,transparent 65%,rgba(201,255,61,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .6s;pointer-events:none;z-index:3}
.project:hover{transform:translateY(-7px) scale(1.008);border-color:rgba(201,255,61,.18);box-shadow:0 60px 110px -50px rgba(10,10,10,.85)}
.project:hover::after{opacity:1}
.project--hero{grid-column:span 12;grid-template-columns:55% 45%;min-height:clamp(500px,42vw,660px)}
.project--half{grid-column:span 6;grid-template-rows:auto 1fr}
.project--coast{grid-column:span 12;grid-template-columns:48% 52%;min-height:clamp(480px,38vw,600px)}
.project--coast .project-media{order:2}
.project-media{position:relative;overflow:hidden;min-height:260px;background:#141613}
.project--half .project-media{aspect-ratio:5/3;min-height:0}
.project-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.05);transition:transform 1.4s var(--ease),filter .9s var(--ease);will-change:transform}
.project:hover .project-media img{transform:scale(1.055);filter:saturate(1.02) contrast(1.04)}
.project-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,6,.42),rgba(6,8,6,.03) 38%,rgba(6,8,6,.74) 100%),linear-gradient(90deg,rgba(6,8,6,.35),transparent 45%)}
.project--coast .project-shade{background:linear-gradient(180deg,rgba(6,8,6,.45),rgba(6,8,6,.04) 40%,rgba(6,8,6,.72) 100%),linear-gradient(270deg,rgba(6,8,6,.4),transparent 46%)}
.media-tag,.media-coord,.media-hud{position:absolute;z-index:2;font-size:.52rem;letter-spacing:.14em;color:rgba(246,246,241,.85);background:rgba(8,10,8,.46);border:1px solid rgba(246,246,241,.16);border-radius:999px;padding:.36rem .66rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}
.media-tag{top:1rem;left:1rem}
.media-coord{top:1rem;right:1rem}
.media-hud{bottom:1rem;right:1rem}
.project-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.15rem;padding:clamp(1.4rem,2.8vw,2.7rem)}
.project-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.project-year{font-size:.55rem;letter-spacing:.15em;color:var(--muted-w2)}
.project-chip{font-size:.52rem;letter-spacing:.11em;padding:.36rem .66rem;border:1px solid var(--line-w);border-radius:999px;color:var(--muted-w)}
.project-body h3{font-size:clamp(1.55rem,2.6vw,2.6rem);line-height:1.06;font-weight:590;letter-spacing:-.04em}
.project--half .project-body h3{font-size:clamp(1.45rem,2vw,1.95rem)}
.project-body>p{font-size:clamp(.82rem,.96vw,.92rem);line-height:1.75;color:var(--muted-w);max-width:54ch}
.project-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.2rem}
.project-metrics>div{border-top:1px solid var(--line-w);padding-top:.7rem;display:flex;flex-direction:column-reverse;gap:.25rem}
.project-metrics dt{font-family:var(--mono);font-size:.51rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-w2);line-height:1.4}
.project-metrics dd{font-size:clamp(1.45rem,2.15vw,2.15rem);font-weight:620;line-height:1;letter-spacing:-.04em;color:var(--ace)}
.project-metrics dd small{font-family:var(--mono);font-size:.34em;font-weight:400;letter-spacing:.06em;margin-left:.2em;color:rgba(201,255,61,.65)}
.project-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid var(--line-w)}
.project-tags{display:flex;flex-wrap:wrap;gap:.38rem}
.project-tags li{font-family:var(--mono);font-size:.51rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .58rem;border:1px solid var(--line-w);border-radius:999px;color:var(--muted-w)}
.project-cta{display:inline-flex;align-items:center;gap:.55rem;font-size:.75rem;font-weight:550;color:var(--ace);white-space:nowrap;padding-bottom:.15rem;position:relative}
.project-cta::after{content:"";position:absolute;left:0;right:1.7rem;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.project-cta:hover::after{transform:scaleX(1);transform-origin:0 50%}
.project-cta svg{width:18px;height:18px;padding:.18rem;border:1px solid rgba(201,255,61,.5);border-radius:50%;transition:transform .5s var(--ease),background-color .4s,color .4s}
.project-cta:hover svg{transform:translateX(3px);background:var(--ace);color:var(--ink)}
.project-cta--open{color:var(--muted-w)}
.project-cta--open svg{border-color:var(--line-w)}
.ortho-grid{position:absolute;inset:12% 10%;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);opacity:.85}
.ortho-grid i{border:1px solid rgba(201,255,61,.32);background:rgba(201,255,61,.03)}
.ortho-grid i:nth-child(2){border-color:rgba(99,245,208,.3);background:rgba(99,245,208,.05)}
.change-box{position:absolute;z-index:3;right:12%;bottom:16%;font-size:.55rem;color:var(--dark);background:var(--cyan);border-radius:8px;padding:.5rem .65rem;line-height:1.25;box-shadow:0 10px 30px -10px rgba(99,245,208,.8)}
.change-box b{display:block;font-size:1rem;letter-spacing:0}
.project--coast .project-shade::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(246,246,241,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(246,246,241,.07) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 63% 52%,#000,transparent 66%);-webkit-mask-image:radial-gradient(circle at 63% 52%,#000,transparent 66%)}

/* ---------- 9. flight log ---------- */
.section--log{background:linear-gradient(180deg,transparent,rgba(255,255,255,.32) 22%,rgba(255,255,255,.32) 78%,transparent)}
.log-list{border-top:1px solid var(--line-strong)}
.log-row{position:relative;isolation:isolate;display:grid;grid-template-columns:9rem minmax(0,1fr) 11rem 2.6rem;align-items:center;gap:clamp(1rem,2.6vw,2.6rem);padding:clamp(1.15rem,2.1vw,1.85rem) clamp(.4rem,1.3vw,1.2rem);border-bottom:1px solid var(--line);transition:padding .6s var(--ease),color .45s}
.log-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.log-row:hover{padding-left:clamp(1rem,2vw,2rem);padding-right:clamp(1rem,2vw,2rem);color:var(--white)}
.log-row:hover::before{transform:scaleY(1)}
.log-index{font-size:.58rem;letter-spacing:.12em;color:var(--muted);transition:color .4s}
.log-row:hover .log-index{color:var(--ace)}
.log-role h3{font-size:clamp(1.05rem,1.55vw,1.45rem);font-weight:580;letter-spacing:-.022em;line-height:1.25;margin-bottom:.3rem}
.log-role p{font-size:.82rem;line-height:1.6;color:var(--muted);max-width:68ch;transition:color .4s}
.log-row:hover .log-role p{color:rgba(246,246,241,.62)}
.log-org{font-size:.55rem !important;line-height:1.7;color:var(--muted-2) !important;text-align:right;transition:color .4s}
.log-row:hover .log-org{color:var(--muted-w)}
.log-arrow{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:50%;transition:background-color .4s,border-color .4s,color .4s,transform .5s var(--ease)}
.log-arrow svg{width:16px;height:16px}
.log-row:hover .log-arrow{background:var(--ace);color:var(--ink);border-color:var(--ace);transform:translateX(3px)}
.cert-row{display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);flex-wrap:wrap;margin-top:clamp(1.8rem,3vw,2.6rem);padding:1.1rem clamp(1rem,2vw,1.6rem);border:1px solid var(--glass-border);border-radius:999px;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.cert-label{font-size:.55rem;color:var(--muted-2);flex:none}
.cert-row ul{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.cert-row li{position:relative;font-size:.76rem;color:var(--muted);padding-left:.9rem}
.cert-row li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--ace-deep)}

/* ---------- 10. snake lab ---------- */
.section--lab::before{content:"";position:absolute;right:-8%;top:14%;width:560px;height:560px;border-radius:50%;background:rgba(201,255,61,.15);filter:blur(120px);z-index:-1}
.lab-head{margin-bottom:clamp(2rem,4vw,3.4rem)}
.lab-head .sec-meta{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.lab-head-main{display:grid;grid-template-columns:1.25fr .55fr;gap:clamp(1.4rem,4vw,4rem);align-items:end}
.lab-title{font-size:clamp(2.2rem,6.5vw,5.9rem);line-height:1;line-height:.94;font-weight:660;letter-spacing:-.05em;white-space:nowrap}
.lab-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.lab-lede{font-size:clamp(.86rem,1.05vw,1rem);line-height:1.75;color:var(--muted);max-width:38ch;padding-bottom:.35rem}

.lab-shell{position:relative;z-index:2;padding:clamp(.5rem,1.1vw,.9rem);border-radius:clamp(26px,3vw,46px);background:radial-gradient(900px 520px at 18% -10%,#1D2019,#090A08 62%);border:1px solid rgba(201,255,61,.18);box-shadow:0 70px 130px -60px rgba(10,10,10,.9),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden;isolation:isolate}
.lab-shell::before{content:"";position:absolute;left:-8%;top:-44%;width:660px;height:660px;border-radius:50%;background:radial-gradient(circle,rgba(201,255,61,.2),transparent 62%);filter:blur(40px);pointer-events:none;z-index:0}
.lab-shell::after{content:"";position:absolute;right:-6%;bottom:-38%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(99,245,208,.14),transparent 64%);filter:blur(40px);pointer-events:none;z-index:0}
.lab-shell-noise{position:absolute;inset:0;z-index:1;opacity:.3;mix-blend-mode:overlay;pointer-events:none;background-image:url("../assets/noise.svg");background-size:200px 200px}
.game{position:relative;z-index:2;display:grid;grid-template-columns:19rem minmax(0,1fr);gap:clamp(.5rem,1vw,.9rem)}

.game-rail{display:flex;flex-direction:column;gap:clamp(.7rem,1.2vw,1.1rem);padding:clamp(1.1rem,1.8vw,1.7rem);border-radius:clamp(20px,2.2vw,32px);background:rgba(255,255,255,.024);border:1px solid rgba(255,255,255,.07);min-width:0}
.rail-head{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;padding-bottom:.8rem;border-bottom:1px solid var(--line-w);font-size:.54rem;color:var(--muted-w2)}
.status-chip--neon{color:var(--ace);border-color:rgba(201,255,61,.34);background:rgba(201,255,61,.07)}
.readout{display:flex;flex-direction:column}
.readout-label{font-size:.52rem;color:var(--muted-w2);margin-bottom:.15rem}
.readout strong{font-size:clamp(2.4rem,3.4vw,3.5rem);font-weight:620;line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ace);text-shadow:0 0 24px rgba(201,255,61,.35);transition:color .2s}
.readout--best strong{color:rgba(246,246,241,.9);text-shadow:none}
.readout.is-bump strong{animation:scoreBump .38s var(--ease)}
@keyframes scoreBump{0%{transform:translateY(0)}35%{transform:translateY(-5px) scale(1.06);color:#fff}100%{transform:none}}
.rail-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;border-top:1px solid var(--line-w);padding-top:.7rem}
.rail-meta dt{font-family:var(--mono);font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-w2)}
.rail-meta dd{font-size:.76rem;color:rgba(246,246,241,.88);font-variant-numeric:tabular-nums}
.rail-log{margin-top:.15rem;height:clamp(88px,10vh,124px);overflow:hidden;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:.55rem .65rem;display:flex;flex-direction:column;gap:.25rem;font-family:var(--mono);font-size:.53rem;letter-spacing:.06em;line-height:1.5;color:rgba(201,255,61,.74);text-transform:uppercase}
.rail-log li{opacity:0;transform:translateX(-6px);animation:logIn .4s var(--ease) forwards;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-log li span{color:var(--muted-w2);margin-right:.5rem}
.rail-log li.is-new{color:#fff}
@keyframes logIn{to{opacity:1;transform:none}}
.rail-tip{margin-top:auto;font-size:.45rem !important;line-height:1.8;letter-spacing:.12em;color:var(--muted-w2) !important}

.game-main{display:flex;flex-direction:column;min-width:0}
.game-canvas-wrap{position:relative;isolation:isolate;aspect-ratio:3/2;border-radius:clamp(18px,2.4vw,34px);overflow:hidden;background:#070807;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 24px 60px -34px rgba(0,0,0,.9)}
.game-canvas-wrap.is-flash{animation:neonFlash .55s var(--ease)}
@keyframes neonFlash{0%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 0 rgba(201,255,61,0)}30%{box-shadow:inset 0 0 0 1px rgba(201,255,61,.5),0 0 60px rgba(201,255,61,.35)}100%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 24px 60px -34px rgba(0,0,0,.9)}}
.game-canvas-wrap.is-fault{animation:faultShake .42s ease-in-out}
@keyframes faultShake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
#snakeCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none;cursor:crosshair}
#snakeCanvas:focus-visible{outline:2px solid var(--ace);outline-offset:-4px}
.game-canvas-wrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 46%,transparent 46%,rgba(0,0,0,.6) 100%),linear-gradient(180deg,rgba(255,255,255,.035),transparent 16%,transparent 84%,rgba(0,0,0,.35));mix-blend-mode:multiply;opacity:.8}
.stage-corner{position:absolute;z-index:4;width:20px;height:20px;border-color:rgba(201,255,61,.55);border-style:solid;border-width:0;pointer-events:none}
.stage-corner--tl{top:13px;left:13px;border-top-width:1px;border-left-width:1px;border-top-left-radius:4px}
.stage-corner--tr{top:13px;right:13px;border-top-width:1px;border-right-width:1px;border-top-right-radius:4px}
.stage-corner--bl{bottom:13px;left:13px;border-bottom-width:1px;border-left-width:1px;border-bottom-left-radius:4px}
.stage-corner--br{bottom:13px;right:13px;border-bottom-width:1px;border-right-width:1px;border-bottom-right-radius:4px}
.stage-hud{position:absolute;z-index:4;font-size:.44rem;letter-spacing:.13em;color:rgba(246,246,241,.42);pointer-events:none;text-transform:uppercase}
.stage-hud b{color:rgba(201,255,61,.75);font-weight:500}
.stage-hud--tl{top:2.1rem;left:2.2rem}
.stage-hud--tr{top:2.1rem;right:2.2rem}
.stage-hud--bl{bottom:2.1rem;left:2.2rem}
.stage-hud--br{bottom:2.1rem;right:2.2rem}

.game-overlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;gap:.5rem;background:radial-gradient(circle at 50% 46%,rgba(10,14,9,.44),rgba(5,6,5,.82));opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.game-overlay--ready{background:radial-gradient(circle at 50% 46%,rgba(12,16,10,.36),rgba(5,6,5,.86))}
.game.is-paused .game-overlay--paused{background:radial-gradient(circle at 50% 46%,rgba(10,14,9,.2),rgba(5,6,5,.66))}
.game.is-ready .game-overlay--ready,.game.is-paused .game-overlay--paused,.game.is-over .game-overlay--over{opacity:1;visibility:visible}
.overlay-tag{font-size:.5rem;letter-spacing:.2em;color:var(--ace);border:1px solid rgba(201,255,61,.34);background:rgba(201,255,61,.07);padding:.3rem .65rem;border-radius:999px;margin-bottom:.4rem}
.overlay-title{font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:620;line-height:1.08;letter-spacing:-.04em;color:var(--white)}
.overlay-title span{display:inline-block;margin-left:.24em;color:var(--ace);text-shadow:0 0 30px rgba(201,255,61,.5)}
.overlay-sub{font-size:clamp(.62rem,.78vw,.72rem);line-height:1.7;color:var(--muted-w);letter-spacing:.02em}
.overlay-sub b{color:var(--ace);font-weight:500}
.overlay-score{font-size:clamp(.78rem,.95vw,.92rem);color:var(--muted-w);line-height:1.35}
.overlay-score b{display:inline-block;font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:620;letter-spacing:-.03em;color:var(--white);margin-inline:.18em;vertical-align:-2px}
.overlay-score small{display:none;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;color:var(--ace);margin-left:.4rem;animation:blink 1.3s steps(2,end) infinite}
.game-overlay .pill{margin-top:.7rem}
.overlay-title--win span{color:var(--cyan);text-shadow:0 0 30px rgba(99,245,208,.5)}

.game-controls{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);flex-wrap:wrap;padding:clamp(.8rem,1.5vw,1.25rem) clamp(.4rem,1.2vw,1rem) clamp(.2rem,.5vw,.4rem)}
.dpad{display:grid;grid-template-columns:repeat(3,clamp(30px,3vw,38px));grid-template-rows:repeat(3,clamp(30px,3vw,38px));gap:4px;flex:none}
.dbtn{position:relative;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.035);color:rgba(246,246,241,.62);transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s,transform .12s}
.dbtn svg{width:15px;height:15px}
.dbtn:hover{background:rgba(201,255,61,.15);border-color:rgba(201,255,61,.55);color:var(--ace);box-shadow:0 0 18px rgba(201,255,61,.16)}
.dbtn:active,.dbtn.is-press{transform:scale(.94);background:var(--ace);color:var(--ink)}
.dbtn--up{grid-area:1/2}
.dbtn--left{grid-area:2/1}
.dbtn--right{grid-area:2/3}
.dbtn--down{grid-area:3/2}
.dpad-core{grid-area:2/2;display:grid;place-items:center;border-radius:9px;background:rgba(201,255,61,.05);border:1px solid rgba(201,255,61,.16)}
.dpad-core i{width:9px;height:9px;border-radius:50%;background:var(--ace);box-shadow:0 0 12px rgba(201,255,61,.8);animation:blink 1.8s steps(2,end) infinite}
.control-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.restart{min-height:48px;padding-inline:1.5rem}
.pause-btn{padding:.4rem .2rem;color:var(--muted-w);font-size:.58rem;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.pause-btn:hover{color:var(--ace);border-color:rgba(201,255,61,.5)}
.pause-btn.is-on{color:var(--ace)}
.game-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-left:auto;font-size:.47rem;color:var(--muted-w2)}
.game-legend li{display:inline-flex;align-items:center;gap:.4rem}
.game-legend b{color:rgba(246,246,241,.78);font-weight:500}
.key-dot{width:7px;height:7px;border-radius:2px;flex:none}
.key-dot--lime{background:var(--ace);box-shadow:0 0 8px rgba(201,255,61,.7)}
.key-dot--cyan{background:var(--cyan);box-shadow:0 0 8px rgba(99,245,208,.7)}
.key-dot--wall{border:1px solid rgba(246,246,241,.35);background:transparent}

/* ---------- 11. contact / footer ---------- */
.section--contact{padding-bottom:clamp(4rem,7vw,7rem)}
.contact-card{position:relative;isolation:isolate;overflow:hidden;padding:clamp(1.5rem,3.6vw,3.8rem);border-radius:clamp(30px,4vw,52px);color:var(--white);background:radial-gradient(100% 75% at 82% 0%,rgba(201,255,61,.16),transparent 58%),linear-gradient(160deg,#151712,#090A08 58%);border:1px solid rgba(255,255,255,.09);box-shadow:0 80px 150px -70px rgba(10,10,10,.92),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.contact-card:hover{transform:translateY(-5px);box-shadow:0 90px 160px -70px rgba(10,10,10,.95),inset 0 1px 0 rgba(255,255,255,.1)}
.contact-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(145deg,rgba(255,255,255,.32),transparent 30%,transparent 66%,rgba(201,255,61,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.65;pointer-events:none;z-index:3}
.contact-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.7}
.contact-orb--1{width:440px;height:440px;left:-8%;top:-24%;background:rgba(201,255,61,.34);animation:float1 11s ease-in-out infinite}
.contact-orb--2{width:380px;height:380px;right:4%;top:36%;background:rgba(99,245,208,.28);animation:float2 13s ease-in-out infinite}
@keyframes float1{50%{transform:translate(50px,34px) scale(1.1)}}
@keyframes float2{50%{transform:translate(-44px,-30px) scale(1.08)}}
.contact-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(246,246,241,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(246,246,241,.06) 1px,transparent 1px);background-size:74px 74px;mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 72%)}
.contact-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line-w);flex-wrap:wrap}
.contact-top .sec-label{color:var(--muted-w)}
.contact-avail{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;color:var(--muted-w)}
.contact-avail i{width:7px;height:7px;border-radius:50%;background:var(--ace);box-shadow:0 0 10px var(--ace);animation:blink 1.8s steps(2,end) infinite;flex:none}
.contact-title{position:relative;z-index:2;font-size:clamp(3rem,9.6vw,9.6rem);line-height:.9;font-weight:670;letter-spacing:-.055em;margin-block:clamp(1.6rem,3.4vw,3rem) clamp(1.8rem,3.6vw,3.2rem)}
.contact-title span{color:transparent;background:linear-gradient(100deg,var(--ace) 12%,var(--cyan) 94%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.contact-body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.4rem,4vw,4rem);align-items:end}
.contact-body>p{font-size:clamp(.86rem,1.05vw,1rem);line-height:1.78;color:var(--muted-w);max-width:46ch}
.mail-pill{display:grid;grid-template-columns:4.4rem minmax(0,1fr) 3rem;align-items:center;gap:1rem;padding:clamp(.9rem,1.6vw,1.3rem) 0;border-top:1px solid var(--line-w);border-bottom:1px solid var(--line-w);transition:color .3s}
.mail-pill-label{font-size:.5rem;letter-spacing:.16em;color:var(--muted-w2)}
.mail-pill-address{font-size:clamp(1.05rem,2.2vw,2rem);font-weight:550;letter-spacing:-.035em;overflow-wrap:anywhere}
.mail-pill-arrow{width:2.7rem;height:2.7rem;border-radius:50%;border:1px solid var(--line-w);display:grid;place-items:center;transition:background-color .35s,color .35s,border-color .35s,transform .5s var(--ease)}
.mail-pill-arrow svg{width:17px;height:17px}
.mail-pill:hover{color:var(--ace)}
.mail-pill:hover .mail-pill-label{color:var(--ace)}
.mail-pill:hover .mail-pill-arrow{background:var(--ace);color:var(--ink);border-color:var(--ace);transform:rotate(45deg) scale(1.05)}
.contact-meta{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(.6rem,1.4vw,1rem)}
.contact-meta dt{font-size:.48rem;letter-spacing:.14em;color:var(--muted-w2);margin-bottom:.25rem}
.contact-meta dd{font-size:.78rem;color:rgba(246,246,241,.86)}
.contact-marquee{margin-top:clamp(2rem,4vw,3.4rem);margin-bottom:calc(clamp(2rem,4vw,3.4rem) * -1 - .34em);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.contact-marquee-track{display:flex;width:max-content;animation:marquee 36s linear infinite}
.contact-marquee-track span{font-size:clamp(3.4rem,10vw,10rem);font-weight:680;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(246,246,241,.18);white-space:nowrap;padding-right:.12em}
.contact-marquee-track i{font-style:normal;-webkit-text-stroke:0;color:var(--ace)}
.contact-card:hover .contact-marquee-track{animation-play-state:paused}

.site-footer{position:relative;z-index:2;border-top:1px solid var(--line);padding-block:clamp(1.6rem,3vw,2.6rem);background:rgba(243,243,239,.45)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.brand--footer .brand-type{font-size:.9rem}
.footer-nav{display:flex;gap:clamp(.9rem,2vw,2rem);flex-wrap:wrap}
.footer-nav a{font-size:.76rem;color:var(--muted);position:relative;padding-bottom:.12rem}
.footer-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .45s var(--ease)}
.footer-nav a:hover{color:var(--ink)}
.footer-nav a:hover::after{transform:scaleX(1)}
.footer-bottom{display:grid;grid-template-columns:auto auto minmax(0,1.4fr);gap:1rem 2.4rem;align-items:start;padding-top:1rem;font-size:.62rem;color:var(--muted-2)}
.footer-bottom .mono{font-size:.56rem}
.credits{font-size:.6rem;line-height:1.6;color:var(--muted-2);max-width:80ch}
.credits a{text-decoration:underline;text-underline-offset:2px}
.credits a:hover{color:var(--ink)}

/* ---------- 12. responsive ---------- */
@media (max-width:1280px){
  .header-clock{display:none}
  .profile-grid{grid-template-columns:minmax(260px,.85fr) 1.35fr}
}
@media (max-width:1120px){
  .site-nav{display:none}
  .menu-btn{display:grid;place-items:center}
  .game{grid-template-columns:1fr}
  .game-rail{display:grid;grid-template-columns:1fr auto auto;gap:.7rem 1.2rem;align-items:center;padding:1rem 1.2rem}
  .rail-head{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:.6rem;margin-bottom:0}
  .readout{align-items:flex-start}
  .readout strong{font-size:clamp(2.1rem,4vw,2.8rem)}
  .rail-meta{grid-template-columns:repeat(3,auto);justify-content:end;border-top:0;padding-top:0;gap:1rem}
  .rail-log{display:none}
  .rail-tip{display:none}
}
@media (max-width:1024px){
  .sec-head-main,.lab-head-main{grid-template-columns:1fr;align-items:start}
  .sec-lead,.lab-lede{padding-bottom:0;max-width:52ch}
  .profile-grid{grid-template-columns:1fr}
  .profile-panel{min-height:440px}
  .panel-topo{inset:30% -10% -20% -14%}
  .cap-card,.cap-card--wide{grid-column:span 6;min-height:520px}
  .project--hero{grid-template-columns:1fr;min-height:0}
  .project--hero .project-media{aspect-ratio:16/9;min-height:0}
  .project--coast{grid-template-columns:1fr}
  .project--coast .project-media{order:0;aspect-ratio:16/9;min-height:0}
}
@media (max-width:900px){
  .project--half{grid-column:span 12}
  .hero-foot{grid-template-columns:1.2fr 1fr;row-gap:1.8rem}
  .hero-scroll{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:.7rem;padding-top:.2rem}
  .log-row{grid-template-columns:7.5rem minmax(0,1fr) 2.5rem;gap:1rem}
  .log-org{display:none}
}
@media (max-width:780px){
  .hero-title{font-size:clamp(3rem,13.4vw,5rem)}
  .title-line--2{padding-left:clamp(0rem,5vw,3rem)}
  .title-line--3{flex-wrap:nowrap}
  .title-word{animation-duration:1s}
  .hero-foot{grid-template-columns:1fr}
  .hero-stats{width:100%}
  .hero-stats>div{flex:1}
  .hero-reel{border-radius:26px}
  .reel-media{aspect-ratio:4/3}
  .hud--tr,.hud--br{display:none}
  .reel-caption{flex-wrap:wrap;gap:.45rem .8rem;padding:1rem}
  .reel-meta{margin-left:0;width:100%;order:4}
  .reel-caption .pill{margin-left:auto}
  .cap-card,.cap-card--wide{grid-column:span 12;min-height:0}
  .cap-art{margin-top:1.2rem;min-height:180px}
  .panel-number{font-size:clamp(4rem,21vw,7rem)}
  .cert-row{border-radius:26px}
  .cert-row ul{gap:.35rem 1.1rem}
  .game-canvas-wrap{border-radius:18px}
  .game-controls{gap:1rem;justify-content:flex-start;padding-inline:0}
  .game-legend{margin-left:0;width:100%}
  .contact-body{grid-template-columns:1fr;align-items:start}
  .contact-meta{grid-column:1}
  .contact-title{font-size:clamp(2.9rem,13.2vw,5.2rem)}
  .footer-bottom{grid-template-columns:1fr}
}
@media (max-width:620px){
  :root{--r-lg:26px;--r-xl:30px}
  .header-inner{gap:.7rem}
  .header-actions{gap:.6rem}
  .header-cta{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;background:var(--ink)}
  .header-cta span{display:none}
  .header-cta svg{width:17px;height:17px}
  .hero{padding-top:6.4rem}
  .hero-eyebrow{align-items:center}
  .eyebrow{font-size:.55rem;letter-spacing:.11em}
  .hero-live{font-size:.58rem;padding:.3rem .6rem}
  .title-badge{width:54px;margin-bottom:0}
  .title-badge-ring text{font-size:8.6px}
  .title-aside{display:none}
  .title-mark{display:none}
  .hero-stats{gap:.6rem}
  .hero-stats>div{padding-left:.6rem}
  .hero-stats dt{font-size:.47rem;letter-spacing:.08em}
  .hero-intro{font-size:.85rem}
  .sec-title{font-size:clamp(2.1rem,9.3vw,3.2rem)}
  .title-line{letter-spacing:-.055em}
  .profile-copy,.profile-panel{padding:1.25rem}
  .profile-lead{font-size:1.25rem}
  .project--half .project-media,.project--hero .project-media{aspect-ratio:4/3}
  .project-body p{font-size:.8rem}
  .project-metrics{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .project-metrics dd{font-size:1.35rem}
  .project-body{padding:1.15rem}
  .project-foot{align-items:flex-start}
  .media-hud,.media-coord{display:none}
  .change-box{display:none}
  .ortho-grid{inset:10% 8%}
  .log-row{grid-template-columns:1fr 2.3rem;grid-template-areas:"idx arrow" "role role";gap:.55rem 1rem;padding:1.1rem .3rem;align-items:center}
  .log-index{grid-area:idx}
  .log-role{grid-area:role}
  .log-arrow{grid-area:arrow}
  .log-role p{font-size:.78rem}
  .game-rail{grid-template-columns:1fr 1fr;padding:.85rem}
  .rail-meta{grid-column:1/-1;grid-template-columns:repeat(3,1fr);justify-content:stretch;border-top:1px solid var(--line-w);padding-top:.55rem}
  .game-canvas-wrap{aspect-ratio:3/2}
  .stage-hud--tl,.stage-hud--tr{top:2rem}
  .stage-hud--bl,.stage-hud--br{bottom:2rem}
  .overlay-title{font-size:1.55rem}
  .game-overlay--over .overlay-sub{max-width:24ch}
  .control-actions{gap:.55rem}
  .restart{padding-inline:1.15rem}
  .dpad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}
  .contact-card{padding:1.25rem}
  .contact-title{font-size:clamp(2.3rem,12.4vw,4rem);white-space:nowrap}
  .mail-pill{grid-template-columns:minmax(0,1fr) 2.6rem;gap:.8rem}
  .mail-pill-label{display:none}
  .mail-pill-address{font-size:1.02rem}
  .contact-meta{grid-template-columns:1fr 1fr}
  .footer-top{flex-direction:column;align-items:flex-start}
  .cert-row ul{flex-direction:column;gap:.3rem}
}
@media (max-width:420px){
  .hero-title{font-size:clamp(2.75rem,14.4vw,3.6rem)}
  .hero-live span{display:inline}
  .hero-stats dd{font-size:1.5rem}
  .hero-stats dd i{display:block;margin:.1rem 0 0}
  .panel-rows dd{font-size:.66rem;max-width:15ch}
  .game-rail{grid-template-columns:1fr}
  .readout strong{font-size:2.1rem}
  .rail-meta{grid-column:1}
  .game-legend{font-size:.43rem}
  .contact-meta{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .title-word,.title-aside,.title-badge,.title-mark{animation:none}
  .title-badge-ring,.ticker-track,.contact-marquee-track,.scroll-cue i,.pulse-dot::after,.ping::after,.orb,.dpad-core i{animation:none !important}
  *,*::before,*::after{scroll-behavior:auto;transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  #snakeCanvas{cursor:default}
}