:root{
--night:#141010; --oak:#1F1712; --oak-2:#2A1F17; --oak-3:#3A2B20;
--amber:#D89A3C; --amber-lite:#F0BE6A; --hop:#8A9A5B; --rust:#A8502F;
--foam:#F4ECDE; --foam-dim:#BFB2A0; --ink:#171210;
--display:"Fjalla One",Impact,sans-serif;
--body:"Source Sans 3",system-ui,sans-serif;
--wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem}
body{margin:0; background:var(--night); color:var(--foam); font-family:var(--body);
font-size:clamp(1rem,.97rem + .2vw,1.08rem); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,video{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem)}
.eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin:0}
/* ---------- building strip: the three places under one roof ---------- */
.building{display:flex; align-items:center; justify-content:center; gap:2px 1.1rem; height:34px; padding:0 1rem; line-height:1.2;
background:#0E0B0A; border-bottom:1px solid var(--oak-3); font-size:.8rem; letter-spacing:.02em; color:var(--foam-dim); white-space:nowrap}
.building ul{display:flex; gap:1.1rem; margin:0; padding:0; list-style:none}
.building a{color:var(--foam); text-decoration:none}
.building a:hover{color:var(--amber)}
.building [aria-current]{color:var(--amber)}
@media (max-width:640px){ .building{flex-direction:column; height:52px} }
/* ---------- nav ---------- */
.sitenav{position:sticky; top:0; z-index:60; background:rgba(20,16,16,.93);
backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--oak-3)}
.sitenav .wrap{display:flex; align-items:center; gap:1.25rem; padding-block:.7rem}
.brand-block{display:flex; flex-direction:column; gap:.15rem; flex:none}
.brand-addr{font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
color:var(--foam-dim); white-space:nowrap}
.nav-phone{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:.1rem;
text-decoration:none; padding-left:.5rem}
.np-label{font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--amber)}
.np-num{font-family:var(--display); font-size:1.05rem; letter-spacing:.04em; color:var(--foam);
white-space:nowrap; transition:color .16s ease}
.nav-phone:hover .np-num{color:var(--amber)}
@media (max-width:560px){
.brand-addr{font-size:.6rem; letter-spacing:.09em}
.np-num{font-size:.92rem}
.np-label{display:none}
}
@media (max-width:400px){ .brand-addr{white-space:normal; letter-spacing:.05em} }
/* Narrow phones: the number gives way to a Call button the size of the menu button, so the bar fits */
@media (max-width:420px){
.sitenav .wrap{gap:.8rem}
.nav-phone{justify-content:center; padding:.55rem .7rem; border:1px solid var(--oak-3)}
.np-num{display:none}
.np-label{display:block; font-family:var(--display); font-size:.9rem; font-weight:400; letter-spacing:.1em; color:var(--foam)}
}
.brand{font-family:var(--display); font-size:1.28rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--foam); text-decoration:none; white-space:nowrap}
.brand span{color:var(--amber)}
.navtoggle{display:none; background:none; border:1px solid var(--oak-3); padding:.55rem .7rem; cursor:pointer}
.navtoggle .bar{display:block; width:20px; height:2px; background:var(--amber); margin:4px 0}
.menu{display:flex; align-items:center; gap:.2rem; list-style:none; margin:0 0 0 auto; padding:0}
.menu a{display:block; font-family:var(--display); font-size:.92rem; letter-spacing:.09em;
text-transform:uppercase; color:var(--foam); text-decoration:none; padding:.6rem .85rem; transition:color .16s ease}
.menu a:hover{color:var(--amber)}
.menu .cta{background:var(--amber); color:var(--ink); margin-left:.5rem}
.menu .cta:hover{background:var(--amber-lite); color:var(--ink)}
@media (max-width:880px){
.navtoggle{display:block; order:3}
.nav-phone{order:2; margin-left:auto}
.menu{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
align-items:stretch; background:var(--oak); border-bottom:1px solid var(--oak-3); padding:.4rem 0 1rem}
.menu.open{display:flex}
.menu a{padding:.85rem clamp(1.1rem,4vw,2rem); text-align:left}
.menu .cta{margin:.5rem clamp(1.1rem,4vw,2rem) 0; text-align:center}
}
/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(520px,78vh,760px); display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media video, .hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media img{animation:drift 34s ease-in-out infinite alternate; transform-origin:60% 55%}
@keyframes drift{ from{transform:scale(1.02)} to{transform:scale(1.07)} }
.hero-media::after{content:""; position:absolute; inset:0; z-index:2;
background:linear-gradient(to top, rgba(20,16,16,.92) 0%, rgba(20,16,16,.55) 22%, rgba(20,16,16,.12) 55%, rgba(20,16,16,.28) 100%)}
.hero .wrap{position:relative; z-index:1; padding-block:clamp(2.5rem,7vw,4.5rem)}
.hero-grid{display:grid; gap:clamp(1.5rem,4vw,2.5rem); align-items:end}
@media (min-width:900px){ .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)} }
.since{font-size:.7rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--amber); margin:0 0 .9rem}
h1{margin:0; font-family:var(--display); font-weight:400; line-height:.92; text-transform:uppercase}
h1 .l1{display:block; font-size:clamp(3rem,11vw,6.4rem); color:var(--foam)}
h1 .l2{display:block; font-size:clamp(1.4rem,4.6vw,2.6rem); color:var(--amber); letter-spacing:.06em}
.lede{font-size:clamp(1.06rem,2.4vw,1.28rem); color:var(--foam); max-width:36ch; margin:1.3rem 0 0; line-height:1.55}
/* live status card — the reason someone opens this page at 6pm on a Friday */
.status{background:rgba(31,23,18,.92); border:1px solid var(--oak-3); border-left:4px solid var(--amber);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 34px rgba(26,11,7,.5);
padding:1.4rem 1.5rem; backdrop-filter:blur(6px)}
.status .now{display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-size:1.5rem;
letter-spacing:.04em; text-transform:uppercase; margin:0 0 .2rem}
.status .dot{width:11px; height:11px; border-radius:50%; background:var(--foam-dim); flex:none}
.status.is-open .dot{background:var(--hop); box-shadow:0 0 0 4px rgba(138,154,91,.22)}
.status.is-open .now{color:var(--hop)}
.status.is-shut .dot{background:var(--rust)}
.status.is-shut .now{color:var(--rust)}
.status .detail{margin:0; color:var(--foam); font-size:1rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem}
.btn{font-family:var(--display); font-size:.95rem; letter-spacing:.1em; text-transform:uppercase;
padding:.8rem 1.6rem; text-decoration:none; border:2px solid var(--amber); color:var(--ink);
background:var(--amber); transition:background .16s ease, color .16s ease}
.btn:hover{background:transparent; color:var(--amber)}
.btn.ghost{background:transparent; color:var(--foam); border-color:var(--oak-3)}
.btn.ghost:hover{border-color:var(--amber); color:var(--amber)}
/* ---------- taps ---------- */
.taps{padding:clamp(3rem,8vw,5rem) 0; border-top:1px solid var(--oak-3)}
.taps-grid{display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center}
@media (min-width:860px){ .taps-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} }
.tapshot{position:relative; margin:0}
.tapshot img{width:100%}
.tapshot .bignum{position:absolute; left:-.06em; bottom:-.14em; margin:0; line-height:.78;
text-shadow:0 6px 26px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.9)}
.tapshot .bignum small{text-shadow:0 2px 10px rgba(0,0,0,.95)}
@media (max-width:859px){
.tapshot .bignum{position:static; margin-top:1rem; text-shadow:none}
}
h2{font-family:var(--display); font-weight:400; font-size:clamp(2rem,5.5vw,3.1rem); line-height:1.02;
text-transform:uppercase; margin:.8rem 0 1.1rem; color:var(--foam)}
.section-copy{color:var(--foam-dim); margin:0 0 1.2rem; max-width:52ch}
.section-copy strong{color:var(--foam); font-weight:600}
.bignum{position:relative; font-family:var(--display); font-size:clamp(5rem,15vw,9rem); line-height:.8; color:var(--amber); margin:0}
.bignum small{display:block; font-size:.14em; letter-spacing:.28em; color:var(--foam-dim); margin-top:.9rem}
.bignum .n{display:inline-block; font-variant-numeric:tabular-nums}
.tapcard{position:relative; border:1px solid var(--oak-3); background:var(--oak);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
padding:clamp(1.5rem,4vw,2.2rem); background-image:url("../assets/tex-block.jpg"); background-size:300px 300px;
background-blend-mode:overlay}
.tapcard .live{display:inline-flex; align-items:center; gap:.5rem; font-size:.68rem; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--hop); margin-bottom:.9rem}
.tapcard .live .pip{width:8px; height:8px; border-radius:50%; background:var(--hop)}
.tapnow p{margin:0 0 1.1rem; color:var(--foam-dim); font-size:.95rem; line-height:1.6}
.tapnow .btn{display:inline-block}
.tapcard iframe{width:100%; min-height:420px; border:0; display:block}
.tapnow .tap-fallback{margin:.9rem 0 0; color:#8B7F70}
.tap-fallback a{color:var(--amber)}
.pours{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 0; padding:0; list-style:none}
.pours li{font-size:.76rem; letter-spacing:.04em; color:var(--foam-dim);
border:1px solid var(--oak-3); padding:.32rem .7rem; border-radius:99px}
/* ---------- this week ---------- */
.week{position:relative; padding:clamp(3rem,8vw,5rem) 0; border-block:1px solid var(--oak-3);
background:
linear-gradient(100deg, var(--oak) 0%, rgba(31,23,18,.95) 34%, rgba(31,23,18,.72) 62%, rgba(31,23,18,.55) 100%),
url("../assets/bg-crowd.jpg") center 38% / cover no-repeat,
var(--oak)}
.week::before, .room::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
background:url("../assets/tex-rust.jpg") repeat; background-size:520px 520px}
.week > .wrap, .room > .wrap, .origin > .wrap{position:relative; z-index:1}
.week-list{display:grid; gap:1px; background:var(--oak-3); border:1px solid var(--oak-3); margin-top:1.8rem}
.slot{background:rgba(20,16,16,.92); backdrop-filter:blur(3px); padding:1.3rem 1.4rem; display:grid; gap:.35rem 1.5rem}
@media (min-width:720px){ .slot{grid-template-columns:130px 1fr auto; align-items:baseline} }
.slot .day{font-family:var(--display); font-size:1.12rem; letter-spacing:.06em; text-transform:uppercase; color:var(--amber)}
.slot .what{margin:0; color:var(--foam)}
.slot .what .sub{display:block; color:var(--foam-dim); font-size:.9rem; margin-top:.15rem}
.slot .time{color:var(--foam-dim); font-size:.92rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.slot.dark{opacity:.55}
/* ---------- food ---------- */
.food{padding:clamp(3rem,8vw,5rem) 0}
.origin{position:relative; border-top:1px solid var(--oak-3);
background:
linear-gradient(to bottom, var(--night) 0%, rgba(20,16,16,.92) 22%, rgba(20,16,16,.78) 50%, rgba(20,16,16,.94) 82%, var(--night) 100%),
url("../assets/bg-wine.jpg") center / cover no-repeat,
var(--night)}
.food-grid{display:grid; gap:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:860px){ .food-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start} }
.food-words .rule-card{margin-top:1.2rem}
.food-shots{display:grid; gap:.75rem}
.rule-card{border:1px solid var(--oak-3); background:var(--oak); padding:clamp(1.4rem,3.5vw,2rem);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
background-image:url("../assets/tex-block.jpg"); background-size:300px 300px; background-blend-mode:overlay}
.rule-card h3{font-family:var(--display); font-size:1.3rem; letter-spacing:.03em; text-transform:uppercase;
margin:0 0 .6rem; color:var(--foam)}
.rule-card p{margin:0 0 .7rem; color:var(--foam-dim)}
.rule-card p:last-child{margin-bottom:0}
.rule-card strong{color:var(--amber); font-weight:600}
.rule-card + .rule-card{margin-top:1.2rem}
.food-pair{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.food-pair img{width:100%}
/* ---------- the room ---------- */
.room{position:relative; padding:clamp(3rem,8vw,5rem) 0; border-block:1px solid var(--oak-3);
background:
linear-gradient(260deg, var(--oak) 0%, rgba(31,23,18,.95) 32%, rgba(31,23,18,.74) 64%, rgba(31,23,18,.5) 100%),
url("../assets/bg-room.jpg") center 42% / cover no-repeat,
var(--oak)}
.room-grid{display:grid; gap:1.4rem; margin-top:1.8rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tile{border:1px solid var(--oak-3); background:rgba(20,16,16,.9); backdrop-filter:blur(3px);
padding:1.4rem 1.4rem 1.6rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.tile h3{font-family:var(--display); font-size:1.15rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 .5rem; color:var(--amber)}
.tile picture{margin-bottom:1rem}
.tile p{margin:0; color:var(--foam-dim); font-size:.95rem}
/* ---------- find ---------- */
.find{padding:clamp(3rem,8vw,5rem) 0}
.find-grid{display:grid; gap:clamp(1.5rem,4vw,2.5rem); grid-template-columns:1fr}
@media (min-width:820px){ .find-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start} }
.find-grid > div:last-child{display:grid; gap:1.2rem; align-content:start}
.addr{font-size:1.08rem; line-height:1.55; margin:0 0 1.3rem}
.addr span{display:block; color:var(--foam-dim); font-size:.94rem}
.addr a{color:var(--amber)}
.hours-table{width:100%; border-collapse:collapse; margin-top:1.4rem}
.hours-table th{text-align:left; font-size:.66rem; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--amber); padding:0 0 .6rem}
.hours-table td{padding:.42rem 0; border-top:1px solid var(--oak-3); font-size:.96rem}
.hours-table td:last-child{text-align:right; color:var(--foam-dim); font-variant-numeric:tabular-nums; white-space:nowrap}
.hours-table tr.shut td:last-child{color:var(--rust)}
.hours-table tr.today td{color:var(--amber); font-weight:600}
.hours-table tr.today td:last-child{color:var(--amber)}
.map-frame{border:1px solid var(--oak-3); aspect-ratio:4/3; background:var(--oak)}
.map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.5) brightness(.75) sepia(.25)}
/* ---------- footer ---------- */
footer{border-top:1px solid var(--oak-3); background:#0E0B0A; padding:clamp(2.4rem,6vw,3.5rem) 0 clamp(2.6rem,7vw,4rem)}
.foot-grid{display:flex; flex-wrap:wrap; gap:1.6rem 3rem; justify-content:space-between; align-items:flex-start}
.foot-links{display:flex; flex-wrap:wrap; gap:1.3rem; list-style:none; margin:1rem 0 0; padding:0}
.foot-links a{font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--foam-dim); text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px;
transition:color .16s ease, border-color .16s ease}
.foot-links a:hover{color:var(--amber); border-color:var(--amber)}
.colophon{font-size:.85rem; line-height:1.6; color:#6E635A; margin:2.2rem 0 0; max-width:64ch}
/* ---------- atmosphere ---------- */
.veil{position:fixed; inset:0; z-index:0; pointer-events:none}
.veil .warmth{position:absolute; inset:0;
background:radial-gradient(ellipse 70% 45% at 50% -8%, rgba(216,154,60,.10), transparent 68%),
radial-gradient(ellipse 45% 40% at 4% 62%, rgba(168,80,47,.07), transparent 72%),
radial-gradient(ellipse 50% 40% at 96% 84%, rgba(138,154,91,.05), transparent 74%)}
.veil .block{position:absolute; inset:0; opacity:.10;
background:url("../assets/tex-block.jpg") repeat; background-size:380px 380px}
.veil .grain{position:absolute; inset:0; opacity:.34;
background-image:url("data:image/svg+xml;utf8,")}
.page{position:relative; z-index:1}
/* ---------- brewery ticker ---------- */
.ticker{position:relative; overflow:hidden; background:#0E0B0A;
border-block:1px solid var(--oak-3); padding:.85rem 0;
-webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)}
.ticker-track{display:flex; width:max-content; animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex; align-items:center; flex:none}
.ticker-group span{font-family:var(--display); font-size:1.02rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--foam-dim); padding:0 1.5rem; white-space:nowrap}
.ticker-group span::after{content:"\25C6"; color:var(--amber); margin-left:1.5rem; font-size:.6em;
position:relative; top:-2px}
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ---------- photo treatment ----------
Every content photo gets the same frame, warmth, grain and vignette so mixed sources agree.
The food tray uses ::after for its corner bracket, so its vignette sits on ::before and it has no grain. */
.tapshot picture, .food-shots > picture, .food-pair picture, .origin picture, .tile picture{position:relative; display:block; isolation:isolate}
.tapshot picture img, .food-shots > picture img, .food-pair picture img, .origin picture img, .tile picture img{
border:1px solid var(--oak-3); box-shadow:0 14px 30px rgba(26,11,7,.55); filter:saturate(1.04) contrast(1.03)}
/* grain */
.tapshot picture::before, .food-pair picture::before, .origin picture::before, .tile picture::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.16;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 160px}
/* vignette and a whisper of amber */
.tapshot picture::after, .food-shots > picture::before, .food-pair picture::after, .origin picture::after, .tile picture::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background:
radial-gradient(ellipse 78% 78% at 50% 48%, transparent 52%, rgba(26,11,7,.46) 100%),
linear-gradient(rgba(216,154,60,.06), rgba(216,154,60,.06));
box-shadow:inset 0 0 34px 6px rgba(26,11,7,.36)}
/* food tray corner bracket */
.food-shots > picture::after{content:""; position:absolute; inset:auto -10px -10px auto; z-index:3;
width:64px; height:64px; border-right:3px solid var(--amber); border-bottom:3px solid var(--amber);
pointer-events:none}
/* the hero carries its own gradient, so it only needs the corners pulled down */
.hero-media::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background:radial-gradient(ellipse 86% 86% at 50% 45%, transparent 66%, rgba(26,11,7,.24) 100%)}
/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.room-grid .tile{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.room.in .room-grid .tile{opacity:1; transform:none}
.room.in .room-grid .tile:nth-child(1){transition-delay:.00s}
.room.in .room-grid .tile:nth-child(2){transition-delay:.06s}
.room.in .room-grid .tile:nth-child(3){transition-delay:.12s}
.room.in .room-grid .tile:nth-child(4){transition-delay:.18s}
.room.in .room-grid .tile:nth-child(5){transition-delay:.24s}
.room.in .room-grid .tile:nth-child(6){transition-delay:.30s}
.room.in .room-grid .tile:nth-child(7){transition-delay:.36s}
.room.in .room-grid .tile:nth-child(8){transition-delay:.42s}
/* ---------- food menu dialog ---------- */
.menu-dialog{width:min(760px, calc(100vw - 2rem)); max-height:min(86vh, 900px); padding:0;
border:1px solid var(--oak-3); background:var(--oak); color:var(--foam);
box-shadow:0 40px 90px rgba(26,11,7,.75), inset 0 1px 0 rgba(255,255,255,.06)}
.menu-dialog::backdrop{background:rgba(10,7,6,.82); backdrop-filter:blur(4px)}
.menu-head{display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
padding:1.5rem clamp(1.2rem,4vw,2rem) 1.1rem; border-bottom:1px solid var(--oak-3);
background:rgba(20,16,16,.6)}
.menu-head h2{font-family:var(--display); font-size:clamp(1.4rem,4vw,2rem); line-height:1;
text-transform:uppercase; margin:.3rem 0 .35rem; color:var(--foam)}
.menu-head .from{font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--amber); margin:0}
.menu-head p{margin:0; font-size:.9rem; color:var(--foam-dim); max-width:46ch}
.menu-close{flex:none; background:none; border:1px solid var(--oak-3); color:var(--foam);
font-family:var(--display); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
padding:.5rem .8rem; cursor:pointer; transition:border-color .16s ease, color .16s ease}
.menu-close:hover{border-color:var(--amber); color:var(--amber)}
.menu-body{padding:clamp(1.2rem,4vw,2rem); overflow-y:auto}
.menu-cats{display:grid; gap:1px; background:var(--oak-3); border:1px solid var(--oak-3);
grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.menu-cat{background:var(--night); padding:1.1rem 1.1rem 1.25rem}
.menu-cat picture{position:relative; display:block; margin:-1.1rem -1.1rem .9rem; isolation:isolate}
.menu-cat picture img{width:100%; height:auto; display:block}
.menu-cat picture::after{content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(ellipse 80% 80% at 50% 48%, transparent 54%, rgba(26,11,7,.42) 100%),
linear-gradient(rgba(216,154,60,.06), rgba(216,154,60,.06));
box-shadow:inset 0 -1px 0 var(--oak-3)}
.menu-cat h3{font-family:var(--display); font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--amber); margin:0 0 .45rem}
.menu-cat p{margin:0; font-size:.89rem; line-height:1.55; color:var(--foam-dim)}
.menu-foot{padding:1.2rem clamp(1.2rem,4vw,2rem) 1.5rem; border-top:1px solid var(--oak-3);
display:flex; flex-wrap:wrap; gap:.75rem 1.2rem; align-items:center}
.menu-foot .note{margin:0; font-size:.82rem; color:#8B7F70}
@media (max-width:520px){ .menu-head{flex-direction:column; gap:.8rem} }
/* ---------- gallery ---------- */
.gal-head{padding:clamp(2.5rem,7vw,4rem) 0 clamp(1.5rem,4vw,2.2rem)}
.gal-title{font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,6vw,3.4rem);
line-height:1.02; text-transform:uppercase; margin:.7rem 0 1rem; color:var(--foam)}
.gal-wrap{padding-bottom:clamp(3rem,8vw,5rem)}
.gal-grid{display:grid; gap:.75rem; grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){ .gal-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .gal-grid{grid-template-columns:repeat(4,1fr)} }
.gal-item{position:relative; display:block; padding:0; margin:0; border:1px solid var(--oak-3);
background:var(--night); cursor:pointer; overflow:hidden; isolation:isolate;
aspect-ratio:1; transition:border-color .18s ease, transform .18s ease}
.gal-item.wide{grid-column:span 2}
.gal-item.tall{grid-row:span 2; aspect-ratio:auto}
.gal-item img{width:100%; height:100%; object-fit:cover; display:block;
transition:transform .5s ease, filter .3s ease}
.gal-item::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background:
linear-gradient(to top, rgba(26,11,7,.85) 0%, rgba(26,11,7,.15) 38%, transparent 62%),
radial-gradient(ellipse 80% 80% at 50% 45%, transparent 58%, rgba(26,11,7,.4) 100%),
linear-gradient(rgba(216,154,60,.05), rgba(216,154,60,.05))}
.gal-item:hover{border-color:var(--amber); transform:translateY(-2px)}
.gal-item:hover img{transform:scale(1.05)}
.gal-cap{position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:left;
padding:.85rem .9rem; font-family:var(--body); font-size:.82rem; line-height:1.4;
color:var(--foam); text-shadow:0 1px 6px rgba(0,0,0,.9)}
@media (max-width:520px){ .gal-cap{font-size:.75rem; padding:.6rem .65rem} }
/* ---------- lightbox ---------- */
.lightbox{width:min(1200px, calc(100vw - 2rem)); max-height:92vh; padding:0; border:0;
background:transparent; overflow:visible}
.lightbox::backdrop{background:rgba(8,6,5,.92); backdrop-filter:blur(6px)}
.lightbox img{width:100%; height:auto; max-height:80vh; object-fit:contain; display:block;
border:1px solid var(--oak-3); box-shadow:0 30px 70px rgba(26,11,7,.8)}
.lb-bar{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:.9rem}
.lb-cap{margin:0; font-size:.92rem; color:var(--foam-dim)}
.lb-btns{display:flex; gap:.5rem; flex:none}
.lb-btn{background:none; border:1px solid var(--oak-3); color:var(--foam); cursor:pointer;
font-family:var(--display); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
padding:.5rem .85rem; transition:border-color .16s ease, color .16s ease}
.lb-btn:hover{border-color:var(--amber); color:var(--amber)}
/* ---------- client review note — remove with the .review-note blocks ---------- */
.review-note{margin-top:1.4rem; padding:1.15rem 1.3rem; background:rgba(216,154,60,.07);
border:1px solid rgba(216,154,60,.45); border-left:4px solid var(--amber)}
.review-note .rn-label{font-family:var(--display); font-size:.76rem; letter-spacing:.18em;
text-transform:uppercase; color:var(--amber); margin:0 0 .6rem}
.review-note p{margin:0 0 .7rem; font-size:.9rem; line-height:1.6; color:var(--foam-dim)}
.review-note p:last-child{margin-bottom:0}
.review-note strong{color:var(--foam); font-weight:600}
.review-note .rn-ask{color:var(--foam); font-weight:500}
a:focus-visible, button:focus-visible{outline:3px solid var(--amber); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important; animation:none!important}
.reveal, .room-grid .tile{opacity:1; transform:none}
}