@charset "UTF-8";
/* ============================================ THE CATHOLIC UNDERGROUND — Main Stylesheet Faithful to the original: yellow-dominant, bold condensed type, black nav, dark footer. ============================================ */
/* --- Google Fonts --- */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap");
/* --- CSS Variables --- */
:root { /* Brand yellow — the dominant color */ --color-yellow:       #F5A800; --color-yellow-dark:  #D98F00; --color-yellow-light: #FFB929; /* Structure */ --color-black:      #111111; --color-black-soft: #1c1c1c; --color-dark:       #1e1e1e; --color-dark-card:  #2a2a2a; --color-border-dark: #333333; --color-border-light: #e0c060; --color-white:      #ffffff; /* Text on yellow */ --color-text:       #111111; --color-text-muted: #3a3000; --color-text-dim:   #6b5500; /* Text on dark */ --color-text-light:     #f0f0f0; --color-text-light-muted: #aaaaaa; --color-text-light-dim:   #666666; /* Fonts */ --font-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; --font-body:    'Source Sans 3', system-ui, sans-serif; --font-prose:   'Source Serif 4', Georgia, serif; --nav-height:    68px; --notice-height: 40px; --max-width:     1200px; --radius:      4px; --radius-pill: 40px; --transition: 0.2s ease; }

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

html { scroll-behavior: smooth; }

body { background-color: var(--color-yellow); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }

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

a { color: inherit; text-decoration: none; transition: opacity var(--transition); }

a:hover { opacity: 0.75; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.0; font-weight: 400; /* Bebas Neue is always "normal" weight */ color: var(--color-black); letter-spacing: 0.02em; }

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }

h2 { font-size: clamp(2rem, 4vw, 3.5rem); }

h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

h4 { font-size: 1.3rem; }

p { margin-bottom: 1.1em; }

p:last-child { margin-bottom: 0; }

/* --- Layout Utilities --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }

.container--narrow { max-width: 800px; margin: 0 auto; padding: 0 2rem; }

.section { padding: 4rem 0; }

.section--sm { padding: 2.5rem 0; }

.section--lg { padding: 6rem 0; }

/* ============================================ NAVIGATION — gold bar, dark text ============================================ */
.site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--color-white); border-bottom: 2px solid var(--color-yellow-dark); z-index: 1000; display: flex; align-items: center; }

.nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

/* Logo — responsive SVG wordmark */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }

.nav-logo__img { height: clamp(28px, 4vw, 42px); width: auto; display: block; }

/* Donate button — dark on gold */
.nav-donate { display: inline-block; padding: 0.4rem 1.1rem; border: 2px solid var(--color-black); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--color-black); transition: all var(--transition); white-space: nowrap; flex-shrink: 0; }

.nav-donate:hover { background: var(--color-black); color: var(--color-yellow); opacity: 1; }

.nav-menu { display: flex; list-style: none; align-items: center; gap: 0; flex: 1; justify-content: flex-end; }

.nav-item { position: relative; }

.nav-link { display: block; padding: 0.5rem 0.9rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); transition: color var(--transition); }

.nav-link:hover, .nav-link.active { color: var(--color-black); opacity: 1; }

/* Dropdown */
.nav-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--color-yellow-dark); border-top: 3px solid var(--color-black); list-style: none; padding: 0.5rem 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }

.nav-item:hover .nav-dropdown { display: block; }

.nav-dropdown a { display: block; padding: 0.6rem 1.25rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-black); }

.nav-dropdown a:hover { color: var(--color-white); background: var(--color-black); opacity: 1; }

/* Mobile toggle — dark bars on gold */
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; background: none; border: none; }

.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-black); }

/* Mobile menu overrides */
@media (max-width: 680px) { .nav-menu { background: var(--color-yellow); border-bottom: 3px solid var(--color-black); } .nav-menu.open { display: flex; } .nav-toggle { display: flex; } .nav-donate { display: none; } .nav-dropdown { position: static; border: none; background: transparent; padding-left: 1.5rem; display: block; box-shadow: none; } .nav-dropdown a { color: var(--color-text-muted); } .nav-dropdown a:hover { background: transparent; color: var(--color-black); } }

/* ============================================ NOTICE STRIP — black bar below nav ============================================ */
.notice-strip { position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 999; min-height: var(--notice-height); background: var(--color-black); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem 2rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: #aaaaaa; }

.notice-strip a { color: var(--color-yellow); text-decoration: underline; text-underline-offset: 2px; }

.notice-strip a:hover { opacity: 0.8; }

/* ============================================ SEARCH BAR — yellow band below nav ============================================ */
.search-bar { background: var(--color-yellow); padding: 1rem 0; border-bottom: 1px solid var(--color-yellow-dark); }

.search-bar-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.search-input-wrap { display: flex; align-items: center; gap: 0.75rem; flex: 1; max-width: 280px; }

.search-input-wrap input { background: transparent; border: none; border-bottom: 1px solid var(--color-text-dim); padding: 0.3rem 0; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text); width: 100%; }

.search-input-wrap input::placeholder { color: var(--color-text-dim); }

.search-input-wrap input:focus { outline: none; border-bottom-color: var(--color-black); }

.search-icon { color: var(--color-text-dim); font-size: 1.1rem; }

/* Social icons row */
.social-icons { display: flex; gap: 0.5rem; }

.social-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-yellow-dark); color: var(--color-white); font-size: 0.85rem; font-weight: 700; transition: background var(--transition); }

.social-icon:hover { background: var(--color-black); opacity: 1; }

/* ============================================ HERO — yellow, large text ============================================ */
.hero { background: var(--color-yellow); padding: calc(var(--nav-height) + var(--notice-height) + 4rem) 0 4rem; text-align: center; }

.hero__eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1rem; }

.hero__logo { max-width: 280px; margin: 0 auto 1.5rem; }

.hero__tagline { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 7rem); color: var(--color-black); line-height: 0.95; margin-bottom: 1rem; letter-spacing: 0.03em; }

.hero__sub { font-size: 1.05rem; color: var(--color-text-muted); max-width: 520px; margin: 0 auto 2.5rem; }

.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============================================ BUTTONS ============================================ */
/* Primary: black pill */
.btn { display: inline-block; padding: 0.75rem 2rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: all var(--transition); cursor: pointer; border: none; border-radius: var(--radius-pill); }

.btn--black { background: var(--color-black); color: var(--color-white); }

.btn--black:hover { background: var(--color-dark); opacity: 1; transform: translateY(-1px); }

.btn--outline-black { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }

.btn--outline-black:hover { background: var(--color-black); color: var(--color-white); opacity: 1; }

.btn--outline-yellow { background: transparent; color: var(--color-yellow); border: 2px solid var(--color-yellow); }

.btn--outline-yellow:hover { background: var(--color-yellow); color: var(--color-black); opacity: 1; }

/* ============================================ SECTION HEADER (with ichthys logo + title) The "[><] THE CU PODCAST" treatment ============================================ */
.series-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }

.series-header__title { display: flex; align-items: center; gap: 1rem; }

.series-header__mark { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--color-black); flex-shrink: 0; }

.series-header__mark img { width: 52px; height: auto; }

.series-header__mark--text { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-white); }

.series-header h2 { font-size: clamp(2rem, 5vw, 3.5rem); color: var(--color-black); }

/* ============================================ EPISODE CARDS — image-dominant with overlay ============================================ */
.episodes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.episode-card { background: var(--color-white); cursor: pointer; padding: 0.5rem; transition: transform var(--transition), box-shadow var(--transition); }

.episode-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }

/* Thumbnail with title overlay */
.episode-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-dark); }

/* Clickable thumbnail link */
.episode-card__thumb-link { display: block; width: 100%; height: 100%; }

.episode-card__thumb-link:hover { opacity: 1; }

.episode-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }

.episode-card:hover .episode-card__thumb img { transform: scale(1.03); }

/* Fallback title overlay when no image */
.episode-card__thumb-title { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%); }

.episode-card__thumb-title span { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--color-white); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }

/* Card body */
.episode-card__body { padding: 1rem 1.5rem 1.25rem; }

.episode-card__series { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 0.3rem; }

.episode-card__title { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-black); line-height: 1.05; margin-bottom: 0.5rem; }

.episode-card__title a { color: inherit; }

.episode-card__excerpt { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.55; margin-bottom: 0.6rem; }

.episode-card__meta { font-size: 0.78rem; color: var(--color-text-dim); }

.episode-card__footer { padding: 0 1.5rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; }

.episode-missing { font-size: 0.78rem; font-weight: 600; color: var(--color-text-dim); font-style: italic; }

.read-more { font-size: 0.82rem; font-weight: 700; color: var(--color-black); display: inline-flex; align-items: center; gap: 0.3rem; }

.read-more::after { content: '→'; }

.read-more:hover { opacity: 0.6; }

/* Media icon circles — audio/video buttons on episode cards */
.media-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--color-black); color: var(--color-white); border-radius: 50%; flex-shrink: 0; transition: background var(--transition), color var(--transition); }

.media-btn:hover { background: var(--color-yellow-dark); color: var(--color-black); opacity: 1; }

/* Shownotes button — square corners to contrast with rounded media badges */
.shownotes-btn { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; background: var(--color-black); color: var(--color-white); border-radius: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: background var(--transition), color var(--transition); }

.shownotes-btn:hover { background: var(--color-yellow-dark); color: var(--color-black); opacity: 1; }

/* Carousel arrows */
.carousel-nav { display: flex; gap: 0.5rem; }

.carousel-arrow { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-black); border-radius: 50%; cursor: pointer; font-size: 0.9rem; color: var(--color-black); transition: all var(--transition); }

.carousel-arrow:hover { background: var(--color-black); color: var(--color-white); }

/* ============================================ EPISODE DETAIL PAGE ============================================ */
.episode-header { background: var(--color-yellow); padding: calc(var(--nav-height) + var(--notice-height) + 3rem) 0 3rem; border-bottom: 3px solid var(--color-yellow-dark); }

.episode-series-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.75rem; }

.episode-header h1 { font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: 0.75rem; color: var(--color-black); }

.episode-meta { display: flex; gap: 1.5rem; align-items: center; font-size: 0.85rem; color: var(--color-text-muted); flex-wrap: wrap; }

.episode-body { background: var(--color-white); padding: 3rem 0 5rem; }

/* Audio Player */
.audio-player { background: var(--color-off-white); border: 1px solid #ddd; border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 2rem 0; }

.audio-player__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 0.75rem; }

.audio-player audio { width: 100%; height: 40px; }

/* Video embed */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius); margin: 2rem 0; }

.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Prose content */
.prose { font-family: var(--font-prose); font-size: 1.05rem; line-height: 1.85; color: #222; }

.prose h2, .prose h3 { font-family: var(--font-display); margin: 2rem 0 0.75rem; color: var(--color-black); }

.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.25em; }

.prose li { margin-bottom: 0.4em; }

.prose a { color: var(--color-yellow-dark); text-decoration: underline; }

.prose hr { border: none; border-top: 1px solid #ddd; margin: 2.5rem 0; }

blockquote { border-left: 4px solid var(--color-yellow); padding: 1rem 1.5rem; margin: 2rem 0; font-style: italic; color: var(--color-text-muted); background: #fafafa; }

/* ============================================ SUBSCRIBE BADGES ============================================ */
.subscribe-bar { background: #f0f0f0; border: 1px solid #ddd; border-radius: var(--radius); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 2rem 0; }

.subscribe-bar__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-dim); }

.subscribe-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.85rem; background: var(--color-white); border: 1px solid #ccc; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; color: var(--color-black); transition: all var(--transition); }

.subscribe-badge:hover { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); opacity: 1; }

/* ============================================ PAGE HEADER (yellow band, inner pages) ============================================ */
.page-header { background: var(--color-yellow); padding: calc(var(--nav-height) + var(--notice-height) + 3rem) 0 3rem; border-bottom: 3px solid var(--color-yellow-dark); }

.page-header h1 { margin-bottom: 0.5rem; color: var(--color-black); }

.page-header p { color: var(--color-text-muted); font-size: 1.05rem; max-width: 600px; margin-bottom: 0; }

/* ============================================ FILTER BAR (episodes archive) ============================================ */
.filter-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; align-items: center; }

.filter-bar input { flex: 1; min-width: 200px; padding: 0.6rem 1rem; background: var(--color-white); border: 2px solid var(--color-yellow-dark); border-radius: var(--radius-pill); color: var(--color-black); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; transition: border-color var(--transition); }

.filter-bar input::placeholder { color: #aaa; }

.filter-bar input:focus { outline: none; border-color: var(--color-black); }

.filter-pill { padding: 0.5rem 1.1rem; background: var(--color-white); border: 2px solid var(--color-yellow-dark); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition); }

.filter-pill:hover, .filter-pill.active { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }

/* ============================================ PAGINATION ============================================ */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 3rem 0; }

.pagination a, .pagination span { padding: 0.5rem 1rem; border: 2px solid var(--color-yellow-dark); border-radius: var(--radius); font-size: 0.85rem; color: var(--color-black); font-weight: 600; }

.pagination a:hover { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); opacity: 1; }

.pagination .current { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }

/* ============================================ DARK FOOTER ============================================ */
.site-footer { background: var(--color-black); color: var(--color-text-light); padding: 4rem 0 2rem; }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }

.footer-brand__logo { height: 40px; width: auto; margin-bottom: 1rem; opacity: 0.85; }

.footer-brand__tagline { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-yellow); margin-bottom: 0.75rem; letter-spacing: 0.05em; }

.footer-brand__desc { font-size: 0.88rem; color: var(--color-text-light-muted); line-height: 1.7; max-width: 300px; }

.footer-col h4 { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-yellow); margin-bottom: 1.25rem; }

.footer-col ul { list-style: none; }

.footer-col ul li { margin-bottom: 0.6rem; }

.footer-col ul a { font-size: 0.88rem; color: var(--color-text-light-muted); transition: color var(--transition); }

.footer-col ul a:hover { color: var(--color-white); opacity: 1; }

.footer-address { font-size: 0.85rem; color: var(--color-text-light-muted); line-height: 1.8; }

.footer-address a { color: var(--color-yellow); }

.footer-bottom { border-top: 1px solid var(--color-border-dark); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

.footer-bottom p, .footer-bottom a { font-size: 0.78rem; color: var(--color-text-light-dim); margin-bottom: 0; }

.footer-bottom a:hover { color: var(--color-yellow); opacity: 1; }

.footer-bottom-links { display: flex; gap: 1.5rem; }

/* ============================================ "ABOUT" STRIP — dark section on homepage ============================================ */
.about-strip { background: var(--color-dark); color: var(--color-text-light); padding: 5rem 0; }

.about-strip h2 { color: var(--color-yellow); font-size: clamp(2.5rem, 5vw, 4.5rem); }

.about-strip p { color: var(--color-text-light-muted); line-height: 1.8; font-size: 1.05rem; }

.pullquote { border-left: 4px solid var(--color-yellow); padding: 1.5rem 2rem; background: rgba(245, 168, 0, 0.07); border-radius: 0 var(--radius) var(--radius) 0; }

.pullquote p { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--color-white) !important; line-height: 1.2; letter-spacing: 0.02em; margin-bottom: 0.75rem; }

.pullquote cite { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-yellow); font-style: normal; }

/* ============================================ LETTER / STATIONERY LAYOUT ============================================ */
.letter-wrap { background: #ddd8cf; padding: calc(var(--nav-height) + var(--notice-height) + 4rem) 2rem 6rem; min-height: 100vh; }

.letter-paper { max-width: 680px; margin: 0 auto; background: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.12); padding: 3.5rem 4rem 3rem; }

.letter-header { margin-bottom: 2rem; }

.letter-logo { height: 34px; width: auto; display: block; margin-bottom: 1.25rem; }

.letter-rule { border: none; border-top: 2px solid var(--color-yellow-dark); }

.letter-body { margin-top: 2.5rem; font-size: 1rem; line-height: 1.9; color: #1a1a1a; }

.letter-footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid #ddd; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--color-text-dim); }

.letter-footer a { color: var(--color-text-dim); }

.letter-footer a:hover { color: var(--color-black); opacity: 1; }

.letter-footer__sep { color: var(--color-yellow-dark); font-size: 1rem; line-height: 1; }

@media (max-width: 680px) { .letter-wrap { padding: calc(var(--nav-height) + var(--notice-height) + 2rem) 1rem 4rem; } .letter-paper { padding: 2rem 1.5rem 2rem; } }

/* ============================================ POST / BLOG STATIONERY LAYOUT ============================================ */
.post-wrap { background: #ddd8cf; padding: calc(var(--nav-height) + var(--notice-height) + 4rem) 2rem 6rem; min-height: 100vh; }

.post-paper { max-width: 680px; margin: 0 auto; background: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.12); overflow: hidden; }

/* Hero image bleeds edge-to-edge at the top */
.post-paper__hero { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }

.post-paper__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-paper__body { padding: 2.5rem 4rem 3.5rem; }

.post-paper__category { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 0.6rem; }

.post-paper__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--color-black); line-height: 1.0; margin-bottom: 0.6rem; }

.post-paper__meta { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0; }

@media (max-width: 680px) { .post-wrap { padding: calc(var(--nav-height) + var(--notice-height) + 2rem) 1rem 4rem; } .post-paper__body { padding: 1.75rem 1.5rem 2.5rem; } }

/* ============================================ RESPONSIVE ============================================ */
@media (max-width: 960px) { .episodes-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .about-strip .container { display: flex !important; flex-direction: column; gap: 2.5rem; } }

@media (max-width: 680px) { :root { --nav-height: 60px; --notice-height: 56px; } .episodes-grid { grid-template-columns: 1fr; } .nav-menu { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 1001; background: var(--color-black); border-bottom: 3px solid var(--color-yellow); flex-direction: column; padding: 1rem 0; gap: 0; align-items: flex-start; } .nav-menu.open { display: flex; } .nav-toggle { display: flex; } .nav-donate { display: none; } .nav-dropdown { position: static; border: none; border-top: none; background: transparent; padding-left: 1.5rem; display: block; box-shadow: none; } .nav-link { color: var(--color-text-light); } .nav-link:hover, .nav-link.active { color: var(--color-yellow); opacity: 1; } .nav-dropdown a { color: var(--color-text-light-muted); } .nav-dropdown a:hover { background: transparent; color: var(--color-white); } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; text-align: center; } .footer-bottom-links { justify-content: center; } .search-bar-inner { flex-direction: column; gap: 1rem; } .search-input-wrap { max-width: 100%; } .series-header { flex-direction: column; align-items: flex-start; } }

/*# sourceMappingURL=main.css.map */