/* ==========================================================================
   Concept 4 — "Role morph"
   Rebuilt from the Claude Design handoff. Tokens, geometry and motion timings
   follow that spec: pure black, 12-column hairline grid, Archivo + JetBrains
   Mono, one warm accent, zero radius, zero shadow.
   ========================================================================== */

:root {
  --black: #000000;
  --well: #0a0a0a;
  --white: #ffffff;
  --accent: oklch(0.78 0.17 48);      /* ≈ #FF8A3D */

  --t-80: rgba(255,255,255,0.8);
  --t-60: rgba(255,255,255,0.6);
  --t-55: rgba(255,255,255,0.55);
  --t-50: rgba(255,255,255,0.5);
  --t-45: rgba(255,255,255,0.45);
  --t-35: rgba(255,255,255,0.35);

  --hair: rgba(255,255,255,0.14);
  --frame: rgba(255,255,255,0.12);
  --row: rgba(255,255,255,0.1);
  --grid: rgba(255,255,255,0.07);

  --pad: 28px;
  --hd: 96px;
  --hf: 88px;
  --ease: cubic-bezier(.33, 1, .68, 1);

  --f: "Archivo", sans-serif;
  --m: "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--f);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #000; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--black);
}

.grid-overlay {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px calc(100% / 12));
}
.rule { position: absolute; left: 0; right: 0; height: 1px; background: var(--frame); z-index: 7; }
.rule-top { top: var(--hd); }
.rule-bottom { bottom: var(--hf); }

/* ── header ───────────────────────────────────────────────── */

.hd {
  position: absolute; top: 0; left: 0; right: 0; height: var(--hd);
  z-index: 8;
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: center;
  padding: 0 var(--pad);
}

.brand { grid-column: 1 / span 5; display: flex; align-items: center; gap: 14px; }

.logo { display: grid; grid-template-columns: repeat(3, 9px); gap: 3px; }
.logo i { width: 9px; height: 9px; background: var(--white); display: block; }
.logo i:nth-child(4) { background: var(--accent); }   /* mid-left */
.logo i:nth-child(5) { background: var(--black); }    /* centre */
.logo i:nth-child(8) { background: var(--black); }    /* bottom-middle */

.wordmark {
  display: block;
  font-weight: 800; font-size: 15px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--white);
}
.subline {
  display: block; margin-top: 4px;
  font-family: var(--m); font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--t-45);
}

.nav { grid-column: 8 / span 5; justify-self: end; display: flex; gap: 34px; }
.nav a {
  font-family: var(--m); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--white);
  transition: color 200ms var(--ease);
}
.nav a:hover { color: var(--accent); }

/* ── giant role band ──────────────────────────────────────── */

.band {
  position: absolute; top: 41%; left: 0; right: 0;
  transform: translateY(-50%);
  z-index: 2; pointer-events: none;
}

.band-marquee { overflow: hidden; }
.band-row {
  display: flex; width: max-content; gap: 5vw;
  animation: drift-l 46s linear infinite;
  will-change: transform;
}
.rl {
  font-weight: 900;
  font-size: clamp(72px, 14.5vw, 260px);
  letter-spacing: -0.045em;
  line-height: 0.86;
  text-transform: uppercase;
  white-space: nowrap;
}
.rl.solid  { color: var(--white); }
.rl.accent { color: var(--accent); }
.rl.out-a  { color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,0.55); }
.rl.out-b  { color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,0.2); }

@keyframes drift-l { to { transform: translateX(-50%); } }
@keyframes drift-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.ticker {
  margin-top: 10px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 7px 0;
  overflow: hidden;
}
.ticker-row {
  display: flex; width: max-content;
  animation: drift-r 64s linear infinite;
  will-change: transform;
}
.ticker-row span {
  font-family: var(--m); font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--t-50); white-space: nowrap;
}

/* ── portrait morph stack ─────────────────────────────────── */

.stage {
  position: absolute; top: var(--hd); bottom: var(--hf); left: 0; right: 0;
  z-index: 4; pointer-events: none;
}

.stack {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-46%);            /* deliberate asymmetry */
  width: min(38vw, 520px); height: 100%;
}

.layer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--well);
  border: 1px solid var(--frame);
  opacity: 0;
  transform: scale(1.05) translateY(18px);
  filter: blur(16px) grayscale(1);
  transition: opacity 1600ms var(--ease), transform 2200ms var(--ease), filter 1600ms var(--ease);
}
.layer.is-live { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) grayscale(0.15); }

.ph {
  font-family: var(--m); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--t-35); text-align: center;
  line-height: 2; padding: 0 20px;
}
.ph b { color: var(--t-60); font-weight: 500; }

.fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to top, #000 6%, transparent);
  pointer-events: none;
}

/* ── index of roles ───────────────────────────────────────── */

.index { position: absolute; left: var(--pad); bottom: 132px; z-index: 9; }
.index-k {
  font-family: var(--m); font-size: 9.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--t-35); margin-bottom: 14px;
}
.ix {
  display: grid; grid-template-columns: 34px auto; gap: 10px;
  align-items: baseline; padding: 7px 0;
  border-top: 1px solid var(--row);
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%; text-align: left; cursor: pointer; color: inherit;
  font-family: var(--f);
  opacity: 0.32;
  transition: opacity 700ms var(--ease);
}
.index-rows .ix:last-child { border-bottom: 1px solid var(--row); }
.ix:hover, .ix.is-live { opacity: 1; }
.ix-n { font-family: var(--m); font-size: 10px; color: var(--accent); }
.ix-l { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; }

/* ── now block ────────────────────────────────────────────── */

.now {
  position: absolute; right: var(--pad); top: 58%;
  width: min(22vw, 260px); text-align: right; z-index: 9;
}
.now-k { font-family: var(--m); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-35); }
.now-p { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--t-80); }
.now-s {
  margin-top: 14px; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  font-family: var(--m); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--t-55);
}
.dot { width: 6px; height: 6px; background: var(--accent); animation: blink 1.6s steps(1, end) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.15; } }

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

.hf {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--hf);
  z-index: 9;
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: center;
  padding: 0 var(--pad);
  font-family: var(--m); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--t-50);
}
.hf-a { grid-column: 1 / span 3; }
.hf-b { grid-column: 5 / span 4; color: var(--white); }
.hf-c { grid-column: 10 / span 3; justify-self: end; display: flex; align-items: center; gap: 12px; }
.cnt { color: var(--white); }
.arw {
  background: none; border: 0; cursor: pointer; color: var(--t-50);
  font-family: var(--m); font-size: 13px; line-height: 1; padding: 4px;
  transition: color 200ms var(--ease);
}
.arw:hover { color: var(--white); }

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

.work { padding: 120px var(--pad) 40px; border-top: 1px solid var(--hair); }

.work-hd {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  align-items: end; margin-bottom: 64px;
}
.work-hd h2 {
  grid-column: 1 / span 7;
  font-weight: 900; font-size: clamp(44px, 7vw, 120px);
  letter-spacing: -0.04em; line-height: 0.88; text-transform: uppercase;
}
.work-hd p {
  grid-column: 9 / span 4;
  font-family: var(--m); font-size: 11.5px; line-height: 1.7;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-55);
}

.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.wk { display: block; }
.wk-1 { grid-column: 1 / span 7; }
.wk-2 { grid-column: 9 / span 4; align-self: end; }
.wk-3 { grid-column: 3 / span 4; }
.wk-4 { grid-column: 8 / span 5; }

.wk .well { display: block; background: var(--well); }
.wk-1 .well { height: min(52vw, 600px); }
.wk-2 .well { height: min(34vw, 400px); }
.wk-3 .well { height: min(30vw, 360px); }
.wk-4 .well { height: min(38vw, 460px); }

.cap {
  display: flex; justify-content: space-between; padding-top: 14px;
  font-family: var(--m); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.cap b { font-weight: 400; color: var(--white); }
.cap em { font-style: normal; color: var(--t-60); }
.wk.pending { opacity: 0.4; }
a.wk .well { transition: transform 600ms var(--ease); transform-origin: center; }
a.wk:hover .well { transform: scale(1.012); }

/* ── profile ──────────────────────────────────────────────── */

.about { padding: 140px var(--pad); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.ab-k {
  grid-column: 1 / span 2;
  font-family: var(--m); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--t-35);
}
.ab-p {
  grid-column: 3 / span 7;
  font-weight: 500; font-size: clamp(24px, 3.2vw, 46px);
  line-height: 1.18; letter-spacing: -0.025em; text-wrap: pretty;
}
.ab-l, .ab-r {
  margin-top: 56px;
  font-family: var(--m); font-size: 11.5px; line-height: 2;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-60);
}
.ab-l { grid-column: 3 / span 3; }
.ab-r { grid-column: 7 / span 3; }

/* ── contact ──────────────────────────────────────────────── */

.contact { border-top: 1px solid var(--hair); padding: 100px var(--pad) 40px; }
.big {
  display: block;
  font-weight: 900; font-size: clamp(40px, 10.5vw, 190px);
  letter-spacing: -0.05em; line-height: 0.86; text-transform: uppercase;
  transition: color 250ms var(--ease);
}
.big:hover { color: var(--accent); }

.cf {
  margin-top: 80px; border-top: 1px solid var(--hair); padding-top: 22px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  font-family: var(--m); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--t-50);
}
.cf-a { grid-column: 1 / span 3; }
.cf-b { grid-column: 4 / span 3; display: flex; gap: 16px; }
.cf-b a { transition: color 200ms var(--ease); }
.cf-b a:hover { color: var(--accent); }
.cf-c { grid-column: 10 / span 3; justify-self: end; }

/* ── responsive: desktop-first, stack under ~900px ────────── */

@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; padding-bottom: 40px; }
  .grid-overlay, .rule { display: none; }
  .hd { position: static; height: auto; padding: 20px var(--pad); }
  .brand, .nav { grid-column: 1 / span 12; justify-self: start; }
  .nav { margin-top: 14px; gap: 20px; }
  .band { position: static; transform: none; margin: 24px 0; }
  .stage { position: static; }
  .stack { position: static; transform: none; width: 100%; height: min(80vw, 460px); margin: 0 auto; }
  .index, .now { position: static; width: auto; text-align: left; margin: 28px var(--pad) 0; }
  .now-s { justify-content: flex-start; }
  .hf { position: static; height: auto; padding: 24px var(--pad) 0; gap: 12px; }
  .hf-a, .hf-b, .hf-c { grid-column: 1 / span 12; justify-self: start; }
  .work-hd h2, .work-hd p { grid-column: 1 / span 12; }
  .wk-1, .wk-2, .wk-3, .wk-4 { grid-column: 1 / span 12; }
  .ab-k, .ab-p, .ab-l, .ab-r { grid-column: 1 / span 12; }
  .ab-l, .ab-r { margin-top: 24px; }
  .cf-a, .cf-b, .cf-c { grid-column: 1 / span 12; justify-self: start; }
}

/* ── reduced motion: marquees stop, roles still cross-fade ── */

@media (prefers-reduced-motion: reduce) {
  .band-row, .ticker-row { animation: none; }
  .dot { animation: none; opacity: 1; }
  .layer { transition: opacity 400ms linear; transform: none; filter: none; }
  .layer.is-live { transform: none; filter: none; }
  a.wk:hover .well { transform: none; }
}