/* ============================================================
   CONTEXTUS — concept design system
   Bold. Black. White. Yellow.
   ============================================================ */

:root {
  --contextus-theme-contract: "ad-layout-v1";
  --ink: #111111;
  --ink-soft: #2a2a2a;
  --paper: #ffffff;
  --gray-1: #f5f5f4;
  --gray-2: #e6e6e4;
  --gray-3: #c9c9c6;
  --mute: #6f6f6c;
  --y: #ffe600;
  --y-soft: #fff9c2;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;

  --rule: 3px solid var(--ink);
  --rule-thin: 1px solid var(--gray-2);

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

/* Flex/grid descendants must be allowed to shrink instead of making the page
   wider than the viewport through their intrinsic text/media width. */
main, header, footer, section, article, aside, nav, form,
.masthead > *, .overlay > *, .footer > *,
.hero-grid > *, .feed-layout > *, .article-layout > *, .card-grid > *,
.article-metarow > *, .footer-top > * { min-width: 0; }

html {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  /* ink canvas: iOS paints rubber-band overscroll and safe-area regions with
     the ROOT background (body's never propagates while html has its own), so
     ink here continues the condensed masthead and footer surfaces. The page
     itself stays paper via body below, which also covers unpainted tiles
     during fast scroll. */
  background-color: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* keep the paper surface at least viewport-tall so the ink canvas can only
     show past the document's edges, never under a short page */
  min-height: 100svh;
  overflow-x: clip;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

img, picture, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure, blockquote, dl, dd, pre { margin: 0; }
pre, code, a, h1, h2, h3, h4, h5, h6, p, li { overflow-wrap: anywhere; }
ul, ol { margin: 0; }
:where(.masthead, .overlay, .footer, .card, .hero, .feed, .rail, .pagination) :where(ul, ol) {
  padding: 0;
  list-style: none;
}
:where(.masthead, .overlay, .footer, .card, .hero, .feed, .rail, .pagination) a {
  text-decoration: none;
}
time, .num { font-variant-numeric: tabular-nums; }

::selection { background: var(--y); color: var(--ink); }

/* Keep keyboard focus visible without framing every control in the old
   yellow-and-black double ring. Links use the same underline language as the
   marker treatment; non-link controls get a restrained current-color edge. */
a:focus-visible {
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: var(--y);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
}
:where(button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (forced-colors: active) {
  a:focus-visible,
  :where(button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}