/* ==========================================================================
   چگونه — a Persian portal.

   THE DIRECTION. This is built to the shape a Persian reader already knows
   from Zoomit or Digikala Mag: dense, scannable, many stories above the
   fold, a working sidebar, and section colour used as a wayfinding system
   rather than as decoration. Density is the point - a reader arriving from
   a search result should be able to find the next thing to read without
   scrolling twice.

   TYPE. One family, Vazirmatn, across a real five-step weight ramp
   (400/500/700/800/900) carried by ONE variable file. Persian portals that
   set everything at one weight all read alike; the ramp is what separates a
   headline from a card title from a label without needing a second face.
   The Naskh serif the earlier design used is gone - a serif display face is
   an editorial-magazine move, and this is not that.

   SELF-HOSTED, DELIBERATELY. Google Fonts is slow or blocked from Iranian
   networks, which is most of this audience, so every face is served from
   this origin. The variable file is 111KB and replaces what would otherwise
   be five separate static cuts.

   COLOUR. Near-black chrome, white paper, a warm sand for bands and ad
   ground, and one saffron accent that carries every primary action. The
   seven section colours are an identity system: each section owns one, and
   it appears on the nav rule, the category chip and the section heading -
   nowhere else, so it always means "which part of the site is this".

   NO TRACKING ON PERSIAN. Persian is a cursive joining script: letter
   spacing pulls at the joins between letters. Every letter-spacing here is
   0, deliberately, headlines included.

   RTL. Every inline property is logical, so an LTR island - a URL, an
   English caption, a code span - needs no special case.
   ========================================================================== */

@font-face {
  /* One axis, 400-900. The brackets in the filename must be percent-encoded
     or the request 404s on a strict server. */
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn%5Bwght%5D.woff2') format('woff2-variations'),
       url('/static/fonts/Vazirmatn%5Bwght%5D.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  /* swap, not block: Persian that has not loaded is invisible, and an
     invisible headline is worse than one in a fallback face for 200ms. */
  font-display: swap;
}
@font-face {
  /* Fallback for a browser that refuses the variable file. */
  font-family: 'Vazirmatn Static';
  src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn Static';
  src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  --ink:    #14161a;
  --ink-2:  #52585f;
  --ink-3:  #8a9099;
  --ink-4:  #a0a6ad;

  --paper:  #ffffff;
  --sand:   #f7f6f3;
  --ground: #f2f1ee;
  --sunk:   #edebe7;

  --line:   #e6e4e0;
  --line-2: #eeece8;
  --line-3: #d8d6d1;

  /* Saffron. Every primary action on the site is this colour and nothing
     else is, so a reader learns it in one page. */
  --brand:      oklch(0.55 0.15 55);
  --brand-deep: oklch(0.45 0.15 55);
  --brand-lift: oklch(0.68 0.15 62);
  --brand-wash: #fbf7ee;

  --link: #2d6cb5;

  --good: #2f7d5f;
  --warn: #8f6410;
  --bad:  #a8362c;

  /* The fallback glaze, for an article filed nowhere. */
  --accent: #5d6470;

  --wrap: 1320px;
  --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e9ebef; --ink-2: #a6adb6; --ink-3: #79808a; --ink-4: #656c76;
    --paper: #121417; --sand: #171a1e; --ground: #0d0f11; --sunk: #1c2026;
    --line: #24282e; --line-2: #1e2228; --line-3: #343a42;
    --brand: oklch(0.72 0.14 62); --brand-deep: oklch(0.8 0.13 66);
    --brand-lift: oklch(0.72 0.14 62); --brand-wash: #221b0d;
    --link: #7aa8e0;
    --good: #5dc492; --warn: #e0a93f; --bad: #e0776b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9ebef; --ink-2: #a6adb6; --ink-3: #79808a; --ink-4: #656c76;
  --paper: #121417; --sand: #171a1e; --ground: #0d0f11; --sunk: #1c2026;
  --line: #24282e; --line-2: #1e2228; --line-3: #343a42;
  --brand: oklch(0.72 0.14 62); --brand-deep: oklch(0.8 0.13 66);
  --brand-lift: oklch(0.72 0.14 62); --brand-wash: #221b0d;
  --link: #7aa8e0;
  --good: #5dc492; --warn: #e0a93f; --bad: #e0776b;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Vazirmatn', 'Vazirmatn Static', Tahoma, system-ui, sans-serif;
  font-size: 14px;
  /* Persian carries meaning in marks above and below the baseline: the
     leading that looks generous in Latin is the minimum that stays
     readable here. */
  line-height: 1.9;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap.narrow { max-width: 820px; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; inset-block-start: -100px; inset-inline-start: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip:focus { inset-block-start: 0; }

/* ==================================================== the utility strip */

.utility {
  background: var(--ink); color: #9aa0a8; font-size: 12px;
}
:root[data-theme="dark"] .utility,
.utility { background: #14161a; }
.utility-inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: 24px;
  height: 34px; display: flex; align-items: center; gap: 16px;
}
.utility .today { font-weight: 600; color: #d6d9dd; }
.utility .rule { width: 1px; height: 12px; background: #33383f; flex: none; }
.utility a { color: #9aa0a8; }
.utility a:hover { color: #fff; }
.utility-links { margin-inline-start: auto; display: flex; gap: 16px; }
@media (max-width: 900px) { .utility { display: none; } }

/* ========================================================== the masthead */

.site-header { background: var(--paper); border-block-end: 1px solid var(--line); }
.masthead {
  max-width: var(--wrap); margin-inline: auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 28px;
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark {
  width: 40px; height: 40px; flex: none; background: var(--ink);
  color: var(--brand-lift); display: grid; place-items: center;
}
.brand-name { display: block; font-size: 25px; font-weight: 900; line-height: 1.2; }
.brand-tag { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.4; }

.site-search {
  flex: 1; max-width: 460px; display: flex; align-items: center;
  height: 42px; background: var(--sand); border: 1px solid var(--line);
  padding-inline: 14px;
}
.site-search:focus-within { border-color: var(--link); }
.site-search svg { flex: none; color: var(--ink-3); }
.site-search input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; border: 0;
  background: transparent; color: var(--ink); padding-inline: 10px;
}
.site-search input::placeholder { color: var(--ink-3); }
.site-search input:focus { outline: none; }
.site-search button {
  flex: none; border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding-inline: 4px; touch-action: manipulation;
}

.masthead-actions {
  margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex: none;
}
.theme-toggle {
  height: 42px; width: 42px; border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  touch-action: manipulation;
}
.theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
}

/* ======================================================== the section nav
   The nav is the colour legend: every section sits over a rule in its own
   colour, so all seven are learned here and then recognised on every card
   in the site. */

.site-nav-bar { background: var(--paper); border-block-end: 2px solid var(--ink); }
.site-nav-inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: stretch;
}
.nav-sections { display: flex; list-style: none; margin: 0; padding: 0; min-width: 0; }
.nav-sections > li { position: static; }
.nav-sections > li > a {
  display: flex; align-items: center; height: 46px; padding-inline: 15px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  border-block-end: 3px solid transparent; white-space: nowrap;
}
.nav-sections > li > a:hover { color: var(--ink); border-block-end-color: var(--accent); }
.nav-sections .is-home { font-weight: 800; color: var(--ink); }
.nav-sections .is-current > a {
  color: var(--ink); font-weight: 800; border-block-end-color: var(--accent);
}
.nav-all {
  margin-inline-start: auto; display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-3); white-space: nowrap;
}
.nav-all:hover { color: var(--ink); }

/* The sub-section panel opens on hover AND on focus-within, which is what
   makes it reachable from the keyboard with no JavaScript. */
.site-nav-inner { position: relative; }
.nav-panel {
  position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 40;
  display: none; background: var(--paper); padding: 20px 24px 22px;
  border: 1px solid var(--line); border-block-start: 3px solid var(--accent);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .45);
}
.nav-section:hover > .nav-panel, .nav-section:focus-within > .nav-panel { display: block; }
.nav-panel ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 26px;
}
.nav-panel a {
  display: block; padding: 7px 0; font-size: 13.5px; color: var(--ink-2);
  border-block-end: 1px solid var(--line-2);
}
.nav-panel a:hover { color: var(--accent); }
.nav-panel .panel-note {
  grid-column: 1 / -1; margin: 0 0 10px; font-size: 13px; color: var(--ink-3);
}

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; }
.nav-toggle:focus-visible ~ .site-header .nav-button { outline: 2px solid var(--link); }

@media (max-width: 1100px) {
  .nav-sections > li > a { padding-inline: 11px; font-size: 13.5px; }
}
@media (max-width: 900px) {
  /* The search drops to its own line, which it can only do if the row is
     allowed to wrap - without this it stays in the row and pushes the
     document wider than the screen. */
  .masthead { padding: 10px 14px; gap: 12px; flex-wrap: wrap; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 19px; }
  .brand-tag { display: none; }
  .nav-button {
    display: grid; gap: 4px; width: 44px; height: 44px; padding: 11px;
    border: 0; background: transparent; cursor: pointer; align-content: center;
    justify-items: center; flex: none; order: -1; touch-action: manipulation;
  }
  .nav-button span { display: block; width: 22px; height: 2px; background: var(--ink); }
  .site-search { order: 3; flex-basis: 100%; max-width: none; }
  .masthead-actions { margin-inline-start: 0; }

  /* On a phone the nav is a horizontally scrolling chip rail - the standard
     portal pattern, and the only one that fits seven sections. */
  .site-nav-inner { padding-inline: 8px; overflow-x: auto; scrollbar-width: none; }
  .site-nav-inner::-webkit-scrollbar { display: none; }
  /* A flex child's floor is its content width, so without this the rail
     widens the page instead of scrolling inside it. */
  .site-nav { min-width: 0; }
  .nav-sections { flex-wrap: nowrap; }
  .nav-sections > li > a { height: 42px; padding-inline: 12px; font-size: 14px; }
  .nav-panel, .nav-all { display: none !important; }
}

/* =============================================================== ad slots
   The height is reserved before the network answers, so an ad that arrives
   late pushes nothing down. A slot with no height at a breakpoint is not
   rendered there at all. */

.ad-slot { position: relative; }
.ad-slot > .ad-label {
  position: absolute; inset-block-start: 4px; inset-inline-end: 8px; z-index: 2;
  font-size: 10px; color: var(--ink-4); pointer-events: none;
}
.ad-slot > .ad-body { min-height: var(--adh, 0px); }
.ad-slot.is-placeholder > .ad-body {
  background: var(--sand); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 12px; color: var(--ink-4); font-family: ui-monospace, monospace;
  /* The slot id is an LTR identifier sitting in an RTL page. */
  direction: ltr;
}
.ad-desktop-only { display: block; }
.ad-mobile-only { display: none; }
@media (max-width: 900px) {
  .ad-slot > .ad-body { min-height: var(--admh, 0px); }
  .ad-desktop-only { display: none; }
  .ad-mobile-only { display: block; }
}

/* A banner sits on a sand band so it reads as paid space, not as content. */
.ad-band {
  background: var(--sand); border-block-end: 1px solid var(--line);
  padding-block: 14px;
}
.ad-band .ad-slot { max-width: var(--adw, 970px); margin-inline: auto; }
@media (max-width: 900px) { .ad-band .ad-slot { max-width: var(--admw, 100%); } }
.ad-rail .ad-slot { width: 100%; }
.ad-inline { margin-block: 32px; }
.ad-inline .ad-slot { max-width: var(--adw, 728px); margin-inline: auto; }

/* Native units are framed as sponsored content, not as a banner. */
.ad-native {
  border: 1px solid var(--line); background: var(--sand); padding: 18px 20px;
  margin-block: 28px;
}
.ad-native > .ad-label {
  inset-inline-end: auto; inset-inline-start: 10px; inset-block-start: 7px;
}
.ad-anchor {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
  background: var(--ground); border-block-start: 1px solid var(--line-3);
  padding: 5px 0; display: none;
}
@media (max-width: 900px) { .ad-anchor { display: block; } }
.ad-anchor .ad-slot { width: 320px; margin-inline: auto; }
/* Room for the anchor so it never covers the last line of the footer. */
@media (max-width: 900px) { body.has-anchor { padding-block-end: 62px; } }

/* ============================================================= the layout */

.zone { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.zone-pad { padding-block-start: 26px; }

/* The hero: a lead, two secondaries beside it, and the rail. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px;
  padding-block-start: 26px;
}
.hero-main {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px;
  min-width: 0;
}
.hero-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.rail { min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* The same two-column shape as the hero, for any page that wants a rail. */
.with-rail {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px;
  align-items: start; padding-block-start: 22px;
}
.with-rail > .main-col { min-width: 0; }
@media (max-width: 1080px) { .with-rail { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .hero-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
  .zone { padding-inline: 14px; }
  .hero { padding-block-start: 16px; gap: 24px; }
}

/* ============================================================ section head */

.band { padding-block-start: 34px; }
.band-head {
  display: flex; align-items: center; gap: 10px;
  padding-block-end: 11px; border-block-end: 2px solid var(--ink); margin-block-end: 20px;
}
.band-head::before {
  content: ''; width: 7px; height: 18px; background: var(--accent); flex: none;
}
.band-head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.5; }
.band-head .count { font-size: 12.5px; color: var(--ink-4); }
.band-head .more {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap;
}
.band-head .tabs { margin-inline-start: auto; display: flex; gap: 2px; }
.band-head .tabs a {
  border: 0; font-size: 13px; font-weight: 500; padding: 6px 14px;
  color: var(--ink-3); background: transparent;
}
.band-head .tabs a:hover { color: var(--ink); }
.band-head .tabs .is-current { background: var(--ink); color: var(--paper); font-weight: 700; }

/* A page's own header - a section front, a tag, a search. */
.page-head { padding-block: 24px 0; }
.page-head .parent {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent);
  margin-block-end: 6px;
}
.page-head h1 {
  margin: 0 0 10px; font-size: 32px; font-weight: 800; line-height: 1.5;
  text-wrap: pretty;
}
.page-head p { margin: 0; color: var(--ink-2); max-width: 70ch; font-size: 15px; }
.page-head .count { font-size: 13px; color: var(--ink-4); }

.crumbs {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--ink-4); padding-block: 18px 0;
}
.crumbs a:hover { color: var(--link); }
.crumbs .here { color: var(--accent); font-weight: 600; }

.subnav { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 18px 0; }
.subnav a {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 14px;
  font-size: 13.5px; color: var(--ink-2); background: var(--sand);
  border: 1px solid var(--line);
}
.subnav a:hover { border-color: var(--accent); color: var(--accent); }
.subnav .is-current {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}
.subnav .count { font-size: 11.5px; color: var(--ink-4); }
.subnav .is-current .count { color: rgba(255, 255, 255, .8); }

/* ================================================================== cards */

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px)  { .grid-4 { gap: 16px; } }

.card { min-width: 0; }
.card-media { display: block; overflow: hidden; background: var(--sunk); position: relative; }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-void {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 12%, transparent) 0 10px,
      transparent 10px 20px),
    var(--sunk);
}
.card-cat {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--accent);
  margin-block: 11px 5px;
}
.card-title { margin: 0 0 7px; font-size: 15.5px; font-weight: 700; line-height: 1.72; }
.card-title a:hover { color: var(--brand-deep); }
.card-excerpt { margin: 0 0 8px; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.card-meta {
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* The lead. */
.lead-card .card-media img { aspect-ratio: 16 / 9; }
.lead-card .card-chip {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px;
}
.lead-card h1, .lead-card .card-title {
  font-size: 34px; font-weight: 800; line-height: 1.55; margin: 14px 0 10px;
  text-wrap: pretty;
}
.lead-card .card-excerpt { font-size: 15.5px; line-height: 1.95; margin-block-end: 12px; }
.lead-card .card-meta { font-size: 12.5px; }
.lead-card .byline { font-weight: 600; color: var(--ink-2); }
@media (max-width: 900px) {
  .lead-card h1, .lead-card .card-title { font-size: 22px; line-height: 1.65; }
  .lead-card .card-excerpt { font-size: 14px; }
}

/* A story several publishers ran the same day. Earned, not decorative. */
.trending {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px;
  color: var(--brand); font-weight: 700;
}

/* The secondary column beside the lead. */
.card-stack {
  display: flex; flex-direction: column; gap: 9px;
  padding-block-end: 18px; border-block-end: 1px solid var(--line);
}
.card-stack:last-child { border-block-end: 0; padding-block-end: 0; }
.card-stack .card-media img, .card-stack .card-void { aspect-ratio: 16 / 9; }
.card-stack .card-title { font-size: 16.5px; }

/* The list row - a thumbnail beside text. */
/* Two children only - the picture and the text - so the columns land. */
.card-row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px;
  padding-block: 20px; border-block-end: 1px solid var(--line-2); align-items: start;
}
.card-row .card-title { font-size: 17px; }
/* The picture already provides the space above the category line. */
.card-row .card-cat, .card-stack .card-cat { margin-block-start: 0; }
@media (max-width: 700px) {
  .card-row { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding-block: 15px; }
  .card-row .card-media img, .card-row .card-void { aspect-ratio: 4 / 3; }
  .card-row .card-title { font-size: 15px; }
  .card-row .card-excerpt { display: none; }
}

/* ================================================================== rail */

.rail-block { min-width: 0; }
.rail-head {
  display: flex; align-items: center; gap: 8px;
  padding-block-end: 10px; border-block-end: 2px solid var(--ink); margin-block-end: 4px;
}
.rail-head::before {
  content: ''; width: 7px; height: 16px; background: var(--accent); flex: none;
}
.rail-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.rail-head .more { margin-inline-start: auto; font-size: 12.5px; color: var(--ink-3); }

/* A ranking is a real sequence, so it is numbered. */
.rank-list { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.rank-list li {
  counter-increment: rank; display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 11px; padding-block: 11px; border-block-end: 1px solid var(--line-2);
  align-items: start;
}
.rank-list li::before {
  content: counter(rank); font-size: 17px; font-weight: 900; line-height: 1.5;
  color: var(--line-3); font-variant-numeric: tabular-nums;
}
.rank-list li:nth-child(-n+3)::before { color: var(--brand); }
.rank-list a { font-size: 13.5px; font-weight: 600; line-height: 1.75; }
.rank-list a:hover { color: var(--link); }
.rank-list .views { display: block; font-size: 11.5px; color: var(--ink-4); }

/* A rail article: small picture, title, nothing else. */
.rail-list { margin: 0; padding: 0; list-style: none; }
.rail-list li {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 11px;
  padding-block: 11px; border-block-end: 1px solid var(--line-2); align-items: start;
}
.rail-list .thumb { display: block; overflow: hidden; background: var(--sunk); }
.rail-list .thumb img, .rail-list .thumb .card-void { aspect-ratio: 4 / 3; width: 100%; }
.rail-list .cat { display: block; font-size: 11px; font-weight: 700; color: var(--accent); }
.rail-list a.title { font-size: 13px; font-weight: 600; line-height: 1.7; }
.rail-list a.title:hover { color: var(--link); }

.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { border-block-end: 1px solid var(--line-2); }
.link-list a { display: block; padding: 11px 0; font-size: 13.5px; font-weight: 600; line-height: 1.75; }
.link-list a:hover { color: var(--link); }

.section-index { list-style: none; margin: 0; padding: 0; }
.section-index > li {
  padding: 11px 0 11px 0; border-block-end: 1px solid var(--line-2);
  border-inline-start: 4px solid var(--accent); padding-inline-start: 12px;
}
.section-index-name { font-weight: 700; font-size: 14px; }
.section-index-name:hover { color: var(--accent); }
.section-index-kids { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-4); line-height: 1.8; }
.section-index-kids a:hover { color: var(--accent); }

/* The newsletter block: the one dark object in the rail, so it reads as an
   offer rather than as another list. */
.rail-cta { background: var(--ink); color: #fff; padding: 22px; }
.rail-cta h2 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.rail-cta p { margin: 0 0 14px; font-size: 13px; line-height: 1.85; color: #9aa0a8; }
.rail-cta input {
  width: 100%; height: 38px; font: inherit; font-size: 16px; padding-inline: 12px;
  background: #23272d; border: 1px solid #33383f; color: #fff; margin-block-end: 8px;
}
.rail-cta input::placeholder { color: #6f757c; }
.rail-cta button {
  width: 100%; height: 38px; border: 0; background: var(--brand); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  touch-action: manipulation;
}

/* =============================================================== article */

/* Three columns, so the reading measure sits in the MIDDLE of the page.
   With a 1320px wrap and two 300px rails the centre column lands at ~660px,
   which is the measure this body text wants anyway - the text fills its
   column instead of hugging one edge and leaving a hole beside it. */
.article-layout {
  max-width: var(--wrap); margin-inline: auto; padding-inline: 24px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 30px;
  align-items: start;
}
/* The row is pinned as well as the column. The article comes FIRST in the
   markup - it is the page - but it sits in the middle column, and grid's
   default sparse placement never walks the cursor backwards: without an
   explicit row the two rails would be pushed to row 2, under the article. */
.rail-aside   { grid-column: 1; grid-row: 1; }   /* RTL: the right-hand rail */
.article-main { grid-column: 2; grid-row: 1; }
.rail-ads     { grid-column: 3; grid-row: 1; }   /* RTL: the left-hand rail */

/* Too narrow for three: the aside drops to a full-width row under the
   article rather than being thrown away. */
@media (max-width: 1180px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .article-main { grid-column: 1; grid-row: 1; }
  .rail-ads     { grid-column: 2; grid-row: 1; }
  .rail-aside   { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-inline: 14px; }
  .article-main { grid-column: 1; grid-row: 1; }
  .rail-aside   { grid-column: 1; grid-row: 2; }
  .rail-ads     { grid-column: 1; grid-row: 3; }
}

/* A rail that follows the reader down a long article. `align-items: start`
   on the grid is what gives it room to move. */
.rail-sticky { position: sticky; top: 16px; }

.read-progress { height: 3px; background: var(--line-2); }
.read-progress span { display: block; height: 3px; background: var(--brand); width: 0; }

.article-main { min-width: 0; padding-block-start: 20px; }
.article-chip {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; padding: 4px 12px; margin-block-end: 14px;
}
/* One measure for the whole column, not three different caps: the
   headline, the lead and the body share an edge, and the block is centred
   so a column wider than the measure does not push everything to one side. */
.article-main h1 {
  margin: 0 0 16px; font-size: 40px; font-weight: 800; line-height: 1.5;
  text-wrap: pretty;
}
.article-lead { margin: 0 0 20px; font-size: 18px; line-height: 1.9; color: var(--ink-2); }
.article-main h1, .article-lead, .article-meta, .article-hero,
.article-body, .answer-box, .toc, .faq, .sources, .disclaimer,
.tags, .inline-image, .inline-video, .ad-inline, .ad-native {
  max-width: var(--measure); margin-inline: auto;
}
@media (max-width: 700px) { .article-main h1 { font-size: 26px; } }

.article-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block: 14px; border-block: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3); margin-block-end: 26px;
  font-variant-numeric: tabular-nums;
}
.article-meta .byline { display: flex; align-items: center; gap: 8px; }
.article-meta .avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}
.article-meta .who { font-weight: 700; color: var(--ink); }
.article-meta .rule { width: 1px; height: 14px; background: var(--line); }
.article-share { margin-inline-start: auto; display: flex; gap: 7px; }
.article-share a {
  width: 32px; height: 32px; border: 1px solid var(--line); display: grid;
  place-items: center; color: var(--ink-2);
}
.article-share a:hover { border-color: var(--ink-3); color: var(--ink); }

.article-hero { margin: 0 0 8px; }
.article-hero img { width: 100%; }
figure figcaption, .article-hero figcaption {
  font-size: 12.5px; color: var(--ink-3); padding: 10px 2px;
  border-block-end: 1px solid var(--line);
}

/* The answer block: the page's thesis. `.answer-box` is named in the
   page's speakable schema, so the class is load-bearing. */
.answer-box {
  background: var(--brand-wash); border-inline-start: 5px solid var(--brand);
  padding: 22px 26px; margin: 28px 0; max-width: var(--measure);
}
.answer-box h2 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--brand-deep); }
.answer-box p { margin: 0; font-size: 16.5px; line-height: 2; color: var(--ink); }
.answer-box h3 { margin: 20px 0 8px; font-size: 13px; font-weight: 800; color: var(--brand-deep); }
.answer-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.answer-box li { position: relative; padding-inline-start: 18px; font-size: 15px; line-height: 1.85; }
.answer-box li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .78em;
  width: 7px; height: 2px; background: var(--brand);
}

.toc {
  border: 1px solid var(--line); background: var(--sand); padding: 18px 22px;
  margin-block-end: 28px; max-width: var(--measure);
}
.toc h2 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 7px; }
.toc li { counter-increment: toc; font-size: 14px; }
.toc li::before {
  content: counter(toc) " — "; color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.toc a { color: var(--link); }

.article-body { max-width: var(--measure); font-size: 16.5px; line-height: 2.05; color: var(--ink); }
.article-body > p { margin: 0 0 1.5em; }
.article-body h2 { margin: 2em 0 .7em; font-size: 25px; font-weight: 800; line-height: 1.55; scroll-margin-top: 20px; }
.article-body h3 { margin: 1.8em 0 .5em; font-size: 18px; font-weight: 700; scroll-margin-top: 20px; }
.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-inline-start: 1.3em; }
.article-body li { margin-block: .6em; }
.article-body li::marker { color: var(--ink-4); }
.article-body strong { font-weight: 700; }
.article-body a {
  color: var(--link);
  border-block-end: 1px solid color-mix(in srgb, var(--link) 35%, transparent);
}
.article-body a:hover { border-block-end-color: var(--link); }
.article-body .tip {
  border-inline-start: 4px solid var(--link); background: color-mix(in srgb, var(--link) 8%, transparent);
  padding: 16px 22px; margin: 1.8em 0;
}
.article-body blockquote {
  margin: 1.8em 0; padding-inline-start: 22px; border-inline-start: 4px solid var(--line-3);
  font-size: 18px; line-height: 1.9; color: var(--ink-2);
}
@media (max-width: 700px) {
  .article-body { font-size: 15.5px; line-height: 2; }
  .article-body h2 { font-size: 20px; }
}

.inline-image, .inline-video { margin: 2.2em 0; max-width: var(--measure); }
.inline-image img { width: 100%; }
.inline-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sunk); }
.inline-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.faq { max-width: var(--measure); margin-block-start: 40px; }
.faq h2 {
  margin: 0 0 4px; font-size: 25px; font-weight: 800;
  padding-block-end: 10px; border-block-end: 3px solid var(--ink);
}
.faq details { border-block-end: 1px solid var(--line); padding: 16px 0; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: baseline;
  font-weight: 700; font-size: 16px; line-height: 1.8;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--brand); font-size: 18px; flex: none; line-height: 1; }
.faq details[open] summary::before { content: '\2212'; }
.faq p { margin: 10px 0 2px; color: var(--ink-2); padding-inline-start: 24px; }

.sources, .disclaimer {
  max-width: var(--measure); background: var(--sand); border: 1px solid var(--line);
  padding: 18px 22px; margin-block-start: 34px;
}
.sources h2 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.sources ul { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.sources li { margin-block: 6px; }
.sources a { color: var(--link); word-break: break-word; }
.sources p, .disclaimer { font-size: 12.5px; color: var(--ink-3); line-height: 1.85; }
.disclaimer { margin-block-start: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 22px 0 0; padding: 0; }
.chips a {
  display: block; padding: 5px 14px; font-size: 13px; color: var(--ink-2);
  background: var(--sand); border: 1px solid var(--line);
}
.chips a:hover { border-color: var(--link); color: var(--link); }

/* =========================================================== pagination */

.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 26px 0; font-size: 13.5px;
}
.pagination a {
  font-weight: 700; padding: 11px 24px; border: 1px solid var(--ink); background: var(--paper);
}
.pagination a:hover { background: var(--ink); color: var(--paper); }
.pagination .disabled { color: var(--ink-4); padding: 11px 24px; }
.page-status { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.more-button {
  display: flex; justify-content: center; padding-block-start: 26px;
}
.more-button a {
  border: 1px solid var(--ink); background: var(--paper); font-size: 14px;
  font-weight: 700; padding: 12px 42px;
}
.more-button a:hover { background: var(--ink); color: var(--paper); }

/* ================================================================= misc */

.empty, .notice {
  border: 1px solid var(--line); background: var(--sand);
  padding: 48px 30px; margin-block: 40px; text-align: center; color: var(--ink-2);
}
.notice h1 { margin: 0 0 10px; font-size: 24px; font-weight: 800; }
.button {
  display: inline-block; background: var(--brand); color: #fff; padding: 11px 26px;
  font-size: 14px; font-weight: 700; touch-action: manipulation;
}
.button:hover { background: var(--brand-deep); color: #fff; }
.button.ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
.button.ghost:hover { background: var(--ink); color: var(--paper); }
.button.block { display: block; width: 100%; text-align: center; }

.search-page { display: flex; gap: 10px; margin-block: 20px 0; }
.search-page input {
  flex: 1; font: inherit; font-size: 16px; padding: 13px 18px;
  border: 1px solid var(--line-3); background: var(--paper); color: var(--ink);
}
.search-page input:focus { border-color: var(--link); outline: none; }
.search-page button {
  font: inherit; font-size: 14px; font-weight: 700; padding: 13px 30px; border: 0;
  background: var(--brand); color: #fff; cursor: pointer; touch-action: manipulation;
}
.preview-banner {
  background: var(--brand-wash); border-inline-start: 4px solid var(--brand);
  color: var(--brand-deep); padding: 10px 16px; font-size: 13px; margin-block-start: 14px;
}

/* =============================================================== footer */

.site-footer { margin-block-start: 44px; background: var(--ink); color: #9aa0a8; }
:root[data-theme="dark"] .site-footer, .site-footer { background: #14161a; }
.footer-grid {
  max-width: var(--wrap); margin-inline: auto; padding: 44px 24px 30px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; }
.footer-brand .mark {
  width: 32px; height: 32px; background: var(--brand); color: #14161a;
  display: grid; place-items: center; flex: none;
}
.footer-brand strong { font-size: 20px; font-weight: 900; color: #fff; }
.footer-about p { margin: 0 0 16px; font-size: 13px; line-height: 1.95; max-width: 34ch; }
.site-footer h3 { margin: 0 0 14px; font-size: 12px; font-weight: 700; color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #9aa0a8; font-size: 13px; display: block; padding-block: 5px; }
.site-footer a:hover { color: #fff; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px; border: 1px solid #2c3138; display: grid;
  place-items: center; padding: 0;
}
.footer-bottom { border-block-start: 1px solid #23272d; }
.footer-bottom-inner {
  max-width: var(--wrap); margin-inline: auto; padding: 16px 24px;
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px;
}
.footer-bottom-inner .note { margin-inline-start: auto; }

@media print {
  .utility, .site-header, .site-nav-bar, .site-footer, .rail,
  .ad-slot, .ad-band, .ad-anchor, .toc, .pagination { display: none !important; }
  .article-layout { grid-template-columns: 1fr; }
  body { font-size: 11pt; background: #fff; }
}