/* ============================================================
   LINDENAER
   The watch carries the page. Everything else is quiet: one
   clean face, no rules, no boxes, no ornament. Colour comes off
   the artwork and nowhere else.
   ============================================================ */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter.woff2") format("woff2");
  font-weight: 200 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #080807;
  --ink: #f4f0ea;
  --dim: rgba(244, 240, 234, 0.66);
  --faint: rgba(244, 240, 234, 0.4);

  --ember: #c1442f;
  --ember-lit: #e07a5f;
  --brass: #d5ab6a;

  --ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* the wordmark only. It echoes the engraving on the dial */
  --wordmark: "Bodoni Moda", "Didot", Georgia, serif;

  --s1: 0.5rem; --s2: 1rem; --s3: 1.75rem; --s4: 2.75rem;
  --s5: 4.5rem; --s6: 7rem; --s7: 11rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }

body {
  /* transparent on purpose: html carries the ground, so the fixed .atmos
     layer at z-index -2 is not painted over by an opaque body background */
  background: transparent;
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--ember); color: #fff; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- type ---------- */
.display {
  font-weight: 200;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.label {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s4);
}

/* ---------- atmosphere: the artwork, far out of focus ---------- */
.atmos {
  position: fixed;
  inset: -14%;
  z-index: -2;
  /* Rembrandt, Landscape with a Stone Bridge, c. 1638. Public domain.
     Barely blurred, so it reads as a painting rather than a wash, and held
     well down in brightness so text keeps its contrast over it. */
  background-image: url("../assets/pieces/rembrandt-bridge.webp");
  /* zoomed past the painting's own dark edges, a building on the left and
     trees on the right, which otherwise read as black bars at the viewport
     sides. This lands the lit middle across the full width. */
  background-size: 132%;
  background-position: 50% 38%;
  filter: blur(2px) saturate(1.18) brightness(0.92);
}
.atmos::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 92% 88% at 48% 46%, transparent 48%, rgba(8, 8, 7, 0.34) 100%),
    linear-gradient(to bottom, rgba(8, 8, 7, 0.4), rgba(8, 8, 7, 0.06) 34%, rgba(8, 8, 7, 0.74));
}
.atmos-fade {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--black);
  opacity: var(--settle, 0);
  transition: opacity 0.5s linear;
}
.grain {
  position: fixed; inset: 0; z-index: 8000; pointer-events: none;
  opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.18'/%3E%3C/svg%3E");
}
.veil {
  position: fixed; inset: 0; z-index: 9999; background: var(--black);
  transform: translateY(100%); pointer-events: none;
  transition: transform 0.6s var(--ease);
}
.veil.is-active { transform: translateY(0); }

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--s4) var(--s5);
  transition: padding 0.5s var(--ease), background 0.5s;
}
.bar.is-scrolled {
  padding: var(--s2) var(--s5);
  background: rgba(8, 8, 7, 0.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.bar__brand {
  grid-column: 2;
  font-family: var(--wordmark);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  white-space: nowrap;
}
.bar__right { grid-column: 3; justify-self: end; }

/* the trigger: a word and a dot that swells. No bars, no lines */
.menu-btn {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--dim);
  transition: color 0.4s;
}
.menu-btn:hover { color: var(--ink); }
.menu-btn__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember-lit);
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.menu-btn:hover .menu-btn__dot {
  transform: scale(1.7);
  box-shadow: 0 0 22px rgba(224, 122, 95, 0.8);
}

/* ---------- the menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 950;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.menu.is-open { opacity: 1; pointer-events: auto; }
.menu__scrim {
  position: absolute; inset: 0;
  background: rgba(8, 8, 7, 0.88);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}
.menu__art {
  position: absolute; inset: 0;
  background-image: url("../assets/pieces/aetas-art-soft.webp");
  background-size: 170%;
  background-position: var(--crop, 40% 58%);
  filter: blur(34px) saturate(1.45) brightness(0.7);
  opacity: 0;
  transition: opacity 0.7s var(--ease), background-position 1.1s var(--ease);
}
.menu.is-hovering .menu__art { opacity: 0.55; }
.menu__list { position: relative; text-align: center; }
.menu__item {
  display: block; position: relative;
  padding-bottom: 1.5rem;
  font-weight: 200;
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  color: var(--faint);
  transition: color 0.5s var(--ease), transform 0.6s var(--ease);
}
.menu__item:hover, .menu__item:focus-visible { color: var(--ink); transform: translateY(-2px); outline: none; }
.menu__no {
  position: absolute; left: -2.8rem; top: 0.62em;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.3em;
  color: var(--ember-lit);
  opacity: 0; transition: opacity 0.5s;
}
.menu__item:hover .menu__no, .menu__item:focus-visible .menu__no { opacity: 1; }
.menu__note {
  position: absolute; left: 0; right: 0; bottom: 0.15rem;
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--faint);
  opacity: 0; transform: translateY(-5px);
  transition: opacity 0.5s, transform 0.5s var(--ease);
}
.menu__item:hover .menu__note, .menu__item:focus-visible .menu__note { opacity: 1; transform: translateY(0); }
.menu__close {
  position: absolute; top: var(--s4); right: var(--s5);
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--dim);
  transition: color 0.4s;
}
.menu__close:hover { color: var(--ember-lit); }

/* ---------- buttons: a warm sweep, not a rectangle with a border ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.9rem;
  overflow: hidden;
  padding: 1.1rem 2.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--black);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.45s;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ember) 0%, #b8632c 46%, var(--brass) 100%);
  transform: translateX(-101%);
  transition: transform 0.65s var(--ease);
}
.btn > * { position: relative; }
.btn:hover { color: #fff8ef; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(193, 68, 47, 0.32); }
.btn:hover::before { transform: translateX(0); }
.btn__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}
.btn:hover .btn__dot { transform: translateX(4px) scale(1.25); }
.btn--quiet { background: transparent; color: var(--ink); padding-left: 0; padding-right: 0; }
.btn--quiet::before { display: none; }
.btn--quiet:hover { color: var(--ember-lit); transform: none; box-shadow: none; }
.btn[aria-disabled="true"] { opacity: 0.28; pointer-events: none; }

/* ---------- drawn stand-in: fluted case, blank dial ----------
   Shown wherever a watch has no photograph. It is deliberately a case
   with a blank dial in it, not a fake of a finished watch. */
.watch {
  grid-area: 1 / 1;
  position: relative;
  width: 78%;
  aspect-ratio: 1 / 1;
  /* so the dial wordmark scales with the case, not the viewport */
  container-type: inline-size;
  transition: opacity 0.6s ease;
}
.watch { transition: opacity 0.5s ease; }

/* alligator strap, tapering away from the case */
.watch__strap {
  position: absolute;
  left: 50%;
  width: 40%;
  height: 30%;
  transform: translateX(-50%);
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 19%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 31%),
    linear-gradient(90deg, #3d2214, #7b4a2a 26%, #8d5833 48%, #6a3f24 72%, #351d11);
}
.watch__strap--top {
  top: -21%;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.watch__strap--bottom {
  bottom: -21%;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
.watch__strap::after {
  content: "";
  position: absolute;
  inset: 0 13%;
  background:
    radial-gradient(circle 1px at 0 0, rgba(233, 214, 182, 0.55) 99%, transparent) 0 0 / 100% 9%,
    radial-gradient(circle 1px at 100% 0, rgba(233, 214, 182, 0.55) 99%, transparent) 0 0 / 100% 9%;
}

/* polished lugs, set at the four corners behind the case */
.watch__lug {
  position: absolute;
  top: 50%; left: 50%;
  width: 14%; height: 23%;
  margin: -11.5% 0 0 -7%;
  border-radius: 40% / 22%;
  background: linear-gradient(90deg, #7f8487, #f4f6f7 42%, #cdd2d4 62%, #85898c);
}
.watch__lug--a { transform: rotate(34deg) translateY(-176%); }
.watch__lug--b { transform: rotate(-34deg) translateY(-176%); }
.watch__lug--c { transform: rotate(146deg) translateY(-176%); }
.watch__lug--d { transform: rotate(-146deg) translateY(-176%); }

.watch__case {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, #fbfcfc, #c3c8ca 46%, #82878a);
  box-shadow: 0 30px 52px rgba(0, 0, 0, 0.7);
}
/* the coin edge: one repeating conic sweep, masked to a ring.
   closest-side matters: the default farthest-corner would put the
   whole ring outside the case. */
.watch__bezel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side at 32% 26%, rgba(255, 255, 255, 0.55), transparent 62%),
    repeating-conic-gradient(
      from 0.8deg,
      #6e7376 0deg, #b3b8bb 1.2deg, #f6f8f8 2deg, #d2d7d9 2.9deg, #878c8f 4deg, #6e7376 5.14deg
    );
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 72%, #000 72.6% 99.6%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 72%, #000 72.6% 99.6%, transparent 100%);
}
/* the polished step between bezel and glass */
.watch__bezel::after {
  content: "";
  position: absolute;
  inset: 11.4%;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(70, 76, 79, 0.55),
    0 1px 3px rgba(22, 17, 12, 0.4);
}
.watch__crown {
  position: absolute;
  top: 50%;
  right: -4.6%;
  width: 8%;
  height: 13%;
  transform: translateY(-50%);
  border-radius: 34% / 44%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 40%),
    repeating-linear-gradient(180deg, #f2f4f5 0 1.5px, #7f8487 1.5px 3.2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.watch__dial {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 64% 64% at 74% 20%, rgba(212, 138, 56, 0.5), transparent 72%),
    radial-gradient(ellipse 72% 72% at 22% 78%, rgba(126, 40, 32, 0.36), transparent 76%),
    radial-gradient(ellipse 96% 96% at 45% 46%, #33231a, #0a0603 78%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.85), inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
/* aged varnish: fractal noise, not a grid */
.watch__dial::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: overlay;
  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='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 55% 55%;
}
.watch__name {
  position: absolute;
  top: 23%;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--ui);
  font-weight: 400;
  font-size: 9.5cqw;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--gold-soft);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.watch__hands { position: absolute; inset: 0; width: 100%; height: 100%; }
.watch__hand { fill: #fbfcfc; stroke: rgba(60, 66, 69, 0.65); stroke-width: 0.35; }
.watch__seconds { stroke: #fbfcfc; stroke-width: 0.8; stroke-linecap: round; }
.watch__pin { fill: #fbfcfc; }

/* ---------- layout ---------- */
.container { width: min(1180px, calc(100% - 8rem)); margin: 0 auto; }
.section { padding: var(--s7) 0; position: relative; }
.section--tight { padding-top: 0; }

.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-line { overflow: hidden; display: block; }
.reveal-line > span {
  display: block; transform: translateY(115%);
  transition: transform 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}
.is-visible .reveal-line > span, .reveal-line.is-visible > span { transform: translateY(0); }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: var(--s7) var(--s5) var(--s6);
}
.hero__stage { position: relative; display: flex; justify-content: center; }
/* the light in the room, which comes up as the page is written */
.hero__stage::before {
  content: "";
  position: absolute; inset: -26%;
  background: radial-gradient(circle closest-side,
    rgba(213, 171, 106, calc(0.10 + var(--written, 0) * 0.30)),
    rgba(193, 68, 47, calc(0.04 + var(--written, 0) * 0.12)) 44%, transparent 72%);
  pointer-events: none;
  transition: background 0.7s var(--ease);
}
.hero__write { max-width: 33rem; }
.hero__lead {
  font-weight: 200;
  /* sized to hold "How do you feel?" on one line in this column */
  font-size: clamp(2.3rem, 4.8vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-bottom: var(--s2);
}
.hero__ask {
  color: var(--dim);
  font-size: 0.98rem;
  max-width: 26rem;
  margin-bottom: var(--s3);
}
.hero__lead em { font-style: normal; color: var(--brass); }
.hero__meta {
  position: absolute; left: var(--s5); bottom: var(--s4);
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--faint); line-height: 2.2;
}

/* the writing surface: a soft field, no rule under it */
.write__field {
  width: 100%;
  border: none; resize: none; overflow: hidden;
  background: rgba(244, 240, 234, 0.04);
  border-radius: 14px;
  padding: 1.2rem 1.35rem;
  font-family: var(--ui);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink);
  caret-color: var(--ember-lit);
  min-height: 8.5rem;
  transition: background 0.45s, box-shadow 0.45s;
}
.write__field::placeholder { color: var(--faint); }
.write__field:focus { outline: none; background: rgba(244, 240, 234, 0.07); box-shadow: 0 0 0 1px rgba(213, 171, 106, 0.5); }
.write__foot {
  display: flex; align-items: center; gap: 0.8rem;
  margin-top: var(--s2);
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--faint);
}
/* progress as a row of dots filling, rather than a bar */
.write__dots { display: inline-flex; gap: 5px; }
.write__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(244, 240, 234, 0.18);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.write__dots i.on { background: var(--brass); transform: scale(1.25); }
.write__count.is-met { color: var(--brass); }
.write__go { margin-top: var(--s4); }

/* ---------- the dial: never touched ---------- */
.dial {
  position: relative;
  width: min(100%, clamp(280px, 60vh, 640px));
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
/* The loop is VP9 with an alpha channel. Where a browser plays it but does
   not composite the alpha, main.js finds the corner opaque and falls back to
   the still, so nobody ever sees a white box. */
.dial__video {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: contain;
  /* the poster is the loop's own first frame, so it paints straight away and
     the loop takes over from it without a visible change */
  opacity: 0;
  /* No filter here on purpose. A filter on a looping video makes the
     compositor rebuild its buffer at the wrap, which shows as a flashed
     frame. The shadow stays on the still, which never loops. */
  transition: opacity 1.2s ease;
}
.dial__video.is-live { opacity: 1; }
/* the H.264 pass carries the watch on pure black; screen drops it */
.dial__video.is-screen { mix-blend-mode: screen; }

.dial--sm { width: min(100%, clamp(200px, 24vw, 300px)); }
.dial picture { display: contents; }
.dial__photo {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 50px 72px rgba(0, 0, 0, 0.72));
  transition: opacity 1s ease;
}

/* A dial can carry a loop, a photograph and a drawn stand-in. Where scripting
   is available it shows exactly one of them, and shows nothing until it knows
   which, so the page cannot cycle through all three while loading. Without
   scripting the photograph and stand-in fall back to their natural state. */
.js .dial--media .dial__photo,
.js .dial--media .watch { opacity: 0; }
.js .dial--media.show-still .dial__photo { opacity: 1; }
.js .dial--media.show-watch .watch { opacity: 1; }

/* ---------- the eyebrow above the question ---------- */
.hero__eyebrow {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--s2);
}

/* ---------- three points, set as type and nothing else ---------- */
.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  max-width: 62rem;
  margin: 0 auto;
}
.point__no {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--brass);
  margin-bottom: var(--s2);
}
.point h3 {
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.point p { color: var(--dim); font-size: 0.95rem; }

/* ---------- what you are ordering ---------- */
.ordering { max-width: 46rem; margin: 0 auto; }
.ordering__head {
  font-weight: 200;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin-bottom: var(--s4);
  max-width: 16em;
}
.ordering__list { list-style: none; display: grid; gap: var(--s3); }
.ordering__list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s2);
  align-items: baseline;
  color: var(--dim);
  font-size: 1.02rem;
}
.ordering__list li::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass);
  transform: translateY(-0.15em);
}
.ordering__list strong { color: var(--ink); font-weight: 400; }
.ordering__price {
  margin-top: var(--s5);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3);
}
.ordering__from { font-weight: 200; font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.04em; }
.ordering__from span {
  display: block;
  font-size: 0.56rem; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--faint);
  margin-top: 0.35rem;
}

/* ---------- the plate ---------- */
.plate { position: relative; height: clamp(360px, 70vh, 700px); overflow: hidden; }
.plate__art {
  position: absolute; inset: -10% 0;
  background-image: url("../assets/pieces/aetas-art.webp");
  background-size: 155%;
  background-position: 38% 62%;
  filter: brightness(1.28) saturate(1.08);
  will-change: transform;
}
.plate::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--black), transparent 32%, transparent 68%, var(--black)),
    linear-gradient(to right, var(--black), transparent 26%, transparent 74%, var(--black)),
    radial-gradient(ellipse 50% 62% at 50% 50%, rgba(8, 8, 7, 0.34), transparent 76%);
}
.plate__word { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: var(--s4); }
.plate__word p {
  font-weight: 200;
  font-size: clamp(1.5rem, 3.6vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  max-width: 18em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 10px 56px rgba(0, 0, 0, 0.9);
}

/* ---------- manifesto ---------- */
.manifesto { text-align: center; }
.manifesto .display {
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.3;
  max-width: min(100%, 21em);
  margin: 0 auto;
}
.manifesto .display .w { display: inline-block; opacity: 0.16; transition: opacity 0.7s ease; }
.manifesto .display .w.is-lit { opacity: 1; }

/* ---------- how it is made ---------- */
.making { max-width: 50rem; margin: 0 auto; }
.making__row { display: grid; grid-template-columns: 4rem 1fr; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; }
.making__index { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; color: var(--brass); }
.making__title { font-weight: 200; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 0.5rem; }
.making__text { color: var(--dim); font-size: 0.98rem; max-width: 34rem; }

/* ---------- marks ---------- */
.marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); max-width: 58rem; margin: 0 auto; text-align: center; }
.mark__figure { font-weight: 200; font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -0.04em; color: var(--brass); }
.mark:nth-child(2) .mark__figure { color: var(--ink); }
.mark:nth-child(3) .mark__figure { color: var(--ember-lit); }
.mark__text { margin-top: var(--s2); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); }

/* ---------- quote / tenets ---------- */
.quote { text-align: center; max-width: 46rem; margin: 0 auto; }
.quote blockquote { font-weight: 200; font-size: clamp(1.7rem, 3.8vw, 2.8rem); line-height: 1.22; letter-spacing: -0.035em; }
.quote figcaption { margin-top: var(--s3); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass); }
.tenets { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s5); max-width: 56rem; margin: 0 auto; }
.tenet h3 { font-weight: 300; font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.tenet p { color: var(--dim); font-size: 0.94rem; }

/* ---------- page hero ---------- */
.page-hero { padding: var(--s7) 0 var(--s4); text-align: center; }
.page-hero__sub { margin: var(--s3) auto 0; max-width: 34rem; color: var(--dim); font-size: 1rem; }

/* ---------- pieces ---------- */
.piece {
  overflow: clip;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: var(--s6) 0;
}
.piece > * { min-width: 0; }
.piece:nth-of-type(even) .piece__figure { order: 2; }
.piece__figure { position: relative; display: flex; justify-content: center; }
.piece__figure::before {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(circle closest-side, rgba(213, 171, 106, 0.15), transparent 70%);
  pointer-events: none;
}
.piece__no { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.36em; color: var(--brass); text-transform: uppercase; margin-bottom: var(--s2); }
.piece__name { font-weight: 200; font-size: clamp(2.4rem, 5.5vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--s3); }
.piece__desc { color: var(--dim); max-width: 32rem; margin-bottom: var(--s4); }
.piece__status { display: inline-block; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember-lit); margin-bottom: var(--s3); }
.piece__status--quiet { color: var(--faint); }
.spec { display: grid; grid-template-columns: 8rem 1fr; gap: 0.3rem 1.8rem; padding: 0.5rem 0; font-size: 0.94rem; }
.spec dt { letter-spacing: 0.26em; text-transform: uppercase; font-size: 0.55rem; font-weight: 500; color: var(--faint); align-self: center; }
.spec dd { color: var(--dim); }

/* ---------- contact ---------- */
.contact { text-align: center; }
.contact__mail { display: inline-block; font-weight: 200; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.03em; color: var(--brass); transition: color 0.4s; }
.contact__mail:hover { color: var(--ink); }

/* ---------- check authenticity ---------- */
.check { max-width: 36rem; margin: 0 auto; text-align: center; }
.check__label { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s2); }
.check__input {
  width: 100%; border: none;
  background: rgba(244, 240, 234, 0.05);
  border-radius: 14px;
  font-weight: 200;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  letter-spacing: 0.14em; text-indent: 0.14em;
  text-align: center; text-transform: uppercase;
  color: var(--ink);
  padding: 1.15rem 1rem;
  transition: box-shadow 0.4s, background 0.4s;
}
.check__input::placeholder { color: rgba(244, 240, 234, 0.18); }
.check__input:focus { outline: none; background: rgba(244, 240, 234, 0.08); box-shadow: 0 0 0 1px rgba(213, 171, 106, 0.55); }
.check__btn { margin-top: var(--s3); }
.check.is-missing .check__input { box-shadow: 0 0 0 1px var(--ember); }

.cert { position: relative; max-width: 34rem; margin: var(--s5) auto 0; padding: var(--s5) var(--s4) var(--s4); text-align: center; animation: certIn 0.9s var(--ease); }
.cert::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(213, 171, 106, 0.13), transparent 72%);
  pointer-events: none;
}
@keyframes certIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.cert__kicker { position: relative; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--s2); }
.cert__no { position: relative; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--faint); }
.cert__name { position: relative; font-weight: 200; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.05; letter-spacing: -0.04em; margin: 0.4rem 0 var(--s3); }
.cert__photo { position: relative; width: 58%; margin: 0 auto var(--s3); }
.cert .spec { position: relative; text-align: left; }
.cert__foot { position: relative; margin-top: var(--s3); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); line-height: 2.4; }
.cert--none .cert__kicker { color: var(--ember-lit); }

/* ---------- the application ---------- */
.order { padding: 0 0 var(--s6); }
.order__sheet { width: min(720px, calc(100% - 3rem)); margin: 0 auto; }
.order__step { padding: var(--s4) 0; }
.order__step-label { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s3); }

.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); border: none; padding: 0; margin: 0; min-width: 0; }
.choices legend { padding: 0; }
.choice {
  position: relative; display: block;
  padding: var(--s3) var(--s2);
  border-radius: 16px;
  background: rgba(244, 240, 234, 0.045);
  cursor: pointer;
  transition: background 0.45s, box-shadow 0.45s, transform 0.45s var(--ease);
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice:hover { transform: translateY(-3px); background: rgba(244, 240, 234, 0.08); }
.choice:has(input:checked) { background: rgba(213, 171, 106, 0.14); box-shadow: 0 0 0 1px rgba(213, 171, 106, 0.55); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--brass); }
.choice__no { display: block; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.3em; color: var(--brass); margin-bottom: var(--s2); }
.choice__title { display: block; font-weight: 300; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.choice__text { display: block; font-size: 0.84rem; line-height: 1.6; color: var(--dim); }
.choices.is-missing .choice { box-shadow: 0 0 0 1px var(--ember); }

.letterhead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: 0.56rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); }
.field__input {
  border: none;
  background: rgba(244, 240, 234, 0.05);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  font-family: var(--ui); font-weight: 300; font-size: 1rem;
  color: var(--ink);
  transition: box-shadow 0.4s, background 0.4s;
}
.field__input::placeholder { color: rgba(244, 240, 234, 0.24); }
.field__input:focus { outline: none; background: rgba(244, 240, 234, 0.08); box-shadow: 0 0 0 1px rgba(213, 171, 106, 0.55); }
.field__textarea { resize: vertical; line-height: 1.75; }
.field__textarea--tall { min-height: 15rem; }
.field.is-missing .field__input { box-shadow: 0 0 0 1px var(--ember); }
.field.is-missing .field__label { color: var(--ember-lit); }

.count { margin-top: 0.6rem; text-align: right; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); transition: color 0.4s; }
.count.is-met { color: var(--brass); }
.order__smallprint { color: var(--dim); max-width: 34rem; margin-bottom: var(--s3); font-size: 0.95rem; }
.order__confirm { padding: var(--s5) 0 var(--s3); text-align: center; }
.seal {
  width: 100px; height: 100px; margin: 0 auto var(--s4);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--ember-lit), var(--ember) 55%, #5e1c10);
  box-shadow: 0 0 70px rgba(193, 68, 47, 0.45);
  display: flex; align-items: center; justify-content: center;
  animation: stamp 0.75s var(--ease);
}
.seal span { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; text-indent: 0.3em; color: #fff3e6; }
@keyframes stamp { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1); } }
.order__confirm-title { font-weight: 200; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.035em; margin-bottom: var(--s2); }
.order__confirm-sub { color: var(--dim); max-width: 28rem; margin: 0 auto; }

/* ---------- footer ---------- */
.footer { padding: var(--s6) 0 var(--s4); text-align: center; }
.footer__word {
  display: block;
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--ink);
}
.footer__meta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s3);
  font-size: 0.56rem; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--faint);
}
.footer__meta nav { display: flex; flex-wrap: wrap; gap: var(--s3); }
.footer__meta a { transition: color 0.4s; }
.footer__meta a:hover { color: var(--brass); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: var(--s6); gap: var(--s4); }
  .hero__write { max-width: none; margin: 0 auto; }
  .write__foot { justify-content: center; }
  .hero__meta { position: static; margin-top: var(--s3); text-align: center; }
}
@media (max-width: 900px) {
  .bar { padding: var(--s2) var(--s3); }
  .bar.is-scrolled { padding: 0.7rem var(--s3); }
  .bar__brand { font-size: 1.1rem; letter-spacing: 0.14em; text-indent: 0.14em; }
  .menu-btn__label { display: none; }
  .menu__close { top: var(--s2); right: var(--s3); }
  .menu__no { left: -1.6rem; }
  .container { width: calc(100% - 2.6rem); }
  .section { padding: var(--s6) 0; }
  .page-hero { padding: var(--s7) 0 var(--s3); }
  .piece { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s5) 0; }
  .piece:nth-of-type(even) .piece__figure { order: 0; }
  .marks, .tenets, .points, .choices, .letterhead { grid-template-columns: 1fr; }
  .points { gap: var(--s4); }
  .making__row { grid-template-columns: 1fr; gap: 0.4rem; padding: var(--s3) 0; }
  .atmos { filter: blur(2px) saturate(1.18) brightness(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-line > span { opacity: 1; transform: none; }
  .manifesto .display .w { opacity: 1; }
  .js .dial--media .dial__photo { opacity: 1; }
}