/* AH Juice — site-specific styles (after tokens.css + base.css) */

/* Fonts: latin subsets, display=optional, both files preloaded in <head> */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-stretch:100%;font-display:optional;src:url(https://fonts.gstatic.com/s/bricolagegrotesque/v9/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMnuECoAsyJBOm_OJvSCwA1Xp.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:optional;src:url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

h1,h2,h3,h4{font-weight:700}
.btn{font-weight:600}
.btn-accent:hover{filter:brightness(1.08)}
.btn-outline{color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}
a{color:var(--brand)}

/* Header */
.site-header{background:color-mix(in srgb,var(--bg) 94%,transparent)}
:root{--header-h:76px}
.brand img{height:62px;width:auto}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent)}
.nav a.btn-accent,.nav a.btn-accent:hover{color:#fff}

/* Hero */
.hero-ahj{padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,6vw,4.5rem)}
.hero-ahj h1{font-size:clamp(2.6rem,1.4rem + 5.2vw,5.6rem);line-height:.98;letter-spacing:-.035em;max-width:15ch;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.hero-row{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.hero-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}}
.hero-ahj .lede{color:var(--ink);font-size:var(--fs-lg)}
.hero-ahj .actions{margin-top:var(--s-5)}
@media(min-width:960px){.hero-ahj .actions{flex-wrap:nowrap}.hero-ahj .actions .btn{padding-inline:1.15em;font-size:var(--fs-md)}}
.hero-note{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--ink-2);max-width:46ch}
.hero-photo{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:924/444;background:var(--sprout);width:100%}
.hero-photo img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .hero-photo{animation:hero-open 900ms var(--ease) both}
  @keyframes hero-open{from{clip-path:inset(0 0 0 100% round var(--radius))}to{clip-path:inset(0 0 0 0 round var(--radius))}}
}

/* The juice fridge: the jars stand side by side on one shelf */
.fridge-section{background:var(--sprout)}
.fridge{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,72%);overflow-x:auto;scroll-snap-type:x mandatory;gap:0;border-radius:var(--radius);background:var(--bg)}
@media(min-width:760px){.fridge{grid-auto-columns:minmax(220px,40%)}}
@media(min-width:1100px){.fridge{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}}
.fridge li{scroll-snap-align:start;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.fridge li:last-child{border-right:0}
.fridge img{width:100%;aspect-ratio:1;object-fit:cover;border-bottom:10px solid var(--beet)}
.fridge li:first-child img{border-top-left-radius:var(--radius)}
.fridge li:last-child img{border-top-right-radius:var(--radius)}
.fridge-label{padding:var(--s-5) var(--s-4) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.fridge-label h3{font-size:var(--fs-lg);margin:0}
.fridge-label p{font-size:var(--fs-sm);color:var(--ink-2);margin:0;flex:1}
.fridge-label a{font-weight:600;font-size:var(--fs-sm);color:var(--accent);margin-top:var(--s-2);min-height:44px;display:flex;align-items:center}

.tonics{margin-top:var(--s-8);display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:880px){.tonics{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.tonics img{width:100%;border-radius:var(--radius);aspect-ratio:944/444;object-fit:cover}
.tonics h3{font-size:var(--fs-xl)}
.first-sip{margin:var(--s-8) 0 0;padding-top:var(--s-7);border-top:1px solid color-mix(in srgb,var(--brand) 25%,transparent)}
.first-sip .pullquote{max-width:34ch;color:var(--beet)}
.first-sip figcaption{margin-top:var(--s-4);color:var(--ink-2);font-size:var(--fs-sm)}

/* Ordering: a real sequence */
.order-section .sequence{list-style:none;padding:0;margin:0}
.order-section .step h3{font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.order-section .step p{color:var(--ink-2)}
.order-section .step::before{color:var(--accent)}
.order-actions{margin-top:var(--s-7)}
.order-more{margin-top:var(--s-7);display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));color:var(--ink-2);font-size:var(--fs-sm);border-top:1px solid var(--line);padding-top:var(--s-5)}

/* Café */
.cafe-section{background:#fff;border-block:1px solid var(--line)}
.cafe-grid{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.cafe-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.cafe-section .lede{color:var(--ink)}
.menu-rows{margin-top:var(--s-6)}
.menu-rows li{grid-template-columns:1fr}
.menu-rows p{font-size:var(--fs-md)}
.cafe-photos{display:grid;gap:var(--s-4)}
.cafe-photos img{width:100%;border-radius:var(--radius);object-fit:cover}
.cafe-photos img:first-child{aspect-ratio:4/3}
.cafe-photos img:last-child{aspect-ratio:924/444}

/* Story */
.story-grid{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:880px){.story-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.founders{width:100%;max-width:420px;border-radius:var(--radius);aspect-ratio:325/488;object-fit:cover}
.deb-quote{margin:var(--s-6) 0}
.deb-quote .pullquote{color:var(--brand)}
.deb-quote figcaption{margin-top:var(--s-3);color:var(--ink-2);font-size:var(--fs-sm)}

/* Visit */
.visit-section{background:var(--sprout)}
.visit-grid{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:880px){.visit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.contact-info{font-style:normal}
.contact-info .item svg{color:var(--accent)}
.hours{font-size:var(--fs-md)}
.map{background:#fff}

/* Footer */
.site-footer{background:var(--beet);color:#f1e6e3}
.site-footer .brand{color:#fff;font-size:var(--fs-xl)}
.footer-h{color:#fff;font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s-3);letter-spacing:0}
.footer-bottom{color:#e3cfcb}

@media(max-width:560px){
  .hero-ahj .actions .btn{width:100%}
  .order-actions .btn{width:100%}
}