/* SAMPLE-GYM テーマ — 配色・書体・タイポサイズのみ
 *
 * 骨格は _kit/style-base.css。ここは「寒色スチール＋差し色1点／極太コンデンス体／
 * 詰めた組み・高コントラスト」というこのサンプルの声だけを持つ。
 * 色の実値は書かない。すべて config.js の palette から CSS 変数で届く。
 *
 * 対比の軸（sample01 との違いはこの2つだけで作る）:
 *   配色 … 暖色アンバー → 寒色スチール＋レッド
 *   書体 … 細身 400・字間ひろめ → 極太 800・字間つめ
 */

html, body {
  /* --c-bg が入るまでの下地。ブランド色ではなく白フラッシュ防止用の黒 */
  background: var(--c-bg, #000);
}

body {
  color: var(--c-ink);
  font-family: var(--f-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ------------------------------------------------------------ タイポ */
/* 極太・詰め組み。sample01 の細身・ひろめ組みと正面から対比させる */

.headline {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 800);
  line-height: .82;
  letter-spacing: -.025em;
  text-transform: uppercase;
  font-size: clamp(2.9rem, 13.5vw, 12.5rem);
  color: var(--c-ink);
}

.headline--hero { font-size: var(--hero-size, clamp(4rem, 30vw, 19rem)); letter-spacing: -.035em; }

.sub {
  font-size: clamp(.95rem, 3.5vw, 1.25rem);
  color: var(--c-ink);
  letter-spacing: .01em;
}

/* ラベル的に小さく置く。sample01 は本文と同格の1行 */
.tagline {
  /* ★B31-b: 下限 .72rem = 11.52px で 12px 下限を割っていた（実測 11.5px・375/390/393）。
     上限と刻みはそのまま、下限だけ .75rem = 12px へ。 */
  font-size: clamp(.75rem, 2.6vw, .88rem);
  /* 素の accent は小さい文字だとスクリム越しで 4.31:1 までしか出ない（実測）。
     ink を混ぜて 4.5:1 を確保しつつ、色味はレッドのまま残す */
  color: color-mix(in srgb, var(--c-accent) 55%, var(--c-ink));
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
}

/* 塗りつぶしのボタン。sample01 は線だけのピル */
.cta {
  border: 2px solid var(--c-accent);
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: clamp(.85rem, 3vw, 1rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cta:hover, .cta:focus-visible { background: transparent; color: var(--c-accent); }

/* S6 発光タイポ（文字は生成AIではなく CSS で描く） */
.neon {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 800);
  font-size: clamp(3.6rem, 17vw, 15rem);
  line-height: .84;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-ink);
  /* 赤はアンバーより暗いぶんグローを強くしても文字が沈まない
     （G3 は text-shadow 込みの実描画で測る） */
  text-shadow:
    0 0 .42em color-mix(in srgb, var(--c-accent) 85%, transparent),
    0 0 1.2em color-mix(in srgb, var(--c-accent) 70%, transparent),
    0 0 3em color-mix(in srgb, var(--c-accent) 55%, transparent);
}

/* ------------------------------------------------- 静的章（S7 / S8） */

.stage--static .headline { font-size: clamp(2.2rem, 8vw, 5rem); }

/* 罫線グリッドではなく、左に差し色の柱を立てる */
.cards { background: transparent; border: 0; }

.card {
  background: color-mix(in srgb, var(--c-ink) 5%, transparent);
  border-left: 3px solid var(--c-accent);
}
.card__name {
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 82%, transparent);
}
.card__price {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 800);
  font-size: 2.5rem;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--c-ink);
}
.card__note { font-size: .82rem; color: color-mix(in srgb, var(--c-accent2) 45%, var(--c-ink)); }

.map {
  border: 0;
  background: color-mix(in srgb, var(--c-ink) 7%, transparent);
  outline: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
  outline-offset: -10px;
}
.map__pin {
  background: var(--c-accent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.map__label { font-size: .78rem; color: color-mix(in srgb, var(--c-accent2) 45%, var(--c-ink)); letter-spacing: .06em; }

.access div { font-size: clamp(.88rem, 3vw, 1rem); color: color-mix(in srgb, var(--c-ink) 88%, transparent); }

.footnote {
  border-top: 2px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  font-size: .76rem;
  color: color-mix(in srgb, var(--c-accent2) 45%, var(--c-ink));
  letter-spacing: .02em;
}

/* ============================================================== B24 */
/* JS が動かなくても真っ白にしないための塊。                          */
/* ★組み立てが終わった合図（<html data-ready="1"）が付いたときだけ隠す。 */
/*   付かない＝どこかで失敗した、なので出したままにする。             */
/* ★色は config の palette を使わない（G7 のハードコード検査に触れる）。 */
/*   代わりにブラウザの標準色（Canvas / CanvasText）を自分で塗る。      */
/*   JS が動かない＝palette も届かないので、どのサイトでも読める。      */
/* ============================================================== */

.nojs {
  position: absolute;
  inset: 0;
  padding: 12vmin 7vmin;
  display: grid;
  gap: 1.1rem;
  align-content: center;
  justify-items: start;
  background: Canvas;
  color: CanvasText;
  font-family: system-ui, sans-serif;
}

.nojs__lead { font-size: clamp(20px, 5vw, 34px); line-height: 1.5; margin: 0; }

.nojs__price { font-size: clamp(14px, 3.4vw, 18px); line-height: 1.7; margin: 0; }

.nojs__go {
  align-items: center;
  min-height: 48px;
  padding: 0 1.4em;
  border: 2px solid currentColor;
  border-radius: 6px;
  color: CanvasText;
  text-decoration: none;
  font-size: 16px;
  display: inline-flex;
}

/* ★B31-d: 飛び先を持たない（＝押せない）ときは、押せる見た目をやめる。
   文言はそのまま出す。JS が組み上がると href が付き、この指定は外れる。 */
.nojs__go:not([href]) {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
}

/* JS が動くなら隠す（白いちらつきを出さない） */
:root[data-js='1'] .nojs { display: none; }

/* ★読み込みが終わっても組み立ての合図が無い＝失敗。受け皿を戻して出す */
:root[data-boot='failed'] .nojs { display: grid; }