/* ============================================================
 * themes-fable/zen.css — Enjin テーマ「Zen」 Fable 洗練版（light）
 * 「静けさと品格」— washi（生成りの紙肌）× 朱（#b8402f）× 墨。
 * enjin-base.css のトークンを上書きし、既存クラスを着せ替えるのみ。
 * accent は base 側で var(--club-color, var(--theme-accent)) に解決。
 * 派生色（accent-d / accent-l）は color-mix で --accent から導出し、
 * クラブ1色→家系全体が自動で追従する（自動配色の洗練）。
 * ============================================================ */
:root{
  /* 紙 — 生成り（きなり）。わずかに黄味を沈め、墨との対比を澄ませる */
  --paper:#f6f0e3;
  --paper2:#ede5d3;
  --white:#fcf8ee;
  --card:#fcf8ee;
  /* 墨 — 真黒を避け、灰を含んだ墨色の階調 */
  --ink:#241f18;
  --body:#4c4536;
  --mute:#8d8471;
  --line:#e3dac6;
  --line2:#cfc3a9;
  /* 朱 — 朱肉の赤。派生は accent から導出（クラブ色にも追従） */
  --theme-accent:#b8402f;
  --accent-d:color-mix(in srgb, var(--accent) 76%, #200f09);
  --accent-l:color-mix(in srgb, var(--accent) 58%, var(--paper));
  --serif:"Shippori Mincho B1","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;
  /* 和紙の簀目（すのめ）— 視認限界ぎりぎりの繊維テクスチャ */
  --washi:
    repeating-linear-gradient(0deg,  rgba(93,78,55,.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(93,78,55,.011) 0 1px, transparent 1px 6px);
}

/* ============ 紙肌と間（ま） ============ */
body{background-color:var(--paper);background-image:var(--washi);letter-spacing:.015em}
.alt{background-color:var(--paper2);background-image:var(--washi)}
footer{background-color:var(--paper2);background-image:var(--washi)}
section{padding:clamp(4.4rem,10vw,8.4rem) 0}

/* ============ 明朝の型階層 — 太らせず、字間で品を出す ============ */
h1,h2,h3{font-weight:700;letter-spacing:.05em;line-height:1.3}
h2.sec{font-size:clamp(1.7rem,3.9vw,2.65rem);letter-spacing:.1em;margin-top:.35rem}
.lead{letter-spacing:.03em;line-height:2.15;max-width:40em}
.note{letter-spacing:.05em}

/* 見出し前の眉 — 日本語は明朝×朱、英語は小さな mono。区切りは髪の毛ほどの縦罫 */
.eyebrow{font-family:var(--serif);font-weight:600;font-size:11.5px;letter-spacing:.34em}
.eyebrow i{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.26em}
.eyebrow i::after{content:"";display:inline-block;width:1px;height:.85em;background:var(--line2);margin:0 .8em;vertical-align:-.08em}

/* 罫 — 朱を一寸、あとは薄墨。二色一線の精度 */
.rule{width:48px;height:1px;margin:16px 0 26px;background:linear-gradient(90deg,var(--accent) 0 16px,var(--line2) 16px)}

/* ============ ヒーロー — 静けさの主景 ============ */
.hero{padding:clamp(5rem,12vw,9.5rem) 0 clamp(3.8rem,8vw,6.2rem)}
#mesh{opacity:.48;filter:saturate(.85)}
/* 円窓 — 遠景にひそむ一本の円（円陣・円相のモチーフ） */
.hero::before{content:"";position:absolute;z-index:-1;top:50%;right:-10%;width:min(46vw,560px);aspect-ratio:1;transform:translateY(-52%);border:1px solid color-mix(in srgb, var(--ink) 15%, transparent);border-radius:50%;background:radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--accent) 4%, transparent) 60%, transparent 76%);pointer-events:none}
.htitle{font-weight:700;font-size:clamp(2.3rem,6.4vw,4.4rem);letter-spacing:.06em;line-height:1.24}
.hsub{letter-spacing:.03em;line-height:2.1;margin-top:1.8rem}
.hbtns{margin-top:2.4rem;gap:.9rem}

/* 朱印 — 落款。有機的な縁、にじみ、紙に沈む multiply */
.hero-inner::after{
  content:"和";position:absolute;top:.15em;right:.2rem;
  width:2.2em;height:2.2em;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:1.25rem;letter-spacing:0;
  color:var(--accent);
  border:1.5px solid color-mix(in srgb, var(--accent) 88%, #3a0f08);
  border-radius:14% 12% 15% 12% / 13% 15% 12% 14%;
  background:radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent),
    inset 0 0 .4em color-mix(in srgb, var(--accent) 12%, transparent);
  transform:rotate(-4deg);
  opacity:.92;mix-blend-mode:multiply;pointer-events:none;
}
@media(max-width:700px){.hero-inner::after{display:none}}

/* ============ ナビ — 印と細字 ============ */
.brand{font-weight:700;letter-spacing:.06em}
.crest{border-radius:4px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, #fff 28%, transparent)}
.navlinks{font-weight:500;font-size:13.5px;letter-spacing:.08em}
.navcta{font-family:var(--serif);font-weight:600;letter-spacing:.1em;text-transform:none;border-radius:2px}

/* ============ ボタン — 動かず、深まる ============ */
.btn{font-family:var(--serif);font-weight:600;font-size:.88rem;letter-spacing:.16em;text-transform:none;border-radius:2px;transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.btn-accent:hover{transform:none}
.btn-line{border-color:color-mix(in srgb, var(--ink) 62%, transparent)}

/* ============ 章の身体 ============ */
/* 短冊 — 透かした白地に細罫、明朝 */
.chip{font-family:var(--serif);letter-spacing:.06em;background:color-mix(in srgb, var(--white) 55%, transparent);border-color:var(--line2);padding:.6em 1.15em}

/* 円相のアバター — 人は円で結ぶ */
.avatar{border-radius:50%;font-weight:700;border-color:color-mix(in srgb, var(--accent) 42%, var(--line2))}
.person{padding:1.8rem 1.1rem;transition:background-color .4s ease,transform .4s ease}
.person:hover{transform:translateY(-2px);background-color:color-mix(in srgb, var(--accent) 3%, var(--white))}
.person span{font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:none}
.comp b{font-weight:700;letter-spacing:.02em}

/* 日程 — 数字は明朝、余白を一段 */
.sched{margin-top:2.1rem}
.srow{padding:1.3rem 0}
.sdate b{font-weight:700;font-variant-numeric:tabular-nums}
.sdate span{font-family:var(--serif);letter-spacing:.22em}
.stag{font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:none;padding:.42em .95em}
.stag.practice{color:var(--body)}

/* お知らせ — 行間を開け、触れると紙がほのかに色づく */
.newslist{margin-top:2.1rem}
.nrow{padding:1.7rem 0}
.nrow:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.nrow time{font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.nbody .ncat{font-family:var(--serif);font-size:11px;letter-spacing:.26em;text-transform:none}
.nbody h3{font-weight:600;letter-spacing:.04em}

/* 歩み — 年号も明朝で通す */
.arow{padding:1.15rem 0}
.ayear{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.aresult{font-weight:700}

/* ============ 文武帯 — 墨の間（クラブ色を含んだ深い墨） ============ */
.band{
  background:
    radial-gradient(120% 170% at 85% -20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent-d) 30%, #191411) 0%, #15110d 100%);
  border-block:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
}
.band .wm{color:color-mix(in srgb, var(--accent) 20%, transparent);font-weight:700}
.band h2{letter-spacing:.08em}
.band p{letter-spacing:.03em}

/* ============ 入会・体験 — 静かな所作のフォーム ============ */
.form{border:1px solid var(--line2);box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent)}
.field label{font-family:var(--serif);font-size:.78rem;letter-spacing:.16em;text-transform:none;color:var(--body)}
.field input,.field select,.field textarea{border-radius:2px;transition:border-color .3s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:1.5px solid color-mix(in srgb, var(--accent) 75%, transparent);outline-offset:1px}
.seg label{letter-spacing:.12em}
.submit{font-family:var(--serif);font-weight:600;font-size:.95rem;letter-spacing:.32em;text-indent:.32em;text-transform:none;border-radius:2px;padding:1em;transition:background-color .35s ease}
.toast{letter-spacing:.04em}

/* ============ 奥付 ============ */
footer{border-top:1px solid var(--line2)}
footer h4{font-weight:700;letter-spacing:.18em}
footer p,footer a{letter-spacing:.03em}
.powered{letter-spacing:.08em}