/* 沿途 · 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 home 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; }
/* With an uneven count the desktop deck's outer card can reach past a narrower
   screen's edge. body clips it there, so the page never scrolls sideways, not
   even to a focused card. html is set too: otherwise body's value would pass to
   the viewport as a scrollable "hidden" instead of clipping body itself. */
html, body.journal-page { overflow-x: clip; }
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: 8px; 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; }
/* The journal's own name, set off by a hairline. */
.journal-brand-sub { margin-left: 2px; padding-left: 12px; border-left: 1px solid var(--rule); color: var(--soft); font: 600 11px/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
html[data-journal-language='zh'] .journal-brand-sub { font: 600 12px/1.2 var(--font-serif); letter-spacing: .3em; }
@media (max-width: 400px) { .journal-brand-sub { display: none; } }
/* Quiet tools: language as two words with a slash, then search and appearance,
   a hairline between. Nothing is boxed until the pointer arrives. */
.journal-tools { display: flex; align-items: center; gap: 2px; margin-right: -8px; }
.journal-tools .journal-language { gap: 0; padding: 0; background: none; }
.journal-tools .journal-language::before { content: none; }
.journal-tools .journal-language button { display: inline-flex; align-items: center; min-width: 0; height: 32px; padding: 0 6px; border-radius: 999px; color: var(--soft); opacity: .7; font: 600 12px/1 var(--font-sans); letter-spacing: .04em; transition: color .2s ease, opacity .2s ease; }
.journal-tools .journal-language button + button::before { content: '/'; position: relative; left: -6px; margin-right: -2px; color: var(--rule); font-weight: 400; }
.journal-tools .journal-language button[aria-pressed='true'] { color: var(--text-color); opacity: 1; }
.journal-tools .journal-language button:hover { opacity: 1; }
.journal-tools .journal-language + .journal-icon-button { position: relative; margin-left: 12px; }
.journal-tools .journal-language + .journal-icon-button::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: -7px; width: 1px; background: color-mix(in srgb, var(--rule) 80%, transparent); }
.journal-tools .journal-icon-button { width: 32px; height: 32px; padding: 8px; }
.journal-language { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 2px; padding: 2px; 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 8px; 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: 8px; 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: 40px 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 16px; }
/* 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: 16px; 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 16px; 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: 8px; 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: 20px; 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 24px; }
.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: 24px 24px 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: 16px; 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: 32px 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: 16px; 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: 16px; }
.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: 12px; }
  /* 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 14px/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: 4px 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: 8px; }
.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: 64px; }
.journal-history .journal-statistics { margin: 0 0 16px; }
.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 8px; }
.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: 4px; 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: 8px 16px; 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 4px; 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: 2px 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 -------------------------------------------------------------- */
/* Two tiers: a sign-off with the ways to write back, then a colophon under a
   rule that fades at both ends, with the edge route on the right. */
.journal-footer { margin-top: 112px; padding-bottom: max(40px, env(safe-area-inset-bottom)); color: var(--soft); font: 500 12px/1.6 var(--font-sans); }
.journal-footer p { margin: 0; }
.journal-signoff { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding-bottom: 24px; }
.journal-signoff__line { color: var(--text-color); font: italic 400 26px/1.2 var(--font-display); letter-spacing: -.005em; }
html[data-journal-language='zh'] .journal-signoff__line { font: 600 22px/1.3 var(--font-serif); letter-spacing: .08em; }
.journal-signoff__note { margin-top: 8px !important; color: var(--soft); font: 400 13px/1.6 var(--font-sans); }
.journal-signoff nav { display: flex; flex-wrap: wrap; gap: 6px; }
.journal-signoff nav a { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 75%, transparent); color: var(--muted); transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.journal-signoff nav a:hover { background: color-mix(in srgb, var(--text-color) 6%, transparent); box-shadow: inset 0 0 0 1px var(--rule); color: var(--text-color); }
.journal-colophon { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 20px; }
.journal-colophon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 12%, var(--rule) 88%, transparent); }
.journal-colophon p { display: flex; align-items: center; gap: 0; }
.journal-colophon p a { display: inline-flex; align-items: center; color: var(--soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .25s ease; }
.journal-colophon p a::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: currentColor; opacity: .55; }
.journal-colophon p a:hover { color: var(--text-color); text-decoration-color: color-mix(in srgb, var(--text-color) 40%, transparent); }

/* ---- The article: its card, then the page -------------------------------- */
.journal-article { --journal-width: 720px; max-width: 720px; margin: 32px 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: 24px; }
.article-card { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 340px; padding: 24px 32px 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 12px; 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 8px; margin: 16px 0 0; font: 500 12px/1.7 var(--font-sans); letter-spacing: .12em; opacity: .85; }
.post-meta > * + *::before { content: '·'; padding-right: 8px; }
/* 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: 16px; 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: 32px 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 40px; }
.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 24px; 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: 16px; 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 4px; 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: 8px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.code-copy-button { position: absolute; top: 6px; right: 8px; padding: 2px 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: 4px 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: 64px; perspective: 1800px; }
.card-back { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 24px 32px 24px 32px; border-radius: 24px; 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: 16px; 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: 8px !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 8px; 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: 8px; }
.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 -16px -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: 8px 8px 8px; border: 0; border-radius: 16px; 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'; }
html[data-journal-language='zh'] .card-back .article-share-copy::after { content: '复制'; }
html[data-journal-language='zh'] .card-back .article-share-copy[data-state='copied']::after { content: '已复制'; }
html[data-journal-language='zh'] .card-back .article-share-copy[data-state='error']::after { content: '复制失败'; }
.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: 24px; 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 home page'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: 20px; 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: 16px 0 6px; padding: 4px 24px 16px; border-radius: 20px; 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: 16px 0 0; padding: 6px 6px 6px 16px; border-radius: 12px; 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 8px; 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: 8px; 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: 16px; border-left: 1px solid var(--ink-line); border-radius: 0; }
.comment-form textarea { display: block; width: 100%; min-height: calc(2em * 5 + 2px); margin: 8px 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: 16px; }
.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 16px; 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: -24px 0 0 -24px; 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: -24px 0 0 -24px; 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: 16px 2px 0; color: var(--accent); font: 500 13px/1.6 var(--font-sans); }
.comments-status { margin: 32px 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: 8px 16px; 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: 24px; margin-top: 32px; }
.comments-list:empty { display: none; }
.comment-note { --note-ink: var(--paper-ink); --note-accent: var(--paper-accent); position: relative; padding: 16px 24px 8px; 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 8px; 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 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font: 600 10px/1.7 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.comment-recipient { margin: 8px 0 0 48px; font: 500 12px/1.5 var(--font-sans); opacity: .65; }
.comment-text { margin: 8px 0 0 48px; 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 40px; }
.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: 8px 0 4px 48px; border-top: 1px dashed color-mix(in srgb, currentColor 26%, transparent); }
.comment-replies .comment-note { --note-ink: inherit; --note-accent: inherit; padding: 16px 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: 8px; }
.comment-replies :is(.comment-text, .comment-recipient) { margin-left: 32px; }
.comment-replies .comment-actions { margin-left: 24px; }
.comment-note > .comments-more { margin: 0 0 4px 40px; }
.article-comments > .comments-more { display: flex; margin: 32px auto 0; padding: 8px 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 16px; padding: 24px 24px 16px 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: 8px; min-height: 46px; padding: 8px 12px; }
  .card-back__like::after { top: 11px; left: 12px; margin-left: 0; }
  .article-comments { margin-top: 64px; }
  .comments-heading h2 { font-size: 30px; }
  .comments-intro { font-size: 16px; }
  .comment-compose-toggle { min-height: 88px; padding: 16px 16px; 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: 24px; overflow-y: auto; border: 0; border-radius: 24px; 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); }
/* The search sheet rises in and sinks away; display and overlay transition
   discretely so the closing motion plays before the dialog leaves. */
.journal-search { opacity: 0; translate: 0 14px; scale: .965; transition: opacity .2s cubic-bezier(.4, 0, 1, 1), translate .24s cubic-bezier(.4, 0, 1, 1), scale .24s cubic-bezier(.4, 0, 1, 1), overlay .24s allow-discrete, display .24s allow-discrete; }
.journal-search[open] { opacity: 1; translate: 0 0; scale: 1; transition: opacity .3s ease, translate .45s var(--ease), scale .45s var(--ease), overlay .24s allow-discrete, display .24s allow-discrete; }
@starting-style { .journal-search[open] { opacity: 0; translate: 0 14px; scale: .965; } }
.journal-search::backdrop { opacity: 0; transition: opacity .24s ease, overlay .24s allow-discrete, display .24s allow-discrete; }
.journal-search[open]::backdrop { opacity: 1; }
@starting-style { .journal-search[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .journal-search, .journal-search[open], .journal-search::backdrop { transition: none; } }
.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: 16px; 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: 16px 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: 12px 12px; border-radius: 12px; }
.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: 32px; }
.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 24px; 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 16px; 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: 24px; 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: 24px; overflow: hidden; border-radius: 20px; 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: 32px -16px 8px; }
  .deck-cards { display: flex; gap: 16px; height: auto; padding: 16px 16px 32px; 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: 40px 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: 16px 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: 48px; }
  .history-bars { gap: 2px; }
  .history-popover { max-width: 100%; }
  .journal-footer { margin-top: 64px; }
  .journal-signoff { flex-direction: column; align-items: flex-start; }
  .journal-colophon { flex-direction: column-reverse; align-items: flex-start; }
  .journal-article { margin-top: 24px; }
  .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; background-image: var(--img-small, var(--img)); }
  .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: 16px; }
  .journal-tag-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .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; }
/* The header card's copy flies into its place (journal-card-transition.js); the real one waits under it. */
.card-opening-frame { position: fixed; inset: 0; z-index: 1000; margin: 0; pointer-events: none; }
.card-opening-copy { position: fixed; z-index: 1000; box-sizing: border-box; min-height: 0; margin: 0; transform-origin: 50% 50%; transition: none; animation: none; will-change: transform, opacity; pointer-events: none; }
html[data-opening] .journal-main .article-card { visibility: hidden; }
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: 8px; 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: 8px; 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: 8px; 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: 16px; 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 -4px -4px 0; padding: 4px; 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: 12px 16px; 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: 8px; padding: 12px; margin-top: 12px; border-radius: 16px; 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: 16px 0 8px; color: var(--soft); font-size: 10px; line-height: 1.8; }
.newsletter-feedback { margin: 8px 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: -4px; 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: 8px 16px; 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 8px; }
.journal-contact-caption { margin: 0 8px 8px; color: var(--soft); font-size: 11px; }
.journal-intro-links .journal-contact-popover > a { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px 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); } }

/* Edge route (assets/js/edge-route.js): the Cloudflare edge that served the
   page and the round trip to it, opening into a small paper card. */
.edge-route { --edge-ok: #4a7a43; --edge-fair: #a8701f; position: relative; display: inline-flex; align-items: center; opacity: 0; transition: opacity .7s var(--ease); }
html[data-scheme='dark'] .edge-route { --edge-ok: #93c487; --edge-fair: #e0aa5f; }
@media (prefers-color-scheme: dark) { html:not([data-scheme='light']) .edge-route { --edge-ok: #93c487; --edge-fair: #e0aa5f; } }
.edge-route[hidden] { display: none !important; }
.edge-route.is-ready { opacity: 1; }
.edge-route[data-speed='fair'] { --edge-ok: var(--edge-fair); }
.edge-route[data-speed='slow'] { --edge-ok: var(--accent); }
.edge-route__toggle { display: inline-flex; align-items: center; gap: 8px; margin: -4px -8px; padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 500 12px/1.6 var(--font-sans); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.edge-route__toggle:hover, .edge-route.is-open .edge-route__toggle { background: color-mix(in srgb, var(--text-color) 6%, transparent); color: var(--text-color); }
.edge-route__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.edge-route__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; position: relative; background: var(--edge-ok); }
/* The halo is its own layer that only scales and fades, so the compositor runs it without repainting the page. */
.edge-route__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--edge-ok); opacity: 0; animation: edge-breathe 3s ease-out infinite; }
.edge-route__rtt { font: italic 400 13px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.edge-route__rtt::before { content: '·'; margin-right: 8px; font-style: normal; }
@keyframes edge-breathe {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(3); opacity: 0; }
}
.edge-route__card { position: absolute; z-index: 30; bottom: calc(100% + 14px); left: 50%; box-sizing: border-box; width: 264px; padding: 16px 16px 16px; border-radius: 20px; background: var(--grain), var(--card); color: var(--muted); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rule) 55%, transparent), var(--shadow-3); font: 400 12px/1.55 var(--font-sans); text-align: left; transform: translateX(calc(-50% + var(--edge-shift, 0px))); animation: edge-card-in .24s var(--ease); }
.edge-route__card::after { content: ''; position: absolute; top: 100%; left: calc(50% - var(--edge-shift, 0px)); width: 10px; height: 10px; margin: -4px 0 0 -4px; background: var(--card); box-shadow: 1px 1px 0 color-mix(in srgb, var(--rule) 55%, transparent); transform: rotate(45deg); }
@keyframes edge-card-in { from { opacity: 0; transform: translate(calc(-50% + var(--edge-shift, 0px)), 6px) scale(.97); } }
.edge-route__heading { margin: 0 0 12px; color: var(--soft); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.edge-route__line { display: block; width: 232px; height: 16px; overflow: visible; }
.edge-route__wire { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.edge-route__end { fill: var(--card); stroke: var(--soft); stroke-width: 1.4; }
.edge-route__end--edge { fill: var(--edge-ok); stroke: var(--edge-ok); }
.edge-route__light circle { fill: var(--edge-ok); filter: drop-shadow(0 0 3px var(--edge-ok)); }
.edge-route__light { animation: edge-trip var(--edge-trip, 1.6s) cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes edge-trip { to { transform: translateX(220px); } }
.edge-route__ends { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 12px; color: var(--soft); font-size: 11px; }
.edge-route__colo { color: var(--text-color); font: italic 500 13px/1.2 var(--font-display); letter-spacing: .04em; }
.edge-route__facts { display: grid; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.edge-route__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.edge-route__facts dt { color: var(--soft); }
.edge-route__facts dd { margin: 0; color: var(--text-color); text-align: right; font-variant-numeric: tabular-nums; }
.edge-route__facts dd[data-speed] { color: var(--edge-ok); font: italic 500 15px/1 var(--font-display); }
.edge-route__note { margin: 12px 0 0; color: var(--soft); font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
  .edge-route__dot::after, .edge-route__card { animation: none; }
  .edge-route__light { display: none; }
}

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