/* Time Capsule — コンポーネント層。トークンは tokens.css 側に置いてある。 */

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}

/* ---------- ヘッダ ---------- */
.site-head{border-bottom:3px solid var(--ink);background:var(--paper-raised)}
.bar{background:var(--ink)}
.bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cats{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.cats li{list-style:none}
.cats a{display:inline-block;padding:.7rem .85rem;color:var(--paper);font-size:var(--step--1);
  font-weight:600;text-decoration:none;border-bottom:3px solid transparent;transition:background .15s,border-color .15s}
.cats a:hover,.cats .current-cat a{background:rgba(255,255,255,.08);border-bottom-color:var(--accent);color:#fff}
.bar-tools{display:flex;align-items:center;gap:.5rem;flex-shrink:0;padding-right:.25rem}
.random{font-size:var(--step--1);font-weight:700;background:var(--accent);color:#fff;
  padding:.4rem .7rem;border-radius:var(--radius);text-decoration:none;white-space:nowrap}
.random:hover{background:var(--accent-deep);color:#fff}
.theme-toggle{background:none;border:1px solid rgba(255,255,255,.25);color:var(--paper);
  border-radius:var(--radius);cursor:pointer;padding:.3rem .5rem;font-size:1rem;line-height:1}

.brand-row{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.4rem 0 1.1rem}
.brand{text-decoration:none;color:var(--ink);display:flex;align-items:baseline;gap:.4rem}
.brand-mark{font-family:var(--font-display);font-size:var(--step-3);font-weight:700;letter-spacing:-.02em;line-height:1}
.brand-accent{color:var(--accent)}
.brand-sub{font-family:var(--font-body);font-size:var(--step--1);font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ink-faint)}
.tagline{margin:0;color:var(--ink-faint);font-size:var(--step--1);font-style:italic}
@media(max-width:720px){.tagline{display:none}.cats a{padding:.6rem;font-size:.85rem}}

/* ---------- セクション見出し ---------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  background:var(--sc,var(--accent));color:#fff;padding:.5rem .8rem;border-radius:var(--radius);margin-bottom:1.1rem}
.sec-head h2{margin:0;font-family:var(--font-body);font-size:var(--step--1);font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:#fff}
.sec-head a{color:#fff;text-decoration:none}

/* ---------- カード ---------- */
.card{display:grid;gap:.75rem}
.card a{text-decoration:none}
.card .thumb{display:block;overflow:hidden;border-radius:var(--radius);background:var(--paper-sunk)}
.card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s ease;display:block}
.card:hover .thumb img{transform:scale(1.03)}
.card .body{display:grid;gap:.3rem}
.card h3{margin:0;font-size:var(--step-1);line-height:1.25}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent)}
.card .meta .by{font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}
.card.lead h3{font-size:var(--step-3)}
.card.lead .thumb img{aspect-ratio:3/2}
.card.compact{grid-template-columns:92px 1fr;align-items:start;gap:.7rem}
.card.compact .thumb img{aspect-ratio:1/1}
.card.compact h3{font-size:1rem;line-height:1.3}
.card.compact .meta{font-size:.78rem}

/* ---------- 一覧レイアウト ---------- */
.lead-row{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;padding:2rem 0;border-bottom:1px solid var(--rule)}
.lead-side{display:grid;gap:1.6rem;align-content:start}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2rem 0}
.col{min-width:0}
.stack-compact{display:grid;gap:1rem}
.stack-cards{display:grid;gap:1.5rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:980px){.lead-row,.tri{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}

/* ---------- 記事 ---------- */
.crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.9rem 0;
  font-size:var(--step--1);color:var(--ink-faint);border-bottom:1px solid var(--rule)}
.crumb a{text-decoration:none}
.crumb-tools{margin-left:auto;display:flex;gap:.9rem}
.post-head{padding:2rem 0 1.2rem;max-width:820px}
.kicker{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .7rem;
  font-size:var(--step--1);color:var(--ink-faint)}
.post-head h1{font-size:var(--step-4);margin:0 0 .5rem;letter-spacing:-.02em;text-wrap:balance}
.dek{margin:0 0 1rem;font-size:var(--step-1);color:var(--ink-soft);line-height:1.5}
.byline{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:0;font-size:var(--step--1);
  color:var(--ink-soft);padding-top:.9rem;border-top:1px solid var(--rule)}
.byline a{font-weight:600}
.checked{color:var(--ink-faint)}
.noads-note{margin:1rem 0 0;font-size:.8rem;color:var(--ink-faint);background:var(--paper-sunk);
  padding:.5rem .7rem;border-radius:var(--radius);display:inline-block}
/* ヒーロー画像。
   .wrap(最大1280px)のままだと本文608pxに対して2倍以上の幅になり、
   画面をほぼ占有してしまう。さらに原寸1200pxを1280pxで描画するため
   拡大表示になり輪郭が甘くなっていた。
   記事見出し欄(.post-head)と同じ820pxに揃え、縮小方向に倒して解像感を保つ。 */
.hero{margin:0 auto 2rem;max-width:820px}
.hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);display:block}
.hero figcaption{margin-top:.5rem;font-size:.78rem;color:var(--ink-faint)}
.post-body{padding-bottom:2rem}
.intro{font-size:var(--step-1);line-height:1.6;color:var(--ink-soft)}
.intro p{margin:0 0 1.1rem}
.intro p:first-child::first-letter{float:left;font-family:var(--font-display);font-size:3.4em;
  line-height:.82;padding:.06em .08em 0 0;color:var(--accent);font-weight:700}

/* ---------- 項目（数字バッジ） ---------- */
.entry{margin:0 0 2.75rem;padding-top:1.75rem;border-top:1px solid var(--rule);scroll-margin-top:1.5rem}
.entry-head{display:flex;gap:1rem;align-items:center;margin-bottom:1.1rem}
.badge{flex-shrink:0;display:grid;place-items:center;width:60px;height:60px;background:var(--accent);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:36px;line-height:1;
  font-variant-numeric:tabular-nums;border-radius:2px}
@media(min-width:768px){.badge{width:70px;height:70px;font-size:48px}}
.entry h2{font-size:var(--step-2);margin:0;line-height:1.15;flex:1;min-width:0;text-wrap:balance}
.entry-body p{margin:0 0 1rem}
.entry-body figure{margin:0 0 1.1rem}
.entry-body img{width:100%;height:auto;border-radius:var(--radius);display:block}
.entry-body figcaption{margin-top:.45rem;font-size:.78rem;color:var(--ink-faint);line-height:1.45}
.entry-body em{color:var(--ink-faint);font-size:.85rem}
@media(max-width:560px){.entry h2{font-size:var(--step-1)}}

/* ---------- ニュースレター ---------- */
.nl{margin:2.5rem 0;padding:1.6rem;border-radius:var(--radius);background:var(--accent-wash);border:1px solid var(--rule)}
.nl h2{margin:0 0 .35rem;font-size:var(--step-2)}
.nl p{margin:0 0 1rem;color:var(--ink-soft);font-size:var(--step--1)}
.nl-form{display:flex;gap:.5rem;flex-wrap:wrap}
.nl-form input{flex:1 1 14rem;padding:.7rem .8rem;font:inherit;font-size:var(--step--1);
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-raised);color:var(--ink)}
.nl-form button{padding:.7rem 1.2rem;font:inherit;font-weight:700;font-size:var(--step--1);
  background:var(--accent);color:#fff;border:0;border-radius:var(--radius);cursor:pointer}
.nl-form button:hover{background:var(--accent-deep)}
.nl .fine{margin:.7rem 0 0!important;font-size:.75rem!important;color:var(--ink-faint)!important}

/* ---------- フッタ ---------- */
.site-foot{margin-top:4rem;background:var(--ink);color:var(--paper);padding:2.5rem 0 1.5rem}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:800px){.site-foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.site-foot .cols{grid-template-columns:1fr}}
.f-brand{font-family:var(--font-display);font-size:var(--step-2);margin:0 0 .4rem;font-weight:700}
.f-brand span{color:var(--accent)}
.f-blurb{margin:0;color:rgba(255,255,255,.62);font-size:var(--step--1);max-width:34ch}
.site-foot h2{font-family:var(--font-body);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.12em;color:rgba(255,255,255,.5);margin:0 0 .6rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li+li{margin-top:.35rem}
.site-foot a{color:rgba(255,255,255,.85);text-decoration:none;font-size:var(--step--1)}
.site-foot a:hover{color:var(--accent);text-decoration:underline}
.site-foot .fine{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.45);font-size:.8rem}
.site-foot .fine p{margin:.2rem 0}

/* ---------- ページ・アーカイブ ---------- */
.page-head{padding:2.5rem 0 1.5rem;border-bottom:4px solid var(--accent);margin-bottom:2rem}
.page-head h1{font-size:var(--step-4);margin:0 0 .3rem}
.page-head p{margin:0;color:var(--ink-soft);font-size:var(--step-1)}
.page-body{padding-bottom:3rem}
.page-body h2{font-size:var(--step-2);margin-top:2rem}
.page-body p{margin:0 0 1rem}
.pagination{display:flex;gap:.4rem;flex-wrap:wrap;padding:2rem 0;justify-content:center}
.pagination .page-numbers{padding:.5rem .8rem;border:1px solid var(--rule);border-radius:var(--radius);
  text-decoration:none;color:var(--ink)}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- 問い合わせフォーム (Contact Form 7) ----------
   CF7は素のinput/selectをそのまま出すため、放置するとブラウザ既定の見た目になり
   サイトのデザインから浮く。トークンに合わせて作り直す。 */
.wpcf7 { margin: 1.5rem 0 2.5rem; }
.wpcf7-form p { margin: 0 0 1.1rem; }

.wpcf7-form label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .7rem .8rem;
  font: inherit;
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.wpcf7-form textarea { min-height: 11rem; resize: vertical; line-height: 1.6; }

/* selectは矢印が消えるため自前で描く */
.wpcf7-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.wpcf7-form :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* 同意チェックボックス。本文と同じ大きさだと押しにくいので拡大する */
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.wpcf7-acceptance input[type="checkbox"] {
  width: 1.1rem; height: 1.1rem;
  margin: .15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.wpcf7-form input[type="submit"] {
  display: inline-block;
  padding: .8rem 1.6rem;
  font: inherit;
  font-size: var(--step-0);
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.wpcf7-form input[type="submit"]:hover { background: var(--accent-deep); }
.wpcf7-form input[type="submit"]:disabled { opacity: .55; cursor: progress; }

/* 送信結果。既定は細い枠だけで見落としやすいので色で区別する */
.wpcf7-response-output {
  margin: 1.2rem 0 0 !important;
  padding: .85rem 1rem !important;
  border-width: 1px !important;
  border-radius: var(--radius);
  font-size: var(--step--1);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--cat-home) !important;
  background: color-mix(in srgb, var(--cat-home) 10%, transparent);
  color: var(--ink);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: var(--accent) !important;
  background: var(--accent-wash);
  color: var(--ink);
}

/* 項目単位のエラー */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-deep);
}
.wpcf7-form :is(input, select, textarea).wpcf7-not-valid { border-color: var(--accent); }

.wpcf7-spinner { margin-left: .6rem; }

/* ---------- 記事の三カラムレイアウト ----------
   画面幅に応じて段階的に増やす。狭い画面に無理に押し込むと本文が読めなくなるため、
   幅が足りない時はレールとサイドバーを丸ごと畳む。
     〜1099px : 本文のみ
     1100px〜 : 本文 + 右サイドバー（探索・収益・回遊）
     1500px〜 : 左レール（ランキング・カテゴリ）を追加
   DOM順は 本文 → レール → サイドバー。畳まれる画面で本文を先に読ませるため、
   左右の配置は grid-column で入れ替える。 */
.layout{
  width:min(100% - 2rem,1560px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2.5rem;
  align-items:start;
}
.rail,.sidebar{display:none}

@media(min-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr) 320px}
  .sidebar{display:block}
}
@media(min-width:1500px){
  .layout{grid-template-columns:260px minmax(0,1fr) 320px}
  .rail{display:block;grid-column:1;grid-row:1}
  .layout>.post,.layout>.main{grid-column:2;grid-row:1}
  .sidebar{grid-column:3;grid-row:1}

  /* レールは本文より遥かに短い（実測 480px 対 11,696px）。
     追従させないとスクロール開始直後に左が空白になる。
     ビューポートより短いので sticky が素直に効く。
     サイドバーは1,400px超でビューポートに収まらないため追従させない。
     収まらない要素を sticky にすると下部が永久に見えなくなる。 */
  .rail{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow-y:auto}
  /* 追従要素内のスクロールバーは常時表示だと目障りなので細くする */
  .rail{scrollbar-width:thin}
}

/* ---------- レール/サイドバー共通 ---------- */
.side-block{margin-bottom:2rem}
.side-title{
  font-family:var(--font-body);font-size:.8rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);
  margin:0 0 .8rem;padding-bottom:.5rem;border-bottom:2px solid var(--ink)
}
.side-list{list-style:none;margin:0;padding:0}
.side-list li+li{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--rule)}
.side-list a{color:var(--ink);text-decoration:none;font-size:var(--step--1);line-height:1.4}
.side-list a:hover{color:var(--accent)}

/* 順位つき。数字を主役にして一覧性を上げる。 */
.side-ranked li{display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;align-items:start}
.side-rank{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.3;
  color:var(--accent);font-variant-numeric:tabular-nums
}

/* サムネつき */
.side-item{display:grid;grid-template-columns:56px 1fr;gap:.6rem;align-items:start}
.side-thumb img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius);display:block}
.side-text{min-width:0}

.side-cats li{margin:0;padding:0;border:0}
.side-cats li+li{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--rule)}

/* 検索 */
.side-searchform{display:flex;gap:.4rem}
.side-searchform input{
  flex:1 1 auto;min-width:0;padding:.55rem .65rem;font:inherit;font-size:var(--step--1);
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper-raised);color:var(--ink)
}
.side-searchform input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.side-searchform button{
  padding:.55rem .9rem;font:inherit;font-weight:700;font-size:var(--step--1);
  background:var(--accent);color:#fff;border:0;border-radius:var(--radius);cursor:pointer
}
.side-searchform button:hover{background:var(--accent-deep)}

/* 追従するのは上部の1枠のみ。複数追従させると読書の妨げになる。 */
@media(min-width:1100px){
  .side-ad-sticky{position:sticky;top:1.5rem}
}
.side-ad .ad-slot{margin:0 auto}

/* ---------- 本文中の図版 ----------
   生成側は images/pipeline.py::render_figure() が .tc-figure を、
   ingest.py は .wp-block-image を出す。テーマCSSはどちらの規則も持っておらず、
   実測で以下が起きていた:
     - 未読込の画像が 608x0 になり、読み込み時に本文が押し下げられる（CLS）
     - キャプションが本文と同じ21pxで表示され、図版の従属物に見えない
   aspect-ratio で高さを先に確保すれば、画像が届く前から場所が決まる。 */
.entry-body .tc-figure,
.entry-body .wp-block-image,
.entry-body figure{margin:0 0 1.4rem}

.entry-body .tc-figure img,
.entry-body .wp-block-image img,
.entry-body figure img{
  width:100%;
  aspect-ratio:16/9;      /* 読込前に高さを確保しCLSを防ぐ */
  object-fit:cover;       /* 比率が違う原画でも歪ませない */
  border-radius:var(--radius);
  background:var(--paper-sunk);
  display:block
}

/* キャプションは帰属表記を兼ねる。CC BY系では法的に必要な情報なので
   小さくはしても消さない。本文と同じ大きさだと図版の一部に見えない。 */
.entry-body .tc-figure figcaption,
.entry-body .wp-block-image figcaption,
.entry-body figure figcaption{
  margin-top:.45rem;
  font-size:.78rem;
  line-height:1.45;
  color:var(--ink-faint)
}
.entry-body figcaption a{color:var(--ink-faint);text-decoration:underline}
.entry-body figcaption a:hover{color:var(--accent)}