/* ─────────────────────────────────────────────
   SILENTIA · Landing Stylesheet
   Editorial · contemplative · stone & ivory
   Pattern: Lenis + GSAP scroll-scrub chain L0→L5
   ───────────────────────────────────────────── */

/* SILENTIA · self-hosted fonts (M-064 sistemazione 30/8). Source: Google Fonts, licence OFL 1.1 (Cormorant Garamond, Cormorant SC, IBM Plex Mono). Fetched woff2, latin + latin-ext subsets. No external request. */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-garamond-300-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-garamond-300-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-garamond-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-garamond-300-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-garamond-300-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-garamond-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-garamond-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:300;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-sc-300-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:300;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-sc-300-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:400;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-sc-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:400;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/cormorant-sc-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/ibm-plex-mono-300-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/ibm-plex-mono-300-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/ibm-plex-mono-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/interiors/villa-01-full/assets/fonts/ibm-plex-mono-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --bone:        #ECE6D8;
  --bone-deep:   #E0D8C5;
  --ivory:       #F4EFE6;
  --ink:         #1B1814;
  --ink-soft:    #2C2925;
  --grey-storm:  #6B6864;
  --grey-quiet:  #A39E92;
  --rule:        rgba(27, 24, 20, 0.18);
  --rule-soft:   rgba(27, 24, 20, 0.08);

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, serif;
  --serif-sc: "Cormorant SC", "Cormorant Garamond", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --pad-x: clamp(20px, 5vw, 88px);
  --pad-y: clamp(64px, 12vw, 180px);
  --gap:   clamp(20px, 3vw, 48px);
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
}
html.lenis { height: auto; }
html.lenis, html.lenis body { overflow: clip; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis-scrolling iframe { pointer-events: none; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw + 12px, 19px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ol, ul { list-style: none; padding: 0; margin: 0; }
figure { margin: 0; }
em { font-style: italic; }

/* shared atoms */
.kicker {
  font-family: var(--serif-sc);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey-storm);
  margin: 0 0 1.6em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: .5;
}

/* ── nav ───────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* iOS notch / Dynamic Island: honour the top safe-area (rilievo L, sistemazione 3008) */
  padding: max(22px, env(safe-area-inset-top)) var(--pad-x) 22px;
  gap: 24px;
  pointer-events: none;
  transition: background 600ms ease, padding 400ms ease;
}
.nav > * { pointer-events: auto; }
.nav.is-scrolled {
  background: color-mix(in oklab, var(--bone) 96%, transparent);
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: 14px;
}
.nav__col--right { justify-self: end; }
.nav__col--left  { justify-self: start; }
.nav__logo img {
  height: 38px;
  width: auto;
  opacity: .95;
  mix-blend-mode: multiply;
  transition: height 400ms ease, filter 500ms ease, opacity 500ms ease;
}
.nav.is-scrolled .nav__logo img { height: 30px; }
.nav__mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 500ms ease;
}
.nav.is-scrolled .nav__mark { opacity: 1; }
.lang {
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--grey-storm);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 44px;                 /* iOS tap target >=44pt (rilievo G, sistemazione 3008) */
  padding: 0 6px;
  transition: color 300ms ease;
}
.lang span { padding: 8px 2px; transition: color 200ms ease, border-color 200ms ease; }
.lang .is-active { color: var(--ink); border-bottom: 1px solid var(--ink); }
.lang__sep { color: var(--grey-quiet); }

/* nav while runway is on screen → invert tints (video bg) */
.nav.is-on-runway .nav__logo img { filter: invert(1) brightness(2.4); mix-blend-mode: normal; opacity: .92; }
.nav.is-on-runway .lang { color: rgba(244,239,230,.72); }
.nav.is-on-runway .lang .is-active { color: var(--ivory); border-color: var(--ivory); }
.nav.is-on-runway .nav__mark { color: var(--ivory); }
.nav.is-on-runway.is-scrolled {
  background: color-mix(in oklab, var(--ink) 50%, transparent);
}

/* ── runway · video chain scroll-scrub ───────── */
.runway {
  position: relative;
  height: 700vh;          /* runway: 7 segments, scrub through 45.2s of the chain (desktop scrub only; mobile override below) */
  width: 100%;
  background: var(--ink);
}
.runway__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
.runway__chain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 1;
}
.runway__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(120% 80% at 50% 0%,   rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 70%, rgba(0,0,0,.45) 100%);
}

/* overlays · controlled by JS opacity */
.ov {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 0 var(--pad-x);
  pointer-events: none;
  color: var(--ivory);
  opacity: 0;
  will-change: opacity;
  text-shadow: 0 2px 28px rgba(0,0,0,.55);
}
.ov--opening {
  gap: clamp(20px, 3vw, 36px);
}
.ov__logo {
  height: clamp(120px, 17vw, 220px);
  width: auto;
  filter: invert(1) brightness(2.4);
  mix-blend-mode: normal;
  opacity: .95;
}
.ov__line {
  font-family: var(--serif-sc);
  font-size: clamp(11px, .35vw + 9px, 13px);
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: rgba(244,239,230,.78);
  margin: 0;
}
.ov__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 17vw, 280px);
  line-height: .9;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ov__title .word {
  background: linear-gradient(180deg, rgba(244,239,230,1) 70%, rgba(244,239,230,.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ov__title .dot {
  font-style: normal;
  font-size: .42em;
  margin-left: .04em;
  align-self: flex-end;
  margin-bottom: .28em;
  color: rgba(244,239,230,.85);
  -webkit-text-fill-color: rgba(244,239,230,.85);
}
.ov__claim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.4vw + 12px, 28px);
  line-height: 1.35;
  margin: 0;
  max-width: 26ch;
  color: rgba(244,239,230,.92);
}

.ov--manifest {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 0 var(--pad-x) clamp(72px, 12vw, 160px);
  gap: clamp(10px, 1.4vw, 18px);
}
.ov__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  color: rgba(244,239,230,.65);
  margin: 0 0 4px;
}
.ov__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 3.4vw + 14px, 76px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
  color: var(--ivory);
}
.ov__p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 0.6vw + 14px, 22px);
  line-height: 1.5;
  margin: 0;
  max-width: 44ch;
  color: rgba(244,239,230,.92);
}

.ov--cue {
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--pad-x) clamp(28px, 5vw, 56px);
  gap: 8px;
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244,239,230,.7);
  flex-direction: row;
}
.ov--cue .ov__arrow {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0;
  animation: cueDown 2.4s ease-in-out infinite;
}
@keyframes cueDown {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* MOBILE: video di sfondo fisso · i manifesti scorrono sopra (niente scroll-scrub).
   Il video + dim sono fixed dietro la pagina: la runway è trasparente e li lascia
   vedere, le sezioni successive (opache) li coprono. Modello come lapovision. */
@media (max-width: 720px) {
  .runway { height: auto; background: transparent; }
  .runway__stage {
    position: static;
    height: auto;
    overflow: visible;
    background: transparent;
  }
  .runway__chain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: -2;
  }
  .runway__dim {
    position: fixed;
    z-index: -1;
  }
  /* gli overlay diventano sezioni a tutta altezza che scorrono sopra il video */
  .ov {
    position: relative;
    inset: auto;
    z-index: auto;
    min-height: 100dvh;
    opacity: 1;
    will-change: auto;
  }
  .ov--cue { display: none; }
  .ov--manifest { padding-bottom: clamp(64px, 16vw, 120px); }
  .ov__h { font-size: clamp(30px, 7vw, 42px); }
  .ov__title { font-size: clamp(72px, 22vw, 140px); }
}

/* prefers-reduced-motion: disable scrub, autoplay loop the chain, stack manifesti below */
@media (prefers-reduced-motion: reduce) {
  .runway { height: auto; }
  .runway__stage {
    position: relative;
    height: 60vh;
    height: 60svh;
  }
  .ov:not(.ov--opening):not(.ov--manifest) { display: none; }
}

/* ── manifesto ─────────────────────────────── */
.manifesto {
  padding: clamp(120px, 18vw, 240px) var(--pad-x);
  background: var(--bone);
}
.manifesto__inner {
  max-width: 880px;
  margin: 0 auto;
}
.manifesto__lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 1.6vw + 14px, 36px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: balance;
}
.manifesto__lead em {
  font-style: italic;
  color: var(--ink);
}

/* ── matter ────────────────────────────────── */
.matter {
  background: var(--ivory);
  padding: var(--pad-y) var(--pad-x);
}
.matter__head {
  max-width: 880px;
  margin: 0 auto clamp(40px, 6vw, 80px);
  text-align: left;
}
.matter__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 2vw + 16px, 48px);
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}
.matter__lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, .7vw + 14px, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}
.matter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  max-width: 1180px;
  margin: 0 auto;
}
.swatch__img {
  aspect-ratio: 1;
  background: var(--bone-deep);
  overflow: hidden;
}
.swatch__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1400ms ease;
}
.swatch:hover .swatch__img img { transform: scale(1.04); }
.swatch figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 16px 2px 0;
  border-top: 1px solid var(--rule);
  margin-top: 12px;
  gap: 12px;
}
.swatch__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, .5vw + 16px, 26px);
  font-weight: 400;
}
.swatch__sub {
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--grey-storm);
  text-transform: uppercase;
  text-align: right;
}
.matter__macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  max-width: 1480px;
  margin: clamp(56px, 8vw, 120px) auto 0;
}
.macro {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bone-deep);
}
.macro img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2400ms ease;
}
.macro:hover img { transform: scale(1.06); }
@media (max-width: 760px) {
  .matter__macros { grid-template-columns: repeat(2, 1fr); }
}

/* ── rooms ─────────────────────────────────── */
.rooms {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bone);
}
.rooms__head {
  max-width: 880px;
  margin: 0 auto clamp(48px, 7vw, 100px);
}
.rooms__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 2vw + 16px, 48px);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.rooms__list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 40px) clamp(20px, 2.4vw, 36px);
  max-width: 1480px;
  margin: 0 auto;
}
.room {
  grid-column: span 4;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: start;
}
.room--wide { grid-column: span 12; }
.room__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--grey-storm);
  padding-top: 4px;
}
.room__card { display: block; position: relative; }
.room__img {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bone-deep);
}
.room--wide .room__img { aspect-ratio: 21/9; }
.room__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1800ms ease, filter 800ms ease;
  filter: saturate(.95);
}
.room__card:hover .room__img img { transform: scale(1.04); filter: saturate(1); }
.room__label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 14px 0 0;
  margin-top: 10px;
  gap: 12px;
  border-top: 1px solid var(--rule);
}
.room__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, .5vw + 16px, 26px);
  font-weight: 400;
}
.room__sub {
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--grey-storm);
  text-transform: uppercase;
  text-align: right;
  text-wrap: balance;
}
@media (max-width: 1040px) {
  .room { grid-column: span 6; }
  .room--wide { grid-column: span 12; }
}
@media (max-width: 640px) {
  .room { grid-column: span 12; }
}

/* ── cinema ────────────────────────────────── */
.cinema {
  padding: var(--pad-y) var(--pad-x);
  background: var(--ink);
  color: var(--ivory);
}
.cinema__head {
  max-width: 880px;
  margin: 0 auto clamp(48px, 7vw, 96px);
}
.cinema__head .kicker { color: rgba(244,239,230,.6); }
.cinema__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 2vw + 16px, 52px);
  line-height: 1.12;
  margin: 0 0 .6em;
  text-wrap: balance;
  color: var(--ivory);
}
.cinema__lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, .7vw + 14px, 22px);
  line-height: 1.55;
  color: rgba(244,239,230,.78);
  margin: 0;
  max-width: 56ch;
}
.reel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1480px;
  margin: 0 auto;
}
.reel__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 2vw, 36px);
  align-items: end;
}
.reel__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(244,239,230,.55);
  padding-bottom: 14px;
  white-space: nowrap;
}
.reel__media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0e0c09;
  position: relative;
}
.reel__media .vid,
.reel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.reel__cap {
  display: grid;
  gap: 6px;
  text-align: right;
  align-self: end;
  padding-bottom: 14px;
  min-width: 220px;
}
.reel__t {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, .6vw + 14px, 22px);
  color: var(--ivory);
  line-height: 1.3;
  text-wrap: balance;
}
.reel__s {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(244,239,230,.45);
}
.reel__row:nth-child(even) {
  grid-template-columns: auto auto 1fr;
}
.reel__row:nth-child(even) .reel__cap {
  text-align: left;
  order: -1;
}
.reel__row:nth-child(even) .reel__num { order: 1; }
@media (max-width: 820px) {
  .reel__row,
  .reel__row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .reel__cap,
  .reel__row:nth-child(even) .reel__cap {
    text-align: left;
    order: 1;
    padding-bottom: 0;
    min-width: 0;
  }
  .reel__num,
  .reel__row:nth-child(even) .reel__num {
    order: 0;
    padding-bottom: 0;
  }
}

/* ── colophon ──────────────────────────────── */
.colophon {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bone);
}
.colophon__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.fact {
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr;
  gap: clamp(20px, 3vw, 56px);
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.fact:nth-child(odd)  { padding-right: clamp(20px, 3vw, 48px); border-right: 1px solid var(--rule); }
.fact:nth-child(even) { padding-left: clamp(20px, 3vw, 48px); }
.fact dt {
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey-storm);
  margin: 0;
}
.fact dd {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, .5vw + 14px, 22px);
  color: var(--ink);
  line-height: 1.4;
  text-wrap: pretty;
}
.fact .tbc {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--grey-quiet);
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; }
  .fact, .fact:nth-child(odd), .fact:nth-child(even) {
    grid-template-columns: 1fr;
    border-right: 0;
    padding: 18px 0;
    gap: 8px;
  }
}

/* ── closing ───────────────────────────────── */
.closing {
  padding: clamp(140px, 22vw, 280px) var(--pad-x);
  background: var(--bone);
  text-align: center;
}
.closing__inner {
  max-width: 980px;
  margin: 0 auto;
}
.closing__pre {
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey-storm);
  margin: 0 0 1.4em;
}
.closing__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 6vw + 8px, 110px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.closing__sig {
  margin-top: clamp(80px, 12vw, 160px);
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey-storm);
}

/* ── footer ────────────────────────────────── */
.foot {
  padding: clamp(40px, 6vw, 72px) var(--pad-x);
  background: var(--bone);
  border-top: 1px solid var(--rule);
}
.foot__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
  max-width: 1480px;
  margin: 0 auto;
}
.foot__brand img {
  height: 56px;
  width: auto;
  mix-blend-mode: multiply;
  opacity: .92;
}
.foot__legal {
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey-storm);
  text-align: right;
  display: grid;
  gap: 6px;
}
.foot__legal p { margin: 0; }
@media (max-width: 720px) {
  .foot__row { grid-template-columns: 1fr; text-align: left; }
  .foot__legal { text-align: left; }
}