/* Cantic design system, v2.
   Black, white and two greys; Geist at regular weight with tight tracking; small Geist Mono labels
   that read like system output; white and black sections joined by the horizon edge; and Cantic's
   own devices: the eclipse node, the eclipse arrow and the console frame. One accent, signal red,
   for live states only.

   Themes: put data-theme="light", "dark" or "paper" on a section (or any box) and every part inside
   reads its colours from the same role tokens (--bg, --fg, --fg-2, --surface, --line, --outline,
   --btn-bg, --btn-fg, --alert).

   Sizes are fluid with no jumps: each role is clamp(its phone size, its 1440 size as vw, its 1920
   size), so 1728 renders 1.2 times 1440 and growth stops at 1920.

   Breakpoints: phone below 768 (4 columns), tablet 768 to 991 (8 columns), desktop from 992
   (12 columns). The header switches from the menu sheet to the full bar at 1200. */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Arial and Courier New resized to Geist's measured metrics, so the swap to the real fonts does
   not move the page. */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 102.2%;
  ascent-override: 98.3%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Geist Mono Fallback';
  src: local('Courier New'), local('CourierNewPSMT');
  size-adjust: 100%;
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

/* Tokens */

:root {
  /* Palette. Text contrast (WCAG): --text-2-light is 5.7:1 on white and 5.1:1 on paper;
     --text-2-dark is 7.5:1 on black and 6.2:1 on ink; --signal is 6.4:1 on black and 5.3:1 on ink;
     --signal-on-light is 6.1:1 on white and 5.5:1 on paper. --grey is for rules, outlines and
     decoration only, never text. */
  --black: #000000;
  --white: #ffffff;
  --paper: #f2f2f2;
  --ink: #1a1a1a;
  --grey: #808080;
  --text-2-light: #666666;
  --text-2-dark: #9a9a9a;
  --line-light: rgba(0, 0, 0, .12);
  --line-dark: rgba(255, 255, 255, .16);
  --signal: #ff4d2e;
  --signal-on-light: #b82e17;

  --sans: 'Geist', 'Geist Fallback', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, Menlo, monospace;

  /* Type roles: phone at 390, desktop at 1440, capped at the 1920 size. Below 390 the large roles
     keep shrinking with the screen, so a 320 phone still fits the headline. */
  --fs-display-xl: clamp(min(40px, 10.256vw), 5.556vw, 106.67px);
  --fs-display: clamp(min(36px, 9.231vw), 4.444vw, 85.33px);
  --fs-statement: clamp(min(30px, 7.692vw), 3.333vw, 64px);
  --fs-section: clamp(min(28px, 7.179vw), 2.778vw, 53.33px);
  --fs-card: clamp(min(23px, 5.897vw), 2.083vw, 40px);
  --fs-lead: clamp(19px, 1.667vw, 32px);
  --fs-body: clamp(16px, 1.25vw, 20px);
  --fs-card-body: clamp(16px, 1.111vw, 21.33px);
  --fs-small: clamp(14px, .972vw, 18.67px);
  --fs-label: clamp(12px, .833vw, 16px);
  --fs-nav: clamp(14px, 1.042vw, 20px);
  --fs-button: clamp(15px, 1.042vw, 20px);
  --fs-article-h1: clamp(min(30px, 7.692vw), 3.333vw, 64px);
  --fs-article-h2: clamp(22px, 1.806vw, 34.67px);
  --fs-article-h3: clamp(18px, 1.389vw, 26.67px);
  --fs-article-body: clamp(17px, 1.25vw, 20px);

  /* Spacing, named by the 1440 value (phone value in brackets): 48 (16), 96 (32), 144 (48),
     192 (72). */
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-48: clamp(16px, 3.333vw, 64px);
  --sp-96: clamp(32px, 6.667vw, 128px);
  --sp-144: clamp(48px, 10vw, 192px);
  --sp-192: clamp(72px, 13.333vw, 256px);

  /* Grid: 4 columns on phones, 8 on tablets, 12 on desktops; the container stops at 1920. */
  --cols: 4;
  --margin: clamp(20px, 5.556vw, 107px);
  --gutter: clamp(16px, 2.222vw, 32px);
  --max: 1920px;
  --radius: 5px;
  --pad: clamp(16px, 1.389vw, 26.67px);
  --rule-inset: clamp(16px, 1.667vw, 32px);
  --edge-h: clamp(20px, 3vw, 56px);
  --nav-h: clamp(56px, calc(16px + 2.778vw), 69.33px);
  --btn-h: clamp(40px, 2.778vw, 53.33px);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* The horizon edge: a segment of a very large circle (radius 7,800 on a 1,440 wide band), lowest
     at the left, apex at 60% of the width. Stretched to the band, so it scales with the screen. */
  --edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48A7800 7800 0 0 1 1440 21.3V48Z'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root {
    --cols: 8;
  }
}

@media (min-width: 992px) {
  :root {
    --cols: 12;
  }
}

@media (pointer: coarse) {
  :root {
    --btn-h: 44px;
  }
}

:root,
[data-theme='light'] {
  --bg: var(--white);
  --fg: var(--black);
  --fg-2: var(--text-2-light);
  --surface: var(--paper);
  --line: var(--line-light);
  --outline: var(--grey);
  --btn-bg: var(--black);
  --btn-fg: var(--white);
  --alert: var(--signal-on-light);
  --inv-bg: var(--black);
  --inv-fg: var(--white);
  --inv-fg-2: var(--text-2-dark);
  --inv-line: var(--line-dark);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  color-scheme: light;
}

[data-theme='paper'] {
  --bg: var(--paper);
  --fg: var(--black);
  --fg-2: var(--text-2-light);
  --surface: var(--white);
  --line: var(--line-light);
  --outline: var(--grey);
  --btn-bg: var(--black);
  --btn-fg: var(--white);
  --alert: var(--signal-on-light);
  --inv-bg: var(--black);
  --inv-fg: var(--white);
  --inv-fg-2: var(--text-2-dark);
  --inv-line: var(--line-dark);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  color-scheme: light;
}

[data-theme='dark'] {
  --bg: var(--black);
  --fg: var(--white);
  --fg-2: var(--text-2-dark);
  --surface: var(--ink);
  --line: var(--line-dark);
  --outline: var(--grey);
  --btn-bg: var(--white);
  --btn-fg: var(--black);
  --alert: var(--signal);
  --inv-bg: var(--white);
  --inv-fg: var(--black);
  --inv-fg-2: var(--text-2-light);
  --inv-line: var(--line-light);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  color-scheme: dark;
}

[data-theme] {
  color: var(--fg);
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-body)/1.55 var(--sans);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.is-locked {
  overflow: hidden;
}

/* Frames that bleed off the right edge are clipped here rather than on body: on body the clip
   would pass to the viewport as hidden and leave the page scrollable sideways. clip makes no
   scroll container, so sticky parts inside still stick. */
main {
  display: block;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

button {
  cursor: pointer;
}

/* Focus shows for the keyboard only, in the current text colour, on every theme. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

/* hidden means hidden, whatever display a component sets */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* a word that must not break at its hyphen ("co-operative") */
.nowrap {
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip:focus,
.skip:focus-visible {
  transform: none;
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Type */

.t-display-xl,
.t-display,
.t-statement,
.t-section,
.t-card {
  font-weight: 400;
  text-wrap: balance;
}

.t-display-xl {
  font-size: var(--fs-display-xl);
  line-height: 1;
  letter-spacing: -.035em;
}

.t-display {
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.t-statement {
  font-size: var(--fs-statement);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.t-section {
  font-size: var(--fs-section);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.t-card {
  font-size: var(--fs-card);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.t-body {
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.t-small {
  font-size: var(--fs-small);
  line-height: 1.45;
  letter-spacing: 0;
  text-wrap: pretty;
}

.t-label,
.eyebrow {
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  color: var(--fg);
  text-wrap: balance;
}

.dim {
  color: var(--fg-2);
}

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

/* Small print under a claim or a figure */
.fine {
  font-size: var(--fs-small);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* A source printed under a third-party fact: mono, linked. */
.source {
  font: 400 var(--fs-label)/1.6 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s var(--ease-io);
}

.source a:hover {
  color: var(--fg);
}

/* Links in running text: the text colour, underlined, thicker on hover; never a framework blue. */
.tlink,
.prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s var(--ease-io);
}

.tlink:hover,
.prose a:hover {
  text-decoration-thickness: 2px;
}

/* a standalone text link (beside a button, say) reaches 44 px for the pointer and stays inline */
.tlink {
  position: relative;
}

.tlink::after {
  content: '';
  position: absolute;
  inset: -10px 0;
}

.prose > * + * {
  margin-top: 1em;
}

/* Eyebrow and heading: the label sits 8 px above its heading, always. */
.ehead {
  display: grid;
  justify-items: start;
  gap: var(--sp-8);
}

/* Layout */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

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

.sec {
  position: relative;
  padding-block: var(--sp-96);
  background: var(--bg);
  color: var(--fg);
}

.sec--tight {
  padding-block: var(--sp-48);
}

.sec--flush-top {
  padding-top: 0;
}

.sec--flush-bottom {
  padding-bottom: 0;
}

/* A page whose first section is not a hero under a see-through header starts below the bar. */
main > .sec:first-child:not([data-nav-overlay]) {
  padding-top: calc(var(--nav-h) + var(--sp-96));
}

/* The horizon edge: the lower section's top bulges up into the section above, like a planet's
   limb, in the lower section's own colour. Put data-edge on the lower section; data-edge="mirror"
   puts the apex at 40% instead of 60%. */
[data-edge] {
  position: relative;
}

[data-edge]::before,
main:has(> .sec[data-theme='dark']:last-child) + .foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: calc(var(--edge-h) + 1px);
  background: var(--bg);
  -webkit-mask: var(--edge-shape) 0 0 / 100% 100% no-repeat;
  mask: var(--edge-shape) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

[data-edge='mirror']::before {
  transform: scaleX(-1);
}

/* The bulge sits in the bottom padding of the section above; that section grows by the edge's
   height, so its content keeps its full space above the curve. The footer is shared by every
   page, so a page that closes on a dark section gets its edge from the page, not the partial. */
.sec:has(+ [data-edge]),
main:has(+ [data-edge]) > .sec:last-child,
main:has(> .sec[data-theme='dark']:last-child) > .sec:last-child {
  padding-bottom: calc(var(--sp-96) + var(--edge-h));
}

.sec--tight:has(+ [data-edge]) {
  padding-bottom: calc(var(--sp-48) + var(--edge-h));
}

.sec--flush-bottom:has(+ [data-edge]) {
  padding-bottom: var(--edge-h);
}

/* The growing rule: a 1 px line beside a heading or paragraph that grows from 0 to its full
   height with scroll (js/cantic.js sets --grow). Without the script it is simply there. */
[data-rule] {
  position: relative;
  padding-left: var(--rule-inset);
}

[data-rule]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--outline);
  transform: scaleY(var(--grow, 1));
  transform-origin: 0 0;
}

/* Cantic's devices */

/* The eclipse node: a small disc with a thin ring catching the light on one side. Used as a
   marker in lists, the film HUD, the field map and the vignettes. */
.node {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  color: inherit;
}

/* The eclipse arrow, Cantic's "go": a ring with an arrow at 45 degrees. On hover of its link or
   card, a disc slides across the ring from the left like an eclipse, and the arrow inverts and
   turns level. */
.earrow {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: clamp(32px, 2.222vw, 42.67px);
  height: clamp(32px, 2.222vw, 42.67px);
  border: 1px solid currentColor;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  color: var(--fg);
  transition: color .2s var(--ease-io), border-color .2s var(--ease-io);
}

.earrow::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform .5s var(--ease-out);
}

.earrow .icon {
  width: 50%;
  height: 50%;
  stroke-width: 1.4;
  transform: rotate(-45deg);
  transition: transform .5s var(--ease-out), color .2s var(--ease-io);
}

/* Hover effects are for pointers that can hover: on a touch screen a tap would leave them stuck
   on. The keyboard gets the same effect while it is on the link (not after a mouse click). */
@media (hover: hover) {
  a:hover > .earrow::before,
  .go:hover .earrow::before,
  .prow:hover .earrow::before,
  .lcard:hover .earrow::before {
    transform: none;
  }

  a:hover > .earrow .icon,
  .go:hover .earrow .icon,
  .prow:hover .earrow .icon,
  .lcard:hover .earrow .icon {
    color: var(--bg);
    transform: none;
  }
}

:is(.prow, .lcard):has(:focus-visible) .earrow::before {
  transform: none;
}

:is(.prow, .lcard):has(:focus-visible) .earrow .icon {
  color: var(--bg);
  transform: none;
}

/* A text link with the eclipse arrow after it */
.go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: var(--fs-button);
  line-height: 1.2;
  color: var(--fg);
}

/* The stretched link: the link in a card's heading covers the whole card, so the card is one
   target with a short accessible name. */
.stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.stretch:focus-visible {
  outline: none;
}

.stretch:focus-visible::after {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* The console frame: live vignettes in a 1 px box with a mono title strip, square corners.
   Where the frame runs off the right edge of the screen (a product row on desktop), --bleed is how
   far: the strip and the body keep that much clear on their right, and a vignette must keep its
   content inside the body's padding (an absolutely placed vignette: inside right: var(--bleed)).
   The title wraps rather than being cut when the strip is narrow (Spanish on a phone). */
.console {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
}

.console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: clamp(28px, 1.944vw, 37.33px);
  padding: 6px calc(12px + var(--bleed, 0px)) 6px 12px;
  border-bottom: 1px solid var(--line);
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.console__live {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--alert);
  animation: live 2s var(--ease-io) infinite;
}

@keyframes live {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

.console__body {
  position: relative;
  aspect-ratio: 3 / 2;
  padding-right: var(--bleed, 0px);
  overflow: hidden;
}

/* Buttons: rectangles with 5 px corners; no pills, shadows or gradients. The hit area reaches
   44 px on every pointer. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 clamp(16px, 1.111vw, 21.33px);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font: 400 var(--fs-button)/1.1 var(--sans);
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s var(--ease-io), color .15s var(--ease-io), border-color .15s var(--ease-io);
}

.btn::after {
  content: '';
  position: absolute;
  inset: min(0px, calc((var(--btn-h) - 44px) / 2)) 0;
}

.btn--primary {
  border-color: var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
}

@media (hover: hover) {
  .btn--primary:hover {
    border-color: var(--fg);
    background: var(--bg);
    color: var(--fg);
  }
}

.btn--secondary {
  border-color: var(--outline);
  color: var(--fg);
}

@media (hover: hover) {
  .btn--secondary:hover {
    border-color: var(--fg);
    background: var(--fg);
    color: var(--bg);
  }
}

.btn--block {
  width: 100%;
}

.btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

/* Chips (filters, tags), chapter tabs and the two-way switch */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .15s var(--ease-io), color .15s var(--ease-io), border-color .15s var(--ease-io);
}

.chip::after {
  content: '';
  position: absolute;
  inset: -6px 0;
}

@media (hover: hover) {
  button.chip:hover,
  a.chip:hover {
    border-color: var(--fg);
  }
}

.chip[aria-pressed='true'],
.chip[aria-current] {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(16px, 1.875vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: var(--fg-2);
  font: 400 var(--fs-button)/1.1 var(--sans);
  transition: color .15s var(--ease-io), background-color .15s var(--ease-io), border-color .15s var(--ease-io);
}

@media (hover: hover) {
  .tab:hover {
    color: var(--fg);
  }
}

.tab[aria-selected='true'] {
  border-color: var(--surface);
  background: var(--surface);
  color: var(--fg);
}

/* the chapter's progress, set by its vignette as --progress (0 to 1) */
.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  opacity: .14;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 0;
}

.switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
}

.switch button {
  position: relative;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--fg-2);
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .15s var(--ease-io), color .15s var(--ease-io);
}

/* 38 px to the eye, 44 px to the pointer: the hit area reaches into the frame's padding */
.switch button::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}

@media (hover: hover) {
  .switch button:hover {
    color: var(--fg);
  }
}

.switch button[aria-pressed='true'] {
  background: var(--fg);
  color: var(--bg);
}

/* The statement: the big positioning line with its rule at the left margin, then the lead from
   column 7 with a rule of its own. */
.statement {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

.statement__main {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: var(--sp-8);
}

.statement__text {
  max-width: 24em;
}

.statement__lead {
  grid-column: 1 / -1;
  display: grid;
  gap: 1em;
  margin-top: var(--sp-96);
}

/* Product rows: the name with its node, a grey descriptor, the benefit line, a short paragraph
   and the eclipse arrow; on the right a console frame bleeding off the edge. The whole row is
   one link (the headline's .stretch); on hover only the arrow moves. */
.prows {
  display: grid;
  row-gap: clamp(72px, 13.889vw, 266.67px);
}

.prow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-48);
}

.prow__copy {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.prow__name {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: var(--fs-lead);
  line-height: 1.2;
  letter-spacing: -.015em;
}

.prow__name .node {
  width: 1.1em;
  height: 1.1em;
}

.prow__desc {
  margin-top: 4px;
  font-size: var(--fs-lead);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--fg-2);
}

.prow__headline {
  margin-top: var(--sp-96);
  max-width: 11em;
}

.prow__text {
  margin-top: var(--sp-24);
  max-width: 24em;
}

.prow__copy > .earrow {
  margin-top: var(--sp-48);
}

.prow__media {
  grid-column: 1 / -1;
}

/* Proof figures: a large mono figure with its label */
.figure {
  display: grid;
  align-content: start;
  gap: 12px;
}

.figure__num {
  font: 400 var(--fs-display)/1 var(--mono);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.figure__label {
  max-width: 22em;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* A plain card on the surface colour (proof cards, key facts). Not a link, so it stays still. */
.card {
  display: grid;
  align-content: start;
  gap: var(--sp-24);
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
}

/* Cards that invert on hover: link cards and blog cards on light and paper, segment tiles on
   dark. The card swaps its own tokens, so everything inside follows. */
.lcards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

.lcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(196px, 20.833vw, 400px);
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  transition: background-color .2s var(--ease-io), color .2s var(--ease-io);
}

/* The keyboard inverts a card while it is on the card's link, but a mouse click that focused the
   link does not (Chrome and Firefox focus a clicked link, and the card would stay black). */
.lcard:has(:focus-visible) {
  --bg: var(--inv-bg);
  --fg: var(--inv-fg);
  --fg-2: var(--inv-fg-2);
  --line: var(--inv-line);
  background: var(--bg);
}

@media (hover: hover) {
  .lcard:hover {
    --bg: var(--inv-bg);
    --fg: var(--inv-fg);
    --fg-2: var(--inv-fg-2);
    --line: var(--inv-line);
    background: var(--bg);
  }
}

.lcard :is(.eyebrow, .lcard__meta, .lcard__text, .lcard__list, .lcard__by) {
  transition: color .2s var(--ease-io);
}

.lcard__title {
  margin-top: var(--sp-8);
  max-width: 18em;
}

.lcard__text {
  margin-top: var(--sp-16);
  max-width: 34em;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.lcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.lcard__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: var(--sp-16);
  font: 400 var(--fs-label)/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.lcard__by {
  margin-top: var(--sp-16);
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.lcard > .earrow {
  margin-top: auto;
}

.lcard > :nth-last-child(2) {
  margin-bottom: var(--sp-48);
}

/* Industry tiles: food and the cold chain and each industry, on their films' posters, black, the
   words under them. Two by two, then two rows of four once there is room (/industries and the home
   page, site-src/templates/parts/industry-tiles.html). */
.itiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

@media (min-width: 640px) {
  .itiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .itiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lcard--film {
  min-height: 0;
}

.lcard__poster {
  display: block;
  width: calc(100% + 2 * var(--pad));
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #000;
}

.lcard__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* compact, so the eight fit one desktop screen: a wide poster, the arrow close under the text */
.itiles .lcard__poster {
  aspect-ratio: 2.4 / 1;
  margin-bottom: var(--sp-16);
}

.itiles .lcard__title {
  margin-top: 0;
  font-size: clamp(18px, 1.389vw, 26.67px);
}

.itiles .lcard__text {
  margin-top: var(--sp-8);
}

.itiles .lcard > :nth-last-child(2) {
  margin-bottom: var(--sp-16);
}

/* Step cards */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  counter-reset: step;
}

.step-card {
  display: grid;
  align-content: start;
  gap: var(--sp-24);
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--surface);
  counter-increment: step;
}

.step-card__title {
  display: flex;
  gap: .6em;
  font-size: var(--fs-lead);
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.step-card__title::before {
  content: counter(step);
  font-family: var(--mono);
  letter-spacing: 0;
  color: var(--fg-2);
}

.step-card__text {
  font-size: var(--fs-card-body);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* The call-to-action bar: one line and one button */
.cta-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-24);
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--surface);
}

.cta-bar__title {
  text-wrap: balance;
}

/* Trust rows (the architecture pattern): a heading on the left and a paragraph on the right,
   each with a rule that grows as the row scrolls in, the heading's slightly ahead. */
.rows {
  display: grid;
  row-gap: var(--sp-96);
}

.rows__row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-24);
  align-items: start;
}

.rows__head {
  grid-column: 1 / -1;
  max-width: 12em;
}

.rows__text {
  grid-column: 1 / -1;
  max-width: 30em;
}

/* System strip: what Eclipse tries, as thin line icons with mono labels */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-48) var(--gutter);
}

.strip li {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.strip .icon {
  width: clamp(28px, 2.222vw, 42.67px);
  height: clamp(28px, 2.222vw, 42.67px);
  stroke-width: 1;
}

/* An incident: mono date, headline, up to three facts, its sources */
.incident {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-24);
  padding-block: var(--sp-48);
  border-top: 1px solid var(--line);
}

.incident__date {
  grid-column: 1 / -1;
}

.incident__body {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-24);
}

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

.incident__facts li {
  font-size: var(--fs-card-body);
  line-height: 1.45;
}

/* Numbered sources at the foot of an article or page */
.sources {
  display: grid;
  gap: 12px;
  counter-reset: src;
}

.sources li {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  gap: 12px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-2);
  counter-increment: src;
}

.sources li::before {
  content: counter(src);
  font-family: var(--mono);
  color: var(--fg);
}

.sources a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Tables */

.table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-card-body);
  line-height: 1.45;
}

.table caption {
  padding-bottom: var(--sp-24);
  text-align: left;
}

.table th,
.table td {
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  padding-top: 0;
  padding-bottom: 12px;
  border-bottom-color: var(--outline);
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
  vertical-align: bottom;
  white-space: nowrap;
}

.table tbody th {
  font-weight: 400;
  color: var(--fg);
}

.table td {
  color: var(--fg-2);
}

.table th:last-child,
.table td:last-child {
  padding-right: 0;
}

.table .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--fg);
}

/* On phones a table becomes a list of rows: the row's heading, then each cell under its
   column's name (data-label, which js/cantic.js copies from the column heading, together with
   the table roles Safari drops once the parts are blocks). .table--grid keeps the grid. */
@media (max-width: 767px) {
  .table:not(.table--grid),
  .table:not(.table--grid) tbody,
  .table:not(.table--grid) tr,
  .table:not(.table--grid) th,
  .table:not(.table--grid) td {
    display: block;
  }

  .table:not(.table--grid) caption {
    display: block;
  }

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

  .table:not(.table--grid) tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  .table:not(.table--grid) tbody tr:first-child {
    border-top: 1px solid var(--outline);
  }

  .table:not(.table--grid) th,
  .table:not(.table--grid) td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .table:not(.table--grid) tbody th {
    margin-bottom: 8px;
  }

  .table:not(.table--grid) td + td {
    margin-top: 10px;
  }

  .table:not(.table--grid) td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font: 400 var(--fs-label)/1.3 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
}

/* Questions and answers: details and summary, glided open by js/cantic.js */

.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  min-height: 44px;
  padding: clamp(18px, 1.667vw, 32px) 0;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -.015em;
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary .icon {
  width: clamp(20px, 1.389vw, 26.67px);
  height: clamp(20px, 1.389vw, 26.67px);
  stroke-width: 1.25;
  color: var(--fg);
  transition: transform .4s var(--ease-out);
}

.faq__item[open] summary .icon {
  transform: rotate(45deg);
}

.faq__a {
  overflow: hidden;
}

.faq__a > div {
  max-width: 40em;
  padding-bottom: clamp(22px, 2.083vw, 40px);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
}

.faq__a p + p,
.faq__a p + ul,
.faq__a ul + p {
  margin-top: .75em;
}

.faq__a ul {
  display: grid;
  gap: .4em;
  padding-left: 1.1em;
  list-style: disc;
}

.faq__a a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Forms */

.form {
  display: grid;
  gap: 20px;
}

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.field label {
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
}

.field__opt {
  color: var(--fg-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.4 var(--sans);
  letter-spacing: -.01em;
  transition: border-color .15s var(--ease-io), box-shadow .15s var(--ease-io);
}

.field textarea {
  min-height: 136px;
  padding: 12px 14px;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 44px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-2);
  opacity: 1;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--fg);
}

/* the field's own border is its focus mark, so it shows for mouse and keyboard alike */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}

.field input[readonly] {
  background: var(--surface);
  color: var(--fg-2);
}

.field.is-bad input,
.field.is-bad textarea,
.field.is-invalid input,
.field.is-invalid textarea {
  border-color: var(--alert);
  box-shadow: inset 0 0 0 1px var(--alert);
}

.field__err {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--alert);
}

.field__err:empty {
  display: none;
}

.field__note {
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .06em;
  color: var(--fg-2);
}

.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 4px;
}

.form__note,
.form__status {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--fg-2);
}

.form__note.is-bad,
.form__status.is-error {
  color: var(--alert);
}

/* Header: a 56 px bar (64 at 1728). Over a hero marked data-nav-overlay it is see-through with a
   soft dark gradient; elsewhere it is solid in the colour of the section beneath. It slides away
   while you scroll down and comes back solid when you scroll up (js/cantic.js). */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: var(--fg);
  transition: transform .45s var(--ease-io);
}

.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: calc(var(--nav-h) * 1.6);
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity .25s var(--ease-io);
  pointer-events: none;
}

.nav.is-hidden {
  transform: translateY(-100%);
}

.nav__bar {
  position: relative;
  background: var(--bg);
  transition: background-color .25s var(--ease-io), box-shadow .25s var(--ease-io), color .25s var(--ease-io);
}

.nav[data-overlay]:not(.is-open):not(.is-menu)::before {
  opacity: 1;
}

.nav[data-overlay]:not(.is-open):not(.is-menu) .nav__bar {
  background: transparent;
}

/* a mouse over the see-through bar makes it solid; a tap never does, it would stay solid */
@media (hover: hover) {
  .nav[data-overlay]:not(.is-open):not(.is-menu) .nav__bar:hover {
    background: var(--bg);
  }
}

.nav.is-raised:not([data-overlay]) .nav__bar,
.nav.is-raised.is-open .nav__bar {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

/* hidden, the bar drops its shadow, which would otherwise hang below it along the top edge */
.nav.is-raised.is-hidden .nav__bar {
  box-shadow: none;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.667vw, 32px);
  height: var(--nav-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  flex: none;
  min-height: 44px;
  font: 600 clamp(20px, 1.389vw, 26.67px)/1 var(--sans);
  letter-spacing: -.035em;
  color: var(--fg);
}

.logo__mark {
  width: 1.1em;
  height: 1.15em;
}

.logo--lg {
  font-size: var(--fs-card);
}

.nav__menu {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0px, .278vw, 5.33px);
}

/* Each item is 44 px tall for the hit area; the box that inverts on hover is drawn inside it. */
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 clamp(10px, .833vw, 16px);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--fg);
  font: 400 var(--fs-nav)/1 var(--sans);
  letter-spacing: -.01em;
  white-space: nowrap;
  isolation: isolate;
  transition: color .15s var(--ease-io);
}

.nav__link::before {
  content: '';
  position: absolute;
  inset: 5px 0;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--fg);
  opacity: 0;
  transition: opacity .15s var(--ease-io);
}

/* the keyboard ring hugs the same box the hover fills, not the taller hit area */
.nav__link:focus-visible {
  outline: none;
}

.nav__link:focus-visible::before {
  opacity: 1;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--fg);
}

.nav__trigger[aria-expanded='true'] {
  color: var(--bg);
}

.nav__trigger[aria-expanded='true']::before {
  opacity: 1;
  background: var(--fg);
}

/* only a pointer that can hover inverts an item: after a tap, :hover would stick */
@media (hover: hover) {
  .nav__link:hover {
    color: var(--bg);
  }

  .nav__link:hover::before {
    opacity: 1;
    background: var(--fg);
  }
}

.nav__trigger[aria-expanded='true']:focus-visible::before {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg);
}

/* You are here: a small dot under the page's own item, or under the item of its section (the
   stamp marks that item aria-current="true", also for pages the menu does not list) */
.nav__link[aria-current='page']::after,
.nav__item[aria-current] > .nav__link::after,
.nav__item:has(.nav__sub [aria-current='page']) > .nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--fg);
}

/* The triggers: each opens a dropdown, so each carries a caret, turned up while its panel is open. */
.nav__caret {
  width: 14px;
  height: 14px;
  margin: 1px -4px 0 4px;
  stroke-width: 1.75;
  transition: transform .2s var(--ease-io);
}

.nav__trigger[aria-expanded='true'] > .nav__caret {
  transform: rotate(180deg);
}

/* the open panel says where you are; the dot under its trigger would only touch the panel */
.nav__trigger[aria-expanded='true']::after {
  display: none;
}

/* The dropdown: a panel under its own item, as wide as its links need. The panel's top padding
   bridges the bar below the item, so the pointer never leaves the item on its way down. */
.nav__item {
  position: relative;
}

.nav__drop {
  position: absolute;
  top: 100%;
  left: clamp(-12px, -.625vw, -6px);
  width: max-content;
  padding-top: calc((var(--nav-h) - 44px) / 2 + 6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .1s var(--ease-io), transform .1s var(--ease-io), visibility 0s linear .1s;
}

.nav__item.is-open > .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s var(--ease-io), transform .25s var(--ease-out), visibility 0s;
}

/* Without the script the dropdown still opens on hover and on keyboard focus. */
html:not(.js) .nav__item:hover > .nav__drop,
html:not(.js) .nav__item:focus-within > .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__drop-inner {
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .06);
}

.nav__sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* a long list (Industries) reads down two columns */
.nav__sub--cols {
  grid-template-columns: repeat(2, max-content);
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  column-gap: 4px;
}

/* the list's way to everything it holds, set apart under a rule */
.nav__sub--more {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.nav__sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: clamp(15px, .972vw, 18px);
  line-height: 1.25;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--fg);
  transition: background-color .15s var(--ease-io);
}

.nav__sub a .icon {
  width: 16px;
  height: 16px;
  color: var(--fg-2);
}

.nav__sub a[aria-current='page'] {
  background: var(--surface);
}

@media (hover: hover) {
  .nav__sub a:hover > span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}

.nav__sub a:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}

/* Phones and tablets: logo left, the free test button and the menu button right. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.111vw, 21.33px);
  flex: none;
  margin-left: auto;
}

.lang {
  display: none;
  align-items: center;
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--fg-2);
  transition: color .15s var(--ease-io);
}

.lang a[aria-current] {
  color: var(--fg);
}

@media (hover: hover) {
  .lang a:hover {
    color: var(--fg);
  }
}

.lang__sep {
  padding: 0 1px;
}

.nav__signin {
  display: none;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-nav);
  letter-spacing: -.01em;
  color: var(--fg);
  white-space: nowrap;
}

@media (hover: hover) {
  .nav__signin:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}

.nav__cta-long {
  display: none;
}

.nav__toggle {
  position: relative;
  display: inline-block;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--fg);
}

/* Without script the menu sheet cannot open, so the bar shows no menu button; the footer carries
   every link. */
html:not(.js) .nav__toggle {
  display: none;
}

.nav__toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease-out), top .35s var(--ease-out);
}

.nav__toggle span:first-child {
  top: 17px;
}

.nav__toggle span:last-child {
  top: 25px;
}

.nav__toggle[aria-expanded='true'] span:first-child {
  top: 21px;
  transform: rotate(45deg);
}

.nav__toggle[aria-expanded='true'] span:last-child {
  top: 21px;
  transform: rotate(-45deg);
}

@media (min-width: 640px) {
  .nav__cta-long {
    display: inline;
  }

  .nav__cta-short {
    display: none;
  }
}

@media (min-width: 1200px) {
  .nav__menu {
    display: block;
    margin-left: auto;
  }

  .nav__actions {
    margin-left: 0;
  }

  .lang,
  .nav__signin {
    display: inline-flex;
  }

  .nav__toggle {
    display: none;
  }
}

/* Narrow phones: the bar closes up so the Spanish button still fits beside the logo at 320. */
@media (max-width: 389px) {
  .nav__inner {
    gap: 8px;
  }

  .nav__cta {
    padding-inline: 12px;
  }
}

/* Spanish runs longer: the short button until the bar has room for the long one */
@media (min-width: 1200px) and (max-width: 1499px) {
  html[lang^='es'] .nav .nav__cta-long {
    display: none;
  }

  html[lang^='es'] .nav .nav__cta-short {
    display: inline;
  }
}

/* The phone menu: a full-screen black sheet of ink tiles, under the bar. */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: calc(var(--nav-h) + 12px) var(--margin) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}

.sheet.is-open {
  opacity: 1;
}

.sheet__list {
  display: grid;
  gap: 8px;
}

.sheet__list > li > a,
.sheet__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.015em;
  list-style: none;
  cursor: pointer;
}

.sheet__group > summary::-webkit-details-marker {
  display: none;
}

.sheet__group {
  border-radius: var(--radius);
  background: var(--surface);
}

.sheet__group > summary .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.25;
  transition: transform .4s var(--ease-out);
}

.sheet__group[open] > summary .icon {
  transform: rotate(45deg);
}

.sheet__a {
  overflow: hidden;
}

.sheet__sub {
  padding: 0 20px 10px;
}

.sheet__sub li + li {
  border-top: 1px solid var(--line);
}

.sheet__sub a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: 6px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--fg);
}

.sheet__list > li > a[aria-current='page'],
.sheet__item[aria-current] > .sheet__group > summary {
  box-shadow: inset 2px 0 0 var(--fg);
}

.sheet__sub a[aria-current='page'] > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.sheet__foot {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.sheet__foot .btn {
  width: 100%;
  min-height: 56px;
  font-size: 17px;
}

.sheet .lang {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.sheet .lang a {
  padding: 0 12px;
}

@media (min-width: 1200px) {
  .sheet {
    display: none;
  }
}

/* Footer: paper, the mark and wordmark, two black buttons and the company line on the left; the
   link groups on the right; the registration line in mono at the foot. */

.foot {
  position: relative;
  padding: var(--sp-48) 0 var(--sp-24);
  background: var(--bg);
  color: var(--fg);
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-48);
}

.foot__brand {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--sp-24);
}

.foot__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.foot__btns .btn {
  --btn-h: 36px;
  font-size: var(--fs-small);
}

.foot__line {
  max-width: 22em;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-2);
}

.foot__groups {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-48) var(--gutter);
}

.foot__h {
  margin-bottom: 14px;
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
}

.foot__col ul {
  display: grid;
}

.foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-block: 4px;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--fg-2);
  transition: color .15s var(--ease-io);
}

.foot__col a[aria-current='page'] {
  color: var(--fg);
}

@media (hover: hover) {
  .foot__col a:hover {
    color: var(--fg);
  }
}

.foot__base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px var(--sp-24);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--line);
}

.foot__small {
  max-width: 64em;
  font: 400 var(--fs-label)/1.6 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.foot__small a {
  text-transform: none;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.foot .lang {
  display: inline-flex;
}

@media (pointer: coarse) {
  .foot__col a {
    min-height: 44px;
  }

  .chip {
    min-height: 44px;
  }

  .chip::after {
    inset: 0;
  }

  .switch button {
    min-height: 44px;
  }
}

/* Reveals: blocks fade up once; headings and leads rise line by line from behind a mask
   (data-lines; js/cantic.js wraps each word and gives it its line's index). */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0s);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: .1em 0 .18em;
  margin: -.1em 0 -.18em;
}

.w__i {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform .8s var(--ease-out), opacity .8s var(--ease-out);
  transition-delay: calc(var(--line, 0) * 80ms + var(--delay, 0ms));
}

[data-lines].is-in .w__i {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal],
  .w__i {
    opacity: 1;
    transform: none;
  }
}

/* Tablet and up */

@media (min-width: 768px) {
  .statement__lead {
    grid-column: 4 / -1;
  }

  .lcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strip {
    display: flex;
    justify-content: space-between;
  }

  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: clamp(20px, 1.667vw, 32px);
  }

  .foot__groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rows__head {
    grid-column: 1 / span 4;
  }

  .rows__text {
    grid-column: 5 / -1;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop */

@media (min-width: 992px) {
  .statement__main {
    grid-column: 1 / span 11;
  }

  .statement__lead {
    grid-column: 7 / -1;
    margin-top: var(--sp-144);
  }

  .prow {
    row-gap: 0;
    align-items: start;
  }

  .prow__copy {
    grid-column: 1 / span 5;
  }

  /* the frame starts at column 7 and runs off the right edge of the screen, by --bleed */
  .prow__media {
    --bleed: clamp(40px, 11.111vw, 213.33px);
    grid-column: 7 / -1;
    margin-right: calc(-1 * var(--margin) - var(--bleed));
  }

  .rows__head {
    grid-column: 1 / span 6;
  }

  .rows__text {
    grid-column: 7 / -1;
    padding-left: clamp(24px, 2.361vw, 45.33px);
  }

  /* below 992 the date takes its own row and the facts stack: three columns of a tablet's width
     would make each fact a narrow column of a dozen lines */
  .incident__date {
    grid-column: 1 / span 3;
  }

  .incident__body {
    grid-column: 4 / -1;
  }

  .incident__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lcards {
    column-gap: clamp(16px, 5.556vw, 106.67px);
  }

  .foot__brand {
    grid-column: 1 / span 4;
  }

  .foot__groups {
    grid-column: 5 / -1;
  }
}