/* =====================================================================
   yuliia.info — concept v1 «Sauvage»
   Reference DNA: mariesauvage.com (research/01a §11, 01b §5)
   Display: Panchang (local, unmodified) → Unbounded (Cyrillic fallback)
   Text: Cormorant Garamond (Google Fonts) — also the studio's serif (echo)
   ===================================================================== */

@font-face {
  font-family: 'Panchang';
  src: url('fonts/Panchang-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette — monochrome UI, colour only from photographs */
  --paper: #F8F5F0;          /* warm off-white (studio echo, lighter than #f3ece2) */
  --paper-2: #F1ECE4;
  --ink: #15120F;            /* warm near-black, never #000 */
  --ink-2: #2A2520;
  --mute: #6B635A;           /* replaces Marie's silver: 5.2:1 on paper */
  --line: rgba(21, 18, 15, .16);
  --on-dark: #F3EEE6;
  --on-dark-mute: #BDB4A8;   /* 8.6:1 on ink */
  --gold: rgba(166, 123, 70, .55); /* studio bronze, used once (footer hairline) */

  --display: 'Panchang', 'Unbounded', 'Arial Black', sans-serif;
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;

  --g: clamp(16px, 2vw, 40px);           /* side gutter (Marie: 2vw) */
  --maxw: 2048px;                          /* content cap for very wide screens */
  --gap: 11px;                             /* Marie's grid gap */

  --space-xl: clamp(88px, 9vw, 170px);     /* between blocks (80–130 @1440) */
  --space-l: clamp(48px, 5vw, 96px);       /* inside a block */
  --space-m: clamp(26px, 2.6vw, 48px);
  --space-s: clamp(14px, 1.3vw, 22px);

  --t-body: clamp(17px, .3vw + 15.6px, 20px);
  --t-small: clamp(15px, .2vw + 14px, 17px);
  --t-label: clamp(17px, .35vw + 15px, 22px);
  --t-whisper: clamp(19px, .55vw + 16px, 26px);

  --ease-reveal: cubic-bezier(.25, .1, .25, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --ease-slide: cubic-bezier(.25, .46, .45, .94);
  --ease-burger: cubic-bezier(.2, .6, .3, 1);
  --reveal-dur: 1.5s;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 var(--t-body)/1.75 var(--serif);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p, h1, h2, h3, h4, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
section[id], [id="top"] { scroll-margin-top: 0; }

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

:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; border-radius: 2px; }

.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.skip {
  position: absolute; left: var(--g); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--g));
  margin-inline: auto;
  padding-inline: var(--g);
  container-type: inline-size;
}
.center { text-align: center; }
.sec { padding-block: var(--space-xl); }

/* ---------- typography roles ---------- */
.label, .byline {
  font: 500 var(--t-label)/1.2 var(--serif);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.whisper {
  font: italic 500 var(--t-whisper)/1.35 var(--serif);
  max-width: 30em;
  margin-inline: auto;
  text-wrap: balance;
}
.whisper--lg { font-size: clamp(22px, .9vw + 17px, 34px); }

/* sandwich H2: giant Panchang word(s), 800/200 contrast */
.giant {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.012em;
  font-size: clamp(24px, 7vw, 132px);                                   /* fallback */
  font-size: min(calc(100cqi / 12.6), calc(6cqi + 8px), 140px);         /* PERFORMANCE always fits */
  text-wrap: balance;
  margin-block: .38em .46em;
}
.giant .w8 { font-weight: 800; }
.giant .w2 { font-weight: 200; }
.giant .w8, .giant .w2 { display: inline-block; }

.h2-serif {
  font: 500 clamp(28px, 1.6vw + 20px, 48px)/1.12 var(--serif);
  text-wrap: balance;
}

.prose {
  width: min(100%, 31em);
  margin-inline: auto;
  text-align: left;
  hyphens: auto;
}
.prose p + p { margin-top: 1em; }
@media (min-width: 768px) {
  .prose { text-align: justify; }
}

.fine { font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); max-width: 36em; margin-inline: auto; text-wrap: pretty; }
.fine--italic { font-style: italic; font-size: var(--t-body); }

/* justify-trick «spread» (Marie's N O V E M B E R / 2 0 2 4) */
.spread {
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
  font: 500 13px/1.9 var(--serif);
  letter-spacing: 0;
  text-transform: uppercase;
}
.spread > span { display: block; text-align: justify; text-align-last: justify; }
.spread--year { width: 4.1em; font-size: 15px; vertical-align: baseline; }
.spread--block { width: 7.2em; font-size: 12px; margin-bottom: 1.4em; }
.spread--ornament { width: 4.8em; font-size: 13px; line-height: 2; margin-block: var(--space-xl) var(--space-l); }

/* ---------- buttons: thin pill (M4) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(196px, 12vw + 40px, 250px);
  min-height: clamp(56px, 2vw + 40px, 72px);
  padding: 0 1.5em .12em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 400 clamp(19px, .3vw + 17px, 22px)/1 var(--serif);
  font-variant: small-caps;
  letter-spacing: .045em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
  -webkit-tap-highlight-color: transparent;
}
.pill:hover, .pill:focus-visible { background: var(--ink); color: var(--paper); }
.pill:active { background: var(--ink-2); color: var(--paper); }
.pill--sm { min-width: 0; min-height: 52px; padding-inline: 1.4em; font-size: clamp(17px, .2vw + 16px, 19px); }
.pill--filled { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.pill--filled:hover, .pill--filled:focus-visible { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.pill-note { margin-top: 14px; font-size: var(--t-small); color: var(--mute); }
.pill-note a { color: var(--ink-2); }

/* =====================================================================
   1 · HERO — wordmark + one nav line + one frame = exactly one screen
   ===================================================================== */
.hero {
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}
.masthead {
  flex: 0 0 auto;
  padding-top: clamp(14px, 2.1vw, 34px);
  text-align: center;
  position: relative;
}
.wordmark {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
  /* one line spanning the photo width (22/24 cols): measured 13.67em */
  font-size: calc(92vw / 14.1);
  font-size: calc(100cqi * .9167 / 13.85);
}
.wordmark a { text-decoration: none; display: inline-block; }
.wm-a { font-weight: 800; }
.wm-b { font-weight: 200; }

.nav { margin-top: clamp(10px, 1.1vw, 20px); }
.nav ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 clamp(14px, 1.25vw, 26px);
}
.nav a, .lang span {
  display: inline-block;
  font: 500 clamp(18px, .35vw + 15.5px, 22px)/2 var(--serif);
  text-decoration: none;
  transition: color .2s ease;
}
.nav a:hover, .nav a.is-active { color: var(--mute); }
.lang { display: inline-flex; gap: .35em; margin-left: clamp(6px, 1vw, 22px); }
.lang span { color: var(--mute); }
[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
[aria-disabled="true"] { color: var(--mute); cursor: default; }
.nav a[aria-disabled="true"]:hover { color: var(--mute); }

.menu-btn, .menu-close, .quick-menu {
  display: none;
  width: 48px; height: 48px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.plus { position: relative; display: block; width: 28px; height: 28px; }
.plus i {
  position: absolute; left: 0; top: 50%; width: 28px; height: 1px; margin-top: -.5px;
  background: currentColor;
  transition: transform .25s var(--ease-burger);
}
.plus i:first-child { transform: rotate(180deg); }
.plus i:last-child { transform: rotate(90deg); }

.hero-photo {
  flex: 1 1 auto;
  min-height: 0;
  width: 91.667%;            /* 22 / 24 columns */
  max-width: calc(var(--maxw) * .9167);
  margin: clamp(12px, 1.5vw, 26px) auto clamp(12px, 1.6vw, 28px);
  overflow: hidden;
  background: var(--paper-2);
}
.hero-photo picture, .hero-photo img { width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 58% 46%; }

@media (max-width: 767px) {
  .masthead {
    display: flex; align-items: flex-start; justify-content: space-between;
    text-align: left; padding-top: 18px;
  }
  .wordmark { white-space: normal; font-size: 16px; }
  .wordmark a { display: flex; flex-direction: column; gap: .12em; }
  .wordmark .wm-a { font-size: calc((100cqi - 60px) / 5.2); line-height: .86; }
  .wordmark .wm-b { font-size: calc((100cqi - 60px) / 8.3); line-height: .86; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; margin: -6px -8px 0 8px; }
  .hero-photo { width: 100%; margin-top: 18px; margin-bottom: var(--g); }
  .hero-photo img { object-position: 50% 42%; }
}
@media (max-aspect-ratio: 1/1) {
  .hero-photo img { object-position: 50% 42%; }
}

/* quick menu appears once the masthead has scrolled away (header stays non-sticky) */
.quick-menu {
  display: inline-flex;
  position: fixed; z-index: 40;
  top: max(12px, env(safe-area-inset-top)); right: 12px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .4s var(--ease-ui), transform .4s var(--ease-ui), visibility 0s linear .4s;
}
.quick-menu.is-visible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .4s var(--ease-ui), transform .4s var(--ease-ui), visibility 0s;
}
.quick-menu:hover { box-shadow: 0 0 0 1px var(--ink); }

/* =====================================================================
   2 · ABOUT
   ===================================================================== */
.about .whisper { margin-top: var(--space-s); }
.archive {
  width: min(100%, 33.333%);
  min-width: min(100%, 360px);
  max-width: 680px;
  margin: var(--space-l) auto 0;
}
.archive img { width: 100%; }
figcaption {
  margin-top: 14px;
  font: 500 var(--t-small)/1.5 var(--serif);
  color: var(--ink-2);
}
figcaption .cap-line { display: block; font-style: italic; }
figcaption .spread { margin-top: 4px; }
.about .prose { margin-top: var(--space-l); }
.about .more { margin-top: 1em; }
.about .more.is-shown { animation: fadeIn .9s var(--ease-reveal) both; }
.about .pill { margin-top: var(--space-l); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   3 · NEXT — full-bleed dark band: «now / live»
   ===================================================================== */
.band {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: clamp(84px, 8vw, 160px);
}
.band-media {
  position: absolute; z-index: -1;
  top: 0; bottom: 0; right: 0;
  width: 64%;
}
.band-media picture, .band-media img { width: 100%; height: 100%; }
.band-media img { object-fit: cover; object-position: 60% 50%; opacity: .92; }
.band-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(21, 18, 15, .72) 34%, rgba(21, 18, 15, .25) 100%),
    rgba(21, 18, 15, .25);
}
.band-kicker {
  font: 500 var(--t-label)/1.2 var(--serif);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-dark-mute);
}
.dates { margin-top: var(--space-l); }
.date-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-s) var(--space-m);
  padding-block: var(--space-m);
  border-top: 1px solid rgba(243, 238, 230, .2);
}
.date-row:last-child { border-bottom: 1px solid rgba(243, 238, 230, .2); }
.d-when {
  font: 300 clamp(15px, .7vw + 11px, 24px)/1.2 var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--on-dark-mute);
}
.d-title {
  margin-top: .32em;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  font-size: clamp(22px, 5vw, 90px);
  font-size: min(calc(100cqi / 12.2), calc(4.8cqi + 6px), 96px);
  text-wrap: balance;
}
.d-title .w2 { font-weight: 200; }
.date-row--main .d-title { font-size: min(calc(100cqi / 11.8), calc(5.6cqi + 6px), 112px); }
.d-meta {
  margin-top: .7em;
  font: italic 500 var(--t-whisper)/1.35 var(--serif);
  color: var(--on-dark);
}
.d-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.d-role {
  font: 500 var(--t-label)/1.2 var(--serif);
  text-transform: uppercase; letter-spacing: .05em;
}
.d-link { font-size: var(--t-small); color: var(--on-dark-mute); }
.d-link:hover { color: var(--on-dark); }
.band :focus-visible { outline-color: var(--on-dark); }

@media (max-width: 767px) {
  .band-media { width: 100%; }
  .band-media img { object-position: 50% 30%; }
  .band-media::after { background: rgba(21, 18, 15, .74); }
  .date-row { grid-template-columns: 1fr; }
  .d-side { text-align: left; align-items: flex-start; }
}

/* =====================================================================
   SANDWICH sections (organizer / performance / classes / private)
   ===================================================================== */
.sandwich .byline { margin-bottom: var(--space-l); }
.sandwich .prose { margin-bottom: var(--space-l); }

/* 4 · reel of past covers (M6) */
.reel { margin-top: var(--space-s); }
.reel-track {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--g), calc((100% - var(--maxw)) / 2));
  scrollbar-width: none;
  outline-offset: -3px;
}
.reel-track::-webkit-scrollbar { display: none; }
.reel-list {
  display: flex;
  gap: 15px;
  padding-inline: max(var(--g), calc((100% - var(--maxw)) / 2));
  width: max-content;
}
.reel-item { flex: 0 0 auto; width: clamp(214px, 21vw, 400px); scroll-snap-align: start; }
.reel-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #2a2622; }
.reel-item figcaption { margin-top: 14px; }
.r-name {
  display: block;
  font: 600 clamp(11px, .25vw + 10px, 14px)/1.3 var(--display);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}
.r-date { display: block; margin-top: 4px; font: italic 500 var(--t-small)/1.4 var(--serif); color: var(--ink-2); }
.reel-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--space-s); }
.reel-note { font-size: 14px; color: var(--mute); }
.reel-btns { display: flex; gap: 10px; }
.reel-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--ink); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .12s linear, color .12s linear, opacity .6s var(--ease-ui);
}
.reel-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.reel-btn:hover:not(:disabled), .reel-btn:focus-visible { background: var(--ink); color: var(--paper); }
.reel-btn:disabled { opacity: .28; cursor: default; }
.organizer .reel + .wrap { margin-top: var(--space-l); }

/* 4b · archive — typographic calendar */
.archive-sub { margin-top: var(--space-s); font: 600 var(--t-small)/1.4 var(--serif); letter-spacing: .02em; }
.tour { margin-top: var(--space-l); }
.tour-item + .tour-item { margin-top: clamp(56px, 5vw, 96px); }
.tour-name {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.01em;
  font-size: clamp(24px, 6vw, 110px);
  font-size: min(calc(100cqi / 11.6), calc(5.4cqi + 6px), 118px);
}
.tour-event { margin-top: .75em; font: italic 500 var(--t-whisper)/1.35 var(--serif); max-width: 34em; margin-inline: auto; text-wrap: balance; }
.tour-date { margin-top: .25em; font-size: var(--t-body); }
.invite { margin: var(--space-xl) auto 0; max-width: 32em; font: italic 500 var(--t-whisper)/1.45 var(--serif); text-wrap: balance; }

/* 5 · performance vertical frame (10/24) */
.frame-v { width: min(100%, 41.667%); min-width: min(100%, 330px); max-width: 860px; margin: 0 auto; }
.frame-v img { width: 100%; }
.frame-v + .pill { margin-top: var(--space-l); }

/* 6 · classes: 3×2 stills + menu of formats */
.stills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.stills img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--gap);
}
.f-col li + li { margin-top: clamp(32px, 2.6vw, 48px); }
.f-name {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(15px, .9vw + 8px, 26px);
  line-height: 1.08;
  text-wrap: balance;
}
.f-desc { margin: .55em auto 0; max-width: 21em; font: italic 500 var(--t-body)/1.35 var(--serif); text-wrap: balance; }
.f-price { margin-top: .2em; font-size: var(--t-body); }
.classes .fine { margin-top: var(--space-l); }
.classes .fine + .pill { margin-top: var(--space-l); }

/* 7 · private: cinematic 2:1 (20/24) */
.frame-w { width: 83.333%; max-width: calc(var(--maxw) * .8333); margin: 0 auto; }
.frame-w img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.private .fine { margin-top: var(--space-m); }
.private .fine + .pill { margin-top: var(--space-l); }

@media (max-width: 767px) {
  .stills { grid-template-columns: 1fr; }
  .stills .m-hide { display: none; }
  .formats { grid-template-columns: 1fr; }
  .f-col + .f-col { margin-top: clamp(32px, 2.6vw, 48px); }
  .frame-v { width: 100%; }
  .frame-w { width: 100%; }
  .frame-w img { aspect-ratio: 4 / 3; }
  .archive { width: 86%; min-width: 0; }
}

/* 8 · press */
.press { padding-top: 0; }
.press-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-m) clamp(18px, 2vw, 40px);
  margin-top: var(--space-l);
}
.press-list li { display: flex; flex-direction: column; align-items: center; }
.p-outlet { font: 700 clamp(20px, 1.1vw + 12px, 34px)/1 var(--display); text-transform: uppercase; }
.p-year { margin-top: 10px; font-size: var(--t-small); color: var(--mute); }
.p-line { margin-top: 12px; max-width: 19em; font: italic 500 var(--t-body)/1.4 var(--serif); text-wrap: balance; }
.p-link { margin-top: 14px; font-size: var(--t-small); display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 1099px) { .press-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .press-list { grid-template-columns: 1fr; } }

/* 9 · contact triptych */
.contact { border-top: 1px solid var(--line); }
.contact .whisper { margin-top: var(--space-m); }
.handle {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 200;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  font-size: clamp(22px, 4vw, 64px);
  font-size: min(calc(100cqi / 13), calc(3.6cqi + 6px), 72px);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: .12em;
  transition: color .2s ease;
}
.handle:hover { color: var(--mute); }
.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l) var(--gap);
  margin-top: var(--space-xl);
}
.tri { display: flex; flex-direction: column; align-items: center; }
.tri-title { font: 500 var(--t-label)/1.2 var(--serif); text-transform: uppercase; letter-spacing: .05em; }
.tri-line { margin-top: 12px; max-width: 20em; font: italic 500 var(--t-body)/1.4 var(--serif); text-wrap: balance; }
.tri .pill { margin-top: var(--space-m); }
.socials { margin-top: var(--space-xl); font-size: var(--t-body); line-height: 1.9; }
.s-label { display: block; font: 500 var(--t-label)/1.2 var(--serif); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
@media (max-width: 899px) { .triptych { grid-template-columns: 1fr; } }

/* 10 · footer — quiet, with the single studio echo */
.footer { padding-block: var(--space-l) var(--space-m); }
.footer .wrap { border-top: 1px solid var(--gold); padding-top: var(--space-l); }
.f-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m) var(--gap);
  text-align: center;
  font-size: var(--t-small);
  line-height: 1.8;
}
.f-head { font: 500 var(--t-small)/1.4 var(--serif); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.f-cell p:not(.f-head) { max-width: 24em; margin-inline: auto; }
.rose { width: 30px; height: auto; margin: 0 auto 12px; opacity: .5; }
.f-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  margin-top: var(--space-l);
  font-size: 14px; color: var(--mute);
}
.f-base a { color: var(--ink-2); }
.f-base a[aria-disabled="true"] { color: var(--mute); }
@media (max-width: 767px) {
  .f-grid { grid-template-columns: 1fr; }
  .f-base { flex-direction: column; align-items: center; text-align: center; }
}

/* =====================================================================
   Menu overlay (M7) + plus → cross (M8)
   ===================================================================== */
.menu {
  position: fixed; inset: 0; z-index: 60;
  display: none;
  flex-direction: column;
  background: var(--paper);
  opacity: 0;
  transition: opacity .4s var(--ease-ui);
  overflow-y: auto;
}
.menu.is-mounted { display: flex; }
.menu.is-open { opacity: 1; }
.menu-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-top: 18px;
}
.menu-mark {
  font-family: var(--display); text-transform: uppercase; text-decoration: none;
  display: flex; flex-direction: column; gap: .12em; line-height: .86;
}
.menu-mark .wm-a { font-size: min(calc((100cqi - 60px) / 5.2), 34px); }
.menu-mark .wm-b { font-size: min(calc((100cqi - 60px) / 8.3), 21.5px); }
.menu-close { display: inline-flex; margin: -6px -8px 0 8px; }
.menu.is-open .menu-close .plus i:first-child { transform: rotate(135deg); }
.menu.is-open .menu-close .plus i:last-child { transform: rotate(45deg); }
.menu-nav { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding-block: 32px; }
.menu-list {
  text-align: center;
  transform: translateY(20px);
  transition: transform .6s var(--ease-ui);
}
.menu.is-open .menu-list { transform: none; }
.menu-list a, .menu-list span {
  display: inline-block;
  font: 500 clamp(22px, 1vw + 18px, 30px)/2.05 var(--serif);
  text-decoration: none;
  min-height: 44px;
}
.menu-list a:hover { color: var(--mute); }
.menu-list [aria-current="page"] { text-decoration: underline; }
.menu-lang { margin-top: 10px; }
.menu-foot { padding: 0 var(--g) 28px; text-align: center; font-size: var(--t-small); }
body.menu-lock { overflow: hidden; }

/* =====================================================================
   Motion: reveal on scroll (M1/M2) — opacity only, 1.5 s, like the reference
   ===================================================================== */
.js [data-reveal] {
  opacity: 0;
  transition: opacity var(--reveal-dur) var(--ease-reveal) var(--d, .15s);
}
.js [data-reveal].is-in,
.reveal-all [data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transition: none; }
  .menu, .menu-list, .plus i, .quick-menu, .pill, .reel-btn { transition: none !important; }
  .menu-list { transform: none; }
  .about .more.is-shown { animation: none; }
}

@media print {
  .js [data-reveal] { opacity: 1 !important; }
  .quick-menu, .menu, .reel-ctrl { display: none !important; }
  .band { background: #fff; color: #000; }
  .band-media { display: none; }
}

/* --- Owner review 2026-09-26: archive tablets at Marie scale, one-line spaced labels --- */
.tour-name { font-size: clamp(34px, 7.4vw, 120px); line-height: .84; }
.spread--block, .spread--ornament { width: auto; display: block; text-align: center; text-align-last: center; font-size: 12px; letter-spacing: .55em; margin-inline: auto; }
.spread--block > span, .spread--ornament > span { display: inline; text-align: center; text-align-last: auto; word-spacing: -.4em; }
.spread--block > span + span::before { content: '·'; margin: 0 .6em 0 .1em; letter-spacing: 0; }
.spread--ornament > span:nth-child(2) { display: none; }
@media (min-width: 2200px) { .tour-name { font-size: 132px; } }