/* ==========================================================================
   site.css
   Static editorial shell in the mcr.city look.
   Built 2026-08-27. Self contained. No CDN, no build step, no imports.

   Tokens extracted from the live theme
   (mcrcity-theme-v9-fixed/assets/css/style.css :root at line 659 and 13115).
   Written fresh, not copied. Nothing here is taken byte for byte from the
   1.19 MB live stylesheet.

   CONTRAST NOTE
   Every text token was measured against every surface token it can land on.
   Worst case in the whole file is --tx-dim on --surface-3 at 4.62:1, which
   still clears the 4.5:1 bar. Measured ratios on --bg #0C0C0E:
     --tx      17.48    --tx-3     7.81    --link        8.19
     --tx-2    11.60    --tx-dim   6.00    --link-hover 11.01
   The live site's .ft-bottom uses rgba(255,255,255,.3) on near black, which
   measures 2.39:1 and fails. That is the bug this file exists to not repeat.
   Do not add a text colour dimmer than --tx-dim, and do not put text on a
   surface lighter than --surface-3 without re-measuring.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   Reskin the whole site by editing this block only.
   ========================================================================== */

:root {
  /* --- Brand, from the mcr.city logo palette --- */
  --brand-red: #E8201A;
  --brand-blue: #1A56FF;
  --brand-yellow: #F5C400;
  --brand-green: #2DB54B;
  --brand-orange: #FF6B00;
  --brand-violet: #7C3AED;

  /* --- Brand, lightened for use as TEXT on dark surfaces ---
     The raw brand colours are too dark for body text on near black.
     --brand-red is 4.3:1 and --brand-blue is 3.6:1, both below the bar.
     These lifted variants clear 7:1. Use the raw ones for fills and rules,
     these for anything a reader has to read. */
  --link: #7FA6FF;
  --link-hover: #A8C2FF;
  --hot: #FF8A7E;

  /* --- Solid fills that carry white text ---
     White on --brand-red is 4.51:1, technically a pass but with no margin.
     --fill-red is a shade down and measures 5.09:1, so buttons and badges
     have room. White on --brand-green is only 2.7:1, so green and yellow
     fills carry --fill-ink instead of white. */
  --fill-red: #D91C16;
  --fill-blue: var(--brand-blue);
  --fill-ink: #0C0C0E;

  /* --- Surfaces, near black through to card --- */
  --bg: #0C0C0E;
  --bg-2: #111114;
  --surface: #18181C;
  --surface-2: #1F1F24;
  --surface-3: #26262C;
  --bar: #000000;

  /* --- Hairlines --- */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.20);

  /* --- Text --- */
  --tx: #F2F2F4;        /* 17.48:1 on --bg */
  --tx-2: #C7C7CC;      /* 11.60:1 on --bg, default body ink */
  --tx-3: #A0A4AB;      /*  7.81:1 on --bg */
  --tx-dim: #8A8F96;    /*  6.00:1 on --bg, the floor for any text */

  /* --- Radii --- */
  --r: 6px;
  --r-l: 10px;
  --r-x: 14px;
  --r-pill: 999px;

  /* --- Layout --- */
  --bar-h: 56px;
  --rail-w: 240px;
  --page-max: 1280px;
  --read-max: 68ch;
  --gut: 16px;

  /* --- Type --- */
  --sans: Inter, "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

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

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tx-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

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

::selection {
  background: var(--brand-red);
  color: #fff;
}

@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;
  }
}

/* ==========================================================================
   3. SKIP LINK
   ========================================================================== */

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

.skip:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 1000;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 12px 20px;
  background: var(--fill-red);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r-l);
  outline: none;
}

/* ==========================================================================
   4. TOP BAR
   Fixed, black, centred wordmark. Three column grid so the wordmark stays
   optically centred whatever sits either side of it.
   ========================================================================== */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--bar-h);
  background: var(--bar);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  opacity: 0.7;
  background: linear-gradient(
    90deg,
    var(--brand-red) 0%,
    var(--brand-orange) 20%,
    var(--brand-yellow) 38%,
    var(--brand-green) 55%,
    var(--brand-blue) 75%,
    var(--brand-violet) 100%
  );
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

/* Wordmark: heavy, tight, red full stop. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--tx);
  white-space: nowrap;
  padding: 4px 2px;
}

.wordmark:hover {
  color: var(--tx);
}

.wordmark-bee {
  display: block;
  width: 26px;
  height: 26px;
}

.wordmark-a {
  font-size: 1.15rem;
  color: #fff;
}

.wordmark-dot {
  font-size: 1.15rem;
  color: var(--brand-red);
  margin: 0 1px;
}

.wordmark-b {
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: -0.04em;
}

/* Small text label sitting beside the wordmark, for the section name. */
.topbar-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-dim);
  border-left: 1px solid var(--line-2);
  padding-left: 10px;
  margin-left: 10px;
  white-space: nowrap;
}

/* Action button in the bar. Square when it holds one glyph, and it grows to
   fit a word, so a text label is never clipped. */
.bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-l);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid transparent;
  color: var(--tx-2);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.bar-btn:hover,
.bar-btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

@media (max-width: 599px) {
  .topbar-tag {
    display: none;
  }
}

/* ==========================================================================
   5. SHELL LAYOUT
   Single column on phones. Left rail plus content from 1024 up.
   ========================================================================== */

.shell {
  padding-top: var(--bar-h);
  min-height: 100vh;
  display: block;
}

.rail {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* Phone and tablet: the rail becomes a horizontal scrolling chip strip.
   No JS, no drawer, nothing to break as plain files. */
.rail-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px var(--gut);
  scrollbar-width: none;
}

.rail-nav::-webkit-scrollbar {
  display: none;
}

.rail-label {
  display: none;
}

.rail-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--tx-2);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.rail-item:hover {
  background: var(--surface-2);
  color: var(--tx);
  border-color: var(--line-2);
}

.rail-item.on {
  background: var(--surface-2);
  color: #fff;
  border-color: var(--line-3);
}

.rail-item.on::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-red);
  flex: 0 0 auto;
}

.main {
  padding: 28px var(--gut) 48px;
}

/* Centre the content column and cap it. */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    align-items: start;
  }

  .rail {
    position: sticky;
    top: var(--bar-h);
    height: calc(100vh - var(--bar-h));
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    padding: 16px 0 32px;
    scrollbar-width: none;
  }

  .rail::-webkit-scrollbar {
    display: none;
  }

  .rail-nav {
    display: block;
    overflow: visible;
    padding: 0 12px;
  }

  .rail-label {
    display: block;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tx-dim);
    padding: 0 10px;
    margin: 18px 0 6px;
  }

  .rail-label:first-child {
    margin-top: 0;
  }

  .rail-item {
    display: flex;
    width: 100%;
    padding: 8px 11px;
    margin-bottom: 2px;
    border-radius: var(--r-l);
    border-color: transparent;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 500;
  }

  .rail-item:hover {
    background: var(--surface);
    border-color: transparent;
  }

  .rail-item.on {
    background: var(--surface);
    border-color: var(--line);
  }

  .main {
    padding: 36px 40px 64px;
  }
}

@media (min-width: 1280px) {
  .main {
    padding: 44px 56px 72px;
  }
}

/* ==========================================================================
   6. TYPOGRAPHY
   Heavy, tight headings. Comfortable body.
   ========================================================================== */

h1,
h2,
h3,
h4 {
  color: var(--tx);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 5.2vw, 3rem);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
}

h3 {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  font-weight: 800;
}

h4 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

p {
  color: var(--tx-2);
}

strong,
b {
  color: var(--tx);
  font-weight: 700;
}

small {
  font-size: 0.8rem;
}

code,
kbd,
samp {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1px 5px;
  color: var(--tx);
}

/* Eyebrow: the small uppercase kicker above a heading. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-dim);
  margin-bottom: 10px;
}

.eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--brand-red);
  flex: 0 0 auto;
}

/* Standfirst: the intro paragraph under an h1. */
.standfirst {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--tx-2);
  max-width: var(--read-max);
  margin-top: 14px;
}

/* Byline and date row. */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 0.75rem;
  color: var(--tx-3);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.meta-sep {
  color: var(--tx-dim);
}

/* Page header block. */
.page-head {
  max-width: var(--read-max);
  margin-bottom: 32px;
}

/* ==========================================================================
   7. ARTICLE BODY
   Everything inside .prose gets readable defaults so page authors can write
   plain HTML with no classes on individual paragraphs.
   ========================================================================== */

.prose {
  max-width: var(--read-max);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--tx-2);
}

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

.prose h2 {
  margin-top: 2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}

.prose h3 {
  margin-top: 1.7em;
}

.prose h2 + p,
.prose h3 + p,
.prose h4 + p {
  margin-top: 0.7em;
}

.prose a {
  color: var(--link);
  border-bottom: 1px solid rgba(127, 166, 255, 0.35);
}

.prose a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul li {
  list-style: none;
  position: relative;
  padding-left: 2px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: -1em;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-red);
}

.prose ol {
  list-style: decimal;
}

.prose ol li::marker {
  color: var(--tx-dim);
  font-weight: 700;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose blockquote {
  border-left: 3px solid var(--brand-red);
  padding: 2px 0 2px 18px;
  color: var(--tx-2);
  font-size: 1.1rem;
  line-height: 1.6;
}

.prose blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--tx-3);
}

.prose figure {
  margin: 1.6em 0;
}

.prose figcaption {
  font-size: 0.78rem;
  color: var(--tx-3);
  margin-top: 8px;
}

.prose pre {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-x);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tx-2);
}

.prose pre code {
  background: none;
  border: 0;
  padding: 0;
}

/* ==========================================================================
   8. CARD SURFACES
   ========================================================================== */

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-x);
  padding: 18px;
  color: var(--tx-2);
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
    transform 0.16s var(--ease);
}

a.card:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--tx-2);
  transform: translateY(-2px);
}

.card-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--tx);
  margin-bottom: 6px;
}

a.card:hover .card-title {
  color: #fff;
}

.card-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--tx-3);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tx-dim);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Card grid. One column at 375, two from 640, three from 1024. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

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

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

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

/* Section header above a grid. */
.section {
  margin-top: 44px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.section-head h2 {
  margin: 0;
  padding: 0;
  border: 0;
}

.section-link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--link);
}

/* ==========================================================================
   9. SMALL PARTS
   ========================================================================== */

/* Pill badge. Solid fill, white text, so it stays legible at small sizes. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--fill-red);
  padding: 3px 9px;
  border-radius: var(--r);
  line-height: 1.4;
}

.badge-blue {
  background: var(--fill-blue);
  color: #fff;
}

.badge-green {
  background: var(--brand-green);
  color: var(--fill-ink);
}

.badge-yellow {
  background: var(--brand-yellow);
  color: var(--fill-ink);
}

.badge-quiet {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--tx-2);
}

/* Note box, for a correction, a caveat or a sourcing statement. */
.note {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-yellow);
  border-radius: var(--r-l);
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tx-2);
}

.note-title {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 6px;
}

/* Key facts list, label plus value. */
.facts {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-x);
  overflow: hidden;
}

.facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: space-between;
  padding: 11px 16px;
  font-size: 0.88rem;
}

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

.facts dt {
  color: var(--tx-3);
  font-weight: 500;
}

.facts dd {
  color: var(--tx);
  font-weight: 700;
  text-align: right;
}

/* Text button. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-l);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--tx);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.btn:hover {
  background: var(--surface-3);
  border-color: var(--line-3);
  color: #fff;
}

.btn-red {
  background: var(--fill-red);
  border-color: var(--fill-red);
  color: #fff;
}

.btn-red:hover {
  background: #c4130e;
  border-color: #c4130e;
  color: #fff;
}

/* Source list under an article. */
.sources {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  max-width: var(--read-max);
}

.sources h2 {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.sources li {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--tx-3);
  padding-left: 16px;
  position: relative;
}

.sources li + li {
  margin-top: 8px;
}

.sources li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-3);
}

.sources a {
  word-break: break-word;
}

/* Wide content that must not push the page sideways. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   10. FOOTER
   The live site sets .ft-bottom text to rgba(255,255,255,.3) on near black,
   which measures 2.39:1 and fails. Every string down here uses --tx-3, at
   7.81:1 on --bg. Do not dim the footer.
   ========================================================================== */

.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  margin-top: 64px;
}

.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px var(--gut) 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.footer-brand .wordmark {
  margin-bottom: 10px;
}

.footer-desc {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--tx-3);
  max-width: 34ch;
}

.footer-col h2 {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.footer-col li + li {
  margin-top: 8px;
}

.footer-col a {
  font-size: 0.85rem;
  color: var(--tx-3);
  transition: color 0.14s var(--ease);
}

.footer-col a:hover {
  color: #fff;
}

.footer-legal {
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.footer-legal-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--tx-3);
}

.footer-legal-inner a {
  color: var(--tx-3);
}

.footer-legal-inner a:hover {
  color: #fff;
}

/* The unofficial and not affiliated line. Readable, not buried. */
.unofficial {
  color: var(--tx-3);
  max-width: 70ch;
}

@media (min-width: 640px) {
  .footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .footer-inner {
    padding: 44px 40px 32px;
  }

  .footer-legal-inner {
    padding: 16px 40px;
  }
}

@media (min-width: 1280px) {
  .footer-inner {
    padding: 48px 56px 36px;
  }

  .footer-legal-inner {
    padding: 18px 56px;
  }
}

/* ==========================================================================
   11. UTILITIES
   ========================================================================== */

.narrow {
  max-width: var(--read-max);
}

.stack > * + * {
  margin-top: 14px;
}

.stack-lg > * + * {
  margin-top: 28px;
}

.center {
  text-align: center;
}

.dim {
  color: var(--tx-3);
}

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

/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
  .topbar,
  .rail,
  .skip {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .shell {
    padding-top: 0;
    display: block;
  }

  .main {
    padding: 0;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li {
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    word-break: break-all;
  }
}