@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700;800&display=swap');

:root{
  --ice:#c8e0f4;
  --blush:#f5e0e8;
  --ink:#171f26;
  --ink2:#3a4855;
  --glass:rgba(255,255,255,.5);
  --up:-5px -5px 15px rgba(255,255,255,.85);
  --dn:6px 6px 16px rgba(23,31,38,.14);
  --line:rgba(23,31,38,.1);
}

*{box-sizing:border-box}

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

body{
  margin:0;
  font-family:'EB Garamond','Crimson Text',"Songti SC","Noto Serif SC",Georgia,serif;
  font-size:17px;
  line-height:1.8;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 8% 0%, #e4f0fa 0%, rgba(228,240,250,0) 60%),
    radial-gradient(110% 70% at 96% 22%, #fbeaf0 0%, rgba(251,234,240,0) 62%),
    linear-gradient(168deg, var(--ice) 0%, #e9eef5 52%, var(--blush) 100%);
  background-attachment:fixed;
  min-height:100vh;
}

a{color:inherit}

img{max-width:100%}

/* 顶栏 */
.top{
  position:sticky;
  top:0;
  z-index:30;
  background:linear-gradient(180deg, rgba(236,244,250,.94), rgba(236,244,250,.7));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 22px rgba(23,31,38,.08);
}

.top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 18px 4px;
  max-width:1160px;
  margin:0 auto;
}

.brand{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:4px 6px;
  text-decoration:none;
  color:var(--ink);
  letter-spacing:.16em;
  font-weight:700;
}

.brand-word{font-size:18px}

.logo{
  display:block;
  width:40px;
  height:40px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:var(--up),var(--dn);
}

.find{margin:0}

.find input{
  width:150px;
  min-height:42px;
  padding:9px 16px;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  border:0;
  border-radius:999px;
  background:#e9f0f7;
  box-shadow:inset 3px 3px 9px rgba(23,31,38,.14), inset -3px -3px 9px rgba(255,255,255,.95);
}
.find input:focus{outline:2px solid rgba(23,31,38,.35);outline-offset:2px}

.dock-nav ol{
  list-style:none;
  display:flex;
  gap:8px;
  margin:0;
  padding:6px 18px 12px;
  overflow-x:auto;
  scrollbar-width:none;
}
.dock-nav ol::-webkit-scrollbar{display:none}

.dock-nav li{flex:0 0 auto}

.pill{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:8px 17px;
  border-radius:999px;
  font-size:16px;
  letter-spacing:.04em;
  text-decoration:none;
  white-space:nowrap;
  background:linear-gradient(145deg,#ffffff,#dbe8f4);
  box-shadow:var(--up),var(--dn);
  transition:transform .16s ease, box-shadow .16s ease;
}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:scale(.96);box-shadow:inset 3px 3px 9px rgba(23,31,38,.16), inset -3px -3px 9px #fff}

/* 版心 */
.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 18px;
}

/* 首屏 */
.hero{
  position:relative;
  min-height:calc(100svh - 118px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 16px 56px;
  overflow:hidden;
}

.hero-ghost{
  position:absolute;
  left:50%;
  top:4%;
  transform:translateX(-50%);
  font-size:clamp(150px,42vw,400px);
  line-height:.8;
  font-weight:800;
  color:rgba(255,255,255,.55);
  letter-spacing:-.05em;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}

.collage{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.collage figure{
  position:absolute;
  margin:0;
  width:min(28vw,230px);
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:#dce8f2;
  box-shadow:var(--up),var(--dn);
  transform:rotate(var(--r,0deg)) translateY(var(--py,0px));
  transition:transform .3s ease;
}
.collage figure:nth-child(1){left:3%;top:16%;--r:-5deg}
.collage figure:nth-child(2){right:3%;bottom:12%;--r:4deg}
.collage img{width:100%;height:100%;object-fit:cover;display:block}

.hero-plate{
  position:relative;
  z-index:2;
  max-width:640px;
  text-align:center;
  padding:32px 24px 30px;
  background:rgba(255,255,255,.46);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--up),var(--dn);
}

.hero-plate h1{
  margin:0 0 14px;
  font-size:clamp(27px,5.2vw,50px);
  line-height:1.28;
  letter-spacing:.04em;
  font-weight:700;
}

.hero-plate hr{
  width:68px;
  height:3px;
  border:0;
  margin:0 auto 18px;
  background:var(--ink);
  opacity:.72;
}

.hero-desc{
  margin:0;
  font-size:17px;
  line-height:1.85;
  color:var(--ink2);
}

/* 正文与侧栏 */
.body-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 264px;
  gap:38px;
  align-items:start;
  padding:54px 0 70px;
}

.prose article{
  position:relative;
  padding:26px 24px 22px;
  margin:0 0 26px;
  background:var(--glass);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  box-shadow:var(--up),var(--dn);
  scroll-margin-top:142px;
}

.prose article::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:-14px;
  height:1px;
  background:linear-gradient(90deg,var(--line),rgba(23,31,38,0));
}
.prose article:last-child::after{display:none}

.prose h2{
  margin:0 0 8px;
  font-size:clamp(21px,3vw,29px);
  line-height:1.36;
  letter-spacing:.03em;
  font-weight:700;
}

.prose h2 + hr{
  width:100%;
  height:1px;
  border:0;
  margin:0 0 16px;
  background:linear-gradient(90deg,rgba(23,31,38,.34),rgba(23,31,38,0));
}

.prose h3{
  margin:24px 0 8px;
  font-size:20px;
  line-height:1.5;
  letter-spacing:.02em;
}

.prose h3 + hr{
  width:100%;
  height:1px;
  border:0;
  margin:0 0 14px;
  background:linear-gradient(90deg,rgba(23,31,38,.24),rgba(23,31,38,0));
}

.prose p{margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:700}
.prose ul,
.prose ol{margin:0 0 14px;padding-left:1.3em}
.prose li{margin:0 0 6px}
.prose a{color:#1b3a52;text-underline-offset:3px}
.prose blockquote{
  margin:16px 0;
  padding:12px 16px;
  border-left:3px solid rgba(23,31,38,.35);
  background:rgba(255,255,255,.35);
}
.prose blockquote p:last-child{margin-bottom:0}

.rail{
  position:sticky;
  top:134px;
  padding:20px 18px 16px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--up),var(--dn);
}

.rail h2{
  margin:0 0 8px;
  font-size:17px;
  letter-spacing:.18em;
  font-weight:600;
}

.rail hr{
  width:100%;
  height:1px;
  border:0;
  margin:0 0 10px;
  background:linear-gradient(90deg,rgba(23,31,38,.3),rgba(23,31,38,0));
}

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

.rail a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:6px 2px;
  font-size:16px;
  color:var(--ink2);
  text-decoration:none;
  border-bottom:1px solid rgba(23,31,38,.08);
  transition:color .15s ease, padding-left .15s ease;
}
.rail li:last-child a{border-bottom:0}
.rail a:hover{color:var(--ink);padding-left:5px}

/* 页脚 */
.base{
  padding:10px 18px 34px;
  text-align:center;
}
.base-word{overflow:hidden}
.base .huge{
  margin:0;
  font-size:clamp(36px,11.5vw,124px);
  line-height:.95;
  font-weight:800;
  letter-spacing:.05em;
  color:rgba(23,31,38,.17);
  white-space:nowrap;
}
.base-note{max-width:640px;margin:0 auto;padding-top:14px}
.base-note p{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.7;
  color:var(--ink2);
}
.base-note .copy{letter-spacing:.12em;color:var(--ink)}

.totop{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:6px 20px;
  margin-top:4px;
  border-radius:999px;
  font-size:16px;
  text-decoration:none;
  background:linear-gradient(145deg,#ffffff,#dde9f4);
  box-shadow:var(--up),var(--dn);
  transition:transform .16s ease;
}
.totop:active{transform:scale(.96)}

/* 断点 */
@media (max-width:900px){
  .body-grid{grid-template-columns:minmax(0,1fr);gap:26px;padding:40px 0 56px}
  .rail{position:static;order:2}
  .hero{min-height:calc(100svh - 128px);padding-top:52px}
  .collage figure{width:34vw}
  .collage figure:nth-child(1){left:-3%;top:10%}
  .collage figure:nth-child(2){right:-3%;bottom:9%}
  .hero-plate{max-width:min(94%,520px);padding:26px 18px 24px}
}

@media (max-width:420px){
  .find input{width:118px}
  .top-row{padding:10px 12px 4px}
  .dock-nav ol{padding:6px 12px 12px}
  .wrap{padding:0 12px}
  .prose article{padding:22px 16px 18px}
  .prose article::after{left:16px;right:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
  .collage figure{transform:rotate(var(--r,0deg))}
}

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