:root {
  --mono: 'Sometype Mono', ui-monospace, monospace;
  --sans: 'Karla', system-ui, sans-serif;
  --serif: 'Fraunces', serif;
  --hero-black: #000;
  --hero-paper-wash: 0;
  --hero-paper-fill: 0;
  --hero-copy-opacity: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.has-marketing-snap {
  scroll-behavior: auto;
  scroll-padding-top: 52px;
  scroll-snap-type: y proximity;
}
html.is-hero-autoplay { scroll-behavior: auto; }
html.has-marketing-snap.is-hero-autoplay { scroll-snap-type: none; }
body {
  margin: 0;
  padding-top: 52px;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.home-hero-active { background: #000; }
a { color: inherit; }

.home-main { overflow: clip; }
.cinematic {
  position: relative;
  height: 400vh;
  /* Keep the scrollable motion distance stable while the browser toolbar
     changes dvh: the dynamic portion is exactly canceled by the sticky scene. */
  height: calc(300svh + 100dvh);
  background: #000;
  color: var(--paper);
  isolation: isolate;
}
.cinematic__sticky {
  position: sticky;
  top: 52px;
  width: 100%;
  height: calc(100vh - 52px);
  height: calc(100dvh - 52px);
  overflow: hidden;
  background: #000;
}
.cinematic__canvas,
.cinematic__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cinematic__canvas {
  display: block;
  opacity: 0;
  transition: opacity 700ms ease;
}
.hero__poster {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__poster img,
.designer-demo__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cinematic.is-live .cinematic__canvas { opacity: 1; }
.cinematic.is-autoplay-pending .cinematic__canvas { transition-duration: 0ms; }
.cinematic.is-static { height: auto; }

.cinematic__wash {
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 50% 60%, #fff 0, #fff 23%, rgba(255,255,255,.94) 44%, transparent 68%);
  opacity: var(--hero-paper-wash);
  transform: scale(calc(.28 + var(--hero-paper-wash) * 3.4));
  transform-origin: 50% 60%;
  will-change: transform, opacity;
}
.cinematic__wash::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: #fff;
  opacity: var(--hero-paper-fill);
}

.cinematic__handoff {
  position: relative;
  z-index: 5;
  display: grid;
  align-items: center;
  min-height: calc(100vh - 52px);
  min-height: calc(100svh - 52px);
  margin-top: calc(-100vh + 52px);
  margin-top: calc(-100dvh + 52px);
  background: transparent;
  color: var(--ink);
  isolation: isolate;
}
.cinematic__handoff:not(.is-enter-pending),
.cinematic__handoff.is-revealed { background: var(--paper); }
.cinematic__handoff::after {
  content: '';
  position: fixed;
  z-index: 3;
  inset: 52px 0 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 1050ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  will-change: opacity;
}
.cinematic__handoff.is-light-held::after {
  opacity: 1;
  transition-duration: 0ms;
}
.cinematic__handoff.is-revealed::after { opacity: 0; }
html.is-design-exit .cinematic__handoff .paper-wrap,
html.is-design-exit .marketing-scroll-cue {
  opacity: 0 !important;
  transition-property: opacity;
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
html.is-design-exit body::after {
  content: '';
  position: fixed;
  z-index: 100000;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
html.is-design-exit-ready body::after { opacity: 1; }
.cinematic__handoff.is-snap-armed {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.marketing-scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(0px, calc(2vh - 10px), 10px);
  width: 24px;
  height: 24px;
  color: rgba(35, 29, 22, .48);
  opacity: 0;
  transform: translateX(-50%);
  transition-property: opacity;
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  pointer-events: none;
}
.cinematic__handoff.is-scroll-cue-visible .marketing-scroll-cue { opacity: 1; }
.marketing-scroll-cue svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: marketing-scroll-cue-float 1800ms ease-in-out infinite;
  will-change: transform;
}
@keyframes marketing-scroll-cue-float {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
.cinematic__handoff .authorship {
  gap: clamp(48px, 6vw, 96px);
  padding: clamp(72px, 10vh, 112px) 0;
  border-bottom: 0;
}
/* Phones keep the CTA as a direct grid item of the copy block; the wrapper
   only becomes a box in the desktop composition below. */
.authorship__cta { display: contents; }
.cinematic__handoff .paper-wrap { width: min(1360px, calc(100% - 56px)); }
.authorship__identity { min-width: 0; }
.cinematic__handoff .authorship__identity > h2 {
  margin-bottom: clamp(26px, 4vh, 38px);
  line-height: 1.02;
}
.designer-demo {
  display: grid;
  grid-template-columns: minmax(230px, .95fr) minmax(220px, 1.05fr);
  gap: clamp(24px, 2.8vw, 40px);
  align-items: center;
  margin: 0;
  padding: clamp(18px, 2vw, 26px);
  background: #fff;
  outline: 1px solid rgba(255, 255, 255, .92);
  outline-offset: -1px;
  box-shadow:
    0 1px 2px rgba(35, 29, 22, .025),
    0 8px 24px rgba(35, 29, 22, .035);
}
.designer-demo__canvas {
  display: block;
  width: 100%;
  height: clamp(260px, 36vh, 340px);
  border-radius: 6px;
}
.designer-demo__poster {
  display: none;
  width: 100%;
  height: clamp(260px, 36vh, 340px);
  overflow: hidden;
  border-radius: 6px;
  background: #f8f6f0;
}
.designer-demo.has-static-poster .designer-demo__canvas { display: none; }
.designer-demo.has-static-poster .designer-demo__poster { display: block; }
.designer-demo__controls { display: grid; min-width: 0; gap: clamp(16px, 2.1vh, 22px); }
.designer-demo__slider {
  --demo-value: .5;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
}
.designer-demo__label {
  font: 500 13px/1 var(--sans);
  letter-spacing: .01em;
}
.designer-demo__value {
  color: var(--ikb);
  font: 400 11px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.designer-demo__track {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  height: 18px;
}
.designer-demo__track::before,
.designer-demo__track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  transform: translateY(-50%);
}
.designer-demo__track::before {
  right: 0;
  background: var(--line);
}
.designer-demo__track::after {
  width: calc(var(--demo-value) * 100%);
  background: var(--line-dark);
}
.designer-demo__thumb {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(var(--demo-value) * 100%);
  width: 12px;
  height: 12px;
  border: 2px solid var(--line-dark);
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
}
.designer-demo__colors {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  padding-top: 2px;
}
.designer-demo__color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--demo-color);
  outline: 1px solid rgba(0, 0, 0, .14);
  outline-offset: -1px;
  box-shadow: 0 0 0 0 rgba(0, 47, 167, 0);
  opacity: .62;
  transform: scale(.92);
  transition-property: opacity, transform, box-shadow;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.designer-demo__color.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ikb);
  opacity: 1;
  transform: scale(1);
}
.cinematic__handoff.is-enter-pending .designer-demo,
.cinematic__handoff.is-enter-pending .authorship__identity > .eyebrow,
.cinematic__handoff.is-enter-pending .authorship__identity > h2,
.cinematic__handoff.is-enter-pending .authorship__copy {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(12px) scale(.99);
  transform-origin: 50% 100%;
  transition-property: opacity, filter, transform;
  transition-duration: 620ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.cinematic__handoff.is-enter-pending.is-revealed .designer-demo,
.cinematic__handoff.is-enter-pending.is-revealed .authorship__identity > .eyebrow,
.cinematic__handoff.is-enter-pending.is-revealed .authorship__identity > h2,
.cinematic__handoff.is-enter-pending.is-revealed .authorship__copy {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}
.cinematic__handoff.is-enter-pending.is-revealed .authorship__identity > .eyebrow,
.cinematic__handoff.is-enter-pending.is-revealed .authorship__identity > h2 { transition-delay: 260ms; }
.cinematic__handoff.is-enter-pending.is-revealed .designer-demo { transition-delay: 360ms; }
.cinematic__handoff.is-enter-pending.is-revealed .authorship__copy { transition-delay: 460ms; }

.cinematic__copy {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 28px;
  text-align: center;
  opacity: var(--hero-copy-opacity);
  pointer-events: none;
}
.cinematic__copy h1 {
  max-width: 10ch;
  margin: 0 0 clamp(30px, 3.5vh, 48px);
  font: italic 350 clamp(54px, 8vw, 118px)/.92 var(--serif);
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0,0,0,.72);
}
.cinematic__copy .primary-link { pointer-events: auto; }
.scroll-cue {
  appearance: none;
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(clamp(20px, 3.5dvh, 34px), calc(env(safe-area-inset-bottom, 0px) + 8px));
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 18px 5px;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  color: rgba(250,248,244,.72);
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: var(--hero-copy-opacity);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition-property: color, scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.scroll-cue:hover { color: rgba(250,248,244,.96); }
.scroll-cue[hidden] { display: none; }
.scroll-cue:active { scale: .96; }
.scroll-cue:focus { outline: none; }
.scroll-cue:focus-visible {
  outline: 1px dashed rgba(250,248,244,.82);
  outline-offset: 3px;
}
.scroll-cue__label {
  display: block;
  padding-inline-start: .2em;
  white-space: nowrap;
}
.scroll-cue__arrow {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: hero-scroll-cue-float 1800ms ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-scroll-cue-float {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ikb);
  color: #fff;
  font: 500 11px/1 var(--mono);
  letter-spacing: .2em;
  text-indent: .2em;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
  transition: background 180ms ease, letter-spacing 180ms ease, transform 180ms ease;
}
.primary-link:hover { background: var(--line-dark); letter-spacing: .245em; }
.primary-link:active { transform: scale(.96); }
.primary-link:focus-visible,
.text-link:focus-visible,
.design-card:focus-visible { outline: 2px solid var(--ikb); outline-offset: 5px; }

.paper-act {
  position: relative;
  z-index: 5;
  margin-top: -2px;
  background: var(--paper);
}

.cinematic.is-static .cinematic__sticky {
  position: relative;
  top: 0;
  height: auto;
  overflow: visible;
}
.cinematic.is-static .cinematic__canvas {
  inset: 0 0 auto;
  height: calc(100vh - 52px);
  height: calc(100dvh - 52px);
}
.cinematic.is-static.has-static-poster .cinematic__canvas { display: none; }
.cinematic.is-static.has-static-poster .hero__poster { display: block; }
.cinematic.is-static .cinematic__wash { display: none; }
.cinematic.is-static .scroll-cue { display: none; }
.cinematic.is-static .cinematic__copy {
  position: relative;
  min-height: calc(100vh - 52px);
  min-height: calc(100dvh - 52px);
  opacity: 1;
}
.cinematic.is-static + .cinematic__handoff {
  min-height: calc(100vh - 52px);
  min-height: calc(100svh - 52px);
  margin-top: 0;
  background: var(--paper);
}
.paper-wrap { width: min(1180px, calc(100% - 56px)); margin: 0 auto; }
.eyebrow {
  margin: 0 0 18px;
  color: var(--ikb);
  font: 500 10px/1.3 var(--mono);
  letter-spacing: .26em;
  text-transform: uppercase;
}
.authorship {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
  padding: clamp(90px, 13vh, 142px) 0 clamp(80px, 11vh, 120px);
  border-bottom: 1px solid var(--line-dark);
}
.authorship h2,
.gallery-head h2,
.final-cta h2 {
  max-width: 12ch;
  margin: 0;
  font: italic 350 clamp(48px, 6.2vw, 84px)/.96 var(--serif);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.authorship__copy { max-width: 520px; }
.authorship__copy .lead {
  margin: 0 0 22px;
  color: var(--ink);
  font: 400 clamp(21px, 2.1vw, 29px)/1.32 var(--sans);
  text-wrap: pretty;
}
.authorship__copy p { color: var(--ink-dim); }
/* The lead-in echoes the headline's italic Fraunces at the size the price
   once held, so the row reads as a phrase finished by the button. Fraunces
   italic parks its x-height low in the line box; nudging it up a hair
   centres the word optically on the pill. */
.cta-lead {
  margin: 0;
  color: var(--ink);
  font: italic 350 28px/1 var(--serif);
  white-space: nowrap;
  transform: translateY(-1px);
}
.authorship__copy .cta-lead { color: var(--ink); }

.product-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.detail {
  position: relative;
  min-height: min(58vh, 560px);
  overflow: hidden;
  background: #ece4d7;
}
.detail--hardware { background: #16140f; color: var(--paper); }
.detail__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail__caption {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 24px;
  margin: 0;
  font: 10px/1.45 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.detail--hardware .detail__caption { color: rgba(250,248,244,.72); }

.facts {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: clamp(48px, 8vw, 120px);
  padding: clamp(80px, 11vh, 124px) 0;
  border-bottom: 1px solid var(--line-dark);
}
.facts h2 { margin: 0; font: italic 350 clamp(34px, 4vw, 54px)/1 var(--serif); }
.fact-list { margin: 0; }
.fact-row {
  display: grid;
  grid-template-columns: minmax(130px, .6fr) 1.4fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.fact-row:first-child { border-top-color: var(--line-dark); }
.fact-row dt { color: var(--ink-faint); font: 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.fact-row dd { margin: 0; color: var(--ink-dim); font-size: 17px; }

.gallery-section { padding: clamp(80px, 11vh, 124px) 0; }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.gallery-head h2 { font-size: clamp(42px, 5vw, 68px); }
.text-link { color: var(--ikb); font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-underline-offset: 4px; text-transform: uppercase; }
.design-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.design-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.design-card__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eee7db;
}
.design-card__visual img,
.design-card__visual canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.design-card__meta { display: grid; gap: 4px; padding-top: 14px; }
.design-card__kind { color: var(--ikb); font: 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.design-card__name { font: italic 400 24px/1.15 var(--serif); }
.design-card__review { margin: 4px 0 0; color: var(--ink-dim); font-size: 14px; }
.design-card:hover .design-card__name { color: var(--ikb); }

.final-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  padding: clamp(78px, 11vh, 120px) 0;
  border-top: 1px solid var(--line-dark);
}
.final-cta h2 { max-width: 14ch; font-size: clamp(46px, 6vw, 80px); }
body #al-footer { margin-top: 0; }

/* Desktop and tablet composition: an editorial spread. Row one pairs the
   headline with the lead, the demo card runs the full width beneath them, and
   the fulfillment note closes the panel opposite the CTA. The
   identity and copy wrappers become display: contents so their children can
   be placed on this one grid; the phone layout below keeps them as boxes. The
   canvas height is derived from the viewport so the card, not blank paper,
   absorbs whatever the 100svh panel has to spare. */
@media (min-width: 761px) {
  .cinematic__handoff .authorship {
    --stack-gap: clamp(22px, 3.2vh, 36px);
    --demo-canvas-h: clamp(280px, calc(100svh - 470px), 640px);
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "title lead"
      "demo demo"
      "note cta";
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 0;
    align-items: end;
    padding: clamp(36px, 5vh, 64px) 0;
  }
  .cinematic__handoff .authorship__identity,
  .cinematic__handoff .authorship__copy { display: contents; }
  .cinematic__handoff .authorship__identity > .eyebrow {
    grid-area: eyebrow;
    margin: 0 0 16px;
  }
  .cinematic__handoff .authorship__identity > h2 {
    grid-area: title;
    max-width: none;
    margin: 0 0 var(--stack-gap);
    font-size: clamp(52px, 5.6vw, 88px);
  }
  .cinematic__handoff .authorship__copy .lead {
    grid-area: lead;
    max-width: 34ch;
    margin: 0 0 calc(var(--stack-gap) + 6px);
    font-size: clamp(19px, 1.7vw, 25px);
  }
  /* The control rail takes a definite width so the lamp, not the sliders,
     absorbs the card's width. The frame is never taller than it is wide and
     never taller than the viewport budget, so it lands landscape on desktops
     and square on portrait tablets. */
  .cinematic__handoff .designer-demo {
    grid-area: demo;
    grid-template-columns: minmax(0, calc(var(--demo-canvas-h) * 2)) clamp(240px, 32%, 380px);
    justify-content: space-evenly;
    column-gap: clamp(32px, 4.5vw, 72px);
    margin: 0 0 var(--stack-gap);
    padding: clamp(18px, 2vw, 28px);
  }
  .cinematic__handoff .designer-demo__canvas,
  .cinematic__handoff .designer-demo__poster {
    width: 100%;
    max-width: calc(var(--demo-canvas-h) * 2);
    height: auto;
    max-height: var(--demo-canvas-h);
    aspect-ratio: 1 / 1;
    justify-self: center;
  }
  .cinematic__handoff .designer-demo__controls { gap: clamp(16px, 3vh, 30px); }
  .cinematic__handoff .fulfillment-copy {
    grid-area: note;
    align-self: center;
    max-width: 54ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
  }
  .cinematic__handoff .authorship__cta {
    grid-area: cta;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    gap: clamp(16px, 2vw, 28px);
  }
  .cinematic__handoff .authorship__cta .primary-link { white-space: nowrap; }
  .cinematic__handoff .cta-lead { font-size: clamp(26px, 2.2vw, 30px); }
  /* The copy wrapper has no box here, so its children carry the reveal. */
  .cinematic__handoff.is-enter-pending .authorship__copy > * {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(12px) scale(.99);
    transform-origin: 50% 100%;
    transition-property: opacity, filter, transform;
    transition-duration: 620ms;
    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  }
  .cinematic__handoff.is-enter-pending.is-revealed .authorship__copy > * {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    transition-delay: 460ms;
  }
}

@media (max-width: 760px) {
  .cinematic {
    height: 250vh;
    height: calc(150svh + 100dvh);
  }
  .cinematic.is-static { height: auto; }
  .cinematic__copy h1 { font-size: clamp(48px, 14vw, 72px); }
  .scroll-cue { font-size: 11px; letter-spacing: .18em; }
  .paper-wrap { width: min(100% - 36px, 620px); }
  .cinematic__handoff .paper-wrap { width: min(100% - 24px, 680px); }
  .authorship,
  .facts { grid-template-columns: 1fr; gap: 36px; }
  .authorship { align-items: start; }
  .cinematic__handoff .authorship {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 18px;
    min-height: calc(100svh - 52px);
    padding: clamp(24px, 4svh, 42px) 0;
  }
  .designer-demo {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    margin-bottom: 0;
    padding: 14px;
  }
  .designer-demo__canvas { height: clamp(215px, 27svh, 240px); }
  .designer-demo__poster { height: clamp(215px, 27svh, 240px); }
  .designer-demo__controls { gap: 14px; padding: 2px 4px 4px; }
  .designer-demo__track { height: 30px; }
  .designer-demo__thumb { width: 20px; height: 20px; border-width: 2.5px; }
  .designer-demo__colors { gap: 14px; min-height: 26px; padding-top: 4px; }
  .designer-demo__color { width: 22px; height: 22px; }
  .authorship__identity > .eyebrow { display: none; }
  .cinematic__handoff .authorship__identity > h2 {
    margin-bottom: 28px;
    font-size: clamp(39px, 12.2vw, 48px);
    line-height: 1;
    white-space: nowrap;
    /* Fraunces parks its caps ~0.14em below the top of the line box, so the
       paper above the headline measured ~39px against ~30px below the CTA and
       read top-heavy. Trim the leading to the cap edge; both ends now land
       within a pixel of each other. Browsers without text-box keep the
       untrimmed line box. */
    text-box: trim-start cap alphabetic;
  }
  .authorship__copy {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    width: 100%;
    column-gap: 14px;
    row-gap: 12px;
  }
  .fulfillment-copy { display: none; }
  .authorship__copy .lead { grid-column: 1 / -1; margin-bottom: 0; }
  .cta-lead { grid-column: 1; font-size: 26px; }
  .authorship__copy .primary-link {
    grid-column: 2;
    display: flex;
    width: 100%;
    margin: 0;
  }
  /* Mobile browsers already size the fixed-position viewport above their
     visible controls. Hang the cue's box 4px past the viewport edge so the
     chevron's own transparent SVG padding leaves the visible mark sitting just
     above that edge at the bottom of its float. */
  .marketing-scroll-cue {
    position: fixed;
    bottom: -4px;
  }
  /* Cut beneath the completed white frame: keep the incoming runway in normal
     flow, but do not paint its leading edge while it rises behind translucent
     browser chrome. The reveal restores it underneath the opaque white hold. */
  .cinematic__handoff.is-enter-pending:not(.is-revealed) + .paper-act {
    visibility: hidden;
  }
  .product-story { grid-template-columns: 1fr; }
  .detail { min-height: 54vh; }
  .fact-row { grid-template-columns: 1fr; gap: 8px; }
  .gallery-head { display: grid; }
  .design-strip { grid-template-columns: 1fr; gap: 42px; }
  .final-cta { grid-template-columns: 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.has-marketing-snap { scroll-snap-type: none; }
  html.is-design-exit body::after { transition-duration: .01ms; }
  .cinematic__canvas { transition: none; }
  .marketing-scroll-cue { display: none; }
  .scroll-cue__arrow { animation: none; }
}

@media (max-width: 760px) and (max-height: 740px) {
  .cinematic__handoff .authorship { gap: 12px; padding: 16px 0; }
  .designer-demo { gap: 8px; margin-bottom: 0; padding: 9px; }
  .designer-demo__canvas { height: 200px; }
  .designer-demo__poster { height: 200px; }
  .designer-demo__controls { gap: 7px; }
  .designer-demo__track { height: 24px; }
  .designer-demo__colors { min-height: 22px; padding-top: 0; }
  .designer-demo__color { width: 19px; height: 19px; }
  .cinematic__handoff .authorship__identity > h2 { margin-bottom: 18px; }
  .authorship__copy .lead { font-size: 19px; }
}