/* 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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  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;
}

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

  .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 {
    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: the clip is marked data-video-wait in the page and only
   site.js switches it on, at 1024 pixels and wider for a visitor who has not
   asked for less motion. Until then, and without JavaScript, the still shows
   and the phone never downloads the film. 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;
}