/* Shared editorial presentation only; chart and navigation geometry stay intact. */
:root{
 --section-gap:10px;
 --section-inset:18px;
 --section-radius:14px;
 --section-shadow:0 6px 18px rgba(70,55,35,.08);
}
.plot,.historical-currents,.navigator{
 background:var(--plot-bg);
 border:1px solid var(--hairline);
 border-radius:var(--section-radius);
 box-shadow:var(--section-shadow);
}
header::after{height:12px;background:linear-gradient(rgba(70,55,35,.14),transparent)}
.timeline-title,.currents-heading h2,.nav-title{
 font-family:var(--font-editorial);
 font-weight:400;
 color:var(--ink);
 line-height:1.2;
}
.timeline-title{left:var(--section-inset);font-size:24px}
.currents-heading h2{font-size:21px}
.nav-title{font-size:19px}
.currents-heading{padding-left:var(--section-inset);padding-right:var(--section-inset)}
.currents-heading p,.nav-title small{font-family:var(--font-ui);color:var(--ink-soft);font-size:11px;line-height:1.4}
.historical-currents{padding-top:8px;padding-bottom:4px;margin-bottom:var(--section-gap)}
.navigator{padding:12px var(--section-inset)}
.event-list{margin-top:8px}
@media(min-width:900px){
 .plot{margin-top:var(--section-gap);margin-bottom:var(--section-gap)}
}
@media(max-width:899px){
 :root{--section-inset:12px}
 .timeline-title{font-size:22px}
 .currents-heading h2{font-size:20px}
 .nav-title{font-size:18px}
 .currents-heading p{font-size:10px}
 .currents-heading{padding-bottom:5px}
 .navigator{gap:12px}
 /* Retain the touch hint while giving it a deliberate, compact gap. */
 .instructions{margin:6px 4px}
}