:root{color-scheme:dark;--ink:#152330;--surface:#1b2c3b;--cream:#faf5eb;--gold:#eac990;--muted:#c0c6c8;--line:#3c4953;--serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:6px}form,p,h1,h2,h3{margin:0}
.page{width:min(1180px,calc(100% - 96px));margin:0 auto}
.masthead{min-height:99px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}
.birthday-date{font-size:1rem;letter-spacing:.06em;color:var(--muted)}
.replay-form{flex:none;margin-left:auto}.replay-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 13px;border:1px solid #eac99066;border-radius:3px;background:#eac99008;color:var(--gold);font-size:.8rem;white-space:nowrap;transition:background .2s,border-color .2s}.replay-button:hover{background:#eac99018;border-color:var(--gold)}.replay-button svg{flex:none}
@media(max-width:680px){.masthead:has(.replay-form){gap:12px}.replay-button{font-size:.75rem;padding-inline:10px}.masthead:has(.replay-form) .birthday-date{letter-spacing:.02em}}
.greeting{padding:66px 0 62px;text-align:center}.letter{max-width:1000px;margin:0 auto}.greeting h1{margin-top:0;text-wrap:balance}
.eyebrow{font-size:.75rem;letter-spacing:.19em;font-weight:600;color:var(--gold)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,4.5vw,4.15rem);line-height:1.13;letter-spacing:-.035em;margin:20px 0 23px}
em{font-weight:400;color:var(--gold)}
.birthday-text{font-size:1.05rem;line-height:1.8;color:var(--muted);max-width:610px;margin:0 auto}
.birthday-text p+p{margin-top:1.15em}
.signature{font:italic 1.6rem/1.4 var(--serif);color:var(--gold);margin-top:23px}
.memories{padding-bottom:48px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.memory{min-width:0}.memory-link{text-decoration:none;display:flex;flex-direction:column;position:relative}
.cover{aspect-ratio:1.72;overflow:hidden;position:relative;background:var(--surface);border-radius:3px}
.cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.cover-photo img{object-position:50% 61%}.cover-rocamadour img{object-position:66% center}
.memory-link:hover img{transform:scale(1.035)}
.play-badge{position:absolute;left:16px;bottom:16px;background:var(--ink);color:var(--gold);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:.9rem;padding-left:3px}
.cover-video{background:#cda875;color:#192632;display:flex;flex-direction:column;justify-content:space-between;padding:18px 22px}.video-topline{font-size:.65rem;letter-spacing:.19em;border-bottom:1px solid #19263266;padding-bottom:9px;font-weight:650}.video-title{font-family:var(--serif);font-size:clamp(2.7rem,4.4vw,4.5rem);line-height:1.1;letter-spacing:-.06em}.video-title i{font-size:1.3em;line-height:.8}.video-bottomline{display:flex;justify-content:space-between;gap:10px;letter-spacing:.12em;font-size:.65rem;font-weight:650;border-top:1px solid #19263266;padding-top:9px}
.card-body{padding-top:22px;flex:1;display:flex;flex-direction:column}
.memory-title{font:400 clamp(1.6rem,2.15vw,1.9rem)/1.18 var(--serif);letter-spacing:-.015em;margin-top:0;min-height:2.36em}
.card-action{font-size:.9rem;color:var(--gold);display:flex;align-items:center;gap:12px;margin-top:18px;width:fit-content;border-bottom:1px solid transparent;padding-bottom:4px}.card-action>span[aria-hidden]{font-size:1.25rem;transition:transform .2s}.memory-link:hover .card-action{border-color:var(--gold)}.memory-link:hover .card-action>span[aria-hidden]{transform:translate(2px,-2px)}
.family-password{font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:14px}.family-password code{font-size:.9rem;letter-spacing:.04em;color:var(--cream);background:#ffffff0a;padding:3px 7px;border-radius:3px;margin-left:5px;user-select:all}
.skip{position:absolute;left:16px;top:-100px;padding:12px 20px;background:var(--gold);color:var(--ink);z-index:10}.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.login-page{min-height:100svh;display:grid;place-items:center;padding:40px 24px}.invitation{width:min(100%,430px);text-align:center}.login-number{color:var(--gold);font:normal 9rem/.95 var(--serif);letter-spacing:-.09em;padding-right:.09em;margin:24px 0}.invitation h1{font-size:2.7rem;margin:25px 0 16px}.login-intro{font-size:.95rem;color:var(--muted)}.login-form{text-align:left;border-top:1px solid var(--line);margin-top:32px;padding-top:28px}.login-form label{display:block;font-size:.875rem;margin-bottom:9px;color:var(--cream)}.login-form input[type=password]{display:block;width:100%;background:#ffffff06;border:1px solid #73808b;border-radius:3px;min-height:53px;padding:13px 15px;color:var(--cream)}.login-form input::placeholder{color:#a8b0b6}.login-error{color:#ffd1c8;font-size:.875rem;margin:10px 0;min-height:1.4em}.open-button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--gold);border-radius:3px;background:var(--gold);color:var(--ink);font-weight:600;font-size:.95rem;padding:14px 18px;min-height:52px}.open-button:hover{background:#f5dcae}.login-signature{font:italic 1.1rem var(--serif);color:var(--muted);margin-top:32px}
@media(max-width:900px){.page{width:calc(100% - 48px)}.greeting{padding:48px 0}.cards{gap:20px}.cover-video{padding:12px 15px}.video-topline{font-size:.6rem}.video-bottomline{font-size:.6rem}.video-title{font-size:2.7rem}}
@media(max-width:680px){.page{width:calc(100% - 40px)}.masthead{min-height:78px}.birthday-date{font-size:.875rem}.greeting{padding:42px 0}.greeting h1{font-size:clamp(2.4rem,8.8vw,3.5rem)}.birthday-text{font-size:1rem;max-width:450px}.cards{grid-template-columns:1fr;gap:40px}.cover{aspect-ratio:1.75}.card-body{padding-top:18px}.memory-title{font-size:1.95rem;min-height:0}.cover-video{padding:22px 26px}.video-title{font-size:4.5rem}.video-topline,.video-bottomline{font-size:.75rem}.family-password{margin-top:12px}.invitation h1{font-size:2.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}