/* ==========================================================================
   FuzzLightyear portfolio. Zero dependencies, self-hosted everything.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600; /* variable */
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ---------- Tokens ----------
   Accent system is designed in OKLCH (perceptually uniform, CSS Color 4):
   structural accents share L≈0.75 so no accent reads louder than another
   (gold sits at L=0.80 since yellow collapses to mustard below that). The
   high-chroma rose is reserved for large decorative surfaces, never text.
   Hex fallbacks first; oklch() overrides unlock wide-gamut (P3) displays. */
:root {
  --bg: #050409;
  --bg-deep: #030206;
  --ink: #f5efe6;
  --ink-soft: #cdbdac;
  --ink-body: #c6b7a6;
  --ink-dim: rgba(255, 255, 255, .4);
  --gold: #e7c9a0;
  --accent: #ff8b26;      /* ember  oklch(75% .174  55) */
  --accent-2: #fe4986;    /* rose   oklch(68% .220   5)  decorative only */
  --accent-3: #eeb318;    /* gold   oklch(80% .160  84) */
  --accent-ink: #150a04;  /* dark ink: ≥8:1 on every structural accent */
  --line: rgba(255, 255, 255, .1);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
@supports (color: oklch(75% 0.1 55)) {
  :root {
    --accent: oklch(75% 0.174 55);
    --accent-2: oklch(68% 0.22 5);
    --accent-3: oklch(80% 0.16 84);
  }
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
::selection { background: rgba(255, 139, 38, .3); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(255, 139, 38, .35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 139, 38, .6); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Scrolled out of view: the hero's looping animations pause (js toggles
   the class from an IntersectionObserver) */
.hero.is-offstage .hero__sweep,
.hero.is-offstage .hero__vignette,
.hero.is-offstage .grain {
  animation-play-state: paused;
}

/* Animated film grain (SVG turbulence via data URI, no asset request) */
.grain {
  position: absolute; inset: -20%; z-index: 5; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  animation: grain 1.4s steps(2) infinite;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}
@keyframes grain {
  0% { transform: translate(0, 0); } 10% { transform: translate(-3%, -4%); }
  30% { transform: translate(4%, -2%); } 50% { transform: translate(-2%, 3%); }
  70% { transform: translate(3%, 2%); } 90% { transform: translate(-4%, -1%); }
}
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

/* Shared bits */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: .44em; text-transform: uppercase;
  color: var(--gold);
}
.rule-in {
  display: inline-block; width: 30px; height: 1px; flex: none;
  background: linear-gradient(90deg, #e7956a, transparent);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  text-decoration: none; color: rgba(255, 255, 255, .86);
  background: rgba(10, 7, 16, .5); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 14px 22px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .3s, color .3s, transform .3s;
}
.btn-ghost:hover { border-color: rgba(255, 160, 90, .75); color: #fff; transform: translateY(-2px); }
.btn-solid {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(255, 139, 38, .34);
  transition: transform .3s, box-shadow .3s, background .5s;
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255, 139, 38, .5); }

/* Scroll reveals */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Fixed nav
   ========================================================================== */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(22px, 4.2vw, 58px);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .8s ease, transform .8s var(--ease-out), background .4s, box-shadow .4s;
}
.site-nav.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.site-nav.is-scrolled {
  background: rgba(5, 4, 9, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.site-nav a {
  color: rgba(255, 255, 255, .66); text-decoration: none;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  padding: 8px 2px; transition: color .3s;
}
.site-nav a:hover { color: var(--ink); }
.site-nav__brand { font-weight: 600; color: var(--gold) !important; }
.site-nav__links { display: flex; gap: clamp(18px, 3vw, 36px); }
.site-nav__links a { position: relative; }
.site-nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  height: 1px; width: 0;
  background: var(--gold);
  transition: width .4s cubic-bezier(.2, .8, .2, 1);
}
.site-nav__links a:hover::after,
.site-nav__links a:focus-visible::after { width: 100%; }

/* ==========================================================================
   Hero / loader
   ========================================================================== */
.hero {
  position: relative; height: 100vh; height: 100svh; width: 100%;
  overflow: hidden; cursor: default;
  background: radial-gradient(ellipse at 56% 40%, #0b0813 0%, #060409 55%, var(--bg-deep) 100%);
}
.hero__portrait {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transform: scale(1.1);
  filter: blur(16px) saturate(.32) brightness(.46) contrast(1.05);
  -webkit-mask-image: radial-gradient(circle at 32% 39%, #000 0%, transparent 18%);
  mask-image: radial-gradient(circle at 32% 39%, #000 0%, transparent 18%);
  will-change: transform, filter; user-select: none; pointer-events: none; z-index: 1;
}
/* Portrait and square screens: cover-fit crops this landscape image by
   height, so there is plenty of unused picture beyond the element box.
   Widening the element (still centered) uncovers that real content where
   the framing push would otherwise drag the element's edge on stage. The
   crop itself does not change, so crossing this boundary shows identical
   pixels plus wings. */
@media (max-aspect-ratio: 1/1) {
  .hero__portrait { left: -22.5%; width: 145%; max-width: none; }
}
.hero__glow {
  position: absolute; left: 47%; top: 40%; width: 70vw; height: 70vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 168, 60, .55) 0%, rgba(255, 96, 40, .28) 28%, rgba(120, 40, 160, .14) 52%, transparent 70%);
  filter: blur(40px); mix-blend-mode: screen; opacity: 0;
  pointer-events: none; will-change: opacity, transform; z-index: 2;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__canvas--dabs { z-index: 3; }
.hero__canvas--ambient { z-index: 4; will-change: transform; }
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse 90% 80% at 56% 44%, transparent 38%, rgba(4, 3, 8, .5) 78%, rgba(3, 2, 6, .82) 100%);
}
.hero__edges {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, rgba(3, 2, 6, .78) 0%, rgba(3, 2, 6, .35) 22%, transparent 40%),
              linear-gradient(0deg, rgba(3, 2, 6, .6) 0%, transparent 26%);
}

/* Once the reveal settles: the vignette breathes and a soft band of light
   sweeps across every so often. Both idle offscreen or static until the
   hero root gets is-revealed. */
.hero.is-revealed .hero__vignette {
  animation: vignettePulse 12s ease-in-out infinite;
}
@keyframes vignettePulse {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}
.hero__sweep {
  position: absolute; top: -24%; left: 0; width: 34%; height: 148%;
  pointer-events: none; z-index: 6;
  mix-blend-mode: soft-light; filter: blur(8px);
  transform: translateX(-140%) skewX(-16deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 244, 235, .17) 50%, rgba(255, 255, 255, 0) 100%);
}
.hero.is-revealed .hero__sweep {
  animation: heroSweep 16s ease-in-out infinite 2.5s;
}
@keyframes heroSweep {
  0% { transform: translateX(-140%) skewX(-16deg); }
  100% { transform: translateX(340%) skewX(-16deg); }
}

.hero__text {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-left: clamp(34px, 8vw, 170px); padding-right: 4vw;
  pointer-events: none; will-change: transform;
}
.hero__eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-weight: 500; font-size: clamp(10px, .78vw, 13px);
  letter-spacing: .46em; text-transform: uppercase; color: var(--gold);
  opacity: 0; margin: 0 0 28px 4px;
}
.hero__eyebrow .rule-in { width: 26px; }
.hero__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(52px, 9.2vw, 184px); line-height: .9;
  color: var(--ink); opacity: 0; letter-spacing: .06em;
  text-shadow: 0 0 60px rgba(255, 150, 70, .18);
}
.hero__rule {
  width: clamp(90px, 12vw, 168px); height: 1px; margin: 34px 0 30px 5px;
  background: linear-gradient(90deg, rgba(255, 180, 110, .85), rgba(255, 120, 90, .2) 70%, transparent);
  transform: scaleX(0); transform-origin: left center; opacity: 0;
}
.hero__tagline {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 2.05vw, 31px); line-height: 1.42;
  margin-left: 5px; max-width: 30ch; color: var(--ink-soft); opacity: 0;
}

/* Loader overlay */
.loader {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(22px, 4.2vw, 58px);
  transition: opacity .7s ease;
}
.loader.is-done { opacity: 0; }
.loader__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.loader__kicker {
  font-size: 10.5px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(231, 201, 160, .6); font-weight: 500;
}
.loader__status {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.loader__pulse {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: pulse 1.5s ease-in-out infinite;
}
.loader__bottom { display: flex; flex-direction: column; gap: 16px; }
.loader__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.loader__pct {
  font-family: var(--serif); font-weight: 300; line-height: .8; color: #fff;
  display: flex; align-items: baseline; gap: 6px;
  font-size: clamp(56px, 11vw, 150px); letter-spacing: -.02em;
}
.loader__pct-sign { font-size: clamp(16px, 2.4vw, 30px); color: rgba(255, 255, 255, .5); }
.loader__note {
  text-align: right; font-size: 10px; letter-spacing: .26em;
  color: rgba(255, 255, 255, .38); line-height: 1.9; text-transform: uppercase; max-width: 260px;
}
.loader__note-dim { color: rgba(255, 255, 255, .24); }
.loader__bar {
  position: relative; height: 1.5px; width: 100%;
  background: rgba(255, 255, 255, .1); overflow: hidden; border-radius: 2px;
}
.loader__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent) 55%, var(--accent-3));
  box-shadow: 0 0 16px rgba(255, 139, 38, .7); border-radius: 2px;
}
.loader__bar-spark {
  position: absolute; top: 0; bottom: 0; width: 46px; left: 0%;
  transform: translateX(-46px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85));
  filter: blur(.4px);
}

/* Replay + scroll cue */
.hero__replay {
  position: absolute; right: clamp(22px, 4.2vw, 58px); bottom: clamp(22px, 4.2vw, 58px); z-index: 9;
  display: flex; align-items: center; gap: 10px;
  background: rgba(8, 5, 12, .4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .82);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  opacity: 0; transition: opacity 1s ease .2s, border-color .3s, color .3s;
}
.hero__replay.is-on { opacity: 1; }
.hero__replay:hover { border-color: rgba(255, 160, 90, .8); color: #fff; }
.hero__scroll-cue {
  position: absolute; left: 50%; bottom: clamp(18px, 3.4vw, 44px); z-index: 9;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: rgba(255, 255, 255, .55); text-decoration: none;
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  opacity: 0; transition: opacity 1.2s ease .6s, color .3s;
}
.hero__scroll-cue.is-on { opacity: 1; }
.hero__scroll-cue:hover { color: var(--ink); }
.hero__scroll-line {
  width: 1px; height: 34px; overflow: hidden; position: relative;
  background: rgba(255, 255, 255, .14);
}
.hero__scroll-line::after {
  content: ''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: scrollDrip 2s ease-in-out infinite;
}
@keyframes scrollDrip { 0% { top: -50%; } 70%, 100% { top: 105%; } }

/* ==========================================================================
   Workshop (projects)
   ========================================================================== */
.workshop {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 74% 8%, #0c0914 0%, #070510 46%, #040308 100%);
}
.workshop .grain { z-index: 1; }
.workshop__inner {
  position: relative; z-index: 3; max-width: 1320px; margin: 0 auto;
  padding: clamp(64px, 8vw, 130px) clamp(24px, 6vw, 90px) clamp(60px, 7vw, 120px);
}
.workshop__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 76px);
}
.workshop__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(46px, 7.4vw, 116px); line-height: .86; letter-spacing: .02em;
  margin: 20px 0 0; color: #f7f1e8;
  background: linear-gradient(115deg, #f7f1e8 52%, var(--gold) 82%, #dcb476 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(255, 150, 70, .14));
}
.workshop__sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.7vw, 25px); color: #b9a894;
  margin: 20px 0 0; max-width: 36ch; line-height: 1.45;
}
.workshop__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(34px, 5vw, 80px); align-items: start;
}

/* Index list */
.workshop__list { position: relative; }
.workshop__marker {
  position: absolute; left: 0; top: 0; width: 3px; height: 0; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 18px var(--accent);
  transform: translateY(0);
  transition: transform .55s var(--ease-out), height .55s var(--ease-out), background .5s;
  pointer-events: none;
}
.project-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; column-gap: 22px;
  text-decoration: none; color: inherit;
  padding: clamp(20px, 2.2vw, 30px) 6px clamp(20px, 2.2vw, 30px) 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s ease, transform .6s var(--ease-out);
  cursor: pointer;
}
.project-row.is-in { opacity: .55; transform: translateY(0); }
.project-row.is-in:hover { transform: translateX(10px); }
.project-row.is-active.is-in { opacity: 1; }
.project-row__num {
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
  color: rgba(255, 255, 255, .32); transition: color .4s; padding-top: .55em;
}
.project-row.is-active .project-row__num { color: var(--row-accent, var(--accent)); }
.project-row__name {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(29px, 3.5vw, 52px); line-height: 1.02; letter-spacing: .01em; color: #f4eee4;
  transition: color .4s;
}
.project-row__cat {
  display: block; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-dim); margin-top: 9px;
}
.project-row__arrow {
  font-size: 19px; line-height: 1; color: var(--row-accent, var(--accent));
  opacity: 0; transition: opacity .4s; align-self: center;
}
.project-row.is-active .project-row__arrow { opacity: 1; }
.project-row.is-static { display: block; padding: 20px 0; color: var(--gold); }

/* Focus panel */
.workshop__panel-wrap { position: sticky; top: 40px; }
.panel {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 3px;
  background: linear-gradient(180deg, rgba(14, 10, 22, .72), rgba(7, 5, 13, .72));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.panel__visual { position: relative; }
.panel__tile { display: block; width: 100%; height: clamp(190px, 22vw, 260px); }
.panel__visual-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(7, 5, 13, .5) 82%, rgba(7, 5, 13, .92) 100%);
}
.panel__ghost {
  position: absolute; right: 20px; top: 8px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(74px, 10vw, 128px); line-height: 1;
  color: rgba(255, 255, 255, .09); pointer-events: none; letter-spacing: -.02em;
  transition: opacity .8s ease;
}
.panel__lang {
  position: absolute; left: 22px; top: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  background: rgba(6, 4, 11, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 7px 14px;
}
.panel__lang-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--panel-accent, var(--accent));
  box-shadow: 0 0 9px var(--panel-accent, var(--accent));
}
.panel__body { padding: clamp(24px, 2.6vw, 38px); }
.panel__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .44); margin-bottom: 12px;
}
.panel__state { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .6); }
.panel__state-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #3ddc84; box-shadow: 0 0 8px #3ddc84;
  animation: pulse 1.6s ease-in-out infinite;
}
.panel__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 4vw, 58px); line-height: .98; margin: 0 0 16px; color: #f7f1e8;
  overflow-wrap: anywhere;
}
.panel__desc {
  font-family: var(--serif); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55;
  color: var(--ink-body); margin: 0 0 26px; max-width: 44ch;
}
.panel__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.panel__tag {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .68); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 7px 13px;
}
.panel__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line);
}
.panel__stats { display: flex; align-items: center; gap: 22px; font-size: 12px; letter-spacing: .08em; color: rgba(255, 255, 255, .62); }
.panel__stats > span { display: inline-flex; align-items: center; gap: 7px; }
.panel__star { color: var(--accent-3); }
.panel__fork { color: rgba(255, 255, 255, .5); }
.panel .btn-solid { background: var(--panel-accent, var(--accent)); }
/* Unreleased projects: focusable preview rows, no dead links, no fake stats */
.project-row.is-unreleased { cursor: default; }
.project-row.is-unreleased .project-row__arrow {
  font-size: 15px; letter-spacing: .1em; color: rgba(255, 194, 77, .8);
}
.panel__soon {
  display: none; align-items: center; gap: 9px;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 194, 77, .78);
}
.panel__soon::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #ffc24d; box-shadow: 0 0 8px #ffc24d;
  animation: pulse 1.6s ease-in-out infinite;
}
.panel.is-unreleased .panel__soon { display: inline-flex; }
.panel.is-unreleased .panel__stats,
.panel.is-unreleased .btn-solid { display: none; }

.panel__hint {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding: 0 4px;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .3);
}

/* Panel swap animation */
.panel.is-swap { animation: panelSwap .6s var(--ease-out); }
@keyframes panelSwap {
  from { opacity: .35; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   About + footer
   ========================================================================== */
.about {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #040308 0%, #070510 60%, #050409 100%);
  border-top: 1px solid rgba(255, 255, 255, .05);
  /* Below the fold at load: skip layout and paint until scrolled near */
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
/* Particle figure emerging from the dark at the section's right edge.
   Decorative: masked into the background, text stays on its own layer. */
.about__figure {
  position: absolute; top: 0; right: 0; height: 100%; width: auto;
  aspect-ratio: 1 / 1; max-width: 62%;
  object-fit: cover; opacity: .55;
  pointer-events: none; user-select: none;
  -webkit-mask-image: radial-gradient(105% 96% at 70% 46%, #000 32%, transparent 70%);
  mask-image: radial-gradient(105% 96% at 70% 46%, #000 32%, transparent 70%);
}
/* Scrim between the figure and the text column so copy stays crisp
   where the two meet at middle viewport widths */
.about::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 3, 8, .78) 30%, rgba(4, 3, 8, .3) 52%, transparent 70%);
}
.about__inner {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
  padding: clamp(70px, 9vw, 150px) clamp(24px, 6vw, 90px);
}
.about__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(38px, 5.4vw, 84px); line-height: .95;
  color: #f7f1e8; margin: 22px 0 30px;
  background: linear-gradient(115deg, #f7f1e8 58%, var(--gold) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about__body {
  font-family: var(--serif); font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.6; color: var(--ink-body); max-width: 58ch; margin-bottom: 20px;
}
.about__body em { color: var(--gold); }
.about__body--dim { font-size: clamp(15px, 1.25vw, 19px); color: rgba(198, 183, 166, .62); }

.footer {
  border-top: 1px solid rgba(255, 255, 255, .07); background: var(--bg-deep);
  content-visibility: auto;
  contain-intrinsic-size: auto 90px;
}
.footer__inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 28px clamp(24px, 6vw, 90px);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.footer__links { display: flex; gap: 28px; }
.footer a { color: rgba(255, 255, 255, .55); text-decoration: none; padding: 10px 0; transition: color .3s; }
.footer a:hover { color: var(--ink); }

/* ==========================================================================
   color-mix() refinements: accent-aware interaction states derived from
   one token source. Older browsers keep the static fallbacks defined above.
   ========================================================================== */
@supports (background: color-mix(in oklab, red 50%, transparent)) {
  ::selection { background: color-mix(in oklab, var(--accent) 32%, transparent); }
  :focus-visible { outline-color: color-mix(in oklab, var(--accent) 80%, white); }
  .btn-ghost:hover,
  .hero__replay:hover { border-color: color-mix(in oklab, var(--accent) 65%, transparent); }
  .btn-solid:hover { background: color-mix(in oklab, var(--accent) 88%, white); }
  .panel .btn-solid { background: var(--panel-accent, var(--accent)); }
  .panel .btn-solid:hover { background: color-mix(in oklab, var(--panel-accent, var(--accent)) 88%, white); }
  .panel__tag { border-color: color-mix(in oklab, var(--panel-accent, var(--accent)) 30%, rgba(255, 255, 255, .08)); }
  .project-row.is-in:hover .project-row__name,
  .project-row.is-active .project-row__name {
    color: color-mix(in oklab, #f4eee4 76%, var(--row-accent, var(--accent)));
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 940px) {
  .workshop__grid { grid-template-columns: 1fr; }
  .workshop__panel-wrap { position: static; }
  .panel__hint span:first-child { visibility: hidden; }
}
@media (max-width: 760px) {
  /* The figure would sit behind the text column, keep it a faint ghost */
  .about__figure { opacity: .22; max-width: 100%; }
}

@media (max-width: 560px) {
  .site-nav__links { gap: 16px; }
  /* Portrait sits behind the title on narrow screens, deepen the scrim */
  .hero__edges {
    background: linear-gradient(90deg, rgba(3, 2, 6, .82) 0%, rgba(3, 2, 6, .45) 40%, transparent 68%),
                linear-gradient(0deg, rgba(3, 2, 6, .7) 0%, transparent 34%),
                radial-gradient(ellipse 120% 44% at 30% 52%, rgba(3, 2, 6, .5) 0%, transparent 62%);
  }
  .loader__note { display: none; }
  .hero__scroll-cue { display: none; }
  .project-row { padding-left: 20px; column-gap: 14px; }
}

/* ==========================================================================
   Reduced motion: skip the show, keep the content
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .grain { animation: none; }
  .reveal { opacity: 1; transform: none; }
}