/* unxamined.com - episode hub.
   Brand: /mnt/ptero/unxamined/_brand/2026/brand.toml. Black ground; Oswald
   display, Archivo body; gold is the highlight; the chrome gradient and the
   red X belong to the logo, not to page furniture. Phone-first: most
   visitors arrive from a social app's in-app browser. */

:root {
  --ground: #000000;
  --panel: #101014;
  --line: #26262c;
  --text: #e8e8e8;
  --muted: #9a9aa2;
  --gold: #d9a43a;
  --blue: #2e7db5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.6 "Archivo", system-ui, sans-serif;
}

header, main, footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */
header { text-align: center; padding-top: 40px; }

.lockup {
  width: min(320px, 78%);
  height: auto;
}

h1 {
  font: 600 clamp(28px, 7.5vw, 48px)/1.1 "Oswald", "Archivo Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 20px 0 12px;
}

.lede {
  color: var(--muted);
  margin: 0 auto 8px;
  max-width: 34em;
}
.lede em { color: var(--text); font-style: italic; }

/* Episodes */
.episodes { padding: 28px 0 8px; }

.episode {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 16px;
}

.cover {
  width: 132px;
  height: auto;
  flex: none;
  border-radius: 6px;
  display: block;
}

.ep-body { min-width: 0; }

.episode h3 {
  font: 600 21px/1.25 "Oswald", "Archivo Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 2px 0 2px;
}

.runtime {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 8px;
}

.blurb {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--text);
}

.watch { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.watch-label {
  color: var(--muted);
  font-size: 14px;
  margin-right: 2px;
}

.picon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--ground);
  background: var(--gold);
}
.picon:hover, .picon:focus { background: #e6b95c; }

/* Tips */
.tips {
  text-align: center;
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 22px 16px 26px;
  margin: 28px 0 8px;
}

.tips h2 {
  font: 600 26px/1.2 "Oswald", "Archivo Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.tips p { margin: 0 0 10px; color: var(--muted); }

.tip-link {
  color: var(--gold);
  font-size: 19px;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}

/* Footer */
footer {
  text-align: center;
  padding: 30px 16px 40px;
}
footer a {
  color: var(--muted);
  text-decoration: none;
}
footer a:hover, footer a:focus { color: var(--text); }

.channels { color: var(--muted); margin: 0 0 14px; }
.channels a {
  color: var(--text);
  margin: 0 6px;
  border-bottom: 1px solid var(--line);
}

/* Small phones: the card stays side-by-side but the cover narrows */
@media (max-width: 380px) {
  .cover { width: 104px; }
  .episode h3 { font-size: 19px; }
}