/* ===========================================================
   FASSI'S — luxury private chef, Houston
   Design system
   =========================================================== */
:root{
  --ink:#0B0B0C;
  --ink-2:#121214;
  --ink-3:#1B1B1E;
  --bone:#F4F1EA;
  --bone-dim:#C9C4B8;
  --mute:#8C877C;
  --gold:#C2B274;
  --gold-hi:#DCCB8C;
  --line:rgba(194,178,116,.28);
  --line-soft:rgba(244,241,234,.12);
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.9rem,8.5vw,6.5rem);line-height:.98}
h2{font-size:clamp(2.1rem,5vw,3.9rem);line-height:1.06}
h3,h2.as-h3{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2}
p{margin:0 0 1.15em}
.eyebrow{
  font-family:var(--sans);font-size:.68rem;font-weight:400;
  letter-spacing:.38em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.eyebrow.center{justify-content:center}
.lede{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--bone-dim);max-width:62ch}
.muted{color:var(--mute)}
.num{font-family:var(--display);font-size:.9rem;color:var(--gold);letter-spacing:.2em}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* spacing scale: paired (inline padding-top:0) < base < open(.band)
   uniform padding gave every transition identical weight; this gives hierarchy */
section{padding:clamp(50px,6.4vw,92px) 0;position:relative}
section.band{padding:clamp(72px,9.5vw,138px) 0}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
.grid{display:grid;gap:clamp(28px,4vw,60px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(2,1fr)}
.g-split{grid-template-columns:1fr 1.15fr;align-items:center}

@media(max-width:900px){.g2,.g3,.g-split{grid-template-columns:1fr}}
@media(max-width:600px){.g4{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:.74rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;
  padding:17px 34px;border:1px solid var(--gold);color:var(--gold);
  background:transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:color .45s ease,border-color .45s ease;
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.65,0,.35,1);z-index:-1;
}
.btn:hover{color:var(--ink)}
.btn:hover::after{transform:scaleX(1);transform-origin:left}
.btn span{position:relative;z-index:1}
.btn-solid{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-solid:hover{color:var(--ink);filter:brightness(1.08)}
.link-u{
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line);padding-bottom:6px;transition:border-color .4s;
}
.link-u:hover{border-color:var(--gold)}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  padding:18px 0;border-bottom:1px solid transparent;
  transition:background .5s ease,padding .5s ease,border-color .5s ease,transform .55s cubic-bezier(.65,0,.35,1);
}
header.solid{
  background:linear-gradient(to bottom,rgba(11,11,12,.62),rgba(11,11,12,.48));
  backdrop-filter:blur(26px) saturate(185%);
  -webkit-backdrop-filter:blur(26px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(244,241,234,.07),0 10px 30px -22px rgba(0,0,0,.9);
  padding:10px 0;border-color:var(--line-soft);
}
/* browsers without backdrop-filter get an opaque bar rather than unreadable nav */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.solid{background:rgba(11,11,12,.94)}
}
header.hide{transform:translateY(-104%)}
@media(max-width:760px){
  /* padding is a layout property: transitioning it on a phone costs a reflow per frame.
     The bar still changes size on scroll, it just stops animating the change. */
  header{transition:background .4s ease,border-color .4s ease}
  header.solid{backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.2vw,40px)}
.brand{display:inline-flex;align-items:center;flex:none}
.nav ul{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);list-style:none;margin:0;padding:0}
.nav ul li{white-space:nowrap}
.nav ul a{
  font-size:.665rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
  position:relative;padding-bottom:5px;transition:color .35s;white-space:nowrap;
}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .45s cubic-bezier(.65,0,.35,1)}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--bone)}
.nav ul a:hover::after,.nav ul a[aria-current="page"]::after{width:100%}
.nav>.btn{flex:none;padding:13px 24px;font-size:.645rem;letter-spacing:.2em;white-space:nowrap}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;flex:none}
.burger span{display:block;width:24px;height:1px;background:var(--bone);margin:6px 0;transition:.35s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1180px){
  .nav ul{gap:14px}
  .nav ul a{font-size:.62rem;letter-spacing:.14em}
  .nav>.btn{padding:12px 18px;font-size:.6rem;letter-spacing:.14em}
}
@media(max-width:1024px){
  .nav ul{
    position:fixed;inset:0;background:rgba(11,11,12,.98);backdrop-filter:blur(20px);
    flex-direction:column;align-items:center;justify-content:center;gap:30px;
    opacity:0;pointer-events:none;transition:opacity .45s ease;
  }
  .nav ul.open{opacity:1;pointer-events:auto}
  .nav ul li{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
  .nav ul.open li{opacity:1;transform:none}
  .nav ul.open li:nth-child(1){transition-delay:.08s}
  .nav ul.open li:nth-child(2){transition-delay:.14s}
  .nav ul.open li:nth-child(3){transition-delay:.20s}
  .nav ul.open li:nth-child(4){transition-delay:.26s}
  .nav ul.open li:nth-child(5){transition-delay:.32s}
  .nav ul.open li:nth-child(6){transition-delay:.38s}
  .nav ul.open li:nth-child(7){transition-delay:.44s}
  .nav ul.open li:nth-child(8){transition-delay:.50s}
  /* 25px of text is an uncomfortable target on a phone — pad it to 44px without
     moving the type, and keep the gold rule under the words rather than the box */
  .nav ul a{font-size:1.05rem;letter-spacing:.26em;display:block;padding:10px 6px}
  .nav ul a::after{bottom:10px;left:6px;right:6px}
  .nav ul{gap:16px}
  .burger{display:block;z-index:95}
  .nav>.btn{display:none}
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
  padding:calc(var(--hdr,92px) + 40px) 0 clamp(44px,7vw,92px);
}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,12,.88) 0%,rgba(11,11,12,.34) 34%,rgba(11,11,12,.70) 72%,rgba(11,11,12,.98) 100%),
    linear-gradient(90deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.55) 48%,rgba(11,11,12,.12) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem);max-width:15ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .lede{margin-top:26px;max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.5vw,40px)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3.4vw,54px);margin-top:clamp(34px,5vw,64px);
  padding-top:26px;border-top:1px solid var(--line-soft);
}
.hero-meta div{min-width:118px}
.hero-meta strong{display:block;font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);color:var(--gold);font-weight:400;line-height:1.2}
.hero-meta span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
@media(max-width:560px){
  .hero-meta div{min-width:46%}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- media frames ---------- */
.frame{position:relative;overflow:hidden;background:var(--ink-2)}
.frame::before{content:"";position:absolute;inset:14px;border:1px solid var(--line);z-index:2;pointer-events:none}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.frame:hover img{transform:scale(1.045)}
.ratio-4x5{aspect-ratio:4/5}
.grid.g2>.frame{width:100%}
.ratio-1x1{aspect-ratio:1/1}
.ratio-3x2{aspect-ratio:3/2}
.ratio-16x9{aspect-ratio:16/9}

/* placeholder look when an image file is missing */
.frame img{background:
  radial-gradient(120% 90% at 30% 0%,#242428 0%,#0F0F11 60%);}

/* ---------- service cards ---------- */
.svc{display:block;position:relative;border-top:1px solid var(--line-soft);padding:34px 0;transition:padding .4s}
.svc:hover{padding-left:14px}
.svc-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.svc h3{transition:color .4s}
.svc:hover h3{color:var(--gold)}
.svc p{margin:12px 0 0;max-width:58ch;color:var(--mute);font-size:.98rem}
.svc .arrow{color:var(--gold);font-size:1.3rem;transition:transform .4s}
.svc:hover .arrow{transform:translateX(8px)}

.card{background:var(--ink-2);border:1px solid var(--line-soft);padding:clamp(26px,3.4vw,44px);transition:border-color .45s,transform .45s}
.card:hover{border-color:var(--line);transform:translateY(-4px)}
.card h3{margin-bottom:12px}
.card p{color:var(--mute);font-size:.97rem;margin:0}

/* ---------- gallery ---------- */
/* gallery: one even row, every tile identical */
.gal{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.1vw,16px);align-items:start}
.gal>*{aspect-ratio:4/5;width:100%;transform:none}
@media(max-width:1080px){
  /* scroll strip keeps the tiles identical instead of orphaning a row */
  .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
       padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .gal>*{flex:0 0 min(62vw,300px);scroll-snap-align:start}
  .gal::-webkit-scrollbar{height:3px}
  .gal::-webkit-scrollbar-thumb{background:var(--line)}
}

/* ---------- quote / testimonials ---------- */
.quote{text-align:center;max-width:min(880px,86vw);margin:0 auto}
.quote p{font-family:var(--display);font-size:clamp(1.5rem,3.1vw,2.3rem);line-height:1.32;font-style:italic;color:var(--bone)}
.quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:22px}
.quote p.stars{color:var(--gold);letter-spacing:.42em;font-size:.72rem;font-style:normal;margin-bottom:22px;text-indent:.42em}

/* ---------- list ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:26px;color:var(--bone-dim);font-size:.98rem}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--gold)}

/* ---------- areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.areas li{
  display:inline-flex;align-items:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line-soft);color:var(--bone-dim);transition:border-color .35s,color .35s,background .35s;
}
.areas li>a,.areas li{padding:0}
.areas li{padding:9px 16px}
.areas li>a{display:block;margin:-9px -16px;padding:9px 16px;color:inherit;letter-spacing:inherit}
.areas li:hover{border-color:var(--gold);color:var(--gold);background:linear-gradient(180deg,rgba(194,178,116,.07),transparent)}
/* every chip is a link now — affordance comes from the hover, not an icon */
.areas li{cursor:pointer;position:relative;overflow:hidden}
.areas li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.65,0,.35,1)}
.areas li:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:var(--display);font-size:clamp(1.1rem,2vw,1.4rem);transition:color .35s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.5rem;font-family:var(--sans);font-weight:200;transition:transform .35s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--gold)}
.faq .ans{padding:0 44px 28px 0;color:var(--mute);max-width:72ch}

/* ---------- CTA band ---------- */
.band{background:var(--ink-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);text-align:center}
.band h2 em{font-style:italic;color:var(--gold)}

/* ---------- form ---------- */
form .field{margin-bottom:22px}
label{display:block;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
input,select,textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-soft);
  color:var(--bone);font-family:var(--sans);font-size:1rem;font-weight:300;padding:12px 0;
  transition:border-color .35s;border-radius:0;
}
input:focus,select,textarea:focus{outline:none;border-color:var(--gold)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 14px) 22px,calc(100% - 8px) 22px;background-size:6px 6px;background-repeat:no-repeat}
select option{background:var(--ink-2);color:var(--bone)}
textarea{resize:vertical;min-height:120px}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line-soft);padding:clamp(56px,8vw,96px) 0 32px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,5vw,70px)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
footer h4,footer .fh{font-size:.7rem;font-family:var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer a{color:var(--bone-dim);font-size:.93rem;transition:color .3s}
footer a:hover{color:var(--gold)}
.fbot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:clamp(42px,6vw,70px);padding-top:26px;border-top:1px solid var(--line-soft);font-size:.78rem;color:var(--mute)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .frame img,.btn::after{transition:none}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:12px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 18px}

/* ===== official logo lockup ===== */
.brand{display:inline-flex;align-items:center;text-decoration:none}
.logo{height:40px;width:auto;display:block;transition:opacity .4s ease}
header.solid .logo{height:32px}
.brand:hover .logo{opacity:.82}
footer .logo{height:52px}
@media(max-width:600px){.logo{height:32px}header.solid .logo{height:28px}}
.logo{transition:height .5s cubic-bezier(.65,0,.35,1),opacity .4s}

/* ===== about credentials panel ===== */
.creds{
  position:relative;border:1px solid var(--line);background:
   linear-gradient(180deg,rgba(194,178,116,.06),rgba(194,178,116,0) 55%),var(--ink-2);
  padding:clamp(34px,4.5vw,56px);
}
.creds-mark{height:88px;width:auto;opacity:.9;margin-bottom:clamp(26px,3.5vw,40px)}
.creds-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.creds-list li{display:flex;flex-direction:column;gap:5px;padding:18px 0;border-top:1px solid var(--line-soft)}
.creds-list li:first-child{border-top:0;padding-top:0}
.creds-list span{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.creds-list strong{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:400;color:var(--bone)}

/* ===== focus visibility ===== */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* ===== hero refinement ===== */
.hero h1{text-wrap:balance}
.hero-bg img{animation:slowzoom 22s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
/* On a phone you scroll within a second or two of landing, so the 22s zoom is
   never seen as a slow drift — it is caught mid-shrink and reads as the image
   resizing under your thumb. The hero sits still on mobile instead. */
@media(max-width:760px){.hero-bg img{animation:none;transform:none}}
.gold-rule{height:1px;background:linear-gradient(90deg,var(--gold),rgba(194,178,116,0));width:120px;margin:0 0 26px}

/* ===== breadcrumb ===== */
.crumb{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:26px}
.crumb a{color:var(--mute);transition:color .3s}
.crumb a:hover{color:var(--gold)}
.crumb span{margin:0 8px;color:var(--line)}
.crumb em{font-style:normal;color:var(--gold)}

/* ===== 4-column footer ===== */
.fgrid.f4{grid-template-columns:1.5fr 1fr 1.1fr 1fr}
@media(max-width:1000px){.fgrid.f4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid.f4{grid-template-columns:1fr}}
.ticks li strong{font-weight:400}

/* =========================================================
   PREMIUM MOTION LAYER
   ========================================================= */

/* scroll progress hairline */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:99;pointer-events:none;background:transparent}
.progress i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(194,178,116,.25),var(--gold) 60%,var(--gold-hi));
  box-shadow:0 0 14px rgba(194,178,116,.55);transition:transform .1s linear;
}

/* refined reveal — clip + lift */
.rv{opacity:0;transform:translateY(30px);clip-path:inset(0 0 14% 0);
    transition:opacity 1.05s cubic-bezier(.22,.8,.2,1),transform 1.05s cubic-bezier(.22,.8,.2,1),clip-path 1.2s cubic-bezier(.22,.8,.2,1)}
.rv.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* eyebrow rule draws in */
.eyebrow::before{width:0;transition:width .9s cubic-bezier(.22,.8,.2,1) .18s}
.rv.in .eyebrow::before,.eyebrow.in::before{width:34px}
.rv.in>.eyebrow::before{width:34px}

/* image curtain reveal */
.frame{position:relative;overflow:hidden;isolation:isolate}
.frame::after{
  content:"";position:absolute;inset:0;z-index:3;background:var(--ink);
  transform:scaleY(1);transform-origin:top;
  transition:transform 1.15s cubic-bezier(.76,0,.24,1);
}
.rv.in .frame::after,.frame.in::after{transform:scaleY(0);transform-origin:bottom}
.frame img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.22,.8,.2,1)}
.rv.in .frame img,.frame.in img{transform:scale(1)}
.frame:hover img{transform:scale(1.045)}

/* hero parallax target */
.hero-bg{will-change:transform}

/* button refinement */
.btn{letter-spacing:.24em}
.btn-solid{box-shadow:0 0 0 rgba(194,178,116,0);transition:box-shadow .5s ease,filter .4s ease}
.btn-solid:hover{box-shadow:0 10px 38px -12px rgba(194,178,116,.55)}
.btn:not(.btn-solid):hover{border-color:var(--gold-hi)}

/* card + service hover lift */
.svc{transition:padding-left .5s cubic-bezier(.22,.8,.2,1),background .5s}
.svc:hover{background:linear-gradient(90deg,rgba(194,178,116,.05),transparent 55%)}
.card{transition:border-color .5s,transform .5s cubic-bezier(.22,.8,.2,1),background .5s}
.card:hover{background:linear-gradient(180deg,rgba(194,178,116,.05),transparent 60%),var(--ink-2)}

/* gallery tiles get their own stagger */
.gal .frame::after{transition-duration:1.05s}
.gal .frame:nth-child(2)::after{transition-delay:.09s}
.gal .frame:nth-child(3)::after{transition-delay:.18s}
.gal .frame:nth-child(4)::after{transition-delay:.27s}
.gal .frame:nth-child(5)::after{transition-delay:.36s}
.gal .frame:nth-child(6)::after{transition-delay:.12s}
.gal .frame:nth-child(7)::after{transition-delay:.21s}
.gal .frame:nth-child(8)::after{transition-delay:.30s}
.gal .frame:nth-child(9)::after{transition-delay:.39s}
.gal .frame:nth-child(10)::after{transition-delay:.48s}
.gal .frame:nth-child(11)::after{transition-delay:.15s}
.gal .frame:nth-child(12)::after{transition-delay:.24s}
.gal .frame:nth-child(13)::after{transition-delay:.33s}
.gal .frame:nth-child(14)::after{transition-delay:.42s}
.gal .frame:nth-child(15)::after{transition-delay:.51s}

/* section hairline accents */
.band{position:relative}
.band::before,.band::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:min(620px,70%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.band::before{top:0}.band::after{bottom:0}

/* FAQ smoothing */
.faq details{transition:background .4s}
.faq details[open]{background:linear-gradient(90deg,rgba(194,178,116,.04),transparent 60%)}

/* quote mark flourish */
.quote{position:relative}
.quote::before{
  content:"\201C";position:absolute;top:-.45em;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:clamp(5rem,11vw,9rem);line-height:1;
  color:var(--gold);opacity:.14;pointer-events:none;
}

/* page intro veil */
.veil{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-items:center;transition:opacity .7s ease .25s,visibility 0s linear .95s;
}
.veil img{height:62px;width:auto;opacity:0;transform:translateY(8px);
  animation:veilmark 1s cubic-bezier(.22,.8,.2,1) forwards}
@keyframes veilmark{to{opacity:1;transform:none}}
.veil.gone{opacity:0;visibility:hidden}

@media(prefers-reduced-motion:reduce){
  .rv,.frame::after,.frame img,.veil img,.progress i{transition:none !important;animation:none !important}
  .rv{opacity:1;transform:none;clip-path:none}
  .frame::after{display:none}
  .frame img{transform:none}
  .veil{display:none}
  header{transition:none}
}

/* credentials strip (About) */
.creds-grid{grid-template-columns:repeat(3,1fr);display:grid;gap:0 clamp(24px,3vw,48px)}
.creds-grid li{border-top:1px solid var(--line-soft) !important;padding:20px 0 !important}
.creds-grid li:nth-child(-n+3){border-top:0 !important;padding-top:0 !important}
@media(max-width:820px){.creds-grid{grid-template-columns:repeat(2,1fr)}
  .creds-grid li:nth-child(-n+3){border-top:1px solid var(--line-soft) !important;padding-top:20px !important}
  .creds-grid li:nth-child(-n+2){border-top:0 !important;padding-top:0 !important}}
@media(max-width:520px){.creds-grid{grid-template-columns:1fr}
  .creds-grid li:nth-child(2){border-top:1px solid var(--line-soft) !important;padding-top:20px !important}}

/* ===== failure-tolerant media =====
   a broken or blocked image must never print its alt text over the design,
   and must never leave a flat black hole */
.frame,.hero-bg{background:
  radial-gradient(120% 100% at 28% 0%,#23232a 0%,#121214 55%,#0C0C0E 100%)}
.frame img,.hero-bg img{color:transparent;font-size:0}
.frame img::after,.hero-bg img::after{content:"";display:block}

/* ===== social row (Simple Icons, CC0) ===== */
.socials{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.socials a{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line-soft);color:var(--bone-dim);
  transition:border-color .4s ease,color .4s ease,transform .4s cubic-bezier(.22,.8,.2,1),background .4s;
}
.socials svg{width:16px;height:16px;fill:currentColor;display:block}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(194,178,116,.08),transparent)}

/* ===== pedigree / career ===== */
.ped{list-style:none;margin:0;padding:0;counter-reset:ped}
.ped li{
  display:grid;grid-template-columns:auto minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(18px,3vw,40px);align-items:start;
  padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--line-soft);
}
.ped-l{padding-top:2px}
.ped-r{padding-top:3px}
.ped li:first-child{border-top:0;padding-top:0}
.ped .k{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--gold);line-height:1;min-width:2.2ch}
.ped h3{margin-bottom:8px}
.ped p{margin:0;color:var(--mute);font-size:.97rem;max-width:62ch}
.ped .where{display:block;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:9px}
@media(max-width:960px){.ped li{grid-template-columns:auto 1fr;row-gap:2px}.ped-r{grid-column:2;padding-top:4px}}
@media(max-width:560px){.ped li{grid-template-columns:1fr;gap:10px}.ped-r{grid-column:1}}

/* ===== long headlines must never overflow the viewport ===== */
h1,h2,h3{overflow-wrap:break-word;word-break:normal;hyphens:none;max-width:100%}
h1{text-wrap:balance}
section h1,section h2{max-width:min(100%,20ch)}
.hero h1{max-width:15ch}
.wrap>h1,.wrap>h2{max-width:min(100%,18ch)}
@media(min-width:1100px){section h1{max-width:min(100%,16ch)}}
/* page intro headlines sit in .wrap directly — keep them inside the gutter */
.crumb+.eyebrow+h1,.eyebrow+h1{max-width:min(100%,15ch)}

/* ===== footer service-area line: one line on desktop ===== */
.serving{
  margin-top:46px;line-height:2;color:var(--mute);
  font-size:clamp(.5rem,.72vw,.68rem);letter-spacing:0;
  text-align:center;margin-left:auto;margin-right:auto;
}
@media(min-width:900px){
  /* the full list must fit — scale it down rather than clip it */
  .serving{white-space:nowrap;line-height:1.9}
}
@media(max-width:899px){
  .serving{font-size:.74rem;line-height:1.85}
}

/* ===== testimonial placeholders — unmistakable until real quotes land ===== */
.quote-slot .quote p{color:var(--mute);font-style:italic}
.quote-slot cite{opacity:.55}
.ph-tag{
  display:block;font-family:var(--sans);font-style:normal;font-size:.58rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  border:1px dashed var(--line);padding:5px 12px;margin:0 auto 20px;width:max-content;
}

/* ===== date field: dark native picker, whole field clickable ===== */
input[type="date"]{color-scheme:dark;cursor:pointer;position:relative}
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(80%) sepia(28%) saturate(560%) hue-rotate(9deg) brightness(92%);
  cursor:pointer;opacity:.75;transition:opacity .3s;
  position:absolute;right:0;top:50%;transform:translateY(-50%);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}
input[type="date"]::-webkit-datetime-edit{color:var(--bone-dim)}
input[type="date"]:focus::-webkit-datetime-edit{color:var(--bone)}


/* ===== hero reveal: motion without the opacity gate =====
   LCP ignores anything at opacity:0, so the hero text could not count as
   painted until its 1.05s fade finished. Starting visible and animating only
   transform/clip-path keeps the same movement and frees the LCP. */
.hero .rv{opacity:1;transform:translateY(22px);clip-path:inset(0 0 18% 0)}
.hero .rv.in{transform:none;clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.hero .rv{transform:none;clip-path:none}}

/* ===== contact: the chef's photo leads on mobile =====
   Stacked, the side column lands after the whole form, so the portrait
   arrives too late to do anything. display:contents promotes its children
   into the grid so the photo can be ordered above the form. */

/* ===== shorter hero for inner pages (contact) =====
   full-height would push the booking form below the fold on every visit */
/* interior heroes align content to the top so every page starts at the
   same height; the home hero keeps its bottom-anchored full-screen look */
.hero-sm{min-height:clamp(320px,38svh,480px);align-items:flex-start}
.hero-sm .hero-bg img{object-position:center top}
/* narrow screens crop the wide plate horizontally, so bias to the subject */
@media(max-width:760px){.hero-sm.hero-face .hero-bg img{object-position:84% center}}
/* food heroes: plate detail is bright under the headline, so the text side gets a deeper ramp */
.hero-sm.hero-food .hero-bg::after{
  background:
    linear-gradient(180deg,rgba(11,11,12,.90) 0%,rgba(11,11,12,.52) 36%,rgba(11,11,12,.74) 74%,rgba(11,11,12,.98) 100%),
    linear-gradient(90deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.88) 34%,rgba(11,11,12,.52) 66%,rgba(11,11,12,.18) 100%);
}
@media(max-width:760px){
  .hero-sm.hero-food .hero-bg::after{
    background:linear-gradient(180deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.86) 38%,rgba(11,11,12,.90) 70%,rgba(11,11,12,.99) 100%);
  }
}
.hero-sm h1{font-size:clamp(2.4rem,5.6vw,4.6rem)}

/* a display h2 sharing a split column needs a smaller step than a full-width one */
/* ---- starting prices ---- */
.prices{list-style:none;margin:0;padding:0;border-top:1px solid rgba(214,196,138,.18)}
.prices li{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:19px 0;border-bottom:1px solid rgba(214,196,138,.18)}
.pr-l{color:var(--bone);font-size:1.02rem;line-height:1.35}
.pr-r{white-space:nowrap;color:var(--mute);font-size:.86rem;letter-spacing:.02em}
.pr-r strong{font-family:var(--serif);font-weight:400;font-size:1.72rem;color:var(--gold);
  letter-spacing:.01em;margin:0 2px}
.pr-r em{font-style:normal}
@media(max-width:560px){
  .prices li{flex-direction:column;gap:5px;padding:16px 0}
  .pr-r{align-self:flex-start}
}
.h2-col{font-size:clamp(1.9rem,2.9vw,2.9rem);line-height:1.12;text-wrap:balance}

/* ======================================================================
   CONCIERGE
   A quiet tab, a panel that belongs to the site rather than bolted on.
   Never opens itself. Nothing announces presence it cannot keep.
   ====================================================================== */

.cg-tab{
  position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px 13px 18px;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(to bottom,rgba(11,11,12,.72),rgba(11,11,12,.58));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  color:var(--bone);font-family:var(--sans);font-size:.67rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 34px rgba(0,0,0,.44);
  transition:color .4s ease,border-color .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
.cg-tab:hover{color:var(--gold-hi);border-color:rgba(194,178,116,.5);transform:translateY(-2px)}
.cg-tab:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.cg-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 0 rgba(194,178,116,.45);animation:cgPulse 4.6s ease-out infinite}
@keyframes cgPulse{0%,72%{box-shadow:0 0 0 0 rgba(194,178,116,.42)}100%{box-shadow:0 0 0 9px rgba(194,178,116,0)}}
body.cg-open .cg-tab{opacity:0;pointer-events:none;transform:translateY(8px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cg-tab{background:rgba(11,11,12,.95)}
}

.cg-scrim{
  position:fixed;inset:0;z-index:80;background:rgba(6,6,7,.62);
  opacity:0;transition:opacity .5s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
body.cg-open .cg-scrim{opacity:1}

.cg{
  position:fixed;top:0;right:0;z-index:90;
  width:min(428px,94vw);height:100%;height:100dvh;
  display:flex;flex-direction:column;
  border-left:1px solid var(--line);
  background:linear-gradient(to bottom,rgba(18,18,20,.93),rgba(11,11,12,.96));
  -webkit-backdrop-filter:blur(30px) saturate(175%);backdrop-filter:blur(30px) saturate(175%);
  box-shadow:-30px 0 80px rgba(0,0,0,.6);
  transform:translateX(100%);
  transition:transform .62s cubic-bezier(.19,1,.22,1);
}
body.cg-open .cg{transform:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cg{background:#121214}
}

/* the panel reuses header/section/footer elements, so it must opt out of the
   site-wide rules for those tags (header is position:fixed, section is padded) */
.cg header,.cg-head{position:relative;top:auto;left:auto;right:auto;z-index:auto;
  transform:none;background:none;border-bottom:1px solid var(--line-soft);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.cg section,.cg-view{padding:0;position:relative}
.cg footer,.cg-foot{background:none;border-top:1px solid var(--line-soft);padding:0}
.cg-head{
  flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:clamp(26px,4.4vw,34px) clamp(24px,4vw,32px) 22px;
  border-bottom:1px solid var(--line-soft);
}
.cg-name{font-family:var(--display);font-size:1.52rem;line-height:1.1;color:var(--bone);margin:0}
.cg-loc{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:9px 0 0}
.cg-x{flex:none;width:34px;height:34px;display:grid;place-items:center;margin:-4px -6px 0 0;
  background:none;border:0;color:var(--mute);cursor:pointer;transition:color .3s ease}
.cg-x:hover{color:var(--gold-hi)}
.cg-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.cg-x:focus-visible{outline:1px solid var(--gold);outline-offset:2px}

.cg-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(24px,4vw,32px) clamp(24px,4vw,32px) clamp(30px,5vw,40px);
  -webkit-overflow-scrolling:touch}
.cg-lede{font-size:.9rem;line-height:1.62;color:var(--bone-dim);margin:0 0 26px}

.cg-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.cg-list li{border-bottom:1px solid var(--line-soft)}
.cg-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 2px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:1.2rem;line-height:1.26;color:var(--bone);
  transition:color .32s ease}
.cg-q svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--mute);
  transform:translateX(-5px);opacity:0;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .36s ease,color .32s ease}
.cg-q:hover{color:var(--gold-hi)}
.cg-q:hover svg{transform:none;opacity:1;color:var(--gold)}
.cg-q:focus-visible{outline:1px solid var(--gold);outline-offset:2px}

.cg-back{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--mute);
  font-family:var(--sans);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  transition:color .3s ease}
.cg-back:hover{color:var(--gold-hi)}
.cg-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .36s cubic-bezier(.22,1,.36,1)}
.cg-back:hover svg{transform:translateX(-4px)}
.cg-back:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

.cg-h{font-family:var(--display);font-size:clamp(1.64rem,4.6vw,2rem);line-height:1.14;
  color:var(--bone);margin:0 0 18px;text-wrap:balance}
.cg-a{font-size:.95rem;line-height:1.72;color:var(--bone-dim);margin:0}

.cg-acts{display:flex;flex-direction:column;gap:2px;margin-top:30px;
  border-top:1px solid var(--line-soft)}
.cg-act{display:block;padding:16px 2px;border-bottom:1px solid var(--line-soft);
  color:var(--gold);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;transition:color .3s ease,padding-left .36s cubic-bezier(.22,1,.36,1)}
.cg-act:hover{color:var(--gold-hi);padding-left:9px}

.cg-more{margin-top:28px;padding:0;background:none;border:0;cursor:pointer;
  color:var(--mute);font-family:var(--sans);font-size:.78rem;line-height:1.5;
  text-align:left;border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease}
.cg-more:hover{color:var(--bone);border-bottom-color:var(--line)}

.cg-form{margin-top:28px;display:flex;flex-direction:column}
.cg-form label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin-bottom:9px}
.cg-form input:not([type=radio]):not([type=hidden]),.cg-form textarea{
  width:100%;margin-bottom:21px;padding:13px 14px;
  background:rgba(244,241,234,.035);border:1px solid var(--line-soft);border-radius:2px;
  color:var(--bone);font-family:var(--sans);font-size:.94rem;line-height:1.55;
  transition:border-color .3s ease,background .3s ease}
.cg-form textarea{resize:vertical;min-height:92px}
.cg-form input:focus,.cg-form textarea:focus{outline:none;border-color:var(--gold);
  background:rgba(244,241,234,.06)}
.cg-form ::placeholder{color:#6E6A62}
.cg-send{margin-top:6px;width:100%;justify-content:center}

.cg-foot{flex:none;display:flex;align-items:center;gap:13px;
  padding:17px clamp(24px,4vw,32px)!important;border-top:1px solid var(--line-soft);
  font-size:.72rem;letter-spacing:.11em;color:var(--mute)}
.cg-foot a{color:var(--mute);text-decoration:none;transition:color .3s ease}
.cg-foot a:hover{color:var(--gold-hi)}

/* the answer fades up as it replaces the list */
.cg-view[data-view]:not([hidden]){animation:cgIn .5s cubic-bezier(.19,1,.22,1) both}
@keyframes cgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(max-width:560px){
  .cg{width:100%;max-width:none;border-left:0}
  .cg-tab{right:14px;bottom:14px;padding:12px 18px 12px 15px;font-size:.62rem;letter-spacing:.18em}
  .cg-q{font-size:1.1rem;padding:17px 2px}
}
@media(prefers-reduced-motion:reduce){
  .cg,.cg-scrim,.cg-tab,.cg-q svg,.cg-back svg,.cg-act{transition-duration:.01ms}
  .cg-view[data-view]:not([hidden]){animation:none}
  .cg-dot{animation:none}
}

/* concierge: how to reach you */
.cg .cg-pref{margin:0 0 21px;padding:0;border:0;min-width:0}
.cg .cg-pref legend{padding:0;margin-bottom:11px;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.cg-chips{display:flex;gap:9px;flex-wrap:wrap}
.cg-chips label{position:relative;flex:1 1 auto}
.cg-chips input{position:absolute;opacity:0;width:0;height:0}
.cg-chips span{display:block;text-align:center;padding:11px 10px;cursor:pointer;
  border:1px solid var(--line-soft);border-radius:2px;
  background:rgba(244,241,234,.035);color:var(--bone-dim);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.cg-chips label:hover span{color:var(--bone);border-color:var(--line)}
.cg-chips input:checked + span{border-color:var(--gold);color:var(--gold-hi);
  background:rgba(194,178,116,.09)}
.cg-chips input:focus-visible + span{outline:1px solid var(--gold);outline-offset:2px}
.cg-opt{font-style:normal;color:#6E6A62;letter-spacing:.12em}

/* concierge: follow-up questions under an answer */
.cg-next{margin:30px 0 0;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute)}
.cg-sub{margin-top:12px;border-top:1px solid var(--line-soft)}
.cg-sub .cg-q{font-size:1.02rem;padding:15px 2px}

/* Any focused field under 16px makes iOS Safari zoom the whole page in — a jarring
   lurch no amount of styling recovers from. Must come last to beat the base rule. */
@media(max-width:760px){
  .cg-form input:not([type=radio]):not([type=hidden]),
  .cg-form textarea{font-size:16px}
}

/* ---- phone: comfortable targets in the footer and breadcrumb ----
   These are navigation people actually tap. 14–18px of text is a mis-tap
   waiting to happen; padding lifts the target without moving the type. */
@media(max-width:760px){
  footer li{margin:0}
  footer li a,footer .fcontact a{display:inline-block;padding:9px 0;line-height:1.3}
  .crumb{line-height:2.4}
  .crumb a{display:inline-block;padding:7px 2px}
  /* the skip link only appears on keyboard focus, but make it a real target too */
  .skip:focus{padding:14px 20px}
}

/* Phone and email inside a call-to-action band, the concierge footer, and the
   legal line are all things people tap. Inline links inside prose are left as
   they are — padding those would break the line rhythm of the paragraph. */
@media(max-width:760px){
  .band p.muted a{display:inline-block;padding:8px 0}
  .cg-foot a{display:inline-block;padding:5px 0}
  .fbot a{display:inline-block;padding:8px 0}
}

/* Contact page: the direct-contact card and the note under the form are the
   two places on the site where someone is most likely to tap a phone or email. */
@media(max-width:760px){
  .card ul.ticks li a{display:inline-block;padding:7px 0}
  form p.muted a{display:inline-block;padding:7px 0}
}

/* ================= MOBILE MENU =================
   The logo, the links and Book Now are three separate elements in the markup,
   so positioning them separately gave three different rhythms. With the menu
   open the whole .nav becomes ONE centred flex column and every gap derives
   from a single value, so the spacing is identical the whole way down and the
   group is centred as a unit.

   --navgap is the gap between the brand and the list, and the list and the
   button. The links carry 10px of padding top and bottom for tap targets, so
   the list's own gap is 20px smaller — that makes the *visible* space between
   every pair of items the same.                                              */
@media(max-width:1024px){
  .nav>.btn{display:none}

  body.nav-open .nav{
    --navgap:40px;
    position:fixed;inset:0;z-index:94;
    max-width:none;width:100%;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:var(--navgap);
    /* equal top and bottom, or centring is thrown off by the difference.
       The top value also has to clear the X in the corner. */
    padding:clamp(72px,9.5vh,100px) var(--gut);
    background:rgba(11,11,12,.98);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  }

  /* the list stops being its own overlay and becomes a row in that column */
  body.nav-open .nav ul{
    position:static;inset:auto;width:auto;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    padding:0;margin:0;
    gap:calc(var(--navgap) - 20px);
    opacity:1;pointer-events:auto;
  }

  body.nav-open header .brand{
    position:static;z-index:auto;margin:0 0 -3px;
    transform:scale(1.1);transform-origin:50% 50%;
    opacity:0;animation:navIn .5s cubic-bezier(.19,1,.22,1) .04s forwards;
  }
  body.nav-open .nav>.btn{
    display:inline-flex;position:static;transform:none;
    margin:-6px 0 0;padding:17px 44px;font-size:.66rem;letter-spacing:.24em;
    opacity:0;animation:navIn .5s cubic-bezier(.19,1,.22,1) .5s forwards;
  }
  @keyframes navIn{to{opacity:1}}

  /* the X stays pinned to the corner, above the column */
  body.nav-open .burger{position:fixed;top:22px;right:var(--gut);z-index:97}
}

/* Short phones: the same column, tightened so nothing has to overlap. */
@media(max-width:1024px) and (max-height:760px){
  body.nav-open .nav{--navgap:28px;padding-top:clamp(54px,7vh,72px);padding-bottom:clamp(54px,7vh,72px)}
  .nav ul a{padding:8px 6px;font-size:.98rem}
  body.nav-open .nav ul{gap:calc(var(--navgap) - 16px)}
  body.nav-open header .brand{transform:scale(.98)}
  /* the tighter link padding here shifts the end gaps by a few px */
  body.nav-open header .brand{margin:0 0 -4px}
  body.nav-open .nav>.btn{padding:14px 38px;margin:-4px 0 0}
}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){
  body.nav-open header .brand,body.nav-open .nav>.btn{animation:none;opacity:1}
}