/* Versalis: tokens and components shared by every page.
   The floor itself is drawn by floor.js. This file is everything around it. */

:root {
  /* Colour. The floor supplies the warmth, so the page stays out of its way. */
  --night:     #0d1210;   /* the unlit room. floor.js fades the scene to exactly this */
  --linen:     #eceee8;   /* the tablecloth: ground for everything you read */
  --ink:       #18211d;   /* text on linen */
  --bottle:    #1f3a2e;   /* the one action colour */
  --brass:     #b8965a;   /* hairlines and small accents on night */
  --brass-ink: #7d5f2c;   /* brass, dark enough to read on linen */
  --line:      color-mix(in srgb, var(--ink) 16%, transparent);
  --quiet:     color-mix(in srgb, var(--ink) 68%, var(--linen));

  /* Type, after the bar card Versalis printed about 1938: the name in a Bodoni, the rest in a plain grotesque */
  --serif: "Bodoni Moda", Didot, "Bodoni 72", serif;   /* loaded at optical size 20: the display cut loses its hairlines, and with them hyphens and the bar of the A */
  --sans:  "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --step--1: .875rem;                         /* 14 small print, captions */
  --step-0:  1.125rem;                        /* 18 body */
  --step-1:  1.3125rem;                       /* 21 */
  --step-2:  1.5rem;                          /* 24 lede */
  --step-3:  clamp(1.75rem, 3.5vw, 2.25rem);  /* 36 headings, years */
  --step-4:  clamp(2.25rem, 6vw, 3rem);       /* 48 section titles */
  --step-5:  clamp(3rem, 9vw, 4.5rem);        /* 72 page titles */

  /* Space */
  --gutter:  clamp(16px, 4vw, 48px);
  --measure: 62ch;
  --wide:    72rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--linen); color: var(--ink); font: 400 var(--step-0)/1.6 var(--sans); }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: inherit; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .28em; }
a:hover { text-decoration-thickness: 2px; }
a[href^="tel:"] { white-space: nowrap; }   /* a phone number never breaks across lines */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
[id] { scroll-margin-top: 1rem; }

.on-night { background: var(--night); color: var(--linen); color-scheme: dark; }

/* ---------- Navigation ---------- */
.nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem 2rem; padding: 1.25rem var(--gutter); font-size: var(--step--1); letter-spacing: .02em; }
.nav ul { display: flex; flex-wrap: wrap; gap: .5rem clamp(1rem, 3vw, 2rem); margin: 0; padding: 0; list-style: none; }
.nav a { text-decoration: none; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; }
.nav__brand { font: 600 1.275rem/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
/* a page's own header, arranged like the landing page's once the name has docked: address, name, links */
.nav--letterhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 4rem; padding-block: .5rem; border-bottom: 1px solid var(--line); }
.nav--letterhead .nav__brand { grid-area: 1 / 2; }
.nav--letterhead > span { grid-area: 1 / 1; }
.nav--letterhead ul { grid-area: 1 / 3; justify-content: end; }
@media (max-width: 64rem) {
  .nav--letterhead { grid-template-columns: auto 1fr; row-gap: .9rem; padding-block: 1rem .6rem; }
  .nav--letterhead .nav__brand { grid-area: 1 / 1 / 2 / -1; justify-self: center; }
  .nav--letterhead > span { grid-area: 2 / 1; }
  .nav--letterhead ul { grid-area: 2 / 2; }
}

/* ---------- The floor ---------- */
/* A still of the room shows at once. The live canvas fades in over it when it is ready.
   The stills are made by posters.mjs from the live scene, at the framings below. */
.floor-view { position: absolute; inset: 0; background: var(--night) center / cover no-repeat; }
.floor-view[data-floor="hero"] { background-image: url(assets/room-wide.webp); }
@media (max-aspect-ratio: 1/1) { .floor-view[data-floor="hero"] { background-image: url(assets/room-tall.webp); } }
.floor-view[data-floor="plate"] { background-image: url(assets/room-plate.webp); }
.floor-view canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; touch-action: pan-y; }
.floor-view.is-lit canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .floor-view canvas { transition: none; } }
/* shown instead of the floor when the page cannot load it */
.floor-view[data-note]::after { content: attr(data-note); position: absolute; inset: 0; display: grid; place-content: center; padding: 20% 12%; text-align: center; font-size: var(--step--1); color: color-mix(in srgb, var(--linen) 70%, var(--night)); }
/* set into a page like a photograph */
.floor-view--plate { position: relative; inset: auto; aspect-ratio: 4 / 3; }

/* ---------- Landing hero ---------- */
.hero { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 100svh; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 24%; background: linear-gradient(to bottom, color-mix(in srgb, var(--night) 88%, transparent), transparent); pointer-events: none; }
@media (max-width: 40rem) { .hero::before { height: 20%; background: linear-gradient(to bottom, var(--night) 30%, transparent); } }   /* phones look down on the ceiling globes: keep them out from behind the nav */
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to top, var(--night), transparent); pointer-events: none; }
.hero > .nav { position: relative; z-index: 1; }
.hero__foot {
  position: relative; z-index: 1; grid-row: 3;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem;
  padding: 0 var(--gutter) clamp(1.5rem, 4svh, 3rem);
  pointer-events: none;                    /* the floor stays draggable underneath */
}
.hero__foot a { pointer-events: auto; }
/* the name as the card sets it: spaced capitals, in Lithuanian quotation marks, under a line of small spaced capitals */
.lockup__kind { margin: 0 0 1em; font: 400 var(--step--1)/1 var(--sans); letter-spacing: .44em; text-transform: uppercase; }
.wordmark { margin: 0 0 .4em; font: 600 clamp(2rem, min(5.6vw, 9svh), 4.25rem)/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.wordmark a { color: inherit; text-decoration: none; }
.cue { display: none; }
.wordmark::before { content: "\201E"; }
.wordmark::after { content: "\201C"; }

/* Phones: one centred column, like the cover of the 1938 bar card. The button spans the width, within reach of a thumb. */
@media (max-width: 40rem) {
  .nav { justify-content: center; padding-block: .75rem; }
  .nav > span { display: none; }                      /* the address is under Kontaktai and in the footer */
  .nav--letterhead { grid-template-columns: 1fr; row-gap: .3rem; }
  .nav--letterhead ul { grid-area: 2 / 1; }
  .nav ul { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  .nav a { display: inline-block; padding-block: .6rem; }
  .hero__foot { flex-flow: column nowrap; align-items: stretch; gap: 1.75rem; padding-bottom: 1.5rem; text-align: center; }
  .lockup__kind { text-indent: .44em; }               /* tracking leaves space after the last letter: push back to centre */
  .wordmark { margin-bottom: 0; font-size: clamp(2rem, 9.4vw, 2.75rem); text-indent: .2em; }
  .hero__foot .button { display: block; padding-block: 1.05rem; }
}

/* ---------- Landing, staged ----------
   With scripts on, the landing page has two states and a timed transition between them, in place of a page scroll.
   Hero: the room fills the window and nothing else exists. Page: the room has dissolved, the name has travelled
   up into the header, and the page is there to read. floor.js switches <html class="is-open">.
   Without scripts none of this applies and the page simply scrolls. */
html.staged {
  --bar: 4rem;                                        /* header height once the name has docked */
  --brand-row: 0rem;                                  /* extra row for the name when the header is stacked */
  --foot: clamp(1.5rem, 4svh, 3rem);                  /* how far the hero's bottom row sits from the edge */
  --name: clamp(2rem, min(5.6vw, 9svh), 4.25rem);     /* size of the name in the hero */
  --dock: .3;                                         /* its scale in the header */
  --move: 1.15s;
  --ease: cubic-bezier(.7, 0, .2, 1);
  overflow-y: scroll; overscroll-behavior-y: none;    /* a scrollbar gutter in both states, so nothing shifts sideways */
  background: var(--night); color-scheme: dark;
  scrollbar-color: color-mix(in srgb, var(--linen) 30%, transparent) transparent;
  transition: background-color var(--move) ease;
}
html.staged.is-open { background: var(--linen); color-scheme: light; scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent; }
.staged body { background: none; }
.staged [id] { scroll-margin-top: calc(var(--bar) + 1rem); }

/* the room */
.staged .hero { position: fixed; inset: 0; z-index: 5; display: block; min-height: 0; background: none; }
.staged.is-open .hero { pointer-events: none; }
.staged .floor-view, .staged .hero::before, .staged .hero::after { transition: opacity var(--move) ease, transform calc(var(--move) * 1.3) var(--ease); }
.staged.is-open .floor-view { opacity: 0; transform: scale(1.06); }
.staged.is-open .hero::before, .staged.is-open .hero::after { opacity: 0; }

/* the header: clear over the room, a letterhead over the page */
.staged .hero > .nav { position: fixed; inset: 0 0 auto; z-index: 11; height: var(--bar); align-items: center; padding-block: 0; pointer-events: auto; transition: color var(--move) var(--ease); }
.staged .hero > .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--linen); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity calc(var(--move) * .5) ease; }
.staged.is-open .hero > .nav { color: var(--ink); }
.staged.is-open .hero > .nav::before { opacity: 1; transition-delay: calc(var(--move) * .5); }

/* the name: laid out at hero size, carried and scaled by transform alone, so it stays sharp and never reflows */
.staged .hero__foot, .staged .hero__foot > div { display: contents; }
.staged .wordmark {
  position: fixed; left: 0; top: 0; z-index: 12; margin: 0; font-size: var(--name); transform-origin: 50% 0; will-change: transform;
  transform: translate(var(--gutter), calc(100svh - var(--foot) - var(--name))) scale(1);
  transition: transform var(--move) var(--ease), color var(--move) var(--ease);
}
.staged.is-open .wordmark { transform: translate(calc(50vw - 50%), calc((var(--bar) - var(--brand-row) - var(--name) * var(--dock)) / 2)) scale(var(--dock)); color: var(--ink); }
.staged .wordmark::before, .staged .wordmark::after { transition: opacity calc(var(--move) * .5) ease; }
.staged.is-open .wordmark::before, .staged.is-open .wordmark::after { opacity: 0; }   /* in the header the name stands without its quotation marks */

/* what stays behind in the room: leaves early, returns late */
.staged .lockup__kind { position: fixed; left: var(--gutter); bottom: calc(var(--foot) + var(--name) + 1.1rem); margin: 0; }
.staged .hero__foot .button { position: fixed; right: var(--gutter); bottom: var(--foot); }
.staged .cue { display: block; position: fixed; left: calc(50% - 1.375rem); bottom: var(--foot); width: 2.75rem; height: 2.75rem; border: 0; background: none; color: inherit; cursor: pointer; pointer-events: auto; }
.cue::before { content: ""; position: absolute; left: 50%; top: 30%; width: .7rem; height: .7rem; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateX(-50%) rotate(45deg); }
.staged .lockup__kind, .staged .hero__foot .button, .staged .cue { z-index: 2; transition: opacity calc(var(--move) * .4) ease calc(var(--move) * .6), visibility 0s; }   /* above the hero's bottom shade */
.staged.is-open .lockup__kind, .staged.is-open .hero__foot .button, .staged.is-open .cue { opacity: 0; visibility: hidden; transition: opacity calc(var(--move) * .4) ease, visibility 0s linear calc(var(--move) * .4); }

/* the page: absent in the room, rises into place as the room goes */
.staged .page { display: none; padding-top: var(--bar); }
.staged.is-open .page { display: block; animation: arrive var(--move) var(--ease) calc(var(--move) * .25) both; }
.staged.is-closing .page { display: block; animation: leave calc(var(--move) * .45) ease both; }
@keyframes arrive { from { opacity: 0; transform: translateY(3rem); } }
@keyframes leave { to { opacity: 0; } }
.staged.no-motion *, .staged.no-motion *::before, .staged.no-motion *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { html.staged { --move: .01s; } }

/* narrower than a letterhead: the name takes a row of its own above the links */
@media (max-width: 64rem) {
  html.staged { --bar: 5.5rem; --brand-row: 2.3rem; }
  .staged .hero > .nav { align-items: start; padding-top: .85rem; }
  .staged .hero > .nav > * { transition: transform var(--move) var(--ease); }
  .staged.is-open .hero > .nav > * { transform: translateY(var(--brand-row)); }
}
@media (max-width: 40rem) {
  html.staged { --name: clamp(2rem, 9.4vw, 2.75rem); --dock: .46; --foot: 1.5rem; --cta: 3.5rem; }
  .staged .hero > .nav { padding-top: .2rem; }
  .staged .wordmark { transform: translate(calc(50vw - 50%), calc(100svh - var(--foot) - var(--cta) - 1.75rem - var(--name))) scale(1); }
  .staged .lockup__kind { left: 0; right: 0; bottom: calc(var(--foot) + var(--cta) + 1.75rem + var(--name) + 1.1rem); }
  .staged .hero__foot .button { left: var(--gutter); right: var(--gutter); bottom: var(--foot); display: grid; place-items: center; height: var(--cta); padding-block: 0; }
  .staged .cue { display: none; }                     /* on a phone the button is the way in, and a swipe */
}

/* ---------- Actions ---------- */
.button {
  display: inline-block; padding: .8rem 1.7rem; border: 1px solid currentColor; border-radius: 0;
  background: transparent; color: inherit; font: 500 var(--step-0)/1.2 var(--sans); letter-spacing: .02em;
  text-align: center; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.button:hover { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.on-night .button:hover { background: var(--linen); border-color: var(--linen); color: var(--night); }
.button--solid { background: var(--bottle); border-color: var(--bottle); color: var(--linen); }

/* ---------- Landing sections ---------- */
.section { display: grid; gap: 2rem 4rem; max-width: var(--wide); margin-inline: auto; padding: clamp(4rem, 10vw, 7.5rem) var(--gutter); }
.section + .section { border-top: 1px solid var(--line); }
@media (min-width: 52rem) { .section { grid-template-columns: 1fr 2.4fr; } }
.section__title { font: italic 400 var(--step-4)/1.05 var(--serif); }
.note { margin-top: 1rem; font-size: var(--step--1); color: var(--quiet); }
.label { margin-bottom: .6rem; font: 500 var(--step-0)/1.3 var(--sans); color: var(--brass-ink); }

/* menu card */
.menu { display: grid; gap: 2.5rem 3rem; align-content: start; }
@media (min-width: 40rem) { .menu { grid-template-columns: 1fr 1fr; } }
.menu ul { margin: 0; padding: 0; list-style: none; }
.dish { display: flex; align-items: baseline; gap: .6rem; padding-block: .3rem; }
.dish::before { content: ""; order: 1; flex: 1; min-width: 1.5rem; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 35%, transparent); }
.dish > :last-child { order: 2; font-variant-numeric: tabular-nums; }

/* reservation form */
/* date, time and guests share a row; name and phone share the next; the button gets a row to itself */
.booking { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.75rem 2rem; }
.booking > .field { grid-column: span 2; }
.booking > .field--wide { grid-column: span 3; }
.booking__send { grid-column: 1 / -1; margin-top: .5rem; }
@media (max-width: 40rem) {
  .booking > .field { grid-column: span 3; }
  .booking > .field--date, .booking > .field--wide { grid-column: 1 / -1; }
  .booking__send .button { width: 100%; }
}
.field { display: grid; gap: .35rem; font-size: var(--step--1); color: var(--quiet); }
.field input, .field select {
  width: 100%; height: 2.6rem; padding: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: var(--step-0);
}
.field select {
  appearance: none; padding-right: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%2318211d'/%3E%3C/svg%3E") no-repeat right .2rem center;
}
.field input:focus-visible, .field select:focus-visible { outline: none; border-bottom: 2px solid var(--bottle); }

/* visit */
.visit { display: grid; gap: 2rem 3rem; margin: 0; }
@media (min-width: 40rem) { .visit { grid-template-columns: 1fr 1fr; } }
.visit dd { margin: 0; }

.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 2.5rem var(--gutter); font-size: var(--step--1); }
.footer p { margin: 0; color: color-mix(in srgb, var(--linen) 70%, var(--night)); }

/* ---------- History ---------- */
.page-head { max-width: var(--wide); margin-inline: auto; padding: clamp(3rem, 8vw, 6rem) var(--gutter) 1rem; }
.page-head h1 { max-width: 14ch; margin-bottom: 2rem; font: italic 400 var(--step-5)/1 var(--serif); }
.lede { max-width: 40ch; font: 400 var(--step-2)/1.5 var(--serif); }

.history { display: grid; gap: 3rem 5rem; max-width: var(--wide); margin-inline: auto; padding: 2rem var(--gutter) 6rem; }
.dial { max-width: 26rem; }
.dial__year { margin: 1.25rem 0 .25rem; font: 400 var(--step-5)/1 var(--serif); }
.dial__name { margin: 0; font: italic 400 var(--step-2)/1.2 var(--serif); color: var(--brass-ink); }
@media (min-width: 60rem) {
  .history { grid-template-columns: 24rem minmax(0, 1fr); }
  .dial { position: sticky; top: 10vh; align-self: start; }
}

.chapter + .chapter { margin-top: 4.5rem; }
.chapter h2 { margin-bottom: 1.5rem; font: italic 400 var(--step-3)/1.15 var(--serif); }
.timeline { margin: 0; padding: 0; list-style: none; }
.entry { display: grid; gap: .25rem 1.5rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 36rem) { .entry { grid-template-columns: 7rem minmax(0, 1fr); } }
.entry h3 { font: 400 var(--step-3)/1.1 var(--serif); color: var(--brass-ink); }
.entry p:last-child { margin-bottom: 0; }

.quote { margin: 2.5rem 0 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { max-width: 28ch; margin: 0; font: italic 400 var(--step-3)/1.3 var(--serif); }
.quote figcaption { max-width: var(--measure); margin-top: 1rem; font-size: var(--step--1); color: var(--quiet); }

.sources { margin-top: 5rem; font-size: var(--step--1); color: var(--quiet); }
.sources ul { padding-left: 1.1rem; }
.sources li { margin-bottom: .4rem; }