/* ═══════════════════════════════════════════════════════════
   Harkwire — Design System
   Night-edition editorial: deep navy, copper warmth, sharp edges
   Barlow Condensed (display) + Source Serif 4 (body)
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
    /* Brand palette — never change these */
    --navy:          #08172A;
    --navy-raised:   #14223A;
    --navy-hover:    #1a2e4a;
    --cream:         #F5F1E8;
    --parchment:     #ece8e0;
    --smoke:         #9aa2b6;
    --amber:         #D97742;
    --amber-bright:  #e8895a;
    --amber-dark:    #b85e2e;
    --amber-glow:    rgba(217, 119, 66, 0.12);
    --green:         #059669;
    --red:           #dc2626;

    /* ── LIGHT THEME (default) ──────────────────────────── */
    --background:         var(--cream);
    --foreground:         var(--navy);
    --muted-foreground:   rgba(8, 23, 42, 0.65);
    --border-color:       rgba(8, 23, 42, 0.12);
    --border-strong-color:rgba(8, 23, 42, 0.22);
    --card-bg:            #FFFFFF;
    --card-foreground:    var(--navy);
    --accent:             var(--amber);
    --accent-hover:       var(--amber-dark);
    --accent-on:          var(--cream);   /* text on accent bg */
    --bg-hover-color:     rgba(8, 23, 42, 0.05);

    /* Semantic aliases (used throughout components) */
    --bg:            var(--background);
    --bg-raised:     var(--card-bg);
    --bg-hover:      var(--bg-hover-color);
    --border:        var(--border-color);
    --border-strong: var(--border-strong-color);
    --text:          var(--foreground);
    --text-2:        var(--muted-foreground);
    --text-3:        rgba(8, 23, 42, 0.5);

    /* Type — swap body: change Google Fonts import + --font-body value only */
    --font-display-fallback: ui-sans-serif, system-ui, sans-serif;
    --font-body-fallback:    ui-serif, Georgia, serif;
    --font-display: 'Barlow Condensed', var(--font-display-fallback);
    --font-body:    'Source Serif 4', var(--font-body-fallback);
    /* Legacy aliases for progressive removal */
    --ff-display: var(--font-display);
    --ff-body:    var(--font-body);
    --ff-mono:    'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Motion */
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur: 0.2s;
    --dur-slow: 0.8s;
}

/* ── DARK THEME ───────────────────────────────────────────── */
html.dark {
    --background:         var(--navy);
    --foreground:         var(--cream);
    --muted-foreground:   rgba(245, 241, 232, 0.65);
    --border-color:       rgba(245, 241, 232, 0.08);
    --border-strong-color:rgba(245, 241, 232, 0.16);
    --card-bg:            var(--navy-raised);
    --card-foreground:    var(--cream);
    --accent:             var(--amber);
    --accent-hover:       var(--amber-bright);
    --accent-on:          var(--navy);
    --bg-hover-color:     rgba(245, 241, 232, 0.06);
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    font-family: var(--ff-body);
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--text);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}

/* ── Newsprint grain ──────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
}

/* ── Ambient amber decoration (scrolls with page) ──────── */
body::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 45% 14% at 86% 6%,  rgba(217, 119, 66, 0.26), transparent 65%),
        radial-gradient(ellipse 40% 12% at 14% 22%, rgba(217, 119, 66, 0.22), transparent 65%),
        radial-gradient(ellipse 50% 14% at 78% 40%, rgba(156, 74, 42, 0.22), transparent 65%),
        radial-gradient(ellipse 38% 12% at 18% 56%, rgba(217, 119, 66, 0.20), transparent 65%),
        radial-gradient(ellipse 48% 14% at 84% 74%, rgba(217, 119, 66, 0.24), transparent 65%),
        radial-gradient(ellipse 42% 12% at 20% 92%, rgba(156, 74, 42, 0.20), transparent 65%);
}

/* ── Reveal animations ────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ── Navigation ───────────────────────────────────────────── */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 1rem 0;
    background: var(--navy);
    border-bottom: 1px solid var(--border-strong);
}
.site-nav::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 10%, var(--amber) 50%, transparent 90%);
    opacity: 0.35;
    pointer-events: none;
}
.nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--cream);
}
.nav-brand-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nav-brand-text span { color: var(--amber); }
.nav-owl { width: 26px; height: 26px; }
.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-links a {
    color: var(--cream);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.6rem 0.9rem;
    opacity: 0.75;
    transition: opacity var(--dur), color var(--dur);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.nav-links a:hover { opacity: 1; color: var(--amber); }

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text);
    border-radius: 6px;
    opacity: 0.7;
    transition: opacity var(--dur), background var(--dur);
    flex-shrink: 0;
}
.theme-toggle:hover { opacity: 1; background: var(--bg-hover); }
.theme-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
html.dark .theme-toggle .icon-sun  { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* ── Layout ───────────────────────────────────────────────── */
.container {
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem clamp(1.25rem, 4vw, 2.5rem);
}
.container-wide { max-width: 1280px; }

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--text); }
h1 {
    font-size: clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin-bottom: 1.25rem;
}
h2 {
    font-size: clamp(2rem, 3vw + 0.5rem, 2.75rem);
    letter-spacing: -0.005em;
    line-height: 1.1;
    margin-bottom: 1rem;
}
h3 {
    font-size: clamp(1.4rem, 1.5vw + 0.5rem, 1.65rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
p { margin-bottom: 1rem; }
.section-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.section-label::before {
    content: '';
    display: block;
    width: 2rem;
    height: 1px;
    background: var(--accent);
}
.page-subtitle {
    font-size: 1.05rem;
    color: var(--text-2);
    max-width: 520px;
    margin-bottom: 2rem;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    transition: border-color 0.3s, transform 0.3s;
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover {
    border-color: rgba(217, 119, 66, 0.3);
    transform: translateY(-3px);
}
.card-featured {
    border-top: 3px solid var(--amber);
}
.card h3 { margin-bottom: 0.25rem; }
.card-sub { color: var(--text-2); font-size: 0.9rem; margin-bottom: 0; }
.card-narrow { max-width: 560px; }
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
/* ── Source cards ─────────────────────────────────────────────────────── */
.source-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0;
    gap: 0.75rem;
}
.source-card__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--amber);
    flex-shrink: 0;
    align-self: flex-start;
}
.source-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.source-card__initials {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}
.source-card__body {
    flex: 1;
    min-width: 0;
}
.source-card__name {
    display: block;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 0.15rem;
}
.source-card__publisher {
    display: block;
    font-size: 0.8rem;
    color: var(--text-2);
    margin-bottom: 0.35rem;
}
.source-card__desc {
    font-size: 0.8rem;
    color: var(--text-2);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.source-card__foot {
    display: flex;
    justify-content: flex-end;
}

/* ── End source cards ─────────────────────────────────────────────────── */
.bullet-list {
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    color: var(--text-2);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--ff-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background var(--dur), transform var(--dur), box-shadow var(--dur);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: var(--amber);
    color: var(--accent-on);
}
.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--amber-glow);
}
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn-sm {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    min-height: 44px;
}
.btn-danger {
    background: transparent;
    color: #fca5a5;
    border: 1px solid rgba(252, 165, 165, 0.45);
}
.btn-danger:hover {
    background: rgba(252, 165, 165, 0.1);
    border-color: #fca5a5;
}
.btn-danger-solid {
    background: var(--red);
    color: #fff;
}
.btn-danger-solid:hover { background: #b91c1c; }

/* ── Forms ────────────────────────────────────────────────── */
input, select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-family: var(--ff-body);
    font-size: 1rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    margin-bottom: 1rem;
    transition: border-color var(--dur);
}
input:focus, select:focus {
    border-color: var(--amber);
    outline: none;
    box-shadow: 0 0 0 3px var(--amber-glow);
}
input[type="range"] {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
    accent-color: var(--amber);
}
input[type="range"]:focus { box-shadow: none; }
input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--amber); }
label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.015em; }
.form-group { margin-bottom: 1.5rem; }
.form-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
}
.form-row label { margin: 0; font-weight: normal; cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-2); margin-top: -0.5rem; }

/* ── Band Selector — flat rows with left accent ───────────── */
.band-selector {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-strong);
}
.band-option {
    cursor: pointer;
    display: block;
    border-bottom: 1px solid var(--border-strong);
}
.band-option input { position: absolute; opacity: 0; pointer-events: none; }
.band-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.1rem 1rem 1.1rem 1.25rem;
    border-left: 3px solid transparent;
    transition: border-color var(--dur), background var(--dur);
}
.band-option:hover .band-card { background: rgba(217, 119, 66, 0.04); }
.band-option input:checked + .band-card {
    border-left-color: var(--amber);
    background: rgba(217, 119, 66, 0.06);
}
.band-card strong {
    font-family: var(--ff-display);
    font-size: 1.05rem;
    font-weight: 700;
}
.band-duration {
    font-size: 0.82rem;
    font-family: var(--ff-mono);
    color: var(--amber);
    letter-spacing: 0.04em;
}
.band-detail {
    font-size: 0.78rem;
    color: var(--text-2);
}
.band-detail + .band-detail { display: none; } /* hide cost row; topics is enough */
@media (max-width: 600px) {
    .band-card { grid-template-columns: 1fr auto; gap: 0.75rem; }
    .band-detail { grid-column: 1 / -1; }
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-left: 3px solid var(--amber);
    background: var(--amber-glow);
    font-size: 0.95rem;
}
.alert-success { border-left-color: var(--green); background: rgba(5, 150, 105, 0.08); }
.alert-danger  { border-left-color: var(--red);   background: rgba(220, 38, 38, 0.08); }

/* ── Onboarding steps ─────────────────────────────────────── */
.steps-bar {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 2.5rem;
}
.step-pill {
    flex: 1;
    padding: 0.5rem 0;
    text-align: center;
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--bg-raised);
    color: var(--text-3);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.step-pill.active {
    background: var(--amber);
    color: var(--accent-on);
    border-color: var(--amber);
}
.step-pill.done {
    background: rgba(5, 150, 105, 0.1);
    color: var(--green);
    border-color: rgba(5, 150, 105, 0.2);
}

/* ── Table ────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left;
    padding: 0.65rem 0.6rem;
    font-family: var(--ff-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-2);
    border-bottom: 2px solid var(--border-strong);
}
.table td { padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--border); }
.table tbody tr { transition: background var(--dur); }
.table tbody tr:hover { background: var(--amber-glow); }
.text-r { text-align: right; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.nowrap { white-space: nowrap; }

/* ── Feed URL / code ──────────────────────────────────────── */
.url-block {
    position: relative;
    margin-bottom: 1rem;
}
.url-code {
    display: block;
    min-height: 56px;
    word-break: break-all;
    background: var(--bg);
    padding: 1.1rem 5.5rem 1.1rem 1rem;
    font-family: var(--ff-mono);
    font-size: 0.82rem;
    color: var(--amber);
    border: 1px solid var(--border-strong);
}
.copy-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    min-height: 44px;
    min-width: 72px;
    padding: 0.6rem 1rem;
    font-family: var(--ff-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--amber);
    color: var(--accent-on);
    border: none;
    cursor: pointer;
    transition: background var(--dur);
}
.copy-btn:hover { background: var(--accent-hover); }

/* ── Toast ────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: 5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.toast {
    padding: 0.75rem 1.5rem;
    font-family: var(--ff-body);
    font-size: 0.88rem;
    font-weight: 600;
    background: var(--navy-raised);
    color: var(--cream);
    border-left: 3px solid var(--amber);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    animation: toast-slide 0.3s var(--ease);
    transition: opacity 0.3s;
}
.toast-success { border-left-color: var(--green); }
.toast-error   { border-left-color: var(--red); }
.toast.fade-out { opacity: 0; }
@keyframes toast-slide {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Badge ────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    font-family: var(--ff-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.badge-green  { background: rgba(5, 150, 105, 0.15); color: #34d399; }
.badge-red    { background: rgba(220, 38, 38, 0.12); color: #f87171; }
.badge-yellow { background: rgba(217, 119, 6, 0.12); color: #fbbf24; }

/* ── Details / collapsible ────────────────────────────────── */
details { margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
details summary {
    cursor: pointer;
    padding: 0.7rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color var(--dur);
}
details summary:hover { color: var(--amber); }
details[open] summary { color: var(--amber); }
details > .detail-body { padding: 0 0 1rem; color: var(--text-2); }
details ol { padding-left: 1.5rem; line-height: 2.1; }

/* ── Section divider ──────────────────────────────────────── */
.edition-line {
    text-align: center;
    padding: 2.5rem 0;
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--text-2);
    letter-spacing: 0.05em;
    position: relative;
}
.edition-line::before, .edition-line::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 6rem);
    height: 1px;
    background: var(--border-strong);
}
.edition-line::before { left: 0; }
.edition-line::after { right: 0; }

/* ── HTMX states ──────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request .htmx-hide { display: none; }

/* ── Utilities ───────────────────────────────────────────── */
.u-center        { text-align: center; }
.u-mt-sm         { margin-top: 0.5rem; }
.u-mt-md         { margin-top: 1rem; }
.u-mt-lg         { margin-top: 1.5rem; }
.u-mt-xl         { margin-top: 2rem; }
.u-mb-md         { margin-bottom: 1rem; }
.u-mb-lg         { margin-bottom: 1.5rem; }
.u-text-sm       { font-size: 0.85rem; }
.u-text-amber    { color: var(--amber); }
.u-amber-link    { color: var(--amber); text-decoration: none; }
.u-amber-link:hover { color: var(--amber-bright); text-decoration: underline; }
.u-flex          { display: flex; }
.u-flex-gap      { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.u-prose         { max-width: 680px; margin: 0 auto; }
.u-grow          { flex: 1; min-width: 0; }
.u-shrink-0      { flex-shrink: 0; }
.u-inline-form   { display: inline; }

/* ── Danger zone block (account delete, etc) ─────────────── */
.danger-zone {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

/* ── Long-form prose (legal pages, etc) ──────────────────── */
.prose {
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--parchment);
}
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--amber); }

/* ── Screen-reader only ──────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Focus ────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .site-nav { padding: 0.75rem 0; }
    .nav-brand-text { font-size: 0.88rem; }
    .nav-links a, .nav-links span { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
    .container { padding: 2rem 1.25rem; }
    .card { padding: 1.5rem; }
    .card-grid { grid-template-columns: 1fr; }
    h1 { font-size: 1.75rem; }
    .table { font-size: 0.88rem; }
    .steps-bar { flex-wrap: wrap; }
}

/* ── Inline episode audio player ─────────────────────────── */
.episode-player-row td {
    padding-top: 0;
    padding-bottom: 0.75rem;
    border-top: none;
}
.episode-audio {
    width: 100%;
    height: 2rem;
    display: block;
}

/* ── Dashboard masthead ──────────────────────────────────── */
.dash-masthead {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}
.dash-greeting {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
.dash-greeting em { font-style: italic; color: var(--amber); }
.dash-sub {
    font-size: 1.05rem;
    color: var(--parchment);
    max-width: 560px;
    margin-bottom: 0;
}

/* ── Today's episode (focal block) ───────────────────────── */
.today-episode {
    margin-bottom: 4rem;
    padding: 2.5rem 0 3rem;
    border-left: 3px solid var(--amber);
    padding-left: 2rem;
}
.today-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    max-width: 640px;
}
.today-audio {
    width: 100%;
    max-width: 640px;
    height: 44px;
    display: block;
    margin-bottom: 1.25rem;
}
.today-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.today-link {
    font-family: var(--ff-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--amber);
    text-decoration: none;
    transition: color var(--dur);
}
.today-link:hover { color: var(--amber-bright); }

/* ── Empty state for today ───────────────────────────────── */
.today-empty {
    margin-bottom: 4rem;
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.today-empty-inner {
    max-width: 480px;
}
.today-empty-msg {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--parchment);
    margin-bottom: 1.25rem;
}
.today-empty-hint {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-2);
    margin-bottom: 0;
}

/* ── Past editions list ──────────────────────────────────── */
.past-editions { margin-top: 2rem; }
.ep-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ep-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 2rem;
    align-items: start;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--border);
}
.ep-row:last-child { border-bottom: none; }
.ep-row-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.25rem;
}
.ep-date {
    font-family: var(--ff-mono);
    font-size: 0.8rem;
    color: var(--parchment);
    letter-spacing: 0.04em;
}
.ep-dur {
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    color: var(--text-2);
}
.ep-title {
    font-family: var(--ff-body);
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--cream);
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}
.ep-audio {
    width: 100%;
    max-width: 520px;
    height: 36px;
    display: block;
}
.ep-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.5rem;
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur);
}
.ep-link:hover { color: var(--amber); }

@media (max-width: 640px) {
    .ep-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .today-episode { padding-left: 1.25rem; }
}