/*
==============================================================================
  AVAVA | Radio Station HTML Template
  shows.css — styles of the Shows page (loaded after style.css)
==============================================================================

  TABLE OF CONTENTS

  01. Week grid — seven days by ten slots, the "now" line, genre filters (the intro lives in style.css)
  02. On air — the day strip, the open show, just played, next up
  03. Programmes — the shelf of programmes with horizontal scroll
  04. Formats — eight recurring formats on a shelf, this week's dates
  05. Hosts — the home-page section, no extra rules (style.css §11)
  06. Become a host — the rules, the four weeks, the demo form
  07. Responsive

==============================================================================
*/

:root {
  --sh-ember8: rgba(201, 80, 42, .08);
  --sh-ember10: rgba(201, 80, 42, .1);
  --sh-ember14: rgba(201, 80, 42, .14);
  --sh-ember55: rgba(201, 80, 42, .55);
  --sh-ember60: rgba(201, 80, 42, .6);
}

.sw-sheet, .oa-sheet, .sp-sheet, .sf-sheet, .bh-sheet { border: 1px solid var(--i12); background: var(--card); }
.sp-sheet { background: var(--paper); }
.sw-sheet { padding: clamp(26px, 2.8vw, 42px) clamp(20px, 2.4vw, 40px); }

/* ============================================================================
   01. Week grid
   ========================================================================= */
.sec--week { background: var(--panel); padding-top: 40px; }
.sw-when { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.sw-now { padding: 9px 13px; border: 1px solid var(--sh-ember55); background: var(--sh-ember10); color: var(--accent); }
.sw-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-bottom: 14px; }
.sw-chip { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--i2); color: var(--i65); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; white-space: nowrap; }
.sw-chip.is-on { border-color: var(--accent); background: var(--sh-ember14); color: var(--accent); }
.sw-chip:hover { border-color: var(--accent); color: var(--accent); }
.sw-dot { width: 8px; height: 8px; }
.sw-dot--i5 { background: var(--i5); }
.sw-dot--accent { background: var(--accent); }
.sw-dot--i75 { background: var(--i75); }
.sw-dot--i42 { background: var(--i42); }
.sw-dot--i28 { background: var(--i28); }
.sw-heads, .sw-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: clamp(4px, .6vw, 10px); }
.sw-day { display: flex; flex-direction: column; gap: 6px; padding-bottom: 9px; border-bottom: 1px solid var(--i2); min-width: 0; }
.sw-day.is-on { border-bottom-color: var(--accent); }
.sw-dl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sw-dl .mono:first-child { color: var(--i7); }
.sw-day.is-on .sw-dl .mono:first-child { color: var(--accent); }
.sw-day .abar { background: var(--i12); }
/* The grid is a day to scale, 06:00 to 06:00: a block sits at its start hour
   and is as tall as it runs. --hr is one hour; the classes below place and
   size the blocks, so the markup carries no inline styles. */
.sw-scroll { position: relative; }
.sw-grid { --hr: 30px; position: relative; margin-top: 10px; }
.sw-hours, .sw-col { position: relative; height: calc(var(--hr) * 24); min-width: 0; }
.sw-hours .mono { position: absolute; left: 0; transform: translateY(-2px); }
.sw-col { background: repeating-linear-gradient(to bottom, var(--i10) 0 1px, transparent 1px calc(var(--hr) * 2)); }
.sw-col.is-on { background-color: var(--sh-ember8); }
.sw-b { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; padding: 6px 8px; background: var(--i12); border-left: 3px solid transparent; text-align: left; text-transform: none; letter-spacing: 0; }
.sw-b:hover { background: var(--i16); }
.sw-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sw-b.is-pick { box-shadow: inset 0 0 0 1px var(--accent); }
.sw-b.is-out { opacity: .18; }
.sw-b.is-out:hover { opacity: .4; }
.sw-h--1 .serif, .sw-h--1 .sw-ct { display: none; }
.sw-g--accent { border-left-color: var(--accent); }
.sw-g--i5 { border-left-color: var(--i5); }
.sw-g--i28 { border-left-color: var(--i28); }
.sw-g--i35 { border-left-color: var(--i35); }
.sw-g--i42 { border-left-color: var(--i42); }
.sw-g--i65 { border-left-color: var(--i65); }
.sw-g--i75 { border-left-color: var(--i75); }
.sw-dot--i65 { background: var(--i65); }
.sw-dot--i35 { background: var(--i35); }
.sw-ct { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--i5); }
.sw-ct .mono { flex: none; color: var(--i5); }
.sw-b .n { font: 600 12px / 1.2 Archivo, sans-serif; color: var(--ink); }
.sw-b .serif { font-size: 12px; line-height: 1.1; color: var(--i7); }
.sw-b.is-reb { background: var(--i10); }
.sw-b.is-auto { background: transparent; border: 1px dashed var(--i2); border-left: 3px solid var(--i2); }
.sw-b.is-on { background: var(--accent); border-left-color: var(--accent); }
.sw-b.is-on .sw-ct .mono, .sw-b.is-on .serif { color: rgba(255, 255, 255, .84); }
.sw-b.is-on .n { color: #fff; }
.sw-b.is-on:hover { background: #E0663D; }
.sw-eq { height: 8px; gap: 1.5px; color: #fff; }
.sw-eq > span { width: 1.5px; }
.sw-at--6 { top: calc(var(--hr) * 0); }
.sw-at--7 { top: calc(var(--hr) * 1); }
.sw-at--8 { top: calc(var(--hr) * 2); }
.sw-at--9 { top: calc(var(--hr) * 3); }
.sw-at--10 { top: calc(var(--hr) * 4); }
.sw-at--11 { top: calc(var(--hr) * 5); }
.sw-at--12 { top: calc(var(--hr) * 6); }
.sw-at--13 { top: calc(var(--hr) * 7); }
.sw-at--14 { top: calc(var(--hr) * 8); }
.sw-at--15 { top: calc(var(--hr) * 9); }
.sw-at--16 { top: calc(var(--hr) * 10); }
.sw-at--17 { top: calc(var(--hr) * 11); }
.sw-at--18 { top: calc(var(--hr) * 12); }
.sw-at--19 { top: calc(var(--hr) * 13); }
.sw-at--20 { top: calc(var(--hr) * 14); }
.sw-at--21 { top: calc(var(--hr) * 15); }
.sw-at--22 { top: calc(var(--hr) * 16); }
.sw-at--23 { top: calc(var(--hr) * 17); }
.sw-at--24 { top: calc(var(--hr) * 18); }
.sw-at--25 { top: calc(var(--hr) * 19); }
.sw-at--26 { top: calc(var(--hr) * 20); }
.sw-at--27 { top: calc(var(--hr) * 21); }
.sw-at--28 { top: calc(var(--hr) * 22); }
.sw-at--29 { top: calc(var(--hr) * 23); }
.sw-h--1 { height: calc(var(--hr) * 1 - 2px); }
.sw-h--2 { height: calc(var(--hr) * 2 - 2px); }
.sw-h--3 { height: calc(var(--hr) * 3 - 2px); }
.sw-h--4 { height: calc(var(--hr) * 4 - 2px); }
.sw-h--5 { height: calc(var(--hr) * 5 - 2px); }
.sw-h--6 { height: calc(var(--hr) * 6 - 2px); }
.sw-h--7 { height: calc(var(--hr) * 7 - 2px); }
/* the minute of now: 22:36 is 16.6 hours into the broadcast day */
.sw-now-at { top: calc(var(--hr) * 16.6); }
.sw-line { position: absolute; left: 56px; right: 0; height: 2px; background: var(--accent); box-shadow: 0 0 14px var(--sh-ember55); pointer-events: none; }
.sw-line-t { position: absolute; left: 0; transform: translateY(-50%); padding: 3px 7px; background: var(--accent); color: #fff; pointer-events: none; }
.sw-pick { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding: 11px 14px; border: 1px solid var(--sh-ember55); background: var(--sh-ember10); }
.sw-pick .n { font: 600 15px / 1.2 Archivo, sans-serif; color: var(--ink); }
.sw-pick .serif { font-size: 16px; color: var(--accent); }
.sw-sw--auto { border: 1px dashed var(--i35); }
.sw-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(18px, 2.2vw, 28px); padding-top: 14px; border-top: 2px solid var(--accent); }
.sw-lg { display: flex; align-items: center; gap: 9px; }
.sw-sw { display: block; width: 14px; height: 14px; }
.sw-sw--on { background: var(--accent); }
.sw-sw--live { background: var(--i16); }
.sw-sw--reb { background: var(--i10); border-left: 3px solid var(--i28); }
.sw-legend .ar-csv { padding: 8px 12px; }

/* ============================================================================
   02. On air
   ========================================================================= */
.sec--onair { background: var(--paper); }
.oa-top { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px clamp(20px, 2.4vw, 40px); border-bottom: 1px solid var(--i12); }
.oa-eq { height: 14px; color: var(--accent); }
.oa-top h2 { font-weight: 400; }
.oa-day { padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.4vw, 40px) 0; }
.oa-day .pe-rh { padding-bottom: 10px; }
.oa-strip { position: relative; display: flex; gap: 2px; height: 14px; margin-top: 26px; }
.oa-seg { min-width: 0; background: var(--i14); }
.oa-seg--1 { flex: 1; }
.oa-seg--2 { flex: 2; }
.oa-seg--3 { flex: 3; }
.oa-seg--4 { flex: 4; }
.oa-seg.is-past { background: var(--i4); }
.oa-seg.is-on { background: var(--accent); }
.oa-seg.is-reb { background-image: repeating-linear-gradient(135deg, var(--i14) 0 5px, transparent 5px 10px); }
.oa-needle { position: absolute; left: 13%; top: -8px; bottom: -8px; width: 2px; background: var(--ink); }
.oa-now { position: absolute; left: 13%; top: -28px; transform: translateX(-50%); padding: 3px 7px; background: var(--accent); color: #fff; white-space: nowrap; }
.oa-labels { display: flex; gap: 2px; padding-top: 9px; }
.oa-lab { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oa-lab .mono { color: var(--i45); }
.oa-lab .n { font: 600 13px / 1.2 Archivo, sans-serif; color: var(--ink); }
.oa-lab.is-on .mono, .oa-lab.is-on .n { color: var(--accent); }
.oa-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .9fr); margin-top: clamp(16px, 1.8vw, 24px); border-top: 2px solid var(--accent); }
.oa-show { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 32px); padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 40px); border-right: 1px solid var(--i14); min-width: 0; }
.oa-cover { flex: none; width: clamp(200px, 22vw, 300px); align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.oa-cover figure { position: relative; flex: 1; width: 100%; min-height: 240px; overflow: hidden; background: var(--i10); }
.oa-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oa-cover figcaption { position: absolute; left: 10px; top: 10px; padding: 4px 9px; background: var(--accent); color: #fff; }
.oa-follow { color: var(--i55); align-self: flex-start; }
.oa-follow:hover { color: var(--accent); }
.oa-info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.oa-info h3 { font-size: clamp(24px, 3vw, 46px); line-height: .96; letter-spacing: -.045em; }
.oa-with { font-size: clamp(18px, 1.9vw, 26px); line-height: 1; color: var(--accent); }
.oa-info > p { font: 400 15px / 1.55 Archivo, sans-serif; color: var(--i75); text-wrap: pretty; }
.oa-player { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.oa-pw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.oa-wave { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.oa-wave > span { flex: 1; min-width: 0; background: var(--i22); }
.oa-wave > span.p { background: var(--accent); }
.oa-prog { background: var(--i14); }
.oa-prog > span { background: var(--accent); }
.oa-pt { display: flex; align-items: baseline; gap: 12px; }
.oa-played { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--i14); }
.oa-played .pe-rh { padding-bottom: 6px; }
.oa-played li { display: flex; align-items: baseline; gap: 11px; padding: 7px 0; border-bottom: 1px solid var(--i10); min-width: 0; }
.oa-played .tm { flex: none; color: var(--i45); }
.oa-played .n { font: 400 14px / 1.3 Archivo, sans-serif; color: var(--i84); }
.oa-played li.is-on .tm, .oa-played li.is-on .n { color: var(--accent); }
.oa-next { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 36px); min-width: 0; }
.oa-nl { display: flex; flex-direction: column; gap: 10px; }
.oa-nl li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 72px; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--i12); min-width: 0; cursor: pointer; }
.oa-nl li:hover { border-bottom-color: var(--accent); }
.oa-nt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oa-nt .tm { color: var(--i5); }
.oa-nt .n { font: 600 14px / 1.2 Archivo, sans-serif; color: var(--ink); }
.oa-nt .serif { font-size: 14px; line-height: 1.15; color: var(--i6); }
.oa-nl li.is-on .tm { color: var(--accent); }
.oa-nc { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.oa-nc .orb { font-size: clamp(14px, 1.4vw, 19px); line-height: 1; color: var(--i75); white-space: nowrap; }
.oa-nl li.is-on .orb { color: var(--accent); }
.oa-nc button { white-space: nowrap; text-transform: none; }
.oa-nc button:hover, .oa-nc button.is-on { color: var(--accent); }
.oa-shift { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--i14); }
.oa-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 13px clamp(20px, 2.4vw, 40px); border-top: 1px solid var(--i14); }
.oa-foot .n { font: 600 15px / 1.2 Archivo, sans-serif; color: var(--ink); }

/* ============================================================================
   03. Programmes
   ========================================================================= */
.sec--programmes { background: var(--card); }
.sp-head { padding: 0 clamp(20px, 2.4vw, 40px); margin-bottom: clamp(14px, 1.8vw, 22px); gap: 20px; }
.sp-h { font-size: clamp(22px, 2.8vw, 44px); line-height: .96; letter-spacing: -.045em; }
.sp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.sp-arrows { display: flex; align-items: center; gap: 6px; }
.sp-arrows button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--i28); color: var(--i7); }
.sp-arrows button:hover { border-color: var(--accent); color: var(--accent); }
.sp-arrows button.is-on { border-color: var(--accent); background: var(--sh-ember14); color: var(--accent); }
.sp-arrows button.is-on:hover { background: var(--accent); color: #fff; }
.sp-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 0 clamp(20px, 2.4vw, 40px) 14px; }
.sp-shelf, .sf-shelf { display: flex; gap: clamp(12px, 1.6vw, 22px); padding: 0 clamp(20px, 2.4vw, 40px) 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
.sp-card { flex: 0 0 clamp(220px, 24vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--i14); min-width: 0; cursor: pointer; }
.sp-card:hover { border-color: var(--accent); }
.sp-card--lead { flex-basis: clamp(300px, 34vw, 420px); border-color: var(--sh-ember60); background: var(--sh-ember8); }
.sp-fig { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--i10); }
.sp-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-card--lead .sp-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(201, 80, 42, .28), transparent 64%); }
.sp-ch, .sp-slot, .sp-on { position: absolute; left: 10px; max-width: calc(100% - 20px); padding: 4px 9px; background: var(--shell); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.sp-ch { top: 10px; }
.sp-slot { bottom: 10px; padding: 3px 8px; }
.sp-on { top: 10px; background: var(--accent); }
.sp-fig .play-btn { position: absolute; right: 12px; bottom: 12px; z-index: 1; background: var(--accent); color: #fff; }
.sp-fig .play-btn:hover { background: #E0663D; }
:root:not([data-theme="dark"]) .sp-fig .play-btn:hover { background: #141110; }
.sp-body { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 12px; min-width: 0; }
.sp-card--lead .sp-body { gap: 9px; padding: 12px; }
.sp-t { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.sp-card--lead .sp-t { font-size: clamp(18px, 1.9vw, 26px); line-height: 1.1; letter-spacing: -.035em; color: var(--accent); }
.sp-body > .serif { font-size: 15px; line-height: 1.15; color: var(--i75); }
.sp-card--lead .sp-body > .serif { font-size: 16px; color: var(--i78); }
.sp-card--lead .abar { background: var(--i14); }
.sp-card--lead .abar > span { background: var(--accent); }
.sp-lead-f { display: flex; align-items: center; gap: 10px; }
.sp-lead-f .link-d { color: var(--i55); }
.sp-lead-f .link-d:hover { color: var(--accent); }
.sp-week { display: flex; align-items: center; gap: 5px; }
.sp-week > i { flex: 1; height: 14px; display: grid; place-items: center; background: var(--i10); font-style: normal; }
.sp-week > i .mono { color: var(--i4); }
.sp-week > i.on { background: var(--accent); }
.sp-week > i.on .mono { color: #fff; }
.sp-last { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--i14); min-width: 0; }
.sp-lt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-lt .clip { font: 400 13px / 1.2 Archivo, sans-serif; color: var(--i82); }
.sp-last .ar-btn { margin-left: auto; }
.sp-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 0 clamp(20px, 2.4vw, 40px); }
.sp-bar { flex: 1 1 200px; background: var(--i14); }
.sp-bar > span { display: block; height: 100%; width: 34%; background: var(--accent); }
.sp-foot .ar-csv { padding: 9px 14px; }

/* ============================================================================
   04. Formats
   ========================================================================= */
.sec--formats { background: var(--paper); }
.sf-sheet .ar-totals .orb { font-size: clamp(16px, 1.7vw, 24px); }
.sf-sheet .ar-totals .sp-arrows { padding-bottom: 2px; }
/* the shelf scrolls, but its own scrollbar stays hidden — the thin ember line
   under the shelf is the progress indicator instead */
.hshelf { scrollbar-width: none; -ms-overflow-style: none; }
.hshelf::-webkit-scrollbar { width: 0; height: 0; }
.sf-shelf { overflow-x: auto; }
.sf-card { flex: 0 0 clamp(250px, 26vw, 330px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--i14); min-width: 0; cursor: pointer; }
.sf-card:hover { border-color: var(--accent); }
.sf-card.is-on { border-color: var(--sh-ember55); background: var(--sh-ember8); }
.sf-no { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sf-t { font-size: clamp(16px, 1.6vw, 21px); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.sf-card.is-on .sf-t { color: var(--accent); }
.sf-n { display: flex; align-items: baseline; gap: 9px; }
.sf-n .orb { font-size: clamp(22px, 2.4vw, 34px); line-height: 1; color: var(--ink); }
.sf-card.is-on .sf-n .orb { color: var(--accent); }
.sf-m { color: var(--i55); white-space: nowrap; }
.sf-card.is-on .sf-m { color: var(--accent); }
.sf-spark { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.sf-spark > span { flex: 1; min-width: 0; background: var(--i22); }
.sf-card.is-on .sf-spark > span { background: rgba(201, 80, 42, .75); }
.sf-card p { font: 400 14px / 1.5 Archivo, sans-serif; color: var(--i75); text-wrap: pretty; }
.sf-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.sf-tag { padding: 5px 9px; border: 1px solid var(--i22); color: var(--i7); white-space: nowrap; }
.sf-card.is-on .sf-tag { border-color: rgba(201, 80, 42, .5); color: var(--accent); }
.sf-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--i14); min-width: 0; }
.sf-fl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sf-fl .serif { font-size: 14px; line-height: 1.15; color: var(--i6); }
.sf-foot .ar-btn { margin-left: auto; }
.sf-sf { padding-bottom: 12px; }
.sf-sf .sp-bar > span { width: 38%; }
.sf-week { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px clamp(20px, 2.4vw, 40px) 0; border-top: 2px solid var(--accent); }
.sf-up { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--i2); color: var(--i7); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; white-space: nowrap; }
.sf-up > span { opacity: .75; }
.sf-up.is-on { border-color: var(--accent); background: var(--sh-ember14); color: var(--accent); }
.sf-up:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   05. Hosts — the home-page section (style.css §11); only the page background differs
   ========================================================================= */
.sec--shows-page { background: var(--card); padding-top: 0; }

/* ============================================================================
   06. Become a host
   ========================================================================= */
.sec--become { background: var(--panel); padding-bottom: 60px; }
.bh-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 14px clamp(24px, 2.6vw, 44px); border-bottom: 1px solid var(--i16); }
.bh-hl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 20px; padding: clamp(22px, 2.6vw, 36px) clamp(24px, 2.6vw, 44px) clamp(14px, 1.6vw, 20px); }
.bh-hl h2 { font-size: clamp(22px, 2.8vw, 44px); line-height: .98; letter-spacing: -.042em; }
.bh-hl .serif { font-size: clamp(18px, 1.9vw, 26px); line-height: 1.1; color: var(--i7); }
.bh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border-top: 2px solid var(--i5); }
.bh-ask { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px) clamp(24px, 2.8vw, 38px); border-right: 1px solid var(--i16); }
.bh-form { display: flex; flex-direction: column; gap: 15px; padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px) clamp(24px, 2.8vw, 38px); }
.bh-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px clamp(24px, 2.6vw, 44px); border-top: 1px solid var(--i16); }
.bh-foot .link-d { color: var(--i6); }
.bh-foot .link-d:hover { color: var(--accent); }

/* ============================================================================
   07. Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .sw-heads, .sw-grid { gap: 3px; }
  .sw-b { padding: 5px 5px; }
}

@media (max-width: 900px) {
  .oa-grid { grid-template-columns: minmax(0, 1fr); }
  .oa-show { border-right: 0; border-bottom: 1px solid var(--i14); }
  .bh-grid { grid-template-columns: minmax(0, 1fr); }
  .bh-ask { border-right: 0; border-bottom: 1px solid var(--i16); }
  .sw-heads, .sw-grid { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
  .sw-line { left: 44px; }
  .sw-line-t { left: 0; }
  .sw-dl .push, .sw-day > .mono { display: none; }
  .sw-b .n { white-space: normal; line-height: 1.1; }
  .sw-b .sw-ct, .sw-b .serif { display: none; }
}

@media (max-width: 760px) {
  .sec--week { padding-top: 24px; }
  .sw-sheet, .sp-head, .sp-chips, .sp-shelf, .sf-shelf, .sp-foot, .sf-week { padding-left: 18px; padding-right: 18px; }
  .oa-top, .oa-day, .oa-show, .oa-next, .oa-foot, .bh-top, .bh-hl, .bh-ask, .bh-form, .bh-foot { padding-left: 18px; padding-right: 18px; }
  .sw-when { width: 100%; }
  .sw-filter .push { margin-left: 0; }
  /* on a phone the week keeps readable columns and scrolls sideways inside
     its sheet; the page opens it on today */
  .sw-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-right: -18px; padding-right: 18px; }
  .sw-heads, .sw-grid { grid-template-columns: 40px repeat(7, 108px); gap: 3px; width: max-content; }
  .sw-grid { --hr: 28px; }
  /* the hours stay put while the days slide under them */
  .sw-hours, .sw-heads > span:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); }
  .sw-hours { box-shadow: 6px 0 10px -6px rgba(0, 0, 0, .5); }
  .sw-hours .mono { left: 4px; }
  .sw-b .sw-ct, .sw-b .serif { display: flex; }
  .sw-b .serif { display: block; }
  .sw-h--1 .serif, .sw-h--1 .sw-ct { display: none; }
  .sw-day { padding-bottom: 6px; }
  .sw-hours .mono { font-size: 12px; }
  .sw-b { padding: 5px 6px; }
  .sw-line { left: 40px; }
  .sw-line-t { display: none; }
  .oa-strip { margin-top: 30px; }
  .oa-labels .n { display: none; }
  .oa-labels .mono { writing-mode: vertical-rl; }
  .oa-cover { width: 100%; }
  .oa-cover figure { min-height: 200px; }
  .oa-nl li { grid-template-columns: 44px minmax(0, 1fr); }
  .oa-nc { grid-column: 2; flex-direction: row; align-items: baseline; }
  .sp-card, .sp-card--lead { flex-basis: min(300px, 82vw); }
  .sf-card { flex-basis: min(300px, 82vw); }
  .sp-meta { width: 100%; }
  .ar-totals, .ar-totals ul { flex-wrap: wrap; row-gap: 14px; }
  .ar-totals { width: 100%; }
  .ar-totals .mono { white-space: normal; }
  .sf-up { white-space: normal; }
  .bh-hl .serif { font-size: 17px; }
}

/* on air, live: follow and remind hold their mark */
.oa-follow.is-on, .js-oa-remind.is-on { color: var(--accent); }
.js-oa-remind { cursor: pointer; }
.oa-lab.oa-seg--1 .mono { visibility: hidden; }

/* programmes, live: the channel chips hide cards, Show all lays the shelf out
   as a wall, the name of a programme finds it in the week above */
.sp-card[hidden] { display: none; }
.sp-t { text-align: left; min-width: 0; }
.sp-t:hover { color: var(--accent); }
.sp-week > i.reb { background: repeating-linear-gradient(135deg, var(--i16) 0 3px, transparent 3px 6px); }
.sp-shelf.is-all { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
.sp-shelf.is-all .sp-card { flex: 1 1 clamp(220px, 22vw, 280px); }
.sp-shelf.is-all ~ .sp-foot .sp-bar, .sp-shelf.is-all ~ .sp-foot .sp-bar + .mono { visibility: hidden; }
.sf-card.is-pick { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sf-n .orb { white-space: nowrap; }

/* become a host, live: the open slots come from the schedule, the form checks
   itself and keeps the note of what was sent */
.bh-open { display: flex; flex-direction: column; gap: 9px; }
.bh-open ul { display: flex; flex-direction: column; gap: 6px; }
.bh-open li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 9px 12px; border-left: 2px solid var(--accent); background: var(--sh-ember8); }
.bh-open .n { font: 600 14px / 1.2 Archivo, sans-serif; color: var(--ink); }
.bh-sel { width: 100%; padding: 6px 22px 6px 0; border: 0; border-bottom: 1px solid var(--i28); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9502A'/%3E%3C/svg%3E") no-repeat right 4px center; color: var(--ink); font: 400 16px / 1.3 Archivo, sans-serif; -webkit-appearance: none; appearance: none; cursor: pointer; }
.bh-sel:focus { outline: none; border-bottom-color: var(--accent); }
.bh-sel option { background: var(--card); color: var(--ink); }
.bh-form .field input.is-err, .bh-sel.is-err { border-bottom-color: var(--accent); }
.bh-note { letter-spacing: .08em; }
.bh-note.is-err, .bh-note.is-ok { color: var(--accent); }
.js-rec-play.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }