:root {
  --bg: #000000;
  --panel: rgba(8, 8, 8, 0.5);
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(var(--accent-rgb), 0.28);
  --text: #efede8;
  --text-soft: #c9c6bf;
  --text-mid: #d6d3cc;
  --muted: #8e8b85;
  --subtle: #66625b;
  --accent: #e8d6b0;
  --accent-deep: #a8926a;
  --accent-rgb: 232, 214, 176;
  --name-dark: #8d887f;
  --font-body: "Inter Tight", "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Segoe UI", sans-serif;
  --display-weight: 500;
  --display-tracking: -0.045em;
  --display-scale: 1;
  --name-weight: 600;
  --name-tracking: -0.055em;
  --name-scale: 1;
  --name-case: none;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --gutter: clamp(16px, 3vw, 48px);
}

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

html, body { height: 100%; background: var(--bg); }
body {
  color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.55;
  overflow: hidden; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ---------- atmosphere ---------- */

.shader { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.4s var(--ease); }
.is-ready .shader { opacity: 1; }
.no-webgl .shader { display: none; }
.no-webgl { background: radial-gradient(ellipse 70% 55% at 50% 25%, rgba(var(--accent-rgb), 0.08), transparent 70%), var(--bg); }

.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.07; will-change: transform;
  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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 38%, transparent 55%, rgba(0, 0, 0, 0.7));
}

/* ---------- intro ---------- */

.intro { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.intro__shutter { position: absolute; left: 0; right: 0; height: 50.5%; background: #000; transition: transform 1.3s var(--ease-expo); }
.intro__shutter--top { top: 0; }
.intro__shutter--bottom { bottom: 0; }
.intro__content {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 var(--gutter) 40px; transition: opacity 0.5s;
}
.intro__name { font-family: var(--font-serif); font-style: italic; font-size: 26px; color: var(--accent); }
.intro__count { font-family: var(--font-mono); color: var(--muted); }
.intro__count b { font-size: clamp(48px, 9vw, 110px); font-weight: 400; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.intro__count i { font-style: normal; font-size: 13px; margin-left: 6px; }
/* black shutters opening onto black read as nothing, so a hairline of light draws in along the seam while counting and they split on it */
.intro::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.9) 50%, transparent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
  transform: scaleX(0); animation: seam 1.6s var(--ease) forwards;
  transition: opacity 0.8s var(--ease) 0.35s;
}
@keyframes seam { to { transform: scaleX(1); } }
body:not(.is-loading) .intro::after { opacity: 0; }
body:not(.is-loading) .intro__content { opacity: 0; }
body:not(.is-loading) .intro__shutter--top { transform: translateY(-101%); }
body:not(.is-loading) .intro__shutter--bottom { transform: translateY(101%); }

/* ---------- cursor ---------- */

.cursor { display: none; }
.has-cursor .cursor { display: block; opacity: 0; transition: opacity 0.4s; }
.has-cursor .cursor.is-visible { opacity: 1; }
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor__dot, .cursor__ring { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); }
.cursor__ring {
  display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  transition: width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease), background 0.45s, border-color 0.45s;
}
.cursor__ring em { font-family: var(--font-mono); font-size: 9.5px; font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity 0.3s; }
.cursor.is-hovering .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); }
/* black disc with a gold rim, so the label stays visible over the gold fill of a hovered card */
.cursor.is-labeled .cursor__ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: #000; border-color: var(--accent); }
.cursor.is-labeled .cursor__ring em { opacity: 1; }
.cursor.is-labeled .cursor__dot { opacity: 0; }

/* ---------- stage ---------- */

.stage {
  position: relative; z-index: 2; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-width: 1380px; margin: 0 auto; padding: 18px var(--gutter);
}

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.brand { justify-self: start; display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.brand::after { content: "."; color: var(--accent); }
.topbar__center { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--subtle); }
.topbar__meta { justify-self: end; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.75); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- hero ---------- */

.hero { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; padding: clamp(14px, 4.2vh, 46px) 0 clamp(14px, 3.6vh, 40px); }

.eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before, .eyebrow::after { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-deep)); }
.eyebrow::after { transform: scaleX(-1); }

.wordmark {
  position: relative; margin: clamp(2px, 1vh, 10px) 0 clamp(2px, 1vh, 10px);
  font-family: var(--font-display); font-weight: var(--name-weight); font-size: calc(clamp(64px, 18vh, 200px) * var(--name-scale));
  line-height: 0.92; letter-spacing: var(--name-tracking); text-transform: var(--name-case); white-space: nowrap; user-select: none;
  background: linear-gradient(100deg, var(--name-dark) 0%, #ececf0 28%, #ffffff 42%, var(--accent) 50%, #ececf0 58%, var(--name-dark) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(35%) scale(0.96); letter-spacing: 0.2em; filter: blur(14px);
  transition: opacity 1.4s var(--ease) 0.3s, transform 1.6s var(--ease-expo) 0.3s, letter-spacing 2s var(--ease) 0.3s, filter 1.4s var(--ease) 0.3s;
}
.is-ready .wordmark {
  opacity: 1; transform: none; letter-spacing: var(--name-tracking); filter: none;
  animation: sheen 7s var(--ease) 2.4s infinite;
}
@keyframes sheen { 0% { background-position: 100% 0; } 45%, 100% { background-position: -150% 0; } }

.statement { font-size: clamp(15px, 2.1vh, 19px); color: var(--text-soft); }
.statement em { font-family: var(--font-serif); font-size: 1.28em; font-style: italic; color: var(--accent); }

/* ---------- showcase ---------- */

.showcase {
  display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 72px);
  min-height: 0; padding: clamp(12px, 2.6vh, 28px) 0 clamp(12px, 2.4vh, 24px); border-top: 1px solid var(--border);
}

.index { display: flex; flex-direction: column; justify-content: center; }
.index__item {
  position: relative; display: flex; align-items: baseline; gap: 18px; width: 100%; padding: clamp(6px, 1.4vh, 12px) 0; text-align: left;
  color: var(--subtle); transition: color 0.5s var(--ease);
}
.index__item span { font-family: var(--font-mono); font-size: 11px; transition: color 0.5s; }
.index__item b {
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(clamp(30px, 6vh, 58px) * var(--display-scale)); line-height: 1; letter-spacing: var(--display-tracking);
  transition: transform 0.7s var(--ease);
}
.index__item i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); overflow: hidden; }
.index__item i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
/* hover styles are limited to real pointers throughout — on touch screens they stick after a tap */
@media (hover: hover) { .index__item:hover { color: var(--text-soft); } }
.index__item.is-active { color: var(--text); }
.index__item.is-active span { color: var(--accent); }
.index__item.is-active b { transform: translateX(10px); }
.index__item.is-active i::after { animation: index-fill var(--slide-duration, 6s) linear forwards; }
.index.is-paused .index__item.is-active i::after { animation-play-state: paused; }
@keyframes index-fill { to { transform: scaleX(1); } }

.slides { position: relative; min-height: 0; }
.slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3vh, 30px);
  visibility: hidden; pointer-events: none; transition: visibility 0s 0.5s;
}
.slide.is-active { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.slide::before {
  content: attr(data-title); position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-serif); font-style: italic; font-size: clamp(90px, 22vh, 220px); line-height: 1; color: rgba(255, 255, 255, 0.035);
  pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease);
}
.slide.is-active::before { opacity: 1; }

/* each line of a slide rises in on its own delay */
.reveal-line { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), filter 0.45s var(--ease); }
.slide.is-active .reveal-line {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.9s var(--ease) var(--delay, 0s), transform 0.9s var(--ease) var(--delay, 0s), filter 0.9s var(--ease) var(--delay, 0s),
    color 0.4s, padding 0.6s var(--ease), border-color 0.4s;
}

.slide__lead { position: relative; max-width: 620px; font-size: clamp(18px, 2.8vh, 26px); font-weight: 300; line-height: 1.4; color: var(--text-mid); }
.slide__lead em { font-family: var(--font-serif); font-style: italic; color: var(--accent); }

.timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.timeline li { position: relative; padding: 22px 20px 0 0; }
.timeline li::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--border); }
.timeline li::after { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border: 1px solid var(--accent); border-radius: 50%; background: var(--bg); }
.timeline li.is-current::after { background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: pulse 2.4s ease-in-out infinite; }
.timeline b { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(clamp(34px, 6.5vh, 64px) * var(--display-scale)); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.timeline li.is-current b { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent); }
.timeline small { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }

.details { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; max-width: 760px; }
.details div { display: flex; flex-direction: column; gap: 4px; padding: clamp(10px, 2vh, 16px) 0; border-bottom: 1px solid var(--border); }
.details dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--subtle); }
.details dd { font-family: var(--font-display); font-size: calc(clamp(17px, 2.6vh, 22px) * var(--display-scale)); font-weight: var(--display-weight); letter-spacing: -0.02em; }
.details dd.is-live { display: flex; align-items: center; gap: 10px; color: var(--accent); }

.skills { position: relative; display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; list-style: none; }
.skills li { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text-soft); transition: border-color 0.3s, color 0.3s, background 0.3s; }
@media (hover: hover) { .skills li:hover { border-color: var(--accent); color: #0a0a0a; background: var(--accent); } }

.focus { position: relative; max-width: 760px; list-style: none; }
.focus li {
  display: flex; align-items: baseline; gap: 20px; padding: clamp(10px, 2.2vh, 18px) 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: calc(clamp(20px, 3.6vh, 34px) * var(--display-scale)); font-weight: var(--display-weight); letter-spacing: -0.03em; transition: color 0.4s, padding 0.6s var(--ease);
}
@media (hover: hover) { .focus li:hover { padding-left: 14px; color: var(--accent); } }
.focus li span:first-child { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--subtle); }
.focus li span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.16em; color: var(--accent-deep); }

.channels { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; }
.channel {
  position: relative; display: flex; align-items: center; gap: 16px; padding: clamp(16px, 3.4vh, 30px) 24px; text-align: left; overflow: hidden;
  border: 1px solid var(--border); border-radius: 18px; background: rgba(255, 255, 255, 0.02); transition: border-color 0.4s;
}
.channel::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform 0.7s var(--ease-expo); }
.channel > * { position: relative; transition: color 0.4s; }
@media (hover: hover) {
  .channel:hover { border-color: var(--accent); }
  .channel:hover::before { transform: none; }
  .channel:hover > * { color: #0a0a0a; }
}
.channel__icon { width: 30px; height: 30px; flex: none; }
.channel__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.channel__label { font-family: var(--font-display); font-size: calc(clamp(18px, 2.8vh, 24px) * var(--display-scale)); font-weight: 600; letter-spacing: -0.03em; }
.channel__value { font-family: var(--font-mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel__action { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--subtle); }

/* ---------- footer ---------- */

.footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 11.5px; color: var(--subtle);
}
.footer__mark { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; }
.footer span:last-child { justify-self: end; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; }

.toast {
  position: fixed; bottom: 60px; left: 50%; z-index: 80; padding: 10px 20px; border-radius: 999px;
  background: var(--accent); font-size: 12.5px; font-weight: 500; color: #0a0a0a;
  opacity: 0; transform: translate(-50%, 12px) scale(0.96); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- entrance ---------- */

.step { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.is-ready .step { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1000px), (max-height: 560px) {
  body { overflow: auto; }
  .stage { height: auto; min-height: 100svh; }
  .showcase { grid-template-columns: 1fr; }
  .index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
  .index__item { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 0 12px; }
  .index__item b { font-size: calc(clamp(18px, 4.8vw, 30px) * var(--display-scale)); }
  .index__item.is-active b { transform: none; }
  /* every slide sits in the same grid cell, so the box takes the tallest slide's height: nothing clips and the footer never jumps */
  .slides { display: grid; }
  .slide { position: relative; inset: auto; grid-area: 1 / 1; justify-content: flex-start; padding-top: 24px; }
  .slide::before { font-size: clamp(80px, 26vw, 180px); }
  .details, .channels { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar__center { display: none; }
  .topbar { grid-template-columns: 1fr 1fr; }
  .eyebrow { gap: 10px; font-size: 9.5px; letter-spacing: 0.18em; }
  .eyebrow::before, .eyebrow::after { width: 18px; }
  .wordmark { font-size: calc(21vw * var(--name-scale)); }
  .timeline li { padding-right: 10px; }
  .timeline b { font-size: calc(clamp(26px, 8.5vw, 40px) * var(--display-scale)); }
  .timeline small { font-size: 12.5px; }
  .focus li { gap: 14px; font-size: calc(clamp(18px, 5.4vw, 24px) * var(--display-scale)); }
  .footer { grid-template-columns: 1fr; justify-items: center; gap: 6px; text-align: center; }
  .footer span:last-child { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .step, .wordmark, .reveal-line { opacity: 1; transform: none; filter: none; }
  .shader { opacity: 1; }
}