/* =====================================================================
   THE SIGNAL — shared site stylesheet
   全ページ共有の
     (a) デザイントークン :root（値の単一定義ブロック。各所は var() で参照）
     (b) base reset
     (c) ヘッダー / カテゴリ帯 / フッター
     (d) 記事ページのレイアウトとコンポーネント
   依存ゼロ（外部 CDN / Web フォントを読み込まない）。
   ===================================================================== */

:root{
  /* ---- surface（2段のみ） ---- */
  --paper:#16130F;        /* near-black main surface */
  --paper-2:#211D18;      /* surface 2段目：カード / sidebar / hover 上限 */

  /* ---- ink ---- */
  --ink:#F2EDE4;          /* off-white primary / 対 paper ≈ 11.8:1 */
  --ink-soft:#9E958A;     /* 本文準次（リード / muted 段落）専用。opacity を重ねない */

  /* ---- meta（メタ文字専用。opacity を使わず色だけで管理） ----
     #B7AEA1 対 paper #16130F = 8.45:1 ／ 対 paper-2 #211D18 = 7.64:1 */
  --meta:#B7AEA1;

  /* ---- line ---- */
  --line:#3A342C;         /* default border */
  --line-strong:#F2EDE4;  /* strong border = --ink */

  /* ---- accent（single = slate teal） ---- */
  --accent:#5FA8A8;       /* 対 paper ≈ 6.9:1 */
  --accent-tint:#14211F;  /* dark teal tint */

  /* ---- spacing tokens ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s20:80px;

  /* ---- 固定ヘッダー高さ ---- */
  --header-h:56px;

  /* ---- type ---- */
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","HG Mincho E",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif;
  /* type scale — 6 sizes: 13 / 16 / 18 / 22 / 30 / 46 */
  --fz-meta:13px; --fz-body:16px; --fz-lead:18px; --fz-h3:22px; --fz-h2:30px; --fz-display:46px;

  /* motion（状態変化のみ。アニメーション定義・blur・段階遅延は使わない） */
  --t:color 140ms ease-out, border-color 140ms ease-out, background-color 140ms ease-out;
}

/* ====================================================================
   BASE RESET
   ==================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; scroll-padding-top:var(--header-h); }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fz-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--header-h);
}
a{color:inherit;text-decoration:none;}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s8);}

/* ====================================================================
   FIXED HEADER — 常時固定・不透明 surface（backdrop blur は使わない）
   ==================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 -2px 0 var(--accent-tint);   /* teal 署名罫 */
}
.site-header .wrap{
  display:flex;align-items:center;gap:var(--s6);
  min-height:54px;max-height:56px;
}
.site-header .brand{
  font-family:var(--serif);font-size:var(--fz-h3);font-weight:700;
  letter-spacing:.1em;flex:0 0 auto;line-height:1;
  display:inline-flex;align-items:center;min-height:44px;
}
.site-header .brand .mark{color:var(--accent);}

/* カテゴリ帯 — 遷移先の実体が無いためリンクではなくラベル表示 */
.site-cats{
  display:flex;gap:var(--s6);flex:1 1 auto;overflow-x:auto;
  scrollbar-width:none;align-items:center;
}
.site-cats::-webkit-scrollbar{display:none;}
.site-cats span{
  font-size:var(--fz-meta);font-weight:600;color:var(--meta);
  white-space:nowrap;flex:0 0 auto;
  min-height:44px;display:inline-flex;align-items:center;
}
.site-cats span[aria-current]{
  color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--accent);
}

/* ====================================================================
   FOOTER
   ==================================================================== */
.site-footer{margin-top:var(--s16);border-top:2px solid var(--line-strong);padding:var(--s12) 0 var(--s16);}
.site-footer .foot-grid{display:grid;grid-template-columns:1.6fr 1.4fr;gap:var(--s12);}
.site-footer .flogo{font-family:var(--serif);font-size:var(--fz-h3);font-weight:700;letter-spacing:.14em;margin-bottom:var(--s4);}
.site-footer .flogo .mark{color:var(--accent);}
.site-footer p{font-size:var(--fz-meta);line-height:1.8;color:var(--meta);max-width:34em;}
.site-footer h5{font-size:var(--fz-meta);font-weight:700;letter-spacing:.04em;margin-bottom:var(--s4);color:var(--ink);}
.site-footer ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s8);}
.site-footer ul li{font-size:var(--fz-meta);padding:5px 0;color:var(--meta);}
.site-footer .copyright{margin-top:var(--s12);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--fz-meta);color:var(--meta);line-height:1.8;}

/* ====================================================================
   ARTICLE PAGE
   記事ページはこのセクションだけで完結する。各記事 HTML に <style> を書かない。
   ==================================================================== */

/* topbar（共有ヘッダー直下のリード帯） */
.topbar{border-bottom:1px solid var(--line);font-size:var(--fz-meta);color:var(--meta);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:var(--s4);}
.topbar .tagline{font-family:var(--serif);letter-spacing:.02em;}

/* 読了プログレスバー（site.js が幅を更新。要素が無ければ何も起きない） */
.progress-track{position:fixed;left:0;right:0;top:var(--header-h);height:2px;background:transparent;z-index:51;}
.progress-bar{height:100%;width:0;background:var(--accent);transition:width 80ms linear;}

/* レイアウト: 左=導入部/本文、右=記事情報（2行ぶち抜き） */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 296px;column-gap:var(--s16);row-gap:0;padding:var(--s12) 0 var(--s16);align-items:start;}
.article-head{grid-column:1;grid-row:1;max-width:40em;}
.article-body{grid-column:1;grid-row:2;max-width:40em;}
.article-grid > aside{grid-column:2;grid-row:1 / span 2;}

.breadcrumb{font-size:var(--fz-meta);color:var(--meta);margin-bottom:var(--s6);}
.breadcrumb a{transition:var(--t);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{margin:0 8px;color:var(--line-strong);}

.a-kicker{display:block;font-size:var(--fz-meta);font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:var(--s4);}
h1.a-title{font-family:var(--serif);font-size:var(--fz-display);line-height:1.24;font-weight:700;letter-spacing:.01em;margin-bottom:var(--s6);}
/* standfirst（原稿の第1段落）。H1 と役割差をつけるため色ミュート + weight400 */
.a-lead{font-size:var(--fz-lead);line-height:1.9;color:var(--ink-soft);font-weight:400;margin-bottom:var(--s8);max-width:36em;}

/* 鮮度の注記（front matter の as_of がある記事のみ） */
.freshness{font-size:var(--fz-meta);color:var(--meta);font-family:var(--serif);letter-spacing:.02em;margin-bottom:var(--s6);}
.freshness .as-of{color:var(--accent);font-weight:700;}

.byline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:var(--fz-meta);color:var(--meta);padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--s8);}
.byline .pub{color:var(--ink);font-weight:600;}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--accent);}
.byline .ts{color:var(--meta);letter-spacing:.02em;}

/* 本文 */
.article-body h2{font-family:var(--serif);font-size:var(--fz-h3);font-weight:700;line-height:1.4;margin:var(--s12) 0 var(--s4);letter-spacing:.02em;}
.article-body p{font-size:var(--fz-lead);line-height:1.95;margin-bottom:var(--s6);color:var(--ink);}
.article-body strong{font-weight:700;}
.article-body .em{color:var(--accent);font-weight:700;}
.article-body ul,.article-body ol{margin:0 0 var(--s6) var(--s6);}
.article-body li{font-size:var(--fz-lead);line-height:1.8;margin-bottom:var(--s2);}
.article-body li::marker{color:var(--accent);}
.article-body a{color:var(--accent);transition:var(--t);border-bottom:1px solid var(--line);}
.article-body a:hover{color:var(--ink);border-bottom-color:var(--ink);}
/* ドロップキャップ: 本文1段落目のみ */
.article-body p.dropcap::first-letter{font-family:var(--serif);font-weight:700;float:left;font-size:3em;line-height:.86;padding:6px var(--s3) 0 0;color:var(--accent);}

/* 数値の並び（本文に出てくる数値のみを使う。任意） */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin:var(--s8) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s6) 0;}
.stat-row .st .n{font-family:var(--serif);font-size:var(--fz-h2);font-weight:700;color:var(--accent);line-height:1.1;}
.stat-row .st .l{font-size:var(--fz-meta);color:var(--meta);margin-top:6px;line-height:1.5;}

/* プルクオート（本文からの逐語引用のみ） */
.pullquote{font-family:var(--serif);font-size:var(--fz-h2);line-height:1.45;font-weight:700;color:var(--ink);max-width:30em;margin:var(--s12) 0;padding-left:var(--s6);}
.pullquote .q-rule{display:block;width:48px;height:3px;background:var(--accent);margin-bottom:var(--s4);}
.pullquote .q-by{display:block;font-family:var(--sans);font-size:var(--fz-meta);font-weight:600;color:var(--meta);letter-spacing:.04em;margin-top:var(--s4);}

/* なぜ重要か（tint 地 + 上下 teal 罫。border-left は使わない） */
.why-box{background:var(--accent-tint);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);padding:var(--s8);margin:var(--s12) 0;}
.why-box .label{font-size:var(--fz-meta);font-weight:700;letter-spacing:.08em;color:var(--accent);margin-bottom:var(--s3);}
.why-box h3{font-family:var(--serif);font-size:var(--fz-h3);font-weight:700;margin-bottom:var(--s4);line-height:1.4;}
.why-box p{font-size:var(--fz-body);line-height:1.9;color:var(--ink);margin-bottom:var(--s4);}
.why-box p:last-child{margin-bottom:0;}

.back-link{margin-top:var(--s12);}
.back-link a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:2px;transition:var(--t);}
.back-link a:hover{color:var(--ink);border-bottom-color:var(--ink);}

/* sidebar — 記事情報 */
aside .box{border:1px solid var(--line);padding:var(--s6);margin-bottom:var(--s8);}
aside h4{font-family:var(--serif);font-size:var(--fz-lead);margin-bottom:var(--s4);letter-spacing:.03em;}
.meta-list{margin:0;}
.meta-list dt{font-size:var(--fz-meta);color:var(--meta);letter-spacing:.04em;padding-top:var(--s3);border-top:1px solid var(--line);}
.meta-list dt:first-of-type{padding-top:0;border-top:none;}
.meta-list dd{font-size:var(--fz-body);line-height:1.7;color:var(--ink);margin:2px 0 var(--s3);word-break:break-word;}
.meta-list dd:last-child{margin-bottom:0;}
.meta-list a{color:var(--accent);transition:var(--t);word-break:break-all;}
.meta-list a:hover{color:var(--ink);text-decoration:underline;}
.meta-list .primary-tag{display:inline-block;font-size:var(--fz-meta);font-weight:700;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent);padding:1px 6px;margin-bottom:var(--s2);}

/* ====================================================================
   RESPONSIVE — 3 breakpoints（1280 / 920 / 600）
   ==================================================================== */

/* TABLET (~920px): 1 カラム化。記事情報は本文の下へ */
@media (max-width:920px){
  .article-grid{display:flex;flex-direction:column;gap:var(--s8);}
  .article-head{max-width:none;order:0;}
  .article-body{max-width:none;order:1;}
  .article-grid > aside{order:2;}
  h1.a-title{font-size:var(--fz-h2);}
  .pullquote{font-size:var(--fz-h3);}
}

/* MOBILE (~600px) */
@media (max-width:600px){
  .wrap{padding:0 var(--s6);}
  .site-header .brand{font-size:var(--fz-lead);}
  .a-lead{max-width:none;}
  .stat-row{grid-template-columns:1fr;gap:var(--s4);}
  .why-box{padding:var(--s6);}
  .pullquote{max-width:none;margin:var(--s8) 0;}
  .site-footer .foot-grid{grid-template-columns:1fr;gap:var(--s8);}
}

/* ---- index page ----
   トップページ専用のレイアウトとコンポーネント。既存トークンのみで構成し、
   新しい色・新しい font-size を発明しない。遷移先の実体が無いリンクは置かない。 */

/* masthead — 題字 + 本誌の立場を述べる一文 */
.masthead{padding:var(--s12) 0 var(--s8);border-bottom:1px solid var(--line);}
.masthead .logo{
  font-family:var(--serif);font-size:var(--fz-display);font-weight:700;
  letter-spacing:.16em;line-height:1.1;
}
.masthead .logo .mark{color:var(--accent);}
/* About 一文。teal の短罫（記事ページのプルクオートと同じ署名モチーフ）を上に置く */
.about-line{
  font-family:var(--serif);font-size:var(--fz-lead);line-height:1.9;
  color:var(--ink-soft);max-width:38em;margin-top:var(--s6);
}
.about-line::before{
  content:"";display:block;width:48px;height:3px;
  background:var(--accent);margin-bottom:var(--s4);
}

/* lede — 最新記事を大きく扱う */
.lede{position:relative;padding:var(--s12) 0;border-bottom:1px solid var(--line);}
.lede .cat{
  display:block;font-size:var(--fz-meta);font-weight:700;
  letter-spacing:.06em;color:var(--accent);margin-bottom:var(--s4);
}
.lede h2{
  font-family:var(--serif);font-size:var(--fz-display);line-height:1.2;
  font-weight:700;letter-spacing:.01em;margin-bottom:var(--s6);max-width:22em;
}
.lede h2 a{transition:var(--t);}
.lede .sum{font-size:var(--fz-lead);line-height:1.9;color:var(--ink-soft);max-width:36em;margin-bottom:var(--s4);}
.lede .date{font-size:var(--fz-meta);color:var(--meta);}

/* 一覧の見出し */
.list-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  border-bottom:2px solid var(--line-strong);padding-bottom:var(--s3);
  margin:var(--s16) 0 var(--s8);
}
.list-head h2{font-family:var(--serif);font-size:var(--fz-h3);font-weight:700;letter-spacing:.04em;}
.list-head .meta{font-size:var(--fz-meta);color:var(--meta);white-space:nowrap;}

/* card list — 2 カラム。カードは角丸も影も持たず、細罫で行を分ける */
.card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s16);}
.card{position:relative;padding:var(--s6) 0;border-top:1px solid var(--line);}
.card:nth-child(1),.card:nth-child(2){border-top:none;padding-top:0;}
/* カテゴリは遷移先の実体が無いためラベル表示（リンクにしない） */
.card .cat{
  display:block;font-size:var(--fz-meta);font-weight:700;
  letter-spacing:.06em;color:var(--meta);margin-bottom:var(--s2);
}
.card h3{font-family:var(--serif);font-size:var(--fz-h3);line-height:1.42;font-weight:700;margin-bottom:var(--s3);}
.card h3 a{transition:var(--t);}
.card .sum{font-size:var(--fz-body);line-height:1.8;color:var(--ink-soft);margin-bottom:var(--s3);}
.card .date{font-size:var(--fz-meta);color:var(--meta);}

/* stretched-link — カード全面を見出しアンカーのクリック領域にする。
   hover は teal の色変化のみ（影・浮遊は使わない）。 */
.lede h2 a::after,
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1;}
.lede:hover,.card:hover{cursor:pointer;}
.lede:hover h2 a,
.card:hover h3 a{color:var(--accent);}
.lede h2 a:focus-visible,
.card h3 a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

/* index page — TABLET (~920px) */
@media (max-width:920px){
  .masthead .logo{font-size:var(--fz-h2);}
  .lede h2{font-size:var(--fz-h2);max-width:none;}
  .card-list{column-gap:var(--s12);}
}

/* index page — MOBILE (~600px): 1 カラム */
@media (max-width:600px){
  .masthead{padding:var(--s8) 0 var(--s6);}
  .about-line{max-width:none;}
  .lede{padding:var(--s8) 0;}
  .lede h2{font-size:var(--fz-h3);}
  .lede .sum{max-width:none;}
  .list-head{margin-top:var(--s12);flex-direction:column;align-items:flex-start;gap:6px;}
  .card-list{grid-template-columns:1fr;}
  .card:nth-child(2){border-top:1px solid var(--line);padding-top:var(--s6);}
}