/* Foxfire — Meatproxy feed + article (added to foxfire.css on pages) */

/* ---------- MP hero ---------- */
.mp { max-width: 760px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px) 96px; }
.mp-hero { padding: clamp(48px, 8vh, 96px) 0 32px; position: relative; }
.mp-title { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144, 'WONK' 1, 'SOFT' 50; font-weight: 700; font-size: clamp(34px, 5.6vw, 56px); line-height: 1.1; margin: 0 0 32px; }
.mp-intro { color: var(--quiet); font-size: 17px; max-width: 40em; }
.mp-intro b { color: var(--moon); font-variant-numeric: tabular-nums; }

/* ---------- Sort tabs ---------- */
.mp-sort { display: flex; gap: 0; margin: 32px 0 48px; border-bottom: 1px solid #1E2A20; }
.mp-sort a { min-height: 48px; display: inline-flex; align-items: center; padding: 0 22px; margin-bottom: -1px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--quiet); text-decoration: none; border-bottom: 2px solid transparent; }
.mp-sort a:hover { color: var(--tapetum); }
.mp-sort a[aria-current="page"] { color: var(--tapetum); border-bottom-color: var(--tapetum); }

/* ---------- Feed items ---------- */
.mp-feed { list-style: none; padding: 0; margin: 0; }
.mp-item { display: grid; grid-template-columns: 96px 1fr; gap: 8px 24px; padding: 34px 0 38px; border-bottom: 1px solid #16211A; }
.mp-rail { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 6px; }
.rating-gleam { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, var(--core) 0%, var(--tapetum) 40%, transparent 70%); filter: blur(1.5px); }
.rating-gleam.r2 { opacity: .55; }
.rating-gleam.r3 { opacity: .8; background: radial-gradient(circle, var(--core) 0%, var(--tapetum) 50%, transparent 70%); }
.rating-gleam.r4 { opacity: 1; background: radial-gradient(circle, #FFE9B0 0%, var(--bitter) 55%, transparent 75%); filter: blur(1.2px); }
.mp-meta-line { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--quiet); white-space: normal; line-height: 1.6; max-width: 96px; }
.mp-main { position: relative; flex: 1; min-width: 0; }
.mp-main h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(22px, 3vw, 30px); line-height: 1.18; margin: 0 0 12px; }
.mp-main h2 a { color: var(--moon); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .2s ease; }
.mp-main h2 a:hover, .mp-main h2 a:focus-visible { color: var(--core); box-shadow: inset 0 -2px 0 var(--tapetum); }
.mp-meta { font-size: 14px; color: var(--quiet); margin: 4px 0 0; }

/* Title gleam underline — always initialized (freeze via body.motion-off) */
.mp-main h2 a { box-shadow: inset 0 -2px 0 transparent; }

/* ---------- More link / footer ---------- */
.mp-more { margin: 40px 0; }
.mp-more a { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--iridium); text-decoration: none; }
.mp-more a:hover { color: var(--tapetum); }
.mp-foot { border-top: 1px solid #1E2A20; padding-top: 24px; }
.mp-foot a { color: var(--iridium); }

/* ---------- Phone: rail collapses inline ---------- */
@media (max-width: 600px) {
  .mp-item { grid-template-columns: 1fr; gap: 8px; padding: 28px 0 32px; }
  .mp-rail { flex-direction: row; align-items: center; padding-top: 0; gap: 12px; }
  .mp-meta-line { max-width: none; }
}

/* ---------- Article page ---------- */
.art { position: relative; max-width: 760px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px) 96px; }
.art-hero { padding: clamp(48px, 8vh, 88px) 0 8px; }
.art-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .28em; color: var(--quiet); margin: 0 0 18px; }
.art-title { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144, 'WONK' 1, 'SOFT' 50; font-weight: 700; font-size: clamp(34px, 6vw, 60px); line-height: 1.1; margin: 0 0 24px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 14.5px; color: var(--quiet); margin: 6px 0 48px; }
.art-meta .rating-gleam { flex: 0 0 auto; }
.art-meta .rating-gleam { display: inline-block; }
.art-body { max-width: 38em; font-size: 20px; line-height: 1.65; color: var(--moon); }
.art-body p { margin: 0 0 1.4em; }
.art-body h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px; margin: 2em 0 .8em; }
.art-body pre { background: var(--wood2); padding: 18px; box-shadow: inset 0 0 0 1px #223026; font-family: 'IBM Plex Mono', monospace; font-size: 14px; overflow-x: auto; white-space: pre-wrap; }
.art-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 48px 0; }
.art-tools button, .art-tools a { min-height: 44px; padding: 10px 18px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; background: transparent; border: 1px solid #2A3A2E; color: var(--moon); text-decoration: none; cursor: pointer; border-radius: 2px; }
.art-tools button:hover, .art-tools a:hover { border-color: var(--tapetum); color: var(--tapetum); }

/* ---------- Comments ---------- */
.comments { margin-top: 24px; }
.comments h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 28px; margin: 0 0 8px; }
.comment-form { margin: 24px 0 40px; background: var(--wood); padding: 22px; box-shadow: inset 0 0 0 1px #223026; border-radius: 2px; }
.comment-form h3 { font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: var(--quiet); margin: 0 0 14px; font-weight: 500; }
.comment-form textarea { display: block; width: 100%; min-height: 110px; padding: 14px; background: var(--wood2); border: 1px solid #2A3A2E; color: var(--moon); font: 16px/1.5 'Atkinson Hyperlegible', system-ui, sans-serif; resize: vertical; border-radius: 2px; }
.comment-form textarea:focus-visible { outline: 2px solid var(--tapetum); outline-offset: 1px; border-color: transparent; }
.comment-form button { margin-top: 12px; min-height: 44px; padding: 10px 20px; background: var(--tapetum); border: 0; color: #0A0F0A; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 2px; }
.comment-form button:hover { background: var(--core); }
.comment { padding: 20px 0; border-top: 1px solid #16211A; }
.comment .c-meta { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--quiet); margin: 0 0 8px; }
.comment .c-body { font-size: 16px; line-height: 1.6; color: #D8E2D2; max-width: 44em; }
.reply { margin-left: 24px; padding-left: 16px; border-left: 2px solid var(--iridium); }

/* ---------- Touch targets: every interactive >= 44px (WCAG 2.5.5) ---------- */
.mp-top a, .mp-top .mp-back, .mp-sort a, .mp-crumb, .mp-more a,
.mp-item h2 a, .mp-item h3 a, .mp-meta a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.mp-sort a { padding: 0 10px; }