/* ============================================================
 * themes-fable/classic.css — Enjin テーマ「Classic」（light / Fable磨き版）
 * enjin-base.css のトークンと語彙を上書きして着せ替える（HTML不変）。
 * accent は base 側で var(--club-color, var(--theme-accent)) に解決される。
 *
 * 設計意図 — 「伝統ある少年団の品格」
 *   紙   : 生成りのアイボリー。alt 面には簀の目（laid paper）の極薄テクスチャ。
 *   構造 : 濃紺 #1b2743 を「額縁」に（ナビ＝マストヘッド／フッター＝台座）、
 *          金は罫・年号・ラベルなど「箔」の量だけ使う。
 *   書体 : Shippori Mincho B1。読込済みウェイト(600/700/800)のみ使用し
 *          擬似ボールドを避ける。見出しは palt + わずかな正トラッキング。
 *   罫線 : 金のヘアライン＋段違いの副罫（証書の飾り罫の文法）。
 *   自動配色 : 金系の派生色(--accent-d/-l/-hi)を --accent から color-mix で
 *          導出。クラブ色1色を差しても同じ「家系」で全体が調律される。
 * ============================================================ */
:root{
  --paper:#f8f5ec;
  --paper2:#efe9d9;
  --white:#fffdf7;
  --card:#fffdf7;
  --ink:#1e2536;
  --body:#48505f;
  --mute:#878b96;
  --line:#e5dfcd;
  --line2:#d3cab2;
  --theme-accent:#a67c2e;
  /* 派生色は --accent（=クラブ色 or 金）から導出し、パレットの家系を保つ */
  --accent-d:color-mix(in srgb, var(--accent) 76%, #1a1206);
  --accent-l:color-mix(in srgb, var(--accent) 70%, #fff);
  --accent-hi:color-mix(in srgb, var(--accent) 62%, #fff); /* 紺の上で使う箔色 */
  /* 構造色（テーマの署名。クラブ色に依らず固定） */
  --navy:#1b2743;
  --navy-2:#243352;
  --navy-deep:#141c30;
  --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;
}

/* ---- 光学調整：実在ウェイト・palt・選択色 ---------------------- */
::selection{background:var(--navy);color:#f6f2e5}
h1,h2,h3{font-weight:800;letter-spacing:.03em;font-feature-settings:"palt" 1}
section{padding:clamp(4.2rem,9vw,7.4rem) 0} /* 余白は一段ぜいたくに */
.alt{background:
  repeating-linear-gradient(0deg, rgba(27,39,67,.016) 0 1px, transparent 1px 6px),
  var(--paper2)} /* 簀の目の気配 */

/* ---- ナビ＝マストヘッド（濃紺×金の二重罫） --------------------- */
nav{
  background:color-mix(in srgb, var(--navy) 96%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 58%, var(--navy));
  box-shadow:inset 0 -5px 0 -4px color-mix(in srgb, var(--accent) 30%, transparent);
}
.brand{color:#f6f3e9;font-weight:700;letter-spacing:.04em;font-size:1.06rem}
.crest{
  width:34px;height:34px;background:transparent;
  font-family:var(--serif);font-weight:700;font-size:15px;
  color:var(--accent-hi);
  border:1px solid color-mix(in srgb, var(--accent) 78%, transparent);
  box-shadow:inset 0 0 0 2px var(--navy),
             inset 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); /* 印章の内罫 */
}
.navlinks{gap:1.9rem;font-size:13.5px;letter-spacing:.08em}
.navlinks a{color:#d6d3c6}
.navlinks a:hover{color:var(--accent-hi)}
.navlinks a::after{height:1px;opacity:.7}
.navcta{
  background:transparent;color:var(--accent-hi);
  border:1px solid color-mix(in srgb, var(--accent) 68%, transparent);
  font-family:var(--serif);font-weight:600;letter-spacing:.12em;
  padding:.66em 1.35em;
  transition:background .22s,color .22s,border-color .22s;
}
.navcta:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--navy)}

/* ---- ヒーロー（静かな格式。金の粒子は控えめに） ----------------- */
.hero{padding:clamp(5rem,12vw,9rem) 0 clamp(3.6rem,7vw,5.8rem);border-bottom:1px solid var(--line)}
#mesh{opacity:.55}
.hero-scrim{background:
  radial-gradient(52rem 30rem at 82% 6%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
  linear-gradient(96deg,
    color-mix(in srgb, var(--paper) 97%, transparent) 0%,
    color-mix(in srgb, var(--paper) 84%, transparent) 38%,
    color-mix(in srgb, var(--paper) 30%, transparent) 72%, transparent 100%),
  linear-gradient(0deg, color-mix(in srgb, var(--paper) 72%, transparent) 0%, transparent 46%)}
.hero .eyebrow::before{ /* クラブ名の前に金の先導罫 */
  content:"";display:inline-block;width:2.4em;height:1px;
  background:color-mix(in srgb, var(--accent) 75%, transparent);
  vertical-align:middle;margin-right:.8em;
}
.htitle{font-weight:800;font-size:clamp(2.4rem,6.6vw,4.8rem);line-height:1.22;letter-spacing:.02em}
.htitle em{color:var(--accent-d)}
.htitle .hl{background:linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 22%, transparent) 62%)}
.hsub{color:#4d5566;letter-spacing:.02em;line-height:2}
.hbtns{gap:.9rem;margin-top:2.4rem}

/* ---- ボタン（招待状の彫り込み：紺地に内ヘアライン） ------------- */
.btn{font-family:var(--serif);font-weight:600;font-size:13.5px;letter-spacing:.14em;text-transform:none;
  transition:background .2s,transform .18s,border-color .2s,color .2s,box-shadow .2s}
.btn-accent{
  background:var(--navy);color:#f5f1e6;
  border:3px solid var(--navy);padding:.72em 1.4em;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 58%, rgba(255,255,255,.25));
}
.btn-accent:hover{
  background:var(--navy-2);border-color:var(--navy-2);transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 82%, #fff);
}
.btn-line{border:1px solid color-mix(in srgb, var(--navy) 55%, transparent);color:var(--navy)}
.btn-line:hover{background:var(--navy);border-color:var(--navy);color:#f5f1e6}

/* ---- 見出しまわり（日英ラベル・段違い金罫・紺見出し） ----------- */
.eyebrow{font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.26em;color:var(--accent-d)}
.eyebrow i{color:var(--navy);letter-spacing:.3em}
.eyebrow i::after{content:"・";color:color-mix(in srgb, var(--accent) 55%, transparent);
  font-weight:400;letter-spacing:0;margin:0 .4em 0 .1em}
.rule{width:52px;height:1px;background:var(--accent);margin:18px 0 26px;position:relative}
.rule::after{content:"";position:absolute;left:0;top:4px;width:24px;height:1px;
  background:color-mix(in srgb, var(--accent) 45%, transparent)} /* 証書の副罫 */
h2.sec{color:var(--navy);font-size:clamp(1.75rem,4.2vw,2.7rem);letter-spacing:.04em}
h2.sec em{color:var(--accent-d)}
.lead{font-family:var(--serif);font-size:clamp(1rem,1.45vw,1.12rem);line-height:2.2;letter-spacing:.02em;max-width:40em}
.lead b,.lead strong{box-shadow:inset 0 -.45em 0 color-mix(in srgb, var(--accent) 16%, transparent)}

/* ---- クラブ紹介：ドロップキャップ（署名意匠） ------------------- */
#about .lead::first-letter{
  font-family:var(--serif);font-weight:800;color:var(--navy);
  float:left;font-size:3.6em;line-height:.78;
  padding:.08em .18em .02em 0;
}
.chip{font-size:.84rem;letter-spacing:.02em;border:1px solid var(--line2);
  background:var(--white);padding:.6em 1.1em;box-shadow:0 1px 0 rgba(27,39,67,.05)}
.chip b{letter-spacing:.03em}

/* ---- チーム：台帳のような集計行＋額装した円形アバター ----------- */
.comp{margin-top:2rem;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.3rem 0}
.comp div{padding:0 2.2rem;border-left:1px solid var(--line2);font-size:.8rem;letter-spacing:.14em}
.comp div:first-child{border-left:0;padding-left:0}
.comp b{font-size:1.9rem;font-weight:800;color:var(--navy);font-feature-settings:"palt" 1}
.person{padding:1.7rem 1rem 1.5rem}
.person b{letter-spacing:.03em}
.person span{font-family:var(--serif);letter-spacing:.2em;color:var(--mute)}
.avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--paper);color:var(--accent-d);
  font-weight:700;font-size:1.35rem;
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line2));
  box-shadow:0 0 0 4px var(--white), 0 0 0 5px var(--line); /* 白マット＋外罫の額装 */
}
.note{font-size:.82rem;letter-spacing:.04em}

/* ---- 日程：紺の日付・箔のタグ・静かなホバー --------------------- */
.sdate b{color:var(--navy);font-weight:800;font-size:1.45rem;font-feature-settings:"palt" 1}
.sdate span{font-family:var(--serif);letter-spacing:.16em}
.sbody b{letter-spacing:.02em}
.srow{transition:background .22s}
.srow:hover{background:color-mix(in srgb, var(--navy) 3%, transparent)}
.stag{font-family:var(--serif);letter-spacing:.22em;padding:.5em .95em .42em}
.stag.match{background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);color:var(--accent-d)}
.stag.practice{border-color:var(--line2)}

/* ---- お知らせ：欄外日付は等幅数字、ホバーで左に金罫 ------------- */
.nrow{transition:background .22s,box-shadow .22s}
.nrow:hover{background:color-mix(in srgb, var(--accent) 4%, transparent);
  box-shadow:inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent)}
.nrow time{font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:.1em;font-size:12.5px}
.nbody .ncat{font-family:var(--serif);letter-spacing:.3em;color:var(--accent-d)}
.nbody h3{color:var(--navy);letter-spacing:.03em}

/* ---- 実績：年号に箔、結果は紺で重く ----------------------------- */
.arow{transition:background .22s}
.arow:hover{background:color-mix(in srgb, var(--navy) 3%, transparent)}
.ayear{font-family:var(--serif);font-weight:700;color:var(--accent-d);
  letter-spacing:.12em;font-variant-numeric:tabular-nums}
.atitle b{letter-spacing:.02em}
.aresult{font-weight:700;letter-spacing:.06em;color:var(--navy)}

/* ---- 文武両道バンド：紺の式典幕＋金の透かし --------------------- */
.band{background:linear-gradient(150deg, var(--navy-2) 0%, var(--navy) 45%, var(--navy-deep) 100%);
  border-top:1px solid color-mix(in srgb, var(--accent) 45%, var(--navy));
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, var(--navy))}
.band .wm{color:color-mix(in srgb, var(--accent) 16%, transparent);font-weight:800}
.band h2{letter-spacing:.06em}
.band p{color:rgba(240,236,224,.92)}
.band .eyebrow,.band .eyebrow i{color:var(--accent-hi)}
.btn-ink{background:var(--paper);color:var(--navy);border:3px solid var(--paper);padding:.72em 1.5em;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--navy) 25%, transparent)}
.btn-ink:hover{background:#fff;border-color:#fff;color:var(--navy)}

/* ---- 申込フォーム：紺の頭罫を持つ書式用紙 ----------------------- */
.form{border:1px solid var(--line2);border-top:2px solid var(--navy);
  box-shadow:0 1px 0 rgba(27,39,67,.04), 0 28px 56px -40px rgba(27,39,67,.35);
  padding:clamp(1.7rem,4vw,2.8rem)}
.field label{font-family:var(--serif);letter-spacing:.2em;color:#6a707e}
.field input,.field select,.field textarea{background:var(--white);
  transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.seg label{background:var(--white);letter-spacing:.14em;
  transition:border-color .2s,background .2s,color .2s,box-shadow .2s}
.seg label:has(input:checked){border-color:var(--accent-d);color:var(--accent-d);
  background:color-mix(in srgb, var(--accent) 8%, var(--white));
  box-shadow:inset 0 0 0 1px var(--accent-d)} /* 選択状態も彫り込みで */
.submit{background:var(--navy);border:3px solid var(--navy);
  font-family:var(--serif);font-weight:600;letter-spacing:.24em;padding:.9em;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.2));
  transition:background .2s,box-shadow .2s}
.submit:hover{background:var(--navy-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 80%, #fff)}
.toast{background:color-mix(in srgb, var(--accent) 8%, var(--white));
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);color:var(--accent-d);letter-spacing:.02em}

/* ---- フッター＝台座（ナビと対になる濃紺、金のヘアラインで留める） */
footer{background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-top:1px solid color-mix(in srgb, var(--accent) 55%, var(--navy));
  color:rgba(214,211,196,.7);padding:3.6rem 0 2.2rem}
footer h4{color:#f4f1e6;letter-spacing:.06em}
footer p{color:rgba(214,211,196,.68)}
footer a{color:rgba(224,221,208,.82)}
footer a:hover{color:var(--accent-hi)}
.powered{border-top:1px solid rgba(255,255,255,.12);color:rgba(214,211,196,.55);letter-spacing:.12em}
.powered .badge{border:1px solid rgba(255,255,255,.16)}
.powered .badge b{color:var(--accent-hi)}

/* ---- 将来要素（ticker/gallery）が有効化されても崩れない備え ------ */
.ticker{background:var(--navy);border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, var(--navy))}
.ticker .track{font-family:var(--serif);letter-spacing:.14em}
.gcap b{letter-spacing:.02em}
.gcap span{font-family:var(--serif);letter-spacing:.18em}

/* ---- レスポンシブ微調整 ----------------------------------------- */
@media(max-width:640px){
  .comp{row-gap:1rem}
  .comp div{padding:0 1.1rem}
  .comp div:first-child{padding-left:0}
  .hero .eyebrow::before{width:1.6em;margin-right:.6em}
}