:root {
  color-scheme: light;
  --ink: #24131d;
  --wine: #321625;
  --wine-deep: #190b14;
  --rose: #bd7b84;
  --rose-light: #e5b9b7;
  --cream: #f6f0e9;
  --paper: #fbf7f1;
  --gold: #d6bd91;
  --muted: #796c70;
  --display: "Italiana", "Bodoni 72", Georgia, serif;
  --body: "DM Sans", "Manrope", sans-serif;
  --ease: cubic-bezier(.2,.75,.2,1);
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-width: 320px; background: var(--paper); }
body.is-covered { overflow: hidden; }
a { color: inherit; }
button { color: inherit; font: inherit; }
::selection { color: #fff8ef; background: #8e455f; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 16px; transform: translateY(-160%); background: var(--paper); color: var(--ink); }
.skip-link:focus { transform: none; }
#celebration { outline: 0; }
.topbar { height: 70px; padding: 0 clamp(20px, 5.4vw, 84px); position: absolute; z-index: 2; top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; color: rgba(255,249,243,.82); border-bottom: 1px solid rgba(255,255,255,.14); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.wordmark-heart { color: #d8a6a7; font-size: 15px; }
.topbar nav { display: flex; gap: clamp(18px,3vw,48px); }
.topbar nav a { text-decoration: none; font-size: 11px; color: rgba(255,249,243,.72); transition: color .2s ease; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: white; }
.date-chip { border: 1px solid rgba(242,220,202,.42); padding: 9px 14px; border-radius: 99px; color: #f1d7c7; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hero { height: min(900px,100svh); min-height: 680px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; color: #fff7f0; background: var(--wine-deep); }
.hero-backdrop { position: absolute; inset: -3%; background-position: center 43%; background-size: cover; filter: saturate(.75); transform: scale(1.025); transition: transform 9s ease-out, filter 1.5s ease; }
.hero.immersed .hero-backdrop { transform: scale(1.08); filter: saturate(.92); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(16,7,13,.58),rgba(24,10,18,.25) 50%,rgba(16,7,13,.45)),linear-gradient(0deg,rgba(18,7,14,.48),transparent 47%,rgba(14,8,12,.31)); }
.hero-copy { z-index: 1; text-align: center; width: min(850px,88vw); padding: 110px 0 80px; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 13px; font-size: 9px; letter-spacing: .22em; font-weight: 600; line-height: 1.5; color: #e5c5b3; }
.eyebrow-line { height: 1px; width: 28px; background: currentColor; opacity: .65; }
.hero h1 { margin: 29px 0 18px; font: 400 clamp(60px,10.6vw,142px)/.96 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.hero-text { max-width: 440px; margin: 0 auto; color: rgba(255,245,237,.82); font-size: 13px; line-height: 1.85; letter-spacing: .01em; }
.round-link { display: grid; place-items: center; margin: 46px auto 13px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: white; text-decoration: none; transition: transform .25s ease, background .25s ease; }
.round-link:hover { transform: translateY(4px); background: rgba(255,255,255,.12); }
.round-link span { font-size: 17px; transform: translateY(-1px); }
.scroll-hint { font-size: 8px; letter-spacing: .2em; color: rgba(255,247,239,.68); }
.hero-index { position: absolute; left: clamp(22px,5vw,78px); bottom: 44px; display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: .15em; color: rgba(255,255,255,.78); }
.hero-index i { width: 36px; height: 1px; background: rgba(255,255,255,.6); }
.hero-side-note { position: absolute; right: clamp(24px,5vw,80px); bottom: 40px; writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; font-size: 8px; letter-spacing: .19em; color: rgba(255,255,255,.7); }
.section-wrap { width: min(1160px, calc(100% - 52px)); margin-inline: auto; }
.intro-section { min-height: 420px; padding-block: 114px 102px; text-align: center; position: relative; }
.intro-mark { color: #bd8c7c; font-size: 19px; margin-bottom: 11px; }
.eyebrow-dark { color: #946d6a; }
.intro-section h2, .section-heading h2, .films-heading h2 { margin: 19px 0 12px; font: 400 clamp(45px,6vw,75px)/1.03 var(--display); letter-spacing: -.025em; color: var(--ink); }
.intro-section h2 em { color: #aa7376; font-weight: 400; }
.intro-section > p:last-child { color: #716469; font-size: 13px; line-height: 1.8; margin: 16px auto 0; max-width: 370px; }
.memories-section { width: min(1320px, calc(100% - 52px)); margin: 0 auto; padding: 14px 0 120px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin: 0 8px 38px; }
.section-heading .eyebrow, .films-heading .eyebrow { justify-content: flex-start; margin: 0; }
.section-heading h2, .films-heading h2 { font-size: clamp(42px,5.4vw,66px); margin: 14px 0 0; }
.section-intro { max-width: 270px; margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.memory-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 74px; grid-auto-flow: dense; gap: 11px; }
.memory-card { position: relative; min-width: 0; overflow: hidden; padding: 0; border: 0; background: #e8ded8; cursor: zoom-in; border-radius: 2px; grid-row: span 4; }
.memory-card:nth-child(9n + 1) { grid-row: span 6; grid-column: span 2; }
.memory-card:nth-child(9n + 4) { grid-row: span 5; }
.memory-card:nth-child(9n + 7) { grid-row: span 5; }
.memory-card:nth-child(13n + 2) { grid-row: span 3; }
.memory-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease), filter .5s ease; }
.memory-card::after { content: "↗"; position: absolute; right: 13px; bottom: 12px; display: grid; place-items: center; width: 28px; height: 28px; color: white; font-size: 12px; opacity: 0; transform: translateY(5px); transition: opacity .25s ease,transform .25s ease; background: rgba(26,11,19,.43); border: 1px solid rgba(255,255,255,.42); border-radius: 50%; }
.memory-card:hover img, .memory-card:focus-visible img { transform: scale(1.045); filter: brightness(.87); }
.memory-card:hover::after, .memory-card:focus-visible::after { opacity: 1; transform: none; }
.memory-card:focus-visible { outline: 2px solid #8d526a; outline-offset: 3px; z-index: 1; }
.gallery-count { display: flex; gap: 9px; align-items: center; justify-content: center; margin: 31px 0 0; color: #856e71; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.tiny-star { color: #b3817a; font-size: 16px; }
.films-section { padding: 96px 0 100px; background: var(--wine-deep); color: #fff7f0; overflow: hidden; }
.films-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 40px; }
.films-heading h2 { color: #fff7f0; }
.films-heading .section-intro { color: #c9b7ba; }
.film-track { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; width: min(1320px,calc(100% - 52px)); margin-inline: auto; }
.film-card { position: relative; overflow: hidden; background: #2a1621; border: 1px solid rgba(255,239,233,.14); border-radius: 3px; }
.film-frame { position: relative; aspect-ratio: 4/5; background: #24121b; }
.film-frame video, .film-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-frame img { filter: saturate(.78); transition: transform .6s var(--ease),filter .4s ease; }
.film-card:hover .film-frame img { transform: scale(1.04); filter: saturate(1); }
.film-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 52px; height: 52px; padding: 0 0 0 3px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(28,10,21,.34); color: white; font-size: 16px; cursor: pointer; transition: background .2s ease,scale .2s ease; }
.film-play:hover { background: rgba(154,83,101,.8); scale: 1.07; }
.film-frame.is-playing .film-play { display: none; }
.film-caption { padding: 15px 14px 17px; color: #f0e1da; font: 400 22px/1.2 var(--display); }
.film-footnote { width: min(1320px,calc(100% - 52px)); margin: 27px auto 0; color: #bca8ae; text-align: center; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.film-footnote span { color: #d4aaa5; margin-right: 7px; font-size: 13px; }
.letter-section { min-height: 650px; display: grid; place-items: center; position: relative; overflow: hidden; padding: 100px 26px 83px; background: #eee4dd; }
.letter-orbit { position: absolute; border: 1px solid rgba(163,111,108,.18); border-radius: 50%; width: 800px; height: 800px; pointer-events: none; }
.letter-orbit-one { width: 550px; height: 550px; }
.letter-orbit-two { width: 720px; height: 720px; }
.letter-card { width: min(570px,100%); min-height: 390px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 55px 65px; background: linear-gradient(145deg,#fffdfa,#fbf4ee 70%,#f6e9e1); box-shadow: 0 24px 65px rgba(71,39,47,.11); border: 1px solid rgba(155,117,109,.24); outline: 1px solid rgba(155,117,109,.2); outline-offset: 8px; }
.letter-card.reveal.is-visible { animation: love-letter-arrive 1.2s cubic-bezier(.2,.75,.25,1) both; }
.letter-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(177,133,128,.22); pointer-events: none; }
.letter-heart { position: absolute; color: #bc8187; pointer-events: none; opacity: 0; animation: card-heart-drift 5.8s ease-in-out infinite; }
.letter-heart-one { left: 10%; bottom: 15%; font-size: 24px; animation-delay: .8s; }
.letter-heart-two { right: 11%; top: 18%; font-size: 15px; animation-delay: 1.8s; }
@keyframes love-letter-arrive { 0% { opacity: 0; transform: translateY(52px) rotateX(13deg) scale(.94); filter: blur(5px); } 72% { opacity: 1; transform: translateY(-5px) rotateX(-1deg) scale(1.01); filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes card-heart-drift { 0%,100% { opacity: .2; transform: translateY(5px) rotate(-8deg); } 50% { opacity: .8; transform: translateY(-12px) rotate(8deg); } }
.letter-flower { color: #aa7778; font-size: 23px; margin-bottom: 13px; }
.letter-card .eyebrow { margin: 0; }
.letter-card h2 { margin: 23px 0 18px; font: 400 clamp(42px,6vw,59px)/1 var(--display); color: #39212c; }
.letter-rule { display: flex; align-items: center; width: 64px; color: #bd8785; font-size: 15px; }
.letter-rule::before,.letter-rule::after { content: ""; height: 1px; flex: 1; background: #d7beb6; }
.letter-rule span { padding: 0 6px; }
.letter-body { color: #755b61; font: 400 23px/1.55 var(--display); white-space: pre-line; margin: 22px 0 8px; max-width: 465px; }
.letter-signoff { color: #946d6a; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.letter-stamp { position: absolute; right: 25px; top: 25px; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 45px; height: 45px; border: 1px solid #b88583; color: #985f6d; border-radius: 50%; font: 400 17px var(--display); transform: rotate(12deg); }
.letter-stamp span { font: 9px var(--body); }
.letter-footer { position: absolute; bottom: 31px; margin: 0; color: #8b7476; font-size: 8px; letter-spacing: .21em; }
.letter-footer span { color: #ae737c; margin-left: 6px; }
.site-footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 clamp(22px,5.4vw,84px); background: #1e0f18; color: #b9a5a8; font-size: 8px; letter-spacing: .16em; }
.site-footer span:nth-child(2) { color: #cb9694; font-size: 13px; }
.music-toggle { position: fixed; z-index: 10; right: 24px; bottom: 22px; height: 45px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border-radius: 99px; border: 1px solid rgba(244,219,211,.55); background: rgba(32,14,24,.88); box-shadow: 0 8px 24px rgba(27,10,19,.18); color: #fbf0ea; cursor: pointer; backdrop-filter: blur(12px); }
.music-toggle:hover { background: #482438; }
.music-toggle:focus-visible,.open-surprise:focus-visible,.lightbox button:focus-visible { outline: 2px solid #edc5b5; outline-offset: 4px; }
.music-label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.music-icon { display: flex; align-items: center; gap: 2px; height: 14px; }
.music-icon i { display: block; width: 2px; height: 4px; border-radius: 3px; background: #edc5b5; }
.music-toggle[aria-pressed="true"] .music-icon i { animation: music-wave .75s ease-in-out infinite alternate; }
.music-toggle[aria-pressed="true"] .music-icon i:nth-child(2) { animation-delay: -.4s; }
.music-toggle[aria-pressed="true"] .music-icon i:nth-child(3) { animation-delay: -.15s; }
.music-toggle[aria-pressed="true"] .music-icon i:nth-child(4) { animation-delay: -.55s; }
@keyframes music-wave { to { height: 13px; } }
.cover { position: fixed; z-index: 20; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; place-items: center; color: #fff5eb; background: #1b0d15; opacity: 1; visibility: visible; transition: opacity 1s var(--ease), visibility 1s; }
.cover[open] { display: grid; }
.cover.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.cover-image,.cover-veil,.cover-grain { position: absolute; inset: 0; }
.cover-image { background-position: center 38%; background-size: cover; filter: saturate(.64) brightness(.78); transform: scale(1.04); animation: cover-breathe 22s ease-in-out infinite alternate; }
.cover-veil { background: radial-gradient(ellipse at center,rgba(39,16,29,.42),rgba(20,7,15,.8) 78%),linear-gradient(0deg,rgba(20,8,15,.48),rgba(20,8,15,.22)); }
.cover-grain { opacity: .12; 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='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; }
.cover-content { width: min(650px,90vw); position: relative; z-index: 1; padding: 60px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cover-ornament { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #dfb7a6; font-size: 10px; }
.cover-ornament i { width: 29px; height: 1px; background: rgba(226,188,171,.65); }
.cover-eyebrow { margin: 0; color: #e7c5b5; font-size: 9px; letter-spacing: .24em; }
.cover h1 { margin: 23px 0 10px; font: 400 clamp(58px,10vw,112px)/.96 var(--display); letter-spacing: -.035em; text-shadow: 0 4px 30px rgba(22,9,14,.35); }
.cover-text { margin: 10px 0 30px; color: rgba(255,244,236,.78); font: 400 18px var(--display); letter-spacing: .03em; }
.open-surprise { position: relative; display: flex; align-items: center; gap: 21px; border: 1px solid rgba(236,209,194,.72); background: rgba(26,10,19,.24); padding: 14px 18px 14px 23px; color: #fff5ed; cursor: pointer; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; transition: background .25s ease,border-color .25s ease,transform .25s ease; }
.open-surprise:hover { transform: translateY(-2px); background: rgba(165,104,112,.25); border-color: #f0d8cc; }
.open-surprise b { font-size: 14px; font-weight: 400; }
.cover-date { display: flex; gap: 10px; align-items: center; margin: 33px 0 0; color: rgba(241,216,201,.72); font-size: 8px; letter-spacing: .22em; text-transform: uppercase; }
.cover-date span { color: #d8aaa4; font-size: 12px; }
.cover-corner { position: absolute; z-index: 2; width: 52px; height: 52px; border-color: rgba(236,206,191,.55); border-style: solid; }
.corner-top { top: 23px; left: 23px; border-width: 1px 0 0 1px; }
.corner-bottom { right: 23px; bottom: 23px; border-width: 0 1px 1px 0; }
.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; padding: 40px 90px 52px; border: 0; background: rgba(18,8,14,.97); color: #fff5ec; }
.lightbox::backdrop { background: rgba(18,8,14,.96); }
.lightbox[open] { display: grid; grid-template-columns: 50px minmax(0,1fr) 50px; grid-template-rows: 1fr auto; align-items: center; justify-items: center; }
.lightbox-figure { grid-column: 2; grid-row: 1; height: calc(100dvh - 105px); max-width: min(100%,1200px); margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox-figure img { display: block; max-height: calc(100% - 36px); max-width: 100%; object-fit: contain; box-shadow: 0 15px 55px rgba(0,0,0,.35); }
.lightbox-figure figcaption { min-height: 25px; padding-top: 13px; color: #d5c1c2; font: 400 15px var(--display); }
.lightbox-close,.lightbox-arrow { border: 1px solid rgba(255,245,236,.5); color: #fff5ec; background: rgba(255,255,255,.06); cursor: pointer; }
.lightbox-close { position: absolute; top: 25px; right: 29px; width: 40px; height: 40px; border-radius: 50%; font-size: 25px; line-height: 1; }
.lightbox-arrow { width: 42px; height: 42px; border-radius: 50%; font: 400 27px var(--display); }
.lightbox-prev { grid-column: 1; grid-row: 1; }
.lightbox-next { grid-column: 3; grid-row: 1; }
.lightbox-position { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #bfaeb0; font-size: 9px; letter-spacing: .12em; }
.petal-layer { position: fixed; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.petal { position: absolute; bottom: -40px; color: #f0c4c0; opacity: 0; font-size: 15px; animation: float-up 5.2s ease-out forwards; text-shadow: 0 2px 8px rgba(69,17,43,.4); }
@keyframes float-up { 5% { opacity: .85; } 100% { transform: translate(var(--drift),-110vh) rotate(300deg); opacity: 0; } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes cover-breathe { to { transform: scale(1.11); } }

@media (min-width: 1500px) { .hero { max-height: 960px; } }
@media (max-width: 850px) {
  .topbar { height: 62px; }
  .topbar nav { gap: 18px; }
  .topbar nav a { font-size: 10px; }
  .hero { min-height: 640px; }
  .hero-side-note { display: none; }
  .section-heading,.films-heading { align-items: start; flex-direction: column; gap: 10px; }
  .section-intro { max-width: 380px; margin-top: 0; }
  .memory-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 70px; gap: 9px; }
  .memory-card:nth-child(9n + 1) { grid-column: span 2; }
  .film-track { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
}
@media (max-width: 560px) {
  :root { scroll-padding-top: 58px; }
  .topbar { height: 58px; padding-inline: 17px; }
  .wordmark { font-size: 8px; letter-spacing: .1em; gap: 6px; }
  .wordmark-heart { font-size: 12px; }
  .topbar nav { display: none; }
  .date-chip { padding: 7px 10px; font-size: 8px; }
  .hero { min-height: 590px; height: 90svh; }
  .hero-backdrop { background-position: 54% center; }
  .hero-copy { padding-top: 76px; }
  .hero h1 { font-size: clamp(57px,15vw,83px); margin-top: 22px; }
  .hero-text { width: 85%; font-size: 12px; }
  .hero-index { bottom: 24px; left: 21px; }
  .round-link { margin-top: 35px; }
  .section-wrap,.memories-section,.film-track,.film-footnote { width: calc(100% - 34px); }
  .intro-section { min-height: 360px; padding-block: 85px 72px; }
  .intro-section h2 { font-size: 53px; }
  .intro-section > p:last-child { max-width: 300px; font-size: 12px; }
  .memories-section { padding-bottom: 82px; }
  .section-heading { margin: 0 2px 26px; }
  .section-heading h2,.films-heading h2 { font-size: 47px; }
  .section-intro { font-size: 11px; }
  .memory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 74px; gap: 8px; }
  .memory-card:nth-child(9n + 1) { grid-column: span 2; grid-row: span 5; }
  .memory-card:nth-child(9n + 4),.memory-card:nth-child(9n + 7) { grid-row: span 4; }
  .memory-card:nth-child(13n + 2) { grid-row: span 3; }
  .gallery-count { font-size: 8px; }
  .films-section { padding-block: 75px; }
  .films-heading { margin-bottom: 28px; }
  .film-track { gap: 9px; }
  .film-frame { aspect-ratio: 3/4; }
  .film-play { width: 43px; height: 43px; }
  .film-caption { padding: 11px 9px 13px; font-size: 18px; }
  .film-footnote { line-height: 1.7; font-size: 8px; }
  .letter-section { min-height: 580px; padding: 75px 24px 80px; }
  .letter-card { min-height: 365px; padding: 52px 27px; outline-offset: 5px; }
  .letter-card h2 { font-size: 45px; }
  .letter-body { font-size: 24px; }
  .letter-stamp { right: 13px; top: 13px; width: 37px; height: 37px; font-size: 14px; }
  .letter-footer { font-size: 7px; white-space: nowrap; }
  .site-footer { min-height: 58px; padding-inline: 18px; font-size: 7px; }
  .music-toggle { width: 43px; height: 43px; right: 14px; bottom: 13px; padding: 0; }
  .music-label { display: none; }
  .lightbox { padding: 62px 12px 50px; }
  .lightbox[open] { grid-template-columns: 38px minmax(0,1fr) 38px; }
  .lightbox-figure { width: 100%; height: calc(100dvh - 130px); }
  .lightbox-arrow { width: 34px; height: 34px; font-size: 22px; }
  .lightbox-close { top: 13px; right: 13px; width: 35px; height: 35px; }
  .cover-content { padding-inline: 8px; }
  .cover h1 { font-size: clamp(58px,17vw,83px); }
  .cover-text { font-size: 16px; }
  .cover-corner { width: 34px; height: 34px; }
  .corner-top { top: 14px; left: 14px; }
  .corner-bottom { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .letter-card.reveal.is-visible { animation: none; }
}