@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Text:wght@400;700&display=swap');
:root{--ink:#233d34;--paper:#f6f3e9;--accent:#ba5939;--line:#d7d7c8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}header,main,footer{max-width:1250px;margin:auto}header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 35px;border-bottom:1px solid var(--line)}a{color:inherit;text-underline-offset:4px}.brand{text-decoration:none;font-size:28px;font-weight:700;display:flex;align-items:center;gap:18px}.brand span,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700}main{padding:0 35px}h1,h2,h3{font-family:'Libre Caslon Text',Georgia,serif;font-weight:400}h1{font-size:clamp(44px,5.2vw,74px);line-height:1.1;letter-spacing:-2px;margin:22px 0}h2{font-size:34px;line-height:1.2;margin:14px 0}p{line-height:1.7}.intro{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:65px 0 35px;align-items:center}.intro p{max-width:490px}button,.button{font:inherit;padding:12px 17px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:5px;cursor:pointer;text-decoration:none;display:inline-block}.primary,button:hover{background:var(--ink);color:white}.button{margin:8px}.small{font-size:12px;opacity:.8}.landscape{position:relative;border-radius:140px 140px 4px 4px;overflow:hidden;background:#cdd7bd;height:395px}.landscape img{width:100%;height:100%;object-fit:cover}.landscape span{position:absolute;bottom:24px;left:25px;font-size:10px;letter-spacing:2px;color:#fff}.notice{border-left:3px solid var(--accent);padding:12px 20px;background:#eee5d7;font-size:13px;line-height:1.6}.notice:empty{display:none}.journey{display:grid;grid-template-columns: .85fr 1.15fr;gap:55px;margin:65px 0}#map{height:420px;border-radius:7px;background:#dedfce;z-index:0}.stop{display:flex;width:100%;text-align:left;gap:16px;border:0;border-top:1px solid var(--line);border-radius:0;padding:19px 8px}.stop.active{background:#e5e8dc;color:var(--ink)}.stop small{display:block;font-size:12px;opacity:.7;margin-top:5px}.stop b{font-weight:500}.stop .num{font-family:Georgia,serif;font-size:24px;color:var(--accent);flex:0 0 2.5ch;white-space:nowrap;overflow-wrap:normal;word-break:normal}.stop>span:not(.num){flex:1;min-width:0}.check{display:flex;gap:8px;font-size:13px;margin-top:20px;align-items:center}.pin{background:var(--ink);color:white;border:2px solid white;border-radius:50%;display:grid;place-items:center;font-weight:bold;font-size:13px}.pin.selected{background:var(--accent)}.story{border-top:1px solid var(--line);padding:45px 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:55px}.story img{width:100%;max-height:420px;object-fit:cover;border-radius:6px}.cover-placeholder{background:#dce1d0;min-height:260px;display:grid;place-items:center;font:70px Georgia;color:#8d9e7c}.prose{white-space:pre-wrap;line-height:1.85}#open360{margin-top:15px}footer{border-top:1px solid var(--line);padding:25px 35px 145px;display:flex;justify-content:space-between;gap:15px;font-size:11px;letter-spacing:1px}footer span{opacity:.65}.player{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:white;display:flex;gap:18px;align-items:center;padding:16px max(20px,calc((100vw - 1180px)/2));z-index:1000;box-shadow:0 -5px 30px #0001}.player>div{flex:1;min-width:120px}.player strong,.player span{display:block}.player strong{margin-top:5px;font-size:14px}.player button{color:white}.player audio{width:min(440px,40vw)}#audio-status{font-size:11px;margin-top:5px}dialog{width:min(1000px,95vw);border:0;border-radius:8px;background:var(--paper)}dialog::backdrop{background:#000a}#panorama{height:65vh;margin-top:15px}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.editor{max-width:900px;padding-bottom:50px}.editor h1{font-size:46px}.panel{border:1px solid var(--line);padding:24px;border-radius:8px;margin:22px 0}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}label.field{display:block;font-size:13px;font-weight:600;margin:14px 0}input:not([type=checkbox]),textarea{display:block;width:100%;padding:10px;border:1px solid #bdc5b5;border-radius:4px;font:inherit;background:white;color:var(--ink);margin-top:7px}textarea{min-height:110px}.actions{display:flex;gap:8px;flex-wrap:wrap}.file-status{font-size:12px;font-weight:400;word-break:break-all}.editor nav button{margin:5px}.help{font-size:13px;line-height:1.7}#editor-status{position:sticky;bottom:0;background:var(--ink);color:white;padding:15px;min-height:45px} @media(max-width:760px){header{padding:0 20px;height:75px}.brand{font-size:23px}.brand span{font-size:9px;letter-spacing:1px}main{padding:0 20px}.intro{grid-template-columns:1fr;gap:20px;padding-top:35px}.landscape{height:230px;border-radius:70px 70px 4px 4px}.journey,.story{grid-template-columns:1fr;gap:28px;margin-top:38px}#map{height:320px}footer{flex-direction:column;padding:24px 20px 190px}.player{flex-wrap:wrap;gap:8px;padding:12px 15px}.player>div{flex-basis:100%}.player audio{width:calc(100% - 100px);flex:1}.player button{padding:9px 14px}.fields{grid-template-columns:1fr}h2{font-size:29px}}

/* Flexible columns and iPhone safe areas without clipping the page. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.intro>*,.journey>*,.story>*,.fields>*,.stop>span{min-width:0}
h1,h2,.prose,.stop,.notice,.player strong{overflow-wrap:anywhere}
img{max-width:100%}
.player audio{min-width:0;max-width:100%}
.player{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-left:max(20px,calc((100vw - 1180px)/2),env(safe-area-inset-left,0px));padding-right:max(20px,calc((100vw - 1180px)/2),env(safe-area-inset-right,0px))}
header,main,footer{padding-left:max(35px,env(safe-area-inset-left,0px));padding-right:max(35px,env(safe-area-inset-right,0px))}
@media(max-width:760px){
header,main,footer{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.player{padding:12px max(15px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(15px,env(safe-area-inset-left,0px))}
footer{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}
input:not([type=checkbox]),textarea{font-size:16px}
}
@media(max-width:350px){header{gap:10px}.brand{gap:10px}.brand span{font-size:8px;letter-spacing:.7px}header>a:last-child{font-size:13px;white-space:nowrap}.check{align-items:flex-start}}

.header-nav{display:flex;align-items:center;gap:24px;font-size:14px}
#era-menu{position:relative}#era-menu summary{cursor:pointer;list-style:none;padding:10px 0}#era-menu summary::-webkit-details-marker{display:none}
#era-links{position:absolute;right:0;top:100%;width:215px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 25px #233d3420;z-index:1100}
#era-links a{display:block;text-decoration:none;padding:12px;border-radius:4px}#era-links a:hover,#era-links a[aria-current=page]{background:var(--ink);color:white}
.era-intro{border-left:2px solid var(--accent);padding-left:14px;margin:24px 0}.era-intro p{font-size:14px;margin:7px 0}
select{font:inherit;background:white;color:var(--ink);width:100%;padding:12px;border:1px solid var(--line);border-radius:4px;margin-top:8px}
@media(max-width:760px){.header-nav{gap:14px}header .brand span{display:none}.header-nav a{white-space:nowrap}}
/* Anchor the dropdown to the complete navigation, including on 320px screens. */
.header-nav{position:relative}#era-menu{position:static}#era-links{max-width:calc(100vw - 40px)}
button:disabled{cursor:default;opacity:.55}

.home-presentation{margin:35px 0 65px;padding:36px;border:1px solid var(--line);border-radius:7px;background:#eeeee2}
.home-presentation .prose{max-width:none;width:100%}
.periods{margin:40px 0 70px;scroll-margin-top:24px}
.era-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.era-card{display:flex;flex-direction:column;min-width:0;padding:28px;border:1px solid var(--line);border-radius:7px;text-decoration:none;background:var(--paper);transition:background .15s}
.era-card:hover{background:#e5e8dc}.era-card h3{font-size:28px;margin:0 0 10px}.era-card p{flex:1;margin:0 0 22px;overflow-wrap:anywhere}.era-card>span{font-size:13px;font-weight:600;color:var(--accent)}
.homepage footer{padding-bottom:35px}.homepage .intro{padding-bottom:20px}
@media(max-width:760px){.home-presentation{padding:24px;margin:30px 0 42px}.era-cards{grid-template-columns:minmax(0,1fr)}.era-card{padding:24px}.periods{margin-bottom:40px}.header-nav #section-link{font-size:12px}}

/* Editorial photo frame: a rectangular image, offset mat and fine corner accent. */
.landscape{border-radius:0;height:auto;aspect-ratio:4/3;overflow:visible;box-shadow:10px 10px 0 #dedfce;isolation:isolate;margin:12px 12px 12px 0}
.landscape::before{content:"";position:absolute;top:-12px;right:-12px;width:64px;height:64px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);z-index:-1}
.landscape img{display:block;border-radius:0;width:100%;height:100%;object-fit:cover}
.landscape #hero-caption{left:18px;bottom:18px;right:18px;max-width:max-content;background:#233d34e8;padding:10px 12px;line-height:1.5;font-size:10px;overflow-wrap:anywhere}
#brand-mark{font-size:28px;letter-spacing:0;white-space:nowrap}
footer{flex-wrap:wrap;align-items:center}.footer-about{display:flex;flex-direction:column;gap:8px}.footer-author{display:flex;flex-direction:column;gap:6px}.footer-author strong{font-size:15px;font-weight:500;letter-spacing:.2px}footer #author-label{font-size:10px;text-transform:uppercase}footer span{opacity:1}#footer-description{opacity:.7}
.home-copy-editor{margin:25px 0;padding:18px;border:1px solid var(--line);border-radius:5px}.home-copy-editor summary{font-weight:600;cursor:pointer}.home-copy-editor .fields{margin-top:12px}
@media(max-width:760px){.landscape{height:auto;aspect-ratio:4/3;border-radius:0;margin-top:8px}header .brand #brand-mark{display:inline;font-size:26px}header .brand #brand-label{display:none}footer{align-items:flex-start}}

.route-back{display:block;font-size:12px;margin-bottom:18px}.route-card img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:20px}.route-card small{display:block;margin-bottom:16px;opacity:.7}#route-title{margin:12px 0;font-size:30px}#itinerari{scroll-margin-top:25px}