/* ============================================================
   LUMEN — the default look of the left brain
   A light aurora whose colour is a live design token. The sky
   takes the brand light of whichever project is in view (or
   pointed at), and every accent on the page is derived from that
   one value, --light. One decision, propagated everywhere: the
   same idea the Five Below case study is about.

   Everything is scoped to html:not([data-theme]) so the Paper,
   Tron, 16-Bit, Brick and Win95 themes render exactly as before.
   Base rules in style.css / case2.css are (0,1,0)–(0,3,0); the
   scope prefix lifts every rule here to (0,2,1)+, so Lumen wins
   without !important — responsive rules are restated below.
   ============================================================ */

/* The light tokens are registered so they interpolate: when the
   scene changes, the sky and every derived accent crossfade. */
@property --light { syntax: '<color>'; inherits: true; initial-value: #5B6CFF; }
@property --l1    { syntax: '<color>'; inherits: true; initial-value: #8FE3D6; }
@property --l2    { syntax: '<color>'; inherits: true; initial-value: #B7C0FF; }
@property --l3    { syntax: '<color>'; inherits: true; initial-value: #FFDDA8; }

/* Only Lumen has a sky and a token readout */
.lumen-sky, .lumen-token { display: none; }


/* ── tokens ─────────────────────────────────────────────── */

html:not([data-theme]) {
  --bg:      #F4F5FA;
  --ink:     #0D1126;
  --ink-2:   #4D5469;
  --surface: rgba(255, 255, 255, 0.6);
  --border:  rgba(13, 17, 38, 0.09);
  --edge:    rgba(255, 255, 255, 0.92);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* scene: Lumen (default) */
  --light: #5B6CFF;
  --l1: #8FE3D6;
  --l2: #B7C0FF;
  --l3: #FFDDA8;

  /* every accent is the live light, pulled toward ink until it reads on the ground */
  --accent: #3E4BD6;
  --glow: rgba(91, 108, 255, 0.35);

  transition: --light 1.2s var(--ease), --l1 1.4s var(--ease), --l2 1.4s var(--ease), --l3 1.4s var(--ease);
}
@supports (color: color-mix(in oklab, red, blue)) {
  html:not([data-theme]) {
    --accent: color-mix(in oklab, var(--light) 70%, var(--ink));
    --glow: color-mix(in oklab, var(--light) 38%, transparent);
  }
}

/* scenes — the light of each project, taken from its own work */
html:not([data-theme])[data-light="fb-ds"] { --light: #0066FF; --l1: #8DB9FF; --l2: #CFE0FF; --l3: #FFC2B8; }
html:not([data-theme])[data-light="fb-om"] { --light: #6C5CFF; --l1: #B3A9FF; --l2: #E2DDF7; --l3: #FFD58A; }
html:not([data-theme])[data-light="nexon"] { --light: #F0404D; --l1: #FFA3AA; --l2: #FFE7A3; --l3: #B5BCD6; }

html:not([data-theme]) body {
  background: var(--bg);
  font-family: var(--font-ui);
  font-stretch: 100%;
  color: var(--ink);
}

html:not([data-theme]) ::selection { background: var(--l2); color: var(--ink); }

html:not([data-theme]) :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ── the sky ────────────────────────────────────────────── */

html:not([data-theme]) .lumen-sky {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.lumen-sky .lf {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.lumen-sky .lf1 {
  width: 92vmax; height: 92vmax;
  left: -34vmax; top: -46vmax;
  background: radial-gradient(closest-side, var(--l1) 0%, color-mix(in oklab, var(--l1) 55%, transparent) 42%, transparent 100%);
}
.lumen-sky .lf2 {
  width: 84vmax; height: 84vmax;
  right: -38vmax; top: -18vmax;
  background: radial-gradient(closest-side, var(--l2) 0%, color-mix(in oklab, var(--l2) 50%, transparent) 45%, transparent 100%);
}
.lumen-sky .lf3 {
  width: 78vmax; height: 78vmax;
  left: 8vw; bottom: -52vmax;
  background: radial-gradient(closest-side, var(--l3) 0%, color-mix(in oklab, var(--l3) 45%, transparent) 40%, transparent 100%);
}

/* film grain keeps the gradients from banding and gives the light some material */
.lumen-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ── the token readout: a vertical rail in the left gutter ─
   It names the token and its value, like a spec annotation in the
   margin — and it lives in the gutter so it never covers content. */

html:not([data-theme]) .lumen-token {
  display: inline-flex;
  position: fixed;
  left: 14px;
  bottom: 22px;
  z-index: 80;
  writing-mode: vertical-rl;
  transform: rotate(180deg);        /* reads bottom-to-top, dot at the foot */
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 0.45em 0.9em;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--edge);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--border), 0 10px 30px -14px rgba(13, 17, 38, 0.25);
  pointer-events: none;
  white-space: nowrap;
}
.lumen-token .lt-dot {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--light);
  box-shadow: 0 0 0 3px var(--glow);
}
.lumen-token .lt-k { color: var(--ink-2); }
.lumen-token .lt-v { color: var(--ink); font-weight: 500; }
.lumen-token .lt-n { color: var(--ink-2); padding-inline-start: 0.7em; border-inline-start: 1px solid var(--border); }
.lumen-token .lt-v, .lumen-token .lt-n { transition: opacity 0.3s var(--ease); }
.lumen-token.is-swapping .lt-v, .lumen-token.is-swapping .lt-n { opacity: 0; }

/* the gutter must be wider than the rail */
@media (max-width: 960px) {
  html:not([data-theme]) .lumen-token { display: none; }
}


/* ── shared type roles ──────────────────────────────────── */

html:not([data-theme]) .hero-eyebrow,
html:not([data-theme]) .section-title,
html:not([data-theme]) .brands-eyebrow,
html:not([data-theme]) .work-tag,
html:not([data-theme]) .skill-label,
html:not([data-theme]) .scroll-hint,
html:not([data-theme]) .cs2-eyebrow,
html:not([data-theme]) .cs2-meta .k,
html:not([data-theme]) .cs2-toc,
html:not([data-theme]) .cs2-next a span {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
}


/* ── nav: a floating glass rail ─────────────────────────── */

html:not([data-theme]) .nav {
  inset: 14px 0 auto 0;
  width: min(calc(100% - 2 * var(--pad-x)), 1180px);
  margin: 0 auto;
  padding: 0.85rem 1.1rem 0.85rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
html:not([data-theme]) .nav.scrolled {
  background: rgba(244, 245, 250, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-color: var(--edge);
  box-shadow: 0 0 0 1px var(--border), 0 16px 40px -22px rgba(13, 17, 38, 0.28);
}
html:not([data-theme]) .nav.hidden { transform: translateY(calc(-100% - 20px)); }
html:not([data-theme]) .nav.hidden:focus-within { transform: none; }

html:not([data-theme]) .nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: 0;
  text-transform: none;
}
/* the mark is the current light */
html:not([data-theme]) .nav-logo::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--light);
  box-shadow: 0 0 0 3px var(--glow);
}

html:not([data-theme]) .nav-links { gap: 0.35rem; }
html:not([data-theme]) .nav-links a {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-2);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
html:not([data-theme]) .nav-links a::after { display: none; }
html:not([data-theme]) .nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
html:not([data-theme]) .nav-links a.active { color: var(--ink); background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px var(--border); }


/* ── hero ───────────────────────────────────────────────── */

html:not([data-theme]) .hero { padding-top: calc(var(--pad-y) + 4.5rem); }

html:not([data-theme]) .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.75rem;
  color: var(--ink-2);
  margin-bottom: 2rem;
}
html:not([data-theme]) .hero-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
}

/* The thesis, set wide and light: Archivo at its widest, weight 200 */
html:not([data-theme]) .hero-headline {
  font-size: clamp(2.5rem, 5.4vw, 5.6rem);
  font-weight: 200;
  font-stretch: 125%;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 2.25rem;
}
html:not([data-theme]) .hero-headline em {
  font-style: italic;
  font-weight: 300;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  color: var(--accent);
}

html:not([data-theme]) .hero-sub {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 400;
  color: var(--ink-2);
}

/* the portrait sits in the light */
html:not([data-theme]) .pixel-frame {
  border: 2px solid #FFFFFF;
  box-shadow:
    0 0 0 1px var(--border),
    0 40px 90px -30px var(--glow);
}
html:not([data-theme]) a.pixel-frame:hover {
  box-shadow:
    0 0 0 1px var(--border),
    0 40px 110px -18px var(--glow);
}
html:not([data-theme]) .ring-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  fill: var(--ink-2);
}
html:not([data-theme]) .avatar-scene:hover .ring-text { fill: var(--accent); }
html:not([data-theme]) .avatar-note { color: var(--accent); }

html:not([data-theme]) .scroll-hint { font-size: 0.6875rem; opacity: 0.8; }
html:not([data-theme]) .scroll-line { background: var(--accent); }


/* ── section headers: a label, not a number ─────────────── */

html:not([data-theme]) .section-header {
  border-bottom: none;
  padding-bottom: 0;
  align-items: center;
  gap: 0.7rem;
}
html:not([data-theme]) .section-num { display: none; }
html:not([data-theme]) .section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.75rem;
  color: var(--ink);
}
html:not([data-theme]) .section-title::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--light);
  box-shadow: 0 0 0 3px var(--glow);
}


/* ── glass surfaces ─────────────────────────────────────── */

html:not([data-theme]) .brands,
html:not([data-theme]) .work-card,
html:not([data-theme]) .about-bio,
html:not([data-theme]) .cs2-hero-card,
html:not([data-theme]) .cs2-shot .frame,
html:not([data-theme]) .cs2-fig .frame,
html:not([data-theme]) .cs2-insights li {
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow:
    0 0 0 1px var(--border),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 60px -34px rgba(13, 17, 38, 0.28);
}


/* ── worked with ────────────────────────────────────────── */

html:not([data-theme]) .brands {
  width: min(calc(100% - 2 * var(--pad-x)), calc(var(--max-w) - 2 * var(--pad-x)));
  border-radius: 28px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  margin: clamp(1rem, 3vh, 2rem) auto 0;
}
html:not([data-theme]) .brands-eyebrow { font-size: 0.6875rem; color: var(--ink-2); }
html:not([data-theme]) .brand-logo { filter: grayscale(1) contrast(1.1) brightness(0.3); opacity: 0.6; }
html:not([data-theme]) .brand-logo:hover { filter: none; opacity: 1; }


/* ── selected work ──────────────────────────────────────── */

html:not([data-theme]) .work { border-top: none; }

html:not([data-theme]) .work-grid {
  gap: clamp(1rem, 1.8vw, 1.5rem);
  background: none;
}

html:not([data-theme]) .work-card {
  border-radius: 28px;
  padding: 10px;
  transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* `translate`, not `transform`: GSAP owns the card's transform on the homepage */
html:not([data-theme]) .work-card:hover,
html:not([data-theme]) .work-card:focus-visible {
  translate: 0 -4px;
  box-shadow:
    0 0 0 1px var(--border),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 40px 80px -36px var(--glow);
}

html:not([data-theme]) .work-card-img { border-radius: 20px; }

html:not([data-theme]) .work-card-meta {
  border-top: none;
  padding: 1.35rem 1rem 1.1rem;
}
html:not([data-theme]) .work-tag { font-size: 0.6875rem; color: var(--ink-2); }
html:not([data-theme]) .work-title {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 350;
  font-stretch: 118%;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
html:not([data-theme]) .work-role { font-size: 0.875rem; }


/* ── about ──────────────────────────────────────────────── */

html:not([data-theme]) .about { border-top: none; }
html:not([data-theme]) .about-body { gap: clamp(2.5rem, 6vw, 7rem); }

html:not([data-theme]) .about-pull {
  font-size: clamp(1.8rem, 3.3vw, 3rem);
  font-weight: 250;
  font-style: normal;
  font-stretch: 125%;
  line-height: 1.12;
  letter-spacing: -0.035em;
  top: 7rem;
}

html:not([data-theme]) .about-bio {
  border-radius: 28px;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
}
html:not([data-theme]) .about-bio-lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.7; }
html:not([data-theme]) .about-bio p:not(.about-bio-lead) { font-weight: 400; color: var(--ink-2); }
html:not([data-theme]) .about-skills { border-top-color: var(--border); }
html:not([data-theme]) .skill-row { grid-template-columns: 104px 1fr; }
html:not([data-theme]) .skill-label { font-size: 0.6875rem; color: var(--accent); }


/* ── contact: the page ends at night ────────────────────── */

html:not([data-theme]) .contact {
  position: relative;
  overflow: hidden;
  width: min(calc(100% - 2 * var(--pad-x) + 2rem), calc(var(--max-w) + 2rem));
  margin: clamp(2rem, 6vh, 4rem) auto 0;
  border-radius: 40px 40px 0 0;
  background: #0B0E1F;
  color: #EEF0FA;
  isolation: isolate;
}
/* the aurora on the horizon, in the current light */
html:not([data-theme]) .contact::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 75%;
  z-index: -1;
  background:
    radial-gradient(55% 85% at 22% 0%, color-mix(in oklab, var(--l1) 75%, transparent), transparent 72%),
    radial-gradient(50% 75% at 78% 0%, color-mix(in oklab, var(--light) 70%, transparent), transparent 72%),
    radial-gradient(40% 60% at 50% 0%, color-mix(in oklab, var(--l2) 60%, transparent), transparent 70%);
  opacity: 0.5;
}
html:not([data-theme]) .contact-headline {
  font-size: clamp(2.6rem, 6.6vw, 6.6rem);
  font-weight: 200;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #F4F5FA;
}
html:not([data-theme]) .contact-headline em {
  font-weight: 300;
  font-stretch: 112%;
  color: color-mix(in oklab, var(--light) 45%, #FFFFFF);
}
html:not([data-theme]) .contact-email {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1rem, 1.9vw, 1.6rem);
  color: #F4F5FA;
  border-bottom-color: rgba(244, 245, 250, 0.3);
}
html:not([data-theme]) .contact-email:hover { color: color-mix(in oklab, var(--light) 45%, #FFFFFF); border-color: currentColor; }
html:not([data-theme]) .contact-links a { font-family: var(--font-mono); color: rgba(244, 245, 250, 0.62); }
html:not([data-theme]) .contact-links a:hover { color: #FFFFFF; }

html:not([data-theme]) .footer {
  width: min(calc(100% - 2 * var(--pad-x) + 2rem), calc(var(--max-w) + 2rem));
  margin: 0 auto;
  background: #0B0E1F;
  font-family: var(--font-mono);
  color: rgba(244, 245, 250, 0.5);
}


/* ── case studies ───────────────────────────────────────── */

html:not([data-theme]) .cs2-hero { padding-top: clamp(7rem, 15vh, 9.5rem); }
html:not([data-theme]) .cs2-hero-card { border-radius: 30px; }
html:not([data-theme]) .cs2-hero-card img { border-radius: 18px; }

html:not([data-theme]) .cs2-title {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  font-weight: 250;
  font-stretch: 125%;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
html:not([data-theme]) .cs2-sub { font-weight: 400; color: var(--ink-2); }

html:not([data-theme]) .cs2-meta { border-bottom-color: var(--border); }
html:not([data-theme]) .cs2-meta .k { font-size: 0.6875rem; color: var(--accent); }
html:not([data-theme]) .cs2-meta .v { font-weight: 400; }

html:not([data-theme]) .cs2-toc { font-size: 0.75rem; }
html:not([data-theme]) .cs2-toc a:hover { color: var(--ink); border-left-color: var(--accent); }

html:not([data-theme]) .cs2-eyebrow { font-size: 0.6875rem; color: var(--accent); }
html:not([data-theme]) .cs2-h {
  font-weight: 350;
  font-stretch: 118%;
  letter-spacing: -0.025em;
}
html:not([data-theme]) .cs2-h--accent {
  font-weight: 250;
  font-stretch: 112%;
  color: var(--accent);
}
html:not([data-theme]) .cs2-p { font-weight: 400; color: #3E4459; }
html:not([data-theme]) .cs2-col { border-left-color: var(--l2); }
html:not([data-theme]) .cs2-col p { font-weight: 400; }
html:not([data-theme]) .cs2-block-h { font-weight: 600; font-stretch: 110%; }

html:not([data-theme]) .cs2-shot .frame,
html:not([data-theme]) .cs2-fig .frame { border-radius: 22px; }
html:not([data-theme]) .cs2-shot img,
html:not([data-theme]) .cs2-fig img { border-radius: 12px; }
html:not([data-theme]) .cs2-shot .tag {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
}
html:not([data-theme]) .cs2-shot .tag--before { background: #FFFFFF; color: var(--ink-2); box-shadow: 0 0 0 1px var(--border); }
html:not([data-theme]) .cs2-shot figcaption,
html:not([data-theme]) .cs2-fig figcaption { font-weight: 400; color: var(--ink-2); }

html:not([data-theme]) .cs2-impact-h {
  font-weight: 250;
  font-stretch: 125%;
  letter-spacing: -0.035em;
}
html:not([data-theme]) .cs2-impact-h em { font-weight: 300; font-stretch: 112%; }
html:not([data-theme]) .cs2-stat {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--edge);
  box-shadow: 0 0 0 1px var(--border);
}

html:not([data-theme]) .cs2-insights li { border-radius: 22px; }
html:not([data-theme]) .cs2-insights li::before { font-family: var(--font-mono); font-weight: 500; }
html:not([data-theme]) .cs2-insights h4 { font-weight: 600; font-stretch: 108%; }
html:not([data-theme]) .cs2-insights p { font-weight: 400; }

html:not([data-theme]) .cs2-next { border-top-color: var(--border); }
html:not([data-theme]) .cs2-next a { font-weight: 500; font-stretch: 110%; }


/* ── theme dial follows the light ───────────────────────── */

html:not([data-theme]) .fab-main { box-shadow: 0 10px 28px -8px var(--glow), 0 0 0 1px rgba(255, 255, 255, 0.4) inset; }


/* ── responsive (restated: the scope outranks style.css's media rules) ── */

@media (max-width: 960px) {
  html:not([data-theme]) .about-pull { position: static; }
}

@media (max-width: 600px) {
  html:not([data-theme]) .nav { padding: 0.7rem 0.8rem 0.7rem 1rem; }
  html:not([data-theme]) .nav-links a { padding: 0.4rem 0.55rem; }
  html:not([data-theme]) .hero-headline { font-size: clamp(2.1rem, 9.6vw, 3.2rem); font-stretch: 112%; }
  html:not([data-theme]) .contact-headline { font-size: clamp(2.1rem, 10vw, 3.4rem); font-stretch: 112%; }
  html:not([data-theme]) .about-pull { font-size: clamp(1.6rem, 7vw, 2.2rem); font-stretch: 112%; }
  html:not([data-theme]) .work-card { border-radius: 22px; padding: 8px; }
  html:not([data-theme]) .work-card-img { border-radius: 16px; }
  html:not([data-theme]) .work-card-meta { padding: 1.1rem 0.8rem 0.9rem; }
  html:not([data-theme]) .contact { border-radius: 28px 28px 0 0; }
  html:not([data-theme]) .cs2-title { font-stretch: 112%; }
  html:not([data-theme]) .nav-logo { font-size: 0.8125rem; font-stretch: 100%; white-space: nowrap; }
  html:not([data-theme]) .skill-row { grid-template-columns: 1fr; gap: 0.3rem; }
  /* stacked, and clear of the theme button that floats over the page end */
  html:not([data-theme]) .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding-bottom: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme]) { transition: none; }
  html:not([data-theme]) .work-card { transition: box-shadow 0.3s; }
  html:not([data-theme]) .work-card:hover,
  html:not([data-theme]) .work-card:focus-visible { translate: none; }
}

@media print {
  html:not([data-theme]) .lumen-sky,
  html:not([data-theme]) .lumen-token { display: none; }
}