@property --lit { syntax: "<number>"; inherits: false; initial-value: 0; }

/* The travel map closes Off the clock: a part like "In their words", with the map read like the sign.
   Every colour is a page token, so the map turns with the evening. atlas.js sets --k, a chart's viewBox width over its drawn width,
   and lettering, strokes and marks are multiplied by it so they keep one size on screen at any width */
.places { margin: 3.6rem 0 0; max-width: var(--figure); }
.places h3 { margin-bottom: 0.6rem; }
.atlas { --k: 1; --lit-blue: color-mix(in oklab, var(--blue), var(--ink) calc(55% - 25% * var(--night))); container-type: inline-size; margin: 1.8rem 0 0; }
.atlas__home { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 1.8rem; align-items: end; }
/* the charts are prints, framed by one hairline like the photographs */
.atlas__print { position: relative; border: 1px solid var(--hairline); contain: layout paint; }
/* the lettering repeats the lists, so copying the part leaves it out */
.atlas__chart { display: block; width: 100%; height: auto; font-family: var(--font); -webkit-user-select: none; user-select: none; }
/* the route and its lights sit on a layer of their own over the plan, so drawing them never repaints the coast */
.atlas__over { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
/* the map is never mirrored: its labels keep the anchors they were placed by */
.atlas svg { direction: ltr; }
.atlas__over [data-c] { pointer-events: visiblePainted; }
.atlas__world { margin-top: 1.4rem; }

/* the names, set like the sign: the places I have been are lit, the ones I hope for wait unlit until light reaches them */
.atlas__names { font-family: var(--font); font-weight: 700; font-size: 1.3rem; line-height: 1.32; font-variation-settings: "wdth" 88; letter-spacing: -0.01em; text-wrap: pretty; }
.atlas__names.is-someday { margin-top: 1rem; }
.atlas__lead { margin-inline-end: 0.3em; font-size: 0.95rem; font-weight: 500; font-variation-settings: "wdth" 85; letter-spacing: 0; color: var(--ink-2); }
.atlas__names button { all: unset; --lit: var(--near, 0); padding-block: 0.3rem; cursor: pointer; text-decoration: underline 2px transparent; text-underline-offset: 0.22em; transition: --lit 450ms ease-out, color 250ms ease, text-decoration-color 250ms ease; }
.atlas__names button::after { content: ","; content: "," / ""; color: color-mix(in oklab, var(--ink) 40%, transparent); }
.atlas__names button:lang(ar)::after { content: "،"; content: "،" / ""; }
.atlas__names button:last-child::after { content: "."; content: "." / ""; }
.atlas__names.is-been button { color: var(--ink); }
.atlas__names.is-been button::after { color: color-mix(in oklab, var(--accent), var(--ink) 22%); }
.atlas__names.is-been button:is(.is-focus, [aria-pressed="true"]) { text-decoration-color: color-mix(in oklab, var(--accent), var(--ink) 22%); }
.atlas__names.is-someday button { color: color-mix(in oklab, color-mix(in oklab, var(--ink), var(--blue) calc(var(--lit) * 16%)) calc((50 + 50 * var(--lit)) * 1%), transparent); }
.atlas__names.is-someday button:is(.is-focus, [aria-pressed="true"]) { --lit: 1; }
.atlas__names.is-someday button[aria-pressed="true"] { text-decoration-color: var(--lit-blue); }
.atlas__names button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* the drawing: sea, rings of water on the coarse coast, land, borders, then the places */
.atlas .sea { fill: var(--surface); }
.atlas :is(.wl, .wl-cut) { fill: none; stroke-linejoin: round; }
.atlas .wl-cut { stroke: var(--surface); }
.atlas .wl1 { stroke: color-mix(in oklab, var(--ink) 20%, var(--surface)); }
.atlas .wl2 { stroke: color-mix(in oklab, var(--ink) 13%, var(--surface)); }
.atlas .wl3 { stroke: color-mix(in oklab, var(--ink) 8%, var(--surface)); }
.atlas .land { fill: color-mix(in oklab, var(--ink) 8%, var(--surface)); }
.atlas .coast { fill: none; stroke: color-mix(in oklab, var(--ink) 44%, var(--surface)); stroke-width: calc(0.9px * var(--k)); stroke-linejoin: round; }
.atlas .borders path { fill: none; stroke: color-mix(in oklab, var(--ink) 17%, var(--surface)); stroke-width: calc(0.45px * var(--k)); }
/* lit as the sign's words are, with more ink, warmed a little; a thin orange over the night sea only ever reads as brown */
.atlas .been-c { fill: color-mix(in oklab, color-mix(in oklab, var(--ink), var(--accent) 25%) 16%, var(--surface)); stroke: var(--accent); stroke-width: calc(0.8px * var(--k)); stroke-linejoin: round; }
.atlas .someday-c, .atlas .borders .someday-c { fill: color-mix(in oklab, var(--ink) 4%, transparent); stroke: color-mix(in oklab, var(--ink) 40%, transparent); stroke-width: calc(0.8px * var(--k)); stroke-dasharray: calc(1.2px * var(--k)) calc(1.9px * var(--k)); }
.atlas .someday-c.is-focus, .atlas .borders .someday-c.is-focus { fill: color-mix(in oklab, var(--blue) 24%, transparent); stroke: var(--blue); }

/* the route north and the short trips, in the lamps' orange; without the script they stand drawn */
.atlas .route { fill: none; stroke: var(--accent); stroke-width: calc(1.6px * var(--k)); stroke-linecap: round; stroke-dasharray: 1; }
.atlas .hop { stroke-width: calc(1.2px * var(--k)); }
.atlas .home-small { stroke-dasharray: none; stroke-width: calc(1.2px * var(--k)); }
.atlas :is(.lamp, .glow, .mark, .rider) { transform-box: fill-box; transform-origin: center; transform: scale(var(--k)); }
.atlas :is(.lamp, .glow) { --on: 1; --dim: 1; }
.atlas .lamp { fill: color-mix(in oklab, var(--accent), var(--night-ink) calc(var(--night) * 60%)); opacity: calc(var(--on) * var(--dim)); }
.atlas .glow { fill: var(--accent); opacity: calc(var(--on) * var(--dim) * (0.12 + 0.16 * var(--night))); }
.atlas .rider { fill: color-mix(in oklab, var(--accent), var(--night-ink) 70%); opacity: 0; }

/* the hoped-for places: an unlit ring and a faint route each; pointing at one, or at its name, lights both */
.atlas .mark { --lit: var(--near, 0); fill: var(--surface); stroke: color-mix(in oklab, color-mix(in oklab, var(--ink), var(--blue) calc(var(--lit) * 40%)) calc((50 + 50 * var(--lit)) * 1%), transparent); stroke-width: 1.1; }
.atlas .mark.is-focus { --lit: 1; fill: color-mix(in oklab, var(--blue) 35%, var(--surface)); }
.atlas .hoped { fill: none; stroke: var(--blue); stroke-width: calc(1px * var(--k)); stroke-dasharray: calc(3px * var(--k)) calc(3.4px * var(--k)); opacity: 0.32; pointer-events: none; }
.atlas .hoped.is-focus { opacity: 1; stroke-width: calc(1.6px * var(--k)); }
.atlas .footprint { fill: none; stroke: color-mix(in oklab, var(--accent) 70%, transparent); stroke-width: calc(0.8px * var(--k)); }

/* lettering in the captions' type, each label in a halo of sea; the world names only the place that is lit */
.atlas .lbl { font-size: calc(12px * var(--k)); font-weight: 600; font-variation-settings: "wdth" 85; transform: translate(calc(var(--dx, 0) * var(--k) * 1px), calc(var(--dy, 0) * var(--k) * 1px)); paint-order: stroke; stroke: var(--surface); stroke-width: calc(3px * var(--k)); stroke-linejoin: round; }
.atlas .been-l { fill: var(--ink); }
.atlas .atlas__inset .someday-l { fill: var(--ink-2); font-weight: 500; }
.atlas .atlas__inset .someday-l.is-focus { fill: var(--lit-blue); }
.atlas .atlas__world .lbl { fill: var(--lit-blue); opacity: 0; pointer-events: none; }
.atlas .atlas__world .lbl.is-focus { opacity: 1; }
.atlas .water { font-family: var(--font-text); font-style: italic; font-size: calc(11.5px * var(--k)); letter-spacing: 0.06em; fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: calc(3px * var(--k)); stroke-linejoin: round; }

/* pointing at a name, a country or a route lights that one place on both charts, and the rest steps back */
.atlas .atlas__chart [data-c] { transition: opacity 250ms ease, fill 300ms ease, stroke 300ms ease, --lit 450ms ease-out; }
.atlas.has-focus .atlas__chart :is(.been-c, .route, .been-l)[data-c]:not(.is-focus) { opacity: 0.35; }
.atlas.has-focus .atlas__chart :is(.lamp, .glow)[data-c]:not(.is-focus) { --dim: 0.35; }
.atlas.has-focus .atlas__chart .hoped:not(.is-focus) { opacity: 0.12; }

/* arrival, only on a figure atlas.js has marked .is-arriving: the prints develop as they come into view like the photographs,
   and each light waits for the route that reaches it; without the script, or without motion, the map stands finished */
.atlas.is-arriving .atlas__print { transition: opacity 1400ms var(--ease-out); }
.atlas.is-arriving .atlas__print:not(.is-developed) { opacity: 0.45; }
.atlas.is-arriving .atlas__over :is(.lamp, .glow) { transition: opacity 600ms var(--ease-out); }
.atlas.is-arriving .atlas__over:not(.is-started) :is(.lamp, .glow)[data-c="MAR"] { --on: 0; }
.atlas.is-arriving .atlas__over:not(.is-landed) :is(.lamp, .glow)[data-c="CHE"] { --on: 0; }
.atlas.is-arriving .atlas__over:not(.is-hopped) :is(.lamp, .glow):is([data-c="FRA"], [data-c="DEU"], [data-c="ITA"]) { --on: 0; }
.atlas__over.is-riding .rider { opacity: 1; }

/* a narrow column: the plan takes the full width with the places I have been under it */
@container (max-width: 480px) {
  .atlas__home { grid-template-columns: minmax(0, 1fr); }
  .atlas__home .atlas__names { margin-top: 0.9rem; }
  .atlas__names { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas * { transition: none !important; animation-duration: 1ms !important; }
}