/* River Cruising Guide: interim GST styling (first pass). Ange's design will replace this file. */
:root{--navy:#3c3f58;--ink:#2b2d3a;--accent:#4a4d69;--muted:#5f6275;--gold:#c5a880;--paper:#f7f6f2;--line:#e2e0d8;--white:#fff;--xmas:#8a3b3b;
--serif:Charter,'Bitstream Charter','Iowan Old Style',Georgia,serif;--sans:Inter,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink);background:var(--paper)}
a{color:var(--navy)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);color:var(--navy);line-height:1.15;font-weight:700}
h2{font-size:1.65em;margin:1.7em 0 .5em}
h2::after{content:"";display:block;width:56px;height:3px;background:var(--gold);margin-top:.35em}
h3{font-size:1.1em;margin:1.2em 0 .3em}
p{margin:0 0 1em}
.kicker{font-family:var(--sans);font-size:.7em;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.small{font-family:var(--sans);font-size:.78em;color:var(--muted)}
.lead{font-size:1.18em;color:var(--navy)}
.edition{background:var(--navy);color:#e8e6df;font-family:var(--sans);font-size:.68em;letter-spacing:.08em;text-align:center;padding:.3em}

/* header */
header.site{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header.site .in{max-width:1200px;margin:0 auto;padding:.7em 1.25em;display:flex;align-items:center;gap:1.2em}
.brand{display:flex;align-items:center;gap:.9em;text-decoration:none}
.brand img{height:34px;width:auto}
.brand span{font-weight:700;color:var(--navy);border-left:2px solid var(--gold);padding-left:.9em;white-space:nowrap;font-size:1.05em}
nav.main{margin-left:auto;font-family:var(--sans);font-size:.76em;display:flex;gap:1.3em}
nav.main a{text-decoration:none;font-weight:600;white-space:nowrap;padding:.3em 0;border-bottom:2px solid transparent}
nav.main a.on,nav.main a:hover{border-bottom-color:var(--gold)}
.menu{display:none;margin-left:auto;font:600 .75em var(--sans);background:none;border:1.5px solid var(--navy);color:var(--navy);border-radius:6px;padding:.4em .8em}

/* hero */
.hero{position:relative;height:64vh;min-height:380px;max-height:640px;background:var(--navy);overflow:hidden}
.hero picture,.hero picture img{width:100%;height:100%}
.hero picture img{object-fit:cover}
.hero .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(30,32,48,.55) 35%,rgba(30,32,48,.9));color:#fff;padding:5em 0 1.6em}
.hero.plain{height:auto;min-height:0}.hero.plain .cap{position:static;padding:3em 0 2em;background:none}
.hero .in{max-width:1200px;margin:0 auto;padding:0 1.25em}
.hero h1{color:#fff;font-size:3.2em;margin:.1em 0 .15em}
.hero .kicker{color:var(--gold)}
.hero p{max-width:46em;margin:0;font-size:1.05em;color:#eceaf2}
.illtag{position:absolute;top:.8em;right:.8em;font:600 .62em var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(43,45,58,.7);color:#fff;padding:.35em .7em;border-radius:3px}
.crumbs{max-width:1200px;margin:0 auto;padding:.9em 1.25em 0;font-family:var(--sans);font-size:.72em;color:var(--muted)}
.crumbs a{color:var(--muted)}

/* layout */
main{max-width:1200px;margin:0 auto;padding:1.2em 1.25em 3.5em;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:3em}
main.wide{display:block}
article{max-width:760px}
.side{display:flex;flex-direction:column;gap:1.2em;padding-top:.6em}
.glance{background:var(--white);border-top:3px solid var(--navy);padding:1em 1.15em}
.glance h3{font-family:var(--sans);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .6em;color:var(--navy)}
.glance dl{margin:0;display:grid;grid-template-columns:6.5em 1fr;gap:.4em .9em;font-size:.84em}
.glance dt{font-family:var(--sans);font-weight:600;color:var(--navy);font-size:.88em}
.glance dd{margin:0}
.glance p{font-size:.88em;margin:.2em 0 .5em}
.glance.ship{border-top-color:var(--gold)}
.glance.unesco{border-top-color:var(--accent)}
.hl{margin:0;padding-left:1.1em;font-size:.9em}
.hl li{margin:.2em 0}
figure{margin:1.4em 0}
figure.map{background:var(--white);padding:.6em;margin:0}
figcaption{font-family:var(--sans);font-size:.7em;color:var(--muted);margin-top:.4em}
.ph img{width:100%;height:auto}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1em;margin-top:1.5em}
.gallery figure{margin:0}

/* cards */
.cards{display:grid;gap:1.3em;margin:1em 0 1.5em}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:box-shadow .15s}
.card:hover{box-shadow:0 6px 22px rgba(43,45,58,.14)}
.card img,.card .noimg{aspect-ratio:3/2;width:100%;object-fit:cover;background:var(--line)}
.card .cb{padding:.9em 1.05em 1.1em}
.card h3{margin:.25em 0 .35em;font-size:1.2em}
.card p{font-size:.86em;margin:0;color:var(--muted)}
.cards.small .card h3{font-size:1.05em}
.cards.small .card p{font-size:.8em}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;font-family:var(--sans);font-size:.72em;text-align:center}
.cal div{padding:.5em 0 .3em;background:var(--white);border:1px solid var(--line);color:var(--muted)}
.cal div.best{background:var(--navy);color:#fff;border-color:var(--navy)}
.cal b{display:block;font-weight:600}
.cal i{display:block;font-style:normal;height:1.1em;color:var(--xmas)}
.cal div.best i{color:#f3d9d9}
.key{font-family:var(--sans);font-size:.7em;color:var(--muted);margin:.5em 0 0;display:flex;gap:1.2em}
.key span::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.35em;vertical-align:-.1em;background:var(--navy)}
.key span.x::before{background:none;content:"\2605";color:var(--xmas);width:auto}
details.months{margin-top:1em;background:var(--white);padding:.6em 1em}
details.months summary{font-family:var(--sans);font-weight:600;font-size:.8em;color:var(--navy);cursor:pointer}
details.months table{border-collapse:collapse;margin-top:.6em;font-size:.86em}
details.months th{text-align:left;font-family:var(--sans);font-size:.85em;color:var(--navy);padding:.35em 1em .35em 0;vertical-align:top;white-space:nowrap}
details.months td{padding:.35em 0;border-bottom:1px solid var(--line)}

/* route */
.timeline{list-style:none;position:relative;padding:0;margin:1em 0}
.timeline::before{content:"";position:absolute;left:.42em;top:.6em;bottom:.6em;width:2px;background:var(--navy)}
.timeline li{position:relative;padding:0 0 .9em 1.8em}
.timeline li::before{content:"";position:absolute;left:0;top:.38em;width:.85em;height:.85em;border-radius:50%;background:var(--white);border:2px solid var(--navy)}
.timeline li.common::before{background:var(--navy)}
.timeline li.end::before{background:var(--gold);border-color:var(--gold)}
.timeline .day{font-family:var(--sans);font-size:.68em;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-right:.3em}
.timeline a{font-weight:700;text-decoration:none}
.timeline .call{font-family:var(--sans);font-size:.7em;color:var(--muted);margin-left:.4em}
.timeline .sn{font-size:.86em;color:var(--muted)}
table.lines{border-collapse:collapse;width:100%;background:var(--white);font-size:.88em}
table.lines th{text-align:left;font-family:var(--sans);font-size:.85em;color:var(--navy);padding:.6em .9em;width:38%;vertical-align:top;border-bottom:1px solid var(--line)}
table.lines td{padding:.6em .9em;border-bottom:1px solid var(--line)}

/* notes, lists, chips */
.mynote{background:var(--navy);color:#fff;padding:1.1em 1.3em;border-left:4px solid var(--gold);margin:1.5em 0}
.mynote .kicker{color:var(--gold)}
.mynote p{font-style:italic;margin:.4em 0 0}
.mynote .sig{font-family:var(--sans);font-size:.72em;margin-top:.6em;color:#d9dae6}
.ticks{padding-left:1.2em}
.ticks li{margin:.35em 0}
.dl{display:grid;grid-template-columns:auto 1fr;gap:.4em 1em;font-size:.92em}
.dl dt{font-family:var(--sans);font-weight:600;color:var(--navy);font-size:.85em}
.dl dd{margin:0}
.themes{display:flex;gap:.6em;flex-wrap:wrap}
.chip{font-family:var(--sans);font-size:.75em;font-weight:600;color:var(--navy);border:1.5px solid var(--navy);border-radius:999px;padding:.3em .9em;text-decoration:none}
.chip:hover{background:var(--navy);color:#fff}
.featlink{font-family:var(--sans);font-size:.85em;background:var(--white);border-left:4px solid var(--gold);padding:.7em 1em}
.sources{margin-top:2.5em}
.sources h2{font-size:1.1em}
.sources ul{padding-left:1.1em;font-family:var(--sans);font-size:.74em;color:var(--muted)}
.sources li{margin:.25em 0}
.sources span{color:var(--muted)}
.prevnext{display:flex;justify-content:space-between;margin-top:2.5em;padding-top:1em;border-top:1px solid var(--line);font-family:var(--sans);font-size:.85em;font-weight:600}
.prevnext a{text-decoration:none}
.intro{max-width:760px}
.indep{background:var(--white);padding:.4em 1.6em 1.2em;margin-top:2.5em;border-top:3px solid var(--gold)}
.btn{display:inline-block;font:600 .8em var(--sans);background:var(--navy);color:#fff;text-decoration:none;padding:.65em 1.2em;border-radius:4px;margin:.3em .4em .3em 0}
.btn.alt{background:none;color:var(--navy);border:1.5px solid var(--navy)}

/* footer */
footer.site{background:var(--ink);color:#d6d4cc;font-family:var(--sans);font-size:.78em;margin-top:2em}
footer.site .in{max-width:1200px;margin:0 auto;padding:2em 1.25em;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2em}
footer.site .in.small{display:block;padding-top:0;font-size:.85em;color:#a9a7a0}
footer.site a{color:#fff}
footer .flogo{height:30px;width:auto;background:#fff;padding:4px 8px;border-radius:3px;margin-bottom:.8em}

/* phones and tablets */
@media (max-width:1100px){
  .menu{display:block}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);flex-direction:column;gap:0;padding:.4em 1.25em 1em;border-bottom:1px solid var(--line)}
  body.navopen nav.main{display:flex}
  nav.main a{padding:.7em 0;font-size:1.1em;border-bottom:1px solid var(--line)}
}
@media (max-width:1100px) and (orientation:portrait) and (min-width:641px){
  .hero{height:auto;aspect-ratio:3/2;max-height:none;min-height:0}
}
@media (max-width:900px){
  main{grid-template-columns:1fr;gap:1em}
  footer.site .in{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:17.5px}
  .brand img{height:26px}
  .brand{gap:.6em}
  .brand span{font-size:.78em;white-space:normal;line-height:1.1;max-width:6.5em;padding-left:.6em}
  header.site .in{gap:.6em}
  .hero{height:72vh;max-height:560px}
  .hero h1{font-size:2.3em}
  .cards.three,.cards.two{grid-template-columns:1fr}
  .cal{grid-template-columns:repeat(6,1fr)}
  table.lines th{width:45%}
}
footer .badges{display:flex;gap:.6em;margin-top:.8em}
footer .badges img{height:38px;width:auto;background:#fff;padding:3px;border-radius:3px}
footer .legal a{color:#d6d4cc}
.mynote .hosted{font-family:var(--sans);font-size:.66em;margin-top:.35em;color:#c9cad8;letter-spacing:.02em}

.pdfdl{background:var(--white);border-top:3px solid var(--gold);padding:1em 1.15em;margin:1.2em 0}
.pdfdl h3{margin-top:0;font-size:1.05em}
.pdfdl p{font-size:.9em}
.dlband{margin:2.2em 0;padding:1.4em 1.5em;border:1.5px solid var(--navy);border-radius:6px}
.dlband h2{margin-top:0}
.navshade{position:fixed;inset:0;background:rgba(43,45,58,.35);z-index:9}