*{margin:0;padding:0;box-sizing:border-box}
:root{--forest:#143326;--cream:#fdfbf1;--muted:#5b6e66;--muted2:#8a9a93;--line:rgba(20,51,38,.14);--line2:rgba(20,51,38,.28);--serif:'Instrument Serif', Georgia, serif;--sans:'DM Sans', system-ui, sans-serif}
html{scroll-behavior:auto}
body{font-family:var(--sans);background:var(--cream);color:var(--forest);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{width:100%;height:100%;object-fit:cover;display:block}

/* bg */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--forest);z-index:100;width:0}
.bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(38px);opacity:.16;will-change:transform}
.b1{width:680px;height:680px;background:radial-gradient(circle at 30% 30%, #d6e8df 0%, #e8e0c8 46%, transparent 70%);top:-160px;left:-120px}
.b2{width:600px;height:600px;background:radial-gradient(circle at 50% 50%, #f0dfb8 0%, #d8e9e0 58%, transparent 72%);top:42%;right:-140px}
.b3{width:520px;height:520px;background:radial-gradient(circle at 40% 40%, #d9ece5 0%, #f5e6c2 60%, transparent 75%);bottom:-120px;left:24%}
#canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.045}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:50;background:rgba(253,251,241,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;letter-spacing:-.02em;font-size:.95rem}
.logo span{font-weight:400;color:var(--muted2);font-size:.70rem;margin-left:4px}
.nav-mid{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted2);background:rgba(20,51,38,.06);border:1px solid rgba(20,51,38,.08);padding:5px 12px;border-radius:20px;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.nav-right{display:flex;gap:10px;align-items:center;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.04em}
.nav-right .sep{opacity:.3}
#yearLabel{opacity:.7;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.nav-mid{display:none}}

/* hero - minimal, editorial */
.hero{position:relative;z-index:2;min-height:78vh;display:grid;place-items:center;text-align:center;padding:96px 24px 64px}
.hero-inner{max-width:640px}
.kicker{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted2);display:block;margin-bottom:16px}
.hero h1{font-family:var(--serif);font-size:clamp(2.8rem,7vw,4.4rem);line-height:.9;letter-spacing:-.04em;font-weight:400;margin-bottom:14px}
.hero h1 span{display:block}
.hero h1 em{font-style:italic;font-weight:400}
.hero p{font-size:.96rem;line-height:1.6;color:var(--muted);max-width:520px;margin:0 auto 20px}
.hero p strong{color:var(--forest)}
.enter{padding:10px 18px;border-radius:24px;border:1px solid var(--forest);background:var(--forest);color:var(--cream);font-weight:600;font-size:.84rem;cursor:pointer;transition:all .2s}
.enter:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,51,38,.18)}
.hero-arrow{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:.72rem;color:var(--muted2);animation:bounce 1.6s infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}

/* pin horizontal */
.pin{position:relative;z-index:2}
.sticky{position:sticky;top:48px;height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;background:transparent}
.ruler{position:relative;height:44px;display:flex;align-items:center;padding:0 32px;flex-shrink:0}
.ruler-line{position:absolute;left:32px;right:32px;top:50%;height:1px;background:var(--line)}
.ruler-progress{position:absolute;left:32px;top:50%;height:1px;background:var(--forest);width:0}
.ruler-years{position:relative;display:flex;gap:0;width:100%;justify-content:space-between;font-family:var(--sans);font-size:.60rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted2);padding-top:18px}
.ruler-years span{position:relative;top:-18px;background:var(--cream);padding:0 6px}
.track-wrap{flex:1;overflow:hidden;display:flex;align-items:center;padding-bottom:18px}
.track{display:flex;gap:22px;padding:0 32px;will-change:transform;align-items:stretch}
.card{
  flex:0 0 380px;width:380px;display:flex;flex-direction:column;position:relative;
  opacity:.62;transform:scale(.94);filter:saturate(.88);transition:opacity .5s, transform .6s cubic-bezier(.16,1,.3,1), filter .4s;
}
.card.active{opacity:1;transform:scale(1);filter:saturate(1)}
.card.featured{flex:0 0 400px;width:400px}
.card-inner{
  background:var(--cream);border:1px solid rgba(20,51,38,.08);border-radius:14px;overflow:hidden;
  box-shadow:0 8px 28px rgba(20,51,38,.08);display:flex;flex-direction:column;height:100%;transition:box-shadow .4s, border-color .4s;
}
.card.active .card-inner{box-shadow:0 18px 44px rgba(20,51,38,.14);border-color:rgba(20,51,38,.12)}
.dot{position:absolute;top:-22px;left:50%;width:10px;height:10px;background:var(--cream);border:1.5px solid var(--line2);border-radius:50%;transform:translateX(-50%);z-index:2;transition:all .4s}
.card.active .dot{background:var(--forest);border-color:var(--forest);box-shadow:0 0 0 6px rgba(20,51,38,.08);transform:translateX(-50%) scale(1.15)}
.media{position:relative;height:220px;overflow:hidden;background:#f5efe0;flex-shrink:0}
.media img{transform:scale(1.04);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.card:hover .media img{transform:scale(1.08)}
.media::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, transparent 68%, rgba(20,51,38,.06))}
.arrow{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:rgba(253,251,241,.92);border:1px solid rgba(20,51,38,.1);display:grid;place-items:center;transform:translateY(-50%);cursor:pointer;z-index:3;color:var(--forest);box-shadow:0 3px 10px rgba(20,51,38,.12);transition:all .2s}
.arrow:hover{scale:1.08;background:var(--cream)}
.arrow.prev{left:8px}
.arrow.next{right:8px}
.arrow svg{width:13px;height:13px;stroke-width:1.7}
.body{padding:16px 16px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.label{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--forest)}
.year{font-family:var(--serif);font-size:1.55rem;line-height:.9;letter-spacing:-.03em}
.desc{font-size:.78rem;line-height:1.58;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:62px}
.desc strong{color:var(--forest)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.tags span{font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;padding:3px 7px;background:rgba(20,51,38,.06);border:1px solid rgba(20,51,38,.07);border-radius:20px;color:var(--muted)}
.actions{display:flex;gap:8px;margin-top:10px}
.btn{font-size:.70rem;font-weight:600;padding:6px 11px;border-radius:20px;border:1px solid rgba(20,51,38,.12);background:transparent;color:var(--forest);cursor:pointer;transition:all .2s}
.btn:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.btn.primary{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.details{display:none;margin-top:8px;padding:10px 12px;background:rgba(20,51,38,.04);border:1px solid rgba(20,51,38,.06);border-radius:10px;font-size:.76rem;line-height:1.5;color:var(--muted)}
.card.open .details{display:block}
.hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted2);background:rgba(253,251,241,.9);border:1px solid var(--line);padding:4px 10px;border-radius:20px;opacity:.8}

/* wide CTA card */
.card.cta{flex:0 0 420px;width:420px}
.card.cta .card-inner{background:var(--forest);color:var(--cream);border-color:var(--forest);text-align:center;padding:22px 20px;display:grid;place-items:center}
.card.cta .card-inner h3{font-family:var(--serif);font-size:1.7rem;font-style:italic;font-weight:400;margin-bottom:8px}
.card.cta .card-inner p{font-size:.82rem;line-height:1.5;color:rgba(253,251,241,.75);margin-bottom:12px}
.card.cta .tags span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:rgba(253,251,241,.85)}
.card.cta .btn{border-color:rgba(253,251,241,.2);color:var(--cream)}
.card.cta .btn.primary{background:var(--cream);color:var(--forest);border-color:var(--cream)}

/* vertical fallback */
.vwrap{display:none;max-width:560px;margin:0 auto;padding:8px 0 40px;position:relative;z-index:2}
@media(max-width:860px){
  .pin{display:none}
  .vwrap{display:block}
  .nav-mid{display:none}
}
.vcard{position:relative;padding:18px 20px 18px 44px;display:grid;gap:12px;border-bottom:1px solid var(--line)}
.vcard::before{content:'';position:absolute;left:20px;top:28px;width:9px;height:9px;background:var(--cream);border:1.5px solid var(--line2);border-radius:50%;transform:translateX(-50%)}
.vcard.active::before{background:var(--forest);border-color:var(--forest)}
.vcard .media{border-radius:12px;height:200px;overflow:hidden}
.vline{position:absolute;left:20px;top:0;bottom:0;width:1px;background:var(--line)}
.vprogress{position:absolute;left:20px;top:0;width:1px;background:var(--forest);height:0}