:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #000; }
* { box-sizing: border-box; }
html, body, #tvDisplay { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
#tvDisplay { display: grid; place-items: center; }

.tv-layout { width: min(100vw, 177.777vh); height: min(100vh, 56.25vw); display: grid; grid-template-columns: 51% 49%; gap: .55cqw; padding: 1.4cqh 1.2cqw; background: #050505; border: .32cqw solid #25231e; container-type: size; }
.beer-board, .alternatives, .feature-cell { min-height: 0; overflow: hidden; border: .12cqw solid var(--accent); border-radius: 1.2cqw; }

.beer-board { display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding: 1.05cqh 1cqw 1.1cqh; }
.board-label { display: flex; justify-content: space-between; align-items: center; min-height: 4.5cqh; padding: 0 .25cqw .65cqh; border-bottom: 1px solid rgba(255,255,255,.13); }
.board-label img { width: auto; height: 3.5cqh; max-width: 9.5cqw; object-fit: contain; object-position: left center; }
.board-label strong { color: var(--accent); font-size: .92cqw; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

.beer-grid-head, .beer-line { display: grid; grid-template-columns: minmax(0, 1fr) 4.15cqw repeat(4, 4.05cqw); column-gap: .32cqw; align-items: center; }
.beer-grid-head { min-height: 6.5cqh; padding: .55cqh .28cqw .7cqh; color: #d9d1c3; border-bottom: 1px solid rgba(255,255,255,.18); }
.beer-grid-head > span:first-child { color: #8e867a; font-size: .62cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pour-head { display: grid; justify-items: center; line-height: 1.05; }
.pour-head b { color: #f5efe6; font-size: .72cqw; font-weight: 800; white-space: nowrap; }
.pour-head small { margin-top: .28cqh; color: #a9a092; font-size: .5cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pour-head.pint b, .pour-head.pint small { color: var(--accent); }

.beer-list { min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.beer-line { min-height: 0; padding: .18cqh .28cqw .26cqh; border-bottom: 1px solid rgba(255,255,255,.105); }
.beer-line:last-child { border-bottom: 0; }
.beer-identity { min-width: 0; display: grid; align-content: center; gap: .06cqh; white-space: nowrap; }
.beer-identity strong { min-width: 0; overflow: hidden; color: #fff9ef; font-family: Georgia, serif; font-size: var(--beer-name-size); font-weight: 700; line-height: 1.12; padding: .02em 0 .16em; text-overflow: ellipsis; }
.beer-identity span { min-width: 0; overflow: hidden; color: #cfc7ba; font-size: max(.8cqw, calc(var(--beer-name-size) * .54)); font-weight: 600; line-height: 1.08; text-overflow: ellipsis; }
.abv { color: #d9d1c3; font-size: max(.88cqw, calc(var(--beer-name-size) * .59)); font-weight: 750; text-align: center; white-space: nowrap; }
.price { color: #f7f1e8; font-size: max(1.08cqw, calc(var(--beer-name-size) * .7)); font-variant-numeric: tabular-nums; font-weight: 800; text-align: center; white-space: nowrap; }
.price.pint { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: .34cqw; padding: .42cqh .08cqw; }
.price.unavailable { color: #69645c; font-weight: 600; }

.right-column { min-height: 0; display: grid; grid-template-rows: 35% 1fr; gap: 1.1cqh; }
.alternatives { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 1.25cqh 1.25cqw; }
.alternatives h2 { margin: 0 0 .65cqh; color: var(--accent); font-family: Georgia, serif; font-size: 1.55cqw; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; }
.alt-list { min-height: 0; display: flex; flex-direction: column; }
.alt-line { min-height: 0; flex: 1 1 0; display: grid; align-content: center; gap: .5cqh; padding: .25cqh 0; border-top: 1px solid rgba(255,255,255,.1); }
.alt-line div { min-width: 0; display: flex; align-items: baseline; gap: .65cqw; }
.alt-line strong { color: #fff9ef; font-family: Georgia, serif; font-size: var(--alt-size); line-height: 1.18; padding-bottom: .13em; white-space: nowrap; }
.alt-line span { min-width: 0; overflow: hidden; color: #b6aea2; font-size: calc(var(--alt-size) * .58); font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.alt-line b { overflow: hidden; color: #e8e0d4; font-size: calc(var(--alt-size) * .67); font-variant-numeric: tabular-nums; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.feature-cell { padding: .55cqw; }
.feature { width: 100%; height: 100%; }
.image-feature { display: grid; place-items: center; background: #000; }
.image-feature img { width: 100%; height: 100%; display: block; }
.text-feature { display: grid; align-content: center; padding: 2.2cqh 2cqw; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.feature-copy { display: grid; gap: 1.25cqh; }
.text-feature p { margin: 0; color: var(--accent); font-size: .74cqw; font-weight: 850; letter-spacing: .19em; text-transform: uppercase; }
.text-feature h3 { margin: 0; color: #fff8ed; font-family: Georgia, serif; font-size: 2.35cqw; font-weight: 600; line-height: 1.08; padding-bottom: .1em; }
.feature-lines { display: grid; gap: .75cqh; }
.feature-lines div { padding: .72cqh 0 .8cqh; color: #eee5d8; border-top: 1px solid rgba(255,255,255,.17); font-family: Georgia, serif; font-size: 1.42cqw; font-weight: 500; line-height: 1.18; overflow-wrap: anywhere; }
.offline { color: #d6b35d; font-family: Georgia, serif; font-size: 3vw; }