:root{
  --bg:#17130f; --bg-2:#1f1913; --ink:#eae2d6; --ink-2:#a89c8d; --line:#332b24; --brass:#c8a26a;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;
  --row:230px; --gap:6px;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 35%);z-index:-2;opacity:0;transition:opacity 2.2s ease}
.hero.ready img{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(23,19,15,.96) 0%,rgba(23,19,15,.72) 28%,rgba(23,19,15,.18) 62%,rgba(23,19,15,.35) 100%)}
.hero-inner{padding:0 clamp(20px,6vw,88px) clamp(40px,8vh,84px);max-width:1100px}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(64px,13vw,168px);line-height:.9;letter-spacing:-.01em;margin:0 0 18px}
.hero .dates{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,30px);letter-spacing:.04em;color:var(--ink);margin:0 0 14px}
.hero .epigraph{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,2vw,24px);color:var(--ink-2);max-width:32em;margin:0 0 34px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border:1px solid rgba(234,226,214,.55);border-radius:999px;font-size:15px;font-weight:400;letter-spacing:.01em;transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--ink);background:rgba(234,226,214,.06)}
.btn svg{width:14px;height:14px;fill:currentColor}
.hero .hint{font-size:14px;color:var(--ink-2)}
.hero .hint b{font-weight:500;color:var(--ink)}

/* ---------- Album ---------- */
.album{display:grid;grid-template-columns:150px 1fr;gap:0 clamp(20px,4vw,56px);padding:64px clamp(16px,4vw,56px) 120px;max-width:1700px;margin:0 auto}
.years{position:sticky;top:0;align-self:start;padding-top:8px;max-height:100svh;overflow:auto;scrollbar-width:none}
.years::-webkit-scrollbar{display:none}
.years ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.years a{display:block;padding:5px 0 5px 18px;font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink-2);text-decoration:none;position:relative;transition:color .2s}
.years a::before{content:"";position:absolute;left:-1px;top:50%;width:0;height:1px;background:var(--brass);transform:translateY(-50%);transition:width .25s}
.years a:hover,.years a.on{color:var(--ink)}
.years a.on::before{width:12px}
.years a.other{margin-top:14px;font-style:italic}
.chapter{margin-bottom:72px;scroll-margin-top:24px}
.chapter h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,64px);line-height:1;margin:0 0 6px}
.chapter .count{margin:0 0 22px;color:var(--ink-2);font-size:14px}
.chapter .count em{font-style:normal}
.grid{display:flex;flex-wrap:wrap;gap:var(--gap)}
.grid .ph{position:relative;flex-grow:calc(var(--r)*100);flex-basis:calc(var(--r)*var(--row));margin:0;padding:0;background:var(--bg-2);overflow:hidden}
.grid .ph::before{content:"";display:block;padding-bottom:calc(100% / var(--r))}
.grid .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.grid .ph img.in{opacity:1}
.grid .ph:hover img,.grid .ph:focus-visible img{opacity:.85}
.grid .fill{flex-grow:1000;flex-basis:0;height:0}
.foot{text-align:center;padding:0 20px 80px;color:var(--ink-2);font-family:var(--serif);font-size:20px;font-style:italic}

/* ---------- Viewer ---------- */
.viewer{position:fixed;inset:0;background:#0d0a08;z-index:50;display:none;flex-direction:column;user-select:none;touch-action:pan-y}
.viewer.open{display:flex}
.stage{position:relative;flex:1;min-height:0}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s ease}
.stage img.show{opacity:1}
.stage img.ken{animation:ken 7s ease-out forwards}
@keyframes ken{from{transform:scale(1)}to{transform:scale(1.035)}}
.bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,32px) max(16px,env(safe-area-inset-bottom))}
.cap{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);font-weight:400;line-height:1.2}
.cap small{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-2);margin-top:4px}
.ctrls{display:flex;gap:6px;align-items:center;flex-shrink:0}
.ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .2s}
.ic:hover{background:rgba(234,226,214,.1)}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic.play .i-pause,.ic.play.on .i-play{display:none}
.ic.play.on .i-pause{display:block}
.nav{position:absolute;top:0;bottom:0;width:22%;min-width:64px;opacity:0}
.nav.prev{left:0;cursor:w-resize}.nav.next{right:0;cursor:e-resize}
.close{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;z-index:2}
.progress{position:absolute;left:0;bottom:0;height:2px;background:var(--brass);width:0;transition:none}
.viewer.auto .progress{transition:width 5.2s linear}

@media (max-width:800px){
  :root{--row:115px;--gap:4px}
  .chapter{scroll-margin-top:72px}
  .album{grid-template-columns:1fr;padding-top:24px}
  .years{position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 78%,transparent);padding:10px 0 14px;margin:0 -16px 24px;max-height:none}
  .years ol{display:flex;gap:4px;border:0;padding:0 16px;overflow-x:auto;scrollbar-width:none}
  .years a{padding:6px 12px;font-size:19px;white-space:nowrap}
  .years a::before{display:none}
  .years a.on{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--brass)}
  .years a.other{margin:0}
  .nav{width:34%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero img,.stage img,.grid .ph img{transition:none}
  .stage img.ken{animation:none}
}