/* Halfpenny Coffee (fictional) · concept design by Orderhatch
   Direction: "First light" — cinematic warm-graded photography, oat-milk paper and espresso night sections,
   Fraunces light at display sizes, Manrope text, DM Mono roaster's-card details. One accent: coffee cherry. */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-var.woff2) format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-var.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#F4F0EA;--paper2:#EAE3D9;--ink:#1B1411;--ink2:#40362F;--muted:#675C53;
  --line:rgba(27,20,17,.16);--line2:rgba(27,20,17,.32);
  --night:#17110E;--night2:#211915;--n-ink:#F0E7DB;--n-muted:#B9AC9D;--n-line:rgba(240,231,219,.16);--n-line2:rgba(240,231,219,.34);
  --acc:#7E2236;--acc-lt:#DDA2AA;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --m:20px;--gap:20px;--ease:cubic-bezier(.16,.84,.24,1);
}
@media (min-width:768px){:root{--m:40px;--gap:24px}}
@media (min-width:1200px){:root{--m:56px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink2);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
picture{display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.night :focus-visible{outline-color:var(--acc-lt)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:.6rem .9rem;text-decoration:none}
.skip:focus{top:12px}
.wrap{padding:0 var(--m);max-width:1560px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
@media (min-width:1024px){.grid{grid-template-columns:repeat(12,minmax(0,1fr))}}
.mono{font:400 .74rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.acc{color:var(--acc)}
.night{background:var(--night);color:var(--n-muted)}
.night .acc{color:var(--acc-lt)}

/* display type */
.d1,.d2,.d3{font-family:var(--serif);font-weight:300;color:var(--ink);letter-spacing:-.025em;font-variation-settings:"opsz" 144}
.d1{font-size:clamp(3.1rem,8.6vw,9.4rem);line-height:1.02;letter-spacing:-.035em}
.d2{font-size:clamp(2.4rem,5.4vw,5.6rem);line-height:.98}
.d3{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.12;letter-spacing:-.015em}
.d1 span,.d2 span{display:block}
.night .d1,.night .d2,.night .d3{color:var(--n-ink)}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.32;color:var(--ink);letter-spacing:-.01em}

/* text links + buttons: hairline, restrained */
.tl{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;border-bottom:1px solid var(--line2);transition:border-color .25s,color .25s}
.tl:hover{border-color:var(--acc);color:var(--acc)}
.tl svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.tl:hover svg{transform:translateX(4px)}
.night .tl{color:var(--n-ink);border-color:var(--n-line2)}
.night .tl:hover{color:var(--acc-lt);border-color:var(--acc-lt)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:52px;padding:.85rem 1.6rem;background:var(--ink);color:var(--paper);font-weight:600;font-size:.95rem;letter-spacing:.01em;text-decoration:none;border:1px solid var(--ink);transition:background .25s,color .25s}
.btn:hover{background:var(--acc);border-color:var(--acc)}
.btn svg{width:14px;height:14px}
.night .btn{background:var(--n-ink);color:var(--night);border-color:var(--n-ink)}
.night .btn:hover{background:var(--acc-lt);border-color:var(--acc-lt)}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.hdr.solid{background:rgba(244,240,234,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.4rem;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:.6rem;margin-right:auto;text-decoration:none;color:var(--ink);min-height:44px}
.brand svg{width:22px;height:22px}
.brand b{font:400 1.45rem/1 var(--serif);letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.nav ul{display:flex;gap:1.6rem}
.nav a{display:inline-block;padding:.6rem 0;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--ink)}
.hdr-order{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:600}
.hdr-order:hover{background:var(--ink);color:var(--paper)}
.hdr-order .mono{font-size:.72rem}
.navtoggle{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;font-size:.88rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line2)}
@media (max-width:1023px){
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:.5rem var(--m) 1.2rem;display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;padding:.9rem 0;font:300 1.6rem/1.1 var(--serif);border-bottom:1px solid var(--line)}
  .hdr.menu-open{background:var(--paper)}
}
@media (min-width:1024px){.navtoggle{display:none}}
@media (max-width:420px){.hdr-in{gap:.9rem}.hdr-order .lg{display:none}}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1080px;overflow:hidden;background:#c99b6c}
.hero-ph,.hero-ph img{position:absolute;inset:0;width:100%;height:100%}
.hero-ph img{object-fit:cover;object-position:50% 62%}
.js .hero-ph img{transform:scale(1.06);transition:transform 2.4s var(--ease)}
.js .hero.in .hero-ph img{transform:none}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding-top:clamp(96px,13vh,140px)}
.hero .d1{font-size:clamp(3rem,7.6vw,8rem);max-width:13ch}
.hero-strip{margin-top:auto;position:relative;z-index:2;background:rgba(244,240,234,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.hero-strip ul{display:grid;grid-template-columns:1fr;gap:0}
.hero-strip li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.hero-strip li:last-child{border-bottom:0}
.hero-strip li span:last-child{color:var(--muted)}
@media (min-width:768px){
  .hero-strip ul{grid-template-columns:repeat(3,1fr)}
  .hero-strip li:nth-child(2){grid-column:span 1}
  .hero-strip li{border-bottom:0;border-left:1px solid var(--line);padding:1rem 1.2rem}
  .hero-strip li:first-child{border-left:0;padding-left:0}
}

.hero-in .wrap{width:100%}

/* intro + ticket */
.intro{padding:clamp(4rem,8vw,7rem) 0 clamp(4rem,8vw,7.5rem)}
.intro .grid{row-gap:2.5rem;align-items:start}
.idx{grid-column:1/-1;color:var(--muted)}
.intro .lead{grid-column:1/-1}
.intro-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.ticket-wrap{grid-column:1/-1;position:relative;z-index:5}
@media (min-width:1024px){
  .idx{grid-column:1/3;padding-top:.6rem}
  .intro .lead{grid-column:3/9}
  .intro-act{grid-column:3/9;margin-top:-.5rem}
  .ticket-wrap{grid-column:9/13;grid-row:1/3;margin-top:calc(-1 * clamp(9rem,14vw,13rem))}
}

/* the receipt: one refined component, used in the intro and the order section */
.receipt{position:relative;background:#FFFCF7;color:var(--ink);padding:1.6rem 1.5rem 1.7rem;box-shadow:0 40px 80px -40px rgba(27,20,17,.45),0 1px 0 rgba(27,20,17,.06)}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 5px 0,transparent 4.5px,#FFFCF7 5px) 0 0/14px 10px repeat-x}
.receipt::before{top:-9px;transform:scaleY(-1)}
.receipt::after{bottom:-9px}
.rc-head{display:flex;justify-content:space-between;gap:1rem;color:var(--muted)}
.rc-rule{border:0;border-top:1px dashed var(--line2);margin:1rem 0}
.rc-lines li{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;font:400 .82rem/1.5 var(--mono);color:var(--ink)}
.rc-k{color:var(--muted)}
.rc-time{font:300 clamp(3rem,5vw,4.4rem)/1 var(--serif);letter-spacing:-.03em;color:var(--acc);margin-top:.35rem;font-variation-settings:"opsz" 144}
.rc-sub{font-size:.9rem;color:var(--ink2);margin-top:.5rem}
.receipt .tl{margin-top:1rem}

/* menu */
.menu{padding:clamp(4.5rem,9vw,8rem) 0}

.menu-head{grid-column:1/-1;margin-bottom:clamp(2.5rem,5vw,4rem)}
.menu-head p{margin-top:1.2rem;max-width:42ch}
@media (min-width:1024px){.menu-head{grid-column:1/9}}
.mtabs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-bottom:2rem;border-bottom:1px solid var(--line)}
.mtab{display:inline-flex;align-items:baseline;gap:.55rem;min-height:48px;padding:.4rem 0;font:300 1.45rem/1.1 var(--serif);color:var(--muted);letter-spacing:-.01em;border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .25s}
.mtab .mono{font-size:.68rem;color:var(--muted)}
.mtab:hover{color:var(--ink)}
.mtab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.mtab[aria-selected="true"] .mono{color:var(--acc)}
.mpanels{grid-column:1/-1}
.mfig{grid-column:1/-1;margin-bottom:2rem}
.mfig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mfig figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem;color:var(--muted)}
@media (min-width:1024px){
  .mtabs{grid-column:1/4;flex-direction:column;gap:0;border-bottom:0;border-top:1px solid var(--line);align-self:start;position:sticky;top:110px}
  .mtab{font-size:2.05rem;padding:.85rem 0;border-bottom:1px solid var(--line);margin:0;width:100%}
  .mtab[aria-selected="true"]{border-bottom-color:var(--line)}
  .mtab[aria-selected="true"]::after{content:"";flex:1;align-self:center;height:1px;background:var(--ink);margin-left:.8rem;opacity:.6}
  .mpanels{grid-column:4/9;grid-row:2;padding:0 1.5rem}
  .mtabs{grid-row:2}
  .mfig{grid-row:2}
  .mfig{grid-column:9/13;margin:0 calc(-1 * var(--m)) 0 0;align-self:start;position:sticky;top:110px}
  .mfig img{aspect-ratio:4/5}
  .mfig figcaption{padding-right:var(--m)}
}
.items{border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:1fr auto 44px;align-items:center;gap:.3rem 1.1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.item h3{font:400 1.32rem/1.25 var(--serif);color:var(--ink);letter-spacing:-.01em}
.item h3 .mono{font-size:.62rem;color:var(--acc);margin-left:.5rem;vertical-align:.3em}
.item p{font-size:.92rem;color:var(--muted);margin-top:.2rem;max-width:46ch}
.price{font:400 .86rem var(--mono);color:var(--ink)}
.add{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink);transition:color .2s}
.add::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid var(--line2);transition:border-color .2s,background .2s,transform .3s var(--ease)}
.add svg{position:relative;width:12px;height:12px}
.add:hover::before{border-color:var(--ink)}
.add.added{color:var(--paper)}
.add.added::before{background:var(--acc);border-color:var(--acc);transform:scale(1.08)}
.night .add{color:var(--n-ink)}
.night .add::before{border-color:var(--n-line2)}
.night .add:hover::before{border-color:var(--n-ink)}
.mnote{margin-top:1.2rem;font-size:.9rem;color:var(--muted)}

/* full-bleed plates */
.plate{position:relative}
.plate img{width:100%;height:clamp(380px,72vh,820px);object-fit:cover}
.plate figcaption{display:grid;gap:.4rem 2rem;padding:1rem var(--m) 0;color:var(--muted)}
.plate figcaption b{font-weight:400;color:var(--ink)}
.night .plate figcaption{color:var(--n-muted)}
.night .plate figcaption b{color:var(--n-ink)}
@media (min-width:768px){.plate figcaption{grid-template-columns:auto 1fr auto}}
.js .reveal{clip-path:inset(8% 0 8% 0);transition:clip-path 1.4s var(--ease)}
.js .reveal.in{clip-path:inset(0 0 0 0)}
@media (max-width:767px){.hero-strip{padding-bottom:52px}}

/* order ahead (night) */
.order{padding:clamp(4.5rem,9vw,8rem) 0 0}
.order .grid{row-gap:3rem}
.order-copy{grid-column:1/-1}
.order-copy > p{margin-top:1.4rem;max-width:44ch;font-size:1.02rem}
.order-rc{grid-column:1/-1}
@media (min-width:1024px){.order-copy{grid-column:1/7}.order-rc{grid-column:8/13}}
.steps{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--n-line)}
.step{display:grid;grid-template-columns:3rem 1fr;gap:.4rem 1rem;padding:1.4rem 0;border-bottom:1px solid var(--n-line);border-left:0;border-right:0;margin:0;min-width:0}
.step > .mono,.step legend{color:var(--n-muted)}
.step legend{float:left;width:3rem;padding:0;font:400 .74rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
fieldset.step{display:block;padding:1.4rem 0}
fieldset.step .opts{margin-left:4rem}
.step-b{min-width:0}
.step-l{display:block;color:var(--n-ink);font-weight:600;font-size:.95rem;margin-bottom:.6rem}
.opts{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opt span{display:inline-block;padding:.3rem 0;font:300 1.6rem/1.2 var(--serif);color:var(--n-muted);border-bottom:1px solid transparent;transition:color .2s}
.opt input:checked+span{color:var(--n-ink);border-bottom-color:var(--acc-lt)}
.opt input:focus-visible+span{outline:2px solid var(--acc-lt);outline-offset:4px}
.opt:hover span{color:var(--n-ink)}
.paper .opt span{color:var(--muted)}
.paper .opt input:checked+span{color:var(--ink);border-bottom-color:var(--acc)}
.paper .opt:hover span{color:var(--ink)}
.field-line{width:100%;min-height:48px;padding:.6rem 0;background:transparent;border:0;border-bottom:1px solid var(--line2);color:var(--ink);border-radius:0;font-size:1rem}
.night .field-line{border-bottom-color:var(--n-line2);color:var(--n-ink)}
.night select.field-line option{color:#000}
.field-line:focus-visible{outline:none;border-bottom-color:var(--acc);box-shadow:0 1px 0 var(--acc)}
.night .field-line:focus-visible{border-bottom-color:var(--acc-lt);box-shadow:0 1px 0 var(--acc-lt)}
.field-line::placeholder{color:var(--muted);opacity:1}
.night .field-line::placeholder{color:var(--n-muted)}
select.field-line{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B9AC9D' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .2rem center;padding-right:1.6rem}
.paper select.field-line{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23675C53' stroke-width='1.4'/%3E%3C/svg%3E")}
.quick{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.qa{min-height:44px;color:var(--n-ink);font-size:.95rem;font-weight:500;border-bottom:1px solid var(--n-line2)}
.qa:hover{border-color:var(--acc-lt);color:var(--acc-lt)}
.hint{font-size:.85rem;margin-top:.5rem;color:var(--muted)}
.night .hint{color:var(--n-muted)}
.order-rc .receipt{padding:2rem 1.8rem 2rem}
.lines li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.lines .nm{font:400 .84rem/1.4 var(--mono);color:var(--ink);text-transform:none}
.lines .nm small{display:block;color:var(--muted);font-size:.76rem}
.qty{display:inline-flex;align-items:center}
.qty button{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);color:var(--ink);font:400 .95rem/1 var(--mono)}
.qty button:hover{border-color:var(--ink)}
.qty output{min-width:1.8rem;text-align:center;font:400 .82rem var(--mono);color:var(--ink)}
.ln-p{font:400 .82rem var(--mono);color:var(--ink);min-width:3.6rem;text-align:right}
.empty{padding:.8rem 0;font-size:.9rem;color:var(--muted)}
.rc-total{display:flex;justify-content:space-between;padding-top:.9rem;font:400 .9rem var(--mono);color:var(--ink);text-transform:uppercase;letter-spacing:.06em}
.rc-eta{margin-top:1.6rem;padding-top:1.4rem;border-top:1px dashed var(--line2)}
.rc-place{margin-top:1.6rem;display:grid;gap:.7rem}
.rc-place .btn{width:100%}
.receipt .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.receipt .btn:hover{background:var(--acc);border-color:var(--acc)}
.preview{font:400 .7rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.done{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink)}
.order .plate{margin-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(3rem,5vw,4.5rem)}

/* stamp card */
.stampsec{padding:clamp(4.5rem,9vw,8rem) 0}
.stampsec .grid{row-gap:3rem;align-items:center}
.st-copy{grid-column:1/-1}
.st-card{grid-column:1/-1}
@media (min-width:1024px){.st-copy{grid-column:1/6}.st-card{grid-column:7/13}}
.st-copy > p{margin-top:1.4rem;max-width:42ch;font-size:1.02rem}
.perks{margin-top:2rem;border-top:1px solid var(--line)}
.perks li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
.perks .mono{color:var(--acc);padding-top:.15rem}
.perks b{color:var(--ink);font-weight:600}
.card{background:#FBF8F3;border:1px solid var(--line);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 50px 90px -60px rgba(27,20,17,.5)}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.card-top b{font:400 1.6rem/1 var(--serif);color:var(--ink);letter-spacing:-.02em}
.card-top .mono{color:var(--muted)}
.punch{display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(.3rem,1vw,.7rem);margin:clamp(1.8rem,4vw,2.8rem) 0 1rem}
.punch li{display:grid;gap:.45rem;justify-items:center}
.hole{width:100%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center}
.hole.on{background:var(--acc);border-color:var(--acc)}
.hole.on svg{width:46%;height:46%;color:#FBF8F3}
.hole.pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.5)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.punch .mono{font-size:.6rem;color:var(--muted);letter-spacing:.02em}
.card-foot{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.card-count{font:300 clamp(2.6rem,5vw,3.8rem)/.9 var(--serif);color:var(--ink);letter-spacing:-.03em}
.card-count span{color:var(--muted)}
.card-foot p:last-child{text-align:right;color:var(--muted)}
.st-act{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.6rem}

/* cafés */
.cafes{background:var(--paper2);padding:clamp(4.5rem,9vw,8rem) 0}
.cafes-head{grid-column:1/-1;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:1024px){.cafes-head{grid-column:1/9}}
.picker{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2);margin-bottom:clamp(2rem,4vw,3rem)}
.pick{display:grid;gap:.35rem;align-content:start;text-align:left;padding:1.2rem 1rem 1.3rem 0;border-bottom:1px solid var(--line2);color:var(--muted);transition:color .25s}
.pick + .pick{padding-left:1rem;border-left:1px solid var(--line2)}
.pick b{font:300 clamp(2rem,5vw,4.2rem)/1 var(--serif);letter-spacing:-.03em}
.pick .st{font-size:.92rem;font-weight:500}
.pick:hover{color:var(--ink)}
.pick[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--acc)}
.pick[aria-selected="true"] .mono{color:var(--acc)}
.cafe{grid-column:1/-1;display:grid;gap:2rem}
.cafe .ph img{width:100%;aspect-ratio:5/4;object-fit:cover}
@media (min-width:1024px){
  .cafe{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
  .cafe .ph{grid-column:1/8;margin-left:calc(-1 * var(--m))}
  .cafe-info{grid-column:9/13}
}
.cafe-now{font:300 clamp(1.8rem,3vw,2.6rem)/1.08 var(--serif);color:var(--ink);letter-spacing:-.02em}
.cafe-addr{margin-top:.6rem;color:var(--ink2)}
.hours{width:100%;border-collapse:collapse;margin-top:1.8rem}
.hours th,.hours td{padding:.55rem 0;border-bottom:1px solid var(--line);font:400 .78rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--muted)}
.hours td{text-align:right;color:var(--ink)}
.hours tr:first-child th,.hours tr:first-child td{border-top:1px solid var(--line)}
.hours tr.is-today th,.hours tr.is-today td{color:var(--ink);font-weight:400}
.hours tr.is-today th::before{content:"";display:inline-block;width:14px;height:1px;background:var(--acc);vertical-align:middle;margin-right:.5rem}
.facts{margin-top:1.4rem;color:var(--muted)}
.cafe-act{display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin-top:1.8rem}

/* beans (night) */
.beans{padding:0 0 clamp(4.5rem,9vw,8rem)}
.beans .plate{padding-top:0}
.beans-head{grid-column:1/-1;margin:clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,5vw,3.5rem)}
.beans-head p{margin-top:1.3rem;max-width:46ch}
@media (min-width:1024px){.beans-head{grid-column:1/9}}
.bean{grid-column:1/-1;display:grid;gap:1.4rem;padding:2rem 0;border-top:1px solid var(--n-line2)}
.bean:last-of-type{border-bottom:1px solid var(--n-line2)}
.bean-name .d3{color:var(--n-ink)}
.bean-name .mono{display:block;margin-top:.6rem;color:var(--acc-lt)}
.bean-name p{margin-top:.8rem;font-size:.95rem;max-width:34ch}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem;border-top:1px solid var(--n-line)}
.spec div{padding:.6rem 0;border-bottom:1px solid var(--n-line)}
.spec dt{font:400 .66rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-muted)}
.spec dd{font:400 .84rem/1.5 var(--mono);color:var(--n-ink);margin-top:.15rem}
.bean-buy{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem}
.bean-buy .price{color:var(--n-ink);font-size:1rem;min-width:4.8rem}
.bean-buy select{width:auto;min-width:9.5rem}
@media (min-width:1024px){
  .bean{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .bean-name{grid-column:1/5}.spec{grid-column:5/10;grid-template-columns:repeat(3,1fr)}.bean-buy{grid-column:10/13;justify-content:flex-end}
}
.club{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;margin-top:2.4rem}
.club p{max-width:62ch}
.club b{color:var(--n-ink);font-weight:600}

/* gift */
.gift{padding:clamp(4.5rem,9vw,8rem) 0}
.gift .grid{row-gap:3rem;align-items:center}
.gift-vis{grid-column:1/-1}
.gift-form{grid-column:1/-1}
@media (min-width:1024px){.gift-vis{grid-column:1/6}.gift-form{grid-column:7/13}}
.gcard{position:relative;aspect-ratio:1.586;max-width:520px;background:var(--night);color:var(--n-ink);padding:clamp(1.2rem,3vw,2rem);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-shadow:0 50px 90px -50px rgba(27,20,17,.7);transform:rotate(-2deg)}
.gcard::after{content:"";position:absolute;right:-12%;bottom:-38%;width:62%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(240,231,219,.18)}
.gc-top{display:flex;justify-content:space-between;align-items:center}
.gc-top b{font:400 1.4rem/1 var(--serif);letter-spacing:-.02em}
.gc-top svg{width:26px;height:26px;color:var(--acc-lt)}
.gc-amt{font:300 clamp(3.2rem,8vw,5.2rem)/1 var(--serif);letter-spacing:-.04em;position:relative;z-index:1}
.gc-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:end;gap:1rem}
.gc-to{font-size:.92rem;line-height:1.4;min-width:0;flex:1;overflow:hidden}
.gc-to span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-to .msg{color:var(--n-muted);font-size:.84rem}
.gc-top .mono{color:var(--n-muted);white-space:nowrap;margin-left:auto;margin-right:.8rem}
.gift-form > p{margin:1.3rem 0 2rem;max-width:44ch;font-size:1.02rem}
.gfield{margin-bottom:1.5rem}
.glbl{display:block;font:400 .72rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.grow{display:grid;gap:0 1.5rem}
@media (min-width:560px){.grow{grid-template-columns:1fr 1fr}}
textarea.field-line{min-height:84px;resize:vertical}
.gift-form .preview{text-align:left;margin-top:.8rem}

/* story + reviews */
.story{padding:0 0 clamp(4.5rem,9vw,8rem)}
.story .grid{row-gap:2.5rem}
.story-ph{grid-column:1/-1}
.story-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story-ph figcaption{margin-top:.7rem;color:var(--muted)}
.story-copy{grid-column:1/-1}
@media (min-width:1024px){.story-ph{grid-column:1/6}.story-copy{grid-column:7/13;align-self:center}}
.story-copy .body{margin-top:1.6rem;max-width:50ch}
.story-copy .body p+p{margin-top:1rem}
.quotes{margin-top:2.6rem;border-top:1px solid var(--line)}
.quote{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.quote p{font:300 1.35rem/1.35 var(--serif);color:var(--ink);letter-spacing:-.01em}
.quote footer{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;color:var(--muted)}

/* instagram */
.ig-sec{padding-bottom:clamp(4rem,7vw,6rem)}
.ig-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;padding:0 var(--m) 1.2rem}
.ig-head .mono{color:var(--ink)}
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig a{display:block;overflow:hidden}
.ig img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .9s var(--ease),filter .6s}
.ig a:hover img{transform:scale(1.05)}
@media (min-width:768px){.ig{grid-template-columns:repeat(6,1fr)}}

/* footer */
.foot{padding:clamp(4rem,7vw,6rem) 0 6rem}
.foot-big{font:300 clamp(2.4rem,6vw,5.4rem)/1 var(--serif);color:var(--n-ink);letter-spacing:-.03em;margin-bottom:clamp(2.5rem,5vw,4rem)}
.foot-big span{display:block}
.foot-grid{display:grid;gap:2rem;padding-top:2rem;border-top:1px solid var(--n-line)}
@media (min-width:768px){.foot-grid{grid-template-columns:repeat(4,1fr)}}
.foot h2{color:var(--n-ink);margin-bottom:.8rem}
.foot a{color:var(--n-ink);text-decoration:none}
.foot a:hover,.foot a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.foot address{font-style:normal;line-height:1.75}
.foot li{padding:.15rem 0}
.fine{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--n-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;font-size:.86rem}

/* concept badge */
.oh-concept-badge{position:fixed;left:12px;bottom:12px;z-index:80;max-width:calc(100vw - 24px);padding:.5rem .75rem;background:var(--ink);color:var(--paper);font:400 .66rem/1.3 var(--mono);letter-spacing:.04em;text-decoration:none;border:1px solid rgba(240,231,219,.2)}
.oh-concept-badge:hover,.oh-concept-badge:focus-visible{background:var(--acc)}
@media (min-width:768px){.oh-concept-badge{left:auto;right:16px;bottom:16px}}

/* reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .reveal,.js .hero-ph img{opacity:1;transform:none;clip-path:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}