/* AFTERLIGHT — global stylesheet
   Dark, spacious, gallery-grade. The restraint IS the brand. */

:root {
  --ground: #0E0E10;
  --panel: #16161A;
  --text: #F2ECE1;
  --accent: #C89B5C;
  --gold: #D4AF37; /* brand gold — the mark and lockup, from the logo master */
  --muted: #8A8578;
  --rule: #2A2A2E;

  --measure: 680px;
  --measure-tight: 640px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-y: clamp(6rem, 14vh, 11rem);
  --nav-h: 68px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: rgba(200, 155, 92, 0.28); }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--panel);
  z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Type scale ---------- */

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.page-title {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  letter-spacing: 0.02em;
}

.page-sub {
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  color: var(--muted);
  font-weight: 400;
  margin: 1rem 0 0;
  letter-spacing: 0;
}

/* Large centered statement lines */
.statement {
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: var(--measure-tight);
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}

.statement--accent { color: var(--accent); }

.lede { font-size: 1.1875rem; color: var(--muted); }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(var(--measure) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }

.section + .section { border-top: 1px solid var(--rule); }

/* Home uses aperture dividers as seams instead of rules */
.home .section + .section { border-top: 0; }

.divider {
  display: flex;
  justify-content: center;
  padding-block: 0.5rem;
}

.divider img { width: 12px; height: 12px; opacity: 0.45; }

/* A full-height, single-thought moment. The pause IS the content. */
.moment {
  min-height: 72svh;
  display: grid;
  place-items: center;
  text-align: center;
}

.prose > * + * { margin-top: 1.65em; }
.prose p { margin: 0; }
.prose strong { font-weight: 600; color: var(--text); }
.prose em { color: var(--text); }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  z-index: 50;
  /* No plate at rest — nothing may overlay the hero mark. The nav
     materialises only once the page has scrolled. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 400ms ease, background 400ms ease,
              backdrop-filter 400ms ease;
}

.nav[data-scrolled="true"] {
  background: rgba(14, 14, 16, 0.72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark img { width: 17px; height: 17px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.125rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 250ms ease;
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--text); }

/* Mobile: collapse the link list, keep wordmark + CTA */
@media (max-width: 720px) {
  .nav__links { display: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ground);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 250ms ease, border-color 250ms ease, opacity 250ms ease;
}

.btn:hover { background: #D8AC6E; border-color: #D8AC6E; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}
.btn--ghost:hover { background: transparent; border-color: var(--muted); }

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  /* extra top clearance: the mark magnifies as it turns in perspective
     and must never pass under the fixed nav */
  padding-block: calc(var(--nav-h) + 4.5rem) 4rem;
}

.hero__mark {
  position: relative;
  display: block;
  width: clamp(88px, 12vw, 120px);
  margin: 0 auto 3.25rem;
}

.hero__mark img { display: block; width: 100%; height: auto; }

/* Specular highlight: a fixed light the mark turns through. The band is
   masked to the aperture silhouette, so it rakes across the bevels as the
   object rotates instead of staying glued to the artwork. */
.hero__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("/assets/img/aperture.svg") center / contain no-repeat;
  mask: url("/assets/img/aperture.svg") center / contain no-repeat;
  background-image: linear-gradient(100deg,
    transparent 34%,
    rgba(255, 246, 214, 0.15) 43%,
    rgba(255, 250, 232, 0.72) 50%,
    rgba(255, 246, 214, 0.15) 57%,
    transparent 66%);
  background-repeat: no-repeat;
  background-size: 320% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  /* absent until the mark moves — the logo is first seen exactly as drawn */
  opacity: 0;
  transition: background-position 5000ms cubic-bezier(0.45, 0, 0.55, 1);
}

.hero__mark.in-motion::after { opacity: 1; }

/* Alternate end-state: the highlight rakes the other way on the next turn */
.hero__mark.sheen-b::after { background-position: 0% 0; }

/* The first words anyone reads */
.hero__headline {
  font-size: clamp(2.125rem, 8vw, 4.25rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  margin: 0;
  /* letter-spacing pushes the block right; pull it back to true center */
  text-indent: 0.22em;
}

/* Gold rule, per the logo master lockup */
.hero__rule {
  width: clamp(110px, 16vw, 170px);
  height: 2px;
  background: var(--gold);
  margin: 2.25rem auto;
}

.hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  line-height: 2;
  color: var(--muted);
  margin: 0;
}

.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.5;
}

/* ---------- Media / figures ---------- */

.figure { margin: 0; }

.figure__frame {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.figure img, .figure video { width: 100%; }

.figure__caption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Center a figure at a width that respects modest source captures */
.figure--contained { max-width: 520px; margin-inline: auto; }
.figure--contained .figure__caption { text-align: center; }

/* Placeholder shown until Jim's real captures land */
.placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200, 155, 92, 0.10), transparent 62%),
    var(--panel);
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
}

.placeholder--portrait { aspect-ratio: 4 / 5; }
.placeholder--square { aspect-ratio: 1 / 1; }
.placeholder--wide { aspect-ratio: 21 / 9; }

/* ---------- Columns ---------- */

.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; gap: 2.75rem; }
}

.col__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.65rem;
}

.col__body { margin: 0; color: var(--muted); }

/* ---------- Hierarchy list (The Idea) ---------- */

.hierarchy { margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.hierarchy__row {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: 1rem 2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}

.hierarchy__term {
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.01em;
}

.hierarchy__def { margin: 0; color: var(--muted); }

@media (max-width: 640px) {
  .hierarchy__row { grid-template-columns: 1fr; gap: 0.3rem; padding-block: 1.15rem; }
}

/* ---------- Pull quote ---------- */

.pullquote {
  margin: 0;
  padding: clamp(2rem, 5vw, 3rem) 0;
  border-block: 1px solid var(--rule);
  text-align: center;
}

.pullquote p {
  margin: 0;
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
  text-wrap: balance;
}

/* ---------- Quiet list ---------- */

.quiet-list { list-style: none; margin: 0; padding: 0; }

.quiet-list li {
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}

.quiet-list li:first-child { border-top: 1px solid var(--rule); }

/* ---------- Beats (Unbox. Hang. Plug in.) ---------- */

.beats { margin: 0; padding: 0; list-style: none; }

.beats li {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--muted);
}

.beats li + li { margin-top: 0.55rem; }

.beats li:last-child { color: var(--text); font-weight: 500; }

/* ---------- Gallery (The Work) ---------- */

.works { display: grid; gap: clamp(4rem, 9vw, 7rem); }

.work__title {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0.75rem 0 0.6rem;
}

.work__meta {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.5rem 0 0;
}

.work__desc { margin: 0.5rem 0 0; color: var(--muted); max-width: 46ch; }

/* State triptych */
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

/* Uniform tiles regardless of small differences in capture crops */
.states .figure__frame { aspect-ratio: 1 / 1; }
.states .figure__frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- The demonstration ----------
   A stack of authored states, cross-fading slowly. No caption.
   The website behaves like the product. */

.performance {
  position: relative;
  overflow: hidden;
}

.performance img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.performance img:first-child { position: relative; }

/* Clickable performance: visitor advances the state; 3s dissolve.
   (Auto-crossfade retired — the performance is never simulated with fades;
   real video is the only motion. The touch viewer on /work remains: it is
   visitor-driven discovery between real captured states, not a simulation
   of the performance.) */
.performance--touch { cursor: pointer; }
.performance--touch img { transition: opacity 3000ms ease; }
.performance--touch img.is-current { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .performance--touch img { transition: none; }
}

.performance__hint {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.performance__states {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.performance__states span { transition: color 800ms ease; }
.performance__states span.is-current { color: var(--gold); }

@media (max-width: 720px) {
  .states { grid-template-columns: 1fr; gap: 0.75rem; }
}

.state { margin: 0; }

.state__label {
  margin-top: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- The journey (Studio) ----------
   No dates. No milestones. Just the path. */

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.journey li {
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.journey li + li::before {
  content: "";
  display: block;
  width: 1px;
  height: 2.5rem;
  background: var(--rule);
  margin: 1rem auto;
}

.journey li:last-child { color: var(--gold); }

/* ---------- Email capture ---------- */

.capture { text-align: center; }

.capture__form {
  display: flex;
  gap: 0.625rem;
  max-width: 30rem;
  margin: 2rem auto 0;
}

.capture__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.95rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color 250ms ease;
}

.capture__input::placeholder { color: var(--muted); }
.capture__input:focus { border-color: var(--muted); outline: none; }
.capture__input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.capture__note {
  margin: 1.15rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.capture__status {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  min-height: 1.5em;
}

.capture__status[data-state="ok"] { color: var(--accent); }
.capture__status[data-state="error"] { color: #D98A7B; }

@media (max-width: 560px) {
  .capture__form { flex-direction: column; }
  .capture__form .btn { padding-block: 0.85rem; }
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 7vw, 4.5rem);
  color: var(--muted);
  font-size: 0.875rem;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.footer__mark {
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--text);
  font-size: 0.9375rem;
}

.footer__tagline {
  color: var(--gold);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 0.35rem;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__links a { color: var(--muted); text-decoration: none; transition: color 250ms ease; }
.footer__links a:hover { color: var(--text); }

.footer__legal {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: 0.8125rem;
}

.footer__legal p { margin: 0; }

/* ---------- v1.1 Homepage art direction ----------
   Editorial, material, cinematic. Scoped to .home — no other page changes. */

/* Film grain over the whole page: material depth, and it lets the real,
   modest-resolution captures read as cinema instead of upscale. */
.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035; /* thinner veil — texture must never sit between viewer and work */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 160px 160px;
}

/* A breath of warmth behind the hero lockup */
.home .hero {
  background: radial-gradient(58% 42% at 50% 44%, rgba(200, 155, 92, 0.055), transparent 72%);
}

/* Full-bleed performance band — the emotional centerpiece.
   A full-height stage: the visitor arrives in a dark room where one work
   hangs under a single pool of light. */
.perfband {
  position: relative;
  height: min(96svh, 1000px);
  background: var(--panel);
  overflow: hidden;
}

/* A held breath of darkness between the hero and the stage —
   the pause before the reveal */
.home .perfband { margin-top: clamp(2.5rem, 9vh, 7rem); }

/* The video centerpiece: invisible until real footage actually plays, then
   it owns the band. Until then, a clearly labeled motionless placeholder. */
.perfband__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2200ms ease; /* the film arrives like light coming up */
  filter: saturate(0.94) contrast(1.04);
}

/* Placeholder: one real still at native resolution, hung in a pool of
   museum light — never stretched beyond its source quality. No simulated
   transformation. The staging is permanent; only the stillness is temporary. */
.perfband__still {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter) clamp(5rem, 12vh, 7.5rem);
  /* one warm spotlight falling on the wall behind the work */
  background: radial-gradient(min(46rem, 85vw) 60% at 50% 44%,
              rgba(200, 155, 92, 0.085),
              rgba(200, 155, 92, 0.02) 58%,
              transparent 78%);
}

.perfband__still img {
  max-width: min(432px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 3px;
  filter: saturate(0.94) contrast(1.04);
  box-shadow:
    0 44px 120px rgba(0, 0, 0, 0.72),
    0 12px 36px rgba(0, 0, 0, 0.5);
}

.perfband__note { color: var(--muted); opacity: 0.55; }

.perfband.has-video .perfband__video { opacity: 1; }
.perfband.has-video .perfband__still,
.perfband.has-video .perfband__note { display: none; }


/* Ground the band into the page: fade to black top and bottom, soft vignette */
.perfband__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--ground) 0%, transparent 16%, transparent 80%, var(--ground) 100%),
    radial-gradient(130% 95% at 50% 50%, transparent 52%, rgba(14, 14, 16, 0.5) 100%);
}

.perfband__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.75rem;
}

/* Figure labels — museum catalog plates */
.figlabel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.figlabel > span:first-child { color: var(--gold); }

.figlabel--rule::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  flex: none;
}

/* Editorial statement blocks — asymmetric, left-set type, fine gold rule */
.edit { max-width: 620px; }
.edit--right { margin-left: auto; }
.edit .figlabel { margin-bottom: 1.75rem; }
.edit .statement {
  text-align: left;
  margin: 0;
  max-width: none;
}

/* ----- v1.2 editorial rhythm — no two sections compose the same way ----- */

/* Vertical rhythm variants: sections breathe at different depths */
.home .section--vast { padding-block: clamp(8rem, 18vh, 14rem); }
.home .section--tight { padding-block: clamp(3.5rem, 8vh, 6rem); }

/* Plate spread: label column beside the statement, like a board panel */
.spread {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 620px);
  gap: 2rem 4.5rem;
  align-items: start;
}

.spread__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

/* Vertical gold hairline dropping from the label */
.spread__label::after {
  content: "";
  width: 1px;
  height: clamp(3rem, 8vh, 5.5rem);
  background: var(--gold);
  opacity: 0.4;
  margin-left: 1px;
}

.spread .statement { text-align: left; margin: 0; max-width: none; }

@media (max-width: 720px) {
  .spread { grid-template-columns: 1fr; gap: 1.5rem; }
  .spread__label { flex-direction: row; align-items: center; }
  .spread__label::after { width: 2.5rem; height: 1px; margin: 0; }
}

/* Rule-to-text: a hairline reaches across the page to meet the block */
.claimrow {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: 3.5rem;
  align-items: start;
}

.claimrow__rule {
  height: 1px;
  margin-top: 2.6rem;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45) 40%, rgba(212, 175, 55, 0.45));
}

@media (max-width: 720px) {
  .claimrow { grid-template-columns: 1fr; gap: 0; }
  .claimrow__rule { display: none; }
}

/* More air before the final ask — the invitation deserves its own silence */
.home #join { margin-top: clamp(2rem, 8vh, 6rem); }

/* Off-axis catalog: the plate index sits right of center */
.catalog--offset { max-width: 860px; margin-left: auto; }
.catalog--offset > .figlabel { margin-bottom: 2rem; }

/* Catalog rows — the three practices as numbered plates, not a feature grid */
.catalog { border-top: 1px solid var(--rule); }

.catalog__row {
  display: grid;
  grid-template-columns: 5rem 15rem 1fr;
  gap: 0.75rem 2.5rem;
  align-items: baseline;
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--rule);
}

.catalog__num {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.catalog__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.catalog__body {
  margin: 0;
  color: var(--muted);
  max-width: 52ch;
}

@media (max-width: 780px) {
  .catalog__row { grid-template-columns: 1fr; gap: 0.4rem; padding-block: 1.75rem; }
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible { opacity: 1; transform: none; }

/* No JS, or reduced motion: everything is simply visible. */
.no-js .reveal,
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}