/* 窗边 (By the window): an author's page as a desk beside a window.
   Tokens first; every page uses only these. */


@property --sweep { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  /* Exact prototype colours come from theme.json through the shared head. */
  /* where cast shadows fall; site.js moves these with the light */
  --shx: 9; --shy: 13; --shb: 26;

  --serif: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'Strata Title Serif', 'SimSun', serif;
  --serif-b: 'Strata Title Serif', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --kai: 'LXGW WenKai', 'Kaiti SC', 'STKaiti', 'KaiTi', 'AR PL UKai CN', 'Noto Serif CJK SC', serif;
  --sans: 'Inter', -apple-system, 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-xs: 0.8125rem;   /* 13 */
  --t-s: 0.9375rem;    /* 15 */
  --t-m: 1.0625rem;    /* 17 */
  --t-l: 1.25rem;      /* 20 */
  --t-xl: 1.625rem;    /* 26 */
  --t-2xl: clamp(1.75rem, 2.6vw, 2.25rem);
  --t-3xl: clamp(2.125rem, 4.2vw, 3.5rem);
  --t-name: clamp(4rem, 9.2vw, 8.75rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px; --s10: 144px;
  --gutter: clamp(20px, 5vw, 80px);
  --wide: 1160px;

  /* light arrives; a hand lifts a sheet; a pen draws */
  --arrive: cubic-bezier(.22, .7, .2, 1);
  --hand: cubic-bezier(.3, .0, .2, 1);
  --d1: 140ms; --d2: 280ms; --d3: 560ms; --d4: 900ms;

  --cast: calc(var(--shx) * 1px) calc(var(--shy) * 1px) calc(var(--shb) * 1px) rgb(from var(--shadow) r g b / var(--sha)), 0 1px 2px rgb(from var(--shadow) r g b / calc(var(--sha) * .7));
  --cast-up: calc(var(--shx) * 2.1px) calc(var(--shy) * 2.1px) calc(var(--shb) * 1.9px) rgb(from var(--shadow) r g b / calc(var(--sha) * .8)), 0 1px 2px rgb(from var(--shadow) r g b / calc(var(--sha) * .5));
  --cast-low: calc(var(--shx) * .4px) calc(var(--shy) * .4px) calc(var(--shb) * .45px) rgb(from var(--shadow) r g b / var(--sha)), 0 0 1px rgb(from var(--shadow) r g b / calc(var(--sha) * .9));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 48px; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-m)/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, canvas, video, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--slip); color: var(--slip-ink); }
.skip { position: fixed; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 3px; font-size: var(--t-s); transition: top var(--d1); }
.skip:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'cv11'; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }

/* ------------------------------------------------------------------ the light */

/* over everything, touching nothing: below mid-grey it multiplies, above it screens */
.light, .light-still { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: 40; pointer-events: none; mix-blend-mode: hard-light; }
.light { opacity: 0; transition: opacity 700ms linear; }
.window-light-slot.is-running ~ .light { opacity: 1; }
/* one frame of the same light, there from the first paint; the canvas takes over from it */
.light-still { background: var(--field) center top / cover no-repeat; transition: opacity 700ms linear; }
@media (max-aspect-ratio: 4/5) {
  .light-still { background-image: var(--field-tall); }
}
.window-light-slot:is(.is-running, .is-video) ~ .light-still { opacity: 0; }

/* reading pages: the light stays at the head of the page and scrolls away with it */
.light--head { position: absolute; height: min(100lvh, 820px); -webkit-mask-image: linear-gradient(#000 52%, transparent); mask-image: linear-gradient(#000 52%, transparent); }

/* ------------------------------------------------------------------ pen strokes */

/* an underline drawn left to right, a little uneven like a real stroke */
.ul { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size var(--d2) var(--hand); }
a:hover .ul, a:focus-visible .ul, .ul:hover, button:hover .ul { background-size: 100% 1.5px; }
.stroke { position: relative; }
.stroke::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -0.16em; height: 0.34em; background: var(--pen); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7.5C30 4.6 58 8.4 92 6.2s70-3.4 107-.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7.5C30 4.6 58 8.4 92 6.2s70-3.4 107-.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path var(--d2) var(--hand); pointer-events: none; }
a:hover .stroke::after, a:focus-visible .stroke::after, .stroke.is-on::after, [aria-pressed='true'] .stroke::after, [aria-current] .stroke::after { clip-path: inset(0 0 0 0); }

/* things come out of the shade as they enter the window */
.window-enhanced .lit { opacity: 0; transition: opacity var(--d4) var(--arrive); transition-delay: calc(var(--i, 0) * 90ms); }
.window-enhanced .lit.is-in, .no-js .lit { opacity: 1; }

/* ------------------------------------------------------------------ nav */

.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.nav__in { display: flex; align-items: center; gap: var(--s5); height: 80px; font-size: var(--t-s); }
.nav__crumb { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.nav__site { font: 600 var(--t-s)/1 var(--serif-b); letter-spacing: 0.04em; color: var(--ink-2); padding: 12px 0; transition: color var(--d1); }
.nav__site:hover { color: var(--pen); }
.nav__crumb i { width: 1px; height: 15px; background: var(--ink-3); rotate: 22deg; align-self: center; }
.nav__me { font: 600 var(--t-m)/1 var(--serif-b); padding: 12px 0; }
.nav__links { display: flex; gap: var(--s5); }
.nav__links a { padding: 12px 2px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; margin-right: -10px; transition: background var(--d1); }
.icon-btn:hover { background: rgb(from var(--shadow) r g b / .08); }
html[data-public-theme='dark'] .icon-btn:hover { background: rgb(255 255 255 / .07); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .moon, html[data-public-theme='dark'] .theme-btn .sun { display: none; }
html[data-public-theme='dark'] .theme-btn .moon { display: block; }

/* ------------------------------------------------------------------ home: the wall by the window */

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: auto; }
/* only when the film stands in for the live light */
.hero__film { position: absolute; inset: 0; }
.hero__film video { width: 100%; height: 100%; object-fit: cover; }
.hero__who { position: relative; padding-bottom: clamp(150px, 25svh, 250px); padding-top: 120px; }
/* a small round print, mounted */
.avatar { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at 42% 36%, var(--print-up), var(--print) 62%, var(--print-down)); color: var(--print-hi); display: grid; place-items: center; font: 600 34px/1 var(--serif-b); border: 3px solid var(--sheet); box-shadow: var(--cast); margin-bottom: var(--s6); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero__name { font: 400 var(--t-name)/1.05 var(--serif); letter-spacing: 0.06em; margin-left: -0.04em; }
.hero__bio { margin-top: var(--s5); font-size: var(--t-l); line-height: 1.75; max-width: 23em; text-wrap: pretty; }
.hero__links { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-s); }
.hero__links a { padding: 8px 0; }
@media (max-width: 760px) { .hero__who { padding-bottom: 132px; } .hero__bio { font-size: 1.125rem; } .nav__in { height: 68px; gap: var(--s4); } }

/* ------------------------------------------------------------------ sheets */

.sheet { position: relative; display: block; background: var(--sheet); border-radius: 2px; box-shadow: var(--cast); rotate: var(--r, 0deg); transition: box-shadow var(--d2) var(--hand), translate var(--d2) var(--hand), rotate var(--d2) var(--hand); }
a.sheet:hover, a.sheet:focus-visible, .sheet:has(> a:hover), .sheet:has(> a:focus-visible) { box-shadow: var(--cast-up); translate: calc(var(--shx) * -.28px) calc(var(--shy) * -.34px); rotate: 0deg; }
.meta { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: var(--t-xs); color: var(--ink-2); }

/* a sun print: the cover of an article */
.print { display: block; background: var(--print-mount); border-radius: 1px; overflow: hidden; }
.print img { width: 100%; height: 100%; object-fit: cover; }
/* a print develops: pale and yellowish out of the tray, then the blue comes up */
.dev img { filter: sepia(1) hue-rotate(28deg) saturate(1.1) brightness(1.55) contrast(.4); opacity: .8; transition: filter 1800ms var(--arrive), opacity 900ms linear; transition-delay: calc(var(--i, 0) * 160ms + 200ms); }
.dev.is-in img, .no-js .dev img, .seen .dev img { filter: none; opacity: 1; }
.seen .dev img { transition: none; }

/* ------------------------------------------------------------------ home: featured */

.feat { position: relative; z-index: 2; margin-top: clamp(-190px, -17svh, -104px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6); align-items: start; }
.feat h3 { font: 600 var(--t-xl)/1.36 var(--serif-b); text-wrap: balance; }
.feat p { margin-top: var(--s3); color: var(--ink-2); font-size: var(--t-s); line-height: 1.75; max-width: 34em; }
.feat .meta { margin-top: var(--s5); }
.feat__a { grid-column: 1 / span 7; --r: -0.5deg; }
.feat__a a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6); padding: var(--s5); }
.feat__a .print { aspect-ratio: 4 / 5; }
.feat__a .txt { align-self: end; padding: var(--s4) var(--s3) var(--s3) 0; }
.feat__a h3 { font-size: var(--t-2xl); line-height: 1.3; }
.feat__side { grid-column: 8 / span 5; display: grid; gap: var(--s6); margin-top: var(--s8); }
.feat__b { --r: 0.6deg; }
.feat__b a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s5); padding: var(--s5); align-items: start; }
.feat__b .print { aspect-ratio: 4 / 5; }
.feat__c { --r: -0.3deg; margin-left: var(--s6); }
.feat__c a { display: block; padding: var(--s6) var(--s6) var(--s5); }
@media (max-width: 900px) {
  .feat { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: -84px; }
  .feat__a, .feat__side { grid-column: 1; }
  .feat__side { margin-top: 0; gap: var(--s5); }
  .feat__a a { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s4); }
  .feat__a .print { aspect-ratio: 16 / 10; }
  .feat__a .txt { padding: var(--s2) var(--s2) var(--s3); }
  .feat__b a { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s4); padding: var(--s4); }
  .feat__c { margin-left: 0; }
  .feat__c a { padding: var(--s5); }
  .feat h3 { font-size: var(--t-l); }
  .feat__a h3 { font-size: var(--t-xl); }
}

/* ------------------------------------------------------------------ sections */

.sec { padding-top: var(--s10); }
.sec__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3) var(--s7); margin-bottom: var(--s7); }
.sec__h h2, .phead h1 { font: 400 var(--t-3xl)/1.1 var(--serif); letter-spacing: 0.04em; }
/* how many, set like the mark of a footnote */
.sec__h h2 sup, .phead h1 sup { font: 400 0.9375rem/1 var(--sans); letter-spacing: 0; color: var(--ink-2); vertical-align: super; margin-left: 4px; font-variant-numeric: tabular-nums; }
.more { font-size: var(--t-s); color: var(--pen); margin-left: auto; padding: 8px 0; }

/* topics: a word and how many, set like a footnote mark */
.topics { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: var(--t-m); }
.topics button { padding: 8px 0; color: var(--ink-2); transition: color var(--d1); }
.topics button sup { font-size: 0.62em; margin-left: 3px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.topics button:hover, .topics button[aria-pressed='true'] { color: var(--pen); }
.topics button[aria-pressed='true'] sup, .topics button:hover sup { color: var(--pen); }

/* ------------------------------------------------------------------ posts by year */

.year { display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: var(--s6); }
.year + .year { margin-top: var(--s7); }
.year[hidden] { display: none; }
.year__n { position: sticky; top: 32px; align-self: start; font: 400 var(--t-2xl)/1 var(--serif); color: var(--ink-2); letter-spacing: 0.02em; padding-top: 22px; }
.row[hidden] { display: none; }
.row a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: var(--s5); align-items: baseline; padding: 18px 0 19px; border-top: 1px solid transparent; transition: opacity var(--d2); }
/* a rule between rows, none above the first one showing */
.row:not([hidden]) ~ .row:not([hidden]) a { border-top-color: var(--rule); }
.row__m { font-size: var(--t-s); color: var(--ink-2); }
.row h3 { font: 600 var(--t-l)/1.45 var(--serif-b); }
.row p { color: var(--ink-2); font-size: var(--t-s); line-height: 1.7; margin-top: 2px; }
.row .meta { justify-content: flex-end; white-space: nowrap; }
.row a:hover h3, .row a:focus-visible h3 { color: var(--pen); }
.row h3 span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 3px; transition: background-size var(--d3) var(--hand); }
.row a:hover h3 span, .row a:focus-visible h3 span { background-size: 100% 1.5px; }
/* looking at one topic leaves the others in the shade */
.rows[data-peek] .row:not(.is-peek) a { opacity: 0.32; }
@media (max-width: 760px) {
  .year { grid-template-columns: minmax(0, 1fr); }
  .year__n { position: static; padding: 0 0 var(--s2); font-size: var(--t-xl); }
  .row a { grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--s3); }
  .row .meta { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
  .row h3 { font-size: 1.125rem; }
  .row p { display: none; }
  .row a { padding: 15px 0 16px; }
}

/* ------------------------------------------------------------------ series: stapled stacks */

.sers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s8); align-items: start; }
.ser { padding: var(--s6) var(--s6) var(--s5); --r: -0.4deg; }
.ser:nth-child(2n) { --r: 0.5deg; margin-top: var(--s6); }
/* the pages under the top one: more parts, a thicker stack */
.ser::before, .ser::after { content: ''; position: absolute; inset: 0; background: var(--sheet); border-radius: 2px; box-shadow: var(--cast-low); z-index: -1; }
.ser::before { rotate: 1.1deg; translate: 5px 6px; }
.ser::after { rotate: -0.7deg; translate: -4px 9px; }
.ser { isolation: isolate; }
.ser h3 { font: 600 var(--t-xl)/1.3 var(--serif-b); }
.ser ol { margin-top: var(--s4); counter-reset: n; }
.ser li { counter-increment: n; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; border-top: 1px solid var(--rule); }
.ser li::before { content: counter(n); font-size: var(--t-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ser li > * { padding: 9px 0; font-size: var(--t-s); }
.ser li > span { color: var(--ink-2); }
.ser li a:hover { color: var(--pen); }
.ser li[aria-current] { color: var(--pen); font-weight: 600; }
.ser li[aria-current]::before { color: var(--pen); }
/* a staple */
.ser > i { position: absolute; left: 22px; top: -4px; width: 22px; height: 7px; border: 1.5px solid var(--ink-3); border-bottom: 0; border-radius: 2px 2px 0 0; rotate: -8deg; }
@media (max-width: 760px) { .sers { grid-template-columns: minmax(0, 1fr); gap: var(--s7); } .ser:nth-child(2n) { margin-top: 0; } .ser { padding: var(--s5) var(--s5) var(--s4); } }

/* ------------------------------------------------------------------ the shelf: a paper, and his slip on it */

.papers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s9) var(--s7); align-items: start; padding-bottom: var(--s6); }
.paper { position: relative; padding: 0 22px 58px 0; }
.paper:nth-child(3n + 2) { margin-top: var(--s7); }
.paper:nth-child(3n) { margin-top: var(--s4); }
.paper__sheet { display: block; aspect-ratio: 1 / 1.06; padding: 30px 28px 0; text-align: center; overflow: hidden; --r: -0.7deg; }
.paper:nth-child(2n) .paper__sheet { --r: 0.6deg; }
.paper:nth-child(3n) .paper__sheet { --r: -0.2deg; }
.paper__at { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.paper__t { display: block; margin-top: 16px; font: 600 1.0625rem/1.38 var(--serif-b); text-wrap: balance; }
.paper__by { display: block; margin-top: 12px; font-size: var(--t-xs); color: var(--ink-2); }
/* the rest of the first page: two columns of text too small to read */
.paper__body { display: block; margin-top: 24px; height: 100%; background: repeating-linear-gradient(to bottom, var(--ink-3) 0 1px, transparent 1px 7px) left top / calc(50% - 9px) 100% no-repeat, repeating-linear-gradient(to bottom, var(--ink-3) 0 1px, transparent 1px 7px) right top / calc(50% - 9px) 100% no-repeat; opacity: 0.5; }
.slip { position: absolute; right: 0; bottom: 0; width: min(84%, 310px); padding: 16px 18px 14px; background: var(--slip); color: var(--slip-ink); font: 400 1.125rem/1.62 var(--kai); border-radius: 1px; box-shadow: var(--cast-low); rotate: var(--rs, 1.4deg); transition: translate var(--d2) var(--hand), rotate var(--d2) var(--hand), box-shadow var(--d2) var(--hand); pointer-events: none; }
.paper:nth-child(2n) .slip { --rs: -1.1deg; }
.paper:nth-child(3n) .slip { --rs: 0.6deg; }
.slip time { display: block; margin-top: 8px; font: 400 0.75rem/1 var(--sans); letter-spacing: 0.04em; opacity: 0.86; font-variant-numeric: tabular-nums; text-align: right; }
.paper:has(.paper__sheet:hover) .slip, .paper:has(.paper__sheet:focus-visible) .slip { translate: 10px 12px; rotate: 0deg; box-shadow: var(--cast); }
@media (max-width: 1040px) { .papers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paper:nth-child(n) { margin-top: 0; } .paper:nth-child(2n) { margin-top: var(--s7); } }
@media (max-width: 640px) {
  .papers { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .paper:nth-child(n) { margin-top: 0; }
  .paper { padding: 0 14px 52px 0; }
  .paper__sheet { aspect-ratio: auto; padding: 26px 22px 0; }
  .paper__body { height: 132px; margin-top: 20px; }
}

/* ------------------------------------------------------------------ footer: the end of the day */

.foot { margin-top: var(--s10); padding-bottom: var(--s7); }
.foot__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--ink-2); }
.foot__in nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-left: auto; }
.foot__in a { padding: 8px 0; color: var(--ink); }
.foot__site { font: 600 var(--t-s)/1 var(--serif-b); letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ page heads */

.phead { padding-top: clamp(150px, 24svh, 230px); padding-bottom: var(--s8); display: flex; align-items: baseline; gap: var(--s6); }
.phead .count { color: var(--ink-2); font-size: var(--t-m); }

/* ------------------------------------------------------------------ article frame */

.ahead { position: relative; padding-top: clamp(140px, 22svh, 220px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); align-items: end; }
.ahead__in { max-width: 820px; }
.ahead .meta { font-size: var(--t-s); margin-bottom: var(--s5); }
.ahead .meta a { color: var(--pen); }
.ahead h1 { font: 600 var(--t-3xl)/1.22 var(--serif-b); text-wrap: balance; view-transition-name: ttl; }
.ahead__lead { margin-top: var(--s5); font-size: var(--t-l); line-height: 1.8; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.ahead__print { width: clamp(190px, 19vw, 264px); aspect-ratio: 4 / 5; rotate: 1.6deg; box-shadow: var(--cast); border: 9px solid var(--sheet); border-radius: 2px; background: var(--sheet); view-transition-name: cov; }
.ahead__print img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .ahead { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .ahead__print { width: 150px; order: -1; border-width: 6px; } }

/* contents: the pen runs a line down the margin as far as has been read */
.toc { position: sticky; top: 56px; padding-left: 20px; font-size: var(--t-xs); line-height: 1.5; }
.toc::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.toc__ink { position: absolute; left: -0.5px; top: 6px; width: 2px; height: calc(100% - 12px); background: var(--pen); border-radius: 1px; transform-origin: top; transform: scaleY(var(--read, 0)); }
.toc__nib { position: absolute; left: -3.5px; top: 2px; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; background: var(--pen); rotate: -45deg; translate: 0 calc(var(--read-px, 0) * 1px); }
.toc a { display: block; padding: 7px 0; color: var(--ink-2); transition: color var(--d1); }
.toc a:hover { color: var(--pen); }
.toc a.is-read { color: var(--ink); }
.toc a.is-now { color: var(--pen); font-weight: 600; }
/* narrow windows: the same line, across the top */
.readline { position: fixed; left: 0; top: 0; height: 2px; width: 100%; background: var(--pen); transform-origin: left; transform: scaleX(var(--read, 0)); z-index: 45; display: none; }
@media (max-width: 1240px) { .readline { display: block; } }

/* after the text: the series, then the sheets on either side */
.aend { max-width: 920px; margin: var(--s10) auto 0; display: grid; gap: var(--s8); }
.aend .ser { max-width: 520px; }
.around { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.around a { padding: var(--s5) var(--s6) var(--s6); --r: -0.5deg; }
.around a + a { --r: 0.5deg; text-align: right; }
.around a:only-child { grid-column: 1 / -1; max-width: 460px; }
.around .dir { display: block; font-size: var(--t-l); color: var(--pen); line-height: 1; transition: translate var(--d2) var(--hand); }
.around a:hover .dir { translate: -5px 0; }
.around a + a:hover .dir, .around a.fwd:hover .dir { translate: 5px 0; }
.around h3 { margin-top: var(--s3); font: 600 var(--t-l)/1.45 var(--serif-b); text-wrap: balance; }
.around .meta { margin-top: var(--s3); }
.around a + a .meta { justify-content: flex-end; }
@media (max-width: 640px) { .around { grid-template-columns: minmax(0, 1fr); } .around a + a { text-align: left; } .around a + a .meta { justify-content: flex-start; } }

/* ------------------------------------------------------------------ a reading note */

/* the sheet stands on the left edge of the text column; the slip hangs off it to the right */
.nhead { padding-top: clamp(140px, 21svh, 210px); display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s8); align-items: center; max-width: 680px; }
.nhead__sheet { padding: 44px 40px 36px; text-align: center; --r: -0.8deg; view-transition-name: cov; }
.nhead__sheet h1 { margin-top: 20px; font: 600 var(--t-xl)/1.36 var(--serif-b); text-wrap: balance; view-transition-name: ttl; }
.nhead__sheet .paper__by { margin-top: 16px; font-size: var(--t-s); }
.nhead__sheet .paper__body { height: 86px; margin-top: 28px; }
.btn { display: inline-block; margin-top: 26px; padding: 9px 20px; font-size: var(--t-s); color: var(--pen); border: 1px solid currentColor; border-radius: 999px; transition: background var(--d1), color var(--d1); }
.btn:hover { background: var(--pen); color: var(--sheet); }
.nhead__slip { position: static; width: auto; max-width: 21em; padding: 26px 28px 22px; font-size: var(--t-xl); line-height: 1.66; pointer-events: auto; rotate: 0.9deg; box-shadow: var(--cast); margin-left: -124px; margin-right: -220px; margin-top: 72px; z-index: 1; justify-self: start; }
@media (max-width: 900px) {
  .nhead { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; }
  .nhead__sheet { padding: 32px 24px 28px; }
  .nhead__slip { margin: -18px 0 0 18px; margin-right: 0; font-size: var(--t-l); padding: 20px 20px 16px; }
}

/* ------------------------------------------------------------------ page transitions
   Going from room to room, the light crosses the page along its own slant and the next page
   is what it uncovers. Opening an article or a note keeps the sheet in the hand. */

@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: 0s; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { mix-blend-mode: normal; animation: sweep 760ms var(--hand) both; -webkit-mask-image: linear-gradient(104deg, #000 calc(var(--sweep) - 16%), transparent var(--sweep)); mask-image: linear-gradient(104deg, #000 calc(var(--sweep) - 16%), transparent var(--sweep)); }
@keyframes sweep { from { --sweep: 0%; } to { --sweep: 140%; } }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: sweep-back; -webkit-mask-image: linear-gradient(104deg, transparent var(--sweep), #000 calc(var(--sweep) + 16%)); mask-image: linear-gradient(104deg, transparent var(--sweep), #000 calc(var(--sweep) + 16%)); }
@keyframes sweep-back { from { --sweep: 100%; } to { --sweep: -40%; } }

html:active-view-transition-type(open)::view-transition-old(root), html:active-view-transition-type(close)::view-transition-old(root) { animation: vt-out 220ms linear both; }
html:active-view-transition-type(open)::view-transition-new(root), html:active-view-transition-type(close)::view-transition-new(root) { animation: vt-in 520ms var(--arrive) 140ms both; -webkit-mask-image: none; mask-image: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-group(ttl), ::view-transition-group(cov) { animation-duration: 600ms; animation-timing-function: var(--hand); }
::view-transition-old(ttl), ::view-transition-new(ttl) { height: 100%; width: auto; max-width: none; object-fit: none; object-position: left top; }
::view-transition-old(cov), ::view-transition-new(cov) { height: 100%; width: 100%; object-fit: fill; }
html[data-flat] .ahead h1, html[data-flat] .ahead__print, html[data-flat] .nhead__sheet, html[data-flat] .nhead__sheet h1 { view-transition-name: none; }

/* night falls the way the light left: back along the same slant, more slowly */
html:active-view-transition-type(theme)::view-transition-new(root) { animation: sweep-back 1000ms var(--hand) both; -webkit-mask-image: linear-gradient(104deg, transparent var(--sweep), #000 calc(var(--sweep) + 40%)); mask-image: linear-gradient(104deg, transparent var(--sweep), #000 calc(var(--sweep) + 40%)); }
html:active-view-transition-type(theme-day)::view-transition-new(root) { animation: sweep 1000ms var(--hand) both; -webkit-mask-image: linear-gradient(104deg, #000 calc(var(--sweep) - 40%), transparent var(--sweep)); mask-image: linear-gradient(104deg, #000 calc(var(--sweep) - 40%), transparent var(--sweep)); }

/* filtering: rows keep their identity and close ranks */
html:active-view-transition-type(filter)::view-transition-old(root) { display: none; }
html:active-view-transition-type(filter)::view-transition-new(root) { animation: none; -webkit-mask-image: none; mask-image: none; }
::view-transition-group(light) { z-index: 50; mix-blend-mode: hard-light; animation: none; }
::view-transition-image-pair(light) { isolation: auto; }
::view-transition-old(light) { display: none; }
::view-transition-new(light) { animation: none; mix-blend-mode: normal; }
::view-transition-group(.rowvt) { animation-duration: 420ms; animation-timing-function: var(--hand); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .lit { opacity: 1; }
}
.ser li[aria-current] > * { color: var(--pen); }


/* Integration: the original sheet geometry above, the house prose below. */
:root {
 --paper:var(--th-paper); --sheet:var(--th-surface); --slip:var(--th-slip); --slip-ink:var(--th-slip-ink);
 --ink:var(--th-ink); --ink-2:var(--th-muted); --ink-3:var(--th-ink-3); --rule:var(--th-line);
 --pen:var(--th-accent); --print:var(--th-print); --print-hi:var(--th-print-hi); --shadow:var(--th-shadow);
 --print-up:var(--th-print-up); --print-down:var(--th-print-down); --print-mount:var(--th-print-mount); --well:var(--th-well); --sha:.17;
}
:root[data-public-theme='dark'] { --sha:.55; }
@media(prefers-color-scheme:dark) { :root[data-mode='system']:not([data-theme-ready]) { --sha:.55; } }
[hidden] { display:none !important; }
.no-js .js-only { display:none; }
body { display:block; }
body > main { position:relative; }
.window-light-slot { position:absolute; inset:0 0 auto; height:100svh; pointer-events:none; z-index:0; }
.window-light-slot[data-kind='scene'][data-static='false']:not(.light--head) { position:fixed; height:100lvh; }
.window-light-slot.light--head { height:min(100lvh,820px); mix-blend-mode:normal; }
.window-light-slot .st-visual-video { width:100%; height:100%; object-fit:cover; visibility:hidden; }
.window-light-slot.is-video .st-visual-video { visibility:visible; }
.light.st-visual-canvas { max-width:none; height:100lvh; }
.light.st-visual-canvas.light--head { height:min(100lvh,820px); }
.window-main.st-article-main { padding-top:0; }
.ahead { margin-bottom:var(--s9); }
.nhead { margin-bottom:var(--s9); }
.window-toc-rail { position:absolute; top:0; bottom:0; right:calc(50% + 340px + 48px); width:calc((min(100vw - 2 * var(--gutter),var(--wide)) - 776px)/2); }
.window-toc-rail .toc { max-height:calc(100svh - 112px); overflow:auto; }
.toc .st-toc__list { font:inherit; }
.toc .st-toc__item a { padding:7px 0; }
.toc .st-toc__item--3 a { padding-left:12px; }
.window-toc-inline { display:none; }
@media(max-width:1240px) { .window-toc-rail { display:none; } .ahead { margin-bottom:var(--s8); } }
.no-js .window-toc-inline { display:block; width:min(680px,calc(100% - 48px)); margin:0 auto 48px; }
.no-js .window-toc-rail { display:none; }
:root[data-slip-font='serif'] { --kai:var(--serif); }
:root[data-reduced-motion='true'] { scroll-behavior:auto; }
:root[data-reduced-motion='true'] *, :root[data-reduced-motion='true'] *::before, :root[data-reduced-motion='true'] *::after { animation:none !important; transition:none !important; }
:root[data-reduced-motion='true'] :is(.sheet,.slip,.around .dir) { translate:none !important; }
:root[data-reduced-motion='true'] .lit { opacity:1; }
:root[data-reduced-motion='true'] .dev img { filter:none; opacity:1; }
:root[data-reduced-motion='true'] .readline { display:none; }
:root[data-reduced-motion='true'] :is(.toc__ink,.toc__nib) { display:none; }
@media(prefers-reduced-motion:reduce) { .window-enhanced .lit { opacity:1; } .dev img { filter:none; opacity:1; } :is(.sheet,.slip,.around .dir) { translate:none !important; } }
/* Colours only: discussion and document layouts remain the shared implementations. */
.st-discussion__form { background:var(--sheet); }
.st-discussion button:hover:not(:disabled) { background:color-mix(in srgb,var(--pen) 7%,transparent); }
.st-discussion :is(.st-discussion__error,.st-discussion__feedback.is-error) { color:var(--pen); }
.window-quotes, .window-readers { width:min(680px,calc(100% - 48px)); margin:48px auto 0; }
.window-quotes blockquote + blockquote { margin-top:32px; }
.window-quotes blockquote > p + p { margin-top:16px; }
.window-readers { display:flex; flex-wrap:wrap; gap:24px; }
.nav__crumb { min-width:0; }
.nav__site, .nav__me { overflow-wrap:anywhere; }
@media(max-width:480px) { .nav__crumb { gap:8px; } .nav__in { gap:12px; } .nav__links { gap:16px; flex-shrink:0; } .theme-btn { flex-shrink:0; } }

.feat__a a:not(:has(.print)), .feat__b a:not(:has(.print)) { display:block; }
/* Reduced motion keeps the sheets in place, including their resting angle. */
:root[data-reduced-motion='true'] .sheet { rotate:var(--r,0deg) !important; }
:root[data-reduced-motion='true'] .slip { rotate:var(--rs,1.4deg) !important; }
.nhead__slip { --rs:.9deg; }
@media(prefers-reduced-motion:reduce) { .sheet { rotate:var(--r,0deg) !important; } .slip { rotate:var(--rs,1.4deg) !important; } }
:root[data-paper-tilt='false'] :is(.sheet,.slip,.ahead__print) { rotate:0deg !important; }

.paper--long-note .slip { position:relative; margin:-48px -22px -58px auto; }
@media(max-width:640px) { .paper--long-note .slip { margin-right:-14px; margin-bottom:-52px; } }