/* 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. Monochrome: the only colour on the page is 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); }

/* ------------------------------------------------------------ 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; }
.rail {
  position: relative; display: flex; align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-inline: var(--sc-gutter);
  width: max-content;
  --nf-item-w: clamp(16rem, 26vw, 26rem);
}
.rail__item { flex: 0 0 auto; }
.rail__lead { width: clamp(16rem, 24vw, 24rem); 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;
  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: clamp(14rem, 20vw, 20rem); 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%;
}
.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); }

  .rail { --nf-item-w: 72vw; gap: 2rem; }
  .rail__lead { width: 70vw; }
  .rail__end { width: 60vw; }
  .rail-stage { padding-bottom: var(--nf-tray-h); }

  .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 { opacity: clamp(0, calc((var(--sc-p, 0) - 0.4) / 0.2), 1); }
  .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); }
}

/* ------------------------------------------ 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; }
}