/* 沿途 · The Deck. Every post is a card: dealt as a fan on the index, opened
   at the top of its article. Warm paper and ink, a real Song serif for
   Chinese and Fraunces for numbers and italic lines (self-hosted, subset to
   what the journal sets: apps/writing/src/lib/journal-fonts.mjs), cards
   with weight, gloss and depth. Self-contained: no town stylesheet loads. */
:root {
  color-scheme: light;
  --bg: #f3ede3;
  --glow: #fffaf1;
  --text-color: #2a231b;
  --muted: #5e5446;
  --soft: #6f6354;
  --line: #e2d8c8;
  --rule: #cbbfac;
  --surface: #ebe3d6;
  --card: #fbf7ef;
  --accent: #a9482a;
  --blue: var(--accent);
  --shadow-1: 0 1px 1px rgb(60 40 20 / 10%), 0 2px 4px rgb(60 40 20 / 6%);
  --shadow-2: 0 2px 2px rgb(60 40 20 / 8%), 0 18px 40px rgb(60 40 20 / 22%);
  --shadow-3: 0 3px 3px rgb(60 40 20 / 8%), 0 34px 70px rgb(60 40 20 / 30%);
  --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Card faces. */
  --paper: #fbf7ef; --paper-ink: #2a231b;
  --ink: #1f1b17; --ink-ink: #efe6d6;
  --terra: #b5532f; --terra-ink: #fbeee2;
  --sage: #5d6b55; --sage-ink: #eef0e4;
  --font-serif: "Journal Serif", "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", serif;
  --font-display: "Journal Display", "Journal Serif", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-text: var(--font-sans);
  --font-pixel: var(--font-sans);
  --panel: var(--bg);
  --journal-width: 760px;
  --journal-shadow: var(--shadow-2);
  --ease: cubic-bezier(.2,.8,.2,1);
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
  -webkit-text-size-adjust: 100%;
}
html[data-scheme='dark'] {
  color-scheme: dark;
  --bg: #16130f; --glow: #2a2219; --text-color: #ece4d6; --muted: #c2b8a6; --soft: #998e7c; --line: #2b261f; --rule: #40382d; --surface: #221d17; --card: #1e1a15; --accent: #e08a68;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 40%); --shadow-2: 0 2px 3px rgb(0 0 0 / 35%), 0 22px 48px rgb(0 0 0 / 55%); --shadow-3: 0 3px 4px rgb(0 0 0 / 35%), 0 40px 80px rgb(0 0 0 / 65%);
  --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper: #efe6d6; --paper-ink: #2a231b; --ink: #2c251e;
}
@media (prefers-color-scheme: dark) {
  html:not([data-scheme='light']) {
    color-scheme: dark;
    --bg: #16130f; --glow: #2a2219; --text-color: #ece4d6; --muted: #c2b8a6; --soft: #998e7c; --line: #2b261f; --rule: #40382d; --surface: #221d17; --card: #1e1a15; --accent: #e08a68;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%); --shadow-2: 0 2px 3px rgb(0 0 0 / 35%), 0 22px 48px rgb(0 0 0 / 55%); --shadow-3: 0 3px 4px rgb(0 0 0 / 35%), 0 40px 80px rgb(0 0 0 / 65%);
    --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --paper: #efe6d6; --paper-ink: #2a231b; --ink: #2c251e;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background-color: var(--bg); }
/* Lamplight from above and a fine paper grain over the flat colour. */
body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--grain), radial-gradient(ellipse 90% 60% at 50% -12%, var(--glow), transparent 70%) no-repeat, var(--bg); color: var(--text-color); font: 400 16px/1.75 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, input, textarea, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left)); top: calc(env(safe-area-inset-top, 0px) + 16px); width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-radius: 8px; background: var(--text-color); color: var(--bg); }
.skip-link:focus-visible { width: auto; height: auto; padding: 8px 16px; overflow: visible; clip-path: none; }

/* ---- Header -------------------------------------------------------------- */
.journal-header, .journal-main, .journal-footer { width: min(var(--journal-width), calc(100% - 64px)); margin-inline: auto; }
.journal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: max(24px, env(safe-area-inset-top)) 0 0; }
.journal-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; border-radius: 6px; }
.journal-brand img { display: block; width: 28px; height: 28px; object-fit: contain; filter: brightness(.25) sepia(.5); }
html[data-scheme='dark'] .journal-brand img { filter: sepia(.3); }
@media (prefers-color-scheme: dark) { html:not([data-scheme='light']) .journal-brand img { filter: sepia(.3); } }
.journal-brand-name { font: italic 400 17px/1 var(--font-display); letter-spacing: .01em; }
.journal-tools { display: flex; align-items: center; gap: 4px; }
.journal-language { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.journal-language button { position: relative; z-index: 1; display: grid; place-items: center; min-width: 29px; height: 24px; padding: 0 7px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 600 11px/1 var(--font-sans); transition: color .2s ease; }
.journal-language::before { content: ''; position: absolute; z-index: 0; left: 3px; top: 3px; bottom: 3px; width: 29px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-1); transition: transform .3s var(--ease); pointer-events: none; }
html[data-journal-language='en'] .journal-language::before { transform: translateX(31px); }
.journal-language button[aria-pressed='true'] { color: var(--text-color); }
.journal-icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: var(--soft); transition: color .2s ease, background .2s ease; }
.journal-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.journal-icon-button:hover, .journal-icon-button[aria-expanded='true'] { color: var(--text-color); background: color-mix(in srgb, var(--surface) 80%, transparent); }

/* ---- Title --------------------------------------------------------------- */
.journal-intro { position: relative; margin: 44px 0 6px; text-align: center; }
.journal-kicker { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0; margin: 0 0 20px; color: var(--soft); font: 600 11px/1.4 var(--font-sans); letter-spacing: .26em; text-transform: uppercase; }
.journal-kicker span + span::before { content: '·'; margin: 0 14px; }
/* Both languages hold the title and subtitle to the same boxes, so switching
   language swaps the words without moving the page under them. */
.journal-intro h1 { --title: clamp(84px, 14vw, 150px); display: flex; flex-direction: column; align-items: center; margin: 0; }
.journal-intro h1 b { display: flex; align-items: center; justify-content: center; height: calc(var(--title) * .95); font: 900 var(--title)/.95 var(--font-serif); letter-spacing: .04em; white-space: nowrap; }
html[data-journal-language='en'] .journal-intro h1 b { font: 500 calc(var(--title) * .5)/1 var(--font-display); letter-spacing: -.02em; }
.journal-intro h1 .journal-subtitle { display: flex; align-items: center; justify-content: center; height: 34px; margin-top: 14px; color: var(--soft); font: italic 300 clamp(20px, 2.4vw, 26px)/1 var(--font-display); letter-spacing: .01em; }
html[data-journal-language='zh'] .journal-intro h1 .journal-subtitle { font: 500 17px/1 var(--font-serif); letter-spacing: .5em; text-indent: .5em; }
.journal-intro > p:not(.journal-kicker) { max-width: 30em; margin: 16px auto 14px; color: var(--muted); font: 400 15px/1.85 var(--font-text); }
.journal-intro-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--soft); font-size: 13px; }
.journal-intro-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; }
.journal-intro-links svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.journal-intro-links a:hover, .journal-footer a:hover, .journal-back:hover, .article-return:hover { color: var(--text-color); }
.journal-intro-links .journal-link-popover { text-align: left; }

/* ---- The deck ------------------------------------------------------------ */
/* A card face, shared by the deck and an article's opening card. */
.deck-card, .article-card { --face: var(--paper); --face-ink: var(--paper-ink); position: relative; overflow: hidden; border-radius: 18px; background: var(--face); color: var(--face-ink); box-shadow: var(--shadow-2); isolation: isolate; }
.deck-card--ink { --face: var(--ink); --face-ink: var(--ink-ink); }
.deck-card--terra { --face: var(--terra); --face-ink: var(--terra-ink); }
.deck-card--sage { --face: var(--sage); --face-ink: var(--sage-ink); }
.deck-card--photo { --face: #2a2520; --face-ink: #fff; background: var(--img) center 30% / cover, var(--face); }
/* Paper fibre on plain faces, a fine inner edge on all, a darkening veil under text on photos. */
:is(.deck-card, .article-card)::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--grain); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); pointer-events: none; }
.deck-card--photo::before, .article-card.deck-card--photo::before { background: linear-gradient(180deg, rgb(0 0 0 / 25%), transparent 30%, transparent 45%, rgb(0 0 0 / 72%)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%); }
/* The gloss: a soft band of light that follows the pointer. */
:is(.deck-card, .article-card)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), rgb(255 255 255 / 34%), transparent 46%), linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 14%) 50%, transparent 64%); mix-blend-mode: soft-light; opacity: .8; transition: opacity .4s ease; pointer-events: none; }
.deck { position: relative; margin: 8px 0 26px; }
.deck-cards { --spread: clamp(96px, 13vw, 148px); position: relative; height: 470px; perspective: 1600px; }
.deck-card { --d: 0; --a: 0; position: absolute; left: 50%; top: 24px; display: block; width: 272px; height: 388px; margin-left: -136px; z-index: calc(10 - var(--a)); transform: translate(calc(var(--d) * var(--spread)), calc(var(--a) * var(--a) * 13px)) rotate(calc(var(--d) * 9deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 115%; transition: transform .55s var(--ease), box-shadow .55s var(--ease), filter .4s ease; will-change: transform; }
.deck-card:is(:hover, :focus-visible) { z-index: 20; transform: translate(calc(var(--d) * var(--spread)), calc(var(--a) * var(--a) * 13px - 44px)) rotate(calc(var(--d) * 5deg)) scale(1.04) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: var(--shadow-3); }
.deck-cards:has(.deck-card:hover) .deck-card:not(:hover) { filter: saturate(.85) brightness(.97); }
.deck-card__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 22px 24px; }
.deck-card small { font: 600 10px/1.4 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.deck-card__body { display: flex; flex-direction: column; gap: 6px; }
.deck-card__no { font: italic 300 64px/1 var(--font-display); letter-spacing: -.02em; opacity: .9; }
.deck-card strong { font: 600 23px/1.38 var(--font-serif); letter-spacing: .02em; text-wrap: balance; }
.deck-card--photo :is(small, .deck-card__body) { text-shadow: 0 1px 14px rgb(0 0 0 / 45%); }
.deck-card--paper .deck-card__no { color: var(--accent); }

/* ---- Contents ------------------------------------------------------------ */
.journal-archive { position: relative; }
.journal-contents { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 40px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.journal-contents h2 { margin: 0; font: 600 12px/1.4 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; }
html[data-journal-language='zh'] .journal-contents h2 { font: 600 15px/1.4 var(--font-serif); letter-spacing: .4em; }
.journal-years { display: flex; gap: 16px; }
.journal-years a { color: var(--soft); font: italic 400 16px/1 var(--font-display); transition: color .2s ease; }
.journal-years a:hover, .journal-years a:focus-visible { color: var(--accent); }
.journal-year { scroll-margin-top: 40px; }
.journal-year-label { margin: 30px 0 4px; color: var(--soft); font: italic 300 30px/1 var(--font-display); letter-spacing: -.01em; }
.journal-entry { position: relative; border-bottom: 1px solid var(--line); }
.journal-entry-link { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 18px; padding: 20px 0; transition: padding .45s var(--ease), opacity .3s ease; }
.journal-entry-no { color: var(--soft); font: italic 300 24px/1 var(--font-display); }
.journal-entry h3 { margin: 0; font: 600 23px/1.4 var(--font-serif); letter-spacing: .02em; text-wrap: pretty; transition: color .25s ease; }
.journal-entry-leader { display: none; }
.journal-entry-link time { color: var(--soft); font: 500 12px/1 var(--font-sans); letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.journal-entry-link:is(:hover, :focus-visible) { padding-left: 14px; }
.journal-entry-link:is(:hover, :focus-visible) h3 { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .post-list-page:has(.journal-entry-link:hover) .journal-entry-link:not(:hover) { opacity: .45; }
}
/* The excerpt and first picture, held out in the margin on wide screens. */
.journal-entry-aside { display: none; }
@media (min-width: 1300px) and (hover: hover) and (pointer: fine) {
  .journal-entry-aside { position: absolute; z-index: 5; left: calc(100% + 32px); top: 50%; display: block; width: 220px; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translate(-10px, -48%) rotate(2deg); pointer-events: none; transition: opacity .3s ease, transform .5s var(--ease), visibility .3s; }
  .journal-entry-preview { margin: 0 0 12px; overflow: hidden; border-radius: 10px; }
  /* Hidden, not removed, while it loads: a lazy image that isn't laid out never loads. */
  .journal-entry-preview:not(.is-ready) { opacity: 0; }
  .journal-entry-preview img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
  .journal-entry-aside p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font: 400 13.5px/1.85 var(--font-text); -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
  .journal-entry:is(:hover, :focus-within) .journal-entry-aside { opacity: 1; visibility: visible; transform: translate(0, -50%) rotate(1deg); }
}
.journal-tag { display: inline-block; color: var(--muted); font-size: 12px; line-height: 1.7; transition: color .2s ease; }
.journal-tag:hover { color: var(--accent); }
.journal-statistics { display: flex; flex-wrap: wrap; gap: 5px 0; color: var(--soft); font: 500 12px/1.6 var(--font-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.journal-statistics span + span::before { content: '·'; margin-inline: 10px; }
.journal-empty { color: var(--muted); text-align: center; }

/* ---- Writing over time --------------------------------------------------- */
.journal-history { --history-bar: color-mix(in srgb, var(--text-color) 30%, transparent); --history-active: var(--accent); position: relative; margin-top: 72px; }
.journal-history .journal-statistics { margin: 0 0 14px; }
.journal-history .journal-statistics span:first-child { color: var(--text-color); }
.history-track { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-x: contain; padding: 4px 2px 9px; }
.history-bars { display: grid; grid-template-columns: repeat(var(--history-months), minmax(0,1fr)); gap: 4px; min-width: calc(var(--history-months) * 13px); padding-bottom: 24px; }
.history-month { position: relative; min-width: 0; height: 64px; }
.history-month-button, .history-month-empty { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 64px; }
.history-month-empty::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--rule); }
.history-month-button { position: relative; padding: 0; border: 0; border-radius: 3px; background: transparent; }
.history-month-fill { display: block; width: 100%; max-width: 8px; min-height: 7px; border-radius: 4px; background: var(--history-bar); transition: background .2s ease, transform .25s var(--ease); transform-origin: bottom; }
.history-month-button:hover .history-month-fill, .history-month-button[aria-expanded='true'] .history-month-fill { background: var(--history-active); transform: scaleY(1.06); }
.history-month-button:focus-visible { outline-offset: 3px; }
.history-year { position: absolute; left: 0; top: calc(100% + 7px); padding-left: 6px; border-left: 1px solid var(--rule); color: var(--soft); font: italic 400 12px/1 var(--font-display); }
.history-popover { position: absolute; z-index: 12; width: max-content; max-width: min(330px,100%); padding: 10px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-2); font-size: 12px; line-height: 1.6; animation: history-reveal .16s ease both; }
.history-popover::after { content: ''; position: absolute; left: var(--history-arrow,50%); top: calc(100% - 4px); width: 9px; height: 9px; background: var(--card); transform: translateX(-50%) rotate(45deg); }
.history-month-summary { margin: 0 0 5px; color: var(--muted); font-size: 11px; }
.history-popover ul { margin: 0; padding: 0; list-style: none; max-height: 180px; overflow-y: auto; }
.history-popover a { display: block; padding: 3px 0; color: var(--text-color); font: 600 14px/1.6 var(--font-serif); }
.history-popover a:hover { color: var(--accent); }
@keyframes history-reveal { from { opacity: 0; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }

/* ---- Footer -------------------------------------------------------------- */
.journal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 96px; padding: 22px 0 max(40px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); color: var(--soft); font: 500 12px/1.6 var(--font-sans); }
.journal-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.journal-footer p { margin: 0; }
.journal-footer p span { margin-inline: 6px; }

/* ---- The article: its card, then the page -------------------------------- */
.journal-article { --journal-width: 720px; max-width: 720px; margin: 36px auto 0; }
.journal-back { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); font: 500 13px/1 var(--font-sans); transition: color .2s ease; }
.article-header { margin-bottom: 56px; perspective: 1800px; }
.article-header .journal-back { margin-bottom: 26px; }
.article-card { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 340px; padding: 26px 30px 32px; border-radius: 24px; box-shadow: var(--shadow-3); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.article-card.deck-card--photo { min-height: min(62vh, 520px); background-position: center 28%; }
/* The photo is the card's face, so the article doesn't repeat it as its cover. */
.journal-article:has(.article-card.deck-card--photo) .article-content > .article-cover:first-child { display: none; }
.article-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font: 600 11px/1.4 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; }
.article-card .article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.article-card .journal-tag { padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; font: 600 12px/1.4 var(--font-serif); letter-spacing: .12em; }
.article-card .journal-tag:hover { background: color-mix(in srgb, currentColor 24%, transparent); color: inherit; }
.article-card__no { display: block; margin-bottom: 8px; font: italic 300 clamp(64px, 9vw, 96px)/1 var(--font-display); letter-spacing: -.02em; opacity: .9; }
.deck-card--paper .article-card__no { color: var(--accent); }
.article-header h1 { margin: 0; font: 900 clamp(32px, 5.4vw, 54px)/1.25 var(--font-serif); letter-spacing: .03em; text-wrap: balance; }
.deck-card--photo :is(.article-card__head, .article-card__body) { text-shadow: 0 1px 18px rgb(0 0 0 / 45%); }
.post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 16px 0 0; font: 500 12px/1.7 var(--font-sans); letter-spacing: .12em; opacity: .85; }
.post-meta > * + *::before { content: '·'; padding-right: 10px; }
/* Reading. */
.article-content { font: 400 17px/2 var(--font-text); letter-spacing: .02em; overflow-wrap: anywhere; }
.article-content > :first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.3em; }
.article-content h2, .article-content h3, .article-content h4 { margin: 2.3em 0 .8em; line-height: 1.45; font-family: var(--font-serif); font-weight: 700; letter-spacing: .03em; scroll-margin-top: 32px; }
.article-content h2 { font-size: 26px; }
.article-content h2::before { content: ''; display: block; width: 28px; height: 2px; margin-bottom: 18px; background: var(--accent); }
.article-content h3 { font-size: 21px; }
.article-content a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-decoration-thickness: 1px; }
.article-content a:hover { color: var(--accent); text-decoration-color: currentColor; }
.article-content img, .article-content video { display: block; max-width: 100%; height: auto; margin: 36px auto; border-radius: 16px; box-shadow: var(--shadow-2); }
.article-content iframe { max-width: 100%; border-radius: 16px; }
.article-content > .article-cover { margin: 0 0 44px; }
.article-content > .article-cover img { width: 100%; height: auto; margin: 0; }
.article-content figure { margin: 40px 0; }
.article-content figcaption { margin-top: 12px; color: var(--soft); font: italic 400 14px/1.6 var(--font-display); text-align: center; }
.article-content blockquote { margin: 2em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent); color: var(--muted); font-family: var(--font-serif); }
.article-content hr { overflow: visible; height: auto; margin: 3em 0; border: 0; text-align: center; }
.article-content hr::before { content: '✦'; color: var(--accent); font: 400 14px/1 var(--font-display); letter-spacing: 1.4em; padding-left: 1.4em; }
.article-content ul, .article-content ol { padding-left: 1.5em; }
.article-content li { margin-block: .4em; }
.article-content pre { position: relative; padding: 24px 20px; overflow-x: auto; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-1); font: 13px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0; }
.article-content code { font: .85em/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0; }
.article-content :not(pre) > code { padding: 2px 5px; border-radius: 4px; background: var(--surface); }
.article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.article-content th, .article-content td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.code-copy-button { position: absolute; top: 6px; right: 8px; padding: 3px 8px; border: 0; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 11px; }
/* Keep reading feedback out of the browser's status-bar fade. */
.reading-progress-bar { position: fixed; z-index: 5; top: 50%; right: max(8px, env(safe-area-inset-right)); width: 2px; height: 72px; transform: translateY(-50%); overflow: hidden; border-radius: 2px; background: var(--line); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.reading-progress-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleY(var(--reading-progress, 0)); transform-origin: top; }
.reading-progress-bar[data-visible='true'] { opacity: .6; }
.article-share-copy { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--soft); transition: background .2s ease, color .2s ease, transform .16s ease; }
.article-share-copy:hover, .article-share-copy:focus-visible { background: var(--surface); color: var(--text-color); }
.article-share-copy:active { transform: scale(.92); }
.article-share-icon { display: block; width: 22px; height: 22px; overflow: visible; }
.article-share-link, .article-share-success { transform-origin: 12px 12px; transition: opacity .18s ease, transform .22s ease; }
.article-share-success { opacity: 0; }
.article-share-ring { stroke-width: 1; opacity: .4; }
.article-share-ring, .article-share-tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.article-share-copy[data-state='copied'] { color: var(--accent); background: var(--surface); }
.article-share-copy[data-state='copied'] .article-share-link { opacity: 0; transform: scale(.6); }
.article-share-copy[data-state='copied'] .article-share-success { opacity: 1; animation: journal-copy-settle .45s cubic-bezier(.2,.8,.2,1) both; }
.article-share-copy[data-state='copied'] .article-share-ring { animation: journal-copy-stroke .3s ease .06s both; }
.article-share-copy[data-state='copied'] .article-share-tick { animation: journal-copy-stroke .25s ease .22s both; }
.article-share-tooltip { position: absolute; bottom: calc(100% + 7px); right: 0; padding: 5px 8px; width: max-content; max-width: min(220px, calc(100vw - 48px)); border-radius: 6px; background: var(--text-color); color: var(--bg); font-size: 11px; line-height: 1.5; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .18s ease; }
.article-share-copy:is(:hover,:focus-visible,[data-state]) .article-share-tooltip { opacity: 1; transform: translateY(0); }
.share-copy-fallback { position: fixed; top: 0; left: -9999px; font-size: 16px; }
@keyframes journal-copy-stroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes journal-copy-settle { 0% { transform: scale(.75); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }
/* ---- The end: the card's back, then the cards handed back ----------------- */
/* The article closes on the back of its card: a lattice back with an inner
   frame, the colophon, the article's heart and its link. */
.article-end { margin-top: 72px; perspective: 1800px; }
.card-back { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 26px; padding: 28px 30px 28px 34px; border-radius: 22px; background: var(--grain), repeating-linear-gradient(45deg, rgb(239 230 214 / 4%) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgb(239 230 214 / 4%) 0 1px, transparent 1px 12px), var(--ink); color: var(--ink-ink); box-shadow: var(--shadow-3); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.card-back::before { content: ''; position: absolute; inset: 9px; z-index: -1; border: 1px solid rgb(239 230 214 / 15%); border-radius: 15px; pointer-events: none; }
.card-back::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at var(--gx, 85%) var(--gy, 0%), rgb(255 240 220 / 10%), transparent 55%); pointer-events: none; }
.card-back__no { font: italic 300 78px/.9 var(--font-display); letter-spacing: -.03em; color: #e08a68; }
.card-back__text { min-width: 0; }
.card-back__text p { margin: 0; }
.card-back__fin { font: italic 300 30px/1.1 var(--font-display); }
.card-back__title { margin-top: 10px !important; font: 700 16px/1.5 var(--font-serif); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-back__meta { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 2px !important; font: 600 10px/1.8 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.card-back__meta > * + *::before { content: '·'; padding-right: 10px; }
.card-back svg, .article-comments svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* The heart and the link are printed on the back like a card's corner index:
   a pip over a line of small capitals, in a margin ruled off from the colophon. */
.card-back__actions { display: flex; align-items: center; align-self: stretch; gap: 2px; margin: -12px -14px -12px 0; padding-left: 16px; border-left: 1px solid rgb(239 230 214 / 14%); }
.card-back__like, .card-back .article-share-copy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: auto; height: auto; min-width: 66px; min-height: 76px; padding: 10px 8px 8px; border: 0; border-radius: 14px; background: transparent; color: rgb(239 230 214 / 68%); font: 600 10px/1 var(--font-sans); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; font-variant-numeric: tabular-nums; transition: color .2s ease, background .2s ease, transform .16s ease; }
.card-back__like svg, .card-back .article-share-icon { width: 24px; height: 24px; transition: transform .35s var(--ease); }
.card-back__like:not(:disabled):hover, .card-back .article-share-copy:is(:hover, :focus-visible) { background: rgb(239 230 214 / 7%); color: var(--ink-ink); }
.card-back__like:not(:disabled):hover svg, .card-back .article-share-copy:hover .article-share-icon { transform: translateY(-2px); }
.card-back__like:not(:disabled):active, .card-back .article-share-copy:active { transform: scale(.94); }
/* Until the count arrives (or while comments can't be reached) the heart rests, faint. */
.card-back__like:disabled { cursor: default; color: rgb(239 230 214 / 38%); }
.card-back__like[aria-pressed='true'] { color: #e08a68; }
.card-back__like[aria-pressed='true'] svg, .comment-like[aria-pressed='true'] svg { fill: currentColor; animation: journal-heart-in .28s ease; }
/* A ring breaks from the heart as it fills. */
.card-back__like::after { content: ''; position: absolute; left: 50%; top: 10px; width: 24px; height: 24px; margin-left: -12px; border: 1.5px solid #e08a68; border-radius: 50%; opacity: 0; pointer-events: none; }
.card-back__like[aria-pressed='true']::after { animation: card-back-burst .55s ease-out; }
@keyframes card-back-burst { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(2.1); } }
/* The link's own line says what happened; the tooltip isn't needed here. */
.card-back .article-share-copy::after { content: 'Copy'; }
.card-back .article-share-copy[data-state='copied'] { color: #e08a68; }
.card-back .article-share-copy[data-state='copied']::after { content: 'Copied'; }
.card-back .article-share-copy[data-state='error']::after { content: 'Failed'; }
.card-back .article-share-copy svg { stroke-width: 1.6; }
.card-back .article-share-ring { stroke-width: 1; }
.card-back .article-share-tooltip { display: none; }
.article-return { display: inline-flex; margin-top: 22px; color: var(--soft); font: 500 13px/1 var(--font-sans); transition: color .2s ease; }
@keyframes journal-heart-in { 50% { transform: scale(1.18); } }

/* Comments: a blank card to write on, then the notes handed back, newest on
   top. Notes are paper cards set down a little askew; the author's are sage.
   Self-contained: the town's article-comments.css doesn't load here. */
.article-comments { --paper-accent: #a9482a; margin-top: 96px; scroll-margin-top: 24px; }
.comments-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.comments-heading h2 { margin: 0; font: 400 34px/1.1 var(--font-display); letter-spacing: -.01em; }
.comments-count { margin-left: 4px; color: var(--accent); font: italic 300 24px/1 var(--font-display); vertical-align: 6px; }
.comments-intro { margin: 8px 0 0; color: var(--soft); font: italic 300 17px/1.5 var(--font-display); }
.comments-refresh { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--soft); transition: color .2s ease, background .2s ease; }
.comments-refresh svg { width: 18px; height: 18px; }
.comments-refresh:not(:disabled):hover { color: var(--text-color); background: var(--surface); }
.comments-refresh:disabled svg { animation: comments-turn .9s linear infinite; }
@keyframes comments-turn { to { transform: rotate(360deg); } }
/* The blank card. Open, it folds down to a slim bar above the card being written. */
.comment-compose-toggle { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 104px; padding: 20px 24px; border: 1.5px dashed color-mix(in srgb, var(--text-color) 26%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--card) 45%, transparent); color: var(--muted); font: italic 300 22px/1.3 var(--font-display); text-align: left; transition: border-color .25s ease, color .25s ease, min-height .35s var(--ease), padding .35s var(--ease), font-size .35s var(--ease), transform .35s var(--ease); }
.comment-compose-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--text-color); color: var(--bg); transition: transform .35s var(--ease); }
.comment-compose-mark svg { width: 18px; height: 18px; stroke-width: 1.7; }
.comment-compose-toggle:not(:disabled):hover { border-color: var(--accent); color: var(--text-color); }
.comment-compose-toggle:not(:disabled):hover .comment-compose-mark { transform: rotate(90deg); }
.comment-compose-toggle[aria-expanded='true'] { min-height: 52px; padding-block: 4px; font-size: 17px; }
.comment-compose-toggle[aria-expanded='true'] .comment-compose-mark { transform: rotate(45deg) scale(.75); }
.comment-compose-toggle:disabled { opacity: .55; cursor: wait; }
.comment-composer { display: flow-root; overflow-anchor: none; scroll-margin-block: 24px; }
.comment-composer.is-transitioning { overflow: clip; }
html:has(.comment-composer:not([hidden])) { overflow-anchor: none; }
/* The card being written: paper, a ruled face. */
.comment-form { --ink-line: color-mix(in srgb, var(--paper-ink) 14%, transparent); --ink-quiet: color-mix(in srgb, var(--paper-ink) 58%, transparent); position: relative; margin: 14px 0 6px; padding: 4px 22px 18px; border-radius: 18px; background: var(--grain), var(--paper); color: var(--paper-ink); box-shadow: var(--shadow-2); }
.comment-form ::placeholder { color: var(--ink-quiet); opacity: 1; }
.comment-reply-target { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 0; padding: 6px 6px 6px 14px; border-radius: 10px; background: color-mix(in srgb, var(--paper-ink) 7%, transparent); font: 500 12px/1.5 var(--font-sans); }
.comment-reply-target button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--paper-accent); font: 600 12px/1 var(--font-sans); }
.comment-identity { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--ink-line); }
.comment-identity input { flex: 1 1 0; min-width: 0; padding: 8px 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: 500 14px/1.5 var(--font-sans); }
.comment-identity #comment-email { flex-grow: 1.3; padding-left: 14px; border-left: 1px solid var(--ink-line); border-radius: 0; }
.comment-form textarea { display: block; width: 100%; min-height: calc(2em * 5 + 2px); margin: 10px 0 0; padding: 0 4px 2px; border: 0; border-radius: 0; resize: vertical; background: linear-gradient(transparent calc(2em - 1px), var(--ink-line) 0) 0 0 / 100% 2em local; color: inherit; font: 400 16px/2em var(--font-text); }
.comment-form :is(input, textarea):focus-visible { outline: none; }
.comment-form:focus-within { box-shadow: var(--shadow-2), 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
.comment-compose-status { display: flex; justify-content: space-between; gap: 12px; padding: 6px 4px 0; color: var(--ink-quiet); font: 500 11px/1.5 var(--font-sans); font-variant-numeric: tabular-nums; }
.comment-compose-status [data-character-count] { margin-left: auto; white-space: nowrap; }
.comment-verification:not(:empty) { margin-top: 12px; }
.comment-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.comment-form-footer p { margin: 0; color: var(--ink-quiet); font: italic 300 15px/1.4 var(--font-display); }
.comment-submit { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--ink-ink); font: 600 13px/1 var(--font-sans); box-shadow: var(--shadow-1); transition: transform .2s var(--ease), opacity .2s ease; }
.comment-submit svg { width: 16px; height: 16px; stroke-width: 1.8; }
.comment-submit:not(:disabled):hover { transform: translateY(-1px); }
.comment-submit:not(:disabled):active { transform: scale(.96); }
.comment-submit:disabled { opacity: .55; cursor: wait; }
.comment-avatar-picker { position: relative; flex: none; }
.comment-avatar-toggle, .comment-avatar-option { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.comment-avatar-toggle img, .comment-avatar-option img, .comment-avatar { display: block; border-radius: 50%; }
.comment-avatar-toggle { width: 40px; height: 40px; transition: transform .2s var(--ease); }
.comment-avatar-toggle img { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink-line); }
.comment-avatar-toggle:hover { transform: rotate(-8deg); }
/* Six card avatars dealt in a ring around the shuffle (card-avatar.js). */
.comment-avatar-options { position: absolute; z-index: 10; left: -14px; top: calc(100% + 8px); width: 180px; height: 180px; border-radius: 50%; background: var(--grain), var(--paper); box-shadow: var(--shadow-3), inset 0 0 0 1px var(--ink-line); animation: avatar-appear .2s ease-out; }
.comment-avatar-shuffle { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--ink-ink); box-shadow: var(--shadow-1); transition: transform .5s var(--ease); }
.comment-avatar-shuffle svg { width: 19px; height: 19px; stroke-width: 1.7; }
.comment-avatar-shuffle:hover { transform: rotate(180deg); }
.comment-avatar-shuffle:active { transform: rotate(180deg) scale(.92); }
.comment-avatar-option { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; transform: rotate(calc(var(--i) * 60deg - 90deg)) translateX(62px) rotate(calc(90deg - var(--i) * 60deg)); transition: scale .2s var(--ease); animation: avatar-deal .5s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.comment-avatar-option img { width: 40px; height: 40px; box-shadow: 0 2px 6px rgb(40 25 10 / 22%); }
.comment-avatar-option:hover { scale: 1.12; }
.comment-avatar-option[aria-pressed='true'] { outline: 2px solid var(--paper-accent); outline-offset: 2px; }
@keyframes avatar-appear { from { opacity: 0; scale: .9; } }
@keyframes avatar-deal { from { opacity: 0; transform: rotate(calc(var(--i) * 60deg - 160deg)) translateX(8px) rotate(calc(160deg - var(--i) * 60deg)) scale(.4); } }
.comment-honeypot, .comment-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Messages. */
.comment-feedback { margin: 14px 2px 0; color: var(--accent); font: 500 13px/1.6 var(--font-sans); }
.comments-status { margin: 30px 0 0; color: var(--soft); font: italic 300 18px/1.6 var(--font-display); text-align: center; }
.comments-policy { margin: 0 0 8px; text-align: left; }
.comment-feedback:empty, .comments-status:empty { display: none; }
.comments-updates { display: block; margin: 24px auto 0; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--text-color); color: var(--bg); font: 600 12px/1.5 var(--font-sans); box-shadow: var(--shadow-2); }
/* The pile. */
.comments-list { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
.comments-list:empty { display: none; }
.comment-note { --note-ink: var(--paper-ink); --note-accent: var(--paper-accent); position: relative; padding: 18px 22px 10px; border-radius: 16px; background: var(--grain), var(--paper); color: var(--note-ink); box-shadow: var(--shadow-2); overflow-wrap: anywhere; scroll-margin-top: 32px; transform: rotate(var(--tilt, -.35deg)); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.comments-list > .comment-note:nth-child(2n) { --tilt: .4deg; }
.comments-list > .comment-note:nth-child(3n) { --tilt: -.15deg; }
.comments-list > .comment-note:hover { --tilt: 0deg; box-shadow: var(--shadow-3); }
.comments-list > .comment-note[data-author] { --note-ink: var(--sage-ink); --note-accent: #ffd2bd; background: var(--grain), var(--sage); }
/* A pinned note is taped down. */
.comments-list > .comment-note[data-pinned]::before { content: ''; position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; translate: -50% 0; rotate: -2deg; background: rgb(236 200 170 / 72%); box-shadow: 0 1px 2px rgb(0 0 0 / 12%); }
.comment-note:target { outline: 2px solid var(--accent); outline-offset: 4px; }
.comment-note.is-new { animation: comment-deal .6s var(--ease) both; }
@keyframes comment-deal { from { opacity: 0; transform: translateY(-18px) rotate(-3deg); } }
.comment-note-heading { display: flex; align-items: center; gap: 12px; }
.comment-avatar { flex: none; width: 34px; height: 34px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--note-ink) 10%, transparent); }
.comment-meta { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; min-width: 0; font: 400 13px/1.5 var(--font-sans); }
.comment-meta strong { font-size: 14px; font-weight: 650; }
.comment-meta time { margin-left: auto; font-size: 11px; letter-spacing: .04em; opacity: .6; }
.comment-author { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font: 600 9.5px/1.7 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.comment-recipient { margin: 8px 0 0 46px; font: 500 12px/1.5 var(--font-sans); opacity: .65; }
.comment-text { margin: 10px 0 0 46px; white-space: pre-wrap; font: 400 15px/1.85 var(--font-text); }
.comment-actions { display: flex; align-items: center; gap: 2px; margin: 6px 0 0 38px; }
.comment-note :is(.comment-like, .comment-reply, .comments-more) { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 500 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; opacity: .68; transition: opacity .2s ease, background .2s ease; }
.comment-note :is(.comment-like, .comment-reply) svg { width: 15px; height: 15px; }
.comment-note :is(.comment-like, .comment-reply, .comments-more):not(:disabled):hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.comment-note .comment-like[aria-pressed='true'] { color: var(--note-accent); opacity: 1; }
.comment-note .comment-like:disabled { cursor: default; }
/* Replies are written on the same card, under a perforation. */
.comment-replies { margin: 10px 0 4px 46px; border-top: 1px dashed color-mix(in srgb, currentColor 26%, transparent); }
.comment-replies .comment-note { --note-ink: inherit; --note-accent: inherit; padding: 14px 0 0; border-radius: 0; background: none; color: inherit; box-shadow: none; transform: none; }
.comment-replies .comment-avatar { width: 26px; height: 26px; }
.comment-replies .comment-note-heading { gap: 10px; }
.comment-replies :is(.comment-text, .comment-recipient) { margin-left: 36px; }
.comment-replies .comment-actions { margin-left: 28px; }
.comment-note > .comments-more { margin: 0 0 4px 38px; }
.article-comments > .comments-more { display: flex; margin: 30px auto 0; padding: 10px 20px; border: 1.5px dashed var(--rule); border-radius: 999px; background: transparent; color: var(--muted); font: 600 12px/1.4 var(--font-sans); transition: border-color .2s ease, color .2s ease; }
.article-comments > .comments-more:hover { border-color: var(--accent); color: var(--text-color); }
@media (max-width: 600px) {
  .article-end { margin-top: 56px; }
  .card-back { grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding: 24px 22px 18px 24px; border-radius: 20px; }
  .card-back__no { font-size: 60px; }
  .card-back__fin { font-size: 26px; }
  .card-back__actions { grid-column: 1 / -1; justify-content: space-between; margin: 12px -8px -8px; padding: 6px 0 0; border-left: 0; border-top: 1px solid rgb(239 230 214 / 12%); }
  .card-back__like, .card-back .article-share-copy { flex-direction: row; gap: 10px; min-height: 46px; padding: 8px 12px; }
  .card-back__like::after { top: 11px; left: 12px; margin-left: 0; }
  .article-comments { margin-top: 72px; }
  .comments-heading h2 { font-size: 30px; }
  .comments-intro { font-size: 16px; }
  .comment-compose-toggle { min-height: 88px; padding: 16px 18px; font-size: 19px; }
  .comment-form { padding: 2px 16px 16px; }
  .comment-identity { flex-wrap: wrap; row-gap: 0; padding-bottom: 4px; }
  .comment-identity input { font-size: 16px; }
  .comment-identity #comment-email { flex-basis: 100%; padding-left: 4px; border-left: 0; border-radius: 0; }
  .comment-form-footer p { font-size: 14px; }
  .comment-note { padding: 16px 16px 8px; }
  .comment-text, .comment-recipient, .comment-replies, .comment-replies :is(.comment-text, .comment-recipient) { margin-left: 0; }
  .comment-actions, .comment-replies .comment-actions, .comment-note > .comments-more { margin-left: -8px; }
}

/* Lightweight, local search; the input remains at 16px on iOS. */
.journal-search { position: fixed; width: min(560px, calc(100% - 32px)); max-height: min(75dvh, 650px); margin: min(18vh, 130px) auto auto; padding: 22px; overflow-y: auto; border: 0; border-radius: 22px; background: var(--card); color: var(--text-color); box-shadow: var(--shadow-3); }
.journal-search::backdrop { background: rgb(30 20 10 / 30%); backdrop-filter: blur(6px); }
.journal-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.journal-search-heading h2 { margin: 0; font: 700 19px/1.4 var(--font-serif); letter-spacing: .02em; }
.journal-search input { display: block; width: 100%; margin-top: 14px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: inset 0 1px 2px rgb(60 40 20 / 10%); font-size: 16px; }
.journal-search input:focus-visible { outline-offset: 2px; }
.journal-search-status { margin: 15px 0 6px; color: var(--muted); font-size: 12px; }
.journal-search-results { margin: 0; padding: 0; list-style: none; }
.journal-search-results a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: 10px; }
.journal-search-results a:hover, .journal-search-results a:focus-visible { background: var(--surface); }
.journal-search-results strong { font: 600 16px/1.5 var(--font-serif); letter-spacing: .02em; }
.journal-search-results span { flex: none; color: var(--soft); font: 500 12px/1.5 var(--font-sans); letter-spacing: .08em; }

/* ---- Topics (tags): each topic a card of its own ------------------------- */
.journal-tag-intro { text-align: left; }
.journal-tag-intro .journal-back { display: flex; width: max-content; margin-bottom: 30px; }
.journal-tag-intro h1 { display: block; font: 900 clamp(52px, 9vw, 92px)/1 var(--font-serif); letter-spacing: .04em; }
.journal-tag-intro h1 .journal-tag-hash { margin-right: .06em; color: var(--accent); font: italic 300 .8em/1 var(--font-display); }
.journal-tag-intro > p:not(.journal-kicker) { margin: 16px 0 28px; color: var(--soft); font: 500 12px/1.6 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.journal-tag-hash { color: var(--accent); }
.journal-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.journal-topics a { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--muted); font: 600 14px/1.4 var(--font-serif); letter-spacing: .1em; transition: background .2s ease, color .2s ease; }
.journal-topics a:hover { color: var(--text-color); }
.journal-topics a[aria-current='page'] { background: var(--text-color); color: var(--bg); }
.journal-tag-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; margin-top: 12px; }
.journal-tag-index > a { --face: var(--paper); --face-ink: var(--paper-ink); position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 5 / 7; padding: 22px; overflow: hidden; border-radius: 18px; background: var(--grain), var(--face); color: var(--face-ink); box-shadow: var(--shadow-2); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.journal-tag-index > a:nth-child(4n+2) { --face: var(--ink); --face-ink: var(--ink-ink); }
.journal-tag-index > a:nth-child(4n+3) { --face: var(--terra); --face-ink: var(--terra-ink); }
.journal-tag-index > a:nth-child(4n+4) { --face: var(--sage); --face-ink: var(--sage-ink); }
.journal-tag-index > a:is(:hover, :focus-visible) { transform: translateY(-10px) rotate(-1.5deg); box-shadow: var(--shadow-3); }
.journal-tag-index > a > span:first-child { order: 2; font: 700 34px/1.2 var(--font-serif); letter-spacing: .06em; }
.journal-tag-index > a > span:first-child .journal-tag-hash { display: block; margin-bottom: 6px; color: inherit; font: italic 300 44px/1 var(--font-display); opacity: .6; }
.journal-tag-index > a > span:last-child { order: 1; font: 600 10px/1.4 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.journal-tag-index > a > span:last-child span { margin-left: 8px; }

@media (max-width: 700px) {
  /* The fan becomes a row of cards you swipe through. */
  .deck { margin: 30px -18px 10px; }
  .deck-cards { display: flex; gap: 16px; height: auto; padding: 18px 18px 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none; perspective: none; }
  .deck-cards::-webkit-scrollbar { display: none; }
  .deck-card { position: relative; left: auto; top: auto; flex: 0 0 min(68vw, 260px); width: auto; height: auto; aspect-ratio: 272 / 388; margin: 0; scroll-snap-align: start; transform: rotate(calc(var(--d) * .8deg)); }
  .deck-card:is(:hover, :focus-visible) { transform: none; }
  .deck-cards:has(.deck-card:hover) .deck-card:not(:hover) { filter: none; }
}
@media (max-width: 600px) {
  :root { scroll-padding-top: 24px; }
  .journal-header, .journal-main, .journal-footer { width: calc(100% - 36px); }
  .journal-header { padding-top: max(16px, env(safe-area-inset-top)); }
  .journal-intro { margin: 44px 0 6px; }
  .journal-kicker { margin-bottom: 20px; letter-spacing: .2em; }
  /* The English line wraps where the Chinese doesn't; keep room for two lines either way. */
  .journal-intro > p:not(.journal-kicker) { min-height: 3.7em; font-size: 14px; }
  .journal-entry-link { grid-template-columns: 40px 1fr; gap: 6px 12px; padding: 18px 0; }
  .journal-entry-link time { grid-column: 2; }
  .journal-entry h3 { font-size: 20px; }
  .journal-entry-no { font-size: 20px; }
  .journal-year-label { font-size: 26px; }
  .journal-history { margin-top: 52px; }
  .history-bars { gap: 3px; }
  .history-popover { max-width: 100%; }
  .journal-footer { flex-direction: column; align-items: flex-start; margin-top: 64px; }
  .journal-article { margin-top: 22px; }
  .article-header { margin-bottom: 40px; }
  .article-card { min-height: 300px; padding: 20px 20px 24px; border-radius: 20px; }
  .article-card.deck-card--photo { min-height: 430px; }
  .article-content { font-size: 16px; line-height: 1.95; }
  .article-content h2 { font-size: 22px; }
  .article-content h3 { font-size: 19px; }
  .journal-search { margin-top: max(24px, env(safe-area-inset-top)); max-height: 80dvh; padding: 18px; }
  .journal-tag-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .journal-tag-index > a > span:first-child { font-size: 26px; }
}
/* Snapshot fades keep type crisp while colours and translated layouts change. */
::view-transition, ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { pointer-events: none; }
html[data-journal-transition]::view-transition-group(root) { animation-duration: .28s; }
html[data-journal-transition]::view-transition-old(root) { animation: journal-switch-out .28s ease both; }
html[data-journal-transition]::view-transition-new(root) { animation: journal-switch-in .28s ease both; }
html[data-journal-transition='language']::view-transition-old(root) { animation-duration: .10s; }
html[data-journal-transition='language']::view-transition-new(root) { animation-duration: .18s; animation-delay: .05s; }
html[data-journal-transition-fallback='theme'], html[data-journal-transition-fallback='theme'] :is(body, a, button, input, textarea, svg, .journal-link-popover) { transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease; }
html[data-journal-transition-fallback='language'] :is([data-journal-i18n], time[data-local-time], [data-local-since]) { animation: journal-switch-in .18s ease both; }
@keyframes journal-switch-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes journal-switch-in { from { opacity: 0; } to { opacity: 1; } }
/* The deck is dealt once when the index opens. */
@media (prefers-reduced-motion: no-preference) {
  .deck-card { animation: deck-deal .9s var(--ease) backwards; animation-delay: calc(var(--a) * 70ms + 120ms); }
  @keyframes deck-deal { from { opacity: 0; transform: translate(0, 60px) rotate(0deg) scale(.96); } }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after, ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { transition: none !important; animation: none !important; }
}

/* Preserve native links, history and scroll restoration while documents crossfade.
   Theme/language snapshots keep their existing, separate transition rules. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html:not([data-journal-transition])::view-transition-group(root) { animation-duration: .32s; }
  html:not([data-journal-transition])::view-transition-old(root) { animation: journal-navigation-out .18s ease-out both; }
  html:not([data-journal-transition])::view-transition-new(root) { animation: journal-navigation-in .32s cubic-bezier(.2,.7,.2,1) both; }
  @supports not (view-transition-name: none) {
    .journal-main { animation: journal-navigation-in .32s cubic-bezier(.2,.7,.2,1) both; }
  }
}
@keyframes journal-navigation-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes journal-navigation-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The main site's Writing card opening into the journal (journal-card-transition.js):
   the card grows to fill the screen as a sheet of the journal's paper, the
   sheet fades, and the page settles in underneath. Leaving for the main site,
   the same sheet shows so it can shrink back into the card (main.css). */
.journal-sheet { display: none; }
html[data-card-transition] .journal-sheet { position: fixed; inset: 0; z-index: 100; display: block; background: var(--grain), var(--bg); view-transition-name: journal-card; pointer-events: none; }
html[data-card-transition='open']::view-transition-group(journal-card) { animation-duration: .62s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
html[data-card-transition='open']::view-transition-old(journal-card), html[data-card-transition='open']::view-transition-new(journal-card) { width: 100%; height: 100%; object-fit: cover; }
html[data-card-transition='open']::view-transition-old(journal-card) { animation: card-fade-out .34s ease both; }
html[data-card-transition='open']::view-transition-new(journal-card) { animation: card-sheet .95s ease both; }
html[data-card-transition='open']::view-transition-old(root) { animation: card-fade-out .25s ease both; }
html[data-card-transition='open']::view-transition-new(root) { animation: card-page-in .5s cubic-bezier(.2,.8,.2,1) .5s both; }
@keyframes card-fade-out { to { opacity: 0; } }
@keyframes card-sheet { 0% { opacity: 0; } 30% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes card-page-in { from { opacity: 0; transform: translateY(16px); } }
/* Opening an article: its card is drawn from the deck and laid over the whole
   screen (journal-card-transition.js), then the page shows through. */
.card-opening.deck-card { position: fixed; z-index: 1000; flex: none; margin: 0; aspect-ratio: auto; transform: none; transform-origin: 50% 50%; border-radius: 6.6% / 4.64%; box-shadow: 0 6px 6px rgb(30 20 10 / 10%), 0 68px 140px rgb(30 20 10 / 32%); pointer-events: none; animation: none; transition: none; will-change: transform, opacity; container-type: size; }
/* Laid out at twice its shown size (see journal-card-transition.js), so its
   face is sized to the card, not the page. Numbers are a deck card's, in cqw. */
.card-opening .deck-card__face { padding: 8.1cqw 8.1cqw 8.8cqw; }
.card-opening small { font-size: 3.68cqw; }
.card-opening .deck-card__body { gap: 2.2cqw; }
.card-opening .deck-card__no { font-size: 23.5cqw; }
.card-opening strong { font-size: 8.46cqw; }
html[data-opening='pending'] :is(.journal-header, .journal-main, .journal-footer) { opacity: 0; }
html[data-opening='reveal'] :is(.journal-header, .journal-main, .journal-footer) { animation: opening-reveal .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes opening-reveal { from { opacity: 0; transform: translateY(14px); } }
/* Arriving without a view transition (journal-card-transition.js): the page
   fades up and an article's card rises into place, as if dealt onto the table. */
html[data-arrive] .journal-main { animation: arrive-page .6s cubic-bezier(.2,.8,.2,1) both; }
html[data-arrive] .article-card { animation: arrive-card .8s cubic-bezier(.2,.8,.2,1) .05s both; }
@keyframes arrive-page { from { opacity: 0; transform: translateY(14px); } }
@keyframes arrive-card { from { opacity: 0; transform: translateY(40px) scale(.94) rotate(-1.6deg); } }

/* Small, non-modal writing links; no overlay interrupts the article list. */
.journal-link-group { position: relative; }
/* Labels reveal to the right while each leading icon stays in place. */
.journal-intro-links .journal-link-trigger { display: inline-flex; align-items: center; gap: 0; min-height: 38px; padding: 9px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: inherit; line-height: 20px; transition: color .2s ease, background .2s ease; }
.journal-link-trigger > svg { flex: 0 0 18px; width: 18px; height: 18px; }
.journal-link-label { display: grid; grid-template-columns: 0fr; margin-left: 0; opacity: 0; transform: translateX(-4px); transition: grid-template-columns .24s cubic-bezier(.2,.7,.2,1), margin-left .24s ease, opacity .16s ease, transform .24s ease; }
.journal-link-label > span { min-width: 0; overflow: hidden; white-space: nowrap; }
.journal-intro-links .journal-link-trigger:is(:focus-visible,[aria-expanded='true']), .journal-link-group:focus-within > .journal-link-trigger { color: var(--text-color); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.journal-link-trigger:is(:focus-visible,[aria-expanded='true']) .journal-link-label, .journal-link-group:focus-within > .journal-link-trigger .journal-link-label { grid-template-columns: 1fr; margin-left: 7px; opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .journal-intro-links .journal-link-trigger:hover { color: var(--text-color); background: color-mix(in srgb, var(--surface) 80%, transparent); }
  .journal-link-trigger:hover .journal-link-label, .journal-link-group:has(.journal-link-trigger[aria-expanded='true']):hover > .journal-link-trigger .journal-link-label { grid-template-columns: 1fr; margin-left: 7px; opacity: 1; transform: none; }
}
.journal-link-popover { position: absolute; z-index: 22; top: calc(100% + 10px); left: 0; width: 320px; max-width: calc(100vw - 48px); max-height: min(580px,calc(100dvh - 48px)); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border: 0; border-radius: 20px; background: var(--card); color: var(--text-color); box-shadow: var(--shadow-3); font-size: 13px; line-height: 1.65; animation: journal-popover-in .2s cubic-bezier(.2,.7,.2,1) both; }
.journal-link-popover[data-state='closing'] { pointer-events: none; animation: journal-popover-out .14s ease both; }
.journal-link-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.journal-link-popover h2 { margin: 0; font: 700 17px/1.4 var(--font-serif); }
.journal-popover-close { display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -5px -4px 0; padding: 5px; border: 0; border-radius: 50%; background: transparent; color: var(--soft); }
.journal-popover-close:hover { color: var(--text-color); background: var(--surface); }
.journal-popover-intro { margin: 12px 0; color: var(--muted); font-size: 12px; }
[data-newsletter-form] input[type=email] { display: block; width: 100%; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: inset 0 1px 2px rgb(60 40 20 / 10%); font-size: 16px; line-height: 1.5; }
[data-newsletter-form] input[type=email]::placeholder { color: var(--soft); font-size: 13px; }
.newsletter-topic { display: flex; align-items: center; gap: 10px; padding: 12px; margin-top: 12px; border-radius: 14px; background: var(--bg); }
.newsletter-topic-icon { display: flex; color: var(--accent); }
.newsletter-topic strong { display: block; font-size: 13px; font-weight: 600; }
.newsletter-topic small { display: block; color: var(--soft); font-size: 11px; }
.newsletter-topic-check { display: flex; margin-left: auto; color: var(--accent); }
.newsletter-topic-check svg { width: 18px; height: 18px; }
.newsletter-privacy { margin: 17px 0 10px; color: var(--soft); font-size: 10px; line-height: 1.8; }
.newsletter-feedback { margin: 10px 0; color: var(--muted); font-size: 11px; }
.newsletter-feedback:empty { display: none; }
.newsletter-verification { width: 100%; }
.newsletter-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-newsletter-form] > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.journal-intro-links .newsletter-rss { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -5px; border-radius: 50%; color: var(--soft); }
.newsletter-rss:hover { color: var(--text-color); background: var(--surface); }
.newsletter-submit { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; padding: 7px 15px; border: 0; border-radius: 999px; background: var(--text-color); color: var(--bg); font-size: 12px; font-weight: 600; transition: opacity .16s ease,transform .16s ease; }
.newsletter-submit:not(:disabled):hover { opacity: .88; }
.newsletter-submit:active { transform: scale(.97); }
.newsletter-submit:disabled { cursor: default; opacity: .45; }
.newsletter-submit svg { width: 16px; height: 16px; }
.journal-contact-popover { width: 268px; padding: 12px 8px 9px; }
.journal-contact-caption { margin: 0 8px 9px; color: var(--soft); font-size: 11px; }
.journal-intro-links .journal-contact-popover > a { display: flex; width: 100%; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 12px; transition: background .2s ease; }
.journal-contact-popover > a:hover, .journal-contact-popover > a:focus-visible { background: var(--surface); }
.journal-contact-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); color: var(--muted); }
.journal-contact-icon svg { width: 18px; height: 18px; }
.journal-contact-popover strong { display: block; color: var(--text-color); font-size: 13px; font-weight: 600; }
.journal-contact-popover small { display: block; color: var(--soft); font-size: 11px; line-height: 1.5; }
.journal-contact-arrow { margin-left: auto; color: var(--soft); opacity: 0; transform: translate(-3px,2px); transition: opacity .2s ease,transform .2s ease; }
.journal-contact-popover a:is(:hover,:focus-visible) .journal-contact-arrow { opacity: 1; transform: none; }
@keyframes journal-popover-in { from { opacity: 0; transform: translateY(5px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes journal-popover-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(3px) scale(.99); } }

.journal-title-text { font-weight: inherit; }