/*
  AF Post base stylesheet.

  This file owns the cascade layer order, the design tokens, the font faces,
  the reset, and the typographic primitives. Components and page files build
  on these tokens and never redefine them.

  Layer order: base < components < pages. A rule in a later layer wins over an
  earlier layer regardless of selector specificity.

  Rules of the system: no border-radius, no box-shadow, no gradients.
  Structure comes from hairlines (1px), section rules (3px), and the grid.
*/

@layer base, components, pages;

/* Fonts. Latin subsets, self hosted from static/fonts. */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cinzel-700.82175d611596.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/cinzel-900.20a6f13e6c71.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-display-400.3b6d3d56e4eb.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-text-400.6564df5cd887.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-text-400i.dab39c7e25a9.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/libre-caslon-text-700.882609d7e89f.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400.48b72fa720bf.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/newsreader-600.7cc0808d6d69.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400i.a6974fdd8f8b.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.5a2ce7798732.woff2") format("woff2");
}

@layer base {

  /* Tokens */

  :root {
    /* Color */
    --paper: #F5F3EE;
    --ink: #141414;
    --ink-2: #3B3833;
    --muted: #5F5B55;
    --rule: #C8C4BB;
    --white: #FFFFFF;
    --red: #A9232F;
    --red-2: #8E1C27;
    --flag-red: #B22234;
    --flag-blue: #3C3B6E;

    /* Type */
    --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
    --headline: "Libre Caslon Display", "Times New Roman", Georgia, serif;
    --headline-sm: "Libre Caslon Text", "Times New Roman", Georgia, serif;
    --body: "Newsreader", Georgia, "Times New Roman", serif;
    --mono: "IBM Plex Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Type scale. Headline sizes are set per role, not per element. */
    --fs-label: 12px;
    --fs-small: 15px;
    --fs-body: 17px;
    --fs-read: 20px;
    --fs-h4: 19px;
    --fs-h3: 26px;
    --fs-h2: 30px;
    --fs-h1: 66px;
    --fs-mast: 104px;

    /* Layout */
    --w: 1440px;
    --pad: 40px;
    --gutter: 24px;
    --control: 44px;

    /* Rules */
    --hair: 1px solid var(--rule);
    --line: 1px solid var(--ink);
    --line-thick: 3px solid var(--ink);
  }

  /* Reset */

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }

  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--red); }
  a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    a, button { transition: color 0.12s, background-color 0.12s, border-color 0.12s; }
  }

  /* Page frame */

  .container {
    max-width: var(--w);
    margin: 0 auto;
    padding: 0 var(--pad);
  }

  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
  }

  /* Rules */

  .rule { border-top: var(--line); }
  .rule-thick { border-top: var(--line-thick); }
  .hair { border-top: var(--hair); }

  /* Typographic primitives. One class per voice. */

  .mast {
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    line-height: 0.9;
  }

  .sect {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .hl {
    font-family: var(--headline);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }

  .hl-sm {
    font-family: var(--headline-sm);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
  }

  .deck {
    font-style: italic;
    color: var(--ink-2);
    line-height: 1.35;
    text-wrap: pretty;
  }

  .mono { font-family: var(--mono); }

  .lbl {
    font-family: var(--mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .kicker {
    font-family: var(--mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--red);
  }

  .byline {
    font-family: var(--mono);
    font-size: var(--fs-label);
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  .byline b { color: var(--ink); font-weight: 500; }

  .caption {
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
    padding-top: 6px;
    border-top: var(--line);
  }
  .caption .credit { color: var(--red); }

  .time {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .marker {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--red);
  }

  /* Accessibility helpers */

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    left: var(--pad);
    top: -100px;
    background: var(--ink);
    color: var(--paper);
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .skip-link:focus { top: 8px; z-index: 10; }

  /* Print: an article prints as a clean column, no chrome. */

  @media print {
    body { background: #FFFFFF; color: #000000; font-size: 12pt; }
    .topstrip, .section-nav, .ticker, .rail, .poll, .footer, .skip-link,
    .article-foot .share, .article-meta, .pagination, .tabs, .search { display: none !important; }
    .masthead { padding: 0 0 12px; }
    .masthead .mast { font-size: 40px; }
    .masthead .flag { width: 56px; height: 30px; }
    .grid-12 { display: block; }
    .prose p { font-size: 12pt; line-height: 1.45; }
    a { color: inherit; }
    .prose p a::after { content: " (" attr(href) ")"; font-family: var(--mono); font-size: 9pt; }
  }

  /* Responsive tokens */

  @media (max-width: 1100px) {
    :root { --pad: 28px; --fs-h1: 52px; --fs-mast: 80px; }
  }

  @media (max-width: 720px) {
    :root { --pad: 16px; --gutter: 16px; --fs-h1: 38px; --fs-mast: 46px; --fs-h2: 24px; --fs-h3: 21px; --fs-label: 11px; }
    .grid-12 { grid-template-columns: minmax(0, 1fr); }
  }
}