/* =============================================================
   BRUTALIST DESIGN SYSTEM (Human-readable, minimal complexity)
   No rounded corners, no shadows, no gradients.
   Typography-driven hierarchy. Monochrome emphasis.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap');

:root {
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --color-black: #000;
  --color-white: #fff;
  --color-gray-100: #F3F4F6;
  --color-yellow-100: #FEF9C3; /* warning */
  --color-red-100: #FEE2E2;    /* error bg */
  --color-red-600: #DC2626;    /* error border */
  --max-width: 72rem; /* ~1152px */
  --border-thick: 2px solid #000;
  --border-thin: 1px solid #000;
  --rhythm-sm: 0.75rem;
  --rhythm: 1.25rem;
  --rhythm-lg: 2.5rem;
}

html, body { margin:0; padding:0; }
body {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-white);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
* { transition: none !important; }

h1, h2, h3, h4, h5, h6 { font-weight:700; margin:0 0 var(--rhythm); line-height:1.15; }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.6rem; padding-bottom: 0.4rem; border-bottom: var(--border-thick); }
h3 { font-size: 1.125rem; }
p, ul, ol, pre, blockquote { margin: 0 0 var(--rhythm); }
ul, ol { padding-left: 1.25rem; }
strong, b { font-weight:700; }
em { font-style: normal; font-weight:700; }

a { color: inherit; text-decoration: underline; font-weight:600; }
a:hover, a:focus { background: var(--color-gray-100); outline: none; }

img { max-width:100%; height:auto; display:block; }
.img-div { text-align:center; margin: var(--rhythm-lg) 0; }
article .img-div img { max-height: 320px; width: auto; margin: 0 auto; }

.main { max-width: var(--max-width); margin: 0 auto; padding: var(--rhythm-lg) var(--rhythm); }

header.site-topbar { position:static; background: var(--color-white); border-bottom: var(--border-thick); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding: var(--rhythm) var(--rhythm); max-width: var(--max-width); margin:0 auto; }
.brand { display:flex; align-items:center; gap: var(--rhythm-sm); font-weight:700; text-decoration:none; }
.brand img { height:48px; width:auto; display:block; }
nav.primary-nav ul { list-style:none; display:flex; gap: var(--rhythm); margin:0; padding:0; }
nav.primary-nav a { text-decoration:underline; font-weight:700; font-size:0.85rem; letter-spacing:0.05em; padding:0.25rem 0; text-transform:uppercase; }
nav.primary-nav a:hover { background: var(--color-gray-100); }

.intro-box { padding: var(--rhythm-lg) var(--rhythm); margin-bottom: var(--rhythm-lg); }
.intro-box p { max-width: 60ch; }
.intro-box .tagline { font-weight:700; }

section { margin-bottom: var(--rhythm-lg); }

.ep-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--rhythm); }
.episode-card { display:block; text-decoration:none; color:inherit; border: var(--border-thick); padding: var(--rhythm); }
.episode-card:hover { background: var(--color-gray-100); }
.ep-number { font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom: var(--rhythm-sm); opacity:0.6; }
.ep-content h3.ep-name { font-size:1rem; font-weight:700; margin:0 0 var(--rhythm-sm); }
.publish-date { font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom: var(--rhythm-sm); }
.ep-desc { font-size:0.85rem; margin:0; }
@media (max-width:768px) { .ep-grid { grid-template-columns: 1fr; } }

.btn { font-family:var(--font-mono); font-weight:700; cursor:pointer; border:none; text-decoration:none; display:inline-block; }
.btn-primary { background: var(--color-black); color: var(--color-white); padding: 0.9rem 1.5rem; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; }
.btn-primary:hover { background:#111; }
.btn-secondary { background:transparent; border: var(--border-thick); color: var(--color-black); padding: 0.7rem 1.2rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; }
.btn-secondary:hover { background: var(--color-gray-100); }

form { margin:0; }
.textField { font-family:var(--font-mono); border: var(--border-thick); padding: 0.75rem 0.9rem; font-size:0.85rem; width:260px; background: var(--color-white); }
.textField:focus { outline:2px solid #000; }
@media (max-width:600px) { .email-form form { flex-direction:column; align-items:stretch; } .textField, .btn-primary, .btn-secondary { width:100%; } }

.image-line { display:flex; gap: var(--rhythm); flex-wrap:wrap; margin-top: var(--rhythm); }
.svg-badge > a > img { width:165px; height:40px; margin:0; }
.svg-badge > a > img:hover { background: var(--color-gray-100); }

footer { border-top: var(--border-thick); padding: var(--rhythm-lg) var(--rhythm); text-align:center; font-size:0.75rem; }
footer p { margin:0 0 var(--rhythm-sm); }

.warning { background: var(--color-yellow-100); border: var(--border-thick); padding: var(--rhythm); }
.error { background: var(--color-red-100); border: 2px solid var(--color-red-600); padding: var(--rhythm); }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:0.5rem 0.75rem; background:var(--color-black); color:var(--color-white); }

.hero { display:none; }
.gradient-text { color:inherit; background:none; -webkit-background-clip:initial; background-clip:initial; }
.episode-card:focus-visible { outline:2px solid #000; outline-offset:2px; }

.center { text-align:center; }
.muted { opacity:0.9; }
.mb-0 { margin-bottom:0 !important; }