:root {
  --cream: #f7f0e1;
  --cream-2: #efe5cf;
  --chalk: #1c2623;
  --chalk-2: #2a3833;
  --pink: #f4a9bb;
  --pink-soft: #fbd9e1;
  --butter: #f2c14e;
  --ink: #1c2623;
  --muted: #5d6a64;
  --display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { font-family: var(--body); color: var(--ink); background: var(--cream); font-size: 1.05rem; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- Header ---------- */
.site-header { z-index: 1030; box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.utility { background: var(--butter); color: var(--chalk); font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; padding: .35rem 0; }
.utility a { text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.main-nav { background: var(--chalk); padding: .55rem 0; }
.navbar-brand { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--cream); letter-spacing: -.01em; }
.navbar-brand span { color: var(--pink); }
.navbar-brand:hover { color: var(--cream); }
.main-nav .nav-link { color: var(--cream); font-weight: 500; padding: .5rem .8rem; }
.main-nav .nav-link:hover { color: var(--butter); }
.navbar-toggler { border-color: rgba(247,240,225,.5); }
.navbar-toggler-icon { filter: invert(1); }
.btn-order { background: var(--pink); color: var(--chalk); font-weight: 700; border-radius: 999px; padding: .5rem 1.2rem; }
.btn-order:hover { background: var(--butter); color: var(--chalk); }
@media (max-width: 991.98px) { .main-nav .nav-link { padding: .6rem 0; } }

/* ---------- Buttons ---------- */
.btn-butter { background: var(--butter); color: var(--chalk); font-weight: 700; border-radius: 999px; padding: .75rem 1.7rem; border: 0; }
.btn-butter:hover { background: var(--pink); color: var(--chalk); }
.btn-outline-cream { border: 2px solid var(--cream); color: var(--cream); font-weight: 700; border-radius: 999px; padding: .7rem 1.6rem; }
.btn-outline-cream:hover { background: var(--cream); color: var(--chalk); }
.btn-chalk { background: var(--chalk); color: var(--cream); font-weight: 700; border-radius: 999px; padding: .7rem 1.6rem; white-space: nowrap; }
.btn-chalk:hover { background: var(--pink); color: var(--chalk); }

/* ---------- Type helpers ---------- */
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--pink); margin-bottom: 1rem; }
.eyebrow.dark { color: var(--chalk); }
.eyebrow.butter { color: var(--butter); }
.section:not(.donuts):not(.order) .eyebrow:not(.dark):not(.butter) { color: #b3476a; }
.display-h { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 1.5rem; }
.display-h.light { color: var(--cream); }
.lead-sm { font-size: 1.1rem; color: var(--muted); }
.sub-h { font-family: var(--display); font-weight: 800; font-size: 1.35rem; margin: 1.8rem 0 .6rem; }
.sub-h.first { margin-top: 0; }
.section { overflow-x: clip; padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }

/* ---------- Hero ---------- */
.hero { background: var(--chalk); }
.hero-panel { position: relative; background: var(--chalk); display: flex; align-items: center; min-height: 640px; overflow: hidden; }
.hero-copy { padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem); max-width: 760px; margin-left: auto; position: relative; z-index: 2; }
.hero .eyebrow { color: var(--butter); text-shadow: 0 0 3px rgba(0,0,0,1), 0 1px 12px rgba(0,0,0,.95); }
.hero-title { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 7.2vw, 6.4rem); line-height: .94; letter-spacing: -.035em; color: var(--cream); text-shadow: 0 0 4px rgba(0,0,0,.6), 0 2px 20px rgba(0,0,0,.5); margin-bottom: 1.5rem; text-transform: uppercase; }
.hero-title em { font-style: normal; color: var(--pink); }
.hero-sub { font-size: 1.2rem; color: #e9e1cf; max-width: 34em; margin-bottom: 2rem; text-shadow: 0 0 3px rgba(0,0,0,.8), 0 2px 16px rgba(0,0,0,.6); }
.seal { position: absolute; right: 28px; bottom: 24px; width: 130px; height: 150px; transform: rotate(-12deg); z-index: 1; }
.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; min-height: 640px; }
.tile { overflow: hidden; border-left: 6px solid var(--chalk); border-top: 6px solid var(--chalk); }
.tile:nth-child(-n+2) { border-top: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.t1 { background: var(--pink); }
@media (max-width: 991.98px) {
  .hero-panel { min-height: 0; }
  .hero-copy { margin: 0; max-width: none; }
  .hero-tiles { min-height: 0; grid-template-rows: 1fr 1fr; }
  .tile { aspect-ratio: 4 / 3; border-left: 0; }
  .tile:nth-child(even) { border-left: 6px solid var(--chalk); }
  .seal { width: 96px; height: 96px; right: 14px; bottom: 14px; }
}

/* ---------- Ticker ---------- */
.ticker { background: var(--pink); color: var(--chalk); overflow: hidden; white-space: nowrap; border-top: 2px solid var(--chalk); border-bottom: 2px solid var(--chalk); }
.ticker-track { display: inline-flex; animation: tick 45s linear infinite; padding: .7rem 0; }
.ticker-track span { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; padding: 0 1.4rem; }
.ticker-track span::after { content: '\2615'; margin-left: 2.8rem; opacity: .7; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker { overflow-x: auto; } }

/* ---------- Order ---------- */
.order { background: var(--cream); }
.order-card { display: block; text-decoration: none; background: var(--chalk); color: var(--cream); border-radius: 22px; padding: 2rem; height: 100%; transition: transform .2s, background .2s; position: relative; overflow: hidden; }
.order-card:hover { transform: translateY(-4px); background: var(--chalk-2); color: var(--cream); }
.order-card i { font-size: 1.7rem; color: var(--butter); }
.order-card h3 { font-family: var(--display); font-weight: 800; font-size: 2.2rem; margin: .5rem 0; }
.order-card p { color: #d9d2bf; margin-bottom: 1.2rem; }
.order-card .go { font-weight: 700; color: var(--pink); }
.order-wide { display: flex; align-items: center; gap: 1.2rem; text-decoration: none; border-radius: 22px; padding: 1.4rem 1.8rem; height: 100%; transition: transform .2s; }
.order-wide:hover { transform: translateY(-3px); }
.order-wide i { font-size: 2rem; }
.wide-a { background: var(--butter); color: var(--chalk); }
.wide-b { background: var(--pink); color: var(--chalk); }
.thanks-note { text-align: center; font-family: var(--mono); font-size: .85rem; color: var(--muted); margin: 2.5rem 0 0; }

/* ---------- Pouring ---------- */
.pouring { background: var(--cream-2); }
.sticky-photo { position: sticky; top: 130px; border-radius: 22px; overflow: hidden; border: 6px solid var(--chalk); box-shadow: 14px 14px 0 var(--pink); }
.sticky-photo img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.feat-block { margin-bottom: 2.2rem; padding-bottom: 2rem; border-bottom: 2px dashed rgba(28,38,35,.25); }
.feat-block.mb-0 { border-bottom: 0; padding-bottom: 0; }
.feat-block h3 { font-family: var(--display); font-weight: 800; font-size: 1.5rem; margin-bottom: .7rem; }
.feat-block h3 small { font-family: var(--mono); font-weight: 500; font-size: .8rem; color: #b3476a; margin-left: .5rem; letter-spacing: .06em; }
.feat-block p { margin-bottom: .8rem; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li { background: var(--cream); border: 2px solid var(--chalk); border-radius: 999px; padding: .3rem 1rem; font-weight: 500; }

/* ---------- Scalloped divider ---------- */
.scallop-top::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 22px; background: radial-gradient(circle at 20px -2px, var(--prev, var(--cream)) 20px, transparent 21px) repeat-x; background-size: 40px 22px; }
.donuts { --prev: var(--cream-2); }
.about { --prev: var(--cream); }
.community { --prev: var(--cream); }

/* ---------- Doughnuts ---------- */
.donuts { background: var(--pink); }
.index-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.index-list li { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; padding: .45rem 0; border-bottom: 2px solid var(--chalk); letter-spacing: -.01em; }
.index-list.big li { font-size: clamp(1.8rem, 4vw, 3rem); }
.polaroids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: center; }
.pol { background: #fff; padding: .7rem .7rem 2.4rem; box-shadow: 0 10px 24px rgba(28,38,35,.25); margin: 0; }
.pol img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.p1 { transform: rotate(-4deg); }
.p2 { transform: rotate(2.5deg) translateY(18px); }
.p3 { transform: rotate(-2deg); }
@media (max-width: 575.98px) { .pol { padding: .4rem .4rem 1.4rem; } }

/* ---------- Lunch ---------- */
.lunch-img { border-radius: 22px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border: 5px solid var(--chalk); }
.fav { background: #fff; border: 2px solid var(--chalk); border-radius: 18px; padding: 1.6rem; height: 100%; }
.fav i { color: #b3476a; font-size: 1.3rem; }
.fav h3 { font-family: var(--display); font-weight: 800; font-size: 1.35rem; margin: .4rem 0; }
.fav p { margin: 0; color: var(--muted); }
.gf-band { margin-top: 2.5rem; background: var(--butter); border-radius: 18px; padding: 1.4rem 1.8rem; display: flex; gap: 1.2rem; align-items: center; }
.gf-band i { font-size: 2rem; }
.gf-band p { margin: 0; }

/* ---------- About ---------- */
.about { background: var(--cream-2); }
.arch { border-radius: 999px 999px 24px 24px; overflow: hidden; border: 6px solid var(--chalk); box-shadow: 14px 14px 0 var(--butter); max-width: 460px; margin: 0 auto; }
.arch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.concept > div > div { background: var(--cream); border: 2px solid var(--chalk); border-radius: 14px; padding: 1rem 1.2rem; height: 100%; }
.concept { --bs-gutter-x: 1rem; }

/* ---------- Coffee ---------- */
.coffee { background: var(--chalk); color: var(--cream); }
.coffee-lead { color: #d9d2bf; font-size: 1.1rem; }
.roast { background: var(--chalk-2); border: 2px solid rgba(247,240,225,.18); border-radius: 18px; padding: 1.4rem; height: 100%; }
.roast .tag { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--butter); }
.roast h3 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; margin: .5rem 0; }
.roast p { margin: 0; color: #d9d2bf; font-size: .98rem; }
.roast.guarantee { background: var(--pink); border-color: var(--pink); }
.roast.guarantee .tag, .roast.guarantee h3, .roast.guarantee p { color: var(--chalk); }
.coffee-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.coffee-photos img { border-radius: 22px; object-fit: cover; width: 100%; }
.cp1 { grid-column: 1 / -1; aspect-ratio: 3 / 2; border: 5px solid var(--butter); }
.cp2 { grid-column: 1 / -1; aspect-ratio: 3 / 2; border: 5px solid var(--pink); }

/* ---------- Menu ---------- */
.menu { background: var(--cream); }
.menu-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.menu-boards { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 22px; border: 5px solid var(--chalk); margin-bottom: 3rem; }
.menu-tabs { gap: .6rem; margin-bottom: 2.5rem; }
.menu-tabs .nav-link, .map-tabs .nav-link { border: 2px solid var(--chalk); color: var(--chalk); border-radius: 999px; font-weight: 700; padding: .45rem 1.1rem; }
.menu-tabs .nav-link.active { background: var(--chalk); color: var(--cream); }
.map-tabs { gap: .6rem; }
.map-tabs .nav-link { border-color: var(--cream); color: var(--cream); }
.map-tabs .nav-link.active { background: var(--butter); border-color: var(--butter); color: var(--chalk); }
.dish-list { margin: 0; }
.dish-list dt { font-family: var(--display); font-weight: 800; font-size: 1.35rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px dashed rgba(28,38,35,.3); }
.dish-list dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dish-list dd { margin: .1rem 0 0; color: var(--muted); }
.tab-note { font-family: var(--mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #b3476a; }
.tab-img { width: 100%; border-radius: 22px; border: 5px solid var(--chalk); box-shadow: 12px 12px 0 var(--butter); aspect-ratio: 4 / 5; object-fit: cover; }
.menu-foot { margin: 3rem 0 0; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.4rem; }

/* ---------- Gallery ---------- */
.gallery { background: var(--chalk-2); padding-bottom: clamp(4rem, 8vw, 6rem); }
.strip { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.5rem clamp(1rem, 6vw, 6rem) 2.5rem; scrollbar-color: var(--pink) var(--chalk); }
.strip figure { flex: 0 0 auto; width: clamp(230px, 28vw, 340px); background: #fff; padding: .7rem .7rem 2.6rem; margin: 0; scroll-snap-align: center; box-shadow: 0 12px 26px rgba(0,0,0,.35); transform: rotate(-2deg); }
.strip figure:nth-child(even) { transform: rotate(2deg) translateY(14px); }
.strip figure:nth-child(3n) { transform: rotate(-.5deg); }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Crew ---------- */
.crew { background: var(--cream); }
.crew-fig { margin: 0; }
.crew-fig img { width: 100%; border-radius: 18px; border: 4px solid var(--chalk); aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.col-6.col-lg-2 .crew-fig img { aspect-ratio: 3 / 4; }
.crew-fig figcaption { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-top: .6rem; color: var(--muted); }

/* ---------- Community ---------- */
.community { background: var(--pink-soft); }
.comm-fig { margin: 0; }
.comm-fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 4px solid var(--chalk); }
.comm-fig figcaption { font-size: .85rem; font-weight: 500; margin-top: .5rem; line-height: 1.3; }

/* ---------- Locations ---------- */
.locations { background: var(--chalk); color: var(--cream); }
.loc-card { background: var(--cream); color: var(--ink); border-radius: 22px; padding: 2rem; height: 100%; }
.loc-card h3 { font-family: var(--display); font-weight: 800; font-size: 2.1rem; margin-bottom: .5rem; }
.loc-card .addr { font-weight: 700; font-size: 1.15rem; }
.loc-card .hours { background: var(--butter); border-radius: 12px; padding: .7rem 1rem; }
.loc-card .phone { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-decoration: none; border-bottom: 3px solid var(--pink); }
.loc-card .gps { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; }
.map-wrap { margin-top: 1.2rem; }
.map-wrap iframe { width: 100%; height: 420px; border: 0; border-radius: 22px; display: block; }

/* ---------- Footer ---------- */
.site-footer { background: #111917; color: var(--cream); padding: 3.5rem 0 2rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--butter); }
.logo-chip { display: inline-block; background: var(--cream); border-radius: 14px; padding: .6rem .8rem; }
.logo-chip img { width: 220px; }
.follow { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pink); }
.socials { display: flex; gap: .8rem; }
.socials a { width: 46px; height: 46px; border-radius: 50%; background: var(--pink); color: var(--chalk); display: grid; place-items: center; font-size: 1.3rem; }
.socials a:hover { background: var(--butter); color: var(--chalk); }
.foot-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 2.5rem 0 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(247,240,225,.18); font-weight: 500; }
.powered a { display: inline-block; padding: .55rem 1.1rem; border: 1px solid rgba(247,240,225,.3); border-radius: 999px; font-size: .9rem; color: #d9d2bf; }
.powered a:hover { border-color: var(--butter); }
.powered i { color: var(--butter); }

@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .order-card { padding: 1.5rem; }
  .map-wrap iframe { height: 320px; }
  .gf-band { flex-direction: column; align-items: flex-start; }
}