@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-wght.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  /* spacing scale: 4 8 16 24 40 64 104 */
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:104px;
  --bone:#f2ece1;--paper:#faf6ef;--ink:#1f1a16;--muted:#564b41;--rule:#cfc3b1;
  --claret:#7b2a1e;--claret-dk:#5e1f15;--brass:#e3c38f;--night:#1f1a16;--night-2:#2a231e;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{font-variant-numeric:lining-nums;margin:0;background:var(--bone);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;font-weight:400}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:500}
p{margin:0}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:var(--s3);top:-80px;min-height:44px;display:inline-flex;align-items:center;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s3);z-index:10}
.skip:focus{top:var(--s2)}
:focus-visible{outline:3px solid var(--claret);outline-offset:3px}

/* top bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s4);background:var(--bone);border-bottom:1px solid var(--rule)}
.wordmark{display:flex;flex-direction:column;text-decoration:none;min-height:44px;justify-content:center}
.wm-name{font-family:var(--display);font-weight:600;font-size:24px;line-height:1;letter-spacing:.01em}
.wm-sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:var(--s1)}
.bar-call{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:0 var(--s3);border:1px solid var(--ink);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.bar-call:hover{background:var(--ink);color:var(--paper)}

/* hero */
.hero{padding:var(--s6) var(--s4) var(--s5);max-width:var(--wrap);margin:0 auto}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(52px,14vw,124px);line-height:.95;letter-spacing:-.01em;max-width:11ch}
.hero-lede{margin-top:var(--s4);font-size:19px;line-height:1.5;max-width:34ch;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.btn{display:inline-flex;flex-wrap:wrap;column-gap:.4em;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:var(--s3) var(--s4);font-size:15px;font-weight:600;letter-spacing:.06em;text-decoration:none;border:1px solid var(--claret);transition:background-color .15s,color .15s}
.btn-solid{background:var(--claret);color:var(--paper)}
.btn-solid:hover{background:var(--ink);border-color:var(--ink)}
.btn-line{background:transparent;color:var(--claret)}
.btn-line:hover{background:var(--claret);color:var(--paper)}
.btn-block{display:flex;width:100%;margin-top:var(--s4)}
.hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--rule)}
.hero-facts dt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hero-facts dd{margin:var(--s2) 0 0;font-size:15px;line-height:1.5}

/* photo frames */
.frame{margin:0 auto;padding:0 var(--s4);max-width:var(--wrap)}
.frame-box{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:var(--s3);background:var(--paper);border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:-10px}
.frame-wide .frame-box{aspect-ratio:16/10}
.frame-tall{aspect-ratio:4/3}
.private .frame{width:100%}
.frame-box span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:var(--s2)}
.frame figcaption{margin-top:var(--s2);font-size:14px;color:var(--muted)}

/* menu */
.menu{max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--s4)}
.sec-head{margin-bottom:var(--s5)}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--claret)}
.eyebrow-light{color:var(--brass)}
h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,10vw,72px);line-height:1;margin-top:var(--s2)}
.menu-cols{display:grid;gap:var(--s5)}
.course h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding-bottom:var(--s2);border-bottom:2px solid var(--ink)}
.course .h3-gap{margin-top:var(--s5)}
.dishes{list-style:none;margin:0;padding:0}
.dishes li{padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.dish{display:flex;align-items:baseline;gap:var(--s2)}
.dname{font-variant-numeric:lining-nums;font-family:var(--display);font-weight:600;font-size:23px;line-height:1.2}
.lead{flex:1;border-bottom:1px dotted var(--muted);transform:translateY(-5px);min-width:var(--s4)}
.price{font-variant-numeric:tabular-nums lining-nums;font-weight:600;font-size:16px}
.desc{margin-top:var(--s1);font-size:15px;color:var(--muted);max-width:44ch}
.course-dark{background:var(--night);color:var(--bone);padding:var(--s4)}
.course-dark h3{border-color:var(--brass);color:var(--brass)}
.course-dark .dishes li{border-color:#4a3f36}
.course-dark .lead{border-color:#a89a88}
.menu-note{margin-top:var(--s5);font-size:14px;color:var(--muted);max-width:60ch}

/* the name */
.name{background:var(--night);color:var(--bone);padding:var(--s6) var(--s4)}
.name > *{max-width:760px;margin-left:auto;margin-right:auto}
.name h2{max-width:760px}
.name > p:not(.eyebrow){margin-top:var(--s4);font-size:18px;line-height:1.6;color:#e6dccb}
.name blockquote{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid #4a3f36}
.name blockquote p{font-family:var(--display);font-weight:500;font-size:clamp(30px,7.5vw,52px);line-height:1.1;color:var(--paper)}
.name blockquote footer{margin-top:var(--s3);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}

/* private */
.private{max-width:var(--wrap);margin:0 auto;padding:var(--s6) 0;display:grid;gap:var(--s5)}
.private-copy{padding:0 var(--s4)}
.private-copy .slot{margin:var(--s4) 0;font-size:16px;color:var(--muted);border:1px dashed var(--muted);padding:var(--s3)}

/* visit */
.visit{background:var(--paper);border-top:1px solid var(--rule);padding:var(--s6) var(--s4)}
.visit > h2{max-width:var(--wrap);margin:0 auto var(--s5)}
.visit-grid{max-width:var(--wrap);margin:0 auto;display:grid;gap:var(--s5)}
.visit h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--claret);margin-bottom:var(--s3)}
.visit p{font-size:17px}
.visit p + p{margin-top:var(--s2)}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.textlink:hover{color:var(--claret);text-decoration-thickness:2px}
.textlink.big{font-variant-numeric:lining-nums;font-family:var(--display);font-size:32px;font-weight:600;text-decoration-thickness:1px}
.hours{border-collapse:collapse;width:100%;font-size:16px}
.hours th,.hours td{text-align:left;padding:var(--s2) 0;border-bottom:1px solid var(--rule);font-weight:400;vertical-align:top}
.hours td{text-align:right;font-weight:600;white-space:nowrap;padding-left:var(--s3)}

/* footer */
.foot{background:var(--night);color:var(--bone);padding:var(--s5) var(--s4);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.foot-name{font-family:var(--display);font-size:22px;font-weight:600}
.foot-demo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#cbbfae}

@media (min-width:760px){
  .bar{padding:var(--s3) var(--s5)}
  .hero{padding:var(--s7) var(--s5) var(--s6);display:grid;grid-template-columns:1.4fr 1fr;column-gap:var(--s6);align-items:end}
  .hero h1{grid-column:1/-1}
  .hero-lede{grid-column:1}
  .actions{grid-column:1}
  .hero-facts{grid-column:2;grid-row:2/4;align-self:end;grid-template-columns:1fr;margin-top:0}
  .frame{padding:0 var(--s5)}
  .frame-wide .frame-box{aspect-ratio:21/8}
  .menu{padding:var(--s7) var(--s5)}
  .menu-cols{grid-template-columns:1fr 1fr;column-gap:var(--s6);row-gap:var(--s6)}
  .btn-block{display:inline-flex;width:auto}
  .name{padding:var(--s7) var(--s5)}
  .private{grid-template-columns:1fr 1fr;align-items:center;padding:var(--s7) 0}
  .private .frame{padding-right:0}
  .frame-tall{aspect-ratio:1/1}
  .private-copy{padding:0 var(--s5)}
  .visit{padding:var(--s7) var(--s5)}
  .visit-grid{grid-template-columns:1fr 1.2fr 1fr;column-gap:var(--s6)}
  .foot{padding:var(--s5)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
