/* What tokens.css and page.css do not cover: the product's frame around the archive, and the
   archive's own parts (toolbar, card, ledger, reading column, gate). Values come from the tokens;
   the few literals below are the product's, because the frame must not move when a reader crosses. */
:root {
  --frame: max(880px, min(70vw, 1200px));        /* the product's column, public/pro.html */
  --frame-line: color-mix(in srgb, #848a9c, white 74%);  /* the product's --grid */
  --pad: 48px;
  --pro: linear-gradient(135deg, #37477d 0%, #46599e 55%, #7688c9 100%);
  --pro-hover: linear-gradient(135deg, #2b3866 0%, #37477d 55%, #46599e 100%);
  --shadow-md: 0 4px 16px rgba(8, 11, 18, .08);  /* the product's; the one floating panel uses it */
  --column: 620px;
  --row: 40px;                                    /* a ledger row and a desktop control */
  --hit: 40px;                                    /* 44 on touch, below */
  --focus: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent);
  --line: 1px solid var(--hair);
  --t-hover: 100ms;                               /* quicker than Hairline's 150: a hover answers at once */
}
@media (max-width: 899px) { :root { --pad: 24px; } }
@media (max-width: 599px) { :root { --hit: 44px; } }

html { background: var(--paper); }
body { max-width: none; margin: 0; padding: 0; }
a:hover { text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.mono { font-size: 12px; }
.ink2 { color: var(--ink-2); }
[hidden] { display: none !important; }
.dateline, .dl, .share, .editions, .said, .twin, .sponsor { max-width: none; }   /* page.css caps every p at 38em */
.card .t, .lead-issue .t, .sect h2, .join h2 { margin-bottom: 0; }      /* page.css spaces every h2 and h3 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.u, .u-hover:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

/* ---- the frame: same geometry, mark, words and chip as the product header ---- */
.top { position: sticky; top: 0; z-index: var(--z-header); background: var(--paper); border-bottom: 1px solid var(--frame-line); view-transition-name: top; }
.top-in { position: relative; max-width: var(--frame); margin: 0 auto; height: 64px; padding: 0 var(--pad); display: flex; align-items: center; border-left: 1px solid var(--frame-line); border-right: 1px solid var(--frame-line); }
.wordmark img { display: block; height: 27px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.nav .plain { position: relative; font-size: 14px; font-weight: var(--w-medium); color: var(--ink-2); padding: 10px 0; transition: color var(--t-hover) linear; }
.nav .plain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease-emphasized); }
.nav .plain:hover, .nav .plain[aria-current] { color: var(--ink); }
.nav .plain:hover::after, .nav .plain[aria-current]::after { transform: scaleX(1); }
.chip-pro { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; background: var(--pro); color: #fff; font: var(--w-medium) 12px/1 var(--font-mono); letter-spacing: .08em; }
.chip-pro:hover { background: var(--pro-hover); }
@media (max-width: 899px) { .nav { gap: 18px; } }

.shell { max-width: var(--frame); margin: 0 auto; min-height: calc(100vh - 65px); padding: 0 var(--pad); border-left: 1px solid var(--frame-line); border-right: 1px solid var(--frame-line); }
/* the sign-in notice: one line under the header for one view, in the flow so nothing moves after paint */
.signed-in { max-width: none; padding: var(--s3) 0; border-bottom: var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); color: var(--ink-2); overflow-wrap: anywhere; }

/* ---- index head: the page name and the one count ---- */
.head { padding-top: var(--s6); }
.head h1 { font-weight: var(--w-light); font-size: var(--fs-title-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-title); max-width: none; }
.head h1 .n { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---- toolbar: search, categories, view; one row from 1024, two below, a fold on phones ---- */
.tools { display: flex; flex-wrap: wrap; align-items: center; column-gap: 40px; row-gap: var(--s2); margin-top: var(--s5); padding-bottom: var(--s2); border-bottom: var(--line); }
.find { flex: 1 1 160px; max-width: 320px; }
.find input { width: 100%; height: var(--hit); padding: 0 12px; border: 1px solid var(--ink-3); border-radius: 0; background: var(--paper); color: var(--ink); font: var(--w-regular) 15px/1 var(--font-voice); -webkit-appearance: none; appearance: none; transition: border-color var(--t-hover) linear; }
.find input::placeholder { color: var(--ink-2); opacity: 1; }
.find input:hover { border-color: var(--ink-2); }
.find input:focus-visible { border-color: var(--ink); }
.cats > ul { display: flex; align-items: center; gap: 20px; list-style: none; }
.cats a, .more summary, .view a, .fold summary { display: inline-flex; align-items: center; min-height: var(--hit); min-width: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); color: var(--ink); white-space: nowrap; cursor: pointer; }
.cats a span, .fold a span, .fold summary b span { color: var(--ink-2); margin-left: .6em; }
.cats a:hover, .fold a:hover, .more summary:hover, .view a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.cats a[aria-current], .fold a[aria-current], .more summary.on { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.more { position: relative; }
.more summary, .fold summary { list-style: none; gap: .6em; }
.more summary::-webkit-details-marker, .fold summary::-webkit-details-marker { display: none; }
.more summary::after, .fold summary::after { content: '+'; display: inline-block; font-size: 14px; color: var(--ink-2); }
.more[open] summary::after, .fold[open] summary::after { content: '\2212'; }
.more ul { position: absolute; z-index: var(--z-sticky); top: 100%; left: -16px; min-width: 200px; padding: 8px 16px; list-style: none; background: var(--paper); border: var(--line); box-shadow: var(--shadow-md); }
.more ul a { display: flex; min-height: 36px; }
.view { position: relative; display: flex; gap: 20px; margin-left: auto; }
.view a { color: var(--ink-2); }
.view a[aria-current] { color: var(--accent); text-decoration: none; }
/* Grid and List are four mono characters each, so the bar moves by one word and one gap */
.view .under { position: absolute; left: 0; bottom: 10px; width: 4ch; height: 1px; background: var(--accent); font: 12px var(--font-mono); letter-spacing: var(--tr-mono); transition: transform var(--t-hover) var(--ease-emphasized); }
.view[data-view='list'] .under { transform: translateX(calc(4ch + 4 * .02em + 20px)); }
.fold { display: none; }
@media (min-width: 1024px) and (max-width: 1359px) { .tools { column-gap: 24px; } .cats > ul { gap: 16px; } }
@media (max-width: 1023px) { .find { flex-basis: 100%; max-width: none; } }
@media (max-width: 599px) {
  .tools { column-gap: 24px; }
  .find { flex-basis: 100%; }
  .find input { font-size: 16px; }             /* 16 keeps iOS from zooming the page on focus */
  .cats { display: none; }
  .fold { display: block; flex: 1; }
  .fold summary b { font-weight: var(--w-regular); color: var(--accent); }
  .fold ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 4px 0 var(--s2); list-style: none; }
  .fold ul a { display: flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
  .fold[open] + .view { align-self: flex-start; }
  .view .under { bottom: 12px; }
}

/* ---- what the reader asked for: a count line for a search, a next step when nothing matched ---- */
.said { margin-top: var(--s5); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); color: var(--ink-2); }
.said b { font-weight: var(--w-regular); color: var(--ink); }
.said a { color: var(--accent); margin-left: 20px; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.none { margin-top: var(--s2); max-width: 30em; font-size: var(--fs-lead); line-height: var(--lh-read); color: var(--ink-2); }
.none a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.none a:hover, .said a:hover { color: var(--ink); }
.results { margin-top: var(--s5); }
.said + .results { margin-top: var(--s3); }

/* ---- the card: the issue at its smallest picture size; the title link covers the card ---- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5); list-style: none; }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { position: relative; min-width: 0; }
.fig { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--tile); --ground: var(--tile); overflow: hidden; }
.fig img, .fig svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* one layer draws the figure's edge over white thumbnails and carries the hover wash */
.fig::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--hair); transition: background-color var(--t-hover) linear; }
.card:hover .fig::after, .lead-issue:hover .fig::after { background-color: var(--wash); }
.dl { display: flex; flex-wrap: wrap; column-gap: 12px; margin-top: var(--s2); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); line-height: var(--lh-mono-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dl b { font-weight: var(--w-regular); color: var(--ink); }
.dl .pro { display: inline-flex; align-items: center; gap: 4px; }
.dl a.pro { position: relative; z-index: 1; color: var(--ink-2); padding: 6px 0; margin: -6px 0; }   /* above the title's stretched link, a 28px target */
.dl a.pro:hover { color: var(--ink); }
.lock { flex: none; }
.twin a .lock, .gate .lock, .band .lock { vertical-align: -1px; margin-right: 6px; }
.card .t { margin-top: var(--s1); font-size: var(--fs-body); font-weight: var(--w-regular); line-height: 1.3; }
.card .t a, .lead-issue .t a { color: var(--ink); }
.card .t a::after, .lead-issue .t a::after { content: ''; position: absolute; inset: 0; }
.card:hover .t a, .lead-issue:hover .t a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.card .t a:focus-visible, .lead-issue .t a:focus-visible { box-shadow: none; }
.card .t a:focus-visible::after, .lead-issue .t a:focus-visible::after { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); }

/* ---- grid B: the newest issue across the row, figure on two columns, words on the third ---- */
.lead-issue { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); margin-bottom: var(--s5); }
.lead-issue .fig { grid-column: 1 / span 2; }
.lead-issue .words { grid-column: 3; }
.lead-issue .dl { margin-top: 0; }
.lead-issue .t { margin-top: var(--s2); font-size: var(--fs-title); font-weight: var(--w-light); line-height: var(--lh-tight); letter-spacing: var(--tr-title); }
@media (max-width: 1023px) { .lead-issue { grid-template-columns: 1fr 1fr; } .lead-issue .fig { grid-column: 1; } .lead-issue .words { grid-column: 2; } }
@media (max-width: 599px) { .lead-issue { grid-template-columns: minmax(0, 1fr); } .lead-issue .fig, .lead-issue .words { grid-column: 1; } .lead-issue .dl { margin-top: var(--s2); } }

/* ---- the ledger: one row per issue; the title link covers the row ---- */
.ledger ol { list-style: none; }
.yr { padding-top: var(--s5); }
.yr:first-child { padding-top: 0; }
.yr > h2 { display: flex; align-items: baseline; gap: .5em; font-weight: var(--w-light); font-size: var(--fs-title); line-height: var(--lh-tight); letter-spacing: var(--tr-title); margin: 0 0 var(--s2); }
.yr > h2 span { font: var(--w-regular) 12px var(--font-mono); letter-spacing: var(--tr-mono); color: var(--ink-2); }
.issue { position: relative; display: grid; grid-template-columns: 44px 52px minmax(0, 1fr) 104px 104px; column-gap: 16px; align-items: center; min-height: var(--row); padding: 8px 0; border-top: var(--line); transition: background-color var(--t-hover) linear; }
.issue:last-child { border-bottom: var(--line); }
.issue:hover { background: var(--wash); }
.issue .n, .issue .d, .issue .c, .issue .p { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.issue .n { text-align: right; }
.issue .p { display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; white-space: nowrap; }
.issue .t { color: var(--ink); line-height: var(--lh-ui); }
.issue .t::after { content: ''; position: absolute; inset: 0; }
.issue:hover .t { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.issue .t:focus-visible { box-shadow: none; }
.issue .t:focus-visible::after { box-shadow: inset 0 0 0 1px var(--accent); }
/* a search's rows carry the year, which needs 90px; the phone layout below sizes itself */
@media (min-width: 600px) { .ledger > ol > .issue { grid-template-columns: 44px 90px minmax(0, 1fr) 104px 104px; } }
@media (max-width: 599px) {
  .issue { grid-template-columns: auto auto 1fr auto; grid-template-areas: 'n d c p' 't t t t'; row-gap: 4px; column-gap: 12px; padding: 12px 0; min-height: 64px; }
  .issue .n { grid-area: n; text-align: left; } .issue .d { grid-area: d; } .issue .c { grid-area: c; } .issue .p { grid-area: p; }
  .issue .t { grid-area: t; }
}

/* ---- pages: newer on the left, where you are, older on the right ---- */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: var(--s6); padding-top: var(--s2); border-top: var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); }
.pager a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--ink); }
.pager a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.pager .older { justify-self: end; }
.pager .at { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---- the reading column ---- */
.reading { padding-top: var(--s5); }
.col { max-width: var(--column); margin: 0 auto; }
.post > .fig { margin-bottom: var(--s3); }
.dateline { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); line-height: var(--lh-mono-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dateline b { font-weight: var(--w-regular); color: var(--ink); }
.post h1 { font-weight: var(--w-light); font-size: var(--fs-title-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-title); max-width: none; margin-top: var(--s2); }
.editions, .share { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); }
.editions { margin-top: var(--s2); }
.editions a, .editions span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ink-2); }
.editions [aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.editions a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.share { margin-top: var(--s2); color: var(--ink-2); }
.share a, .share button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 24px; color: var(--ink); font: inherit; letter-spacing: inherit; }
.share a:hover, .share button:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
/* on touch every share word gets a 44px target; the padding replaces the gap, so the rhythm holds */
@media (max-width: 599px) {
  .share { column-gap: 0; } .share a, .share button { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; }
  .share span { margin-right: 10px; } .editions a, .editions span { min-height: 44px; }
  .view a { padding: 0 7px; margin: 0 -7px; }
}

/* "In this issue" is folded at every width: open, it pushes the first sentence below the fold */
.toc { margin-top: var(--s3); border-top: var(--line); border-bottom: var(--line); }
.toc summary { display: flex; align-items: center; gap: .6em; min-height: var(--hit); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary span { color: var(--ink-2); }
.toc summary::after { content: '+'; margin-left: auto; font-size: 14px; color: var(--ink-2); }
.toc[open] summary::after { content: '\2212'; }
.toc summary:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.toc ol { list-style: none; padding-bottom: var(--s2); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); }
.toc a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; padding: 8px 0; color: var(--ink); line-height: var(--lh-mono-sm); }
.toc a i { font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.toc a:hover span { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
@media (max-width: 599px) { .toc a { padding: 14px 0; } }

.body { margin-top: var(--s5); font-size: 17px; line-height: var(--lh-read); }
.body > * + * { margin-top: 1em; }
.body p { max-width: none; }
.body a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.body a:hover { color: var(--ink); }
/* the email's step: headings well above the body */
.body h2 { font-weight: var(--w-regular); font-size: 28px; line-height: var(--lh-ui); margin: var(--s7) 0 0; scroll-margin-top: 88px; }
.body h3 { font-weight: var(--w-regular); font-size: 22px; line-height: var(--lh-ui); margin: var(--s6) 0 0; }
.body h4 { font-weight: var(--w-regular); font-size: 19px; line-height: var(--lh-ui); margin: var(--s5) 0 0; }
@media (max-width: 599px) { .body h2 { font-size: 24px; } .body h3 { font-size: 20px; } .body h4 { font-size: 18px; } }
.body strong { font-weight: var(--w-medium); }
.body sub, .body sup { line-height: 0; }   /* a subscript must not open the line spacing */
.body ul, .body ol { padding-left: 1.2em; }
.body li + li { margin-top: .4em; }
.body li p + p { margin-top: .4em; }
.body blockquote { border-left: 1px solid var(--ink); padding-left: var(--s3); color: var(--ink-2); }
.body hr { border: 0; border-top: var(--line); margin: var(--s5) 0; }
.body figure { margin: var(--s5) 0; }
.body figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: var(--tile); }   /* equations keep their own size */
/* beehiiv's layout tables, code and images fit the column at any width */
.body table { max-width: 100%; }
.body td, .body th, .body code { overflow-wrap: anywhere; }
.body pre { max-width: 100%; overflow-x: auto; }
.body img { max-width: 100%; height: auto; }
/* the structured blocks keep their layout but take the site's type: Satoshi, or the site's mono where the email set a mono */
.body [style*="font-family"], .body [style*="font:"] { font-family: var(--font-voice) !important; }
.body [style*="monospace"] { font-family: var(--font-mono) !important; }
/* the email's low-contrast colours: the source chips' greys and the filled buttons' blues and red */
.body [style*="#9AA0AA"], .body [style*="#8A909B"] { color: var(--ink-2) !important; }
.body [style*="#6788C4"], .body [style*="#7A98D1"], .body [style*="#7991BD"], .body [style*="#BC7979"] { background-color: var(--accent) !important; }
/* an image in a list item centres on the column, not the item: one indent back, two in a nested list */
.body li img:not(td *) { position: relative; left: -.6em; }
.body li li img:not(td *) { left: -1.2em; }
/* an image narrower than the column sits in its middle, an equation above all; a cell's image keeps its place */
.body img:not(td *) { display: block; margin-left: auto; margin-right: auto; float: none; }
.body figure blockquote { margin-top: var(--s3); }
.body pre, .body code { font-family: var(--font-mono); font-size: 13px; }
.body .btn-body { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--chip); color: var(--ink); font: 12px var(--font-mono); letter-spacing: var(--tr-mono); text-decoration: none; transition: background-color var(--t-hover) linear; }
.body .btn-body:hover { background: var(--hair); color: var(--ink); }
.body .embed { font-family: var(--font-mono); font-size: 12px; line-height: var(--lh-mono-sm); letter-spacing: var(--tr-mono); padding: var(--s3) 0; border-top: 1px solid var(--ink); border-bottom: var(--line); }
.body .embed .lbl { color: var(--ink); margin-bottom: var(--s2); }
.body .embed .lbl + .lbl { margin-top: var(--s3); }
.body .embed .v { font-weight: var(--w-medium); margin-right: .8em; }
.body .embed table { width: 100%; border-collapse: collapse; }
.body .embed td { padding: 8px 12px 8px 0; border-top: var(--line); vertical-align: top; }
.body .embed td:first-child { width: 1%; white-space: nowrap; color: var(--ink-2); }
.body .embed td.r { text-align: right; white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
.body .embed .rank td:first-child { width: auto; white-space: normal; color: var(--ink); }
.body .embed .foot { margin-top: var(--s2); color: var(--ink-2); }
.body .embed + .embed { border-top: 0; }
.body .sponsor { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

/* a free edition whose issue has a PRO edition says so once, where the article ends */
.twin { margin-top: var(--s5); padding-top: var(--s3); border-top: var(--line); font-size: var(--fs-lead); }
.twin a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.twin a:hover { color: var(--ink); }

/* a subscriber's post keeps one line where the PRO edition holds more */
.band { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; min-height: var(--hit); border-top: var(--line); border-bottom: var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); line-height: var(--lh-mono-sm); color: var(--ink-2); }
.band a { display: inline-flex; align-items: center; min-height: var(--hit); }

/* ---- the account page: rows of label and value, the login form reuses the gate's ---- */
.account h1 { font-weight: var(--w-light); font-size: var(--fs-title-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-title); padding-top: var(--s6); }
.account .rows { margin-top: var(--s5); border-top: var(--line); }
.account .rows > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--s4); padding: var(--s3) 0; border-bottom: var(--line); }
.account dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); line-height: var(--lh-mono-sm); color: var(--ink-2); padding-top: 4px; }
.account dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: var(--fs-body); line-height: var(--lh-ui); }
.account dd .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); color: var(--ink-2); flex-basis: 100%; }
.account .pro-now { display: inline-flex; align-items: center; gap: 6px; }
.account .ref { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.account .signin { margin-top: var(--s3); }
.account #logout { margin-top: var(--s5); }
.account .join { margin-top: var(--s5); }
.account .go { margin-top: var(--s5); }
.account .aside, .account .sent { margin-top: var(--s4); font-size: var(--fs-body); color: var(--ink-2); }
.account .aside a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 599px) { .account .rows > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } }

/* ---- the gate: a hairline break, one sentence, one button, Sign in ---- */
.gate { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--ink); scroll-margin-top: 88px; }
.gate p { margin-top: 0; font-size: var(--fs-h-sm); line-height: var(--lh-ui); font-weight: var(--w-light); max-width: 22em; }
.gate .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: var(--s5); }
.btn-pro { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; background: var(--pro); color: #fff; font-size: 15px; font-weight: var(--w-medium); }
.btn-pro:hover { background: var(--pro-hover); }
.btn-pro:active { transform: translateY(1px); }
.gate .login { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.gate .login:hover { color: var(--ink); }

/* ---- after the article: newer and older, then more of the category as cards, then the form ---- */
.after { margin-top: var(--s7); }
/* Newer and Older: one row, the arrows at the outer edges, label and number run into the title (round two, variant B) */
.nearby { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--line); border-bottom: var(--line); }
.nearby a { position: relative; display: block; padding: var(--s3) var(--s3) var(--s3) 28px; color: var(--ink); font-size: var(--fs-body); line-height: 1.3; transition: background-color var(--t-hover) linear; }
.nearby .older { grid-column: 2; padding: var(--s3) 28px var(--s3) var(--s3); border-left: var(--line); }
.nearby a::before { position: absolute; top: var(--s3); left: 0; color: var(--ink-2); }
.nearby .newer::before { content: '\2190'; content: '\2190' / ''; }
.nearby .older::before { content: '\2192'; content: '\2192' / ''; left: auto; right: 0; }
.nearby a:hover { background: var(--wash); }
.nearby a:hover .t { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.nearby .dl { display: inline; margin-right: .75em; }
@media (max-width: 599px) { .nearby { grid-template-columns: minmax(0, 1fr); } .nearby .older { grid-column: 1; padding: var(--s3) 0 var(--s3) 28px; border-left: 0; border-top: var(--line); } .nearby .older::before { left: 0; right: auto; } }
.more-cat { margin-top: var(--s7); padding-top: 0; }
/* three related cards in two columns leave an orphan */
@media (min-width: 600px) and (max-width: 1023px) { .more-cat .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sect { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: var(--s3); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); }
.sect h2 { font: inherit; color: var(--ink); }
.sect a { display: inline-flex; align-items: center; min-height: var(--hit); margin: calc((var(--hit) - 1.35em) / -2) 0; color: var(--ink); }
.sect a span { color: var(--ink-2); margin-left: .6em; }
.sect a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

/* the subscribe form: the one primary action on a free post for a signed-out reader */
.join { margin-top: var(--s7); padding: var(--s6) 0 0; border-top: var(--line); }
.join h2 { font-weight: var(--w-light); font-size: var(--fs-title); line-height: var(--lh-tight); letter-spacing: var(--tr-title); }
.join p { margin-top: var(--s1); color: var(--ink-2); font-size: var(--fs-body); }
.join form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; margin-top: var(--s3); }
.join input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--ink-3); border-radius: 0; background: var(--paper); color: var(--ink); font: 16px var(--font-voice); -webkit-appearance: none; appearance: none; transition: border-color var(--t-hover) linear; }
.join input::placeholder { color: var(--ink-2); opacity: 1; }
.join input:hover { border-color: var(--ink-2); }
.join input:focus-visible { border-color: var(--ink); }
.btn-ink { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border: 0; background: var(--ink); color: var(--paper); font: var(--w-medium) 15px var(--font-voice); cursor: pointer; transition: background-color var(--t-hover) linear; }
.btn-ink:hover { background: #2a2e38; }
.btn-ink:active { transform: translateY(1px); }
@media (max-width: 479px) { .join form { flex-direction: column; } .join input { flex: none; } }
/* archive.js marks a refused address and writes the reason on this line */
form .err { display: none; flex-basis: 100%; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); line-height: var(--lh-mono-sm); color: var(--critical); }
form.invalid .err { display: block; }

/* ---- the site's footer as public/pro.html draws it; the Life canvas lies on the paper under its words ---- */
.site-foot { position: relative; isolation: isolate; margin: var(--s8) calc(var(--pad) * -1) 0; }
.site-foot::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: var(--frame-line); }
.life-under { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.site-foot .inner { position: relative; padding: 72px var(--pad) 40px; }
.site-foot h2 { font-weight: 450; font-size: 62px; line-height: 1.02; letter-spacing: -.02em; max-width: 560px; margin-bottom: 40px; }
.site-foot .hl { font-family: var(--font-pixel); font-weight: 400; font-size: .92em; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.fcols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-top: 40px; border-top: 1px solid var(--frame-line); }
.fcols .col { display: flex; flex-direction: column; gap: 12px; margin: 0; }   /* not the reading column's centring */
.fcols .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--ink-2); }
.fcols a { font-size: 14px; color: var(--ink-2); transition: color var(--t-hover) linear; }
.fcols a:not(.wordmark) { display: inline-block; padding: 4px 0; margin: -4px 0; }
.fcols a:hover { color: var(--ink); }
.fcols p { font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 260px; }
.copyright { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--frame-line); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-2); }
@media (max-width: 899px) { .site-foot .inner { padding: 56px var(--pad) 32px; } .site-foot h2 { font-size: 44px; margin-bottom: 30px; } .fcols { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 30px; } .copyright { margin-top: 30px; } }

/* ---- motion: only an image archive.js marked as loading is hidden, so nothing waits on a script ---- */
@media (prefers-reduced-motion: no-preference) {
  .fig img.loading, .body figure img.loading { opacity: 0; }
  .fig img.in, .body figure img.in { transition: opacity 150ms linear; }
}

/* view transitions: across documents the card's figure and title travel; the page itself swaps at once, a cross-fade ghosts */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 180ms; animation-timing-function: var(--ease-emphasized); }
::view-transition-old(*) { animation: none; opacity: 0; }   /* only the new snapshot moves, so no text doubles */
::view-transition-new(*) { animation: none; }
::view-transition-group(top) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}