/* =========================================================================
   Surf City Epoxy — split-stage scroll page
   Two grounds held in tension: the bare slab on one side, the sealed floor on
   the other. One work edge travels between them for the whole page.
   The law of this page: MEDIA is clipped by the work edge, TYPE never is.
   ========================================================================= */

@font-face {
  font-family: "Archivo Black";
  src: url("assets/fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* the sealed side owns the page defaults, because most type lives there */
  --fin-ground:   #080D14;
  --fin-surface:  #101A25;
  --fin-ink:      #EDF3F8;
  --fin-ink-soft: #93A8B8;
  --fin-accent:   #3FA9E8;
  --fin-accent-ink: #04121C;

  /* the raw side */
  --slab-ground:   #BEB8AC;
  --slab-surface:  #CBC6BB;
  --slab-ink:      #191712;
  --slab-ink-soft: #4B453B;
  --slab-accent:   #07466B;

  /* engine tokens, themed */
  --sc-canvas:      var(--fin-ground);
  --sc-surface:     var(--fin-surface);
  --sc-ink:         var(--fin-ink);
  --sc-ink-soft:    var(--fin-ink-soft);
  --sc-accent:      var(--fin-accent);
  --sc-accent-ink:  var(--fin-accent-ink);
  --sc-shadow-color: 210 45% 3%;

  --sc-font-display: "Archivo Black", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sc-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* the work edge: 0-100, published by site.js every frame */
  --edge: 50;
  --edgepx: 50vw;
  --rail: 78px;
  --gut: clamp(1.1rem, 3.4vw, 3.2rem);
}

/* ---------------------------------------------------------------- basics -- */

html { scroll-behavior: auto; }
body { overflow-x: hidden; }

.u-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 0; left: 0; z-index: 200;
  background: var(--fin-accent); color: var(--fin-accent-ink);
  font: 600 0.95rem/1 var(--sc-font-text);
  padding: 0.9rem 1.2rem; border-radius: 0 0 var(--sc-r-md) 0;
  transform: translateY(-120%);
}
.skip:focus-visible { transform: none; }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 3px solid var(--fin-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
.on-slab :where(a):focus-visible { outline-color: var(--slab-accent); }

::selection { background: var(--fin-accent); color: var(--fin-accent-ink); }

/* --------------------------------------------------------------- ground -- */
/* One fixed backdrop for the whole page. The acts are transparent and only
   carry content, so the two grounds never cut and the page has no seam. */

.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.pane { position: absolute; inset: 0; }

.pane--slab {
  background:
    linear-gradient(184deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10) 62%),
    url("assets/ground-slab.jpg") center / cover,
    var(--slab-ground);
  background-blend-mode: soft-light, luminosity, normal;
  clip-path: inset(0 calc(100% - var(--edge) * 1%) 0 0);
}
.pane--finish {
  background:
    linear-gradient(196deg, rgba(10,20,32,0.55), rgba(3,6,10,0.86) 78%),
    url("assets/ground-finish.jpg") center / cover,
    var(--fin-ground);
  clip-path: inset(0 0 0 calc(var(--edge) * 1%));
}

/* the flake the visitor broadcasts. It lives in the floor: above the finish
   media, below the type, and still there at the bottom of the page. */
.flake {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
  clip-path: inset(0 0 0 calc(var(--edge) * 1%));
}

/* the gloss sweep, once, on the close */
.sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0; overflow: clip;
}
.sheen::before {
  content: ""; position: absolute; inset: -30% -70%;
  background: linear-gradient(104deg,
    transparent 34%,
    rgba(255,255,255,0.05) 44%,
    rgba(226,244,255,0.34) 50%,
    rgba(255,255,255,0.05) 56%,
    transparent 66%);
  transform: translate3d(calc(var(--sheen, 0) * 62% - 31%), 0, 0);
}

.sc-grain { z-index: 4; opacity: 0.05; }

/* ------------------------------------------------------------- the edge -- */
/* The chrome of this page is the divider. There is no bar. */

.edge {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: var(--rail); height: 100%;
  transform: translate3d(calc(var(--edgepx) - var(--rail) / 2), 0, 0);
  display: flex; flex-direction: column; align-items: center;
  padding-block: clamp(0.9rem, 2.4vh, 1.6rem);
  background:
    linear-gradient(90deg, rgba(6,10,16,0) 0%, rgba(6,10,16,0.78) 22%, rgba(6,10,16,0.92) 50%, rgba(6,10,16,0.78) 78%, rgba(6,10,16,0) 100%);
}
.edge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg,
    rgba(63,169,232,0.15), var(--fin-accent) 22%, var(--fin-accent) 78%, rgba(63,169,232,0.15));
  box-shadow: 0 0 18px rgba(63,169,232,0.35);
}

.edge__mark { position: relative; z-index: 1; display: block; line-height: 0; }
.edge__mark img { width: 38px; height: 38px; display: block; }

.edge__stages {
  position: relative; z-index: 1;
  margin: auto 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: clamp(1.4rem, 4.2vh, 3rem);
  writing-mode: vertical-rl;
  font: 700 0.66rem/1 var(--sc-font-text);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--fin-ink);
}
.edge__stages li { opacity: 0.34; transition: opacity 260ms var(--sc-ease-out); }
.edge__stages li[data-on="true"] { opacity: 1; color: var(--fin-accent); }

.edge__call {
  position: relative; z-index: 1;
  writing-mode: vertical-rl;
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-width: 46px; padding: 1.1rem 0.4rem;
  font: 700 0.72rem/1 var(--sc-font-text);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fin-ink); text-decoration: none;
  border: 1px solid rgba(237,243,248,0.3);
  border-radius: var(--sc-r-pill);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.edge__call svg { width: 15px; height: 15px; fill: currentColor; }
.edge__call:hover { background: var(--fin-accent); color: var(--fin-accent-ink); border-color: var(--fin-accent); }
.edge__call:active { transform: translateY(1px); }

/* the two side labels: fixed, small, one per ground */
.sidelabel {
  position: fixed; top: clamp(1rem, 2.6vh, 2rem); z-index: 40;
  font: 700 0.66rem/1 var(--sc-font-text);
  letter-spacing: 0.3em; text-transform: uppercase;
  transition: opacity 400ms var(--sc-ease-out);
}
.sidelabel--slab   { left: var(--gut); color: var(--slab-ink-soft); }
.sidelabel--finish { right: var(--gut); color: var(--fin-ink-soft); }

/* ---------------------------------------------------------------- acts --- */

.act { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: 1; }

/* Media plates. Every clipped box is full-bleed inside the stage, so the
   percentage in every clip-path resolves against the same viewport ruler as
   the fixed grounds. The picture inside it is sized to its own side. */
.plate { position: absolute; inset: 0; margin: 0; }
.plate img { display: block; object-fit: cover; }
.plate--slab   { clip-path: inset(0 calc(100% - var(--edge) * 1%) 0 0); }
.plate--finish { clip-path: inset(0 0 0 calc(var(--edge) * 1%)); }
.plate--slab img   { width: 58%; height: 78%; margin: 11% 0 0; object-position: 46% 58%; }
.plate--finish img { width: 84%; height: 78%; margin: 11% 0 0 16%; object-position: 56% 56%; }
.plate--full img   { width: 100%; height: 100%; margin: 0; object-position: 50% 50%; }

/* a scrim only where copy sits, and always a sibling of the copy */
.scrim { position: absolute; inset: 0; pointer-events: none; }
.scrim--slab {
  clip-path: inset(0 calc(100% - var(--edge) * 1%) 0 0);
  background: linear-gradient(to top,
    rgba(190,184,172,0.94), rgba(190,184,172,0.74) 26%, rgba(190,184,172,0.10) 58%, transparent 74%);
}
.scrim--finish {
  clip-path: inset(0 0 0 calc(var(--edge) * 1%));
  background: linear-gradient(to top,
    rgba(6,11,18,0.95), rgba(6,11,18,0.80) 30%, rgba(6,11,18,0.24) 62%, transparent 80%);
}

/* copy. Never clipped: it is placed where the edge cannot reach it. */
.copy { position: absolute; z-index: 20; }
.copy--slab {
  left: var(--gut); bottom: clamp(3.4rem, 12vh, 8rem);
  width: min(24ch, 19vw);
  color: var(--slab-ink);
}
.copy--finish {
  right: var(--gut); bottom: clamp(3.4rem, 12vh, 8rem);
  width: min(40ch, 36vw);
  color: var(--fin-ink);
}
.copy--lead { left: var(--gut); right: auto; bottom: clamp(3.4rem, 12vh, 8rem); width: min(44ch, 46vw); }

/* a copy column that rides just clear of the work edge. The transform lives
   on this wrapper, never on the cued child: cues write transform too. */
.copy--nextedge {
  left: 0; right: auto; bottom: clamp(3.4rem, 12vh, 8rem);
  width: min(34ch, 30vw);
  transform: translate3d(calc(var(--edgepx) + 3.5vw), 0, 0);
  color: var(--fin-ink);
}
.copy--top { bottom: auto; top: clamp(4.5rem, 14vh, 9rem); width: min(40ch, 36vw); }

/* act 5 sits in the finish region at its widest, so its geometry is static
   and nothing reflows while the edge is moving. */
.act--flow { padding-block: var(--sc-6) var(--sc-8); }
.svcwrap { margin-left: 32vw; margin-right: var(--gut); max-width: 44rem; }

.scrim--close {
  background: linear-gradient(to top right,
    rgba(5,10,16,0.94) 0%, rgba(5,10,16,0.80) 28%, rgba(5,10,16,0.26) 54%, transparent 74%);
}

.on-slab { color: var(--slab-ink); --sc-ink: var(--slab-ink); --sc-ink-soft: var(--slab-ink-soft); }
.on-slab .lede, .on-slab .body { color: var(--slab-ink-soft); }

/* ----------------------------------------------------------------- type -- */

.d1, .d2, .d3 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
.d1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem); letter-spacing: -0.034em; }
.d2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.d3 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); letter-spacing: -0.018em; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.28rem);
  line-height: 1.5; letter-spacing: -0.01em;
  color: var(--fin-ink); margin: 0; text-wrap: pretty;
  max-width: 38ch;
}
.body {
  font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  line-height: 1.62; color: var(--fin-ink-soft); margin: 0;
  max-width: 56ch; text-wrap: pretty;
}
.label {
  font: 700 0.7rem/1.2 var(--sc-font-text);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fin-ink-soft); margin: 0;
}
.on-slab .label { color: var(--slab-ink-soft); }

.stack > * + * { margin-top: var(--sc-4); }
.stack > .d1 + *, .stack > .d2 + * { margin-top: var(--sc-5); }

.wordmark { display: block; width: clamp(150px, 15vw, 208px); height: auto; margin-bottom: var(--sc-5); }

/* ---------------------------------------------------------------- links -- */

.cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 52px; padding: 0.9rem 1.5rem;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: 0.01em;
  border-radius: var(--sc-r-pill); text-decoration: none;
  transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out),
              border-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.cta svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.cta--primary {
  background: var(--fin-accent); color: var(--fin-accent-ink);
  box-shadow: 0 2px 4px hsl(210 45% 3% / 0.4), 0 12px 26px -8px hsl(210 45% 3% / 0.55);
}
.cta--primary:hover { background: #62BCF0; }
.cta--ghost {
  color: var(--fin-ink); border: 1px solid rgba(237,243,248,0.34);
}
.cta--ghost:hover { border-color: var(--fin-ink); background: rgba(237,243,248,0.07); }
.cta:active { transform: translateY(1px); }

.ctarow { display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: center; }

/* --------------------------------------------------------------- act 03 -- */

.stagehead { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: var(--sc-3); }
.stagehead .num {
  font: 700 0.7rem/1 var(--sc-font-text); letter-spacing: 0.3em;
  color: var(--fin-accent);
}

.throw {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: var(--sc-4);
  font: 700 0.72rem/1 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fin-accent);
}
.throw::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px;
  background: var(--fin-accent); transform: rotate(24deg);
  animation: pulse 2.4s var(--sc-ease-out) infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* --------------------------------------------------------------- act 04 -- */

.figure-sean { position: absolute; inset: 0; }
.figure-sean img {
  position: absolute; right: 2vw; bottom: 0;
  height: min(78vh, 640px); width: auto; max-width: none;
  filter: drop-shadow(0 24px 44px rgba(2,7,12,0.6));
}
.bignum {
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(3.4rem, 2rem + 5vw, 6.4rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--fin-ink);
  font-variant-numeric: tabular-nums; margin: 0;
}
.bignum span { color: var(--fin-accent); }

/* --------------------------------------------------------------- act 05 -- */

.panel {
  background: var(--fin-surface);
  border: 1px solid rgba(237,243,248,0.1);
  box-shadow: var(--sc-e2), var(--sc-edge);
  border-radius: var(--sc-r-lg);
  padding: clamp(1.6rem, 3.4vw, 3.2rem);
}
.svc { list-style: none; margin: var(--sc-6) 0 0; padding: 0; }
.svc li {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--sc-5);
  align-items: center;
  padding-block: var(--sc-5);
  border-top: 1px solid rgba(237,243,248,0.12);
}
.svc li:first-child { border-top: 0; padding-top: 0; }
.svc img {
  width: 92px; height: 74px; object-fit: cover; display: block;
  border-radius: var(--sc-r-sm);
}
.svc h3 { font: 700 1.06rem/1.3 var(--sc-font-text); letter-spacing: -0.012em; margin: 0 0 0.2rem; color: var(--fin-ink); }
.svc p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--fin-ink-soft); }

/* --------------------------------------------------------------- act 06 -- */

.pair { position: absolute; inset: 0; margin: 0; }
.pair__imgs {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  transform: translate3d(calc(var(--edgepx) / 2), 0, 0);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  width: min(58vw, 760px);
  box-shadow: 0 6px 14px hsl(210 45% 3% / 0.5), 0 34px 70px -18px hsl(210 45% 3% / 0.6);
}
.pair__imgs img { width: 100%; height: clamp(220px, 42vh, 400px); object-fit: cover; display: block; }
.pair figcaption {
  position: absolute; left: 0; right: 0; bottom: clamp(2.6rem, 9vh, 6rem);
  text-align: center; transform: translate3d(calc(var(--edgepx) / 2), 0, 0);
}

.stars { display: inline-flex; align-items: center; gap: 0.5rem; }
.stars svg { width: 15px; height: 15px; fill: var(--fin-accent); }

/* --------------------------------------------------------------- act 07 -- */

.close-copy { max-width: min(50ch, 52vw); }
.meta { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); align-items: center; }
.yours { color: var(--fin-accent); }

/* -------------------------------------------------------------- footer --- */

.foot {
  position: relative; z-index: 1;
  background: var(--fin-ground);
  border-top: 1px solid rgba(237,243,248,0.12);
  padding: var(--sc-7) 0 var(--sc-6);
}
.foot__in {
  width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--gut);
  display: flex; flex-wrap: wrap; gap: var(--sc-5) var(--sc-8); align-items: flex-start;
}
.foot img { width: 44px; height: 44px; display: block; }
.foot a { color: var(--fin-ink); text-decoration: none; text-underline-offset: 4px; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--fin-accent); }
.foot dl { margin: 0; }
.foot dt {
  font: 700 0.66rem/1 var(--sc-font-text); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fin-ink-soft); margin-bottom: 0.55rem;
}
.foot dd { margin: 0 0 var(--sc-4); font-size: 1.02rem; }
.foot .fine { width: 100%; font-size: 0.86rem; color: var(--fin-ink-soft); margin: 0; padding-top: var(--sc-5); border-top: 1px solid rgba(237,243,248,0.1); }

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 860px) {
  :root { --rail: 58px; }

  .pane--slab   { clip-path: inset(0 0 calc(100% - var(--edge) * 1%) 0); }
  .pane--finish { clip-path: inset(calc(var(--edge) * 1%) 0 0 0); }
  .plate--slab  { clip-path: inset(0 0 calc(100% - var(--edge) * 1%) 0); }
  .plate--finish, .flake { clip-path: inset(calc(var(--edge) * 1%) 0 0 0); }
  .scrim--slab  { clip-path: inset(0 0 calc(100% - var(--edge) * 1%) 0); }
  .scrim--finish { clip-path: inset(calc(var(--edge) * 1%) 0 0 0); }
  .plate--slab img   { width: 100%; height: 66%; margin: 0; object-position: 50% 62%; }
  .plate--finish img { width: 100%; height: 86%; margin: 14% 0 0; object-position: 50% 56%; }
  .plate--full img   { width: 100%; height: 100%; margin: 0; }

  .edge {
    width: 100%; height: var(--rail);
    transform: translate3d(0, calc(var(--edgepx) - var(--rail) / 2), 0);
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0 var(--gut);
    background: linear-gradient(180deg, rgba(6,10,16,0) 0%, rgba(6,10,16,0.82) 24%, rgba(6,10,16,0.94) 50%, rgba(6,10,16,0.82) 76%, rgba(6,10,16,0) 100%);
  }
  .edge::after {
    top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px;
    margin-left: 0; margin-top: -1px;
    background: linear-gradient(90deg, rgba(63,169,232,0.15), var(--fin-accent) 18%, var(--fin-accent) 82%, rgba(63,169,232,0.15));
  }
  .edge__mark img { width: 30px; height: 30px; }
  .edge__stages {
    writing-mode: horizontal-tb; flex-direction: row; margin: 0; gap: 0;
    font-size: 0.62rem; letter-spacing: 0.26em;
  }
  .edge__stages li { display: none; }
  .edge__stages li[data-on="true"] { display: block; }
  .edge__call {
    writing-mode: horizontal-tb; min-height: 40px; min-width: 0;
    padding: 0.6rem 0.95rem; font-size: 0.7rem; letter-spacing: 0.12em;
  }

  .sidelabel { font-size: 0.6rem; letter-spacing: 0.24em; }
  .sidelabel--finish { right: auto; left: var(--gut); top: auto; bottom: clamp(0.9rem, 2.4vh, 1.6rem); }

  .copy--slab {
    left: var(--gut); right: var(--gut); top: clamp(3.2rem, 8vh, 5rem); bottom: auto;
    width: auto; max-width: 32ch;
  }
  .copy--nextedge {
    left: var(--gut); right: var(--gut); bottom: clamp(4.6rem, 11vh, 7rem);
    width: auto; transform: none;
  }
  .copy--top {
    top: auto; bottom: clamp(4.6rem, 11vh, 7rem); width: auto;
  }
  .svcwrap { margin: 0 var(--gut); max-width: none; }
  .pair__imgs, .pair figcaption { transform: translate3d(0, calc(var(--edgepx) / 2), 0); }
  .copy--finish, .copy--lead {
    left: var(--gut); right: var(--gut); bottom: clamp(4.6rem, 11vh, 7rem);
    width: auto; max-width: none;
  }
  .close-copy { max-width: none; }

  .d1 { font-size: clamp(2.1rem, 1.5rem + 3.4vw, 2.9rem); }
  .lede { font-size: 1.02rem; max-width: none; }

  .scrim--slab {
    background: linear-gradient(to bottom,
      rgba(190,184,172,0.9), rgba(190,184,172,0.62) 34%, rgba(190,184,172,0.06) 66%, transparent 82%);
  }

  .figure-sean img { right: 50%; translate: 50% 0; height: min(52vh, 420px); }

  .svc li { grid-template-columns: 68px 1fr; gap: var(--sc-4); padding-block: var(--sc-4); }
  .svc img { width: 68px; height: 56px; }

  .pair__imgs { width: calc(100% - var(--gut) * 2); gap: 2px; }
  .pair__imgs img { height: clamp(150px, 26vh, 230px); }
  .pair figcaption { bottom: clamp(1.6rem, 6vh, 3rem); padding-inline: var(--gut); }

  .foot__in { gap: var(--sc-5); }
}

/* ------------------------------------------------------ reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  /* The edge still moves: it is the argument, not decoration. But it steps
     once per act instead of tracking every frame, and nothing else travels. */
  .pane, .plate, .scrim, .flake { transition: clip-path 420ms var(--sc-ease-out); }
  .edge { transition: transform 420ms var(--sc-ease-out); }
  .sheen { display: none; }
  .throw::before { animation: none; opacity: 1; }
  .cta, .edge__call { transition-duration: 1ms; }
}

/* ------------------------------------------------------------- no script -- */
/* Without JS the engine never runs, cues stay at opacity 0 and the work edge
   never moves. Fall all the way back to an ordinary stacked document. */

.nojs .ground,
.nojs .flake,
.nojs .sheen,
.nojs .sidelabel,
.nojs .sc-grain { display: none; }

.nojs body { background: var(--fin-ground); }

.nojs .edge {
  position: static; width: 100%; height: auto; transform: none;
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-4) var(--gut);
  background: var(--fin-surface);
  border-bottom: 1px solid rgba(237,243,248,0.12);
}
.nojs .edge::after { display: none; }
.nojs .edge__stages { display: none; }
.nojs .edge__call { writing-mode: horizontal-tb; min-height: 44px; padding: 0.7rem 1.1rem; }

.nojs .stage { position: static; height: auto; overflow: visible; padding-block: var(--sc-8); }
.nojs .act { border-top: 1px solid rgba(237,243,248,0.1); }
.nojs .plate, .nojs .copy, .nojs .pair, .nojs .figure-sean {
  position: static; clip-path: none !important; inset: auto;
  width: auto; max-width: 72rem; margin-inline: auto;
  padding-inline: var(--gut);
}
.nojs .scrim { display: none; }
.nojs .plate img { height: clamp(220px, 46vh, 460px); border-radius: var(--sc-r-md); }
.nojs .figure-sean img { position: static; height: auto; width: min(320px, 70vw); translate: none; }
.nojs .copy { margin-block: var(--sc-6); }
.nojs .copy--slab { color: var(--fin-ink); }
.nojs .on-slab .label, .nojs .on-slab .lede, .nojs .on-slab .body { color: var(--fin-ink-soft); }
.nojs .pair__imgs { position: static; translate: none; width: auto; }
.nojs .pair figcaption { position: static; text-align: left; margin-top: var(--sc-3); }
.nojs [data-sc-cue], .nojs [data-sc-in], .nojs [data-sc-stagger] > * {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}
.nojs .throw { display: none; }