/*
 * bio（公開のリンクページ）。スマホで開かれる前提の 1 カラム
 *
 * 管理画面（apps/console/DESIGN.md）とトークンを揃える:
 *   地 #F3F3F6 / 文字 #1C1A2B（紫みの黒＝ムクドリの羽）/ アクセント #17695A（羽の光沢の緑。ボタンだけ）
 *   空の帯 #CFD2E6 → #F6DCC8（ダークは #14142A → #5A3329）
 * 大胆さは冒頭の空の帯（handle ごとに形が変わる群れ）1 か所だけに使い、下は静かに組む
 */
:root {
  color-scheme: light;
  --bg: #f3f3f6;
  --surface: #ffffff;
  --ink: #1c1a2b;
  --ink-2: #4b4860;
  --muted: #6c6981;
  --line: #e2e1ea;
  --accent: #17695a;
  --accent-ink: #0f5246;
  --on-accent: #ffffff;
  --focus: #17695a;
  --sky-top: #cfd2e6;
  --sky-bottom: #f6dcc8;
  --sky-glow: #fbe9dc;
  --bird: #1c1a2b;

  --font: "Murecho", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --radius-control: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #13121c;
    --surface: #1c1b28;
    --ink: #eeedf4;
    --ink-2: #c4c2d3;
    --muted: #9b98ae;
    --line: #2c2a3b;
    --accent: #52c2a6;
    --accent-ink: #7fd6c0;
    --on-accent: #0d1f1a;
    --focus: #52c2a6;
    --sky-top: #14142a;
    --sky-bottom: #5a3329;
    --sky-glow: #8a4a35;
    --bird: #0a0912;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  font-feature-settings: "palt" 0;
}

a {
  color: var(--accent-ink);
}

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

/* ---- 空の帯 ---- */

.sky {
  position: relative;
  min-height: 248px;
  padding: var(--space-8) var(--space-4) var(--space-6);
  display: flex;
  align-items: flex-end;
  /* 群れの後ろだけ空を明るくして、鳥の影を読めるようにする */
  background:
    radial-gradient(ellipse 60% 70% at 72% 62%, var(--sky-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  overflow: hidden;
}

.flock {
  position: absolute;
  right: 0;
  bottom: 0;
  /* 空を覆うように切り抜く。広い画面では鳥が大きくなりすぎないよう幅に上限を付けて右に寄せる */
  width: min(100%, 960px);
  height: 100%;
}

.flock path {
  fill: none;
  stroke: var(--bird);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sky-text {
  position: relative;
  width: 100%;
  /* 本文（.page の内側）と左端を揃える */
  max-width: calc(560px - 2 * var(--space-4));
  margin: 0 auto;
}

.handle {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

.name {
  margin: var(--space-1) 0 0;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-wrap: balance;
  /* 日本語の見出しを文節で折り返す */
  word-break: auto-phrase;
}

.where,
.lede {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

@media (prefers-color-scheme: dark) {
  .handle,
  .where,
  .lede {
    color: #d8d3e4;
  }
  .name {
    color: #f6f2fb;
  }
}

/* ---- 本文 ---- */

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.notice {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}

.body-text {
  margin: 0;
  color: var(--ink-2);
}

.posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: var(--space-4);
}

.post:target {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}

.meta {
  margin: 0;
  display: flex;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.caption {
  margin: var(--space-2) 0 0;
  font-size: 17px;
  line-height: 1.7;
  max-width: 34em;
}

.product {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.actions {
  margin: var(--space-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.actions:empty {
  display: none;
}

.go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}

.go:hover {
  background: var(--accent-ink);
}

@media (prefers-color-scheme: dark) {
  .go:hover {
    background: #7fd6c0;
  }
}

.original {
  font-size: 13px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.foot {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-8);
  font-size: 13px;
  color: var(--muted);
}

.foot p {
  margin: 0;
}

@media (min-width: 720px) {
  .sky {
    min-height: 300px;
  }
  .name {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .flock {
    animation: drift 1.6s ease-out both;
  }
  @keyframes drift {
    from {
      opacity: 0;
      transform: translate3d(-12px, 6px, 0);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}