/* ============================================================
   READING ROOM — Book Reading Wiki（阅览室 · 暖调书房）
   Warm paper + grain, wood shelves, literary serif.
   标题：Noto Serif SC（思源宋体）。正文：LXGW WenKai（霞鹜文楷，屏幕优化）。
   ============================================================ */
@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.7.0/style.css");

:root {
  /* Warm book-paper stack */
  --paper:       #EFE7D6;
  --paper-2:     #E7DCC6;   /* recessed panel */
  --card:        #FAF3E2;   /* warm card surface */
  --ink:         #221E15;
  --ink-soft:    #463F30;
  --muted:       #786D58;
  --faint:       #A99C82;
  --rule:        #D6CBB2;
  --rule-soft:   #E2D8C2;
  --rule-strong: #C5B795;
  --stamp:       #9C3A2C;   /* library-stamp oxblood — used sparingly */

  /* Wood — shelf boards */
  --wood:        #976F45;
  --wood-light:  #B68C5C;
  --wood-dark:   #6F5030;
  --wood-edge:   #4E3820;

  /* Cover-tile tones — desaturated, warm, like faded clothbound spines */
  --tone-bone:     #E6DECC;
  --tone-ash:      #D8D2C2;
  --tone-clay:     #DBCFB9;
  --tone-slate:    #C6C7BC;
  --tone-sand:     #E3D6BC;
  --tone-charcoal: #2B2820;

  --serif: 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --sans:  'Noto Sans SC', system-ui, 'PingFang SC', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --read:  'LXGW WenKai Screen', 'Noto Serif SC', 'Songti SC', Georgia, serif;

  /* subtle paper grain (grayscale fractal noise, very faint) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---- base ---- */
.qa, .qa * { box-sizing: border-box; }
.qa {
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
  height: 100%;
}

/* ---- catalogue label (mono, letterspaced caps — museum placard) ---- */
.qa-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.qa-label--ink { color: var(--ink); }
.qa-label--faint { color: var(--faint); }
.qa-callno {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-feature-settings: 'tnum' 1;
}

/* ---- hairlines ---- */
.qa-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.qa-rule--strong { border-top: 1px solid var(--rule-strong); }
.qa-rule--double { border: 0; border-top: 3px double var(--rule-strong); }

/* ---- display type ---- */
.qa-display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.qa-serif-italic { font-style: normal; color: var(--stamp); }

/* ---- body reading text —— 正文阅读配置 ---- */
.qa-prose { font-family: var(--read); color: var(--ink-soft); line-height: 1.95; letter-spacing: 0.015em; }
.qa-prose p { margin: 0 0 1.05em; text-wrap: pretty; }
.qa-lede {
  font-family: var(--read);
  font-size: 20px;
  line-height: 1.92;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0.015em;
}

/* =========================================================
   COVER TILE — typographic, monochrome, uniform archival card
   ========================================================= */
.qa-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  container-type: inline-size;
  background: var(--tone-bone);
  border: 1px solid rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  padding: 9% 9% 8%;
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}
.qa-cover--image {
  padding: 0;
  background: var(--card);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 8px 18px rgba(38,24,10,0.20);
}
.qa-cover--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qa-cover--image .qa-cover-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 12%, rgba(0,0,0,0) 86%, rgba(0,0,0,.20)),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 34%, rgba(0,0,0,.10));
}
.qa-cover::after {           /* inner hairline frame */
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(0,0,0,0.13);
  pointer-events: none;
}
.qa-cover[data-tone='bone']     { background: var(--tone-bone); }
.qa-cover[data-tone='ash']      { background: var(--tone-ash); }
.qa-cover[data-tone='clay']     { background: var(--tone-clay); }
.qa-cover[data-tone='slate']    { background: var(--tone-slate); }
.qa-cover[data-tone='sand']     { background: var(--tone-sand); }
.qa-cover[data-tone='charcoal'] { background: var(--tone-charcoal); color: #EDE8DC; }
.qa-cover[data-tone='charcoal']::after { border-color: rgba(255,255,255,0.16); }
.qa-cover[data-tone='charcoal'] .qa-cover-cat,
.qa-cover[data-tone='charcoal'] .qa-cover-call { color: rgba(237,232,220,0.62); }
.qa-cover[data-tone='charcoal'] .qa-cover-author { color: rgba(237,232,220,0.78); }

.qa-cover-top {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: baseline;
}
.qa-cover-cat {
  font-family: var(--mono); font-size: clamp(6px, 5.5cqi, 9px); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.qa-cover-mark {
  font-family: var(--mono); font-size: clamp(6px, 5.5cqi, 9px); letter-spacing: 0.06em; color: var(--faint);
}
.qa-cover-body {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 6px 6px 0;
}
.qa-cover-title {
  font-family: var(--serif); font-weight: 500;
  line-height: 1.22; letter-spacing: 0.05em;
  font-size: clamp(8px, 13cqi, 25px);
  text-wrap: balance;
}
.qa-cover-rule { width: 22cqi; max-width: 26px; height: 1px; background: currentColor; opacity: 0.45; margin: 7% auto; }
.qa-cover-author {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(6px, 6.5cqi, 13px); letter-spacing: 0.05em; color: var(--ink-soft);
}
/* tiny thumbnails: show only the title, centered */
@container (max-width: 96px) {
  .qa-cover-top, .qa-cover-foot, .qa-cover-author, .qa-cover-rule { display: none; }
  .qa-cover::after { inset: 4px; }
}
.qa-cover-rule { width: 22px; height: 1px; background: currentColor; opacity: 0.45; margin: 9px auto; }
.qa-cover-author {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: 12.5px; letter-spacing: 0.05em; color: var(--ink-soft);
}
/* (sized above via container query) */
.qa-cover-foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: baseline;
}
.qa-cover-call { font-family: var(--mono); font-size: clamp(6px, 5cqi, 9px); letter-spacing: 0.03em; color: var(--muted); }
.qa-cover-year { font-family: var(--serif); font-size: clamp(6px, 5.5cqi, 10px); color: var(--faint); }

/* tiny stamp accent (used on a single featured cover) */
.qa-stamp-mark {
  position: absolute; z-index: 2; right: 11px; bottom: 13%;
  width: 34px; height: 34px; border: 1.5px solid var(--stamp); border-radius: 50%;
  color: var(--stamp); font-family: var(--serif); font-size: 9px; font-weight: 500;
  line-height: 1.15; letter-spacing: 0.08em; display: flex; align-items: center; justify-content: center;
  text-align: center; transform: rotate(-8deg); opacity: 0.82;
}

/* ---- small caps section heading ---- */
.qa-sect-head {
  display: flex; align-items: baseline; gap: 14px;
}
.qa-sect-head .qa-num {
  font-family: var(--mono); font-size: 11px; color: var(--stamp);
  letter-spacing: 0.04em; font-feature-settings: 'tnum' 1;
}

/* ---- pill / chip ---- */
.qa-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; font-weight: 400;
  color: var(--ink-soft); border: 1px solid rgba(197,183,149,.72);
  padding: 7px 13px; border-radius: 100px; background: rgba(250,243,226,.38); white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.qa-chip--on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- link affordance ---- */
.qa-note-link {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; font-weight: 400;
  color: var(--ink); text-decoration: none; padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.qa-note-link .qa-arr { margin-left: auto; color: var(--faint); transition: transform .15s; }
.qa-note-link:hover .qa-arr { transform: translateX(3px); color: var(--stamp); }

/* ---- linked covers + nav ---- */
.qa-cover-link { display: block; text-decoration: none; color: inherit; transition: transform .16s ease, filter .16s ease; }
.qa-cover-link:hover { transform: translateY(-3px); filter: drop-shadow(0 8px 12px rgba(38,24,10,0.26)); }
.qa-nav-link { transition: color .15s; }
.qa-nav-link:hover { color: var(--stamp) !important; }
.qa-wordmark { transition: opacity .15s; }
.qa-wordmark:hover { opacity: 0.66; }
.qa-title-link { transition: color .15s; }
.qa-title-link:hover { color: var(--stamp) !important; }

/* =========================================================
   WOODEN SHELF —— 木搁板（书卷气书架）
   ========================================================= */
.qa-shelf { position: relative; }
.qa-shelf-books {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: 20px;
  padding: 0 26px 0;
}
.qa-shelf-books--center { justify-content: center; }
.qa-shelf-book {
  position: relative;
  /* book sits ON the board: soft contact shadow downward */
  filter: drop-shadow(0 5px 5px rgba(38,24,10,0.28));
}
/* the board */
.qa-shelf-board {
  position: relative;
  height: 20px;
  border-radius: 0 0 2px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, rgba(255,255,255,0.015) 1px 9px),
    linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 34%, var(--wood-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}
/* thin dark seam where books meet the wood */
.qa-shelf-board::before {
  content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 7px;
  background: linear-gradient(180deg, rgba(38,24,10,0) 0%, rgba(38,24,10,0.16) 100%);
  pointer-events: none;
}
/* front lip + cast shadow under the board */
.qa-shelf-board::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: linear-gradient(180deg, var(--wood-edge) 0%, rgba(38,24,10,0.30) 22%, rgba(38,24,10,0) 100%);
  border-radius: 0 0 3px 3px;
  pointer-events: none;
}
.qa-shelf-board--bracket::after { height: 14px; bottom: -14px; }

/* book label under a shelved cover (used in some layouts) */
.qa-shelf-cap { text-align: center; margin-top: 12px; }

/* =========================================================
   READING-ROOM masthead wordmark
   ========================================================= */
.qa-wordmark {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  letter-spacing: 0.42em; padding-left: 0.42em;
}
.qa-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
}
.qa-brand-mark {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  box-shadow: 0 6px 20px rgba(63, 44, 29, .10);
}
.qa-home-logo {
  display: block;
  width: clamp(132px, 16vw, 178px);
  height: auto;
  margin: 36px auto 30px;
  filter: drop-shadow(0 14px 22px rgba(63, 44, 29, .12));
}
.qa-divider-orn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--rule-strong);
}
.qa-divider-orn::before, .qa-divider-orn::after {
  content: ''; height: 1px; width: 46px; background: currentColor;
}
.qa-divider-orn span { color: var(--stamp); font-size: 9px; letter-spacing: 0.2em; white-space: nowrap; }

/* ---- scrollbars hidden inside artboards already handled by canvas ---- */


/* ---- bookshelf catalogue page from uploaded design ---- */
.qa-bookshelf-title { padding:40px 56px 26px; text-align:center; }
.qa-bookshelf-title h1 { font-size:38px; margin:16px 0 10px; letter-spacing:.03em; }
.qa-bookshelf-title p { font-size:15px; color:var(--muted); max-width:520px; margin:0 auto; }
.qa-bookshelf-chips { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:24px; flex-wrap:wrap; }
.qa-bookshelf-chips .qa-chip { appearance:none; -webkit-appearance:none; cursor:pointer; }
.qa-bookshelf-chips .qa-chip span { color:var(--faint); margin-left:8px; font-family:var(--mono); }
.qa-bookshelf-chips .qa-chip--on span { color:rgba(239,231,214,.68); }
.qa-bookshelf-chips .qa-chip:hover { border-color:var(--stamp); color:var(--stamp); }
.qa-bookshelf-chips .qa-chip--on:hover { color:var(--paper); border-color:var(--ink); }
.qa-bookshelf-wrap { padding:6px 56px 50px; }
.qa-bookshelf-cabinet { position:relative; padding:30px 30px 34px; background:var(--paper-2); background-image:var(--grain); box-shadow:inset 0 2px 18px rgba(60,42,20,.14), inset 0 0 0 1px rgba(78,56,32,.10); }
.qa-bookshelf-side { position:absolute; top:0; bottom:0; width:9px; pointer-events:none; }
.qa-bookshelf-side--left { left:0; background:linear-gradient(90deg,var(--wood-dark),var(--wood) 60%,var(--wood-edge)); }
.qa-bookshelf-side--right { right:0; background:linear-gradient(270deg,var(--wood-dark),var(--wood) 60%,var(--wood-edge)); }
.qa-bookshelf-rows { display:flex; flex-direction:column; gap:30px; padding:0 6px; }
.qa-bookshelf-head { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; padding-left:4px; }
.qa-bookshelf-head > span:first-child { font-family:var(--serif); font-size:17px; font-weight:500; color:var(--ink); white-space:nowrap; }
.qa-bookshelf-head i { flex:1; border-bottom:1px dotted var(--rule-strong); transform:translateY(-4px); }
.qa-bookshelf-books { justify-content:flex-start; gap:22px; }
.qa-bookshelf-book { width:104px; }
.qa-bookshelf-book .qa-cover-link { width:104px !important; }
.qa-bookshelf-foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding:0 4px; gap:18px; }
.qa-bookshelf-foot > div { display:flex; gap:14px; align-items:center; }

html, body { margin: 0; min-height: 100%; background: var(--paper); }
body { overflow-x: hidden; }
a { color: inherit; }
.qa-site { min-height: 100vh; }
.qa-shell { max-width: 1180px; margin: 0 auto; box-shadow: 0 18px 80px rgba(62,43,20,.18); }
.qa-page { min-height: 60vh; }
.qa-grid { display: grid; gap: 28px; }
.qa-two { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }
.qa-card { background: rgba(250,243,226,.62); border: 1px solid var(--rule-soft); padding: 24px; }
.qa-card--plain { background: transparent; }
.qa-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 32px 24px; align-items: end; }
.qa-book-tile { text-decoration: none; color: inherit; display: block; }
.qa-book-tile:hover .qa-book-title { color: var(--stamp); }
.qa-book-title { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ink); transition: color .15s; }
.qa-book-meta { margin-top: 5px; font-family: var(--sans); color: var(--muted); font-size: 12px; line-height: 1.5; }
.qa-list { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.qa-list a, .qa-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; align-items: baseline; }
.qa-list a:hover strong { color: var(--stamp); }
.qa-list strong { font-family: var(--serif); font-weight: 500; transition: color .15s; }
.qa-list span { color: var(--muted); font-family: var(--sans); font-size: 12px; }
.qa-content { font-family: var(--read); color: var(--ink-soft); font-size: 17px; line-height: 1.95; letter-spacing: 0.015em; }
.qa-content h2 { font-family: var(--serif); font-size: 25px; color: var(--ink); margin: 2em 0 .6em; font-weight: 500; }
.qa-content h3 { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 1.6em 0 .4em; font-weight: 500; }
.qa-content p { margin: 0 0 1em; }
.qa-content ul, .qa-content ol { padding-left: 1.35em; margin: .55em 0 1em; }
.qa-content ul ul, .qa-content ol ol, .qa-content ul ol, .qa-content ol ul { margin: .25em 0 .35em; padding-left: 1.55em; }
.qa-content li { margin: .45em 0; }
.qa-content li > ul, .qa-content li > ol { margin-bottom: .1em; }
.qa-content blockquote { margin: 1.2em 0; padding: 0 0 0 18px; border-left: 2px solid var(--rule-strong); color: var(--muted); }
.qa-content code { font-family: var(--mono); font-size: .88em; background: rgba(0,0,0,.045); padding: .12em .35em; border-radius: 4px; }
.qa-content a { color: var(--stamp); text-decoration: none; border-bottom: 1px solid rgba(156,58,44,.30); }
.qa-content a:hover { border-bottom-color: var(--stamp); }
.qa-search { width: 100%; border: 1px solid var(--rule-strong); background: rgba(250,243,226,.62); color: var(--ink); padding: 13px 16px; font: 14px var(--sans); outline: none; }
.qa-search:focus { border-color: var(--stamp); box-shadow: 0 0 0 2px rgba(156,58,44,.10); }
.qa-empty { padding: 38px; text-align: center; color: var(--muted); font-family: var(--serif); }
.qa-section-pad { padding: 46px 56px 54px; }
.qa-hero-line { display:flex; justify-content:center; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:30px; }
.qa-hero-stat { display:inline-flex; align-items:baseline; gap:5px; }
.qa-toc { position: sticky; top: 18px; }
.qa-toc a { display:block; padding:9px 0; text-decoration:none; border-bottom:1px solid var(--rule-soft); color:var(--muted); font:13px var(--sans); }
.qa-toc a:hover { color: var(--stamp); }
.qa-toolbar { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; }
.qa-pill-row { display:flex; gap:10px; flex-wrap:wrap; }
.qa-chip { cursor: default; }
.qa-chip[data-clickable="true"] { cursor:pointer; }
.qa-chip[data-clickable="true"]:hover { color:var(--stamp); border-color:rgba(156,58,44,.55); background:rgba(156,58,44,.055); transform:translateY(-1px); }
.qa-chip[data-active="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qa-small-link { color: var(--stamp); text-decoration: none; border-bottom: 1px solid rgba(156,58,44,.25); }
.qa-small-link:hover { border-bottom-color: var(--stamp); }

@media (max-width: 860px) {
  .qa-shell { box-shadow: none; }
  .qa-section-pad { padding: 34px 24px 40px; }
  .qa-two { grid-template-columns: 1fr; }
  .qa-book-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 24px 16px; }
  .qa-shelf-books { gap: 12px; padding-left: 8px; padding-right: 8px; overflow-x: auto; justify-content: flex-start !important; }
  .qa-shelf-book { min-width: 88px; }
  header nav { gap: 18px !important; overflow-x: auto; justify-content: flex-start !important; padding-left: 18px !important; padding-right: 18px !important; }
  .qa-display { text-wrap: balance; }
  footer { flex-direction: column; align-items: flex-start !important; gap: 22px; padding: 28px 24px !important; }
}

/* ---- faithful single-book / memo / card layouts from uploaded design ---- */
.qa-breadcrumb { display:flex; gap:12px; align-items:center; margin-bottom:26px; font:11px var(--sans); letter-spacing:.16em; color:var(--muted); }
.qa-breadcrumb a, .qa-back-link, .qa-memo-top a { color:var(--stamp); text-decoration:none; }
.qa-book-hero { padding:40px 56px 36px; }
.qa-book-hero-row { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; }
.qa-book-title-large { font-size:60px; line-height:1.08; margin:0; letter-spacing:.03em; }
.qa-book-subtitle { font-family:var(--serif); font-size:17px; color:var(--muted); margin:16px 0 0; }
.qa-status { text-align:right; min-width:136px; }
.qa-status strong { display:block; font-family:var(--serif); font-size:16px; color:var(--stamp); margin-top:6px; font-weight:400; white-space:nowrap; }
.qa-book-one { font-size:21px; margin:26px 0 0; max-width:780px; }
.qa-book-layout { display:grid; grid-template-columns:256px minmax(0,1fr) 296px; }
.qa-book-left { padding:40px 36px 44px 56px; border-right:1px solid var(--rule-soft); }
.qa-book-main { padding:40px 48px 48px; border-right:1px solid var(--rule-soft); min-width:0; }
.qa-book-main .qa-sect-head { margin-bottom:20px; }
.qa-book-main .qa-sect-head h3 { font-size:26px; margin:0; }
.qa-book-right { padding:40px 56px 48px 36px; background:var(--paper-2); background-image:var(--grain); }
.qa-cover-large { display:flex; justify-content:center; }
.qa-meta-box { margin-top:26px; }
.qa-meta-box > .qa-label { display:block; margin-bottom:8px; font-size:10px; }
.qa-meta-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; border-top:1px solid var(--rule-soft); }
.qa-meta-row span { font:10px var(--sans); letter-spacing:.16em; color:var(--faint); white-space:nowrap; }
.qa-meta-row strong { font-family:var(--serif); font-size:15px; color:var(--ink-soft); text-align:right; line-height:1.4; font-weight:400; }
.qa-mode-links { display:flex; gap:9px; flex-wrap:wrap; margin:18px 0 28px; }
.qa-mode-links .qa-chip { text-decoration:none; }
.qa-side-spacer { height:34px; }
.qa-side-note { font-family:var(--read); font-size:14px; line-height:1.85; letter-spacing:.015em; color:var(--muted); margin-top:18px; }
.qa-mini-toc { list-style:none; margin:14px 0 0; padding:0; }
.qa-mini-toc li { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--rule-soft); font-family:var(--serif); font-size:15px; color:var(--ink-soft); line-height:1.35; }
.qa-mini-toc li span { font:10px var(--mono); color:var(--faint); flex:0 0 auto; }
.qa-mini-toc a { color:inherit; text-decoration:none; text-underline-offset:3px; }
.qa-mini-toc a:hover { color:var(--stamp); text-decoration:underline; }

.qa-memo-head { padding:44px 56px 30px; border-bottom:1px solid var(--rule-strong); }
.qa-memo-top { display:flex; justify-content:space-between; align-items:baseline; gap:18px; font:11px var(--sans); letter-spacing:.12em; color:var(--faint); }
.qa-memo-head h1 { font-size:48px; margin:18px 0 8px; letter-spacing:.03em; }
.qa-memo-head h1 a, .qa-cards-head h1 a { color:inherit; text-decoration:none; }
.qa-memo-head p, .qa-cards-head p { font-family:var(--serif); font-size:16px; color:var(--muted); margin:0; }
.qa-memo-stats { display:flex; gap:30px; margin-top:22px; flex-wrap:wrap; }
.qa-memo-stats span { display:block; font:9.5px var(--sans); letter-spacing:.2em; color:var(--faint); }
.qa-memo-stats strong { display:block; font-family:var(--serif); font-size:14.5px; color:var(--ink-soft); margin-top:4px; font-weight:400; }
.qa-memo-layout { display:grid; grid-template-columns:212px minmax(0,1fr); align-items:start; }
.qa-memo-aside { padding:40px 28px 40px 56px; border-right:1px solid var(--rule-soft); position:sticky; top:0; align-self:start; }
.qa-memo-cover { margin-top:30px; margin-bottom:16px; }
.qa-memo-article { padding:46px 72px 56px; max-width:860px; min-width:0; }
.qa-content--memo { max-width:760px; }
.qa-content--memo > p:first-of-type::first-letter { float:left; font-family:var(--serif); font-size:58px; line-height:.9; font-weight:500; padding:4px 14px 0 0; color:var(--ink); }
.qa-content--memo h2 { display:flex; align-items:baseline; gap:14px; font-size:24px; margin:2em 0 .75em; }
.qa-content--memo h2::before { content:'§'; font:14px var(--mono); color:var(--stamp); }
.qa-content--memo p { font-size:17px; line-height:1.95; text-align:justify; }

.qa-cards-head { padding:44px 56px 28px; display:flex; justify-content:space-between; align-items:flex-end; gap:28px; }
.qa-cards-head h1 { font-size:44px; margin:14px 0 8px; letter-spacing:.03em; }
.qa-cards-head p a { color:var(--muted); text-underline-offset:3px; }
.qa-cards-total { text-align:right; }
.qa-cards-total strong { display:block; font:34px var(--mono); color:var(--ink); line-height:1; }
.qa-cards-total span { font:9.5px var(--sans); letter-spacing:.2em; color:var(--faint); }
.qa-cards-filter { padding:24px 56px 0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.qa-cards-filter .qa-mode-links { margin:0; }
.qa-cards-filter > .qa-label { margin-left:auto; }
.qa-card-intro { margin:24px 56px 0; padding:18px 22px; border:1px solid var(--rule-soft); background:rgba(250,243,226,.5); }
.qa-card-grid { padding:36px 56px 48px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.qa-card-grid--full { grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
.qa-index-card { background:var(--card); border:1px solid rgba(0,0,0,.11); padding:18px 20px 16px; display:flex; flex-direction:column; min-height:256px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.qa-index-card--full { min-height:auto; }
.qa-index-card-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.qa-index-card-top span { font:34px/1 var(--mono); color:var(--ink); }
.qa-index-card-top em { font:10px var(--mono); color:var(--faint); font-style:normal; }
.qa-redline { height:1px; background:var(--stamp); opacity:.5; margin:14px 0 13px; }
.qa-index-card h3 { font-family:var(--serif); font-size:21px; line-height:1.25; margin:0 0 8px; color:var(--ink); font-weight:500; }
.qa-card-body h3 { font-size:14px; letter-spacing:.08em; color:var(--stamp); margin:18px 0 8px; }
.qa-index-card p { font-family:var(--read); font-size:14px; line-height:1.85; margin:0 0 12px; color:var(--ink-soft); }
.qa-index-card ul { margin:0 0 14px; padding:12px 0 0 1.1em; border-top:1px solid var(--rule-soft); color:var(--muted); font-family:var(--read); font-size:13px; line-height:1.7; letter-spacing:.015em; }
.qa-index-card li { margin:.3em 0; }
.qa-card-appendix { padding-top:0; }
.qa-card-appendix-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.qa-index-card--appendix { min-height:auto; background:rgba(250,243,226,.62); }
.qa-raw-cards { border:1px solid var(--rule-soft); background:rgba(250,243,226,.5); padding:18px 22px; }
.qa-raw-cards summary { cursor:pointer; font:13px var(--sans); letter-spacing:.08em; color:var(--stamp); }

@media (max-width: 980px) {
  .qa-book-layout { grid-template-columns:1fr; }
  .qa-book-left, .qa-book-main, .qa-book-right { border-right:0; border-bottom:1px solid var(--rule-soft); padding:32px 24px; }
  .qa-book-hero, .qa-memo-head, .qa-cards-head, .qa-cards-filter, .qa-card-grid, .qa-card-intro { padding-left:24px; padding-right:24px; }
  .qa-book-hero-row, .qa-cards-head { align-items:flex-start; flex-direction:column; }
  .qa-status, .qa-cards-total { text-align:left; }
  .qa-book-title-large { font-size:42px; }
  .qa-memo-layout { grid-template-columns:1fr; }
  .qa-memo-aside { position:static; border-right:0; border-bottom:1px solid var(--rule-soft); padding:28px 24px; }
  .qa-memo-article { padding:34px 24px 44px; }
  .qa-card-grid, .qa-card-grid--full, .qa-card-appendix-grid { grid-template-columns:1fr; }
}