/* ═══════════════════════════════════════════════════════════
   THE DAILY CYBORG — V1 "Muted Phosphor" Stylesheet
   Terminal archaeology. No glow. No laser. Aged CRT.
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
  /* Backgrounds */
  --bg-primary:    #070b07;
  --bg-secondary:  #0a100a;
  --bg-card:       #0c110c;

  /* Foreground */
  --text-primary:  oklch(0.95 0.01 95);

  /* Phosphor — desaturated green, not laser */
  --phosphor:      oklch(0.78 0.11 142);
  --phosphor-dim:  oklch(0.55 0.06 142);
  --phosphor-mute: oklch(0.38 0.035 142);

  /* Amber — shadow accent for stardates and ticker label */
  --amber:         oklch(0.68 0.11 75);
  --amber-dim:     oklch(0.45 0.07 75);

  /* Rules — hairlines only */
  --rule:          oklch(0.55 0.06 142 / 0.55);
  --rule-faint:    oklch(0.55 0.06 142 / 0.18);

  /* Back-compat aliases so existing selectors still resolve */
  --accent:        var(--phosphor);
  --accent-dim:    var(--rule-faint);
  --rule-color:    var(--phosphor-dim);
  --text-secondary: var(--phosphor-dim);
  --text-muted:    var(--phosphor-mute);

  /* Fonts — unchanged */
  --font-masthead: 'UnifrakturMaguntia', serif;
  --font-headline: 'Courier Prime', 'Courier New', monospace;
  --font-body:     'Lora', Georgia, serif;
  --font-label:    'VT323', monospace;
  --font-mono:     'Share Tech Mono', monospace;

  --max-width: 1200px;
  --column-gap: 2rem;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.65;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ── Newsprint grain — fixed overlay (replaces circuit board) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.9  0 0 0 0 0.6  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── CRT scanlines — global overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.12) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
}

/* ── Glyph rain canvas ── */
#glyph-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.22;
  pointer-events: none;
}

/* ── CRT 60Hz flicker ── */
@keyframes v1flicker {
  0%, 100% { opacity: 0.97; }
  3%        { opacity: 0.93; }
  50%       { opacity: 1;    }
  97%       { opacity: 0.95; }
}

.page-flicker {
  animation: v1flicker 4.5s infinite;
}

/* ═══════════════════════════════════════════════════════════
   READABLE MODE — dark stays, noise off, body goes clean
   ═══════════════════════════════════════════════════════════ */

html[data-readable="true"] body::before,
html[data-readable="true"] body::after {
  display: none;
}

html[data-readable="true"] #glyph-rain {
  display: none;
}

html[data-readable="true"] .page-flicker {
  animation: none;
}

html[data-readable="true"] {
  --text-primary:  #f0ede6;
  --phosphor-dim:  #c0bcb4;
  --phosphor-mute: #888480;
}

/* Article body — system sans-serif, high contrast, generous spacing */
html[data-readable="true"] .post-body p,
html[data-readable="true"] .post-body li,
html[data-readable="true"] .post-body ul,
html[data-readable="true"] .post-body ol {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.85;
  color: #f0ede6;
  letter-spacing: 0;
}

html[data-readable="true"] .post-body blockquote p,
html[data-readable="true"] .pull-quote p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #f0ede6;
}

html[data-readable="true"] .post-card-excerpt {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #c0bcb4;
  line-height: 1.7;
}

html[data-readable="true"] .page-body p,
html[data-readable="true"] .subscribe-subtext,
html[data-readable="true"] .what-to-expect li,
html[data-readable="true"] .ad-body,
html[data-readable="true"] .marketplace-subhead {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #f0ede6;
  line-height: 1.8;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .page-flicker { animation: none; }
  #glyph-rain   { display: none;  }
}

/* ── Page wrapper ── */
.page-wrapper {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ═══════════════════════════════════════════════════════════
   MASTHEAD / HEADER
   ═══════════════════════════════════════════════════════════ */

.site-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0;
  position: relative;
  z-index: 10;
}

.masthead {
  text-align: center;
  padding: 2.5rem 1.5rem 1rem;
  position: relative;
}

.masthead-title {
  font-family: var(--font-masthead);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 400;
  color: var(--text-primary);
  text-shadow:
    0 0 18px oklch(0.78 0.11 142 / 0.28),
    0 0 2px  oklch(0.78 0.11 142 / 0.6);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}

.masthead-title a {
  color: inherit;
  text-decoration: none;
}

.masthead-tagline {
  font-family: var(--font-label);
  font-size: 1.1rem;
  color: var(--phosphor);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.masthead-meta {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.12em;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.masthead-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.masthead-meta .sep {
  color: var(--phosphor-mute);
}

/* ── Neural Weather Ticker ── */
.ticker-bar {
  background: var(--bg-secondary);
  border-top: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule-faint);
  padding: 0.5rem 1.5rem;
  font-family: var(--font-label);
  font-size: 0.95rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.ticker-label {
  color: var(--amber);
  font-weight: 700;
  flex-shrink: 0;
  padding-right: 1rem;
  background: var(--bg-secondary);
  position: relative;
  z-index: 1;
}

.ticker-track {
  overflow: hidden;
  flex: 1;
}

.ticker-content {
  display: inline-block;
  animation: ticker-scroll 30s linear infinite;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ── Navigation ── */
.site-nav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 10;
}

.site-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.site-nav li {
  position: relative;
}

.site-nav a {
  display: block;
  padding: 0.875rem 1.375rem;
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--phosphor-dim);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  transition: color 0.15s, background 0.15s;
  border-right: 1px solid var(--rule-faint);
}

.site-nav li:first-child a { border-left: none; }

.site-nav a:hover {
  color: var(--phosphor);
  background: oklch(0.55 0.06 142 / 0.08);
}

.site-nav a.active {
  color: var(--text-primary);
  background: oklch(0.55 0.06 142 / 0.08);
}

/* Nav wrapper — keeps links centered, button pinned right */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── Readable mode toggle button ── */
.readable-btn {
  position: absolute;
  right: 0;
  background: none;
  border: 1px solid var(--rule-faint);
  color: var(--phosphor-dim);
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.readable-btn:hover {
  color: var(--phosphor);
  border-color: var(--phosphor);
}

html[data-readable="true"] .readable-btn {
  color: var(--phosphor);
  border-color: var(--phosphor);
}

/* Tooltip */
.readable-btn::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  color: var(--text-primary);
  font-family: var(--font-headline);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.readable-btn:hover::before {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   DECORATIVE RULES
   ═══════════════════════════════════════════════════════════ */

.rule {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: 2rem 0;
}

.rule-single {
  border: none;
  height: 1px;
  background: var(--rule-faint);
  margin: 1.5rem 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 1.5rem;
}

.section-header::before,
.section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.section-title {
  font-family: var(--font-label);
  font-size: 1.2rem;
  color: var(--phosphor);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  white-space: nowrap;
}

.section-title::before { content: '∷ '; }
.section-title::after  { content: ' ∷'; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — FULL-WIDTH LEAD + TWO-COLUMN ARCHIVE BELOW
   ═══════════════════════════════════════════════════════════ */

.broadsheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--column-gap);
  margin: 2rem 0;
}

/* Lead story spans both columns */
.broadsheet-grid .post-card:first-child {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2.5rem;
  margin-bottom: 0.5rem;
}

.broadsheet-grid .post-card:first-child .post-card-title {
  font-size: 2rem;
}

.broadsheet-grid .post-card:first-child .post-card-excerpt {
  font-size: 1.05rem;
  max-width: 680px;
}

/* Lead post — READ FULL TRANSMISSION 30% larger than base */
.broadsheet-grid .post-card:first-child .read-more {
  font-size: 0.91rem;
  padding: 0.52rem 1.3rem;
  letter-spacing: 0.22em;
}

@media (max-width: 768px) {
  .broadsheet-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   POST CARD
   ═══════════════════════════════════════════════════════════ */

.post-card {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-faint);
}

.post-card:last-child {
  border-bottom: none;
}

.post-card-issue {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  color: var(--amber);
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}

.post-card-title {
  font-family: var(--font-headline);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.post-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.post-card-title a:hover {
  color: var(--phosphor);
}

.broadsheet-grid .post-card:first-child .post-card-title {
  font-size: 1.875rem;
}

.post-card-excerpt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.post-card-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tag {
  font-family: var(--font-headline);
  font-size: 0.65rem;
  color: var(--phosphor-dim);
  border: 1px solid var(--rule-faint);
  padding: 0.15rem 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.read-more {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--phosphor);
  text-decoration: none;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--phosphor);
  padding: 0.4rem 1rem;
  transition: background 0.15s, color 0.15s;
}

.read-more:hover {
  background: var(--phosphor);
  color: var(--bg-primary);
}

/* ═══════════════════════════════════════════════════════════
   POST / ARTICLE LAYOUT
   ═══════════════════════════════════════════════════════════ */

.post-header {
  padding: 3rem 0 2rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.post-issue-label {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  color: var(--amber);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.post-title {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.post-meta {
  font-family: var(--font-headline);
  font-size: 0.8rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.12em;
}

.post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 3rem;
}

/* Drop cap — no glow */
.drop-cap::first-letter {
  font-family: var(--font-masthead);
  font-size: 5rem;
  font-weight: 400;
  float: left;
  line-height: 0.75;
  margin-right: 0.1em;
  margin-top: 0.05em;
  color: var(--phosphor);
}

/* ── "For the Humans / Cyborgs / Robots" section labels ── */
.post-body h3 {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--phosphor);
  border: 1px solid oklch(0.55 0.12 142 / 0.55);
  display: inline-block;
  padding: 0.3em 0.9em;
  margin: 1.6rem 0 0.9rem;
  background: oklch(0.55 0.12 142 / 0.06);
}

.post-body p {
  margin-bottom: 1.4rem;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.post-body h2 {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-faint);
}

.post-body h3 {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2rem 0 0.75rem;
}

/* Pull quote — no glow */
.pull-quote,
.post-body blockquote {
  border: none;
  border-left: 2px solid var(--phosphor);
  border-right: 2px solid var(--phosphor);
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  background: var(--bg-card);
  position: relative;
}

.pull-quote::before,
.post-body blockquote::before {
  content: '\201C';
  font-family: var(--font-masthead);
  font-size: 5rem;
  color: var(--phosphor);
  opacity: 0.3;
  position: absolute;
  top: -1rem;
  left: 1rem;
  line-height: 1;
}

.pull-quote p,
.post-body blockquote p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

/* Article horizontal rule */
.article-rule,
.post-body hr {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: 2.5rem auto;
  width: 60%;
}

/* Code blocks */
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-card);
  color: var(--phosphor-dim);
  padding: 0.1em 0.4em;
  border: 1px solid var(--rule-faint);
}

.post-body pre {
  background: var(--bg-card);
  border: 1px solid var(--rule-faint);
  border-left: 2px solid var(--phosphor);
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.post-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Links in post body and page body */
.post-body a,
.page-body a {
  color: var(--phosphor-dim);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.post-body a:visited,
.page-body a:visited {
  color: oklch(0.52 0.07 142);
}

.post-body a:hover,
.page-body a:hover {
  color: var(--phosphor);
}

/* ═══════════════════════════════════════════════════════════
   ARCHIVE PAGE
   ═══════════════════════════════════════════════════════════ */

.archive-month {
  margin: 3rem 0 1.5rem;
}

.archive-month-label {
  font-family: var(--font-label);
  font-size: 1.4rem;
  color: var(--phosphor);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-left: 2px solid var(--phosphor);
  background: var(--bg-card);
  display: block;
}

.archive-entry {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule-faint);
  align-items: baseline;
}

.archive-date {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  color: var(--amber-dim);
  letter-spacing: 0.06em;
}

.archive-title {
  font-family: var(--font-headline);
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}

.archive-title:hover {
  color: var(--phosphor);
}

.archive-excerpt {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--phosphor-dim);
  margin-top: 0.2rem;
  grid-column: 2;
}

/* Search bar */
.search-container {
  margin: 2rem 0;
  position: relative;
}

.search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule);
  color: var(--text-primary);
  font-family: var(--font-headline);
  font-size: 1rem;
  padding: 0.9rem 3rem 0.9rem 1rem;
  outline: none;
  transition: border-color 0.15s;
  letter-spacing: 0.05em;
}

.search-input:focus {
  border-color: var(--phosphor);
}

.search-input::placeholder {
  color: var(--phosphor-mute);
  font-style: italic;
}

.search-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--phosphor);
  font-family: var(--font-label);
  font-size: 1.2rem;
}

#search-results {
  margin-top: 1rem;
}

.search-result-item {
  padding: 1rem;
  border: 1px solid var(--rule-faint);
  margin-bottom: 0.5rem;
  background: var(--bg-card);
}

.search-result-item a {
  font-family: var(--font-headline);
  color: var(--phosphor);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════
   MARKETPLACE — CLASSIFIED ADS
   ═══════════════════════════════════════════════════════════ */

.marketplace-header {
  text-align: center;
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.marketplace-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.marketplace-subhead {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-primary);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.ad-card {
  border: 1px solid var(--phosphor-mute);
  border-bottom: 2px solid var(--phosphor-mute);
  background: var(--bg-card);
  padding: 1.5rem;
  position: relative;
  transition: border-color 0.15s;
}

.ad-card:hover {
  border-color: var(--phosphor);
}

.ad-card-inner {
  border: 1px solid var(--rule-faint);
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ad-tag {
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--bg-primary);
  background: var(--phosphor);
  padding: 0.1rem 0.6rem;
  display: inline-block;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  align-self: flex-start;
}

.ad-tag.tag-sale     { background: #c0392b; color: #fff; }
.ad-tag.tag-new      { background: var(--phosphor); color: var(--bg-primary); }
.ad-tag.tag-exclusive{ background: var(--phosphor-dim); color: var(--bg-primary); }
.ad-tag.tag-limited  { background: var(--amber); color: var(--bg-primary); }
.ad-tag.tag-sold-out { background: transparent; color: var(--phosphor-mute); border: 1px solid var(--phosphor-mute); }
.ad-tag.tag-featured { background: var(--amber-dim); color: var(--bg-primary); }

.ad-headline {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.ad-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: 0.75rem;
  filter: grayscale(40%) contrast(1.1);
  border: 1px solid var(--rule-faint);
}

.ad-body {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 1rem;
}

.ad-button {
  display: block;
  text-align: center;
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--phosphor);
  border: 1px solid var(--phosphor);
  padding: 0.5rem;
  text-decoration: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
  margin-top: auto;
  cursor: pointer;
  background: none;
  width: 100%;
}

.ad-button:hover {
  background: var(--phosphor);
  color: var(--bg-primary);
}

.ad-button:disabled {
  color: var(--phosphor-mute);
  border-color: var(--phosphor-mute);
  cursor: not-allowed;
  opacity: 0.5;
}

.ad-button:disabled:hover {
  background: none;
}

.ad-card--sold-out {
  opacity: 0.55;
  filter: grayscale(50%);
}

.ad-fine-print {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--phosphor-mute);
  line-height: 1.4;
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--rule-faint);
  padding-top: 0.6rem;
}

/* ═══════════════════════════════════════════════════════════
   SUBSCRIBE PAGE
   ═══════════════════════════════════════════════════════════ */

.subscribe-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 0;
}

.subscribe-headline {
  font-family: var(--font-headline);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  line-height: 1.1;
}

.subscribe-subtext {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.form-container {
  border: 1px solid var(--rule-faint);
  border-top: 2px solid var(--phosphor);
  padding: 2rem;
  background: var(--bg-card);
  margin-bottom: 2.5rem;
}

/* ── Buttondown embed form ── */
.embeddable-buttondown-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.embeddable-buttondown-form label {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--phosphor-dim);
}

.embeddable-buttondown-form input[type="email"] {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--phosphor);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.embeddable-buttondown-form input[type="email"]:focus {
  border-color: var(--phosphor);
  box-shadow: 0 0 0 1px var(--phosphor);
}

.embeddable-buttondown-form input[type="submit"] {
  align-self: flex-start;
  font-family: var(--font-headline);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg-primary);
  background: var(--phosphor);
  border: none;
  padding: 0.6rem 1.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.embeddable-buttondown-form input[type="submit"]:hover {
  background: var(--phosphor-dim);
}

.embeddable-buttondown-form p {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.embeddable-buttondown-form p a {
  color: var(--text-muted);
}

.form-placeholder {
  font-family: var(--font-label);
  font-size: 1rem;
  color: var(--phosphor-mute);
  border: 1px dashed var(--rule-faint);
  padding: 2rem;
  text-align: center;
  letter-spacing: 0.1em;
}

.what-to-expect {
  margin-top: 2rem;
}

.what-to-expect h3 {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--phosphor);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.what-to-expect ul {
  list-style: none;
  padding: 0;
}

.what-to-expect li {
  font-family: var(--font-body);
  color: var(--text-primary);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-faint);
  padding-left: 1.5rem;
  position: relative;
}

.what-to-expect li::before {
  content: '▶';
  font-size: 0.6rem;
  color: var(--phosphor);
  position: absolute;
  left: 0;
  top: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT / STATIC PAGE
   ═══════════════════════════════════════════════════════════ */

.page-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 0;
}

.page-title {
  font-family: var(--font-headline);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.page-body .drop-cap::first-letter {
  font-family: var(--font-masthead);
  font-size: 5rem;
  float: left;
  line-height: 0.75;
  margin-right: 0.1em;
  margin-top: 0.05em;
  color: var(--phosphor);
}

.page-body p {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 1.4rem;
  line-height: 1.7;
}

/* ── Cyborg tension section banner ── */
.cyborg-tension-banner {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  object-position: center 30%;
  margin: 0.75rem 0 2rem;
  border: 1px solid var(--rule-faint);
  filter: sepia(0.08) contrast(1.05);
}

/* ── About page photo ── */
.about-photo-wrap {
  float: right;
  margin: 0 0 2rem 3.5rem;
  width: clamp(220px, 35%, 320px);
  shape-outside: border-box;
}

.about-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 1px solid var(--rule-faint);
  filter: sepia(0.12) contrast(1.05);
}

@media (max-width: 640px) {
  .about-photo-wrap {
    float: none;
    width: 70%;
    margin: 0 auto 2rem;
  }
}

.subscribe-cta-box {
  border: 1px solid var(--phosphor);
  padding: 2rem;
  text-align: center;
  background: var(--bg-card);
  margin: 3rem 0;
}

.subscribe-cta-box p {
  font-family: var(--font-label);
  font-size: 1.1rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.btn-signal {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bg-primary);
  background: var(--phosphor);
  padding: 0.75rem 2rem;
  text-decoration: none;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 0.15s;
}

.btn-signal:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--bg-secondary);
  margin-top: 4rem;
  position: relative;
  z-index: 10;
}

.footer-text {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  color: var(--phosphor-mute);
  letter-spacing: 0.12em;
  line-height: 1.8;
}

.footer-text a {
  color: var(--phosphor-dim);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-text a:hover {
  color: var(--phosphor);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

.text-center  { text-align: center; }
.text-accent  { color: var(--phosphor); }
.text-muted   { color: var(--phosphor-mute); }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root { --column-gap: 1rem; }

  .masthead { padding: 1.5rem 1rem 0.75rem; }

  .masthead-meta {
    gap: 0.75rem;
    font-size: 0.85rem;
  }

  .site-nav a {
    padding: 0.6rem 0.9rem;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  .post-title { font-size: 1.8rem; }

  .archive-entry {
    grid-template-columns: 90px 1fr;
    gap: 0.5rem;
  }

  .ads-grid { grid-template-columns: 1fr; }

  .subscribe-page,
  .page-body { padding: 2rem 0; }
}

@media (max-width: 480px) {
  .site-nav ul { flex-direction: column; }

  .site-nav a {
    border-right: none;
    border-bottom: 1px solid var(--rule-faint);
    text-align: center;
  }

  .site-nav li:first-child a { border-left: none; }

  .archive-entry { grid-template-columns: 1fr; }

  .archive-date { font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════
   WEEKEND EDITION — Movie / App / Book sections
   Appended by _layouts/weekend.html after the main {{ content }}.
   Matches the existing Muted Phosphor system: same dark ground,
   same typography, same spacing rhythm. Feels like extra
   newspaper sections, not bolted-on widgets.
   ═══════════════════════════════════════════════════════════ */

/* Container — keeps the three sections to the same column width
   as .post-body so the rhythm doesn't jump. All child selectors
   below are scoped under .weekend-sections to reliably outrank
   the existing .post-body h3 / .post-body p element rules. */
.post-body .weekend-sections {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 1rem;
}

/* Standard double-rule divider in the accent color.
   Classic newspaper section break. */
.post-body .weekend-divider {
  border: none;
  border-top: 3px double var(--phosphor);
  height: 0;
  margin: 3rem auto 2rem;
  width: 100%;
  opacity: 0.9;
}

.weekend-sections .weekend-section {
  margin: 0 0 1rem;
}

/* Small uppercase VT323 label — matches the "section-title"
   voice used elsewhere on the site. */
.weekend-sections .weekend-section-label {
  font-family: var(--font-label);
  font-size: 1.15rem;
  color: var(--phosphor);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule-faint);
}

/* Shared box chrome — matches .form-container / .post-body pre:
   dark card ground, faint hairline, phosphor top accent. */
.weekend-sections .weekend-box {
  border: 1px solid var(--rule-faint);
  border-top: 2px solid var(--phosphor);
  background: var(--bg-card);
  padding: 1.5rem 1.75rem;
  position: relative;
}

/* Shared note paragraph style — tighter than body copy so each
   box reads like a short review column. Scoped under
   .weekend-sections to beat .post-body p. */
.weekend-sections .weekend-note {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.7;
  margin: 0 0 1rem;
}

/* ── SECTION A: CYBORGS IN MEDIA (Movie) ── */
.weekend-sections .weekend-movie-title {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0 0 1rem;
  /* Override the generic .post-body h3 pill — this heading sits
     inside a box and should read as a title, not a chip. */
  border: none;
  padding: 0;
  background: none;
  display: block;
}

.weekend-sections .weekend-movie-year {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--phosphor-dim);
  letter-spacing: 0.06em;
  margin-left: 0.35em;
  text-transform: none;
}

.weekend-sections .weekend-verdict {
  font-family: var(--font-headline);
  font-size: 0.9rem;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  margin: 0.5rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule-faint);
  text-transform: uppercase;
}

.weekend-sections .weekend-verdict-label {
  font-family: var(--font-label);
  font-size: 1rem;
  color: var(--phosphor);
  letter-spacing: 0.2em;
  margin-right: 0.5em;
}

/* ── SECTION B: DIGITAL TOOLS (App) ── */
.weekend-sections .weekend-box--classified {
  /* Slightly tighter classified-ad feel — thinner top rule,
     a left hairline to echo the ad-card look. */
  border-left: 1px solid var(--phosphor-mute);
  border-right: 1px solid var(--phosphor-mute);
}

.weekend-sections .weekend-app-name {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0 0 1rem;
  border: none;
  padding: 0;
  background: none;
  display: block;
}

.weekend-sections .weekend-app-platform {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--amber);
  letter-spacing: 0.08em;
  margin-left: 0.4em;
  text-transform: none;
}

/* Newspaper-style hyperlink: accent color, no underline, monospace.
   Scoped under .post-body .weekend-sections so it beats the
   site-wide dotted-underline .post-body a rule. */
.post-body .weekend-sections .weekend-app-link {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--phosphor);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule-faint);
  transition: color 0.15s, letter-spacing 0.15s;
}

.post-body .weekend-sections .weekend-app-link:hover,
.post-body .weekend-sections .weekend-app-link:focus {
  color: var(--text-primary);
  letter-spacing: 0.18em;
  text-decoration: none;
}

/* ── SECTION C: FROM THE STACKS (Book) ── */
/* Regular header font — matches movie/app titles so it reads as
   a proper title, not a display-type ornament. */
.weekend-sections .weekend-book-title {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  /* Override .post-body h3 pill-style: this should read as a
     title, not a chip. */
  border: none;
  padding: 0;
  background: none;
  display: block;
}

.weekend-sections .weekend-book-author {
  font-family: var(--font-headline);
  font-size: 0.9rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Inline status line — e.g. "STATUS: READING NOW" — replaces the
   prior shelf-tag pill. Low-key, informational. */
.weekend-sections .weekend-book-status-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--phosphor-dim);
  letter-spacing: 0.08em;
  margin: 0.25rem 0 0.75rem;
  text-transform: uppercase;
}

.weekend-sections .weekend-book-status-label {
  font-family: var(--font-label);
  color: var(--phosphor);
  letter-spacing: 0.18em;
  margin-right: 0.5em;
}

.weekend-sections .weekend-book-status-value {
  color: var(--text-primary);
  letter-spacing: 0.12em;
}

/* Legacy status badge — retained so older weekend posts that used
   the pill still render. New posts use .weekend-book-status-line
   plus .weekend-book-buy-link. */
.weekend-sections .weekend-book-status {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.95rem;
  color: var(--bg-primary);
  background: var(--phosphor);
  padding: 0.15rem 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

/* Amazon buy link — same base style as .weekend-app-link but
   phrased as the book section's CTA. */
.post-body .weekend-sections .weekend-book-buy-link {
  margin-top: 0.5rem;
}

/* ── Movie extras: poster image + Jason/Robot one-liner reviews ── */
.weekend-sections .weekend-movie-poster-wrap {
  margin: 0 0 1.1rem;
  text-align: center;
}

.weekend-sections .weekend-movie-poster {
  display: inline-block;
  max-width: 220px;
  width: 100%;
  height: auto;
  border: 1px solid var(--phosphor-mute);
  padding: 4px;
  background: var(--bg-primary);
  box-shadow:
    0 0 18px oklch(0.78 0.11 142 / 0.12),
    0 0 2px  oklch(0.78 0.11 142 / 0.35);
}

.weekend-sections .weekend-movie-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--phosphor-mute);
  transition: border-color 0.15s, color 0.15s;
}

.weekend-sections .weekend-movie-title-link:hover,
.weekend-sections .weekend-movie-title-link:focus {
  color: var(--phosphor);
  border-bottom-color: var(--phosphor);
}

.weekend-sections .weekend-movie-reviews {
  margin: 0.5rem 0 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule-faint);
}

.weekend-sections .weekend-movie-review {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-primary);
  line-height: 1.55;
  margin: 0 0 0.4rem;
}

.weekend-sections .weekend-movie-review--robot {
  color: var(--phosphor-dim);
  font-style: italic;
}

.weekend-sections .weekend-movie-review-label {
  font-family: var(--font-label);
  font-size: 0.9rem;
  color: var(--phosphor);
  letter-spacing: 0.18em;
  margin-right: 0.5em;
  text-transform: uppercase;
}

.post-body .weekend-sections .weekend-movie-imdb-link {
  margin-top: 0.5rem;
}

/* ── Closing Note: the "final word" block at the very end ── */
.weekend-sections .weekend-box--closing {
  border-left: none;
  border-right: none;
}

.weekend-sections .weekend-closing-note {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.75;
  margin: 0;
  text-align: left;
}

/* ── Archive badge for Weekend Edition entries ── */
.archive-badge-weekend {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--bg-primary);
  background: var(--phosphor);
  padding: 0.05rem 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 0.6em;
  vertical-align: middle;
  line-height: 1.4;
}

/* ── Readable mode parity ── */
html[data-readable="true"] .weekend-sections .weekend-note,
html[data-readable="true"] .weekend-sections .weekend-book-author,
html[data-readable="true"] .weekend-sections .weekend-verdict {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #f0ede6;
  line-height: 1.8;
}

html[data-readable="true"] .weekend-sections .weekend-book-author {
  color: #c0bcb4;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .weekend-sections .weekend-box          { padding: 1.25rem 1.1rem; }
  .weekend-sections .weekend-movie-title  { font-size: 1.35rem; }
  .weekend-sections .weekend-app-name     { font-size: 1.3rem; }
  .weekend-sections .weekend-book-title   { font-size: 1.35rem; }
  .weekend-sections .weekend-movie-poster { max-width: 180px; }
  .post-body .weekend-divider             { margin: 2.25rem auto 1.5rem; }
}