/* ============================================================================
   Verity Gulf - reset, typography, links, media, form resets, focus.
   Everything here is unclassed: element selectors only. A component that needs
   to look different says so in components.css rather than fighting a rule here.
   ========================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky nav is 60px, so an in-page anchor has to stop below it. */
  scroll-padding-block-start: calc(var(--header-h) + var(--s-5));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-block-size: 100vh;
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* A phone in landscape must not paint the notch a different colour. */
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- headings */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-weight: 700;
}

/*
 * Headings wrap the ordinary way: the first line takes what it can hold and
 * the rest falls to the next.
 *
 * They used to be text-wrap: balance, which is the browser evening the lines
 * out - deliberately leaving the first one short so the last is not a stub.
 * On a headline of two lines that reads as a line break somebody put there on
 * purpose, in the wrong place, and it was doing it everywhere: article
 * headlines, card titles, section heads. Paragraphs keep text-wrap: pretty
 * below, which only guards the last line against a single-word orphan and does
 * not move the first.
 */

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6 { font-size: var(--fs-sm); line-height: var(--lh-sm); }

p { margin: 0; text-wrap: pretty; }
p + p { margin-block-start: var(--s-6); }

/* ---------------------------------------------------------------- links */

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

a:hover { text-decoration-color: currentColor; }

/*
 * Links inside prose are underlined; links that are part of the furniture -
 * nav items, cards, buttons - are not, and say so by carrying a class. A
 * headline that underlines on a card would fight the card's own affordance.
 */
a:not([class]) { color: var(--brand); }

/* ---------------------------------------------------------------- focus */

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On a solid brand or dark panel the brand-coloured ring disappears into the
   background, so those surfaces get a white one instead. */
.on-solid :focus-visible,
.site-footer :focus-visible,
.utility-bar :focus-visible,
.ticker :focus-visible {
  outline-color: #FFFFFF;
}

/* Only remove the default ring where :focus-visible is supported to replace it. */
:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------- media */

img, picture, video, canvas, svg, iframe {
  display: block;
  max-inline-size: 100%;
}

/*
 * A responsive image is wrapped in <picture>, which is a grouping element with
 * no box of its own to pass on: an image told to fill its container resolves
 * block-size: 100% against the picture, the picture is auto-height, and the
 * image quietly falls back to its own proportions. What that looks like is a
 * band of background under a photograph, and it was found and patched that way
 * four separate times - in the card media, the player, the hero panel and the
 * section thumbs. The picture is made to pass its parent's box through here
 * instead, once. Every img() in this codebase renders into a sized box, so
 * there is no free-flowing case for this to disturb.
 */
picture {
  inline-size: 100%;
  block-size: 100%;
}

img, video {
  block-size: auto;
  /* Images arrive with width/height attributes, so this reserves the box and
     keeps CLS at zero while the file loads. */
  background: var(--bg-surface-2);
}

svg { fill: currentColor; }

figure { margin: 0; }

figcaption {
  margin-block-start: var(--s-3);
  color: var(--fg-meta);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- lists */

ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

/* ---------------------------------------------------------------- rules */

hr {
  block-size: 0;
  margin-block: var(--s-9);
  border: 0;
  border-block-start: var(--hairline) solid var(--line);
}

/* ---------------------------------------------------------------- tables */

table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

th, td {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  border-block-end: var(--hairline) solid var(--line);
}

th {
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-weight: 700;
}

/* ---------------------------------------------------------------- quotes */

blockquote { margin: 0; }

/* ---------------------------------------------------------------- code */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  padding: 0.15em 0.4em;
  background: var(--bg-surface-2);
  border-radius: var(--r-xs);
}

pre {
  overflow-x: auto;
  padding: var(--s-5);
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
}

pre code { padding: 0; background: none; }

/* ---------------------------------------------------------------- forms */

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  /* A tapped control must show it was tapped without a grey flash. */
  -webkit-tap-highlight-color: transparent;
}

button:disabled { cursor: not-allowed; }

textarea { resize: vertical; }

::placeholder { color: var(--fg-meta); opacity: 1; }

/* Search inputs keep their clear button but lose Safari's inner shadow. */
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* ---------------------------------------------------------------- selection */

::selection {
  background: var(--brand-soft-2);
  color: var(--fg-heading);
}

/* ---------------------------------------------------------------- marks */

mark {
  padding: 0.1em 0.2em;
  background: var(--accent-soft);
  color: var(--fg-heading);
  border-radius: var(--r-xs);
}

/* ---------------------------------------------------------------- details */

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------- dialog */

dialog {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

dialog::backdrop {
  background: rgba(6, 47, 53, .55);
  backdrop-filter: blur(3px);
}

/* ---------------------------------------------------------------- skip link */

.skip-link {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--s-3) var(--s-5);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------- motion */

/*
 * One global off-switch. Components still declare their own transitions; this
 * makes every one of them effectively instant rather than requiring each to
 * remember the media query.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- print */

@media print {
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }

  .site-header,
  .utility-bar,
  .ticker,
  .topics,
  .site-footer,
  .drawer,
  .cookie-bar,
  .back-to-top,
  .engagement,
  .comments,
  .sidebar,
  .theme-toggle { display: none !important; }

  /* A printed page loses every link, so the URL goes inline after the text. */
  .article-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  img { max-inline-size: 100% !important; filter: none !important; }
  h1, h2, h3, h4 { break-after: avoid; }
  p, blockquote, figure { break-inside: avoid; }
}