@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;1,500&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ink: #160b0e;
  --wine: #2a0e13;
  --red: #8e2f3c;
  --red-bright: #e15e6d;
  --cream: #f3e7d3;
  --paper: #ead9bc;
  --muted: #bda99d;
  --gold: #d9b76f;
  --sans: "Space Mono", monospace;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --display: "Playfair Display", "Noto Serif SC", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: var(--serif);
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--red-bright); color: #fff; }

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.vignette { position: fixed; inset: 0; z-index: 79; pointer-events: none; box-shadow: inset 0 0 11vw rgba(0,0,0,.52); }
.cursor-glow {
  position: fixed; width: 280px; height: 280px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(196,53,65,.10), transparent 68%); transform: translate(-50%,-50%);
}

.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(circle at 75% 42%, #3d1319 0, #200b0f 29%, #0d0709 72%);
  transition: opacity 1.2s ease, visibility 1.2s;
}
.intro.is-gone { opacity: 0; visibility: hidden; }
.intro__grain { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12vw, rgba(255,255,255,.018) 12vw 12.1vw); }
.intro__lamp { position: absolute; width: 26vw; height: 26vw; min-width: 320px; min-height: 320px; right: 2vw; top: 15%; border-radius: 50%; filter: blur(30px); background: rgba(150,27,40,.14); animation: breathe 4s ease-in-out infinite; }
.intro__content { width: min(84vw, 1180px); position: relative; z-index: 2; }
.eyebrow, .section-mark, .intro small { font: 11px/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { color: var(--red-bright); margin-bottom: 32px; }
.intro h1 { font: 500 clamp(42px,7vw,94px)/1.15 var(--serif); letter-spacing: -.055em; margin: 0; max-width: 870px; }
.intro h1 span { display: block; opacity: 0; transform: translateY(35px); animation: titleIn 1s .25s forwards; }
.intro h1 span:nth-child(2) { animation-delay: .6s; color: #e7c8b2; }
.intro__content > p { margin: 38px 0; color: #b9a6a0; line-height: 2; font-size: 15px; }
.enter-button {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 15px; border: 1px solid rgba(225,94,109,.55);
  background: rgba(122,29,40,.15); border-radius: 99px; padding: 17px 25px; cursor: pointer; transition: .35s ease;
}
.enter-button::before { content:""; position:absolute; inset:0; background: var(--red); transform:translateX(-105%); transition:.45s ease; }
.enter-button:hover::before { transform:translateX(0); }
.enter-button > * { position: relative; z-index: 1; }
.enter-button__dot { width: 8px; height: 8px; border-radius: 50%; background: #ef6674; box-shadow: 0 0 14px #ef6674; }
.intro small { display: block; margin-top: 24px; color: #75666a; letter-spacing: .12em; }
.intro__portrait { position: absolute; right: 7vw; bottom: 4vh; transform: rotate(4deg); opacity: .25; }
.portrait-frame { width: 210px; padding: 20px 20px 35px; background: #d7c6aa; color: #261a18; box-shadow: 0 30px 90px #000; }
.portrait-frame img { width: 100%; image-rendering: pixelated; filter: sepia(.25); }
.portrait-frame span { display:block; font:8px var(--sans); letter-spacing:.12em; margin-top:15px; }
.portrait-frame__index { position:absolute; right:10px; top:8px; font:10px var(--sans); }

.topbar { position: fixed; top:0; left:0; width:100%; height:76px; z-index:70; display:flex; justify-content:space-between; align-items:center; padding:0 38px; background:linear-gradient(#160b0ef2 0%, #160b0eb3 52%, transparent 100%); opacity:0; transform:translateY(-100%); transition:.7s ease; }
body.started .topbar { opacity:1; transform:none; }
.brand { color:var(--cream); text-decoration:none; display:flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.2em; }
.brand__aperture { width:18px; height:18px; border:1px solid var(--red-bright); border-radius:50%; position:relative; box-shadow:inset 0 0 0 5px #39151a; }
.brand__aperture::after { content:""; position:absolute; inset:5px; background:var(--red-bright); border-radius:50%; }
.chapter-indicator { position:absolute; left:50%; font:11px var(--sans); letter-spacing:.18em; color:#8d7c77; }
.chapter-indicator span { color:var(--cream); }
.sound-toggle { border:0; background:none; display:flex; gap:11px; align-items:center; font:10px var(--sans); letter-spacing:.14em; cursor:pointer; }
.sound-toggle__bars { height:16px; display:flex; align-items:center; gap:3px; }
.sound-toggle__bars i { display:block; width:1px; height:6px; background:#9d7b75; transition:.3s; }
.sound-toggle__bars i:nth-child(2) { height:13px; }
.sound-toggle[aria-pressed="true"] i { background:var(--red-bright); animation:eq .8s infinite alternate; }
.sound-toggle[aria-pressed="true"] i:nth-child(2){animation-delay:.2s}.sound-toggle[aria-pressed="true"] i:nth-child(3){animation-delay:.4s}

.progress-rail { position:fixed; right:18px; top:50%; width:1px; height:180px; background:rgba(255,255,255,.09); z-index:68; opacity:0; transition:1s; }
body.started .progress-rail { opacity:1; }
.progress-rail__fill { width:1px; height:0; background:var(--red-bright); box-shadow:0 0 7px var(--red); }
.progress-rail span { position:absolute; bottom:-55px; left:-7px; font:7px var(--sans); letter-spacing:.16em; color:#6c5d59; writing-mode:vertical-rl; }

.chapter { position:relative; min-height:100vh; overflow:hidden; }
.section-mark { display:flex; align-items:center; gap:14px; color:#bd7179; margin-bottom:28px; }
.section-mark i { display:block; width:55px; height:1px; background:currentColor; opacity:.45; }
.section-mark.light { color:#8c554c; }
.reveal { opacity:0; transform:translateY(34px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.75,.25,1); }
.reveal.in-view { opacity:1; transform:none; }
.portrait-pixel img { image-rendering:pixelated; }

.hero { min-height:160vh; padding:18vh 8vw 13vh; background:radial-gradient(circle at 71% 34%, #481820 0, #220d12 23%, #11090b 64%); }
.hero__halo { position:absolute; width:60vw; height:60vw; right:-8vw; top:2vh; border-radius:50%; border:1px solid rgba(215,72,84,.08); box-shadow:0 0 100px rgba(159,36,48,.07), inset 0 0 100px rgba(159,36,48,.04); }
.hero__copy { position:relative; z-index:2; max-width:760px; }
.hero h2 { font:500 clamp(34px,4.7vw,68px)/1.5 var(--serif); letter-spacing:-.04em; margin:0; }
.hero h2 em { font-style:normal; color:#e6a6a4; }
.hero__copy > p { width:min(560px,100%); font-size:16px; line-height:2.15; color:#ad9994; margin:42px 0 0 6vw; }
.developer { width:min(940px,84vw); margin:24vh auto 0; position:relative; }
.developer__meta { display:flex; justify-content:space-between; font:9px var(--sans); letter-spacing:.14em; color:#8f716c; margin-bottom:12px; }
.developer__stage { position:relative; height:clamp(380px,55vw,610px); overflow:hidden; background:#190d0f; border:1px solid rgba(238,215,193,.1); box-shadow:0 45px 100px rgba(0,0,0,.45); }
.developer__base,.developer__developed { position:absolute; inset:0; display:grid; place-items:center; }
.developer__base { background:radial-gradient(circle at 50% 42%,#44302b 0,#241718 52%,#170d10 100%); overflow:hidden; }
.developer__base img { width:72% !important; opacity:.2; filter:grayscale(.6) sepia(.78) saturate(.6) brightness(.78) blur(8px); transform:scale(1.06); }
.developer__developed { width:12%; overflow:hidden; background:radial-gradient(circle,#6d2830,#210e12 66%); border-right:1px solid rgba(255,215,201,.7); }
.developer__base img,.developer__developed img { width:clamp(240px,36vw,440px); max-width:none; }
.developer__developed img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); filter:drop-shadow(0 30px 50px #060204); }
.developer__beam { position:absolute; top:0; bottom:0; left:12%; width:90px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(255,184,176,.08),transparent); pointer-events:none; }
.developer__quote { position:absolute; right:5%; bottom:6%; font-size:clamp(15px,2vw,24px); opacity:0; transform:translateY(15px); transition:.8s; text-shadow:0 2px 15px #000; }
.developer__quote.visible { opacity:1; transform:none; }
.develop-slider { width:100%; appearance:none; height:32px; background:transparent; cursor:ew-resize; }
.develop-slider::-webkit-slider-runnable-track { height:6px; border-radius:99px; background:linear-gradient(90deg,var(--red-bright) 0 var(--value,3%),rgba(243,231,211,.13) var(--value,3%)); }
.develop-slider::-webkit-slider-thumb { appearance:none; width:22px; height:22px; margin-top:-8px; border:2px solid #e9b4af; background:#8e2f3c; border-radius:50%; box-shadow:0 0 24px rgba(225,94,109,.65); }
.scroll-cue { position:absolute; bottom:4vh; left:50%; display:flex; flex-direction:column; align-items:center; gap:12px; font:8px var(--sans); letter-spacing:.2em; color:#725d59; }
.scroll-cue i { width:1px; height:45px; background:linear-gradient(var(--red),transparent); animation:scrollLine 1.8s infinite; transform-origin:top; }

.contact { padding:15vh 6vw 18vh; color:#281719; background:#d9c5a6; }
.contact::before { content:""; position:absolute; inset:0; opacity:.23; background:radial-gradient(circle at 12% 20%,#fff 0,transparent 28%),linear-gradient(100deg,transparent 49.8%,rgba(68,34,30,.09) 50%,transparent 50.2%); }
.contact__heading { position:relative; max-width:760px; margin:0 auto 10vh; text-align:center; }
.contact__heading .section-mark { justify-content:center; }
.contact h2,.seasons h2 { font:500 clamp(34px,4.7vw,64px)/1.45 var(--serif); margin:0; letter-spacing:-.045em; }
.contact__heading p { color:#745c58; line-height:2; max-width:560px; margin:26px auto; }
.contact-sheet { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:min(1120px,100%); margin:auto; background:#201315; padding:36px 22px; box-shadow:0 35px 70px rgba(68,40,31,.24); }
.contact-sheet::before,.contact-sheet::after { content:""; position:absolute; left:0; right:0; height:13px; background:repeating-linear-gradient(90deg,transparent 0 20px,#d9c5a6 20px 32px,transparent 32px 42px); }
.contact-sheet::before{top:7px}.contact-sheet::after{bottom:7px}
.contact-sheet__strip-label { position:absolute; left:24px; top:22px; font:7px var(--sans); letter-spacing:.15em; color:#a77660; }
.contact-sheet__strip-label.bottom { top:auto; bottom:21px; left:auto; right:24px; }
.film-frame { position:relative; aspect-ratio:1; padding:0; border:1px solid #4a3532; overflow:hidden; background:#160d0f; cursor:pointer; transition:.4s; }
.film-frame:hover,.film-frame.is-active { border-color:#c68c6f; transform:translateY(-6px); box-shadow:0 11px 28px #070405; }
.film-frame img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; filter:sepia(.2) saturate(.75) brightness(.72); transition:.45s; }
.film-frame:hover img,.film-frame.is-active img { filter:none; transform:scale(1.06); }
.film-frame span { position:absolute; z-index:2; top:7px; left:8px; color:#cf8c70; font:8px var(--sans); }
.selected-memory { display:grid; grid-template-columns:180px minmax(0,650px); width:min(940px,90%); margin:11vh auto 0; align-items:start; justify-content:center; gap:6vw; }
.selected-memory__index { font:italic 500 clamp(92px,13vw,180px)/.8 var(--display); color:rgba(97,56,49,.16); letter-spacing:-.1em; transition:.35s ease; }
.selected-memory__copy > span,.season-card > span,.future-room__copy > span { font:9px var(--sans); letter-spacing:.17em; color:#976458; }
.selected-memory__copy h3 { font:500 clamp(27px,3.4vw,46px)/1.5 var(--serif); letter-spacing:-.04em; margin:15px 0 24px; }
.selected-memory__copy p { color:#6d5551; line-height:2; }
.signature-line { display:inline-block; margin-top:28px; padding:9px 13px; border-radius:99px; background:rgba(95,53,46,.08); font:8px var(--sans); letter-spacing:.25em; }

.rain { min-height:140vh; padding:16vh 8vw; background:linear-gradient(160deg,#11161b,#161013 55%,#2d1116); }
.rain-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.45; pointer-events:none; }
.rain__header { position:relative; max-width:720px; z-index:2; }
.rain__header h2 { font:500 clamp(38px,5vw,68px)/1.4 var(--serif); margin:0; }
.rain__header p { color:#948d8d; line-height:2.1; max-width:600px; margin:30px 0; }
.wet-print { position:relative; z-index:2; display:grid; grid-template-columns:minmax(280px,510px) 1fr; gap:8vw; align-items:center; width:min(1100px,100%); margin:13vh auto 0; }
.wet-print__photo { position:relative; aspect-ratio:1; background:radial-gradient(circle,#6f4144,#281517); border:15px solid #d1c0a5; border-bottom-width:60px; box-shadow:0 45px 90px #07080a; }
.wet-print__photo img { width:100%; height:100%; object-fit:contain; }
#fogCanvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.wipe-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:13px; pointer-events:none; transition:.6s; font:10px var(--sans); letter-spacing:.15em; }
.wipe-hint i { width:42px; height:42px; border:1px solid rgba(255,255,255,.6); border-radius:50%; animation:wipe 2.2s infinite; }
.wipe-hint.hidden { opacity:0; }
.wet-print__caption > span { font:9px var(--sans); letter-spacing:.17em; color:#a66870; }
.wet-print__caption p { font-size:clamp(19px,2.2vw,29px); line-height:2; color:#b9aaaa; }
.wet-print__caption strong { color:#f0d9c7; font-weight:500; }

.seasons { padding:15vh 6vw 18vh; color:#2e1c1b; background:#eee2ca; }
.seasons__intro { max-width:850px; margin:0 auto 10vh; text-align:center; }
.seasons__intro .section-mark { justify-content:center; }
.season-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; width:min(1250px,100%); margin:auto; background:rgba(72,45,38,.18); }
.season-card { min-height:590px; position:relative; padding:38px 28px; overflow:hidden; background:#d8c9ad; transition:.5s; }
.season-card:hover { transform:translateY(-12px); z-index:2; box-shadow:0 25px 60px rgba(70,44,35,.23); }
.season-card.spring{background:#d8cfad}.season-card.summer{background:#d9b49c}.season-card.autumn{background:#cda985}.season-card.winter{background:#c5c8c4}
.season-card::after { content:""; position:absolute; inset:0; opacity:.2; background:linear-gradient(140deg,#fff,transparent 35%); pointer-events:none; }
.season-card__number { font:10px var(--sans); letter-spacing:.14em; color:#76544e; }
.season-card__portrait { height:270px; display:grid; place-items:center; margin:34px -10px 25px; transition:.5s; }
.season-card:hover .season-card__portrait { transform:scale(1.08) translateY(-5px); }
.season-card__portrait img { width:210px; filter:drop-shadow(0 24px 28px rgba(68,42,39,.2)); }
.season-card h3 { font-size:25px; font-weight:500; margin:13px 0; }
.season-card p { font-size:13px; line-height:1.9; color:#6f5852; }
.future-room { width:min(1050px,92%); margin:15vh auto 0; display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; gap:8vw; }
.future-room__image { position:relative; padding:24px; background:#cbb898; box-shadow:0 30px 60px rgba(70,44,35,.22); transform:rotate(2deg); }
.future-room__image::after { content:"以后"; position:absolute; right:15px; bottom:8px; font-size:12px; }
.future-room__image img { width:100%; image-rendering:pixelated; }
.future-room__copy h3 { font:500 clamp(29px,3.5vw,48px)/1.5 var(--serif); margin:18px 0; }
.future-room__copy p { line-height:2; color:#725a52; max-width:560px; }

.finale { min-height:150vh; padding:17vh 6vw 13vh; display:flex; flex-direction:column; align-items:center; text-align:center; background:radial-gradient(circle at 50% 47%,#471923,#170b0e 35%,#090608 75%); }
.stars { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.star { position:absolute; width:2px; height:2px; background:#efc7b0; border-radius:50%; opacity:.25; animation:twinkle var(--d) infinite alternate; }
.finale__prelude { position:relative; z-index:2; }
.finale__prelude .section-mark { justify-content:center; }
.finale__prelude > p { color:#aa9291; line-height:2; }
.last-print { position:relative; z-index:2; margin:9vh 0 30px; }
.last-print__image { width:min(380px,70vw); aspect-ratio:.86; position:relative; padding:25px 25px 80px; background:#d5c3a5; transform:rotate(-1deg); box-shadow:0 40px 90px #000; }
.last-print__placeholder,.last-print__revealed { position:absolute; left:25px; right:25px; top:25px; bottom:80px; }
.last-print__placeholder { display:grid; place-items:center; align-content:center; color:#554039; background:linear-gradient(145deg,#b7a488,#e0d0b5); }
.last-print__placeholder span { font:italic 68px var(--display); opacity:.25; }
.last-print__placeholder p { font:8px var(--sans); letter-spacing:.22em; }
.last-print__revealed { display:grid; place-items:center; background:radial-gradient(circle,#b37a75,#32161c 66%); clip-path:inset(100% 0 0 0); transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1); }
.last-print__revealed img { width:94%; filter:drop-shadow(0 30px 30px rgba(19,6,9,.6)); }
.last-print__caption { margin:20px 0 0; color:#43302b; font-size:12px; }
.hold-button { position:relative; z-index:3; width:245px; height:58px; overflow:hidden; border:1px solid rgba(225,94,109,.5); border-radius:99px; background:rgba(81,25,32,.3); cursor:pointer; touch-action:none; }
.hold-button__fill { position:absolute; inset:0; background:linear-gradient(90deg,#842b37,#c94859); transform:translateX(-100%); }
.hold-button__text { position:relative; z-index:2; font:11px var(--sans); letter-spacing:.12em; }
.hold-button.complete { pointer-events:none; opacity:.45; }
.love-letter { position:relative; z-index:2; max-width:850px; margin:13vh auto 0; opacity:0; transform:translateY(50px); visibility:hidden; transition:1.5s ease; }
.love-letter.visible { opacity:1; transform:none; visibility:visible; }
.love-letter__tiny { font:9px var(--sans); letter-spacing:.22em; color:#b16c75; }
.love-letter h2 { font:500 clamp(62px,10vw,128px)/1 var(--serif); letter-spacing:-.08em; margin:34px 0; color:#f1d9c5; text-shadow:0 0 55px rgba(215,71,87,.2); }
.love-letter p { font-size:clamp(17px,2vw,24px); line-height:2.15; color:#bfa9a4; }
.love-letter strong { color:#f0d6c3; font-weight:500; }
.love-letter__actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:48px; }
.love-letter__actions button { border:1px solid #a2404c; background:#8a2c38; padding:16px 24px; border-radius:99px; cursor:pointer; font-size:13px; transition:.35s; }
.love-letter__actions button:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(142,47,60,.3); }
.love-letter__actions button.ghost { color:#9d8884; background:transparent; border-color:#5d393e; }
.love-letter__answer { opacity:0; margin-top:30px; color:#d5a784; transition:1s; }
.love-letter__answer.visible { opacity:1; }
.petal { position:fixed; top:-40px; z-index:90; width:10px; height:16px; border-radius:90% 10% 80% 20%; background:linear-gradient(#f29aa5,#aa3341); pointer-events:none; animation:fall var(--fall) linear forwards; }

footer { min-height:140px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:40px 7vw; border-top:1px solid rgba(255,255,255,.07); background:#090608; color:#67585a; font:8px var(--sans); letter-spacing:.14em; }

@keyframes titleIn { to { opacity:1; transform:none; } }
@keyframes breathe { 50% { transform:scale(1.15); opacity:.65; } }
@keyframes eq { to { height:15px; } }
@keyframes scrollLine { 0%{transform:scaleY(0);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0} }
@keyframes wipe { 0%{transform:translateX(-45px);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translateX(45px);opacity:0} }
@keyframes twinkle { to { opacity:.9; transform:scale(2); } }
@keyframes fall { to { transform:translate3d(var(--drift),110vh,0) rotate(720deg); opacity:.2; } }

@media (max-width: 900px) {
  .intro__portrait { right:-30px; bottom:2vh; width:150px; }
  .hero { padding-left:7vw; padding-right:7vw; }
  .hero__copy > p { margin-left:0; }
  .contact-sheet { grid-template-columns:repeat(2,1fr); }
  .selected-memory,.wet-print,.future-room { grid-template-columns:1fr; }
  .selected-memory__index { font-size:100px; }
  .wet-print { max-width:620px; }
  .season-grid { grid-template-columns:repeat(2,1fr); }
  .season-card { min-height:540px; }
  .future-room__image { max-width:400px; margin:auto; }
}

@media (max-width: 560px) {
  .topbar { height:62px; padding:0 18px; }
  .chapter-indicator { display:none; }
  .sound-label { display:none; }
  .progress-rail { right:8px; }
  .intro__content { width:86vw; }
  .intro h1 { font-size:40px; }
  .intro__portrait { opacity:.12; }
  .hero { min-height:145vh; padding-top:14vh; }
  .hero__copy { width:100%; max-width:100%; min-width:0; }
  .hero h2 { font-size:29px; line-height:1.55; overflow-wrap:anywhere; }
  .hero__copy > p { width:auto; max-width:100%; font-size:14px; line-height:2; overflow-wrap:anywhere; }
  .developer { width:92vw; margin-left:-3vw; }
  .developer__stage { height:390px; }
  .developer__base img,.developer__developed img { width:270px; }
  .developer__meta span:last-child { display:none; }
  .contact,.rain,.seasons { padding-left:6vw; padding-right:6vw; }
  .contact-sheet { width:106%; margin-left:-3%; padding:34px 14px; gap:8px; }
  .selected-memory { width:100%; }
  .rain { min-height:125vh; }
  .wet-print__photo { border-width:11px; border-bottom-width:48px; }
  .season-grid { grid-template-columns:1fr; }
  .season-card { min-height:520px; }
  .future-room { width:100%; }
  .last-print__image { width:310px; }
  .love-letter p br { display:none; }
  footer { flex-direction:column; align-items:flex-start; line-height:1.8; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}