/* Shared board look (matches Daisey's Canva draft board). Single dark look on purpose: it is a bar menu. */
:root {
  color-scheme: dark;
  --bg: #120d08;
  --bg-glow: #3a2614;
  --fg: #ffffff;
  --muted: #b9b2aa;
  --rule: #8a8178;
  --line: #3a322a;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-name: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-body: "Lexend", "Segoe UI", system-ui, sans-serif;
  --f-info: "Montserrat", "Segoe UI", system-ui, sans-serif;
}
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); }

/* ---------- card ---------- */
.card { border: 3px solid var(--c, var(--rule)); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; background: rgba(10, 7, 4, 0.6); box-sizing: border-box; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.name { flex: 1; min-width: 0; font-family: var(--f-name); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1.04; letter-spacing: 0.01em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.price { font-family: var(--f-display); font-weight: 700; color: transparent; -webkit-text-stroke: 2px var(--muted); line-height: 1; }
.badge { font-size: 1.6em; line-height: 1; }
.brewery { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
a.brewery { display: block; width: fit-content; margin-bottom: 5px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--c, var(--rule)); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.brewery:hover { color: var(--c, var(--fg)); }
a.brewery:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.loc { color: var(--muted); letter-spacing: 0.08em; }
.style { color: var(--c); text-transform: uppercase; letter-spacing: 0.12em; }
.abv { color: var(--c); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.desc { letter-spacing: 0.06em; line-height: 1.45; margin: 0; }
.hr { width: 33%; height: 1px; background: var(--rule); }
.legend { display: flex; flex-wrap: wrap; gap: 14px 46px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 16px; text-transform: uppercase; letter-spacing: 0.14em; }
.legend i { width: 20px; height: 20px; background: var(--c); display: inline-block; flex: none; }

/* ---------- TV ---------- */
body.tv { overflow: hidden; height: 100vh; cursor: none; }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body.tv #app { position: relative; z-index: 1; }
.tv-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; padding: 44px 44px 30px; display: flex; flex-direction: column; gap: 22px; box-sizing: border-box; overflow: hidden; }
.tv-stage > * { position: relative; z-index: 1; }
.tv-stage > .tv-bg-media, .tv-stage > .tv-bg-dim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tv-bg-dim { background: #000; }
.tv-canva { padding: 0; background: #000; }
.tv-canva-media { width: 100%; height: 100%; object-fit: contain; display: block; }
.tv-head { display: flex; align-items: flex-start; height: 168px; flex: none; }
.tv-title { font-family: var(--f-display); font-weight: 900; font-size: 150px; line-height: 0.95; letter-spacing: 0.02em; margin: 0; flex: none; white-space: nowrap; }
.tv-pricing { max-width: 330px; margin-left: auto; margin-right: 56px; margin-top: 30px; text-align: center; font-family: var(--f-info); font-size: 20px; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; }
.tv-pricing b { display: block; font-weight: 700; font-size: 21px; }
.tv-head .tv-ages:first-of-type:not(:nth-child(3)) { margin-left: auto; }
.tv-ages { width: 280px; margin-top: -44px; padding: 50px 10px 44px; text-align: center; font-family: var(--f-info); font-size: 18px; line-height: 1.32; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid var(--rule); border-top: none; clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); position: relative; box-sizing: border-box; }
.tv-ages::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--rule) calc(50% - 1px), var(--rule) calc(50% + 1px), transparent calc(50% + 1.5px)) left/50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1.5px), var(--rule) calc(50% - 1px), var(--rule) calc(50% + 1px), transparent calc(50% + 1.5px)) right/50% 100% no-repeat; }
.tv-ages b { font-weight: 700; display: block; margin-top: 4px; }
.tv-grid { flex: 1; display: grid; gap: 24px 26px; min-height: 0; }
.tv .card { padding: 18px 22px; gap: 9px; overflow: hidden; }
.tv .name { font-size: 33px; font-stretch: 112%; overflow-wrap: normal; }
.tv .price { font-size: 48px; }
.tv .brewery { font-size: 19px; }
.tv .loc { font-size: 18px; }
.tv .style { font-size: 20px; }
.tv .abv { font-size: 20px; }
.tv .desc { font-size: 18px; line-height: 1.4; }
.tv .dense .name { font-size: 28px; } .tv .dense .desc { font-size: 16px; } .tv .dense .price { font-size: 40px; }
.tv .dense .brewery, .tv .dense .style, .tv .dense .abv { font-size: 17px; } .tv .dense .loc { font-size: 16px; }
.tv-empty { grid-column: 1 / -1; align-self: center; text-align: center; font-family: var(--f-display); font-size: 64px; color: var(--muted); }
.tv-foot { display: flex; align-items: center; height: 62px; flex: none; }
.tv .legend { font-size: 22px; }
.tv-wifi { margin-left: auto; display: flex; align-items: center; gap: 18px; text-align: center; font-family: var(--f-info); }
.tv-wifi small { display: block; font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.tv-wifi strong { display: block; font-size: 25px; font-weight: 700; letter-spacing: 0.02em; }
.tv-wifi svg { width: 58px; height: 46px; flex: none; }

/* ---------- website ---------- */
.web-body { background: radial-gradient(ellipse at 50% 30%, var(--bg-glow), var(--bg) 70%) fixed, var(--bg); min-height: 100vh; }
.web { max-width: 1180px; margin: 0 auto; padding-block: 32px 56px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 26px; box-sizing: border-box; }
.web-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.web-venue { font-family: var(--f-info); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; color: var(--muted); text-decoration: none; }
.web-venue:hover { color: var(--fg); }
.web-title { font-family: var(--f-display); font-weight: 900; font-size: clamp(48px, 11vw, 112px); line-height: 0.95; margin: 6px 0 0; letter-spacing: 0.02em; }
.web-sub { font-family: var(--f-info); text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; line-height: 1.6; color: var(--muted); }
.web-sub b { color: var(--fg); font-weight: 700; }
.web-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.web .name { font-size: clamp(19px, 5.4vw, 26px); overflow-wrap: break-word; word-break: normal; hyphens: none; }
@media (max-width: 520px) { .web .name { font-stretch: 100%; } .web .price { font-size: 30px; } }
.web .price { font-size: 38px; }
.web .brewery { font-size: 14px; }
.web .loc { font-size: 13px; }
.web .style, .web .abv { font-size: 14px; }
.web .desc { font-size: 14px; }
.web .legend { font-size: 12px; gap: 12px 26px; }
.web .legend i { width: 14px; height: 14px; }
.web .legend span { gap: 10px; }
.web-empty { font-size: 18px; color: var(--muted); }
.web-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.web-filter button { font: 500 13px/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); background: transparent; border: 1.5px solid var(--c, var(--rule)); padding: 10px 14px; cursor: pointer; }
.web-filter button[aria-pressed="true"] { background: var(--c, var(--rule)); color: var(--bg); }
.web-deck h2 { font-family: var(--f-display); font-size: 22px; margin: 0 0 10px; }
.web-deck ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.web-deck span { color: var(--muted); }
.web-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; border-top: 1px solid var(--line); padding-top: 16px; line-height: 1.5; }
.web-foot a { color: var(--fg); }
.web a:focus-visible, .web button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.card[hidden] { display: none !important; }

/* dev copy banner */
.dev-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: #23d5f0; color: #120d08; font: 700 13px/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
body.app .dev-banner { top: 0; bottom: auto; padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
body.app:has(.dev-banner) .top { top: 25px; }

/* brewery / cider logos */
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who > div { min-width: 0; }
.logo { width: 44px; height: 44px; flex: none; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; box-sizing: border-box; }
.tv .logo { width: 52px; height: 52px; }
.tv .dense .logo { width: 44px; height: 44px; }