/* ============================================================
   OAK & EMBER — design tokens
   Single-theme by intent: the room is dark, the fire is the light.
   Every color is painted explicitly so the page holds on any host.
   ============================================================ */
:root{
  color-scheme: dark;

  /* ground + surfaces: warm-biased neutrals, never pure grey */
  --ink:      #0C0A08;
  --ground:   #151110;
  --surface:  #1C1715;
  --surface-2:#241D19;
  --line:     #362C25;
  --line-soft:#271F1B;

  /* fire */
  --ember:     #D4552A;
  --ember-lit: #EC7C4A;
  --ember-dim: #8A3418;
  --gold:      #C49241;
  --sage:      #8A9779;

  /* type */
  --cream: #F3EADC;
  --warm:  #DCCDB8;
  --muted: #9C8E7E;
  --dim:   #6F6254;

  /* 8-point spacing grid */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:64px; --s8:80px; --s9:104px; --s10:136px;

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 68px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* toggled panels: this must outrank the display rules on .drawer, .dishes, .form, .confirm */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--warm);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.65;
  font-weight:400;
  letter-spacing:.002em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--cream);
  font-weight:400;
  font-variation-settings:"SOFT" 30, "WONK" 1;
  text-wrap:balance;
  margin:0;
  line-height:1.08;
  letter-spacing:-.015em;
}
p{ margin:0; }
a{ color:inherit; }

::selection{ background:var(--ember); color:#fff; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ember-lit);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- layout primitives ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(64px,9vw,136px); scroll-margin-top:calc(var(--nav-h) + 8px); }
.section--tight{ padding-block:clamp(56px,7vw,96px); }

.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember);
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 var(--s3);
}
.eyebrow::before{
  content:"";
  width:28px; height:1px; flex:none;
  background:linear-gradient(90deg,var(--ember-dim),var(--ember));
}
.eyebrow--center{ justify-content:center; }

.lede{ font-size:clamp(17px,1.1vw + 14px,21px); line-height:1.6; color:var(--warm); }
.body-dim{ color:var(--muted); }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--cream);
  --btn-bd:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:14px 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:1px;
  text-decoration:none;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--ember{ --btn-bg:var(--ember); --btn-fg:#fff; --btn-bd:var(--ember); box-shadow:0 10px 30px -14px rgba(212,85,42,.9); }
.btn--ember:hover{ --btn-bg:var(--ember-lit); --btn-bd:var(--ember-lit); }
.btn--ghost:hover{ --btn-bd:var(--warm); }
.btn--sm{ padding:11px 18px; font-size:11px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(12,10,8,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line-soft); background:rgba(12,10,8,.93); }
.nav__inner{
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s3);
}
.mark{
  font-family:var(--serif);
  font-size:19px; font-weight:500;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  letter-spacing:.06em;
  color:var(--cream);
  text-decoration:none;
  white-space:nowrap;
  margin-right:auto;
}
.mark em{ font-style:normal; color:var(--ember); padding-inline:2px; }
.mark span{ display:block; font-family:var(--sans); font-size:8.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--dim); margin-top:2px; }

.nav__links{ display:flex; align-items:center; gap:var(--s4); list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--warm); text-decoration:none; position:relative; padding-block:6px;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__cta{ flex:none; }

.burger{
  display:none;
  width:44px; height:44px; flex:none;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:1px; cursor:pointer;
}
.burger i{ display:block; width:18px; height:1px; background:var(--cream); position:relative; transition:background .2s; }
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:var(--cream);
  transition:transform .35s var(--ease);
}
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
.burger[aria-expanded="true"] i{ background:transparent; }
.burger[aria-expanded="true"] i::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i::after{ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--nav-h) 0 0; z-index:55;
  background:var(--ink);
  padding:var(--s5) var(--gutter) var(--s6);
  display:flex; flex-direction:column; gap:var(--s2);
  overflow-y:auto;
}
.drawer a{
  font-family:var(--serif); font-size:28px; color:var(--cream);
  text-decoration:none; padding-block:10px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.drawer a small{ font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.drawer .btn{ margin-top:var(--s3); }

@media (max-width:920px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .nav__cta{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  isolation:isolate;
  background:var(--ink);
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero__glow{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 78% at 78% 108%, rgba(212,85,42,.34) 0%, rgba(212,85,42,.10) 34%, transparent 66%),
    radial-gradient(90% 60% at 10% 0%, rgba(196,146,65,.10) 0%, transparent 60%),
    linear-gradient(180deg,#0B0907 0%, #171210 52%, #0E0B09 100%);
}
/* film grain — keeps the large dark field from banding */
.hero__grain{
  position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.22'/></svg>");
  mix-blend-mode:overlay;
}
#embers{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

.hero__inner{
  padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,104px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero h1{
  font-size:clamp(46px,8.4vw,104px);
  line-height:.94;
  letter-spacing:-.03em;
  font-variation-settings:"SOFT" 22,"WONK" 1;
  margin-bottom:var(--s3);
}
.hero h1 i{
  font-style:italic;
  color:var(--ember-lit);
  font-variation-settings:"SOFT" 60,"WONK" 1;
}
.hero__sub{ max-width:46ch; color:var(--warm); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s5); }

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px 9px 12px;
  border:1px solid var(--line);
  border-radius:100px;
  background:rgba(28,23,21,.6);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--warm);
  margin-bottom:var(--s4);
}
.badge b{ color:var(--cream); font-weight:600; }
.pulse{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--ember-lit);
  box-shadow:0 0 0 0 rgba(236,124,74,.6);
  animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(236,124,74,.55); }
  70%{ box-shadow:0 0 0 9px rgba(236,124,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(236,124,74,0); }
}

/* the hero's right column: the hearth log, a real operational readout */
.hearth{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(36,29,25,.82), rgba(20,16,14,.82));
  padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
}
.hearth__title{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  display:flex; justify-content:space-between; gap:12px;
}
.hearth__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:12px; border-bottom:1px solid var(--line-soft);
}
.hearth__row:last-of-type{ border-bottom:0; padding-bottom:0; }
.hearth__row dt{ font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
.hearth__row dd{
  margin:0; font-family:var(--serif); font-size:20px; color:var(--cream);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hearth__row dd small{ font-family:var(--sans); font-size:11px; color:var(--muted); letter-spacing:.06em; }
.hearth__note{ font-size:12.5px; line-height:1.55; color:var(--muted); border-top:1px solid var(--line-soft); padding-top:var(--s3); }

@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; align-items:start; }
  .hearth{ padding:var(--s3); }
}
@media (max-width:520px){
  .hero__actions{ display:grid; grid-template-columns:1fr; gap:10px; }
  .hero__actions .btn{ width:100%; }
}

/* ============================================================
   STORY
   ============================================================ */
.story{ background:var(--ground); }
.story__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.story__col--text{ padding-top:clamp(0px,2vw,32px); }
.story h2{ font-size:clamp(32px,3.6vw,50px); margin-bottom:var(--s3); }
.story p + p{ margin-top:var(--s3); }
.pull{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,1.6vw,26px); line-height:1.4; color:var(--cream);
  border-left:1px solid var(--ember);
  padding-left:var(--s3);
  margin-block:var(--s4);
}
.signature{
  display:flex; align-items:center; gap:14px; margin-top:var(--s4);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.signature strong{ color:var(--cream); font-weight:600; }
.signature::before{ content:""; width:36px; height:1px; background:var(--line); flex:none; }

/* asymmetric image stack */
.stack{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s2); }
.stack .plate:nth-child(1){ grid-column:1 / 5; aspect-ratio:4/5; }
.stack .plate:nth-child(2){ grid-column:5 / 7; aspect-ratio:3/4; align-self:end; }
.stack .plate:nth-child(3){ grid-column:2 / 7; aspect-ratio:16/9; }

/* image placeholder: a real brief, legibly labelled */
.plate{
  position:relative;
  border:1px solid var(--line);
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(196,146,65,.10), transparent 60%),
    repeating-linear-gradient(101deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #241D19, #16110F 70%);
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.plate::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(70% 55% at 75% 95%, rgba(212,85,42,.16), transparent 70%);
}
.plate figcaption{
  position:relative;
  padding:var(--s2);
  font-size:10.5px; line-height:1.5; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim);
}
.plate figcaption b{ display:block; color:var(--muted); font-weight:600; letter-spacing:.2em; margin-bottom:4px; }

@media (max-width:860px){
  .story__grid{ grid-template-columns:1fr; }
  .stack .plate:nth-child(1){ grid-column:1 / 5; }
  .stack .plate:nth-child(2){ grid-column:5 / 7; }
  .stack .plate:nth-child(3){ grid-column:1 / 7; }
}

/* ============================================================
   MENU
   ============================================================ */
.menu{ background:var(--ink); border-block:1px solid var(--line-soft); }
.menu__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5);
}
.menu__head h2{ font-size:clamp(32px,3.6vw,50px); }
.menu__head p{ max-width:38ch; font-size:14px; color:var(--muted); }

.tabs{
  display:flex; gap:4px;
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s6);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:none;
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  padding:14px 18px;
  position:relative;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.tab:hover{ color:var(--warm); }
.tab::after{
  content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px;
  background:var(--ember); transform:scaleX(0); transform-origin:center;
  transition:transform .4s var(--ease);
}
.tab[aria-selected="true"]{ color:var(--cream); }
.tab[aria-selected="true"]::after{ transform:scaleX(1); }
.tab small{ font-size:9.5px; color:var(--dim); margin-left:8px; vertical-align:2px; }

.dishes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:var(--s5) clamp(32px,6vw,88px);
}
.dish{ display:flex; flex-direction:column; gap:8px; }
.dish__head{ display:flex; align-items:baseline; gap:10px; }
.dish__name{
  font-family:var(--serif); font-size:20px; color:var(--cream);
  font-variation-settings:"SOFT" 40,"WONK" 1; line-height:1.2;
}
.dish__lead{ flex:1 1 auto; border-bottom:1px dotted var(--line); transform:translateY(-5px); min-width:16px; }
.dish__price{
  font-family:var(--serif); font-size:18px; color:var(--gold);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dish__desc{ font-size:14.5px; line-height:1.6; color:var(--muted); max-width:46ch; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.tag{
  font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 8px; border-radius:100px;
  border:1px solid rgba(138,151,121,.4); color:var(--sage);
}
.tag--fire{ border-color:rgba(212,85,42,.45); color:var(--ember-lit); }
.tag--table{ border-color:rgba(196,146,65,.4); color:var(--gold); }

.menu__foot{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); align-items:center;
  font-size:12px; letter-spacing:.06em; color:var(--dim);
}
.legend{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.legend span b{ color:var(--sage); font-weight:600; }

/* signature dishes */
.signatures{ background:var(--ground); }
.sig-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);
  align-items:start;
}
.sig{ display:flex; flex-direction:column; gap:var(--s2); }
.sig:nth-child(2){ margin-top:var(--s6); }
.sig:nth-child(3){ margin-top:calc(var(--s6) * 2); }
.sig .plate{ aspect-ratio:4/5; }
.sig h3{ font-size:23px; font-variation-settings:"SOFT" 45,"WONK" 1; }
.sig p{ font-size:14px; color:var(--muted); }
.sig .meta{
  display:flex; gap:12px; align-items:baseline;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.sig .meta b{ color:var(--gold); font-family:var(--serif); font-size:16px; letter-spacing:0; text-transform:none; }
@media (max-width:860px){
  .sig-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .sig:nth-child(2),.sig:nth-child(3){ margin-top:0; }
}

/* ============================================================
   RESERVATIONS
   ============================================================ */
.reserve{
  background:
    radial-gradient(90% 60% at 88% 4%, rgba(212,85,42,.14), transparent 60%),
    var(--ink);
  border-block:1px solid var(--line-soft);
}
.reserve__grid{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
.reserve h2{ font-size:clamp(32px,3.6vw,50px); margin-bottom:var(--s3); }
.reserve__facts{ list-style:none; margin:var(--s5) 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.reserve__facts li{
  display:flex; gap:14px; align-items:baseline;
  font-size:14px; color:var(--muted);
  padding-bottom:14px; border-bottom:1px solid var(--line-soft);
}
.reserve__facts li:last-child{ border-bottom:0; padding-bottom:0; }
.reserve__facts b{ color:var(--warm); font-weight:600; flex:none; width:96px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

.form{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(36,29,25,.7), rgba(20,16,14,.7));
  padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; gap:var(--s4);
}
.field{ display:flex; flex-direction:column; gap:10px; }
.field > label,.fieldset__legend{
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }

input[type="text"],input[type="email"],input[type="tel"],input[type="date"],select,textarea{
  font-family:var(--sans); font-size:15px; color:var(--cream);
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:1px;
  padding:13px 14px;
  width:100%;
  transition:border-color .3s var(--ease);
}
textarea{ resize:vertical; min-height:88px; line-height:1.55; }
input:hover,select:hover,textarea:hover{ border-color:var(--dim); }
input:focus,select:focus,textarea:focus{ border-color:var(--ember); }
select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239C8E7E' stroke-width='1.3'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.7) sepia(.3); cursor:pointer; }

fieldset{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  appearance:none; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--warm);
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:1px;
  padding:10px 14px;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.chip:hover{ border-color:var(--dim); color:var(--cream); }
.chip[aria-pressed="true"]{ background:var(--ember); border-color:var(--ember); color:#fff; }
.chip[disabled]{ opacity:.32; cursor:not-allowed; text-decoration:line-through; }
.chip[disabled]:hover{ border-color:var(--line); color:var(--warm); }

.form__foot{ display:flex; flex-direction:column; gap:14px; }
.form__note{ font-size:12px; line-height:1.55; color:var(--dim); }
.form__err{ font-size:12.5px; color:var(--ember-lit); }

/* confirmation state */
.confirm{
  border:1px solid var(--ember-dim);
  background:linear-gradient(180deg, rgba(60,26,13,.5), rgba(20,16,14,.85));
  padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column; gap:var(--s3);
}
.confirm h3{ font-size:28px; }
.confirm dl{ margin:0; display:flex; flex-direction:column; gap:12px; }
.confirm .crow{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.07);
}
.confirm .crow:last-child{ border-bottom:0; padding-bottom:0; }
.confirm dt{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.confirm dd{ margin:0; font-family:var(--serif); font-size:19px; color:var(--cream); text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width:860px){
  .reserve__grid{ grid-template-columns:1fr; }
  .row{ grid-template-columns:1fr; }
}

/* ============================================================
   PRESS
   ============================================================ */
.press{ background:var(--ground); }
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.quote{
  border-top:1px solid var(--line);
  padding-top:var(--s3);
  display:flex; flex-direction:column; gap:var(--s3);
}
.quote blockquote{
  margin:0;
  font-family:var(--serif); font-size:clamp(19px,1.4vw,22px); line-height:1.38;
  color:var(--cream);
  font-variation-settings:"SOFT" 35,"WONK" 1;
}
.quote blockquote::before{ content:"\201C"; color:var(--ember); }
.quote blockquote::after{ content:"\201D"; color:var(--ember); }
.quote figcaption{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:auto; }
.quote figcaption b{ display:block; color:var(--warm); font-weight:600; margin-bottom:3px; }
.stars{ color:var(--gold); letter-spacing:.3em; font-size:12px; }
@media (max-width:860px){ .quotes{ grid-template-columns:1fr; gap:var(--s5); } }

/* ============================================================
   PRIVATE EVENTS
   ============================================================ */
.events{ background:var(--ink); border-block:1px solid var(--line-soft); }
.events__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s6); }
.room{
  border:1px solid var(--line);
  padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s2);
  background:linear-gradient(180deg, rgba(36,29,25,.5), transparent);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.room:hover{ border-color:var(--ember-dim); transform:translateY(-3px); }
.room h3{ font-size:24px; }
.room p{ font-size:14px; color:var(--muted); }
.room dl{ margin:auto 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; padding-top:var(--s3); border-top:1px solid var(--line-soft); }
.room dt{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); align-self:center; }
.room dd{ margin:0; font-family:var(--serif); font-size:17px; color:var(--cream); text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:860px){ .events__grid{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER / CONTACT
   ============================================================ */
.footer{ background:var(--ground); padding-top:clamp(56px,7vw,104px); }
.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.3fr);
  gap:clamp(28px,4vw,64px);
  padding-bottom:var(--s7);
}
.footer h3{ font-size:13px; font-family:var(--sans); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3); }
.footer address{ font-style:normal; font-size:15px; line-height:1.75; color:var(--warm); }
.footer a{ color:var(--warm); text-decoration:none; border-bottom:1px solid transparent; transition:color .3s,border-color .3s; }
.footer a:hover{ color:var(--ember-lit); border-bottom-color:var(--ember-dim); }
.hours{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hours li{ display:flex; justify-content:space-between; gap:16px; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.hours li b{ color:var(--warm); font-weight:500; }
.hours li.closed{ color:var(--dim); }

.map{
  position:relative;
  aspect-ratio:16/10;
  border:1px solid var(--line);
  overflow:hidden;
  background:
    linear-gradient(0deg, rgba(212,85,42,.06), rgba(212,85,42,.06)),
    repeating-linear-gradient(0deg, rgba(243,234,220,.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(243,234,220,.055) 0 1px, transparent 1px 34px),
    linear-gradient(140deg,#1B1614,#100D0B);
  display:grid; place-items:center;
}
.map::before{
  content:""; position:absolute; left:0; right:0; top:44%; height:10px;
  background:rgba(243,234,220,.05); transform:rotate(-7deg);
}
.map__pin{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  text-align:center;
}
.map__pin i{
  width:12px; height:12px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 0 6px rgba(212,85,42,.18), 0 0 0 14px rgba(212,85,42,.08);
}

.socials{ display:flex; gap:var(--s3); margin-top:var(--s4); flex-wrap:wrap; }
.socials a{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

.colophon{
  border-top:1px solid var(--line-soft);
  padding-block:var(--s3) var(--s5);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between;
  font-size:11.5px; letter-spacing:.06em; color:var(--dim);
}
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr; } }

/* ============================================================
   SCROLL REVEAL — below-the-fold only, and only when JS is on.
   Resting state is visible; the class is added by script.
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .reveal.is-in{ opacity:1; transform:none; transition:none; }
  .pulse{ animation:none; }
  .btn:hover,.room:hover{ transform:none; }
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ember); color:#fff; padding:12px 18px; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:12px; top:12px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
