/* ==========================================================================
   THE DRIVE AT HADDO
   Direction: pit-lane precision meets Scottish-estate warmth.
   British racing green + brand gold + parchment. Timing-board monospace.
   Edit brand colours in :root below.
   ========================================================================== */

:root{
  /* ---- brand palette (from the logo) ---- */
  --brg:#0f2b1e;          /* page ground — deep racing green */
  --brg-2:#143423;        /* section panel                   */
  --pine:#1c452e;         /* raised panel                    */
  --badge:#1e4d36;        /* logo-circle green               */
  --gold:#d6b24e;         /* brand gold                      */
  --gold-deep:#b28f36;    /* deep gold / rule                */
  --cream:#f3eedd;        /* parchment text                  */
  --cream-dim:#b9c4b2;    /* muted sage text                 */
  --plate:#f7f3e6;        /* rally-plate white               */
  --ink:#0b2116;          /* dark ink on gold                */
  --line:rgba(243,238,221,.13);
  --shadow:0 24px 60px rgba(0,0,0,.42);

  /* ---- type ---- */
  --display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --body:'Hanken Grotesk',system-ui,sans-serif;

  --maxw:1600px;
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:120px;color-scheme:dark}
body{
  font-family:var(--body);
  background:var(--brg);
  color:var(--cream);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
section{padding:104px 0;position:relative}
.wrap{width:100%;max-width:min(var(--maxw),94vw);margin:0 auto;padding:0 26px}

/* ---------- typographic utilities ---------- */
h1,h2,h3{font-family:var(--display);line-height:.98;text-transform:uppercase;font-weight:800;text-wrap:balance}
h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:.005em}
h3{font-size:22px;letter-spacing:.01em;font-weight:700}

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.26em;font-size:12px;
  color:var(--gold);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}

.lead{font-size:19px;color:var(--cream-dim);max-width:60ch}
.note{color:var(--cream-dim);font-size:14px;font-family:var(--mono)}
.note--center{text-align:center;margin-top:30px}

/* line up figures — prices, ratings, volumes, hours, pit-board readouts */
.pit dd,.hours li,.map__addr{font-variant-numeric:tabular-nums}

/* coachline — the double gold pinstripe from classic car livery */
.coachline{
  width:84px;height:0;margin:20px 0 22px;border:0;
  border-top:3px solid var(--gold);
  box-shadow:0 5px 0 -2px var(--gold-deep);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- buttons ---------- */
/* interactive tap tuning — kill 300ms delay & grey tap flash on touch */
button,.btn,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:18px;
  padding:13px 26px 11px;border-radius:5px;cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .16s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--gold{
  background-color:var(--gold);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background-color .28s ease,box-shadow .28s ease;
}
.btn--gold:hover{
  transform:translateY(-2px);
  background-color:#e4c877;
  box-shadow:0 12px 26px -10px rgba(214,178,78,.6),0 2px 4px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--gold:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.22)}
.btn--ghost{border-color:var(--gold);color:var(--cream);background:rgba(9,24,16,.45)}
.btn--ghost:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* ==========================================================================
   MASTHEAD / NAV
   ========================================================================== */
.masthead{position:sticky;top:0;z-index:60;background:rgba(11,29,20,.9);backdrop-filter:blur(14px);border-bottom:2px solid var(--gold)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;height:132px}
.wordmark{display:flex;align-items:center;gap:18px}
.wordmark img{height:88px;width:88px;flex:0 0 auto}
.wordmark__text{display:flex;flex-direction:column;line-height:.94}
.wordmark__text .l1{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:.04em;color:var(--gold);text-transform:uppercase}
.wordmark__text .l2{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.28em;color:var(--cream-dim);text-transform:uppercase}

/* Type and gap scale with the window between the burger breakpoint and roughly
   1500px. At the old fixed 20px/40px, "Car Meets" and the "Find us" button both
   broke onto a second line on any laptop narrower than about 1366, which is
   most of them. A wrapped nav label is always wrong, hence the nowrap: it turns
   a silent layout break into something that would visibly overflow instead. */
.mainnav ul{display:flex;gap:clamp(20px,2.4vw,40px);align-items:center}
.mainnav a{
  font-family:var(--mono);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:clamp(15px,1.36vw,20px);color:var(--cream-dim);
  white-space:nowrap;
  padding:8px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.mainnav a:hover{color:var(--gold);border-color:var(--gold)}
.masthead__cta{font-size:clamp(16px,1.45vw,21px);padding:16px clamp(20px,2.4vw,34px);white-space:nowrap}

@media(min-width:901px){
  /* Duplicate of the gold button next to it. Kept in the DOM for the burger
     menu, which has no button. */
  .mainnav li.nav--dupe{display:none}
}

/* The wordmark is the widest fixed block in the bar. Trimming it through the
   laptop range is what buys the nav enough room to stay on one line. */
@media(min-width:901px) and (max-width:1300px){
  .masthead__inner{height:108px}
  .wordmark{gap:14px}
  .wordmark img{height:66px;width:66px}
  .wordmark__text .l1{font-size:27px}
  .wordmark__text .l2{font-size:11px;letter-spacing:.2em}
}

.navtoggle{
  display:none;background:none;border:1px solid var(--line);border-radius:6px;
  color:var(--cream);font-size:20px;line-height:1;padding:9px 13px;cursor:pointer;
}

@media(max-width:900px){
  /* space-between alone let the wordmark sit flush against the menu button —
     a real gap plus min-width:0 so the text shrinks rather than collides */
  .masthead__inner{height:92px;gap:16px}
  .wordmark{min-width:0}
  .wordmark__text{min-width:0}
  .wordmark img{height:56px;width:56px}
  .wordmark__text .l1{font-size:24px}
  .wordmark__text .l2{font-size:10px;letter-spacing:.22em}
  .masthead__cta{display:none}
  /* 9px padding gave a 46x40 button — under the 44px minimum tap target */
  .navtoggle{display:block;font-size:22px;padding:12px 15px}
  .mainnav{
    position:absolute;left:0;right:0;top:100%;display:none;
    background:var(--brg-2);border-bottom:1px solid var(--line);
  }
  .mainnav ul{flex-direction:column;gap:0;padding:8px 0}
  .mainnav li{width:100%}
  .mainnav a{display:block;padding:15px 26px;font-size:15px;border-bottom:1px solid var(--line)}
  .masthead.is-open .mainnav{display:block}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{min-height:92vh;display:flex;align-items:center;overflow:hidden;padding:80px 0}
.hero__media{position:absolute;inset:0;z-index:0}
/* <picture> is inline by default, which would collapse the hero backdrop —
   make it fill the media box exactly as the bare <img> used to. */
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(11,29,20,.86) 0%,rgba(11,29,20,.66) 42%,rgba(11,29,20,.24) 78%,rgba(11,29,20,.06) 100%);
}
.hero__inner{position:relative;z-index:2}

.hero__title{margin-top:18px}
.hero__name{display:block;font-size:clamp(38px,6.4vw,80px);color:var(--gold);letter-spacing:.01em}
.hero__desc{
  display:block;margin-top:12px;
  font-family:var(--mono);font-weight:500;text-transform:none;
  font-size:clamp(13px,1.6vw,16px);letter-spacing:.14em;color:var(--cream-dim);
  max-width:32ch;line-height:1.5;
}
.hero__tagline{
  margin-top:26px;font-family:var(--display);font-weight:900;
  text-transform:uppercase;line-height:.9;font-size:clamp(30px,4.6vw,60px);
  color:var(--cream);text-wrap:balance;
}
.hero__tagline span,.hero__tagline em{display:block}
.hero__tagline em{font-style:normal;color:var(--gold)}
.hero__lead{margin-top:24px;font-size:clamp(17px,2vw,20px);color:var(--cream)}

/* pit board — essentials framed like a pit-lane signal board */
.pitboard{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px;max-width:760px}
.pit{
  flex:1 1 210px;background:rgba(8,22,15,.82);
  border:1px solid var(--gold-deep);border-radius:6px;padding:15px 18px 13px;
  box-shadow:inset 0 0 0 4px rgba(8,22,15,.9),inset 0 0 0 5px rgba(214,178,78,.3);
}
.pit dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:10px;color:var(--cream-dim)}
.pit dd{margin-top:5px;font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:.02em;color:var(--gold)}

/* ==========================================================================
   HIGHLIGHTS STRIP  (slow, subtle gold marquee)
   ========================================================================== */
.strip{
  padding:0;
  background:var(--gold);color:var(--ink);overflow:hidden;
  border-top:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee{display:flex;width:max-content;will-change:transform;animation:marquee 46s linear infinite}
.strip:hover .marquee,.strip:focus-within .marquee{animation-play-state:paused}
.marquee__group{
  display:flex;flex:0 0 auto;align-items:center;margin:0;padding:6px 0;
  font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:17px;
}
.marquee__group li{display:inline-flex;align-items:center;white-space:nowrap}
.marquee__group li::after{
  content:"";width:6px;height:6px;flex:0 0 auto;margin:0 30px;
  transform:rotate(45deg);background:rgba(11,33,22,.4);
}
@keyframes marquee{to{transform:translateX(-50%)}}
/* On phones the 17px tracked-out mono made one highlight ~86% of the viewport,
   so only a single item was ever readable. Tighten type, tracking and the
   diamond separator so 2–3 items share the strip. */
@media(max-width:560px){
  .marquee__group{font-size:12px;letter-spacing:.1em}
  .marquee__group li::after{margin:0 14px}
  .strip{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  }
}

/* ==========================================================================
   SPLIT LAYOUT (welcome + visit)
   ========================================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.welcome{background:var(--brg-2)}
.welcome p+p{margin-top:16px}

.framed{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.framed::after{content:"";position:absolute;inset:12px;border:1px solid rgba(214,178,78,.5);border-radius:8px;pointer-events:none;z-index:2}
.framed img{width:100%;height:100%;object-fit:cover}

@media(max-width:840px){.split{grid-template-columns:1fr;gap:36px}}

/* ==========================================================================
   FEATURES
   ========================================================================== */
/* chequered-flag texture — low opacity, rotated like a waving flag, fades across */
.features{position:relative;overflow:hidden}
.features::before{
  content:"";position:absolute;inset:-14% -8%;z-index:0;pointer-events:none;
  background-image:repeating-conic-gradient(rgba(243,238,221,.85) 0 25%,transparent 0 50%);
  background-size:48px 48px;
  opacity:.07;
  transform:rotate(-7deg) scale(1.2);
  -webkit-mask-image:radial-gradient(135% 120% at 88% 6%,#000 0%,rgba(0,0,0,.4) 42%,transparent 74%);
  mask-image:radial-gradient(135% 120% at 88% 6%,#000 0%,rgba(0,0,0,.4) 42%,transparent 74%);
}
.features>.wrap{position:relative;z-index:1}
.features h2{margin-top:14px}
.features .lead{margin-top:12px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;counter-reset:feat}
.card{
  background:linear-gradient(165deg,#173c27,#0f2a1b);
  border:1px solid var(--line);border-top:3px solid var(--gold-deep);
  border-radius:14px;padding:34px 30px 30px;counter-increment:feat;
  transition:transform .18s ease,border-color .2s ease;
}
.card:hover{border-color:var(--gold)}
/* spec-sheet index number, top-right */
.card::after{
  content:counter(feat,decimal-leading-zero);
  position:absolute;top:20px;right:24px;z-index:0;
  font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.12em;
  color:var(--gold);opacity:.4;
}
.card__ic{
  width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(214,178,78,.12);border:1.5px solid var(--gold-deep);
  color:var(--gold);margin-bottom:22px;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;
}
.card:hover .card__ic{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
  transform:translateY(-2px) scale(1.05);box-shadow:0 8px 20px -6px rgba(214,178,78,.55);
}
.card h3{margin-bottom:14px;padding-bottom:14px;position:relative}
.card h3::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:2px;
  background:var(--gold-deep);transition:width .3s cubic-bezier(.2,.7,.2,1),background .3s ease;
}
.card:hover h3::after{width:58px;background:var(--gold)}
.card p{color:var(--cream-dim);font-size:15.5px}
@media(max-width:840px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

/* ==========================================================================
   MENU  (proper menu with dashed leaders)
   ========================================================================== */
.menu{background:var(--brg-2)}
.menu__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.menu__head h2{margin-top:12px}

.menu__cols{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:44px}
@media(max-width:840px){.menu__cols{grid-template-columns:1fr;gap:40px}}

.menu__cat{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;color:var(--gold);padding-bottom:14px;border-bottom:2px solid var(--gold-deep);
}
.menu__cat span{color:var(--cream-dim);font-weight:500;letter-spacing:.07em;font-size:11px;text-transform:none;white-space:nowrap}

/* Each group is a <details> so phones can collapse it. On desktop the summary
   must read as the plain heading it always was — no marker, no pointer, and
   script.js keeps `open` set so nothing can be folded away. */
.menu__sum{list-style:none;cursor:default}
.menu__sum::-webkit-details-marker{display:none}
.menu__sum::marker{content:""}
.menu__sum .menu__cat{margin:0}

.menu__list{margin-top:6px}
.dish{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:16px;
  padding:13px 0;border-bottom:1px dashed var(--line);
}
.dish__name{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:19px;color:var(--cream);line-height:1.06;
}
.dish__price{
  font-family:var(--mono);font-weight:600;font-size:15px;color:var(--gold);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.dish__desc{grid-column:1/-1;color:var(--cream-dim);font-size:13.5px;margin-top:5px;max-width:46ch}
.dish__v{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-left:7px;border-radius:50%;vertical-align:2px;
  border:1px solid var(--gold-deep);color:var(--gold);
  font-family:var(--mono);font-weight:600;font-size:9px;letter-spacing:0;
}
.menu__extra{margin-top:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--cream-dim)}
.menu .note{margin-top:34px;display:block}

/* ==========================================================================
   COFFEE CAROUSEL  (drink cards with an overlapping cup, pit-lane styling)
   ========================================================================== */
.coffee{background:radial-gradient(120% 90% at 88% -10%,rgba(214,178,78,.09),transparent 55%),var(--pine)}
.coffee__head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.coffee__head h2{margin-top:12px}
.coffee__head .lead{margin-top:14px}
.coffee__nav{display:flex;gap:12px;flex:0 0 auto}
.rbtn{
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--gold-deep);background:rgba(8,22,15,.5);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;
}
.rbtn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-2px)}
.rbtn:disabled{opacity:.32;cursor:default;transform:none}

.coffee__track{
  display:flex;gap:22px;margin-top:44px;padding:12px 4px 20px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;                 /* native bar hidden — we use a custom slider */
}
.coffee__track::-webkit-scrollbar{display:none}
.coffee__track:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}

.cup{flex:0 0 300px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch}
.cup__media{
  width:186px;height:186px;margin:0 auto -74px;position:relative;z-index:2;
  border-radius:50%;overflow:hidden;border:4px solid var(--gold);
  box-shadow:0 20px 34px rgba(0,0,0,.5),0 0 0 8px rgba(8,22,15,.65);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.cup:hover .cup__media{transform:translateY(-6px) rotate(-3deg)}
.cup__media img{width:100%;height:100%;object-fit:cover}
.cup__body{
  background:linear-gradient(165deg,#123020,#0b2015);
  border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:14px;
  padding:88px 26px 24px;text-align:left;position:relative;
  box-shadow:var(--shadow);transition:border-color .2s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.cup:hover .cup__body{border-color:var(--gold);transform:translateY(-4px)}
.cup__name{font-size:24px;color:var(--cream)}

/* always-on custom scroll slider — replaces the auto-hiding native bar */
.coffee__bar{
  position:relative;height:8px;margin:24px auto 2px;border-radius:99px;
  background:rgba(4,12,8,.55);box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.coffee__thumb{
  position:absolute;top:0;left:0;height:100%;width:32%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 55%,#f0d789);
  box-shadow:0 0 12px rgba(214,178,78,.45);
  cursor:grab;touch-action:none;transition:filter .2s ease;
}
.coffee__thumb:hover{filter:brightness(1.08)}
.coffee__thumb.is-drag{cursor:grabbing;filter:brightness(1.12)}

@media(max-width:560px){
  /* Arrows sat above the cards, miles from where a thumb rests. display:contents
     dissolves the head wrapper so its text and its nav become siblings of the
     track, which lets `order` drop the arrows underneath. */
  .coffee>.wrap{display:flex;flex-direction:column}
  .coffee__head{display:contents}
  /* :not() matters — .coffee__nav is itself a div child of the head, so a bare
     `.coffee__head>div` would outrank `.coffee__nav` and pin the arrows to 1 */
  .coffee__head>div:not(.coffee__nav){order:1}
  .coffee__track{order:2}
  .coffee__bar{order:3}
  .coffee__head>.coffee__nav{order:4;justify-content:center;margin-top:20px}

  /* One 270px card filled the rail, so it read as a dead end rather than a
     carousel. Run the rail out to the wrap edges and shrink the card so two
     fit with the third peeking. */
  .coffee__track{margin-inline:-26px;padding:12px 10px 20px;gap:14px;scroll-padding-left:10px}
  .cup{flex-basis:150px}
  .cup__media{width:118px;height:118px;margin-bottom:-46px}
  .cup__body{padding:60px 14px 16px}
  .cup__name{font-size:17px;line-height:1.15}
}
@media(prefers-reduced-motion:reduce){
  .coffee__track{scroll-behavior:auto}
  .cup:hover .cup__media,.cup:hover .cup__body{transform:none}
}

/* ==========================================================================
   CAR MEETS  (split panel)
   ========================================================================== */
.panel{display:grid;grid-template-columns:1fr 1fr;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.panel__copy{background:var(--pine);padding:56px 48px}
.panel__copy h2{margin-top:14px;font-size:clamp(28px,3.4vw,42px)}
.panel__copy p{color:var(--cream-dim)}
.panel__copy p+p{margin-top:14px}
.panel__copy .btn{margin-top:28px}
.panel__media{position:relative;min-height:360px}
.panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:840px){.panel{grid-template-columns:1fr}.panel__media{min-height:260px}}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery h2{margin-top:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:320px;gap:14px;margin-top:40px}
.grid3 figure{border-radius:12px;overflow:hidden;position:relative}
.grid3 img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.grid3 figure:hover img{transform:scale(1.06)}
@media(max-width:840px){.grid3{grid-template-columns:1fr;grid-auto-rows:250px}}
/* Six photos stacked one-per-row ran to 1965px, over two screenfuls of pure
   scrolling. Two across shows the whole set at once and the tiles are only
   ever thumbnails — tapping one opens it full-screen in the lightbox.
   Must follow the 840px rule above; same specificity, so source order decides. */
@media(max-width:560px){
  .grid3{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px;margin-top:28px}
  .grid3 figure{aspect-ratio:1}
}

/* ==========================================================================
   REVIEWS  (real Google reviews — keep the Google cues obvious)
   ========================================================================== */
.reviews{background:radial-gradient(120% 90% at 12% -10%,rgba(214,178,78,.08),transparent 55%),var(--pine)}
.reviews__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.reviews__head h2{margin-top:12px}
.reviews__source{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  background:rgba(8,22,15,.5);border:1px solid var(--line);border-radius:99px;
  padding:9px 18px 9px 14px;transition:border-color .2s ease,transform .18s ease;
}
.reviews__source:hover{border-color:var(--gold);transform:translateY(-2px)}
.reviews__g{display:inline-flex;background:#fff;border-radius:50%;padding:5px;line-height:0}
.reviews__source-txt{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--cream)}
.reviews__source-txt strong{color:var(--gold);font-weight:700}

.reviews__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px}
@media(max-width:840px){.reviews__grid{grid-template-columns:1fr}}

.review{
  position:relative;margin:0;display:flex;flex-direction:column;
  background:linear-gradient(165deg,#173c27,#0f2a1b);
  border:1px solid var(--line);border-radius:16px;padding:30px 30px 28px;
  box-shadow:var(--shadow);
}
.review__g{position:absolute;top:24px;right:26px;line-height:0;opacity:.95}
.review__top{display:flex;align-items:center;gap:14px;padding-right:34px}
.review__avatar{
  width:48px;height:48px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:22px;color:#fff;
}
.review__id{min-width:0}
.review__name{font-family:var(--body);font-weight:700;font-size:17px;color:var(--cream);line-height:1.2}
.review__meta{font-size:12.5px;color:var(--cream-dim);margin-top:3px}
.review__rating{display:flex;align-items:center;gap:12px;margin-top:18px}
.review__stars{display:inline-flex;gap:2px;color:var(--gold);line-height:0}
.review__time{font-size:12.5px;color:var(--cream-dim)}
.review__text{
  margin-top:16px;color:var(--cream-dim);font-size:15px;line-height:1.65;
  border-left:2px solid var(--gold-deep);padding-left:16px;
}

/* The two Google reviews run 107 and 89 words, about 17 and 15 lines on a
   phone, and that alone was 792px. script.js clamps them and adds the toggle,
   so with JS off the full text is still there — the class is never applied. */
.review__text.is-clamped{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}
.review__more{
  align-self:flex-start;margin-top:12px;min-height:44px;padding:0 2px;
  background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:12.5px;color:var(--gold);
}
.review__more:hover{color:var(--cream)}
@media(min-width:561px){.review__more{display:none}}

/* ==========================================================================
   SOCIAL STATS BAR
   ========================================================================== */
.social{
  padding:26px 0;color:var(--ink);
  background:linear-gradient(180deg,#e4c877,var(--gold));
  border-top:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
}
.social__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:721px){.stat+.stat{border-left:1px solid rgba(11,33,22,.2)}}
.stat__link{
  display:flex;align-items:center;justify-content:center;gap:15px;
  padding:8px 12px;border-radius:12px;transition:transform .18s ease;
}
.stat__link:hover{transform:translateY(-3px)}
.stat__ic{
  width:56px;height:56px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid rgba(11,33,22,.14);
  transition:transform .25s ease,box-shadow .25s ease;
}
.stat__link:hover .stat__ic{box-shadow:0 12px 24px -8px rgba(11,29,20,.5)}
.stat__num{
  display:flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:.01em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.stat__num svg{color:var(--ink);flex:0 0 auto}
.stat__label{
  display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(11,33,22,.72);
}

/* Stacked on small screens, each row was centred on its OWN width — "Rating on
   Google" is far shorter than "Followers on Instagram", so the icons stepped
   across by 26px instead of forming a column. One fit-content column, centred
   as a block, gives every row the same width; the rows then left-align inside
   it so the icons and the numbers each share a single edge.
   NB: must sit AFTER .stat__link above, or its justify-content:center wins. */
@media(max-width:720px){
  .social__stats{grid-template-columns:fit-content(100%);justify-content:center;gap:14px}
  .stat{max-width:100%}
  .stat__link{justify-content:flex-start;width:100%}
}

/* ==========================================================================
   EVENTS  (generated at build time from content/events/)
   ========================================================================== */
.events{background:var(--brg-2)}
.ev__list{margin-top:40px;max-width:78ch}
.ev{
  display:grid;grid-template-columns:auto 1fr;column-gap:28px;align-items:start;
  padding:24px 0;border-top:1px solid var(--line);
}
.ev:last-child{border-bottom:1px solid var(--line)}
.ev__when{min-width:0}
.ev__date{
  display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:17px;line-height:1.1;color:var(--gold);letter-spacing:.02em;white-space:nowrap;
}
.ev__time{
  display:block;margin-top:5px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.06em;color:var(--cream-dim);white-space:nowrap;
}
.ev__title{font-size:20px;color:var(--cream);margin-bottom:8px}
.ev__body p{color:var(--cream-dim);max-width:60ch}
.ev__free{
  margin-top:8px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold-deep);
}
.events .note{margin-top:30px}

/* --- Event photo ---------------------------------------------------------
   Square by CSS as well as by the build step. The build crops to 1:1, but if it
   ever runs without sharp the original ratio comes through untouched, and this
   keeps the row from breaking. Belt and braces on the one image the owner
   uploads without us seeing it first. */
.ev--pic{grid-template-columns:auto 1fr auto}
.ev__pic{margin:0;width:172px;flex:0 0 auto}
.ev__pic img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:10px;background:var(--brg);
}

@media(max-width:900px){
  /* The photo column costs more than it gives once the text is under about
     40 characters a line, so it moves under the copy at full width. */
  .ev--pic{grid-template-columns:auto 1fr}
  .ev__pic{grid-column:1/-1;width:100%;max-width:320px;margin-top:18px}
}

@media(max-width:560px){
  /* stacking the date above the title reads better than a 90px column
     squeezing the event name into three words a line */
  .ev,.ev--pic{grid-template-columns:1fr;row-gap:10px;padding:20px 0}
  .ev__date{font-size:15.5px;white-space:normal}
  .ev__time{display:inline-block;margin-top:0;margin-left:10px}
  .ev__title{font-size:17px;line-height:1.2}
  .ev__pic{max-width:none;margin-top:14px}
}

/* --- Homepage teaser -------------------------------------------------------
   The full list lives on /events. The homepage carries only the next one, as a
   single strip, because a growing list of events was adding a screen and a half
   to a page we had deliberately shortened for phones. */
.evteaser{padding:72px 0;background:var(--brg-2)}
.evteaser__panel{
  display:grid;grid-template-columns:1fr auto;column-gap:32px;align-items:center;
  background:var(--pine);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:14px;padding:30px 34px;box-shadow:var(--shadow);
}
.evteaser__panel h2{margin-top:10px;font-size:clamp(23px,2.7vw,32px);line-height:1.1}
.evteaser__when{
  margin-top:12px;font-family:var(--mono);font-size:13.5px;
  letter-spacing:.06em;color:var(--gold);
}
.evteaser__act .btn{white-space:nowrap}

@media(max-width:720px){
  .evteaser{padding:56px 0}
  .evteaser__panel{grid-template-columns:1fr;row-gap:22px;padding:26px 22px}
  /* nowrap keeps the button on one line beside the copy on desktop. Once it is
     full width it has to be allowed to break, or a long label pushes the whole
     page sideways on a small phone. */
  .evteaser__act .btn{display:flex;justify-content:center;text-align:center;width:100%;white-space:normal}
}

/* --- /events page ---------------------------------------------------------- */
.pagehead{padding:72px 0 56px}
.pagehead h1{margin-top:12px;font-size:clamp(31px,5vw,56px);line-height:1.03}
.pagehead .coachline{margin-top:22px}
.pagehead .lead{margin-top:24px}

.crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream-dim);
}
.crumbs li+li::before{content:"/";margin-right:9px;color:var(--gold-deep)}
.crumbs a{color:var(--cream-dim);text-decoration:none}
.crumbs a:hover{color:var(--gold)}

/* The list sits on the panel colour; the header above and the club panel below
   sit on the page ground, so the colour change does the separating and the
   section does not need the site's usual 104px of air on top as well. */
.page-events .events{padding:68px 0 96px}
.page-events .ev__list{margin-top:0}

.ev__empty{margin-top:36px;max-width:62ch}
.ev__empty p{color:var(--cream-dim)}
.ev__empty .btn{margin-top:26px}

/* Third cut of the chequered-flag texture, after .features and .haddo. This one
   rotates the same way as .features but washes in from the bottom right, so it
   builds toward the end of the page rather than fading out of it. The panel
   covers the middle, so the texture only ever reads in the bands above and
   below it. */
.evhost{overflow:hidden}
.evhost::before{
  content:"";position:absolute;inset:-14% -8%;z-index:0;pointer-events:none;
  background-image:repeating-conic-gradient(rgba(243,238,221,.85) 0 25%,transparent 0 50%);
  background-size:48px 48px;
  opacity:.07;
  transform:rotate(-7deg) scale(1.2);
  -webkit-mask-image:radial-gradient(130% 130% at 88% 96%,#000 0%,rgba(0,0,0,.42) 44%,transparent 78%);
  mask-image:radial-gradient(130% 130% at 88% 96%,#000 0%,rgba(0,0,0,.42) 44%,transparent 78%);
}
.evhost>.wrap{position:relative;z-index:1}

/* No media column on this one, so the two-up grid would leave a dead half. */
.panel--flat{grid-template-columns:1fr}
.panel--flat .panel__copy{padding:48px}
@media(max-width:720px){
  .pagehead{padding:52px 0 40px}
  .page-events .events{padding:48px 0 64px}
  .panel--flat .panel__copy{padding:34px 24px}
}

/* ==========================================================================
   VISITING HADDO  +  FAQ
   ========================================================================== */
/* These two are the only text-only sections on the site — everything else
   fills the container with a grid or a split. Left at the default .wrap width
   (1600px) their capped text hugged the left edge with a void to the right on
   a wide monitor, so the wrap itself is narrowed and centres on its own. */
.haddo>.wrap,.faq>.wrap{max-width:min(760px,94vw);position:relative;z-index:1}

/* Same chequered-flag texture as .features, mirrored — rotated the other way
   and faded in from the top-left instead of the top-right, so the two read as
   a pair rather than the same thing twice. */
.haddo{background:var(--brg-2);position:relative;overflow:hidden}
.haddo::before{
  content:"";position:absolute;inset:-14% -8%;z-index:0;pointer-events:none;
  background-image:repeating-conic-gradient(rgba(243,238,221,.85) 0 25%,transparent 0 50%);
  background-size:48px 48px;
  opacity:.07;
  transform:rotate(7deg) scale(1.2);
  -webkit-mask-image:radial-gradient(135% 120% at 12% 6%,#000 0%,rgba(0,0,0,.4) 42%,transparent 74%);
  mask-image:radial-gradient(135% 120% at 12% 6%,#000 0%,rgba(0,0,0,.4) 42%,transparent 74%);
}
.haddo .lead{margin-bottom:18px;max-width:none}
.haddo p+p{margin-top:16px;color:var(--cream-dim);max-width:none}

.faq{background:radial-gradient(120% 90% at 12% -10%,rgba(214,178,78,.07),transparent 55%),var(--brg)}
.faq__list{margin-top:40px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__q{
  list-style:none;cursor:pointer;position:relative;
  padding:22px 44px 22px 0;
  -webkit-tap-highlight-color:transparent;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__q h3{font-size:19px;color:var(--cream);letter-spacing:.01em;transition:color .2s ease}
.faq__item:hover .faq__q h3,.faq__q:focus-visible h3{color:var(--gold)}
/* chevron */
.faq__q::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq__item[open] .faq__q::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 44px 24px 0}
.faq__a p{color:var(--cream-dim)}
.faq__a a{color:var(--gold);border-bottom:1px solid rgba(214,178,78,.4)}

@media(max-width:560px){
  .faq__q{padding:18px 34px 18px 0}
  .faq__q h3{font-size:16.5px;line-height:1.25}
  .faq__a{padding:0 0 20px}
  .haddo p+p{margin-top:14px}
}

/* ==========================================================================
   VISIT
   ========================================================================== */
.visit{background:var(--brg-2);position:relative;overflow:hidden}
.visit>.wrap{position:relative;z-index:1}

/* large abstract tyre skid that sweeps across the background as the section scrolls in */
.tyremarks{
  position:absolute;left:-4%;right:-4%;top:0;height:100%;z-index:0;pointer-events:none;
  transform:rotate(-2deg);opacity:.2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  clip-path:inset(0 100% 0 0);            /* hidden until revealed */
}
.tyremarks svg{width:100%;height:100%;display:block;filter:blur(.6px)}
.js .visit.is-in .tyremarks{animation:skid 1.4s cubic-bezier(.25,.6,.2,1) .15s forwards}
@keyframes skid{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Skid decoration is desktop-only. display:none drops it from the layout
   entirely, so the animation never runs and nothing paints behind the section. */
@media(max-width:560px){
  .tyremarks{display:none}
}
.visit .split{align-items:start}
.visit h2{font-size:clamp(28px,3.4vw,42px)}
.facts{margin-top:6px}
.fact{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.fact__ic{flex:0 0 auto;color:var(--gold);margin-top:2px}
.fact dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--gold)}
.fact dd{margin-top:5px;font-weight:500}
.fact dd a{color:var(--gold);border-bottom:1px solid rgba(214,178,78,.4)}
.hours{margin-top:2px}
.hours li{display:flex;justify-content:space-between;max-width:290px;padding:2px 0;font-family:var(--mono);font-size:14px}
.fact .subnote{margin-top:8px;color:var(--cream-dim);font-size:13px;font-family:var(--mono)}
.map{
  position:relative;display:block;min-height:440px;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--gold-deep);transition:border-color .2s ease,transform .18s ease,box-shadow .2s ease;
}
.map:hover{border-color:var(--gold);transform:translateY(-3px)}
.map__frame{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.95) contrast(1.05)}
.map__overlay{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:440px;padding:44px 28px;background:linear-gradient(180deg,rgba(14,20,28,.18),rgba(14,20,28,.78))}
.map__pin{color:var(--gold)}
.map__place{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:28px;color:var(--cream);line-height:1}
.map__addr{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--cream-dim);max-width:36ch;line-height:1.5}
.map__cta{margin-top:8px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:18px;color:var(--gold)}
.map__cta:hover{color:var(--cream)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding:64px 0 38px}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px}
.footer-brand img{height:78px;width:auto;margin-bottom:14px}
.footer-brand .fname{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:26px;color:var(--gold)}
.footer-brand p{color:var(--cream-dim);max-width:40ch;margin-top:10px;font-size:14.5px}
.socials{display:flex;gap:14px;margin-top:20px}
.socials a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,transform .15s}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
address{font-style:normal}   /* browsers italicise <address> by default */
.footer-col a,.footer-col p,.footer-col address{display:block;color:var(--cream-dim);font-size:14.5px;padding:4px 0}
/* These two were <h2> purely for the look — they are nav labels, not page
   topics, so demoting them keeps Google's outline of the page clean.
   Written as `p.footer-col__label` deliberately: `.footer-col p` above is
   (0,1,1) and would outrank a bare class no matter what order it sits in. */
.footer-col p.footer-col__label{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--gold);margin-bottom:16px;padding:0}
.footer-col a:hover{color:var(--cream)}
.copyright{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--cream-dim);font-size:12.5px;font-family:var(--mono);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ==========================================================================
   IMAGE FALLBACK
   ========================================================================== */
.ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;
  background:radial-gradient(120% 120% at 0% 0%,rgba(214,178,78,.16),transparent 55%),linear-gradient(135deg,var(--pine),var(--brg));
  color:var(--cream-dim);font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:12px;
}

/* ==========================================================================
   MOTION
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* staggered children — a grid that lights up in sequence as it enters */
.js .reveal .card{opacity:0;transition:opacity .6s ease}
.js .reveal.is-in .card{opacity:1}
.js .reveal .dish,.js .reveal .grid3 figure{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in .dish,.js .reveal.is-in .grid3 figure{opacity:1;transform:none}
.js .reveal.is-in .card:nth-child(2),.js .reveal.is-in .dish:nth-child(2),.js .reveal.is-in .grid3 figure:nth-child(2){transition-delay:.08s}
.js .reveal.is-in .card:nth-child(3),.js .reveal.is-in .dish:nth-child(3),.js .reveal.is-in .grid3 figure:nth-child(3){transition-delay:.16s}
.js .reveal.is-in .card:nth-child(4),.js .reveal.is-in .dish:nth-child(4){transition-delay:.24s}
.js .reveal.is-in .card:nth-child(5),.js .reveal.is-in .dish:nth-child(5){transition-delay:.32s}
.js .reveal.is-in .card:nth-child(6),.js .reveal.is-in .dish:nth-child(6){transition-delay:.40s}

/* coachline draws itself in like a pinstripe being laid down */
.js .reveal .coachline{width:0;transition:width .8s cubic-bezier(.2,.7,.2,1) .15s}
.js .reveal.is-in .coachline{width:84px}

/* ==========================================================================
   SCROLL PROGRESS — a redline that fills as you drive down the page
   ========================================================================== */
.scrollprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none;background:rgba(4,12,8,.35)}
.scrollprog span{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 62%,#f4dc93);box-shadow:0 0 10px rgba(214,178,78,.5)}
@supports (animation-timeline: scroll()){
  .scrollprog span{--p:1;animation:scrollfill linear both;animation-timeline:scroll(root)}
}
@keyframes scrollfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ==========================================================================
   NAV — active-section indicator (scrollspy)
   ========================================================================== */
.mainnav a.is-active{color:var(--gold);border-color:var(--gold)}

/* ==========================================================================
   FEATURE CARDS — cursor spotlight + subtle 3D tilt
   ========================================================================== */
.card{position:relative;overflow:hidden;transform-style:preserve-3d;
  transform:perspective(880px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s ease}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;z-index:0;
  transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(214,178,78,.20),transparent 62%)}
.card>*{position:relative;z-index:1}
.card:hover::before{opacity:1}

/* Six stacked cards ran the section to 2365px, the longest on the page. Two
   columns would leave a ~124px text measure (about 15 characters a line), so
   instead the card goes horizontal: icon beside the heading, copy keeping the
   full width. Lives here, after the .card rules above, so source order wins. */
@media(max-width:560px){
  .cards{gap:12px;margin-top:28px}
  .card{
    display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;
    padding:18px 16px;
  }
  .card__ic{grid-column:1;grid-row:1/span 2;width:44px;height:44px;margin-bottom:0}
  .card__ic svg{width:22px;height:22px}
  .card h3{grid-column:2;grid-row:1;font-size:16px;margin-bottom:9px;padding-bottom:9px;padding-right:30px}
  .card h3::after{width:26px;height:2px}
  .card p{grid-column:2;grid-row:2;font-size:14px}
  .card::after{top:16px;right:14px;font-size:12px}   /* the 01/02 index number */
}
.card:hover{border-color:var(--gold);--ty:-6px;
  transform:perspective(880px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}

/* ==========================================================================
   GALLERY — zoom-to-view lightbox trigger
   ========================================================================== */
.shot{border-radius:12px;overflow:hidden;position:relative}
.shot__btn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.shot__btn img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.shot:hover .shot__btn img,.shot__btn:focus-visible img{transform:scale(1.07)}
.shot__zoom{position:absolute;bottom:14px;right:14px;width:40px;height:40px;border-radius:50%;
  background:rgba(8,22,15,.72);border:1px solid var(--gold-deep);color:var(--gold);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease}
.shot:hover .shot__zoom,.shot__btn:focus-visible .shot__zoom{opacity:1;transform:none}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:6vw 5vw;
  background:rgba(6,16,11,.93);backdrop-filter:blur(7px);opacity:0;transition:opacity .3s ease}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox__stage{display:flex;flex-direction:column;gap:14px;max-width:min(1120px,92vw);align-items:center}
.lightbox__img{width:auto;max-width:100%;max-height:80vh;object-fit:contain;border-radius:12px;
  border:1px solid var(--gold-deep);box-shadow:var(--shadow);transform:scale(.95);transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.lightbox.is-open .lightbox__img{transform:scale(1)}
.lightbox__cap{font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--cream-dim);text-align:center;max-width:52ch}
.lightbox__close{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:rgba(8,22,15,.6);color:var(--cream);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,transform .25s}
.lightbox__close:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg)}


/* ==========================================================================
   MOBILE UX PASS  (≤560px)
   Measured on a 390px viewport. Two problems throughout: links and buttons
   sized for a mouse pointer rather than a thumb (44px is the Apple/WCAG
   minimum), and a lot of tracked-out mono type sitting at 10–12px, which is
   fine on a monitor and unreadable in a car park.
   ========================================================================== */
/* Tap targets belong to the INPUT DEVICE, not the screen width — an iPad gets
   the full desktop layout but is still driven by a thumb, so these were left
   at mouse size (nav 42px, footer links 31px, map link 29px). pointer:coarse
   is the correct signal and catches touch laptops too, but not every browser
   reports it reliably, so the width clause guarantees tablets are covered.
   Worst case on a mouse it costs a few px of padding — no visual harm. */
@media(pointer:coarse),(max-width:1024px){
  .footer-col a{padding:12px 0}                       /* was 31px tall */
  .fact dd a{display:inline-flex;align-items:center;min-height:44px}
  .map__cta{display:inline-flex;align-items:center;min-height:44px;font-size:17px}
  .mainnav a{padding-top:12px;padding-bottom:12px}    /* was 42px tall on iPad */
  .reviews__source{display:inline-flex;align-items:center;min-height:44px}
}

@media(max-width:560px){
  /* ---- readable type ---- */
  /* 11px reads better than 10px, but .18em tracking made the line ~189px and
     it ran into the menu button — tighter tracking buys the width back */
  /* Hero label only. Its text is long enough to wrap on a phone, and the gold
     rule is vertically centred on the whole label, so it ends up floating
     between the two lines looking like a stray dash. Every other eyebrow on
     the page keeps its rule. */
  .hero .eyebrow::before{display:none}

  .wordmark__text .l2{font-size:11px;letter-spacing:.11em}
  .pit dt{font-size:12px;letter-spacing:.18em}
  .fact dt{font-size:12.5px}
  .menu__cat span{font-size:12.5px}

  /* 20 dishes made this section 1882px — over two screenfuls. Collapse each
     group behind a tappable bar; script.js folds them shut at this width. */
  .menu__sum{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menu__sum .menu__cat{padding:16px 34px 16px 0;position:relative;flex-wrap:wrap}
  .menu__sum .menu__cat::after{
    content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
    border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
    transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
  }
  .menu__group[open] .menu__cat::after{transform:translateY(-30%) rotate(225deg)}
  .menu__group[open] .menu__cat{border-bottom-color:var(--gold)}
  .menu__cols{gap:14px}
  .stat__label{font-size:12.5px}
  .footer-col p.footer-col__label{font-size:13px}
  .menu__extra,.review__meta,.review__time,  .dish__desc,.hero__desc,.subnote,.map__addr{font-size:14px}

  /* (carousel sizing lives with the coffee section's own mobile block) */

  /* ---- hero ran 1087px on an 844px screen, pushing both CTAs off the fold ---- */
  .hero{padding:52px 0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal .card,.js .reveal .dish,.js .reveal .grid3 figure{opacity:1;transform:none;transition:none}
  .js .reveal .coachline{width:84px;transition:none}
  .card{transform:none!important}
  .scrollprog span{--p:0}
  .marquee{animation:none;width:100%;justify-content:center}
  .marquee__group[aria-hidden]{display:none}
  .visit.is-in .tyremarks{animation:none;clip-path:none}
  *{transition:none!important}
}