/* ============================================================
   Elements — Mono
   Strict black & white. Personality via type + behaviour.
   ============================================================ */

:root {
  /* warm-biased neutrals, never dead grey */
  --paper: #f2f0ea;
  --paper-dim: #e9e6de;
  --ink: #14120e;
  --ink-soft: rgba(20, 18, 14, 0.62);
  --ink-faint: rgba(20, 18, 14, 0.14);
  --ink-hair: rgba(20, 18, 14, 0.10);
  --paper-on-ink: #f2f0ea;
  --paper-soft: rgba(242, 240, 234, 0.60);
  --paper-faint: rgba(242, 240, 234, 0.16);

  --disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --serif: "Instrument Serif", Georgia, serif;

  /* type scale */
  --step--1: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --step-3: clamp(2rem, 1.4rem + 3vw, 4rem);
  --step-4: clamp(2.6rem, 1.4rem + 6vw, 6.4rem);
  --step-5: clamp(3.2rem, 1.6rem + 9.5vw, 10rem);

  --pad: clamp(1.25rem, 4vw, 4rem);
  --head-h: 4.25rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em.serif, .serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.mono {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ---------------- cursor ---------------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block;
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
  }
  .cursor-dot {
    position: absolute; top: 0; left: 0;
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    background: var(--ink);
    border-radius: 50%;
    mix-blend-mode: exclusion;
    background: #fff;
  }
  .cursor-ring {
    position: absolute; top: 0; left: 0;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid #fff;
    border-radius: 50%;
    mix-blend-mode: exclusion;
    display: flex; align-items: center; justify-content: center;
    transition: width .28s cubic-bezier(.3,1.2,.4,1), height .28s cubic-bezier(.3,1.2,.4,1), margin .28s cubic-bezier(.3,1.2,.4,1), background-color .28s;
  }
  .cursor-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transition: opacity .2s;
    white-space: nowrap;
  }
  .cursor.is-hover .cursor-ring {
    width: 52px; height: 52px; margin: -26px 0 0 -26px;
  }
  .cursor.is-view .cursor-ring {
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    background: #fff;
  }
  .cursor.is-view .cursor-label { opacity: 1; color: #000; }
  .cursor.is-view .cursor-dot { opacity: 0; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}

/* ---------------- page rules ---------------- */
.page-rules {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
  z-index: 0;
}
.page-rules span { border-left: 1px solid var(--ink-hair); }
.page-rules span:first-child { border-left: none; }

main, .site-foot, .marquee { position: relative; z-index: 1; }

/* ---------------- header ---------------- */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--ink-faint);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .45s cubic-bezier(.6,0,.2,1);
}
.site-head.is-hidden { transform: translateY(-100%); }

.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { width: 1.6rem; height: auto; transition: transform .45s cubic-bezier(.3,1.4,.4,1); }
.brand:hover .brand-mark { transform: rotate(180deg); }
.brand-word {
  font-family: var(--disp);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-nav {
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 2.2rem);
  margin-left: auto;
}
.nav-link {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex; gap: 0.4em; align-items: baseline;
  position: relative;
  padding: 0.35em 0;
}
.nav-num { opacity: 0.45; font-size: 0.85em; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .38s cubic-bezier(.6,0,.2,1);
}
.nav-link:hover::after, .nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.gallery-link {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 0.5em 0.9em;
  display: inline-flex; align-items: center; gap: 0.5em;
  transition: background-color .3s, color .3s;
  white-space: nowrap;
}
.gallery-link:hover, .gallery-link:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.gallery-arrow { transition: transform .3s; display: inline-block; }
.gallery-link:hover .gallery-arrow { transform: translate(-3px, -3px); }

/* menu toggle — hidden on desktop, shown on phones */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  margin-left: 0.6rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: none;
}
.nav-toggle-bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform .3s cubic-bezier(.6,0,.2,1), opacity .3s;
}
.site-head.nav-open .nav-toggle { border-color: var(--ink); }
.site-head.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.site-head.nav-open .nav-toggle-bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------------- hero ---------------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--head-h) + 2rem) var(--pad) clamp(2rem, 5vh, 4rem);
  position: relative;
  isolation: isolate;
}

/* ---------------- hero stage: the three units, ghosted ----------------
   They sit behind the headline. Pointing at one brings it forward and lets the
   headline recede -- the type and the hardware trade places rather than fight
   for the same pixels. Without a pointer, script.js cycles `is-active`. */
.hero-stage {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: calc(var(--head-h) + 3.5rem);
  bottom: clamp(9rem, 22vh, 13rem);
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 clamp(0rem, 4vw, 5rem);
  gap: clamp(0.75rem, 4vw, 4.5rem);
  pointer-events: none;
}
.hero-unit {
  pointer-events: auto;
  position: relative;
  display: block;
  height: 100%;
  opacity: 0.2;
  /* grow from the floor: a centre origin would push the legs down behind
     .hero-foot, which is opaque */
  transform-origin: 50% 100%;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.hero-unit img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: bottom;
}
/* Sized so the tallest unit at full hover zoom (x1.1) still clears the stage,
   with their real relative heights kept intact. */
.hero-unit[data-unit="a"]    { height: 74%; }
.hero-unit[data-unit="wall"] { height: 60%; }
.hero-unit[data-unit="slim"] { height: 90%; }

.hero-unit-tag {
  position: absolute;
  left: 50%;
  bottom: -1.9rem;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}

.hero-unit.is-active,
.hero-stage:hover .hero-unit:hover,
.hero-unit:focus-visible {
  opacity: 1;
  transform: translateY(-1%) scale(1.1);
}
.hero-unit.is-active .hero-unit-tag,
.hero-stage:hover .hero-unit:hover .hero-unit-tag,
.hero-unit:focus-visible .hero-unit-tag {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* siblings step back so the chosen unit reads alone */
.hero-stage:hover .hero-unit { opacity: 0.07; }
.hero-stage.is-engaged .hero-unit:not(.is-active) { opacity: 0.07; }

/* the headline yields to whichever unit is forward */
.hero-stage:hover ~ .hero-title,
.hero-stage.is-engaged ~ .hero-title { opacity: 0.16; }
.hero-title { transition: opacity .55s ease; }

/* The single group shot -- phones only. */
.hero-group { display: none; }

/* ---------------- hero, on a phone ----------------
   Three ghosted units sized off their own height came out ~290px tall on a
   390px screen and ran straight through the headline. There is also no hover
   to reveal them and no room to cycle them. So the phone gets one group shot
   of the whole range on top, and the type sits underneath it. */
@media (max-width: 720px) {
  .hero {
    /* a fixed height, not a minimum: the group shot must shrink to fit, and with
       min-height the hero just grew and pushed the copy below the fold */
    height: 100svh;
    justify-content: flex-start;
    padding-top: calc(var(--head-h) + 1rem);
    padding-bottom: clamp(1.25rem, 3vh, 2rem);
    overflow: hidden;
  }
  .hero-stage { display: none; }
  .hero-scroll { display: none; }
  /* the group shot claims the free space; an auto margin here would eat it */
  .hero-meta { margin-bottom: 0; padding-bottom: 0.7rem; }
  .hero-meta-item:nth-child(2) { display: none; }

  /* hero-scene.webp is a landscape room, white-balanced to --paper and feathered
     at every edge, so it dissolves into the page instead of ending on a seam.
     Being landscape it is width-limited, so it always spans the screen and the
     slack lands as air. Push that air above with flex-end: the stands then rest
     their floor on the headline, and the room is what you see first.

     The 116% bleed only crops empty wall (the units live inside 9%-91% of the
     frame) and buys ~50px of height that a boxed image would spend on gutters. */
  .hero-group {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    align-items: flex-end;
    justify-content: center;
    margin: 0 calc(var(--pad) * -1) clamp(0.4rem, 1.2vh, 0.9rem);
  }
  .hero-group img {
    width: 116%;
    max-width: none;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .hero-title {
    flex: 0 0 auto;
    font-size: clamp(1.95rem, 8.8vw, 3rem);
    margin: 0 0 clamp(0.7rem, 2vh, 1.2rem);
    opacity: 1 !important;
  }
  .hero-foot { flex: 0 0 auto; gap: 0.6rem 1rem; padding-top: 0.9rem; }
  /* The paragraph is four lines on a phone and squeezed the group shot down to
     ~240px. It reappears verbatim in the Why section, so the hero keeps the
     picture and gives the bottom band to the headline. */
  .hero-copy { display: none; }
}

/* Short phones (SE-class): the three headline lines were leaving the group shot
   at under half the screen width. */
@media (max-width: 720px) and (max-height: 680px) {
  .hero-title { font-size: clamp(1.55rem, 7.4vw, 2.1rem); }
  .hero-meta { font-size: 10px; }
  .hero-status { font-size: 10px; }
}

/* Tablets and touch laptops keep the three-unit stage, so they still need the
   width-driven sizing -- the height-driven one overflows there too. */
@media (min-width: 721px) and (max-width: 900px) {
  .hero-stage { padding: 0; gap: clamp(0.5rem, 2.5vw, 1.5rem); }
  .hero-unit[data-unit] { height: auto; max-height: 100%; }
  .hero-unit img { width: 100%; height: auto; max-height: 100%; }
  .hero-unit[data-unit="a"]    { width: 30%; }
  .hero-unit[data-unit="wall"] { width: 27%; }
  .hero-unit[data-unit="slim"] { width: 21%; }
  .hero-unit-tag { bottom: -1.5rem; font-size: 9.5px; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-unit, .hero-unit-tag, .hero-title { transition: none; }
  .hero-unit.is-active, .hero-stage:hover .hero-unit:hover { transform: none; }
}
.hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 0.9rem;
  margin-bottom: auto;
}
.hero-title {
  position: relative;
  z-index: 1;
  font-family: var(--disp);
  font-variation-settings: "wdth" 122;
  font-weight: 800;
  /* smaller than the old --step-5: the hardware is the hero now, not the type */
  font-size: var(--step-4);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: clamp(2rem, 6vh, 4rem) 0;
  pointer-events: none;
}
.hero-line { display: block; overflow: hidden; }
.hero-line-inner { display: inline-block; will-change: transform; }
.hero-title .serif {
  text-transform: none;
  font-size: 0.98em;
  letter-spacing: 0;
}

.hero-foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink-faint);
  padding-top: 1.2rem;
  background: var(--paper);
}
.hero-copy { max-width: 34em; color: var(--ink-soft); font-size: var(--step-0); }
.hero-status {
  display: flex; align-items: center; gap: 0.6em;
  white-space: nowrap;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink);
  animation: blink 1.6s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }
.status-cycle { border-bottom: 1px solid var(--ink); padding-bottom: 1px; min-width: 12ch; display: inline-block; }

.hero-scroll {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  /* clear the hero-meta row: at head+2.4rem this ran straight through
     "Portrait 9:16 · 60 Hz" */
  top: calc(var(--head-h) + 5.6rem);
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  transition: color .3s;
}
.hero-scroll:hover { color: var(--ink); }

/* ---------------- marquee ---------------- */
.marquee {
  background: var(--ink);
  color: var(--paper-on-ink);
  overflow: hidden;
  border-block: 1px solid var(--ink);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 0.85rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-group i { font-style: normal; font-size: 0.5rem; opacity: 0.5; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------- section scaffolding ---------------- */
.section-head { padding: clamp(4rem, 10vh, 7rem) var(--pad) clamp(2rem, 5vh, 3.5rem); }
.section-tag {
  display: inline-block;
  color: var(--ink-soft);
  border: 1px solid var(--ink-faint);
  padding: 0.45em 0.9em;
  margin-bottom: 1.4rem;
}
.section-title {
  font-family: var(--disp);
  font-variation-settings: "wdth" 116;
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  max-width: 14em;
}
.section-title .serif { text-transform: none; }

/* ---------------- product index ---------------- */
.index { position: relative; padding-bottom: clamp(4rem, 10vh, 7rem); }
.index-list { list-style: none; border-top: 1px solid var(--ink); }
.index-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.9fr) 2fr 1.2fr auto;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding: clamp(1.4rem, 3.5vw, 2.6rem) var(--pad);
  border-bottom: 1px solid var(--ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.index-row::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s cubic-bezier(.6,0,.2,1);
  z-index: -1;
}
.index-row:hover::before, .index-row:focus-visible::before {
  transform: scaleY(1);
  transform-origin: top;
}
.index-row:hover, .index-row:focus-visible { color: var(--paper-on-ink); }
.index-kicker { color: inherit; opacity: 0.55; }
.index-name {
  font-family: var(--disp);
  font-variation-settings: "wdth" 122;
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  transition: transform .5s cubic-bezier(.3,1,.3,1);
  display: inline-block;
}
.index-row:hover .index-name { transform: translateX(clamp(0.4rem, 1.5vw, 1.4rem)); }
.index-detail { opacity: 0.55; text-align: right; }
.index-arrow {
  font-size: var(--step-2);
  line-height: 1;
  transform: translateX(-0.4em);
  opacity: 0;
  transition: transform .4s cubic-bezier(.3,1,.3,1), opacity .3s;
}
.index-row:hover .index-arrow, .index-row:focus-visible .index-arrow {
  transform: translateX(0);
  opacity: 1;
}

.index-reveal {
  position: fixed;
  top: 0; left: 0;
  width: clamp(200px, 24vw, 340px);
  aspect-ratio: 3 / 4;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(20, 18, 14, 0.9);
  overflow: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.index-reveal img {
  position: absolute; inset: 6%;
  width: 88%; height: 88%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s;
}
.index-reveal img.is-active { opacity: 1; }

/* ---------------- index, without a pointer ----------------
   The cursor was the sweep. On touch the scroll is: whichever row sits nearest
   the middle of the viewport goes active and its unit fades in behind the list,
   so "sweep the list, the hardware follows" stays literally true. */
@media (hover: none) {
  .index-list { position: relative; z-index: 1; }

  .index-reveal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(52vw, 300px);
    height: auto;
    aspect-ratio: 2 / 3;
    z-index: 0;
    opacity: 1;
    visibility: visible;
    background: none;
    border: 0;
    box-shadow: none;
    transition: none;
  }
  .index-reveal img { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
  .index-reveal img.is-active { opacity: 0.16; }

  /* the fill sweep is a hover affordance; it would sit over the unit here */
  .index-row::before { content: none; }
  /* ...and without the fill behind it, the hover colour would be paper on paper.
     Touch leaves :hover stuck after a tap, so neutralise it. */
  .index-row:hover, .index-row:focus-visible { color: var(--ink); }
  .index-row { transition: opacity .35s ease; opacity: 0.42; }
  .index-row.is-active { opacity: 1; }
  .index-row.is-active .index-arrow { transform: translateX(0); opacity: 1; }
  .index-row.is-active .index-name { transform: translateX(0.4rem); }
}

@media (hover: none) and (prefers-reduced-motion: reduce) {
  .index-row { opacity: 1; transition: none; }
  .index-reveal img { transition: none; }
}

/* ---------------- product sections ---------------- */
.product {
  border-top: 1px solid var(--ink);
  padding: clamp(3.5rem, 9vh, 6.5rem) var(--pad);
}
.product-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.product-alt .product-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.product-alt .product-media { order: 2; }
.product-alt .product-copy { order: 1; }

.plate {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink);
  padding: clamp(1.2rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.4rem) 0.8rem;
}
.plate img {
  width: 100%;
  height: auto;
  transition: transform .7s cubic-bezier(.3,1,.3,1);
}
.plate:hover img { transform: scale(1.03); }
.plate figcaption {
  color: var(--ink-soft);
  padding: 0.9rem 0 0.6rem;
  border-top: 1px solid var(--ink-faint);
  margin-top: 0.6rem;
}
.plate-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--ink);
  transition: transform .35s cubic-bezier(.3,1.3,.4,1);
}
.plate-corner.tl { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.plate-corner.tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; }
.plate-corner.bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; }
.plate-corner.br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }
.plate:hover .plate-corner.tl { transform: translate(-4px, -4px); }
.plate:hover .plate-corner.tr { transform: translate(4px, -4px); }
.plate:hover .plate-corner.bl { transform: translate(-4px, 4px); }
.plate:hover .plate-corner.br { transform: translate(4px, 4px); }

.product-title {
  font-family: var(--disp);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0.4rem 0 1.1rem;
  max-width: 16em;
}
.product-copy > p {
  color: var(--ink-soft);
  max-width: 36em;
  margin-bottom: 1.6rem;
}
.product-points {
  list-style: none;
  margin-bottom: 2rem;
  color: var(--ink);
}
.product-points li {
  padding: 0.55em 0 0.55em 1.4em;
  border-top: 1px solid var(--ink-faint);
  position: relative;
}
.product-points li:last-child { border-bottom: 1px solid var(--ink-faint); }
.product-points li::before {
  content: "\25AA";
  position: absolute; left: 0.1em;
  font-size: 0.7em;
  top: 1em;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-0);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 0.7em 1em 0.7em 0;
  border-bottom: 1px solid var(--ink-faint);
}
.spec-table thead th {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
}
.spec-table tbody th {
  font-family: var(--disp);
  font-weight: 700;
  font-variation-settings: "wdth" 116;
}
.spec-table td:last-child, .spec-table th:last-child { padding-right: 0; }
.spec-table tbody tr { transition: background-color .25s; }
.spec-table tbody tr:hover { background: var(--paper-dim); }

/* ---------------- specs (dark) ---------------- */
.specs {
  background: var(--ink);
  color: var(--paper-on-ink);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}
.specs ::selection { background: var(--paper); color: var(--ink); }
.specs .section-tag { color: var(--paper-soft); border-color: var(--paper-faint); }
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--paper-faint);
  border-left: 1px solid var(--paper-faint);
  margin: 0 var(--pad);
}
.spec-cell {
  border-right: 1px solid var(--paper-faint);
  border-bottom: 1px solid var(--paper-faint);
  padding: clamp(1.2rem, 2.5vw, 2rem);
  min-height: 9.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.spec-cell::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.6,0,.2,1);
  z-index: -1;
}
@media (hover: hover) {
  .spec-cell:hover::after { transform: translateY(0); }
  .spec-cell:hover { color: var(--ink); }
  .spec-cell:hover dt { color: var(--ink-soft); }
}
.spec-cell dt { color: var(--paper-soft); transition: color .3s; }
.spec-cell dd { font-size: var(--step-1); line-height: 1.3; font-weight: 500; }
.spec-big {
  display: block;
  font-family: var(--disp);
  font-variation-settings: "wdth" 100;
  font-weight: 800;
  /* Sized to fit the widest value ("100000:1", "178°/178°") inside the
     overflow-hidden cell, even at the narrowest 230px column. */
  font-size: clamp(1.5rem, 0.9rem + 1.7vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------- why ---------------- */
.why { padding-bottom: clamp(4rem, 10vh, 7rem); }
.why-body {
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.why-lede { font-size: var(--step-1); line-height: 1.45; max-width: 30em; }
.why-body p:not(.why-lede) { color: var(--ink-soft); max-width: 34em; }
.why-points {
  list-style: none;
  margin: clamp(2.5rem, 7vh, 4.5rem) var(--pad) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
  counter-reset: why;
}
.why-point {
  border-top: 1px solid var(--ink);
  padding-top: 1.1rem;
  min-width: 0;
}
.why-point-num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.why-point-title {
  font-family: var(--disp);
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}
.why-point-copy { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.5; }

.why-stats {
  margin: clamp(2.5rem, 7vh, 5rem) var(--pad) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--ink);
}
.why-stat {
  padding: 1.4rem 1.4rem 1.4rem 0;
  min-width: 0;
  border-bottom: 1px solid var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em;
}
.stat-num {
  font-family: var(--disp);
  font-variation-settings: "wdth" 105;
  font-weight: 800;
  /* Fits the widest counter ("100,000") within its column without overlapping
     the next stat. */
  font-size: clamp(1.7rem, 1rem + 2.1vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: var(--step-1); }
.stat-label { flex-basis: 100%; color: var(--ink-soft); margin-top: 0.5em; }

/* ---------------- contact ---------------- */
.contact {
  border-top: 1px solid var(--ink);
  padding: clamp(4rem, 12vh, 8rem) var(--pad);
  text-align: left;
}
.contact-title {
  font-family: var(--disp);
  font-variation-settings: "wdth" 120;
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 1.2rem 0 clamp(2rem, 5vh, 3.5rem);
}
.contact-title .serif { text-transform: none; }
.contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: 2rem;
}
.contact-mail {
  position: relative;
  font-family: var(--disp);
  font-variation-settings: "wdth" 105;
  font-weight: 600;
  font-size: clamp(1.4rem, 0.8rem + 3.4vw, 3.6rem);
  letter-spacing: -0.01em;
  display: inline-block;
  padding-bottom: 0.12em;
}
.contact-mail-line {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ink);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.6,0,.2,1);
}
.contact-mail:hover .contact-mail-line,
.contact-mail:focus-visible .contact-mail-line {
  animation: line-sweep .7s cubic-bezier(.6,0,.2,1);
}
@keyframes line-sweep {
  0% { transform: scaleX(1); transform-origin: right; }
  45% { transform: scaleX(0); transform-origin: right; }
  55% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
.contact-tel {
  font-size: var(--step-1);
  border: 1px solid var(--ink);
  padding: 0.6em 1.1em;
  transition: background-color .3s, color .3s;
}
.contact-tel:hover, .contact-tel:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.contact-note { color: var(--ink-soft); max-width: 42em; text-transform: none; letter-spacing: 0.02em; }

/* ---------------- footer ---------------- */
.site-foot {
  background: var(--ink);
  color: var(--paper-on-ink);
  padding: clamp(3rem, 8vh, 5rem) var(--pad) 1.5rem;
}
.site-foot ::selection { background: var(--paper); color: var(--ink); }
.foot-top {
  display: flex; align-items: center; gap: 0.8rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--paper-faint);
}
.foot-mark { width: 2.2rem; filter: invert(1); }
.foot-word {
  font-family: var(--disp);
  font-variation-settings: "wdth" 120;
  font-weight: 800;
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding: 2.2rem 0 3rem;
}
.foot-col { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.foot-label {
  color: var(--paper-soft);
  margin-bottom: 0.4rem;
}
.foot-col address { font-style: normal; line-height: 1.7; color: var(--paper-on-ink); }
.foot-link {
  position: relative;
  padding-bottom: 2px;
}
.foot-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--paper-on-ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.6,0,.2,1);
}
.foot-link:hover::after, .foot-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.foot-base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--paper-faint);
  padding-top: 1.4rem;
  color: var(--paper-soft);
}

/* ---------------- responsive ---------------- */
@media (max-width: 960px) {
  .product-inner, .product-alt .product-inner { grid-template-columns: 1fr; }
  .product-alt .product-media { order: 1; }
  .product-alt .product-copy { order: 2; }
  .product-media { max-width: 480px; }
  .why-body { grid-template-columns: 1fr; }
  .index-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "kicker arrow"
      "name arrow"
      "detail arrow";
  }
  .index-kicker { grid-area: kicker; }
  .index-name { grid-area: name; }
  .index-detail { grid-area: detail; text-align: left; }
  .index-arrow { grid-area: arrow; align-self: center; }
}

@media (max-width: 720px) {
  .site-head { gap: 0.75rem; }
  /* .site-nav goes absolute below, so it no longer pushes the toggle over --
     the toggle has to claim the free space itself or it sits by the wordmark */
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .gallery-link { margin-left: auto; min-height: 44px; padding: 0.5em 0.7em; }
  .hero-scroll { display: none; }
  .hero-meta-item:nth-child(2) { display: none; }
  .page-rules { grid-template-columns: repeat(3, 1fr); }
  .page-rules span:nth-child(n+4) { display: none; }

  /* nav becomes an accessible drop panel driven by the toggle */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem var(--pad) 1.1rem;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ink-faint);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.6,0,.2,1), visibility .3s;
  }
  .site-head.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav-link {
    font-size: 1rem;
    letter-spacing: 0.08em;
    padding: 0.9em 0;
    min-height: 46px;
    align-items: center;
    border-bottom: 1px solid var(--ink-hair);
  }
  .nav-num { font-size: 0.8em; }
}

/* ---- phone grid + type hardening (no 3-col grids, big type fits 360) ---- */
@media (max-width: 600px) {
  .specs-grid { grid-template-columns: 1fr; }
  .why-stats { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hero-title { font-size: clamp(2.1rem, 11vw, 3rem); }
  .index-name { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }
  .contact-title { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .contact-mail { font-size: clamp(1.3rem, 7vw, 2rem); }
  .spec-table th, .spec-table td { padding-right: 0.6em; }
}
@media (max-width: 400px) {
  .foot-grid { grid-template-columns: 1fr; }
  .why-stats { grid-template-columns: 1fr; }
}

/* ---------------- entrance states (JS adds .is-in) ---------------- */
/* Hero reveal runs as compositor CSS animations so it can never get left
   stuck in a hidden start-state by a JS-timeline race. */
.js .hero-line-inner { animation: mono-rise 1s cubic-bezier(.22, 1, .36, 1) both; }
.js .hero-line:nth-child(1) .hero-line-inner { animation-delay: .10s; }
.js .hero-line:nth-child(2) .hero-line-inner { animation-delay: .22s; }
.js .hero-line:nth-child(3) .hero-line-inner { animation-delay: .34s; }
@keyframes mono-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
.js [data-hero-fade] { opacity: 0; animation: mono-fade .9s ease .55s forwards; }
@keyframes mono-fade { to { opacity: 1; } }
/* the stage (desktop) and the group shot (phones) rise with the headline
   rather than popping in after it */
.js .hero-stage, .js .hero-group { opacity: 0; animation: mono-fade 1.4s ease .3s forwards; }
.js .section-head, .js .product-inner > *, .js .spec-cell, .js .why-body > *, .js .why-point, .js .why-stat,
.js .contact > * { opacity: 0; transform: translateY(28px); }
.js .in { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.3,1,.3,1); }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none; transform: none; }
  .js .hero-line-inner { transform: none; }
  .js [data-hero-fade] { opacity: 1; }
  .js .section-head, .js .product-inner > *, .js .spec-cell, .js .why-body > *, .js .why-stat,
  .js .contact > * { opacity: 1; transform: none; }
  .index-reveal { display: none; }
  .cursor { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}