/* SAMPLE-CAFE テーマ — 配色・書体・タイポサイズのみ
 *
 * 骨格は _kit/style-base.css。ここは「明るいオフホワイト／幾何学サンセリフ500／
 * 余白の広い朝の空気」というこのサンプルの声だけを持つ。
 * 色の実値は書かない。すべて config.js の palette から CSS 変数で届く。
 *
 * 4本での差別化（分類がどれも重ならないようにしている）:
 *   sample01     暗 / 細身サンセリフ 400  / 線のピル
 *   sample-gym   暗 / 極太コンデンス 800  / 塗りのピル
 *   sample-dining 暗 / セリフ 600         / 角の枠線
 *   ここ         ★明 / 幾何学サンセリフ 500 / ★下線だけ（枠を持たない）
 *
 * ★配色の使い分け（実測にもとづく・既存3本と符号が逆）:
 *   背景が明るいので文字は ink（暗色）。明るい面での比は ink 14.28:1。
 *   accent は 4.17:1、accent2 は 3.15:1 で、いずれも 4.5:1 に届かないため
 *   ★文字色には使わない。罫・下線・面の縁だけに使う。
 *   accent の塗りの上も ink 3.43:1 / bg 4.17:1 で成立しないので、塗りボタンは採らない。
 */

html, body {
  /* --c-bg が入るまでの下地。明るい基調なので白飛び防止側ではなく地の色に寄せる */
  background: var(--c-bg, #fff);
}

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

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

/* ------------------------------------------------------------ タイポ */
/* 幾何学サンセリフ。字面が素直なので、字間をわずかに開けて軽さを出す */

.headline {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 500);
  line-height: 1.12;
  letter-spacing: -.005em;
  font-size: clamp(2rem, 8vw, 6.5rem);
  color: var(--c-ink);
}

.headline--hero { font-size: var(--hero-size, clamp(2.4rem, 15vw, 9.5rem)); letter-spacing: -.015em; }

.sub {
  font-size: clamp(.95rem, 3.4vw, 1.2rem);
  color: var(--c-ink);
  line-height: 1.95;
}

/* 緑の短い罫を頭に添えたラベル行。色は罫だけに使い、文字は ink のまま */
.tagline {
  font-size: clamp(.85rem, 3vw, 1.05rem);
  color: var(--c-ink);
  letter-spacing: .04em;
  border-left: 3px solid var(--c-accent);
  padding-left: .8em;
}

/* ★4本目の CTA は「下線だけ」。枠を持たないのが既存3種との違い。
   塗りも枠線もこの明色パレットではコントラストが成立しないという実測結果とも一致する */
.cta {
  border: 0;
  border-bottom: 2px solid var(--c-accent2);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: clamp(.9rem, 3.2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: .14em;
}
.cta:hover, .cta:focus-visible { border-bottom-color: var(--c-ink); background: transparent; color: var(--c-ink); }

/* S6 のブランド表示。明色基調に発光は効かないので、
   下に太い帯を敷いて「置いた」印象にする（光らせない） */
.neon {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 500);
  font-size: clamp(1.9rem, 9vw, 7rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--c-ink);
  text-shadow: none;
  box-shadow: inset 0 -.28em 0 color-mix(in srgb, var(--c-accent) 34%, transparent);
  display: inline-block;
  align-self: flex-start;
  padding: 0 .12em;
}

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

.stage--static .headline { font-size: clamp(1.8rem, 6vw, 3.6rem); }

/* 余白で仕切る品書き。罫は細く、色は accent2 */
.cards {
  background: transparent;
  border: 0;
}

.card {
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--c-accent2) 38%, transparent);
}
.card__name {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--c-ink);
}
.card__price {
  font-family: var(--f-display);
  font-size: 1.7rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
/* 明るい地では ink を薄めるほどコントラストが落ちる（暗色基調と逆）。
   4.5:1 を確保できる濃さまでしか薄くしない */
.card__note { font-size: .83rem; color: color-mix(in srgb, var(--c-ink) 88%, transparent); }

.map {
  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
  background: color-mix(in srgb, var(--c-accent) 7%, transparent);
}
.map__pin {
  background: var(--c-accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-accent) 18%, transparent);
}
.map__label { font-size: .8rem; color: color-mix(in srgb, var(--c-ink) 90%, transparent); letter-spacing: .04em; }

.access div { font-size: clamp(.9rem, 3.1vw, 1.05rem); color: var(--c-ink); }

.footnote {
  border-top: 2px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
  font-size: .78rem;
  color: color-mix(in srgb, var(--c-ink) 88%, transparent);
  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; }