/* =========================================================================
   FergusonMediaGroup.com
   =========================================================================

   DESIGN POSITION
   ---------------
   The domain industry's websites have a reputation: dated, loud, heavy on
   gradients and stock photography of people looking pleased near laptops. The
   correction is not to swing to the current startup idiom, which dates just as
   fast — it is to build something typographic, quiet and confident that will
   still look reasonable in five years.

   So: warm paper, near-black ink, one accent colour, real hierarchy, generous
   whitespace, and rules instead of boxes wherever a rule will do. No gradients,
   no glass, no floating blobs, no drop shadows doing the work that spacing
   should do. The only motion on the site is a hover transition and one short
   entrance on the homepage diagram, both of which stop entirely under
   prefers-reduced-motion.

   TYPE
   ----
   No web fonts. A serif for headings and a system sans for body text, both from
   stacks already present on the reader's machine. That is one fewer render-
   blocking request, no layout shift when a font swaps in, no third-party host
   receiving the visitor's IP address, and no cookie policy paragraph explaining
   why a font provider is involved. The trade is less control over the exact
   letterforms, which for a site whose argument is "substance over fashion" is a
   trade worth making.

   COLOUR AND THEME
   ----------------
   Every colour is a token defined on :root in the light palette. The dark
   palette redefines the same tokens inside a prefers-color-scheme block. No
   colour is defined only inside a media query, so nothing loses its value if the
   query never matches.

   Contrast has been chosen to clear WCAG 2.2 AA (4.5:1 for body text, 3:1 for
   large text and interface borders) in both themes. The accent is deliberately
   dark in the light theme and light in the dark one, because an accent that
   works in only one of them is an accessibility bug that only half the audience
   sees.
   ========================================================================= */

:root {
  /* Palette — light */
  --paper: #faf8f4;
  --paper-alt: #f3efe8;
  --surface: #ffffff;
  --ink: #16181c;
  --ink-soft: #43474e;
  --ink-mute: #676c74;
  --rule: #e0dacf;
  --rule-strong: #cdc5b6;
  /* The visible boundary of a form control, kept separate from --rule-strong.
     WCAG 2.2 SC 1.4.11 wants 3:1 for the border that identifies an input, and
     the decorative rules used everywhere else sit at about 1.6:1 — correct for
     a hairline between paragraphs, and not nearly enough for the only thing
     telling someone where a text field begins. #8a8375 gives 3.76:1 on the
     field background and 3.55:1 on the page. */
  --field-border: #8a8375;
  --accent: #0f5257;
  --accent-hover: #0a3a3e;
  --accent-wash: #e7f0ef;
  --brass: #9a7238;
  --focus: #0f5257;

  /* Type */
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, ui-serif, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale. Clamped so the largest heading is readable on a phone and
     does not become a billboard on a 32-inch monitor. */
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.1rem);
  --step-1: clamp(1.19rem, 1.12rem + 0.34vw, 1.4rem);
  --step-2: clamp(1.42rem, 1.3rem + 0.58vw, 1.78rem);
  --step-3: clamp(1.69rem, 1.5rem + 0.94vw, 2.27rem);
  --step-4: clamp(2.01rem, 1.72rem + 1.45vw, 2.89rem);
  --step-5: clamp(2.39rem, 1.95rem + 2.19vw, 3.68rem);

  /* Space */
  --gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --band: clamp(2.75rem, 2rem + 3.5vw, 5rem);
  --wrap: 74rem;
  --measure: 38rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161a;
    --paper-alt: #1a1d22;
    --surface: #1c1f25;
    --ink: #eceae6;
    --ink-soft: #c2c6cc;
    --ink-mute: #9aa0a8;
    --rule: #2b2f36;
    --rule-strong: #3d434c;
    --field-border: #7c828c;   /* 4.27:1 on the field, 4.68:1 on the page */
    --accent: #6fc3bb;
    --accent-hover: #97d6d0;
    --accent-wash: #17282c;
    --brass: #c9a163;
    --focus: #6fc3bb;
  }
}

/* ------------------------------------------------------------------ reset */

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  /* Prevents a long unbroken URL or domain name from forcing a horizontal
     scrollbar on a narrow phone, which on a site that discusses domain names
     constantly is not a theoretical risk. */
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.011em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); margin-top: 2.2em; }
h3 { font-size: var(--step-1); margin-top: 1.8em; }
h4 { font-size: var(--step-0); margin-top: 1.6em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:hover { color: var(--accent-hover); }

strong { font-weight: 650; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  color: #fff;
}

.muted { color: var(--ink-mute); }

/* ----------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);
}

.band { padding-block: var(--band); }
.band--tint { background: var(--paper-alt); }
.band--tight { padding-block: calc(var(--band) * 0.6); }
.band + .band--tint,
.band--tint + .band { border-top: 1px solid var(--rule); }

/* A single-column reading measure. Body text is never full-bleed: a 74rem line
   of prose is unreadable and no amount of good typography fixes it. */
.prose { max-width: var(--measure); }
.prose--wide { max-width: 46rem; }

/* --------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 4.25rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-right: auto;
  padding-block: 0.6rem;
}
.brand:hover { color: var(--ink); }
.brand:hover .brand__thin { color: var(--accent); }

/* The mark: a small square with a corner cut away, echoing the address-bar
   motif without being a logo we were not given. */
.brand__mark {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}
.brand__text { font-weight: 600; }
.brand__thin { font-weight: 400; color: var(--ink-soft); transition: color 0.15s; }

.navbutton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--field-border);
  border-radius: 3px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  min-height: 44px;
}
.navbutton__bars {
  width: 1rem; height: 2px;
  background: currentColor;
  position: relative;
}
.navbutton__bars::before,
.navbutton__bars::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
}
.navbutton__bars::before { top: -5px; }
.navbutton__bars::after { top: 5px; }
.navbutton[aria-expanded='true'] { background: var(--accent-wash); }

/* -------------------------------------------------------------------- nav */

.nav {
  display: none;
  width: 100%;
  padding-bottom: 0.75rem;
}
.nav.is-open { display: block; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item > a,
.nav__parent > a {
  display: block;
  padding: 0.7rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav__item > a:hover,
.nav__parent > a:hover { color: var(--accent); }
.nav__item [aria-current='page'] { color: var(--accent); }

.nav__parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.nav__toggle {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav__toggle:hover { border-color: var(--rule-strong); }
.nav__chev {
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.nav__toggle[aria-expanded='true'] .nav__chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.nav__menu {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0 0 0.25rem 0.9rem;
  border-left: 2px solid var(--rule);
  display: none;
}
.nav__menu.is-open { display: block; }
.nav__menu a {
  display: block;
  /* Tuned so the whole row clears 44px on a phone. SC 2.5.8 only asks for
     24×24, but a submenu of eight items at the small type size is exactly where
     a thumb misses, and the eight capability pages are the main thing anyone
     is navigating to. */
  padding: 0.75rem 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
}
.nav__menu a:hover { color: var(--accent); }
.nav__menu [aria-current='page'] { color: var(--accent); font-weight: 600; }

.nav__item--cta > a { color: var(--accent); }

@media (min-width: 62rem) {
  .navbutton { display: none; }

  .nav {
    display: block;
    width: auto;
    padding-bottom: 0;
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 0.2rem + 1.1vw, 1.6rem);
  }
  .nav__item { position: relative; }
  .nav__item > a,
  .nav__parent > a { padding: 1.35rem 0; }

  .nav__parent { gap: 0.25rem; }
  .nav__toggle {
    min-width: 1.75rem;
    min-height: 1.75rem;
  }

  /* The submenu opens on hover, on focus within, and on the toggle button.
     Hover alone strands keyboard users; the button alone makes a mouse user
     click twice. Both, with the parent still a real link, covers everyone. */
  .nav__menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 15.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0.4rem 0;
    margin: 0;
    box-shadow: 0 12px 28px -18px rgb(0 0 0 / 0.45);
    z-index: 60;
  }
  .nav__item--has-menu:hover > .nav__menu,
  .nav__item--has-menu:focus-within > .nav__menu,
  .nav__menu.is-open { display: block; }
  .nav__menu a { padding: 0.5rem 1.1rem; }
  .nav__menu a:hover { background: var(--accent-wash); }

  .nav__item--cta > a {
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 0.55rem 1rem;
    color: var(--accent);
  }
  .nav__item--cta > a:hover {
    background: var(--accent);
    color: var(--paper);
  }
}

/* ------------------------------------------------------------ breadcrumbs */

.crumbs { padding-top: 1.25rem; }
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.crumbs li + li::before {
  content: '/';
  margin-right: 0.6rem;
  color: var(--rule-strong);
}
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--accent); }

/* -------------------------------------------------------------- page head */

/* The page head carries both .wrap and .pagehead, and the fix here is to stop
   it carrying two competing max-widths.
   A narrower max-width on an element that also has .wrap's margin-inline:auto
   does not just constrain it — it re-centres it inside the 74rem column, which
   pushed the h1 about 170px right of the breadcrumbs and of the paragraph it
   introduces. Setting margin-inline:0 instead is the obvious fix and is also
   wrong: it cancels the centring of the column itself, so the head slides left
   of everything else on a wide screen.
   So .pagehead keeps .wrap's geometry untouched, and the measure is applied to
   the children that actually need it. */
.pagehead {
  padding-top: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  padding-bottom: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}
.pagehead h1 { max-width: 15em; }
.pagehead__eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-mute);
  margin-bottom: 0.9rem;
}
.pagehead h1 { margin-bottom: 0.5em; }
.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34em;
}
.pagehead__meta {
  font-size: var(--step--1);
  color: var(--ink-mute);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------- content elements */

.definition {
  font-size: var(--step-1);
  line-height: 1.55;
  border-left: 3px solid var(--accent);
  padding-left: clamp(0.9rem, 0.5rem + 1vw, 1.4rem);
  margin-bottom: 2rem;
  max-width: 40rem;
}

.facts {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(1.15rem, 0.8rem + 1.4vw, 1.9rem);
  margin: 2rem 0 2.5rem;
  max-width: 46rem;
}
.facts__heading {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-mute);
  margin: 0 0 0.9rem;
}
.facts ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.facts li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--ink-soft);
}
.facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

.bullets {
  padding-left: 1.15rem;
  margin: 0 0 1.4em;
}
.bullets li { margin-bottom: 0.55em; }
.bullets li::marker { color: var(--rule-strong); }

.callout {
  border-left: 3px solid var(--brass);
  background: var(--paper-alt);
  padding: 1rem 1.15rem;
  margin: 1.8rem 0;
  font-size: calc(var(--step-0) * 0.97);
}
.callout--important { border-left-color: var(--brass); }
.callout--note { border-left-color: var(--rule-strong); }

.criteria {
  margin: 1.6rem 0 2rem;
  display: grid;
  gap: 0;
}
.criteria__item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.criteria__item:last-child { border-bottom: 1px solid var(--rule); }
.criteria dt {
  font-family: var(--serif);
  font-size: var(--step-1);
  margin-bottom: 0.3rem;
}
.criteria dd {
  margin: 0;
  color: var(--ink-soft);
  max-width: var(--measure);
}

@media (min-width: 48rem) {
  .criteria__item {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) 1fr;
    gap: clamp(1rem, 0.3rem + 2vw, 2.5rem);
    align-items: start;
  }
  .criteria dt { margin-bottom: 0; }
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 1.6rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 0;
}
.steps__item {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 1.1rem 0 1.1rem 3.1rem;
  position: relative;
  max-width: 46rem;
}
.steps__item:last-child { border-bottom: 1px solid var(--rule); }
.steps__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.steps__title {
  font-size: var(--step-0);
  font-family: var(--sans);
  font-weight: 650;
  margin: 0 0 0.3rem;
}
.steps__item p { color: var(--ink-soft); margin: 0; }

.table-wrap {
  overflow-x: auto;
  margin: 1.6rem 0 2rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: calc(var(--step-0) * 0.94);
  background: var(--surface);
}
caption {
  text-align: left;
  padding: 0.9rem 1rem;
  color: var(--ink-mute);
  font-size: var(--step--1);
  border-bottom: 1px solid var(--rule);
}
th, td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-mute);
  white-space: nowrap;
}
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 650; }

/* ---------------------------------------------------------------- Q and A */

.qa {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--ink);
  max-width: 46rem;
}
.qa__heading {
  font-size: var(--step-2);
  margin-top: 0;
}
.qa__item { padding-bottom: 1.5rem; }
.qa__item + .qa__item {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
.qa__item h3 {
  font-size: var(--step-1);
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.qa__answer { color: var(--ink); }
.qa__item p + p { color: var(--ink-soft); }

/* ------------------------------------------------------------------ cards */

.cards {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 40rem) {
  .cards--2, .cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 58rem) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72rem) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface);
  padding: clamp(1.15rem, 0.8rem + 1.2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card__eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin: 0;
}
.card__title {
  font-size: var(--step-1);
  margin: 0;
}
.card__title a {
  color: var(--ink);
  text-decoration: none;
}
.card__title a:hover {
  color: var(--accent);
  text-decoration: underline;
}
/* The whole card is a target on a phone without nesting anything inside the
   link, which would break the heading semantics. */
.card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.card { position: relative; }
.card__body {
  color: var(--ink-soft);
  font-size: calc(var(--step-0) * 0.97);
  margin: 0;
}

.links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.1rem;
}
.links li { border-top: 1px solid var(--rule); }
.links li:last-child { border-bottom: 1px solid var(--rule); }
.links a {
  display: block;
  padding: 0.8rem 0;
  color: var(--ink);
  text-decoration: none;
}
.links a:hover { color: var(--accent); }

/* -------------------------------------------------------------- buttons */

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  padding: 0.85rem 1.5rem;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  font-size: calc(var(--step-0) * 0.97);
  border: 1px solid var(--accent);
  transition: background-color 0.15s ease, color 0.15s ease;
  min-height: 44px;
}
.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--paper);
}
.button--quiet {
  background: none;
  color: var(--accent);
  border-color: var(--field-border);
}
.button--quiet:hover {
  background: var(--accent-wash);
  color: var(--accent-hover);
  border-color: var(--accent);
}

/* ------------------------------------------------------------------- CTA */

.cta {
  margin-top: 3.5rem;
  border-top: 2px solid var(--ink);
  padding-top: 2rem;
}
.cta__inner { max-width: 44rem; }
.cta__heading {
  font-size: var(--step-2);
  margin-top: 0;
  margin-bottom: 0.4em;
}
.cta__body { color: var(--ink-soft); }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.related { margin-top: 3.5rem; }
.related h2 {
  font-size: var(--step--1);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-mute);
  margin-top: 0;
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------- homepage */

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
}
.hero__inner { max-width: 46rem; }
.hero h1 {
  font-size: var(--step-5);
  margin-bottom: 0.45em;
}
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 33em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero__note {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-mute);
  max-width: 38rem;
}

/* The address-bar motif. Decorative, aria-hidden, and the only ornament on
   the site — one visual reference to what the business is about. */
.motif {
  display: none;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 5px;
  padding: 0.55rem 0.7rem;
  max-width: 26rem;
  margin-bottom: 2rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--ink-mute);
}
@media (min-width: 40rem) { .motif { display: flex; } }
.motif__chrome { display: inline-flex; gap: 0.3rem; }
.motif__chrome span {
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: var(--rule-strong);
}
.motif__bar {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--paper-alt);
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
}
.motif__lock {
  width: 0.5rem; height: 0.42rem;
  background: var(--brass);
  border-radius: 1px;
  position: relative;
  flex: none;
}
.motif__lock::before {
  content: '';
  position: absolute;
  left: 0.1rem; top: -0.22rem;
  width: 0.3rem; height: 0.28rem;
  border: 1.5px solid var(--brass);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}
.motif__url { color: var(--ink-soft); }

/* The lifecycle diagram. */
.dia { margin: 0; }
.dia svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.dia__rule {
  stroke: var(--rule-strong);
  stroke-width: 1;
}
.dia__node circle {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 2;
}
.dia__node:last-of-type circle { fill: var(--accent); }
.dia__label {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 650;
}
.dia__note {
  fill: var(--ink-mute);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dia figcaption {
  margin-top: 1.5rem;
  color: var(--ink-mute);
  font-size: var(--step--1);
  max-width: 44rem;
}

/* One short entrance, staggered along the sequence — the diagram's meaning is
   the order, so revealing it in order is the one place motion earns its place.
   Removed entirely under prefers-reduced-motion by the global rule above, and
   the nodes are visible by default so nothing depends on the animation running. */
@media (prefers-reduced-motion: no-preference) {
  .dia__node {
    opacity: 0;
    animation: dia-in 0.5s ease forwards;
    animation-delay: calc(var(--i) * 0.11s);
  }
}
@keyframes dia-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.stack {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.split {
  display: grid;
  gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
}
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.split__head h2 { margin-top: 0; }
.split__head p { color: var(--ink-soft); }

.section-label {
  font-size: var(--step--1);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-mute);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------- article */

.article { max-width: var(--measure); }
.article h2 { font-size: var(--step-2); }
.article h3 { font-size: var(--step-1); }
.article__meta {
  font-size: var(--step--1);
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.standfirst {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.article__answer {
  border-left: 3px solid var(--accent);
  padding-left: clamp(0.9rem, 0.5rem + 1vw, 1.4rem);
  font-size: var(--step-1);
  line-height: 1.55;
  margin-bottom: 2.25rem;
}
.byline {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-mute);
  font-size: var(--step--1);
}

/* ------------------------------------------------------------------ form */

.form {
  display: grid;
  gap: 1.15rem;
  max-width: 40rem;
  margin-top: 2rem;
}
@media (min-width: 44rem) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__row--full { grid-column: 1 / -1; }
}
.form__row { display: grid; gap: 0.4rem; }

label {
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.02em;
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
select,
textarea {
  font: inherit;
  font-size: var(--step-0);
  width: 100%;
  padding: 0.7rem 0.8rem;
  min-height: 44px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: 3px;
}
textarea { resize: vertical; min-height: 8rem; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--accent);
}
::placeholder { color: var(--ink-mute); opacity: 1; }

.hint {
  font-size: var(--step--1);
  color: var(--ink-mute);
  margin: 0;
}

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: calc(var(--step-0) * 0.95);
  line-height: 1.5;
}
.check input {
  margin-top: 0.28rem;
  width: 1.1rem; height: 1.1rem;
  flex: none;
  accent-color: var(--accent);
}

.form__actions {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}
.form button[type='submit'] {
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.85rem 1.6rem;
  min-height: 48px;
  cursor: pointer;
}
.form button[type='submit']:hover { background: var(--accent-hover); }

/* Honeypot. Removed from view, from the tab order and from assistive
   technology — a field a real person can never reach, which is the whole
   premise of the check. Not `display:none`, because some bots skip those. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-error {
  border-left: 3px solid #b3261e;
  background: var(--paper-alt);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0 0;
  max-width: 40rem;
}
@media (prefers-color-scheme: dark) {
  .form-error { border-left-color: #f2b8b5; }
}

/* ---------------------------------------------------------------- footer */

.footer {
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  border-top: 1px solid var(--rule);
  background: var(--paper-alt);
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 1.5rem;
  font-size: calc(var(--step-0) * 0.95);
}
.footer__inner {
  display: grid;
  gap: 2rem;
}
@media (min-width: 52rem) {
  .footer__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}
.footer__name {
  font-family: var(--serif);
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}
.footer__positioning {
  color: var(--ink-soft);
  max-width: 34em;
}
.footer__contact a { font-weight: 600; }
.footer__heading {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-mute);
  margin: 0 0 0.9rem;
}
.footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* The gap is small and the padding does the spacing, so each link is a ~32px
     target rather than an 18px line of text with air around it. Same rhythm on
     the page, considerably easier to hit with a thumb. */
  gap: 0.1rem;
}
.footer__nav a {
  display: block;
  padding: 0.4rem 0;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer__nav a:hover { color: var(--accent); text-decoration: underline; }

.footer__base {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-mute);
  font-size: var(--step--1);
  display: grid;
  gap: 0.4rem;
}
.footer__base p { margin: 0; }
.footer__note { color: var(--ink-mute); }

/* ------------------------------------------------------------------- 404 */

.notfound { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.notfound__code {
  font-family: var(--mono);
  color: var(--ink-mute);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------- utilities */

.print-only { display: none; }

@media print {
  .masthead, .nav, .cta, .related, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { text-decoration: underline; }
  .wrap { max-width: none; }
}