/* ==========================================================================
   潮汐小屋 · feiyuyu.live
   手写样式，无框架。配色是黄昏的海、旧纸和一碗白饭。
   ========================================================================== */

:root {
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    "Source Han Sans SC", system-ui, -apple-system, sans-serif;
  --font-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "LXGW WenKai", var(--font-serif);

  --paper: #f7f1e6;
  --paper-2: #f0e7d7;
  --paper-3: #e6dac5;
  --ink: #14283a;
  --ink-soft: #466172;
  --ink-faint: #6a7f8c;
  --line: rgba(20, 40, 58, 0.14);
  --coral: #c2552f;
  --coral-soft: #f0b49c;
  --sea: #2f7f8f;
  --sea-deep: #14313f;
  --gold: #b9852f;
  --shadow: 0 22px 48px -28px rgba(20, 40, 60, 0.5);
  --radius: 22px;
  --max: 1120px;
  --head-h: 77px;

  --scene-sky-1: #244d66;
  --scene-sky-2: #5d8a98;
  --scene-sky-3: #e6a483;
  --scene-sky-4: #f6d2a8;
  --scene-sea-1: #2c6b7d;
  --scene-sea-2: #12384a;
  --scene-sun: #ffd9a0;
  --scene-cloud: #f7e2cf;
  --scene-bird: #2c4657;
  --scene-foam: #cfeaf0;
  --scene-cliff: #1a2b32;
  --scene-cliff-2: #101f27;
  --scene-house: #2b3b40;
  --scene-roof: #1b2a30;
  --scene-door: #3a2a20;
  --scene-smoke: #e8dccb;
  --scene-whale: #17394a;
  --scene-stars: 0;
  --avatar-bg: #e4f2f5;
  --plate-1: #dceef1;
  --plate-2: #f3e3cf;
  --plate-glow: #ffd9a0;
  --plate-ink: #2b4a5c;
}

html[data-theme="night"] {
  --paper: #0c1923;
  --paper-2: #122330;
  --paper-3: #182d3b;
  --ink: #e8f1f4;
  --ink-soft: #a9c2ce;
  --ink-faint: #7b95a3;
  --line: rgba(220, 240, 248, 0.14);
  --coral: #ff9c76;
  --coral-soft: #8a4634;
  --sea: #6fc0cf;
  --sea-deep: #071723;
  --gold: #e8bc6a;
  --shadow: 0 24px 54px -26px rgba(0, 0, 0, 0.8);

  --scene-sky-1: #06111c;
  --scene-sky-2: #102b3d;
  --scene-sky-3: #234a5c;
  --scene-sky-4: #3d6675;
  --scene-sea-1: #123244;
  --scene-sea-2: #071723;
  --scene-sun: #f4e6c8;
  --scene-cloud: #7e9aa7;
  --scene-bird: #9db6c2;
  --scene-foam: #9fd6e2;
  --scene-cliff: #08131a;
  --scene-cliff-2: #050d12;
  --scene-house: #1a262c;
  --scene-roof: #101a1f;
  --scene-door: #241a14;
  --scene-smoke: #8aa3ad;
  --scene-whale: #0d2634;
  --scene-stars: 1;
  --avatar-bg: #17313f;
  --plate-1: #16323f;
  --plate-2: #2a2a33;
  --plate-glow: #f4e6c8;
  --plate-ink: #cfe4ea;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.78;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 40% at 12% 0%, rgba(207, 96, 57, 0.07), transparent 70%),
    radial-gradient(50% 40% at 88% 12%, rgba(47, 127, 143, 0.08), transparent 70%);
  pointer-events: none;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.01em;
  margin: 0;
}

p { margin: 0; }

::selection { background: var(--coral); color: #fff8ee; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
  border-radius: 4px;
}

/* 纸张颗粒 */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.7'/></svg>");
  mix-blend-mode: multiply;
}
html[data-theme="night"] .grain { mix-blend-mode: screen; opacity: 0.035; }

.wrap {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}
.wrap.narrow { width: min(760px, calc(100% - 48px)); }

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
}
.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
  white-space: nowrap;
}
.btn .icon { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--coral); color: #fff8ee; }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--coral); color: var(--coral); }
.btn.small { min-height: 40px; padding: 9px 18px; font-size: 13px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.text-link .icon { width: 16px; height: 16px; transition: transform 0.2s ease; }
.text-link:hover { color: var(--coral); border-color: var(--coral); }
.text-link:hover .icon { transform: translateX(4px); }
button.text-link { background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; padding-left: 0; padding-right: 0; }

/* ---------- 页头 ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--head-h);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .logo { width: 36px; height: 36px; color: var(--sea); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-family: var(--font-serif); font-size: 18px; letter-spacing: 0.08em; }
.brand-text small { font-size: 9px; letter-spacing: 0.26em; color: var(--ink-faint); text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav a.is-active { color: var(--ink); font-weight: 600; }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 1px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--coral);
  transform: translateX(-50%);
}

.theme-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
}
.theme-btn:hover { color: var(--coral); border-color: var(--coral); transform: rotate(18deg); }
.theme-btn .icon { width: 18px; height: 18px; }
.theme-btn span { display: none; }
html[data-theme="day"] .theme-btn .theme-moon { display: block; }
html[data-theme="night"] .theme-btn .theme-sun { display: block; }

/* ---------- 首页 Hero ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: calc(-1 * var(--head-h));
  padding: calc(var(--head-h) + 74px) 0 80px;
  isolation: isolate;
}
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(0deg, var(--paper) 0%, rgba(247, 241, 230, 0) 14%, rgba(7, 21, 32, 0) 100%),
    linear-gradient(90deg, rgba(7, 21, 32, 0.88) 0%, rgba(7, 21, 32, 0.62) 38%, rgba(7, 21, 32, 0.08) 74%, transparent 100%);
}
html[data-theme="night"] .hero-scrim {
  background:
    linear-gradient(0deg, var(--paper) 0%, rgba(12, 25, 35, 0) 14%, rgba(3, 12, 20, 0) 100%),
    linear-gradient(90deg, rgba(3, 12, 20, 0.94) 0%, rgba(3, 12, 20, 0.68) 40%, rgba(3, 12, 20, 0.15) 76%, transparent 100%);
}
.hero-inner { position: relative; z-index: 1; color: #f9f2e6; }
.hero .kicker { color: #ffd9a0; }
.hero-title {
  font-size: clamp(42px, 7.2vw, 92px);
  line-height: 1.14;
  letter-spacing: 0.02em;
  color: #fff8ec;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
  margin: 0 0 28px;
  max-width: 12em;
}
.hero-title span { display: block; }
.hero-title span:last-child { color: #ffd9a0; }
.hero-lead {
  max-width: 34em;
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(249, 242, 230, 0.86);
  line-height: 1.9;
  margin-bottom: 38px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 54px; }
.hero .btn-solid { background: #f9f2e6; color: #13283a; }
.hero .btn-solid:hover { background: #ffd9a0; color: #13283a; }
.hero .btn-ghost { border-color: rgba(249, 242, 230, 0.34); color: #f9f2e6; }
.hero .btn-ghost:hover { border-color: #ffd9a0; color: #ffd9a0; }
.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 48px;
}
.clock-line { display: flex; align-items: baseline; gap: 12px; }
.clock {
  font-family: var(--font-serif);
  font-size: 30px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: #ffd9a0;
}
.clock-label { font-size: 11px; letter-spacing: 0.2em; color: rgba(249, 242, 230, 0.6); text-transform: uppercase; }
.hero-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-status li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
  border-left: 1px solid rgba(249, 242, 230, 0.22);
  line-height: 1.4;
}
.hero-status span { font-size: 10px; letter-spacing: 0.18em; color: rgba(249, 242, 230, 0.55); }
.hero-status b { font-size: 13px; font-weight: 500; color: rgba(249, 242, 230, 0.92); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  width: 26px;
  height: 42px;
  border: 1px solid rgba(249, 242, 230, 0.4);
  border-radius: 14px;
  transform: translateX(-50%);
}
.scroll-hint span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #ffd9a0;
  animation: scrollDot 1.9s ease-in-out infinite;
}

@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(16px); opacity: 0; }
}

/* ---------- 区块 ---------- */
.section { padding: 96px 0; position: relative; }
.section-head { margin-bottom: 48px; }
.section-head.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(28px, 4.2vw, 46px); max-width: 14em; }
.section-head.center { text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head.center h2 { margin-inline: auto; }
.section-note {
  max-width: 30ch;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  border-left: 2px solid var(--coral);
  padding-left: 16px;
}
.center-link { text-align: center; margin-top: 40px; }

.wave-divider { color: var(--coral); opacity: 0.42; line-height: 0; text-align: center; }
.wave-divider svg { width: 180px; height: 26px; margin-inline: auto; }

/* ---------- 住户卡片 ---------- */
.resident-stack { display: grid; gap: 28px; }
.resident-card {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 36px;
  padding: 30px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.resident-card.is-flip { grid-template-columns: 1fr 290px; }
.resident-card.is-flip .resident-art { order: 2; }
.resident-art {
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--resident-color) 24%, transparent), transparent 70%),
    var(--paper-3);
  display: grid;
  place-items: center;
  padding: 16px;
  min-height: 290px;
  overflow: hidden;
}
.resident-art .avatar-art { width: 100%; max-width: 260px; height: auto; filter: drop-shadow(0 14px 24px rgba(10, 30, 45, 0.18)); }
.resident-stamp {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 3px 9px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
}
.resident-body { display: flex; flex-direction: column; justify-content: center; padding: 6px 4px; }
.resident-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.resident-head h3 { font-size: 38px; letter-spacing: 0.04em; }
.resident-species { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint); }
.resident-role {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
}
.resident-intro { margin-top: 16px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.9; max-width: 42em; }
.trait-row { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 24px; }
.trait { display: grid; gap: 8px; }
.trait-title { font-size: 10px; letter-spacing: 0.18em; color: var(--ink-faint); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips span {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.chips-muted span { color: var(--ink-soft); border-style: dashed; }
.resident-quote {
  margin-top: 26px;
  font-family: var(--font-kai);
  font-size: 20px;
  color: var(--ink);
  padding-left: 18px;
  border-left: 2px solid var(--coral);
  line-height: 1.7;
}

/* ---------- 日志列表 ---------- */
.post-list { border-top: 1px solid var(--line); }
.post-row {
  display: grid;
  grid-template-columns: 84px 1fr 36px;
  gap: 28px;
  align-items: center;
  padding: 30px 6px;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s ease, padding 0.25s ease;
}
.post-row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); padding-left: 16px; padding-right: 16px; }
.post-date { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.post-date b { font-family: var(--font-serif); font-size: 40px; font-weight: 500; color: var(--coral); }
.post-date small { margin-top: 7px; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); }
.post-main { min-width: 0; }
.post-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.post-main h3 { font-size: clamp(20px, 2.4vw, 26px); }
.post-main p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.post-arrow { color: var(--ink-faint); transition: transform 0.25s ease, color 0.25s ease; }
.post-arrow .icon { width: 20px; height: 20px; }
.post-row:hover .post-arrow { color: var(--coral); transform: translateX(4px); }

/* ---------- 引用带 ---------- */
.quote-band {
  background: var(--sea-deep);
  color: #f4ecdd;
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}
.quote-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(255, 217, 160, 0.12), transparent 70%),
    radial-gradient(50% 70% at 10% 90%, rgba(207, 96, 57, 0.18), transparent 70%);
}
.quote-inner { position: relative; text-align: center; max-width: 820px; }
.quote-mark {
  font-family: var(--font-serif);
  font-size: 110px;
  line-height: 0.6;
  color: #ffd9a0;
  opacity: 0.8;
  margin: 0 0 18px;
}
.quote-text {
  font-family: var(--font-kai);
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.quote-by { margin: 18px 0 34px; font-size: 12px; letter-spacing: 0.16em; color: rgba(244, 236, 221, 0.55); }
.quote-band .btn-ghost { border-color: rgba(244, 236, 221, 0.3); color: #f4ecdd; }
.quote-band .btn-ghost:hover { border-color: #ffd9a0; color: #ffd9a0; }

/* ---------- 更多入口 ---------- */
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.more-card {
  display: block;
  padding: 38px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 26px;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.more-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); box-shadow: var(--shadow); }
.more-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--coral) 12%, transparent); color: var(--coral); margin-bottom: 22px; }
.more-icon .icon { width: 22px; height: 22px; }
.more-card h3 { font-size: 26px; margin-bottom: 10px; }
.more-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.85; }
.more-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--coral); }
.more-link .icon { width: 15px; height: 15px; }

/* ---------- 内页页头 ---------- */
.page-head {
  padding: 150px 0 60px;
  position: relative;
}
.page-head h1 {
  font-size: clamp(38px, 6vw, 66px);
  letter-spacing: 0.03em;
  max-width: 14em;
}
.page-lead { margin-top: 22px; max-width: 40em; font-size: 16px; line-height: 1.95; color: var(--ink-soft); }
.page-head + .section { padding-top: 42px; }
.head-journal, .head-gallery, .head-pet, .head-letter { overflow: hidden; }

/* ---------- 日常表 ---------- */
.routine-table { border-top: 1px solid var(--line); }
.routine-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 28px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.85;
}
.routine-head {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding: 12px 4px;
}
.routine-time { font-family: var(--font-serif); font-size: 18px; color: var(--coral); }

/* ---------- 对话 ---------- */
.chat { display: grid; gap: 18px; margin-top: 12px; }
.chat-line { display: flex; align-items: flex-end; gap: 12px; max-width: 86%; }
.chat-line.from-whale { margin-left: auto; flex-direction: row-reverse; }
.chat-face { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--avatar-bg); border: 1px solid var(--line); }
.chat-face svg { width: 100%; height: 100%; }
.chat-bubble {
  padding: 12px 18px;
  border-radius: 18px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.7;
  position: relative;
}
.from-yu .chat-bubble { border-bottom-left-radius: 5px; }
.from-whale .chat-bubble { border-bottom-right-radius: 5px; background: color-mix(in srgb, var(--sea) 12%, var(--paper-2)); }
.chat-note { margin-top: 26px; text-align: center; font-size: 12px; color: var(--ink-faint); letter-spacing: 0.08em; }

/* ---------- CTA ---------- */
.cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 46px;
  border-radius: 30px;
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--coral) 16%, transparent), transparent 60%),
    var(--paper-2);
  border: 1px solid var(--line);
}
.cta-card h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 10px; }
.cta-card p { color: var(--ink-soft); font-size: 14px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.section-cta.slim { padding-top: 0; }

/* ---------- 文章页 ---------- */
.post-head { padding: 150px 0 40px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 22px; }
.post-meta .dot { opacity: 0.5; }
.post-head h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: 0.02em; }
.post-excerpt { margin-top: 20px; font-size: 16px; line-height: 1.9; color: var(--ink-soft); border-left: 2px solid var(--coral); padding-left: 18px; }
.post-body { padding-bottom: 40px; }
.post-body p { margin: 0 0 22px; font-size: 16.5px; line-height: 2.05; }
.post-body h2 {
  font-size: 25px;
  margin: 44px 0 16px;
  padding-left: 16px;
  border-left: 3px solid var(--coral);
}
.post-body strong { font-weight: 700; color: var(--coral); }
.post-body code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.88em; padding: 2px 6px; border-radius: 5px; background: var(--paper-2); }
.post-body blockquote {
  margin: 30px 0;
  padding: 18px 24px;
  background: var(--paper-2);
  border-left: 3px solid var(--sea);
  border-radius: 0 14px 14px 0;
  font-family: var(--font-kai);
  font-size: 18px;
  color: var(--ink-soft);
}
.post-body ul { padding-left: 22px; margin: 0 0 22px; }
.post-body li { margin: 6px 0; }
.post-sign { margin: 48px 0 0; text-align: right; font-family: var(--font-kai); font-size: 15px; color: var(--ink-faint); }
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 0 10px;
  border-top: 1px solid var(--line);
}
.post-nav a { display: flex; flex-direction: column; gap: 4px; max-width: 45%; }
.post-nav a.next { text-align: right; margin-left: auto; }
.post-nav small { font-size: 10px; letter-spacing: 0.18em; color: var(--ink-faint); }
.post-nav span { font-family: var(--font-serif); font-size: 17px; }
.post-nav a:hover span { color: var(--coral); }

/* ---------- 图鉴 ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
.gallery-card { margin: 0; }
.plate { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 0.3s ease; }
.gallery-card:hover .plate { transform: translateY(-5px) rotate(-0.4deg); }
.plate-art { width: 100%; height: auto; }
.gallery-card figcaption { padding: 18px 6px 0; }
.gallery-card h3 { font-size: 22px; margin-bottom: 8px; }
.gallery-card p { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }

/* ---------- 摸摸鱼 ---------- */
.pet-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr); gap: 34px; align-items: start; }
.pet-stage {
  position: relative;
  height: 540px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #f6d7b4 0%, #f2b795 42%, #77aebd 72%, #2c6b7d 100%);
  box-shadow: var(--shadow);
  isolation: isolate;
}
html[data-theme="night"] .pet-stage {
  background: linear-gradient(180deg, #0a1a27 0%, #16384c 45%, #23586b 72%, #0c2634 100%);
}
.pet-sky { position: absolute; inset: 0; }
.pet-sun {
  position: absolute;
  top: 58px; right: 72px;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #ffe0a8;
  box-shadow: 0 0 60px 24px rgba(255, 215, 150, 0.45);
}
html[data-theme="night"] .pet-sun { background: #f4e6c8; box-shadow: 0 0 60px 18px rgba(244, 230, 200, 0.25); }
.pet-cloud {
  position: absolute;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 245, 230, 0.55);
}
.pet-cloud.c1 { width: 140px; top: 92px; left: 46px; }
.pet-cloud.c2 { width: 90px; top: 132px; left: 120px; opacity: 0.6; }
.pet-sea {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -40px;
  height: 190px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.24), transparent 60%), #1f5b6d;
  border-radius: 50% 50% 0 0;
  opacity: 0.9;
}
.pet-bubble {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: 78%;
  padding: 11px 20px;
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.94);
  color: #1b3346;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pet-bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 14px; height: 14px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 3px 0;
}
.pet-bubble.is-pop { animation: bubblePop 0.32s ease; }
@keyframes bubblePop {
  0% { transform: translateX(-50%) scale(0.94); opacity: 0.6; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.pet-whale {
  position: absolute;
  left: 50%;
  bottom: 76px;
  width: min(78%, 420px);
  transform: translateX(-50%);
  z-index: 3;
  cursor: pointer;
  animation: whaleBob 4.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.pet-whale svg { width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 20, 35, 0.27)); }
@keyframes whaleBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-9px); }
}
.pet-whale.is-happy { animation: whaleHappy 0.55s ease; }
@keyframes whaleHappy {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
  30% { transform: translateX(-50%) translateY(-16px) rotate(-2deg); }
  65% { transform: translateX(-50%) translateY(-6px) rotate(2deg); }
}
.pet-whale .pet-tail { transform-origin: 268px 208px; }
.pet-whale.is-wag .pet-tail { animation: tailWag 0.6s ease; }
@keyframes tailWag {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  60% { transform: rotate(9deg); }
}
.pet-whale .pet-eyes { transform-origin: center; }
.pet-whale.is-blink .pet-eyes { animation: blink 0.22s ease; }
@keyframes blink { 50% { transform: scaleY(0.1); } }
.pet-whale.is-blush .pet-head { filter: saturate(1.15); }

.pet-hearts { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.pet-hearts span {
  position: absolute;
  color: #ff8f7a;
  font-size: 20px;
  animation: floatUp 1.5s ease-out forwards;
  text-shadow: 0 2px 8px rgba(255, 120, 100, 0.35);
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(-140px) scale(1.15) rotate(12deg); opacity: 0; }
}
.pet-shadow {
  position: absolute;
  left: 50%;
  bottom: 54px;
  width: 240px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 20, 30, 0.18);
  filter: blur(6px);
  z-index: 2;
}

.pet-panel { display: grid; gap: 26px; }
.pet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pet-actions .btn { flex: 1 1 auto; }
.pet-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper-2);
}
.pet-stats div { padding: 16px 10px; text-align: center; border-right: 1px solid var(--line); }
.pet-stats div:last-child { border-right: 0; }
.pet-stats span { display: block; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-faint); }
.pet-stats b { display: block; margin-top: 4px; font-family: var(--font-serif); font-size: 28px; font-weight: 500; color: var(--coral); font-variant-numeric: tabular-nums; }
.pet-stats b.bump { animation: numBump 0.35s ease; }
@keyframes numBump { 50% { transform: scale(1.22); } }
.achievements { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper-2); }
.achievements .kicker { margin-bottom: 14px; }
.achievements ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.achievements li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); transition: color 0.3s ease; }
.achievements li.locked { opacity: 0.45; }
.achievements li.unlocked { color: var(--ink); }
.ach-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink-faint); flex: none; }
.achievements li.unlocked .ach-dot { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 18%, transparent); }
.pet-note { font-size: 12px; color: var(--ink-faint); text-align: center; }

/* ---------- 信 ---------- */
.letter-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 40px; align-items: start; }
.letter-form {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
.letter-form textarea {
  width: 100%;
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  font-family: var(--font-kai);
  font-size: 17px;
  line-height: 1.9;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}
.letter-form textarea:focus { border-color: var(--coral); }
.letter-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.letter-row input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: 14px;
  outline: none;
}
.letter-row input:focus { border-color: var(--coral); }
.letter-count { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.letter-hint { margin-top: 16px; font-size: 11.5px; color: var(--ink-faint); }
.letter-hint.is-warn { color: var(--coral); }

.bottles { min-height: 240px; }
.bottles-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bottles-head h2 { font-size: 24px; }
.bottle-list { display: grid; gap: 14px; }
.empty-note { padding: 46px 26px; border: 1px dashed var(--line); border-radius: 18px; text-align: center; font-size: 13px; color: var(--ink-faint); display: grid; justify-items: center; gap: 10px; }
.empty-icon { font-size: 30px; line-height: 1; opacity: 0.7; }
.bottle {
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sea) 10%, var(--paper-2)), var(--paper-2));
  border: 1px solid var(--line);
  position: relative;
}
.bottle::before {
  content: "🫙";
  position: absolute;
  top: 14px; right: 18px;
  font-size: 15px;
  opacity: 0.5;
}
.bottle-text { font-family: var(--font-kai); font-size: 16px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }
.bottle-meta { margin-top: 12px; display: flex; gap: 10px; font-size: 11px; color: var(--ink-faint); }
.bottle-sign::after { content: "·"; margin-left: 10px; }

/* ---------- 404 ---------- */
.notfound { padding: 160px 0 100px; }
.notfound-inner { text-align: center; display: grid; justify-items: center; }
.notfound h1 { font-size: clamp(40px, 7vw, 76px); }
.notfound .page-lead { text-align: center; }
.notfound-art { width: 210px; margin: 34px 0; }
.notfound .hero-cta { justify-content: center; }

/* ---------- 页脚 ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 54px 0 40px;
  background: color-mix(in srgb, var(--paper-2) 55%, transparent);
}
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 34px; align-items: start; }
.foot-brand .logo { width: 30px; height: 30px; color: var(--sea); margin-bottom: 10px; }
.foot-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: 0.08em; }
.foot-line { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 13px; color: var(--ink-soft); }
.foot-nav a:hover { color: var(--coral); }
.foot-meta { font-size: 11.5px; color: var(--ink-faint); display: grid; gap: 4px; }
.foot-updated { opacity: 0.8; }

/* ---------- 动效 ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

.waves path { animation: waveDrift 22s linear infinite; }
.waves path:nth-child(2) { animation-duration: 30s; animation-direction: reverse; }
.waves path:nth-child(3) { animation-duration: 40s; }
@keyframes waveDrift {
  from { transform: translateX(0); }
  to { transform: translateX(-180px); }
}
.house .window-pulse { animation: windowPulse 5s ease-in-out infinite; }
@keyframes windowPulse { 50% { opacity: 0.82; } }
.whale-pair g:first-child { animation: whaleSwim 7s ease-in-out infinite; transform-box: fill-box; }
.whale-pair g:nth-child(2) { animation: whaleSwim 9s ease-in-out infinite reverse; transform-box: fill-box; }
@keyframes whaleSwim { 50% { transform: translateY(-8px); } }
.avatar-bubbles circle { animation: bubbleFloat 6s ease-in-out infinite; }
.avatar-bubbles circle:nth-child(2) { animation-delay: 1.2s; }
.avatar-bubbles circle:nth-child(3) { animation-delay: 2.1s; }
@keyframes bubbleFloat { 50% { transform: translateY(-7px); opacity: 0.8; } }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .resident-card, .resident-card.is-flip { grid-template-columns: 1fr; }
  .resident-card.is-flip .resident-art { order: 0; }
  .resident-art { max-width: 340px; margin-inline: auto; min-height: 0; }
  .resident-art .avatar-art { max-width: 220px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .pet-wrap, .letter-wrap { grid-template-columns: 1fr; }
  .pet-stage { height: 470px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-meta { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; }
}

@media (max-width: 760px) {
  :root { --head-h: 104px; }
  .wrap, .wrap.narrow { width: calc(100% - 34px); }
  .head-inner {
    height: var(--head-h);
    flex-wrap: wrap;
    align-content: center;
    gap: 4px 12px;
    padding: 8px 0;
  }
  .brand { order: 1; }
  .brand-text strong { font-size: 17px; white-space: nowrap; }
  .brand-text small { display: none; }
  .brand .logo { width: 30px; height: 30px; }
  .theme-btn { order: 2; margin-left: auto; width: 34px; height: 34px; }
  .nav { order: 3; flex: 1 0 100%; gap: 0; }
  .nav a { padding: 6px 8px; font-size: 12.5px; }
  .hero { min-height: 88vh; padding-top: 132px; }
  .hero-scrim { background: linear-gradient(90deg, rgba(7,21,32,.9) 0%, rgba(7,21,32,.62) 55%, rgba(7,21,32,.18) 100%), linear-gradient(0deg, var(--paper) 0%, rgba(247,241,230,0) 16%); }
  .hero-title { font-size: clamp(32px, 9.8vw, 50px); }
  .hero-foot { gap: 20px; }
  .clock { font-size: 24px; }
  .section { padding: 66px 0; }
  .section-head { margin-bottom: 32px; }
  .post-row { grid-template-columns: 62px 1fr; gap: 16px; }
  .post-arrow { display: none; }
  .post-date b { font-size: 32px; }
  .post-main p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .resident-card { padding: 20px; border-radius: 24px; }
  .resident-head h3 { font-size: 30px; }
  .resident-quote { font-size: 18px; }
  .more-grid, .gallery-grid { grid-template-columns: 1fr; }
  .page-head { padding: 120px 0 44px; }
  .routine-row { grid-template-columns: 72px 1fr; gap: 14px; }
  .routine-row span:nth-child(3) { grid-column: 2; opacity: 0.85; }
  .routine-head span:nth-child(3) { display: none; }
  .routine-head { grid-template-columns: 72px 1fr; }
  .chat-line { max-width: 100%; }
  .cta-card { padding: 30px; }
  .post-head { padding: 120px 0 30px; }
  .post-body p { font-size: 16px; }
  .pet-stage { height: 420px; }
  .pet-whale { width: 84%; bottom: 64px; }
  .pet-bubble { font-size: 13px; max-width: 86%; }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .foot-nav { grid-template-columns: repeat(3, 1fr); }
  .notfound { padding: 130px 0 80px; }
}

@media (max-width: 480px) {
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-status { gap: 8px 14px; }
  .hero-status li { padding-left: 10px; }
  .trait-row { gap: 18px; }
  .pet-actions .btn { font-size: 13px; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}