/* Rádio Colmeia FM — a hive frame whose comb is a hex cartogram of the station's towns */
:root {
  --page: #F3E3B5; --page-2: #ECD69E;
  --ink: #3B2A14; --ink-2: #6A4E28; --ink-3: #8A5A1A;
  --pine: #E6C48E; --pine-2: #DDB679; --pine-d: #B98443; --burn: #4A3015;
  --wax: #EFCB6E; --cap: #FBF1D6; --honey: #C77A12; --honey-d: #9C5A07; --on-honey: #2A1A08;
  --prop: #8A4B1F; --prop-d: #6E3912; --river: #4E6B85;
  --card: #FBF2D8; --card-line: rgba(138, 90, 26, .13); --brass: #C9A04A;
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.87, 0, .13, 1);
  --lug: 44px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 15px/1.6 'Commissioner', system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255, 248, 225, .7), transparent 60%),
    radial-gradient(900px 700px at 110% 30%, rgba(214, 170, 80, .22), transparent 60%),
    var(--page);
  min-height: 100vh;
}
::selection { background: var(--honey); color: var(--on-honey); }
a { color: inherit; }
button { font: inherit; color: inherit; }
.num, .tick i, .pg b, .sp-t, .fm span, .brass-f { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }

/* ---------- layout: the frame and the record card beside it ---------- */
.hive {
  display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 0 calc(var(--lug) + 22px);
  max-width: 1440px; margin: 0 auto; padding: 56px 22px 24px calc(var(--lug) + 14px); align-items: start;
}

/* ---------- the frame ---------- */
.frame { position: relative; min-width: 0; filter: drop-shadow(0 22px 26px rgba(92, 56, 14, .22)) drop-shadow(0 2px 2px rgba(92, 56, 14, .25)); }
.topbar {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 24px; min-height: 78px; padding: 10px 22px 10px 22px;
  background:
    linear-gradient(180deg, rgba(255, 249, 232, .55), rgba(255, 249, 232, 0) 34%, rgba(110, 66, 20, .0) 70%, rgba(110, 66, 20, .22)),
    repeating-linear-gradient(179.2deg, transparent 0 6px, rgba(150, 92, 34, .10) 6px 7px, transparent 7px 15px, rgba(150, 92, 34, .07) 15px 17px, transparent 17px 26px),
    var(--pine);
  border-radius: 3px 3px 0 0; box-shadow: inset 0 1px 0 rgba(255, 252, 240, .7), inset 0 -2px 0 rgba(120, 72, 22, .28);
}
.lug { position: absolute; top: 0; width: var(--lug); height: 46px; background: inherit; background:
    linear-gradient(180deg, rgba(255, 249, 232, .55), rgba(255, 249, 232, 0) 40%, rgba(110, 66, 20, .25)),
    repeating-linear-gradient(179.2deg, transparent 0 6px, rgba(150, 92, 34, .10) 6px 7px, transparent 7px 15px), var(--pine); }
.lug-l { left: calc(var(--lug) * -1); border-radius: 4px 0 0 4px; box-shadow: inset 2px 0 0 rgba(255, 252, 240, .5), inset 0 -2px 0 rgba(120, 72, 22, .3); }
.lug-r { right: calc(var(--lug) * -1); border-radius: 0 4px 4px 0; box-shadow: inset -2px 0 0 rgba(120, 72, 22, .25), inset 0 -2px 0 rgba(120, 72, 22, .3); }
.tb-name { flex: none; }
.tb-name img[data-logo] { display: block; height: 52px; width: auto; }
.tb-mid { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding-right: 56px; }
.burnt { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--burn); text-shadow: 0 1px 0 rgba(255, 246, 222, .7); text-align: right; text-wrap: balance; }
.langs { display: flex; flex: none; border: 1.5px solid rgba(74, 48, 21, .55); border-radius: 3px; overflow: hidden; }
.langs button { border: 0; background: transparent; padding: 5px 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; cursor: pointer; color: var(--burn); }
.langs button + button { border-left: 1.5px solid rgba(74, 48, 21, .55); }
.langs button[aria-pressed="true"] { background: var(--burn); color: var(--cap); }

/* the brass tag nailed across the right lug */
.brass {
  position: absolute; z-index: 4; right: -6px; top: 8px; display: grid; justify-items: start; gap: 0; min-width: 132px; padding: 7px 12px 8px 22px; text-decoration: none;
  color: var(--on-honey); border-radius: 3px; transform: rotate(-2.5deg);
  background: linear-gradient(160deg, #F0D58C 0%, #D2A84E 38%, #B88A33 62%, #E0BE6A 100%);
  box-shadow: 0 1px 0 rgba(255, 245, 210, .8) inset, 0 -1px 0 rgba(90, 60, 10, .35) inset, 0 3px 6px rgba(70, 40, 5, .35);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.brass::before { content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF2C4, #8D6A22 70%); box-shadow: 0 0 0 1px rgba(80, 50, 10, .4); }
.brass-k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.brass-f { font-family: 'Young Serif', Georgia, serif; font-size: 19px; line-height: 1.1; }
.brass:hover { transform: rotate(0deg) translateY(-1px); box-shadow: 0 1px 0 rgba(255, 245, 210, .8) inset, 0 6px 12px rgba(70, 40, 5, .35); }

.fbody { display: grid; grid-template-columns: 214px minmax(0, 1fr) 20px; background: var(--pine-2); }
.botbar { display: block; height: 22px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(110, 66, 20, .25), rgba(255, 249, 232, .25) 30%, rgba(110, 66, 20, .2)), repeating-linear-gradient(179deg, transparent 0 5px, rgba(150, 92, 34, .1) 5px 6px, transparent 6px 13px), var(--pine); }
.endbar { display: block; background: linear-gradient(90deg, rgba(110, 66, 20, .28), rgba(255, 249, 232, .3) 30%, rgba(110, 66, 20, .18)), repeating-linear-gradient(90.6deg, transparent 0 4px, rgba(150, 92, 34, .12) 4px 5px, transparent 5px 11px), var(--pine); }

/* the side bar: the day's schedule as a wooden rule */
.rule {
  position: relative; display: flex; flex-direction: column; padding: 14px 8px 12px 12px; min-height: 100%;
  background: linear-gradient(90deg, rgba(255, 249, 232, .35), rgba(255, 249, 232, 0) 18%, rgba(110, 66, 20, 0) 80%, rgba(110, 66, 20, .3)), repeating-linear-gradient(90.5deg, transparent 0 5px, rgba(150, 92, 34, .1) 5px 6px, transparent 6px 14px, rgba(150, 92, 34, .07) 14px 16px, transparent 16px 23px), var(--pine);
}
.rule-h { margin: 0 0 6px; font: 400 15px/1.2 'Young Serif', Georgia, serif; color: var(--burn); }
.rule-now { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--burn); }
.rule-now .num { font-weight: 700; }
.rule-track { position: relative; flex: 1; min-height: 420px; }
.rule-track::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 26px; border-radius: 2px; background: linear-gradient(90deg, #F4DDB0, #EAC98F); box-shadow: inset 0 0 0 1px rgba(110, 66, 20, .35), inset -2px 0 0 rgba(110, 66, 20, .15); }
.tick { position: absolute; left: 14px; width: 12px; height: 0; border-top: 1.5px solid rgba(74, 48, 21, .75); }
.tick.half { left: 19px; width: 7px; border-top-width: 1px; }
.tick i { position: absolute; right: 13px; top: -6px; font-style: normal; font-size: 9.5px; line-height: 1; font-weight: 700; color: var(--burn); font-variant-numeric: tabular-nums; }
.endl { position: absolute; left: 30px; font-size: 10.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.lead { position: absolute; left: 26px; width: 14px; overflow: visible; } .lead path { stroke: rgba(74, 48, 21, .5); stroke-width: 1; fill: none; }
.pg {
  position: absolute; left: 40px; right: -4px; height: 15px; padding: 0 3px; border: 0; background: none; text-align: left; cursor: pointer;
  font-size: 10.5px; line-height: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 2px; letter-spacing: -.01em;
}
.pg b { display: inline-block; min-width: 30px; font-weight: 700; color: var(--ink-2); }
.pg:hover, .pg.sel { background: rgba(255, 246, 222, .7); }
.pg.on { background: var(--honey); color: var(--on-honey); font-weight: 600; } .pg.on b { color: var(--on-honey); }
.beepin { position: absolute; left: -10px; z-index: 2; height: 0; display: flex; align-items: center; pointer-events: none; transition: top 1s var(--ease); }
.beepin .bee { width: 30px; height: 20px; margin-top: -1px; filter: drop-shadow(0 1px 1px rgba(40, 20, 0, .35)); }
.beepin em { display: none; position: absolute; left: -2px; top: 9px; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--burn); font-variant-numeric: tabular-nums; }
.bee .bw { fill: rgba(250, 252, 255, .85); stroke: rgba(60, 40, 20, .55); stroke-width: .8; }
.bee .bb { fill: #E3A322; stroke: #3B2A14; stroke-width: 1.2; }
.bee .bs { stroke: #3B2A14; stroke-width: 3; stroke-linecap: round; }
.bee .bh { fill: #3B2A14; } .bee .bst { stroke: #3B2A14; stroke-width: 1.6; stroke-linecap: round; }
html.js:not(.static) .beepin .bee { animation: hover 2.6s var(--ease-io) infinite alternate; }
@keyframes hover { from { transform: translateY(-1.5px) rotate(-3deg); } to { transform: translateY(1.5px) rotate(2deg); } }

/* ---------- the comb ---------- */
.comb-area { container-type: inline-size; position: relative; min-width: 0; padding: 12px 14px 14px; background: #E9C878; box-shadow: inset 0 8px 10px -6px rgba(92, 56, 14, .45), inset 6px 0 8px -6px rgba(92, 56, 14, .35), inset -6px 0 8px -6px rgba(92, 56, 14, .3); }
.src-label { margin: 0 0 8px; display: inline-block; padding: 3px 9px 3px 8px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--cap); border: 1px solid rgba(138, 90, 26, .45); border-radius: 2px; box-shadow: 0 1px 2px rgba(92, 56, 14, .2); }
.comb-box { position: relative; }
.comb { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.comb .river-under { stroke: rgba(255, 249, 232, .75); stroke-width: 7; stroke-linecap: round; }
.comb .river { stroke: var(--river); stroke-width: 3.2; stroke-linecap: round; }
.comb .state { stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: 6 4; stroke-linejoin: round; opacity: .85; }
.comb .sp rect { fill: var(--ink); } .comb .sp text { fill: var(--cap); font: 700 10.5px 'Commissioner', sans-serif; letter-spacing: .08em; }
.comb .cell .wall { fill: #A8752C; }
.comb .cell.k-rio .wall { fill: var(--river); }
.comb .cell .hollow { fill: url(#gHollow); }
.comb .cell .wax { fill: url(#gWaxT); }
.comb .cell .dash { fill: none; stroke: rgba(74, 48, 21, .55); stroke-width: 1.4; stroke-dasharray: 3 3; }
.comb .cell .prop { fill: url(#gProp); }
.comb .cell .adt { fill: var(--cap); font: 700 11px 'Commissioner', sans-serif; letter-spacing: .02em; pointer-events: none; }
.comb .cap polygon { fill: url(#gCap); stroke: rgba(176, 140, 70, .55); stroke-width: .8; }
.comb .cap .sheen { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2; stroke-linecap: round; }
.comb .cap .dt { fill: var(--ink-2); font: 700 10.5px 'Commissioner', sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
.comb .honey polygon { fill: url(#gHoney); }
.comb .honey .gloss { fill: rgba(255, 236, 190, .55); }
.comb .honey .dt { fill: var(--on-honey); font: 700 10.5px 'Commissioner', sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
.comb .cap { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .75s var(--ease), opacity .55s var(--ease); }
.comb .honey { transform-box: fill-box; transform-origin: 50% 60%; transform: scale(.2); opacity: 0; transition: transform .8s var(--ease) .12s, opacity .4s var(--ease) .12s; }
.comb .cell.open .cap { transform: translate(6px, -22px) rotate(-16deg) scale(.82); opacity: 0; pointer-events: none; }
.comb .cell.open .honey { transform: none; opacity: 1; }
.comb .cell .ring { fill: none; stroke: var(--ink); stroke-width: 3; opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.comb .cell[tabindex] { cursor: pointer; outline: none; }
.comb .cell[tabindex]:hover .cap polygon { fill: #FFF8E4; }
.comb .cell[tabindex]:hover .ring { opacity: .45; }
.comb .cell:focus-visible .ring, .comb .cell.sel .ring { opacity: 1; }
.comb .cell.k-a:hover .prop { fill: var(--prop); }
.comb .lab { cursor: pointer; outline: none; }
.comb .lab rect { fill: var(--cap); stroke: rgba(138, 90, 26, .75); stroke-width: 1; filter: drop-shadow(0 1.5px 1px rgba(92, 56, 14, .3)); }
.comb .lab .ln { fill: var(--ink); font: 400 15px 'Young Serif', Georgia, serif; }
.comb .lab .ls { fill: var(--ink-3); font: 700 9.5px 'Commissioner', sans-serif; letter-spacing: .06em; }
.comb .lab .nail { fill: #8A6A2A; }
.comb .lab:hover rect, .comb .lab:focus-visible rect { stroke: var(--ink); stroke-width: 2; }
.comb .lab.lab-ad rect { fill: var(--prop-d); stroke: var(--prop-d); }
.comb .lab.lab-ad .ln { fill: var(--cap); }
.comb .lab.lab-ad .nail { fill: #E8C778; }
.comb .lab.lab-edge .ln { font-size: 13px; }
.comb .gridaid text { font: 9px monospace; fill: #2B4A80; }
html.js:not(.static) .comb .cell.lift .honey { animation: glint 1.1s var(--ease) .3s; }
@keyframes glint { 50% { filter: brightness(1.18); } }

/* wire between the town comb and the audio comb */
.wire { position: relative; height: 2px; margin: 14px -14px 12px; background: linear-gradient(180deg, #D9DCDD, #7E8386); }
.wire::before, .wire::after { content: ''; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F2F3F3, #6F7376); }
.wire::before { left: -4px; } .wire::after { right: -4px; }

/* the audio comb */
.audio { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 18px; align-items: center; }
.audio-txt h2 { margin: 0 0 4px; font: 400 26px/1.05 'Young Serif', Georgia, serif; letter-spacing: -.01em; }
.audio-txt p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); max-width: 30ch; }
.audio-txt em { font-style: normal; font-weight: 700; }
.audio-cells { display: flex; gap: 6px; justify-content: flex-start; flex-wrap: nowrap; }
.acell {
  --w: 122px; position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.1547); border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center; text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.acell::before, .acell::after { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.acell::before { background: #A8752C; }
.acell::after { inset: 3px; background: radial-gradient(circle at 46% 38%, #FAE6AE, #EFCB6E 62%, #DDAF4F); transition: transform .5s var(--ease); }
.acell .ac-in { z-index: 1; }
.acell .ac-in { position: relative; display: grid; gap: 3px; justify-items: center; text-align: center; padding: 0 14px; }
.acell b { font: 400 15px/1.12 'Young Serif', Georgia, serif; }
.acell small { font-size: 10.5px; line-height: 1.25; font-weight: 600; color: var(--ink-2); max-width: 11ch; }
.acell:nth-child(even) { margin-top: 28px; }
.acell.file::before { background: var(--river); }
.acell.file::after { background: radial-gradient(circle at 46% 38%, #FBF4E0, #EDE0BE 70%, #DCCB9C); }
.acell.file b { font-size: 14px; }
.acell b.long { font-size: 12.5px; letter-spacing: -.02em; }
.acell:hover::after { transform: scale(.965); }
.acell:focus-visible { outline: none; } .acell:focus-visible::before, .acell.sel::before { background: var(--ink); }
.acell.sel::after { background: radial-gradient(circle at 42% 34%, #E8A23A, #C77A12 60%, #9C5A07); }
.acell.sel small, .acell.sel b { color: var(--on-honey); }

@container (max-width: 700px) {
  .audio { grid-template-columns: 1fr; gap: 8px; }
  .audio-txt p { max-width: 60ch; }
  .audio-cells { justify-content: center; }
  .acell { --w: min(122px, calc((100cqw - 30px) / 4)); }
}
/* ---------- the beekeeper's record card ---------- */
.card {
  position: sticky; top: 20px; margin-top: 0; max-height: calc(100vh - 40px); overflow: auto; overscroll-behavior: contain;
  background: repeating-linear-gradient(180deg, transparent 0 25px, var(--card-line) 25px 26px), var(--card);
  border: 1px solid rgba(138, 90, 26, .35); border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 30px -16px rgba(92, 56, 14, .45);
  scrollbar-width: thin; scrollbar-color: rgba(138, 90, 26, .5) transparent;
}
.card-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ink); color: var(--cap); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.punch { flex: none; width: 14px; height: 16px; background: var(--page); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.card-x { margin-left: auto; border: 0; background: none; color: var(--cap); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; display: none; }
.card.is-open .card-x { display: block; }
.card-sec { padding: 18px 22px 24px; }
.card-sec[hidden] { display: none; }
.rk { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.big { margin: 0 0 14px; font: 400 40px/1.02 'Young Serif', Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.big.mid { font-size: 31px; line-height: 1.06; }
.card p { margin: 0 0 12px; }
.legend { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; line-height: 1.4; }
.legend li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.lg { width: 24px; height: 27px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #A8752C; position: relative; }
.lg::after { content: ''; position: absolute; inset: 2px; clip-path: inherit; }
.lg-cap::after { background: radial-gradient(circle at 44% 36%, #FFFAEB, #EBD9AA); }
.lg-empty::after { background: radial-gradient(circle at 50% 58%, #C98E2C, #EBC676); }
.lg-honey::after { background: radial-gradient(circle at 42% 34%, #E8A23A, #9C5A07); }
.lg-ad::after { background: radial-gradient(circle at 45% 38%, #A65E2A, #7A3F17); }
.rest-more { font-size: 13.5px; color: var(--ink-2); }
.rest-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.go, .read, .s-wa, .s-mail, .s-copy, .s-tel {
  --c: 13px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 calc(var(--c) + 10px); border: 0; cursor: pointer; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--on-honey); background: var(--honey);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% 50%, calc(100% - var(--c)) 100%, var(--c) 100%, 0 50%);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.go:hover, .read:hover, .s-wa:hover { background: #D88A20; }
.go:active, .read:active, .s-wa:active { transform: translateY(1px); }
.go-ad, .s-mail { background: var(--prop-d); color: var(--cap); } .go-ad:hover, .s-mail:hover { background: var(--prop); }
.s-copy, .s-tel { background: #E6CF97; color: var(--ink); } .s-copy:hover, .s-tel:hover { background: #DCC181; }
.go:focus-visible, .read:focus-visible, .s-wa:focus-visible, .s-mail:focus-visible, .s-copy:focus-visible, .s-tel:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
.ext { width: 12px; height: 12px; } .ext path { fill: none; stroke: currentColor; stroke-width: 1.8; }
.srcl { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px !important; }
.hl { margin: 0 0 10px; font: 400 27px/1.12 'Young Serif', Georgia, serif; letter-spacing: -.01em; text-wrap: pretty; }
.gloss { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); font-style: italic; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 14px 0 16px; border-top: 1px solid rgba(138, 90, 26, .4); }
.fields.one { grid-template-columns: 1fr; }
.fields > div { padding: 8px 10px 9px 0; border-bottom: 1px solid rgba(138, 90, 26, .4); min-width: 0; }
.fields dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fields dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; }
.fields dd small { display: block; font-size: 12px; color: var(--ink-2); }
.fields dd.num { font-size: 18px; font-weight: 600; }
.small { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 12px !important; }
.muted { color: var(--ink-2); }
.nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.nb { min-height: 36px; padding: 6px 12px; border: 1.5px solid rgba(74, 48, 21, .55); background: rgba(255, 252, 240, .6); border-radius: 3px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.nb:hover { background: var(--cap); border-color: var(--ink); }
.nb.live { background: linear-gradient(160deg, #F0D58C, #C99A3E); border-color: #8D6A22; }
.stl { font-size: 14px; color: var(--ink-2); }
.slot { padding: 10px 12px; background: rgba(201, 142, 44, .18); border-left: 3px solid var(--honey); font-size: 13.5px; }
.tlist { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid rgba(138, 90, 26, .4); }
.tlist li { border-bottom: 1px solid rgba(138, 90, 26, .4); }
.tlist button, .tlist .tl-e { display: grid; grid-template-columns: 84px 1fr; gap: 8px; width: 100%; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: 14px; line-height: 1.4; }
.tlist .tl-e { cursor: default; color: var(--ink-2); font-size: 13px; }
.tlist button:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.tlist .num { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.spons { display: grid; gap: 2px; padding: 12px; margin-top: 8px; background: rgba(138, 75, 31, .1); border: 1px dashed rgba(110, 57, 18, .6); }
.spons b { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--prop-d); }
.spons span { font-size: 14px; }
.spons .nb { justify-self: start; margin-top: 8px; }
.mark { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; background: var(--ink); color: var(--cap); border-radius: 2px; }
.eps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.eps li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.eps em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.ep-h { flex: none; width: 14px; height: 16px; background: #DDAF4F; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.filel { font-size: 13.5px; padding: 10px 12px; background: rgba(78, 107, 133, .12); border-left: 3px solid var(--river); }
.filel a { font-weight: 700; }
.onair { color: var(--honey-d); }

/* the advertisers' panel */
.prods { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.prods legend { padding: 0; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.prod { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px dashed rgba(138, 90, 26, .5); cursor: pointer; }
.prod input[type=checkbox] { position: absolute; left: 0; top: 12px; width: 28px; height: 32px; margin: 0; opacity: 0; cursor: pointer; }
.sw { width: 28px; height: 32px; background: #A8752C; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); position: relative; }
.sw::after { content: ''; position: absolute; inset: 2.5px; clip-path: inherit; background: radial-gradient(circle at 50% 60%, #C98E2C, #EBC676); transition: background .3s var(--ease); }
.prod input:checked + .sw::after { background: radial-gradient(circle at 42% 34%, #E8A23A, #C77A12 60%, #9C5A07); }
.prod input:checked + .sw::before { content: ''; position: absolute; z-index: 1; left: 9px; top: 9px; width: 9px; height: 13px; border: solid var(--on-honey); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.prod input:focus-visible + .sw { background: var(--ink); }
.pt { display: grid; gap: 3px; min-width: 0; }
.pt b { font: 400 18px/1.15 'Young Serif', Georgia, serif; }
.price { font-size: 13px; font-weight: 700; color: var(--prop-d); }
.pd { font-size: 13px; line-height: 1.5; color: var(--ink); }
.opt { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.opt select { font: inherit; font-weight: 600; color: var(--ink); background: var(--cap); border: 1px solid rgba(138, 90, 26, .6); border-radius: 2px; padding: 4px 6px; max-width: 100%; }
.comp { font-size: 12.5px; line-height: 1.5; padding: 10px 12px; margin: 10px 0 14px !important; background: rgba(59, 42, 20, .07); border-left: 3px solid var(--ink); }
.fields-f, .ask-form .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; border: 0; margin: 0 0 14px; }
.ask-form .fields label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); min-width: 0; }
.ask-form .fields label.wide { grid-column: 1 / -1; }
.ask-form input, .ask-form textarea { width: 100%; min-width: 0; font: 400 15px/1.4 'Commissioner', sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink); background: rgba(255, 252, 242, .85); border: 0; border-bottom: 2px solid rgba(74, 48, 21, .55); border-radius: 2px 2px 0 0; padding: 8px 9px; }
.ask-form input::placeholder, .ask-form textarea::placeholder { color: #8C7550; }
.ask-form input:focus, .ask-form textarea:focus { outline: none; border-bottom-color: var(--honey); background: #FFFDF6; }
.ask-form textarea { resize: vertical; }
.send { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.status { min-height: 1.2em; font-size: 13px; font-weight: 600; margin: 0 0 8px !important; }
.status.warn { color: #8E2F0E; }

/* ---------- phone strip: the hour rule under the frame ---------- */
.strip-wrap { display: none; }

/* ---------- the hive label plate ---------- */
.plate {
  position: relative; max-width: 1440px; margin: 18px auto 40px; margin-left: max(calc(var(--lug) + 18px), calc((100vw - 1440px) / 2 + var(--lug) + 18px)); width: min(980px, calc(100% - var(--lug) - 46px));
  display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 14px 30px; padding: 22px 30px 20px;
  background: linear-gradient(180deg, rgba(255, 249, 232, .35), rgba(110, 66, 20, .08)), repeating-linear-gradient(178.8deg, transparent 0 8px, rgba(150, 92, 34, .09) 8px 9px, transparent 9px 21px), #DDBA80;
  border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(110, 66, 20, .35), inset 0 2px 0 rgba(255, 249, 232, .5), 0 10px 18px -10px rgba(92, 56, 14, .45);
}
.screw { position: absolute; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF2C4, #8D6A22 70%); box-shadow: 0 0 0 1px rgba(80, 50, 10, .45); }
.screw::after { content: ''; position: absolute; left: 1px; right: 1px; top: 4px; height: 2px; background: rgba(70, 45, 10, .7); transform: rotate(35deg); }
.s1 { left: 10px; } .s2 { right: 10px; }
.plate-name h2 { margin: 0; font: 400 32px/1.05 'Young Serif', Georgia, serif; color: var(--burn); letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255, 246, 222, .6); }
.plate-name .fm { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--burn); }
.plate-name .fm span { font-weight: 700; }
.plate-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.plate-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--burn); }
.plate-facts dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.plate-facts .wa { font-size: 11px; font-weight: 700; padding: 0 5px; border: 1px solid rgba(74, 48, 21, .6); border-radius: 2px; margin-left: 2px; }
.plate-model { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(110, 66, 20, .35); font-size: 13px; line-height: 1.55; color: var(--ink); max-width: 90ch; }
.plate-legal { grid-column: 1 / -1; margin: 0; font-size: 12.5px; }

/* the generated seller block sits on the beeswax page */
footer.seller { max-width: 1440px; margin: 0 auto; color: var(--ink); border-top-color: rgba(138, 90, 26, .35); }

/* ---------- tablet: the card leaves the side ---------- */
@media (max-width: 1099px) {
  .hive { grid-template-columns: minmax(0, 1fr); padding: 56px calc(var(--lug) + 14px) 18px; gap: 26px; }
  .card { position: relative; top: auto; max-height: none; overflow: visible; }
  .card.is-open {
    position: fixed; z-index: 50; left: 10px; right: 10px; bottom: 0; top: auto; max-height: 74vh; max-height: 74dvh; overflow: auto; border-radius: 10px 10px 0 0;
    box-shadow: 0 -18px 40px rgba(59, 42, 20, .35); animation: sheet .55s var(--ease);
  }
  .card.is-open .card-head::before { content: ''; position: absolute; left: 50%; top: 4px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(251, 241, 214, .5); }
  .plate { width: auto; margin: 0 calc(var(--lug) + 14px) 30px; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }

/* ---------- phone ---------- */
@media (max-width: 759px) {
  :root { --lug: 12px; }
  body { font-size: 15px; }
  .hive { padding: 14px 10px 10px; gap: 18px; }
  .frame { margin: 0 var(--lug); }
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; min-height: 0; }
  .lug { height: 30px; }
  .tb-name img[data-logo] { height: 40px; }
  .tb-mid { padding-right: 0; flex: 1 1 auto; gap: 10px; }
  .burnt { display: none; }
  .lug-l { display: none; }
  .lug-r { position: static; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; order: 3; flex: 1 1 100%; }
  .brass { position: relative; right: auto; top: auto; transform: none; width: auto; display: flex; align-items: baseline; gap: 10px; padding: 7px 12px 7px 24px; }
  .brass:hover { transform: none; }
  .fbody { grid-template-columns: 8px minmax(0, 1fr) 8px; }
  .rule { display: none; }
  .fbody::before { content: ''; background: var(--pine); }
  .comb-area { padding: 10px 6px 12px; }
  .src-label { font-size: 11.5px; }
  .wire { margin: 12px -6px 12px; }
  .audio { grid-template-columns: 1fr; gap: 10px; }
  .audio-txt { padding: 0 6px; }
  .audio-cells { display: grid; grid-template-columns: repeat(2, 132px); justify-content: center; gap: 0 4px; }
  .acell { --w: 132px; }
  .acell:nth-child(even) { margin-top: 0; }
  .acell:nth-child(-n+2) { transform: translateX(-34px); }
  .acell:nth-child(n+3) { margin-top: -38px; transform: translateX(34px); }
  .card-sec { padding: 16px 16px 22px; }
  .big { font-size: 33px; }
  .big.mid { font-size: 27px; }
  .hl { font-size: 23px; }
  .card.is-open { left: 0; right: 0; max-height: 78vh; max-height: 78dvh; }
  .ask-form .fields { grid-template-columns: 1fr; }
  .strip-wrap { display: block; margin: -4px 0 0; min-width: 0; }
  .strip-h { margin: 0 0 6px 2px; font: 400 18px 'Young Serif', Georgia, serif; }
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 0; padding: 10px 0 12px; border-radius: 3px; scrollbar-width: thin;
    background: linear-gradient(180deg, rgba(255, 249, 232, .45), rgba(110, 66, 20, .18)), repeating-linear-gradient(90.6deg, transparent 0 5px, rgba(150, 92, 34, .1) 5px 6px, transparent 6px 14px), var(--pine); }
  .sp-i { position: relative; flex: none; width: 118px; min-height: 64px; scroll-snap-align: start; display: grid; align-content: start; gap: 2px; padding: 14px 10px 4px; border: 0; border-left: 1.5px solid rgba(74, 48, 21, .55); background: none; text-align: left; cursor: pointer; font-size: 12.5px; line-height: 1.3; }
  .sp-i::before { content: ''; position: absolute; left: -1px; top: 0; width: 1.5px; height: 10px; background: var(--burn); }
  .sp-t { font-size: 11px; font-weight: 700; color: var(--ink-2); }
  .sp-i b { font-weight: 600; }
  .sp-i.on { background: var(--honey); color: var(--on-honey); } .sp-i.on .sp-t { color: var(--on-honey); }
  .sp-i .bee { position: absolute; right: 6px; top: 2px; width: 26px; height: 17px; }
  .sp-end { cursor: default; }
  .plate { grid-template-columns: 1fr; margin: 0 10px 24px; padding: 20px 18px 18px; gap: 12px; }
  .plate-facts { grid-template-columns: 1fr; }
  .plate-name h2 { font-size: 28px; }
}

/* review mode: nothing moves */
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: radio-colmeia */
.ck {
  position: fixed; left: 16px; bottom: 16px; width: min(560px, calc(100vw - 32px)); max-width: none; padding: 11px 150px 12px 16px; margin-top: 30px;
  color: #22272A; font-family: 'Commissioner', sans-serif; font-size: 12px; line-height: 1.45; border-radius: 2px;
  background: linear-gradient(172deg, #C9CDCF 0%, #AEB3B6 46%, #BEC2C4 70%, #A7ACAF 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(40, 44, 48, .35), inset 0 0 0 1px rgba(60, 66, 70, .35), 0 6px 10px -4px rgba(40, 30, 10, .45), 0 1px 1px rgba(40, 30, 10, .4);
}
/* the slotted field: rows of narrow slots punched through the zinc */
.ck::before {
  content: ''; position: absolute; top: 10px; bottom: 10px; right: 12px; width: 124px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #474C50 0 3px, transparent 3px 8px);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 17px, transparent 17px 22px); mask-image: repeating-linear-gradient(180deg, #000 0 17px, transparent 17px 22px);
  box-shadow: inset 0 0 0 1px rgba(60, 66, 70, .2);
}
.ck::after { content: ''; position: absolute; right: 146px; top: 10px; bottom: 10px; width: 1px; background: rgba(60, 66, 70, .35); box-shadow: 1px 0 0 rgba(255, 255, 255, .45); }
.ck .ck-k { display: inline; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3A4044; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); margin-right: 8px; }
.ck .ck-t { display: inline; }
.ck .ck-t b { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 14px; color: #1E2225; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.ck .ck-p { margin-top: 4px; color: #22272A; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
/* the three actions: tabs bent up from the plate's top edge */
.ck .b { position: absolute; left: 14px; top: -27px; margin: 0; gap: 4px; flex-wrap: nowrap; }
.ck .b button, .ck .b a.more {
  display: inline-flex; align-items: center; height: 27px; padding: 0 12px; border: 0; border-radius: 3px 3px 0 0; font: 700 11.5px/1 'Commissioner', sans-serif; letter-spacing: .02em;
  color: #1E2225; background: linear-gradient(180deg, #D6D9DB, #B5BABD); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 1px 0 0 rgba(255, 255, 255, .4), inset -1px 0 0 rgba(60, 66, 70, .35);
}
.ck .b button.ok { color: #F4F5F5; background: linear-gradient(180deg, #4A5054, #2F3438); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.ck .b button:hover, .ck .b a.more:hover { filter: brightness(1.06); }
.ck .b button:focus-visible, .ck .b a.more:focus-visible { outline: 2px solid #3B2A14; outline-offset: 1px; }
.ck .b a.more { text-decoration: underline; text-underline-offset: 2px; }
/* laid on the top bar (main.js moves the plate there) */
.topbar .ck.ck { position: absolute; z-index: 5; left: -8px; right: auto; bottom: 6px; top: auto; margin: 0; width: 61%; min-width: 500px; transform: rotate(-.6deg); transform-origin: 0 100%; }
body:has(.topbar > .ck) .hive { padding-top: 74px; }
@media (max-width: 759px) {
  body:has(.topbar > .ck) .hive { padding-top: 14px; }
  .topbar .ck.ck { position: relative; order: -1; left: auto; right: auto; bottom: auto; flex: 1 1 100%; width: auto; min-width: 0; margin: 30px -4px 4px; transform: none; padding: 12px 104px 12px 14px; }
  .topbar .ck.ck::before { width: 82px; }
  .topbar .ck.ck::after { right: 100px; }
  .ck .b { left: 10px; }
  .ck .b button, .ck .b a.more { padding: 0 10px; }
}

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }