/*
 * officialvisit.app in the app's look (brain/DESIGN.md, the combined look): white surfaces, black
 * type, ink slabs with the one 16 degree cut, rail strips, square corners and the possession
 * arrow. The site shows no school, so its color is ink and its second color is rail (DESIGN §2,
 * rule 4). Colors and sizes come only from tokens.css (test/pages.test.ts checks for hex). Phone
 * first, one column, slabs run from the left edge.
 *
 * Archivo is the app's own cuts (apps/mobile/assets/fonts), trimmed to Latin and saved as WOFF.
 * Each rule that sets a weight also sets a width, and test/headers.test.ts checks every pair
 * against the faces below and against `archivoCuts` in packages/ui.
 */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-62-900.woff') format('woff');
  font-weight: 900;
  font-stretch: 62%;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-64-800.woff') format('woff');
  font-weight: 800;
  font-stretch: 64%;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-74-800.woff') format('woff');
  font-weight: 800;
  font-stretch: 74%;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-88-750.woff') format('woff');
  font-weight: 750;
  font-stretch: 88%;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-100-400.woff') format('woff');
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-100-600.woff') format('woff');
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
}

:root {
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family:
    'Archivo',
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-weight: 400;
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.45;
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a {
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 4px;
}

:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

/* The possession arrow: the one pointer (DESIGN §4). Right-pointing by default. */
.wordmark::after,
.page-links a::after {
  content: '';
  flex: none;
  width: var(--arrow-short);
  height: var(--arrow-long);
  background: currentcolor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Skip link: an ink chip, hidden until a keyboard user tabs to it. */
.skip {
  position: absolute;
  left: var(--gutter);
  top: calc(-2 * var(--rail));
  z-index: 1;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-ink);
  color: var(--color-white);
  font-weight: 750;
  font-stretch: 88%;
}

.skip:focus {
  top: var(--space-sm);
}

/* Header: the wordmark with its arrow, then the menu as tabs. */
.site-header {
  padding-top: var(--space-md);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-xl);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--tap);
  font-weight: 900;
  font-stretch: 62%;
  font-size: 2.375rem;
  line-height: 0.9;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark::after {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 750;
  font-stretch: 88%;
  font-size: 1.0625rem;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* The active tab gets a short slab underline (DESIGN 7.8). */
.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-xs);
  height: var(--space-xs);
  background: var(--color-ink);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

main {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xxl);
}

/* The draft notice: a rail strip with an ink chip. */
.draft {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  width: fit-content;
  max-width: calc(100% + var(--gutter));
  margin: 0 0 var(--space-xl) calc(-1 * var(--gutter));
  padding: var(--space-md) calc(var(--space-lg) + var(--cut-strip)) var(--space-md) var(--gutter);
  background: var(--color-rail);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-strip)) 100%, 0 100%);
}

.draft-label {
  flex: none;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-white);
  font-weight: 750;
  font-stretch: 88%;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The title, set like the Chyron lockup: the name in black over a 6pt stripe, ink then rail. */
h1 {
  margin: 0;
  font-weight: 800;
  font-stretch: 64%;
  font-size: clamp(2.75rem, 14vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

h1::after {
  content: '';
  display: block;
  height: var(--stripe);
  margin: var(--space-md) calc(-1 * var(--gutter)) 0;
  background: linear-gradient(
    to right,
    var(--color-ink) calc(100% - 7rem),
    var(--color-rail) calc(100% - 7rem)
  );
}

.updated {
  margin: var(--space-md) 0 var(--space-xl);
  color: var(--color-ink2);
}

.lede {
  font-size: 1.25rem;
  line-height: 1.4;
}

.tagline {
  margin: var(--space-md) 0 var(--space-xl);
  font-weight: 750;
  font-stretch: 88%;
  font-size: 1.25rem;
}

/* Section slab (DESIGN 7.3): ink, white title, the 8pt cut. */
h2 {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% + var(--gutter));
  min-height: var(--slab);
  margin: var(--space-xxl) 0 var(--space-md) calc(-1 * var(--gutter));
  padding: var(--space-xs) calc(var(--space-lg) + var(--cut-section)) var(--space-xs) var(--gutter);
  background: var(--color-ink);
  color: var(--color-white);
  font-weight: 800;
  font-stretch: 74%;
  font-size: 1.1875rem;
  line-height: 1.15;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-section)) 100%, 0 100%);
  scroll-margin-top: var(--space-lg);
}

h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-weight: 800;
  font-stretch: 74%;
  font-size: 1.4375rem;
  line-height: 1.1;
}

p,
li {
  max-width: 65ch;
}

p {
  margin: 0 0 var(--space-lg);
}

ul,
ol {
  margin: 0 0 var(--space-lg);
  padding-left: var(--space-xl);
}

ul {
  list-style: square;
}

li {
  margin-bottom: var(--space-sm);
}

li::marker {
  color: var(--color-ink);
}

strong {
  font-weight: 600;
  font-stretch: 100%;
}

/* The short version: a rail body under its slab, cut like a lower third. */
.summary ul {
  margin: 0 0 var(--space-xl) calc(-1 * var(--gutter));
  padding: var(--space-lg) calc(var(--space-lg) + var(--cut-compact)) var(--space-sm)
    calc(var(--gutter) + var(--space-xl));
  background: var(--color-rail);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-compact)) 100%, 0 100%);
}

.summary h2 {
  margin-top: 0;
}

.toc ol {
  margin-bottom: var(--space-xl);
}

.toc li {
  margin-bottom: var(--space-xs);
}

.toc a {
  display: inline-block;
  padding: var(--space-xs) 0;
}

/* Data items: each heading on a rail strip with the 12pt cut, the facts under it. */
.cards {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  max-width: none;
  margin: 0 0 var(--space-xl);
}

.card h3 {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% + var(--gutter));
  min-height: var(--rail);
  margin: 0 0 var(--space-sm) calc(-1 * var(--gutter));
  padding: var(--space-sm) calc(var(--space-lg) + var(--cut-strip)) var(--space-sm) var(--gutter);
  background: var(--color-rail);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-strip)) 100%, 0 100%);
}

.card dl {
  margin: 0;
}

.card dt {
  color: var(--color-ink2);
  font-weight: 750;
  font-stretch: 88%;
  font-size: 0.9375rem;
}

.card dd {
  margin: 0 0 var(--space-md);
}

.card dd:last-child,
.card p:last-child {
  margin-bottom: 0;
}

/* Primary buttons (DESIGN 7.12): an ink slab on a rail base, with the possession arrow. */
.page-links {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  margin: var(--space-xl) 0 0 calc(-1 * var(--gutter));
  padding: 0;
  list-style: none;
}

.page-links li {
  margin: 0;
}

.page-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  min-height: calc(var(--tap) + var(--space-sm));
  padding: 0 calc(var(--space-xl) + var(--cut-strip)) var(--base) var(--gutter);
  background: var(--color-ink);
  box-shadow: inset 0 calc(-1 * var(--base)) 0 var(--color-rail);
  color: var(--color-white);
  font-weight: 800;
  font-stretch: 74%;
  font-size: 1.5625rem;
  line-height: 1;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-strip)) 100%, 0 100%);
}

.page-links a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Footer: an ink band on a rail base line, white type. */
.site-footer {
  padding: var(--space-xxl) 0;
  border-top: var(--base) solid var(--color-rail);
  background: var(--color-ink);
  color: var(--color-white);
}

.site-footer a {
  display: inline-block;
  padding: var(--space-xs) 0;
  color: var(--color-white);
}

.site-footer :focus-visible {
  outline-color: var(--color-white);
}

.site-footer p {
  margin-bottom: var(--space-md);
}

.site-footer ul {
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin-bottom: 0;
}

@media (min-width: 40rem) {
  .wrap {
    padding: 0 var(--space-xl);
  }

  .draft,
  h2,
  .card h3,
  .summary ul,
  .page-links {
    margin-left: calc(-1 * var(--space-xl));
  }

  .draft,
  h2,
  .card h3 {
    padding-left: var(--space-xl);
  }

  .summary ul {
    padding-left: calc(2 * var(--space-xl));
  }

  .page-links a {
    padding-left: var(--space-xl);
  }

  h1::after {
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
  }

  .toc ol {
    columns: 2;
    column-gap: var(--space-xxl);
  }
}

/* Print: the same white page, so keep the slabs and drop the menu and the ink footer. */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page {
    margin: 16mm 15mm;
  }

  body {
    font-size: 11pt;
  }

  .skip,
  .site-nav,
  .toc,
  .page-links {
    display: none;
  }

  main {
    padding: var(--space-md) 0;
  }

  .site-footer {
    border-top: var(--stripe) solid var(--color-ink);
    background: var(--color-white);
    color: var(--color-ink);
  }

  .site-footer a {
    color: var(--color-ink);
  }

  .card,
  .summary,
  h3 {
    break-inside: avoid;
  }

  h2,
  h3 {
    break-after: avoid;
  }
}