@import url('./fonts.css');
@font-face{
font-family:HouseDisplay;
src:local('Bodoni MT'),local('Didot');
font-display:swap}
:root{
--ink:#471414;
--wine:#471414;
--wine-light:#5a2525;
--paper:#f1e9da;
--text:#f1e9da;
--muted:#c5b8ad;
--gold:#cfb48b;
--line:rgba(232,212,188,.19);
--surface:#471414;
--display:'Instrument Serif',Georgia,serif;
--body:'Lexend',system-ui,sans-serif;
--ease-out:cubic-bezier(.23,1,.32,1);
--ease-in-out:cubic-bezier(.77,0,.175,1);
--ease-drawer:cubic-bezier(.32,.72,0,1);
color-scheme:dark;
font:100%/1.6 var(--body)}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:104px}
body{
margin:0;
background:var(--ink);
color:var(--text);
-webkit-font-smoothing:antialiased}
body:has(dialog[open]){
overflow:hidden}
body,button,input,select,textarea{
font-family:var(--body)}
button,a,input,select,textarea{
-webkit-tap-highlight-color:transparent}
button,input,select,textarea{
font-size:1rem}
button,a{
touch-action:manipulation}
button{
cursor:pointer;
color:inherit}
a{
color:inherit;
text-decoration:none}
button{
font:inherit}
img{
display:block;
max-width:100%;
object-fit:cover}
button:disabled{
cursor:not-allowed;
opacity:.5}
button,a{
text-underline-offset:5px}
a:hover{
text-decoration-color:var(--gold)}
:focus-visible{
outline:2px solid var(--gold);
outline-offset:5px}
main:focus{
outline:none}
h1,h2,h3,h4,p{
margin:0}
h1,h2,h3,h4{
font-family:var(--display);
font-weight:400;
line-height:1.06;
letter-spacing:-.035em;
text-wrap:balance}
h1{
font-size:clamp(3.1rem,6.2vw,6.7rem)}
h2{
font-size:clamp(2.45rem,4.2vw,4.3rem)}
h3{
font-size:2rem}
h4{
font-size:1.5rem}
em{
font-weight:400;
color:var(--gold)}
p{
overflow-wrap:break-word}
p+p{
margin-top:1.1rem}
::selection{
background:var(--gold);
color:var(--ink)}
.wrap{
width:min(1280px,calc(100% - 112px));
margin-inline:auto}
.section{
padding-block:108px}
.eyebrow{
font:500 .72rem/1.5 var(--body);
letter-spacing:.18em;
text-transform:uppercase;
color:var(--gold)}
.muted{
color:var(--muted)}
.text-link{
display:inline-flex;
align-items:center;
gap:24px;
min-height:44px;
border:0;
background:none;
padding:8px 0;
font-size:.94rem}
.text-link span{
color:var(--gold)}
.text-link:hover{
text-decoration:underline}
.button{
min-height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:30px;
padding:12px 24px;
border:1px solid var(--line);
border-radius:6px;
background:transparent;
color:var(--text);
font:500 .9rem/1.3 var(--body);
transition:transform 160ms var(--ease-out),opacity 160ms var(--ease-out);
text-align:center}
.button:active,.icon-button:active,.chip:active{
transform:scale(.98);
transition-duration:100ms}
.button-light{
background:var(--paper);
color:#471414;
border-color:var(--paper)}
.button-small{
min-height:44px;
padding:10px 17px;
font-size:.82rem}
.button-gold{
background:var(--gold);
color:var(--ink)}
.button-full{
width:100%}
.icon-button{
border:1px solid var(--line);
background:transparent;
border-radius:50%;
width:44px;
height:44px;
display:grid;
place-items:center;
font-size:1.3rem;
flex-shrink:0;
transition:transform 160ms var(--ease-out)}
.skip-link{
position:fixed;
top:-100px;
left:20px;
z-index:100;
background:var(--paper);
color:var(--ink);
padding:12px}
.skip-link:focus{
top:10px}
.site-header{
position:fixed;
z-index:30;
top:0;
left:0;
right:0;
height:94px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 4%;
background:linear-gradient(#471414c9,transparent)}
.site-header.scrolled,.inner-route .site-header{
background:#471414ed;
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px)}
.brand{
display:flex;
align-items:center;
gap:13px;
font-family:var(--display);
font-size:1.9rem;
line-height:1}
.brand img{
height:50px;
width:34px;
object-fit:contain}
.brand-sub{
display:block;
font:500 .52rem/1.8 var(--body);
letter-spacing:.32em;
margin-left:3px}
.desktop-nav{
display:flex;
gap:30px}
.desktop-nav a{
min-height:44px;
display:flex;
align-items:center;
font-size:.86rem;
color:#dfd4c9;
position:relative}
.desktop-nav a[aria-current=page]{
color:var(--gold)}
.desktop-nav a[aria-current=page]:after{
content:'';
position:absolute;
bottom:3px;
left:0;
width:16px;
height:1px;
background:var(--gold)}
.header-actions{
display:flex;
align-items:center;
gap:16px}
.menu-trigger{
display:none;
border:0;
background:transparent;
min-height:44px;
padding:8px}
.mobile-dock{
display:none}
.hero{
min-height:760px;
height:min(100svh,1060px);
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
background:var(--wine);
isolation:isolate}
.hero-image,.hero-shade{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:-2}
.hero-image{
object-position:center 50%;
opacity:.66;
transition:opacity 240ms var(--ease-out)}
.hero-image.changing{
opacity:.15}
.hero-shade{
z-index:-1;
background:linear-gradient(90deg,rgba(22,7,12,.85),rgba(31,9,16,.23) 76%),linear-gradient(0deg,#471414 0%,transparent 35%,rgba(24,8,12,.15))}
.hero-inner{
padding-top:70px}
.hero-eyebrow{
display:flex;
gap:18px;
align-items:center;
color:#ead9c1;
margin-bottom:32px;
font-size:.67rem;
letter-spacing:.22em}
.hero-eyebrow span{
width:34px;
height:1px;
background:var(--gold)}
.hero h1{
max-width:980px;
font-size:clamp(4rem,7.4vw,7.2rem);
line-height:.99;
letter-spacing:-.04em}
.hero h1 em{
color:#e4caa8}
.hero-copy{
font-size:1.08rem;
line-height:1.7;
color:#dfd2c6;
margin-top:27px;
max-width:520px}
.hero-actions{
display:flex;
align-items:center;
gap:32px;
margin-top:34px}
.hero-bottom{
position:absolute;
bottom:33px;
left:0;
right:0;
display:flex;
justify-content:space-between;
align-items:flex-end}
.hero-bottom>p{
font-size:.64rem;
letter-spacing:.15em;
line-height:1.8;
color:var(--gold)}
.hero-bottom>p span{
display:block;
font-size:.62rem;
color:#b4a297;
letter-spacing:.09em}
.scene-controls{
display:flex;
gap:26px}
.scene-controls button{
font-size:.75rem;
border:0;
border-top:1px solid #b29a785c;
background:transparent;
min-height:46px;
padding:10px 0 0;
color:#c2b4a7}
.scene-controls button span{
font-size:.6rem;
margin-right:8px;
color:var(--gold)}
.scene-controls button[aria-pressed=true]{
border-color:var(--gold);
color:var(--paper)}
.intro-section{
display:grid;
grid-template-columns:.85fr 1.15fr;
align-items:center;
gap:110px}
.intro-image{
position:relative;
padding:0 28px 28px 0}
.intro-image:after{
content:'';
position:absolute;
inset:28px 0 0 28px;
border:1px solid var(--line);
z-index:-1}
.intro-image img{
width:100%;
height:460px;
object-position:center}
.image-caption{
display:block;
margin-top:16px;
font-family:var(--display);
font-style:italic;
color:var(--muted);
font-size:1.02rem}
.intro-copy .eyebrow{
margin-bottom:22px}
.intro-copy p:not(.eyebrow){
font-size:1.04rem;
color:var(--muted);
line-height:1.8;
max-width:51ch}
.intro-copy h2{
margin-bottom:26px}
.intro-copy .text-link{
margin-top:23px}
.section-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:38px}
.section-heading .eyebrow{
margin-bottom:16px}
.section-heading>p{
font-size:.95rem;
color:var(--muted)}
.experience-section{
background:#471414}
.experience-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px}
.experience-card{
position:relative;
min-height:420px;
display:flex;
align-items:flex-end;
overflow:hidden;
border-radius:3px;
isolation:isolate}
.experience-card>img{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:-2;
transition:transform 250ms var(--ease-out)}
.experience-card:after{
content:'';
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(transparent 18%,rgba(14,6,10,.35) 45%,#471414eb)}
.experience-card>div{
width:100%;
padding:25px 22px}
.experience-card .eyebrow{
font-size:.59rem;
letter-spacing:.15em;
margin-bottom:12px}
.experience-card h3{
font-size:2.15rem;
margin-bottom:20px;
line-height:1.06}
.experience-card span{
display:flex;
gap:10px;
align-items:center;
justify-content:space-between;
font-size:.77rem;
line-height:1.5;
color:#ded3c7}
.experience-card b{
font-size:1.2rem;
font-weight:400;
color:var(--gold)}
.event-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px}
.event-card{
display:block;
text-align:left;
border:0;
background:transparent;
padding:0;
width:100%}
.event-card-media{
height:230px;
position:relative;
overflow:hidden;
border-radius:3px}
.event-card-media>img{
width:100%;
height:100%;
transition:transform 220ms var(--ease-out)}
.date-badge{
position:absolute;
top:14px;
left:14px;
background:#241217ed;
backdrop-filter:blur(8px);
border:1px solid var(--line);
width:56px;
padding:9px;
text-align:center;
font-size:.6rem;
letter-spacing:.1em}
.date-badge strong{
display:block;
font-family:var(--display);
font-weight:400;
font-size:1.65rem;
line-height:1.1}
.event-card .eyebrow{
margin-top:20px;
font-size:.63rem}
.event-card h3{
font-size:1.9rem;
margin-top:8px;
margin-bottom:9px}
.event-card .event-meta{
font-size:.85rem;
color:var(--muted)}
.preview-note{
padding:10px 14px;
border:1px solid var(--line);
border-radius:4px;
color:#d7c5ad;
font-size:.78rem;
margin-bottom:24px;
background:#cfb48b08}
.preview-note strong{
color:var(--gold)}
.membership-band{
position:relative;
isolation:isolate;
padding:105px 0;
text-align:center;
background:var(--wine)}
.membership-band>img{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:.22;
z-index:-2}
.membership-band:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,#471414ce,#47141455,#471414ce);
z-index:-1}
.membership-band h2{
margin:23px 0;
font-size:clamp(2.8rem,5vw,5rem)}
.membership-band p:not(.eyebrow){
color:#e0d2c5;
margin-bottom:29px}
.values-section>.eyebrow{
margin-bottom:33px}
.values-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:70px}
.values-grid h3{
font-size:1.9rem;
margin-bottom:17px}
.values-grid p{
color:var(--muted);
font-size:.94rem;
max-width:35ch}
.site-footer{
padding:65px 0 24px;
background:#471414;
border-top:1px solid var(--line)}
.footer-top{
display:grid;
grid-template-columns:1.3fr 1fr 1fr;
gap:65px}
.footer-brand img{
width:155px;
height:auto;
object-fit:contain}
.footer-brand p{
color:var(--muted);
font-size:.86rem;
margin-top:24px}
.footer-top .eyebrow{
margin-bottom:20px;
font-size:.64rem}
.footer-top address{
font-size:.88rem;
font-style:normal;
line-height:1.8;
color:var(--muted);
margin-bottom:8px}
.footer-top a,.footer-top button{
display:block;
font-size:.88rem;
min-height:38px;
padding:7px 0}
.footer-bottom{
margin-top:54px;
border-top:1px solid var(--line);
padding-top:23px;
display:flex;
justify-content:space-between;
gap:20px;
color:var(--muted);
font-size:.71rem}
.footer-bottom p+p{
margin:0;
font-size:.6rem;
letter-spacing:.14em}
.page-shell{
padding-top:146px;
padding-bottom:90px;
min-height:75vh}
.page-intro{
margin-bottom:45px}
.page-intro .eyebrow{
margin-bottom:16px}
.page-intro h1{
margin-bottom:21px}
.page-intro .lead{
max-width:55ch;
color:var(--muted);
font-size:1.08rem;
line-height:1.8}
.page-title-row{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:25px}
.back-link{
display:inline-flex;
min-height:44px;
align-items:center;
color:var(--muted);
font-size:.88rem;
margin-bottom:15px}
.toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin:24px 0}
.month-nav{
display:flex;
gap:12px;
align-items:center}
.month-nav h2{
font-family:var(--body);
font-size:1.2rem;
font-weight:500;
letter-spacing:0;
min-width:175px;
text-align:center}
.segmented{
display:flex;
padding:4px;
border:1px solid var(--line);
border-radius:8px;
gap:2px}
.segmented button{
min-height:38px;
border:0;
border-radius:4px;
padding:6px 17px;
background:transparent;
color:var(--muted);
font-size:.84rem}
.segmented button[aria-pressed=true]{
background:var(--paper);
color:var(--ink)}
.filter-row{
display:flex;
gap:10px;
overflow-x:auto;
padding:5px 2px 14px;
scrollbar-width:thin;
scrollbar-color:#715443 transparent;
align-items:center}
.chip{
border:1px solid var(--line);
background:transparent;
border-radius:30px;
white-space:nowrap;
padding:10px 19px;
min-height:44px;
font-size:.85rem;
color:#d5c6b9;
transition:transform 160ms var(--ease-out)}
.chip[aria-pressed=true]{
color:var(--ink);
background:var(--gold);
border-color:var(--gold)}
.search-field{
position:relative;
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px}
.search-field input{
width:100%;
min-height:48px;
padding:12px 17px;
border-radius:6px;
background:#ffffff05;
color:var(--text);
border:1px solid var(--line);
font:inherit}
.search-field input::placeholder{
color:#ac9d96}
.search-field label{
flex-shrink:0;
font-size:.8rem;
color:var(--muted)}
.results-summary{
font-size:.8rem;
color:var(--muted);
padding-block:15px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px}
.results-summary button{
padding:0;
min-height:32px;
background:none;
border:0;
color:var(--gold);
text-decoration:underline;
font-size:.8rem}
.agenda-group{
display:grid;
grid-template-columns:100px 1fr;
gap:30px;
border-top:1px solid var(--line);
padding:25px 0}
.agenda-date{
color:var(--gold);
padding-top:8px}
.agenda-date strong{
font-family:var(--display);
font-size:2.7rem;
line-height:1;
display:block}
.agenda-date span{
font-size:.73rem;
letter-spacing:.08em}
.agenda-event{
width:100%;
display:grid;
grid-template-columns:130px 1fr 40px;
gap:25px;
align-items:center;
border:0;
border-radius:5px;
background:transparent;
text-align:left;
padding:0;
min-height:135px}
.agenda-event+.agenda-event{
margin-top:22px}
.agenda-event img{
width:130px;
height:126px;
border-radius:3px}
.agenda-event .eyebrow{
font-size:.62rem;
letter-spacing:.11em}
.agenda-event h3{
font-size:2rem;
margin:8px 0 9px}
.agenda-event .event-meta{
font-size:.86rem;
color:var(--muted)}
.agenda-arrow{
font-size:1.6rem;
color:var(--gold)}
.status-label{
display:inline-block;
color:var(--gold);
font-size:.72rem;
margin-top:9px}
.status-cancelled,.status-soldout{
color:#d9a49b}
.empty-state{
padding:60px 25px;
text-align:center;
border:1px solid var(--line);
border-radius:6px;
margin:20px 0}
.empty-state h3{
margin-bottom:16px}
.empty-state p{
color:var(--muted);
max-width:48ch;
margin:0 auto 23px}
.calendar{
border:1px solid var(--line);
border-radius:8px;
overflow:hidden}
.calendar-week,.calendar-days{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr))}
.calendar-week span{
padding:16px 5px;
background:var(--surface);
font-size:.72rem;
letter-spacing:.06em;
color:var(--muted);
text-align:center}
.calendar-day,.calendar-blank{
border:0;
border-top:1px solid var(--line);
border-right:1px solid var(--line);
padding:12px 9px;
background:transparent;
min-height:110px;
text-align:left}
.calendar-day:nth-child(7n),.calendar-blank:nth-child(7n){
border-right:0}
.calendar-day[aria-pressed=true]{
background:var(--wine-light);
box-shadow:inset 0 0 0 1px var(--gold)}
.calendar-day.is-today .calendar-number{
color:var(--ink);
background:var(--gold);
border-radius:50%}
.calendar-number{
width:27px;
height:27px;
display:grid;
place-items:center;
font-size:.85rem;
margin-bottom:7px}
.calendar-label{
font-size:.69rem;
display:block;
line-height:1.4;
color:var(--gold);
margin-top:5px;
overflow-wrap:anywhere}
.calendar-count{
font-size:.63rem;
color:var(--muted)}
.calendar-selection{
margin-top:24px}
.screening-layout{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:35px 24px}
.film-card{
border:0;
background:transparent;
text-align:left;
padding:0}
.film-card img{
width:100%;
aspect-ratio:2/3;
object-fit:cover;
border-radius:3px;
transition:transform 220ms var(--ease-out)}
.film-card h3{
font-size:1.6rem;
line-height:1.12;
margin-top:17px}
.film-card p{
color:var(--muted);
font-size:.78rem;
margin-top:9px}
.dining-hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
margin-bottom:55px}
.dining-hero img{
height:330px;
width:100%;
border-radius:3px;
object-position:center}
.dining-hero h1{
font-size:clamp(3rem,5.1vw,5.5rem)}
.menu-browser{
scroll-margin-top:104px}
.menu-controls{
position:sticky;
top:94px;
background:#471414f7;
backdrop-filter:blur(12px);
z-index:15;
padding-top:12px;
padding-bottom:4px}
.menu-tabs{
display:flex;
gap:32px;
border-bottom:1px solid var(--line);
margin-bottom:20px}
.menu-tabs a{
font-size:1.15rem;
min-height:54px;
padding:10px 1px;
color:var(--muted);
white-space:nowrap}
.menu-tabs a[aria-current=page]{
color:var(--paper);
border-bottom:2px solid var(--gold)}
.menu-layout{
display:grid;
grid-template-columns:190px 1fr;
gap:65px;
padding-top:35px}
.category-sidebar{
position:sticky;
top:285px;
align-self:start;
display:flex;
flex-direction:column;
gap:3px}
.category-sidebar a{
font-size:.85rem;
padding:9px 0;
min-height:44px;
color:var(--muted)}
.category-sidebar a:hover{
color:var(--gold)}
.menu-category{
scroll-margin-top:280px;
padding-bottom:33px}
.menu-category h2{
font-size:2.3rem;
border-bottom:1px solid var(--line);
padding-bottom:21px}
.menu-item{
display:grid;
grid-template-columns:1fr auto;
gap:22px;
padding:22px 0;
border-bottom:1px solid #e8d4bc12}
.menu-item h3{
font-family:var(--body);
font-size:1.03rem;
letter-spacing:0;
line-height:1.45;
font-weight:500;
text-wrap:initial}
.menu-item p{
color:var(--muted);
font-size:.89rem;
line-height:1.65;
margin-top:6px;
max-width:58ch}
.menu-price{
font-variant-numeric:tabular-nums;
white-space:nowrap;
font-size:.97rem;
color:var(--gold);
padding-top:2px;
text-align:right}
.menu-price small{
display:block;
color:var(--muted);
font-size:.68rem;
line-height:1.8}
.menu-footnote{
margin-top:25px;
padding:24px;
background:#cfb48b08;
border:1px solid var(--line);
border-radius:4px;
font-size:.82rem;
color:var(--muted);
line-height:1.8}
.menu-footnote strong{
color:var(--text)}
.menu-content .results-summary{
padding-top:0}
.category-mobile{
display:none}
.reservation-band{
background:var(--wine);
padding:36px;
margin-top:65px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
border:1px solid var(--line);
border-radius:4px}
.reservation-band h2{
font-size:2.3rem;
margin-bottom:10px}
.reservation-band p{
color:var(--muted);
max-width:55ch}
.venue-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:46px 32px}
.venue-card img{
width:100%;
height:320px;
border-radius:3px}
.venue-card h2{
font-size:2.5rem;
margin:20px 0 12px}
.venue-card .eyebrow{
font-size:.64rem}
.venue-card p:not(.eyebrow){
font-size:.94rem;
color:var(--muted);
max-width:52ch;
margin:13px 0}
.venue-hero{
width:100%;
height:460px;
object-fit:cover;
border-radius:4px;
margin-bottom:45px}
.venue-detail-grid{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:80px;
margin-bottom:45px}
.venue-detail-grid p{
font-size:1.05rem;
line-height:1.8;
color:var(--muted)}
.venue-detail-grid h2{
font-size:2.2rem;
margin:30px 0 20px}
.venue-detail-grid ul{
padding-left:20px;
color:var(--muted);
line-height:2}
.venue-cta{
align-self:start;
padding:28px;
border:1px solid var(--line);
border-radius:4px;
background:var(--surface)}
.venue-cta h3{
margin-bottom:14px}
.venue-cta .button{
margin-top:20px;
width:100%}
.gallery-grid{
columns:3;
column-gap:23px}
.gallery-item{
margin:0 0 28px;
break-inside:avoid}
.gallery-item button{
padding:0;
background:none;
border:0;
width:100%}
.gallery-item img{
width:100%;
height:auto;
border-radius:3px}
.gallery-item figcaption{
font-size:.81rem;
color:var(--muted);
margin-top:10px}
.house-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px}
.house-grid .experience-card{
min-height:360px}
.site-dialog{
position:fixed;
inset:0;
width:min(650px,calc(100% - 40px));
max-height:min(90dvh,950px);
padding:0;
margin:auto;
background:#471414;
color:var(--text);
border:1px solid #cfb48b38;
border-radius:16px;
overflow:auto;
box-shadow:0 30px 100px #0008;
overscroll-behavior:contain}
.site-dialog::backdrop{
background:#080408bb;
backdrop-filter:blur(5px)}
.dialog-shell{
padding:40px}
.dialog-close{
position:sticky;
top:14px;
float:right;
z-index:4;
display:grid;
place-items:center;
margin:-20px -20px 0 12px;
min-width:44px;
min-height:44px;
border:1px solid var(--line);
border-radius:50%;
background:#471414f5;
font:300 1.7rem/1 var(--body)}
.dialog-cover{
width:calc(100% + 80px);
max-width:none;
height:255px;
margin:-40px -40px 28px;
object-fit:cover}
.site-dialog .eyebrow{
font-size:.64rem;
margin-bottom:13px}
.site-dialog h2{
font-size:2.6rem;
margin-bottom:19px}
.site-dialog .lead{
color:var(--muted);
font-size:1rem;
line-height:1.75;
margin-bottom:20px}
.dialog-facts{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
border-block:1px solid var(--line);
padding:20px 0;
margin:20px 0}
.dialog-facts dt{
font-size:.65rem;
color:var(--gold);
letter-spacing:.1em;
text-transform:uppercase;
margin-bottom:6px}
.dialog-facts dd{
margin:0;
font-size:.9rem}
.dialog-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:27px}
.dialog-actions .button{
flex:1}
.dialog-note{
font-size:.77rem;
color:var(--muted);
margin-top:15px;
line-height:1.7}
.nav-dialog{
display:flex;
flex-direction:column;
gap:6px;
margin-top:20px}
.nav-dialog a{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0;
font-family:var(--display);
font-size:2rem;
border-bottom:1px solid var(--line);
min-height:60px}
.nav-dialog a span{
font-family:var(--body);
font-size:.7rem;
color:var(--gold)}
.field{
display:flex;
flex-direction:column;
gap:7px;
margin-bottom:18px}
.field label{
font-size:.83rem;
color:var(--muted)}
.field input,.field textarea,.field select{
width:100%;
background:#471414;
border:1px solid var(--line);
color:var(--text);
border-radius:5px;
padding:12px;
min-height:48px;
font:inherit}
.field textarea{
resize:vertical}
.field-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px}
.form-feedback{
font-size:.86rem;
line-height:1.7;
padding:12px 0;
color:var(--gold)}
.error-message{
color:#f0afa5}
.membership-plans{
display:grid;
gap:12px;
margin:25px 0}
.membership-plan{
padding:22px;
border:1px solid var(--line);
border-radius:5px}
.membership-plan h3{
font-size:1.55rem}
.membership-plan .price{
font-family:var(--display);
font-size:2rem;
color:var(--gold);
margin:12px 0}
.membership-plan .price small{
font:400 .75rem var(--body)}
.membership-plan p{
font-size:.82rem;
color:var(--muted)}
.rules{
margin:24px 0}
.rules summary{
cursor:pointer;
min-height:44px;
padding-block:9px;
color:var(--gold);
font-size:.92rem}
.rules p,.rules li{
font-size:.87rem;
color:var(--muted);
line-height:1.8}
.lightbox-image{
width:100%;
height:auto;
max-height:65dvh;
object-fit:contain}
.notice{
padding:20px;
background:var(--wine)}
.reveal{
opacity:1;
transform:none}
.reveal.ready{
opacity:0;
transform:translateY(12px);
transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.reveal.visible{
opacity:1;
transform:none}
.keyboard-input *{
transition-duration:0ms!important;
animation-duration:0ms!important;
scroll-behavior:auto!important}
@media(hover:hover) and (pointer:fine){
.button:hover{
opacity:.88}
.experience-card:hover>img,.event-card:hover img{
transform:scale(1.025)}
.film-card:hover img{
transform:translateY(-4px)}
.agenda-event:hover h3,.venue-card:hover h2{
color:var(--gold)}
.chip:hover{
border-color:var(--gold)}
}
@media(min-width:1600px){
.hero-inner{
padding-top:40px}
.hero h1{
font-size:7.5rem}
}
@media(max-width:1100px){
.wrap{
width:calc(100% - 64px)}
.desktop-nav{
gap:19px}
.desktop-nav a{
font-size:.8rem}
.brand{
font-size:1.65rem}
.header-actions .button{
font-size:.76rem;
padding:10px 13px;
gap:12px}
.intro-section{
gap:55px}
.experience-grid{
grid-template-columns:repeat(2,1fr);
gap:22px}
.experience-card{
min-height:390px}
.experience-card>div{
padding:27px}
.experience-card h3{
font-size:2.5rem}
.experience-card .eyebrow{
font-size:.68rem}
.experience-card span{
font-size:.9rem}
.values-grid{
gap:35px}
.dining-hero{
gap:40px}
.menu-layout{
gap:36px;
grid-template-columns:165px 1fr}
}
@media(max-width:820px){
.desktop-nav{
display:none}
.menu-trigger{
display:block}
.site-header{
height:80px}
.hero{
min-height:740px}
.intro-section{
gap:40px}
.intro-image img{
height:410px}
.event-cards{
gap:20px}
.event-card-media{
height:190px}
.event-card h3{
font-size:1.5rem}
.footer-top{
gap:35px}
.footer-bottom>p:nth-child(2){
display:none}
.page-shell{
padding-top:120px}
.menu-controls{
top:80px}
.menu-layout{
grid-template-columns:1fr}
.category-sidebar{
display:none}
.category-mobile{
display:flex}
.menu-tabs{
gap:26px}
.menu-category{
scroll-margin-top:275px}
.screening-layout{
grid-template-columns:repeat(3,1fr)}
.venue-detail-grid{
gap:40px}
.gallery-grid{
columns:2}
.calendar-day,.calendar-blank{
min-height:92px;
padding:8px 5px}
.calendar-label{
font-size:.61rem}
.dining-hero{
grid-template-columns:1.15fr .85fr;
gap:25px}
.dining-hero img{
height:285px}
.reservation-band{
flex-direction:column;
align-items:flex-start}
}
@media(max-width:600px){
.wrap{
width:calc(100% - 40px)}
.section{
padding-block:65px}
.site-header{
height:74px;
padding:0 20px}
.brand{
font-size:1.55rem;
gap:9px}
.brand img{
height:42px;
width:28px}
.brand-sub{
font-size:.46rem}
.header-actions{
gap:9px}
.membership-trigger{
min-height:40px!important;
padding:8px 11px!important;
font-size:.7rem!important}
.membership-trigger span{
display:none}
.menu-trigger{
display:none}
.hero{
min-height:710px;
height:calc(100svh - 58px);
max-height:850px;
justify-content:center}
.hero-inner{
padding-top:28px;
padding-bottom:95px}
.hero-image{
object-position:60% center;
opacity:.58}
.hero-shade{
background:linear-gradient(90deg,#471414aa,#47141426),linear-gradient(0deg,#471414 0%,transparent 72%,#47141444)}
.hero-eyebrow{
font-size:.55rem;
letter-spacing:.13em;
gap:10px;
margin-bottom:26px}
.hero-eyebrow span{
width:18px}
.hero h1{
font-size:clamp(3.05rem,12.5vw,4.55rem);
line-height:1.02;
letter-spacing:-.045em}
.hero-copy{
font-size:.98rem;
line-height:1.75;
margin-top:24px;
max-width:30ch}
.desktop-only{
display:none}
.hero-actions{
flex-direction:column;
align-items:flex-start;
gap:14px;
margin-top:26px}
.hero-actions .button{
min-height:49px;
font-size:.88rem;
padding-inline:19px}
.hero-actions .text-link{
font-size:.83rem}
.hero-bottom{
bottom:26px;
display:block}
.hero-bottom>p{
display:none}
.scene-controls{
gap:20px;
justify-content:space-between}
.scene-controls button{
font-size:.68rem;
flex:1;
text-align:left}
.scene-controls button span{
font-size:.55rem;
margin-right:5px}
.mobile-dock{
display:flex;
position:fixed;
bottom:0;
left:0;
right:0;
z-index:28;
padding:4px 11px calc(5px + env(safe-area-inset-bottom));
min-height:60px;
background:#471414f5;
backdrop-filter:blur(16px);
border-top:1px solid var(--line);
justify-content:space-around}
.mobile-dock a,.mobile-dock button{
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
font-size:.73rem;
letter-spacing:.01em;
gap:5px;
padding:8px 9px;
border:0;
background:none;
color:#cdbdaf;
position:relative}
.mobile-dock [aria-current=page]{
color:var(--paper)}
.mobile-dock [aria-current=page]:before{
content:'';
position:absolute;
top:3px;
left:calc(50% - 7px);
width:14px;
height:2px;
background:var(--gold)}
.intro-section{
grid-template-columns:1fr;
gap:36px}
.intro-copy{
order:-1}
.intro-copy h2{
font-size:2.8rem;
margin-bottom:23px}
.intro-copy p:not(.eyebrow){
font-size:1rem}
.intro-image{
max-width:100%;
padding:0 15px 10px 0}
.intro-image img{
height:330px}
.intro-image:after{
inset:15px 0 0 15px}
.image-caption{
font-size:.91rem}
.section-heading{
display:block;
margin-bottom:29px}
.section-heading h2{
font-size:2.65rem}
.section-heading>p{
display:none}
.section-heading>.text-link{
margin-top:15px;
font-size:.85rem}
.experience-grid{
gap:14px}
.experience-card{
min-height:290px}
.experience-card>div{
padding:18px 14px}
.experience-card .eyebrow{
font-size:.52rem;
letter-spacing:.1em;
margin-bottom:9px}
.experience-card h3{
font-size:1.7rem;
margin-bottom:14px}
.experience-card span{
font-size:.69rem;
line-height:1.55;
gap:8px}
.experience-card b{
font-size:1rem}
.event-cards{
display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
gap:18px;
padding-bottom:15px}
.event-card{
width:82%;
min-width:82%;
scroll-snap-align:start}
.event-card-media{
height:230px}
.event-card h3{
font-size:1.8rem}
.preview-note{
font-size:.74rem;
line-height:1.7}
.membership-band{
padding:70px 0}
.membership-band h2{
font-size:2.75rem}
.membership-band p:not(.eyebrow){
font-size:.95rem}
.values-grid{
grid-template-columns:1fr;
gap:27px}
.values-grid>div{
border-top:1px solid var(--line);
padding-top:23px}
.values-grid h3{
margin-bottom:12px}
.values-grid p{
font-size:.94rem;
max-width:none}
.site-footer{
padding:45px 0 95px}
.footer-top{
grid-template-columns:1fr;
gap:32px}
.footer-brand{
display:flex;
align-items:center;
gap:26px}
.footer-brand img{
width:130px}
.footer-brand p{
margin:0;
font-size:.79rem}
.footer-top .eyebrow{
margin-bottom:10px}
.footer-bottom{
margin-top:28px;
font-size:.68rem;
align-items:center}
.page-shell{
padding-top:106px;
padding-bottom:55px}
.page-intro{
margin-bottom:26px}
.page-intro h1{
font-size:3.15rem}
.page-intro .lead{
font-size:1rem;
line-height:1.7}
.page-title-row{
display:block}
.page-title-row>.button{
margin-top:20px}
.page-intro .eyebrow{
font-size:.62rem}
.toolbar{
flex-wrap:wrap;
gap:17px;
margin-top:19px;
margin-bottom:16px}
.month-nav{
width:100%;
justify-content:space-between;
gap:9px}
.month-nav h2{
font-size:1.1rem;
min-width:0}
.toolbar .segmented{
margin-left:auto}
.toolbar>.button{
font-size:.8rem;
min-height:44px;
padding:10px 17px}
.filter-row{
margin-right:-20px;
padding-right:20px;
gap:8px}
.chip{
font-size:.8rem;
padding:10px 16px}
.results-summary{
font-size:.74rem;
padding-block:11px 19px}
.agenda-group{
grid-template-columns:42px 1fr;
gap:12px;
padding:20px 0}
.agenda-date strong{
font-size:2.05rem}
.agenda-date span{
font-size:.59rem}
.agenda-event{
grid-template-columns:65px 1fr;
gap:12px;
min-height:100px}
.agenda-event img{
width:65px;
height:92px}
.agenda-arrow{
display:none}
.agenda-event h3{
font-size:1.55rem;
line-height:1.12;
margin:6px 0 8px}
.agenda-event .eyebrow{
font-size:.52rem;
letter-spacing:.08em}
.agenda-event .event-meta{
font-size:.74rem;
line-height:1.65}
.status-label{
font-size:.66rem;
margin-top:7px}
.calendar-day,.calendar-blank{
min-height:65px;
padding:7px 3px;
text-align:center}
.calendar-number{
margin:0 auto 4px;
font-size:.8rem;
width:28px;
height:28px}
.calendar-label{
display:none}
.calendar-count{
font-size:.6rem;
color:var(--gold)}
.calendar-week span{
font-size:.61rem;
padding:12px 2px}
.calendar-selection .agenda-group{
grid-template-columns:1fr}
.calendar-selection .agenda-date{
display:none}
.calendar-selection .agenda-event{
grid-template-columns:75px 1fr}
.calendar-selection .agenda-event img{
width:75px;
height:96px}
.screening-layout{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:28px 18px}
.film-card h3{
font-size:1.5rem}
.film-card p{
font-size:.72rem}
.dining-hero{
grid-template-columns:1fr;
gap:25px;
margin-bottom:28px}
.dining-hero .page-intro{
margin:0}
.dining-hero img{
height:220px}
.dining-hero h1{
font-size:3.4rem}
.menu-tabs{
gap:23px;
margin-bottom:12px;
overflow-x:auto}
.menu-tabs a{
font-size:.98rem;
min-height:49px}
.menu-controls{
top:74px;
padding-top:5px;
margin-inline:-20px;
padding-inline:20px}
.menu-controls .search-field{
margin-bottom:8px}
.menu-controls .search-field input{
font-size:1rem}
.menu-layout{
padding-top:21px}
.menu-category{
scroll-margin-top:295px}
.menu-category h2{
font-size:2rem;
padding-bottom:17px}
.menu-item{
gap:15px;
padding-block:19px}
.menu-item h3{
font-size:1rem}
.menu-item p{
font-size:.87rem;
line-height:1.7}
.menu-price{
font-size:.93rem}
.menu-price small{
font-size:.64rem}
.menu-footnote{
font-size:.8rem;
padding:18px}
.reservation-band{
padding:26px 22px;
margin-top:35px;
gap:23px}
.reservation-band .button{
width:100%}
.venue-grid{
grid-template-columns:1fr;
gap:38px}
.venue-card img{
height:265px}
.venue-card h2{
font-size:2.35rem}
.venue-hero{
height:270px;
margin-bottom:25px}
.venue-detail-grid{
grid-template-columns:1fr;
gap:28px}
.venue-detail-grid h2{
font-size:2rem}
.venue-detail-grid p{
font-size:1rem}
.gallery-grid{
columns:2;
column-gap:14px}
.gallery-item{
margin-bottom:20px}
.gallery-item figcaption{
font-size:.73rem}
.house-grid{
grid-template-columns:1fr}
.house-grid .experience-card{
min-height:320px}
.house-grid .experience-card h3{
font-size:2.5rem}
.site-dialog{
width:100%;
max-height:92dvh;
inset:auto 0 0;
margin:0;
border-radius:18px 18px 0 0;
border-bottom:0}
.dialog-shell{
padding:29px 23px calc(30px + env(safe-area-inset-bottom))}
.dialog-close{
top:12px;
margin:-16px -10px 0 10px}
.dialog-cover{
width:calc(100% + 46px);
height:215px;
margin:-29px -23px 23px}
.site-dialog h2{
font-size:2.3rem}
.dialog-facts{
gap:17px}
.dialog-actions{
flex-direction:column;
gap:10px}
.dialog-actions .button{
width:100%}
.dialog-facts dd{
font-size:.84rem}
.field-row{
gap:12px}
.membership-plan{
padding:18px}
.search-field label{
display:none}
.empty-state{
padding:35px 20px}
.empty-state h3{
font-size:1.8rem}
}
@media(max-width:365px){
.hero h1{
font-size:2.95rem}
.experience-grid{
grid-template-columns:1fr}
.experience-card{
min-height:310px}
.experience-card h3{
font-size:2.4rem}
.experience-card span{
font-size:.87rem}
.brand>span{
display:none}
.hero-eyebrow{
font-size:.51rem}
.menu-tabs{
gap:16px}
.menu-tabs a{
font-size:.9rem}
.mobile-dock a,.mobile-dock button{
font-size:.69rem}
.field-row{
grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
.reveal.ready,.reveal.visible{
transform:none;
opacity:1;
transition:opacity 150ms var(--ease-out)}
.hero-image,.button,.icon-button,.chip{
transition:opacity 150ms var(--ease-out)}
.button:active,.icon-button:active,.chip:active,.experience-card:hover>img,.event-card:hover img,.film-card:hover img{
transform:none}
.experience-card>img,.event-card-media>img{
transition:none}
}
@media(prefers-reduced-transparency:reduce){
.site-header.scrolled,.inner-route .site-header,.mobile-dock,.menu-controls{
background:#471414;
backdrop-filter:none}
.site-dialog::backdrop{
backdrop-filter:none;
background:#080408e8}
}
@media(prefers-contrast:more){
:root{
--muted:#e7ddd1;
--line:#ae967b}
.site-header,.mobile-dock,.menu-controls{
background:#471414}
.hero-shade{
background:#471414b8}
}
/* Final mobile reading pass and user-controlled media. */
.hero-location>p{
font-size:.64rem;
letter-spacing:.15em;
line-height:1.8;
color:var(--gold)}
.hero-location>p span{
display:block;
font-size:.62rem;
color:var(--muted);
letter-spacing:.09em}
.watch-film{
background:none;
border:0;
border-bottom:1px solid var(--line);
padding:7px 0;
min-height:38px;
font-size:.74rem;
margin-top:9px;
color:var(--paper)}
.watch-film span{
margin-left:17px;
color:var(--gold)}
.house-film{
width:100%;
max-height:60dvh;
background:#471414;
border-radius:5px}
@media(max-width:600px){
.hero-location>p{
display:none}
.hero-location{
position:absolute;
bottom:68px;
right:0}
.watch-film{
font-size:.65rem;
min-height:38px;
margin:0;
color:var(--muted)}
.watch-film span{
margin-left:7px}
.dining-hero img{
display:none}
.dining-hero h1{
font-size:2.7rem}
.dining-hero .lead{
font-size:.94rem}
[data-page=events] .page-intro h1{
font-size:2.65rem}
[data-page=events] .page-intro .lead{
font-size:.94rem}
[data-page=events] .page-intro{
margin-bottom:22px}
}
@media(max-width:600px){
.hero-eyebrow{
font-size:.625rem;
letter-spacing:.095em}
.experience-card .eyebrow,.agenda-event .eyebrow{
font-size:.625rem}
.scene-controls button{
font-size:.72rem}
.agenda-event .event-meta{
font-size:.81rem}
.status-label{
font-size:.73rem}
.mobile-dock a,.mobile-dock button{
font-size:.8rem}
}

/* The close control stays visible without taking space from cover imagery. */
.dialog-close-wrap { position: sticky; top: 30px; height: 0; z-index: 4; }
.dialog-close { position: absolute; float: none; top: -24px; right: -24px; margin: 0; }
@media (max-width: 600px) {
.site-dialog { max-width: 100%; }
.dialog-close { top: -15px; right: -10px; }
.dialog-cover { height: 180px; }
}
/* Anchor offsets account for the document's existing 104px scroll padding. */
.menu-browser { scroll-margin-top: 0; }
.menu-category { scroll-margin-top: 170px; }
@media (max-width: 600px) { .menu-category { scroll-margin-top: 175px; } }