:root {
  color-scheme: light;
  --paper: #f7f5f0;
  --scene-background: var(--paper);
  --ink: #363832;
  --muted: #77796e;
  --line: #c3c5b6;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { margin: 0; background: var(--scene-background); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid #676d53; outline-offset: 6px; }
.reading-progress { position: fixed; z-index: 5; inset: 0 0 auto; height: 2px; background: #90967f; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.opening-copy, .scroll-invitation, .farewell-inner, .upload-section, .ending { opacity: var(--scene-text-opacity, 1); }
.memories { padding: 76px 28px 0; }
.mosaic { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: clamp(85px, 10vw, 145px); gap: 12px; }
.mosaic-second { grid-auto-flow: row; }
.memory { display: block; margin: 0; position: relative; overflow: hidden; background: #e7e6df; grid-column: span var(--cols, 4); grid-row: span var(--rows, 2); }
.memory a { display: block; width: 100%; height: 100%; overflow: hidden; }
.memory img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--position, 50% 45%); transform: scale(1.055) translateY(var(--drift, 0px)); transition: filter .6s ease, scale .8s ease; }
@media (hover: hover) { .memory:hover img { scale: 1.035; filter: saturate(1.06); } }
.js .reveal { opacity: 0; translate: 0 38px; transition: opacity 1.25s ease, translate 1.4s cubic-bezier(.2,.65,.3,1); }
.js .memory { opacity: 0; translate: 0 72px; scale: .93; rotate: var(--arrival-tilt, -.7deg); transition: opacity 1s ease, translate 1.35s cubic-bezier(.16,1,.3,1), scale 1.35s cubic-bezier(.16,1,.3,1), rotate 1.35s cubic-bezier(.16,1,.3,1); transition-delay: var(--arrival-delay, 0ms); }
.js .is-visible { opacity: 1; translate: 0 0; }
.js .memory.is-visible, .js .memory:focus-within { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
.farewell { padding: 150px 24px 145px; text-align: center; }
.farewell-inner { max-width: 660px; margin: 0 auto; }
.quiet-line { display: block; width: 1px; height: 65px; background: var(--line); margin: 0 auto 46px; }
h2 { margin: 0 0 43px; font: 400 clamp(29px, 3.2vw, 40px)/1.3 var(--serif); letter-spacing: -.025em; }
.invitation-copy { max-width: 580px; margin: 0 auto; font-size: 16px; line-height: 1.95; font-weight: 350; }
.invitation-copy p { margin: 0 0 28px; }
.invitation-copy strong { font-weight: 550; }
.invitation-copy .meeting { margin-bottom: 38px; line-height: 1.65; }
.meeting-intro, .meeting-date, .meeting-place { display: block; }
.meeting-intro { margin-bottom: 8px; }
.meeting-date { font-size: 20px; }
.meeting-place { margin-top: 14px; }
.invitation-copy .together { margin: 44px 0 48px; font: 400 clamp(21px, 2.2vw, 25px)/1.5 var(--serif); }
.together span, .together em { display: block; }
.together em { margin-top: 5px; }
.signature { font: 400 23px/1.5 var(--serif); }
.invitation-copy .signature p { margin: 0; }
.invitation-copy .signature-greeting { margin-bottom: 16px; font-size: 19px; font-style: italic; color: var(--muted); }
.signature-names { display: grid; gap: 6px; }
.contribution { max-width: 470px; margin: 52px auto 0; border-top: 1px solid var(--line); padding-top: 29px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.contribution p { margin: 0; }
.contribution .bank-details { margin-top: 17px; }
.iban { white-space: nowrap; letter-spacing: .055em; }
.memories-after { padding-top: 0; }
.ending { padding: 85px 24px 44px; text-align: center; }
.ending .quiet-line { height: 50px; margin-bottom: 32px; }
.ending p { margin: 0; font: 400 clamp(36px, 4.5vw, 54px)/1.25 var(--serif); letter-spacing: -.03em; }
.back-to-top { display: inline-flex; align-items: center; gap: 12px; margin-top: 85px; font-size: 10px; text-decoration: none; letter-spacing: .08em; color: var(--muted); padding: 12px; }
.photo-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 64px 72px; border: 0; background: #1e211df5; overflow: hidden; }
.photo-viewer[open] { display: flex; justify-content: center; align-items: center; }
.photo-viewer::backdrop { background: #1e211d; }
.viewer-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-viewer button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #ffffff12; color: #fff; cursor: pointer; font-weight: 200; }
.viewer-close { right: 20px; top: 15px; font-size: 32px !important; }
.viewer-prev, .viewer-next { top: calc(50% - 24px); font-size: 36px !important; }
.viewer-prev { left: 12px; }.viewer-next { right: 12px; }
@media (max-width: 700px) {
  .memories { padding: 45px 10px 0; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(90px, 27vw, 180px); gap: 7px; }
  .memory { grid-column: span 1; grid-row: span 2; }
  .memory:nth-child(7n + 3) { grid-column: span 2; grid-row: span 3; }
  .memory:nth-child(7n + 5) { grid-row: span 3; }
  .memory:nth-child(7n + 6) { grid-row: span 3; }
  .farewell { padding: 95px 27px 90px; }
  .quiet-line { height: 48px; margin-bottom: 34px; }
  h2 { font-size: 31px; margin-bottom: 33px; }
  h2 br { display: none; }
  .invitation-copy { font-size: 15px; line-height: 1.85; }
  .meeting-date { font-size: 19px; }
  .invitation-copy p { margin-bottom: 25px; }
  .invitation-copy .together { font-size: 22px; margin: 38px 0 42px; }
  .signature { font-size: 23px; }
  .contribution { margin-top: 38px; font-size: 11px; line-height: 1.9; }
  .memories-after { padding-top: 0; }
  .ending { padding-top: 64px; }
  .back-to-top { margin-top: 60px; }
  .photo-viewer { padding: 70px 12px 100px; }
  .viewer-prev, .viewer-next { top: auto; bottom: 20px; }
  .viewer-prev { left: 24px; }.viewer-next { right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .memory { opacity: 1; translate: none; scale: 1; rotate: none; }
  .memory img { transform: none; }
}