/* =====================================================================
   HERINGER MILLEN — Postcards from the Mullerthal
   Shared design system
   ===================================================================== */

/* ---------- Brand fonts (from CI assets) ---------- */
@font-face {
  font-family: 'SF Compact Display';
  src: url('../fonts/SF-Compact-Display-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Compact Display';
  src: url('../fonts/SF-Compact-Display-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Compact Display';
  src: url('../fonts/SF-Compact-Display-Heavy.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Compact Display';
  src: url('../fonts/SF-Compact-Display-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SF-Pro-Text-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SF-Pro-Text-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SF-Pro-Text-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Smoothly';
  src: url('../fonts/Smoothly.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* palette pulled from CI assets */
  --paper:        #FFF5E9;   /* base cream (HER_CI) */
  --paper-deep:   #F6EAD6;   /* warmer cream */
  --kraft:        #E7E0D2;   /* postcard greige */
  --kraft-deep:   #D8CFBC;
  --stamp:        #FFFDF8;   /* stamp paper (near white) */
  --sage:         #8A9573;   /* brand sage (stamp green) */
  --sage-soft:    #A7B091;
  --sage-deep:    #6C775A;
  --forest:       #38432E;   /* deep green ink */
  --forest-2:     #2B3424;
  --ink:          #2A2A20;   /* postmark near-black */
  --terracotta:   #BC6A3A;   /* warm accent (sparing) */
  --terracotta-2: #A4552B;

  --line:         rgba(56, 67, 46, 0.18);
  --line-soft:    rgba(56, 67, 46, 0.10);

  /* type */
  --display: 'SF Compact Display', 'Segoe UI', system-ui, sans-serif;
  --body:    'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --script:  'Smoothly', 'Segoe UI', cursive;

  /* spacing scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 144px;

  --maxw: 1240px;
  --radius: 4px;

  /* layered, color-tinted shadows */
  --shadow-sm: 0 1px 2px rgba(43,52,36,.06), 0 4px 12px rgba(43,52,36,.06);
  --shadow-md: 0 2px 6px rgba(43,52,36,.07), 0 14px 34px rgba(43,52,36,.12);
  --shadow-lg: 0 6px 14px rgba(43,52,36,.10), 0 30px 70px rgba(43,52,36,.20);
  --shadow-stamp: 0 2px 4px rgba(43,52,36,.10), 0 18px 36px rgba(43,52,36,.18);

  --ease: cubic-bezier(.22,.61,.25,1);
  --ease-spring: cubic-bezier(.34,1.56,.4,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--body);
  font-weight: 300;
  color: var(--forest);
  background-color: var(--paper);
  line-height: 1.72;
  font-size: 17px;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* Paper grain + texture atmosphere */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url('../img/paper-texture.jpg');
  background-size: 620px;
  mix-blend-mode: multiply;
  opacity: .35;
  pointer-events: none;
  z-index: 1;
}
body::after { /* fine grain via SVG noise */
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .04;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 2;
}
/* keep real content above the texture layers */
header, main, footer { position: relative; z-index: 3; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 800; line-height: .98; letter-spacing: -.03em; color: var(--forest); }
.display-xl { font-size: clamp(3rem, 9vw, 7.25rem); font-weight: 900; line-height: .92; }
.display-lg { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.display-md { font-size: clamp(1.9rem, 4vw, 3rem); }
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; line-height: 1; color: var(--sage-deep); }

.eyebrow {
  font-family: var(--body);
  font-weight: 500;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: var(--sage-deep);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--sage); display: inline-block;
}
.eyebrow.center::after {
  content: ""; width: 26px; height: 1px; background: var(--sage); display: inline-block;
}

.lead { font-size: clamp(1.05rem, 1.4vw, 1.28rem); line-height: 1.6; color: var(--forest); font-weight: 300; }
.muted { color: color-mix(in srgb, var(--forest) 62%, var(--paper)); }
.serif-i { font-style: italic; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.section { padding-block: clamp(64px, 11vw, 150px); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 90px); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--forest); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: .65em;
  font-family: var(--body); font-weight: 500; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 1.05em 1.7em;
  background: var(--bg); color: var(--fg);
  border-radius: 100px;
  position: relative;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease), background-color .35s var(--ease);
  box-shadow: var(--shadow-sm);
  will-change: transform;
}
.btn svg { transition: transform .4s var(--ease-spring); }
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(-1px) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.btn--ghost { --bg: transparent; --fg: var(--forest); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { --bg: var(--forest); --fg: var(--paper); box-shadow: inset 0 0 0 1.5px var(--forest), var(--shadow-md); }
.btn--sage { --bg: var(--sage); --fg: #fff; }
.btn--terra { --bg: var(--terracotta); --fg: #fff; }

.link-underline {
  position: relative; font-weight: 500; letter-spacing: .02em; color: var(--forest);
  padding-bottom: 2px;
}
.link-underline::after {
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* =====================================================================
   POSTAGE STAMP component — dishes & photos as collectible stamps
   ===================================================================== */
.stamp {
  position: relative;
  padding: 4%;                 /* visible stamp margin, scales with size */
  background: url('../img/stamp-frame.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 14px 26px rgba(43,52,36,.18)) drop-shadow(0 2px 4px rgba(43,52,36,.12));
  transition: transform .55s var(--ease-spring), filter .5s var(--ease);
  will-change: transform;
}
/* standalone pre-made postage stamp image (e.g. brand Millen stamp) */
.postage-img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 700 / 876; object-fit: contain;
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 12px 24px rgba(43,52,36,.20)) drop-shadow(0 2px 4px rgba(43,52,36,.12));
  transition: transform .55s var(--ease-spring), filter .5s var(--ease);
}
.postage-img:hover { transform: rotate(var(--tilt, 0deg)) translateY(-5px) scale(1.03); }

.stamp__inner {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(56,67,46,.14);
  overflow: hidden;
  background: var(--kraft);
}
.stamp__inner img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .9s var(--ease);
}
.stamp:hover { transform: rotate(var(--tilt, -1.5deg)) translateY(-6px) scale(1.015); }
.stamp:hover .stamp__inner img { transform: scale(1.06); }
.stamp__denom {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  font-family: var(--display); font-weight: 800; font-size: .78rem; letter-spacing: -.01em;
  color: var(--paper);
  background: var(--forest);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(43,52,36,.3);
  line-height: 1; text-align: center;
}
.stamp__cap {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  color: var(--paper); font-family: var(--display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(20,26,16,.6);
}
.stamp__cap small { display:block; font-family: var(--body); font-weight:400; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }
/* image overlays for legibility + color treatment */
.img-treat { position: relative; }
.img-treat::before { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(28,34,20,.62), rgba(28,34,20,0) 55%); z-index:1; }
.img-treat::after  { content:""; position:absolute; inset:0; background: var(--sage); mix-blend-mode: multiply; opacity:.10; z-index:1; }

/* ---------- Postmark (cancellation stamp) ---------- */
.postmark { color: var(--ink); opacity: .55; }
.postmark--rotate { animation: spin 60s linear infinite; }

/* watermill wheel */
.mill-wheel { transform-origin: 50% 50%; animation: spin 26s linear infinite; }
.hero__mill img.mill-wheel, .reserve__mill img.mill-wheel { width: 100%; height: 100%; display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Postcard panel ---------- */
.postcard {
  background:
    linear-gradient(115deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%),
    var(--kraft);
  background-blend-mode: overlay, normal;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.35);
  position: relative;
  overflow: hidden;
}
.postcard::after { /* paper grain on card */
  content:""; position:absolute; inset:0;
  background-image: url('../img/paper-texture.jpg'); background-size: 420px;
  mix-blend-mode: multiply; opacity: .28; pointer-events: none;
}
.postcard__divider { width: 1px; background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 12px); }

/* ---------- Hairline divider with postmark wave ---------- */
.wave-rule { height: 14px; width: 100%; color: var(--sage);
  background-image:
    radial-gradient(circle at 10px -4px, transparent 9px, currentColor 9px 10px, transparent 11px);
  background-size: 20px 14px; opacity: .5; }

/* ---------- Cards / tags ---------- */
.tag {
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color: var(--sage-deep);
  padding:.45em .85em; border:1px solid var(--line); border-radius:100px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding-block: 20px;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line-soft), 0 8px 30px rgba(43,52,36,.06);
  padding-block: 12px;
}
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); }
.brand { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 12px; }
.brand__logo { height: 34px; width: auto; display: block; transition: height .5s var(--ease); }
.site-header.scrolled .brand__logo { height: 28px; }
.site-footer .brand__logo { height: 62px; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; line-height: .95; }
.brand__name small { display:block; font-family: var(--body); font-weight: 400; font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sage-deep); }
.nav__links { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__links a {
  font-size: .82rem; letter-spacing: .04em; font-weight: 400; color: var(--forest);
  position: relative; padding: 6px 2px;
}
.nav__links a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background: var(--sage);
  transform: scaleX(0); transform-origin: center; transition: transform .4s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--sage-deep); font-weight: 500; }
.nav__cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 50%; align-items:center; justify-content:center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; display:block; width: 20px; height: 1.6px; background: var(--forest); transition: transform .4s var(--ease), opacity .3s;
}
.nav__toggle span::before { position: absolute; transform: translateY(-6px); }
.nav__toggle span::after  { position: absolute; transform: translateY(6px); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; position: relative; }
  .nav__cta .btn { display: none; }
  .mobile-menu .nav__links { display: flex; }
}

/* mobile menu sheet */
.mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px;
  opacity: 0; pointer-events: none; transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu .nav__links { flex-direction: column; gap: 22px; text-align: center; }
.mobile-menu .nav__links a { font-family: var(--display); font-weight: 800; font-size: 1.8rem; letter-spacing: -.02em; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--forest-2); color: var(--paper); position: relative; z-index: 3; overflow: hidden; }
.site-footer a { color: var(--paper); }
.site-footer .muted { color: color-mix(in srgb, var(--paper) 60%, var(--forest-2)); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); }
.footer-hours dt { font-weight: 500; color: var(--sage-soft); }
.footer-col h4 { color: var(--paper); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; font-family: var(--body); font-weight: 600; margin-bottom: 18px; }
.footer-col a { display:block; padding: 4px 0; color: color-mix(in srgb, var(--paper) 82%, var(--forest-2)); transition: color .3s, transform .3s var(--ease); }
.footer-col a:hover { color: var(--paper); transform: translateX(4px); }
@media (max-width: 760px){ .footer-grid { grid-template-columns: 1fr; gap: var(--s4); } }

/* =====================================================================
   MOTION — scroll reveal
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.94) translateY(20px); transition: opacity .9s var(--ease), transform 1s var(--ease-spring); transition-delay: var(--d, 0ms); }
.reveal-scale.in { opacity: 1; transform: none; }

/* utility */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: var(--s2); }
.grid { display: grid; gap: var(--s3); }
.flex { display: flex; }
.hidden { display: none; }

/* =====================================================================
   HOME — HERO
   ===================================================================== */
.hero { padding-top: clamp(120px, 16vh, 180px); padding-bottom: clamp(40px,6vw,72px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero__script { display:block; font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: -.18em; transform: rotate(-3deg); transform-origin: left; margin-left: .1em; }
.hero__title { display:block; font-size: clamp(3rem, 9.5vw, 7.2rem); font-weight: 900; line-height: .9; }
.hero__lead { max-width: 44ch; margin-top: var(--s3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s4); }
.hero__addr { margin-top: var(--s3); font-size: .82rem; letter-spacing: .04em; color: var(--sage-deep); font-weight: 400; }

.hero__art { position: relative; justify-self: center; width: min(100%, 460px); }
.hero__stamp { width: 100%; }
.hero__seal { position: absolute; width: clamp(104px,14vw,138px); right: -30px; bottom: -34px; z-index: 6; filter: drop-shadow(0 4px 10px rgba(43,52,36,.45)) drop-shadow(0 1px 2px rgba(43,52,36,.35)); }
.hero__mill { position: absolute; top: -34px; left: -34px; width: 84px; height: 84px; padding: 16px; background: var(--paper); border-radius: 50%; box-shadow: var(--shadow-md); z-index: 5; }

/* ticker */
.hero__ticker { margin-top: clamp(40px,6vw,72px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 16px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: inline-flex; gap: 28px; align-items: center; white-space: nowrap; animation: ticker 38s linear infinite; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: var(--forest); }
.ticker__track span:nth-child(even) { color: var(--sage); }
@keyframes ticker { to { transform: translateX(-50%); } }
.hero__ticker:hover .ticker__track { animation-play-state: paused; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { order: -1; width: min(78%, 360px); }
  .hero__seal { right: -10px; }
}

/* =====================================================================
   HOME — STORY
   ===================================================================== */
.story__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.story__photo { position: relative; }
.story__card { aspect-ratio: 4/5; }
.story__card img { width:100%; height:100%; object-fit: cover; }
.story__badge { position: absolute; right: -18px; bottom: -18px; background: var(--sage-deep); color: var(--paper); border-radius: 50%; width: 116px; height: 116px; display: grid; place-items: center; gap: 2px; box-shadow: var(--shadow-md); text-align: center; }
.story__badge svg { width: 34px; height: 34px; }
.story__badge span { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.story__copy h2 { margin: 14px 0 22px; max-width: 16ch; }
.story__copy p { max-width: 50ch; margin-bottom: 16px; }
.story__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.story__stats strong { display:block; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem,3vw,2.3rem); color: var(--sage-deep); letter-spacing: -.03em; }
.story__stats span { font-size: .82rem; line-height: 1.45; color: color-mix(in srgb,var(--forest) 62%,var(--paper)); }
@media (max-width: 820px){ .story__grid { grid-template-columns: 1fr; } .story__photo { max-width: 380px; } .story__badge{ width:96px;height:96px; } }

/* =====================================================================
   HOME — DISHES (stamp collection)
   ===================================================================== */
.dishes { background: linear-gradient(180deg, transparent, var(--paper-deep) 30%, var(--paper-deep) 70%, transparent); }
.dishes__head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; margin-bottom: clamp(40px,5vw,70px); }
.dishes__head h2 { margin-top: 12px; }
.dishes__intro { max-width: 40ch; justify-self: end; }
.dishes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.dish__label { margin-top: 22px; }
.dish__label h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.dish__label p { font-size: .88rem; margin-top: 4px; line-height: 1.45; }
.dishes__cta { margin-top: clamp(40px,5vw,64px); display:flex; justify-content:center; }
@media (max-width: 920px){ .dishes__grid { grid-template-columns: repeat(2,1fr); gap: 30px 24px; } .dishes__head { grid-template-columns: 1fr; } .dishes__intro { justify-self: start; } }
@media (max-width: 480px){ .dishes__grid { grid-template-columns: 1fr 1fr; } .dish__label h3 { font-size: 1.05rem; } }

/* =====================================================================
   HOME — ROOM RAIL
   ===================================================================== */
.room__head { margin-bottom: clamp(36px,5vw,60px); }
.room__head .eyebrow { display:inline-flex; }
.room__rail { display: flex; align-items: flex-start; gap: clamp(16px,2vw,28px); overflow-x: auto; padding: 10px clamp(20px,5vw,56px) 30px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.room__rail::-webkit-scrollbar { display: none; }
.room__img { position: relative; flex: 0 0 auto; width: min(72vw, 320px); height: 440px; scroll-snap-align: center; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.room__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.room__img--tall { height: 440px; }
.room__img:hover img { transform: scale(1.05); }
.room__img figcaption { position: absolute; left: 16px; bottom: 14px; color: var(--paper); font-family: var(--display); font-weight: 600; font-size: 1rem; text-shadow: 0 2px 12px rgba(20,26,16,.7); z-index: 2; }
.room__img::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(28,34,20,.6), transparent 50%); z-index:1; }

/* =====================================================================
   HOME — VISIT CARD
   ===================================================================== */
.visit__card { display: grid; grid-template-columns: 1.2fr auto 1fr; gap: clamp(28px,4vw,56px); padding: clamp(28px,4vw,56px); align-items: stretch; }
.visit__left h2 { margin: 12px 0 16px; }
.visit__left .muted { max-width: 38ch; margin-bottom: 24px; }
.hours { margin: 8px 0 26px; }
.hours > div { display:flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.hours dt { font-weight: 500; color: var(--forest); }
.hours dd { color: var(--sage-deep); font-variant-numeric: tabular-nums; }
.hours__off dd { color: var(--terracotta-2); }
.visit__right { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.visit__stamp-mini { align-self: flex-end; width: clamp(124px, 12vw, 156px); margin: 0; }
.visit__addr { font-style: normal; line-height: 1.7; font-size: .95rem; }
.visit__addr strong { font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
@media (max-width: 800px){ .visit__card { grid-template-columns: 1fr; } .postcard__divider { height:1px; width:100%; background: repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px); } }

/* =====================================================================
   HOME — RESERVE
   ===================================================================== */
.reserve { background: var(--forest-2); color: var(--paper); position: relative; overflow: hidden; }
.reserve h2 { color: var(--paper); }
.reserve .reserve__lead { color: color-mix(in srgb, var(--paper) 80%, var(--forest-2)); max-width: 46ch; margin-top: 18px; }
.reserve__inner { position: relative; z-index: 2; }
.reserve__mill { position:absolute; top: -40px; right: -30px; width: clamp(160px,22vw,260px); opacity: .22; z-index: 1; }
.reserve__embed { margin-top: clamp(34px,4vw,52px); max-width: 760px; margin-inline: auto; border-radius: 16px; padding: clamp(16px,3vw,28px); background: var(--paper); box-shadow: var(--shadow-lg); min-height: 110px; }
.reserve__embed .zc-widget-config { width: 100%; }
.reserve__iframe { width: 100%; min-height: 660px; border: 0; border-radius: 9px; display: block; background: var(--paper); }
.reserve__fallback { text-align: center; margin-top: 16px; font-size: .85rem; color: color-mix(in srgb, var(--paper) 72%, var(--forest-2)); }
.reserve__fallback a { color: var(--sage-soft); }
.reserve__placeholder { display:flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.reserve__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(30px,4vw,46px); }
.reserve__call { --fg: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.reserve__call:hover { --bg: rgba(255,255,255,.08); }

/* =====================================================================
   FOOTER bottom row
   ===================================================================== */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px; border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.footer-bottom .muted { font-size: .8rem; }
.footer-mini { display: flex; gap: 18px; }
.footer-mini a { font-size: .8rem; color: color-mix(in srgb,var(--paper) 72%,var(--forest-2)); }
.footer-mini a:hover { color: var(--paper); }
/* footer social icons */
.footer-col .social a { transform: none; }
.social-icon { width: 20px; height: 20px; display: block; opacity: .9; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.footer-col .social a:hover { transform: none; }
.footer-col .social a:hover .social-icon { opacity: 1; transform: translateY(-2px); }

/* =====================================================================
   SUBPAGE HERO
   ===================================================================== */
.page-hero { padding-top: clamp(140px, 18vh, 200px); padding-bottom: clamp(40px, 6vw, 70px); position: relative; overflow: hidden; }
.page-hero__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(30px,5vw,70px); align-items: end; }
.page-hero h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); font-weight: 900; line-height: .92; }
.page-hero .script { display:block; font-size: clamp(1.8rem,3.6vw,2.8rem); transform: rotate(-3deg); transform-origin: left; margin-bottom: -.1em; margin-left:.1em; }
.page-hero__lead { max-width: 46ch; margin-top: 22px; }
.page-hero__meta { display:flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.page-hero__stamp { width: min(100%, 260px); justify-self: end; }
.page-hero__stamp .stamp__cap { font-size: 1rem; }
@media (max-width: 820px){ .page-hero__grid { grid-template-columns: 1fr; align-items: start; } .page-hero__stamp { display:none; } }

/* breadcrumb-ish back link */
.kicker-row { display:flex; align-items:center; gap:16px; margin-bottom: 18px; }

/* =====================================================================
   MENU / DRINKS LISTINGS
   ===================================================================== */
.menu-wrap { display: grid; grid-template-columns: 1fr; gap: clamp(40px,5vw,64px); }
.menu-cols { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,80px); align-items: start; }
@media (max-width: 800px){ .menu-cols { grid-template-columns: 1fr; gap: 44px; } }

.menu-section { position: relative; }
.menu-section__head { display:flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.menu-section__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.menu-section__head .num { font-family: var(--display); font-weight: 800; color: var(--sage); font-size: 1rem; }
.menu-section__head .rule { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 9px); align-self: center; }
.menu-section__note { font-size: .82rem; color: var(--sage-deep); font-style: italic; margin-bottom: 22px; margin-top: -10px; }

.menu-item { padding: 15px 0; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; transition: padding .35s var(--ease); }
.menu-item:hover { padding-left: 8px; }
.menu-item__name { font-family: var(--display); font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; color: var(--forest); display:flex; align-items:center; gap:10px; }
.menu-item__price { font-family: var(--display); font-weight: 700; color: var(--sage-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item__desc { grid-column: 1 / 2; font-size: .9rem; line-height: 1.5; color: color-mix(in srgb,var(--forest) 60%,var(--paper)); max-width: 48ch; }
.menu-item .veg { font-size:.6rem; font-weight:600; letter-spacing:.1em; color: var(--sage); border:1px solid var(--sage-soft); border-radius: 3px; padding: 1px 4px; text-transform: uppercase; }

.menu-feature { position: sticky; top: 96px; }
.menu-feature .stamp { width: 100%; max-width: 320px; }
.menu-feature__cap { margin-top: 20px; max-width: 32ch; }

.menu-foot { text-align:center; border-top: 1px solid var(--line); padding-top: clamp(34px,4vw,52px); margin-top: 10px; }

/* =====================================================================
   LOCATION
   ===================================================================== */
.loc-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4vw,60px); align-items: stretch; }
@media (max-width: 860px){ .loc-grid { grid-template-columns: 1fr; } }
.map-card { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg); position: relative; min-height: 420px; background: var(--kraft); }
.map-card iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display:block; filter: saturate(.92) contrast(.98); }
.loc-info { display:flex; flex-direction: column; gap: 26px; }
.info-block h3 { font-size: 1.15rem; font-weight: 800; letter-spacing:-.01em; margin-bottom: 8px; display:flex; align-items:center; gap:10px; }
.info-block h3 svg { width: 20px; height: 20px; color: var(--sage); }
.info-block p { max-width: 46ch; }
.directions { display:grid; gap: 18px; }
.direction { display:grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px; border-radius: 8px; background: color-mix(in srgb, var(--kraft) 60%, transparent); box-shadow: var(--shadow-sm); }
.direction__icon { width: 42px; height: 42px; border-radius: 50%; background: var(--sage); color:#fff; display:grid; place-items:center; }
.direction__icon svg { width: 20px; height: 20px; }
.direction h4 { font-family: var(--display); font-weight: 700; font-size: 1rem; margin-bottom: 3px; }
.direction p { font-size: .88rem; color: color-mix(in srgb,var(--forest) 62%,var(--paper)); }

/* =====================================================================
   CAREERS
   ===================================================================== */
.values-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,36px); }
@media (max-width: 800px){ .values-grid { grid-template-columns: 1fr; } }
.value-card { padding: clamp(24px,3vw,34px); border-radius: 10px; background: color-mix(in srgb,var(--kraft) 55%, transparent); box-shadow: var(--shadow-sm); position: relative; transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease); }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-card .vc-num { font-family: var(--display); font-weight: 900; font-size: 2.2rem; color: var(--sage-soft); letter-spacing: -.03em; line-height:1; }
.value-card h3 { font-size: 1.25rem; font-weight: 800; margin: 14px 0 8px; }
.value-card p { font-size: .92rem; color: color-mix(in srgb,var(--forest) 64%,var(--paper)); }

.jobs { display:grid; gap: 0; }
.job { display:grid; grid-template-columns: auto 1fr auto auto; gap: 20px; align-items: center; padding: 24px 6px; border-top: 1px solid var(--line); transition: padding .4s var(--ease), background-color .4s var(--ease); }
.job:last-child { border-bottom: 1px solid var(--line); }
.job:hover { padding-left: 16px; }
.job__num { font-family: var(--display); font-weight: 800; color: var(--sage); font-size:.9rem; }
.job__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem,2vw,1.55rem); letter-spacing:-.02em; }
.job__title small { display:block; font-family: var(--body); font-weight: 400; font-size: .82rem; color: var(--sage-deep); letter-spacing: .02em; margin-top: 2px; }
.job__type { font-size: .78rem; letter-spacing:.1em; text-transform: uppercase; color: var(--sage-deep); }
.job .btn { padding: .7em 1.1em; font-size:.72rem; }
@media (max-width:700px){ .job { grid-template-columns: auto 1fr; gap: 6px 14px; } .job__type, .job .btn { grid-column: 2; justify-self: start; } }

.apply-card { display:grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); }
.apply-card__media { position: relative; min-height: 100%; }
.apply-card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.apply-card__body { background: var(--forest-2); color: var(--paper); padding: clamp(30px,4vw,52px); }
.apply-card__body h2 { color: var(--paper); }
.apply-card__body .muted { color: color-mix(in srgb,var(--paper) 72%,var(--forest-2)); }
.apply-card__body .link-underline { color: var(--sage-soft); font-weight: 500; }
.apply-card__body .link-underline:hover { color: var(--paper); }
.form-row { display:grid; gap: 14px; margin-top: 22px; }
.field { display:flex; flex-direction: column; gap: 7px; }
.field label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-soft); }
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: .95rem; color: var(--paper);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
  padding: 12px 14px; transition: border-color .3s, background-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--sage-soft); background: rgba(255,255,255,.1); }
.field select { -webkit-appearance: none; appearance: none; }
.field select option { color: #2A2A20; background: #FFF5E9; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb,var(--paper) 45%, transparent); }
/* custom English file picker (native button text is browser-localised) */
.field label.file-input { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; text-transform: none; letter-spacing: normal; color: inherit; font-size: 1rem; }
.file-input input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.file-btn {
  font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest); background: var(--sage-soft); border-radius: 6px; padding: 10px 16px;
  white-space: nowrap; transition: background-color .3s var(--ease);
}
.file-input:hover .file-btn { background: var(--sage); }
.file-input input[type=file]:focus-visible + .file-btn { outline: 2px solid var(--sage-soft); outline-offset: 2px; }
.file-name { font-size: .9rem; color: color-mix(in srgb, var(--paper) 60%, transparent); }
@media (max-width: 720px){ .apply-card { grid-template-columns: 1fr; } .apply-card__media { min-height: 240px; } }

/* generic intro band */
.band { background: var(--forest-2); color: var(--paper); }
.band h2, .band h3 { color: var(--paper); }
.band .muted { color: color-mix(in srgb,var(--paper) 72%,var(--forest-2)); }

/* two-up text intro */
.intro-2 { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,70px); align-items: end; margin-bottom: clamp(40px,5vw,64px); }
@media (max-width: 760px){ .intro-2 { grid-template-columns: 1fr; gap: 18px; } }