:root { --removed:#b24b3f; --restored:#008265; --spine:clamp(112px,19vw,290px); --content-gap:clamp(64px,8vw,128px); --era-anchor-offset:112px; --era-divider-inset:24px; }
a,button { color:inherit; }
.collection-link { font-size:var(--type-label); text-decoration:none; text-transform:uppercase; letter-spacing:.13em; }
.collection-link span { margin-left:6px; }
.hero::before { display:none; }
.timeline-intro { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(16px,1.8vw,26px); padding:56px clamp(20px,4vw,64px) 62px; border-bottom:1px solid var(--line); }
.timeline-intro-label { grid-column:1; }
.timeline-intro-label .eyebrow { margin:0; }
.timeline-intro-copy { grid-column:2 / span 3; max-width:720px; }
.timeline-intro-copy p { margin:0; font-family:"cormorant-garamond",Georgia,serif; font-size:clamp(var(--type-title-sm),2vw,var(--type-title-xl)); line-height:1.35; }
.timeline-intro-copy .instruction { margin-top:26px; color:var(--muted); font-family:"source-sans-3-variable",sans-serif; font-size:var(--type-sm); text-transform:uppercase; letter-spacing:.14em; }
.era-index-shell { position:sticky; z-index:10; top:68px; border-bottom:1px solid var(--line); background:rgb(var(--bar-paper)); backdrop-filter:blur(14px); }
.era-index { position:relative; display:grid; grid-template-columns:repeat(7,minmax(125px,1fr)); overflow-x:auto; padding:0 clamp(20px,4vw,64px); background:transparent; scrollbar-width:none; scroll-padding-inline:clamp(20px,4vw,64px); }
.era-index::-webkit-scrollbar { display:none; }
.era-index a { min-width:125px; padding:17px 12px 15px; border-right:1px solid var(--line); color:var(--muted); font-size:var(--type-caption); line-height:1.25; text-decoration:none; text-transform:uppercase; letter-spacing:.1em; }
.era-index a:first-child { padding-left:0; }
.era-index a:last-of-type { border-right:0; }
.era-index .era-years { display:block; margin-bottom:4px; color:var(--ink); font-variant-numeric:tabular-nums; }
.era-index .era-title { display:block; font-family:"cormorant-garamond",Georgia,serif; font-size:var(--type-body-lg); font-weight:500; line-height:1.1; letter-spacing:.01em; text-transform:capitalize; }
.era-index a.active { color:var(--ink); }
.era-indicator { z-index:3; }
.era-fade { position:absolute; z-index:2; top:0; bottom:0; width:60px; display:none; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.era-fade-left { left:0; background:linear-gradient(to right,rgb(var(--bar-paper)) 12%,rgba(var(--bar-paper),0) 100%); }
.era-fade-right { right:0; background:linear-gradient(to left,rgb(var(--bar-paper)) 12%,rgba(var(--bar-paper),0) 100%); }
.timeline { position:relative; padding:36px clamp(20px,4vw,64px) 80px; }
.timeline::before { position:absolute; z-index:2; top:36px; bottom:82px; left:calc(clamp(20px,4vw,64px) + var(--spine)); width:2px; background:var(--ink); content:""; }
.load-state { margin:0; padding:80px 0; color:var(--muted); }
.era { position:relative; min-height:300px; padding:42px 0 76px calc(var(--spine) + var(--content-gap)); scroll-margin-top:var(--era-anchor-offset); }
.era::after { position:absolute; right:0; bottom:var(--era-divider-inset); left:0; height:1px; background:var(--line); content:""; }
.era:last-of-type::after { display:none; }
.era-marker { position:absolute; z-index:3; left:var(--spine); top:0; bottom:0; width:2px; background:var(--era-color); pointer-events:none; }
.era-boundary-dot { position:absolute; top:0; left:-5px; width:12px; height:12px; border:2px solid var(--paper); border-radius:50%; background:var(--era-color); box-shadow:0 0 0 1px var(--ink); }
.era-start { position:absolute; top:1px; right:25px; min-width:84px; color:var(--ink); font-size:var(--type-label); font-weight:600; text-align:right; letter-spacing:.1em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.era-heading { position:relative; margin:0 0 34px; max-width:800px; }
.era-heading::before { position:absolute; top:10px; right:calc(100% + var(--content-gap)); width:var(--content-gap); height:1px; background:var(--era-color); content:""; }
.era-heading p { margin:0 0 8px; color:var(--era-color); font-size:var(--type-sm); font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.era-heading h2 { margin:0 0 10px; font-size:clamp(43px,5vw,76px); line-height:.9; letter-spacing:-.02em; }
.era-heading span { display:block; max-width:640px; color:var(--muted); font-size:var(--type-caption); line-height:1.65; }
.monuments { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.monument { position:relative; width:min(100%,500px); min-height:108px; transition:width .42s cubic-bezier(.22,.75,.22,1),margin-left .42s cubic-bezier(.22,.75,.22,1); }
.monument:nth-child(3n+2) { margin-left:clamp(12px,3vw,42px); }
.monument:nth-child(3n) { margin-left:clamp(4px,1.3vw,18px); }
.monument.is-open { width:min(100%,720px); margin-left:0; }
.tether { position:absolute; z-index:0; top:54px; right:100%; width:calc(var(--content-gap) + var(--row-offset,0px)); height:1px; background:color-mix(in srgb,var(--category-color) 62%,transparent); pointer-events:none; }
.tether::before { position:absolute; left:-4px; top:-3px; width:7px; height:7px; border:1px solid var(--paper); border-radius:50%; background:var(--category-color); box-shadow:0 0 0 1px var(--category-color); content:""; }
.monument:nth-child(3n+2) { --row-offset:clamp(12px,3vw,42px); }
.monument:nth-child(3n) { --row-offset:clamp(4px,1.3vw,18px); }
.monument-date { position:absolute; top:50px; right:calc(100% + var(--content-gap) + var(--row-offset,0px) + 16px); width:max-content; color:var(--category-color); font-size:var(--type-xs); font-weight:700; line-height:1.25; text-align:right; letter-spacing:.04em; text-transform:uppercase; font-variant-numeric:tabular-nums; white-space:nowrap; writing-mode:horizontal-tb; transform:none; }
.monument-toggle { position:relative; z-index:1; width:100%; min-height:108px; padding:0; display:grid; grid-template-columns:108px minmax(0,1fr); grid-template-areas:"image copy"; border:0; border-left:2px solid var(--category-color); background:rgba(255,255,255,.16); text-align:left; cursor:pointer; box-shadow:0 3px 12px rgba(50,52,50,.035); transition:grid-template-columns .42s cubic-bezier(.22,.75,.22,1),background .25s ease,box-shadow .3s ease,transform .25s ease; }
.monument-toggle:hover { background:rgba(255,255,255,.58); box-shadow:0 8px 22px rgba(50,52,50,.09); transform:translateY(-2px); }
.monument-image { grid-area:image; display:block; width:100%; }
.monument-image img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.84); transition:filter .25s ease,transform .35s ease; }
.monument-toggle:hover img,.is-open img { filter:saturate(1); transform:scale(1.025); }
.monument-copy { grid-area:copy; display:flex; min-height:106px; padding:17px 40px 14px 17px; flex-direction:column; justify-content:center; font-size:var(--type-label); line-height:1.4; overflow:hidden; overflow-wrap:anywhere; transition:padding .42s cubic-bezier(.22,.75,.22,1); }
.monument-copy strong { display:block; font-family:"cormorant-garamond",Georgia,serif; font-size:var(--type-title-sm); font-weight:500; line-height:1.05; transition:transform .38s cubic-bezier(.22,.75,.22,1); }
.monument-role { display:block; margin-top:8px; color:var(--category-color); font-size:var(--type-xs); font-weight:650; text-transform:uppercase; letter-spacing:.13em; transition:transform .38s cubic-bezier(.22,.75,.22,1); }
.monument-years { display:grid; grid-template-columns:1fr 1fr; max-height:0; margin:0; overflow:hidden; border-top:1px solid var(--line); opacity:0; transform:translateY(-5px); transition:max-height .42s cubic-bezier(.22,.75,.22,1),margin .42s cubic-bezier(.22,.75,.22,1),padding .42s cubic-bezier(.22,.75,.22,1),opacity .24s ease,transform .32s ease; }
.monument-years > span { min-width:0; padding:7px 10px 7px 0; }
.monument-years b,.monument-years em { display:block; font-style:normal; }
.monument-years b { margin-bottom:3px; color:var(--muted); font-size:var(--type-xs); font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.monument-years em { font-size:var(--type-sm); line-height:1.4; font-variant-numeric:tabular-nums; }
.monument-detail { display:block; max-height:0; margin:0; overflow:hidden; color:var(--muted); font-size:var(--type-caption); line-height:1.65; opacity:0; transform:translateY(-5px); transition:max-height .42s cubic-bezier(.22,.75,.22,1),margin .42s cubic-bezier(.22,.75,.22,1),opacity .24s ease,transform .32s ease; }
.expand-label { position:absolute; right:10px; bottom:10px; color:var(--ink); font-size:var(--type-body); line-height:1; vertical-align:baseline; transition:transform .2s ease; }
.is-open .monument-toggle { grid-template-columns:clamp(180px,26vw,250px) minmax(0,1fr); grid-template-areas:"image copy"; background:rgba(255,255,255,.72); box-shadow:0 14px 38px rgba(50,52,50,.15),0 0 0 1px rgba(255,255,255,.55); }
.is-open .monument-copy { min-height:100%; padding:22px 38px 18px 18px; }
.is-open .monument-copy strong,.is-open .monument-role { transform:translateY(-5px); }
.is-open .monument-years { max-height:170px; margin:10px 0 0; padding:8px 0 2px; opacity:1; transform:translateY(0); }
.is-open .monument-detail { max-height:180px; margin:13px 0 3px; opacity:1; transform:translateY(0); }
.is-open .expand-label { transform:rotate(45deg); }
.lifecycle-lines { position:absolute; z-index:2; inset:0; overflow:visible; pointer-events:none; }
.lifecycle-path { fill:none; stroke-width:1.5; stroke-dasharray:5 5; opacity:.72; vector-effect:non-scaling-stroke; }
.lifecycle-path-removed { stroke:var(--removed); }
.lifecycle-path-restored { stroke:var(--restored); }
.lifecycle-path.is-active { stroke-width:2.5; opacity:1; }
.lifecycle-destination { position:relative; z-index:4; width:min(100%,430px); height:48px; margin:5px 0 7px; border-top:1px dashed color-mix(in srgb,var(--event-color) 64%,transparent); }
.lifecycle-destination::before { position:absolute; top:-1px; right:100%; width:var(--content-gap); border-top:1px dashed color-mix(in srgb,var(--event-color) 64%,transparent); content:""; }
.lifecycle-dot { position:absolute; top:-4px; right:calc(100% + var(--content-gap) - 4px); width:7px; height:7px; border:1px solid var(--paper); border-radius:50%; background:var(--event-color); box-shadow:0 0 0 1px var(--event-color); }
.lifecycle-destination-date { position:absolute; top:-5px; right:calc(100% + var(--content-gap) + 16px); width:max-content; color:var(--event-color); font-size:var(--type-xs); font-weight:700; line-height:1.25; letter-spacing:.04em; text-transform:uppercase; font-variant-numeric:tabular-nums; white-space:nowrap; }
.lifecycle-destination-label { position:absolute; top:-6px; left:10px; padding:0 6px; color:var(--event-color); background:var(--paper); font-size:var(--type-2xs); font-weight:650; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; }
footer { border-top:1px solid var(--line); }
.timeline-end { position:absolute; z-index:4; bottom:76px; left:calc(clamp(20px,4vw,64px) + var(--spine) - 5px); width:12px; height:12px; border:2px solid var(--paper); border-radius:50%; background:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.timeline-end span { position:absolute; top:1px; right:25px; min-width:80px; font-size:var(--type-sm); font-weight:700; text-align:right; letter-spacing:.1em; text-transform:uppercase; }
.collection-link,
.era-index a,
.era-start,
.era-heading p,
.monument-date,
.monument-years em,
.lifecycle-destination-date,
.timeline-end span { font-family:"instrument-sans-variable",sans-serif; }
@media (max-width:1200px) { .era-index { grid-template-columns:repeat(7,150px); }.era-fade { display:block; }.era-index.can-scroll-left ~ .era-fade-left,.era-index.can-scroll-right ~ .era-fade-right { opacity:1; } }
@media (min-width:1200px) { :root { --spine:clamp(180px,14vw,240px); --content-gap:clamp(64px,6vw,96px); } .timeline { max-width:1600px; margin-inline:auto; } }
@media (max-width:760px) { :root { --spine:82px; --content-gap:36px; } .timeline-intro { grid-template-columns:1fr; gap:24px; padding-top:42px; padding-bottom:46px; }.timeline-intro-label,.timeline-intro-copy { grid-column:1; }.timeline { padding-inline:16px; }.timeline::before { left:calc(16px + var(--spine)); }.monument-date { right:calc(100% + var(--content-gap) + var(--row-offset,0px) + 14px); width:max-content; }.lifecycle-destination-date { right:calc(100% + var(--content-gap) + 14px); }.era-start { right:18px; min-width:64px; font-size:var(--type-xs); }.timeline-end { left:calc(16px + var(--spine) - 5px); }.timeline-end span { right:18px; } }
@media (max-width:500px) { :root { --era-divider-inset:18px; }.collection-link { font-size:var(--type-xs); }.era-index-shell { top:60px; }.era { padding-bottom:52px; }.monument,.monument:nth-child(n) { width:100%; min-height:82px; margin-left:0; --row-offset:0px; }.monument-toggle { grid-template-columns:82px minmax(0,1fr); min-height:82px; }.monument-copy { min-height:80px; padding:12px 32px 10px 12px; }.monument-copy strong { font-size:var(--type-body-lg); }.monument-detail { font-size:var(--type-label); }.tether { top:41px; }.monument-date { top:37px; font-size:var(--type-2xs); }.is-open .monument-toggle { grid-template-columns:1fr; grid-template-areas:"image" "copy"; }.is-open .monument-image { aspect-ratio:4/3; overflow:hidden; } footer { gap:20px; } }