/* ============================================================
 * themes-fable/active.css — Enjin テーマ「Active」（light / Fable磨き版）
 * enjin-base.css のトークン/スケルトンを上書きして着せ替える。
 *
 * - HTMLは共通(render.php)のまま。既存クラス + 擬似要素のみで表現。
 * - --accent は base 側で var(--club-color, var(--theme-accent)) に解決。
 *   クラブ色1色で全体が変わる自動配色を維持しつつ、--accent-d / --accent-l
 *   も color-mix でクラブ色に追従させ、濃色・淡色まで一貫させる。
 * - 構造シグネチャ:
 *   1) キットノッチ … ユニフォームの裁ち落としを思わせる右上コーナーカット
 *      （crest / 塗りボタン / 送信ボタンに限定適用）
 *   2) 精密罫線 … 全幅ヘアライン + 左端アクセントタブ（.rule）
 *   3) セクション連番 … eyebrow に 01/02/03… のモノスペース採番
 *   4) 六角アバター … 選手カードのヘキサゴンバッジ
 * ============================================================ */

/* ---------- 1) トークン微調整（クリーム×ember のファミリを維持し深みを足す） ---------- */
:root{
  --paper:#faf6ec;
  --paper2:#f3edde;
  --white:#fffdf8;
  --card:#fffdf7;
  --ink:#1b1509;
  --body:#4c4230;
  --mute:#8a7f6c;
  --line:#e8e0cc;
  --line2:#d9cfb6;
  --theme-accent:#e8551f;
  --accent-d:#c43d10; /* fallback（color-mix 非対応環境用） */
  --accent-l:#ff7a3d;
  --serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
/* 濃色/淡色もクラブ色に自動追従（hover・band・実績の強調まで1色で染まる） */
@supports (color: color-mix(in srgb, red 60%, blue)){
  :root{
    --accent-d:color-mix(in srgb, var(--accent) 78%, #2b0d02);
    --accent-l:color-mix(in srgb, var(--accent) 72%, #fff8ee);
  }
}

/* ---------- 2) タイポグラフィの光学調整 ---------- */
/* 見出しはプロポーショナル字詰め（palt）。約物の間延びを締める */
h1,h2,h3,footer h4{font-feature-settings:"palt" 1}
.htitle{letter-spacing:-.015em;line-height:1.16}
h2.sec{letter-spacing:.01em}
/* 強調語はアクセント文字 + 同色の淡いマーカーで二重に効かせる */
h2.sec em{
  background:linear-gradient(transparent 74%, color-mix(in srgb,var(--accent) 20%,transparent) 74%);
  padding:0 .05em;
}

/* ---------- 3) セクションヘッダ：連番 + 精密罫線 ---------- */
body{counter-reset:enjin-sec}
section .eyebrow i::before{
  counter-increment:enjin-sec;
  content:counter(enjin-sec, decimal-leading-zero);
  color:var(--accent);
  font-weight:400;
  font-size:.94em;
  letter-spacing:.1em;
  margin-right:.75em;
}
/* 文武バンドはブランドの幕間として連番の外に置く */
section.band .eyebrow i::before{content:none}

/* 罫線＝全幅ヘアライン + 左端のアクセントタブ（雑誌の柱の精度） */
.rule{
  width:100%;height:1px;background:var(--line2);
  position:relative;margin:16px 0 26px;
}
.rule::before{
  content:"";position:absolute;left:0;top:-1px;
  width:44px;height:3px;background:var(--accent);
}
/* 交互背景セクションの縁をヘアラインで締める */
.alt{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- 4) ナビ ---------- */
nav{border-bottom:1px solid var(--line2)}
.crest{
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  font-family:var(--serif);font-weight:900;font-size:15px;
}
.navcta{
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition:background .18s, transform .18s;
}
.navcta:hover{transform:translateY(-1px)}
.navcta:active{transform:translateY(0)}

/* ---------- 5) ティッカー ---------- */
/* 単色ベタ→わずかな縦グラデで金属的な深みを（クラブ色追従） */
.ticker{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 94%, #fff) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 88%, #000) 100%);
}
.ticker .track{font-size:11.5px;letter-spacing:.07em;padding:.6rem 0}
.ticker .track>span{padding:0}
/* 項目区切りをスピード線「//」に（ループの継ぎ目でも等間隔が保たれる） */
.ticker .track>span::after{content:"//";margin:0 1.5rem;opacity:.45;font-weight:400}

/* ---------- 6) ヒーロー ---------- */
/* スクリムに極細のピッチライン + 右上のアクセントブルームを重ねる（#meshの下層） */
.hero-scrim{background:
  linear-gradient(96deg,
    color-mix(in srgb,var(--paper) 97%,transparent) 0%,
    color-mix(in srgb,var(--paper) 82%,transparent) 36%,
    color-mix(in srgb,var(--paper) 24%,transparent) 72%,
    transparent 100%),
  linear-gradient(0deg, color-mix(in srgb,var(--paper) 66%,transparent) 0%, transparent 44%),
  repeating-linear-gradient(115deg,
    color-mix(in srgb,var(--accent) 6%,transparent) 0 1.5px,
    transparent 1.5px 92px),
  radial-gradient(860px 520px at 84% 10%,
    color-mix(in srgb,var(--accent) 10%,transparent), transparent 62%)}

/* クラブ名 eyebrow を「マッチデーの選手タグ」風チップに */
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:.6em;max-width:100%;
  padding:.5em 1em .5em .8em;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  background:color-mix(in srgb,var(--white) 55%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:enjinRise .7s cubic-bezier(.2,.7,.2,1) both;
}
.hero .eyebrow::before{
  content:"";flex:none;width:7px;height:7px;
  background:var(--accent);transform:rotate(45deg);
}

/* リード文は細いアクセントヘアラインで吊る */
.hero .hsub{
  border-left:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  padding-left:1.1em;
  animation:enjinRise .8s cubic-bezier(.2,.7,.2,1) .22s both;
}
/* 登場をスタッガー（eyebrow→見出し→リード→ボタン。transform/opacityのみ） */
.hero .rise{animation-delay:.1s}
.hero .hbtns{animation:enjinRise .8s cubic-bezier(.2,.7,.2,1) .34s both}

/* ---------- 7) ボタン：キットノッチ（塗りのみ。線ボタンは矩形のまま対比） ---------- */
.btn-accent,.btn-ink,.submit{
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.btn-line:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------- 8) チップ ---------- */
.chip{
  border-color:var(--line2);
  border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);
  padding:.6em 1.05em;
}

/* ---------- 9) チーム ---------- */
.grid4{margin-top:2.2rem}
.person{padding:1.75rem 1.1rem 1.6rem}
/* アバターをヘキサゴンバッジに（選手名鑑の趣） */
.avatar{
  width:62px;height:66px;border:none;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(165deg,
    var(--paper2) 0%,
    color-mix(in srgb,var(--paper2) 82%,var(--accent)) 100%);
}
/* 学年別集計：数字の下にアクセントの短いアンダースコア */
.comp{gap:2.4rem}
.comp b{font-size:1.85rem;font-variant-numeric:tabular-nums}
.comp b::after{
  content:"";display:block;width:20px;height:2px;
  background:color-mix(in srgb,var(--accent) 72%,transparent);
  margin:7px 0 2px;
}

/* ---------- 10) 日程 ---------- */
.sched{margin-top:2rem}
.srow{transition:background .25s}
.srow:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
/* 日付列と本文の間に段組ヘアライン */
.sbody{border-left:1px solid var(--line2);padding-left:1.2rem}
.sdate b{font-variant-numeric:tabular-nums}
.stag{padding:.45em .9em}
@media(max-width:600px){
  .stag{margin-left:calc(1.2rem + 1px)} /* sbodyのヘアライン分だけ字下げを揃える */
}

/* ---------- 11) お知らせ ---------- */
.nrow time{font-variant-numeric:tabular-nums;letter-spacing:.08em}
/* カテゴリラベルにダイヤ点（テーマ共通のマーカー言語） */
.nbody .ncat::before{
  content:"";display:inline-block;width:6px;height:6px;
  background:var(--accent);transform:rotate(45deg);
  margin-right:.6em;vertical-align:.05em;
}
.nbody h3{letter-spacing:.01em}

/* ---------- 12) 実績：記録簿のリーダー罫 ---------- */
.ach{margin-top:2rem}
.ach .arow:last-child{border-bottom:1px solid var(--line)}
.arow{transition:background .25s}
.arow:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ayear{font-variant-numeric:tabular-nums}
.atitle{display:flex;align-items:baseline;gap:.9em;min-width:0}
.atitle::after{
  content:"";flex:1 0 1.5em;
  border-bottom:1px dotted var(--line2);
  align-self:flex-end;transform:translateY(-6px);
}
.aresult{letter-spacing:.02em}
@media(max-width:560px){
  .arow{grid-template-columns:auto 1fr;row-gap:.1rem}
  .atitle::after{content:none}
  .aresult{grid-column:2;white-space:normal;justify-self:start}
}

/* ---------- 13) 文武バンド ---------- */
/* 極細の斜めハッチで布地の質感、透かし文字は輪郭線化して上品に */
.band{background:
  repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 80px),
  linear-gradient(120deg, var(--accent) 0%, var(--accent-d) 100%)}
@supports (-webkit-text-stroke:1px #fff){
  .band .wm{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.30)}
}
.band h2{letter-spacing:.02em}

/* ---------- 14) フォーム ---------- */
/* クリップボード風：天面にアクセントの太罫 */
.form{border-top:3px solid var(--accent)}
.field input,.field select,.field textarea{transition:border-color .2s}
.seg label{transition:background .2s, color .2s, border-color .2s}
.submit{letter-spacing:.16em;transition:background .18s, transform .15s}
.submit:hover{transform:translateY(-1px)}
.submit:active{transform:translateY(0)}

/* ---------- 15) フッター ---------- */
footer h4::before{
  content:"";display:inline-block;width:5px;height:5px;
  background:var(--accent);transform:rotate(45deg);
  margin-right:.55em;vertical-align:.1em;
}
footer .cols a{transition:transform .25s cubic-bezier(.2,.7,.2,1), color .2s}
footer .cols a:hover{transform:translateX(4px)}
.powered .badge{background:var(--white)}

/* ---------- 16) reduced motion（baseの全消しに加えた保険） ---------- */
@media (prefers-reduced-motion: reduce){
  .hero .eyebrow,.hero .hsub,.hero .hbtns{animation:none;opacity:1;transform:none}
}