/* Golden Image -- a 90s PC magazine you turn the pages of.
 *
 * Reference: PC Zone (Dennis, 1996), PC Plus, Computer Shopper. What actually makes those
 * pages look like those pages is DENSITY -- body copy set small, three or four columns of
 * it, hairline rules everywhere, kicker bars in a spot colour, and headlines that are big
 * relative to the type around them rather than big in absolute terms. A modern web page
 * with 16px body copy and generous whitespace cannot be rescued by a paper texture.
 *
 * Type is sized in cqw against the leaf, so a page scales as a printed page does: the
 * whole thing gets bigger or smaller together and the layout never reflows into a blog.
 *
 * Deliberately NOT the Nerdio design system. This is Wayne's personal project.
 */

:root {
  --paper:      #F3EEE2;
  --paper-2:    #E7DFCC;
  --paper-3:    #DCD2BB;
  --ink:        #16130E;
  --ink-soft:   #46402F;
  --rule:       #16130E;

  --blue:       #1B2E8C;
  --blue-deep:  #0E1745;
  --red:        #D3122F;
  --cyan:       #0B8FA0;
  --yellow:     #F5C518;
  --green:      #0F7A3D;

  --font-display: "Archivo Black", "Haettenschweiler", "Arial Black", sans-serif;
  --font-cond:    "Archivo Narrow", "Arial Narrow", sans-serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  --desk:       #2A2724;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 42%, #3C3833 0%, #211E1B 62%, #141210 100%);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ---------- the stage ---------- */

.stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: pan-y;
}

.book {
  position: relative;
  width: calc(var(--leaf-w) * 2);
  height: var(--leaf-h);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  transform-style: flat;
}
.book.single { width: var(--leaf-w); }
.book.dragging, .book.turning { transition: none; }
.book.grabbable { cursor: grab; }
.book.dragging  { cursor: grabbing; }

/* The stack of pages you have not read yet, seen edge-on. Cheap, and it is the thing
   that stops a two-page spread reading as two divs side by side. */
.book::before,
.book::after {
  content: "";
  position: absolute;
  top: .6%;
  bottom: .6%;
  width: 9px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.55) 0 1px, rgba(0,0,0,.20) 1px 2px,
      rgba(255,255,255,.30) 2px 3px, rgba(0,0,0,.10) 3px 4px);
  background-color: var(--paper-3);
  z-index: 0;
  pointer-events: none;
}
.book::before { left: -9px;  border-radius: 3px 0 0 3px; box-shadow: -3px 3px 9px rgba(0,0,0,.5); }
.book::after  { right: -9px; border-radius: 0 3px 3px 0; box-shadow:  3px 3px 9px rgba(0,0,0,.5); }
.book.closed::before, .book.at-end::after { opacity: 0; }

.leaf {
  position: absolute;
  top: 0;
  width: var(--leaf-w);
  height: var(--leaf-h);
  background: var(--paper);
  overflow: hidden;
  /* size, not inline-size: the cover art is sized off the page HEIGHT, and cqh needs a
     definite block axis. The leaf has both dimensions pinned, so this is safe. */
  container-type: size;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
/* Set by the solver while a page is lifted off this leaf. */
.leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #0B0906;
  opacity: var(--shade, 0);
}
.leaf-left  { left: 0; }
.leaf-right { left: var(--leaf-w); }
.book.single .leaf-right { display: none; }
.leaf.blank { background: transparent; box-shadow: none; }

/* The fold. Two gradients meeting at the spine, plus the hard line where the paper
   creases -- one gradient across the middle reads as a smudge, not a fold. */
.gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--leaf-w) - 4.6%);
  width: 9.2%;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,.045) 32%,
      rgba(0,0,0,.20)  47%,
      rgba(0,0,0,.34)  49.6%,
      rgba(0,0,0,.10)  50%,
      rgba(0,0,0,.34)  50.4%,
      rgba(0,0,0,.20)  53%,
      rgba(0,0,0,.045) 68%,
      rgba(0,0,0,0)    100%);
}
.book.closed .gutter, .book.single .gutter, .book.at-end .gutter { opacity: 0; }

/* ---------- the turning leaf ---------- */

.flip {
  position: absolute;
  top: 0;
  left: var(--leaf-w);
  width: var(--leaf-w);
  height: var(--leaf-h);
  z-index: 6;
  pointer-events: none;
  visibility: hidden;
}
.flip.active { visibility: visible; }

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow: hidden;
}
.flip-front { container-type: size; }

/* The back of the leaf. Its content is pre-mirrored so the reflection puts it the right
   way round when the page lands flat. */
.flip-back {
  transform-origin: 0 0;
  /* One drop-shadow, not two: the filter re-runs over the whole flap every frame and a
     second pass costs more than the extra softness is worth. */
  filter: drop-shadow(-7px 11px 20px rgba(0,0,0,.5));
  background: var(--paper);
  will-change: transform, clip-path;
}
.flip-back-inner {
  position: absolute;
  inset: 0;
  transform: scaleX(-1);
  transform-origin: 50% 50%;
  container-type: size;
  background: var(--paper);
  overflow: hidden;
}
.flip[data-from="left"] .flip-back-inner { transform: scaleX(-1); }

/* Shading bands. Each is a long strip laid along the crease and rotated to it by the
   solver, so the light sits exactly on the fold instead of washing over the page. */
.band {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
/* Thrown down onto the page the flap has just uncovered. This is the band that makes the
   crease legible, so it is deliberately heavier than physics alone would justify. */
.band-cast {
  height: 220px;
  background: linear-gradient(180deg,
    rgba(0,0,0,.58) 0, rgba(0,0,0,.34) 10px, rgba(0,0,0,.16) 46px,
    rgba(0,0,0,.06) 110px, rgba(0,0,0,0) 100%);
}
/* The flap's own surface going dark as it folds away from the light. */
.band-fold {
  height: 300px;
  background: linear-gradient(180deg,
    rgba(0,0,0,.46) 0, rgba(0,0,0,.22) 26px, rgba(0,0,0,.06) 96px, rgba(0,0,0,0) 180px,
    rgba(255,255,255,.18) 100%);
}
/* The lit edge of the sheet at the fold, with the paper's own thickness under it. Three
   pixels, and the flap stops looking like a clipping mask. */
.band-edge {
  height: 5px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.95) 0 2px, rgba(190,178,152,.85) 2px 3px, rgba(0,0,0,.18) 3px 5px);
}

/* Off-screen home for pages that are not currently on a leaf. Laid out, never seen.
   Not display:none and not visibility:hidden -- both skip the layout this exists to do. */
.warm {
  position: absolute;
  left: -200vw;
  top: 0;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}

/* The fitter hides overflowing items rather than deleting them, so this has to win over
   any display the component sets for itself. */
[hidden] { display: none !important; }

/* ---------- the page ---------- */

.page {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.4cqw 3.6cqw 3.6cqw;
  background: var(--paper);
  /* Everything below is em-relative to this, so the page scales as one object.
     A 1996 page set body copy at about 1.4% of the trim width; anything near 2% reads
     as a web page no matter what typefaces are on it. Held just above that, because
     this one has to survive being read on a screen rather than held at 30cm. */
  font-size: clamp(10px, 1.5cqw, 21px);
  line-height: 1.3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Paper grain, baked rather than filtered live -- an SVG filter re-runs the noise on
   every paint and a page turn paints 60 times a second. */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  /* No mix-blend-mode. Over cream paper multiply and normal are near-identical, and the
     blend forced the grain out of the compositor: with it on, a page turn ran 47fps with
     24 of 50 frames past 24ms. Off, the same turn holds ~70. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  z-index: 4;
}
.page > * { position: relative; z-index: 1; }

/* ---------- running head and folio ---------- */

.runhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-cond);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: .3em;
  margin-bottom: .9em;
  border-bottom: 2px solid var(--rule);
  flex: 0 0 auto;
}
.runhead .section { color: var(--red); }
.runhead .date { color: var(--ink-soft); font-weight: 400; }

.folio {
  margin-top: auto;
  padding-top: .4em;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-cond);
  font-size: .74em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.folio .n {
  font-family: var(--font-display);
  font-size: 1.5em;
  color: var(--ink);
  letter-spacing: -.02em;
}
.page-left  .folio { flex-direction: row; }
.page-right .folio { flex-direction: row-reverse; }

/* ---------- section furniture ---------- */

.sec-head {
  font-family: var(--font-display);
  font-size: 2.5em;
  line-height: .92;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.sec-head .hl { color: var(--red); }
.sec-strap {
  font-family: var(--font-cond);
  font-size: .84em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  display: inline-block;
  padding: .18em .6em;
  margin: .45em 0 0;
}
.sec-rule {
  height: 0;
  border-bottom: 3px solid var(--ink);
  margin: .55em 0 .8em;
  box-shadow: 0 3px 0 0 var(--red);
}

/* Kicker bar -- the red slab with white type that every one of these magazines used to
   label a department. */
.kicker {
  display: inline-block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .74em;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: .16em .55em;
  margin-bottom: .35em;
}
.kicker.blue { background: var(--blue); }
.kicker.ink  { background: var(--ink); }

/* The printed screen grab. Chunky window chrome, a phosphor-green terminal body and a
   hard caption rule -- the way a 1996 page reproduced a screen. */
.screen {
  margin: 0 0 .7em;
  break-inside: avoid;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.screen-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5em;
  background: var(--blue);
  color: #fff;
  padding: .12em .4em;
  font-family: var(--font-cond);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
}
.screen-btns { letter-spacing: .18em; opacity: .8; }
.screen-body {
  background: #0A1410;
  padding: .5em .55em .6em;
  font-family: var(--font-mono);
  color: #7CE3A6;
}
.screen-head {
  font-size: .9em;
  line-height: 1.24;
  color: #EAFBF0;
  margin-bottom: .4em;
  overflow-wrap: break-word;
}
.screen-line { font-size: .78em; line-height: 1.5; white-space: pre; overflow: hidden;
               text-overflow: ellipsis; }
.screen figcaption { background: var(--paper); border-top: 0; margin: 0; padding: .18em .3em 0; }

/* The picture on a community page: the author's own header image, printed. Desaturated
   and contrast-lifted so a screengrab sits on paper instead of glowing off it. */
.entry .art { margin: 0 0 .35em; break-inside: avoid; }
.entry .art img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid var(--ink);
  filter: grayscale(.45) contrast(1.14) sepia(.16);
}
/* The lead runs across the whole measure with the picture blown up. Two pictures boxed
   to the same width and set at the same size is a contact sheet, not a page. */
.entry.lead {
  column-span: all;
  border-bottom: 3px double var(--rule);
  padding-bottom: .7em;
  margin-bottom: .8em;
}
.entry.lead .art img { aspect-ratio: 21 / 4.5; }
.entry.lead h3 { font-size: 1.75em; font-family: var(--font-display); line-height: .98;
                 letter-spacing: -.02em; }
.entry.lead p { font-size: .98em; columns: 3; column-gap: 1.1em; }
.entry.lead p::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 2.4em;
  line-height: .78;
  padding: .04em .1em 0 0;
  color: var(--red);
}

/* The register drawn as bars. Ink on the page, and the only thing here that shows the
   shape of the quarter rather than listing it. */
.chart {
  margin: 0 0 .7em;
  break-inside: avoid;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: .3em 0 .35em;
  background: var(--paper-2);
}
.chart-head {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .78em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  padding: 0 .35em .25em;
}
.chart-rows { display: grid; gap: .18em; padding: 0 .35em; }
.chart-row { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: .4em;
             align-items: center; }
.chart-label {
  font-family: var(--font-cond);
  font-size: .72em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chart-track { background: repeating-linear-gradient(90deg,
  rgba(22,19,14,.16) 0 1px, transparent 1px 12px); height: 1.05em; }
.chart-bar {
  height: 100%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: .25em;
}
.chart-bar span { font-family: var(--font-mono); font-size: .62em; color: #fff; }
.chart-row.urgent .chart-bar { background: var(--red); }
.chart-axis {
  font-family: var(--font-mono);
  font-size: .62em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .2em .35em 0 6em;
}

/* A colour that runs off the trim. Every one of these magazines had one per spread and
   its absence is most of why a page reads as timid. */
.page::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34%;
  height: .9cqw;
  background: var(--red);
  z-index: 2;
}
.page.cover::after, .page.backcover::after { display: none; }

/* ---------- the news well ---------- */

.well {
  columns: 3;
  column-gap: 1.1em;
  column-rule: 1px solid rgba(22,19,14,.38);
  /* balance, not auto: auto packs column one to the foot and leaves column three half
     empty, which is the single clearest tell that a page was flowed rather than laid out. */
  column-fill: balance;
  flex: 1 1 auto;
  overflow: hidden;
}
.well.two { columns: 2; column-gap: 1.35em; }
.well.one { columns: 1; }

.story {
  break-inside: avoid;
  margin: 0 0 .85em;
  padding-bottom: .7em;
  border-bottom: 1px solid rgba(22,19,14,.28);
}
.story:last-child { border-bottom: 0; }
.story h3 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.28em;
  line-height: 1.06;
  margin: 0 0 .2em;
  text-wrap: pretty;
}
.story h3 a { color: var(--ink); text-decoration: none; }
.story h3 a:hover { color: var(--red); }
.story p { margin: 0; font-size: .93em; line-height: 1.33; color: var(--ink-soft); }
.story .meta {
  font-family: var(--font-mono);
  font-size: .72em;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-top: .25em;
}

/* The lead story spans the well and gets a drop cap, like the real thing. */
.story.lead {
  column-span: all;
  border-bottom: 3px double var(--rule);
  padding-bottom: .8em;
  margin-bottom: .9em;
}
.story.lead h3 {
  font-family: var(--font-display);
  font-size: 2.05em;
  line-height: .95;
  letter-spacing: -.02em;
  margin-bottom: .25em;
}
.story.lead p:not(.standfirst) { font-size: 1em; columns: 2; column-gap: 1.5em; }
/* Scope the drop cap to the body, not to whatever paragraph happens to be first --
   with a standfirst above it you otherwise get two initials fighting each other. */
.story.lead p:not(.standfirst)::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 2.5em;
  line-height: .76;
  padding: .04em .1em 0 0;
  color: var(--red);
}

/* ---------- furniture ----------
   The thing that separates a laid-out page from a list of articles: panels, quotes,
   captions and jump lines, each set differently, so the eye has somewhere to land after
   the top third of the page. */

.standfirst {
  font-family: var(--font-cond);
  font-size: 1.12em;
  line-height: 1.16;
  color: var(--ink-soft);
  margin: 0 0 .35em;
  column-span: all;
}
.byline {
  font-family: var(--font-cond);
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .2em;
}

.pullquote {
  break-inside: avoid;
  margin: 0 0 .7em;
  padding: .5em 0 .5em .55em;
  border-left: .4em solid var(--red);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper-2);
}
.pullquote q {
  quotes: "“" "”";
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.32em;
  line-height: 1.06;
  display: block;
}
.pullquote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-cond);
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .3em;
}

/* Reversed panel. Every one of these magazines had one per spread and it is most of
   why the pages look like they were designed rather than assembled. */
.numbers {
  break-inside: avoid;
  background: var(--blue);
  color: #fff;
  padding: .5em .6em .6em;
  margin: 0 0 .7em;
}
.numbers h4 {
  font-family: var(--font-display);
  font-size: 1.15em;
  text-transform: uppercase;
  margin: 0 0 .3em;
  color: var(--yellow);
  letter-spacing: -.01em;
}
.numbers dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
              gap: .12em .5em; align-items: baseline; }
.numbers dt {
  font-family: var(--font-display);
  font-size: 1.35em;
  line-height: 1;
  color: #fff;
  text-align: right;
}
.numbers dd {
  margin: 0;
  font-family: var(--font-cond);
  font-size: .8em;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #D9E0FF;
}

.caption {
  font-family: var(--font-cond);
  font-size: .72em;
  line-height: 1.16;
  letter-spacing: .03em;
  color: var(--ink-soft);
  border-top: 1px solid var(--ink);
  padding-top: .18em;
  margin-top: .2em;
}
.caption b { color: var(--ink); text-transform: uppercase; letter-spacing: .1em;
             font-size: .92em; }

.jump {
  font-family: var(--font-cond);
  font-size: .76em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  text-align: right;
  border-top: 2px solid var(--red);
  padding-top: .18em;
  margin-top: .3em;
  break-inside: avoid;
}

/* Long Microsoft tokens are wider than a column and used to run straight off the paper. */
.sec-head, .story h3, .entry h3, .video h3, .diary a, .contents a {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
/* The cover line is the exception: it wraps between words or not at all. A cover that
   ships "SIGN- / IN" is a cover nobody proofed. */
.cover-head {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Tag strip. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25em;
  margin-bottom: .25em;
  font-family: var(--font-cond);
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.tag { padding: .1em .45em; border: 0; background: var(--ink); color: var(--paper); }
.tag.product { background: var(--blue); color: #fff; border-color: var(--blue); }
.tag.act-now { background: var(--red);  color: #fff; border-color: var(--red); }
.tag.plan    { background: var(--yellow); }
.tag.sec     { background: var(--ink); color: var(--paper); }
.tag.type    { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- boxouts ---------- */

.diary {
  background: var(--ink);
  color: var(--paper);
  padding: .7em .8em .8em;
  margin-top: .7em;
  break-inside: avoid;
  column-span: all;
}
.diary h3 {
  font-family: var(--font-display);
  font-size: 1.5em;
  text-transform: uppercase;
  margin: 0;
  color: var(--yellow);
}
.diary .why {
  font-family: var(--font-cond);
  font-size: .78em;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
  margin: .1em 0 .5em;
}
.diary ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.2em; }
.diary li {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  gap: .5em;
  align-items: baseline;
  padding: .28em 0;
  border-top: 1px solid rgba(243,238,226,.22);
  break-inside: avoid;
}
.diary .days {
  font-family: var(--font-display);
  font-size: 1.3em;
  line-height: 1;
  color: var(--yellow);
  text-align: right;
}
.diary .days small {
  display: block;
  font-family: var(--font-cond);
  font-size: .48em;
  letter-spacing: .14em;
  opacity: .7;
}
.diary .urgent .days { color: var(--red); }
.diary a { color: var(--paper); text-decoration: none; font-family: var(--font-cond);
           font-weight: 700; font-size: .95em; line-height: 1.1; display: block; }
.diary a:hover { text-decoration: underline; }
.diary em { display: block; font-style: normal; font-size: .72em; opacity: .62;
            font-family: var(--font-cond); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- entries, video, wire ---------- */

.entry {
  break-inside: avoid;
  margin: 0 0 .6em;
  padding-bottom: .5em;
  border-bottom: 1px solid rgba(22,19,14,.26);
}
.entry .byline {
  font-family: var(--font-cond);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}
.entry h3 { margin: .1em 0 .15em; font-family: var(--font-cond); font-weight: 700;
            font-size: 1.16em; line-height: 1.08; }
.entry h3 a { color: var(--ink); text-decoration: none; }
.entry h3 a:hover { color: var(--red); }
.entry p { margin: 0; font-size: .9em; line-height: 1.3; color: var(--ink-soft); }
.entry .meta { font-family: var(--font-mono); font-size: .7em; color: var(--ink-soft); }

.watch { columns: 3; column-gap: 1.15em; flex: 0 0 auto; column-fill: balance; }
.video {
  break-inside: avoid;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  margin-bottom: .6em;
}
.video .thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 2px solid var(--ink);
  /* Cheap halftone: desaturate and lift contrast so a YouTube grab sits on the paper
     instead of glowing off it. */
  filter: grayscale(1) contrast(1.28) brightness(1.04) sepia(.55)
          hue-rotate(178deg) saturate(1.9);
}
.video .body { padding: .35em .45em .45em; }
.video .chan {
  font-family: var(--font-cond);
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--red);
}
.video h3 { font-family: var(--font-cond); font-weight: 700; font-size: 1.05em;
            line-height: 1.08; margin: .1em 0 0; }
.video h3 a { color: var(--ink); text-decoration: none; }
.video .views { font-family: var(--font-mono); font-size: .7em; color: var(--ink-soft); }

/* A second section sharing a page picks up again below the first. */
.sec-head.sub { margin-top: .8em; }
.well.wire { flex: 1 1 auto; }

/* The Wire. Few items, set big -- the page reads as an opinion column instead of a
   half-empty list. */
.well.wire .entry {
  padding: 1.1em 0 1.2em;
  border-bottom: 2px solid var(--rule);
}
.well.wire .entry:first-child { border-top: 2px solid var(--rule); }
.well.wire .byline { font-size: .82em; letter-spacing: .16em; }
.well.wire .entry h3 {
  font-family: var(--font-display);
  font-size: 1.75em;
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: .2em 0 .15em;
}
.well.wire .entry h3 a { color: var(--ink); }
.well.wire .meta { font-size: .82em; }

/* A video's note is copy, not a caption: it earns full body size. */
.video-note {
  margin: .2em 0 0;
  font-size: .88em;
  line-height: 1.3;
  color: var(--ink-soft);
}
.well.wire .entry p {
  font-size: 1.1em;
  line-height: 1.32;
  margin: .2em 0 0;
  color: var(--ink-soft);
}

.quote {
  background: var(--paper-2);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: .7em .8em;
  margin-bottom: .7em;
  column-span: all;
  break-inside: avoid;
}
.quote blockquote {
  margin: 0 0 .35em;
  font-size: 1.2em;
  line-height: 1.24;
  font-style: italic;
}
.quote .attrib {
  font-family: var(--font-cond);
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.quote .attrib a { color: var(--blue); }

/* ---------- the cover ---------- */

.page.cover { padding: 0; }
.cover-inner {
  position: relative;
  height: 100%;
  padding: 2cqw 3.2cqw 3cqw;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(168deg, #10173F 0%, #1B2E8C 44%, #2B1246 100%);
  color: #fff;
}
/* The cut-out subject, sitting above the masthead. */
.cover-cutout {
  position: absolute;
  z-index: 4;
  top: 3cqh;
  right: -11cqw;
  width: 36cqw;
  pointer-events: none;
}
.cover-cutout img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(-.06em .1em .25em rgba(0,0,0,.65));
}

/* The starburst. Hot orange against the navy, angled, overlapping the coverline rules so
   it breaks its own box the way a printed flash does. */
.cover-burst {
  position: absolute;
  left: 3cqw;
  right: auto;
  bottom: 60cqh;
  z-index: 3;
  width: 15cqw;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .1em;
  transform: rotate(-9deg);
  background: radial-gradient(circle at 50% 50%, #FF7A18 0 58%, #E03A0B 58% 100%);
  clip-path: polygon(50% 0%, 61% 20%, 84% 13%, 80% 36%, 100% 50%, 80% 64%, 84% 87%,
                     61% 80%, 50% 100%, 39% 80%, 16% 87%, 20% 64%, 0% 50%, 20% 36%,
                     16% 13%, 39% 20%);
  filter: drop-shadow(.1em .12em 0 rgba(0,0,0,.55));
  pointer-events: none;
}
.cover-burst b {
  font-family: var(--font-display);
  font-size: 2.3em;
  line-height: .8;
  color: #fff;
}
.cover-burst span {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .84em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #23120A;
  max-width: 8ch;
  line-height: 1;
}
.cover-burst em {
  font-style: normal;
  font-family: var(--font-cond);
  /* A star is only about 60% as wide as its box at the line the reference sits on, and
     "Full register, p3" ran out through both points: the page printed "ULL REGISTER, P".
     Letting it wrap instead was worse -- three stacked fragments running out of the
     bottom spike. One line, small enough to sit inside the star's waist. */
  font-size: .9em;
  letter-spacing: .02em;
  white-space: nowrap;
  line-height: 1;
  text-transform: uppercase;
  color: #3A1B0C;
}

/* The photograph. It runs to all four trims, under the masthead and behind the type,
   darkened just enough that knockout white holds against it. */
.cover-art-bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cover-art-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-art-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,30,.20) 0%, rgba(8,10,30,.10) 30%,
      rgba(8,10,30,.46) 60%, rgba(8,10,30,.92) 100%);
}
/* With art behind it the cover-inner is a scrim, not a fill. */
.page.cover:has(.cover-art-bleed) .cover-inner { background: none; }
.page.cover:has(.cover-art-bleed) .cover-inner::before { opacity: .22; }

/* Texture behind the type. A flat fill reads as a slide; a halftone field and a hard
   diagonal read as something that went through a press. */
.cover-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,.30) 22%, transparent 23%),
    linear-gradient(115deg, transparent 38%, rgba(245,197,24,.16) 38%,
      rgba(245,197,24,.16) 46%, transparent 46%),
    linear-gradient(115deg, transparent 52%, rgba(211,18,47,.22) 52%,
      rgba(211,18,47,.22) 57%, transparent 57%);
  background-size: 13px 13px, 100% 100%, 100% 100%;
  opacity: .5;
}
.cover-inner > *:not(.cover-burst) { position: relative; z-index: 1; }

/* A cover is an object with a spine, so it gets a spine. */
.page.cover::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3.2%;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0));
  z-index: 3;
  pointer-events: none;
}

/* Stacked, like every masthead of the period -- one word per line, set as large as the
   trim will take. A single line long enough to say "Golden Image" has to be small, and a
   small masthead is the one thing a newsstand cover cannot have. */
.masthead {
  font-family: var(--font-display);
  font-size: 23.5cqw;
  line-height: .74;
  letter-spacing: -.055em;
  text-transform: uppercase;
  margin: 0 0 .04em;
  color: #fff;
  text-shadow: .03em .035em 0 rgba(0,0,0,.75), 0 0 .5em rgba(0,0,0,.5);
}
.masthead span { display: block; }
.masthead .g2 { color: var(--yellow); }
.mast-rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8em;
  font-family: var(--font-cond);
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: .25em;
  padding: .28em 0;
  border-top: 4px solid var(--yellow);
  border-bottom: 1px solid rgba(255,255,255,.5);
  color: #fff;
}

/* The corner flash, on the diagonal, exactly like the free-disk shouts of the period. */
.cover-flash {
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  aspect-ratio: 1;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.cover-flash span {
  position: absolute;
  top: 16%;
  right: -32%;
  width: 128%;
  transform: rotate(45deg);
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05em;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  padding: .5em 0;
  box-shadow: 0 .18em .5em rgba(0,0,0,.45);
}

/* The middle of the cover. Left to itself it was 40% empty gradient, which is the one
   thing a newsstand cover can never be. */
.cover-art {
  display: none;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  overflow: hidden;
  margin: .2em -.2em .1em 0;
}
.cover-word {
  font-family: var(--font-display);
  font-size: 9em;
  line-height: .8;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.10);
  white-space: nowrap;
}

.cover-lead { flex: 0 0 auto; margin-top: 8cqh; display: flex; flex-direction: column; align-items: flex-start; }
.cover-kicker {
  display: inline-block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .86em;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--ink);
  padding: .18em .6em;
  margin-bottom: .35em;
}
.cover-head {
  font-family: var(--font-display);
  font-size: 3.5em;
  line-height: .9;
  letter-spacing: -.028em;
  margin: 0 0 .2em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: .03em .035em 0 rgba(0,0,0,.5);
}
.cover-head.long { font-size: 2.7em; line-height: .92; }
.cover-head a { color: #fff; text-decoration: none; }
.cover-stand {
  font-family: var(--font-cond);
  font-size: 1.5em;
  line-height: 1.14;
  font-weight: 700;
  color: #FFE9A8;
  max-width: 26ch;
  margin: 0;
}

/* The countdown is the cover art, not a slug: set as big as the space will take, knocked
   out of a red field, and tilted so it sits on the page rather than in a box. */
.countdown {
  display: flex;
  align-items: center;
  gap: .3em;
  padding: .06em .4em .12em;
  background: var(--red);
  color: #fff;
  margin-bottom: .5em;
  align-self: flex-start;
  width: fit-content;
  transform: rotate(-2.2deg);
  box-shadow: .1em .12em 0 rgba(0,0,0,.55);
  max-width: 100%;
}
.countdown .n {
  font-family: var(--font-display);
  font-size: 15cqh;
  line-height: .8;
  letter-spacing: -.055em;
}
.countdown .l {
  font-family: var(--font-cond);
  font-size: 2.6cqh;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: .98;
  display: flex;
  flex-direction: column;
}
.countdown .l b { font-size: 1.5em; letter-spacing: .06em; color: var(--yellow); }

.flashes {
  display: grid;
  flex: 1 1 auto;
  align-content: space-between;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8em .8em;
  margin-top: 1.1em;
  padding-top: .55em;
  border-top: 2px solid var(--yellow);
}
.flash { border-left: .32em solid var(--yellow); padding-left: .45em; }
/* The first sell is the biggest and takes the full measure -- five equal cards is a
   card row, not a cover. */
.flash:first-child { grid-column: 1 / -1; border-left-width: .5em; }
.flash:first-child .t { font-size: .78em; }
.flash:first-child .h { font-size: 2.15em; line-height: .94; }
.flash:nth-child(n+2) .h { font-size: .86em; }
.flash:nth-child(n+2) .t { font-size: .62em; }
.flash:nth-child(2n) { border-left-color: var(--red); }
.flash:nth-child(3n) { border-left-color: #4FD1E0; }
.flash .t {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .68em;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--yellow);
}
.flash .h {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .92em;
  line-height: 1.1;
  margin-top: .08em;
  color: #fff;
}

.cover-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: .8em;
  padding-top: .45em;
  border-top: 1px solid rgba(255,255,255,.45);
  font-family: var(--font-cond);
  font-size: .74em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E6DDC6;
}
.barcode {
  width: 7.5em;
  height: 2.6em;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, #fff 2px 4px, var(--ink) 4px 5px, #fff 5px 9px,
    var(--ink) 9px 12px, #fff 12px 13px);
  padding: .18em;
  border: .18em solid #fff;
  background-color: #fff;
}

/* ---------- contents page ---------- */

.contents { columns: 1; flex: 1 1 auto; display: flex; flex-direction: column; }
/* Not space-evenly. Spreading six rows down a whole page turns a contents list into an
   airport departure board -- the rows stay tight and the panel below takes the slack. */
.contents ol { flex: 0 0 auto; }
.cover-teaser {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  gap: 0 .8em;
  align-items: start;
  margin-top: .7em;
  padding: .5em .7em .6em;
  background: var(--paper-2);
  border-top: 4px solid var(--red);
  border-bottom: 1px solid var(--ink);
}
.teaser-shot { grid-row: 1 / span 4; margin: 0; max-height: 16cqh; overflow: hidden; }
.teaser-shot img {
  display: block;
  width: 100%;
  border: 2px solid var(--ink);
  box-shadow: .18em .2em 0 rgba(22,19,14,.35);
}
.cover-teaser h3 {
  font-family: var(--font-display);
  font-size: 1.62em;
  line-height: .98;
  letter-spacing: -.018em;
  margin: .1em 0 .25em;
}
.cover-teaser h3 a { color: var(--ink); text-decoration: none; }
.cover-teaser h3 a:hover { color: var(--red); }
.cover-teaser p { margin: 0; font-size: .95em; line-height: 1.3; color: var(--ink-soft); }
.cover-teaser .meta {
  font-family: var(--font-mono);
  font-size: .74em;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid rgba(22,19,14,.3);
  margin-top: .35em;
  padding-top: .2em;
}

.contents-foot {
  margin-top: auto;
  padding-top: .5em;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: .7em;
  align-items: start;
}
.contents-foot .numbers { margin: 0; }
.how {
  border-top: 3px solid var(--ink);
  padding-top: .3em;
}
.how h4 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .78em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 .2em;
}
.how p { margin: 0; font-size: .88em; line-height: 1.28; color: var(--ink-soft); }
.contents ol { list-style: none; margin: 0; padding: 0; }
.contents li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: .6em;
  align-items: baseline;
  padding: .45em 0;
  border-bottom: 1px solid rgba(22,19,14,.26);
}
.contents .pn {
  font-family: var(--font-display);
  font-size: 1.7em;
  line-height: 1;
  color: var(--red);
  text-align: right;
}
.contents .t {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
}
.contents .d { font-size: .9em; color: var(--ink-soft); line-height: 1.28; }

.leader {
  font-size: .98em;
  line-height: 1.36;
  border-left: .3em solid var(--red);
  padding-left: .6em;
  margin: 0 0 .7em;
}
.leader::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3em;
  line-height: .76;
  padding: .05em .1em 0 0;
  color: var(--red);
}

.colophon {
  margin-top: .7em;
  padding-top: .4em;
  border-top: 2px solid var(--rule);
  font-family: var(--font-cond);
  font-size: .8em;
  line-height: 1.32;
  color: var(--ink-soft);
}
.colophon strong { color: var(--ink); }

.empty {
  font-family: var(--font-cond);
  font-size: .88em;
  letter-spacing: .04em;
  color: var(--ink-soft);
  padding: .5em 0;
}

/* ---------- back cover ---------- */

.page.backcover { padding: 0; }
.back-inner {
  height: 100%;
  padding: 6cqw 5cqw;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: .6em;
}
.back-inner h2 {
  font-family: var(--font-display);
  font-size: 3.1em;
  line-height: .9;
  text-transform: uppercase;
  margin: 0;
  color: var(--yellow);
}
.back-inner p { margin: 0 auto; max-width: 32ch; font-size: 1.02em; line-height: 1.35; }
.back-inner .url {
  font-family: var(--font-mono);
  font-size: 1.1em;
  letter-spacing: .04em;
  color: #fff;
  border: 2px solid var(--yellow);
  padding: .35em .7em;
  display: inline-block;
  margin-top: .3em;
}

/* ---------- chrome ---------- */

/* Chrome, not content. It sits over the foot of the spine -- the one part of the paper
   that is never a drag handle -- and fades back once you have started reading. */
.bookbar {
  position: fixed;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: rgba(12,10,8,.72);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px;
  z-index: 30;
  opacity: .32;
  transition: opacity .35s;
  backdrop-filter: blur(6px);
}
.bookbar:hover, .bookbar:focus-within { opacity: 1; }
.bookbar button {
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  padding: 3px 8px;
  cursor: pointer;
}
.bookbar button:hover:not(:disabled) { background: var(--yellow); }
.bookbar button:disabled { opacity: .3; cursor: default; }
.bookbar .pos {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper);
  padding: 0 8px;
  min-width: 74px;
  text-align: center;
}

.hint {
  position: fixed;
  right: 14px;
  bottom: 14px;
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  z-index: 30;
  pointer-events: none;
  transition: opacity .4s;
}
.hint.gone { opacity: 0; }

.boot {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  padding: 40px;
}

/* ---------- one leaf at a time ----------
   A half-spread of three columns is unreadable on a phone, and the fixed-height page
   silently ate the foot of the contents page: overflow: hidden clipped the cover teaser
   mid-headline and dropped both panels with no sign anything was missing. On a single
   leaf the page grows and scrolls instead of being cut. Turning still works -- the drag
   only arms on the outer edge, so a vertical swipe through the middle scrolls. */
.book.single .leaf {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* Both containers, always. The warm store holds the pages that are not on screen, and a
   page must be laid out in the mode it will be read in -- see book.js measure(). */
.book.single .page,
.warm.single .page {
  height: auto;
  min-height: 100%;
}

/* The well must stop shrinking once the leaf scrolls.
   `flex: 1 1 auto` lets it take whatever is left after the furniture above it, and on the
   Intune page -- lead picture, numbers panel, then The Diary -- what was left was 45px. A
   multi-column box that cannot get taller does not clip at the foot, it flows sideways: the
   well was 369px wide and 5,730px of columns, so seven of eight stories sat off the right
   edge of the phone with no scrollbar to reach them. The fitter could not save it either,
   because it stops at one item and one story was already taller than 45px. `.watch` was
   fine throughout for exactly this reason -- it is `flex: 0 0 auto` and its page grows. */
.book.single .well,
.warm.single .well {
  flex: 0 0 auto;
  overflow: visible;
}

@container (max-width: 470px) {
  .well, .watch, .diary ol, .contents ol { columns: 1; }
  .story.lead p:not(.standfirst) { columns: 1; }
  .contents-foot { grid-template-columns: minmax(0, 1fr); }
  .page { font-size: clamp(11px, 3.1cqw, 15px); }
  .sec-head { font-size: 2.1em; }
  .story.lead h3 { font-size: 1.7em; }
  .cover-head { font-size: 2.5em; }
  .cover-head.long { font-size: 2em; }
  .masthead { font-size: 4.6em; }
  .countdown .n { font-size: 18cqh; }
  .countdown .l { font-size: 2.8cqh; }
  .flashes { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .book { transition: none; }
}