@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

:root {
  --mint: #b4fde1;
  --sky: #add8e6;
  --ink: #172620;
  --line: rgba(23, 38, 32, 0.26);
  --hair: rgba(23, 38, 32, 0.14);
  --card: #ffffff;
  --clay: 0 12px 26px rgba(23, 38, 32, 0.14), inset -3px -3px 10px rgba(23, 38, 32, 0.1), inset 4px 4px 14px rgba(255, 255, 255, 0.92);
  --clay-sm: 0 5px 12px rgba(23, 38, 32, 0.12), inset -2px -2px 6px rgba(23, 38, 32, 0.08), inset 3px 3px 8px rgba(255, 255, 255, 0.9);
  --press: 0 3px 7px rgba(23, 38, 32, 0.18), inset 3px 3px 9px rgba(23, 38, 32, 0.16), inset -2px -2px 8px rgba(255, 255, 255, 0.9);
  --display: 'Cormorant Garamond', 'Crimson Pro', 'Songti SC', 'Noto Serif SC', Georgia, serif;
  --body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.78;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 10% -10%, var(--mint), transparent 62%),
    radial-gradient(820px 520px at 94% 2%, var(--sky), transparent 64%),
    linear-gradient(180deg, #eafff7 0%, #e6f4ff 58%, #f2fffb 100%);
  background-attachment: fixed;
}

img { max-width: 100%; }
a { color: #0d6550; }

.frame {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 18px 116px;
}

/* 角落品牌 */
.crown {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 14px;
}

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 20px;
  border: 3px solid var(--ink);
  background: linear-gradient(150deg, #ffffff, var(--mint));
  box-shadow: var(--clay-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s var(--bounce), box-shadow 0.2s ease-out;
}

.mark:hover { transform: translateY(-2px) rotate(-3deg); }
.mark:active { box-shadow: var(--press); transform: translateY(1px); }

.mark-glyph {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}

.crown-brand {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: rgba(23, 38, 32, 0.72);
}

/* 首屏 */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 22px;
  align-items: center;
  min-height: 45vh;
  padding: 26px;
  margin-bottom: 26px;
  border: 4px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(155deg, #ffffff 12%, var(--mint) 118%);
  box-shadow: var(--clay);
  animation: pop 0.62s var(--bounce) both;
}

.hero.solo { grid-template-columns: minmax(0, 1fr); }

.ghost {
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  z-index: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(4.5rem, 19vw, 14rem);
  line-height: 0.8;
  letter-spacing: 0.03em;
  color: rgba(23, 38, 32, 0.075);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  will-change: transform;
}

.hero-copy {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero h1 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
}

.lead {
  max-width: 34ch;
  margin: 0 auto 20px;
  font-size: 1rem;
  color: rgba(23, 38, 32, 0.8);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: linear-gradient(160deg, #d8fff0, var(--mint));
  box-shadow: var(--clay-sm);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s var(--bounce), box-shadow 0.2s ease-out;
}

.cta:hover { transform: translateY(-2px); }
.cta:active { transform: translateY(1px); box-shadow: var(--press); }

.hero-art {
  margin: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 4px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--clay);
}

.hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 主体两栏 */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 24px;
  align-items: start;
}

.paper {
  padding: clamp(20px, 3vw, 40px);
  border: 4px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--clay);
  min-width: 0;
}

.paper > section {
  scroll-margin-top: 24px;
  animation: rise 0.5s ease-out both;
}

.paper > section:nth-child(1) { animation-delay: 0.02s; }
.paper > section:nth-child(2) { animation-delay: 0.08s; }
.paper > section:nth-child(3) { animation-delay: 0.14s; }
.paper > section:nth-child(4) { animation-delay: 0.2s; }
.paper > section:nth-child(5) { animation-delay: 0.26s; }
.paper > section:nth-child(6) { animation-delay: 0.32s; }
.paper > section:nth-child(7) { animation-delay: 0.38s; }
.paper > section:nth-child(n + 8) { animation-delay: 0.44s; }

.paper > section + section {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 3px dashed var(--hair);
}

.paper h2 {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 7px solid var(--mint);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.3vw, 2rem);
  line-height: 1.3;
}

.paper h3 {
  margin: 22px 0 10px;
  font-family: var(--display);
  font-size: 1.28rem;
  line-height: 1.4;
}

.paper p { margin: 0 0 1em; color: rgba(23, 38, 32, 0.9); }
.paper p:last-child { margin-bottom: 0; }
.paper ul, .paper ol { margin: 0 0 1em; padding-left: 1.3em; }
.paper li { margin-bottom: 0.45em; }
.paper strong { color: var(--ink); }

.paper a {
  color: #0b5c49;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.paper blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  border: 3px solid var(--hair);
  border-radius: 20px;
  background: linear-gradient(160deg, #f4fffb, #eaf7ff);
  box-shadow: inset -2px -2px 8px rgba(23, 38, 32, 0.07);
}

.paper img {
  display: block;
  height: auto;
  margin: 16px 0;
  border: 3px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--clay-sm);
}

.paper pre, .paper table {
  max-width: 100%;
  overflow-x: auto;
}

/* 侧栏 */
.rail {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.rail-card {
  padding: 20px 18px;
  border: 4px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(160deg, #ffffff, #e9fbff 130%);
  box-shadow: var(--clay);
}

.rail-card h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
}

.subtitle {
  margin: 0 0 14px;
  font-size: 1rem;
  color: rgba(23, 38, 32, 0.66);
}

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.rail-list a,
.totop {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 13px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff, #f0fffa);
  box-shadow: var(--clay-sm);
  color: var(--ink);
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.18s var(--bounce), background 0.18s ease-out;
}

.rail-list a:hover,
.totop:hover { transform: translateX(3px); background: linear-gradient(160deg, #ffffff, var(--mint)); }

.rail-list a:active,
.totop:active { box-shadow: var(--press); transform: none; }

.totop {
  margin-top: 14px;
  border-style: dashed;
  justify-content: center;
}

/* 页脚 */
.base {
  display: grid;
  grid-template-columns: 1.1fr 1.7fr auto;
  gap: 18px;
  align-items: start;
  margin: 30px 0 8px;
  padding: 26px 22px;
  border: 4px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(150deg, #ffffff, var(--sky) 135%);
  box-shadow: var(--clay);
}

.base-brand a {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.base-nav dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
}

.base-nav dt {
  font-size: 16px;
  color: rgba(23, 38, 32, 0.58);
  letter-spacing: 0.05em;
}

.base-nav dd { margin: 4px 0 0; }

.base-nav dd a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 10px;
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
  transition: background 0.18s ease-out, border-color 0.18s ease-out;
}

.base-nav dd a:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.85); }

.base-copy p {
  margin: 0;
  font-size: 16px;
  text-align: right;
  color: rgba(23, 38, 32, 0.7);
}

/* 底部固定条 */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 4px solid var(--line);
  background: linear-gradient(180deg, rgba(244, 255, 251, 0.86), rgba(236, 255, 249, 0.98));
  backdrop-filter: blur(10px);
}

.dock-btn {
  justify-self: center;
  min-height: 44px;
  padding: 10px 28px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: linear-gradient(160deg, #d9fff0, var(--mint));
  box-shadow: var(--clay-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.2s var(--bounce), box-shadow 0.2s ease-out;
}

.dock-btn:active { box-shadow: var(--press); transform: translateY(1px); }

.dock-sheet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.24s ease-out;
}

.dock.open .dock-sheet {
  max-height: 52vh;
  overflow-y: auto;
  opacity: 1;
}

.sheet-col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

.sheet-col a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 6px;
  border: 3px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--clay-sm);
  color: var(--ink);
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s var(--bounce);
}

.sheet-col a:active { transform: translateY(1px); }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 880px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .hero-art { order: 2; }
  .base { grid-template-columns: minmax(0, 1fr); }
  .base-copy p { text-align: left; }
}

@media (max-width: 560px) {
  .frame { padding: 12px 12px 104px; }
  .hero { border-radius: 26px; }
  .ghost { font-size: clamp(3.2rem, 25vw, 7rem); top: 1%; }
  .paper { padding: 20px 16px; border-radius: 24px; }
  .base-nav dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dock-sheet { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
}

button[aria-expanded]{min-width:44px;min-height:44px}