/* ============================================================
   WMC House — base
   Every value here is a token. No hard-coded colour or size
   exists anywhere in this theme's CSS. If you find one, it is a bug.
   Tokens are emitted inline in the head by assets/php/tokens.php
   from the settings in Appearance > Design.
   ============================================================ */

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body-family); font-size: var(--body-size); font-weight: var(--body-weight); font-stretch: var(--body-wdth); line-height: var(--body-lh); letter-spacing: var(--body-ls); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* === Type scale — driven entirely from the backend === */
h1, .t-h1 { font-family: var(--h1-family); font-size: var(--h1-size); font-weight: var(--h1-weight); font-stretch: var(--h1-wdth); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); text-transform: var(--h1-tt); margin: 0; }
h2, .t-h2 { font-family: var(--h2-family); font-size: var(--h2-size); font-weight: var(--h2-weight); font-stretch: var(--h2-wdth); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); text-transform: var(--h2-tt); margin: 0; }
h3, .t-h3 { font-family: var(--h3-family); font-size: var(--h3-size); font-weight: var(--h3-weight); font-stretch: var(--h3-wdth); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); text-transform: var(--h3-tt); margin: 0; }
h4, .t-h4 { font-family: var(--h4-family); font-size: var(--h4-size); font-weight: var(--h4-weight); font-stretch: var(--h4-wdth); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); text-transform: var(--h4-tt); margin: 0; }
.t-small { font-family: var(--small-family); font-size: var(--small-size); font-weight: var(--small-weight); font-stretch: var(--small-wdth); line-height: var(--small-lh); letter-spacing: var(--small-ls); text-transform: var(--small-tt); }
.t-eyebrow { font-family: var(--eyebrow-family); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); font-stretch: var(--eyebrow-wdth); line-height: var(--eyebrow-lh); letter-spacing: var(--eyebrow-ls); text-transform: var(--eyebrow-tt); }

/* === Rhythm — one scale, used everywhere === */
:root { --s-1: .5rem; --s-2: 1rem; --s-3: 1.75rem; --s-4: 2.75rem; --s-5: 4rem; --s-6: 6rem; --s-7: 9rem; --ease: cubic-bezier(.22,1,.36,1); --ratio: 3 / 2; }

/* === Layout === */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(4rem, 9vw, var(--s-7)); }
/* The stacked single column makes every section taller, so the same generous
   block padding that frames a desktop row reads as dead space under a phone. */
@media (max-width: 760px) { .sec { padding-block: clamp(2.5rem, 8vw, 4rem); } }
.sec--alt { background: var(--ground-alt); }
.measure { max-width: var(--measure); }

/* === The constant: a hairline with its label set astride it === */
.rule { position: relative; height: 1px; background: var(--rule); margin-bottom: var(--s-5); }
.rule__label { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding-right: 1.4rem; background: var(--ground); color: var(--ink-soft); }
.rule__aside { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding-left: 1.4rem; background: var(--ground); color: var(--ink-soft); }
.sec--alt .rule__label, .sec--alt .rule__aside { background: var(--ground-alt); }

/* === Links and buttons === */
a { color: inherit; text-decoration: none; }
.link { position: relative; display: inline-block; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.btn { display: inline-block; padding: 1rem 1.9rem; transition: transform .4s var(--ease), filter .3s ease; }
.btn:hover { transform: translateY(-2px); }
/* Accent is reserved. Book a table is the only thing on any page that gets
   it, so the red always means the same thing. */
.btn--solid { background: var(--accent); color: var(--accent-ink); }

/* Every other call to action: the house green with the house cream on it. */
.btn--dark { background: var(--nav-bg); color: var(--nav-ink); }
.btn--dark:hover { filter: brightness(1.14); }

.btn--ghost { border: 1px solid var(--nav-bg); color: var(--nav-bg); }
.btn--ghost:hover { background: var(--nav-bg); color: var(--nav-ink); }

/* === Reveal === */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease var(--d,0ms), transform .9s var(--ease) var(--d,0ms); }
.is-in .rv { opacity: 1; transform: none; }

/* === Editorial index — archives, search, news listing === */
.idx { border-top: 1px solid var(--rule); }
.idx__row { border-bottom: 1px solid var(--rule); }
.idx__link { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; transition: padding-left .5s var(--ease); }
.idx__link:hover { padding-left: var(--s-2); }
.idx__title { font-size: var(--h3-size); }
.idx__meta { color: var(--ink-soft); flex: 0 0 auto; }

/* === Single entry === */
.entry__head { margin-bottom: var(--s-4); }
.entry__media { margin-bottom: var(--s-5); aspect-ratio: var(--ratio); overflow: hidden; background: var(--dark); }
.entry__media img { width: 100%; height: 100%; object-fit: cover; }
.entry__body > * + * { margin-top: var(--s-3); }
.entry__body h2 { margin-top: var(--s-5); }
.entry__body h3 { margin-top: var(--s-4); }
.entry__body a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.entry__body blockquote { font-family: var(--font-display); font-style: italic; font-size: var(--h3-size); line-height: 1.28; padding-left: var(--s-3); border-left: 1px solid var(--accent); }
.entry__body ul { list-style: disc; padding-left: 1.2em; }
.entry__body ol { list-style: decimal; padding-left: 1.2em; }
.entry__body li + li { margin-top: .4rem; }

/* === About === */
.about__body > * + * { margin-top: var(--s-3); }
.about__body blockquote { font-family: var(--font-display); font-style: italic; font-size: var(--h3-size); line-height: 1.28; padding-left: var(--s-3); border-left: 1px solid var(--accent); }

/* === Pagination === */
.pagination { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.pagination .page-numbers { padding: .5rem .2rem; color: var(--ink-soft); }
.pagination .current { color: var(--ink); border-bottom: 1px solid var(--accent); }

/* === Accessibility === */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 999; padding: 1rem 1.5rem; background: var(--ground); color: var(--ink); }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.rv { opacity: 1; transform: none; transition: none; }
.btn, .link::after { transition: none; }
}

/* The homepage lede: the excerpt, promoted out of the hero into The
   Restaurant section where a paragraph can breathe. */
.about__lede { font-family: var(--font-display); font-size: var(--h3-size); line-height: 1.3; margin-bottom: var(--s-3); }

/* === Stills stack ===
   Used by the footer Find us frame and The Restaurant section. Absolutely
   positioned so the box height is set by the container, never by whichever
   image happens to be on top. */
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.shot.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .shot { transition: none; } }

/* === The Restaurant ===
   Three columns of reading, a slideshow set between the paragraphs.

   ROW ALIGNMENT. Each column is its own grid, so a two-line opening paragraph
   next to a three-line one pushed their pictures to different heights and the
   row of plates stepped down across the page. `subgrid` makes every column
   share the section's row tracks, so the openers occupy one band and the
   plates line up on a single edge whatever the copy does. */
.about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: clamp(1.75rem, 3vw, 3rem); align-items: start; }
.about__col { display: grid; gap: var(--s-2); align-content: start; }

@supports ( grid-template-rows: subgrid ) {
	.about__col { grid-row: span 3; grid-template-rows: subgrid; }
}
.about__para { margin: 0; max-width: 46ch; }

/* Landscape, and never wider than its column: the previous 4:5 frame cropped
   landscape originals upright and displayed them past their own width, which
   is what made them soft. */
.about__plate { margin: var(--s-1) 0; }
/* The plate is now a stack: the box owns the height and the images are
   absolutely positioned inside it, so a crossfade cannot make the column
   jump as it changes picture. */
.about__plate { position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--ground-alt); }

.about__body { grid-column: 1 / -1; max-width: var(--measure); }

/* A three-column measure is unreadable on a tablet and absurd on a phone. */
@media (max-width: 1180px) { .about { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .about { grid-template-columns: 1fr; gap: var(--s-3); } }