@charset "utf-8";

/* =========================================================================
   Aster Shift — case study stylesheet.

   Visual mode (PROJECT_BRIEF): "Nocturnal full-bleed circadian timeline".

   Written from scratch for this page. It shares no rule and no token name with
   portfolio/wayfold/case-study.css or portfolio/tracelab/case-study.css, and the
   only class names in common with either are `.gnav`, `.gnav__in`, `.gnav__mark`
   and `.gnav__here` — the small global portfolio navigation Master Instruction
   §14 allows, restyled here for the night ground.

   Three structural commitments, none of which the two earlier case studies make:

   1. THE GROUND IS NIGHT. Both predecessors are printed on light paper and mount
      every capture inside a frame. This page is #0B1020 — the product's own
      ground — so a nocturnal screen capture laid straight onto it has no visible
      edge at all. That is the full bleed: the screens are not framed, they are
      the same darkness as the page.
   2. THE SECTIONS ARE HOURS. Not numbered stops and not lettered folios: each
      section opens with a timecode and a full-bleed rule whose colour is that
      hour's colour on the product's own arc — bronze while waking, amber inside
      the shift, cyan inside the sleep window. Reading down the page runs the
      night forward from 19:40 to 13:25 the next afternoon.
   3. NO DASHES. Wayfold reserves a dashed grammar for detours and TraceLab for
      anything provisional. Nothing on this page is dashed; the amber-to-cyan
      temperature carries the distinctions instead.

   Everything text-bearing sits on a solid colour. No text run anywhere has an
   ancestor carrying a background-image, because axe cannot compute a contrast
   ratio under one and reports the whole run as indeterminate — a page that
   reports 0 violations while leaving runs unmeasured has not been measured.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — the product's own two families, self-hosted, subset to Latin.
   No CDN and no external request of any kind is made by this page.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   Tokens. The five base colours are the product's (docs/build-pack/aster-shift/
   TOKENS.json); the four page grounds and three inks are this page's own, and
   every ink was checked against every ground before it was used.
   ------------------------------------------------------------------------- */
:root {
  --night: #0b1020;
  --panel: #121a30;
  --panel-2: #0e1526;
  --deep: #080c18;

  --ink: #f2f4fa;      /* 17.22:1 on night */
  --ink-2: #c3c9de;    /* 11.48:1 on night, 10.47:1 on panel */
  --ink-3: #9aa2bd;    /*  7.46:1 on night,  6.81:1 on panel */

  --amber: #f5b84b;    /* 10.67:1 on night — the shift */
  --cyan: #75d7d2;     /* 11.19:1 on night — the sleep window */
  --lavender: #e9e6ff; /* 15.53:1 on night — things that must be read */
  --track: #8c6c38;    /* the waking track. NON-TEXT: bands and rules only */

  --rule: #242c48;     /* NON-TEXT: hairlines only */
  --rule-2: #1a2138;

  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --pad: 28px;
  --page: 1180px;
  --measure: 68ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: 0.002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
}

a {
  color: var(--cyan);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--lavender);
}

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

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

/* The page-edge circadian gradient. Purely decorative: it carries no marker,
   no number and no link, so it is not a navigation device. It runs cool at the
   top of the frame and warm at the foot, the way the arc runs. */
.edge {
  position: fixed;
  inset: 0 auto 0 0;
  width: 3px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--track) 0%,
    var(--track) 12%,
    var(--amber) 26%,
    var(--amber) 62%,
    var(--track) 71%,
    var(--cyan) 82%,
    var(--cyan) 100%
  );
  opacity: 0.85;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.measure {
  max-width: var(--measure);
}

/* =========================================================================
   Global portfolio navigation — the ONE element §14 allows to be shared.
   Restyled for the night ground; the markup is the same three spans.
   ========================================================================= */
.gnav {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--rule);
  background: var(--deep);
}
.gnav__in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 13px var(--pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.gnav__mark {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.gnav__here {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gnav__here b {
  color: var(--amber);
  font-weight: 700;
}

/* =========================================================================
   Nightfall — the masthead. A full-bleed band of light, then the title on
   solid ground beneath it. Nothing is set over the image: no title crosses a
   raster anywhere on this page.
   ========================================================================= */
.nightfall {
  position: relative;
  background: var(--deep);
}
.nightfall__bleed {
  display: block;
  width: 100%;
  height: clamp(210px, 30vw, 380px);
  overflow: hidden;
  background: #04060d;
}
.nightfall__bleed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
.nightfall__plate {
  /* Horizontal padding restated: the shorthand would reset `.wrap`'s own. */
  padding: 42px var(--pad) 54px;
}
.nightfall__eyebrow {
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}
.nightfall__eyebrow b {
  color: var(--amber);
  font-weight: 500;
}
.nightfall h1 {
  margin: 0;
  font-size: clamp(52px, 9vw, 104px);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.nightfall__sub {
  margin: 14px 0 0;
  max-width: 30ch;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--amber);
}
.nightfall__lede {
  margin: 26px 0 0;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.66;
  color: var(--ink-2);
}

/* The log strip — mono key/value cells. Not a fact bar under a hero split:
   it is the shift itself, written the way the product writes it. */
/* Six cells in fixed columns, for the same reason `.counts` is: an auto-fit
   track count that does not divide the cell count leaves the 1 px gap grid
   painting a block of rule colour where the missing cells would be. */
.logstrip {
  margin: 38px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 899px) {
  .logstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.logstrip > div {
  margin: 0;
  padding: 16px 18px 18px;
  background: var(--panel-2);
}
.logstrip dt {
  margin: 0 0 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.logstrip dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.logstrip dd .cy {
  color: var(--cyan);
}

/* The night, at a glance — the page's own contents, as timecodes. */
.index {
  margin: 40px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.index__label {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.index ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.index a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--rule);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
}
.index a:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}
.index a::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--track);
}
.index li[data-band='shift'] a::before {
  background: var(--amber);
}
.index li[data-band='sleep'] a::before {
  background: var(--cyan);
}

/* =========================================================================
   The night — ten hours, in clock order.
   ========================================================================= */
.night {
  display: block;
}

.hour {
  padding: 0 0 8px;
}

/* The hour rule. Full bleed by construction: the bar is the last flex item and
   there is no right padding, so it runs off the right edge of the frame. The
   timecode's left offset is solved to land on the text column's left edge at
   every width, so the rules stack into one continuous left margin. */
.hour__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 66px 0 0;
  padding-left: max(var(--pad), calc(50% - (var(--page) / 2) + var(--pad)));
}
.hour__time {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.hour__band {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.hour__bar {
  flex: 1 1 auto;
  height: 4px;
  min-width: 24px;
  background: var(--track);
}
.hour--waking .hour__bar {
  background: var(--track); /* the base state, stated */
}
.hour--shift .hour__bar {
  background: var(--amber);
}
.hour--sleep .hour__bar {
  background: var(--cyan);
}
.hour--shift .hour__band {
  color: var(--amber);
}
.hour--sleep .hour__band {
  color: var(--cyan);
}

.hour h2 {
  margin: 26px 0 0;
  max-width: 22ch;
  font-size: clamp(30px, 3.7vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.hour h3 {
  margin: 44px 0 0;
  font-size: 20px;
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.hour h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.hour p {
  margin: 18px 0 0;
}
.hour h2 + p,
.hour h3 + p {
  margin-top: 14px;
}

/* Quoted product copy. Set in the product's own UI face at reading size, on a
   flat panel with an amber or cyan keyline — never in a speech-mark serif. */
.said {
  margin: 30px 0 0;
  padding: 20px 24px;
  border-left: 3px solid var(--amber);
  background: var(--panel-2);
}
.said p {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.said p + p {
  margin-top: 12px;
}
.said--cyan {
  border-left-color: var(--cyan);
}
.said__where {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

/* The aside device: a full-width inset panel between paragraphs. Neither
   predecessor uses one — Wayfold writes its asides into a right margin,
   TraceLab into a left one. This page has no margin column at all. */
.nightnote {
  margin: 34px 0 0;
  padding: 22px 24px 24px;
  background: var(--panel);
  border-top: 2px solid var(--rule);
}
.nightnote__label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavender);
}
.nightnote p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.nightnote p + p {
  margin-top: 12px;
}

.kbd {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
  background: var(--panel);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.val {
  font-family: var(--mono);
  font-size: 0.94em;
  color: var(--ink);
}
.cy {
  color: var(--cyan);
}

/* Negative list — what the product is not. */
.nots {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.nots li {
  padding: 14px 18px;
  background: var(--night);
  font-size: 16px;
  line-height: 1.5;
}
.nots b {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

/* =========================================================================
   Stills. No frame, no rule, no tilt, no numbered callout mark. The capture's
   own ground is #0B1020 and so is the page's, so a still laid here has no
   visible boundary — it bleeds into the night on all four sides.
   ========================================================================= */
.pane {
  margin: 44px 0 0;
}
.pane img {
  display: block;
  width: 100%;
  height: auto;
}
.pane figcaption,
.strip figcaption,
.loupes figcaption {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.62;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.pane figcaption b,
.strip figcaption b,
.loupes figcaption b {
  color: var(--ink-2);
  font-weight: 500;
}

/* A still flush to one edge of the frame with the prose beside it. */
.split {
  display: grid;
  gap: 40px;
  align-items: center;
  margin: 40px 0 0;
}
.split__pane img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}
.split__side > :first-child {
  margin-top: 0;
}
.split__side p {
  margin: 0;
}
.split__side p + p,
.split__side h3 + p {
  margin-top: 16px;
}
.split__side h3 {
  margin: 26px 0 12px;
}
.split__side .said {
  margin-top: 22px;
}

@media (min-width: 900px) {
  .split--left {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    padding-right: max(var(--pad), calc(50% - (var(--page) / 2) + var(--pad)));
  }
  .split--right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    padding-left: max(var(--pad), calc(50% - (var(--page) / 2) + var(--pad)));
  }
  .split--right .split__pane {
    order: 2;
  }
  .split--right .split__side {
    order: 1;
  }
  .split__side {
    max-width: 56ch;
  }
}
@media (max-width: 899px) {
  .split {
    padding: 0;
    gap: 26px;
  }
  .split__side {
    padding: 0 var(--pad);
  }
  .split__pane img {
    max-width: none;
  }
}

/* Three edges, three screens, laid contiguously across the whole frame with no
   gutter between them, so they read as one unbroken band of night. */
.strip {
  margin: 46px 0 0;
}
.strip__band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--night);
}
.strip__band img {
  display: block;
  width: 100%;
  height: auto;
}
.strip figcaption {
  padding: 0 var(--pad);
  max-width: var(--page);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 719px) {
  .strip__band {
    grid-template-columns: 1fr;
  }
}

/* The hero still, centred and large. */
.pane--hero img {
  max-width: 460px;
  margin: 0 auto;
}
.pane--hero figcaption {
  max-width: var(--page);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--pad);
}

/* A wide band cut out of a full-frame capture — the only place a still is
   cropped, and it is cropped because that screen IS a full-frame image. */
.pane--band {
  margin: 46px 0 0;
}
.pane--band .pane__window {
  height: clamp(200px, 26vw, 330px);
  overflow: hidden;
  background: #04060d;
}
.pane--band .pane__window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.pane--band figcaption {
  max-width: var(--page);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--pad);
}

/* Loupes — windows onto the capture painted at the capture's own device
   resolution, so one image pixel is one page pixel. Used once, on the defect
   that failed the first review, because that defect is only visible magnified. */
.loupes {
  margin: 40px 0 0;
}
.loupes__pair {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 760px;
}
.loupe {
  margin: 0;
}
/* The window carries the capture as a background rather than as an <img>: an
   image element at its own 1170 × 2532 keeps a client rect that size whatever
   its parent clips, and axe then treats every text run the rect crosses as
   overlapped and reports its contrast indeterminate. `background-size: auto`
   holds the one-image-pixel-to-one-page-pixel scale, and the alternative text
   moves onto the window as role="img" + aria-label. */
.loupe__window {
  width: 100%;
  height: 200px;
  background-color: var(--night);
  background-image: url('assets/stills/st-01-today-default.webp');
  background-repeat: no-repeat;
  background-size: auto;
  border: 1px solid var(--rule);
}
.loupe__window--a {
  background-position: -861px -446px;
}
.loupe__window--b {
  background-position: 0 -1046px;
}
.loupe figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* =========================================================================
   The departure board — the task flow, printed the way a night's transitions
   would be. Not a route to walk and not a chain of custody: a timetable, with
   one decided trigger per departure.
   ========================================================================= */
.board {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.board > li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--rule);
}
.board__id {
  grid-row: 1 / span 2;
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--amber);
}
.board__leg {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--ink);
}
/* Drawn, not written. An element whose only content is a lone glyph is one axe
   cannot score for contrast — it reports "content contains only non-text
   characters" and leaves the run indeterminate — so the arrow is generated
   content and the reading order carries a real "to" in `.sr-only`. */
.board__leg .arrow {
  color: var(--ink-3);
  font-weight: 400;
  padding: 0 6px;
}
.board__leg .arrow::before {
  content: '\2192';
}
.board__trigger {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 599px) {
  .board > li {
    grid-template-columns: 1fr;
  }
  .board__id {
    grid-row: auto;
  }
}

.diversions {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}
.diversion {
  padding: 18px 22px 20px;
  background: var(--panel-2);
  border-left: 3px solid var(--cyan);
}
.diversion__id {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cyan);
}
.diversion p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}
.exits {
  margin: 14px 0 0;
  display: grid;
  gap: 8px 16px;
  grid-template-columns: 84px minmax(0, 1fr);
}
.exits dt {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.exits dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* =========================================================================
   The take.
   ========================================================================= */
.reel {
  margin: 44px 0 0;
}
.reel video {
  display: block;
  width: 100%;
  max-width: 390px;
  height: auto;
  background: var(--night);
}
.reel__specs {
  margin: 20px 0 0;
  display: grid;
  gap: 2px 20px;
  grid-template-columns: 132px minmax(0, 1fr);
  max-width: 620px;
}
.reel__specs dt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.reel__specs dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* -------------------------------------------------------------------------
   Access to the running build, published beside this page at prototype/.
   Kept in the night grammar: a raised panel, a mono label, square corners, and
   a solid ground under every text run so nothing here is unmeasurable. The
   marker rule is cyan — this block is the sleep side of the arc, the part of
   the night the reader arrives at after the take.
   ------------------------------------------------------------------------- */
.livebuild {
  margin: 44px 0 0;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cyan);
  padding: 24px 26px 22px;
}
.livebuild__label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.livebuild__h {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.livebuild__line {
  margin: 0 0 18px;
  max-width: var(--measure);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.livebuild p:last-child {
  margin-bottom: 0;
}
.livebuild__cta {
  display: inline-block;
  padding: 11px 20px;
  background: var(--amber);
  color: var(--deep);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.livebuild__cta:hover {
  background: var(--lavender);
}
.livebuild__cta:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 3px;
}
.livebuild__spec {
  margin-top: 22px;
}
@media (max-width: 599px) {
  .livebuild {
    padding: 20px 18px 18px;
  }
  .livebuild__h {
    font-size: 19px;
  }
}

/* =========================================================================
   Measurement blocks.
   ========================================================================= */
/* Six tiles in fixed columns rather than auto-fit: a track count that does not
   divide six leaves a half-empty row, and the 1 px gap grid paints that gap as a
   block of rule colour. */
.counts {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 899px) {
  .counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 479px) {
  .counts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.counts li {
  padding: 16px 16px 18px;
  background: var(--panel-2);
}
.counts b {
  display: block;
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.counts span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--ink-3);
}
.counts li[data-zero='true'] b {
  color: var(--cyan);
}
.counts li[data-open='true'] b {
  color: var(--amber);
}

.gauge {
  margin: 28px 0 0;
  border-top: 1px solid var(--rule);
}
.gauge > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.gauge dt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.gauge dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.gauge dd.zero {
  color: var(--cyan);
}
.gauge dd.open {
  color: var(--amber);
}

/* Per-screen coverage, as stacked rows rather than a matrix that would need a
   sideways scroller at 390. Nothing on this page scrolls sideways. */
.screens {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.screens li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.screens__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.screens__tally {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
}
.screens__tally b {
  color: var(--ink);
  font-weight: 500;
}
.screens__ids {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--ink-3);
  word-break: break-word;
}

/* The two review rounds, scored. */
.rounds {
  margin: 0;
  border-top: none;
}
/* Outside the <dl>, because a definition list may not hold a row of spans. */
.rounds__head {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 74px;
  gap: 4px 12px;
  align-items: baseline;
  padding: 0 0 8px;
  border-top: 1px solid var(--rule);
  padding-top: 11px;
  border-bottom: 1px solid var(--rule);
}
.rounds > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 74px;
  gap: 4px 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.rounds dt {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-2);
}
.rounds dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  text-align: right;
  color: var(--ink-3);
}
.rounds dd.now {
  color: var(--ink);
}
.rounds dd.fail {
  color: var(--amber);
}
.rounds__head span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}
.rounds__head span:first-child {
  text-align: left;
}

/* Code, soft-wrapped. A line wider than its own scroller keeps a client rect
   wider than that scroller, and axe then calls the whole block's contrast
   indeterminate — so nothing here scrolls sideways either. */
.listing {
  margin: 26px 0 0;
  background: var(--deep);
  border-left: 3px solid var(--rule);
}
.listing figcaption {
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.listing figcaption b {
  color: var(--ink-2);
  font-weight: 500;
}
.listing pre {
  margin: 0;
  padding: 18px 20px 20px;
  overflow: visible;
}
.listing code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.installed {
  margin: 26px 0 0;
  display: grid;
  gap: 2px 20px;
  grid-template-columns: 210px minmax(0, 1fr);
}
.installed dt {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  padding-top: 2px;
  word-break: break-word;
}
.installed dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 599px) {
  .installed,
  .reel__specs,
  .exits {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .installed dd,
  .reel__specs dd,
  .exits dd {
    margin-bottom: 12px;
  }
}

/* =========================================================================
   Daybreak — the endsheet.
   ========================================================================= */
.daybreak {
  margin-top: 80px;
  background: var(--deep);
  border-top: 1px solid var(--rule);
}
.daybreak__bleed {
  display: block;
  width: 100%;
  height: clamp(150px, 20vw, 250px);
  overflow: hidden;
  background: #04060d;
}
.daybreak__bleed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.daybreak__in {
  padding: 44px var(--pad) 60px;
}
.daybreak h2 {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.daybreak p {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.declaration {
  margin: 26px 0 0;
  padding: 18px 22px;
  background: var(--night);
  border-left: 3px solid var(--lavender);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
}
.imprint {
  margin: 30px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}

@media (max-width: 599px) {
  :root {
    --pad: 20px;
  }
  body {
    font-size: 16.5px;
  }
  .hour__head {
    gap: 12px;
    padding-top: 52px;
  }
  .nightfall__plate {
    padding: 32px var(--pad) 40px;
  }
  .logstrip {
    grid-template-columns: 1fr;
  }
}

@media print {
  .edge {
    display: none;
  }
}