/* ───────── the page backdrop ─────────
   A graticule with great-circle arcs drawing themselves across it. The arcs
   curve because that is what a long-haul route actually looks like on a flat
   map -- straight lines would read as a network diagram, not travel. */
.tv-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(80% 55% at 50% 0%, #0d1a2a 0%, #080f18 46%, #04070b 100%);
}
.tv-sky > * { position: absolute; inset: 0; }
.tv-grid {
  background-image:
    linear-gradient(rgba(127,184,232,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,184,232,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 85%);
}
.tv-globe svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tvs-lat, .tvs-lon { fill: none; stroke: #4f7fa8; stroke-width: 1; opacity: .16; }
/* Each arc draws itself, holds, then fades -- staggered by --i so the sky is
   never doing all four at once. */
.tvs-arc path {
  fill: none; stroke: #7fb8e8; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: tv-fly 18s ease-in-out infinite;
  animation-delay: calc(var(--i) * 3.4s);
  filter: drop-shadow(0 0 5px rgba(127,184,232,.55));
}
@keyframes tv-fly {
  0%        { stroke-dashoffset: 900; opacity: 0; }
  8%        { opacity: .75; }
  42%       { stroke-dashoffset: 0; opacity: .75; }
  62%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.tvs-pin circle {
  fill: #9fd0f5; opacity: .5;
  filter: drop-shadow(0 0 6px rgba(159,208,245,.9));
  animation: tv-pin 6s ease-in-out infinite alternate;
}
.tvs-pin circle:nth-child(even) { animation-delay: -3s; }
@keyframes tv-pin { from { opacity: .28; } to { opacity: .85; } }
.tv-glow {
  background:
    radial-gradient(55% 34% at 22% 78%, rgba(127,184,232,.10), transparent 70%),
    radial-gradient(45% 30% at 80% 26%, rgba(200,168,120,.07), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  .tvs-arc path { animation: none; stroke-dashoffset: 0; opacity: .4; }
  .tvs-pin circle { animation: none; }
}

/* travels.css -- /travels/ only. Kept out of fanpages.css because this is not a
   fan page and has no business inheriting from that file's themes. */

body[data-fan="travels"] { --a: #7fb8e8; }

/* ── NOTHING ON THIS PAGE IS CENTRED ──
   Every block below is `max-width: var(--maxw)` with a LEFT margin of zero,
   not `margin: 0 auto`. The site is a left-aligned layout: layout.css sets
   `main { padding-left: var(--gutter) }` and `section { padding: 0 var(--gutter);
   max-width: var(--maxw) }` with no auto margin, and .fan-hero follows the same
   rule. These sections used to say `auto`, which is invisible up to about
   1320px and then wrong: past that the hero stays hard left while everything
   under it drifts to the middle of the window, so the page has two left edges
   and the wider the monitor the further apart they get. If you add a block
   here, give it a zero side margin. */

/* ───────── summary ───────── */
.tv-summary { padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 0 1.8rem; }
/* --n is the number of tiles, set inline by travels.js: four normally, five
   once there is a road trip on the page to count. Two up on a phone either
   way, because five figures across a 360px screen is not a figure. */
.tv-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.4rem; }
@media (min-width: 620px) { .tv-stats { grid-template-columns: repeat(var(--n, 4), 1fr); } }
.tv-stats div { display: grid; gap: 0.2rem; }
.tv-stats b { font-family: var(--mono); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1; color: var(--a); }
.tv-stats span {
  font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mute);
}
.tv-flagwall { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.4rem; }
.tv-flagwall span {
  font-size: 1.35rem; line-height: 1; padding: 0.3rem 0.4rem; border-radius: 4px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.tv-lock {
  margin-top: 1.3rem; font: inherit; cursor: pointer;
  font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.42rem 0.8rem; border-radius: 3px; color: var(--mute);
  background: transparent; border: 1px solid var(--line);
}
.tv-lock:hover { color: var(--ink); border-color: var(--a); }

/* ───────── what kind of places ─────────
   The block under the summary, and the badges down the right of every trip
   below it, are the same three families in the same three colours: continent,
   who lives there, region. So a pill means the same thing wherever it appears
   on the page, and you can read the tally and then spot it on a trip.

     cont  the site's own blue -- geography, the neutral fact
     cult  gold -- who lives there, which is the part I care about most
     reg   green -- the specific region

   The trip badges take their border from the trip's own --c1 instead, so a
   column of pills still belongs to the card it is sitting on. */
.tv-kindstats { padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 0 2.4rem; }
.tv-kindstats > h2 {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 0.7rem;
}
.tv-kindnote {
  max-width: 68ch; margin-bottom: 1.3rem;
  font-size: 0.86rem; line-height: 1.7; color: var(--ink-dim);
}
.tv-kindgrp + .tv-kindgrp { margin-top: 1.4rem; }
.tv-kindgrp h3 { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.tv-kindgrp h3 span {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--a);
}
.tv-kindgrp h3 i { flex: 1; height: 1px; background: var(--line); }
.tv-kindgrp h3 em {
  font-style: normal; font-family: var(--mono); font-size: 0.52rem;
  letter-spacing: 0.12em; color: var(--mute); text-align: right;
}
.tv-kindgrp ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* one pill. In the tally it carries a count; on a trip it is the label alone,
   which is why <b> is styled rather than assumed to be there. */
.tv-kind {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.26rem 0.6rem 0.28rem; border-radius: 999px;
  font-size: 0.74rem; letter-spacing: -0.01em;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink-dim);
}
.tv-kind b {
  font-family: var(--mono); font-weight: 500; font-size: 0.78rem; line-height: 1;
}
.tv-kindgrp .tv-kind--cont { border-color: rgba(127,184,232,.34); background: rgba(127,184,232,.09); }
.tv-kindgrp .tv-kind--cont b { color: #9fcbf0; }
.tv-kindgrp .tv-kind--cult { border-color: rgba(232,197,106,.34); background: rgba(232,197,106,.09); }
.tv-kindgrp .tv-kind--cult b { color: #e8c56a; }
.tv-kindgrp .tv-kind--reg  { border-color: rgba(95,200,150,.3); background: rgba(95,200,150,.08); }
.tv-kindgrp .tv-kind--reg b { color: #6fd0a4; }

/* ───────── the badges on a trip ─────────
   A right-hand column between the words and the photo: the trip says where it
   went, this says what sort of place that is. Capped in width so it stays a
   column of two-or-three-per-line pills rather than eating the card, and it
   drops under the text on a narrow screen along with the photo. */
.tv-kinds {
  position: relative; list-style: none; flex: 0 1 auto;
  display: flex; flex-wrap: wrap; gap: 0.32rem;
  justify-content: flex-end; align-content: center;
  max-width: 15rem; margin-left: auto;
}
.tv-kinds .tv-kind {
  padding: 0.2rem 0.5rem 0.22rem; font-size: 0.66rem;
  border-color: color-mix(in srgb, var(--c1) 26%, transparent);
  background: color-mix(in srgb, var(--c1) 7%, transparent);
}
.tv-kinds .tv-kind--cont {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c1) 78%, #fff);
  border-color: color-mix(in srgb, var(--c1) 44%, transparent);
}
.tv-kinds .tv-kind--cult {
  color: #e6d5a2; border-color: rgba(216,198,138,.36); background: rgba(216,198,138,.11);
}
.tv-kinds .tv-kind--reg { color: var(--mute); }

@media (max-width: 900px) { .tv-kinds { max-width: 11rem; } }
@media (max-width: 620px) {
  .tv-kinds { max-width: none; justify-content: flex-start; margin-left: 0; }
}

/* ───────── the short version ─────────
   Words first, flag as a marker. Readable in ten seconds, and every row jumps
   to the full entry below. */
.tv-short { padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 0 2.4rem; }
.tv-short > h2 {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 1.2rem;
}
.tv-shortgrp { margin-bottom: 1.5rem; }
.tv-shortgrp h3 { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.4rem; }
.tv-shortgrp h3 span {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--a);
}
.tv-shortgrp h3 i { flex: 1; height: 1px; background: var(--line); }
.tv-shortgrp h3 em {
  font-style: normal; font-family: var(--mono); font-size: 0.52rem;
  letter-spacing: 0.12em; color: var(--mute);
}
.tv-shortgrp ul { list-style: none; }
/* A fixed grid, not a flex row. Trips carry between one and three flags, so a
   flowing layout pushed every place name to a different x -- the columns are
   pinned instead, and the flag cell is sized for the widest case. */
.tv-shortgrp a {
  display: grid; align-items: center; gap: 0 0.7rem;
  grid-template-columns: 3.6rem 2.2rem minmax(0, 1fr) auto;
  padding: 0.34rem 0.5rem; border-radius: 4px; text-decoration: none;
  border-left: 2px solid transparent; transition: background .13s ease, border-color .13s ease;
}
.tv-shortgrp a:hover { background: rgba(255,255,255,.045); border-left-color: var(--c); }
.tv-s-flag { font-size: 0.9rem; line-height: 1; letter-spacing: -0.06em; white-space: nowrap; }
.tv-s-when { font-family: var(--mono); font-size: 0.55rem; color: var(--mute); }
.tv-s-place { font-size: 0.92rem; color: var(--ink); }
.tv-s-tag, .tv-s-via { justify-self: end; }
@media (max-width: 560px) {
  .tv-shortgrp a { grid-template-columns: 3.2rem 2rem minmax(0, 1fr); }
  .tv-s-tag, .tv-s-via { grid-column: 3; justify-self: start; }
}
.tv-s-tag {
  font-family: var(--mono); font-size: 0.46rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.12rem 0.36rem; border-radius: 2px; color: #e6d5a2;
  background: rgba(216,198,138,.14); border: 1px solid rgba(216,198,138,.3);
}
.tv-s-via { font-family: var(--mono); font-size: 0.5rem; color: var(--mute); opacity: .75; }

/* ───────── grade headers in the long list ───────── */
.tv-grade {
  padding: 0 var(--gutter); max-width: var(--maxw); margin: 2rem 0 0.8rem;
}
.tv-gradehead {
  display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line);
}
.tv-gradehead h2 {
  font-family: var(--sans); font-weight: 650; font-size: clamp(1.1rem, 2.6vw, 1.4rem); color: var(--ink);
}
.tv-gradehead span {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute);
}

/* ───────── one section per trip ─────────
   Each carries its own two colours through --c1/--c2, and a data-look that
   picks which shapes get drawn behind it. One set of rules, eighteen looks. */
.tv-trip {
  position: relative; overflow: hidden;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) var(--gutter);
  margin: 0 0 0.6rem; max-width: var(--maxw);
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(155deg, var(--c2), #06070a 78%);
}
.tv-trip-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.tv-trip-bg i { position: absolute; display: block; }
.tv-trip-in { position: relative; max-width: 62ch; }
.tv-trip-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.tv-trip-flags { letter-spacing: -0.06em; white-space: nowrap; }
.tv-trip-flags { font-size: 1.15rem; line-height: 1; }
.tv-trip-when {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mute);
}
.tv-trip-tag {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.18rem 0.45rem; border-radius: 2px; color: #e6d5a2;
  background: rgba(216,198,138,.14); border: 1px solid rgba(216,198,138,.34);
}
/* ── road trips ──
   A drive is a trip like any other and sits in the same school-year timeline,
   so it needs one mark rather than a section of its own: the chip is the road
   itself, in asphalt grey with a dashed centre line, so it never reads as a
   second gold badge competing with Umrah. Set `road: true` on the trip. */
.tv-trip-tag--rd {
  display: inline-flex; align-items: center; gap: 0.32rem;
  color: #cfd6dd; background: rgba(200,212,224,.10); border-color: rgba(200,212,224,.30);
}
.tv-trip-tag--rd svg {
  width: 11px; height: 11px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tv-s-tag--rd {
  color: #cfd6dd; background: rgba(200,212,224,.10); border-color: rgba(200,212,224,.28);
}
.tv-trip h3 {
  font-family: var(--sans); font-weight: 650; font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--c1); line-height: 1.25;
}
.tv-trip-c {
  margin-top: 0.2rem; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.06em; color: var(--ink-dim);
}
.tv-trip-c em { font-style: normal; color: var(--mute); opacity: .8; margin-left: 0.6rem; }
.tv-trip-n { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.65; color: var(--ink-dim); }

/* ── the places themselves ──
   One chip per landmark that is actually in this trip's photographs. Wraps as
   a set rather than a list, so a nine-place trip stays two or three lines. */
.tv-spots {
  display: flex; flex-wrap: wrap; gap: 0.36rem;
  margin-top: 0.75rem; padding: 0; list-style: none;
}
.tv-spots li {
  display: inline-flex; align-items: baseline; gap: 0.36rem;
  padding: 0.26rem 0.55rem 0.28rem;
  border: 1px solid color-mix(in srgb, var(--c1) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c1) 9%, transparent);
}
.tv-spots b {
  font-weight: 500; font-size: 0.72rem; letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--c1) 82%, #fff);
}
.tv-spots i {
  font-style: normal; font-family: var(--mono); font-size: 0.52rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
}
.tv-trip-grade {
  position: absolute; right: var(--gutter); bottom: 0.8rem;
  font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.12em;
  color: var(--mute); opacity: .5;
}

/* the eighteen backdrops, all built from the trip's own two colours */
[data-look="coast"]  .tv-trip-bg i:nth-child(1) { inset: auto 0 0 0; height: 42%; background: radial-gradient(80% 100% at 50% 100%, var(--c1), transparent 70%); opacity: .3; }
[data-look="coast"]  .tv-trip-bg i:nth-child(2) { right: 8%; top: 14%; width: 90px; height: 90px; border-radius: 50%; background: var(--c1); opacity: .18; }
[data-look="reef"]   .tv-trip-bg i:nth-child(1) { inset: 0; background: repeating-linear-gradient(115deg, transparent 0 26px, color-mix(in srgb, var(--c1) 12%, transparent) 26px 28px); }
[data-look="dome"]   .tv-trip-bg i:nth-child(1) { right: 6%; bottom: -14%; width: 190px; height: 190px; border-radius: 50% 50% 0 0; background: var(--c1); opacity: .16; }
[data-look="dome"]   .tv-trip-bg i:nth-child(2) { right: 15%; bottom: 44%; width: 5px; height: 74px; background: var(--c1); opacity: .3; }
[data-look="arches"] .tv-trip-bg i:nth-child(1) { right: 4%; bottom: 0; width: 260px; height: 60%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c1) 22%, transparent) 0 4px, transparent 4px 52px); mask-image: radial-gradient(60% 100% at 50% 100%, #000 60%, transparent); }
[data-look="desert"] .tv-trip-bg i:nth-child(1) { inset: auto 0 0 0; height: 46%; background: radial-gradient(120% 100% at 30% 100%, var(--c1), transparent 62%); opacity: .26; }
[data-look="canyon"] .tv-trip-bg i:nth-child(1) { right: 0; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--c1) 26%, transparent)); clip-path: polygon(40% 0, 100% 0, 100% 100%, 8% 100%); }
[data-look="haram"]  .tv-trip-bg i:nth-child(1) { right: 8%; top: 50%; translate: 0 -50%; width: 150px; height: 150px; border: 1px solid var(--c1); border-radius: 50%; opacity: .3; }
[data-look="haram"]  .tv-trip-bg i:nth-child(2) { right: 8%; top: 50%; translate: 0 -50%; width: 100px; height: 100px; border: 1px solid var(--c1); border-radius: 50%; opacity: .22; }
[data-look="haram"]  .tv-trip-bg i:nth-child(3) { right: 12.4%; top: 50%; translate: 0 -50%; width: 58px; height: 58px; background: var(--c2); border: 1px solid var(--c1); opacity: .5; }
[data-look="skyline"] .tv-trip-bg i:nth-child(1) { inset: auto 0 0 0; height: 34%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c1) 24%, transparent) 0 18px, transparent 18px 30px); mask-image: linear-gradient(transparent, #000); }
[data-look="tiles"]  .tv-trip-bg i:nth-child(1) { inset: 0; background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c1) 16%, transparent) 3px, transparent 4px); background-size: 34px 34px; }
[data-look="ruins"]  .tv-trip-bg i:nth-child(1) { right: 5%; bottom: 0; width: 220px; height: 55%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c1) 20%, transparent) 0 10px, transparent 10px 46px); }
[data-look="medina"] .tv-trip-bg i:nth-child(1) { inset: 0; background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c1) 9%, transparent) 0 2px, transparent 2px 18px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c1) 9%, transparent) 0 2px, transparent 2px 18px); }
[data-look="limestone"] .tv-trip-bg i:nth-child(1) { inset: 0; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--c1) 10%, transparent) 0 1px, transparent 1px 22px); }
[data-look="mountains"] .tv-trip-bg i:nth-child(1) { inset: auto 0 0 0; height: 44%; background: var(--c1); opacity: .2; clip-path: polygon(0 100%, 14% 34%, 28% 76%, 46% 20%, 62% 66%, 78% 30%, 100% 82%, 100% 100%); }
[data-look="volcano"] .tv-trip-bg i:nth-child(1) { inset: auto 0 0 0; height: 50%; background: var(--c1); opacity: .18; clip-path: polygon(0 100%, 40% 12%, 60% 12%, 100% 100%); }
[data-look="andes"]  .tv-trip-bg i:nth-child(1) { inset: auto 0 0 0; height: 46%; background: var(--c1); opacity: .16; clip-path: polygon(0 100%, 22% 22%, 44% 70%, 66% 8%, 88% 60%, 100% 40%, 100% 100%); }
[data-look="cliffs"] .tv-trip-bg i:nth-child(1) { inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 30%, transparent), transparent); clip-path: polygon(0 30%, 30% 0, 62% 22%, 100% 6%, 100% 100%, 0 100%); }
/* a road running away from you: the verge, the asphalt and a dashed centre
   line, all built from the trip's own colour like every other look here */
[data-look="road"]  .tv-trip-bg i:nth-child(1) { inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, color-mix(in srgb, var(--c1) 22%, transparent), transparent); clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); }
[data-look="road"]  .tv-trip-bg i:nth-child(2) { inset: auto 0 0 0; height: 40%; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--c1) 46%, transparent) 0 8px, transparent 8px 22px); clip-path: polygon(49.5% 0, 50.5% 0, 53.4% 100%, 46.6% 100%); }
[data-look="road"]  .tv-trip-bg i:nth-child(3) { right: 8%; top: 16%; width: 84px; height: 84px; border-radius: 50%; background: var(--c1); opacity: .14; }
[data-look="torii"]  .tv-trip-bg i:nth-child(1) { right: 9%; bottom: 12%; width: 150px; height: 10px; background: var(--c1); opacity: .3; }
[data-look="torii"]  .tv-trip-bg i:nth-child(2) { right: 13%; bottom: 12%; width: 9px; height: 110px; background: var(--c1); opacity: .3; }
[data-look="torii"]  .tv-trip-bg i:nth-child(3) { right: 30%; bottom: 12%; width: 9px; height: 110px; background: var(--c1); opacity: .3; }

/* Photos, for when they get added. Nothing renders until a trip has a `shots`
   array, so this sits dormant rather than leaving an empty frame. */
/* ── trip photos ──
   The bar holds its words on the left and one main photo on the right; the
   photo unfolds the full grid underneath: the same justified rows as the year
   galleries (.yg and .yg-cell arrive with years.css, along with the
   full-screen yg-deck). */
.tv-trip-row { position: relative; display: flex; align-items: center; gap: 1.4rem; justify-content: space-between; }

.tv-photo {
  flex: 0 0 auto; position: relative; padding: 0; cursor: pointer;
  width: clamp(120px, 15vw, 180px); aspect-ratio: 1;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--c2);
  transition: border-color .18s ease, transform .18s ease;
}
.tv-photo:hover { border-color: color-mix(in srgb, var(--c1) 55%, transparent); transform: translateY(-2px); }
.tv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s; }
.tv-photo-n {
  position: absolute; right: 0.45rem; bottom: 0.45rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: #fff; background: rgba(5, 6, 9, 0.72);
  padding: 0.12rem 0.42rem; border-radius: 99px; border: 1px solid var(--line);
}

.tv-shots { --yg-gap: 10px; position: relative; margin-top: 1.2rem; }
/* .yg's display:flex beats the UA sheet's [hidden] rule, so restate it:
   folded means gone */
.tv-shots[hidden] { display: none; }

@media (max-width: 620px) {
  .tv-trip-row { flex-direction: column; align-items: stretch; gap: 1rem; }
  .tv-photo { width: 100%; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) { .tv-photo:hover { transform: none; } }

/* ── selection ──
   Cards are real controls: clickable, focusable, Enter/Space. Picking one dims
   the rest so a single entry can be read on its own; picking it again clears. */
.tv-trip { cursor: pointer; transition: border-color .18s ease, opacity .25s ease, transform .18s ease; }
.tv-trip:hover { border-color: color-mix(in srgb, var(--c1) 45%, transparent); }
.tv-trip:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.is-picking .tv-trip { opacity: .32; }
.is-picking .tv-trip.is-sel {
  opacity: 1;
  border-color: var(--c1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 40%, transparent),
              0 18px 40px -26px var(--c1);
}
.is-picking .tv-trip.is-sel .tv-trip-bg { opacity: .85; }
.is-picking .tv-grade { opacity: .4; }
.tv-shortgrp a.is-sel {
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border-left-color: var(--c);
}
@media (prefers-reduced-motion: reduce) { .tv-trip { transition: none; } }

/* ───────── the map ─────────
   A dot-matrix world drawn by travels-map.js: land in grey-blue, the US in its
   own warm tone, visited countries in the accent, pins in each trip's colour,
   and flight arcs redrawing themselves from Southern California. */
.tv-map { padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 0 2.6rem; }
.tv-map > h2 {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 1.2rem;
}
.tvm-frame {
  position: relative;
  border: 1px solid var(--line); border-radius: 10px; overflow-x: auto;
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(127,184,232,.06), transparent 60%),
    linear-gradient(170deg, #0a1119, #06090d 80%);
}
.tvm-frame svg { display: block; width: 100%; min-width: 720px; height: auto; }
/* Below ~720px the map is wider than the screen and scrolls inside its own
   frame, which is invisible unless you say so. */
.tvm-swipe { display: none; }
@media (max-width: 760px) {
  .tvm-swipe {
    display: block; margin-top: 0.5rem;
    font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--mute);
  }
}

/* named parallels: the equator earns its label, the rest sit back */
.tvm-par line { stroke: #7fb8e8; stroke-width: 1; opacity: .1; }
.tvm-par text {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.14em;
  text-transform: uppercase; fill: #7fb8e8; opacity: .3;
  /* knocked out of the dots behind it, or Alaska eats the Arctic Circle */
  paint-order: stroke; stroke: #070c12; stroke-width: 2.5px; stroke-linejoin: round;
}
.tvm-par--eq line { opacity: .22; }
.tvm-par--eq text { opacity: .5; }
.tvm-par--trop line { stroke-dasharray: 3 6; }
.tvm-par--pm line { stroke-dasharray: 2 7; opacity: .12; }

/* dots: one path per class, zero-length segments with round caps */
.tvm-land, .tvm-us, .tvm-vis { fill: none; stroke-linecap: round; }
.tvm-land { stroke: #3d5468; stroke-width: 2.1; opacity: .5; }
.tvm-us   { stroke: #c8a878; stroke-width: 2.3; opacity: .8; }
.tvm-vis  { stroke: #8fc4ee; stroke-width: 2.6; opacity: .95;
  filter: drop-shadow(0 0 3px rgba(127,184,232,.7)); }

/* flight arcs: normalized with pathLength=1 so one dash rule fits them all */
.tvm-arcs path {
  fill: none; stroke: var(--pc); stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pc) 70%, transparent));
  animation: tvm-fly 15s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.79s);
}
@keyframes tvm-fly {
  0%        { stroke-dashoffset: 1; opacity: 0; }
  5%        { opacity: .8; }
  32%       { stroke-dashoffset: 0; opacity: .8; }
  50%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* pins. The hit circle is the pointer target: the visible dot is 3px across,
   which is nowhere near a comfortable click, let alone a thumb. */
.tvm-pins .tvm-pin { cursor: pointer; }
.tvm-hit { fill: transparent; }
.tvm-lay .tvm-hit { display: none; }
.tvm-pin .tvm-dot, .tvm-home .tvm-dot {
  fill: var(--pc, #dfe9f2);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pc, #dfe9f2) 85%, transparent));
}
.tvm-pin .tvm-halo, .tvm-home .tvm-halo {
  fill: none; stroke: var(--pc, #dfe9f2); stroke-width: 1; opacity: .4;
  animation: tvm-pulse 3.2s ease-in-out infinite alternate;
}
.tvm-pins .tvm-pin:nth-child(even) .tvm-halo { animation-delay: -1.6s; }
@keyframes tvm-pulse { from { opacity: .12; } to { opacity: .55; } }
.tvm-pin text, .tvm-home text {
  font-family: var(--mono); font-size: 9.5px; fill: #d8e8f5;
  paint-order: stroke; stroke: #06090d; stroke-width: 3px; stroke-linejoin: round;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.tvm-pin:hover text, .tvm-pin.is-hot text { opacity: 1; }
.tvm-home text { opacity: .55; font-size: 8.5px; }
.tvm-home .tvm-dot { --pc: #ffd9a0; }
.tvm-home .tvm-halo { --pc: #ffd9a0; animation-duration: 2.2s; }

/* layovers: barely there, on purpose */
.tvm-pin--lay .tvm-dot { r: 1.8; opacity: .5; filter: none; }
.tvm-pin--lay .tvm-halo { display: none; }
.tvm-pin--lay text { font-size: 8px; }
.tvm-pin--lay:hover text { opacity: .8; }

/* what the four dot colours mean, before the country list */
.tvm-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 0.9rem; }
.tvm-k {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute);
}
.tvm-k::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.tvm-k--vis::before { background: #8fc4ee; box-shadow: 0 0 5px rgba(143,196,238,.8); }
.tvm-k--us::before { background: #c8a878; box-shadow: 0 0 5px rgba(200,168,120,.7); }
.tvm-k--lay::before { background: #9fb6c8; opacity: .5; width: 5px; height: 5px; }
.tvm-k--land::before { background: #3d5468; }

/* legend chips light up their pin; everything else steps back */
.tvm-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.tvm-legend button {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; border-radius: 999px; color: var(--ink-dim);
  background: transparent; border: 1px solid var(--line);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.tvm-legend button i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pc);
  box-shadow: 0 0 5px color-mix(in srgb, var(--pc) 70%, transparent);
}
/* the flag: the chip's mono type is 0.5rem, which renders an emoji as a
   speck; give it its own size and keep it from stretching the row */
.tvm-flag { font-size: 0.85rem; line-height: 1; }
.tvm-legend button:hover, .tvm-legend button.is-hot {
  border-color: var(--pc); color: var(--ink);
  background: color-mix(in srgb, var(--pc) 10%, transparent);
}
.is-heating .tvm-pins .tvm-pin:not(.is-hot),
.is-heating .tvm-lay .tvm-pin:not(.is-hot) { opacity: .18; }
/* `animation: none`, not paused: a paused animation keeps applying whatever
   opacity the flight was at mid-air, which is why the other routes used to
   stay faintly on screen while one country was selected. */
.is-heating .tvm-arcs path:not(.is-hot) { animation: none; opacity: 0; }
.is-heating .tvm-arcs path.is-hot {
  animation: none; stroke-dashoffset: 0; opacity: .9; stroke-width: 1.5;
}
.tvm-pin, .tvm-arcs path { transition: opacity .2s ease; }

.tvm-note {
  margin-top: 0.9rem; max-width: 62ch;
  font-size: 0.8rem; line-height: 1.65; color: var(--mute);
}

@media (prefers-reduced-motion: reduce) {
  .tvm-arcs path { animation: none; stroke-dashoffset: 0; opacity: .3; }
  .tvm-pin .tvm-halo, .tvm-home .tvm-halo { animation: none; }
}