/* LIFE 2.1 — a continuous, centred line with alternating memories. */
.life-view { height:auto; position:absolute; inset:0 0 3.5rem; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; padding:clamp(8rem,18vh,12rem) var(--page-padding-horizontal) 5rem; background:var(--color-background); color:var(--color-foreground); }
.life-view::-webkit-scrollbar { display:none; }
.life-header { text-align:center; margin:0 auto 1.5rem; }
.life-header h2 { font:400 clamp(3rem,7vw,6rem)/1 var(--font-interface); letter-spacing:.12em; margin:1rem 0; }
.life-header>p:last-of-type { color:rgb(27 27 25 / 55%); font-size:.8rem; letter-spacing:.12em; }
.life-meta,.life-period,.life-years,.life-preview-note { font:400 .65rem/1.6 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.life-meta { opacity:.58; margin:.75rem 0; }
.life-preview-note { display:block; margin-top:1rem; opacity:.45; font-size:.5rem; }
.life-years { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin:1rem auto 0; }
.life-years button { border-bottom:1px solid rgb(27 27 25 / 25%); padding:.4rem 0; }
.life-timeline { max-width:88rem; margin:auto; position:relative; }
.life-timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgb(27 27 25 / 35%); pointer-events:none; }
.life-chapter { position:relative; scroll-margin-top:2rem; }
.life-chapter__header { position:relative; width:fit-content; max-width:90%; margin:0 auto 2rem; padding:.5rem 2rem 1rem; text-align:center; background:var(--color-background); }
.life-period { font-size:.9rem; }
.life-chapter__header h3 { font:400 clamp(1.1rem,2vw,1.6rem)/1.2 var(--font-interface); margin:.7rem 0; text-transform:uppercase; }
.life-chapter__intro { font:400 .72rem/1.6 var(--font-interface); max-width:24rem; opacity:.6; }
.life-event { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 7rem minmax(0,1fr); padding:1rem 0 3rem; }
.life-event + .life-event { margin-top:-3rem; }
.life-event__marker { grid-column:2; grid-row:1; justify-self:center; width:4rem; height:6rem; padding:1rem 0; margin-top:1.5rem; background:var(--color-background); z-index:1; }
.life-icon { display:block; width:100%; height:100%; pointer-events:none; }
.life-icon svg { display:block; width:100%; height:100%; }
.life-event__content { min-width:0; grid-column:1; grid-row:1; position:relative; padding:0 0 1.5rem; }
.life-event[data-side=right] .life-event__content { grid-column:3; }
.life-event__content::after { content:''; width:2rem; height:1px; background:rgb(27 27 25 / 35%); position:absolute; top:4.5rem; right:-2.5rem; }
.life-event[data-side=right] .life-event__content::after { right:auto; left:-2.5rem; }
.life-event[data-layout=text] .life-event__content { padding-top:2rem; max-width:26rem; }
.life-event[data-layout=small] .life-event__content { max-width:20rem; }
.life-event[data-layout=portrait] .life-event__content { width:75%; justify-self:end; }
.life-event[data-side=right][data-layout=portrait] .life-event__content { justify-self:start; }
.life-event__title { font:400 clamp(1.2rem,2.1vw,1.8rem)/1.15 var(--font-interface); text-transform:uppercase; margin:.6rem 0 1rem; }
.life-event__text { font:400 clamp(.8rem,1.1vw,.95rem)/1.8 var(--font-interface); white-space:pre-line; color:rgb(27 27 25 / 65%); overflow-wrap:anywhere; }
.life-link { display:inline-block; margin-top:1.2rem; padding:.7rem 0; border-top:1px solid rgb(27 27 25 / 25%); font:400 .7rem/1.5 var(--font-mono); text-decoration:none; cursor:pointer; }
.life-link:hover,.life-years button:hover { opacity:.6; }
.life-illustration { height:12rem; display:grid; place-items:center; border-bottom:1px solid rgb(27 27 25 / 18%); }
.life-illustration .life-icon { width:7rem; height:7rem; opacity:.6; }
.life-gallery { position:relative; margin:0 0 1rem; }
.life-gallery__stage { aspect-ratio:4/3; overflow:hidden; background:rgb(27 27 25 / 4%); }
.life-event[data-layout=portrait] .life-gallery__stage { aspect-ratio:3/4; }
.life-gallery img,.life-gallery video { width:100%; height:100%; object-fit:cover; display:block; }
.life-gallery__stage > [hidden] { display:none; }
.life-gallery__controls { display:flex; gap:1.5rem; justify-content:flex-end; }
.life-gallery__controls button { padding:.4rem; }
.life-empty { margin:4rem auto; text-align:center; font:400 .9rem/1.8 var(--font-interface); }
.life-retry { display:block; margin:auto; text-decoration:underline; }
.life-view :is(button,a):focus-visible { outline:1px solid currentColor; outline-offset:5px; }
@media(max-width:47.999rem) {
 .life-view { inset:0 0 calc(3.25rem + env(safe-area-inset-bottom)); padding:8rem var(--mobile-edge,1.5rem) 3rem; }
 .life-header { margin-bottom:2rem; }
 .life-header h2 { font-size:2.8rem; }
 .life-timeline::before { left:1.2rem; }
 .life-chapter__header { margin:0 0 1.5rem 3.5rem; padding:1rem 0; text-align:left; }
 .life-event { display:block; padding:0 0 3.5rem 3.5rem; }
 .life-event + .life-event { margin-top:0; }
 .life-event__marker { position:absolute; top:0; left:0; width:2.4rem; height:4rem; margin-top:0; padding:.5rem 0; }
 .life-event .life-event__content,.life-event[data-layout=portrait] .life-event__content { width:100%; max-width:none; padding-top:0; }
 .life-event__content::after { display:none; }
 .life-event__title { font-size:1.15rem; }
 .life-event__text { font-size:.82rem; }
 .life-illustration { height:9rem; }
}
/* Colour is an intentional reveal; clicking opens the full photograph. */
.life-photo { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; overflow:hidden; }
.life-photo img { filter:grayscale(1); transition:filter 900ms cubic-bezier(.22,.61,.36,1); }
.life-photo:focus-visible img { filter:grayscale(0); }
@media(hover:hover) { .life-photo:hover img { filter:grayscale(0); } }
@media(prefers-reduced-motion:reduce) { .life-photo img { transition:none; } }

/* Keep scrolling LIFE content softly behind the fixed identity and clock. */
html[data-active-theme="life"] :is(.identity,.clock)::before {
 content:''; position:absolute; inset:-.8rem -1rem; z-index:-1; pointer-events:none;
 background:rgb(240 238 232 / 62%); border-radius:.4rem;
 -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
html[data-active-theme="life"] .clock::before { border-radius:50%; }

/* Paused video posters follow the same monochrome treatment as LIFE photos. */
.life-video { filter:grayscale(1); transition:filter 900ms cubic-bezier(.22,.61,.36,1); }
.life-video.is-playing,.life-video:focus-visible { filter:grayscale(0); }
@media(hover:hover) { .life-video:hover { filter:grayscale(0); } }
@media(prefers-reduced-motion:reduce) { .life-video { transition:none; } }

/* Matthias's original drawings retain their transparent canvas and proportions. */
.life-icon img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }

.life-icon--none { display:none; }
.life-event[data-icon="none"] .life-event__marker { background:transparent; }
.life-event[data-icon="none"] .life-event__content::after { display:none; }

/* Optional links share a row and wrap on narrow screens. */
.life-links { display:flex; flex-wrap:wrap; gap:0 1.5rem; }
.life-links .life-link { max-width:100%; overflow-wrap:anywhere; }

/* The SOY YO square marks loading without inventing a percentage. */
.life-loading { display:flex; align-items:center; justify-content:center; gap:.75rem; min-height:5rem; font:400 .65rem/1.6 var(--font-mono,monospace); letter-spacing:.08em; }
.life-loading__mark { position:relative; flex:none; width:.8rem; height:.8rem; border:1px solid currentColor; overflow:hidden; }
.life-loading__mark i { position:absolute; inset:0; background:currentColor; transform-origin:bottom; animation:life-loading-fill 1.2s ease-in-out infinite alternate; }
@keyframes life-loading-fill { from { transform:scaleY(.1); } to { transform:scaleY(.9); } }
.life-gallery__slide { position:relative; width:100%; height:100%; }
.life-media-status { position:absolute; inset:0; flex-direction:column; padding:1rem; text-align:center; background:rgb(240 238 232 / 90%); pointer-events:none; }
.life-media-status[hidden] { display:none; }
.life-media-status button { pointer-events:auto; color:inherit; background:transparent; border:0; border-bottom:1px solid currentColor; padding:.5rem; font:inherit; cursor:pointer; }
.life-event__content { border-bottom:1px solid rgb(27 27 25 / 22%); }
@media(prefers-reduced-motion:reduce) { .life-loading__mark i { animation:none; transform:scaleY(.5); } }

/* Staggered desktop timeline: minimum icon spacing, independent room per side. */
.life-events.is-staggered { position:relative; }
.life-events.is-staggered > .life-event { position:absolute; top:var(--life-top,0px); left:0; right:0; padding:0; margin:0; align-items:start; pointer-events:none; }
.life-events.is-staggered > .life-event > .life-event__content { pointer-events:auto; }

/* Native modal stays above the fixed identity, clock and bottom bar. */
.life-lightbox { position:fixed; inset:0; box-sizing:border-box; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:4.5rem 4vw 2rem; border:0; background:transparent; color:#f0eee8; overflow:hidden; cursor:default; }
.life-lightbox[open] { display:flex; align-items:center; justify-content:center; }
.life-lightbox::backdrop { background:rgb(10 10 10 / 82%); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.life-lightbox__figure { display:flex; flex-direction:column; align-items:center; max-width:100%; max-height:100%; margin:0; min-height:0; }
.life-lightbox__stage { position:relative; min-height:0; max-width:100%; display:flex; justify-content:center; }
.life-lightbox__image { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 10rem); object-fit:contain; filter:none; }
.life-lightbox__caption { flex-shrink:0; max-width:60rem; max-height:3rem; overflow:auto; margin:.8rem 0 0; font:400 .8rem/1.5 var(--font-interface,sans-serif); text-align:center; }
.life-lightbox__close { position:absolute; top:max(1rem,env(safe-area-inset-top)); right:max(1rem,env(safe-area-inset-right)); display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:inherit; font:200 26px/1 sans-serif; cursor:pointer; }
.life-lightbox__close:focus { outline:none; }
.life-lightbox .life-lightbox__close:is(:focus,:focus-visible) { outline:none; border:0; box-shadow:none; }
.life-lightbox .life-lightbox__close:focus-visible { color:#fff; text-shadow:0 0 6px rgb(255 255 255 / 65%); }
.life-lightbox .life-media-status { background:rgb(10 10 10 / 90%); min-width:12rem; }
@media(max-width:47.999rem) { .life-lightbox { padding:4.5rem 1rem 1.5rem; } }

.life-video-fullscreen { position:absolute; top:.65rem; right:.65rem; z-index:2; border:1px solid rgb(240 238 232 / 50%); padding:.45rem .65rem; background:rgb(10 10 10 / 70%); color:#f0eee8; font:400 13px/1.4 var(--font-interface,sans-serif); cursor:pointer; }
.life-video-fullscreen:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.life-video:fullscreen { width:100%; height:100%; object-fit:contain; background:#000; filter:none; }
.life-video:-webkit-full-screen { width:100%; height:100%; object-fit:contain; background:#000; filter:none; }

.life-inline-controls { position:absolute; bottom:0; left:0; right:0; z-index:2; display:flex; align-items:center; gap:10px; padding:8px; background:rgb(10 10 10 / 80%); color:#f0eee8; }
.life-inline-controls button { border:0; padding:8px; background:transparent; color:inherit; font:400 13px/1.4 sans-serif; cursor:pointer; }
.life-inline-controls input { flex:1; min-width:0; accent-color:#a1412f; }
.life-inline-controls :focus-visible { outline:1px solid #f0eee8; }