:root{
  --yellow:#F3BA2F;
  --yellow2:#FFD45A;
  --ink:#17130b;
  --paper:#fff8dc;
  --paper2:#f7edc7;
  --mud:#5f4425;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 4vw;background:rgba(255,248,220,.94);backdrop-filter:blur(12px);
  border-bottom:3px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;line-height:1.05}
.brand img{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink)}
nav{display:flex;gap:22px;font-weight:800;font-size:14px}
nav a:hover{text-decoration:underline;text-decoration-thickness:3px}
.pill{background:var(--ink);color:var(--yellow);padding:10px 16px;border-radius:999px;font-weight:1000}

.hero{padding:44px 4vw 80px;display:grid;grid-template-columns:1.35fr .9fr;gap:46px;align-items:center;min-height:82vh}
.hero-art{position:relative}
.hero-art>img{width:100%;border:4px solid var(--ink);box-shadow:14px 14px 0 var(--ink);transform:rotate(-1deg)}
.tape{position:absolute;background:#fff7c8;border:3px solid var(--ink);padding:9px 15px;font-weight:1000;box-shadow:5px 5px 0 var(--ink)}
.tape-a{left:-14px;top:18px;transform:rotate(-5deg)}
.tape-b{right:-10px;bottom:24px;transform:rotate(5deg)}
.eyebrow{display:inline-block;background:var(--yellow);border:2px solid var(--ink);padding:7px 10px;font-size:13px;font-weight:900;transform:rotate(1deg)}
.hero h1{font-size:clamp(48px,6.8vw,96px);line-height:.95;letter-spacing:-5px;margin:20px 0}
.hero h1 span{color:#a86a00}
.hero p{font-size:18px;line-height:1.85;font-weight:600}
.cta{display:inline-block;margin-top:12px;background:var(--ink);color:white;padding:15px 20px;font-weight:900;box-shadow:6px 6px 0 var(--yellow)}

.storybook{position:relative;margin:0 4vw 100px;padding:70px 7vw;background:#fffdf0;border:4px solid var(--ink);box-shadow:12px 12px 0 var(--yellow);display:grid;grid-template-columns:100px 1fr 220px;gap:30px;align-items:start}
.chapter-number{font-size:96px;font-weight:1000;line-height:.8;color:var(--yellow);-webkit-text-stroke:3px var(--ink)}
.chapter-kicker,.section-head span{font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.chapter-copy h2,.section-head h2{font-size:clamp(40px,5vw,70px);line-height:1;margin:8px 0 20px;letter-spacing:-3px}
.chapter-copy p,.section-head p{font-size:18px;line-height:1.9}
.chapter-note{background:var(--yellow);border:3px solid var(--ink);padding:20px;font-size:20px;font-weight:900;transform:rotate(3deg)}

.yellow-strip{background:var(--yellow);border-block:4px solid var(--ink);padding:22px 4vw;margin-bottom:90px}
.yellow-strip div{max-width:1200px;margin:auto;display:flex;gap:20px;align-items:center;justify-content:center;font-size:20px}
.yellow-strip b{background:var(--ink);color:var(--yellow);padding:6px 10px}

.lives,.mini-stories,.theories{padding:0 4vw 100px;max-width:1500px;margin:auto}
.section-head{text-align:center;max-width:900px;margin:0 auto 44px}
.section-head.left{text-align:left;margin-left:0}
.life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.life-grid article{background:#fffdf1;border:3px solid var(--ink);padding:26px;min-height:240px;box-shadow:7px 7px 0 #d7c692;transition:.18s transform}
.life-grid article:hover{transform:translate(-4px,-4px)}
.life-grid article b{font-size:44px;color:var(--yellow);-webkit-text-stroke:2px var(--ink)}
.life-grid h3{font-size:28px;margin:8px 0}
.life-grid p{line-height:1.75;font-weight:600}
.life-grid .last{background:var(--yellow);grid-column:span 3;min-height:unset}

.story-card{display:grid;grid-template-columns:130px 1fr;gap:28px;align-items:start;border-top:3px solid var(--ink);padding:34px 0}
.story-card.flip{background:#fff1b6;margin-inline:-4vw;padding-inline:4vw}
.stamp{width:110px;height:110px;border:4px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:1000;background:var(--yellow);transform:rotate(-8deg)}
.story-card h3{font-size:34px;margin:0 0 10px}
.story-card p{font-size:18px;line-height:1.85;margin:0}

.theories{background:var(--ink);color:white;max-width:none;padding:90px 4vw}
.theory-list{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.theory-list div{border:2px solid #6f6659;padding:26px;background:#221f18}
.theory-list b{color:var(--yellow);font-size:14px}
.theory-list p{font-size:22px;line-height:1.5;margin-bottom:0}

.quote-page{margin:100px auto;max-width:1200px;padding:0 4vw;display:grid;grid-template-columns:360px 1fr;align-items:center;gap:50px}
.quote-page img{border:4px solid var(--ink);box-shadow:12px 12px 0 var(--yellow)}
.quote-page blockquote{font-size:clamp(34px,4.5vw,66px);line-height:1.15;font-weight:1000;margin:10px 0}

.final{padding:90px 4vw;background:var(--yellow);border-top:4px solid var(--ink)}
.final-card{max-width:1050px;margin:auto;text-align:center;background:#fff7d1;border:4px solid var(--ink);padding:60px;box-shadow:14px 14px 0 var(--ink)}
.big-cat{font-size:70px}
.final h2{font-size:clamp(44px,6vw,80px);margin:10px 0}
.final p{font-size:20px;line-height:1.8}
.final-line{font-size:13px;font-weight:1000;letter-spacing:.14em;margin-top:28px}
.ticker{font-size:clamp(58px,9vw,120px);font-weight:1000;letter-spacing:-5px;margin-top:12px}

footer{display:flex;justify-content:space-between;align-items:center;padding:28px 4vw;background:#17130b;color:#fff7d1}
.footbrand img{border-color:white}

@media (max-width:900px){
  nav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto}
  .storybook{grid-template-columns:1fr;padding:40px 24px}
  .chapter-number{font-size:70px}
  .chapter-note{max-width:280px}
  .life-grid{grid-template-columns:1fr}
  .life-grid .last{grid-column:auto}
  .theory-list{grid-template-columns:1fr}
  .quote-page{grid-template-columns:1fr}
  .quote-page img{max-width:320px}
  .story-card{grid-template-columns:1fr}
  .stamp{width:90px;height:90px}
  .hero h1{letter-spacing:-3px}
}
@media (max-width:560px){
  .pill{display:none}
  .hero{padding-top:28px}
  .hero-copy p,.chapter-copy p,.story-card p,.final p{font-size:16px}
  .final-card{padding:36px 20px}
  footer{flex-direction:column;gap:16px;align-items:flex-start}
}