/* Photographic keepsake — image motion stays inside the stationary paper frame. */
.photo-section { padding: 8px 44px 65px; text-align: center; }
.photo-section > h2 { font: 42px/1.3 var(--script); font-weight: 400; margin: 0 0 28px; text-wrap: balance; }
.keepsake { margin: 0; position: relative; isolation: isolate; padding: 13px 13px 21px; background: var(--paper); color: var(--paper-ink); box-shadow: 0 16px 32px #0003; }
.keepsake:before { content: ''; position: absolute; inset: 3px -5px -6px 4px; background: var(--paper); transform: rotate(-3deg); z-index: -1; box-shadow: 0 5px 12px #0002; }
.keepsake:after { content: ''; position: absolute; width: 70px; height: 23px; left: calc(50% - 35px); top: -10px; background: #e1cfa36b; border: 1px solid #fff2; transform: rotate(-6deg); box-shadow: 0 1px 3px #0001; }
.photo-window { overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--base) 65%, #111); }
.celebration-photo { display: block; width: 100%; height: 100%; object-fit: cover; animation: photo-breathe 18s ease-in-out infinite alternate; transform-origin: 50% 42%; }
.keepsake figcaption { font: 29px/1.4 var(--script); margin: 16px 5px 0; text-wrap: balance; }
.photo-credit { font: 9px/1.5 var(--sans); color: var(--accent); margin: 18px 0 0; }
@keyframes photo-breathe { from { transform: scale(1); } to { transform: scale(1.075) translateY(-.8%); } }
/* Brushed-metal housing and recessed rolling wheels, inspired by the reference. */
.countdown-section { padding: 0 35px 85px; text-align: center; }
.countdown-section > h2 { font: 40px/1.3 var(--script); margin: 0 0 23px; font-weight: 400; }
.mechanical-clock {
  --metal-light: #eff2ef; --metal-mid: #a3aaa8; --metal-dark: #727977;
  position: relative; container-type: inline-size; padding: 26px 20px 20px; border: 3px solid #c9cecb; border-radius: 14px;
  background: repeating-linear-gradient(0deg, #ffffff13 0px, #ffffff13 1px, #575f5e0c 1px, #575f5e0c 3px), linear-gradient(115deg, var(--metal-light), #d4dad7 30%, #f2f4ef 53%, var(--metal-mid));
  box-shadow: inset 0 0 0 1px #747e7a, inset 0 2px 3px #fff, 0 14px 24px #0004, 0 2px 0 #fff7;
  color: #27302e;
}
.clock-screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #5e6663; background: linear-gradient(135deg, #fcfff9, #7d8482); box-shadow: 0 1px 1px #fff; top: 10px; }
.clock-screw:after { content: ''; position: absolute; width: 5px; height: 1px; background: #333a38; top: 3px; left: .5px; transform: rotate(25deg); }
.clock-screw.left { left: 10px; } .clock-screw.right { right: 10px; }
.clock-units { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 10px; align-items: start; }
.clock-unit { min-width: 0; }
.number-well { display: flex; background: #080a09; border: 2px solid #565d59; border-radius: 5px; padding: 2px; box-shadow: 0 0 0 2px #f4f8f0bd, inset 0 3px 8px #000; overflow: hidden; }
.number-reel { --digit-height: clamp(45px, 17cqi, 79px); display: block; position: relative; flex: 1 1 0; min-width: 0; height: var(--digit-height); overflow: hidden; border-right: 1px solid #444945; background: linear-gradient(#111412, #313531 21%, #080a08 51%, #111411 76%, #050705); box-shadow: inset 2px 0 5px #000, inset -2px 0 4px #000; }
.number-reel:last-child { border-right: 0; }
.number-reel:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, transparent 14%, #fff1 15%, #fff0 32%), linear-gradient(#0008 0, transparent 20%, transparent 75%, #0007 100%); }
.number-track { display: block; }
.number-face { display: flex; align-items: center; justify-content: center; height: var(--digit-height); color: #eef0e9; font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(27px, 11cqi, 54px); font-weight: 750; font-stretch: condensed; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 1px #000; }
.clock-label { display: block; font: 9px/1.5 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; margin-top: 12px; color: #39413d; text-shadow: 0 1px #fff; }
.countdown-status { display: flex; align-items: center; justify-content: center; gap: 12px; font: 10px/1.5 var(--sans); text-transform: uppercase; letter-spacing: 2px; margin: 20px 0 0; color: #525a55; text-shadow: 0 1px #fff; }
.countdown-status:before, .countdown-status:after { content: ''; flex: 1; height: 1px; background: #8d96908a; box-shadow: 0 1px #ffffffb8; }
.countdown-date { font: 10px/1.8 var(--sans); margin: 20px auto 0; color: var(--accent); }
@media (max-width: 450px) {
  .photo-section { padding: 0 28px 55px; }
  .photo-section > h2 { font-size: 34px; }
  .keepsake { padding: 10px 10px 17px; }
  .keepsake figcaption { font-size: 25px; }
  .countdown-section { padding: 0 22px 65px; }
  .countdown-section > h2 { font-size: 34px; }
  .mechanical-clock { padding: 24px 12px 17px; border-radius: 11px; border-width: 2px; }
  .clock-units { gap: 7px; }
  .clock-label { font-size: 8px; letter-spacing: .6px; }
  .countdown-status { font-size: 8px; letter-spacing: 1.3px; gap: 7px; margin-top: 17px; }
}
@media (prefers-reduced-motion: reduce) { .celebration-photo { animation: none; } }