/* ============================================================
   site.css — subsidy.patentllm.org
   tokens.css の後に読み込む。ui-tone（アミューズ統合報告書2024）準拠。

   原則（tokens.css より）:
     ・面は 白 / 淡グレー / 黒 / 水色 の4つだけ。5つ目を作らない
     ・黄は1画面に1箇所。必ず「地」に使う（黄文字は 1.5:1 で読めない）
     ・角丸は2段だけ（3px と 14px）。中間を使わない
     ・数値は極端に大きく、単位は極端に小さく、同じ行に
     ・表に縦罫を引かない。横罫は点線
   このサイトで黄を使うのは「弁護士に相談する」CTA の1箇所のみ。
   ============================================================ */
* { box-sizing:border-box; margin:0; padding:0; }

body {
  background:var(--c-paper); color:var(--c-body);
  font-family:var(--f-sans); font-size:var(--t-body); line-height:var(--lh-body);
  font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}

a { color:var(--c-ink); text-decoration:underline;
    text-decoration-color:var(--c-accent); text-decoration-thickness:2px;
    text-underline-offset:3px; }
a:hover { text-decoration-thickness:3px; }

.container, .wrap { max-width:var(--content-max); margin:0 auto;
                    padding:0 var(--s-5); width:100%; }

/* ---- マストヘッド：黒ベタ ---------------------------------- */
.top-nav { background:var(--c-ground); color:var(--c-ground-ink); }
.nav-inner {
  max-width:var(--content-max); margin:0 auto; padding:var(--s-4) var(--s-5);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); flex-wrap:wrap;
}
.nav-logo {
  color:var(--c-ground-ink) !important; text-decoration:none !important;
  font-family:var(--f-disp); font-weight:800; font-size:var(--t-h2);
  letter-spacing:var(--ls-disp); text-transform:uppercase;
}
.nav-links { display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; }
.contact-btn {
  background:transparent; color:var(--c-ground-ink) !important;
  border:1px solid var(--c-ground-line); border-radius:var(--r-1);
  padding:3px var(--s-2); line-height:1.7; white-space:nowrap;
  font-size:var(--t-label); font-weight:700; letter-spacing:.08em;
  text-decoration:none !important;
}
.contact-btn:hover { background:var(--c-ground-ink); color:var(--c-ink) !important;
                     border-color:var(--c-ground-ink); }
.contact-btn:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }

main.container { padding-top:var(--s-6); padding-bottom:var(--s-8); flex:1; }

/* ---- ページ見出し ------------------------------------------ */
.search-hero { text-align:left; padding:0 0 var(--s-5); }
.search-hero h1 {
  font-size:var(--t-display); font-weight:900; color:var(--c-ink);
  letter-spacing:var(--ls-head); line-height:var(--lh-head);
  margin:0 0 var(--s-2); text-wrap:balance;
}
.hero-sub { font-size:var(--t-small); color:var(--c-mute);
            max-width:66ch; line-height:1.9; margin-bottom:var(--s-5); }

/* 検索バー：黒罫で囲い、ボタンは黒ベタ */
.search-form { max-width:none; }
.search-bar { display:flex; gap:0; }
.search-bar input {
  flex:1; padding:var(--s-3) var(--s-4); font-size:var(--t-body);
  font-family:inherit; border:var(--bd-ink); border-right:0;
  border-radius:var(--r-1) 0 0 var(--r-1); background:var(--c-paper);
  color:var(--c-body); outline:none;
}
.search-bar input::placeholder { color:var(--c-mute); }
.search-bar input:focus { outline:2px solid var(--c-ink); outline-offset:-2px; }
.search-bar button {
  padding:var(--s-3) var(--s-5); font-size:var(--t-small); font-weight:700;
  font-family:inherit; background:var(--c-ink); color:var(--c-ground-ink);
  border:var(--bd-ink); border-radius:0 var(--r-1) var(--r-1) 0; cursor:pointer;
}
.search-bar button:hover { background:var(--c-body); }
.search-hints { font-size:var(--t-label); color:var(--c-mute); margin-top:var(--s-2);
                letter-spacing:.02em; }

/* ---- 絞り込み：選択中だけ黒ベタ ---------------------------- */
.filters { background:var(--c-surface); border-radius:var(--r-3);
           padding:var(--s-4) var(--s-5); margin-bottom:var(--s-5); }
.filter-row { display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-4); align-items:flex-end; }
.fl { display:flex; flex-direction:column; gap:var(--s-1); }
.fl > span { font-size:var(--t-label); font-weight:700; letter-spacing:.1em;
             text-transform:uppercase; color:var(--c-mute); }
.fl select {
  font-size:var(--t-small); font-family:inherit; padding:var(--s-2) var(--s-3);
  border:var(--bd); border-radius:var(--r-1); background:var(--c-paper);
  color:var(--c-body); max-width:15rem;
}
.fl select:focus-visible { outline:2px solid var(--c-ink); outline-offset:1px; }
.fl-check { flex-direction:row; align-items:center; gap:var(--s-2); padding-bottom:var(--s-2); }
.fl-check input { width:16px; height:16px; accent-color:var(--c-ink); }
.fl-check span { font-size:var(--t-small); font-weight:700; color:var(--c-body);
                 text-transform:none; letter-spacing:0; }
.filter-apply {
  padding:var(--s-2) var(--s-5); font-size:var(--t-small); font-weight:700;
  font-family:inherit; background:var(--c-ink); color:var(--c-ground-ink);
  border:var(--bd-ink); border-radius:var(--r-1); cursor:pointer; line-height:1.5;
}
.filter-apply:hover { background:var(--c-body); }
.filter-clear { font-size:var(--t-label); font-weight:700; letter-spacing:.06em;
                padding-bottom:var(--s-2); }

/* ---- 件数：数値は大きく、単位は小さく ---------------------- */
.results-count { font-size:var(--t-small); color:var(--c-mute);
                 margin-bottom:var(--s-4); letter-spacing:.02em; }
.results-count strong {
  font-family:var(--f-num); font-variant-numeric:tabular-nums;
  font-size:var(--t-h1); font-weight:700; color:var(--c-ink);
  letter-spacing:-0.01em; margin-right:2px;
}
.rc-all { color:var(--c-mute); }

/* 注意書き：淡グレーの面＋点線罫。黄は使わない（CTAに温存） */
.notice { background:var(--c-surface); border-radius:var(--r-3);
          padding:var(--s-3) var(--s-4); font-size:var(--t-small);
          color:var(--c-body); margin-bottom:var(--s-4); }

/* ---- カード：影ではなく罫で区切る -------------------------- */
.card-list { display:grid; gap:var(--s-3); }
.card { background:var(--c-paper); border:var(--bd); border-radius:var(--r-3);
        padding:var(--s-5); display:grid; gap:var(--s-3); align-content:start; }
.card:hover { border-color:var(--c-ink); }
.card-head { display:flex; justify-content:space-between; align-items:flex-start;
             gap:var(--s-4); }
.card-title { font-size:var(--t-h3); font-weight:900; color:var(--c-ink);
              line-height:var(--lh-head); letter-spacing:var(--ls-head);
              margin:0; text-wrap:balance; }
.card-title a { color:var(--c-ink); text-decoration:none; }
.card-title a:hover { text-decoration:underline; text-decoration-color:var(--c-accent);
                      text-decoration-thickness:2px; text-underline-offset:3px; }
.card-summary { font-size:var(--t-small); color:var(--c-body); line-height:1.8; margin:0; }

/* 事実の並び：ラベルは小さい欧文、値は数値書体 */
.card-facts { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6);
              border-top:var(--rule-dot); padding-top:var(--s-3); margin:0; }
.card-facts > div { display:flex; align-items:baseline; gap:var(--s-2); }
.card-facts dt { font-size:var(--t-label); font-weight:700; letter-spacing:.1em;
                 text-transform:uppercase; color:var(--c-mute); }
.card-facts dd { font-size:var(--t-small); font-weight:700; color:var(--c-ink); margin:0; }
.fact-amount { font-family:var(--f-num); font-variant-numeric:tabular-nums;
               font-size:var(--t-h2) !important; letter-spacing:-0.01em; }

.card-tags { display:flex; flex-wrap:wrap; gap:var(--s-1); }

/* ---- チップ：黒ベタが基本。角丸は最小段 -------------------- */
.chip { display:inline-block; background:var(--c-ink); color:var(--c-ground-ink);
        font-size:var(--t-label); font-weight:700; letter-spacing:.08em;
        padding:3px var(--s-2); border-radius:var(--r-1); text-decoration:none; }
a.chip:hover { background:var(--c-body); text-decoration:none; }
.chip-area { background:var(--c-cool); color:var(--c-cool-ink); }
a.chip-area:hover { background:var(--c-cool); text-decoration:none; }
.chip-purpose { background:var(--c-paper); color:var(--c-body); border:var(--bd); }
.chip-src { background:var(--c-paper); color:var(--c-mute); border:var(--bd);
            font-family:var(--f-num); letter-spacing:.02em; }

/* ---- 締切バッジ --------------------------------------------
   黄は CTA に温存するので、ここでは使わない。
   本当に急ぐもの（7日以内）だけ赤ベタ。それ以外は罫または淡い面。 */
.dl-badge { display:inline-block; font-size:var(--t-label); font-weight:700;
            letter-spacing:.06em; padding:3px var(--s-2);
            border-radius:var(--r-1); white-space:nowrap;
            font-family:var(--f-num); font-variant-numeric:tabular-nums; }
.dl-soon    { background:var(--c-red);     color:#fff; }
.dl-near    { background:var(--c-paper);   color:var(--c-warn); border:1px solid var(--c-warn); }
.dl-open    { background:var(--c-paper);   color:var(--c-mute); border:var(--bd); }
.dl-rolling { background:var(--c-surface); color:var(--c-body); }
.dl-closed  { background:var(--c-surface); color:var(--c-mute); }
.dl-unknown { background:var(--c-paper);   color:var(--c-mute); border:1px dotted var(--c-line); }
.dl-raw { font-size:var(--t-label); color:var(--c-mute); margin-top:2px; line-height:1.5; }

/* ---- ページ送り -------------------------------------------- */
.pager { display:flex; justify-content:center; align-items:center; gap:var(--s-1);
         flex-wrap:wrap; margin-top:var(--s-7); }
.pager a, .pager span {
  min-width:34px; padding:var(--s-2) var(--s-3); text-align:center;
  font-family:var(--f-num); font-variant-numeric:tabular-nums;
  font-size:var(--t-small); font-weight:700;
  border:var(--bd); border-radius:var(--r-1);
  background:var(--c-paper); color:var(--c-body); text-decoration:none;
}
.pager a:hover { border-color:var(--c-ink); color:var(--c-ink); text-decoration:none; }
.pager .current { background:var(--c-ink); color:var(--c-ground-ink); border-color:var(--c-ink); }
.pager .gap { border:0; background:none; color:var(--c-mute); min-width:16px; padding:var(--s-2) 2px; }

/* ---- パンくず：点線 ---------------------------------------- */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2);
              margin-bottom:var(--s-5); font-size:var(--t-label); color:var(--c-mute); }
.breadcrumb a { color:var(--c-mute); text-decoration:none; border-bottom:var(--rule-dot);
                font-weight:700; letter-spacing:.06em; }
.breadcrumb a:hover { color:var(--c-ink); }

/* ---- 詳細 --------------------------------------------------- */
.detail-card { background:var(--c-paper); border:var(--bd); border-radius:var(--r-3);
               padding:var(--s-6); margin-bottom:var(--s-5); }
.detail-card h2 { font-size:var(--t-h1); font-weight:900; color:var(--c-ink);
                  line-height:var(--lh-head); letter-spacing:var(--ls-head);
                  margin-bottom:var(--s-4); text-wrap:balance; }
.d-tags { display:flex; flex-wrap:wrap; gap:var(--s-1); margin-bottom:var(--s-5); }

/* 結論ファースト：数値は極端に大きく、単位は極端に小さく */
.keyfacts { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);
            background:var(--c-ground); color:var(--c-ground-ink);
            border-radius:var(--r-3); padding:var(--s-5); margin-bottom:var(--s-6); }
.kf-label { font-size:var(--t-label); font-weight:700; letter-spacing:var(--ls-label);
            text-transform:uppercase; color:var(--c-ground-mute); margin-bottom:var(--s-2); }
.kf-value { font-size:var(--t-h2); font-weight:700; color:var(--c-ground-ink);
            line-height:var(--lh-head); }
.kf-amount { font-family:var(--f-num); font-variant-numeric:tabular-nums;
             font-size:var(--t-hero); font-weight:700; line-height:var(--lh-tight);
             letter-spacing:-0.02em; }
.kf-none { font-size:var(--t-small); font-weight:400; color:var(--c-ground-mute); }
.kf-sub { font-family:var(--f-num); font-size:var(--t-label); font-weight:400;
          color:var(--c-ground-mute); margin-top:var(--s-1); }
.keyfacts .dl-badge { background:var(--c-ground-ink); color:var(--c-ink); border:0; }
.keyfacts .dl-soon { background:var(--c-red); color:#fff; }

/* 節見出し：サイズではなく「地」で立てる */
.d-section { margin-bottom:var(--s-6); }
.d-section h3 { display:inline-block; background:var(--c-ink); color:var(--c-ground-ink);
                font-size:var(--t-h3); font-weight:900; line-height:1.5;
                padding:var(--s-1) var(--s-3); border-radius:var(--r-1);
                letter-spacing:var(--ls-head); margin:0 0 var(--s-4); }
.d-catch { font-size:var(--t-h3); font-weight:700; color:var(--c-ink); margin-bottom:var(--s-3); }
/* 詳細の読み物本文。カード内の補助文（--t-small）より一段大きくする。
   和文で長文を 13px は詰まって読めない。tokens の「和文本文はこれ以上下げない」
   という基準どおり 15px を使う。 */
.d-text { font-size:var(--t-body); color:var(--c-body); line-height:var(--lh-body); }
.pre { white-space:pre-wrap; }
.d-official { background:var(--c-surface); border-radius:var(--r-3);
              padding:var(--s-3) var(--s-4); font-size:var(--t-small);
              color:var(--c-body); margin-bottom:var(--s-4); }
.d-links { list-style:none; margin:0 0 var(--s-4); }
.d-links li { margin-bottom:var(--s-2); font-size:var(--t-small); font-weight:700; }
.d-meta { font-family:var(--f-num); font-size:var(--t-label); color:var(--c-mute); }
.d-related { list-style:none; margin:0 0 var(--s-4); }
.d-related li { font-size:var(--t-small); margin-bottom:var(--s-3); line-height:1.7;
                border-bottom:var(--rule-dot); padding-bottom:var(--s-2); }
.d-rel-dl { font-family:var(--f-num); font-size:var(--t-label); color:var(--c-mute); }

/* ---- 表：縦罫なし、横罫は点線、行頭列は黒ベタ --------------- */
.detail-table { width:100%; border-collapse:collapse; font-size:var(--t-small); }
.detail-table th {
  text-align:left; width:8.5rem; padding:var(--s-2) var(--s-3);
  font-size:var(--t-label); font-weight:700; letter-spacing:.08em;
  color:var(--c-mute); border-bottom:var(--rule-dot);
  vertical-align:top; white-space:nowrap;
}
.detail-table td { padding:var(--s-3); border-bottom:var(--rule-dot);
                   color:var(--c-body); line-height:1.8; }

/* ---- CTA：黄はここだけ ------------------------------------- */
.cta { background:var(--c-accent); color:var(--c-accent-ink);
       border-radius:var(--r-3); padding:var(--s-5); margin:var(--s-6) 0; }
.cta-title { font-size:var(--t-h2); font-weight:900; color:var(--c-accent-ink);
             line-height:var(--lh-head); margin-bottom:var(--s-2); }
.cta-body { font-size:var(--t-small); color:var(--c-accent-ink);
            line-height:1.8; margin-bottom:var(--s-4); opacity:.85; }
.cta-btn { display:inline-block; padding:var(--s-3) var(--s-6);
           font-size:var(--t-small); font-weight:700;
           background:var(--c-ink); color:var(--c-ground-ink) !important;
           border-radius:var(--r-1); text-decoration:none !important; }
.cta-btn:hover { background:var(--c-body); }
.cta-sticky { display:none; }

/* ---- フォーム ----------------------------------------------- */
.inq-form { max-width:38rem; }
.inq-label { display:block; font-size:var(--t-label); font-weight:700;
             letter-spacing:.1em; text-transform:uppercase; color:var(--c-mute);
             margin-bottom:var(--s-4); }
.inq-label input, .inq-label textarea {
  display:block; width:100%; margin-top:var(--s-2); padding:var(--s-3);
  font-size:var(--t-body); font-family:inherit; line-height:1.7;
  border:var(--bd); border-radius:var(--r-1);
  background:var(--c-paper); color:var(--c-body);
}
.inq-label input:focus, .inq-label textarea:focus {
  outline:2px solid var(--c-ink); outline-offset:-2px; border-color:var(--c-ink); }
.req { color:var(--c-error); margin-left:var(--s-1); }
.inq-err { color:var(--c-error); font-size:var(--t-small); font-weight:700;
           margin:calc(var(--s-4) * -1) 0 var(--s-4); }
.inq-consent { font-size:var(--t-small); color:var(--c-mute); line-height:1.8;
               margin:var(--s-3) 0 var(--s-5); }
.inq-context { background:var(--c-surface); border-radius:var(--r-3);
               padding:var(--s-3) var(--s-4); font-size:var(--t-small);
               margin-bottom:var(--s-5); }
.inq-submit { padding:var(--s-3) var(--s-7); font-size:var(--t-h3); font-weight:900;
              font-family:inherit; background:var(--c-accent); color:var(--c-accent-ink);
              border:0; border-radius:var(--r-1); cursor:pointer; }
.inq-submit:hover { filter:brightness(.94); }
.inq-submit:focus-visible { outline:2px solid var(--c-ink); outline-offset:2px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- ポリシー ----------------------------------------------- */
.policy h3 { font-size:var(--t-h3); font-weight:900; color:var(--c-ink);
             margin:var(--s-6) 0 var(--s-3); letter-spacing:var(--ls-head); }
.policy p, .policy li { font-size:var(--t-small); color:var(--c-body); line-height:1.9; }
.policy ul { margin:var(--s-2) 0 var(--s-2) var(--s-5); }
.policy-date { font-family:var(--f-num); font-size:var(--t-label);
               color:var(--c-mute); margin-top:var(--s-7); }
.operator-lead { margin-bottom:var(--s-5); }
.operator-note { font-size:var(--t-small); color:var(--c-body); line-height:1.9;
                 margin-top:var(--s-3); max-width:66ch; }

.no-results, .empty { color:var(--c-mute); text-align:center;
                      padding:var(--s-8) 0; font-size:var(--t-small); }

/* ---- フッター：黒ベタ --------------------------------------- */
.site-footer { margin-top:auto; background:var(--c-ground); color:var(--c-ground-ink);
               font-size:var(--t-small); text-align:left; padding:var(--s-6) 0; }
.site-footer .container { display:grid; gap:var(--s-3); }
.site-footer a { color:var(--c-ground-ink); text-decoration-color:var(--c-accent); }
.footer-disclaimer { color:var(--c-ground-mute); font-size:var(--t-label);
                     line-height:1.8; max-width:70ch; margin:0; }
.footer-links { font-size:var(--t-label); font-weight:700; letter-spacing:.06em; }
.footer-mark { font-family:var(--f-disp); font-size:var(--t-label); font-weight:700;
               letter-spacing:var(--ls-label); text-transform:uppercase;
               color:var(--c-ground-mute); }

/* ---- レスポンシブ ------------------------------------------- */
@media (max-width:768px) {
  .nav-inner { padding:var(--s-3) var(--s-4); }
  .container, .wrap { padding:0 var(--s-4); }
  .search-hero h1 { font-size:var(--t-h1); }
  .fl { flex:1 1 100%; }
  .fl select { max-width:none; width:100%; }
  .card { padding:var(--s-4); }
  .card-head { flex-direction:column; gap:var(--s-2); }
  .card-facts { gap:var(--s-2) var(--s-5); }
  .detail-card { padding:var(--s-5) var(--s-4); }
  .keyfacts { grid-template-columns:1fr; gap:var(--s-4); }
  .kf-amount { font-size:var(--t-display); }
  .detail-table th { width:auto; display:block; border-bottom:0; padding-bottom:0; }
  .detail-table td { display:block; padding-top:var(--s-1); }
  .cta-sticky {
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:var(--c-accent); padding:var(--s-3) 5.5rem var(--s-3) var(--s-4);
    box-shadow:var(--sh-overlay);
  }
  .cta-sticky a { display:block; text-align:center; padding:var(--s-3);
                  background:var(--c-ink); color:var(--c-ground-ink) !important;
                  border-radius:var(--r-1); font-weight:700;
                  font-size:var(--t-small); text-decoration:none !important; }
  body.has-sticky-cta main { padding-bottom:5.5rem; }
}

/* ============================================================
   解説記事
   ============================================================ */
.page-head { margin-bottom:var(--s-6); display:grid; gap:var(--s-2); }
.page-head h1 { font-size:2rem; font-weight:900; color:var(--c-ink);
                letter-spacing:var(--ls-head); line-height:var(--lh-head);
                margin:0; text-wrap:balance; }
.page-desc { font-size:var(--t-small); color:var(--c-mute); max-width:66ch;
             line-height:1.9; margin:0; }

/* 記事一覧のカテゴリ。選択中だけ黒ベタ（原典のタブの扱い） */
.col-filters { display:flex; flex-wrap:wrap; gap:var(--s-2);
               padding-bottom:var(--s-5); margin-bottom:var(--s-5);
               border-bottom:var(--rule-dot); }
.col-filter { font-size:var(--t-label); font-weight:700; letter-spacing:.06em;
              text-decoration:none !important; color:var(--c-body);
              border:var(--bd); border-radius:var(--r-1);
              padding:3px var(--s-3); line-height:1.7; white-space:nowrap; }
.col-filter:hover { border-color:var(--c-ink); color:var(--c-ink); }
.col-filter.is-on { background:var(--c-ink); color:var(--c-ground-ink); border-color:var(--c-ink); }

.col-list { display:grid; gap:var(--s-5); }
.col-item { display:grid; gap:var(--s-2); padding-bottom:var(--s-5);
            border-bottom:var(--rule-dot); }
.col-item:last-child { border-bottom:0; padding-bottom:0; }
.col-item-meta { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.col-date { font-family:var(--f-num); font-variant-numeric:tabular-nums;
            font-size:var(--t-label); color:var(--c-mute); letter-spacing:.04em; }
.col-item-title { font-size:var(--t-h2); font-weight:900; line-height:var(--lh-head);
                  letter-spacing:var(--ls-head); margin:0; text-wrap:balance; }
.col-item-title a { color:var(--c-ink); text-decoration:none; }
.col-item-title a:hover { text-decoration:underline; text-decoration-color:var(--c-accent);
                          text-decoration-thickness:2px; text-underline-offset:3px; }
.col-item-sum { font-size:var(--t-small); color:var(--c-body); line-height:1.8;
                max-width:72ch; margin:0; }

/* 記事本体。和文の読み物なので幅は詰める */
.article { max-width:42rem; }
.article-head { margin-bottom:var(--s-6); padding-bottom:var(--s-5);
                border-bottom:2px solid var(--c-ink); display:grid; gap:var(--s-3); }
.article-head h1 { font-size:1.75rem; font-weight:900; color:var(--c-ink);
                   line-height:var(--lh-head); letter-spacing:var(--ls-head);
                   margin:0; text-wrap:balance; }
.article-sum { font-size:var(--t-small); color:var(--c-mute); line-height:1.9; margin:0; }
.article-meta { display:flex; flex-wrap:wrap; gap:var(--s-4);
                font-family:var(--f-num); font-size:var(--t-label);
                color:var(--c-mute); letter-spacing:.04em; }

/* カバー画像 */
.article-cover { margin:0 0 var(--s-6); display:grid; gap:var(--s-2); }
.article-cover img { width:100%; max-width:100%; height:auto; display:block;
                     border-radius:var(--r-3); }
.article-cover figcaption { font-size:var(--t-label); color:var(--c-mute);
                            letter-spacing:.04em; }

.article-body { font-size:var(--t-body); color:var(--c-body); line-height:var(--lh-body); }
.article-body > * + * { margin-top:var(--s-4); }
.article-body h2 { display:block; font-size:var(--t-h2); font-weight:900; color:var(--c-ink);
                   letter-spacing:var(--ls-head); line-height:var(--lh-head);
                   margin-top:var(--s-7); padding-bottom:var(--s-2);
                   border-bottom:2px solid var(--c-ink); }
.article-body h3 { font-size:var(--t-h3); font-weight:900; color:var(--c-ink);
                   margin-top:var(--s-6); letter-spacing:var(--ls-head); }
.article-body p { margin:0; }
.article-body ul, .article-body ol { margin-left:1.4em; }
.article-body li { margin-bottom:var(--s-2); line-height:var(--lh-body); }
.article-body strong { font-weight:700; color:var(--c-ink); }
.article-body a { text-decoration-color:var(--c-accent); }
.article-body blockquote { border-left:3px solid var(--c-ink); padding:var(--s-2) 0 var(--s-2) var(--s-4);
                           color:var(--c-body); font-size:var(--t-small); }
.article-body .table-wrap, .article-body table { display:block; overflow-x:auto; }
.article-body table { width:100%; border-collapse:collapse; font-size:var(--t-small); }
.article-body th { text-align:left; color:var(--c-mute); font-weight:700;
                   font-size:var(--t-label); letter-spacing:.08em;
                   padding:var(--s-2) var(--s-3); border-bottom:var(--bd-ink); white-space:nowrap; }
.article-body td { padding:var(--s-3); border-bottom:var(--rule-dot); }
.article-body .code-block { background:var(--c-surface); border-radius:var(--r-3);
                            padding:var(--s-4); overflow-x:auto; font-size:var(--t-small); }

.article-disclaimer { margin-top:var(--s-7); background:var(--c-surface);
                      border-radius:var(--r-3); padding:var(--s-4);
                      font-size:var(--t-label); color:var(--c-mute); line-height:1.9; }
.article-related { margin-top:var(--s-7); border-top:var(--rule-dot); padding-top:var(--s-5); }
.article-related h2 { font-size:var(--t-h3); font-weight:900; color:var(--c-ink);
                      margin-bottom:var(--s-3); }
.article-related ul { list-style:none; display:grid; gap:var(--s-3); }
.article-related li { font-size:var(--t-small); line-height:1.7; }

@media (max-width:768px) {
  .page-head h1 { font-size:1.5rem; }
  .article-head h1 { font-size:1.375rem; }
  .article { max-width:none; }
}