/* ==========================================================================
   Cross-Check — Ghost theme
   Terminal '72 shell · Split-Flap verdicts · Red Pen audits
   Brand book v1.0 — four constants: check tile, Archivo Black,
   IBM Plex Mono on numbers, cherry #C93A3A everywhere.
   ========================================================================== */

/* ---- Fonts (self-hosted) ---- */
@font-face { font-family: 'Archivo Black'; src: url('../fonts/ArchivoBlackRegular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/ArchivoRegular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/ArchivoMedium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMonoRegular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMonoMedium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/NewsreaderRegular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/NewsreaderItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/CaveatSemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* ---- Design tokens ---- */
:root {
  /* Constants */
  --cherry: #C93A3A;
  --display: var(--gh-font-heading, 'Archivo Black', 'Arial Black', sans-serif);
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Terminal '72 */
  --cream: #F5E9D4;
  --cream-raised: #FFF8EA;
  --cream-line: #D9C9A8;
  --espresso: #2E2018;
  --body-brown: #4A3B29;
  --muted-brown: #8A7455;
  --tan: #8A5A2B;
  --tangerine: #E07B2A;
  --gold: #E9B44C;

  /* Split-Flap */
  --board: #15181D;
  --board-warm: #2E2018;
  --tile: #262B33;
  --tile-line: #453626;
  --letter: #F2F4F7;
  --board-muted: #8E99A8;
  --gold-label: #B89A6A;
  --cleared: #9CB86E;
  --cancelled: #E86A5B;

  /* Red Pen */
  --paper: #FBFAF6;
  --paper-line: #DDD8C8;
  --ink: #1F1F1F;
  --ink-soft: #44413A;
  --paper-muted: #7A776E;
  --blue-pencil: #2456A6;

  --sans: var(--gh-font-body, 'Archivo', -apple-system, sans-serif);
  --serif: 'Newsreader', Georgia, serif;
  --hand: 'Caveat', cursive;

  --wrap: 1120px;
  --narrow: 720px;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--body-brown);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 24px; }

/* ---- Type utilities ---- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cherry);
}
h1, h2, h3, .display { font-family: var(--display); color: var(--espresso); line-height: 1.12; font-weight: 400; }

/* ---- The check tile (drawn, never typed) ---- */
.tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cherry);
  border-radius: 4px;
  width: 26px; height: 33px;
  flex-shrink: 0;
}
.tile::after {
  content: '';
  position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: rgba(245, 233, 212, 0.32);
}
.tile svg { width: 62%; height: auto; }
.tile--lg { width: 44px; height: 56px; border-radius: 6px; }

/* ---- Stripes ---- */
.stripes { display: flex; flex-direction: column; }
.stripes span { height: 6px; display: block; }
.stripes .s1 { background: var(--cherry); }
.stripes .s2 { background: var(--tangerine); }
.stripes .s3 { background: var(--gold); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--cream-line);
  background: var(--cream);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-word {
  font-family: var(--display);
  font-size: 1.15rem; letter-spacing: 0.03em; color: var(--espresso);
}
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--sans); font-weight: 500; font-size: 0.85rem;
  color: var(--tan); text-decoration: none;
}
.site-nav a:hover { color: var(--cherry); }
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 500; font-size: 0.85rem;
  background: var(--espresso); color: var(--cream) !important;
  border: none; border-radius: 999px; padding: 10px 20px;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--cherry); }
.btn--cherry { background: var(--cherry); }
.btn--cherry:hover { background: var(--espresso); }

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.hero { padding: 72px 0 48px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 14em; margin-top: 14px; }
.hero .sub { font-size: 1.05rem; max-width: 34em; margin-top: 16px; color: var(--tan); }
.hero .stripes { max-width: 560px; margin-top: 36px; }

/* Signup form (Ghost members) */
.signup-form { display: flex; gap: 8px; max-width: 460px; margin-top: 24px; flex-wrap: wrap; }
.signup-form input[type='email'] {
  flex: 1 1 220px;
  font-family: var(--sans); font-size: 0.9rem;
  background: var(--cream-raised);
  border: 1px solid var(--cream-line); border-radius: 8px;
  padding: 12px 14px; color: var(--espresso);
}
.signup-form input[type='email']::placeholder { color: var(--muted-brown); }
.signup-form button {
  font-family: var(--sans); font-weight: 500; font-size: 0.9rem;
  background: var(--cherry); color: var(--cream-raised);
  border: none; border-radius: 8px; padding: 12px 20px; cursor: pointer;
}
.signup-form button:hover { background: var(--espresso); }
.form-note { font-family: var(--mono); font-size: 0.72rem; color: var(--muted-brown); margin-top: 10px; }
/* Ghost members form states */
form[data-members-form] .success-message, form[data-members-form] .error-message { display: none; font-size: 0.85rem; margin-top: 10px; }
form[data-members-form].success .success-message { display: block; color: #5C7A3F; }
form[data-members-form].error .error-message { display: block; color: var(--cherry); }
form[data-members-form].loading button { opacity: 0.6; }

/* ==========================================================================
   The board module (homepage + Overrated Index)
   ========================================================================== */
.board-module { background: var(--board-warm); }
.board-module .wrap { padding-top: 26px; padding-bottom: 30px; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.board-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gold-label); text-transform: uppercase; }
.board-more { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted-brown); text-decoration: none; text-transform: uppercase; }
.board-more:hover { color: var(--gold); }
.board-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--tile-line);
  text-decoration: none;
}
.board-row:first-of-type { margin-top: 12px; }
.board-dest { font-family: var(--display); font-size: 1rem; letter-spacing: 0.06em; color: var(--cream); text-transform: uppercase; }
.board-row:hover .board-dest { color: var(--gold); }
.verdict { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.verdict--overrated { color: var(--gold); }
.verdict--cleared { color: var(--cleared); }
.verdict--cancelled { color: var(--cancelled); }

/* ==========================================================================
   Post cards / feed (Terminal '72)
   ========================================================================== */
.section-head { display: flex; justify-content: space-between; align-items: baseline; padding: 48px 0 8px; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-size: 1.3rem; }
.section-head a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--tan); text-decoration: none; text-transform: uppercase; }
.section-head a:hover { color: var(--cherry); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 12px 0 24px; }
.post-card {
  background: var(--cream-raised);
  border: 1px solid var(--cream-line); border-radius: 10px;
  overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column;
}
.post-card:hover { border-color: var(--cherry); }
.post-card .card-image { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--cherry); text-transform: uppercase; }
.card-title { font-family: var(--display); font-size: 1.05rem; color: var(--espresso); line-height: 1.25; }
.card-excerpt { font-size: 0.88rem; color: var(--body-brown); }
.card-meta { font-family: var(--mono); font-size: 0.7rem; color: var(--muted-brown); margin-top: auto; padding-top: 8px; }

.pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 56px; font-family: var(--mono); font-size: 0.78rem; }
.pagination a { color: var(--tan); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
.pagination a:hover { color: var(--cherry); }
.pagination .page-number { color: var(--muted-brown); }

/* ==========================================================================
   Post page — shared bones
   ========================================================================== */
.post-header { padding: 60px 0 28px; }
.post-header h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-top: 12px; }
.post-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--muted-brown); margin-top: 16px; letter-spacing: 0.06em; }
.feature-image { border-radius: 12px; overflow: hidden; margin: 8px auto 0; max-width: var(--wrap); padding: 0 24px; }
.feature-image img { border-radius: 12px; width: 100%; }

.post-content { padding: 28px 0 64px; font-size: 1.05rem; }
.post-content > * + * { margin-top: 1.2em; }
.post-content h2 { font-size: 1.4rem; margin-top: 1.8em; }
.post-content h3 { font-size: 1.1rem; margin-top: 1.6em; }
.post-content a { color: var(--cherry); text-decoration-thickness: 1.5px; }
.post-content blockquote {
  border-left: 3px solid var(--cherry);
  padding-left: 18px; font-family: var(--serif); font-style: italic;
}
.post-content code { font-family: var(--mono); font-size: 0.9em; background: rgba(0,0,0,0.06); padding: 2px 5px; border-radius: 4px; }
.post-content hr { border: none; border-top: 1px solid var(--cream-line); }
.post-content figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--muted-brown); margin-top: 8px; }
.post-content .kg-card { margin-top: 1.4em; }
.post-content .kg-width-wide { position: relative; width: min(85vw, 1120px); margin-left: 50%; transform: translateX(-50%); }
.post-content .kg-width-full { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Strikethrough device — available in every editor via <s> */
.post-content s, .post-content del {
  text-decoration-color: var(--cherry);
  text-decoration-thickness: 2px;
}
.correction { font-family: var(--hand); font-size: 1.25em; color: var(--cherry); }

/* Verdict box — drop into any post as HTML card */
.verdict-box {
  border: 1.5px solid var(--cherry); border-radius: 8px;
  padding: 14px 18px; font-family: var(--mono);
  font-size: 0.85rem; letter-spacing: 0.06em;
}
.verdict-box strong { color: var(--cherry); letter-spacing: 0.12em; }

/* Signup unit at post foot */
.post-signup {
  background: var(--cream-raised); border: 1px solid var(--cream-line);
  border-radius: 12px; padding: 28px; margin: 24px auto 64px;
}
.post-signup h3 { font-size: 1.15rem; }
.post-signup p { font-size: 0.9rem; margin-top: 6px; }

/* ==========================================================================
   SKIN: Split-Flap  (bodybody.tag-overrated-index — Overrated Index tag + its posts)
   ========================================================================== */
body.tag-overrated-index { background: var(--board); color: var(--board-muted); }
body.tag-overrated-index .site-header { background: var(--board); border-bottom-color: var(--tile); }
body.tag-overrated-index .brand-word { color: var(--letter); }
body.tag-overrated-index .site-nav a { color: var(--board-muted); }
body.tag-overrated-index .site-nav a:hover { color: var(--gold); }
body.tag-overrated-index .btn { background: var(--cherry); color: var(--letter) !important; }
body.tag-overrated-index h1, body.tag-overrated-index h2, body.tag-overrated-index h3 { color: var(--letter); }
body.tag-overrated-index .eyebrow { color: var(--gold-label); }
body.tag-overrated-index .post-meta, body.tag-overrated-index .card-meta, body.tag-overrated-index .pagination .page-number { color: var(--board-muted); }
body.tag-overrated-index .post-content { color: #B9C2CC; }
body.tag-overrated-index .post-content a { color: var(--gold); }
body.tag-overrated-index .post-content blockquote { border-left-color: var(--gold); }
body.tag-overrated-index .post-content code { background: rgba(255,255,255,0.08); }
body.tag-overrated-index .post-card { background: var(--tile); border-color: var(--tile); }
body.tag-overrated-index .post-card:hover { border-color: var(--gold); }
body.tag-overrated-index .card-title { color: var(--letter); }
body.tag-overrated-index .card-excerpt { color: var(--board-muted); }
body.tag-overrated-index .card-tag { color: var(--gold); }
body.tag-overrated-index .signup-form input[type='email'] { background: var(--tile); border-color: var(--tile-line); color: var(--letter); }
body.tag-overrated-index .post-signup { background: var(--tile); border-color: var(--tile-line); }
body.tag-overrated-index .pagination a { color: var(--board-muted); }
body.tag-overrated-index .pagination a:hover { color: var(--gold); }
body.tag-overrated-index .verdict-box { border-color: var(--gold); }
body.tag-overrated-index .verdict-box strong { color: var(--gold); }

/* Flap-tile page title for the Index hub */
.flap-title { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.flap-title span {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tile); border-radius: 5px;
  width: 40px; height: 54px;
  font-family: var(--display); font-size: 1.5rem; color: var(--letter);
  text-transform: uppercase;
}
.flap-title span::after {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 2px; background: var(--board);
}
.flap-title .flap-space { background: transparent; width: 18px; }
.flap-title .flap-space::after { display: none; }

/* ==========================================================================
   SKIN: Red Pen  (bodybody.tag-terms-departures — Terms & Departures tag + its posts)
   ========================================================================== */
body.tag-terms-departures { background: var(--paper); color: var(--ink-soft); }
body.tag-terms-departures .site-header { background: var(--paper); border-bottom-color: var(--paper-line); }
body.tag-terms-departures .brand-word { color: var(--ink); }
body.tag-terms-departures .site-nav a { color: var(--paper-muted); }
body.tag-terms-departures .site-nav a:hover { color: var(--cherry); }
body.tag-terms-departures h1, body.tag-terms-departures h2, body.tag-terms-departures h3 { color: var(--ink); }
body.tag-terms-departures .post-meta, body.tag-terms-departures .card-meta { color: var(--paper-muted); }
body.tag-terms-departures .post-content { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-soft); }
body.tag-terms-departures .post-content h2, body.tag-terms-departures .post-content h3 { font-family: var(--display); }
body.tag-terms-departures .post-content a { color: var(--blue-pencil); }
body.tag-terms-departures .post-card { background: #FFFFFF; border-color: var(--paper-line); }
body.tag-terms-departures .post-card:hover { border-color: var(--cherry); }
body.tag-terms-departures .card-title { color: var(--ink); }
body.tag-terms-departures .card-excerpt { color: var(--ink-soft); }
body.tag-terms-departures .signup-form input[type='email'] { background: #FFFFFF; border-color: var(--paper-line); color: var(--ink); }
body.tag-terms-departures .post-signup { background: #FFFFFF; border-color: var(--paper-line); }
body.tag-terms-departures .pagination a { color: var(--paper-muted); }
body.tag-terms-departures .pagination a:hover { color: var(--cherry); }

/* ==========================================================================
   Tag hub headers
   ========================================================================== */
.tag-header { padding: 56px 0 20px; }
.tag-header .description { max-width: 38em; margin-top: 14px; font-size: 1rem; }
body.tag-terms-departures .tag-header .description { font-family: var(--serif); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--espresso); color: var(--gold-label); margin-top: 40px; }
.site-footer .wrap { padding-top: 40px; padding-bottom: 40px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .brand-word { color: var(--cream); }
.footer-tag { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.footer-nav a { font-size: 0.8rem; color: var(--gold-label); text-decoration: none; }
.footer-nav a:hover { color: var(--gold); }
.footer-fine {
  font-family: var(--mono); font-size: 0.68rem; color: var(--tan);
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--tile-line);
  line-height: 1.8;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .hero { padding-top: 44px; }
  .flap-title span { width: 30px; height: 42px; font-size: 1.1rem; }
  .board-dest { font-size: 0.85rem; }
}