:root{
  --ivory:#f6efe3; --ivory-2:#eee3d0; --paper:#fbf7f0; --sand:#e4d4b8;
  --ink:#2a2219; --cocoa:#4a3a2c; --muted:#7d6d5c;
  --brass:#b8893a; --brass-dark:#946a25; --olive:#6f7f5a; --olive-dark:#55643f; --rose:#c98b96;
  --radius:20px; --shadow:0 12px 34px rgba(42,34,25,.13);
  --serif:"Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.55;font-size:17px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.05;margin:0 0 .4em;letter-spacing:.005em}
h2{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:500}
h3{font-size:1.35rem;font-weight:600}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:700;color:var(--brass);margin:0 0 .9em}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px}
.skip:focus{left:8px;z-index:100}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px}

/* buttons: see café buttons below */
/* top bar */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;background:rgba(246,239,227,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(42,34,25,.08)}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:7px;font-family:var(--serif)}
.brand-mark{font-size:1.45rem;font-weight:700;letter-spacing:.2em;color:var(--ink)}
.brand-sub{font-size:1.2rem;font-weight:500;font-style:italic;color:var(--brass)}
.topnav{display:flex;gap:24px}
.topnav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--cocoa)}
.topnav a:hover{color:var(--brass)}
@media (max-width:760px){.topnav{display:none}}

/* strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:var(--ivory)}
.strip-item{padding:18px 22px;display:flex;flex-direction:column;gap:2px;border-right:1px solid rgba(255,255,255,.08);font-size:.98rem}
.strip-item:last-child{border-right:0}
.strip-k{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:#e8c98a;font-weight:700}
.strip a{color:var(--ivory);text-decoration:none;font-weight:600}
.strip a:hover{color:#e8c98a}
@media (max-width:760px){.strip{grid-template-columns:1fr}.strip-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:14px 22px}}

/* sections */
section{padding:76px 24px}
.section-head{max-width:720px;margin:0 auto 38px;text-align:center}
.section-head .muted{font-size:1.02rem}

/* signature */
.sig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1180px;margin:0 auto}
.sig{background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 18px rgba(42,34,25,.08);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.sig:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sig img{aspect-ratio:4/5;object-fit:cover;width:100%}
.sig:nth-child(4) img{object-position:center 80%}
.sig-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.sig-body h3{font-size:1.45rem}
.sig-body p{color:var(--muted);font-size:.92rem;flex:1;margin-bottom:.8em}
.price{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--brass-dark)}
@media (max-width:1000px){.sig-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.sig-grid{grid-template-columns:1fr 1fr;gap:12px}.sig-body{padding:12px 12px 14px}.sig-body p{font-size:.84rem}.sig-body h3{font-size:1.15rem}.price{font-size:1.2rem}.sig img{aspect-ratio:1/1}}

/* menu */
.menu{background:var(--paper);border-top:1px solid rgba(42,34,25,.06);border-bottom:1px solid rgba(42,34,25,.06)}
.menu-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1100px;margin:0 auto}
.menu-col h3{font-size:1.5rem;color:var(--brass-dark);border-bottom:1.5px solid var(--sand);padding-bottom:.35em;margin:0 0 .6em}
.menu-col h3 + .menu-list + h3{margin-top:1.6em}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:1.02rem}
.menu-list li > span:first-child{font-weight:500}
.menu-list .dots{flex:1;border-bottom:1px dotted rgba(42,34,25,.35);transform:translateY(-5px)}
.menu-list .p{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--ink);font-variant-numeric:tabular-nums}
.menu-list.plain li{flex-direction:column;gap:2px}
.menu-list.plain em{font-style:normal;color:var(--muted);font-size:.88rem}
.menu-note{text-align:center;margin:36px auto 0;color:var(--cocoa);max-width:640px;font-size:.95rem}
.menu-note a{color:var(--brass-dark);font-weight:600;text-decoration:none}
@media (max-width:860px){.menu-cols{grid-template-columns:1fr;gap:30px}}

/* story */
.story-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;max-width:1100px;margin:0 auto;align-items:center}
.story-text h2{max-width:11em}
.story-text p{font-size:1.08rem;color:var(--cocoa)}
.link-arrow{font-weight:600;color:var(--brass-dark);text-decoration:none}
.link-arrow:hover{text-decoration:underline}
.story-photos{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:end}
.story-photos img{border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover;width:100%}
.story-photos img:first-child{aspect-ratio:3/4}
.story-photos img:last-child{aspect-ratio:3/4;transform:translateY(-34px)}
@media (max-width:860px){.story-wrap{grid-template-columns:1fr;gap:30px}.story-photos img:last-child{transform:none}.story-photos img:first-child{aspect-ratio:4/5}}

/* reviews */
.reviews{text-align:center;background:var(--olive-dark);color:var(--ivory);background-image:radial-gradient(1200px 400px at 50% -10%,rgba(255,255,255,.08),transparent)}
.reviews .eyebrow{color:#e8c98a}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:0 auto 34px;text-align:left}
.review{margin:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column}
.review p{font-family:var(--serif);font-size:1.35rem;line-height:1.35;font-weight:500;flex:1}
.review figcaption{font-size:.9rem;color:rgba(255,255,255,.78)}
.reviews .btn-outline{color:var(--ivory);border-color:rgba(255,255,255,.55)}
.reviews .btn-outline:hover{background:var(--ivory);color:var(--olive-dark)}
@media (max-width:860px){.review-grid{grid-template-columns:1fr}}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:12px;max-width:1180px;margin:0 auto}
.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.gallery-grid img:nth-child(1){grid-row:span 2}
.gallery-grid img:nth-child(4){grid-row:span 2}
.gallery-grid img:nth-child(7){grid-column:span 2}
.gallery-grid img:nth-child(8){grid-column:span 2}
@media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;gap:8px}.gallery-grid img:nth-child(1),.gallery-grid img:nth-child(4){grid-row:auto}.gallery-grid img:nth-child(7),.gallery-grid img:nth-child(8){grid-column:auto}}

/* visit */
.visit{background:var(--paper);border-top:1px solid rgba(42,34,25,.06)}
.visit-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;max-width:1100px;margin:0 auto;align-items:stretch}
.hours{border-collapse:collapse;margin:0 0 22px;width:100%;max-width:400px}
.hours th{text-align:left;font-weight:600;padding:10px 0;border-bottom:1px solid rgba(42,34,25,.12);color:var(--cocoa)}
.hours td{text-align:right;padding:10px 0;border-bottom:1px solid rgba(42,34,25,.12);font-variant-numeric:tabular-nums}
address{font-style:normal;margin-bottom:14px;line-height:1.5;font-size:1.05rem}
address a{color:var(--brass-dark);text-decoration:none;font-weight:600}
.visit-cta{display:flex;flex-wrap:wrap;gap:10px}
.map{min-height:380px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--ivory-2)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block}
@media (max-width:860px){.visit-wrap{grid-template-columns:1fr}}

/* footer */
.footer{padding:34px 24px 112px;text-align:center;font-size:.92rem;color:var(--cocoa);background:var(--ivory)}
.footer a{color:var(--brass-dark);text-decoration:none}
.concept{margin-top:14px;font-size:.78rem;color:var(--muted)}
.concept a{color:var(--muted)}
@media (min-width:761px){.footer{padding-bottom:40px}}

/* sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(42,34,25,.96);backdrop-filter:blur(8px)}
.sticky-cta .btn{flex:1}
@media (max-width:760px){.sticky-cta{display:flex}}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- latte intro + hero ambience ---------- */
.intro-ov{display:none}
html.intro{overflow:hidden}
html.intro .intro-ov{display:block;position:fixed;inset:0;z-index:200;background:#ece6dc;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:introGone .4s 5.4s forwards}
html.intro .hero-inner>*{opacity:0;animation:introShow .5s 5.4s forwards}
html.intro-cap .intro-ov,html.intro-cap .hero-inner>*{animation:none}
@keyframes introGone{to{opacity:0;visibility:hidden}}
@keyframes introShow{to{opacity:1}}
.intro-ov canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 40%}
.intro-mark{position:absolute;left:50%;top:78%;transform:translate3d(-50%,14px,0);opacity:0;text-align:center;color:var(--ink);pointer-events:none;white-space:nowrap}
.im-name{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(2.5rem,10vw,3.6rem);letter-spacing:.36em;margin-right:-.36em;line-height:1}
.im-sub{display:flex;align-items:center;justify-content:center;gap:.8em;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,4.6vw,1.6rem);color:var(--brass-dark);margin-top:.15em}
.im-sub i{display:block;width:2.4em;height:1px;background:currentColor;opacity:.7}
.im-cap{display:block;margin-top:.9em;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.intro-hint{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));margin:0;text-align:center;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(42,34,25,.55);opacity:0;pointer-events:none}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero-fx{display:none}}

/* ================= buttons: original style + wall-LED glow ================= */
/* LED: the warm-white cove strip that outlines the SHAMS arch on the café wall */
:root{--led-line:#fff1cf;--led:255,204,128}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.9em 1.5em;border-radius:999px;font-weight:600;text-decoration:none;font-size:1rem;line-height:1.2;transition:transform .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  --glow:0 0 0 1.5px var(--led-line),0 0 6px 1px rgba(var(--led),.85),0 0 16px 3px rgba(var(--led),.42);box-shadow:var(--glow)}
.btn > span,.btn > svg{position:relative;z-index:1}
/* soft outer bloom that breathes (opacity only) */
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 14px 4px rgba(var(--led),.5),0 0 30px 8px rgba(var(--led),.22);opacity:.55;animation:ledBreath 4.8s ease-in-out infinite alternate;will-change:opacity}
@keyframes ledBreath{from{opacity:.35}to{opacity:1}}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brass);color:#fff;box-shadow:var(--glow),0 8px 22px rgba(184,137,58,.35)}
.btn-primary:hover{background:var(--brass-dark)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.28)}
/* the hero is warm sand now, not a dark photo: same frosted ghost, dark text so it reads */
.hero .btn-ghost{background:rgba(255,251,243,.5);color:var(--ink);border-color:rgba(42,34,25,.55)}
.hero .btn-ghost:hover{background:rgba(255,251,243,.85)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--ivory)}
.btn-call{background:var(--ink);color:var(--ivory);min-height:44px;padding:.6em 1.1em;font-size:.95rem}
.btn-call:hover{background:var(--brass)}
.btn-call svg{width:18px;height:18px;fill:currentColor}
/* on the light sand/paper surfaces the strip needs a touch more amber to read, like the cove on the café's white wall */
.hero .btn,.visit .btn{--led:250,170,64;--glow:0 0 0 1.5px #fff4d6,0 0 0 3px rgba(var(--led),.55),0 0 10px 2px rgba(var(--led),.75),0 0 22px 5px rgba(var(--led),.4)}
.hero .btn::after,.visit .btn::after{box-shadow:0 0 16px 5px rgba(var(--led),.55),0 0 34px 10px rgba(var(--led),.25)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn::after{animation:none;opacity:.7}}

/* ================= hero ================= */
.hero{position:relative;overflow:hidden;padding:0;color:var(--ink);background:#efdcbc;min-height:calc(100svh - 64px);display:flex;align-items:center}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 60% at 50% 0%,#f7e9cf 0%,rgba(247,233,207,0) 70%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),
  linear-gradient(180deg,#f2e2c6 0%,#ebd2aa 70%,#e3c393 100%)}
.hero-shade .sun{position:absolute;width:min(78vw,620px);aspect-ratio:1;left:50%;top:-12%;margin-left:calc(min(78vw,620px) / -2);border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.55) 0%,rgba(255,200,110,.18) 45%,transparent 70%)}
.hero-fx{z-index:3}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:18px 20px 34px;display:grid;gap:10px}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
/* hanging sign */
.sign{position:relative;padding-top:22px;transform-origin:50% 0;margin-bottom:8px}
.chain{position:absolute;top:0;width:2px;height:24px;background:repeating-linear-gradient(180deg,#8a6224 0 4px,transparent 4px 6px)}
.chain.c1{left:22%}.chain.c2{right:22%}
.sign-plate{position:relative;display:inline-flex;align-items:baseline;gap:.45em;padding:.42em 1.1em .5em;border-radius:8px;font-family:var(--serif);color:#3b2508;background:linear-gradient(180deg,#f5d995,#d4a04a 45%,#b07a2a 60%,#e8c172);box-shadow:inset 0 1px 0 #fff4d0,inset 0 -2px 0 rgba(80,48,8,.45),0 0 0 1.5px #74501a,0 6px 14px rgba(70,44,10,.3)}
.sign-plate b{font-size:1.25rem;font-weight:700;letter-spacing:.32em;margin-right:-.1em}
.sign-plate em{font-size:1.15rem;font-weight:600;color:#6a3f10}
/* lettered headline */
.hero-eyebrow{display:flex;gap:.7em;align-items:center;color:#9a5a2a;margin:.6em 0 .7em}
.hero-eyebrow span+span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:.7em;border-radius:50%;background:currentColor;vertical-align:middle;transform:translateY(-1px)}
.letter{margin:0 0 .25em;line-height:.9;font-weight:500;transform:rotate(-2.5deg)}
.letter .w{display:block}
.w1{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,6.4vw,2.6rem);color:#5c3a20}
.w2{font-family:"Caveat",var(--serif);font-weight:700;font-size:clamp(3.1rem,13.2vw,6.4rem);white-space:nowrap;color:#a3361f;line-height:.95;letter-spacing:-.005em;text-shadow:2px 2px 0 rgba(240,200,130,.9),3px 3px 0 rgba(120,50,20,.18)}
.w3{position:relative;display:inline-block!important;font-family:"Caveat",var(--serif);font-weight:700;font-size:clamp(2.6rem,11vw,4.6rem);color:#2f5a46;padding:0 .2em;transform:rotate(3deg) translateX(.6em)}
.swash{position:absolute;left:-6%;right:-10%;bottom:-.34em;width:116%;height:.42em;fill:none;stroke:#b8893a;stroke-width:3.2;stroke-linecap:round;transform-origin:0 50%}
.hero .lede{font-size:1rem;max-width:30em;margin:.7em auto .9em;color:#5a4634}
.hero .lede-a{display:none}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;margin:2px 0 12px}
.hero-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:.4em;padding:.38em .85em;border-radius:6px;background:rgba(255,250,240,.6);border:1px solid rgba(120,80,40,.22);font-size:.84rem;color:#4a3a2c}
.pill strong{font-size:1.05em}
.stars{color:#c48a26;letter-spacing:.05em}
.pill.open{border-color:#7da36a;color:#3f6a2e}
.pill-yelp{display:none}
/* scene */
.hero-scene{position:relative;width:min(100%,460px);margin:0 auto;height:min(118vw,520px)}
.arch{position:absolute;left:12%;right:12%;top:0;bottom:24%;border-radius:999px 999px 10px 10px;overflow:hidden;background:#cfae7c;box-shadow:0 0 0 6px #f7ead2,0 0 0 8px #c69a52,0 18px 34px rgba(80,50,20,.25)}
.arch img{position:absolute;left:0;top:-24%;width:100%;height:124%;object-fit:cover;object-position:center 40%}
.sweep{position:absolute;inset:-10% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,236,190,.0) 42%,rgba(255,236,190,.45) 50%,rgba(255,236,190,0) 58%,transparent 60%);transform:translate3d(-60%,0,0);pointer-events:none;mix-blend-mode:soft-light}
.table{position:absolute;left:0;right:0;bottom:15%;height:16%;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#fbf6ee,#ece3d6 60%,#d9cbb8);box-shadow:0 10px 18px rgba(60,40,20,.22);overflow:hidden}
.table::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 30% at 30% 40%,rgba(160,140,120,.18),transparent 70%),radial-gradient(40% 20% at 75% 70%,rgba(160,140,120,.15),transparent 70%),linear-gradient(160deg,transparent 30%,rgba(150,130,110,.18) 31%,transparent 33%,transparent 62%,rgba(150,130,110,.14) 63%,transparent 65%)}
.drinks{position:absolute;left:0;right:0;bottom:21%;margin:0;padding:0;list-style:none;display:flex;justify-content:center;align-items:flex-end;gap:4%}
.drink{position:relative;width:27%;transform:rotate(var(--r))}
.d1{--r:-6deg}.d2{--r:2deg;width:29%;margin-bottom:6px}.d3{--r:7deg}
.ph{display:block;aspect-ratio:3/4;border-radius:999px 999px 8px 8px;overflow:hidden;background:#fff;padding:5px;box-shadow:0 2px 0 rgba(255,255,255,.8) inset,0 10px 16px rgba(50,30,10,.28)}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 5px 5px}
.tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%) rotate(calc(var(--r) * -1.4));display:flex;align-items:baseline;gap:6px;padding:5px 9px 5px 12px;white-space:nowrap;background:#fbf3e3;border-radius:3px;font-size:.7rem;color:#5a2e1c;box-shadow:0 3px 6px rgba(60,30,10,.2);-webkit-mask:radial-gradient(circle 4px at 0 50%,#0000 98%,#000);mask:radial-gradient(circle 4px at 0 50%,#0000 98%,#000)}
.tag b{font-weight:700;letter-spacing:.04em}
.tag i{font-style:normal;font-family:var(--serif);font-weight:700;font-size:1.05rem;color:#a3361f}
/* sand coffee */
.sandbar{position:absolute;left:2%;right:2%;bottom:0;height:13.5%;min-height:58px;border:0;padding:0;margin:0;background:none;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;text-align:left}
.sand{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:40px 40px 12px 12px/20px 20px 12px 12px;background:radial-gradient(rgba(120,70,20,.35) .8px,transparent 1.2px) 0 0/6px 5px,radial-gradient(rgba(255,240,200,.5) .8px,transparent 1.2px) 3px 2px/7px 6px,linear-gradient(180deg,#e9c487,#d49a52 60%,#b9773a);box-shadow:inset 0 3px 6px rgba(255,235,190,.6),inset 0 -6px 10px rgba(110,60,20,.35),0 6px 12px rgba(60,35,10,.25);overflow:hidden}
.heat i{position:absolute;bottom:60%;width:2px;height:16px;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(255,250,235,.7));opacity:0}
.grains{position:absolute;inset:0;pointer-events:none}
.grains i{position:absolute;left:var(--x);top:40%;width:4px;height:4px;border-radius:50%;background:#c9883f;opacity:0}
.grains i:nth-child(1){--x:12%;--dx:-14px;--dy:-26px}.grains i:nth-child(2){--x:16%;--dx:8px;--dy:-34px}.grains i:nth-child(3){--x:20%;--dx:-6px;--dy:-22px}.grains i:nth-child(4){--x:24%;--dx:16px;--dy:-30px}
.grains i:nth-child(5){--x:13%;--dx:-20px;--dy:-16px}.grains i:nth-child(6){--x:22%;--dx:22px;--dy:-18px}.grains i:nth-child(7){--x:18%;--dx:2px;--dy:-40px}.grains i:nth-child(8){--x:26%;--dx:-10px;--dy:-12px}
.cezve-track{position:absolute;left:0;right:0;bottom:12%;height:100%;pointer-events:none}
.cezve{position:absolute;left:12%;bottom:0;width:78px;height:52px;transform:translate3d(0,0,0)}
.cezve svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.foam{position:absolute;left:8%;top:14%;width:36%;height:22%;transform-origin:50% 100%}
.foam i{position:absolute;inset:0;border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 40% 40%,#f1dcb6,#b98a55 70%,#7a4f26);box-shadow:0 -1px 0 rgba(255,245,220,.8)}
.sand-cap{position:absolute;right:3%;bottom:16%;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;color:#4a2508;text-align:right;pointer-events:none}
.sand-cap b{font-family:"Caveat",var(--serif);font-size:1.45rem;font-weight:700}
.sand-cap span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.8}
.sand-cap i{position:absolute;right:calc(100% + 8px);bottom:2px;font-style:normal;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:#7e1f10}
.sandbar:focus-visible{outline-offset:4px;border-radius:14px}

/* desktop */
@media (min-width:900px){
  .hero{min-height:min(calc(100svh - 64px),820px)}
  .hero-inner{grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding:40px 40px 50px}
  .hero-copy{align-items:flex-start;text-align:left}
  .letter{transform:rotate(-2deg);transform-origin:0 50%}
  .w3{transform:rotate(3deg) translateX(1.4em)}
  .hero .lede{margin-left:0;font-size:1.12rem}
  .hero .lede-a{display:inline}
  .hero-cta,.hero-facts{justify-content:flex-start}
  .pill-yelp{display:inline-flex}
  .hero-scene{height:600px;width:100%;max-width:500px}
  .hero-shade .sun{left:72%;top:-8%}
}
@media (max-width:899px){
  .hero{align-items:flex-start;min-height:0}
  .hero-inner{padding-top:6px;gap:6px}
  .sign{padding-top:16px;margin-bottom:2px}.chain{height:18px}
  .sign-plate b{font-size:1.05rem}.sign-plate em{font-size:1rem}
  .hero-eyebrow{margin:.5em 0 .5em;font-size:.66rem}
  .hero-foot{order:2;text-align:center;padding:22px 0 8px}
  .hero-copy{order:0}
  .hero-scene{order:1;margin-top:4px}
}


/* ================= hero entrance (after intro-done) ================= */
html.hero-pre:not(.hero-go) .sign,
html.hero-pre:not(.hero-go) .letter .w,
html.hero-pre:not(.hero-go) .swash,
html.hero-pre:not(.hero-go) .hero-eyebrow,
html.hero-pre:not(.hero-go) .hero-foot .lede,
html.hero-pre:not(.hero-go) .hero-cta .btn,
html.hero-pre:not(.hero-go) .hero-facts,
html.hero-pre:not(.hero-go) .drink,
html.hero-pre:not(.hero-go) .sandbar{opacity:0}
html.hero-go .sign{animation:signSwing 1.6s cubic-bezier(.3,.7,.3,1) both}
html.hero-go .hero-eyebrow{animation:fadeUp .6s .25s both}
html.hero-go .letter .w{animation:letterIn .7s cubic-bezier(.2,1.4,.4,1) both}
html.hero-go .w1{animation-delay:.15s}html.hero-go .w2{animation-delay:.3s}html.hero-go .w3{animation-delay:.5s}
html.hero-go .swash{animation:swashIn .7s .85s cubic-bezier(.4,0,.2,1) both}
html.hero-go .hero .lede{animation:fadeUp .6s .7s both}
html.hero-go .hero-cta .btn{animation:btnIn .6s cubic-bezier(.3,1.6,.5,1) both}
html.hero-go .hero-cta .btn:nth-child(1){animation-delay:.85s}html.hero-go .hero-cta .btn:nth-child(2){animation-delay:.97s}
html.hero-go .hero-facts{animation:fadeUp .6s 1.1s both}
html.hero-go .drink{animation:settle .9s cubic-bezier(.25,1.5,.45,1) both}
html.hero-go .d1{animation-delay:.35s}html.hero-go .d2{animation-delay:.5s}html.hero-go .d3{animation-delay:.65s}
html.hero-go .sandbar{animation:fadeUp .6s .9s both}
html.hero-go .sweep{animation:sweep 2.6s 1.2s ease-in-out both,sweep 2.6s 10s ease-in-out infinite}
html.hero-go .cezve{animation:push 4.2s 1.2s cubic-bezier(.45,.05,.3,1) both}
html.hero-go .foam{animation:foamRise 1.6s 5s cubic-bezier(.3,1.3,.5,1) both,foamBob 3s 6.6s ease-in-out infinite}
html.hero-go .heat i{animation:heat 2.4s ease-in-out infinite}
.heat i:nth-child(1){left:38%;animation-delay:1.6s!important}.heat i:nth-child(2){left:55%;animation-delay:2.4s!important}.heat i:nth-child(3){left:47%;animation-delay:3.2s!important}
.sandbar.brew .cezve{animation:pushB 3.6s 0s cubic-bezier(.45,.05,.3,1) both!important}
.sandbar.brew .foam{animation:foamRiseB 1.4s 3.2s cubic-bezier(.3,1.3,.5,1) both!important}
html.hero-go .grains i{animation:grain 1.1s cubic-bezier(.2,.7,.4,1) both}
.sandbar.brew .grains i{animation:grainB 1.1s cubic-bezier(.2,.7,.4,1) both!important}
html.hero-go .grains i{animation-delay:1.3s}
.sandbar.brew .grains i{animation-delay:0s!important}
.grains i:nth-child(2n){animation-duration:1.4s!important}
.sandbar:active .sand{transform:scale(.99,.96);transition:transform .08s}
.sand{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}

@keyframes fadeUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes letterIn{from{opacity:0;transform:translate3d(0,22px,0) rotate(-6deg) scale(.9)}to{opacity:1}}
@keyframes swashIn{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes btnIn{from{opacity:0;transform:rotate(var(--tilt,0deg)) translate3d(0,18px,0) scale(.85)}to{opacity:1;transform:rotate(var(--tilt,0deg))}}
@keyframes signSwing{0%{opacity:0;transform:translate3d(0,-30px,0) rotate(-12deg)}18%{opacity:1}35%{transform:rotate(7deg)}55%{transform:rotate(-3.5deg)}75%{transform:rotate(1.5deg)}100%{opacity:1;transform:rotate(0)}}
@keyframes settle{0%{opacity:0;transform:translate3d(0,-70px,0) rotate(calc(var(--r) * -2.5))}30%{opacity:1}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes sweep{0%{transform:translate3d(-60%,0,0)}100%{transform:translate3d(60%,0,0)}}
@keyframes push{0%{transform:translate3d(-10px,6px,0) rotate(-4deg)}35%{transform:translate3d(60px,2px,0) rotate(3deg)}60%{transform:translate3d(98px,4px,0) rotate(-2deg)}80%{transform:translate3d(118px,1px,0) rotate(1deg)}100%{transform:translate3d(124px,0,0) rotate(0)}}
@keyframes foamRise{0%{transform:translate3d(0,4px,0) scale(.7,.2)}100%{transform:translate3d(0,-3px,0) scale(1,1)}}
@keyframes foamBob{0%,100%{transform:translate3d(0,-3px,0) scale(1,1)}50%{transform:translate3d(0,-4px,0) scale(1.03,1.25)}}
@keyframes heat{0%{opacity:0;transform:translate3d(0,6px,0) scaleY(.6)}40%{opacity:.85}100%{opacity:0;transform:translate3d(3px,-26px,0) scaleY(1.2)}}
@keyframes grain{0%{opacity:0;transform:translate3d(0,0,0)}20%{opacity:1}100%{opacity:0;transform:translate3d(calc(var(--dx) + 120px),var(--dy),0)}}

@media (prefers-reduced-motion:reduce){
  .hero *,.hero *::before,.hero *::after{animation:none!important;transition:none!important}
  .cezve{transform:translate3d(124px,0,0)}
  .foam{transform:translate3d(0,-3px,0)}
}
@keyframes pushB{0%{transform:translate3d(-10px,6px,0) rotate(-4deg)}35%{transform:translate3d(60px,2px,0) rotate(3deg)}60%{transform:translate3d(98px,4px,0) rotate(-2deg)}80%{transform:translate3d(118px,1px,0) rotate(1deg)}100%{transform:translate3d(124px,0,0) rotate(0)}}
@keyframes foamRiseB{0%{transform:translate3d(0,4px,0) scale(.7,.2)}100%{transform:translate3d(0,-3px,0) scale(1,1)}}
@keyframes grainB{0%{opacity:0;transform:translate3d(0,0,0)}20%{opacity:1}100%{opacity:0;transform:translate3d(calc(var(--dx) + 120px),var(--dy),0)}}

@media (min-width:900px){
  .hero-inner{grid-template-areas:"copy scene" "foot scene";grid-template-rows:auto 1fr}
  .hero-copy{grid-area:copy;align-self:end}
  .hero-scene{grid-area:scene}
  .hero-foot{grid-area:foot;align-self:start}
}

/* pass 3 fixes */
.tag{flex-direction:column;align-items:center;gap:0;padding:4px 8px 4px 11px;line-height:1.1;bottom:-24px}
.tag b{font-size:.64rem;letter-spacing:.03em}
.tag i{font-size:1rem}
.sand-cap b i{position:static;font-style:normal;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:#7e1f10;margin-left:4px}
.sand-cap{bottom:auto;top:-30%;right:4%}
.sand-cap span{color:#5a2e0e}
.cezve{width:92px;height:62px;left:6%}
.cezve svg{transform:scaleX(-1)}
.foam{left:56%;right:auto;top:15%;width:38%}
.sand-front{position:absolute;left:0;right:0;bottom:0;height:34%;border-radius:0 0 12px 12px;background:radial-gradient(rgba(120,70,20,.35) .8px,transparent 1.2px) 0 0/6px 5px,linear-gradient(180deg,#d9a660,#c08240);pointer-events:none;box-shadow:0 -2px 4px rgba(255,230,180,.35) inset}
.sandbar{height:15%;min-height:64px}
.sand{height:58%}
@media (min-width:900px){.sign-plate b{font-size:1.6rem}.sign-plate em{font-size:1.45rem}.tag b{font-size:.72rem}}

/* pass 4: sand bar as its own row under the table */
.hero-fx{z-index:1}
.hero-scene{--sb:104px;height:calc(100vw + 20px)}
.arch{bottom:calc(var(--sb) + 15%)}
.table{bottom:calc(var(--sb) + 4%);height:14%}
.drinks{bottom:calc(var(--sb) + 9%)}
.sandbar{left:0;right:0;bottom:0;height:var(--sb);min-height:0}
.sand{top:28px;bottom:auto;height:42px}
.sand-front{top:48px;bottom:auto;height:22px;border-radius:0 0 12px 12px}
.cezve-track{top:0;bottom:auto;height:70px}
.cezve{top:2px;bottom:auto}
.heat i{bottom:auto;top:-4px}
.sand-cap{top:78px;left:0;right:0;bottom:auto;flex-direction:row;justify-content:center;align-items:baseline;gap:10px;text-align:center}
.sand-cap b{font-size:1.35rem}
@media (min-width:900px){.hero-scene{height:620px}}
@media (min-width:421px) and (max-width:899px){.hero-scene{height:520px}}
.sand{overflow:visible}
.grains i{top:20%}

/* pass 5: crema sits at the rim */
.foam{left:52%;top:20%;width:40%;height:12%}
.foam i{border-radius:50% 50% 30% 30%/90% 90% 10% 10%;background:radial-gradient(ellipse at 45% 70%,#e9cfa0,#b0804a 75%,#7a4f26)}
.drink .ph img{object-position:center 60%}
.d1 .ph img{object-position:center 35%}

.cezve{width:116px;height:78px;top:-10px;left:4%}
.sand-front{top:50px;height:20px;background:radial-gradient(rgba(120,70,20,.3) .8px,transparent 1.2px) 0 0/6px 5px,linear-gradient(180deg,#e0b273,#c58947)}
.d2 .ph img{object-position:center 88%}
.d3 .ph img{object-position:center 70%}