:root{
  /* neutral foundation — alpha black over white, no tinted grays */
  --canvas:#FFFFFF;
  --ink:#000000;
  --ink-2:rgb(0 0 0 / 64%);   /* supporting text */
  --ink-3:rgb(0 0 0 / 56%);   /* labels and metadata that still get read */
  --line:rgb(0 0 0 / 10%);
  --line-strong:rgb(0 0 0 / 18%);
  --fill:rgb(0 0 0 / 4%);     /* section rhythm + media placeholder */
  --hover:rgb(0 0 0 / 5%);
  --press:rgb(0 0 0 / 9%);
  --radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Assistant',system-ui,sans-serif;
  background:var(--canvas); color:var(--ink);
  font-size:16px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; text-align:start;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}

.container{max-width:1120px;margin-inline:auto;padding-inline:clamp(24px,5vw,64px)}
.container-narrow{max-width:720px;margin-inline:auto;padding-inline:clamp(24px,5vw,64px)}

/* ---------- type ---------- */
h1{
  font-size:clamp(30px,4.6vw,46px); font-weight:600;
  line-height:1.08; letter-spacing:-.01em; text-wrap:balance;
}
h1 .cont{color:var(--ink-2)}
h2{font-size:15px;font-weight:500;line-height:1.4;color:var(--ink-3)}
h3{font-size:17px;font-weight:600;line-height:1.35}
.eyebrow{font-size:13px;font-weight:500;color:var(--ink-3)}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.meta{font-size:14px;color:var(--ink-3)}
p + p{margin-top:14px}

/* ---------- seasonal strip ---------- */
.holiday{padding-block:clamp(28px,4.5vw,48px)}
.holiday .eyebrow{margin-bottom:8px}
.holiday-title{
  font-size:clamp(22px,3vw,30px);font-weight:600;line-height:1.15;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:10px;
}
.holiday-lead{margin-bottom:20px;max-width:48ch}

/* ---------- chapter 1 · hero ---------- */
.hero{padding-block:clamp(44px,7vw,88px) clamp(44px,6vw,72px)}
.hero .container{
  display:grid;gap:clamp(32px,5vw,64px);align-items:center;
  grid-template-columns:1fr;
}
.mark{width:150px;height:auto;margin-bottom:28px}
.hero .eyebrow{margin-bottom:12px}
.hero h1{margin-bottom:16px}
.hero .lead{margin-bottom:32px}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding-inline:24px;border-radius:var(--radius);
  font-size:16px;font-weight:500;text-decoration:none;
  border:1px solid transparent;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-quiet{border-color:var(--line-strong);color:var(--ink)}

figure{background:var(--fill);border-radius:var(--radius);overflow:hidden}
figure img{width:100%;height:100%;object-fit:cover}
.hero-media{aspect-ratio:4/5}
.hero-media img{object-position:50% 60%}

/* ---------- chapter 2 · one media composition ---------- */
.gallery{padding-bottom:clamp(52px,8vw,96px)}
.gallery .container{display:grid;gap:12px;grid-template-columns:1fr}
.g-wide{aspect-ratio:16/10}
.g-tall{aspect-ratio:16/10}
.g-tall img{object-position:50% 72%}

/* ---------- prose bands ---------- */
.band{padding-block:clamp(44px,7vw,80px)}
.band-fill{background:var(--fill)}
.band + .band{padding-top:0}
.band-fill + .band{padding-top:clamp(44px,7vw,80px)}
.band h2{margin-bottom:20px}
.prose{max-width:62ch;color:var(--ink-2);font-size:17px}
.prose strong{color:var(--ink);font-weight:600}
.prose h3{color:var(--ink);margin-top:28px;margin-bottom:8px}

/* ---------- menu ---------- */
.menu-grid{display:grid;gap:clamp(32px,4vw,44px);grid-template-columns:1fr}
.menu-section h3{
  font-size:13px;font-weight:600;color:var(--ink-3);
  padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line-strong);
}
.menu-list{list-style:none}
.menu-list li{padding-block:11px;border-bottom:1px solid var(--line)}
.menu-list li:last-child{border-bottom:0}
.menu-row{display:flex;gap:16px;align-items:baseline;justify-content:space-between}
.menu-name{font-weight:500}
.menu-size{
  color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums;
  font-size:15px;
}
.menu-desc{font-size:14px;color:var(--ink-3);margin-top:2px;text-wrap:pretty}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;max-width:74ch}
.faq-item{padding-block:20px;border-bottom:1px solid var(--line)}
.faq-item:first-child{padding-top:0}
.faq-item h3{margin-bottom:6px}
.faq-item p{color:var(--ink-2)}

/* ---------- chapter 3 · visit ---------- */
.visit{background:var(--fill);padding-block:clamp(44px,7vw,80px)}
.visit .container{display:grid;gap:clamp(40px,4vw,48px);grid-template-columns:1fr;align-items:start}
.visit h2{margin-bottom:16px}

.hours{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;font-size:16px}
.hours dt{font-weight:500}
.hours dd{color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.01em}

.address{font-size:17px;line-height:1.5;margin-bottom:4px}
.visit h2 + .inline-links{margin-top:-12px}
.inline-links{display:flex;flex-wrap:wrap;gap:0 24px}

.link{
  display:inline-block;padding-block:12px;min-width:44px;font-weight:500;
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-underline-offset:4px;text-decoration-thickness:1px;
  transition:text-decoration-color .16s ease;
}
.prose .link,.faq-item .link{padding-block:0;display:inline}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:clamp(32px,4vw,44px)}
.foot-brand{font-weight:500}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 24px;margin-block:4px 8px}

/* ---------- states ---------- */
a:focus-visible,.btn:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:rgb(0 0 0 / 82%)}
  .btn-quiet:hover{background:var(--hover)}
  .link:hover{text-decoration-color:var(--ink)}
}
.btn-primary:active{background:rgb(0 0 0 / 74%)}
.btn-quiet:active{background:var(--press)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- desktop composition ---------- */
@media (min-width:860px){
  .hero .container{grid-template-columns:1fr 1.15fr}
  .hero-media{aspect-ratio:4/5;max-height:640px}
  .gallery .container{grid-template-columns:1.85fr 1fr;gap:16px}
  .g-wide{aspect-ratio:auto;height:440px}
  .g-tall{aspect-ratio:auto;height:440px}
  .visit .container{grid-template-columns:repeat(3,1fr)}
  .menu-grid{grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,72px)}
}