/* ── Fonts ───────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Barlow Condensed';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style:  normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-300-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style:  italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-300-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}


/* ── Custom properties ───────────────────────────────────────────── */

:root {
  --bg:        #F0EDE6;
  --bg-subtle: rgba(10, 10, 10, 0.04);
  --text:      #0A0A0A;
  --muted:     rgba(10, 10, 10, 0.45);
  --border:    rgba(10, 10, 10, 0.12);
  --amber:     #B8780A;
  --amber-dim: rgba(184, 120, 10, 0.10);

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'IBM Plex Mono', monospace;

  --measure: 68ch;
  --gap:     clamp(1rem, 4vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0A0A0A;
    --bg-subtle: rgba(240, 237, 230, 0.04);
    --text:      #F0EDE6;
    --muted:     rgba(240, 237, 230, 0.45);
    --border:    rgba(240, 237, 230, 0.12);
    --amber:     #E8A020;
    --amber-dim: rgba(232, 160, 32, 0.10);
  }
}


/* ── Reset ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg, audio { display: block; max-width: 100%; }


/* ── Base ────────────────────────────────────────────────────────── */

html {
  font-family:             var(--font-body);
  font-size:               clamp(13px, 1.8vw, 15px);
  font-weight:             400;
  line-height:             1.75;
  background-color:        var(--bg);
  color:                   var(--text);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height:     100dvh;
  display:        flex;
  flex-direction: column;
}

a {
  color:           var(--amber);
  text-decoration: none;
}

a:hover {
  text-decoration:        underline;
  text-underline-offset:  0.2em;
  text-decoration-thickness: 1px;
}

h1, h2, h3 {
  font-family:    var(--font-display);
  font-weight:    800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height:    1.05;
  color:          var(--text);
}


/* ── Layout ──────────────────────────────────────────────────────── */

.container {
  max-width:     var(--measure);
  margin-inline: auto;
  padding-inline: var(--gap);
}

main {
  flex:          1;
  padding-block: calc(var(--gap) * 2);
}


/* ── Site header ─────────────────────────────────────────────────── */

.site-header {
  padding-block:  var(--gap);
  border-bottom:  1px solid var(--border);
}

.site-header .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--gap);
}

.site-logo {
  display:     flex;
  align-items: center;
}

.site-logo img {
  height:    40px;
  width:     auto;
}

.site-nav {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
}

.site-nav a {
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.15em;
  color:          var(--muted);
  text-transform: uppercase;
}

.site-nav a:hover {
  color:           var(--amber);
  text-decoration: none;
}


/* ── Home / episode list ─────────────────────────────────────────── */

.feed-header {
  margin-bottom: calc(var(--gap) * 2);
  padding-bottom: var(--gap);
  border-bottom:  1px solid var(--border);
}

.feed-title {
  font-size:  clamp(2rem, 6vw, 3rem);
  margin-bottom: 0.4em;
}

.feed-description {
  color:     var(--muted);
  font-size: 0.85rem;
  max-width: 50ch;
}

.episode-list {
  list-style: none;
  padding:    0;
}

.episode-list > li {
  border-bottom: 1px solid var(--border);
}

.episode-list > li:first-child {
  border-top: 1px solid var(--border);
}

.episode-item {
  display:       grid;
  grid-template-columns: 8ch 1fr max-content;
  gap:           0 1.5rem;
  align-items:   baseline;
  padding-block: 0.9rem;
}

.episode-number {
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.10em;
  color:          var(--muted);
  white-space:    nowrap;
  padding-top:    0.1em;
  text-decoration: none;
}

.episode-number:hover {
  color:           var(--amber);
  text-decoration: none;
}

.episode-title {
  font-family:    var(--font-display);
  font-size:      1.2rem;
  font-weight:    800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition:     color 0.1s;
  color:          var(--text);
  text-decoration: none;
}

.episode-title:hover { color: var(--amber); }

.episode-duration {
  font-size:      0.7rem;
  letter-spacing: 0.08em;
  color:          var(--muted);
  white-space:    nowrap;
}


/* ── Episode single ──────────────────────────────────────────────── */

.episode-kicker {
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.15em;
  color:          var(--muted);
  margin-bottom:  0.6rem;
  text-transform: uppercase;
}

.episode-single-title {
  font-size:     clamp(2rem, 6vw, 3.5rem);
  margin-bottom: 1.5rem;
}

.episode-player {
  margin-block: var(--gap);
}

audio {
  width:         100%;
  accent-color:  var(--amber);
}


/* ── Episode content (shownotes) ─────────────────────────────────── */

.episode-content {
  margin-block: var(--gap);
}

.episode-content h2 {
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  color:          var(--muted);
  margin-block:   1.5rem 0.6rem;
}

.episode-content p    { margin-bottom: 0.75rem; }
.episode-content ul,
.episode-content ol   { padding-left: 1.5em; margin-bottom: 0.75rem; }
.episode-content li   { margin-bottom: 0.2rem; }

.episode-content a {
  text-decoration:        underline;
  text-underline-offset:  0.2em;
  text-decoration-thickness: 1px;
}


/* ── Chapters ────────────────────────────────────────────────────── */

.chapters {
  margin-block:  var(--gap);
  border-top:    1px solid var(--border);
}

.chapters-heading {
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  color:          var(--muted);
  padding-block:  0.75rem;
}

.chapter-list {
  list-style: none;
  padding:    0;
}

.chapter-item {
  display:       flex;
  gap:           1.5rem;
  align-items:   baseline;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--border);
  font-size:     0.85rem;
}

.chapter-time {
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.10em;
  color:          var(--amber);
  white-space:    nowrap;
  min-width:      5ch;
}

.chapter-title {
  color: var(--text);
}


/* ── Webmentions ─────────────────────────────────────────────────── */

.webmentions {
  margin-block: calc(var(--gap) * 2);
  border-top:   1px solid var(--border);
  padding-top:  var(--gap);
}

.webmentions-heading {
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  color:          var(--muted);
  margin-bottom:  var(--gap);
}

.webmention-list {
  list-style: none;
  padding:    0;
}

.webmention-children {
  list-style:   none;
  padding:      0;
  margin-left:  1.25rem;
  padding-left: 1rem;
  border-left:  1.5px solid var(--border);
}

.wm-reply-hint {
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.08em;
  color:          var(--muted);
  margin-bottom:  0.1rem;
}

.wm-reply-to {
  color:           var(--amber);
  text-decoration: none;
}

.wm-reply-to:hover { text-decoration: underline; }

.webmention-item {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size:     0.85rem;
}

.webmention-author {
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.08em;
  color:          var(--amber);
  margin-bottom:  0.2rem;
}

.webmention-date {
  color: var(--muted);
}

.webmention-content { color: var(--text); }

.webmentions-empty {
  font-size: 0.8rem;
  color:     var(--muted);
}


/* ── Site footer ─────────────────────────────────────────────────── */

.site-footer {
  padding-block:  var(--gap);
  border-top:     1px solid var(--border);
}

.site-footer .container {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--gap);
  flex-wrap:       wrap;
  font-size:       0.7rem;
  letter-spacing:  0.10em;
  color:           var(--muted);
}

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

.site-footer a:hover {
  color:           var(--amber);
  text-decoration: none;
}


/* ── h-card (hidden microformat anchor) ──────────────────────────── */

.p-author.h-card { display: none; }