/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/*
 * The Urban Ethos — Journal skin
 * Light-only by hard requirement: every dark-mode token below is pinned to
 * the exact same value as light, so even a stale `quark2-theme=dark` value
 * left in a visitor's localStorage from testing can't render a dark page.
 */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --q2-bg: #fffdfa;
  --q2-bg-elev: #fffdfa;
  --q2-bg-muted: #f6f1ea;
  --q2-bg-inverse: #17130f;

  --q2-text: #17130f;
  --q2-text-strong: #17130f;
  --q2-text-muted: #5a5148;
  --q2-text-inverse: #fffdfa;

  --q2-border-ring: rgba(23, 19, 15, 0.08);
  --q2-border-strong: rgba(23, 19, 15, 0.14);
  --q2-divider: #e8dfd2;

  --q2-shadow-card: none;
  --q2-shadow-raised: none;
  --q2-shadow-dropdown: 0 16px 32px rgba(23, 19, 15, 0.1);
  --q2-shadow-inset: none;
  --q2-shadow-hl: none;

  --q2-nav-bg: rgba(255, 253, 250, 0.92);
  --q2-nav-border: #e8dfd2;

  --q2-accent: #e0501f;
  --q2-accent-contrast: #ffffff;
  --q2-link: #e0501f;
  --q2-focus-ring: rgba(224, 80, 31, 0.35);

  --pico-font-family-sans-serif: "Inter", system-ui, sans-serif;
  --pico-font-family-display: "Inter", system-ui, sans-serif;

  --pico-primary: var(--q2-text);
  --pico-primary-hover: #000000;
  --pico-primary-background: var(--q2-accent);
  --pico-primary-border: var(--q2-accent);
  --pico-card-background-color: var(--q2-bg-elev);
  --pico-card-border-color: var(--q2-divider);
  --pico-card-box-shadow: none;
}

body { -webkit-font-smoothing: antialiased; }

a { color: var(--q2-link); }

/* ── Nav wordmark (replaces the generic Grav swirl logo) ─────────────── */
.navbar-brand.ue-wordmark {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--q2-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.navbar-brand.ue-wordmark .ue-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--q2-text-muted);
}

/* ── Curated nav: no auto-listed posts ─────────────────────────────────── */
.navigation a { font-family: "Inter", system-ui, sans-serif; font-weight: 500; }

/* ── Footer: plain, own-brand, no Grav/Trilby credit ───────────────────── */
#footer.ue-footer { padding: 32px 0; border-top: 1px solid var(--q2-divider); }
#footer.ue-footer p { color: var(--q2-text-muted); font-size: 13px; margin: 0; }
#footer.ue-footer a { color: var(--q2-text); font-weight: 600; }

/* ── Journal listing: flat editorial list, no cards ────────────────────── */
.blog-grid {
  display: block;
  grid-template-columns: none !important;
}
.journal-entry {
  padding: 40px 0;
  border-top: 1px solid var(--q2-divider);
  max-width: 720px;
}
.blog-grid .journal-entry:last-child { border-bottom: 1px solid var(--q2-divider); }
.journal-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--q2-text-muted);
}
.journal-meta time { font-weight: 500; }
.journal-meta .tags { display: flex; gap: 8px; }
.journal-meta .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--q2-accent);
  font-weight: 600;
  background: none;
  padding: 0;
}
.journal-entry h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 10px;
  line-height: 1.15;
}
.journal-entry h2 a { color: var(--q2-text); }
.journal-entry h2 a:hover { color: var(--q2-accent); }
.journal-excerpt { color: var(--q2-text-muted); font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
.journal-read {
  font-size: 14px;
  font-weight: 600;
  color: var(--q2-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Single post: quiet, generous, no card chrome ──────────────────────── */
.content-item { max-width: 720px; margin: 0 auto; }
.content-item .e-content { font-size: 18px; line-height: 1.75; }
.content-item .e-content p { margin-bottom: 22px; }