/* One physical sheet; its generated alpha edge never clips the content. */
.page{padding-top:0}
.hero.hero-letter{display:block;min-height:0;margin:0 -40px 34px;position:relative;isolation:isolate;padding:50px 40px 170px;filter:drop-shadow(0 7px 5px #6b563510)}
.hero-letter>*{animation:none}
.hero.hero-letter:before{content:'';position:absolute;inset:0 0 180px;z-index:-2;background:#f9f9f7 url('assets/hero-sketch-paper.png') top left / 1536px 1024px repeat;pointer-events:none}
.hero.hero-letter>.hero-stock{position:absolute;inset:auto 0 0;z-index:-1;width:100%;height:auto;max-height:100%;object-fit:cover;object-position:bottom;pointer-events:none;user-select:none}
.hero.hero-letter>.hero-composition{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(230px,1.35fr) minmax(170px,.85fr);grid-template-rows:auto auto;gap:20px 26px;align-items:start;position:relative;min-width:0}
.hero-childhood{grid-column:1;grid-row:1 / 3;align-self:end;min-width:0;transform:rotate(-4deg);padding-bottom:4px}
.hero-childhood img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(2px 5px 3px #403c301c)}
.hero-letter .hero-heading{grid-column:2;grid-row:1;align-self:center;min-width:0}
.hero-letter .hello{display:flex;align-items:center;gap:9px;color:#73644e;font-size:11px;letter-spacing:.1px;line-height:1.7}
.hero-letter .dot{background:#b28b3e;box-shadow:0 0 0 4px #b28b3e12;flex-shrink:0}
.hero-letter h1{margin:17px 0 0;font-family:Georgia,'Songti SC',serif;font-size:clamp(42px,4.05vw,62px);font-weight:500;line-height:1.07;letter-spacing:-2.5px;color:#2c3747;white-space:normal}
.hero-letter h1 .cn{display:block;font-size:clamp(23px,2.1vw,31px);margin-top:15px;line-height:1.5;letter-spacing:.5px;color:#494638;max-width:none}
.hero-letter-note{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:12px;transform:rotate(-5deg);transform-origin:center;min-width:0;padding:5px 0 12px 8px;font-family:'Bradley Hand','Segoe Print','Kaiti SC',cursive;font-size:clamp(17px,1.65vw,23px);line-height:1.28;color:#32332e}
.hero-letter-note .dear-self{font-size:1.5em;line-height:1.1;margin-bottom:5px}
.hero-letter .hero-bio{grid-column:2 / 4;grid-row:2;min-width:0;padding:3px 18px 0 0;align-self:start}
.hero-letter .hero-bio p{font-size:13px;line-height:2;margin:0 0 7px;max-width:560px;width:auto;color:#625f58}
.hero-letter .tags{width:auto;gap:9px;margin-top:18px}
.hero-letter .tag{font-size:10px;color:#786d59;border-bottom:1px solid #baaa8d;padding:3px 0;margin-right:8px;background:transparent}
.collection-heading{border-top:0;padding-top:0;margin-top:0}
@media(max-width:1200px) and (min-width:761px){
 .hero.hero-letter{padding:40px 30px 145px}
 .hero.hero-letter>.hero-composition{grid-template-columns:minmax(130px,.85fr) minmax(210px,1.3fr) minmax(155px,.85fr);gap:22px 20px}
 .hero-letter h1{font-size:43px;letter-spacing:-2px}.hero-letter h1 .cn{font-size:23px}
 .hero-letter-note{font-size:18px;gap:11px;padding-left:4px}
}
@media(max-width:1050px){.hero.hero-letter{margin-left:-26px;margin-right:-26px}}
@media(min-width:761px) and (max-width:960px){
 .hero.hero-letter{padding:35px 30px 110px}
 .hero.hero-letter>.hero-composition{grid-template-columns:minmax(115px,.9fr) minmax(155px,1.1fr);grid-template-rows:auto auto auto;gap:27px 24px}
 .hero-childhood{grid-column:1;grid-row:1;align-self:center;max-width:185px}
 .hero-letter-note{grid-column:2;grid-row:1;font-size:20px;padding-left:0}
 .hero-letter .hero-heading{grid-column:1 / -1;grid-row:2}
 .hero-letter .hero-bio{grid-column:1 / -1;grid-row:3;padding-right:0}
}
@media(max-width:760px){
 .hero.hero-letter{margin:0 -20px 27px;padding:29px 24px 85px;min-height:0}
 .hero.hero-letter>.hero-composition{display:grid;grid-template-columns:minmax(110px,.86fr) minmax(160px,1.14fr);grid-template-rows:auto auto auto;gap:24px 20px}
 .hero-childhood{grid-column:1;grid-row:1;align-self:center;max-width:190px;transform:rotate(-4deg);padding:0}
 .hero-letter .hero-heading{grid-column:1 / -1;grid-row:2;display:block}
 .hero-letter .hello{display:flex;font-size:11px}
 .hero-letter h1{font-size:clamp(39px,10.8vw,63px);line-height:1.05;white-space:normal;margin:12px 0 0;letter-spacing:-1.8px}
 .hero-letter h1 .cn{font-size:clamp(23px,6vw,29px);max-width:none;letter-spacing:.5px;margin-top:10px}
 .hero-letter-note{grid-column:2;grid-row:1;font-size:clamp(17px,4.5vw,24px);gap:10px;padding:3px 0 0;transform:rotate(-4deg)}
 .hero-letter .hero-bio{grid-column:1 / -1;grid-row:3;padding:0 8px 0 0}
 .hero-letter .hero-bio p{font-size:12px;line-height:1.95;width:auto;max-width:none;margin:0 0 7px}
 .hero-letter .tags{gap:9px;margin-top:16px;width:auto}.hero-letter .tag{font-size:10px;margin-right:4px}
}
@media(max-width:359px){
 .hero.hero-letter{padding:26px 20px 80px}
 .hero.hero-letter>.hero-composition{grid-template-columns:minmax(95px,.8fr) minmax(140px,1.2fr);gap:23px 15px}
 .hero-letter-note{font-size:16px;gap:9px}.hero-letter h1{font-size:37px}.hero-letter h1 .cn{font-size:22px}
}