@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root{
  --cream:#f5e6c8;
  --cream-soft:#f0ddb9;
  --paper:#fbf3e2;
  --caramel:#d4a574;
  --caramel-deep:#b07f4c;
  --ink:#262117;
  --ink-soft:#4a4034;
  --line:rgba(38,33,23,.2);
  --line-soft:rgba(38,33,23,.1);
  --cream-line:rgba(245,230,200,.26);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
  letter-spacing:.01em;
}

/* 胶片颗粒 */
body::before{
  content:"";
  position:fixed;
  inset:-30%;
  z-index:40;
  pointer-events:none;
  opacity:.14;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:180px 180px;
  animation:grain 1.2s steps(3) infinite;
}

@keyframes grain{
  0%{transform:translate3d(0,0,0);}
  33%{transform:translate3d(-1.6%,1.2%,0);}
  66%{transform:translate3d(1.2%,-1.8%,0);}
  100%{transform:translate3d(0,0,0);}
}

/* 漏光 */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:soft-light;
  background:
    radial-gradient(58% 44% at 6% -4%,rgba(212,165,116,.6),transparent 70%),
    radial-gradient(42% 38% at 102% 22%,rgba(255,246,224,.75),transparent 66%),
    radial-gradient(52% 46% at 48% 108%,rgba(176,127,76,.42),transparent 72%);
  animation:leak 18s ease-in-out infinite alternate;
}

@keyframes leak{
  from{opacity:.65;transform:translate3d(0,0,0) scale(1);}
  to{opacity:1;transform:translate3d(1.6%,-1.2%,0) scale(1.08);}
}

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

a{color:inherit;}

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

/* 顶部胶囊导航 */
.tape{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(245,230,200,.92);
  border-bottom:1px dashed var(--line);
  -webkit-backdrop-filter:blur(8px) saturate(.9);
  backdrop-filter:blur(8px) saturate(.9);
}

.tape-inner{
  padding:.6rem clamp(.8rem,3vw,2.2rem);
}

.tape-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.4rem .45rem;
  margin:0;
  padding:0;
  list-style:none;
}

.tape-list a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.55rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.22);
  color:var(--ink);
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}

.tape-list a:hover,
.tape-list a:focus-visible,
.tape-list a.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--cream);
  transform:translateY(-1px);
}

.tape-brand{margin-inline:.15rem;}

.tape-list .brand{
  border-color:transparent;
  background:transparent;
  font-family:"Playfair Display",Georgia,"Songti SC",serif;
  font-size:1.32rem;
  font-weight:600;
  letter-spacing:.03em;
  padding:.35rem 1.1rem;
}

.tape-list .brand:hover{
  background:var(--caramel);
  color:var(--ink);
  border-color:var(--caramel);
}

/* 主体两栏 */
main{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) 252px;
  gap:clamp(1.4rem,3.5vw,2.8rem);
  padding-inline:clamp(1rem,4vw,3rem);
  align-items:start;
}

article{min-width:0;}

/* 首屏 */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);
  align-items:center;
  gap:clamp(1.4rem,4vw,3.2rem);
  padding-block:clamp(1.8rem,5vw,3.4rem);
  background-color:var(--cream);
  background-image:radial-gradient(rgba(38,33,23,.17) 1px,transparent 1px);
  background-size:18px 18px;
  animation:fadeIn .9s ease both;
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

.hero-copy{text-align:center;}

.hero-title{
  margin:0 0 1rem;
  font-family:"Playfair Display",Georgia,"Songti SC",serif;
  font-weight:600;
  font-size:clamp(2.2rem,5.4vw,4rem);
  line-height:1.14;
  letter-spacing:.01em;
  text-wrap:balance;
}

.hero-title::after{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin:1.2rem auto 0;
  background:linear-gradient(90deg,var(--caramel),var(--caramel-deep));
}

.hero-lead{
  max-width:32ch;
  margin:0 auto 1.4rem;
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.85;
}

.hero-cue{margin:0;}

.hero-cue a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.5rem 1.5rem;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
  font-size:16px;
  text-decoration:none;
  transition:background .25s ease,transform .25s ease;
}

.hero-cue a:hover{background:var(--caramel-deep);transform:translateY(-2px);}

.hero-frame{
  position:relative;
  margin:0;
  justify-self:center;
  width:100%;
  max-width:400px;
  padding:12px 12px 52px;
  background:var(--paper);
  box-shadow:0 18px 34px -18px rgba(38,33,23,.55),0 2px 0 rgba(38,33,23,.1);
  transform:rotate(1.6deg);
  animation:shake 1.2s ease both;
}

@keyframes shake{
  0%{transform:rotate(3.4deg) translateY(10px);opacity:0;}
  60%{transform:rotate(.8deg) translateY(0);opacity:1;}
  100%{transform:rotate(1.6deg);}
}

.hero-frame img{
  display:block;
  width:100%;
  filter:sepia(.34) saturate(.78) contrast(1.06);
}

.hero-frame figcaption{
  position:absolute;
  left:14px;
  bottom:14px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:16px;
  letter-spacing:.16em;
  color:var(--ink-soft);
}

/* 正文 */
.script > section{
  padding-block:clamp(2.4rem,5.5vw,4rem);
  padding-inline:clamp(.6rem,2vw,1.4rem);
  border-top:1px dashed var(--line);
  scroll-margin-top:104px;
}

.script > section:first-child{border-top:0;}

.script > section:nth-child(even){
  background:linear-gradient(180deg,rgba(212,165,116,.22),rgba(212,165,116,.08));
}

.script h2,
.script h3{
  font-family:"Playfair Display",Georgia,"Songti SC",serif;
  font-weight:600;
  line-height:1.28;
  letter-spacing:.01em;
  margin:0 0 .7em;
  scroll-margin-top:104px;
}

.script h2{font-size:clamp(1.55rem,3.1vw,2.1rem);}
.script h3{font-size:1.22rem;}

.script h2 span,
.script h3 span{
  background-image:linear-gradient(transparent 64%,rgba(212,165,116,.85) 64%);
  padding-bottom:.06em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.script p{
  max-width:66ch;
  margin:0 0 1.15em;
  color:var(--ink);
}

.script ul,
.script ol{
  max-width:66ch;
  padding-left:1.25em;
  margin:0 0 1.2em;
}

.script li{margin:.4em 0;}

.script li::marker{color:var(--caramel-deep);}

.script blockquote{
  margin:1.4em 0;
  padding:.4em 1.1em;
  border-left:4px solid var(--caramel);
  background:rgba(255,255,255,.35);
  filter:sepia(.15);
}

.script blockquote p:last-child{margin-bottom:0;}

.script a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(var(--caramel-deep),var(--caramel-deep));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  padding-bottom:1px;
}

.script a:hover{background-size:100% 3px;}

.script img{filter:sepia(.24) saturate(.85);}

.script figure{margin:1.4em 0;}

.script figcaption{
  font-size:16px;
  color:var(--ink-soft);
  padding-top:.5em;
}

.script hr{
  border:0;
  border-top:1px dashed var(--line);
  margin:2em 0;
}

/* 右侧栏 */
.side-panel{
  position:sticky;
  top:104px;
  margin-block:clamp(2rem,5vw,3rem);
  padding:1.1rem 1.1rem 1.3rem;
  background:var(--ink);
  color:var(--cream);
  box-shadow:0 14px 26px -20px rgba(38,33,23,.8);
}

.side-title{
  margin:.15rem 0 .7rem;
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.4;
}

.side-title span{
  background-image:linear-gradient(transparent 70%,rgba(212,165,116,.9) 70%);
  padding-bottom:.1em;
}

.side-title + .side-title{margin-top:1.2rem;}

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

.side-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.22rem 0;
  color:var(--cream);
  font-size:16px;
  text-decoration:none;
  border-bottom:1px dashed var(--cream-line);
  transition:color .2s ease,padding-left .2s ease;
}

.side-list a:hover{color:var(--caramel);padding-left:.3rem;}

.side-top{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--caramel);
  font-size:16px;
  text-decoration:none;
}

/* 页脚 */
.site-foot{
  position:relative;
  z-index:2;
  margin-top:clamp(2.4rem,6vw,4rem);
  padding:1.9rem clamp(1rem,5vw,3rem) 1.4rem;
  background:var(--ink);
  color:var(--cream);
}

.foot-main{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.8rem 1.4rem;
  padding-bottom:.9rem;
  border-bottom:1px dashed var(--cream-line);
}

.foot-addr{
  font-family:"Playfair Display",Georgia,serif;
  font-style:normal;
  font-size:1.28rem;
  letter-spacing:.05em;
}

.foot-links{
  display:flex;
  flex-wrap:wrap;
  gap:.2rem 1.1rem;
  margin:0;
  padding:0;
  list-style:none;
}

.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:16px;
  color:var(--cream);
  text-decoration:none;
}

.foot-links a:hover{color:var(--caramel);}

.foot-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem 1.2rem;
  padding-top:.9rem;
}

.foot-copy{
  margin:0;
  font-size:16px;
  color:rgba(245,230,200,.78);
}

.foot-top{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:16px;
  color:var(--caramel);
  text-decoration:none;
}

/* 逐节浮现 */
html.js .script > article{
  opacity:0;
  transform:translateY(18px);
}

html.js .script > article.in{
  opacity:1;
  transform:none;
  transition:opacity .7s ease,transform .7s ease;
}

/* 响应式 */
@media (max-width:980px){
  main{grid-template-columns:minmax(0,1fr);}
  .side-panel{position:static;margin:0 0 2rem;top:auto;}
  .hero{grid-template-columns:minmax(0,1fr);min-height:auto;padding-block:2.2rem 3rem;}
  .hero-frame{max-width:340px;transform:rotate(.9deg);}
  .hero-title::after{margin-top:.9rem;}
  .tape-list{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;}
  .tape-list::-webkit-scrollbar{display:none;}
  .tape-brand{order:-1;position:sticky;left:0;background:rgba(245,230,200,.96);}
}

@media (max-width:560px){
  body{font-size:16.5px;}
  main{padding-inline:1rem;}
  .script > article{padding-inline:.35rem;}
  .foot-main,.foot-base{flex-direction:column;align-items:flex-start;}
  .hero-title{font-size:clamp(2rem,8vw,2.6rem);}
  .side-panel{padding:1rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  body::before,
  body::after,
  .hero,
  .hero-frame{animation:none;}
  html.js .script > article{opacity:1;transform:none;transition:none;}
  .tape-list a:hover,
  .hero-cue a:hover{transform:none;}
}

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