:root{--ink:#18221e;--cream:#f3efe5;--paper:#faf8f2;--red:#a9422c;--gold:#c79650;--olive:#677563}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:DM Sans,sans-serif}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}button,select{font:inherit}.topbar{height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:#17221e;color:#fff;position:absolute;z-index:5;width:100%;border-bottom:1px solid #ffffff22}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-family:Marcellus,serif;letter-spacing:2px;font-size:16px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);border-radius:50%;font-size:25px}.brand small{display:block;font:600 8px DM Sans;letter-spacing:5px;color:var(--gold);margin-top:2px}.topbar nav{display:flex;gap:36px}.topbar nav a{color:#ddd7ca;text-decoration:none;font-size:13px;letter-spacing:.04em}.topbar nav a:hover{color:#fff}.lang{display:flex;align-items:center;border:1px solid #ffffff33;border-radius:50px;padding:8px 12px}.lang select{background:transparent;border:0;color:#fff;outline:0;appearance:none;cursor:pointer}.lang option{color:#111}.lang>span:last-child{color:var(--gold);padding-left:5px}.hero{height:min(860px,100vh);min-height:680px;background:url(/assets/hero-ercolano.png) center/cover no-repeat;color:#fff;position:relative;display:flex;align-items:center}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0d1310f0,#0d1310b8 37%,#0d131014 75%),linear-gradient(0deg,rgba(10,15,13,.5),transparent 40%)}.hero-copy{position:relative;z-index:1;margin:60px 7vw 0;max-width:650px}.overline{text-transform:uppercase;letter-spacing:.28em;font-size:11px;font-weight:700;color:#d1aa6a;margin:0 0 18px}.overline.ink{color:var(--red)}h1,h2,h3{font-family:Marcellus,serif;font-weight:400;margin:0}h1{font-size:clamp(64px,8vw,112px);line-height:.91;letter-spacing:-.04em;max-width:620px}.hero-copy>p:not(.overline){font-family:Marcellus,serif;font-size:20px;line-height:1.6;max-width:535px;color:#e5e0d6;margin:28px 0 35px}.actions{display:flex;gap:12px;flex-wrap:wrap}.actions a,.actions button{height:52px;padding:0 23px;border:0;border-radius:2px;display:flex;align-items:center;gap:22px;text-decoration:none;cursor:pointer;font-weight:600;font-size:13px}.primary{background:var(--red);color:#fff}.primary:hover{background:#bc4a31}.ghost{background:#ffffff10;color:#fff;border:1px solid #ffffff66!important}.ghost span{color:var(--gold)}.scroll-cue{position:absolute;z-index:1;right:4vw;bottom:38px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.3em;color:#ddd}.scroll-cue span{height:52px;width:1px;background:#aaa;display:inline-block;margin-bottom:14px}.map-section{padding:100px 5vw 115px;background:var(--cream)}.section-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:60px;max-width:1120px;margin:0 auto 42px}.section-head h2{font-size:clamp(43px,5vw,68px);line-height:1}.section-head>p{color:#5f665f;line-height:1.7;max-width:500px}.filters{max-width:1120px;margin:0 auto 22px;display:flex;gap:7px;overflow:auto;padding-bottom:4px}.filters button{border:1px solid #c9c4b7;background:transparent;padding:9px 17px;border-radius:50px;font-size:12px;white-space:nowrap;cursor:pointer;color:#4f5953}.filters button.active,.filters button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.map-layout{max-width:1120px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px}.map{height:570px;position:relative;overflow:hidden;background-color:#e4dfd2;background-image:linear-gradient(25deg,#d9d2c2 1px,transparent 1px),linear-gradient(155deg,#d3ccbb 1px,transparent 1px);background-size:43px 32px;border:1px solid #cdc5b5}.blocks{position:absolute;inset:8% 7% 18%;background:repeating-linear-gradient(90deg,transparent 0 8%,#b8ad9944 8.4% 9%,transparent 9.4% 18%),repeating-linear-gradient(0deg,transparent 0 16%,#a99f8b55 16.5% 18%,transparent 18.5% 34%);transform:rotate(-5deg)}.cardo,.decumano{position:absolute;background:#f7f3e9;border:1px solid #c8bfad;box-shadow:0 0 0 4px #b4aa9530;transform:rotate(-5deg)}.cardo{width:5%;height:76%;top:4%}.c1{left:27%}.c2{left:52%}.c3{left:77%}.decumano{height:6%;width:84%;left:7%}.d1{top:29%}.d2{top:57%}.sea{position:absolute;bottom:0;left:0;right:0;height:14%;padding:28px;color:#6d817d;background:#b9ccc5;font-size:9px;letter-spacing:.24em}.sea span{float:right;font-size:18px}.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);background:transparent;border:0;z-index:2;cursor:pointer;transition:.25s}.pin span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;border:3px solid #f3eee3;box-shadow:0 3px 12px #1b1d1944;font:600 10px DM Sans}.pin b{position:absolute;left:40px;top:5px;background:#f8f5eddd;padding:5px 8px;white-space:nowrap;font:600 10px DM Sans;box-shadow:0 2px 5px #3332;opacity:0;transition:.2s;pointer-events:none}.pin:hover{z-index:3}.pin:hover span,.pin.selected span{transform:scale(1.2);background:var(--ink)}.pin:hover b{opacity:1}.pin.hidden{opacity:.13;pointer-events:none}.map-key{position:absolute;left:17px;bottom:17%;font-size:10px;background:#f7f4eccc;padding:7px 10px}.route-card{background:#fff;padding:34px 28px;align-self:end;box-shadow:0 14px 35px #52442f20;border-top:3px solid var(--red)}.route-icon{font-size:35px;color:var(--red)}.route-card h3{font-size:31px;line-height:1.1}.route-card>p:not(.overline){font-size:13px;line-height:1.6;color:#66706a}.route-stats{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:#7c7569;border-top:1px solid #ddd6c9;padding-top:17px}.route-card button{border:0;background:var(--ink);color:#fff;width:100%;padding:14px;margin-top:20px;cursor:pointer;font-size:12px}.history{min-height:500px;background:#202d27;color:#fff;padding:90px 10vw;display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center;overflow:hidden}.history-num{font:400 clamp(190px,28vw,410px)/.7 Marcellus;color:#b34831;text-align:center;letter-spacing:-.11em}.history h2{font-size:clamp(42px,5vw,66px);line-height:1.08}.history div:last-child>p:last-child{line-height:1.8;color:#cdd3ce;max-width:550px}footer{background:#111a16;color:#d5d1c8;min-height:140px;padding:35px 5vw;display:flex;align-items:center;justify-content:space-between;font-size:11px}.drawer{position:fixed;right:0;top:0;height:100%;width:min(570px,94vw);background:var(--paper);z-index:20;padding:70px clamp(30px,6vw,72px);overflow:auto;transform:translate(102%);transition:.38s cubic-bezier(.75,0,.25,1);box-shadow:-20px 0 50px #0003}.drawer.open{transform:none}.backdrop{position:fixed;inset:0;background:#0b110ed0;z-index:19;opacity:0;pointer-events:none;transition:.3s}.backdrop.open{opacity:1;pointer-events:auto}.drawer-close{position:absolute;right:26px;top:23px;border:1px solid #bcb6aa;background:transparent;border-radius:50%;width:38px;height:38px;font-size:24px;cursor:pointer}.drawer-number{font:100px/.8 Marcellus;color:#ded8cb;position:absolute;right:65px;top:73px}.drawer h2{font-size:clamp(42px,7vw,62px);line-height:1.02;max-width:390px;position:relative}.drawer h3{font-size:19px;color:var(--red);margin:14px 0 27px}.drawer .lead{font:19px/1.6 Marcellus;color:#424a45}.rule{height:1px;background:#d8d2c6;margin:27px 0}.story{font-size:14px;line-height:1.9;color:#555f59}.tip{display:flex;gap:15px;background:#ebe5d8;padding:20px;margin:27px 0}.tip>span{color:var(--red)}.tip b{font-size:10px;text-transform:uppercase;letter-spacing:.16em}.tip p{font-size:12px;line-height:1.6;margin:7px 0 0}.audio-btn{border:0;background:var(--red);color:#fff;padding:15px 20px;width:100%;cursor:pointer;font-size:12px;font-weight:700}.audio-btn:hover{background:#88311f}@media(max-width:800px){.topbar nav{display:none}.topbar{height:66px}.hero{min-height:720px;background-position:62% center}.hero-shade{background:linear-gradient(90deg,#111915ee,#11191577),linear-gradient(0deg,#111915cc,transparent)}.hero-copy{margin:40px 7vw 0}.section-head{grid-template-columns:1fr;gap:12px}.map-section{padding:70px 4vw}.map-layout{grid-template-columns:1fr}.map{height:550px}.route-card{margin-top:0}.pin b{display:none}.history{grid-template-columns:1fr;padding:70px 7vw}.history-num{font-size:190px}footer{flex-direction:column;gap:20px;text-align:center}.drawer{padding-top:80px}}@media(max-width:480px){h1{font-size:59px}.hero-copy>p:not(.overline){font-size:17px}.actions{display:grid}.actions>*{justify-content:center}.map{height:480px}.pin span{width:30px;height:30px}.section-head h2{font-size:43px}}.hero{background-image:url(/vesuvio-viva/assets/hero-vesuvio.png)}