/* ═══════════════════════════════════════════════════════════
   MY SECOND LIFE — an almanack for the second half
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#EDEAE3;
  --paper-2:#E4E0D7;
  --ink:#12110F;
  --ink-70:rgba(18,17,15,.70);
  --ink-55:rgba(18,17,15,.62);
  --rule:rgba(18,17,15,.20);
  --red:#E1301B;
  --black:#0B0B0A;

  --sans:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;

  --pad: clamp(20px, 3.6vw, 56px);
  --gut: clamp(14px, 1.6vw, 26px);
  --nav-h: 62px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden makes the body a scroll container, which kills
     position:sticky for everything inside it. Both are declared so a browser
     without overflow:clip still gets the horizontal containment. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ol,ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p,blockquote,figure{margin:0}
button,input{font:inherit;color:inherit}

.micro{
    font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-55);
}

/* 12-column measure shared by every band */
.grid12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);
}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  border-bottom:1px solid transparent;
  transition:background .45s ease, border-color .45s ease;
}
.nav.is-stuck{
  background:rgba(237,234,227,.88);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--rule);
}
.nav__date{
  font-size:13px; font-weight:560; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(18,17,15,.50);
}
.nav__mark{
  display:flex; align-items:center; gap:12px; white-space:nowrap;
  font-size:12px; font-weight:650; letter-spacing:.17em; text-transform:uppercase;
}
.nav__logo{width:28px;height:28px;display:block;flex:none}
.nav__links{display:flex; gap:clamp(18px,2.4vw,38px); align-items:baseline}
.nav__links a{
  position:relative;
  font-size:12px; font-weight:650; letter-spacing:.05em;
  padding-bottom:2px;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover::after{transform:scaleX(1)}


/* ── hero ────────────────────────────────────────────────── */
.hero{
  position:relative; z-index:2;
  min-height:var(--vh, 100svh);
  padding:calc(var(--nav-h) + 10px) var(--pad) clamp(40px,6vh,86px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end; column-gap:0;
}
.hero__type{
  position:relative; z-index:2;
  line-height:.76;
  font-weight:800;
  font-stretch:112%;
  letter-spacing:-.04em;
  text-transform:uppercase;
  font-size:clamp(52px, 13.55vw, 300px);
}
.hero__word{display:block}
/* the flat L hangs 4px outside the S's leftmost point */
.hero__word--b{color:var(--red); margin-left:-.022em}

.hero__col{grid-column:1; grid-row:1; position:relative; z-index:2}
.hero__foot{margin-top:44px}
.hero__proverb{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,2.9vw,40px); line-height:1.14; letter-spacing:-.012em;
}
.hero__cite{
  display:block; margin-top:22px;
  font-style:normal;
  font-size:13px; font-weight:560; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(18,17,15,.50);
}

/* the portrait is a printed plate, keylined like the section plates */
.hero__plate{
  position:relative; z-index:1;
  grid-column:2; grid-row:1; align-self:end;
  height:calc(var(--vh, 100svh) - 240px);
  aspect-ratio:3/4;
  margin-left:calc(-1 * clamp(90px, 9.8vw, 200px));  /* the D runs onto the plate */
  border:1px solid var(--rule);
  overflow:hidden;
}
.plate{position:relative}
.plate > img,.plate > canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.plate > canvas{z-index:2}
.plate > img{z-index:1}
.plate.is-screened > img{visibility:hidden}

/* ── standfirst ──────────────────────────────────────────── */
.standfirst{
  position:relative; z-index:2;
  padding:clamp(96px,11vw,160px) var(--pad) 0;
  max-width:calc(17em + 2 * var(--pad));
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3.2vw,42px); line-height:1.16; letter-spacing:-.012em; color:var(--ink);
}

/* ── chapter: one module, three times ────────────────────── */
.chapter{
  position:relative; z-index:2;
  padding:clamp(96px,15vw,240px) var(--pad) 0;
  --title:clamp(44px,6.6vw,96px);
}
.chapter__title{
  display:flex; align-items:baseline; gap:24px;
  font-size:var(--title); font-weight:800; font-stretch:110%;
  letter-spacing:-.042em; line-height:.86; text-transform:uppercase;
  padding-bottom:clamp(18px,2vw,30px);
  border-bottom:1px solid var(--rule);
  max-width:75%;
}
.chapter__title a{
  text-decoration-line:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:3px;
  text-underline-offset:.1em;
  transition:text-decoration-color .35s;
}
.chapter__title a:hover{text-decoration-color:var(--ink)}
.chapter__title i{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:.40em; letter-spacing:.01em;
  font-stretch:normal; color:var(--red);
}
.chapter__lede{
  margin-top:clamp(20px,2.2vw,32px);
  max-width:34em;
  font-family:var(--serif); font-weight:400;
  font-size:26px; line-height:1.28; color:var(--ink);
}
.chapter__lead{
  margin-top:clamp(36px,4.2vw,64px);
}
.chapter__lead{
  aspect-ratio:3/2; border:1px solid var(--rule); overflow:hidden;
}
.chapter__lead > img,.chapter__lead > canvas{border:0}

/* entries as a ruled list — one row spec for all three chapters */
.rows{margin-top:clamp(36px,4vw,60px)}
.row{border-bottom:1px solid var(--rule)}
.row:first-child{border-top:1px solid var(--rule)}
.row a{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);
  align-items:baseline;
  min-height:88px; padding:26px 0;
  transition:padding-left .5s cubic-bezier(.2,.8,.2,1);
}
.row a:hover{padding-left:16px}
.row__title{
  grid-column:1 / span 4;
  font-size:16px; font-weight:600; letter-spacing:-.004em; line-height:1.5;
}
.row__date{
  grid-column:11 / span 2; justify-self:end;
  font-size:13px; font-weight:560; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(18,17,15,.50); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.rows--dated .row__deck{grid-column:5 / span 6}
.row__deck{
  grid-column:5 / span 8; max-width:56ch;
  font-size:16px; line-height:1.5; color:rgba(18,17,15,.62);
}

/* the way through to the full archive, under each section's three entries */
.chapter__all{
  margin-top:26px;
  font-size:13px; font-weight:560; letter-spacing:.08em; text-transform:uppercase;
}
.chapter__all a{
  display:inline-flex; gap:10px; align-items:baseline;
  color:rgba(18,17,15,.50); transition:color .3s;
}
.chapter__all a span{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.chapter__all a:hover{color:var(--red)}
.chapter__all a:hover span{transform:translateX(6px)}

/* 01 breaks the margins; 02 sets the plate beside the list; 03 insets it
   against a pull-quote. One module, three conditions. */
.chapter--bleed .chapter__lead{margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); border-left:0; border-right:0}

.chapter--beside,.chapter--inset{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut);
}
.chapter--beside > *,.chapter--inset > *{grid-column:1 / span 12}
.chapter--beside .chapter__lead{grid-column:1 / span 6}
.chapter--beside .rows{grid-column:8 / span 5; grid-row:4; margin-top:0}
.chapter--beside .row a{grid-template-columns:1fr; min-height:0; padding:20px 0}
.chapter--beside .row__title,.chapter--beside .row__deck{grid-column:1; max-width:none}
.chapter--beside .row__deck{margin-top:8px}
.chapter--beside .chapter__lead{grid-row:4}
.chapter--inset .chapter__lead{grid-column:8 / span 5; grid-row:4; aspect-ratio:1/1}
.chapter--inset .pull{grid-column:1 / span 6; grid-row:4; margin-top:14px}
.chapter--inset .rows{grid-column:1 / span 12; grid-row:5; margin-top:20px}
.pull{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(28px,3.4vw,50px); line-height:1.1; letter-spacing:-.012em;
  margin:0; max-width:16em;
}

/* the ledger: what an almanack actually is */
.ledger{
  display:flex; gap:0 clamp(22px,3vw,48px); flex-wrap:wrap; margin:0 0 26px;
  padding-bottom:16px; border-bottom:1px solid var(--rule);
}
.ledger div{display:flex; gap:10px; align-items:baseline}
.ledger dt,.ledger dd{
  margin:0; font-size:11px; font-weight:560; letter-spacing:.08em; text-transform:uppercase;
}
.ledger dt{color:rgba(18,17,15,.50)}
.ledger dd{color:var(--ink); font-variant-numeric:tabular-nums}

/* one hover peek, shared by the contents table and the entry lists */
.peek-clip{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:40}
.peek{
  position:absolute; top:0; left:0; visibility:hidden;
  width:210px; height:263px; opacity:0;
  transform:translate(-50%,-50%) scale(.94);
  transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.peek img{width:100%;height:100%;object-fit:cover}
.peek.is-on{opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1)}

/* the one pacing beat: chapter 02 inverts */
.chapter--dark{
  background:#141414; color:var(--paper);
  border-top:none;
  --rule:rgba(237,234,227,.20);
  --ink-70:rgba(237,234,227,.72);
  --ink-55:rgba(237,234,227,.64);
  --ink:#EDEAE3;
  --paper-2:#1C1C1C;
}

/* ── dispatch ────────────────────────────────────────────── */
.dispatch{
  position:relative; z-index:2;
  margin-top:clamp(96px,15vw,240px);
  padding:clamp(64px,7.4vw,110px) var(--pad);
  border-top:1px solid var(--rule);
}
.dispatch__inner{max-width:820px}
.dispatch h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,4.2vw,58px); letter-spacing:-.012em; line-height:1.08;
}
.dispatch p{
  margin-top:20px; max-width:46ch;
  font-size:16px; line-height:1.55; color:rgba(18,17,15,.62);
}
.dispatch__form{display:flex; align-items:stretch; gap:16px; margin-top:36px; max-width:620px}
.dispatch__form input{
  flex:1; height:56px; background:none; outline:none;
  border:0; border-bottom:1px solid var(--ink);
  padding:0 2px; font-size:20px; color:var(--ink);
}
.dispatch__form input::placeholder{color:var(--ink-55)}
.dispatch__form button{
  flex:0 0 auto; height:56px; padding:0; cursor:pointer;
  background:none; border:0; color:var(--red);
  font-size:20px; font-weight:520; letter-spacing:-.01em;
  transition:opacity .3s;
}
.dispatch__form button span{display:inline-block; transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.dispatch__form button:hover span{transform:translateX(6px)}

/* The honeypot. A bot fills every field it finds and a reader never sees this
   one, so anything in it is a bot and the submit is dropped. Off-screen
   rather than display:none — some bots skip what is not rendered. */
.dispatch__trap{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.dispatch__form input:disabled{border-bottom-style:dashed; color:var(--ink-55); cursor:not-allowed}
.dispatch__form button:disabled{opacity:.45; cursor:not-allowed}
.dispatch__form button:disabled:hover span{transform:none}
.dispatch__form.is-pending button{opacity:.45; pointer-events:none}
.dispatch__note:empty{display:none}
/* .dispatch p already sets a colour at (0,1,1), so the error needs two
   classes to beat it. */
.dispatch .dispatch__note--bad{color:var(--red)}

/* ── colophon ────────────────────────────────────────────── */
.colophon{
  position:relative; z-index:2;
  padding:0 var(--pad) 28px;
}
.colophon__row{
  display:flex; gap:clamp(20px,4vw,64px); align-items:baseline;
  padding:22px 0; border-top:1px solid var(--rule);
  font-size:15px; color:rgba(18,17,15,.70);
}
.colophon__row nav{display:flex; gap:20px}
.colophon__row a{transition:color .3s}
.colophon__row a:hover{color:var(--ink)}
/* named, but not a destination yet — no pointer, no hover, no promise */
.colophon__row .is-off{color:rgba(18,17,15,.34); cursor:default}
.colophon__row--fine{
  justify-content:space-between;
  font-size:11px; font-weight:560; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(18,17,15,.50);
}


/* ═══════════════════════════════════════════════════════════
   ARTICLE — one piece, off the same system as the landing page
   ═══════════════════════════════════════════════════════════ */
.piece{
  position:relative; z-index:2;
  padding:calc(var(--nav-h) + clamp(48px,7vw,110px)) var(--pad) 0;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut);
  align-items:start;
}
.piece__head{grid-column:1 / span 6; grid-row:1}
.piece__title{
  font-size:clamp(40px,5.6vw,80px); font-weight:800; font-stretch:110%;
  letter-spacing:-.042em; line-height:.88; text-transform:uppercase;
  padding-bottom:clamp(18px,2vw,28px);
  border-bottom:1px solid var(--rule);
}
/* a headline that is a sentence rather than a word steps down a size */
.piece__title--long{
  font-size:clamp(28px,3.3vw,48px); line-height:.98; letter-spacing:-.032em;
}
.piece__standfirst{
  margin-top:clamp(20px,2.2vw,30px);
  font-family:var(--serif); font-weight:400;
  /* Bodoni's optical-size axis runs 6-96. Left on auto, 26px asks for the
     26pt cut, whose hairlines are a Didone display face's hairlines: the em
     dash is 0.019em, half a pixel here, and disappears entirely. Pinning the
     axis to its text default keeps the dashes and the thin strokes on the
     page. */
  font-optical-sizing:none;
  font-size:26px; line-height:1.28; color:var(--ink);
}
.piece__byline{
  margin-top:26px;
  font-size:13px; font-weight:560; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(18,17,15,.50);
}
.piece__byline em{font-style:normal; color:var(--ink)}

.piece__plate{
  grid-column:8 / span 5; grid-row:1 / span 2;
  aspect-ratio:4/5; border:1px solid var(--rule); overflow:hidden;
}

/* A piece that carries a second frame stacks both in a right-hand rail, so
   the two sit in one column with a fixed gap instead of the second being
   positioned against the body's height by hand. The rail spans both rows,
   which is what gives the sticky frame something long to travel in. */
.piece__rail{
  grid-column:8 / span 5; grid-row:1 / span 2;
  align-self:stretch;   /* .piece aligns items to start; the rail needs the
                           full height of the body or its sticky child has
                           nothing to travel in */
  display:flex; flex-direction:column; gap:clamp(30px,3.4vw,54px);
}
.piece__rail > .piece__plate{grid-column:auto; grid-row:auto}
/* The frame holds 9:16 and is sized off the locked viewport height, so it is
   always shorter than the window and therefore never pins half off-screen.
   Flush right, aligning with the plate above it. */
.piece__aside{
  --fw:9; --fh:16;          /* the frame's ratio, as two numbers so the width
                               calculation below can use it as well */
  width:min(100%, max(280px, calc((var(--vh) - var(--nav-h) - 128px) * var(--fw) / var(--fh))));
  margin-left:auto;
  aspect-ratio:var(--fw) / var(--fh);
  border:1px solid var(--rule); overflow:hidden;
  position:sticky; top:calc(var(--nav-h) + clamp(22px,2.4vw,40px));
}
/* a squarer frame fills the rail's full width and still clears the window */
.piece__aside--portrait{--fw:4; --fh:5}

/* the reading column: the one place on the site set for length, not for scale */
.piece__body{
  grid-column:1 / span 6; grid-row:2;
  max-width:34em;
  margin-top:clamp(40px,4.4vw,64px);
  font-size:18px; line-height:1.62; color:rgba(18,17,15,.86);
}
.piece__body > * + *{margin-top:1.35em}
.piece__body > * + h2{margin-top:2.4em}
.piece__body h2{
  font-size:22px; font-weight:700; letter-spacing:-.018em; line-height:1.25;
  color:var(--ink);
}
.piece__body a{
  border-bottom:1px solid var(--rule);
  transition:border-color .3s, color .3s;
}
.piece__body a:hover{color:var(--red); border-bottom-color:var(--red)}
.piece__body strong{font-weight:650}
.piece__body ul{display:flex; flex-direction:column; gap:.7em}
.piece__body li{padding-left:1.3em; position:relative}
.piece__body li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:8px; height:1px; background:var(--ink);
}
/* an opening capital in the Didone, the one flourish the page gets */
.piece__body > p:first-child::first-letter{
  font-family:var(--serif); font-weight:400;
  float:left; font-size:4.1em; line-height:.82;
  padding:.06em .09em 0 0; color:var(--ink);
}
/* ... unless the opening paragraph is shorter than the capital is tall, in
   which case the cap runs past the end of its own paragraph and strands a
   blank line beside itself. Then the piece opens plain. */
.piece--plain-open .piece__body > p:first-child::first-letter{
  font-family:inherit; font-weight:inherit; color:inherit;
  float:none; font-size:inherit; line-height:inherit; padding:0;
}
.piece__body .pull{margin:1.5em 0; max-width:15em}
/* a beat between movements, for a piece that breaks on white space rather
   than on subheads. Same hairline and same ink as every other rule here. */
.piece__body > .piece__break{
  border:0; border-top:1px solid var(--rule);
  width:56px; margin:2.8em 0;
}
/* a small table of figures: the site's hairline, the site's ink, nothing
   else. Numerals are tabular so the right-hand column stacks. */
.piece__figures{
  width:100%; border-collapse:collapse;
  font-size:15px; line-height:1.4;
}
.piece__figures th{
  text-align:left; font-weight:560; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(18,17,15,.50);
  padding:0 0 .7em; border-bottom:1px solid var(--rule);
}
.piece__figures td{
  padding:.72em 0; border-bottom:1px solid var(--rule);
  vertical-align:baseline;
}
.piece__figures td + td{
  padding-left:1.4em; text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.piece__figures th + th{text-align:right}
.piece__figures tr:last-child td{border-bottom:0}
.piece__caption{
  margin-top:.9em;
  font-size:13px; line-height:1.45; color:rgba(18,17,15,.50);
}
.piece--wide .piece__figures{break-inside:avoid-column}

.piece__sources{
  display:flex; flex-direction:column; gap:.8em;
  font-size:14px; line-height:1.5; color:rgba(18,17,15,.58);
}
.piece__sources li{padding-left:1.5em; text-indent:-1.5em}
.piece__sources li::before{content:none}
.piece__sources a{border-bottom-color:rgba(18,17,15,.28)}

/* a numbered reference list, for a piece whose text cites by number.
   The counter is drawn rather than left to the list marker, because the
   flex container blockifies the items and drops markers entirely. */
.piece__sources--numbered{counter-reset:src}
.piece__sources--numbered li{counter-increment:src; padding-left:2.4em; text-indent:-2.4em}
.piece__sources--numbered li::before{
  /* the base list marker is an absolutely positioned rule; this is a
     numeral in the flow, so every one of those properties is undone */
  content:counter(src) ".";
  position:static; width:2.4em; height:auto; background:none;
  display:inline-block; text-indent:0;
  font-variant-numeric:tabular-nums; color:var(--ink); opacity:.5;
}
.piece__sources--numbered li:target{color:var(--ink)}

/* citation markers: superscript numerals that jump to the list */
.piece__body sup{font-size:.6em; line-height:0; vertical-align:.62em}
.piece__body sup a{
  border-bottom:0; color:rgba(18,17,15,.55);
  font-variant-numeric:tabular-nums; padding:0 .08em;
}
.piece__body sup a:hover{color:var(--red)}

/* .piece--wide: the plate sits beside the header only, and the text runs
   under it across the full measure — set in two columns, so the page is
   filled without the line running to 150-odd characters.

   Two columns need about 1000px of measure. Below that the responsive
   block drops the piece to a single capped column — left to itself the
   browser would drop to one column but keep the full width, which runs to
   125 characters a line and is worse than what this class replaced. */
.piece--wide .piece__plate{grid-row:1}
.piece--wide .piece__body,
.piece--wide .piece__end{grid-column:1 / -1; max-width:none}
.piece--wide .piece__body{
  columns:26em 2;
  column-gap:clamp(30px,3.4vw,54px);
  column-rule:1px solid var(--rule);
  orphans:2; widows:2;
}
.piece--wide .piece__body > *{break-inside:avoid-column}
.piece--wide .piece__body > p{break-inside:auto}
.piece--wide .piece__body h2{break-after:avoid-column; margin-top:1.9em}
.piece--wide .piece__body > *:first-child{margin-top:0}
/* the pull quote crosses both columns, as it would in print */
.piece--wide .piece__body .pull{
  column-span:all; max-width:24em; margin:.4em 0 1.1em;
}
.piece--wide .piece__sources li{break-inside:avoid-column}

/* the contact address is that page's one piece of display type: set in the
   Didone at pull-quote scale, because it is the whole point of the page */
.contact__mail{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3.4vw,46px); line-height:1.1; letter-spacing:-.012em;
  margin:1.1em 0 1.3em; overflow-wrap:anywhere;
}
.contact__mail a{
  border-bottom:1px solid var(--rule); padding-bottom:.06em;
  transition:color .3s, border-color .3s;
}
.contact__mail a:hover{color:var(--red); border-bottom-color:var(--red)}

.piece__end{
  grid-column:1 / span 6; grid-row:3; max-width:34em;
  margin-top:clamp(48px,5vw,72px); padding-top:22px;
  border-top:1px solid var(--rule);
  font-size:13px; font-weight:560; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(18,17,15,.50);
}
.piece__end a{transition:color .3s}
.piece__end a:hover{color:var(--red)}

/* ── section archive ─────────────────────────────────────── */
.archive{
  position:relative; z-index:2;
  padding:calc(var(--nav-h) + clamp(48px,7vw,110px)) var(--pad) 0;
  --title:clamp(44px,6.6vw,96px);
}
.archive .chapter__title{max-width:none}
.archive .chapter__lede{max-width:34em}
.archive .rows{margin-top:clamp(40px,4.6vw,68px)}
.archive .chapter__all{margin-top:34px}

/* ── more from this section ──────────────────────────────── */
.more{
  position:relative; z-index:2;
  padding:clamp(90px,12vw,180px) var(--pad) 0;
}
.more__label{
  padding-bottom:14px; border-bottom:1px solid var(--rule);
  font-size:12px; font-weight:620; letter-spacing:.17em; text-transform:uppercase;
}
.more .rows{margin-top:0}
.more .row:first-child{border-top:0}

/* ── reveal ──────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(20px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.is-in{opacity:1; transform:none}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1080px){
  .rows--dated .row__deck{grid-column:5 / span 5}
  .piece__head{grid-column:1 / span 7}
  .piece__plate,.piece__rail{grid-column:9 / span 4}
  .piece__body,.piece__end{grid-column:1 / span 7}
  .piece--wide .piece__body,.piece--wide .piece__end{grid-column:1 / -1}
  /* no room for two columns here: one, capped to the reading measure */
  .piece--wide .piece__body{columns:auto; column-rule:none; max-width:34em}
  .piece--wide .piece__body .pull{max-width:15em}
  .row__title{grid-column:1 / span 5}
  .row__deck{grid-column:6 / span 7}
}
@media (max-width:760px){
  .nav{height:auto; flex-direction:column; align-items:flex-start; gap:8px; padding-top:14px; padding-bottom:12px}
  .nav__date{display:none}
  .nav__links{gap:18px}
  .hero{
    display:flex; flex-direction:column; min-height:0;
    padding-top:104px; padding-bottom:0;
  }
  .hero__type{font-size:18.4vw; line-height:.85; letter-spacing:-.042em; order:1}
  .hero__plate{
    height:auto; width:100%; aspect-ratio:4/5;
    margin:32px calc(-1 * var(--pad)) 0; width:100vw; border-left:0; border-right:0;
    order:2;
  }
  .hero__col{order:3}
  .hero__foot{margin-top:32px}
  .hero__proverb{font-size:26px}
  .chapter--beside,.chapter--inset{display:block}
  .chapter--beside .chapter__lead,.chapter--inset .chapter__lead{margin-bottom:30px}
  .chapter--inset .chapter__lead{aspect-ratio:3/2}
  .pull{font-size:26px; margin-bottom:30px}
  .ledger{gap:0 22px}
  .standfirst{padding-top:clamp(70px,16vw,110px)}
  .chapter{padding-top:clamp(80px,20vw,120px)}
  .row a{grid-template-columns:1fr; min-height:0; padding:22px 0}
  .row__title,.row__deck,.row__date{grid-column:1; justify-self:start}
  .row__deck{margin-top:8px; max-width:none}
  .rows--dated .row__deck{grid-column:1}
  .row__date{margin-top:10px}
  .chapter__all{margin-top:22px}
  .dispatch{margin-top:clamp(80px,20vw,120px)}
  .dispatch__form{flex-direction:column; align-items:flex-start; gap:20px}
  .dispatch__form button{align-self:flex-start; height:auto; padding:6px 0}
  .colophon__row{flex-direction:column; gap:14px}
  .colophon__row--fine{align-items:flex-start}
  .piece{display:block; padding-top:calc(var(--nav-h) + 64px)}
  .piece__plate{
    aspect-ratio:3/2; margin:30px calc(-1 * var(--pad)) 0;
    border-left:0; border-right:0;
  }
  /* nothing to stick to on a phone: full bleed, in the flow, still 9:16 */
  .piece__rail{display:block}
  .piece__aside{
    /* relative, never static: .plate's img and canvas are absolutely
       positioned, and a static figure would send them to .piece instead */
    position:relative; top:auto; width:auto;
    margin:30px calc(-1 * var(--pad)) 0;
    border-left:0; border-right:0;
  }
  .piece__body{margin-top:36px; max-width:none}
  .piece__body > p:first-child::first-letter{font-size:3.4em}
  .more{padding-top:clamp(80px,20vw,120px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}