/* Slack Water v2 — site.css. Sections start with "/* ── name". See CODEMAP.md. */

/* ── tokens */
:root{
  --ink:#12282B; --ink-2:#0c1d1f; --ink-3:#183539; --teal:#2E6463; --silt:#A2957F; --silt-l:#b8ad9b;
  --haze:#E4E7E2; --paint:#EEF0EB; --buoy:#E2572B; --buoy-t:#F2825A; --gold:#E9B872;
  --line:rgba(228,231,226,.14); --line-2:rgba(228,231,226,.3); --mute:rgba(228,231,226,.72);
  --fd:'Sofia Sans Extra Condensed',ui-sans-serif,sans-serif;
  --fb:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --fm:'Spline Sans Mono',ui-monospace,monospace;
  --fh:'Reenie Beanie',cursive;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:dark;
}

/* ── base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 var(--fb);color:var(--haze);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .93 0 0 0 0 .9 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025 .045' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .8 0 0 0 0 .78 0 0 0 .1 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E") 0 0/900px 420px,radial-gradient(1200px 700px at 85% 30%,rgba(46,100,99,.32),transparent 70%),radial-gradient(900px 600px at 10% 75%,rgba(46,100,99,.22),transparent 70%),var(--ink);background-attachment:scroll;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:300}
button{font:inherit;color:inherit}
.mono{font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.kick{font:500 11px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.chalk{font-family:var(--fh);font-size:38px;line-height:1;color:var(--haze)}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)}
section{position:relative;padding-block:clamp(100px,12vw,180px)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--haze);color:var(--ink);padding:8px 12px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--buoy);outline-offset:3px}

/* ── buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:14px 24px;border:1px solid var(--line-2);border-radius:999px;font:600 14px/1 var(--fb);letter-spacing:.01em;text-decoration:none;background:rgba(18,40,43,.35);transition:background .25s,border-color .25s,transform .25s var(--ease),color .25s}
.btn:hover{border-color:var(--haze);transform:translateY(-2px)}
.btn--solid{background:var(--haze);color:var(--ink);border-color:var(--haze)}
.btn--solid:hover{background:#fff}

/* ── headings: text surfaces from behind a level line */
.sf{position:relative;display:block;font:300 clamp(48px,6vw,96px)/.92 var(--fd);letter-spacing:-.005em;margin-bottom:.45em;color:var(--haze)}
.sf .sf__clip{display:block;clip-path:inset(-.3em -.3em 0 -.3em);padding-bottom:.06em}
.sf .sf__in{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease) .1s}
.sf.in .sf__in{transform:none}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.rv.in{opacity:1;transform:none}

/* ── nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:28px;padding:18px var(--pad);color:#071315;transition:color .4s}
.nav::before{content:"";position:absolute;inset:0 0 -30px;background:linear-gradient(var(--ink) 35%,rgba(18,40,43,0));opacity:0;transition:opacity .4s;pointer-events:none}
.nav--dark{color:var(--haze)}
.nav--dark::before{opacity:.95}
.nav>*{position:relative}
.mark{display:inline-grid;justify-items:center;text-decoration:none;font:600 17px/1 var(--fd);letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
.mark__line{width:calc(100% + 26px);height:1px;background:currentColor;margin:4px 0 3px;opacity:.7}
.mark__b{opacity:.55;transform:scaleY(-1)}
.nav__links{display:flex;gap:26px;margin-left:24px}
.nav__links a{font:500 14px var(--fb);text-decoration:none;opacity:.85;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:none}
.nav__live{margin:0 0 0 auto;display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--silt);flex:none}
.dot.is-open{background:var(--buoy);box-shadow:0 0 0 4px rgba(226,87,43,.2)}
.nav__call{font:600 14px var(--fb);text-decoration:none;display:flex;gap:8px;align-items:baseline;padding:10px 16px;border:1px solid currentColor;border-radius:999px}
.nav__call .mono{font-size:11px}

/* ── hero: video estuary, headline on the horizon and its reflection */
.hero{height:100svh;min-height:600px;padding:0;overflow:hidden;--wl:58.5%;--gap:2.2vh;color:var(--ink)}
.hero{will-change:transform}
/* sharp 2400px still for sky, trees and island; the (soft, 720p) video only fills the water below the horizon */
.hero__img{position:absolute;inset:0;background:url(../img/estuary-dawn.webp) 50% 50%/cover;transform:scale(1.06);transform-origin:50% var(--wl);transition:transform 2.6s var(--ease);
  -webkit-mask-image:linear-gradient(#000 64%,transparent 99%);mask-image:linear-gradient(#000 64%,transparent 99%)}
.is-ready .hero__img{transform:none}
.hero__img video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;
  -webkit-mask-image:linear-gradient(transparent calc(var(--wl) + 2px),#000 calc(var(--wl) + 9%));mask-image:linear-gradient(transparent calc(var(--wl) + 2px),#000 calc(var(--wl) + 9%))}
.hero__img video.playing{opacity:1}
.hero__sky{position:absolute;left:0;right:0;top:0;height:var(--wl);display:flex;align-items:flex-end;justify-content:center;padding:0 var(--pad) var(--gap)}
.hero__h,.hero__refl{font:300 clamp(58px,8.4vw,170px)/.86 var(--fd);letter-spacing:-.01em;text-align:center;margin:0}
.hero__h .l,.hero__refl .l{display:block}
.hero__h em,.hero__refl em{font-style:italic;font-weight:400}
.hero__h .l{opacity:0;transform:translateY(.25em);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.hero__h .l+.l{transition-delay:.18s}
.is-ready .hero__h .l{opacity:1;transform:none}
.hero__water{position:absolute;left:0;right:0;top:var(--wl);bottom:0;pointer-events:none}
.hero__refl{position:absolute;left:var(--pad);right:var(--pad);top:var(--gap);color:var(--haze);opacity:0;transform:scaleY(-1);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 92%);mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 92%);transition:opacity 2s ease .6s}
.is-ready .hero__refl{opacity:.26;animation:ripple 9s ease-in-out 2.4s infinite}
@keyframes ripple{0%,100%{transform:scaleY(-1)}50%{transform:scaleY(-1.035) skewX(-1.2deg)}}
.post{position:fixed;z-index:40;right:32px;top:50%;width:34px;height:58vh;margin-top:-29vh;transform-origin:50% 100%;will-change:transform;background:var(--paint);overflow:hidden;border-radius:3px 3px 0 0;box-shadow:inset -5px 0 10px rgba(18,40,43,.16),0 10px 30px rgba(0,0,0,.18);opacity:0;transition:opacity 1.6s ease 1s}
.post.gone{opacity:0!important;transition:opacity .6s ease}
.is-ready .post{opacity:1}
.post::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--ink-3);z-index:2}
.post__scale{position:absolute;left:0;right:0;bottom:0;height:100%;will-change:transform}
.post__scale::before{content:"";position:absolute;left:0;top:0;bottom:0;width:42%;background:repeating-linear-gradient(to top,var(--ink) 0 1.6667%,transparent 1.6667% 3.3333%)}
.post__scale span{position:absolute;right:4px;bottom:calc(var(--m)/3*100%);transform:translateY(50%);font:700 11px/1 var(--fd);color:var(--ink)}
/* water inside the gauge: a soft teal column with a moving meniscus */
.post__water{position:absolute;inset:0;z-index:3;transform:translateY(100%);will-change:transform;background:linear-gradient(rgba(84,158,152,.78),rgba(30,80,80,.92) 60%)}
.post__water::before{content:"";position:absolute;left:0;top:-5px;width:200%;height:6px;background:var(--wave-s) repeat-x 0 0/34px 6px;animation:wave 2.4s linear infinite}
.post__water::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(220,240,236,.75)}
@keyframes wave{to{transform:translateX(-50%)}}
.post__scale span:nth-child(odd){color:var(--buoy)}
.hero__postrefl{position:absolute;top:0;height:18vh;width:30px;left:88vw;margin-left:-15px;opacity:.24;background:linear-gradient(90deg,var(--ink) 0 42%,transparent 42%),var(--paint);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.hero__foot{position:absolute;left:0;right:0;bottom:max(5.5vh,30px);display:grid;justify-items:center;gap:18px;padding:0 var(--pad);color:var(--haze);text-align:center;opacity:0;transform:translateY(12px);transition:opacity 1.2s ease .9s,transform 1.2s var(--ease) .9s;z-index:2}
.is-ready .hero__foot{opacity:1;transform:none}
.hero__meta{margin:0;font-size:11.5px;color:var(--haze);text-shadow:0 1px 8px rgba(6,14,15,.6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── serve: pull back from the cup */
.serve{padding:0;height:240vh}
.serve__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.serve__img{position:absolute;inset:0;will-change:transform;transform-origin:27% 62%}
.serve__img img{width:100%;height:100%;object-fit:cover;object-position:27% 50%}
.serve__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,29,31,0) 30%,rgba(12,29,31,.82) 70%)}
/* unscaled fades so the pinned photo meets the page ground with no seam, top and bottom */
.serve__pin{-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 72%,transparent)}
.serve__copy{z-index:2}
.serve__copy{position:absolute;right:var(--pad);top:50%;width:min(500px,40vw);transform:translateY(-50%)}
.serve__h{font:300 clamp(44px,4.6vw,76px)/.95 var(--fd);margin-bottom:32px}
.serve__h,.serve__list li,.serve__copy .btn{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.serve.s1 .serve__h{opacity:1;transform:none}
.serve.s2 .serve__list li{opacity:1;transform:none}
.serve.s2 .serve__list li:nth-child(2){transition-delay:.12s}
.serve.s2 .serve__list li:nth-child(3){transition-delay:.24s}
.serve.s2 .serve__copy .btn{opacity:1;transform:none;transition-delay:.36s}
.serve__list{list-style:none;margin:0 0 34px;padding:0}
.serve__list li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line-2)}
.serve__list b{font:400 28px/1 var(--fd);letter-spacing:.01em}
.serve__list span{color:var(--mute);font-size:16px;line-height:1.5}

/* ── menu: typeset card */
.menu__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.menu__head .sf{margin-bottom:0}
.menu__switch{display:inline-flex;padding:4px;border:1px solid var(--line-2);border-radius:999px}
.menu__switch button{background:none;border:0;padding:11px 22px;border-radius:999px;font:600 15px var(--fb);cursor:pointer;color:var(--mute);transition:background .3s,color .3s}
.menu__switch button[aria-selected=true]{background:var(--haze);color:var(--ink)}
.menu__diet{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.menu__diet .mono{color:var(--silt-l);margin-right:6px}
.menu__diet button{border:1px solid var(--line-2);background:none;border-radius:999px;padding:7px 14px;font:500 13px var(--fb);cursor:pointer;transition:background .2s,color .2s}
.menu__diet button[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.menu__card{display:grid;grid-template-columns:.8fr 2fr;gap:clamp(30px,5vw,80px);align-items:start;animation:cardIn .5s var(--ease)}
.menu__card[hidden]{display:none}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.menu__ph{margin:0;position:sticky;top:110px}
.menu__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.menu__cols{columns:2;column-gap:clamp(30px,4vw,64px)}
.grp{break-inside:avoid;margin-bottom:54px}
.grp h3{font:400 40px/1 var(--fd);display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.grp h3 small{font:400 26px/1 var(--fh);color:var(--gold)}
.grp__note{font-size:14px;color:var(--mute);margin-bottom:14px}
.grp__bell{display:block;margin-top:6px;color:var(--gold)}
.items{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:baseline;padding:11px 0;transition:opacity .3s}
.item b{font:600 16px/1.3 var(--fb)}
.item i{border-bottom:1px dotted rgba(228,231,226,.35);transform:translateY(-4px)}
.item .pr{font:500 15px var(--fm);letter-spacing:.02em}
.item p{grid-column:1/-1;margin:0;font-size:14.5px;line-height:1.45;color:var(--mute)}
.item .tags{font:500 11px var(--fm);letter-spacing:.06em;color:var(--gold);margin-left:6px}
.item.is-dim{opacity:.25}
.menu__notes{max-width:72ch;margin-top:20px;font-size:14px;color:var(--mute)}
.menu__notes .mono{display:block;margin:10px 0 4px;color:var(--silt-l)}

/* ── menu preview (rises into the coffee section's fade) */
.menu{padding-top:0;margin-top:-24vh;z-index:2}
.mfeat,.mcard{will-change:transform}
.mfeat{position:relative;border-radius:18px;overflow:hidden;min-height:clamp(420px,42vw,560px);display:flex;align-items:center}
.mfeat__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.mfeat::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,29,31,.94) 0,rgba(12,29,31,.82) 34%,rgba(12,29,31,0) 64%)}
.mfeat__copy{position:relative;z-index:2;max-width:480px;padding:clamp(28px,5vw,64px)}
.mfeat__copy .sf{font-size:clamp(44px,5vw,76px)}
.mfeat__copy>p:not(.kick){color:var(--mute);font-size:18px;margin-bottom:28px}
.mcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.mcard{border-radius:16px;padding:22px 22px 18px;background:rgba(228,231,226,.045);border:1px solid var(--line);display:flex;flex-direction:column}
.mcard--dark{background:var(--teal);border-color:transparent}
.mcard header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.mcard h3{font:400 30px/1 var(--fd)}
.mcard header img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.mcard ul{list-style:none;margin:0 0 16px;padding:0}
.mcard li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.mcard li b{font:500 14px var(--fm)}
.mcard button{margin-top:auto;align-self:flex-start;background:none;border:0;padding:6px 0;font:600 14px var(--fb);color:var(--gold);cursor:pointer}
.mcard button:hover{text-decoration:underline}
/* full menu sheet */
.fullmenu{border:0;padding:0;margin:auto;width:min(1100px,calc(100vw - 40px));max-height:calc(100dvh - 60px);background:var(--ink-2);color:var(--haze);border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.55);display:none;flex-direction:column;overflow:hidden}
.fullmenu[open]{display:flex;animation:sheetIn .4s var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fullmenu::backdrop{background:rgba(6,14,15,.72)}
.fm__bar{display:flex;align-items:center;gap:20px;padding:20px 28px;border-bottom:1px solid var(--line)}
.fm__bar h2{font:300 40px/1 var(--fd);margin-right:auto}
.fm__close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:none;font-size:24px;line-height:1;cursor:pointer}
.fm__body{overflow-y:auto;padding:24px 28px 36px;overscroll-behavior:contain}
.fm__body .menu__diet{margin:0 0 30px;padding:0;border:0}
.menu__cols[hidden]{display:none}

/* ── strip: three photos */
.strip{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:14px;padding:0 var(--pad);max-width:1600px;margin:0 auto;align-items:end}
.strip figure{margin:0;position:relative;overflow:hidden;border-radius:6px}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.strip figure:hover img{transform:scale(1.04)}
.strip__a{aspect-ratio:4/5}
.strip__b{aspect-ratio:4/4.4}
.strip__c{aspect-ratio:4/5.2}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 20px 18px;background:linear-gradient(rgba(12,29,31,0),rgba(12,29,31,.85));font-size:14px;color:var(--mute)}
.strip figcaption b{display:block;font:400 26px/1.05 var(--fd);color:var(--haze)}

/* ── paddle: full-bleed */
.paddle{min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;margin-top:clamp(100px,12vw,180px)}
.paddle__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.paddle::after{content:"";position:absolute;inset:0;background:linear-gradient(#12282B,rgba(18,40,43,0) 22%,rgba(18,40,43,0) 45%,rgba(12,29,31,.9) 88%,#12282B)}
.paddle__in{position:relative;z-index:2;width:100%}
.paddle__in>p:not(.kick){max-width:520px;color:var(--mute);font-size:18px}
.paddle__facts{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--haze)!important;font-size:11px!important;margin:24px 0 30px}
.paddle__facts span::before{content:"";display:inline-block;width:12px;height:1px;background:var(--gold);vertical-align:middle;margin-right:8px}

/* ── esky */
.esky__in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:center}
.esky__ph{margin:0}
.esky__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.esky__copy>p:not(.kick){color:var(--mute);font-size:18px;max-width:520px}
.esky__list{margin:26px 0 30px}
.esky__small{font-size:14px!important;margin-top:18px}

/* ── collapsibles (hours, esky list, community) */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.hours>summary,.esky__list>summary,.story__det>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--line-2);font-weight:500}
.hours>summary::after,.esky__list>summary::after,.story__det>summary::after{content:"+";font:300 26px/1 var(--fb);color:var(--gold);transition:transform .3s var(--ease)}
details[open]>summary::after{transform:rotate(45deg)}
.hours__more{margin-left:auto;font:500 11px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--silt-l)}
.hours>summary b{color:var(--gold);font-weight:600;margin-right:10px}
.esky__list .items{margin:0 0 26px!important}
.story__det .story__more{margin-top:0}

/* ── reviews */
.revs__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:50px}
.revs__head .sf{margin-bottom:0}
.revs__score{display:flex;align-items:center;gap:16px;margin:0}
.revs__score>b{font:200 clamp(72px,7vw,110px)/.8 var(--fd)}
.revs__score>span{display:grid;gap:6px}
.stars{color:var(--gold);letter-spacing:.15em;font-size:15px}
.revs__score .mono{color:var(--silt-l)}
.revs__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px)}
.rev{margin:0;padding-top:22px;border-top:1px solid var(--line-2)}
.rev p{font:300 clamp(24px,2.2vw,32px)/1.12 var(--fd);margin-bottom:18px}
.rev p::before{content:"“";color:var(--gold)}
.rev p::after{content:"”";color:var(--gold)}
.rev footer{font:500 11px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--silt-l)}

/* ── story */
.story__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:center}
.story__ph{margin:0}
.story__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.story__copy>p:not(.kick):not(.chalk){color:var(--mute);font-size:18px;max-width:560px}
.story__bell{color:var(--gold)}
.story__det{margin-top:34px}
.story__more{list-style:none;margin:0;padding:0;display:grid;gap:0}
.story__more li{padding:14px 0;border-top:1px solid var(--line);font-size:15px;color:var(--mute);display:grid;grid-template-columns:170px 1fr;gap:16px}
.story__more b{font:400 22px/1.1 var(--fd);color:var(--haze)}

/* ── flood: water rises over the screen; Visit is underwater */
:root{--sea:#1d4a4c;--wave-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='6'%3E%3Cpath d='M0 3 Q8.5 0 17 3 T34 3 V6 H0Z' fill='%2354a098' fill-opacity='.85'/%3E%3C/svg%3E");--wave-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='48'%3E%3Cpath d='M0 30 C120 10 240 10 360 26 S600 44 720 30 V48 H0Z' fill='%233c7a76'/%3E%3Cpath d='M0 30 C120 10 240 10 360 26 S600 44 720 30' fill='none' stroke='%23e3f2ee' stroke-opacity='.7' stroke-width='1.2'/%3E%3C/svg%3E")}
.flood{height:190vh;padding:0}
.flood__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.flood__line{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:0 var(--pad);text-align:center;font:300 clamp(48px,7vw,120px)/.95 var(--fd);color:var(--haze);z-index:2}
/* SEA: one fixed underwater layer behind the page. It rises over the screen across the flood run, then stays behind
   Visit and the footer while the view pushes in (zoom) and the light fades with depth. JS: translate on .sea,
   scale on .sea__zoom, opacity on .sea__light. Layers move with transform/opacity only; animations run only while .live. */
.sea{position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateY(102%);will-change:transform;visibility:hidden}
.sea.on{visibility:visible}
.sea__zoom{position:absolute;inset:0;transform-origin:50% 40%;will-change:transform}
.sea__body{position:absolute;inset:0;background:linear-gradient(#3c7a76 0,#2f6766 14%,#245a5b 40%,var(--sea) 75%,#173d40)}
/* surface: front crest (80px/s left) and a darker back swell (50px/s left) */
.sea__zoom::before{content:"";position:absolute;left:0;top:-46px;width:calc(100% + 720px);height:48px;z-index:3;background:var(--wave-l) repeat-x 0 0/720px 48px;animation:wave-l 9s linear infinite paused}
.sea__back{position:absolute;left:0;top:-62px;width:calc(100% + 1100px);height:70px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='70'%3E%3Cpath d='M0 40 C180 12 360 14 550 36 S920 66 1100 40 V70 H0Z' fill='%23336d6b'/%3E%3C/svg%3E") repeat-x 0 0/1100px 70px;animation:wave-b 22s linear infinite paused}
@keyframes wave-l{to{transform:translateX(-720px)}}
@keyframes wave-b{to{transform:translateX(-1100px)}}
/* light: rays + two caustic nets drifting WITH the surface current, slower because deeper (40px/s and 30px/s);
   runs the full height and thins out towards the bottom */
.sea__light{position:absolute;inset:0;z-index:1;-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.6) 40%,rgba(0,0,0,.3));mask-image:linear-gradient(#000,rgba(0,0,0,.6) 40%,rgba(0,0,0,.3));will-change:opacity}
.sea__light::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 14%,rgba(214,240,234,.09) 19%,transparent 25%,transparent 41%,rgba(214,240,234,.06) 45%,transparent 50%,transparent 66%,rgba(214,240,234,.08) 71%,transparent 77%);-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
.sea__c{--ct:960px;position:absolute;left:0;top:0;width:calc(100% + var(--ct));height:100%;opacity:.4;will-change:transform;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='640' viewBox='0 0 960 640' preserveAspectRatio='none'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.008 .014' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .97 0 0 0 0 .93 -2.2 -2.2 0 0 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0/var(--ct) 100% repeat-x;animation:drift 24s linear infinite paused}
.sea__c+.sea__c{--ct:1280px;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='640' viewBox='0 0 960 640' preserveAspectRatio='none'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.010 .017' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .97 0 0 0 0 .93 -2.2 -2.2 0 0 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");animation-duration:42s}
@keyframes drift{to{transform:translate3d(calc(-1 * var(--ct)),0,0)}}
.sea.live .sea__zoom::before,.sea.live .sea__back,.sea.live .sea__c{animation-play-state:running}
.visit{background:none}
.visit,.foot{--silt-l:#d6ddd8;--silt:#c3cbc6}
.mcard--dark button{color:var(--haze)}

/* ── visit */
.visit__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,120px);align-items:start}
.visit__addr{font:300 clamp(30px,3vw,42px)/1.05 var(--fd);color:var(--haze);margin-bottom:22px}
.visit__where>p:not(.visit__addr){color:var(--mute);max-width:520px}
.visit__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.visit__hours{padding-top:12px}
.visit__hours .kick{color:var(--haze)}
.week{margin:0}
.week>div{display:grid;grid-template-columns:1fr auto;gap:12px;padding:13px 0;border-top:1px solid var(--line);position:relative}
.week dt{font-weight:500}
.week dd{margin:0;text-align:right;font:500 14px var(--fm);display:grid}
.week dd small{font:400 12px var(--fb);color:var(--silt-l)}
.week .off dd{color:var(--silt)}
.week .is-today{color:var(--gold)}
.week .is-today dt::after{content:" · today";font:500 11px var(--fm);letter-spacing:.08em;text-transform:uppercase}
.visit__small{margin-top:18px;font-size:14px;color:var(--silt-l)}

/* ── footer */
.foot{position:relative;padding:clamp(160px,16vw,240px) 0 40px;background:linear-gradient(rgba(8,20,22,0),rgba(8,20,22,.75) 45%,#081416 85%)}
.foot>*{position:relative}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot__grid .mono{color:var(--silt-l);margin-bottom:12px}
.foot__grid p{font-size:15px;color:var(--mute);line-height:1.7}
.foot__grid a{text-decoration:none}
.foot__grid a:hover{color:var(--haze);text-decoration:underline}
.mark--foot{color:var(--haze);font-size:20px;margin-bottom:18px}
.foot__brand p{font:300 24px/1.1 var(--fd);color:var(--haze)}
.foot__fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:50px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;color:var(--silt-l)}
.foot__fine p{margin:0;max-width:75ch}

/* ── dock (phones) */
.dock{display:none}

/* ── pitch dialog */
.pitch{border:0;padding:0;background:var(--ink-2);color:var(--haze);max-width:min(520px,calc(100vw - 32px));border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pitch::backdrop{background:rgba(6,14,15,.7)}
.pitch form{padding:38px 36px 34px;border-top:3px solid var(--buoy)}
.pitch__mark{color:var(--silt-l);margin-bottom:18px}
.pitch h2{font:300 52px/.92 var(--fd);margin-bottom:20px}
.pitch h2 em{color:var(--buoy-t)}
.pitch p{color:var(--mute)}
.pitch strong{color:var(--haze)}
.pitch .btn{margin-top:10px;cursor:pointer}

/* ── tablet / phone (keep after every block it overrides) */
@media (max-width:1100px){
  .nav__links{display:none}
  .menu__card{grid-template-columns:1fr}
  .menu__ph{position:static}
  .menu__ph img{aspect-ratio:16/9}
  .revs__row{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--pad:20px}
  body{font-size:16px;padding-bottom:64px}
  section{padding-block:96px}
  .nav{padding:14px 16px;gap:12px}
  .nav__call{display:none}
  .nav__live{font-size:10.5px}
  .mark{font-size:15px}
  .hero{min-height:560px}
  .hero__h,.hero__refl{font-size:12.4vw}
  .post{right:auto;left:0;width:20px;height:30vh;margin-top:-15vh}
  .post__scale span{display:none}
  .hero__postrefl{left:91vw;width:20px;margin-left:-10px}
  .hero__foot{bottom:calc(84px + env(safe-area-inset-bottom))}
  .hero__meta{font-size:11px;background:rgba(12,29,31,.55);padding:6px 10px;border-radius:4px}
  .hero__cta .btn{padding:12px 18px}
  .serve{height:auto}
  .serve__pin{position:relative;height:auto;overflow:visible}
  .serve__pin{-webkit-mask-image:none;mask-image:none}
  .menu{margin-top:0;padding-top:56px}
  .sea__c{--ct:520px}
  .sea__c+.sea__c{display:none}
  .serve__img{position:relative;height:62svh;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 70%,transparent)}
  .serve__img::after{display:none}
  .serve__copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;transform:none;padding:0 20px;margin-top:-40px}
  .mcards{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:0 20px 6px;scrollbar-width:none}
  .mcards::-webkit-scrollbar,.strip::-webkit-scrollbar,.revs__row::-webkit-scrollbar{display:none}
  .mcard{scroll-snap-align:start}
  .mfeat{min-height:520px;align-items:flex-end}
  .mfeat::before{background:linear-gradient(rgba(12,29,31,0) 25%,rgba(12,29,31,.92) 62%)}
  .fullmenu{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
  .fm__bar{padding:14px 16px;flex-wrap:wrap;gap:12px}
  .fm__bar h2{font-size:32px}
  .fm__bar .menu__switch{order:3;width:100%}
  .fm__body{padding:18px 16px 40px}
  .revs__row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:0 20px;scrollbar-width:none}
  .rev{scroll-snap-align:start}
  .serve__img::after{background:linear-gradient(rgba(12,29,31,.3),rgba(12,29,31,0) 18%,rgba(12,29,31,.55) 34%,rgba(12,29,31,.94) 50%,#12282B)}
  .serve__img img{object-position:22% 30%}
  .serve__h{font-size:40px;margin-bottom:16px}
  .serve__list{margin-bottom:22px}
  .serve__list li{padding:10px 0}
  .serve__list b{font-size:22px}
  .serve__list span{font-size:14px}
  .menu__cols{columns:1}
  .menu__switch{width:100%}
  .menu__switch button{flex:1}
  .grp h3{font-size:34px}
  .strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px;scrollbar-width:none}
  .strip figure{scroll-snap-align:center;aspect-ratio:4/5!important}
  .strip figcaption{padding:40px 12px 12px;font-size:12.5px}
  .strip figcaption b{font-size:21px}
  .paddle{min-height:88svh}
  .esky__in,.story__in,.visit__in{grid-template-columns:1fr}
  .esky__ph img,.story__ph img{aspect-ratio:4/3.2}
  .story__more li{grid-template-columns:1fr;gap:4px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
  .foot__brand{grid-column:1/-1}
  .dock{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(12,29,31,.97);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .dock a{padding:16px 0;text-align:center;font:600 14px var(--fb);text-decoration:none;border-left:1px solid var(--line)}
  .dock a:first-child{border-left:0;color:var(--buoy-t)}
  .foot{padding-bottom:100px}
}

/* ── reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sf .sf__in,.hero__h .l,.rv,.serve__h,.serve__list li,.serve__copy .btn{transform:none!important;opacity:1!important}
}