/* Real photographs and interactions, within the original paper-and-amber palette. */
[hidden]{display:none!important}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #b86525;outline-offset:5px}
.inside-scene h2[tabindex="-1"]:focus{outline:none}
button:disabled{cursor:default;opacity:.48}
.topbar .sound{min-height:44px;max-width:220px;display:flex;gap:8px;align-items:center;text-align:left}
.sound.is-playing{color:#a45c25}
.sound.is-playing:before{content:"";width:5px;height:5px;background:#b27f26;border-radius:50%;box-shadow:0 0 0 4px #c9ac5520}
.sound span{line-height:1.5}
.tabs button{min-height:44px}
.cover-copy>.written{font-size:16px;line-height:1.9}
.cover-copy>.written i{font-size:15px}
.empty-photo.has-photo{padding:0;overflow:visible;height:310px;background:#f4eedf}
.empty-photo img{display:block;width:100%;height:100%;object-fit:contain}
.empty-photo:disabled{opacity:1}
.right-page{padding-bottom:65px}
.photo-caption{margin-top:18px;font-size:16px}
.mini-controls{display:flex;align-items:center;justify-content:center;gap:16px;font:10px monospace;color:#95805c}
.mini-controls button{width:44px;height:38px;background:none;color:#92703f;font-size:17px}
#memory-photo-controls{margin-top:13px}
.book-controls>button:not(.continue){width:44px;height:44px}
#answer{font-size:15px}
.weekend-note{display:flex;flex-direction:column;gap:22px;align-items:center;color:#9f825a;font:17px/1.8 var(--serif)}
.weekend-note>span{padding:3px 22px;background:#e5dcad88;transform:rotate(-5deg)}
.weekend-note>span:last-child{transform:rotate(4deg)}
.weekend-note i{font-size:21px;color:#6a654b}

.object-desk{max-width:1050px;margin:45px auto 0;gap:30px;padding-bottom:0;perspective:1400px}
.flip-card{min-width:0;height:410px;perspective:1200px;transform:rotate(-3deg)}
.flip-card:nth-child(2){transform:rotate(2deg);margin-top:18px}
.flip-card:nth-child(3){transform:rotate(5deg);margin-top:2px}
.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}
.card-front,.card-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:3px 9px 18px #4c371721}
.keepsake.card-front{transform:none;padding:28px;display:flex;flex-direction:column;justify-content:flex-start}
.keepsake.card-front:hover{transform:none}
.keepsake.card-front:hover .flip-hint{color:#9e511a}
.keepsake.card-front .mini-label{font-size:9px;line-height:1.8}
.card-front .keyboard{margin-top:48px;height:166px;flex-shrink:0}
.card-front strong{margin-top:26px;font-size:19px}
.card-front .ring-art{margin:61px auto 32px;width:116px;height:116px;flex-shrink:0}
.card-front.ticket-object>b{font-size:45px;line-height:1.5;margin-top:48px;font-weight:400}
.card-front .ticket-rule{margin-top:26px;width:100%}
.card-front.ticket-object strong{margin-top:23px}
.flip-hint{font:11px var(--serif);color:#997e55;margin-top:auto;align-self:flex-end;padding-top:15px}
.card-back{transform:rotateY(180deg);padding:16px 18px;background:var(--paper);display:flex;flex-direction:column}
.card-back-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:35px}
.card-back-top .mini-label{font-size:9px;color:#9a815a}
.flip-back{background:none;color:#9f6d36;font:12px var(--serif);min-height:38px;padding:4px 0 4px 10px}
.card-photo{display:block;width:100%;height:234px;background:#f0ebdd;flex-shrink:0;padding:0;margin-top:5px}
.card-photo img{width:100%;height:100%;object-fit:contain}
.card-back .mini-controls{gap:20px}
.card-back .mini-controls button{height:34px}
.card-note{font:13px/1.8 var(--serif);color:#8e7659;margin:3px 0 0;text-align:left}
.portrait-note{font:15px/1.8 var(--serif);text-align:center;color:#9b8363;margin:55px 0 0}
.portrait .next-page{margin-top:23px}

.archive .chapter-heading h2{font-size:32px}
.archive-tabs{display:flex;justify-content:center;gap:32px;margin:28px 0 0}
.archive-tabs button{background:none;color:#8d826a;font:13px var(--serif);border-bottom:1px solid transparent;padding:10px 5px;min-height:44px}
.archive-tabs button[aria-pressed="true"]{color:#a6622d;border-color:#ba8b4b}
.photo-spread{max-width:1050px;min-height:500px;margin:30px auto 35px;display:grid;grid-template-columns:1.12fr 1fr .9fr;grid-template-rows:220px 220px;gap:24px 30px;padding:15px 12px;align-items:stretch}
.archive-print{position:relative;min-width:0;display:flex;flex-direction:column;padding:12px 12px 36px;background:#fffdf3;box-shadow:3px 8px 17px #50422725;transition:transform .3s}
.archive-print img{width:100%;height:100%;min-height:0;object-fit:contain;background:#efeadd}
.archive-print .tape{top:-9px;left:calc(50% - 38px);width:76px;height:23px;transform:rotate(-8deg);opacity:.8}
.print-caption{position:absolute;bottom:12px;left:16px;right:30px;text-align:left;font:12px/1.4 var(--serif);color:#8c7959}
.print-number{position:absolute;right:12px;bottom:10px;font:italic 12px Georgia;color:#b89d72}
.print-0{grid-column:1;grid-row:1 / 3;transform:rotate(-3deg);margin:10px 0 20px}
.print-1{grid-column:2;grid-row:1;transform:rotate(3deg)}
.print-2{grid-column:2;grid-row:2;transform:rotate(-2deg)}
.print-3{grid-column:3;grid-row:1 / 3;transform:rotate(4deg);margin:38px 0 0}
.archive-print:hover{transform:rotate(0) translateY(-4px);z-index:2}
.three-prints{grid-template-columns:1fr 1fr 1fr;grid-template-rows:420px;min-height:460px;align-items:center}
.three-prints .archive-print{grid-column:auto;grid-row:auto;margin:0;height:360px}
.three-prints .print-1{height:420px}
.archive-bottom{max-width:1060px;margin:0 auto;gap:20px;align-items:center;line-height:1.8}
.archive-bottom button{min-height:44px;white-space:nowrap}

.envelope-wrap{max-width:800px}
.personal-letter{padding:55px 70px 40px}
.letter-meta{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8ceaf;padding-bottom:20px;color:#9a815a}
.letter-meta>span:last-child{font:12px var(--serif)}
.personal-letter h2{margin:35px 0 27px;font-size:25px}
.personal-letter p{font:17px/2.1 var(--serif);margin-bottom:17px;color:#5b5340;overflow-wrap:anywhere}
.personal-letter p.letter-accent{color:#a66028;margin:24px 0;font-size:19px}
.personal-letter .text-button{margin-top:30px;min-height:44px;font-size:12px}
.future-sheet{max-width:890px;padding:25px 45px 32px;margin-top:38px}
.wish{padding:22px 0;gap:23px}
.wish span{line-height:1.8}
.wish-form{margin-top:15px;padding-top:16px}
.wish-form-footer{justify-content:flex-end}
.wish-form-footer button{min-height:44px}
.remove-wish{min-width:44px;min-height:44px}
.future-sheet>.written{font-size:15px;margin-top:12px}
.finale{position:relative}
.cake-button{width:300px;height:258px;margin:22px auto 0}
.cake-button .birthday-cake{position:absolute;left:0;top:73px;width:300px;height:175px;filter:drop-shadow(0 5px 4px #75634213)}
.cake-button .candle-body{z-index:2;width:15px;height:65px;left:calc(50% - 7.5px);top:44px;bottom:auto;border-radius:2px 2px 0 0}
.cake-button .flame{z-index:3;left:calc(50% - 6px);top:18px;width:13px;height:25px}
.cake-button small{bottom:-5px;font:12px var(--serif)}
.finale h2{margin-top:32px;font-size:42px}
.song-dedication{display:block;font:12px/1.8 var(--serif);color:#9c835e;margin-top:22px}
.finale .intro-sign{margin-top:20px}
.finale .text-button{margin-top:12px;min-height:44px}
.reread{padding:10px 6px;font-size:12px;min-height:44px;margin-top:4px}
#confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.modal-open{overflow:hidden}
#photo-modal{width:min(1000px,94vw);max-width:94vw;max-height:94svh;margin:auto;padding:42px 24px 10px;overflow:auto}
#close-modal{top:0;right:2px;width:44px;height:44px;z-index:1}
.modal-photo{background:transparent;width:100%;height:min(68svh,760px)}
.modal-photo img{display:block;width:100%;height:100%;object-fit:contain}
#modal-caption{font:15px/1.7 var(--serif);margin:14px 0 0}
.modal-controls{display:flex;align-items:center;justify-content:center;gap:35px;font:11px monospace;color:#95805c}
.modal-controls button{width:44px;height:44px;background:none;color:#997340;font-size:20px}

@media(max-width:1000px) and (min-width:761px){
  .object-desk{gap:18px}.keepsake.card-front{padding:20px}.card-front.ticket-object>b{font-size:38px}
  .card-back{padding:12px}.card-note{font-size:12px}.card-front .ring-art{width:90px;height:90px}
  .chapter-heading>span{max-width:155px;line-height:1.7}
  .photo-spread{gap:20px;grid-template-rows:200px 200px}
  .three-prints{grid-template-rows:380px}.three-prints .archive-print{height:300px}.three-prints .print-1{height:370px}
  .left-page{padding:25px 30px 42px}.right-page{padding:40px 25px 65px}
}
@media(max-width:760px){
  .topbar .sound{max-width:160px;font-size:19px;gap:6px}.topbar .sound span{font-size:10px}
  .cover-copy>.written{font-size:13px;margin-top:15px}.cover-copy>.written i{font-size:12px}
  .tabs button{font-size:11px;padding:5px 11px}
  .empty-photo.has-photo{height:280px}.right-page{padding:28px 26px 48px}
  #answer{font-size:15px;line-height:2}.memory-sticker{font-size:13px;bottom:15px}
  .object-desk{display:grid;grid-template-columns:1fr;gap:35px;margin:30px auto 0;width:min(340px,94%)}
  .flip-card{height:415px;transform:rotate(-2deg)}
  .flip-card:nth-child(2){margin-top:0;transform:rotate(2deg)}
  .flip-card:nth-child(3){margin-top:0;transform:rotate(-2deg)}
  .keepsake.card-front{padding:28px;height:100%}
  .card-front .keyboard{height:166px}.card-front strong{font-size:20px}
  .card-front.ticket-object>b{font-size:46px}.card-front .mini-label{font-size:9px!important}
  .card-back{padding:16px 20px}.card-photo{height:235px}.card-note{font-size:14px}
  .card-back .mini-controls button{height:38px}
  .portrait-note{margin-top:36px;font-size:13px}
  .archive .chapter-heading h2{font-size:26px;line-height:1.6;max-width:340px}
  .archive-tabs{gap:10px;justify-content:space-between;margin-top:16px}
  .archive-tabs button{font-size:12px;padding:8px 2px}
  .photo-spread,.three-prints{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:26px 17px;margin:17px auto 24px;padding:14px 5px;min-height:0}
  .archive-print,.three-prints .archive-print{grid-column:auto;grid-row:auto;height:240px;margin:0;padding:8px 8px 42px}
  .photo-spread .print-0{grid-column:1 / 3;height:340px;width:86%;justify-self:center;transform:rotate(-2deg)}
  .photo-spread .print-3{grid-column:1 / 3;width:75%;height:310px;justify-self:center;transform:rotate(3deg)}
  .print-caption{font-size:11px;left:10px;right:21px;bottom:10px}.print-number{font-size:10px;right:8px;bottom:9px}
  .three-prints .print-0{height:270px;width:94%}.three-prints .print-1{height:275px}
  .archive-bottom{align-items:flex-start;font-size:12px;gap:10px}
  .personal-letter{padding:28px 23px}
  .personal-letter p{font-size:16px;line-height:2.05;margin-bottom:18px}
  .personal-letter h2{font-size:23px;margin-top:25px}
  .letter-meta{gap:10px}.letter-meta .eyebrow{font-size:8px}.letter-meta>span:last-child{font-size:10px}
  .personal-letter p.letter-accent{font-size:18px}
  .future-sheet{padding:22px 20px 26px;transform:rotate(-.5deg)}
  .wish{gap:12px;padding:20px 0}.wish span{font-size:16px}.wish b{font-size:24px}.wish i{font-size:17px}
  .wish-form label{font-size:16px}.wish-form label small{margin-left:6px}
  .finale h2{font-size:28px;letter-spacing:.03em;margin-top:30px}
  .finale>p{font-size:16px;line-height:2.05;max-width:350px;margin:auto}
  .finale>p br{display:block;content:"";margin-bottom:10px}
  .cake-button{margin-top:10px;transform:scale(.92);margin-bottom:-12px}
  .song-dedication{font-size:11px;max-width:290px;margin:18px auto 0}
  #photo-modal{padding:44px 12px 8px}.modal-photo{height:65svh}#modal-caption{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .flip-inner{transition:none}
}
/* New archive chapters: unique childhood, journeys and personal highlights. */
.album-pager{display:flex;align-items:center;justify-content:center;gap:18px;margin:20px auto 28px;padding:10px 14px;max-width:620px;background:#fffbee;border:1px solid #c4b18b66;box-shadow:0 5px 20px #7563420a}
.album-pager button,.album-pager select{min-height:44px;background:transparent;color:#8d6a3e;font:14px var(--serif);border:0}
.album-pager select{min-width:0;max-width:240px;flex:1;text-align:center;cursor:pointer}
.album-pager button{white-space:nowrap;padding:0 8px}
.album-pager button:disabled{opacity:.35;cursor:default}
.archive-tabs{scroll-margin-top:24px}
.personal-letter .letter-signature{text-align:right;margin-top:36px;color:#927547}
@media(max-width:760px){.album-pager{gap:4px;padding:6px 4px}.album-pager button,.album-pager select{font-size:12px}.album-pager button{padding:0 3px}}
.archive-tabs{flex-wrap:wrap;gap:10px 27px}
.archive-print{padding-bottom:52px}
.print-caption{bottom:13px;line-height:1.65}
.archive-bottom{align-items:flex-end}
#archive-note{max-width:750px;font:14px/2 var(--serif);color:#8d7759}
.single-print{display:flex;justify-content:center;min-height:0;margin-top:28px}
.single-print .archive-print{width:min(640px,90%);height:420px;margin:0;transform:rotate(-2deg)}
.two-prints{grid-template-columns:1fr 1fr;grid-template-rows:450px;max-width:800px;min-height:0;gap:45px}
.two-prints .archive-print{grid-column:auto;grid-row:auto;height:440px;margin:0}
.two-prints .print-1{margin-top:14px}
.many-prints{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:360px;min-height:0;gap:35px}
.many-prints .archive-print{grid-column:auto;grid-row:auto;height:100%;margin:0}
.many-prints .print-4{transform:rotate(-3deg)}
.many-prints .print-5{transform:rotate(2deg)}
@media(max-width:760px){
  .archive-tabs{gap:2px 10px;justify-content:flex-start}
  .archive-tabs button{font-size:12px;padding:8px 6px}
  .archive-print,.three-prints .archive-print{padding-bottom:58px}
  .print-caption{bottom:10px;font-size:11px;line-height:1.65}
  .single-print{display:flex;padding:16px 5px;margin:20px auto 25px}
  .single-print .archive-print{width:96%;height:285px}
  .two-prints{grid-template-columns:1fr;grid-template-rows:none;gap:30px}
  .two-prints .archive-print{grid-column:auto;grid-row:auto;width:86%;height:390px;justify-self:center;margin:0}
  .many-prints{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:265px;gap:25px 17px}
  .many-prints .archive-print{grid-column:auto;grid-row:auto;height:100%;width:100%;margin:0}
  .many-prints .print-0,.many-prints .print-3{grid-column:auto;grid-row:auto;width:100%;height:100%}
  #archive-note{font-size:13px;line-height:1.95}
}
