/* ─────────────────────────────────────────────────────────────────────────
   sections.css — one block per page section
   ───────────────────────────────────────────────────────────────────── */

/* ══ HERO ══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.85;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--c-bg) 0%, transparent 20%, transparent 58%, var(--c-bg) 97%),
    linear-gradient(to right, var(--c-bg) 0%, rgb(255 255 255 / 0.72) 46%, transparent 88%);
  pointer-events: none;
}

.hero__inner { width: 100%; }

.hero__title {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 16ch;
}
.hero__title span { display: block; }

.hero__lede {
  margin-top: var(--s-6);
  max-width: 56ch;
  color: var(--c-ink-soft);
  font-size: var(--t-md);
}

.hero__actions {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.hero__stats {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
}
@media (min-width: 48em) { .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hero__stat {
  background: var(--c-bg);
  padding: var(--s-5) var(--s-4);
}
/* Optically align the first figure with the section edge. */
.hero__stat:first-child { padding-left: 0; }

.hero__stat dt {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.hero__stat dd {
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(4rem, 8vw, 7rem);
  display: none;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  writing-mode: vertical-rl;
}
@media (min-width: 62em) { .hero__scroll { display: flex; } }

.hero__scroll-line {
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(to bottom, var(--c-line-strong), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 40%;
  background: var(--c-accent);
  animation: scrollTick 2.4s var(--e-in-out) infinite;
}
@keyframes scrollTick {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* ══ STUDIO / PILLARS ══════════════════════════════════════════════════ */

.pillars {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 40em) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  background: var(--c-bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  align-content: start;
  gap: var(--s-3);
  transition: background var(--d-base) var(--e-out);
}
.pillar:hover { background: var(--c-surface); }

.pillar__num {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-accent);
  letter-spacing: var(--ls-wide);
}
.pillar h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-md);
  letter-spacing: var(--ls-snug);
}
.pillar p { color: var(--c-ink-mute); font-size: var(--t-sm); }

/* ══ CAPABILITIES ══════════════════════════════════════════════════════ */

.cap-grid {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 44em) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }

.cap {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.cap::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.cap:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }
.cap:hover::before { opacity: 1; }

.cap__num {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
}
.cap__title {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-lg);
  letter-spacing: var(--ls-snug);
}
.cap__desc {
  margin-top: var(--s-3);
  color: var(--c-ink-mute);
  font-size: var(--t-sm);
}
.cap__list {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
}
.cap__list li { display: flex; gap: var(--s-3); }
.cap__list li::before { content: "—"; color: var(--c-accent); opacity: 0.6; }

/* ── Toolbelt ────────────────────────────────────────────────────────── */

.toolbelt {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 48em) { .toolbelt { grid-template-columns: 8rem 1fr; align-items: start; } }

.toolbelt__label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.toolbelt__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

/* ══ PLAY / GAME ═══════════════════════════════════════════════════════ */

.play {
  position: relative;
  height: 420vh;              /* scroll runway that drives the flight */
  background: var(--g-bg);
  border-top: 1px solid var(--c-line);
}
.play[data-disabled="true"] { height: auto; }
@media (max-width: 48em) { .play { height: 300vh; } }

.play__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.play[data-disabled="true"] .play__stage { position: relative; height: auto; min-height: 70svh; }

.play__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.play__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(118% 88% at 50% 50%, transparent 44%, rgb(250 250 252 / 0.94) 100%);
}

.play__ui {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(2rem, 5vw, 4rem);
  pointer-events: none;
}
.play[data-disabled="true"] .play__ui { position: relative; padding-block: var(--s-9); }

.play__ui-inner {
  display: grid;
  gap: var(--s-5);
}

.play__head { max-width: 46ch; }

.play__title {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.play__sub {
  margin-top: var(--s-3);
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
}
.play__hint {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
}

.play__result, .play__fallback {
  pointer-events: auto;
  justify-self: start;
  padding: var(--s-5) var(--s-6);
  background: rgb(255 255 255 / 0.86);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  max-width: 24rem;
}
.play__result[hidden], .play__fallback[hidden] { display: none; }

.play__result-rank {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}
.play__result-score {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.play__result-score em { font-size: 0.4em; color: var(--c-ink-faint); letter-spacing: var(--ls-wide); }
.play__result-best {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-ink-mute);
}
.play__fallback p { font-size: var(--t-sm); color: var(--c-ink-soft); }

/* Cursor becomes a reticle over the playfield. */
.play__stage.is-live { cursor: none; }

/* ══ WORK ══════════════════════════════════════════════════════════════ */

.work-grid {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 46em) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .work-card--wide { grid-column: span 2; }
  /* A double-width card would be absurdly tall at the portrait ratio. */
  .work-card--wide .work-card__visual { aspect-ratio: 21 / 9; }
}

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.work-card:hover { border-color: var(--c-line-strong); transform: translateY(-4px); }
.work-card[hidden] { display: none; }

.work-card__visual {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background-color: var(--c-surface-2);
  transition: filter var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.work-card:hover .work-card__visual { transform: scale(1.03); }

/* Procedural placeholder art — swap these rules for real <img> when you
   have final stills. Each variant is a different generated composition. */
.work-card__visual--a {
  background-image:
    repeating-linear-gradient(115deg, rgb(91 70 229 / 0.11) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-115deg, rgb(14 14 18 / 0.04) 0 1px, transparent 1px 38px),
    radial-gradient(76% 96% at 24% 18%, rgb(91 70 229 / 0.07), transparent 66%);
}
.work-card__visual--b {
  background-image:
    conic-gradient(from 208deg at 62% 42%, rgb(91 70 229 / 0.13), transparent 42%, rgb(14 14 18 / 0.035) 72%, transparent),
    repeating-linear-gradient(0deg, rgb(14 14 18 / 0.032) 0 1px, transparent 1px 18px);
}
.work-card__visual--c {
  background-image:
    radial-gradient(circle at 34% 60%, rgb(91 70 229 / 0.42) 0 5%, transparent 5.4%),
    radial-gradient(circle at 34% 60%, transparent 0 15%, rgb(91 70 229 / 0.20) 15% 15.5%, transparent 16%),
    radial-gradient(circle at 34% 60%, transparent 0 26%, rgb(14 14 18 / 0.10) 26% 26.4%, transparent 27%),
    repeating-linear-gradient(90deg, rgb(14 14 18 / 0.03) 0 1px, transparent 1px 40px);
}
.work-card__visual--d {
  background-image:
    repeating-radial-gradient(circle at 50% 52%, rgb(91 70 229 / 0.11) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgb(14 14 18 / 0.03) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgb(14 14 18 / 0.03) 0 1px, transparent 1px 26px);
}
.work-card__visual--e {
  background-image:
    repeating-linear-gradient(75deg, rgb(14 14 18 / 0.035) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-15deg, rgb(91 70 229 / 0.11) 0 1px, transparent 1px 42px),
    radial-gradient(66% 122% at 78% -8%, rgb(91 70 229 / 0.10), transparent 64%);
}
.work-card__visual--f {
  background-image:
    linear-gradient(45deg, rgb(91 70 229 / 0.09) 25%, transparent 25% 75%, rgb(91 70 229 / 0.09) 75%),
    linear-gradient(45deg, rgb(14 14 18 / 0.025) 25%, transparent 25% 75%, rgb(14 14 18 / 0.025) 75%);
  background-size: 88px 88px, 26px 26px;
}

.work-card__body {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  align-content: start;
  gap: var(--s-3);
  flex: 1;
}

.work-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.work-card__meta span:first-child { color: var(--c-accent); }

.work-card__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-lg);
  letter-spacing: var(--ls-snug);
}
.work-card__desc { color: var(--c-ink-mute); font-size: var(--t-sm); }

.work-empty {
  padding: var(--s-8) 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
}
.work-empty[hidden] { display: none; }

/* ══ QUOTES ════════════════════════════════════════════════════════════ */

.quote-grid {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 52em) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }

.quote {
  display: grid;
  align-content: space-between;
  gap: var(--s-6);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-bg-alt);
}
.quote blockquote p {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.45;
  letter-spacing: var(--ls-snug);
}
.quote blockquote p::before { content: "“"; color: var(--c-accent); }
.quote blockquote p::after  { content: "”"; color: var(--c-accent); }
.quote figcaption { display: grid; gap: 2px; font-size: var(--t-xs); }
.quote figcaption strong { font-weight: 500; }
.quote figcaption span { font-family: var(--f-mono); color: var(--c-ink-faint); }

/* ══ CTA / CONTACT ═════════════════════════════════════════════════════ */

.cta { background: var(--c-bg-alt); }

.cta__grid {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 62em) {
  .cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-9); }
}

.cta__title {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.cta__lede { margin-top: var(--s-5); color: var(--c-ink-soft); max-width: 42ch; }

.cta__details {
  margin-top: var(--s-7);
  display: grid;
  gap: var(--s-4);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
}
.cta__details li {
  display: grid;
  gap: 2px;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.cta__details li:last-child { border-bottom: 0; padding-bottom: 0; }
.cta__detail-label {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.cta__details a { transition: color var(--d-fast) linear; }
.cta__details a:hover { color: var(--c-accent-hot); }