/* BANOFFEE — FANCY
 * A printed bill of fare. Ivory paper, engraved rules, a high-contrast serif.
 * Brand yellow is a marker, never a text surface: at 4.5:1 it only works as a
 * highlight behind dark ink, so that is the only place it appears.
 */

:root{
  --paper:#F7F3EA;
  --paper-2:#EFE7D8;
  --ink:#221F1A;
  --ink-soft:#5E574B;
  --rule:#C9BFA9;
  --rule-soft:#DED5C1;
  --gold:#9C7C2A;
  --sage:#7E9E99;      /* the banquettes */
  --cobalt:#1E4E8C;    /* the plates */
  --yellow:#F4E214;

  --gut:clamp(20px,5vw,80px);
  --maxw:1280px;
  --f-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --f-ui:"Jost","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:17px;line-height:1.65;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(rgba(156,124,42,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;font-family:var(--f-disp)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.skip{position:absolute;left:-999px;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:12px 26px;text-decoration:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .25s ease,color .25s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--quiet:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ──────────────────────────────────────────────────────────── MASTHEAD */
.masthead{padding:0 var(--gut);background:var(--paper);position:relative;z-index:5}
.masthead__rule{height:3px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:14px}
.masthead__rule--thin{height:0;border-bottom:0}
.masthead__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0 8px}
.masthead__side{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.masthead__name{
  font-family:var(--f-disp);font-size:clamp(1.9rem,5.4vw,3.4rem);letter-spacing:.06em;
  text-decoration:none;font-weight:500;font-variation-settings:"opsz" 120;
}
.masthead__name sup{font-size:.28em;top:-1.1em}
.masthead__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:10px 0 14px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.masthead__nav a{text-decoration:none;color:var(--ink-soft);padding:6px 2px;transition:color .2s ease}
.masthead__nav a:hover{color:var(--ink)}
.masthead__nav i{color:var(--rule);font-style:normal}
@media(max-width:640px){ .masthead__side{display:none} .masthead__row{justify-content:center} }

/* ──────────────────────────────────────────────────────────── OVERTURE */
.overture{max-width:var(--maxw);margin-inline:auto;padding:clamp(46px,8vw,110px) var(--gut) clamp(30px,5vw,56px);text-align:center}
.orn{margin:0 0 18px;color:var(--gold);font-size:16px;letter-spacing:.5em}
.overture h1{font-size:clamp(2.5rem,8vw,6.4rem);line-height:1.02;letter-spacing:-.02em;font-variation-settings:"opsz" 144;font-weight:400}
.overture h1 span{display:block}
.overture h1 em{font-style:italic;font-weight:300;
  background:linear-gradient(transparent 68%,var(--yellow) 68%,var(--yellow) 92%,transparent 92%)}
.overture__lede{max-width:56ch;margin:28px auto 0;color:var(--ink-soft);font-size:clamp(1rem,1.6vw,1.2rem)}
.overture__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 30px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.overture__meta i{color:var(--rule);font-style:normal}
.overture__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ─────────────────────────────────────────────────────── HERO PLATE */
.plate-hero{margin:0 auto clamp(56px,9vw,120px);padding:0 var(--gut);max-width:var(--maxw)}
.plate-hero__frame{border:1px solid var(--rule);padding:10px;background:var(--paper-2);overflow:hidden}
.plate-hero__frame img{width:100%;aspect-ratio:21/9;object-fit:cover}
.plate-hero figcaption{margin-top:12px;text-align:center;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:700px){ .plate-hero__frame img{aspect-ratio:4/3} }

/* ───────────────────────────────────────────────────── SECTION TITLES */
.sec-title{display:flex;align-items:center;gap:20px;margin:0 0 clamp(28px,4vw,52px);
  font-size:clamp(1.3rem,2.6vw,2rem);font-style:italic;font-weight:400;white-space:nowrap}
.sec-title::after{content:"";flex:1;height:1px;background:var(--rule);transform-origin:left}
.sec-title span{color:var(--ink)}

/* ─────────────────────────────────────────────────────────────── HOUSE */
.house{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vw,110px)}
.house__grid{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(28px,5vw,74px)}
.house__lede p{margin:0 0 1.1em;font-size:clamp(1rem,1.4vw,1.12rem);color:var(--ink-soft);max-width:60ch}
.house__lede p:first-child{
  font-family:var(--f-disp);font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.32;color:var(--ink);font-weight:400;
}
.house__lede p:first-child::first-letter{
  float:left;font-size:3.4em;line-height:.82;padding:.06em .1em 0 0;color:var(--gold);font-weight:500;
}
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ledger li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule-soft);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.ledger b{font-family:var(--f-disp);font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}
@media(max-width:820px){ .house__grid{grid-template-columns:1fr} }

/* ───────────────────────────────────────────────────────────── COURSES */
.courses{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vw,110px)}
.courses__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.course{padding:clamp(22px,3vw,38px) clamp(16px,2.4vw,32px);border-right:1px solid var(--rule-soft)}
.course:last-child{border-right:0}
.course__t{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.course h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-style:italic;margin-bottom:6px}
.course__hrs{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px}
.course ul{list-style:none;margin:0;padding:0}
.course li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dotted var(--rule);font-size:.95rem}
.course li b{font-weight:400}
.course li span{color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:820px){ .courses__grid{grid-template-columns:1fr}
  .course{border-right:0;border-bottom:1px solid var(--rule-soft)} }

/* ──────────────────────────────────────────────────────────────── FARE */
.fare{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vw,110px)}
.fare__wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start}
.fare__index{position:sticky;top:18px}
.fare__index-h{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.fare__index ol{list-style:none;margin:0 0 26px;padding:0;counter-reset:idx;border-top:1px solid var(--ink)}
.fare__index li{counter-increment:idx;border-bottom:1px solid var(--rule-soft)}
.fare__index button{
  width:100%;display:flex;gap:10px;align-items:baseline;text-align:left;
  background:none;border:0;font:inherit;font-size:.95rem;color:var(--ink-soft);
  padding:11px 0;min-height:44px;cursor:pointer;transition:color .2s ease;
}
.fare__index button::before{content:counter(idx,upper-roman) ".";font-size:10px;letter-spacing:.1em;color:var(--rule);min-width:24px}
.fare__index button:hover{color:var(--ink)}
.fare__index button[aria-current="true"]{color:var(--ink);font-weight:500}
.fare__index button[aria-current="true"]::before{color:var(--gold)}
.marks{border:1px solid var(--rule);padding:12px 14px;margin:0}
.marks legend{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);padding:0 6px}
.marks label{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft);cursor:pointer;min-height:36px}
.marks input{accent-color:var(--cobalt)}
.marks input:checked+span{color:var(--ink)}

.fare__panel[hidden]{display:none}
.fgroup{margin-bottom:clamp(28px,4vw,48px)}
.fgroup__h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.fgroup__h h3{font-size:clamp(1.25rem,2.2vw,1.75rem);font-style:italic}
.fgroup__note{font-size:.85rem;color:var(--ink-soft)}
.fgroup__rule{height:1px;background:var(--ink);margin:10px 0 16px}
.frow{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline;padding:11px 0}
.frow[hidden]{display:none}
.frow__l{display:flex;align-items:baseline;gap:8px;min-width:0}
.frow__n{font-size:1.05rem}
.frow__mark{font-size:9px;letter-spacing:.1em;border:1px solid;padding:1px 4px;line-height:1.5;flex:none;position:relative;top:-2px}
.m-veg{color:#3F7A4F;border-color:#3F7A4F}
.m-egg{color:#8A6A12;border-color:#8A6A12}
.m-nonveg{color:#A33A30;border-color:#A33A30}
.frow__dots{border-bottom:1px dotted var(--rule);flex:1;min-width:18px;transform:translateY(-4px)}
.frow__p{font-family:var(--f-disp);font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.frow__p em{font-style:normal;font-family:var(--f-ui);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-right:5px}
.frow__d{grid-column:1/-1;margin:0;color:var(--ink-soft);font-size:.9rem;max-width:68ch}
.fine{list-style:none;margin:34px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);
  color:var(--ink-soft);font-size:.82rem;display:grid;gap:4px}
@media(max-width:860px){ .fare__wrap{grid-template-columns:1fr} .fare__index{position:static} }

/* ────────────────────────────────────────────────────────────── PLATES */
.plates{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vw,110px)}
.plates__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:clamp(18px,2.6vw,30px)}
.plate{margin:0}
.plate__frame{border:1px solid var(--rule);padding:8px;background:var(--paper-2);overflow:hidden}
.plate__frame img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.plate:hover .plate__frame img{transform:scale(1.04)}
.plate figcaption{padding-top:12px}
.plate__n{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-family:var(--f-disp);font-size:1.15rem}
.plate__n span{font-size:.95rem;color:var(--gold)}
.plate__d{margin:4px 0 0;font-size:.88rem;color:var(--ink-soft)}

/* ──────────────────────────────────────────────────────────────── CARD */
.card-sec{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vw,110px)}
.callcard{border:1px solid var(--rule);padding:clamp(10px,1.4vw,16px);background:var(--paper-2)}
.callcard__inner{border:1px solid var(--gold);padding:clamp(28px,5vw,64px);text-align:center;background:var(--paper)}
.callcard__seal{margin:0 auto 18px;border-radius:50%;width:64px;height:64px}
.callcard__name{font-family:var(--f-disp);font-size:clamp(2rem,5vw,3.2rem);margin:0;letter-spacing:.05em}
.callcard__line{margin:6px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.callcard__rule{width:60px;height:1px;background:var(--gold);margin:22px auto}
.callcard__dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:0 0 28px;text-align:center}
.callcard__dl dt{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.callcard__dl dd{margin:0;font-size:1rem}
.callcard__dl a{text-decoration:none;border-bottom:1px solid var(--rule)}
.callcard__dl a:hover{border-color:var(--ink)}
.callcard__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.callcard__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;
  margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--rule-soft);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ───────────────────────────────────────────────────────────── COLOPHON */
.colophon{padding:0 var(--gut) clamp(34px,5vw,56px);text-align:center}
.colophon p{margin:18px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.colophon__fine{letter-spacing:.08em!important;text-transform:none!important}
.colophon a{text-decoration:none;border-bottom:1px solid var(--rule)}

/* ────────────────────────────────────────────── MULTI-PAGE FURNITURE */

@view-transition{navigation:auto}

.masthead__nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--gold)}

/* Inner-page head: same ornament as the front page, half the height. */
.pagehead{max-width:var(--maxw);margin-inline:auto;padding:clamp(38px,6vw,80px) var(--gut) clamp(26px,4vw,48px);text-align:center}
.pagehead h1{font-size:clamp(2.1rem,6.4vw,4.6rem);line-height:1.04;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.pagehead em{font-style:italic;font-weight:300;
  background:linear-gradient(transparent 68%,var(--yellow) 68%,var(--yellow) 92%,transparent 92%)}
.pagehead__s{max-width:56ch;margin:20px auto 0;color:var(--ink-soft)}

.after{margin:clamp(28px,4vw,48px) 0 0;text-align:center}
.arrow{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid var(--rule);
}
.arrow:hover{border-color:var(--ink)}
.arrow span{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.arrow:hover span{transform:translateX(5px)}

/* Front-page teaser into house.html */
.teaser{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vw,110px)}
.teaser__grid p{margin:0 0 1.1em;color:var(--ink-soft);max-width:62ch}
.teaser__grid p:first-child{
  font-family:var(--f-disp);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.32;color:var(--ink);font-weight:400
}

/* Room gallery on house.html */
.gallery{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vw,110px)}
.gallery__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px)}
.gframe{margin:0}
.gframe--wide{grid-column:1/-1}
.gframe--wide .plate__frame img{aspect-ratio:21/9}
.gframe .plate__frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gframe figcaption{margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:700px){ .gallery__grid{grid-template-columns:1fr} }

.pull{margin:clamp(34px,5vw,64px) auto 0;max-width:46ch;text-align:center;border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,40px)}
.pull p{font-family:var(--f-disp);font-style:italic;font-size:clamp(1.3rem,2.8vw,2.1rem);line-height:1.3;margin:0 0 12px}
.pull cite{font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

/* Full week on card.html */
.week{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(56px,9vw,110px)}
.week__list{list-style:none;margin:0;padding:0;max-width:640px;margin-inline:auto;border-top:1px solid var(--ink)}
.week__list li{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.week__list i{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-4px)}
.week__list b{font-family:var(--f-disp);font-weight:400;font-variant-numeric:tabular-nums}
.week__list em{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.week__list li.is-today{color:var(--ink)}

.colophon__nav{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;margin-top:20px}
.colophon__nav a{text-decoration:none;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.colophon__nav a:hover{color:var(--ink)}

/* ───────────────────────────────────────────────── MOTION + FALLBACK */
/* Elements are visible by default. Motion One only adds the .rise start
 * state once it has actually loaded, so a blocked CDN cannot hide content. */
.js-motion .rise{opacity:0;transform:translateY(18px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js-motion .rise{opacity:1;transform:none}
}