/* Self-hosted fonts — eliminates FOUT from external Google Fonts request */
@font-face {
  font-family:'DM Sans';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('assets/fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:'DM Sans';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('assets/fonts/dmsans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/playfair-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --cream: #FAF7F2; --sand: #F0EBE0; --tan: #D9CEB8; --bark: #8B7355;
  --espresso: #2C1F14; --seafoam: #2A7A5E; --seafoam-light: #E2F2EC;
  --coral: #C0442A; --coral-light: #FAEBE7; --amber: #B5730A;
  --amber-light: #FDF0DC; --plum: #5B3468; --plum-light: #F0EAF4;
  --slate: #3D5166; --slate-light: #E8EEF3;
  --text: #1C1410; --text-mid: #5C4A38; --text-muted: #8C7A68;
  --border: rgba(139,115,85,0.18); --border-mid: rgba(139,115,85,0.3);
  --radius: 10px; --radius-lg: 14px;
  --shadow-card: 0 1px 3px rgba(44,31,20,.06), 0 4px 16px rgba(44,31,20,.07);
  --shadow-card-hover: 0 4px 8px rgba(44,31,20,.08), 0 12px 32px rgba(44,31,20,.13);
  --shadow-modal: 0 24px 80px rgba(20,12,6,.28);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.38s;
}
*{box-sizing:border-box;margin:0;padding:0;}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{display:block;width:14px;height:14px;flex-shrink:0;color:inherit;box-sizing:content-box}
.chip .icon{width:13px;height:13px;opacity:.9}
.icon--cpill-star{display:inline-block;vertical-align:-0.12em;color:var(--coral);flex-shrink:0}
.icon--rating-inline{display:inline-block;vertical-align:-0.08em;margin-left:1px;color:var(--seafoam)}
.icon--modal-row{color:var(--espresso);opacity:.88}
.icon--modal-chevron{color:var(--text-muted);opacity:.85;flex-shrink:0}
html{scroll-behavior:smooth;background:var(--cream);overflow-y:scroll;overflow-x:hidden;}
@supports (text-size-adjust:100%){html{text-size-adjust:100%;}}
@supports (-webkit-text-size-adjust:100%){html{-webkit-text-size-adjust:100%;}}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--text);font-size:15px;line-height:1.6;}
html.modal-open,body.modal-open{overflow:hidden;overscroll-behavior:none;}

/* Skip link — keyboard / screen reader first stop */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:2000;
  padding:10px 16px;
  background:var(--espresso);
  color:var(--cream);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{
  left:0;
  outline:2px solid var(--seafoam);
  outline-offset:2px;
}

/* HERO */
.hero{
  background:var(--espresso);
  color:var(--cream);
  padding:52px 40px 52px;
  position:relative;
  /* overflow visible so ::after wave can overlap the content below */
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
  z-index:1;
}
/* Curved wave cutout at the bottom of the hero */
.hero::after{
  content:'';
  position:absolute;
  bottom:0;
  left:-4%;
  width:108%;
  height:30px;
  background:var(--cream);
  border-radius:50% 50% 0 0 / 30px 30px 0 0;
  z-index:2;
}
.hero-inner{position:relative;max-width:900px;margin:0 auto;z-index:3;}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 60%;
  z-index:0;
}
.hero-eyebrow{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tan);
  margin-bottom:14px;
  opacity:.85;
}
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,5vw,46px);
  font-weight:500;
  line-height:1.12;
  margin-bottom:12px;
  letter-spacing:-.01em;
}
.hero-sub{
  font-size:13.5px;
  color:var(--tan);
  font-weight:300;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  opacity:.9;
}
.hero-sub .sep{opacity:.35;}

/* NAV */
.nav-wrap{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:200;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
/* Right-edge fade on mobile signals horizontal scroll; sticky already creates positioning context */
@media(max-width:640px){
  .nav-wrap::after{
    content:'';
    position:absolute;
    right:0;top:0;bottom:0;
    width:36px;
    background:linear-gradient(to right,transparent,rgba(255,255,255,.97));
    pointer-events:none;
    z-index:1;
  }
}
.nav{max-width:900px;margin:0 auto;display:flex;overflow-x:auto;}
@supports (scrollbar-width:none){.nav{scrollbar-width:none;}}
.nav::-webkit-scrollbar{display:none;}
.nav-btn{
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--text-muted);
  padding:14px 17px;
  border:none;
  background:none;
  cursor:pointer;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft), transform .12s var(--ease-out-soft);
  -webkit-tap-highlight-color:transparent;
  letter-spacing:.01em;
}
.nav-btn:active{transform:scale(0.97);}
.nav-btn:hover,.nav-btn:focus{color:var(--espresso);}
.nav-btn:focus-visible{outline:2px solid var(--seafoam);outline-offset:-3px;border-radius:3px;}
.nav-btn.active{color:var(--espresso);border-bottom-color:var(--seafoam);font-weight:600;}

/* LAYOUT */
.main{max-width:900px;margin:0 auto;padding:0 20px 80px;}
@media(min-width:600px){.main{padding:0 40px 80px;}}
.panel{display:none;padding-top:36px;}
.panel.active{display:block;animation:panel-in var(--dur-med) var(--ease-out) both;}
@keyframes panel-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* TYPOGRAPHY HELPERS */
.sl{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);margin:38px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.sl:first-child{margin-top:0;}
.cat-lbl{font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.09em;margin:28px 0 12px;}
.cat-lbl:first-child{margin-top:0;}
.cat-lbl.cat-lbl--spaced{margin-top:26px;}
.divider{height:1px;background:var(--border);margin:30px 0;}
.footnote{font-size:12px;color:var(--text-muted);margin-top:16px;padding-top:14px;border-top:1px solid var(--border);line-height:1.7;}
.footnote--key{display:flex;align-items:flex-start;gap:8px}
.footnote--key .icon--footnote-key{flex-shrink:0;margin-top:3px;color:var(--coral)}
.footnote-key-gap{flex:1;min-width:0}

/* BADGES */
.badge{font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap;letter-spacing:.02em;}
.b-must{background:var(--seafoam-light);color:var(--seafoam);}
.b-book{background:var(--coral-light);color:var(--coral);}
.b-easy{background:var(--sand);color:var(--bark);}
.b-fun{background:var(--plum-light);color:var(--plum);}
.b-coffee{background:var(--amber-light);color:var(--amber);}
.b-chin{background:var(--coral-light);color:var(--coral);}

/* COST + DISTANCE CHIPS */
.meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.chip{
  font-size:11px;
  color:var(--text-muted);
  background:var(--sand);
  border-radius:5px;
  padding:2px 8px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-weight:500;
}
.chip.cost-1{background:#E2F2EC;color:#1a5c40;}
.chip.cost-2{background:#FDF0DC;color:#7a4d00;}
.chip.cost-3{background:#FAEBE7;color:#8a2a14;}
.chip.cost-4{background:#F0EAF4;color:#4a1f5a;}
.chip.dist{background:var(--slate-light);color:var(--slate);}
.chip.cuisine{background:var(--sand);color:var(--bark);font-style:italic;}

/* CALENDAR */
.cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.leg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-mid);}
.leg-pip{width:8px;height:8px;border-radius:3px;}
.leg-pip--arrive{background:var(--seafoam-light);border:1px solid var(--seafoam);}
.leg-pip--depart{background:var(--coral-light);border:1px solid var(--coral);}
.leg-pip--bfast{background:var(--amber-light);border:1px solid var(--amber);}
.leg-pip--coffee{background:#FFF3E8;border:1px solid #9B5A00;}
.leg-pip--lunch{background:var(--slate-light);border:1px solid var(--slate);}
.leg-pip--dinner{background:var(--plum-light);border:1px solid var(--plum);}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.cal-dow{
  font-size:9px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  text-align:center;
  padding:9px 2px;
  background:var(--sand);
  border-bottom:1px solid var(--border);
}
.cal-dow:not(:last-child){border-right:1px solid var(--border);}
.cal-cell{min-height:130px;padding:8px 6px;background:white;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
.cal-cell:nth-child(7n){border-right:none;}
.cal-cell.empty{background:var(--sand);opacity:.45;}
.cal-cell.no-bot{border-bottom:none;}
.cal-num{font-family:'Playfair Display',serif;font-size:17px;color:var(--text);margin-bottom:6px;line-height:1;}
.cal-cell.empty .cal-num{color:var(--text-muted);}
.cal-mo{font-size:8px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-left:2px;font-weight:500;}
.cmeal{margin-bottom:4px;}
.cmeal-type{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:2px;}
.cpill{
  display:flex;
  align-items:center;
  gap:3px;
  min-width:0;
  font-size:9px;
  font-weight:500;
  padding:2px 5px;
  border-radius:4px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:2px;
  cursor:pointer;
  transition:opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.cpill:hover{opacity:.7;transform:translateY(-1px);}
.cp-depart.cp-depart--static:hover{transform:none;}
.cpill.alt{font-weight:400;opacity:.55;}
.cpill.alt::before{content:'or';font-size:7px;opacity:.65;margin-right:2px;}
.cp-arrive{background:var(--seafoam-light);color:var(--seafoam);}
.cp-depart{background:var(--coral-light);color:var(--coral);}
.cp-depart.cp-depart--static{margin-top:6px;cursor:default;}
.cp-bfast{background:var(--amber-light);color:var(--amber);}
.cp-coffee{background:#FFF3E8;color:#9B5A00;}
.cp-lunch{background:var(--slate-light);color:var(--slate);}
.cp-dinner{background:var(--plum-light);color:var(--plum);}
.cp-night{background:var(--seafoam-light);color:var(--seafoam);}
@media(max-width:480px){
  .cal-cell{min-height:96px;padding:5px 3px;}
  .cal-num{font-size:13px;}
  /* 8.5px keeps calendar pills readable without overflowing cells */
  .cpill{font-size:8.5px;padding:1px 3px;letter-spacing:-.01em;}
  .cmeal-type{display:none;}
  .cal-legend{gap:8px;}
}

/* DAY BLOCKS */
.day-block{
  border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:14px;
  box-shadow:var(--shadow-card);
  background:white;
}
.day-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  background:var(--sand);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
  gap:4px;
}
.day-title{font-family:'Playfair Display',serif;font-size:15px;font-weight:500;color:var(--espresso);letter-spacing:.01em;}
.day-date{font-size:11px;color:var(--text-muted);}
.meal-row{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:12px;
  padding:11px 18px;
  border-bottom:1px solid var(--border);
  align-items:start;
  background:white;
}
.meal-row:last-child{border-bottom:none;}
@media(min-width:500px){.meal-row{grid-template-columns:80px 1fr;gap:14px;padding:13px 20px;}}
.mtype{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding-top:12px;}
.meal-options{display:flex;flex-direction:column;gap:8px;}
.meal-opt{
  padding:9px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:white;
  transition:border-color var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.meal-opt.primary{border-color:var(--border-mid);}
.meal-opt.secondary{background:var(--cream);border-style:dashed;}
.r-link.meal-opt:hover{border-color:var(--tan);box-shadow:0 2px 8px rgba(44,31,20,.07);}
.opt-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;margin-bottom:3px;}
.opt-label.lbl-primary{color:var(--seafoam);}
.opt-label.lbl-secondary{color:var(--text-muted);}
.mname{font-size:13px;font-weight:500;color:var(--text);margin-bottom:3px;display:flex;align-items:center;flex-wrap:wrap;gap:5px;line-height:1.3;}
.mnote{font-size:11.5px;color:var(--text-mid);line-height:1.6;}

/* CLICKABLE RESTAURANT */
.r-link{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.r-link .mname{
  color:#1A5C7A;
  text-decoration:underline;
  text-decoration-color:rgba(26,92,122,.25);
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-out-soft), text-decoration-color var(--dur-fast);
}
.r-link:hover .mname{color:var(--seafoam);text-decoration-color:rgba(42,122,94,.35);}

/* RESTAURANT CARDS */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.r-card{
  background:white;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);
  padding:15px 16px;
  cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:
    box-shadow var(--dur-med) var(--ease-out-soft),
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out-soft);
  -webkit-tap-highlight-color:transparent;
}
.r-card:focus-visible,.g-card:focus-visible,.meal-opt:focus-visible{
  outline:2px solid var(--seafoam);
  outline-offset:2px;
}
.r-card:hover{
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-2px);
  border-color:var(--tan);
}
.r-card.hl{border-color:var(--seafoam);border-width:1.5px;}
.r-card.hl:hover{border-color:var(--seafoam);}
.r-card.hl-amber{border-color:var(--amber);border-width:1.5px;}
.r-card.hl-amber:hover{border-color:var(--amber);}
.r-name{
  font-family:'Playfair Display',serif;
  font-size:14px;
  font-weight:500;
  color:var(--espresso);
  margin-bottom:5px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  line-height:1.3;
}
.r-desc{font-size:11.5px;color:var(--text-mid);line-height:1.65;margin-bottom:8px;}
.tap-hint{
  font-size:10px;color:var(--text-muted);margin-top:8px;font-style:italic;
  opacity:.45;
  display:flex;align-items:center;gap:5px;
  transition:opacity var(--dur-fast) var(--ease-out-soft), color var(--dur-fast);
}
.tap-hint::after{
  content:"";
  width:5px;height:5px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  opacity:.5;
  flex-shrink:0;
  margin-bottom:1px;
}
.r-card:hover .tap-hint,.g-card:hover .tap-hint{opacity:1;color:var(--seafoam);}

/* GROCERY */
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.g-card{
  background:white;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--dur-med) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.g-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px);border-color:var(--tan);}
.g-card.gp{border-color:var(--seafoam);border-width:1.5px;}
.g-card.gp:hover{border-color:var(--seafoam);}
.g-role{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:4px;}
.g-name{font-family:'Playfair Display',serif;font-size:14px;color:var(--espresso);margin-bottom:5px;}
.g-desc{font-size:11.5px;color:var(--text-mid);line-height:1.6;}

/* TIPS */
.tip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px;}
.tip-card{
  background:var(--sand);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  border:1px solid transparent;
  transition:box-shadow var(--dur-med) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.tip-card:hover{box-shadow:0 4px 16px rgba(44,31,20,.09);transform:translateY(-1px);border-color:var(--border);}
.tip-title{font-size:12.5px;font-weight:600;color:var(--espresso);margin-bottom:4px;}
.tip-body{font-size:11.5px;color:var(--text-mid);line-height:1.65;}

/* ═══ MODAL ═══ */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,12,6,.55);
  z-index:1000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  overscroll-behavior:none;
  transition:opacity var(--dur-med) var(--ease-out), -webkit-backdrop-filter var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out);
  -webkit-backdrop-filter:blur(0);
  backdrop-filter:blur(0);
}
.modal-overlay.open{
  opacity:1;
  pointer-events:all;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
@media(min-width:600px){.modal-overlay{align-items:center;}}
.modal{
  background:var(--cream);
  width:100%;
  max-width:640px;
  max-height:92dvh;
  border-radius:20px 20px 0 0;
  overflow:hidden;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  transform:translateY(100%);
  opacity:0;
  transition:transform 0.42s var(--ease-out), opacity 0.32s var(--ease-out);
  box-shadow:var(--shadow-modal);
}
.modal-overlay.open .modal{transform:translateY(0);opacity:1;}
@media(min-width:600px){
  .modal{border-radius:20px;max-height:88vh;transform:translateY(20px) scale(0.97);}
  .modal-overlay.open .modal{transform:translateY(0) scale(1);}
}

/* Custom scrollbar for modal body — scrollbar-width/scrollbar-color only where supported; WebKit below */
.modal-body{overflow-y:auto;flex:1;overscroll-behavior:contain;}
@supports (scrollbar-width:thin){.modal-body{scrollbar-width:thin;}}
@supports (scrollbar-color:#888 #888){.modal-body{scrollbar-color:var(--tan) transparent;}}
.modal-body::-webkit-scrollbar{width:4px;}
.modal-body::-webkit-scrollbar-track{background:transparent;}
.modal-body::-webkit-scrollbar-thumb{background:var(--tan);border-radius:4px;}

.modal-drag{width:36px;height:4px;background:var(--tan);border-radius:2px;margin:10px auto 0;}
@media(min-width:600px){.modal-drag{display:none;}}
.modal-header{
  padding:18px 22px 15px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  background:var(--cream);
}
.modal-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;color:var(--espresso);line-height:1.2;letter-spacing:-.01em;}
.modal-subtitle{font-size:12px;color:var(--text-muted);margin-top:4px;line-height:1.4;}
.modal-close{
  background:var(--sand);
  border:1px solid var(--border);
  border-radius:50%;
  width:32px;
  height:32px;
  font-size:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--text-mid);
  transition:background var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.modal-close:hover{background:var(--tan);color:var(--espresso);border-color:var(--border-mid);}
.modal-close:active{transform:scale(0.90);}
.modal-loading{padding:48px;text-align:center;color:var(--text-muted);font-size:13px;}

/* photo gallery */
.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--sand);padding:3px;}
.photo-gallery img{width:100%;aspect-ratio:1;object-fit:cover;display:block;cursor:pointer;transition:opacity .15s;}
.photo-gallery img:hover{opacity:.9;}
.photo-gallery img:first-child{grid-column:span 2;aspect-ratio:16/9;}
.photo-placeholder{width:100%;aspect-ratio:16/9;background:var(--sand);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12px;grid-column:span 3;}
.photo-loading{padding:24px;text-align:center;font-size:13px;color:var(--text-muted);background:var(--sand);}
.photo-error{padding:14px 18px;background:var(--sand);font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:8px;}

/* map */
.map-embed{width:100%;height:220px;border:none;display:block;}
.map-section{padding:0;border-bottom:1px solid var(--border);}
.map-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:var(--text-muted);padding:8px 20px 4px;background:var(--cream);border-top:1px solid var(--border);}
.modal-map-shell{position:relative;width:100%;height:220px;background:var(--sand);border-top:1px solid var(--border);}
/* Hide map until JS adds .map-ready — avoids WebGL/tile flash while modal opens or route loads */
.modal-map{height:100%;width:100%;z-index:0;position:relative;opacity:0;transition:opacity .18s ease-out;}
.modal-map.map-ready{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .modal-map{transition:none;}
}
.map-style-overlay{position:absolute;left:8px;top:8px;z-index:10;pointer-events:auto;}
.map-style-overlay .map-style-toggle{
  box-shadow:0 2px 14px rgba(44,31,20,.14);
  background:rgba(255,255,255,.95);
  border-color:var(--border-mid);
}
@supports (backdrop-filter: blur(4px)){
  .map-style-overlay .map-style-toggle{
    -webkit-backdrop-filter:saturate(1.06) blur(8px);
    backdrop-filter:saturate(1.06) blur(8px);
  }
}
@media (prefers-reduced-motion: reduce){
  .map-style-overlay .map-style-toggle{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}
.map-style-toggle .map-style-btn{flex:0 0 auto;min-width:40px;width:40px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.map-style-icon{display:block;flex-shrink:0;opacity:.88;vector-effect:non-scaling-stroke;}
.map-style-btn.active .map-style-icon{opacity:1;}
.modal-map .leaflet-container{font-family:'DM Sans',sans-serif;font-size:12px;}
.modal-map .mapboxgl-map{font-family:'DM Sans',sans-serif;}
.modal-map .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin:6px 8px 8px;}
.modal-map .mapboxgl-ctrl-group{
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 2px 12px rgba(44,31,20,.12);
  background:rgba(255,255,255,.97);
}
.modal-map .mapboxgl-ctrl-group button{
  width:30px;
  height:30px;
  background:rgba(255,255,255,.99);
}
.modal-map .mapboxgl-ctrl-group button:hover{background:var(--sand);}
.modal-map .mapboxgl-ctrl-group button + button{border-top:1px solid var(--border);}
.modal-map .mapboxgl-ctrl-attrib{
  font-size:10px;
  line-height:1.35;
  max-width:calc(100% - 100px);
  color:var(--text-mid);
  background:rgba(250,247,242,.93);
  border:1px solid var(--border);
  padding:3px 7px 4px;
  border-radius:6px;
  box-shadow:0 1px 6px rgba(44,31,20,.08);
}
.modal-map .mapboxgl-ctrl-attrib a{
  color:#1a5f47;
  text-decoration:underline;
  text-underline-offset:2px;
}
.modal-map .mapboxgl-ctrl-attrib a:hover{color:var(--seafoam);}
.modal-map .mapboxgl-popup-content{
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  line-height:1.4;
  padding:9px 12px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  color:var(--espresso);
}
.modal-map .mapboxgl-popup-close-button{
  font-size:18px;
  padding:4px 8px;
  color:var(--text-mid);
  border-radius:4px;
}
.modal-map .mapboxgl-popup-close-button:hover{
  color:var(--espresso);
  background:var(--sand);
}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:8px 20px 6px;font-size:11px;color:var(--text-mid);background:var(--cream);border-top:1px solid var(--border);}
.map-route-line{display:inline-flex;align-items:center;gap:6px;}
/* Swatch matches map: seafoam core + dark casing halo for legibility on varied backgrounds */
.map-route-line i{
  display:inline-block;
  width:22px;
  height:5px;
  border:none;
  border-radius:3px;
  background:var(--seafoam);
  box-shadow:0 0 0 2px rgba(15,28,23,.38);
  vertical-align:middle;
}
/* Slight min-height limits jump when route line replaces loading text */
.map-route-meta{
  font-size:11px;
  color:var(--text-mid);
  line-height:1.45;
  padding:4px 20px 8px;
  background:var(--cream);
  min-height:2.9em;
}
.route-mode-bar{padding:8px 20px;background:var(--cream);border-top:1px solid var(--border);}
.route-mode-toggle,.map-style-toggle{display:flex;border-radius:8px;border:1px solid var(--border);overflow:hidden;background:white;}
.route-mode-btn,.map-style-btn{
  flex:1;
  padding:8px 12px;
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  color:var(--text-mid);
  background:white;
  border:none;
  cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.route-mode-btn + .route-mode-btn,.map-style-btn + .map-style-btn{border-left:1px solid var(--border);}
.route-mode-btn:hover,.route-mode-btn:focus,.map-style-btn:hover,.map-style-btn:focus{color:var(--espresso);background:var(--sand);}
.route-mode-btn:focus-visible,.map-style-btn:focus-visible{outline:2px solid var(--seafoam);outline-offset:2px;}
.route-mode-btn.active,.map-style-btn.active{background:var(--seafoam);color:white;}
.route-mode-btn.active:hover,.route-mode-btn.active:focus,.map-style-btn.active:hover,.map-style-btn.active:focus{background:var(--seafoam);color:white;}
.map-pin{display:inline-flex;align-items:center;gap:4px;}
.pin-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.pin-hotel{background:#2A7A5E;}
.pin-dest{background:#C0442A;}
.map-actions{display:flex;flex-direction:column;}
.map-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 20px;
  text-decoration:none;
  gap:12px;
  color:inherit;
  transition:background var(--dur-fast) var(--ease-out-soft);
}
.map-action--primary{background:white;border-top:1px solid var(--border);}
.map-action--secondary{background:var(--cream);border-top:1px solid var(--border);}
.map-action:hover,.map-action:focus{background:var(--sand);}
.map-action-title{font-size:13px;font-weight:500;color:var(--espresso);}
.map-action-sub{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.35;}
.map-action-arrow{display:flex;align-items:center;flex-shrink:0;transition:transform var(--dur-fast) var(--ease-out);}
.map-action-arrow .icon{color:var(--text-muted)}
.map-action:hover .map-action-arrow{transform:translateX(3px);}

/* modal content sections */
.modal-section{padding:12px 20px;border-bottom:1px solid var(--border);}
.modal-section:last-child{border-bottom:none;}
.modal-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:var(--text-muted);margin-bottom:5px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media(max-width:360px){.info-grid{grid-template-columns:1fr;}}
.info-item{background:white;border-radius:var(--radius);padding:9px 11px;border:1px solid var(--border);}
.info-label{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
.info-value{font-size:13px;color:var(--text);font-weight:500;line-height:1.3;}
.info-value a{color:#1A5C7A;text-decoration:none;}
.hours-list{display:flex;flex-direction:column;gap:0;}
.hours-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;padding:3px 0;border-bottom:1px solid var(--border);}
.hours-row:last-child{border-bottom:none;}
.hours-day{color:var(--text-mid);font-weight:500;}
.hours-time{color:var(--text);}
.menu-link-wrap{margin:0 0 8px;}
.menu-external-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  font-weight:600;
  color:var(--seafoam);
  text-decoration:none;
}
.menu-external-link:hover,.menu-external-link:focus-visible{text-decoration:underline;}
.menu-external-link .icon--menu-external{flex-shrink:0;opacity:.85;}
.menu-items{display:flex;flex-direction:column;gap:5px;}
.menu-item{
  background:white;
  border-radius:var(--radius);
  padding:9px 13px;
  border:1px solid var(--border);
  transition:border-color var(--dur-fast);
}
.menu-item:hover{border-color:var(--tan);}
.menu-item-name{font-size:13px;font-weight:500;color:var(--text);}
.menu-item-desc{font-size:11px;color:var(--text-muted);margin-top:1px;}
.cta-row{display:flex;gap:8px;flex-wrap:wrap;padding:16px 22px 22px;}
.cta-btn{
  flex:1;
  min-width:120px;
  padding:11px 18px;
  border-radius:var(--radius);
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  display:inline-block;
  border:1px solid var(--border-mid);
  background:white;
  color:var(--text);
  transition:opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out-soft), background var(--dur-fast);
  letter-spacing:.01em;
}
.cta-btn.primary{background:var(--espresso);color:var(--cream);border-color:var(--espresso);}
.cta-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 14px rgba(44,31,20,.12);}
.cta-btn:active{transform:translateY(0);opacity:1;}
.cta-btn.primary:hover{background:#3d2c1e;}

/* Review quote — more editorial */
.review-quote{
  font-size:12.5px;
  color:var(--text-mid);
  font-style:italic;
  line-height:1.65;
  padding:12px 14px 12px 16px;
  background:white;
  border-left:3px solid var(--seafoam);
  border-radius:0 var(--radius) var(--radius) 0;
  margin-top:8px;
  position:relative;
}

@keyframes spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .panel.active{animation:none;}
  .nav-btn{transition:color var(--dur-fast),border-color var(--dur-fast);}
  .nav-btn:active{transform:none;}
  .cpill{transition:opacity var(--dur-fast);}
  .cpill:hover{transform:none;}
  .r-card,.g-card,.tip-card{transition:box-shadow var(--dur-fast);}
  .r-card:hover,.g-card:hover,.tip-card:hover{transform:none;}
  .modal-overlay{transition:opacity var(--dur-fast);-webkit-backdrop-filter:none;backdrop-filter:none;}
  .modal-overlay.open{-webkit-backdrop-filter:none;backdrop-filter:none;}
  .modal{transition:opacity var(--dur-fast);}
  .modal-overlay.open .modal{transform:none;}
  .cta-btn{transition:opacity var(--dur-fast);}
  .cta-btn:hover{transform:none;box-shadow:none;}
  .modal-close:active{transform:none;}
  .map-action:hover .map-action-arrow{transform:none;}
}