/* ==================================================================
   IRRELIN — irrelin.com
   Editorial brand site. Mobile-first, no framework, no build step.

   Contents
     01  Tokens
     02  Reset & base
     03  Typographic primitives
     04  Motion system (reveals)
     05  Header & menu
     06  Hero
     07  Manifesto
     08  Collection 001
     09  Objects
     10  World index
     11  Statement
     13  Footer
     14  Counter
     15  Reduced motion & print
   ================================================================== */

/* ---------------------------------------------------------------- *
   01  TOKENS
 * ---------------------------------------------------------------- */
:root {
  /* Ground */
  --ink:       #0a0a0a;
  --graphite:  #131312;
  --stone:     #1c1c1a;

  /* Light */
  --paper:     #eae6de;
  --bone:      #c9c4ba;
  --ash:       #8a877f;
  --metal:     #9c9a93;

  /* One accent, used sparingly */
  --signal:    #b5462b;

  --line:      rgba(234, 230, 222, 0.14);
  --line-soft: rgba(234, 230, 222, 0.08);

  /* Type */
  --grotesk: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif:   'Instrument Serif', 'Times New Roman', Times, serif;

  /* Sized so the headline's longest line ("WHAT COMES") never wraps.
     Below 64em the headline runs the full width, so it can take a much
     larger share of the viewport than it can once the image sits
     beside it. The desktop value is redefined at that breakpoint. */
  --t-display: clamp(2.35rem, 12vw, 6.5rem);
  --t-xl:      clamp(2.4rem, 9vw, 8rem);
  --t-lg:      clamp(1.75rem, 5vw, 4.25rem);
  --t-md:      clamp(1.125rem, 1.6vw, 1.5rem);
  --t-body:    clamp(1rem, 0.95vw + 0.6rem, 1.1875rem);
  --t-micro:   clamp(0.625rem, 0.35vw + 0.52rem, 0.75rem);

  /* Space */
  --margin:  clamp(1.25rem, 4.5vw, 4.5rem);
  --gap:     clamp(0.75rem, 1.6vw, 1.75rem);
  --section: clamp(5.5rem, 8vw + 4rem, 13rem);
  --head-h:  clamp(3.5rem, 7vh, 4.75rem);

  /* Motion */
  --ease:      cubic-bezier(0.22, 0.68, 0.16, 1);
  --ease-soft: cubic-bezier(0.4, 0.14, 0.15, 1);
}

/* ---------------------------------------------------------------- *
   02  RESET & BASE
 * ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--grotesk);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--signal); color: var(--paper); }

:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.9rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

.section {
  padding: var(--section) var(--margin);
  position: relative;
}

/* ---------------------------------------------------------------- *
   03  TYPOGRAPHIC PRIMITIVES
 * ---------------------------------------------------------------- */
.micro {
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  font-feature-settings: 'tnum' 1;
}

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  margin-bottom: clamp(2rem, 5vh, 4rem);
  color: var(--bone);
}
.eyebrow span { color: var(--signal); }

/* Display headings share one optical treatment. */
.hero__title,
.collection__name,
.objects__title,
.world__title,
.statement__text,
.index__term,
.foot__word {
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ---------------------------------------------------------------- *
   04  MOTION SYSTEM
   Reveals only apply when JS is present, so a no-JS visit renders
   the full page immediately.
 * ---------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.9s var(--ease) var(--d, 0ms),
    transform 1.1s var(--ease) var(--d, 0ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Media: a slow wipe with the image settling out of a gentle scale. */
.js [data-reveal='media'] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s var(--ease) var(--d, 0ms);
}
.js [data-reveal='media'].is-in { clip-path: inset(0 0 0 0); }

.js [data-reveal='media'] img {
  transform: scale(1.1);
  transition: transform 2s var(--ease) var(--d, 0ms);
}
.js [data-reveal='media'].is-in img { transform: scale(1); }

/* Headlines: top-down wipe, no transform, so nothing shifts. */
.js [data-reveal='line'] {
  opacity: 1;
  transform: none;
  clip-path: inset(-20% 0 105% 0);
  transition: clip-path 1.2s var(--ease) var(--d, 0ms);
}
.js [data-reveal='line'].is-in { clip-path: inset(-20% 0 -20% 0); }

/* Word-by-word: JS wraps each word; the mask lives on the wrapper. */
.js [data-reveal='words'] { opacity: 1; transform: none; }
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  clip-path: inset(-0.15em 0 -0.15em 0);
}
.w > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(102%);
  transition: transform 1s var(--ease) var(--d, 0ms);
}
.js [data-reveal='words'].is-in .w > i { transform: none; }

/* ---------------------------------------------------------------- *
   05  HEADER & MENU
 * ---------------------------------------------------------------- */
.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--head-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease),
              backdrop-filter 0.6s var(--ease);
}


.head__bar {
  width: 100%;
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--margin);
}

.head__word {
  display: block;
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  /* Trailing letter-space would otherwise offset the optical left edge. */
  margin-right: -0.42em;
}

.nav { display: none; }
.nav__list { display: flex; gap: clamp(1.5rem, 2.8vw, 3.25rem); }
.nav a {
  position: relative;
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 0.35rem 0;
  transition: color 0.4s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease);
}
.nav a:hover { color: var(--paper); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__idx {
  color: var(--ash);
  font-size: 0.72em;
  vertical-align: 0.55em;
  margin-right: 0.5em;
}


/* ---------------------------------------------------------------- *
   06  HERO
 * ---------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--head-h) + clamp(1.25rem, 4vh, 2.5rem))
           var(--margin)
           clamp(1.5rem, 4vh, 2.5rem);
}

.hero__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
}

.hero__media {
  grid-column: 1 / -1;
  overflow: hidden;
  background: var(--graphite);
}
.hero__media img {
  width: 100%;
  height: min(48vh, 62vw);
  object-fit: cover;
  will-change: transform;
}

.hero__eyebrow {
  grid-column: 1 / -1;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  color: var(--bone);
}
.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75em;
  height: 1px;
  margin-right: 0.9em;
  vertical-align: 0.3em;
  background: var(--signal);
}

.hero__title {
  grid-column: 1 / -1;
  font-size: var(--t-display);
  margin-top: clamp(0.6rem, 1.5vh, 1rem);
}
.hero__line { display: block; }
.hero__line--alt {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  /* The serif sits optically small against the grotesk at the same size. */
  font-size: 1.12em;
  margin-left: 0.06em;
}

.hero__lede {
  grid-column: 1 / -1;
  max-width: 34ch;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  color: var(--bone);
  font-size: var(--t-md);
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.hero__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem var(--gap);
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.hero__meta dt { color: var(--ash); }
.hero__meta dd { margin: 0; color: var(--bone); }

.hero__scroll {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  color: var(--ash);
  transition: color 0.4s var(--ease);
}
.hero__scroll:hover { color: var(--paper); }
.hero__rule {
  display: block;
  width: clamp(3rem, 8vw, 6rem);
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: draw 3.2s var(--ease-soft) infinite;
}
@keyframes draw {
  0%, 100% { transform: scaleX(0.35); opacity: 0.5; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* ---------------------------------------------------------------- *
   07  MANIFESTO
 * ---------------------------------------------------------------- */
.manifesto__statement {
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.manifesto__statement em { color: var(--bone); }

.manifesto__notes {
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
  margin-top: clamp(3rem, 8vh, 6rem);
  color: var(--ash);
  max-width: 62ch;
}
.manifesto__notes p { text-wrap: pretty; }

/* ---------------------------------------------------------------- *
   08  COLLECTION 001
 * ---------------------------------------------------------------- */
.collection { border-top: 1px solid var(--line-soft); }

.collection__title { display: block; }
.collection__no {
  display: block;
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
}
.collection__name {
  display: block;
  font-size: var(--t-xl);
}

.collection__lede {
  max-width: 40ch;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  color: var(--bone);
  font-size: var(--t-md);
  line-height: 1.4;
  text-wrap: pretty;
}

.collection__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.collection__meta dt { color: var(--ash); margin-bottom: 0.35rem; }
.collection__meta dd { margin: 0; color: var(--bone); }

/* ---- Campaign: the one frame that runs edge to edge ---- */
.campaign {
  margin: clamp(3rem, 8vh, 6rem) calc(var(--margin) * -1) 0;
  overflow: hidden;
  background: var(--graphite);
}
.campaign img {
  width: 100%;
  height: min(68vh, 40rem);
  object-fit: cover;
}
.campaign__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  padding: 0.9rem var(--margin) 0;
}
.campaign__loc { color: var(--ash); }

.pieces {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: clamp(3rem, 9vh, 8rem) var(--gap);
  margin-top: clamp(4rem, 12vh, 9rem);
}

.piece { grid-column: 1 / -1; }
.piece__frame {
  overflow: hidden;
  background: var(--graphite);
}
.piece__frame img {
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--ease);
}
.piece:hover .piece__frame img { transform: scale(1.03); }

.piece__cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
/* Placed explicitly: left to auto-placement the edition number is
   pushed onto a third row instead of sitting beside the name. */
.piece__no   { grid-column: 1; grid-row: 1; color: var(--signal); }
.piece__name { grid-column: 2; grid-row: 1; color: var(--paper); letter-spacing: 0.1em; }
.piece__spec { grid-column: 2; grid-row: 2; letter-spacing: 0.08em; }


/* ---------------------------------------------------------------- *
   09  OBJECTS
 * ---------------------------------------------------------------- */
.objects { border-top: 1px solid var(--line-soft); }

.objects__title { font-size: var(--t-lg); max-width: 14ch; }
.objects__lede {
  max-width: 38ch;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  color: var(--ash);
  text-wrap: pretty;
}

.rail {
  margin: clamp(3rem, 8vh, 6rem) calc(var(--margin) * -1) 0;
  padding: 0 var(--margin);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -4px; }

.rail__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  padding-bottom: 0.25rem;
}

.object {
  flex: 0 0 clamp(13rem, 62vw, 24rem);
  scroll-snap-align: start;
}
.object__frame {
  overflow: hidden;
  background: var(--graphite);
  aspect-ratio: 4 / 5;
}
.object__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.object:hover .object__frame img { transform: scale(1.04); }

.object figcaption {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.object__no { color: var(--signal); }
.object__name { color: var(--paper); letter-spacing: 0.1em; }
.object__spec { letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- *
   10  WORLD INDEX
 * ---------------------------------------------------------------- */
.world { border-top: 1px solid var(--line-soft); }

.world__title { font-size: var(--t-lg); }
.world__lede {
  max-width: 40ch;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  color: var(--ash);
  text-wrap: pretty;
}

.index { margin-top: clamp(3rem, 8vh, 6rem); }

.index__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: clamp(1.1rem, 3vh, 2.25rem) 0;
  border-top: 1px solid var(--line);
}
.index__row:last-child { border-bottom: 1px solid var(--line); }

.index__no { color: var(--signal); }
.index__term {
  font-size: clamp(1.75rem, 8vw, 3rem);
  transition: color 0.5s var(--ease), transform 0.7s var(--ease);
}
.index__desc {
  grid-column: 2;
  color: var(--ash);
  font-size: var(--t-body);
  letter-spacing: 0;
  text-transform: none;
}
.index__img {
  grid-column: 2;
  width: min(48%, 12rem);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-top: 0.75rem;
  background: var(--graphite);
}

/* Floating preview layer, built by script.js on fine-pointer devices. */
.index__layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.index__layer .index__img {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(11rem, 15vw, 16rem);
  margin: 0;
  opacity: 0;
  transform: translate3d(var(--x, 50vw), var(--y, 50vh), 0) translate(-50%, -50%) scale(0.94);
  transition: opacity 0.45s var(--ease), transform 0.9s var(--ease-soft);
}
.index__layer .index__img.is-on { opacity: 1; transform: translate3d(var(--x, 50vw), var(--y, 50vh), 0) translate(-50%, -50%) scale(1); }

/* ---------------------------------------------------------------- *
   12  STATEMENT
 * ---------------------------------------------------------------- */
.statement {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(100svh, 52rem);
  padding: var(--section) var(--margin);
  background: #000;
  overflow: hidden;
}
.statement::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/assets/images/statement.svg') center / cover no-repeat;
  opacity: 0.55;
}
.statement::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.75) 0%, rgba(10, 10, 10, 0.4) 45%, rgba(10, 10, 10, 0.9) 100%);
}
.statement__inner { width: 100%; }
.statement__text {
  font-size: var(--t-lg);
  max-width: 18ch;
}
.statement__text em {
  display: block;
  margin-top: 0.15em;
  color: var(--bone);
  font-size: 1.08em;
}

/* ---------------------------------------------------------------- *
   13  FOOTER
 * ---------------------------------------------------------------- */
.foot {
  padding: clamp(4rem, 10vh, 8rem) var(--margin) clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--line-soft);
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vh, 4.5rem) var(--gap);
}

.foot__mark { grid-column: 1 / -1; }
.foot__word {
  font-size: clamp(3rem, 17vw, 13rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.foot__place { margin-top: clamp(1rem, 3vh, 1.75rem); color: var(--ash); }

.foot__grid > *:nth-child(2) { grid-column: 1 / 7; }
.foot__grid > *:nth-child(3) { grid-column: 7 / -1; }
.foot__grid > *:nth-child(4) { grid-column: 1 / -1; }

.foot__label { color: var(--ash); margin-bottom: 1.1rem; }
.foot__list { display: grid; gap: 0.6rem; }
.foot__list a {
  color: var(--bone);
  font-size: var(--t-body);
  transition: color 0.4s var(--ease);
}
.foot__list a:hover { color: var(--paper); }

.foot__note { max-width: 34ch; color: var(--ash); }
.foot__mail {
  display: inline-block;
  margin-top: 1rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.4s var(--ease);
}
.foot__mail:hover { border-bottom-color: var(--signal); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  margin-top: clamp(3rem, 8vh, 6rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.foot__base p { margin: 0; }
.foot__coords { display: none; }
.foot__base a { transition: color 0.4s var(--ease); }
.foot__base a:hover { color: var(--paper); }

/* ---------------------------------------------------------------- *
   14  COUNTER
 * ---------------------------------------------------------------- */
.counter {
  display: none;
  position: fixed;
  right: var(--margin);
  bottom: clamp(1.25rem, 3vh, 2rem);
  z-index: 90;
  gap: 0.4em;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.counter__sep { margin: 0 0.35em; opacity: 0.5; }

/* The footer has its own "back to top" in the same corner. */
.counter.is-hidden { opacity: 0; }

/* ================================================================== *
   BREAKPOINTS
 * ================================================================== */

/* --- 48em / 768px — tablet ---------------------------------------- */
@media (min-width: 48em) {
  :root {
    /* Tablets stack image over headline, so both are bounded by height. */
    --t-display: clamp(2.75rem, min(10vw, 13vh), 7rem);
  }

  /* Only in play between 48em and 64em; above that the frame is sized
     by the desktop rule. Kept modest so the hero seats in one screen
     once the strip, headline, labels and actions are stacked. */
  .hero__media img { height: min(38vh, 32vw); }
  .hero__eyebrow { margin-top: clamp(0.75rem, 2vh, 1.25rem); }

  .hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .manifesto__statement { grid-column: 1 / 11; }
  .manifesto__notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    margin-left: auto;
    width: min(100%, 58ch);
  }

  /* Asymmetric collection grid. */
  .piece--a { grid-column: 1 / 7; }
  .piece--b { grid-column: 8 / -1; margin-top: clamp(3rem, 14vh, 11rem); }
  .piece--c { grid-column: 1 / 8; }
  .piece--d { grid-column: 9 / -1; margin-top: clamp(2rem, 8vh, 6rem); }
  .piece--e { grid-column: 4 / 11; }

  .object { flex: 0 0 clamp(15rem, 30vw, 22rem); }

  .index__row {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 20rem);
    align-items: center;
  }
  .index__desc { grid-column: 3; text-align: right; }
  .index__img { display: none; }

  .collection__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .statement__text { font-size: var(--t-xl); }

  .foot__grid > *:nth-child(2) { grid-column: 1 / 4; }
  .foot__grid > *:nth-child(3) { grid-column: 4 / 7; }
  .foot__grid > *:nth-child(4) { grid-column: 8 / -1; }

  .foot__coords { display: block; }
  .counter { display: flex; }
}

/* --- 64em / 1024px — desktop -------------------------------------- */
@media (min-width: 64em) {
  :root {
    /* The headline now shares the row with the image, so it is bounded
       by height as well as width to keep the hero inside one screen. */
    --t-display: clamp(3rem, min(9.2vw, 15.5vh), 12rem);
  }

  .nav { display: block; }
  .burger { display: none; }

  /* Hero becomes a single art-directed composition: type crossing image. */
  .hero__grid {
    grid-template-rows: auto auto auto auto;
    align-items: end;
  }
  .hero__eyebrow {
    grid-column: 1 / 10;
    grid-row: 1;
    margin-top: 0;
    align-self: end;
  }
  .hero__media {
    grid-column: 8 / -1;
    grid-row: 1 / 5;
    align-self: stretch;
    display: flex;
    /* A definite height. Without it the image falls back to its intrinsic
       ratio against an indefinite parent and drives the hero past the
       viewport on wide screens. */
    height: min(70vh, 44rem);
  }
  .hero__media img {
    width: 100%;
    height: 100%;
  }
  .hero__title {
    /* Runs two columns past the image so the headline crosses it. */
    grid-column: 1 / 10;
    grid-row: 2;
    position: relative;
    z-index: 2;
    margin-top: 0;
    align-self: end;
  }
  .hero__lede {
    grid-column: 1 / 5;
    grid-row: 3;
    margin-top: clamp(2rem, 5vh, 3.5rem);
  }
  .hero__meta {
    grid-column: 5 / 8;
    grid-row: 3;
    align-self: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
  .hero__scroll {
    grid-column: 1 / 5;
    grid-row: 4;
    margin-top: clamp(1.75rem, 4vh, 2.75rem);
  }

  .manifesto__statement { max-width: 22ch; font-size: clamp(2.75rem, 5.2vw, 5.25rem); }
  .manifesto__notes {
    width: min(52ch, 100%);
    gap: var(--gap);
    column-gap: clamp(2rem, 4vw, 4rem);
  }

  .objects__title,
  .world__title { font-size: clamp(2.75rem, 5.5vw, 5.5rem); }

  .index__term { font-size: clamp(2.5rem, 5.5vw, 5rem); }
  .index__row:hover .index__term { transform: translateX(clamp(0.5rem, 1.2vw, 1.25rem)); }
  .index__row:hover .index__desc { color: var(--bone); }

  .statement__text { max-width: 16ch; }
}

/* --- 90em / 1440px ------------------------------------------------ */
@media (min-width: 90em) {
  /* Narrower frame on wide screens keeps the hero image portrait. */
  .hero__media { grid-column: 9 / -1; }
  .hero__lede { max-width: 30ch; }
  .pieces { gap: clamp(5rem, 12vh, 10rem) var(--gap); }
}

/* --- Phones -------------------------------------------------------- */
/* The strip and the hero actions both cost vertical room; take it back
   from the image and the gaps rather than from the type. */
@media (max-width: 47.99em) {
  .hero__media img { height: min(34vh, 44vw); }
  .hero__eyebrow { margin-top: clamp(0.7rem, 1.8vh, 1rem); }
  .hero__title { margin-top: clamp(0.35rem, 1vh, 0.6rem); }
  .hero__lede { margin-top: clamp(1.125rem, 3vh, 1.75rem); }
  .hero__meta {
    margin-top: clamp(1.25rem, 3vh, 1.75rem);
    gap: 0.6rem var(--gap);
  }
  .hero__scroll { margin-top: clamp(1.125rem, 3vh, 1.75rem); }
}

/* --- Short viewports ---------------------------------------------- */
/* Landscape phones and tablets, and legacy 568px-tall screens: the
   stacked hero gives its room to the headline and labels, not the image. */
@media (max-width: 63.99em) and (max-height: 820px) {
  .hero__media img { height: min(32vh, 42vw); }
  /* One clear action beats two when there is barely a screen to work with. */
  .hero__scroll { display: none; }
  .hero__lede,
  .hero__meta { margin-top: clamp(0.875rem, 2.5vh, 1.5rem); }
  .hero__scroll { margin-top: clamp(1rem, 2.5vh, 1.5rem); }
}

/* ---------------------------------------------------------------- *
   14b  ERROR PAGE (404.html)
 * ---------------------------------------------------------------- */
.error {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.error__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--head-h) + 4rem) var(--margin) 4rem;
}
.error__title {
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.error__title em { color: var(--bone); }
.error__note {
  max-width: 34ch;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  color: var(--ash);
}
.error__back {
  display: inline-block;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: border-color 0.4s var(--ease);
}
.error__back:hover { border-bottom-color: var(--signal); }
.error__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding: 1.25rem var(--margin);
  border-top: 1px solid var(--line);
}
.error__foot p { margin: 0; }

/* ---------------------------------------------------------------- *
   15  REDUCED MOTION & PRINT
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal],
  .js [data-reveal='media'],
  .js [data-reveal='line'] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .js [data-reveal] img { transform: none !important; }
  .w > i { transform: none !important; }

  .index__layer { display: none; }
  .hero__rule { animation: none; transform: scaleX(1); }
}

@media print {
  .head, .menu, .counter, .hero__scroll, .index__layer { display: none !important; }
  body { background: #fff; color: #000; }
  .statement::before, .statement::after { display: none; }
}