/* Visual refinement: stationary museum panorama, lounge textures and antique brass */
body{background:#14191e;background-image:radial-gradient(ellipse at 50% 0,#65503a1c,transparent 52%);}
.site-nav{position:relative;z-index:3;background:linear-gradient(180deg,#14181e,#1e2329);border-bottom:1px solid #c5a46d6b;box-shadow:0 6px 24px #0006}
.site-nav .brand{font-size:.95rem;color:#e8d2a7;text-shadow:0 1px 8px #c5a46d33}
.hero{position:relative;overflow:hidden;padding:6.2rem 1rem 4.5rem;background:radial-gradient(ellipse at 50% 7%,#98734b45,transparent 45%),repeating-linear-gradient(90deg,transparent 0,transparent 18%,#c5a46d09 18.1%,transparent 18.4%),linear-gradient(#24272a,#14191e)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;border:20px solid transparent;border-image:linear-gradient(90deg,#1d1713,#81603c88,#1d1713) 1;opacity:.25}
.hero h1{font-size:clamp(3rem,7.8vw,6.9rem);color:#f7eedf;text-shadow:0 2px 0 #8e7149,0 10px 40px #000a}
.hero .subtitle{letter-spacing:.035em}
.hero .eyebrow{color:#d6b783}
.tagline{color:#e8dccb}
.timeline{position:relative;background:linear-gradient(90deg,#221d1b,#58432e 17%,#785b3e 34%,#56504b 51%,#2b3943 70%,#141e2b);box-shadow:inset 0 20px 40px #0008,inset 0 -22px 40px #0009}
.timeline:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent 13.9%,#e3c18a24 14%,transparent 14.1%);opacity:.8}
.timeline-track{position:relative;gap:0;min-height:255px;border-bottom:2px solid #c5a46d}
.era{min-height:245px;padding:1.5rem .4rem 1rem;position:relative;border-left:1px solid #c5a46d38;background:linear-gradient(0deg,#10151dd9 0%,#171c2259 35%,transparent 65%);text-shadow:0 2px 8px #000}
.era:before{content:"";position:absolute;left:50%;top:23%;width:clamp(28px,5vw,70px);height:clamp(45px,8vw,105px);transform:translateX(-50%);border:2px solid #d3ae7380;border-radius:48% 48% 5% 5%;box-shadow:0 0 30px #f1cb7b30,inset 0 0 18px #f1cb7b30;background:linear-gradient(150deg,#edc78330,#1a202930)}
.era:nth-child(2):before{border-radius:4px 28px 4px 4px;transform:translateX(-50%) rotate(-7deg)}
.era:nth-child(3):before{border-radius:5px;box-shadow:12px 5px 0 -4px #c5a46d60,0 0 25px #f1cb7b30}
.era:nth-child(4):before{border-radius:5px 5px 0 0;clip-path:polygon(15% 100%,15% 35%,35% 35%,35% 0,50% 0,50% 60%,75% 60%,75% 18%,95% 18%,95% 100%)}
.era:nth-child(5):before{border-radius:50%;width:clamp(35px,6vw,80px);height:clamp(35px,6vw,80px)}
.era:nth-child(6):before{border-radius:5px;width:clamp(45px,7vw,95px);height:clamp(35px,5vw,65px)}
.era:nth-child(7):before{border-radius:50%;border-style:dotted;box-shadow:0 0 35px #8ab8cf55,inset 0 0 20px #8ab8cf55}
.era strong{z-index:1;color:#fff2dc}.era small{z-index:1}
.timeline-note{font-size:.72rem;opacity:.75}
.section.light{background:radial-gradient(ellipse at 20% 10%,#fffdf8,#eee5d5 75%);color:#27221e}
.section.dark{background:radial-gradient(ellipse at 50% 0%,#3a3430,#1c2128 65%)}
.section h2{letter-spacing:.015em}
.section.light h2{color:#302720}
.section .rule{box-shadow:0 0 12px #c5a46d55}
.cards{gap:1.25rem}
.card{position:relative;overflow:hidden;min-height:315px;padding:2.4rem 1.5rem;background:radial-gradient(circle at 50% 0%,#8e6e3b2c,transparent 55%),linear-gradient(135deg,#39302b,#1a1d23 65%);border:1px solid #c5a46d99;box-shadow:0 16px 32px #0009,inset 0 0 0 5px #0004,inset 0 0 0 6px #c5a46d33}
.card:before{content:"";position:absolute;inset:13px;border:1px solid #c5a46d25;pointer-events:none}
.card h3{font-size:1.8rem;color:#e6c18a}
.card .open{display:block;margin-top:1.6rem}
.placeholder{min-height:360px;box-shadow:0 20px 50px #0005,inset 0 0 0 12px #171c2266,inset 0 0 0 13px #c5a46d44;background:radial-gradient(ellipse at 50% 25%,#bb935c3d,transparent 65%),repeating-linear-gradient(90deg,#33281f 0,#33281f 24px,#4d3826 25px,#271f1c 28px)}
#book .placeholder{max-width:360px;min-height:440px;margin:auto;padding:2.5rem;border:9px solid #3a2c22;outline:2px solid #c5a46d;outline-offset:-18px;font-size:1.3rem;line-height:1.9}
.footer{background:#12171d}
dialog{border:7px solid #5e452d;outline:2px solid #d5b57e;outline-offset:-12px}
dialog h2{font-size:clamp(2rem,4vw,3.4rem)}
@media(max-width:850px){.timeline-track{min-height:0}.era{min-height:170px}.card{min-height:270px}}
@media(max-width:540px){.era{min-height:135px}.era:before{top:15%}.card{min-height:190px}.hero:before{border-width:8px}}