/* ============================================================
   THE PAPER (/reading/paper): the house news, set as a newspaper and read by scrolling
   The place is the house's white. On it lie four newsprint pages, one under the other, the front
   page first; the nameplate comes off the press and settles into its masthead in the first scroll
   (press-room.js). The paper's own colours stay inside its sheets: a very slightly warm off-white,
   never sepia, never a tan; the ink is #1C1B1D, never #000.
   The sheets are a printed object (the press prints them, R5): what is printed on them keeps the
   newspaper's own typesetting, in ink, never the house's vinyl. Lines: the only lines are the
   newspaper's own printed column rules, hairlines BETWEEN columns inside a sheet (column-rule in a
   text, a ::before on a block that stands beside another; the first block of a row has its rule
   clipped away by its grid), and the address field's baseline. No box: no tinted ground under the
   index, the register's table or a withheld picture. Nothing runs across. Straight and snapped: no
   tilt anywhere. Numerals in the catalogue voice (numerals.css): old-style in the text, small capitals
   in the labels. Type: the nameplate, heads, decks and quotes in the house display face (Instrument
   Serif), the running text in the house's reading face (Bodoni Moda). The words off
   the sheets (the way back, the press's two lines) are the house's one scale (.t-*, type.css).
   ============================================================ */
.page-reading[data-place="paper"]{ background:#FFFFFF; color:#1C1B1D; }
/* the window's own ground is the house's void (site.css); under the Paper it is the white too, or the overscroll at
   either end and the row a fractional scroll leaves at the top edge while the nameplate is up show it as a black line */
html:has(body.pp-on){ background:#FFFFFF; }
.pp{
  --pp-ink:#1C1B1D;
  --pp-ink-2:rgba(28,27,29,.74);
  --pp-ink-3:rgba(28,27,29,.52);
  --pp-sheet:#F4F4F1;                 /* newsprint: a breath warmer than the white it lies on */
  --pp-tone:#E9E9E5;                  /* a box, an empty frame: the sheet one step down */
  --pp-rule:rgba(28,27,29,.22);
  --pp-gap:28px;
  --pp-pad:clamp(22px, 4vw, 56px);
  --pp-w:min(1180px, calc(100vw - 2 * clamp(16px, 4vw, 64px)));
  --pp-body:16px;
  --pp-lh:1.42;
  --pp-arrive:62vh;                   /* the white above the front page, where the nameplate is first seen */
  position:relative; background:#FFFFFF; color:var(--pp-ink);
  padding-bottom:clamp(72px, 12vh, 140px);
}
.pp a{ color:inherit; text-decoration:none; }
.pp p{ margin:0; }
.pp-wait{ padding:calc(var(--nav-h) + 24px) 16px 0; color:var(--pp-ink-2); }

/* ---------- the arrival: white, and the way back ---------- */
.pp-arrive{ position:relative; height:var(--pp-arrive); }
.pp-arrive .pp-way{ position:absolute; top:calc(var(--nav-h) + 6px); left:max(16px, calc((100vw - var(--pp-w)) / 2)); }
/* N21: the way back is the Editorial's strip (rail.js); it stands where every place's strip stands, just under the
   letterhead's wake strip, so each of its words can be reached */
.pp-arrive .pp-way.edr{ top:calc(var(--nav-h) + 30px); right:max(16px, calc((100vw - var(--pp-w)) / 2)); }
@media (max-width:759px){ .pp-arrive .pp-way.edr{ top:calc(var(--nav-h) + 22px); left:16px; right:16px; } }
.pp.is-still .pp-arrive{ height:calc(var(--nav-h) + 72px); }
.pp-foot{ display:flex; justify-content:center; padding:clamp(48px, 8vh, 96px) 16px 0; }

/* ---------- the sheets ---------- */
.pp-paper{ display:flex; flex-direction:column; align-items:center; gap:clamp(64px, 11vh, 128px); }
.pp-sheet{
  position:relative; isolation:isolate; box-sizing:border-box; width:var(--pp-w);
  padding:var(--pp-pad) var(--pp-pad) calc(var(--pp-pad) * 1.25);
  background:var(--pp-sheet); color:var(--pp-ink);
  /* it lies on the white: a contact shade and a long soft fall, nothing drawn round it */
  box-shadow:0 1px 3px rgba(28,27,29,.06), 0 34px 64px -40px rgba(28,27,29,.34);
  transform-origin:50% 0;
}
/* the fibre, over everything printed on the sheet (it darkens a breath, never lightens) */
.pp-sheet::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:var(--pp-fibre, none); background-size:256px 256px; mix-blend-mode:multiply; }
/* the centre fold: a soft shade down the middle of the page and the light catching its far side; a material, not a line */
.pp-sheet::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, rgba(28,27,29,0) 45%, rgba(28,27,29,.03) 49.6%, rgba(255,255,255,.16) 50.3%, rgba(255,255,255,0) 55%); }
.pp-sheet, .pp-sheet [id]{ scroll-margin-top:calc(var(--nav-h) + 16px); }

/* ---------- the masthead ---------- */
.pp-mast{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; column-gap:var(--pp-gap); }
.pp-mast-c{ grid-column:2; text-align:center; transform-origin:50% 50%; }
.pp-over{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.18em; font-size:15px; color:var(--pp-ink-2); margin-bottom:10px !important; }
.pp-name{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(64px, 10.6vw, 152px); line-height:.86; letter-spacing:-.016em;
  white-space:nowrap; color:var(--pp-ink); }
.pp-ear{ max-width:14.5em; }
.pp-ear-l{ grid-column:1; justify-self:start; }
.pp-ear-r{ grid-column:3; justify-self:end; text-align:right; }
.pp-ear-h{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.14em; font-size:14px; margin-bottom:6px !important; }
.pp-ear-t{ font-family:var(--display); font-style:italic; font-size:18px; line-height:1.22; color:var(--pp-ink-2); }
/* the dateline of the paper itself: volume, number, the day, the edition */
.pp-dates{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 1.7em; margin:22px 0 0 !important; padding:6px 0 34px;
  font-family:var(--num); font-variant-caps:all-small-caps; font-variant-numeric:oldstyle-nums proportional-nums; letter-spacing:.12em; font-size:15.5px; color:var(--pp-ink); }

/* ---------- the grid: five columns, rules between ---------- */
.pp-grid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); column-gap:var(--pp-gap); row-gap:40px; align-items:start;
  /* a block's rule stands half a gap to its left; the first block of a row has its rule cut off here */
  clip-path:inset(-60px 0 -60px 0); }
.pp-lead, .pp-second, .pp-band-s, .pp-block, .pp-grid > .pp-colophon, .pp-grid > .pp-fig-last{ position:relative; }
.pp-lead::before, .pp-second::before, .pp-band-s::before, .pp-block::before, .pp-grid > .pp-colophon::before, .pp-grid > .pp-fig-last::before{
  content:""; position:absolute; top:0; bottom:0; left:calc(var(--pp-gap) / -2 - .5px); width:1px; background:var(--pp-rule); pointer-events:none; }

/* ---------- type ---------- */
/* print, not a blind stamp: the house sinks its headings into cotton (site.css --emb-strong); on newsprint a head is
   ink, and ink spreads a breath into the fibre. The same on the nameplate while it is still over the white. */
.pp :is(h1, h2, h3, blockquote, .pp-colo-name){ text-shadow:0 0 .7px rgba(28,27,29,.32); }
.pp-kick{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.15em; font-size:14.5px; color:var(--pp-ink-2); margin-bottom:8px !important; }
.pp-sub{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.2em; font-size:18px; font-weight:500; margin-bottom:14px !important; }
.pp-head{ margin:0; font-family:var(--display); font-weight:400; color:var(--pp-ink); letter-spacing:-.006em; text-wrap:balance; -webkit-hyphens:manual; hyphens:manual; }
.pp-head-xl{ font-size:clamp(46px, 5.7vw, 84px); line-height:.93; letter-spacing:-.014em; }
.pp-head-l{ font-size:clamp(31px, 3vw, 44px); line-height:.98; }
.pp-head-m{ font-size:clamp(25px, 2.1vw, 31px); line-height:1.02; }
.pp-head-s{ font-size:clamp(22px, 1.65vw, 25px); line-height:1.06; }
.pp-deck{ margin-top:12px !important; font-family:var(--display); font-style:italic; font-size:19px; line-height:1.22; color:var(--pp-ink-2); text-wrap:pretty; }
.pp-deck-lead{ font-size:clamp(20px, 1.8vw, 26px); line-height:1.2; max-width:31em; }
.pp-by{ margin:14px 0 9px !important; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.12em; font-size:14.5px; color:var(--pp-ink); }
.pp-from, .pp-jump{ margin-top:10px !important; font-family:var(--display); font-style:italic; font-size:16.5px; line-height:1.3; color:var(--pp-ink-2); }
.pp-jump{ text-align:right; }
.pp-from a, .pp-jump a{ display:inline-block; padding:13px 0; margin:-13px 0; }   /* a thumb's height, drawn as nothing */

/* the running text: justified, hyphenated, old-style figures, a newspaper's indent */
.pp-body{ columns:var(--cols, 1); column-gap:var(--pp-gap); column-rule:1px solid var(--pp-rule); column-fill:balance;
  font-family:var(--serif); font-size:var(--pp-body); line-height:var(--pp-lh); font-variant-numeric:oldstyle-nums proportional-nums;
  font-kerning:normal; font-feature-settings:"kern", "liga";
  text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 3 3; text-wrap:pretty;
  orphans:2; widows:2; color:var(--pp-ink); }
.pp-body p{ text-indent:1.1em; }
.pp-body p.pp-first, .pp-body .pp-quote + p{ text-indent:0; }
/* the dateline (a room of the house, and the day) and the lede's first words, in small capitals */
.pp-dl{ font-variant-caps:all-small-caps; letter-spacing:.05em; font-weight:500; }
.pp-lede{ font-variant-caps:all-small-caps; letter-spacing:.07em; }
/* the Paper's small capitals are the catalogue face's own: the reading face (Bodoni Moda) has none, and the house
   synthesises no style it lacks (font-synthesis:none). A figure in the register's table is a catalogue numeral. */
.pp-dl, .pp-lede, .pp-run-in, .pp-credit, .pp-glance-t td, .pp-glance-t caption{ font-family:var(--num); }
/* a single narrow column sets a size smaller, as a paper does, so justified lines keep their colour */
@media (min-width:1121px){
  .pp-second .pp-body, .pp-band-s .pp-body, .pp-l-text .pp-body{ font-size:calc(var(--pp-body) - 1px); line-height:1.4; hyphenate-limit-chars:5 2 2; }
  .pp-second .pp-dl, .pp-band-s .pp-dl, .pp-l-text .pp-dl{ letter-spacing:.02em; }
}
/* a feature opens on a drop cap, three lines deep */
.has-drop .pp-first::first-letter{ float:left; font-family:var(--display); font-weight:400; font-variant-caps:normal; letter-spacing:0;
  font-size:4.4em; line-height:.78; margin:.07em .09em 0 -.02em; color:var(--pp-ink); }
/* a pull quote crosses the columns it stands in */
.pp-quote{ column-span:all; break-inside:avoid; margin:18px 0; padding:0; }
.pp-quote p{ font-family:var(--display); font-style:italic; font-size:clamp(25px, 2.3vw, 34px); line-height:1.1; text-align:left; text-indent:0 !important;
  -webkit-hyphens:manual; hyphens:manual; color:var(--pp-ink); text-wrap:balance; }
.pp-quote-by{ margin-top:10px; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.12em; font-size:14px; color:var(--pp-ink-2); }

/* ---------- photographs ---------- */
.pp-fig{ margin:16px 0 0; }
.pp-frame{ position:relative; overflow:hidden; aspect-ratio:var(--ar, 1.4); background-color:var(--pp-tone); transition:background-color var(--slower) var(--settle); }
.pp-fig.is-screened .pp-frame{ background-color:rgba(28,27,29,.035); }   /* the plate's own paper: a breath under the sheet, so a pale print keeps its edge */
/* the plate is cut 3.4vh larger each way than its frame: the depth it rides (data-depth-range 3vh) never shows an edge */
.pp-plate{ position:absolute; left:0; right:0; top:-3.4vh; bottom:-3.4vh; }
.pp-plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.1);
  filter:grayscale(1) contrast(1.06); mix-blend-mode:multiply; }
.pp-screens .pp-fig:not(.is-plain) .pp-plate img{ opacity:0; }
.pp-screen{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity var(--slowest) var(--settle); }
.pp-screen.is-in{ opacity:1; }
.pp-cap{ margin-top:9px; font-family:var(--serif); font-size:13.5px; line-height:1.38; color:var(--pp-ink-2);
  -webkit-hyphens:auto; hyphens:auto; text-wrap:pretty; }
.pp-cap .rec{ font-size:.9em; color:var(--pp-ink); }
.pp-cap-rec{ display:inline-block; padding:12px 4px; margin:-12px -4px; }       /* the record number opens the work in the Gallery */
.pp-credit{ font-variant-caps:all-small-caps; letter-spacing:.1em; white-space:nowrap; color:var(--pp-ink-3); }
/* a work the house shows no picture of: the frame keeps the picture's place on the paper itself, untinted, and says so */
.pp-frame.pp-held{ background-color:transparent; }
.pp-held{ display:flex; align-items:center; justify-content:center; }
.pp-held-t{ padding:0 1em; font-family:var(--display); font-style:italic; font-size:19px; line-height:1.2; text-align:center; color:var(--pp-ink-3); }

/* ---------- the front page ---------- */
.pp-grid-front > .pp-rail{ grid-column:1; grid-row:1 / span 3; }
.pp-rail > .pp-briefs{ margin-top:34px; }
.pp-grid-front > .pp-lead{ grid-column:2 / 6; grid-row:1 / span 3; display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; }
.pp-lead > .pp-top{ grid-column:1 / 5; grid-row:1; }
.pp-lead > .pp-fig{ grid-column:1 / 4; grid-row:2; margin:0; }
.pp-lead > .pp-text{ grid-column:1 / 4; grid-row:3; }
.pp-lead > .pp-text .pp-by{ margin-top:0 !important; }
.pp-grid-front > .pp-second{ grid-column:5; grid-row:2 / span 2; align-self:stretch; }
.pp-grid-front > .pp-band{ grid-column:1 / 6; grid-row:4; display:grid; grid-template-columns:subgrid; align-items:stretch; padding-top:6px; }
.pp-band-1{ grid-column:1 / 3; }
.pp-band-2{ grid-column:3 / 5; }
.pp-band-3{ grid-column:5; }
/* a band story of two columns: its head across both, its picture in one and its words in the other */
.pp-band-1, .pp-band-2{ display:grid; grid-template-columns:subgrid; grid-auto-rows:auto; align-content:start; }
.pp-band-1 > *, .pp-band-2 > *{ grid-column:1 / -1; }
.pp-band-1 > .pp-fig{ grid-column:2; grid-row:3 / span 4; margin-top:2px; }
.pp-band-1 > .pp-by, .pp-band-1 > .pp-body, .pp-band-1 > .pp-jump{ grid-column:1; }
.pp-band-2 > .pp-fig{ grid-column:1; grid-row:3 / span 4; margin-top:2px; }
.pp-band-2 > .pp-by, .pp-band-2 > .pp-body, .pp-band-2 > .pp-jump{ grid-column:2; }
.pp-band-1 > .pp-by, .pp-band-2 > .pp-by{ margin-top:2px !important; }
/* a band of two (19 October: fewer stories to a page): the second takes the last three columns, its picture two of them */
.pp-band-2:last-child{ grid-column:3 / 6; }
.pp-band-2:last-child > .pp-fig{ grid-column:1 / 3; }
.pp-band-2:last-child > .pp-by, .pp-band-2:last-child > .pp-body, .pp-band-2:last-child > .pp-jump{ grid-column:3; }
/* the index: set on the sheet itself, no ground under it and no rule round it (no boxes) */
.pp-index{ padding:0; }
.pp-box-h{ margin:0 0 12px; font-family:var(--num); font-weight:500; font-variant-caps:all-small-caps; letter-spacing:.18em; font-size:16px; color:var(--pp-ink); }
.pp-index-l{ list-style:none; margin:0; padding:0; }
.pp-index-l li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px; }
.pp-index-l a{ display:block; min-height:46px; }      /* 44 even while the front page lies a little back (0.965) */
.pp-index-s{ display:block; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.11em; font-size:14px; color:var(--pp-ink-2); }
.pp-index-t{ display:block; font-family:var(--display); font-size:18px; line-height:1.14; color:var(--pp-ink); }
.pp-index-n{ flex:none; font-size:17px; text-align:right; color:var(--pp-ink); }
.pp-index-front{ display:none; }
.pp-briefs .pp-box-h{ margin-bottom:14px; }
.pp-brief{ margin:0 0 14px !important; font-family:var(--serif); font-size:15px; line-height:1.4; -webkit-hyphens:auto; hyphens:auto; text-wrap:pretty; }
.pp-keep{ white-space:nowrap; }
.pp-body .rec, .pp-brief .rec, .pp-notice .rec{ font-size:.74em; letter-spacing:.05em; }
.pp-run-in{ font-variant-caps:all-small-caps; letter-spacing:.09em; font-weight:500; color:var(--pp-ink); }

/* ---------- the inside pages ---------- */
/* the folio line: the number on the outer edge, the paper and the day in the middle, the section inside */
.pp-run{ display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:16px; margin-bottom:22px;
  font-family:var(--num); font-variant-caps:all-small-caps; font-variant-numeric:oldstyle-nums proportional-nums; letter-spacing:.13em; font-size:14.5px; color:var(--pp-ink-2); }
.pp-run > :first-child{ justify-self:start; }
.pp-run > :last-child{ justify-self:end; }
.pp-run-dot{ white-space:pre; }
.pp-run .pp-run-n{ font-size:20px; letter-spacing:0; font-variant-caps:normal; color:var(--pp-ink); text-align:inherit; line-height:1; }
.pp-section{ margin:0 0 36px; font-family:var(--display); font-weight:400; font-size:clamp(48px, 5.4vw, 78px); line-height:.94; letter-spacing:-.012em; color:var(--pp-ink); }
.pp-grid > .pp-block{ grid-column:span var(--span, 1); grid-row:span var(--rows, 1); align-self:stretch; }
/* a feature: its picture down the first columns (two, or one), everything else beside it */
.pp-l-feature{ display:grid; grid-template-columns:subgrid; grid-auto-rows:auto; align-content:start; }
.pp-l-feature > *{ grid-column:3 / -1; }
.pp-l-feature > .pp-fig{ grid-column:1 / 3; grid-row:1 / span 9; margin-top:0; }
.pp-l-feature.has-fig-1 > *{ grid-column:2 / -1; }
.pp-l-feature.has-fig-1 > .pp-fig{ grid-column:1 / 2; }
.pp-l-picture > .pp-fig{ margin-bottom:6px; }
/* the register at a glance: names and figures, the figures aligned; air between the rows, no band under any */
.pp-glance-t{ width:100%; margin-top:12px; border-collapse:collapse; font-family:var(--num); font-size:15px; line-height:1.3; color:var(--pp-ink); }
.pp-glance-t caption{ caption-side:bottom; padding-top:10px; text-align:left; font-variant-caps:all-small-caps; letter-spacing:.11em; font-size:13.5px; color:var(--pp-ink-3); }
.pp-glance-t th{ padding:5px 8px 5px 0; text-align:left; font-weight:400; }
.pp-glance-t td{ padding:5px 0 5px 8px; text-align:right; font-size:16px; }

/* ---------- the back page ---------- */
.pp-grid-back > .pp-notices{ grid-column:1 / 3; columns:2; column-gap:var(--pp-gap); column-rule:1px solid var(--pp-rule); }
.pp-notice{ break-inside:avoid; margin:0 0 15px !important; font-family:var(--serif); font-size:15.5px; line-height:1.4; -webkit-hyphens:auto; hyphens:auto; }
.pp-grid-back > .pp-fig-last{ grid-column:3 / 5; margin:0; align-self:start; }
.pp-grid-back > .pp-colophon{ grid-column:5; align-self:stretch; }
.pp-colo-name{ font-family:var(--display); font-size:44px; line-height:.9; margin-bottom:14px !important; color:var(--pp-ink); }
.pp-colo-t{ font-family:var(--serif); font-size:14.5px; line-height:1.45; color:var(--pp-ink-2); -webkit-hyphens:auto; hyphens:auto; text-wrap:pretty; }
/* the Correo: the paper by post. One field (its baseline is the one line a form may draw) and one word */
.pp-correo{ max-width:34em; margin:clamp(64px, 9vw, 120px) auto 0; text-align:center; }
.pp-correo-h{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(52px, 6.4vw, 92px); line-height:.9; letter-spacing:-.012em; color:var(--pp-ink); }
.pp-correo-d{ margin-top:10px !important; font-size:22px; }
.pp-correo-t{ margin:18px auto 0 !important; max-width:27em; font-family:var(--serif); font-size:17.5px; line-height:1.45; color:var(--pp-ink); }
.pp-letter{ max-width:25em; margin:30px auto 0; text-align:left; }
.pp-letter-l{ display:block; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:14.5px; color:var(--pp-ink-2); }
.pp-letter-row{ display:flex; align-items:center; gap:22px; }
.pp-letter-in{ flex:1 1 auto; min-width:0; box-sizing:border-box; height:48px; padding:12px 0 8px; font-family:var(--serif); font-size:19px; color:var(--pp-ink);
  background:transparent; border:0; border-bottom:1px solid rgba(28,27,29,.55); border-radius:0; -webkit-appearance:none; appearance:none; }
.pp-letter-in::placeholder{ color:var(--pp-ink-3); }
/* in the field, the baseline takes the full ink and a hair more weight: that is its focus. The house's focus ring
   would draw a box round a field (a text field takes :focus-visible from a click too) */
.pp-letter-in:focus-visible{ outline:none; border-bottom-color:var(--pp-ink); box-shadow:0 1px 0 var(--pp-ink); }
.pp-letter-go{ flex:none; color:var(--pp-ink); }
.pp-letter-said{ min-height:1.5em; margin-top:12px !important; font-family:var(--display); font-style:italic; font-size:17px; color:var(--pp-ink-2); }

/* ---------- a narrower desk: the columns would starve, so the page is set as the phone edition, wider ---------- */
@media (max-width:1120px){
  .pp{ --pp-w:calc(100vw - 2 * clamp(12px, 3vw, 40px)); }
  .pp-grid, .pp-grid-front, .pp-grid-front > .pp-band, .pp-grid-front > .pp-lead{ display:flex; flex-direction:column; align-items:stretch; gap:34px; clip-path:none; }
  .pp-lead::before, .pp-second::before, .pp-band-s::before, .pp-block::before, .pp-grid > .pp-colophon::before, .pp-grid > .pp-fig-last::before{ display:none; }
  .pp-grid-front > .pp-rail{ display:contents; }
  .pp-rail > .pp-briefs{ margin-top:0; }
  .pp-grid-front > .pp-lead{ order:1; gap:18px; }      /* the lead first; the index after it, as a paper's box */
  .pp-grid-front .pp-index{ order:2; }
  .pp-grid-front > .pp-second{ order:3; }
  .pp-grid-front > .pp-band{ order:4; }
  .pp-grid-front .pp-briefs{ order:5; }
  .pp-index-front{ display:block; }
  .pp-index-front li{ margin:0; }
  .pp-index-front a{ display:flex; align-items:center; }
  .pp-index-front + .pp-index-l{ margin-top:14px; }
  .pp-band-1, .pp-band-2, .pp-l-feature{ display:block; }
  .pp-body{ columns:2; }
  .pp-lead > .pp-fig, .pp-band-1 > .pp-fig, .pp-band-2 > .pp-fig, .pp-l-feature > .pp-fig{ margin:16px 0 4px; }
  .pp-band-1 > .pp-fig, .pp-band-2 > .pp-fig, .pp-l-feature > .pp-fig, .pp-grid-back > .pp-fig-last{ max-width:min(100%, 34em); }
}
/* ---------- the phone edition: one wide column, a readable measure ---------- */
@media (max-width:760px){
  .pp{ --pp-w:calc(100vw - 20px); --pp-pad:20px; --pp-gap:22px; --pp-body:17px; --pp-lh:1.46; --pp-arrive:46svh; }
  .pp-paper{ gap:56px; }
  .pp-sheet::after{ display:none; }                       /* a phone edition is not folded */
  .pp-mast{ display:block; }
  .pp-ear{ display:none; }
  .pp-over{ font-size:13px; }
  .pp-name{ font-size:clamp(54px, 17.5vw, 80px); }
  .pp-dates{ gap:2px 1em; margin-top:14px !important; padding-bottom:24px; font-size:14px; }
  .pp-body, .pp-grid-back > .pp-notices{ columns:1; }
  .pp-head-xl{ font-size:clamp(38px, 11vw, 46px); line-height:.96; }
  .pp-head-l{ font-size:32px; }
  .pp-head-m{ font-size:28px; }
  .pp-deck-lead{ font-size:21px; }
  .pp-section{ font-size:48px; margin-bottom:26px; }
  .pp-run{ font-size:13px; gap:10px; }
  .pp-run-m time, .pp-run-dot{ display:none; }           /* the day is on the front page; a phone's folio keeps the name */
  /* three short words on one line each: the number and the section keep their width, the name takes what is left */
  .pp-run{ grid-template-columns:auto minmax(0, 1fr) auto; white-space:nowrap; }
  .pp-run > .pp-run-m{ justify-self:center; }
  /* one justified column cannot carry a run of capitals: the dateline keeps its small capitals close-set,
     the lede's first words go on in the text's own case, so the first line does not open into holes */
  .pp-dl{ letter-spacing:.02em; }
  .pp-lede{ font-variant-caps:normal; letter-spacing:0; }
  .has-drop .pp-lede{ font-variant-caps:all-small-caps; letter-spacing:.05em; }   /* beside a drop cap the lines are short anyway, and the capitals follow the initial */
  .pp-quote p{ font-size:27px; }
  .pp-band-1 > .pp-fig, .pp-band-2 > .pp-fig, .pp-l-feature > .pp-fig, .pp-grid-back > .pp-fig-last{ max-width:none; }
  .pp-colo-name{ font-size:40px; }
  .pp-correo{ margin-top:56px; }
  .pp-letter-row{ gap:14px; }
}
/* in one column the empty frame of a work the house shows no picture of would stand a whole column wide and
   taller still, a grey field with three words in it: it keeps a picture's size, not a page's */
@media (max-width:1120px){
  .pp .pp-fig.pp-fig-held{ max-width:min(64%, 22em); }
}
/* ---------- the rewards for lingering (the-paper.js, 19 October) ----------
   the negative held to the light: laid over the picture (and over the water, living.js), under the letterhead, never in
   the hand's way; it comes in on the breath curve and goes on the lift */
.pp-neg{ position:fixed; z-index:46; pointer-events:none; display:block; opacity:0; transition:opacity var(--slow) var(--lift); }
.pp-neg.is-in{ opacity:1; transition:opacity var(--slowest) var(--breath); }
/* the plates in register: a small mark at the foot of the last page, printed in black over a cyanotype blue */
.pp-reg{ display:flex; justify-content:center; margin-top:clamp(40px, 7vh, 72px); }
.pp-reg svg{ display:block; width:24px; height:24px; overflow:visible; }
.pp-reg g{ fill:none; stroke-width:.7; }
.pp-reg-black{ stroke:var(--pp-ink); }
.pp-reg-blue{ stroke:#1F4A8A; mix-blend-mode:multiply; }
@media (prefers-reduced-motion:reduce){ .pp-neg, .pp-neg.is-in{ transition:none; } }

/* ---------- the letterhead while the paper is read (press-room.js): it steps up out of the window as the reader
   reads down and comes back as they read up; a shift of its own position on the house curve, nothing under it ---------- */
body.pp-on #nav{ transition:opacity var(--slower) var(--settle), color var(--slow) var(--settle), transform var(--slower) var(--settle); }
body.pp-on #nav.pp-tucked{ transform:translate3d(0, calc(-100% - 14px), 0); }
body.pp-on #nav.pp-tucked:focus-within{ transform:none; }

/* ---------- reduced motion: everything in its place, nothing fades in ---------- */
@media (prefers-reduced-motion:reduce){
  .pp-screen, .pp-frame{ transition:none; }
  body.pp-on #nav{ transition:opacity var(--slower) var(--settle), color var(--slow) var(--settle); }
}

/* ---------- the press, running, before the paper (press-room.js, assets/cpn) ----------
   A passage of under two windows; the stage stands in the window while it is read, on the house's white. No words
   stand over it (19 October). Nothing is drawn round it; the canvas comes in once it has a frame. */
.pp-press{ position:relative; height:100vh; height:100svh; }
.pp-press-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#FFFFFF; }
.pp-press-gl{ position:absolute; inset:0; }
.pp-press-gl canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity var(--slower) var(--settle); }
.pp-press.is-set .pp-press-gl canvas{ opacity:1; }
/* the stage's foot goes into the page's white: the table and the machine never end on an edge. It is a sheet of the
   white laid over the canvas from a line press-room.js moves (under the machine while it runs, under the laid page's
   own foot once the page is carried: a phone's tall window sees past the table's edge), so the page itself is never
   masked while it lies in register with the paper */
.pp-press-foot{ position:absolute; left:0; right:0; top:0; height:calc(100vh + 24vh); height:calc(100svh + 24svh); pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0, #FFFFFF 20vh); will-change:transform; transform:translate3d(0, 100vh, 0); }
.pp-press.is-still .pp-press-foot{ transform:translate3d(0, 80vh, 0); }

/* ---------- with the running press: no white arrival. The paper comes up over the press, its nameplate printed
   (press-room.js); the way back stands in the first window, over the press ---------- */
.pp.has-press .pp-arrive{ position:absolute; z-index:4; top:0; left:0; right:0; height:0; }
.pp.has-press .pp-paper{ position:relative; z-index:2; }
/* the stage lies over the paper until it has given way to it: the paper is under the printed page, in register */
.pp.has-press .pp-press{ z-index:3; pointer-events:none; }
.pp.has-press .pp-press-stage{ will-change:opacity; }

/* ============================================================
   A STORY, LIFTED OFF THE PAGE (paper-story.js; the picture behaviour of the Paper's spreads)
   Every picture on the page is the way into its story, the picture itself the link, drawn as nothing. The story is
   read on the house's white, off the sheet, in the house's one scale (.t-*): the picture as wide as the page allows,
   under it the head in vinyl, the deck, the byline, then the whole story in newspaper columns with the paper's own
   hairlines between them (the only lines), its details under it, the stories before and after it at its foot.
   Nothing is drawn round anything: no box, no veil but the white. The layer scrolls on its own; the page under it
   is held where the reader left it.
   ============================================================ */
.pp-open{ display:block; color:inherit; }
.ps{
  --ps-ink:#1C1B1D;
  --ps-ink-2:rgba(28,27,29,.66);
  --ps-rule:rgba(28,27,29,.22);
  --ps-tone:#ECECEA;
  --ps-g:clamp(16px, 4vw, 64px);
  /* the Correo's letter is the paper's own form, in the paper's inks */
  --pp-ink:#1C1B1D; --pp-ink-2:rgba(28,27,29,.74); --pp-ink-3:rgba(28,27,29,.52);
  position:fixed; inset:0; z-index:49; display:none;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  outline:none; color:var(--ps-ink);
}
.ps.is-on{ display:block; }
.ps.is-turning{ overflow:hidden; }
.ps a{ color:inherit; }
/* the white the page goes under */
.ps-ground{ position:fixed; inset:0; background:#FFFFFF; opacity:0; transition:opacity var(--slower) var(--breath); }
.ps-ground.is-in{ opacity:1; }
.ps-ground.is-out{ opacity:0; transition-duration:var(--slow); }
.ps-ground.is-cut{ transition:none; }
/* the layer can always be scrolled by a hair, so a wheel or a finger on it never reaches the page under it */
.ps-rail{ position:relative; min-height:calc(100% + 1px); }
.ps-view{
  position:relative; box-sizing:border-box; padding:calc(var(--nav-h) + 4px) var(--ps-g) clamp(72px, 12vh, 140px);
  opacity:0; transform:translate3d(0, 24px, 0);
  transition:opacity var(--slower) var(--settle), transform var(--slower) var(--settle);
}
.ps-view.is-up{ opacity:1; transform:none; }
.ps-view.is-leaving{ position:absolute; top:0; left:0; right:0; }
.ps-view.is-sliding{ transition:transform var(--slower) var(--breath); }
.ps-view.is-sinking{ opacity:0; transform:translate3d(0, 24px, 0); transition:opacity var(--slow) var(--lift), transform var(--slow) var(--lift); }
.ps-view.is-cut, .ps-view.is-cut *{ transition:none !important; }
.ps-top, .ps-words, .ps-foot{ max-width:1180px; margin-left:auto; margin-right:auto; }
.ps-top{ display:flex; margin-bottom:6px; }
.ps-way{ display:inline-flex; align-items:center; min-height:44px; }

/* the picture: its box is the print's own shape (paper-story.js sizes it), the dots under the colour */
.ps-fig{ margin:0 auto; max-width:100%; }
.ps-pic{ position:relative; overflow:hidden; max-width:100%; background:var(--ps-tone); }
.ps-pic.is-lent{ visibility:hidden; }
.ps-pic-in{ position:absolute; inset:0; overflow:hidden; transform-origin:0 0; transition:transform var(--slower) var(--breath); }
.ps-ht{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ps-col{ position:absolute; display:block; max-width:none; opacity:0; transition:opacity var(--slow) var(--breath); -webkit-user-select:none; user-select:none; }
.ps-view.is-colour .ps-col{ opacity:1; }
.ps-pic.is-cut, .ps-pic.is-cut *{ transition:none !important; }
.ps-cap{ margin-top:10px; color:var(--ps-ink-2); text-wrap:pretty; }
.ps-cap .rec, .ps-cap-rec{ color:var(--ps-ink); }
.ps-cap-rec{ display:inline-block; padding:12px 4px; margin:-12px -4px; }

/* the words: the head in the house's vinyl, letter by letter; the rest after it, as one block */
.ps-head{ max-width:880px; margin:clamp(26px, 4.6vh, 50px) auto 0; text-align:center; }
.ps-kick{ margin:0 0 12px; color:var(--ps-ink-2); }
.ps-h{ margin:0; color:var(--ps-ink); outline:none; opacity:0; }
.ps-h.cp-reveal, .ps-words.is-said .ps-h{ opacity:1; }
.ps-deck{ max-width:34em; margin:16px auto 0; color:var(--ps-ink-2); }
.ps-by, .ps-held{ margin:18px 0 0; color:var(--ps-ink); }
.ps-held{ color:var(--ps-ink-2); }
/* the whole story, as the paper sets it: justified, hyphenated, a newspaper's indent, in columns with rules between */
.ps-body{
  max-width:1040px; margin:clamp(32px, 5.6vh, 56px) auto 0;
  columns:2; column-gap:clamp(36px, 4.4vw, 64px); column-rule:1px solid var(--ps-rule); column-fill:balance;
  text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:6 3 3;
  orphans:2; widows:2; color:var(--ps-ink);
}
.ps-body p{ margin:0; text-indent:1.1em; }
.ps-body > p:first-child, .ps-body .ps-quote + p, .ps-body .ps-fig2 + p{ text-indent:0; }
.ps-body.is-one{ columns:1; max-width:30em; text-align:center; -webkit-hyphens:manual; hyphens:manual; }
.ps-body.is-one p{ text-indent:0; }
.ps-quote{ column-span:all; break-inside:avoid; max-width:30em; margin:26px auto; padding:0; text-align:center; }
.ps-quote p{ margin:0; text-indent:0 !important; text-align:center; -webkit-hyphens:manual; hyphens:manual; color:var(--ps-ink); }
.ps-quote footer{ margin-top:10px; color:var(--ps-ink-2); }
/* the dateline, run in as the paper runs it */
.ps-dl{ white-space:nowrap; color:var(--ps-ink); }
/* a story's other picture stands across its columns where the story goes on, in colour, cut as the paper cuts it */
.ps-fig2{ column-span:all; break-inside:avoid; max-width:min(100%, 640px); margin:34px auto 30px; }
.ps-pic2{ position:relative; overflow:hidden; aspect-ratio:var(--ar, 1.4); background:var(--ps-tone); }
.ps-pic2 img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.ps-fig2 .ps-cap{ text-align:left; -webkit-hyphens:manual; hyphens:manual; }
/* the entry (19 October): the record number first, then the title, one line, two short paragraphs, the mark SAMPLE */
.ps-rec{ margin:0 0 14px; color:var(--ps-ink); opacity:0; transition:opacity var(--slow) var(--settle); }
.ps-rec-a{ display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; }
.ps-head:has(> .ps-h.is-in) > .ps-rec, .ps-words.is-said .ps-rec, .ps-view.is-now .ps-rec{ opacity:1; }
.ps-line{ max-width:30em; margin:18px auto 0; color:var(--ps-ink-2); text-wrap:balance; }
.ps-text{ max-width:31em; margin:clamp(28px, 4.6vh, 44px) auto 0; text-align:left; -webkit-hyphens:auto; hyphens:auto; text-wrap:pretty; color:var(--ps-ink); }
.ps-text p{ margin:0; }
.ps-text p + p{ margin-top:.9em; }
.ps-text .ps-sample{ margin-top:clamp(22px, 3.4vh, 32px); color:var(--ps-ink-2); }
/* the details: each a crop of the picture and its words */
.ps-entries{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:28px clamp(32px, 4vw, 56px); max-width:1040px; margin:clamp(44px, 7vh, 72px) auto 0; }
.ps-entry{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.ps-crop{ position:relative; display:block; overflow:hidden; height:120px; background:var(--ps-tone); }
.ps-crop img{ position:absolute; display:block; max-width:none; }
.ps-note{ max-width:34em; margin:clamp(24px, 4vh, 40px) auto 0; text-align:center; color:var(--ps-ink-2); }
.ps-ways{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 40px; margin:22px auto 0; }
.ps-ways a{ display:inline-flex; align-items:center; min-height:44px; }
.ps-letter{ margin-top:6px; }
/* the foot: the story before, the story after, and the way back to the page */
.ps-foot{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:end; gap:30px 48px; max-width:1040px; margin-top:clamp(64px, 11vh, 120px); }
.ps-prev{ grid-column:1; text-align:left; }
.ps-next{ grid-column:2; text-align:right; }
.ps-prev p, .ps-next p{ margin:0 0 8px; color:var(--ps-ink-2); }
.ps-back{ grid-column:1 / -1; margin:6px 0 0; text-align:center; }
/* the letters of the head are seated with room for their blur, as the Editorial's sheets seat theirs */
.ps .cp-reveal .cp-l{ padding:.24em .14em .32em; margin:-.24em -.14em -.32em; }

/* the words come after the object: hidden until said, then as one block */
.ps-w{ opacity:0; transition:opacity var(--slower) var(--settle); }
.ps-view.is-said > .ps-top, .ps-view.is-said > .ps-fig > .ps-cap, .ps-view.is-said > .ps-foot, .ps-words.is-said .ps-w{ opacity:1; }
.ps-view.is-now .ps-w{ transition-duration:var(--touch); }
.ps-view.is-now .ps-h .cp-l{ transition-delay:0s !important; }
.ps-h.is-whole .cp-l{ transition:none !important; }
.ps-words{ transition:opacity var(--touch) var(--lift); }
.ps-words.is-going, .ps-view.is-unsaying .ps-words{ opacity:0; }
.ps-view.is-unsaying > .ps-top, .ps-view.is-unsaying > .ps-fig > .ps-cap, .ps-view.is-unsaying > .ps-foot{ opacity:0; transition:opacity var(--touch) var(--lift); }

/* the picture in flight: a window onto the print, moved and grown by transform alone (paper-story.js) */
.ps-ghost{ position:fixed; z-index:49; overflow:hidden; transform-origin:0 0; will-change:transform; pointer-events:none; background:#ECECEA; }
.ps-ghost-in{ position:absolute; transform-origin:0 0; will-change:transform; }
.ps-ghost-in > canvas, .ps-ghost-in > img{ position:absolute; display:block; max-width:none; }
.ps-ghost-col{ opacity:0; transition:opacity var(--slow) var(--breath); }
.ps-ghost-col.is-in{ opacity:1; }
.ps-ghost-grey{ filter:grayscale(1) contrast(1.06); }

/* a narrower window: one column at a reading measure */
@media (max-width:999px){
  .ps-body{ columns:1; max-width:36em; }
  .ps-fig2{ margin:26px auto 24px; }
}
@media (max-width:759px){
  .ps-head{ margin-top:24px; }
  .ps-crop{ height:96px; }
  .ps-foot{ grid-template-columns:minmax(0, 1fr); gap:26px; }
  .ps-prev, .ps-next{ grid-column:1; text-align:left; }
  .ps-next{ order:-1; }
  .ps-back{ text-align:left; }
}
/* reduced motion: every movement is a cut; the head fades in whole (the house's own reveal) */
@media (prefers-reduced-motion:reduce){
  .ps-ground, .ps-view, .ps-w, .ps-rec, .ps-words, .ps-col, .ps-pic-in, .ps-ghost-col{ transition:none !important; }
  .ps-view{ transform:none; }
}