/* Lattiro 官网，方向 C「刊物」：版式、颜色、字号按 design/c-journal.py 移植；原稿里的内联 style 都改成了这里的类 */

/* 字体自托管，只含拉丁字符（范围与 scripts/prepare_assets.py 的 LATIN 一致）；泰文、日文、中文落到系统字体 */
@font-face {
  font-family: "Instrument Serif";
  src: url("/a/fonts/instrument-serif-regular.woff2?v=7cb2d327") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+0394;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/a/fonts/instrument-serif-italic.woff2?v=3c1a0256") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+0394;
}
@font-face {
  font-family: "Newsreader";
  src: url("/a/fonts/newsreader-variable.woff2?v=bdf10f2c") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+0394;
}
@font-face {
  font-family: "Newsreader";
  src: url("/a/fonts/newsreader-italic-variable.woff2?v=87f8d870") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+0394;
}
@font-face {
  font-family: "Inter";
  src: url("/a/fonts/inter-variable.woff2?v=dfa0cc7d") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+0394;
}

:root {
  --paper: #F6F1E7;
  --paper2: #EFE8DA;
  --ink: #1F1B16;
  --mute: #6B6358;
  --rule: #D8CFBE;
  --purple: #6A3FD6;
  --sig: #7B4FE0;
  --plate: #0B0B0D;
  --card: #FBF8F2;
  --body: #3B352D;
  --serif: Newsreader, Georgia, serif;
  --display: "Instrument Serif", Newsreader, Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* 泰文、日文、中文：拉丁字体后面接系统字体，优先宋体或明朝体；这些系统字体没有斜体，不让浏览器硬斜 */
html[lang="th"] { --local: "Sukhumvit Set", "Thonburi", "Leelawadee UI", "Noto Sans Thai", sans-serif; }
html[lang="ja"] { --local: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
html[lang="zh-Hans"] { --local: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif; }
html[lang="th"], html[lang="ja"], html[lang="zh-Hans"] {
  --serif: Newsreader, Georgia, var(--local);
  --display: "Instrument Serif", Newsreader, Georgia, var(--local);
  --sans: Inter, var(--local);
  font-synthesis: weight;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 19px/1.6 var(--serif); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
b, strong { font-weight: 600; }
h1, h2, blockquote { overflow-wrap: break-word; }
::selection { background: rgba(123, 79, 224, .2); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
[hidden] { display: none !important; }

.sans { font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wrap { --gutter: 56px; max-width: 1320px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 30; background: var(--ink); color: var(--paper); padding: 10px 16px; font: 500 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.skip:focus { top: 16px; }

/* 刊头：导航 | 落款 | 语言和"申请内测"，下面是双细线和期号行 */
.mast { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; min-height: 84px; }
.mast .primary ul { display: flex; flex-wrap: wrap; gap: 6px 26px; list-style: none; }
.mast a:hover, .mast summary:hover { color: var(--ink); }
.mast [aria-current="page"] { color: var(--ink); }
.mast .home { grid-column: 2; display: block; }
.mast .sig { display: block; width: 118px; color: var(--sig); }
.mast .right { grid-column: 3; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; align-items: center; }
.pill { border: 1px solid var(--ink); border-radius: 999px; padding: 9px 16px; color: var(--ink); white-space: nowrap; }
.mast .pill:hover { background: var(--ink); color: var(--paper); }
.double { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); height: 4px; }
.issue { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0 0; }

/* 语言菜单与手机导航：<details>，不需要脚本 */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.lang { position: relative; }
.lang summary { display: inline-flex; gap: 6px; align-items: center; }
.lang .caret { font-size: 9px; letter-spacing: 0; }
.lang ul { position: absolute; right: 0; top: calc(100% + 14px); z-index: 20; min-width: 220px; padding: 8px 0; list-style: none; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 24px 40px -28px rgba(31, 27, 22, .45); }
.lang li a, .menu .panel a { display: block; font: 400 16px/1.4 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.lang li a { padding: 7px 18px; }
.lang li a:hover { background: var(--paper2); }
.lang [aria-current="true"], .menu .langs-mini [aria-current="true"] { color: var(--purple); }
.menu { display: none; }
.menu summary .close, .menu[open] summary .open { display: none; }
.menu[open] summary .close { display: inline; }
/* 菜单铺满整个视口宽度，盖住两侧留白里的内容 */
.menu .panel { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 100%; z-index: 20; padding: 14px var(--gutter) 22px; background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); box-shadow: 0 30px 40px -30px rgba(31, 27, 22, .35); }
.menu .panel ul { list-style: none; }
.menu .panel nav a { padding: 7px 0; font: 400 28px/1.15 var(--display); }
.menu .langs-mini { display: none; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.menu .langs-mini a { color: var(--mute); }

/* 首屏：装裱好的影片版面和六章目录 */
.cover { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 44px; padding-top: 26px; }
.plate { background: var(--plate); padding: 10px; box-shadow: 0 1px 0 var(--rule), 0 30px 60px -40px rgba(31, 27, 22, .45); }
.plate video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--plate); }
/* 首屏循环片：iOS 低电量模式拦下播放时不显示系统的播放按钮，只留海报帧（影片页的有声影片保留控件） */
.plate video[loop]::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.plate video[loop]::-webkit-media-controls { display: none !important; }
.plate-cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 2px 0; }
.play { display: inline-flex; gap: 12px; align-items: center; }
.play:hover { color: var(--ink); }
.play i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); }
.play i::before { content: ""; margin-left: 2px; border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.toc { border-top: 1px solid var(--ink); }
.toc .toc-title { padding: 12px 0 18px; }
.toc ol { list-style: none; }
.toc li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.toc li b { font: italic 400 18px var(--display); color: var(--purple); }
.toc li span:last-child { padding-left: 8px; font: 500 11px var(--sans); letter-spacing: .08em; color: var(--mute); }
.toc .note { margin-top: 22px; font-size: 15px; font-style: italic; color: var(--mute); }

.title { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 44px; align-items: end; padding: 34px 0 0; }
.title h1 { font: 400 clamp(64px, 9vw, 150px)/.9 var(--display); letter-spacing: -.025em; }
.title h1 em { position: relative; font-style: italic; }
.title h1 em svg { position: absolute; left: -2%; bottom: -.02em; width: 104%; height: .16em; overflow: visible; }
.title h1 em path { fill: none; stroke: var(--sig); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: ink 2.4s .8s cubic-bezier(.6, .05, .2, 1) forwards; }
@keyframes ink { to { stroke-dashoffset: 0; } }
.title .lede { padding-bottom: 14px; font-size: 17px; color: var(--mute); }

/* 影片页：标题行，装裱的有声影片，旁边是章节目录（点一章跳到对应时间）；影片读不到时只留海报帧和说明 */
.film-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; padding-top: 30px; }
.film-head h1 { font: 400 clamp(48px, 6vw, 88px)/.95 var(--display); letter-spacing: -.02em; }
.film .toc li { display: block; padding: 0; }
.film .toc a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: baseline; padding: 11px 0; }
.film .toc a:hover span { color: var(--purple); }
.film .toc .tc { padding-left: 8px; font: 500 11px var(--sans); letter-spacing: .08em; color: var(--mute); }
.film-error { margin-top: 14px; font-style: italic; color: var(--mute); }

/* 引言：片中原句，引号按页面语言 */
.prologue { padding-top: 170px; padding-bottom: 150px; text-align: center; }
.prologue blockquote { max-width: 980px; margin: 0 auto; font: italic 400 clamp(38px, 4.6vw, 68px)/1.12 var(--display); }
.prologue blockquote::before, .ch blockquote::before { content: open-quote; }
.prologue blockquote::after, .ch blockquote::after { content: close-quote; }
.prologue .source { margin-top: 28px; }

/* 六章：剧照、罗马数字、时间码、片中原句、一句说明 */
.chead { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0 46px; border-top: 1px solid var(--ink); }
.chead h2 { font: 400 46px/1 var(--display); letter-spacing: -.01em; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
.ch img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.92); background: var(--paper2); }
.ch .meta { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0 10px; border-bottom: 1px solid var(--rule); }
.ch .meta b { font: italic 400 20px var(--display); color: var(--purple); letter-spacing: 0; text-transform: none; }
.ch blockquote { margin: 16px 0 10px; font: italic 400 24px/1.25 var(--display); }
.ch .note { font-size: 16px; color: var(--mute); }

/* 今天的软件：首字下沉、四项编号列表、浅色纸面的软件窗口 */
.today { padding-top: 170px; scroll-margin-top: 24px; }
.today .cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.today .label { padding-top: 16px; border-top: 1px solid var(--ink); }
.today h2 { margin-top: 22px; font: 400 clamp(48px, 6vw, 92px)/.95 var(--display); letter-spacing: -.02em; }
.today h2 em { color: var(--purple); }
.today .dropcap { margin-top: 26px; }
.today .links { margin-top: 28px; }
.dropcap::first-letter { float: left; padding: 6px 10px 0 0; font: 400 86px/.8 var(--display); color: var(--purple); }
.pillars, .areas { list-style: none; }
.pillars { margin-top: 34px; border-top: 1px solid var(--ink); }
.pillars li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--rule); }
.pillars li b, .areas li b { font: italic 400 20px var(--display); color: var(--purple); }
.pillars li span { font-size: 16.5px; color: var(--body); }

.paper { margin-top: 12px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 40px 70px -50px rgba(31, 27, 22, .5); }
.paper .bar { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.paper .plot { padding: 18px 22px 6px; }
.paper .legend { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.paper .legend .lap-a, .paper .accent { color: var(--purple); }
.paper .legend .unit { margin-left: auto; }
.paper svg { display: block; width: 100%; height: 260px; }
.paper .gridlines line { stroke: #E6DED0; }
.paper path.lap-b { fill: none; stroke: #A49A8B; stroke-width: 1.2; }
.paper path.lap-a { fill: none; stroke: var(--purple); stroke-width: 2; }
.paper svg text { fill: #9A9083; font: 9px var(--sans); text-anchor: middle; }
.paper .ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; padding: 18px 22px 22px; border-top: 1px solid var(--rule); font-size: 15.5px; }
.paper .q { margin-top: 8px; font-style: italic; }
.paper table { width: 100%; margin-top: 6px; border-collapse: collapse; font: 13px var(--sans); }
.paper td, .paper th { padding: 6px 0; border-bottom: 1px solid var(--rule); text-align: left; }
.paper th { font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.paper .d { font-weight: 600; color: var(--purple); }

/* 内测邀请信与厂商合作 */
.letters { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; padding-top: 170px; }
.letter { position: relative; padding: 64px 72px 56px; background: var(--card); border: 1px solid var(--rule); }
.letter::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule); pointer-events: none; }
.letter h2 { margin: 22px 0 26px; font: 400 64px/1 var(--display); }
.letter .body { max-width: 520px; }
.letter .sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 46px; }
.letter .links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.letter .sig { flex: none; width: 150px; color: var(--sig); }
.link { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font: 500 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.link.quiet { color: var(--mute); border-bottom-color: var(--rule); }
.link:hover { color: var(--purple); border-bottom-color: var(--purple); }
.partners { padding-top: 16px; border-top: 1px solid var(--ink); }
.partners h2 { margin: 22px 0 10px; font: 400 46px/1.02 var(--display); }
.partners .intro { color: var(--mute); }
.areas { margin: 20px 0 32px; }
.areas li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16.5px; }

.colophon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 150px; padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.colophon p { font: italic 400 28px/1.3 var(--display); }
.colophon p:last-child { text-align: right; }

/* 页脚：落款、三栏链接、已发布的语言、版权 */
.site-footer { padding-top: 90px; padding-bottom: 40px; }
.site-footer .top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-footer .sig { display: block; width: 200px; color: var(--sig); }
.site-footer .tagline { margin-top: 14px; font: italic 400 24px/1.3 var(--display); }
.site-footer .col ul { display: grid; gap: 8px; margin-top: 14px; list-style: none; font-size: 16px; }
.site-footer .col a:hover, .langs a:hover { color: var(--purple); }
.langs { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule); }
.langs ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; font-size: 15px; color: var(--mute); }
.langs [aria-current="true"] { font-weight: 500; color: var(--ink); }
.legal { display: flex; justify-content: space-between; margin-top: 24px; }

/* 内页（内测、厂商合作、下载）：标题区 + 两栏正文；邀请信和编号列表沿用首页的组件 */
.page-head { padding-top: 56px; }
.page-head .label { padding-top: 16px; border-top: 1px solid var(--ink); }
.page-head h1 { margin-top: 22px; font: 400 clamp(52px, 7vw, 104px)/.95 var(--display); letter-spacing: -.02em; }
.page-head .lede { max-width: 640px; margin-top: 26px; font-size: 21px; color: var(--mute); }
.page-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; padding-top: 90px; }
.page-text h2, .page .after h2, .panel h2 { font: 400 34px/1.1 var(--display); }
.page-text section + section, .page .after { margin-top: 56px; }
.page-text p, .page .after p { margin-top: 14px; font-size: 18px; color: var(--body); }
.page .areas { margin-bottom: 0; }
.page .letter h2 { margin: 0 0 18px; font: 400 40px/1.05 var(--display); }
.page .letter .body { max-width: 560px; }
.page .letter .sign { flex-wrap: wrap; margin-top: 40px; }
.asks { margin-top: 18px; list-style: none; border-top: 1px solid var(--rule); }
.asks li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--rule); font-size: 17px; }
.asks li::before { content: "—"; position: absolute; left: 0; color: var(--purple); }
.panel { padding-top: 16px; border-top: 1px solid var(--ink); }
.panel .mail { margin-top: 36px; }
.mail { display: grid; justify-items: start; gap: 14px; }
.address { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 16px; color: var(--mute); }
.copy { padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--mute); font: 500 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.copy:hover { color: var(--purple); border-bottom-color: var(--purple); }
.fine { font-style: italic; }
.page .after .fine { font-size: 15px; color: var(--mute); }

/* how it works：Inside the Line 四集依次排开，装裱的影片在左、文字在右；片尾句像章节卡的片中原句那样加引号 */
.episodes { margin-top: 64px; list-style: none; border-top: 1px solid var(--ink); }
.episode { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; padding: 48px 0 52px; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.episode .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.episode .meta b { font: italic 400 22px var(--display); color: var(--purple); letter-spacing: 0; text-transform: none; }
.episode h2 { margin-top: 18px; font: 400 clamp(34px, 3.4vw, 48px)/1.02 var(--display); letter-spacing: -.01em; }
.episode .summary { margin-top: 16px; font-size: 18px; color: var(--body); }
.episode blockquote { margin-top: 24px; font: italic 400 26px/1.25 var(--display); }
.episode blockquote::before { content: open-quote; }
.episode blockquote::after { content: close-quote; }
.tag { padding: 3px 10px; border: 1px solid var(--purple); border-radius: 999px; color: var(--purple); }
.tag:hover { background: var(--purple); color: var(--paper); }

/* 法律页：英文正文像刊物里的一篇说明；其他语言的页面在标签行注明只有英文 */
.legal-page { padding-top: 56px; }
.legal-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 16px; border-top: 1px solid var(--ink); }
.prose { max-width: 760px; overflow-wrap: break-word; }
.prose h1 { margin-top: 22px; font: 400 clamp(52px, 7vw, 104px)/.95 var(--display); letter-spacing: -.02em; }
.prose h2 { margin-top: 52px; font: 400 32px/1.1 var(--display); }
.prose h3 { margin-top: 32px; font-size: 19px; font-weight: 600; }
.prose p, .prose ul { margin-top: 16px; color: var(--body); }
.prose h1 + p { margin-top: 30px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--purple); }

/* 404 */
.notfound { padding-top: 120px; }
.notfound h1 { max-width: 14ch; margin-top: 18px; font: 400 clamp(48px, 7vw, 110px)/.95 var(--display); letter-spacing: -.02em; }
.notfound .lede { max-width: 520px; margin-top: 26px; color: var(--mute); }
.notfound .actions { margin-top: 34px; }
.notfound .homes { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 46px; padding-top: 16px; border-top: 1px solid var(--rule); list-style: none; font-size: 16px; }

/* 区块淡入：site.js 只把首屏以下的区块先藏起来（.pending），滚到时淡入；没有脚本时一切照常显示 */
.reveal { transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal.pending { opacity: 0; transform: translateY(18px); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .title h1 em path { animation: none; stroke-dashoffset: 0; }
  .reveal, .reveal.pending { opacity: 1; transform: none; transition: none; }
}

/* 中等宽度：导航收进菜单，避免长译文挤进落款。英文导航（含 How it works）要 1255px 才放得下一行，留一点余量；
   译文更长的语言上线时用 tests/layout.test.mjs 再量 */
@media (max-width: 1280px) {
  .mast .primary { display: none; }
  .menu { display: block; }
}

/* 手机：单列；藏起期号行两侧和目录 */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .wrap { --gutter: 18px; }
  .prologue, .today, .letters { padding-top: 110px; }
  .prologue { padding-bottom: 90px; }
  .mast { grid-template-columns: auto minmax(0, 1fr); }
  .mast .home { grid-column: 1; }
  .mast .right { grid-column: 2; }
  .mast .right .lang { display: none; }
  .menu .langs-mini { display: flex; }
  .cover, .title, .today .cols, .letters, .site-footer .top, .colophon, .grid, .paper .ask { grid-template-columns: minmax(0, 1fr); }
  .letter { padding: 40px 28px; }
  .page-head { padding-top: 36px; }
  .page-cols { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 56px; }
  .episodes { margin-top: 40px; }
  .episode { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 32px 0 36px; }
  .page .letter h2 { font-size: 34px; }
  .colophon p:last-child { text-align: left; }
  .issue { justify-content: center; }
  .issue span:first-child, .issue span:last-child, .plate-cap > span, .toc { display: none; }
  .film .toc { display: block; }
}

@media (max-width: 380px) {
  .mast .sig { width: 96px; }
  .mast .right { gap: 8px 14px; }
  .pill { padding: 8px 12px; letter-spacing: .1em; }
  .letter .sign { flex-wrap: wrap; }
}

/* 最窄的屏幕放不下按钮；内测页在菜单里也能进 */
@media (max-width: 359px) {
  .mast .pill { display: none; }
}