/* SCOOP-659 — THE ROOM.
   One rule runs this sheet: COLOUR IS A MEASURED READER. The old counter's
   page serves are grain in the ground and never take ink. Red belongs to the
   three reader events this product actually measured, and to nothing else:
   links, quotes, focus rings and pressed controls all take ink.
   The lights are on in marigold. There are three people in the room. */

.scoop-substrate.story-page {
  --marigold: #F2C200;
  --deep: #C79E00;
  --bone: #FFFAEC;
  --ink: #17130A;
  --muted: #54460F;
  --reader: #C8102E;
  --reader-ink: #8E0B20;
  --hair: rgba(23, 19, 10, .22);
  --hair-soft: rgba(23, 19, 10, .12);

  --measure: min(720px, 100% - 24px);
  --body-measure: min(592px, 100% - 24px);

  /* A slab for every figure, label and mark. Every recent page set its
     numbers in a monospace; this one sets them in a slab with tabular
     figures, so a column of readings still lines up. */
  --slab: Superclarendon, "Bookman Old Style", Rockwell, "Roboto Slab", "Times New Roman", serif;
  --body: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --scoop-masthead-font-family: var(--slab);
  --scoop-masthead-colour: var(--ink);
  --scoop-masthead-scale: .96;

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

  /* A word the reader's text size makes wider than its box breaks inside the
     box, so intrinsic widths hold at every text size. */
  overflow-wrap: break-word;
}

/* Every box this sheet draws measures its padding and border inside its own
   width, so a rig that takes the whole screen takes exactly that. */
.room,
.room *,
.hero,
.hero *,
.poster,
.plate,
.shot,
.rig,
.rig *,
.close,
.close * { box-sizing: border-box; }

/* ---- the room: the ground the whole page stands on ---- */

/* The page's scroll position lives on this element alone. It is fixed, it
   holds four children, and nothing in the article inherits from it, so a
   scroll frame invalidates a handful of boxes instead of the document. */
.room {
  --scroll: 0;

  position: fixed;
  z-index: -3;
  inset: 0;
  overflow: hidden;
  background: var(--marigold);
}

/* The grain is the old counter: page serves, uncoloured, everywhere, moving
   slowly under the words as the reader travels down the story. */
.room__grain {
  position: absolute;
  inset: -12% -4%;
  background-image: radial-gradient(circle at 50% 50%, var(--deep) 0 34%, transparent 36%);
  background-size: 9px 9px;
  opacity: .5;
  transform: translate3d(0, calc(var(--scroll) * -56px), 0);
  will-change: transform;
}

/* A second, coarser grain travelling the other way, so the ground has depth
   and never reads as a flat screen tint. */
.room__grain--coarse {
  background-image: radial-gradient(circle at 50% 50%, var(--deep) 0 26%, transparent 28%);
  background-size: 31px 31px;
  opacity: .42;
  transform: translate3d(0, calc(var(--scroll) * 30px), 0);
}

/* The room breathes. One long compositor animation, nothing tied to a fact. */
.room__breath {
  position: absolute;
  inset: -20%;
  background: radial-gradient(60% 46% at 52% 30%, rgba(255, 250, 236, .5), transparent 70%);
  animation: breathe 26s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes breathe {
  0%, 100% { opacity: .5; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: .82; transform: translate3d(0, -3%, 0) scale(1.09); }
}

/* Three marks stand in the ground and never move: the three reader events the
   product measured on the night it went live. */
.room__three {
  position: absolute;
  inset: 0;
}

.room__mark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--reader);
  box-shadow: 0 0 0 6px rgba(200, 16, 46, .16);
}

.room__mark--a { top: 21%; left: 14%; }
.room__mark--b { top: 58%; left: 77%; }
.room__mark--c { top: 84%; left: 33%; }

/* The count the whole page is about, drawn into the ground. */
.room__figure {
  position: absolute;
  right: max(.8rem, env(safe-area-inset-right));
  bottom: max(.2rem, env(safe-area-inset-bottom));
  margin: 0;
  color: var(--ink);
  opacity: .085;
  font-family: var(--slab);
  font-size: clamp(8rem, 28vh, 21rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: .76;
}

/* ---- 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 hero ---- */

.hero {
  width: var(--measure);
  margin: 0 auto;
  padding: clamp(12px, 2.6vw, 26px) 0 clamp(20px, 4vw, 36px);
}

.hero__kicker {
  margin: 0 0 clamp(12px, 2.6vw, 22px);
  color: var(--muted);
  font-family: var(--slab);
  font-size: .78rem;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.scoop-substrate.story-page .hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--slab);
  font-size: clamp(2.15rem, 6.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.04;
}

.hero__legend {
  display: grid;
  margin: clamp(20px, 4vw, 34px) 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .9rem 1.2rem;
  list-style: none;
}

.hero__legend li {
  border-top: 3px solid var(--ink);
  padding-top: .5rem;
  font-family: var(--slab);
  font-size: .82rem;
  letter-spacing: .04em;
  line-height: 1.4;
}

.hero__legend b {
  display: block;
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.hero__legend li:nth-child(2) b { color: var(--reader-ink); }

/* ---- the poster ---- */

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

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

/* ---- the band the article stands on ---- */

.well {
  position: relative;
  padding-bottom: 1px;
}

.well::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  /* Wider than the frame, so a rig that steps out to the frame keeps its
     ground. One constant width: a width that moves costs a layout a frame. */
  width: min(100%, calc(var(--measure) + 180px));
  transform: translateX(-50%);
  background: var(--bone);
}

@media (max-width: 751px) {
  .well::before { width: calc(100% - 8px); }
}

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

.scoop-substrate.story-page .story-page__byline {
  margin-top: 0;
  padding-top: clamp(24px, 4vw, 40px);
  font-family: var(--slab);
  font-size: .95rem;
  letter-spacing: .02em;
}

.scoop-substrate.story-page .story-page__byline a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.scoop-substrate.story-page .story-page__dateline {
  display: flex;
  flex-wrap: wrap;
  margin: .35rem 0 0;
  color: var(--muted);
  font-family: var(--slab);
  font-size: .8rem;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.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 prose: one size from the first paragraph to the last ---- */

.prose {
  padding: clamp(18px, 3vw, 30px) 0 clamp(26px, 4vw, 44px);
}

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

.prose a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.prose a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.mark {
  margin: 2.1em 0 .85em;
  border-top: 3px solid var(--ink);
  padding-top: .6rem;
  font-family: var(--slab);
  font-size: clamp(1.28rem, 3.2vw, 1.62rem);
  font-weight: 700;
  line-height: 1.22;
}

.said {
  margin: 1.6em 0;
  border-left: 8px solid var(--ink);
  padding: .1rem 0 .1rem 1.1rem;
}

.said p {
  margin: 0;
  font-family: var(--slab);
  font-size: 19px;
  line-height: 1.6;
}

/* ---- the plates: five crew cuts, each at the line its subject enters ---- */

.plate {
  margin: 1.9em 0;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 1rem;
  align-items: start;
}

.plate img {
  display: block;
  width: 112px;
  height: 112px;
  border: 3px solid var(--ink);
}

.plate figcaption {
  font-family: var(--slab);
  font-size: .84rem;
  line-height: 1.5;
}

.plate__cap { display: block; color: var(--ink); }

.plate__credit {
  display: block;
  margin-top: .4rem;
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* The one screen in the story: the page the agent opened to make the count. */
.shot { margin: 1.9em 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--ink);
}

.shot figcaption {
  margin-top: .6rem;
  font-family: var(--slab);
  font-size: .84rem;
  line-height: 1.5;
}

/* Without the seating script every rig and picture stays in this one run at
   the foot of the article. It takes the body's own measure, so each of them
   steps out to the frame there exactly as it does in its seat. */
[data-shipped] {
  width: var(--body-measure);
  margin-inline: auto;
}

/* ---- the rigs ---- */

.rig {
  margin: 2.4em 0;
  border: 3px solid var(--ink);
  padding: clamp(14px, 2.6vw, 22px);
  background: var(--bone);
}

.rig__label {
  margin: 0;
  color: var(--muted);
  font-family: var(--slab);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rig__title {
  margin: .35rem 0 .7rem;
  font-family: var(--slab);
  font-size: clamp(1.25rem, 3.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
}

.rig__note {
  margin: 0 0 1rem;
  font-family: var(--slab);
  font-size: .88rem;
  line-height: 1.55;
}

.rig__out {
  margin: 1rem 0 0;
  font-family: var(--slab);
  font-size: .9rem;
  line-height: 1.55;
}

.reads {
  display: grid;
  margin: 1rem 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem 1.2rem;
  list-style: none;
}

.read {
  container-type: inline-size;
  border-top: 2px solid var(--hair);
  padding-top: .45rem;
}

.read__label {
  display: block;
  color: var(--muted);
  font-family: var(--slab);
  font-size: .74rem;
  letter-spacing: .06em;
  line-height: 1.4;
}

.read__value {
  display: block;
  margin-top: .2rem;
  font-family: var(--slab);
  font-size: min(1.6rem, 17cqi);
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
}

.read--lit .read__value { color: var(--reader-ink); }

.acts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  gap: .6rem;
}

.act {
  border: 3px solid var(--ink);
  padding: .55rem .8rem;
  background: var(--marigold);
  color: var(--ink);
  font-family: var(--slab);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
}

.act:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.act[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bone);
  box-shadow: inset 0 0 0 3px var(--bone);
}

/* ---- rig 01: the room, drawn ---- */

.rig--room { background: var(--marigold); }

/* The staged moment stands on the room's own ground, not on the article's
   band, so the reader knows they have stepped into the field. */
.rig--room .rig__label,
.rig--room .rig__title,
.rig--room .rig__note,
.rig--room .rig__out { color: var(--ink); }

.rig--room .read { border-top-color: var(--hair); }
.rig--room .act:not([aria-pressed="true"]) { background: var(--bone); }

.plot {
  position: relative;
  margin-top: .4rem;
  border: 3px solid var(--ink);
  aspect-ratio: 140 / 113;
  background: var(--bone);
  box-shadow: 0 0 0 1px var(--ink);
  overflow: hidden;
}

/* Exactly 140 columns and 113 rows: 15,820 cells, one for each page serve the
   paper's older counter reports. The cell count comes off the box, so the
   field holds its arithmetic at every width. */
.plot__serves {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, var(--muted) 0 30%, transparent 32%);
  background-size: calc(100% / 140) calc(100% / 113);
  opacity: .62;
  clip-path: inset(0 0 calc((1 - var(--drawn, 1)) * 100%) 0);
}

.plot[data-mode="measured"] .plot__serves { opacity: 0; }

.plot__mark {
  position: absolute;
  width: calc(100% / 140);
  height: calc(100% / 113);
  background: var(--reader);
}

.plot__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border: 3px solid var(--reader);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.plot__mark--a { left: calc(31 * 100% / 140); top: calc(24 * 100% / 113); }
.plot__mark--b { left: calc(88 * 100% / 140); top: calc(61 * 100% / 113); }
.plot__mark--c { left: calc(117 * 100% / 140); top: calc(96 * 100% / 113); }

.plot-wrap { position: relative; }

.plot__caption {
  margin: .5rem 0 0;
  color: var(--muted);
  text-align: right;
  font-family: var(--slab);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Wide enough for the line to sit inside the field without crowding a mark. */
@media (min-width: 752px) {
  .plot__caption {
    position: absolute;
    right: 10px;
    bottom: 8px;
    margin: 0;
  }
}

/* ---- rig 02: what the count sees ---- */

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

.gate__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem .8rem;
  align-items: baseline;
  border-top: 2px solid var(--hair);
  padding: .55rem 0;
}

/* Each visitor is its own control: press one and it arrives, press it again
   and it leaves. Pointer, touch, Enter and Space all reach the same click. */
.gate__who {
  margin: 0;
  border: 0;
  border-left: 8px solid transparent;
  padding: .1rem 0 .1rem .7rem;
  background: none;
  color: var(--ink);
  font-family: var(--slab);
  font-size: .92rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.gate__who:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.gate__row[data-on="1"] .gate__who { border-left-color: var(--ink); }
.gate__row[data-counts="1"][data-on="1"] .gate__who { border-left-color: var(--reader); }

.gate__got {
  color: var(--muted);
  font-family: var(--slab);
  font-size: .78rem;
  letter-spacing: .04em;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

.gate__row[data-on="1"] .gate__who { font-weight: 700; }
.gate__row[data-counts="1"][data-on="1"] .gate__got { color: var(--reader-ink); font-weight: 700; }

.gate__row[data-on="0"] { opacity: .5; }

/* ---- rig 03: the window ---- */

.window {
  display: grid;
  margin: .4rem 0 0;
  padding: 0;
  grid-template-columns: repeat(46, 1fr);
  gap: 2px;
  list-style: none;
}

.window__day {
  position: relative;
  height: 46px;
  background: rgba(23, 19, 10, .1);
}

.window__day--events { background: var(--reader); }

.window__day--in {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  background: rgba(23, 19, 10, .28);
}

.window__day--in.window__day--events { background: var(--reader); }

.window__scale {
  display: flex;
  justify-content: space-between;
  margin: .5rem 0 0;
  color: var(--muted);
  font-family: var(--slab);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.stages {
  display: grid;
  margin: 1rem 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .5rem;
  list-style: none;
}

.stage {
  border: 2px solid var(--hair);
  padding: .4rem .5rem;
  font-family: var(--slab);
  font-size: .76rem;
  line-height: 1.35;
}

.stage[data-proved="1"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bone);
}

.stage[data-proved="0"] { color: var(--muted); }

.stage__n {
  display: block;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* ---- the close ---- */

.close {
  position: relative;
  width: var(--measure);
  margin: clamp(30px, 5vw, 56px) auto 0;
  border-top: 3px solid var(--ink);
  padding: clamp(24px, 4vw, 44px) 0 clamp(26px, 4vw, 46px);
}

.close__label {
  margin: 0;
  color: var(--muted);
  font-family: var(--slab);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.close__title {
  margin: .5rem 0 1.2rem;
  font-family: var(--slab);
  font-size: clamp(1.5rem, 4.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.16;
}

/* The room again, emptied: the same field, the same three marks, nothing
   else standing in it. */
.floor {
  position: relative;
  height: clamp(120px, 22vw, 190px);
  border: 3px solid var(--ink);
  background: var(--marigold);
  overflow: hidden;
}

.floor__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, var(--deep) 0 30%, transparent 32%);
  background-size: 7px 7px;
}

.floor__mark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--reader);
  box-shadow: 0 0 0 7px rgba(200, 16, 46, .18);
}

.floor__mark--a { top: 30%; left: 22%; }
.floor__mark--b { top: 62%; left: 51%; }
.floor__mark--c { top: 38%; left: 78%; }

.close__reads {
  display: grid;
  margin: 1.3rem 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem 1.3rem;
  list-style: none;
}

.close__reads .read__value { font-size: min(1.85rem, 19cqi); }

.close__gloss {
  margin: 1.3rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- closing furniture, on the article measure ---- */

[data-scoop="closing"] {
  width: min(320px, 100%);
  margin-inline: auto;
  padding: clamp(18px, 3vw, 32px) 0 clamp(46px, 7vw, 70px);
  color: var(--ink);
}

/* The assembly is 320 fixed, so the site's compensating pull is not wanted. */
.scoop-substrate.story-page [data-scoop="closing"] > .reaction-assembly { margin-left: 0; }

.story-page [data-scoop="closing"] .base-matter,
.story-page [data-scoop="closing"] > p { color: var(--muted); 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(--slab);
  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(--muted); }

.scoop-substrate.story-page [data-scoop="closing"] nav a { color: var(--ink); }

/* ---- the running commentary a screen reader hears ---- */

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

/* ---- wide ---- */

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

  /* Both measures are fixed above the fold-down, so a rig authored in the
     body column steps out the same 64px each side to reach the frame. */
  .rig,
  .plate,
  .shot { margin-inline: -64px; }

  .plate { grid-template-columns: 148px 1fr; gap: 1.4rem; }
  .plate img { width: 148px; height: 148px; }

  /* The room is this story's staged moment: it owns the whole screen. */
  .rig--room {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(24px, calc(50vw - 360px));
    border-inline: 0;
  }
}

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

@media (max-width: 751px) {
  /* The column under 752px is 320px, the width of the fixed reaction
     assembly, so the article and the closing furniture stand on one measure. */
  .scoop-substrate.story-page {
    --measure: min(320px, 100% - 16px);
    --body-measure: min(320px, 100% - 16px);
  }

  /* The staged moment still owns the screen at a phone width. */
  .rig--room {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 10px;
    border-inline: 0;
  }

  .plot__mark::after { width: 16px; height: 16px; border-width: 2px; }

  .window__day { height: 34px; }
  .window { gap: 1px; }

  .gate__row { grid-template-columns: 1fr; }
  .gate__got { text-align: left; }

  .plate { grid-template-columns: 84px 1fr; }
  .plate img { width: 84px; height: 84px; }
}

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .room__breath { animation: none; opacity: .66; transform: none; }
  .room__grain,
  .room__grain--coarse { transform: none; }
  .plot__serves { clip-path: none; }
}

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

@media (forced-colors: active) {
  .act[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }

  .plot__mark,
  .floor__mark,
  .window__day--events { forced-color-adjust: none; background: Highlight; }

  .stage[data-proved="1"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .gate__row[data-on="0"] { opacity: 1; }
  .gate__row[data-on="0"] .gate__got::after { content: " (not arrived)"; }
  .gate__row[data-on="1"] .gate__who { forced-color-adjust: none; border-left-color: Highlight; }
  .window__day--in { forced-color-adjust: none; background: HighlightText; outline-color: Highlight; }
  .plot[data-mode="measured"] .plot__serves { display: none; }
}