:root{
  --xs:.78rem; --sm:.94rem; --base:1.08rem; --lg:1.35rem;
  --xl:2.1rem; --xxl:3.2rem; --xxxl:4.6rem;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;
  --s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;--s32:8rem;

  --burgundy:#8E1B1B; --burgundy-mid:#711616; --burgundy-deep:#4A0E0E;
  --burgundy-ink:#2A0B0B;
  --olive:#4E6023; --olive-deep:#33401A; --olive-pale:#E4E7D0;
  --gold:#B8862F; --gold-pale:#EFE0BE;
  --paper:#F4EFE2; --paper-2:#FBF8EF; --paper-3:#EAE1CB; --paper-4:#DED2B4;
  --rule:#CBBB97; --rule-soft:#DED2B4;
  --ink:#33190F; --ink-soft:#6E4432;
  --crust:#C98A45;

  --r-sm:2px; --r-md:3px; --r-lg:4px; --r-oval:50%;
  --ease:cubic-bezier(.19,1,.22,1);
  --sh-sm:0 1px 2px oklch(.25 .05 40/.10);
  --sh-md:0 6px 22px oklch(.25 .05 40/.13);
  --sh-lg:0 18px 52px oklch(.25 .05 40/.18);
  --wide:1240px; --mid:900px; --narrow:680px;
  --serif:'Bodoni Moda',Didot,'Bodoni MT',Georgia,serif;
  --body:'EB Garamond',Garamond,Georgia,serif;
  --script:'Italianno','Snell Roundhand',cursive;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--base);line-height:1.72;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-feature-settings:"liga","kern"}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.1;font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:var(--burgundy);text-decoration:none}
a:hover{color:var(--burgundy-deep)}
ul{list-style:none}

/* laid-paper grain, warmer and finer than a flat fill */
.grain{position:relative}
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(oklch(.42 .07 45/.05) .5px,transparent .5px),
    repeating-linear-gradient(93deg,oklch(.42 .07 45/.022) 0 1px,transparent 1px 4px);
  background-size:3px 3px,auto}

.wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--s10)}
.mid{max-width:var(--mid);margin:0 auto;padding-inline:var(--s10)}
.narrow{max-width:var(--narrow);margin:0 auto;padding-inline:var(--s8)}

/* ── small caps label, the house voice ── */
.caps{font-family:var(--serif);font-size:var(--xs);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase}

/* ── vertical spine rail (label-edge motif) ── */
.spine{position:absolute;top:0;bottom:0;width:52px;display:flex;
  align-items:center;justify-content:center}
.spine span{writing-mode:vertical-rl;font-family:var(--serif);font-size:.68rem;
  font-weight:600;letter-spacing:.44em;text-transform:uppercase;
  color:var(--burgundy);opacity:.42}
.spine-l{left:0}
.spine-r{right:0;transform:rotate(180deg)}

/* ── oval cartouche, echoing the logo's ring ── */
.oval{border-radius:50%/50%;border:2px solid var(--burgundy);position:relative}
.oval::before{content:'';position:absolute;inset:7px;border:1px solid var(--burgundy);
  opacity:.45;border-radius:50%/50%;pointer-events:none}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.9rem 2.3rem;font-family:var(--serif);font-size:var(--xs);
  font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  border-radius:var(--r-sm);transition:all 280ms var(--ease);cursor:pointer}
.btn-fill{background:var(--burgundy);color:var(--paper-2);border:1px solid var(--burgundy)}
.btn-fill:hover{background:var(--burgundy-deep);border-color:var(--burgundy-deep);
  color:var(--paper-2);letter-spacing:.32em}
.btn-line{background:transparent;color:var(--burgundy);border:1px solid var(--burgundy)}
.btn-line:hover{background:var(--burgundy);color:var(--paper-2);letter-spacing:.32em}
.btn-pale{background:transparent;color:var(--gold-pale);border:1px solid oklch(.85 .07 80/.5)}
.btn-pale:hover{background:var(--gold-pale);color:var(--burgundy-ink);letter-spacing:.32em}

/* ── section furniture ── */
.sec{padding-block:var(--s24);position:relative}
.kicker{display:flex;align-items:center;gap:var(--s4);justify-content:center;
  color:var(--burgundy);margin-bottom:var(--s5)}
.kicker::before,.kicker::after{content:'';display:block;height:1px;width:54px;
  background:currentColor;opacity:.4}
.kicker-l{justify-content:flex-start}
.kicker-l::before{display:none}
.h-sec{font-size:var(--xl);text-align:center;margin-bottom:var(--s5)}
.lede{font-size:var(--lg);color:var(--ink);opacity:.72;max-width:52ch;margin:0 auto;
  text-align:center;line-height:1.62;font-style:italic}

/* ── dimple rule: the focaccia motif as a divider ── */
.dimples{display:flex;justify-content:center;align-items:center;gap:11px;
  margin-block:var(--s10)}
.dimples i{display:block;width:7px;height:7px;border-radius:50%;
  background:var(--burgundy);opacity:.3}
.dimples i:nth-child(4){width:11px;height:11px;opacity:.62;background:var(--gold)}

/* ── bill of fare ── */
.fare{display:flex;align-items:baseline;gap:var(--s4);padding-block:var(--s5);
  border-bottom:1px solid var(--rule-soft)}
.fare-n{font-family:var(--serif);font-size:var(--sm);color:var(--gold);
  font-weight:600;width:34px;flex-shrink:0;letter-spacing:.1em}
.fare-b{flex-grow:1}
.fare-t{font-family:var(--serif);font-size:var(--lg);font-weight:600;
  display:flex;align-items:baseline;gap:var(--s3)}
.fare-t::after{content:'';flex-grow:1;border-bottom:1.5px dotted var(--rule);
  transform:translateY(-4px)}
.fare-d{font-size:var(--sm);opacity:.72;max-width:70ch;margin-top:var(--s2);
  font-style:italic}

/* ── enamel market sign ── */
.enamel{background:var(--burgundy);color:var(--gold-pale);
  border-block:6px double oklch(.85 .07 80/.42);padding-block:var(--s12);
  text-align:center;position:relative;overflow:hidden}
.enamel::before{content:'';position:absolute;inset:0;opacity:.09;
  background-image:radial-gradient(#fff .7px,transparent .7px);background-size:5px 5px}

/* ── plate: framed card with a hairline inset, not a rounded box ── */
.plate{background:var(--paper-2);border:1px solid var(--rule);padding:var(--s8);
  position:relative;transition:transform 320ms var(--ease),box-shadow 320ms var(--ease)}
.plate::before{content:'';position:absolute;inset:6px;border:1px solid var(--rule);
  opacity:.4;pointer-events:none}
.plate:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.plate h3{font-size:var(--lg);margin-bottom:var(--s3)}
.plate p{font-size:var(--sm);opacity:.76;line-height:1.74}
.grid{display:grid;gap:var(--s6)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* roman numeral */
.roman{font-family:var(--serif);font-size:2.6rem;font-weight:400;color:var(--gold);
  line-height:1;margin-bottom:var(--s4);font-style:italic}

/* real photography, framed like a plate */
.shot{position:relative;overflow:hidden;border:1px solid var(--rule);
  background:var(--paper-3);margin:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot::after{content:'';position:absolute;inset:8px;
  border:1px solid oklch(1 0 0/.34);pointer-events:none}
.shot-oval{border-radius:50%/50%;border:2px solid var(--burgundy);
  box-shadow:var(--sh-lg)}
.shot-oval::after{inset:9px;border:1px solid oklch(1 0 0/.42);border-radius:50%/50%}

/* placeholder slot — only where no photograph exists yet */
.slot{position:relative;background:linear-gradient(152deg,#EDE2C6,#E3D4B0 52%,#D8C69C);
  border:1px solid var(--rule);overflow:hidden;display:flex;
  align-items:center;justify-content:center}
.slot::before{content:'';position:absolute;inset:9px;border:1px solid oklch(.42 .07 45/.2);
  pointer-events:none}
.slot-cap{position:absolute;bottom:15px;left:0;right:0;text-align:center;
  font-family:var(--serif);font-size:.64rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:oklch(.40 .05 45/.6)}

img{max-width:100%;height:auto}
.wrap,.mid,.narrow{width:100%}

/* masthead nav scrolls rather than wrapping into a mess */
.nav-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-scroll::-webkit-scrollbar{display:none}

@media (max-width:1100px){
  .spine{display:none}
  .wrap{padding-inline:var(--s6)}
  :root{--xxxl:3.4rem;--xxl:2.5rem;--xl:1.8rem}
}
@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec{padding-block:var(--s16)}
  /* every two-column composition stacks */
  .wrap[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:var(--s10)!important}
  div[style*="grid-template-columns:1fr 300px"],
  div[style*="grid-template-columns:1fr 340px"]{grid-template-columns:1fr!important}
  [style*="columns:4"]{columns:2!important}
  [style*="columns:3"]{columns:2!important}
  .oval,.shot-oval{width:100%!important;max-width:420px;margin-inline:auto}
}
@media (max-width:640px){
  :root{--xxxl:2.6rem;--xxl:2rem;--xl:1.55rem;--lg:1.2rem;--base:1rem}
  .wrap,.mid,.narrow{padding-inline:var(--s5)}
  .g2,.g3,.g4{grid-template-columns:1fr}
  [style*="columns:2"],[style*="columns:4"],[style*="columns:3"]{columns:1!important}
  .sec{padding-block:var(--s12)}
  .btn{width:100%;padding-inline:var(--s5)}
  .enamel{padding-block:var(--s10)}
  .enamel p[style*="font-size:3.1rem"]{font-size:1.9rem!important}
  .fare-t{flex-wrap:wrap}
  .fare-t::after{display:none}
  footer div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr!important;gap:var(--s8)!important}
  .ftr-bot,footer div[style*="justify-content:space-between"]{flex-direction:column;gap:var(--s3)}
}
/* masthead on a phone: the flanking olive rules have nowhere to go, and the
   nav has to scroll horizontally rather than wrap into a broken stack */
@media (max-width:820px){
  header .brand-row > svg{display:none}
  header nav{justify-content:flex-start!important;flex-wrap:nowrap!important;
    padding-inline:var(--s5)!important;gap:var(--s6)!important}
  header nav a{white-space:nowrap;flex-shrink:0}
}
@media (max-width:640px){
  .ribbon,header > div:first-child{font-size:.62rem!important;letter-spacing:.16em!important}
  header nav{gap:var(--s5)!important}
  /* the script wordmark is too wide for a phone beside the emblem */
  header .brand-row p[style*="var(--script)"]{font-size:2.1rem!important}
  header .brand-row p[style*="text-transform:uppercase"]{font-size:.84rem!important;
    letter-spacing:.26em!important}
  header .brand-row img{width:48px!important;height:48px!important}
  header .brand-row{gap:var(--s4)!important;padding-inline:var(--s4)}
}
@media print{.splash{display:none!important}}

.splash{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#240808;
  transition:opacity .85s var(--ease),visibility .85s var(--ease)}
/* the courtyard drifts in and settles, the way a curtain lifts on it */
.splash .scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.07);
  object-fit:cover;object-position:50% 45%;
  transition:opacity 1.8s var(--ease),transform 12s linear}
.splash .scene.on{opacity:1;transform:scale(1)}
.splash-badge{position:relative;margin:0 auto;
  /* the label is the picture on this screen, so it takes as much of the
     viewport as the column below it can spare */
  width:min(460px,40vh,80vw);height:min(460px,40vh,80vw)}
.splash .wash{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,oklch(.32 .13 28/.58) 0%,oklch(.25 .12 28/.74) 46%,
    oklch(.15 .08 28/.92) 100%)}
.splash[hidden]{opacity:0;visibility:hidden;pointer-events:none;display:flex}
/* a safety net for viewports too short for the column — never a visible bar */
.splash{overflow-y:auto;scrollbar-width:none}
.splash::-webkit-scrollbar{display:none}
.splash-in{margin-block:auto;padding-block:var(--s8) 76px}  /* room for the skip line */
.splash::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(oklch(.9 .08 75/.10) .6px,transparent .6px);background-size:4px 4px}
.splash .vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 68% 60% at 50% 46%,transparent 40%,oklch(.12 .05 30/.62))}
.splash .frame{position:absolute;inset:28px;border:1px solid oklch(.85 .07 80/.22)}
.splash .frame::before{content:'';position:absolute;inset:9px;border:1px solid oklch(.85 .07 80/.11)}
.splash-in{position:relative;z-index:2;text-align:center;padding-inline:var(--s6)}
.splash-mark{opacity:0;transform:translateY(9px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.splash-mark.on{opacity:1;transform:none}
.splash-ring circle.draw{stroke-dasharray:604;stroke-dashoffset:604;
  transition:stroke-dashoffset 1.5s var(--ease)}
.splash-ring.on circle.draw{stroke-dashoffset:0}
.ing-rail{position:relative;height:96px;margin-top:var(--s6)}
.ing{position:absolute;inset:0;opacity:0;transform:translateY(7px);
  transition:opacity .42s var(--ease),transform .42s var(--ease)}
.ing.on{opacity:1;transform:none}
.ing.gone{opacity:0;transform:translateY(-7px)}
.ing-w{font-family:var(--serif);font-size:2.5rem;font-weight:500;font-style:italic;color:#F2DFC0;line-height:1.15}
.ing-g{font-family:var(--serif);font-size:.66rem;font-weight:600;letter-spacing:.4em;
  text-transform:uppercase;color:oklch(.78 .08 70/.62);margin-top:var(--s2)}
.dim-rail{display:flex;justify-content:center;gap:16px;color:#D9A94E;margin-top:var(--s6)}
.dim-rail i{display:block;width:12px;height:12px;border-radius:50%;background:transparent;
  box-shadow:inset 0 0 0 1px currentColor;opacity:.22;transform:scale(.4);
  transition:all .45s var(--ease)}
.dim-rail i.on{background:currentColor;opacity:1;transform:scale(1);
  box-shadow:inset 0 1px 2px oklch(0 0 0/.35)}
.splash-tag,.splash-enter{opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.splash-tag.on,.splash-enter.on{opacity:1;transform:none}
.splash-skip{position:absolute;bottom:38px;left:0;right:0;text-align:center;opacity:0;
  transition:opacity .7s var(--ease)}
.splash-skip.on{opacity:1}
body.splashing{overflow:hidden}
@media (max-width:640px){
  .ing-w{font-size:1.8rem}.ing-rail{height:76px;margin-top:var(--s6)}
  .splash .frame{inset:16px}
  .splash-in p[style*="var(--script)"]{font-size:3.1rem!important}
  .splash-in p[style*="uppercase"][style*="2.2rem"]{font-size:1.3rem!important}
  .splash-tag{margin-top:var(--s6)!important}
  .splash-enter{margin-top:var(--s6)!important}
  /* a phone has no keyboard to press, and the line only crowds the button */
  .splash-skip{display:none}
  .splash-in{padding-block:var(--s6)}
}
/* a small old phone (360x640) is the tightest case there is */
@media (max-width:640px) and (max-height:700px){
  .ing-rail{height:62px;margin-top:var(--s4)}
  .splash-in p[style*="var(--script)"]{font-size:2.6rem!important}
  .splash-in p[style*="uppercase"][style*="2.2rem"]{font-size:1.1rem!important}
  .splash-tag{margin-top:var(--s4)!important}
  .splash-enter{margin-top:var(--s4)!important}
  .splash-in{padding-block:var(--s4)}
}
/* a laptop lid is often shorter than the column is tall — give it back.
   Phones are handled above; this is only for short, wide screens. */
@media (min-width:641px) and (max-height:860px){
  .splash-badge{width:min(460px,36vh);height:min(460px,36vh)}
  .ing-rail{height:76px;margin-top:var(--s5)}
  .splash-in p[style*="var(--script)"]{font-size:3.8rem!important}
  .splash-tag{margin-top:var(--s5)!important}
  .splash-enter{margin-top:var(--s5)!important}
  .splash-in{padding-block:var(--s5) 64px}
}
@media (prefers-reduced-motion:reduce){
  /* the script adds .on regardless, so the scene needs muting here or a
     reduced-motion visitor still gets the twelve-second drift */
  .splash .scene,.splash .scene.on{transition:none;transform:none}
  .splash-ring circle.draw{stroke-dashoffset:0}
  .splash-mark,.ing,.splash-tag,.splash-enter,.splash-skip{transition:none}
}