/* Cache Me If You Can: figures on top of the Every Map article styles. */
.frontier-hero { max-width: 1120px; margin: 18px auto 0; padding: 0 20px; }
.frontier-hero figcaption { max-width: 820px; margin: 10px auto 0; text-align: center; font-family: var(--sans); font-size: 14.5px; color: var(--soft); }
#hero-cap b { color: var(--ink); font-weight: 500; }
.replay { font: inherit; font-size: 13.5px; margin-left: 10px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--wash); color: var(--ink); cursor: pointer; }
.replay:hover { background: #eaeaee; }

.chart text { font-family: var(--sans); }
.ax line, .ax path { stroke: #d4d4d8; }
.ax text { fill: var(--soft); font-size: 12px; }
.ax .lab { fill: #3a3b40; font-size: 13px; }
.grid line { stroke: #f0f0f2; }

/* hero dots appear with a small pop */
@keyframes pop { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.5); opacity: 1; } to { transform: scale(1); opacity: 1; } }
.run { transform-box: fill-box; transform-origin: center; animation: pop .55s cubic-bezier(.2, .7, .2, 1) both; }
.run-label { font-size: 12.5px; fill: #2a2a2e; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.run-label.dim { fill: var(--faint); font-size: 11.5px; }
.shoal { transition: d .5s ease; }
.front { transition: d .5s ease; }

.legend-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 6px; font-family: var(--sans); font-size: 13px; color: var(--soft); }
.legend-row i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend-row i.x { border-radius: 0; background: none !important; position: relative; }
.legend-row i.x::before, .legend-row i.x::after { content: ""; position: absolute; left: 4px; top: -1px; width: 1.6px; height: 12px; background: #b9b9bf; transform: rotate(45deg); }
.legend-row i.x::after { transform: rotate(-45deg); }
.legend-row i.h { background: #fff !important; box-shadow: inset 0 0 0 1.6px #8fa6e2; }

/* figure 1: the family tree and the plan space */
.family { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.family canvas { display: block; width: 100%; height: auto; background: #fbfaf7; border-radius: 6px; }
.fig-title { font-family: var(--sans); font-size: 15px; font-weight: 500; margin: 0 0 10px !important; color: var(--ink); }
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--wash); border: 1px solid var(--rule); }
.seg-label { padding: 0 8px 0 10px; color: var(--soft); white-space: nowrap; }
.controls .seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 999px; }
.controls .seg button.on { background: #fff; box-shadow: 0 0 0 1px var(--rule); color: var(--blue); }
#space-status { font-family: var(--sans); font-size: 14px; margin: 8px 0 0; }
#space-status b { color: var(--ink); font-weight: 500; }
.controls { flex-wrap: wrap; }

table.lineage td:nth-child(2) { text-align: left; color: #333; }
table.lineage th:nth-child(2) { text-align: left; }

.draft-pill { position: fixed; left: 16px; bottom: 16px; z-index: 30; font-family: var(--sans); font-size: 12.5px; color: #fff;
  background: rgba(27, 27, 29, .82); padding: 6px 12px; border-radius: 999px; pointer-events: none; }

@media (max-width: 760px) { .family { grid-template-columns: 1fr; } }

/* ?still: a static layout for screenshots (no splash hold, no load animation) */
body.shot .opening { height: auto; }
body.shot .opening .hold { position: static; min-height: 0; }
body.shot .opening .giant, body.shot .opening .dek, body.shot .opening .byline, body.shot .opening .hero, body.shot .page { animation: none; }

/* round 2: the tree hero, the race, the fish and the room */
.tree-hero { max-width: 1160px; margin: 22px auto 0; padding: 0 20px; }
.tree-hero canvas { display: block; width: 100%; height: auto; }
.tree-hero figcaption { max-width: 760px; margin: 12px auto 0; text-align: center; font-family: var(--sans); font-size: 15px; color: var(--soft); min-height: 1.5em; }
#hero-cap b { color: var(--ink); font-weight: 500; }
canvas.space { display: block; width: 100%; height: auto; background: #fbfaf7; border-radius: 6px; }
#race text, #fish text, #room text { font-family: var(--sans); }
.fish { cursor: pointer; transition: transform .2s; outline: none; }
.fish-tip { position: absolute; transform: translate(-50%, calc(-100% - 22px)); background: #1b1b1d; color: #fff; font-family: var(--sans); font-size: 13px;
  line-height: 1.4; padding: 7px 10px; border-radius: 6px; max-width: 240px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.fish-tip.on { opacity: 1; }
.fish-tip span { color: #b9b9bf; }
.fish-tip span.ok { color: #9fb6f0; }
#fish-tally { margin: 0 0 6px; }
.tree-hero canvas {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}

/* short post: still image hero and coloured version names in its caption */
/* title sits high instead of centred in the splash */
.opening .hold { justify-content: flex-start; padding-top: 64px; }
.opening .giant { margin-bottom: 18px; }
.opening .dek { margin-bottom: 18px; }
.opening .hero { margin-top: 20px; }
.opening .hero { max-width: min(1240px, calc((100vh - 360px) * 2.25)); }
.opening .hero img { display: block; width: 100%; height: auto; }
.hero .k { font-weight: 500; }
.hero .k.s2 { color: #2d55c4; }
.hero .k.s3 { color: #3f8778; }
.chart text.halo { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }

/* the opening scrolls like the rest of the page instead of pinning in place, so no blank stretch under the map */
.opening { height: auto; }
.opening .hold { position: static; min-height: 0; }