/*! Alpha Katering — option B "The Room" — L72 build 2026-09 */

@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-moda-var-latin.woff2')format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'ArchivoVar';src:url('../fonts/archivo-var-latin.woff2')format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

/* ============ TOKENS (measured, see build/COPY-B.md) ============ */
:root{
  --paper:#EDEBE6; --paper-2:#F6F4F0; --paper-3:#E4E1DA;
  --ink:#1A1A19;        /* 14.6:1 on paper */
  --slate:#4A4844;      /* 7.7:1  */
  --mute:#63605A;       /* 4.9:1 — the minimum that clears AA for text */
  --olive:#4A5A3A;      /* 6.3:1 on paper; white on olive 7.5:1 */
  --olive-dp:#3B4A2C;
  --rust:#8C3A26;       /* error only */
  --rule:rgba(26,26,25,.16); --rule-2:rgba(26,26,25,.30);

  --f-disp:'Bodoni Moda',Didot,'Bodoni MT','Times New Roman',serif;
  --f-body:'ArchivoVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --s--1:clamp(.8125rem,.79rem + .11vw,.875rem);
  --s-0:clamp(1rem,.97rem + .15vw,1.0625rem);
  --s-1:clamp(1.125rem,1.06rem + .3vw,1.3125rem);
  --s-2:clamp(1.375rem,1.24rem + .64vw,1.75rem);
  --d-1:clamp(1.9rem,1.5rem + 2vw,2.9rem);
  --d-2:clamp(2.4rem,1.7rem + 3.4vw,4.2rem);
  --d-3:clamp(3rem,1.9rem + 5.2vw,6rem);

  --gut:clamp(1.25rem,4vw,4rem);
  --wrap:80rem; --measure:62ch;
  --sec:clamp(4rem,8vw,7.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* the catalogue: a fixed label margin, content offset right */
  --margin:13rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--slate);
  font-family:var(--f-body);font-size:var(--s-0);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.04;color:var(--ink);text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

.skip{position:absolute;left:var(--gut);top:-100px;z-index:200;background:var(--olive);
  color:#fff;padding:.7rem 1.1rem;font-weight:600;text-decoration:none;transition:top .18s var(--ease)}
.skip:focus{top:1rem}
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ TYPE ============ */
.disp{font-family:var(--f-disp);font-weight:400;letter-spacing:-.012em}
.d1{font-size:var(--d-1)} .d2{font-size:var(--d-2)} .d3{font-size:var(--d-3);line-height:.98}
.lede{font-size:var(--s-1);line-height:1.62;color:var(--ink);max-width:52ch}
.body{color:var(--slate);max-width:var(--measure)}
.body + .body{margin-top:1em}
.mute{color:var(--mute)}
/* the label is the structural device: it names the section in the margin */
.label{font-family:var(--f-body);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.hair{height:1px;background:var(--rule-2);border:0;margin:0}

/* ============ CATALOGUE GRID ============ */
/* label sits in a fixed left margin; content flows in the main column */
.cat{display:grid;gap:.9rem 0}
@media(min-width:1000px){
  .cat{grid-template-columns:var(--margin) minmax(0,1fr);gap:0 3.5rem;align-items:start}
  .cat > .label{grid-column:1;padding-top:.5rem;position:sticky;top:6.5rem}
  .cat > .cat__main{grid-column:2}
}
.cat__main{display:grid;gap:1.2rem}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.5rem;min-height:48px;
  font-size:var(--s--1);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn--primary{background:var(--olive);color:#fff;border-color:var(--olive)}
.btn--primary:hover{background:var(--olive-dp);border-color:var(--olive-dp)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--ghost:hover{border-color:var(--olive);color:var(--olive)}
.btn__a{transition:transform .2s var(--ease)}
.btn:hover .btn__a{transform:translateX(4px)}
.tlink{display:inline-flex;align-items:center;gap:.5rem;color:var(--olive);text-decoration:none;
  font-weight:600;font-size:var(--s--1);letter-spacing:.09em;text-transform:uppercase;
  border-bottom:1px solid var(--olive);padding-bottom:.25rem}
.tlink:hover{color:var(--olive-dp);border-bottom-color:var(--olive-dp)}

/* ============ HEADER ============ */
.hdr{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--rule)}
.hdr__in{display:flex;align-items:center;gap:var(--gut);padding:1rem var(--gut)}
.hdr__brand{display:flex;flex-direction:column;text-decoration:none;flex:0 0 auto;line-height:1}
.hdr__n1{font-family:var(--f-disp);font-size:1.25rem;letter-spacing:.30em;color:var(--ink)}
.hdr__hair{height:1px;background:var(--olive);margin:.28rem 0}
.hdr__n2{font-family:var(--f-body);font-size:.56rem;font-weight:600;letter-spacing:.42em;color:var(--mute)}
.hdr__nav{display:none;margin-left:auto;gap:1.9rem}
.hdr__nav a{text-decoration:none;font-size:var(--s--1);color:var(--slate);padding:.35rem 0;
  border-bottom:1px solid transparent}
.hdr__nav a:hover,.hdr__nav a[aria-current=page]{color:var(--olive);border-bottom-color:var(--olive)}
.hdr__tel{display:none;font-size:var(--s--1);font-weight:600;text-decoration:none;color:var(--ink)}
.hdr__tel:hover{color:var(--olive)}
.hdr__cta{display:none}
@media(min-width:1060px){.hdr__nav{display:flex}.hdr__tel,.hdr__cta{display:inline-flex}}
.hdr__burger{margin-left:auto;display:grid;place-items:center;width:48px;height:48px;
  background:none;border:1px solid var(--rule-2);cursor:pointer}.hdr__burger span:not(.sr){grid-area:1/1;display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}.hdr__burger span:nth-child(1){transform:translateY(-6.5px)}.hdr__burger span:nth-child(3){transform:translateY(6.5px)}.hdr__burger[aria-expanded=true] span:nth-child(1){transform:rotate(45deg)}.hdr__burger[aria-expanded=true] span:nth-child(2){opacity:0}.hdr__burger[aria-expanded=true] span:nth-child(3){transform:rotate(-45deg)}





@media(min-width:1060px){.hdr__burger{display:none}}
.drawer{position:fixed;inset:0;z-index:99;background:var(--paper);padding:6.5rem var(--gut) 2.5rem;
  display:flex;flex-direction:column;gap:.2rem;transform:translateY(-100%);visibility:hidden;
  transition:transform .42s var(--ease),visibility .42s;overflow-y:auto}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer nav{display:flex;flex-direction:column}.drawer__list{display:flex;flex-direction:column}.drawer__list > li{border-bottom:1px solid var(--rule);padding:.4rem 0}.drawer__top{display:block;text-decoration:none;font-family:var(--f-disp);font-size:clamp(1.45rem,6vw,2rem);color:var(--ink);padding:.3rem 0}.drawer__top:hover{color:var(--olive)}.drawer__sub{display:flex;flex-wrap:wrap;gap:.1rem 1.1rem;padding:.15rem 0 .35rem}.drawer__sub a{display:inline-block;text-decoration:none;font-family:var(--f-body);font-size:var(--s-0);color:var(--mute);padding:.4rem 0;border:0}.drawer__sub a:hover{color:var(--olive)}

.drawer__foot{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:.8rem}
.drawer__foot a{font-family:var(--f-body);font-size:var(--s-0);border:0;padding:0;color:var(--olive)}

/* ============ HERO — type on paper, photo as a framed plate ============ */
.hero{padding-block:clamp(2.5rem,6vw,5rem) 0}
.hero__grid{display:grid;gap:2rem}
@media(min-width:1000px){
  .hero__grid{grid-template-columns:var(--margin) minmax(0,1fr);gap:0 3.5rem;align-items:start}
  .hero__meta{grid-column:1;padding-top:1.4rem}
  .hero__copy{grid-column:2}
}
.hero__h1{margin:0;max-width:15ch}
.hero__sub{margin-top:1.5rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero__plate{margin:clamp(2.5rem,5vw,4rem) 0 0}
.hero__plate img{width:100%}
.plate__cap{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;
  margin-top:.75rem;font-size:var(--s--1);color:var(--mute)}

/* framed plate: a hairline frame with paper showing through */
.plate{margin:0;background:var(--paper-2);padding:.6rem;border:1px solid var(--rule)}
.plate img{width:100%;display:block}
.plate--bare{background:none;padding:0;border:0}

/* ============ SECTIONS ============ */
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:calc(var(--sec)*.6)}
.sec--tone{background:var(--paper-3)}
.sec + .sec{border-top:1px solid var(--rule)}

/* rule that draws in on reveal — the one motion flourish */
.draw{height:1px;background:var(--rule-2);transform-origin:left;margin-bottom:2rem}
.anim .draw{transform:scaleX(0);transition:transform .9s var(--ease)}
.anim .draw.is-in{transform:scaleX(1)}

/* index rows — services and menus read as a catalogue index */
.index{border-top:1px solid var(--rule-2)}
.index a{display:grid;gap:.3rem 2rem;padding:1.7rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;transition:padding-left .3s var(--ease)}
@media(min-width:760px){.index a{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;align-items:baseline}}
.index a:hover,.index a:focus-visible{padding-left:.7rem}
.index__t{font-family:var(--f-disp);font-size:var(--s-2);color:var(--ink);line-height:1.1}
.index__d{color:var(--mute);font-size:var(--s--1)}
.index__go{color:var(--olive);font-size:var(--s--1);font-weight:600;letter-spacing:.09em;text-transform:uppercase}

/* plate grid — cards without looking like cards */
.plates{display:grid;gap:2rem}
@media(min-width:700px){.plates{grid-template-columns:repeat(2,1fr);gap:2.4rem}}
@media(min-width:1100px){.plates--3{grid-template-columns:repeat(3,1fr)}}
.pcard{text-decoration:none;display:grid;gap:.9rem}
.pcard img{transition:opacity .4s var(--ease)}
.pcard:hover img{opacity:.88}
.pcard__t{font-family:var(--f-disp);font-size:var(--s-2);color:var(--ink)}
.pcard__d{font-size:var(--s--1);color:var(--mute);max-width:34ch}
.pcard__go{font-size:var(--s--1);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--olive)}

/* split */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--l{grid-template-columns:1.1fr .9fr}}

/* the figure — a big number set in Bodoni */
.figure{font-family:var(--f-disp);font-size:clamp(3.4rem,10vw,7rem);line-height:.9;
  color:var(--olive);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* pull quote */
.pull{font-family:var(--f-disp);font-size:var(--s-2);line-height:1.42;color:var(--ink);
  max-width:46ch;font-style:italic}

/* reviews */
.revs{display:grid;gap:2.2rem}
@media(min-width:820px){.revs{grid-template-columns:repeat(3,1fr);gap:2.6rem}}
.rev{display:grid;gap:1rem;align-content:start}
.rev__q{font-family:var(--f-disp);font-size:var(--s-1);line-height:1.5;color:var(--ink)}
.rev__m{font-size:var(--s--1);color:var(--mute);padding-top:.9rem;border-top:1px solid var(--rule)}
.rev__m b{display:block;color:var(--ink);font-weight:600}

/* chefs */
.chefs{display:grid;gap:2.5rem}
@media(min-width:820px){.chefs{grid-template-columns:repeat(2,1fr);gap:3rem}}
.chef__n{font-family:var(--f-disp);font-size:var(--s-2);margin-top:1.1rem;color:var(--ink)}
.chef__r{color:var(--olive);font-size:var(--s--1);text-transform:uppercase;letter-spacing:.14em;font-weight:600;margin-top:.35rem}
.chef__b{margin-top:.9rem;color:var(--slate);max-width:40ch}
.chef__mono{aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--rule);
  display:grid;place-items:center;position:relative;overflow:hidden}
.chef__mono::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 24px,rgba(74,90,58,.05) 24px 25px)}
.chef__mono span{font-family:var(--f-disp);font-size:clamp(3.4rem,9vw,5.5rem);color:var(--olive);
  position:relative;letter-spacing:.04em}

/* FAQ */
.faq{border-top:1px solid var(--rule-2);max-width:58rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-family:var(--f-disp);font-size:var(--s-2);color:var(--ink);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--olive);border-bottom:1.5px solid var(--olive);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--olive)}
.faq__a{padding:0 0 1.4rem;color:var(--slate);max-width:var(--measure)}

/* ============ MENUS ============ */
.msec{padding-block:2.6rem;border-top:1px solid var(--rule)}
.msec:first-child{border-top:0}
.msec__h{font-family:var(--f-disp);font-size:var(--d-1);color:var(--ink);line-height:1.05}
.msec__note{margin-top:.5rem;font-size:var(--s--1);color:var(--mute);max-width:var(--measure)}
.items{margin-top:1.8rem;display:grid;gap:1.6rem}
@media(min-width:820px){.items{grid-template-columns:repeat(2,1fr);gap:1.7rem 3.2rem}}
.item__top{display:flex;align-items:baseline;gap:.6rem}
.item__n{font-weight:600;font-size:var(--s-0);color:var(--ink);line-height:1.3}
.item__dots{flex:1 1 auto;border-bottom:1px dotted var(--rule-2);transform:translateY(-.28em);min-width:1rem}
.item__p{font-family:var(--f-disp);font-size:1.15rem;color:var(--olive);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.item__d{margin-top:.3rem;font-size:var(--s--1);color:var(--mute);max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.tag{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.18rem .45rem;border:1px solid var(--rule-2);color:var(--mute)}
.tag--ve,.tag--v{color:#3F5B33;border-color:rgba(63,91,51,.4)}
.tag--gf{color:#7A5B12;border-color:rgba(122,91,18,.4)}
.tag--df{color:#2C5568;border-color:rgba(44,85,104,.4)}
.tag--n{color:#7A4423;border-color:rgba(122,68,35,.4)}
.terms{display:grid;gap:0;margin-top:2.2rem;border-top:1px solid var(--rule-2)}
@media(min-width:700px){.terms{grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule)}}
.terms div{padding:1.1rem 1.2rem;border-bottom:1px solid var(--rule)}
@media(min-width:700px){.terms div{border-right:1px solid var(--rule);border-bottom:0}}
.terms dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600}
.terms dd{margin:.4rem 0 0;font-family:var(--f-disp);font-size:1.3rem;color:var(--ink);line-height:1.1}

/* gallery */
.grid-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:.6rem}
.grid-g figure{margin:0;overflow:hidden;background:var(--paper-2)}
.grid-g img{width:100%;aspect-ratio:1;object-fit:cover;transition:opacity .4s var(--ease)}
.grid-g figure:hover img{opacity:.86}

/* prose */
.prose h2{font-family:var(--f-disp);font-size:var(--d-1);margin-top:2.4rem;color:var(--ink)}
.prose h3{font-family:var(--f-disp);font-size:var(--s-2);margin-top:1.9rem;color:var(--olive)}
.prose p{margin-top:.9rem;color:var(--slate);max-width:var(--measure)}
.prose ul{margin-top:.9rem;display:grid;gap:.55rem}
.prose li{padding-left:1.3rem;position:relative;color:var(--slate);max-width:var(--measure)}
.prose li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;background:var(--olive)}

/* ============ FORM ============ */
.form{display:grid;gap:1.35rem}
.f2{display:grid;gap:1.35rem}
@media(min-width:640px){.f2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:var(--s--1);font-weight:600;color:var(--ink);margin-bottom:.45rem}
.field .req{color:var(--olive)}
.field input,.field select,.field textarea{width:100%;background:var(--paper-2);
  border:1px solid var(--rule-2);color:var(--ink);font:inherit;padding:.8rem .9rem;min-height:48px;
  border-radius:0;appearance:none;transition:border-color .2s var(--ease)}
.field textarea{min-height:9rem;resize:vertical}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--olive) 50%),linear-gradient(135deg,var(--olive) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive);outline:2px solid var(--olive);outline-offset:1px}
.field input::placeholder,.field textarea::placeholder{color:#918D85}
.field .err{display:none;margin-top:.4rem;font-size:var(--s--1);color:var(--rust)}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--rust)}
.field.is-bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:var(--s--1);color:var(--mute)}
.formstat{padding:1rem 1.1rem;border:1px solid var(--rule-2);font-size:var(--s-0)}
.formstat[data-t=ok]{border-color:var(--olive);background:rgba(74,90,58,.07);color:var(--ink)}
.formstat[data-t=err]{border-color:var(--rust);background:rgba(140,58,38,.07);color:var(--ink)}

/* ============ FOOTER ============ */
.ftr{background:var(--paper-3);border-top:1px solid var(--rule);padding-block:clamp(3rem,6vw,5rem) 1.8rem}
.ftr__grid{display:grid;gap:2.4rem}
@media(min-width:800px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--mute);
  font-family:var(--f-body);font-weight:600;margin-bottom:1rem}
.ftr a{text-decoration:none;color:var(--slate)}
.ftr a:hover{color:var(--olive)}
.ftr li{padding:.3rem 0;font-size:var(--s--1)}
.ftr address{font-style:normal;font-size:var(--s--1);color:var(--slate);line-height:1.9}
.ftr__area{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--rule);
  font-size:var(--s--1);color:var(--mute);max-width:70ch}
.ftr__base{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:space-between;
  font-size:var(--s--1);color:var(--mute)}

/* ============ MOTION ============ */
.rv{opacity:1;transform:none}
.anim .rv{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.anim .rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .anim .rv{opacity:1!important;transform:none!important}
  .anim .draw{transform:scaleX(1)!important}
}