:root{--album-ink:#263026;--album-paper:#fff;--layer-sticky:10;--layer-dropdown:20;--layer-modal:40;}
html{scroll-behavior:smooth;scrollbar-gutter:stable;}body{margin:0;background:#fff;color:var(--album-ink);}button,a,input{-webkit-tap-highlight-color:transparent;}button{cursor:pointer;}button:disabled{opacity:.5;cursor:default;}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid currentColor;outline-offset:4px;}button svg,a svg{flex:none;}.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-200%);z-index:50;background:white;padding:12px;}.skip-link:focus{transform:none;}
.hero{--reveal:0;position:relative;height:165svh;background:#253326;color:#fff;}.hero-scene{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;}.hero-image{position:absolute;inset:0;z-index:-2;}.hero-image picture,.hero-image img{display:block;width:100%;height:100%;}.hero-image img{object-fit:cover;object-position:50% 35%;}.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(12,22,15,.84),rgba(12,22,15,.32) 65%,rgba(12,22,15,.12));opacity:var(--reveal);}.hero h1{position:absolute;left:5vw;bottom:15svh;transform:translateY(calc(var(--reveal) * -1 * var(--copy-rise,290px)));font-family:'Fine Style',serif;font-size:clamp(3.5rem,6.5vw,6rem);font-weight:400;line-height:1.1;letter-spacing:-.025em;text-wrap:balance;margin:0;text-shadow:0 2px 12px #102416aa;}.hero-copy{position:absolute;left:5vw;bottom:8svh;width:min(460px,43vw);opacity:var(--reveal);transform:translateY(calc((1 - var(--reveal)) * 28px));}.hero-copy p{font-size:1rem;line-height:1.8;margin:0;text-wrap:pretty;}.hero-copy .signature{font-family:'MonthGlade',cursive;font-size:1.6rem;line-height:1.5;margin:20px 0;}.signature-date{display:block;font-family:'Libre Baskerville',serif;font-size:.75rem;line-height:1.6;margin-top:4px;}.gallery-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;background:white;color:#243024;padding:12px 20px;border-radius:999px;font-size:.875rem;text-decoration:none;}.gallery-cta:hover{background:#e9efe8;}.group-link{position:fixed;right:24px;top:20px;z-index:var(--layer-sticky);display:flex;gap:8px;align-items:center;background:#fff;color:#263026;border:0;border-radius:999px;padding:10px 16px;min-height:44px;font:inherit;font-size:.8rem;box-shadow:0 2px 8px #0002;}.group-link,.music-player{animation:group-appear .7s ease-out;}.group-link[hidden]{display:none;}.group-link:hover{background:#edf1eb;}.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;font-size:.7rem;opacity:calc(1 - var(--reveal));text-shadow:0 1px 4px #000;}.scroll-cue svg{animation:scroll-nudge 2s ease-in-out infinite;}#hero-message{position:absolute;top:55svh;}
.album{scroll-margin-top:0;padding:0 24px;}.album-intro{padding:64px 8px 40px;display:flex;align-items:baseline;justify-content:space-between;gap:24px;}.album-intro h2{font-family:'Fine Style',serif;font-weight:400;font-size:clamp(2.5rem,4vw,4rem);line-height:1.1;margin:0;text-wrap:balance;}.album-intro p{margin:0;font-size:.9rem;line-height:1.6;}.filter-toolbar{position:sticky;top:0;z-index:var(--layer-sticky);background:#fff;padding:16px 8px 14px;margin:0 -8px 16px;border-bottom:1px solid #e8eae8;}.filter-top{display:flex;align-items:center;gap:24px;padding-right:160px;}.people-search{position:relative;display:flex;align-items:center;gap:10px;width:340px;max-width:100%;min-width:0;min-height:44px;border:1px solid #daddda;background:#f8f9f8;border-radius:10px;padding:0 12px;}.people-search:focus-within{border-color:#536c51;background:#fff;}.people-search input{font:inherit;font-size:.875rem;background:transparent;border:0;min-width:0;flex:1;padding:12px 0;color:inherit;outline:0;}.people-search input::placeholder{color:#566156;opacity:1;}.people-search button{background:none;border:0;min-height:44px;min-width:32px;display:flex;align-items:center;justify-content:center;}.results-count{font-size:.75rem;white-space:nowrap;margin:0;color:#586258;}.suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #ccd3ca;border-radius:10px;z-index:var(--layer-dropdown);max-height:320px;overflow:auto;}.suggestions button{display:flex;width:100%;padding:8px 12px;gap:12px;justify-content:start;font:inherit;font-size:.875rem;}.suggestions button[aria-selected=true],.suggestions button:hover{background:#e8efe5;}.suggestions img{border-radius:50%;object-fit:cover;}.suggestions button span{margin-left:auto;}.suggestions p{padding:16px;line-height:1.6;margin:0;font-size:.875rem;}.moments{display:flex;gap:8px;overflow:auto;scrollbar-width:thin;padding:12px 2px 4px;}.moments button,.person-chip{--chip:#f0f2ed;--chip-ink:#3d5038;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 14px;border:1px solid transparent;background:var(--chip);color:var(--chip-ink);font:inherit;font-size:.75rem;border-radius:999px;transition:background .18s,box-shadow .18s;}.moments .moment-0{--chip:#f1ebf8;--chip-ink:#665078;}.moments .moment-1{--chip:#f8eaf0;--chip-ink:#7c475f;}.moments .moment-2{--chip:#e9f1fc;--chip-ink:#3c5c82;}.moments .moment-3{--chip:#f9eee5;--chip-ink:#825331;}.moments .moment-4{--chip:#e9f3eb;--chip-ink:#3e694c;}.moments .moment-5{--chip:#f8f1db;--chip-ink:#756024;}.moments button[aria-pressed=true]{border-color:var(--chip-ink);box-shadow:inset 0 0 0 1px var(--chip-ink);}.moments button:hover{border-color:var(--chip-ink);}.selected-people{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;font-size:.75rem;}.selected-people>span{margin-right:8px;}.person-chip{background:#f3f5f1;border-color:#bdc9b8;}
.photo-grid{width:100%;}.photo-row{display:flex;gap:8px;margin-bottom:8px;}.photo-tile{position:relative;display:block;padding:0;border:0;overflow:hidden;flex:none;background:#eff1ee;}.photo-tile picture,.photo-tile img{display:block;width:100%;height:100%;}.photo-tile img{object-fit:contain;background-size:100% 100%;transition:filter .2s;}.photo-tile:hover img{filter:brightness(.96);}.photo-number{position:absolute;bottom:8px;right:8px;background:#263026;color:#fff;padding:4px 8px;font-size:.75rem;opacity:0;}.photo-tile:hover .photo-number,.photo-tile:focus-visible .photo-number{opacity:1;}.empty-state{text-align:center;padding:64px 16px;}.empty-state h3{font-family:'Cormorant Garamond',serif;font-size:2rem;}.empty-state p{line-height:1.6;}.empty-state button{background:var(--album-ink);color:white;padding:12px 24px;min-height:44px;border:0;}.album-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:64px 8px;}.album-footer span{font-size:2rem;}.album-footer a{font-size:.875rem;padding:12px 0;}
.lightbox{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;padding:0;margin:0;border:0;background:#fff;color:#263026;z-index:var(--layer-modal);overflow:hidden;}.lightbox::backdrop{background:transparent;}.viewer-header{height:64px;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;background:#fff;}.viewer-header small{margin-left:16px;font-size:.75rem;color:#586258;}.lightbox button,.lightbox a{border:0;background:transparent;color:inherit;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;}.lightbox button:hover,.lightbox a:hover{background:#f0f2ef;}.viewer-stage{height:calc(100dvh - 176px);display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;}.image-plane{position:relative;flex:none;transform-origin:center;max-height:100%;}.image-plane picture,.image-plane img{width:100%;height:100%;display:block;object-fit:contain;}.photo-flight{position:fixed;top:0;left:0;object-fit:contain;transform-origin:0 0;pointer-events:none;z-index:3;}.viewer-prev,.viewer-next{position:absolute;top:45%;z-index:2;background:#fffffff0!important;border-radius:50%;box-shadow:0 1px 6px #0002;}.viewer-prev{left:16px;}.viewer-next{right:16px;}.viewer-prev svg,.viewer-next svg,.viewer-header svg{width:20px;height:20px;}.viewer-footer{position:relative;background:#fff;height:112px;text-align:center;z-index:2;padding:14px 16px;}.viewer-actions{display:flex;justify-content:center;align-items:center;gap:12px;}.viewer-actions a,.viewer-actions button{font:inherit;font-family:system-ui,sans-serif;font-size:13px;text-decoration:none;padding:0 12px;border-radius:8px;}.viewer-actions svg{width:17px;height:17px;}.viewer-footer p{margin:8px 0 0;font-size:.75rem;min-height:20px;}.face-hotspot{position:absolute;min-height:0!important;min-width:0!important;border:1px solid transparent!important;border-radius:40%;background:none!important;}.image-plane:hover .face-hotspot,.show-names .face-hotspot,.face-hotspot:focus-visible{border-color:#fff!important;box-shadow:0 0 0 1px #141914;}.face-hotspot span{display:none;position:absolute;bottom:100%;background:#141914;color:white;padding:4px 8px;white-space:nowrap;font-size:.75rem;}.face-hotspot:hover span,.face-hotspot:focus-visible span,.show-names .face-hotspot span{display:block;}
@keyframes group-appear{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes scroll-nudge{50%{transform:translateY(5px)}}
@media(max-width:1000px){.hero-copy{width:min(460px,65vw);}.hero-shade{background:linear-gradient(0deg,rgba(12,22,15,.86),rgba(12,22,15,.08) 95%);}.hero h1{transform:translateY(calc(var(--reveal) * -1 * var(--copy-rise,290px)));}}
@media(max-width:700px){.hero{height:165svh;}.hero-image img{object-position:46% 25%;}.hero h1{left:24px;bottom:15svh;font-size:clamp(3.4rem,15vw,4.8rem);transform:translateY(calc(var(--reveal) * -1 * var(--copy-rise,290px)));}.hero-copy{left:24px;bottom:8svh;width:calc(100% - 48px);}.hero-copy p{font-size:.875rem;line-height:1.75;}.hero-copy .signature{font-size:1.4rem;margin:16px 0;}.gallery-cta{font-size:.75rem;padding:12px 16px;gap:12px;}.group-link{right:16px;top:16px;padding:8px 12px;font-size:.75rem;}.scroll-cue{bottom:28px;}.album{padding:0 8px;}.album-intro{padding:40px 8px 24px;display:block;}.album-intro h2{font-size:2.5rem;margin-bottom:12px;}.album-intro p{font-size:.875rem;}.filter-toolbar{padding:12px 8px 8px;margin:0 0 8px;}.filter-top{display:grid;grid-template-columns:1fr;padding-right:0;gap:10px;}.people-search{width:calc(100% - 140px);min-width:150px;}.people-search input{font-size:16px;}.results-count{font-size:.75rem;}.moments{gap:6px;}.moments button{font-size:.75rem;padding:8px 12px;min-height:44px;}.album-footer{display:block;padding:40px 8px;}.album-footer a{display:block;margin-top:16px;}.viewer-header{padding:8px 12px;font-size:.875rem;}.viewer-actions{gap:2px;flex-wrap:wrap;}.viewer-actions button,.viewer-actions a{padding:0 8px;font-size:12px;gap:5px;}.group-view .viewer-actions button,.group-view .viewer-actions a{padding:0 5px;font-size:11px;gap:4px;}.group-view .viewer-actions svg{width:15px;height:15px;}.viewer-prev{left:8px;}.viewer-next{right:8px;}.viewer-header small{margin-left:8px;}.viewer-footer{padding:12px 6px;}}
@media(max-width:380px){.hero h1{left:20px;transform:translateY(calc(var(--reveal) * -1 * var(--copy-rise,290px)));}.hero-copy{left:20px;width:calc(100% - 40px);}.hero-copy p{line-height:1.65;}.viewer-actions button,.viewer-actions a{padding:0 6px;}.group-view .viewer-actions{column-gap:8px;row-gap:0;}.group-view .viewer-actions button,.group-view .viewer-actions a{padding:0 4px;}.group-view .viewer-footer{padding-top:4px;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*:before,*:after{animation:none!important;transition:none!important;}.hero-copy{transform:none;}}
/* Image recovery keeps the reserved photo plane and independent tile/Retry buttons. */
.recoverable-picture {position:relative;width:100%;height:100%;}
.photo-open {position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;background:transparent;}
.photo-open:focus-visible {outline-offset:-4px;}
.photo-tile:focus-within .photo-number {opacity:1;}
.photo-number {pointer-events:none;z-index:1;}
.image-recovery {position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;background:var(--album-ink);color:var(--album-paper);text-align:center;font-size:.875rem;line-height:1.5;touch-action:manipulation;}
.image-recovery button {display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:8px 12px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;}
.image-recovery button[aria-disabled=true] {opacity:.65;cursor:wait;}

.group-link{z-index:calc(var(--layer-sticky) + 1);}.group-link,.filter-toolbar,.gallery-cta{font-family:system-ui,sans-serif;}

.viewer-header-actions{display:flex;align-items:center;gap:4px;}.viewer-header-actions button{font:12px system-ui,sans-serif;border-radius:8px;padding:0 8px;}.viewer-header-actions svg{width:17px;height:17px;}.viewer-header-actions button[aria-pressed=true]{background:#e9efe6;}.scroll-cue:focus-visible{opacity:1;}
@media(max-width:700px){.group-view .viewer-actions{gap:2px;flex-wrap:nowrap;}.group-view .viewer-actions button,.group-view .viewer-actions a{font-size:12px;padding:0 8px;gap:5px;}.group-view .viewer-actions svg{width:17px;height:17px;}.group-view .viewer-footer{padding:12px 6px;}.viewer-header>span{min-width:0;}.viewer-header-actions{flex:none;}.group-view .viewer-header small{display:block;margin-left:0;font-size:10px;}}
@media(max-width:380px){.group-view .viewer-actions button,.group-view .viewer-actions a{padding:0 6px;}}

.moments .moment-6{--chip:#f8e7e5;--chip-ink:#844842}.suggestions .person-initial{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#eef2ed;margin:0}

/* Secondary footer navigation; the existing album layout is unchanged. */
.album-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;}
.album-footer-links a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px;}
.album-footer-links a:last-child{text-decoration:underline;}
@media(max-width:700px){.album-footer-links{align-items:flex-start;flex-direction:column;gap:0;margin-top:16px;}.album-footer-links a{margin-top:0;}}

/* The footer retains its existing links; only the car artwork moves in its own clipped lane. */
.album-footer{display:block;}
.album-footer-content{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.footer-car-lane{overflow:clip;margin:16px -8px -32px;padding:6px 8px;}
.footer-car{display:block;width:80px;height:80px;margin:0 auto;padding:0;border:0;background:transparent;border-radius:8px;color:var(--album-ink);}
.footer-car img{display:block;width:80px;height:80px;object-fit:contain;pointer-events:none;}
.footer-car[aria-disabled=true]{cursor:default;}
@media(max-width:700px){.album-footer-content{display:block;}.footer-car-lane{margin-bottom:-16px;}}

/* Additions retain the accepted image-first system. */
.moments .moment-neutral{background:transparent;border:1px solid #777;color:#292d2a}
.moments .moment-neutral[aria-pressed="true"]{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.video-badge{position:absolute;left:8px;bottom:8px;z-index:2;pointer-events:none;background:rgba(0,0,0,.76);color:white;padding:4px 7px;font:12px/1.4 system-ui;border-radius:3px}
.video-badge{display:flex;gap:5px;align-items:center}
.image-plane video{width:100%;height:100%;object-fit:contain;display:block}
.video-stage{touch-action:auto}
.viewer-actions button:disabled{opacity:.45;cursor:default}

.video-badge{left:4px;top:4px;bottom:auto;gap:3px;padding:3px 4px;font-size:11px}
.photo-tile:has(.video-badge) .photo-number{top:34px;bottom:auto;left:4px;right:auto}


/* Content-sized footer keeps errors, counts and attribution inside narrow viewers. */
.lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.viewer-header{min-height:64px;height:auto;flex-shrink:0;}
.viewer-stage{height:auto;min-height:0;container-type:size;}
.viewer-footer{height:auto;min-height:112px;padding-bottom:max(14px,env(safe-area-inset-bottom));}
.viewer-actions,.group-view .viewer-actions{flex-wrap:wrap;}
.viewer-footer p{height:auto;min-height:0;overflow-wrap:anywhere;line-height:1.5;}
.viewer-footer p:empty{display:none;}
@media(max-width:380px){.viewer-actions,.group-view .viewer-actions{column-gap:2px;row-gap:2px;}.viewer-footer{padding-inline:8px;}}

/* Mobile-six: fixed scroll-linked layers; no timed easing that trails a swipe. */
.hero h1,.hero-copy{will-change:transform;backface-visibility:hidden;}
.hero-copy{transform:translate3d(0,calc((1 - var(--reveal)) * 28px),0);}
@media(max-width:700px){.hero-copy .signature{margin-bottom:24px;}}
/* Labels remain anchored to the face while growing gently from 10 to 14 screen px. */
.face-hotspot[aria-pressed=true]{border-color:#fff!important;box-shadow:0 0 0 1px #141914;}
.face-hotspot[aria-pressed=true] span{display:block;}
@media(hover:none),(pointer:coarse){.group-view .face-hotspot span{font-size:10px;padding:2px 4px;}}
@media(prefers-reduced-motion:reduce){
 .hero{--reveal:1!important;}
 .hero-copy{opacity:1;transform:none;}
 .scroll-cue{visibility:hidden;}
}

@media(hover:none),(pointer:coarse){
 .face-hotspot[data-label-muted] span{opacity:0;pointer-events:none;}
 .face-hotspot:focus-visible span{opacity:1;}
}

.group-view .face-hotspot span{bottom:calc(100% + 1px);}

/* Label paint floats above every outline, but never owns another face's tap.
   Keep buttons out of stacking contexts so their labels share this paint plane. */
.group-view .face-hotspot span{pointer-events:none;z-index:2;}
.group-view .face-hotspot[aria-pressed=true] span{z-index:3;}
.group-view .face-hotspot:focus-visible span{z-index:4;}

/* Native scroll timelines keep reveal transforms on the browser's scroll clock,
   including async WebKit scrolling. The existing measured rAF path is fallback. */
@supports (animation-timeline:scroll(root block)){
 @media(prefers-reduced-motion:no-preference){
  .hero h1,.hero-copy,.hero-shade,.scroll-cue{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root block);animation-range:0px var(--reveal-range,55svh);}
  .hero h1{animation-name:hero-title-scroll;}
  .hero-copy{animation-name:hero-copy-scroll;}
  .hero-shade{animation-name:hero-shade-scroll;}
  .scroll-cue{animation-name:hero-cue-scroll;}
 }
}
@keyframes hero-title-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-1 * var(--copy-rise,290px)),0)}}
@keyframes hero-copy-scroll{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hero-shade-scroll{from{opacity:0}to{opacity:1}}
@keyframes hero-cue-scroll{from{opacity:1}to{opacity:0}}

/* Mobile Names means outlines, just like desktop. Touch hover must not latch labels. */
@media(hover:none),(pointer:coarse){
 .group-view .image-plane:not(.show-names) .face-hotspot:not([aria-pressed=true]):not(:focus-visible){border-color:transparent!important;box-shadow:none;}
 .group-view .face-hotspot span,.group-view .show-names .face-hotspot span{display:none;}
 .group-view .face-hotspot[aria-pressed=true] span,.group-view .face-hotspot:focus-visible span{display:block;}
}
.lightbox:focus{outline:none;}
.lightbox button:focus-visible,.lightbox a:focus-visible{outline:1px solid #263026;outline-offset:2px;}