*{box-sizing:border-box;}
  body{margin:0; background:#FFF7E6; color:#3A2E17; font-family:'Literata',serif; line-height:1.6;}
  .wrap{max-width:760px; margin:0 auto;}

  .cover{
    position:relative; height:400px; overflow:hidden;
    background:radial-gradient(circle at 50% 30%, #FFE7A8 0%, #FFD27A 35%, #F0A94E 70%, #C97C2E 100%);
    display:flex; align-items:center; justify-content:center; text-align:center; color:#3A2612;
  }
  .lens{
    width:210px; height:210px; border-radius:50%; overflow:hidden; border:8px solid rgba(255,255,255,.6);
    box-shadow:0 0 0 3px rgba(58,38,18,.15), 0 20px 40px rgba(0,0,0,.25);
    position:relative;
  }
  .lens img{width:100%; height:100%; object-fit:cover;}
  .cover-text{position:absolute; bottom:22px; left:0; right:0;}
  .cover-text h1{font-family:'Quicksand',sans-serif; font-weight:700; font-size:34px; margin:0 0 4px;}
  .cover-text p{margin:0; font-size:14px; color:#5B3D14;}

  .section{padding:44px 20px 10px; max-width:720px; margin:0 auto;}
  .section h2{font-family:'Quicksand',sans-serif; font-weight:600; font-size:24px; margin:0 0 4px; color:#B0611E;}
  .section p.lead{font-size:14.5px; color:#7A6A4D; margin:0 0 22px;}

  /* FILMSTRIP */
  .filmstrip-outer{background:#1C1712; padding:14px 0; margin:0 -20px;}
  .sprocket-row{height:12px; background-image:radial-gradient(circle,#FFF7E6 3px,transparent 3.5px); background-size:26px 12px; background-position:8px center;}
  .filmstrip{display:flex; overflow-x:auto; gap:0; scroll-snap-type:x mandatory; padding:10px 20px;}
  .frame{
    flex:0 0 190px; scroll-snap-align:center; margin-right:4px; background:#000; padding:6px 6px 20px; position:relative;
  }
  .frame img{width:100%; height:150px; object-fit:cover; filter:sepia(.12) saturate(1.1);}
  .frame .stamp{
    position:absolute; bottom:4px; right:8px; font-family:'Space Mono',monospace; font-size:11px; color:#FF7A29;
  }
  .frame figcaption{position:absolute; bottom:4px; left:8px; font-family:'Quicksand',sans-serif; font-size:11px; color:#F0A94E;}

  .see-full{text-align:center; margin:16px 0 0;}
  .see-full a{font-family:'Quicksand',sans-serif; font-weight:600; font-size:14px; color:#B0611E; text-decoration:none; border-bottom:2px solid #F0A94E;}

  /* NOTES - lá thư nắng */
  .notes{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px;}
  .leaf-note{
    background:#FFF1CE; border-radius:0 16px 0 16px; padding:16px 18px; position:relative;
    box-shadow:0 8px 18px rgba(176,97,30,.12);
  }
  .leaf-note::before{content:"☀"; position:absolute; top:-10px; left:-10px; font-size:20px;}
  .leaf-note p{margin:0 0 8px; font-size:14.5px;}
  .leaf-note cite{font-family:'Quicksand',sans-serif; font-weight:600; font-style:normal; color:#B0611E; font-size:13px;}
  @media(max-width:560px){.notes{grid-template-columns:1fr;}}

  .share{
    margin:44px 20px 30px; padding:30px 22px; text-align:center; border-radius:24px;
    background:linear-gradient(160deg,#F0A94E,#C97C2E); color:#FFF7E6;
  }
  .share h2{font-family:'Quicksand',sans-serif; font-weight:700; font-size:24px; margin:0 0 6px;}
  .share p{font-size:13.5px; margin:0 0 18px; opacity:.9;}
  #qrcode{background:#fff; display:inline-block; padding:8px; border-radius:12px; margin-bottom:14px;}
  .link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13px;}
  .link-row code{background:rgba(255,255,255,.18); padding:6px 12px; border-radius:20px;}
  .link-row button{background:#3A2617; color:#FFF7E6; border:none; padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer;}

  .foot{text-align:center; font-size:12.5px; color:#8A7248; padding:0 20px 40px;}