/* ══════════════════════════════════════════════════════════════
   hemanthkori.com — cinematic dark portfolio
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg:        #05060a;
  --bg-2:      #080a11;
  --bg-3:      #0c0f18;
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);
  --ink:       #eef2f8;
  --ink-2:     rgba(238,242,248,.66);
  --ink-3:     rgba(238,242,248,.40);
  --cyan:      #58a6ff;
  --cyan-dim:  rgba(88,166,255,.14);
  --green:     #3fb950;
  --amber:     #e3b341;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --max: 1240px;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: italic; }

::selection { background: var(--cyan); color: #04050a; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cyan); color: #04050a; padding: .75rem 1.25rem;
  font-size: .8rem; font-weight: 500;
}
.skip:focus { left: 0; }

/* film grain */
.grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-4%,3%) }
  40% { transform: translate(3%,-5%) }
  60% { transform: translate(-3%,-3%) }
  80% { transform: translate(4%,4%) }
}

/* ─────────────────────────  NAV  ───────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem var(--pad);
  transition: background .45s ease, backdrop-filter .45s ease, border-color .45s ease, padding .45s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(5,6,10,.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
  padding-top: .8rem; padding-bottom: .8rem;
}

.nav__mark { display: flex; align-items: center; gap: .7rem; }
.nav__glyph {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .06em;
  border: 1px solid var(--line-2); border-radius: 3px;
  padding: .3rem .42rem; color: var(--cyan);
}
.nav__name {
  font-size: .8rem; font-weight: 500; letter-spacing: .02em;
}

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  font-size: .74rem; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
  position: relative; transition: color .3s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta {
  border: 1px solid var(--line-2); border-radius: 100px;
  padding: .48rem 1.05rem; color: var(--ink) !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--cyan); color: #04050a !important; border-color: var(--cyan); }

@media (max-width: 780px) {
  .nav__name { display: none; }
  .nav__links { gap: 1.05rem; }
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__links a[href="#projects"], .nav__links a[href="#work"] { display: inline; }
}

/* ─────────────────────────  HERO  ───────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 7rem var(--pad) 5rem;
  overflow: hidden;
  isolation: isolate;
}
#orb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -2;
}
.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 48% at 50% 46%, rgba(5,6,10,0) 0%, rgba(5,6,10,.62) 62%, rgba(5,6,10,.94) 100%),
    linear-gradient(180deg, rgba(5,6,10,.85) 0%, rgba(5,6,10,0) 22%, rgba(5,6,10,0) 68%, var(--bg) 100%);
}

.hero__inner { text-align: center; max-width: 62rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .19em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .45rem 1rem .45rem .8rem;
  background: rgba(255,255,255,.02);
  margin-bottom: 2.2rem;
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(63,185,80,.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,185,80,.55) }
  70%  { box-shadow: 0 0 0 9px rgba(63,185,80,0) }
  100% { box-shadow: 0 0 0 0 rgba(63,185,80,0) }
}

.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(4rem, 15.5vw, 15rem);
  line-height: .84; letter-spacing: -.03em;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; will-change: transform; }
.hero__title .line:nth-child(2) { color: var(--ink-2); }

.hero__sub {
  font-size: clamp(1rem, 1.55vw, 1.32rem);
  color: var(--ink-2); line-height: 1.55;
  margin: 2.1rem auto 0; max-width: 34rem;
}
.hero__sub em { color: var(--ink); font-style: italic; font-family: var(--serif); font-size: 1.12em; }

.hero__role {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  margin-top: 1.6rem;
}
.hero__role .sep { color: var(--cyan); }

.hero__actions { display: flex; gap: .85rem; justify-content: center; margin-top: 2.6rem; flex-wrap: wrap; }

.btn {
  display: inline-block; border: 1px solid var(--line-2); border-radius: 100px;
  padding: .82rem 1.7rem; font-size: .78rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  transition: background .35s, color .35s, border-color .35s, transform .35s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--ink-2); }
.btn--primary { background: var(--ink); color: #04050a; border-color: var(--ink); }
.btn--primary:hover { background: var(--cyan); border-color: var(--cyan); }

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero__scroll i {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--line-2), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll i::after {
  content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 14px;
  background: var(--cyan); animation: trickle 2s ease-in-out infinite;
}
@keyframes trickle { 0% { top: -14px } 100% { top: 44px } }

/* ─────────────────────────  STATEMENT  ───────────────────────── */

.statement {
  padding: clamp(7rem, 16vh, 13rem) var(--pad);
  max-width: var(--max); margin: 0 auto; text-align: center;
}
.statement__text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 4rem);
  line-height: 1.16; letter-spacing: -.02em;
}
.statement__text [data-w] { display: inline-block; }
.statement__quote {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--ink-3); margin-top: 3rem;
}

/* ─────────────────────────  STATS  ───────────────────────── */

.stats { padding: 0 var(--pad) clamp(6rem, 12vh, 10rem); }
.stats__grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.stat {
  padding: 2.4rem 1.5rem 0;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat__num {
  display: block; font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--ink) 30%, rgba(88,166,255,.55));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label {
  display: block; margin-top: 1rem;
  font-size: .78rem; color: var(--ink-3); line-height: 1.5;
  max-width: 15rem;
}
@media (max-width: 900px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--line); padding-top: 2rem; margin-top: 2rem; }
}
@media (max-width: 520px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .stat:not(:first-child) { border-top: 1px solid var(--line); padding-top: 1.8rem; margin-top: 1.8rem; }
}

/* ─────────────────────────  SECTION SHELL  ───────────────────────── */

.section {
  padding: clamp(6rem, 13vh, 11rem) var(--pad);
  max-width: var(--max); margin: 0 auto;
  position: relative;
}
.section__head { margin-bottom: clamp(3.5rem, 7vh, 6rem); max-width: 46rem; }

.tag {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 1.5rem;
}
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.025em;
}
.ital { font-style: italic; color: var(--ink-2); }
.lede {
  margin-top: 1.6rem; font-size: clamp(.95rem, 1.2vw, 1.1rem);
  color: var(--ink-2); max-width: 40rem;
}

/* ─────────────────────────  TIMELINE  ───────────────────────── */

.timeline { position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: .6rem; bottom: 0;
  width: 1px; background: linear-gradient(180deg, var(--line-2), var(--line), transparent);
}
@media (min-width: 900px) {
  .timeline::before { left: 13rem; }
}

.tl {
  display: grid; gap: .4rem 3rem;
  padding: 0 0 3.4rem 1.9rem;
}
@media (min-width: 900px) {
  .tl { grid-template-columns: 13rem 1fr; padding-left: 0; gap: 0 3rem; }
  .tl__body { padding-left: 2rem; }
}

.tl__when {
  position: relative;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  padding-top: .35rem;
}
.tl__dot {
  position: absolute; left: -1.9rem; top: .62rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--cyan);
  box-shadow: 0 0 0 4px var(--bg);
}
@media (min-width: 900px) {
  .tl__dot { left: auto; right: -3.4rem; }
}
.tl:first-child .tl__dot { background: var(--cyan); box-shadow: 0 0 0 4px var(--bg), 0 0 14px 2px rgba(88,166,255,.5); }

.tl__role {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem); line-height: 1.15;
  letter-spacing: -.015em;
}
.tl__at { color: var(--ink-3); font-size: .78em; }
.tl__meta {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--cyan); margin-top: .7rem; text-transform: uppercase;
}
.tl__points { margin-top: 1.3rem; display: grid; gap: .72rem; }
.tl__points li {
  position: relative; padding-left: 1.2rem;
  font-size: .93rem; color: var(--ink-2); line-height: 1.62;
}
.tl__points li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 5px; height: 1px; background: var(--line-2);
}
.tl__points strong { color: var(--ink); font-weight: 500; }

/* ─────────────────────────  CARDS  ───────────────────────── */

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.card {
  background: var(--bg);
  padding: 2.1rem 1.9rem 2.3rem;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: background .5s ease;
}
.card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(88,166,255,.09), transparent 60%);
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.card:hover { background: var(--bg-3); }
.card:hover::before { opacity: 1; }
.card--wide { grid-column: span 2; }

.card__top {
  display: flex; flex-direction: column; gap: .35rem;
  margin-bottom: 1.5rem;
}
.card__kind {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cyan);
}
.card__stack {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  color: var(--ink-3);
}
.card__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.12;
  letter-spacing: -.015em; margin-bottom: .9rem;
}
.card__body { font-size: .9rem; color: var(--ink-2); line-height: 1.62; flex: 1; }
.card__link {
  margin-top: 1.6rem; align-self: flex-start;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--line-2); padding-bottom: .25rem;
  transition: color .3s, border-color .3s;
}
.card__link span { display: inline-block; transition: transform .3s; }
.card__link:hover { color: var(--cyan); border-color: var(--cyan); }
.card__link:hover span { transform: translateX(4px); }

@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .card--wide { grid-column: span 1; }
}

.projects__more { margin-top: 2.6rem; }
.ghostlink {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  transition: color .3s;
}
.ghostlink:hover { color: var(--cyan); }

/* ─────────────────────────  SKILLS  ───────────────────────── */

.skills__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.5rem; }
@media (max-width: 980px) { .skills__grid { grid-template-columns: 1fr; } }

.skillset__title {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.015em;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.skillset__idx { font-family: var(--mono); font-size: .62rem; color: var(--cyan); letter-spacing: .16em; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 3px;
  padding: .38rem .62rem;
  background: rgba(255,255,255,.014);
  transition: border-color .3s, color .3s, background .3s;
}
.chips li:hover { border-color: rgba(88,166,255,.45); color: var(--ink); background: var(--cyan-dim); }

.creds { display: grid; gap: .95rem; }
.creds li { display: flex; flex-direction: column; gap: .12rem; }
.creds span { font-size: .88rem; color: var(--ink); }
.creds em {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-style: normal;
}

/* ─────────────────────────  RESEARCH  ───────────────────────── */

.papers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 820px) { .papers { grid-template-columns: 1fr; } }

.paper {
  background: var(--bg); padding: 2.2rem 2rem 2.4rem;
  transition: background .5s;
}
.paper:hover { background: var(--bg-3); }
.paper__doi {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber);
}
.paper__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.14;
  letter-spacing: -.015em; margin: 1rem 0 .9rem;
}
.paper__body { font-size: .9rem; color: var(--ink-2); line-height: 1.62; }
.paper__links { display: flex; gap: 1.6rem; margin-top: 1.7rem; }
.paper__links a {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--line-2); padding-bottom: .22rem;
  transition: color .3s, border-color .3s;
}
.paper__links a:hover { color: var(--cyan); border-color: var(--cyan); }

/* ═════════════════════  SIDE PROJECT (AnLee Ventures)  ═════════════════════
   Warm coffee palette rather than the cyan used everywhere else, so the eye
   registers this as a different life before reading a word of it. */

.side {
  position: relative;
}
.side::before {
  content: ''; position: absolute; inset: 0 calc(var(--pad) * -1);
  background:
    radial-gradient(70% 55% at 18% 0%, rgba(227,179,65,.055), transparent 70%),
    radial-gradient(60% 50% at 88% 100%, rgba(184,128,26,.05), transparent 70%);
  pointer-events: none;
}

.tag--warm  { color: var(--amber); }
.ital--warm { color: rgba(227,179,65,.72); }

.side__co {
  color: var(--amber);
  border-bottom: 1px solid rgba(227,179,65,.35);
  transition: color .3s, border-color .3s;
}
.side__co:hover { color: var(--ink); border-color: var(--ink); }
.side .lede strong { color: var(--ink); font-weight: 500; }

/* the "receipts" — evidence, presented as a numbered docket */
.receipts {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  counter-reset: receipt;
}
.receipt {
  display: grid; grid-template-columns: 4.25rem 1fr;
  gap: 0 1rem;
  padding: 1.85rem 1.9rem;
  background: var(--bg);
  transition: background .5s ease;
}
.receipt:hover { background: #0c0a06; }

.receipt__n {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  color: var(--amber); padding-top: .3rem;
}
.receipt__h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.16;
  letter-spacing: -.015em; margin-bottom: .55rem;
}
.receipt p {
  font-size: .92rem; color: var(--ink-2); line-height: 1.64;
  max-width: 46rem;
}
.receipt em { color: var(--ink); font-style: italic; }

@media (max-width: 620px) {
  .receipt { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 1.25rem; }
  .receipt__n { padding-top: 0; }
}

.side__cta {
  display: flex; align-items: center; gap: 1.4rem;
  flex-wrap: wrap; margin-top: 2.6rem;
}
.btn--warm {
  border-color: rgba(227,179,65,.45); color: var(--amber);
}
.btn--warm:hover {
  background: var(--amber); border-color: var(--amber); color: #17120a;
}
.btn--warm span { display: inline-block; transition: transform .3s; }
.btn--warm:hover span { transform: translateX(4px); }

.side__note {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ─────────────────────────  CONTACT  ───────────────────────── */

.contact { text-align: center; }
.contact__inner { max-width: 50rem; margin: 0 auto; }
.contact .tag { text-align: center; }
.contact .lede { margin-left: auto; margin-right: auto; }

.contact__h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.08;
  letter-spacing: -.025em;
}
.mailto {
  display: inline-block; margin-top: 3rem;
  font-family: var(--serif); font-size: clamp(1.3rem, 3.4vw, 2.6rem);
  letter-spacing: -.02em; color: var(--cyan);
  border-bottom: 1px solid rgba(88,166,255,.3); padding-bottom: .3rem;
  transition: border-color .35s, color .35s;
  word-break: break-word;
}
.mailto:hover { color: var(--ink); border-color: var(--ink); }

.social { display: flex; gap: 2rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.social a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); transition: color .3s;
}
.social a:hover { color: var(--ink); }

/* ─────────────────────────  FOOTER  ───────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding: 2.2rem var(--pad);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ═════════════════════════  UNDER CONSTRUCTION SIGN  ═════════════════════════ */

.wip {
  position: relative; z-index: 40;
  margin: 0; padding: 0;
  background: #0a0b10;
  border-top: 1px solid rgba(227,179,65,.22);
  border-bottom: 1px solid rgba(227,179,65,.22);
  overflow: hidden;
  text-align: center;
}
.wip.is-gone { display: none; }

/* animated hazard stripes */
.wip__hazard {
  height: 16px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--amber) 0 14px,
    #0a0b10 14px 28px
  );
  background-size: 39.6px 39.6px;
  opacity: .85;
  animation: hazard 1.1s linear infinite;
}
.wip__hazard--b { animation-direction: reverse; }
@keyframes hazard { to { background-position: 39.6px 0; } }

/* the nav is fixed at the top, so the sign's content must clear it */
.wip__inner {
  position: relative;
  padding: calc(clamp(2rem, 5vh, 3.4rem) + 3.4rem) var(--pad) clamp(2rem, 5vh, 3.4rem);
}

/* flex (not inline-flex) so it occupies its own line — as an inline box it
   shared a line with the headline and shoved it off-centre */
.wip__kicker {
  display: flex; width: fit-content; margin-inline: auto;
  align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--amber);
  margin-bottom: 1.35rem;
}
.wip__blink {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  animation: wipblink 1s steps(2) infinite;
}
@keyframes wipblink { 0%,49% { opacity: 1 } 50%,100% { opacity: .12 } }

/* big glitching headline */
.wip__big {
  position: relative; display: inline-block;
  max-width: 100%;
  font-family: var(--serif); font-weight: 400;
  /* 7vw keeps the 24-character string inside the viewport at every width;
     the glitch pseudo-elements shift ±5px so it also needs edge headroom */
  font-size: clamp(1.6rem, 7vw, 5.4rem);
  line-height: .95; letter-spacing: -.02em;
  color: var(--ink);
  text-transform: uppercase;
  text-wrap: balance;
}
.wip__big::before,
.wip__big::after {
  content: attr(data-glitch);
  position: absolute; inset: 0;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}
.wip__big::before {
  color: var(--amber);
  animation: glitchA 3.4s steps(1) infinite;
}
.wip__big::after {
  color: var(--cyan);
  animation: glitchB 2.9s steps(1) infinite;
}
@keyframes glitchA {
  0%, 84%, 100% { transform: none; clip-path: inset(0 0 100% 0); opacity: 0 }
  85% { transform: translate(-4px, 1px);  clip-path: inset(14% 0 62% 0); opacity: .9 }
  88% { transform: translate(5px, -2px);  clip-path: inset(58% 0 22% 0); opacity: .9 }
  91% { transform: translate(-3px, 2px);  clip-path: inset(78% 0 6% 0);  opacity: .9 }
}
@keyframes glitchB {
  0%, 78%, 100% { transform: none; clip-path: inset(0 0 100% 0); opacity: 0 }
  80% { transform: translate(4px, -1px);  clip-path: inset(32% 0 44% 0); opacity: .85 }
  83% { transform: translate(-5px, 2px);  clip-path: inset(6% 0 80% 0);  opacity: .85 }
  86% { transform: translate(2px, 1px);   clip-path: inset(66% 0 14% 0); opacity: .85 }
}

.wip__sub {
  margin: 1.5rem auto 0; max-width: 34rem;
  font-size: clamp(.92rem, 1.35vw, 1.1rem);
  color: var(--ink-2); line-height: 1.6;
}
/* frying pan: a lazy, slightly off-rhythm sizzle. The timing is deliberately
   uneven (5.7s, with the shake crammed into a short window) so it reads as a
   pan being jostled now and then rather than a metronome. */
.wip__pan {
  display: inline-block;
  font-size: 1.15em;
  transform-origin: 62% 78%;      /* roughly the handle joint */
  animation: sizzle 5.7s ease-in-out infinite;
}
@keyframes sizzle {
  0%, 62%, 100% { transform: rotate(0deg) translateY(0) }
  66% { transform: rotate(-9deg) translateY(-2px) }
  70% { transform: rotate(6deg)  translateY(0) }
  74% { transform: rotate(-5deg) translateY(-1px) }
  78% { transform: rotate(3deg)  translateY(0) }
  82% { transform: rotate(-1deg) translateY(0) }
}

.wip__dots i {
  display: inline-block; opacity: .2;
  animation: wipdot 1.4s infinite;
}
.wip__dots i:nth-child(2) { animation-delay: .2s }
.wip__dots i:nth-child(3) { animation-delay: .4s }
@keyframes wipdot { 0%,60%,100% { opacity: .2 } 30% { opacity: 1 } }

/* indeterminate loading bar */
.wip__bar {
  position: relative; overflow: hidden;
  width: min(30rem, 76vw); height: 3px;
  margin: 2.2rem auto 0;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
}
.wip__bar span {
  position: absolute; inset: 0 auto 0 0; width: 34%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--amber), var(--cyan), transparent);
  animation: wipbar 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes wipbar {
  0%   { left: -36% }
  100% { left: 102% }
}

.wip__pct {
  margin-top: .9rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3);
}
.wip__pct b { color: var(--amber); font-weight: 500; }

.wip__close {
  /* sits below the fixed nav so it can't collide with the CONTACT pill */
  position: absolute; top: 4.15rem; right: clamp(.9rem, 3vw, 1.6rem);
  z-index: 2;
  width: 30px; height: 30px; line-height: 1;
  display: grid; place-items: center;
  font-size: 1.35rem;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 50%;
  cursor: pointer;
  transition: color .3s, border-color .3s, transform .3s;
}
.wip__close:hover { color: var(--ink); border-color: var(--ink-2); transform: rotate(90deg); }

/* ═════════════════════════  JCB EXCAVATOR  ═════════════════════════ */

.jcb-layer {
  position: fixed; inset: 0;
  z-index: 55;
  pointer-events: none;          /* never intercepts a click on the real site */
  overflow: hidden;
}

.jcb {
  position: absolute;
  bottom: 0; left: 0;
  width: 190px;
  will-change: transform;
  transform: translate3d(-260px, 0, 0);   /* starts offstage */
}
.jcb__svg {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}

/* dust puff kicked up while driving / digging */
.jcb__dust {
  position: absolute; left: 6px; bottom: 4px;
  width: 46px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(200,190,170,.32), transparent 70%);
  opacity: 0;
}

/* rubble the digger drops around the page */
.jcb-rock {
  position: absolute;
  bottom: 0;
  width: 15px; height: 11px;
  border-radius: 46% 54% 42% 58% / 62% 58% 42% 38%;
  background: linear-gradient(160deg, #a8b0bb, #5f666f 65%, #454b53);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  will-change: transform, opacity;
}

/* scale the machine down on smaller screens rather than hiding it */
@media (max-width: 900px) { .jcb { width: 150px; } }
@media (max-width: 700px) { .jcb { width: 120px; } }
@media (max-width: 480px) { .jcb { width: 96px;  } }
@media (max-width: 360px) { .jcb { width: 84px;  } }
@media (max-width: 480px) { .jcb-rock { width: 11px; height: 8px; } }

/* only motion sensitivity hides it now */
@media (prefers-reduced-motion: reduce) { .jcb-layer { display: none; } }

/* ═════════════════════════  SOUND TOGGLE  ═════════════════════════ */

/* Deliberately understated: reads as an ambient level meter rather than a
   switch, but stays a real button so the audio can always be stopped —
   background sound with no stop control talks over screen readers. */
.sound {
  position: fixed; z-index: 60;
  bottom: 1.1rem; right: 1.1rem;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  background: rgba(10,11,16,.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 50%;
  color: var(--ink-2); cursor: pointer;
  opacity: .42;
  transition: opacity .3s, border-color .3s, background .3s;
}
.sound:hover,
.sound:focus-visible { opacity: 1; border-color: var(--cyan); background: rgba(10,11,16,.78); }
.sound__txt {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;   /* screen readers only */
}

.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.sound__bars i {
  display: block; width: 2px; height: 40%;
  background: var(--cyan); border-radius: 1px;
  transform-origin: bottom;
}
.sound.is-on .sound__bars i { animation: eq .68s ease-in-out infinite alternate; }
.sound.is-on .sound__bars i:nth-child(1) { animation-delay: 0s;    height: 45% }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: .13s;  height: 92% }
.sound.is-on .sound__bars i:nth-child(3) { animation-delay: .26s;  height: 62% }
.sound.is-on .sound__bars i:nth-child(4) { animation-delay: .39s;  height: 100% }
@keyframes eq { from { transform: scaleY(.22) } to { transform: scaleY(1) } }

.sound:not(.is-on) .sound__bars i { background: var(--ink-3); height: 30%; }

/* clear of the digger's working area on small screens */
@media (max-width: 480px) { .sound { bottom: 1.5rem; right: .85rem; } }

/* ─────────────────────────  MOTION SAFETY  ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .grain, .pulse, .hero__scroll i::after,
  .wip__hazard, .wip__blink, .wip__dots i, .wip__bar span, .wip__pan,
  .wip__big::before, .wip__big::after, .sound__bars i { animation: none !important; }
  .wip__big::before, .wip__big::after { opacity: 0 !important; }
  * { transition-duration: .01ms !important; }
  .hero__title .line > span { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ✦ GRIMOIRE LAYER ✦
   Visual language borrowed from the Hermes Agent site: one saturated
   ultramarine, an off-white ink, a high-contrast Didone in caps, mono caps for
   labels, hairline rules, and 1-bit dithered engravings.

   Adapted rather than copied. Hermes floods the page in #0000f2 with dark type;
   this site stays near-black, so pure #0000f2 would be unreadable as a text
   colour. The flood blue is kept for panels, and a lifted variant carries text.
   Plate artwork is generated, not lifted.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --hermes:      #0000f2;   /* the flood blue — panels and washes only */
  --hermes-lift: #6b6bff;   /* readable on near-black */
  --hermes-deep: #00008a;
  --acid:        #edff45;   /* Hermes accent — labels, numerals, hovers */
  --paper:       #f5f5f5;

  /* retune the originals so the whole cascade shifts at once */
  --ink:    var(--paper);
  --cyan:     #6b6bff;
  --cyan-dim: rgba(0,0,242,.30);
  --amber:    #edff45;

  --display: 'Bodoni Moda', 'Instrument Serif', Didot, Georgia, serif;
  --serif:   'Bodoni Moda', 'Instrument Serif', Didot, Georgia, serif;
}

/* ── Didone caps for every display line ── */
.hero__title,
.h2, .contact__h, .statement__text, .wip__big {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -.012em;
  font-weight: 400;
}
.hero__title { line-height: .82; }
.h2 { line-height: .98; }
.statement__text { text-transform: none; }          /* keep the sentence readable */
.ital, .ital--warm { font-style: italic; text-transform: none; }

/* card and receipt headings keep sentence case — they carry real information */
.card__title, .paper__title, .tl__role, .receipt__h, .skillset__title { font-family: var(--display); }

/* ── hairline frame around the viewport, Hermes-style ── */
.frame { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.frame i {
  position: absolute; background: rgba(245,245,245,.16);
}
.frame i:nth-child(1) { top: 10px; left: 10px; right: 10px; height: 1px; }
.frame i:nth-child(2) { bottom: 10px; left: 10px; right: 10px; height: 1px; }
.frame i:nth-child(3) { left: 10px; top: 10px; bottom: 10px; width: 1px; }
.frame i:nth-child(4) { right: 10px; top: 10px; bottom: 10px; width: 1px; }
@media (max-width: 700px) { .frame { display: none; } }

/* ── dithered plates as section watermarks ── */
.plate {
  position: absolute; pointer-events: none;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  opacity: .16;
  mix-blend-mode: screen;
}
.plate--seal  { background-image: url('/assets/plate-seal.png'); }
.plate--sun   { background-image: url('/assets/plate-sun.png'); }
.plate--ouro  { background-image: url('/assets/plate-ouroboros.png'); }
.plate--ladder{ background-image: url('/assets/plate-ladder.png'); }

.plate--tr { top: -3rem;  right: -4rem; width: 26rem; height: 26rem; }
.plate--bl { bottom: -4rem; left: -5rem; width: 24rem; height: 24rem; }
@media (max-width: 760px) { .plate { width: 15rem; height: 15rem; opacity: .1; } }

/* ── section eyebrow: roman numeral + rule, replacing the old tag ── */
.tag {
  display: flex; align-items: center; gap: .9rem;
  color: var(--acid);
}
.tag::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(237,255,69,.4), transparent);
}
.tag--warm { color: var(--acid); }

/* ── ultramarine flood panels ── */
.flood {
  background: var(--hermes);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.flood::after {                       /* paper grain over the flood */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.flood .lede, .flood p { color: rgba(245,245,245,.86); }
.flood .tag { color: var(--acid); }

/* ── statement: set as an incantation ── */
.statement__quote { color: var(--acid); }

/* ── TAROT CARDS (skills) ── */
.arcana {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 980px) { .arcana { grid-template-columns: 1fr; } }

.card-arcanum {
  position: relative;
  border: 1px solid rgba(245,245,245,.18);
  background: linear-gradient(175deg, rgba(0,0,242,.16), rgba(5,6,10,.4) 60%);
  padding: 1.6rem 1.5rem 1.8rem;
  overflow: hidden;
  transition: border-color .45s, transform .45s, background .45s;
}
.card-arcanum::before {                        /* corner filigree */
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(245,245,245,.1);
  pointer-events: none;
}
.card-arcanum:hover {
  border-color: var(--acid);
  transform: translateY(-4px);
  background: linear-gradient(175deg, rgba(0,0,242,.3), rgba(5,6,10,.5) 60%);
}
.arcanum__num {
  display: block; text-align: center;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .3em;
  color: var(--acid); margin-bottom: .9rem;
}
.arcanum__glyph {
  display: block; text-align: center;
  font-size: 2.6rem; line-height: 1; margin-bottom: .7rem;
  filter: drop-shadow(0 0 14px rgba(107,107,255,.5));
}
.arcanum__name {
  display: block; text-align: center;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: .04em;
  padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(245,245,245,.14);
}
.arcanum__read {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--hermes-lift);
  text-align: center; display: block; margin-bottom: 1rem;
}
.card-arcanum .chips { justify-content: center; }
.card-arcanum .chips li { border-color: rgba(245,245,245,.14); }
.card-arcanum .chips li:hover { border-color: var(--acid); background: rgba(237,255,69,.1); color: var(--paper); }

/* ── planetary hours: the SOC rota as an almanac ── */
.hours {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(245,245,245,.14);
  background: rgba(0,0,242,.08);
}
@media (max-width: 760px) { .hours { grid-template-columns: repeat(2, 1fr); } }
.hour {
  padding: 1.15rem 1rem;
  border-right: 1px solid rgba(245,245,245,.1);
  border-bottom: 1px solid rgba(245,245,245,.1);
  text-align: center;
}
.hour__sym { display: block; font-size: 1.5rem; line-height: 1; margin-bottom: .5rem; color: var(--acid); }
.hour__name {
  display: block; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--hermes-lift);
  margin-bottom: .35rem;
}
.hour__v { display: block; font-family: var(--display); font-size: 1.15rem; }

/* ── marginalia: little latin notes in the gutters ── */
.marginalia {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(245,245,245,.28);
  margin-top: 1.4rem;
}
.marginalia em { color: var(--hermes-lift); font-style: italic; text-transform: none; letter-spacing: .06em; }

/* ── retune existing furniture to the new palette ── */
.nav__glyph { color: var(--acid); border-color: rgba(237,255,69,.4); }
.nav__cta:hover { background: var(--acid); color: #10120a !important; border-color: var(--acid); }
.nav__links a::after { background: var(--acid); }
.btn--primary { background: var(--paper); color: #08080f; border-color: var(--paper); }
.btn--primary:hover { background: var(--acid); border-color: var(--acid); color: #10120a; }
.btn--warm { border-color: rgba(237,255,69,.45); color: var(--acid); }
.btn--warm:hover { background: var(--acid); border-color: var(--acid); color: #10120a; }
.pulse { background: var(--acid); box-shadow: 0 0 0 0 rgba(237,255,69,.6); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(237,255,69,.55) }
  70%  { box-shadow: 0 0 0 9px rgba(237,255,69,0) }
  100% { box-shadow: 0 0 0 0 rgba(237,255,69,0) }
}
.stat__num {
  background: linear-gradient(180deg, var(--paper) 30%, rgba(107,107,255,.75));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mailto { color: var(--acid); border-bottom-color: rgba(237,255,69,.35); }
.paper__doi { color: var(--acid); }
.tl__meta { color: var(--hermes-lift); }
.card__kind { color: var(--acid); }
.receipt__n { color: var(--acid); }
.side__co { color: var(--acid); border-bottom-color: rgba(237,255,69,.35); }
.hero__role .sep { color: var(--acid); }
.hero__scroll i::after { background: var(--acid); }
.chips li:hover { border-color: rgba(237,255,69,.5); background: rgba(237,255,69,.08); }
.skillset__idx { color: var(--acid); }

/* Uppercase Bodoni runs ~18% wider than the mixed-case face it replaced —
   rescale the hero so the name never clips the viewport. */
.hero__title { font-size: clamp(3.2rem, 12vw, 11.5rem); }

/* ── alignment corrections ─────────────────────────────────────────────────
   1. The tag's trailing rule stretched across centred sections (Contact),
      leaving the numeral looking shoved left. Centre the tag and drop the
      rule where the section is centred.
   2. Panel titles and chips were centred over left-aligned credential lists —
      mixed axes read as misalignment. Left-align the whole panel.            */

.contact .tag { justify-content: center; }
.contact .tag::after { display: none; }

.arcanum__name {
  text-align: left;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: .02em;
}
.card-arcanum .chips { justify-content: flex-start; }

/* corporate panel: quieter border, no lift on hover, no filigree inset */
.card-arcanum::before { display: none; }
.card-arcanum:hover { transform: none; border-color: rgba(245,245,245,.34); }

/* ════════════════════════════════════════════════════════════════════════════
   ✦ THE REEL ✦  — cinematic scroll experience, after Heat Bureau
   A branded preloader, then scroll-scrubbed scenes: a centre panel that grows
   from a small plate to full-bleed while a colour wash changes behind it and
   split type parallaxes past. Original artwork and copy; the mechanic is the
   borrowed part.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── preloader ── */
.pre {
  position: fixed; inset: 0; z-index: 999;
  background: #131313;
  display: grid; place-items: center;
  align-content: center; gap: 2.2rem;
}
.pre.is-done { pointer-events: none; }
.pre__mark { position: relative; }
.pre__ghost, .pre__fill {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.6rem, 6vw, 4.4rem); letter-spacing: .04em; line-height: 1;
  display: block;
}
.pre__ghost { color: rgba(245,245,245,.13); }
.pre__fill {
  position: absolute; inset: 0; color: var(--paper);
  clip-path: inset(0 100% 0 0);          /* JS wipes this open */
  white-space: nowrap;
}
.pre__meta {
  display: flex; gap: 2.2rem; align-items: baseline;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(245,245,245,.34);
}
.pre__meta span:nth-child(2) { color: var(--acid); }

/* ── the reel ── */
.reel { position: relative; background: transparent; }
.reel__wash {
  position: fixed; inset: 0; z-index: -3;
  background: #05060a;
  transition: background-color .6s linear;
  pointer-events: none;
}
.reel.is-active ~ * { position: relative; }

.scene {
  position: relative;
  min-height: 118svh;
  display: grid; place-items: center;
  padding: 0 var(--pad);
}
.scene__panel {
  position: relative;
  width: min(30rem, 62vw); aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(245,245,245,.14);
  will-change: transform;
}
.scene__img {
  position: absolute; inset: 0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: contrast(1.15);
  will-change: transform;
}
.scene__l, .scene__r {
  position: absolute; top: 50%;
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.1rem, 2.6vw, 2.4rem);
  color: var(--acid); white-space: nowrap;
  will-change: transform;
}
.scene__l { left: var(--pad); }
.scene__r { right: var(--pad); }

@media (max-width: 760px) {
  .scene { min-height: 92svh; }
  .scene__panel { width: 74vw; }
  .scene__l, .scene__r { top: auto; bottom: 12%; font-size: 1rem; }
  .scene__l { left: 1rem; } .scene__r { right: 1rem; }
}

/* ── index-style footer ── */
.foot--index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  align-items: start;
  padding: 4rem var(--pad) 2.2rem;
  text-transform: none;
}
.foot__col { display: flex; flex-direction: column; gap: .5rem; }
.foot__col--end { text-align: right; }
.foot__lab {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  color: rgba(245,245,245,.28); margin-bottom: .35rem;
}
.foot__col a, .foot__col span:not(.foot__lab) {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
  transition: color .3s;
}
.foot__col a:hover { color: var(--acid); }
.foot__rule {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  margin-top: 3.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.foot__dim { color: rgba(245,245,245,.24); }
@media (max-width: 760px) {
  .foot--index { grid-template-columns: repeat(2, 1fr); }
  .foot__col--end { text-align: left; }
}

/* heavier grain, closer to the reference's film texture */
.grain { opacity: .05; }

@media (prefers-reduced-motion: reduce) {
  .pre { display: none; }
  .scene { min-height: auto; padding-block: 3rem; }
  .scene__l, .scene__r { position: static; display: block; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ✦ REEL v2 — full-bleed, high-contrast, less polite ✦
   The first pass was generic because the panel stayed a small framed rectangle
   and the imagery was thin line art. Now the plate covers the viewport, the
   reveal is a clip-path wipe rather than a fade, and the type is set at a size
   that competes with the image instead of captioning it.
   ══════════════════════════════════════════════════════════════════════════ */

.scene { min-height: 150svh; overflow: clip; }

/* the panel is the whole screen; clip-path opens it */
.scene__panel {
  position: absolute; inset: 0;
  width: auto; aspect-ratio: auto;
  border: 0;
  clip-path: inset(38% 26% 38% 26%);      /* JS scrubs this to inset(0) */
  will-change: clip-path, transform;
}
.scene__img {
  position: absolute; inset: -12%;
  background-size: cover;
  filter: contrast(1.5) brightness(1.06);
  will-change: transform;
}

/* duotone: the wash colour bleeds through the dither */
.scene__panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 25%, rgba(5,6,10,.72) 100%);
}

/* type competes with the image */
.scene__l, .scene__r {
  z-index: 3;
  font-size: clamp(1.6rem, 6.4vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.02em;
  text-shadow: 0 0 40px rgba(5,6,10,.85), 0 2px 24px rgba(5,6,10,.9);
  max-width: 46vw; white-space: normal;
}
.scene__l { text-align: left; }
.scene__r { text-align: right; color: var(--paper); }

/* a hard acid rule that swipes across at the scene's midpoint */
.scene__bar {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--acid);
  transform: scaleX(0); transform-origin: left center;
  z-index: 2; mix-blend-mode: screen;
}

/* index counter, bottom-left of each scene */
.scene__idx {
  position: absolute; left: var(--pad); bottom: 8%;
  z-index: 3;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--acid);
}

@media (max-width: 760px) {
  .scene { min-height: 110svh; }
  .scene__panel { clip-path: inset(30% 12% 30% 12%); }
  .scene__l, .scene__r { max-width: 78vw; font-size: clamp(1.4rem, 8.5vw, 2.6rem); }
  .scene__l { top: 16%; } .scene__r { top: auto; bottom: 18%; }
}

/* section watermarks now use the dense plates */
.plate { opacity: .1; }
.plate--ridge { background-image: url('/assets/p-ridge.png'); }
.plate--burst { background-image: url('/assets/p-burst.png'); }
.plate--topo  { background-image: url('/assets/p-topo.png'); }
.plate--orb   { background-image: url('/assets/p-orb.png'); }