/* palecomet.com 仮サイトの見た目（見本 A「淡い朝の空」）
   設計: docs/superpowers/specs/2026-09-29-palecomet-site-design.md */

:root {
  --bg-top: #f4f6fb;
  --bg-mid: #eef0f8;
  --bg-bottom: #f7f3f1;
  --text: #3a3f55;
  --comet: #8e98c9;
  --font-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-en: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --gutter: 28px;
  --name-size: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg-top); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bottom) 100%);
  color: var(--text);
  font-family: var(--font-ja);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px var(--gutter);
}

/* 屋号と、その上に浮かぶ彗星（飾り。読み上げ対象外）。
   彗星の SVG は屋号と同じ幅で、屋号の上端に下端を合わせて置く（左右は文字幅の内側に収まる）。
   SVG の高さは幅の 0.15 倍＝屋号の約 1.2 文字分なので、その分の余白を .mark の上に取る */
.mark {
  position: relative;
  align-self: flex-start;
  margin-top: calc(var(--name-size) * 1.4);
}

.comet {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.name {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--name-size);
  line-height: 1.2;
  letter-spacing: .18em;
}

.kana {
  margin: 4px 0 0;
  font-size: 10.5px;
  letter-spacing: .3em;
  opacity: .7;
}

.desc {
  margin: 36px 0 0;
  font-size: 12.5px;
  font-weight: 400; /* 404 の見出し（h1.desc）が、読み込んでいない bold で合成されないように */
  line-height: 1.9;
  opacity: .85;
}

.back {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
}

.foot {
  padding: 0 var(--gutter) 20px;
  font-size: 10.5px;
  opacity: .55;
}

@media (min-width: 768px) {
  :root { --gutter: 14%; --name-size: 44px; }
  .kana { font-size: 12px; }
  .desc { margin-top: 44px; font-size: 14px; }
  .foot { padding-bottom: 24px; font-size: 11.5px; }
}