*{box-sizing:border-box;}
:root{--kyyeu-accent:#B8622A; --kyyeu-heading-font:'Cormorant Garamond',serif; --kyyeu-heading-scale:1;
      --autumn-gold:#D99A3E; --autumn-deep:#7A3B18;}
html{background:#F7EFE0;}
body{margin:0; color:#4A3524; font-family:'Literata',serif; line-height:1.8; overflow-x:hidden;
  background:var(--kyyeu-bg,
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(217,154,62,.12), transparent 60%),
    linear-gradient(180deg,#FBF4E6 0%,#F2E4CE 45%,#E8D4B8 100%));}
.wrap{max-width:720px; margin:0 auto; position:relative; z-index:4;}
@media (prefers-reduced-motion: reduce){ .leaf-canvas{opacity:.35;} }

/* CANVAS LÁ RƠI */
.leaf-canvas{position:fixed; inset:0; z-index:2; pointer-events:none;}
.leaf-pile{position:fixed; left:0; right:0; bottom:0; height:66px; z-index:3; pointer-events:none; overflow:hidden;}
.pile-leaf{position:absolute; bottom:0; width:22px; height:16px; border-radius:60% 20% 55% 25%;
  opacity:.9; transform-origin:center;}

.cover{padding:56px 22px 26px; text-align:center; position:relative; z-index:4;}
.eyebrow{font-size:10.5px; letter-spacing:.32em; color:var(--kyyeu-accent); margin-bottom:24px;}
.cover-photo{position:relative; width:190px; height:190px; margin:0 auto 22px; border-radius:50%; overflow:hidden;
  border:5px solid #FBF4E6; box-shadow:0 16px 34px rgba(74,53,36,.2);}
.cover-photo img{width:100%; height:100%; object-fit:cover; filter:sepia(.16) saturate(1.08) contrast(1.02);}
.autumn-vignette{position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 40px rgba(122,59,24,.28);}
.cover h1{font-family:var(--kyyeu-heading-font); font-style:italic; font-weight:600;
  font-size:calc(42px * var(--kyyeu-heading-scale)); margin:0 0 10px; color:var(--kyyeu-accent);}
.autumn-line{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:16px; color:#8A6440; margin:0 0 12px;}
.cover-meta{margin:0 0 20px; font-size:13.5px; color:#8A6440;}
.wind-btn{background:none; border:1px solid rgba(184,98,42,.45); color:var(--kyyeu-accent);
  padding:10px 22px; border-radius:24px; font-family:'Literata',serif; font-size:13.5px; cursor:pointer;
  transition:background .35s ease, transform .3s ease;}
.wind-btn:hover{background:rgba(184,98,42,.1); transform:translateY(-2px);}

.section{padding:54px 24px 8px; position:relative; z-index:4;}
.section-head{text-align:center; margin-bottom:30px;}
.section h2{font-family:var(--kyyeu-heading-font); font-style:italic; font-weight:600;
  font-size:calc(28px * var(--kyyeu-heading-scale)); color:var(--kyyeu-accent); margin:0 0 6px;}
.section .sub{font-size:12.5px; color:#8A6440;}

/* ẢNH NGẢ VÀNG */
.autumn-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.leaf-frame{margin:0; opacity:0; transform:translateY(20px) rotate(var(--r));
  transition:opacity .9s ease var(--d), transform .9s cubic-bezier(.2,.85,.3,1) var(--d);}
.leaf-frame.fallen{opacity:1; transform:translateY(0) rotate(var(--r));}
.lf-inner{position:relative; background:#FBF4E6; padding:9px 9px 9px; border-radius:6px;
  box-shadow:0 12px 26px rgba(74,53,36,.18); overflow:hidden;}
.lf-inner img{width:100%; height:140px; object-fit:cover; display:block; border-radius:3px;
  filter:sepia(.14) saturate(1.06); transition:filter .6s ease, transform .7s ease;}
.leaf-frame:hover .lf-inner img{filter:sepia(.02) saturate(1.14); transform:scale(1.04);}
.lf-warm{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(217,154,62,.16), transparent 55%);}
.leaf-frame figcaption{text-align:center; font-size:12.5px; color:#8A6440; margin-top:10px; font-style:italic;}
@media(max-width:600px){.autumn-gallery{grid-template-columns:repeat(2,1fr);}}

.see-full{text-align:center; margin:34px 0 0;}
.see-full a{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:15px; color:var(--kyyeu-accent);
  text-decoration:none; border-bottom:1px solid rgba(184,98,42,.4); padding-bottom:2px;}

/* LÁ THƯ MÙA THU */
.leaf-letters{display:flex; flex-wrap:wrap; justify-content:center; gap:26px; max-width:600px; margin:0 auto;}
.leaf-letter{width:130px; text-align:center; cursor:pointer;}
.ll-shape{position:relative; width:74px; height:56px; margin:0 auto 10px;
  background:linear-gradient(140deg, var(--autumn-gold), var(--kyyeu-accent));
  border-radius:70% 12% 62% 18%; box-shadow:0 8px 18px rgba(122,59,24,.24);
  animation:leafSway 5s ease-in-out infinite; animation-delay:calc(var(--i) * .5s);}
@keyframes leafSway{0%,100%{transform:rotate(-8deg) translateY(0);} 50%{transform:rotate(8deg) translateY(-6px);}}
.ll-vein{position:absolute; top:50%; left:12%; right:12%; height:1.5px; background:rgba(255,246,230,.6);
  transform:translateY(-50%) rotate(-14deg);}
.ll-name{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:13.5px; color:var(--kyyeu-accent);}
.ll-text{display:none; margin-top:12px; background:#FBF4E6; border-radius:8px; padding:14px 16px;
  box-shadow:0 8px 18px rgba(74,53,36,.16); text-align:left;}
.leaf-letter.unfolded .ll-text{display:block; animation:unfoldLeaf .5s ease;}
@keyframes unfoldLeaf{from{opacity:0; transform:translateY(-8px) scale(.94);} to{opacity:1; transform:translateY(0) scale(1);}}
.ll-text p{margin:0; font-size:13px; color:#4A3524; line-height:1.7;}
.leaf-letter.unfolded .ll-shape{animation:none; opacity:.45;}

/* ĐIỀU ĐÃ THAY ĐỔI */
.change-list{max-width:540px; margin:0 auto;}
.change-row{display:grid; grid-template-columns:1fr 40px 1fr; gap:10px; align-items:center;
  padding:14px 0; border-bottom:1px dashed rgba(184,98,42,.22);}
.change-row:last-child{border-bottom:none;}
.cr-then{text-align:right; font-size:14px; color:#8A6440; font-style:italic;}
.cr-arrow{text-align:center; font-size:16px; animation:leafSway 4s ease-in-out infinite;}
.cr-now{font-size:14px; color:#4A3524; font-weight:500;}

/* LỜI NHẮN */
.autumn-notes{max-width:520px; margin:0 auto;}
.autumn-note{background:#FBF4E6; border-radius:10px; padding:17px 20px; margin-bottom:14px;
  box-shadow:0 8px 18px rgba(74,53,36,.1); border-left:3px solid var(--autumn-gold);}
.autumn-note p{margin:0 0 8px; font-size:14.5px; color:#4A3524;}
.autumn-note cite{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:13.5px; color:var(--kyyeu-accent);}

.share{margin:58px 24px 30px; padding:42px 26px; text-align:center; border-radius:18px;
  background:linear-gradient(150deg,var(--kyyeu-accent),var(--autumn-deep)); color:#FBF4E6; position:relative; z-index:4;}
.share h2{font-family:var(--kyyeu-heading-font); font-style:italic; font-size:26px; margin:0 0 8px; color:#F4DCAE;}
.share p{font-size:13px; margin:0 0 20px; opacity:.88;}
#qrcode{background:#fff; display:inline-block; padding:9px; border-radius:10px; margin-bottom:16px;}
.link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:12.5px;}
.link-row code{background:rgba(251,244,230,.16); padding:7px 13px; border-radius:20px;}
.link-row button{background:#F4DCAE; color:var(--autumn-deep); border:none; padding:7px 15px; border-radius:20px;
  font-size:12px; font-weight:700; cursor:pointer;}

.foot{text-align:center; font-size:11.5px; color:#8A6440; padding:0 20px 90px; position:relative; z-index:4;}

/* ============ TÍNH NĂNG ĐẶC BIỆT ============ */

/* 1. NHẶT LÁ ÉP VỞ — BẮT LÁ ĐANG RƠI */
.leaf-catch{max-width:420px; margin:0 auto; text-align:center;}
.catch-book{position:relative; width:190px; height:130px; margin:0 auto 16px;
  background:linear-gradient(160deg,#FBF4E6,#F0E4CE); border-radius:4px 10px 10px 4px;
  box-shadow:0 12px 26px rgba(74,53,36,.2); border-left:8px solid var(--autumn-deep);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; padding:16px;}
.caught-leaf{width:18px; height:14px; border-radius:60% 20% 55% 25%;
  animation:leafDrop .5s cubic-bezier(.3,1.4,.4,1);}
@keyframes leafDrop{from{opacity:0; transform:translateY(-24px) rotate(-40deg) scale(.5);} to{opacity:1; transform:translateY(0) rotate(0) scale(1);}}
.catch-count{font-family:var(--kyyeu-heading-font); font-size:20px; color:var(--kyyeu-accent);}
.catch-hint{font-size:12px; color:#8A6440; font-style:italic; margin-top:6px;}

/* 2. VÒNG ĐỜI CHIẾC LÁ */
.lifecycle{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:560px; margin:0 auto;}
.lc-stage{text-align:center; opacity:0; transform:translateY(14px);
  transition:opacity .8s ease var(--d), transform .8s ease var(--d);}
.lc-stage.grown{opacity:1; transform:translateY(0);}
.lc-leaf{width:52px; height:42px; margin:0 auto 10px; border-radius:64% 14% 58% 20%;
  animation:leafSway 5s ease-in-out infinite;}
.lc-stage.s1 .lc-leaf{background:linear-gradient(140deg,#7EBF5E,#4A8A32);}
.lc-stage.s2 .lc-leaf{background:linear-gradient(140deg,#C8CF4E,#9AAF34); animation-delay:.4s;}
.lc-stage.s3 .lc-leaf{background:linear-gradient(140deg,var(--autumn-gold),var(--kyyeu-accent)); animation-delay:.8s;}
.lc-stage.s4 .lc-leaf{background:linear-gradient(140deg,#A8622A,#6A3812); animation-delay:1.2s; opacity:.75;}
.lc-stage strong{display:block; font-family:var(--kyyeu-heading-font); font-size:16px; color:var(--kyyeu-accent); margin-bottom:3px;}
.lc-stage span{font-size:12px; color:#8A6440;}
@media(max-width:520px){.lifecycle{grid-template-columns:repeat(2,1fr);}}

/* 3. LA BÀN GIÓ MÙA THU */
.wind-gauge{max-width:300px; margin:0 auto; text-align:center;}
.wg-dial{position:relative; width:150px; height:150px; margin:0 auto 14px; border-radius:50%;
  border:3px dashed rgba(184,98,42,.4); background:rgba(251,244,230,.6);}
.wg-arrow{position:absolute; top:50%; left:50%; width:4px; height:56px; margin:-56px 0 0 -2px;
  transform-origin:bottom center; border-radius:3px;
  background:linear-gradient(180deg,var(--kyyeu-accent),var(--autumn-gold));
  transition:transform .5s cubic-bezier(.2,.8,.3,1);}
.wg-center{position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:var(--autumn-deep);}
.wg-label{font-size:12.5px; color:#8A6440;}
.wg-strength{font-family:var(--kyyeu-heading-font); font-size:19px; color:var(--kyyeu-accent); margin-top:4px;}