/* ============================================================
   RUNNIT RESOURCES: listing + article styles
   Builds on the tokens and components in site.css.
   Theme-aware: follows the visitor's OS light/dark preference
   via the --t-* tokens below. Brand accents stay constant;
   surfaces and ink flip.
   ============================================================ */

:root {
  --t-bg: #000000;
  --t-panel: #171615;
  --t-line: #2C2B2B;
  --t-ink: #FFFFFF;
  --t-soft: #E4E2DE;
  --t-muted: #BAB9B5;
  --t-faint: #414040;
  --t-nav-bg: rgba(0, 0, 0, 0.92);
  --t-input-bg: #171615;
  /* Accent text colors: bright enough for black backgrounds */
  --t-c-guava: #FF51A8;
  --t-c-acai: #ADA9F5;
  --t-c-mandarin: #FF6100;
  --t-c-matcha: #BBCD48;
}

@media (prefers-color-scheme: light) {
  :root {
    --t-bg: #F8F8F7;
    --t-panel: #FFFFFF;
    --t-line: #E4E2DE;
    --t-ink: #000000;
    --t-soft: #2C2B2B;
    --t-muted: #57544F;
    --t-faint: #BAB9B5;
    --t-nav-bg: rgba(248, 248, 247, 0.92);
    --t-input-bg: #FFFFFF;
    /* Darker accent variants that hold contrast on light surfaces */
    --t-c-guava: #D42E85;
    --t-c-acai: #6A63D9;
    --t-c-mandarin: #D95200;
    --t-c-matcha: #7F8F1F;
  }
}

body.res-body { background: var(--t-bg); color: var(--t-ink); }

/* ── Nav + footer (theme-aware on resource pages only) ─────── */
.res-body .site-nav { background: var(--t-nav-bg); border-bottom-color: var(--t-line); }
.res-body .site-nav .brand span { color: var(--t-ink); }
.res-body .nav-link { color: var(--t-muted); }
.res-body .nav-link:hover { color: var(--t-ink); }
.res-body .nav-link-active { color: var(--t-ink); }
.res-body .colophon-band, .res-body .site-footer { background: var(--t-bg); }
.res-body .site-footer { color: var(--t-ink); }
.res-body .colophon-band .colophon { color: var(--t-muted); border-bottom-color: var(--t-line); }
.res-body .colophon-band .colophon a { color: var(--t-ink); }
.res-body .site-footer .fine, .res-body .site-footer .fine a { color: var(--t-muted); }
.res-body .site-footer .fine a:hover { color: var(--t-ink); }
.res-body .eyebrow { color: var(--t-c-guava); }
.res-body .nav-burger { border-color: var(--t-line); }
.res-body .nav-burger span { color: var(--t-ink); }
@media (max-width: 720px) {
  .res-body .site-nav .links { background: var(--t-nav-bg); border-bottom-color: var(--t-line); }
  .res-body .site-nav .links .nav-link { border-bottom-color: var(--t-line); }
}

/* ── Draft preview banner ──────────────────────────────────── */
.preview-banner {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--color-mandarin); color: #000;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 16px; text-align: center;
}
.preview-banner .dot { width: 7px; height: 7px; border-radius: 50%; background: #000; flex: none; animation: previewPulse 1.4s infinite; }
.preview-banner strong { font-weight: 700; }
@keyframes previewPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Listing hero ──────────────────────────────────────────── */
.res-hero { padding: 88px var(--section-pad-x) 40px; }
.res-hero .eyebrow { display: block; margin: 0 0 18px; }
.res-hero h1 { font-size: clamp(46px, 6vw, 88px); color: var(--t-ink); }
.res-hero h1 .accent { color: var(--t-c-guava); }
.res-hero-sub {
  font-family: var(--font-body); font-size: 17px; line-height: 1.55;
  color: var(--t-muted); max-width: 560px; margin: 20px 0 0; text-wrap: pretty;
}
.res-tabs { display: flex; gap: 8px; margin: 36px 0 0; flex-wrap: wrap; }
.res-tab {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 8px; padding: 10px 16px; text-decoration: none; transition: all 0.15s;
  background: transparent; color: var(--t-muted); border: 1px solid var(--t-line);
}
.res-tab:hover { color: var(--t-ink); border-color: var(--t-faint); }
.res-tab.active { background: var(--t-ink); color: var(--t-bg); border-color: var(--t-ink); }

/* ── Card grid ─────────────────────────────────────────────── */
.res-grid-wrap { padding: 24px var(--section-pad-x) 110px; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.res-empty {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--t-faint); padding: 72px 0; text-align: center;
}
.res-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--t-ink);
  background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 18px;
  overflow: hidden; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.res-card:hover { transform: translateY(-3px); border-color: var(--t-faint); box-shadow: 0 14px 40px rgba(0,0,0,0.08); }
.res-card-body { padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

/* Title over the cover */
.res-cover-wrap { position: relative; }
.res-cover-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 1, 6, 0) 30%, rgba(10, 1, 6, 0.55) 62%, rgba(10, 1, 6, 0.92) 100%);
}
.res-cover-title {
  position: absolute; left: 20px; right: 20px; bottom: 15px; margin: 0; z-index: 2;
  font-family: var(--font-display-bold); font-weight: 700; font-size: 26px; line-height: 1.02;
  letter-spacing: 0.02em; text-transform: uppercase; color: #FFFFFF; text-wrap: balance;
  transition: color 0.15s;
}
.res-cover-wrap.is-placeholder .res-cover-title { color: rgba(0, 0, 0, 0.85); }
.res-card:hover .res-cover-wrap.has-photo .res-cover-title { color: var(--color-guava); }
.res-card p {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  color: var(--t-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.res-card .res-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--t-faint); margin-top: auto; padding-top: 8px;
}

/* ── Covers + placeholders (accent surfaces, same both themes) ── */
.res-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--t-panel); }
.res-cover.placeholder { position: relative; overflow: hidden; }
.res-cover.placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.16) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}
.ph-guava { background: var(--color-guava); }
.ph-acai { background: var(--color-acai); }
.ph-mandarin { background: var(--color-mandarin); }
.ph-matcha { background: var(--color-matcha); }

/* ── Type badge ────────────────────────────────────────────── */
.res-type {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
}
.res-type .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.type-guava { color: var(--t-c-guava); }
.type-acai { color: var(--t-c-acai); }
.type-mandarin { color: var(--t-c-mandarin); }
.type-matcha { color: var(--t-c-matcha); }

/* ── Article ───────────────────────────────────────────────── */
.res-article { padding: 72px 0 96px; }
.res-article-head { padding: 0 var(--section-pad-x); }
.res-article-head .wrap { max-width: 1040px; }
.res-back {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--t-muted); text-decoration: none; display: flex; gap: 8px; align-items: center;
  width: fit-content; margin: 0 0 40px; transition: color 0.12s;
}
.res-back:hover { color: var(--t-ink); }
.res-article-head .res-type { margin: 0 0 20px; }
.res-article-head h1 {
  font-size: clamp(40px, 5.5vw, 76px); color: var(--t-ink); margin: 0; text-wrap: balance;
}
.res-article-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--t-muted);
}
.res-article-meta .sep { color: var(--t-faint); }
.res-article-meta .res-updated { color: var(--t-c-matcha); }
.res-tag {
  border: 1px solid var(--t-line); border-radius: 6px; padding: 4px 10px;
  color: var(--t-muted); font-size: 10px;
}
.res-article-cover { max-width: 1040px; padding: 0 var(--section-pad-x); margin: 44px auto 0; }
.res-article-cover .res-cover.large { border-radius: 18px; border: 1px solid var(--t-line); }

/* ── Prose ─────────────────────────────────────────────────── */
.prose {
  max-width: 820px; margin: 52px auto 0; padding: 0 var(--section-pad-x);
  font-family: var(--font-body); font-size: 17.5px; line-height: 1.7; color: var(--t-soft);
}
/* Big displays: widen the measure and scale the type up with it */
@media (min-width: 1680px) {
  .res-article-head .wrap, .res-article-cover { max-width: 1160px; }
  .prose { max-width: 900px; font-size: 19px; line-height: 1.72; }
  .prose h2 { font-size: 38px; }
  .prose h3 { font-size: 29px; }
}
.prose > * + * { margin-top: 20px; }
.prose p { text-wrap: pretty; }
.prose a { color: var(--t-ink); text-decoration: none; border-bottom: 1px solid var(--t-c-guava); transition: color 0.12s; }
.prose a:hover { color: var(--t-c-guava); }
.prose strong, .prose b { color: var(--t-ink); font-weight: 500; }
.prose mark { background: rgba(255,81,168,0.25); color: var(--t-ink); padding: 0 3px; border-radius: 3px; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display-bold); font-weight: 700; line-height: 1.02;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--t-ink);
}
.prose h2 { font-size: 34px; margin-top: 52px; }
.prose h3 { font-size: 26px; margin-top: 40px; }
.prose h4 { font-size: 20px; margin-top: 32px; }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.prose ul li::marker { color: var(--t-c-guava); }
.prose ol li::marker { color: var(--t-c-guava); font-family: var(--font-mono); font-size: 14px; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-top: 10px; }
.prose-checklist { list-style: none; padding-left: 0; }
.prose-checklist .check-item { display: flex; align-items: baseline; gap: 12px; }
.prose-check {
  width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--t-faint);
  flex: none; transform: translateY(2px); position: relative;
}
.prose-check.done { background: var(--t-c-guava); border-color: var(--t-c-guava); }
.prose-check.done::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #FFF; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.prose blockquote {
  border-left: 3px solid var(--t-c-guava); padding: 4px 0 4px 22px; margin: 28px 0;
}
.prose blockquote p { font-size: 19px; font-weight: 500; color: var(--t-ink); }
.prose blockquote cite {
  display: block; margin-top: 10px; font-style: normal;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--t-muted);
}
.prose code {
  font-family: var(--font-mono); font-size: 0.88em; background: var(--t-panel);
  border: 1px solid var(--t-line); border-radius: 6px; padding: 2px 7px; color: var(--t-c-acai);
}
.prose-code {
  background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 14px;
  padding: 22px 24px; overflow-x: auto; margin: 28px 0;
}
.prose-code code {
  background: none; border: none; padding: 0; color: var(--t-soft);
  font-size: 13.5px; line-height: 1.6; white-space: pre;
}
.prose-image { margin: 32px 0; }
.prose-image img { width: 100%; border-radius: 14px; border: 1px solid var(--t-line); display: block; }
.prose-image figcaption, .prose-embed figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--t-faint); text-align: center;
}
.prose-embed { margin: 32px 0; }
.embed-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--t-line); background: var(--t-panel);
}
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose-table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--t-line); border-radius: 14px; }
.prose-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose-table th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--t-c-guava); text-align: left; background: var(--t-panel);
}
.prose-table th, .prose-table td { padding: 13px 18px; border-bottom: 1px solid var(--t-line); }
.prose-table tr:last-child td { border-bottom: none; }
.prose-delimiter { display: flex; justify-content: center; gap: 8px; padding: 20px 0; }
.prose-delimiter span { width: 5px; height: 5px; border-radius: 50%; background: var(--t-c-guava); }
.prose-attachment {
  display: inline-flex; align-items: center; gap: 12px; margin: 8px 0;
  background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 12px;
  padding: 14px 20px; text-decoration: none; color: var(--t-ink);
  transition: border-color 0.15s;
}
.prose-attachment:hover { border-color: var(--t-c-guava); color: var(--t-ink); }
.prose-attachment .ico { color: var(--t-c-guava); font-size: 16px; }
.prose-attachment .name { font-family: var(--font-body); font-size: 15px; }
.prose-attachment .size {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--t-faint);
}

/* ── Related content ───────────────────────────────────────── */
.res-related { padding: 24px var(--section-pad-x) 40px; }
.res-related .wrap { border-top: 1px solid var(--t-line); padding-top: 56px; }
.res-related .eyebrow { display: block; margin: 0 0 14px; }
.res-related h2 { font-size: clamp(28px, 3.5vw, 44px); color: var(--t-ink); margin: 0 0 30px; }
.res-related h2 .accent { color: var(--t-c-guava); }
@media (max-width: 720px) {
  .res-related .wrap { padding-top: 40px; }
}

/* ── CTA band ──────────────────────────────────────────────── */
.res-cta { padding: 40px var(--section-pad-x) 110px; text-align: center; }
.res-cta .wrap {
  max-width: 880px; border: 1px solid var(--t-line); border-radius: 24px;
  padding: 64px 40px; background: var(--t-panel);
  background-image: radial-gradient(circle at 50% 120%, rgba(255,81,168,0.16) 0%, rgba(255,81,168,0) 60%);
}
.res-cta .eyebrow { display: block; margin: 0 0 16px; }
.res-cta h2 { font-size: clamp(34px, 4.5vw, 54px); color: var(--t-ink); margin: 0 0 28px; }
.res-cta h2 .accent { color: var(--t-c-guava); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .res-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .res-hero { padding-top: 56px; }
  .res-grid { grid-template-columns: 1fr; }
  .res-article { padding-top: 48px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 28px; }
  .prose h3 { font-size: 22px; }
  .res-cta .wrap { padding: 44px 24px; }
}