/* Trianon · café e bar em Celas
   Direction: "the name as a monument" (taste seed 1459802594), type kept: Imbue + Newsreader.
   Palette: marble grey and oxblood, night deepens the oxblood. */

:root {
  --bg: #e3e2df;          /* marble */
  --surface: #d7d5d1;     /* marble, one step down */
  --ink: #7d0c14;         /* oxblood */
  --muted: #6c3d41;
  --field: #7d0c14;
  --field-ink: #ebebe9;
  --field-muted: #d9b9b6;
  --night: #24070a;

  --m: clamp(16px, 2.2vw, 32px);
  --gap: clamp(12px, 1.7vw, 24px);

  --f-display: 'Imbue', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
  --f-text: 'Newsreader', 'Iowan Old Style', Georgia, serif;

  --s-small: 15px;
  --s-body: clamp(17px, 0.98rem + 0.22vw, 19px);
  --s-head: clamp(32px, 1.5rem + 1.9vw, 52px);
  --s-big: clamp(56px, 6.4vw, 108px);
  --s-huge: clamp(64px, 9.4vw, 168px);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

@font-face { font-family: 'Imbue Fallback'; src: local('Times New Roman'); size-adjust: 72%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-text); font-size: var(--s-body); line-height: 1.5;
  font-optical-sizing: auto; font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
p, h1, h2, h3, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
html { scrollbar-color: var(--ink) var(--bg); scrollbar-width: thin; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--m); top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 12px 18px; text-decoration: none; transition: top .2s var(--ease-out); }
.skip:focus { top: 12px; }

.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

.tbc { font-size: var(--s-small); font-style: italic; color: var(--muted); white-space: nowrap; }
[data-theme="dark"] .tbc { color: var(--field-muted); }

.h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--s-head); line-height: 1; letter-spacing: -0.01em; font-variation-settings: 'opsz' 60; text-wrap: balance; }
.h3 { font-family: var(--f-text); font-weight: 500; font-size: var(--s-body); margin-bottom: 14px; }

/* ---------- buttons ---------- */
.btn {
  translate: calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px);
  display: inline-flex; align-items: center; gap: 14px; flex: none;
  padding: 15px 20px 15px 22px; min-height: 52px;
  background: var(--ink); color: var(--bg);
  font-family: var(--f-text); font-size: var(--s-body); font-weight: 500; text-decoration: none; letter-spacing: .005em;
  transition: transform 160ms var(--ease-out), background-color .25s ease;
}
.btn-light { background: var(--field-ink); color: var(--field); }
.btn .arw { width: 20px; height: 20px; transition: transform .35s var(--ease-out); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arw { transform: translateX(4px); }
  .btn:hover { background: color-mix(in srgb, var(--ink) 88%, #000); }
  .btn-light:hover { background: #fff; }
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 var(--m);
  color: var(--field-ink);
  transition: transform .6s var(--ease-drawer), background-color .35s ease, color .35s ease;
}
.nav.is-solid { background: var(--bg); color: var(--ink); }
.nav.is-solid.is-dark { background: var(--field); color: var(--field-ink); }
.nav.is-solid.is-clear { background: transparent; }
.nav.is-hidden { transform: translateY(-101%); }
.nav-name {
  font-family: var(--f-display); font-size: 30px; line-height: 1; text-decoration: none; letter-spacing: .02em; text-transform: uppercase;
  font-variation-settings: 'opsz' 60; opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .5s var(--ease-out);
}
.nav.is-past .nav-name { opacity: 1; transform: none; }
.nav-links { display: flex; gap: clamp(18px, 2.2vw, 36px); font-size: var(--s-small); }
.nav-links a { text-decoration: none; position: relative; padding: 6px 0; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav-menu { display: none; font-size: var(--s-body); padding: 10px 0; }
.nm-close { display: none; }
.sheet-open .nm-open { display: none; }
.sheet-open .nm-close { display: inline; }

.sheet {
  position: fixed; inset: 0; z-index: 45; background: var(--field); color: var(--field-ink);
  display: flex; flex-direction: column; justify-content: space-between; padding: 100px var(--m) 32px;
}
.sheet[hidden] { display: none; }
.sheet-links { display: flex; flex-direction: column; }
.sheet-links a { font-family: var(--f-display); font-size: clamp(48px, 14vw, 96px); line-height: 1.02; text-decoration: none; overflow: hidden; display: block; font-variation-settings: 'opsz' 90; }
.sheet-links a span { display: inline-block; }
.sheet-foot { display: grid; gap: 14px; font-size: var(--s-body); }

/* ---------- hero ---------- */
.hero {
  position: relative; height: 100svh; min-height: 600px;
  display: grid; grid-template-rows: 52fr 48fr; grid-template-columns: minmax(0, 1fr);
  background: var(--field); color: var(--field-ink); overflow: hidden;
}
.hero-photo { position: relative; overflow: hidden; background: #1b2738; }
.hp { position: absolute; inset: 0; }
.hp picture, .hp img, .hp video, .hp .vid { width: 100%; height: 100%; }
.hp img, .hp video { object-fit: cover; object-position: 50% 74%; }
.hp-photo-move { will-change: transform; }
.hp-scrim { position: absolute; inset: 0 0 auto 0; height: 160px; background: linear-gradient(rgba(10, 8, 14, .42), rgba(10, 8, 14, 0)); pointer-events: none; }
.vid { position: relative; width: 100%; height: 100%; }
.vid video { object-fit: cover; width: 100%; height: 100%; }
.vid video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.vid.is-playing video { opacity: 1; }

.hero-band { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--m) clamp(16px, 2.6vh, 28px); min-height: 0; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.hero-line { max-width: min(46ch, 100%); font-size: var(--s-body); line-height: 1.45; }
.status { display: block; margin-top: 6px; color: var(--field-muted); }
.status.is-open::before, .now-status.is-open::before { content: ''; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: currentColor; margin-right: .5em; vertical-align: .08em; }

.monument {
  --mono: calc((100vw - 2 * var(--m)) / 2.115);
  font-family: var(--f-display); font-weight: 340; font-variation-settings: 'opsz' 100;
  font-size: var(--mono-size, var(--mono)); line-height: 1; letter-spacing: -0.035em;
  white-space: nowrap; text-align: left;
  margin: calc(-0.135em + clamp(14px, 2.4vh, 26px)) 0 calc(-0.14em + 18px);
}
.mono-row { display: flex; justify-content: space-between; width: 100%; transform-origin: 50% 100%; will-change: transform; }
.mc { display: inline-block; overflow: hidden; padding-top: .1em; margin-top: -.1em; }
.mc:last-child, .fc:last-child { margin-right: .035em; }
.mc-in { display: inline-block; will-change: transform; }


/* desktop: tight monument cropped by the bottom edge, line and action on the photograph */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero { grid-template-rows: minmax(0, 1fr) auto; }
  .hero-band { padding: 0 var(--m); }
  .monument { margin: calc(-0.135em + 14px) 0 calc(-0.14em - 0.72em * var(--crop, .2)); }
  .hero-row { position: absolute; left: var(--m); right: var(--m); bottom: calc(100% + clamp(18px, 2.4vh, 28px)); z-index: 2; }
  .hp-scrim-b { position: absolute; inset: auto 0 0 0; height: 52%; background: linear-gradient(rgba(12, 6, 8, 0), rgba(12, 6, 8, .72)); pointer-events: none; }
}
@media (max-width: 899px), (max-aspect-ratio: 1/1) { .hp-scrim-b { display: none; } }

/* intro states (removed when the intro finishes or fails) */
.is-intro .mc-in { transform: translateY(104%); }
.is-intro .hero-photo { clip-path: inset(0 0 100% 0); }
.is-intro .hp-on { opacity: 0; }
.is-intro .hero-row, .is-intro .nav { opacity: 0; }

/* ---------- intro section ---------- */
section.opening {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(120px, 15vw, 220px) var(--m) clamp(120px, 14vw, 200px);
  align-items: end;
}
.intro-text { grid-column: 2 / span 5; display: grid; gap: 22px; max-width: 34em; }
.intro-text .h2 { margin-bottom: 18px; }
.p-lead { font-weight: 500; }
.intro-now { grid-column: 8 / span 5; display: grid; justify-items: start; gap: 10px; }
.now-label { font-size: var(--s-body); }
.now-clock { font-family: var(--f-display); font-size: var(--s-big); line-height: .9; font-variation-settings: 'opsz' 100; font-weight: 340; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0 0 4px; }
.now-clock .colon { animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.now-status { font-size: var(--s-body); font-weight: 500; }
.now-sun { color: var(--muted); }

/* ---------- day scene ---------- */
.day {
  --day-bg: var(--bg); --day-ink: var(--ink); --day-muted: var(--muted);
  position: relative; height: calc(var(--n) * 100svh);
  background: var(--day-bg); color: var(--day-ink);
}
.day { overflow: clip; }
.day-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.day-plate { display: flex; align-items: center; justify-content: center; padding: 92px var(--m) 32px; }
.dp-frame { position: relative; height: min(78svh, 52vw); aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--day-ink) 10%, var(--day-bg)); }
.dm-layer { position: absolute; inset: 0; will-change: clip-path; }
.dm-layer picture, .dm-layer img { width: 100%; height: 100%; }
.dm-layer img { object-fit: cover; will-change: transform; }
.day-side { display: flex; flex-direction: column; justify-content: space-between; padding: 100px var(--m) 32px clamp(16px, 3vw, 48px); min-height: 0; }
.day-top { display: grid; gap: 22px; }
.day-parts { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: var(--s-body); }
.day-parts li { color: var(--day-ink); position: relative; }
.day-parts li.on { font-weight: 600; }
.day-parts li.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; }
.day-mid { display: grid; gap: 18px; }
.day-time { font-family: var(--f-display); font-size: var(--s-big); line-height: .86; font-weight: 340; font-variation-settings: 'opsz' 100; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow: hidden; padding-bottom: .04em; }
.dt-roll { display: inline-block; }
.dt-roll .d { display: inline-block; }
.dm-stack { position: relative; min-height: 13.5em; max-width: 34em; }
.dm-text { position: absolute; inset: 0 0 auto 0; display: grid; gap: 12px; }
.js .dm-text:not([data-i="0"]) { opacity: 0; visibility: hidden; }
.dm-title { font-family: var(--f-display); font-weight: 400; font-size: var(--s-head); line-height: 1; font-variation-settings: 'opsz' 60; }
.dm-desc { max-width: 34ch; }
.dm-quote { margin-top: 10px; max-width: 40ch; }
.dm-quote blockquote p { font-style: italic; }
.dm-quote blockquote p::before { content: '“'; } .dm-quote blockquote p::after { content: '”'; }
.dm-quote figcaption { font-size: var(--s-small); color: var(--day-muted); margin-top: 6px; }
.day .tbc { color: var(--day-muted); }
.day-bottom { display: grid; gap: 22px; }
.day-rail { display: flex; justify-content: space-between; font-size: var(--s-small); font-variant-numeric: tabular-nums; position: relative; padding-top: 14px; }
.day-rail::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: color-mix(in srgb, var(--day-ink) 16%, transparent); }
.day-rail::after { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--day-ink); transform-origin: left; transform: scaleX(var(--rail, 0)); }
.day-rail li { color: var(--day-ink); }
.day-rail li.on { font-weight: 600; }
.day-cells { display: grid; grid-template-columns: 1fr 1fr; }
.cell { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 22px; text-decoration: none; font-size: var(--s-body); font-weight: 500; transition: transform 160ms var(--ease-out); }
.cell .arw { width: 20px; height: 20px; transition: transform .35s var(--ease-out); }
.cell-ink { background: var(--day-ink); color: var(--day-bg); }
.cell-soft { background: color-mix(in srgb, var(--day-ink) 13%, var(--day-bg)); color: var(--day-ink); }
.cell:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .cell:hover .arw { transform: translateX(5px); } }

.no-js .day { height: auto; }
.no-js .day-sticky { position: relative; height: auto; }

/* ---------- carta (line-up at one size) ---------- */
.carta { padding: clamp(140px, 14vw, 220px) var(--m) clamp(120px, 12vw, 180px); }
.carta-h { margin-bottom: 24px; }
.carta-list { font-family: var(--f-display); font-size: var(--s-head); line-height: 1.4; font-variation-settings: 'opsz' 48; font-weight: 400; }
.carta-part + .carta-part { margin-top: 72px; }
.carta-head { font: inherit; color: var(--muted); padding: 6px 0 12px; }
.carta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: baseline; }
.carta-note { color: var(--muted); }
.carta-foot { margin-top: 64px; max-width: 40ch; }

/* ---------- spread quotation ---------- */
.spread { background: var(--field); color: var(--field-ink); padding: clamp(140px, 14vw, 220px) var(--m); overflow: hidden; }
.sq { font-family: var(--f-display); font-weight: 340; font-size: var(--s-huge); line-height: .92; font-variation-settings: 'opsz' 100; letter-spacing: -0.02em; display: grid; gap: .3em; }
.sq-rest { margin-top: 56px; margin-left: auto; max-width: 30ch; font-size: var(--s-head); font-family: var(--f-display); font-variation-settings: 'opsz' 60; line-height: 1.08; text-align: right; }
.sq-line { display: flex; justify-content: space-between; gap: .25em; }
.sq-word { display: inline-block; will-change: transform; }
.sq-by { display: flex; justify-content: space-between; gap: 16px; margin-top: 72px; font-size: var(--s-body); color: var(--field-muted); }

/* ---------- casa: stacked cards ---------- */
.casa { position: relative; padding: clamp(110px, 10vw, 160px) var(--m) clamp(100px, 10vw, 160px); overflow: clip; }
.casa-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.casa-title { grid-column: 1 / span 7; font-family: var(--f-display); font-weight: 340; font-size: var(--s-huge); line-height: .9; letter-spacing: -0.02em; font-variation-settings: 'opsz' 100; }
.casa-lead { grid-column: 9 / span 4; max-width: 34ch; }
.cards { position: relative; }
.card { position: sticky; top: calc(84px + var(--k) * 14px); height: calc(100svh - 120px); max-height: 820px; margin: 0 0 18svh; }
.card:last-child { margin-bottom: 0; }
.card-in { position: relative; height: 100%; overflow: hidden; background: var(--night); transform-origin: 50% 0; will-change: transform; }
.card-media, .card-media picture, .card-media img { width: 100%; height: 100%; }
.card-media img { object-fit: cover; will-change: transform; }
.card-media > * { transition: transform 1.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover .card-media > * { transform: scale(1.035); } }
.card-shade { position: absolute; inset: 0; background: #12060a; opacity: 0; pointer-events: none; }
.card-cap {
  position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  padding: 120px clamp(20px, 3vw, 44px) clamp(20px, 3vw, 40px); color: var(--field-ink);
  background: linear-gradient(rgba(16, 6, 8, 0), rgba(16, 6, 8, .62));
}
.card-name { font-family: var(--f-display); font-weight: 400; font-size: var(--s-big); line-height: .95; font-variation-settings: 'opsz' 90; }
.card-desc { max-width: 30ch; text-align: right; }

/* ---------- history ---------- */
.hist { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(140px, 13vw, 200px) var(--m); align-items: center; background: var(--surface); }
.hist-letter { grid-column: 2 / span 4; display: grid; gap: 20px; }
.hist-letter .h2 { margin-bottom: 8px; }
.hist-small blockquote p { font-style: italic; }
.hist-small blockquote p::before { content: '“'; } .hist-small blockquote p::after { content: '”'; }
.hist-small figcaption, .hist-rating { font-size: var(--s-small); color: var(--muted); }
.hist-small figcaption { margin-top: 6px; }
.hist-big { grid-column: 7 / span 5; }
.hist-big p { font-family: var(--f-display); font-size: var(--s-head); line-height: 1.1; font-variation-settings: 'opsz' 60; text-wrap: balance; }
.hist-big p::before { content: '“'; } .hist-big p::after { content: '”'; }
.hist-big figcaption { margin-top: 22px; color: var(--muted); }

/* ---------- visit: address in display rows ---------- */
.visit { padding-top: 0; }
.vrow {
  --vs: clamp(40px, 6vw, 92px);
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  min-height: clamp(96px, 10.4vw, 150px); padding: 0 var(--m) clamp(16px, 1.6vw, 26px);
  font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 6vw, 92px); line-height: 1; letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 72; text-decoration: none; overflow: hidden;
}
.vrow .vtxt { display: inline-block; transition: transform .5s var(--ease-out); font: inherit; }
.vrow-a { background: var(--bg); }
.vrow-b { background: var(--surface); }
.vrow-go { background: var(--field); color: var(--field-ink); }
.vgo { flex: none; display: grid; place-items: center; width: .9em; height: .9em; border-radius: 50%; background: var(--field-ink); color: var(--field); margin-bottom: .08em; transition: transform .5s var(--ease-out); }
.vgo .arw { width: 42%; height: 42%; }
a.vrow:active .vtxt { transform: translateX(6px) scale(.99); }
@media (hover: hover) and (pointer: fine) {
  a.vrow:hover .vtxt { transform: translateX(14px); }
  .vrow-go:hover .vgo { transform: rotate(-45deg); }
}
.tbc-lg { font-family: var(--f-text); font-size: var(--s-small); vertical-align: .9em; }
.vlogo { width: clamp(64px, 6.6vw, 96px); height: auto; border-radius: 50%; flex: none; margin-bottom: .06em; }
.visit-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 72px var(--m) 120px; }
.visit-meta > div:first-child { grid-column: 2 / span 4; }
.visit-meta > div:last-child { grid-column: 7 / span 5; display: grid; gap: 8px; align-content: start; }
.hours div { display: flex; justify-content: space-between; gap: 24px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.hours dt { color: var(--ink); }
.visit-meta .tbc { display: block; margin-top: 8px; }

/* ---------- rest: the terrace at night ---------- */
.rest { position: relative; height: 86svh; overflow: hidden; background: var(--night); }
.rest-media { position: absolute; inset: -6% 0; }
.rest-media picture, .rest-media img, .rest-media .vid, .rest-media video { width: 100%; height: 100%; }
.rest-media img, .rest-media video { object-fit: cover; object-position: 50% 60%; filter: brightness(1.28) contrast(1.04); }

/* ---------- footer: invitation over a cropped name ---------- */
.foot { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--field); color: var(--field-ink); padding: clamp(96px, 10vw, 150px) var(--m) 0; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.foot-invite { grid-column: 1 / span 7; display: grid; gap: 32px; justify-items: start; }
.foot-line { font-family: var(--f-display); font-weight: 400; font-size: var(--s-big); line-height: .95; font-variation-settings: 'opsz' 90; max-width: 9em; }
.foot-links { grid-column: 10 / span 3; display: grid; gap: 10px; align-content: start; font-size: var(--s-body); }
.foot-legal { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: auto; padding-top: 64px; font-size: var(--s-small); color: var(--field-muted); position: relative; z-index: 1; }
.foot-name {
  font-family: var(--f-display); font-weight: 340; font-variation-settings: 'opsz' 100;
  font-size: calc((100vw - 2 * var(--m)) / 2.115); line-height: 1; letter-spacing: -0.035em;
  white-space: nowrap; display: flex; justify-content: space-between; transform-origin: 50% 100%;
  /* the bottom third of the letters is cut by the page edge */
  margin: calc(28px - 0.135em) 0 calc(-0.14em - 0.72em * .3);
}
.fc { display: inline-block; will-change: transform; }

/* ---------- phone ---------- */
@media (max-width: 899px) {
  .nav { height: 60px; }
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .nav-name { font-size: 26px; }

  .hero { grid-template-rows: 52fr 48fr; }
  .hero-band { padding-top: 20px; }
  .hero-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-line { font-size: 17px; }
  .btn { min-height: 50px; }

  section.opening { grid-template-columns: 1fr; row-gap: 104px; padding: 96px var(--m) 110px; }
  .intro-text, .intro-now { grid-column: 1; }
  .intro-text { max-width: none; }

  .day-sticky { grid-template-columns: 1fr; grid-template-rows: 46svh 1fr; }
  .day-plate { padding: 68px var(--m) 0; }
  .dp-frame { height: 100%; width: 100%; aspect-ratio: auto; }
  .day-side { padding: 16px var(--m) 14px; gap: 10px; }
  .day-top { gap: 10px; }
  .day-h { font-size: 26px; }
  .day-parts { font-size: 16px; gap: 4px 18px; }
  .day-time { font-size: clamp(54px, 17vw, 84px); }
  .day-mid { gap: 8px; }
  .dm-stack { min-height: 11.5em; }
  .dm-title { font-size: 26px; }
  .dm-text { gap: 6px; font-size: 16px; }
  .dm-quote { margin-top: 2px; font-size: 15px; }
  .day-rail { display: none; }
  .day-cells { grid-template-columns: 1fr 1fr; }
  .cell { height: 52px; padding: 0 16px; font-size: 16px; }

  .carta-list { line-height: 1.3; }

  .carta-part + .carta-part { margin-top: 48px; }

  .sq { font-size: 15vw; gap: .25em; }
  .sq-rest { font-size: 26px; margin-top: 36px; }
  .sq-by { flex-direction: column; gap: 4px; font-size: 15px; }
  .sq-by span:nth-child(2) { align-self: center; }
  .sq-by span:nth-child(3) { align-self: flex-end; }

  .casa-head { grid-template-columns: 1fr; row-gap: 20px; }
  .casa-title, .casa-lead { grid-column: 1; }
  .card { top: calc(72px + var(--k) * 10px); height: 72svh; margin-bottom: 12svh; }
  .card-cap { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 90px; }
  .card-desc { text-align: left; }

  .hist { grid-template-columns: 1fr; row-gap: 64px; }
  .hist-letter, .hist-big { grid-column: 1; }
  .hist-big p { font-size: 24px; }

  .vrow { font-size: 9.4vw; min-height: 84px; padding-bottom: 14px; }
  .vlogo { width: 52px; }
  .visit-meta { grid-template-columns: 1fr; row-gap: 48px; padding: 56px var(--m) 96px; }
  .visit-meta > div:first-child, .visit-meta > div:last-child { grid-column: 1; }

  .rest { height: 64svh; }

  .foot-top { grid-template-columns: 1fr; row-gap: 48px; }
  .foot-invite, .foot-links { grid-column: 1; }
  .foot-line { font-size: 12vw; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 16px; }
  .foot-legal { flex-direction: column; gap: 8px; }
  .foot-name { font-size: calc((100vw - 2 * var(--m)) / 2.115 * 1.25); justify-content: flex-start; width: max-content; }
}

@media (max-width: 640px) {
  .carta-list { font-size: 26px; }
  .carta-row { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
  .carta-note { font-family: var(--f-text); font-size: var(--s-body); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* menu open: the bar sits on the oxblood sheet */
.sheet-open .nav { background: transparent !important; color: var(--field-ink) !important; transform: none !important; }
.sheet-open .nav .nav-name { opacity: 1; transform: none; }


/* ---------- night mode ---------- */
html[data-mode="dark"] {
  --bg: #150b0c;
  --surface: #211314;
  --ink: #e9e7e3;
  --muted: #bba4a2;
  --field: #7d0c14;
  --field-ink: #ebebe9;
  --field-muted: #dcbdba;
  --night: #0d0506;
  color-scheme: dark;
}
html[data-mode="dark"] .vlogo { box-shadow: 0 0 0 1px rgba(233, 231, 227, .14); }

/* the toggle: a sun whose core grows into a moon while the rays turn away */
.mode { position: relative; display: grid; place-items: center; width: 42px; height: 42px; margin-left: clamp(10px, 1.6vw, 22px); border-radius: 50%; color: inherit; translate: calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px); transition: transform 160ms var(--ease-out), background-color .3s ease; }
.mode:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .mode:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }
.mode svg { width: 22px; height: 22px; overflow: visible; }
.tg-core { transform-box: fill-box; transform-origin: center; transform: scale(.5); transition: transform .85s cubic-bezier(.34, 1.36, .64, 1); }
.tg-cut { transform: translate(9px, -9px); transition: transform .8s var(--ease-io); }
.tg-rays { transform-box: view-box; transform-origin: 12px 12px; transition: transform .75s var(--ease-out), opacity .5s ease; }
/* the icon follows the button state, which flips the moment it is pressed */
.mode[aria-pressed="true"] .tg-core { transform: scale(1); }
.mode[aria-pressed="true"] .tg-cut { transform: translate(0, 0); transition-delay: .12s; }
.mode[aria-pressed="true"] .tg-rays { transform: rotate(-120deg) scale(.4); opacity: 0; }
/* night mode: the band under the facade goes from oxblood to night */
html[data-mode="dark"] .hero { background: #120809; }
.nav { justify-content: flex-start; }
.nav-name { margin-right: auto; }

/* theme change without view transitions: colours ease across */
.mode-anim, .mode-anim *, .mode-anim *::before, .mode-anim *::after { transition: background-color .6s ease, color .6s ease, fill .6s ease !important; }

/* page and theme transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 420ms cubic-bezier(.77, 0, .175, 1) both vt-out; }
::view-transition-new(root) { animation: 650ms cubic-bezier(.23, 1, .32, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-1.5%) scale(.99); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(1.5%); } }
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-theme::view-transition-new(root) { z-index: 2; }

/* a second visit in the same session: the facade is already lit, only the name rises */
.is-quick.is-intro .hero-photo { clip-path: none; }
.is-quick.is-intro .hp-on { opacity: 1; }
.is-quick.is-intro .hero-row, .is-quick.is-intro .nav { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .tg-core, .tg-cut, .tg-rays { transition: none; }
}