/* Layout: the deck's framed editorial page (gold corner marks, hairline rules) turned into a long scroll.
   Two storefronts share one site: the deli shop (black roundel, retail) and the concierge (green, service). */
:root{
  --forest:#141412;      /* was deck green; now shop roundel black */
  --moss:#2a2825;        /* charcoal: second panel, hovers */
  --cream:#f4ede0;       /* deck: page ground */
  --paper:#faf5e9;       /* deck: card fill */
  --gold:#b8914a;        /* deck: rules + corner marks */
  --gold-soft:#d4b77a;   /* deck: accent type on green */
  --walnut:#6b4a2e;      /* deck: italic accent */
  --ink:#1f1f1c;         /* shop: roundel black */
  --muted:#6f6a60;
  --line:#c8bea6;

  --bg:var(--cream);
  --surface:var(--paper);
  --fg:var(--ink);
  --head:var(--forest);
  --accent:var(--walnut);
  --rule:var(--line);
  --sub:var(--muted);
  --band:var(--forest);
  --band-fg:var(--cream);
  --band-accent:var(--gold-soft);
  --black:#141412;
  --black-fg:#f4ede0;

  --display:"IBM Plex Sans Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --track:.28em;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121110;--surface:#1c1b18;--fg:#ece4d4;--head:#f1e8d6;--accent:#d4b77a;--rule:#3a3732;--sub:#a9a18f;
  --band:#1f1e1b;--band-fg:#f4ede0;--band-accent:#d4b77a;--black:#0e0f0d;--black-fg:#f4ede0;--paper:#1c1b18;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121110;--surface:#1c1b18;--fg:#ece4d4;--head:#f1e8d6;--accent:#d4b77a;--rule:#3a3732;--sub:#a9a18f;
  --band:#1f1e1b;--band-fg:#f4ede0;--band-accent:#d4b77a;--black:#0e0f0d;--black-fg:#f4ede0;--paper:#1c1b18;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--body);margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-weight:300;color:var(--head);margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08}
h2 em,h1 em{font-style:italic;color:var(--accent)}
p{margin:0;max-width:62ch}
.eyebrow{display:flex;align-items:center;gap:14px;font:500 .7rem/1 var(--body);letter-spacing:var(--track);text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.eyebrow span{color:var(--sub);font-family:var(--display);font-style:italic;letter-spacing:.04em;text-transform:none;font-size:.85rem}
.caps{font:500 .68rem/1.4 var(--body);letter-spacing:var(--track);text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;font:500 .72rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s}
.btn-green{background:var(--forest);color:var(--cream)}
.btn-green:hover{background:var(--moss)}
.btn-ghost{border-color:var(--gold);color:var(--head)}
.btn-ghost:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.btn-gold{background:var(--gold-soft);color:var(--ink)}
.btn-gold:hover{background:var(--gold)}

/* mockup ribbon */
.ribbon{background:var(--black);color:var(--black-fg);font:500 .66rem/1.5 var(--body);letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:8px 16px}
.ribbon b{color:var(--gold-soft);font-weight:500}

/* nav */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px var(--gold)}
.brand b{font:500 .78rem/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--head)}
.brand i{font-family:var(--display);color:var(--accent);font-size:.95rem;margin-left:4px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{text-decoration:none;font:500 .7rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--sub)}
.nav ul a:hover{color:var(--head)}
@media (max-width:860px){.nav ul{display:none}}

/* hero: split like the deck cover */
.hero{display:grid;grid-template-columns:1.15fr .85fr;min-height:560px}
.hero-l{background:var(--forest);color:var(--cream);padding:clamp(40px,6vw,80px) clamp(16px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:26px;position:relative}
.hero-l h1{color:var(--cream);font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.02}
.hero-l h1 em{color:var(--gold-soft)}
.hero-l p{color:#e3dac8;font-style:italic;font-size:1.08rem;max-width:44ch}
.hero-l .eyebrow{color:var(--gold-soft)}
.hero-l .eyebrow span{color:#bfb59f}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-l .btn-ghost{color:var(--cream)}
.hero-r{background:var(--moss);display:grid;place-items:center;padding:48px 16px;position:relative;overflow:hidden}
.roundel{width:min(78%,340px);aspect-ratio:1;max-width:100%;border-radius:50%;box-shadow:0 0 0 2px var(--cream),0 30px 60px -20px rgba(0,0,0,.5);animation:settle 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{transform:rotate(-8deg) scale(.96)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.roundel{animation:none}}
.est{position:absolute;top:24px;right:24px;border:1px solid var(--gold-soft);color:var(--gold-soft);padding:6px 12px;font:500 .62rem/1 var(--body);letter-spacing:.3em}
.hero-r .coords{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#d6ccb6;font:500 .62rem/1 var(--body);letter-spacing:.3em}
@media (max-width:820px){.hero{grid-template-columns:1fr;min-height:0}.hero-r{padding:56px 16px 72px}}

/* promise strip */
.strip{border-bottom:1px solid var(--rule);background:var(--surface)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip div.i{padding:18px 16px;border-left:1px solid var(--rule);display:grid;gap:2px}
.strip div.i:first-child{border-left:0}
.strip b{font:400 1.05rem/1.2 var(--display);color:var(--head)}
.strip small{color:var(--sub);font-size:.8rem}
@media (max-width:760px){.strip .wrap{grid-template-columns:1fr 1fr}.strip div.i:nth-child(3){border-left:0}.strip div.i{border-top:1px solid var(--rule)}.strip div.i:nth-child(-n+2){border-top:0}}

/* framed section with gold corner marks */
section{padding-block:clamp(64px,9vw,112px)}
.framed{position:relative}
.framed::before,.framed::after{content:"";position:absolute;width:30px;height:30px;border:1.5px solid var(--gold);pointer-events:none}
.framed::before{top:22px;left:clamp(8px,2vw,22px);border-right:0;border-bottom:0}
.framed::after{bottom:22px;right:clamp(8px,2vw,22px);border-left:0;border-top:0}
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:44px}
.sec-head .l{display:grid;gap:18px}
.sec-head .l p{color:var(--sub)}
@media (max-width:700px){.sec-head{grid-template-columns:1fr}}

/* shop */
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.prod{background:var(--surface);border:1px solid var(--rule);display:flex;flex-direction:column;text-decoration:none;transition:border-color .2s,transform .2s}
.prod:hover{border-color:var(--gold);transform:translateY(-2px)}
.prod .art{aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;position:relative;overflow:hidden}
.prod .art svg{width:46%;height:auto}
.prod .body{padding:18px 18px 20px;display:grid;gap:8px;border-top:1px solid var(--rule)}
.prod h3{font-size:1.35rem;font-weight:400}
.prod p{font-size:.88rem;color:var(--sub)}
.prod .more{display:flex;justify-content:space-between;align-items:center;margin-top:6px;color:var(--accent)}
.a1{background:var(--black)}.a2{background:var(--moss)}.a3{background:var(--walnut)}.a4{background:var(--black)}
@media (max-width:980px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.shop-grid{grid-template-columns:1fr}}

/* menu card (Le Menu) */
.menu-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:center}
.menu-copy{display:grid;gap:22px}
.menu-copy p{color:var(--sub)}
.stats{display:flex;gap:44px;padding-top:22px;border-top:1px solid var(--rule)}
.stats div{display:grid;gap:6px}
.stats b{font:italic 300 2.2rem/1 var(--display);color:var(--accent)}
.stats small{color:var(--sub)}
.lemenu{background:var(--surface);border:1px solid var(--head);outline:1px solid var(--rule);outline-offset:-10px;padding:clamp(28px,4vw,44px)}
.lemenu header{text-align:center;display:grid;gap:4px;padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.lemenu header i{font-family:var(--display);color:var(--accent);font-size:.9rem}
.lemenu header h3{font-size:1.9rem}
.lemenu header small{color:var(--sub)}
.dish{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;padding-block:16px;border-bottom:1px dashed var(--rule)}
.dish:last-child{border-bottom:0}
.dish span{font-size:.98rem}
.dish i{border-bottom:1px dotted var(--sub);transform:translateY(-4px);opacity:.6}
.dish em{font:italic 400 .72rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.dish p{grid-column:1/-1;font-size:.84rem;color:var(--sub)}
@media (max-width:820px){.menu-wrap{grid-template-columns:1fr}}

/* concierge band */
.band{background:var(--band);color:var(--band-fg)}
.band h2{color:var(--band-fg)}
.band h2 em{color:var(--band-accent)}
.band .eyebrow{color:var(--band-accent)}
.band .eyebrow span,.band .sec-head p{color:#cfc6b2}
.svc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:rgba(212,183,122,.35);border:1px solid rgba(212,183,122,.35)}
.svc{background:var(--band);padding:30px 26px 28px;display:flex;flex-direction:column;gap:12px;grid-column:span 2}
.svc:nth-child(-n+2){grid-column:span 3}
.svc .n{font:italic 300 1.6rem/1 var(--display);color:var(--band-accent)}
.svc h3{color:var(--band-fg);font-size:1.5rem;font-weight:400}
.svc p{color:#d9d0bd;font-size:.92rem}
.svc .tags{margin-top:auto;padding-top:14px;color:var(--band-accent)}
.svc.feature{background:color-mix(in srgb,var(--band) 88%,#d4b77a)}
@media (max-width:900px){.svc,.svc:nth-child(-n+2){grid-column:span 3}.svc:last-child{grid-column:span 6}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}.svc,.svc:nth-child(-n+2),.svc:last-child{grid-column:auto}}

/* packages */
.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pk{border:1px solid var(--rule);background:var(--surface);padding:30px 26px;display:grid;gap:14px;align-content:start}
.pk.mid{background:var(--black);color:var(--black-fg);border-color:var(--black)}
.pk.mid h3{color:var(--black-fg)}
.pk.mid .caps,.pk.mid li::before{color:var(--gold-soft)}
.pk h3{font-size:1.8rem}
.pk .caps{color:var(--accent)}
.pk ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.pk li{display:grid;grid-template-columns:18px 1fr;gap:6px}
.pk li::before{content:"—";color:var(--gold)}
.pk .ask{margin-top:6px;font-size:.84rem;color:var(--sub)}
.pk.mid .ask{color:#bdb4a2}
@media (max-width:860px){.pk-grid{grid-template-columns:1fr}}

/* process */
.proc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--gold)}
.step{padding:28px 22px 8px 0;display:grid;gap:10px;align-content:start;position:relative}
.step::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.step .n{font:italic 300 1.4rem/1 var(--display);color:var(--accent)}
.step h3{font-size:1.45rem;font-weight:400}
.step p{font-size:.9rem;color:var(--sub)}
@media (max-width:820px){.proc{grid-template-columns:1fr 1fr;row-gap:24px}}
@media (max-width:480px){.proc{grid-template-columns:1fr}}

/* hosts */
.hosts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px)}
.vlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.vlist li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule);font:300 1.3rem/1.25 var(--display);color:var(--head)}
.vlist li small{font:500 .64rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);align-self:center}
.clients{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.clients span{border:1px solid var(--gold);padding:9px 14px;font-size:.84rem;color:var(--head)}
.quote{margin-top:30px;padding:24px 26px;background:var(--surface);border-left:2px solid var(--gold);font:italic 300 1.25rem/1.45 var(--display);color:var(--head)}
@media (max-width:820px){.hosts{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.contact .l{display:grid;gap:22px}
.contact .l p{color:var(--sub)}
.card{background:var(--surface);border:1px solid var(--sub);outline:1px solid var(--rule);outline-offset:-10px;padding:36px clamp(20px,4vw,40px)}
.card .top{text-align:center;display:grid;justify-items:center;gap:6px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.card .top img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 1px var(--gold)}
.card .top b{font:400 1.4rem/1.1 var(--display);letter-spacing:.14em;color:var(--head);margin-top:8px}
.card .top i{font-family:var(--display);color:var(--accent);font-size:.9rem}
.row{display:grid;grid-template-columns:96px 1fr;gap:12px;padding-block:14px;border-bottom:1px dashed var(--rule);align-items:center}
.row:last-child{border-bottom:0}
.row .caps{color:var(--sub);font-size:.6rem}
.row span,.row a{overflow-wrap:anywhere}
.row a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule)}
.row a:hover{border-color:var(--gold)}
.row .tbc{color:var(--accent);font-style:italic;user-select:auto}
form.enq{display:grid;gap:12px;margin-top:6px}
form.enq .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.enq label{display:grid;gap:6px;font:500 .62rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--sub)}
form.enq input,form.enq select{font:400 .95rem/1.2 var(--body);padding:12px 12px;border:1px solid var(--rule);background:var(--bg);color:var(--fg);border-radius:0;min-width:0;width:100%}
.sent{font-size:.88rem;color:var(--accent)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
@media (max-width:420px){form.enq .two{grid-template-columns:1fr}}

/* footer */
footer{background:var(--black);color:var(--black-fg);padding-block:56px 32px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h4{margin:0 0 14px;font:500 .64rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem;color:#cfc7b6}
.foot .b{display:grid;gap:14px;align-content:start}
.foot .b img{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 1px var(--gold-soft)}
.foot .b p{color:#bdb4a2;font-style:italic;font-size:.95rem}
.base{margin-top:44px;padding-top:20px;border-top:1px solid #3a3a34;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:#8e877a;font:500 .6rem/1.5 var(--body);letter-spacing:.26em;text-transform:uppercase}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}}

/* designer notes: palette merge */
.notes{background:var(--bg);border-top:1px solid var(--rule)}
.notes h2{font-size:1.9rem}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:26px}
.sw{border:1px solid var(--rule);background:var(--surface)}
.sw i{display:block;height:74px}
.sw div{padding:10px 12px;display:grid;gap:2px}
.sw b{font:500 .82rem/1.2 var(--body)}
.sw code{font-size:.74rem;color:var(--sub)}
.sw small{font-size:.72rem;color:var(--accent)}

/* catering */
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);background:var(--surface)}
.cat{padding:28px 26px 24px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.cat:nth-child(3n+1){border-left:0}
.cat:nth-child(-n+3){border-top:0}
.cat .n{font:italic 300 1.6rem/1 var(--display);color:var(--accent)}
.cat h3{font-size:1.4rem;font-weight:400}
.cat p{font-size:.9rem;color:var(--sub)}
.cat .caps{margin-top:auto;padding-top:10px;color:var(--accent);font-size:.6rem}
.cat-order{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:center;margin-top:clamp(48px,7vw,80px)}
.cat-order .l{display:grid;gap:18px}
.cat-order .l h3{font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.1}
.cat-order .l h3 em{color:var(--accent)}
.cat-order .l p{color:var(--sub)}
.cater-close{text-align:center;margin:18px auto 0;font:italic 300 1.1rem/1.4 var(--display);color:var(--accent)}
@media (max-width:900px){.cat-grid{grid-template-columns:1fr 1fr}.cat:nth-child(3n+1){border-left:1px solid var(--rule)}.cat:nth-child(2n+1){border-left:0}.cat:nth-child(3){border-top:1px solid var(--rule)}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr}.cat{border-left:0!important;border-top:1px solid var(--rule)}.cat:first-child{border-top:0}}
@media (max-width:820px){.cat-order{grid-template-columns:1fr}}

/* live site additions */
.pk .lead{font-size:.95rem}
.pk.mid .lead{color:var(--black-fg)}
form.enq textarea{font:400 .95rem/1.4 var(--body);padding:12px;border:1px solid var(--rule);background:var(--bg);color:var(--fg);border-radius:0;width:100%;resize:vertical}
form.enq .send{display:flex;flex-wrap:wrap;gap:10px}
form.enq input:invalid[data-touched]{border-color:var(--walnut)}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--gold-soft)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:72px}
.btn-ghost{background:transparent}