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

:root { --paper:#f8f1eb; --paper-deep:#f1e6de; --ink:#2c3934; --ink-soft:#65706a; --green:#173e37; --green-light:#d9e1d4; --coral:#e87868; --pink:#f2c6bd; --line:rgba(44,57,52,.15); --serif:'DM Serif Display', 'Songti SC', serif; --sans:'Noto Sans SC', 'PingFang SC', sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); overflow-x:hidden; }
body.modal-open { overflow:hidden; }
button, a, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { border:0; cursor:pointer; color:inherit; }
.site-noise { position:fixed; inset:0; opacity:.055; pointer-events:none; z-index:50; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }
.section-shell { width:min(1180px, calc(100% - 96px)); margin:0 auto; }
.site-header { height:80px; display:flex; align-items:center; justify-content:space-between; width:min(1320px, calc(100% - 80px)); margin:auto; position:relative; z-index:20; border-bottom:1px solid transparent; transition:.3s ease; }
.site-header.is-sticky { height:68px; position:fixed; top:0; left:50%; transform:translateX(-50%); width:min(1320px, calc(100% - 80px)); background:rgba(248,241,235,.88); backdrop-filter:blur(18px); border-color:var(--line); padding:0 25px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:33px; height:33px; display:grid; place-items:center; border:1px solid var(--coral); border-radius:50%; color:var(--coral); font:24px/1 var(--serif); padding-bottom:2px; }
.brand-copy { display:flex; flex-direction:column; line-height:1; gap:5px; text-transform:uppercase; }
.brand-copy strong { color:var(--green); font-size:14px; letter-spacing:.18em; font-weight:700; }
.brand-copy small { color:var(--ink-soft); font:9px var(--mono); letter-spacing:.04em; }
.main-nav { display:flex; align-items:center; gap:38px; margin-left:11%; }
.main-nav a { position:relative; color:#64706a; font-size:12px; transition:.25s; }
.main-nav a::after { content:''; width:4px; height:4px; background:var(--coral); border-radius:50%; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%) scale(0); transition:.25s; }
.main-nav a:hover, .main-nav a.active { color:var(--green); }
.main-nav a.active::after, .main-nav a:hover::after { transform:translateX(-50%) scale(1); }
.header-actions { display:flex; align-items:center; gap:22px; }
.icon-button { width:32px; height:32px; border-radius:50%; background:transparent; display:grid; place-items:center; color:var(--green); transition:.2s; }
.icon-button:hover { background:var(--green-light); transform:rotate(12deg); }
.icon-button.is-off { color:#9aa19c; }
.icon-button svg { width:16px; }
.mini-letter { display:flex; align-items:center; gap:7px; color:var(--green); background:transparent; font-size:11px; }
.mini-letter svg { width:16px; color:var(--coral); }
.hero { min-height:calc(100vh - 80px); min-height:700px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; position:relative; padding-top:18px; padding-bottom:100px; }
.hero-copy { position:relative; z-index:2; padding-bottom:12px; }
.eyebrow { color:var(--coral); font:10px var(--mono); letter-spacing:.16em; text-transform:uppercase; margin:0 0 26px; display:flex; align-items:center; gap:9px; }
.eyebrow-line { width:29px; height:1px; background:var(--coral); display:inline-block; }
.eyebrow-heart { font-family:var(--serif); font-size:15px; }
h1, h2, h3, p { margin-top:0; }
h1 { color:var(--green); font:normal clamp(65px, 8vw, 112px)/.91 var(--serif); letter-spacing:-.055em; margin:0 0 28px; }
h1 em { color:var(--coral); font-style:italic; padding-left:.15em; }
.hero-desc { color:var(--ink-soft); font-size:14px; line-height:2; letter-spacing:.08em; margin-bottom:34px; }
.hero-actions { display:flex; align-items:center; gap:11px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:9px; height:43px; padding:0 18px; border-radius:3px; font-size:12px; letter-spacing:.06em; transition:.25s ease; }
.button svg { width:15px; }
.button-primary { color:#fff; background:var(--green); box-shadow:0 8px 18px rgba(23,62,55,.13); }
.button-primary:hover { background:#2a5a4e; transform:translateY(-3px); box-shadow:0 12px 24px rgba(23,62,55,.2); }
.button-quiet { background:transparent; color:var(--green); }
.button-quiet:hover { color:var(--coral); }
.hero-art { position:relative; height:min(650px, 72vh); min-height:515px; }
.hero-glow { position:absolute; width:440px; height:440px; border-radius:50%; background:var(--pink); filter:blur(2px); opacity:.44; left:3%; top:13%; }
.hero-photo { position:absolute; margin:0; background:#fff; padding:11px 11px 38px; box-shadow:0 18px 35px rgba(59,48,42,.15); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.hero-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.hero-photo-back { width:270px; height:358px; left:2%; top:12%; transform:rotate(-7deg); padding-bottom:42px; }
.hero-photo-back img { object-position:center; }
.hero-photo-main { width:315px; height:415px; right:8%; top:21%; transform:rotate(6deg); z-index:2; padding:13px 13px 46px; }
.hero-photo-main img { object-position:center; }
.hero-art:hover .hero-photo-back { transform:rotate(-10deg) translate(-6px, -8px); }
.hero-art:hover .hero-photo-main { transform:rotate(3deg) translate(6px, -8px); }
.photo-sticker { position:absolute; right:-37px; top:45px; width:76px; height:76px; display:grid; place-items:center; color:#fff; background:var(--coral); border-radius:50%; font:italic 13px/1.1 var(--serif); text-align:center; transform:rotate(12deg); box-shadow:0 7px 15px rgba(232,120,104,.3); }
.hero-stamp { position:absolute; z-index:3; left:2%; bottom:8%; width:94px; height:94px; border:1px solid var(--green); border-radius:50%; color:var(--green); display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(-13deg); background:rgba(248,241,235,.84); }
.hero-stamp span, .hero-stamp small { font:8px var(--mono); letter-spacing:.18em; }
.hero-stamp strong { font:20px/.82 var(--serif); text-align:center; padding:5px 0; }
.hero-scribble { color:var(--green); font:italic 25px var(--serif); position:absolute; right:-7%; top:4%; transform:rotate(-14deg); z-index:2; }
.hero-doodle { position:absolute; color:var(--coral); font-family:var(--serif); }
.doodle-one { font-size:33px; left:-5%; top:6%; transform:rotate(12deg); }
.doodle-two { font-size:41px; right:-5%; bottom:14%; transform:rotate(14deg); }
.hero-footer { position:absolute; bottom:38px; left:0; right:0; display:flex; justify-content:space-between; color:var(--ink-soft); font:9px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.scroll-note, .date-note { display:flex; gap:9px; align-items:center; }
.scroll-note svg { width:15px; color:var(--coral); }
.date-note svg { width:14px; color:var(--coral); animation:float-down 1.8s infinite; }
.story { padding-top:125px; padding-bottom:140px; }
.section-heading, .gallery-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:57px; }
.section-heading .eyebrow, .gallery-heading .eyebrow { margin-bottom:15px; }
h2 { font:normal clamp(37px, 4vw, 53px)/1.05 var(--serif); color:var(--green); letter-spacing:-.045em; margin-bottom:0; }
.heading-note { font:italic 17px/1.65 var(--serif); color:var(--coral); text-align:right; margin:0; }
.timeline { display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:20px; min-height:337px; }
.timeline-card { position:relative; border-radius:2px; overflow:hidden; }
.timeline-card-main { background:var(--green); color:#fff; padding:30px 34px; }
.timeline-card-top { display:flex; justify-content:space-between; font:10px var(--mono); letter-spacing:.08em; color:#b5cbbf; }
.timeline-number { color:var(--coral); }
.timeline-heart { font-size:94px; line-height:1; color:var(--coral); opacity:.95; position:absolute; right:21px; top:54px; transform:rotate(10deg); font-family:var(--serif); }
.timeline-card-main h3 { position:relative; font:normal clamp(28px, 3vw, 40px)/1.12 var(--serif); letter-spacing:-.035em; margin:77px 0 17px; }
.timeline-card-main p { color:#b5cbbf; font-size:12px; line-height:1.9; max-width:270px; }
.card-caption { position:absolute; bottom:25px; left:34px; font:9px var(--mono); letter-spacing:.08em; color:#718f83; }
.timeline-card-note { background:var(--green-light); padding:42px 35px; display:flex; flex-direction:column; justify-content:center; transform:rotate(1deg); }
.timeline-card-note::before { content:''; position:absolute; inset:13px; border:1px solid rgba(23,62,55,.16); pointer-events:none; }
.pin { width:10px; height:10px; position:absolute; top:15px; left:50%; border-radius:50%; background:var(--coral); box-shadow:0 2px 4px rgba(0,0,0,.12); }
.quote-mark { color:var(--coral); font:68px/0.7 var(--serif); height:36px; }
.timeline-card-note p { color:var(--green); font:normal 28px/1.3 var(--serif); letter-spacing:-.035em; margin:0 0 26px; }
.timeline-card-note p em { color:var(--coral); }
.note-sign { color:#71847a; font:10px var(--mono); }
.timeline-card-stats { background:var(--paper-deep); padding:30px 34px; transform:rotate(-1.3deg); }
.stats-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stats-label { color:var(--coral); font:10px var(--mono); letter-spacing:.1em; }
.anniversary-chip { color:#89948d; border:1px solid rgba(44,57,52,.18); padding:4px 6px; font:8px var(--mono); letter-spacing:.08em; }
.days-line { display:flex; align-items:baseline; margin-top:28px; }
.days-line strong { color:var(--green); font:normal 62px/.8 var(--serif); letter-spacing:-.06em; }
.stats-unit { font:14px var(--serif); color:var(--coral); margin-left:4px; }
.stats-divider { height:1px; background:var(--line); margin:17px 0 12px; }
.anniversary-countdown { color:var(--green); }
.countdown-heading { display:flex; justify-content:space-between; align-items:center; color:var(--ink-soft); font-size:10px; }
.countdown-heading b { color:var(--coral); font:10px var(--mono); letter-spacing:.06em; }
.countdown-numbers { display:flex; align-items:baseline; gap:5px; margin-top:9px; }
.countdown-numbers span { display:flex; align-items:baseline; gap:2px; }
.countdown-numbers strong { color:var(--green); font:normal 25px/.9 var(--mono); letter-spacing:-.09em; }
.countdown-numbers small { color:var(--ink-soft); font-size:9px; }
.countdown-numbers i { color:var(--coral); font:normal 19px var(--mono); opacity:.7; }
.stats-message { color:var(--ink-soft); font-size:11px; line-height:1.7; margin:13px 0 0; }.stats-message b { color:var(--green); }.stats-sparkle { position:absolute; right:27px; bottom:30px; font-size:22px; color:var(--coral); }
.gallery-section { padding-bottom:135px; }
.gallery-heading { align-items:flex-start; margin-bottom:37px; }.gallery-heading h2 { margin-bottom:15px; }.gallery-intro { color:var(--ink-soft); font-size:13px; line-height:1.8; margin:0; max-width:485px; }.gallery-controls { align-self:flex-end; display:flex; flex-direction:column; align-items:flex-end; gap:18px; }.filter-tabs { display:flex; gap:23px; }.filter-tab { color:#89928d; background:transparent; font-size:11px; padding:0 0 9px; border-bottom:1px solid transparent; transition:.2s; }.filter-tab span { font:9px var(--mono); margin-left:2px; }.filter-tab:hover, .filter-tab.active { color:var(--green); border-color:var(--coral); }.filter-tab.active span { color:var(--coral); }.upload-button { color:var(--green); display:flex; align-items:center; gap:7px; font-size:11px; border-bottom:1px solid var(--green); padding-bottom:6px; cursor:pointer; }.upload-button svg { width:14px; }.upload-button input { display:none; }
.gallery-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:15px; align-items:start; }.memory-card { grid-column:span 3; position:relative; min-width:0; cursor:pointer; background:#fff; padding:7px 7px 12px; box-shadow:0 7px 18px rgba(59,48,42,.08); transform:rotate(var(--tilt)); transition:transform .35s ease, box-shadow .35s ease, opacity .3s; }.memory-card:nth-child(7n+1) { grid-column:span 4; }.memory-card:nth-child(7n+4) { grid-column:span 2; }.memory-card:hover { transform:rotate(0) translateY(-8px) scale(1.025); box-shadow:0 18px 32px rgba(59,48,42,.16); z-index:3; }.memory-card.is-hidden { display:none; }.memory-card-media { width:100%; aspect-ratio:var(--ratio, .8); overflow:hidden; position:relative; background:var(--paper-deep); }.memory-card-media img, .memory-card-media video { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }.memory-card:hover .memory-card-media img { transform:scale(1.05); }.memory-card::after { content:'open'; position:absolute; right:13px; bottom:32px; border-radius:50%; width:30px; height:30px; display:grid; place-items:center; font:8px var(--mono); color:#fff; background:var(--green); opacity:0; transform:scale(.7); transition:.25s; }.memory-card:hover::after { opacity:.9; transform:scale(1); }.memory-card-meta { min-height:29px; display:flex; align-items:end; justify-content:space-between; gap:4px; padding:9px 4px 0; }.memory-card-meta strong { color:var(--green); font:normal 15px var(--serif); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.memory-card-meta span { color:#9ca29e; font:8px var(--mono); white-space:nowrap; }.memory-card.video-card .memory-card-media::after { content:'▶  MOVING MEMORY'; position:absolute; bottom:10px; left:10px; color:#fff; font:9px var(--mono); letter-spacing:.08em; }.gallery-empty { color:var(--ink-soft); text-align:center; padding:70px 0; font:italic 18px var(--serif); }.gallery-footer { display:flex; justify-content:space-between; align-items:center; margin-top:38px; padding-top:16px; border-top:1px solid var(--line); color:#8b948e; font:9px var(--mono); letter-spacing:.1em; }.gallery-footer span { display:flex; align-items:center; gap:9px; }.gallery-footer svg { color:var(--coral); width:14px; }.text-button { color:var(--green); background:transparent; display:flex; align-items:center; gap:7px; font:10px var(--mono); }.text-button svg { color:var(--coral); width:14px; }.text-button:hover { color:var(--coral); }
.letter-section { padding-bottom:125px; }.letter-card { min-height:330px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:40px 11%; background:var(--coral); color:#fff; }.letter-card::before, .letter-card::after { content:''; position:absolute; width:300px; height:300px; border:1px solid rgba(255,255,255,.3); border-radius:50%; }.letter-card::before { right:-80px; top:-150px; }.letter-card::after { right:70px; bottom:-240px; width:420px; height:420px; }.letter-card-flower { position:absolute; top:31px; right:15%; color:#fff3eb; font-size:37px; transform:rotate(20deg); }.letter-card-label { font:10px var(--mono); letter-spacing:.17em; margin-bottom:20px; opacity:.75; }.letter-card h2 { color:#fff; font-size:47px; margin-bottom:24px; }.letter-card h2 em { font-style:italic; color:#ffe3dc; }.button-light { color:var(--coral); background:#fffaf5; }.button-light:hover { background:var(--green); color:#fff; transform:translateY(-3px); }.letter-card-stamp { position:absolute; right:9%; bottom:39px; border:1px solid rgba(255,255,255,.5); width:91px; height:91px; display:grid; place-items:center; text-align:center; font:9px/1.3 var(--mono); letter-spacing:.1em; transform:rotate(8deg); }.site-footer { border-top:1px solid var(--line); padding:22px 0 35px; color:#89918c; display:flex; justify-content:space-between; font:9px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.site-footer b { color:var(--coral); font-size:15px; vertical-align:-2px; }
.petal-layer { position:fixed; inset:0; pointer-events:none; z-index:10; overflow:hidden; }.petal { position:absolute; top:-30px; left:var(--left); width:var(--size); height:calc(var(--size) * .7); border-radius:100% 0 100% 0; background:var(--petal-color); opacity:var(--opacity); animation:fall var(--duration) linear var(--delay) infinite; transform:rotate(var(--rotate)); }.petal:nth-child(2n) { border-radius:0 100% 0 100%; }.cursor-heart { position:fixed; pointer-events:none; z-index:80; opacity:0; color:var(--coral); font:30px var(--serif); transform:translate(-50%,-50%) scale(.7); transition:opacity .15s, transform .3s; }.cursor-heart.show { opacity:1; transform:translate(-50%,-100%) scale(1); }
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; }.modal[hidden] { display:none; }.modal-backdrop { position:absolute; inset:0; background:rgba(23,31,28,.78); backdrop-filter:blur(8px); animation:fade-in .25s ease; }.photo-viewer { width:min(940px, calc(100% - 80px)); max-height:calc(100vh - 80px); position:relative; z-index:1; display:grid; grid-template-columns:45px minmax(0, 1fr) 45px; grid-template-rows:minmax(200px, 66vh) auto; align-items:center; column-gap:16px; }.viewer-image-wrap { grid-column:2; height:100%; display:flex; align-items:center; justify-content:center; min-width:0; }.viewer-image-wrap img { display:block; max-width:100%; max-height:66vh; width:auto; height:auto; object-fit:contain; box-shadow:0 14px 40px rgba(0,0,0,.25); }.viewer-video { width:100%; height:100%; display:grid; place-items:center; }.viewer-video video { max-width:100%; max-height:66vh; }.modal-close { position:absolute; top:-37px; right:0; color:#fff; background:transparent; padding:4px; }.modal-close svg { width:20px; }.viewer-arrow { grid-row:1; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.13); color:#fff; display:grid; place-items:center; transition:.2s; }.viewer-arrow:hover { background:var(--coral); }.viewer-arrow svg { width:18px; }.viewer-prev { grid-column:1; }.viewer-next { grid-column:3; }.viewer-meta { grid-column:2; color:#fff; padding-top:18px; position:relative; }.viewer-meta h3 { margin:0 0 4px; font:normal 24px var(--serif); }.viewer-meta p { color:rgba(255,255,255,.65); font-size:11px; margin:0; }.viewer-index { color:var(--coral); font:9px var(--mono); float:right; margin-top:6px; }.viewer-favourite { position:absolute; right:0; bottom:0; display:flex; align-items:center; gap:5px; color:#fff; background:transparent; font-size:10px; }.viewer-favourite svg { width:14px; }.viewer-favourite.is-loved { color:var(--coral); }.love-letter { position:relative; z-index:1; width:min(560px, calc(100% - 42px)); max-height:calc(100vh - 60px); overflow:auto; background:#fbf4e9; padding:54px 62px 42px; box-shadow:0 20px 60px rgba(0,0,0,.25); transform:rotate(-1deg); animation:letter-in .4s cubic-bezier(.2,.8,.2,1); }.love-letter .modal-close { top:14px; right:14px; color:var(--green); }.letter-overline { color:var(--coral); font:9px var(--mono); letter-spacing:.13em; }.letter-big-heart { color:var(--coral); font:84px/.8 var(--serif); margin:30px 0 25px; transform:rotate(-10deg); }.love-letter h2 { font-size:30px; margin-bottom:23px; }.love-letter p { color:#65716a; font:16px/2 var(--serif); margin-bottom:15px; }.love-letter .letter-ending { color:var(--green); font-size:18px; margin-top:24px; }.love-letter .letter-ending em { color:var(--coral); font-size:13px; }.letter-bottom-heart { color:var(--coral); letter-spacing:8px; text-align:center; margin-top:33px; }.toast { position:fixed; z-index:150; left:50%; bottom:30px; transform:translate(-50%,20px); background:var(--green); color:#fff; padding:11px 17px; border-radius:3px; font-size:11px; opacity:0; pointer-events:none; transition:.3s; box-shadow:0 8px 20px rgba(23,62,55,.18); }.toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }.reveal.revealed { opacity:1; transform:translateY(0); }.reveal-delay-1 { transition-delay:.12s; }.reveal-delay-2 { transition-delay:.22s; }
@keyframes fall { 0% { transform:translate3d(0,-40px,0) rotate(0); } 100% { transform:translate3d(var(--drift), 110vh, 500px) rotate(540deg); } } @keyframes float-down { 50% { transform:translateY(4px); } } @keyframes fade-in { from { opacity:0; } to { opacity:1; } } @keyframes letter-in { from { opacity:0; transform:translateY(20px) rotate(-5deg) scale(.97); } to { opacity:1; transform:rotate(-1deg) scale(1); } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media (max-width:850px) { .section-shell { width:min(100% - 42px, 620px); }.site-header, .site-header.is-sticky { width:calc(100% - 42px); }.main-nav { display:none; }.header-actions { gap:7px; }.mini-letter span { display:none; }.hero { display:flex; flex-direction:column; min-height:0; padding-top:75px; padding-bottom:80px; gap:10px; align-items:stretch; }.hero-copy { padding-top:0; }.hero-art { width:100%; height:530px; min-height:0; }.hero-photo-back { left:7%; }.hero-photo-main { right:9%; }.hero-footer { bottom:24px; }.story { padding-top:78px; padding-bottom:90px; }.section-heading, .gallery-heading { display:block; }.heading-note { margin-top:20px; text-align:left; }.timeline { grid-template-columns:1fr 1fr; }.timeline-card-main { grid-row:span 2; }.timeline-card-stats, .timeline-card-note { min-height:250px; }.gallery-controls { align-items:flex-start; margin-top:26px; }.gallery-grid { grid-template-columns:repeat(6, 1fr); gap:11px; }.memory-card, .memory-card:nth-child(7n+1), .memory-card:nth-child(7n+4) { grid-column:span 2; }.memory-card:nth-child(5n+1) { grid-column:span 3; }.letter-card { padding:40px 9%; }.letter-card-stamp { right:5%; bottom:25px; transform:scale(.75) rotate(8deg); }.site-footer { width:calc(100% - 42px); flex-wrap:wrap; gap:13px; }.photo-viewer { width:calc(100% - 28px); grid-template-columns:29px minmax(0,1fr) 29px; column-gap:4px; }.viewer-arrow { width:29px; height:29px; }.viewer-meta { padding-top:12px; }.viewer-favourite { position:relative; margin-top:12px; }.love-letter { padding:43px 30px 32px; }.love-letter h2 { font-size:26px; } }
@media (max-width:520px) { .section-shell { width:calc(100% - 34px); }.site-header, .site-header.is-sticky { width:calc(100% - 34px); }.brand-copy small { font-size:8px; }.hero { padding-top:57px; }.hero h1 { font-size:71px; }.hero-desc { font-size:12px; }.hero-actions { flex-wrap:wrap; }.hero-art { height:455px; }.hero-glow { width:340px; height:340px; left:8%; }.hero-photo-back { width:210px; height:282px; left:2%; }.hero-photo-main { width:230px; height:306px; right:4%; }.photo-sticker { width:62px; height:62px; font-size:11px; right:-8px; }.hero-doodle.doodle-two { right:0; }.hero-stamp { width:76px; height:76px; font-size:8px; bottom:3%; }.hero-scribble { font-size:19px; right:0; }.hero-footer { font-size:8px; }.date-note { display:none; }.timeline { display:flex; flex-direction:column; }.timeline-card-main { min-height:350px; }.timeline-card-note, .timeline-card-stats { min-height:250px; }.gallery-heading h2 { font-size:39px; }.filter-tabs { gap:15px; flex-wrap:wrap; }.gallery-grid { gap:9px; }.memory-card, .memory-card:nth-child(7n+1), .memory-card:nth-child(7n+4), .memory-card:nth-child(5n+1) { grid-column:span 3; }.memory-card:nth-child(4n+1) { grid-column:span 6; }.memory-card-meta strong { font-size:13px; }.gallery-footer { align-items:flex-start; gap:18px; flex-direction:column; }.letter-card { min-height:350px; }.letter-card h2 { font-size:35px; }.letter-card-stamp { right:8px; bottom:19px; }.site-footer { font-size:8px; }.site-footer span:nth-child(2) { display:none; } }