/* ============================================================
   White Whale — v2  "playful sophistication" (Bouquet-inspired)
   Light, warm, color-blocked.
   ============================================================ */
:root{
  --cream:#f4eee2;
  --cream-2:#efe7d8;
  --ink:#241b12;
  --ink-soft:#5a4d3e;
  --marigold:#e7a93a;
  --terracotta:#c8623d;
  --olive:#717a4c;
  --oxblood:#7d2f2a;
  --plum:#5b3a52;
  --teal:#3c6b61;
  --blush:#ecc3ad;
  --gold:#caa15c;
  --pad:clamp(20px,4vw,72px);
  --maxw:1480px;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--cream);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;font-size:clamp(15px,1.04vw,17px);line-height:1.6;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--terracotta)}

/* type */
.dsp{font-family:"Gloock",serif;font-weight:400;line-height:.96;letter-spacing:-.01em;font-size:clamp(2.5rem,9vw,7.5rem)}
.dsp.light{color:var(--cream)}
.hdr{font-family:"Gloock",serif;font-weight:400;line-height:1.04;letter-spacing:-.01em;font-size:clamp(2rem,4.6vw,3.8rem)}
.hdr.center{text-align:center}
.script{font-family:"Yellowtail",cursive;font-weight:400;line-height:1}
.script.accent{color:var(--terracotta);font-size:clamp(1.4rem,2.6vw,2rem)}
.script.gold{color:var(--gold);font-size:clamp(1.4rem,2.6vw,2rem)}
.center-b{display:block;text-align:center}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-soft);max-width:40ch}
p{color:var(--ink-soft);max-width:46ch}
h4{font-family:"DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--terracotta);margin-bottom:1.1rem}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;padding:.85em 1.5em;font-weight:500;letter-spacing:.02em;font-size:.92rem;border:1.5px solid var(--ink);transition:transform .25s ease,background .25s ease,color .25s ease}
.pill--ink{background:var(--ink);color:var(--cream)}
.pill--ink:hover{transform:translateY(-2px);background:var(--terracotta);border-color:var(--terracotta)}
.pill.big{padding:1.05em 2em;font-size:1rem;margin-top:2rem}
.textlink{font-weight:500;border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:color .25s}
.textlink:hover{color:var(--terracotta)}

/* nav */
.nav{position:fixed;top:0;left:0;width:100%;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,1.6vw,22px) var(--pad);background:linear-gradient(180deg,var(--cream),rgba(244,238,226,0));mix-blend-mode:normal}
.brand{font-family:"Gloock",serif;font-size:1.35rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.5rem}
.brand__mark{width:auto;height:1.45em;display:block;object-fit:contain}
.nav__right{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.nav__link{font-weight:500;font-size:.9rem;color:var(--ink-soft);transition:color .2s}
.nav__link:hover{color:var(--ink)}
.nav .pill{padding:.6em 1.2em;font-size:.85rem}
@media (max-width:820px){ .nav__link{display:none} }

/* frames & blobs */
.frame{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--cream-2);box-shadow:0 24px 60px -30px rgba(36,27,18,.45)}
.frame--tall{aspect-ratio:3/4}
.frame--wide{aspect-ratio:5/4}
.frame--landscape{aspect-ratio:16/9}
.blob{position:absolute;border-radius:50%;filter:blur(8px);z-index:0}
.blob--marigold{background:var(--marigold);width:62%;aspect-ratio:1;top:-6%;right:-8%;opacity:.85}
.blob--olive{background:var(--olive);width:60%;aspect-ratio:1;bottom:-8%;left:-10%;opacity:.7}
.blob--terracotta{background:var(--terracotta);width:55%;aspect-ratio:1;top:-10%;left:-6%;opacity:.65}
.doodle{position:absolute;color:var(--ink);width:120px;height:60px}
.doodle--whale{bottom:-26px;left:-10px;transform:rotate(-4deg)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(120px,16vh,200px) var(--pad) clamp(40px,7vw,90px)}
.hero__text{display:flex;flex-direction:column;gap:1.4rem}
.hero__text .script{margin-bottom:-.4rem}
.hero__cta{display:flex;align-items:center;gap:1.6rem;margin-top:.8rem;flex-wrap:wrap}
.hero__art{position:relative;isolation:isolate}
.hero__art .frame{position:relative;z-index:1}
@media (max-width:820px){ .hero{grid-template-columns:1fr;padding-top:120px} .hero__art{max-width:420px} }

/* ticker */
.ticker{background:var(--ink);color:var(--cream);overflow:hidden;padding:.9rem 0}
.ticker__row{display:inline-flex;align-items:center;gap:1.6rem;white-space:nowrap;animation:tick 30s linear infinite}
.ticker__row span{font-family:"Gloock",serif;font-size:clamp(1.1rem,2.4vw,1.8rem)}
.ticker__row b{color:var(--marigold);font-size:1rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* story */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,90px);align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vh,150px) var(--pad)}
.story__media{position:relative;isolation:isolate}
.story__media .frame{position:relative;z-index:1}
.story__text{display:flex;flex-direction:column;gap:1.3rem}
@media (max-width:820px){ .story{grid-template-columns:1fr} .story__media{order:2;max-width:440px} }

/* drinks grid */
.drinks{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,9vh,120px) var(--pad)}
.drinks__head{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,28px)}
.dcard{position:relative;padding:14px 14px 18px;border-radius:calc(var(--r) + 8px);background:var(--cream-2)}
.dcard:nth-child(7n+1){background:#f1d9a8}
.dcard:nth-child(7n+2){background:#e8c4b0}
.dcard:nth-child(7n+3){background:#d9e0c2}
.dcard:nth-child(7n+4){background:#e7cdbf}
.dcard:nth-child(7n+5){background:#f0d2a0}
.dcard:nth-child(7n+6){background:#cfdcd2}
.dcard:nth-child(7n+7){background:#ead3c0}
.dcard .frame{aspect-ratio:1;box-shadow:none}
.dcard__cap{display:flex;align-items:baseline;justify-content:space-between;padding:.9rem .3rem 0;gap:.6rem}
.dcard__no{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--ink-soft);opacity:.6}
.dcard__name{font-size:clamp(1.3rem,1.8vw,1.7rem);color:var(--ink)}
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:430px){ .dcard{padding:10px 10px 14px} .dcard__name{font-size:1.25rem} }

/* captain's quarters — the dark moment */
.cq{background:var(--ink);color:var(--cream);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(70px,11vh,150px) var(--pad)}
.cq__text{max-width:560px;margin-left:auto;display:flex;flex-direction:column;gap:1.2rem;padding-left:var(--pad)}
.cq__text p{color:rgba(244,238,226,.72)}
.cq__text .dim{color:rgba(244,238,226,.45)}
.cq__media{padding-right:var(--pad)}
.cq__media .frame{box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
@media (max-width:820px){ .cq{grid-template-columns:1fr} .cq__text{padding:0} .cq__media{padding:0;max-width:440px} }

/* pedigree */
.pedigree{max-width:900px;margin:0 auto;padding:clamp(70px,11vh,150px) var(--pad);text-align:center}
.pedigree .hdr{margin:.5rem 0 clamp(32px,5vw,60px)}
.creds{list-style:none;text-align:left}
.creds li{display:grid;grid-template-columns:150px 1fr;gap:1.4rem;padding:1.4rem 0;border-top:1px solid rgba(36,27,18,.14)}
.creds li:last-child{border-bottom:1px solid rgba(36,27,18,.14)}
.creds__k{font-family:"Yellowtail",cursive;font-size:1.4rem;color:var(--terracotta)}
.creds__v{font-family:"Gloock",serif;font-size:1.2rem;line-height:1.35}
@media (max-width:600px){ .creds li{grid-template-columns:1fr;gap:.3rem} }

/* partners photo */
.partners{max-width:900px;margin:0 auto;padding:0 var(--pad) clamp(60px,9vh,110px)}
.partners__head{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;margin-bottom:clamp(28px,4vw,48px)}
.partners__cap{margin-top:1.2rem;text-align:center;color:var(--ink-soft);font-size:.92rem;letter-spacing:.02em}

/* weekly */
.weekly{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vh,90px) var(--pad) clamp(70px,10vh,130px)}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.wcard{border-radius:calc(var(--r) + 8px);padding:clamp(28px,3vw,44px);min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem}
.wcard--a{background:var(--marigold);color:var(--ink)}
.wcard--b{background:var(--olive);color:var(--cream)}
.wcard--c{background:var(--blush);color:var(--ink)}
.wcard h3{font-size:clamp(2rem,3vw,2.8rem);font-weight:400}
.wcard p{color:inherit;opacity:.8}
.wtime{font-weight:700;letter-spacing:.04em;margin-top:.4rem;font-size:1.1rem}
@media (max-width:760px){ .wgrid{grid-template-columns:1fr} }

/* reserve */
.reserve{max-width:900px;margin:0 auto;padding:clamp(50px,8vh,110px) var(--pad) clamp(20px,3vw,40px)}
.reserve__head{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;margin-bottom:clamp(24px,3vw,40px)}
.reserve__sub{color:var(--ink-soft)}
.reserve__card{background:var(--cream-2);border-radius:calc(var(--r) + 8px);padding:clamp(18px,3vw,40px);box-shadow:0 24px 60px -34px rgba(36,27,18,.4);text-align:center}
#toast-booking-widget{min-height:90px}

/* reserve private events note */
.reserve__private{text-align:center;margin-top:1.6rem;color:var(--ink-soft)}

/* faq / about */
.faq{max-width:860px;margin:0 auto;padding:clamp(60px,9vh,120px) var(--pad)}
.faq .hdr{margin:.5rem 0 clamp(32px,5vw,60px)}
.faq__list{list-style:none}
.faq__item{padding:1.5rem 0;border-top:1px solid rgba(36,27,18,.14)}
.faq__item:last-child{border-bottom:1px solid rgba(36,27,18,.14)}
.faq__item dt{font-family:"Gloock",serif;font-size:1.2rem;margin-bottom:.6rem}
.faq__item dd{color:var(--ink-soft);max-width:60ch}
.faq__item dd a{border-bottom:1px solid currentColor}

/* visit */
.visit{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,9vh,120px) var(--pad) clamp(28px,4vw,48px);display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,6vw,90px);align-items:center}
.visit__media{position:relative;isolation:isolate}
.visit__media .frame{position:relative;z-index:1}
.visit__info{display:flex;flex-direction:column;gap:1rem}
.visit__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:1.4rem}
.hours dt{font-family:"Gloock",serif;font-size:1.05rem;margin-top:.7rem}
.hours dd{color:var(--ink-soft);font-size:.92rem}
.addr{font-family:"Gloock",serif;font-size:1.2rem;line-height:1.3;display:block;margin-bottom:1rem}
.vline{display:block;color:var(--ink-soft);padding:.3rem 0;transition:color .2s}
.vline:hover{color:var(--terracotta)}
.visit__map{grid-column:1/-1;margin-top:clamp(28px,4vw,52px);border-radius:calc(var(--r) + 8px);overflow:hidden;aspect-ratio:16/6;background:var(--cream-2);box-shadow:0 24px 60px -34px rgba(36,27,18,.4)}
.visit__map iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.92) contrast(.98)}
@media (max-width:820px){ .visit__map{aspect-ratio:4/3} }
.visit__base{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(36,27,18,.14);padding-top:clamp(20px,3vw,32px);margin-top:clamp(20px,3vw,40px);flex-wrap:wrap;gap:1rem}
.visit__base .brand{font-size:1.6rem}
.fine{font-size:.8rem;color:var(--ink-soft);letter-spacing:.02em}
@media (max-width:820px){ .visit{grid-template-columns:1fr} .visit__media{max-width:480px} }

/* keep section headings clear of the fixed nav when jumped to */
#drinks,#quarters,#visit,#reserve,#top{scroll-margin-top:84px}

/* ============================================================
   mobile polish
   ============================================================ */
@media (max-width:820px){
  /* center every stacked media block so nothing hugs an edge */
  .hero__art,.story__media,.cq__media,.visit__media{margin-left:auto;margin-right:auto}
  .hero{text-align:left;gap:2.4rem}
  .hero__art{order:-1}                 /* show the drink photo first on phones */
  .story__text,.cq__text{align-items:flex-start}
}

@media (max-width:600px){
  /* stack the hours / find-us columns instead of cramming two */
  .visit__cols{grid-template-columns:1fr;gap:1.8rem}
  /* a touch more air between major sections on small screens */
  .lead{font-size:1.08rem}
  .hero__cta{gap:1.1rem}
  .pill.big{width:100%}                /* full-width primary tap target */
}

@media (max-width:430px){
  /* on the smallest phones, let the whale mark carry the nav and free up room */
  .brand span{display:none}
  .brand__mark{height:1.9em}
  .visit__base .brand span{display:inline}  /* keep the name in the footer */
  .nav{padding-left:18px;padding-right:18px}
  .doodle--whale{width:90px}
}

/* reveal (only when GSAP live) */
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }