/* Pulse Horizon brand tokens.
 *
 * Petrol + lime as the two anchor hues, amber as warmth. Editorial-style
 * sidebar layout. Archivo for body and display (one family, weight does
 * the work); Instrument Serif italic reserved for editorial moments.
 * All sized in a 1.25 modular scale.
 */

:root {
 /* ---- lime (signal, action), the live, energetic accent */
 --ph-pulse-900: #6B8F1F;
 --ph-pulse-700: #A8D03A;
 --ph-pulse-500: #C7EE5C;
 --ph-pulse-100: #EFFAD0;

 /* ---- petrol (depth, authority), the primary brand colour */
 --ph-navy-900: #072925;
 --ph-navy-700: #0E3B36;
 --ph-navy-500: #1A5C56;
 --ph-navy-100: #D6E5E2;

 /* ---- amber accent (warmth, urgency) */
 --ph-accent-700: #B47318;
 --ph-accent-500: #F0A93B;
 --ph-accent-100: #FCEBC8;

 /* ---- neutrals (ink + warm cream surfaces) */
 --ph-ink-900: #14181A;
 --ph-ink-700: #2A2E30;
 --ph-ink-500: #545A5D;
 --ph-ink-300: #9CA1A4;
 --ph-surface-0: #F2EDE3; /* cream, page background */
 --ph-surface-50: #EBE3D4; /* bone, cards, subtle panels */
 --ph-surface-100: #DCD2BD; /* warm border tone */
 --ph-surface-dark: #072925; /* petrolDeep, sidebar */

 /* ---- semantic */
 --ph-success: #0F7A4F;
 --ph-warn: #B45309;
 --ph-danger: #B91C1C;

 /* ---- typography */
 --ph-font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 --ph-font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 --ph-font-italic: "Instrument Serif", Georgia, serif;
 --ph-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

 --ph-fs-14: 0.875rem;
 --ph-fs-16: 1rem;
 --ph-fs-20: 1.25rem;
 --ph-fs-25: 1.5625rem;
 --ph-fs-31: 1.953rem;
 --ph-fs-39: 2.441rem;
 --ph-fs-40: 2.5rem;
 --ph-fs-49: 3.052rem;
 --ph-fs-61: clamp(2.441rem, 5vw, 3.815rem);

 --ph-radius: 8px;
 --ph-radius-lg: 14px;
 --ph-shadow: 0 1px 2px rgba(15, 23, 32, 0.06), 0 8px 24px rgba(15, 23, 32, 0.06);
}

* { box-sizing: border-box; }

html, body {
 margin: 0;
 padding: 0;
 font-family: var(--ph-font-body);
 color: var(--ph-ink-900);
 background: var(--ph-surface-0);
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
}

a { color: var(--ph-navy-700); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ph-navy-900); }

h1, h2, h3, h4 { font-family: var(--ph-font-display); color: var(--ph-ink-900); margin: 0 0 0.5em; line-height: 1.1; }
h1 { font-size: var(--ph-fs-61); font-weight: 900; letter-spacing: -0.025em; }
h2 { font-size: var(--ph-fs-39); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: var(--ph-fs-25); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--ph-fs-20); font-weight: 700; letter-spacing: -0.005em; }

p { margin: 0 0 1em; max-width: 70ch; }

code, pre, kbd { font-family: var(--ph-font-mono); }

/* ---- top-nav shell (public marketing surfaces, default) */
body.ph-chrome-top { padding-top: 96px; } /* clears the sticky topnav */
/* On the home page the hero is full-viewport and the nav hides until
   first scroll, so the reserved top padding gets in the way. The page
   sets ph-page-home; this drops the reservation only there. */
body.ph-page-home.ph-chrome-top { padding-top: 0; }

.ph-topnav {
 position: fixed; top: 0; left: 0; right: 0;
 z-index: 80;
 background: var(--ph-surface-0);
 border-bottom: 1px solid var(--ph-surface-100);
 backdrop-filter: saturate(140%) blur(6px);
 -webkit-backdrop-filter: saturate(140%) blur(6px);
 transition: transform 0.28s ease;
}
/* Hide-until-scroll. The Page.astro inline script applies this class
   on load and removes it once scrollY crosses a small threshold, so
   the hero owns the first paint on long pages. */
.ph-topnav.ph-topnav-hidden { transform: translateY(-100%); }
.ph-topnav-inner {
 max-width: 1300px;
 margin: 0 auto;
 padding: 14px 32px;
 display: flex; align-items: center; gap: 32px;
}
.ph-topnav-brand {
 flex: 0 0 auto;
 display: block;
 line-height: 0;
}
/* viewBox 760x280, height 68 -> rendered width ~184px; keeps the 04
   design's authored proportions (no squish) and leaves the stacked
   wordmark + subline legible. */
.ph-topnav-brand svg { display: block; height: 68px; width: auto; }
/* Wordmark pulse-line: hover retraces it once. pathLength="1" makes the
   dasharray/dashoffset trick work without measuring the path. */
.ph-brand-pulse {
 stroke-dasharray: 1;
 stroke-dashoffset: 0;
 /* Page-load: line draws itself once over 1.5s after a brief beat. Uses
    its own keyframe name so the :hover rule below (different keyframe)
    is recognised as a fresh animation and replays on every hover. */
 animation: ph-brand-pulse-load 1.5s ease-out 0.4s 1 backwards;
}
.ph-topnav-brand:hover .ph-brand-pulse,
.ph-topnav-brand:focus-visible .ph-brand-pulse {
 animation: ph-brand-pulse-hover 1.2s ease-out;
}
@keyframes ph-brand-pulse-load {
 0% { stroke-dashoffset: 1; }
 100% { stroke-dashoffset: 0; }
}
@keyframes ph-brand-pulse-hover {
 0% { stroke-dashoffset: 1; }
 100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .ph-brand-pulse,
 .ph-topnav-brand:hover .ph-brand-pulse,
 .ph-topnav-brand:focus-visible .ph-brand-pulse { animation: none; }
}

/* "Live" pulse chip in the top nav. Solid lime dot with a slow
   breathing animation, plus the age-minutes pill alongside. */
.ph-live-chip {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 4px 11px;
 margin-left: 8px;
 border-radius: 99px;
 background: rgba(199, 238, 92, 0.18);
 border: 1px solid rgba(199, 238, 92, 0.55);
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--ph-ink-900);
 text-decoration: none;
 transition: background 0.15s, border-color 0.15s;
}
.ph-live-chip:hover {
 background: rgba(199, 238, 92, 0.32);
 border-color: var(--ph-pulse-700);
}
.ph-live-dot {
 width: 7px; height: 7px;
 border-radius: 50%;
 background: var(--ph-pulse-700);
 animation: ph-live-dot-pulse 2.2s ease-in-out infinite;
 flex: 0 0 7px;
}
.ph-live-label { color: var(--ph-navy-900); }
.ph-live-age {
 padding: 1px 7px;
 background: rgba(255, 255, 255, 0.55);
 border-radius: 99px;
 letter-spacing: 0.04em;
 text-transform: none;
 font-weight: 600;
 font-size: 0.66rem;
 color: var(--ph-ink-700);
 font-variant-numeric: tabular-nums;
 min-width: 3ch;
 text-align: center;
}
@keyframes ph-live-dot-pulse {
 0%, 100% { opacity: 0.55; transform: scale(1); box-shadow: 0 0 0 0 rgba(199, 238, 92, 0.6); }
 50%      { opacity: 1;    transform: scale(1.25); box-shadow: 0 0 0 5px rgba(199, 238, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
 .ph-live-dot { animation: none; opacity: 1; }
}
@media (max-width: 760px) {
 .ph-live-chip { padding: 3px 8px; font-size: 0.62rem; }
 .ph-live-age { display: none; }
}
.ph-topnav-links {
 display: flex; align-items: center; gap: 4px;
 margin-left: auto;
}
.ph-topnav-links a {
 display: inline-block;
 padding: 8px 14px;
 font-size: 0.9375rem;
 font-weight: 600;
 color: var(--ph-ink-700);
 text-decoration: none;
 border-radius: 8px;
 letter-spacing: -0.005em;
}
.ph-topnav-links a:hover {
 background: var(--ph-surface-50);
 color: var(--ph-navy-700);
}
.ph-topnav-links a.active {
 color: var(--ph-navy-700);
 background: var(--ph-pulse-100);
}
.ph-topnav-links a[hidden] { display: none !important; }
.ph-topnav-links #ph-nav-signin,
.ph-topnav-links #ph-signout-link {
 margin-left: 12px;
 padding: 8px 16px;
 background: var(--ph-navy-700);
 color: var(--ph-surface-0);
}
.ph-topnav-links #ph-nav-signin:hover,
.ph-topnav-links #ph-signout-link:hover {
 background: var(--ph-navy-900);
 color: var(--ph-surface-0);
}
/* Sign-up CTA in the top nav. Dark fill, lime text + lime border for
   clearly-a-button contrast that still reads on the cream nav strip.
   Inverts to lime fill + dark text on hover. */
.ph-topnav-links .ph-nav-cta {
 margin-left: 12px;
 padding: 9px 18px;
 background: var(--ph-navy-900);
 color: var(--ph-pulse-500);
 border: 1px solid var(--ph-pulse-500);
 font-weight: 700;
}
.ph-topnav-links .ph-nav-cta:hover {
 background: var(--ph-pulse-500);
 color: var(--ph-navy-900);
 border-color: var(--ph-pulse-500);
}

/* Hamburger button, hidden above the mobile breakpoint. */
.ph-topnav-burger {
 display: none;
 margin-left: auto;
 width: 44px; height: 44px;
 padding: 0;
 background: transparent;
 border: 1px solid var(--ph-surface-100);
 border-radius: 8px;
 cursor: pointer;
 align-items: center; justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.ph-topnav-burger span {
 display: block;
 width: 20px; height: 2px;
 background: var(--ph-ink-900);
 border-radius: 2px;
 transition: transform 0.18s ease, opacity 0.18s ease;
}
.ph-topnav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ph-topnav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ph-topnav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer, slides down under the sticky header. */
.ph-mobile-drawer {
 display: none;
 border-top: 1px solid var(--ph-surface-100);
 background: var(--ph-surface-0);
}
.ph-mobile-drawer nav { display: flex; flex-direction: column; padding: 8px 18px 16px; }
.ph-mobile-drawer nav a {
 display: block;
 padding: 14px 6px;
 font-size: 1.0625rem;
 font-weight: 600;
 color: var(--ph-ink-900);
 text-decoration: none;
 border-bottom: 1px solid var(--ph-surface-100);
}
.ph-mobile-drawer nav a:last-child { border-bottom: 0; }
.ph-mobile-drawer nav a.active {
  color: var(--ph-navy-900);
  background: var(--ph-pulse-100);
  border-left: 4px solid var(--ph-pulse-500);
  padding-left: 10px;
  margin-left: -10px;
  font-weight: 700;
}
.ph-mobile-drawer nav a[hidden] { display: none !important; }
.ph-mobile-drawer nav #ph-nav-signin-mob,
.ph-mobile-drawer nav #ph-signout-link-mob {
 margin-top: 10px;
 padding: 12px 14px;
 background: var(--ph-navy-700);
 color: var(--ph-surface-0);
 border-radius: 8px;
 border-bottom: 0;
 text-align: center;
}

@media (max-width: 900px) {
 body.ph-chrome-top { padding-top: 78px; }
 .ph-topnav-inner { padding: 10px 18px; gap: 12px; }
 .ph-topnav-brand svg { height: 52px; }
 .ph-topnav-links { display: none; }
 .ph-topnav-burger { display: inline-flex; }
 /* Drawer is rendered with hidden by default; only show when JS toggles
    aria-expanded + removes the [hidden] attribute. Without :not([hidden])
    here the drawer stays open permanently on every mobile load. */
 .ph-mobile-drawer:not([hidden]) { display: block; }
 .ph-shell-top .ph-main { padding: 28px 20px 64px; }
}
/* Lock scroll while the drawer is open. */
body.ph-drawer-open { overflow: hidden; }

.ph-shell-top {
 display: block;
 min-height: calc(100vh - 72px);
}
.ph-shell-top .ph-main {
 max-width: 1180px;
 margin: 0 auto;
 padding: 48px 32px 96px;
}

/* ---- sidebar shell (member surfaces) */
.ph-shell {
 display: grid;
 grid-template-columns: 320px 1fr;
 min-height: 100vh;
}
.ph-sidebar {
 background: var(--ph-surface-dark);
 color: var(--ph-surface-50);
 padding: 32px 28px;
 position: sticky; top: 0; height: 100vh;
 overflow-y: auto;
}
.ph-sidebar a { color: var(--ph-surface-0); text-decoration: none; }
.ph-sidebar a:hover { color: var(--ph-pulse-500); }
.ph-sidebar .brand {
 display: block;
 margin: 0 0 4px;
}
.ph-sidebar .brand svg { display: block; width: 100%; max-width: 260px; height: auto; }
.ph-sidebar .tagline {
 font-size: var(--ph-fs-14);
 color: var(--ph-surface-50);
 opacity: 0.65;
 margin-top: 10px; margin-bottom: 32px;
 max-width: 260px;
}
.ph-sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.ph-sidebar nav li { margin: 4px 0; }
.ph-sidebar nav a { display: block; padding: 8px 10px; border-radius: 6px; }
.ph-sidebar nav a.active, .ph-sidebar nav a:hover { background: rgba(199, 238, 92, 0.10); color: var(--ph-pulse-500); }
.ph-sidebar nav .section-label {
 font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
 color: var(--ph-ink-300); margin: 24px 0 6px 10px;
}

.ph-main { padding: 64px 56px 96px; max-width: 1100px; }

/* ---- buttons */
.ph-btn {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 10px 18px; border-radius: var(--ph-radius);
 font-weight: 600; font-size: var(--ph-fs-16);
 text-decoration: none; border: 1px solid transparent;
 cursor: pointer; transition: all 0.15s ease;
}
.ph-btn-primary {
 background: var(--ph-navy-700); color: var(--ph-surface-0);
}
.ph-btn-primary:hover { background: var(--ph-navy-900); color: var(--ph-surface-0); }
.ph-btn-ghost {
 background: transparent; border-color: var(--ph-ink-500); color: var(--ph-ink-900);
}
.ph-btn-ghost:hover { border-color: var(--ph-navy-700); color: var(--ph-navy-700); }

/* ---- cards + panels */
.ph-card {
 background: var(--ph-surface-50);
 border: 1px solid var(--ph-surface-100);
 border-radius: var(--ph-radius-lg);
 padding: 24px;
 box-shadow: var(--ph-shadow);
}

.ph-hero {
 padding: 24px 0 48px;
}
.ph-hero .eyebrow {
 font-size: var(--ph-fs-14); text-transform: uppercase; letter-spacing: 0.16em;
 color: var(--ph-navy-700); font-weight: 600;
 margin-bottom: 8px;
}
.ph-hero .lead { font-size: var(--ph-fs-20); color: var(--ph-ink-700); max-width: 65ch; }

/* ---- dark hero (homepage banner), petrolDeep with hex grid + display
 headline using mixed-weight Archivo + italic Instrument Serif. */
.ph-dark-hero {
 position: relative;
 background: var(--ph-navy-900);
 color: var(--ph-surface-0);
 overflow: hidden;
 /* Full-bleed escape from the 1180px .ph-main container so the hero
    spans the whole viewport edge-to-edge. */
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 margin-top: -48px; /* cancel .ph-main top padding (48px) on home */
 margin-bottom: 56px;
 width: 100vw;
 padding: clamp(80px, 14vh, 160px) clamp(28px, 6vw, 96px) 56px;
 /* Fill the visible viewport. 100dvh handles mobile address-bar shifts;
    100vh is the fallback for older browsers. */
 min-height: 100vh;
 min-height: 100dvh;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.ph-dark-hero .grid {
 position: absolute; inset: 0;
 width: 100%; height: 100%;
 pointer-events: none;
 z-index: 1;
}
/* World basemap layer sitting underneath the hex lattice. Dimmed so it
   reads as a backdrop, not a foreground feature. */
.ph-dark-hero-world {
 position: absolute; inset: 0;
 z-index: 0;
 pointer-events: none;
 opacity: 0.18;
}
/* Both wrap and map fill the full hero. The wrap is height: 100% of
   the absolutely-positioned .ph-dark-hero-world parent (which is
   inset: 0 inside .ph-dark-hero, which itself is min-height: 100dvh).
   !important is needed because WorldMapLive's component sets an
   inline height style we want to ignore in this context. */
.ph-dark-hero-world .ph-world-map-wrap,
.ph-dark-hero-world .ph-world-map {
 width: 100% !important;
 height: 100% !important;
 min-height: 100dvh;
}
.ph-dark-hero .pulse {
 position: absolute; left: 0; right: 0; bottom: 0;
 width: 100%; height: 32px;
 pointer-events: none;
}
.ph-dark-hero .body {
 position: relative; z-index: 2;
 max-width: 820px;
 /* Block centered in the viewport, text inside it stays left-aligned. */
 margin: 0 auto;
 text-align: left;
 /* Alpha-black panel so the copy reads cleanly over the world map
    and hex grid behind it. Subtle blur softens the basemap underneath
    without losing the sense of "there's a map back there". */
 background: rgba(0, 0, 0, 0.55);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 padding: clamp(32px, 5vh, 56px) clamp(28px, 5vw, 56px);
 border-radius: var(--ph-radius-lg);
 border: 1px solid rgba(199, 238, 92, 0.10);
}

/* Hero brand mark, stacked above the eyebrow line. Inverted colour
   scheme (cream wordmark + lime hex outline) suits the dark navy hero. */
.ph-dark-hero-logo {
 display: block;
 line-height: 0;
 margin-bottom: 28px;
 text-decoration: none;
}
.ph-dark-hero-logo svg {
 display: block;
 /* Sized so the logo's hex glyph (240 viewBox-units tall, in a 760x280
    viewBox) renders at roughly the same pixel size as the background
    hex grid (92 viewBox-units tall in a 1200x1100 slice-scaled viewBox).
    On a typical 1440x900 viewport that puts both hexes around 110px tall. */
 width: clamp(260px, 26vw, 380px);
 height: auto;
}
.ph-dark-hero .eyebrow {
 font-size: var(--ph-fs-14);
 letter-spacing: 0.22em;
 font-weight: 500;
 color: var(--ph-pulse-500);
 text-transform: uppercase;
 margin-bottom: 28px;
}
.ph-dark-hero h1 {
 color: var(--ph-surface-0);
 font-size: clamp(2.75rem, 6.4vw, 4.75rem);
 line-height: 1;
 letter-spacing: -0.025em;
 margin: 0 0 24px;
 font-weight: 200;
}
.ph-dark-hero h1 .ital {
 font-family: var(--ph-font-italic);
 font-style: italic;
 font-weight: 400;
}
.ph-dark-hero h1 .bold { font-weight: 800; }
.ph-dark-hero h1 .lime { color: var(--ph-pulse-500); font-weight: 800; }
.ph-dark-hero .lead {
 color: var(--ph-surface-0);
 /* Bumped from 0.78 to 0.92 after WCAG AA review. Tech contrast was
    ~8:1 at 0.78, but visually the lead read slightly faint; the new
    value keeps the brand softness while paying back any AA margin. */
 opacity: 0.92;
 font-size: var(--ph-fs-20);
 max-width: 60ch;
 margin: 24px 0 36px;
}
.ph-dark-hero .lead p { margin: 0 0 8px; }
/* Hero bullet list: lime hex-style markers on the dark backdrop. */
.ph-dark-hero .lead .ph-hero-bullets {
 list-style: none;
 padding: 0;
 margin: 6px 0 10px;
}
.ph-dark-hero .lead .ph-hero-bullets li {
 position: relative;
 padding: 2px 0 2px 20px;
 line-height: 1.5;
}
.ph-dark-hero .lead .ph-hero-bullets li::before {
 content: "";
 position: absolute;
 left: 2px;
 top: 12px;
 width: 8px;
 height: 8px;
 background: var(--ph-pulse-500);
 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.ph-dark-hero .lead .ph-hero-bullets li a {
 color: var(--ph-pulse-500);
 text-decoration: none;
 border-bottom: 1px solid rgba(199, 238, 92, 0.4);
}
.ph-dark-hero .lead .ph-hero-bullets li a:hover {
 border-bottom-color: var(--ph-pulse-500);
}
.ph-dark-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* Hero CTA inverted (was lime fill + dark text, which read low-
   contrast against the bright lime). Dark fill + lime text + lime
   border gives ~12:1 contrast and reads cleanly. Hover swaps to
   lime fill so the affordance is unmistakable. */
.ph-dark-hero .ph-btn-primary {
 background: var(--ph-navy-900);
 color: var(--ph-pulse-500);
 border-color: var(--ph-pulse-500);
 font-weight: 700;
}
.ph-dark-hero .ph-btn-primary:hover {
 background: var(--ph-pulse-500);
 color: var(--ph-navy-900);
 border-color: var(--ph-pulse-500);
}
.ph-dark-hero .ph-btn-ghost {
 border-color: var(--ph-pulse-500);
 color: var(--ph-pulse-500);
 background: transparent;
}
.ph-dark-hero .ph-btn-ghost:hover {
 background: rgba(199, 238, 92, 0.10);
 color: var(--ph-pulse-500);
 border-color: var(--ph-pulse-500);
}
@media (max-width: 900px) {
 .ph-dark-hero {
 padding: clamp(64px, 12vh, 120px) 24px 48px;
 /* mobile keeps full-viewport behavior, set above */
 }
}

/* ---- "explain it like I'm 5" toggle */
.ph-eli5 {
 background: linear-gradient(135deg, var(--ph-pulse-100), var(--ph-navy-100));
 border-left: 4px solid var(--ph-navy-700);
 padding: 16px 20px;
 border-radius: 0 var(--ph-radius) var(--ph-radius) 0;
 margin: 24px 0;
}
.ph-eli5 .label {
 font-size: var(--ph-fs-14); font-weight: 700;
 color: var(--ph-navy-900); text-transform: uppercase; letter-spacing: 0.12em;
 margin-bottom: 6px;
}
.ph-eli5 p { margin: 0; max-width: none; font-size: var(--ph-fs-20); color: var(--ph-ink-900); }

/* ---- Defensive link contrast on dark / navy surfaces.
   The default `a` styling is petrol-on-cream, which becomes invisible on
   the dark callouts (article StatStrip, two-lens companion, writing-band
   featured block, founders principle, focus end CTA, coverage-island
   stats ribbon, article image + map overlay captions). MDX content
   (Markdown links) inherits the global default unless we override it
   here. */
.ph-art-strip a,
.ph-art-strip a:visited,
.ph-art-img figcaption a,
.ph-art-img figcaption a:visited,
.ph-art-map-cap a,
.ph-art-map-cap a:visited,
.ph-post-companion a,
.ph-post-companion a:visited,
.ph-writing-featured-head a,
.ph-writing-featured-head a:visited,
.ph-writing-featured-foot a,
.ph-writing-featured-foot a:visited,
.ph-fa-close a,
.ph-fa-close a:visited,
.ph-principle a,
.ph-principle a:visited,
.ph-coverage-island .ph-coverage-stats a,
.ph-live-ribbon a,
.ph-live-ribbon a:visited {
  color: var(--ph-pulse-500);
  text-decoration-color: rgba(199, 238, 92, 0.55);
}
.ph-art-strip a:hover,
.ph-art-img figcaption a:hover,
.ph-art-map-cap a:hover,
.ph-post-companion a:hover,
.ph-writing-featured-head a:hover,
.ph-writing-featured-foot a:hover,
.ph-fa-close a:hover,
.ph-principle a:hover,
.ph-coverage-island .ph-coverage-stats a:hover,
.ph-live-ribbon a:hover {
  color: #ffffff;
  text-decoration-color: var(--ph-pulse-500);
}
/* Inside the featured cards (white background), restore default petrol
   so titles + CTA links read against the card surface, not the band. */
.ph-writing-feature a {
  color: var(--ph-ink-900);
  text-decoration-color: transparent;
}
.ph-writing-feature-cta {
  color: var(--ph-navy-700) !important;
}
.ph-writing-feature a:hover {
  color: var(--ph-navy-700);
  text-decoration-color: var(--ph-navy-700);
}

/* Light-cream / lime-tint surfaces: keep the default petrol link but make
   sure the underline carries enough contrast. */
.ph-art-tldr a,
.ph-art-tldr-card a,
.ph-art-row-gap a,
.ph-stand a {
  color: var(--ph-navy-700);
  text-decoration-color: var(--ph-navy-700);
}
.ph-art-tldr a:hover,
.ph-art-tldr-card a:hover,
.ph-art-row-gap a:hover,
.ph-stand a:hover {
  color: var(--ph-navy-900);
}

/* ---- "What just changed" — system-wide observatory pulse, sits
   above the footer. Three rows: live layer refresh, last hearing
   transcript, most recent data correction. */
.ph-just-changed {
 margin-top: 64px;
 padding: 14px 18px;
 background: var(--ph-surface-50);
 border: 1px solid var(--ph-surface-100);
 border-left: 4px solid var(--ph-pulse-700);
 border-radius: var(--ph-radius);
 display: grid;
 grid-template-columns: auto 1fr 1fr 1fr;
 gap: 12px 20px;
 align-items: center;
 font-size: 0.78rem;
}
.ph-just-changed-eye {
 font-size: 0.66rem;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--ph-pulse-900);
 white-space: nowrap;
}
.ph-jc-row {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}
.ph-jc-time {
 font-size: 0.66rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--ph-navy-700);
 font-variant-numeric: tabular-nums;
}
.ph-jc-body {
 color: var(--ph-ink-700);
 line-height: 1.4;
}
@media (max-width: 900px) {
 .ph-just-changed { grid-template-columns: 1fr; gap: 10px; }
 .ph-just-changed-eye { margin-bottom: 4px; }
}

/* ---- footer brand lockup */
.ph-foot {
 margin-top: 24px; padding-top: 24px;
 border-top: 1px solid var(--ph-surface-100);
 color: var(--ph-ink-500); font-size: var(--ph-fs-14);
 display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
}
.ph-foot strong { color: var(--ph-ink-900); }
.ph-foot-legal { flex-basis: 100%; opacity: 0.6; font-size: var(--ph-fs-13, 0.8125rem); }

/* ---- small */
.ph-tag { display: inline-block; padding: 2px 8px; border-radius: 10px;
 font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
 background: var(--ph-pulse-100); color: var(--ph-pulse-900);
}
.ph-tag-amber { background: var(--ph-accent-100); color: var(--ph-accent-700); }
.ph-tag-navy { background: var(--ph-navy-100); color: var(--ph-navy-900); }

/* ---- responsive: collapse sidebar */
@media (max-width: 900px) {
 .ph-shell { grid-template-columns: 1fr; }
 .ph-sidebar { position: static; height: auto; }
 .ph-main { padding: 32px 24px; }
}

/* ============================================================
   /map page: native DC island styles (DC list + Leaflet map,
   key-stat boxes, status + overlay filter tabs, credibility
   chips, hex-layer legend). Lives here rather than inline on the
   page because Astro <style is:global> after </Page> was getting
   silently dropped.
   ============================================================ */
 /* The map page bleeds wider than the editorial 1100px max-width.
    Maps need horizontal real estate to read. */
 .ph-main { max-width: none; padding-right: 32px; padding-left: 32px; }
 @media (min-width: 1500px) {
 .ph-main { padding-right: 56px; padding-left: 56px; }
 }
 @media (max-width: 760px) {
 .ph-shell-top .ph-main { padding-right: 12px; padding-left: 12px; }
 }

 /* ---- DC island shell (mirrors MapIsland chrome) */
 .ph-dc-island { padding: 0; overflow: hidden; position: relative; }
 .ph-dc-island-strip {
 height: 4px; width: 100%;
 background: linear-gradient(90deg, #0E3B36, #14b8a6, #C7EE5C);
 }
 .ph-dc-island-head {
 padding: 20px 24px;
 border-bottom: 1px solid var(--ph-surface-100);
 display: flex; gap: 16px; align-items: flex-start;
 }
 .ph-dc-island-glyph {
 flex: 0 0 128px; width: 128px; height: 128px;
 margin-top: 2px;
 }
 .ph-dc-island-head-body { flex: 1 1 auto; min-width: 0; }
 .ph-dc-island-eyebrow {
 font-size: var(--ph-fs-14);
 text-transform: uppercase; letter-spacing: 0.16em;
 color: var(--ph-navy-700); font-weight: 600;
 }
 .ph-dc-island-head h3 { margin: 4px 0 6px; }
 .ph-dc-island-head p { margin: 0; color: var(--ph-ink-500); font-size: var(--ph-fs-14); max-width: 78ch; }
 @media (max-width: 760px) {
 .ph-dc-island-head { padding: 16px 16px; gap: 12px; }
 .ph-dc-island-glyph { flex: 0 0 88px; width: 88px; height: 88px; }
 .ph-dc-island-head h3 { font-size: 1.1rem; }
 }

 /* ---- Hero key-stats */
 .ph-dc-keystats {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
 gap: 0;
 background: var(--ph-surface-50);
 border-bottom: 1px solid var(--ph-surface-100);
 }
 .ph-dc-keystat {
 padding: 18px 22px;
 border-right: 1px solid var(--ph-surface-100);
 border-bottom: 1px solid var(--ph-surface-100);
 background: var(--ph-surface-0);
 }
 .ph-dc-keystat:last-child { border-right: 0; }
 .ph-dc-keystat .v {
 font-family: var(--ph-font-display, "Archivo", sans-serif);
 font-weight: 900;
 font-size: 2rem;
 line-height: 1;
 color: var(--ph-navy-700);
 letter-spacing: -0.02em;
 }
 .ph-dc-keystat .v .unit {
 font-size: 0.875rem;
 font-weight: 600;
 color: var(--ph-ink-500);
 margin-left: 4px;
 letter-spacing: 0;
 }
 .ph-dc-keystat h4 {
 margin: 6px 0 4px;
 font-size: var(--ph-fs-14);
 font-weight: 700;
 color: var(--ph-ink-900);
 }
 .ph-dc-keystat p {
 margin: 0;
 font-size: 0.8125rem;
 line-height: 1.45;
 color: var(--ph-ink-500);
 }
 @media (max-width: 760px) {
 .ph-dc-keystats { grid-template-columns: 1fr 1fr; }
 }

 /* ---- Status filter tabs */
 .ph-dc-tabs {
 display: flex; flex-wrap: wrap; gap: 6px;
 padding: 14px 24px;
 background: var(--ph-surface-0);
 border-bottom: 1px solid var(--ph-surface-100);
 align-items: center;
 }
 .ph-dc-tabs .lbl {
 font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
 text-transform: uppercase; color: var(--ph-ink-500);
 margin-right: 6px;
 }
 .ph-dc-tabs button {
 background: transparent;
 border: 1px solid var(--ph-surface-100);
 border-radius: 999px;
 padding: 6px 14px;
 font-size: 0.8125rem; font-weight: 600;
 color: var(--ph-ink-700);
 cursor: pointer;
 transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 .ph-dc-tabs button:hover {
 background: var(--ph-pulse-100);
 border-color: var(--ph-pulse-500);
 }
 .ph-dc-tabs button.active {
 background: var(--ph-navy-700);
 border-color: var(--ph-navy-700);
 color: var(--ph-surface-0);
 }
 .ph-dc-tabs .count {
 display: inline-block;
 margin-left: 4px;
 padding: 0 6px;
 font-size: 0.6875rem;
 font-weight: 700;
 background: rgba(0,0,0,0.08);
 border-radius: 4px;
 }
 .ph-dc-tabs button.active .count { background: rgba(255,255,255,0.18); }
 .ph-dc-tabs-overlay {
 background: var(--ph-surface-50);
 border-top: 1px solid var(--ph-surface-100);
 border-bottom: 1px solid var(--ph-surface-100);
 }
 .ph-dc-tabs-overlay .hint {
 font-size: 0.75rem;
 color: var(--ph-ink-500);
 font-style: italic;
 margin-left: 8px;
 }

 /* ---- Hex underlay legend (under the overlay tabs) */
 .ph-dc-legend {
 display: flex; flex-wrap: wrap; gap: 8px;
 align-items: center;
 padding: 8px 24px;
 font-size: 0.75rem;
 color: var(--ph-ink-700);
 background: var(--ph-surface-0);
 border-bottom: 1px solid var(--ph-surface-100);
 min-height: 0;
 }
 .ph-dc-legend:empty { padding: 0; border-bottom: 0; }
 .ph-dc-legend .leg-lab {
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.10em;
 font-size: 0.6875rem;
 color: var(--ph-navy-700);
 }
 .ph-dc-legend .leg-scale {
 font-style: italic;
 color: var(--ph-ink-500);
 margin-right: 4px;
 }
 .ph-dc-legend .leg-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
 .ph-dc-legend .sw {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 2px 6px;
 background: var(--ph-surface-50);
 border-radius: 3px;
 font-size: 0.6875rem;
 color: var(--ph-ink-700);
 white-space: nowrap;
 }
 .ph-dc-legend .sw i {
 display: inline-block;
 width: 10px; height: 10px;
 border-radius: 2px;
 }

 /* ---- Credibility chips + dots */
 .cred-dot {
 display: inline-block;
 width: 7px; height: 7px;
 border-radius: 50%;
 margin-right: 6px;
 vertical-align: middle;
 flex: 0 0 7px;
 }
 .cred-planning, .cred-dot.cred-planning { background: #0E3B36; }
 .cred-operator, .cred-dot.cred-operator { background: #16a34a; }
 .cred-crossref, .cred-dot.cred-crossref { background: #F0A93B; }
 .cred-unknown,  .cred-dot.cred-unknown  { background: #94a3b8; }

 /* ---- List + map grid */
 .ph-dc-grid {
 display: grid; gap: 0;
 grid-template-columns: minmax(260px, 1fr) 3fr;
 align-items: stretch;
 background: var(--ph-surface-50);
 }
 @media (max-width: 880px) {
 .ph-dc-grid { grid-template-columns: 1fr; }
 }

 .ph-dc-list-side {
 background: var(--ph-surface-0);
 border-right: 1px solid var(--ph-surface-100);
 display: flex; flex-direction: column;
 max-height: 640px;
 }
 .ph-dc-list-head {
 padding: 12px 18px;
 background: var(--ph-pulse-100);
 border-bottom: 1px solid var(--ph-surface-100);
 font-weight: 700;
 font-size: var(--ph-fs-14);
 color: var(--ph-navy-900);
 }
 .ph-dc-list-head .hint {
 display: block;
 margin-top: 2px;
 font-size: 0.6875rem;
 font-weight: 500;
 color: var(--ph-ink-500);
 letter-spacing: 0.06em;
 text-transform: uppercase;
 }
 .ph-dc-list-ol {
 list-style: none; padding: 0; margin: 0;
 overflow-y: auto; flex: 1 1 auto;
 }
 .ph-dc-list-ol li {
 display: grid;
 grid-template-columns: 32px 1fr auto;
 gap: 10px;
 padding: 10px 14px;
 border-bottom: 1px solid var(--ph-surface-50);
 cursor: pointer;
 align-items: center;
 transition: background 0.12s;
 }
 .ph-dc-list-ol li:hover { background: var(--ph-pulse-100); }
 .ph-dc-list-ol li.active {
 background: var(--ph-pulse-500);
 color: var(--ph-navy-900);
 }
 .ph-dc-list-ol li.active .op { color: var(--ph-navy-900); opacity: 0.75; }
 .ph-dc-list-ol li.active .mw { color: var(--ph-navy-900); }
 .ph-dc-list-ol li.loading,
 .ph-dc-list-ol li.empty {
 display: block; opacity: 0.65; cursor: default; padding: 16px;
 font-size: 0.8125rem; color: var(--ph-ink-500);
 }
 .ph-dc-list-ol li.loading:hover,
 .ph-dc-list-ol li.empty:hover { background: transparent; }
 .ph-dc-list-ol .rank {
 font-family: var(--ph-font-mono, "JetBrains Mono", monospace);
 font-size: 0.75rem;
 color: var(--ph-ink-500);
 font-weight: 600;
 }
 .ph-dc-list-ol .name-col { min-width: 0; }
 .ph-dc-list-ol .name {
 font-weight: 600;
 font-size: 0.875rem;
 line-height: 1.25;
 color: var(--ph-ink-900);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
 .ph-dc-list-ol .ws-chip {
 display: inline-block;
 background: var(--ph-pulse-500);
 color: var(--ph-navy-900);
 font-size: 0.6rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 padding: 1px 5px;
 border-radius: 3px;
 margin-left: 4px;
 vertical-align: middle;
 }
 .ph-dc-list-ol .op {
 font-size: 0.6875rem;
 color: var(--ph-ink-500);
 margin-top: 2px;
 }
 .ph-dc-list-ol .mw {
 font-family: var(--ph-font-display, "Archivo", sans-serif);
 font-weight: 800;
 color: var(--ph-navy-700);
 font-size: 0.875rem;
 }
 .ph-dc-list-ol .undisclosed {
 color: var(--ph-ink-300);
 font-weight: 500;
 }

 .ph-dc-map-wrap {
 position: relative;
 background: var(--ph-surface-100);
 min-height: 640px;
 }
 .ph-dc-map { height: 640px; width: 100%; }

 /* In-map chrome — corners chosen to avoid Leaflet defaults:
    - top-left:    Leaflet zoom control sits here (untouched)
    - top-right:   MapOverlay panel + its live chip
    - bottom-right: LGA selector (Leaflet bottomright control)
    - bottom-left:  FREE — fullscreen button + spot-something-off chip stack here
    z-index 700 sits above Leaflet panes (markers 600) but under
    Leaflet controls (1000) which is intentional. */
 .ph-map-fs-btn {
 position: absolute;
 /* Stacked ABOVE the .ph-dc-map-status box (which sits at bottom:10
    left:10 and carries the "Loading map…" / item-count text). */
 bottom: 50px; left: 12px;
 z-index: 700;
 width: 34px; height: 34px;
 border-radius: 6px;
 background: rgba(7, 41, 37, 0.82);
 color: var(--ph-pulse-500);
 border: 1px solid rgba(199, 238, 92, 0.32);
 font-size: 1.05rem;
 line-height: 1;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 transition: background 0.15s, color 0.15s;
 }
 .ph-map-fs-btn:hover {
 background: var(--ph-pulse-500);
 color: var(--ph-navy-900);
 }

 .ph-map-spot-chip {
 position: absolute;
 bottom: 52px; left: 56px;
 z-index: 700;
 padding: 6px 12px;
 border-radius: 99px;
 background: rgba(7, 41, 37, 0.82);
 color: #F2EDE3;
 font-size: 0.7rem;
 font-weight: 600;
 letter-spacing: 0.02em;
 text-decoration: none;
 border: 1px solid rgba(199, 238, 92, 0.18);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 transition: background 0.15s, color 0.15s;
 white-space: nowrap;
 }
 .ph-map-spot-chip:hover {
 background: var(--ph-pulse-500);
 color: var(--ph-navy-900);
 border-color: var(--ph-pulse-500);
 }
 @media (max-width: 600px) {
 .ph-map-spot-chip { font-size: 0.62rem; padding: 4px 10px; }
 }

 /* Fullscreen state: the map-wrap becomes a fixed full-viewport
    overlay. The Leaflet map auto-resizes via invalidateSize() in JS. */
 .ph-dc-map-wrap.ph-map-fs {
 position: fixed !important;
 inset: 0 !important;
 z-index: 9000;
 background: var(--ph-navy-900);
 min-height: 0;
 }
 .ph-dc-map-wrap.ph-map-fs .ph-dc-map { height: 100vh; }
 .ph-dc-map-wrap.ph-map-fs .ph-map-fs-btn::before {
 content: "\D7"; /* × glyph; signals exit-fullscreen */
 }
 .ph-dc-map-wrap.ph-map-fs .ph-map-fs-btn { font-size: 1.2rem; }
 body.ph-map-fs-active { overflow: hidden; }
 .ph-dc-map-status {
 position: absolute;
 bottom: 10px; left: 10px;
 background: rgba(255,255,255,0.92);
 border: 1px solid var(--ph-surface-100);
 border-radius: 6px;
 padding: 4px 10px;
 font-size: 0.75rem;
 font-weight: 600;
 color: var(--ph-ink-700);
 z-index: 500;
 pointer-events: none;
 }
 .leaflet-popup-content-wrapper {
 border-radius: var(--ph-radius);
 box-shadow: 0 4px 20px rgba(7, 41, 37, 0.18);
 }
 .leaflet-container {
 font-family: var(--ph-font-body, "Archivo", sans-serif);
 background: var(--ph-surface-50);
 }

 @media (max-width: 880px) {
 .ph-dc-list-side {
 max-height: 320px;
 border-right: 0;
 border-bottom: 1px solid var(--ph-surface-100);
 }
 .ph-dc-map-wrap { min-height: 480px; }
 .ph-dc-map { height: 480px; }
 }

 .ph-dc-island-foot {
 padding: 14px 24px;
 display: flex; gap: 12px; flex-wrap: wrap;
 border-top: 1px solid var(--ph-surface-100);
 background: var(--ph-surface-0);
 }
 @media (max-width: 760px) {
 .ph-dc-island-foot .ph-btn { flex: 1 1 auto; justify-content: center; font-size: 0.9rem; padding: 10px 14px; }
 }

/* ---- Hex underlay popup (per-mode summary). Brand-styled to match
       the DC marker popup, distinguishable by a thin pulse-coloured
       accent rail so visitors can tell hex vs DC popups apart. */
.ph-dc-hex-popup .leaflet-popup-content-wrapper {
 border-left: 4px solid var(--ph-pulse-500);
}
.ph-dc-hex-popup .hp { font-family: var(--ph-font-body); min-width: 220px; }
.ph-dc-hex-popup .hp-mode {
 font-size: 0.6875rem;
 text-transform: uppercase;
 letter-spacing: 0.14em;
 font-weight: 700;
 color: var(--ph-navy-700);
 margin-bottom: 4px;
}
.ph-dc-hex-popup .hp-where {
 font-size: 0.875rem;
 font-weight: 700;
 color: var(--ph-ink-900);
 margin-bottom: 8px;
}
.ph-dc-hex-popup .hp-headline {
 display: flex; align-items: baseline; gap: 6px;
 margin-bottom: 6px;
}
.ph-dc-hex-popup .hp-headline .v {
 font-family: var(--ph-font-display);
 font-weight: 900;
 font-size: 1.625rem;
 letter-spacing: -0.02em;
 color: var(--ph-navy-700);
 line-height: 1;
}
.ph-dc-hex-popup .hp-headline .u {
 font-size: 0.6875rem;
 color: var(--ph-ink-500);
 font-weight: 500;
 letter-spacing: 0.04em;
}
.ph-dc-hex-popup .hp-line {
 font-size: 0.8125rem;
 color: var(--ph-ink-700);
 line-height: 1.45;
 margin-top: 2px;
}
.ph-dc-hex-popup .hp-line b { color: var(--ph-ink-900); }

/* ---- Hex popup: four-row "neighbourhood read". Single click on any
       hex returns all four lenses (vulnerability, UHI, canopy,
       biodiversity) at once. The overlay tabs still drive the hex
       fill colour, but the popup is mode-agnostic. */
.ph-dc-hex-popup .hp-row {
 display: grid;
 grid-template-columns: 1fr auto;
 grid-template-rows: auto auto;
 column-gap: 12px;
 padding: 8px 0;
 border-top: 1px solid var(--ph-surface-100);
 align-items: baseline;
}
.ph-dc-hex-popup .hp-row:first-of-type { border-top: 1px solid var(--ph-pulse-500); }
.ph-dc-hex-popup .hp-row-lab {
 font-size: 0.6875rem;
 text-transform: uppercase;
 letter-spacing: 0.10em;
 font-weight: 700;
 color: var(--ph-navy-700);
 grid-column: 1 / 2;
 grid-row: 1 / 2;
}
.ph-dc-hex-popup .hp-row-val {
 grid-column: 2 / 3;
 grid-row: 1 / 2;
 text-align: right;
 white-space: nowrap;
}
.ph-dc-hex-popup .hp-row-val .v {
 font-family: var(--ph-font-display);
 font-weight: 900;
 font-size: 1.125rem;
 color: var(--ph-navy-900);
 letter-spacing: -0.01em;
 line-height: 1;
}
.ph-dc-hex-popup .hp-row-val .v-text {
 font-weight: 700;
 font-size: 0.875rem;
}
.ph-dc-hex-popup .hp-row-val .u {
 display: block;
 font-size: 0.625rem;
 color: var(--ph-ink-500);
 font-weight: 500;
 letter-spacing: 0.04em;
 margin-top: 2px;
}
.ph-dc-hex-popup .hp-row-det {
 grid-column: 1 / 3;
 grid-row: 2 / 3;
 font-size: 0.75rem;
 color: var(--ph-ink-500);
 line-height: 1.4;
 margin-top: 2px;
}
.ph-dc-hex-popup .hp-row-det b { color: var(--ph-ink-900); font-weight: 700; }

/* ---- LGA filter control. Sits in Leaflet's bottom-right gutter as
       a small brand-styled pill: "LGA [dropdown]". Combines with the
       status tabs above the map (both filters AND together). */
.ph-dc-lga-control {
 background: var(--ph-surface-0);
 border: 1px solid var(--ph-surface-100);
 border-radius: 999px;
 padding: 4px 6px 4px 12px;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 box-shadow: 0 2px 8px rgba(7, 41, 37, 0.10);
 font-family: var(--ph-font-body);
 font-size: 0.8125rem;
 line-height: 1;
}
.ph-dc-lga-control label {
 font-size: 0.625rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.14em;
 color: var(--ph-ink-500);
 user-select: none;
}
.ph-dc-lga-control select {
 background: var(--ph-surface-0);
 border: 1px solid var(--ph-surface-100);
 border-radius: 6px;
 padding: 5px 22px 5px 10px;
 font-family: inherit;
 font-size: 0.8125rem;
 font-weight: 600;
 color: var(--ph-ink-900);
 cursor: pointer;
 max-width: 220px;
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 background-image: linear-gradient(45deg, transparent 50%, var(--ph-ink-500) 50%),
                   linear-gradient(135deg, var(--ph-ink-500) 50%, transparent 50%);
 background-position: calc(100% - 12px) calc(50% - 2px),
                      calc(100% - 8px) calc(50% - 2px);
 background-size: 4px 4px, 4px 4px;
 background-repeat: no-repeat;
}
.ph-dc-lga-control select:hover { border-color: var(--ph-navy-700); }
.ph-dc-lga-control select:focus {
 outline: none;
 border-color: var(--ph-pulse-500);
 box-shadow: 0 0 0 2px var(--ph-pulse-100);
}
@media (max-width: 760px) {
 .ph-dc-lga-control { padding: 3px 6px 3px 10px; }
 .ph-dc-lga-control select { max-width: 160px; font-size: 0.75rem; }
}

/* Hex ID chip inside the popup where-line. Monospaced, copyable. */
.ph-dc-hex-popup .hp-where {
 display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ph-dc-hex-popup .hp-hex {
 display: inline-block;
 font-family: var(--ph-font-mono, "JetBrains Mono", monospace);
 font-size: 0.6875rem;
 font-weight: 600;
 background: var(--ph-surface-50);
 border: 1px solid var(--ph-surface-100);
 color: var(--ph-navy-700);
 padding: 1px 6px;
 border-radius: 4px;
 letter-spacing: 0.02em;
 user-select: all;
}

/* ---- Map data-correction disclaimer. Lives between the list+map
       grid and the footer CTAs. Amber-accent left rail so it reads as
       "feedback wanted" rather than "warning". */
.ph-dc-disclaimer {
 padding: 14px 24px;
 background: var(--ph-accent-100);
 border-top: 1px solid var(--ph-surface-100);
 border-left: 4px solid var(--ph-accent-500);
 display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
 font-size: 0.8125rem;
 line-height: 1.5;
 color: var(--ph-ink-700);
}
.ph-dc-disclaimer .lab {
 font-size: 0.6875rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.14em;
 color: var(--ph-accent-700);
 white-space: nowrap;
}
.ph-dc-disclaimer .msg { flex: 1 1 auto; min-width: 0; }
.ph-dc-disclaimer a {
 color: var(--ph-navy-700);
 font-weight: 700;
 text-decoration: underline;
 text-underline-offset: 2px;
}
.ph-dc-disclaimer a:hover { color: var(--ph-navy-900); }
@media (max-width: 760px) {
 .ph-dc-disclaimer { padding: 12px 16px; }
}

/* ---- Live-incidents map: layer-toggle dots inside the overlay tabs
       and incident-type badges inside the list rows. */
.ph-dc-tabs-overlay button .dot {
 display: inline-block;
 width: 8px; height: 8px;
 border-radius: 50%;
 margin-right: 6px;
 vertical-align: middle;
}
.ph-dc-tabs-overlay button .dot-fire    { background: #ef4444; }
.ph-dc-tabs-overlay button .dot-outage  { background: #F0A93B; }
.ph-dc-tabs-overlay button .dot-transit { background: #38bdf8; }
.ph-dc-tabs-overlay button:not(.active) {
 opacity: 0.55;
}
.ph-dc-list-ol .inc-badge {
 display: inline-block;
 font-size: 0.625rem;
 font-weight: 800;
 letter-spacing: 0.12em;
 padding: 1px 5px;
 color: #fff;
 border-radius: 3px;
 vertical-align: middle;
 margin-right: 6px;
}

/* ESG crosswalk table on /esg. Horizontally scrolls on narrow viewports
   instead of squashing the cells; row striping mirrors the existing
   ph-card surface so it doesn't shout. */
.ph-crosswalk-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--ph-ink-100, #e8e2d3);
  border-radius: 6px;
  background: var(--ph-surface-0, #fff);
}
.ph-crosswalk {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ph-fs-14);
  min-width: 720px;
}
.ph-crosswalk th,
.ph-crosswalk td {
  text-align: left;
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--ph-ink-100, #e8e2d3);
}
.ph-crosswalk thead th {
  background: var(--ph-navy-900);
  color: var(--ph-pulse-500);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
  position: sticky;
  top: 0;
}
.ph-crosswalk tbody th {
  font-weight: 700;
  color: var(--ph-ink-900);
  background: var(--ph-surface-1, #f4efe2);
  width: 26%;
}
.ph-crosswalk tbody tr:last-child th,
.ph-crosswalk tbody tr:last-child td { border-bottom: none; }
.ph-crosswalk td a {
  color: var(--ph-navy-700);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ph-crosswalk td a:hover { text-decoration: underline; }

/* Methodology page rendering, used by both /methodology (deprecated)
   and the gated /app/methodology surface. */
.ph-meth-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ph-meth-filters button {
  font-family: inherit;
  font-size: var(--ph-fs-14);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--ph-ink-200, #d4d0c4);
  background: var(--ph-surface-0, #fff);
  color: var(--ph-ink-700);
  cursor: pointer;
}
.ph-meth-filters button.active {
  background: var(--ph-navy-900);
  color: var(--ph-pulse-500);
  border-color: var(--ph-navy-900);
}
.ph-meth-section { scroll-margin-top: 80px; }
.ph-meth-section h3 { margin: 0 0 6px; }
.ph-meth-prov {
  color: var(--ph-ink-500);
  font-size: var(--ph-fs-14);
  margin: 6px 0 12px;
}
.ph-meth-prov code { font-size: 0.92em; }
.ph-meth-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}
.ph-meth-formula {
  background: var(--ph-surface-1, #f4efe2);
  border-left: 3px solid var(--ph-pulse-500);
  padding: 12px 14px;
  border-radius: 4px;
  margin: 12px 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--ph-fs-14);
  white-space: pre-wrap;
  overflow-x: auto;
}
.ph-meth-constants {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ph-fs-14);
  margin: 10px 0;
}
.ph-meth-constants th,
.ph-meth-constants td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--ph-ink-100, #e8e2d3);
  vertical-align: top;
}
.ph-meth-constants th { font-weight: 600; color: var(--ph-ink-700); }
.ph-meth-constants code { font-size: 0.92em; }
.ph-meth-notes {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--ph-ink-700);
  font-size: var(--ph-fs-14);
}
.ph-meth-notes li { margin: 4px 0; }
.ph-meth-deeplink {
  color: var(--ph-navy-700);
  font-size: var(--ph-fs-14);
  font-weight: 600;
  text-decoration: none;
  margin-left: 8px;
}
.ph-meth-deeplink:hover { text-decoration: underline; }
.ph-meth-status-standard { background: #16a34a; color: #fff; }
.ph-meth-status-exemplar { background: #C7EE5C; color: #0E3B36; }
.ph-meth-status-proxy    { background: #94a3b8; color: #fff; }

/* Auth-aware member bar. Sits directly below the top nav when the user
   is signed in. Links appear / disappear based on the user's role
   (data-role-staff / data-role-super attributes flipped by Page.astro
   init()). */
.ph-memberbar {
  background: var(--ph-navy-900, #072925);
  border-top: 1px solid rgba(199, 238, 92, 0.18);
  border-bottom: 1px solid rgba(199, 238, 92, 0.18);
}
.ph-memberbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--ph-fs-14);
}
.ph-memberbar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #C7EE5C;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ph-memberbar-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #C7EE5C;
  box-shadow: 0 0 0 2px rgba(199, 238, 92, 0.18);
}
.ph-memberbar nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ph-memberbar nav a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.ph-memberbar nav a:hover {
  color: #C7EE5C;
  border-bottom-color: rgba(199, 238, 92, 0.6);
}
.ph-memberbar nav a[hidden] { display: none !important; }
@media (max-width: 640px) {
  .ph-memberbar-inner { padding: 6px 16px; gap: 10px; }
  .ph-memberbar nav { gap: 10px; }
}

/* Outreach personas page (/app/personas). Internal-only research view;
   tone is tighter and more documentary than the marketing surfaces. */
.ph-personas-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin: 24px 0 12px;
  padding: 16px 18px;
  background: var(--ph-surface-1, #f4efe2);
  border-radius: 8px;
}
.ph-personas-search {
  flex: 1 1 280px;
  min-width: 0;
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--ph-fs-14);
  border: 1px solid var(--ph-ink-200, #d4d0c4);
  border-radius: 6px;
  background: #fff;
}
.ph-personas-search:focus {
  outline: 2px solid var(--ph-pulse-500, #C7EE5C);
  outline-offset: 1px;
}
.ph-personas-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ph-personas-tags button {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ph-ink-200, #d4d0c4);
  background: #fff;
  color: var(--ph-ink-700);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.ph-personas-tags button:hover { border-color: var(--ph-navy-700); color: var(--ph-navy-700); }
.ph-personas-tags button.active {
  background: var(--ph-navy-900);
  color: var(--ph-pulse-500);
  border-color: var(--ph-navy-900);
}
.ph-personas-count {
  margin: 6px 0 18px;
  font-size: var(--ph-fs-14);
  color: var(--ph-ink-700);
}
.ph-personas-group { margin-top: 24px; }
.ph-personas-agency {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-ink-500);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ph-ink-100, #e8e2d3);
}
.ph-personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.ph-persona-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--ph-ink-100, #e8e2d3);
  border-left: 4px solid var(--accent, var(--ph-navy-700));
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ph-persona-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(7, 41, 37, 0.08);
}
.ph-persona-hex {
  flex: 0 0 48px;
  width: 48px; height: 48px;
}
.ph-persona-hex svg { width: 100%; height: 100%; }
.ph-persona-hex--large { flex: 0 0 72px; width: 72px; height: 72px; }
.ph-persona-body { flex: 1 1 auto; min-width: 0; }
.ph-persona-name {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ph-ink-900);
  line-height: 1.25;
}
.ph-persona-role {
  font-size: var(--ph-fs-14);
  color: var(--ph-ink-500);
  margin-top: 2px;
  margin-bottom: 8px;
}
.ph-persona-summary {
  margin: 0 0 12px;
  font-size: var(--ph-fs-14);
  color: var(--ph-ink-700);
  line-height: 1.45;
  /* Trim long summaries on the card so the grid stays even. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ph-persona-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.ph-persona-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ph-surface-1, #f4efe2);
  color: var(--ph-ink-700);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.ph-persona-intro {
  font-size: 0.72rem;
  color: var(--ph-ink-500);
}
.ph-persona-intro strong { color: var(--ph-navy-700); }

/* Detail view */
.ph-persona-detail {
  margin-top: 32px;
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid var(--ph-ink-100, #e8e2d3);
  border-top: 4px solid var(--accent, var(--ph-navy-700));
  border-radius: 8px;
}
.ph-persona-detail-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.ph-persona-detail-role {
  font-size: var(--ph-fs-14);
  color: var(--ph-ink-500);
  margin-bottom: 8px;
}
.ph-persona-detail-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ph-persona-detail-lead { margin: 0 0 18px; }
.ph-persona-intro-banner {
  padding: 12px 16px;
  background: var(--ph-surface-1, #f4efe2);
  border-left: 3px solid #F0A93B;
  border-radius: 4px;
  font-size: var(--ph-fs-14);
  margin: 0 0 20px;
}
.ph-persona-intro-banner .ph-tag { margin-right: 8px; }
.ph-persona-content {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ph-ink-900);
}
.ph-persona-content h2 {
  margin: 28px 0 10px;
  font-size: 1.3rem;
}
.ph-persona-content h3 {
  margin: 20px 0 8px;
  font-size: 1.05rem;
}
.ph-persona-content p { margin: 0 0 12px; }
.ph-persona-content ul,
.ph-persona-content ol { margin: 0 0 12px; padding-left: 22px; }
.ph-persona-content li { margin: 4px 0; }
.ph-persona-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: var(--ph-fs-14);
}
.ph-persona-content th,
.ph-persona-content td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ph-ink-100, #e8e2d3);
  vertical-align: top;
}
.ph-persona-content code {
  background: var(--ph-surface-1, #f4efe2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
}
.ph-persona-content strong { color: var(--ph-navy-700); }
.ph-persona-detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ph-ink-100, #e8e2d3);
}

@media (max-width: 640px) {
  .ph-personas-controls { padding: 12px; }
  .ph-persona-card { gap: 12px; padding: 14px; }
  .ph-persona-detail { padding: 20px; }
  .ph-persona-detail-header { gap: 12px; flex-wrap: wrap; }
  .ph-persona-hex--large { flex: 0 0 56px; width: 56px; height: 56px; }
}

/* Audiences block on every /focus/* page. Primary audience reads as a
   prominent card; secondaries collapse into a single tight "Also
   useful to" list so the visitor isn't asked to scan 4 cards to find
   their row. */
.ph-audience-primary {
  position: relative;
  margin-top: 22px;
  padding: 22px 24px 22px 28px;
  background: #fff;
  border: 1px solid var(--ph-ink-100, #e8e2d3);
  border-left: 6px solid var(--ph-pulse-500, #C7EE5C);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(7, 41, 37, 0.06);
}
.ph-audience-primary::before {
  content: "Primary audience";
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--ph-navy-900);
  color: var(--ph-pulse-500);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.ph-audience-primary h3 {
  margin: 8px 0 6px;
  font-size: 1.15rem;
}
.ph-audience-primary > p { margin: 0 0 10px; color: var(--ph-ink-700); }
.ph-audience-primary > p:last-child { margin-bottom: 0; }
.ph-audience-also {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--ph-surface-1, #f4efe2);
  border: 1px solid var(--ph-ink-100, #e8e2d3);
  border-radius: 8px;
}
.ph-audience-also h4 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-ink-500);
}
.ph-audience-also ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 22px;
}
.ph-audience-also li {
  font-size: var(--ph-fs-14);
  color: var(--ph-ink-700);
  line-height: 1.5;
}
.ph-audience-also li strong {
  display: block;
  color: var(--ph-ink-900);
  font-size: var(--ph-fs-14);
}
.ph-audience-also li a {
  color: var(--ph-navy-700);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ph-audience-also li a:hover { text-decoration: underline; }


/* ---- Acronym component (Phase 8). Inline <abbr> with a styled popover
   tooltip on hover, focus, or .ph-acronym-open (click toggle). Falls
   back to the native title attribute on long-press and for screen
   readers. */
/* ---- CMS admin "section being edited" highlight, applied to a
   [data-ph-block] inside the /admin/edit iframe when the URL has
   ?_ph_admin_edit=<page>/<section>. Public visitors never see this. */
[data-ph-block].ph-editing {
  outline: 3px dashed var(--ph-pulse-500);
  outline-offset: 6px;
  border-radius: 4px;
  background: rgba(199, 238, 92, 0.10);
  transition: outline-color 0.2s, background 0.2s;
  position: relative;
}
[data-ph-block].ph-editing::before {
  content: "Editing this block";
  position: absolute;
  top: -28px;
  left: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ph-pulse-500);
  color: var(--ph-navy-900);
  padding: 3px 8px;
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}

.ph-acronym {
  position: relative;
  /* Resting state is tinted pulse-green so readers can spot the
     hoverable acronyms at a glance — the green is the visual cue
     that "there's more behind this word, hover/tap me". Hover state
     deepens via a solid underline (and bolder underline colour) so
     the affordance still moves under the cursor. */
  color: var(--ph-pulse-900);
  border-bottom: 1px dotted rgba(107, 143, 31, 0.55);
  text-decoration: none;
  cursor: help;
  font-weight: inherit;
  transition: color 0.12s, border-bottom-color 0.12s, border-bottom-style 0.12s;
}
.ph-acronym:hover,
.ph-acronym:focus,
.ph-acronym.ph-acronym-open {
  color: var(--ph-pulse-900);
  border-bottom-color: var(--ph-pulse-700);
  border-bottom-style: solid;
  /* Elevate the whole abbr's stacking context while the tooltip is
     visible, so the popover (z-index 1200 inside this context) paints
     above any later-in-DOM siblings like the Leaflet map container. */
  z-index: 1200;
}
/* When a tooltip is open inside a card that clips its contents
   (.ph-dc-island has overflow:hidden so the Leaflet map honours the
   card's rounded corners), let the tooltip escape the card bounds.
   Without this, the popover's left/right edge gets cut off when the
   abbr sits near the card edge (eg stats ribbon "3,678 hex cells"). */
.ph-dc-island:has(.ph-acronym:hover),
.ph-dc-island:has(.ph-acronym:focus-within),
.ph-dc-island:has(.ph-acronym.ph-acronym-open) {
  overflow: visible;
}
.ph-acronym:focus-visible {
  outline: 2px solid var(--ph-pulse-500);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On the dark hero (or any dark-background section), the resting
   state uses mid-lime so the acronym is clearly distinguishable
   from the cream surrounding text; hover brightens to the full
   pulse-500 lime. */
.ph-dark-hero .ph-acronym,
.ph-acronym--on-dark {
  color: var(--ph-pulse-700);
  border-bottom-color: rgba(199, 238, 92, 0.45);
}
.ph-dark-hero .ph-acronym:hover,
.ph-dark-hero .ph-acronym:focus,
.ph-acronym--on-dark:hover,
.ph-acronym--on-dark:focus {
  color: var(--ph-pulse-500);
  border-bottom-color: var(--ph-pulse-500);
}
.ph-acronym-pop {
  position: absolute;
  /* Above Leaflet's marker/popup/control panes (400-1000) and the
     top-nav (80). The tooltip drops below its abbr so on map-adjacent
     elements like the home preview stats ribbon it falls over the
     Leaflet container. */
  z-index: 1200;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: min(320px, 90vw);
  padding: 10px 12px;
  background: var(--ph-navy-900);
  color: var(--ph-surface-0);
  border-radius: 6px;
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.ph-acronym-pop::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--ph-navy-900);
}
.ph-acronym-pop strong {
  display: block;
  color: var(--ph-pulse-500);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
/* When shown: override the inline `hidden` attribute on the popover
   span (rendered server-side so iOS Safari can't FOUC the popover
   content into the page as visible text during initial paint). The
   `display: block` overrides the UA's `[hidden] { display: none }`;
   the rest of the show state takes us from invisible to visible. */
.ph-acronym:hover .ph-acronym-pop,
.ph-acronym:focus .ph-acronym-pop,
.ph-acronym:focus-within .ph-acronym-pop,
.ph-acronym.ph-acronym-open .ph-acronym-pop {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* If the popover would overflow the viewport edge on a narrow screen,
   anchor it to the left of the abbr instead. */
@media (max-width: 480px) {
  .ph-acronym-pop {
    left: 0;
    transform: none;
    max-width: min(280px, 86vw);
  }
  .ph-acronym-pop::before { left: 14px; transform: rotate(45deg); }
}