:root{
  --red:#A02227; --red-deep:#8E2B23; --brass:#C28A3C; --brass-lt:#D6A95B;
  --ink:#1A1A18; --cream:#F2EEE0; --cream2:#E4DAC0; --wood:#4A3526;
  --olive:#6B6E47; --olive-tile:#7C8463; --terracotta:#9E4A33;
  --dusk:#243A55; --bulb:#FBE6B0;
  --ph-bg:#E8E0CE; --ph-bd:#C9BC9E;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;font-weight:300;color:var(--ink);background:var(--cream);line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.1}
.serif-italic{font-family:'Cormorant Garamond',serif;font-style:italic}
img{display:block;max-width:100%}

/* Label caps echoing logo apothecary rules */
.label{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--red)}
.rule-label{display:flex;align-items:center;gap:1rem;justify-content:center;color:var(--brass)}
.rule-label::before,.rule-label::after{content:'';height:1px;width:48px;background:var(--brass)}
.rule-label .diamond{color:var(--brass);font-size:.6rem}

/* Placeholder — sketch style: hatched fill + camera/film glyph + caption */
.ph{position:relative;background:
   repeating-linear-gradient(45deg,rgba(107,110,71,.07)0,rgba(107,110,71,.07)9px,transparent 9px,transparent 18px),
   var(--ph-bg);
  border:1.5px dashed var(--ph-bd);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;gap:.6rem;overflow:hidden}
.ph::before{content:'';width:34px;height:26px;border:2px solid var(--olive);border-radius:4px;opacity:.55;
  background:radial-gradient(circle at 50% 55%,transparent 5px,var(--olive) 5px,var(--olive) 7px,transparent 7px);
  box-shadow:0 -6px 0 -3px var(--olive)}/* little camera */
.ph .ph-kind{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--olive);font-weight:700}
.ph span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#8a7f68;font-weight:500;max-width:90%;line-height:1.6}
.ph.video::before{border-radius:4px;background:var(--olive);box-shadow:none;
  -webkit-mask:linear-gradient(#000 0 0);position:relative;clip-path:polygon(0 0,70% 0,70% 35%,100% 15%,100% 85%,70% 65%,70% 100%,0 100%)}/* film/play */
.ph.dark{background:repeating-linear-gradient(45deg,rgba(214,169,91,.06)0,rgba(214,169,91,.06)9px,transparent 9px,transparent 18px),#2a241c;border-color:#4a4234}
.ph.dark span{color:#a99c82}
.ph.dark .ph-kind{color:var(--brass-lt)}
.ph.dark::before{border-color:var(--brass-lt);background:radial-gradient(circle at 50% 55%,transparent 5px,var(--brass-lt) 5px,var(--brass-lt) 7px,transparent 7px);box-shadow:0 -6px 0 -3px var(--brass-lt)}

/* NAV */
nav{position:fixed;top:0;width:100%;z-index:1000;padding:1.1rem 0;background:rgba(242,238,224,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(74,53,38,.12);transition:.3s}
.nav-in{max-width:1280px;margin:0 auto;padding:0 2.5rem;display:flex;align-items:center;justify-content:space-between}
.nav-logo img{height:58px;width:auto;display:block;margin:-9px 0}
.nav-links{display:flex;gap:2.25rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.8;transition:.25s;position:relative}
.nav-links a:hover{opacity:1;color:var(--red)}
.nav-cta{background:var(--red);color:var(--cream)!important;padding:.6rem 1.3rem;border-radius:2px;opacity:1!important;letter-spacing:.12em!important;text-decoration:none;text-transform:uppercase;font-weight:500}
.nav-cta:hover{background:var(--red-deep);color:var(--cream)!important}
.nav-cta-top{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--ink);transition:.25s}

/* HERO — logo as centerpiece */
.hero{--hero-darken:1;position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:6rem 2rem 5rem;overflow:hidden;isolation:isolate;background:var(--wood)}
.hero-bg{position:absolute;inset:0;z-index:1}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg .ph{width:100%;height:100%}
.hero::after{content:'';position:absolute;inset:0;z-index:2;background:radial-gradient(120% 90% at 50% 42%,rgba(26,26,24,calc(.42*var(--hero-darken))),rgba(26,26,24,calc(.66*var(--hero-darken)))),linear-gradient(to bottom,rgba(26,26,24,calc(.5*var(--hero-darken)))0%,rgba(26,26,24,calc(.5*var(--hero-darken)))45%,rgba(26,26,24,calc(.72*var(--hero-darken)))100%)}
.hero-in{position:relative;z-index:3;max-width:880px;margin:0 auto;width:100%;color:var(--cream);display:flex;flex-direction:column;align-items:center}
.hero-logo{width:min(560px,82vw);margin-bottom:1.75rem;filter:drop-shadow(0 6px 24px rgba(0,0,0,.4))}
.hero-logo img{width:100%;height:auto}
.hero-sub{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,3vw,2.4rem);font-style:italic;color:var(--cream);opacity:.98;margin-bottom:.6rem;max-width:680px}
.hero-tagline{font-size:1rem;color:var(--bulb);margin-bottom:1.5rem;max-width:640px;line-height:1.6}
.hero-lineage{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bulb);font-weight:500;margin-bottom:.85rem}
.hero-place{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:500;margin-bottom:2rem}
.hero-meta{display:flex;gap:1.75rem;flex-wrap:wrap;align-items:center;justify-content:center;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bulb);font-weight:500}
.hero-meta span{display:flex;align-items:center;gap:.6rem}
.hero-scroll{position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);color:var(--cream);opacity:.7;font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.4rem;animation:bob 2.4s infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* INTRO / Plenty meaning */
.intro{padding:7rem 2.5rem;max-width:1000px;margin:0 auto;text-align:center}
.intro .rule-label{margin-bottom:2rem}
.intro h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.5rem;color:var(--ink)}
.intro p{font-size:1.2rem;color:#4a443a;max-width:760px;margin:0 auto 1.25rem;line-height:1.85}
.intro .pull{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.6rem;color:var(--red);margin-top:2rem}

/* CIRCLE OF CONTRIBUTORS */
.circle{background:var(--cream2);padding:7rem 2.5rem}
.circle-head{text-align:center;max-width:760px;margin:0 auto 3.5rem}
.circle-head .rule-label{margin-bottom:1.5rem}
.circle-head h2{font-size:clamp(1.8rem,3.6vw,2.75rem);margin-bottom:1rem}
.circle-head p{color:#4a443a;font-size:1.08rem}
.makers{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.maker{background:var(--cream);border:1px solid rgba(74,53,38,.1);padding:0;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.maker:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(74,53,38,.14)}
.maker-img{aspect-ratio:4/3}
.maker-img .ph{width:100%;height:100%}
.maker-img img{width:100%;height:100%;object-fit:cover}
.maker-body{padding:1.5rem 1.6rem 1.8rem}
.maker-kind{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:.5rem}
.maker h3{font-size:1.4rem;margin-bottom:.4rem}
.maker-dist{font-size:.78rem;color:var(--olive);font-weight:500;margin-bottom:.7rem;letter-spacing:.04em}
.maker p{font-size:.92rem;color:#5a5346}
.circle-note{text-align:center;margin-top:3rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.35rem;color:var(--wood)}

/* SOURCING MAP */
.sourcemap{padding:6rem 2.5rem;max-width:1100px;margin:0 auto;text-align:center}
.sourcemap-head{margin-bottom:3rem}
.sourcemap-head .rule-label{margin-bottom:1.5rem}
.sourcemap-head h2{font-size:clamp(1.8rem,3.6vw,2.75rem);color:var(--ink)}
.sourcemap-img{max-width:820px;margin:0 auto}
.sourcemap-img img{width:100%;height:auto;border-radius:4px;box-shadow:0 18px 50px rgba(74,53,38,.18)}

/* GROWN BY US — split */
.grown{padding:0}
.grown-row{display:grid;grid-template-columns:1fr 1fr;min-height:80vh}
.grown-row.flip .grown-media{order:2}
.grown-media{position:relative;overflow:hidden}
.grown-media img,.grown-media .ph{width:100%;height:100%;min-height:50vh;object-fit:cover}
.grown-text{display:flex;flex-direction:column;justify-content:center;padding:5rem}
.grown-text.on-wood{background:var(--wood);color:var(--cream)}
.grown-text.on-olive{background:var(--olive);color:var(--cream)}
.grown-text .label{color:var(--brass-lt);margin-bottom:1.25rem;display:block}
.grown-text h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:1.25rem}
.grown-text p{opacity:.92;margin-bottom:1.1rem;font-size:1.05rem}
.grown-text .lnk{margin-top:.75rem;color:var(--bulb);text-decoration:none;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--bulb);padding-bottom:.3rem;width:fit-content;transition:.25s}
.grown-text .lnk:hover{color:var(--cream);border-color:var(--cream)}

/* MENUS */
.menus{padding:7rem 2.5rem;max-width:1180px;margin:0 auto}
.menus-head{text-align:center;margin-bottom:3.5rem}
.menus-head .rule-label{margin-bottom:1.5rem}
.menus-head h2{font-size:clamp(1.8rem,3.6vw,2.75rem);margin-bottom:1rem}
.menus-head p{color:#4a443a;max-width:620px;margin:0 auto}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.menu-card{text-align:center;border:1px solid rgba(74,53,38,.14);background:var(--cream);transition:.3s;position:relative;overflow:hidden}
.menu-card-photo{aspect-ratio:4/3;overflow:hidden}
.menu-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.menu-card:hover .menu-card-photo img{transform:scale(1.05)}
.menu-card-body{padding:1.75rem 1.75rem 2.25rem}
.menu-card:hover{border-color:var(--red);box-shadow:0 12px 30px rgba(74,53,38,.1)}
.menu-card h3{font-size:1.6rem;margin:0 0 .3rem}
.menu-card .time{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:1.1rem}
.menu-card p{font-size:.93rem;color:#5a5346;margin-bottom:1.5rem}
.menu-card .lnk{color:var(--ink);text-decoration:none;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:.3rem;transition:.25s}
.menu-card .lnk:hover{color:var(--red);border-color:var(--red)}

/* THE JUNCTION — history feature */
.junction{background:var(--wood);color:var(--cream);padding:0}
.junction-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
.junction-photo{position:relative;min-height:60vh;overflow:hidden}
.junction-photo img{width:100%;height:100%;object-fit:cover}
.junction-photo .frame-cap{position:absolute;left:1.25rem;bottom:1.25rem;background:rgba(26,26,24,.72);color:var(--cream);padding:.55rem .9rem;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;border-left:2px solid var(--brass)}
.junction-text{display:flex;flex-direction:column;justify-content:center;padding:5rem}
.junction-text .rule-label{justify-content:flex-start;color:var(--brass-lt);margin-bottom:1.5rem}
.junction-text .rule-label::before{display:none}
.junction-text .rule-label::after{background:var(--brass-lt)}
.junction-text h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:1.25rem}
.junction-text h2 em{font-style:italic;color:var(--bulb)}
.junction-text p{opacity:.9;margin-bottom:1.1rem;font-size:1.04rem}
.junction-text .artifact-spike{margin:2rem 0 0}
.junction-text .artifact-spike img{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 7px rgba(0,0,0,.38))}
.junction-text .artifact-spike figcaption{margin-top:.85rem;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--cream);opacity:.78;text-wrap:balance}
.junction-text .artifact-spike figcaption .nb{white-space:nowrap}
.junction-text .flag-rule{display:flex;align-items:center;gap:.5rem;margin-top:1rem}
.junction-text .flag-rule i{display:block;height:4px;border-radius:2px}
.flag-rule .f-red{background:var(--red);width:40px}
.flag-rule .f-cream{background:var(--cream);width:18px;opacity:.85}
.flag-rule .f-green{background:var(--olive);width:40px}
.flag-rule small{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt);margin-left:.4rem}

/* HISTORIC ROOM banner */
.historic{--historic-darken:1;position:relative;padding:8rem 2.5rem;text-align:center;color:var(--cream);overflow:hidden;isolation:isolate;background:var(--wood)}
.historic-bg{position:absolute;inset:0;z-index:1}
.historic-bg img,.historic-bg .ph{width:100%;height:100%;object-fit:cover}
.historic::after{content:'';position:absolute;inset:0;z-index:2;background:rgba(26,26,24,calc(.62*var(--historic-darken)))}
.historic>*:not(.historic-bg){position:relative;z-index:3}
.historic .rule-label{color:var(--brass-lt);margin-bottom:1.5rem}
.historic .rule-label::before,.historic .rule-label::after{background:var(--brass-lt)}
.historic h2{font-size:clamp(1.9rem,4vw,3rem);max-width:820px;margin:0 auto 1.25rem;color:var(--cream)}
.historic p{max-width:640px;margin:0 auto;opacity:.92;font-size:1.08rem}

/* VISIT */
.visit{padding:7rem 2.5rem;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.visit .label{display:block;margin-bottom:1.25rem}
.visit h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1.75rem}
.visit-row{margin-bottom:1.5rem}
.visit-row h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:.4rem;font-family:'Inter',sans-serif;font-weight:600}
.visit-row p{color:#4a443a}
/* Building photo — framed to match the site's warm photo language (rounded
   corners + soft shadow like .story-img/.find-map), with a brass hairline and a
   cream matte inset so it reads as an intentionally framed picture, not a bare
   rectangle. The padding is the "mat"; the inner img keeps its own radius. */
.visit-img{aspect-ratio:4/3;overflow:hidden;background:var(--cream);padding:.6rem;
  border:1px solid rgba(194,138,60,.45);border-radius:6px;
  box-shadow:0 14px 44px rgba(74,53,38,.18)}
.visit-img img,.visit-img .ph{width:100%;height:100%;object-fit:cover;object-position:center center;
  border-radius:3px;display:block}
.visit-cta{display:inline-block;background:var(--red);color:var(--cream);text-decoration:none;padding:.78rem 1.9rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:.25s;border-radius:2px}
.visit-cta:hover{background:var(--red-deep)}
.visit-phone{color:inherit;text-decoration:none;border-bottom:1px solid rgba(160,34,39,.35);transition:.2s}
.visit-phone:hover{color:var(--red);border-bottom-color:var(--red)}

/* FOOTER */
footer{background:var(--wood);color:var(--cream);padding:4.5rem 2.5rem 2.5rem}
.foot-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
.foot-brand img{height:54px;margin-bottom:1rem;filter:brightness(0) invert(1)}
.foot-brand p{opacity:.6;font-size:.9rem;line-height:1.8}
.junction-more{display:inline-block;margin:.35rem 0 .25rem;color:var(--brass-lt);font-family:'Inter',sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid rgba(194,138,60,.5);padding-bottom:2px;transition:.25s}
.junction-more span{transition:transform .25s;display:inline-block}
.junction-more:hover{color:var(--cream);border-bottom-color:var(--cream)}
.junction-more:hover span{transform:translateX(4px)}
.foot-tel{color:inherit;text-decoration:none;transition:.25s}
.foot-tel:hover{color:var(--brass-lt)}
.foot-reserve{display:inline-block;margin-top:1.25rem;color:var(--brass-lt);text-decoration:none;font-size:.9rem;letter-spacing:.02em;border-bottom:1px solid rgba(194,138,60,.5);padding-bottom:2px;transition:.25s}
.foot-reserve:hover{color:var(--cream);border-bottom-color:var(--cream)}
.foot-social{display:flex;flex-direction:column;gap:.7rem;margin-top:1.5rem}
.foot-social a{display:inline-flex;align-items:center;gap:.6rem;color:var(--cream);opacity:.65;text-decoration:none;font-size:.9rem;transition:.25s}
.foot-social a:hover{opacity:1;color:var(--brass-lt)}
.foot-social svg{width:18px;height:18px;flex-shrink:0}
.foot-col h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:1.25rem;font-family:'Inter',sans-serif;font-weight:600}
.foot-col a{display:block;color:var(--cream);opacity:.65;text-decoration:none;margin-bottom:.7rem;font-size:.9rem;transition:.25s}
.foot-col a:hover{opacity:1;color:var(--brass-lt)}
.foot-bottom{max-width:1180px;margin:3rem auto 0;padding-top:1.75rem;border-top:1px solid rgba(242,238,224,.12);display:flex;justify-content:space-between;font-size:.78rem;opacity:.5;flex-wrap:wrap;gap:1rem}

/* MENU PAGE STYLES */
.menu-page{padding:2.75rem 2.5rem 3rem;max-width:1100px;margin:0 auto}
.menu-page-header{text-align:center;margin-bottom:3rem}
.menu-page-header h1{font-size:clamp(2.2rem,4.5vw,3.5rem);margin-bottom:1rem}
.menu-page-header p{max-width:700px;margin:0 auto;color:#4a443a}
.menu-nav{position:sticky;top:90px;z-index:900;display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;margin:0 -2.5rem 2.5rem;padding:1.1rem 2.5rem;background:rgba(242,238,224,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(74,53,38,.12)}
.menu-nav a{color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.65;transition:.25s;padding-bottom:.35rem;border-bottom:2px solid transparent;cursor:pointer}
.menu-nav a:hover,.menu-nav a.active{opacity:1;color:var(--red);border-bottom-color:var(--red)}
/* Tabbed mode (JS-enhanced): show one service at a time. Without JS, all sections stay visible. */
.menu-page.tabbed .menu-section{display:none}
.menu-page.tabbed .menu-section.active{display:block;animation:menuFade .35s ease;margin-bottom:0}
@keyframes menuFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Drink-list group headers (Locals, From Our Library, etc.) */
.menu-group{text-align:center;margin:2.75rem 0 1.25rem}
.menu-group:first-of-type{margin-top:.5rem}
.menu-group-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--red);letter-spacing:.01em}
.menu-group-desc{font-size:.8rem;font-style:italic;color:#5a5346;margin-top:.15rem}
.menu-section{margin-bottom:4rem;scroll-margin-top:150px}
.menu-section h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:2rem;text-align:center}
.menu-section h3{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:2rem 0 1rem;font-family:'Inter',sans-serif;font-weight:600}
.menu-item{display:flex;justify-content:space-between;align-items:baseline;padding:1rem 0;border-bottom:1px solid rgba(74,53,38,.1);gap:1rem}
.menu-item>div{min-width:0}
.menu-item-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--ink)}
.menu-item-desc{font-size:.85rem;color:#5a5346;margin-top:.25rem}
.menu-item-price{font-weight:600;color:var(--red);white-space:nowrap;flex-shrink:0}
.menu-note{text-align:center;font-size:.85rem;color:#5a5346;margin-top:2rem;font-style:italic}
/* Rotating Chef's Special examples — one cohesive tinted container, set apart from the fixed printed menu */
.menu-section h3.chef-special-head{color:var(--red);margin:2.25rem 0 0;padding:1rem 1.15rem .85rem;display:flex;align-items:center;gap:.6rem;background:rgba(242,238,224,.75);border:1px solid rgba(194,138,60,.45);border-bottom:none;border-radius:10px 10px 0 0}
.menu-section h3.chef-special-head::before{content:"\2726";color:var(--brass);font-size:.95rem;margin-right:.15rem}
.menu-section h3.chef-special-head::after{content:"Rotating weekly";margin-left:auto;font-size:.55rem;letter-spacing:.1em;color:var(--wood);background:var(--bulb);border-radius:20px;padding:.22rem .6rem}
/* intro line sits directly under the header, inside the box (adjacent to the header) */
.menu-section h3.chef-special-head + .menu-note{text-align:left;margin:0;padding:.9rem 1.15rem .35rem;font-size:.82rem;font-style:italic;color:#6a6153;background:rgba(242,238,224,.75);border:1px solid rgba(194,138,60,.45);border-top:none;border-bottom:none}
.menu-item.chef-special{border:1px solid rgba(194,138,60,.45);border-top:none;border-bottom:none;margin:0;padding:.55rem 1.15rem;background:rgba(242,238,224,.75)}
.menu-item.chef-special .menu-item-name{font-style:italic}
/* explicit end-class closes + rounds the bottom of the container (regular entrées resume after) */
.menu-item.chef-special-end{border-bottom:1px solid rgba(194,138,60,.45);border-radius:0 0 10px 10px;padding-bottom:.95rem;margin-bottom:.6rem}

/* --- Chef Jesper's Friday Supper Specials box (Nyx 2026-07-28 v4: beige fill, item-size type) --- */
.menu-section h3.jesper-head{margin:1.6rem 0 0;padding:.7rem 1rem .3rem;background:var(--cream2);border:1px solid rgba(160,34,39,.55);border-bottom:none;border-radius:10px 10px 0 0;text-transform:none;letter-spacing:0;line-height:1}
.jsp-pill{display:inline-block;background:#5A2130;color:var(--cream);font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.15rem;line-height:1.2;padding:.3rem 1.05rem;border-radius:7px}
.jsp-pill em{font-style:italic;font-weight:500}
.menu-section .menu-note.jesper-body{text-align:left;font-style:normal;margin:0;padding:.4rem 1.1rem .65rem;background:var(--cream2);border-left:1px solid rgba(160,34,39,.55);border-right:1px solid rgba(160,34,39,.55);font-size:.85rem;line-height:1.55;color:#5a5346}
.menu-section .menu-note.jesper-toggle{text-align:left;margin:0 0 1.75rem;padding:.1rem 1.1rem .95rem;cursor:pointer;background:var(--cream2);border-left:1px solid rgba(160,34,39,.55);border-right:1px solid rgba(160,34,39,.55);border-bottom:1px solid rgba(160,34,39,.55);border-radius:0 0 10px 10px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.12rem;color:#4a4335;user-select:none}
.jesper-toggle:hover{color:var(--ink)}
.jesper-toggle::before{content:"\25B6";display:inline-block;font-style:normal;color:var(--red);font-size:.66rem;margin-right:.55rem;transform:translateY(-2px);transition:transform .25s}
.menu-section.specials-open .jesper-toggle::before{transform:rotate(90deg)}
.jesper-toggle .lbl-open{display:none}
.menu-section.specials-open .menu-note.jesper-toggle{margin-bottom:0;border-bottom:none;border-radius:0}
.menu-section.specials-open .jesper-toggle .lbl-closed{display:none}
.menu-section.specials-open .jesper-toggle .lbl-open{display:inline}
.menu-section .menu-item.jesper-sample{display:none;margin:0;padding:.6rem 1.1rem;background:var(--cream2);border-left:1px solid rgba(160,34,39,.55);border-right:1px solid rgba(160,34,39,.55);border-bottom:1px dashed rgba(160,34,39,.22)}
.menu-section.specials-open .menu-item.jesper-sample{display:flex}
.jesper-sample .menu-item-name{font-style:normal}
.menu-section.specials-open .menu-item.jesper-sample-end{border-bottom:1px solid rgba(160,34,39,.55);border-radius:0 0 10px 10px;margin-bottom:1.75rem}


.menu-sides{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;margin-top:1.5rem;font-size:.85rem;color:#5a5346}
.menu-sides strong{color:var(--ink)}
.menu-drinks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.menu-drink-item{display:flex;justify-content:space-between;font-size:.9rem}
.menu-drink-item span:first-child{color:var(--ink)}
.menu-drink-item span:last-child{color:var(--red);font-weight:500}

/* OUR STORY PAGE */
.story-page{padding:3.25rem 2.5rem 5rem}
.story-hero{text-align:center;max-width:900px;margin:0 auto 4.5rem}
.story-hero h1{font-size:clamp(2.2rem,4.5vw,3.5rem);margin-bottom:1.5rem}
.story-hero p{font-size:1.2rem;color:#4a443a;line-height:1.85}
.story-section{max-width:1100px;margin:0 auto 4.5rem}
/* Full-bleed colored bands (inline bleed margin "-2.5rem") must NOT keep the
   1100px cap, or their non-auto side margins strand them left on wide screens.
   Let them span the full page width; keep their inner content centered. */
.story-section[style*="-2.5rem"]{max-width:none}
.story-section[style*="-2.5rem"] > .story-split{max-width:1100px;margin-left:auto;margin-right:auto}
.story-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:stretch;margin-bottom:3.6rem}
.story-split.flip .story-img{order:2}
.story-img img{width:100%;height:auto;border-radius:4px;box-shadow:0 12px 40px rgba(74,53,38,.15)}
.story-text h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:1.25rem}
.story-text p{margin-bottom:1rem;color:#4a443a}
.story-quote{text-align:center;max-width:800px;margin:4.5rem auto;padding:3rem 2rem;background:var(--cream2);border-radius:4px}
.story-quote p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.6rem;color:var(--red)}

/* Our Story — Jack & Lois editorial: one photo per story beat, alternating
   left/right (magazine style) so it reads as a photo-supported story instead
   of a photo stack followed by a wall of text. Uniform square frames keep the
   mixed portrait/landscape shots on an even rhythm; captions overlay to add
   no vertical height. */
.gen-lead{max-width:940px;margin:0 auto 3.2rem}
/* Photo hugs the text side of its cell so the empty gap falls on the outer
   margin (magazine feel) instead of ballooning between photo and words. */
.gen-story .story-img{display:flex;align-items:flex-start}
.gen-story .story-split .story-img{justify-content:flex-end}
.gen-story .story-split.flip .story-img{justify-content:flex-start}
/* Text column spans the image's height: first line sits at the image's top edge,
   last line at its bottom edge (distributed top-to-bottom). */
.gen-story .story-text{display:flex;flex-direction:column;justify-content:flex-start}
.gen-story .story-text > :last-child{margin-bottom:0}
/* Cap the text block to the image's width (400px) and pull it to the inner side
   (adjacent to the image) so text + image read as two equal columns flanking
   the center gutter, with breathing room on the outer edges. */
.gen-story .story-text{max-width:400px}
.gen-story .story-split .story-text{margin-right:auto}      /* image left  -> text hugs the left/inner edge  */
.gen-story .story-split.flip .story-text{margin-left:auto;margin-right:0}  /* image right -> text hugs the right/inner edge (left edge aligns with the left-column image above) */
.gen-photo{position:relative;margin:0;width:100%;max-width:400px;border-radius:6px;overflow:hidden;aspect-ratio:1/1;background:var(--cream2);box-shadow:0 12px 40px rgba(74,53,38,.15)}
.gen-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gen-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .95rem .7rem;background:linear-gradient(to top,rgba(36,26,18,.8),rgba(36,26,18,.25) 55%,transparent);color:var(--cream);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;line-height:1.25}
@media(max-width:960px){.gen-story .story-split .story-img,.gen-story .story-split.flip .story-img{justify-content:center}.gen-photo{max-width:560px}}
@media(max-width:560px){.gen-photo figcaption{font-size:.82rem;padding:1.2rem .7rem .55rem}}

/* PRIVATE DINING PAGE */
.dining-page{padding:3rem 2.5rem 5rem;max-width:1100px;margin:0 auto}
.dining-hero{text-align:center;margin-bottom:4rem}
.dining-hero h1{font-size:clamp(2.2rem,4.5vw,3.5rem);margin-bottom:1rem}
.dining-hero p{max-width:700px;margin:0 auto;color:#4a443a}
.spaces-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:3rem 0}
.spaces-grid.two{grid-template-columns:repeat(2,1fr)}
.space-card{background:var(--cream);border:1px solid rgba(74,53,38,.14);padding:0;overflow:hidden;border-radius:6px;text-align:left;transition:.3s}
.space-card:hover{border-color:var(--red);box-shadow:0 12px 30px rgba(74,53,38,.1)}
.space-card .sc-photo{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--cream2)}
.space-card .sc-body{padding:1.4rem 1.5rem 1.6rem}
.space-card h3{font-size:1.4rem;margin-bottom:.4rem}
.space-card .capacity{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:.9rem}
.space-card p{font-size:.95rem;color:#5a5346}
/* Private dining — whole-restaurant buyout layout */
.pd-buyout{display:grid;grid-template-columns:1.3fr .9fr;gap:2.5rem;align-items:stretch;background:var(--cream2);border-left:4px solid var(--brass);border-radius:6px;padding:2.5rem;margin-top:1rem}
.pd-buyout h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:.4rem 0 1rem}
.pd-buyout p{color:#4a443a;line-height:1.65;margin-bottom:.9rem}
.pd-buyout p strong{color:var(--red-deep)}
.pd-buyout-photo{margin:0;border-radius:6px;overflow:hidden;box-shadow:0 12px 40px rgba(74,53,38,.18);min-height:300px}
.pd-buyout-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pd-combined{max-width:760px;margin:2rem auto 0;text-align:center;color:#4a443a;line-height:1.6;background:var(--cream);border:1px dashed rgba(74,53,38,.3);border-radius:6px;padding:1.25rem 1.5rem}
.pd-combined strong{color:var(--red)}
.pd-band{position:relative;width:100vw;max-width:none;margin:4rem calc(50% - 50vw);min-height:360px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream);overflow:hidden}
.pd-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pd-band::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(28,20,14,.45),rgba(28,20,14,.68))}
.pd-band-in{position:relative;z-index:2;max-width:600px;padding:1.9rem 2.4rem;background:rgba(26,18,12,.5);border-radius:10px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.pd-band-in h2{color:var(--cream);font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:.75rem;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.pd-band-in p{color:var(--cream);opacity:.95;font-size:1.05rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
/* frame the inquiry form so it isn't lost in whitespace */
.dining-page .form-section form{background:var(--cream);border:1px solid rgba(74,53,38,.14);border-radius:6px;padding:2rem 2rem 2.25rem;box-shadow:0 8px 30px rgba(74,53,38,.06)}
@media(max-width:760px){.pd-buyout{grid-template-columns:1fr;padding:1.75rem}.pd-buyout-photo{min-height:0}.pd-buyout-photo img{aspect-ratio:4/3}.spaces-grid.two{grid-template-columns:1fr}}
.how-it-works{background:var(--cream2);padding:3rem;margin:3rem 0;border-radius:4px}
.how-it-works h2{text-align:center;margin-bottom:2rem}
.how-it-works p{max-width:700px;margin:0 auto;text-align:center;color:#4a443a}

/* CATERING PAGE */
.catering-page{padding:3rem 2.5rem 5rem;max-width:1100px;margin:0 auto}
.catering-hero{text-align:center;margin-bottom:4rem}
.catering-hero h1{font-size:clamp(2.2rem,4.5vw,3.5rem);margin-bottom:1rem}
.catering-hero p{max-width:700px;margin:0 auto;color:#4a443a}
.offerings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin:3rem 0}
.offering-card{background:var(--cream);border:1px solid rgba(74,53,38,.14);padding:2rem;transition:.3s}
.offering-card:hover{border-color:var(--red);box-shadow:0 12px 30px rgba(74,53,38,.1)}
.offering-card h3{font-size:1.3rem;margin-bottom:.75rem}
.offering-card p{font-size:.95rem;color:#5a5346}
/* Catering reuses the Our Story photo grid (.story-grid) for its offering tiles,
   so each tile inherits the per-tile "Full width (span row)" CMS toggle. The story
   grid cells use an overlay caption rather than a title, so add h3 styling here. */
.catering-page .story-grid{margin-top:2rem}
.catering-page .story-grid .cell > h3{margin:1.1rem 0 .35rem;font-size:1.35rem}
.catering-page .story-grid .cell > h3 + p{margin-top:0}
.catering-page .story-grid .cell:has(.gen-photo > img[data-cms-full]) > h3{text-align:center}
.sourcing-line{background:var(--wood);color:var(--cream);padding:2.5rem;margin:3rem 0;text-align:center;border-radius:4px}
.sourcing-line p{font-size:1.1rem;opacity:.92}

/* FIND US PAGE */
.find-page{padding:3rem 2.5rem 5rem;max-width:1100px;margin:0 auto}
.find-hero{text-align:center;margin-bottom:4rem}
.find-hero h1{font-size:clamp(2.2rem,4.5vw,3.5rem);margin-bottom:1rem}
.find-grid{display:grid;grid-template-columns:0.82fr 1fr;gap:3rem;margin-bottom:2.5rem;align-items:start}
.find-photo{border-radius:4px;overflow:hidden;box-shadow:0 12px 40px rgba(74,53,38,.15)}
.find-photo img{width:100%;height:560px;object-fit:cover;object-position:50% 22%;display:block}
.find-info h2{font-size:1.6rem;margin-bottom:1.5rem}
.find-row{margin-bottom:1.5rem}
.find-row h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:.4rem;font-family:'Inter',sans-serif;font-weight:600}
.find-row p{color:#4a443a}
.find-reserve{margin-top:2rem;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.find-reserve-call{color:#4a443a;opacity:.85}
.find-map-wrap{margin-bottom:3rem}
.find-map{width:100%;height:340px;border:0;border-radius:4px;box-shadow:0 12px 40px rgba(74,53,38,.15)}
.sourcing-map-section{text-align:center;margin:3rem 0}
.sourcing-map-section img{max-width:100%;border-radius:4px;box-shadow:0 12px 40px rgba(74,53,38,.15)}
.sourcing-map-section p{margin-top:1rem;font-style:italic;color:#5a5346}

/* FORMS */
.form-section{margin:3rem 0}
.form-section h2{margin-bottom:1.5rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.5rem;font-weight:500}
.form-group input,.form-group textarea,.form-group select{width:100%;min-width:0;padding:.9rem 1rem;border:1px solid rgba(74,53,38,.25);background:var(--cream);font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);transition:.25s;box-sizing:border-box}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--red)}
.form-group textarea{min-height:120px;height:auto;resize:vertical}
/* Equal, browser-consistent heights so a date field + a select sit flush side by side
   (Safari would otherwise overflow/overlap; Firefox would render them staggered). */
.form-group input,.form-group select{height:3.3rem;line-height:1.2}
.form-group input[type=date]{-webkit-appearance:none;appearance:none}
.form-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234a3526' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:.7rem}
/* Two-up field row: tracks can shrink below native control min-width (fixes Safari overlap). */
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-submit{background:var(--red);color:var(--cream);border:none;padding:1rem 2.5rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:.25s}
.form-submit:hover{background:var(--red-deep)}

/* PAGE HEADER (for subpages) */
.page-header{--ph-darken:1;background:var(--wood);color:var(--cream);padding:10rem 2rem 5rem;text-align:center;position:relative;overflow:hidden}
.page-header-bg{position:absolute;inset:0;z-index:1}
.page-header-bg img{width:100%;height:100%;object-fit:cover;opacity:calc(1 - (1 - .4)*var(--ph-darken))}
.page-header::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(26,26,24,calc(.5*var(--ph-darken))),rgba(26,26,24,calc(.7*var(--ph-darken))))}
.page-header-content{position:relative;z-index:3;max-width:800px;margin:0 auto}
.page-header h1{font-size:clamp(2.2rem,4.5vw,3.5rem);margin-bottom:1rem}
.page-header p{font-size:1.1rem;opacity:.9}

@media(max-width:960px){
  .burger{display:flex}
  /* Reserve stays visible in the bar on mobile (never collapses into the burger) */
  .nav-cta-top{display:inline-block;margin-left:auto;margin-right:1rem;padding:.42rem 1rem;font-size:.66rem;letter-spacing:.1em!important}
  .nav-links .nav-cta-li{display:none}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-top:1px solid rgba(74,53,38,.12);border-bottom:1px solid rgba(74,53,38,.12);box-shadow:0 14px 28px rgba(74,53,38,.14);padding:.6rem 2.5rem 1.3rem}
  #nav.open .nav-links{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;width:100%;padding:.9rem 0;font-size:.85rem;border-bottom:1px solid rgba(74,53,38,.08)}
  .nav-links li:last-child a,.nav-links li:nth-last-child(2) a{border-bottom:none}
  #nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #nav.open .burger span:nth-child(2){opacity:0}
  #nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .makers,.menu-grid,.spaces-grid{grid-template-columns:1fr}
  .junction-grid{grid-template-columns:minmax(0,1fr)}.junction-text{padding:3.5rem 2rem;min-width:0}.junction-photo{min-height:46vh;min-width:0}
  .grown-row,.grown-row.flip .grown-media{grid-template-columns:1fr;order:0}
  .grown-row{display:flex;flex-direction:column}
  .grown-text{padding:3.5rem 2rem}
  .visit{grid-template-columns:1fr;gap:2.5rem}
  /* Single-column: let the building photo show at its NATURAL height so it
     scales down proportionally instead of being cropped on the sides by the
     fixed 4:3 box. */
  .visit-img{aspect-ratio:auto;min-height:0;overflow:visible;padding:.9rem;border-radius:7px}
  .visit-img img{height:auto}
  .foot-in{grid-template-columns:1fr 1fr}
  .story-split,.story-split.flip{grid-template-columns:1fr;gap:2rem}
  /* Single-column: let text use the full width again. */
  .gen-story .story-text{max-width:none;margin-left:0;margin-right:0}
  .story-split.flip .story-img{order:0}
  .find-grid{grid-template-columns:1fr;gap:2rem}
  .find-photo img{height:auto;max-height:460px}
  .offerings-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .nav-in,.nav-links,.intro,.circle,.menus,.historic,.visit,.menu-page,.story-page,.dining-page,.catering-page,.find-page{padding-left:1.5rem;padding-right:1.5rem}
  .hero-meta{gap:1rem;font-size:.65rem}
  .foot-in{grid-template-columns:1fr}
  /* Keep all four tabs on one line on phones (tightened spacing, no wrap). */
  .menu-nav{gap:.9rem;margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.1rem;padding-right:1.1rem;flex-wrap:nowrap}
  .menu-nav a{font-size:.72rem;letter-spacing:.05em;white-space:nowrap}
  .how-it-works,.reservations-section{padding:2rem 1.5rem}
  /* Let the artifact caption's phrases wrap on phones; nowrap would overflow the narrow column. */
  .junction-text .artifact-spike figcaption .nb{white-space:normal}
}

/* CMS: hide elements toggled off in the editor (live + preview) */
[data-cms-hidden]{display:none!important}
/* When a photo is hidden in the CMS, the <img> is display:none but its
   .gen-photo figure frame would otherwise remain as an empty "ghost" square.
   Collapse the whole story beat (photo + its side text) when the photo is
   hidden so nothing is left behind. */
.story-split:has(.gen-photo > img[data-cms-hidden]){display:none!important}
.gen-photo:has(> img[data-cms-hidden]){display:none!important}
/* A caption band (figcaption that wraps its text in elements, e.g. the
   surfing-cows band) keeps its padding even after its text is hidden, leaving
   an empty colored strip. Collapse it when EVERY element child is hidden.
   Plain-text captions (no element children) are untouched here and collapse
   via the base [data-cms-hidden] rule instead. */
.story-page figcaption:has(> *):not(:has(> :not([data-cms-hidden]))){display:none!important}
/* Closing full-bleed photo: when its caption is hidden, pull flush to the footer
   instead of leaving the page's bottom padding as an empty cream band. */
.story-page > figure:last-child:has(> figcaption[data-cms-hidden]){margin-bottom:-5rem!important}

/* ============================================================
   REFINEMENTS — 2026-06-21
   Hero legibility, intro alignment, card containment, contrast,
   visit alignment, hours, junction caption, mobile.
   ============================================================ */

/* [1] HERO — legibility of lower text over busy photo.
   Soft radial scrim behind the text block + text-shadow on lines. */
.hero-in{position:relative}
.hero-in::before{
  content:'';position:absolute;z-index:-1;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(820px,94vw);height:118%;
  background:radial-gradient(58% 52% at 50% 50%,
     rgba(26,26,24,.55) 0%, rgba(26,26,24,.34) 55%, rgba(26,26,24,0) 78%);
  filter:blur(6px);pointer-events:none;
}
.hero-sub{text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero-lineage{font-size:.86rem;text-shadow:0 1px 14px rgba(0,0,0,.65)}
.hero-place{font-size:.86rem;text-shadow:0 1px 14px rgba(0,0,0,.65)}
.hero-meta{text-shadow:0 1px 14px rgba(0,0,0,.65)}

/* [3] INTRO — left-align body copy, tighten measure; keep headline + pull centered */
.intro p{text-align:left;max-width:680px}
.intro .pull{text-align:center;max-width:760px}

/* [4] MAKER CARDS — give each card real containment (object on the tan ground) */
.maker{
  border:1px solid rgba(74,53,38,.16);
  box-shadow:0 2px 12px rgba(74,53,38,.07);
  border-radius:3px;
}

/* [5] BODY-TEXT CONTRAST — darken soft brown-greys one step */
.intro p{color:#403a30}
.maker p{color:#4a4338}
.menu-card p{color:#4a4338}
.circle-head p,.menus-head p{color:#403a30}
.foot-col a{opacity:.78}
.foot-brand p{opacity:.72}
.foot-bottom{opacity:.6}

/* [7] VISIT — DESKTOP (two-column): keep the photo at its natural 4:3 so it
   scales DOWN gracefully with the column instead of being cropped on the sides.
   Top-align the image to the text column (no awkward float gap). Scoped to
   >960px so it doesn't override the single-column natural-height rule above. */
@media(min-width:961px){
  .visit{align-items:start}
  .visit-img{aspect-ratio:4/3;min-height:0}
  .visit-img img{height:100%;object-position:center center}
}

/* [10] JUNCTION — a touch more breathing room in the date caption */
.junction-photo .frame-cap{padding:.7rem 1.1rem;line-height:1.5}

/* MOBILE — relieve hero congestion: bump the tiny lines */
@media(max-width:560px){
  .hero-lineage{font-size:.74rem;letter-spacing:.16em}
  .hero-place{font-size:.74rem;letter-spacing:.16em}
  .hero-meta{font-size:.66rem;letter-spacing:.16em}
  .hero-sub{font-size:clamp(1.35rem,5.5vw,1.8rem)}
}

/* ============================================================
   GREEN BAND — "Full Circle" philosophy + regenerative heroes
   (centered text on top, three 5:4 photo cards in a row below:
    hen + Highland bull + just-washed garden veg)
   ============================================================ */
.greenband{background:var(--olive);color:var(--cream);padding:4.5rem 2.5rem;
  background-image:linear-gradient(rgba(36,40,22,.06),rgba(36,40,22,.06))}
.greenband-in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:2.75rem}
.greenband-text{display:flex;flex-direction:column;align-items:center;gap:1.1rem;max-width:760px}
.greenband .rule-label{color:var(--brass-lt);justify-content:center}
.greenband .rule-label::before,.greenband .rule-label::after{background:var(--brass-lt)}
.greenband h2{font-size:clamp(1.5rem,2.9vw,2.25rem);line-height:1.28;color:var(--cream)}
.greenband h2 i{color:var(--bulb);font-style:italic}
.greenband p{font-size:1.06rem;line-height:1.72;color:var(--cream);margin:.2rem 0 .4rem}
.greenband-lnk{color:var(--bulb);text-decoration:none;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--bulb);
  padding-bottom:.3rem;width:fit-content;transition:.25s}
.greenband-lnk:hover{color:var(--cream);border-color:var(--cream)}

/* heroes — three 5:4 cards in a row, no captions */
.greenband-heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%}
.greenband-heroes .hero-card{overflow:hidden;border-radius:4px;
  box-shadow:0 12px 30px rgba(26,26,24,.28);margin:0}
.greenband-heroes .hero-card img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:5/4}

/* distance labels — clearer olive-green */
.maker-dist{color:#5d7d28;font-weight:600}

@media(max-width:760px){
  /* stack to a single column on phones so each photo stays legible */
  .greenband-heroes{grid-template-columns:1fr;max-width:460px;margin:0 auto}
}
@media(max-width:560px){
  .greenband{padding:3.25rem 1.5rem}
  .greenband-heroes{gap:.9rem}
}


/* OUR STORY — full-bleed colored sections (olive Present Day, cream2 Gen 3):
   trim the final/only beat's bottom margin so the section's bottom padding stays
   symmetric with the top and there's no extra empty band below the last row. */
.story-section[style*="-2.5rem"] .story-split:last-of-type{margin-bottom:0}

/* ============================================================
   STORY PHOTO GRID  (Our Story — stacked: photo + paragraph
   underneath, two per row). Reuses the .gen-photo component so
   the optional overlaid caption matches the Jack & Lois section.
   - internal caption = .gen-photo figcaption; blank -> hidden
   - per-item full width toggle = data-cms-full on the img
   ============================================================ */
/* One shared inset variable drives the grid edge on all screens, so the
   Jack/Lois (cream) and present-day (olive) grids are identical except for
   background. Narrower gutters on phones bring photos close to the edge. */
.story-section.photo-band{--grid-inset:2.5rem}
.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3.4rem 3.5rem;max-width:1100px;margin:2.4rem auto 0;padding:0 var(--grid-inset);align-items:start}
.story-grid .cell{margin:0}
.story-grid .cell .gen-photo{max-width:none;width:100%;aspect-ratio:1/1}
.story-grid .cell > p{margin:1.15rem 0 0;color:#4a443a;line-height:1.62}
.story-grid .cell > p + p{margin-top:1rem}
.story-grid .cell > p b{color:var(--red-deep)}
/* optional internal caption overlay: hide the frame's caption when empty */
.story-grid .cell .gen-photo figcaption:empty{display:none}
/* per-item FULL WIDTH: the item spans the whole row as a cinematic band */
.story-grid .cell:has(.gen-photo > img[data-cms-full]){grid-column:1 / -1}
.story-grid .cell:has(.gen-photo > img[data-cms-full]) .gen-photo{aspect-ratio:2.6/1}
.story-grid .cell:has(.gen-photo > img[data-cms-full]) > p{max-width:70ch;margin-inline:auto;text-align:center}
/* hidden image removes its whole cell (mirror of the .story-split rule) */
.story-grid .cell:has(.gen-photo > img[data-cms-hidden]){display:none!important}
/* olive section: light paragraph text under photos */
.story-grid.on-olive .cell > p{color:var(--cream);opacity:.94}
.story-grid.on-olive .cell > p b{color:var(--brass-lt)}
/* Both grid sections break out to the full viewport width using a
   padding-independent technique, so neither depends on .story-page's
   (responsive) padding. Photo position is then driven ONLY by --grid-inset,
   making the cream and olive grids behave identically at every width. The old
   fixed -2.5rem margin overflowed the viewport once .story-page padding shrank
   on phones — that was the root of the mismatch. */
/* max-width:none is REQUIRED: the base .story-section rule caps width at 1100px,
   which (with the negative full-bleed margins) left-pinned the band on wide
   screens. overflow-x:clip below prevents the 100vw horizontal scroll. */
.story-section.photo-band{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* Absorb the scrollbar-width discrepancy that 100vw full-bleed introduces, so
   the page never scrolls horizontally. overflow-x:clip clips without creating a
   scroll container (keeps vertical page scroll and the position:fixed nav). */
html,body{overflow-x:clip}
/* heading is a SIBLING of .story-grid inside .photo-band — give it the same
   inset so it lines up with the photo columns (both inherit --grid-inset). */
.photo-band .grid-lead{padding:0 var(--grid-inset)}
@media(max-width:760px){
  .story-grid{grid-template-columns:1fr;gap:2.4rem}
  .story-grid .cell:has(.gen-photo > img[data-cms-full]) .gen-photo{aspect-ratio:1/1}
  .story-grid .cell:has(.gen-photo > img[data-cms-full]) > p{max-width:none;text-align:left}
}
@media(max-width:560px){
  /* Bring photos close to the screen edge on phones, both sections alike. */
  .story-section.photo-band{--grid-inset:1rem}
  .story-grid{gap:2rem}
}

/* ---- Legal / Terms page ---- */
.legal-page{max-width:820px;margin:0 auto;padding:9rem 2.5rem 5rem}
.legal-page .rule-label{justify-content:center;margin-bottom:1.1rem}
.legal-page h1{font-size:clamp(2rem,4.5vw,2.9rem);text-align:center;color:var(--wood);margin-bottom:.5rem}
.legal-lead{text-align:center;color:#6a6252;max-width:640px;margin:0 auto 2.5rem;line-height:1.7}
.legal-page h2{font-size:1.5rem;color:var(--red-deep);margin:2.4rem 0 .6rem;padding-top:1.6rem;border-top:1px solid rgba(74,53,38,.12)}
.legal-page h2:first-of-type{border-top:none;padding-top:0;margin-top:1rem}
.legal-page p,.legal-page li,.legal-page address{color:#4a443a;line-height:1.75;font-size:1rem;margin-bottom:1rem}
.legal-page address{font-style:normal}
.legal-page ul{padding-left:1.2rem;margin-bottom:1rem}
.legal-page a{color:var(--red-deep);text-decoration:underline;text-underline-offset:2px}
.legal-page strong{font-weight:600;color:var(--wood)}
.legal-updated{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8a7f68;text-align:center;margin-top:3.5rem}
.foot-bottom a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.legal-page{padding:7rem 1.5rem 4rem}}