/* coffee?? — "ink". loads after coffee.css and overrides it.
   home is roasted brown with cream ink; everything after is paper with brown ink.
   every drawing is a marker-on-paper scan turned into an alpha mask (ink/), so css picks the ink color. */

:root {
  --roast: #6a3d21;
  --cream: #f4e6c6;
  --ink-3: #755538;          /* was #a3866c = 2.45:1 on paper. this is 4.87:1 */
  --rule: #b89f76;
}

/* one weight per face. alfa slab ships 400 only; courier prime ships 400 + 700. */
.wordmark, h2.spot, .menu .name, .miles, .lrow .ln, .lrow .ld, .callout h3, .sheet h3, .takeover h2,
details.drinks summary .top b, .drow b, .picker button b, .vslide .lab b { font-weight: 400; }
.btn, .pill, .guide, .back, .eyebrow { font-weight: 700; }
.btn.ghost, .lrow .ld small, .miles small { font-weight: 400; }

.ink { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

body { transition: background-color .25s; }
body.on-home { background: var(--roast); color: var(--cream); }
.shell { padding: 26px 22px 40px; min-height: 100dvh; display: flex; flex-direction: column; }
.screen.on { flex: 1; display: flex; flex-direction: column; }

/* ---------- home ---------- */
#home .wordmark { font-size: 34px; color: var(--cream); margin: 0; text-align: left; }
#home .wordmark .q { color: var(--cream); }
.ask { margin: 4px 0 0; font-size: 13px; color: var(--cream); opacity: .9; }
#home .menu { margin: 26px 0 0; border: 0; }
#home .menu button { border: 0; padding: 7px 0; min-height: 56px; gap: 1px; color: var(--cream); align-items: flex-start; background: transparent; -webkit-tap-highlight-color: transparent; }
#home .menu button:hover, #home .menu button:active { background: transparent; }
#home .menu .name { position: relative; font-size: clamp(30px, 9.2vw, 38px); line-height: 1.08; color: var(--cream); white-space: nowrap; }
#home .menu .name::after { content: none; }
#home .menu .sub { font-size: 12.5px; color: var(--cream); opacity: .82; }
#home .menu li.any { margin-top: 14px; }
#home .menu li.any .name { font-size: clamp(21px, 6.2vw, 25px); }
/* the pressed state: the word gets circled */
.loop { position: absolute; left: -9%; right: -9%; top: -22%; bottom: -26%; opacity: 0; transform: scale(.86) rotate(-3deg); pointer-events: none; }
#home .menu button:active .loop, .picked .loop { opacity: 1; transform: none; transition: opacity .12s, transform .22s cubic-bezier(.2,.9,.3,1.3); }
.menu li.picked ~ li, .menu li:has(~ li.picked) { opacity: .45; transition: opacity .2s; }
#home .menu button:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 4px; }

.homefoot { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1fr clamp(104px, 34vw, 150px); gap: 10px; align-items: end; }
.nearby { margin: 0 0 14px; font-size: 14px; }
.nearby a { color: var(--cream); font-weight: 700; text-underline-offset: 4px; display: inline-block; padding: 12px 0; }
#home .fine { margin: 0; text-align: left; font-size: 11px; line-height: 1.6; color: var(--cream); opacity: .8; }
#home .fine a { color: var(--cream); }
.hero { aspect-ratio: 3 / 4; color: var(--cream); margin-right: -8px; transition: opacity .15s; }

/* ---------- result ---------- */
.topbar { margin-bottom: 14px; }
.back { min-height: 44px; padding: 0 14px 0 0; color: var(--brand); font-size: 14px; }
#result .eyebrow, #listScreen .eyebrow { font-size: 11px; color: var(--ink-2); }
.pill { border-radius: 20px; }
h2.spot { font-size: clamp(28px, 8.4vw, 34px); margin: 10px 0 0; }
.underline { height: 16px; width: min(78%, 270px); color: var(--brand); margin: 2px 0 0 -4px; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

.compass { width: min(80vw, 310px); height: min(80vw, 310px); margin: 14px auto 0; position: relative; color: var(--ink); }
.compass .ring, .compass .needle { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.compass .ring .ink { position: absolute; inset: 7%; }
.compass .ring b { position: absolute; left: 50%; top: -1.5%; transform: translateX(-50%); font: 400 19px/1 var(--display); color: var(--ink); }
.compass .needle .ink { position: absolute; left: 36%; right: 36%; top: 17%; bottom: 17%; color: var(--brand); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.compass .beacon { position: absolute; left: 50%; top: 9%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--brand); }
.compass .hub { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
@media (prefers-reduced-motion: no-preference) { .compass .beacon { animation: blink 1.6s steps(2) infinite; } }

.readout { display: flex; align-items: center; gap: 22px; margin: 6px 0 0 6px; }
.miles { position: relative; text-align: left; font-size: 64px; padding: 6px 4px; }
.miles .ink { position: absolute; inset: -12px -22px -10px -24px; color: var(--brand); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.readout .side { display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.readout .side b { color: var(--ink); }
.walk { text-align: left; margin: 0; font-size: 13px; color: var(--ink-2); }
.guide { text-align: left; margin: 0; min-height: 0; font-size: 13px; letter-spacing: 0; color: var(--brand); }
.notice { text-align: left; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.notice a, .notice .btn.small { display: inline-flex; min-height: 44px; align-items: center; }
#verifyNote { font-size: 12.5px; color: var(--ink-2); }

#hit > .row { align-items: center; gap: 4px 14px; flex-wrap: nowrap; margin-top: 16px !important; }
#hit > .row > * { flex: 0 0 auto; }
.btn { min-height: 48px; border-radius: 26px; }
.btn.hot { padding: 0 22px; }
.btn.ghost { color: var(--brand); font-weight: 700; padding: 0 4px; min-width: 44px; }
.btn.block { border-radius: 26px; }
.more { border-top: 1.5px solid var(--rule); }
.kv .k, .kv .v { font-size: 12.5px; }
.kv .k { font-size: 11px; color: var(--ink-2); }

/* finding you / nothing open / can't see you: a drawing, what happened, and a way out */
.state { padding: 18px 0 0; }
.state .art, #whereami .art { width: 150px; height: 170px; color: var(--brand); margin: 6px 0 4px -6px; -webkit-mask-position: left bottom; mask-position: left bottom; }
.state p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2) !important; margin: 8px 0 18px; max-width: 34ch; }
#whereami p { font-size: 13.5px !important; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .art.walk { animation: stroll 1.1s ease-in-out infinite alternate; } }
@keyframes stroll { from { transform: translateX(0) rotate(-1.5deg); } to { transform: translateX(14px) rotate(1.5deg); } }

/* nearby list */
.lrow { min-height: 60px; }
.lrow .lm { color: var(--ink-2); font-size: 12px; }
.lrow.dim .ln, .lrow.dim .ld { color: var(--ink-3); opacity: .5; }   /* big slab type: fade is safe. the small lines stay full strength. */
.lrow.dim .lm, .lrow.dim .ls { color: var(--ink-2); opacity: 1; }
#listNote { font-size: 12px; color: var(--ink-2); }
.callout { border-top: 1.5px solid var(--rule); }
.callout p { font-size: 13px; }
.chips label, #hoodChips label { border-radius: 20px; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; }
.homefoot { grid-template-columns: 1fr clamp(120px, 38vw, 170px); }

/* the mark: hand-lettered coffee??, circled (ig avatar, sept 22) */
.takeover .mark { width: 200px; height: 122px; color: var(--brand); }