/* =========================================================
   Daniel Chen's Chinese Kitchen — styles
   Palette taken from the chef's photos: lantern lacquer red,
   imperial gold, rosewood, rice paper and porcelain blue.
   ========================================================= */
:root{
  --lacquer:#8f1d18;      /* lantern red, main dark sections   */
  --lacquer-deep:#5c0f0c; /* shadows of the lantern            */
  --vermilion:#c9341f;    /* buttons on light backgrounds      */
  --gold:#e0ad4c;         /* lantern caps, tassels, accents    */
  --gold-soft:#f1d394;
  --gold-deep:#a9771f;
  --ink:#2b1712;          /* rosewood, body text               */
  --ink-2:#5a3a2e;
  --paper:#f6ead3;        /* rice paper                        */
  --paper-2:#eedcbc;
  --porcelain:#1f4a8a;    /* blue-and-white porcelain jar      */
  --jade:#3c6b4c;         /* the courtyard plants              */
  --white:#fffaf0;

  --f-display:"Zen Old Mincho","Songti SC",Georgia,serif;
  --f-body:"Literata",Georgia,"Times New Roman",serif;
  --f-brush:"Ma Shan Zheng","STKaiti","KaiTi",serif;

  --wrap:1180px;
  --radius:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:clamp(17px,1.05rem + .2vw,20px);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
s{opacity:.65}
em{font-style:italic}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:.5em 1em;z-index:100}
.skip:focus{left:8px}

.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto;position:relative;z-index:1}
.narrow{max-width:820px}
.center{text-align:center}
.gold{color:var(--gold)}

/* ---------- Type ---------- */
.h2{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);line-height:1.15;margin:.2em 0 .6em;
  text-wrap:balance;
}
.h2 em{
  font-style:normal;color:var(--vermilion);
  background:linear-gradient(transparent 86%,rgba(224,173,76,.6) 86%,rgba(224,173,76,.6) 96%,transparent 96%) no-repeat 0 0/0% 100%;
  transition:background-size 1.1s var(--ease) .35s;
}
.h2.is-in em,.no-js .h2 em{background-size:100% 100%}
.light,.light em{color:var(--white)}
.h2.light em,.lacquer .h2 em{color:var(--gold);background-image:linear-gradient(transparent 88%,rgba(255,220,150,.35) 88%,rgba(255,220,150,.35) 95%,transparent 95%)}
.eyebrow{
  font-family:var(--f-body);font-style:italic;color:var(--vermilion);
  font-size:1.05rem;margin:0;display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;opacity:.6}
.center.eyebrow,.center .eyebrow{display:flex;justify-content:center}
.eyebrow.light{color:var(--gold-soft)}
.sub{font-size:1.15em;color:var(--ink-2);max-width:40em;margin:0 auto 2rem}
.sub.light{color:#f3dcc6}
.fine{font-size:.85em;color:var(--ink-2);margin:.6em 0 0}
.fine.light{color:#f0d6bf}
.more{font-style:italic;color:var(--ink-2);margin-top:2rem}
.more.light{color:#f2d8c2}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--vermilion);--fg:var(--white);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:1.05em 2em;border-radius:999px;border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);text-decoration:none;
  font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:.01em;
  box-shadow:0 0 0 2px rgba(224,173,76,.65) inset,0 10px 24px -10px rgba(92,15,12,.7);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;
  overflow:hidden;isolation:isolate;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 0 0 2px var(--gold) inset,0 16px 30px -12px rgba(92,15,12,.8)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--gold{--bg:linear-gradient(180deg,#f2c766,#d9a03c);--fg:var(--ink);box-shadow:0 0 0 2px rgba(255,240,200,.5) inset,0 12px 28px -10px rgba(0,0,0,.55)}
.btn--wide{width:100%}
.btn--small{padding:.7em 1.3em;font-size:.95rem}
.btn--shine::after{
  content:"";position:absolute;inset:-20% auto -20% -60%;width:40%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite 1.5s;
}
.btn--gold.btn--shine::after{z-index:1;mix-blend-mode:soft-light}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--ink);color:#f3e2c4;font-size:.9rem;
  display:flex;flex-wrap:wrap;gap:.3em 1.2em;align-items:center;justify-content:center;
  padding:.55em 16px;text-align:center;
}
.topbar p{margin:0}
.topbar .sep{opacity:.5;margin:0 .3em}
.topbar__link{color:var(--gold);font-weight:600;text-underline-offset:3px}
.topbar__link::after{content:" ›"}

/* ---------- Cloud pattern (xiangyun) ---------- */
.hero__clouds{
  position:absolute;inset:0;pointer-events:none;opacity:.13;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Cg fill='none' stroke='%23e0ad4c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 70c0-11 9-20 20-20s20 9 20 20c0-8 6-14 14-14s14 6 14 14c0 5-4 9-9 9s-9-4-9-9'/%3E%3Cpath d='M40 70c0-5 4-9 9-9s9 4 9 9M10 80h90'/%3E%3Cpath d='M100 30c0-7 6-13 13-13s13 6 13 13c0-5 4-9 9-9s9 4 9 9c0 3-3 6-6 6s-6-3-6-6M95 38h60'/%3E%3C/g%3E%3C/svg%3E");
  background-size:220px auto;animation:drift 60s linear infinite;
}
.hero__clouds--soft{opacity:.07}
@keyframes drift{from{background-position:0 0}to{background-position:-440px 120px}}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--white);
  background:
    radial-gradient(1200px 600px at 75% 30%,rgba(224,90,50,.35),transparent 60%),
    radial-gradient(800px 500px at 10% 100%,rgba(0,0,0,.35),transparent 60%),
    linear-gradient(160deg,#a5241c 0%,var(--lacquer) 45%,var(--lacquer-deep) 100%);
  padding:clamp(70px,9vw,120px) 0 clamp(60px,8vw,100px);
}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.hero__kicker{display:inline-flex;align-items:center;gap:.7em;margin:0 0 1.2em;font-style:italic;color:var(--gold-soft)}
.hero__kicker img{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold)}
.hero__title{
  font-family:var(--f-display);font-weight:900;margin:0 0 .5em;letter-spacing:-.015em;
  font-size:clamp(2.2rem,1.3rem + 3.6vw,4.1rem);line-height:1.08;text-wrap:balance;
}
.hero__title em{font-style:normal;color:var(--gold);display:block;margin-top:.15em}
.hero__lede{font-size:1.12em;color:#f7e1cc;max-width:34em;margin:0 0 1.8em}
.hero__lede strong{color:var(--white)}
.hero__small{font-size:.88em;color:#f0cfb6;margin:.8em 0 1em}
.hero__links{display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1.4em;margin:1.2em 0 0}
.hero__links a{color:var(--gold-soft);text-underline-offset:4px}
.stars{color:var(--gold);letter-spacing:.08em}
.stars b{color:var(--white);margin-left:.3em;letter-spacing:0}

.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .6em;margin:0 0 1em;font-family:var(--f-display)}
.price s{font-size:1.4rem}
.price strong{font-size:2.6rem;line-height:1;color:var(--gold)}
.price span{font-family:var(--f-body);font-size:.85rem;background:rgba(224,173,76,.18);color:var(--gold-soft);padding:.25em .7em;border-radius:999px;border:1px solid rgba(224,173,76,.4)}
.price--big strong{font-size:3.2rem;color:var(--vermilion)}
.price--big span{background:#fbe3c9;color:var(--lacquer);border-color:#e9b98a}
.price--center{justify-content:center}

.trust{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4em 1.2em;font-size:.85rem;color:#f2d7c0}
.trust li::before{content:"✓";color:var(--gold);margin-right:.4em;font-weight:700}
.trust--dark{color:var(--ink-2);margin-top:1em}
.trust--dark li::before{color:var(--jade)}
.trust--center{justify-content:center;margin-top:1em}

/* page-load sequence */
.load-in{opacity:0;transform:translateY(22px);animation:loadIn 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes loadIn{to{opacity:1;transform:none}}

/* ---------- Lanterns ---------- */
.lanterns{position:absolute;inset:0 0 auto 0;height:0;z-index:2;pointer-events:none}
.lantern{
  position:absolute;top:0;width:58px;transform-origin:50% 0;
  animation:sway 4.6s ease-in-out infinite;
}
.lantern::before{ /* string */
  content:"";display:block;width:2px;height:var(--rope,40px);margin:0 auto;background:var(--gold-deep);
}
.lantern i{
  position:relative;display:block;width:58px;height:66px;border-radius:46% 46% 46% 46%/50%;
  background:
    repeating-linear-gradient(90deg,transparent 0 11px,rgba(92,15,12,.45) 11px 12.5px),
    radial-gradient(circle at 40% 38%,#ff6b4a 0%,#d8321f 45%,#8f1d18 100%);
  box-shadow:0 0 40px 8px rgba(255,120,60,.35),0 0 0 1px rgba(0,0,0,.15) inset;
  animation:glow 3.2s ease-in-out infinite alternate;
}
.lantern i::before,.lantern i::after{ /* caps */
  content:"";position:absolute;left:50%;transform:translateX(-50%);width:30px;height:8px;
  background:linear-gradient(var(--gold-soft),var(--gold-deep));border-radius:3px;
}
.lantern i::before{top:-5px}
.lantern i::after{bottom:-5px}
.lantern::after{ /* tassel */
  content:"";display:block;width:16px;height:40px;margin:2px auto 0;
  background:repeating-linear-gradient(90deg,#f0c35f 0 1px,#b9781f 1px 2px);
  clip-path:polygon(38% 0,62% 0,62% 12%,100% 100%,0 100%,38% 12%);
  animation:tassel 2.3s ease-in-out infinite alternate;transform-origin:50% 0;
}
@keyframes tassel{from{rotate:4deg}to{rotate:-4deg}}
.lantern--1{left:4%;--rope:20px;animation-duration:5.2s}
.lantern--2{right:30%;--rope:0px;transform:scale(.7);animation-duration:4.2s;animation-delay:-1.2s;opacity:.85}
.lantern--3{right:4%;--rope:56px;animation-delay:-2s}
@keyframes sway{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@keyframes glow{from{box-shadow:0 0 30px 4px rgba(255,120,60,.25),0 0 0 1px rgba(0,0,0,.15) inset}to{box-shadow:0 0 55px 14px rgba(255,140,70,.45),0 0 0 1px rgba(0,0,0,.15) inset}}

/* ---------- Book ---------- */
.hero__book{position:relative;display:grid;place-items:center;perspective:1400px;padding-top:40px}
.book{
  --w:min(360px,78vw);position:relative;width:var(--w);aspect-ratio:3/4.1;
  transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(4deg);
  transition:transform .6s var(--ease);
  animation:bookFloat 6s ease-in-out infinite;
}
@keyframes bookFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.book__cover{
  position:absolute;inset:0;border-radius:4px 10px 10px 4px;overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 45%),
    linear-gradient(160deg,#b3271c,#7c1713 70%,#5c0f0c);
  box-shadow:
    inset 6px 0 0 rgba(0,0,0,.25),inset 9px 0 0 rgba(255,255,255,.08),
    0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.2);
  display:flex;flex-direction:column;align-items:center;padding:7% 8% 8%;
  transform:translateZ(14px);
}
.book__cover::before{ /* gold frame */
  content:"";position:absolute;inset:12px 12px 12px 18px;border:1.5px solid rgba(224,173,76,.75);border-radius:4px;pointer-events:none;
  box-shadow:0 0 0 4px rgba(224,173,76,.15) inset;
}
.book__seal{
  font-family:var(--f-brush);color:var(--gold);font-size:clamp(1.2rem,4vw,1.7rem);letter-spacing:.25em;
  margin:2% 0 4%;text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.book__photo{
  width:72%;aspect-ratio:1;border-radius:50% 50% 8px 8px;overflow:hidden;
  border:3px solid var(--gold);box-shadow:0 0 0 5px rgba(224,173,76,.2);background:#3b1a10;
}
.book__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.book__title{
  font-family:var(--f-display);font-weight:900;color:var(--white);text-align:center;
  font-size:clamp(1.3rem,4.6vw,1.95rem);line-height:1.05;margin-top:7%;
}
.book__title small{display:block;font-family:var(--f-body);font-style:italic;font-weight:400;font-size:.55em;color:var(--gold-soft);margin-bottom:.2em}
.book__sub{font-size:clamp(.62rem,1.8vw,.78rem);color:#f2cfb4;text-align:center;margin-top:5%;line-height:1.4}
.book__pages{
  position:absolute;top:2%;bottom:2%;right:-12px;width:26px;border-radius:0 6px 6px 0;
  background:repeating-linear-gradient(0deg,#fbf3e2 0 2px,#e5d3b1 2px 3px);
  transform:rotateY(90deg) translateZ(-1px);transform-origin:left center;
  box-shadow:inset 0 0 6px rgba(0,0,0,.2);
}
.book--small{--w:min(250px,64vw);transform:rotateY(-14deg);animation:none}

.badge{
  position:absolute;right:2%;top:12%;z-index:3;width:94px;height:94px;border-radius:50%;
  display:grid;place-content:center;text-align:center;line-height:1;
  background:radial-gradient(circle at 35% 30%,#f7d47e,#d9a03c 70%,#a9771f);color:var(--ink);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6),0 0 0 4px rgba(255,240,200,.35);
  animation:badgeSpin 1s var(--ease) 1.1s both, bob 3.5s ease-in-out 2.1s infinite;
}
.badge b{font-family:var(--f-display);font-size:1.9rem}
.badge span{font-size:.75rem;font-style:italic}
@keyframes badgeSpin{from{transform:scale(0) rotate(-200deg)}to{transform:scale(1) rotate(-8deg)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* steam rising from the book */
.steam{position:absolute;top:0;left:50%;width:160px;height:120px;translate:-50% 0;z-index:2;pointer-events:none}
.steam span{
  position:absolute;bottom:0;width:22px;height:90px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,245,230,.5),transparent 70%);
  filter:blur(6px);opacity:0;animation:steam 4.5s ease-out infinite;
}
.steam span:nth-child(1){left:30px}
.steam span:nth-child(2){left:70px;animation-delay:1.4s}
.steam span:nth-child(3){left:110px;animation-delay:2.8s}
@keyframes steam{
  0%{opacity:0;transform:translateY(30px) scaleX(.6)}
  25%{opacity:.85}
  100%{opacity:0;transform:translateY(-60px) scaleX(1.6) skewX(12deg)}
}

/* ---------- Ribbon ---------- */
.ribbon{background:linear-gradient(180deg,#f2c766,#d9a03c);color:var(--lacquer-deep);overflow:hidden;border-block:2px solid var(--gold-deep)}
.ribbon__track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.ribbon span{white-space:nowrap;padding:.7em 1.6em;font-family:var(--f-display);font-weight:700;font-size:1rem;position:relative}
.ribbon span::after{content:"◆";position:absolute;right:-.35em;opacity:.45;font-size:.6em;top:50%;translate:0 -50%}
.ribbon i{font-family:var(--f-brush);font-style:normal;font-weight:400;font-size:1.2em;margin-left:.4em;color:var(--lacquer)}
.ribbon:hover .ribbon__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Stats ---------- */
.stats{background:var(--ink);color:var(--white);padding:clamp(34px,5vw,54px) 0}
.stats__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;text-align:center}
.stats b{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(2rem,1.4rem + 2vw,3rem);color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:.88rem;color:#e6cfb3}
.stats__grid > div{position:relative}
.stats__grid > div + div::before{content:"";position:absolute;left:-10px;top:15%;bottom:15%;width:1px;background:rgba(224,173,76,.25)}

/* ---------- Sections ---------- */
.section{position:relative;padding:clamp(70px,9vw,120px) 0;overflow:hidden}
.paper{
  background:
    radial-gradient(rgba(169,119,31,.07) 1px,transparent 1.2px) 0 0/18px 18px,
    var(--paper);
}
.story{background:var(--white)}
.lacquer{
  color:var(--white);
  background:
    radial-gradient(900px 500px at 50% 0%,rgba(224,90,50,.28),transparent 65%),
    linear-gradient(180deg,var(--lacquer),var(--lacquer-deep));
}

/* scroll reveal (only when JS runs) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0s)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- Problems ---------- */
.fails{list-style:none;padding:0;margin:1.5rem 0 2.5rem;display:grid;gap:14px}
.fails li{
  display:flex;gap:1em;align-items:flex-start;background:var(--white);padding:1.05em 1.3em;
  border-radius:var(--radius);border-left:4px solid var(--vermilion);
  box-shadow:0 6px 18px -14px rgba(43,23,18,.6);
}
.fails span{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#fbe3d8;color:var(--vermilion);font-weight:700;font-size:.9rem;margin-top:.15em;
}
.js .fails li.is-in span{animation:pop .5s var(--ease) .3s both}
@keyframes pop{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.fails p{margin:0}
.verdict{font-family:var(--f-display);font-size:clamp(1.3rem,1rem + 1vw,1.75rem);line-height:1.35;text-align:center;margin:0}
.verdict em{font-style:normal;color:var(--vermilion)}
.verdict strong{display:block;margin-top:.4em;font-weight:900}

/* ---------- Story ---------- */
.story__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,80px);align-items:start}
.story__photo{margin:0;position:sticky;top:30px}
.story__photo img{
  border-radius:200px 200px var(--radius) var(--radius);
  box-shadow:0 0 0 6px var(--white),0 0 0 8px var(--gold),0 30px 60px -30px rgba(43,23,18,.6);
}
.story__photo figcaption{font-style:italic;font-size:.88rem;color:var(--ink-2);text-align:center;margin-top:1.1em}
.prose p{margin:0 0 1.1em;max-width:36em}
.prose blockquote{
  margin:1.6em 0;padding:1.2em 1.4em 1.2em 1.6em;position:relative;
  font-family:var(--f-display);font-size:1.12em;line-height:1.5;color:var(--lacquer);
  background:var(--paper);border-radius:var(--radius);border-left:4px solid var(--gold);
}
.signature{display:flex;align-items:center;gap:16px;margin:1.6em 0 1.8em}
.signature__name{font-family:var(--f-brush);font-size:2.4rem;color:var(--ink);line-height:1}
.signature__chop{
  width:56px;height:56px;display:grid;place-items:center;border-radius:8px;
  background:var(--vermilion);color:var(--white);font-family:var(--f-brush);font-size:2rem;
  box-shadow:inset 0 0 0 3px var(--vermilion),inset 0 0 0 5px rgba(255,255,255,.7);
  transform:rotate(-6deg);
}
.js .signature.is-in .signature__chop{animation:stamp .6s var(--ease) .4s both}
@keyframes stamp{0%{transform:scale(2.2) rotate(-25deg);opacity:0}60%{transform:scale(.9) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-6deg)}}

/* ---------- Look inside ---------- */
.pages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px);margin-top:1rem}
.page{
  all:unset;box-sizing:border-box;cursor:zoom-in;position:relative;display:flex;flex-direction:column;
  aspect-ratio:4/5;padding:8% 9%;background:#fffdf7;color:var(--ink);font-family:var(--f-body);
  border-radius:4px;overflow:hidden;
  box-shadow:0 1px 0 #e9dcc2,0 3px 0 -1px #f6efe0,0 4px 0 -1px #e2d1b0,0 24px 40px -24px rgba(43,23,18,.55);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.page:nth-child(odd){rotate:-1.3deg}
.page:nth-child(even){rotate:1.1deg}
.page:hover,.page:focus-visible{transform:translateY(-8px) scale(1.02);rotate:0deg;box-shadow:0 34px 50px -26px rgba(43,23,18,.6)}
.page::before{content:"";position:absolute;inset:0 auto 0 0;width:22px;background:linear-gradient(90deg,rgba(0,0,0,.07),transparent)}
.page__no{position:absolute;bottom:4%;right:8%;font-size:.72rem;color:var(--ink-2)}
.page__ch{font-size:.7rem;font-style:italic;color:var(--vermilion)}
.page__title{font-family:var(--f-display);font-weight:900;font-size:clamp(1rem,.8rem + .7vw,1.35rem);line-height:1.15;margin-top:.3em}
.page__cn{font-family:var(--f-brush);color:var(--lacquer);font-size:1.25rem;line-height:1.2}
.page__rule{height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:.6em 0 .7em}
.page__list{font-size:clamp(.75rem,.6rem + .45vw,.98rem);line-height:1.65}
.page__list b{color:var(--lacquer)}
.page__trick{
  margin-top:auto;font-size:clamp(.7rem,.58rem + .35vw,.86rem);line-height:1.45;
  background:#eaf0f8;border-left:3px solid var(--porcelain);padding:.6em .7em;border-radius:4px;color:#1d3156;
}
.page__trick b{display:block;color:var(--porcelain)}
.page__steps{font-size:clamp(.68rem,.56rem + .35vw,.86rem);line-height:1.55;margin-top:.8em;color:var(--ink-2);font-style:italic}
.lightbox__stage .page__steps{font-size:1.1rem}
.hint{font-style:italic;font-size:.9rem;color:var(--ink-2);margin-top:2rem}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;gap:14px;align-content:center;
  background:rgba(30,12,8,.88);padding:20px;backdrop-filter:blur(4px);
  animation:fade .3s ease;
}
.lightbox[hidden]{display:none}
.lightbox__stage{width:min(560px,92vw);font-size:1.6em}
.lightbox__stage .page{width:100%;cursor:default;rotate:0deg;animation:zoomIn .45s var(--ease)}
.lightbox__stage .page:hover{transform:none}
.lightbox__stage .page__list{font-size:1.2rem}
.lightbox__stage .page__trick{font-size:.95rem}
.lightbox__stage .page__title{font-size:2rem}
.lightbox__stage .page__ch,.lightbox__stage .page__no{font-size:.9rem}
.lightbox__caption{color:#f6e3c8;text-align:center;max-width:36em;margin:0;font-size:1rem}
.lightbox__close,.popup__close{
  position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);color:var(--ink);font-size:1.6rem;line-height:1;
}
@keyframes fade{from{opacity:0}}
@keyframes zoomIn{from{transform:scale(.85) rotate(-3deg);opacity:0}}

/* ---------- Chapters ---------- */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2rem}
.chapter{
  position:relative;overflow:hidden;padding:1.5em 1.5em 1.4em;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(0,0,0,.12));
  border:1px solid rgba(224,173,76,.28);
  transition:transform .4s var(--ease),border-color .4s,background .4s;
}
.chapter:hover{transform:translateY(-5px);border-color:var(--gold);background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(0,0,0,.08))}
.chapter__char{
  position:absolute;right:-.05em;top:-.12em;font-family:var(--f-brush);font-size:6.5rem;line-height:1;
  color:var(--gold);opacity:.16;transition:opacity .5s,transform .6s var(--ease);
}
.chapter:hover .chapter__char{opacity:.4;transform:rotate(-8deg) scale(1.08)}
.chapter__tag{margin:0;font-style:italic;font-size:.85rem;color:var(--gold-soft)}
.chapter h3{font-family:var(--f-display);font-weight:700;font-size:1.35rem;margin:.2em 0 .45em;color:var(--white);position:relative}
.chapter p:last-child{margin:0;font-size:.95rem;color:#f3dccb;position:relative}
.chapter--rescue{grid-column:span 2;background:linear-gradient(120deg,rgba(224,173,76,.25),rgba(224,173,76,.06));border-color:var(--gold)}
.chapter--rescue .chapter__char{opacity:.3;font-size:8rem}
.chapter--rescue h3{font-size:1.7rem}
.chapters + .more + .center{margin-top:1.8rem}

/* ---------- Features ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,30px);margin-top:2rem}
.feature{text-align:center;padding:.5em}
.feature svg{
  width:74px;height:74px;padding:14px;border-radius:50%;margin:0 auto .9em;display:block;
  fill:none;stroke:var(--lacquer);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  background:var(--white);box-shadow:0 0 0 2px var(--gold),0 0 0 7px rgba(224,173,76,.18);
  stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.6s var(--ease) .3s;
}
.feature.is-in svg,.no-js .feature svg{stroke-dashoffset:0}
.feature h3{font-family:var(--f-display);font-size:1.3rem;margin:0 0 .4em}
.feature p{margin:0;font-size:.95rem;color:var(--ink-2)}

/* ---------- Rules ---------- */
.rules{background:var(--paper-2)}
.rules::before{
  content:"规";position:absolute;right:-.1em;top:-.15em;font-family:var(--f-brush);
  font-size:min(40vw,520px);line-height:1;color:var(--lacquer);opacity:.05;pointer-events:none;
}
.rules__list{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px}
.rule{display:flex;gap:1.1em;align-items:flex-start;padding:1.2em 0;border-top:1px solid rgba(143,29,24,.18)}
.rule__n{
  flex:none;width:62px;height:62px;display:grid;place-items:center;border-radius:10px;
  background:var(--vermilion);color:var(--white);font-family:var(--f-brush);font-size:2rem;line-height:1;
  box-shadow:inset 0 0 0 3px var(--vermilion),inset 0 0 0 5px rgba(255,255,255,.6),0 8px 16px -8px rgba(92,15,12,.7);
  transform:rotate(-5deg);
}
.js .rule.is-in .rule__n{animation:stamp .65s var(--ease) .25s both}
.rule h3{font-family:var(--f-display);font-size:1.3rem;margin:.1em 0 .3em}
.rule p{margin:0;color:var(--ink-2);font-size:.97rem}

/* ---------- Cost ---------- */
.cost{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,30px);margin-top:2rem}
.cost__col{border-radius:var(--radius);padding:1.6em 1.6em 1.3em;display:flex;flex-direction:column}
.cost__col h3{font-family:var(--f-display);font-size:1.45rem;margin:0 0 .8em}
.cost__col ul{list-style:none;padding:0;margin:0 0 1.2em;flex:1}
.cost__col li{display:flex;justify-content:space-between;gap:1em;padding:.6em 0;border-bottom:1px dashed rgba(43,23,18,.2);font-size:.97rem}
.cost__col li b{white-space:nowrap;text-align:right}
.cost__col--bad{background:var(--white);border:1px solid #e6d3b6}
.cost__col--bad li b{color:#8a5a49}
.cost__col--good{background:var(--lacquer);color:var(--white);box-shadow:0 30px 50px -30px rgba(92,15,12,.8)}
.cost__col--good li{border-color:rgba(255,255,255,.2)}
.cost__col--good li b{color:var(--gold)}
.cost__total{display:flex;justify-content:space-between;align-items:baseline;margin:0;font-family:var(--f-display)}
.cost__total b{font-size:2.2rem}
.cost__col--bad .cost__total b{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--vermilion);text-decoration-thickness:3px}
.cost__col--good .cost__total b{color:var(--gold)}
.note{font-style:italic;color:var(--ink-2);margin-top:1.8rem}

/* ---------- For ---------- */
.for{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.for li{position:relative;padding:1.1em 1.2em 1.1em 3.2em;background:var(--paper);border-radius:var(--radius);line-height:1.5}
.for li::before{
  content:"福";position:absolute;left:.9em;top:1.05em;font-family:var(--f-brush);color:var(--vermilion);font-size:1.4rem;line-height:1;
}

/* ---------- Offer ---------- */
.offer{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,60px);align-items:center;
  background:var(--white);color:var(--ink);border-radius:22px;padding:clamp(28px,5vw,56px);
  box-shadow:0 0 0 2px var(--gold),0 0 0 10px rgba(224,173,76,.18),0 40px 80px -30px rgba(0,0,0,.6);
  position:relative;
}
.offer__book{display:grid;place-items:center;perspective:1200px}
.offer .h2{color:var(--ink);margin-bottom:.2em}
.offer__sub{font-style:italic;color:var(--ink-2);margin:0 0 1.2em}
.checks{list-style:none;padding:0;margin:0 0 1.5em;display:grid;gap:.5em}
.checks li{padding-left:2em;position:relative}
.checks li::before{
  content:"";position:absolute;left:0;top:.35em;width:1.25em;height:1.25em;border-radius:50%;
  background:var(--jade) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
}
.offer .eyebrow{color:var(--vermilion)}
.offer .fine{margin:-.4em 0 1.1em}

.guarantee{
  display:flex;gap:28px;align-items:center;max-width:860px;margin:clamp(40px,6vw,64px) auto 0;
  color:#f8e5d0;
}
.guarantee p{margin:0}
.guarantee strong{color:var(--white)}
.guarantee__seal{
  flex:none;position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;line-height:1;
  background:radial-gradient(circle at 35% 30%,#f7d47e,#d9a03c 70%,#a9771f);color:var(--ink);
}
.guarantee__seal::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;border:2px dashed var(--gold);
  animation:spin 22s linear infinite;
}
.guarantee__seal b{font-family:var(--f-display);font-size:3rem}
.guarantee__seal span{font-style:italic;font-size:.9rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- FAQ ---------- */
.faq{margin-top:2rem;display:grid;gap:12px}
.faq details{background:var(--white);border-radius:var(--radius);border:1px solid #ead8bb;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--gold);box-shadow:0 14px 30px -22px rgba(43,23,18,.6)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.1em 3.4em 1.1em 1.3em;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:1.12rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:1em;top:50%;translate:0 -50%;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--paper);color:var(--vermilion);font-size:1.3rem;font-family:var(--f-body);
  transition:transform .35s var(--ease),background .3s,color .3s;
}
.faq details[open] summary::after{transform:rotate(135deg);background:var(--vermilion);color:var(--white)}
.faq details > div{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq details[open] > div{grid-template-rows:1fr}
.faq details > div > p{overflow:hidden;margin:0;padding:0 1.3em;color:var(--ink-2)}
.faq details[open] > div > p{padding-bottom:1.2em}

/* ---------- Final ---------- */
.final{
  color:var(--white);
  background:
    linear-gradient(180deg,rgba(43,23,18,.82),rgba(92,15,12,.92)),
    url("/assets/chef-kitchen-1200.webp") center 30%/cover;
  padding-top:clamp(110px,12vw,160px);
}
.lanterns--final .lantern--1{left:8%}
.lanterns--final .lantern--3{right:8%}
.final .btn{margin-top:.4em}
.proverb{margin:3rem auto 0;font-style:italic;color:#f2d8c0;display:flex;flex-direction:column;align-items:center;gap:.4em}
.proverb span{font-family:var(--f-brush);font-style:normal;font-size:2.6rem;color:var(--gold);letter-spacing:.12em;line-height:1.1}
.proverb small{font-style:normal;font-size:.8rem;letter-spacing:.06em;opacity:.8}
.proverb small::before{content:"— "}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#d9c3a8;font-size:.85rem;padding:36px 0 120px;text-align:center}
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em 1.6em;margin-bottom:1.2em}
.footer__nav a{color:var(--gold-soft);text-underline-offset:3px}
.footer p{max-width:46em;margin:0 auto}

/* ---------- Sticky bar ---------- */
.sticky{
  position:fixed;left:50%;bottom:16px;z-index:60;width:min(760px,calc(100% - 24px));
  display:flex;align-items:center;gap:14px;padding:10px 10px 10px 12px;border-radius:999px;
  background:rgba(43,23,18,.94);color:var(--white);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(224,173,76,.4),0 18px 40px -12px rgba(0,0,0,.6);
  transform:translate(-50%,140%);transition:transform .55s var(--ease);
}
.sticky.is-on{transform:translate(-50%,0)}
.sticky img{width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);flex:none}
.sticky p{margin:0;flex:1;line-height:1.25;font-size:.9rem;min-width:0}
.sticky p strong{display:block;font-family:var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky p span{font-size:.8rem;color:#e6cfb3}
.sticky p b{color:var(--gold)}

/* ---------- Popup ---------- */
.popup{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(30,12,8,.75);backdrop-filter:blur(3px);animation:fade .3s ease}
.popup[hidden]{display:none}
.popup__card{
  position:relative;overflow:hidden;width:min(520px,100%);background:var(--white);border-radius:22px;
  padding:clamp(28px,5vw,44px);text-align:center;
  box-shadow:0 0 0 2px var(--gold),0 40px 80px -20px rgba(0,0,0,.6);
  animation:popIn .5s var(--ease);
}
@keyframes popIn{from{transform:translateY(30px) scale(.92);opacity:0}}
.popup__char{position:absolute;left:-.1em;bottom:-.25em;font-family:var(--f-brush);font-size:11rem;line-height:1;color:var(--vermilion);opacity:.08;pointer-events:none}
.popup .eyebrow{display:flex;justify-content:center}
.popup h3{font-family:var(--f-display);font-size:1.7rem;line-height:1.2;margin:.3em 0 .5em}
.popup h3 em{font-style:normal;color:var(--vermilion)}
.popup p{color:var(--ink-2);margin:0 0 1.4em}
.popup__alt{display:inline-block;margin-top:1em;font-size:.9rem;color:var(--ink-2)}

/* ---------- Petals (gold sparks drifting in the hero) ---------- */
.spark{position:absolute;top:-10px;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.0;pointer-events:none;z-index:1;
  box-shadow:0 0 10px 2px rgba(255,200,100,.6);animation:fall linear forwards}
@keyframes fall{
  0%{opacity:0;transform:translate(0,0)}
  10%{opacity:.9}
  100%{opacity:0;transform:translate(var(--dx,40px),var(--dy,500px))}
}




/* ---------- Welcome intro ---------- */
.intro{display:none}
.intro-open body{overflow:hidden}
.intro-open .intro{display:flex}
.intro-open main *,.intro-open main *::before,.intro-open main *::after{animation-play-state:paused!important}
.intro{
  position:fixed;inset:0;z-index:200;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px;overflow:hidden;color:var(--white);
  background:
    radial-gradient(1000px 520px at 50% 35%,rgba(224,90,50,.32),transparent 65%),
    linear-gradient(160deg,#a5241c 0%,var(--lacquer) 45%,var(--lacquer-deep) 100%);
  transition:transform .95s cubic-bezier(.7,0,.25,1);
}
.intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gold);z-index:4}
.intro.is-leaving{transform:translateY(-101%)}
.intro__inner{position:relative;z-index:3;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.intro__inner > *{opacity:0;animation:loadIn .9s var(--ease) forwards}
.intro__inner > :nth-child(2){animation-delay:.15s}
.intro__inner > :nth-child(3){animation-delay:.35s}
.intro__inner > :nth-child(4){animation-delay:.6s}
.intro__kicker{margin:0;font-family:var(--f-brush);color:var(--gold);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);letter-spacing:.22em;line-height:1.2}
.intro__title{
  font-family:var(--f-display);font-weight:900;margin:.2em 0 .7em;letter-spacing:-.01em;
  font-size:clamp(1.7rem,1rem + 3vw,3.3rem);line-height:1.1;text-wrap:balance;
}
.intro__title span{color:var(--gold)}
.intro__frame{
  position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;
  width:min(900px,100%,calc((100vh - 290px) * 16 / 9));
  box-shadow:0 0 0 2px var(--gold),0 0 0 9px rgba(224,173,76,.16),0 40px 80px -30px rgba(0,0,0,.8);
}
@supports (height:100svh){.intro__frame{width:min(900px,100%,calc((100svh - 290px) * 16 / 9))}}
.intro__frame video{width:100%;height:100%;display:block;object-fit:cover}
.intro__sound{
  position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:.45em;
  padding:.5em .95em;border-radius:999px;cursor:pointer;font:inherit;font-size:.85rem;line-height:1;
  color:var(--white);background:rgba(43,23,18,.78);border:1px solid rgba(224,173,76,.6);backdrop-filter:blur(4px);
  transition:background .25s,transform .25s var(--ease);
}
.intro__sound:hover{background:rgba(43,23,18,.95);transform:translateY(-1px)}
.intro__sound svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.intro__sound svg path:first-child{fill:var(--gold)}
.intro__sound[aria-pressed="false"] .wave{opacity:.35}
.intro__go{margin-top:1.5rem;min-width:240px}
.intro .lantern--1{left:3%}
.intro .lantern--3{right:3%}
@media (max-width:560px){
  .intro__go{width:auto;min-width:200px}
  .intro .lantern{width:40px}
  .intro .lantern i{width:40px;height:46px}
  .intro__sound span{display:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .stats__grid{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .stats__grid > div:nth-child(4)::before{display:none}
  .chapters{grid-template-columns:repeat(2,1fr)}
  .chapter--rescue{grid-column:span 1}
  .features{grid-template-columns:repeat(2,1fr);row-gap:36px}
}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero{padding-top:120px}
  .hero__book{padding-top:30px}
  .hero__copy{text-align:left}
  .book{--w:min(250px,64vw)}
  .badge{width:78px;height:78px;right:8%}
  .badge b{font-size:1.5rem}
  .lantern--2{display:none}
  .lantern{width:44px}
  .lantern i{width:44px;height:50px}
  .lantern--1{left:2%}
  .lantern--3{right:2%;--rope:20px}
  .story__grid{grid-template-columns:1fr}
  .story__photo{position:relative;top:0;max-width:440px;margin:0 auto}
  .pages{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 16px 26px;margin-inline:-16px;scrollbar-width:thin}
  .page{scroll-snap-align:center}
  .rules__list{grid-template-columns:1fr}
  .cost{grid-template-columns:1fr}
  .for{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr}
  .guarantee{flex-direction:column;text-align:center}
}
@media (max-width:560px){
  .chapters{grid-template-columns:1fr}
  .chapter--rescue{grid-column:auto}
  .features{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stats__grid > div::before{display:none}
  .btn{width:100%}
  .btn--small{width:auto}
  .sticky p span{display:none}
  .topbar{font-size:.8rem}
  .proverb span{font-size:2rem}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .load-in{opacity:1;transform:none}
  .ribbon__track{animation:none}
}

/* ---------- Legal pages & 404 ---------- */
.legal-head{background:var(--lacquer);padding:16px}
.legal-home{display:inline-flex;align-items:center;gap:10px;color:var(--white);text-decoration:none;font-family:var(--f-display);font-weight:700}
.legal h2{font-family:var(--f-display);font-size:1.35rem;margin:1.8em 0 .4em}
.legal p{max-width:40em}
.legal a:not(.btn){color:var(--vermilion)}
.legal .btn{margin-top:1.5em}
.legal-note{background:#fbe3d8;border-left:4px solid var(--vermilion);padding:.8em 1em;border-radius:8px;font-size:.92rem}
.legal-page .footer{padding-bottom:36px}
.swipe{display:none}
@media (max-width:860px){.swipe{display:inline}}