/* ==========================================================================
   The Hairy Lemon — Sotogrande
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Drawn from the restaurant: the deep blue service-ware and signage, the
     brand napkins, the garden, and — of course — a lemon. */
  --ink:#102a35;
  --ink-80:rgba(16,42,53,.82);
  --ink-60:rgba(16,42,53,.64);
  --ink-40:rgba(16,42,53,.46);
  --ink-deep:#0a1d25;
  --sea:#2a6e8a;
  --sky:#7baad8;
  --lemon:#f4c340;
  --lemon-deep:#e0ab21;

  --paper:#fcf9f4;
  --paper-2:#f6f1e8;
  --sand:#efe5d5;

  --line:rgba(16,42,53,.16);
  --line-soft:rgba(16,42,53,.08);
  --line-dark:rgba(252,249,244,.2);

  --display:"Cormorant Garamond",Garamond,"Hoefler Text",Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --gutter:clamp(1.25rem,5vw,3.5rem);
  --max:1360px;
  --max-text:44rem;
  --section:clamp(4rem,9vw,7.5rem);
  --hdr-h:4.4rem;

  --ease:cubic-bezier(.22,1,.36,1);
}
@media (min-width:1040px){:root{--hdr-h:4.9rem}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* Author display rules must not defeat the hidden attribute. */
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,picture,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

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

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);padding:.9rem 1.4rem}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Typography -----------------------------------------------------------
   Serif for the voice, sans for everything practical. Hierarchy comes from
   scale and weight; the expressive italic appears once, where it earns it. */
h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.004em;
  color:var(--ink);
  text-wrap:balance;
}

.d1{font-size:clamp(2.2rem,1.45rem + 2.7vw,3.5rem);line-height:1.06;letter-spacing:-.012em}
.d2{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.5rem);line-height:1.1;letter-spacing:-.008em}
.d3{font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem);font-weight:500;line-height:1.18}
.d4{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);font-weight:500;line-height:1.25}

/* Small label. Sans, quiet, consistent everywhere. */
.eyebrow{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sea);
  display:flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.55;flex:none}

.lede{
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .32vw,1.15rem);
  line-height:1.65;
  color:var(--ink-80);
  max-width:40rem;
}
.prose{max-width:var(--max-text);color:var(--ink-60);font-size:.95rem;line-height:1.72}
.prose p+p{margin-top:1em}
.muted{color:var(--ink-60)}

/* The one expressive moment on the site. */
.statement{
  font-family:var(--display);
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);
  font-style:italic;
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.006em;
  max-width:20ch;
  color:var(--ink);
}

/* --- Layout --------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:1620px}

.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(3rem,6vw,4.5rem)}

.band-ink{background:var(--ink);color:rgba(252,249,244,.78)}
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink .statement{color:var(--paper)}
.band-ink .eyebrow{color:var(--sky)}
.band-ink .lede{color:rgba(252,249,244,.82)}
.band-ink .prose{color:rgba(252,249,244,.68)}
.band-sand{background:var(--sand)}

.stack{display:flex;flex-direction:column}
.stack-sm{gap:.7rem}
.stack-md{gap:1.2rem}
.stack-lg{gap:2rem}

/* --- Buttons: plain rectangles ------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.92rem 1.65rem;
  font-family:var(--sans);
  font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  white-space:nowrap;
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--sea)}
.btn--lemon{background:var(--lemon);color:var(--ink)}
.btn--lemon:hover{background:var(--lemon-deep)}
.btn--line{border-color:var(--line);color:var(--ink)}
.btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ghost{border-color:var(--line-dark);color:var(--paper)}
.btn--ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.3rem}

/* Text link with a travelling arrow */
.tlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.tlink svg{width:1em;height:1em;transition:transform .4s var(--ease)}
.tlink:hover{border-color:currentColor;color:var(--sea)}
.tlink:hover svg{transform:translateX(4px)}
.band-ink .tlink{border-color:var(--line-dark)}
.band-ink .tlink:hover{color:var(--lemon)}

/* --- Media ---------------------------------------------------------------- */
.fig{position:relative;overflow:hidden;background:var(--paper-2)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.fig--zoom:hover img{transform:scale(1.035)}
.r-45{aspect-ratio:4/5}
.r-34{aspect-ratio:3/4}
.r-23{aspect-ratio:2/3}
.r-32{aspect-ratio:3/2}

.cap{
  margin-top:.7rem;
  font-family:var(--sans);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);
}
.band-ink .cap{color:rgba(252,249,244,.5)}

/* --- Header --------------------------------------------------------------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  padding-block:1.05rem;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.hdr__end{display:flex;align-items:center;gap:1.1rem}

.hdr__logo{display:block;flex:none;position:relative;z-index:2}
.hdr__logo img{width:clamp(132px,15vw,170px);transition:width .4s var(--ease)}
.hdr__logo .l-ink{display:none}

.hdr.is-solid{
  background:var(--paper);
  box-shadow:0 1px 0 var(--line-soft);
  padding-block:.7rem;
}
.hdr.is-solid .hdr__logo .l-paper{display:none}
.hdr.is-solid .hdr__logo .l-ink{display:block}
.hdr.is-solid .hdr__logo img{width:clamp(122px,12vw,146px)}

.nav{display:none}
.nav ul{display:flex;gap:1.9rem}
@media (min-width:1040px){.nav{display:flex;align-items:center}}
.nav a{
  font-size:.74rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);
  position:relative;padding-block:.35rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr.is-solid .nav a{color:var(--ink)}
.hdr.is-solid .nav a:hover{color:var(--sea)}

.hdr__cta{display:none}
@media (min-width:1040px){.hdr__cta{display:inline-flex}}
.hdr .btn--ghost{border-color:rgba(252,249,244,.45)}
.hdr.is-solid .btn--ghost{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.hdr.is-solid .btn--ghost:hover{background:var(--sea);border-color:var(--sea)}

/* Language: two small flags, nothing more */
.langs{display:flex;align-items:center;gap:.55rem;flex:none}
.langs a,.langs__on{display:block;line-height:0;opacity:.45;transition:opacity .3s var(--ease)}
.langs a:hover{opacity:.85}
.langs__on{opacity:1}
.flag{width:23px;height:auto;aspect-ratio:2/1;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.hdr .flag{box-shadow:0 0 0 1px rgba(252,249,244,.35)}
.hdr.is-solid .flag{box-shadow:0 0 0 1px rgba(16,42,53,.2)}
.langs--drawer{margin-top:1.1rem}
.langs--drawer .flag{box-shadow:0 0 0 1px rgba(252,249,244,.35)}

/* Burger */
.burger{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-.55rem;position:relative;z-index:2;flex:none}
@media (min-width:1040px){.burger{display:none}}
.burger span{display:block;width:21px;height:1.5px;background:var(--paper);transition:transform .4s var(--ease),opacity .25s var(--ease),background .3s var(--ease)}
.burger span+span{margin-top:6px}
.hdr.is-solid .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span{background:var(--paper)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 2.5rem;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer ul{display:flex;flex-direction:column;gap:.1rem}
.drawer a{
  font-family:var(--display);
  font-size:clamp(1.9rem,8vw,2.6rem);
  line-height:1.3;color:var(--paper);display:block;
  opacity:0;transform:translateY(16px);
}
.drawer.is-open a{animation:drawerIn .55s var(--ease) forwards}
.drawer.is-open li:nth-child(1) a{animation-delay:.06s}
.drawer.is-open li:nth-child(2) a{animation-delay:.11s}
.drawer.is-open li:nth-child(3) a{animation-delay:.16s}
.drawer.is-open li:nth-child(4) a{animation-delay:.21s}
.drawer.is-open li:nth-child(5) a{animation-delay:.26s}
.drawer.is-open li:nth-child(6) a{animation-delay:.31s}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer a[aria-current="page"]{color:var(--lemon)}
.drawer__foot{
  margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:.45rem;
  color:rgba(252,249,244,.75);font-size:.92rem;
}
.drawer__foot a:hover{color:var(--lemon)}
body.is-locked{overflow:hidden}

/* --- Hero ----------------------------------------------------------------
   The film is 9:16, so it is composed rather than stretched: a tall window
   alongside the type on desktop, and the full screen on a phone, where the
   footage already fits the shape of the device. */
.hero{
  position:relative;
  min-height:clamp(540px,88svh,880px);
  display:flex;align-items:flex-end;
  padding-block:8rem 3.5rem;
  background:var(--ink-deep);
  overflow:hidden;isolation:isolate;
}
.hero__film{position:absolute;inset:0;z-index:-2;background:var(--ink-deep)}
.hero__video{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  display:block;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(10,29,37,.96) 0%,rgba(10,29,37,.8) 34%,rgba(10,29,37,.42) 66%,rgba(10,29,37,.6) 100%),
    linear-gradient(to right,rgba(10,29,37,.6) 0%,rgba(10,29,37,.25) 50%,rgba(10,29,37,0) 80%);
}
.hero__in{width:100%;display:grid;gap:clamp(2rem,5vw,4rem)}
.hero__copy{display:flex;flex-direction:column;gap:1.15rem;max-width:36rem}
.hero h1{color:var(--paper)}
.hero .eyebrow{color:var(--sky)}
.hero__lede{
  font-family:var(--sans);
  color:rgba(252,249,244,.84);
  max-width:32rem;font-size:1rem;line-height:1.7;
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.5rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(252,249,244,.6);
}
.hero__meta li{display:flex;align-items:center;gap:1rem}
.hero__meta li+li::before{content:"";width:4px;height:4px;background:var(--lemon);flex:none}
.hero__cap{
  display:none;
  font-family:var(--sans);
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(252,249,244,.5);
}

/* Desktop: the film bleeds off the top, bottom and right edges and is masked
   away on its left, so it dissolves into the hero rather than sitting on it as
   a rectangle. The type stays on the settled dark side. */
@media (min-width:980px){
  .hero{align-items:center;padding-block:9rem 4rem}
  .hero__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center}
  .hero__film{
    inset:0 0 0 auto;
    width:min(56vw,760px);
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 22%,rgba(0,0,0,.8) 48%,#000 68%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 22%,rgba(0,0,0,.8) 48%,#000 68%);
    background:none;
  }
  /* A wash of the brand ink over the footage ties the two halves together. */
  .hero::after{
    background:
      linear-gradient(to right,rgba(10,29,37,.97) 0%,rgba(10,29,37,.82) 30%,rgba(10,29,37,.3) 58%,rgba(10,29,37,.08) 100%),
      linear-gradient(to top,rgba(10,29,37,.5) 0%,rgba(10,29,37,0) 26%,rgba(10,29,37,0) 74%,rgba(10,29,37,.45) 100%);
  }
  .hero__copy{grid-column:1;position:relative;z-index:1}
  .hero__cap{display:block;grid-column:1;position:relative;z-index:1;margin-top:-1.25rem}
}

/* Where masks are unavailable, fall back to a plain right-hand panel rather
   than a hard-edged rectangle sitting proud of the background. */
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  @media (min-width:980px){
    .hero__film{width:min(46vw,620px)}
    .hero::after{
      background:linear-gradient(to right,rgba(10,29,37,.98) 0%,rgba(10,29,37,.92) 40%,rgba(10,29,37,.5) 72%,rgba(10,29,37,.35) 100%);
    }
  }
}

/* A still frame stands in wherever motion is unwanted or unavailable. */
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero__film{background:url("../video/hero-poster.jpg") center/cover no-repeat}
}

/* Interior page hero */
.phero{
  position:relative;
  padding-block:clamp(8.5rem,16vw,11rem) clamp(3rem,6vw,4.5rem);
  background:var(--ink-deep);overflow:hidden;isolation:isolate;
}
.phero--short{padding-block:clamp(8rem,14vw,9.5rem) clamp(2.5rem,5vw,3.5rem)}
.phero__bg{position:absolute;inset:0;z-index:-2;background:var(--ink-deep)}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(10,29,37,.92),rgba(10,29,37,.55) 60%,rgba(10,29,37,.55)),
    linear-gradient(to right,rgba(10,29,37,.6),rgba(10,29,37,.15) 60%,rgba(10,29,37,0));
}
.phero__copy{display:flex;flex-direction:column;gap:1.1rem;max-width:38rem}
.phero h1{color:var(--paper)}
.phero .eyebrow{color:var(--sky)}
.phero .lede{color:rgba(252,249,244,.82)}

/* --- Ticker --------------------------------------------------------------- */
.ticker{
  background:var(--ink);color:var(--paper);
  padding-block:.9rem;overflow:hidden;
  border-block:1px solid rgba(252,249,244,.12);
}
.ticker__track{display:flex;width:max-content;animation:ticker 52s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}.ticker{overflow-x:auto}}
.ticker ul{display:flex;align-items:center}
.ticker li{
  display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
}
.ticker li::after{content:"";width:4px;height:4px;background:var(--lemon);flex:none}
@keyframes ticker{to{transform:translateX(-50%)}}

/* --- Section heads -------------------------------------------------------- */
.shead{display:grid;gap:1.3rem;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
@media (min-width:900px){
  .shead--split{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:3rem;align-items:end}
}
.shead__title{display:flex;flex-direction:column;gap:.9rem}

/* --- Editorial pairs ------------------------------------------------------ */
.pair{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:900px){
  .pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pair--wide-l{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .pair--wide-r{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
.pair__body{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.5vw,1rem)}
.duo .fig:nth-child(2){margin-top:clamp(1.75rem,5vw,3.75rem)}
.duo--lift .fig:nth-child(1){margin-top:clamp(1.75rem,5vw,3.75rem)}
.duo--lift .fig:nth-child(2){margin-top:0}

.trio{display:grid;gap:clamp(.6rem,1.5vw,1rem);grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){
  .trio{grid-template-columns:repeat(2,1fr)}
  .trio>*:nth-child(3){grid-column:span 2}
  .trio>*:nth-child(3) .fig{aspect-ratio:3/2}
}

/* --- A plain, divider-separated list — no chips -------------------------- */
.inline-list{
  display:flex;flex-wrap:wrap;
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-60);
}
.inline-list li{padding-right:.85rem;margin-right:.85rem;border-right:1px solid var(--line)}
.inline-list li:last-child{padding-right:0;margin-right:0;border-right:0}
.band-ink .inline-list{color:rgba(252,249,244,.7)}
.band-ink .inline-list li{border-color:var(--line-dark)}

/* --- The rhythm of a day -------------------------------------------------- */
.rail{display:grid;gap:clamp(1.25rem,3vw,2rem)}
@media (min-width:860px){
  .rail{grid-template-columns:repeat(4,1fr);align-items:start}
  .rail>*:nth-child(even){margin-top:clamp(2rem,5vw,4rem)}
}
@media (max-width:859px){
  .rail{
    grid-auto-flow:column;grid-auto-columns:minmax(62vw,15rem);
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:var(--gutter);margin-inline:calc(-1 * var(--gutter));
    scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail>*{scroll-snap-align:start}
}
.moment{display:flex;flex-direction:column;gap:.9rem}
.moment__time{
  display:flex;align-items:baseline;gap:.65rem;
  font-family:var(--sans);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);
}
.moment__time b{
  font-family:var(--display);font-weight:500;font-size:1.5rem;letter-spacing:-.01em;
  color:var(--ink);
}
.band-ink .moment__time{color:var(--sky)}
.band-ink .moment__time b{color:var(--paper)}
.moment__h{font-size:1.3rem;font-weight:500}
.moment__p{font-family:var(--sans);font-size:.9rem;line-height:1.65;color:var(--ink-60)}
.band-ink .moment__p{color:rgba(252,249,244,.68)}

/* --- Dishes --------------------------------------------------------------- */
.dishes{display:grid;gap:clamp(.7rem,1.7vw,1.05rem);grid-template-columns:repeat(12,1fr)}
.dish{grid-column:span 6}
@media (min-width:800px){
  .dish{grid-column:span 3}
  .dish--tall{grid-row:span 2}
}
.dish figcaption{margin-top:.75rem;display:flex;flex-direction:column;gap:.1rem}
.dish__name{font-family:var(--display);font-weight:500;font-size:1.2rem;line-height:1.2}
.dish__note{font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;color:var(--ink-40)}

/* --- Menu index on the homepage ------------------------------------------ */
.mlist{border-top:1px solid var(--line-dark)}
.mlist a{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.3rem,2.8vw,1.9rem);
  border-bottom:1px solid var(--line-dark);
  transition:padding-left .4s var(--ease),color .3s var(--ease);
}
.mlist a:hover{padding-left:.8rem;color:var(--lemon)}
.mlist__no{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;color:rgba(252,249,244,.45);font-variant-numeric:tabular-nums}
.mlist__ttl{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.1rem);line-height:1.1}
.mlist__sub{display:none;font-family:var(--sans);font-size:.85rem;color:rgba(252,249,244,.6)}
@media (min-width:760px){.mlist a{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto}.mlist__sub{display:block}}
.mlist__go{display:grid;place-items:center;width:1.4rem;color:rgba(252,249,244,.5);transition:transform .4s var(--ease),color .3s var(--ease)}
.mlist__go svg{width:1.1rem;height:1.1rem}
.mlist a:hover .mlist__go{transform:translateX(5px);color:var(--lemon)}

/* --- Menus page ----------------------------------------------------------- */
.menulist{border-top:1px solid var(--line)}
.menurow{
  display:grid;gap:1.5rem 2rem;
  grid-template-columns:110px minmax(0,1fr);
  padding-block:clamp(1.75rem,4vw,2.75rem);
  border-bottom:1px solid var(--line);
  align-items:start;
}
@media (min-width:900px){
  .menurow{grid-template-columns:200px minmax(0,1fr) auto;gap:clamp(2rem,4vw,3.5rem);align-items:center}
}
.menurow__body{display:flex;flex-direction:column;gap:.5rem}
.menurow__no{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;color:var(--ink-40);font-variant-numeric:tabular-nums}
.menurow__name{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);line-height:1.1}
.menurow__text{font-family:var(--sans);font-size:.92rem;line-height:1.65;color:var(--ink-60);max-width:46ch}
.menurow__links{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;grid-column:1/-1}
@media (min-width:900px){.menurow__links{grid-column:auto;flex-direction:column;gap:.75rem;align-items:flex-start}}
.pdf{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);
  font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:.3rem;border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.pdf svg{width:.9em;height:.9em;transition:transform .35s var(--ease)}
.pdf:hover{color:var(--sea);border-color:var(--sea)}
.pdf:hover svg{transform:translate(2px,-2px)}

/* --- Facts ---------------------------------------------------------------- */
.facts{display:grid;gap:clamp(1.3rem,3vw,2.25rem);grid-template-columns:1fr}
@media (min-width:700px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .facts--1{grid-template-columns:1fr}
  .facts--2{grid-template-columns:repeat(2,1fr)}
  .facts--3{grid-template-columns:repeat(3,1fr)}
}
.fact{display:flex;flex-direction:column;gap:.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.band-ink .fact{border-color:var(--line-dark)}
.fact dt{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--sans);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
}
.fact dt svg{width:.9rem;height:.9rem;flex:none;color:var(--sea)}
.band-ink .fact dt{color:var(--sky)}
.band-ink .fact dt svg{color:var(--sky)}
.fact dd{font-family:var(--sans);font-size:.98rem;line-height:1.6}
.fact dd a:hover{color:var(--sea)}
.band-ink .fact dd a:hover{color:var(--lemon)}
.fact__note{font-size:.85rem;color:var(--ink-40)}
.band-ink .fact__note{color:rgba(252,249,244,.5)}

/* --- Event spaces --------------------------------------------------------- */
.spaces{display:grid;gap:clamp(2rem,4.5vw,3rem)}
@media (min-width:860px){.spaces{grid-template-columns:repeat(3,1fr);align-items:start}}
.space{display:flex;flex-direction:column;gap:1rem}
.space__no{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;color:var(--lemon)}
.space__h{font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);font-weight:400}
.space__p{font-family:var(--sans);font-size:.92rem;line-height:1.65;color:rgba(252,249,244,.7)}

/* --- Gallery -------------------------------------------------------------- */
.gchapter{padding-block:clamp(2.75rem,6vw,4.5rem)}
.gchapter__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(1.25rem,2.5vw,2rem);padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.gchapter__h{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);font-weight:400}
.gchapter__b{font-family:var(--sans);font-size:.92rem;color:var(--ink-60)}
.gchapter__count{font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40)}

.ggrid{display:grid;gap:clamp(.5rem,1.3vw,.85rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.ggrid{grid-template-columns:repeat(4,1fr)}}
.ggrid button{display:block;width:100%;overflow:hidden;background:var(--paper-2)}
.ggrid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1s var(--ease)}
.ggrid button:hover img{transform:scale(1.04)}
.ggrid button.sp2{grid-column:span 2}
.ggrid button.sp2 img{aspect-ratio:3/2}

/* Lightbox */
.lbox{
  position:fixed;inset:0;z-index:200;background:rgba(10,29,37,.97);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.lbox.is-open{opacity:1;visibility:visible}
.lbox img{max-width:100%;max-height:82vh;width:auto;object-fit:contain}
.lbox__close,.lbox__nav{
  position:absolute;display:grid;place-items:center;
  width:2.75rem;height:2.75rem;
  background:rgba(252,249,244,.1);color:var(--paper);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.lbox__close:hover,.lbox__nav:hover{background:var(--paper);color:var(--ink)}
.lbox__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lbox__nav svg,.lbox__close svg{width:1.1rem;height:1.1rem}
.lbox__prev{left:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lbox__next{right:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lbox__meta{
  position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(252,249,244,.6);
}

/* --- Map ------------------------------------------------------------------ */
.map{width:100%;height:clamp(300px,42vw,480px);border:0;display:block;filter:saturate(.85);background:var(--paper-2)}

/* --- Footer --------------------------------------------------------------- */
.ftr{background:var(--ink);color:rgba(252,249,244,.75);padding-top:clamp(3.25rem,7vw,5.5rem)}
.ftr__top{display:grid;gap:clamp(2rem,4.5vw,3rem);padding-bottom:clamp(2.25rem,5vw,3.5rem)}
@media (min-width:860px){.ftr__top{grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr))}}
.ftr__logo{width:180px;margin-bottom:1.1rem}
.ftr__blurb{max-width:30ch;font-size:.92rem;line-height:1.65}
.ftr__h{
  font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sky);
  margin-bottom:1rem;
}
.ftr ul{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}
.ftr__sp{margin-top:.35rem}
.ftr a{transition:color .3s var(--ease)}
.ftr a:hover{color:var(--lemon)}
.ftr__social{flex-direction:row!important;gap:1rem!important;margin-top:1.3rem}
.ftr__social a{display:block;color:rgba(252,249,244,.65)}
.ftr__social a:hover{color:var(--lemon)}
.ftr__social svg{width:1.15rem;height:1.15rem}
.ftr__btm{
  display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:space-between;
  padding-block:1.4rem;border-top:1px solid var(--line-dark);
  font-size:.72rem;letter-spacing:.05em;color:rgba(252,249,244,.5);
}
.ftr__btm nav{display:flex;flex-wrap:wrap;gap:1.2rem}

/* --- Mobile action bar ---------------------------------------------------- */
.abar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--ink);border-top:1px solid rgba(252,249,244,.12);
  padding-bottom:env(safe-area-inset-bottom,0);
  transform:translateY(100%);transition:transform .4s var(--ease);
}
.abar.is-up{transform:none}
@media (min-width:1040px){.abar{display:none}}
.abar a{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding:.68rem .5rem .72rem;color:var(--paper);
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
}
.abar a+a{border-left:1px solid rgba(252,249,244,.12)}
.abar svg{width:1.1rem;height:1.1rem}
.abar a:active{background:rgba(252,249,244,.08)}

/* --- Reveal on scroll ----------------------------------------------------- */
.js [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .fig img{transition:none}
}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .hdr,.abar,.ticker,.ftr__social,.lbox,.hero__film{display:none!important}
  body{background:#fff}
  a[href]::after{content:""}
}

/* On a phone the menu thumbnail becomes a square index image so the
   description keeps a readable measure. */
@media (max-width:599px){
  .menurow{grid-template-columns:96px minmax(0,1fr);gap:1.1rem 1.1rem}
  .menurow__media .fig{aspect-ratio:1/1}
}

/* Named portraits — the team are credited, not left anonymous */
.duo--named figure{display:flex;flex-direction:column}
.duo--named figure:nth-child(2){margin-top:clamp(1.75rem,5vw,3.75rem)}
.duo--named .fig{margin-top:0!important}
.duo--named .cap{margin-top:.6rem}