/* ============================================================
   Minimal Zine Poster v0.1 — web design system
   Aged paper ground · huge negative space · serif/typewriter type
   one high-chroma cobalt anchor · print & scan defects · flat scan
   ============================================================ */

/* ---------- 1. Palette ----------
   Paper tones + gray/black support ONE saturated cobalt anchor.
   Legacy variable names (--bg/--fg/--muted/--line/--link) are kept
   as aliases so existing inline SVG diagrams inherit this palette. */
:root {
  --paper:      #efece3;
  --paper-deep: #e4e0d4;
  --paper-edge: #dcd7c8;
  --ink:        #1c1a17;
  --ink-soft:   #5e594f;
  --ink-faint:  #6f6a5e;  /* carries dates/labels/tags — must clear AA 4.5:1 */
  --ink-ghost:  #9a9487;  /* decorative marginalia only (aria-hidden) */
  --rule:       #d3cebf;
  --cobalt:     #0b40cf;

  /* aliases for legacy markup + post SVGs */
  --bg:    var(--paper);
  --fg:    var(--ink);
  --muted: var(--ink-soft);
  --line:  var(--rule);
  --link:  var(--cobalt);

  /* ui-serif resolves to New York on Apple platforms — a far more current
     face than the Palatino/Georgia era, which is what made the old stack
     read as dated. Everything after it is a graceful fallback. */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype",
           Palatino, Georgia, "Songti SC", "Noto Serif SC",
           "Source Han Serif SC", serif;
  --mono:  ui-monospace, "SF Mono", "IBM Plex Mono", "Roboto Mono",
           "Courier New", monospace;

  --measure: 34rem;   /* prose column ~62ch */
  --rail:    9.5rem;  /* left marginalia rail */
  --gutter:  2.75rem;
}

/* "Night press" — ink-stained paper rather than clean dark UI */
[data-theme="dark"] {
  --paper:      #17150f;
  --paper-deep: #1e1b14;
  --paper-edge: #242018;
  --ink:        #e7e1d2;
  --ink-soft:   #a09883;
  --ink-faint:  #8a8372;
  --ink-ghost:  #635d4f;
  --rule:       #322d22;
  --cobalt:     #5b7bff;
}

/* ---------- 2. Paper ground ----------
   Aged mottling via layered radial gradients; no gradient-as-decor. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 70% 50% at 12% 8%,  var(--paper-deep) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 88% 22%, var(--paper-edge) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 96%, var(--paper-deep) 0%, transparent 65%);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.72;
  overflow-x: hidden;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Scan noise + paper fibre. Fixed overlay, never intercepts pointer. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .1; }

::selection { background: var(--cobalt); color: var(--paper); }

/* ---------- 3. Type ---------- */
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.01em; }

p { margin: 1.15em 0; }

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cobalt);
  padding-bottom: .5px;
  transition: background-color .12s linear;
}
a:hover { background-color: color-mix(in srgb, var(--cobalt) 13%, transparent); }

strong { font-weight: 600; }
em     { font-style: italic; }

/* Typewriter microtext — dates, labels, coordinates, archival marks */
.mono, .micro, .label, .rail-label, .idx, .meta, .small {
  font-family: var(--mono);
  font-variant-ligatures: none;
}
.micro {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.9;
}
.small { font-size: .8rem; color: var(--ink-soft); letter-spacing: .01em; }

/* Section label sitting in the left rail */
.label {
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- 4. Shell ---------- */
.sheet { max-width: 62rem; margin: 0 auto; padding: 0 var(--gutter); }

/* Top rule: hairline only, no sticky bar, no shadow, no card */
.masthead-bar {
  border-bottom: 1px solid var(--rule);
  background: transparent;
}
.masthead-bar .sheet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}
.sigil {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav { display: flex; align-items: baseline; gap: 1.5rem; }
.nav a {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: none;
}
.nav a:hover { background: none; color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 2px solid var(--cobalt);
  padding-bottom: 2px;
}

.theme-toggle {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .3rem .6rem;
  cursor: pointer;
  transition: border-color .12s linear, color .12s linear;
}
.theme-toggle:hover { border-color: var(--cobalt); color: var(--ink); }

/* ---------- 5. Poster masthead ----------
   ~70-90% of this region reads as bare paper; the visual cluster
   (photo + name + cobalt block) stays small and off-centre. */
.poster {
  position: relative;
  min-height: 60vh;
  padding: 7.5rem 0 5.5rem;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gutter);
  align-content: start;
}

.poster-rail { grid-column: 1; }
.poster-body { grid-column: 2; max-width: 30rem; }

/* Torn-edge halftone photo specimen — small, grayscale, photocopied */
.specimen {
  position: relative;
  width: 150px;
  height: 190px;
  margin-bottom: 2.4rem;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 112' preserveAspectRatio='none'%3E%3Cpath d='M2 4 L86 1 L87 106 L44 111 L3 108 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 112' preserveAspectRatio='none'%3E%3Cpath d='M2 4 L86 1 L87 106 L44 111 L3 108 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.specimen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* halftone degradation over the plate */
.specimen::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) .5px, transparent .6px);
  background-size: 3px 3px;
  opacity: .3;
  mix-blend-mode: multiply;
}

/* Name as headline-as-object, with a single-hue misregistration ghost */
.wordmark {
  position: relative;
  font-size: clamp(3rem, 8.4vw, 5.4rem);
  line-height: .96;
  letter-spacing: -0.042em;
  margin: 0 0 1.6rem;
}
.wordmark .alt {
  display: block;
  font-family: var(--mono);
  font-size: .2em;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.25rem;
}
/* Off-register second ink pass. Must read as misprint, never as a shadow:
   clearly chromatic, offset up-and-left, no blur, no dark edge. */
.wordmark::before {
  content: attr(data-ghost);
  position: absolute;
  left: -3px; top: -2.5px;
  color: var(--cobalt);
  opacity: .34;
  z-index: -1;
  pointer-events: none;
  white-space: pre;
}

/* The one short readable phrase, drifting under the colour anchor */
.phrase {
  position: absolute;
  top: 18.2rem;   /* clears the colour anchor (8.5rem + 132px) */
  right: 0;
  width: 9.5rem;
  font-size: .82rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  padding-top: .7rem;
}

.standfirst {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 26rem;
  margin: 0 0 2.1rem;
}
.standfirst b { color: var(--ink); font-weight: 600; }

/* THE colour anchor: an opaque cobalt block, ~1.4% of first screen.
   Substantial, not a hairline or a dot. */
.anchor-block {
  position: absolute;
  top: 8.5rem;
  right: 0;
  width: 104px;
  height: 132px;
  background: var(--cobalt);
  z-index: 0;
}
.anchor-block::after {  /* risograph grain, saturation preserved */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.5) .6px, transparent .7px);
  background-size: 4px 4px;
  opacity: .22;
}
.anchor-note {
  position: absolute;
  top: 8.5rem;
  right: 122px;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

/* Contact / index links — typewriter, drifting */
.index-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
}
.index-links a { border-bottom-width: 1px; }
.stamp {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

/* ---------- 6. Sections: rail + column, no cards ---------- */
.leaf {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gutter);
  padding: 3.4rem 0;
  border-top: 1px solid var(--rule);
}
.leaf > .rail { grid-column: 1; }
.leaf > .col  { grid-column: 2; max-width: var(--measure); }
.leaf.wide > .col { max-width: none; }

/* The section label stays in the margin while its content scrolls past,
   the way a running head sits on a printed page. The numeral is set large
   and pale — the scale jump against the micro-label is what keeps the
   page from reading as uniformly, flatly minimal. */
.leaf > .rail {
  position: sticky;
  top: 2.4rem;
  align-self: start;
  display: flex;
  flex-direction: column;
}
.rail .rail-num {
  order: -1;                     /* numeral above its label */
  display: block;
  font-family: var(--serif);
  font-size: 3.1rem;
  line-height: .82;
  letter-spacing: -0.045em;
  color: var(--ink-ghost);
  margin: -0.35rem 0 .55rem -0.1rem;
  font-feature-settings: "lnum" 1;
}
/* A year range is too long for the display size — set it smaller, one line */
.rail .rail-num.range {
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-top: 0;
}

.rail .label { display: block; }

/* A short cobalt tab where each section's rule begins */
.leaf::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.4rem;
  height: 2px;
  background: var(--cobalt);
}

h2.leaf-title {
  font-size: 1.28rem;
  margin: 0 0 1.3rem;
  letter-spacing: -0.005em;
}

/* ---------- 6b. Notice — a stamped panel, not a generic card ----------
   Flat, square, cobalt-ruled on the leading edge. No radius, no shadow:
   it reads as something pressed onto the page. */
.notice {
  position: relative;
  margin: 0 0 1.9rem;
  padding: 1.05rem 1.25rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--cobalt) 22%, var(--rule));
  border-left: 3px solid var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 7.5%, transparent);
}
.notice-label {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: .45rem;
}
.notice p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
}

/* Emphasis badge for a distinction worth calling out (e.g. an oral) */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--cobalt);
  padding: .18em .5em .16em;
  margin-left: .5em;
  vertical-align: .1em;
  white-space: nowrap;
}

/* ---------- 7. Archival lists (news, experience, education, misc) ---------- */
.entries { list-style: none; margin: 0; padding: 0; }
.entries > li {
  padding: .82rem 0;
  border-bottom: 1px dotted var(--rule);
}
.entries > li:last-child { border-bottom: none; }
.entries .when {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .3rem;
}
.entries .what { display: block; }
.entries .where {
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.66;
  display: block;
  margin-top: .2rem;
}

/* Trailing link row inside an archival entry */
.entries .links {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
}

/* ---------- 8. Publications — numbered plates, no cards ---------- */
.plate {
  display: grid;
  grid-template-columns: 2.6rem 6.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 1.7rem 0;
  border-bottom: 1px dotted var(--rule);
  align-items: start;
}
.plate:last-of-type { border-bottom: none; }
/* Entries with no local figure keep the three-column grid and leave the
   plate cell empty, so every title stays on the same alignment. */
.plate.no-fig > :last-child { grid-column: 3; }
.plate .idx {
  font-size: .68rem;
  color: var(--ink-faint);
  letter-spacing: .06em;
  padding-top: .2rem;
}
.plate-fig {
  position: relative;
  filter: grayscale(1) contrast(1.06);
  border: 1px solid var(--rule);
}
.plate-fig img { display: block; width: 100%; height: auto; }
.plate-fig::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--ink) .4px, transparent .5px);
  background-size: 3px 3px;
  opacity: .26;
  mix-blend-mode: multiply;
}
.plate-title { font-size: 1.02rem; line-height: 1.5; margin: 0 0 .45rem; }
.plate-authors { font-size: .88rem; margin: 0 0 .3rem; }
.plate-venue {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .55rem;
}
.plate-links {
  display: flex;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .06em;
}

/* Marked work: a substantial cobalt bar, not a red dashed box */
.plate.marked { position: relative; padding-left: 1rem; margin-left: -1rem; }
.plate.marked::before {
  content: "";
  position: absolute;
  left: 0; top: 1.7rem; bottom: 1.7rem;
  width: 4px;
  background: var(--cobalt);
}

.year-mark {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.8rem 0 .4rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}
.year-mark:first-of-type { margin-top: 0; }

/* ---------- 9. Blog / diary list ---------- */
.diary { display: block; }
.diary-item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px dotted var(--rule);
}
.diary-item:last-child { border-bottom: none; }
.diary-when {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: .35rem;
}
.diary-title { font-size: 1.22rem; line-height: 1.4; margin: 0 0 .5rem; }
.diary-title a { border-bottom: none; }
.diary-title a:hover { background: none; color: var(--cobalt); }
.diary-excerpt { color: var(--ink-soft); margin: 0 0 .7rem; font-size: .96rem; }

/* Tags as typewriter marginalia, not filled pills */
.tags { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.tag {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tag::before { content: "/ "; color: var(--cobalt); }

/* ---------- 10. Post pages ---------- */
.post-sheet { max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter); }
.back-link {
  display: inline-block;
  margin: 2.6rem 0 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: none;
}
.back-link:hover { background: none; color: var(--cobalt); }

.post-header {
  padding: 3rem 0 2.4rem;
  margin-bottom: 2.6rem;
  border-bottom: 1px solid var(--rule);
}
/* Which shelf a piece sits on: technical writing or personal notes */
.post-kind {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: .9rem;
}

.post-title {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}
.post-meta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .9rem;
}
.post-tags { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.post-tag {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  padding: 0;
  border-radius: 0;
}
.post-tag::before { content: "/ "; color: var(--cobalt); }

.post-content { font-size: 1.06rem; line-height: 1.85; }
.post-content .lead { font-size: 1.16rem; line-height: 1.8; color: var(--ink); }
.post-content h2 {
  font-size: 1.42rem;
  margin: 2.9rem 0 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.post-content h3 { font-size: 1.14rem; margin: 2.1rem 0 .7rem; }
.post-content p { margin: 1.25em 0; }
.post-content ul, .post-content ol { padding-left: 1.3rem; }
.post-content li { margin: .5rem 0; }

.post-content code {
  font-family: var(--mono);
  font-size: .86em;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  padding: .1em .35em;
  border-radius: 0;
}
.post-content pre {
  font-family: var(--mono);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-left: 2px solid var(--rule);
  padding: 1rem 1.1rem;
  border-radius: 0;
  overflow-x: auto;
  line-height: 1.6;
  font-size: .86rem;
}
.post-content pre code { background: none; padding: 0; }

.post-content blockquote {
  margin: 1.9rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--cobalt);
  color: var(--ink-soft);
  font-style: italic;
}
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
  margin: 1.9rem 0;
  filter: grayscale(1) contrast(1.05);
}

/* callout: flat cobalt-tinted panel, no radius, no shadow */
.callout {
  margin: 2.2rem 0;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--cobalt);
  border-radius: 0;
  background: color-mix(in srgb, var(--cobalt) 6%, transparent);
}
.callout p { margin: 0; font-size: 1rem; }

.figure { margin: 2.6rem 0; }
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption,
.figure .caption {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .7rem;
}
.figure .figcaption {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .7rem;
}

/* Hand-built inline SVG diagrams, redrawn as flat technical plates:
   hairline rules in ink, the single cobalt accent for emphasis. */
.dgm text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.dgm-box    { fill: transparent; stroke: var(--rule); stroke-width: 1.25; }
.dgm-box.accent { stroke: var(--cobalt); stroke-width: 2; }
.dgm-line   { stroke: var(--ink-faint); stroke-width: 1.25; fill: none; }
.dgm-line.accent { stroke: var(--cobalt); stroke-width: 1.75; }
.dgm-grid   { fill: none; stroke: var(--rule); stroke-width: .75; }
.dgm-axis   { stroke: var(--ink-faint); stroke-width: 1; }
.dgm-area   {
  fill: var(--cobalt);
  fill-opacity: .14;
  stroke: var(--cobalt);
  stroke-width: 2;
  stroke-linejoin: round;
}
.dgm-dot    { fill: var(--cobalt); }
.dgm-arrow  { fill: var(--ink-faint); }
.dgm-arrow.accent { fill: var(--cobalt); }
.t          { fill: var(--ink); }
.t.muted    { fill: var(--ink-soft); }
.t.accent   { fill: var(--cobalt); }

/* ---------- 11. Colophon ---------- */
.colophon {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 2.4rem 0 3.4rem;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gutter);
}
.colophon .col { grid-column: 2; }
.colophon .micro { margin: 0 0 .3rem; }

/* Visitor plate — kept, but printed as a quiet grayscale map plate */
.plate-map {
  filter: grayscale(1) contrast(1.04) opacity(.72);
  max-width: 320px;
  margin-top: .8rem;
}
.foot {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  text-align: left;
}

/* ---------- 12. Responsive: rails collapse, air is preserved ---------- */
@media (max-width: 860px) {
  :root { --gutter: 1.6rem; }
  .poster,
  .leaf,
  .colophon { grid-template-columns: 1fr; }
  .poster-rail,
  .poster-body,
  .leaf > .rail,
  .leaf > .col,
  .colophon .col { grid-column: 1; }
  /* rail becomes a single line: numeral beside its label */
  .leaf > .rail {
    margin-bottom: 1rem;
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: .6rem;
  }
  .rail .rail-num {
    font-size: 1.55rem;
    line-height: 1;
    margin: 0;
  }
  .poster { min-height: auto; padding: 4rem 0 3.4rem; }
  .anchor-block { width: 72px; height: 92px; top: 4.6rem; }
  .anchor-note { display: none; }
  .specimen { width: 124px; height: 157px; }
  /* the phrase rejoins the flow so it cannot ride over the wordmark */
  .phrase {
    position: static;
    grid-column: 1;
    width: auto;
    max-width: 20rem;
    margin-top: 1.8rem;
    padding-top: 0;
  }
  .plate { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .plate-fig { display: none; }
  .plate.no-fig > :last-child { grid-column: 2; }
  .diary-item { grid-template-columns: 1fr; }
  .diary-when { padding: 0 0 .5rem; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .masthead-bar .sheet { flex-wrap: wrap; gap: .8rem; }
  .nav { gap: 1.1rem; }
}

/* ============================================================
   13. Motion — the press, not the parallax
   Everything here reads as printing or scanning: ink settling into
   paper, a rule being drawn, a plate wiping in under a scan head.
   No depth, no bounce, no cinematic easing — the skill forbids all
   three, so movement stays short, slow and flat.

   All initial hidden states are scoped to [data-motion="on"], which
   only zine.js sets. No JS, or reduced-motion, means nothing is ever
   hidden — content never depends on a script to become visible.
   ============================================================ */
:root {
  --ease-paper: cubic-bezier(.16, 1, .3, 1);  /* expo-out: calm, no overshoot */
  --dur-ink:  760ms;
  --dur-rule: 1000ms;
  --dur-wipe: 900ms;
}

/* ---- Ink settling: sections and entries rise a few px and absorb ---- */
[data-motion="on"] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity   var(--dur-ink) var(--ease-paper) var(--reveal-delay, 0ms),
    transform var(--dur-ink) var(--ease-paper) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-motion="on"] [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Release the compositor hint once the element has arrived */
[data-motion="on"] [data-reveal].is-done { will-change: auto; }

/* Rail marginalia trails its section very slightly, like a second pass */
[data-motion="on"] .leaf > .rail[data-reveal] { --reveal-delay: 90ms; }

/* ---- The rule is drawn, left to right ---- */
.leaf,
.post-content h2 { position: relative; }

[data-motion="on"] .leaf,
[data-motion="on"] .post-content h2 { border-top-color: transparent; }

[data-motion="on"] .leaf::before,
[data-motion="on"] .post-content h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-rule) var(--ease-paper);
}
[data-motion="on"] .leaf.is-in::before,
[data-motion="on"] .post-content h2.is-in::before { transform: scaleX(1); }

/* ---- Plates wipe in under the scan head ----
   The portrait is excluded on purpose — it is present from the first paint. */
[data-motion="on"] .plate-fig[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-wipe) var(--ease-paper);
}
[data-motion="on"] .plate-fig[data-reveal].is-in { clip-path: inset(0 0 0 0); }

/* ---- Off-register drift: the cobalt pass slips as the paper moves ----
   Driven by --scroll-slip (px) from zine.js. A 0-4px shift on a 70px
   glyph is a misprint, not a parallax layer. */
.wordmark::before {
  transform: translate3d(calc(var(--scroll-slip, 0px) * -1), 0, 0);
}

/* ---- Reading progress: a cobalt rule laid along the top edge ---- */
.progress-rule {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--cobalt);
  transform: scaleX(var(--read, 0));
  transform-origin: left center;
  z-index: 10000;
  pointer-events: none;
}

/* ---- Anchor links glide rather than jump ----
   zine.js animates jumps itself with behavior:'instant' steps, so this is the
   fallback for hash-on-load and any scroll it does not intercept. */
[data-motion="on"] { scroll-behavior: smooth; }

/* Anchored sections stop a little below the top edge, not flush against it */
.leaf { scroll-margin-top: 1.6rem; }

/* ============================================================
   Section index — a running contents list in the left margin
   Lives entirely in the outer margin, so it never crowds the text
   column; below 1280px there isn't margin to spare and it is dropped.
   ============================================================ */
.sidenav {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  /* The text column starts at calc(50vw - 31rem); sit a gutter to its left. */
  left: calc(50vw - 31rem - 1.25rem - 7.4rem);
  width: 7.4rem;
  z-index: 20;
}
@media (min-width: 1280px) {
  .sidenav { display: block; }
}

.sidenav ol { list-style: none; margin: 0; padding: 0; }
.sidenav li { margin: 0; }

.sidenav a {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem 0;
  border-bottom: none;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .2s linear;
}
.sidenav a:hover { background: none; color: var(--ink); }

.sidenav .n {
  flex: none;
  font-size: .55rem;
  color: var(--ink-ghost);
  transition: color .2s linear;
}
.sidenav a:hover .n { color: var(--ink-soft); }

/* A cobalt rule that draws itself alongside the section you are reading.
   Its width is reserved permanently and only scaleX animates, so the row
   never reflows and the transition stays on the compositor. */
.sidenav .tick {
  flex: none;
  display: block;
  width: .95rem;
  height: 1px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s var(--ease-paper);
}

.sidenav .t { white-space: nowrap; }

.sidenav a[aria-current="true"] { color: var(--ink); }
.sidenav a[aria-current="true"] .n { color: var(--cobalt); }
.sidenav a[aria-current="true"] .tick { transform: scaleX(1); }

/* The index stays out of the way until the poster has been scrolled past */
[data-motion="on"] .sidenav {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-paper);
}
[data-motion="on"] .sidenav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Reduced motion: no movement at all, nothing hidden ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-motion="on"] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  [data-motion="on"] .leaf,
  [data-motion="on"] .post-content h2 { border-top-color: var(--rule); }
  [data-motion="on"] .leaf::before,
  [data-motion="on"] .post-content h2::before { display: none; }
  .wordmark::before { transform: none; }
  .progress-rule { display: none; }
  /* the index is still useful without motion — just never animated or faded */
  [data-motion="on"] .sidenav { opacity: 1 !important; pointer-events: auto; }
  .sidenav .tick { transition: none !important; }
  .sidenav a[aria-current="true"] .tick { transform: scaleX(1) !important; }
}

/* ============================================================
   14. Bilingual copy (中文 / English)
   Both languages ship in the markup; one is hidden. The hidden one is
   display:none so assistive tech and find-in-page only ever see the
   active language. With no JS, [data-lang] is absent and the Chinese
   original — the canonical text — is what shows.
   ============================================================ */
html:not([data-lang="en"]) [data-i18n="en"] { display: none; }
html[data-lang="en"] [data-i18n="zh"] { display: none; }

/* Chinese sets slightly looser leading; CJK needs the air */
[data-i18n="zh"] { line-height: 1.86; }

.lang-toggle {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .3rem .55rem;
  cursor: pointer;
  transition: border-color .12s linear, color .12s linear;
}
.lang-toggle:hover { border-color: var(--cobalt); color: var(--ink); }
.lang-toggle .on { color: var(--cobalt); }

/* ============================================================
   15. Citation block — the imprint at the foot of a piece
   ============================================================ */
.citation {
  margin-top: 3.6rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--rule);
}
.citation h2 {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.1rem;
  padding: 0;
  border: none;
}
.cite-block { margin-bottom: 1.6rem; }
.cite-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.cite-kind {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cite-text {
  font-size: .93rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
}
.citation pre {
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.62;
  margin: 0;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-left: 2px solid var(--cobalt);
  border-radius: 0;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.copy-btn {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .22rem .5rem;
  cursor: pointer;
  flex: none;
  transition: border-color .12s linear, color .12s linear;
}
.copy-btn:hover { border-color: var(--cobalt); color: var(--ink); }
.copy-btn[data-state="done"] { border-color: var(--cobalt); color: var(--cobalt); }

@media (max-width: 520px) {
  .citation pre { font-size: .7rem; padding: .8rem .85rem; }
}

/* ---------- 16. Print: it is already a paper poster ---------- */
@media print {
  body::after, .anchor-block::after { display: none; }
  .masthead-bar, .theme-toggle, .lang-toggle, .plate-map,
  .progress-rule, .copy-btn, .sidenav { display: none; }
  body { background: #fff; color: #000; }
  /* nothing may stay mid-animation on paper */
  [data-motion="on"] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  [data-motion="on"] .leaf,
  [data-motion="on"] .post-content h2 { border-top-color: var(--rule); }
  [data-motion="on"] .leaf::before,
  [data-motion="on"] .post-content h2::before { display: none; }
}