:root{
  --roast:#3A2415; --ground:#6B4E3A; --sun:#F2B857; --ember:#C8792F; --glow:#FFF3D6; --milk:#FFFCF5; --leaf:#3F5B38;
  --line:rgba(58,36,21,.16);
  --wrap:1240px; --gutter:clamp(20px,4vw,48px);
  --scene-w:max(100%,1000px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--milk);color:var(--roast);font:400 17px/1.6 Inter,system-ui,sans-serif;font-feature-settings:"cv11","ss03"}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(2.2rem,5vw,4rem)}
h3{font-size:1.3rem;letter-spacing:-.015em;line-height:1.2;font-weight:700}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.prose{max-width:58ch}
.prose p+p{margin-top:1em}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:50;background:#fff;padding:8px 12px}

/* header */
.site-head{position:absolute;inset:0 0 auto;z-index:20}
.site-head.solid{position:relative;background:var(--sun)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand img{width:92px}
.nav{display:flex;align-items:center;gap:30px;font-weight:600;font-size:16px}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--roast)}
.nav a.btn{border:0;padding:12px 20px}
.menu-btn{display:none;background:none;border:2px solid var(--roast);border-radius:8px;color:var(--roast);font:600 15px Inter,sans-serif;padding:8px 14px;cursor:pointer}

.btn{display:inline-block;background:var(--roast);color:var(--glow);padding:15px 26px;border-radius:999px;font-weight:700;text-decoration:none;transition:background .15s}
.btn:hover{background:#21130a}
.btn.ghost{background:none;color:var(--roast);box-shadow:inset 0 0 0 2px var(--roast)}
.btn.ghost:hover{background:rgba(58,36,21,.1)}
.btn.light{background:var(--sun);color:var(--roast)}
.btn.light:hover{background:var(--glow)}
.link{font-weight:700;text-underline-offset:4px;text-decoration-thickness:2px}

/* hero: the logo's sunrise at full size */
.hero{position:relative;overflow:hidden;min-height:min(100svh,920px);display:flex;flex-direction:column;
  background:radial-gradient(70vmax 52vmax at 50% 100%,#FFFDF2 0,#FFEBB8 30%,#F7CD79 58%,var(--sun) 100%)}
.hero-copy{position:relative;z-index:2;text-align:center;padding:clamp(128px,17vh,176px) var(--gutter) 28px;max-width:1160px;margin:0 auto}
.hero h1{font-size:clamp(2.9rem,8.6vw,7.4rem);letter-spacing:-.045em;line-height:.96;font-weight:800}
.hero .sub{font-size:clamp(1.05rem,1.8vw,1.3rem);margin:22px auto 0;max-width:38em}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.scene{display:block;position:relative;width:var(--scene-w);max-width:none;left:50%;transform:translateX(-50%);height:auto;margin-top:auto}
@media (prefers-reduced-motion:no-preference){
  .hero{animation:dawn 1.8s ease-out both}
  @keyframes dawn{from{background-size:100% 100%;filter:saturate(.75) brightness(.86)}to{filter:none}}
}

/* the road carries on down the page */
.ground{position:relative;background:var(--ground);color:var(--glow);overflow:hidden;padding-bottom:clamp(64px,8vw,120px)}
.ground .road{position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--scene-w);max-width:none}
.ground .wrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);padding-top:clamp(72px,9vw,128px);align-items:start}
.ground p{color:#F6E6C8}
.sigs{list-style:none;margin:36px 0 0;padding:0}
.sigs li{padding:16px 0;border-top:1px solid rgba(255,243,214,.28)}
.sigs b{display:block;font-size:1.2rem;color:var(--glow)}
.photo-stack{position:relative}
.photo-stack img{border-radius:6px}
.photo-stack .a{width:82%;margin-left:auto}
.photo-stack .b{width:50%;margin-top:-30%;position:relative;border:8px solid var(--ground)}

/* menu teaser */
.band{padding-block:clamp(64px,9vw,128px)}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.cats{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(180px,20vw,270px);gap:14px}
.cat{position:relative;overflow:hidden;border-radius:6px;display:block;text-decoration:none;color:#fff;background:var(--roast)}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.cat:hover img{transform:scale(1.03)}
.cat span{position:absolute;inset:auto 0 0;padding:44px 20px 16px;font-weight:800;font-size:clamp(1.25rem,2.2vw,1.8rem);letter-spacing:-.02em;line-height:1.1;background:linear-gradient(transparent,rgba(30,16,8,.74))}
.cat:nth-child(1){grid-column:span 5;grid-row:span 2}
.cat:nth-child(2){grid-column:span 4}
.cat:nth-child(3){grid-column:span 3;grid-row:span 2}
.cat:nth-child(4){grid-column:span 4}

/* night */
.night{position:relative;background:#1d120b;color:var(--glow);overflow:hidden}
.night>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.night::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,18,11,.94) 0,rgba(29,18,11,.8) 50%,rgba(29,18,11,.25) 100%)}
.night .wrap{z-index:1}
.night .wrap{position:relative;padding-block:clamp(90px,13vw,180px)}
.night h2{max-width:13em}
.night .prose{margin-top:20px}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;max-width:900px}
.ways div{border-top:2px solid var(--sun);padding-top:12px}
.ways p{font-size:16px}

/* coffee */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.split img{border-radius:6px}
.sun-band{background:var(--sun)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:26px 0 0;font-size:16px}
.facts dt{font-weight:700}.facts dd{margin:0}

/* community */
.community{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:end}
.press{list-style:none;padding:0;margin:24px 0 0}
.press li{padding:12px 0;border-top:1px solid var(--line)}
.next-up{background:var(--leaf);color:#fff;border-radius:6px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(48px,6vw,80px)}
.next-up img{width:100%;height:100%;object-fit:cover}
.next-up div{padding:clamp(24px,4vw,48px);align-self:center}
.next-up .btn{margin-top:18px}

/* page head */
.page-head{background:var(--sun);padding-block:clamp(40px,6vw,72px) clamp(36px,5vw,60px)}
.page-head h1{font-size:clamp(2.7rem,7vw,5.4rem);letter-spacing:-.04em}
.page-head p{margin-top:14px;max-width:44em;font-size:1.12rem}

/* menu */
.menu-bar{position:sticky;top:0;z-index:10;background:var(--milk);border-bottom:1px solid var(--line)}
.menu-bar .wrap{display:flex;gap:18px;align-items:center;padding-block:10px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;padding:3px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font:600 15px Inter,sans-serif;color:var(--roast);text-decoration:none;background:none;border:1.5px solid var(--line);padding:7px 13px;border-radius:999px;cursor:pointer}
.chip:hover{border-color:var(--roast)}
.chip[aria-pressed=true]{background:var(--roast);color:var(--glow);border-color:var(--roast)}
.search{flex:none;width:210px;font:400 16px Inter,sans-serif;color:var(--roast);padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.menu-sec{padding-block:clamp(40px,5vw,64px);border-bottom:1px solid var(--line);scroll-margin-top:64px}
.menu-sec .top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(24px,5vw,64px)}
.menu-sec h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.menu-sec .intro{font-size:16px;margin-top:10px}
.menu-sec .sizes{font-size:15px;font-weight:600;margin-top:10px;color:var(--ground)}
.menu-sec img{margin-top:18px;border-radius:6px;aspect-ratio:4/3;object-fit:cover;width:100%}
.items{list-style:none;margin:0;padding:0;columns:2;column-gap:44px}
.item{break-inside:avoid;padding:11px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px}
.item b{font-weight:600}
.item small{display:block;font-size:14px;color:var(--ground);line-height:1.4}
.item .pr{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.tag{display:inline-block;font-size:12.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--glow);color:#7a4610;margin-left:6px;vertical-align:1px}
.note{background:var(--glow);padding:18px 22px;border-radius:6px;font-size:15.5px;margin-block:32px}
.empty{padding:48px 0;font-weight:600}

/* locations */
.loc-tools{background:var(--milk);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.loc-tools .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:12px}
.toggle{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;cursor:pointer}
.toggle input{accent-color:var(--roast);width:18px;height:18px}
.menu-bar .chips{flex-wrap:wrap;overflow:visible}
.menu-bar .wrap{align-items:flex-start}
.count{margin-left:auto;font-size:15px;font-weight:600}
.locs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;padding-block:32px 72px}
.loc{padding:22px 0;border-top:1px solid var(--line)}
.loc h3{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dt{font-size:12.5px;font-weight:700;letter-spacing:0;background:var(--leaf);color:#fff;padding:2px 9px;border-radius:999px}
.loc address{font-style:normal;margin-top:6px;font-size:16px}
.loc .hrs{margin-top:8px;font-size:15px;color:var(--ground)}
.loc .acts{margin-top:10px;display:flex;gap:16px;font-size:15.5px}
.loc[hidden]{display:none}

/* story */
.timeline{list-style:none;margin:0;padding:0;max-width:820px}
.timeline li{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.timeline b{font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:clamp(180px,22vw,300px);object-fit:cover;border-radius:6px}

/* footer */
.foot{background:var(--roast);color:var(--glow);padding-block:64px 32px;font-size:16px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:36px}
.foot img{width:120px}
.foot h3{font-size:16px;margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:3px 0}
.foot a{text-underline-offset:3px}
.foot .slogan{margin-top:14px;max-width:24em}
.fine{margin-top:44px;padding-top:18px;border-top:1px solid rgba(255,243,214,.2);font-size:14px;color:#dcc9a6}

@media (max-width:980px){
  .locs{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .items{columns:1}
}
@media (max-width:760px){
  body{font-size:16px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:4px;background:var(--milk);padding:12px;border-radius:10px;box-shadow:0 12px 30px rgba(58,36,21,.25);z-index:30}
  .nav.open{display:flex}
  .nav a{padding:10px}
  .nav a.btn{text-align:center}
  .site-head .head-in{position:relative}
  .brand img{width:72px}
  .ground .wrap{padding-top:170px}
  .hero-copy{padding-top:112px}
  .ground .wrap,.split,.community,.next-up,.menu-sec .top{grid-template-columns:minmax(0,1fr)}
  .cats{grid-template-columns:1fr 1fr;grid-auto-rows:190px}
  .cat:nth-child(n){grid-column:span 1;grid-row:span 1}
  .cat:nth-child(1),.cat:nth-child(4){grid-column:span 2}
  .ways{grid-template-columns:1fr}
  .locs{grid-template-columns:1fr}
  .menu-bar .chips{flex-wrap:nowrap;overflow-x:auto}
  .menu-bar .wrap{flex-direction:column;align-items:stretch;gap:8px}
  .search{width:100%}
  .gallery{grid-template-columns:1fr 1fr}
  .timeline li{grid-template-columns:72px 1fr;gap:12px}
  .count{margin-left:0;width:100%}
  .loc-tools{position:static}
  .menu-sec img{max-height:220px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}