/* Landing sections added with "The drive" (the rest of the landing's styles are inline in index.html). */
.pick-row { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; font-weight:700; }
.pick-row a { color:var(--brand); text-decoration:underline wavy var(--brand); text-underline-offset:5px; }
.back { font-family:'Caveat',cursive; font-size:1.3rem; color:var(--annot); }
.trend-head h2 .up { color:var(--tier-high); } .trend-head h2 .down { color:var(--brand); }
.ev-note { margin-top:14px; font-family:'Caveat',cursive; font-size:1.35rem; color:var(--ev); transform:rotate(-1deg); }
.soon { margin-top:36px; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
.soon svg { width:min(420px, 100%); height:auto; }
.soon .annot { font-size:1.45rem; transform:rotate(-2deg); display:block; }
/* the fuel tabs' hand-drawn underline, drawn in the brand colour for both themes */
.trend-head .ft.on::after { content:""; position:absolute; left:-2px; right:-4px; bottom:0; height:10px; background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M2,6 C20,9 40,3 60,6 C68,7.2 74,6 78,5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M2,6 C20,9 40,3 60,6 C68,7.2 74,6 78,5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (max-width:900px) { .soon { grid-template-columns:1fr; } }
/* "All five" trend: one small petrol line per country, each against its own month */
.five-lines { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:26px; margin-top:40px; list-style:none; padding:0; }
.five-lines a { display:block; color:var(--ink); }
.five-lines b { display:block; font-weight:700; font-size:1.05rem; }
.five-lines svg { display:block; width:100%; height:64px; margin:12px 0 8px; overflow:visible; }
.five-lines small { display:block; font-family:'Geist Mono',monospace; font-size:.82rem; color:var(--ink-dim); }
.five-lines small.up { color:var(--tier-high); } .five-lines small.down { color:var(--brand); }
.five-lines .since { display:block; font-family:'Caveat',cursive; font-size:1.2rem; line-height:1.2; color:var(--annot); }
.five-lines a:hover b, .five-lines a:focus-visible b { text-decoration:underline wavy var(--brand); text-underline-offset:5px; }
@media (max-width:900px) { .five-lines { grid-template-columns:1fr 1fr; gap:28px 22px; } }
/* Right now: the numbers on the map's dots, beside each city */
.cityrow .cn .no { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:8px; border-radius:50%; background:var(--brand); color:var(--paper); font:600 .74rem 'Geist Mono',monospace; vertical-align:2px; }
/* station names get two lines, so they are never cut mid-word */
.cityrow .cs { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; }
/* a city without its line says why, under a dotted one */
.cityrow .nospark svg { display:block; width:110px; height:16px; margin-top:4px; }
.cityrow .nospark span { display:block; margin-top:2px; font-family:'Caveat',cursive; font-size:1.05rem; line-height:1.15; color:var(--annot); }
.hold-note { max-width:640px; margin-top:26px; font-family:'Caveat',cursive; font-size:1.35rem; line-height:1.3; color:var(--annot); transform:rotate(-1deg); }
/* the trend headline's number in the headline's own figures ("28.6c", not "28 . 6c") */
.trend-head h2 .mono { font-family:'Fraunces',serif; font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.01em; }