/* ============================================================
 * themes-fable/editorial.css — Enjin テーマ「Editorial」（light / Fable磨き版）
 * enjin-base.css のトークンを上書きして配色/書体を与える（共有スケルトンを着せ替え）。
 * accent は base.css 側で var(--club-color, var(--theme-accent)) に解決される。
 *
 * 意匠コンセプト: 上質な紙にオックスブラッドのインク。大明朝の見出し、
 * 章番号（線画数字＋短いインク罫）、二行ロックのドロップキャップ、
 * 記事末の■（トゥームストーン）、リスト上端の太インク罫——雑誌の組版文法で統一。
 * ============================================================ */
:root{
  /* ---- 紙とインク（わずかに深めた上質紙） ---- */
  --paper:#f8f5ec;
  --paper2:#f0ebde;
  --white:#fdfcf6;
  --card:#fdfcf6;
  --ink:#181310;
  --body:#443d33;
  --mute:#94897b;
  --line:#e3dccd;
  --line2:#d2c9b6;
  /* ---- アクセント家系：club_color が来ても濃淡が自動で追従する ---- */
  --theme-accent:#9a2f2a;
  --accent-d:color-mix(in srgb, var(--accent) 68%, #140b09);
  --accent-l:color-mix(in srgb, var(--accent) 46%, var(--paper));
  /* ---- 書体：大明朝を主役に、メタ情報は端正なサンズ ---- */
  --serif:"Shippori Mincho B1","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
}

/* ============================================================
 * 紙面 — かすかなインクの滲みと、章のカウンター
 * ============================================================ */
body{
  counter-reset:esec;
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 520px at 88% -6%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 62%),
    radial-gradient(820px 480px at -8% 26%, color-mix(in srgb, var(--ink) 3%, transparent), transparent 58%);
}
::selection{background:var(--accent);color:var(--paper)}

/* 余白のドラマ：章と章のあいだを広くとる */
section{padding:clamp(4.2rem,10vw,8.4rem) 0}
.alt{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* 見出しは実在ウェイト(800)＋プロポーショナル詰め（疑似ボールドを排す） */
h1,h2,h3{font-weight:800;font-feature-settings:"palt" 1;letter-spacing:.02em}

/* ============================================================
 * 章番号 — 線画の大数字（01〜）＋短いインク罫。雑誌の扉組み
 * ============================================================ */
h2.sec{font-size:clamp(2.05rem,4.9vw,3.4rem);line-height:1.22;margin-top:.35rem}
h2.sec::before{
  counter-increment:esec;
  content:counter(esec,decimal-leading-zero);
  display:block;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(3.3rem,6.8vw,5.2rem);
  line-height:.92;
  letter-spacing:.08em;
  font-variant-numeric:lining-nums;
  color:color-mix(in srgb, var(--accent) 22%, var(--paper));
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb, var(--accent) 60%, var(--paper));
  margin:0 0 1.15rem;
  padding-bottom:1.05rem;
  background:linear-gradient(var(--ink),var(--ink)) 2px 100% / 2.75rem 1px no-repeat;
}
h2.sec em{font-style:italic;padding-right:.06em}
.rule{display:none}

/* ============================================================
 * 日英ラベル — 極端なトラッキングの小さなキャプション（構造は base のまま）
 * ============================================================ */
.eyebrow{font-size:11px;letter-spacing:.38em;font-weight:600}
.eyebrow i{font-weight:600;letter-spacing:.38em}
.eyebrow i::after{color:color-mix(in srgb, var(--ink) 28%, transparent);margin:0 .45em 0 .3em}

/* ============================================================
 * ナビゲーション — 温かい紙の帯に、細いインクの罫
 * ============================================================ */
nav{background:color-mix(in srgb, var(--paper) 86%, transparent);border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent)}
.brand{font-weight:800;letter-spacing:.05em;font-feature-settings:"palt" 1}
.crest{box-shadow:inset 0 0 0 1px color-mix(in srgb, #fff 38%, transparent);font-weight:700}
.navlinks{font-size:14px;font-weight:500;letter-spacing:.08em}
.navlinks a::after{height:1px;bottom:-.5em;opacity:.65}
.navcta{font-size:12px;letter-spacing:.2em;padding:.8em 1.5em;transition:background .2s,letter-spacing .3s}
.navcta:hover{letter-spacing:.26em}

/* ============================================================
 * ヒーロー — 写真を主役に、静かなメッシュと大明朝
 * ============================================================ */
.hero{padding:clamp(5rem,12vw,9.5rem) 0 clamp(4rem,8vw,6.5rem);border-bottom:1px solid var(--line)}
.hero-photo{filter:brightness(1.02) saturate(.84) contrast(1.04) sepia(.06)}
.hero-scrim{background:
  linear-gradient(96deg, color-mix(in srgb,var(--paper) 97%,transparent) 0%, color-mix(in srgb,var(--paper) 82%,transparent) 34%, color-mix(in srgb,var(--paper) 14%,transparent) 70%, transparent 100%),
  linear-gradient(0deg, color-mix(in srgb,var(--paper) 70%,transparent) 0%, transparent 42%)}
#mesh{opacity:.48}
.hero .eyebrow{font-family:var(--serif);font-weight:600;font-size:.92rem;letter-spacing:.3em;color:var(--accent-d)}
.htitle{font-size:clamp(2.7rem,7.4vw,5.4rem);font-weight:800;line-height:1.15;letter-spacing:.005em}
.htitle em{font-style:italic;padding-right:.05em}
.hsub{border-left:1px solid color-mix(in srgb, var(--accent) 50%, transparent);padding-left:1.15rem;line-height:2.05;max-width:36ch}
.hbtns{margin-top:2.4rem;gap:1rem}

/* ボタン — 抑制されたトラッキングの活字ボタン */
.btn{font-size:12px;letter-spacing:.22em;font-weight:600;padding:1.05em 1.85em}
.btn-line{border-color:color-mix(in srgb, var(--ink) 72%, transparent)}

/* ============================================================
 * 本文 — 二行ロックのドロップキャップ、両端揃え、記事末の■
 * ============================================================ */
.lead{max-width:38em;line-height:2.15;text-align:justify;font-size:clamp(1.02rem,1.5vw,1.16rem)}
#about .lead::first-letter{
  font-family:var(--serif);
  font-weight:800;
  font-size:4.05em;
  float:left;
  line-height:1.06;
  padding:.02em .16em 0 0;
  margin-right:.04em;
  color:var(--accent);
}
#about .lead::after{content:"■";margin-left:.5em;font-size:.5em;color:var(--accent);vertical-align:.22em}

/* ============================================================
 * チップ — 索引式のスペックシート（上端インク罫の見出し語）
 * ============================================================ */
.chips{gap:1.4rem 2.4rem;margin-top:2.4rem}
.chip{
  border:0;border-top:1px solid var(--ink);
  background:transparent;
  padding:.8em .2em 0 0;
  font-size:.8rem;letter-spacing:.06em;color:var(--mute);
  min-width:9em;
}
.chip b{font-weight:700;letter-spacing:.02em}

/* ============================================================
 * チーム — データ組みの人数、額装したポートレート
 * ============================================================ */
.comp{margin-top:2.4rem;gap:1.4rem 2.6rem;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:1.2rem 0 1.1rem}
.comp div{font-size:.76rem;letter-spacing:.16em}
.comp b{font-size:clamp(1.9rem,3vw,2.4rem);font-weight:800;line-height:1.15;font-variant-numeric:lining-nums}
.person{padding:1.9rem 1.25rem}
.person b{font-weight:700}
.person span{font-size:9.5px;letter-spacing:.2em}
.avatar{width:64px;height:64px;background:var(--paper);border:1px solid var(--line2);box-shadow:inset 0 0 0 3px var(--white);font-weight:700}
.note{font-size:.8rem;letter-spacing:.02em;border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem;max-width:44em}

/* ============================================================
 * 日程 / お知らせ / 実績 — 上端2pxインク罫＋ヘアライン行の索引組み
 * ============================================================ */
.sched{margin-top:2.2rem;border-top:2px solid var(--ink)}
.srow{padding:1.3rem 0;transition:background .25s ease}
.srow:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.sdate b{font-weight:800;font-size:1.5rem}
.sdate span{font-family:var(--serif);font-style:italic;font-size:11px;letter-spacing:.14em}
.sbody b{font-weight:700}
.stag{font-size:9.5px;letter-spacing:.22em;padding:.5em 1em}
.stag.match{background:transparent;border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);color:var(--accent-d)}

.newslist{margin-top:2.2rem;border-top:2px solid var(--ink)}
.nrow{padding:1.7rem 0;transition:background .25s ease}
.nrow:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.nrow time{font-family:var(--serif);font-style:italic;font-size:.9rem;letter-spacing:.08em;font-variant-numeric:lining-nums}
.nbody .ncat{font-size:9.5px;letter-spacing:.3em;font-weight:600;margin-bottom:.45rem}
.nbody h3{font-weight:700;font-size:1.22rem;line-height:1.6;transition:color .25s ease}
.nrow:hover .nbody h3{color:var(--accent-d)}
.nbody p{text-align:justify}

.ach{margin-top:2.2rem;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.arow{padding:1.15rem 0}
.arow:first-child{border-top:0}
.ayear{font-family:var(--serif);font-style:italic;font-weight:600;font-variant-numeric:lining-nums}
.atitle b{font-weight:600}
.aresult{font-weight:800}

/* ============================================================
 * 文武両道バンド — 深いオックスブラッドのインク面（家系はaccentに追従）
 * ============================================================ */
.band{background:
  radial-gradient(120% 150% at 88% -12%, color-mix(in srgb, var(--accent) 78%, #fdfcf6) 0%, transparent 44%),
  linear-gradient(118deg, color-mix(in srgb, var(--accent) 78%, #140b09) 0%, color-mix(in srgb, var(--accent) 52%, #140b09) 100%)}
.band .wm{color:rgba(255,255,255,.1);font-weight:800;font-feature-settings:"palt" 1}
.band h2{font-weight:800;font-size:clamp(1.8rem,4vw,2.7rem)}
.band p{line-height:2.05}

/* ============================================================
 * フォーム — 二重の細罫で額装した返信ハガキ。下線式の記入欄
 * ============================================================ */
.form{
  background:var(--white);
  border:1px solid var(--line2);
  outline:1px solid var(--line);
  outline-offset:6px;
  margin-top:2.6rem;
  padding:clamp(1.8rem,4.5vw,3rem);
}
.field label{font-size:10px;letter-spacing:.28em}
.field input,.field select,.field textarea{
  border:0;border-bottom:1px solid var(--line2);
  background:transparent;border-radius:0;
  padding:.65em .05em;font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-bottom-color:var(--accent);
  box-shadow:0 1px 0 var(--accent);
}
.seg label{background:transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.seg label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--white)}
.submit{letter-spacing:.26em;font-size:.88rem;padding:1.05em;transition:background .2s ease,letter-spacing .3s ease}
.submit:hover{letter-spacing:.34em}
.toast{border-left:3px solid var(--accent)}

/* ============================================================
 * フッター — 奥付。上端の強いインク罫で紙面を締める
 * ============================================================ */
footer{border-top:2px solid var(--ink);padding-top:3.6rem}
footer h4{font-weight:700;letter-spacing:.06em}
.powered{letter-spacing:.14em}
.powered .badge{background:var(--white)}