/* ============================================================
   Denormalized™ — Article page.
   Standalone: tokens.css + this file only (no Webflow css), so the
   scroll choreography runs against a layout we fully control.
   Figma: "Article page" 139:5482 @ 1440. Numbers below are the
   design's, expressed fluidly against that 1440 reference.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--dn-bg);
  color: var(--dn-fg);
  font-family: var(--dn-font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--dn-fg); color: var(--dn-bg); }

img { display: block; max-width: 100%; }

p { margin: 0; }

:root {
  /* Page frame — 32px at the 1440 reference. */
  --ar-gutter: clamp(1rem, 2.222vw, 2rem);

  /* Type — the three styles Figma names, plus the display headline. */
  --ar-text: 14px;                                        /* Body */
  --ar-copy: clamp(1rem, 1.25vw, 1.125rem);               /* 18px article copy */
  --ar-h2: clamp(1.75rem, 2.917vw, 2.625rem);             /* H3 42 */
  --ar-h1: min(9.722vw, 15.5vh);                          /* 140 @1440, height-capped */
  --ar-h1-max: 8.75rem;
  --ar-footer-lg: clamp(2.25rem, 5vw, 4.5rem);            /* Title 72 */

  /* Sleeve / record geometry. The sleeve is 492 wide at 1440 (34.17vw);
     capped against viewport height so the rest composition — record
     above, sleeve below — always fits on screen. */
  /* 492 wide at the 1440 reference. The height cap is tighter than the design's
     because the opening now has to stack four things in one viewport — record,
     cover, band, thumbnail — with the cover always above the band. */
  --ar-sleeve: min(34.17vw, 36vh);
  --ar-mini: clamp(6rem, 11.18vw, 10.0625rem);            /* 161 @1440 */

  /* Article measure — 682 wide, centred, at 1440. */
  --ar-measure: min(682px, 90vw);
}

/* ============================================================
   Nav
   ============================================================ */

.ar-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 23px var(--ar-gutter) 18px;
  font-size: var(--ar-text);
  line-height: 1.3;
  pointer-events: none;
}
.ar-nav > * { pointer-events: auto; position: relative; }

/* Retreats on the way down, comes back the moment you scroll up. */
.ar-nav {
  transition: transform var(--dn-dur-base) var(--dn-ease-out);
  will-change: transform;
}
.ar-nav.is-hidden { transform: translateY(-100%); }

/* The veil overshoots the nav box, so translating the nav by its own height
   leaves the gradient's tail on screen — a band of blur with nothing in it.
   It fades out as the nav retreats. Placed after the is-plated rule and
   carrying both classes so it wins outright. */
.ar-nav.is-plated.is-hidden .ar-nav__veil,
.ar-nav.is-hidden .ar-nav__veil {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dn-dur-base) var(--dn-ease-out),
              visibility 0s linear var(--dn-dur-base);
}

/* Over the opening the nav floats on white and needs nothing behind it. Once
   the article is running underneath, body copy would otherwise track straight
   through the wordmark — so it gets a veil: a white gradient for legibility
   plus a progressive blur, rather than a hard plate with a visible bottom edge.
   Sits at z -1 so it's behind the nav's own content but still over the page. */
.ar-nav__veil {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  /* Overshoots the nav box so the fade has somewhere to finish. */
  height: 175%;
  opacity: 0;
  /* Four stacked backdrop-filters are not free, and over the opening the veil
     is never wanted — visibility takes them out of compositing entirely, and
     is deferred to the end of the fade so it doesn't cut the transition. */
  visibility: hidden;
  transition: opacity var(--dn-dur-base) var(--dn-ease-out),
              visibility 0s linear var(--dn-dur-base);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(255, 255, 255, 0.45) 68%,
    rgba(255, 255, 255, 0) 100%);
}
.ar-nav.is-plated .ar-nav__veil {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dn-dur-base) var(--dn-ease-out), visibility 0s;
}

.ar-nav__veil span {
  position: absolute;
  inset: 0;
}
/* Each band is masked shorter than the one before it and blurs what the
   previous layer already blurred, so the radius compounds toward the top. */
.ar-nav__veil span:nth-child(1) {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.ar-nav__veil span:nth-child(2) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 72%);
}
.ar-nav__veil span:nth-child(3) {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 24%, transparent 50%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 24%, transparent 50%);
}
.ar-nav__veil span:nth-child(4) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 28%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 28%);
}

/* No backdrop-filter (older Firefox, and anything with it disabled): lean on
   the gradient alone, opaque enough to keep the nav legible on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ar-nav__veil {
    background: linear-gradient(
      to bottom,
      var(--dn-bg) 0%,
      var(--dn-bg) 55%,
      rgba(255, 255, 255, 0.72) 78%,
      rgba(255, 255, 255, 0) 100%);
  }
}

/* Left menu. Each row is its own grid so the bracketed marks line up in a
   second column at the Figma's 173px, without the labels and the marks having
   to be separate lists. */
.ar-nav__menu { display: flex; flex-direction: column; }
.ar-nav__menu a {
  display: grid;
  grid-template-columns: 173px max-content;
  /* Hug the text: the menu sits in a 1fr grid column, so a stretched link
     would carry a hit area hundreds of px wider than anything visible. */
  width: max-content;
  font-weight: 500;
  line-height: 0.92;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dn-dur-fast) var(--dn-ease-out);
}
.ar-nav__menu a:hover { opacity: 0.5; }
/* SF-symbol category marks (tuningfork / hat), inline so they sit inside the parens */
.ar-nav__sf { display: inline-block; height: 0.82em; width: auto; vertical-align: -0.1em; }

.ar-nav__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: end;
  font-weight: 500;
  line-height: 0.92;
  text-transform: uppercase;
}
.ar-nav__contact p { opacity: 0.4; }
.ar-nav__contact a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dn-dur-fast) var(--dn-ease-out);
}
.ar-nav__contact a:hover { opacity: 0.5; }
.ar-nav__arrow { width: 7.644px; height: 7.644px; }

.ar-nav__logo { width: 156px; height: 41px; justify-self: center; }
.ar-nav__logo img { width: 156px; height: 41px; }

/* ============================================================
   Opening — sticky stage + scroll runway
   ============================================================ */

/* Nothing here is pinned. The page scrolls at one speed; the record and the
   sleeve are the only animated things, and they're fixed layers riding over
   the top of it. This section is just the hero's scroll runway. */
.ar-opening {
  position: relative;
  height: 160svh;
}

/* ---- Scroll readout (?tune only) --------------------------------- */
.ar-hud {
  position: fixed;
  left: var(--ar-gutter);
  bottom: var(--ar-gutter);
  z-index: 200;
  padding: 10px 12px;
  border: 1px solid var(--dn-line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
}
.ar-hud b { font-weight: 600; }
.ar-hud .is-on { color: #de4e27; }
.ar-hud .is-off { color: #bbb; }

/* Exactly one screen, composition centred in it. */
.ar-stage {
  position: relative;
  z-index: 10;
  height: 100svh;
  display: grid;
  place-items: center;
}

/* Reveal host requirements from the animate-text spec's `stage` block. Purely
   what the effect needs to run — no typography or colour comes from it. */
.ar-reveal {
  display: inline-block;
  transform-style: preserve-3d;
}
.ar-title.ar-reveal { display: block; }
.ar-word {
  display: inline-block;
  white-space: pre;
  backface-visibility: hidden;
  transform-origin: 50% 55%;
  will-change: opacity;
}

/* The masthead group — episode line + headline — centred as one block in the
   full-height stage. */
.ar-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vh, 2.75rem);
  width: min(1089px, 92vw);
  padding: 0 var(--ar-gutter);
  text-align: center;
}

.ar-ep {
  font-size: var(--ar-text);
  line-height: 1.3;
}

.ar-title {
  margin: 0;
  width: 100%;
  font-size: min(var(--ar-h1), var(--ar-h1-max));
  font-weight: 500;
  line-height: 0.76;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  color: #2e2e2e;
  text-wrap: balance;
}

/* Rides the stage's centreline at the page gutters, clear of the 1089-wide
   headline — the Figma relationship, expressed against a centred composition. */
.ar-byline {
  position: absolute;
  left: var(--ar-gutter);
  right: var(--ar-gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  font-size: var(--ar-text);
  line-height: 1.3;
}

/* ============================================================
   The record + its sleeve.
   Both are body-level fixed layers so they can travel across
   section boundaries without ever being clipped or re-parented.
   z: record (20) < sleeve (25) < hider (30) < nav (60) — the
   record slides *behind* the sleeve, both slide *behind* the hider.
   ============================================================ */

.ar-record,
.ar-sleeve {
  position: fixed;
  left: 0;
  top: 0;
  will-change: transform;
  pointer-events: none;
}

.ar-record {
  z-index: 20;
  width: var(--ar-sleeve);
  height: var(--ar-sleeve);
  /* Perspective lives on the wrapper so the disc inside is free to carry the
     spin while the wrapper handles position + scale. */
  perspective: 1200px;
  perspective-origin: 50% 50%;
  --ar-disc-thickness: 5px;
  /* No drop-shadow: at some rotations the offset shadow still read as a grey
     blob behind the disc (WV-26). Dropped entirely — the record floats clean. */
}

/* Lean and spin are separate layers on purpose. GSAP writes a single element's
   transform as rotateY-then-rotateX, which would put the lean inside the
   spinning frame and make the record wobble like a coin going over. Split, the
   lean stays in the parent frame and the disc turns about a fixed tilted axis. */
.ar-record__tilt,
.ar-record__disc {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The two sides of the pressing. */
.ar-record__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  /* Grooves at the Figma ring diameters (488 / 425.6 / 338.9) in its own
     colours (#000 / #131313 / #0b0b0b). The exported circles were flat fills
     with no texture, so the groove pass is drawn rather than imported —
     it has to survive being scaled and turned. */
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%,
      transparent 22.4%, rgba(255, 255, 255, 0.055) 22.6%,
      transparent 23.2%, transparent 34.5%,
      rgba(255, 255, 255, 0.05) 34.7%, transparent 35.4%,
      transparent 43.4%, rgba(255, 255, 255, 0.06) 43.6%,
      transparent 44.4%),
    radial-gradient(circle at 50% 50%,
      #131313 0 43.5%, #0b0b0b 43.5% 69.4%, #000 69.4% 100%);
}

/* Raking highlight — fixed to the face, so it sweeps as the face turns. */
.ar-record__face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0.075) 44%,
    rgba(255, 255, 255, 0.02) 52%,
    rgba(255, 255, 255, 0) 66%);
}

.ar-record__face--a { transform: translateZ(calc(var(--ar-disc-thickness) / 2)); }
.ar-record__face--b { transform: rotateY(180deg) translateZ(calc(var(--ar-disc-thickness) / 2)); }
/* B-side: same pressing, uninked label — so you can read which way it's facing. */
.ar-record__face--b .ar-record__label img { filter: grayscale(1) contrast(1.05) brightness(0.92); }

/* The rim. A slab standing perpendicular to the faces: edge-on to us when the
   record faces us, face-on to us when the record is edge-on. Without it the
   disc is a zero-thickness plane and blinks out of existence twice a turn. */
.ar-record__edge {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ar-disc-thickness);
  height: 100%;
  margin-left: calc(var(--ar-disc-thickness) / -2);
  border-radius: var(--ar-disc-thickness);
  transform: rotateY(90deg);
  background: linear-gradient(180deg, #333 0%, #0a0a0a 14%, #1c1c1c 50%, #0a0a0a 86%, #333 100%);
}

/* Label — the exported artwork disc (219.6 of 488 = 45%). */
.ar-record__label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 45%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.ar-record__label img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* Spindle hole. */
.ar-record__label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6.6%;
  height: 6.6%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--dn-bg);
}

.ar-sleeve {
  z-index: 25;
  width: var(--ar-sleeve);
  height: var(--ar-sleeve);
}
.ar-sleeve__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rail caption — appears under the sleeve once it has parked in the rail.
   Width is --ar-mini so JS can read the rail thumbnail's px size off it
   (custom properties holding clamp() can't be read back numerically). */
/* Sits one layer under the sleeve (25) so the thumbnail draws on top of it. */
.ar-rail-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 24;
  background: var(--dn-bg);
  opacity: 0;
  will-change: transform;
  pointer-events: none;
}

.ar-rail-meta {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 25;
  width: var(--ar-mini);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--ar-text);
  line-height: 1.3;
  opacity: 0;
  will-change: transform;
  pointer-events: none;
}

/* ============================================================
   Hider — the band the sleeve disappears under on its way to the rail.
   ============================================================ */

/* In normal flow now — it scrolls with the page like everything else. Its
   z-index only has to beat the sleeve's (25) so the cover passes behind it. */
.ar-hider {
  position: relative;
  z-index: 30;
  width: 100%;
  /* Figma draws this band at 110. It is also the thing that has to swallow the
     cover whole mid-flight, and the cover is --ar-mini across by then — so the
     band is keyed to that rather than to the viewport. Anything shorter and the
     cover shows above or below the hairlines while it crosses. */
  height: max(110px, calc(var(--ar-mini) + 20px));
  padding: 25px var(--ar-gutter);
  background: var(--dn-bg);
  display: grid;
  place-items: center;
}
/* Hairlines, inset to the page gutters like the Figma lines. */
.ar-hider::before,
.ar-hider::after {
  content: "";
  position: absolute;
  left: var(--ar-gutter);
  right: var(--ar-gutter);
  height: 1px;
  background: var(--dn-line);
}
.ar-hider::before { top: 0; }
.ar-hider::after { bottom: 0; }
.ar-hider__inner {
  position: relative;
  z-index: 1;
  width: 302px;
  max-width: 100%;
  font-size: var(--ar-text);
  line-height: 1.3;
  text-align: center;
}

/* ============================================================
   Article body
   ============================================================ */

/* The flow alternates between measure-width prose and full-bleed figures.
   The figures are siblings of the text blocks rather than negative-margined
   children of the column: no 100vw arithmetic, so a classic scrollbar can't
   push the page sideways. */
.ar-body {
  position: relative;
  z-index: 15;
  background: var(--dn-bg);
  padding: 82px 0 0;
}

.ar-flow {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.ar-col {
  width: var(--ar-measure);
  margin: 0 auto;
}

.ar-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ar-block h2 {
  margin: 0;
  font-size: var(--ar-h2);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
}

.ar-prose {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  font-size: var(--ar-copy);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Full-bleed figure — the full frame width, outside the measure. */
.ar-figure--bleed {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 1440 / 821;
  overflow: hidden;
}
.ar-figure--bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ar-figure-pair {
  width: var(--ar-measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ar-figure-pair figure {
  margin: 0;
  aspect-ratio: 335 / 389;
  overflow: hidden;
}
.ar-figure-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The 20% grey wash the design lays over every case image. */
.ar-figure--bleed,
.ar-figure-pair figure { position: relative; }
.ar-figure--bleed::after,
.ar-figure-pair figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(112, 112, 112, 0.2);
  pointer-events: none;
}

/* ============================================================
   Footer
   ============================================================ */

.ar-footer { position: relative; z-index: 15; margin-top: 160px; }

.ar-next {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dn-bg);
  min-height: 897px;
}

.ar-next__pitch {
  padding: 53px var(--ar-gutter);
  display: flex;
  flex-direction: column;
}
.ar-next__pitch h2 {
  margin: 0 0 21px;
  max-width: 477px;
  font-size: var(--ar-footer-lg);
  font-weight: 500;
  line-height: 0.9;
}
.ar-next__pitch p {
  max-width: 449px;
  font-size: var(--ar-text);
  line-height: 1.2;
}

.ar-subscribe {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 48px;
  font-size: var(--ar-text);
  line-height: 1.2;
}
.ar-subscribe label { color: #aaa; }
.ar-subscribe input {
  width: 157px;
  border: 0;
  border-bottom: 1px solid var(--dn-line);
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0 0 4px;
}
.ar-subscribe input::placeholder { color: #aaa; }
.ar-subscribe button {
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
.ar-subscribe button:hover { opacity: 0.6; }

/* Right half — the "next issue" panel: photo under a red colour-burn. */
.ar-next__panel {
  position: relative;
  overflow: hidden;
  color: #fff;
  font-size: var(--ar-text);
  line-height: 1.2;
}
.ar-next__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-next__wash {
  position: absolute;
  inset: 0;
  background: #de4e27;
  mix-blend-mode: color;
}
.ar-next__tint {
  position: absolute;
  inset: 0;
  background: rgba(242, 181, 210, 0.38);
}
.ar-next__crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ar-next__crosshair::before,
.ar-next__crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
}
.ar-next__crosshair::before { left: 0; right: 0; top: 50%; height: 1px; }
.ar-next__crosshair::after { top: 12.5%; bottom: 12.5%; left: 50%; width: 1px; }

.ar-next__meta { position: absolute; inset: 0; }
.ar-next__meta > * { position: absolute; white-space: nowrap; }
.ar-next__meta .is-year { left: 32px; top: 53px; }
.ar-next__meta .is-issue { left: 50%; top: 29px; transform: translateX(-50%); }
.ar-next__meta .is-q { left: 50%; top: 53px; transform: translateX(-50%); text-align: center; }
.ar-next__meta .is-date { right: 32px; top: 53px; }
.ar-next__meta .is-read { left: 149px; top: 173px; transform: translateX(-50%); }
.ar-next__meta .is-count { left: 50%; bottom: 48px; transform: translateX(-50%); }
.ar-next__meta .is-prev { left: 32px; bottom: 48px; }
.ar-next__meta .is-next { right: 32px; bottom: 48px; }

.ar-next__cover {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 492px;
  max-width: 68%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.ar-next__cover img { width: 100%; height: 100%; object-fit: cover; }

.ar-foot {
  position: relative;
  background: #000;
  color: #fff;
  padding: 68px var(--ar-gutter) 60px;
  min-height: 867px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 0;
}

.ar-foot__mark { width: 58px; }
.ar-foot__mark img { width: 100%; height: auto; }

.ar-foot__mail { align-self: start; }
.ar-foot__mail span { display: block; font-size: var(--ar-text); line-height: 1.2; }
.ar-foot__mail a {
  display: block;
  margin-top: 8px;
  font-size: var(--ar-footer-lg);
  font-weight: 500;
  line-height: 0.9;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.ar-foot__mail a:hover { opacity: 0.6; }

.ar-foot__legal {
  grid-column: 1 / -1;
  margin-top: 140px;
  display: flex;
  justify-content: space-between;
  font-size: var(--ar-text);
  line-height: 1.2;
}
.ar-foot__legal .is-dim { color: rgba(255, 255, 255, 0.5); }
.ar-foot__legal a { color: inherit; text-decoration: none; }
.ar-foot__legal a:hover { opacity: 0.6; }

.ar-foot__cols {
  grid-column: 1 / -1;
  margin-top: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
}
.ar-foot__social {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--ar-text);
  line-height: 1.2;
}
.ar-foot__social a { color: inherit; text-decoration: none; }
.ar-foot__social a:hover { opacity: 0.6; }

.ar-foot__nav { display: flex; flex-direction: column; gap: 8px; }
.ar-foot__nav a {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--ar-h2);
  font-weight: 500;
  line-height: 0.9;
  color: inherit;
  text-decoration: none;
  opacity: 0.4;
  transition: opacity var(--dn-dur-fast) var(--dn-ease-out);
}
.ar-foot__nav a[aria-current], .ar-foot__nav a:hover { opacity: 1; }
.ar-foot__nav sup { font-size: var(--ar-text); line-height: 1; font-weight: 400; }

/* ============================================================
   Static fallback — no JS, reduced motion, or narrow viewports.
   The choreography is a desktop affordance; everything below just
   stacks in the Figma reading order.
   ============================================================ */

.ar-static .ar-opening { height: auto; }
.ar-static .ar-stage {
  position: relative;
  height: auto;
  display: block;
  /* Must be reset alongside `display`: left standing, the centred grid's
     justify-items keeps shrink-wrapping the children to their content. */
  place-items: normal;
  padding: 180px 0 0;
}
.ar-static .ar-byline {
  position: static;
  transform: none;
  margin: 32px 0 0;
  padding: 0 var(--ar-gutter);
}

.ar-static .ar-record,
.ar-static .ar-sleeve {
  position: relative;
  margin: 0 auto;
  transform: none !important;
}
.ar-static .ar-record { margin-top: 48px; }
.ar-static .ar-sleeve { margin-top: 40px; }
.ar-static .ar-rail-meta,
.ar-static .ar-rail-card { display: none; }
.ar-static .ar-hider {
  position: relative;
  margin-top: 72px;
  transform: none !important;
}

@media (max-width: 900px) {
  :root {
    --ar-sleeve: min(72vw, 42vh);
    --ar-measure: min(682px, 88vw);
    /* The vh cap is for the pinned composition, which mobile never runs —
       so the headline is free to fill the narrow measure. */
    --ar-h1: 12vw;
  }
  /* The five-item menu has no mobile design yet and won't fit beside the
     wordmark, so the narrow nav keeps the contact block and the logo. */
  .ar-nav { grid-template-columns: 1fr auto; }
  .ar-nav__menu { display: none; }
  .ar-nav__contact { order: -1; justify-self: start; }
  .ar-nav__logo,
  .ar-nav__logo img { width: 108px; height: 28px; }
  .ar-flow { gap: 56px; }
  .ar-foot__mail a { white-space: normal; word-break: break-word; }
  /* The one-line subscribe row's min-content is wider than a phone; let it wrap
     rather than pushing the whole page sideways. */
  .ar-subscribe { flex-wrap: wrap; align-items: center; gap: 16px 24px; }
  .ar-subscribe label { flex: 1 0 100%; }
  .ar-subscribe input { flex: 1 1 140px; width: auto; }
  .ar-next { grid-template-columns: 1fr; }
  .ar-next { min-height: 0; }
  .ar-next__panel { aspect-ratio: 3 / 4; }
  .ar-foot { grid-template-columns: 1fr; min-height: 0; gap: 64px; }
  .ar-foot__legal, .ar-foot__cols { margin-top: 64px; }
  .ar-foot__cols { grid-template-columns: 1fr; gap: 48px; }
}