/* ==========================================================================
   HARVEST MOON BAKERY - styles.css
   Plain CSS. No preprocessor, no build step, no framework.
   Palette: bark #2E2016 · cream #F3E7D3 · harvest amber #E8A93C · sage #8A9A6B
   ========================================================================== */

:root {
  --bark:       #2E2016;
  --bark-deep:  #1E140D;
  --bark-soft:  #4A3625;
  --cream:      #F3E7D3;
  --cream-lite: #FAF3E7;
  --amber:      #E8A93C;
  --amber-lite: #F6C868;
  --amber-deep: #C78A22;
  --sage:       #8A9A6B;
  --plum:       #6B3A4B;

  --ink-on-cream: #3A2A1C;
  --muted-cream:  rgba(243, 231, 211, .72);
  --muted-bark:   rgba(58, 42, 28, .72);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1220px;
  --header-h: 84px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Warm paper grain, inlined as SVG so there's no extra request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--cream);
  background: var(--bark);
  overflow-x: hidden;
}

/* height:auto is load-bearing - the <img> width/height attributes map to a
   presentational height, and CSS aspect-ratio is ignored unless height is auto.
   Framed photos below put the ratio on the figure and let the image fill it. */
img { max-width: 100%; display: block; height: auto; }

/* Shared frame: the figure owns the aspect ratio, the image just fills it.
   The image is deliberately taller than its frame so it has room to drift
   vertically for the scroll parallax without ever exposing an edge. */
.hero-figure, .story-figure, .menu-figure, .gal { position: relative; overflow: hidden; }
.hero-figure img, .story-figure img, .menu-figure img, .gal img {
  position: absolute; left: 0;
  top: -9%; height: 118%;
  width: 100%; object-fit: cover;
  will-change: transform;
}
figure { margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.015em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 26px; }

.ital { font-style: italic; font-variation-settings: "SOFT" 60, "WONK" 1; }

.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;
}

.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 400;
  background: var(--amber); color: var(--bark-deep);
  padding: 12px 22px; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

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

/* ----------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; min-height: 52px;
  font-family: var(--body); font-size: .93rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-amber { background: var(--amber); color: var(--bark-deep); }
.btn-amber:hover { background: var(--amber-lite); }

.btn-ghost { border-color: rgba(243, 231, 211, .38); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); background: rgba(243, 231, 211, .09); }

/* On cream sections the ghost button needs dark ink instead. */
.btn-ghost-dark { border-color: rgba(58, 42, 28, .3); color: var(--ink-on-cream); }
.btn-ghost-dark:hover { border-color: var(--bark); background: rgba(46, 32, 22, .06); }

/* --------------------------------------------------------------- PRELOADER */
.preloader {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-content: center; justify-items: center; gap: 26px;
  background: var(--bark-deep);
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.is-done { opacity: 0; visibility: hidden; }
/* Without JS there's nothing to dismiss it, so never show it in the first place. */
html:not(.js) .preloader { display: none; }

.preloader-moon {
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--amber-lite), var(--amber) 52%, var(--amber-deep) 100%);
  box-shadow: 0 0 70px 18px rgba(232, 169, 60, .32);
  animation: moon-rise 1.5s var(--ease) both;
}
@keyframes moon-rise {
  from { transform: translateY(46px) scale(.72); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.preloader-mark {
  font-family: var(--display); font-size: 1.5rem; font-weight: 500;
  color: var(--cream); text-align: center; line-height: 1.15;
  animation: fade-up 1.1s .35s var(--ease) both;
}
.preloader-mark span {
  display: block; font-size: .72rem; font-family: var(--body);
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--amber); margin-top: 8px; padding-left: .42em;
}
@keyframes fade-up {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ------------------------------------------------------------------ HEADER */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

/* Scrolled state: warm cream bar with dark ink. */
.site-header.is-stuck {
  background: rgba(250, 243, 231, .95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom-color: rgba(46, 32, 22, .12);
  box-shadow: 0 10px 34px rgba(30, 20, 13, .09);
}
.site-header.is-stuck .brand-word,
.site-header.is-stuck .nav a { color: var(--ink-on-cream); }
.site-header.is-stuck .brand-word span { color: var(--amber-deep); }
.site-header.is-stuck .btn-ghost { border-color: rgba(58, 42, 28, .3); color: var(--ink-on-cream); }
.site-header.is-stuck .btn-ghost:hover { border-color: var(--bark); background: rgba(46, 32, 22, .06); }
.site-header.is-stuck .nav-toggle .bars i { background: var(--ink-on-cream); }

.brand {
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; margin-right: auto;
}
.brand img {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(232, 169, 60, .5);
  flex: none;
}
/* The real logo is a 100px wood-burn mark - far too small to read as a wordmark,
   so the lockup sets the name in Fraunces beside it. */
.brand-word {
  font-family: var(--display); font-size: 1.16rem; font-weight: 600;
  line-height: 1.05; color: var(--cream);
  transition: color .45s var(--ease);
}
.brand-word span {
  display: block; font-family: var(--body);
  font-size: .6rem; font-weight: 500; letter-spacing: .34em;
  text-transform: uppercase; color: var(--amber);
  margin-top: 4px;
  transition: color .45s var(--ease);
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  position: relative; padding: 9px 15px;
  font-size: .93rem; font-weight: 400; letter-spacing: .04em;
  color: var(--cream); text-decoration: none;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 2px;
  height: 1px; background: var(--amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-find { padding: 12px 24px; min-height: 46px; font-size: .8rem; }

.nav-toggle {
  display: none; width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid rgba(243, 231, 211, .35);
  border-radius: 50%; cursor: pointer;
}
.nav-toggle .bars { display: grid; gap: 5px; justify-items: center; }
.nav-toggle .bars i {
  display: block; width: 18px; height: 1.5px; background: var(--cream);
  transition: transform .3s var(--ease), opacity .25s var(--ease), background-color .45s var(--ease);
}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* -------------------------------------------------------------------- HERO */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 44px) 0 96px;
  background:
    radial-gradient(120% 80% at 82% 12%, rgba(232, 169, 60, .17), transparent 58%),
    linear-gradient(180deg, var(--bark) 0%, var(--bark-deep) 100%);
}

/* The harvest moon - a glowing disc that parallaxes behind everything. */
.moon {
  position: absolute; top: 8%; right: 8%;
  width: min(46vw, 480px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #FFF0D2 0%, var(--amber-lite) 34%, var(--amber) 62%, var(--amber-deep) 100%);
  box-shadow:
    0 0 120px 40px rgba(232, 169, 60, .28),
    0 0 260px 110px rgba(232, 169, 60, .14);
  opacity: .95;
  z-index: -2;
  will-change: transform;
  animation: moon-in 2s var(--ease) both;
}
/* Craters: hard-edged circles read as a face, so these are large, very low
   contrast and heavily feathered - texture you sense rather than see. */
.moon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 70% 26%, rgba(140, 96, 40, .10), transparent 46%),
    radial-gradient(circle at 32% 62%, rgba(140, 96, 40, .08), transparent 52%),
    radial-gradient(circle at 54% 84%, rgba(140, 96, 40, .07), transparent 44%);
  filter: blur(6px);
}
@keyframes moon-in {
  from { transform: translateY(70px) scale(.86); opacity: 0; }
  to   { transform: none; opacity: .95; }
}

.hero-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain);
  opacity: .05; mix-blend-mode: overlay;
}

.hero-inner {
  display: grid; grid-template-columns: 1.18fr .82fr;
  gap: 64px; align-items: center;
}

.eyebrow-wrap { margin-bottom: 26px; }
.eyebrow {
  display: inline-block;
  font-family: var(--body); font-size: .74rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--amber);
}

/* Sized so each authored line stays on one line at desktop widths - the line
   breaks are part of the composition, not accidents. */
.hero-title {
  font-size: clamp(2.15rem, 3.9vw, 3.5rem);
  font-weight: 500; line-height: 1.08; margin-bottom: 26px;
}
.hero-title span { display: block; }
.hero-title .ital { color: var(--amber); font-weight: 400; }

.hero-sub {
  font-size: 1.08rem; font-weight: 300; line-height: 1.75;
  color: var(--muted-cream); max-width: 34em; margin-bottom: 38px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Arched frame - echoes an oven mouth and the rising moon. */
.hero-figure {
  width: 100%; max-width: 400px; justify-self: end;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 40px 90px rgba(20, 13, 8, .55);
  border: 1px solid rgba(232, 169, 60, .22);
}
.hero-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 26px 20px;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream); text-align: center;
  background: linear-gradient(transparent, rgba(20, 13, 8, .82));
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted-cream); text-decoration: none;
  transition: color .3s var(--ease);
}
.scroll-cue:hover { color: var(--amber); }
.scroll-cue-line {
  width: 1px; height: 46px;
  background: linear-gradient(var(--amber), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}

/* ---------------------------------------------------------------- SECTIONS */
.section { position: relative; padding: 130px 0; }

.section-cream {
  background: var(--cream);
  color: var(--ink-on-cream);
}
/* Paper grain over the cream sections. */
.section-cream::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .055; mix-blend-mode: multiply;
}
.section-cream > * { position: relative; }

.section-menu {
  background: var(--cream-lite);
  color: var(--ink-on-cream);
}
.section-menu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .05; mix-blend-mode: multiply;
}
.section-menu > * { position: relative; }

.section-dark { background: var(--bark-deep); color: var(--cream); }

.kicker {
  font-family: var(--body); font-size: .72rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--amber-deep); margin-bottom: 20px;
}
.kicker-light { color: var(--amber); }

.section-head { max-width: 740px; margin-bottom: 76px; }
.section-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 500; }
.section-head .lede { margin-top: 22px; }

.lede {
  font-size: 1.08rem; font-weight: 300; line-height: 1.8;
  color: var(--muted-bark); max-width: 40em;
}
.section-head-light .lede, .section-dark .lede { color: var(--muted-cream); }

/* ------------------------------------------------------------------- STORY */
.story-inner {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: 84px; align-items: center;
}
.story-figure {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 20px 20px;
  box-shadow: 0 34px 70px rgba(46, 32, 22, .2);
}

.story-copy h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 500; margin-bottom: 26px; }
.story-copy .lede { margin-bottom: 8px; }
.story-copy > p { margin-bottom: 22px; color: var(--muted-bark); font-weight: 300; }

.flourish { color: var(--amber-deep); margin: 30px 0; opacity: .8; }
.flourish svg { width: 220px; max-width: 100%; height: auto; }

.ethos { display: grid; gap: 14px; margin-top: 34px; }
.ethos li {
  position: relative; padding-left: 30px;
  font-size: .98rem; color: var(--muted-bark);
}
.ethos li strong { color: var(--ink-on-cream); font-weight: 600; }
.ethos li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 1px; background: var(--amber-deep);
}

/* -------------------------------------------------------------------- MENU */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  align-items: start;
}

.menu-group-head { margin-bottom: 24px; }
.menu-group h3 {
  font-size: 1.85rem; font-weight: 500;
  padding-bottom: 14px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(58, 42, 28, .18);
}
.menu-note {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber-deep);
}

.menu-list { display: grid; gap: 13px; }
.menu-list li {
  font-size: 1.02rem; font-weight: 400; line-height: 1.45;
  color: var(--ink-on-cream);
}
.menu-sub {
  display: block; font-size: .86rem; font-weight: 300;
  font-style: italic; color: var(--muted-bark); margin-top: 2px;
}

.menu-footnote {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed rgba(58, 42, 28, .22);
  font-size: .9rem; font-weight: 300; font-style: italic;
  color: var(--muted-bark);
}
.menu-footnote a { color: var(--amber-deep); text-underline-offset: 3px; }

.menu-figure {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  box-shadow: 0 26px 56px rgba(46, 32, 22, .18);
}
/* Hover zoom uses the standalone `scale` property, not `transform` - GSAP owns
   `transform` on these images for the parallax, and the two would fight. */
.menu-figure img, .gal img, .story-figure img, .hero-figure img {
  scale: 1;
  transition: scale .9s var(--ease), filter .6s var(--ease);
}
.menu-figure:hover img, .story-figure:hover img, .hero-figure:hover img { scale: 1.05; }
.menu-figure:hover img { transform: scale(1.05); }
.menu-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 20px 18px;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream);
  background: linear-gradient(transparent, rgba(20, 13, 8, .8));
}
/* Nudge the two photos so the grid reads as an editorial spread, not a table. */
.menu-figure-a { margin-top: 34px; }
.menu-figure-b { margin-top: -24px; }

/* ----------------------------------------------------------------- GALLERY */
.gallery { overflow: hidden; }
.gallery-glow {
  position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
  width: min(120vw, 1100px); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, rgba(232, 169, 60, .16), transparent 68%);
  pointer-events: none;
}

/* DEFAULT: offset editorial grid. Every tile is one column wide, so the grid
   can never strand a half-empty row. The rhythm comes from alternating
   portrait/landscape ratios plus a staggered top margin, with align-items:start
   letting the bottoms run ragged. JS may upgrade this to the pinned horizontal
   track below - but only when it can do so safely. */
.gal-viewport { width: 100%; }
.gal-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 26px;
}

.gal {
  border-radius: 14px;
  background: var(--bark);
  box-shadow: 0 22px 50px rgba(12, 8, 5, .45);
  aspect-ratio: 4 / 3;
}

/* Portrait tiles, offset downward, break up the grid. */
.gal:nth-child(odd)   { aspect-ratio: 4 / 5; }
.gal:nth-child(3n + 2) { margin-top: 52px; }

.gal:hover img { scale: 1.06; filter: brightness(1.06); }

/* --- HORIZONTAL MODE: added by JS only on a wide, hoverable viewport ---
   This is a real overflow container, not a pinned scroll-hijack: the wheel
   only drives it while the pointer is over the strip, and once it reaches
   either end the page takes the scroll back. */
.gallery.is-horizontal .gal-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* Stop the horizontal wheel from triggering browser back/forward gestures. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery.is-horizontal .gal-viewport::-webkit-scrollbar { display: none; }

.gallery.is-horizontal .gal-track {
  display: flex; align-items: center; gap: 32px;
  width: max-content; max-width: none;
  margin: 0; padding: 6vh 8vw;
}
.gallery.is-horizontal .gal {
  flex: none;
  width: clamp(300px, 26vw, 420px);
  margin-top: 0;
  aspect-ratio: 4 / 5;
}
/* Alternate the heights so the strip has a horizon line, not a ruler edge. */
.gallery.is-horizontal .gal:nth-child(even) {
  aspect-ratio: 4 / 3;
  align-self: flex-end;
  margin-bottom: 6vh;
}

/* Affordance: only shown once the strip is actually sideways. */
.gal-hint { display: none; }
.gallery.is-horizontal .gal-hint {
  display: block;
  margin-top: 22px;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber);
}
.gal-hint span { display: inline-block; animation: hint-nudge 1.9s ease-in-out infinite; }
@keyframes hint-nudge { 50% { transform: translateX(7px); } }

/* Position readout under the strip. */
.gal-progress { display: none; }
.gallery.is-horizontal .gal-progress {
  display: block;
  height: 2px; margin-top: 34px;
  background: rgba(243, 231, 211, .14);
  border-radius: 2px; overflow: hidden;
}
.gal-progress i {
  display: block; height: 100%; width: 100%;
  background: var(--amber);
  transform: scaleX(0); transform-origin: left;
}

.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 3px;
  padding: 60px 22px 20px;
  background: linear-gradient(transparent, rgba(12, 8, 5, .86));
  transform: translateY(8px); opacity: .92;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.gal:hover figcaption { transform: none; opacity: 1; }
.gal-name {
  font-family: var(--display); font-size: 1.16rem; font-weight: 500;
  color: var(--cream);
}
.gal-meta {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber);
}

/* ------------------------------------------------------------------- VISIT */
.visit-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.visit-copy h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); font-weight: 500; margin-bottom: 24px; }
.visit-copy .ital { color: var(--amber-deep); }
.visit-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.visit-panel {
  display: grid; gap: 34px;
  padding: 48px 44px;
  background: var(--bark);
  color: var(--cream);
  border-radius: 20px;
  box-shadow: 0 34px 70px rgba(46, 32, 22, .28);
}
.visit-block h3 {
  font-family: var(--body); font-size: .72rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 14px;
}
.visit-addr { font-family: var(--display); font-size: 1.18rem; line-height: 1.55; font-weight: 400; }

.hours { display: grid; gap: 12px; }
.hours > div {
  display: flex; justify-content: space-between; gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(243, 231, 211, .14);
  font-size: .95rem;
}
.hours > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hours dt { color: var(--muted-cream); font-weight: 300; }
.hours dd { font-weight: 500; white-space: nowrap; }

.socials { display: grid; gap: 12px; }
.socials a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: .95rem; text-decoration: none;
  transition: color .3s var(--ease);
}
.socials a span { font-size: .84rem; color: var(--muted-cream); font-weight: 300; }
.socials a:hover { color: var(--amber); }
.socials a:hover span { color: var(--amber); }

/* ------------------------------------------------------------------ FOOTER */
.footer { position: relative; overflow: hidden; background: var(--bark-deep); }
.footer-moon {
  position: absolute; bottom: -190px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, var(--amber-lite), var(--amber) 56%, var(--amber-deep));
  opacity: .13;
  filter: blur(2px);
  pointer-events: none;
}
.footer-inner {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 34px; padding-top: 76px; padding-bottom: 56px;
}
.footer-brand { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.footer-brand img {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid rgba(232, 169, 60, .45);
}
.footer-word { font-family: var(--display); font-size: 1.42rem; font-weight: 600; line-height: 1.05; }
.footer-word span {
  display: block; font-family: var(--body);
  font-size: .62rem; font-weight: 500; letter-spacing: .36em;
  text-transform: uppercase; color: var(--amber); margin-top: 5px;
}

.footer-nav { display: flex; flex-wrap: wrap; gap: 26px; }
.footer-nav a { font-size: .95rem; text-decoration: none; transition: color .3s var(--ease); }
.footer-nav a:hover { color: var(--amber); }

.footer-social { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-social a {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--muted-cream);
  border-bottom: 1px solid rgba(232, 169, 60, .4); padding-bottom: 3px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer-social a:hover { color: var(--amber); border-color: var(--amber); }

.footer-bar { position: relative; border-top: 1px solid rgba(243, 231, 211, .1); }
.footer-bar-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding-top: 24px; padding-bottom: 24px;
  font-size: .84rem; font-weight: 300; color: var(--muted-cream);
}

/* ----------------------------------------------------------- SCROLL REVEAL */
/* Only applied when JS is present to remove it. */
.js .r {
  opacity: 0;
  transform: translateY(30px);
}
.js .r.in {
  opacity: 1;
  transform: none;
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* --- Masked line reveal: type rises out of a clipped box, no cross-fade --- */
.mask {
  display: block;
  overflow: hidden;
  /* Room for descenders and Fraunces' italic swashes, pulled back off the
     layout so the mask doesn't change the spacing it wraps. */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.js .mask > .r {
  opacity: 1;
  transform: translateY(115%);
}
.js .mask > .r.in {
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.hero-title .mask, .hero-title .line { display: block; }

/* --- Curtain reveal for framed photos: the frame wipes open upward ---
   `round` is essential: a bare inset() clips to a sharp rectangle and would
   square off the arched frames. Each figure declares its own --fig-r. */
.js .fig-reveal {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0 round var(--fig-r, 14px));
}
.js .fig-reveal.in {
  clip-path: inset(0 0 0 0 round var(--fig-r, 14px));
  transition: clip-path 1.25s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.hero-figure  { --fig-r: 999px 999px 18px 18px; }
.story-figure { --fig-r: 999px 999px 20px 20px; }
.menu-figure  { --fig-r: 16px; }
.gal          { --fig-r: 14px; }

/* --------------------------------------------------------- SCROLL PROGRESS */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 2px; pointer-events: none;
}
.scroll-progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber-lite));
  transform: scaleX(0); transform-origin: left;
}

.magnetic { will-change: transform; }

/* ------------------------------------------------------------ MOVING BAND */
.band {
  background: var(--bark-deep);
  color: var(--cream);
  border-top: 1px solid rgba(232, 169, 60, .18);
  border-bottom: 1px solid rgba(232, 169, 60, .18);
  padding: 20px 0;
  overflow: hidden;
}
.band-track {
  display: flex; align-items: center;
  width: max-content;
  animation: band-scroll 42s linear infinite;
}
.band-group { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
.band span {
  font-family: var(--display); font-size: 1.25rem; font-weight: 400;
  font-style: italic; white-space: nowrap;
}
.band b { color: var(--amber); font-size: .8rem; }
/* One group is 25% of the track, so this wraps with no seam. */
@keyframes band-scroll { to { transform: translateX(-25%); } }

/* ------------------------------------------------------- SECTION NUMERALS */
.kicker .num {
  display: inline-block;
  margin-right: 12px; padding-right: 12px;
  border-right: 1px solid currentColor;
  opacity: .55;
}

/* ------------------------------------------- HEADER AUTO-HIDE ON SCROLL DOWN */
.site-header { transform: translateY(0); }
.site-header.is-hidden { transform: translateY(-105%); }
.site-header { transition: background-color .45s var(--ease), box-shadow .45s var(--ease),
                           border-color .45s var(--ease), transform .5s var(--ease); }

/* ================================================================ RESPONSIVE */

@media (max-width: 1080px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .menu-figure-a, .menu-figure-b { margin-top: 0; }
  .story-inner { gap: 56px; }
}

@media (max-width: 900px) {
  :root { --header-h: 74px; }

  .nav {
    position: fixed; inset: 0; z-index: 210;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: rgba(30, 20, 13, .97);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav a { font-family: var(--display); font-size: 2rem; color: var(--cream); padding: 14px 20px; }
  .nav a::after { display: none; }
  /* The panel covers the viewport, so keep its links cream even when stuck. */
  .site-header.is-stuck .nav a { color: var(--cream); }

  .nav-toggle { display: grid; place-items: center; position: relative; z-index: 220; }
  .btn-find { display: none; }

  .hero { padding: calc(var(--header-h) + 46px) 0 100px; }
  .hero-inner { grid-template-columns: 1fr; gap: 52px; }
  .hero-figure { max-width: 440px; margin-inline: auto; }
  .moon { top: 4%; right: -8%; width: min(60vw, 340px); }

  .section { padding: 92px 0; }
  .section-head { margin-bottom: 54px; }

  .story-inner { grid-template-columns: 1fr; gap: 48px; }
  .story-figure { max-width: 520px; }

  .visit-inner { grid-template-columns: 1fr; gap: 48px; }

  .gal-track { grid-template-columns: repeat(2, 1fr); }
  .gal:nth-child(3n + 2) { margin-top: 0; }
  .gal:nth-child(even) { margin-top: 44px; }
  .band span { font-size: 1.05rem; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 30px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-figure { border-radius: 500px 500px 16px 16px; --fig-r: 500px 500px 16px 16px; }
  .scroll-cue { display: none; }

  /* There's no room on a phone for a hard-edged disc: wherever it sits it
     lands on the eyebrow, the headline or the menu button, and amber-on-amber
     kills the contrast. Blur it into a halo - same warmth, no edge, nothing
     competing with live text. */
  .moon {
    top: -6%; right: -22%;
    width: min(58vw, 280px);
    opacity: .34;
    filter: blur(16px);
  }
  .moon::after { display: none; }

  .section { padding: 76px 0; }
  .menu-grid { grid-template-columns: 1fr; gap: 44px; }
  .gal-track { grid-template-columns: 1fr; padding-inline: 20px; }
  .gal, .gal:nth-child(odd) { aspect-ratio: 4 / 3; }
  .gal:nth-child(even) { margin-top: 0; }

  .visit-panel { padding: 36px 26px; }
  .visit-cta { flex-direction: column; align-items: stretch; }
  .visit-cta .btn { width: 100%; }

  .footer-bar-inner { flex-direction: column; }
  .nav a { font-size: 1.6rem; }
}

/* -------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .r { opacity: 1; transform: none; }
  .js .mask > .r { transform: none; }
  .js .fig-reveal { clip-path: none; }
  .moon { animation: none; }
  .preloader { display: none; }
  .scroll-progress { display: none; }
  .gal-hint span { animation: none; }
  /* A perpetually sliding band is exactly what this preference is about. */
  .band-track { animation: none; }
  .site-header.is-hidden { transform: none; }
}

/* ------------------------------------------------------------------ PRINT */
@media print {
  .site-header, .preloader, .scroll-cue, .moon, .gallery-glow, .footer-moon { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 24px 0; }
}