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

/* ============================================================================
   Khabar — shared design system ("Quiet Edition")
   ============================================================================

   Every template used to carry its own copy of these tokens and base rules;
   five copies of the same thing drift the moment one of them is edited. They
   live here once now, and each template keeps only the CSS unique to its page.

   The look: one elevated sheet of ivory paper rather than a stack of boxed
   cards. EB Garamond for everything you read, IBM Plex Sans for everything you
   scan (labels, nav, meta, numbers). A single accent — ink blue, taken from the
   logo — instead of the old oxblood/brass pairing. Rules and air do the
   separating work that card borders and shadows used to.

   The page chrome below (paper, nav, masthead, story grid, label grid, tabs,
   subscribe, footer) is shared, so a template gets the whole look by using the
   class names and adding only what is genuinely its own.

   Token NAMES are unchanged from the original stylesheets, so page-specific CSS
   that references them keeps working untouched.
   ========================================================================= */

:root,
html[data-theme="light"] {
  --bg: #ecebe7;
  --paper: #faf7f0;
  --text: #211f1b;
  --text-mid: #413d35;
  --text-soft: #4d4840;
  --muted: #8a857a;
  --line: #e2dccd;
  --line-soft: #eee7d9;
  --line-strong: #cdbfa6;

  /* Primary accent. Named --green for continuity with the old palette; it is
     the logo's ink blue. */
  --green: #1f3d5c;
  --green-mid: #3a5f82;
  --green-rule: #7699b8;
  /* Named --gold for continuity; it is the quiet label grey. */
  --gold: #a19c90;
  --numeral: #c9c2b1;

  --link: #1f3d5c;
  --link-hover: #14283d;
  --underline: #c3d1de;

  --source-bg: transparent;
  --source-bd: #c3d1de;
  --toggle-bg: transparent;
  --toggle-icon: #8a857a;

  --watch-bg: #211f1b;
  --watch-text: rgba(250, 247, 240, 0.92);
  --watch-div: rgba(250, 247, 240, 0.16);
  --watch-li-bd: rgba(250, 247, 240, 0.1);

  --module-bg: #f2eee2;
  --module-bd: #e2dccd;

  --bull-bg: #e8f2ec;
  --bull-text: #1f5a3f;
  --bear-bg: #f8e9e6;
  --bear-text: #8b3127;
  --neutral-bg: #eeeae3;
  --neutral-text: #5f5649;

  --modal-bg: rgba(33, 31, 27, 0.55);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #14120f;
  --paper: #1c1a16;
  --text: #f0eae0;
  --text-mid: #c6bdae;
  --text-soft: #b3a996;
  --muted: #948a78;
  --line: #302b24;
  --line-soft: #262119;
  --line-strong: #4a4338;

  --green: #7fa8cc;
  --green-mid: #99bcda;
  --green-rule: #3a5f82;
  --gold: #a89d8a;
  --numeral: #453d31;

  --link: #7fa8cc;
  --link-hover: #a8c4e0;
  --underline: #35505f;

  --source-bg: transparent;
  --source-bd: #35505f;
  --toggle-bg: transparent;
  --toggle-icon: #a89d8a;

  --watch-bg: #241f18;
  --watch-text: rgba(240, 234, 224, 0.92);
  --watch-div: rgba(255, 255, 255, 0.08);
  --watch-li-bd: rgba(255, 255, 255, 0.07);

  --module-bg: #221f19;
  --module-bd: #302b24;

  --bull-bg: #1c3026;
  --bull-text: #8ed1aa;
  --bear-bg: #341f1d;
  --bear-text: #e09b93;
  --neutral-bg: #29251f;
  --neutral-text: #c8bba6;

  --modal-bg: rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* Theme-toggle glyph and label switching, previously repeated in all five. */
html[data-theme="light"] .toggle-moon { display: none; }
html[data-theme="dark"] .toggle-sun { display: none; }
.lbl-light { display: inline; }
.lbl-dark { display: none; }
html[data-theme="dark"] .lbl-light { display: none; }
html[data-theme="dark"] .lbl-dark { display: inline; }

/* The logo ships in two tints because it is raster art — a filter can't
   recolour it convincingly, so the right file is shown per theme. */
html[data-theme="light"] .logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: none; }

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'EB Garamond', Georgia, 'Palatino Linotype', serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover { color: var(--link-hover); }

/* Anything that scans rather than reads: labels, nav, meta, numbers. */
.site-nav, .nav-btn, .theme-toggle, .notify-btn,
.pub-byline, .hero-label, .masthead-meta,
.section-number, .module-kicker, .sources-label, .rail-label,
.meta-label, .footer-note, .footer-brand span {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* Display face for anything that reads as a headline — the same serif as the
   body copy, just larger. Quiet Edition doesn't split display/body faces. */
h1, h2, h3,
.pub-khabar,
.hero h1,
.section-card h2 {
  font-family: 'EB Garamond', Georgia, serif;
  letter-spacing: -0.005em;
}

/* ── The sheet ────────────────────────────────────────────────────────────
   The whole issue sits on one elevated sheet. Its 56px inset is the content
   column every block below aligns to, so nothing re-declares horizontal
   padding. The short rule at top-left is the only ornament on the page. */

.outer {
  max-width: 900px;
  margin: 40px auto 60px;
  padding: 0 56px 40px;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 18px 50px rgba(0, 0, 0, 0.07);
  position: relative;
}

.outer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 22%;
  background: var(--green);
}

/* ── Site nav ─────────────────────────────────────────────────────────────
   Plain letterspaced text at the very top of the sheet, links left and the
   theme toggle right. No pills — a button would be the loudest thing here. */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 26px 0 0;
  flex-wrap: wrap;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.site-nav-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-btn {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  transition: color 0.18s ease;
}
.nav-btn:hover { color: var(--green); }

.nav-btn-solid,
.nav-btn.active {
  color: var(--green);
  font-weight: 700;
}
.nav-btn-solid:hover { color: var(--link-hover); }

/* ── Theme toggle + notify ────────────────────────────────────────────── */

.theme-toggle,
.notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  background: var(--toggle-bg);
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.theme-toggle:hover,
.notify-btn:hover { color: var(--green); }

.notify-btn.active { color: var(--green); }
.notify-btn.denied { opacity: 0.4; cursor: not-allowed; }
.notify-btn svg { flex-shrink: 0; }

.toggle-track {
  position: relative;
  width: 26px;
  height: 14px;
  background: var(--line);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

html[data-theme="dark"] .toggle-track { background: var(--green-rule); }

.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform 0.25s ease, background 0.25s ease;
}

html[data-theme="dark"] .toggle-track::after {
  transform: translateX(12px);
  background: var(--green);
}

.toggle-sun, .toggle-moon { width: 13px; height: 13px; flex-shrink: 0; color: var(--toggle-icon); }

/* ── Masthead ─────────────────────────────────────────────────────────────
   Logo and wordmark left, a row of meta columns right, one hard rule under
   the pair. The rule is the page's strongest line and earns it. */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--text);
  flex-wrap: wrap;
}

.pub-name {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.pub-logo {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.pub-khabar {
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--text);
}

.pub-byline {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-top: 6px;
}

.masthead-meta {
  display: flex;
  gap: 34px;
  padding-bottom: 5px;
  flex-wrap: wrap;
}

.meta-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}

.meta-value {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.3;
}

/* ── Hero ─────────────────────────────────────────────────────────────────
   Headline and lede in the main column, a contents rail alongside. The rail
   is what makes a long issue feel finite before you start reading it. */

.hero {
  padding: 38px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 44px;
  align-items: start;
}

.hero-main { min-width: 0; }

.hero-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.14;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 19em;
}

.hero-subtitle {
  font-size: 1.28rem;
  line-height: 1.62;
  color: var(--text-mid);
  max-width: 34em;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-top: 18px;
}

.hero-meta .sep { color: var(--line-strong); }

/* Secondary pages (about, archive, games) share one simpler hero: no rail,
   no lede column, just the label and the title over the same hard rule. */
.page-hero {
  padding: 38px 0 30px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.page-hero-label {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 14px;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.14;
  color: var(--text);
  max-width: 19em;
}

.page-hero p {
  font-size: 1.28rem;
  line-height: 1.62;
  color: var(--text-mid);
  max-width: 34em;
  margin-top: 16px;
}

/* Contents rail */
.hero-rail {
  border-left: 1px solid var(--line);
  padding-left: 20px;
  min-width: 0;
}

.rail-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.rail-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
}

.rail-list a {
  display: flex;
  gap: 10px;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--text-mid);
}
.rail-list a:hover { color: var(--green); }

.rail-num {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gold);
  padding-top: 4px;
  flex-shrink: 0;
}

/* ── Stories ──────────────────────────────────────────────────────────────
   A numeral column and a text column, separated by a hairline. No card, no
   shadow, no coloured bar — the numeral is the only marker a story needs. */

.section-card,
.module-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
}

.section-card:first-of-type { margin-top: 44px; }

.section-num-col { min-width: 0; }

.section-num {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--numeral);
}

.section-number,
.module-kicker {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.5;
  margin-top: 8px;
}

.section-inner,
.module-inner { min-width: 0; padding-bottom: 30px; }

.section-card h2,
.module-title {
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1.22;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 26em;
}

.section-summary,
.module-summary {
  font-size: 1.14rem;
  line-height: 1.66;
  color: var(--text-mid);
  margin-bottom: 16px;
  max-width: 36em;
}

.section-summary p,
.module-summary p { margin: 0 0 0.7em; }
.section-summary p:last-child,
.module-summary p:last-child { margin-bottom: 0; }

.section-summary strong,
.module-summary strong,
.khabar-list strong { color: var(--text); font-weight: 600; }

/* Bullets: a small ink dot, no rules between items.

   The list item is deliberately NOT a flex container. `{{ bullet | fmt }}`
   renders raw text interleaved with <strong> tags, and flexbox turns every
   child element — including inline ones like <strong> — into its own boxed
   flex item, with each run of bare text between them becoming an anonymous
   item too. Each of those then wraps independently, which is what produced
   the broken "table" of isolated words and phrases. Positioning the dot
   instead keeps the <li> a normal block, so its content flows as ordinary
   inline text and <strong> behaves like <strong> should. */
.khabar-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 36em;
  margin: 0 0 16px;
  padding: 0;
  border: none;
}

.khabar-list li {
  position: relative;
  padding-left: 15px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-soft);
  border: none;
}

.khabar-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
}

/* Sources: underlined text, not pills. A pill row reads as navigation. */
.sources-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  padding: 0;
  border: none;
  margin: 0;
}

.sources-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
}

.source-link {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--green);
  background: none;
  border: none;
  border-bottom: 1px solid var(--underline);
  border-radius: 0;
  padding: 0 0 1px;
  white-space: nowrap;
}
.source-link:hover {
  background: none;
  color: var(--link-hover);
  border-bottom-color: var(--green);
}

/* ── Label grid ───────────────────────────────────────────────────────────
   The same 64px column as a story, but carrying a word instead of a numeral.
   Scores, standings and "what to watch" all sit on it, so the page keeps one
   spine the whole way down. */

.label-grid {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
}

.grid-label {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.5;
}

.grid-body { min-width: 0; padding-bottom: 30px; }

/* Underline tabs, used by scores and standings alike. */
.quiet-tabs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.quiet-tab {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0 0 4px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.quiet-tab:hover { color: var(--text-mid); }
.quiet-tab.active { color: var(--green); border-bottom-color: var(--green); }

.quiet-more {
  display: inline-block;
  margin-top: 14px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

/* ── Subscribe band ───────────────────────────────────────────────────── */

.subscribe-band {
  margin-top: 44px;
  padding: 34px 40px;
  background: var(--module-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.subscribe-copy { max-width: 22em; }

.subscribe-copy h2,
.subscribe-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 6px;
}

.subscribe-note {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
}

.subscribe-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--text);
}

.subscribe-form input[type="email"] {
  width: 230px;
  max-width: 100%;
  padding: 10px 4px;
  border: none;
  background: transparent;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--text);
  outline: none;
}

.subscribe-form button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  padding: 0 4px;
  white-space: nowrap;
}
.subscribe-form button:hover { color: var(--link-hover); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--text);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}

.footer-brand span {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: 6px;
}

.footer-note {
  font-size: 0.74rem;
  color: var(--gold);
  text-align: right;
  line-height: 1.6;
}

/* ── Narrow screens ───────────────────────────────────────────────────────
   The sheet loses its float and becomes the page; the contents rail and the
   numeral column are the first things to go, since both are orientation aids
   that a short scroll already provides. */

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .hero-rail {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 20px;
  }
}

@media (max-width: 600px) {
  .outer {
    margin: 0;
    padding: 0 20px 40px;
    box-shadow: none;
    max-width: none;
  }

  .site-nav { padding-top: 20px; gap: 14px; }
  .site-nav-links { gap: 16px; }

  .masthead { margin-top: 24px; gap: 16px; }
  .pub-logo { width: 38px; height: 38px; }
  .masthead-meta { gap: 22px; }

  .hero { padding-top: 28px; }

  .section-card,
  .module-card,
  .label-grid {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
  }

  .section-num { font-size: 1.5rem; }

  /* The kicker can't fit under a 34px numeral; the headline carries it. */
  .section-num-col .section-number { display: none; }

  .grid-label {
    grid-column: 1 / -1;
    margin-bottom: -14px;
  }
  .label-grid .grid-body { grid-column: 1 / -1; }

  .subscribe-band { padding: 26px 22px; gap: 20px; }
  .subscribe-form input[type="email"] { width: 100%; min-width: 0; }

  .site-footer { flex-direction: column; align-items: flex-start; }
  .footer-note { text-align: left; }
}

@media print {
  body { background: #fff !important; }
  .outer { box-shadow: none; margin: 0; }
  .site-nav, .theme-toggle, .notify-btn, .subscribe-band { display: none !important; }
}