/* Osteria Sera: shared styles for every page. Loads after scrollcraft.css (the engine, never edited).
   Look = hero option 3 "The pour" (picked 2026-10-27): warm near-black, bone text, rucola green,
   one family (Archivo), condensed uppercase for display. */

/* Archivo, hosted on the site (fonts/, SIL Open Font License): no request to Google, so no visitor's
   IP address goes there. The Latin set covers every character on the site, £ and Italian accents too.
   Every page preloads this file in its head. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-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 {
  --sc-canvas: #0e0d0a;
  --sc-surface: #191712;
  --sc-ink: #f1ede4;
  --sc-ink-soft: #ada596;
  --sc-accent: #a3c464;          /* rucola green: buttons, marks, the current course */
  --sc-accent-ink: #11140b;
  --accent-hover: #b4d277;
  --paper: #efe9dc;               /* light ground (the printed-menu look) */
  --paper-ink: #1d1b15;
  --paper-soft: #5c574a;
  --accent-on-paper: #46601d;     /* same green, darker, for text on paper */
  --error: #ff8f73;               /* form errors (forms.css) */
  --field-line: #6c675e;          /* field borders: 3:1 against the dark ground */

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Archivo", system-ui, sans-serif;
  --sc-shadow-color: 40 30% 3%;
  --bar-h: 5.25rem;

  /* Wide screens: past 1920px the content keeps the width it has at 1920 (109rem), centred, while
     photos, bands and the course bar still run to the edges. Every page lays out with --sc-gutter,
     so widening the gutter does it everywhere; up to 1920 nothing changes (--edge is the engine's
     own gutter). */
  --edge: clamp(1.25rem, 5vw, 5.5rem);
  --page-max: 109rem;
  --sc-gutter: max(var(--edge), (100vw - var(--page-max)) / 2);
}
/* Big, sharp monitors (2560 x 1440 and up, at 100%): their pixels are smaller, so everything set in
   rem (text, spacing, the column) grows an eighth. Zooming in still works: the step drops away. */
@media (min-width: 2200px) and (min-height: 1200px) { html { font-size: 112.5%; } }
/* Short screens (a phone on its side): a slimmer header, so it doesn't take a fifth of the screen. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --bar-h: 3.75rem; }
  .site-head .wordmark { font-size: 1.75rem; }
}

/* Display type: Archivo squeezed to its narrowest width, heavy, uppercase. */
.poster { font-family: var(--sc-font-display); font-weight: 850; font-stretch: 62%; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.005em; text-wrap: balance; }
/* No one-word last lines (playbook 8.7). Browsers without text-wrap: pretty get nav.js's fallback. */
:where(p, li, dd, dt, figcaption, summary, h1, h2, h3) { text-wrap: pretty; }
.caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; font-weight: 500; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; }
.skip:focus { top: 1rem; }

/* The notice bar (content/hours.json "notice", written by tools/build-parts.mjs): a note pinned above
   the header, on paper like the printed menu. nav.js measures it (--notice-h) and, where the header
   is fixed (Home), keeps the header just under it until it has scrolled away (--notice-off). */
.notice { position: relative; z-index: calc(var(--sc-z-chrome) + 1); background: var(--paper); color: var(--paper-ink); }
.notice p { margin: 0; padding: 0.7rem var(--sc-gutter); font-size: 0.88rem; line-height: 1.45; text-align: center; text-wrap: balance; }
.notice a { margin-left: 0.4rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
:root:has(.notice:not([hidden])) { --notice-h: 2.65rem; --notice-off: var(--notice-h); }

/* A phone crop (tools/build-images.mjs) wraps a photo in <picture>; the wrapper takes no space of its own,
   so the photo's own styles work as before. */
picture { display: contents; }

/* The focus ring is rucola green, too faint on paper (1.6:1): there it turns dark. */
:where(.notice, .letter, .doc-note, .set-menus, .print) :focus-visible { outline-color: var(--paper-ink); }

/* Header: wordmark, four links, the one action. Over the photo on Home, on the ground elsewhere. */
.site-head { position: relative; z-index: var(--sc-z-chrome); display: flex; align-items: center; gap: 2.75rem; height: var(--bar-h); padding: 0 var(--sc-gutter); }
.site-head--over { position: absolute; top: 0; left: 0; right: 0; }
.wordmark { font-weight: 850; font-stretch: 62%; font-size: 2.1rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; }
.site-nav { display: flex; gap: 2.25rem; margin-left: auto; }
.site-nav a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; font-weight: 500; opacity: 0.86; transition: opacity var(--sc-d-fast) var(--sc-ease-out); }
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
/* Tap areas of 44px or more around the logo and the links (on a tablet they were 21px tall). The
   padding is cancelled by a negative margin, so nothing moves. */
.site-head .wordmark { padding-block: calc((2.75rem - 1em) / 2); margin-block: calc((1em - 2.75rem) / 2); }
.site-nav a { padding: 0.8rem 0.5rem; margin: -0.8rem -0.5rem; }

/* Buttons. One label per intent: "Book a table" everywhere. */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 3.25rem; padding: 0 1.6rem; border: 0; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 50%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
}
.site-head .btn { height: 2.75rem; padding: 0 1.25rem; font-size: 0.82rem; }

/* The live hours line ("Open today · 17:30 to 23:00"). */
.hours-now { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }
.hours-now i { width: 8px; height: 8px; border-radius: 50%; background: #74d38a; box-shadow: 0 0 0 4px rgb(116 211 138 / 0.18); }
.hours-now.is-closed i { background: var(--sc-ink-soft); box-shadow: none; }

/* The week's opening hours (hours.js fills the rows), today marked. */
.hours-table { width: 100%; margin-top: 1.25rem; border-collapse: collapse; font-variant-numeric: normal; }
.hours-table th, .hours-table td { padding: 0.8rem 0; box-shadow: 0 1px 0 var(--sc-hairline); text-align: left; font-weight: 400; color: var(--sc-ink-soft); }
.hours-table td { text-align: right; }
.hours-table tr[aria-current] th, .hours-table tr[aria-current] td { color: var(--sc-ink); font-weight: 600; }
.hours-table tr[aria-current] th::after { content: "Today"; margin-left: 0.75rem; padding: 0.15rem 0.45rem; border-radius: 3px; background: var(--sc-accent); color: var(--sc-accent-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.15em; }

/* Footer: where, how to reach us, when, the page links, and the concept note. */
.site-foot { padding: clamp(4rem, 7vw, 7rem) var(--sc-gutter) 2rem; background: var(--sc-surface); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.site-foot__main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.site-foot .wordmark { color: var(--sc-ink); font-size: clamp(3.5rem, 6vw, 6rem); }
.site-foot h2 { margin: 0 0 0.9rem; color: var(--sc-ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; }
.site-foot p, .site-foot address { margin: 0; font-style: normal; line-height: 1.75; }
.site-foot a { color: var(--sc-ink); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot__links { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.site-foot__end { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: clamp(3rem, 5vw, 5rem); padding-top: 1.5rem; box-shadow: 0 -1px 0 var(--sc-hairline); font-size: var(--sc-t-xs); }
/* On touch screens the footer's links get room for a finger: the page list is 44px a link, and the
   phone, email and opening-hours links get a taller tap area without moving their lines. */
@media (pointer: coarse) {
  .site-foot__links { gap: 0; }
  .site-foot__links a { display: block; padding-block: 0.7rem; }
  .site-foot :is(address, p) a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
}

/* The "Pages" button (phones only, nav.js) and the quick bar (phones only): hidden on bigger screens. */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0 -0.6rem 0 auto; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.45rem; height: 2px; background: currentColor; transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out); }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }
.quick-bar { display: none; }

/* ---- Tablet (1099px and narrower): a tighter header (it must fit down to 641px), the footer in two columns ---- */
@media (max-width: 1099px) {
  .site-head { gap: 1.25rem; }
  .site-nav { gap: 1.4rem; }
  .site-nav a { white-space: nowrap; letter-spacing: 0.06em; }
  .site-head .btn { padding: 0 1rem; }
  .site-foot__main { grid-template-columns: 1fr 1fr; }
  .site-foot__main > .wordmark { grid-column: 1 / -1; }
}

/* ---- Phone (640px and narrower) ---- */
@media (max-width: 640px) {
  /* Header: the logo and the Pages button; the links open as a panel under it. Book a table lives
     in the quick bar at the bottom instead. */
  .site-head { gap: 1rem; }
  .site-head__book { display: none; }
  .has-nav-toggle .nav-toggle { display: inline-flex; }
  .has-nav-toggle .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0; margin: 0; padding: 0.25rem var(--sc-gutter) 1.25rem; background: var(--sc-canvas); box-shadow: 0 1px 0 var(--sc-hairline), 0 28px 40px -24px rgb(0 0 0 / 0.7); }
  .has-nav-toggle .site-head.is-open .site-nav { display: flex; }
  .has-nav-toggle .site-nav a { padding: 1rem 0; margin: 0; box-shadow: 0 1px 0 var(--sc-hairline); font-weight: 850; font-stretch: 62%; font-size: 1.9rem; line-height: 1; letter-spacing: 0.01em; opacity: 1; }
  .has-nav-toggle .site-nav a[aria-current="page"] { text-underline-offset: 0.25em; }
  .site-head.is-open { background: var(--sc-canvas); }
  /* Without JavaScript: the links wrap under the logo. */
  html:not(.has-nav-toggle) .site-head { flex-wrap: wrap; height: auto; padding-block: 1rem; row-gap: 0.75rem; }
  html:not(.has-nav-toggle) .site-nav { width: 100%; margin-left: 0; gap: 1.25rem; flex-wrap: wrap; }

  /* The quick bar: always within thumb's reach. It slides away while you type in a form, so it
     never sits on top of the keyboard. */
  body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
  .quick-bar { position: fixed; z-index: var(--sc-z-chrome); left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.35fr; padding-bottom: env(safe-area-inset-bottom); background: color-mix(in oklab, var(--sc-canvas) 94%, transparent); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--sc-hairline); transition: transform var(--sc-d-base) var(--sc-ease-out); }
  .quick-bar a { display: flex; align-items: center; justify-content: center; height: 3.5rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; font-weight: 600; }
  .quick-bar a + a { box-shadow: -1px 0 0 var(--sc-hairline); }
  .quick-bar .quick-bar__book { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }
  body:has(:is(input:not([type="radio"]):not([type="checkbox"]), textarea, select):focus) .quick-bar { transform: translateY(110%); }
  /* Under 360px (a folded phone, 400% zoom) "Directions" and "Book a table" ran out of their thirds:
     Call takes less room, and a label may wrap onto two lines. */
  @media (max-width: 359px) {
    .quick-bar { grid-template-columns: 0.8fr 1.1fr 1.1fr; }
    .quick-bar a { padding-inline: 0.35rem; text-align: center; line-height: 1.15; letter-spacing: 0.04em; font-size: 0.75rem; }
  }
  /* Tabbing with a keyboard scrolls each link into view above the bar, never under it. */
  html { scroll-padding-bottom: calc(3.5rem + env(safe-area-inset-bottom) + 1rem); }

  /* A long label wraps inside its button instead of running out of it (a folded phone is 280px wide). */
  .btn { white-space: normal; text-align: center; height: auto; min-height: 3.25rem; padding-block: 0.75rem; line-height: 1.15; }
  .site-head .btn { min-height: 2.75rem; }

  /* Footer: one column */
  .site-foot__main { grid-template-columns: 1fr; gap: 2.25rem; }
  .site-foot__end { flex-direction: column; gap: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { .quick-bar, .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { transition: none; } }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }   /* a word that must not break at its hyphen ("walk-ins") */