/* ============================================================
 * themes-fable/mono.css — Enjin テーマ「Mono」（light / 個性）Fable版
 * スイス・インターナショナルスタイル：白黒＋赤の一点効かせ。
 * enjin-base.css のトークンを上書きし、罫線の太さ階層（8px/3px/2px/1px）・
 * グロテスク大文字・厳格グリッド・セクション連番で「精度」を作る。
 * accent は base.css 側で var(--club-color, var(--theme-accent)) に解決される。
 * ホバー反転は ink（黒）を使い、クラブ色差し替え時も破綻しない。
 * ============================================================ */
:root{
  --paper:#ffffff;
  --paper2:#f3f3f3;
  --white:#ffffff;
  --card:#ffffff;
  --ink:#0d0d0d;
  --body:#333333;
  --mute:#6e6e6e;
  --line:#e3e3e3;
  --line2:#c9c9c9;
  --theme-accent:#e5342b;
  --accent-d:#bd241c;
  --accent-l:#ec5b53;
  --serif:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* ---- 全体リズム：余白は広く、罫線で区切る ---- */
body{counter-reset:enjin-mono-sec}
section{padding:clamp(4.5rem,10vw,8.5rem) 0}
h1,h2,h3{font-feature-settings:"palt" 1;letter-spacing:-.01em}

/* ---- 型階層：グロテスク大文字 ---- */
.htitle{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(2.9rem,8.4vw,6.4rem);
  letter-spacing:-.03em;line-height:1.04;
}
h2.sec{
  font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.3rem);
  letter-spacing:-.02em;line-height:1.06;
  margin-top:1.4rem;
}
.lead{line-height:2.05}
.lead b,.lead strong{box-shadow:inset 0 -2px 0 var(--accent)}

/* ---- 黒罫の太さ設計：全幅3px＝セクション主罫 / 1px＝行の毛細罫 ---- */
.rule{width:100%;height:3px;background:var(--ink);margin:16px 0 0}

/* ---- eyebrow：セクション連番（01 ABOUT / クラブ紹介）。赤は番号のみ ---- */
.eyebrow{color:var(--ink);font-size:11px;letter-spacing:.2em;font-weight:600}
.eyebrow i{color:var(--ink);letter-spacing:.2em}
.eyebrow i::after{color:var(--line2)}
section .wrap>.eyebrow{counter-increment:enjin-mono-sec}
section .wrap>.eyebrow::before{
  content:counter(enjin-mono-sec,decimal-leading-zero);
  color:var(--accent);font-weight:600;margin-right:.9em;
  font-variant-numeric:tabular-nums;
}

/* ---- nav：ソリッド白＋1px黒罫。CTAは赤ブロック→黒反転 ---- */
nav{background:var(--white);backdrop-filter:none;border-bottom:1px solid var(--ink)}
.brand{text-transform:uppercase;letter-spacing:.03em;font-weight:900}
.crest{border-radius:0;font-weight:900}
.navlinks{font-size:13px;font-weight:700;letter-spacing:.04em}
.navcta{border-radius:0;letter-spacing:.08em}
.navcta:hover{background:var(--ink)}
.ticker{background:var(--ink)}

/* ---- hero：8pxのマストヘッド黒罫＋赤の角版（■）＋大文字ポスター ---- */
.hero{padding:clamp(5rem,12vw,9.5rem) 0 clamp(3.6rem,7.5vw,6rem)}
.hero-inner{border-top:8px solid var(--ink);padding-top:1.3rem}
.hero .eyebrow{font-family:var(--mono);color:var(--ink)}
.hero .eyebrow::before{
  content:"";display:inline-block;width:.62em;height:.62em;
  background:var(--accent);margin-right:.7em;
}
.hsub{color:var(--body);max-width:36ch;line-height:1.95}

/* ---- ボタン：矩形・機械的。浮かず、押した瞬間だけ1pxずれる ---- */
.btn,.chip,.crest,.navcta,.avatar,.stag,.form,.submit,.toast,
.field input,.field select,.field textarea,.seg label{border-radius:0}
.btn{font-size:12px;letter-spacing:.14em;padding:1em 1.7em}
.btn:hover{transform:none}
.btn:active{transform:translate(1px,1px)}
.btn-accent:hover{background:var(--ink);transform:none}
.btn-line{border:2px solid var(--ink)}

/* ---- chips：黒枠の索引タブ ---- */
.chip{border:1px solid var(--ink);background:var(--white);font-size:.82rem}
.chip b{font-weight:900}

/* ---- team：黒毛細グリッドの統計ストリップ＋左揃えの人物セル ---- */
.comp{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:2rem;
}
.comp div{
  background:var(--white);padding:1.1rem 1rem .95rem;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);
}
.comp b{
  font-size:2.2rem;font-weight:900;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15;
}
.grid4{background:var(--ink);border:1px solid var(--ink)}
.person{text-align:left;padding:1.4rem 1.2rem;transition:background .2s ease}
.person:hover{transform:none;background:#fafafa}
.avatar{
  margin:0 0 .9rem;border:1px solid var(--ink);
  background:var(--white);color:var(--ink);font-weight:900;
}
.avatar img{filter:grayscale(1) contrast(1.05);transition:filter .35s ease}
.person:hover .avatar img{filter:none}
.person b{font-weight:900}
.note{font-size:.8rem}

/* ---- schedule：2px黒罫で開き、日付は等幅タブラー。赤は「試合」だけ ---- */
.sched{border-top:2px solid var(--ink)}
.sdate b{color:var(--ink);font-family:var(--mono);font-weight:600;font-size:1.5rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sbody b{font-weight:900}
.stag{font-weight:600}
.stag.match{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.stag.practice{border:1px solid var(--ink);color:var(--ink)}

/* ---- news：ホバーは赤の縦罫が1本立つだけ。それ以上飾らない ---- */
.newslist{border-top:2px solid var(--ink)}
.nrow{transition:box-shadow .22s ease,padding-left .22s ease}
.nrow:hover{background:transparent;box-shadow:inset 3px 0 0 var(--accent);padding-left:1rem}
.nrow time{font-variant-numeric:tabular-nums;color:var(--mute)}
.nbody .ncat{letter-spacing:.2em;font-weight:600}
.nbody h3{font-weight:900;line-height:1.5}

/* ---- 実績：年表は黒で締める（赤を使わない節度） ---- */
.ach{border-top:2px solid var(--ink)}
.arow{border-top:none;border-bottom:1px solid var(--line)}
.ayear{color:var(--ink);font-variant-numeric:tabular-nums}
.atitle b{font-weight:700}
.aresult{color:var(--ink);font-weight:900}

/* ---- 文武バンド：漆黒の面に白の輪郭文字。ここが紙面の「黒面」 ---- */
.band{background:var(--ink)}
.band .wm{
  color:rgba(255,255,255,.05);
  -webkit-text-stroke:1px rgba(255,255,255,.26);
}
.band h2{letter-spacing:-.02em}
section.band .wrap>.eyebrow::before{color:#fff}
.band .btn-ink{background:#fff;color:var(--ink)}
.band .btn-ink:hover{background:var(--accent);color:#fff}

/* ---- form：2px黒枠の帳票。選択＝黒、送信＝赤（紙面唯一の赤面） ---- */
.form{border:2px solid var(--ink);background:var(--white)}
.field label{color:var(--ink);letter-spacing:.14em}
.field input,.field select,.field textarea{background:var(--white);border:1px solid var(--line2)}
.seg label{border:1px solid var(--ink);background:var(--white);color:var(--ink)}
.seg label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.submit{letter-spacing:.16em}
.submit:hover{background:var(--ink)}
.toast{border:1px solid var(--ink);background:var(--paper2);color:var(--ink)}

/* ---- footer：黒面で終わる。白黒コントラストの結び ---- */
footer{background:var(--ink);border-top:none;color:#8f8f8f}
footer h4{color:#fff;text-transform:uppercase;font-size:.82rem;letter-spacing:.14em}
footer p{color:#9a9a9a}
footer a{color:#c6c6c6}
footer a:hover{color:#fff}
.powered{border-top:1px solid #2c2c2c;color:#8f8f8f}
.powered .badge{border:1px solid #3a3a3a}
.powered .badge b{color:#fff}