/* RESO-1 — Strawberry Hill Electronics (display mockup)
   Stage: warm near-black. One accent: signal orange, two values.
   Type: Anton (display) + IBM Plex Mono (everything else).

   Vertical rhythm (product-launch, classic-premium pole; see
   web-soul-solo/references/spacing.md):
   tight 24px (spec/patch row beat) · base 160px (walking beat)
   · grand 480px = 3x base, spent twice: before #play (the device
   you can touch) and before #preorder (the price). Hero→first is
   a half beat (80px). Pre-footer compresses to 0.85x. One constant
   content column at ~86% of 1440 (1296px), text measures far
   narrower (46–62ch), never varied per section. */

:root {
  --ground: #0e0c0a;
  --panel: #17140f;
  --line: #2e2a20;
  --ink: #ece7de;
  --ink-dim: #a89f8d;
  --accent: #ff4d00;        /* fills, large display only */
  --accent-lift: #ff7a45;   /* small text on dark */
  --key-face: #ece7de;

  /* Sampled out of the five FSA/OWI frames with PIL mediancut (8-12 colours,
     read by proportion). The stage (--ground) and the signal orange are the
     brand and OUTRANK every swatch below; the sample is spent on neutrals and
     on the duotone the photographs are toned into, so they sit in the same
     room as the device.
       loom  (colour)  #11150c 15%  #0e1208 12%  #0b1007 10%   the room
                       #4b3210      #6e5226      #2a1e0b       the copper
                       #d7caa7      #bfb896      #afa884       the bone
       b&w frames      #1e1e1e 14%  #4c4c4c 13%  #a7a7a7 14%  #cfcfcf 13%  */
  --photo-black: #0f1109;        /* the ground the photographs are toned onto */
  --photo-copper: #4b3210;       /* wire-bundle mid: hairlines on prints */
  --photo-copper-lift: #6e5226;
  --photo-bone: #d7caa7;         /* the highlight the duotone runs up to */
  --neutral-mid: #4c4c4c;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --disp: "Anton", "Arial Narrow", sans-serif;
  --wrap: 1296px;
  /* rhythm tokens — every section gap derives from these */
  --gap-tight: 24px;    /* density beat inside spec table / demo list */
  --gap-base: 160px;    /* base beat between ordinary sections */
  --gap-grand: 480px;   /* 3x base, spent before #play and #preorder */
  --half-base: 80px;    /* each section carries half the base beat */
  --grand-extra: 320px; /* grand minus the two adjoining half-beats */
}
@media (max-width: 860px) {
  :root { --half-base: 48px; --grand-extra: 128px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 84px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  overflow-x: clip; /* the decorative device glow bleeds past 390px viewports */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: var(--ink); }
a:hover { color: var(--accent-lift); }
:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; border-radius: 2px; }

h1, h2 {
  font-family: var(--disp);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .01em;
  text-transform: uppercase;
}
h2 { font-size: clamp(28px, 4.2vw, 46px); margin-bottom: 20px; }

kbd {
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--ink-dim);
}

/* ── Skip link ─────────────────────────────────────────── */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 60;
  background: var(--accent); color: #140700; padding: 10px 16px;
  font-weight: 600; text-decoration: none; border-radius: 0 0 6px 6px;
  transition: top .15s ease;
}
.skip:focus { top: 0; color: #140700; }

/* ── For-sale banner ───────────────────────────────────── */
.forsale { background: var(--ink); color: #221d15; }
.forsale-in {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-top: 9px; padding-bottom: 9px;
  font-size: 12.5px; line-height: 1.5;
}
.forsale-detail { color: #5c5546; }
.forsale-buy { white-space: nowrap; }
.forsale-buy a { color: #221d15; font-weight: 600; }
.forsale-buy a:hover { color: #7a2a00; }

/* ── Header ────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 12, 10, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; }
.mark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.mark-txt { font-family: var(--disp); font-size: 20px; letter-spacing: .06em; }
.mark-sub { font-size: 11px; color: var(--ink-dim); letter-spacing: .04em; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 13.5px; color: var(--ink-dim); padding: 6px 2px; }
.nav a:hover { color: var(--ink); }

.btn {
  display: inline-block; text-decoration: none; font-family: var(--mono);
  font-weight: 600; border: 0; cursor: pointer;
}
.btn-solid {
  background: var(--accent); color: #140700;
  padding: 10px 20px; border-radius: 6px; font-size: 14px;
}
.btn-solid:hover { background: var(--accent-lift); color: #140700; }
.btn-solid:active { transform: translateY(1px); }
.btn-lg { padding: 15px 28px; font-size: 15px; }
.head-btn { white-space: nowrap; }

@media (max-width: 900px) {
  .nav { display: none; }
  .mark-sub { display: none; }
  .head-in { justify-content: space-between; }
}

/* ── The stage ─────────────────────────────────────────── */
/* Everything is fully legible at rest; scrolling RUNS the machine
   (knobs sweep, the sequencer playhead chases) instead of revealing it. */
.reveal { position: relative; }
html.conduct .reveal { height: 260vh; }
.stage { padding: 56px 0 0; } /* hero→first = half beat: the 80px on .feat only */
html.conduct .stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: flex-start; overflow: hidden;
  padding: 96px 0 14px;
}
.stage-in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px; align-items: center; width: 100%;
}
.stage-kicker {
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 8px;
}
.stage-h1 {
  font-size: clamp(48px, min(7vw, 9vh), 112px);
  color: var(--ink);
  letter-spacing: .015em;
  line-height: .9;
}
.stage-sub {
  max-width: 46ch; margin: 12px 0 0;
  color: var(--ink-dim); font-size: 15.5px;
}
.bench-notes { margin-top: 12px; max-width: 46ch; }
.bench-notes div {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px;
  padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.bench-notes dt {
  color: var(--ink-dim); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; padding-top: 2px;
}
.bench-notes dd { font-size: 13.5px; }
.stage-copy .fn { margin-top: 6px; }
.stage-copy .stage-price { margin-top: 8px; }
.stage-copy .stage-cta { margin-top: 8px; }
.device-wrap {
  position: relative;
  max-width: 680px; margin: 0 auto;
}
.device { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.device-glow {
  position: absolute; inset: -14% -10%;
  background:
    radial-gradient(ellipse 62% 55% at 50% 38%, rgba(255, 77, 0, .26), transparent 68%),
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(236, 231, 222, .07), transparent 70%);
  pointer-events: none;
}
/* Invisible playable keys over the drawn keybed. JS-only enhancement. */
.dev-keys {
  position: absolute; z-index: 2;
  left: 6.9%; top: 64.5%; width: 86.2%; height: 26%;
  display: flex; gap: 1%;
}
html:not(.js) .dev-keys { display: none; }
.dkey {
  flex: 1; background: transparent; border: 0; cursor: pointer;
  border-radius: 8px; padding: 0;
}
.dkey:hover { background: rgba(255, 77, 0, .14); }
.dkey.down, .dkey:active { background: rgba(255, 77, 0, .45); }
.stage-deej { margin: 18px auto 0; max-width: 640px; }
.stage-price { margin-top: 22px; }
.price-num {
  font-family: var(--disp); font-size: clamp(34px, 4.4vw, 52px);
  color: var(--accent); letter-spacing: .02em; vertical-align: middle;
}
.price-note { color: var(--ink-dim); font-size: 13.5px; margin-left: 12px; }
.stage-cta { margin-top: 20px; }
.stage-hint {
  margin-top: 14px; text-align: center;
  font-size: 11.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-dim);
  display: none;
}
html.conduct .stage-hint { display: block; animation: hint-bob 1.2s ease-in-out 4; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Conductor choreography: JS writes --kc, --kr, --seq onto .reveal.
   The custom properties inherit into the hero's <use> clone; the crop
   figures never receive them, so they stay at rest. */
.kptr { transform-box: view-box; }
.kptr-cut { transform: rotate(calc(var(--kc, 0) * 1deg)); transform-origin: 298px 128px; }
.kptr-res { transform: rotate(calc(var(--kr, 0) * 1deg)); transform-origin: 388px 128px; }
#seq-play { transform: translateX(calc(var(--seq, 0) * 40px)); }

@media (max-width: 960px) {
  .stage { padding: 44px 0 0; }
  .stage-in { grid-template-columns: 1fr; gap: 36px; }
  .stage-h1 { font-size: clamp(64px, 15vw, 120px); }
}

/* ── Voice tags + footnotes ────────────────────────────── */
.v-tag {
  display: inline-block; vertical-align: 1px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-lift); border: 1px solid rgba(255, 122, 69, .45);
  border-radius: 4px; padding: 1px 6px; margin-right: 8px;
}
.v-d { color: var(--ink-dim); }
.fn {
  font-size: 12.5px; color: var(--ink-dim); line-height: 1.6;
  max-width: 56ch; margin-top: 14px;
}
.fn a { color: var(--accent-lift); text-decoration: none; padding: 2px; }
.fnr { line-height: 0; }
.fnr a { color: var(--accent-lift); text-decoration: none; padding: 2px; font-weight: 600; }

/* ── Feature sections ──────────────────────────────────── */
.feat { border-top: 1px solid var(--line); padding: var(--half-base) 0; }
.feat-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px; align-items: center;
}
.feat-flip .feat-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feat-flip .feat-copy { order: 2; }
.feat-flip .feat-fig { order: 1; }
.feat-no {
  color: var(--accent-lift); font-size: 12.5px; letter-spacing: .2em;
  margin-bottom: 14px;
}
.feat-copy p { margin-top: 14px; color: var(--ink-dim); max-width: 56ch; }
.feat-fig { min-width: 0; }
.crop {
  display: block; width: 100%; height: auto;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px;
}
.crop-cap { margin-top: 10px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; }
.crop-tall { max-width: 250px; margin: 0 auto; }
.feat-fig:has(.crop-tall) .crop-cap { max-width: 340px; margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .feat-grid, .feat-flip .feat-grid { grid-template-columns: 1fr; gap: 28px; }
  .feat-flip .feat-copy { order: 1; }
  .feat-flip .feat-fig { order: 2; }
}

/* ── Play it ───────────────────────────────────────────── */
/* GRAND PAUSE #1: 320px of bare ground before the playable device */
.play { border-top: 1px solid var(--line); padding: var(--half-base) 0; background: var(--panel); margin-top: var(--grand-extra); }
.play-lede { max-width: 62ch; color: var(--ink-dim); margin-bottom: 34px; }
.keys {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.key {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  background: var(--key-face); color: #221d15;
  border: 1px solid #080706; border-bottom: 5px solid #55503f;
  border-radius: 8px;
  min-height: 128px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; padding: 12px 4px;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.key .key-kbd { font-size: 10.5px; color: #8a8170; font-weight: 400; }
.key:hover { background: #fff9ec; }
.key.down, .key:active {
  background: var(--accent); color: #140700;
  border-bottom-width: 2px; transform: translateY(3px);
}
.key.down .key-kbd, .key:active .key-kbd { color: #5c2000; }
.play-ctl { display: flex; gap: 36px; margin-top: 30px; flex-wrap: wrap; }
.play .fn { margin-top: 22px; }
.ctl {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; letter-spacing: .18em; color: var(--ink-dim);
}
.ctl input[type="range"] {
  width: 200px; accent-color: var(--accent); height: 24px;
}
@media (max-width: 700px) {
  .keys { grid-template-columns: repeat(4, 1fr); }
  .key { min-height: 96px; }
}

/* ── Demos ─────────────────────────────────────────────── */
.demos { border-top: 1px solid var(--line); padding: var(--half-base) 0; }
.demos-lede { color: var(--ink-dim); max-width: 62ch; margin-bottom: 30px; }
.patch-list { list-style: none; border-top: 1px solid var(--line); }
.patch { border-bottom: 1px solid var(--line); }
.patch-btn {
  display: flex; align-items: baseline; gap: 18px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--mono); color: var(--ink);
  padding: 14px 8px; /* density zone: rows run a 28px micro-beat */
}
.patch-btn:hover { background: rgba(255, 77, 0, .06); }
.patch-ic { color: var(--accent-lift); font-size: 13px; width: 20px; flex: none; }
.patch-name { font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.patch-meta { margin-left: auto; color: var(--ink-dim); font-size: 12.5px; text-align: right; }
.patch-btn[aria-pressed="true"] { background: rgba(255, 77, 0, .1); }
.patch-btn[aria-pressed="true"] .patch-name { color: var(--accent-lift); }
@media (max-width: 700px) {
  .patch-btn { flex-wrap: wrap; gap: 8px 14px; }
  .patch-meta { margin-left: 34px; width: 100%; text-align: left; }
}

/* ── Specs ─────────────────────────────────────────────── */
.specs { border-top: 1px solid var(--line); padding: var(--half-base) 0; background: var(--panel); }
.specs-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.spec-table div {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px;
  padding: 12px 0; border-bottom: 1px dashed var(--line);
}
.spec-table dt { color: var(--ink-dim); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.spec-table dd { font-size: 14.5px; }
@media (max-width: 860px) {
  .specs-grid { grid-template-columns: 1fr; gap: 24px; }
  .spec-table div { grid-template-columns: 110px 1fr; gap: 12px; }
}

/* ── Preorder ──────────────────────────────────────────── */
/* GRAND PAUSE #2: same 320px of silence before the price and the ask */
.preorder { border-top: 1px solid var(--line); padding: var(--half-base) 0; margin-top: var(--grand-extra); }
.pre-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.pre-lede { color: var(--ink-dim); margin-top: 6px; max-width: 56ch; }
.pre-note { margin-top: 16px; max-width: 56ch; }
.pre-note a { color: var(--accent-lift); }
.pre-meta { margin-top: 28px; }
.pre-meta div {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.pre-meta dt { color: var(--ink-dim); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.pre-meta dd { font-size: 14px; }
.pre-deej { margin-top: 22px; max-width: 56ch; font-size: 13.5px; }

.pre-form {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px;
}
.f-row { margin-bottom: 18px; }
.f-row label {
  display: block; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 7px;
}
.f-row input, .f-row select {
  width: 100%; font-family: var(--mono); font-size: 15px;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 11px 12px; min-height: 44px;
}
.f-row input:focus-visible, .f-row select:focus-visible {
  outline: 2px solid var(--accent-lift); outline-offset: 1px; border-color: var(--accent-lift);
}
.f-act { margin-top: 24px; }
.f-act .btn { width: 100%; }
.f-err { margin-top: 14px; color: var(--accent-lift); font-size: 13.5px; }
.f-ok {
  margin-top: 14px; font-size: 14px; line-height: 1.6;
  border-left: 3px solid var(--accent); padding-left: 14px;
}
@media (max-width: 860px) {
  .pre-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ── Footer ────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); padding: 56px 0 32px; }
.foot-in {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 40px;
}
.foot-brand > p:last-child { color: var(--ink-dim); font-size: 13.5px; margin-top: 12px; max-width: 44ch; }
.mark-foot { gap: 8px; }
.mark-foot span { font-family: var(--disp); font-size: 17px; letter-spacing: .06em; }
.foot-h { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px; }
.foot-col p { margin-bottom: 6px; font-size: 13.5px; }
.foot-col a { text-decoration-color: var(--line); }
.foot-fine {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--ink-dim); font-size: 12px;
}
@media (max-width: 700px) {
  .foot-in { grid-template-columns: 1fr; gap: 28px; }
}

/* === THE TWO MOTION THEMES ==================================
   Everything that moves on this page is one of exactly two moves,
   repeated the whole way down (identity-first.md section 9). No third.

   1. "THE SWEEP" - travel along one axis, driven by scroll position and
      never by a timer. The CUT and RES knobs rotating, the sequencer
      playhead crossing its sixteen steps, and every photographic plate
      drifting a few pixels against its frame as it passes. It is the
      machine running, so it only ever runs while you are running it.
      Used on: .kptr-cut, .kptr-res, #seq-play, .plate img, .matband img,
      .bg-photo.

   2. "THE WARM-UP" - arrive out of the ground and settle, once. Marisa's
      drift spec made visual: a thing appears slightly off and is correct
      a moment later. Opacity plus a short translate, never a scale,
      never a bounce. Used on: every [data-rise], .key.down, .dkey.down,
      .patch-btn[aria-pressed="true"].

   Both themes are gated behind prefers-reduced-motion at the bottom of
   this file; with motion reduced the page is the same page, at rest and
   fully legible. Nothing is revealed by motion, only run by it. */

/* -- Photographic surfaces ------------------------------- */
/* Grain, over darks only. It is also the reason text on the bench
   photograph measures better than it looks: it lifts local contrast. */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .055;
}
.bench .grain::after { opacity: .13; }   /* stronger noise on the inverted section */
.matband.grain::after { opacity: .10; z-index: 3; }  /* stronger noise on the inverted section */

/* A framed print. The hairline is the copper sampled out of the wire
   bundle rather than --line, so a photograph reads as a print and a
   device crop reads as a drawing. */
.plate {
  position: relative; margin: 0;
  border: 1px solid rgba(110, 82, 38, .55);
  border-radius: 12px; overflow: hidden;
  background: var(--photo-black);
}
.plate img { display: block; width: 100%; height: auto; }
.plate-cap { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.arch {
  margin-top: 8px; font-size: 11px; letter-spacing: .04em;
  color: #bf9558; line-height: 1.55;   /* 6.70:1 on --panel, 7.12:1 on --ground */
}
.arch a { color: #bf9558; }

/* -- The bench: the one inverted, photo-background section -- */
.bench {
  position: relative; isolation: isolate;
  border-top: 1px solid var(--line);
  padding: calc(var(--half-base) + 26px) 0;
  background: var(--photo-black);
  overflow: hidden;
}
.bg-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 64% 44%;
}
.bench-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(97deg,
      rgba(14, 12, 10, .972) 0%,
      rgba(14, 12, 10, .952) 36%,
      rgba(14, 12, 10, .82) 54%,
      rgba(14, 12, 10, .50) 74%,
      rgba(14, 12, 10, .36) 100%),
    radial-gradient(ellipse 80% 72% at 50% 50%, transparent 32%, rgba(14, 12, 10, .74) 100%);
}
.bench-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 64px; align-items: end;
}
/* margin of safety: nothing photographic crosses into the copy block */
.bench-copy { max-width: 52ch; padding-right: 14px; }
.bench-copy h2 { font-size: clamp(30px, 3.4vw, 40px); }  /* mid-size, not hero-size */
.bench-copy p { margin-top: 14px; }
.bench-copy .fn { color: var(--ink-dim); }
.bench-plate { margin-bottom: -5%; }      /* the larger element sits lower */
.bench-plate .plate { box-shadow: 0 26px 60px rgba(0, 0, 0, .6); border-radius: 12px 12px 0 0; border-bottom: 0; }
/* margin of safety, part two: the caption block carries its own ground so it
   never has to be legible against whatever the photograph is doing behind it */
.plate-foot {
  background: rgba(9, 8, 6, .90);
  border: 1px solid rgba(110, 82, 38, .30); border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 12px 14px 14px;
}
.plate-foot .plate-cap { margin-top: 0; }
@media (max-width: 960px) {
  .bench-grid { grid-template-columns: 1fr; gap: 34px; }
  .bench-plate { margin-bottom: 0; max-width: 460px; }
  .bench-scrim {
    background:
      linear-gradient(180deg, rgba(14,12,10,.93) 0%, rgba(14,12,10,.90) 54%, rgba(14,12,10,.62) 100%),
      radial-gradient(ellipse 92% 74% at 50% 40%, transparent 26%, rgba(14,12,10,.70) 100%);
  }
  .bg-photo { object-position: 58% 40%; }
}

/* -- A photographed material as a section divider (no text) - */
.matband {
  position: relative; height: 190px; overflow: hidden;
  background: var(--photo-black);
  border-top: 1px solid var(--line);
}
.matband img {
  display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
  opacity: .70;
}
.matband::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, var(--ground) 0%, transparent 36%, transparent 64%, var(--ground) 100%),
    linear-gradient(90deg, var(--ground) 0%, transparent 20%, transparent 80%, var(--ground) 100%);
}
@media (max-width: 700px) { .matband { height: 132px; } }

/* -- Photographs inside demos and specs ------------------ */
.demos-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px; align-items: start;
}
.specs-photo { margin-top: 30px; }
@media (max-width: 860px) {
  .demos-grid { grid-template-columns: 1fr; gap: 34px; }
  .specs-photo { max-width: 460px; }
}

/* -- Footer credit block --------------------------------- */
.foot-credit {
  margin-top: 18px; font-size: 11.5px; line-height: 1.65;
  color: var(--ink-dim); max-width: 78ch;
}
.foot-credit a { color: #bf9558; }
.foot-credit strong { color: var(--photo-bone); font-weight: 500; }

/* ── Rise-in reveals ───────────────────────────────────── */
/* MOTION THEME 2: "THE WARM-UP" */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-rise] {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
  }
  html.js [data-rise].on { opacity: 1; transform: none; }
}

/* MOTION THEME 1: "THE SWEEP", carried onto the photographs.
   Scroll-linked, CSS-only, no JS and no timer: the plate travels a few
   pixels along one axis across its own pass, exactly as the knobs and the
   playhead do. Where view() is unsupported the plate simply sits still,
   which is also what happens when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .plate img, .matband img {
      animation: sweep-y linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    .bg-photo {
      animation: sweep-bg linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}
@keyframes sweep-y {
  from { transform: translate3d(0, 1.7%, 0) scale(1.05); }
  to   { transform: translate3d(0, -1.7%, 0) scale(1.05); }
}
@keyframes sweep-bg {
  from { transform: translate3d(0, -2.4%, 0) scale(1.07); }
  to   { transform: translate3d(0, 2.4%, 0) scale(1.07); }
}