/* =========================================================================
   Wyre News homepage
   Palette: red / black / white. Modern newspaper.
   ========================================================================= */

:root {
  /* This design is light-only. Saying so stops Chrome and Android auto-dark
     from inverting it, which they do unevenly: explicitly-set backgrounds
     survive while inherited text colours flip, and headlines end up white on
     a white card. A real dark mode would be a deliberate second palette, not
     an automatic inversion of this one. */
  color-scheme: only light;

  /* ink & paper */
  --paper:       #ffffff;
  --paper-warm:  #f7f5f2;
  --paper-deep:  #efece7;
  --ink:         #0c0c0c;
  --ink-soft:    #1c1c1c;
  --ink-muted:   #6a6a6a;
  --rule:        #d9d5cf;
  --rule-strong: #0c0c0c;

  /* brand red, sampled from the mark */
  --red:         #e10600;
  --red-deep:    #a60400;
  --red-bright:  #ff2f26;   /* legible on black */

  /* Type. Newsreader is a variable serif drawn for reading news on screen,
     with real italics and optical sizing, so it carries both the headlines
     and the body copy. Libre Franklin stays for the letterspaced caps only
     (nav, kickers, tags, buttons): that sans-against-serif contrast is what
     makes the labels read as furniture rather than as text.
     Newsreader tops out at 800, so nothing here asks for 900. */
  --display: "Newsreader", "Times New Roman", Times, serif;
  --serif:   "Newsreader", "Times New Roman", Times, serif;
  --sans:    "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* metrics */
  --wrap:    1240px;
  --gutter:  clamp(18px, 4vw, 40px);
}

/* ------------------------------------------------------------------ base */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.06; letter-spacing: -0.015em; }

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-deep);
  padding: 0.1em 0.4em;
  border-radius: 2px;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* shared: small caps label */
.kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--ink-muted);
}
.kicker--red { color: var(--red); }

/* --------------------------------------------------------- paywall stamp */

/* Marks a link that dead-ends at a subscription wall. Wyre sends readers to
   publishers, so that is worth saying BEFORE the click. Drawn as a rubber
   stamp - double rule, letterspaced caps, a few degrees off square - so it
   reads as something pressed onto the page rather than as part of the
   headline beside it.

   The second rule is an OUTLINE, not an inset shadow, so the gap between the
   rules shows whatever is actually behind the stamp. That is what lets one
   rule serve white cards, the black wire and both of their hover states
   without a background colour per context. */
.stamp {
  display: inline-block;
  vertical-align: middle;
  padding: 3px 6px 2px;
  border: 1.5px solid var(--red);
  outline: 1px solid var(--red);
  outline-offset: 1.5px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.18em;
  text-indent: 0.18em;   /* re-centres the word against its own trailing letterspace */
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
  transform: rotate(-4deg);
}

/* On the black wire the deep red goes muddy; --red-bright is the palette's
   answer for exactly this (see :root). */
.wire .stamp {
  border-color: var(--red-bright);
  outline-color: var(--red-bright);
  color: var(--red-bright);
}

/* Inline after the headline text, so it needs its own space; in the flex meta
   rows on a desk page the row gap already provides it. */
.wire__title .stamp { margin-inline-start: 10px; }


/* Furniture stays on the sans. Body copy now defaults to the serif, so every
   letterspaced-caps label, nav item and button has to opt out explicitly
   rather than inherit it from body as it did before. */
.topbar__inner,
.masthead__tagline,
.nav__list a,
.nav__cta,
.btn,
.panel__head,
.stat dt,
.section-head__sub,
.tags li,
.desk__go,
.wire__desk,
.wire__source,
.wire__empty-links a,
.footer__col h2,
.footer__col a,
.footer__base {
  font-family: var(--sans);
}

/* --------------------------------------------------------------- topbar */

.topbar {
  background: var(--ink);
  color: #efefef;
  border-bottom: 3px solid var(--red);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.topbar__mid {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #fff;
}

.topbar__status { display: inline-flex; align-items: center; gap: 9px; color: #bdbdbd; }

.pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 0 0 rgba(255, 47, 38, 0.65);
  animation: pip 2.4s ease-out infinite;
}
@keyframes pip {
  0%   { box-shadow: 0 0 0 0 rgba(255, 47, 38, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 47, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 47, 38, 0); }
}

@media (max-width: 780px) {
  .topbar__mid { display: none; }
  .topbar__inner { justify-content: space-between; letter-spacing: 0.1em; }
}
@media (max-width: 460px) {
  .topbar__status span { display: none; }
}

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

.masthead {
  padding: clamp(26px, 4vw, 46px) 0 clamp(18px, 2.4vw, 26px);
  background: var(--paper);
  text-align: center;
}

.masthead__rule--top {
  height: 0;
  border-top: 1px solid var(--rule);
  margin-bottom: clamp(22px, 3.2vw, 38px);
}

.masthead__logo {
  display: block;
  text-decoration: none;
}
.masthead__logo img {
  width: clamp(230px, 42vw, 430px);
  height: auto;
  margin-inline: auto;
}

.masthead__rule--bottom {
  margin-top: clamp(20px, 3vw, 34px);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 5px;
  position: relative;
}
/* red tick centred on the heavy rule */
.masthead__rule--bottom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 86px;
  height: 4px;
  background: var(--red);
  transform: translateX(-50%);
}

.masthead__tagline {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid #2a2a2a;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 56px;
}

.nav__brand {
  display: none;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.nav__brand img { width: 24px; height: 24px; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
  margin-inline: auto;
  flex-wrap: wrap;
  justify-content: center;
}

.nav__list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e8e8e8;
  transition: color 0.18s ease;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav__list a:hover { color: #fff; }
.nav__list a:hover::after { transform: scaleX(1); }

.nav__cta {
  flex: none;
  padding: 9px 18px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.18s ease;
}
.nav__cta:hover { background: var(--red-deep); }

/* the sticky bar shows a compact brand once the masthead scrolls away */
.nav.is-stuck .nav__brand { display: inline-flex; }
.nav.is-stuck .nav__list { margin-inline: auto; }

@media (max-width: 820px) {
  .nav__inner { min-height: 52px; padding-block: 8px; }
  .nav__cta { display: none; }
  .nav.is-stuck .nav__brand { display: none; }
  .nav__list { gap: 16px; }
  .nav__list a { font-size: 11px; letter-spacing: 0.12em; }
}
/* Six desks on the homepage, seven links on a desk page. The list wraps
   rather than overflowing, but tightening keeps it to one line on most
   handsets. */
@media (max-width: 560px) {
  .nav__inner { padding-inline: 12px; }
  .nav__list { gap: 9px; }
  .nav__list a { font-size: 10px; letter-spacing: 0.04em; }
}
@media (max-width: 430px) {
  .nav__list { gap: 7px; }
  .nav__list a { font-size: 9.5px; letter-spacing: 0.02em; }
}

/* ----------------------------------------------------------------- lede */

.lede {
  padding: clamp(46px, 6vw, 84px) 0 clamp(40px, 5vw, 70px);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(var(--paper), var(--paper));
}

.lede__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}

.lede__head {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(46px, 8.2vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.lede__head em {
  font-style: italic;
  font-weight: 700;
  color: var(--red);
}

.lede__deck {
  margin-top: clamp(22px, 2.6vw, 30px);
  max-width: 60ch;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.68;
  color: #2e2e2e;
}
.lede__deck::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.4em;
  line-height: 0.78;
  padding: 0.08em 0.1em 0 0;
  color: var(--red);
}

.lede__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.btn {
  display: inline-block;
  padding: 14px 26px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--red); border-color: var(--red); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

/* at-a-glance panel */
.lede__aside {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 36px);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--red);
}

.panel__head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.stats { margin: 0; }
.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.stat dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stat dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.panel__note {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #444;
}

.panel__mark {
  position: absolute;
  right: -58px;
  bottom: -48px;
  width: 240px;
  opacity: 0.055;
  pointer-events: none;
}

@media (max-width: 900px) {
  .lede__grid { grid-template-columns: 1fr; }
  .lede__aside { max-width: 560px; }
}

/* --------------------------------------------------------- section head */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  border-bottom: 3px solid var(--ink);
}

.section-head__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px);
  letter-spacing: -0.022em;
}

.section-head__sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section-head--invert { border-bottom-color: var(--red); }
.section-head--invert .section-head__title { color: #fff; }
.section-head--invert .section-head__sub { color: #9d9d9d; }

/* ---------------------------------------------------------------- desks */

.desks { padding: clamp(50px, 6vw, 88px) 0; }

/* Six equal cards, three across, two rows. Every row fills completely, which
   is what makes the hairline gaps read as a grid rather than as stray rules. */
.desk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.desk {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 40px);
  background: var(--paper);
  text-decoration: none;
  overflow: hidden;
  transition: background 0.28s ease, color 0.28s ease;
}

/* red wipe along the top edge on hover */
.desk::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 5px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.desk__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  transition: color 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}
.desk__icon svg { width: 26px; height: 26px; }

.desk__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 42px);
  letter-spacing: -0.025em;
}

.desk__domain {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--red);
  transition: color 0.28s ease;
}

.desk__desc {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: #3a3a3a;
  transition: color 0.28s ease;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}
.tags li {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 0.28s ease, border-color 0.28s ease;
}

.desk__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 26px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.desk__go i {
  font-style: normal;
  transition: transform 0.28s ease;
}

/* hover and focus state: the card flips to black */
.desk:hover,
.desk:focus-visible {
  background: var(--ink);
  color: #fff;
}
.desk:hover::before,
.desk:focus-visible::before { transform: scaleX(1); }
.desk:hover .desk__icon,
.desk:focus-visible .desk__icon { color: #fff; border-color: var(--red); background: var(--red); }
.desk:hover .desk__domain,
.desk:focus-visible .desk__domain { color: var(--red-bright); }
.desk:hover .desk__desc,
.desk:focus-visible .desk__desc { color: #c9c9c9; }
.desk:hover .tags li,
.desk:focus-visible .tags li { color: #a5a5a5; border-color: #3a3a3a; }
.desk:hover .desk__go i,
.desk:focus-visible .desk__go i { transform: translateX(6px); }

/* Six divides evenly by three, two and one, so every breakpoint fills its
   rows and no card is ever orphaned. */
@media (max-width: 1000px) {
  .desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .desk-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- wire */

.wire {
  padding: clamp(50px, 6vw, 88px) 0;
  background: var(--ink);
  color: #fff;
}

.wire__list { border-top: 1px solid #2b2b2b; }

.wire__item {
  display: grid;
  grid-template-columns: 108px 128px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 22px;
  padding: 20px 4px;
  border-bottom: 1px solid #2b2b2b;
  text-decoration: none;
  transition: background 0.2s ease, padding 0.2s ease;
}
.wire__item:hover { background: #161616; padding-inline: 14px 4px; }

.wire__time {
  font-family: var(--mono);
  font-size: 12px;
  color: #8a8a8a;
  white-space: nowrap;
}

.wire__desk {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-bright);
  white-space: nowrap;
}

.wire__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #fff;
}
.wire__item:hover .wire__title { text-decoration: underline; text-underline-offset: 4px; }

.wire__source {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d7d7d;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .wire__item {
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    padding-block: 18px;
  }
  .wire__time  { grid-row: 1; }
  .wire__desk  { grid-row: 1; }
  .wire__title { grid-column: 1 / -1; grid-row: 2; }
  .wire__source{ grid-column: 1 / -1; grid-row: 3; }
}

/* placeholder shown until a feed is connected */
.wire__empty {
  padding: clamp(34px, 5vw, 62px) clamp(26px, 4vw, 54px);
  border: 1px solid #2e2e2e;
  border-left: 5px solid var(--red);
  background: #131313;
  text-align: center;
}
.wire__empty-head {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  color: #fff;
}
.wire__empty-note {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: 15.5px;
  color: #a4a4a4;
}
.wire__empty-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.wire__empty-links a {
  padding: 9px 16px;
  border: 1px solid #3a3a3a;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6e6e6;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.wire__empty-links a:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ------------------------------------------------------------- colophon */

.colophon {
  padding: clamp(50px, 6vw, 84px) 0;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}

.colophon__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
}
.colophon__grid article {
  padding-top: 20px;
  border-top: 3px solid var(--ink);
}
.colophon__grid p {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.66;
  color: #3d3d3d;
}

.colophon__head {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(21px, 2.2vw, 27px);
  letter-spacing: -0.018em;
}

.feedlist { margin-top: 16px; }
.feedlist a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  transition: color 0.16s ease;
}
.feedlist a span { color: var(--ink-muted); }
.feedlist a:hover { color: var(--red); }
.feedlist a:hover span { color: var(--red); }

@media (max-width: 880px) {
  .colophon__grid { grid-template-columns: 1fr; }
}

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

.footer {
  background: var(--ink);
  color: #d4d4d4;
  padding: clamp(46px, 5vw, 72px) 0 28px;
  border-top: 5px solid var(--red);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

.footer__brand img { width: 176px; }
.footer__brand p {
  margin-top: 16px;
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  color: #9d9d9d;
}

.footer__col h2 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #2e2e2e;
}
.footer__col li { margin-bottom: 9px; }
.footer__credit {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 14px !important;
}
.footer__credit span {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-top: 4px;
}
.footer__col a {
  text-decoration: none;
  font-size: 14.5px;
  color: #b6b6b6;
  transition: color 0.16s ease;
}
.footer__col a:hover { color: var(--red-bright); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid #2a2a2a;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #7b7b7b;
}
/* The owner credit is the only link in the legal line. It keeps its underline,
   which is the clearest signal in a line of running text, but lifts out of the
   muted grey so it does not read as more small print. */
.footer__base a {
  color: #b6b6b6;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.16s ease;
}
.footer__base a:hover { color: var(--red-bright); }

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- preferences */

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

@media print {
  .nav, .wire, .topbar .pip { display: none; }
  body { font-size: 12pt; }
  .desk { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}