/* Engine base styles: layout, blocks, spacing and accessibility.
   Themes set colours, fonts and character through the variables below.
   Selectors are kept weak with :where(), so any plain rule in a theme wins. */

/* Fonts any site can use by name (OFL, served with the engine). A browser
   only downloads the ones a page actually uses. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-latin-opsz-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-latin-opsz-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/dm-sans-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/dm-sans-latin-wght-italic.woff2) format("woff2"); }

:root {
  --color-bg: #ffffff;
  --color-surface: #f4f4f5;
  --color-text: #1f2328;
  --color-muted: #5b616b;
  --color-accent: #0b62d6;
  --color-accent-contrast: #ffffff;
  --color-border: #d9dce1;
  /* tone=dark bands */
  --color-dark: #16181d;
  --color-dark-text: #f3f4f6;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size: 18px;
  --line-height: 1.6;
  --heading-weight: 700;
  --heading-tracking: -0.01em;
  --heading-line-height: 1.15;
  --display-size: clamp(2.6rem, 6.5vw, 5rem);
  --max-width: 44rem;
  --max-width-wide: 72rem;
  --radius: 6px;
  --button-radius: var(--radius);
  --space: 1.5rem;
  --block-space: clamp(3.5rem, 9vw, 7rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-line-height);
  margin: 1.6em 0 0.5em;
  text-wrap: balance;
}
:where(h1) { font-size: clamp(2.1rem, 4.5vw, 3rem); }
:where(h2) { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
:where(h3) { font-size: 1.25em; }
:where(p) { text-wrap: pretty; }
:where(p, ul, ol, dl, blockquote, table, pre, figure, details) { margin: 0 0 1em; }
:where(a) { color: var(--color-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:where(img) { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
:where(p img) { display: inline-block; vertical-align: middle; }
:where(hr) { border: 0; border-top: 1px solid var(--color-border); margin: calc(var(--space) * 1.5) 0; }
:where(blockquote) { margin-left: 0; padding: 0.25em 1em; border-left: 4px solid var(--color-accent); color: var(--color-muted); }
:where(small, figcaption) { color: var(--color-muted); font-size: 0.875em; }

:where(code, pre, kbd) { font-family: var(--font-mono); font-size: 0.9em; }
:where(code) { background: var(--color-surface); padding: 0.1em 0.35em; border-radius: calc(var(--radius) / 2); }
:where(pre) { background: var(--color-surface); padding: 1em; border-radius: var(--radius); overflow-x: auto; }
:where(pre code) { background: none; padding: 0; }

:where(table) { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
@media (min-width: 40rem) { :where(table) { display: table; } }
:where(th, td) { text-align: left; padding: 0.5em 0.75em; border-bottom: 1px solid var(--color-border); }
:where(th) { background: var(--color-surface); }
:where(th[align="center"], td[align="center"]) { text-align: center; }
:where(th[align="right"], td[align="right"]) { text-align: right; }

:where(details) { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5em 1em; }
:where(summary) { cursor: pointer; font-weight: 600; }

:where(input[type="checkbox"]) { margin-right: 0.4em; }
:where(li:has(> input[type="checkbox"])) { list-style: none; margin-left: -1.2em; }

/* Header */
:where(.site-header) { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
:where(.site-header-inner) {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}
:where(.site-title) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.2em;
  letter-spacing: var(--heading-tracking);
  color: inherit;
  text-decoration: none;
}
:where(.site-logo) { height: 2.2em; width: auto; border-radius: 0; }
:where(.site-nav ul) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
:where(.site-nav a) { color: inherit; text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
:where(.site-nav a:hover) { border-bottom-color: var(--color-border); }
:where(.site-nav a[aria-current]) { border-bottom-color: var(--color-accent); }

/* Page: a stack of full-width sections. Prose sections keep a readable
   column; blocks are bands with a wider inner area. */
.page { flex: 1; width: 100%; outline: none; }
:where(.page-content) { padding-bottom: var(--block-space); }
:where(.page-content > .section, .page-content > .section-intro) {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--space) * 1.25) var(--gutter) 0;
}
:where(.page-content > .section-intro:first-child) { padding-top: calc(var(--space) * 2.5); }
:where(.layout-wide .page-content > .section, .layout-wide .page-content > .section-intro) { max-width: var(--max-width-wide); }
:where(.page-content > section > :first-child, .block-text > :first-child, .block-intro > :first-child, .item-body > :first-child) { margin-top: 0; }
:where(.page-content > section > :last-child, .block-text > :last-child, .block-intro > :last-child, .item-body > :last-child) { margin-bottom: 0; }
/* A page that ends in a band doesn't need extra space after it. */
:where(.page-content:has(> .block:last-child)) { padding-bottom: 0; }

/* Landing layout (older sites): the intro section becomes a big hero. */
:where(.layout-landing .page-content) > .hero {
  max-width: none;
  padding: var(--block-space) var(--gutter);
  margin-bottom: calc(var(--space) * 1);
  text-align: center;
  background: var(--color-surface);
}
:where(.layout-landing) .hero > * { max-width: var(--max-width); margin-left: auto; margin-right: auto; }
:where(.layout-landing) .hero h1 { font-size: var(--display-size); }
:where(.layout-landing) .hero p { font-size: 1.15em; color: var(--color-muted); }
:where(.layout-landing) .hero img { margin: 1rem auto; }

/* Buttons: a paragraph of links inside a block, or .button */
:where(.buttons) { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75em; }
.button, :where(.hero p) > a:only-child {
  display: inline-block;
  padding: 0.8em 1.6em;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--button-radius);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.button:hover { transform: translateY(-1px); }
.button-secondary { background: transparent; color: inherit; border-color: currentColor; }

/* ---------------------------------------------------------------- Blocks */

:where(.block) { position: relative; padding: var(--block-space) var(--gutter); }
:where(.block + .block:not([class*="tone-"])) { padding-top: 0; }
:where(.block[class*="tone-"] + .block[class*="tone-"]) { padding-top: var(--block-space); }
:where(.block[class*="tone-"] + .block:not([class*="tone-"])) { padding-top: var(--block-space); }
:where(.block-hero + .block) { padding-top: var(--block-space); }
:where(.section + .block, .section-intro + .block) { margin-top: var(--block-space); }
:where(.section + .block[class*="tone-"], .section-intro + .block[class*="tone-"]) { margin-top: calc(var(--block-space) * 0.75); }
:where(.block + .section) { padding-top: 0; }
:where(.block-inner) { position: relative; max-width: var(--max-width-wide); margin: 0 auto; }
:where(.block-intro) { max-width: 40rem; margin-bottom: calc(var(--space) * 2); }
:where(.block-intro) p { font-size: 1.1em; color: var(--color-muted); }
:where(.block h2) { margin-top: 0; }
:where(.align-center) { text-align: center; }
:where(.align-center .block-intro, .align-center .block-text) { margin-left: auto; margin-right: auto; }
:where(.align-center .buttons) { justify-content: center; }

/* Tones: bands of colour */
:where(.tone-surface) { background: var(--color-surface); }
:where(.tone-accent) { background: var(--color-accent); color: var(--color-accent-contrast); }
:where(.tone-dark) { background: var(--color-dark); color: var(--color-dark-text); }
:where(.tone-accent, .tone-dark) a:not(.button) { color: inherit; }
:where(.tone-accent, .tone-dark) .block-intro p,
:where(.tone-accent, .tone-dark) .menu-desc,
:where(.tone-accent, .tone-dark) figcaption { color: inherit; opacity: 0.85; }
:where(.tone-accent) .button:not(.button-secondary) { background: var(--color-accent-contrast); color: var(--color-accent); border-color: var(--color-accent-contrast); }
:where(.tone-dark) .button:not(.button-secondary) { background: var(--color-dark-text); color: var(--color-dark); border-color: var(--color-dark-text); }
:where(.tone-accent, .tone-dark) { --color-border: color-mix(in srgb, currentColor 22%, transparent); }

/* Background images (hero style=cover, cta, section with image=) */
:where(.block.has-bg) { color: #fff; overflow: hidden; }
:where(.block-bg) { position: absolute; inset: 0; }
:where(.block-bg) img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
:where(.block-bg)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.55)); }
:where(.block.has-bg) a:not(.button) { color: inherit; }
:where(.block.has-bg) .button:not(.button-secondary) { background: #fff; color: #111; border-color: #fff; }

/* hero */
:where(.block-hero) { padding-top: calc(var(--block-space) * 0.8); }
:where(.block-hero h1) { font-size: var(--display-size); line-height: 1.02; margin: 0 0 0.35em; }
:where(.block-hero .block-text) p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 34rem; }
:where(.block-hero.style-center) { text-align: center; }
:where(.block-hero.style-center .block-text) { max-width: 52rem; margin: 0 auto; }
:where(.block-hero.style-center .block-text) p { margin-left: auto; margin-right: auto; }
:where(.block-hero.style-center .buttons) { justify-content: center; }
:where(.block-hero.style-cover) { min-height: min(85vh, 52rem); display: flex; align-items: flex-end; }
:where(.block-hero.style-cover .block-inner) { width: 100%; }
:where(.block-hero.style-cover .block-text) { max-width: 46rem; }

/* hero style=split and split: text beside an image */
:where(.block-hero.style-split, .block-split) .block-inner { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 52rem) {
  :where(.block-hero.style-split, .block-split) .block-inner:has(> .block-media) { grid-template-columns: 1fr 1fr; }
  :where(.block-hero.style-split.reverse, .block-split.reverse) .block-media { order: -1; }
}
:where(.block-media) img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
:where(.block-split .block-media) img { aspect-ratio: 4 / 3; }

/* cards, features, columns */
:where(.block-items) { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 40rem) { :where(.block-items.cols-2, .block-items.cols-3, .block-items.cols-4) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) {
  :where(.block-items.cols-3) { grid-template-columns: repeat(3, 1fr); }
  :where(.block-items.cols-4) { grid-template-columns: repeat(4, 1fr); }
}
:where(.block-item) { display: flex; flex-direction: column; }
:where(.block-item h3) { margin: 0 0 0.4em; }
:where(.item-media) { margin-bottom: 1.25rem; }
:where(.item-media) img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
:where(.block-cards .block-item) { background: var(--color-surface); border-radius: var(--radius); overflow: hidden; }
:where(.block-cards.tone-surface .block-item) { background: var(--color-bg); }
:where(.block-cards .item-body) { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
:where(.block-cards .item-media) { margin: 0; }
:where(.block-cards .item-media) img { border-radius: 0; }
:where(.block-features .block-item) { border-top: 1px solid var(--color-border); padding-top: 1.25rem; }
:where(.block-features.align-center .block-item) { border: 0; padding-top: 0; }

/* gallery */
:where(.gallery-grid) { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) {
  :where(.gallery-grid.cols-3) { grid-template-columns: repeat(3, 1fr); }
  :where(.gallery-grid.cols-4) { grid-template-columns: repeat(4, 1fr); }
}
:where(.gallery-grid figure) { margin: 0; }
:where(.gallery-grid img) { width: 100%; aspect-ratio: 1; object-fit: cover; }
:where(.gallery-grid figcaption) { margin-top: 0.5em; }
:where(.style-masonry .gallery-grid) { display: block; columns: 2; column-gap: 1rem; }
@media (min-width: 52rem) { :where(.style-masonry .gallery-grid.cols-3) { columns: 3; } :where(.style-masonry .gallery-grid.cols-4) { columns: 4; } }
:where(.style-masonry .gallery-grid figure) { break-inside: avoid; margin-bottom: 1rem; }
:where(.style-masonry .gallery-grid img) { aspect-ratio: auto; }

/* menu */
:where(.menu-groups) { display: grid; gap: calc(var(--space) * 1.5) clamp(2rem, 6vw, 5rem); }
@media (min-width: 52rem) { :where(.menu-groups:has(> .menu-group + .menu-group)) { grid-template-columns: 1fr 1fr; } }
:where(.menu-group h3) { margin: 0 0 0.75em; padding-bottom: 0.4em; border-bottom: 1px solid var(--color-border); }
:where(.menu-items) { list-style: none; padding: 0; margin: 0; }
:where(.menu-items li) { padding: 0.55em 0; }
:where(.menu-line) { display: flex; align-items: baseline; gap: 0.75em; }
:where(.menu-name) { font-weight: 600; }
:where(.menu-line)::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted color-mix(in srgb, currentColor 40%, transparent); transform: translateY(-0.3em); }
:where(.menu-price) { order: 2; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.menu-desc) { margin: 0.15em 0 0; color: var(--color-muted); font-size: 0.92em; }

/* hours, contact */
:where(.kv) { margin: 0; max-width: 34rem; }
:where(.align-center .kv) { margin: 0 auto; }
:where(.kv-row) { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.7em 0; border-bottom: 1px solid var(--color-border); text-align: left; }
:where(.kv dt) { font-weight: 600; }
:where(.kv dd) { margin: 0; text-align: right; }

/* quotes */
:where(.quote-list) { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) {
  :where(.quote-list.count-2) { grid-template-columns: repeat(2, 1fr); }
  :where(.quote-list.count-3) { grid-template-columns: repeat(3, 1fr); }
}
:where(.quote) { margin: 0; }
:where(.quote blockquote) { margin: 0; padding: 0; border: 0; color: inherit; font-family: var(--font-heading); font-size: 1.3em; line-height: 1.4; }
:where(.quote-list.count-1 .quote blockquote) { font-size: clamp(1.4rem, 3vw, 2.1rem); max-width: 50rem; }
:where(.align-center .quote-list.count-1 .quote blockquote) { margin: 0 auto; }
:where(.quote blockquote)::before { content: "\201C"; display: block; font-size: 2.5em; line-height: 0.6; color: var(--color-accent); margin-bottom: 0.15em; }
:where(.tone-accent, .tone-dark, .has-bg) .quote blockquote::before { color: inherit; opacity: 0.6; }
:where(.quote figcaption) { margin-top: 1em; font-size: 0.9em; letter-spacing: 0.02em; }
:where(.quote figcaption)::before { content: "— "; }

/* faq */
:where(.faq-list) { max-width: 48rem; }
:where(.align-center .faq-list) { margin: 0 auto; text-align: left; }
:where(.faq-item) { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; padding: 0; margin: 0; }
:where(.faq-item summary) { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.1em 0; font-size: 1.1em; }
:where(.faq-item summary)::-webkit-details-marker { display: none; }
:where(.faq-item summary)::after { content: "+"; font-weight: 400; font-size: 1.3em; line-height: 1; transition: transform 0.2s ease; }
:where(.faq-item[open] summary)::after { transform: rotate(45deg); }
:where(.faq-answer) { padding: 0 0 1.2em; color: var(--color-muted); }

/* cta */
:where(.block-cta) { text-align: center; }
:where(.block-cta .block-text) { max-width: 44rem; margin: 0 auto; }
:where(.block-cta h2) { font-size: clamp(2rem, 4.5vw, 3.2rem); }
:where(.block-cta .buttons) { justify-content: center; }
:where(.block-cta.has-bg) { padding-top: calc(var(--block-space) * 1.4); padding-bottom: calc(var(--block-space) * 1.4); }

/* section */
:where(.block-section .block-text) { max-width: var(--max-width); }
:where(.block-section.align-center .block-text) { margin: 0 auto; }

/* Helper classes for HTML in Markdown (older sites; blocks are preferred) */
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space); margin-bottom: 1em; }
.columns > * > :first-child { margin-top: 0; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space); }
.center { text-align: center; }

/* Footer */
:where(.site-footer) { border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.9em; }
:where(.site-footer-inner) { max-width: var(--max-width-wide); margin: 0 auto; padding: calc(var(--space) * 1.5) var(--gutter); }
:where(.site-footer a) { color: inherit; }

/* Shown on preview builds only */
.preview-banner {
  background: #ffd84d;
  color: #1a1a1a;
  font: 600 0.85rem/1.4 system-ui, sans-serif;
  text-align: center;
  padding: 0.4rem 1rem;
}

/* Accessibility */
.skip-link { position: absolute; left: -9999px; top: 0.5rem; z-index: 10; background: var(--color-bg); padding: 0.5rem 1rem; }
.skip-link:focus { left: 0.5rem; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }