/* ===========================================================
   ISLAND GRIND - site.css
   Board tone vars are set inline per page from $BOARD_TONE.
   =========================================================== */

:root{
  --ink:#141110;
  --ink-2:#221D1A;
  --ink-soft:#4A4139;
  --bone:#F4EEE4;
  --bone-2:#E9E0D2;
  --vermilion:#E04E2E;
  --petrol:#0B3F3C;
  --sun:#F0B429;

  --display:'Archivo', 'Arial Narrow', sans-serif;
  --body:'Chivo', system-ui, sans-serif;
  --script:'Caveat Brush', cursive;
  --mono:'Martian Mono', ui-monospace, monospace;


  --gut: clamp(20px, 4vw, 60px);
  --maxw: 1340px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--vermilion); outline-offset:3px}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}

/* display type */
.dsp{
  font-family:var(--display); font-weight:900; font-stretch:82%;
  text-transform:uppercase; line-height:.86; letter-spacing:-.015em; margin:0;
}
.eyebrow{
  font-family:var(--display); font-weight:700; font-stretch:100%;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin:0;
}
.script{font-family:var(--script); text-transform:none; font-weight:400; letter-spacing:0}
.mark{color:var(--vermilion); position:relative; display:inline-block}
.mark::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.09em;
  background:var(--vermilion); border-radius:99px; transform:rotate(-.7deg);
}

/* photo placeholders */
.ph{position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 25% 0%, #DED4C4 0%, #C6B9A5 48%, #A2947E 100%)}
.ph::before{content:''; position:absolute; inset:0; opacity:.32;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 2px, transparent 2px 9px)}
.ph::after{
  content:attr(data-shot); position:absolute; left:14px; bottom:12px; right:14px;
  font-family:var(--display); font-weight:600; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(0,0,0,.5); line-height:1.45;
}
.ph--dark{background:radial-gradient(120% 90% at 70% 10%, #2E2722 0%, #14100D 72%)}
.ph-img{width:100%; height:100%; object-fit:cover; background:none}
.ph-img::before,.ph-img::after{content:none}

/* buttons */
.pill{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-family:var(--display); font-weight:700; font-stretch:100%; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:16px 30px; border-radius:999px; border:2px solid var(--ink);
  background:var(--ink); color:var(--bone);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.pill:hover{background:var(--vermilion); border-color:var(--vermilion); color:#fff; transform:translateY(-2px)}
.pill--ghost{background:transparent; color:var(--ink)}
.pill--ghost:hover{background:var(--ink); border-color:var(--ink); color:var(--bone)}
.pill--light{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.pill--light:hover{background:var(--vermilion); border-color:var(--vermilion); color:#fff}
.pill--outline-light{background:transparent; color:var(--bone); border-color:rgba(244,238,228,.55)}
.pill--outline-light:hover{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.pill--red{background:var(--vermilion); border-color:var(--vermilion); color:#fff}
.pill--red:hover{background:var(--ink); border-color:var(--ink); color:var(--bone)}
.pill--sm{padding:11px 22px; font-size:11px}
.pill .arw{transition:transform .2s ease}
.pill:hover .arw{transform:translateX(4px)}

/* header */
.hdr{position:sticky; top:0; z-index:60; background:var(--bone); border-bottom:2px solid var(--ink)}
.hdr__in{display:flex; align-items:center; gap:30px; padding:14px var(--gut); max-width:var(--maxw); margin-inline:auto}
.brand{text-decoration:none; display:flex; flex-direction:column; line-height:.9; flex:0 0 auto}
.brand b{font-family:var(--script); font-size:30px; font-weight:400; color:var(--vermilion)}
.brand span{font-family:var(--display); font-weight:700; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); margin-top:4px}
.nav{display:flex; align-items:center; gap:24px; margin-left:auto}
.nav__item{position:relative}
.nav__link{
  font-family:var(--display); font-weight:700; font-stretch:100%; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  background:none; border:0; color:var(--ink); padding:12px 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.nav__link::after{content:''; position:absolute; left:0; right:0; bottom:4px; height:3px; background:var(--vermilion); border-radius:99px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.nav__item:hover .nav__link::after,.nav__item:focus-within .nav__link::after{transform:scaleX(1)}
.hdr__cta{margin-left:6px}

.mega{
  position:absolute; top:100%; left:50%; transform:translate(-50%,10px);
  width:min(940px, calc(100vw - 32px)); background:var(--bone); border:2px solid var(--ink);
  border-radius:22px; padding:32px; display:grid; grid-template-columns:repeat(4,1fr) 250px; gap:26px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  box-shadow:10px 10px 0 rgba(20,17,16,.12);
}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0)}
.mega--sm{grid-template-columns:1fr 1fr; width:min(580px, calc(100vw - 32px))}
.mega h4{font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase; font-size:15px; letter-spacing:.03em; margin:0 0 14px; color:var(--vermilion)}
.mega ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.mega a{font-size:15px; text-decoration:none; color:var(--ink-soft)}
.mega a:hover{color:var(--vermilion)}
.mega__feature{border-left:2px solid var(--ink); padding-left:24px}
.mega__feature .ph{height:130px; border-radius:12px; margin-bottom:14px}
.mega__feature p{font-size:14px; color:var(--ink-soft); margin:0 0 14px}
.mega__loc{display:block; text-decoration:none; padding:18px; border:2px solid var(--ink); border-radius:14px}
.mega__loc:hover{background:var(--sun)}
.mega__loc b{font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase; font-size:19px; display:block}
.mega__loc small{font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.1em; color:var(--ink-soft)}
.burger{display:none; background:none; border:0; padding:10px; cursor:pointer; margin-left:auto}
.burger span{display:block; width:26px; height:2.5px; background:var(--ink); margin:5px 0; border-radius:99px}

/* hero */
.hero{background:var(--ink); color:var(--bone); padding:clamp(44px,6vw,84px) 0 0; position:relative; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,60px); align-items:center}
.hero h1{font-size:clamp(58px,10.2vw,146px)}
.hero h1 .script{display:inline-block; font-size:.82em; color:var(--sun); line-height:.9}
.hero__sub{max-width:32ch; margin:26px 0 0; color:rgba(244,238,228,.78); font-size:19px}
.hero__btns{display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 clamp(44px,6vw,80px)}
.hero__art{position:relative; align-self:stretch; min-height:clamp(340px,44vw,560px)}
.hero__art .ph{position:absolute; inset:0; border-radius:22px 22px 0 0}
.hero__note{
  position:absolute; left:-18px; top:26px; z-index:3; background:var(--sun); color:var(--ink);
  font-family:var(--script); font-size:22px; padding:14px 20px; border-radius:99px; transform:rotate(-4deg);
}

/* board */
.board{background:var(--board-bg); color:var(--board-fg); padding:clamp(30px,3.8vw,46px) 0}
.board__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px)}
.board__card{background:var(--ink); border-radius:20px; padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:14px}
.board__card h3{font-size:clamp(24px,2.8vw,34px); color:var(--bone)}
.board__meta{font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,238,228,.6); margin:0}
.board__card p{margin:0; color:rgba(244,238,228,.8); font-size:16px}
.board__card .pill{align-self:flex-start; margin-top:4px}
.status{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.status i{width:8px; height:8px; border-radius:50%; background:var(--vermilion)}
.status--open i{background:#5FBF7F}
.board__lead{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px}
.board__lead h2{font-size:clamp(26px,3.4vw,42px); color:currentColor}
.board__lead .eyebrow{color:currentColor; opacity:.6}

/* sections */
.sec{padding:clamp(56px,7.5vw,110px) 0}
.sec--tight{padding-top:0}
.sec__head{max-width:60ch; margin-bottom:clamp(30px,4vw,52px)}
.sec__head h2{font-size:clamp(38px,6vw,78px); margin-top:12px}
.sec__head p{color:var(--ink-soft); font-size:18px; margin:18px 0 0}
.squiggle{display:block; width:150px; height:8px; margin-top:16px;
  background:radial-gradient(circle at 8px 12px, transparent 9px, var(--sun) 9px 12px, transparent 12px) repeat-x 0 -8px/24px 24px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,36px)}
.step{background:var(--bone-2); border-radius:20px; padding:26px}
.step__n{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:900; font-size:19px; color:#fff; background:var(--petrol)}
.step:nth-child(2) .step__n{background:var(--vermilion)}
.step:nth-child(3) .step__n{background:var(--sun); color:var(--ink)}
.step h3{font-size:24px; margin:20px 0 8px}
.step p{margin:0; color:var(--ink-soft); font-size:16px}
.step .ph{aspect-ratio:9/13; border-radius:16px; margin-top:22px}

/* split panels */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px)}
.panel{position:relative; border-radius:24px; overflow:hidden; min-height:clamp(390px,44vw,520px);
  display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(26px,3.2vw,44px)}
.panel--bar{background:var(--petrol); color:var(--bone)}
.panel--go{background:var(--bone-2); color:var(--ink)}
.panel__ph{position:absolute; inset:0; opacity:.5}
.panel__in{position:relative}
.panel h3{font-size:clamp(38px,5vw,62px); margin:10px 0 12px}
.panel--bar h3{color:var(--bone)}
.panel--go h3{color:var(--vermilion)}
.panel ul{list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:10px;
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.panel p{margin:0; max-width:34ch}
.panel--bar p,.panel--bar .eyebrow{color:rgba(244,238,228,.78)}
.panel--go p{color:var(--ink-soft)}

/* menu cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.card{background:#fff; border:2px solid var(--ink); border-radius:20px; padding:26px; display:flex; flex-direction:column; gap:10px}
.card__top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.card h3{font-size:26px; margin:0}
.card p{margin:0; color:var(--ink-soft); font-size:15px}
.card__price{font-family:var(--display); font-weight:900; font-size:19px; background:var(--sun); border-radius:99px; padding:5px 14px; white-space:nowrap}
.card__tag{font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--vermilion)}
.menu__foot{margin-top:40px; display:flex; gap:14px; flex-wrap:wrap}

/* locations */
.locs{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px)}
.loc{position:relative; border-radius:24px; overflow:hidden; min-height:clamp(400px,46vw,540px);
  display:flex; align-items:flex-end; padding:clamp(24px,3vw,42px); color:var(--bone)}
.loc .ph{position:absolute; inset:0}
.loc::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,13,11,.9) 0%, rgba(15,13,11,.28) 58%, transparent 100%)}
.loc__in{position:relative; z-index:2; width:100%}
.loc h3{font-size:clamp(32px,3.8vw,48px); margin:10px 0 6px}
.loc__meta{font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,238,228,.78); margin:0}
.loc p{margin:14px 0 22px; color:rgba(244,238,228,.85); max-width:34ch; font-size:16px}
.loc__badge{
  position:absolute; top:22px; right:22px; z-index:3; width:104px; height:104px; border-radius:50%;
  background:var(--sun); color:var(--ink); display:grid; place-items:center; text-align:center;
  font-family:var(--display); font-weight:900; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.2; padding:14px; transform:rotate(-6deg);
}
.loc:nth-child(2) .loc__badge{background:var(--petrol); color:var(--bone)}

/* sticky mobile bar */
.mobar{position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--ink); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); display:none}
.mobar .pill{width:100%; justify-content:center}

/* modal */
.modal{position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:20px; background:rgba(20,17,16,.66)}
.modal[open]{display:grid}
.modal__card{background:var(--bone); border:3px solid var(--ink); border-radius:24px; padding:clamp(26px,4vw,42px); max-width:540px; width:100%}
.modal__card h3{font-size:38px; margin:12px 0 8px}
.modal__card p{color:var(--ink-soft); margin:0 0 24px}
.modal__opt{display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none;
  padding:20px; border:2px solid var(--ink); border-radius:16px; margin-bottom:12px}
.modal__opt:hover{background:var(--sun)}
.modal__opt b{font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase; font-size:21px; display:block}
.modal__opt small{font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.1em; color:var(--ink-soft)}
.modal__opt .status i{background:var(--vermilion)}
.modal__close{background:none; border:0; cursor:pointer; padding:10px 0; color:var(--ink-soft);
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase}

@media (max-width:1080px){
  .nav{display:none} .burger{display:block} .hdr__cta{display:none}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__art{min-height:340px; margin-top:8px}
  .hero__note{left:auto; right:16px; top:-16px}
  .board__grid,.split,.locs,.steps,.cards{grid-template-columns:1fr}
  .step .ph{max-width:260px}
  .mobar{display:block}
  body{padding-bottom:74px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ---------- arrivals / departures board ---------- */

.bd{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px)}
.bd__card{
  background:var(--ink,#141110); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column;
}

/* header strip */
.bd__strip{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px clamp(20px,2.4vw,30px);
  font-family:var(--mono,monospace); font-weight:700; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase;
}
.bd__card--arr .bd__strip{background:#1E7A6E; color:#F4EEE4}
.bd__card--dep .bd__strip{background:var(--sun,#F0B429); color:var(--ink,#141110)}
.bd__kind{display:flex; align-items:center; gap:10px}
.bd__kind svg{width:17px; height:17px; flex:0 0 auto}
.bd__live{display:inline-flex; align-items:center; gap:7px; opacity:.85; font-size:11px}
.bd__live i{width:7px; height:7px; border-radius:50%; background:currentColor}
.bd__card--arr .bd__live i{background:#5FBF7F}

/* title block */
.bd__top{padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,30px) 6px}
.bd__top h3{
  font-family:var(--display,sans-serif); font-weight:900; font-stretch:82%;
  text-transform:uppercase; font-size:clamp(28px,3.2vw,40px); line-height:.94;
  margin:0; color:var(--bone,#F4EEE4); letter-spacing:-.01em;
}
.bd__meta{
  margin:10px 0 0; font-family:var(--mono,monospace); font-weight:500; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(244,238,228,.5);
}
.bd__where{
  margin:9px 0 0; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(244,238,228,.72);
}
.bd__where::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--sun,#F0B429); flex:0 0 auto;
}
.bd__card--arr .bd__where::before{background:#7FD6A6}

/* two counters, opposite sides of security */
.bd__ctrs{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.bd__ctr{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  padding:11px 13px; border-radius:12px; background:rgba(244,238,228,.05);
  border-left:3px solid var(--sun,#F0B429);
}
.bd__ctr--land{border-left-color:#7FD6A6}
.bd__side{
  font-family:var(--mono,monospace); font-weight:700; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap; padding-top:3px; color:var(--sun,#F0B429);
}
.bd__ctr--land .bd__side{color:#7FD6A6}
.bd__at{font-size:13px; color:rgba(244,238,228,.66); line-height:1.45}
.bd__at b{
  display:block; font-family:var(--display,sans-serif); font-weight:900; font-stretch:82%;
  text-transform:uppercase; font-size:13px; letter-spacing:.02em; color:rgba(244,238,228,.92); margin-bottom:2px;
}
.bd__at em{display:block; font-style:normal; font-size:12px; color:rgba(244,238,228,.42); margin-top:3px}
@media (max-width:420px){
  .bd__ctr{grid-template-columns:1fr; gap:5px}
}

/* rows */
.bd__rows{padding:18px clamp(20px,2.4vw,30px) 0; perspective:900px}
.bd__head,.bd__row{
  display:grid; grid-template-columns:64px 1fr 96px; gap:14px; align-items:center;
  font-family:var(--mono,monospace); font-size:12px; letter-spacing:.06em;
}
.bd__head{
  font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,238,228,.34); padding-bottom:10px; border-bottom:1px solid rgba(244,238,228,.16);
}
.bd__row{
  padding:11px 0; border-bottom:1px solid rgba(244,238,228,.1);
  color:rgba(244,238,228,.9); transform-origin:top center; opacity:0;
}
.bd.is-in .bd__row{animation:bdFlap .42s cubic-bezier(.4,1.5,.5,1) forwards}
@keyframes bdFlap{
  from{transform:rotateX(-88deg); opacity:0}
  to{transform:rotateX(0deg); opacity:1}
}
.bd__t{font-weight:700; font-variant-numeric:tabular-nums; color:var(--sun,#F0B429)}
.bd__card--arr .bd__t{color:#7FD6A6}
.bd__svc{font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:rgba(244,238,228,.92)}
.bd__st{
  font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  text-align:right; white-space:nowrap;
}
.bd__st--serving{color:#7FD6A6}
.bd__st--next{color:var(--sun,#F0B429)}
.bd__st--sched{color:rgba(244,238,228,.38)}
.bd__st--closed{color:rgba(244,238,228,.3)}

.bd__foot{padding:22px clamp(20px,2.4vw,30px) clamp(24px,2.6vw,30px); margin-top:auto}
.bd__note{margin:0 0 18px; color:rgba(244,238,228,.62); font-size:15px; max-width:34ch}

@media (max-width:860px){
  .bd{grid-template-columns:1fr}
}
@media (max-width:420px){
  .bd__head,.bd__row{grid-template-columns:54px 1fr 80px; gap:10px; font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .bd__row{opacity:1 !important; transform:none !important; animation:none !important}
}

/* ---------- footer ---------- */

/* ---------- footer ---------- */
.ftr{background:var(--ink); color:var(--bone); position:relative; overflow:hidden}

/* ticker */
.ftr__ticker{background:var(--sun); color:var(--ink); overflow:hidden; padding:13px 0; border-bottom:3px solid var(--ink)}
.ftr__track{display:flex; width:max-content; animation:ftrRoll 34s linear infinite}
.ftr__ticker:hover .ftr__track{animation-play-state:paused}
.ftr__seq{display:flex; align-items:center; flex:0 0 auto}
.ftr__seq span{
  font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase;
  font-size:15px; letter-spacing:.04em; padding:0 22px; white-space:nowrap;
}
.ftr__seq i{width:9px; height:9px; background:var(--ink); border-radius:50%; flex:0 0 auto}
@keyframes ftrRoll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* body */
.ftr__body{
  display:grid; grid-template-columns:1.15fr 2fr; gap:clamp(34px,5vw,72px);
  padding-top:clamp(50px,6vw,80px); padding-bottom:clamp(34px,4vw,54px);
}
.ftr__script{
  font-family:var(--script); font-size:clamp(38px,5vw,62px); line-height:.95;
  color:var(--sun); margin:0 0 14px;
}
.ftr__blurb{color:rgba(244,238,228,.62); font-size:16px; max-width:32ch; margin:0 0 26px}

.ftr__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.ftr h4{
  font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase;
  font-size:15px; margin:0 0 18px; color:var(--vermilion); letter-spacing:.02em;
}
.ftr ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.ftr__cols a{
  text-decoration:none; color:rgba(244,238,228,.82); font-size:15px;
  display:inline-block; transition:transform .18s ease, color .18s ease;
}
.ftr__cols a:hover{color:var(--sun); transform:translateX(4px)}
.ftr__addr{color:rgba(244,238,228,.5); font-size:13px; line-height:1.45; margin:4px 0 0}
.ftr__hrs b{display:block; font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase; font-size:14px; color:rgba(244,238,228,.9); margin-bottom:5px}
.ftr__hrs span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:rgba(244,238,228,.55); line-height:1.7}

.social{display:flex; gap:10px; flex-wrap:wrap}
.social a{
  width:42px; height:42px; border:2px solid rgba(244,238,228,.28); border-radius:50%;
  display:grid; place-items:center; text-decoration:none; color:var(--bone);
  font-family:var(--display); font-weight:700; font-size:12px;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.social a:hover{background:var(--vermilion); border-color:var(--vermilion); color:#fff; transform:translateY(-3px)}

/* giant clipped wordmark */
.ftr__markwrap{overflow:hidden; line-height:0; padding:0 var(--gut)}
.ftr__mark{
  display:block; font-family:var(--display); font-weight:900; font-stretch:70%;
  text-transform:uppercase; color:var(--vermilion); font-size:clamp(74px,15.4vw,232px);
  line-height:.72; letter-spacing:-.03em; margin:0 auto; max-width:var(--maxw);
  white-space:nowrap; user-select:none;
}

/* bottom bar */
.ftr__bot{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:30px; border-top:2px solid rgba(244,238,228,.16);
  font-size:13px; color:rgba(244,238,228,.55);
}
.ftr__clock{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,238,228,.6)}
.ftr__clock b{color:var(--sun); font-weight:700}
.ftr__top{
  text-decoration:none; color:var(--bone); border:2px solid rgba(244,238,228,.28);
  border-radius:999px; padding:9px 18px; font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.ftr__top:hover{background:var(--sun); border-color:var(--sun); color:var(--ink)}

@media (max-width:1080px){
  .ftr__body{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .ftr__cols{grid-template-columns:1fr}
  .ftr__bot{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .ftr__track{animation:none !important}
  .ftr__cols a:hover,.social a:hover{transform:none}
}

/* ===========================================================
   MOBILE NAV
   =========================================================== */
.mnav{display:none; flex-direction:column; gap:2px; padding:14px var(--gut) 22px; border-top:2px solid var(--ink); background:var(--bone)}
.mnav a{
  text-decoration:none; color:var(--ink); padding:13px 0;
  font-family:var(--display); font-weight:900; font-stretch:82%;
  text-transform:uppercase; font-size:20px; border-bottom:1px solid rgba(20,17,16,.12);
}
.mnav .pill{margin-top:16px; justify-content:center; border-bottom:0}
.burger.is-on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.burger span{transition:transform .2s ease, opacity .2s ease}
.nav__link.is-on::after{transform:scaleX(1)}
@media (max-width:1080px){ .mnav{display:flex} }

/* ===========================================================
   MENU PAGE
   =========================================================== */
.mhero{padding:clamp(44px,6vw,86px) 0 clamp(26px,3vw,40px)}
.mhero h1{font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase;
  font-size:clamp(52px,9vw,116px); line-height:.86; letter-spacing:-.02em; margin:14px 0 0}
.mhero__sub{max-width:44ch; margin:24px 0 0; font-size:19px; color:var(--ink-soft)}
.mhero__sub [data-count]{font-family:var(--display); font-weight:900; color:var(--vermilion)}

/* filter bar */
.fbar{position:sticky; top:0; z-index:50; background:var(--bone); border-bottom:2px solid var(--ink); padding:14px 0 0}
.fbar__in{display:grid; gap:10px}
.fbar__row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.fbar__lbl{font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); min-width:38px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:9px 16px; border-radius:999px; cursor:pointer;
  border:2px solid rgba(20,17,16,.22); background:transparent; color:var(--ink);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover{border-color:var(--ink)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:var(--bone)}
.chip--now.is-on{background:var(--vermilion); border-color:var(--vermilion); color:#fff}
.chip--clear{border-style:dashed; color:var(--ink-soft)}

.secnav{display:flex; gap:4px; overflow-x:auto; padding:6px 0 0; margin-top:2px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.secnav::-webkit-scrollbar{display:none}
.secnav__a{
  flex:0 0 auto; text-decoration:none; padding:12px 16px; white-space:nowrap;
  font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase;
  font-size:14px; color:var(--ink-soft); border-bottom:4px solid transparent;
}
.secnav__a:hover{color:var(--ink)}
.secnav__a.is-on{color:var(--ink); border-bottom-color:var(--vermilion)}

/* sections */
.msec{padding:clamp(40px,5vw,72px) 0 0; scroll-margin-top:190px}
.msec.is-thin{padding-bottom:0}
.msec__head{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(20px,4vw,60px);
  align-items:end; padding-bottom:20px; border-bottom:3px solid var(--ink)}
.msec__head h2{font-size:clamp(32px,4.6vw,58px)}
.msec__lede{margin:0; color:var(--ink-soft); font-size:16px; max-width:52ch}
.only{display:inline-block; margin-top:9px; font-family:var(--display); font-weight:700;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  background:var(--sun); padding:5px 11px; border-radius:999px}
.msec__empty{margin:26px 0 0; color:var(--ink-soft); font-size:15px}

.mlist{list-style:none; margin:0; padding:0}
.mitem{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start;
  padding:20px 0; border-bottom:1px solid rgba(20,17,16,.14)}
.mitem[hidden]{display:none}
.mitem h3{font-family:var(--display); font-weight:900; font-stretch:82%; text-transform:uppercase;
  font-size:21px; margin:0; letter-spacing:.01em}
.mitem__main p{margin:6px 0 0; color:var(--ink-soft); font-size:15px; max-width:56ch}
.mitem__meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.tag{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:rgba(20,17,16,.07); color:var(--ink-soft)}
.tag--v,.tag--vg{background:rgba(30,122,110,.14); color:#14675F}
.tag--gf{background:rgba(11,63,60,.1); color:var(--petrol)}
.tag--iced{background:rgba(20,118,107,.1); color:#14766B}
.tag--time{background:rgba(240,180,41,.26); color:#7A5A0B}
.tag--where{background:rgba(224,78,46,.12); color:var(--vermilion)}
.tag--note{background:transparent; border:1px dashed rgba(20,17,16,.28)}
.mitem__price{display:flex; gap:14px; align-items:baseline; padding-top:2px}
.price{font-family:var(--mono); font-weight:700; font-size:16px; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.price em{display:block; font-style:normal; font-size:9px; letter-spacing:.12em;
  color:var(--ink-soft); margin-bottom:3px}

.mnote{padding-top:26px}
.mnote p{margin:0; font-size:16px; color:var(--ink-soft)}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; color:var(--vermilion);
  font:inherit; text-decoration:underline; text-underline-offset:3px}

.mcta{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.mcta h2{font-size:clamp(32px,4.6vw,58px); margin:12px 0 0}
.mcta__btns{display:flex; gap:12px; flex-wrap:wrap}
.allerg{font-size:12px; color:var(--ink-soft); opacity:.75; max-width:100ch;
  padding-top:34px; padding-bottom:34px; line-height:1.6}

@media (max-width:860px){
  .msec__head{grid-template-columns:1fr; align-items:start; gap:12px}
  .mitem{grid-template-columns:1fr; gap:10px}
  .mitem__price{padding-top:0}
  .fbar__lbl{display:none}
  .msec{scroll-margin-top:240px}
}

/* ===========================================================
   HEADER STATUS RAIL
   The strip above the nav. Shows live open/closed by default,
   swaps to a contextual line when a nav item is hovered.
   =========================================================== */
.rail{background:var(--ink); color:var(--bone); font-family:var(--mono)}
.rail__in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
  height:38px;
}
.rail__status{display:flex; gap:18px; align-items:center}
.rail__loc{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,238,228,.55); white-space:nowrap;
}
.rail__loc i{width:6px; height:6px; border-radius:50%; background:var(--vermilion); flex:0 0 auto}
.rail__loc.is-open i{background:#5FBF7F; box-shadow:0 0 0 0 rgba(95,191,127,.7); animation:railPulse 2.6s ease-out infinite}
.rail__loc b{font-weight:700; color:rgba(244,238,228,.85)}
@keyframes railPulse{
  0%{box-shadow:0 0 0 0 rgba(95,191,127,.55)}
  70%{box-shadow:0 0 0 7px rgba(95,191,127,0)}
  100%{box-shadow:0 0 0 0 rgba(95,191,127,0)}
}

.rail__msg{
  text-align:center; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sun); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s ease;
}
.rail.is-hint .rail__msg{color:#fff}
.rail__clock{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,238,228,.45); white-space:nowrap;
}
.rail__clock b{color:rgba(244,238,228,.8); font-weight:700}

/* nav picks up the board's mono voice */
.nav__link{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.16em}

@media (max-width:1080px){
  .rail__in{grid-template-columns:1fr auto; gap:14px; height:34px}
  .rail__msg{display:none}
}
@media (max-width:560px){
  .rail__in{grid-template-columns:1fr}
  .rail__clock{display:none}
  .rail__status{gap:12px}
  .rail__loc{font-size:9px; letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  .rail__loc.is-open i{animation:none}
}

/* ===========================================================
   LOGO
   Used when /assets/img/red-logo.png exists. The text wordmark
   is the fallback and stays in the markup until then.
   =========================================================== */
.logo{display:block; width:auto; height:auto}
.brand--img{padding:2px 0}
.logo--hdr{height:clamp(38px, 4.4vw, 52px); max-width:230px; object-fit:contain}
.ftr__brand--img{display:block}
.logo--ftr{height:clamp(64px, 7vw, 92px); max-width:280px; object-fit:contain; margin-bottom:12px}
.ftr__brand--img span{display:block; font-family:var(--display); font-weight:700; font-size:9px;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(244,238,228,.5)}
@media (max-width:560px){
  .logo--hdr{height:36px}
}

/* ===========================================================
   LOGO WELL
   The mark gets its own zone on the left, divided from the nav.
   Shrinks on scroll so a tall header does not eat the viewport.
   =========================================================== */
.hdr__in{padding-top:0; padding-bottom:0; gap:0}

.hdr__logo{
  flex:0 0 auto; display:flex; align-items:center;
  padding:16px 34px 16px 0; margin-right:34px;
  border-right:2px solid rgba(20,17,16,.13);
  align-self:stretch;
}
.hdr__logo .brand{padding:0}
.logo--hdr{
  height:clamp(78px, 10vw, 150px); max-width:none;
  transition:height .3s cubic-bezier(.4,0,.2,1);
}
.hdr.is-compact .logo--hdr{height:clamp(46px, 5vw, 58px)}
.hdr.is-compact .hdr__logo{padding-top:10px; padding-bottom:10px}

/* keep the type fallback proportional too */
.hdr__logo .brand b{font-size:clamp(26px, 3vw, 40px)}
.hdr.is-compact .hdr__logo .brand b{font-size:26px}

@media (max-width:1080px){
  .hdr__logo{padding-right:22px; margin-right:0; border-right:0}
  .logo--hdr{height:clamp(64px, 14vw, 92px)}
  .hdr.is-compact .logo--hdr{height:52px}
}
@media (max-width:560px){
  .logo--hdr{height:58px}
  .hdr.is-compact .logo--hdr{height:44px}
  .hdr__logo{padding:10px 14px 10px 0}
}
@media (prefers-reduced-motion:reduce){
  .logo--hdr{transition:none}
}

/* ===========================================================
   FLOATING ACTION DOCK
   Right edge on desktop, folds into the bottom bar on mobile.
   =========================================================== */
.dock{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:65; display:flex; flex-direction:column; gap:10px;
}
.dock__b{
  display:flex; align-items:center; gap:0; cursor:pointer; text-decoration:none;
  height:54px; padding:0; border:2px solid var(--ink); border-radius:999px;
  background:var(--bone); color:var(--ink); overflow:hidden;
  max-width:54px; transition:max-width .34s cubic-bezier(.4,0,.2,1), background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:0 6px 20px rgba(20,17,16,.16);
}
.dock__i{flex:0 0 50px; display:grid; place-items:center}
.dock__i svg{width:22px; height:22px}
.dock__t{
  white-space:nowrap; padding-right:24px; opacity:0;
  font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase;
  transition:opacity .22s ease .06s;
}
.dock__b:hover,.dock__b:focus-visible{max-width:280px; background:var(--ink); color:var(--bone); border-color:var(--ink)}
.dock__b:hover .dock__t,.dock__b:focus-visible .dock__t{opacity:1}
.dock__b--go{background:var(--vermilion); border-color:var(--vermilion); color:#fff}
.dock__b--go:hover,.dock__b--go:focus-visible{background:var(--ink); border-color:var(--ink); color:var(--bone)}

/* find us panel */
.modal__card--wide{max-width:600px}
.dpanel{border:2px solid rgba(20,17,16,.16); border-radius:16px; padding:18px; margin-bottom:12px}
.dpanel__top{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px}
.dpanel__top b{
  font-family:var(--display); font-weight:900; font-stretch:82%;
  text-transform:uppercase; font-size:20px; line-height:1.1;
}
.dpanel__top .status{color:var(--ink-soft)}
.dpanel__l{margin:0 0 4px; font-size:14px; color:var(--ink-soft); line-height:1.45}
.dpanel__l--dim{opacity:.72; font-size:13px}
.dpanel__btns{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.stars{color:var(--sun); font-size:16px; letter-spacing:2px; white-space:nowrap}

@media (max-width:860px){
  .dock{
    right:auto; left:0; top:auto; bottom:0; transform:none; width:100%;
    flex-direction:row; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--ink); border-top:2px solid var(--ink);
  }
  .dock__b{
    max-width:none; height:48px; box-shadow:none; flex:0 0 48px;
    background:transparent; border-color:rgba(244,238,228,.35); color:var(--bone);
  }
  .dock__b--go{flex:1 1 auto; background:var(--vermilion); border-color:var(--vermilion); justify-content:center}
  .dock__b--go .dock__t{opacity:1; padding:0 20px 0 0}
  .dock__b--go .dock__i{flex:0 0 42px}
  .dock__b:not(.dock__b--go) .dock__t{display:none}
  .dock__b:hover{background:var(--bone); color:var(--ink); border-color:var(--bone)}
  .mobar{display:none !important}
  body{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){
  .dock__b,.dock__t{transition:none}
}

/* ===========================================================
   HEADER FLOW
   Nav sits against the divider rather than being pushed right,
   so the dead zone between logo and nav closes up. The order
   button is the only thing anchored to the right edge.
   =========================================================== */
.hdr .nav{margin-left:0; margin-right:auto; gap:clamp(18px, 2vw, 30px)}
.hdr .hdr__cta{margin-left:24px; flex:0 0 auto}

/* a touch shorter so the bar is not doing all the work */
.logo--hdr{height:clamp(74px, 8.6vw, 128px)}
.hdr__logo{padding:14px 30px 14px 0; margin-right:30px}
.hdr.is-compact .hdr__logo{padding-top:8px; padding-bottom:8px}

/* nav links carry a little more weight now they lead the row */
.hdr .nav__link{font-size:12px; letter-spacing:.14em; padding:14px 0}

@media (max-width:1180px){
  .hdr .nav{gap:16px}
  .hdr .nav__link{font-size:11px; letter-spacing:.1em}
  .hdr .hdr__cta{margin-left:14px}
}
@media (max-width:1080px){
  .hdr .nav{margin-right:0}
  .hdr__logo{margin-right:auto; padding-right:16px}
}