/* coffee?? — "ticket". off-white, near-black, one signal orange. hairline rules, no boxes. */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* "stamp": one roasted brown on paper. no second color. */
  --paper: #edd9b2;
  --paper-2: #e2cca1;
  --brand: #7a4a2a;
  --ink: #4a2c18;
  --ink-2: #6b4630;
  --ink-3: #a3866c;
  --hot: #7a4a2a;
  --hot-2: #5e3720;
  --mustard: #b98a5e;
  --sage: #7a4a2a;
  --sage-2: #5e3720;
  --line-c: #d4c19c;
  --rule: #c0aa84;
  --line: 1.5px solid var(--brand);
  --hair: 1px solid var(--line-c);
  --shadow: none;
  --r: 4px;
  --display: 'Alfa Slab One', 'Rockwell', 'Georgia', serif;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--paper) url('paper.jpg') center top / cover fixed; color: var(--ink);
  font-family: var(--mono); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden;
}
.shell { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; padding: 22px 20px 120px; }

/* type */
.wordmark { font-family: var(--display); font-weight: 400; font-style: normal; font-size: clamp(52px, 16vw, 80px); line-height: 1; letter-spacing: -.01em; margin: 6px 0 4px; text-transform: lowercase; color: var(--brand); }
.wordmark .q { color: var(--brand); }
.eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
h2.spot { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.08; letter-spacing: 0; margin: 8px 0 2px; color: var(--brand); }
.muted { color: var(--ink-3); }
a { color: var(--hot-2); }

/* buttons */
.btn { appearance: none; font: inherit; font-weight: 700; cursor: pointer; background: var(--paper); color: var(--brand); border: var(--line); border-radius: var(--r); box-shadow: none; padding: 12px 16px; transition: background .12s, color .12s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; justify-content: center; letter-spacing: .02em; }
.btn:active { background: var(--paper-2); }
.btn.hot { background: var(--brand); color: var(--paper); border-color: var(--brand); }
.btn.hot:active { background: var(--hot-2); }
.btn.ghost { border-color: transparent; padding-left: 4px; padding-right: 4px; color: var(--ink-3); font-weight: 500; }
.btn.ghost:hover { color: var(--hot-2); }
.btn.block { width: 100%; }
.btn.small { padding: 8px 12px; font-size: 12px; }
.card { background: var(--paper); border: var(--line); border-radius: var(--r); padding: 16px; }

/* the list — hairline rows with an arrow */
.menu { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.menu li { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.menu li:nth-child(1){animation-delay:.04s} .menu li:nth-child(2){animation-delay:.08s} .menu li:nth-child(3){animation-delay:.12s} .menu li:nth-child(4){animation-delay:.16s} .menu li:nth-child(5){animation-delay:.2s} .menu li:nth-child(6){animation-delay:.24s}
.menu button { width: 100%; text-align: left; appearance: none; font: inherit; cursor: pointer; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 20px 2px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; transition: background .12s; }
.menu button:hover, .menu button:active { background: var(--paper-2); }
.menu .name { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: 0; line-height: 1; white-space: nowrap; color: var(--brand); }
.menu .name::after { content: ' →'; color: var(--brand); opacity: .55; }
.menu .tag { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-left: 6px; vertical-align: 3px; }
.menu .sub { font-size: 11px; color: var(--ink-3); text-align: left; line-height: 1.35; }
.menu li.any { margin-top: 22px; }
.menu li.any .name { font-weight: 400; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 7px; border: var(--line); border-radius: 2px; padding: 4px 9px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: var(--paper); }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.pill.open::before { background: var(--brand); animation: blink 2s infinite; }
.pill.soon::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--brand); }
.pill.closed { color: var(--ink-3); border-color: var(--rule); }
.pill.closed::before { background: var(--rule); }
@keyframes blink { 50% { opacity: .35; } }

/* compass — the whole point of the screen */
.compass { position: relative; width: 268px; height: 268px; margin: 26px auto 6px; }
.compass svg { width: 100%; height: 100%; overflow: visible; }
.needle { transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.miles { text-align: center; font-family: var(--display); font-weight: 400; font-size: 72px; line-height: 1; letter-spacing: -.01em; color: var(--brand); }
.miles small { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .12em; margin-left: 6px; color: var(--ink-3); }
.walk { text-align: center; color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.notice { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 12px; }

/* the "more" drawer — everything that isn't the direction and the distance */
.more { display: none; margin-top: 16px; border-top: var(--line); padding-top: 4px; animation: rise .3s both; }
.more.on { display: block; }
.more .row { margin-top: 14px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: var(--hair); font-size: 12px; }
.kv .k { color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; padding-top: 2px; white-space: nowrap; }
.kv .v { text-align: right; color: var(--ink-2); }
.tear { border-top: var(--line); margin: 18px 0; height: 0; }

/* vibe pills */
.vibes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vibes span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 2px; padding: 2px 6px; }
.vibes span.food { border-color: var(--hot); color: var(--hot-2); }

/* the coffee — per-drink rows */
details.drinks { border-bottom: var(--hair); margin: 0; }
details.drinks summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 0; }
details.drinks summary::-webkit-details-marker { display: none; }
details.drinks summary .top { flex: 1; font-size: 12px; text-align: right; color: var(--ink-2); }
details.drinks summary .top b { font-family: var(--display); font-size: 18px; margin-left: 4px; color: var(--ink); }
details.drinks summary .chev { transition: transform .2s; font-size: 10px; color: var(--ink-3); }
details.drinks[open] summary .chev { transform: rotate(180deg); }
.drow { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12px; border-top: var(--hair); }
.drow .l { flex: 1; } .drow .l small { display: block; color: var(--ink-3); font-size: 10px; }
.drow b { font-family: var(--display); font-size: 20px; }
.drow .n { color: var(--ink-3); font-size: 10px; min-width: 60px; text-align: right; }
.drow.few b { color: var(--ink-3); font-family: var(--mono); font-size: 10px; font-weight: 500; }
.drow.mine .l::after { content: ' · yours'; color: var(--hot-2); font-size: 10px; }
.tagline { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--ink-2); justify-content: flex-end; }
.tagline span::before { content: '✓ '; color: var(--sage-2); }

/* nav */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.back { font: inherit; background: none; border: 0; cursor: pointer; color: var(--ink-2); padding: 0; font-weight: 500; }
.back:hover { color: var(--hot-2); }

/* member callout */
.callout { margin-top: 56px; border-top: var(--line); padding-top: 18px; }
.callout h3 { font-family: var(--display); font-weight: 700; font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; }
.callout p { margin: 0 0 12px; font-size: 12px; color: var(--ink-2); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: flex-end; justify-content: center; background: rgba(21,19,17,.5); padding: 10px; }
.modal.on { display: flex; }
.sheet { width: 100%; max-width: 440px; max-height: 92vh; overflow: auto; background: var(--paper); border: var(--line); border-radius: 6px; padding: 18px; animation: rise .25s both; }
.sheet h3 { font-family: var(--display); font-size: 26px; margin: 0 0 8px; letter-spacing: -.02em; }
.opt { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: var(--hair); cursor: pointer; }
.opt input { accent-color: var(--hot); width: 18px; height: 18px; }
textarea, input[type=text], input[type=email] { width: 100%; font: inherit; font-size: 13px; padding: 10px 12px; border: var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); }
textarea:focus, input:focus { outline: 2px solid var(--hot); outline-offset: 1px; }

.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1 1 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 2px; font-size: 12px; z-index: 30; transition: .25s; pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; transform: translateX(-50%); }
.hidden { display: none !important; }
.stamp { display: inline-block; border: 1.5px solid var(--hot); color: var(--hot-2); border-radius: 2px; padding: 2px 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }

/* rating sheet pieces */
.picker { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 12px; }
.picker button { appearance: none; font: inherit; text-align: left; background: var(--paper); border: var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; }
.picker button b { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; }
.picker button small { color: var(--ink-3); font-size: 10px; }
.picker button.on { background: var(--brand); border-color: var(--brand); }
.picker button.on b, .picker button.on small { color: var(--paper); }
.vslide { margin: 12px 0 4px; }
.vslide .lab { display: flex; justify-content: space-between; font-size: 12px; }
.vslide .lab b { font-family: var(--display); font-size: 18px; color: var(--hot-2); }
.vslide .ends { display: flex; justify-content: space-between; font-size: 9px; color: var(--ink-3); margin-top: -2px; }
input[type=range] { width: 100%; accent-color: var(--hot); }
.tagpick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tagpick label { border: var(--line); border-radius: 2px; padding: 5px 10px; font-size: 11px; cursor: pointer; user-select: none; }
.tagpick label:has(:checked) { background: var(--ink); color: var(--paper); }
.tagpick input { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { border: var(--line); border-radius: 2px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.chips label:has(:checked) { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.chips input { display: none; }

.screen { display: none; }
.screen.on { display: block; animation: rise .3s both; }
footer.fine { margin-top: 64px; font-size: 10px; color: var(--ink-3); text-align: center; line-height: 1.6; }

/* the compass as a guide: ring follows real north, needle locks on the shop */
.ring { transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.beacon-pulse { transform-box: fill-box; transform-origin: center; animation: beacon 1.8s ease-out infinite; }
@keyframes beacon { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.guide { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--hot-2); margin-top: 10px; min-height: 20px; }
.guide .btn.small { vertical-align: middle; font-weight: 600; color: var(--ink); }

/* quick lists: nearby / open soon */
.quick { display: flex; gap: 8px; margin-top: 16px; }
.quick .btn { flex: 0 0 auto; }
.lrows { margin-top: 12px; border-top: 1px solid var(--rule); }
.lrow { width: 100%; appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; }
.lrow:hover, .lrow:active { background: var(--paper-2); }
.lrow .ln { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.02em; line-height: 1.1; }
.lrow .lm { font-size: 11px; color: var(--ink3, var(--ink-3)); margin-top: 2px; }
.lrow .lr { text-align: right; flex: 0 0 auto; }
.lrow .ld { font-family: var(--display); font-weight: 700; font-size: 18px; }
.lrow .ls { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 1px; }
.lrow .ls.open { color: var(--sage-2); } .lrow .ls.soon { color: #b8860b; } .lrow .ls.closed { color: var(--ink-3); }
.lrow.dim .ln, .lrow.dim .lm, .lrow.dim .ld { color: var(--ink-3); opacity: .7; }
.lrow.dim .ls { opacity: .8; }
.tagline-link a { color: var(--hot-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tagline-link a:active { color: var(--hot); }

/* splash → home */
.splash { position: fixed; inset: 0; z-index: 50; background: var(--paper); display: grid; place-items: center; transition: opacity .4s ease; }
.splash .wordmark { font-size: clamp(72px, 22vw, 120px); margin: 0; transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.splash.shrink .wordmark { transform: scale(.5) translateY(-72vh); }
.splash.gone { opacity: 0; pointer-events: none; }
body:not(.ready) .home-centered { opacity: 0; }
body.ready .home-centered { animation: rise .5s both; }

/* centered home, like the carousel */
.home-centered { text-align: center; }
.home-centered .eyebrow { display: block; }
.home-centered .wordmark { font-size: clamp(48px, 15vw, 60px); margin: 6px auto 4px; }
.home-centered .tagline-link { white-space: normal !important; }
.home-centered .menu { border-top: 0; margin-top: 34px; }
.home-centered .menu button { align-items: center; border-bottom: 0; padding: 13px 2px; gap: 3px; }
.home-centered .menu .name { font-size: 28px; }
.home-centered .menu .sub { text-align: center; }
.home-centered .menu li.any { margin-top: 26px; }
.home-centered .callout { border-top: 1px solid var(--rule); margin-top: 48px; }
#hoodChips label { font-size: 12px; padding: 7px 11px; }
#hoodChips { gap: 7px; }
.notice a { color: var(--hot-2); }

/* the stamp: double ring, wordmark inside, small caps under */
.stamp-badge { display: inline-grid; place-items: center; width: 232px; height: 232px; border-radius: 50%; border: 4px solid var(--brand); position: relative; color: var(--brand); transform: rotate(-4deg); }
.stamp-badge::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid var(--brand); }
.stamp-badge .sb-top, .stamp-badge .sb-bot { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; }
.stamp-badge .wordmark { font-size: 42px; margin: 4px 0; letter-spacing: 0; display: block; }
.stamp-badge.small { width: 150px; height: 150px; border-width: 3px; }
.stamp-badge.small::before { inset: 5px; }
.stamp-badge.small .wordmark { font-size: 27px; margin: 2px 0; }
.stamp-badge.small .sb-top, .stamp-badge.small .sb-bot { font-size: 7px; }
.splash .stamp-badge { transform: rotate(-4deg) scale(1.15); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.splash.shrink .stamp-badge { transform: rotate(-4deg) scale(.66) translateY(-96vh); }
.home-centered .stamp-badge { margin: 4px auto 6px; }
.home-centered > .wordmark { display: none; }
.eyebrow { color: var(--ink-3); font-weight: 700; }
.guide { color: var(--brand); }
.tagline-link a { color: var(--brand); }
.notice a { color: var(--brand); }
.callout h3 { color: var(--brand); }
.lrow .ln { color: var(--brand); }
.lrow .ls.open { color: var(--brand); } .lrow .ls.soon { color: var(--mustard); }
.vibes span { border-color: var(--brand); color: var(--brand); } .vibes span.food { border-color: var(--brand); color: var(--brand); background: var(--paper-2); }
details.drinks summary .top b, .drow b { color: var(--brand); }
.stamp { border-color: var(--brand); color: var(--brand); }

/* in-app browser banner (instagram / facebook / tiktok) */
.iab { border: var(--line); border-radius: var(--r); padding: 14px 16px; margin: 0 0 22px; text-align: center; background: var(--paper-2); }
.iab-t { font-family: var(--display); font-size: 20px; color: var(--brand); margin-bottom: 4px; }
.iab-s { font-size: 12px; color: var(--ink-2); margin-bottom: 10px; }

/* real paper: let it show through */
.btn:not(.hot), .pill, .menu button, .lrow, .picker button:not(.on), .iab, .callout, textarea, input[type=text], input[type=email] { background: transparent; }
.btn:not(.hot):active, .menu button:hover, .menu button:active, .lrow:hover, .lrow:active { background: rgba(122,74,42,.08); }
.splash, .sheet, .modal .sheet { background: var(--paper) url('paper.jpg') center top / cover; }
.iab { background: rgba(122,74,42,.06); }

/* mini stamp for the home page: ring + wordmark only */
.stamp-badge.mini { width: 112px; height: 112px; border-width: 3px; transform: rotate(-4deg); }
.stamp-badge.mini::before { inset: 4px; }
.stamp-badge.mini .wordmark { font-size: 22px; margin: 0; }
/* instagram takeover */
.takeover { position: fixed; inset: 0; z-index: 60; background: var(--paper) url('paper.jpg') center top / cover; padding: 48px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: auto; }
.takeover h2 { font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--brand); margin: 18px 0 6px; }
.takeover p { max-width: 380px; font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 6px 0 14px; }
.takeover .btn { max-width: 380px; width: 100%; margin-top: 4px; }
.takeover .small { font-size: 12px; }
.takeover a.dim { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; margin-top: 18px; }
.takeover .dim2 { color: var(--ink-3); }
.takeover a.btn { text-decoration: none; }

.quiet { margin-top: 44px; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.6; max-width: 340px; margin-left: auto; margin-right: auto; }
.quiet a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }