/* Hallmark · site template · theme: Hum · nav: N5 Floating pill · footer: Ft2 Inline rule
 *
 * ページの骨格はすべてここにある。各ページの <style> は
 * スタンプのコメントだけを持ち、規則を書かない。
 * ページごとに骨格を書くと、ページを足すたびに別の型が生まれる。
 *
 * 部品:
 *   .page     枠（全ページ共通の幅と余白）
 *   .section  節の間隔（1種類だけ）
 *   .eyebrow / .title / .title--hero / .lede   見出しの組
 *   .prose    文の段（読める幅に収める）
 *   .cards    枠いっぱいの塊。差し色は面ごとに1つ
 *   .figure   枠いっぱいの図
 *   .chips    丸ピルの並び
 *   .index    行き先の一覧
 *   .colophon 奥付
 *
 * contrast: pass (40-41) · mobile: pass (34, 49, 50-57)
 */

*{box-sizing:border-box}
html,body{overflow-x:clip}
/* 広い画面では文字も大きくする。--measure は em なので枠が一緒に広がり、
   1行あたりの文字数は 38字のまま変わらない。
   幅だけ広げると行が長くなって読めなくなる。 */
html{
  font-size:clamp(16px,1.4vw,20px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.95;
  /* 日本語の折り返し。
     line-break:strict = 禁則処理（行頭に 、。 が来ない）
     word-break:auto-phrase = 文節で折り返す。ただし Chrome / Edge のみ。
     Safari には効かないので、見出しと一文は HTML 側で .ph を使って手で固める */
  line-break:strict;word-break:auto-phrase;
  -webkit-font-smoothing:antialiased;
}
/* 日本語は既定で文節を無視して折り返す。列挙は文節ごとに固める */
.ph{display:inline-block}

/* ══ 枠 ═══════════════════════════════════
   幅は1つだけ。枠そのものを可読行長から計算するので、
   中の要素に個別の max-width を持たせない。持たせた瞬間に
   右端が不揃いになる。 */
.page{
  max-width:calc(var(--measure) + var(--space-lg)*2);margin:0 auto;
  padding:var(--space-3xl) var(--space-lg) var(--space-3xl);
}
.section{margin:var(--space-2xl) 0 0}
.section:first-child{margin-top:0}

/* ══ N5 Floating pill ═════════════════════
   中身の幅で決まる大きさにする。画面いっぱいの角丸バーに
   なった時点でピルである意味が消える。 */
.nav{
  position:fixed;inset:var(--space-md) auto auto 50%;transform:translateX(-50%);
  z-index:20;display:inline-flex;align-items:center;gap:var(--space-sm);
  max-width:calc(100vw - var(--space-lg)*2);
  padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  border-radius:var(--r-pill);
  background:color-mix(in oklch,var(--color-paper) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 8px 24px -14px oklch(20% 0.012 250 / .28),
             0 0 0 1px var(--color-paper-3);
}
.nav__mark{
  font-weight:700;font-size:var(--text-sm);letter-spacing:-.01em;
  text-decoration:none;color:var(--color-ink);white-space:nowrap;
  padding:var(--space-sm) var(--space-3xs);
  transition:color var(--dur-fast) var(--ease-out);
}
.nav__mark .g{color:var(--color-coral-t)}
.nav__mark:hover{color:var(--color-coral-t)}
.nav__mark:active{transform:translateY(1px)}
/* ワードマークがホームへの入口を兼ねる。現在地では下線で示すだけにして
   「押しても同じ場所」であることが分かるようにする */
.nav__mark[aria-current="page"]{
  text-decoration:underline;text-decoration-color:var(--color-pear);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
.nav ul{display:flex;align-items:center;gap:var(--space-3xs);list-style:none;margin:0;padding:0}
.nav a.lnk{
  display:block;padding:var(--space-sm) var(--space-md);min-height:36px;
  border-radius:var(--r-pill);
  font-size:var(--text-sm);font-weight:600;white-space:nowrap;
  text-decoration:none;color:var(--color-neutral);
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.nav a.lnk:hover,.nav a.lnk:focus-visible{background:var(--color-paper-3);color:var(--color-ink)}
.nav a.lnk:active{background:var(--color-paper-3)}
.nav a.lnk[aria-current="page"]{background:var(--color-pear);color:var(--color-ink)}
.nav a:focus-visible,.nav__mark:focus-visible{outline:2px solid var(--color-cyan-t);outline-offset:2px}

/* ══ 見出しの組 ═══════════════════════════ */
.eyebrow{
  display:inline-block;margin:0;padding:var(--space-sm) var(--space-md);
  border-radius:var(--r-pill);
  background:var(--color-pear);color:var(--color-ink);
  font-size:var(--text-sm);font-weight:600;letter-spacing:.06em;
}
.title{
  margin:var(--space-md) 0 0;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(28px,6.4vw,48px);line-height:1.28;
  overflow-wrap:anywhere;min-width:0;
}
/* トップだけワードマークが図を兼ねるので、一段大きい変種を用意する */
.title--hero{
  font-size:clamp(46px,15vw,120px);line-height:1.02;letter-spacing:-.03em;
}
.title .g{color:var(--color-coral-t)}
.lede{
  margin:var(--space-md) 0 0;
  font-size:var(--text-lg);line-height:1.8;font-weight:500;
}
.lede mark{
  background-color:transparent;color:inherit;padding:0 .08em;
  background-image:linear-gradient(180deg,transparent 40%,
    var(--color-pear) 40%,var(--color-pear) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ══ 文 ═══════════════════════════════════ */
.prose h2{
  margin:0 0 var(--space-md);font-size:var(--text-sm);font-weight:600;
  letter-spacing:.08em;color:var(--color-neutral);
}
.prose p{margin:0 0 1.15em;line-height:2;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose b{font-weight:600}
.prose .on{color:var(--color-cyan-t);font-weight:600}
.prose code{
  font-family:var(--font-mono);font-size:.9em;
  padding:var(--space-3xs) var(--space-sm);border-radius:8px;
  background:var(--color-paper-2);
}

/* ══ 枠いっぱいの塊 ═══════════════════════
   差し色は面ごとに1つずつ。混ぜない（Hum の規則） */
.cards{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--space-md);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
}
.cards li{
  padding:var(--space-lg);border-radius:var(--r-lg);
  background:var(--color-paper-2);border-top:4px solid var(--color-pear);
}
.cards li:nth-child(2){border-top-color:var(--color-cyan)}
.cards li:nth-child(3){border-top-color:var(--color-coral)}
.cards .k{
  display:block;font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em;
  overflow-wrap:anywhere;min-width:0;
}
.cards li:nth-child(2) .k{color:var(--color-cyan-t)}
.cards .v{
  display:block;margin-top:var(--space-3xs);
  font-size:var(--text-sm);color:var(--color-neutral);line-height:1.75;
}
.cards .v i{font-style:normal;display:block;font-size:var(--text-xs);letter-spacing:.04em}

/* ══ 図 ═══════════════════════════════════ */
.figure{
  margin:0 0 var(--space-lg);padding:var(--space-xl) var(--space-lg);
  border-radius:var(--r-lg);background:var(--color-paper-2);
  display:grid;gap:var(--space-lg) var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  align-items:center;
}
.figure .w{
  margin:0;font-family:var(--font-mono);font-weight:500;
  font-size:clamp(28px,5.2vw,44px);line-height:1.2;letter-spacing:.14em;
  text-align:center;overflow-wrap:anywhere;min-width:0;
}
.figure ul{margin:0;padding:0;list-style:none;min-width:0}
.figure li{
  display:grid;grid-template-columns:minmax(0,7em) minmax(0,1fr);
  gap:0 var(--space-md);align-items:baseline;
  padding:var(--space-sm) 0;border-bottom:1px solid var(--color-paper-3);
}
.figure li:last-child{border-bottom:0}
.figure b{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;min-width:0}
.figure span{font-size:var(--text-sm);color:var(--color-neutral);min-width:0}
.b1{color:var(--color-ink)}
.b2{color:var(--color-cyan-t)}
.b3{color:var(--color-coral-t)}

/* ══ 丸ピルの並び ═════════════════════════ */
.chips{list-style:none;margin:0 0 var(--space-md);padding:0;display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.chips li{
  padding:var(--space-sm) var(--space-md);border-radius:var(--r-pill);
  background:var(--color-paper-2);font-size:var(--text-sm);font-weight:600;
}
.chips li b{color:var(--color-coral-t);font-weight:700}

/* ══ 行き先の一覧 ═════════════════════════ */
.index h2{
  margin:0 0 var(--space-md);font-size:var(--text-sm);font-weight:600;
  letter-spacing:.08em;color:var(--color-neutral);
}
.index ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm)}
.index a{
  display:flex;flex-wrap:wrap;gap:var(--space-3xs) var(--space-md);
  align-items:center;justify-content:space-between;
  padding:var(--space-md) var(--space-lg);min-height:44px;
  border-radius:var(--r-md);background:var(--color-paper-2);
  text-decoration:none;color:inherit;
  transition:transform var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.index a:hover,.index a:focus-visible{transform:translateY(-2px);background:var(--color-paper-3)}
.index a:active{transform:translateY(0);background:var(--color-paper-3)}
.index a:focus-visible{outline:2px solid var(--color-cyan-t);outline-offset:3px}
.index .site{font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.index .kind{font-size:var(--text-sm);color:var(--color-neutral);min-width:0}
.index li:nth-child(2) .kind,
.index li:nth-child(3) .kind{color:var(--color-cyan-t)}
.index li:nth-child(4) .kind{color:var(--color-coral-t)}

/* ══ Ft2 Inline rule ══════════════════════ */
.colophon{
  margin:var(--space-2xl) 0 0;padding:var(--space-md) 0 0;
  border-top:1px solid var(--color-paper-3);
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-neutral);line-height:2;
}
.colophon p{margin:0}
.colophon .rights{margin-top:var(--space-sm)}

@media (max-width:640px){
  .figure li{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .index a:hover,.index a:focus-visible{transform:none}
}