/* Maison Vesprée: the brand book in the evening light. */
:root {
  --bleu: #1C2640;
  --bleu-deep: #121a2e;
  --bleu-lift: #232f4f;
  --or: #C8A45E;
  --or-bright: #d9bb7c;
  --craie: #EFE9DC;
  --craie-2: #e7e0d0;
  --rose: #D8A596;
  --noir: #121212;
  --cave: #14110e;

  /* chalk page (light) */
  --chalk-bg: var(--craie);
  --chalk-ink: var(--bleu);
  --chalk-muted: #4a5170;
  --chalk-gold: #7f6127;
  --chalk-line: rgba(143, 112, 50, 0.38);
  --chalk-plate: #e6dece;
  /* night page */
  --night-bg: var(--bleu);
  --night-ink: var(--craie);
  --night-muted: #b9b5ab;
  --night-gold: var(--or);
  --night-line: rgba(200, 164, 94, 0.32);
  --night-plate: #202c4a;

  --serif-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --serif-sc: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --serif-text: "Cormorant Garamond", Garamond, Georgia, serif;

  --gutter: clamp(20px, 5.2vw, 76px);
  --maxw: 1320px;
  --mast-h: 64px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-slow: cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-canvas-ui: 2;
  --z-sticky: 20;
  --z-mast: 40;
  --z-dialog: 60;

  --exploration-footer-bg: var(--bleu-deep);
  --exploration-footer-ink: var(--craie);
  --exploration-footer-border: rgba(200, 164, 94, 0.28);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --chalk-bg: #182038;
    --chalk-ink: var(--craie);
    --chalk-muted: #bdb8ac;
    --chalk-gold: var(--or);
    --chalk-line: rgba(200, 164, 94, 0.3);
    --chalk-plate: #1f2945;
    --night-bg: #111829;
    --night-plate: #1a2338;
    --exploration-footer-bg: #0d1322;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--mast-h); }
body {
  margin: 0;
  background: var(--bleu-deep);
  color: var(--craie);
  font-family: var(--serif-text);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p { margin: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--craie); color: var(--bleu); padding: 12px 18px; font-family: var(--serif-sc); font-weight: 600; letter-spacing: .12em; text-decoration: none; }
.skip:focus { top: 12px; }
[tabindex="-1"]:focus { outline: none; }
html { scrollbar-gutter: stable; }
html.is-tour-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
[hidden] { display: none !important; }

.sc { font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.24em; font-size: 0.86rem; line-height: 1.4; text-transform: lowercase; }
.h2 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(2.05rem, 1.1rem + 3.3vw, 4.25rem); line-height: 1.07; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.h3 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.05rem); line-height: 1.15; margin: 0; text-wrap: balance; }
.lead { font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.prose { max-width: 34em; text-wrap: pretty; }

/* page themes */
.page { position: relative; padding: clamp(84px, 11vw, 168px) var(--gutter); }
.page--chalk { background: var(--chalk-bg); color: var(--chalk-ink); --ink: var(--chalk-ink); --muted: var(--chalk-muted); --gold: var(--chalk-gold); --line: var(--chalk-line); --plate: var(--chalk-plate); }
.page--night { background: var(--night-bg); color: var(--night-ink); --ink: var(--night-ink); --muted: var(--night-muted); --gold: var(--night-gold); --line: var(--night-line); --plate: var(--night-plate); }
.page--cave { background: var(--cave); color: var(--craie); --ink: var(--craie); --muted: #bdb5a6; --gold: var(--or); --line: rgba(200, 164, 94, 0.28); --plate: #1d1914; }
.page > * { max-width: var(--maxw); margin-inline: auto; }
.section-head { margin-bottom: clamp(40px, 6vw, 84px); display: grid; gap: 22px; }
.section-head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 960px) { .section-head--split { grid-template-columns: 1.25fr 1fr; gap: 48px; } }
.section-no { display: flex; align-items: baseline; gap: 16px; color: var(--gold); }
.numeral { font-family: var(--serif-display); font-style: italic; font-size: 1.35rem; letter-spacing: 0.02em; }
.section-no .sc { color: var(--gold); }
.lead, .prose, .fiction-note { color: var(--ink); }
.fiction-note { font-style: italic; color: var(--muted); font-size: 1.05rem; max-width: 30em; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }

.button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--or); background: transparent; text-decoration: none; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.2em; font-size: 0.92rem; text-transform: lowercase; transition: background-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.button:hover { background: rgba(200, 164, 94, 0.14); }
.button:active { transform: scale(0.97); }
.text-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.18em; font-size: 0.9rem; text-transform: lowercase; color: var(--gold, var(--or)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: currentColor; }
.text-button:hover { text-decoration-color: transparent; }
.round-button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; font-size: 1.2rem; transition: border-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.round-button:hover { border-color: var(--gold); }
.round-button:active { transform: scale(0.95); }
.round-button:disabled { opacity: 0.35; cursor: default; }

/* masthead */
.mast { position: fixed; inset: 0 0 auto 0; height: var(--mast-h); z-index: var(--z-mast); display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter); color: var(--craie); background: linear-gradient(to bottom, rgba(12, 17, 31, 0.55), rgba(12, 17, 31, 0)); transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); padding-top: env(safe-area-inset-top); height: calc(var(--mast-h) + env(safe-area-inset-top)); }
.mast.is-solid { background: var(--bleu-deep); box-shadow: 0 1px 0 rgba(200, 164, 94, 0.25); }
.mast a { text-decoration: none; }
.mast-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.86rem; text-transform: lowercase; white-space: nowrap; }
.mast-back:hover { color: var(--or-bright); }
.mast-back-short { display: none; }
.mast-mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.3em; font-size: 0.86rem; text-transform: lowercase; color: var(--craie); white-space: nowrap; }
.mast-star { width: 16px; height: 16px; fill: var(--or); }
.mast-nav { display: flex; gap: clamp(14px, 1.6vw, 26px); margin-left: auto; }
.mast-nav a { font-family: var(--serif-text); font-size: 1.02rem; min-height: 44px; display: inline-flex; align-items: center; color: rgba(239, 233, 220, 0.82); transition: color 200ms var(--ease-out); }
.mast-nav a:hover, .mast-nav a[aria-current="true"] { color: var(--or-bright); }
.mast-actions { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.sound-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(200, 164, 94, 0.45); background: transparent; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.8rem; text-transform: lowercase; border-radius: 999px; }
.sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .sp { fill: currentColor; stroke: none; }
.sound-toggle .sw { display: none; }
.sound-toggle[aria-pressed="true"] .sw { display: block; }
.sound-toggle[aria-pressed="true"] .sx { display: none; }
.sound-toggle[aria-pressed="true"] { border-color: var(--or); color: var(--or-bright); }
.mast-create { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: var(--or); color: var(--bleu) !important; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.82rem; text-transform: lowercase; border-radius: 999px; white-space: nowrap; transition: background-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.mast-create:hover { background: var(--or-bright); }
.mast-create:active { transform: scale(0.97); }
@media (max-width: 1359px) { .mast-nav { display: none; } .mast-actions { margin-left: auto; } .mast-tour { display: none; } }
@media (min-width: 1360px) and (max-width: 1559px) { .mast-back-long { display: none; } .mast-back-short { display: inline; } }
@media (min-width: 1360px) and (max-width: 1439px) { .mast-mark span { display: none; } }
@media (max-width: 720px) { .mast-mark span { display: none; } .mast-mark { margin-inline: auto; } .mast-actions { margin-left: 0; } .mast { gap: 12px; } }
@media (max-width: 460px) {
  :root { --mast-h: 56px; }
  .mast-back-long { display: none; } .mast-back-short { display: inline; }
  .sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sound-toggle { width: 40px; padding: 0; justify-content: center; }
  .mast-create { padding: 0 12px; }
}
@media (max-width: 350px) { .mast-mark { display: none; } .mast-actions { margin-left: auto; } .mast-back { letter-spacing: .1em; } }

/* hero */
.hero { position: relative; background: #0c111f; color: var(--craie); }
.hero.is-scrub { height: 230svh; }
.hero-pin { position: relative; height: 100svh; min-height: 520px; overflow: hidden; }
.hero.is-scrub .hero-pin { position: sticky; top: 0; }
.hero-media, .hero-media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: 0; isolation: isolate; }
.hero-scrim { z-index: 1; }
.hero-copy, .hero-dial, .hero-note, .hero-down { z-index: 2; }
.hero-img, .hero-video { object-fit: cover; object-position: 42% 50%; opacity: 0; }
.hero-img.is-on { opacity: 1; }
.hero-video { opacity: 0; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to top, rgba(8, 11, 22, 0.86) 0%, rgba(8, 11, 22, 0.45) 26%, rgba(8, 11, 22, 0) 52%),
  linear-gradient(to bottom, rgba(8, 11, 22, 0.5) 0%, rgba(8, 11, 22, 0) 30%); }
.hero-copy { position: absolute; left: 50%; top: clamp(96px, 17svh, 190px); transform: translateX(-50%); width: min(92vw, 720px); text-align: center; display: grid; justify-items: center; gap: clamp(12px, 2svh, 22px); }
.hero-kicker { color: rgba(239, 233, 220, 0.9); }
.hero-title { margin: 0; width: min(78vw, 600px); }
.hero-wordmark { width: 100%; height: auto; filter: drop-shadow(0 2px 24px rgba(8, 11, 22, 0.35)); }
.hero-tagline { font-family: var(--serif-display); font-style: italic; font-size: clamp(1.3rem, 1rem + 1.3vw, 2.1rem); line-height: 1.2; text-shadow: 0 1px 18px rgba(8, 11, 22, 0.45); }
.hero-dial { position: absolute; left: 50%; bottom: clamp(74px, 12svh, 128px); transform: translateX(-50%); width: min(88vw, 620px); display: grid; justify-items: center; gap: 10px; }
.dial-title { font-family: var(--serif-display); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); line-height: 1.2; }
.dial-track { width: 100%; }
.dial { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; touch-action: pan-y; }
.dial::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, rgba(239, 233, 220, 0.55), var(--or) 50%, rgba(120, 140, 200, 0.7)); }
.dial::-moz-range-track { height: 1px; background: linear-gradient(90deg, rgba(239, 233, 220, 0.55), var(--or) 50%, rgba(120, 140, 200, 0.7)); }
.dial::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 1px solid var(--or); background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath fill='%23C8A45E' d='M0 -50L2.49 -6.01L21.21 -21.21L6.01 -2.49L50 0L6.01 2.49L21.21 21.21L2.49 6.01L0 50L-2.49 6.01L-21.21 21.21L-6.01 2.49L-50 0L-6.01 -2.49L-21.21 -21.21L-2.49 -6.01Z'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 0 0 6px rgba(200, 164, 94, 0.12); transition: box-shadow 200ms var(--ease-out); }
.dial::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--or); background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath fill='%23C8A45E' d='M0 -50L2.49 -6.01L21.21 -21.21L6.01 -2.49L50 0L6.01 2.49L21.21 21.21L2.49 6.01L0 50L-2.49 6.01L-21.21 21.21L-6.01 2.49L-50 0L-6.01 -2.49L-21.21 -21.21L-2.49 -6.01Z'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 0 0 6px rgba(200, 164, 94, 0.12); }
.dial:hover::-webkit-slider-thumb, .dial:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(200, 164, 94, 0.2); }
.dial:focus-visible { outline: none; }
.dial:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--or); outline-offset: 3px; }
.dial:focus-visible::-moz-range-thumb { outline: 2px solid var(--or); outline-offset: 3px; }
.dial-marks { display: flex; justify-content: space-between; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.18em; font-size: 0.74rem; text-transform: lowercase; color: rgba(239, 233, 220, 0.78); margin-top: -4px; }
.dial-readout { font-family: var(--serif-text); font-style: italic; font-size: 1.05rem; color: rgba(239, 233, 220, 0.86); }
.dial-readout output { font-style: normal; font-variant-numeric: lining-nums tabular-nums; margin-right: 6px; color: var(--or-bright); }
.hero-note { position: absolute; left: 50%; bottom: clamp(20px, 4svh, 40px); transform: translateX(-50%); width: min(90vw, 640px); text-align: center; font-size: 0.98rem; font-style: italic; color: rgba(239, 233, 220, 0.8); line-height: 1.4; }
.hero-down { position: absolute; right: var(--gutter); bottom: clamp(20px, 4svh, 40px); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(200, 164, 94, 0.5); }
.hero-down span { width: 8px; height: 8px; border-right: 1px solid var(--or); border-bottom: 1px solid var(--or); transform: translateY(-2px) rotate(45deg); }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (min-height: 560px) {
  .hero-scrim { background:
    linear-gradient(to top, rgba(8, 11, 22, 0.9) 0%, rgba(8, 11, 22, 0.62) 30%, rgba(8, 11, 22, 0.18) 52%, rgba(8, 11, 22, 0) 64%),
    linear-gradient(to right, rgba(8, 11, 22, 0.35) 0%, rgba(8, 11, 22, 0) 45%),
    linear-gradient(to bottom, rgba(8, 11, 22, 0.5) 0%, rgba(8, 11, 22, 0) 22%); }
  .hero-copy { left: var(--gutter); top: auto; bottom: clamp(96px, 15svh, 160px); transform: none; width: min(44vw, 600px); text-align: left; justify-items: start; }
  .hero-title { width: 100%; }
  .hero-dial { left: auto; right: var(--gutter); transform: none; bottom: clamp(96px, 15svh, 160px); width: min(34vw, 470px); justify-items: stretch; text-align: left; }
  .dial-readout { justify-self: start; }
  .hero-note { left: var(--gutter); transform: none; text-align: left; width: auto; max-width: 44em; }
}
@media (max-width: 700px) { .hero-down { display: none; } .dial-marks { font-size: 0.68rem; letter-spacing: 0.12em; } }
@media (max-height: 500px) and (orientation: landscape) {
  .hero-pin { min-height: 360px; }
  .hero-scrim { background:
    linear-gradient(to top, rgba(8, 11, 22, 0.9) 0%, rgba(8, 11, 22, 0.6) 34%, rgba(8, 11, 22, 0) 66%),
    linear-gradient(to bottom, rgba(8, 11, 22, 0.5) 0%, rgba(8, 11, 22, 0) 28%); }
  .hero-copy { left: var(--gutter); top: auto; bottom: 46px; transform: none; width: min(46vw, 420px); text-align: left; justify-items: start; gap: 4px; }
  .hero-title { width: 100%; }
  .hero-kicker { display: none; }
  .hero-tagline { font-size: 1.15rem; }
  .hero-dial { left: auto; right: var(--gutter); transform: none; bottom: 40px; width: min(42vw, 400px); gap: 0; justify-items: stretch; text-align: left; }
  .dial-title { font-size: 1.05rem; }
  .dial-readout { font-size: 0.95rem; }
  .hero-note { left: var(--gutter); transform: none; width: auto; text-align: left; bottom: 10px; font-size: 0.82rem; }
  .hero-down { display: none; }
}
@media (max-width: 380px) { .hero-kicker { letter-spacing: 0.14em; font-size: 0.74rem; } }
@media (max-height: 640px) and (max-width: 420px) { .hero-copy { top: calc(var(--mast-h) + 22px); } .hero-dial { bottom: 88px; } .hero-note { font-size: 0.88rem; } }

/* II. house */
.spread { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 960px) { .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.spread-right { display: grid; gap: 26px; align-content: center; }
.emblem { margin: 0; display: grid; gap: 22px; }
.emblem-stage { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 42%, #243152, var(--bleu) 62%, #151d33); padding: 9%; }
.emblem-stage::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(200, 164, 94, 0.3); pointer-events: none; }
.emblem-lines, .emblem-art { position: absolute; inset: 9%; width: 82%; height: 82%; }
.emblem-lines { fill: none; stroke: var(--or); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.emblem-art { opacity: 0; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 var(--r, 0%), transparent calc(var(--r, 0%) + 8%)); mask-image: radial-gradient(circle at 50% 50%, #000 var(--r, 0%), transparent calc(var(--r, 0%) + 8%)); }
.emblem.is-drawn .emblem-art { opacity: 1; }
.emblem.is-static .emblem-lines { opacity: 0; }
.emblem.is-static .emblem-art { opacity: 1; -webkit-mask-image: none; mask-image: none; }
.emblem figcaption { font-size: 1.08rem; color: var(--muted); max-width: 32em; display: grid; gap: 4px; justify-items: start; }
.emblem figcaption .sc { color: var(--gold); }
.motto { font-family: var(--serif-display); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: var(--gold); }

.codes { margin-top: clamp(80px, 10vw, 150px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); display: grid; gap: clamp(36px, 4vw, 56px); }
.codes-head { display: grid; gap: 14px; }
@media (min-width: 960px) { .codes-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } }
.codes-head p { color: var(--muted); max-width: 32em; }
.palette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.palette li { display: grid; gap: 2px; font-size: 1rem; }
.palette .chip { height: 112px; background: var(--c); margin-bottom: 12px; }
.palette .chip--line { box-shadow: inset 0 0 0 1px var(--line); }
.palette b { font-family: var(--serif-display); font-weight: 400; font-size: 1.12rem; }
.palette i { color: var(--muted); }
.palette code { font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--gold); }
.type-specimens { margin: 0; display: grid; }
.type-specimens > div { display: grid; gap: 6px 40px; padding: 22px 0; border-top: 1px solid var(--line); align-items: baseline; }
@media (min-width: 900px) { .type-specimens > div { grid-template-columns: 280px 1fr; } }
.type-specimens dt { color: var(--gold); }
.type-specimens dt span { display: block; color: var(--muted); letter-spacing: 0.12em; margin-top: 2px; }
.type-specimens dd { margin: 0; overflow-wrap: anywhere; }
.spec--wordmark { font-family: var(--serif-display); font-size: clamp(2.6rem, 1rem + 6vw, 6rem); letter-spacing: 0.16em; line-height: 1; font-variation-settings: "opsz" 48; }
.spec--sc { font-family: var(--serif-sc); font-weight: 500; letter-spacing: 0.45em; font-size: clamp(1rem, 0.8rem + 1vw, 1.6rem); text-transform: lowercase; }
.spec--italic { font-family: var(--serif-display); font-style: italic; font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); font-variation-settings: "opsz" 16; }
.spec--text { font-size: 1.3rem; max-width: 34em; }


/* III. atelier */
.atelier-body { display: grid; gap: 32px; }
@media (min-width: 960px) { .atelier-body { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 56px; align-items: start; } }
.atelier-stage { position: relative; aspect-ratio: 4 / 5; max-height: min(82svh, 860px); width: 100%; overflow: hidden; background: #0d0b09; isolation: isolate; }
@media (min-width: 960px) { .atelier-stage { aspect-ratio: 5 / 6; } }
@media (max-height: 500px) and (orientation: landscape) { .atelier-stage { aspect-ratio: auto; height: 86svh; } }
.atelier-stage::before, .atelier-stage::after, .atelier-stage > .stage-bg { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity 900ms var(--ease-slow); }
.atelier-stage::before { background: radial-gradient(ellipse 70% 60% at 50% 38%, #4a3822 0%, #211910 52%, #0c0a08 100%); }
.atelier-stage::after { background: radial-gradient(ellipse 90% 70% at 78% 72%, #b86a36 0%, #5d3a2a 30%, #243052 70%, #151d33 100%); opacity: 0; }
.atelier-stage > .stage-bg { background: radial-gradient(ellipse 80% 60% at 50% 30%, #2b3a60 0%, #141c31 60%, #0a0f1c 100%); opacity: 0; }
.atelier-stage[data-world="terrace"]::before, .atelier-stage[data-world="city"]::before { opacity: 0; }
.atelier-stage[data-world="terrace"]::after { opacity: 1; }
.atelier-stage[data-world="city"] > .stage-bg { opacity: 1; }
.atelier-canvas { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.atelier-canvas.is-dragging { cursor: grabbing; }
.atelier-canvas:focus-visible { outline-offset: -4px; }
.atelier-canvas canvas { width: 100% !important; height: 100% !important; }
.atelier-hint { position: absolute; left: 16px; right: auto; top: 14px; text-align: left; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.18em; font-size: 0.78rem; text-transform: lowercase; color: rgba(239, 233, 220, 0.72); pointer-events: none; transition: opacity 600ms var(--ease-out); }
.atelier-hint.is-gone { opacity: 0; }
.key-only { display: none; }
.atelier-canvas:focus-visible ~ .atelier-hint .key-only { display: inline; }
.atelier-callouts { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-canvas-ui); }
.callout { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; white-space: normal; max-width: min(230px, 36%); line-height: 1.3; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.76rem; text-transform: lowercase; color: var(--craie); opacity: 0; transition: opacity 400ms var(--ease-out); }
.callout::before { content: ""; width: 28px; height: 1px; background: var(--or); flex: none; }
.callout.is-left { flex-direction: row-reverse; text-align: right; }
.atelier-callouts.is-on .callout { opacity: 1; }
.stand-in-note { font-style: italic; font-size: 0.98rem; line-height: 1.4; color: var(--muted); max-width: 34em; margin-top: -8px; }
@media (min-width: 960px) { .stand-in-note { margin-top: -36px; } }
@media (min-width: 960px) { .stand-in-note { grid-column: 1; grid-row: 2; } .atelier-panel { grid-column: 2; grid-row: 1 / span 2; } }
.gl-fallback, .gl-lost { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; color: var(--craie); z-index: 3; }
.gl-fallback img { width: min(60%, 320px); height: auto; }
.gl-lost { background: rgba(10, 13, 24, 0.86); }
.atelier-panel { display: grid; gap: 26px; }
.choice { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.choice legend { color: var(--gold); padding: 0; margin-bottom: 10px; }
.choice label { position: relative; display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 4px; cursor: pointer; font-family: var(--serif-display); font-size: 1.2rem; border-bottom: 1px solid var(--line); transition: color 200ms var(--ease-out); }
.choice label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--or); flex: none; transition: background-color 200ms var(--ease-out); }
.choice label:has(input:checked) { color: var(--or-bright); }
.choice label:has(input:checked)::before { background: var(--or); }
.choice label:has(input:disabled) { opacity: 0.4; cursor: default; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label:has(input:focus-visible) { outline: 2px solid var(--or); outline-offset: 2px; }
.choice--row { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0 14px; }
.choice--row legend { grid-column: 1 / -1; }
.atelier-readout { padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.readout-name { font-family: var(--serif-display); font-style: italic; font-size: 1.9rem; line-height: 1.15; }
.readout-type { color: var(--gold); }
.readout-blend, .readout-dress { color: var(--muted); font-size: 1.08rem; }
@media (max-width: 959px) {
  .atelier-panel { grid-template-columns: 1fr; }
  .choice[data-atelier-cuvee] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }
  .choice[data-atelier-cuvee] legend { grid-column: 1 / -1; }
}

/* IV. year */
.year-controls { display: grid; gap: 20px; }
.year-nav { display: flex; align-items: center; gap: 14px; }
.year-count { color: var(--gold); min-width: 5.5em; text-align: center; }
.chapters { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 28px; display: flex; gap: clamp(20px, 2.4vw, 36px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; max-width: none; }
.page > .chapters { max-width: none; margin-inline: calc(-1 * var(--gutter)); }
.chapter { flex: 0 0 clamp(300px, 34vw, 460px); scroll-snap-align: start; }
.chapter--ritual { flex-basis: clamp(340px, 46vw, 640px); }
.chapter figure { margin: 0; display: grid; gap: 18px; }
.chapter-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--plate); }
.chapter--ritual .chapter-media { outline: 1px solid var(--or); outline-offset: 8px; }
.chapter-media img, .chapter-media video { width: 100%; height: 100%; object-fit: cover; }
.chapter-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease-out); }
.chapter-media video.is-playing { opacity: 1; }
.chapter figcaption { display: grid; gap: 6px; }
.chapter-when { color: var(--gold); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ritual-tag { font-family: var(--serif-text); font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--or); }
.chapter-title { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); margin: 0; line-height: 1.15; }
.chapter figcaption > p:last-child { color: var(--muted); font-size: 1.12rem; max-width: 30em; }
@media (max-width: 760px) {
  .chapter, .chapter--ritual { flex-basis: 84vw; }
  .chapter-media { aspect-ratio: 4 / 3; }
  .year-controls { gap: 14px; }
}

@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(200, 164, 94, 0.45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(200, 164, 94, 0); } }
.segmented button, .market { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(200, 164, 94, 0.5); background: rgba(14, 12, 10, 0.62); color: var(--craie); font-family: var(--serif-text); font-size: 1.02rem; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.segmented button[aria-pressed="true"], .market[aria-pressed="true"] { background: var(--or); color: var(--bleu); border-color: var(--or); }
.segmented button:active, .market:active { transform: scale(0.97); }
.play-button { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: none; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.84rem; text-transform: lowercase; transition: border-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.play-button:hover:not(:disabled) { border-color: var(--or); }
.play-button:active:not(:disabled) { transform: scale(0.97); }
.play-button:disabled { cursor: default; opacity: 0.62; }
.play-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--or); position: relative; flex: none; }
.play-icon::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--bleu); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.play-button[aria-pressed="true"] .play-icon::after { left: 11px; top: 11px; width: 4px; height: 12px; border: 0; background: var(--bleu); box-shadow: 8px 0 0 var(--bleu); }
.play-button:disabled .play-icon { background: transparent; border: 1px solid var(--or); }
.play-button:disabled .play-icon::after { border-left-color: var(--or); }
.voice-caption { margin-top: 12px; min-height: 3.1em; font-style: italic; color: var(--muted); max-width: 30em; }
.voice-caption .w { transition: color 120ms linear; }
.voice-caption .w.is-said { color: var(--ink); }
.voice-caption .w.is-now { color: var(--or-bright); }
.closeup { width: min(92vw, 980px); max-height: 90svh; padding: 0; border: 1px solid rgba(200, 164, 94, 0.4); background: #15120f; color: var(--craie); overflow: auto; }
.closeup::backdrop { background: rgba(6, 6, 8, 0.78); }
.closeup[open] { display: grid; }
@media (min-width: 820px) { .closeup[open] { grid-template-columns: 1.4fr 1fr; } }
.closeup form { position: absolute; right: 8px; top: 8px; z-index: 2; }
.closeup-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(200, 164, 94, 0.5); background: rgba(15, 12, 10, 0.7); font-size: 1.5rem; line-height: 1; color: var(--craie); }
.closeup-media { position: relative; aspect-ratio: 4 / 3; background: #0d0b09; }
.closeup-media img { width: 100%; height: 100%; object-fit: cover; }
.closeup-text { padding: 28px; display: grid; gap: 12px; align-content: center; }
.closeup-text p { color: #cfc7b6; }

/* placeholders */
.ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 18px; text-align: center; color: var(--craie); background: radial-gradient(ellipse 80% 70% at 50% 40%, #27345a 0%, var(--bleu) 55%, #141c31 100%); overflow: hidden; }
.ph::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(200, 164, 94, 0.32); pointer-events: none; }
.ph svg { width: 22px; height: 22px; fill: var(--or); opacity: 0.9; }
.ph-title { font-family: var(--serif-display); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem); line-height: 1.2; text-wrap: balance; max-width: 18em; }
.ph-sub { font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.2em; font-size: 0.72rem; text-transform: lowercase; color: rgba(200, 164, 94, 0.9); }
.ph-slot { font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; color: #9aa3bd; }
.ph-tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 3px 10px; background: rgba(12, 16, 28, 0.78); color: var(--or-bright); font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.7rem; text-transform: lowercase; }

/* VI. tasting */
.cuvees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr)); gap: clamp(28px, 3vw, 44px); }
.cuvee { display: grid; gap: 14px; align-content: start; }
.cuvee-media { position: relative; aspect-ratio: 5 / 8; background: linear-gradient(to bottom, var(--plate), transparent 92%); display: grid; place-items: end center; overflow: hidden; }
.cuvee-media img.packshot { width: 88%; height: 94%; object-fit: contain; object-position: 50% 100%; }
.bottle-drawing { width: 74%; height: 92%; }
.bottle-drawing .glass { fill: url(#glassGrad); stroke: var(--gold); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.cuvee-media .ph-tag { font-size: 0.64rem; }
.cuvee-name { font-family: var(--serif-display); font-style: italic; font-size: 1.6rem; line-height: 1.15; }
.cuvee-type { color: var(--gold); }
.cuvee-blend { color: var(--muted); font-size: 1.05rem; }
.cuvee-notes { margin: 6px 0 0; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.cuvee-notes div { display: grid; grid-template-columns: 5.2em 1fr; gap: 10px; font-size: 1.05rem; line-height: 1.45; }
.cuvee-notes dt { font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.76rem; text-transform: lowercase; color: var(--gold); padding-top: 4px; }
.cuvee-notes dd { margin: 0; }
.cuvee .voice-caption { min-height: 0; margin-top: 4px; }

/* VII. campaign */
.matrix, .surfaces { margin-top: clamp(80px, 10vw, 140px); display: grid; gap: 28px; }
.matrix-head { display: grid; gap: 10px; }
@media (min-width: 960px) { .matrix-head { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; } }
.matrix-head p { color: var(--muted); max-width: 32em; }
.matrix-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.matrix-markets { display: flex; flex-wrap: wrap; gap: 8px; }
.market { background: transparent; }
.segmented { display: inline-flex; gap: 6px; }
.segmented button { background: transparent; font-variant-numeric: lining-nums; }
.matrix-stage { margin: 0; display: grid; justify-items: center; gap: 14px; }
.matrix-frame { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; max-height: 74svh; overflow: hidden; background: #0b0f1b; transition: aspect-ratio 0ms; }
.matrix-frame[data-ratio="4x5"] { aspect-ratio: 4 / 5; width: auto; height: min(74svh, 760px); max-width: 100%; }
.matrix-frame[data-ratio="9x16"] { aspect-ratio: 9 / 16; width: auto; height: min(74svh, 760px); max-width: 100%; }
.matrix-frame img { width: 100%; height: 100%; object-fit: cover; }
.matrix-stage figcaption { color: var(--muted); font-style: italic; text-align: center; }
.surface-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(12px, 1.6vw, 22px); }
.surface { position: relative; aspect-ratio: 1; overflow: hidden; background: #0b0f1b; }
.surface--tall { grid-row: span 2; aspect-ratio: auto; }
.surface--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.surface img { width: 100%; height: 100%; object-fit: cover; }
.surface figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 14px 12px; background: linear-gradient(to top, rgba(10, 14, 26, 0.85), transparent); font-size: 0.95rem; z-index: 2; }
@media (max-width: 760px) { .surface-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* VIII. making */
.method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 36px 32px; }
.method li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.method-no { font-family: var(--serif-display); font-style: italic; font-size: 1.4rem; color: var(--gold); }
.method h3 { font-family: var(--serif-display); font-weight: 400; font-size: 1.35rem; margin: 0; }
.method p { color: var(--muted); font-size: 1.08rem; }
.models { margin-top: clamp(64px, 8vw, 110px); display: grid; gap: 20px; }
.models-table { width: 100%; border-collapse: collapse; font-size: 1.06rem; }
.models-table th { text-align: left; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.78rem; text-transform: lowercase; color: var(--gold); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.models-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.models-table td:first-child { font-family: var(--serif-display); white-space: nowrap; }
.models-table td:nth-child(2) { color: var(--muted); }
.models-table .num { text-align: right; font-variant-numeric: lining-nums tabular-nums; padding-right: 0; }
@media (max-width: 640px) {
  .models-table thead { display: none; }
  .models-table tr { display: grid; grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .models-table td { border: 0; padding: 0; }
  .models-table td:nth-child(2) { grid-column: 1 / -1; order: 3; margin-top: 4px; }
  .models-table td:first-child { white-space: normal; }
}
.models-note { color: var(--muted); font-style: italic; font-size: 1rem; }
.making-links { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; }
.making .button { color: var(--ink); }

/* footer */
.foot { background: var(--exploration-footer-bg); color: var(--exploration-footer-ink); padding: clamp(64px, 8vw, 110px) var(--gutter) 0; }
.foot-inner { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 22px; justify-items: center; text-align: center; padding-bottom: 48px; }
.foot-lockup { width: min(62vw, 300px); height: auto; }
.foot-invented { max-width: 34em; color: rgba(239, 233, 220, 0.82); }
.foot-health { font-family: var(--serif-display); font-style: italic; font-size: 1.02rem; color: var(--or); max-width: 34em; }
.foot-row { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--exploration-footer-border); font-size: 0.98rem; }
.foot-row [data-exploration-controls] { flex: 1 1 320px; min-width: 0; }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.foot-row nav span { font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.8rem; text-transform: lowercase; color: rgba(239, 233, 220, 0.7); }
.foot-row a { color: var(--or-bright); text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.foot-create { font-weight: 600; }

/* dev slot overlay (?slots) */
.dev-slots { position: fixed; right: 12px; bottom: 12px; z-index: 90; max-width: 320px; max-height: 50vh; overflow: auto; background: #0b0f1b; color: #d6dcef; border: 1px solid #36406a; padding: 10px 12px; font: 12px/1.45 ui-monospace, Menlo, monospace; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 350px) {
  .mast { padding-inline: 12px; gap: 8px; }
  .mast-back { letter-spacing: 0.08em; }
  .mast-actions { gap: 6px; }
  .mast-create { padding: 0 11px; letter-spacing: 0.1em; font-size: 0.78rem; }
}

@media (max-aspect-ratio: 3/4) and (max-width: 899px) { .hero-copy { top: calc(var(--mast-h) + env(safe-area-inset-top) + 20px); gap: 8px; } }
@media (max-width: 600px) {
  .choice[data-atelier-cuvee] { grid-template-columns: 1fr; }
  .cuvee-media { aspect-ratio: 4 / 5; }
  .callout { font-size: 0.66rem; letter-spacing: 0.1em; }
}

.chapter-media picture { display: block; width: 100%; height: 100%; }
.cuvee-media img.packshot { position: absolute; left: 0; right: 0; bottom: 3%; width: 100%; height: 92%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 18px rgba(20, 26, 44, 0.18)); }
.gl-fallback img.packshot { width: auto; height: min(62svh, 520px); max-width: 70%; object-fit: contain; }
@media (min-width: 1200px) { .cuvees { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; } .cuvee-notes div { grid-template-columns: 1fr; gap: 0; } .cuvee-notes dt { padding-top: 0; } }
/* Portrait screens: a soft dusk-blue scrim from the top keeps the wordmark and tagline off the treeline, fading out by the roofline. */
@media (max-aspect-ratio: 3/4) {
  .hero-scrim { background:
    linear-gradient(to bottom, rgba(28, 38, 64, 0.62) 0%, rgba(28, 38, 64, 0.44) 26%, rgba(28, 38, 64, 0.2) 36%, rgba(28, 38, 64, 0) 44%),
    linear-gradient(to top, rgba(8, 11, 22, 0.86) 0%, rgba(8, 11, 22, 0.45) 26%, rgba(8, 11, 22, 0) 52%); }
  .hero-tagline { text-shadow: 0 1px 14px rgba(12, 17, 31, 0.7), 0 0 2px rgba(12, 17, 31, 0.4); }
}
@media (max-aspect-ratio: 3/4) and (max-width: 340px), (max-aspect-ratio: 3/4) and (max-height: 600px) {
  .hero-kicker { display: none; }
  .hero-copy { top: calc(var(--mast-h) + env(safe-area-inset-top) + 12px); gap: 6px; }
  .hero-title { width: min(74vw, 300px); }
  .hero-tagline { font-size: 1.22rem; }
}
/* Atelier backdrop: the world's HDRI, blurred, behind the bottle */
.stage-photo { position: absolute; inset: -6%; z-index: -1; background-size: 280% auto; background-position: 50% 56%; background-repeat: no-repeat; filter: blur(16px) saturate(0.92) brightness(var(--photo-b, 0.72)); opacity: 0; transition: opacity 900ms var(--ease-slow); }
.stage-photo.is-on { opacity: 1; }
.stage-photo[data-photo="terrace"] { --photo-b: 0.6; background-position: 50% 74%; background-image: linear-gradient(to bottom, rgba(26, 34, 64, 0.78) 0%, rgba(40, 40, 70, 0.35) 30%, rgba(30, 40, 72, 0) 48%), var(--photo) !important; filter: blur(16px) sepia(0.3) saturate(1.35) brightness(var(--photo-b)); }
.stage-photo[data-photo="city"] { --photo-b: 0.9; background-position: 52% 56%; }
.stage-photo[data-photo="cellar"] { --photo-b: 0.78; }
.atelier-stage.has-photos::before, .atelier-stage.has-photos::after, .atelier-stage.has-photos > .stage-bg { opacity: 0 !important; }
.atelier-stage.has-photos .atelier-canvas { background: radial-gradient(ellipse 60% 42% at 50% 92%, rgba(0, 0, 0, 0.42), transparent 70%), radial-gradient(ellipse 110% 90% at 50% 45%, transparent 55%, rgba(6, 8, 14, 0.55) 100%); }
.atelier-status { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.2em; font-size: 0.8rem; text-transform: lowercase; color: rgba(239, 233, 220, 0.7); pointer-events: none; }
.cuvee-media img.packshot--case { width: 100%; height: 88%; bottom: 4%; }
.case-switch { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: -4px; min-height: 36px; }
.case-switch button { min-height: 36px; padding: 0; border: 0; background: none; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.12em; font-size: 0.72rem; text-transform: lowercase; color: var(--muted); border-bottom: 1px solid transparent; transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.case-switch button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.case-switch button:hover { color: var(--ink); }
/* A stage 2: editions, formats, anatomy, e-commerce */
.legend-note { font-family: var(--serif-text); font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 0.98rem; color: var(--muted); margin-left: 6px; }
.choice-note { grid-column: 1 / -1; font-style: italic; font-size: 0.95rem; color: var(--muted); padding-top: 6px; }
.formats { margin: clamp(64px, 8vw, 110px) auto 0; display: grid; gap: 16px; }
.formats-plate { background: #fdfcfa; box-shadow: inset 0 0 0 1px var(--line); }
.formats-plate img { width: 100%; height: auto; }
.formats figcaption { color: var(--muted); max-width: 40em; }
.formats figcaption .sc, .anatomy-figure figcaption .sc { color: var(--gold); margin-right: 10px; }
.editions { margin-top: clamp(64px, 8vw, 110px); display: grid; gap: 24px; }
.editions-head { display: grid; gap: 10px; }
@media (min-width: 960px) { .editions-head { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; } }
.editions-head p { color: var(--muted); max-width: 32em; }
.editions-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 44px); }
.edition { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 0 0 8px; border: 0; background: none; text-align: center; transition: transform 200ms var(--ease-out); }
.edition:hover .edition-media img { transform: translateY(-8px); }
.edition:active { transform: scale(0.98); }
.edition-media { display: grid; place-items: end center; width: 100%; aspect-ratio: 3 / 7; background: linear-gradient(to bottom, var(--plate), transparent 92%); padding-top: 6%; }
.edition-media img { width: auto; height: 94%; max-width: 90%; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(20, 26, 44, 0.18)); transition: transform 280ms var(--ease-out); }
.edition-name { font-family: var(--serif-display); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem); }
.edition-by { color: var(--gold); font-size: 0.7rem; }
.ecommerce { display: grid; gap: 14px; margin-top: 12px; }
.ecommerce-head { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.ecommerce-head .sc { color: var(--gold); }
.ecommerce-head p:last-child { color: var(--muted); }
.ecommerce-row { list-style: none; margin: 0; padding: 0 0 12px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.ecommerce-row li { flex: 0 0 clamp(128px, 14vw, 180px); aspect-ratio: 1; background: #fff; scroll-snap-align: start; }
.ecommerce-row img { width: 100%; height: 100%; object-fit: contain; }
.surface--white { background: #fff; }
.surface--white img { object-fit: contain; }
.surface--white figcaption { color: var(--bleu); background: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent); }
@media (max-width: 600px) { .editions-row { gap: 10px; } .edition-name { font-size: 0.98rem; } }
@media (max-width: 600px) { .edition-by { display: none; } }

/* The anatomy of a bottle: render + HTML callouts */
.anatomy-figure { position: relative; margin: clamp(80px, 10vw, 140px) 0 0; display: grid; gap: 24px; counter-reset: part; }
.anatomy-head { display: grid; gap: 10px; }
@media (min-width: 960px) { .anatomy-head { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; } }
.anatomy-head p { color: var(--muted); max-width: 32em; }
.anatomy-media { position: relative; aspect-ratio: 16 / 9; background: #120e0a; overflow: hidden; }
.anatomy-media img, .anatomy-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.anatomy-media img { object-fit: cover; }
.anatomy-leader { fill: none; stroke: rgba(239, 233, 220, 0.8); stroke-width: 2; }
.anatomy-lines circle { fill: rgba(18, 14, 10, 0.6); stroke: var(--or); stroke-width: 3; }
.anatomy-lines text { fill: var(--or-bright); font-family: var(--serif-display); font-size: 17px; text-anchor: middle; dominant-baseline: middle; }
.anatomy-callouts { list-style: none; margin: 0; padding: 0; counter-reset: part; }
.anatomy-callouts li { counter-increment: part; }
.anatomy-callouts b { display: block; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; text-transform: lowercase; font-size: 0.86rem; color: var(--craie); }
.anatomy-callouts span { font-style: italic; color: #d6c4a0; font-size: 0.98rem; line-height: 1.3; }
@media (min-width: 960px) {
  .anatomy-media .anatomy-callouts { position: absolute; left: 61.5%; right: 2%; top: 0; bottom: 0; pointer-events: none; }
  .anatomy-callouts li { position: absolute; left: 0; top: var(--ty); transform: translateY(-1.05em); line-height: 1.15; }
  .anatomy-lines text, .anatomy-lines circle { display: none; }
}
@media (max-width: 959px) {
  .anatomy-leader { display: none; }
  .anatomy-callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px 24px; }
  .anatomy-callouts li { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: baseline; }
  .anatomy-callouts li::before { content: counter(part); grid-row: span 2; font-family: var(--serif-display); font-style: italic; color: var(--or); }
  .anatomy-media { aspect-ratio: 4 / 5; }
  .anatomy-lines circle { r: 44px; stroke-width: 5; }
  .anatomy-lines text { font-size: 50px; }
}
@media (min-width: 960px) {
  .anatomy-media .anatomy-callouts b { font-size: clamp(0.7rem, 0.45rem + 0.45vw, 0.95rem); }
  .anatomy-media .anatomy-callouts span { font-size: clamp(0.78rem, 0.5rem + 0.5vw, 1.05rem); }
}
@media (min-width: 960px) and (max-width: 1240px) {
  .anatomy-media .anatomy-callouts b { font-size: 0.62rem; letter-spacing: 0.1em; }
  .anatomy-media .anatomy-callouts span { font-size: 0.74rem; }
  .anatomy-callouts li { transform: translateY(-0.95em); }
}
/* Every surface: masonry at each image's own ratio (no crops) */
.surface-wall { display: block; columns: 3 280px; column-gap: clamp(12px, 1.6vw, 22px); }
.surface-wall .surface { break-inside: avoid; margin: 0 0 clamp(12px, 1.6vw, 22px); aspect-ratio: auto; background: none; }
.surface-wall .surface figure { margin: 0; position: relative; }
.surface-wall .surface img { width: 100%; height: auto; object-fit: initial; display: block; }
.surface-wall .surface figcaption { position: static; padding: 8px 0 0; background: none; color: var(--muted); font-style: italic; font-size: 0.95rem; }
@media (max-width: 600px) { .surface-wall { columns: 2; } }

/* two chalk spreads in a row read as a page turn: a gold hairline between them */
.page--chalk + .page--chalk::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--line); max-width: var(--maxw); margin-inline: auto; }

/* II. the estate: the guided 360 tour */
.estate { padding-bottom: clamp(72px, 9vw, 132px); }
.estate .section-head { margin-bottom: clamp(28px, 4vw, 56px); }
.tour { max-width: none; margin-inline: calc(-1 * var(--gutter)); position: relative; }
.tour-stage { position: relative; overflow: hidden; background: #0d0b09; color: var(--craie); height: min(56.25vw, calc(100svh - var(--mast-h))); min-height: 300px; isolation: isolate; scroll-margin-top: var(--mast-h); }
@media (max-aspect-ratio: 1/1) { .tour-stage { height: min(170vw, calc(100svh - var(--mast-h))); min-height: 480px; } }
@media (max-height: 500px) and (orientation: landscape) { .tour-stage { height: calc(100svh - var(--mast-h)); min-height: 280px; } }
.tour:fullscreen { background: #0d0b09; }
.tour:fullscreen .tour-stage { height: 100vh; }
.tour-stills, .tour-canvas, .tour-markers { position: absolute; inset: 0; }
.tour-stills { z-index: 0; transition: opacity 900ms var(--ease-slow); }
.tour-stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--ease-slow); }
.tour-stills img.is-on { opacity: 1; }
.tour-stills img.is-instant { transition-duration: 250ms; }
.tour-stills:focus-visible { outline: 2px solid var(--or); outline-offset: -4px; }
.is-gl-live .tour-stills { opacity: 0; pointer-events: none; }
.tour-canvas { z-index: 1; cursor: grab; touch-action: pan-y; }
.tour-canvas.is-dragging { cursor: grabbing; }
.tour-canvas:focus-visible { outline: 2px solid var(--or); outline-offset: -4px; }
.tour-canvas canvas { width: 100% !important; height: 100% !important; }
.tour-markers { z-index: 2; pointer-events: none; }
.is-stills .tour-markers { display: none; }

/* markers: hotspots light up on their cue word; walk-to links */
.tm-spot, .tm-link { position: absolute; left: 0; top: 0; margin: -22px 0 0 -22px; min-width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--craie); pointer-events: auto; display: flex; align-items: center; gap: 10px; }
/* resting: a thin gold ring on a soft dark halo, readable on chalk and on night skies; lit: full size, pulsing; cue: gold */
.tm-ring { width: 28px; height: 28px; margin: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--or); background: rgba(14, 12, 10, 0.64); box-shadow: 0 0 0 3px rgba(10, 9, 8, 0.4), 0 0 18px 4px rgba(10, 9, 8, 0.5); display: grid; place-items: center; font-family: var(--serif-display); font-size: 0.86rem; color: var(--or-bright); opacity: 0.88; transform: scale(0.86); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), background-color 400ms var(--ease-out), color 400ms var(--ease-out); }
.tm-spot.is-lit .tm-ring { opacity: 1; transform: none; animation: ring-lit 2.8s var(--ease-out) infinite; }
@keyframes ring-lit { 0% { box-shadow: 0 0 0 0 rgba(200, 164, 94, 0.5), 0 0 16px 2px rgba(10, 9, 8, 0.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(200, 164, 94, 0), 0 0 16px 2px rgba(10, 9, 8, 0.55); } }
.tm-spot.is-cue .tm-ring { background: var(--or); color: var(--bleu); }
.tm-spot:hover .tm-ring { transform: scale(1.1); opacity: 1; }
.tm-label { font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.8rem; text-transform: lowercase; white-space: nowrap; padding: 6px 12px; background: rgba(14, 12, 10, 0.78); border: 1px solid rgba(200, 164, 94, 0.42); border-radius: 999px; line-height: 1.2; }
.tm-spot .tm-label { position: absolute; left: 46px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 300ms var(--ease-out); pointer-events: none; }
.tm-spot.is-flip .tm-label { left: auto; right: 46px; }
.tm-spot.is-cue .tm-label, .tm-spot:hover .tm-label { opacity: 1; }
.tm-link { gap: 0; }
.tm-arrow { width: 36px; height: 36px; margin: 4px; flex: none; border-radius: 50%; border: 1px solid var(--craie); background: rgba(14, 12, 10, 0.45); position: relative; transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.tm-arrow::after { content: ""; position: absolute; left: 11px; top: 13px; width: 9px; height: 9px; border-top: 1.5px solid var(--craie); border-right: 1.5px solid var(--craie); transform: rotate(45deg); }
.tm-link .tm-label { display: none; position: absolute; left: 48px; top: 50%; transform: translateY(-50%); }
.tm-link.is-flip .tm-label { left: auto; right: 48px; }
.tm-link.is-near .tm-label { display: inline-block; }
.tm-link:hover .tm-arrow { background: rgba(200, 164, 94, 0.3); transform: scale(1.06); }
.tm-link:active .tm-arrow, .tm-spot:active .tm-ring { transform: scale(0.95); }
.tm-spot.is-low .tm-label, .tm-link.is-low .tm-label { visibility: hidden; }
.tm-spot.is-low .tm-ring, .tm-link.is-low .tm-arrow { opacity: 0.55; }

/* overlays: place and tools on top, captions and controls at the bottom */
.tour-top, .tour-bottom { position: absolute; left: 0; right: 0; z-index: 3; padding-inline: max(var(--gutter), 16px); pointer-events: none; }
.tour-top > *, .tour-bottom > * { pointer-events: auto; }
.tour-top { top: 0; padding-top: 18px; padding-bottom: 56px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; background: linear-gradient(to bottom, rgba(10, 9, 8, 0.7) 0%, rgba(10, 9, 8, 0.42) 55%, rgba(10, 9, 8, 0)); }
.tour-place { display: grid; gap: 2px; min-width: 0; opacity: 0; transition: opacity 400ms var(--ease-out); }
.tour-stage.is-modal .tour-place { opacity: 1; }
.tour-env { color: var(--or-bright); text-shadow: 0 1px 10px rgba(10, 9, 8, 0.8); }
.tour-node { font-family: var(--serif-display); font-style: italic; font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem); line-height: 1.2; text-shadow: 0 1px 16px rgba(10, 9, 8, 0.6); text-wrap: balance; }
.tour-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.tour-modes { display: flex; border: 1px solid rgba(200, 164, 94, 0.5); border-radius: 999px; padding: 2px; background: rgba(14, 12, 10, 0.55); }
.tour-modes button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.8rem; text-transform: lowercase; color: var(--craie); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.tour-modes button[aria-pressed="true"] { background: var(--or); color: var(--bleu); }
.tour-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(200, 164, 94, 0.5); background: rgba(14, 12, 10, 0.55); display: grid; place-items: center; transition: border-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.tour-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tour-icon[aria-pressed="true"] { background: var(--or); color: var(--bleu); border-color: var(--or); }
.tour-icon:active, .tour-round:active, .tour-play:active, .tour-modes button:active { transform: scale(0.95); }
/* in the page the stage is a preview (its cover opens the tour modal); the controls belong to the modal */
.tour-stage:not(.is-modal) .tour-tools, .tour-stage:not(.is-modal) .tour-transport, .tour-stage:not(.is-modal) .tour-volume, .tour-stage:not(.is-modal) .tour-captions { visibility: hidden; }
.tour-stage:not(.is-modal) .tour-close { display: none; }
/* markers set their own inline visibility each frame, so the layer hides with opacity */
.tour-stage:not(.is-modal) .tour-markers, .tour-stage.is-ended .tour-markers { opacity: 0; }
.tour-stage:not(.is-modal) .tour-markers *, .tour-stage.is-ended .tour-markers * { pointer-events: none; }
.is-ended .tour-captions, .is-ended .tour-prompt { visibility: hidden; }

.tour-bottom { bottom: 0; padding-top: 96px; padding-bottom: max(14px, env(safe-area-inset-bottom)); display: grid; gap: 14px; background: linear-gradient(to top, rgba(10, 9, 8, 0.9) 0%, rgba(10, 9, 8, 0.74) 38%, rgba(10, 9, 8, 0.28) 72%, rgba(10, 9, 8, 0)); }
.tour-captions { justify-self: center; width: min(100%, 36em); text-align: center; display: grid; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); min-height: 0; }
.tour-captions.is-on { opacity: 1; transform: none; }
.tour-speaker { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.tour-speaker img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 1px solid rgba(200, 164, 94, 0.6); }
.tour-speaker-name { font-family: var(--serif-display); font-style: italic; font-size: 1.02rem; }
.tour-speaker .sc { color: var(--or-bright); font-size: 0.74rem; text-shadow: 0 1px 10px rgba(10, 9, 8, 0.9); }
.tour-speaker-name { text-shadow: 0 1px 12px rgba(10, 9, 8, 0.8); }
.tour-caption { font-family: var(--serif-text); font-weight: 600; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.85rem); line-height: 1.32; min-height: 2.64em; text-wrap: balance; text-shadow: 0 1px 14px rgba(10, 9, 8, 0.75), 0 0 2px rgba(10, 9, 8, 0.6); }
.tour-caption .w { color: rgba(239, 233, 220, 0.8); transition: color 120ms linear; }
.tour-caption .w.is-said { color: var(--craie); }
.tour-caption .w.is-now { color: var(--or-bright); }
.tour-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 2.4vw, 32px); }
.tour-transport, .tour-volume { display: flex; align-items: center; gap: 8px; }
.tour-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(239, 233, 220, 0.42); background: rgba(14, 12, 10, 0.4); color: var(--craie); display: grid; place-items: center; transition: border-color 200ms var(--ease-out), opacity 200ms var(--ease-out), transform 120ms var(--ease-out); }
.tour-round:hover:not(:disabled) { border-color: var(--or); }
.tour-round:disabled { opacity: 0.35; cursor: default; }
.tour-round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tour-mute .sp { fill: currentColor; stroke: none; }
.tour-mute .sw { display: none; }
.tour-mute[aria-pressed="false"] .sw { display: block; }
.tour-mute[aria-pressed="false"] .sx { display: none; }
.tour-play { width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; background: none; display: grid; place-items: center; transition: transform 120ms var(--ease-out); }
.tour-play .play-icon { width: 56px; height: 56px; }
.tour-play .play-icon::after { left: 22px; top: 18px; border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
.tour-play[aria-pressed="true"] .play-icon::after { left: 20px; top: 19px; width: 5px; height: 18px; border: 0; background: var(--bleu); box-shadow: 11px 0 0 var(--bleu); }
.tour-range { -webkit-appearance: none; appearance: none; width: clamp(64px, 9vw, 120px); height: 44px; background: transparent; margin: 0; cursor: pointer; }
.tour-range::-webkit-slider-runnable-track { height: 1px; background: rgba(239, 233, 220, 0.5); }
.tour-range::-moz-range-track { height: 1px; background: rgba(239, 233, 220, 0.5); }
.tour-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--or); border: 0; }
.tour-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--or); border: 0; }
.tour-range:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.is-muted .tour-range { opacity: 0.5; }

/* chapters: five settings, one dot per place */
.tour-chapters { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; min-width: 0; }
.tc { position: relative; flex: calc(var(--n) + 1) 1 0; min-width: 0; height: 52px; }
.tc::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: rgba(239, 233, 220, 0.3); }
.tc.is-current::before { background: rgba(200, 164, 94, 0.7); }
.tc-env { position: absolute; inset: 24px 0 0 0; width: 100%; border: 0; background: none; padding: 0 0 2px; display: flex; align-items: flex-end; gap: 8px; color: rgba(239, 233, 220, 0.72); font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.12em; font-size: 0.72rem; text-transform: lowercase; text-align: left; white-space: nowrap; overflow: hidden; transition: color 200ms var(--ease-out); }
.tc-env:hover, .tc.is-current .tc-env { color: var(--or-bright); }
.tc-no { font-family: var(--serif-display); font-style: italic; letter-spacing: 0; font-size: 0.86rem; }
.tc-title { overflow: hidden; text-overflow: ellipsis; }
.tc-dots { position: absolute; left: 0; right: 0; top: 1px; height: 24px; display: flex; justify-content: space-around; pointer-events: none; }
.tc-dot { width: 24px; height: 24px; border: 0; padding: 0; background: none; display: grid; place-items: center; pointer-events: auto; }
.tc-fill { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(239, 233, 220, 0.6); background: #0d0b09; transition: border-color 200ms var(--ease-out); }
.tc-dot.is-done .tc-fill { background: var(--or); border-color: var(--or); }
.tc-dot.is-current .tc-fill { width: 12px; height: 12px; border-color: var(--or); background: conic-gradient(var(--or) calc(var(--p, 0) * 360deg), #0d0b09 0); }
.tc-dot:hover .tc-fill { border-color: var(--or-bright); }
@media (max-width: 1099px) { .tc-title { display: none; } }
.is-prompting .tm-label { visibility: hidden; }

/* cover, end, prompt, loading */
.tour-cover, .tour-end { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; text-align: center; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10, 9, 8, 0.62), rgba(10, 9, 8, 0.2) 70%, rgba(10, 9, 8, 0) 100%); }
.tour-cover { padding-bottom: 96px; }
.tour-cover-inner { display: grid; justify-items: center; gap: 16px; max-width: 30em; }
.tour-cover-kicker { color: var(--or-bright); text-shadow: 0 1px 12px rgba(10, 9, 8, 0.8); }
.tour-start { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 30px 0 8px; border-radius: 999px; border: 0; background: var(--or); color: var(--bleu); font-family: var(--serif-sc); font-weight: 700; letter-spacing: 0.18em; font-size: 1.02rem; text-transform: lowercase; box-shadow: 0 10px 40px rgba(10, 9, 8, 0.45); transition: background-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.tour-start:hover { background: var(--or-bright); }
.tour-start:active { transform: scale(0.97); }
.tour-start[aria-busy="true"] { opacity: 0.82; cursor: progress; }
.tour-start .play-icon { width: 44px; height: 44px; background: var(--bleu); }
.tour-start .play-icon::after { left: 17px; top: 13px; border-left: 13px solid var(--or); border-top-width: 9px; border-bottom-width: 9px; }
.tour-meta { font-style: italic; font-size: 1.08rem; color: rgba(239, 233, 220, 0.92); text-shadow: 0 1px 12px rgba(10, 9, 8, 0.85); max-width: 24em; text-wrap: balance; }
.tour-free { color: var(--craie); text-shadow: 0 1px 10px rgba(10, 9, 8, 0.8); }
.tour-end { background: rgba(10, 9, 8, 0.74); }
.tour-end-title { font-family: var(--serif-display); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.2; text-wrap: balance; }
.tour-end-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; }
.tour-end .text-button { color: var(--or-bright); }
.tour-prompt { position: absolute; left: 50%; top: 46%; z-index: 4; transform: translate(-50%, -50%); height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--or); background: rgba(14, 12, 10, 0.78); color: var(--craie); font-family: var(--serif-display); font-style: italic; font-size: 1.05rem; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.tour-prompt .sc { color: var(--or-bright); font-style: normal; }
.tour-loading { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.tour-spinner { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(200, 164, 94, 0.25); border-top-color: var(--or); animation: tour-spin 900ms linear infinite; }
@keyframes tour-spin { to { transform: rotate(360deg); } }
.tour-stage .gl-lost { z-index: 7; }

/* below the stage: this place and the words */
.tour-below { display: grid; gap: 36px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 960px) { .tour-below { grid-template-columns: 1fr 1.3fr; gap: 64px; } }
.tour-index h3, .tour-transcript h3 { color: var(--gold); margin: 0 0 8px; }
.tour-index-title { font-family: var(--serif-display); font-style: italic; font-size: 1.45rem; line-height: 1.2; margin-bottom: 8px; }
.tour-index ol { list-style: none; margin: 0; padding: 0; display: grid; }
.tour-index button { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; gap: 12px; width: 100%; text-align: left; min-height: 48px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font-size: 1.12rem; color: var(--ink); transition: color 200ms var(--ease-out); }
.tour-index button:hover { color: var(--or-bright); }
.tour-index button b { font-family: var(--serif-display); font-weight: 400; font-style: italic; color: var(--gold); }
.tour-index .is-link button { color: var(--or-bright); }
.tour-transcript-text { font-size: 1.18rem; line-height: 1.6; max-width: 36em; color: var(--ink); text-wrap: pretty; }
.tour-keys { margin-top: 18px; font-size: 0.98rem; font-style: italic; color: var(--muted); max-width: 36em; }
.closeup--text[open] { grid-template-columns: 1fr; width: min(92vw, 560px); }
.closeup--text .closeup-media { display: none; }
.closeup--text .closeup-text { padding: 56px 28px 32px; }

@media (max-width: 759px) {
  .tour-top { padding-top: 12px; }
  .tour-bottom { padding-top: 72px; gap: 10px; }
  .tour-bar { grid-template-columns: auto 1fr auto; grid-template-areas: "transport . volume" "chapters chapters chapters"; row-gap: 4px; }
  .tour-transport { grid-area: transport; }
  .tour-volume { grid-area: volume; }
  .tour-chapters { grid-area: chapters; }
  .tc { height: 46px; }
  .tc-env { inset: 0; }
  .tc-dots .tc-dot { pointer-events: none; }
  .tour-modes button { padding: 0 11px; min-height: 36px; }
  .tour-caption { font-size: 1.32rem; line-height: 1.3; }
  .tour-cover { padding-bottom: 120px; }
}
@media (max-width: 759px) and (orientation: portrait) { .tour-icon[data-tour-full] { display: none; } }
@media (max-width: 459px) {
  .tour-top { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding-bottom: 56px; background: linear-gradient(to bottom, rgba(10, 9, 8, 0.72) 0%, rgba(10, 9, 8, 0.5) 60%, rgba(10, 9, 8, 0)); }
  .tour-tools { justify-content: flex-end; }
  .tour-env { letter-spacing: 0.18em; }
}
@media (max-width: 359px) {
  .tour-range { display: none; }
  .tour-modes button { padding: 0 9px; letter-spacing: 0.08em; }
  .tour-node { font-size: 1.05rem; }
  .tour-caption { font-size: 1.22rem; }
  .tour-start { padding-right: 22px; letter-spacing: 0.14em; font-size: 0.95rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .tour-top { padding-top: 8px; padding-bottom: 28px; }
  .tour-bottom { padding-top: 40px; gap: 4px; padding-bottom: 6px; }
  .tour-caption { font-size: 1.12rem; min-height: 2.6em; }
  .tour-speaker { display: none; }
  .tour-node { font-size: 1.05rem; }
  .tour-cover { padding-bottom: 56px; }
  .tour-cover-inner { gap: 8px; }
  .tour-start { min-height: 52px; }
  .tour-play, .tour-play .play-icon { width: 48px; height: 48px; }
  .tour-play .play-icon::after { left: 19px; top: 15px; border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }
  .tour-play[aria-pressed="true"] .play-icon::after { left: 17px; top: 16px; height: 16px; box-shadow: 9px 0 0 var(--bleu); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-spot.is-lit .tm-ring { animation: none; }
  .tour-spinner { animation: none; border-color: var(--or); opacity: 0.6; }
}

/* ---------- the estate tour, one click away: hero call to action and masthead pill ---------- */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: clamp(4px, 1.4svh, 14px); }
.hero-tour { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px 0 6px; border-radius: 999px; background: var(--or); color: var(--bleu); text-decoration: none; font-family: var(--serif-sc); font-weight: 700; letter-spacing: 0.16em; font-size: 0.92rem; text-transform: lowercase; box-shadow: 0 10px 34px rgba(8, 11, 22, 0.4); transition: background-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.hero-tour:hover { background: var(--or-bright); }
.hero-tour:active { transform: scale(0.97); }
.hero-tour .play-icon { width: 40px; height: 40px; background: var(--bleu); }
.hero-tour .play-icon::after { left: 15px; top: 12px; border-left: 12px solid var(--or); border-top-width: 8px; border-bottom-width: 8px; }
.hero-tour-hint { font-style: italic; font-size: 1rem; color: rgba(239, 233, 220, 0.88); text-shadow: 0 1px 14px rgba(8, 11, 22, 0.6); }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (min-height: 560px) { .hero-cta { justify-content: flex-start; } }
@media (max-height: 500px) and (orientation: landscape) { .hero-cta { justify-content: flex-start; margin-top: 6px; } .hero-tour { min-height: 44px; font-size: 0.8rem; } .hero-tour .play-icon { width: 34px; height: 34px; } .hero-tour .play-icon::after { left: 13px; top: 10px; border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; } .hero-tour-hint { display: none; } }
@media (max-width: 380px) { .hero-tour-hint { display: none; } }
.mast-tour { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border: 1px solid var(--or); border-radius: 999px; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.8rem; text-transform: lowercase; color: var(--or-bright) !important; white-space: nowrap; transition: background-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.mast-tour:hover { background: rgba(200, 164, 94, 0.16); }
.mast-tour:active { transform: scale(0.97); }
.mast-tour-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--or); position: relative; flex: none; }
@media (max-width: 1359px) { .mast .mast-tour { display: none; } }
.mast-tour-icon::after { content: ""; position: absolute; left: 10px; top: 8px; border-left: 8px solid var(--bleu); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ---------- phones and tablets: a dock at the bottom, within thumb reach; a sheet for the sections ---------- */
.dock { position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100vw - 24px); bottom: max(12px, env(safe-area-inset-bottom)); z-index: var(--z-mast); display: flex; align-items: center; gap: 8px; transform: translateY(calc(100% + 28px)); transition: transform 320ms var(--ease-out); pointer-events: none; }
.dock.is-shown { transform: none; pointer-events: auto; }
.dock:not(.is-shown) > * { visibility: hidden; transition: visibility 0s 320ms; }
.dock-menu { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; min-width: 0; max-width: calc(100vw - 88px); padding: 0 20px 0 16px; border-radius: 999px; border: 1px solid rgba(200, 164, 94, 0.6); background: rgba(18, 26, 46, 0.94); color: var(--craie); box-shadow: 0 10px 30px rgba(6, 8, 16, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 120ms var(--ease-out); }
.dock-menu:active, .dock-top:active { transform: scale(0.96); }
.dock-bars { width: 18px; height: 12px; flex: none; background: linear-gradient(var(--or), var(--or)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--or), var(--or)) 0 50% / 70% 1.5px no-repeat, linear-gradient(var(--or), var(--or)) 0 100% / 100% 1.5px no-repeat; }
.dock-text { display: grid; text-align: left; line-height: 1.15; min-width: 0; }
.dock-text .sc { font-size: 0.66rem; color: var(--or-bright); letter-spacing: 0.2em; }
.dock-current { font-family: var(--serif-display); font-style: italic; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-top, .to-top { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(200, 164, 94, 0.6); background: rgba(18, 26, 46, 0.94); color: var(--craie); box-shadow: 0 10px 30px rgba(6, 8, 16, 0.35); transition: transform 120ms var(--ease-out); }
.dock-top svg, .to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.to-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--z-mast); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s 240ms; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.to-top:hover, .dock-top:hover { border-color: var(--or); }
@media (min-width: 1360px) { .dock { display: none; } }
@media (max-width: 1359px) { .to-top { display: none; } .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(100%, 540px); max-height: 88dvh; padding: 0; border: 1px solid rgba(200, 164, 94, 0.4); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--bleu-deep); color: var(--craie); overflow: auto; overscroll-behavior: contain; }
.sheet::backdrop { background: rgba(6, 8, 16, 0.6); }
.sheet[open] { animation: sheet-in 320ms var(--ease-out); }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0.4; } }
.sheet-inner { display: grid; gap: 14px; padding: 22px 20px max(18px, env(safe-area-inset-bottom)); }
.sheet-title { color: var(--or-bright); }
.sheet-tour { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 20px 0 8px; border-radius: 999px; background: var(--or); color: var(--bleu); text-decoration: none; font-family: var(--serif-sc); font-weight: 700; letter-spacing: 0.16em; font-size: 0.95rem; text-transform: lowercase; }
.sheet-tour .play-icon { width: 40px; height: 40px; background: var(--bleu); }
.sheet-tour .play-icon::after { left: 15px; top: 12px; border-left: 12px solid var(--or); border-top-width: 8px; border-bottom-width: 8px; }
.sheet-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sheet-list a { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; min-height: 54px; padding: 12px 4px; border-bottom: 1px solid rgba(200, 164, 94, 0.22); text-decoration: none; font-family: var(--serif-display); font-size: 1.28rem; line-height: 1.2; color: var(--craie); }
.sheet-list .numeral { font-size: 1rem; color: var(--or); }
.sheet-list a[aria-current="true"] { color: var(--or-bright); }
.sheet-list a[aria-current="true"]::after { content: "You are here"; grid-column: 2; font-family: var(--serif-sc); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--or); margin-top: 2px; }
.sheet-close { justify-self: end; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(239, 233, 220, 0.4); background: none; color: var(--craie); font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.86rem; text-transform: lowercase; }
@media (prefers-reduced-motion: reduce) { .dock, .to-top { transition: none; } .sheet[open] { animation: none; } }

/* ---------- the tour modal: full screen, safe areas ---------- */
.tour-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0d0b09; color: var(--craie); overflow-y: auto; overscroll-behavior: contain; --ink: var(--craie); --muted: #bdb5a6; --gold: var(--or); --line: rgba(200, 164, 94, 0.28); --plate: #1d1914; }
.tour-modal::backdrop { background: #0d0b09; }
.tour-modal[open] { animation: modal-in 360ms var(--ease-out); }
@keyframes modal-in { from { opacity: 0; } }
.tour-modal .tour-stage { height: 100vh; height: 100dvh; min-height: 0; }
.tour-modal .tour-top { padding-top: max(14px, env(safe-area-inset-top)); padding-left: max(var(--gutter), 16px, env(safe-area-inset-left)); padding-right: max(var(--gutter), 16px, env(safe-area-inset-right)); }
.tour-modal .tour-bottom { padding-bottom: max(14px, env(safe-area-inset-bottom)); padding-left: max(var(--gutter), 16px, env(safe-area-inset-left)); padding-right: max(var(--gutter), 16px, env(safe-area-inset-right)); }
.tour-modal .tour-below { margin: 0 auto; max-width: var(--maxw); padding: clamp(36px, 5vw, 64px) max(var(--gutter), 16px) max(56px, env(safe-area-inset-bottom)); }
.tour-close { background: rgba(14, 12, 10, 0.72); }
.tour-stage-ghost { background: #0d0b09 center / cover no-repeat; }
@media (prefers-reduced-motion: reduce) { .tour-modal[open] { animation: none; } }

/* ---------- long lists: a first screenful, then everything on request ---------- */
.more-button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 18px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--gold); font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.86rem; text-transform: lowercase; transition: border-color 200ms var(--ease-out), transform 120ms var(--ease-out); }
.more-button:hover { border-color: var(--gold); }
.more-button:active { transform: scale(0.97); }
.more-button span { width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out); }
.more-button[aria-expanded="true"] span { transform: translateY(2px) rotate(-135deg); }
.models.is-collapsed tr.is-extra { display: none; }
.models .more-button { justify-self: start; margin-top: 0; }
.surfaces .more-button { margin-top: 22px; }
.surfaces.is-collapsed .surface-clip { max-height: min(1180px, 128vh); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
@media (max-width: 760px) { .surfaces.is-collapsed .surface-clip { max-height: 150vh; } }

/* ---------- phones: the five cuvées as a carousel, like the year ---------- */
.cuvee-nav { display: none; }
@media (max-width: 760px) {
  .cuvee-nav { display: flex; }
  .page > .cuvees { max-width: none; }
  .cuvees { display: flex; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 24px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .cuvee { flex: 0 0 82vw; scroll-snap-align: start; }
  .estate .tour-below { display: none; }
  .tour-modal .tour-below { display: grid; }
}

/* =====================================================================================================
   2026-09-27: the fixes from the three UX reviews (reviews/0 consolidated fix plan). Later rules win.
   ===================================================================================================== */

/* P1.1 Bodoni Moda: pin a lower optical size for display text, so commas and hairlines survive at 1x */
.h2 { font-variation-settings: "opsz" 30; }
.h3, .readout-name, .cuvee-name, .chapter-title, .tour-end-title, .tour-node, .tour-index-title, .sheet-list a, .dock-current, .tour-settings a { font-variation-settings: "opsz" 20; }
.hero-tagline, .motto, .spec--italic, .tour-speaker-name, .numeral { font-variation-settings: "opsz" 16; }

/* P1.2 and P1.3 the hero: one voice, the invented-house line first, text never under the bar */
.hero-copy { isolation: isolate; opacity: calc(1 - var(--exit, 0)); }
.hero-dial { opacity: calc(1 - var(--exit, 0)); }
.hero-copy::before { content: ""; position: absolute; inset: -18% -24% -16% -20%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 42% 55%, rgba(8, 11, 22, 0.6), rgba(8, 11, 22, 0) 70%); }
.hero-kicker { color: var(--craie); font-size: 0.86rem; letter-spacing: 0.2em; text-shadow: 0 1px 12px rgba(8, 11, 22, 0.7); }
.hero-kicker a { color: var(--or-bright); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hero-kicker a:hover { text-decoration-color: transparent; }
.hero-lockup { color: rgba(239, 233, 220, 0.94); font-size: 0.82rem; letter-spacing: 0.3em; margin-top: -6px; text-shadow: 0 1px 12px rgba(8, 11, 22, 0.7); }
.dial-title { font-family: var(--serif-sc); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.24em; text-transform: lowercase; color: rgba(239, 233, 220, 0.94); }
.dial-marks { font-size: 0.8rem; letter-spacing: 0.14em; }
.hero-tour-hint { color: rgba(239, 233, 220, 0.95); }
@media (max-width: 700px) { .dial-marks { font-size: 0.8rem; letter-spacing: 0.1em; } }
@media (max-height: 500px) and (orientation: landscape) { .hero-lockup { display: none; } .hero-kicker { display: block; font-size: 0.76rem; } }
@media (max-width: 380px) { .hero-kicker { font-size: 0.8rem; letter-spacing: 0.12em; } .hero-lockup { letter-spacing: 0.2em; } }
.hero.is-scrub { height: 200svh; }

/* P1.4 the shared consent banner: themed only through the variables the runtime exposes (its position has no hook) */
body {
  --c15t-font-family: var(--serif-text); --consent-banner-font-family: var(--serif-text);
  --c15t-surface: #121a2e; --c15t-surface-hover: #1b2542; --c15t-text: #EFE9DC; --c15t-text-muted: #cfc8b8;
  --c15t-border: rgba(200, 164, 94, 0.4); --c15t-primary: #C8A45E; --c15t-primary-hover: #d9bb7c; --c15t-text-on-primary: #1C2640;
  --c15t-radius-sm: 0; --c15t-radius-md: 0; --c15t-radius-lg: 0; --c15t-radius-full: 0;
  --consent-banner-border-radius: 0; --consent-banner-border-radius-sm: 0; --consent-banner-max-width: 26rem;
  --consent-banner-background-color: #121a2e; --consent-banner-background-color-dark: #121a2e;
  --consent-banner-footer-background-color: #0d1322; --consent-banner-footer-background-color-dark: #0d1322;
  --consent-banner-text-color: #EFE9DC; --consent-banner-text-color-dark: #EFE9DC; --consent-banner-title-color: #EFE9DC; --consent-banner-title-color-dark: #EFE9DC;
  --consent-banner-description-color: #cfc8b8; --consent-banner-description-color-dark: #cfc8b8;
  --consent-banner-border-color: rgba(200, 164, 94, 0.4); --consent-banner-border-color-dark: rgba(200, 164, 94, 0.4);
  --consent-banner-shadow: 0 8px 28px rgba(6, 8, 16, 0.45); --consent-banner-shadow-dark: 0 8px 28px rgba(6, 8, 16, 0.45);
}
@media (max-width: 760px), (max-height: 500px) {
  body { --consent-banner-max-width: 100%; --c15t-space-md: 0.55rem; --c15t-space-lg: 0.75rem; --c15t-space-sm: 0.35rem; --c15t-font-size-base: 0.95rem; --c15t-font-size-md: 1rem; --c15t-font-size-sm: 0.88rem; }
}
.foot-row [data-exploration-controls], .foot-row [data-exploration-controls] a, .foot-row [data-exploration-controls] button { font-family: var(--serif-text); font-size: 1rem; }
.foot-row [data-exploration-controls] a, .foot-row [data-exploration-controls] button { color: var(--or-bright); }

/* P2.11 in the tour modal, looking down never scrolls the dialog */
.tour-modal .tour-canvas { touch-action: none; }
.tour-stage button, .tour-stage a { touch-action: manipulation; }

/* P2.14 labels over bright skies: a local dark backdrop, cream text, 13 px and up */
.tour-place { position: relative; padding: 4px 18px 8px 0; }
.tour-place::before { content: ""; position: absolute; inset: -46px -70px -34px -80px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 22% 42%, rgba(10, 9, 8, 0.66), rgba(10, 9, 8, 0) 70%); }
.tour-top { isolation: isolate; }
.tour-env { color: var(--craie); font-size: 0.82rem; letter-spacing: 0.16em; }
.tour-speaker .sc { color: rgba(239, 233, 220, 0.88); font-size: 0.82rem; letter-spacing: 0.14em; }
.tour-cover { background: radial-gradient(ellipse 62% 52% at 50% 52%, rgba(10, 9, 8, 0.74), rgba(10, 9, 8, 0) 76%); }
.tour-cover-kicker { color: var(--craie); }
.tour-made { font-style: italic; font-size: 1rem; color: rgba(239, 233, 220, 0.9); text-shadow: 0 1px 12px rgba(10, 9, 8, 0.85); }
.tc-env { font-size: 0.8rem; letter-spacing: 0.12em; }

/* karaoke without the gold: said words at full ink carry the timing; rings light once on their cue */
.tour-caption .w.is-now { color: var(--craie); }
.tm-spot.is-lit .tm-ring { animation: none; }
.tm-ring { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), background-color 600ms var(--ease-out), color 600ms var(--ease-out); }

/* P3.16 one component language: the tour is the one gold action; the rest are hairlines and underlines */
.hero-tour, .tour-start, .sheet-tour, .mast-tour { border-radius: 0; box-shadow: none; background: var(--or); color: var(--bleu) !important; border: 1px solid var(--or); font-family: var(--serif-sc); font-weight: 700; letter-spacing: 0.16em; text-transform: lowercase; text-decoration: none; justify-content: center; }
.hero-tour:hover, .tour-start:hover, .sheet-tour:hover, .mast-tour:hover { background: var(--or-bright); }
.hero-tour { min-height: 50px; padding: 0 28px; }
.mast-tour { min-height: 44px; padding: 0 16px; font-size: 0.78rem; }
.sheet-tour { min-height: 54px; padding: 0 20px; }
.tour-start { display: inline-grid; justify-items: center; align-content: center; gap: 2px; min-height: 58px; padding: 6px 34px; }
.tour-start-meta { font-family: var(--serif-text); font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.tour-route { display: inline-grid; justify-items: center; gap: 2px; padding: 6px 28px; color: var(--craie); background: rgba(14, 12, 10, 0.5); }
.tour-route .tour-start-meta { color: rgba(239, 233, 220, 0.86); }
.button, .more-button, .sheet-close, .play-button, .sound-toggle, .mast-create, .mast-sections, .tour-route { border-radius: 0; }
.button { border-color: var(--or); }
.mast-create { background: transparent; border: 1px solid var(--or); color: var(--or-bright) !important; min-height: 44px; }
.mast-create:hover { background: rgba(200, 164, 94, 0.16); }
.sound-toggle { min-height: 44px; border-color: rgba(200, 164, 94, 0.5); }
.mast-sections { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(200, 164, 94, 0.5); background: transparent; color: var(--craie); }
@media (max-width: 1359px) { .mast-sections { display: inline-grid; } }
.mast-mark { min-height: 44px; min-width: 44px; }
/* selectors read as an index: text tabs with a gold underline for the active one */
.segmented { gap: 18px; }
.market, .segmented button, .case-switch button, .tour-modes button { border: 0; border-radius: 0; background: none; min-height: 44px; min-width: 44px; padding: 0 2px; border-bottom: 1px solid transparent; }
.market[aria-pressed="true"], .segmented button[aria-pressed="true"], .case-switch button[aria-pressed="true"], .tour-modes button[aria-pressed="true"] { background: none; color: var(--or-bright); border-bottom-color: var(--or); }
.page--chalk .case-switch button[aria-pressed="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.matrix-markets { gap: 6px 22px; }
.case-switch { gap: 4px 18px; }
.case-switch button { font-size: 0.82rem; letter-spacing: 0.12em; }
.tour-modes { gap: 14px; padding: 0 12px; border: 0; border-radius: 0; background: rgba(14, 12, 10, 0.55); }
.tour-modes button { color: var(--craie); font-size: 0.8rem; }
/* the tour's transport: rings, not filled discs */
.tour-play .play-icon { background: transparent; border: 1px solid var(--or); }
.tour-play .play-icon::after { border-left-color: var(--or); }
.tour-play[aria-pressed="true"] .play-icon::after { background: var(--or); box-shadow: 11px 0 0 var(--or); }
@media (max-height: 500px) and (orientation: landscape) { .tour-play[aria-pressed="true"] .play-icon::after { box-shadow: 9px 0 0 var(--or); } }
/* the chef de cave's notes: a hairline with a small gold play mark */
.play-button { padding: 0 18px 0 16px; border-color: var(--gold); }
.play-button .play-icon { width: 12px; height: 14px; background: none; border: 0; }
.play-button .play-icon::after { left: 1px; top: 0; border-left: 10px solid var(--gold); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.play-button[aria-pressed="true"] .play-icon::after { left: 0; top: 0; width: 3px; height: 14px; border: 0; background: var(--gold); box-shadow: 7px 0 0 var(--gold); }
.play-button:disabled .play-icon { background: none; border: 0; }
/* the dock and back to top: rectangles, a flat shadow */
.dock-menu, .dock-top, .to-top { border-radius: 0; box-shadow: 0 2px 8px rgba(6, 8, 16, 0.3); }
.dock-text .sc { font-size: 0.72rem; letter-spacing: 0.16em; }
.more-button { border-color: var(--gold); }
/* gold for numerals, interactive text and hairlines; static labels on chalk in the muted ink */
.page--chalk .chapter-when, .page--chalk .cuvee-notes dt, .page--chalk .palette code, .page--chalk .type-specimens dt, .page--chalk .cuvee-type { color: var(--muted); }
.legend-note { font-size: 0.8rem; }
/* the focus ring stays visible on chalk (3:1 and up) */
.page--chalk :focus-visible { outline-color: var(--chalk-gold); }

/* P3.15 the estate preview: no duplicate panel in the page; the six settings as a way in */
.estate .tour-below { display: none; }
.tour-modal .tour-below { display: grid; }
.tour-settings { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-top: 20px; }
.tour-settings > .sc { color: var(--gold); }
.tour-settings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 26px; }
.tour-settings a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 0; text-decoration: none; font-family: var(--serif-display); font-style: italic; font-size: 1.1rem; color: var(--ink); transition: color 200ms var(--ease-out); }
.tour-settings a:hover { color: var(--or-bright); }
.tour-settings .numeral { font-size: 0.95rem; color: var(--gold); }
.tour-settings small { font-family: var(--serif-text); font-size: 0.98rem; color: var(--muted); }
@media (max-width: 759px) { .tour-settings ul { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; } .tour-settings a { width: 100%; border-bottom: 1px solid var(--line); } }

/* the tour cover and end card */
.tour-cover-inner { gap: 14px; }
.tour-preparing { display: grid; justify-items: center; gap: 14px; color: var(--craie); font-style: italic; font-size: 1.1rem; }
.tour-cover.is-preparing .tour-cover-inner { display: none; }
.tour-end-actions a.button, .tour-end-actions .button { color: var(--craie); }
.tour-end-more { margin-top: 4px; }
.tour-end-more .text-button { color: rgba(239, 233, 220, 0.9); }
/* phone chapters: a list with the French name and an English line */
.tour-chapters-open { display: none; }
@media (max-width: 1099px) { .tour-chapters-open { display: grid; } }
.tour-chapter-menu { position: absolute; z-index: 6; left: max(var(--gutter), 16px, env(safe-area-inset-left)); right: max(var(--gutter), 16px, env(safe-area-inset-right)); bottom: calc(150px + env(safe-area-inset-bottom)); max-width: 460px; max-height: 64%; overflow: auto; padding: 16px 18px 10px; background: rgba(14, 12, 10, 0.95); border: 1px solid rgba(200, 164, 94, 0.42); color: var(--craie); }
.tour-chapter-menu > .sc { color: var(--or-bright); }
.tour-chapter-menu ol { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; }
.tour-chapter-menu button { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(200, 164, 94, 0.22); background: none; color: var(--craie); text-align: left; }
.tour-chapter-menu button b { font-family: var(--serif-display); font-style: italic; font-weight: 400; color: var(--or); }
.tour-chapter-menu button span { font-family: var(--serif-display); font-style: italic; font-size: 1.15rem; line-height: 1.2; }
.tour-chapter-menu button small { grid-column: 2; font-family: var(--serif-text); font-size: 0.95rem; color: rgba(239, 233, 220, 0.8); }
.tour-chapter-menu button[aria-current="true"] span { color: var(--or-bright); }
.tour-hint { position: absolute; left: 50%; top: 42%; z-index: 4; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 20px; background: rgba(14, 12, 10, 0.82); border: 1px solid rgba(200, 164, 94, 0.4); color: var(--craie); font-style: italic; font-size: 1.05rem; text-align: center; pointer-events: none; }

/* P3.17 phones: the bottle stays in view while the controls scroll; the five labels are the cuvée picker */
.choice--labels label { gap: 12px; }
.choice-label { width: 30px; height: auto; flex: none; filter: drop-shadow(0 2px 4px rgba(6, 8, 16, 0.4)); }
@media (max-width: 759px) {
  .atelier-stage { position: sticky; top: var(--mast-h); z-index: 3; height: 48svh; aspect-ratio: auto; }
  .atelier-panel { position: relative; z-index: 1; }
  .choice--labels { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .choice--labels legend { margin-bottom: 8px; }
  .choice--labels label { flex: 0 0 84px; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; min-height: 0; border: 1px solid transparent; border-bottom: 1px solid transparent; font-size: 0.92rem; line-height: 1.15; text-align: center; scroll-snap-align: start; }
  .choice--labels label::before { display: none; }
  .choice--labels .choice-label { width: 52px; }
  .choice--labels label:has(input:checked) { border-color: var(--or); }
}

/* P3.18 dark mode keeps the rhythm: chalk pages become the warm cellar, night pages stay Bleu Vesprée */
@media (prefers-color-scheme: dark) {
  :root { --chalk-bg: #15120f; --chalk-plate: #221d17; --chalk-line: rgba(200, 164, 94, 0.26); --night-bg: var(--bleu); --night-plate: #202c4a; }
  .palette li:first-child .chip { box-shadow: inset 0 0 0 1px var(--line); }
  .formats .formats-plate { background: var(--craie); padding: 3%; }
}
/* the formats render sits on the page's paper, no white box */
.formats-plate { background: transparent; box-shadow: none; }
.formats-plate img { mix-blend-mode: multiply; }
.formats figcaption .text-button { margin-left: 10px; }

/* P3.19 tasting cards: rows aligned across the five cards on wide screens; the play button under the name */
.cuvee-head { display: grid; gap: 2px; }
.cuvee-listen { display: grid; gap: 4px; justify-items: start; }
.case-switch:empty { min-height: 0; }
@media (min-width: 1200px) {
  .cuvees { grid-template-rows: repeat(7, auto); row-gap: 14px; }
  .cuvee { grid-row: span 7; grid-template-rows: subgrid; gap: 0; }
  .cuvee > * { min-width: 0; }
}

/* the anatomy on request */
.anatomy-head .button { justify-self: start; margin-top: 8px; }
.anatomy-body { display: grid; gap: 18px; margin-top: 18px; }

/* shorter spreads */
.page { padding: clamp(64px, 8vw, 124px) var(--gutter); }
.section-head { margin-bottom: clamp(32px, 4.5vw, 64px); }
.codes, .formats { margin-top: clamp(56px, 7vw, 96px); }

/* floating furniture stays clear of the footer */
.to-top.is-over-footer, .dock.is-over-footer { opacity: 0; visibility: hidden; pointer-events: none; }

/* landscape phones: media never taller than the screen */
@media (max-height: 500px) and (orientation: landscape) {
  .matrix-frame, .matrix-frame[data-ratio="4x5"], .matrix-frame[data-ratio="9x16"] { max-height: 78svh; }
  .chapter-media { max-height: 70svh; }
  .chapter, .chapter--ritual { flex-basis: min(84vw, 110svh); }
  .cuvee-media { max-height: 70svh; }
}

/* the tour's voice-first start: the place's still over the 360 canvas until its panorama is there */
.tour-canvas { transition: opacity 700ms var(--ease-slow); }
.is-still-first .tour-canvas { opacity: 0; }
.is-still-first.is-gl-live .tour-stills { opacity: 1; }
.is-still-first .tour-markers { visibility: hidden; }

/* ---------- the making-of: a full-screen document over the page (2026-09-27, Emmanuel) ---------- */
.hero-making { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 1px solid rgba(239, 233, 220, 0.7); color: var(--craie); background: rgba(14, 12, 10, 0.28); font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.92rem; text-transform: lowercase; text-decoration: none; transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.hero-making:hover { border-color: var(--or-bright); background: rgba(14, 12, 10, 0.45); }
.hero-cta .hero-tour-hint { flex-basis: 100%; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (min-height: 560px) { .hero-cta .hero-tour-hint { text-align: left; } }
@media (max-height: 500px) and (orientation: landscape) { .hero-making { min-height: 44px; font-size: 0.8rem; padding: 0 16px; } }
@media (max-width: 380px) { .hero-making { padding: 0 14px; letter-spacing: 0.12em; } }

.making-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; }
.making-modal::backdrop { background: var(--chalk-bg); }
.making-modal[open] { animation: modal-in 320ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .making-modal[open] { animation: none; } }
html.is-making-open { overflow: hidden; }
.making-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: max(8px, env(safe-area-inset-top)) max(var(--gutter), 16px, env(safe-area-inset-right)) 8px max(var(--gutter), 16px, env(safe-area-inset-left)); background: var(--chalk-bg); border-bottom: 1px solid var(--line); }
.making-bar-title { margin: 0; color: var(--gold); }
.making-bar-title span { margin: 0 0.3em; }
.making-close { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.making-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.making-close:hover { border-color: var(--gold); }
.making-body { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 88px) max(var(--gutter), 16px) max(72px, env(safe-area-inset-bottom)); display: grid; gap: clamp(56px, 7vw, 96px); }
.making-head { display: grid; gap: 18px; max-width: 46em; }
.making-head .lead { margin: 0; }
.making-kicker { margin: 0; color: var(--gold); }
.making-cta { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; margin-top: 8px; }
.mk-block { display: grid; gap: 22px; }
.mk-title { margin: 0; color: var(--gold); font-size: 0.86rem; padding-top: 16px; border-top: 1px solid var(--line); }
.mk-plates { display: grid; gap: clamp(28px, 4vw, 48px); }
.mk-plate { margin: 0; display: grid; gap: 12px; }
.mk-plate figcaption { color: var(--muted); font-size: 1.02rem; max-width: 46em; }
.mk-plate figcaption b { font-family: var(--serif-display); font-weight: 400; font-style: italic; color: var(--ink); font-size: 1.12rem; margin-right: 0.4em; }
.mk-plate img { display: block; width: 100%; height: auto; background: var(--plate); }
.mk-row { display: grid; gap: 12px; }
@media (min-width: 760px) { .mk-row--2 { grid-template-columns: 1fr 1fr; } .mk-row--bottle { grid-template-columns: 0.3fr 1.78fr; align-items: end; } .mk-row--campaign { grid-template-columns: 16fr 7.2fr 5.06fr; align-items: end; } }
.mk-pair { position: relative; margin: 0; }
.mk-pair span { position: absolute; left: 10px; top: 10px; padding: 4px 10px; background: rgba(14, 12, 10, 0.72); color: var(--craie); font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.78rem; text-transform: lowercase; }
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px 36px; }
.mk-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); }
.mk-steps h4 { margin: 0 0 6px; font-family: var(--serif-display); font-weight: 400; font-size: 1.3rem; font-variation-settings: "opsz" 20; }
.mk-steps p { margin: 0; color: var(--muted); font-size: 1.04rem; }
.mk-steps .mk-with { margin-top: 10px; color: var(--ink); font-size: 0.98rem; }
.mk-with .sc { color: var(--gold); margin-right: 0.5em; font-size: 0.8rem; }
.making-modal .models { margin-top: 0; }
.mk-downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mk-downloads a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; min-height: 56px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.mk-downloads li:first-child a { border-top: 1px solid var(--line); }
.mk-downloads a:hover .mk-dl-name { color: var(--gold); }
.mk-dl-name { font-family: var(--serif-display); font-style: italic; font-size: 1.2rem; }
.mk-dl-meta { color: var(--muted); font-size: 0.98rem; }
.mk-dl-meta::after { content: " ↓"; color: var(--gold); }
.mk-foot { display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.mk-invented { margin: 0; color: var(--muted); font-style: italic; }
/* no stand-in note under the bottle: the panel takes one row, no empty band before the anatomy */
@media (min-width: 960px) { .atelier-body:not(:has(.stand-in-note)) .atelier-panel { grid-row: 1; } }
/* the chef de cave's note under each cuvée name: one line on wide cards */
.cuvee-listen .play-button { font-size: 0.8rem; letter-spacing: 0.12em; padding: 8px 14px 8px 8px; gap: 8px; }
/* phones: the masthead keeps Sections, sound and Create yours inside the screen (the back link keeps its name for screen readers) */
@media (max-width: 480px) {
  .mast .mast-mark { display: none; }
  .mast-back { min-width: 44px; justify-content: center; }
  .mast-back .mast-back-short, .mast-back .mast-back-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mast-actions { margin-left: auto; }
}
/* phones: focusing or jumping to an atelier control keeps it clear of the pinned bottle */
@media (max-width: 759px) { .atelier-panel label, .atelier-panel input { scroll-margin-top: calc(var(--mast-h, 64px) + 48svh + 12px); } }

/* 2026-09-27 (Emmanuel): the tour cover's two routes, one size, stacked and centred */
.tour-cover .tour-start, .tour-cover .tour-route { display: inline-grid; justify-items: center; align-content: center; gap: 2px; box-sizing: border-box; width: min(300px, 82vw); height: 70px; min-height: 0; margin: 0; padding: 0 20px; font-size: 0.98rem; letter-spacing: 0.16em; line-height: 1.2; }
.tour-cover .tour-start .tour-start-meta, .tour-cover .tour-route .tour-start-meta { font-size: 0.95rem; letter-spacing: 0; }
@media (max-height: 500px) and (orientation: landscape) { .tour-cover .tour-start, .tour-cover .tour-route { height: 56px; } }

/* 2026-09-27 (Emmanuel): one sound icon, thin gold line, a label on hover and focus; masthead, tour and making-of */
.sound-toggle { position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; color: var(--or); border: 1px solid rgba(200, 164, 94, 0.5); background: transparent; }
.sound-toggle svg, .tour-mute svg { width: 22px; height: 22px; }
.sound-toggle .sp, .tour-mute .sp { fill: none; stroke: currentColor; stroke-width: 1.3; }
.sound-toggle[aria-pressed="true"] { color: var(--or-bright); border-color: var(--or); }
.sound-toggle .sound-label { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: auto; height: auto; clip: auto; overflow: visible; white-space: nowrap; padding: 4px 10px; background: rgba(14, 12, 10, 0.92); border: 1px solid rgba(200, 164, 94, 0.4); color: var(--craie); font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.74rem; text-transform: lowercase; opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease-out); z-index: 10; }
.sound-toggle:hover .sound-label, .sound-toggle:focus-visible .sound-label { opacity: 1; }
.tour-mute { color: var(--or); }
.tour-mute .sw { display: none; }
.tour-mute .sx { display: block; }
.tour-mute[aria-pressed="true"] .sw { display: block; }
.tour-mute[aria-pressed="true"] .sx { display: none; }
.tour-mute[aria-pressed="false"] .sw { display: none; }
.tour-mute[aria-pressed="false"] .sx { display: block; }
.sound-tip { position: relative; }
.sound-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; background: rgba(14, 12, 10, 0.92); border: 1px solid rgba(200, 164, 94, 0.4); color: var(--craie); font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.14em; font-size: 0.74rem; text-transform: lowercase; opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease-out); }
.sound-tip:hover::after, .sound-tip:focus-visible::after { opacity: 1; }
.making-bar-actions { display: flex; gap: 10px; align-items: center; }
.making-modal .making-sound { color: var(--gold); border-color: var(--line); }
.making-modal .making-sound[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

/* review of PR #336: a way back to the gallery from the full-screen tour and making-of */
.tour-gallery { color: var(--or); }
.tour-gallery svg { stroke-width: 1.3; }
.tour-gallery.sound-tip::after { top: calc(100% + 8px); bottom: auto; }
.making-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: none; font-family: var(--serif-sc); font-weight: 600; letter-spacing: 0.16em; font-size: 0.86rem; text-transform: lowercase; white-space: nowrap; color: var(--gold); text-decoration: none; }
.making-back:hover, .making-back:focus-visible { color: var(--ink); }
@media (max-width: 719px) { .making-bar-title { display: none; } }
@media (max-width: 459px) {
  .tour-tools { flex-wrap: wrap; row-gap: 8px; }
  .tour-gallery { margin-right: auto; }
}
/* the narrowest phones with the motion button: the gallery link and the motion button take a second row, Close stays in the first */
@media (max-width: 359px) { .tour-tools:has([data-tour-gyro]:not([hidden])) :is(.tour-gallery, [data-tour-gyro]) { order: 1; } }