:root{
  /* IntersectionObserver` to trigger section-enter animations (no scroll event listeners for performance */
  --parchment:#f2ebe1;
  --charcoal:#3d3229;
  --umber:#5c4a3a;
  --rose:#a8747a;
  --sage:#8a9e7c;
  --lavender:#9b8daa;
  --static:#6e7b8b;
  --moss:#2b3026;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--parchment)}
body{margin:0;font-family:"Nunito",sans-serif;color:var(--umber);background:var(--parchment);overflow-x:hidden}
body.pulse{animation:viewportPulse 120ms steps(2,end)}
.scene{min-height:100vh;position:relative;overflow:hidden;padding:clamp(1.2rem,3vw,3rem);isolation:isolate;background:radial-gradient(circle at 20% 15%,rgba(138,158,124,.12),transparent 28%),radial-gradient(circle at 78% 72%,rgba(168,116,122,.10),transparent 30%),var(--parchment)}
.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:repeating-linear-gradient(0deg,rgba(61,50,41,.035) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(92,74,58,.025) 0 1px,transparent 1px 7px);mix-blend-mode:multiply;z-index:-1}
.z-anchor{position:absolute;max-width:min(42vw,620px)}
.top-left{top:clamp(1.6rem,4vw,4.5rem);left:clamp(1.5rem,5vw,5rem)}
.top-right{top:clamp(2rem,6vw,5rem);right:clamp(1.2rem,5vw,5rem)}
.bottom-left{bottom:clamp(2rem,7vw,6rem);left:clamp(1.6rem,6vw,6rem)}
.bottom-right{right:clamp(1.5rem,6vw,6rem);bottom:clamp(1.8rem,6vw,5rem)}
h1,h2{font-family:"Caveat",cursive;color:var(--charcoal);font-size:clamp(2.2rem,6vw,4.8rem);line-height:1.15;letter-spacing:-.01em;margin:0;font-weight:700}
h1{font-size:clamp(4rem,13vw,9.8rem);transform:rotate(-2deg);text-shadow:2px 2px 0 rgba(168,116,122,.14)}
.label,.annotation{font-family:"Homemade Apple",cursive;color:var(--rose);font-size:clamp(.75rem,1.5vw,.95rem);line-height:1.6;margin:.2rem 0}
.tilted{transform:rotate(-5deg);display:inline-block}
.journal-copy{font-size:clamp(1rem,2vw,1.2rem);line-height:1.75;font-weight:400;background:rgba(242,235,225,.68);padding:1rem 1.1rem;border-left:1px solid rgba(138,158,124,.45)}
.journal-copy p{margin:0}.journal-copy h2{margin-bottom:.5rem;font-size:clamp(2.2rem,5vw,4.2rem)}
.photo,.thumb{position:relative;width:min(34vw,440px);height:min(42vh,330px);filter:grayscale(1) contrast(1.1);clip-path:polygon(2% 7%,13% 2%,24% 4%,36% 1%,52% 5%,68% 2%,82% 6%,97% 3%,94% 19%,99% 33%,95% 49%,98% 66%,93% 84%,96% 96%,74% 93%,60% 98%,43% 94%,27% 97%,8% 91%,4% 73%,7% 55%,3% 38%,6% 21%);box-shadow:0 14px 28px rgba(43,48,38,.18),0 0 0 .5px var(--rose)}
.photo::before,.thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--moss),var(--parchment));mix-blend-mode:screen;opacity:.55}.photo::after,.thumb::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.62}.sage-tone::after{background:var(--sage)}.rose-tone::after{background:var(--rose)}
.photo-square{transform:rotate(1.5deg);background:linear-gradient(170deg,transparent 0 42%,rgba(43,48,38,.55) 43% 47%,transparent 48%),radial-gradient(ellipse at 55% 28%,rgba(242,235,225,.7) 0 8%,transparent 9%),linear-gradient(90deg,rgba(43,48,38,.25) 0 12%,transparent 12% 80%,rgba(43,48,38,.2) 80%),repeating-linear-gradient(90deg,rgba(92,74,58,.18) 0 2px,transparent 2px 24px),linear-gradient(180deg,#8a9e7c,#f2ebe1 62%,#5c4a3a)}
.photo-street{transform:rotate(-2deg);background:repeating-linear-gradient(0deg,rgba(110,123,139,.5) 0 3px,transparent 3px 14px),linear-gradient(120deg,transparent 0 44%,rgba(43,48,38,.7) 45% 50%,transparent 51%),repeating-linear-gradient(90deg,rgba(43,48,38,.28) 0 18px,transparent 18px 36px),linear-gradient(180deg,#f2ebe1,#a8747a 48%,#2b3026)}
.photo-flowers{transform:rotate(2.3deg);background:radial-gradient(circle at 28% 44%,#f2ebe1 0 3%,transparent 4%),radial-gradient(circle at 40% 37%,#f2ebe1 0 4%,transparent 5%),radial-gradient(circle at 55% 50%,#f2ebe1 0 3%,transparent 4%),linear-gradient(155deg,transparent 0 50%,rgba(43,48,38,.5) 51% 54%,transparent 55%),linear-gradient(180deg,#8a9e7c,#5c4a3a)}
.thumb{width:230px;height:170px}.thumb-candle{background:radial-gradient(circle at 50% 40%,#f2ebe1 0 10%,transparent 11%),linear-gradient(120deg,#5c4a3a,#f2ebe1 52%,#2b3026)}.thumb-crack{background:linear-gradient(128deg,transparent 0 45%,#2b3026 46% 48%,transparent 49%),repeating-linear-gradient(25deg,#f2ebe1 0 16px,#5c4a3a 17px 18px)}
.tape{position:absolute;width:120px;height:28px;top:-14px;left:28%;transform:rotate(-7deg);z-index:3;opacity:.86;background:repeating-linear-gradient(45deg,rgba(242,235,225,.45) 0 6px,transparent 6px 12px),var(--sage)}.tape-rose{background:repeating-linear-gradient(45deg,rgba(242,235,225,.45) 0 6px,transparent 6px 12px),var(--rose)}.short{width:88px;height:22px}
.pattern{width:112px;height:88px;border:1px solid rgba(61,50,41,.16);box-shadow:3px 4px 0 rgba(92,74,58,.08)}.gingham{background:repeating-linear-gradient(0deg,rgba(138,158,124,.28) 0 12px,transparent 12px 24px),repeating-linear-gradient(90deg,rgba(138,158,124,.28) 0 12px,transparent 12px 24px),var(--parchment)}.cross-stitch{background:radial-gradient(var(--rose) 1.2px,transparent 1.5px) 0 0/12px 12px,repeating-linear-gradient(45deg,transparent 0 8px,rgba(168,116,122,.15) 8px 9px),var(--parchment)}.dots{background:radial-gradient(circle,rgba(138,158,124,.55) 0 3px,transparent 4px) 0 0/18px 18px,var(--parchment)}.dots.rose{background:radial-gradient(circle,rgba(168,116,122,.55) 0 3px,transparent 4px) 0 0/18px 18px,var(--parchment)}.herring{background:repeating-linear-gradient(45deg,rgba(92,74,58,.25) 0 8px,transparent 8px 16px),repeating-linear-gradient(-45deg,rgba(138,158,124,.22) 0 8px,transparent 8px 16px),var(--parchment)}.broken{background:linear-gradient(90deg,transparent 0 39%,var(--static) 40% 50%,transparent 51%),radial-gradient(var(--rose) 1.2px,transparent 1.5px) 0 0/12px 12px,var(--parchment);animation:tileCorrupt 5.4s infinite steps(1,end)}
.scroll-cue{display:flex;align-items:end;gap:.8rem}.scroll-cue span{font-family:"Homemade Apple",cursive;color:var(--rose);font-size:.9rem;transform:rotate(-8deg)}
.wing{position:absolute;width:180px;height:240px;background:linear-gradient(135deg,rgba(155,141,170,.16),rgba(242,235,225,.34));clip-path:polygon(50% 0,82% 16%,96% 48%,76% 82%,45% 100%,23% 76%,8% 44%,20% 13%);backdrop-filter:blur(2px);border:1px solid rgba(155,141,170,.22)}.wing-left{left:-40px;top:32%;transform:rotate(-21deg)}.wing-right{right:-30px;top:18%;transform:rotate(18deg)}.decree .shard{right:8%;bottom:8%;animation:wingJitter 780ms infinite steps(2,end);opacity:.3}.reformed{opacity:.3;transform:rotate(11deg);top:45%}
.botanical{position:absolute;pointer-events:none;fill:none;stroke:var(--sage);stroke-width:1.5;opacity:.75}.botanical path{stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset var(--dur,1600ms) ease}.scene.in-view .botanical path{stroke-dashoffset:0}.vine-a{left:2%;bottom:2%;width:220px}.vine-b{left:39%;top:37%;width:260px;stroke-width:.75;opacity:.32}.vine-c{left:22%;top:10%;width:360px;stroke-width:2}.signature-stem{right:5.8rem;bottom:2.8rem;width:180px;stroke-width:1.5}
.decree-title h2{font-size:clamp(5rem,17vw,13rem);color:var(--moss)}.glitchable.active-glitch{animation:textSplit 150ms steps(2,end) 2}.scan{position:absolute;left:0;right:0;height:10px;background:rgba(110,123,139,.45);mix-blend-mode:screen;opacity:0}.scan-one{top:28%;animation:scanShift 5.7s infinite}.scan-two{top:62%;animation:scanShift 6.8s 1.2s infinite}.scan-three{top:48%;animation:scanShift 8s 2s infinite}
.quote-card{font-family:"Homemade Apple",cursive;color:var(--rose);font-size:clamp(1.4rem,3.6vw,3rem);line-height:1.45;transform:rotate(-4deg);max-width:42vw}.quote-card p{margin:0}.mosaic{display:grid;grid-template-columns:repeat(3,72px);gap:8px;transform:rotate(-3deg)}.mosaic .pattern{width:72px;height:64px}.mosaic .small{transform:translateY(-16px)}
.notes{min-height:100vh}.notes-title{position:absolute;left:7%;top:7%;transform:rotate(-3deg)}.note{position:absolute;background:rgba(242,235,225,.7);padding:1rem;box-shadow:0 10px 26px rgba(43,48,38,.12);border:1px solid rgba(92,74,58,.14)}.note-one{left:12%;top:25%;transform:rotate(-5deg)}.note-two{right:13%;top:18%;transform:rotate(4deg)}.note-three{left:42%;bottom:22%;width:min(360px,38vw);font-size:clamp(1rem,2vw,1.2rem);line-height:1.75;transform:rotate(2deg)}.tape-pattern{position:absolute;top:-16px;left:38px;width:110px;height:26px}.annotation{position:absolute}.a1{left:54%;top:13%;transform:rotate(10deg)}.a2{right:23%;bottom:17%;transform:rotate(-12deg)}.note-swatch{position:absolute;right:8%;bottom:26%;transform:rotate(8deg)}.signature{position:absolute;right:5%;bottom:5%;font-family:"Caveat",cursive;font-size:clamp(2rem,4vw,4rem);color:var(--charcoal);transform:rotate(-4deg)}
.scene:not(.in-view) .z-anchor,.scene:not(.in-view) .notes-title,.scene:not(.in-view) .note,.scene:not(.in-view) .signature{opacity:.2;transform:translateY(16px)}.scene.in-view .z-anchor,.scene.in-view .notes-title,.scene.in-view .note,.scene.in-view .signature{opacity:1;transition:opacity 900ms ease,transform 900ms ease}
@keyframes viewportPulse{0%{transform:translateX(0)}50%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scanShift{0%,88%,100%{opacity:0;transform:translateX(0)}89%{opacity:1;transform:translateX(-12px)}91%{opacity:.8;transform:translateX(10px)}93%{opacity:0;transform:translateX(0)}}@keyframes textSplit{0%{text-shadow:none;transform:translateX(0)}50%{text-shadow:7px 0 var(--static),-5px 0 var(--rose);transform:translateX(4px)}100%{text-shadow:none;transform:translateX(0)}}@keyframes tileCorrupt{0%,80%,100%{filter:none}82%{filter:hue-rotate(20deg);transform:translateX(5px)}84%{transform:translateX(-3px)}}@keyframes wingJitter{0%{clip-path:polygon(50% 0,82% 16%,96% 48%,76% 82%,45% 100%,23% 76%,8% 44%,20% 13%)}50%{clip-path:polygon(47% 3%,86% 12%,91% 51%,80% 78%,41% 96%,27% 80%,10% 39%,17% 17%)}}
@media (max-width:760px){.scene{min-height:115vh}.z-anchor{position:relative;inset:auto;max-width:none;margin:1.2rem 0}.top-right{display:block}.photo{width:86vw;height:260px}.journal-copy{width:100%}h1{font-size:clamp(4rem,20vw,7rem)}.quote-card{max-width:90vw}.mosaic{grid-template-columns:repeat(3,60px)}.note{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:1rem auto;width:86vw}.notes-title,.signature,.annotation,.note-swatch{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:1rem}.botanical{opacity:.38}}