/* The Wire
   ------------------------------------------------------------------
   Everything the daily briefing needs and the rest of the site does not.
   It is a separate file on purpose: site.css is hand built and audited, and
   an automated publisher has no business writing into it.

   Rules this file keeps, taken from the brand page and the accessibility
   statement, because the briefing has to hold the same line as everything
   else on the site:
     - No opacity on text. Anything that recedes gets a measured colour.
     - The violet is a fill or a mark. It is text only on canvas and canvas-2.
     - Every interactive thing has a visible focus state.
     - Nothing moves for a reader who has asked for less motion.
     - It all works with JavaScript switched off.
   ------------------------------------------------------------------ */

/* The Wire tag in the post meta line. A fill, never violet text on violet. */
.wire-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--tint, #ECE8FA);
  color: var(--ink, #1E1330);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Source markers. A superscript number that is also a link to the list at the
   foot of the page. Given a real hit area so it is usable on a phone. */
.wire-ref {
  font-size: 0.68em;
  line-height: 1;
  vertical-align: super;
  margin-inline-start: 0.12em;
}

.wire-ref a {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 0.18em;
  border-radius: 3px;
  background: var(--tint, #ECE8FA);
  color: var(--ink, #1E1330);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.wire-ref a:hover,
.wire-ref a:focus-visible {
  background: var(--accent, #6D4AFF);
  color: var(--canvas, #FAFAF9);
}

.wire-ref a:focus-visible {
  outline: 3px solid var(--accent-active, #4C1D95);
  outline-offset: 2px;
}

/* The numbered source list. */
.wire-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wire-source;
  display: grid;
  gap: 0.85rem;
}

.wire-sources > li {
  counter-increment: wire-source;
  display: grid;
  grid-template-columns: 2.35rem 1fr;
  gap: 0.4rem 0.75rem;
  padding-block-end: 0.85rem;
  border-block-end: 1px solid var(--rule, #DBDADD);
}

.wire-sources > li:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.wire-sources > li::before {
  content: counter(wire-source);
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: start;
  min-width: 1.9rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--canvas-3, #EAE9F0);
  color: var(--ink, #1E1330);
  font-family: var(--mono);
  font-size: 0.82rem;
  text-align: center;
}

.wire-sources__title {
  margin: 0;
  font-weight: 600;
}

.wire-sources__meta {
  margin: 0;
  color: var(--muted, #5A5470);
  font-size: 0.9rem;
}

/* Also today: the short items under the lead story. */
.wire-briefs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.1rem;
}

.wire-briefs > li {
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--accent, #6D4AFF);
}

.wire-briefs__title {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.wire-briefs__text {
  margin: 0;
  color: var(--ink, #1E1330);
}

/* A video we are pointing at rather than embedding, with the channel credited.
   No player, so no third party cookie, so the cookie policy stays true. */
.wire-video {
  display: grid;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule, #DBDADD);
  border-radius: 10px;
  background: var(--canvas-2, #F5F4F9);
}

.wire-video__label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #5A5470);
}

.wire-video__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.wire-video__credit {
  margin: 0;
  color: var(--muted, #5A5470);
  font-size: 0.9rem;
}

/* The invitation to follow. Bordered like the video box, so it reads as a
   note from the publisher rather than an advert. The mark is a fill in the
   accent, never violet text. */
.wire-follow {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule, #DBDADD);
  border-radius: 10px;
  background: var(--canvas-2, #F5F4F9);
}

.wire-follow__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--ink, #1E1330);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.wire-follow__link:hover,
.wire-follow__link:focus-visible {
  color: var(--accent-active, #4C1D95);
}

.wire-follow__link:focus-visible {
  outline: 3px solid var(--accent-active, #4C1D95);
  outline-offset: 3px;
  border-radius: 4px;
}

.wire-follow__mark {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  color: var(--accent, #6D4AFF);
}

.wire-follow__note {
  margin: 0;
  color: var(--muted, #5A5470);
  font-size: 0.9rem;
}

/* Share this briefing. Plain links to each network's own share page, so the
   row works with JavaScript off and sets no cookie. Contrast sits on the
   hairline, the secondary button's outline, 3.57:1 on the button's canvas
   and 3.41:1 on the band; the label is ink, 16.88:1. Every link is 44
   pixels tall for a thumb. 30 September 2026. */
.wire-share {
  display: grid;
  gap: 0.75rem;
}

.wire-share > * {
  margin: 0;
}

.wire-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
}

.wire-share__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--btn-outline, #868294);
  border-radius: 999px;
  background: var(--canvas, #FAFAF9);
  color: var(--ink, #1E1330);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--fast, 120ms) var(--ease, ease), color var(--fast, 120ms) var(--ease, ease);
}

.wire-share__link:hover,
.wire-share__link:focus-visible {
  border-color: var(--accent-active, #4C1D95);
  color: var(--accent-active, #4C1D95);
}

.wire-share__link:focus-visible {
  outline: 3px solid var(--accent-active, #4C1D95);
  outline-offset: 2px;
}

.wire-share__mark {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  flex: none;
}

/* The honesty block. It is bordered rather than tinted so it reads as a note
   from the publisher and not as a pull quote. */
.wire-note {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--rule, #DBDADD);
  border-inline-start: 4px solid var(--accent, #6D4AFF);
  border-radius: 10px;
  background: var(--canvas-2, #F5F4F9);
  display: grid;
  gap: 0.75rem;
}

.wire-note > h3 {
  margin: 0;
}

.wire-note > p {
  margin: 0;
}

/* The Wire entries in the blog index carry a small mark so the two streams are
   never confused for one another at a glance. */
.posts__item--wire .posts__meta .eyebrow::after {
  content: " · The Wire";
  color: var(--muted, #5A5470);
  font-weight: 400;
}

@media (max-width: 34em) {
  .wire-sources > li {
    grid-template-columns: 1fr;
  }

  .wire-sources > li::before {
    grid-row: auto;
  }
}

@media print {
  .wire-note,
  .wire-video,
  .wire-follow {
    border: 1px solid #666;
    background: transparent;
  }

  /* A share button on paper is a box nobody can press. */
  .wire-share {
    display: none;
  }

  .wire-ref a {
    background: transparent;
    color: #000;
    text-decoration: none;
  }

  .wire-sources > li::before {
    background: transparent;
    color: #000;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wire-ref a,
  .wire-video,
  .wire-share__link {
    transition: none;
  }
}

/* The picture at the top of the index. It reuses the post hero's frame but
   sits inside the hero's own container, so the side padding goes and it takes
   a little air above instead. */
.wire-hero {
  padding-inline: 0;
  padding-block: 40px 0;
}

/* The clip and the still. The clip plays silently on a loop the moment the
   page lands, and the still is its first frame. James, 3 Sep 2026: no pause
   box for this one, it is the news room and it should be obvious. The one
   exception is a reader whose system asks for less motion, who gets the
   still, because accessibility.html promises exactly that. No script is
   involved: the host refuses inline scripts, and none is needed. */
.wire-hero .wire-hero__clip {
  display: block;
  inline-size: 100%;
  block-size: auto;
  box-shadow: var(--lift-2);
  background: var(--ink, #1E1330);
}

/* Written with the figure in the selector on purpose: site.css sets
   .post-hero img to display block, and a lone class would lose to it. */
.wire-hero .wire-hero__still {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .wire-hero .wire-hero__clip { display: none; }
  .wire-hero .wire-hero__still { display: block; }
}

/* 5 September 2026, every width from 21 October 2026: the clip is marked
   data-video-wait in the page and only site.js switches it on, phones and
   tablets included, for a visitor who has not asked for less motion and has
   not turned Save-Data on. Until then, and without JavaScript, the still
   shows and the film is never downloaded. Native controls are on the clip
   itself, so it can be paused where it plays. */
.wire-hero .wire-hero__clip[data-video-wait] { display: none; }
.wire-hero .wire-hero__clip[data-video-wait] + .wire-hero__still { display: block; }

/* ------------------------------------------------------------------
   The weekly sheet, added 4 September 2026. One A4 folded twice, James's
   choice of the three forms shown him that day. On screen it is a card with
   the paper's own shadow; in print it is the sheet itself, with fold marks
   at the thirds. Everything on it is compiled from the week's editions.
   ------------------------------------------------------------------ */

.sheet {
  position: relative;
  display: grid;
  gap: 22px;
  padding: 40px 44px 36px;
  background: var(--canvas, #FAFAF9);
  color: var(--ink, #1E1330);
  box-shadow: var(--lift-2);
  border: 1px solid var(--rule, #DBDADD);
}

.sheet__note {
  margin-block-end: 16px;
}

.sheet__mast {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-block-end: 14px;
  border-block-end: 3px solid var(--ink, #1E1330);
}

.sheet__name {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sheet__lockup {
  inline-size: 54px;
  block-size: 56px;
  flex: 0 0 auto;
}

.sheet__lockup .badge {
  fill: var(--dark, #150C24);
}

.sheet__lockup .mark {
  color: var(--accent-light, #A78BFA);
}

.sheet__title {
  margin: 0;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sheet__from {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--muted, #5A5470);
  text-align: end;
}

.sheet__dateline {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--rule, #DBDADD);
  font-size: 0.85rem;
  color: var(--muted, #5A5470);
}

.sheet__frame {
  font-weight: 700;
  color: var(--ink, #1E1330);
}

.sheet__cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 32px;
}

.sheet__lead {
  display: grid;
  gap: 12px;
  align-content: start;
}

.sheet__picture {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--canvas-3, #EAE9F0);
}

.sheet__credit {
  margin-block-start: -6px;
}

.sheet__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sheet__kicker::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 2px;
  background: var(--accent, #6D4AFF);
}

.sheet__headline {
  margin: 0;
}

.sheet__standfirst {
  margin: 0;
}

.sheet__read {
  align-items: center;
  gap: 14px;
}

.sheet__also {
  display: grid;
  gap: 0;
  align-content: start;
  border-inline-start: 1px solid var(--rule, #DBDADD);
  padding-inline-start: 24px;
}

.sheet__also-heading {
  padding-block-end: 12px;
  border-block-end: 1px solid var(--rule, #DBDADD);
}

.sheet__also-item {
  display: grid;
  gap: 6px;
  padding-block: 14px;
  border-block-end: 1px solid var(--rule, #DBDADD);
}

.sheet__also-item:last-child {
  border-block-end: 0;
}

.sheet__when {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #5A5470);
}

.sheet__also-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sheet__also-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted, #5A5470);
}

.sheet__band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 26px 28px;
  border-radius: 10px;
  background: var(--dark, #150C24);
  color: var(--on-dark, #FAFAF9);
}

.sheet__band-eyebrow {
  grid-column: 1 / -1;
  color: var(--on-dark-mute, #BFB6D6);
}

.sheet__band-line {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--on-dark, #FAFAF9);
}

.sheet__band-note {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--on-dark-mute, #BFB6D6);
}

.sheet__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted, #5A5470);
}

.sheet__foot > p {
  margin: 0;
}

.sheet__foot-url {
  text-align: end;
  white-space: nowrap;
}

/* The sign-up. On the Wire index and at the foot of every sheet. The trap
   field is off screen, not display none, so a browser still submits it and a
   bot still fills it. */
.wire-subscribe {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--rule, #DBDADD);
  border-radius: var(--radius-card, 16px);
  background: var(--canvas, #FAFAF9);
}

.wire-subscribe > * {
  margin: 0;
}

.wire-subscribe__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.wire-subscribe__field {
  flex: 1 1 260px;
  margin: 0;
}

.wire-subscribe__trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 48em) {
  .sheet {
    padding: 28px 22px 24px;
  }

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

  .sheet__also {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--rule, #DBDADD);
    padding-block-start: 16px;
  }

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

  .sheet__foot {
    flex-direction: column;
  }

  .sheet__foot-url {
    text-align: start;
    white-space: normal;
  }
}

/* Print: the sheet and nothing else, one A4, fold marks at the thirds. */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body:has(main.weekly) .site-header,
  body:has(main.weekly) .site-footer,
  body:has(main.weekly) .band--cta,
  body:has(main.weekly) .section-rule,
  body:has(main.weekly) .band--alt,
  body:has(main.weekly) .sheet__note,
  body:has(main.weekly) .skip-link {
    display: none;
  }

  .weekly .band--hero {
    padding: 0;
    background: transparent;
  }

  .sheet {
    box-shadow: none;
    border: 0;
    padding: 0;
    gap: 18px;
    break-inside: avoid;
  }

  .sheet::before,
  .sheet::after {
    content: "";
    position: absolute;
    inset-inline: -8mm;
    block-size: 0;
    border-block-start: 1px dashed #999;
  }

  .sheet::before {
    inset-block-start: 33.3%;
  }

  .sheet::after {
    inset-block-start: 66.6%;
  }

  .sheet__read .btn {
    border: 1px solid #000;
    background: transparent;
    color: #000;
    box-shadow: none;
  }

  .sheet__read .btn::after {
    content: " at " attr(href);
    font-weight: 400;
  }

  .sheet__band {
    background: #150C24;
    color: #FAFAF9;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* You are on the list. The confirmation link sends a reader here with
   #wire-confirmed in the address, and :target shows the block with no
   script; everyone else never sees it. 5 September 2026. */
.wire-confirmed {
  display: none;
  margin-block-start: 24px;
  padding: 16px 20px;
  border: 1px solid var(--rule, #DBDADD);
  border-inline-start: 4px solid var(--accent, #6D4AFF);
  border-radius: 10px;
}
.wire-confirmed:target {
  display: block;
}

/* ------------------------------------------------------------------
   Pictures, 19 October 2026: the standard in ONE-OFFS.md, "Standards for
   every blog". A picture shrinks to fit the screen and never keeps a fixed
   height; site.css's base rule sets only the width, so every page that asks
   for this sheet states the height as well. A phone is sent the phone-sized
   file through <picture><source media="(max-width:480px)">, and the
   <picture> takes the place the bare <img> had, a block in the figure. */
img {
  max-inline-size: 100%;
  block-size: auto;
}

.post-hero picture,
.wire-hero picture {
  display: block;
}

/* The still under the index's clip, now inside its <picture>: the rule above
   that shows it while the clip waits names it as the clip's next sibling,
   which the <picture> now is. */
.wire-hero .wire-hero__clip[data-video-wait] + picture .wire-hero__still {
  display: block;
}

/* The clip has no poster attribute, because a browser fetches a poster even
   for a clip it never shows, and a phone was fetching the 1600 still that
   way. Where site.js plays the clip, at every width for a visitor who has
   not asked for less motion, the still the page's <picture> already chose
   is painted behind it until the first frame covers it: the 800 copy up to
   480 pixels, the 1600 above, so no width fetches a picture twice. A media
   query that does not match fetches nothing, in every browser, and a clip
   still waiting is not displayed, so neither is its background. */
@media (prefers-reduced-motion: no-preference) {
  .wire-hero .wire-hero__clip {
    background: var(--ink, #1E1330) url("/assets/img/brand/wire-hero-1600.webp?v=16795f2c") center / cover no-repeat;
  }

  /* Chrome paints its own grey panel over a clip with controls and no
     poster until the first frame arrives, hiding the still behind it (seen
     on 19 October 2026). A rule of its own, because a browser that does not
     know the pseudo-element drops the whole rule it sits in. */
  .wire-hero .wire-hero__clip::-webkit-media-controls {
    background: transparent;
  }
}

@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
  .wire-hero .wire-hero__clip {
    background-image: url("/assets/img/brand/wire-hero-800.webp?v=af702e5c");
  }
}

/* ------------------------------------------------------------------
   The newsroom clip, a little smaller, and the ticker beneath it. Added
   21 October 2026 on James's word: the caption under the clip said again
   what the paragraph above it says, so it went, and a line on a dark strip
   now says when the headlines land, then types the latest ones from the
   list below, each a link to its briefing (site.js, job 15). The line in
   the page is what a screen reader reads and what shows without
   JavaScript, under reduced motion or with Save-Data on. Nothing here
   carries an opacity: the dot pulses with a ring, the caret blinks by
   visibility. On a phone the label sits on its own line and a headline
   is held to two lines, so a long one never moves the page; from 640
   pixels it is all one line, cut with an ellipsis. */
.wire-hero {
  max-inline-size: 880px;
  margin-inline: auto;
}
.wire-ticker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-block-start: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-input, 10px);
  background: var(--dark, #150C24);
  color: var(--on-dark, #FAFAF9);
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.5;
  min-block-size: calc(3em + 1.25rem + 28px);
}
.wire-ticker__live {
  flex: 0 0 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-light, #A78BFA);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wire-ticker__live::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: #FF5A7A;
  animation: wire-pulse 1.6s ease-out infinite;
}
@keyframes wire-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 122, 0.6); }
  100% { box-shadow: 0 0 0 9px rgba(255, 90, 122, 0); }
}
.wire-ticker__line,
.wire-ticker__typed {
  flex: 1 1 0;
  min-inline-size: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wire-ticker.is-typing .wire-ticker__line {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.wire-ticker__when {
  color: var(--accent-light, #A78BFA);
  text-transform: uppercase;
}
.wire-ticker__typed a {
  color: inherit;
  text-decoration: none;
}
.wire-ticker__typed a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wire-ticker__caret {
  display: inline-block;
  inline-size: 0.55em;
  block-size: 1.1em;
  margin-inline-start: 2px;
  vertical-align: text-bottom;
  background: var(--accent-light, #A78BFA);
  animation: wire-caret 1s steps(1) infinite;
}
@keyframes wire-caret {
  50% { visibility: hidden; }
}
@media (min-width: 640px) {
  .wire-ticker {
    flex-wrap: nowrap;
    min-block-size: 0;
  }
  .wire-ticker__live {
    flex: none;
  }
  .wire-ticker__line,
  .wire-ticker__typed {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wire-ticker__live::before {
    animation: none;
  }
}
@media print {
  .wire-ticker {
    display: none;
  }
}