/* Freefall: scroll-driven developer portfolio
   Palette is sampled from the two films: the golden shaft, the fire ring,
   the bone-white glow of the risen figure, and one cool iris for contrast. */
:root {
  --void: #000;
  --bone: #efe7da;
  --ash: #8a847b;
  --molten: #ffb23f;
  --ember: #ff5a1e;
  --iris: #8c8cff;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --gutter: clamp(16px, 2.2vw, 36px);
  --ui: 11px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--void); color: var(--bone); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--display);
  font-variation-settings: "wdth" 100;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
::selection { background: var(--molten); color: #000; }
:focus-visible { outline: 2px solid var(--molten); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  /* A native modal sits in the browser top layer. Keep a real pointer visible
     over its controls instead of hiding it beneath or clipping the custom one. */
  html.detail-open, html.detail-open * { cursor: auto !important; }
  html.detail-open button, html.detail-open a, html.detail-open [role="button"] { cursor: pointer !important; }
  html.detail-open .cursor { display: none !important; }
}

/* ---------- shared UI type ---------- */
.nav, .hud, .screen-bar, .btn, .tile-cap, .loader-status, .menu-foot, .hero-foot, .contact-legal {
  font-family: var(--display);
  font-size: var(--ui);
  font-weight: 600;
  font-variation-settings: "wdth" 88;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1.25em 2.1em;
  border: 1px solid currentColor; border-radius: 999px;
  transition: background .35s, color .35s, border-color .35s;
  white-space: nowrap;
}
.btn:hover { background: var(--bone); color: #000; border-color: var(--bone); }
.btn--solid { background: var(--bone); color: #000; border-color: var(--bone); }
.btn--solid:hover { background: var(--molten); border-color: var(--molten); }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; align-content: center; gap: 28px;
  background: var(--void);
  transition: opacity 1.1s cubic-bezier(.7,0,.2,1), visibility 0s 1.1s;
}
.loader-shaft { position: relative; width: 2px; height: 34vh; background: rgba(239,231,218,.12); overflow: hidden; transition: width 1s cubic-bezier(.7,0,.2,1), opacity .8s; }
.loader-shaft i { position: absolute; inset: auto 0 0 0; height: 0%; background: linear-gradient(to top, var(--molten), #fff3d6); box-shadow: 0 0 24px var(--molten); transition: height .25s linear; }
.loader-status { color: var(--ash); font-variant-numeric: tabular-nums; }
.loader-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .6s, transform .6s; }
.loader.is-ready .loader-actions { opacity: 1; transform: none; pointer-events: auto; }
.loader.is-out { opacity: 0; visibility: hidden; }
.loader.is-out .loader-shaft { width: 60vw; opacity: 0; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gutter);
  mix-blend-mode: difference; color: var(--bone);
}
.nav-menu { justify-self: start; min-height: 44px; padding: 6px 0; }
.nav-mark { justify-self: center; text-align: center; }
.nav-mark em { font-style: normal; color: var(--ash); margin-left: .6em; }
.nav-right { justify-self: end; display: flex; gap: 28px; align-items: center; }
.nav-sound, .nav-github, .nav-talk { display: inline-flex; min-height: 44px; align-items: center; }
.nav-sound { gap: 10px; padding: 6px 0; }
.nav-github { white-space: nowrap; }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.bars b { width: 2px; height: 2px; background: currentColor; transition: height .3s; }
.sound-on .bars b { animation: bar 0.9s ease-in-out infinite; }
.sound-on .bars b:nth-child(2) { animation-delay: -.3s; }
.sound-on .bars b:nth-child(3) { animation-delay: -.6s; }
.sound-on .bars b:nth-child(4) { animation-delay: -.15s; }
@keyframes bar { 0%,100% { height: 2px; } 50% { height: 10px; } }
.nav a, .nav button { position: relative; }
.nav a::after, .nav-menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.7,0,.2,1); }
.nav a:hover::after, .nav-menu:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-mark::after { display: none; }

/* ---------- menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0,0,0,.94);
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 90px var(--gutter) 40px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s cubic-bezier(.7,0,.2,1);
  visibility: hidden;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-list { list-style: none; counter-reset: ch; }
.menu-list li { overflow: hidden; counter-increment: ch; }
.menu-list a {
  display: inline-flex; min-height: 44px; align-items: baseline; gap: .4em;
  font-size: clamp(36px, 7.2vh, 92px); line-height: .98;
  font-weight: 850; font-variation-settings: "wdth" 118; letter-spacing: -.035em; text-transform: uppercase;
  transform: translateY(105%); transition: transform .8s cubic-bezier(.7,0,.2,1), color .3s;
}
.menu-list a::before { content: counter(ch, decimal-leading-zero); font-size: 12px; letter-spacing: .06em; font-weight: 600; color: var(--ash); transform: translateY(-1.6em); }
.menu-list a.is-active { color: var(--molten); }
.menu-open .menu-list a { transform: none; }
.menu-list li:nth-child(2) a { transition-delay: .03s; } .menu-list li:nth-child(3) a { transition-delay: .06s; }
.menu-list li:nth-child(4) a { transition-delay: .09s; } .menu-list li:nth-child(5) a { transition-delay: .12s; }
.menu-list li:nth-child(6) a { transition-delay: .15s; } .menu-list li:nth-child(7) a { transition-delay: .18s; }
.menu-list li:nth-child(8) a { transition-delay: .21s; }
.menu-list a:hover { color: var(--molten); }
.menu-list:hover a:not(:hover) { color: rgba(239,231,218,.25); }
.menu-preview { width: min(30vw, 46vh); aspect-ratio: 3/4; overflow: hidden; border-radius: 4px; opacity: 0; transform: scale(.92) rotate(-3deg); transition: opacity .5s, transform .8s cubic-bezier(.2,.8,.2,1); }
.menu-preview img { width: 100%; height: 100%; object-fit: cover; }
.menu-open .menu-preview { opacity: 1; transform: none; transition-delay: .3s; }
.menu-foot { position: absolute; left: var(--gutter); bottom: 24px; color: var(--ash); }

/* ---------- HUD ---------- */
.hud {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: grid; grid-template-columns: 1fr minmax(80px, 22vw) 1fr; gap: 24px; align-items: center;
  padding: 18px var(--gutter);
  mix-blend-mode: difference; color: var(--bone);
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 1s .4s;
}
.is-entered .hud { opacity: 1; }
.hud-chapter { display: flex; gap: 14px; }
.hud-num { color: var(--ash); }
.hud-bar { height: 1px; background: rgba(239,231,218,.25); position: relative; overflow: hidden; }
.hud-bar i { position: absolute; inset: 0; background: var(--bone); transform-origin: left; transform: scaleX(0); }
.hud-read { justify-self: end; }
.hud.is-pulse .hud-read { animation: hudPulse .6s steps(2) 3; }
@keyframes hudPulse { 50% { opacity: 0; } }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; mix-blend-mode: difference; display: none; }
html.has-cursor .cursor { display: block; }
.cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--bone); }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid var(--bone);
  display: grid; place-items: center;
  transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), margin .35s cubic-bezier(.2,.8,.2,1), background .35s;
}
.cursor-ring span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 88; color: #000; opacity: 0; transition: opacity .2s; }
.cursor.is-label .cursor-ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--bone); }
.cursor.is-label .cursor-ring span { opacity: 1; }
.cursor.is-down .cursor-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 150; pointer-events: none;
  opacity: .085;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-6%,4%); } 40% { transform: translate(5%,-7%); }
  60% { transform: translate(-3%,8%); } 80% { transform: translate(7%,2%); } 100% { transform: translate(0,0); }
}

/* =========================================================
   STORY STAGE
   ========================================================= */
.story { position: relative; height: 1700vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--void); }
.stage-inner { position: absolute; inset: 0; }
.stage-inner.is-shake { animation: shake .7s cubic-bezier(.2,.8,.2,1); }
@keyframes shake {
  0% { transform: translate(0,0); } 10% { transform: translate(-14px, 9px) rotate(-.6deg); } 22% { transform: translate(12px,-11px) rotate(.5deg); }
  36% { transform: translate(-8px, 6px); } 52% { transform: translate(5px,-4px); } 70% { transform: translate(-2px, 2px); } 100% { transform: none; }
}

.ambient { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; z-index: 1; }

.world { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 50%; pointer-events: none; overflow: hidden; }
.world--back { z-index: 2; }
.world--front { z-index: 7; mix-blend-mode: difference; }
.world--ui { z-index: 8; }
.cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.wi { position: absolute; left: 0; top: 0; white-space: nowrap; transform-style: preserve-3d; will-change: transform, opacity; opacity: 0; backface-visibility: hidden; }
.wi > span { display: block; transform: translate(-50%, -50%); }

/* world type scale */
.wi.xxl { font-size: clamp(120px, 26vw, 520px); font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.05em; line-height: .8; text-transform: uppercase; }
.wi.xl  { font-size: clamp(72px, 11vw, 230px); font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.045em; line-height: .82; text-transform: uppercase; }
.wi.l   { font-size: clamp(44px, 7vw, 140px); font-weight: 800; font-variation-settings: "wdth" 112; letter-spacing: -.035em; line-height: .86; text-transform: uppercase; }
.wi.m   { font-size: clamp(26px, 3.4vw, 64px); font-weight: 700; font-variation-settings: "wdth" 70; letter-spacing: -.01em; }
.wi.serif { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 56px); letter-spacing: -.01em; }
.wi.tag > span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 88; padding: .9em 1.5em; border: 1px solid currentColor; border-radius: 999px; }
.wi.line > span { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.6vw, 68px); line-height: 1.02; letter-spacing: -.015em; white-space: normal; width: min(88vw, 13em); text-align: center; }
.wi.ghost { color: transparent; -webkit-text-stroke: 1.5px var(--bone); }
.wi.molten { color: var(--molten); } .wi.ghost.molten { color: transparent; -webkit-text-stroke-color: var(--molten); }
.wi.ember { color: var(--ember); }  .wi.ghost.ember { color: transparent; -webkit-text-stroke-color: var(--ember); }
.wi.ash { color: var(--ash); }      .wi.ghost.ash { color: transparent; -webkit-text-stroke-color: var(--ash); }
.wi.iris { color: var(--iris); }

.wi.cta { pointer-events: auto; }
.wi.cta > span {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 88;
  padding: 1.15em 1.8em; border-radius: 999px;
  background: rgba(0,0,0,.55); color: var(--bone); border: 1px solid rgba(239,231,218,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s, color .3s;
}
.wi.cta > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--molten); box-shadow: 0 0 10px var(--molten); }
.wi.cta:hover > span { background: var(--bone); color: #000; }

.index-name {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  font-size: 22vw; line-height: .8; font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.05em; text-transform: uppercase;
  white-space: nowrap; color: rgba(239,231,218,.55); filter: blur(16px);
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none; will-change: transform, opacity;
}

.film {
  position: absolute; top: 0; left: 50%; z-index: 4;
  width: min(100%, 72vh); height: 100%;
  transform: translateX(-50%);
  --f: 22%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%);
  will-change: transform;
}
.film canvas { display: block; width: 100%; height: 100%; }
.vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.7) 100%); }

.index-tiles { position: absolute; inset: 0; z-index: 6; perspective: 1200px; pointer-events: none; }
.index-tiles.is-live { pointer-events: auto; }
.index-tiles.is-live .tile { pointer-events: auto; }
.tile {
  position: absolute; left: 50%; top: 50%;
  overflow: hidden; border-radius: 2px; opacity: 0; pointer-events: none;
  will-change: transform, opacity; background: #111;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .5s; }
.tile.is-mono img { filter: grayscale(1) contrast(1.25); }
.tile.is-iris img { filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(2.2) brightness(.95); }
.tile:hover img { transform: scale(1.08); filter: none; }
.tile-cap { position: absolute; left: 8px; bottom: 7px; font-size: 10px; color: var(--bone); mix-blend-mode: difference; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; }
.tile--gen { display: grid; place-items: center; }
.gen-sun { background:
  repeating-radial-gradient(circle at 50% 62%, var(--ember) 0 6px, transparent 6px 13px),
  radial-gradient(circle at 50% 62%, var(--molten), #2a0a00 70%); }
.gen-type { background: var(--iris); color: #000; }
.gen-type b { font-size: 4.6vh; font-weight: 900; font-variation-settings: "wdth" 62; letter-spacing: -.04em; line-height: 1; }

.rise { position: absolute; inset: 0; z-index: 9; perspective: 1000px; display: flex; justify-content: center; align-items: center; gap: 1vw; mix-blend-mode: difference; pointer-events: none; }
.rise span { display: block; font-size: min(34vw, 62vh); line-height: .8; font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.04em; color: var(--bone); opacity: 0; will-change: transform, opacity; }

.shock {
  position: absolute; left: 50%; top: 44%; z-index: 10;
  width: 30vh; height: 30vh; margin: -15vh 0 0 -15vh; border-radius: 50%;
  border: 2px solid #ffd6a0;
  box-shadow: 0 0 40px 6px var(--ember), inset 0 0 50px 6px var(--ember);
  mix-blend-mode: screen; opacity: 0; pointer-events: none; will-change: transform, opacity;
}

.hero { position: absolute; inset: 0; z-index: 11; perspective: 900px; pointer-events: none; }
.hero > * { pointer-events: auto; }
.hero-intro {
  position: absolute; left: var(--gutter); top: 15vh; max-width: 22em;
  font-family: var(--serif); font-size: clamp(18px, 1.6vw, 26px); line-height: 1.25; color: var(--bone);
  opacity: 0; transform: translateY(16px); transition: opacity 1.2s .9s, transform 1.2s .9s cubic-bezier(.2,.8,.2,1);
}
.hero-name {
  position: absolute; left: 0; right: 0; top: 40vh;
  display: flex; flex-direction: column; align-items: center; gap: .025em;
  font-size: clamp(44px, 9.3vw, 148px); line-height: .72; font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.045em; text-transform: uppercase;
  color: var(--bone); white-space: nowrap; transform-style: preserve-3d;
  transform-origin: 50% 0;
}
.hero-name-line { display: flex; justify-content: center; }
.hn { display: inline-block; flex-shrink: 0; text-shadow: 0 2px 0 rgba(115,46,11,.78), 0 4px 0 rgba(83,34,11,.62), 0 8px 22px rgba(0,0,0,.42), 0 0 34px rgba(255,178,63,.14); transform: translateY(110%) rotateX(-80deg); opacity: 0; transform-origin: 50% 100%; transition: transform 1.3s cubic-bezier(.2,.9,.1,1), opacity .9s; }
.hn.sp { width: .24em; }
.is-entered .hn { transform: none; opacity: 1; }
.is-entered .hero-intro { opacity: 1; transform: none; }
.hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 64px; display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; transition: opacity 1s 1.4s; }
.is-entered .hero-foot { opacity: 1; }
.hero-cue { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-cue i { width: 1px; height: 54px; background: linear-gradient(var(--bone), transparent); position: relative; overflow: hidden; }
.hero-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--molten); animation: cue 1.8s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes cue { to { top: 110%; } }
.hero-skip { color: var(--ash); transition: color .3s; }
.hero-skip:hover { color: var(--bone); }

.flash {
  position: absolute; inset: 0; z-index: 12; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #fff8ea 45%, #ffd391 100%);
  display: grid; place-items: center; overflow: hidden;
}
.flash b {
  font-size: 23vw; font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.05em; text-transform: uppercase;
  color: #000; line-height: .8; will-change: transform;
}
.flash--ember { background: radial-gradient(circle at 50% 44%, #ffe2b8 0%, var(--ember) 40%, rgba(80,10,0,0) 85%); mix-blend-mode: screen; }

/* =========================================================
   WORK
   ========================================================= */
.work { position: relative; height: 520vh; }
.work-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1500px; perspective-origin: 50% 30%; }
.screen {
  position: absolute; inset: 7vh 4.5vw;
  background: #000; border: 1px solid rgba(239,231,218,.14); border-radius: 8px;
  overflow: hidden; transform-origin: 50% 100%;
  will-change: transform, filter;
  box-shadow: 0 40px 120px rgba(0,0,0,.8);
}
.screen[role="button"] { cursor: pointer; }
.screen[role="button"]:focus-visible { outline: 2px solid var(--c); outline-offset: 5px; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 6; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.screen-bar { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: 1fr auto 1fr; padding: 16px 20px; color: var(--ash); z-index: 3; }
.screen-bar span:nth-child(2) { color: var(--bone); }
.screen-bar span:last-child { justify-self: end; }
.screen-title {
  position: absolute; left: 0; top: 50%; z-index: 1;
  white-space: nowrap; transform: translateY(-50%);
  font-size: clamp(110px, 19vw, 380px); font-weight: 900; font-variation-settings: "wdth" 112; letter-spacing: -.05em; line-height: .8; text-transform: uppercase;
  color: var(--c);
}
.screen-title span { display: block; will-change: transform; }
.disc { position: absolute; left: 50%; top: 52%; z-index: 2; width: min(54vh, 64vw); aspect-ratio: 1; transform: translate(-50%, -50%); }
.disc-face { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; will-change: transform; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(239,231,218,.08); }
.disc-face img { width: 100%; height: 100%; object-fit: cover; }
.disc.is-mono .disc-face img { filter: grayscale(1) contrast(1.3) brightness(1.1); }
.disc-face::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px); mix-blend-mode: multiply; }
.disc-face::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: 9%; height: 9%; margin: -4.5% 0 0 -4.5%; border-radius: 50%; background: #000; box-shadow: 0 0 0 6px rgba(239,231,218,.12); }
.disc-ring { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; will-change: transform; }
.disc-ring text { font-family: var(--display); font-size: 9.6px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; fill: var(--bone); font-variation-settings: "wdth" 80; }
.screen-meta { position: absolute; left: 20px; bottom: 20px; z-index: 3; width: min(430px, 44vw); }
.screen-meta h3 { font-size: 13px; font-weight: 700; font-variation-settings: "wdth" 88; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; color: var(--c); }
.project-status { display:inline-flex; align-items:center; margin-left:8px; padding:3px 7px; border:1px solid color-mix(in srgb,var(--c) 48%,transparent); border-radius:999px; color:var(--bone); font:700 8px/1 var(--display); letter-spacing:.12em; vertical-align:2px; }
.screen-meta p { font-family: var(--serif); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.3; color: var(--bone); margin-bottom: 14px; }
.screen-meta dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 11px; font-variation-settings: "wdth" 88; letter-spacing: .04em; color: var(--ash); }
.screen-meta dd { color: var(--bone); }
.screen-cta { position: absolute; right: 20px; bottom: 20px; z-index: 3; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 88; padding: 1.2em 1.9em; border: 1px solid rgba(239,231,218,.4); border-radius: 999px; transition: background .3s, color .3s, border-color .3s; }
.screen-cta:hover { background: var(--c); border-color: var(--c); color: #000; }
.screen-mark { position: absolute; right: 22%; top: 24%; z-index: 3; font-size: clamp(16px, 1.6vw, 28px); font-weight: 800; font-variation-settings: "wdth" 100; color: var(--bone); }
.screen-cta { cursor: pointer; }

/* =========================================================
   ABOUT + MARQUEE
   ========================================================= */
.about { position: relative; padding: 26vh var(--gutter) 16vh; }
.manifesto {
  font-family: var(--serif); font-size: clamp(34px, 5.2vw, 96px); line-height: 1.02; letter-spacing: -.02em;
  max-width: 15.5em;
}
.manifesto .w { opacity: .13; transition: opacity .25s linear; }
.manifesto .w.is-hot { color: var(--molten); }
.about-cols { margin-top: 12vh; margin-left: auto; width: min(100%, 760px); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font-family: var(--serif); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.4; color: var(--ash); }
.about-cols > div:first-child { color: var(--bone); }
.about-cols h3 { margin-bottom: 12px; color: var(--bone); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-cols p + p { margin-top: 18px; }
.experience-archive { --archive-x: 50%; --archive-y: 45%; position: relative; isolation: isolate; width: calc(100% + var(--gutter) * 2); margin: 13vh calc(var(--gutter) * -1) 0; padding: clamp(70px, 11vh, 150px) var(--gutter) clamp(56px, 8vh, 108px); overflow: hidden; perspective: 1200px; background: radial-gradient(ellipse at 50% 24%, rgba(89,37,13,.54), transparent 40%), radial-gradient(ellipse at 50% 115%, rgba(194,76,24,.19), transparent 52%), linear-gradient(180deg,#090706 0%,#100b08 38%,#080706 100%); }
.experience-archive::before,.experience-archive::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; }
.experience-archive::before { opacity:.52; background: radial-gradient(ellipse at var(--archive-x) var(--archive-y),rgba(255,156,72,.15),transparent 35%), linear-gradient(90deg,transparent 8%,rgba(255,143,65,.045) 48%,transparent 54%), repeating-linear-gradient(90deg,transparent 0 9.9%,rgba(245,173,107,.025) 10%); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent); }
.experience-archive::after { inset:auto 0 0; height:34%; opacity:.36; background:repeating-linear-gradient(0deg,rgba(239,178,125,.1) 0 1px,transparent 1px 32px),linear-gradient(180deg,transparent,rgba(255,131,49,.1)); transform:perspective(420px) rotateX(67deg) scale(1.35); transform-origin:bottom; mask-image:linear-gradient(0deg,#000,transparent 84%); }
.experience-atmosphere { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85; }
.experience-archive-inner { position:relative; z-index:1; width:min(100%,1440px); margin:auto; }
.experience-opening { position:relative; min-height:clamp(310px,48vh,570px); display:grid; justify-items:center; align-content:start; text-align:center; }
.experience-kicker { color:var(--molten); font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.experience-kicker span { margin:0 .75em; color:rgba(239,231,218,.32); }
.experience-title { position:relative; z-index:2; margin-top:clamp(36px,7vh,82px); color:#f5eee5; font-size:clamp(64px,14vw,220px); line-height:.76; font-weight:850; letter-spacing:-.085em; text-shadow:0 0 34px rgba(255,183,114,.12),0 20px 80px rgba(0,0,0,.56); transform:translateZ(36px); }
.experience-subtitle { position:relative; z-index:2; margin-top:clamp(20px,3vh,34px); color:rgba(239,231,218,.67); font-family:var(--serif); font-size:clamp(17px,2vw,25px); letter-spacing:.01em; }
.experience-core { position:absolute; left:50%; top:clamp(172px,26vh,300px); width:clamp(132px,18vw,230px); aspect-ratio:1; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 0 48px rgba(255,105,37,.24)); }
.experience-core::before,.experience-core::after { content:""; position:absolute; inset:23%; border-radius:50%; background:radial-gradient(circle,rgba(255,245,220,.9) 0 2%,rgba(255,181,92,.72) 5%,rgba(255,95,29,.3) 18%,rgba(255,98,26,.08) 40%,transparent 68%); box-shadow:0 0 80px rgba(255,114,40,.32); }
.experience-core::after { inset:4%; border:1px solid rgba(255,172,96,.24); background:radial-gradient(circle,transparent 45%,rgba(255,112,45,.07) 59%,transparent 70%); box-shadow:inset 0 0 42px rgba(255,128,55,.14),0 0 48px rgba(255,102,36,.12); }
.core-ring { position:absolute; inset:11%; border:1px solid rgba(255,185,121,.3); border-radius:50%; transform:rotateX(68deg) rotateZ(-28deg); box-shadow:0 0 18px rgba(255,116,52,.13); }
.core-ring--middle { inset:18%; transform:rotateX(68deg) rotateZ(44deg); border-color:rgba(255,213,167,.45); }
.core-ring--inner { inset:29%; transform:rotateX(68deg) rotateZ(8deg); border-style:dashed; border-color:rgba(255,137,66,.65); }
.core-light { position:absolute; inset:42%; border-radius:50%; background:#fff2d6; box-shadow:0 0 14px 5px rgba(255,224,181,.85),0 0 62px 22px rgba(255,124,49,.62),0 0 150px 58px rgba(255,77,23,.22); }
.experience-switch { position:relative; z-index:4; display:flex; align-items:center; justify-content:center; gap:22px; width:max-content; max-width:100%; margin:0 auto clamp(25px,5vh,56px); padding:9px 15px; border-top:1px solid rgba(240,207,172,.18); border-bottom:1px solid rgba(240,207,172,.18); }
.experience-switch button { display:flex; align-items:center; gap:10px; min-height:44px; color:rgba(239,231,218,.5); font-family:var(--display); font-size:10px; letter-spacing:.12em; text-transform:uppercase; transition:color .3s; }
.experience-switch button span { color:var(--bone); font-size:11px; letter-spacing:.08em; }
.experience-switch button:hover,.experience-switch button:focus-visible { color:var(--molten); }
.switch-rule { width:1px; height:19px; background:rgba(239,231,218,.23); }
.experience-pathways { position:absolute; z-index:0; top:clamp(395px,59vh,690px); left:0; width:100%; height:clamp(100px,15vw,180px); overflow:visible; pointer-events:none; }
.pathway { fill:none; stroke-width:1.2; stroke-dasharray:5 8; stroke-dashoffset:180; opacity:.72; filter:drop-shadow(0 0 4px currentColor); transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1); }
.pathway--codomax { stroke:url(#codomaxPath); }.pathway--stoxra { stroke:url(#stoxraPath); }.pathway--gemini { stroke:url(#geminiPath); }
.experience-archive.is-visible .pathway { stroke-dashoffset:0; }
.experience-panels { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,34px); perspective:1300px; }
@media (min-width:1200px) { .experience-panels { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.experience-card { --card-accent:255,166,74; --tilt-x:0deg; --tilt-y:0deg; position:relative; isolation:isolate; display:block; width:100%; min-height:clamp(320px,34vw,470px); padding:clamp(24px,3.6vw,54px); overflow:hidden; border:0; border-radius:2px; color:var(--bone); text-align:left; font-family:var(--display); background:radial-gradient(ellipse at 76% 32%,rgba(var(--card-accent),.18),transparent 42%),linear-gradient(135deg,rgba(30,18,11,.96),rgba(9,8,8,.98) 64%); box-shadow:inset 0 0 0 1px rgba(var(--card-accent),.26),inset 0 1px rgba(255,255,255,.07),0 26px 80px rgba(0,0,0,.5); transform:translate3d(var(--pointer-x,0),var(--pointer-y,0),0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style:preserve-3d; transition:opacity .9s,transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .6s,background .6s; }
.experience-card::before,.experience-card::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; }
.experience-card::before { opacity:.5; background:linear-gradient(118deg,transparent 18%,rgba(var(--card-accent),.1) 48%,transparent 76%),radial-gradient(ellipse at 4% 100%,rgba(var(--card-accent),.12),transparent 49%); transform:translateX(-16%); transition:transform .9s,opacity .5s; }
.experience-card::after { inset:13px; border:1px solid rgba(var(--card-accent),.12); clip-path:polygon(0 0,24% 0,24% 1px,1px 1px,1px 24%,0 24%,0 0,100% 0,100% 24%,calc(100% - 1px) 24%,calc(100% - 1px) 1px,76% 1px,76% 0,100% 0,100% 100%,76% 100%,76% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 76%,100% 76%,100% 100%,0 100%,0 76%,1px 76%,1px calc(100% - 1px),24% calc(100% - 1px),24% 100%); opacity:.8; }
.experience-card--stoxra { --card-accent:151,151,255; background:radial-gradient(ellipse at 24% 30%,rgba(111,104,255,.2),transparent 46%),linear-gradient(145deg,rgba(16,16,35,.97),rgba(8,8,13,.98) 68%); }
.experience-card--gemini { --card-accent:169,161,255; background:radial-gradient(ellipse at 76% 22%,rgba(125,110,255,.22),transparent 46%),linear-gradient(145deg,rgba(18,16,38,.97),rgba(8,8,13,.98) 68%); }
.experience-card--gemini .experience-company { font-size:clamp(32px,3.4vw,54px); line-height:.95; }
.experience-card--gemini .experience-fullname--gemini { color:rgba(205,199,255,.82); }
.experience-card--gemini .experience-verification--gemini strong { color:#d1ccff; }
.experience-panel-index { position:relative; z-index:2; display:flex; align-items:center; gap:11px; color:rgba(239,231,218,.62); font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.experience-panel-index i { width:5px; height:5px; border-radius:50%; background:rgb(var(--card-accent)); box-shadow:0 0 12px rgba(var(--card-accent),.8); }
.experience-card-content { position:relative; z-index:2; display:grid; justify-items:start; max-width:78%; margin-top:clamp(46px,6vw,78px); transform:translateZ(28px); }
.experience-company { color:#f6efe8; font-size:clamp(36px,5.3vw,74px); line-height:.87; font-weight:820; letter-spacing:-.075em; text-transform:uppercase; text-shadow:0 4px 32px rgba(var(--card-accent),.2); }
.experience-fullname { margin-top:10px; color:rgba(239,231,218,.62); font-size:clamp(11px,1.05vw,14px); font-weight:650; letter-spacing:.2em; text-transform:uppercase; }
.experience-fullname--stoxra { color:rgba(192,190,255,.72); }
.experience-role { margin-top:clamp(24px,3.2vw,42px); max-width:30em; color:var(--bone); font-family:var(--serif); font-size:clamp(19px,2vw,27px); line-height:1.12; }
.experience-verification { display:grid; gap:5px; margin-top:clamp(20px,2.6vw,34px); padding-left:13px; border-left:1px solid rgba(var(--card-accent),.78); color:rgba(239,231,218,.56); font-family:var(--display); font-size:10px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; }
.experience-verification strong { color:rgba(255,224,190,.94); font-size:12px; letter-spacing:.08em; }
.experience-verification--pending strong { color:rgba(203,201,255,.92); }
.experience-open { display:flex; justify-content:space-between; gap:12px; width:min(100%,310px); margin-top:clamp(22px,3vw,38px); padding-top:12px; border-top:1px solid rgba(var(--card-accent),.25); color:rgb(var(--card-accent)); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.experience-orbit { position:absolute; z-index:0; right:7%; top:21%; width:clamp(135px,20vw,280px); aspect-ratio:1; border:1px solid rgba(var(--card-accent),.18); border-radius:50%; transform:rotateX(66deg) rotateZ(-28deg); box-shadow:0 0 45px rgba(var(--card-accent),.08),inset 0 0 28px rgba(var(--card-accent),.07); transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s; }
.experience-orbit::before,.experience-orbit::after { content:""; position:absolute; inset:12%; border:1px solid rgba(var(--card-accent),.26); border-radius:50%; transform:rotate(52deg) scaleY(.52); }
.experience-orbit::after { inset:22%; transform:rotate(-42deg) scaleY(.5); border-style:dashed; }
.experience-orbit i,.experience-orbit b,.experience-orbit em { position:absolute; width:6px; height:6px; border-radius:50%; background:rgb(var(--card-accent)); box-shadow:0 0 18px 5px rgba(var(--card-accent),.54); }
.experience-orbit i { top:8%; left:39%; }.experience-orbit b { right:4%; bottom:35%; width:4px; height:4px; }.experience-orbit em { left:15%; bottom:21%; width:3px; height:3px; }
.experience-orbit--iris { transform:rotateX(63deg) rotateZ(36deg) scale(.92); }
.experience-hotspot { position:absolute; right:clamp(24px,3vw,48px); bottom:clamp(24px,3vw,48px); display:grid; width:43px; height:43px; place-items:center; border:1px solid rgba(var(--card-accent),.45); border-radius:50%; color:rgb(var(--card-accent)); font-size:18px; transition:background .35s,transform .35s,box-shadow .35s; }
.experience-footnote { position:relative; z-index:2; margin-top:23px; color:rgba(239,231,218,.42); font-family:var(--serif); font-size:16px; text-align:center; }
.experience-archive.is-cinematic:not(.is-visible) .experience-opening > :not(.experience-core), .experience-archive.is-cinematic:not(.is-visible) .experience-switch, .experience-archive.is-cinematic:not(.is-visible) .experience-card, .experience-archive.is-cinematic:not(.is-visible) .experience-footnote { opacity:0; transform:translate3d(0,25px,0); }
.experience-archive.is-visible .experience-opening > :not(.experience-core), .experience-archive.is-visible .experience-switch, .experience-archive.is-visible .experience-footnote { opacity:1; transform:translate3d(0,0,0); }
.experience-archive.is-cinematic:not(.is-visible) .experience-card { opacity:0; transform:translate3d(var(--pointer-x,0),calc(20px + var(--pointer-y,0)),0) rotateX(calc(var(--tilt-x) + 2deg)) rotateY(var(--tilt-y)); }
.experience-archive.is-visible .experience-card { opacity:1; transform:translate3d(var(--pointer-x,0),var(--pointer-y,0),0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
.experience-archive.is-visible .experience-kicker { transition:opacity .7s .12s,transform .7s .12s; }
.experience-archive.is-visible .experience-title { transition:opacity 1s .28s,transform 1.1s cubic-bezier(.16,1,.3,1) .28s; }
.experience-archive.is-visible .experience-subtitle { transition:opacity .8s .58s,transform .8s .58s; }
.experience-archive.is-visible .experience-core { opacity:1; transform:translate3d(-50%,0,0) scale(1); transition:opacity 1s .4s,transform 1.2s cubic-bezier(.16,1,.3,1) .4s; }
.experience-archive.is-visible .experience-switch { transition:opacity .7s .68s,transform .7s .68s; }
.experience-archive.is-visible .experience-card { transition:opacity .9s .82s,transform .95s cubic-bezier(.16,1,.3,1) .82s,box-shadow .6s,background .6s; }
.experience-archive.is-visible .experience-card:nth-child(2) { transition-delay:1.02s,.1s,.1s,.1s; }
.experience-archive.is-visible .experience-footnote { transition:opacity .7s 1.2s,transform .7s 1.2s; }
.experience-archive.is-cinematic:not(.is-visible) .experience-core { opacity:0; transform:translate3d(-50%,26px,0) scale(.72); }
.experience-archive.is-visible .core-ring--outer { animation:core-orbit 18s linear infinite; }
.experience-archive.is-visible .core-ring--middle { animation:core-orbit 13s linear infinite reverse; }
.experience-archive.is-visible .core-ring--inner { animation:core-orbit 9s linear infinite; }
@keyframes core-orbit { to { rotate:360deg; } }
.experience-archive.is-visible .experience-core::before { animation:energy-bloom 1.35s cubic-bezier(.16,1,.3,1) .56s both; }
.experience-archive.is-visible .core-light { animation:core-pulse 4.6s ease-in-out .8s infinite alternate; }
@keyframes energy-bloom { 0% { transform:scale(.24); opacity:0; } 38% { transform:scale(1.22); opacity:1; } 100% { transform:scale(1); opacity:.95; } }
@keyframes core-pulse { from { scale:.92; filter:brightness(.85); } to { scale:1.08; filter:brightness(1.22); } }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .experience-card:hover,.experience-card:focus-visible { z-index:3; box-shadow:inset 0 0 0 1px rgba(var(--card-accent),.72),inset 0 1px rgba(255,255,255,.1),0 32px 90px rgba(0,0,0,.62),0 0 68px rgba(var(--card-accent),.16); }
 .experience-card:hover::before,.experience-card:focus-visible::before { opacity:.95; transform:translateX(8%); }
 .experience-card:hover .experience-orbit,.experience-card:focus-visible .experience-orbit { transform:rotateX(66deg) rotateZ(-15deg) scale(1.08); filter:drop-shadow(0 0 18px rgba(var(--card-accent),.44)); }
 .experience-card--stoxra:hover .experience-orbit,.experience-card--stoxra:focus-visible .experience-orbit { transform:rotateX(63deg) rotateZ(48deg) scale(1.03); }
 .experience-card:hover .experience-hotspot,.experience-card:focus-visible .experience-hotspot { background:rgba(var(--card-accent),.16); transform:rotate(45deg); box-shadow:0 0 24px rgba(var(--card-accent),.3); }
}
.experience-card:focus-visible { outline:2px solid rgb(var(--card-accent)); outline-offset:5px; }

.marquee { padding: 6vh 0 14vh; overflow: hidden; border-top: 1px solid rgba(239,231,218,.12); border-bottom: 1px solid rgba(239,231,218,.12); }
.marquee-row { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-track span {
  padding: 0 .35em; font-size: clamp(54px, 9vw, 170px); line-height: 1; font-weight: 900; font-variation-settings: "wdth" 120; letter-spacing: -.045em; text-transform: uppercase;
}
.marquee-track span.o { color: transparent; -webkit-text-stroke: 1.5px var(--bone); }
.achievements { padding: 12vh var(--gutter); }
.achievements .services-head { color: var(--bone); }
.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.achievement-card {
  display: grid; justify-items: start; gap: 10px; min-height: 260px; padding: clamp(20px, 4vw, 52px);
  border: 1px solid rgba(239,231,218,.2); color: var(--bone); background: #080706;
  transition: border-color .3s, transform .3s, background .3s;
}
.achievement-card:hover, .achievement-card:focus-visible { border-color: var(--molten); transform: translateY(-4px); background: #100c07; }
.achievement-card--rank:hover, .achievement-card--rank:focus-visible { border-color: var(--ember); background: #100804; }
.achievement-card--award:hover, .achievement-card--award:focus-visible { border-color:#ffb23f; background:#100c07; }
.achievement-card--builder:hover, .achievement-card--builder:focus-visible { border-color:#aaa4ff; background:#0c0b12; }
.achievement-overline { color: var(--ash); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.achievement-card strong { font-size: clamp(46px, 8vw, 116px); line-height: .88; font-weight: 900; letter-spacing: -.05em; }
.achievement-label { font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); color: var(--ash); }
.achievement-card--rank strong { color: var(--ember); }
.achievement-card--award strong { color:#ffb23f; font-size:clamp(34px,5vw,72px); }
.achievement-card--builder strong { color:#aaa4ff; }
.achievements-marquee { margin: -2vh calc(-1 * var(--gutter)) 7vh; border-top: 1px solid rgba(239,231,218,.12); border-bottom: 1px solid rgba(239,231,218,.12); }
.achievements-marquee .marquee-track span { font-size: clamp(48px, 8vw, 132px); }
.achievements-marquee .marquee-track > .marquee-quote { display:flex; flex-direction:column; justify-content:center; gap:.02em; min-width:max-content; padding-inline:.12em; font-size:clamp(54px,9.5vw,156px); line-height:.83; white-space:normal; }
.achievements-marquee .marquee-quote .quote-line { display:block; padding:0; font-size:inherit; line-height:inherit; }
.achievements-marquee .marquee-quote .quote-line + .quote-line { padding-left:.36em; }
.nav-linkedin { margin-left:clamp(12px,2vw,30px); font:700 10px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:760px) { .achievements-marquee .marquee-track > .marquee-quote { font-size:clamp(48px,12vw,82px); } .nav-linkedin { display:none; } }

/* =========================================================
   SERVICES
   ========================================================= */
.services { position: relative; padding: 18vh var(--gutter) 22vh; }
.services-head { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(24px, 2.4vw, 40px); margin-bottom: 6vh; color: var(--ash); }
.tech-proof-note { max-width: 48em; margin: -4vh 0 5vh; color: var(--ash); font-family: var(--serif); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.4; }
.svc-list { list-style: none; border-top: 1px solid rgba(239,231,218,.16); }
.svc { border-bottom: 1px solid rgba(239,231,218,.16); position: relative; overflow: hidden; transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.svc.is-cinematic:not(.is-visible) { opacity: 0; transform: translateY(20px); }
.svc.is-cinematic.is-visible { opacity: 1; transform: none; }
.svc.is-cinematic.is-visible:nth-child(2) { transition-delay: .06s; }
.svc.is-cinematic.is-visible:nth-child(3) { transition-delay: .12s; }
.svc.is-cinematic.is-visible:nth-child(4) { transition-delay: .18s; }
.svc.is-cinematic.is-visible:nth-child(5) { transition-delay: .24s; }
.svc.is-cinematic.is-visible:nth-child(6) { transition-delay: .3s; }
.svc-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; padding: 3.2vh 0; position: relative; z-index: 1; }
.svc::before { content: ""; position: absolute; inset: 0; background: var(--bone); transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.7,0,.2,1); }
.svc:hover::before { transform: scaleY(1); }
.svc-name { font-size: clamp(36px, 4.9vw, 104px); line-height: .9; font-weight: 850; font-variation-settings: "wdth" 115; letter-spacing: -.045em; text-transform: uppercase; transition: transform .55s cubic-bezier(.2,.8,.2,1), color .4s; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.skill-chip { display: inline-flex; min-height: 44px; align-items: center; padding: 0 14px; border: 1px solid rgba(239,231,218,.26); border-radius: 999px; color: var(--bone); font-size: 12px; line-height: 1.25; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.skill-chip:hover, .skill-chip:focus-visible { border-color: var(--molten); background: var(--molten); color: #000; transform: translateY(-2px); }
.svc:hover .svc-name { transform: translateX(2vw); color: #000; }
.svc:hover .skill-chip { border-color: rgba(0,0,0,.42); color: #000; }
.svc:hover .skill-chip:hover, .svc:hover .skill-chip:focus-visible { background: #000; color: var(--bone); border-color: #000; }
.svc-preview {
  position: fixed; left: 0; top: 0; z-index: 40; width: min(22vw, 300px); aspect-ratio: 3/4; pointer-events: none;
  overflow: hidden; border-radius: 4px; opacity: 0; transform: scale(.6); transition: opacity .35s;
  will-change: transform, opacity;
}
.svc-preview.is-on { opacity: 1; }
.svc-preview img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   PORTAL
   ========================================================= */
.portal { position: relative; height: 640vh; }
.portal-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#portalCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform; transform-origin: 50% 42%; }
.tunnel { position: absolute; inset: 0; perspective: 700px; pointer-events: none; mix-blend-mode: screen; }
.tunnel-cam { position: absolute; left: 50%; top: 44%; width: 0; height: 0; transform-style: preserve-3d; }
.arch {
  position: absolute; left: 0; top: 0; width: 46vh; height: 74vh; margin: -37vh 0 0 -23vh;
  border: 1.5px solid rgba(255,140,90,.9); border-radius: 23vh 23vh 0 0;
  box-shadow: 0 0 28px rgba(255,90,30,.5), inset 0 0 28px rgba(255,90,30,.35);
  will-change: transform, opacity; opacity: 0;
}
.arch span { position: absolute; left: 50%; bottom: -1.6em; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #ffc9a8; font-variation-settings: "wdth" 88; }
.portal-shade { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,.65) 100%), linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 45%); pointer-events: none; }
.portal-line {
  position: absolute; left: 50%; bottom: 13vh; width: min(92vw, 14em);
  font-family: var(--serif); font-style: italic; font-size: clamp(30px, 4.4vw, 84px); line-height: 1; text-align: center; letter-spacing: -.015em;
  transform: translateX(-50%); opacity: 0; will-change: transform, opacity, filter;
}
.portal-cta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 40px; padding: 0 var(--gutter); text-align: center; opacity: 0; pointer-events: none; }
.portal-cta.is-live { pointer-events: auto; }
.portal-cta h2 { font-size: clamp(44px, 7.4vw, 150px); line-height: .86; font-weight: 900; font-variation-settings: "wdth" 118; letter-spacing: -.045em; text-transform: uppercase; max-width: 11em; }
.portal-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { position: relative; min-height: 100vh; padding: 20vh var(--gutter) 90px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6vh; background: var(--void); }
.contact-kicker { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 34px); color: var(--ash); }
.contact-mail { display: inline-block; align-self: flex-start; font-size: clamp(34px, 7vw, 150px); line-height: .9; font-weight: 900; font-variation-settings: "wdth" 100; letter-spacing: -.05em; transition: color .3s; overflow-wrap: anywhere; }
.contact-mail:hover { color: var(--molten); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; align-items: end; padding-top: 30px; border-top: 1px solid rgba(239,231,218,.16); }
.contact-social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; font-weight: 600; font-variation-settings: "wdth" 95; }
.contact-social a { position: relative; }
.contact-social a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.7,0,.2,1); }
.contact-social a:hover::after { transform: scaleX(1); transform-origin: left; }
.contact-time { font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--ash); font-variant-numeric: tabular-nums; }
.contact-time span { color: var(--bone); }
.contact-again { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "wdth" 88; padding: 1.3em 2em; border: 1px solid var(--bone); border-radius: 999px; transition: background .3s, color .3s; }
.contact-again:hover { background: var(--molten); color: #000; border-color: var(--molten); }
.contact-legal { color: var(--ash); }
.copy-feedback { min-height: 1.2em; color: var(--molten); font-size: 12px; font-family: var(--display); }

/* ---------- accessible detail dialog ---------- */
.detail-dialog {
  position: fixed; inset: 0; width: min(760px, calc(100vw - 28px)); max-width: none; max-height: min(88dvh, 900px); height: max-content;
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
  border: 1px solid color-mix(in srgb, var(--detail-accent, var(--molten)) 65%, transparent);
  border-radius: 8px; background: #080706; color: var(--bone);
  opacity: 0; transform: translateY(16px) scale(.985);
  transition: opacity .24s ease, transform .24s ease, display .24s allow-discrete, overlay .24s allow-discrete;
}
.detail-dialog[open] { opacity: 1; transform: none; }
.detail-dialog .cursor { z-index: 9999; }
@starting-style { .detail-dialog[open] { opacity: 0; transform: translateY(16px) scale(.985); } }
.detail-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(8px); transition: background .24s ease; }
.detail-dialog[data-detail-kind="experience"] { border-color: rgba(255,178,63,.76); box-shadow: 0 0 0 1px rgba(255,178,63,.08), 0 0 70px rgba(255,86,24,.14), 0 35px 100px rgba(0,0,0,.72); }
.detail-dialog[data-detail-kind="experience"]::backdrop { background: radial-gradient(ellipse at 50% 45%, rgba(91,33,9,.25), rgba(3,3,3,.86)); }
.detail-shell { position: relative; padding: clamp(24px, 5vw, 54px); }
.detail-close { position: sticky; top: 0; float: right; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px 10px 12px; border: 1px solid rgba(239,231,218,.35); border-radius: 50%; font-size: 28px; line-height: 1; transition: color .2s, background .2s, border-color .2s; }
.detail-close:hover { color: #000; background: var(--detail-accent, var(--molten)); border-color: var(--detail-accent, var(--molten)); }
.detail-eyebrow { margin: 4px 52px 10px 0; color: var(--detail-accent, var(--molten)); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.detail-dialog h2 { clear: both; margin-bottom: 14px; font-size: clamp(34px, 6vw, 64px); line-height: .95; font-weight: 850; letter-spacing: -.04em; text-transform: uppercase; }
.detail-summary { max-width: 60ch; margin-bottom: 28px; color: var(--ash); font-family: var(--serif); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.35; }
.detail-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-section { padding: 16px; border: 1px solid rgba(239,231,218,.14); border-radius: 4px; }
.detail-section h3 { margin-bottom: 8px; color: var(--detail-accent, var(--molten)); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.detail-section p, .detail-section li { color: var(--bone); font-size: 14px; line-height: 1.5; }
.detail-section ul { padding-left: 18px; }
.detail-section .detail-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.detail-section .detail-tags li { padding: 7px 10px; border: 1px solid rgba(239,231,218,.2); border-radius: 999px; color: var(--bone); font-size: 13px; }
.detail-previews { display:grid; gap:18px; margin-top:18px; }
.detail-previews[hidden] { display:none !important; }
.detail-preview { padding:16px; border:1px solid rgba(239,231,218,.14); border-radius:4px; }
.detail-preview h3 { margin-bottom:12px; color:var(--detail-accent,var(--molten)); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.detail-preview img { display:block; width:100%; height:auto; max-height:78dvh; object-fit:contain; object-position:top center; background:#f7f6f2; }
.detail-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.detail-link { display: inline-flex; min-height: 44px; align-items: center; gap: .6em; padding: 10px 17px; border: 1px solid rgba(239,231,218,.42); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: color .2s, background .2s, border-color .2s; }
.detail-link:hover { color: #000; background: var(--detail-accent, var(--molten)); border-color: var(--detail-accent, var(--molten)); }
.detail-no-links { align-self: center; color: var(--ash); font-size: 14px; line-height: 1.5; }

.magnet { will-change: transform; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.magnet.is-pull { transition: transform .15s linear; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Portrait screens: the film fills the frame, so the back type sits on top of it */
@media (max-aspect-ratio: 4/5) {
  .film { --f: 0%; }
  .world--back { z-index: 5; mix-blend-mode: overlay; }
  .hero-name { top: auto; bottom: 18vh; font-size: clamp(40px, 11vw, 72px); line-height: .76; }
  .hero-intro { top: 12vh; max-width: 16em; }
}
@media (max-width: 760px) {
  :root { --ui: 11px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-mark { display: none; }
  .nav-right { gap: clamp(10px, 3vw, 18px); }
  .nav-sound span { display: none; }
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-bar { display: none; }
  .menu { grid-template-columns: 1fr; }
  .menu-preview { display: none; }
  .screen { inset: 7vh 3vw 5vh; }
  .screen-title { top: 31%; font-size: clamp(72px, 18vw, 150px); }
  .disc { top: 33%; width: 48vw; }
  .screen-meta { left: 14px; right: 14px; bottom: 64px; width: auto; padding: 10px; background: rgba(0,0,0,.72); }
  .screen-meta h3 { margin-bottom: 5px; }
  .screen-meta p { display: block; font-size: 14px; line-height: 1.2; margin-bottom: 6px; }
  .screen-meta dl { gap: 3px 10px; font-size: 12px; line-height: 1.35; }
  .screen-cta { left: 14px; right: auto; bottom: 16px; font-size: 12px; }
  .screen-mark { right: 8%; top: 18%; }
  .screen-bar { grid-template-columns: 1fr auto; }
  .screen-bar span:first-child { display: none; }
  .about-cols { grid-template-columns: 1fr; gap: 20px; }
  .experience-list { gap: 10px; }
  .experience-archive { width:calc(100% + var(--gutter) * 2); margin-top:10vh; padding-top:76px; padding-bottom:58px; }
  .experience-opening { min-height:300px; }
  .experience-title { margin-top:52px; font-size:clamp(64px,16vw,112px); }
  .experience-subtitle { max-width:25em; padding:0 10px; font-size:18px; }
  .experience-core { top:185px; width:148px; }
  .experience-switch { gap:12px; margin-bottom:25px; }
  .experience-switch button { gap:7px; font-size:9px; }
  .experience-switch button span { font-size:10px; }
  .experience-pathways { display:none; }
  .experience-panels { grid-template-columns:1fr; gap:13px; }
  .experience-card { min-height:330px; padding:25px 21px; }
  .experience-card-content { max-width:86%; margin-top:48px; }
  .experience-company { font-size:clamp(38px,11vw,58px); }
  .experience-role { margin-top:23px; font-size:22px; }
  .experience-verification { margin-top:20px; }
  .experience-open { margin-top:22px; }
  .experience-orbit { right:3%; top:20%; width:150px; opacity:.78; }
  .experience-hotspot { width:40px; height:40px; right:20px; bottom:20px; }
  .experience-footnote { max-width:25em; margin:20px auto 0; font-size:15px; }
  .tech-proof-note { margin-top: -3vh; }
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-card { min-height: 200px; }
  .svc-row { grid-template-columns: 1fr; gap: 10px; }
  .skill-list { gap: 6px; }
  .skill-chip { min-height: 44px; font-size: 12px; }
  .svc-preview { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-again { justify-self: start; }
  .hero-foot { bottom: 56px; }
  .detail-sections { grid-template-columns: 1fr; }
  .detail-shell { padding: 22px; }
  .detail-dialog { max-height: 90dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hero-cue i::after { animation: none; }
  .experience-archive::before,.experience-archive::after { opacity:.45; }
  .experience-archive *, .experience-archive *::before, .experience-archive *::after { animation:none !important; scroll-behavior:auto !important; transition:none !important; }
  .experience-archive.is-cinematic:not(.is-visible) .experience-opening > :not(.experience-core), .experience-archive.is-cinematic:not(.is-visible) .experience-switch, .experience-archive.is-cinematic:not(.is-visible) .experience-card, .experience-archive.is-cinematic:not(.is-visible) .experience-footnote { opacity:1; transform:none; }
  .experience-archive.is-cinematic:not(.is-visible) .experience-core { opacity:1; transform:translateX(-50%); }
  .stage-inner.is-shake { animation: none; }
  .experience-card, .achievement-card, .skill-chip, .detail-dialog, .detail-link, .svc { transition: none; }
  .experience-timeline.is-cinematic:not(.is-visible) .experience-card, .svc.is-cinematic:not(.is-visible) { opacity: 1; transform: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Phase 5/6: project-specific motion plates and evidence labels. */
.tech-legend { display:flex; flex-wrap:wrap; gap:10px 22px; margin:-2vh 0 4vh; color:rgba(239,231,218,.65); font-size:10px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; list-style:none; }
.tech-legend li { display:flex; align-items:center; gap:8px; }
.tech-dot { width:7px; height:7px; border-radius:50%; background:#e9a33d; box-shadow:0 0 12px currentColor; }
.tech-dot--explored { color:#9b95df; background:#9b95df; }.tech-dot--familiar { color:#8d9b8c; background:#8d9b8c; }
.skill-chip::before { content:""; width:6px; height:6px; margin-right:8px; flex:0 0 auto; border-radius:50%; background:#e9a33d; box-shadow:0 0 9px currentColor; }
.skill-chip[data-level="explored"]::before { background:#9b95df; }.skill-chip[data-level="familiar"]::before { background:#8d9b8c; }
.svc.is-cinematic.is-visible:nth-child(7) { transition-delay:.36s; }.svc.is-cinematic.is-visible:nth-child(8) { transition-delay:.42s; }
.detail-visual[hidden] { display:none; }
.detail-visual { --art:#e7a03a; position:relative; isolation:isolate; margin:0 0 24px; overflow:hidden; border:1px solid color-mix(in srgb,var(--art) 38%,transparent); border-radius:5px; background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--art) 12%,transparent),transparent 64%),linear-gradient(135deg,#12100d,#070707 72%); }
.project-art { position:relative; min-height:230px; padding:18px clamp(12px,3vw,28px) 12px; overflow:hidden; }
.project-art::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.35; background:linear-gradient(90deg,transparent 49.8%,color-mix(in srgb,var(--art) 18%,transparent) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,color-mix(in srgb,var(--art) 12%,transparent) 50%,transparent 50.2%); background-size:44px 44px; mask-image:linear-gradient(180deg,#000,transparent); }
.project-art--opero { --art:#ffad36; }.project-art--face { --art:#ff633a; }.project-art--vault { --art:#ddd7c9; }.project-art--infra { --art:#9995f5; }.project-art--crisis { --art:#9bb99b; }
.art-caption { display:flex; justify-content:space-between; gap:14px; color:var(--art); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.art-caption b { color:rgba(239,231,218,.58); font-weight:600; text-align:right; }
.project-art svg { display:block; width:100%; height:clamp(145px,22vw,220px); overflow:visible; }
.art-foot { color:rgba(239,231,218,.56); font-family:var(--serif); font-size:14px; line-height:1.3; }
.project-art--opero .art-flow-line { fill:none; stroke:rgba(255,173,54,.38); stroke-width:2; stroke-dasharray:7 12; animation:art-dash 2.8s linear infinite; }
.project-art--opero .art-nodes circle { fill:#100d09; stroke:var(--art); stroke-width:1.5; filter:drop-shadow(0 0 7px rgba(255,173,54,.5)); }
.project-art--opero .art-labels { fill:rgba(255,226,182,.74); font:700 9px var(--display); text-anchor:middle; letter-spacing:.07em; }
.project-art--opero .art-pulse { fill:#fff1d6; filter:drop-shadow(0 0 11px #ffad36); animation:opero-trace 7s ease-in-out infinite; }
.project-art--face .face-grid { position:relative; width:min(230px,55vw); height:158px; margin:16px auto 14px; border:1px solid rgba(255,99,58,.48); background:linear-gradient(rgba(255,99,58,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,99,58,.07) 1px,transparent 1px); background-size:14px 14px; clip-path:polygon(8% 0,92% 0,100% 10%,100% 90%,92% 100%,8% 100%,0 90%,0 10%); }
.face-silhouette { position:absolute; left:36%; top:12%; width:28%; height:76%; border:1px solid rgba(255,177,142,.8); border-radius:48% 48% 43% 43%; box-shadow:0 0 30px rgba(255,99,58,.18),inset 0 0 18px rgba(255,99,58,.12); }
.face-silhouette::before { content:""; position:absolute; left:-15%; right:-15%; top:43%; height:1px; background:rgba(255,202,177,.8); box-shadow:0 0 12px var(--art); }
.face-sweep { position:absolute; left:0; right:0; height:1px; background:#ffc2a5; box-shadow:0 0 12px 2px var(--art); animation:face-sweep 3.5s ease-in-out infinite alternate; }
.face-grid i { position:absolute; z-index:1; width:22px; height:22px; border-color:var(--art); opacity:.8; }
.face-grid i:nth-child(1) { top:12px; left:12px; border-top:1px solid; border-left:1px solid; }.face-grid i:nth-child(2) { top:12px; right:12px; border-top:1px solid; border-right:1px solid; }.face-grid i:nth-child(3) { bottom:12px; left:12px; border-bottom:1px solid; border-left:1px solid; }.face-grid i:nth-child(4) { bottom:12px; right:12px; border-bottom:1px solid; border-right:1px solid; }
.project-art--vault .vault-links path { fill:none; stroke:rgba(229,220,192,.4); stroke-width:1.5; stroke-dasharray:5 8; animation:art-dash 4s linear infinite; }
.project-art--vault .vault-nodes circle { fill:#0d0e0c; stroke:#dfd6c0; stroke-width:1.5; }.project-art--vault .vault-nodes circle:nth-child(4) { fill:#625033; filter:drop-shadow(0 0 12px rgba(232,190,110,.56)); }
.project-art--vault svg text { fill:#f1e8d4; font:700 9px var(--display); text-anchor:middle; letter-spacing:.18em; }
.infra-grid { position:relative; height:158px; margin:16px 0 14px; overflow:hidden; background:linear-gradient(rgba(151,147,245,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(151,147,245,.1) 1px,transparent 1px),linear-gradient(165deg,transparent 49%,rgba(151,147,245,.3) 50%,transparent 51%); background-size:20px 20px,20px 20px,100% 100%; }
.infra-tower { position:absolute; left:50%; bottom:0; width:31%; height:94%; transform:translateX(-50%); border:1px solid rgba(189,185,255,.65); clip-path:polygon(33% 0,67% 0,100% 100%,0 100%); background:linear-gradient(90deg,transparent 48%,rgba(171,166,255,.26) 50%,transparent 52%); }
.infra-tower::before { content:""; position:absolute; inset:22% 18%; border-left:1px solid rgba(189,185,255,.42); border-right:1px solid rgba(189,185,255,.42); background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(189,185,255,.26) 19px 20px); }
.infra-box { position:absolute; padding:4px 7px; border:1px solid rgba(174,170,255,.72); color:#c7c4ff; font:9px var(--display); }.infra-box--a { left:22%; top:30%; }.infra-box--b { right:20%; bottom:20%; }
.infra-scan { position:absolute; left:0; right:0; top:0; height:1px; background:#d9d6ff; box-shadow:0 0 14px 3px var(--art); animation:face-sweep 4s ease-in-out infinite alternate; }
.automation-graph-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:rgba(168,201,158,.45) transparent; scrollbar-width:thin; margin:14px -8px 10px; padding:10px 8px 14px; }
.automation-graph { display:flex; align-items:center; min-width:820px; gap:7px; }
.flow-node { flex:0 0 104px; min-height:86px; display:grid; align-content:center; gap:5px; padding:9px; border:1px solid rgba(168,201,158,.26); border-radius:3px; color:rgba(239,231,218,.72); background:linear-gradient(145deg,rgba(32,50,35,.66),rgba(6,9,7,.92)); text-align:left; transition:border-color .2s,background .2s,transform .2s,box-shadow .2s; cursor:pointer; }
.flow-node i { color:rgba(168,201,158,.7); font:700 8px var(--display); font-style:normal; letter-spacing:.13em; }
.flow-node b { color:var(--bone); font:700 11px var(--display); }
.flow-node small { color:rgba(239,231,218,.5); font:9px var(--display); line-height:1.25; }
.flow-node:hover,.flow-node:focus-visible,.flow-node.is-active { border-color:var(--art); background:rgba(67,95,65,.56); box-shadow:0 0 18px rgba(126,175,118,.14); transform:translateY(-2px); outline:none; }
.flow-node--hold { border-color:rgba(234,195,117,.46); background:rgba(63,49,27,.52); }
.flow-edge { position:relative; flex:0 0 13px; height:1px; background:rgba(168,201,158,.48); }
.flow-edge::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; color:#a8c99e; transform:rotate(45deg); }
.flow-edge--branch { background:repeating-linear-gradient(90deg,rgba(226,190,120,.55) 0 3px,transparent 3px 6px); }
.flow-inspector { min-height:58px; padding:10px 12px; border-left:1px solid var(--art); background:linear-gradient(90deg,rgba(87,120,81,.12),transparent); }
.flow-inspector-title { display:block; margin-bottom:5px; color:var(--art); font:700 9px var(--display); letter-spacing:.11em; }
.flow-inspector-copy { color:rgba(239,231,218,.78); font:13px/1.4 var(--serif); }
.art-motion-toggle { position:absolute; right:12px; bottom:10px; z-index:2; min-height:36px; padding:0 12px; border:1px solid rgba(239,231,218,.32); border-radius:999px; color:var(--bone); background:#0c0b0a; font:600 9px var(--display); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.art-motion-toggle:hover,.art-motion-toggle:focus-visible { color:#080706; background:var(--detail-accent,var(--molten)); outline:none; }
.detail-visual.is-paused *, .detail-visual.is-paused *::before, .detail-visual.is-paused *::after { animation-play-state:paused !important; }
@keyframes art-dash { to { stroke-dashoffset:-64; } }
@keyframes opero-trace { 0%,5% { cx:65px; } 12%,19% { cx:193px; } 26%,33% { cx:321px; } 40%,47% { cx:449px; } 54%,61% { cx:577px; } 68%,75% { cx:705px; } 82%,90%,100% { cx:835px; } }
@keyframes face-sweep { from { top:10%; } to { top:88%; } }
@media (max-width:760px) { .tech-legend { font-size:9px; gap:8px 14px; }.project-art { min-height:205px; }.art-caption { font-size:8px; }.art-foot { max-width:75%; font-size:12px; }.automation-graph { min-width:820px; }.flow-node { flex-basis:100px; } }
@media (prefers-reduced-motion:reduce) { .project-art *, .project-art *::before, .project-art *::after { animation:none !important; transition:none !important; }.art-motion-toggle { display:none; } }


/* Phase 7: distinct, restrained project flow plates for the five detail panels. */
.project-art--odin { --art:#8fb8ff; }
.project-art--proofline { --art:#9abaff; }
.project-art--proofline .flow-node { border-color:rgba(154,186,255,.3); background:linear-gradient(145deg,rgba(35,49,76,.62),rgba(6,8,13,.94)); }
.project-art--proofline .flow-node:hover,.project-art--proofline .flow-node:focus-visible,.project-art--proofline .flow-node.is-active { background:rgba(47,71,112,.58); box-shadow:0 0 22px rgba(130,170,245,.18); }
.project-art--opero { --art:#ffb44a; }
.project-art--vault { --art:#d9d0bd; }
.project-art--infra { --art:#a59dff; }
.project-art--face { --art:#ff8060; }
.flow-visual { position:absolute; z-index:-1; inset:38px 8% auto auto; width:148px; height:118px; opacity:.7; pointer-events:none; }
.flow-core { position:absolute; left:50%; top:50%; width:36px; height:36px; border:1px solid color-mix(in srgb,var(--art) 80%,white); border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,color-mix(in srgb,var(--art) 65%,transparent),transparent 72%); box-shadow:0 0 30px color-mix(in srgb,var(--art) 32%,transparent),inset 0 0 14px color-mix(in srgb,var(--art) 30%,transparent); }
.flow-orbit { position:absolute; left:50%; top:50%; width:104px; height:52px; border:1px solid color-mix(in srgb,var(--art) 40%,transparent); border-radius:50%; transform:translate(-50%,-50%) rotate(-32deg); }
.flow-orbit--b { transform:translate(-50%,-50%) rotate(32deg); }
.flow-spark { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--art); box-shadow:0 0 12px var(--art); }
.flow-spark--a { left:19%; top:25%; }.flow-spark--b { right:18%; bottom:20%; }
.flow-visual--opero .flow-core { border-radius:4px; }.flow-visual--vault .flow-orbit { width:120px; height:42px; }.flow-visual--infra .flow-core { border-radius:2px; transform:translate(-50%,-50%) rotate(45deg); }.flow-visual--face .flow-core { width:34px; height:48px; border-radius:48% 48% 44% 44%; }
.flow-visual--odin .flow-core { border-radius:10px; }
.project-art--odin::before { background:linear-gradient(90deg,transparent 49.8%,rgba(110,160,255,.12) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(110,160,255,.08) 50%,transparent 50.2%); }
.project-art--odin .flow-node { border-color:rgba(143,184,255,.3); background:linear-gradient(145deg,rgba(25,39,65,.68),rgba(6,8,13,.94)); }
.project-art--odin .flow-node:hover,.project-art--odin .flow-node:focus-visible,.project-art--odin .flow-node.is-active { background:rgba(45,73,119,.58); box-shadow:0 0 22px rgba(104,153,245,.18); }
.project-art--infra .flow-node { border-color:rgba(165,157,255,.3); background:linear-gradient(145deg,rgba(47,39,82,.56),rgba(7,7,13,.94)); }
.project-art--face .flow-node { border-color:rgba(255,128,96,.3); background:linear-gradient(145deg,rgba(67,35,30,.56),rgba(12,7,7,.94)); }
.project-art--vault .flow-node { border-color:rgba(217,208,189,.28); background:linear-gradient(145deg,rgba(57,51,40,.52),rgba(10,10,9,.94)); }
.project-art--opero .flow-node { border-color:rgba(255,180,74,.3); background:linear-gradient(145deg,rgba(68,47,20,.5),rgba(12,9,5,.94)); }
.automation-graph { position:relative; z-index:1; }
.flow-node { flex-basis:118px; min-height:92px; backdrop-filter:blur(8px); }
.flow-node:focus-visible { outline:2px solid var(--art); outline-offset:3px; }
.flow-inspector { position:relative; z-index:1; border-radius:0 4px 4px 0; }
.art-foot { position:relative; z-index:1; max-width:88%; }
@media (max-width:760px) { .flow-visual { right:1%; top:43px; transform:scale(.72); transform-origin:top right; opacity:.45; }.flow-node { flex-basis:108px; } }

.flow-core { animation:flow-breathe 4.8s ease-in-out infinite; }.flow-spark--a { animation:flow-twinkle 3.7s ease-in-out infinite alternate; }.flow-spark--b { animation:flow-twinkle 4.2s ease-in-out infinite alternate-reverse; }
@keyframes flow-breathe { 0%,100% { opacity:.72; transform:translate(-50%,-50%) scale(.94); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } }
@keyframes flow-twinkle { from { opacity:.35; } to { opacity:1; } }


/* Phase 9: editorial introduction, degree feature, and cinematic contact finish. */
.about { overflow:hidden; }
.about-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(24px,4vh,48px); }
.about-kicker,.about-index,.education-index { color:var(--molten); font:700 10px/1.3 var(--display); letter-spacing:.17em; text-transform:uppercase; }
.about-kicker span { color:rgba(239,231,218,.35); padding:0 .6em; }
.manifesto { max-width:16em; font-size:clamp(34px,5.05vw,82px); line-height:1.03; }
.manifesto .w { transition:opacity .3s ease,color .3s ease; }
.about-cols { position:relative; width:min(100%,1120px); margin:clamp(56px,9vh,118px) 0 0 auto; grid-template-columns:minmax(0,.85fr) minmax(320px,1.15fr); gap:clamp(26px,5vw,76px); align-items:stretch; }
.about-note { padding:clamp(10px,2vw,28px) 0; }
.about-note h3 { max-width:13em; margin:clamp(26px,4vh,46px) 0 18px; color:var(--bone); font:500 clamp(28px,3vw,46px)/1.04 var(--serif); letter-spacing:-.018em; text-transform:none; }
.about-note p { max-width:32em; color:rgba(239,231,218,.68); font:clamp(16px,1.35vw,20px)/1.55 var(--display); }
.education-feature { position:relative; isolation:isolate; min-height:310px; display:grid; grid-template-columns:38px 1fr; gap:20px; padding:clamp(24px,4vw,48px); overflow:hidden; border:1px solid rgba(239,231,218,.18); border-radius:4px; background:radial-gradient(ellipse at 100% 0%,rgba(255,154,65,.12),transparent 55%),linear-gradient(140deg,rgba(23,18,14,.92),rgba(8,7,6,.92)); }
.education-feature::after { content:"RNS"; position:absolute; right:-.02em; bottom:-.25em; z-index:-1; color:rgba(239,231,218,.025); font:900 clamp(120px,17vw,250px)/1 var(--display); letter-spacing:-.1em; }
.education-index { grid-column:1/-1; }
.education-marker { position:relative; width:24px; height:100%; min-height:180px; }
.education-marker::before { content:""; position:absolute; left:11px; top:0; bottom:0; width:1px; background:linear-gradient(var(--molten),rgba(255,178,63,.1)); }
.education-marker i { position:absolute; top:7px; left:6px; width:11px; height:11px; border:1px solid #ffcb78; border-radius:50%; background:#170e08; box-shadow:0 0 16px rgba(255,178,63,.5); }
.education-copy { align-self:center; }
.education-place { color:var(--molten); font:700 11px/1.4 var(--display); letter-spacing:.11em; text-transform:uppercase; }
.education-copy h3 { margin:16px 0 12px; color:var(--bone); font:500 clamp(26px,3.15vw,44px)/1.05 var(--serif); letter-spacing:-.015em; text-transform:none; }
.education-location { color:var(--ash); font:14px/1.4 var(--display); }
.education-year { display:flex; gap:18px; justify-content:space-between; align-items:center; max-width:410px; margin-top:36px; padding-top:13px; border-top:1px solid rgba(239,231,218,.16); color:var(--ash); font:10px/1.35 var(--display); letter-spacing:.08em; text-transform:uppercase; }
.education-year strong { color:var(--bone); font-size:18px; letter-spacing:0; }
.contact { min-height:100svh; padding:clamp(110px,15vh,200px) var(--gutter) clamp(28px,5vh,64px); gap:clamp(20px,3.2vh,42px); overflow:hidden; background:radial-gradient(ellipse at 80% 16%,rgba(142,55,21,.16),transparent 40%),linear-gradient(180deg,#090706 0%,#050505 72%); }
.contact::before { content:""; position:absolute; inset:8% -12% auto; height:1px; background:linear-gradient(90deg,transparent,rgba(255,160,88,.3),transparent); box-shadow:0 0 44px 9px rgba(255,116,45,.12); pointer-events:none; }
.contact-kicker { position:relative; z-index:1; color:var(--molten); font-size:clamp(19px,2vw,30px); }
.contact-intro { max-width:1100px; }
.contact-intro h2 { max-width:16em; color:var(--bone); font:750 clamp(36px,6.5vw,94px)/.98 var(--display); font-variation-settings:"wdth" 92; letter-spacing:-.065em; }
.contact-intro p { margin-top:clamp(16px,3vh,30px); color:rgba(239,231,218,.56); font:650 10px/1.4 var(--display); letter-spacing:.13em; text-transform:uppercase; }
.contact-mail { max-width:100%; font-size:clamp(20px,5.2vw,76px); line-height:1; letter-spacing:-.055em; font-variation-settings:"wdth" 90; overflow-wrap:normal; white-space:nowrap; }
.email-local { white-space:normal; overflow-wrap:anywhere; }
.email-domain { display:inline-block; white-space:nowrap; }
.contact-copy-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.contact-copy-row .btn { min-height:44px; }
.contact-copy-row .copy-feedback { flex-basis:100%; min-height:0; }
.contact-grid { grid-template-columns:1fr 1fr auto; }
.contact-legal { margin-top:auto; padding-top:clamp(22px,4vh,44px); border-top:1px solid rgba(239,231,218,.1); font-size:10px; }
.tech-legend { margin-top:0; padding-top:18px; border-top:1px solid rgba(239,231,218,.1); }
.tech-dot--familiar { color:#8d9b8c; background:#8d9b8c; }
.skill-chip { border:1px solid rgba(239,231,218,.12); border-radius:999px; background:linear-gradient(135deg,rgba(239,231,218,.045),rgba(239,231,218,.012)); transition:transform .24s ease,border-color .24s ease,background .24s ease,color .24s ease,box-shadow .24s ease; }
.skill-chip:hover,.skill-chip:focus-visible { transform:translateY(-2px); border-color:rgba(255,178,63,.62); background:rgba(255,178,63,.08); box-shadow:0 8px 26px rgba(0,0,0,.22); }
.skill-chip[data-level="explored"]:hover,.skill-chip[data-level="explored"]:focus-visible { border-color:rgba(155,149,223,.72); background:rgba(155,149,223,.1); }
.skill-chip[data-level="familiar"]:hover,.skill-chip[data-level="familiar"]:focus-visible { border-color:rgba(141,155,140,.72); background:rgba(141,155,140,.1); }
.svc-name { font-size:clamp(12px,1.15vw,15px); letter-spacing:.12em; }
.svc.is-cinematic { transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),border-color .3s ease; }
.svc-row { padding-block:clamp(20px,3vh,32px); }
.svc-list { border-top:1px solid rgba(239,231,218,.15); }
@media (min-width:761px) and (max-width:1100px) {
 .about-cols { grid-template-columns:.75fr 1.25fr; width:min(100%,940px); }
 .contact-mail { font-size:clamp(36px,5.5vw,60px); }
 .contact-grid { grid-template-columns:1fr 1fr; }
 .contact-again { grid-column:1/-1; justify-self:start; }
}
@media (max-width:760px) {
 .about { padding-top:18vh; padding-bottom:10vh; }
 .about-cols { grid-template-columns:1fr; gap:22px; width:100%; margin-top:55px; }
 .about-note { padding:4px 0 16px; }
 .about-note h3 { margin-top:22px; }
 .education-feature { min-height:270px; padding:24px 18px; grid-template-columns:24px 1fr; gap:12px; }
 .education-copy h3 { font-size:clamp(27px,7.8vw,38px); }
 .education-year { margin-top:26px; }
 .contact { min-height:90svh; padding-top:110px; gap:22px; }
 .contact-intro h2 { font-size:clamp(34px,9vw,58px); }
 .contact-mail { font-size:clamp(20px,5.2vw,40px); letter-spacing:-.05em; }
 .contact-grid { grid-template-columns:1fr; gap:20px; }
 .contact-again { justify-self:start; }
 .contact-legal { margin-top:28px; }
}
@media (max-width:390px) {
 .contact { padding-inline:18px; }
 .contact-intro h2 { font-size:clamp(32px,8.7vw,36px); }
 .contact-mail { font-size:20px; letter-spacing:-.06em; }
 .contact-social { gap:12px 20px; }
}
@media (prefers-reduced-motion:reduce) {
 .manifesto .w { transition:none; }
 .skill-chip,.svc { transition:none; }
 .contact::before { box-shadow:none; }
}


/* About: the copy stays in its own editorial column; motion lives in a separate lab plate. */
.about { isolation:isolate; background:radial-gradient(ellipse at 84% 18%,rgba(166,67,24,.075),transparent 36%); }
.about-heading { position:relative; z-index:2; }
.about-showcase { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(370px,.96fr); align-items:center; gap:clamp(28px,5.3vw,86px); min-height:clamp(680px,80vh,980px); }
.about-copy { position:relative; z-index:2; max-width:800px; padding-block:3vh; }
.about-copy > .about-index { display:block; margin-bottom:clamp(22px,4vh,42px); }
.manifesto { max-width:none; font-family:var(--serif); font-size:clamp(26px,3.05vw,48px); line-height:1.14; letter-spacing:-.012em; }
.manifesto-copy { margin:0 0 1.05em; color:rgba(239,231,218,.82); }
.manifesto-copy:last-child { margin-bottom:0; }
.manifesto .w { opacity:.16; transition:opacity .24s linear,color .24s linear; }
.manifesto .w.is-hot { color:var(--molten); }
.about-signoff { max-width:25em; margin-top:clamp(28px,5vh,56px); padding-left:18px; border-left:1px solid var(--molten); color:rgba(239,231,218,.57); font:italic clamp(20px,2vw,29px)/1.3 var(--serif); }
.about-signoff strong { color:var(--bone); font-weight:400; }
.about-lab { --lab-accent:#ffad50; position:relative; z-index:1; min-width:0; min-height:clamp(520px,64vw,780px); overflow:hidden; border:1px solid rgba(255,178,92,.19); background:radial-gradient(ellipse at 52% 45%,rgba(154,61,21,.14),transparent 39%),linear-gradient(145deg,rgba(22,14,10,.8),rgba(6,6,6,.93) 68%); box-shadow:inset 0 0 100px rgba(0,0,0,.55),0 30px 90px rgba(0,0,0,.22); }
.about-lab::before,.about-lab::after { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; }
.about-lab::before { opacity:.32; background:linear-gradient(90deg,rgba(255,185,106,.09) 1px,transparent 1px),linear-gradient(rgba(255,185,106,.065) 1px,transparent 1px); background-size:35px 35px; mask-image:radial-gradient(ellipse at 50% 48%,#000 0%,transparent 78%); }
.about-lab::after { opacity:.45; background:linear-gradient(115deg,transparent 18%,rgba(255,147,67,.10) 49%,transparent 53%); transform:translateX(-110%); }
.lab-grid { position:absolute; inset:12% 8% 17%; border:1px solid rgba(255,178,92,.08); transform:perspective(550px) rotateY(-16deg) rotateX(5deg); transform-origin:center; background:repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,183,98,.06) 40px),repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,183,98,.055) 40px); mask-image:radial-gradient(ellipse,#000 18%,transparent 80%); }
.lab-track { position:absolute; z-index:1; left:0; right:0; overflow:hidden; white-space:nowrap; color:rgba(255,194,126,.3); font:700 8px/1.2 var(--display); letter-spacing:.25em; }
.lab-track span { display:inline-block; min-width:max-content; }
.lab-track--forward { top:7%; }.lab-track--reverse { bottom:7%; color:rgba(239,231,218,.24); }
.lab-rail { position:absolute; z-index:2; left:13px; top:18%; bottom:18%; display:flex; flex-direction:column; justify-content:space-between; color:rgba(255,178,92,.44); font:700 7px/1 var(--display); letter-spacing:.18em; writing-mode:vertical-rl; }
.lab-stream { position:absolute; z-index:1; top:17%; height:92px; overflow:hidden; color:rgba(255,179,101,.32); font:7px/1.55 ui-monospace,Consolas,monospace; text-align:center; mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); }
.lab-stream--a { right:18%; }.lab-stream--b { left:22%; top:36%; color:rgba(239,231,218,.24); }
.data-explosion { position:absolute; left:53%; top:37%; width:min(76%,390px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,144,54,.10),rgba(255,144,54,.025) 38%,transparent 70%); }
.data-explosion::before,.data-explosion::after { content:""; position:absolute; inset:16%; border:1px solid rgba(255,180,102,.12); border-radius:50%; }
.data-explosion::after { inset:4%; border-style:dashed; border-color:rgba(255,180,102,.08); }
.data-orbit { position:absolute; inset:22%; border:1px solid rgba(255,178,92,.19); border-radius:50%; transform:rotate(-34deg) scaleY(.55); }
.data-orbit--two { inset:31%; transform:rotate(42deg) scaleY(.64); border-color:rgba(255,225,188,.13); }
.data-core { position:absolute; left:50%; top:50%; width:19%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(255,208,148,.65); border-radius:50%; background:radial-gradient(circle,#fff0d5 0 3%,rgba(255,158,70,.56) 17%,rgba(255,95,29,.15) 52%,transparent 72%); box-shadow:0 0 34px rgba(255,125,42,.32),0 0 100px rgba(255,94,32,.12); }
.data-particle { position:absolute; left:50%; top:50%; display:grid; place-items:center; min-width:21px; height:21px; padding:0 4px; border:1px solid rgba(255,182,103,.25); border-radius:50%; color:rgba(255,221,183,.72); background:rgba(14,9,6,.86); font:700 8px/1 var(--display); box-shadow:0 0 16px rgba(255,136,57,.12); transform:translate(-50%,-50%) translate(var(--dx),var(--dy)); opacity:.76; }
.code-fragment { position:absolute; z-index:2; display:grid; gap:8px; max-width:78%; padding:11px 13px; border:1px solid rgba(255,186,111,.17); color:rgba(239,231,218,.57); background:rgba(7,7,7,.75); box-shadow:0 8px 30px rgba(0,0,0,.24); backdrop-filter:blur(6px); }
.code-fragment span { color:rgba(255,177,92,.68); font:700 7px/1 var(--display); letter-spacing:.17em; }
.code-fragment code { font:9px/1.45 ui-monospace,Consolas,monospace; }
.code-fragment code b { color:#f3ae6a; font-weight:400; }
.code-fragment--python { left:10%; top:23%; }.code-fragment--react { right:7%; top:52%; }.code-fragment--api { left:14%; bottom:22%; }
.compile-terminal { position:absolute; z-index:3; right:7%; bottom:12%; width:min(76%,330px); min-height:190px; padding:0 14px 14px; border:1px solid rgba(255,180,98,.34); background:rgba(6,7,7,.91); box-shadow:0 14px 48px rgba(0,0,0,.54),0 0 35px rgba(255,131,49,.08); backdrop-filter:blur(9px); }
.terminal-bar { display:flex; align-items:center; justify-content:space-between; min-height:32px; margin:0 -14px 10px; padding:0 12px; border-bottom:1px solid rgba(255,178,92,.15); color:rgba(255,190,125,.65); font:700 7px/1 var(--display); letter-spacing:.12em; }
.terminal-lights { display:flex; gap:4px; }.terminal-lights i { width:5px; height:5px; border-radius:50%; background:#bd7243; }.terminal-lights i:nth-child(2) { background:#a8884c; }.terminal-lights i:nth-child(3) { background:#789175; }
.terminal-output { display:grid; gap:7px; color:rgba(207,214,197,.66); font:8px/1.25 ui-monospace,Consolas,monospace; }
.terminal-output p { display:flex; gap:8px; white-space:nowrap; }
.terminal-output p i { color:rgba(255,172,91,.46); font-style:normal; }
.terminal-output .terminal-success { color:#c9d6b3; }
.terminal-caret { display:inline-block; width:5px; height:9px; margin-top:8px; background:#ffad50; }
.system-log { position:absolute; z-index:3; left:10%; bottom:11%; width:min(57%,245px); min-height:34px; padding:7px 10px; border-left:1px solid rgba(255,173,81,.55); background:linear-gradient(90deg,rgba(255,142,54,.08),transparent); color:rgba(239,231,218,.54); font:7px/1.3 ui-monospace,Consolas,monospace; }
.log-label { display:block; margin-bottom:5px; color:rgba(255,174,91,.64); font:700 6px/1 var(--display); letter-spacing:.15em; }
.log-message { display:block; min-height:1em; }
.lab-coordinate { position:absolute; z-index:2; right:12px; color:rgba(239,231,218,.3); font:6px/1 var(--display); letter-spacing:.15em; writing-mode:vertical-rl; }
.lab-coordinate--top { top:13%; }.lab-coordinate--bottom { bottom:15%; }
.about-showcase .lab-track--forward span,.about-showcase .lab-track--reverse span,.about-showcase .lab-stream-run,.about-showcase .data-particle,.about-showcase .data-core,.about-showcase .code-fragment,.about-showcase .compile-terminal,.about-showcase .system-log,.about-showcase .lab-grid,.about-showcase .about-lab::after { animation-play-state:paused; }
.about-showcase.is-active .lab-track--forward span { animation:about-track-forward 26s linear infinite; }
.about-showcase.is-active .lab-track--reverse span { animation:about-track-reverse 32s linear infinite; }
.about-showcase.is-active .data-particle { animation:about-particle 7s ease-in-out infinite alternate; }
.about-showcase.is-active .data-particle:nth-of-type(3n) { animation-duration:9s; }
.about-showcase.is-active .data-core { animation:about-core 5s ease-in-out infinite; }
.about-showcase.is-active .code-fragment--python { animation:about-float 8s ease-in-out infinite; }
.about-showcase.is-active .code-fragment--react { animation:about-float 10s ease-in-out infinite reverse; }
.about-showcase.is-active .code-fragment--api { animation:about-float 9s ease-in-out infinite; }
.about-showcase.is-active .terminal-output p { animation:about-terminal 9s steps(1,end) infinite; }
.about-showcase.is-active .terminal-output p:nth-child(2) { animation-delay:1.5s; }.about-showcase.is-active .terminal-output p:nth-child(3) { animation-delay:3s; }.about-showcase.is-active .terminal-output p:nth-child(4) { animation-delay:4.5s; }.about-showcase.is-active .terminal-output p:nth-child(5) { animation-delay:6s; }.about-showcase.is-active .terminal-output p:nth-child(6) { animation-delay:7.5s; }
.about-showcase.is-active .log-message--one { animation:about-log 9s steps(1,end) infinite; }
.about-showcase.is-active .log-message--two { animation:about-log 9s steps(1,end) infinite 3s; }.about-showcase.is-active .log-message--three { animation:about-log 9s steps(1,end) infinite 6s; }
.about-showcase.is-active .lab-grid { animation:about-grid 16s ease-in-out infinite alternate; }
.lab-stream-run { display:block; width:100%; }
.about-showcase.is-active .lab-stream-run { animation:about-stream 8s linear infinite; }.about-showcase.is-active .lab-stream--b .lab-stream-run { animation-duration:11s; animation-direction:reverse; }
.about-showcase.is-active .lab-rail span { animation:about-rail 5s ease-in-out infinite alternate; }.about-showcase.is-active .lab-rail span:nth-child(even) { animation-delay:-2.5s; animation-direction:alternate-reverse; }
.about-showcase.is-active .about-lab::after { animation:about-light 11s ease-in-out infinite; }
@keyframes about-track-forward { to { transform:translateX(-45%); } }
@keyframes about-track-reverse { to { transform:translateX(45%); } }
@keyframes about-particle { 0% { transform:translate(-50%,-50%) scale(.22); opacity:0; } 58% { transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1.08); opacity:.9; } 78%,100% { transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1); opacity:.72; } }
@keyframes about-core { 0%,100% { transform:translate(-50%,-50%) scale(.94); filter:brightness(.85); } 50% { transform:translate(-50%,-50%) scale(1.06); filter:brightness(1.18); } }
@keyframes about-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes about-terminal { 0%,100% { color:rgba(207,214,197,.66); } 40%,65% { color:#fff0d5; text-shadow:0 0 9px rgba(255,174,86,.3); } }
@keyframes about-log { 0%,15% { opacity:.85; } 24%,100% { opacity:.12; } }
@keyframes about-grid { to { transform:perspective(550px) rotateY(-10deg) rotateX(2deg) translateY(-5px); opacity:.55; } }
@keyframes about-stream { to { transform:translateY(-50%); } }
@keyframes about-rail { to { translate:0 9px; color:rgba(255,205,143,.66); } }
@keyframes about-light { 0%,10% { transform:translateX(-110%); opacity:0; } 35% { opacity:.7; } 75%,100% { transform:translateX(110%); opacity:0; } }
@media (max-width:1100px) {
 .about-showcase { grid-template-columns:minmax(0,1fr) minmax(330px,.9fr); gap:clamp(24px,4vw,50px); }
 .manifesto { font-size:clamp(25px,3.1vw,39px); }
 .about-lab { min-height:590px; }
 .data-explosion { width:min(83%,330px); }
 .code-fragment { padding:9px 10px; }
}
@media (max-width:760px) {
 .about-showcase { grid-template-columns:minmax(0,1fr); gap:30px; min-height:auto; }
 .about-copy { max-width:680px; padding:0; }
 .manifesto { font-size:clamp(25px,6.5vw,38px); line-height:1.16; }
 .about-signoff { font-size:21px; }
 .about-lab { min-height:clamp(490px,140vw,620px); }
 .data-explosion { left:50%; top:36%; width:min(75%,315px); }
 .data-particle:nth-of-type(n+10) { display:none; }
 .lab-stream--b { display:none; }
 .code-fragment--react { right:4%; top:52%; }.code-fragment--python { left:7%; top:20%; }.code-fragment--api { left:8%; bottom:20%; }
 .compile-terminal { right:5%; bottom:10%; width:min(80%,300px); }
 .system-log { left:7%; bottom:9%; width:43%; }
 .lab-rail { left:7px; }.lab-coordinate { right:6px; }
}
@media (max-width:390px) {
 .about-lab { min-height:480px; }
 .data-explosion { width:250px; top:34%; }
 .data-particle { font-size:7px; }
 .compile-terminal { min-height:176px; padding-inline:10px; width:78%; }
 .terminal-bar { margin-inline:-10px; padding-inline:9px; }
 .terminal-output { gap:6px; font-size:7px; }
 .system-log { bottom:6%; width:46%; font-size:6px; }
 .code-fragment--api { bottom:17%; }
}
@media (prefers-reduced-motion:reduce) {
 .about-showcase *, .about-showcase *::before, .about-showcase *::after { animation:none !important; transition:none !important; }
 .about-showcase .data-particle { opacity:.72; }
 .about-showcase .about-lab::after { display:none; }
}


/* About motion pass: directional sentence rails and a more dimensional education plate. */
.lab-track--forward,.lab-track--reverse { display:flex; width:max-content; }
.lab-track--forward .lab-track-run,.lab-track--reverse .lab-track-run { flex:0 0 auto; padding-right:2.5em; }
.about-showcase.is-active .lab-track--forward .lab-track-run { animation:about-track-forward 22s linear infinite; }
.about-showcase.is-active .lab-track--reverse .lab-track-run { animation:about-track-reverse 29s linear infinite; }
.lab-track--down,.lab-track--up { top:12%; bottom:12%; left:5%; right:auto; width:13px; height:76%; display:flex; flex-direction:column; white-space:normal; writing-mode:vertical-rl; text-orientation:mixed; font-size:7px; line-height:1.2; letter-spacing:.17em; color:rgba(255,190,120,.42); }
.lab-track--up { left:auto; right:5%; top:15%; color:rgba(239,231,218,.32); }
.lab-track--down .lab-track-run,.lab-track--up .lab-track-run { display:block; flex:0 0 auto; padding-bottom:2em; writing-mode:vertical-rl; }
.about-showcase.is-active .lab-track--down .lab-track-run { animation:about-track-down 24s linear infinite; }
.about-showcase.is-active .lab-track--up .lab-track-run { animation:about-track-up 31s linear infinite; }
@keyframes about-track-down { from { transform:translateY(-45%); } to { transform:translateY(0); } }
@keyframes about-track-up { from { transform:translateY(0); } to { transform:translateY(-45%); } }
.terminal-progress { height:2px; margin-top:10px; overflow:hidden; background:rgba(255,178,92,.12); }
.terminal-progress i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#a94723,#ffbd64,#fff1d8); transform:scaleX(0); transform-origin:left center; }
.about-showcase.is-active .terminal-progress i { animation:about-compile 9s cubic-bezier(.2,.7,.15,1) infinite; }
@keyframes about-compile { 0%,4% { transform:scaleX(0); } 86%,93% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
.data-explosion { width:min(88%,450px); background:radial-gradient(circle,rgba(255,151,56,.17),rgba(255,144,54,.035) 46%,transparent 74%); }
.data-explosion::before { inset:12%; border-color:rgba(255,180,102,.2); box-shadow:0 0 48px rgba(255,111,32,.08); }
.data-orbit { border-color:rgba(255,178,92,.27); box-shadow:0 0 22px rgba(255,137,52,.06); }
.data-particle { border-color:rgba(255,182,103,.38); color:rgba(255,229,198,.86); box-shadow:0 0 20px rgba(255,136,57,.2); }
.lab-track--forward,.lab-track--reverse { color:rgba(255,197,131,.46); }
.education-feature { min-height:390px; display:block; padding:clamp(26px,3.8vw,48px); border-color:rgba(255,180,103,.25); background:radial-gradient(ellipse at 89% 47%,rgba(255,138,56,.16),transparent 39%),linear-gradient(135deg,rgba(22,17,13,.98),rgba(7,7,7,.97) 65%); box-shadow:inset 0 1px rgba(255,229,195,.06),0 24px 80px rgba(0,0,0,.3); }
.education-feature::after { content:"CSE"; right:-.02em; bottom:-.36em; color:rgba(239,231,218,.034); font-size:clamp(140px,19vw,265px); }
.education-index { position:relative; z-index:3; display:block; color:rgba(255,198,133,.8); }
.education-copy { position:relative; z-index:2; width:min(76%,480px); margin-top:clamp(36px,5vh,64px); }
.education-place { max-width:15em; font-size:clamp(12px,1vw,15px); letter-spacing:.13em; }
.education-copy h3 { margin-top:18px; font-family:var(--display); font-size:clamp(30px,3.5vw,52px); font-weight:760; line-height:.95; letter-spacing:-.06em; }
.education-copy h3 span { display:block; margin-top:7px; color:var(--bone); font-size:.69em; line-height:1.03; letter-spacing:-.035em; }
.education-location { margin-top:16px; color:rgba(239,231,218,.54); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.education-year { position:relative; z-index:2; max-width:420px; margin-top:clamp(23px,3vh,34px); padding-top:13px; border-top:1px solid rgba(239,231,218,.16); }
.education-year strong { color:#ffe1b8; font:800 clamp(42px,5vw,66px)/.9 var(--display); letter-spacing:-.08em; text-shadow:0 0 26px rgba(255,140,58,.24); }
.education-orbit { position:absolute; z-index:1; right:clamp(-58px,-3vw,-22px); top:47%; width:clamp(190px,23vw,310px); aspect-ratio:1; transform:translateY(-50%); opacity:.78; pointer-events:none; }
.education-orbit::before { content:""; position:absolute; inset:24%; border-radius:50%; background:radial-gradient(circle,rgba(255,177,89,.22),rgba(225,81,32,.075) 35%,transparent 72%); filter:blur(4px); }
.education-orbit-ring { position:absolute; inset:8%; border:1px solid rgba(255,195,133,.18); border-radius:50%; transform:rotateX(68deg) rotateZ(-24deg); box-shadow:0 0 34px rgba(255,132,46,.09); }
.education-orbit-ring--two { inset:17%; transform:rotateX(68deg) rotateZ(48deg); border-color:rgba(255,218,174,.35); }
.education-orbit-ring--three { inset:27%; transform:rotateX(68deg) rotateZ(10deg); border-style:dashed; border-color:rgba(255,156,74,.38); }
.education-orbit-core { position:absolute; left:50%; top:50%; display:grid; place-content:center; width:27%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(255,212,162,.48); border-radius:50%; color:#ffe0b7; background:radial-gradient(circle,#532d19 0%,#140c08 72%); box-shadow:0 0 32px rgba(255,134,52,.23),inset 0 0 24px rgba(255,170,86,.13); text-align:center; font:800 14px/1 var(--display); letter-spacing:.08em; }
.education-orbit-core small { margin-top:5px; color:rgba(255,221,180,.65); font-size:8px; }
.education-orbit-dot { position:absolute; left:16%; top:29%; width:7px; height:7px; border-radius:50%; background:#ffe5bd; box-shadow:0 0 16px 4px rgba(255,174,92,.75); }
.education-trace { position:absolute; z-index:1; right:24px; bottom:22px; display:grid; gap:7px; color:rgba(255,196,129,.42); text-align:right; font:700 7px/1 var(--display); letter-spacing:.18em; }
.education-trace span:nth-child(2) { color:rgba(239,231,218,.32); }
.education-feature.is-active .education-orbit-ring--one { animation:education-orbit-a 24s linear infinite; }
.education-feature.is-active .education-orbit-ring--two { animation:education-orbit-b 31s linear infinite reverse; }
.education-feature.is-active .education-orbit-dot { animation:education-signal 3.8s ease-in-out infinite alternate; }
@keyframes education-orbit-a { to { transform:rotateX(68deg) rotateZ(336deg); } }
@keyframes education-orbit-b { to { transform:rotateX(68deg) rotateZ(408deg); } }
@keyframes education-signal { to { opacity:.38; box-shadow:0 0 24px 8px rgba(255,174,92,.52); } }
.screen[data-detail="project:odin"] .disc-face img { object-position:center; filter:contrast(1.035) saturate(.92); }
@media (max-width:760px) {
 .lab-track--down { left:3%; }.lab-track--up { right:3%; }
 .education-feature { min-height:360px; padding:24px 20px; }
 .education-copy { width:86%; margin-top:44px; }
 .education-copy h3 { font-size:clamp(31px,8vw,42px); }
 .education-orbit { width:210px; right:-78px; top:49%; opacity:.5; }
 .education-trace { right:15px; bottom:14px; font-size:6px; }
}
@media (max-width:390px) {
 .education-feature { min-height:350px; padding:20px 16px; }
 .education-copy { width:92%; }
 .education-orbit { width:180px; right:-78px; opacity:.36; }
 .education-copy h3 { font-size:30px; }
 .education-year strong { font-size:48px; }
 .lab-track--down,.lab-track--up { opacity:.65; }
}
@media (prefers-reduced-motion:reduce) {
 .education-orbit-ring,.education-orbit-dot { animation:none !important; }
}


/* The profile/cinematic plate must stay side-by-side in the embedded portfolio viewport. */
.manifesto-copy:first-child { color:#fff6e9; font-size:1.08em; }
.manifesto-copy:not(:first-child) { font-size:.91em; color:rgba(239,231,218,.82); }
.manifesto .w { opacity:.76; }
@media (min-width:521px) and (max-width:760px) {
 .about-showcase { grid-template-columns:minmax(0,1fr) minmax(225px,.92fr); gap:clamp(12px,2vw,18px); min-height:620px; }
 .about-copy { padding:0; }
 .about-copy > .about-index { margin-bottom:18px; font-size:8px; }
 .manifesto { font-size:clamp(17px,2.9vw,22px); line-height:1.18; }
 .manifesto-copy { margin-bottom:.9em; }
 .about-signoff { margin-top:20px; padding-left:12px; font-size:18px; }
 .about-lab { min-height:500px; }
 .data-explosion { left:50%; top:34%; width:245px; }
 .data-particle { min-width:17px; height:17px; font-size:7px; }
 .code-fragment { max-width:78%; padding:7px; }
 .code-fragment code { font-size:7px; }
 .compile-terminal { width:80%; right:4%; bottom:11%; min-height:172px; padding-inline:8px; }
 .terminal-bar { margin-inline:-8px; padding-inline:7px; font-size:6px; }
 .terminal-output { gap:5px; font-size:6.5px; }
 .system-log { left:6%; bottom:9%; width:45%; font-size:6px; }
 .lab-rail { left:5px; }.lab-track--down { left:2%; }.lab-track--up { right:2%; }
 .about-cols { grid-template-columns:1fr; }
}
@media (max-width:520px) {
 .manifesto .w { opacity:.92; }
 .about-lab { margin-top:4px; }
}


/* Recruiter-focused profile copy: stagger into focus as the profile enters view. */
.about-copy > .about-index,.about-copy > .manifesto,.about-copy > .about-signoff { transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .75s ease; }
.about-showcase:not(.is-active) .about-copy > .about-index { opacity:.82; transform:translate3d(0,10px,0); }
.about-showcase:not(.is-active) .about-copy > .manifesto { opacity:.9; transform:translate3d(0,17px,0); transition-delay:.08s; }
.about-showcase:not(.is-active) .about-copy > .about-signoff { opacity:.84; transform:translate3d(0,24px,0); transition-delay:.16s; }
.about-showcase.is-active .about-copy > .about-index,.about-showcase.is-active .about-copy > .manifesto,.about-showcase.is-active .about-copy > .about-signoff { opacity:1; transform:translate3d(0,0,0); }
.contact-intro p { max-width:56rem; margin-top:clamp(16px,3vh,30px); color:rgba(239,231,218,.72); font:400 clamp(16px,1.45vw,21px)/1.58 var(--display); letter-spacing:0; text-transform:none; }
@media (prefers-reduced-motion:reduce) { .about-copy > .about-index,.about-copy > .manifesto,.about-copy > .about-signoff { transition:none !important; transform:none !important; opacity:1 !important; } }