/* V2: physical paper, restrained perspective and readable mobile type. */
:root{--paper-edge:#c7b58e;--depth-ease:cubic-bezier(.18,.75,.2,1)}
h1,h2{letter-spacing:-.045em}.hero-line{display:block}.hero h1{letter-spacing:-.055em;line-height:1.01}
.hero-collage{transform-style:preserve-3d;transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .65s var(--depth-ease);will-change:auto}
.hero-collage>.hero-portrait{transform:translateZ(46px) rotate(-2deg)}
.hero-collage>.sunflower-postcard{transform:translateZ(12px) rotate(-11deg)}
.hero-collage>.travel-postcard{transform:translateZ(25px) rotate(12deg)}
.hero-collage>.pocket-paper{transform:translateZ(80px);filter:drop-shadow(0 16px 12px #4633161a)}
.hero-collage>.hero-flower{transform:translateZ(100px) rotate(-17deg)}
.hero-collage>.race-ticket{transform:translateZ(65px) rotate(-12deg)}
.hero-collage>.bookmark-prop{transform:translateZ(8px) rotate(9deg)}
.hero-collage:after{content:'';position:absolute;left:14%;right:3%;height:28px;bottom:-12px;background:#5c462627;filter:blur(18px);border-radius:50%;transform:translateZ(-20px);pointer-events:none}
.hero-chapters{gap:18px;border:0;padding:24px 0;margin-top:28px;perspective:1100px}
.hero-chapters a,.hero-chapters a:first-child{position:relative;padding:12px;gap:12px;border:1px solid #e1d6bf;background:#fcf8ee;box-shadow:0 3px 0 #e0d4bd,0 12px 24px #46331609;border-radius:4px;transform-style:preserve-3d;transition:transform .4s var(--depth-ease),box-shadow .4s}
.hero-chapters a:last-child{border:1px solid #e1d6bf}
.hero-chapters a>img{width:64px;height:78px;object-fit:cover;border:4px solid #fff;box-shadow:0 3px 8px #46331618;flex-shrink:0;transform:translateZ(18px) rotate(-4deg)}
.hero-chapters a>span{font-size:14px;line-height:1.35;transform:translateZ(12px)}
.hero-chapters a small{font-size:11px;line-height:1.5;margin-top:6px}
.chapter-ordinal{font-family:var(--serif);font-size:14px;color:var(--berry);display:block;font-weight:400;margin-bottom:8px}
.hero-chapters a:hover,.hero-chapters a:focus-visible{transform:translateY(-7px) rotateX(5deg) rotateY(-3deg);box-shadow:0 6px 0 #d4c5a8,0 22px 28px #46331615}
.chapter-tabs .icon{display:none}.chapter-tabs button{font-size:14px;min-height:52px}
.chapter-art{perspective:1000px;transform-style:preserve-3d}
.active-postcard{transform-origin:50% 65%;transform:translateZ(35px) rotate(-2deg);box-shadow:0 4px 0 #dfd3bb,0 22px 35px #53442120}
.back-one{transform:translateZ(5px) rotate(-12deg)}.back-two{transform:translateZ(15px) rotate(11deg)}
.active-postcard.turning{animation:chapterTurn .7s var(--depth-ease)}
@keyframes chapterTurn{0%{transform:translateZ(35px) rotate(-2deg) rotateY(-28deg);opacity:.4}55%{transform:translateZ(80px) rotate(1deg) rotateY(6deg);opacity:1}100%{transform:translateZ(35px) rotate(-2deg)}}
.story-grid{perspective:1600px}.story-card{transform:perspective(1100px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transform-origin:50% 45%;transition:transform .5s var(--depth-ease)}
.card-image-wrap{overflow:visible;border:1px solid #dfd3be;background:#fcf8ef;padding:0 10px 12px;box-shadow:0 4px 0 #e1d6c2,0 15px 24px #4633160c;border-radius:5px}
.card-topline{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:10px}
.card-tag{position:static;background:transparent;border:0;padding:0 5px;font-size:11px;color:#56605a}
.save-button{position:static;flex-shrink:0;width:44px;height:44px;box-shadow:0 2px 0 #d2c3a8}.save-button .icon{width:21px;height:21px}
.story-image-link{border-radius:2px;background:#eae1d0}
.story-image-link>img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;padding:0;transition:none}
.story-card:hover .story-image-link>img{transform:none}
.card-copy h3{line-height:1.12}.card-link{font-size:13px;min-height:44px;margin-top:8px}.card-copy p{font-size:14px}
.story-media>img{object-fit:contain;max-height:720px;width:100%;background:#f0e7d5}
.journal-photo img{object-fit:contain;background:#e3d6be}
.story-detail-copy h2{font-size:clamp(36px,4vw,64px);margin:20px 0}
.button{font-size:14px}.text-link{font-size:14px}.desktop-nav a{font-size:13px}.header-cta{font-size:12px;min-height:44px}.menu-trigger{height:44px;width:44px}.brief-trigger{min-height:44px;font-size:12px}.credit{font-size:12px}
.entrance-replay{display:block;width:fit-content;font-size:12px;margin-top:25px;border-bottom:1px solid #c6b899;padding:8px 0}
.button:active,.save-button:active{transform:translateY(2px) scale(.98)}
.save-button.pop{animation:savePop .6s var(--depth-ease)}
@keyframes savePop{0%{transform:scale(.85) rotateY(-70deg)}65%{transform:scale(1.12) rotateY(8deg)}100%{transform:none}}
.reveal-paper{animation:paperArrive .9s var(--depth-ease) both}
@keyframes paperArrive{from{opacity:.25;transform:perspective(1000px) translateY(32px) rotateX(7deg)}to{opacity:1;transform:perspective(1000px) translateY(0) rotateX(0)}}
.menu-dialog[open]{animation:menuUnfold .55s var(--depth-ease)}
.pocket-dialog[open]{animation:pocketSlide .55s var(--depth-ease)}
@keyframes menuUnfold{from{opacity:0;transform:perspective(1300px) rotateX(-9deg) translateY(-20px);transform-origin:50% 0}to{opacity:1;transform:none}}
@keyframes pocketSlide{from{opacity:0;transform:perspective(1300px) translateX(55px) rotateY(-8deg)}to{opacity:1;transform:none}}

/* The opening is a CSS 3D scene: a hinged lid, paper sides and three photo planes. */
.opening{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 65%,#e5d6b8 0,#f4eedf 42%,#fbf7ee 85%);color:var(--ink);padding:0;overflow:auto;overscroll-behavior:contain;isolation:isolate}
.opening::backdrop{background:var(--paper)}
.opening[open]{display:flex;align-items:center;flex-direction:column}
.opening:before{content:'';position:absolute;inset:18px;border:1px solid #d8c9ab;pointer-events:none}
.opening-bar{display:flex;width:100%;padding:35px 5%;justify-content:space-between;align-items:center;flex-shrink:0}
.opening-wordmark{font-family:var(--serif);font-size:35px;letter-spacing:-.05em;line-height:1}
.opening-wordmark>span{display:block;font:11px var(--sans);letter-spacing:0;margin-top:9px}
.opening-skip{min-height:44px;display:flex;align-items:center;gap:12px;font-size:13px;border-bottom:1px solid #c8b898}
.opening-skip .icon{width:17px;height:17px}
.opening-copy{text-align:center;position:relative;z-index:2;padding:8px 22px 0}
.opening-copy h2{font-size:clamp(40px,5vw,66px);line-height:1.04;letter-spacing:-.045em;margin:14px 0 18px}
.opening-copy p{font-size:15px}.opening-copy .eyebrow{font-size:10px}
.opening-stage{position:relative;width:min(520px,88vw);height:310px;min-height:240px;perspective:1100px;flex-shrink:0;margin:25px auto 5px;pointer-events:none}
.envelope-scene{position:absolute;inset:55px 25px 0;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-12deg) rotateZ(-5deg);transition:transform 1.5s var(--depth-ease)}
.envelope-back,.envelope-front{position:absolute;inset:0;border:1px solid #c4af83;border-radius:5px;background:linear-gradient(125deg,#f3e7cc,#ded0ac);box-shadow:inset 0 0 30px #c6ab7040}
.envelope-back{transform:translateZ(-12px);background:#d4bf94;box-shadow:0 0 0 3px #cfbd96}
.envelope-front{transform:translateZ(25px);background:linear-gradient(30deg,transparent 49.5%,#cbb78d80 49.8%,transparent 50.4%),linear-gradient(-30deg,transparent 49.5%,#cbb78d80 49.8%,transparent 50.4%),linear-gradient(115deg,#f4e9d0,#e3d5b3);clip-path:polygon(0 0,50% 30%,100% 0,100% 100%,0 100%)}
.envelope-front:after{content:'';position:absolute;inset:12px;border:1px dashed #a88c5a66;clip-path:polygon(0 0,50% 32%,100% 0,100% 100%,0 100%)}
.envelope-flap{position:absolute;inset:-1px -1px 0;height:60%;background:linear-gradient(165deg,#f8efd9,#cdb98e);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:translateZ(28px) rotateX(0);backface-visibility:visible;transition:transform 1.1s var(--depth-ease);filter:drop-shadow(0 8px 3px #6e53232a)}
.envelope-seal{position:absolute;left:calc(50% - 26px);top:43%;width:52px;height:52px;border:5px double #a88045;border-radius:50%;background:radial-gradient(circle at 30% 20%,#dfc788,#af8947);color:#735329;font:italic 32px var(--serif);display:grid;place-items:center;box-shadow:1px 4px 4px #66471f40;transform:translateZ(40px);transition:opacity .3s,transform .5s}
.envelope-edge{position:absolute;left:0;right:0;bottom:0;height:10px;background:#cbb790;transform-origin:50% 100%;transform:translateZ(25px) rotateX(90deg)}
.envelope-address{position:absolute;left:24px;bottom:28px;line-height:1.5;font:22px/1.4 var(--serif);color:#74613f;letter-spacing:-.03em}
.envelope-address i{font-size:18px}.envelope-monogram{position:absolute;right:25px;bottom:22px;font:italic 48px var(--serif);color:#a88a5466}
.envelope-photo{position:absolute;left:25%;width:48%;height:230px;top:12px;padding:7px 7px 26px;background:#fffbf0;border:1px solid #e3d4b6;box-shadow:0 9px 20px #5e452522;transform:translateZ(4px) translateY(10px) scale(.78);opacity:0;transition:transform 1.5s var(--depth-ease),opacity .4s .15s}
.envelope-photo img{width:100%;height:100%;object-fit:cover}.envelope-photo figcaption{position:absolute;bottom:7px;left:0;width:100%;text-align:center;font:italic 12px var(--serif);color:#7a6846}
.opening-shadow{position:absolute;bottom:-18px;left:12%;width:76%;height:38px;background:#5f451c3b;border-radius:50%;filter:blur(20px);transition:transform 1.5s,opacity 1.5s}
.opening-controls{text-align:center;position:relative;z-index:3;padding:30px 20px 0}
.opening-controls .button{min-width:210px;min-height:52px;box-shadow:0 5px 0 #780c35,0 15px 28px #87103a20}
.opening-controls p{font-size:12px;color:#837354;margin-top:18px}
.opening-footnote{font-size:9px;letter-spacing:.23em;margin:30px 0 25px;color:#8a7856}
.opening.is-unfolding .envelope-scene{transform:translateY(15px) rotateX(1deg) rotateY(0deg) rotateZ(0deg)}
.opening.is-unfolding .envelope-seal{opacity:0;transform:translateZ(90px) translateY(50px) rotateZ(20deg)}
.opening.is-unfolding .envelope-flap{transform:translateZ(-10px) rotateX(175deg)}
.opening.is-unfolding .envelope-photo{opacity:1;transition-delay:.25s}
.opening.is-unfolding .photo-one{transform:translateZ(5px) translate(-100px,-150px) rotateZ(-17deg)}
.opening.is-unfolding .photo-two{transform:translateZ(10px) translate(125px,-125px) rotateZ(16deg);transition-delay:.35s}
.opening.is-unfolding .photo-three{transform:translateZ(85px) translate(5px,-100px) rotateZ(-3deg);transition-delay:.45s}
.opening.is-unfolding .opening-copy{opacity:.25;transition:opacity .8s}
.opening.is-unfolding .opening-controls{opacity:0;transition:opacity .3s}
.opening.is-leaving{animation:openingExit .6s var(--depth-ease) both;pointer-events:none}
@keyframes openingExit{to{opacity:0;transform:scale(1.08)}}
.hero-entered .hero-copy{animation:heroCopyIn .85s var(--depth-ease) both}.hero-entered .hero-collage{animation:heroSceneIn 1.3s var(--depth-ease) both}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes heroSceneIn{from{opacity:.1;transform:perspective(1300px) rotateX(12deg) rotateY(-10deg) translateY(60px)}to{opacity:1;transform:perspective(1300px) rotateX(0) rotateY(0) translateY(0)}}

@media(max-width:900px){.hero-chapters{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.hero-chapters a{border:1px solid #e1d6bf!important}.hero-chapters a:nth-child(even){padding-left:12px!important}.hero-chapters a>img{width:66px;height:78px}.hero-chapters a span{font-size:14px}.hero-chapters small{font-size:11px!important}}
@media(max-width:640px){
 body{font-size:16px}#main{padding:0 22px}.hero{padding-top:16px}.hero-copy{padding-top:24px;padding-bottom:20px}.hero-eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:22px;gap:8px}.hero h1{font-size:clamp(48px,13.6vw,69px);line-height:1.03;letter-spacing:-.05em}.hero h1 em{padding-bottom:3px}
 .hero-intro{font-size:16px!important;line-height:1.7;margin-top:22px}.hero-intro br{display:none}.hero-buttons{gap:10px;margin-top:25px}.hero-buttons .button{font-size:12px!important;padding:13px 12px;gap:10px;min-height:49px}.hero-signature{margin-top:22px}.hero-collage{margin-top:8px;margin-left:0;margin-right:0;height:390px;max-width:100%;perspective:900px}.hero-collage>.pocket-paper{transform:translateZ(35px)}.hero-collage>.hero-flower{transform:translateZ(45px) rotate(-17deg)}.hero-collage>.race-ticket{transform:translateZ(28px) rotate(-12deg)}
 .hero-chapters{padding:22px 0;gap:12px;margin-top:22px}.hero-chapters a,.hero-chapters a:first-child,.hero-chapters a:nth-child(even){display:flex;flex-direction:column;align-items:flex-start;padding:12px!important;gap:12px}.hero-chapters a>img{width:100%;height:105px;object-position:50% 40%;border-width:4px;transform:translateZ(10px) rotate(-2deg)}.hero-chapters a>span{font-size:15px;line-height:1.3}.hero-chapters small{font-size:12px!important;line-height:1.5}.chapter-ordinal{font-size:12px;margin-bottom:5px}
 .page-heading>p,.section-heading p,.chapter-copy p,.card-copy p,.about-copy p,.mojo-title p,.mojo-note p,.footer-invitation p,.invitation-paper p,.episode-card p,.journal-content p,.faq-list details p,.prose p{font-size:16px!important;line-height:1.75}
 .eyebrow,.card-copy .eyebrow,.section-heading .eyebrow,.contact-reference-head .eyebrow{font-size:10px!important;letter-spacing:.13em}.section-heading .text-link,.text-link,.card-link{font-size:13px!important;line-height:1.6}.card-link{min-height:44px}.card-copy h3{font-size:30px}.card-tag{font-size:12px}.card-image-wrap{padding:0 10px 12px}.card-topline{min-height:60px}.story-image-link>img{aspect-ratio:4/5;object-fit:contain}.story-grid{gap:38px}.home-stories .story-card{margin-bottom:10px}
 .chapter-tabs{padding:0;gap:4px}.chapter-tabs button{font-size:12px!important;min-height:54px;padding:12px 4px!important;line-height:1.4;white-space:normal}.chapter-art{height:350px}.chapter-copy .button{font-size:13px;min-height:48px}.active-postcard{height:300px}.hero-signature .hand-note{font-size:19px}.page-heading h1{letter-spacing:-.045em}
 .brief-trigger{font-size:11px;min-height:44px;padding:7px 10px}.menu-trigger{min-width:44px;min-height:44px}.brand span{font-size:10px}.footer-bottom nav{font-size:12px;gap:20px}.credit{font-size:12px!important;line-height:1.5}.entrance-replay{font-size:12px}.footer-invitation .button{font-size:14px;min-height:50px}
 .form-label{font-size:14px}.intent-option strong{font-size:14px}.intent-option small{font-size:12px}.field-help,.required,.share-explanation{font-size:12px}.form-actions>.button,.review-actions .button,.form-next{font-size:13px;min-height:48px}.brief-review dl>div{font-size:14px}.brief-review dt{font-size:12px}.micro{font-size:12px}.pocket-dialog .micro{font-size:12px}.pocket-item small,.remove-reference{font-size:12px}
 .opening:before{inset:10px}.opening-bar{padding:26px 24px 22px}.opening-wordmark{font-size:31px}.opening-wordmark>span{font-size:10px}.opening-skip{font-size:12px;gap:8px}.opening-copy{padding:12px 20px 0}.opening-copy h2{font-size:clamp(34px,9.7vw,44px);line-height:1.08;margin-top:14px}.opening-copy p{font-size:14px;max-width:285px;margin:auto}.opening-copy .eyebrow{font-size:9px!important}
 .opening-stage{width:92vw;height:250px;min-height:220px;margin-top:20px}.envelope-scene{inset:55px 18px 0}.envelope-photo{height:190px}.envelope-address{font-size:19px;left:17px;bottom:20px}.envelope-address i{font-size:16px}.envelope-monogram{font-size:37px}.envelope-seal{width:46px;height:46px;left:calc(50% - 23px);font-size:27px}.opening-controls{padding-top:27px}.opening-controls p{font-size:12px;margin-top:15px}.opening-footnote{margin:25px 0 22px}
 .opening.is-unfolding .photo-one{transform:translateZ(5px) translate(-58px,-110px) rotateZ(-16deg)}.opening.is-unfolding .photo-two{transform:translateZ(10px) translate(65px,-95px) rotateZ(14deg)}.opening.is-unfolding .photo-three{transform:translateZ(60px) translate(0,-75px) rotateZ(-3deg)}
}
@media(max-height:720px){.opening-bar{padding-top:20px;padding-bottom:12px}.opening-copy h2{font-size:38px;margin:8px 0 10px}.opening-stage{height:220px;min-height:180px;margin-top:15px}.envelope-scene{inset:45px 25px 0}.envelope-photo{height:170px}.opening-controls{padding-top:15px}.opening-footnote{margin:15px 0}.opening-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hero-collage,.hero-collage>*:not(.hero-portrait),.story-card,.hero-chapters a,.active-postcard,.back-postcard{transition:none!important}.hero-collage{transform:none!important}.story-card{transform:none!important}.opening.is-unfolding .envelope-scene{transition:none}.reveal-paper{animation:none!important}}

.hero-collage>.hero-portrait,.hero-collage>.sunflower-postcard,.hero-collage>.travel-postcard,.hero-collage>.pocket-paper{transition:transform 1s var(--depth-ease)}
.pocket-seal{font:italic 28px var(--serif);cursor:pointer;transition:transform .5s,box-shadow .5s}.pocket-seal:hover{box-shadow:0 7px 12px #67451340;transform:translateY(-2px)}
.hero-collage.is-spread>.hero-portrait{transform:translateZ(65px) translateY(-12px) rotate(1deg)}
.hero-collage.is-spread>.sunflower-postcard{transform:translateZ(22px) translateY(-28px) rotate(-16deg)}
.hero-collage.is-spread>.travel-postcard{transform:translateZ(35px) translateY(-22px) rotate(16deg)}
.hero-collage.is-spread>.pocket-paper{transform:translateZ(65px) rotateX(9deg)}
@media(max-width:640px){.hero-collage.is-spread>.pocket-paper{transform:translateZ(30px) rotateX(9deg)}.hero-collage.is-spread>.hero-portrait{transform:translateZ(40px) translateY(-10px) rotate(1deg)}.hero-collage.is-spread>.travel-postcard{transform:translateZ(15px) translateY(-12px) rotate(13deg)}}
#hero-title:focus{outline:0}
@media(max-width:640px){.hero h1 em{display:inline-block}.conversation-statement p,.episode-body p{font-size:16px;line-height:1.75}.episode-guest{font-size:13px}.episode-tag{font-size:12px}.journal-tabs button{min-height:48px}.pocket-quote{left:78px;top:45px;font-size:17px}}
.episode[open] .episode-body{animation:paperArrive .65s var(--depth-ease)}