.hero { display: grid; gap: var(--s6); align-items: center; padding-top: var(--s4); }
@media (min-width: 860px) { .hero { grid-template-columns: 1.1fr .9fr; gap: var(--s7); } }

.where h1 { margin-bottom: var(--s3); }
.where .stamp-line { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-bottom: var(--s5); color: var(--ink-soft); font-size: .9375rem; }
.where .next-up { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); max-width: 46ch; }
.where .next-up strong { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; }
.override-note { display: inline-block; margin-top: var(--s3); font-size: .8125rem; color: #7a5d1c; border: 1px solid var(--gold-soft); border-radius: 999px; padding: 2px var(--s3); }

.map-frame { position: relative; justify-self: center; width: 100%; max-width: 380px; border: 1px solid var(--gold); padding: 10px; background: var(--paper-light); box-shadow: 0 1px 0 rgba(179,139,52,.35), 0 18px 40px -22px rgba(29,41,38,.45); }
.map-frame::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--gold-soft); pointer-events: none; }
.map-frame::after { content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; background: var(--gold); transform: translateX(-50%) rotate(45deg); }
.ink-map { display: block; width: 100%; height: auto; }

.ink-map .land { stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.ink-map .sea path { stroke: var(--jade-mist); stroke-width: 1.6; stroke-linecap: round; opacity: .9; }
.ink-map .hills path { stroke: var(--jade); stroke-width: 1.5; opacity: .45; stroke-linecap: round; stroke-linejoin: round; }
.ink-map .route { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.ink-map .route.done { stroke: var(--jade-deep); stroke-width: 3.2; stroke-dasharray: none; }

.ink-map a { cursor: pointer; }
.ink-map .stop .hit { fill: transparent; }
.ink-map .stop .dot { fill: var(--paper-light); stroke: var(--ink); stroke-width: 2; transition: fill .2s; }
.ink-map .stop.visited .dot { fill: var(--jade); stroke: var(--jade-deep); }
.ink-map .stop.here .dot { fill: var(--lotus); stroke: var(--lotus-deep); }
.ink-map .stop text { font-family: var(--font-display); font-weight: 700; font-size: 20px; fill: var(--ink); paint-order: stroke; stroke: var(--paper-light); stroke-width: 4px; stroke-linejoin: round; }
.ink-map .stop:hover text, .ink-map .stop:focus-visible text { fill: var(--lotus-deep); }
.ink-map .stop:hover .dot { fill: var(--lotus-wash); }
.ink-map .badge rect { fill: var(--paper-light); stroke: var(--gold); stroke-width: 1.2; }
.ink-map .badge text { font-family: var(--font-display); font-weight: 700; font-size: 16px; fill: var(--ink-soft); }
.ink-map .badge.here rect { fill: var(--lotus-wash); stroke: var(--lotus-deep); }
.ink-map .badge.here text { fill: var(--lotus-deep); }

.ink-map .marker .pin { fill: var(--lotus-deep); stroke: var(--paper-light); stroke-width: 1.5; }
.ink-map .marker .pulse { fill: var(--lotus); opacity: .35; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.5); opacity: .55; } 80%, 100% { transform: scale(2.1); opacity: 0; } }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s7); }
@media (min-width: 760px) { .timeline { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(9, auto); } }
.timeline li { position: relative; padding: var(--s3) 0 var(--s3) var(--s6); border-bottom: 1px solid var(--line); }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline li::after { content: ""; position: absolute; left: 1px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-soft); }
.timeline li.past::before { background: var(--jade); }
.timeline li.past::after { background: var(--jade); border-color: var(--jade-deep); }
.timeline li.today::after { background: var(--lotus); border-color: var(--lotus-deep); box-shadow: 0 0 0 5px var(--lotus-wash); }
.timeline li.today { background: linear-gradient(90deg, var(--lotus-wash), transparent 70%); }
.timeline .when { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; font-size: .8125rem; color: var(--ink-soft); }
.timeline .where-label { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.timeline .where-label a { text-decoration: none; color: inherit; }
.timeline .where-label a:hover { color: var(--lotus-deep); }
.timeline .posts { font-size: .8125rem; color: var(--lotus-deep); font-weight: 500; }