/* Self-hosted: the browser makes no third-party request before it can paint
   text. Josefin Sans is one variable file covering the whole weight axis,
   including the 700 that <strong> resolves to. Both are OFL licensed --
   see fonts/OFL-NOTICE.txt. */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:100 700;
  font-display:swap;src:url(../fonts/josefin-sans-var.woff2) format('woff2')}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;
  font-display:swap;src:url(../fonts/marcellus-400.woff2) format('woff2')}

/* Driftwood Beach Cafe - site styles */

:root{
  --deep-ocean:#0f4c5c;
  --tide-teal:#0f6e8c;
  --bay-blue:#3d94ad;
  --sky:#8fd0e6;
  --sky-legible:#b8e3f2;
  --sand:#e8cfa8;
  --cream:#fbf9f4;
  --paper:#fffefc;
  --shell:#f7f4ec;
  --sage:#eef3ef;
  --ink:#122b33;
  --body:#3f5359;
  --muted:#55707a;
  --footer:#0a3b48;
  --alert:#a3301c;
}

*,*::before,*::after{box-sizing:border-box}

[hidden]{display:none !important}

html{scroll-behavior:smooth;background:var(--cream)}

body{
  margin:0;
  font-family:'Josefin Sans',system-ui,-apple-system,sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

h1{font-family:'Marcellus',Georgia,serif;margin:0;font-weight:400}
h2,h3{margin:0;font-weight:400;letter-spacing:0.01em}
p{margin:0}

a{color:var(--tide-teal)}
a:hover{color:#0a5470}

button,input,textarea,select{font-family:inherit}
button{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1.1;text-align:center;cursor:pointer;
}

img{display:block;max-width:100%}

*:focus-visible{outline:3px solid var(--tide-teal);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */

.wrap{
  width:100%;max-width:1560px;margin:0 auto;
  padding:0 clamp(20px,4vw,64px);
}

.section{padding:clamp(48px,6.5vw,90px) 0}
.section--paper{background:#fff}
.section--flush-top{padding-top:0}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:500;line-height:1.1;text-align:center;
  padding:clamp(11px,1.2vw,15px) clamp(20px,2.2vw,30px);
  border-radius:6px;font-size:clamp(14px,1.1vw,16px);
  border:1.5px solid transparent;min-height:44px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(15,76,92,0.35)}

.btn--solid{background:var(--deep-ocean);color:#fff;border-color:var(--deep-ocean)}
.btn--solid:hover{color:#fff}
.btn--outline{background:transparent;color:var(--deep-ocean);border-color:rgba(15,76,92,0.4)}
.btn--outline:hover{color:var(--deep-ocean)}

.link-arrow{
  display:inline-block;text-decoration:none;font-weight:600;
  font-size:clamp(13px,1vw,14.5px);
}
.link-arrow--light{color:#fff;border-bottom:1.5px solid var(--sky);width:fit-content}
.link-arrow--light:hover{color:#fff}

/* ---------- eyebrow / headings ---------- */

.eyebrow{
  display:block;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tide-teal);font-weight:600;
}
.eyebrow--light{color:var(--sky-legible)}
.eyebrow--sand{color:var(--sand)}

.section-title{
  font-size:clamp(24px,3vw,30px);margin-top:12px;color:var(--deep-ocean);
}
.center{text-align:center}

/* ---------- header ---------- */

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,244,0.7);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(18,43,51,0.08);
}
.header-inner{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:8px clamp(16px,4vw,44px);
  min-height:clamp(66px,8.4vw,100px);
}

.logo{--lk:clamp(39px,6vw,76px);display:flex;align-items:center;gap:calc(var(--lk) * 0.05);text-decoration:none}
.logo img{height:var(--lk);width:auto;aspect-ratio:760/550}
.logo-text{text-align:center;display:block}
.logo-name,.logo-place{display:block}
.logo-name{
  font-weight:300;font-size:calc(var(--lk) * 0.354);line-height:1;
  letter-spacing:calc(var(--lk) * 0.052);text-transform:uppercase;color:var(--deep-ocean);
}
.logo-place{
  font-weight:600;font-size:calc(var(--lk) * 0.104);
  letter-spacing:calc(var(--lk) * 0.052);text-transform:uppercase;
  color:var(--tide-teal);margin-top:calc(var(--lk) * 0.083);
}
.logo--reversed .logo-name{color:#fff}
.logo--reversed .logo-place{color:var(--sky)}
.logo--reversed img{filter:brightness(0) invert(1);opacity:.92}

.main-nav{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:clamp(14px,2vw,28px);
  font-size:clamp(14px,1.3vw,16px);font-weight:300;white-space:nowrap;
}
.main-nav a{text-decoration:none;color:var(--ink)}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--tide-teal)}

.header-actions{display:flex;align-items:center;gap:16px}

.btn-book{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  text-decoration:none;color:var(--deep-ocean);
  font-size:clamp(11px,0.85vw,12.5px);letter-spacing:1.5px;text-transform:uppercase;
  font-weight:500;padding:clamp(10px,0.95vw,12px) clamp(18px,1.9vw,24px);
  border:1px solid rgba(15,76,92,0.35);border-radius:6px;
}
.btn-book:hover{color:var(--deep-ocean)}

.burger{
  display:none;background:none;border:1px solid rgba(18,43,51,0.2);
  border-radius:6px;width:44px;height:44px;font-size:18px;color:var(--ink);
}

.mobile-nav{
  display:none;flex-direction:column;gap:18px;
  padding:20px 20px 26px;border-top:1px solid rgba(18,43,51,0.08);
  font-size:16px;font-weight:400;
}
.mobile-nav.is-open{display:flex}
.mobile-nav a{text-decoration:none;color:var(--ink)}
.mobile-nav .btn-book{text-align:center}

/* ---------- hero (home) ---------- */

.hero{
  position:relative;overflow:hidden;background:var(--paper);
  display:flex;align-items:center;padding:110px 0;min-height:620px;
}
.hero-grid{position:relative;z-index:2;width:100%}
.hero-copy{max-width:560px}
.hero-eyebrow{
  display:block;font-size:12px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--tide-teal);font-weight:600;margin-left:2px;
}
.hero-title{
  font-size:clamp(34px,4.4vw,58px);line-height:1.12;
  margin:18px 0 0;color:var(--deep-ocean);
}
.hero-lede{
  font-size:clamp(15px,1.3vw,18px);line-height:1.55;
  max-width:480px;margin:22px 0 0;color:var(--body);
}
.hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
/* Everyone-eats-well line: reads as a second lede, not small print. */
.hero-diets{
  font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.55;font-weight:500;
  color:var(--deep-ocean);max-width:480px;margin:22px 0 0;
  padding-left:14px;border-left:3px solid var(--tide-teal);
}

.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-fade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(251,245,233,0.86) 0%,
    rgba(251,245,233,0.78) 30%,
    rgba(251,245,233,0.38) 48%,
    rgba(251,245,233,0.06) 62%,
    rgba(251,245,233,0) 74%);
}
.hero-zoom{position:absolute;inset:0;animation:kenburns 22s ease-in-out infinite alternate}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.warm-tint{
  position:absolute;inset:0;background:rgba(255,150,60,0.08);
  mix-blend-mode:overlay;pointer-events:none;
}

@keyframes kenburns{
  from{transform:scale(1.08) translateY(0)}
  to{transform:scale(1.18) translateY(-14px)}
}

/* ---------- page hero (inner pages) ---------- */

.page-hero{
  position:relative;padding:150px 0 70px;
  background:var(--deep-ocean);color:#fff;overflow:hidden;
}
.page-hero-media{position:absolute;inset:0;overflow:hidden}
.page-hero-media img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate}
.page-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(58,38,22,0.5) 0%,rgba(28,20,14,0.86) 100%);
}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(32px,5vw,52px);margin-top:14px;color:#fff}
.page-hero p{margin-top:14px;font-size:clamp(14px,1.15vw,16px);color:rgba(255,255,255,0.85);max-width:560px}

/* ---------- specials marquee ---------- */

.marquee{background:#d3e6ea;padding:20px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marquee 28s linear infinite}
.marquee-group{
  display:inline-flex;gap:48px;padding-right:48px;
  font-size:13px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--deep-ocean);font-weight:400;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- stats ---------- */

.stats{padding:clamp(28px,4vw,52px) 0;background:var(--deep-ocean)}
.stat-label a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.about-fact-label a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  text-align:center;color:#fff;
}
.stats-grid > div + div{border-left:1px solid rgba(255,255,255,0.15)}
.stat-figure{font-size:clamp(24px,2.6vw,32px)}
.stat-label{margin:8px 0 0;font-size:clamp(12px,1vw,14px);color:rgba(255,255,255,0.8)}

/* ---------- cards ---------- */

.hover-lift{transition:transform .35s ease,box-shadow .35s ease}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 20px 44px -14px rgba(15,76,92,0.3)}

.teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.teaser{
  text-decoration:none;color:var(--ink);display:block;
  padding:32px 26px;background:var(--shell);border-radius:16px;
}
.teaser h3{font-size:20px;color:var(--deep-ocean);margin-bottom:12px}
.teaser p{color:#4a5f66;font-size:clamp(13px,1vw,14.5px);line-height:1.6}

/* ---------- specials board ---------- */

.specials-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px}
.board{
  position:relative;background:rgba(15,76,92,0.85);border-radius:18px;
  padding:44px 48px;color:#fff;border:2px solid rgba(255,255,255,0.55);
  box-shadow:inset 0 0 0 6px rgba(255,255,255,0.04),0 24px 50px -20px rgba(15,76,92,0.5);
}
.board-pin{
  position:absolute;top:16px;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.25);
}
.board-pin--l{left:16px}
.board-pin--r{right:16px}
.board h2{font-size:clamp(24px,3vw,30px);margin-top:12px;color:#fff}
.board-list{display:flex;flex-direction:column;margin-top:20px}
.board-row{
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.15);
  font-size:clamp(15px,1.2vw,17px);font-weight:300;
  display:flex;gap:18px;align-items:baseline;color:rgba(255,255,255,0.92);
  transition:padding-left .3s ease,color .3s ease;
}
.board-row:last-child{border-bottom:none}
.board-row:hover{padding-left:10px;color:var(--sky)}
.board-num{font-size:clamp(13.5px,1vw,15px);color:var(--sky-legible)}
.board-note{margin-top:18px;font-size:14px;color:rgba(255,255,255,0.8)}

.feature-card{position:relative;border-radius:16px;overflow:hidden;min-height:280px}
.feature-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-card-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,35,45,0.25) 0%,rgba(8,28,36,0.88) 100%);
}
.feature-card-body{
  position:relative;padding:32px 28px;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
}
.feature-card-body h3{font-size:26px;color:#fff;margin-top:8px}
.feature-card-body p{margin:10px 0 0;font-size:clamp(13.5px,1vw,15px);line-height:1.6;color:rgba(255,255,255,0.9)}

/* ---------- photo strip ---------- */

.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.photo-tile{display:block;border-radius:6px;overflow:hidden;aspect-ratio:1}
.photo-tile img{width:100%;height:100%;object-fit:cover}

/* ---------- feature band ---------- */

.band{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  background:var(--deep-ocean);border-radius:6px;padding:56px;color:#fff;
}
.band h2{font-size:clamp(25px,3.4vw,34px);margin-top:12px;color:#fff;line-height:1.2}
.band p{font-size:clamp(14px,1.1vw,15.5px);line-height:1.7;color:rgba(255,255,255,0.85);margin-top:16px}
.band-media{border-radius:6px;overflow:hidden;height:280px}
.band-media img{width:100%;height:100%;object-fit:cover}

/* ---------- dine-out set menu ---------- */

.dineout-prices{
  display:flex;gap:16px 40px;justify-content:center;align-items:baseline;flex-wrap:wrap;
  width:fit-content;margin-left:auto;margin-right:auto;
  padding:15px 38px;border-top:1px solid #d8c9a5;border-bottom:1px solid #d8c9a5;
}
.dineout-price-sep{color:#a3863f;font-size:12px}
.dineout-prices--band{justify-content:flex-start;margin-top:22px;width:auto;margin-left:0;margin-right:0;padding:0;border:0}
.dineout-price{display:inline-flex;align-items:baseline;gap:12px}
.dineout-price-label{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.dineout-price-amount{font-family:'Marcellus',serif;font-size:clamp(21px,2vw,25px);color:var(--deep-ocean);line-height:1}
.dineout-price--band{
  flex-direction:row;min-width:0;border-radius:999px;color:#fff;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.28);
  padding:10px 20px;font-size:clamp(14px,1.1vw,16px);letter-spacing:0.02em;
}
.dineout-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,4vw,60px);margin-top:44px;max-width:1200px;
  margin-left:auto;margin-right:auto;
}

.menu-item .dine-contains{
  display:block;font-size:11px;font-style:italic;letter-spacing:0.02em;
  color:#a3863f;margin-top:5px;line-height:1.5;
}

.dineout-note{
  text-align:center;margin:44px auto 0;max-width:640px;
  font-size:14px;line-height:1.65;color:var(--muted);
}
@media (max-width:900px){
  .dineout-grid{grid-template-columns:1fr;gap:34px}
}

/* ---------- legal pages ---------- */

.legal{max-width:820px}
.legal h1{font-size:clamp(28px,4vw,40px);margin-top:14px;color:var(--deep-ocean)}
.legal h2{font-size:clamp(19px,2vw,23px);color:var(--deep-ocean);margin-top:36px}
.legal p{margin-top:14px;font-size:clamp(14px,1.1vw,16px);line-height:1.7;color:var(--body)}
.legal ul{margin:14px 0 0;padding-left:22px;color:var(--body);font-size:clamp(14px,1.1vw,16px);line-height:1.7}
.legal li{margin-top:8px}
.legal-updated{font-size:13.5px;color:var(--muted)}

/* ---------- guest reviews ---------- */

.review-summary{
  text-align:center;margin-top:14px;font-size:15px;color:var(--body);
}
.review-summary a{color:var(--tide-teal);font-weight:600}
.review-stars{color:#eba412;font-size:15px;letter-spacing:2.5px}

.review-carousel{margin-top:40px}
.review-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 20px;scrollbar-width:none;align-items:stretch;
}
.review-track::-webkit-scrollbar{display:none}
.review-card{
  flex:0 0 min(100%, 360px);scroll-snap-align:start;margin:0;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(15,76,92,0.12);border-radius:16px;
  padding:24px 24px 20px;
  box-shadow:0 14px 30px -20px rgba(15,76,92,0.3);
}
.review-card p{
  margin-top:12px;font-size:clamp(14px,1.05vw,15.5px);line-height:1.65;
  color:var(--body);
}
.review-who{
  margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:11px;
}
.review-avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tide-teal);color:#fff;font-weight:600;font-size:16px;
}
.review-card:nth-child(3n+2) .review-avatar{background:var(--deep-ocean)}
.review-card:nth-child(3n) .review-avatar{background:var(--bay-blue)}
.review-name strong{display:block;font-weight:600;color:var(--ink);font-size:14.5px}
.review-name span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

.review-nav{display:flex;justify-content:center;margin-top:8px}
.review-dots{display:flex;gap:8px;align-items:center}
.review-dots span{
  width:9px;height:9px;border-radius:50%;
  background:rgba(15,76,92,0.22);transition:transform .3s ease,background .3s ease;
}
.review-dots span.is-here{background:var(--deep-ocean);transform:scale(1.3)}

/* ---------- visit card ---------- */

.visit-card{
  border:3px solid rgba(15,110,140,0.4);
  outline:1px solid rgba(15,110,140,0.4);outline-offset:5px;
  border-radius:6px;
  padding:clamp(28px,3.4vw,48px) clamp(24px,3.8vw,56px);
  display:grid;grid-template-columns:1.1fr 1fr 1fr auto;
  gap:clamp(22px,2.6vw,36px);align-items:center;
}
.visit-card h3{font-size:24px;margin-top:8px;color:var(--deep-ocean)}
.visit-card .eyebrow{font-size:12.5px;letter-spacing:1.5px}
.visit-col{font-size:clamp(13px,1vw,14.5px);line-height:1.7;color:var(--body)}
.visit-col strong{display:block;font-weight:600;color:var(--deep-ocean);margin-bottom:4px}
.visit-map{grid-column:1/-1;width:100%;height:320px;border:0;border-radius:6px;margin-top:8px}

/* ---------- social ---------- */

.social{padding:clamp(44px,6vw,80px) 0;background:var(--sage)}
.post-grid{max-width:900px;margin:40px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:#fff;border-radius:6px;overflow:hidden;border:1px solid rgba(18,43,51,0.08)}
.post-media{aspect-ratio:1}
.post-media img{width:100%;height:100%;object-fit:cover}
.post p{padding:14px 16px;font-size:13.5px;color:var(--body);line-height:1.5}
.post-source{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}
.social-actions{display:flex;gap:16px;justify-content:center;margin-top:40px}
.btn-social{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  text-decoration:none;color:var(--deep-ocean);font-weight:600;
  font-size:clamp(13px,1vw,14.5px);padding:11px 24px;
  border:1.5px solid rgba(15,76,92,0.35);border-radius:6px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn-social:hover{color:var(--deep-ocean);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(15,76,92,0.35)}

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

.site-footer{
  padding:44px 0 32px;background:var(--footer);
  color:rgba(255,255,255,0.6);
}
.site-footer .wrap{max-width:1180px;padding:0 32px}
.footer-brand{padding-bottom:26px}
.footer-brand .logo{--lk:66px;gap:calc(var(--lk) * 0.125)}
.footer-cols{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-col{display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer-col strong{
  font-weight:600;color:#fff;letter-spacing:1px;
  text-transform:uppercase;font-size:12px;margin-bottom:4px;
}
.footer-col a{text-decoration:none;color:rgba(255,255,255,0.75)}
.footer-col a:hover{color:#fff}
.footer-credit{color:rgba(255,255,255,0.75);text-decoration:none}
.footer-credit:hover{color:#fff;text-decoration:underline}
.footer-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13.5px;padding-top:20px;
}

/* ---------- responsive ---------- */

@media (max-width:1150px){
  .visit-card{grid-template-columns:1fr 1fr;row-gap:28px}
  .stats-grid{gap:20px}
}
@media (max-width:1150px) and (min-width:901px){
  .hero-grid{grid-template-columns:1fr 1fr;gap:36px}
  .hero-title{font-size:clamp(30px,3.6vw,44px)}
}
@media (max-width:960px){
  .band{grid-template-columns:1fr;gap:36px;padding:40px}
  .specials-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-media{max-width:640px;margin:0 auto;width:100%}
  .post-grid{grid-template-columns:1fr 1fr}
  .photo-strip{grid-template-columns:1fr 1fr}
  .teaser-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1040px){
  .main-nav{display:none}
  .header-actions .btn-book{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .hero{min-height:0;padding:90px 0 70px}
  .hero-fade{background:rgba(251,245,233,0.8)}
  .hero-grid{text-align:center}
  .hero-copy{max-width:none}
  .hero-title{font-size:38px}
  .hero-eyebrow,.hero-lede,.hero-diets{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .stats-grid{grid-template-columns:1fr}
  .stats-grid > div + div{border-left:none;border-top:1px solid rgba(255,255,255,0.15);padding-top:14px}
  .teaser-grid{grid-template-columns:1fr}
  .visit-card{grid-template-columns:1fr;text-align:center}
  .visit-map{height:220px}
  .post-grid{grid-template-columns:1fr}
  .board{padding:32px 26px}
  .page-hero{padding:110px 0 56px}
}

/* ---------- nav dropdown ---------- */

.nav-drop{position:relative}
.nav-drop > a{display:inline-flex;align-items:center;gap:5px}
.nav-caret{font-size:10px;opacity:.65;transform:translateY(-1px)}
.nav-drop::after{
  content:"";position:absolute;top:100%;left:-16px;right:-16px;height:16px;
}
.nav-drop-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;min-width:190px;z-index:70;
  background:#fff;border:1px solid #e8e1cf;border-radius:12px;padding:8px;
  box-shadow:0 22px 48px -18px rgba(15,76,92,0.4);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible}
.nav-drop-menu a{
  padding:10px 14px;border-radius:8px;white-space:nowrap;
  font-size:14.5px;
}
.nav-drop-menu a:hover{background:var(--shell)}

/* ---------- event banners ---------- */

.event-banner{
  position:relative;overflow:hidden;color:#fff;
  background:var(--deep-ocean);
  display:flex;align-items:center;
  min-height:clamp(380px,34vw,480px);
  padding:56px 0;
}
.event-banner .wrap{width:100%}
.page-hero--banner{
  min-height:clamp(380px,34vw,480px);display:flex;align-items:center;
  padding:70px 0 56px;
}
.page-hero--banner .wrap{width:100%}
.page-hero--banner .page-hero-media img{animation:none}
.event-banner-media img,.page-hero--banner .page-hero-media img{
  transition:transform 1s cubic-bezier(.2,.6,.2,1);will-change:transform;
}
.event-banner:hover .event-banner-media img,
.page-hero--banner:hover .page-hero-media img{transform:scale(1.06)}
.event-banner-scrim{transition:opacity .6s ease}
.event-banner:hover .event-banner-scrim{opacity:0.65}
.page-hero--banner .page-hero-scrim{transition:opacity .6s ease}
.page-hero--banner:hover .page-hero-scrim{opacity:0.72}
.event-banner-media{position:absolute;inset:0}
.event-banner-media img{width:100%;height:100%;object-fit:cover}
.event-banner-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,20,14,0.38) 0%,rgba(28,20,14,0.74) 100%);
}
.event-banner .wrap{position:relative}
.event-banner h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:clamp(28px,4vw,44px);color:#fff;margin:12px 0 0;line-height:1.15}
.event-banner p{
  margin-top:14px;max-width:580px;
  font-size:clamp(14px,1.15vw,16px);line-height:1.65;color:rgba(255,255,255,0.88);
}
.event-banner .btn-light{display:inline-block;margin-top:26px}
.page-hero--banner .btn-light{display:inline-block;margin-top:24px}

.gig-list{max-width:700px;margin:36px auto 0;text-align:left}
.gig{
  display:flex;gap:26px;align-items:baseline;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid #e3dcc9;
}
.gig:last-child{border-bottom:none}
.gig-date{font-weight:600;color:var(--deep-ocean);min-width:110px;white-space:nowrap}
.gig-info{color:var(--body)}
.gig-info strong{color:var(--ink);font-weight:600}
.event-banner--right{text-align:right}
.event-banner--right p{margin-left:auto}
@media (max-width:700px){
  .event-banner--right{text-align:left}
  .event-banner--right p{margin-left:0}
}

/* ---------- menu ---------- */

.menu-tabs{
  position:sticky;top:101px;z-index:40;
  background:rgba(251,249,244,0.92);backdrop-filter:blur(8px);
  border-bottom:1px solid #e3dcc9;
}
.menu-tabs .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 18px;padding-top:14px;padding-bottom:12px;
}
.menu-tabs a{
  display:inline-block;text-decoration:none;padding:2px 1px;
  font-size:13.5px;font-weight:500;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);line-height:1.3;
  border-bottom:2px solid transparent;
  transition:transform .25s ease,color .2s ease,border-color .2s ease;
}
.menu-tabs a:hover{color:var(--deep-ocean);transform:scale(1.12)}
.menu-tabs a.is-here{color:var(--deep-ocean);border-bottom-color:var(--tide-teal)}
.tab-sep{color:#cfc5a6;font-size:16px;font-weight:300;user-select:none}
#breakfast,#lunch,#drinks,#wines{scroll-margin-top:155px}

.diet{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:600;letter-spacing:0.05em;line-height:1;
  height:15px;min-width:15px;padding:0 6px;border-radius:999px;
  margin-left:5px;vertical-align:1px;white-space:nowrap;
}
.diet--v{background:#e2eed8;color:#41702c}
.diet--vg{background:#d3eadf;color:#1d6b4c}
.diet--gf{background:#f4e9cd;color:#8a6a1f}
.allergens .diet,.menu-group-note .diet{margin-left:0}
@media (max-width:700px){
  .menu-tabs{top:67px}
  .menu-tabs .wrap{gap:4px 12px;padding-top:10px;padding-bottom:9px}
  .menu-tabs a{font-size:12px;letter-spacing:0.05em}
  .tab-sep{font-size:14px}
  #breakfast,#lunch,#drinks,#wines{scroll-margin-top:120px}
}

.menu-section-title{
  font-size:22px;color:var(--deep-ocean);
  padding-bottom:12px;border-bottom:2px solid #e3dcc9;margin-bottom:6px;
}
.menu-section-title + .menu-section-title{margin-top:34px}
.menu-section-title .qualifier{
  font-size:13px;color:var(--muted);font-weight:400;
}
.menu-group + .menu-group .menu-section-title{margin-top:34px}

.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:start}

.menu-item{
  display:flex;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid rgba(18,43,51,0.08);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(15.5px,1.25vw,17px);font-weight:400;
}
.menu-item:last-child{border-bottom:none}
.menu-item .note{color:var(--muted);font-size:13px}
.menu-price{display:flex;align-items:center;gap:14px;white-space:nowrap}

.menu-item--addon span{color:var(--muted);font-size:14px}

.menu-shell{background:var(--shell)}
.menu-shell .menu-section-title{border-bottom-color:#d9d0b8}
.menu-shell .menu-item{border-bottom-color:rgba(18,43,51,0.1)}

.menu-meal-title{
  font-family:'Marcellus',serif;font-weight:400;font-size:clamp(26px,3vw,34px);
  color:var(--deep-ocean);margin-bottom:28px;
}
.menu-meal-title .qualifier{font-family:'Josefin Sans',sans-serif;font-size:14px;color:var(--muted)}
.menu-cols + .menu-cols{margin-top:34px}
.menu-item-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.menu-desc{color:var(--muted);font-size:13px;line-height:1.55}
.menu-intro{max-width:820px;color:var(--muted);font-size:15px;line-height:1.7;margin:6px 0 30px}
.menu-intro a{color:var(--tide-teal)}
.menu-group-note{font-size:13px;color:var(--muted);line-height:1.55;margin:4px 0 8px}

.allergens{margin-top:36px;font-size:13px;line-height:1.6;color:var(--muted)}

.fave{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:0.04em;
  line-height:1;padding:4px 9px 3px;border-radius:999px;margin-left:6px;
  vertical-align:2px;white-space:nowrap;
  background:#f8edd2;color:#8a6a1f;border:1px solid #e7d6a8;
}

.menu-notes{
  margin-top:46px;padding:22px 26px;max-width:880px;
  background:var(--paper);border:1px solid #e3dcc9;border-radius:12px;
  font-size:13px;line-height:1.7;color:var(--muted);
}
.menu-notes p{margin:0}
.menu-notes p + p{margin-top:12px}
.menu-notes strong{color:var(--body);font-weight:600}
.menu-notes-key{
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
  padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid #eee8d8;
  color:var(--body);
}
.key-pair{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.key-pair .diet{margin-left:0}

/* ---------- forms ---------- */

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}

@media (max-width:720px){
  .menu-cols{grid-template-columns:1fr;gap:0}
  .form-row{grid-template-columns:1fr;gap:14px}
}

/* ---------- gallery ---------- */

.gallery-grid{columns:3;column-gap:20px}
.gallery-tile{position:relative;border-radius:14px;overflow:hidden;margin:0 0 20px;break-inside:avoid}
.gallery-tile img{width:100%;height:auto;display:block}
.menu-banner{margin:0 auto;max-width:980px}
.menu-banner img{width:100%;height:auto;border-radius:16px;display:block}

@media (max-width:900px){
  .gallery-grid{columns:2}
}
@media (max-width:560px){
  .gallery-grid{columns:1}
}

/* ---------- about ---------- */

.about{padding:clamp(52px,7vw,100px) 0 clamp(24px,3vw,44px);background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-grid h1{font-size:clamp(30px,4.5vw,44px);margin-top:14px;color:var(--deep-ocean);line-height:1.15}
.about-grid h2{font-size:clamp(24px,3vw,32px);margin-top:14px;color:var(--deep-ocean);line-height:1.2}
.about-grid p{font-size:clamp(14px,1.15vw,16px);line-height:1.7;color:var(--body);margin-top:22px}
.about-grid p + p{margin-top:16px}
.about-grid p a{color:var(--deep-ocean);font-weight:600}
.about-row{margin-top:clamp(48px,6vw,84px)}
.about-media.about-media--dish{box-shadow:none}
.about-media.about-media--dish img{height:auto;object-fit:cover}
.about-values{
  margin-top:clamp(48px,6vw,84px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px);
}
.about-values > div{background:var(--shell);border-radius:16px;padding:32px 26px}
.about-values h3{font-size:19px;color:var(--deep-ocean);margin-bottom:10px}
.about-values p{font-size:clamp(13.5px,1vw,15px);line-height:1.65;color:var(--body)}
.about-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:36px;max-width:420px;
}
.about-fact-figure{font-size:32px;line-height:1;color:var(--deep-ocean)}
.about-fact-label{font-size:13px;color:var(--muted);margin-top:8px}
.about-media{
  border-radius:16px;overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(15,70,90,0.35);
}
.about-media img{width:100%;height:460px;object-fit:cover}

/* ---------- contact ---------- */

.contact{padding:clamp(52px,7vw,100px) 0;background:var(--deep-ocean);color:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.contact-grid h1{font-size:clamp(30px,4.5vw,44px);margin-top:14px;color:#fff}
.contact-list{
  display:flex;flex-direction:column;gap:26px;margin-top:32px;
  font-size:clamp(14px,1.15vw,16px);
}
.contact-label{
  font-weight:600;color:var(--sky);font-size:13px;letter-spacing:1px;
  text-transform:uppercase;margin-bottom:6px;
  display:flex;align-items:center;gap:10px;
}
.contact-list a{color:#fff;text-decoration:none;font-size:clamp(15px,1.2vw,17px)}
.contact-list address{font-style:normal;line-height:1.6}
.hours-grid{display:grid;grid-template-columns:auto auto;gap:6px 24px;line-height:1.6;justify-content:start}
.status-pill{
  text-transform:none;font-weight:600;font-size:12.5px;letter-spacing:0;
  padding:3px 10px;border-radius:100px;
  background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9);
}
.status-pill.is-open{background:rgba(120,200,150,0.25);color:#bdf0cf}

.btn-light{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;background:#fff;color:var(--deep-ocean);font-weight:500;min-height:44px;
  padding:clamp(11px,1.2vw,15px) clamp(20px,2.2vw,30px);
  border-radius:6px;font-size:clamp(14px,1.1vw,16px);border:none;
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn-light:hover{color:var(--deep-ocean);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(0,0,0,0.35)}

.contact-block{margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.15)}
.contact-block p{font-size:clamp(13.5px,1vw,15px);line-height:1.7;color:rgba(255,255,255,0.85)}
.contact-block p + p{margin-top:10px}
.contact-block p strong{color:#fff;font-weight:600}
.contact-socials{display:flex;gap:14px}
.btn-social--light{color:#fff;border-color:rgba(255,255,255,0.4)}
.btn-social--light:hover{color:#fff}

.contact-map{border-radius:16px;overflow:hidden;height:420px}
.contact-map iframe{width:100%;height:100%;border:0;display:block}

@media (max-width:960px){
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .about-media img{height:360px}
  .about-values{grid-template-columns:1fr;gap:28px}
}

/* ---------- booking ---------- */

.booking{padding:clamp(40px,5.5vw,72px) 0 clamp(56px,8vw,110px);background:#fff}
.booking .wrap{max-width:720px}
.booking h2{font-size:22px;color:var(--deep-ocean)}
.booking-note{font-size:clamp(13px,1vw,14.5px);color:var(--muted);margin:6px 0 24px}
.booking-form{display:flex;flex-direction:column;gap:24px}
.booking-form label{
  display:block;font-size:12.5px;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:8px;
}
.booking-form input,.booking-form textarea{
  width:100%;padding:13px 16px;border-radius:7px;
  border:1px solid rgba(18,43,51,0.18);background:#fff;color:var(--ink);
  font-size:clamp(13.5px,1vw,15px);
}
.booking-form input:focus,.booking-form textarea:focus{outline:none;border-color:var(--tide-teal)}
.booking-form textarea{resize:vertical}
.booking-submit{
  background:var(--deep-ocean);color:#fff;font-weight:500;
  padding:16px 30px;border-radius:6px;font-size:clamp(14px,1.15vw,16px);
  border:none;margin-top:8px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.booking-submit:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(15,76,92,0.35)}
.booking-fallback{font-size:13.5px;color:var(--muted);margin:0}
/* Submission failure. Never a dead end: it always offers the phone. */
.form-error{
  font-size:13.5px;line-height:1.6;color:var(--alert);margin:0;
  background:rgba(163,48,28,0.06);border:1px solid rgba(163,48,28,0.25);
  border-radius:6px;padding:12px 14px;
}
.form-error a{color:var(--alert);font-weight:600}
.confirm{
  background:#f0f8f4;border:1px solid rgba(15,110,140,0.2);
  border-radius:7px;padding:22px 24px;text-align:center;
}
.confirm-tick{font-size:28px;margin-bottom:8px}
.confirm h3{font-size:19px;color:var(--deep-ocean)}
.confirm p{margin:8px 0 0;font-size:clamp(13px,1vw,14.5px);color:var(--body)}

/* ---------- events ---------- */

.events-note{padding:clamp(48px,6.5vw,90px) 0}
.events-note .wrap{max-width:720px;text-align:center}
.events-note p{margin-top:16px;font-size:clamp(14px,1.15vw,16px);line-height:1.7;color:var(--body)}
.events-note .btn{margin-top:28px}

.order-hint{margin-top:12px;font-size:14.5px;color:var(--sky);letter-spacing:0.02em}
.order-hint strong{color:#fff;font-weight:600}

/* ---------- touch targets ----------
   WCAG asks for 44x44. Buttons carry min-height above; these are the text
   links that were 16-18px tall. Phone numbers get it at every width -- a
   number you cannot hit is the one thing on a cafe site that must not fail.
   The rest apply below the nav breakpoint, so the desktop footer keeps its
   tight rhythm. */
a[href^="tel:"],a[href^="mailto:"]{
  display:inline-flex;align-items:center;min-height:44px;
}
/* Form controls measured 41px. Inputs are targets too. */
.booking-form input,.booking-form select,.booking-form textarea{
  min-height:44px;
}
.logo{min-height:44px}
@media (max-width:700px){
  .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}
}
@media (max-width:1040px){
  .footer-col a,.mobile-nav a,.link-arrow{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .footer-col{gap:0}
}
@media (max-width:700px){
  .footer-cols{gap:20px 20px}
  .footer-col a{min-height:38px}
  .footer-col strong{margin-bottom:0}
}
.footer-nap a{display:block;min-height:0;line-height:1.8;padding:5px 0}
.footer-nap .footer-hours{line-height:1.8;padding-top:3px}

.visit-col a{display:block;color:inherit;text-decoration:none;border-bottom:1px solid transparent;width:fit-content}
.visit-col a:hover{border-bottom-color:currentColor}
address a{color:inherit;text-decoration:none}
address a:hover{text-decoration:underline}

/* ---------- sticky mobile actions ----------
   Most traffic to a cafe is a phone. Call and Book should never be more
   than a thumb away. */
.mobile-cta{display:none}
@media (max-width:1040px){
  .mobile-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:flex;gap:10px;padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    /* Solid rather than a blur: backdrop-filter over scrolling content
       forces continuous compositing and cost several points of Speed
       Index on mobile. The bar reads the same. */
    background:var(--cream);
    border-top:1px solid rgba(18,43,51,0.12);
    box-shadow:0 -6px 20px -12px rgba(15,76,92,0.4);
  }
  .mobile-cta a{
    flex:1;display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;border-radius:8px;text-decoration:none;
    font-size:15px;font-weight:600;gap:8px;
  }
  .mcta-call{background:#fff;color:var(--deep-ocean);border:1.5px solid rgba(15,76,92,0.35)}
  .mcta-book{background:var(--deep-ocean);color:#fff}
  /* clear the bar so it never covers the end of the page */
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  
  
}

/* A paragraph holding one call-to-action below a block. Replaces three
   inline margin-tops of 28, 22 and 32px, unified to one value. */
.block-cta{margin-top:28px}

/* Marketing opt-in. Unticked by default -- consent is opted into, never
   pre-assumed; that is the law as well as the decent default. */

/* ---------- accessibility ---------- */

/* Available to screen readers, invisible to everyone else. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* First thing in the tab order, so a keyboard user is not made to walk the
   whole nav on every page. Invisible until focused. */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--deep-ocean);color:#fff;text-decoration:none;
  padding:12px 18px;border-radius:0 0 6px 6px;font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;
  transition:top .15s ease;
}
.skip-link:focus{top:0}

/* WCAG 2.2.2: moving content that runs longer than five seconds needs a way
   to stop it. Hovering (or focusing into) the strip holds it still; readers
   who ask the system for less motion get no animation at all, below. */
.marquee{position:relative}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}

/* Honour the system setting. Nothing here is load-bearing motion. */
@media (prefers-reduced-motion:reduce){
  .hero-zoom,.page-hero-media img,.marquee-track{animation:none}
  .btn,.btn-light,.btn-social,.hover-lift,.teaser{transition:none}
  .btn:hover,.hover-lift:hover{transform:none}
  .hero-slide{transition:none}
  .event-banner-media img,.page-hero--banner .page-hero-media img{transition:none}
  html{scroll-behavior:auto}
}

/* One rhythm: every title sits the same distance under its eyebrow. */
.eyebrow + h1,.eyebrow + h2,.eyebrow + h3,
.hero-eyebrow + .hero-title{margin-top:10px}

.snow-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}

/* Christmas page */
.xmas-head{text-align:center}
.xmas-tree{display:block;width:clamp(110px,12vw,150px);margin:0 auto 24px}
.xmas-head .menu-meal-title{margin-bottom:0}
.xmas-sub{margin-top:8px;color:var(--muted);font-size:clamp(13.5px,1.05vw,15px)}
.xmas-head .dineout-prices{margin-top:24px}
.xmas-flake{color:#a3863f;font-size:13px;margin-right:9px;vertical-align:2px}
.img-pos-low{object-position:50% 32%}