:root{--gutter:clamp(16px,4vw,48px);--max:1200px;--stripes:linear-gradient(180deg,var(--c-marigold) 0 5px,transparent 5px 8px,var(--c-orange) 8px 13px,transparent 13px 16px,var(--c-tomato) 16px 21px);}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--c-paper);color:var(--c-ink);font:400 17px/1.6 var(--f-body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:500;line-height:1.08;letter-spacing:-.012em;margin:0;text-wrap:balance}
h3{line-height:1.2}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font:500 12.5px/1.2 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--c-copper);margin:0 0 14px}
.sec{padding:clamp(72px,9vw,120px) 0}
.sec h2{font-size:clamp(32px,4.4vw,52px)}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--c-muted);max-width:52ch;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--f-body);text-decoration:none;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-cta,.btn-red{background:var(--c-cta);color:#fff}
.btn-cta:hover,.btn-red:hover{background:var(--c-cta-d)}
.btn-line{border:1.5px solid var(--c-ink);color:var(--c-ink)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* label + header */
.preview-bar{background:var(--c-ink);color:#E6E2DA;font:500 12.5px/1.45 var(--f-body);padding:9px var(--gutter);text-align:center}
.preview-bar a{color:#fff;font-weight:700;white-space:nowrap}
.preview-bar p{margin:0 auto;max-width:1100px}
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.mark{text-decoration:none;display:flex;align-items:center;gap:12px;line-height:1}
.mark i{width:6px;height:30px;background:linear-gradient(90deg,var(--c-marigold) 0 2px,var(--c-orange) 2px 4px,var(--c-tomato) 4px 6px)}
.mark b{font:500 20px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:30px}
.nav a.lnk{font:500 16px/1 var(--f-display);letter-spacing:.05em;text-decoration:none}
.nav a.lnk:hover{color:var(--c-tomato)}
.top .btn{min-height:44px;padding:0 18px;font-size:15px}

/* 1. hero: the case, full bleed */
.hero{position:relative;color:#fff;background:var(--c-slate-d);overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:21px;background:var(--stripes);z-index:3}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%}
.hero picture img{object-fit:cover;object-position:50% 55%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(24,32,33,.78) 0%,rgba(24,32,33,.5) 45%,rgba(24,32,33,0) 75%),linear-gradient(0deg,rgba(24,32,33,.9) 0%,rgba(24,32,33,.6) 30%,rgba(24,32,33,.12) 62%,rgba(24,32,33,.05) 100%)}
.hero .wrap{position:relative;z-index:2;min-height:min(82vh,760px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:80px;padding-bottom:150px}
.hero h1{font:400 clamp(46px,7.4vw,104px)/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero .sub{font:400 clamp(13px,1.3vw,16px)/1.2 var(--f-display);letter-spacing:.32em;text-transform:uppercase;color:#F3D9B8;margin:14px 0 22px}
.tagline{font:400 clamp(18px,1.8vw,23px)/1.45 var(--f-display);max-width:40ch;margin:0 0 22px;color:#fff}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.chip{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 16px 9px 12px;font:600 14.5px/1 var(--f-body);color:#fff;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chip .st{color:var(--c-marigold)}
.open{font:600 14.5px/1.3 var(--f-body);color:#fff;display:flex;align-items:center;gap:8px}
.open::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-marigold)}
.hero .ctas{margin-top:22px}

/* 2. the case: cards pulled up over the hero */
.case{background:var(--c-tile) var(--hex);background-size:92px 32px;padding:0 0 clamp(72px,9vw,112px)}
.cards{list-style:none;margin:-104px 0 0;padding:0;position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
.card{margin:0;display:flex;flex-direction:column}
.card .ph{border-radius:3px;overflow:hidden;background:var(--c-tile-2);box-shadow:0 22px 36px -24px rgba(20,18,15,.6)}
.card .ph img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s ease}
.card:hover .ph img{transform:scale(1.03)}
.tag{position:relative;align-self:center;width:min(86%,270px);margin:-30px auto 0;background:#fff;border:3px solid var(--c-ink);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--c-ink);padding:14px 16px 13px;text-align:center;z-index:1}
.tag h3{font:500 15px/1.3 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.tag::after{content:"";position:absolute;left:50%;bottom:-17px;width:8px;height:14px;transform:translateX(-50%);background:linear-gradient(90deg,#8A4E2C,#D39A6E 45%,#8A4E2C);border-radius:0 0 3px 3px}
.case-foot{margin:64px auto 0;text-align:center;max-width:640px}
.case-foot h2{font-size:clamp(28px,3.4vw,40px)}
.case-foot p{color:var(--c-muted);margin:14px 0 0}

/* 3. coffee + pre-orders, asymmetric pair */
.pair{display:grid;grid-template-columns:7fr 5fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.coffee{position:relative;background:var(--c-slate);color:#E3E6E3;border-radius:3px;padding:clamp(28px,4vw,52px);min-height:440px;overflow:visible}
.coffee h2{max-width:calc(100% - 190px)}
.coffee::before{content:"";position:absolute;left:0;right:0;top:0;height:21px;background:var(--stripes);border-radius:3px 3px 0 0}
.coffee .eyebrow{color:var(--c-copper-l)}
.coffee h2{color:#fff}
.coffee .lede{color:#C3CAC8}
.cup{position:absolute;right:28px;top:-64px;width:clamp(180px,17vw,220px);margin:0}
.coffee-wrap{padding-top:64px;display:flex;flex-direction:column}.coffee{flex:1;padding-top:calc(21px + clamp(28px,4vw,52px))}.coffee h2,.pre h2{font-size:clamp(30px,3.2vw,42px)}
.cup img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;box-shadow:0 30px 60px -24px rgba(0,0,0,.65);border:6px solid var(--c-paper)}
.drinks{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;max-width:420px}
.drinks li{padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.18);font:400 17px/1.3 var(--f-display);color:#F1F2EF}
.pre{margin-top:64px;background:#fff;border:1px solid var(--c-rule);border-radius:3px;overflow:hidden;position:relative}
.pre::before{content:"";display:block;height:21px;background:var(--stripes)}
.pre .in{padding:clamp(28px,4vw,52px)}
.pre-list{list-style:none;margin:20px 0 24px;padding:0}
.pre-list li{padding:12px 0;border-top:1px solid var(--c-rule);font:500 18px/1.3 var(--f-display);display:flex;gap:14px;align-items:baseline}
.pre-list li span{font:400 15px/1 var(--f-display);color:var(--c-cta)}
.pre-list li:last-child{border-bottom:1px solid var(--c-rule)}
.pre .note{font-size:14.5px;color:var(--c-muted);margin:14px 0 0}
.pre-thumb{display:flex;gap:16px;align-items:center;margin-top:22px}
.pre-thumb img{width:84px;height:84px;object-fit:cover;border-radius:50%}
.pre-thumb small{font-size:13.5px;color:var(--c-muted);line-height:1.4}

/* 4. our shop: photo strip */
.shop{background:var(--c-tile)}
.shop-head{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,5vw,72px);align-items:end}
.shop-head .lede{margin:0}
.strip{margin-top:44px;display:grid;grid-template-columns:5fr 4fr 4fr;gap:14px;padding:0 var(--gutter);max-width:calc(var(--max) + 2*var(--gutter) + 160px);margin-left:auto;margin-right:auto}
.strip figure{margin:0}
.strip img{width:100%;height:clamp(300px,34vw,480px);object-fit:cover;border-radius:3px}
.strip figcaption{font-size:13px;color:var(--c-muted);margin-top:10px}

/* 5. reviews */
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.score{font:400 clamp(20px,2vw,24px)/1.2 var(--f-display);text-decoration:none;color:var(--c-ink);display:flex;align-items:center;gap:10px}
.score .st{color:var(--c-cta);letter-spacing:2px}
.score u{font:500 15px/1 var(--f-body);text-decoration:underline;color:var(--c-muted)}
.quotes{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.q{margin:0;padding-top:26px;border-top:3px solid var(--c-orange)}
.q:nth-child(2){border-color:var(--c-marigold)}
.q:nth-child(3){border-color:var(--c-tomato)}
.q blockquote{margin:0 0 18px;font:400 clamp(20px,1.9vw,24px)/1.38 var(--f-display)}
.q footer{font-size:14px;color:var(--c-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.q footer b{color:var(--c-ink)}
.q .st{color:var(--c-cta);letter-spacing:1px}

/* 6. visit = closer */
.visit{background:var(--c-slate);color:#E3E6E3;position:relative}
.visit::before{content:"";position:absolute;left:0;right:0;top:0;height:21px;background:var(--stripes)}
.visit-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(36px,6vw,88px);align-items:start}
.visit .eyebrow{color:var(--c-copper-l)}
.visit h2{color:#fff;font-size:clamp(36px,5vw,60px)}
.addr{font:400 clamp(19px,1.8vw,22px)/1.45 var(--f-display);color:#fff;margin:20px 0 6px}
.visit .lede{color:#C3CAC8;margin-top:0}
.visit .ctas{margin-top:26px}
.visit .btn-line{border-color:rgba(255,255,255,.75);color:#fff}
.answers{border-top:1px solid rgba(255,255,255,.16)}
.answers div{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.answers b{display:block;font:500 18px/1.3 var(--f-display);color:#fff;margin-bottom:4px}
.answers p{margin:0;color:#C3CAC8;font-size:16px}
.answers a{color:#fff}

footer.foot{background:var(--c-slate-d);color:#A7B0AE;font-size:14px;border-top:1px solid rgba(255,255,255,.08)}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.foot b{color:#fff;font-family:var(--f-display);font-weight:500;letter-spacing:.06em}
.foot a{color:#E3E6E3}
.aboutp{background:#151C1D;color:#98A09E;font-size:13.5px;line-height:1.6}
.aboutp .wrap{padding-top:32px;padding-bottom:36px;max-width:820px}
.aboutp h2{font:600 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#D3D8D6;margin-bottom:14px}
.aboutp a{color:#E3E6E3}
.callbar{display:none}

@media (max-width:980px){
  .nav a.lnk{display:none}
  .pair,.shop-head,.visit-grid{grid-template-columns:1fr}
  .pre{margin-top:0}
  .quotes{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16.5px;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .preview-bar{font-size:11px;padding:7px 14px;text-align:left;line-height:1.4}
  .top .wrap{height:56px}
  .mark b{font-size:17px;letter-spacing:.14em}
  .mark i{height:26px}
  .top .btn .full{display:none}
  .hero::after{height:13px;background:linear-gradient(180deg,var(--c-marigold) 0 3px,transparent 3px 5px,var(--c-orange) 5px 8px,transparent 8px 10px,var(--c-tomato) 10px 13px)}
  .hero .wrap{min-height:0;height:calc(100svh - 150px);max-height:600px;min-height:500px;padding-top:40px;padding-bottom:84px}
  .hero::before{background:linear-gradient(0deg,rgba(24,32,33,.95) 0%,rgba(24,32,33,.82) 42%,rgba(24,32,33,.25) 72%,rgba(24,32,33,.08) 100%)}
  .hero h1{font-size:clamp(38px,11vw,46px);letter-spacing:.1em}
  .hero .sub{font-size:11.5px;letter-spacing:.24em;margin:10px 0 14px}
  .tagline{font-size:19px;margin-bottom:14px}
  .chip{font-size:13.5px;padding:7px 14px 7px 10px}
  .open{font-size:13.5px}
  .hero .ctas{margin-top:16px}
  .hero .ctas .btn{flex:1 1 auto;min-height:50px;padding:0 16px}
  .hero .ctas .btn-ghost{display:none}
  .sec{padding:64px 0}
  .case{padding-bottom:64px}
  .cards{grid-template-columns:1fr 1fr;gap:28px 12px;margin-top:-56px}
  .tag{width:92%;margin-top:-22px;padding:10px 8px 9px;border-width:2px;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--c-ink)}
  .tag h3{font-size:12.5px;letter-spacing:.08em}
  .tag::after{bottom:-14px;height:11px;width:7px}
  .case-foot{margin-top:48px;text-align:left}
  .coffee{padding:49px 22px 30px;min-height:0;padding-right:22px}
  .coffee{display:flex;flex-direction:column}
  .coffee h2{max-width:none}
  .cup{position:relative;right:auto;top:auto;order:-1;width:170px;margin:-92px 0 14px auto}
  .coffee-wrap{padding-top:70px}
  .pre .in{padding:28px 22px 30px}
  .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:10px;padding:0;scrollbar-width:none}
  .strip figure:first-child{margin-left:16px}
  .strip::after{content:"";flex:0 0 6px}
  .strip::-webkit-scrollbar{display:none}
  .strip figure{flex:0 0 78%;scroll-snap-align:start}
  .strip img{height:340px}
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(31,42,43,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.08)}
  .callbar .btn{min-height:56px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.case .wrap{display:flex;flex-direction:column}
.cards{order:-1}
.chip u{text-decoration:none;opacity:.85;font-weight:500}
.card .ph picture,.cup picture,.strip picture{display:block}
.pre-thumb picture{flex:none}
.cup img{height:auto}
.visit .addr br{display:block}
.sec{content-visibility:auto;contain-intrinsic-size:auto 800px}
:focus-visible{outline:3px solid var(--c-cta);outline-offset:3px}
.hero :focus-visible,.coffee :focus-visible,.visit :focus-visible,.foot :focus-visible,.aboutp :focus-visible,.callbar :focus-visible{outline-color:var(--c-marigold)}
.strip:focus-visible{outline:3px solid var(--c-cta);outline-offset:4px}
.notfound{padding:120px var(--gutter);text-align:center}
.notfound h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:24px}
@media print{.callbar,.nav{display:none}.preview-bar{display:block}.hero .wrap{min-height:0}}

:root{--c-paper:#FFFFFF;--c-tile:#F5F3EF;--c-tile-2:#ECE8E1;--c-slate:#2B3839;--c-slate-d:#1F2A2B;--c-ink:#1C2122;--c-muted:#566062;--c-rule:#E1DCD3;--c-copper:#9A5A33;--c-copper-l:#D39A6E;--c-orange:#E8792B;--c-marigold:#F2B441;--c-tomato:#D4472B;--c-cta:#B44C17;--c-cta-d:#9E4213;--f-display:"Jost W","Jost Fallback",system-ui,sans-serif;--f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='32' viewBox='0 0 92 32'%3E%3Cg fill='none' stroke='%23E2DDD4' stroke-width='1.2'%3E%3Cpath d='M0 16 10 0h36l10 16-10 16H10z'/%3E%3Cpath d='M56 16h36M46 0l10 16M46 32l10-16'/%3E%3C/g%3E%3C/svg%3E")}
@font-face{font-family:"Jost W";src:url(../fonts/jost-latin.a1bc49db.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Jost Fallback";src:local("Avenir Next"),local("Futura"),local("Arial");size-adjust:98%;ascent-override:104%;descent-override:30%}
.hero picture img{object-position:50% 40%}
@media (max-width:720px){.hero picture img{object-position:40% 50%}.tagline .tl-3{display:none}}

.preview-bar{background:#1C2122;color:#E6E2DA}
.ph-hero-case{background-color:#987848}
.ph-case-truckee-bar{background-color:#d8c8b8}
.ph-case-donut-holes{background-color:#c8c8c8}
.ph-case-pull-apart{background-color:#181818}
.ph-case-raspberry-cake{background-color:#181818}
.ph-case-brioche{background-color:#b8d8f8}
.ph-case-banana-muffin{background-color:#f8f8f8}
.ph-coffee-latte{background-color:#d8c8a8}
.ph-pre-seasonal{background-color:#382818}
.ph-shop-counter{background-color:#080808}
.ph-shop-interior{background-color:#181818}
.ph-shop-storefront{background-color:#181828}