/* ============================================================
   AIRTIME ASIA .ORG — Pirate Radio Station at 2am
   Stance: signal found, dial locked, everything legible.
   Reference: NTS Radio taxonomy model + Boiler Room dark editorial
   ============================================================ */

/* ── PALETTE ROLES ──────────────────────────────────────────
   bg          #0A0A0B  room / page canvas
   surface     #141416  panel / card
   surface2    #1C1C1F  slightly lighter panel (hover states)
   body text   #EDE8DE  warm off-white — readable at body size
   muted       #8A857C  labels, timestamps, secondary
   primary     #FDCF00  gold "signal" — action, CTA
   accent      #FC00AF  magenta — links, category active states
   precious    #F99300  Omi orange — ONE moment only: the live dial glow

   Category "frequency bands" (each category gets one, used nowhere else in nav):
   dispatches  #FDCF00  gold
   sounds      #FC00AF  magenta
   field-notes #08C141  green
   artists     #0084FC  azure
   tech        #D5FF22  lime-yellow
   ────────────────────────────────────────────────────────── */

:root {
    --bg:           #0A0A0B;
    --surface:      #141416;
    --surface2:     #1C1C1F;
    --border:       rgba(255,255,255,0.08);
    --border-med:   rgba(255,255,255,0.14);
    --text:         #EDE8DE;
    --muted:        #8A857C;
    --muted-dark:   #5A5650;
    --primary:      #FDCF00;
    --accent:       #FC00AF;
    --precious:     #F99300;

    /* Category band colors */
    --cat-dispatches:  #FDCF00;
    --cat-sounds:      #FC00AF;
    --cat-fieldnotes:  #08C141;
    --cat-artists:     #0084FC;
    --cat-tech:        #D5FF22;

    --radius:       0px;
    --radius-sm:    0px;

    --font-display: 'Baumans', sans-serif;
    --font-body:    'Roboto', sans-serif;

    --max-w:        1100px;
    --max-w-prose:  740px;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* ── BASE ────────────────────────────────────────────────── */
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--accent);
}

img {
    display: block;
    max-width: 100%;
}

/* ── THIN LABEL OVERRIDE (webkit subpixel fix) ───────────── */
.label,
.category-tag,
.post-meta,
.band-label,
.timestamp,
.freq-label {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 400; /* Baumans is a single-weight rounded display */
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
h4 { font-size: 1rem; letter-spacing: 0.04em; }

em { font-style: normal; }

.display-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.container--prose {
    max-width: var(--max-w-prose);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── TICKER ──────────────────────────────────────────────── */
.ticker-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 34px;
    background: var(--surface);
    border-bottom: 1px solid var(--primary);
    overflow: hidden;
    z-index: 200;
}

.ticker {
    display: flex;
    align-items: center;
    height: 100%;
}

.ticker__inner {
    display: inline-block;
    white-space: nowrap;
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.12em;
    padding-left: 100%;
    animation: ticker-scroll 50s linear infinite;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ── HEADER / NAV ────────────────────────────────────────── */
.site-header {
    margin-top: 34px; /* clear the fixed ticker */
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 34px;
    background: rgba(10,10,11,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.site-logo img {
    /* Official AIRTIME ASIA wordmark lockup, trimmed of padding */
    height: 44px;
    width: auto;
    filter: none;
}

.site-logo__wordmark {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: var(--text);
    line-height: 1.2;
}

.site-logo__wordmark span {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
}

.site-nav li a,
.site-nav li button {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
    text-decoration: none;
    padding: 6px 14px;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.15s ease;
    display: block;
}

.site-nav li a:hover { color: var(--text); }

.site-nav li a.active { color: var(--primary); }

/* Instagram icon link — inherits nav color, brightens on hover */
.site-nav__ig { display: flex; align-items: center; }
.site-nav__ig svg { display: block; }

/* Hamburger toggle — desktop hides it; revealed only on mobile (see media query) */
.nav-burger, .nav-toggle { display: none; }

/* Record Pool — disabled/future slot */
.site-nav li a.nav--disabled {
    color: var(--muted-dark);
    cursor: default;
    pointer-events: none;
    position: relative;
}

.site-nav li a.nav--disabled::after {
    content: 'SOON';
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    color: var(--precious);
    vertical-align: super;
    margin-left: 4px;
}

/* ── FREQUENCY BAND RAIL (category rack) ─────────────────── */
/* The horizontal band rail below the header on home */
.freq-rail {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.freq-rail::-webkit-scrollbar { display: none; }

.freq-rail__inner {
    display: flex;
    align-items: stretch;
    min-width: max-content;
}

.freq-band {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    text-decoration: none;
    border-right: 1px solid var(--border);
    transition: background 0.15s ease;
    position: relative;
    white-space: nowrap;
}

.freq-band:hover {
    background: var(--surface2);
}

/* Empty category (no posts yet): present in the taxonomy, but inert */
.freq-band--empty {
    pointer-events: none;
    opacity: 0.4;
}

/* The colored "tuner needle" at the top of each band cell */
.freq-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--band-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.freq-band:hover::before,
.freq-band.active::before {
    opacity: 1;
}

.freq-band__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--band-color);
    flex-shrink: 0;
}

.freq-band__label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.15s ease;
}

.freq-band:hover .freq-band__label,
.freq-band.active .freq-band__label {
    color: var(--band-color);
}

.freq-band__count {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--muted-dark);
}

/* Band color vars applied per-band */
.band--dispatches  { --band-color: var(--cat-dispatches); }
.band--sounds      { --band-color: var(--cat-sounds); }
.band--fieldnotes  { --band-color: var(--cat-fieldnotes); }
.band--artists     { --band-color: var(--cat-artists); }
.band--tech        { --band-color: var(--cat-tech); }

/* ── CATEGORY TAG (inline pill on post cards / headers) ──── */
.category-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tag-color, var(--primary));
    border: 1px solid var(--tag-color, var(--primary));
    padding: 3px 8px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.category-tag:hover {
    background: var(--tag-color, var(--primary));
    color: var(--bg);
}

.tag--dispatches  { --tag-color: var(--cat-dispatches); }
.tag--sounds      { --tag-color: var(--cat-sounds); }
.tag--fieldnotes  { --tag-color: var(--cat-fieldnotes); }
.tag--artists     { --tag-color: var(--cat-artists); }
.tag--tech        { --tag-color: var(--cat-tech); }

/* ── HOME: STATION FRONT ─────────────────────────────────── */
.station-hero {
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

/* Subtle background noise / radio static texture via SVG filter */
.station-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 80% 50%,
        rgba(253, 207, 0, 0.04) 0%,
        transparent 70%);
    pointer-events: none;
}

.station-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.station-hero__text {}

.station-hero__eyebrow {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.station-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--muted);
}

.station-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 20px;
}

.station-hero__title em {
    color: var(--primary);
    font-style: normal;
}

.station-hero__sub {
    font-size: 1rem;
    color: var(--muted);
    max-width: 420px;
    line-height: 1.6;
}

/* ── THE DIAL — Omi as live signal source ────────────────── */
/* Precious: the ONLY use of #F99300 orange glow */
.station-dial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.station-dial__omi-wrap {
    position: relative;
    width: 360px;
    height: 360px;
}

.station-dial__omi {
    width: 360px;
    height: 360px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    animation: dial-pulse 4s ease-in-out infinite;
}

/* The precious orange glow — only here */
.station-dial__omi-wrap::after {
    content: '';
    position: absolute;
    inset: -56px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,147,0,0.30) 0%, transparent 68%);
    animation: glow-breathe 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes dial-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

@keyframes glow-breathe {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

.station-dial__status {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--precious);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dial-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--precious);
    animation: live-blink 1.4s step-end infinite;
}

@keyframes live-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.station-dial__freq {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--muted-dark);
    text-align: center;
}

/* ── HOME: POSTS GRID ────────────────────────────────────── */
.posts-section {
    padding: 48px 0 80px;
}

.posts-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.posts-section__title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.posts-section__all {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.posts-section__all:hover { color: var(--primary); }

/* Antenna poles as decorative section divider */
.poles-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    margin: 40px 0;
    opacity: 0.7;
}

.poles-divider img {
    height: 100px;
    width: auto;
}

/* Post list — main feed style (not card grid) */
.post-list {
    list-style: none;
}

.post-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.post-item:first-child {
    border-top: 1px solid var(--border);
}

.post-item:hover {
    background: transparent;
}

.post-item:hover .post-item__title {
    color: var(--primary);
}

.post-item__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.post-item__date {
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--muted-dark);
    text-transform: uppercase;
}

.post-item__body {}

.post-item__title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 10px;
    transition: color 0.15s ease;
    letter-spacing: 0;
}

.post-item__excerpt {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 60ch;
    margin-bottom: 14px;
}

.post-item__footer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.read-link {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.read-link:hover { color: var(--primary); }

/* ── FEATURED POST (top of feed, larger) ─────────────────── */
.post-item--featured {
    grid-template-columns: 1fr;
    padding: 32px 0;
    background: var(--surface);
    padding: 32px 28px;
    margin-bottom: 0;
    border: 1px solid var(--border-med);
}

.post-item--featured .post-item__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.post-item--featured .post-item__excerpt {
    font-size: 1rem;
    max-width: 72ch;
}

/* ── VINYL MARKER ────────────────────────────────────────── */
.vinyl-marker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 48px 0 32px;
}

.vinyl-marker img {
    width: 32px;
    height: 32px;
    opacity: 0.7;
}

.vinyl-marker__label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── CATEGORY INDEX PAGE ─────────────────────────────────── */
.category-hero {
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

/* The category band color runs as a 4px top stripe on the body (not a card stripe) */
.category-hero__band {
    position: fixed;
    top: 34px; /* below ticker */
    left: 0;
    right: 0;
    height: 4px;
    background: var(--cat-band-color, var(--primary));
    z-index: 99;
}

.category-hero__eyebrow {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cat-band-color, var(--primary));
    margin-bottom: 12px;
}

.category-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 16px;
}

.category-hero__desc {
    font-size: 1rem;
    color: var(--muted);
    max-width: 52ch;
    line-height: 1.65;
}

.category-hero__freq {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--muted-dark);
}

/* ── BLOG POST PAGE ──────────────────────────────────────── */
/* The post "transmission" header */
.post-header {
    padding: 64px 0 40px;
    border-bottom: 1px solid var(--border);
}

/* Fixed category band on post pages */
.post-band-line {
    position: fixed;
    top: 34px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--post-cat-color, var(--primary));
    z-index: 99;
}

.post-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.post-header__breadcrumb a {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.post-header__breadcrumb a:hover { color: var(--text); }

.post-header__breadcrumb span {
    color: var(--muted-dark);
    font-size: 0.7rem;
}

.post-header__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 20px;
    max-width: 22ch;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.post-meta__timestamp {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.post-meta__timestamp strong {
    color: var(--text);
    font-weight: 500;
}

.post-meta__author {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--muted);
}

/* Post body prose */
.post-body {
    padding: 56px 0;
}

.post-body p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text);
    max-width: 68ch;
    margin-bottom: 24px;
}

.post-body h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--text);
    margin: 40px 0 16px;
    letter-spacing: 0;
}

.post-body h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--muted);
    margin: 32px 0 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-body blockquote {
    /* No border-left stripe. The quote stands on its type alone. */
    background: var(--surface);
    padding: 24px 28px;
    margin: 32px 0;
    border: 1px solid var(--border-med);
    max-width: 58ch;
}

.post-body blockquote p {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text);
    font-style: normal;
}

/* ── POST IMAGES (figure + credit caption) ───────────────── */
.post-body figure {
    margin: 40px 0;
    max-width: 68ch;
}

.post-body figure.post-hero {
    max-width: 100%;
    margin-top: 0;
}

.post-body figure img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border-med);
}

.post-body figcaption {
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--muted);
}

.post-body figcaption a { color: var(--muted); text-decoration: underline; }
.post-body figcaption a:hover { color: var(--text); }

/* ── PULL-QUOTE — the brand "Poles" motif: colored rod + bead caps ──── */
.pullquote {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin: 52px 0;
    max-width: 62ch;
}
.pq-pole {
    flex: 0 0 14px;
    align-self: stretch;
    position: relative;
    border: 2px solid #000;
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16'%3E%3Cpath d='M1 0 L13 8 L1 16' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: center top;
}
.pq-pole::before,
.pq-pole::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #7BEFE9;
    border: 2px solid #000;
}
.pq-pole::before { top: -24px; }
.pq-pole::after { bottom: -24px; }
.pq-pole.c-pink { background-color: #FC00AF; }
.pq-pole.c-blue { background-color: #0084FC; }
.pq-pole.c-red  { background-color: #C30716; }
.pq-pole.c-red::before,
.pq-pole.c-red::after { background: #D5FF22; }
.pq-text {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text);
    padding: 2px 0;
}
/* Optional attribution: wrap pq-text in .pq-body and add a .pq-cite line.
   Posts without attribution keep using a bare .pq-text child (unchanged). */
.pq-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pq-cite {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.4;
}

/* ── POST NAV (tune up/down the dial) ────────────────────── */
.post-nav {
    border-top: 1px solid var(--border);
    padding: 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.post-nav__item {
    text-decoration: none;
    padding: 20px;
    border: 1px solid var(--border);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.post-nav__item:hover {
    border-color: var(--border-med);
    background: var(--surface);
}

.post-nav__direction {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.post-nav__title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
    line-height: 1.3;
    transition: color 0.15s ease;
}

.post-nav__item:hover .post-nav__title {
    color: var(--primary);
}

.post-nav__item--next {
    text-align: right;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 40px 0;
    background: var(--bg);
}

.site-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-footer__brand img {
    height: 26px;
    width: auto;
    opacity: 0.85;
}

.site-footer__name {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
}

.site-footer__links {
    display: flex;
    gap: 20px;
    list-style: none;
}

.site-footer__links a {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer__links a:hover { color: var(--muted); }

.site-footer__signal {
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--muted-dark);
    text-align: right;
}

/* ── BUTTON ──────────────────────────────────────────────── */
.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--primary);
    padding: 12px 28px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn:hover {
    background: transparent;
    color: var(--primary);
    outline: 1px solid var(--primary);
    transform: translateY(-1px);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .station-hero__inner {
        grid-template-columns: 1fr;
    }

    .station-dial {
        flex-direction: column;
        align-items: center;
        margin-top: 32px;
    }

    .station-dial__omi-wrap {
        width: min(300px, 82vw);
        height: min(300px, 82vw);
    }

    .station-dial__omi {
        width: min(300px, 82vw);
        height: min(300px, 82vw);
    }

    .post-item {
        /* !important overrides the inline 120px 1fr so rows stack full-width on mobile */
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .post-item__meta {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .post-nav {
        grid-template-columns: 1fr;
    }

    .post-nav__item--next {
        text-align: left;
    }

    /* Mobile: collapse the menu behind a hamburger toggle (CSS-only) */
    .site-header {
        position: static;
    }

    .site-header .container {
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    .nav-burger {
        display: flex;
        align-items: center;
        margin-left: auto;       /* push to the right of the logo */
        padding: 4px;
        color: var(--muted);
        cursor: pointer;
    }
    .nav-burger:hover { color: var(--text); }

    /* Keyboard access. The toggle is display:none on desktop, which drops it out
       of the tab order entirely, so on mobile the menu could be tapped but never
       reached by keyboard. Here it is visually hidden INSTEAD of removed, so it
       stays focusable. display must be reset explicitly or the desktop
       `.nav-burger, .nav-toggle { display: none }` rule still wins. */
    .nav-toggle {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .nav-toggle:focus-visible ~ .nav-burger {
        color: var(--text);
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

    .site-header nav {
        display: none;           /* menu hidden until toggled */
        width: 100%;
        order: 3;                /* drops to a full-width row below logo + burger */
    }
    .nav-toggle:checked ~ nav { display: block; }

    .site-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        padding: 8px 0 4px;
        margin-top: 14px;
        border-top: 1px solid var(--border);
    }

    .site-nav li a,
    .site-nav li button {
        display: block;
        padding: 12px 4px;
        font-size: 0.95rem;
    }

    .site-nav__ig { justify-content: flex-start; padding: 12px 4px; }

    /* Category bands wrap to fit the screen instead of scrolling off the edge */
    .freq-rail {
        overflow-x: visible;
    }

    .freq-rail__inner {
        flex-wrap: wrap;
        min-width: 0;
    }

    .freq-band {
        flex: 1 0 auto;
        justify-content: center;
        padding: 11px 12px;
        border-bottom: 1px solid var(--border);
    }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}


/* ===== HOME ================================================================
   Front-door homepage at root. Extends the locked design system.
   Stance: the station's front-of-house. Tuner with three frequencies.
   Precious orange: Omi beacon glow in home-hero. One use. No orange elsewhere.
   ========================================================================== */

/* ── HOME HERO ───────────────────────────────────────────── */
.home-hero {
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

/* Subtle radial warmth behind the beacon — gold tint, not orange (orange reserved for the glow ::after) */
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 60% at 20% 50%,
        rgba(253, 207, 0, 0.04) 0%,
        transparent 65%);
    pointer-events: none;
}

.home-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto; /* text left, on-air badge right (matches blog hero) */
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ── HOME BEACON (Omi — precious orange, one placement) ─── */
.home-beacon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.home-beacon__omi-wrap {
    position: relative;
    width: 360px;
    height: 360px;
}

.home-beacon__omi {
    width: 360px;
    height: 360px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    animation: dial-pulse 4s ease-in-out infinite;
}

/* THE PRECIOUS ORANGE PLACEMENT — on-air badge glow, root homepage only */
.home-beacon__omi-wrap::after {
    content: '';
    position: absolute;
    inset: -56px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,147,0,0.30) 0%, transparent 68%);
    animation: glow-breathe 4s ease-in-out infinite;
    z-index: 1;
}

.home-beacon__status {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--precious);
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.home-beacon__freq {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--muted-dark);
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

/* ── HOME HERO TEXT ──────────────────────────────────────── */
.home-hero__eyebrow {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.home-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--muted);
}

.home-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 24px;
}

.home-hero__title em {
    color: var(--primary);
    font-style: normal;
}

.home-hero__sub {
    font-size: 1rem;
    color: var(--muted);
    max-width: 46ch;
    line-height: 1.65;
}

/* ── DESTINATIONS: THREE FREQUENCIES ────────────────────── */
.home-destinations {
    padding: 56px 0 80px;
}

.home-destinations__label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 28px;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.home-destinations__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

/* ── DESTINATION PANEL ───────────────────────────────────── */
.dest-panel {
    background: var(--surface);
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background 0.2s ease;
    cursor: pointer;
}

a.dest-panel:hover {
    background: var(--surface2);
}

a.dest-panel:hover .dest-panel__title {
    color: var(--primary);
}

/* Off-air panel: not interactive */
.dest-panel--offair {
    cursor: default;
    opacity: 0.75;
}

.dest-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dest-panel__number {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--muted-dark);
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

/* Status badges */
.dest-panel__status {
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: 5px;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.dest-status--live {
    color: var(--cat-fieldnotes);
    border-color: var(--cat-fieldnotes);
}

.dest-status--offair {
    color: var(--muted-dark);
    border-color: var(--muted-dark);
}

.dest-status--ext {
    color: var(--muted);
    border-color: var(--border-med);
}

/* Category band line — 3px top indicator per panel (not a card side stripe) */
.dest-panel__band-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.band--dispatches-line { background: var(--cat-dispatches); }
.band--sounds-line     { background: var(--cat-sounds); }
.band--tech-line       { background: var(--cat-tech); }

.dest-panel__title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 12px;
    margin-top: 4px;
    transition: color 0.15s ease;
    line-height: 1.1;
}

.dest-panel__desc {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* ── SIGNAL PANEL: LATEST TRANSMISSIONS LIST ─────────────── */
.dest-panel__transmissions {
    list-style: none;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
}

.dest-transmission {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.dest-transmission__band {
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid;
    width: fit-content;
    /* color + border via existing tag-- classes */
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.dest-transmission__title {
    font-family: var(--font-display);
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.4;
    letter-spacing: 0;
    transition: color 0.15s ease;
}

a.dest-panel:hover .dest-transmission__title {
    color: var(--text);
}

/* ── RECORD POOL: OFF-AIR NOTICE ─────────────────────────── */
.dest-panel__offair-notice {
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 16px 18px;
    margin-bottom: 24px;
    flex-grow: 1;
}

.dest-panel__offair-date {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.dest-panel__offair-when {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text);
    letter-spacing: 0;
    line-height: 1.3;
}

/* ── CONFERENCE PANEL: DETAIL LINE ──────────────────────── */
.dest-panel__conf-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-grow: 1;
    align-self: flex-start;
}

.dest-conf-item {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.dest-conf-sep {
    color: var(--muted-dark);
    font-size: 0.6rem;
}

/* ── PANEL CTA ───────────────────────────────────────────── */
.dest-panel__cta {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-top: auto;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.dest-panel__cta--disabled {
    color: var(--muted-dark);
    pointer-events: none;
}

/* ── RESPONSIVE: HOME ────────────────────────────────────── */
@media (max-width: 768px) {
    .home-hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .home-beacon {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        order: 2; /* beacon below text on mobile */
    }

    .home-beacon__omi-wrap {
        width: min(300px, 82vw);
        height: min(300px, 82vw);
    }

    .home-beacon__omi {
        width: min(300px, 82vw);
        height: min(300px, 82vw);
    }

    .home-hero__text {
        order: 1;
    }

    .home-destinations__grid {
        grid-template-columns: 1fr;
    }

    .dest-panel {
        padding: 28px 20px 24px;
    }
}