/* ============================================================================
   press.css — 苏联报纸 → 海报 → 文章抽屉
   构成主义设计系统（令牌取自 constructivism-kit/kv.css，此处自包含以便离线打开）
   ========================================================================== */

/* ---------- 1. 令牌 ----------
   色板与动效规则取自 StyleKit「构成主义 Constructivism」设计系统
   （用户实测确认来源）。所有对比度为 WCAG 相对亮度公式精算值。 */
:root {
  /* —— StyleKit 三色体系 + 两枚点缀 —— */
  --paper:      #f2e8d5;   /* 泛黄纸 */
  --ink:        #1a1a1a;   /* 纯黑 */
  --red:        #cc0000;   /* 苏维埃红 —— on 纸 4.84:1 ✅ AA 正文 */
  --gold:       #d4a843;   /* 金星 —— on 纸 1.82:1 ❌ 仅装饰；on 黑 7.86:1 ✅ */
  --brown:      #8b4513;   /* 棕 —— on 纸 5.84:1 ✅；on 黑 2.45:1 ❌ */

  /* —— 由纸色派生的层次 —— */
  --paper-dim:  #e7dcc4;
  --paper-lift: #f8f2e6;
  --ink-soft:   #4a453c;

  /* ⚠️ 色板硬约束（精算得出，别凭感觉用）：
     · 苏维埃红 on 纯黑 = 2.96:1 → **禁止**在黑底上用红字
     · 金星 on 纸      = 1.82:1 → 金星只能做图形/黑底文字
     · 棕   on 纯黑    = 2.45:1 → 禁止
     需要"更暗的红"时用 --red-deep（on 纸 6.76:1）。 */
  --red-deep:   #a30000;

  --font-display: "Oswald", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt:     "Unbounded", "Oswald", "Noto Sans SC", sans-serif;
  --font-body:    "PT Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* —— Mechanical Easing：微交互只准 linear + 75/100ms，禁 ease-in-out —— */
  --ease-mech: linear;
  --dur-fast:  75ms;
  --dur-base:  100ms;
  --dur-slow:  100ms;

  /* —— 页面转场「红色幕布下坠」专用（用户明确选择的例外）——
     偏离 StyleKit 的 Mechanical Easing 规则：规则要求 linear + 75/100ms，
     但用户认为红色全屏下坠"很有力量"，故保留 280ms + 非 ease-in-out 的硬缓动。
     影响范围仅限 .wipe 一处，其余微交互不受影响。 */
  --dur-curtain:  280ms;
  --ease-curtain: cubic-bezier(.85, 0, .15, 1);

  --margin: clamp(1rem, 4vw, 3.5rem);
  --gutter: clamp(1rem, 2.5vw, 2rem);
  --rule: 6px;
  --drawer-peek: 78px;
  --drawer-h: min(86svh, 900px);   /* 文章展开后占屏更大 */

  /* —— 版画硬阴影（StyleKit: shadow-[4px_4px_0]）—— */
  --shadow-hard: 4px 4px 0 0 var(--ink);
  --shadow-hard-red: 4px 4px 0 0 var(--red);

  /* —— 对角倾斜（StyleKit: -rotate-6 / skew-x-3）—— */
  --tilt: -6deg;
  --skew: 3deg;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .55vw + .85rem, 1.0625rem);
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 160px 160px;
  background-blend-mode: multiply;
  text-wrap: pretty;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* 焦点必须可见 —— 本页任何地方都不得对可交互元素使用 clip-path。
   StyleKit 色板里没有蓝，焦点环改用墨黑/纸色双轨：
   浅底用黑（14.32:1），黑底用纸（14.32:1）—— 都不依赖颜色传达信息。 */
:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.drawer__bar:focus-visible,
.skip:focus-visible { outline-color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 1000; background: var(--ink); color: var(--paper);
  padding: .7rem 1.4rem; font-family: var(--font-mono); font-size: .8125rem;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }

kbd {
  font-family: var(--font-mono); font-size: .78em; letter-spacing: .08em;
  border: 1px solid currentColor; padding: .05em .38em; white-space: nowrap;
}

/* 无 JS 时的诚实提示（而不是留一个点了没反应的死链接） */
.noscript {
  margin: 0 0 1rem; padding: .9rem 1.1rem;
  border: var(--rule) solid var(--red); background: var(--paper-lift);
  font-size: .875rem;
}

/* ---------- 3. 视图切换 ---------- */
.view[hidden] { display: none; }

/* ---------- 4. 转场：红色幕布下坠 ----------
   用户明确选定：红色全屏幕布自上而下压下来 → 换视图 → 再从下方退场。
   力量感来自三点：满屏的红（不是黑）、下坠的重力方向、以及 280ms 足够慢的时长。
   ⚠️ 时长与缓动是有意偏离 StyleKit 的 Mechanical Easing 规则，仅限此处。 */
.wipe {
  position: fixed; inset: 0; z-index: 900;
  background: var(--red);
  display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);   /* 收拢在顶边 */
  pointer-events: none;
  transition: clip-path var(--dur-curtain) var(--ease-curtain);
}
.wipe.is-in {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);   /* 落满全屏 */
  pointer-events: all;
}
.wipe.is-out {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);  /* 收拢到底边 */
  pointer-events: none;
}
/* 幕布上的一道墨黑斜棱（StyleKit 的 -6deg 倾角），给红面一点结构 */
.wipe::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: 45%;
  height: 12px; background: var(--ink);
  transform: rotate(var(--tilt));
}
.wipe__mark {
  position: relative;
  font-family: var(--font-alt); font-weight: 900;   /* font-black */
  font-size: clamp(3rem, 13vw, 11rem); line-height: .82;
  letter-spacing: -.05em; text-transform: uppercase;
  color: var(--paper);                              /* on 红 4.84:1 ✅ */
  opacity: 0; transition: opacity var(--dur-base) var(--ease-mech);
}
.wipe.is-in .wipe__mark { opacity: 1; }

/* ============================================================================
   5. 报纸首页
   ========================================================================== */
.view--paper {
  min-height: 100svh;
  padding: clamp(1rem, 3vw, 2.5rem) var(--margin) clamp(2rem, 5vw, 4rem);
  max-width: 1560px; margin-inline: auto;
}

/* --- 报头 --- */
.masthead { border-bottom: var(--rule) solid var(--ink); padding-bottom: .6rem; }
.masthead__top {
  display: flex; justify-content: space-between; gap: var(--gutter);
  border-bottom: 1px solid var(--ink);
  padding-bottom: .45rem; margin-bottom: .3rem;
}
.masthead__organ, .masthead__price {
  margin: 0; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.masthead__name {
  margin: .1rem 0 .3rem;
  font-family: var(--font-alt); font-weight: 900;   /* StyleKit: font-black */
  font-size: clamp(3rem, 14vw, 11rem);
  line-height: .8; letter-spacing: -.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.masthead__rule { height: 14px; background: var(--ink); }

.dateline {
  display: flex; flex-wrap: wrap; gap: .35rem 1.4rem;
  list-style: none; margin: 0; padding: .6rem 0 0;
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.dateline li:last-child { margin-left: auto; color: var(--red); }

/* 文档库入口（插在最后一项之前，避开上面那条 :last-child 规则） */
.dateline__doc a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  transition: background-color var(--dur-base) var(--ease-mech),
              color var(--dur-base) var(--ease-mech);
}
.dateline__doc a:hover { background: var(--red); color: var(--paper); }
.dateline__doc a:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }

/* --- 导语 --- */
.lead {
  margin: clamp(1.25rem, 3vw, 2rem) 0;
  padding-left: clamp(0px, 2vw, 1.5rem);
  border-left: var(--rule) solid var(--red);
  max-width: 88ch;
}
.lead__kicker {
  margin: 0 0 .35rem; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
.lead__text { margin: 0; font-size: clamp(1.0625rem, .9vw + .85rem, 1.3rem); line-height: 1.5; }

/* --- 三栏 --- */
.columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--rule) solid var(--ink);
}
.block {
  display: flex; flex-direction: column; gap: .8rem;
  padding: clamp(1rem, 2vw, 1.6rem) var(--gutter);
  border-left: 1px solid rgba(18, 16, 14, .38);
}
.block:first-child { border-left: 0; padding-left: 0; }
.block:last-child { padding-right: 0; }

.block__link {
  display: block; position: relative; text-decoration: none; color: inherit;
  padding-top: 1.9rem;
  transition: transform var(--dur-base) var(--ease-mech),
              background-color var(--dur-base) var(--ease-mech),
              box-shadow var(--dur-base) var(--ease-mech),
              color var(--dur-base) var(--ease-mech);
}
/* StyleKit · Diagonal Aggression：hover 斜向位移 + 硬阴影同步拉开 */
.block__link:hover {
  background: var(--paper-lift);
  transform: translate(-4px, -4px) skewX(calc(-1 * var(--skew)));
  box-shadow: var(--shadow-hard-red);
}
.block__link:hover .block__num { background: var(--red); color: var(--paper); }
.block__link:hover .block__head { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
/* StyleKit · Soviet Reversal：active 红黑翻转 */
.block__link:active {
  background: var(--ink);
  color: var(--paper);
  transform: none;
  box-shadow: none;
}
.block__link:active .block__head,
.block__link:active .block__zh,
.block__link:active .block__kicker { color: var(--paper); }

.block__num {
  position: absolute; top: 0; left: 0;
  display: inline-block; padding: .1rem .55rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em;
  transition: background-color var(--dur-fast) var(--ease-mech);
}
.block__kicker {
  margin: 0 0 .3rem; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red);
}
.block__head {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: .98; letter-spacing: -.02em; text-transform: uppercase;
  text-wrap: balance; overflow-wrap: anywhere;
}
.block__zh {
  margin: .5rem 0 0; font-size: .9375rem; font-weight: 700;
  letter-spacing: .04em; color: var(--ink-soft);
}
.block__body { margin: 0; font-size: .9375rem; line-height: 1.65; }

.block__fig { margin: 0; }
.block__fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(1) contrast(1.35) brightness(1.04);
  border: 1px solid var(--ink);
  /* 半调网点：模拟廉价报纸的印刷网纹 */
  background-image: radial-gradient(var(--ink) 1px, transparent 1.1px);
  background-size: 4px 4px;
  background-blend-mode: multiply;
}
.block__fig figcaption {
  margin-top: .4rem; font-size: .75rem; line-height: 1.5; color: var(--ink-soft);
}
.fig__tag {
  display: inline-block; margin-right: .4rem; padding: .05rem .35rem;
  background: var(--red); color: var(--paper);
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
}

.block__stat {
  border-top: 1px solid rgba(18, 16, 14, .38);
  padding-top: .6rem; display: flex; flex-direction: column; gap: .15rem;
}
.stat__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: .95;
  letter-spacing: -.02em; color: var(--red);
}
.stat__d { font-size: .8125rem; color: var(--ink-soft); }

.block__cta {
  margin: auto 0 0; padding-top: .8rem;
  border-top: var(--rule) solid var(--ink);
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .18em; text-transform: uppercase;
}

.paper-foot {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: 1rem; border-top: var(--rule) solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .8125rem; color: var(--ink-soft);
}
.paper-foot p { margin: 0; max-width: 76ch; }
.paper-foot__nav { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; }

/* ============================================================================
   6. 海报通用
   ========================================================================== */
.view--poster { min-height: 100svh; position: relative; }

.poster {
  position: relative;
  min-height: 100svh;
  /* 底部留白改由 .poster__foot 承担，这样纸色页脚能一直铺到海报下缘，
     不会在页脚与抽屉之间漏出几何图形的一条碎边 */
  padding: clamp(1rem, 3vw, 2.5rem) var(--margin) 0;
  overflow: clip;
  display: flex; flex-direction: column;
}

/* StyleKit: 超粗 font-black uppercase。
   注意：Oswald 的最重字重只有 700（它没有 900），所以巨型标题改用
   Unbounded 900 —— 这是本项目里唯一真有 900 字重、且覆盖西里尔的展示体。
   代价是 Unbounded 比 Oswald 宽，字号要相应收小。 */
.poster__mega {
  font-family: var(--font-alt);
  font-weight: 900;
  text-transform: uppercase; letter-spacing: -.045em;
  line-height: .8; margin: 0; overflow-wrap: anywhere;
  position: relative; z-index: 2;
}
.poster__mega--rot {
  font-size: clamp(3rem, 18.5vw, 16rem);
  /* StyleKit 对角倾斜：-rotate-6 / skew-x-3 */
  transform: rotate(var(--tilt)) skewX(var(--skew));
  transform-origin: left center;
  align-self: flex-start;
  margin-top: auto; margin-bottom: .16em;
  color: var(--ink);
}
.poster__mega--fill {
  font-size: clamp(2.4rem, 13vw, 11.5rem);
  letter-spacing: -.055em; line-height: .8;
  margin-top: auto;
  /* line-height < 1 时字形会溢出行盒，必须留出下边距，
     否则副标题的横线会从字母底部切过去 */
  margin-bottom: .14em;
  /* ⚠️ 曾经写成「纸色 + multiply」——那在数学上等于把字抹掉：
     multiply(纸色, 红) ≈ 红，multiply(纸色, 纸色) = 纸色。
     巨型字必须用墨黑，压在红带上仍有 4.2:1（远超大字所需的 3:1）。 */
  color: var(--ink);
  position: relative; z-index: 3;
}
.poster__mega--vertical {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: clamp(2.2rem, 8.5vw, 7.5rem);
  letter-spacing: -.02em;
  position: absolute; right: clamp(1rem, 5vw, 4rem); top: clamp(2rem, 8vh, 6rem);
  margin: 0; color: var(--ink);
}

.poster__side {
  writing-mode: vertical-rl; text-orientation: mixed;
  position: absolute; left: clamp(.6rem, 2.4vw, 2rem); top: clamp(2rem, 9vh, 7rem);
  margin: 0; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .3em; color: var(--ink-soft);
  z-index: 1;              /* 在几何图形之上，避免被别层压住 */
  max-height: calc(100% - clamp(2rem, 9vh, 7rem) - var(--drawer-peek) - 5rem);
}

/* 页脚做成「通栏纸质条」。
   ⚠️ 这是一处真实的无障碍修复：海报的红色几何会一直铺到底部，
   如果页脚直接压在红底上，--red-ink 的小字就变成"红字压红底"，几乎不可读。
   给页脚一块纸色底，任何情况下对比度都是确定的（5.63:1 / 15.7:1）。 */
.poster__foot {
  position: relative; z-index: 4;
  background: var(--paper);
  border-top: var(--rule) solid var(--ink);
  /* 下内边距 = 抽屉露出高度 + 余量，把文字抬到抽屉之上，
     同时让纸色一直铺到海报下缘 */
  padding: .7rem var(--margin) calc(var(--drawer-peek) + .85rem);
  margin: 0 calc(-1 * var(--margin));
  display: grid; gap: .25rem;
}
.poster__no {
  margin: 0; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
.poster__zh { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(.95rem, 1.4vw, 1.25rem); letter-spacing: .02em; }
.poster__hint { margin: .3rem 0 0; font-size: .8125rem; color: var(--ink-soft); }

/* ---------- 海报 01 · КЛИН ---------- */
.poster--klin { justify-content: flex-end; }
.klin__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: .96;
}

/* ---------- 海报 02 · КНИГИ ---------- */
.poster--knigi { justify-content: flex-end; isolation: isolate; }
.knigi__band {
  position: absolute; left: 0; right: 0; top: 26%;
  height: 30vh; background: var(--red); z-index: 0;
  transform: rotate(-6deg) scaleX(1.2);
}
/* 双色调照片：把灰度图 multiply 到红色底上 ——
   白处显红、黑处显黑，正是"两色油墨"的成像逻辑。
   ⚠️ 之前的写法（img 用 luminosity + ::after 叠黑色 multiply）结果是纯黑方块：
   黑色 multiply 到任何颜色上都等于黑。 */
.knigi__photo {
  position: absolute; right: clamp(1rem, 6vw, 6rem); top: clamp(1.5rem, 6vh, 4rem);
  width: clamp(9rem, 24vw, 22rem); z-index: 1;
  border: 2px solid var(--ink);
  background: var(--red);
  isolation: isolate;
  overflow: hidden;
}
.knigi__photo img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  filter: grayscale(1) contrast(1.5) brightness(1.08);
  mix-blend-mode: multiply;
  display: block;
}
/* 印刷网屏：在双色调之上叠一层纸色网点，模拟半调 */
.knigi__photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(var(--paper) 1.1px, transparent 1.2px);
  background-size: 5px 5px; opacity: .3;
}
.knigi__sub {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(.85rem, 1.7vw, 1.5rem);
  letter-spacing: .12em; text-transform: uppercase;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding: .4rem 0; position: relative; z-index: 4;
}
.knigi__zh {
  margin: .35rem 0 0; font-size: .9375rem; font-weight: 700;
  color: var(--ink-soft); position: relative; z-index: 4;
}

/* ---------- 海报 03 · БАШНЯ ---------- */
.poster--bashnya { justify-content: flex-end; }
.bashnya__rays {
  position: absolute; inset: -25%;
  background: repeating-conic-gradient(from 0deg at 32% 78%,
    rgba(18, 16, 14, .13) 0deg 3deg, transparent 3deg 16deg);
  z-index: 0;
}
.bashnya__rays::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 32% 78%, var(--paper) 0 14%, transparent 15%);
}
.bashnya__art {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
}
.bashnya__spin { transform-origin: 620px 330px; animation: spin 44s linear infinite; }
.bashnya__spin--slow { transform-origin: 430px 560px; animation-duration: 96s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   7. 文章抽屉
   ========================================================================== */
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  transform: translateY(calc(100% - var(--drawer-peek)));
  transition: transform var(--dur-slow) var(--ease-mech);
  background: var(--paper-lift);
  /* 悬浮阴影：两层硬边叠出"钢板浮起"的层次（StyleKit 硬阴影语汇，模糊值一律为 0）。
     ⚠️ 只用红色做抬升带是不够的 —— 海报本身就是红的，红压红看不出来。
     所以红棱贴边 + 墨黑硬影在外，无论背后是纸、红还是黑都读得出来。 */
  box-shadow:
    0 -5px 0 0 var(--red),
    0 -17px 0 0 var(--ink);
}
body[data-drawer="open"] .drawer { transform: translateY(0); }
body[data-drawer="open"] { overflow: hidden; }   /* 读文章时锁住背景滚动 */

.drawer__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(.6rem, 2vw, 1.5rem);
  width: 100%; text-align: left;
  height: var(--drawer-peek);
  padding: 0 var(--margin);
  background: var(--ink); color: var(--paper);
  transition: background-color var(--dur-base) var(--ease-mech),
              color var(--dur-base) var(--ease-mech);
}
.drawer__bar:hover { background: var(--red); }
/* StyleKit · Soviet Reversal：按下时红黑翻转 */
.drawer__bar:active { background: var(--paper-lift); color: var(--ink); }
.drawer__kicker {
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .22em; text-transform: uppercase;
  padding: .15rem .5rem; border: 1px solid currentColor;
}
.drawer__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 2.1vw, 1.6rem); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer__meta {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  color: rgba(239, 233, 220, .78); white-space: nowrap;
}
.drawer__arrow {
  font-size: 1.4rem; line-height: 1;
  transition: transform var(--dur-slow) var(--ease-mech);
}
body[data-drawer="open"] .drawer__arrow { transform: rotate(180deg); }

.drawer__body {
  /* max-height 而非固定 height：内容短时抽屉跟着变矮，不留一大片死白。
     translateY(calc(100% - peek)) 用百分比，配合自适应高度也依然正确。 */
  max-height: var(--drawer-h);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-slow);
}
body[data-drawer="open"] .drawer__body {
  visibility: visible;
  transition-delay: 0s;
}
.drawer__inner {
  padding: clamp(1.5rem, 3.6vw, 3rem) var(--margin) clamp(3rem, 7vw, 5rem);
  /* 正文放大，让展开后的文章真正占据屏幕 —— 之前的问题是"字太小、面板太空"，
     只拉高面板会留下死白，所以两者的解是同一件事：把内容做大。 */
  font-size: clamp(1.0625rem, .5vw + .9rem, 1.25rem);
  line-height: 1.72;
}
.drawer__inner { min-height: min(58svh, 600px); }

.drawer__cols {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.drawer__cols > div > p { margin: 0 0 1.15rem; max-width: 70ch; }
.drawer__cols > div > p:last-child { margin-bottom: 0; }

.art__kicker {
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red);
}
.art__lead {
  font-size: clamp(1.1875rem, .8vw + 1rem, 1.45rem);
  line-height: 1.6;
}
.art__quote {
  margin: 1.5rem 0; padding-left: 1.1rem;
  border-left: var(--rule) solid var(--red);
  font-family: var(--font-alt); font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.35;
}
.art__quote cite {
  display: block; margin-top: .6rem;
  font-family: var(--font-mono); font-style: normal; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.art__facts { margin: 0 0 1rem; padding-left: 1.1rem; }
.art__facts li { margin-bottom: .35rem; }

.art__side {
  background: var(--paper-dim);
  border: var(--rule) solid var(--ink);
  padding: 1.1rem 1.2rem 1.4rem;
  /* 悬浮硬阴影（StyleKit: shadow-[4px_4px_0]） */
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur-base) var(--ease-mech),
              box-shadow var(--dur-base) var(--ease-mech);
}
/* StyleKit · Diagonal Aggression */
.art__side:hover {
  transform: translate(-4px, -4px) skewX(calc(-1 * var(--skew)));
  box-shadow: 8px 8px 0 0 var(--red);
}
.art__side-h {
  margin: 0 0 .7rem; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: .4rem;
}
.art__list { margin: 0 0 1.2rem; padding-left: 1.15rem; }
.art__list li { margin-bottom: .7rem; font-size: .9375rem; line-height: 1.6; }
.art__list li::marker { color: var(--red); font-family: var(--font-mono); }
.art__src {
  margin: 0; font-size: .75rem; line-height: 1.55; color: var(--ink-soft);
  border-top: 1px solid rgba(18, 16, 14, .3); padding-top: .7rem;
}
code {
  font-family: var(--font-mono); font-size: .88em;
  background: rgba(18, 16, 14, .07); padding: .05em .3em;
}

/* ============================================================================
   8. 响应式
   ========================================================================== */
@media (max-width: 1000px) {
  .drawer__cols { grid-template-columns: 1fr; }
  .knigi__photo { width: clamp(7rem, 30vw, 13rem); }
}

@media (max-width: 780px) {
  :root { --drawer-peek: 66px; --drawer-h: min(88svh, 720px); }

  .columns { grid-template-columns: 1fr; border-top: 0; }
  .block {
    border-left: 0;
    border-top: var(--rule) solid var(--ink);
    padding-left: 0; padding-right: 0;
    padding-block: clamp(1.1rem, 4vw, 1.6rem);
  }
  .block:first-child { border-top: 0; }

  /* Unbounded 比 Oswald 宽，窄屏字号要相应收小 */
  .masthead__name { font-size: clamp(2rem, 17vw, 6rem); }
  .dateline li:last-child { margin-left: 0; }

  .poster__mega--vertical {
    writing-mode: horizontal-tb;
    position: static; margin: auto 0 .1em; align-self: flex-start;
    font-size: clamp(2rem, 12vw, 5rem);
  }
  .poster__mega--rot { font-size: clamp(2rem, 14vw, 5rem); margin-bottom: .24em; }
  .poster__mega--fill { font-size: clamp(1.9rem, 15vw, 5.5rem); margin-bottom: .2em; }
  .poster__side { display: none; }
  .knigi__band { height: 22vh; top: 34%; }
  .drawer__meta { display: none; }
  .drawer__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  /* 窄屏取消斜移，避免溢出视口 */
  .block__link:hover, .art__side:hover { transform: none; }
}

@media (max-width: 480px) {
  .drawer__kicker { display: none; }
  .drawer__bar { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ============================================================================
   9. 无障碍降级
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .bashnya__spin { animation: none; }
  .wipe { transition: none; }
}

@media (prefers-contrast: more) {
  body { background-image: none; }
  .block__fig img { filter: grayscale(1) contrast(1.9); background-image: none; }
  .bashnya__rays { display: none; }
  .knigi__photo::before { display: none; }
  .drawer__meta { color: var(--paper); }
}

@media (forced-colors: active) {
  .bashnya__rays, .knigi__photo::before { display: none; }
  .wipe { background: Canvas; }
  .drawer__bar { border: 2px solid ButtonText; }
}

@media print {
  .wipe, .drawer, .poster__hint, .paper-foot__nav { display: none !important; }
  body { background: #fff; background-image: none; }
  .view[hidden] { display: block; }
}