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

:root {
  /* 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); }


/* 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,
.editorial__role,
.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; }
}

/* ------------------------------------------------------- editorial box */

.editorial {
  padding: 0 0 clamp(50px, 6vw, 82px);
  background: var(--paper);
}

.editorial__inner {
  max-width: 760px;
  padding-block: clamp(30px, 4vw, 46px);
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
/* short red rule centred on the top hairline */
.editorial__inner::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 64px;
  height: 4px;
  background: var(--red);
  transform: translateX(-50%);
}

.editorial__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.editorial__role {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.editorial__note {
  margin: 20px auto 0;
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.66;
  color: #3d3d3d;
}

/* ----------------------------------------------------------------- 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;
}

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