/* ==========================================================================
   LUXALAD
   A black-and-ivory editorial system for a modern international food brand.
   Drawn from the rooms themselves: dark timber, deep green velvet, lush
   plant walls, warm low light, black surfaces, vivid food.
   Sharp edges. Hairlines. Large type. Photography first.
   ========================================================================== */

/* -------------------------------------------------- tokens */
:root{
  /* surfaces */
  --ink:#0C0D0C;
  --ink-2:#121413;
  --ink-3:#181B19;
  --forest:#16301F;
  --forest-2:#1E3A28;
  --ivory:#EFE9DD;
  --ivory-2:#E4DDCF;
  --bone:#F6F2EA;

  /* accents */
  --sage:#8FA882;
  --sage-dim:#4C6045;
  --leaf:#A8C48F;

  /* text */
  --on-dark:#EFE9DD;
  --on-dark-mute:rgba(239,233,221,.58);
  --on-light:#0C0D0C;
  --on-light-mute:rgba(12,13,12,.60);

  /* lines */
  --line-dark:rgba(239,233,221,.16);
  --line-dark-strong:rgba(239,233,221,.34);
  --line-light:rgba(12,13,12,.16);

  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --rail:clamp(1.15rem,4.4vw,4.25rem);
  --max:1680px;
  --head-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--font-body);
  font-size:clamp(.94rem,.9rem + .16vw,1.02rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block;border-radius:0}
figure{margin:0;min-width:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.032em;
  margin:0;
  text-wrap:balance;
}

::selection{background:var(--sage);color:var(--ink)}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* grid children must be allowed to shrink below image intrinsic width */
.g>*{min-width:0}

/* -------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--rail)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:absolute;left:1rem;top:-100px;z-index:200;background:var(--ivory);color:var(--ink);
  padding:.8rem 1.4rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:top .2s
}
.skip:focus{top:1rem}

/* panels */
.panel{padding-block:clamp(4.5rem,9vw,10rem);position:relative}
.panel--tight{padding-block:clamp(3rem,6vw,6rem)}
.panel--ivory{background:var(--ivory);color:var(--on-light)}
.panel--bone{background:var(--bone);color:var(--on-light)}
.panel--forest{background:var(--forest);color:var(--on-dark)}
.panel--ink2{background:var(--ink-2)}

/* -------------------------------------------------- type */
.d1{font-size:clamp(2.9rem,1.1rem + 7.9vw,9.5rem);letter-spacing:-.04em;line-height:.9}
.d2{font-size:clamp(2.2rem,1.1rem + 4.9vw,6rem);letter-spacing:-.036em;line-height:.93}
.d3{font-size:clamp(1.7rem,1.15rem + 2.5vw,3.4rem);letter-spacing:-.03em}
.d4{font-size:clamp(1.25rem,1.05rem + 1.1vw,1.9rem);letter-spacing:-.022em}

.label{
  font-family:var(--font-body);font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;margin:0 0 1.4rem;
  display:flex;align-items:center;gap:.8rem;color:var(--sage)
}
.label::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.panel--ivory .label,.panel--bone .label{color:var(--sage-dim)}

.body-l{font-size:clamp(1rem,.95rem + .45vw,1.22rem);line-height:1.55;max-width:50ch;color:var(--on-dark-mute)}
.panel--ivory .body-l,.panel--bone .body-l{color:var(--on-light-mute)}
p.copy{color:var(--on-dark-mute);max-width:46ch}
.panel--ivory p.copy,.panel--bone p.copy{color:var(--on-light-mute)}

.rule{height:1px;background:var(--line-dark);border:0;margin:0}
.panel--ivory .rule,.panel--bone .rule{background:var(--line-light)}
.rule--sage{background:var(--sage);opacity:.8}

/* -------------------------------------------------- buttons (rectangular) */
.btn{
  display:inline-flex;align-items:center;gap:.9rem;
  padding:1.05rem 1.9rem;border:1px solid var(--line-dark-strong);border-radius:0;
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:var(--on-dark);background:transparent;position:relative;overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease)
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--ivory);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)
}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--ink);border-color:var(--ivory)}
.btn:hover::after{transform:scaleY(1)}
.btn svg{width:14px;height:14px;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}

.btn--solid{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn--solid::after{background:var(--forest)}
.btn--solid:hover{color:var(--ivory);border-color:var(--forest)}

.btn--sage{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
.btn--sage::after{background:var(--ivory)}
.btn--sage:hover{color:var(--ink);border-color:var(--ivory)}

.panel--ivory .btn,.panel--bone .btn{color:var(--on-light);border-color:var(--line-light)}
.panel--ivory .btn::after,.panel--bone .btn::after{background:var(--ink)}
.panel--ivory .btn:hover,.panel--bone .btn:hover{color:var(--ivory);border-color:var(--ink)}
.panel--ivory .btn--solid,.panel--bone .btn--solid{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.panel--ivory .btn--solid::after,.panel--bone .btn--solid::after{background:var(--forest)}
.panel--ivory .btn--solid:hover,.panel--bone .btn--solid:hover{color:var(--ivory);border-color:var(--forest)}

.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}

.tlink{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:.55rem;border-bottom:1px solid var(--line-dark-strong);
  transition:gap .4s var(--ease),color .3s,border-color .3s
}
.tlink:hover{gap:1.1rem;color:var(--sage);border-color:var(--sage)}
.tlink svg{width:13px;height:13px;flex:none}
.panel--ivory .tlink,.panel--bone .tlink{border-color:var(--line-light)}
.panel--ivory .tlink:hover,.panel--bone .tlink:hover{color:var(--sage-dim);border-color:var(--sage-dim)}

/* -------------------------------------------------- header */
.head{
  position:fixed;inset:0 0 auto;z-index:90;height:var(--head-h);display:flex;align-items:center;
  transition:background .45s var(--ease),border-color .45s
}
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent;transition:background .45s}
.head__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--rail);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.head.is-solid{background:rgba(12,13,12,.9);backdrop-filter:saturate(1.2) blur(16px)}
.head.is-solid::after{background:var(--line-dark)}

.brand{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;flex:none}
.brand img{width:34px;height:34px;flex:none}
.brand span{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark);padding-left:.05em
}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.1vw,2.3rem)}
.nav a{
  color:var(--on-dark);text-decoration:none;font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;position:relative;padding-block:.5rem;
  transition:color .3s
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--sage);transition:width .4s var(--ease)}
.nav a:hover{color:var(--sage)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--sage)}
.nav .btn{padding:.78rem 1.3rem;font-size:.64rem}
.nav .btn::after{display:none}
.nav .btn{transition:background .35s,color .35s,border-color .35s}
.nav .btn:hover{background:var(--ivory);color:var(--ink)}

.burger{
  display:none;background:none;border:0;padding:.5rem 0;color:var(--on-dark);
  font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;align-items:center;gap:.65rem
}
.burger__bars{display:inline-block;width:20px;height:11px;position:relative}
.burger__bars i{position:absolute;left:0;height:1px;width:100%;background:currentColor;transition:transform .4s var(--ease)}
.burger__bars i:nth-child(1){top:0}
.burger__bars i:nth-child(2){top:10px}
body.is-locked .burger__bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.is-locked .burger__bars i:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:1040px){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* drawer */
.drawer{
  position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--head-h) + 2rem) var(--rail) 2.5rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease);visibility:hidden
}
.drawer.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.drawer__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.drawer__list li{border-bottom:1px solid var(--line-dark);overflow:hidden}
.drawer__list a{
  display:flex;align-items:center;gap:1.2rem;padding:1.05rem 0;text-decoration:none;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.9rem,9vw,2.8rem);
  transform:translateY(105%);transition:transform .6s var(--ease),color .3s
}
.drawer.is-open .drawer__list a{transform:none}
.drawer__list a:hover{color:var(--sage)}
.drawer__list em{
  font-style:normal;font-family:var(--font-body);font-size:.6rem;font-weight:600;
  letter-spacing:.2em;color:var(--sage);flex:none;transform:translateY(-.55em)
}
.drawer__foot{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1.3rem;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)}
.drawer__foot a{text-decoration:none}
.drawer__foot a:hover{color:var(--sage)}
@media (prefers-reduced-motion:reduce){.drawer,.drawer__list a{transition:none}}

/* -------------------------------------------------- reveal
   Progressive enhancement: content is visible by default. Only once the
   `js` class is set do elements start hidden, so a failed script, a blocked
   observer or no JS at all can never leave the page blank. */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-1{transition-delay:.08s}.js .rv-2{transition-delay:.16s}
.js .rv-3{transition-delay:.24s}.js .rv-4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* image frame — sharp, no cards */
.fig{position:relative;overflow:hidden;background:var(--ink-3);min-width:0}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.fig--zoom:hover img{transform:scale(1.04)}
.r-3-4{aspect-ratio:3/4}
.r-4-5{aspect-ratio:4/5}
.r-1-1{aspect-ratio:1/1}
.r-4-3{aspect-ratio:4/3}
.r-3-2{aspect-ratio:3/2}
.r-16-9{aspect-ratio:16/9}
.r-21-9{aspect-ratio:21/9}
.cap{margin-top:.8rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)}
.panel--ivory .cap,.panel--bone .cap{color:var(--on-light-mute)}

/* -------------------------------------------------- hero (asymmetric split) */
.hero{min-height:100svh;display:grid;grid-template-columns:1fr;background:var(--ink);position:relative}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}}
.hero__type{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--head-h) + clamp(2.5rem,7vw,5rem)) var(--rail) clamp(2.5rem,5vw,4.5rem);
  position:relative;z-index:2
}
@media (min-width:900px){.hero__type{padding-right:clamp(2rem,4vw,5rem)}}
.hero__type h1{color:var(--on-dark);max-width:12ch;
  font-size:clamp(2.4rem,.85rem + 4.9vw,5.4rem);letter-spacing:-.04em;line-height:.92}
.hero__type h1 em{font-style:normal;color:var(--sage)}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.hero__meta span{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-mute)}
.hero__sub{max-width:38ch;margin:clamp(1.5rem,3vw,2.2rem) 0 clamp(1.8rem,4vw,2.8rem);color:var(--on-dark-mute);
  font-size:clamp(.98rem,.94rem + .3vw,1.1rem)}
.hero__media{position:relative;min-height:56svh;overflow:hidden}
@media (min-width:900px){.hero__media{min-height:100svh}}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transform:scale(1.06);animation:heroIn 2.8s var(--ease) forwards}
@keyframes heroIn{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero__media img{animation:none;transform:none}}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,12,.55),transparent 32%)}
@media (max-width:899px){.hero__media::after{background:linear-gradient(180deg,rgba(12,13,12,.5),transparent 40%)}}
.hero__index{
  position:absolute;right:var(--rail);bottom:clamp(2.5rem,5vw,4.5rem);z-index:3;
  writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--on-dark-mute);display:flex;align-items:center;gap:1rem
}
.hero__index::after{content:"";width:1px;height:54px;background:linear-gradient(var(--sage),transparent)}
@media (max-width:899px){.hero__index{display:none}}

/* -------------------------------------------------- ticker (thin, restrained) */
.ticker{background:var(--ink);color:var(--on-dark);overflow:hidden;padding:.9rem 0;
  border-block:1px solid var(--line-dark)}
.ticker--ivory{background:var(--ivory);color:var(--on-light);border-color:var(--line-light)}
.ticker__track{display:flex;width:max-content;animation:slide 52s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}
.ticker span{
  font-size:.66rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  padding-inline:1.5rem;white-space:nowrap;display:inline-flex;align-items:center;gap:1.5rem
}
.ticker span::after{content:"";width:4px;height:4px;background:var(--sage);flex:none}

/* -------------------------------------------------- section heads */
.shead{display:grid;gap:1.6rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:920px){
  .shead--split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,5rem);align-items:end}
}
.shead p{margin:0}

/* -------------------------------------------------- editorial split */
.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:920px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,6vw,7rem)}}
.split--wide-left{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.split__stack{position:relative}
.split__stack .fig+.fig{
  position:absolute;right:-6%;bottom:-11%;width:42%;
  outline:1px solid var(--line-dark);outline-offset:0
}
@media (max-width:640px){.split__stack .fig+.fig{width:46%;right:0;bottom:-7%}}

/* manifesto — oversized type block */
.manifesto{padding-block:clamp(4rem,10vw,11rem)}
.manifesto h2{max-width:16ch}
.manifesto__grid{display:grid;gap:clamp(1.8rem,4vw,3rem);margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:820px){.manifesto__grid{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem)}}
.manifesto__grid p{margin:0;color:var(--on-dark-mute);font-size:.98rem;padding-top:1.3rem;border-top:1px solid var(--line-dark)}
.panel--ivory .manifesto__grid p{color:var(--on-light-mute);border-color:var(--line-light)}

/* -------------------------------------------------- steps / index rows */
.steps{border-top:1px solid var(--line-dark)}
.panel--ivory .steps,.panel--bone .steps{border-color:var(--line-light)}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:1rem 1.4rem;align-items:start;
  padding:clamp(1.5rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line-dark)
}
.panel--ivory .step,.panel--bone .step{border-color:var(--line-light)}
@media (min-width:860px){
  .step{grid-template-columns:5rem minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,4rem);align-items:baseline}
}
.step__n{font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--sage);padding-top:.35em}
.step h3{font-size:clamp(1.35rem,1.1rem + 1.4vw,2.3rem)}
.step p{margin:0;color:var(--on-dark-mute);font-size:.96rem;grid-column:2/-1}
.panel--ivory .step p,.panel--bone .step p{color:var(--on-light-mute)}
@media (min-width:860px){.step p{grid-column:auto}}

/* -------------------------------------------------- editorial photo grid */
.g{display:grid;gap:clamp(.7rem,1.5vw,1.25rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-12{grid-template-columns:repeat(6,1fr)}
@media (min-width:900px){.g-12{grid-template-columns:repeat(12,1fr)}}

.g-12>.t-a,.g-12>.t-b{grid-column:span 6}
.g-12>.t-c,.g-12>.t-d,.g-12>.t-e{grid-column:span 2}
@media (min-width:900px){
  .g-12>.t-a{grid-column:span 7}
  .g-12>.t-b{grid-column:span 5}
  .g-12>.t-c,.g-12>.t-d,.g-12>.t-e{grid-column:span 4}
}
/* on phones the three square tiles need room to breathe: 2-up, then a wide one */
@media (max-width:899px){
  .g-12>.t-c,.g-12>.t-d{grid-column:span 3}
  .g-12>.t-e{grid-column:span 6}
  .g-12>.t-e .fig{aspect-ratio:3/2}
  .tile__cap{flex-direction:column-reverse;align-items:flex-start;gap:.35rem}
}

.tile{position:relative;display:block;text-decoration:none;overflow:hidden}
.tile .fig{height:100%}
.tile__cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1rem,2vw,1.7rem);
  background:linear-gradient(transparent,rgba(12,13,12,.86));color:var(--on-dark);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem
}
.tile__cap h3{font-size:clamp(1.05rem,.95rem + .8vw,1.7rem)}
.tile__cap em{font-style:normal;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);font-weight:600}

/* asymmetric collage */
.collage{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.7rem,1.6vw,1.4rem);align-items:start}
.k1{grid-column:1/5}
.k2{grid-column:5/7;align-self:end}
.k3{grid-column:1/4}
.k4{grid-column:4/7;align-self:end}
.k5{grid-column:1/5}
.k6{grid-column:5/7;align-self:end}
@media (min-width:900px){
  .collage{grid-template-columns:repeat(12,1fr)}
  .k1{grid-column:1/6}
  .k2{grid-column:6/10;margin-top:12%}
  .k3{grid-column:10/13;margin-top:-4%}
  .k4{grid-column:1/4;margin-top:6%}
  .k5{grid-column:4/10}
  .k6{grid-column:10/13;margin-top:14%}
}
.collage__word{grid-column:1/-1;padding-block:clamp(2.5rem,6vw,5rem);text-align:center}
.collage__word h3{font-size:clamp(1.9rem,1.1rem + 4.4vw,5.2rem);letter-spacing:-.04em;max-width:16ch;margin-inline:auto}
.collage__word em{font-style:normal;color:var(--sage)}

/* full-bleed cinematic band */
.band{position:relative;min-height:min(86svh,780px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(12,13,12,.5),rgba(12,13,12,.05) 34%,rgba(12,13,12,.92)),
    linear-gradient(90deg,rgba(12,13,12,.78),rgba(12,13,12,.2) 46%,transparent 72%)}
.band__in{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;
  padding:clamp(3rem,7vw,6rem) var(--rail);color:var(--on-dark)}
.band h2{color:var(--on-dark);max-width:13ch}
.band .copy{margin:1.4rem 0 2.2rem}

/* -------------------------------------------------- locations index */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.panel--ivory .index,.panel--bone .index{border-color:var(--line-light)}
.index li{border-bottom:1px solid var(--line-dark)}
.panel--ivory .index li,.panel--bone .index li{border-color:var(--line-light)}
.index a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.9rem,3vw,2.5rem);padding:clamp(1.1rem,2.4vw,1.85rem) 0;text-decoration:none;
  transition:padding-left .5s var(--ease),color .35s
}
@media (hover:hover){.index a:hover{padding-left:clamp(.6rem,1.8vw,1.8rem)}}
.index__n{font-size:.64rem;letter-spacing:.2em;color:var(--sage);font-weight:600;font-variant-numeric:tabular-nums}
.index__name{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.038em;line-height:1;
  font-size:clamp(1.65rem,1rem + 2.9vw,3.8rem);transition:color .35s
}
.index a:hover .index__name{color:var(--sage)}
.index__right{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.4rem);flex:none}
.index__place{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute);white-space:nowrap}
.panel--ivory .index__place,.panel--bone .index__place{color:var(--on-light-mute)}
@media (max-width:660px){.index__place{display:none}}
.index__arrow{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.index a:hover .index__arrow{transform:translateX(6px)}

/* hover peek */
.peek{
  position:fixed;top:0;left:0;width:250px;height:320px;pointer-events:none;z-index:70;opacity:0;
  overflow:hidden;transform:translate3d(-50%,-50%,0);transition:opacity .4s var(--ease)
}
.peek.is-on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover}
@media (max-width:1040px),(hover:none){.peek{display:none}}

/* location plates (locations page) */
.plates{display:grid;gap:clamp(1.2rem,2.6vw,2.2rem)}
@media (min-width:720px){.plates{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.plates{grid-template-columns:repeat(3,1fr)}}
.plate{display:flex;flex-direction:column;text-decoration:none;position:relative;
  transition:transform .6s var(--ease)}
.plate:hover{transform:translateY(-5px)}
.plate .fig{aspect-ratio:4/5}
.plate__body{padding-top:1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;
  border-top:1px solid var(--line-dark);margin-top:1.1rem}
.panel--ivory .plate__body,.panel--bone .plate__body{border-color:var(--line-light)}
.plate__place{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);font-weight:600}
.plate h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem)}
.plate__addr{margin:0;font-size:.88rem;color:var(--on-dark-mute);line-height:1.5}
.panel--ivory .plate__addr,.panel--bone .plate__addr{color:var(--on-light-mute)}
.plate__go{margin-top:auto;padding-top:.9rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;display:inline-flex;align-items:center;gap:.55rem;transition:gap .4s var(--ease),color .3s}
.plate:hover .plate__go{gap:1rem;color:var(--sage)}
.plate__go svg{width:13px;height:13px}

.ghead{display:flex;align-items:baseline;gap:1.3rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.ghead h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3.4rem)}
.ghead span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mute)}
.panel--ivory .ghead span,.panel--bone .ghead span{color:var(--on-light-mute)}
.ghead::after{content:"";flex:1;height:1px;background:var(--line-dark);min-width:40px}
.panel--ivory .ghead::after,.panel--bone .ghead::after{background:var(--line-light)}

.soon{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.soon li{border-bottom:1px solid var(--line-dark);width:100%;padding:.95rem 0;
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.soon em{font-style:normal;color:var(--sage);font-weight:500}

/* -------------------------------------------------- location page */
.lhero{position:relative;min-height:min(94svh,900px);display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.lhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lhero::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(12,13,12,.6),rgba(12,13,12,.04) 28%,rgba(12,13,12,.6) 66%,rgba(12,13,12,.96)),
    linear-gradient(90deg,rgba(12,13,12,.6),rgba(12,13,12,.1) 48%,transparent 74%)}
.lhero__in{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;
  padding:0 var(--rail) clamp(2.2rem,5vw,4rem);color:var(--on-dark)}
.lhero__back{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;font-size:.64rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:clamp(1.5rem,3vw,2.4rem);
  transition:gap .4s var(--ease),color .3s}
.lhero__back:hover{gap:1rem;color:var(--sage)}
.lhero__back svg{width:13px;height:13px}
.lhero__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.lhero h1{color:var(--on-dark)}
.lhero__eyebrow{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sage);
  font-weight:600;margin:0 0 1.1rem}

.linfo{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:1000px){.linfo{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(3rem,6vw,6.5rem)}}
.facts{display:grid;gap:0;border-top:1px solid var(--line-dark)}
.fact{padding:clamp(1.2rem,2.4vw,1.7rem) 0;border-bottom:1px solid var(--line-dark)}
.fact h2{font-family:var(--font-body);font-size:.62rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sage);margin-bottom:.7rem}
.fact p{margin:0;font-size:clamp(1rem,.95rem + .35vw,1.18rem);line-height:1.5;max-width:30ch}
.fact a{text-decoration:none;border-bottom:1px solid var(--line-dark-strong);transition:color .3s,border-color .3s}
.fact a:hover{color:var(--sage);border-color:var(--sage)}

.hours{list-style:none;margin:0;padding:0;max-width:430px}
.hours li{display:flex;justify-content:space-between;gap:1.5rem;padding:.55rem 0;font-size:.94rem;
  color:var(--on-dark-mute)}
.hours .t{font-variant-numeric:tabular-nums}
.hours li.is-today{color:var(--on-dark)}
.hours li.is-today .d{font-weight:600;display:inline-flex;align-items:center;gap:.7rem}
.hours li.is-today .d::after{content:"Today";font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:var(--sage);padding:.2rem .5rem;font-weight:600}
.hours li.is-today .t{color:var(--on-dark);font-weight:600}

.lart{display:grid;gap:clamp(.8rem,1.8vw,1.3rem)}
@media (min-width:620px){
  .lart--two{grid-template-columns:repeat(5,1fr)}
  .lart--two .fig:first-child{grid-column:span 3}
  .lart--two .fig:last-child{grid-column:span 2;align-self:end}
}
.lart--one .fig{aspect-ratio:4/5}

.nearby{border-top:1px solid var(--line-dark)}
.nearby a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;border-bottom:1px solid var(--line-dark);text-decoration:none;
  transition:padding-left .5s var(--ease),color .3s}
@media (hover:hover){.nearby a:hover{padding-left:1rem;color:var(--sage)}}
.nearby strong{font-family:var(--font-display);font-size:clamp(1.1rem,1rem + .7vw,1.6rem);font-weight:700;letter-spacing:-.03em}
.nearby span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)}

/* -------------------------------------------------- menu */
.mbar{position:sticky;top:var(--head-h);z-index:40;background:rgba(12,13,12,.93);
  backdrop-filter:saturate(1.2) blur(16px);border-bottom:1px solid var(--line-dark)}
.mbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem;flex-wrap:wrap}
.chips{display:flex;gap:1.4rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.2rem 0}
.chips::-webkit-scrollbar{display:none}
.chips a{white-space:nowrap;text-decoration:none;font-size:.64rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-mute);padding-bottom:.35rem;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s}
.chips a:hover,.chips a.is-active{color:var(--on-dark);border-color:var(--sage)}

.lang{display:inline-flex;border:1px solid var(--line-dark-strong);flex:none}
.lang button{background:none;border:0;padding:.55rem 1.05rem;font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-mute);transition:background .3s,color .3s}
.lang button[aria-pressed="true"]{background:var(--ivory);color:var(--ink)}

.course{padding-block:clamp(3rem,6vw,6rem);border-bottom:1px solid var(--line-dark)}
.course__grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:1000px){.course__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.course__head{position:sticky;top:calc(var(--head-h) + 76px)}
@media (max-width:999px){.course__head{position:static}}
.course__head h2{font-size:clamp(2.2rem,1.3rem + 4vw,4.8rem)}
.course__head .copy{margin:1.2rem 0 1.8rem}

.items{display:grid;gap:0;border-top:1px solid var(--line-dark)}
.item{padding:clamp(1rem,2vw,1.4rem) 0;border-bottom:1px solid var(--line-dark)}
.item__top{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem}
.item h3{font-size:clamp(1.05rem,.98rem + .55vw,1.4rem);font-weight:700}
.item__note{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:600;flex:none}
.item p{margin:.45rem 0 0;color:var(--on-dark-mute);font-size:.9rem}
.item__ing{margin:.6rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .9rem}
.item__ing li{font-size:.76rem;color:var(--on-dark-mute);position:relative;padding-left:.75rem}
.item__ing li::before{content:"";position:absolute;left:0;top:.62em;width:3px;height:3px;background:var(--sage)}

.bases{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.2vw,.9rem);margin-top:1.8rem}
.base .fig{aspect-ratio:1/1;margin-bottom:.65rem}
.base strong{display:block;font-family:var(--font-display);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase}

.note{border:1px solid var(--line-dark);padding:clamp(1.4rem,3vw,2.2rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem}
.note p{margin:0;max-width:52ch;color:var(--on-dark-mute);font-size:.9rem}
.note strong{color:var(--on-dark)}

/* menu artwork */
.sheets{display:grid;gap:clamp(.8rem,1.8vw,1.4rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:880px){.sheets{grid-template-columns:repeat(4,1fr)}}
.sheet{border:0;background:none;padding:0;text-align:left;overflow:hidden;transition:transform .55s var(--ease)}
.sheet:hover{transform:translateY(-6px)}
/* menu artwork must never be cropped — show the whole page */
.sheet .fig{outline:1px solid var(--line-dark);aspect-ratio:auto}
.sheet .fig img{height:auto;object-fit:fill}
.sheet span{display:block;margin-top:.8rem;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mute)}

.lb{position:fixed;inset:0;z-index:120;background:rgba(8,9,8,.97);display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,3vw,2.5rem)}
.lb.is-open{display:flex}
.lb img{max-width:min(94vw,720px);max-height:86svh;width:auto;object-fit:contain}
.lb__close,.lb__nav{position:absolute;background:transparent;border:1px solid var(--line-dark-strong);
  color:var(--on-dark);width:46px;height:46px;display:grid;place-items:center;
  transition:background .3s,color .3s,border-color .3s}
.lb__close:hover,.lb__nav:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.lb__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__nav svg,.lb__close svg{width:16px;height:16px}
.lb__prev{left:clamp(.6rem,3vw,2rem);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(.6rem,3vw,2rem);top:50%;transform:translateY(-50%)}
.lb__count{position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  color:var(--on-dark-mute);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}

/* -------------------------------------------------- about */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line-dark)}
@media (min-width:880px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:clamp(1.6rem,3vw,2.6rem) 0;border-bottom:1px solid var(--line-dark);
  border-right:1px solid var(--line-dark);padding-inline:clamp(1rem,2.5vw,2rem)}
.stat:nth-child(2n){border-right:0}
@media (min-width:880px){.stat{border-right:1px solid var(--line-dark)}.stat:nth-child(2n){border-right:1px solid var(--line-dark)}.stat:last-child{border-right:0}}
.stat:first-child{padding-left:0}
.stat strong{display:block;font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(2.4rem,1.5rem + 3.6vw,4.6rem);line-height:1;color:var(--on-dark)}
.stat span{display:block;margin-top:.8rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}

.chapters{display:grid;gap:clamp(2.2rem,4vw,3.5rem)}
@media (min-width:920px){.chapters{grid-template-columns:repeat(2,1fr);gap:clamp(3rem,6vw,6rem)}}
.chapter{border-top:1px solid var(--line-dark);padding-top:1.4rem}
.chapter h3{font-size:clamp(1.3rem,1.1rem + 1.1vw,2rem);margin-bottom:1.1rem;color:var(--sage)}
.chapter p{margin:0 0 1rem;color:var(--on-dark-mute)}
.chapter p:last-child{margin-bottom:0}

.values{border-top:1px solid var(--line-dark)}
.value{padding:clamp(1.5rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line-dark);
  display:grid;gap:.8rem}
@media (min-width:860px){.value{grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:baseline}}
.value h3{font-size:clamp(1.2rem,1.05rem + .9vw,1.7rem)}
.value p{margin:0;color:var(--on-dark-mute);max-width:52ch}

/* -------------------------------------------------- contact */
.cgrid{display:grid;gap:0;border-top:1px solid var(--line-dark)}
@media (min-width:920px){.cgrid{grid-template-columns:repeat(2,1fr);column-gap:clamp(2.5rem,6vw,6rem)}}
.cblock{padding:clamp(1.8rem,3.5vw,2.8rem) 0;border-bottom:1px solid var(--line-dark)}
.cblock h3{font-size:clamp(1.25rem,1.1rem + .9vw,1.75rem);margin-bottom:.9rem}
.cblock p{margin:0 0 1rem;color:var(--on-dark-mute);max-width:46ch;font-size:.94rem}
.cblock a.big{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.35rem,1rem + 1.8vw,2.4rem);text-decoration:none;word-break:break-word;
  display:inline-block;transition:color .3s}
.cblock a.big:hover{color:var(--sage)}
.social{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.social a{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  border:1px solid var(--line-dark-strong);padding:.8rem 1.3rem;margin:0 -1px -1px 0;
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s}
.social a:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.social svg{width:15px;height:15px}

.dirlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.dirlist li{border-bottom:1px solid var(--line-dark)}
.dirlist a{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;text-decoration:none;
  font-size:.92rem;transition:padding-left .4s var(--ease),color .3s}
@media (hover:hover){.dirlist a:hover{padding-left:.6rem;color:var(--sage)}}
.dirlist span{color:var(--on-dark-mute);font-variant-numeric:tabular-nums}

/* -------------------------------------------------- footer */
.foot{background:var(--ink);color:var(--on-dark);border-top:1px solid var(--line-dark);
  padding-top:clamp(3rem,6vw,5.5rem)}
.foot__top{display:grid;gap:clamp(2rem,4vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:920px){.foot__top{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}}
.foot__mark{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.foot__mark img{width:44px;height:44px}
.foot__mark strong{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:.3em;text-transform:uppercase}
.foot__lede{color:var(--on-dark-mute);max-width:36ch;margin:0 0 1.8rem;font-size:.92rem}
.foot h4{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);
  font-family:var(--font-body);font-weight:600;margin-bottom:1.2rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot ul a{text-decoration:none;color:var(--on-dark-mute);font-size:.9rem;transition:color .3s,padding-left .35s var(--ease)}
.foot ul a:hover{color:var(--sage);padding-left:.35rem}
.foot__bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-block:1.5rem;border-top:1px solid var(--line-dark);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mute)}
.foot__bot a{text-decoration:none}
.foot__bot a:hover{color:var(--sage)}
.foot__word{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:.78;
  font-size:clamp(3.2rem,15.5vw,15rem);color:rgba(239,233,221,.05);
  text-align:center;padding-bottom:.08em;user-select:none;overflow:hidden;white-space:nowrap
}

/* -------------------------------------------------- inner page masthead */
.masthead{padding-top:calc(var(--head-h) + clamp(3.5rem,8vw,7rem));padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.masthead__row{display:grid;gap:2rem}
@media (min-width:920px){.masthead__row{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end}}
.masthead h1{max-width:15ch}
