/* ============================================================
   Scott Anderson Event Catering — "The Menu Card" design system
   Bodoni Moda (display) · Hanken Grotesk (text)
   "English Rose", client-approved: Rosewater #F3E6E7 · Deep damson
   #4A3040 · Dusty peony #C9949E — plus white, carrying equal weight.
   Distributed the way Kalm Kitchen distributes its own: white is the
   page, the tint is a BAND not the ground, the dark is the anchor and
   the accent is spent in one place. No browns anywhere in the ramp.
   ============================================================ */

:root {
  --parchment:      #FFFFFF;   /* white — the page is mostly this */
  --parchment-deep: #F3E6E7;   /* Rosewater — the banded sections */
  --white:          #FFFFFF;
  --stone:          #F7EDEE;   /* Rosewater at half strength */
  --blush:          #FCF7F8;   /* the faintest rosewater */
  --rose:           #C9949E;   /* Dusty peony — the feature drench (approved) */
  --rose-deep:      #9C4B60;   /* peony deepened, for highlight text */
  --sage:           #F3E6E7;   /* folded into Rosewater; it was never green */
  --ink:            #4A3040;   /* Deep damson (approved) */
  --ink-soft:       #6B5266;   /* damson at reading weight */
  --cocoa:          #4A3040;
  --cocoa-deep:     #392435;
  --soft-black:     #33202E;
  --brass:          #C9949E;   /* Dusty peony — hairlines and rules */
  --brass-ink:      #8A4A5E;   /* deep peony — smallcaps and links */
  --brass-soft:     #E8C8D0;   /* peony tint on dark imagery */
  --linen:          #FFF9FA;
  --linen-soft:     rgba(255,249,250,.82);
  --scrim:          rgba(74,48,64,.45);
  --frame:          clamp(0.9rem, 2vw, 2rem);
  --header-h:       7.5rem;
  --announce-h:     2.6rem;
  --top-offset:     calc(var(--header-h) + var(--announce-h));
  --radius:         6px;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --script: "WindSong", "Snell Roundhand", cursive;

  --step-0: 1.05rem;
  --step-1: clamp(1.28rem, 1.1rem + 0.7vw, 1.6rem);
  --step-2: clamp(1.7rem, 1.35rem + 1.4vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  --step-4: clamp(2.8rem, 1.9rem + 4.2vw, 5.2rem);
  --step-5: clamp(3rem, 1.9rem + 5.2vw, 5.6rem);

  --space: clamp(5rem, 3.2rem + 6.5vw, 10rem);
  --space-half: clamp(2.8rem, 2.2rem + 2.6vw, 5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 66ch;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  /* Fraunces ships its "wonky" alternates on by default — a looped ampersand and a
     single-storey g that read as eccentric in a wedding heading. WONK 0 takes the
     conventional forms. Inherited, so every var(--serif) use picks it up; faces
     without the axis ignore it. Verified: font-weight still drives wght alongside it. */
  font-variation-settings: "WONK" 0;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

::selection { background: var(--cocoa); color: var(--linen); }

/* one warm focus ring for the whole site — never the browser's blue */
:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .band :focus-visible, .drench :focus-visible,
.site-header.on-hero :focus-visible, .nav-wrap :focus-visible { outline-color: var(--linen); }

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

/* ---------- type ---------- */
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.005em;
}
/* Fraunces thickens its hairlines as weight rises (unlike Playfair/Bodoni, whose
   thin strokes stay frozen), so weight is a real lever over photography. It also
   carries an optical-size axis: font-optical-sizing below lets the big headings
   take the high-contrast display cut and the small ones a sturdier text cut. */
.hero h1, .band .pull, .drench h2 { font-weight: 600; }
@media (max-width: 768px) { h1, h2, h3, .serif { font-weight: 600; } }
h1, h2, h3 { text-wrap: balance; }
.lede, .faq .faq-a p, .assure .col p { text-wrap: pretty; }
h1 { font-size: var(--step-5); letter-spacing: -0.018em; }
h2 { font-size: var(--step-4); letter-spacing: -0.014em; }
h3 { font-size: var(--step-2); }
h1 em, h2 em, h3 em, .pull em { font-style: italic; font-weight: 500; }
p { max-width: var(--measure); }
.lede { font-size: var(--step-1); line-height: 1.55; font-weight: 300; color: var(--ink-soft); }
.smallcaps {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* anchored sections must clear the fixed header */
[id] { scroll-margin-top: calc(var(--top-offset) + 1rem); }

/* ---------- layout ---------- */
.container { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 820px); margin-inline: auto; }
section { padding-block: var(--space); }
section.tight { padding-block: var(--space-half); }

/* the course mark: hairline — diamond — hairline */
.course-mark {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  margin-bottom: 1.8rem; color: var(--brass);
}
.course-mark::before, .course-mark::after {
  content: ""; height: 1px; width: clamp(2.5rem, 6vw, 4.5rem); background: currentColor; opacity: 0.75;
}
.course-mark svg { flex: none; }
.course-mark.left { justify-content: flex-start; }
.course-mark.left::after { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  padding: 1.1em 2.3em; border: 1px solid transparent;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
              border-color .35s var(--ease-out), letter-spacing .35s var(--ease-out);
  text-align: center;
}
.btn::after {
  content: "\2192"; display: inline-block; margin-left: 0.9em;
  transition: transform .35s var(--ease-out);
}
.btn:hover::after { transform: translateX(4px); }
.btn--primary { background: var(--cocoa); color: var(--linen); border-color: var(--cocoa); }
.btn--primary:hover { background: var(--cocoa-deep); border-color: var(--brass); letter-spacing: 0.22em; }
.btn--ghost { border-color: rgba(74,48,64,.45); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brass); background: var(--parchment-deep); letter-spacing: 0.22em; }
.btn--linen { border-color: rgba(255,249,250,.55); color: var(--linen); }
.btn--linen:hover { border-color: var(--brass); background: rgba(255,249,250,.1); letter-spacing: 0.22em; }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; }

.text-link {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); padding-bottom: 0.45em; position: relative; white-space: nowrap;
}
.text-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--brass); transform: scaleX(0.35); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.text-link:hover::after { transform: scaleX(1); }
.text-link.linen { color: var(--linen); }

/* mobile: type spans almost the full frame, so the pool runs taller — but it is
   still one pool, and the flat frame-wide tints that used to sit under these are
   gone. Kept !important because these were, and later rules must not lose. */
@media (max-width: 900px) {
  .hero .bg::after {
    background:
      linear-gradient(to top, rgba(40,24,34,.80) 0%, rgba(40,24,34,.76) 18%, rgba(40,24,34,.70) 34%, rgba(40,24,34,.62) 47%, rgba(40,24,34,.44) 58%, rgba(40,24,34,.18) 70%, rgba(40,24,34,.04) 78%, transparent 86%) !important;
  }
}

/* ---------- announcement bar (availability) ---------- */
.announce {
  background: var(--parchment-deep); color: var(--ink); border-bottom: 1px solid rgba(74,48,64,.08);
  min-height: var(--announce-h); max-height: 12rem; display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: max-height .45s var(--ease-out), opacity .35s var(--ease-out);
}
.announce p {
  margin: 0; max-width: none; text-align: center;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding-inline: 1rem;
}
.announce .hl { color: var(--rose-deep); font-weight: 600; }
.announce a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(74,48,64,.3); display: inline-block; padding: 1.15rem 0.35rem 1rem; line-height: 1; }
.announce a:hover { border-bottom-color: var(--rose-deep); }
.site-header.scrolled .announce { max-height: 0; min-height: 0; opacity: 0; }

body.lb-open .site-header { opacity: 0; pointer-events: none; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out),
              border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
  background: transparent;
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.85rem;
}
/* nav-wrap is transparent to layout on desktop; becomes the overlay on mobile */
.nav-wrap { display: contents; }
.site-nav--left { order: 1; flex: 1 1 0; justify-content: flex-start; }
.wordmark { order: 2; text-align: center; }
.site-nav--right { order: 3; flex: 1 1 0; justify-content: flex-end; }
.menu-toggle { order: 4; }
.wordmark .roundel {
  /* height, not width: the header's height must not depend on the proportions of
     roundel-damson.png. Sized by width with height:auto, a tall mark grew the
     header past the --header-h budget the hero card is positioned from, and the
     header covered the top of the card. */
  height: 46px; width: auto; max-width: 76px; object-fit: contain;
  margin: 0 auto 0.34rem; display: block;
  transition: opacity .4s var(--ease-out);
}
.site-header .wordmark .roundel { transform: scale(1.1); }
.site-header .wordmark .sub { display: block; }
.wordmark { text-decoration: none; line-height: 1.15; display: block; }
.wordmark .name {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.045em;
  display: block; white-space: nowrap; line-height: 1;
}
@media (max-width: 1240px) {
  .site-header .wordmark .name { font-size: 1.28rem; }
  .site-header .wordmark .roundel { height: 40px; max-width: 66px; }
  .site-nav { gap: clamp(0.8rem, 1.4vw, 1.25rem); }
  .site-nav a:not(.btn) { font-size: 0.76rem; letter-spacing: 0.07em; }
  .site-header .btn { padding: 0.8em 1.2em; font-size: 0.68rem; letter-spacing: 0.14em; }
  .site-header .btn::after { margin-left: 0.6em; }
}
.wordmark .sub {
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.82rem); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-ink); display: block; margin-top: 0.18rem;
}
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.site-nav a:not(.btn) {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; position: relative; padding-block: 0.4em; white-space: nowrap;
}
.site-header .btn { white-space: nowrap; }
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.site-nav a:not(.btn):hover::after, .site-nav a.active::after { transform: scaleX(1); }
.site-nav .btn { padding: 0.85em 1.6em; }

/* header states: the header lives on the ground, Kalm-style — always light */
.site-header, .site-header.on-hero { background: var(--parchment); color: var(--ink); }
.site-header .wordmark .sub, .site-header.on-hero .wordmark .sub { color: var(--brass-ink); }
.site-header .btn--linen { border-color: rgba(74,48,64,.4); color: var(--ink); }
.site-header .btn--linen:hover { border-color: var(--brass); background: var(--parchment-deep); }
.site-header.scrolled .bar { padding-block: 0.5rem; }
.site-header.scrolled .wordmark .roundel { height: 28px; margin-bottom: 0.15rem; }
.site-header.scrolled {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(201,148,158,.25);
}

.menu-toggle { display: none; z-index: 75; }
.menu-toggle .lines { display: block; width: 26px; }
.menu-toggle .lines span {
  display: block; height: 1px; background: currentColor; margin: 7px 0;
  transition: transform .4s var(--ease-out), opacity .3s;
}
body.menu-open .menu-toggle .lines span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .menu-toggle .lines span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle .lines span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1080px) {
  .menu-toggle { display: block; }
  /* the wrapper becomes the single fullscreen overlay; both nav groups stack inside */
  .nav-wrap {
    display: flex; position: fixed; inset: 0; z-index: 70;
    flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
    background: var(--parchment); color: var(--ink);
    opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility 0s .45s;
    overflow-y: auto; padding: 5.5rem 1.5rem 3rem;
  }
  body.menu-open .nav-wrap { opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav-wrap::before {
    content: ""; width: 66px; height: 58px; flex: none;
    background: url("../img/roundel-damson.png") center / contain no-repeat;
    opacity: 0.9; margin-bottom: 0.5rem;
  }
  .site-nav, .site-nav--left, .site-nav--right {
    flex-direction: column; align-items: center; gap: 1.5rem; flex: none; order: 0;
  }
  .site-nav a:not(.btn) { font-size: 1.08rem; letter-spacing: 0.14em; }
  .site-nav .btn { border-color: rgba(74,48,64,.35); color: var(--ink); margin-top: 0.4rem; padding-block: 1.25em; }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-header { color: var(--ink); background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.menu-open .wordmark .roundel { opacity: 0; }
  @media (max-height: 520px) {
    .nav-wrap { gap: 0.3rem; padding: 3rem 1.5rem 1.2rem; justify-content: flex-start; }
    .nav-wrap::before { display: none; }
    .site-nav, .site-nav--left, .site-nav--right { gap: 0.3rem; }
    .site-nav a:not(.btn) { font-size: 0.88rem; padding-block: 0.5em; }
    .site-nav .btn { padding-block: 0.75em; margin-top: 0.1rem; }
  }
  /* landscape phones: two columns so everything clears the fold */
  @media (max-height: 430px) and (orientation: landscape) {
    .nav-wrap { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0 3rem; padding-top: 2.6rem; }
    .site-nav--left, .site-nav--right { gap: 0.45rem; }
  }
  /* comfortable touch targets (>=44px) */
  .menu-toggle { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -10px; }
  .site-footer ul a, .site-footer .socials a, .site-footer .contact-lines a,
  .detail-block a, .text-link {
    display: inline-block; min-height: 44px; line-height: 44px;
  }
  .site-footer ul { gap: 0.1rem; }
  .site-footer .contact-lines { gap: 0.1rem; }
  .site-footer .socials { gap: 1.6rem; }
  .wordmark { padding-block: 6px; }

  /* header lockup returns to the left on mobile */
  :root { --header-h: 5.3rem; --announce-h: calc(4.8rem + env(safe-area-inset-top, 0px)); }
  .site-header .bar { justify-content: space-between; }
  .wordmark { text-align: left; }
  .site-header .wordmark {
    display: grid; grid-template-columns: auto auto; align-items: center;
    column-gap: 0.6rem; row-gap: 0; text-align: left;
  }
  .site-header .wordmark .roundel {
    display: block; height: 38px; width: auto; max-width: 60px;
    grid-row: 1 / 3; margin: 0; align-self: center;
  }
  .site-header .wordmark .name { grid-column: 2; font-size: 1.28rem; letter-spacing: 0.03em; }
  .site-header .wordmark .sub  { grid-column: 2; margin-top: 0.14rem; font-size: 0.7rem; letter-spacing: 0.18em; }
  .site-header .wordmark .sub { display: block; }
  .announce p { font-size: 0.7rem; letter-spacing: 0.06em; line-height: 1.3; padding-top: calc(.75rem + env(safe-area-inset-top, 0px)); padding-bottom: .25rem; }
  .sm-hide { display: none; }
}

/* ---------- hero: image inset in a frame of ground, Kalm-style ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: var(--linen); overflow: hidden;
  padding: calc(var(--top-offset) + var(--frame)) 0 var(--frame);
}
.hero.short { min-height: 80svh; }
@media (max-width: 900px) {
  /* the box is the whole screen, so the picture ends where the fold does and the
     lockup is never scrolled off in order to see it. Everything inside is a size
     smaller, which is what leaves the top half of the photograph uncovered. */
  .hero { min-height: 100svh; }
  .hero.short { min-height: 62svh; }
  .hero .btn-row { gap: 0.55rem 1.1rem; align-items: center; }
  /* Kalm pairs one button with one bare link rather than two boxes */
  .hero .btn-row .btn--linen {
    border: 0; padding: 0.5em 0.2em; letter-spacing: 0.18em;
  }
  .hero .btn-row .btn--linen:hover { background: none; letter-spacing: 0.2em; }
  .hero .btn-row .btn--primary { padding: 1em 1.7em; }
  .hero .btn-row .btn { font-size: 0.68rem; }
}
.hero .bg {
  position: absolute; overflow: hidden; border-radius: var(--radius);
  inset: calc(var(--top-offset) + var(--frame)) var(--frame) var(--frame);
}
.hero .bg img { width: 100%; height: 100%; object-fit: cover; }
/* ONE soft falloff from the edge the type sits against, and nothing else.
   Three stacked layers used to tint the whole frame; the picture keeps its own
   light now, and only the words get a floor. */
.hero .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(40,24,34,.70) 0%, rgba(40,24,34,.58) 22%, rgba(40,24,34,.38) 42%, rgba(40,24,34,.16) 58%, rgba(40,24,34,.03) 70%, transparent 80%),
    linear-gradient(to top, rgba(40,24,34,.38) 0%, rgba(40,24,34,.16) 24%, rgba(40,24,34,.02) 44%, transparent 56%);
}
/* hero slideshow (home): slow crossfade between wow plates */
.hero-slides .slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.8s var(--ease-out);
}
/* slides are <picture> elements; the crossfade lives on the wrapper */
.hero-slides picture.slide { display: block; }
.hero-slides picture.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slides .slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero .bg img { animation: kenburns 14s var(--ease-out) both; }
  @keyframes kenburns { from { transform: scale(1.07); } to { transform: scale(1); } }
}
/* the stack is a flex column so the order of its parts is a decision rather than
   an accident of the markup. */
.hero .container {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  padding-block: clamp(2.2rem, 5vh, 3.6rem) clamp(2.6rem, 5.5vh, 4.2rem);
}
.hero h1 {
  max-width: 9.2em;
  font-size: clamp(2.6rem, 0.61rem + 4.46vw, 4.6rem);
  /* a tight shadow for the edge and a wide soft one for the ground. Local to the
     glyphs, so it buys legibility without laying anything across the picture. */
  text-shadow: 0 1px 2px rgba(40,24,34,.5), 0 2px 20px rgba(40,24,34,.58);
}
.hero .lede {
  color: var(--linen); max-width: 34ch; margin-top: 1.1rem;
  font-size: clamp(1.05rem, 0.95rem + 0.42vw, 1.26rem);
  text-shadow: 0 0 3px rgba(40,24,34,.8), 0 1px 2px rgba(40,24,34,.88), 0 1px 14px rgba(40,24,34,.5);
}
.hero .btn-row { margin-top: 1.7rem; }
.hero .accolade {
  /* the award line stays at the foot of the stack, where the falloff is already
     deepest, so it needs no tint of its own. What it loses is the rule above it,
     the second item, and two thirds of its bulk. */
  margin: 1.4rem 0 0; padding-top: 0; position: relative; max-width: none;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.9rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,249,250,.94);
 text-shadow: 0 0 2px rgba(40,24,34,1), 0 0 5px rgba(40,24,34,.98), 0 0 11px rgba(40,24,34,.8), 0 1px 2px rgba(40,24,34,1); }
.hero .accolade::before { content: none; }
/* one line of eyebrow, not two: the founding date is already in the lede and the
   footer, and a second item pushed the line out past its own floor */
.hero .accolade span + span { display: none; }
.hero .accolade strong { color: var(--brass-soft); font-weight: 600; }

/* hero line choreography */
.hero .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero .line > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .line > span { transform: translateY(110%); animation: riseline 1.1s var(--ease-out) forwards; }
  .js .hero .line:nth-child(2) > span { animation-delay: .12s; }
  .js .hero .line:nth-child(3) > span { animation-delay: .24s; }
  .js .hero .lede, .js .hero .btn-row, .js .hero .accolade { opacity: 0; animation: fadeup 1.1s var(--ease-out) forwards; }
  .hero .lede { animation-delay: .45s; }
  .hero .btn-row { animation-delay: .6s; }
  .hero .accolade { animation-delay: .72s; }
  @keyframes riseline { to { transform: translateY(0); } }
  @keyframes fadeup { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
}

/* ---------- scroll reveals ---------- */
/* progressive enhancement: content is visible by default and only animates when
   JS is present, so a failed/blocked script can never leave the page blank */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal-img { overflow: hidden; }
.js .reveal-img img { transform: scale(1.06); transition: transform 1.4s var(--ease-out); }
.js .reveal-img.in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img img { opacity: 1; transform: none; transition: none; }
}

/* ---------- food filmstrip: a slow scroll of plates ---------- */
.filmstrip { padding-block: var(--frame); background: var(--parchment); overflow: hidden; }
.strip-track { display: flex; width: max-content; animation: stripmove 85s linear infinite; }
.filmstrip:hover .strip-track, .filmstrip:not(.strip-started) .strip-track { animation-play-state: paused; }
.strip-track figure { margin: 0 clamp(0.5rem, 1vw, 0.8rem) 0 0; flex: none; }
.strip-track img { height: clamp(190px, 24vw, 310px); width: auto; display: block; border-radius: var(--radius); }
.strip-track img.strip-landscape { width: clamp(285px, 36vw, 465px); object-fit: cover; object-position: center 48%; }
@keyframes stripmove { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
  .filmstrip { overflow-x: auto; }
}

/* two-column FAQ at point of intent */
.faq-split { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq-split h2 { font-size: var(--step-3); }
@media (max-width: 860px) { .faq-split { grid-template-columns: 1fr; } }
.drench--blush .faq-list { border-top-color: rgba(138,85,96,.35); }
.drench--blush .faq { border-bottom-color: rgba(138,85,96,.35); }

.gal-nav {
  background: var(--parchment-deep); border-block: 1px solid rgba(201,148,158,.28);
  position: sticky; top: 4rem; z-index: 40;
}
.gal-nav .container--wide { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 2.2rem; padding-block: 0.9rem; }
.gal-nav a {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 0.55rem 0.2rem;
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-out), color .3s;
}
.gal-nav a:hover { border-bottom-color: var(--brass); color: var(--brass-ink); }
@media (max-width: 900px) {
  /* one swipeable row instead of a three-line block that eats the screen */
  .gal-nav { top: 4rem; }
  .gal-nav .container--wide {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 1.4rem; padding-block: 0.55rem; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .gal-nav .container--wide::-webkit-scrollbar { display: none; }
  .gal-nav a { font-size: 0.66rem; letter-spacing: 0.1em; white-space: nowrap; flex: none; scroll-snap-align: start; padding-block: 0.7rem; }
}

/* ---------- mobile refinements: softer, airier, more structured ---------- */
@media (max-width: 700px) {
  :root { --space: clamp(3.6rem, 2.4rem + 6vw, 5.5rem); --space-half: clamp(2.2rem, 1.8rem + 2.4vw, 3.4rem); }
  .hero h1 { font-size: clamp(1.95rem, 1.35rem + 3.2vw, 2.5rem); line-height: 1.1; }
  .hero .lede { font-size: 0.96rem; line-height: 1.5; max-width: none; }
  /* editorial images get room to breathe instead of stacking tight */
  .editorial .pics { padding-bottom: 1.6rem; }
  .editorial .pics .pic-a { width: 88%; }
  .editorial .pics .pic-b { width: 52%; bottom: -4%; }
  .editorial .words { padding-top: 1.6rem; }
  /* the filmstrip reads as a proper ribbon, not a thin band */
  .strip-track img { height: 190px; }
  /* course + journey blocks: single clean column with a hairline between */
  .course, .venue-row { gap: 1rem 0; }
  .course .txt, .venue-row .txt { padding-top: 0.4rem; }
  /* menu cards sit edge to edge like stationery */
  .menu-card { padding: 2rem 1.4rem; }
  /* softer separation between sections */
  .drench { padding-block: var(--space); }
  .placecard { padding: 1.8rem 1.5rem; }
}

.masonry figure { position: relative; }
.masonry figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.2rem 1rem 0.95rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.02em; line-height: 1.35; color: #fff;
  background: linear-gradient(to top, rgba(56,36,48,.82) 0%, rgba(56,36,48,.5) 55%, transparent 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
}
.masonry figure:hover figcaption,
.masonry figure:focus-visible figcaption { opacity: 1; transform: none; }
/* touch devices have no hover — show it softly at rest */
@media (hover: none) {
  .masonry figcaption { opacity: 1; transform: none; font-size: 0.72rem; padding-top: 1.6rem; }
}
.lightbox .lb-caption {
  position: absolute; left: 0; right: 0; bottom: 2.2vmin; text-align: center;
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.06em;
  color: rgba(255,249,250,.92); padding: 0 1.5rem;
}

.bios { columns: 2 420px; column-gap: clamp(2rem, 4vw, 3.6rem); }
.bio {
  break-inside: avoid; margin-bottom: clamp(2rem, 4vw, 3.2rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid rgba(74,48,64,.12);
}
.bio h3 { font-size: var(--step-2); margin-bottom: 0.15rem; }
.bio .role {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-ink);
  margin-bottom: 1rem;
}
.bio p { color: var(--ink-soft); max-width: none; }
@media (max-width: 760px) { .bios { columns: 1; } }

/* legal + long-form prose */
.legal p { max-width: 68ch; margin-bottom: 1.05rem; color: var(--ink-soft); }
.legal .legal-h {
  font-size: var(--step-2); margin: 2.6rem 0 1rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(74,48,64,.12);
}
.legal .legal-h:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal .legal-h + .legal-h { margin-top: 0.2rem; padding-top: 0; border-top: none; }

.dl-list { margin-top: 1.4rem; }
.dl-list li + li { margin-top: 0.6rem; }
.dl-list a {
  display: inline-block; text-decoration: none; font-family: var(--sans);
  font-size: 0.95rem; font-weight: 500; color: var(--ink);
  padding: 0.7rem 0; border-bottom: 1px solid rgba(201,148,158,.5);
  transition: border-color .3s, color .3s;
}
.dl-list a:hover { border-bottom-color: var(--rose-deep); color: var(--brass-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- FAQ accordion ---------- */
.faq-list { border-top: 1px solid rgba(201,148,158,.35); }
.faq { border-bottom: 1px solid rgba(201,148,158,.35); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 1.5rem 0; font-family: var(--serif); font-size: var(--step-1); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-left: auto; margin-top: 0.45em;
  border-right: 1px solid var(--brass-ink); border-bottom: 1px solid var(--brass-ink);
  transform: rotate(45deg); transition: transform .35s var(--ease-out);
}
.faq[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--brass-ink); }
.faq .faq-a { padding: 0 0 1.6rem; }
.faq .faq-a p { color: var(--ink-soft); max-width: 62ch; }

/* ---------- availability seal (home) ---------- */
.availability { background: var(--blush); padding-block: var(--space); }
.availability .inner {
  display: grid; grid-template-columns: auto minmax(0, 44ch); gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center; justify-content: center;
}
.availability .seal { width: clamp(96px, 12vw, 140px); height: auto; flex: none; opacity: 0.9; }
.availability h2 { font-size: var(--step-3); margin-bottom: 0.6rem; }
.availability p { margin-bottom: 1.6rem; }
.availability .dates {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-bottom: 1.7rem;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.availability .dates span { display: inline-flex; align-items: center; gap: 0.6rem; }
.availability .dates .n { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--brass-ink); letter-spacing: 0; text-transform: none; }
@media (max-width: 700px) {
  .availability .inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .availability p { margin-inline: auto; }
  .availability .dates { justify-content: center; }
}

/* The "light hero" was dark ink under a whitening wash. The wash is the thing
   that had to go, and dark type on a photograph is what forced it — so the hero
   takes light type over the same soft falloff the bands use. One treatment across
   every photograph on the site, and no white over any of them. */
.hero--light { color: var(--linen); }
.hero--light h1 { color: var(--linen); }
.hero--light .lede { color: var(--linen); }
.hero--light .accolade { color: rgba(255,249,250,.94); }
.hero--light .accolade strong { color: var(--brass-soft); }
.hero--light .btn--linen {
  border-color: rgba(255,249,250,.6); color: var(--linen);
  text-shadow: 0 0 3px rgba(40,24,34,.9), 0 1px 2px rgba(40,24,34,.92);
}
.hero--light .btn--primary { text-shadow: none; }
.hero--light .btn--linen:hover { border-color: var(--linen); background: rgba(255,249,250,.14); }
@media (max-width: 900px) {
  /* the phone pool is set in the earlier mobile block, which carries !important */
}

/* ---------- trust strip ---------- */
.trust-strip {
  background: var(--parchment-deep); color: var(--ink); padding-block: 1.35rem;
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  border-bottom: 1px solid rgba(201,148,158,.25);
}
.trust-strip .container--wide {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.1rem; text-align: center;
}
.trust-strip .dot { color: var(--brass-ink); }
.trust-strip .lead { color: var(--brass-ink); font-weight: 600; }

/* ---------- editorial split (overlapping images) ---------- */
.editorial { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; row-gap: 2.5rem; }
.editorial .pics { grid-column: 1 / 7; position: relative; padding-bottom: 3rem; }
.editorial .pics .pic-a { width: 72%; aspect-ratio: 4 / 5; }
.editorial .pics .pic-a img { width: 100%; height: 100%; object-fit: cover; }
.editorial .pics .pic-b {
  position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 4 / 3;
  border: 6px solid var(--parchment); box-shadow: 0 26px 54px rgba(74,48,64,.11);
}
.editorial .pics .pic-b img { width: 100%; height: 100%; object-fit: cover; }
.editorial .words { grid-column: 8 / 13; }
.editorial.flip .pics { grid-column: 6 / 13; order: 2; }
.editorial.flip .pics .pic-a { margin-left: auto; }
.editorial.flip .pics .pic-b { right: auto; left: 0; }
.editorial.flip .words { grid-column: 1 / 5; order: 1; }
.editorial .words h2 { font-size: var(--step-3); margin-bottom: 1.3rem; }
.editorial .words p + p { margin-top: 1.1rem; }
.editorial .words .text-link { display: inline-block; margin-top: 1.9rem; }
@media (max-width: 900px) {
  .editorial .pics, .editorial.flip .pics { grid-column: 1 / 13; order: 1; }
  .editorial .words, .editorial.flip .words { grid-column: 1 / 13; order: 2; }
  .editorial .pics .pic-b { bottom: -10%; }
  .editorial .words { padding-top: 1rem; }
}

/* ---------- courses (your day) ---------- */
.courses { display: grid; gap: var(--space-half); margin-top: var(--space-half); }
.course { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 1.5rem 0; }
.course .img { grid-column: 1 / 7; }
.course .txt { grid-column: 8 / 13; }
.course:nth-child(even) .img { grid-column: 7 / 13; order: 2; }
.course:nth-child(even) .txt { grid-column: 1 / 6; order: 1; }
.course .no {
  font-family: var(--serif); font-style: italic; font-size: var(--step-3);
  color: var(--brass-ink); line-height: 1; display: block; margin-bottom: 0.7rem;
}
.course h3 { margin-bottom: 0.9rem; }
.course p { color: var(--ink-soft); }
@media (max-width: 820px) {
  .course .img, .course:nth-child(even) .img { grid-column: 1 / 13; order: 1; }
  .course .txt, .course:nth-child(even) .txt { grid-column: 1 / 13; order: 2; }
}

/* ---------- full-bleed pull band ---------- */
.band {
  position: relative; color: var(--linen);
  min-height: 74svh; display: flex; align-items: center; overflow: hidden;
  padding: calc(var(--space-half) + var(--frame)) var(--frame);
}
.band .bg { position: absolute; inset: var(--frame); overflow: hidden; border-radius: var(--radius); }
.band .bg img { width: 100%; height: 100%; object-fit: cover; }
.band .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(78% 86% at 0% 62%, rgba(40,24,34,.54) 0%, rgba(40,24,34,.32) 46%, transparent 78%),
    linear-gradient(100deg, rgba(40,24,34,.40) 0%, rgba(40,24,34,.24) 45%, rgba(40,24,34,.10) 80%, transparent 100%),
    rgba(40,24,34,.10);
}
.band--low { align-items: flex-end; min-height: 86svh; }
.band--low .bg img { object-position: center 14%; }   /* keep both faces in frame */
/* per-image focal points so no one loses their head to the crop */
.band .bg img[src*="band-champagne"] { object-position: center 22%; }
.band .bg img[src*="band-couple"]    { object-position: center 14%; }
.band--low .container { padding-bottom: clamp(1.6rem, 4vh, 3.2rem); }
.band--low .bg::after {
  background:
    linear-gradient(to top, rgba(40,24,34,.72) 0%, rgba(40,24,34,.46) 22%, rgba(40,24,34,.18) 40%, transparent 62%) !important;
}
@media (max-width: 900px) {
  .band--low { min-height: 62svh; }
  .band .bg img[src*="band-couple"]    { object-position: 40% 12%; }
  .band .bg img[src*="band-champagne"] { object-position: 63% 20%; }
}

.band.center .bg::after {
  background:
    radial-gradient(ellipse 86% 74% at 50% 56%, rgba(40,24,34,.62) 0%, rgba(40,24,34,.40) 58%, transparent 100%),
    linear-gradient(to top, rgba(40,24,34,.52) 0%, rgba(40,24,34,.26) 34%, transparent 66%);
}
.band .container { position: relative; z-index: 2; }
.band .pull {
  font-family: var(--serif); font-size: var(--step-3); line-height: 1.18; max-width: 21em;
  text-shadow: 0 0 2px rgba(40,24,34,.72), 0 0 4px rgba(40,24,34,.6), 0 1px 2px rgba(40,24,34,.78), 0 2px 14px rgba(40,24,34,.5), 0 0 46px rgba(40,24,34,.34);
}
.band .attribution {
  margin-top: 1.6rem; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--linen);
  text-shadow: 0 0 3px rgba(40,24,34,.7), 0 1px 2px rgba(40,24,34,.78), 0 1px 8px rgba(40,24,34,.55);
}
.band .attribution .sig {
  display: block; font-family: var(--script); font-weight: 500;
  font-size: 2.3rem; line-height: 1.15; letter-spacing: 0; text-transform: none;
  color: var(--linen); margin-bottom: 0.5rem;
}
.band .pull.script {
  font-family: var(--script); font-weight: 500;
  font-size: clamp(3rem, 2rem + 4.5vw, 5.6rem); line-height: 1.15;
  /* thin script strokes need a tighter, denser halo than Bodoni does */
  text-shadow: 0 0 2px rgba(40,24,34,.82), 0 0 5px rgba(40,24,34,.7),
               0 1px 3px rgba(40,24,34,.8), 0 2px 16px rgba(40,24,34,.55);
}
.band.center { text-align: center; justify-content: center; }
.band.center .pull { margin-inline: auto; }
.band .btn-row { justify-content: center; margin-top: 2.2rem; }

/* ---------- venue cards ---------- */
.venue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.2rem, 2.5vw, 2rem); margin-top: var(--space-half); }
.venue-card { text-decoration: none; display: block; }
.venue-card .frame { overflow: hidden; aspect-ratio: 4 / 3; }
.venue-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.venue-card:hover img { transform: scale(1.045); }
.venue-card .name {
  margin-top: 1.1rem; display: block; font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: 0.55rem; position: relative;
}
.venue-card .name::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 2.6rem;
  background: var(--brass); transition: width .55s var(--ease-out);
}
.venue-card:hover .name::after { width: 5.4rem; }
.venue-card .meta { display: block; margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 900px) { .venue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .venue-grid { grid-template-columns: 1fr; } }

/* ---------- venue feature rows (venues page) ---------- */
.venue-row { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 2rem 0; padding-block: var(--space-half); }
.venue-row + .venue-row { border-top: 1px solid rgba(201,148,158,.3); }
.venue-row .img { grid-column: 1 / 8; }
.venue-row .txt { grid-column: 9 / 13; }
.venue-row:nth-child(even) .img { grid-column: 6 / 13; order: 2; }
.venue-row:nth-child(even) .txt { grid-column: 1 / 5; order: 1; }
.venue-row h2.venue-name, .venue-row h3 { font-size: var(--step-3); margin-bottom: 0.4rem; }
.venue-row .place {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-ink); display: block; margin-bottom: 1.2rem;
}
.venue-row .caps { margin-top: 1.4rem; font-size: 0.92rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 0.3rem; }
.venue-row .caps span strong { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .venue-row .img, .venue-row:nth-child(even) .img { grid-column: 1 / 13; order: 1; }
  .venue-row .txt, .venue-row:nth-child(even) .txt { grid-column: 1 / 13; order: 2; }
}

/* ---------- menu card (the literal object) ---------- */
.menu-card {
  background: var(--parchment-deep);
  border: 1px solid rgba(201,148,158,.55);
  box-shadow: 0 0 0 5px var(--parchment-deep), 0 0 0 6px rgba(201,148,158,.3),
              0 30px 60px rgba(74,48,64,.09);
  padding: clamp(2.2rem, 5vw, 3.8rem) clamp(1.6rem, 4vw, 3.2rem);
  max-width: 640px; margin-inline: auto; text-align: center;
}
.menu-card .card-title { font-family: var(--serif); font-size: var(--step-2); margin-bottom: 0.4rem; }
.menu-card .card-sub {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: 2rem;
}
.menu-card .dish { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.4; margin-inline: auto; max-width: 34ch; }
.menu-card .dish .mark { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; color: var(--brass-ink); vertical-align: super; margin-left: 0.3em; }
.menu-card .dish + .dish { margin-top: 1.35rem; }
.menu-card .card-course { margin-block: 2.2rem 1.4rem; }
.menu-card .card-course:first-of-type { margin-top: 0; }
.menu-card .card-course .smallcaps { color: var(--ink-soft); letter-spacing: 0.26em; font-size: 0.7rem; }
.menu-card .course-mark { margin-bottom: 0.9rem; }
.menu-card .card-note { margin-top: 2.4rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 40ch; margin-inline: auto; }

/* menus page: chapter layout */
.menu-chapter { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem 0; align-items: start; }
.menu-chapter .aside { grid-column: 1 / 5; position: sticky; top: 7rem; }
.menu-chapter .card-holder { grid-column: 6 / 13; }
.menu-chapter.flip .aside { grid-column: 9 / 13; order: 2; }
.menu-chapter.flip .card-holder { grid-column: 1 / 8; order: 1; }
.menu-chapter .aside h2 { font-size: var(--step-3); margin-bottom: 1.1rem; }
.menu-chapter .aside p { color: var(--ink-soft); }
.menu-chapter .aside .img { margin-top: 1.8rem; }
@media (max-width: 900px) {
  .menu-chapter .aside, .menu-chapter.flip .aside { grid-column: 1 / 13; position: static; order: 1; }
  .menu-chapter .card-holder, .menu-chapter.flip .card-holder { grid-column: 1 / 13; order: 2; }
}

/* ---------- testimonials: place cards ---------- */
.placecards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: var(--space-half); }
/* the testimonial wall holds letters of wildly different length — flow them in
   columns so short notes sit beside long ones instead of stretching a grid row */
.placecards--wall { display: block; columns: 2 400px; column-gap: clamp(1.5rem, 3vw, 2.2rem); }
.placecards--wall .placecard { break-inside: avoid; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); display: block; }
.placecards--wall .placecard blockquote {
  font-family: var(--sans); font-style: normal; font-weight: 400;
  font-size: 1rem; line-height: 1.72; color: var(--ink);
}
/* keep the display-serif treatment for the short, quotable ones */
.placecards--wall .placecard--short blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: var(--step-1); line-height: 1.45;
}
.placecards--wall .placecard .who { margin-top: 1.4rem; }
@media (max-width: 700px) { .placecards--wall { columns: 1; } }
.placecard {
  background: var(--blush);
  border: 1px solid rgba(201,148,158,.35);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: 1.6rem;
}
.placecard blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 460;
  font-size: var(--step-1); line-height: 1.42; flex: 1;
}
.placecard .who { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 1.4rem; position: relative; }
.placecard .who::before { content: ""; position: absolute; top: 0; left: 0; width: 3rem; height: 1px; background: var(--brass); }
.placecard .who .names {
  font-family: var(--script); font-weight: 500; font-size: 2.1rem; line-height: 1.1;
  letter-spacing: 0; color: var(--ink);
}
.placecard .who .where { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-ink); }
.placecard.wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .placecards { grid-template-columns: 1fr; } }

/* ---------- assurance columns ---------- */
.assure:first-child { margin-top: 0; }
.assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); margin-top: var(--space-half); }
.assure .col { padding-top: 1.6rem; position: relative; }
.assure .col::before { content: ""; position: absolute; top: 0; left: 0; width: 3.2rem; height: 1px; background: var(--brass); }
.assure .col h3 { font-size: var(--step-1); margin-bottom: 0.8rem; }
.assure .col p { color: var(--ink-soft); font-size: 0.98rem; }
@media (max-width: 820px) { .assure:first-child { margin-top: 0; }
.assure { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ---------- chapter sections ----------
   default .drench = the dark chocolate chapter (Kalm's signature move);
   .drench--sage / .drench--blush = light pastel variants */
.drench { background: var(--rose); color: var(--ink); }
.drench .lede { color: var(--ink); opacity: .82; }
.drench p { color: var(--ink); opacity: .86; }
.drench .course-mark { color: var(--ink); opacity: .5; }
.drench h2, .drench h3 { color: var(--ink); }
.drench .jstep p, .drench .course p { color: var(--ink); opacity: .86; }
.drench .jstep + .jstep { border-top-color: rgba(74,48,64,.18); }
.drench .no { color: var(--ink); opacity: .55; }
.drench .beyond-list .sep { color: var(--ink); opacity: .5; }

.drench--sage, .drench--blush { color: var(--ink); }
.drench--sage { background: var(--sage); }
.drench--blush { background: var(--blush); }
.drench--sage .lede, .drench--blush .lede,
.drench--sage p, .drench--blush p,
.drench--sage .jstep p, .drench--sage .course p,
.drench--blush .jstep p, .drench--blush .course p { color: var(--ink-soft); }
.drench--sage h2, .drench--blush h2, .drench--sage h3, .drench--blush h3 { color: var(--ink); }
.drench--sage .course-mark, .drench--blush .course-mark { color: var(--brass); }
.drench--sage .no, .drench--blush .no { color: var(--brass-ink); }
.drench--sage .jstep + .jstep, .drench--blush .jstep + .jstep { border-top-color: rgba(201,148,158,.35); }

/* ---------- journey (weddings page) ---------- */
.journey { max-width: 820px; margin-inline: auto; margin-top: var(--space-half); }
.jstep { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.4rem; padding-block: 2.2rem; position: relative; }
.jstep + .jstep { border-top: 1px solid rgba(201,148,158,.3); }
.jstep .no { font-family: var(--serif); font-style: italic; font-size: var(--step-3); color: var(--brass-ink); line-height: 1; }
.jstep h3 { font-size: var(--step-1); margin-bottom: 0.55rem; }
.jstep p { color: var(--ink-soft); }
@media (max-width: 600px) { .jstep { grid-template-columns: 3.4rem 1fr; } }

/* ---------- gallery ---------- */
.masonry { columns: 3 320px; column-gap: 1.2rem; margin-top: var(--space-half); }
/* the gallery ran 4-up from 260px, which turns a wedding portfolio into a
   contact sheet. Three-up, and each picture gets half as much again. */
.masonry--full { columns: 3 340px; column-gap: 1.1rem; }
.masonry--full figure { margin-bottom: 1.1rem; }
@media (max-width: 700px) { .masonry--full { columns: 2 200px; column-gap: 0.7rem; } .masonry--full figure { margin-bottom: 0.7rem; } }
/* on a phone two columns is a thumbnail strip, not a gallery — one picture, full width */
@media (max-width: 560px) { .masonry--full { columns: 1; } .masonry--full figure { margin-bottom: 0.9rem; } }
.masonry figure { margin: 0 0 1.2rem; break-inside: avoid; cursor: zoom-in; overflow: hidden; position: relative; }
.masonry img { width: 100%; transition: transform 1.2s var(--ease-out); }
.masonry figure:hover img { transform: scale(1.035); }

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(40,24,34,.94);
  display: flex; align-items: center; justify-content: center; padding: 4vmin;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s .35s;
}
.lightbox.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; box-shadow: 0 40px 90px oklch(0% 0 0 / .5); }
.lightbox .close {
  position: absolute; top: 1.2rem; right: 1.6rem; color: var(--linen);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
 padding: 0.9rem 1.1rem; min-height: 48px; min-width: 48px; }
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--linen); font-family: var(--serif); font-size: 2.2rem; padding: 1rem;  min-height: 48px; min-width: 48px; }
.lightbox .prev { left: 0.6rem; } .lightbox .next { right: 0.6rem; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.2rem; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.field label .req { color: var(--brass-ink); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid rgba(74,48,64,.35);
  padding: 0.55em 0.1em; border-radius: 0; transition: border-color .3s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--cocoa); outline-offset: 3px;
  border-bottom-color: var(--cocoa); border-bottom-width: 2px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--cocoa); border-bottom-width: 2px; }
input[type="date"]:not(:valid)::-webkit-datetime-edit { color: var(--ink-soft); }
.field .err { display: block; margin-top: 0.4rem; font-size: 0.875rem; color: #B3475D; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: #B3475D; border-bottom-width: 2px; }
/* gallery thumbs are focusable buttons now */
.masonry figure:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 4px; }
.form-note { font-size: 0.9rem; color: var(--ink-soft); }
.form-status { font-weight: 500; padding: 1rem 1.2rem; border: 1px solid var(--brass); background: var(--parchment-deep); display: none; }
.form-status.show { display: block; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- contact split ---------- */
.contact-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem 0; }
.contact-split .details { grid-column: 1 / 5; }
.contact-split .formside { grid-column: 6 / 13; }
.contact-split .details h2 { font-size: var(--step-3); margin-bottom: 1.4rem; }
.detail-block { padding-block: 1.5rem; border-top: 1px solid rgba(201,148,158,.3); }
.detail-block:first-of-type { border-top: 0; padding-top: 0; }
.detail-block .smallcaps { color: var(--brass-ink); display: block; margin-bottom: 0.5rem; }
.detail-block a { text-decoration: none; }
.detail-block a:hover { color: var(--cocoa); }
.detail-block .big { font-family: var(--serif); font-size: var(--step-1); }
@media (max-width: 900px) {
  .contact-split .details, .contact-split .formside { grid-column: 1 / 13; }
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--stone); color: var(--ink-soft); padding-block: var(--space-half) 2rem;
  border-top: 1px solid rgba(201,148,158,.3);
}
.site-footer .cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 2.8rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(74,48,64,.14);
}
.site-footer .wordmark { margin-bottom: 1.2rem; color: var(--ink); text-align: left; }
.site-footer .wordmark .roundel { height: 54px; width: auto; max-width: 88px; margin: 0 0 0.7rem; display: block; }
.site-footer .wordmark .sub { display: block; }
.site-footer .blurb { font-size: 1rem; max-width: 30ch; }
.site-footer .foot-h { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 1.1rem; }
.site-footer ul { display: flex; flex-direction: column; gap: 0.55rem; }
.site-footer a { text-decoration: none; font-size: 0.95rem; transition: color .3s; }
.site-footer a:hover { color: var(--ink); }
.site-footer .contact-lines { display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.95rem; }
.site-footer .socials { display: flex; gap: 1.2rem; margin-top: 1.3rem; }
.site-footer .socials a { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.site-footer .legal {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  padding-top: 1.6rem; font-size: 0.8rem; color: var(--ink-soft);
}
.site-footer .legal a { font-size: 0.8rem; }
@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer .cols { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ---------- page intro (subpages) ---------- */
.page-intro { padding-top: calc(var(--space-half)); }
.page-intro .lede { margin-top: 1.4rem; }

/* ---------- beyond venues strip ---------- */
.beyond-list {
  display: flex; flex-wrap: wrap; gap: 0.8rem 0; margin-top: 2rem; max-width: 900px;
  font-family: var(--serif); font-size: var(--step-1); line-height: 1.5;
}
.beyond-list span { white-space: nowrap; }
.beyond-list .sep { color: var(--brass-ink); margin-inline: 0.75em; }

/* ---------- three-up photo strip ---------- */
.photo-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: var(--space-half); }
.photo-trio .tall { grid-row: span 2; }
.photo-trio figure { overflow: hidden; margin: 0; }
.photo-trio img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .photo-trio { grid-template-columns: 1fr 1fr; } }

/* team lists */
.team-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); margin-top: var(--space-half); }
.team-cols .group h3 { font-size: var(--step-1); margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(201,148,158,.35); }
.team-cols .person { padding-block: 0.7rem; }
.team-cols .person .nm { font-weight: 600; display: block; }
.team-cols .person .rl { font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.04em; }
@media (max-width: 860px) { .team-cols { grid-template-columns: 1fr; gap: 2.4rem; } }

/* chef features */
.chef-feature { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem 0; align-items: center; }
.chef-feature .img { grid-column: 1 / 6; }
.chef-feature .txt { grid-column: 7 / 13; }
.chef-feature h3 { margin-bottom: 0.3rem; }
.chef-feature .role { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-ink); display: block; margin-bottom: 1.1rem; }
@media (max-width: 820px) { .chef-feature .img, .chef-feature .txt { grid-column: 1 / 13; } }

/* skip link */
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--cocoa); color: var(--linen); padding: 0.8em 1.2em; }
.skip:focus { left: 0; }


/* ─── the photographs read as photographs ───
   These bands were carrying a white veil at .93 to .96, which is all but solid
   paint: the picture underneath had almost nothing left to show. That veil was
   compensating for Bodoni, whose frozen hairlines shimmered white-on-photo.
   Fraunces does not have that problem, so the veil has no job any more.
   Light ink over a low dark gradient instead — enough of a floor under the type
   to read, weighted to the edge the type sits on, and the middle of the frame
   left alone. */
.band { color: var(--linen); }
/* Scrims shaped to where the words actually sit, and nowhere else — a soft pool
   anchored to the text, which reads as the light in the photograph rather than
   a panel laid over it. No flat layer: the old base tint sat at an even .10
   across the entire frame, which is a veil however faint. */
.band .bg::after {
  background:
    radial-gradient(126% 112% at 0% 58%, rgba(40,24,34,.70) 0%, rgba(40,24,34,.64) 46%, rgba(40,24,34,.34) 76%, transparent 100%) !important;
}
.band.center .bg::after {
  background:
    radial-gradient(ellipse 110% 92% at 50% 54%, rgba(40,24,34,.62) 0%, rgba(40,24,34,.56) 44%, rgba(40,24,34,.26) 74%, transparent 100%) !important;
}
/* the closing band carries both classes and puts its type at the foot, so it
   takes a bottom-weighted pool rather than a centred one */
.band.center.band--low .bg::after,
.band--low .bg::after {
  background:
    radial-gradient(ellipse 136% 96% at 50% 104%, rgba(40,24,34,.70) 0%, rgba(40,24,34,.64) 44%, rgba(40,24,34,.32) 74%, transparent 100%) !important;
}
/* one tight shadow, not a halo: the four-layer glow was what made this fuzzy */
.band .pull, .band .pull.script { color: var(--linen); text-shadow: 0 1px 3px rgba(40,24,34,.6); }
.band .attribution, .band .attribution .sig { color: var(--linen); text-shadow: 0 1px 3px rgba(40,24,34,.6); }
.band .btn--linen { border-color: rgba(255,249,250,.6); color: var(--linen); }
.band .btn--linen:hover { border-color: var(--linen); background: rgba(255,249,250,.14); }
.band .text-link.linen { color: var(--linen); }

/* ─── the closing line ───
   The swirly face stays: it is one of the things that reads as Kalm. What made
   it shout was the scale and the glow, not the script itself — it ran to 5.6rem,
   larger than every section heading it sits under, with a four-layer halo that
   gave it a neon outline. Down to roughly three-fifths the size, and a single
   tight shadow. Weight stays at 500: the strokes are thin, and it is the halo
   that has to go, not the substance behind it. */
.band .pull.script {
  font-family: var(--script);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.1vw, 3.3rem);
  line-height: 1.3;
  letter-spacing: 0;
  max-width: 20em;
}
@media (max-width: 900px) {
  .band.center.band--low .bg::after,
  .band--low .bg::after {
    background:
      radial-gradient(ellipse 160% 128% at 50% 106%, rgba(40,24,34,.72) 0%, rgba(40,24,34,.66) 46%, rgba(40,24,34,.34) 76%, transparent 100%) !important;
  }
  .band .bg::after {
    background: radial-gradient(ellipse 150% 108% at 50% 52%, rgba(40,24,34,.70) 0%, rgba(40,24,34,.64) 46%, rgba(40,24,34,.30) 76%, transparent 100%) !important;
  }
}


/* ---------- footer: the damson anchor ----------
   Deep damson otherwise appears only as type. Giving it the footer is what
   lets the four colours carry equal weight down the page: white above,
   rosewater in the bands, peony on the drench, damson here.
   To revert to a pale footer, delete this block. */
.site-footer { background: var(--cocoa); color: rgba(255,249,250,.80); }
.site-footer .cols { border-bottom-color: rgba(232,200,208,.22); }
.site-footer .wordmark { color: var(--linen); }
.site-footer .wordmark .sub { color: var(--brass-soft); }
/* the mark is roundel-damson.png and would disappear into the ground */
.site-footer .wordmark .roundel { filter: brightness(0) invert(1); opacity: .92; }
.site-footer .foot-h { color: var(--brass-soft); }
.site-footer a:hover { color: var(--linen); }
.site-footer .legal { color: rgba(255,249,250,.64); }

/* On the peony ground the accent IS the ground, so the course numerals take the
   anchor at full strength. At .55 (and at --brass-ink, which .jstep .no set)
   they sat at 2.4:1 against the peony — invisible in bright light. */
.drench:not(.drench--sage):not(.drench--blush) .no { color: var(--ink); opacity: 1; }

/* Same reason: on the peony ground the copy was dimmed to .82/.86, which put
   body text at 3.4-3.7:1. Dusty peony is a mid-tone, so damson has to run at
   full strength on it. The light drench variants keep their dimming. */
.drench:not(.drench--sage):not(.drench--blush) p,
.drench:not(.drench--sage):not(.drench--blush) .lede,
.drench:not(.drench--sage):not(.drench--blush) .jstep p,
.drench:not(.drench--sage):not(.drench--blush) .course p { opacity: 1; }

/* ---------- the strapline ----------
   The lockup used to read "Weddings & Events · Kent". The kitchen travels for
   the right wedding, so the county is out of the lockup and belongs further
   down the page instead. This is a copy change made in CSS because the draft is
   served through a stylesheet rewrite; it should move into the markup proper.
   The rule sits last so it beats the width-specific sizes set earlier. */
.site-header .wordmark .sub, .site-footer .wordmark .sub { font-size: 0; letter-spacing: 0; }
.site-header .wordmark .sub::after, .site-footer .wordmark .sub::after {
  content: "Weddings & Events";
  font-size: 0.78rem; letter-spacing: 0.22em; display: block;
}
@media (max-width: 1080px) {
  .site-header .wordmark .sub::after { font-size: 0.7rem; letter-spacing: 0.18em; }
}
.site-footer .wordmark .sub::after { font-size: 0.72rem; letter-spacing: 0.22em; }

/* ---------- the phone's first screen ----------
   Everything below is a size the hero sets earlier in this file and a later rule
   used to take back. It sits last so the cascade cannot lose it again. */
@media (max-width: 900px) {
  .hero .container { padding-block: 1.2rem 1.6rem; }
  .hero .lede { margin-top: 0.8rem; }
  .hero .btn-row { margin-top: 1rem; }
  .hero .accolade { margin: 1.1rem 0 0; font-size: 0.63rem; letter-spacing: 0.15em; }
}
@media (max-width: 700px) {
  .hero .accolade { font-size: 0.6rem; letter-spacing: 0.12em; margin-top: 1rem; }
}

/* Small phones wrap a line more of everything, which lifts the top of the stack
   into thinner cover. The falloff follows it up rather than the type shrinking
   again. Above 380px the lighter ramp above still applies. */
@media (max-width: 380px) {
  .hero .bg::after {
    background:
      linear-gradient(to top, rgba(40,24,34,.82) 0%, rgba(40,24,34,.79) 18%, rgba(40,24,34,.74) 36%, rgba(40,24,34,.68) 50%, rgba(40,24,34,.54) 62%, rgba(40,24,34,.24) 74%, rgba(40,24,34,.06) 83%, transparent 90%) !important;
  }
}

/* On a very wide screen the 1200px column starts a fifth of the way across the
   frame, so the left-anchored falloff has already thinned by the time it reaches
   the words. The stops travel with the frame; the picture's right half is still
   untouched. */
@media (min-width: 1500px) {
  .hero .bg::after {
    background:
      linear-gradient(90deg, rgba(40,24,34,.72) 0%, rgba(40,24,34,.66) 26%, rgba(40,24,34,.48) 44%, rgba(40,24,34,.22) 60%, rgba(40,24,34,.05) 72%, transparent 82%),
      linear-gradient(to top, rgba(40,24,34,.38) 0%, rgba(40,24,34,.16) 24%, rgba(40,24,34,.02) 44%, transparent 56%);
  }
}

/* About navigation: native disclosure supports mouse, keyboard and touch. */
.about-nav { position: relative; }
.about-nav summary { list-style: none; cursor: pointer; font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding: .65em 0; }
.about-nav summary::-webkit-details-marker { display: none; }
.about-nav summary span { display: inline-block; margin-left: .25rem; }
.about-nav[open] summary span { transform: rotate(180deg); }
.about-nav__links { position: absolute; top: 100%; left: -.9rem; min-width: 13rem; padding: .65rem .9rem; background: var(--parchment); color: var(--ink); border: 1px solid var(--brass-soft); box-shadow: 0 10px 25px rgb(74 48 64 / .12); border-radius: 4px; z-index: 10; }
.site-nav .about-nav__links a { display: block; padding: .75rem .3rem; white-space: nowrap; }
.about-nav summary:focus-visible, .about-nav__links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.about-nav.is-active summary { text-decoration: underline; text-underline-offset: .4em; }
@media(max-width: 1080px) {
 .about-nav summary { font-size: 1.08rem; letter-spacing: .14em; text-align: center; }
 .about-nav__links { position: static; min-width: 0; margin: .2rem 0 .6rem; padding: .25rem 1rem; box-shadow: none; background: transparent; border: 0; border-left: 1px solid var(--brass-soft); border-radius: 0; }
 .site-nav .about-nav__links a { font-size: .82rem; padding: .6rem .3rem; text-align: center; }
 body.menu-open .nav-wrap { justify-content: flex-start; overflow-y: auto; padding-top: 8rem; padding-bottom: 2rem; }
}

/* Compact footer and accessible social icons. */
.site-footer { padding-block:3rem 1.4rem; }
.site-footer > .container { max-width:1060px; }
.site-footer .cols { grid-template-columns:1.2fr 1fr 1fr 1.35fr; gap:2rem; padding-bottom:2rem; }
.site-footer .wordmark { margin-bottom:.85rem; }
.site-footer .wordmark .roundel { height:42px; }
.site-footer .wordmark .name { font-size:1.35rem; }
.site-footer .blurb { font-size:.9rem; }
.site-footer .foot-h { margin-bottom:.85rem; }
.site-footer ul { gap:.3rem; }
.site-footer a, .site-footer .contact-lines { font-size:.88rem; }
.site-footer .contact-lines { gap:.4rem; overflow-wrap:anywhere; }
.site-footer .socials { gap:.65rem; margin-top:.7rem; margin-left:-.55rem; }
.site-footer .socials a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--linen); border-radius:50%; }
.site-footer .socials a:hover { background:rgba(255,249,250,.12); }
.site-footer .socials a:focus-visible { outline:2px solid var(--linen); outline-offset:2px; }
.site-footer .socials svg { display:block; width:23px; height:23px; }
.site-footer .legal { padding-top:1.2rem; gap:.5rem 1.2rem; font-size:.72rem; }
.site-footer .legal a { font-size:.72rem; }
@media(max-width:1000px) { .site-footer .cols { grid-template-columns:1fr 1fr; } }
@media(max-width:560px) {
 .site-footer { padding-block:2rem 1.2rem; }
 .site-footer .cols { grid-template-columns:1fr 1fr; gap:1.6rem 1rem; }
 .site-footer .cols > :first-child, .site-footer .cols > :last-child { grid-column:1 / -1; }
 .site-footer .cols > :last-child { padding-top:1.4rem; border-top:1px solid rgba(232,200,208,.22); }
 .site-footer .legal { flex-direction:column; }
}

@media(max-width:360px){.site-header .wordmark .name{font-size:1.05rem}.site-header .bar{gap:.7rem}}

/* Replay the homepage message at deliberate slideshow chapter changes. */
.js .hero .hero-copy-reset .line > span,
.js .hero .hero-copy-reset .lede,
.js .hero .hero-copy-reset .btn-row,
.js .hero .hero-copy-reset .accolade{animation:none}

/* Owner-supplied cocktail film: preserve its portrait composition. */
.cocktail-film{width:min(100%,320px);margin:0 auto;scroll-margin-top:120px}
.cocktail-film video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#211d18}
.cocktail-film figcaption{margin-top:1rem;text-align:center;font-size:.9rem;line-height:1.6}
.cocktail-film figcaption span{font-size:.8rem;opacity:.75}
@media(max-width:760px){.cocktail-film{max-width:300px}}

/* QA: readable long addresses, compact growth-service routes and form-first mobile. */
.legal{overflow-wrap:anywhere}
.site-footer ul.footer-explore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1rem}
@media(max-width:760px){.contact-split .formside{grid-row:1}.contact-split .details{grid-row:2}}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.proof-quote{max-width:760px;margin:0 auto;text-align:center}
.proof-quote blockquote{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.5;margin:0 0 1.5rem}
.proof-quote figcaption{font-size:.9rem;margin-bottom:1rem}

/* Quiet reassurance at service entry points; no award badges. */
.experience-note{padding:1.5rem 0;border-bottom:1px solid var(--brass);background:var(--linen)}
.experience-note__inner{display:grid;grid-template-columns:1fr 1.35fr;gap:1rem 3rem}
.experience-note p{margin:0;font-size:.85rem;line-height:1.65}.experience-note strong{display:block;font-weight:600}.experience-note span{display:block;font-size:.78rem;margin-top:.25rem}.experience-note a{text-underline-offset:3px}
.experience-inline{font-size:.92rem;font-weight:600;line-height:1.6}.journey-next{font-size:.9rem;margin-top:1.5rem}.contact-reassurance{max-width:35ch;font-size:.92rem;line-height:1.7;margin:1.2rem 0 2rem}.bar-experience{font-size:.85rem;margin:.7rem 0 1.2rem}
@media(max-width:700px){.experience-note__inner{grid-template-columns:1fr;gap:1rem}.experience-note{padding:1.4rem 0}}