/* ============================================================================
   AVAVA Radio — Notes from the studio (the journal)
   Own styles for blog.html. Everything shared (header, crumbs, page intro,
   footer, mono/dim helpers, ember buttons) lives in style.css.

   01. The journal frame and its three columns
   02. Shared pieces of both sidebars
   03. Left sidebar: sections, archive, drawer, tags, writers
   04. The entries and the pager
   05. Right sidebar: on air, partner slots, reading, comments, letter
   06. Responsive ≤1100px / ≤760px
   ========================================================================= */

/* ------------------------------------ 01. frame and the three columns --- */
.bl-sec-wrap { padding-top: 40px; padding-bottom: 60px; }   /* the handoff's own rhythm */
.bl-bar-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--i18); }

.bl-grid { display: grid; grid-template-columns: clamp(200px, 17vw, 270px) minmax(0, 1fr) clamp(240px, 20vw, 320px); gap: clamp(20px, 2.6vw, 44px); padding-top: clamp(20px, 2.4vw, 34px); }
/* Both sidebars stand still while the entries scroll past them. The prototype
   also gives them their own scrollbar (max-height + overflow-y); the owner
   asked for that to go — a rail scrolling inside itself is unpleasant — so they
   simply keep their full height and stick by the top. */
.bl-side { display: flex; flex-direction: column; min-width: 0; position: sticky; top: 20px; align-self: start; }
.bl-side--l { gap: clamp(20px, 2.4vw, 30px); }
.bl-side--r { gap: clamp(18px, 2.2vw, 24px); }

/* ---------------------------------------- 02. pieces both sides share --- */
.bl-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bl-block--top { gap: 9px; padding-top: 14px; border-top: 2px solid var(--ink); }
.bl-block--tight { gap: 10px; }   /* the follow row sits closer to its heading */
.bl-cap { padding-bottom: 9px; border-bottom: 2px solid var(--ink); }
.bl-name { font: 400 14px / 1.3 Archivo, sans-serif; min-width: 0; }
.bl-bar { display: block; height: 5px; background: var(--i10); }
.bl-bar > i { display: block; height: 100%; background: var(--i4); }
.bl-bar--s { height: 3px; }
.bl-bar--on > i { background: var(--accent); }

/* --------------------------------------------- 03. the left sidebar ---- */
.bl-live { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }

.bl-secs, .bl-drafts, .bl-whos, .bl-months, .bl-tags, .bl-reads, .bl-plays, .bl-cms, .bl-follows, .bl-trks { list-style: none; }
.bl-secs { display: flex; flex-direction: column; gap: 11px; }
.bl-sec { display: flex; flex-direction: column; gap: 5px; }
.bl-sec-t { display: flex; align-items: baseline; gap: 10px; }
.bl-sec-t .mono { color: var(--i45); }
.bl-sec--on .bl-name, .bl-sec--on .bl-sec-t .mono { color: var(--accent); }
.bl-sec--on .bl-bar > i { background: var(--accent); }

.bl-year { display: flex; align-items: baseline; gap: 10px; }
.bl-year-n { font: 800 26px / 1 Orbitron, sans-serif; }
/* the hairlines between the months are the grid's own background */
.bl-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--i14); }
.bl-mo { display: flex; flex-direction: column; gap: 3px; padding: 9px 8px; background: var(--paper); color: var(--i55); }
.bl-mo .mono:last-child { color: var(--i45); }
.bl-mo--on { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--accent); color: var(--accent); }
.bl-mo--on .mono, .bl-mo--on .mono:last-child { color: var(--accent); }

.bl-years { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.bl-yrs { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.bl-yrs > span { flex: 1; background: var(--i35); }
.bl-yrs > span.is-on { background: var(--accent); }
.bl-yrs-t { display: flex; }

.bl-drafts { display: flex; flex-direction: column; gap: 12px; }
.bl-draft { display: flex; flex-direction: column; gap: 6px; }
.bl-draft-t { display: flex; align-items: baseline; gap: 10px; }
.bl-draft .bl-name { line-height: 1.35; }

.bl-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.bl-tag { padding: 7px 10px; border: 1px solid var(--i16); background: none; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; line-height: normal; color: var(--i6); white-space: nowrap; cursor: pointer; }
.bl-tag:hover { border-color: var(--accent); color: var(--accent); }
.bl-tag.is-on { border-color: var(--accent); color: var(--accent); }
.bl-tag--more { border: 0; padding: 8px 11px; color: var(--i45); }   /* the overflow tag carries no frame, as in the prototype */

.bl-whos { display: flex; flex-direction: column; gap: 9px; }
.bl-who { display: flex; align-items: baseline; gap: 10px; }

/* ------------------------------------------------- 04. the entries ----- */
.bl-feed { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 44px); min-width: 0; }
.bl-post { display: grid; grid-template-columns: clamp(58px, 7%, 78px) minmax(0, 1fr); gap: 18px; }
.bl-post--lead { padding-bottom: 26px; border-bottom: 1px solid var(--i14); }
.bl-track { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.bl-track .mono { color: var(--i45); }
.bl-no { font: 800 clamp(22px, 2.6vw, 34px) / .9 Orbitron, sans-serif; color: var(--i55); }
.bl-post--lead .bl-no { font-weight: 900; font-size: clamp(26px, 3vw, 40px); color: var(--accent); }
.bl-post--lead .bl-track .mono { color: var(--accent); }
.bl-stem { width: 2px; flex: 1; min-height: 40px; background: var(--i18); }
.bl-post--lead .bl-stem { background: var(--accent); }

.bl-body { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.bl-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.bl-date { color: var(--i6); }
.bl-post--lead .bl-date { color: var(--accent); }
.bl-by { font-size: 15px; line-height: 1.2; color: var(--i6); }
.bl-meta .push { white-space: nowrap; }
.bl-t { margin: 0; font: 700 clamp(24px, 3.1vw, 42px) / .98 'Bricolage Grotesque', sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.bl-t a:hover { color: var(--accent); }
.bl-lead { font: 400 clamp(15px, 1.5vw, 17px) / 1.6 Archivo, sans-serif; color: var(--i6); text-wrap: pretty; }
/* the photograph ships with the template; the hatching stays as its backing */
.bl-photo { position: relative; aspect-ratio: 21 / 9; background: repeating-linear-gradient(135deg, var(--i10) 0 9px, var(--i16) 9px 18px); }
.bl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bl-hour { display: flex; flex-direction: column; gap: 7px; }
.bl-hour-bar { position: relative; display: block; height: 10px; background: var(--i10); }
.bl-hour-bar > i { position: absolute; top: 0; bottom: 0; background: var(--accent); }
.bl-hour-t { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* the hairlines between the tracks are the grid's own background */
.bl-trks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--i14); }
.bl-trk { display: flex; align-items: baseline; gap: 9px; padding: 10px 12px; background: var(--paper); }
.bl-trk .mono { flex: none; }

.bl-filed { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.bl-filed .push { white-space: nowrap; }

.bl-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.bl-older { padding: 13px 20px; border: 0; background: var(--shell); color: #fff; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: normal; cursor: pointer; }
.bl-older:hover { background: var(--accent); }
.bl-pages { display: flex; align-items: center; border: 1px solid var(--i28); }
.bl-page { padding: 10px 13px; border: 0; background: none; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; color: var(--i6); cursor: pointer; }
.bl-page:hover { color: var(--accent); }
.bl-page.is-on { background: var(--accent); color: #fff; }

/* --------------------------------------------- 05. the right sidebar --- */
.bl-air { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bl-air-t { display: flex; align-items: center; gap: 9px; }
.bl-air-t .mono { white-space: nowrap; }
.bl-air-eq { display: inline-flex; align-items: flex-end; flex: none; }
.bl-air-eq .eq { height: 12px; gap: 2px; color: var(--accent); }
.bl-air-eq .eq > span { width: 2px; }
.bl-air-n { font: 700 20px / 1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.bl-air-w { font-size: 15px; line-height: 1.2; color: var(--i6); }
.bl-air-f { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.bl-air-f .mono { white-space: nowrap; }

.bl-slot-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bl-slot-h { display: flex; align-items: baseline; gap: 10px; }
/* the partner slots keep their height and take a real creative as they are */
/* the slot's height is the creative's own: the dashed frame sits outside it */
.bl-slot { position: relative; box-sizing: content-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 100%; border: 1px dashed var(--i28); background: repeating-linear-gradient(135deg, var(--i10) 0 10px, var(--i16) 10px 20px); overflow: hidden; }
/* the slot keeps the creative's own 300 x 250: it never grows past 300px wide
   and its height follows the width, so nothing is stretched or cropped */
.bl-slot--250 { max-width: 300px; aspect-ratio: 6 / 5; }
.bl-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-slot:hover { border-color: var(--accent); }
.bl-slot-n { font: 700 18px / 1.15 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; color: var(--i55); text-align: center; }
.bl-slot-note { line-height: 1.6; }

.bl-reads { display: flex; flex-direction: column; gap: 12px; }
.bl-read { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--i14); color: var(--i45); }
.bl-read:hover { border-bottom-color: var(--accent); }
.bl-read--on { color: var(--accent); }
.bl-read-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bl-read-t { font: 600 14px / 1.3 Archivo, sans-serif; color: var(--ink); text-wrap: pretty; }

.bl-plays { display: flex; flex-direction: column; gap: 12px; }
.bl-play { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--i14); }
.bl-play:hover { border-bottom-color: var(--accent); }
.bl-play .mono { flex: none; }

.bl-cms { display: flex; flex-direction: column; gap: 12px; }
.bl-cm { display: flex; flex-direction: column; gap: 6px; padding-bottom: 11px; border-bottom: 1px solid var(--i14); }
.bl-cm--last { padding-bottom: 0; border-bottom: 0; }
.bl-cm-t { display: flex; align-items: baseline; gap: 9px; }
.bl-cm-t .push { flex: none; }
.bl-quote { font: 400 14px / 1.45 Archivo, sans-serif; color: var(--i7); text-wrap: pretty; }

.bl-keep { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 16px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bl-keep-n { display: flex; align-items: baseline; gap: 9px; }
.bl-keep-s { font: 800 28px / 1 Orbitron, sans-serif; }
.bl-keep .bl-bar { background: var(--i12); }
.bl-keep-b { justify-content: center; padding: 11px 16px; letter-spacing: .18em; line-height: normal; }
.bl-keep-b:hover { background: var(--shell); color: #fff; }

.bl-ep { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--i18); }
.bl-ep:hover { border-color: var(--accent); }
.bl-ep-t { font: 700 18px / 1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); }
.bl-ep-wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.bl-ep-wave > span { flex: 1; background: var(--i28); }
.bl-ep-wave > span.is-on { background: var(--accent); }

.bl-letter { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--i18); }
.bl-letter-x { font: 400 15px / 1.5 Archivo, sans-serif; color: var(--i6); text-wrap: pretty; }
/* the journal's own field is a shade larger than the site default */
.bl-letter-f { display: flex; align-items: center; gap: 10px; }
.bl-letter .rq { padding: 12px 0; font-size: 17px; border-bottom-color: var(--i45); }
.bl-send { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: var(--accent); color: #fff; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; line-height: normal; cursor: pointer; }
.bl-send:hover { background: var(--shell); }

.bl-follows { display: flex; flex-wrap: wrap; gap: 7px; }
.bl-follow { padding: 8px 11px; border: 1px solid var(--i2); background: none; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; color: var(--i75); cursor: pointer; }
.bl-follow:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------- 06. responsive ------ */
@media (max-width: 1100px) {
  /* the rails stop hanging on and fall in under the entries */
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-side { position: static; max-height: none; overflow: visible; }
  .bl-side--r { order: 3; }
  .bl-feed { order: 2; }
  .bl-side--l { order: 1; }
}

@media (max-width: 760px) {
  .bl-sec-wrap { padding-bottom: 40px; }
  .bl-post { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bl-track { flex-direction: row; align-items: baseline; gap: 12px; }
  .bl-stem { display: none; }
  .bl-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}