/* SCOOP-649 — the clock page.
   One rule runs the whole sheet: colour is the clock. Every colour here is the
   sky at a moment the record names, and nothing else on the page picks one.
   The ground moves with the reader because the story is one day going dark. */

.scoop-substrate.story-page {
  --ink: #f4f6fa;
  --muted: #b9c2d4;

  /* The credit reads over the opening sky, the lightest ground on the page, so
     it carries its own step between the ink and the muted grey. */
  --credit: #d6dcea;
  --rule: rgba(244, 246, 250, .22);
  --plate: rgba(6, 8, 20, .34);

  /* The sky at 19:58:44, the minute the ruling was written down. It is the one
     accent on the page, and it marks that minute and nothing else. */
  --commit: #ffb45e;

  /* Live ground. The script writes these three from the clock; these values are
     the afternoon, which is where the story opens and where the static tier
     stands. */
  --sky: #1b4a6e;
  --sky-high: #2a6188;
  --sky-deep: #0c2337;
  --night: 0;
  --sun: 1;

  --measure: min(720px, 100% - 32px);
  --body-measure: min(576px, 100% - 32px);

  --display: "Didot", "Bodoni 72", "Playfair Display", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --scoop-masthead-font-family: var(--mono);
  --scoop-masthead-colour: var(--muted);
  --scoop-masthead-scale: .92;

  position: relative;
  z-index: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;

  /* A word the reader's text size makes wider than its box breaks inside the
     box. Intrinsic widths do not change, so the layout is the same at ordinary
     text size. */
  overflow-wrap: break-word;
}

/* ---- the ground: one sky, running from the afternoon to the small hours ---- */

.sky,
.sun,
.stars {
  position: fixed;
  z-index: -3;
  inset: 0;
  pointer-events: none;
}

.sky {
  background: linear-gradient(180deg, var(--sky-high) 0%, var(--sky) 56%, var(--sky-deep) 100%);
}

/* The last of the daylight, sitting on the horizon and sinking out of it. */
.sun {
  z-index: -2;
  background: radial-gradient(96% 62% at 50% 104%, var(--commit) 0%, transparent 58%);
  opacity: calc(var(--sun) * .34);
  transform: translate3d(0, calc((1 - var(--sun)) * 22vh), 0);
  will-change: transform;
}

.stars {
  z-index: -1;
  background-image:
    radial-gradient(1.6px 1.6px at 18px 34px, rgba(255, 255, 255, .82) 50%, transparent 60%),
    radial-gradient(1.2px 1.2px at 142px 96px, rgba(255, 255, 255, .58) 50%, transparent 60%),
    radial-gradient(2px 2px at 268px 186px, rgba(255, 232, 200, .7) 50%, transparent 60%),
    radial-gradient(1.1px 1.1px at 82px 232px, rgba(255, 255, 255, .5) 50%, transparent 60%);
  background-size: 320px 300px, 260px 250px, 460px 420px, 200px 340px;
  opacity: var(--night);
  transform: translate3d(0, calc(var(--night) * -5vh), 0);
  will-change: transform;
}

/* ---- links ---- */

.scoop-substrate.story-page a,
.scoop-substrate.story-page a:visited {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--commit);
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
}

.scoop-substrate.story-page a:hover,
.scoop-substrate.story-page a:focus-visible {
  text-decoration-thickness: .2em;
}

.scoop-substrate.story-page a:focus-visible,
.scoop-substrate.story-page button:focus-visible {
  outline: 3px solid var(--commit);
  outline-offset: 3px;
}

button,
a {
  touch-action: manipulation;
}

/* ---- the masthead the service owns ---- */

.masthead-well {
  position: relative;
  z-index: 1;
  width: var(--measure);
  margin-inline: auto;
}

.story-page .masthead-well .scoop-site-masthead,
.story-page .masthead-well .scoop-site-about {
  width: 100% !important;
}

/* ---- the fixed clock ---- */

.clock {
  position: fixed;
  z-index: 4;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  left: max(.75rem, env(safe-area-inset-left));
  box-sizing: border-box;
  max-width: calc(100vw - 1.5rem);
  padding: .5rem .7rem .55rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--plate);
  backdrop-filter: blur(6px);
}

.clock__label,
.clock__tag {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.clock__time {
  margin: .1rem 0;
  font-family: var(--mono);
  font-size: 1.32rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}

.clock__tag {
  letter-spacing: .06em;
  text-transform: none;
}

/* ---- the article ---- */

.story {
  position: relative;
  z-index: 1;
}

.hero {
  width: var(--measure);
  margin-inline: auto;
  padding: clamp(30px, 6vw, 72px) 0 clamp(18px, 3vw, 32px);
}

.hero__kicker {
  margin: 0 0 1.1rem;
  color: var(--commit);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .2em;
  line-height: 1.6;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.85rem, 6.2vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.04;
}

.hero__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.8rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .06em;
  line-height: 1.7;
}

.hero__legend b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.poster {
  width: var(--measure);
  margin: clamp(20px, 4vw, 38px) auto 0;
}

.poster img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.poster figcaption,
.plate figcaption {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}

.credit {
  display: block;
  margin-top: .25rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The credit sits in the article column and reads on the sky. Both rules carry
   the page's own class, so the substrate's own margin and ink stay off them. */
.scoop-substrate.story-page .story-page__byline,
.scoop-substrate.story-page .story-page__dateline {
  width: var(--body-measure);
  margin: 0 auto;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.scoop-substrate.story-page .story-page__byline {
  padding-top: clamp(24px, 4vw, 42px);
  color: var(--credit);
}

.scoop-substrate.story-page .story-page__dateline {
  padding-bottom: clamp(16px, 3vw, 26px);
  color: var(--credit);
}

/* The date and the live count take their own lines when the reader's text size
   makes one line too long for the column. The label wraps with them, so a large
   text size keeps the count inside the column. */
.scoop-substrate.story-page .story-page__dateline [data-scoop="reader-live"] {
  flex-wrap: wrap;
}

.scoop-substrate.story-page .story-page__dateline [data-scoop="reader-label"] {
  white-space: normal;
}

/* ---- the body: one size, first paragraph to last ---- */

.prose {
  width: var(--body-measure);
  margin-inline: auto;
}

.prose p {
  margin: 0 0 1.35rem;
  font-size: 19px;
  line-height: 1.7;
}

/* The body prints its own section marks, so the hashes are set as the mark. */
.prose h2 {
  margin: clamp(36px, 6vw, 58px) 0 22px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.prose h2 .hash {
  color: var(--commit);
  font-family: var(--mono);
  font-size: .5em;
  font-weight: 400;
  letter-spacing: .04em;
  vertical-align: .34em;
}

.prose blockquote {
  margin: 0 0 1.35rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--commit);
  font-size: 19px;
  line-height: 1.7;
}

.prose blockquote .mark {
  color: var(--commit);
  font-family: var(--mono);
}

.prose em {
  font-style: italic;
}

.prose code {
  font-family: var(--mono);
  font-size: .92em;
}

.seat:empty {
  margin: 0;
}

/* ---- the instruments ---- */

/* Seated inside the body column, an instrument still holds the wider measure:
   it steps out by the same amount on both sides. */
.rig,
.plate {
  margin: clamp(34px, 6vw, 58px) 0;
}

[data-shipped] {
  width: var(--body-measure);
  margin-inline: auto;
}

.plate {
  margin-block: clamp(28px, 5vw, 48px);
}

.close {
  box-sizing: border-box;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.rig {
  box-sizing: border-box;
  padding: clamp(14px, 3.4vw, 30px);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--plate);
}

.rig__label {
  margin: 0 0 .7rem;
  color: var(--commit);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  line-height: 1.6;
  text-transform: uppercase;
}

.rig__title {
  margin: 0 0 .9rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.rig__note {
  margin: 0 0 1.1rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

.rig__note--sub {
  margin: 1rem 0 0;
}

.rig__readouts,
.close__readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.rig__readouts li {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.rig__readouts span {
  color: var(--muted);
}

.rig__readouts b {
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.rig__acts {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.3rem 0 0;
}

.act {
  min-height: 44px;
  padding: .6rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
}

.act[aria-pressed="true"] {
  border-color: var(--commit);
  background: var(--commit);
  color: #16101f;
  font-weight: 600;
}

/* ---- instrument one: the wait ---- */

.wait__scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  justify-content: space-between;
  margin: 0 0 .4rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
}

.wait__bar {
  position: relative;
  height: 68px;
  border: 1px solid var(--rule);
  background: rgba(4, 5, 14, .5);
  overflow: hidden;
}

/* The drawn part is the life of the three reviews, arriving as the reader
   descends. Everything inside it is empty, because almost nothing happened. */
.wait__drawn {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--run, 1) * 100%);
  background: linear-gradient(180deg, rgba(244, 246, 250, .1), rgba(244, 246, 250, .03));
  border-right: 1px solid var(--commit);
}

.wait__work,
.wait__queue {
  position: absolute;
  top: 0;
  bottom: 0;
}

/* The one hour of work, at its true place and its true width. */
.wait__work {
  left: 97.154%;
  width: 2.846%;
  min-width: 3px;
  background: var(--commit);
}

.wait__queue {
  left: 0;
  width: 41.769%;
  border-bottom: 6px solid var(--ink);
  opacity: 0;
  transition: opacity 200ms linear;
}

.wait[data-queue="on"] .wait__queue {
  opacity: 1;
}

.wait__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  line-height: 1.6;
}

.wait__legend i {
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-right: .4rem;
  vertical-align: 1px;
  background: var(--commit);
  font-style: normal;
}

.wait__legend li:last-child i {
  background: var(--ink);
}

/* ---- the close: the record, and what an agent reads of it ---- */

.close {
  width: var(--measure);
  margin: clamp(42px, 8vw, 88px) auto 0;
  padding-top: clamp(28px, 5vw, 48px);
  border-top: 1px solid var(--rule);
}

.close__label {
  margin: 0 0 1.4rem;
  color: var(--commit);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  line-height: 1.6;
  text-transform: uppercase;
}

.marks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.marks li {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: .2rem .9rem;
  align-items: baseline;
  padding: .75rem 0;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  transition: opacity 220ms linear;
}

.marks li:last-child {
  border-bottom: 1px solid var(--rule);
}

.marks time {
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.marks span {
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .05em;
  line-height: 1.6;
}

.marks li[data-mark="spoken"] {
  opacity: 1;
}

/* What an agent reads. The four spoken marks are struck and set back, and they
   stay above the contrast floor, because the row still has to be readable. */
.marks[data-reads="agent"] li[data-mark="spoken"] {
  opacity: .7;
}

.marks[data-reads="agent"] li[data-mark="spoken"] time {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.marks li[data-mark="written"] time {
  color: var(--commit);
}

.marks li[data-mark="written"] span {
  color: var(--ink);
}

.close__readouts {
  margin-top: 1.4rem;
}

.close__readouts li {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.close__readouts span {
  color: var(--muted);
}

.close__readouts b {
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0;
}

.close__gloss {
  margin: 1.6rem 0 0;
  max-width: 32rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

/* ---- closing furniture: aligned with the article measure ---- */

[data-scoop="closing"] {
  width: min(320px, 100%);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 54px) 0 clamp(50px, 7vw, 74px);
  color: var(--ink);
}

/* The assembly is 320 narrow and 720 wide, and the closing well is the article
   measure at both, so the site's compensating pull is not wanted here. */
.scoop-substrate.story-page [data-scoop="closing"] > .reaction-assembly {
  margin-left: 0;
}

@media (min-width: 752px) {
  [data-scoop="closing"] {
    width: min(720px, 100% - 32px);
  }

  /* Above the fold-down the two measures are fixed, so an instrument seated in
     the body column steps out by the same 72px on each side to reach the frame. */
  .rig,
  .plate {
    margin-inline: -72px;
  }
}

.story-page [data-scoop="closing"] .base-matter,
.story-page [data-scoop="closing"] > p {
  color: var(--ink);
  line-height: 1.5;
}

.scoop-substrate.story-page [data-scoop="closing"] .base-matter,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a,
.scoop-substrate.story-page [data-scoop="closing"] nav a,
.scoop-substrate.story-page [data-scoop="closing"] > a {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.scoop-substrate.story-page [data-scoop="closing"] .base-matter a,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a:visited,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a:hover,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a:focus-visible,
.scoop-substrate.story-page [data-scoop="closing"] .base-matter a:active {
  color: var(--ink);
}

/* ---- the screen reader's running commentary ---- */

.announce {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the reader's text size ----
   Every instrument cell measures itself, so a figure or a label set large by the
   reader's own text size stays inside the cell instead of leaving it. The figure
   keeps its set size until the cell runs out, then it takes the cell's width. */

.rig__readouts li,
.close__readouts li,
.marks li {
  container-type: inline-size;
  min-width: 0;
}

.rig__readouts b,
.close__readouts b {
  font-size: min(1.22rem, 19cqi);
}

.marks time {
  font-size: min(.95rem, 19cqi);
}

.rig__readouts span,
.rig__readouts b,
.close__readouts span,
.close__readouts b,
.marks time,
.marks span,
.wait__scale span,
.hero__legend li,
.clock__time,
.clock__tag,
.rig__title,
.rig__label,
.rig__note,
.act,
.prose p,
.prose h2,
.hero h1 {
  overflow-wrap: anywhere;
}

.act {
  max-width: 100%;
}

/* ---- narrow ---- */

@media (max-width: 751px) {
  .scoop-substrate.story-page {
    --measure: min(320px, 100% - 24px);
    --body-measure: min(320px, 100% - 24px);
  }

  .rig__readouts,
  .close__readouts {
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  }

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

  /* On a phone the article column reaches the left edge, so the clock stops
     being a corner plate and becomes a strip the page keeps clear for it. */
  .scoop-substrate.story-page {
    padding-bottom: 5rem;
  }

  .clock {
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 .55rem;
    align-items: baseline;
    max-width: none;
    padding: .4rem .75rem calc(.4rem + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
    background: rgba(6, 8, 20, .78);
  }

  .clock__label,
  .clock__tag {
    font-size: .62rem;
  }

  .clock__time {
    margin: 0;
    font-size: 1.02rem;
  }
}

/* ---- forced colours: every pressed state keeps a visible change ---- */

@media (forced-colors: active) {
  .rig,
  .plate img,
  .poster img,
  .clock,
  .wait__bar {
    border: 1px solid CanvasText;
  }

  .act[aria-pressed="true"] {
    border: 3px solid Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  .wait__work,
  .wait__drawn {
    background: Highlight;
    forced-color-adjust: none;
  }

  .marks[data-reads="agent"] li[data-mark="spoken"] time {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
  }
}

/* ---- reduced motion: the clock still runs, nothing slides ---- */

@media (prefers-reduced-motion: reduce) {
  .sun,
  .stars {
    transform: none;
  }

  .wait__queue,
  .marks li {
    transition: none;
  }
}