@font-face{font-family:Montserrat;src:url('assets/montserrat-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/montserrat-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--bone:#090c13;--ink:#dcdcdd;--oxblood:#8ec2c0;--logo-top:5.86dvh;--logo-width:clamp(260px,29vw,430px);--overview-top:25.8dvh;--logo-height:calc(var(--logo-width)*.166);--year-bottom:4.5dvh;--stage-top:50dvh;--stage-max-width:62.65vw;--stage-width:min(var(--stage-max-width),max(120px,calc((50dvh - var(--logo-top) - var(--logo-height) - 48px)*3)),1200px);--ease:cubic-bezier(.22,1,.36,1);--close-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23090c13' fill-opacity='.9'/%3E%3Cpath d='m11 11 10 10m0-10L11 21' stroke='%238ec2c0' stroke-width='1.6'/%3E%3C/svg%3E") 16 16, zoom-out}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--bone);color:var(--ink);font-family:Montserrat,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;border-radius:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--oxblood);outline-offset:6px}
[hidden]{display:none!important}
.brand{position:fixed;z-index:30;width:var(--logo-width);top:var(--logo-top);left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;transition:top 1.15s var(--ease),width 1.15s var(--ease),transform 1.15s var(--ease),opacity .35s}
.brand img{width:100%;height:auto;display:block;filter:none}

.intro .brand{top:50%;width:min(720px,88vw);transform:translate(-50%,-50%)}


#machine{position:fixed;inset:0;touch-action:none;user-select:none;cursor:pointer}
.deck{position:absolute;top:var(--stage-top);left:50%;width:var(--stage-width);aspect-ratio:3/2;transform:translate(-50%,-50%);isolation:isolate;transition:opacity .38s,filter .38s}
.card{position:absolute;inset:0;width:100%;height:100%;background:var(--bone);transform-origin:50% 0;will-change:transform,opacity;cursor:zoom-in;backface-visibility:hidden}
.card img{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;user-select:none}
.card:after{z-index:3;content:'';position:absolute;inset:0;background:var(--bone);opacity:var(--veil,0);pointer-events:none}

/* The original photograph remains uncropped; only its surrounding layer is enlarged. */
.card{overflow:hidden;border-radius:2px;box-shadow:rgba(241, 192, 129, 0.06) 0px 0px 0px 1px, rgba(213, 204, 185, 0.03) 0px 1px 1px -0.5px, rgba(213, 204, 185, 0.04) 0px 2px 2px -1px, rgba(213, 204, 185, 0.04) 0px 3px 3px -1.5px, rgba(213, 204, 185, 0.03) 0px 5px 5px -2.5px, rgba(213, 204, 185, 0.03) 0px 10px 10px -5px, rgba(213, 204, 185, 0.03) 0px 24px 24px -8px}
.card .photo-sharp{z-index:2;opacity:0;transition:opacity 180ms ease}
.card .photo-sharp.ready{opacity:1}
.portrait-backdrop{position:absolute;inset:0;overflow:hidden;background:#000;pointer-events:none}
.portrait-backdrop:before,.fullscreen.portrait:before{content:'';position:absolute;inset:-12%;background-image:var(--portrait-photo);background-size:cover;background-position:center;filter:blur(36px);transform:scale(1.15);pointer-events:none}
.portrait-backdrop:after,.fullscreen.portrait:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.9);pointer-events:none}
.fullscreen.portrait{overflow:hidden;background:#000}
.fullscreen.portrait .full-photo{position:relative;z-index:1}

/* An inset stroke adds definition without changing photo dimensions. */
.card,.thumb,.full-photo img,.flying-photo{outline:1px solid rgba(100,105,112,.1);outline-offset:-1px}
.card:focus-visible{outline-offset:8px}
/* Five centered positions, with a generous gesture area around the labels. */
.year-timeline{position:fixed;z-index:5;left:50%;bottom:max(calc(var(--year-bottom) - 28px),env(safe-area-inset-bottom));width:min(660px,calc(100vw - 24px));height:104px;overflow:hidden;touch-action:none;user-select:none;cursor:grab;opacity:0;visibility:hidden;transform:translateX(calc(-50% + 60vw));transition:transform 950ms var(--ease),opacity 500ms ease}
.year-timeline.is-ready{opacity:1;visibility:visible;transform:translateX(-50%)}
.year-timeline.dragging,.year-timeline.dragging .year{cursor:grabbing}
.year{position:absolute;left:50%;top:0;width:20%;height:100%;min-width:44px;min-height:44px;font-size:16px;font-weight:700;cursor:pointer;will-change:transform,opacity;transition:color .2s;background:transparent}
.year:hover{color:var(--oxblood)}
.year:focus-visible{outline-offset:-18px}
body[data-view="overview"] .year-timeline,body[data-view="fullscreen"] .year-timeline{opacity:0;pointer-events:none}
body[data-view="overview"] .deck,body[data-view="fullscreen"] .deck{opacity:0;pointer-events:none}
body[data-view="fullscreen"] .brand{opacity:0}
.birdseye{position:fixed;inset:0;z-index:20;padding:var(--overview-top) 4.58vw calc(100dvh - var(--overview-top));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#484c55 var(--bone);background:var(--bone);cursor:var(--close-cursor);touch-action:pan-y;scroll-padding-top:var(--overview-top)}
/* A quiet opaque header keeps moving thumbnails away from the wordmark. */
body[data-view="overview"]:before{content:'';position:fixed;inset:0 0 auto;height:calc(var(--overview-top) - 18px);background:var(--bone);z-index:25;pointer-events:none}
.year-group{margin:0 0 51px;scroll-margin-top:0}
.year-group h2{font-size:18px;line-height:24px;font-weight:700;text-align:center;margin:0 0 17px}
.year-group h2 button{font-weight:700;cursor:pointer;padding:3px 16px}
.session{margin:0 0 32px}
.session:last-child{margin-bottom:0}
.session h3{font-size:14px;font-weight:400;line-height:20px;text-align:center;margin:0 0 7px}
.session h3 button{padding:2px 12px;cursor:pointer}
.session h3 button:hover,.year-group h2 button:hover{color:var(--oxblood)}
.contact-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(103px,1fr));gap:9px}
.thumb{border-radius:2px;width:100%;aspect-ratio:1.375;cursor:pointer;position:relative;background:#161a22;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease),opacity .25s;pointer-events:none}
.thumb:hover img{transform:scale(1.055)}
.thumb[aria-current="true"]:after{border-radius:inherit;content:'';position:absolute;inset:0;border:2px solid var(--oxblood);pointer-events:none}
.thumb:focus-visible{outline-offset:2px;z-index:1}
.fullscreen{position:fixed;inset:0;z-index:50;background:var(--bone);cursor:var(--close-cursor);touch-action:none}
.full-photo{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:var(--close-cursor);padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.full-photo img{border-radius:2px;display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;user-select:none}
.full-photo:focus-visible{outline-offset:-8px}
.flying-photo{border-radius:2px;position:fixed;z-index:60;object-fit:contain;pointer-events:none;transform-origin:0 0}
.flying-year{position:fixed;z-index:40;font-size:16px;font-weight:700;line-height:24px;text-align:center;pointer-events:none;transform-origin:center}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-script{position:fixed;left:10%;right:10%;bottom:10%;text-align:center;font-size:14px;line-height:1.8}
@media(max-height:760px) and (min-width:701px){:root{--logo-top:4dvh;--logo-width:clamp(220px,25vw,320px);--year-bottom:2dvh;--overview-top:28dvh;--stage-max-width:65vw}}
@media(max-width:700px){:root{--logo-top:max(5dvh,env(safe-area-inset-top));--logo-width:min(76vw,320px);--year-bottom:9dvh;--overview-top:25dvh;--stage-max-width:88vw}.year{font-size:15px}.birdseye{padding-left:5vw;padding-right:5vw}.contact-sheet{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:7px}.year-group{margin-bottom:36px}.year-group h2{font-size:17px}.session{margin-bottom:25px}.session h3{font-size:12px}.full-photo{padding:8px}}
@media(max-height:480px){:root{--logo-top:16px;--logo-width:min(45vw,260px);--year-bottom:0px;--overview-top:110px;--stage-max-width:55vw}.year{font-size:13px}.intro .brand{width:min(70vw,520px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}.card{will-change:auto}}

.fullscreen.pan-photo{overflow:hidden}
.pan-photo .full-photo{padding:0;overflow:hidden;cursor:grab;touch-action:none}
.pan-photo .full-photo:active{cursor:grabbing}
.pan-photo .full-photo img{position:absolute;top:0;max-width:none;max-height:none;object-fit:contain;pointer-events:none}
.pan-controls{position:absolute;z-index:4;bottom:max(22px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));pointer-events:none}
#tilt-toggle{pointer-events:auto;cursor:pointer;display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#090c13e8;color:var(--ink);box-shadow:0 3px 14px #0004;transition:background .2s,color .2s,border-color .2s}
#tilt-toggle svg{display:block;pointer-events:none}
#tilt-toggle[aria-pressed="true"]{background:var(--oxblood);color:var(--bone)}