/* 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);
  font-size: .66em;
  letter-spacing: .08em;
  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;
}
.book.single .page {
  height: auto;
  min-height: 100%;
}

@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; }
}