/* ==========================================================================
   THE SHORT BLUE — DESIGN SYSTEM
   Palette taken from the building itself: the navy shopfront, the brass
   lamps, the amber glow through the stained glass, the cream ceilings.
   ========================================================================== */

:root {
  /* Both schemes are supported. Declaring it matters: a browser that knows the
     site has its own dark theme uses that instead of auto-generating one by
     inverting the light palette, which turned the creams muddy brown. */
  color-scheme: light dark;

  /* Colour */
  --navy-900: #0C1828;
  --navy-800: #12243A;
  --navy-700: #1A2E4B;
  --navy-600: #24406A;
  --brass:    #B99A60;   /* Warm Brass, for rules, dots and graphics */
  --brass-ink:#755C30;   /* the same brass darkened for small text on cream: 5.1:1+ */
  --brass-lt: #D9BF8E;
  --brass-on-rust: #F7E4C6;   /* brass-lt is only 3.3:1 on the rust hero; this is 4.7:1 */   /* for text on navy: 10:1 */
  --ember:    #E36B26;   /* Fireside Orange */
  --ember-ink:#B85115;   /* darkened so white text on it reaches 4.97:1 */
  --cream:    #FAF6EC;   /* page GROUND only; this one flips in dark mode */
  --on-dark:  #F8F5EE;   /* light ink for text on navy; never flips */
  --cream-2:  #F1E5D1;   /* Fisherman's Cream */
  --paper:    #FFFDF8;
  --ink:      #232A33;
  --ink-mid:  #55606D;
  --line:     #E4D8C2;
  --line-on-dark: rgba(248, 245, 238, .14);   /* hairline on a navy ground */

  /* Type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Space + shape */
  --hero-h: clamp(360px, 38vw, 460px);
  --hero-pad: clamp(3rem, 5.5vw, 4.5rem);
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(2.5rem, 4vw, 3.75rem);
  --r-sm: 6px;
  --r-md: 12px;
  --shadow-sm: 0 2px 8px rgba(12, 24, 40, .06);
  --shadow-md: 0 12px 32px rgba(12, 24, 40, .10);
  --shadow-lg: 0 24px 60px rgba(12, 24, 40, .18);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .97rem + .15vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: var(--navy-700); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--navy-700); color: var(--on-dark);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; z-index: 2000; transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--on-dark); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--navy-700);
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 1.5rem + 4.2vw, 4.75rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h4 { font-size: 1.1rem; }
p { text-wrap: pretty; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
/* The ink brass is for light grounds. Anywhere the eyebrow sits on navy it
   takes the light brass instead, which reaches 10:1. */
.hero .eyebrow,
.page-hero .eyebrow,
.bg-navy .eyebrow,
.cta-band .eyebrow { color: var(--brass-lt); }

.lede { font-size: clamp(1.075rem, 1rem + .4vw, 1.3rem); color: var(--ink-mid); }
.muted { color: var(--ink-mid); }
.small { font-size: .875rem; }

/* -------------------------------------------------------------- Layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section); }
.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-navy { background: var(--navy-700); color: var(--on-dark); }
.bg-navy h2, .bg-navy h3 { color: var(--on-dark); }
.bg-navy .muted { color: rgba(248, 245, 238, .72); }
.center { text-align: center; }

.section-head { max-width: 42rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: .7rem; }
.section-head p { margin-top: 1rem; color: var(--ink-mid); font-size: 1.1rem; }

/* Brass hairline used as a section separator and heading flourish */
.rule {
  width: 64px; height: 2px; border: 0; margin: 1.5rem 0;
  background: linear-gradient(90deg, var(--brass), transparent);
}
.rule.center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--brass), transparent); width: 120px; }

/* ------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem;
  font-weight: 600; font-size: .975rem; letter-spacing: .01em;
  border: 2px solid transparent; border-radius: var(--r-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn-primary { background: var(--brass); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brass-lt); color: var(--navy-900); box-shadow: var(--shadow-md); }


.btn-ghost { border-color: rgba(248, 245, 238, .5); color: var(--on-dark); }
.btn-ghost:hover { background: rgba(248, 245, 238, .12); border-color: var(--on-dark); color: var(--on-dark); }

.btn-outline { border-color: var(--navy-700); color: var(--navy-700); }
.btn-outline:hover { background: var(--navy-700); color: var(--on-dark); }

.btn-lg { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--navy-700);
  border-bottom: 2px solid var(--brass); padding-bottom: 2px;
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.link-arrow:hover { gap: .8rem; color: var(--ember); }

/* ------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(18, 36, 58, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);   /* older Safari and iOS need the prefix */
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-on-dark);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(18, 36, 58, .98); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .55rem;
}
/* The header is navy in both themes, so the crest is always the cream one and
   needs no plate behind it. This is also what makes the header survive a
   browser that force-darks the page: force-dark leaves images alone and
   barely touches an already-dark ground, so cream-on-navy stays readable
   where navy-on-cream did not. */
.brand { display: flex; align-items: center; color: var(--on-dark); }
.brand-crest { width: clamp(80px, 10vw, 126px); height: auto; }

.nav-list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav-list a {
  position: relative; font-weight: 500; font-size: .95rem; color: var(--on-dark);
  padding-block: .5rem;
}
.nav-list a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--brass-lt); transition: right .25s var(--ease);
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { right: 0; }
.nav-list a[aria-current="page"] { font-weight: 700; color: var(--brass-lt); }
.nav-list .nav-cta { display: none; }
.header-cta { display: inline-flex; }

.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.nav-toggle span {
  display: block; position: relative; width: 24px; height: 2px;
  background: var(--on-dark); transition: background-color .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--on-dark);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: var(--hero-h);
  padding-block: var(--hero-pad);
  color: var(--on-dark);
  background: var(--navy-800);
  overflow: hidden;
  text-align: center;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.16) saturate(1.04);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(12, 24, 40, .46) 0%, rgba(12, 24, 40, .26) 50%, rgba(12, 24, 40, .46) 100%),
    linear-gradient(to top, rgba(12, 24, 40, .6), transparent 72%);
}
.hero-content { max-width: 54rem; }
.hero h1 {
  color: var(--on-dark);
  font-size: clamp(1.95rem, 1.1rem + 3.05vw, 3.3rem);
  margin-block: 0;
  text-shadow: 0 2px 24px rgba(8, 16, 28, .65);
}
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-open { background: rgba(122, 184, 122, .18); color: #8FD48F; }
.pill-closed { background: rgba(248, 245, 238, .12); color: rgba(248, 245, 238, .88); }

/* ------------------------------------------------------------ Welcome */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem); align-items: start;
}
.split-text h2 { margin-bottom: 1.25rem; }
.split-text p + p { margin-top: 1.1rem; }
.split-text p { color: var(--ink-mid); }
.split-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* Overlapping photo pair */
.photo-stack { position: relative; padding-bottom: 3.5rem; padding-right: 3rem; }
.photo-stack img { border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.photo-stack .photo-main { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-stack .photo-inset {
  position: absolute; right: 0; bottom: 0; width: 52%;
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 6px solid var(--cream); box-shadow: var(--shadow-lg);
}
.photo-caption {
  position: absolute; left: 1rem; top: 1rem;
  background: rgba(12, 24, 40, .82); color: var(--on-dark);
  padding: .35rem .75rem; border-radius: var(--r-sm);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}

/* -------------------------------------------------------------- Cards */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-media img { transform: scale(1.04); }
.card-media img { transition: transform .6s var(--ease); }
/* Two photos sharing one card's media area, for the card that talks about
   both the fire and the garden. */
.card-media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.card-media-pair img { width: 100%; height: 100%; object-fit: cover; }

.card-tag {
  position: absolute; top: .85rem; left: .85rem;
  background: var(--ember-ink); color: #fff;
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.card-body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.5rem, 3vw, 2rem); }
.card-body h3 { margin-bottom: .7rem; }
.card-body p { color: var(--ink-mid); font-size: .975rem; }
.card-body .link-arrow { margin-top: auto; padding-top: 1.4rem; align-self: flex-start; }
.card-meta {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink);
}

.card-dark { background: var(--navy-700); border-color: var(--navy-600); }
.card-dark h3 { color: var(--on-dark); }
.card-dark p { color: rgba(248, 245, 238, .78); }
.card-dark .link-arrow { color: var(--brass-lt); border-color: var(--brass); }
.card-dark .link-arrow:hover { color: #fff; }
.card-dark .card-meta { color: var(--brass-lt); }

/* ------------------------------------------------------ Feature rows */
.feature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.feature + .feature { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.feature-media {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  aspect-ratio: 4 / 3; background: var(--navy-800); box-shadow: var(--shadow-md);
}
.feature-media video { width: 100%; height: 100%; object-fit: cover; }
.feature-text .eyebrow { margin-bottom: .6rem; }
.feature-text h3 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin-bottom: 1rem; }
.feature-text p { color: var(--ink-mid); }
.feature-text p + p { margin-top: .9rem; }
.feature-text .link-arrow { margin-top: 1.5rem; }
.feature-reverse .feature-media { order: 2; }

/* --------------------------------------------------- Review carousel */
.quote-mark {
  font-family: var(--font-display); font-size: 4rem; line-height: .6;
  color: var(--brass); opacity: .6; display: block; margin-bottom: .75rem;
}

.carousel { position: relative; max-width: 52rem; margin-inline: auto; text-align: center; }

/* Every slide is stacked in the same grid cell, so the box is as tall as the
   longest review and nothing jumps as it advances. */
.carousel-viewport { display: grid; }
.carousel-track { display: grid; grid-template-areas: 'slide'; }
.carousel-slide {
  grid-area: slide;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease);
}
.carousel-slide.is-current { opacity: 1; visibility: visible; }

.carousel-slide blockquote { margin: 0; }
.carousel-slide p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.7rem);
  line-height: 1.45; color: var(--on-dark);
}
.carousel-slide cite {
  display: block; margin-top: 1.5rem; font-style: normal;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-lt);
}

.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; margin-top: 2rem;
}
.carousel-arrow {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(248, 245, 238, .28); color: var(--on-dark);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.carousel-arrow:hover { background: var(--brass); border-color: var(--brass); color: var(--navy-900); }
.carousel-arrow svg { width: 18px; height: 18px; }

.carousel-dots { display: flex; align-items: center; gap: .15rem; }
/* The visible dot is 9px but the button itself is 24px, so it is comfortably
   tappable without looking heavy. */
.carousel-dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; border-radius: 50%;
}
.carousel-dot::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(248, 245, 238, .3);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.carousel-dot:hover::after { background: rgba(248, 245, 238, .6); }
.carousel-dot.is-current::after { background: var(--brass); transform: scale(1.35); }

/* ------------------------------------------------------------- Hours */
.hours {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden;
}
.hours-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; background: var(--navy-700); color: var(--on-dark);
}
.hours-head h3 { font-size: 1.15rem; color: var(--on-dark); }
.hours-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.4rem; border-top: 1px solid var(--line); font-size: .95rem;
}
.hours-list li:first-child { border-top: 0; }
.hours-list li.is-today { background: var(--cream-2); font-weight: 600; }
.hours-list li.is-today .hours-day::after {
  content: 'Today'; margin-left: .6rem; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass-ink); font-weight: 700;
}
.hours-day { color: var(--ink); font-weight: 500; }
.hours-time { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-time.is-closed { color: var(--ink-mid); }
.hours-note { padding: 1rem 1.4rem; border-top: 1px solid var(--line); color: var(--ink-mid); font-size: .875rem; background: var(--cream); }

/* ------------------------------------------------------------ Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.info-block + .info-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.info-block h2 {
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: .6rem;
}
.info-block address { font-style: normal; color: var(--ink-mid); }
.phone-big {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  font-weight: 700; color: var(--navy-700);
}
.phone-big:hover { color: var(--ember); }
.map-frame {
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); min-height: 420px; background: var(--cream-2);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }

/* ----------------------------------------------------------- Page top */
.page-hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: var(--hero-h);
  padding-block: var(--hero-pad);
  background: var(--navy-700); color: var(--on-dark);
  overflow: hidden;
  text-align: center;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(18, 36, 58, .96), rgba(18, 36, 58, .7));
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media video,
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero-media video { filter: brightness(1.16) saturate(1.04); }
.page-hero-bleed::after {
  background:
    linear-gradient(to right, rgba(18, 36, 58, .6) 0%, rgba(18, 36, 58, .38) 55%, rgba(18, 36, 58, .6) 100%),
    linear-gradient(to top, rgba(12, 24, 40, .66), transparent 72%);
}

.hero-mark {
  width: clamp(120px, 15vw, 190px); height: auto;
  filter: drop-shadow(0 2px 14px rgba(8, 16, 28, .55));
}

/* A period photograph is far higher-key than the video heroes, so the text
   needs more ground under it than the video scrim provides. */
.page-hero-photo::after {
  background:
    linear-gradient(to right, rgba(12, 24, 40, .82) 0%, rgba(12, 24, 40, .62) 55%, rgba(12, 24, 40, .82) 100%),
    linear-gradient(to top, rgba(12, 24, 40, .8), rgba(12, 24, 40, .25) 70%);
}
.page-hero-photo .page-hero-media img { filter: grayscale(1) contrast(1.05); }

/* A hero with no photograph behind it. Used where the page is about an event
   rather than a place, and the facts are more use than a picture of an empty
   room would be. */
.page-hero-type {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(46, 111, 168, .22) 0%, transparent 60%),
    linear-gradient(var(--navy-700), var(--navy-900));
  border-bottom: 3px solid var(--brass);
}
.page-hero-type::after { content: none; }   /* no photo, so no scrim needed */
.page-hero-type h1 { text-shadow: none; }
.page-hero-type p { text-shadow: none; }
.page-hero-type .eyebrow { text-shadow: none; }

/* Fireside variant of the typographic hero, taking the rust from the flame in
   the crest. The gradient runs #A8480F to #7A330C rather than the brighter
   --ember, which cream text only reaches 4.6:1 against; these give 5.4:1 at
   the top of the hero and 8.4:1 at the bottom. */
.page-hero-rust {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(227, 107, 38, .30) 0%, transparent 62%),
    linear-gradient(#A8480F, #7A330C);
  border-bottom-color: var(--brass-lt);
}
/* The small caps are the only text on this hero small enough to need it. */
.page-hero-rust .eyebrow,
.page-hero-rust .hero-facts > li > span { color: var(--brass-on-rust); }
.page-hero-rust .hero-facts strong a { border-bottom-color: rgba(247, 228, 198, .55); }
.page-hero-rust .hero-facts strong a:hover { color: var(--brass-on-rust); border-bottom-color: var(--brass-on-rust); }

.hero-facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.hero-facts li {
  display: grid; gap: .15rem; text-align: center;
  padding-inline: clamp(1.25rem, 4vw, 3rem) 0;
  border-left: 1px solid rgba(226, 196, 142, .28);
  padding-left: clamp(1.25rem, 4vw, 3rem);
}
.hero-facts li:first-child { border-left: 0; padding-left: 0; }
.hero-facts strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  color: var(--on-dark); line-height: 1.1;
}
/* Direct child only: a fact's value may itself contain a span (the phone
   number is hydrated from the config), which must not pick up label styling. */
.hero-facts > li > span {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-lt);
}
/* A fact can be a phone number, in which case it needs to be tappable. */
.hero-facts strong a { color: inherit; border-bottom: 2px solid rgba(226, 196, 142, .5); }
.hero-facts strong a:hover { color: var(--brass-lt); border-bottom-color: var(--brass-lt); }

@media (max-width: 640px) {
  /* Five items in a row becomes a scrappy stack on a phone, so pair them up. */
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 0; }
  .hero-facts li { border-left: 0; padding-left: 0; padding-inline: 0; }
  .hero-facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.page-hero h1 {
  color: var(--on-dark); font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  margin-block: .6rem .9rem; text-shadow: 0 2px 20px rgba(8, 16, 28, .6);
}
.page-hero p {
  color: rgba(248, 245, 238, .92); max-width: 38rem; margin-inline: auto;
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  text-shadow: 0 1px 14px rgba(8, 16, 28, .6);
}
.page-hero .hero-actions { justify-content: center; }
.page-hero .eyebrow { text-shadow: 0 1px 12px rgba(8, 16, 28, .7); }

/* The food hero pairs the kitchen mark with the copy as a lockup, so it stays
   ranged left. This sits after the centring rules above deliberately: same
   specificity, so source order is what decides. */
.page-hero-split {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  text-align: left;
}
.page-hero-split p { margin-inline: 0; }
.page-hero-split .hero-actions { justify-content: flex-start; }

/* ------------------------------------------------------------ Article */
.article { max-width: 44rem; }
.article > * + * { margin-top: 1.25rem; }
.article h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem); margin-top: 3rem; }
.article h2:first-child { margin-top: 0; }
.article p { color: var(--ink-mid); }
.article strong { color: var(--ink); font-weight: 600; }
.article .dropcap::first-letter {
  float: left; font-family: var(--font-display); font-size: 4.2rem; line-height: .82;
  padding: .1em .12em 0 0; color: var(--brass); font-weight: 700;
}
.pull {
  border-left: 3px solid var(--brass); padding: .35rem 0 .35rem 1.5rem;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); color: var(--navy-700);
  margin-block: 2.5rem;
}

/* Heritage images. These are small period originals, so they are shown at
   sizes they can actually hold rather than stretched to fill a column. */
.portrait {
  float: right; width: clamp(130px, 22vw, 170px);
  margin: .35rem 0 1.25rem 1.75rem;
}
.portrait img {
  width: 100%; height: auto; border-radius: var(--r-sm);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.portrait figcaption,
.fleet-gallery figcaption {
  margin-top: .6rem; font-size: .8rem; line-height: 1.45; color: var(--ink-mid);
}
.portrait figcaption { text-align: center; }

.fleet-gallery { margin-block: 2.5rem; }
.fleet-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem; align-items: end;
}
.fleet-grid img {
  width: 100%; height: 150px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--cream-2);
  filter: sepia(.12) contrast(1.03);
}
.fleet-gallery figcaption { text-align: center; }

@media (max-width: 560px) {
  /* A floated portrait in a narrow column leaves unreadable slivers of text. */
  .portrait { float: none; width: min(190px, 60%); margin: 1.5rem auto; }
  .fleet-grid img { height: 130px; }
}

/* Timeline for the fleet history */
.timeline { border-left: 2px solid var(--line); padding-left: 1.75rem; margin-top: 2rem; }
.timeline li { position: relative; padding-bottom: 1.75rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: calc(-1.75rem - 6px); top: .55rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brass); box-shadow: 0 0 0 4px var(--cream);
}
.timeline .year {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: .8rem; letter-spacing: .16em; color: var(--brass-ink); margin-bottom: .2rem;
}
.timeline p { color: var(--ink-mid); font-size: .975rem; }

/* Feature list with brass ticks */
.ticks li { position: relative; padding-left: 1.9rem; }
.ticks li + li { margin-top: .85rem; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 12px; height: 7px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}

/* Fact panel */
.panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow-sm);
}
.panel-navy { background: var(--navy-700); border-color: var(--navy-600); color: var(--on-dark); }
.kitchen-mark { margin-top: 1.5rem; display: grid; place-items: center; padding-block: 2.5rem; }
.kitchen-mark img { width: min(230px, 72%); height: auto; }
.panel-navy h3 { color: var(--on-dark); }
.panel-navy .facts dt { color: var(--brass-lt); }
.panel-navy .facts dd { color: var(--on-dark); }
.facts { margin-top: 1.25rem; }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid rgba(0,0,0,.07); }
.panel-navy .facts div { border-color: rgba(248, 245, 238, .14); }
.facts div:first-child { border-top: 0; }
.facts dt { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); font-weight: 700; }
.facts dd { font-weight: 600; text-align: right; }

/* Simple centred link list, used by the Friends and 404 pages. */
.friends { display: grid; gap: .9rem; font-size: 1.15rem; }
.friends a { font-weight: 600; border-bottom: 2px solid var(--brass); padding-bottom: 2px; }
.friends a:hover { color: var(--ember-ink); }

/* ------------------------------------------------------------ CTA band */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-800); color: var(--on-dark); text-align: center;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .22;
  background: url('../assets/img/interior.jpg') center/cover;
}
/* When the closing call to action follows another dark section, a brass
   hairline keeps the two from reading as one slab. */
.bg-navy + .cta-band { border-top: 2px solid rgba(197, 160, 89, .4); }
.cta-band h2 { color: var(--on-dark); }
.cta-band p { color: rgba(248, 245, 238, .8); margin-top: 1rem; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* ------------------------------------------------------------- Footer */
.site-footer { background: var(--navy-900); color: rgba(248, 245, 238, .72); border-top: 3px solid var(--brass); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* The brand column reads as a block: crest, address and social all centred
   on the same axis. */
.footer-brand { text-align: center; }
.footer-crest { width: 190px; height: auto; margin: 0 auto 1.5rem; }
.footer-brand address {
  font-style: normal;          /* browsers italicise <address> by default */
  font-size: .95rem; line-height: 1.75;
  color: rgba(248, 245, 238, .8);
}
.footer-grid h2 {
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem;
}
.footer-grid a { color: rgba(248, 245, 238, .78); font-size: .95rem; }
.footer-grid a:hover { color: var(--brass-lt); }
.footer-links li + li { margin-top: .55rem; }
.footer-hours { border: 0; }
.footer-hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .9rem; padding: .4rem 0;
  border-top: 1px solid rgba(248, 245, 238, .1);
}
.footer-hours li:first-child { border-top: 0; }
.footer-hours .hours-day { color: rgba(248, 245, 238, .88); font-weight: 500; }
.footer-hours .hours-time { color: rgba(248, 245, 238, .68); }
.footer-hours .hours-time.is-closed { color: rgba(248, 245, 238, .6); }
/* .muted is an ink tone; on the dark footer it needs the cream equivalent. */
.site-footer .muted { color: rgba(248, 245, 238, .62); }
.footer-hours li.is-today { background: none; }
.footer-hours li.is-today .hours-day,
.footer-hours li.is-today .hours-time { color: var(--brass-lt); }
.footer-hours li.is-today .hours-day::after { color: var(--brass-lt); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding-block: 1.4rem; border-top: 1px solid rgba(248, 245, 238, .12);
  font-size: .82rem; color: rgba(248, 245, 238, .5);
}
.social { display: inline-flex; gap: .6rem; margin-top: 1.25rem; justify-content: center; }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(248, 245, 238, .2); color: var(--on-dark);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover { background: var(--brass); border-color: var(--brass); color: var(--navy-900); }
.social svg { width: 18px; height: 18px; }

/* --------------------------------------------------------- Sticky call */
.call-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(248, 245, 238, .97); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(12, 24, 40, .12);
}

/* ------------------------------------------------------------- Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------- Responsive */
@media (max-width: 960px) {
  .split, .contact-grid { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 1.75rem; }
  .feature-reverse .feature-media { order: -1; }
  .photo-stack { padding-right: 2rem; padding-bottom: 3rem; max-width: 34rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  /* Stacked on a phone the mark would push this hero well past the height of
     the others, so it comes down in size to keep them close. */
  /* Stacked on a phone the hero reads better centred, like the home one. */
  .page-hero-split { grid-template-columns: 1fr; gap: 1.1rem; justify-items: center; text-align: center; }
  .page-hero-split p { margin-inline: auto; }
  .page-hero-split .hero-actions { justify-content: center; }
  .hero-mark { width: 84px; }

  .footer-crest { width: 150px; margin-bottom: 1.25rem; }
  .footer-grid { padding-block: clamp(2.25rem, 8vw, 3rem); }
  .footer-grid h2 { margin-bottom: .75rem; }
  .nav-list a { font-size: 1rem; }

  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    /* The drawer hangs off the header, so it takes the header's navy. It was
       cream, which turned the whole phone menu into cream links on cream. */
    background: var(--navy-800); border-bottom: 1px solid var(--line-on-dark);
    box-shadow: var(--shadow-md);
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
  }
  .site-nav > div { overflow: hidden; }
  .site-nav.is-open { grid-template-rows: 1fr; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem; }
  .nav-list li { border-top: 1px solid var(--line-on-dark); }
  .nav-list a { display: block; padding: 1rem 0; font-size: 1.05rem; }
  .nav-list a::after { display: none; }
  .nav-list .nav-cta { display: block; margin-top: 1rem; border-top: 0; }
  .nav-list .nav-cta a { text-align: center; }

  .call-bar { display: block; }
  body { padding-bottom: 72px; }
}

@media (max-width: 520px) {
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .photo-stack .photo-inset { width: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   DARK THEME
   Not an inversion of the light one. The pub is navy and brass at night, so
   the grounds go navy and the cream becomes the ink. Everything below is a
   token swap plus the handful of surfaces whose colour was not tokenised.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Grounds, from the page back to the most raised surface. */
    --cream:    #0E1B2C;   /* page ground */
    --cream-2:  #142438;   /* alternating band */
    --paper:    #17293E;   /* cards and panels */
    --line:     #26394F;

    /* Ink becomes cream. */
    --ink:      #F0EADD;
    --ink-mid:  #A9B4C2;

    /* On dark grounds the brass has to lighten to stay legible: the ink brass
       is for light backgrounds only. */
    --brass-ink: #D9BF8E;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-md: 0 12px 34px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  }

  .page-hero-rust {
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(227, 107, 38, .22) 0%, transparent 62%),
      linear-gradient(#8E3B0C, #5E2708);
  }

  /* The header is navy in both themes, so it only drops a shade here. */
  .site-header { background: rgba(12, 24, 40, .92); }
  .site-header.is-stuck { background: rgba(12, 24, 40, .98); }
  .call-bar {
    background: rgba(14, 27, 44, .97); border-top-color: var(--line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .5);
  }
  .facts div { border-top-color: rgba(248, 245, 238, .12); }

  /* The footer sits on the same navy as the page, so it needs its own floor
     to stay a distinct band rather than merging into the last section. */
  .site-footer { background: #08111E; }

  /* The quiz card and the navy panels were the dark note against a light page.
     Against a dark page they need an edge instead of a fill to read as raised. */
  .card-dark { background: var(--navy-700); border-color: #2E486B; }
  .panel-navy { border-color: #2E486B; }

  /* Period photographs and the pub's own images are lit for a light page. */
  .fleet-grid img, .portrait img { filter: sepia(.12) contrast(1.02) brightness(.94); }
  .card-media img, .feature-media video, .photo-stack img,
  .card-media-pair img, .kitchen-mark img { filter: brightness(.92); }

  /* The map is third-party and stays light; soften it so it is not a torch. */
  .map-frame iframe { filter: brightness(.88) contrast(1.02); }

  /* Anything that was navy because the ground was light has to become ink. */
  h1, h2, h3, h4 { color: var(--ink); }
  a { color: var(--ink); }
  a:hover { color: var(--brass-lt); }
  .link-arrow { color: var(--ink); }
  .link-arrow:hover { color: var(--brass-lt); }
  .btn-outline { border-color: var(--brass); color: var(--brass-lt); }
  .btn-outline:hover { background: var(--brass); color: var(--navy-900); }
  .pull { color: var(--ink); }
  .phone-big { color: var(--brass-lt); }
  .phone-big:hover { color: var(--ember); }
  .timeline .year, .info-block h2, .card-meta, .eyebrow, .facts dt,
  .hours-list li.is-today .hours-day::after { color: var(--brass-lt); }

  /* These sit on navy already, so they keep the light ink they always had. */
  .bg-navy h2, .bg-navy h3, .card-dark h3, .hours-head h3,
  .panel-navy h3, .cta-band h2, .page-hero h1, .hero h1 { color: var(--on-dark); }
}

@media print {
  .site-header, .call-bar, .hero-media, .map-frame, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}