/* =========================================================
   Sub-pages: "What got us here" (past) and "Where we're headed" (future)
   Loaded after styles.css; shares its tokens.
   ========================================================= */
body.sub{background:var(--purple-lo)}
body.theme-future{background:var(--page-lo)}

/* ---------- Page hero (First Round reference: statement + photo collage) ---------- */
.phero{position:relative;overflow:hidden;padding:clamp(2rem,4.5vw,3.5rem) 0 0;
  background:radial-gradient(120% 90% at 50% 0%, var(--purple-hi) 0%, var(--purple) 40%, var(--purple-lo) 100%)}
.phero .wrap{text-align:center;display:grid;justify-items:center;gap:var(--s-2)}
.phero-title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(3rem,1.2rem+6.2vw,7.5rem);line-height:.9;letter-spacing:-.01em;color:var(--white);max-width:24ch;text-wrap:balance}
.phero-title em{font-style:normal;color:var(--teal)}
.phero-lede{font-size:var(--t-lg);line-height:1.3;max-width:42ch;color:var(--cream);text-wrap:pretty}
.phero-note{font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;opacity:.6}

/* collage: tiles cluster loosely; each tile flips to its story */
.collage{position:relative;width:min(100%,1180px);margin:var(--s-1) auto var(--s-5);height:clamp(360px,42vw,560px)}
.ctile{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--r,3/4);cursor:pointer;background:none;border:0;padding:0;text-align:left;color:var(--cream);font:inherit;perspective:1200px}
.ctile-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--d-slow) var(--ease-out)}
.ctile:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.ctile-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;border:1.5px solid rgba(9,225,205,.35)}
.ctile-front{background:var(--purple-lo)}
.ctile-front img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter var(--d),transform var(--d-slow) var(--ease-out)}
.ctile-front .ph{position:absolute;inset:0;display:grid;place-items:center;padding:12%;background:repeating-linear-gradient(135deg,rgba(9,225,205,.08) 0 6px,transparent 6px 14px),var(--purple)}
.ctile-front .ph .logo{--h:22px;color:var(--cream);opacity:.9;max-width:80%}
.ctile-front .ph .ph-name{font-family:var(--font-display);text-transform:uppercase;font-size:1.6rem;line-height:1;color:var(--cream);text-align:center}
.ctile-tag{position:absolute;left:0;right:0;bottom:0;padding:.75rem .9rem;background:linear-gradient(0deg,rgba(1,0,15,.9),rgba(1,0,15,0));opacity:0;transform:translateY(8px);transition:opacity var(--d),transform var(--d) var(--ease)}
.ctile-tag b{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:1.25rem;line-height:1;color:var(--teal)}
.ctile-tag span{display:block;font-size:.85rem;line-height:1.3;margin-top:.25rem;color:var(--cream)}
.ctile:hover .ctile-tag,.ctile:focus-visible .ctile-tag{opacity:1;transform:none}
.ctile:hover .ctile-front img{filter:grayscale(0) contrast(1);transform:scale(1.04)}
.ctile:hover .ctile-inner{transform:translateY(-6px)}
.ctile-back{transform:rotateY(180deg);background:var(--teal);color:var(--ink);padding:1rem 1.1rem;display:grid;grid-template-rows:auto 1fr auto;gap:.5rem}
.ctile-back b{font-family:var(--font-display);text-transform:uppercase;font-size:1.3rem;line-height:1}
.ctile-back p{font-size:.86rem;line-height:1.35;overflow:auto}
.ctile-back small{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.ctile.is-flipped .ctile-inner{transform:rotateY(180deg)}
.ctile.is-flipped:hover .ctile-inner{transform:rotateY(180deg) translateY(-6px)}
.collage-hint{position:absolute;left:50%;bottom:-2.4rem;translate:-50% 0;font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;opacity:.55;white-space:nowrap}

/* ---------- Generic page sections ---------- */
.psec{padding:var(--s-8) 0}
.psec-cream{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);color:var(--purple)}
.psec-cream2{background:var(--cream-2);color:var(--purple)}
.psec-purple{background:radial-gradient(120% 95% at 50% 40%, var(--purple-hi) 0%, var(--purple) 42%, var(--purple-lo) 100%);color:var(--cream)}
.psec-blue{background:radial-gradient(110% 100% at 50% 40%, var(--blue-hi) 0%, var(--blue) 45%, var(--blue-lo) 100%);color:var(--cream)}
.prose{max-width:62ch;display:grid;gap:var(--s-3)}
.prose p{font-size:var(--t-lg);line-height:1.3;text-wrap:pretty}
.prose ul{display:grid;gap:.6rem;padding-left:1.2em;list-style:disc}
.prose li{font-size:var(--t-lg);line-height:1.3}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-6);align-items:start}
.photo-ph{position:relative;aspect-ratio:16/9;background:repeating-linear-gradient(135deg,rgba(90,8,96,.08) 0 8px,transparent 8px 18px),rgba(90,8,96,.06);border:1.5px dashed rgba(90,8,96,.35);display:grid;place-items:center;text-align:center;padding:1rem}
.photo-ph span{font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.psec-purple .photo-ph{background:repeating-linear-gradient(135deg,rgba(9,225,205,.08) 0 8px,transparent 8px 18px),rgba(9,225,205,.05);border-color:rgba(9,225,205,.4)}

/* ---------- Era timeline: horizontal snap rail with a year track ---------- */
.eras{margin-top:var(--s-6)}
.era-track{position:relative;height:2px;background:var(--rule);margin:0 clamp(20px,4vw,64px) var(--s-4)}
.era-track i{position:absolute;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--purple);translate:-50% 0;transition:background var(--d),transform var(--d)}
.era-track i.is-on{background:var(--purple);transform:scale(1.25)}
.era-track i::after{content:attr(data-year);position:absolute;top:18px;left:50%;translate:-50% 0;font-family:var(--font-display);font-size:1.1rem;color:var(--purple);white-space:nowrap}
.era-rail{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(20px,4vw,64px);padding:var(--s-5) clamp(20px,4vw,64px) var(--s-3);scrollbar-width:none}
.era-rail::-webkit-scrollbar{display:none}
.era{flex:0 0 auto;width:min(86vw,440px);scroll-snap-align:start;position:relative;background:var(--cream);border:1.5px solid var(--purple);padding:clamp(1.25rem,2.5vw,2rem);display:grid;gap:var(--s-2);align-content:start}
.era::before{content:"";position:absolute;inset:0 calc(-1*var(--slab)) calc(-1*var(--slab)) 0;background:var(--yellow);z-index:-1;clip-path:polygon(0 calc(100% - var(--slab)),var(--slab) 100%,100% 100%,100% var(--slab),calc(100% - var(--slab)) 0)}
.era-kicker{font-size:var(--t-sm);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.era-title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.8rem,1.4rem+1vw,2.6rem);line-height:.95}
.era-title .fund{color:var(--blue)}
.era-stats{display:flex;gap:var(--s-3);font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--purple)}
.era-stats small{display:block;font-family:var(--font-body);text-transform:none;font-size:.8rem;opacity:.7;margin-top:.25rem}
.era ul{display:grid;gap:.55rem;margin-top:.5rem}
.era li{font-size:var(--t-sm);line-height:1.35;padding-left:1rem;position:relative}
.era li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--teal)}
.era li b{font-weight:700}
.era li .moic{font-family:var(--font-display);font-size:1.1em;color:var(--blue);margin-left:.25rem}
.era-v{background:var(--purple);color:var(--cream);border-color:var(--purple)}
.era-v .era-title .fund,.era-v .era-stats{color:var(--teal)}
.era-v p{font-size:var(--t-base);line-height:1.4}
.era-ctrls{display:flex;justify-content:flex-end;gap:.75rem;padding:0 clamp(20px,4vw,64px)}

/* ---------- Insight blocks (text + chart) ---------- */
.insights{display:grid;gap:var(--s-7);margin-top:var(--s-6)}
.insight{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-6);align-items:center;padding-top:var(--s-6);border-top:1.5px solid var(--rule)}
.insight:first-child{border-top:0;padding-top:0}
.insight:nth-child(even){grid-template-columns:1.1fr .9fr}
.insight:nth-child(even) .insight-copy{order:2}
.insight-copy{display:grid;gap:var(--s-3)}
.insight-n{font-family:var(--font-display);font-size:1.4rem;color:var(--teal);letter-spacing:0}
.insight h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,1.4rem+2vw,3.5rem);line-height:.95;text-wrap:balance}
.insight p{font-size:var(--t-base);line-height:1.45;text-wrap:pretty}
.insight .takeaway{font-weight:700;font-size:var(--t-lg);line-height:1.25;border-left:4px solid var(--teal);padding-left:1rem}
.viz{position:relative;background:var(--cream-2);border:1.5px solid var(--rule);padding:clamp(1rem,2vw,1.75rem)}
.viz-title{font-size:var(--t-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.75rem}
.viz svg{display:block;width:100%;height:auto;font-family:var(--font-body)}
.viz .grid line{stroke:rgba(90,8,96,.16);stroke-width:1}
.viz .axis text{fill:rgba(90,8,96,.75);font-size:11px}
.viz .lbl text{fill:var(--purple);font-size:11.5px;font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.75rem;font-size:.85rem}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.4rem;vertical-align:-2px}
.legend .tex{background:repeating-linear-gradient(45deg,var(--purple) 0 2px,transparent 2px 5px)}
.viz-note{font-size:.8rem;opacity:.7;margin-top:.6rem}
.viz details{margin-top:.6rem;font-size:.85rem}
.viz summary{cursor:pointer;font-weight:600;min-height:32px;display:inline-flex;align-items:center}
.viz table{border-collapse:collapse;width:100%;margin-top:.5rem}
.viz th,.viz td{text-align:right;padding:.3rem .4rem;border-bottom:1px solid var(--rule)}
.viz th:first-child,.viz td:first-child{text-align:left}
.tip{position:fixed;z-index:500;pointer-events:none;background:var(--ink);color:var(--cream);font-size:.8rem;line-height:1.35;padding:.5rem .65rem;border-radius:4px;max-width:260px;opacity:0;transform:translateY(4px);transition:opacity var(--d-fast),transform var(--d-fast)}
.tip.is-on{opacity:1;transform:none}
.tip b{color:var(--teal)}
.hit{fill:transparent;cursor:crosshair}
.hit:hover{fill:rgba(90,8,96,.06)}
.bar-seg:hover{filter:brightness(1.08)}

/* AI 50 two-column list */
.ai50{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);background:var(--purple);color:var(--cream);padding:clamp(1.25rem,2.5vw,2rem);border:1.5px solid var(--purple)}
.ai50 h4{font-size:var(--t-base);font-weight:400;line-height:1.2;padding-bottom:.6rem;border-bottom:1px solid rgba(255,207,83,.6);margin-bottom:.8rem;color:var(--yellow)}
.ai50 h4 b{font-weight:700;font-style:italic}
.ai50 li{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.4rem,1rem+1.2vw,2.1rem);line-height:1.15;color:var(--teal)}
.ai50 li small{font-family:var(--font-body);text-transform:none;font-size:.8rem;color:var(--cream);margin-left:.4em;opacity:.85}

/* firsts diagram */
.firsts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3)}
.first{display:grid;gap:.5rem;justify-items:center;text-align:center}
.first-k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7;min-height:2.2em}
.chip{width:100%;min-height:56px;display:grid;place-items:center;padding:.5rem .6rem;background:var(--cream);border:1.5px solid var(--purple);font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;line-height:1;color:var(--purple)}
.chip .logo{--h:18px;color:var(--purple)}
.first-line{width:2px;height:28px;background:var(--teal);position:relative}
.first-line::before,.first-line::after{content:"";position:absolute;left:50%;width:8px;height:8px;border-radius:50%;background:var(--teal);translate:-50% 0}
.first-line::before{top:-4px}.first-line::after{bottom:-4px}
.first-c{font-size:.8rem;font-weight:600}
.first.is-new .chip{border-style:dashed}

/* honoring: photo mosaic placeholders */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-5)}
.mosaic .photo-ph{aspect-ratio:4/3}
.mosaic .photo-ph:nth-child(1),.mosaic .photo-ph:nth-child(6){grid-column:span 2}

/* page footer CTA */
.pcta{padding:var(--s-8) 0;text-align:center;display:grid;justify-items:center;gap:var(--s-4)}
.pcta .t-display{font-size:var(--t-h2);color:var(--teal);max-width:16ch;text-wrap:balance}
.pbtn-big{font-size:clamp(1.4rem,1rem+1.2vw,2rem);padding:1rem 1.75rem;min-height:64px}

/* ---------- Future page: map beats ---------- */
.mapsec{position:relative}
.map-pin{position:relative;height:100svh;overflow:hidden;background:#0d0716}
.map-stage{position:absolute;left:50%;top:50%;translate:-50% -50%;height:100%;aspect-ratio:1920/1080;min-width:100%}
.map-svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.32;transition:opacity var(--d-slow)}
.map-pin.beat-2 .map-svg{opacity:.22}
.map-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,15,106,.9) 0%,rgba(7,15,106,.55) 40%,rgba(7,15,106,.1) 70%)}
.map-copy{position:absolute;left:0;right:0;top:50%;translate:0 -50%}
.map-copy .wrap{display:grid;gap:var(--s-3);max-width:44rem}
.map-beat{position:absolute;opacity:0;transform:translateY(12px);transition:opacity var(--d) var(--ease),transform var(--d) var(--ease);pointer-events:none;max-width:38rem}
.map-beat.is-on{position:relative;opacity:1;transform:none}
.map-beat p{font-size:var(--t-lg);line-height:1.3;color:var(--cream);text-wrap:pretty}
.map-beat p b{color:var(--teal);font-weight:700}
.map-beat .t-display{font-size:clamp(2.5rem,1.4rem+3.8vw,5rem);color:var(--white);line-height:.9}
.map-beat .t-display em{font-style:normal;color:var(--teal)}
.map-marks{position:absolute;inset:0;pointer-events:none}
.mark .chip{color:var(--ink)}
.mark{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:grid;justify-items:center;gap:.3rem;opacity:0;transform:scale(.7);transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
.mark .dot{width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(9,225,205,.25),0 0 24px rgba(9,225,205,.6)}
.mark .chip{min-height:0;padding:.3rem .55rem;font-size:.95rem;background:var(--cream);border-color:var(--teal);white-space:nowrap}
.mark small{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.map-pin.beat-1 .mark.co,.map-pin.beat-2 .mark.mk{opacity:1;transform:none}
.map-dots{display:flex;gap:.5rem;margin-top:var(--s-3)}
.map-dots i{width:34px;height:3px;background:rgba(255,255,235,.25)}
.map-dots i.is-on{background:var(--teal)}
.map-cue{position:absolute;left:50%;bottom:1.25rem;translate:-50% 0;font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--cream);opacity:.6}

.imagine{display:grid;gap:var(--s-5)}
.imagine p{max-width:60rem}
.imagine .lead{font-family:var(--font-display);text-transform:uppercase;font-size:var(--t-h2);line-height:.9;color:var(--white);text-wrap:balance;max-width:none;width:100%}
.imagine .lead em{font-style:normal;color:var(--teal)}
.imagine p{font-size:var(--t-lg);line-height:1.3;text-wrap:pretty}
.imagine .q{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,1.2rem+1.4vw,2.6rem);line-height:1.05;color:var(--yellow)}
.video{position:relative;aspect-ratio:16/9;max-width:60rem;margin:var(--s-6) 0 0;background:var(--ink);border:1.5px solid rgba(9,225,205,.4);display:grid;place-items:center;overflow:hidden}
.video::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(9,225,205,.06) 0 10px,transparent 10px 24px)}
.play{position:relative;width:88px;height:88px;border-radius:50%;background:var(--teal);color:var(--ink);display:grid;place-items:center;border:0;cursor:pointer;transition:transform var(--d) var(--ease-out)}
.play:hover{transform:scale(1.06)}
.video-label{position:absolute;left:1rem;bottom:1rem;font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);opacity:.7}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .two-col{grid-template-columns:1fr}
  .insight,.insight:nth-child(even){grid-template-columns:1fr}
  .insight:nth-child(even) .insight-copy{order:0}
  .firsts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .collage{height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-2);perspective:none} /* minmax(0,…) so nowrap pops cannot widen a column past the screen */
  .ctile{position:relative;width:auto;left:auto;top:auto;min-width:0}
  .collage-hint{position:static;translate:none;grid-column:1/-1;text-align:center}
  .ai50{grid-template-columns:1fr}
  .firsts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic .photo-ph:nth-child(1),.mosaic .photo-ph:nth-child(6){grid-column:auto}
  .map-pin{height:auto;min-height:100svh;padding:var(--s-7) 0}
  .map-copy{position:relative;translate:none;top:auto}
  .map-beat{position:relative;opacity:1;transform:none;margin-bottom:var(--s-5)}
  .map-marks,.map-dots,.map-cue{display:none}
}
@media (prefers-reduced-motion: reduce){
  .map-pin{height:auto;padding:var(--s-7) 0}
  .map-copy{position:relative;translate:none}
  .map-beat{position:relative;opacity:1;transform:none;margin-bottom:var(--s-5)}
  .map-marks,.map-cue{display:none}
}

/* =========================================================
   Future page theme: blue-dominant (campaign royal blue)
   ========================================================= */
.theme-future{--page:var(--blue);--page-hi:var(--blue-hi);--page-lo:var(--blue-lo)}
.theme-future .phero{background:radial-gradient(120% 90% at 50% 0%, var(--page-hi) 0%, var(--page) 40%, var(--page-lo) 100%)}
.theme-future .phero-title{font-size:var(--t-h1);max-width:22ch}
.theme-future .phero-title em{color:var(--teal)}
.theme-future .map-pin{background:#040a4a}
.theme-future .psec-blue{background:radial-gradient(110% 100% at 50% 40%, var(--page) 0%, var(--page-lo) 70%, #040a4a 100%)}
.theme-future .imagine .q{color:var(--yellow)}
.theme-future .pbtn{background:var(--page-lo)}
.theme-future .pbtn:hover{background:var(--teal);color:var(--ink)}
.theme-future .grain{opacity:.32}

/* photo tiles (First Round mechanic): B&W at rest; hovering a tile recolours the WHOLE header in that company's brand
   colour (photos multiply into it), lifts the tile and pops its logo, name and flag out at different corners */
.theme-future .phero,.theme-past .phero{transition:background-color var(--d-slow) var(--ease),color var(--d-slow) var(--ease);background-color:var(--page)}
.theme-future .phero.is-tinted,.theme-past .phero.is-tinted{background:var(--hero-brand);color:var(--hero-ink)}
.phero.is-tinted .phero-title,.phero.is-tinted .phero-lede,.phero.is-tinted .chapter,.phero.is-tinted .phero-note,.phero.is-tinted .collage-hint{color:var(--hero-ink)}
.phero.is-tinted .phero-title em{color:var(--hero-ink);opacity:.72}
.phero.is-tinted .chapter .n{color:var(--hero-ink)}
.collage-future,.collage-past{height:clamp(360px,42vw,600px)}
.ptile{z-index:var(--z,1);transition:z-index 0s;text-decoration:none;cursor:pointer}
.ptile:hover,.ptile:focus-visible{z-index:50}
.ptile .ctile-inner{overflow:visible}
.ptile .ctile-front{background:var(--page-lo);border-color:rgba(255,255,235,.18);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.ptile .ctile-front img{filter:grayscale(1) contrast(1.08) brightness(.95);transition:filter var(--d-slow) var(--ease),transform var(--d-slow) var(--ease-out)}
.ptile .tint{position:absolute;inset:0;background:var(--hero-tint,var(--tint,var(--brand)));mix-blend-mode:multiply;opacity:0;transition:opacity var(--d-slow) var(--ease),background var(--d-slow) var(--ease)}
.phero.is-tinted .ptile .tint{opacity:1}
.ptile:hover .ctile-front img,.ptile:focus-visible .ctile-front img{transform:scale(1.03)}
.ptile:hover .ctile-inner{transform:translateY(-10px)}
.ptile.is-flipped:hover .ctile-inner{transform:rotateY(180deg) translateY(-10px)}
.ptile .ctile-back{background:var(--brand);color:var(--brand-ink)}
/* pops */
.pop{position:absolute;z-index:60;opacity:0;transform:translate(var(--px,0),var(--py,8px)) scale(.7);transition:opacity var(--d) var(--ease-out),transform var(--d-slow) var(--ease-out);pointer-events:none;white-space:nowrap}
.ptile{--brand-light:color-mix(in srgb, var(--brand) 42%, white);--brand-dark:color-mix(in srgb, var(--brand) 38%, black)}
.pop-logo{--pop-bg:var(--brand-light);width:60px;height:60px;padding:11px;background:var(--pop-bg);color:var(--brand-dark);border-radius:12px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.pop-logo .tlogo{width:100%;height:100%}
.pop-logo.pop-wide{width:104px;padding:12px 10px}
.pop-name{display:grid;gap:.15rem;padding:.6rem .9rem;background:var(--brand-light);color:var(--brand-dark);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.22);text-align:left}
.pop-name b{font-family:var(--font-display);text-transform:uppercase;font-size:1.4rem;line-height:1;font-weight:600}
.pop-name small{font-family:var(--font-body);font-weight:400;font-size:.8rem;line-height:1;opacity:.8}
.at-tl{left:-18px;top:-18px}.at-tr{right:-18px;top:-18px}.at-bl{left:-18px;bottom:-18px}.at-br{right:-18px;bottom:-18px}
.at-tl,.at-tr{--py:10px}.at-bl,.at-br{--py:-10px}
.ptile:hover .pop,.ptile:focus-visible .pop{opacity:1;transform:translate(0,0) scale(1)}
.ptile:hover .pop-logo{transition-delay:0ms}.ptile:hover .pop-name{transition-delay:80ms}
.ptile.is-flipped .pop{opacity:0}
/* map edit mode */
.map-pin.is-editing .mark{pointer-events:auto;cursor:grab;opacity:1;transform:none}
.map-pin.is-editing .map-marks{pointer-events:auto}
.map-edit-out{position:absolute;right:1rem;bottom:1rem;z-index:99;background:var(--ink);color:var(--cream);font:12px/1.4 ui-monospace,monospace;padding:.6rem .8rem;max-width:44vw;max-height:40vh;overflow:auto;white-space:pre}
.map-ref{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;width:10px;height:10px;border:2px solid var(--yellow);border-radius:50%}
.map-ref::after{content:attr(data-name);position:absolute;left:12px;top:-6px;font-size:10px;color:var(--yellow);white-space:nowrap}

@media (max-width:899px){
  .collage-future,.collage-past{height:auto}
  .ptile .tint{opacity:.85;background:var(--tint,var(--brand))}
  .pop{opacity:1;transform:none}
  .at-tl{left:6px;top:6px}.at-tr{right:6px;top:6px}.at-bl{left:6px;bottom:6px}.at-br{right:6px;bottom:6px}
  .ptile{aspect-ratio:4/3} /* uniform rows on phones; photos are object-fit:cover */
  .pop{white-space:normal}
  .pop-name{padding:.4rem .55rem;gap:.1rem;border-radius:6px;max-width:calc(100% - 12px)}
  .pop-name b{font-size:.95rem}
  .pop-name small{font-size:.65rem}
  .pop-logo{width:44px;height:44px;padding:8px;border-radius:9px}
  .pop-logo.pop-wide{width:76px;padding:9px 8px}
}

/* =========================================================
   Past page theme: dark-teal dominant (campaign kit #026972).
   The page's purple tokens are re-pointed at the teal ramp, so every purple rule above follows.
   ========================================================= */
.theme-past{--purple:#026972;--purple-hi:#0a8a80;--purple-lo:#013e46;--page:var(--purple);--page-hi:var(--purple-hi);--page-lo:var(--purple-lo)}
.theme-past .phero-title{font-size:var(--t-h1);max-width:22ch}
.theme-past .phero-title em{color:var(--yellow)}
.theme-past .pbtn{background:var(--page-lo)}
.theme-past .pbtn:hover{background:var(--teal);color:var(--ink)}
.theme-past .grain{opacity:.32}
/* a tile may set --tint (e.g. Altruist: brand is black, photos multiply with a light grey so they stay visible) */