/* Nicholas Ferraro home page. Tokens override the engine; every rule below is
   on the page's own classes. Nothing here restyles .sc-stage, .sc-copy or any
   [data-sc-*] selector. Short-screen flow overrides are scoped to the engine's
   opt-in unpinned acts. Monochrome: colour lives inside the photographs. */

:root {
  --sc-canvas: #0d0d0c;
  --sc-surface: #161615;
  --sc-ink: #f2efe9;
  --sc-ink-soft: #a8a49c;
  --sc-accent: #e9e4da;
  --sc-accent-ink: #0d0d0c;
  --sc-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sc-font-text: "Jost", system-ui, -apple-system, sans-serif;
  --sc-font-mono: "Jost", system-ui, sans-serif;
  --sc-shadow-color: 40 10% 2%;
  --sc-track-normal: 0.005em;

  /* chrome geometry, shared with page.js through the rendered boxes */
  --nf-gap: 20px;
  --nf-tile: 52px;
  --nf-tray-pad: 12px;
  --nf-tray-h: calc(var(--nf-tile) + var(--nf-tray-pad) * 2);
  --nf-tray-clear: calc(var(--nf-gap) + var(--nf-tray-h) + 2.75rem);
  --nf-handoff: 22vh;
  --nf-velvet: #141312;
}

html { background: var(--sc-canvas); }
body { overflow-x: clip; }
.sc-grain { opacity: 0.045; }

/* ------------------------------------------------------------ chrome -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 1.1rem) var(--sc-gutter) 0.9rem;
  pointer-events: none;
}
.bar a {
  pointer-events: auto;
  font: 500 var(--sc-t-xs) / 1 var(--sc-font-text);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
  padding: 0.55rem 0;
  text-shadow: 0 1px 3px rgba(13, 13, 12, 0.7);
}
.bar__mark {
  opacity: 0; transform: translate3d(0, -6px, 0);
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.bar__mark.is-on { opacity: 1; transform: none; }
.bar__shop { position: relative; }
.bar__shop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.3rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 160ms var(--sc-ease-out);
}
.bar__shop:hover::after, .bar__shop:focus-visible::after { transform: scaleX(1); }
/* The bar is transparent, so once the page moves, copy scrolling under it
   would print straight through the wordmark and nav. The scrim is painted in
   the live drift colour (the engine rewrites --sc-canvas on :root), so it
   matches whichever act is underneath; page.js sets .is-scrolled. */
.bar::before {
  content: ""; position: absolute; inset: 0 0 -3rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--sc-canvas) 0%,
    var(--sc-canvas) 30%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 45%,
    color-mix(in oklab, var(--sc-canvas) 62%, transparent) 60%,
    color-mix(in oklab, var(--sc-canvas) 28%, transparent) 80%,
    transparent 100%);
  opacity: 0; transition: opacity 240ms var(--sc-ease-out);
}
.bar.is-scrolled::before { opacity: 1; }

/* ------------------------------------------------------------ labels -- */
.label { max-width: 32rem; }
.label__name {
  font: 500 var(--sc-t-xl) / 1.06 var(--sc-font-display);
  letter-spacing: 0.012em; margin: 0; color: var(--sc-ink); text-wrap: balance;
}
.label__facts, .label__note {
  margin: var(--sc-3) 0 0;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm); line-height: 1.62; letter-spacing: 0.012em;
  max-width: 38ch; text-wrap: pretty;
}
.label__note { color: var(--sc-ink); }
.label__terms {
  margin: var(--sc-3) 0 0;
  font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.label__link {
  display: inline-block; margin-top: var(--sc-4);
  font-size: var(--sc-t-sm); letter-spacing: 0.04em; color: var(--sc-ink);
  text-decoration: underline; text-underline-offset: 0.32em; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--sc-ink) 42%, transparent);
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.label__link:hover, .label__link:focus-visible { text-decoration-color: var(--sc-ink); }
.label__link:active { transform: translateY(1px); }

/* -------------------------------------------------------------- hero -- */
.hero {
  position: relative; height: 100svh; min-height: 560px;
  overflow: clip; isolation: isolate;
  --nf-ring-top: 19.5vh;
  --nf-ring-h: 36vh;
  --nf-ring-scale: calc(1 + 0.06 * var(--nf-t, 0));
}
.hero__plane { position: absolute; inset: 0; pointer-events: none; }
.hero__ptr { position: absolute; inset: 0; will-change: transform; }
.hero__plane--plate { z-index: 1; }
.hero__plane--plate img {
  position: absolute; left: -12px; top: -100px;
  width: calc(100% + 24px); height: calc(100% + 200px); max-width: none;
  object-fit: cover; object-position: 50% 10%;
}
.hero__mark {
  position: absolute; z-index: 2; left: 0; right: 0; top: 17vh; margin: 0;
  text-align: center;
  font: 500 clamp(3rem, 6.55vw, 8.4rem) / 1 var(--sc-font-display);
  text-transform: uppercase; letter-spacing: 0.14em; text-indent: 0.14em;
  color: var(--sc-ink); white-space: nowrap;
  text-shadow: 0 2px 14px rgba(13, 13, 12, 0.5);
}
.hero__plane--ring { z-index: 3; }
.hero__ring {
  position: absolute; left: 50%; top: var(--nf-ring-top);
  height: var(--nf-ring-h); width: auto; max-width: none;
  margin-left: calc(var(--nf-ring-h) * -0.652);
  transform: scale(var(--nf-ring-scale)); transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 18px rgba(13, 13, 12, 0.55));
}
.hero__shadow {
  position: absolute; left: 50%;
  top: calc(var(--nf-ring-top) + var(--nf-ring-h) - 3.5vh);
  width: calc(var(--nf-ring-h) * 1.55); height: 8vh;
  margin-left: calc(var(--nf-ring-h) * -0.775);
  background: radial-gradient(50% 50% at 50% 50%, rgba(13, 13, 12, 0.92) 0%, rgba(13, 13, 12, 0.55) 38%, transparent 72%);
  opacity: calc(1 - var(--nf-t, 0) * 0.85);
}
.hero__plane--fore {
  z-index: 5; top: auto; bottom: -48px; left: -2%; right: -2%; height: 58vh;
  /* three masks intersected: a soft top edge (near water out of focus), the
     gentle dip under the ring, and the fade into the canvas over the last 200px */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%),
                      radial-gradient(ellipse 34% 9% at 50% 0%, transparent 0 48%, #000 86%),
                      linear-gradient(to bottom, #000 0, #000 calc(100% - 200px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 15%),
                      radial-gradient(ellipse 34% 9% at 50% 0%, transparent 0 48%, #000 86%),
                      linear-gradient(to bottom, #000 0, #000 calc(100% - 200px), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hero__plane--fore img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 30%;
}
.hero__plane--atmo {
  z-index: 6; inset: -12% 0;
  background:
    radial-gradient(110% 80% at 50% 48%, transparent 40%, rgba(13, 13, 12, 0.74) 100%),
    linear-gradient(to bottom, rgba(13, 13, 12, 0.62) 0%, transparent 30%);
}
.hero__floor {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 26vh;
  background: linear-gradient(to bottom, transparent, var(--sc-canvas) 94%);
  pointer-events: none;
}
.hero__scrim { z-index: 8; }
.hero__label {
  position: absolute; z-index: 9;
  left: var(--sc-gutter); bottom: var(--nf-tray-clear);
  max-width: 34rem;
}
.hero__line {
  margin: 0 0 var(--sc-4);
  font: 400 italic var(--sc-t-lg) / 1.3 var(--sc-font-display);
  color: var(--sc-ink); letter-spacing: 0.01em;
}
.hero__label .label__name { font-size: var(--sc-t-2xl); }

/* ------------------------------------------------------------- rail -- */
.rail-stage {
  display: flex; align-items: center;
  /* The column centres between the bar and the fixed tray, not in the full
     stage, so the bar never sits on a photograph and "View piece" always
     clears the tray as the rail pans past it. */
  --nf-rail-top: calc(env(safe-area-inset-top, 0px) + 4rem);
  --nf-rail-bottom: calc(var(--nf-gap) + var(--nf-tray-h) + env(safe-area-inset-bottom, 0px) + 1.5rem);
  /* Room for the tallest label plus its margin. Below 1280px the labels are
     narrow enough to wrap a line or two taller. */
  --nf-label-h: calc(14.5rem + clamp(0px, (1280px - 100vw) * 0.32, 5rem));
  padding-block: var(--nf-rail-top) var(--nf-rail-bottom);
}
.rail {
  position: relative; display: flex; align-items: flex-start;
  /* No rem caps on the rail's widths: capped, the rail stopped growing at
     ~2448px, so any window that wide had nothing left to pan and the act sat
     frozen for its whole pin. Sizes match the old clamps up to 1600px; past
     that the piece grows with the window, held to what the height can show. */
  gap: max(2.5rem, 5vw);
  padding-inline: var(--sc-gutter);
  width: max-content;
  --nf-item-w: max(clamp(16rem, 26vw, 26rem), min(26vw, (100svh - 31rem) * 0.8));
}
.rail__item { flex: 0 0 auto; }
.rail__lead { width: max(16rem, 24vw); align-self: center; }
.rail__title {
  font: 500 var(--sc-t-2xl) / 1.02 var(--sc-font-display);
  letter-spacing: var(--sc-track-snug); margin: 0; text-wrap: balance;
}
.rail__sub { color: var(--sc-ink-soft); margin: var(--sc-4) 0 0; max-width: 26ch; text-wrap: pretty; }
.piece { width: var(--nf-item-w); }
.piece__media {
  display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px;
  /* On a short window only the photograph gives up height. The label keeps
     the piece's width, so it does not rewrap taller. */
  width: min(100%, max(10rem, (100svh - var(--nf-rail-top) - var(--nf-rail-bottom) - var(--nf-label-h)) * 0.8));
  background: var(--sc-surface); box-shadow: var(--sc-e2);
}
.piece__media img { width: 100%; height: 100%; object-fit: cover; }
.piece .label { margin-top: var(--sc-5); }
.rail__end { width: max(14rem, 20vw); align-self: center; }
.rail__note { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); max-width: 22ch; text-wrap: pretty; }

/* ------------------------------------------------------------ skull -- */
.skull { --nf-iris: clamp(0, calc((var(--sc-p, 0) - 0.3) / 0.42), 1); }
.skull__stage { display: grid; grid-template-columns: 56% 1fr; align-items: center; }
.skull__frame { position: relative; height: 100svh; overflow: clip; background: var(--sc-surface); }
.skull__front, .skull__side { position: absolute; inset: 0; margin: 0; }
.skull__front { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.skull__side-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform: scale(calc(1.16 - 0.16 * var(--nf-iris))); transform-origin: 50% 50%;
}
.skull__veil { position: absolute; inset: 0; background: var(--sc-canvas); opacity: calc(0.62 * var(--nf-iris)); }
.skull__label { padding: 0 var(--sc-gutter) 0 clamp(2rem, 6vw, 6rem); max-width: 38rem; }

/* ---------------------------------------------------------- silence -- */
.silence {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--sc-9) var(--sc-gutter) calc(var(--sc-9) + var(--nf-tray-h));
}
.silence__line {
  margin: 0; text-align: center; max-width: 20ch; text-wrap: balance;
  font: 400 italic var(--sc-t-2xl) / 1.15 var(--sc-font-display);
  color: var(--sc-ink); letter-spacing: 0.01em;
}

/* -------------------------------------------------------------- peak -- */
.peak { --nf-open: clamp(0, calc((var(--sc-p, 0) - 0.22) / 0.56), 1); }
.peak__media { position: absolute; inset: 0; overflow: clip; background: var(--sc-canvas); }
.peak__closed, .peak__open { position: absolute; inset: 0; margin: 0; }
.peak__closed { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; transform: scale(1.18); transform-origin: 50% 50%; }
.peak__open-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%;
  transform: scale(calc(1.3 - 0.12 * var(--nf-open))); transform-origin: 50% 50%;
}
/* The two photographs are framed differently, so a wipe between them always
   cut a hard seam across the ring. Dip through the canvas instead: the closed
   dome fades out, then the open locket rises out of the dark. Opacity only,
   so reduced motion keeps the same transition. */
.peak__closed { opacity: clamp(0, calc((0.5 - var(--sc-p, 0)) / 0.08), 1); }
.peak__open { opacity: clamp(0, calc((var(--sc-p, 0) - 0.47) / 0.09), 1); }
@media (min-width: 861px) {
  /* The photographs are 1120px wide. Full-bleed on a wide window they were
     upscaled ~3x and cropped to a third of their height, so past 1320px (or
     the window height, if taller) the frame stops growing and feathers into
     the canvas instead. */
  .peak__media {
    margin-inline: auto;
    width: min(100%, max(1320px, 100svh));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}
.peak__scrim { z-index: 10; }
.peak__scrim--top { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.peak__label {
  position: absolute; z-index: 20;
  right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem);
  text-align: right; max-width: 30rem;
}
.peak__label .label__facts { margin-left: auto; }
.peak__line {
  position: absolute; z-index: 20; margin: 0;
  left: var(--sc-gutter); bottom: var(--nf-tray-clear);
  font: 400 italic var(--sc-t-xl) / 1.2 var(--sc-font-display);
  color: var(--sc-ink); max-width: 18ch; text-wrap: balance;
}

/* ------------------------------------------------------------ lariat -- */
.lariat { padding: var(--sc-8) var(--sc-gutter) calc(var(--sc-section) + var(--sc-8)); }
.lariat__grid {
  /* Divide the capped container, so wide viewports cannot squeeze the copy. */
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2rem, 6vw, 7rem); align-items: end;
  max-width: var(--sc-maxw); margin-inline: auto;
}
.lariat__media {
  margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px;
  background: var(--sc-surface); box-shadow: var(--sc-e3);
}
.lariat__media img { width: 100%; height: 100%; object-fit: cover; }
.lariat__label { max-width: 34rem; padding-bottom: var(--sc-6); }
.lariat__label > * + * { margin-top: var(--sc-3); }
.lariat__label .label__link { margin-top: var(--sc-4); }

/* ------------------------------------------------------------- close -- */
.close__stage {
  background: var(--sc-surface); display: grid; grid-template-rows: 1fr auto;
  border-top: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-edge), 0 -18px 40px -20px rgba(0, 0, 0, 0.8);
}
.plate { position: relative; min-height: 0; }
.tray--plate { position: absolute; top: var(--nf-handoff); left: var(--nf-gap); }
.plate__body {
  padding: calc(var(--nf-handoff) + var(--nf-tray-h) + var(--sc-7)) var(--sc-gutter) var(--sc-6);
  max-width: var(--sc-maxw); margin: 0;
}
.plate__label { max-width: 40rem; }
.plate__list { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.plate__list:empty { display: none; }
.plate__empty { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 40ch; }
.plate__empty.is-hidden { display: none; }
.plate__check { display: inline-flex; align-items: center; gap: var(--sc-2); cursor: pointer; color: var(--sc-ink); font-size: var(--sc-t-sm); letter-spacing: 0.02em; padding: 0.3rem 0; }
.plate__check input {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 52%, transparent); border-radius: 2px;
  display: grid; place-content: center; background: transparent;
  transition: background-color 120ms var(--sc-ease-out), border-color 120ms var(--sc-ease-out);
}
.plate__check input:checked { background: var(--sc-accent); border-color: var(--sc-accent); }
.plate__check input:checked::before {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid var(--sc-accent-ink); border-bottom: 2px solid var(--sc-accent-ink);
  transform: translateY(-1px) rotate(-45deg);
}
.plate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5) var(--sc-6); margin-top: var(--sc-6); }
.cta {
  display: inline-block; background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 500 var(--sc-t-sm) / 1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.05rem 1.9rem; border-radius: 2px; text-decoration: none;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.cta:hover, .cta:focus-visible { background: var(--sc-ink); }
.cta:active { transform: translateY(1px); }
.plate__shop {
  color: var(--sc-ink); font-size: var(--sc-t-sm); letter-spacing: 0.04em;
  text-underline-offset: 0.32em; text-decoration-color: color-mix(in oklab, var(--sc-ink) 42%, transparent);
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.plate__shop:hover, .plate__shop:focus-visible { text-decoration-color: var(--sc-ink); }

.foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-4) var(--sc-7);
  padding: var(--sc-5) var(--sc-gutter) calc(var(--sc-5) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot__mark {
  font: 500 var(--sc-t-xs) / 1 var(--sc-font-text); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
}
.foot__nav { display: flex; gap: var(--sc-5); }
.foot__nav a { color: var(--sc-ink); text-decoration: none; letter-spacing: 0.03em; }
.foot__nav a:hover, .foot__nav a:focus-visible { text-decoration: underline; text-underline-offset: 0.32em; }
.foot__fine { margin: 0 0 0 auto; }

/* --------------------------------------------------------------- tray -- */
.tray__slots {
  display: flex; gap: 6px; padding: var(--nf-tray-pad); margin: 0; list-style: none;
  background:
    radial-gradient(120% 150% at 50% -30%, #1e1d1b 0%, var(--nf-velvet) 52%, #0e0e0d 100%);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 15%, transparent);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 13%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    inset 0 12px 24px -14px rgba(0, 0, 0, 0.95),
    0 12px 32px -14px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.55);
}
.tray__slot {
  position: relative; width: var(--nf-tile); height: var(--nf-tile); border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 11%, transparent),
    inset 0 2px 7px rgba(0, 0, 0, 0.75);
  background: color-mix(in oklab, var(--nf-velvet) 70%, #000);
}
.tray__btn {
  all: unset; display: block; width: 100%; height: 100%; cursor: pointer; border-radius: 4px;
}
.tray__btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.tray__tile {
  width: 100%; height: 100%; object-fit: cover; border-radius: 3px;
  opacity: 0; transform: scale(1.15);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}
.tray__slot.is-filled .tray__tile { opacity: 1; transform: none; }
.tray__slot.is-filled .tray__btn:hover .tray__tile { transform: scale(1.04); }
.tray__slot.is-filled .tray__btn:active .tray__tile { transform: scale(0.97); }
.tray__slot.is-off .tray__tile { opacity: 0.32; }

.tray--fixed {
  position: fixed; z-index: 70; left: var(--nf-gap); bottom: var(--nf-gap);
  transition: opacity 220ms var(--sc-ease-out), visibility 0s linear 0s;
}
.tray--fixed.is-handed {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms var(--sc-ease-out), visibility 0s linear 160ms;
}

/* ------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  :root {
    --nf-gap: 0px;
    --nf-tile: 44px;
    --nf-tray-pad: 10px;
    --nf-tray-clear: calc(var(--nf-tray-h) + env(safe-area-inset-bottom, 0px) + 1.25rem);
    --nf-handoff: 18vh;
  }
  .hero { --nf-ring-top: 27svh; --nf-ring-h: 27svh; min-height: 0; }
  .hero__plane--plate img { object-position: 50% 0%; }
  .hero__mark {
    top: 11.5svh; z-index: 4; white-space: normal;
    font-size: clamp(2.5rem, 12vw, 3.5rem); letter-spacing: 0.12em; text-indent: 0.12em; line-height: 1.02;
    padding-inline: var(--sc-gutter);
  }
  .hero__mark-w { display: block; }
  .hero__plane--fore { height: 60svh; bottom: -40px; }
  .hero__plane--fore img { object-position: 50% 20%; }
  .hero__floor { height: 40svh; }
  .hero__scrim {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 78%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 50%,
      transparent 64%);
  }
  .hero__label { left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; }
  .hero__line { font-size: var(--sc-t-base); margin-bottom: var(--sc-3); }
  .hero__label .label__name { font-size: var(--sc-t-xl); }

  /* Held to the height too: at tablet portrait 72vw made a card taller than
     the stage, and its photograph slid under the bar. */
  .rail { --nf-item-w: min(72vw, 46svh); gap: 2rem; }
  .rail__lead { width: 70vw; }
  .rail__end { width: 60vw; }
  .rail-stage { --nf-label-h: 15rem; }

  .skull__stage { grid-template-columns: 1fr; grid-template-rows: 56svh 1fr; align-items: start; }
  .skull__frame { height: 56svh; }
  .skull__label { padding: var(--sc-5) var(--sc-gutter) var(--nf-tray-clear); }

  .peak__closed { transform: scale(1.3); object-position: 50% 50%; }
  .peak__open-img { object-position: 50% 44%; transform: scale(calc(1.42 - 0.12 * var(--nf-open))); }
  .peak__label { left: var(--sc-gutter); right: var(--sc-gutter); bottom: var(--nf-tray-clear); text-align: left; max-width: none; }
  .peak__label .label__facts { margin-left: 0; }
  .peak__line { top: calc(env(safe-area-inset-top, 0px) + 12svh); bottom: auto; right: var(--sc-gutter); max-width: 16ch; }
  .peak__scrim--top {
    display: block;
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      transparent 42%);
  }

  .lariat { padding-top: var(--sc-7); }
  .lariat__grid { grid-template-columns: 1fr; gap: var(--sc-6); align-items: start; }
  .lariat__media { width: 84vw; margin: 0 auto; }
  .lariat__label { padding-bottom: 0; }

  .silence { min-height: 86svh; }

  .tray--fixed { left: 0; right: 0; bottom: 0; }
  .tray--fixed .tray__slots, .tray--plate .tray__slots {
    justify-content: center; border-radius: 0; border-left: 0; border-right: 0;
    padding-bottom: calc(var(--nf-tray-pad) + env(safe-area-inset-bottom, 0px));
  }
  .tray--plate { left: 0; right: 0; }
  .tray--plate .tray__slots { padding-bottom: var(--nf-tray-pad); }
  .plate__body { padding-top: calc(var(--nf-handoff) + var(--nf-tray-h) + var(--sc-6)); }
  .foot { gap: var(--sc-3) var(--sc-5); }
  .foot__fine { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 400px) {
  .tray__slots { gap: 4px; }
  :root { --nf-tile: 40px; }
}

@media (max-height: 700px) and (max-width: 860px) {
  .hero__line { display: none; }
  .hero { --nf-ring-top: 26svh; --nf-ring-h: 24svh; }
  .hero__mark { top: 10svh; font-size: clamp(2.2rem, 11vw, 3rem); }
}

@media (min-width: 861px) and (max-height: 720px) {
  .hero__mark { top: 15vh; }
  .hero { --nf-ring-top: 23vh; --nf-ring-h: 36vh; }
}

/* ---------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hero__ring { transform: none; }
  .hero__shadow { opacity: 1; }
  .hero__ptr { transform: none !important; }
  .rail__item { opacity: 1 !important; transform: none !important; }
  .skull { --nf-iris: clamp(0, calc((var(--sc-p, 0) - 0.38) / 0.22), 1); }
  .skull__side { opacity: var(--nf-iris); }
  .skull__side-img { transform: none; }
  .peak__open-img { transform: scale(1.18); }
  .peak__closed { transform: scale(1.18); }
  .tray__tile { transform: none; transition: opacity 320ms var(--sc-ease-out); }
  .tray__slot.is-filled .tray__btn:hover .tray__tile { transform: none; }
  .bar__mark { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .rail__item {
    opacity: calc(0.55 + 0.45 * var(--nf-settle, 1));
    transform: translate3d(calc((1 - var(--nf-settle, 1)) * 44px), 0, 0);
    will-change: transform, opacity;
  }
}

/* ------------------------------------------------- close plate, desktop -- */
.plate__label .label__name { font-size: var(--sc-t-3xl); line-height: 1; }
.plate__list { margin-top: var(--sc-5); }
@media (min-width: 861px) {
  .plate {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; align-self: center;
    padding: 0 var(--sc-gutter) 0 var(--nf-gap);
  }
  .tray--plate { position: static; }
  .plate__body { padding: 0; max-width: none; }
  .plate__label { max-width: 44rem; }
  .plate__list { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--sc-2) var(--sc-7); }
}
@media (min-width: 1600px) {
  /* Wide windows: the body centres on the page axis like the lariat above,
     between two flexible tracks. The plate tray stays at the left edge,
     where the fixed tray hands off to it; below ~1750px the first track is
     just the tray and the body sits where it always has. */
  .plate {
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 44rem) minmax(0, 1fr);
    padding-right: var(--nf-gap);
  }
  .tray--plate { justify-self: start; }
}

/* ------------------------------------------ close plate, short phones -- */
@media (max-width: 860px) and (max-height: 700px) {
  :root { --nf-handoff: 7vh; }
  .plate__body { padding-top: calc(var(--nf-handoff) + var(--nf-tray-h) + var(--sc-4)); padding-bottom: var(--sc-3); }
  .plate__label .label__name { font-size: var(--sc-t-xl); }
  .plate__list { margin-top: var(--sc-3); gap: 0 var(--sc-4); }
  .plate__check { padding: 0.1rem 0; }
  .plate__label .label__terms { margin-top: var(--sc-2); }
  .plate__actions { margin-top: var(--sc-4); gap: var(--sc-4); }
  .cta { padding: 0.8rem 1.4rem; }
  .foot { padding-top: var(--sc-3); padding-bottom: calc(var(--sc-3) + env(safe-area-inset-bottom, 0px)); gap: var(--sc-2) var(--sc-4); }
  .foot__fine { display: none; }
}

/* A fixed-height stage cannot contain a photograph, copy and navigation on
   a short screen. These opted-in acts use ordinary document scrolling; the
   engine also releases their pin heights, cues and horizontal transforms. */
.sc-act--unpinned > .sc-stage {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.rail-act.sc-act--unpinned .rail-stage { display: block; padding-block: 5rem var(--nf-tray-clear); }
.rail-act.sc-act--unpinned .rail {
  display: grid; width: 100%; max-width: 64rem; margin-inline: auto;
  gap: 3.5rem; transform: none;
}
.rail-act.sc-act--unpinned .rail__item { width: 100%; opacity: 1; transform: none; }
.rail-act.sc-act--unpinned .piece__media { width: 100%; max-width: 24rem; margin-inline: auto; }
.rail-act.sc-act--unpinned .piece .label { max-width: 32rem; margin-inline: auto; }
.skull.sc-act--unpinned .skull__stage,
.peak.sc-act--unpinned .peak__stage { display: grid; gap: 2rem; padding: 0 var(--sc-gutter) var(--nf-tray-clear); }
.skull.sc-act--unpinned .skull__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.skull.sc-act--unpinned .skull__frame,
.peak.sc-act--unpinned .peak__media {
  position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem; height: auto; width: 100%; max-width: 48rem; margin-inline: auto;
  overflow: hidden; -webkit-mask-image: none; mask-image: none;
}
.skull.sc-act--unpinned .skull__front,
.skull.sc-act--unpinned .skull__side,
.peak.sc-act--unpinned .peak__closed,
.peak.sc-act--unpinned .peak__open {
  position: static; width: 100%; height: auto; aspect-ratio: 4 / 5;
  margin: 0; opacity: 1; transform: none; clip-path: none;
}
.skull.sc-act--unpinned .skull__side-img,
.peak.sc-act--unpinned .peak__open-img { height: 100%; transform: none; object-fit: cover; }
.skull.sc-act--unpinned .skull__veil,
.peak.sc-act--unpinned .peak__scrim,
.peak.sc-act--unpinned .peak__scrim--top { display: none; }
.skull.sc-act--unpinned .skull__label,
.peak.sc-act--unpinned .peak__label {
  position: static; inset: auto; width: 100%; max-width: 48rem;
  padding: 0; margin-inline: auto; text-align: left;
}
.peak.sc-act--unpinned .peak__label .label__facts { margin-left: 0; }
.peak.sc-act--unpinned .peak__line {
  position: static; width: 100%; max-width: 48rem; margin-inline: auto;
}
.close.sc-act--unpinned .close__stage { min-height: 100svh; grid-template-columns: minmax(0, 1fr); padding-top: 5rem; }
.close.sc-act--unpinned .plate { display: block; padding: 0; }
.close.sc-act--unpinned .tray--plate { position: relative; inset: auto; width: max-content; max-width: 100%; margin-inline: auto; }
.close.sc-act--unpinned .plate__body { padding: 2rem var(--sc-gutter); max-width: 48rem; margin-inline: auto; }
.close.sc-act--unpinned .plate__list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.close.sc-act--unpinned .foot { margin-top: 1rem; }

@media (min-width: 600px) {
  .rail-act.sc-act--unpinned .piece { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; align-items: center; }
  .rail-act.sc-act--unpinned .piece .label { margin: 0; }
}

/* Landscape phones still need enough vertical space for the hero's name,
   ring and description. Let this first section extend beyond one screen. */
@media (max-height: 480px) {
  .hero { height: auto; min-height: 0; padding-top: 25rem; --nf-ring-top: 13.5rem; --nf-ring-h: 10rem; }
  .hero .hero__plane { transform: none !important; }
  .hero__mark { top: 5.5rem; font-size: clamp(2.5rem, 7vw, 3.5rem); }
  .hero__label { position: relative; inset: auto; margin: 0 var(--sc-gutter); padding-bottom: var(--nf-tray-clear); }
  .hero__line { display: none; }
}