/* ============================================================================
   Feather — Bristol.

   Palette is lifted wholesale from the booking app's tokens (feather/frontend/
   src/index.css) so the marketing site and the reservation flow read as one
   product: the corten-steel sign's rust, the cream script cut out of it, the
   ochre feather.

   Structure borrows from Gambas Bristol — centred wordmark, a skewed
   parallelogram as the one repeated shape, tab strips, full-bleed photography
   with air around it — but none of its colour or type.

   The site commits to one light look rather than shipping a dark theme: the
   photographs are warm and the paper ground is part of the identity. Hence the
   explicit color-scheme below, so no browser force-darks it.
   ========================================================================= */

:root {
  /* Brand — constant, straight from the sign */
  --rust: #9a3412;
  --rust-deep: #7a2810;
  --rust-dark: #5e1f0c;
  --cream: #f3ddb6;
  --ochre: #e0a34a;

  /* Ground — warm paper, never clinical white */
  --paper: #faf6f0;
  --paper-2: #f4ece2;
  --surface: #ffffff;

  /* Ink — warm neutrals biased to the rust, never pure black */
  --ink: #241a14;
  --text: #4a3f37;
  --muted: #8a7868;
  --border: #e6dace;
  --border-strong: #d2c1b0;

  /* On dark grounds */
  --on-rust: #f7e9d2;
  --on-rust-dim: rgba(247, 233, 210, 0.66);

  --display: "Fraunces", ui-serif, Georgia, "Iowan Old Style", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* One shape, repeated: the skewed parallelogram. */
  --skew: -12deg;

  /* One motion scale. Entrances lead with speed so the page answers at once. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 420ms;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 62ch;

  color-scheme: light;
}

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

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

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 clamp(15.5px, 0.35vw + 15px, 17px)/1.72 var(--sans);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }

::selection { background: var(--ochre); color: var(--ink); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--rust); color: var(--on-rust);
  padding: 12px 20px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- type ---- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.01em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* The one small-caps voice: nav, labels, buttons, eyebrows. */
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(10px, 0.9vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 1.4em;
}
.eyebrow.dim { color: var(--muted); }
.eyebrow.on-dark { color: var(--ochre); }

.lede {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 300;
}

.rule {
  width: 46px; height: 1px; border: 0; margin: 0 0 1.6em;
  background: var(--ochre);
}
.center .rule { margin-inline: auto; }

/* ------------------------------------------------------------- the shape -- */
/* A parallelogram with a real border: skew the box, unskew the label. */

.btn {
  display: inline-block;
  transform: skewX(var(--skew));
  border: 1px solid var(--rust);
  background: transparent;
  color: var(--rust);
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.btn > span {
  display: block;
  transform: skewX(calc(var(--skew) * -1));
  padding: 14px clamp(20px, 2.4vw, 30px);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn:hover { background: var(--rust); color: var(--paper); }
.btn:active { transform: skewX(var(--skew)) scale(0.985); }

.btn.solid { background: var(--rust); color: var(--paper); }
.btn.solid:hover { background: var(--rust-deep); border-color: var(--rust-deep); }

.btn.on-dark { border-color: var(--cream); color: var(--cream); }
.btn.on-dark:hover { background: var(--cream); color: var(--rust-deep); }

.btn.ghost-light { border-color: rgba(255,255,255,.72); color: #fff; }
.btn.ghost-light:hover { background: #fff; color: var(--rust-deep); border-color: #fff; }

/* Text link with the ochre keyline that draws on hover */
.tlink {
  display: inline-block;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: var(--rust);
  padding-bottom: 5px; position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ochre); transform: scaleX(1); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.tlink:hover::after { transform: scaleX(0.42); }

/* ----------------------------------------------------------------- head --- */

.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px;
  padding: clamp(14px, 1.6vw, 22px) var(--gutter);
  transition: background var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out),
              padding var(--dur-3) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-head.is-solid {
  background: rgba(250, 246, 240, 0.93);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: var(--border);
  padding-top: clamp(10px, 1vw, 14px);
  padding-bottom: clamp(10px, 1vw, 14px);
}

.head-brand { justify-self: center; text-align: center; text-decoration: none; display: block; }
.site-head.is-solid .m-cream { opacity: 0; }
.site-head:not(.is-solid) .m-rust { opacity: 0; }

.head-tag {
  display: block; margin-top: 7px;
  font-size: clamp(8px, 0.7vw, 9.5px); font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--cream);
  transition: color var(--dur-3) var(--ease-out);
}
.site-head.is-solid .head-tag { color: var(--muted); }
.head-tag i { font-style: normal; opacity: .5; margin: 0 .35em; }

.head-addr {
  display: block; margin-top: 8px;
  font-size: clamp(8.5px, 0.72vw, 10px); font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cream);
  transition: color var(--dur-3) var(--ease-out);
}
.site-head.is-solid .head-addr { color: var(--muted); }
.head-addr + .head-tag { margin-top: 3px; }

.head-left { justify-self: start; }
.head-right { justify-self: end; }

/* Over the hero the outlined button needs to be light */
.site-head:not(.is-solid) .head-left .btn { border-color: rgba(255,255,255,.7); color: #fff; }
.site-head:not(.is-solid) .head-left .btn:hover { background: #fff; color: var(--rust-deep); border-color:#fff; }

/* burger */
.burger {
  -webkit-appearance: none; appearance: none; background: none; border: 0;
  padding: 10px 2px; cursor: pointer; display: block; width: 40px;
}
.burger i {
  display: block; height: 1.5px; background: var(--cream); margin: 6px 0;
  transition: transform var(--dur-2) var(--ease-out),
              opacity var(--dur-1) var(--ease-out),
              background var(--dur-3) var(--ease-out);
  transform-origin: center;
}
.burger i:nth-child(1) { width: 100%; }
.burger i:nth-child(2) { width: 72%; margin-left: auto; }
.burger i:nth-child(3) { width: 100%; }
.site-head.is-solid .burger i { background: var(--ink); }
.burger:hover i:nth-child(2) { width: 100%; }
body.nav-open .burger i { background: var(--cream); }
body.nav-open .burger i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .burger i:nth-child(2) { opacity: 0; }
body.nav-open .burger i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); width:100%; }

/* --------------------------------------------------------- nav overlay ---- */

.nav {
  position: fixed; inset: 0; z-index: 50;
  background: var(--rust-deep);
  display: grid; grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(96px, 14vh, 150px) var(--gutter) clamp(28px, 5vh, 56px);
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-3) var(--ease-in-out),
              opacity var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-3);
  overflow-y: auto;
}
body.nav-open .nav {
  opacity: 1; visibility: visible; clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-3) var(--ease-in-out),
              opacity var(--dur-1) var(--ease-out),
              visibility 0s;
}
.nav::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 80% 10%, rgba(224,163,74,.16), transparent 60%);
  pointer-events: none;
}
.nav-list { list-style: none; margin: 0; padding: 0; position: relative; }
.nav-list li { overflow: hidden; }
.nav-list a {
  display: inline-block;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.1rem, 7vw, 4.6rem); line-height: 1.18;
  color: var(--cream); text-decoration: none;
  transform: translateY(105%);
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-1) linear;
}
body.nav-open .nav-list a { transform: translateY(0); }
body.nav-open .nav-list li:nth-child(1) a { transition-delay: 90ms; }
body.nav-open .nav-list li:nth-child(2) a { transition-delay: 140ms; }
body.nav-open .nav-list li:nth-child(3) a { transition-delay: 190ms; }
body.nav-open .nav-list li:nth-child(4) a { transition-delay: 240ms; }
body.nav-open .nav-list li:nth-child(5) a { transition-delay: 290ms; }
body.nav-open .nav-list li:nth-child(6) a { transition-delay: 340ms; }
.nav-list a:hover { color: var(--ochre); }
.nav-list a[aria-current="page"] { color: var(--ochre); }

.nav-foot {
  display: grid; gap: clamp(18px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
  border-top: 1px solid rgba(243,221,182,.2); padding-top: clamp(20px, 3vh, 34px);
  color: var(--on-rust-dim); font-size: 13.5px; line-height: 1.7;
  position: relative;
}
.nav-foot b { display:block; color: var(--ochre); font-weight: 500;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: .55em; }
.nav-foot a { color: var(--on-rust-dim); text-decoration: none; }
.nav-foot a:hover { color: var(--cream); }

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

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 820px; }
.wrap.mid { max-width: 1040px; }

section { position: relative; }
.pad { padding-block: clamp(64px, 10vw, 148px); }
.pad-s { padding-block: clamp(44px, 6vw, 88px); }
.center { text-align: center; }
.center p { margin-inline: auto; }

.tint { background: var(--paper-2); }
.dark { background: var(--rust-deep); color: var(--on-rust); }
.dark h1, .dark h2, .dark h3 { color: var(--cream); }

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

.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  overflow: hidden; background: var(--rust-deep);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 46% 19%;
  animation: driftIn 2200ms var(--ease-out) both, drift 26s 2200ms ease-in-out infinite alternate;
}
@keyframes driftIn { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1.035); } }
@keyframes drift { from { transform: scale(1.035) translate3d(0,0,0); } to { transform: scale(1.1) translate3d(-1.4%, -1.2%, 0); } }

.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(40,16,6,.55) 0%, rgba(40,16,6,0) 26%),
    linear-gradient(to top, rgba(40,16,6,.9) 0%, rgba(40,16,6,.6) 26%, rgba(40,16,6,.14) 52%, rgba(40,16,6,0) 70%),
    linear-gradient(to right, rgba(40,16,6,.5) 0%, rgba(40,16,6,.12) 42%, rgba(40,16,6,0) 62%);
}
.hero-inner {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) clamp(46px, 9vh, 104px);
  max-width: 1280px; margin-inline: auto; width: 100%;
}
.hero h1 {
  color: #fff; max-width: 15ch; font-weight: 300;
  text-shadow: 0 2px 34px rgba(40,16,6,.4);
  margin-bottom: 0.42em;
}
.hero p {
  color: rgba(255,255,255,.86); max-width: 46ch; font-size: 1.02rem;
  margin-bottom: 1.9em;
}
.hero .eyebrow { color: var(--ochre); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.scroll-cue {
  position: absolute; z-index: 2; bottom: 22px; right: var(--gutter);
  writing-mode: vertical-rl;
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 12px;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 54px; background: rgba(255,255,255,.4);
  animation: cue 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue { 0%,100% { transform: scaleY(.3); opacity:.35 } 50% { transform: scaleY(1); opacity:1 } }

/* Interior page headers — shorter, tinted, no full viewport */
.page-head {
  position: relative; min-height: clamp(340px, 52vh, 520px);
  display: grid; align-items: center; overflow: hidden; background: var(--rust-deep);
}
.page-head.short { min-height: clamp(260px, 38vh, 380px); }
.page-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-head::after {
  content:""; position: absolute; inset: 0;
  /* The booking header is a bright overhead food shot, far lighter than the
     mural and brick ones, so the mid-tone stop has to carry the small text. */
  background:
    linear-gradient(to bottom, rgba(40,16,6,.62), rgba(40,16,6,.5) 55%, rgba(40,16,6,.66)),
    radial-gradient(58% 62% at 50% 52%, rgba(40,16,6,.34), transparent 72%);
}
.page-head .wrap { position: relative; z-index: 2; padding-top: 74px; }
.page-head h1 { color: #fff; font-weight: 300; margin-bottom: .3em; }
.page-head p { color: rgba(255,255,255,.82); }
.page-head .eyebrow { color: var(--ochre); text-shadow: 0 1px 18px rgba(40,16,6,.7); }
.page-head p { text-shadow: 0 1px 20px rgba(40,16,6,.5); }

/* ---------------------------------------------------------------- band ---- */
/* Full-bleed photograph with a panel of text riding over its edge. */

.band { position: relative; }
.band-media { position: relative; overflow: hidden; }
.band-media img { width: 100%; height: clamp(300px, 56vw, 620px); object-fit: cover; }

.split {
  display: grid; gap: clamp(28px, 5vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
}
.split.wide-left { grid-template-columns: 1.15fr 1fr; }
.split.wide-right { grid-template-columns: 1fr 1.15fr; }
@media (max-width: 880px) {
  .split.wide-left, .split.wide-right { grid-template-columns: 1fr; }
}
.split figure { margin: 0; position: relative; }
.split figure img { width: 100%; height: 100%; max-height: 640px; object-fit: cover; }

/* the overlapping panel */
.panel {
  background: var(--paper); padding: clamp(26px, 4vw, 56px);
  border: 1px solid var(--border);
}
.panel.raise { box-shadow: 0 2px 6px rgba(60,40,25,.06), 0 30px 70px rgba(60,40,25,.12); }

.overlap { position: relative; z-index: 3; margin-top: clamp(-90px, -7vw, -40px); }

/* a gold hairline frame used on the mural imagery */
.framed { position: relative; }
.framed::after {
  content: ""; position: absolute; inset: calc(-1 * clamp(8px, 1.1vw, 16px));
  border: 1px solid var(--border-strong); pointer-events: none;
}
.dark .framed::after, .cta .framed::after { border-color: rgba(243,221,182,.34); }

/* ---------------------------------------------------------------- tabs ---- */

.tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(6px, 1vw, 14px); padding: 0; margin: 0 0 clamp(30px, 4vw, 54px); list-style: none;
}
.tab {
  transform: skewX(var(--skew));
  border: 1px solid var(--border-strong);
  background: var(--paper);
  cursor: pointer; font: inherit; color: var(--muted);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.tab > span {
  display: block; transform: skewX(calc(var(--skew) * -1));
  padding: 12px clamp(16px, 2.2vw, 30px);
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}
.tab:hover { color: var(--rust); border-color: var(--rust); }
.tab[aria-selected="true"] {
  background: var(--rust); border-color: var(--rust); color: var(--paper);
}
.tabpanel[hidden] { display: none; }
.tabpanel { animation: fadeUp var(--dur-3) var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity:1; transform:none; } }

/* The Christmas tab: same parallelogram, but selected it fills like a festive
   calling card — pine ground, drifting snow, a sheen sweeping across and a
   holly sprig. Unselected it only carries a snowflake. */
#tab-christmas { position: relative; overflow: hidden; isolation: isolate; }
#tab-christmas > span { position: relative; z-index: 2; }
#tab-christmas > span::before {
  content: ""; display: inline-block; width: 1.5em; height: 1.5em;
  margin: -.4em .55em -.4em 0; vertical-align: middle;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a34a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M12 2l-2.2 2.2M12 2l2.2 2.2M12 22l-2.2-2.2M12 22l2.2-2.2M3.3 7l.8 3M3.3 7l3-.8M20.7 17l-.8-3M20.7 17l-3 .8M3.3 17l3 .8M3.3 17l.8-3M20.7 7l-3-.8M20.7 7l-.8 3'/%3E%3C/svg%3E");
  transition: transform var(--dur-3) var(--ease-out);
}
#tab-christmas:hover { color: #1f5236; border-color: #1f5236; }
#tab-christmas:hover > span::before { transform: rotate(60deg); }

#tab-christmas[aria-selected="true"] {
  color: var(--cream); border-color: var(--ochre);
  box-shadow: inset 0 0 0 1px rgba(224,163,74,.35), 0 6px 18px -8px rgba(18,50,34,.7);
  background:
    /* lights glowing from the corners */
    radial-gradient(60% 120% at 0% 0%, rgba(224,163,74,.28), transparent 60%),
    radial-gradient(50% 120% at 100% 100%, rgba(179,38,30,.45), transparent 65%),
    linear-gradient(115deg, #123222 0%, #1f5236 55%, #163d29 100%);
}
#tab-christmas[aria-selected="true"] > span::before {
  width: 1.9em; margin-right: .45em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cg fill='%233f8a58' stroke='%230e2a1b' stroke-width='.8'%3E%3Cpath d='M20 16C14 6 6 4 1 8c3 1 3 4 1 6 4-1 6 2 5 5 5-4 9-2 13-3Z'/%3E%3Cpath d='M20 16c6-10 14-12 19-8-3 1-3 4-1 6-4-1-6 2-5 5-5-4-9-2-13-3Z'/%3E%3C/g%3E%3Cg fill='%23d23a24'%3E%3Ccircle cx='16.5' cy='18.5' r='3.2'/%3E%3Ccircle cx='23.5' cy='18.5' r='3.2'/%3E%3Ccircle cx='20' cy='13.5' r='3.2'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='.7'%3E%3Ccircle cx='15.5' cy='17.3' r='1'/%3E%3Ccircle cx='22.5' cy='17.3' r='1'/%3E%3Ccircle cx='19' cy='12.3' r='1'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
/* two layers of snow at different sizes and speeds, for depth */
#tab-christmas::before, #tab-christmas::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
#tab-christmas::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='%23f7e9d2'%3E%3Ccircle cx='6' cy='8' r='1.1'/%3E%3Ccircle cx='29' cy='3' r='.7'/%3E%3Ccircle cx='19' cy='21' r='.9'/%3E%3Ccircle cx='41' cy='17' r='1.2'/%3E%3Ccircle cx='9' cy='35' r='.8'/%3E%3Ccircle cx='33' cy='39' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 46px 46px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none' stroke='%23f7e9d2' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M58 14v10M53.7 16.5l8.6 5M53.7 21.5l8.6-5M18 52v8M14.5 54l7 4M14.5 58l7-4'/%3E%3C/svg%3E") 0 0 / 80px 80px;
}
/* the calling-card sheen */
#tab-christmas::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,210,.32) 48%, transparent 60%) -150% 0 / 60% 100% no-repeat;
}
#tab-christmas[aria-selected="true"]::before { opacity: .75; animation: snowfall 7s linear infinite; }
#tab-christmas[aria-selected="true"]::after { opacity: 1; animation: sheen 4.5s var(--ease-out) infinite 1s; }
@keyframes snowfall { to { background-position: 10px 46px, -16px 80px; } }
@keyframes sheen { 0% { background-position: -150% 0; } 45%, 100% { background-position: 250% 0; } }
@media (prefers-reduced-motion: reduce) {
  #tab-christmas[aria-selected="true"]::before, #tab-christmas[aria-selected="true"]::after { animation: none; }
  #tab-christmas[aria-selected="true"]::after { opacity: 0; }
}

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

.menu-cols {
  display: grid; gap: clamp(30px, 5vw, 76px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: start;
}
.course { margin: 0 0 clamp(30px, 4vw, 48px); break-inside: avoid; }
.course:last-child { margin-bottom: 0; }
.course > h3 {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--rust);
  margin: 0 0 1.35em; padding-bottom: .9em; border-bottom: 1px solid var(--border);
}
.dish { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin-bottom: 1.15em; align-items: baseline; }
.dish:last-child { margin-bottom: 0; }
.dish dt { font-family: var(--display); font-size: 1.06rem; color: var(--ink); line-height: 1.34; }
.dish dd {
  margin: 0; font-variant-numeric: tabular-nums; color: var(--muted);
  font-size: .93rem; letter-spacing: .02em;
}
.dish .note {
  grid-column: 1 / -1; font-size: .875rem; color: var(--muted);
  font-style: italic; line-height: 1.5; margin: 0;
}
.dish .diet {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .14em;
  color: #b07d24; margin-left: .55em; vertical-align: .18em; font-style: normal; font-weight: 600;
}
dl { margin: 0; }

.menu-note {
  border-left: 2px solid var(--ochre); padding: 4px 0 4px 20px;
  font-size: .92rem; color: var(--muted); max-width: 46ch;
}

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

.cards {
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--border);
  padding: clamp(24px, 2.8vw, 38px);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.card h3 { margin-bottom: .55em; }
.card p { font-size: .95rem; }
a.card { text-decoration: none; display: block; }
a.card:hover { transform: translateY(-4px); border-color: var(--border-strong);
  box-shadow: 0 2px 6px rgba(60,40,25,.05), 0 22px 44px rgba(60,40,25,.10); }

.card-num {
  font-family: var(--display); font-size: 2.2rem; color: var(--ochre);
  line-height: 1; display: block; margin-bottom: .35em; font-weight: 300;
}

/* people */
.people { display: grid; gap: clamp(22px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.person figure { margin: 0 0 1.1em; overflow: hidden; background: var(--paper-2); }
.person img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform 620ms var(--ease-out); }
.person:hover img { transform: scale(1.045); }
.person h3 { font-size: 1.25rem; margin-bottom: .18em; }
.person .role {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rust); margin-bottom: .9em;
}
.person p { font-size: .93rem; }

/* facts list, used on Visit */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: grid; grid-template-columns: 118px 1fr; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--border); align-items: baseline;
}
.facts li:first-child { border-top: 1px solid var(--border); }
.facts b {
  font-family: var(--sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 520px) { .facts li { grid-template-columns: 1fr; gap: 4px; } }

/* pull quote */
.quote { text-align: center; max-width: 24ch; margin-inline: auto; }
.quote blockquote {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.32;
  color: var(--ink); margin: 0 0 1em; letter-spacing: -.01em;
}
.dark .quote blockquote { color: var(--cream); }
.quote cite {
  font-style: normal; font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}
.dark .quote cite { color: var(--ochre); }

/* --------------------------------------------------------------- forms ---- */

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong);
  padding: 13px 15px; border-radius: 0;
  /* Strip the platform chrome so every control keeps the same hard corners as
     the buttons and slots — no rounded native select or date field. */
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239a3412' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(154,52,18,.1);
}
.field-row { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px),1fr)); }

.signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.signup input {
  flex: 1 1 220px; font: inherit; font-size: .95rem;
  background: transparent; color: var(--cream);
  border: 1px solid rgba(243,221,182,.34); padding: 13px 15px;
}
.signup input::placeholder { color: rgba(243,221,182,.45); }
.signup input:focus { outline: none; border-color: var(--ochre); }
.center .signup { margin-inline: auto; justify-content: center; }

.form-note { font-size: .85rem; color: var(--muted); margin-top: 14px; }

/* ------------------------------------------------------------- cta band --- */

.cta {
  background: var(--rust-deep); color: var(--on-rust);
  text-align: center; position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 50% -20%, rgba(224,163,74,.2), transparent 62%);
}
.cta .wrap { position: relative; z-index: 2; }
.cta img.mark { height: clamp(46px, 6vw, 76px); width: auto; margin: 0 auto 1.4em; }
.cta h2 { color: var(--cream); }
.cta p { color: var(--on-rust-dim); margin-inline: auto; }

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

.site-foot { background: var(--rust-dark); color: var(--on-rust-dim); font-size: 14px; }
.foot-grid {
  display: grid; gap: clamp(28px, 4vw, 54px);
  grid-template-columns: 1.6fr 1fr 1fr;
  padding-block: clamp(48px, 7vw, 84px);
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ochre); margin-bottom: 1.4em;
}
.foot-grid img.mark { height: 42px; width: auto; margin-bottom: 1.3em; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: .7em; }
.foot-grid a { color: var(--on-rust-dim); text-decoration: none;
  transition: color var(--dur-1) var(--ease-out); }
.foot-grid a:hover { color: var(--cream); }
.foot-grid p { font-size: 14px; line-height: 1.75; }
.foot-bar {
  border-top: 1px solid rgba(243,221,182,.16); padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  font-size: 12px; color: rgba(243,221,182,.5);
}
.foot-bar a { color: inherit; text-decoration: none; }
.foot-bar a:hover { color: var(--cream); }

/* hover/focus hint — used on "Allergens" in the footer */
.tip { position: relative; cursor: help; border-bottom: 1px dotted currentColor; outline: none; }
.tip::after {
  content: attr(data-tip);
  position: absolute; right: 0; left: auto; bottom: calc(100% + 10px);
  width: max-content; max-width: min(260px, calc(100vw - 2.5rem));
  padding: 9px 12px; border-radius: 8px;
  background: var(--ink); color: var(--on-rust);
  font-size: 12px; line-height: 1.5; text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
  pointer-events: none; z-index: 6;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* ------------------------------------------------------------- reveals ---- */

.reveal { opacity: 0; transform: translateY(26px);
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-media img { animation: none; }
  .nav-list a { transform: none; }
}

/* ---------------------------------------------------------------- misc ---- */

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.dark .hours li, .cta .hours li { border-bottom-color: rgba(243,221,182,.18); }
.hours li:first-child { border-top: 1px solid var(--border); }
.dark .hours li:first-child { border-top-color: rgba(243,221,182,.18); }
.hours span:first-child { color: var(--ink); }
.dark .hours span:first-child { color: var(--cream); }
.hours span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.dark .hours span:last-child { color: var(--on-rust-dim); }
.hours li.closed span:last-child { color: var(--rust); }
.dark .hours li.closed span:last-child { color: var(--ochre); }

.gallery { display: grid; gap: clamp(10px, 1.2vw, 16px); grid-template-columns: repeat(12, 1fr); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.g-tall { grid-column: span 4; aspect-ratio: 3/4; }
.g-wide { grid-column: span 8; aspect-ratio: 16/10; }
.g-half { grid-column: span 6; aspect-ratio: 4/3; }
.gallery.pair img { aspect-ratio: 3/4; }
@media (max-width: 720px) {
  .g-tall, .g-wide, .g-half { grid-column: span 12; }
}

/* --------------------------------------------------------- renovations --- */
/* Before/after wipe. The finished shopfront (.reno-ba-after) sits over the old
   VEBURGER one and is clipped back to the handle position (--pos). It starts
   at 0 — all VEBURGER — and the drag reveals Feather from the left. */
.reno-ba {
  position: relative; margin: 0 auto; overflow: hidden;
  max-width: 980px; aspect-ratio: 3 / 2;
  border: 1px solid var(--border-strong); background: var(--paper-2);
  user-select: none; -webkit-user-select: none;
}
.reno-ba img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
.reno-ba .reno-ba-after { clip-path: inset(0 calc(100% - var(--pos, 0%)) 0 0); }

.reno-ba .cap-before, .reno-ba .cap-after {
  position: absolute; bottom: 12px; z-index: 3;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: rgba(20, 12, 8, .62); padding: 5px 10px; pointer-events: none;
}
.reno-ba .cap-before { left: 12px; }
.reno-ba .cap-after  { right: 12px; }

.reno-ba-divider {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  /* clamped so the knob stays fully on-frame at the extremes; the image
     wipe itself still tracks the raw --pos value. */
  left: clamp(21px, var(--pos, 0%), calc(100% - 21px));
  width: 2px; margin-left: -1px;
  background: var(--cream); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(20, 12, 8, .22);
}
.reno-ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--cream);
  box-shadow: 0 2px 14px rgba(20, 12, 8, .35);
}
.reno-ba-knob::before, .reno-ba-knob::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border: 5px solid transparent;
}
.reno-ba-knob::before { left: 8px; transform: translateY(-50%); border-right-color: var(--rust-deep); }
.reno-ba-knob::after  { right: 8px; transform: translateY(-50%); border-left-color: var(--rust-deep); }

/* the range input is the actual control, laid over the whole frame */
.reno-ba-range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.reno-ba-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 200px; background: transparent; cursor: ew-resize;
}
.reno-ba-range::-moz-range-thumb {
  width: 44px; height: 200px; border: 0; background: transparent; cursor: ew-resize;
}
.reno-ba-range::-moz-range-track { background: transparent; }
.reno-ba-range:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

.reno-ba-hint {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: rgba(20, 12, 8, .6); padding: 9px 16px;
  pointer-events: none; transition: opacity var(--dur-2) var(--ease-out);
}
.reno-ba.is-touched .reno-ba-hint { opacity: 0; }

.reno-grid {
  display: grid; gap: clamp(10px, 1.2vw, 16px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.reno-grid img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--paper-2);
}

@media (max-width: 720px) {
  .reno-ba { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------- the build -- */
/* Scroll diary. A sticky photo stage cross-fades as the one-line steps pass it,
   with a progress bar along the foot of the image. No JS or reduced motion
   falls back to a plain captioned photo strip. */
.diary { position: relative; }
.diary-step { margin: 0 0 clamp(48px, 11vw, 116px); }
.diary-step:last-child { margin-bottom: 0; }
.diary-step > figure {
  margin: 0 0 1.1em; border: 1px solid var(--border-strong);
  background: var(--paper-2); overflow: hidden;
}
.diary-step > figure img { display: block; width: 100%; height: auto; }
.diary-cap {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.15rem, 1.5vw + 0.7rem, 1.7rem); line-height: 1.4;
  color: var(--ink); text-wrap: balance; max-width: 24ch; margin: 0;
}

/* live: JS attached, motion allowed */
.diary.is-live {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 76px); align-items: start;
}
.diary.is-live .diary-stage {
  position: sticky; top: clamp(58px, 8vw, 76px);
  height: calc(100svh - clamp(58px, 8vw, 76px));
  overflow: hidden; border: 1px solid var(--border-strong);
  background: var(--rust-dark);
}
.diary.is-live .diary-stage > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity var(--dur-3) var(--ease-out), transform 1300ms var(--ease-out);
}
.diary.is-live .diary-stage > img.is-active { opacity: 1; transform: scale(1); }
.diary-slate {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 0 0;
  background: linear-gradient(to top, rgba(30,12,6,.5), rgba(30,12,6,0));
}
.diary-slate .bar {
  display: block; height: 3px; background: rgba(243,221,182,.28); position: relative;
}
.diary-slate .bar > i {
  position: absolute; inset: 0; width: 100%; background: var(--ochre);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--ease-out);
}
.diary.is-live .diary-steps { min-width: 0; }
.diary.is-live .diary-step {
  min-height: 74vh; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.diary.is-live .diary-step:first-child { min-height: 56vh; }
.diary.is-live .diary-step:last-child { min-height: 48vh; }
.diary.is-live .diary-step > figure { display: none; }
.diary.is-live .diary-cap { max-width: 20ch; }

@media (max-width: 900px) {
  .diary.is-live { display: block; }
  .diary.is-live .diary-stage { display: none; }
  .diary.is-live .diary-step {
    display: block; min-height: 0; margin: 0 0 clamp(44px, 12vw, 96px);
  }
  .diary.is-live .diary-step > figure { display: block; }
  .diary.is-live .diary-cap { max-width: 32ch; }
}

/* ------------------------------------------------------- brand in header -- */
/* Two marks stacked in the same box; the ground under the header picks one. */
.head-marks { position: relative; display: block; }
.head-marks img {
  height: clamp(30px, 3.4vw, 44px); width: auto; margin-inline: auto;
  transition: height var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.head-marks .m-cream { position: absolute; inset: 0; margin: 0 auto; }
.site-head.is-solid .head-marks img { height: clamp(26px, 2.6vw, 34px); }

/* ----------------------------------------------------------------- map ---- */
.map { border: 1px solid var(--border); background: var(--paper-2); }
.map iframe { display: block; width: 100%; height: clamp(300px, 44vw, 460px); border: 0;
  filter: saturate(.72) contrast(1.02); }

/* ---------------------------------------------------------------- menu ---- */
/* The lunch and dinner menus: a picture of each PDF's page, the width of a
   menu, linking to the PDF itself. */
.menu-sheet {
  display: block; max-width: 760px; margin-inline: auto;
  border: 1px solid var(--border); background: #fff;
  box-shadow: 0 1px 2px rgba(40,16,6,.06), 0 12px 32px -12px rgba(40,16,6,.22);
}
.menu-sheet img { display: block; width: 100%; height: auto; }

/* A card standing in for a menu the page links out to — the Drinks tab. */
.notice {
  border: 1px solid var(--border-strong); background: var(--paper-2);
  padding: clamp(36px, 6vw, 60px) clamp(24px, 5vw, 48px);
  max-width: 520px; margin-inline: auto;
}

/* ---------------------------------------------------------------- book ---- */

/* The booking widget is the live Feather app embedded at /embed. The iframe is
   chromeless and auto-sized from a postMessage the widget sends (see book.html);
   the widget carries its own gutter, so the frame just caps the width. */
.embed-frame {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}
.embed-frame iframe {
  width: 100%;
  min-height: 560px;
  border: 0;
  display: block;
  background: var(--paper);
  color-scheme: light;
}

.booknote {
  background: var(--paper-2); border-left: 2px solid var(--ochre);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
  margin-bottom: clamp(26px, 4vw, 44px);
}
.booknote p { margin: 0; max-width: none; font-size: .95rem; }
.booknote a { color: var(--rust); }

.bookbar {
  display: grid; gap: 0 clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  background: var(--surface); border: 1px solid var(--border);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 1px 2px rgba(60,40,25,.05), 0 18px 40px rgba(60,40,25,.07);
}
.bookbar .field { margin-bottom: 0; }
@media (max-width: 640px) { .bookbar .field { margin-bottom: 16px; } }

.slots {
  display: grid; gap: clamp(8px, 1vw, 12px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
}
.slot {
  font: inherit; cursor: pointer; text-align: center;
  background: var(--rust); color: var(--paper); border: 1px solid var(--rust);
  padding: 13px 8px 12px;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.slot b { display: block; font-size: 1rem; font-weight: 500; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; }
.slot span { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; opacity: .74; }
.slot:hover { background: var(--rust-deep); border-color: var(--rust-deep); }
.slot:active { transform: scale(.975); }

/* -------------------------------------------------------------- a11y ------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ------------------------------------------------------------- phones ----- */
/* 'Book a table' will not wrap, so at narrow widths it has to get shorter or
   the whole header pushes the page wider than the screen. */
.btn .full { display: inline; }

@media (max-width: 760px) {
  .site-head { gap: 8px; }
  .btn .full { display: none; }
  .head-left .btn > span { padding: 11px 16px; font-size: 10px; letter-spacing: .16em; }
  .head-tag, .head-addr { letter-spacing: .22em; }
}

@media (max-width: 420px) {
  .head-tag, .head-addr { display: none; }
  .head-left .btn > span { padding: 10px 13px; }
}

/* Overlapping panels have nothing to overlap once the split has collapsed. */
@media (max-width: 620px) {
  .overlap { margin-top: -28px; }
  .hero-cta .btn > span { padding: 13px 18px; }
}

/* On a phone a full-screen hero (and a 52vh interior header) is mostly
   photo before you reach any content — shrink both so the page reads
   faster without losing the photography entirely. The hero is bottom-aligned,
   so its copy also needs a floor that clears the fixed header, or a short
   screen pushes the eyebrow up underneath the Book button. */
@media (max-width: 640px) {
  .hero { min-height: 68svh; }
  .hero-inner { padding-top: 132px; }
  /* Phone hero keeps just the eyebrow and headline — the descriptive line
     is redundant with less room to make its case. */
  .hero p.reveal.d2 { display: none; }
  .page-head, .page-head.short { min-height: clamp(290px, 46svh, 380px); }
  .page-head .wrap { padding-top: 84px; }
  /* the next section already peeks in below a short hero */
  .scroll-cue { display: none; }

  /* Safari fills the status bar with theme-color (build.py) and the page
     can't draw under it, so fade the top of the screen up into that same
     colour: the photo appears to run on beneath the clock. Sized to the
     header plus the 40px site.js waits before turning it solid, so it has
     gone by the time paper scrolls up underneath. */
  .site-head::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0;
    height: calc(100% + 40px); pointer-events: none;
    background: linear-gradient(to bottom,
      rgb(40,16,6) 0%, rgba(40,16,6,.82) 18%, rgba(40,16,6,.56) 40%,
      rgba(40,16,6,.3) 62%, rgba(40,16,6,.1) 84%, rgba(40,16,6,0) 100%);
    transition: opacity var(--dur-3) var(--ease-out);
  }
  .site-head.is-solid::before { opacity: 0; }
}

.map-links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; }

/* ------------------------------------------------------------ preloader --- */
/* Covers the page while the hero imagery loads — cleared by site.js on the
   window load event (with an 8s hard cap). The feather is the bob on an
   invisible pendulum whose pivot sits well above it, so it swings back and
   forth along a wide arc rather than rotating in place. */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--paper);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 420ms var(--ease-out), visibility 420ms linear;
}
/* shown only while the page is still loading; faded back out on load */
html.is-loading .preloader { opacity: 1; visibility: visible; pointer-events: auto; }
html.is-loading.is-loaded .preloader { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__brand {
  display: flex; flex-direction: column; align-items: center;
}
.preloader__word { width: 178px; height: auto; opacity: .92; }
.preloader__pendulum {
  margin-top: 18px;
  /* pivot well above the feather — this is the "string" length */
  transform-origin: 50% -132px;
  animation: preloader-swing 1.9s ease-in-out infinite alternate;
}
.preloader__feather {
  display: block; width: 84px; height: auto;
  transform: rotate(0deg);            /* feather lies flat; the arm does the swinging */
}
@keyframes preloader-swing {
  from { transform: rotate(-16deg); }
  to   { transform: rotate(16deg); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__pendulum { animation: none; }
  .preloader__brand { animation: preloader-pulse 1.6s ease-in-out infinite; }
  @keyframes preloader-pulse { 50% { opacity: .5; } }
}

/* ---------------------------------------------------------------- legal --- */
/* Privacy policy and any other long-form document page: quieter, smaller
   headings than the marketing pages so a dozen sections don't read as a
   dozen billboards, real bullet lists, a tighter measure. */
.legal { max-width: 68ch; }
.legal h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rust); margin: 2.6em 0 .9em;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: .85rem; letter-spacing: .03em;
  color: var(--ink); margin: 1.6em 0 .5em;
}
.legal p, .legal li { color: var(--text); }
.legal ul, .legal ol { margin: 0 0 1.15em; padding-left: 1.25em; max-width: var(--measure); }
.legal li { margin-bottom: .5em; }
.legal li:last-child { margin-bottom: 0; }
.legal li > p { margin-bottom: .4em; }
.legal a { color: var(--rust); text-decoration-color: var(--border-strong); }
.legal a:hover { text-decoration-color: currentColor; }
.legal .doc-updated { color: var(--muted); font-size: .85rem; margin: -.6em 0 0; }


/* ---------------------------------------------------------- social icon --- */
/* Sized in em so it tracks whatever text it sits beside, and painted with
   currentColor so it inherits every link state it is dropped into. */
.ig {
  width: 1.06em; height: 1.06em;
  vertical-align: -0.16em;
  margin-right: .45em;
  flex: none;
}
a:has(> .ig) { white-space: nowrap; }
.btn .ig { margin-right: .55em; vertical-align: -0.2em; }

/* ------------------------------------------------- drawer on small screens - */
/* Four blocks side by side cannot survive a phone: stack them so opening hours
   and the Instagram link are reachable without scrolling sideways. */
@media (max-width: 700px) {
  .nav { padding-top: clamp(84px, 12vh, 118px); }
  .nav-foot {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
  .nav-list a { font-size: clamp(1.9rem, 9vw, 2.6rem); }
}

@media (max-width: 700px) and (max-height: 700px) {
  /* short landscape phones — let the drawer scroll rather than clip */
  .nav { padding-top: 76px; }
  .nav-list a { font-size: 1.7rem; }
}