/* ============================================
   The Atlas — map + region cards
   v3b's geographic framing, rebuilt in the v2
   Apple system (black / white / single red accent).
   Loads after style.css and depends on its tokens.
   ============================================ */

.atlas {
    background: var(--black);
    color: var(--white);
    padding: 8rem 0;
    overflow: hidden;
}

.atlas .eyebrow { color: var(--gray-300); }
.atlas .display-large { color: var(--white); }
.atlas .lede { color: var(--gray-300); }

/* ============================================
   Map canvas
   ============================================ */

/* The plate is the clipped, rounded surface (background + map).
   The canvas around it is NOT clipped, so an edge pin's label can hang past
   the plate instead of being sliced off. Keep these two responsibilities
   separate or the labels clip again at narrow widths. */
/* This MUST equal the SVG viewBox aspect (1000 / 388.89) at every width.
   Pins are positioned as a % of THIS box, but the map is drawn by the SVG. If the two
   aspects disagree, preserveAspectRatio letterboxes the map inside the box and every pin
   drifts off its coastline (this was ~20px of error on mobile before it was caught).
   Do not "make the map taller" on small screens by changing this. */
.map-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 388.89;
    overflow: visible;
}

.map-plate {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background:
      radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,255,255,0.05) 0%, transparent 65%),
      radial-gradient(ellipse 50% 60% at 82% 55%, rgba(255,59,48,0.05) 0%, transparent 60%),
      var(--near-black);
    overflow: hidden;
    /* The 1px frame is an INSET SHADOW, not a border, on purpose. A real border insets the
       SVG (which is inset:0 inside this box) by 1px while the pins are positioned against
       .map-canvas — so every pin lands 1px off its coastline, which is the difference
       between land and sea for coastal cities like Hong Kong. Don't reintroduce `border`. */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1),
                0 30px 80px -30px rgba(0,0,0,0.8);
}

.map-plate svg.world-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.world-map .country {
    fill: rgba(255,255,255,0.06);
    stroke: rgba(255,255,255,0.20);
    stroke-width: 0.4;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;   /* hairline coastlines at any scale */
    transition: fill 0.5s ease, stroke 0.5s ease;
}

/* Countries he actually works in, lifted out of the field */
.world-map .country.active {
    fill: rgba(255,255,255,0.16);
    stroke: rgba(255,255,255,0.5);
}
.map-canvas:hover .world-map .country { fill: rgba(255,255,255,0.09); }
.map-canvas:hover .world-map .country.active {
    fill: rgba(255,59,48,0.22);
    stroke: rgba(255,59,48,0.75);
}

.lat-line, .lng-line {
    stroke: rgba(255,255,255,0.05);
    stroke-width: 0.5;
    stroke-dasharray: 2 5;
    vector-effect: non-scaling-stroke;
}

/* ============================================
   Pins
   ============================================ */

.pin {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
}

.pin-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--gray-300);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.1);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

/* Major pins carry the single accent colour */
.pin.pin-major .pin-dot {
    width: 16px;
    height: 16px;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(255,59,48,0.18),
                0 0 24px rgba(255,59,48,0.55);
}
.pin.pin-major .pin-dot::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(255,59,48,0.45);
    animation: pin-pulse 2.8s ease-out infinite;
}
@keyframes pin-pulse {
    0%   { transform: scale(0.8); opacity: 0.85; }
    100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pin.pin-major .pin-dot::after { animation: none; opacity: 0; }
}

.pin:hover .pin-dot {
    background: var(--white);
    transform: scale(1.25);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.16),
                0 0 26px rgba(255,255,255,0.4);
}
.pin.pin-major:hover .pin-dot {
    background: var(--white);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.2),
                0 0 30px rgba(255,255,255,0.5);
}

.pin-label {
    position: absolute;
    top: -7px;
    left: 20px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--white);
    background: rgba(0,0,0,0.72);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 980px;
    padding: 0.25rem 0.7rem;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.pin:hover .pin-label,
.pin.pin-major .pin-label {
    opacity: 1;
    transform: translateX(0);
}
.pin.label-left .pin-label {
    left: auto;
    right: 20px;
}

/* ============================================
   Region cards
   ============================================ */

/* Horizontal carousel on every width, mirroring .scroll-carousel in style.css.
   The negative margin lets cards bleed to the viewport edge past .container's padding. */
.region-carousel {
    display: flex;
    gap: 1.5rem;
    margin: 4rem -2rem 0;
    padding: 0.5rem 2rem 2rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: flex-start;   /* natural heights: Ontario has 6 events, Denver has 1 */
}
.region-carousel::-webkit-scrollbar { display: none; }

.region-card {
    position: relative;
    flex: 0 0 clamp(300px, 42vw, 540px);
    scroll-snap-align: start;
    scroll-margin-top: 80px;
    background: var(--gray-900);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 2.25rem 2rem 1.75rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.region-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px -16px rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.14);
}

.atlas .carousel-controls { margin-top: 0.5rem; }

/* Weight bar: how much of his work happened here */
.region-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: var(--bar-w, 30%);
    background: linear-gradient(90deg, var(--accent) 0%, rgba(255,59,48,0.25) 100%);
}

.region-card.flash {
    animation: region-flash 1.6s ease-out;
}
@keyframes region-flash {
    0%   { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); }
    100% { box-shadow: 0 0 0 0 transparent; border-color: rgba(255,255,255,0.06); }
}
@media (prefers-reduced-motion: reduce) {
    .region-card.flash { animation: none; border-color: var(--accent); }
}

.region-coords {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.region-name {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.region-context {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
}

.region-events {
    list-style: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.1rem;
}
.region-events li {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    align-items: baseline;
}
.region-events li:last-child { border-bottom: none; }

.region-year {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--gray-500);
    letter-spacing: 0.06em;
}

.region-event h4 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--white);
    margin-bottom: 0.25rem;
}
.region-event p {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--gray-500);
}
.region-event em { color: var(--gray-300); font-style: italic; }

/* ============================================
   Stat row
   ============================================ */

.atlas-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
}
.atlas-stat {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1.5rem;
}
.atlas-stat .stat-num {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--white);
    margin-bottom: 0.5rem;
}
.atlas-stat .stat-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* ============================================
   Responsive
   ============================================ */

/* Below ~1200px the map is too narrow to seat the always-on labels: the
   westernmost one (Southern California) runs off the viewport. Drop the
   resting labels and let hover surface them; touch gets the dots + the hint. */
@media (max-width: 1200px) {
    .pin .pin-label,
    .pin.pin-major .pin-label { display: none; }
    .pin:hover .pin-label { display: block; opacity: 1; }
    .map-hint { display: block; }
}

@media (max-width: 900px) {
    .atlas { padding: 5rem 0; }
    .region-carousel { margin-top: 3rem; gap: 1rem; }
    .atlas-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
    /* NB: no aspect-ratio override here. See .map-canvas — changing it drifts the pins. */
}

@media (max-width: 640px) {
    /* Edge-to-edge: the map is wide and short, so the container's 2rem gutters cost
       real map. Full-bleed buys ~20% more map. */
    .map-canvas {
        margin-left: -2rem;
        margin-right: -2rem;
        width: calc(100% + 4rem);
    }
    .map-plate { border-radius: 0; }

    /* At this size the six North American pins collide in ~50px. Show only the majors;
       every region is still one swipe away in the carousel directly below. */
    .pin:not(.pin-major) { display: none; }

    /* Touch: no hover to reveal a label, so keep them off entirely. */
    .pin:hover .pin-label { display: none; }

    /* Padding grows the box symmetrically, so translate(-50%,-50%) keeps the
       dot centred on its coordinate while the tap target reaches ~40px. */
    .pin { padding: 14px; }
    .pin-dot { width: 10px; height: 10px; }
    .pin.pin-major .pin-dot { width: 15px; height: 15px; }

    .region-card {
        flex-basis: 86vw;   /* one card at a time, with the next peeking in */
        padding: 1.75rem 1.5rem 1.25rem;
    }
    .region-events li { grid-template-columns: 52px 1fr; gap: 0.75rem; }
}

/* Tap hint, only useful where the labels are gone */
.map-hint {
    display: none;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    text-align: center;
}
@media (max-width: 640px) {
    .map-hint { display: block; }
}