*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0e0a05;--gold:#c9a84c;--cream:#f0e6d0;--dim:#a89878;
  --card-bg:#120d07;--shadow:rgba(0,0,0,.75);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:Georgia,"Times New Roman",serif;overflow-x:hidden}

/* ── LOADING ── */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity 1.2s,visibility 1.2s}
#loading.gone{opacity:0;visibility:hidden}
.l-n{font-size:clamp(100px,20vw,200px);font-weight:100;color:var(--gold);line-height:1;animation:pulse 2s ease-in-out infinite}
.l-t{font-size:clamp(13px,3vw,20px);color:var(--dim);letter-spacing:.5em;text-transform:uppercase;margin-top:14px;animation:pulse 2s ease-in-out .3s infinite reverse}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:linear-gradient(to bottom,rgba(14,10,5,.96),transparent)}
.nav-logo{font-size:19px;color:var(--gold);letter-spacing:.1em}
.nav-yr{font-size:11px;color:var(--dim);letter-spacing:.2em;margin-top:2px}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{color:var(--dim);text-decoration:none;font-size:11px;letter-spacing:.15em;text-transform:uppercase;transition:color .3s}
.nav-links a:hover{color:var(--gold)}
/* ── BURGER ── */
#burger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;background:none;border:none;padding:6px;z-index:201}
#burger span{display:block;width:22px;height:1.5px;background:var(--gold);transition:transform .3s,opacity .3s}
#nav.open #burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#nav.open #burger span:nth-child(2){opacity:0}
#nav.open #burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:768px){
  #burger{display:flex}
  #nav{padding:10px 18px}
  .nav-links{display:none;position:fixed;inset:0;background:rgba(14,10,5,.97);flex-direction:column;align-items:center;justify-content:center;gap:36px;z-index:250;-webkit-overflow-scrolling:touch}
  #nav.open .nav-links{display:flex}
  #burger{position:relative;z-index:260}
  .nav-links a{font-size:15px;letter-spacing:.3em}
}

/* ── TIMELINE ── */
#tl{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:100;opacity:0;transition:opacity .5s}
#tl.vis{opacity:1}
.tl-item{display:flex;flex-direction:column;align-items:center;cursor:pointer}
.tl-dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--gold);background:transparent;transition:all .3s;margin:2px 0}
.tl-dot.on{background:var(--gold);transform:scale(1.5)}
.tl-line{width:1px;height:26px;background:rgba(201,168,76,.3)}
.tl-lbl{font-size:9px;color:var(--dim);writing-mode:vertical-rl;margin:3px 0;opacity:0;transition:opacity .3s}
.tl-item:hover .tl-lbl{opacity:1}
@media(max-width:900px){#tl{display:none}}

/* ── HERO ── */
#hero{position:relative;height:100vh;min-height:580px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(201,168,76,.09),transparent 70%)}
/* hero photo collage */
.hero-photos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.hero-photos::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(14,10,5,.93) 0%,rgba(14,10,5,.78) 42%,rgba(14,10,5,.38) 100%),linear-gradient(to bottom,rgba(14,10,5,.65) 0%,transparent 22%,transparent 78%,rgba(14,10,5,.65) 100%)}
.hp{position:absolute;object-fit:cover;opacity:.42;filter:sepia(20%) brightness(.55) blur(.5px);border:2px solid rgba(201,168,76,.18);box-shadow:0 8px 40px rgba(0,0,0,.85)}
.hp1{width:28vw;height:20vw;top:7%;left:1%;transform:rotate(-3deg)}
.hp2{width:16vw;height:22vw;bottom:8%;left:11%;transform:rotate(2deg);object-position:center center}
.hp3{width:15vw;height:21vw;top:10%;left:25%;transform:rotate(-1.5deg)}
.hp4{width:27vw;height:19vw;top:5%;right:2%;transform:rotate(2deg)}
.hp5{width:34vw;height:23vw;bottom:14%;right:10%;transform:rotate(-2.5deg)}
.hc{position:relative;z-index:3;text-align:center;padding:0 20px}
.h-sub{font-size:clamp(11px,2vw,13px);letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;opacity:0;animation:fadeUp 1.2s .5s forwards}
.h-num{font-size:clamp(80px,20vw,180px);font-weight:100;line-height:.9;opacity:0;animation:fadeUp 1.2s .8s forwards}
.h-num span{color:var(--gold)}
.h-name{font-size:clamp(20px,5vw,50px);font-weight:100;letter-spacing:.35em;color:var(--dim);text-transform:uppercase;opacity:0;animation:fadeUp 1.2s 1.1s forwards}
.h-div{width:160px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:26px auto;opacity:0;animation:fadeUp 1.2s 1.4s forwards}
.h-yr{font-size:clamp(13px,2vw,17px);letter-spacing:.2em;color:var(--dim);font-style:italic;opacity:0;animation:fadeUp 1.2s 1.7s forwards}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;animation:fadeIn 1s 3s forwards;z-index:3}
.scroll-hint span{font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
.scroll-arrow{width:1px;height:32px;background:linear-gradient(to bottom,var(--gold),transparent);animation:sarr 1.5s ease-in-out infinite}
@keyframes sarr{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* ── CHAPTER ── */
.chapter{padding:80px 0 60px}
.ch-head{text-align:center;padding:0 40px 50px;opacity:1}
.ch-head.vis{opacity:1}
.ch-num{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.ch-title{font-size:clamp(28px,6vw,60px);font-weight:100;line-height:1.05;margin-bottom:10px}
.ch-years{font-size:clamp(13px,2.5vw,19px);color:var(--gold);letter-spacing:.2em;margin-bottom:16px}
.ch-line{width:60px;height:1px;background:var(--gold);margin:22px auto;opacity:.5}
.ch-desc{font-size:clamp(16px,2.2vw,22px);color:var(--dim);line-height:1.8;max-width:660px;margin:0 auto;font-style:italic}

/* ── GALLERY — justified rows (all photos same row height, no crop) ── */
.masonry{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 40px;max-width:1400px;margin:0 auto;
  align-items:flex-start;justify-content:center;
}
.m-item.last-row{flex-grow:0}

.m-item{
  /* flex shorthand with CSS vars is buggy in iOS Safari — use longhand */
  flex-grow:var(--ar);flex-shrink:1;flex-basis:calc(var(--ar) * 280px);
  min-width:calc(var(--ar) * 120px);
  position:relative;overflow:hidden;cursor:pointer;touch-action:manipulation;
  background:var(--card-bg);
  border:1px solid rgba(201,168,76,.12);
  box-shadow:0 3px 20px rgba(0,0,0,.55);
  opacity:1;transition:box-shadow .35s,border-color .35s;
}
/* padding-top trick: height = width / ar = correct natural proportions */
.m-item::before{content:'';display:block;padding-top:calc(100% / var(--ar))}
.m-item.vis{opacity:1}
.m-item:hover{box-shadow:0 8px 36px rgba(0,0,0,.75),0 0 0 1px rgba(201,168,76,.3);border-color:rgba(201,168,76,.3);z-index:2}
.m-item img{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;pointer-events:none;
  transition:transform 8s ease;
  filter:sepia(15%) contrast(1.05) brightness(.97);
}
.m-item:hover img{transform:scale(1.04)}
.m-item.color img{filter:none}
@media(max-width:900px){.masonry{padding:0 16px;gap:6px}.m-item{flex-basis:calc(var(--ar)*200px);min-width:calc(var(--ar)*90px)}}
@media(max-width:500px){.masonry{padding:0 8px;gap:5px}.m-item{flex-basis:calc(var(--ar)*130px);min-width:calc(var(--ar)*70px)}}