/* jiayujue.cn
   A paper sketchbook that turns into night. Typeset in FandolKai, the GB 楷体 Stille uses.
   Sections: 1 tokens · 2 base · 3 shell · 4 shared parts · 5 home · 6 pages · 7 motion */

/* English, digits and Western punctuation: a Source Serif 4 derivative (SIL OFL 1.1,
   renamed because the OFL reserves "Source"). Chinese, and Chinese-style dashes,
   ellipses and quotes, fall through to FandolKai. */
@font-face {
  font-family: "Jiayujue Serif";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/serif/jiayujue-serif.v1.woff2) format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+2013;
  size-adjust: 106%;
}

/* ---------- 1. Tokens ---------- */
:root {
  --paper: #edece7;
  --paper-2: #e3e1d9;
  --dusk: #e6ddcd;     /* late-afternoon paper: the MC section ends on it, night falls from it */
  --ink: #1d2127;
  --ink-2: #3a3e45;
  --ink-3: #6c6f76;
  --night: #121a2c;
  --night-2: #0b111e;
  --ivory: #efe8d9;
  --ivory-2: #cec8bb;
  --ivory-3: #9a9aa3;
  --pen: #2b4a7c;
  --gold: #dcc08b;
  --vermilion: #b23b2b;

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: rgba(29, 33, 39, .15);
  --rule-2: rgba(29, 33, 39, .42);
  --link: var(--pen);
  --focus: var(--vermilion);

  --font: "Jiayujue Serif", "FandolKai", "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", serif;
  /* Like Claude's reply text: serif Latin, Chinese falling through to the system sans. */
  --font-ui: "Jiayujue Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --wrap: 1160px;
  --gutter: clamp(16px, 4.5vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-tone="night"] {
  --bg: var(--night);
  --fg: var(--ivory);
  --fg-2: var(--ivory-2);
  --fg-3: var(--ivory-3);
  --rule: rgba(239, 232, 217, .14);
  --rule-2: rgba(239, 232, 217, .38);
  --link: var(--gold);
  --focus: var(--gold);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night-2); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.8;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .3em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; line-height: 1.2; }
::selection { background: rgba(178, 59, 43, .2); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 14px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip-link:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(48px, 6vw, 88px); background: var(--bg); color: var(--fg); }
.masthead-nav, .site-foot-nav, .site-foot-meta, .state-note, .ticket-label,
.ticket-stub, .ticket-copy, .ticket-feedback, .mc-kind, .mc-facts,
.toc-date, .toc-tags, .plate figcaption, .article-meta, .article-back,
.viewer-bar, .viewer-nav, .viewer-status, .section-eyebrow { font-family: var(--font-ui); }

.text-link { color: var(--link); text-decoration: underline; text-decoration-color: var(--rule-2); transition: text-decoration-color .2s; }
.text-link::after { content: " →"; }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- 3. Shell: masthead + footer ---------- */
.masthead {
  position: relative;
  z-index: 5;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 22px 18px;
  color: var(--fg);
}
.masthead--over { position: absolute; inset: 0 0 auto; }
.masthead-brand { font-size: 22px; letter-spacing: .01em; text-decoration: none; }
.masthead-nav { display: flex; gap: clamp(12px, 2.4vw, 30px); font-size: 15px; }
.masthead-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--fg-2); transition: color .2s; }
.masthead-nav a:hover { color: var(--fg); }
.masthead-nav a[aria-current="page"] { color: var(--fg); }
.masthead-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: -3px; right: -3px; bottom: 1px;
  height: 7px;
  background: var(--vermilion);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4.6C12 2.8 25 2.4 37 3.1c8 .5 15 1.3 22 .4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4.6C12 2.8 25 2.4 37 3.1c8 .5 15 1.3 22 .4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.site-foot { position: relative; padding-block: clamp(56px, 7vw, 88px) 40px; background: var(--night-2); color: var(--fg); overflow: hidden; }
.site-foot::before { /* a sparse, fixed-seed star field */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(239,232,217,.7), transparent 60%),
    radial-gradient(1px 1px at 27% 68%, rgba(239,232,217,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 14%, rgba(220,192,139,.8), transparent 60%),
    radial-gradient(1px 1px at 58% 44%, rgba(239,232,217,.5), transparent 60%),
    radial-gradient(1px 1px at 66% 80%, rgba(239,232,217,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 79% 28%, rgba(239,232,217,.65), transparent 60%),
    radial-gradient(1px 1px at 91% 62%, rgba(239,232,217,.45), transparent 60%),
    radial-gradient(1px 1px at 6% 86%, rgba(239,232,217,.4), transparent 60%);
  pointer-events: none;
}
.site-foot-grid { position: relative; display: grid; gap: 40px; }
.site-foot-sign { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: end; }
.site-foot-sign .sketch { grid-row: span 2; width: 96px; aspect-ratio: 316 / 407; }
.site-foot-line { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.55; }
.site-foot-note { margin-top: 10px; color: var(--fg-3); font-size: 14px; }
.site-foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.site-foot-nav a, .site-foot-meta a { color: var(--fg-2); text-decoration: none; }
.site-foot-nav a:hover, .site-foot-meta a:hover { color: var(--link); }
.site-foot-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--fg-3); font-size: 13px; }
.site-foot-copy { padding: 0; border: 0; background: none; color: inherit; cursor: default; font-size: 13px; }
.site-foot-top { margin-left: auto; }

/* The pencil profile from the site icon (same drawing, same facing, same
   proportions: keep aspect-ratio at 316 / 407), used as a mask so its lines take
   the text colour: ink on paper, ivory at night. */
.sketch {
  display: block;
  background: currentColor;
  -webkit-mask: url("/assets/img/sketch-profile.png") center / contain no-repeat;
          mask: url("/assets/img/sketch-profile.png") center / contain no-repeat;
}


/* ---------- 4. Shared parts ---------- */
/* Heading in the style of the OPUS artbook: a title over a hairline that rises
   out of a short diagonal ( /‾‾‾ ). */
.head { margin-bottom: clamp(28px, 4vw, 52px); }
.head-title { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: .02em; }
.head-rule { position: relative; display: block; height: 20px; margin-top: 14px; }
.head-rule::before { /* from the lower left up to where the line begins */
  content: "";
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px;
  background: linear-gradient(to bottom right, transparent calc(50% - .6px), var(--rule-2) calc(50% - .6px), var(--rule-2) calc(50% + .6px), transparent calc(50% + .6px));
}
.head-rule::after { content: ""; position: absolute; left: 19px; right: 0; top: 0; height: 1px; background: var(--rule-2); }
.head--split { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 24px; }
.head--split .head-rule { grid-column: 1 / -1; }
.head--split .head-more { grid-row: 1; grid-column: 2; font-size: 15px; white-space: nowrap; }

.plate { position: relative; }
.plate img { width: 100%; background: var(--paper-2); }
[data-tone="night"] .plate img { background: rgba(239, 232, 217, .06); }
.plate figcaption { margin-top: 12px; color: var(--fg-3); font-size: 14px; line-height: 1.7; }

.state-note { color: var(--fg-3); font-size: 15px; }
.load-error { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; color: var(--fg-2); }
.load-error button { padding: 4px 14px; border: 1px solid var(--rule-2); border-radius: 999px; background: none; cursor: pointer; }
.load-error button:hover { border-color: var(--fg); }

/* ---------- 5. Home ---------- */
/* 5.1 Hero: the flower sea, with the masthead and title written into its sky. */
.hero { position: relative; min-height: max(560px, min(100svh, 72vw)); display: grid; overflow: hidden; background: #e9ebec; color: var(--ink); }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 58%; }
.hero::after { /* keep the sky pale behind the words, whatever the crop */
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 46%;
  background: linear-gradient(rgba(236, 238, 239, .9), rgba(236, 238, 239, .5) 55%, rgba(236, 238, 239, 0));
  pointer-events: none;
}
.hero-copy {
  position: relative; z-index: 2;
  align-self: start;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin: clamp(104px, 15vh, 168px) auto 0;
}
.hero-kicker { font-size: 15px; letter-spacing: .12em; color: var(--ink-2); }
.hero-title { margin-top: 6px; font-size: clamp(64px, 11vw, 150px); line-height: .95; letter-spacing: -.01em; color: var(--ink); }
.hero-lede { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(19px, 2.2vw, 26px); line-height: 1.6; color: var(--ink-2); }
/* The quotes are inscribed in the sky like a poem on a painting (题画诗): each
   phrase is one short column, read right to left. In vertical-rl the block flow
   already runs right-to-left, so every <span> becomes its own column. */
.hero-verse {
  position: absolute; z-index: 2;
  top: clamp(100px, 14vh, 150px);
  right: var(--gutter);
  writing-mode: vertical-rl;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.9;
  letter-spacing: .1em;
  color: var(--ink-2);
  text-shadow: 0 0 12px rgba(236, 238, 239, .95);
}
.hero-verse p + p { margin-block-start: 1em; }
.hero-verse span { display: block; white-space: nowrap; }
.hero-verse p:first-child { color: var(--ink); font-size: 1.22em; }
.hero-caption {
  position: absolute; z-index: 2;
  right: var(--gutter); bottom: 18px;
  display: flex; gap: 12px;
  color: rgba(239, 232, 217, .82);
  font-size: 13px;
}
.hero-caption span + span::before { content: "│"; margin-right: 12px; opacity: .6; }

/* 5.2 艾妲 */
.welcome { padding-block: clamp(40px, 5vw, 64px); }
.welcome-grid { display: grid; gap: 20px 64px; padding-bottom: clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--rule); }
.welcome h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.5; }
.welcome p { color: var(--fg-2); font-size: 18px; line-height: 1.9; }
.welcome-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font: 14px/1.8 var(--font-ui); color: var(--link); }
.welcome-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--rule-2); }
.section-eyebrow { color: var(--fg-3); font-size: 12px; letter-spacing: .08em; margin-bottom: 14px; }
.writing { padding-top: 12px; }
.eda-grid { display: grid; grid-template-areas: "head" "plate" "body"; gap: 28px clamp(32px, 5vw, 72px); align-items: start; }
.eda-head { grid-area: head; margin-bottom: 0; }
.eda-plate { grid-area: plate; }
.eda-body { grid-area: body; }
.eda-plate img { aspect-ratio: 1200 / 1286; object-fit: cover; }
.eda-intro { max-width: 34em; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.9; color: var(--fg-2); }
.facts { margin-top: 32px; max-width: 30em; }
.facts div { display: flex; align-items: baseline; gap: 12px; padding-block: 8px; font-size: 16px; }
.facts dt { flex: none; color: var(--fg-3); }
.facts div::before { /* a dotted leader, like a book's contents page */
  content: "";
  order: 1;
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted var(--rule-2);
  transform: translateY(-.3em);
}
.facts dd { order: 2; text-align: right; }
.eda-quote { margin-top: 40px; padding-left: 20px; border-left: 2px solid var(--vermilion); }
.eda-quote p { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.5; }
.eda-quote footer { margin-top: 10px; color: var(--fg-3); font-size: 15px; }

/* 5.3 服务器 */
.mc { background: linear-gradient(var(--paper), #e9e3d7 45%, var(--dusk)); }
.mc-top { display: grid; gap: 8px 48px; }
.mc-kind { color: var(--fg-3); font-size: 15px; }
.mc-desc { margin-top: 12px; max-width: 30em; font-size: 19px; line-height: 1.8; color: var(--fg-2); }
.mc-more { margin-top: 16px; font-size: 15px; }

/* A paper ticket. Each half cuts quarter circles out of its own corners, so the
   two halves together show round notches at the perforation. */
.ticket {
  --r: 10px;
  --cut-main: radial-gradient(circle var(--r) at 0 100%, transparent 98%, #000) 0 0 / 51% 100% no-repeat,
              radial-gradient(circle var(--r) at 100% 100%, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
  --cut-stub: radial-gradient(circle var(--r) at 0 0, transparent 98%, #000) 0 0 / 51% 100% no-repeat,
              radial-gradient(circle var(--r) at 100% 0, transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
  display: grid;
  margin-block: clamp(36px, 5vw, 56px);
  color: var(--ink);
  filter: drop-shadow(0 12px 16px rgba(70, 48, 24, .16));
}
.ticket-main, .ticket-stub { background: #f7f3ea; }
.ticket-main { padding: 24px 24px 20px; border-radius: 6px 6px 0 0; -webkit-mask: var(--cut-main); mask: var(--cut-main); }
.ticket-label { color: var(--ink-3); font-size: 14px; }
.ticket-address { margin-top: 6px; font-family: var(--font-ui); font-size: clamp(23px, 3vw, 34px); line-height: 1.4; letter-spacing: -.025em; overflow-wrap: anywhere; user-select: all; }
.ticket-copy {
  margin-top: 16px;
  padding: 7px 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #f7f3ea;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ticket-copy:hover { background: transparent; color: var(--ink); }
.ticket-copy:disabled { opacity: .6; cursor: progress; }
.ticket-feedback { min-height: 1.6em; margin-top: 8px; color: var(--ink-3); font-size: 14px; overflow-wrap: anywhere; user-select: text; }
.ticket-stub { display: grid; gap: 10px; padding: 18px 24px 22px; border-top: 1px dashed rgba(29, 33, 39, .28); border-radius: 0 0 6px 6px; font-size: 15px; -webkit-mask: var(--cut-stub); mask: var(--cut-stub); }
.ticket-stub div { display: grid; grid-template-columns: 3em 1fr; gap: 8px; }
.ticket-stub dt { color: var(--ink-3); }
.ticket-stub small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.5; }

.essay { display: grid; gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px); }
.essay-shot a { display: block; overflow: hidden; background: var(--paper-2); }
.essay-shot img { aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s var(--ease); }
.essay-shot a:hover img { transform: scale(1.025); }
.essay-shot figcaption { max-width: 36em; }
.essay-shot figcaption strong { display: block; margin-bottom: 2px; color: var(--fg); font-size: 19px; font-weight: 400; }
.cap-no { display: block; color: var(--vermilion); font-size: 13px; letter-spacing: .08em; }

/* 5.4 文章: a contents page */
.toc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.writing .toc { border-top: 0; } /* the heading rule directly above already separates it */
.toc > li { border-bottom: 1px solid var(--rule); }
.toc-state { padding-block: 28px; color: var(--fg-3); }
.toc-entry { display: grid; grid-template-columns: 4.2em 1fr; gap: 6px 18px; padding-block: 26px; text-decoration: none; }
.toc-date { display: flex; flex-direction: column; color: var(--fg-3); font-size: 15px; line-height: 1.3; }
.toc-date b { color: var(--fg); font-size: 22px; font-weight: 400; }
.toc-body { min-width: 0; }
.toc-title { display: inline; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.45; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.toc-entry:hover .toc-title { background-size: 100% 1px; }
.toc-excerpt { display: block; margin-top: 8px; max-width: 40em; color: var(--fg-2); font-family: var(--font-ui); font-size: 15px; line-height: 1.85; }
.toc-tags { display: block; margin-top: 8px; color: var(--fg-3); font-size: 14px; }
.toc-tags span + span::before { content: " · "; }
.toc-cover { display: none; }

/* 5.5 画廊: night falls */
/* Dusk happens inside the top padding, so the heading always sits on night. It starts
   on exactly the colour the section above ends on (no seam) and passes through the
   warm and mauve of a real sunset, slowly at first and faster as the light goes. */
.nightfall {
  --fall: clamp(150px, 19vw, 260px);
  position: relative;
  padding-top: calc(var(--fall) + 16px);
  padding-bottom: clamp(56px, 7vw, 88px);
  background: linear-gradient(
    var(--dusk),
    #e2d5c6 calc(var(--fall) * .1),
    #d8c4b6 calc(var(--fall) * .24),
    #bea8a6 calc(var(--fall) * .38),
    #968a9a calc(var(--fall) * .52),
    #686a84 calc(var(--fall) * .66),
    #3d4764 calc(var(--fall) * .8),
    #1f2840 calc(var(--fall) * .91),
    var(--night) var(--fall),
    var(--night) 70%,
    var(--night-2));
}
.nightfall::before { /* first stars, appearing as the light goes */
  content: "";
  position: absolute; inset: calc(var(--fall) * .55) 0 auto; height: calc(var(--fall) * .8);
  background-image:
    radial-gradient(1px 1px at 18% 70%, rgba(239,232,217,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 37% 40%, rgba(220,192,139,.7), transparent 60%),
    radial-gradient(1px 1px at 63% 82%, rgba(239,232,217,.5), transparent 60%),
    radial-gradient(1px 1px at 84% 55%, rgba(239,232,217,.6), transparent 60%);
  pointer-events: none;
}
.leaves { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 42vw); gap: 16px; margin: 0; padding: 0 0 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.leaves > li { scroll-snap-align: start; }
.leaves-state { color: var(--fg-3); }
.leaf { display: block; text-decoration: none; }
.leaf img { width: 100%; aspect-ratio: 1663 / 2362; object-fit: cover; background: rgba(239, 232, 217, .06); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); transition: transform .5s var(--ease); }
.leaf:hover img { transform: translateY(-6px); }
.leaf span { display: block; margin-top: 10px; color: var(--fg-3); font-size: 13px; letter-spacing: .06em; }

/* ---------- 6. Pages ---------- */
.page-head { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: clamp(40px, 8vw, 96px) auto clamp(36px, 6vw, 64px); }
.page-title { font-size: clamp(46px, 8vw, 104px); line-height: 1; letter-spacing: .01em; }
.page-lede { max-width: 30em; margin-top: 20px; color: var(--fg-2); font-size: clamp(17px, 1.8vw, 20px); }
.page-head .head-rule { margin-top: 22px; }
.page-body { padding-bottom: clamp(72px, 10vw, 128px); }

/* 6.1 /mc */
.mc-page { background: linear-gradient(var(--paper) 30%, #e7dfd1); }
.mc-page .ticket { margin-top: 0; }
.mc-facts { display: grid; margin-bottom: clamp(40px, 6vw, 72px); border-top: 1px solid var(--rule-2); }
.mc-facts div { display: grid; grid-template-columns: 5em 1fr; gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.mc-facts dt { color: var(--fg-3); }

/* 6.2 /articles */
.toc--full .toc-entry { padding-block: 32px; }

/* 6.3 /article */
.article { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }
.article-back { display: inline-block; margin: clamp(32px, 6vw, 64px) 0 28px; color: var(--fg-3); font-size: 15px; text-decoration: none; }
.article-back:hover { color: var(--fg); }
.article-meta { color: var(--fg-3); font-size: 15px; }
.article-meta span + span::before { content: "│"; margin-inline: 10px; opacity: .6; }
.article-title { margin-top: 10px; font-size: clamp(34px, 5.4vw, 56px); line-height: 1.25; }
.article-lead { margin-top: 18px; color: var(--fg-2); font-size: 19px; line-height: 1.8; }
.article-cover { margin-block: 36px 8px; }
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-end { display: flex; align-items: center; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule-2); color: var(--fg-3); font-size: 15px; }
.article-pager { display: grid; gap: 12px; margin-top: 28px; }
.article-pager a { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.article-pager small { display: block; color: var(--fg-3); font-size: 13px; }
.article-pager a:hover span { text-decoration: underline; text-decoration-color: var(--rule-2); }

.prose { margin-top: 40px; color: var(--fg-2); font-family: var(--font-ui); font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3, .prose blockquote { font-family: var(--font); }
.prose > * + * { margin-top: 1.1em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--fg); line-height: 1.4; }
.prose h1 { margin-top: 2em; font-size: 34px; }
.prose h2 { margin-top: 2.2em; font-size: 28px; }
.prose h2::before { content: ""; display: block; width: 24px; height: 2px; margin-bottom: 18px; background: var(--vermilion); }
.prose h3 { margin-top: 1.8em; font-size: 22px; }
.prose h4, .prose h5, .prose h6 { margin-top: 1.6em; font-size: 19px; }
.prose a { color: var(--link); text-decoration-color: var(--rule-2); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: var(--fg); font-weight: 700; }
.prose em { font-style: normal; text-emphasis: dot; text-emphasis-position: under right; -webkit-text-emphasis: dot; -webkit-text-emphasis-position: under right; }
.prose del { color: var(--fg-3); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose li > ul, .prose li > ol { margin-top: .35em; }
.prose blockquote { padding: 4px 0 4px 20px; border-left: 2px solid var(--vermilion); color: var(--fg); font-size: 20px; }
.prose blockquote > * + * { margin-top: .8em; }
.prose hr { width: 60px; height: 0; margin: 2.4em auto; border: 0; border-top: 1px solid var(--rule-2); }
.prose img { margin-inline: auto; border-radius: 2px; }
.prose figure figcaption { margin-top: 8px; color: var(--fg-3); font-size: 14px; text-align: center; }
.prose code { padding: .1em .35em; border-radius: 3px; background: rgba(29, 33, 39, .07); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; }
.prose pre { overflow-x: auto; padding: 18px 20px; border-radius: 4px; background: #1b2130; color: #e6e1d6; font-size: 14px; line-height: 1.7; tab-size: 2; }
.prose pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.prose .table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { color: var(--fg); border-bottom-color: var(--rule-2); font-weight: 400; }

/* 6.4 /gallery */
.gallery-page .page-head { margin-bottom: 36px; }
.shelf + .shelf { margin-top: clamp(56px, 8vw, 96px); }
.shelf-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; font-size: 22px; }
.shelf-title small { color: var(--fg-3); font-size: 14px; }
/* Photos keep their own aspect ratio (SITE-GUIDE promises the bot that any ratio
   works and nothing is cropped); start-aligned rows keep the page order readable. */
.shelf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px 16px; margin: 0; padding: 0; list-style: none; }
.leaf-button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.leaf-button img { width: 100%; aspect-ratio: 1663 / 2362; object-fit: contain; padding: 8px; background: rgba(239, 232, 217, .04); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); transition: transform .35s var(--ease); }
.leaf-title { display: block; margin-top: 12px; font-size: 18px; font-weight: 400; line-height: 1.5; }
.leaf .leaf-note, .leaf-button .leaf-note { margin-top: 4px; font: 12px/1.7 var(--font-ui); letter-spacing: .03em; }
.leaf-button:hover img { transform: translateY(-6px); }
.leaf-button span { display: block; margin-top: 10px; color: var(--fg-3); font-size: 13px; letter-spacing: .06em; }

.viewer { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto 1fr auto auto; background: #080c16; color: var(--ivory); }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--gutter); font-size: 15px; }
.viewer-count { color: var(--ivory-3); }
.viewer-stage { position: relative; min-height: 0; }
.viewer-stage img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: calc(100% - 2 * var(--gutter)); max-height: 100%; box-shadow: 0 30px 80px -30px #000; }
.viewer-stage.is-zoomed { overflow: auto; overscroll-behavior: contain; }
.viewer-stage.is-zoomed img { position: relative; inset: auto; margin: 0 auto; max-width: none; max-height: none; width: max(100%, 900px); height: auto; cursor: zoom-out; }
.viewer-stage:not(.is-zoomed) img { cursor: zoom-in; }
.viewer-status { min-height: 20px; text-align: center; font-size: 12px; color: var(--ivory-3); }
.viewer-nav { display: flex; justify-content: center; gap: 12px; padding: 14px var(--gutter) 22px; }
.viewer button, .viewer-nav a { min-height: 44px; padding: 8px 16px; border: 1px solid rgba(239, 232, 217, .35); border-radius: 999px; background: none; color: var(--ivory); cursor: pointer; text-decoration: none; font-size: 14px; }
.viewer button:hover { border-color: var(--ivory); }
.viewer button:disabled { opacity: .35; cursor: default; }

/* 6.5 404 */
.lost { min-height: 62svh; display: grid; place-items: center; text-align: center; padding-block: 48px 96px; }
.lost .sketch { width: 150px; aspect-ratio: 316 / 407; margin: 0 auto 28px; }
.lost-code { color: var(--fg-3); font-size: 15px; letter-spacing: .3em; }
.lost-title { margin-top: 8px; font-size: clamp(32px, 5vw, 52px); }
.lost-text { margin-top: 12px; color: var(--fg-2); }
.lost .text-link { display: inline-block; margin-top: 28px; }

/* ---------- 7. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Content is visible by default: failed/disabled JS never leaves blank panels.
     One-shot transform/opacity only; no scroll handlers or sticky/parallax art. */
  @keyframes paper-arrive {
    from { opacity: .55; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes ink-appear { from { opacity: .45; } to { opacity: 1; } }
  @keyframes rule-draw { from { transform: scaleX(.12); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
  .hero-kicker { animation: paper-arrive .65s var(--ease) both; }
  .hero-title { animation: paper-arrive .85s var(--ease) .06s both; }
  .hero-lede { animation: paper-arrive .85s var(--ease) .15s both; }
  .hero-verse { animation: ink-appear 1.1s ease .2s both; }
  .motion-enter { animation: paper-arrive .65s var(--ease) var(--enter-delay, 0ms) both; }
  .eda-body.motion-enter, .head.motion-enter { animation-name: ink-appear; }
  .motion-enter .head-rule { transform-origin: left center; animation: rule-draw .85s var(--ease) var(--enter-delay, 0ms) both; }
  .viewer:not([hidden]) { animation: ink-appear .22s ease both; }
  .ticket-copy, .viewer button, .viewer-nav a { transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s; }
  .ticket-copy:active, .viewer button:active { transform: scale(.97); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ticket-copy:hover, .viewer-nav a:hover { transform: translateY(-2px); }
  .masthead-nav a:not([aria-current])::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 3px;
    height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .masthead-nav a:hover::after { transform: scaleX(1); }
  .toc-entry { transition: background .25s; }
  .toc-entry:hover { background: rgba(29, 33, 39, .025); }
}

/* ---------- Breakpoints (mobile first) ---------- */
@media (max-width: 599px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 16px; }
  .masthead-brand { font-size: 20px; }
  .masthead-nav { gap: 16px; font-size: 14px; }
  .desktop-break { display: none; }
  .viewer-nav { gap: 8px; padding-inline: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .viewer-nav button, .viewer-nav a { padding-inline: 12px; }
  .hero { min-height: 640px; }
  .hero-art { object-position: 70% 100%; }
  .hero-copy { margin-top: 112px; }
  .hero-verse { top: auto; bottom: 46px; right: var(--gutter); height: 11.5em; font-size: 15px; letter-spacing: .2em; color: var(--ivory); }
  .hero-verse p:first-child { color: var(--ivory); }
  .hero-verse p:nth-child(n + 2) { display: none; }
  .hero::before { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(rgba(18, 26, 44, 0), rgba(18, 26, 44, .55)); z-index: 1; }
  .hero-caption { left: var(--gutter); right: auto; bottom: 14px; }
  .site-foot-sign .sketch { width: 72px; }
  .site-foot-line { font-size: 18px; }
}

@media (max-width: 1099px) {
  .hero-verse p:nth-child(n + 2) { display: none; }
}

@media (min-width: 600px) {
  .leaves { grid-auto-columns: minmax(180px, 30vw); }
  .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ticket {
    grid-template-columns: 1fr minmax(220px, 34%);
    --cut-main: radial-gradient(circle var(--r) at 100% 0, transparent 98%, #000) 0 0 / 100% 51% no-repeat,
                radial-gradient(circle var(--r) at 100% 100%, transparent 98%, #000) 0 100% / 100% 51% no-repeat;
    --cut-stub: radial-gradient(circle var(--r) at 0 0, transparent 98%, #000) 0 0 / 100% 51% no-repeat,
                radial-gradient(circle var(--r) at 0 100%, transparent 98%, #000) 0 100% / 100% 51% no-repeat;
  }
  .ticket-main { border-radius: 6px 0 0 6px; }
  .ticket-stub { border-top: 0; border-left: 1px dashed rgba(29, 33, 39, .28); border-radius: 0 6px 6px 0; align-content: center; padding: 24px; }
  .toc-entry { grid-template-columns: 5em 1fr; gap: 6px 28px; }
}

@media (min-width: 900px) {
  .welcome-grid { grid-template-columns: 1fr 1.2fr; align-items: baseline; }
  .eda-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: "plate head" "plate body"; grid-template-rows: auto 1fr; row-gap: 36px; }
  .mc-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
  .mc-top .head { margin-bottom: 0; }
  .mc-about { padding-bottom: 4px; }
  .essay { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .essay-shot:nth-child(1) { grid-column: 1 / span 8; }
  .essay-shot:nth-child(2) { grid-column: 9 / span 4; align-self: end; }
  .essay-shot:nth-child(3) { grid-column: 1 / span 4; }
  .essay-shot:nth-child(4) { grid-column: 5 / span 8; margin-top: clamp(40px, 6vw, 88px); }
  .toc-entry { grid-template-columns: 6em minmax(0, 1fr) 220px; align-items: start; }
  .toc-cover { display: block; overflow: hidden; background: var(--paper-2); }
  .toc-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.85); transition: transform .6s var(--ease), filter .3s; }
  .toc-entry:hover .toc-cover img { transform: scale(1.03); filter: none; }
  .leaves { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .leaves > li:nth-child(2n) { margin-top: 36px; }
  .shelf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; }
  .site-foot-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
  .site-foot-nav { justify-content: flex-end; }
  .site-foot-meta { grid-column: 1 / -1; }
  .mc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .article-pager { grid-template-columns: 1fr 1fr; gap: 24px; }
  .article-pager a:last-child:not(:first-child) { text-align: right; }
}

@media (min-width: 1200px) {
  .shelf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}