@font-face{font-family:"Gelasio";src:url(assets/fonts/Gelasio-VariableFont_wght.ttf) format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Gelasio";src:url(assets/fonts/Gelasio-Italic-VariableFont_wght.ttf) format("truetype");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url(assets/fonts/Montserrat-VariableFont_wght.ttf) format("truetype");font-weight:100 900;font-display:swap}
/* Moharani Coffee House draft site. Brand colors sampled from the official logo. */
:root{
  /* Branding Deck 2026-10-20 (provisional): pink backgrounds, green logo + headings, red accents only */
  --pink:#F8BCD5; --pink-soft:#F8BCD5; --blush:#FCDDEA;
  --green:#1B6B44; --green-deep:#14532F;
  --red:#D63A4F; --cream:#FDEBD9; --cream-2:#FDEBD9;
  --ink:#1A1A1A; --mustard:#E9C9A0;
  --brass:linear-gradient(135deg,#8A6A35 0%,#D9BC7A 28%,#A8843F 52%,#E8D39C 72%,#8A6A35 100%);
  --radius:28px;
  --arch:999px 999px 28px 28px;
  --shadow:0 20px 50px -20px rgba(120,20,50,.35);
  --display:Georgia, "Gelasio", "Times New Roman", serif;
  --body:"Montserrat", system-ui, -apple-system, Segoe UI, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--cream);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0 0 .4em;letter-spacing:-.01em;color:var(--green)}
h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:700;color:var(--green)}
h2 em,h1 em{font-style:italic;font-weight:400;color:var(--green);background:linear-gradient(transparent 82%,rgba(214,58,79,.35) 82%)}
.eyebrow{font-family:var(--body);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--red);margin:0 0 1rem}
.muted{color:#6b5a55}
.center{text-align:center;margin-top:3rem}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}

/* placeholders */
mark.ph{background:#FFF1A8;color:#5a4300;border:1px dashed #C9A100;padding:.05em .4em;border-radius:6px;font-size:.85em;font-weight:600;white-space:nowrap}
.ph-note{margin-top:1rem}

.draft-bar{background:var(--ink);color:#fff;text-align:center;font-size:.8rem;padding:.45rem 1rem;position:relative;z-index:60}
.draft-bar mark.ph{font-size:.8em}

.progress{position:fixed;inset:0 0 auto 0;height:4px;z-index:70;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--red));transform-origin:0 50%;transform:scaleX(0)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:1em 1.6em;border-radius:999px;font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:2px solid var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;box-shadow:4px 4px 0 var(--ink);will-change:transform}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--green{background:var(--green);color:#fff}
.btn--pink{background:var(--pink);color:var(--ink)}
.btn--cream{background:var(--cream);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--small{padding:.6em 1.1em;font-size:.9rem;box-shadow:3px 3px 0 var(--ink)}
.btn--big{font-size:1.05rem;padding:1.1em 2.2em}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2rem;padding:.7rem clamp(1rem,4vw,3rem);background:rgba(253,235,217,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:padding .3s var(--ease),box-shadow .3s}
.nav.is-scrolled{padding-top:.35rem;padding-bottom:.35rem;box-shadow:0 6px 24px -14px rgba(0,0,0,.3)}
.nav__logo img{width:64px;height:64px;transition:width .3s,height .3s}
.nav.is-scrolled .nav__logo img{width:48px;height:48px}
.nav__links{display:flex;gap:1.8rem;margin-left:auto}
.nav__links a{text-decoration:none;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.nav__toggle span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .3s}
.nav__toggle span:first-child{top:17px}.nav__toggle span:last-child{top:25px}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1rem,4vw,4rem);align-items:center;padding:clamp(2rem,6vw,5rem) clamp(1.2rem,5vw,4rem) clamp(3rem,7vw,6rem);min-height:calc(100vh - 110px);position:relative;
  background:radial-gradient(circle at 80% 30%,#fff3f8 0,transparent 45%),var(--pink)}
.hero__title{font-size:clamp(3.6rem,10vw,8.5rem);font-weight:700;color:var(--green);margin-bottom:.25em}
.hero__title em{background:none}
.hero__title .line{display:block}
.hero__lede{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:34ch;margin:0 0 2rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:1rem}
.hero__art{position:relative;height:min(78vh,720px);min-height:460px}
.arch{position:absolute;overflow:hidden;border-radius:var(--arch);border:3px solid var(--ink);box-shadow:var(--shadow);background:var(--pink-soft)}
.arch img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.arch:hover img{transform:scale(1.06)}
.arch--main{inset:0 7%}

/* marquee */
.marquee{background:var(--green);color:var(--cream);border-block:3px solid var(--ink);overflow:hidden;padding:1rem 0;transform:rotate(-1.2deg);margin:0 -2vw;position:relative;z-index:2}
.marquee__track{display:flex;gap:2rem;width:max-content;animation:marq 38s linear infinite;font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:400;font-style:italic;white-space:nowrap}
.marquee i{font-style:normal;color:var(--pink)}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
section{scroll-margin-top:90px}
.section-head{text-align:center;max-width:760px;margin:0 auto 2.5rem}
.section-sub{font-size:1.1rem;color:#4a3d3a}
.drinks{padding:clamp(5rem,9vw,8rem) clamp(1rem,4vw,3rem) 6rem}

/* filters */
.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-bottom:2.5rem}
.chip{font:700 .78rem var(--body);text-transform:uppercase;letter-spacing:.12em;padding:.55em 1.2em;border-radius:999px;border:2px solid var(--ink);background:#fff;cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip.is-active{background:var(--ink);color:var(--cream)}

/* placeholder art for drinks without a confirmed photo */
.ph-art{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:2rem 1.2rem;background:
  radial-gradient(circle at 50% 38%,rgba(255,255,255,.55) 0 22%,transparent 23%),
  repeating-linear-gradient(135deg,var(--pink-soft) 0 18px,var(--blush) 18px 36px)}
.ph-art--green{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.55) 0 22%,transparent 23%),repeating-linear-gradient(135deg,#CFE3D7 0 18px,#E7F1EA 18px 36px)}
.ph-art--cream{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.55) 0 22%,transparent 23%),repeating-linear-gradient(135deg,#F5D9BD 0 18px,var(--cream) 18px 36px)}
.ph-art__cup{width:76px;height:96px;margin:0 auto .9rem;border:3px solid var(--ink);border-top:0;border-radius:0 0 22px 22px;position:relative;background:var(--cream)}
.ph-art__cup::before{content:"";position:absolute;left:-10px;right:-10px;top:-10px;height:12px;border:3px solid var(--ink);border-radius:8px;background:#fff}
.ph-art span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5a4300;background:#FFF1A8;border:1px dashed #C9A100;border-radius:6px;padding:.25em .6em}

/* syrups */
.syrups{position:relative;background:var(--green);color:var(--cream);padding:clamp(5rem,9vw,8rem) clamp(1rem,4vw,3rem);overflow:hidden;border-block:3px solid var(--ink)}
.stripes{position:absolute;inset:-20% 0;background:url(assets/brand/tiger-stripes.jpg) center/cover no-repeat;opacity:.13;mix-blend-mode:screen;pointer-events:none}
.syrups__inner{position:relative;max-width:1100px;margin:0 auto}
.section-head--light h2{color:var(--cream)}
.section-head--light h2 em{color:var(--pink)}
.section-head--light .eyebrow{color:var(--pink)}
.section-head--light .section-sub{color:#e9f3ec}
.syrup-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,3rem)}
.syrup{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:var(--arch);padding:0 2rem 2.2rem;text-align:center;box-shadow:8px 8px 0 var(--ink);transition:transform .5s var(--ease)}
.syrup:hover{transform:translateY(-8px) rotate(-1deg)}
.syrup--rose:hover{transform:translateY(-8px) rotate(1deg)}
.syrup__arch{margin:2rem auto 1.4rem;width:150px;height:190px;border-radius:999px 999px 18px 18px;background:var(--cream);border:3px solid var(--ink);display:grid;place-items:center;position:relative;overflow:hidden}
.syrup .syrup__arch{background:var(--mustard)}
.syrup--rose .syrup__arch{background:var(--pink)}
.syrup__arch::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--fill,40%);background:rgba(255,255,255,.35);transition:height 1.4s var(--ease)}
.syrup.is-in .syrup__arch::after{--fill:75%}
.syrup__bn{font-size:2.6rem;font-weight:700;color:var(--ink);position:relative;z-index:1}
.syrup h3{font-size:2.4rem;color:var(--green);font-weight:700}
.syrup__notes{font-family:var(--body);display:inline-block;margin:0 0 1rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;background:var(--ink);color:var(--cream);padding:.35em 1em;border-radius:999px}
.foams{margin-top:3rem;text-align:center}
.foams__label{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;margin:0 0 .9rem}
.foams ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;padding:0;margin:0}
.foams li{border:2px solid var(--cream);border-radius:999px;padding:.4em 1.1em;font-weight:600;transition:background .3s,color .3s}
.foams li:hover{background:var(--pink);color:var(--ink);border-color:var(--pink)}

/* story */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(5rem,9vw,8rem) clamp(1.2rem,5vw,4rem);max-width:1300px;margin:0 auto}
.story__photo{margin:0;border-radius:var(--arch);overflow:hidden;border:3px solid var(--ink);box-shadow:-12px 12px 0 var(--pink);aspect-ratio:3/4}
.story__photo img{width:100%;height:100%;object-fit:cover}
.story__text p{font-size:1.12rem}
.pull{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--red);border-left:4px solid var(--pink);margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;line-height:1.25}

/* gallery */
.gallery{padding:clamp(4rem,8vw,7rem) clamp(1rem,4vw,3rem);background:var(--pink);border-block:3px solid var(--ink)}
.masonry{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:1rem}
.tile{display:block;overflow:hidden;border-radius:22px;border:3px solid var(--ink);position:relative}
.tile--tall{grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s}
.tile::after{content:"View on Instagram";position:absolute;inset:auto 0 0 0;padding:.8rem;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);color:#fff;font-weight:700;font-size:.85rem;opacity:0;transform:translateY(10px);transition:.4s var(--ease)}
.tile:hover img{transform:scale(1.08) rotate(.6deg)}
.tile:hover::after{opacity:1;transform:none}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:stretch;padding:clamp(5rem,9vw,8rem) clamp(1.2rem,5vw,4rem);max-width:1250px;margin:0 auto}
.visit__card{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:clamp(1.8rem,4vw,3rem);box-shadow:10px 10px 0 var(--green)}
address{font-style:normal;font-size:1.15rem;margin-bottom:1.5rem}
.visit__meta{margin:0 0 2rem;display:grid;gap:.7rem}
.visit__meta div{display:flex;gap:1rem;border-top:1px dashed #d9c6bd;padding-top:.7rem}
.visit__meta dt{font-weight:700;min-width:5.5rem}
.visit__meta dd{margin:0}
.visit__ctas{display:flex;gap:1rem;flex-wrap:wrap}
.visit__photo{margin:0;border-radius:var(--arch);overflow:hidden;border:3px solid var(--ink);min-height:420px}
.visit__photo img{width:100%;height:100%;object-fit:cover}

/* footer */
.footer{position:relative;background:var(--pink);overflow:hidden;border-top:3px solid var(--ink)}
.footer .stripes{inset:0;opacity:.35;mix-blend-mode:multiply;background-size:cover}
.footer__cta{position:relative;text-align:center;padding:clamp(5rem,10vw,9rem) 1.5rem 4rem}
.footer__cta h2{font-size:clamp(3rem,9vw,7rem);color:var(--green);font-weight:700}
.footer__cta h2 em{color:var(--green);background:none}
.footer__cta p{font-size:1.15rem;margin:0 0 2rem;font-weight:500}
.signoff{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.8rem)!important;color:var(--green);margin:2.5rem 0 0!important}
.footer__bottom{position:relative;background:var(--green);color:var(--cream);text-align:center;padding:2.5rem 1rem;border-top:3px solid var(--ink)}
.footer__bottom p{margin:.3rem 0}
.footer__bottom a{color:var(--cream)}
.footer__logo{width:min(280px,70%);margin:0 auto 1rem}
.tiny{font-size:.8rem;opacity:.8}

/* reveal */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .hero__title .line.reveal{transform:translateY(60%) rotate(3deg);clip-path:inset(0 0 0 0)}
.js .hero__title .line.reveal.is-in{transform:none}
.js .card.reveal{transform:translateY(50px) scale(.96)}
.js .card.reveal.is-in{transform:none}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:2rem}
  .hero__art{height:auto;aspect-ratio:4/4.4;min-height:0;max-width:520px;width:100%;margin:0 auto 1.5rem;order:-1}
  .story,.visit{grid-template-columns:minmax(0,1fr)}
  .story__text,.visit__card{min-width:0}
  mark.ph{white-space:normal}
  .story__media,.story__photo,.visit__photo{max-width:380px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}
  .syrup-cards{grid-template-columns:1fr}
  .masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .visit__photo{min-height:320px;order:-1}
}
@media (max-width:760px){
  .hero__art{max-width:340px}
  .hero__title{font-size:3.3rem}
  .hero{padding-top:1.5rem}
  .nav{gap:.8rem}
  .nav__toggle{display:block;order:3}
  .nav__order{margin-left:auto}
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--cream);border-bottom:3px solid var(--ink);margin:0;max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
  .nav__links.is-open{max-height:320px}
  .nav__links a{padding:1rem 1.5rem;border-top:1px solid #eedbd0}
  .nav__links a::after{display:none}
  .nav__logo img{width:52px;height:52px}
  .draft-bar{font-size:.72rem}
  .grid{grid-template-columns:repeat(2,1fr);gap:.9rem}
  }
@media (max-width:420px){
  .grid{grid-template-columns:1fr 1fr}
  .masonry{grid-auto-rows:150px}
  .btn{padding:.85em 1.3em}
}

/* motion safety */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1!important;transform:none!important}
}

/* brushed brass frames (Branding Deck: brass + crystal accents) */
.arch--main,.story__photo,.visit__photo{border:0;padding:6px;background:var(--brass)}
.arch--main img,.story__photo img,.visit__photo img{border-radius:inherit}
.arch--main img{border-radius:993px 993px 22px 22px}
.story__photo img,.visit__photo img{border-radius:993px 993px 22px 22px}
/* scalloped arch edge motif (single color, single weight) */
.scallop{height:28px;background:radial-gradient(circle at 18px 0,transparent 17px,var(--scallop,var(--cream)) 18px) 0 0/36px 28px repeat-x;margin-top:-28px;position:relative;z-index:3}
.scallop--down{margin-top:0;margin-bottom:-28px;transform:scaleY(-1)}
/* chandelier-ish crystal sparkle on eyebrows in hero */
.eyebrow .sparkle{color:var(--green)}
.tagline{font-family:var(--display);font-style:italic;font-size:1.2em;color:var(--green)}
.lead-line{font-size:1.2rem!important;color:var(--green)}

/* ---------- drink menu: clean product cutouts on cream (phase 2) ---------- */
.drinks{background:var(--pink);border-top:3px solid var(--ink)}
.drinks .section-sub{color:#3d2f2c}
.filters{max-width:1100px;margin-left:auto;margin-right:auto}
.chip{background:var(--cream)}
.menu-groups{max-width:1280px;margin:0 auto}
.menu-group{margin:0 0 clamp(2.8rem,5vw,4.2rem)}
.menu-group.is-hidden{display:none}
.menu-group__title{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 .3rem;display:flex;align-items:center;gap:.8rem}
.menu-group__title::after{content:"";flex:1;height:2px;background:var(--ink);opacity:.18}
.menu-group__blurb{margin:0 0 1.2rem;max-width:60ch;color:#3d2f2c}
.menu-group__title + .grid{margin-top:1rem}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(1rem,2vw,1.6rem)}
.card.is-hidden{display:none}
.card__inner{position:relative;height:100%;display:flex;flex-direction:column;background:var(--cream);border-radius:22px;overflow:hidden;outline:none;cursor:default;
  box-shadow:0 1px 0 rgba(26,26,26,.06),0 10px 24px -18px rgba(26,26,26,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card__inner:hover,.card.is-open .card__inner,.card__inner:focus-visible{transform:translateY(-6px);box-shadow:0 1px 0 rgba(26,26,26,.06),0 22px 36px -20px rgba(26,26,26,.45)}
.card__inner:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.card__media{position:relative;aspect-ratio:1/1.05;display:grid;place-items:center;padding:8% 10% 4%}
.card__cup{position:relative;z-index:1;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;transition:transform .7s var(--ease)}
.card__inner:hover .card__cup,.card.is-open .card__cup,.card__inner:focus-visible .card__cup{transform:scale(1.05) translateY(-2%)}
.card__shadow{position:absolute;left:28%;right:28%;bottom:4%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(26,26,26,.22),transparent);transition:transform .7s var(--ease),opacity .7s}
.card__inner:hover .card__shadow,.card.is-open .card__shadow{transform:scaleX(.9);opacity:.7}
.card__photo-flag{position:absolute;top:.7rem;right:.7rem;z-index:2;font-size:.64rem;transition:opacity .3s}
.card__inner:hover .card__photo-flag,.card.is-open .card__photo-flag{opacity:0}
.card__body{padding:.4rem 1rem 1.2rem;text-align:center}
.card__name{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--green);margin:0;line-height:1.15}
.card__over{position:absolute;inset:auto 0 0 0;z-index:3;padding:1.1rem 1.1rem 1.2rem;background:rgba(27,107,68,.96);color:var(--cream);border-radius:18px 18px 0 0;transform:translateY(101%);transition:transform .5s var(--ease)}
.card__inner:hover .card__over,.card__inner:focus-visible .card__over,.card.is-open .card__over{transform:translateY(0)}
.card__over p{margin:0;font-size:.92rem;line-height:1.45}
.card__over-name{font-family:var(--display);font-weight:700;font-size:1.1rem!important;margin-bottom:.35rem!important;color:#fff}
.card__note{margin-top:.6rem!important;font-size:.68rem!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.card__over .ph{font-size:.75rem}
.ph-art{width:100%;height:100%;background:none;padding:0}
.ph-art__cup{border-style:dashed;border-color:rgba(26,26,26,.35);background:transparent}
.ph-art__cup::before{border-style:dashed;border-color:rgba(26,26,26,.35);background:transparent}
@media (max-width:760px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .card__inner{border-radius:18px}
  .card__name{font-size:1.02rem}
  .card__body{padding:.2rem .5rem .9rem}
  .card__over{padding:.8rem .75rem .9rem}
  .card__over p{font-size:.78rem;line-height:1.4}
  .card__over-name{font-size:.95rem!important}
  .card__note{font-size:.58rem!important;letter-spacing:.08em}
  .ph-art__cup{width:46px;height:58px}
  .ph-art span{font-size:.56rem}
  .menu-group__blurb{font-size:.92rem}
  .filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 .2rem .5rem;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){
  .card__over{transform:none;position:static;border-radius:0}
  .card__over-name{display:none}
  .card__inner:hover,.card.is-open .card__inner{transform:none}
  .card__inner:hover .card__cup{transform:none}
}

/* ---------- hero: single brass arch (phase 2) ---------- */
.hero__art{height:min(76vh,700px);max-width:560px;width:100%;justify-self:center}
.arch--main{inset:0}
@media (max-width:900px){
  .hero__art{height:auto;aspect-ratio:3/3.9;max-width:420px}
}
@media (max-width:760px){
  .hero__art{max-width:300px}
}

/* ---------- drink menu: open cream section, no boxes (phase 3) ---------- */
.drinks{background:var(--cream);border-top:0;padding-top:clamp(6rem,10vw,9rem)}
.drinks .section-sub,.menu-group__blurb{color:#4a3a36}
.chip{background:transparent;border-color:var(--green);color:var(--green)}
.chip:hover{background:rgba(27,107,68,.08)}
.chip.is-active{background:var(--green);border-color:var(--green);color:var(--cream)}
.menu-group__title::after{background:var(--brass,#B08D57);opacity:.55;height:1px}
.drinks .grid{gap:clamp(1rem,2.4vw,2.2rem) clamp(.6rem,1.6vw,1.6rem)}
.card__inner,.card__inner:hover,.card.is-open .card__inner,.card__inner:focus-visible{background:transparent;border-radius:18px;box-shadow:none;transform:none}
.card__inner:focus-visible{outline:2px dashed var(--green);outline-offset:4px}
.card__inner:hover .card__cup,.card.is-open .card__cup,.card__inner:focus-visible .card__cup{transform:translateY(-4%) scale(1.05)}
.card__shadow{background:radial-gradient(closest-side,rgba(26,26,26,.26),transparent);height:6%;bottom:3%}
.card__inner:hover .card__shadow,.card.is-open .card__shadow{transform:scaleX(.82);opacity:.55}
.card__name{transition:color .3s}
.card__inner:hover .card__name,.card.is-open .card__name{color:var(--red)}
.card__over{inset:auto 6px 6px 6px;border-radius:16px;box-shadow:0 18px 30px -18px rgba(26,26,26,.55);transform:translateY(calc(100% + 8px))}
.ph-art__cup,.ph-art__cup::before{border-color:rgba(27,107,68,.45)}
.ph-art span{background:#FFF6CC}
.drinks .center .btn{box-shadow:4px 4px 0 var(--ink)}
@media (max-width:760px){
  .card__over{inset:auto 3px 3px 3px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .card__over{box-shadow:none;background:transparent;color:var(--ink);padding:0 .6rem 1rem;text-align:center}
  .card__note{color:var(--red)}
  .card__inner:hover .card__cup,.card.is-open .card__cup{transform:none}
}
.card__over{opacity:0;visibility:hidden;transition:transform .5s var(--ease),opacity .35s,visibility 0s .5s}
.card__inner:hover .card__over,.card__inner:focus-visible .card__over,.card.is-open .card__over{opacity:1;visibility:visible;transition:transform .5s var(--ease),opacity .3s,visibility 0s}
@media (prefers-reduced-motion:reduce){.card__over{opacity:1;visibility:visible}}

/* ---------- uniform cup scale (phase 4): every cutout is a 740x840 canvas, cup body same width, same baseline ---------- */
.card__media{aspect-ratio:740/840;padding:0;display:block;width:100%;max-width:300px;margin:0 auto}
.card__cup{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%}
.card__shadow{left:22%;right:22%;bottom:0;height:5%}
.ph-art{position:absolute;inset:0;display:block;padding:0}
.ph-art > div{position:absolute;left:15.5%;width:69%;top:25%;bottom:3%}
.ph-art__cup{position:absolute;inset:0;width:auto;height:auto;margin:0;border-width:3px;border-top:0;border-radius:0 0 18% 18% / 0 0 9% 9%;clip-path:none}
.ph-art__cup{left:4%;right:4%}
.ph-art__cup::before{left:-6%;right:-6%;top:-12px;height:14px}
.ph-art span{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);white-space:nowrap}
@media (max-width:760px){
  .ph-art__cup{width:auto;height:auto}
  .ph-art__cup::before{top:-9px;height:10px}
}
.visit__card{align-self:center}