:root{
  --paper:#f7f0e4; --paper2:#efe4d1; --ink:#2b2219; --muted:#6f6254;
  --sea:#16303b; --sea2:#1f4e5f; --amber:#c8873a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.7 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:50;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--amber)}

/* HERO */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,72px);padding:48px clamp(24px,6vw,96px) 90px;color:#fff;overflow:hidden;
  background:radial-gradient(1200px 700px at 80% 20%,#24566a 0%,transparent 60%),linear-gradient(160deg,#1a3a47,#0f2229)}
.hero-photo{order:2;justify-self:center;width:100%;max-width:640px;border-radius:8px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);border:8px solid #f7f0e4;transform:rotate(1.5deg);animation:fade 1.4s ease both}
.hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:35% 30%}
.hero-text{order:1;padding:0;max-width:640px;justify-self:end;width:100%}
.eyebrow{margin:0 0 .8rem;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;opacity:.85}
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0}
h1{font-size:clamp(2.4rem,5.6vw,4.8rem)}
.dates{display:flex;align-items:center;gap:1rem;margin:1.2rem 0 .8rem;font-family:var(--serif);font-size:clamp(1.3rem,3.5vw,2rem)}
.dates i{flex:0 0 clamp(40px,8vw,90px);height:1px;background:var(--amber)}
.traits{margin:0;opacity:.9;font-size:1rem}
.scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);text-decoration:none;text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;display:flex;flex-direction:column;gap:2px}
.scroll b{font-size:1.4rem;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@keyframes fade{from{opacity:0;transform:rotate(1.5deg) translateY(20px)}to{opacity:1;transform:rotate(1.5deg)}}

/* INTRO */
.intro{max-width:720px;margin:0 auto;padding:88px 24px 40px;text-align:center}
.lead{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.3;margin:0 0 1.4rem}
.intro p{margin:0 0 1rem}

/* CHAPTERS */
.chapter{max-width:var(--maxw);margin:0 auto;padding:64px 20px}
.chapter:nth-of-type(even){position:relative}
.ch-head{max-width:700px;margin:0 auto 34px;text-align:center}
.years{display:inline-block;color:var(--amber);font-family:var(--serif);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem}
.ch-head h2{font-size:clamp(1.9rem,5vw,3rem);margin-bottom:1.1rem}
.ch-head p{margin:0 0 1rem;color:var(--ink)}
.ch-head h2::after{content:"";display:block;width:56px;height:2px;background:var(--amber);margin:1rem auto 0}

.gallery{display:grid;gap:14px;align-items:start}
.gallery.grid3{grid-template-columns:repeat(3,1fr)}
.gallery.grid2{grid-template-columns:repeat(2,1fr)}
.gallery.solo{grid-template-columns:minmax(0,640px);justify-content:center}
.gallery.portraitwide{grid-template-columns:minmax(0,380px)}
.gallery.first-wide .ph:first-child{grid-column:1/-1}
.ph{margin:0;position:relative;border-radius:6px;overflow:hidden;background:var(--paper2);box-shadow:0 6px 22px rgba(60,40,20,.14);transition:transform .35s,box-shadow .35s}
.ph:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(60,40,20,.22)}
.ph-btn{all:unset;display:block;width:100%;cursor:zoom-in;line-height:0}
.ph-btn:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.ph img{width:100%;height:auto}
.ph figcaption{padding:10px 12px 12px;font-size:.85rem;line-height:1.35;color:var(--muted);background:#fffaf2}

/* FINALE */
.finale{position:relative;color:#fff;text-align:center;padding:110px 24px 120px;margin-top:40px;overflow:hidden;background:var(--sea)}
.finale-bg{position:absolute;inset:0;background:linear-gradient(rgba(14,28,35,.82),rgba(14,28,35,.9)),url(images/p10.jpg) center/cover;opacity:.9}
.finale-in{position:relative;max-width:820px;margin:0 auto}
.finale h2{font-size:clamp(1.9rem,5vw,3rem);margin-bottom:2rem}
.cards{list-style:none;margin:0 0 3rem;padding:0;display:grid;gap:14px;grid-template-columns:repeat(3,1fr);text-align:left}
.cards li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:18px 20px;backdrop-filter:blur(4px)}
.cards b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--amber);margin-bottom:.35rem}
.cards span{font-size:.98rem;line-height:1.5;opacity:.92}
.bye{font-family:var(--serif);font-size:clamp(1.2rem,3vw,1.6rem);line-height:1.45;margin:0 0 1rem}
.bye.big{font-family:var(--serif);font-size:clamp(1.5rem,4.4vw,2.4rem);line-height:1.3;color:#f6d9a8;margin:1.6rem auto;max-width:640px}
.sign{margin-top:2rem;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;opacity:.85}
footer{background:#10222a;color:#9fb0b6;text-align:center;padding:22px 16px;font-size:.85rem}
footer p{margin:0}

/* LIGHTBOX */
dialog{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;color:#fff}
dialog::backdrop{background:rgba(10,14,16,.94)}
dialog[open]{display:grid;grid-template-columns:56px 1fr 56px;align-items:center}
dialog figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:100dvh;padding:56px 0 20px}
dialog img{max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain;border-radius:4px}
dialog figcaption{margin-top:12px;padding:0 10px;text-align:center;font-size:.95rem;opacity:.9}
.lb-close,.lb-nav{all:unset;cursor:pointer;color:#fff;font-size:2.4rem;line-height:1;text-align:center;opacity:.85;padding:10px}
.lb-close{position:absolute;top:8px;right:12px;font-size:2.6rem;z-index:2}
.lb-nav:hover,.lb-close:hover{opacity:1}
.lb-nav:focus-visible,.lb-close:focus-visible{outline:2px solid var(--amber)}

/* REVEAL */
.js .reveal,.js .ph{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease,box-shadow .35s}
.js .reveal.in,.js .ph.in{opacity:1;transform:none}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;align-content:center;padding:36px 22px 90px;gap:28px;text-align:center}
  .hero-photo{order:1;max-width:520px;border-width:6px}
  .hero-text{order:2;justify-self:center}
  .dates{justify-content:center}
  .gallery.grid3{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:17px}
  .chapter{padding:48px 14px}
  .gallery{gap:10px}
  .gallery.grid3,.gallery.grid2{grid-template-columns:1fr 1fr}
  .ph figcaption{font-size:.78rem;padding:8px 9px 10px}
  dialog[open]{grid-template-columns:1fr}
  .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);border-radius:50%;width:42px;height:42px;display:grid;place-items:center;padding:0;z-index:2}
  .lb-nav.prev{left:6px}.lb-nav.next{right:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-photo,.scroll b{animation:none}
  .js .reveal,.js .ph{opacity:1;transform:none;transition:none}
}

/* uniform tiles in multi-photo galleries (full photo is shown in the lightbox) */
.gallery:not(.solo) .ph img{aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.gallery.first-wide .ph:first-child img{aspect-ratio:16/9;object-position:50% 40%}
.gallery.grid3,.gallery.grid2{align-items:stretch}
.gallery .ph{display:flex;flex-direction:column}
.gallery .ph figcaption{flex:1}