/* Nautical Grounds */

:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --muted:#6b6b6b;
  --faint:#f4f4f4;
  --line:rgba(10,10,10,.12);
  --hairline:rgba(10,10,10,.08);
  --radius:18px;
  --wrap:1320px;
  /* spacing scale: each step is used deliberately, none are ad hoc */
  --s1:clamp(10px,1.6vw,14px);
  --s2:clamp(16px,2.4vw,22px);
  --s3:clamp(24px,3.4vw,34px);
  --s4:clamp(32px,4.6vw,48px);
  --s5:clamp(44px,6vw,72px);
  --band:clamp(58px,8vw,110px);
  --pad:clamp(24px,5vw,64px);
  --header:64px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.5;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit;text-decoration:none}

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

header{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header);
  display:flex;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color 250ms ease, background 250ms ease;
  z-index:50;
}

header.scrolled{border-bottom-color:var(--hairline)}

/* Three tracks with matched outer columns, so the nav sits on the true centre
   of the bar no matter how wide the brand is or whether the order button is
   showing. */
header .wrap{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
}

header .brand{grid-column:1;justify-self:start}
header nav{grid-column:2}
header .order,
header .menuBtn{grid-column:3;justify-self:end}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.02em;
  white-space:nowrap;
}

nav{
  display:flex;
  gap:28px;
}

nav a{
  font-size:14px;
  color:var(--muted);
  letter-spacing:-0.01em;
  transition:color 150ms ease;
}

nav a:hover{color:var(--ink)}

.order{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ink);
  color:#fff;
  font-size:14px;
  font-weight:500;
  padding:9px 18px;
  border-radius:999px;
  transition:transform 120ms ease, opacity 150ms ease;
  will-change:transform;
}

.order:hover{opacity:.86}
.order:active{transform:scale(.96)}

.menuBtn{
  display:none;
  margin-left:auto;
  background:none;
  border:0;
  padding:8px;
  color:var(--ink);
  cursor:pointer;
}

.menuBtn svg{display:block}
.brand img{width:28px;height:28px;display:block}

/* mobile sheet */

.sheet{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  opacity:0;
  pointer-events:none;
  transform:scale(1.02);
  transition:opacity 260ms ease, transform 260ms cubic-bezier(.2,.7,.2,1);
}

.sheet.open{opacity:1;transform:scale(1);pointer-events:auto}

.sheet nav{
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:calc(var(--header) + 24px) var(--pad) 0;
}

.sheet nav a{
  font-size:34px;
  font-weight:600;
  letter-spacing:-0.03em;
  color:var(--ink);
  padding:10px 0;
}

.sheet nav a.order{align-self:flex-start;margin-top:28px;font-size:17px;font-weight:500;padding:14px 26px;color:#fff}

.sheetClose{
  position:absolute;
  top:0;right:var(--pad);
  height:var(--header);
  background:none;border:0;
  color:var(--ink);
  cursor:pointer;
}

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

main{padding-top:var(--header)}

section{
  padding:var(--band) var(--pad);
  max-width:var(--wrap);
  margin:0 auto;
}

/* Hairlines stop where the content column stops. */
.rule{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
  height:1px;
  background:var(--hairline);
  background-clip:content-box;
}

.label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 var(--s2);
}

h1,h2,h3{margin:0;font-weight:600}

h2{
  font-size:clamp(2.4rem,6vw,4.5rem);
  line-height:1.02;
  letter-spacing:-0.035em;
  text-wrap:balance;
}

.lede{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.55;
  color:var(--muted);
  max-width:46ch;
  margin:var(--s2) 0 0;
  letter-spacing:-0.012em;
}

/* ---------- hero ---------- */

.hero{
  padding-top:clamp(52px,9vh,132px);
  padding-bottom:var(--band);
}

/* The mark pairs with the name, so it reads as one lockup rather than a
   decoration parked in the corner. */
.heroLead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s3);
}

.hero h1{
  font-size:clamp(3.2rem,11vw,8.5rem);
  line-height:.94;
  letter-spacing:-0.045em;
}

.hero .lede{max-width:38ch;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--ink);opacity:.62}

.heroActions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:500;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid var(--line);
  transition:transform 120ms ease, background 160ms ease, opacity 160ms ease;
  will-change:transform;
}

.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{opacity:.86}
.btn.ghost:hover{background:var(--faint)}
.btn:active{transform:scale(.97)}

.heroMark{
  margin:var(--s4) 0 0;
  aspect-ratio:16/7;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--faint);
}

.heroMark img,.aboutMark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- hero mark ----------
   Sits with the name at every size: beside it, sized to the space. It settles
   in a beat after the headline and drifts slightly against the scroll, which
   keeps it reading as a layer rather than a sticker. */

.heroSeal{
  justify-self:end;
  opacity:0;
  transform:translate3d(0,14px,0) scale(.97);
}

.heroSeal img{width:clamp(88px,21vw,150px);height:auto}

.js .heroSeal{
  transition:
    opacity 800ms cubic-bezier(.16,1,.3,1) 120ms,
    transform 800ms cubic-bezier(.16,1,.3,1) 120ms;
}

.heroSeal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .heroSeal{opacity:1;transform:none;transition:none}
}

/* On a wide screen the copy only fills the left half, so the mark takes the
   right and spans the whole block instead of leaving a hole beside the
   buttons. Same lockup as on a phone, just given the room it has. */
@media(min-width:1000px){
  .hero{
    display:grid;
    /* An even split: the copy owns the left half, the mark is centred in the
       right. Neither hugs an edge, so the two read as a pair. */
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--s4);
    align-items:start;
  }

  .heroLead{display:contents}

  .heroLeadText{grid-column:1;grid-row:1}
  .hero > .lede{grid-column:1;grid-row:2}
  .hero .heroActions{grid-column:1;grid-row:3}

  /* The mark spans the whole copy block and sits on the same baseline as the
     buttons, so the two columns end together instead of floating apart. */
  .heroSeal{
    grid-column:2;
    grid-row:1 / span 3;
    align-self:end;
    justify-self:center;
    padding-bottom:2px;
    width:100%;
  }

  /* Big enough to hold the right half on its own, never wider than the column. */
  .heroSeal img{width:min(100%,clamp(260px,36vw,620px))}

  .heroMarkWrap{grid-column:1 / -1;grid-row:4}
}

/* ---------- seasonal ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--s3) var(--s2);
  margin-top:var(--s4);
}

/* No drink photography yet, so each card is a plate of type on a light field. */
.card{container-type:inline-size}

.cardFace{
  aspect-ratio:1;
  border-radius:var(--radius);
  background:var(--faint);
  padding:clamp(18px,2vw,26px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:background 300ms ease;
}

.card:hover .cardFace{background:#eeeeee}

/* Rotating board: two drinks visible, the rest waiting offstage. */
.grid.rotator{grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.grid.rotator .cardFace{aspect-ratio:1}

.cardTag{
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#9a9a9a;
}
.grid.rotator .card{
  transition:
    opacity 380ms cubic-bezier(.16,1,.3,1) var(--delay,0ms),
    transform 380ms cubic-bezier(.16,1,.3,1) var(--delay,0ms);
}
.grid.rotator .card.out{opacity:0;transform:translate3d(0,10px,0)}
.card[hidden]{display:none}

.dots{
  display:flex;
  gap:8px;
  margin-top:var(--s3);
  align-items:center;
}

.dots button{
  width:26px;
  height:3px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(10,10,10,.16);
  cursor:pointer;
  transition:background 300ms ease;
}

.dots button[aria-current="true"]{background:var(--ink)}
.dots button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.card h3{
  font-size:clamp(19px,13cqi,44px);
  line-height:1.02;
  letter-spacing:-0.035em;
  margin:0 0 10px;
  text-wrap:balance;
}
.card p{margin:0;font-size:15px;color:var(--muted);line-height:1.5}
.cardMeta{font-variant-numeric:tabular-nums;font-size:15px;color:var(--muted)}

/* Section headers read as one line on a wide screen: name on the left, the
   sentence that explains it on the right, sharing a baseline. */
@media(min-width:1000px){
  .seasonal{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:var(--s5);
    align-items:end;
  }

  .seasonal > .label{grid-column:1;grid-row:1}
  .seasonal > h2{grid-column:1;grid-row:2}
  .seasonal > .lede{grid-column:2;grid-row:2;margin:0 0 .5rem;max-width:40ch}
  .seasonal > .grid{grid-column:1 / -1;grid-row:3}
  .seasonal > .dots{grid-column:1 / -1;grid-row:4}
}

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

.menu{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,90px);
  align-items:start;
}

.menuHead{position:sticky;top:calc(var(--header) + 44px)}
.menu h2{font-size:clamp(2.1rem,3.6vw,3.3rem);line-height:1.06}

.menuList{
  border-top:1px solid var(--hairline);
  margin-top:var(--s2);
}

.cat{border-bottom:1px solid var(--hairline)}

.cat summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:opacity 150ms ease;
}

.cat summary::-webkit-details-marker{display:none}
.cat summary:hover{opacity:.6}
.cat summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}

/* The count doubles as the open/closed indicator. */
.cat .count{
  position:relative;
  padding-right:26px;
  font-weight:500;
  letter-spacing:0;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.cat .count::after{
  content:"";
  position:absolute;
  right:4px;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-6px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);
  transform-origin:60% 60%;
  transition:transform 320ms cubic-bezier(.16,1,.3,1);
}

.cat[open] .count::after{transform:rotate(225deg)}

.catBody{overflow:hidden}
.cat ul{list-style:none;margin:0;padding:0 0 14px}

.cat li:last-child{border-bottom:0}

.cat li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--hairline);
  font-size:16px;
  letter-spacing:-0.012em;
}

.cat .price{
  color:var(--muted);
  font-size:15px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

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

.about{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,90px);
  align-items:start;
}

.about h2{font-size:clamp(2.1rem,3.6vw,3.3rem);line-height:1.06}
.aboutText .lede{max-width:52ch;margin-top:var(--s3)}
.aboutText .lede+.lede{margin-top:var(--s2)}

.aboutMark{
  position:sticky;
  top:calc(var(--header) + 40px);
  margin:0;
  aspect-ratio:3/4;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--faint);
}

/* ---------- store / visit ---------- */

.panel{
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(48px,7vw,86px) var(--pad);
  background:var(--ink);
  color:#fff;
  border-radius:var(--radius);
}

.panelWrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) var(--s4)}
.panel .label{color:rgba(255,255,255,.55)}
.panel .lede{color:rgba(255,255,255,.66)}
.panel .btn{border-color:rgba(255,255,255,.28);color:#fff;margin-top:34px}
.panel .btn:hover{background:rgba(255,255,255,.1)}

.visitGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s3);
  margin-top:var(--s4);
  border-top:1px solid var(--hairline);
}

.visitGrid div{padding:var(--s3) 0}
.visitGrid small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.visitGrid p{margin:10px 0 0;font-size:19px;letter-spacing:-0.02em;line-height:1.45}
.mapsBtn{margin-top:20px;font-size:15px;padding:12px 22px}
.mapsBtn:hover{background:var(--faint)}
.hours{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;max-width:20rem;font-variant-numeric:tabular-nums}
.hours span+span{color:var(--muted)}

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

footer{
  max-width:var(--wrap);
  margin:0 auto;
  padding:var(--s4) var(--pad) var(--s5);
  border-top:1px solid var(--hairline);
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  font-size:14px;
  color:var(--muted);
}

footer .spacer{margin-left:auto}
footer a:hover{color:var(--ink)}

/* ---------- reveal ---------- */

/* Content settles into place: no overshoot, one soft deceleration. */
.js .reveal{
  opacity:0;
  transform:translate3d(0,26px,0) scale(.994);
  transition:
    opacity 760ms cubic-bezier(.16,1,.3,1) var(--delay,0ms),
    transform 760ms cubic-bezier(.16,1,.3,1) var(--delay,0ms);
}

.js .reveal.in{opacity:1;transform:none}

.reveal.willMove{will-change:transform,opacity}

/* Panels are heavier surfaces, so they travel a little further and slower. */
.js .panel.reveal{transform:translate3d(0,42px,0) scale(.985)}
.js .panel.reveal,.js .heroMark.reveal{transition-duration:900ms}

/* Depth on scroll: the hero frame and the store panel drift against the page. */
.parallax{will-change:transform}



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

@media(max-width:560px){
  .grid.rotator .cardMeta{font-size:13px}
  .cardTag{font-size:10px}
}

@media(max-width:900px){
  .menu{grid-template-columns:1fr;gap:40px}
  .menuHead{position:static}
  .menuList{margin-top:var(--s1)}
  .about{grid-template-columns:1fr;gap:44px}
  .aboutMark{position:static;aspect-ratio:4/3}
  .grid{grid-template-columns:1fr;gap:var(--s4)}
  .visitGrid{grid-template-columns:1fr;gap:0}
  .visitGrid div+div{border-top:1px solid var(--hairline)}
}

@media(max-width:760px){
  body{font-size:16px}
  header nav,header .order{display:none}
  .menuBtn{display:block}

  .heroLead{gap:var(--s2);align-items:start}
  .heroSeal{margin-top:6px}
  .heroMark{aspect-ratio:4/3}
  .about{gap:var(--s4)}
  .menu{gap:var(--s3)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .parallax{transform:none!important}
  .cardFace,.card:hover .cardFace{transition:none}
  .sheet{transition:opacity 180ms ease;transform:none}
  .btn,.order{transition:opacity 150ms ease}
}

@media (prefers-reduced-transparency:reduce){
  header,.sheet{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}


/* ---------- ordering switch ----------
   One attribute on <html> controls every Order control on the page:
     data-ordering="closed"  ordering is off, controls read "Coming soon"
     data-ordering="open"    ordering is live and links go to Cash App
   Anything else (or the attribute missing) behaves as open.            */

.onClosed{display:none}

[data-ordering="closed"] .onOpen{display:none}
[data-ordering="closed"] .onClosed{display:inline}

[data-ordering="closed"] .orderLink{
  pointer-events:none;
  cursor:default;
}

/* Status does not belong in the nav. While ordering is off the header
   simply has no button; when it is on, the button is the real thing. */
[data-ordering="closed"] header .order.orderLink,
[data-ordering="closed"] .sheet .order.orderLink{display:none}

/* Exactly one filled button at a time. While ordering is off the menu is the
   primary action and the order control is a quiet status chip; when ordering
   opens the two swap, and nothing moves. */
[data-ordering="closed"] .btnMenu{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-ordering="closed"] .btnMenu:hover{opacity:.86}

[data-ordering="closed"] .heroActions .orderLink{
  background:transparent;
  color:var(--muted);
  border-color:var(--line);
}

[data-ordering="open"] .heroActions .orderLink,
:root:not([data-ordering]) .heroActions .orderLink{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  order:-1;
}

[data-ordering="open"] .heroActions .orderLink:hover{opacity:.86}
[data-ordering="open"] .btnMenu:hover{background:var(--faint)}

[data-ordering="closed"] .panel .btn.orderLink{
  color:rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.2);
}

[data-ordering="closed"] footer .orderLink{color:var(--muted)}

[data-ordering="closed"] .sheet nav a.order.orderLink{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
}