@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');

:root{
  --cream:#f5e6c8;
  --tan:#d4a574;
  --ink:#262117;
  --brown:#4b3c26;
  --paper:#fbf3e2;
  --line:rgba(38,33,23,.24);
  --serif:'Merriweather',Georgia,'Songti SC','Noto Serif SC',serif;
  --display:'Abril Fatface','Merriweather',Georgia,serif;
  --dock:68px;
}

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

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 17px/1.75 var(--serif);
  overflow-x:hidden;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px) + 1.4rem);
}

[id]{scroll-margin-top:1.6rem}

body.filmic::before,
body.filmic::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

body.filmic::before{
  z-index:300;
  opacity:.3;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}

body.filmic::after{
  z-index:299;
  background:
    radial-gradient(circle at 8% 6%,rgba(226,163,96,.28),transparent 42%),
    radial-gradient(circle at 92% 88%,rgba(214,142,84,.22),transparent 38%);
  animation:leak 12s ease-in-out infinite alternate;
}

@keyframes grain{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(-2px,1px,0)}
  66%{transform:translate3d(1px,-2px,0)}
  100%{transform:translate3d(0,0,0)}
}

@keyframes leak{
  from{opacity:.55}
  to{opacity:1}
}

a{color:inherit}

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

/* ---------- 底部固定导航 ---------- */

.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:600;
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.3rem .55rem calc(.3rem + env(safe-area-inset-bottom,0px));
  background:#262117;
  color:var(--cream);
  border-top:2px solid var(--tan);
  box-shadow:0 -6px 18px rgba(38,33,23,.22);
}

.dock-brand{
  font-family:var(--display);
  font-size:1.02rem;
  line-height:1.15;
  letter-spacing:.02em;
  color:var(--cream);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.4rem .45rem;
  white-space:nowrap;
  border-right:1px solid rgba(245,230,200,.22);
}

.dock-rail{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:stretch;
  gap:.1rem;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}

.dock-rail::-webkit-scrollbar{display:none}

.dock-rail a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.4rem .55rem;
  font-size:1rem;
  color:#e6d3af;
  text-decoration:none;
  white-space:nowrap;
  border-left:1px solid rgba(245,230,200,.16);
}

.dock-rail li:first-child a{border-left:0}
.dock-rail li:nth-child(3) a,
.dock-rail li:nth-child(5) a{
  border-left:2px solid var(--tan);
  margin-left:.3rem;
}

.dock-rail a:hover,
.dock-rail a:focus-visible{
  background:rgba(212,165,116,.24);
  color:var(--cream);
}

.dock-call{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.4rem .6rem;
  font-size:1rem;
  text-decoration:none;
  color:var(--cream);
  border:1px solid rgba(212,165,116,.7);
}

.dock-menu{position:relative}

.dock-menu summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.4rem .7rem;
  font-size:1rem;
  color:var(--cream);
  background:var(--tan);
  color:#262117;
  cursor:pointer;
  user-select:none;
}

.dock-menu summary::-webkit-details-marker{display:none}

.dock-menu[open] summary{
  background:#e8c79b;
}

.dock-panel{
  position:absolute;
  right:0;
  bottom:calc(100% + .55rem);
  width:min(86vw,320px);
  max-height:60vh;
  overflow:auto;
  display:grid;
  gap:.55rem;
  padding:.7rem;
  background:#2e2718;
  border:2px solid var(--tan);
  box-shadow:0 10px 26px rgba(24,20,12,.45);
}

.dock-group{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.1rem;
}

.dock-group + .dock-group{
  border-top:1px dashed rgba(245,230,200,.3);
  padding-top:.55rem;
}

.dock-group a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:.35rem .5rem;
  font-size:1rem;
  color:#eddfc4;
  text-decoration:none;
}

.dock-group a:hover{
  background:rgba(212,165,116,.24);
  color:#fff8e8;
}

/* ---------- 首屏 ---------- */

.stage{
  position:relative;
  min-height:100svh;
  display:grid;
  align-content:end;
  overflow:hidden;
  color:var(--cream);
  padding:2.4rem 1.1rem calc(var(--dock) + 3.6rem);
  background:linear-gradient(165deg,#3a2f1e 0%,#262117 52%,#191610 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 3.2rem),0 100%);
}

.stage-num{
  position:absolute;
  top:.6rem;
  left:-.4rem;
  z-index:0;
  font-family:var(--display);
  font-size:clamp(8rem,42vw,24rem);
  line-height:.82;
  color:rgba(212,165,116,.17);
  letter-spacing:-.02em;
  pointer-events:none;
}

.stage-copy{
  position:relative;
  z-index:2;
  max-width:20ch;
}

.stage-copy h1{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.3rem,9.5vw,5.4rem);
  line-height:1.02;
  letter-spacing:.005em;
  text-shadow:0 3px 0 rgba(0,0,0,.28);
}

.stage-copy h1:hover{
  animation:vhs .6s steps(5) 1;
}

@keyframes vhs{
  0%{transform:none}
  25%{transform:translateX(4px) skewX(-4deg);text-shadow:3px 0 rgba(212,165,116,.9),-3px 0 rgba(130,190,190,.55)}
  55%{transform:translateX(-3px) skewX(3deg)}
  80%{transform:translateX(1px) skewX(-1deg)}
  100%{transform:none}
}

.stage-frame{
  position:absolute;
  z-index:1;
  top:2.6rem;
  right:1rem;
  width:min(43%,250px);
  margin:0;
  padding:.5rem .5rem 1.7rem;
  background:#f8eedb;
  border:1px solid rgba(38,33,23,.35);
  box-shadow:0 10px 24px rgba(15,12,8,.42);
  transform:rotate(3.4deg);
}

.stage-img,
.stage-flat{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  background:#4a3c26;
  filter:sepia(.34) contrast(1.07) saturate(.78);
}

/* ---------- 主体 ---------- */

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:2.4rem 1.1rem 0;
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
}

.rail{
  border-top:2px solid var(--ink);
  padding-top:.7rem;
}

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

.rail-list a{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:44px;
  padding:.3rem .1rem;
  font-size:1rem;
  line-height:1.3;
  color:var(--brown);
  text-decoration:none;
  border-bottom:1px dashed var(--line);
}

.rail-num{
  font-family:var(--display);
  font-size:.86rem;
  letter-spacing:.08em;
  color:var(--tan);
}

.rail-list a:hover{
  background:#efdfbe;
  color:var(--ink);
  padding-left:.4rem;
}

.body-main{min-width:0}

.lede{
  border-top:0;
  padding-top:.1rem;
}

.lede h2{
  margin:0 0 .7rem;
}

.lede .subtitle{
  margin:0;
  color:var(--brown);
  font-size:1.06rem;
  line-height:1.7;
}

.body-main > article{
  padding:2.6rem 0;
  border-top:1px dashed var(--line);
}

.body-main > .lede{
  border-top:0;
  padding-top:.1rem;
}

.body-main h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.65rem,4.6vw,2.65rem);
  line-height:1.16;
  letter-spacing:.004em;
  margin:0 0 .85rem;
}

.body-main h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.25rem,3.2vw,1.6rem);
  line-height:1.25;
  margin:2rem 0 .6rem;
}

.body-main p{
  margin:0 0 1.05rem;
  max-width:64ch;
}

.body-main p:last-child{margin-bottom:0}

.body-main ul,
.body-main ol{
  max-width:64ch;
  margin:0 0 1.15rem;
  padding-left:1.2rem;
}

.body-main li{margin:.35rem 0}
.body-main li::marker{color:var(--tan)}

.body-main a{
  color:#7c4f1c;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.body-main a:hover{color:#4b2f0d}

.body-main blockquote{
  margin:1.6rem 0;
  padding:1rem 1.15rem;
  background:#efdfbe;
  border-left:5px solid var(--tan);
}

.body-main blockquote p:last-child{margin-bottom:0}

.body-main figure{
  margin:1.6rem 0;
  padding:.55rem .55rem 1.6rem;
  background:#f8eedb;
  border:1px solid rgba(38,33,23,.3);
  box-shadow:0 6px 16px rgba(38,33,23,.14);
}

.body-main figure img{
  display:block;
  width:100%;
  height:auto;
  filter:sepia(.28) contrast(1.05) saturate(.82);
}

.body-main aside{
  margin:1.7rem 0;
  padding:1rem 1.15rem;
  background:#e9d8b5;
}

.body-main aside p:last-child{margin-bottom:0}

.body-main img{max-width:100%;height:auto}

.body-main hr{
  border:0;
  border-top:1px dashed var(--line);
  margin:2rem 0;
}

.body-main table{
  width:100%;
  border-collapse:collapse;
  margin:1.4rem 0;
  font-size:1rem;
}

.body-main th,
.body-main td{
  padding:.55rem .5rem;
  border-bottom:1px dashed var(--line);
  text-align:left;
  vertical-align:top;
}

.body-main th{background:#efdfbe}

/* ---------- 页脚 ---------- */

.colophon{
  max-width:1180px;
  margin:3rem auto 0;
  padding:1.3rem 1.1rem 0;
  border-top:2px solid var(--ink);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.5rem 1rem;
}

.colophon p{
  margin:0;
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:.02em;
}

.colophon small{
  font-size:.95rem;
  letter-spacing:.14em;
  color:var(--brown);
}

/* ---------- 滚动显影 ---------- */

.rv{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);
}

.rv-in{
  opacity:1;
  transform:none;
}

/* ---------- 断点 ---------- */

@media (min-width:760px){
  .dock{
    padding-left:1.1rem;
    padding-right:1.1rem;
  }

  .stage{
    padding-left:2rem;
    padding-right:2rem;
    padding-bottom:calc(var(--dock) + 4.4rem);
  }

  .stage-frame{
    top:3.4rem;
    right:2rem;
    width:min(38%,320px);
  }

  .wrap,
  .colophon{
    padding-left:2rem;
    padding-right:2rem;
  }
}

@media (min-width:940px){
  .wrap{
    grid-template-columns:218px minmax(0,1fr);
    gap:3.4rem;
    padding-top:3.4rem;
  }

  .rail{
    position:sticky;
    top:1.6rem;
    align-self:start;
  }

  .stage-copy{max-width:24ch}

  .body-main > article{padding:3.4rem 0}
  .body-main > .lede{padding-top:.1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  body.filmic::before,
  body.filmic::after,
  .stage-copy h1:hover{animation:none}

  .rv{
    opacity:1;
    transform:none;
    transition:none;
  }
}

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