/* base.css: the reset, type defaults and the starter's plain components (facts lists, tables, embeds, legal page notes).
   Values come from theme.css. The site's own components (buttons, header, footer, plaque) are in site.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--calce); color: var(--ink);
  font: 400 var(--fs-body) / var(--lh-body) var(--font-text);
  font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* Controls inherit Hanken Grotesk (without this, buttons and inputs fall back to the system font) */
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
a:hover { text-decoration-color: currentColor; }
/* Long emails and addresses wrap instead of pushing the page sideways (320 px, 200% zoom) */
a, .facts dd, .data-table td { overflow-wrap: anywhere; }

/* Headings: Bodoni Moda 500, optical size set per use (never automatic) */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 500; line-height: var(--lh-head);
  letter-spacing: -0.005em; text-wrap: balance;
  font-optical-sizing: none; font-variation-settings: "opsz" var(--opsz-page);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.012em; }
h2 { font-size: var(--fs-h2); margin: 0 0 0.6rem; }
h3 { font-size: var(--fs-h3); font-variation-settings: "opsz" var(--opsz-small); }
h4 { font: 600 var(--fs-h4) / 1.3 var(--font-text); letter-spacing: -0.005em; }
p { text-wrap: pretty; }
.num, time { font-variant-numeric: tabular-nums lining-nums; }   /* times, dates, distances, counts */

.container { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
/* The hidden attribute always wins over a component's display (.button is inline-flex). Print-only text (property.css)
   comes later with its own !important. */
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Above the header (z-index 40) and the language line, so the first Tab shows it */
.skip-link { position: absolute; left: var(--s-4); top: -5rem; z-index: 60; display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s-4);
  background: var(--cobalt); color: #fff; border-radius: var(--r-2); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-2); }
.skip-link:focus { top: 0.75rem; }

.section { padding-block: var(--s-8); }
@media (min-width: 48rem) { .section { padding-block: var(--s-9); } }
.section-alt { background: var(--wall); }
.muted, .hours-note, .section-intro { color: var(--ink-2); }
.small { font-size: var(--fs-small); line-height: 1.5; }

/* The starter's plain components */
.hero-inner, .two-col { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .hero-inner, .two-col { grid-template-columns: 1fr 1fr; align-items: center; } }
.cards, .photo-grid { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card { background: var(--paper); border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--shadow-1); }
.card h2, .card h3 { font-size: 1.25rem; font-variation-settings: "opsz" var(--opsz-small); }
.photo-grid img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-2); width: 100%; }
.photo-open { padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.hours th { text-align: left; padding-right: 1rem; font-weight: 600; }
.faq { border-bottom: 1px solid var(--grout); padding-block: .75rem; }
.faq summary { cursor: pointer; font-weight: 600; min-height: var(--target); display: flex; align-items: center; }
/* The notice banner: ink on giallo wash (8.5:1); links take the text colour */
.announcement { background: var(--giallo-wash); color: var(--giallo-ink); padding-block: .5rem; text-align: center; font-size: var(--fs-small); box-shadow: inset 0 -1px 0 rgb(230 181 71 / 0.6); }
.announcement p { margin: 0; }
.announcement a { color: inherit; }
/* Contact links (partials/contact-list.njk): a plain list of 44 px links; the footer and the home page style them further */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list a { display: inline-flex; align-items: center; min-height: var(--target); }
/* A detail still waiting for the client's fact: an unlinked [fill in: …] marker on a row as tall as a link row */
.contact-list .contact-missing { display: flex; align-items: center; min-height: var(--target); }
.lightbox { border: 0; padding: 0; max-width: 95vw; background: transparent; }
.lightbox::backdrop { background: rgb(0 0 0 / .8); }
.lightbox-close { position: absolute; top: .5rem; right: .5rem; min-width: var(--target); min-height: var(--target); }

/* Facts as a ruled list of terms and values (legal pages) */
.facts { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--grout); }
.facts dt, .facts dd { padding-block: .6rem; border-bottom: 1px solid var(--grout); }
.facts dt { padding-right: 1.5rem; font-weight: 600; }
.facts dd { margin: 0; min-width: 0; }
@media (max-width: 30rem) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .facts dd { padding-top: .15rem; }
}
.draft-note { background: var(--giallo-wash); color: var(--giallo-ink); padding: .75rem 1rem; border-radius: var(--r-2); box-shadow: inset 3px 0 0 var(--giallo); }
.fill-in { background: var(--giallo-wash); color: var(--giallo-ink); padding: 0 .2em; border-radius: 2px; box-shadow: inset 0 -1px 0 rgb(230 181 71 / 0.8); }
.data-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: var(--fs-small); }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--grout); }
.data-table th { font: 600 var(--fs-label) / 1.3 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
/* On phones each row becomes a short list; the column name comes from data-label */
@media (max-width: 40rem) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .data-table tr { display: block; padding-block: .5rem; border-bottom: 1px solid var(--grout); }
  .data-table td { display: block; padding: .1rem 0; border: 0; }
  .data-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; }
}
.embed { position: relative; display: grid; place-content: center; gap: .75rem; padding: 1rem; background: var(--wall); border-radius: var(--r-3); text-align: center; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.embed-note { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.price-note { color: var(--ink-2); font-size: var(--fs-small); }