/* ==========================================================================
   MORGAN TOUCH — main stylesheet
   Direction: LOST WAX
   Reads tokens from tokens.css. One class per component, flat specificity —
   every selector below is a single class or element, nothing deeper, so the
   cascade never fights itself.
   ========================================================================== */

/* ==========================================================================
   1 · RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--wax-black);
  color: var(--kaolin);
  font-family: var(--ff-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg, picture { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--kaolin); color: var(--wax-black);
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: top var(--d-fast) var(--e-out);
}
.skip:focus { top: var(--s-4); }

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

/* ==========================================================================
   2 · TYPOGRAPHY PRIMITIVES
   ========================================================================== */
.display {
  font-family: var(--ff-display);
  font-variation-settings: var(--frau-display);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
}
.display-xl { font-size: var(--t-3xl); }
.display-lg { font-size: var(--t-2xl); }
.display-md { font-size: var(--t-xl); }

.voice {
  font-family: var(--ff-display);
  font-style: italic;
  font-variation-settings: var(--frau-text);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--kaolin);
}

.label {
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--kaolin-soft);
}
.label-gold { color: var(--raw-gold); }

.lede { font-size: var(--t-md); max-width: var(--measure); color: var(--kaolin); }
.body-soft { color: var(--kaolin-soft); max-width: var(--measure); }
.caption { font-size: var(--t-sm); color: var(--kaolin-faint); line-height: 1.5; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Ornamental initial — used once per long-form page, never more */
.opener::first-letter {
  font-family: var(--ff-display);
  font-variation-settings: var(--frau-display);
  float: left;
  font-size: 4.1em;
  line-height: 0.78;
  padding: 0.08em 0.1em 0 0;
  color: var(--raw-gold);
}

/* ==========================================================================
   3 · LAYOUT
   ========================================================================== */
.shell  { width: 100%; max-width: var(--shell);  margin-inline: auto; padding-inline: var(--gutter); }
.column { width: 100%; max-width: var(--column); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(3rem, 7vw, 6rem); }

.stack   { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-7 { gap: var(--s-7); }
.gap-8 { gap: var(--s-8); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.between { justify-content: space-between; }

.hairline { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Kaolin surface — the clay ground. Used for Bespoke and Bridal. */
.inverse {
  background: var(--inv-ground);
  color: var(--inv-ink);
}
.inverse .label      { color: var(--inv-soft); }
.inverse .label-gold { color: var(--gold-deep); }
.inverse .body-soft,
.inverse .caption    { color: var(--inv-soft); }
.inverse .hairline   { background: var(--rule-light); }
.inverse .voice      { color: var(--inv-ink); }
.inverse .opener::first-letter { color: var(--gold-deep); }

/* Editorial split — asymmetric by design, never 50/50 */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split      { grid-template-columns: 1.15fr 1fr; }
  .split-flip { grid-template-columns: 1fr 1.15fr; }
  .split-wide { grid-template-columns: 1.7fr 1fr; }
}

/* ==========================================================================
   4 · FIGURES & MEDIA
   ========================================================================== */
.figure { position: relative; overflow: hidden; margin: 0; background: var(--wax-deep); }
.figure > picture { width: 100%; height: 100%; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure-tall  { aspect-ratio: 4 / 5; }
.figure-wide  { aspect-ratio: 16 / 10; }
.figure-square{ aspect-ratio: 1 / 1; }

.figure figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  font-size: var(--t-xs); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--kaolin-soft);
  background: linear-gradient(transparent, rgb(12 10 8 / 0.85));
}

/* Parallax layer — driven by JS custom property, clamped so it never gaps */
.par { will-change: transform; transform: translate3d(0, var(--par, 0px), 0); }
.figure-par { overflow: hidden; }
.figure-par img { height: 116%; margin-top: -8%; }

/* ==========================================================================
   5 · THE HAZE REVEAL
   The signature motion of this direction: pieces do not slide in, they
   surface through warm haze — the way a casting emerges from the mould.
   ========================================================================== */
.haze {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(1.014);
  filter: blur(9px) saturate(0.55) brightness(0.72);
  transition:
    opacity    var(--d-haze) var(--e-out),
    transform  var(--d-haze) var(--e-out),
    filter     var(--d-haze) var(--e-out);
  will-change: opacity, transform, filter;
}
.haze.is-in { opacity: 1; transform: none; filter: none; }

/* Type surfaces line by line rather than as a block */
.haze-line { display: block; overflow: hidden; }
.haze-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform var(--d-slow) var(--e-out);
  transition-delay: var(--stagger, 0ms);
}
.is-in .haze-line > span { transform: none; }

/* A rule that draws itself */
.draw {
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-slow) var(--e-inout);
}
.draw.is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .haze { opacity: 1; transform: none; filter: none; }
  .haze-line > span { transform: none; }
  .draw { transform: none; }
  .figure-par img { height: 100%; margin-top: 0; }
  .par { transform: none !important; }
}

/* ==========================================================================
   6 · BUTTONS
   ========================================================================== */
.btn {
  --btn-ink: var(--kaolin);
  --btn-line: var(--rule);
  position: relative; display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 1.05rem 2.1rem;
  font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase;
  font-weight: 500; color: var(--btn-ink);
  border: 1px solid var(--btn-line);
  overflow: hidden; isolation: isolate;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
/* the fill rises like metal into a mould */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--raw-gold);
  transform: translateY(101%);
  transition: transform var(--d-base) var(--e-out);
}
.btn:hover, .btn:focus-visible { color: var(--wax-black); border-color: var(--raw-gold); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

.btn-solid { --btn-ink: var(--wax-black); --btn-line: var(--raw-gold); background: var(--raw-gold); }
.btn-solid::before { background: var(--gold-bright); }
.btn-solid:hover, .btn-solid:focus-visible { color: var(--wax-black); }

.inverse .btn { --btn-ink: var(--inv-ink); --btn-line: var(--rule-light); }
.inverse .btn:hover, .inverse .btn:focus-visible { color: var(--inv-ground); }
.inverse .btn::before { background: var(--wax-black); }

.btn-wa { --btn-line: var(--gold-deep); }
.btn-wa svg { width: 15px; height: 15px; flex: none; }

/* Text link with a rule that wipes through */
.tlink {
  position: relative; display: inline-block; padding-bottom: 3px;
  font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 500; color: var(--raw-gold);
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-base) var(--e-out);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.inverse .tlink { color: var(--gold-deep); }

/* ==========================================================================
   7 · HEADER & NAVIGATION
   ========================================================================== */
.head {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav);
  transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
  border-bottom: 1px solid transparent;
}
.head.is-stuck,
.head-solid .head {
  background: rgb(20 17 14 / 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--rule);
}
.head-in {
  max-width: var(--shell); margin-inline: auto; padding: var(--s-4) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand img { width: clamp(30px, 4vw, 38px); }
.brand-word {
  font-family: var(--ff-display); font-variation-settings: var(--frau-text);
  font-size: var(--t-sm); letter-spacing: 0.3em; text-transform: uppercase;
  padding-left: 0.3em; color: var(--kaolin);
}
@media (max-width: 560px) { .brand-word { display: none; } }

.nav { display: none; }
@media (min-width: 1280px) {
  .nav { display: flex; gap: clamp(1.1rem, 2.4vw, 2.3rem); align-items: center; }
}
.nav-item {
  position: relative; padding: var(--s-2) 0; white-space: nowrap;
  font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 500; color: var(--kaolin-soft);
  transition: color var(--d-fast) var(--e-out);
}
.nav-item::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--raw-gold); transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-base) var(--e-out);
}
.nav-item:hover, .nav-item:focus-visible, .nav-item[aria-current="page"] { color: var(--kaolin); }
.nav-item:hover::after, .nav-item:focus-visible::after,
.nav-item[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.head-tools { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.head-book { padding: .85rem 1.2rem; }
@media (max-width: 520px) { .head-book { display: none; } }

/* Sound control — a single icon toggle, on every page.
   The volume slider is tucked beside it and slides out on hover or keyboard
   focus, so the header stays clean but volume is still reachable. */
.sound-group { display: flex; align-items: center; }

.sound {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 14px;
  color: var(--kaolin-soft);
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
}
.sound:hover, .sound:focus-visible { color: var(--raw-gold); border-color: var(--gold-deep); }
.sound.is-on { color: var(--raw-gold); border-color: var(--gold-deep); }
.sound-ico { width: 22px; height: 22px; display: block; }

/* Off: the cross shows and the waves are hidden. On: the reverse. */
.sound-wave { opacity: 0; transition: opacity var(--d-fast) var(--e-out); }
.sound-mute { opacity: 1; transition: opacity var(--d-fast) var(--e-out); }
.sound.is-on .sound-wave { opacity: 1; }
.sound.is-on .sound-mute { opacity: 0; }

/* The outer wave breathes gently while sound is playing. */
.sound.is-on .sound-wave:last-of-type { animation: wave 2.4s var(--e-inout) infinite; }
@keyframes wave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sound.is-on .sound-wave:last-of-type { animation: none; opacity: 1; }
}

.vol-wrap {
  display: flex; align-items: center;
  width: 0; overflow: hidden;
  transition: width var(--d-base) var(--e-out), margin var(--d-base) var(--e-out);
}
.sound-group:hover .vol-wrap,
.sound-group:focus-within .vol-wrap { width: 76px; margin-left: var(--s-3); }
.vol { width: 72px; accent-color: var(--raw-gold); }

/* On a touch device there is no hover, so the slider would be unreachable.
   Hide it there and let the toggle do the work. */
@media (hover: none), (pointer: coarse) {
  .sound-group:hover .vol-wrap,
  .sound-group:focus-within .vol-wrap { width: 0; margin-left: 0; }
}

/* Menu trigger */
.burger { display: flex; flex-direction: column; gap: 5px; padding: var(--s-2); }
@media (min-width: 1280px) { .burger { display: none; } }
.burger i { display: block; width: 22px; height: 1px; background: var(--kaolin);
  transition: transform var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out); }
.burger.is-open i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open i:nth-child(2) { opacity: 0; }
.burger.is-open i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen menu (mobile + the desktop "All collections" panel) */
.menu {
  position: fixed; inset: 0; z-index: var(--z-veil);
  background: var(--wax-deep);
  padding: calc(var(--s-9) + 1rem) var(--gutter) var(--s-7);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--e-inout), visibility var(--d-base);
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu-grid {
  max-width: var(--shell); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.menu-col { display: flex; flex-direction: column; gap: var(--s-3); }
.menu-col h3 {
  font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--raw-gold); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-2);
}
.menu-link {
  font-family: var(--ff-display); font-variation-settings: var(--frau-text);
  font-size: var(--t-md); color: var(--kaolin-soft);
  transition: color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.menu-link:hover, .menu-link:focus-visible { color: var(--raw-gold); transform: translateX(6px); }
.menu-foot {
  max-width: var(--shell); margin: var(--s-8) auto 0; padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between;
}

/* ==========================================================================
   8 · CINEMATIC ENTRY
   ========================================================================== */
.intro-film {
  position: fixed; inset: 0; z-index: var(--z-intro);
  display: grid; place-items: center; overflow: hidden;
  background: var(--wax-deep); color: var(--kaolin);
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}
.intro-film.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-entry {
  position: relative; z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: var(--s-4); text-align: center;
  transition: opacity 500ms var(--e-out), transform 700ms var(--e-out);
}
.intro-entry::before {
  content: ""; position: absolute; left: 50%; top: 48%; width: min(70vw, 620px);
  aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(circle, rgb(200 162 90 / .1), transparent 68%);
}
.intro-entry img { width: 86px; }
.intro-name {
  font-family: var(--ff-display); font-size: var(--t-xl); font-weight: 300;
  letter-spacing: .12em; text-transform: uppercase;
}
.intro-entry .btn { margin-top: var(--s-4); min-width: 150px; justify-content: center; }
.intro-reel { position: absolute; inset: 0; }
.intro-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.045); }
.intro-frame picture, .intro-frame img { display: block; width: 100%; height: 100%; }
.intro-frame img { object-fit: cover; }
.intro-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(12 10 8 / .88), rgb(12 10 8 / .08) 62%, rgb(12 10 8 / .35));
}
.intro-frame figcaption {
  position: absolute; left: 50%; bottom: clamp(3rem, 10vh, 7rem); z-index: 2;
  width: min(90vw, 900px); transform: translateX(-50%); text-align: center;
  font-family: var(--ff-display); font-size: var(--t-2xl); font-weight: 300;
  color: var(--kaolin);
}
.intro-film.is-playing .intro-entry { opacity: 0; transform: scale(.96); pointer-events: none; }
.intro-film.is-playing .intro-frame-1 { animation: intro-shot 1.9s var(--e-inout) .15s both; }
.intro-film.is-playing .intro-frame-2 { animation: intro-shot 1.9s var(--e-inout) 1.7s both; }
.intro-film.is-playing .intro-frame-3 { animation: intro-shot 2.1s var(--e-inout) 3.25s both; }
@keyframes intro-shot {
  0% { opacity: 0; transform: scale(1.045); }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}
.intro-skip {
  position: absolute; right: var(--gutter); bottom: var(--s-5); z-index: 4;
  padding: var(--s-3); font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--kaolin-soft); opacity: 0; pointer-events: none;
  transition: color var(--d-fast), opacity var(--d-base);
}
.intro-film.is-playing .intro-skip { opacity: 1; pointer-events: auto; }
.intro-skip:hover, .intro-skip:focus-visible { color: var(--raw-gold); }
body.intro-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .intro-film.is-playing .intro-frame { animation: none; }
}

/* ==========================================================================
   9 · HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding-block: calc(var(--s-9) + 2rem) var(--s-8);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 62% 22%, transparent 22%, rgb(12 10 8 / 0.62) 78%),
    linear-gradient(to top, var(--wax-black) 2%, rgb(20 17 14 / 0.34) 46%, rgb(20 17 14 / 0.5) 100%);
}
.catalogue-hero .hero-bg img { object-position: center 32%; }
.catalogue-hero .hero-bg::after {
  background:
    linear-gradient(90deg, rgb(12 10 8 / .93) 0%, rgb(12 10 8 / .7) 38%, rgb(12 10 8 / .08) 72%),
    linear-gradient(to top, var(--wax-black) 0%, transparent 38%, rgb(12 10 8 / .18));
}
.hero-copy { max-width: 780px; }
.hero-in { position: relative; z-index: 2; width: 100%; }
.hero-title { font-size: var(--t-3xl); }
.hero-title em { font-style: italic; color: var(--raw-gold); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
  padding-top: var(--s-6); margin-top: var(--s-6); border-top: 1px solid var(--rule);
}
.hero-meta div { display: flex; flex-direction: column; gap: var(--s-1); }
.hero-meta strong { font-family: var(--ff-display); font-weight: 300;
  font-size: var(--t-lg); color: var(--kaolin); }

.scroll-cue {
  position: absolute; left: var(--gutter); bottom: var(--s-5); z-index: 2;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--kaolin-faint);
}
.scroll-cue span { display: block; width: 46px; height: 1px; background: var(--gold-deep);
  transform-origin: left; animation: cue 2.6s var(--e-inout) infinite; }
@keyframes cue { 0%, 100% { transform: scaleX(0.24); } 50% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* Product-led split used for the first collection reveal. */
.feature-media { aspect-ratio: 4 / 5; }
.lounge .figure-wide { min-height: 440px; }

/* ==========================================================================
   10 · THE MUSEUM WALL — horizontal scroll
   ========================================================================== */
.wall { position: relative; padding-block: var(--section); overflow: hidden; }
.wall-track {
  display: flex; gap: clamp(1rem, 2.6vw, 2.5rem);
  padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  padding-bottom: var(--s-5);
}
.wall-track::-webkit-scrollbar { display: none; }
.wall-card {
  flex: 0 0 clamp(230px, 32vw, 400px);
  scroll-snap-align: center;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.wall-card .figure { aspect-ratio: 4 / 5; }
.wall-card img { transition: transform var(--d-slow) var(--e-out), filter var(--d-slow) var(--e-out); }
.wall-card:hover img, .wall-card:focus-within img { transform: scale(1.045); filter: brightness(1.12); }
.wall-rail {
  max-width: var(--shell); margin: var(--s-5) auto 0; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}
.wall-bar { flex: 1; height: 1px; background: var(--rule); position: relative; }
.wall-bar i { position: absolute; inset-block: 0; left: 0; display: block;
  background: var(--raw-gold); width: var(--w, 20%);
  transform: translateX(var(--x, 0%)); transition: transform 120ms linear; }

/* ==========================================================================
   10 · HOW IT IS MADE
   Four stages, in order. The numbers encode a real sequence — the casting
   process — not decoration. Four fits one row on a desktop, so the whole
   story is readable at a glance rather than being scrolled through.
   ========================================================================== */
.stages,
.days { display: grid; gap: 1px; background: var(--rule); }
@media (min-width: 640px)  { .stages, .days { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stages { grid-template-columns: repeat(4, 1fr); }
                             .days   { grid-template-columns: repeat(3, 1fr); } }

.stage,
.day {
  background: var(--wax-black); padding: var(--s-6) var(--s-5) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: background var(--d-base) var(--e-out);
}
.stage:hover, .day:hover { background: var(--wax-raised); }
.stage-n,
.day-n {
  font-family: var(--ff-display); font-variation-settings: var(--frau-display);
  font-size: var(--t-lg); font-weight: 300; line-height: 1; color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-base) var(--e-out);
}
.stage:hover .stage-n, .day:hover .day-n { color: var(--raw-gold); }
.stage h3, .day h3 { font-family: var(--ff-display); font-variation-settings: var(--frau-text);
  font-size: var(--t-md); color: var(--kaolin); }
.stage p, .day p { font-size: var(--t-sm); color: var(--kaolin-soft); line-height: 1.6; }
.stage .figure, .day .figure { aspect-ratio: 4 / 5; margin-top: auto; }

/* ==========================================================================
   11 · COLLECTION TILES
   ========================================================================== */
.tiles { display: grid; gap: clamp(1rem, 2.4vw, 2rem); }
@media (min-width: 640px)  { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles-3 { grid-template-columns: repeat(3, 1fr); } }

.tile { position: relative; display: block; overflow: hidden; background: var(--wax-deep); }
.tile .figure { aspect-ratio: 4 / 5; }
.tile img { transition: transform var(--d-haze) var(--e-out), filter var(--d-haze) var(--e-out); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(12 10 8 / 0.9) 4%, rgb(12 10 8 / 0.18) 46%, transparent 72%);
  transition: opacity var(--d-base) var(--e-out);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); filter: brightness(1.14) saturate(1.06); }
.tile:hover::after { opacity: 0.82; }
.tile-body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.tile-body h3 { font-family: var(--ff-display); font-variation-settings: var(--frau-display);
  font-weight: 300; font-size: var(--t-lg); color: var(--kaolin); }
.tile-count { font-size: var(--t-xs); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--raw-gold); }

/* Feature tile — spans two columns on wide screens */
@media (min-width: 1024px) { .tile-feature { grid-column: span 2; } .tile-feature .figure { aspect-ratio: 16 / 10; } }

/* ==========================================================================
   12 · PIECE DETAIL
   ========================================================================== */
.piece { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 980px) { .piece { grid-template-columns: 1.25fr 1fr; } }
.piece-views { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
.piece-views .figure { aspect-ratio: 1 / 1; }
.piece-views .figure:first-child { grid-column: span 2; aspect-ratio: 4 / 3; }
.piece-info { position: sticky; top: 110px; display: flex; flex-direction: column; gap: var(--s-5); }
.piece-ref { font-family: var(--ff-mono); font-size: var(--t-xs);
  letter-spacing: 0.1em; color: var(--kaolin-faint); }
.catalogue-piece { padding-top: clamp(8rem, 13vw, 12rem); }
.catalogue-piece .piece-views { display: block; }
.catalogue-piece-photo { aspect-ratio: 4 / 5; }
.catalogue-note {
  padding: var(--s-5); border: 1px solid var(--rule); background: var(--wax-raised);
  display: flex; flex-direction: column; gap: var(--s-3);
}

.acc { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; text-align: left;
  font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase;
  font-weight: 500; color: var(--kaolin);
}
.acc-btn i { position: relative; width: 11px; height: 11px; flex: none; }
.acc-btn i::before, .acc-btn i::after {
  content: ""; position: absolute; background: var(--raw-gold);
  transition: transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}
.acc-btn i::before { inset-inline: 0; top: 5px; height: 1px; }
.acc-btn i::after  { inset-block: 0; left: 5px; width: 1px; }
.acc-btn[aria-expanded="true"] i::after { transform: scaleY(0); opacity: 0; }
.acc-panel { overflow: hidden; height: 0; transition: height var(--d-base) var(--e-inout); }
.acc-panel > div { padding-bottom: var(--s-5); }
.spec-row { display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.spec-row dt { color: var(--kaolin-faint); }
.spec-row dd { margin: 0; color: var(--kaolin); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   13 · EDITORIAL
   ========================================================================== */
.posts { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 860px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; flex-direction: column; gap: var(--s-4); }
.post .figure { aspect-ratio: 4 / 3; }
.post img { transition: transform var(--d-slow) var(--e-out); }
.post:hover img { transform: scale(1.04); }
.post h3 { font-family: var(--ff-display); font-variation-settings: var(--frau-text);
  font-size: var(--t-md); color: var(--kaolin); }

.pull {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: var(--frau-text); font-weight: 300;
  font-size: var(--t-xl); line-height: 1.22; color: var(--raw-gold);
  max-width: 22ch; margin-block: var(--s-7);
  padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--gold-deep);
}
.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: var(--s-5); }
.prose p { color: var(--kaolin-soft); }
.prose h2 { font-family: var(--ff-display); font-variation-settings: var(--frau-display);
  font-weight: 300; font-size: var(--t-lg); color: var(--kaolin); margin-top: var(--s-5); }

/* ==========================================================================
   14 · SERVICES GRID
   ========================================================================== */
.services { display: grid; gap: 1px; background: var(--rule); }
@media (min-width: 640px)  { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(4, 1fr); } }
.svc {
  background: var(--wax-black); padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: background var(--d-base) var(--e-out);
}
.svc:hover { background: var(--wax-raised); }
.svc-mark { width: 26px; height: 26px; color: var(--raw-gold); }
.svc h3 { font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 600; color: var(--kaolin); }
.svc p { font-size: var(--t-sm); color: var(--kaolin-soft); line-height: 1.55; }

/* ==========================================================================
   15 · FORMS
   ========================================================================== */
.form { display: grid; gap: var(--s-5); }
.form-row { display: grid; gap: var(--s-5); }
@media (min-width: 680px) { .form-row-2 { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label {
  font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--kaolin-soft); font-weight: 500;
}
.field input, .field select, .field textarea {
  width: 100%; padding: var(--s-4) 0;
  font-family: var(--ff-body); font-size: var(--t-base); color: var(--kaolin);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color var(--d-fast) var(--e-out);
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--raw-gold); }
.field textarea { resize: vertical; min-height: 118px; }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--raw-gold) 50%),
                    linear-gradient(135deg, var(--raw-gold) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field-error { font-size: var(--t-sm); color: var(--error); }

.inverse .field label { color: var(--inv-soft); }
.inverse .field input, .inverse .field select, .inverse .field textarea {
  color: var(--inv-ink); border-bottom-color: var(--rule-light); }
.inverse .field input:focus, .inverse .field select:focus,
.inverse .field textarea:focus { border-bottom-color: var(--gold-deep); }

/* honeypot — off-screen, never display:none (bots detect that) */
.hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.note { padding: var(--s-4) var(--s-5); border-left: 2px solid var(--raw-gold);
  background: var(--wax-raised); font-size: var(--t-sm); color: var(--kaolin-soft); }
.note-ok { border-left-color: var(--success); }
.note-bad { border-left-color: var(--error); }

/* ==========================================================================
   16 · FOOTER
   ========================================================================== */
.foot { background: var(--wax-deep); border-top: 1px solid var(--rule); padding-block: var(--s-8) var(--s-6); }
.foot-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.foot-brand { display: flex; flex-direction: column; gap: var(--s-4); }
.foot-brand img { width: 52px; }
.foot-col h2 { font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--raw-gold); margin-bottom: var(--s-4); }
.foot-col li + li { margin-top: var(--s-2); }
.foot-col a { font-size: var(--t-sm); color: var(--kaolin-soft);
  transition: color var(--d-fast) var(--e-out); }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--raw-gold); }
.foot-social { display: flex; gap: var(--s-4); margin-top: var(--s-2); }
.foot-social a { color: var(--kaolin-soft); transition: color var(--d-fast) var(--e-out); }
.foot-social a:hover { color: var(--raw-gold); }
.foot-social svg { width: 17px; height: 17px; }
.foot-base {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between;
  font-size: var(--t-sm); color: var(--kaolin-faint);
}
.foot-base a:hover { color: var(--raw-gold); }

/* ==========================================================================
   17 · PAGE TRANSITION VEIL — the gold haze wipe
   ========================================================================== */
.veil {
  position: fixed; inset: 0; z-index: var(--z-veil);
  background: linear-gradient(160deg, var(--wax-deep), #1E1710 46%, var(--wax-deep));
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base) var(--e-inout);
}
.veil.is-on { opacity: 1; pointer-events: all; }
.veil-mark {
  position: absolute; left: 50%; top: 50%; width: 62px;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0; transition: opacity var(--d-base) var(--e-out), transform var(--d-slow) var(--e-out);
}
.veil.is-on .veil-mark { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }

/* ==========================================================================
   18 · CURSOR — a slow pool of gold light. Fine pointers only.
   ========================================================================== */
.glow {
  position: fixed; top: 0; left: 0; width: 340px; height: 340px;
  margin: -170px 0 0 -170px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, rgb(200 162 90 / 0.13), rgb(200 162 90 / 0.045) 42%, transparent 68%);
  opacity: 0; transition: opacity var(--d-slow) var(--e-out);
  will-change: transform;
}
.glow.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .glow { display: none; } }

/* ==========================================================================
   19 · INSTAGRAM STRIP
   ========================================================================== */
.gram { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
@media (min-width: 760px) { .gram { grid-template-columns: repeat(6, 1fr); } }
.gram a { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--wax-deep); }
.gram img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-base) var(--e-out), filter var(--d-base) var(--e-out); }
.gram a:hover img, .gram a:focus-visible img { transform: scale(1.07); filter: brightness(1.15); }

/* ==========================================================================
   20 · TOUCH TARGETS
   On a touch device every control clears 44px in the direction it is thin.
   Applied by pointer type rather than by width, so a touchscreen laptop is
   treated as touch and a mouse-driven narrow window is not.
   ========================================================================== */
@media (pointer: coarse) {
  .menu-link,
  .foot-col a,
  .foot-base a,
  .tlink,
  .spec-row dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .sound { width: 48px; height: 48px; }
  .burger { padding: var(--s-3); }
  .foot-social a { display: inline-flex; align-items: center;
                   min-width: 44px; min-height: 44px; }
  .foot-social svg { margin-inline: auto; }
  .acc-btn { min-height: 52px; }
  .field input, .field select, .field textarea { min-height: 44px; }
}

/* The mobile menu is the only navigation below 1080px, so its links are
   generously sized there regardless of pointer type. */
@media (max-width: 1079px) {
  .menu-link { padding-block: 0.5rem; }
}

/* ==========================================================================
   21 · UTILITIES
   ========================================================================== */
.center { text-align: center; margin-inline: auto; }
.mw-40 { max-width: 40ch; } .mw-52 { max-width: 52ch; } .mw-62 { max-width: 62ch; }
.gold { color: var(--raw-gold); }
.soft { color: var(--kaolin-soft); }
.flag {
  display: inline-block; margin-top: var(--s-2);
  font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.08em;
  color: var(--ember); border: 1px dashed currentColor; padding: 2px 6px;
}

/* ==========================================================================
   22 · CATEGORY INDEX
   Morgan Touch's own product taxonomy, recovered from the previous site.
   A plain list, set large — it reads as a menu of what the bench makes.
   ========================================================================== */
.cats {
  display: flex; flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
}
.cats a {
  display: inline-block;
  font-family: var(--ff-display);
  font-variation-settings: var(--frau-text);
  font-size: var(--t-md);
  color: var(--kaolin-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.cats a:hover, .cats a:focus-visible {
  color: var(--raw-gold);
  border-bottom-color: var(--gold-deep);
}
@media (pointer: coarse) { .cats a { min-height: 44px; display: inline-flex; align-items: center; } }