/* ============================================================================
   cje.io — Ghost theme · CJE / Tall Poppy design system
   Tokens ported verbatim from the design bundle's colors_and_type.css.
   Editorial-meets-terminal: warm paper, near-black ink, one poppy accent,
   monospace tags, EB Garamond for long-form. One accent only. Used like hot sauce.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- TYPE FAMILIES --------------------------------------------------- */
  --font-display: 'Noto Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font-sans:    'Noto Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-serif:   'EB Garamond', Georgia, serif;

  /* ---- WARM NEUTRAL RAMP (ink -> paper) -------------------------------- */
  --n-950: #14110D; --n-900: #1F1B16; --n-800: #322C24; --n-700: #4E463A;
  --n-600: #6E6557; --n-500: #928876; --n-400: #B6AD9C; --n-300: #D6CEC0;
  --n-200: #E7E1D6; --n-100: #F2EDE4; --n-50:  #FAF7F1; --white: #FFFFFF;

  /* ---- POPPY RED (the only accent) ------------------------------------- */
  --poppy-50:  #FBEAEA; --poppy-100: #F2C9C9; --poppy-300: #DD6F70;
  --poppy-500: #B5202A; --poppy-600: #9A1B23; --poppy-700: #7C151C; --poppy-900: #4E0D11;

  /* ---- SECONDARY (sparing) --------------------------------------------- */
  --stem-500: #4A5A33; --stem-700: #33401F;
  --signal-amber: #C8881C; --signal-info: #2F6E8F;

  /* ---- SEMANTIC: SURFACES ---------------------------------------------- */
  --bg: var(--n-50); --bg-elevated: var(--white); --bg-sunken: var(--n-100);
  --bg-ink: var(--n-950); --bg-accent: var(--poppy-500);

  /* ---- SEMANTIC: TEXT -------------------------------------------------- */
  --fg: var(--n-950); --fg-muted: var(--n-600); --fg-subtle: var(--n-500);
  --fg-on-ink: var(--n-50); --fg-on-ink-muted: var(--n-400);
  --fg-accent: var(--poppy-600); --fg-link: var(--poppy-600);

  /* ---- SEMANTIC: BORDERS ----------------------------------------------- */
  --border: var(--n-200); --border-strong: var(--n-400); --border-ink: var(--n-950);

  /* ---- RADII ----------------------------------------------------------- */
  --radius-none: 0px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --radius-xl: 14px; --radius-pill: 999px;

  /* ---- SPACING (4px base) ---------------------------------------------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* ---- ELEVATION (low, warm-tinted) ------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(20,17,13,0.06);
  --shadow-md: 0 4px 14px rgba(20,17,13,0.08);
  --shadow-lg: 0 18px 48px rgba(20,17,13,0.14);
  --ring-accent: 0 0 0 3px rgba(181,32,42,0.25);

  /* ---- TYPE SCALE (px) ------------------------------------------------- */
  --text-display-xl: 72px; --text-display: 56px; --text-h1: 40px; --text-h2: 30px;
  --text-h3: 23px; --text-h4: 19px; --text-body-lg: 19px; --text-body: 17px;
  --text-small: 15px; --text-caption: 13px;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-text: 1.6;
  --track-tight: -0.02em; --track-label: 0.14em;

  --wrap: 1080px;     /* editorial max width */
  --measure: 720px;   /* single-column reading measure */
}

/* ============================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--poppy-100); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 200; background: var(--bg-ink); color: var(--fg-on-ink); padding: 8px 12px; border-radius: var(--radius-md); }

/* ============================================================================
   SEMANTIC TYPE
   ========================================================================== */
.display-xl { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-xl); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg); }
.display    { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display);    line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg); }
h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg); }
h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg); }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); line-height: 1.25; color: var(--fg); }
h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-h4); line-height: 1.3; color: var(--fg); }
p, .body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-body); line-height: var(--lh-text); color: var(--fg); }
.body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--lh-text); color: var(--fg); }
.small   { font-family: var(--font-sans); font-size: var(--text-small); line-height: 1.5; color: var(--fg-muted); }
.caption { font-family: var(--font-sans); font-size: var(--text-caption); line-height: 1.45; color: var(--fg-subtle); }

.mono-label { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); }
.tag { font-family: var(--font-mono); font-weight: 500; font-size: 0.9em; color: var(--poppy-600); }

a, .link { color: var(--fg-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--poppy-700); }

/* ============================================================================
   HEADER — sticky blurred paper bar
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(250,247,241,0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-header__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; height: 68px; display: flex; align-items: center; gap: 28px; }
.site-header__brand { display: flex; align-items: center; }
.site-header__brand img { height: 34px; width: auto; }
.site-nav { display: flex; gap: 22px; margin-left: 6px; }
.site-nav a { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; text-decoration: none; color: var(--fg-muted); padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.site-nav a:hover { color: var(--poppy-600); }
.site-nav a.is-active { color: var(--poppy-600); border-bottom-color: var(--poppy-500); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.signin-link { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; white-space: nowrap; }
.signin-link:hover { color: var(--poppy-700); }
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; font-size: 14px; border: none; cursor: pointer; text-decoration: none; transition: background .15s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--poppy-500); color: #fff; padding: 12px 22px; border-radius: var(--radius-lg); }
.btn--primary:hover { background: var(--poppy-600); color: #fff; }
.btn--ink { background: var(--n-950); color: var(--n-50); padding: 9px 16px; border-radius: var(--radius-lg); }
.btn--ink:hover { background: var(--n-800); color: var(--n-50); }

/* ============================================================================
   HERO — category-spine masthead
   ========================================================================== */
.hero { max-width: var(--wrap); margin: 0 auto; padding: 64px 28px 40px; }
.hero__kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 18px; }
.hero__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-display); line-height: 1.04; margin: 0; color: var(--fg); max-width: 880px; }
.hero__title .sep { color: var(--n-300); }
.hero__title .accent { color: var(--poppy-600); }
.hero__dek { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; color: var(--fg-muted); max-width: 620px; margin-top: 18px; }
.subscribe-form { display: flex; gap: 10px; margin-top: 26px; max-width: 460px; }
.subscribe-form input { flex: 1; font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-elevated); color: var(--fg); }
.subscribe-form input:focus { outline: none; box-shadow: var(--ring-accent); border-color: var(--poppy-500); }

/* ============================================================================
   SECTION HEAD
   ========================================================================== */
.section { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
.section-head .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); }
.section-head .all { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--poppy-600); text-decoration: none; white-space: nowrap; }
.section-head .all:hover { color: var(--poppy-700); }

/* ============================================================================
   FEATURED GRID + POST CARD
   ========================================================================== */
.featured { padding-top: 20px; padding-bottom: 8px; }
.featured__grid { display: grid; grid-template-columns: 1.4fr 2fr; gap: 18px; align-items: start; }
.featured__rest { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
/* Rest cards equal height: body fills so covers + baselines align across the 2x2 */
.featured__rest .card { display: flex; flex-direction: column; }
.featured__rest .card .card__body { flex: 1 1 auto; }

.card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; display: block; text-decoration: none; color: inherit; box-shadow: none; transition: box-shadow .18s ease, transform .18s ease; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.card__cover { position: relative; background-size: cover; background-position: center; aspect-ratio: 16 / 9; }
.card--big .card__cover { aspect-ratio: 16 / 10; }

/* Deterministic brand-color covers when a post has no feature image */
.cover-auto { background: var(--poppy-500); }
.featured__rest .card:nth-child(4n+1) .cover-auto { background: var(--n-950); }
.featured__rest .card:nth-child(4n+2) .cover-auto { background: var(--poppy-700); }
.featured__rest .card:nth-child(4n+3) .cover-auto { background: var(--n-800); }
.featured__rest .card:nth-child(4n+4) .cover-auto { background: var(--poppy-600); }
.row:nth-child(5n+1) .cover-auto { background: var(--poppy-500); }
.row:nth-child(5n+2) .cover-auto { background: var(--n-950); }
.row:nth-child(5n+3) .cover-auto { background: var(--stem-500); }
.row:nth-child(5n+4) .cover-auto { background: var(--poppy-700); }
.row:nth-child(5n+5) .cover-auto { background: var(--n-800); }
.card__tag { position: absolute; left: 16px; top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.9); }
.card__body { padding: 16px 18px 18px; }
.card--big .card__body { padding: 22px 24px 24px; }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; line-height: 1.18; margin: 0; color: var(--fg); }
.card--big .card__title { font-size: 24px; }
.card__dek { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--fg-muted); margin: 9px 0 0; }
.card--big .card__dek { font-size: 15.5px; }
.card__by { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-subtle); margin-top: 14px; text-transform: uppercase; }

/* ============================================================================
   LATEST COLUMN + ROW + HOT TAKES RAIL
   ========================================================================== */
.latest { padding-top: 32px; padding-bottom: 56px; display: grid; grid-template-columns: 1fr 320px; gap: 44px; }
.latest__sidebar { position: sticky; top: 88px; align-self: start; }

.row { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; }
.row:hover { color: inherit; }
.row__thumb { width: 132px; height: 88px; flex-shrink: 0; border-radius: var(--radius-sm); background-size: cover; background-position: center; }
.row__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--poppy-600); }
.row__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; margin: 5px 0 0; color: var(--fg); transition: color .15s ease; }
.row:hover .row__title { color: var(--poppy-700); }
.row__dek { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--fg-muted); margin: 7px 0 0; max-width: 560px; }
.row__by { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); margin-top: 9px; text-transform: uppercase; }

.hottakes { background: var(--n-950); border-radius: var(--radius-md); padding: 26px 26px 22px; }
.hottakes__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.hottakes__head h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0; color: var(--n-50); }
.hottakes__head .all { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--poppy-300); text-decoration: none; white-space: nowrap; }
.hottakes__item { display: flex; gap: 14px; padding: 12px 0; text-decoration: none; border-top: 1px solid rgba(255,255,255,0.08); }
.hottakes__item:first-of-type { border-top: none; }
.hottakes__num { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--poppy-500); min-width: 22px; }
.hottakes__title { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--n-50); line-height: 1.3; display: block; }
.hottakes__dek { font-family: var(--font-sans); font-size: 12.5px; color: var(--n-400); line-height: 1.4; display: block; margin-top: 3px; }

/* ============================================================================
   POST / PAGE — serif reading view
   ========================================================================== */
.post { max-width: var(--measure); margin: 0 auto; padding: 40px 28px 80px; }
.post__back { font-family: var(--font-mono); font-size: 13px; color: var(--poppy-600); text-decoration: none; display: inline-block; margin-bottom: 28px; white-space: nowrap; }
.post__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--poppy-600); margin-bottom: 14px; }
.post__title { font-family: var(--font-display); font-weight: 700; font-size: 42px; letter-spacing: -0.02em; line-height: 1.08; margin: 0; color: var(--fg); }
.post__dek { font-family: var(--font-sans); font-size: 19px; line-height: 1.5; color: var(--fg-muted); margin-top: 16px; }
.post__byline { display: flex; align-items: center; gap: 12px; margin: 22px 0 8px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.post__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--n-950); color: var(--n-50); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; background-size: cover; background-position: center; }
.post__meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.post__cover { height: 300px; border-radius: var(--radius-md); margin: 24px 0 32px; background-size: cover; background-position: center; }

.prose { font-family: var(--font-serif); font-size: var(--text-body-lg); line-height: 1.72; color: var(--n-900); }
.prose > * { margin: 0 0 22px; }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--fg); margin: 32px 0 8px; }
.prose h2 { font-size: 28px; font-weight: 600; }
.prose h3 { font-size: 24px; font-weight: 600; }
.prose a { color: var(--fg-link); }
.prose img, .prose figure { border-radius: var(--radius-md); }
.prose figcaption { font-family: var(--font-sans); font-size: 13px; color: var(--fg-subtle); text-align: center; margin-top: 8px; }
.prose blockquote { border-left: 3px solid var(--poppy-500); padding-left: 18px; margin-left: 0; color: var(--n-800); font-style: italic; }
.prose code { font-family: var(--font-mono); font-size: 0.92em; background: var(--n-100); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.08em 0.36em; color: var(--n-900); }
.prose pre { background: var(--n-950); color: var(--n-50); padding: 18px 20px; border-radius: var(--radius-md); overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }
.prose pre code { background: none; border: none; color: inherit; padding: 0; }

/* Long-form content: keep everything inside the reading measure, break nothing out of the viewport */
.prose, .gh-content { position: relative; overflow-wrap: break-word; word-break: break-word; }
.gh-content .kg-card, .gh-content figure { margin: 28px auto; max-width: 100%; }
.gh-content img, .gh-content .kg-image { max-width: 100%; height: auto; }
.gh-content figcaption { overflow-wrap: anywhere; max-width: 100%; }
.gh-content table { display: block; max-width: 100%; overflow-x: auto; }
.gh-content iframe, .gh-content video { max-width: 100%; }
/* Koenig wide/full breakouts — viewport-safe (never exceed 100vw, no scrollbar overflow) */
.gh-content .kg-width-wide { width: min(1080px, 92vw); max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.gh-content .kg-width-full img { width: 100%; }

.archive-head { max-width: var(--wrap); margin: 0 auto; padding: 56px 28px 8px; }
.archive-head .mono-label { margin-bottom: 10px; }
.archive-head h1 { font-size: var(--text-h1); }
.archive-head p { color: var(--fg-muted); max-width: 620px; margin-top: 10px; }

/* ============================================================================
   PAGINATION
   ========================================================================== */
.pagination { max-width: var(--wrap); margin: 0 auto; padding: 8px 28px 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pagination a, .pagination span { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--poppy-600); }
.pagination .page-number { color: var(--fg-subtle); }

/* ============================================================================
   FOOTER — inverted ink
   ========================================================================== */
.site-footer { background: var(--n-950); margin-top: 0; }
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 44px 28px; display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.site-footer__brand img { height: 40px; }
.site-footer__spine { font-family: var(--font-mono); font-size: 13px; color: var(--n-400); letter-spacing: 0.06em; }
.site-footer__copy { font-family: var(--font-sans); font-size: 13px; color: var(--n-500); margin-top: 10px; }
.site-footer__social { margin-left: auto; display: flex; gap: 18px; }
.site-footer__social a { font-family: var(--font-mono); font-size: 12px; color: var(--n-400); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; }
.site-footer__social a:hover { color: var(--poppy-300); }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.08); padding: 16px 28px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--n-600); letter-spacing: 0.08em; text-transform: uppercase; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px) {
  .featured__grid { grid-template-columns: 1fr; }
  .latest { grid-template-columns: 1fr; gap: 32px; }
  .latest__sidebar { position: static; }
  .hero__title { font-size: 40px; }
  .post__title { font-size: 32px; }
  .site-nav { display: none; }
}
@media (max-width: 520px) {
  .subscribe-form { flex-direction: column; }
  .row { flex-direction: column; }
  .row__thumb { width: 100%; height: 160px; }
}