/* ==========================================================================
   The Polhill Arms — site styles
   Translated from the Claude Design source (Polhill Arms.dc.html), where all
   rules were inline. Tokens first, then layout, then components.
   ========================================================================== */

:root {
  /* Brand */
  --paper:        #FAF6EF;  /* page background */
  --sand:         #F1EADD;  /* tinted panels */
  --card:         #FFFFFF;
  --teal:         #294A54;  /* primary brand */
  --teal-deep:    #1F3A42;  /* dark bands */
  --terracotta:   #C1685A;  /* accent */
  --link:         #3B6874;
  --cream:        #FDFBF6;  /* text on dark */
  --gold:         #E8C9A8;  /* accent on dark */

  /* Text */
  --ink:          #1F2A2E;
  --ink-2:        #3A4649;
  --ink-3:        #4A555A;
  --ink-4:        #5A6469;
  --ink-warm:     #6E6455;
  --ink-mute:     #8A8378;

  /* Status */
  --open:         #8FBF7F;
  --shut:         #D9584B;

  /* Rules */
  --line:         rgba(31, 42, 46, 0.10);
  --line-soft:    rgba(31, 42, 46, 0.08);
  --line-mid:     rgba(31, 42, 46, 0.12);
  --line-strong:  rgba(31, 42, 46, 0.16);
  --line-heavy:   rgba(31, 42, 46, 0.28);

  /* Type */
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans:  Karla, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 4.5vw, 40px);
  --measure: 1200px;
}

/* --------------------------------------------------------------- reset ---- */

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

html, body { margin: 0; padding: 0; background: var(--paper); }

body {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--terracotta); }

::selection { background: var(--terracotta); color: var(--paper); }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

h1, h2, h3 { text-wrap: pretty; }

/* Visible only to screen readers, until focused (skip link). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  padding: 12px 22px;
  background: var(--teal);
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--cream);
}

/* -------------------------------------------------------------- layout ---- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section       { padding-top: 96px; padding-bottom: 96px; }
.section--tight { padding-top: 80px; padding-bottom: 40px; }
.section--flush-top { padding-top: 40px; }

/* Shared eyebrow / heading / lede scale ----------------------------------- */

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 16px;
}
.eyebrow--tight { letter-spacing: 0.2em; margin-bottom: 18px; }
.eyebrow--on-dark { color: var(--gold); }
.eyebrow--teal { color: var(--teal); }

.h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 5.8vw, 66px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 30px;
  color: var(--ink);
}
.h1--on-dark {
  color: var(--cream);
  font-size: clamp(40px, 6.4vw, 72px);
  margin-bottom: 22px;
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.h2--sm {
  font-size: clamp(30px, 3.9vw, 44px);
  line-height: 1.05;
}

.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 29px;
  line-height: 1.15;
  margin: 0;
  color: var(--teal);
}

.lede {
  font-size: 20px;
  line-height: 1.65;
  margin: 0;
}
.lede--on-dark { color: rgba(253, 251, 246, 0.82); max-width: 56ch; }

.prose {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-3);
}
.prose > p { margin: 0 0 20px; }
.prose > p:last-child { margin-bottom: 0; }

.note {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-4);
  margin: 0;
}

/* -------------------------------------------------------------- header ---- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 239, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-mid);
}

.header__bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 14px var(--gutter);
  min-height: 78px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.brand { display: flex; flex-direction: column; gap: 1px; }
.brand:hover { color: inherit; }
.brand__name {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--teal);
  white-space: nowrap;
}
.brand__place {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  white-space: nowrap;
}

.nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav__link:hover { color: var(--terracotta); }
.nav__link::after { content: ""; display: block; width: 100%; height: 2px; background: transparent; }
.nav__link[aria-current="page"] { color: var(--teal); }
.nav__link[aria-current="page"]::after { background: var(--terracotta); }

/* Phone pill ------------------------------------------------------------- */

.phone-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  background: var(--teal);
  color: var(--cream);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.phone-pill:hover { background: var(--terracotta); color: var(--cream); }

.dot {
  display: block;
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.dot--lg { width: 9px; height: 9px; }
.dot[data-state="open"]   { background: var(--open); }
.dot[data-state="closed"] { background: var(--shut); }

/* Compact header controls ------------------------------------------------ */

.header__compact {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 10px;
}

.phone-pill--compact { min-height: 46px; padding: 0 18px; gap: 8px; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line-heavy);
  background: transparent;
  color: var(--teal);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.nav-toggle:hover { border-color: var(--terracotta); color: var(--terracotta); }

.nav-drawer {
  border-top: 1px solid var(--line-mid);
  background: var(--paper);
  padding: 8px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 17px;
  font-weight: 600;
  color: var(--teal);
}
.nav-drawer a:last-child { border-bottom: 0; }
.nav-drawer a[aria-current="page"] { color: var(--terracotta); }

@media (max-width: 899px) {
  .nav { display: none; }
  .header__compact { display: flex; }
}

/* On a phone the brand plus both controls no longer fit on one line, and since
   the header is sticky a wrapped two-row bar would eat about a third of the
   screen for the whole scroll. Tighten it so it stays one row; tap targets stay
   at 44px. */
@media (max-width: 560px) {
  .header__bar {
    min-height: 62px;
    padding: 10px var(--gutter);
    gap: 10px 12px;
    flex-wrap: nowrap;
  }
  .brand__name { font-size: 20px; }
  .brand__place { font-size: 9px; letter-spacing: 0.14em; }
  .phone-pill--compact { min-height: 44px; padding: 0 14px; gap: 7px; }
  .nav-toggle { min-width: 68px; min-height: 44px; padding: 0 12px; letter-spacing: 0.1em; }
}

@media (max-width: 380px) {
  .brand__place { display: none; }
  .brand__name { font-size: 19px; }
}

/* ---------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  min-height: min(640px, 88vh);
  display: flex;
  align-items: flex-end;
  background-color: var(--teal);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero__media picture { display: block; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Each breakpoint is served a crop shaped like its box (see
     tools/build-images.sh), so plain centring keeps the front door and the
     horse in frame — no per-breakpoint nudging needed here. */
  object-position: center;
}

/* On a wide desktop the box gets proportionally shorter than the 2:1 crop, so
   the sides fit and the browser trims top and bottom instead. Bias down a
   little: the sky is expendable, the door and carriage are not. */
@media (min-width: 1025px) {
  .hero__media img { object-position: center 58%; }
}
/* Two overlays. The vertical one is the design's original, strengthened in its
   upper half: the hero photo is a sunlit white-and-black building now, not the
   dark sky the original gradient was tuned against, and the gold eyebrow was
   washing out over the render. The horizontal one darkens only the side the text
   actually sits on, so the right of the photo stays clear. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(20, 32, 36, 0.88) 0%,
      rgba(20, 32, 36, 0.46) 52%,
      rgba(20, 32, 36, 0.24) 100%),
    linear-gradient(to right,
      rgba(20, 32, 36, 0.55) 0%,
      rgba(20, 32, 36, 0.16) 58%,
      rgba(20, 32, 36, 0) 100%);
}
.hero__body {
  position: relative;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 96px var(--gutter) 72px;
}
.hero__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(42px, 7.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 26px;
  max-width: 15ch;
}
.hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(253, 251, 246, 0.86);
  margin: 0 0 34px;
  max-width: 46ch;
}

/* Page banner (interior pages) ------------------------------------------- */

.banner {
  background: var(--teal);
  padding: 84px var(--gutter) 76px;
}
.banner__inner { max-width: var(--measure); margin: 0 auto; }

/* -------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary { background: var(--terracotta); color: var(--cream); }
.btn--primary:hover { background: var(--cream); color: var(--teal); }

.btn--ghost {
  border-color: rgba(253, 251, 246, 0.5);
  color: var(--cream);
}
.btn--ghost:hover { background: rgba(253, 251, 246, 0.14); color: var(--cream); }

.btn--teal { background: var(--teal); color: var(--paper); padding: 14px 26px; }
.btn--teal:hover { background: var(--terracotta); color: var(--paper); }

.btn--outline {
  border-color: rgba(31, 42, 46, 0.25);
  color: var(--teal);
  padding: 14px 26px;
}
.btn--outline:hover { border-color: var(--terracotta); color: var(--terracotta); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--sm { gap: 12px; }

/* Underlined text link with accent rule ---------------------------------- */

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 6px;
}
.link-more:hover { color: var(--terracotta); }
.link-more--on-dark { color: var(--gold); padding-bottom: 5px; }
.link-more--on-dark:hover { color: var(--cream); }

.link-quiet {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  white-space: nowrap;
}
.link-quiet--on-dark { color: var(--gold); }
.link-quiet--on-dark:hover { color: var(--cream); }

/* --------------------------------------------------------- status strip ---- */

.status {
  background: var(--teal-deep);
  color: var(--cream);
}
.status__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 38px;
}
.status__state {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.status__detail { font-size: 15px; color: rgba(253, 251, 246, 0.72); }
.status__link { margin-left: auto; }

.status-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 18px 24px;
  background: var(--teal-deep);
  color: var(--cream);
  margin-bottom: 40px;
}
.status-box__label { font-size: 16px; font-weight: 700; }
.status-box__detail { font-size: 16px; color: rgba(253, 251, 246, 0.72); }

/* --------------------------------------------------------------- grids ---- */

.grid { display: grid; gap: 22px; }
.grid--cards   { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid--halves  { grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 64px; align-items: center; }
.grid--panels  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; }
.grid--split   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 72px; align-items: start; }
.grid--thirds  { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.grid--two     { grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.section-head .note { max-width: 34ch; }

/* --------------------------------------------------------------- cards ---- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 32px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card__day {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.card p { font-size: 16px; line-height: 1.6; color: var(--ink-4); margin: 0; }

.card--roomy {
  padding: 42px var(--gutter) 44px;
  gap: 0;
}
.card--roomy .h2 { margin-bottom: 18px; color: var(--teal); font-size: clamp(28px, 3.4vw, 38px); line-height: 1.08; }
.card--roomy p { font-size: 17px; line-height: 1.7; color: var(--ink-3); margin: 0 0 16px; }
.card--roomy p:last-child { margin-bottom: 0; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 32px;
}
.panel--sand { background: var(--sand); padding: 32px 30px; }
.panel--teal { background: var(--teal); color: var(--cream); padding: 32px 30px; }
.panel--wide { padding: 34px 32px; }

.strip {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 30px;
  background: var(--sand);
  border: 1px solid var(--line-soft);
}
.strip__text { font-size: 16px; color: var(--ink-3); }
.strip__link { margin-left: auto; }

/* ----------------------------------------------------------- definition ---- */

.rows { border-top: 1px solid var(--line-strong); }
.rows--soft { border-top: 1px solid var(--line-mid); }

.row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row dt, .row__label { font-size: 16px; color: var(--ink); }
.row dd, .row__value { font-size: 16px; color: var(--ink-4); margin: 0; }

.panel__title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}
.panel--sand .panel__title { color: var(--terracotta); margin-bottom: 18px; }

/* --------------------------------------------------------- hours table ---- */

.hours { border-top: 1px solid var(--line-strong); }
.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.hours__day {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ink);
}
.hours__today {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-right: auto;
}
.hours__time {
  font-size: 20px;
  font-weight: 500;
  color: var(--link);
}
.hours__row[data-today="true"] .hours__day { color: var(--teal); }

/* -------------------------------------------------------- image blocks ---- */

.figure { margin: 0; }
.figure img { display: block; width: 100%; object-fit: cover; }

/* <picture> is inline by default, which stops it stretching as a grid item.
   Only the fixed-height cells want height:100% — the feature card's image is a
   220px banner above its own body, so stretching the wrapper there leaves a gap
   of empty panel and pushes the body outside the card. */
.mosaic picture,
.trio picture,
.tall picture { display: block; height: 100%; }

.feature-card picture { display: block; }

.mosaic img, .trio img, .tall img,
.badges img, .feature-card img { object-fit: cover; }

/* Two-up, two-down. The design expressed this as auto-fit/minmax(292px), but
   inside a half-width column that resolves to a single track and crops these
   portrait photos into thin strips — so pin it to two columns instead. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 210px;
  gap: 14px;
}
.mosaic img { width: 100%; height: 100%; }

@media (max-width: 460px) {
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; }
}

.trio img { height: 300px; }

.tall img { min-height: 300px; height: 100%; }

/* -------------------------------------------------------------- badges ---- */

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 30px;
  padding: 34px;
  background: var(--card);
  border: 1px solid var(--line);
}
.badges img { display: block; flex: none; object-fit: contain; }
.badges__camra { width: 104px; height: 104px; }
.badges__cask  { width: 72px;  height: 142px; }
.badges__text { flex: 1 1 240px; min-width: 240px; }
.badges__title {
  display: block;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.2;
  color: var(--teal);
  margin-bottom: 8px;
}
.badges__body { display: block; font-size: 15px; line-height: 1.6; color: var(--ink-4); }

/* ------------------------------------------------------------ features ---- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  border-top: 1px solid rgba(31, 42, 46, 0.14);
}
.features > div { padding: 32px 28px 0; }
.features > div:first-child { padding-left: 0; }
.features > div:last-child { padding-right: 0; }
.features dt, .features__title {
  display: block;
  font-family: var(--serif);
  font-size: 23px;
  color: var(--teal);
  margin-bottom: 10px;
}
.features dd, .features__body {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-4);
  margin: 0;
}

/* ---------------------------------------------------------------- menu ---- */

.menu-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-bottom: 34px;
  border-bottom: 2px solid var(--teal);
}
.menu-head__times { display: flex; flex-wrap: wrap; gap: 34px; }
.menu-head__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 7px;
}
.menu-head__value { font-size: 17px; font-weight: 600; color: var(--teal); }

.menu-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 56px;
}
.menu-col { display: flex; flex-direction: column; gap: 44px; }

.menu-group__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 22px;
  color: var(--teal);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 12px;
}
.menu-group__title--with-note {
  margin-bottom: 8px;
  border-bottom: 0;
  padding-bottom: 0;
}
.menu-group__note {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 12px;
  margin-bottom: 22px;
}

.dishes { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.dishes--airy { gap: 20px; }

.dish { display: flex; gap: 18px; align-items: baseline; }
.dish__name { font-size: 17px; line-height: 1.55; color: var(--ink); flex: 1; }
.dish__price { font-size: 17px; font-weight: 600; color: var(--terracotta); }

.dish--add { padding-left: 22px; }
.dish--add .dish__name { font-size: 15px; font-style: italic; color: var(--ink-4); }
.dish--add .dish__price { font-size: 15px; font-weight: 400; color: var(--ink-4); }

.adds {
  font-size: 15px;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink-4);
}

.menu-note {
  font-size: 15px;
  line-height: 1.7;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0;
}

.feature-card { background: var(--teal); color: var(--cream); }
.feature-card img { display: block; width: 100%; height: 220px; object-fit: cover; }
.feature-card__body { padding: 30px 32px 34px; }
.feature-card__kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.feature-card__title {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.feature-card p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(253, 251, 246, 0.82);
  margin: 0 0 20px;
}

/* -------------------------------------------------------------- diary ---- */

.diary { border-top: 1px solid var(--line-strong); }
.diary__item {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.diary__when {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  flex: 0 0 150px;
}
.diary__body { flex: 1 1 260px; }
.diary__title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 8px;
}
.diary__text {
  display: block;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-4);
  max-width: 52ch;
}
.diary__time {
  font-size: 16px;
  font-weight: 600;
  color: var(--link);
  margin-left: auto;
  white-space: nowrap;
}

/* ------------------------------------------------------------- contact ---- */

.address {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.45;
  color: var(--teal);
  margin: 0 0 40px;
  font-style: normal;
}

.contact-rows { border-top: 1px solid var(--line-strong); }
.contact-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.contact-row dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  width: 90px;
  flex: none;
}
.contact-row dd { margin: 0; }
.contact-row dd a { font-size: 19px; font-weight: 500; color: var(--teal); }
.contact-row dd a:hover { color: var(--terracotta); }
.contact-row--phone dd a { font-size: 21px; font-weight: 600; }
.contact-row--wrap dd a { word-break: break-word; }

.map {
  border: 0;
  width: 100%;
  height: 340px;
  display: block;
  background: #E7DFD1;
}
.map-frame { position: relative; }
.map-credit {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 8px 0 0;
}

.getting-here { display: flex; flex-direction: column; gap: 18px; }
.getting-here__title {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--teal);
  margin-bottom: 6px;
}
.getting-here__body {
  display: block;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-4);
}

/* -------------------------------------------------------------- footer ---- */

.footer { background: var(--teal-deep); color: var(--cream); }
.footer__cols {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 72px var(--gutter) 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 48px;
}
.footer__brand {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.footer__blurb {
  display: block;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(253, 251, 246, 0.72);
  max-width: 30ch;
}
.footer__group { display: flex; flex-direction: column; gap: 12px; }
.footer__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.footer__group a,
.footer__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(253, 251, 246, 0.78);
}
.footer__group a:hover { color: var(--gold); }
.footer__group a.is-wrap { word-break: break-word; }

.footer__base {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 26px var(--gutter) 44px;
  border-top: 1px solid rgba(253, 251, 246, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}
.footer__base span { font-size: 13px; color: rgba(253, 251, 246, 0.5); }

/* ------------------------------------------------------------ 404 page ---- */

.notfound {
  max-width: 640px;
  margin: 0 auto;
  padding: 120px var(--gutter);
  text-align: center;
}
.notfound .h1 { margin-bottom: 20px; }
.notfound .btn-row { justify-content: center; margin-top: 30px; }

/* ------------------------------------------------------------- motion ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------- narrow ---- */

@media (max-width: 620px) {
  .section { padding-top: 64px; padding-bottom: 64px; }
  .section--tight { padding-top: 56px; padding-bottom: 32px; }
  .banner { padding-top: 56px; padding-bottom: 52px; }
  .hero__body { padding-top: 72px; padding-bottom: 52px; }
  .grid--halves, .grid--panels, .grid--split { gap: 44px; }
  .menu-cols { gap: 44px; }
  .features > div { padding: 28px 0 0; }
  .status__link { margin-left: 0; }
  .strip__link { margin-left: 0; }
  .diary__time { margin-left: 0; }
  .address { font-size: 24px; }
  .hours__day { font-size: 24px; }
  .footer__cols { padding-top: 56px; gap: 36px; }
}

/* -------------------------------------------------------------- print ---- */

@media print {
  .header, .footer, .status, .btn-row, .skip-link, .map-frame { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 12pt 0; }
  a { color: #000; }
}