/* Palestine Diaspora Technology Network landing page.
   Scoped to .pdtn so nothing reaches the site header/footer. */

/* --- undo the CMS's blanket typography override -------------------------
   custom_new.css: #all_body *{font-size:22px!important;line-height:1.5!important}
   (18px under its 768px media query) and #all_body a{color:#419496!important}.
   Specificity here is (1,1,0), which beats #all_body a at (1,0,1); elements
   carrying their own inline value win with inline !important. Anything without
   one now inherits normally instead of being forced to 22px. */
#all_body .pdtn *{
  font-size:inherit!important;
  line-height:normal!important;
  color:inherit!important;
}
#all_body .pdtn{
  font-size:16px!important;
  line-height:normal!important;
  color:#0f172a!important;
}

.pdtn{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.pdtn *,.pdtn *::before,.pdtn *::after{box-sizing:border-box}
.pdtn img{max-width:100%;height:auto}
.pdtn a{text-decoration:none}
.pdtn h1,.pdtn h2,.pdtn h3,.pdtn h4{font-family:inherit;margin:0}
.pdtn p{margin:0}
.pdtn ul{margin:0}

/* Material Symbols ligature icons */
.pdtn .ms{font-family:"Material Symbols Outlined"!important;font-weight:normal;
  font-style:normal;line-height:1!important;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  font-feature-settings:"liga";-webkit-font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased;vertical-align:middle}

/* --- full-bleed out of .container{max-width:720px} ----------------------
   --pdtn-sbw is the scrollbar width from the inline probe, subtracted so the
   break-out is exactly viewport-wide and adds no sideways scrollbar.
   NO overflow clipping here: it would disable the header's position:sticky,
   and clipping on html/body stops the page scrolling (the site sets
   html,body{height:100%}). */
.pdtn{
  width:calc(100vw - var(--pdtn-sbw, 0px));
  max-width:calc(100vw - var(--pdtn-sbw, 0px));
  margin-left:calc(50% - 50vw + (var(--pdtn-sbw, 0px) / 2));
  margin-right:calc(50% - 50vw + (var(--pdtn-sbw, 0px) / 2));
}

/* --- site chrome off on this page ---------------------------------------
   The design carries its own sticky header, so the site's nav duplicated it;
   and this is a landing page, not a news item, so the "Home >> Diaspora News"
   trail did not describe it. The article template's own 600px banner goes too:
   the page brings its own hero.
   .header was absolute/z-9999 and overlaid the page, and .internal_div's top
   padding existed only to clear it - with the header gone that padding would
   be a gap above the hero, so it is zeroed here.
   The inline probe in the page body hides the same three by hand, for browsers
   without :has(). */
body:has(.pdtn) section.header_image{display:none!important}
body:has(.pdtn) .header{display:none!important}
body:has(.pdtn) .bread-crumb{display:none!important}
body:has(.pdtn) .internal_div{padding-top:0!important}
/* the article column carries an inline padding-top:15px, which with the
   chrome gone is a white strip above the sticky header */
body:has(.pdtn) .internal_div .container > .row > .col-12.text-left{padding-top:0!important}

/* --- hover / active states, lifted from style-hover / style-active --- */
.pdtn .pdtnx1:hover{color:#1F4E79!important}
.pdtn .pdtnx2:hover{color:#1F4E79!important}
.pdtn .pdtnx3:hover{color:#1F4E79!important}
.pdtn .pdtnx4:hover{color:#1F4E79!important}
.pdtn .pdtnx5:hover{color:#1F4E79!important}
.pdtn .pdtnx6:hover{background:#163A5A;transform:translateY(-2px)}
.pdtn .pdtnx6:active{transform:translateY(0) scale(.97)}
.pdtn .pdtnx7:hover{background:#163A5A;transform:translateY(-3px) scale(1.03)}
.pdtn .pdtnx7:active{transform:translateY(0) scale(.98)}
.pdtn .pdtnx8:hover{background:rgba(255,255,255,0.22);color:#fff!important;transform:translateY(-3px) scale(1.03)}
.pdtn .pdtnx8:active{transform:translateY(0) scale(.98)}
.pdtn .pdtnx9:hover{background:#1F4E79;border-color:#1F4E79;color:#fff!important;transform:translateY(-2px)}
.pdtn .pdtnx10:hover{background:#1F4E79;border-color:#1F4E79;color:#fff!important;transform:translateY(-2px)}
.pdtn .pdtnx11:hover{background:#1F4E79;border-color:#1F4E79;color:#fff!important;transform:translateY(-2px)}
.pdtn .pdtnx12:hover{background:#1F4E79;border-color:#1F4E79;color:#fff!important;transform:translateY(-2px)}
.pdtn .pdtnx13:hover{border-color:#1F4E79;box-shadow:0 16px 32px rgba(15,23,42,0.1);transform:translateY(-4px);color:inherit!important}
.pdtn .pdtnx13:active{transform:translateY(-1px) scale(.99)}
.pdtn .pdtnx14:hover{border-color:#2E7D74;box-shadow:0 16px 32px rgba(15,23,42,0.1);transform:translateY(-4px);color:inherit!important}
.pdtn .pdtnx14:active{transform:translateY(-1px) scale(.99)}
.pdtn .pdtnx15:hover{border-color:#1F4E79;box-shadow:0 16px 32px rgba(15,23,42,0.1);transform:translateY(-4px);color:inherit!important}
.pdtn .pdtnx15:active{transform:translateY(-1px) scale(.99)}
.pdtn .pdtnx16:hover{border-color:#2E7D74;box-shadow:0 16px 32px rgba(15,23,42,0.1);transform:translateY(-4px);color:inherit!important}
.pdtn .pdtnx16:active{transform:translateY(-1px) scale(.99)}
.pdtn .pdtnx17:hover{background:#163A5A;color:#fff!important;transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,78,121,0.3)}
.pdtn .pdtnx17:active{transform:translateY(0) scale(.99)}
.pdtn .pdtnx18:hover{color:#163A5A!important}
.pdtn .pdtnx19:hover{box-shadow:0 16px 32px rgba(15,23,42,0.12);transform:translateY(-4px)}
.pdtn .pdtnx20:hover{box-shadow:0 16px 32px rgba(15,23,42,0.12);transform:translateY(-4px)}
.pdtn .pdtnx21:hover{box-shadow:0 16px 32px rgba(15,23,42,0.12);transform:translateY(-4px)}
.pdtn .pdtnx22:hover{box-shadow:0 16px 32px rgba(15,23,42,0.12);transform:translateY(-4px)}
.pdtn .pdtnx23:hover{box-shadow:0 24px 48px rgba(15,23,42,0.12);transform:translateY(-6px);border-color:#dbe7f1}
.pdtn .pdtnx24:hover{color:#235E57!important;text-decoration:underline}
.pdtn .pdtnx25:hover{box-shadow:0 24px 48px rgba(15,23,42,0.12);transform:translateY(-6px);border-color:#dbe7f1}
.pdtn .pdtnx26:hover{color:#163A5A!important;text-decoration:underline}
.pdtn .pdtnx27:hover{box-shadow:0 24px 48px rgba(15,23,42,0.12);transform:translateY(-6px);border-color:#dbe7f1}
.pdtn .pdtnx28:hover{color:#0f172a!important;text-decoration:underline}
.pdtn .pdtnx29:hover{background:#163A5A;transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,78,121,0.3)}
.pdtn .pdtnx29:active{transform:translateY(0) scale(.99)}
.pdtn .pdtnx30:hover{color:#1F4E79!important}
.pdtn .pdtnx31:hover{color:#1F4E79!important}
.pdtn .pdtnx32:hover{color:#1F4E79!important}
.pdtn .pdtnx33:hover{color:#1F4E79!important}
.pdtn .pdtnx34:hover{color:#1F4E79!important}
.pdtn .pdtnx35:hover{color:#1F4E79!important}
.pdtn .pdtnx36:hover{color:#1F4E79!important}
.pdtn .pdtnx37:hover{color:#1F4E79!important}
.pdtn .pdtnx38:hover{background:#1F4E79;color:#fff!important}
.pdtn .pdtnx39:hover{background:#1F4E79;color:#fff!important}

/* --- Arabic / RTL variant -------------------------------------------------
   Only direction-sensitive things are mirrored; the layout is flex/grid and
   flips on its own once dir="rtl" is set. */
.pdtn-rtl{text-align:right}
.pdtn-rtl .ms{transform:scaleX(-1)}          /* arrows point the other way */
.pdtn-rtl input,.pdtn-rtl button{text-align:right}
.pdtn-rtl [style*="letter-spacing"]{letter-spacing:normal!important}

/* ==========================================================================
   Small screens
   ==========================================================================
   The design was exported at desktop width and every measurement in it is an
   INLINE style, so a stylesheet can only correct it with !important. That is
   not enthusiasm for !important — an inline declaration simply outranks any
   normal rule, and the body is CMS content we would rather not rewrite for
   every breakpoint.

   Two things were actually broken rather than merely tight:

   1. The header laid a desktop nav out with flex-wrap, so at 390px it became
      three ragged rows 202px tall — a third of the screen, on every scroll
      position, since it is sticky. It now collapses to a logo and a menu.

   2. `repeat(auto-fit,minmax(300px,1fr))` cannot go below 300px: auto-fit
      removes empty tracks, it does not shrink the ones that remain. Inside
      the newsletter card (327px wide, 48px padding, so 231px of content) the
      track stayed 300px and the card ran 160px off the right of the screen.
      Every auto-fit grid here has the same shape, so they are all released to
      one column before they can overflow.
   -------------------------------------------------------------------------- */

/* The menu button only exists below the breakpoint. */
.pdtn .pdtn-burger{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;flex-shrink:0;cursor:pointer;
  background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#1F4E79!important;
  transition:background .2s,border-color .2s}
.pdtn .pdtn-burger:hover{background:#f1f5f9;border-color:#cbd5e1}
.pdtn .pdtn-burger:active{transform:scale(.96)}

/* An in-page link must not land under the sticky header. */
.pdtn section[id]{scroll-margin-top:100px}

@media (max-width:900px){
  /* the header bar itself */
  .pdtn header > div{padding:10px 16px!important;min-height:0!important;gap:8px 12px!important}
  .pdtn header > div > a img{height:44px!important}
  .pdtn header > div > a img + img{height:40px!important}
  .pdtn header > div > a > span > span{font-size:16px!important}

  .pdtn .pdtn-burger{display:inline-flex;order:3;margin-left:auto}

  /* the nav becomes a panel under the bar, closed until the button opens it */
  .pdtn .pdtn-nav{display:none!important;order:4;flex-basis:100%;
    flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;gap:0!important;white-space:normal!important;
    margin-top:4px;padding-top:4px;border-top:1px solid #e2e8f0}
  .pdtn .pdtn-nav.pdtn-open{display:flex!important}
  .pdtn .pdtn-nav a{padding:12px 2px;font-size:15px!important;border-bottom:1px solid #f1f5f9}
  .pdtn .pdtn-nav a:last-child{border-bottom:0}

  .pdtn .pdtn-cta{order:2;padding:10px 18px!important;font-size:13px!important}

  .pdtn section[id]{scroll-margin-top:76px}
}

@media (max-width:700px){
  /* No room for the call to action beside the logo. It joins the menu — and
     the hero repeats it one screen down, so nothing is lost while closed. */
  .pdtn .pdtn-cta{display:none}
  .pdtn .pdtn-nav.pdtn-open ~ .pdtn-cta{display:block;order:5;flex-basis:100%;
    margin:2px 0 6px!important;text-align:center}
}

@media (max-width:760px){
  /* Release every auto-fit track. Written per width rather than as one
     [style*="repeat(auto-fit"] rule so the footer columns can stay paired —
     four one-per-row link lists would be a very long tail on the page. */
  .pdtn [style*="minmax(320px"],
  .pdtn [style*="minmax(300px"],
  .pdtn [style*="minmax(280px"],
  .pdtn [style*="minmax(250px"],
  .pdtn [style*="minmax(240px"]{grid-template-columns:1fr!important}
  .pdtn [style*="minmax(220px"]{grid-template-columns:repeat(2,1fr)!important}

  /* and tighten the spacing those grids were designed around */
  .pdtn [style*="gap:48px"]{gap:28px!important}
  .pdtn [style*="gap:64px"]{gap:32px!important}
  .pdtn [style*="padding:48px"]{padding:24px!important}
  .pdtn [style*="padding:32px"]{padding:22px!important}
  .pdtn [style*="padding:80px 0"]{padding:52px 0!important}
  .pdtn [style*="padding:80px 24px"]{padding:52px 16px!important}
  .pdtn [style*="padding:0 24px"]{padding:0 16px!important}
}

@media (max-width:480px){
  .pdtn header > div > a{gap:8px!important}
  .pdtn header > div > a img{height:36px!important}
  .pdtn header > div > a img + img{height:32px!important}
  .pdtn header > div > a > span > span{font-size:13px!important}
  .pdtn .pdtn-burger{width:40px;height:40px}

  /* full-width buttons read better than a ragged row of pills */
  .pdtn [style*="padding:16px 40px"]{width:100%;justify-content:center}
}

/* ==========================================================================
   Section furniture for the 2026 content rebuild
   ==========================================================================
   The exported page repeats the same ~130-byte inline style string on every
   card, heading and button. That was survivable at 41 KB; the new sections
   would have pushed the body past the 65,535-byte TEXT column it lives in.
   So the new markup uses classes and the measurements live here, where there
   is no size limit and a change reaches every card at once.

   Note the `#all_body` prefix on anything that sets font-size or colour.
   custom_new.css carries `#all_body *{font-size:22px!important;color:...}` —
   specificity (1,0,1) — so a plain `.pdtn .pdtn-card h3` at (0,2,1) LOSES and the
   heading renders at 22px. `#all_body .pdtn .pdtn-card h3` is (1,2,1) and wins.
   Layout properties are not overridden by that rule and need no prefix.
   -------------------------------------------------------------------------- */

.pdtn .sec{padding:80px 0}
.pdtn .wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.pdtn .head{text-align:center;margin-bottom:44px}
.pdtn .head-l{text-align:left;margin-bottom:40px}

#all_body .pdtn .eyebrow{font-size:12px!important;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#1F4E79!important}
#all_body .pdtn .eyebrow-i{color:rgba(255,255,255,.85)!important}
#all_body .pdtn .pdtn-h2{font-size:clamp(26px,3.2vw,34px)!important;font-weight:700;
  color:#0f172a!important;line-height:1.2!important;margin:8px 0 0;text-wrap:balance}
#all_body .pdtn .pdtn-h2-i{color:#fff!important}
#all_body .pdtn .lede{font-size:17px!important;color:#475569!important;line-height:1.7!important;
  margin:14px auto 0;max-width:800px;text-wrap:pretty}
#all_body .pdtn .head-l .lede{margin-left:0}
#all_body .pdtn .lede-i{color:#dbe7f1!important}

/* Grids. minmax(min(Npx,100%),1fr) instead of minmax(Npx,1fr): auto-fit drops
   empty tracks but never shrinks a track below its floor, which is what sent
   the newsletter card 160px off the right of a phone screen. */
.pdtn .g{display:grid;gap:24px}
.pdtn .g3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.pdtn .g4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.pdtn .g5{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

.pdtn .pdtn-card{background:#fff;padding:28px;border-radius:16px;border:1px solid #f1f5f9;
  box-shadow:0 2px 8px rgba(15,23,42,.04);transition:transform .35s,box-shadow .35s,border-color .35s}
.pdtn .pdtn-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(15,23,42,.1);border-color:#e2e8f0}
#all_body .pdtn .pdtn-card h3{font-size:18px!important;font-weight:700;color:#0f172a!important;
  line-height:1.35!important;margin:0 0 10px}
#all_body .pdtn .pdtn-card p{font-size:15px!important;color:#475569!important;line-height:1.7!important;margin:0}

.pdtn .ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;margin-bottom:18px;background:rgba(31,78,121,.08)}
#all_body .pdtn .ico .ms{font-size:26px!important;color:#1F4E79!important}
.pdtn .ico-t{background:rgba(46,125,116,.1)}
#all_body .pdtn .ico-t .ms{color:#2E7D74!important}

/* Impact metrics, on the deep blue band */
#all_body .pdtn .mv{font-size:clamp(28px,3.4vw,40px)!important;font-weight:800;
  color:#fff!important;line-height:1.05!important;margin:0;letter-spacing:-.02em}
#all_body .pdtn .ml{font-size:14px!important;color:rgba(255,255,255,.82)!important;
  line-height:1.55!important;margin:10px 0 0}
.pdtn .mdiv{border-left:1px solid rgba(255,255,255,.18);padding-left:28px}

/* Working-group badges */
.pdtn .pdtn-chip{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#fff;
  border:1px solid #e2e8f0;border-radius:12px;transition:border-color .25s,transform .25s,box-shadow .25s}
.pdtn .pdtn-chip:hover{border-color:#1F4E79;transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,23,42,.07)}
#all_body .pdtn .pdtn-chip .ms{font-size:22px!important;color:#2E7D74!important}
#all_body .pdtn .pdtn-chip b{font-size:15px!important;font-weight:600;color:#334155!important;line-height:1.4!important}

/* Buttons */
.pdtn .pdtn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-weight:700;transition:all .25s}
#all_body .pdtn .pdtn-btn{font-size:15px!important}
.pdtn .pdtn-btn-p{background:#1F4E79;box-shadow:0 10px 24px rgba(31,78,121,.25)}
#all_body .pdtn .pdtn-btn-p{color:#fff!important}
.pdtn .pdtn-btn-p:hover{background:#163A5A;transform:translateY(-2px)}
.pdtn .pdtn-btn-s{background:#fff;border:1px solid #e2e8f0}
#all_body .pdtn .pdtn-btn-s{color:#1F4E79!important}
.pdtn .pdtn-btn-s:hover{border-color:#1F4E79;transform:translateY(-2px)}
.pdtn .pdtn-btn-w{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4)}
#all_body .pdtn .pdtn-btn-w{color:#fff!important}
.pdtn .pdtn-btn-w:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.pdtn .pdtn-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* Press mentions */
.pdtn .press{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pdtn .press span{padding:10px 20px;background:#fff;border:1px solid #e2e8f0;border-radius:999px}
#all_body .pdtn .press span{font-size:15px!important;font-weight:600;color:#475569!important}

/* Regional footprint list */
.pdtn .region{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px solid #f1f5f9}
.pdtn .region:last-child{border-bottom:0}
#all_body .pdtn .region b{font-size:15px!important;font-weight:700;color:#0f172a!important}
#all_body .pdtn .region span.t{font-size:14px!important;color:#475569!important;line-height:1.6!important}

@media (max-width:760px){
  .pdtn .sec{padding:52px 0}
  .pdtn .wrap{padding:0 16px}
  .pdtn .pdtn-card{padding:22px}
  .pdtn .g{gap:16px}
  .pdtn .mdiv{border-left:0;padding-left:0}
  .pdtn .pdtn-btn{width:100%}
}

/* The four join cards carry different amounts of copy, so their buttons landed
   on four different lines. Push each button to the bottom of its own card so
   the row reads as one band rather than a ragged edge. */
.pdtn #join .pdtn-card{display:flex;flex-direction:column}
.pdtn #join .pdtn-card .pdtn-btn{margin-top:auto;align-self:flex-start}
@media (max-width:760px){.pdtn #join .pdtn-card .pdtn-btn{align-self:stretch}}

/* ── the article template's category tag ───────────────────────────────────
   `div.tags_div` renders a "Diaspora Network" chip below the block, which on
   this page lands between the design's own footer and the site's dark footer
   and reads as a third, orphaned footer. Same treatment as the banner and the
   breadcrumb: hidden from inside, since the template is shared by every
   article and must not be edited for one page. */
body:has(.pdtn) .tags_div{display:none!important}

/* ── reveal on scroll ──────────────────────────────────────────────────────
   .pdtn-rv is applied by script, never in the markup: if it lived in the HTML
   and the script failed, every card would stay at opacity 0. This way the
   worst case is simply no animation. Honour prefers-reduced-motion twice —
   the script bails out, and this is the belt to that braces in case an element
   was already marked before the preference changed. */
.pdtn .pdtn-rv{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.2,.6,.2,1),transform .55s cubic-bezier(.2,.6,.2,1)}
.pdtn .pdtn-rv-in{opacity:1;transform:none}

/* An SVG <g> translated by 18 *user units* moves a different distance than
   18 CSS pixels once the diagram is scaled, so the hubs fade only. */
.pdtn .fp-svg .pdtn-rv{transform:none;transition:opacity .5s ease}

@media (prefers-reduced-motion:reduce){
  .pdtn .pdtn-rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   Global footprint — its own dark band
   ==========================================================================
   Replaces the version that floated in white space. The page alternates white
   and pale blue, so this deep navy is a deliberate change of beat, and a
   network of lit nodes reads far better on dark than hairlines on white.
   -------------------------------------------------------------------------- */

.pdtn .fp-sec{
  background:radial-gradient(120% 90% at 50% 0%,#17405f 0%,#102c44 45%,#0c2136 100%);
  position:relative;overflow:hidden}

/* a faint grid, so the band has texture rather than being flat paint */
.pdtn .fp-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 0%,transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 0%,transparent 100%)}
.pdtn .fp-sec .wrap{position:relative;z-index:1}

.pdtn .fp{margin-top:14px}
.pdtn .fp-svg{display:block;width:100%;height:auto;max-width:1180px;margin:0 auto;
  overflow:visible;direction:ltr}

/* the basemap: Natural Earth land, stippled, public domain */
.pdtn .fp-svg .fp-map{opacity:.85}

/* the spokes, and the light travelling along them */
.pdtn .fp-svg .sp{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.9}
.pdtn .fp-svg .flow{fill:none;stroke-width:3.8;stroke-linecap:round;
  stroke-dasharray:3 300;opacity:.95;animation:pdtn-flow 4s linear infinite}
@keyframes pdtn-flow{from{stroke-dashoffset:303}to{stroke-dashoffset:0}}

/* the centre */
.pdtn .fp-svg .core-glow{fill:rgba(143,203,255,.12)}
.pdtn .fp-svg .core-pulse{fill:none;stroke:rgba(143,203,255,.55);stroke-width:1.9;
  transform-origin:center;animation:pdtn-pulse 3.2s ease-out infinite}
@keyframes pdtn-pulse{
  0%{transform:scale(.82);opacity:.75}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}}
.pdtn .fp-svg .core-disc{fill:#fff}
.pdtn .fp-svg .core-s{fill:#fff;font-weight:700;font-size:23px;letter-spacing:.01em}

/* the hubs */
.pdtn .fp-svg .halo{opacity:.16;transition:opacity .25s,r .25s}
.pdtn .fp-svg .ring{fill:none;stroke-width:2.2;opacity:.6;transition:opacity .25s,r .25s}
.pdtn .fp-svg .dot{transition:r .25s}
.pdtn .fp-svg .ct{fill:#fff;font-weight:700;font-size:22px}
.pdtn .fp-svg .cs{fill:rgba(255,255,255,.6);font-weight:500;font-size:19px}
.pdtn .fp-svg .hub{cursor:default}
.pdtn .fp-svg .hub:focus{outline:none}
.pdtn .fp-svg .hub:hover .halo,.pdtn .fp-svg .hub:focus .halo{opacity:.36;r:38}
.pdtn .fp-svg .hub:hover .ring,.pdtn .fp-svg .hub:focus .ring{opacity:1;r:20}
.pdtn .fp-svg .hub:hover .dot,.pdtn .fp-svg .hub:focus .dot{r:9}
.pdtn .fp-svg .hub:focus .ct{text-decoration:underline}

/* the legend gives the colours a meaning */
.pdtn .fp-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:26px}
.pdtn .fp-legend .leg{display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(255,255,255,.05)}
#all_body .pdtn .fp-legend .leg{font-size:13px!important;font-weight:600;color:rgba(255,255,255,.8)!important}
#all_body .pdtn .fp-legend .leg b{font-size:13px!important;color:#fff!important}
.pdtn .fp-legend i{width:8px;height:8px;border-radius:999px;flex-shrink:0}

/* the phone list, on dark */
.pdtn .fp-list{display:none;max-width:560px;margin:22px auto 0}
.pdtn .fp-sec .region{border-bottom:1px solid rgba(255,255,255,.1)}
#all_body .pdtn .fp-sec .region b{color:#fff!important}
#all_body .pdtn .fp-sec .region span.t{color:rgba(255,255,255,.66)!important}

/* The diagram needs room for its labels; below that it becomes the list. */
@media (max-width:900px){
  .pdtn .fp-svg{display:none}
  .pdtn .fp-list{display:block}
  /* the list already groups the hubs by region, so the legend would be the
     same four names a second time */
  .pdtn .fp-legend{display:none}
}

@media (prefers-reduced-motion:reduce){
  .pdtn .fp-svg .flow,.pdtn .fp-svg .core-pulse{animation:none}
  .pdtn .fp-svg .flow{opacity:.35;stroke-dasharray:2 10}
}

/* ==========================================================================
   Reveal variants
   ========================================================================== */
.pdtn .pdtn-rv-left{transform:translateX(-26px)}
.pdtn .pdtn-rv-right{transform:translateX(26px)}
.pdtn .pdtn-rv-scale{transform:scale(.965);transition-duration:.7s}
.pdtn .pdtn-rv-fade{transform:none}
.pdtn .pdtn-rv-blur{filter:blur(6px);transition-duration:.75s}
.pdtn .pdtn-rv-in{transform:none!important;filter:none}

/* Parallax is applied as an inline transform by the script, so the reveal
   transform must not fight it once the element has arrived. */
.pdtn #about img.pdtn-rv-in,.pdtn #events img.pdtn-rv-in{transition:opacity .7s ease}

/* ==========================================================================
   The cursor — a node in the network
   ==========================================================================
   The page is about connections across distance, and it already draws them:
   every footprint hub is a halo, a ring and a dot joined by thin routes. The
   cursor is that same object, built from the same three circles at the same
   proportions. Moving across the page drops nodes behind the pointer and
   links them, tracing a small diaspora network as you read.

   One SVG overlay, about a dozen elements, all updated by attribute inside a
   single requestAnimationFrame.

   Blue throughout: the page's own navy on the light sections, light sky over
   the navy bands. An earlier attempt used mix-blend-mode:difference so one
   cursor could work anywhere — a trap, because difference INVERTS rather than
   tints, and over navy a white cursor came out peach. The palette switches by
   section instead, which is exact.
   -------------------------------------------------------------------------- */
.pdtn-cur{position:fixed;top:0;left:0;pointer-events:none;z-index:2147483000;
  opacity:0;transition:opacity .3s;overflow:visible}
html.pdtn-cur-on .pdtn-cur{opacity:1}

/* the node under the pointer — the map's hub, exactly */
.pdtn-cur-halo{fill:#2E86DE;opacity:.13;transition:opacity .25s,r .28s}
.pdtn-cur-ring{fill:none;stroke:#1F4E79;stroke-width:1.5;opacity:.5;
  transition:opacity .25s,r .28s,stroke .3s}
.pdtn-cur-dot{fill:#1F4E79;transition:r .22s,fill .3s}

/* the trail it leaves */
.pdtn-cur-link{fill:none;stroke:#1F4E79;stroke-width:1.2;opacity:.3;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.pdtn-cur-node{fill:#1F4E79;transition:fill .3s}

/* over something clickable the node opens up, the way a hub does on hover */
.pdtn-cur.is-hot .pdtn-cur-halo{opacity:.22;r:30}
.pdtn-cur.is-hot .pdtn-cur-ring{opacity:.95;r:16;stroke:#2E86DE}
.pdtn-cur.is-hot .pdtn-cur-dot{r:4.5;fill:#2E86DE}
.pdtn-cur.is-down .pdtn-cur-ring{r:7}
.pdtn-cur.is-down .pdtn-cur-halo{opacity:.3;r:14}

/* on the navy bands */
.pdtn-cur.on-dark .pdtn-cur-halo{fill:#8FCBFF;opacity:.2}
.pdtn-cur.on-dark .pdtn-cur-ring{stroke:#BFE2FF;opacity:.75}
.pdtn-cur.on-dark .pdtn-cur-dot{fill:#DCEEFF}
.pdtn-cur.on-dark .pdtn-cur-link{stroke:#8FCBFF;opacity:.45}
.pdtn-cur.on-dark .pdtn-cur-node{fill:#BFE2FF}
.pdtn-cur.on-dark.is-hot .pdtn-cur-ring{stroke:#fff}
.pdtn-cur.on-dark.is-hot .pdtn-cur-dot{fill:#fff}

/* hide the native cursor, but only over the block */
html.pdtn-has-cursor .pdtn,html.pdtn-has-cursor .pdtn *{cursor:none}

/* ── a highlight that tracks the pointer across a card ─────────────────── */
.pdtn .pdtn-card,.pdtn .pdtn-chip{position:relative}
.pdtn .pdtn-card::after,.pdtn .pdtn-chip::after{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(46,134,222,.09) 0%,rgba(31,78,121,.05) 42%,transparent 68%)}
.pdtn .pdtn-card:hover::after,.pdtn .pdtn-chip:hover::after{opacity:1}

@media (hover:none),(pointer:coarse){
  .pdtn .pdtn-card::after,.pdtn .pdtn-chip::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pdtn-cur{display:none}
  html.pdtn-has-cursor .pdtn,html.pdtn-has-cursor .pdtn *{cursor:auto}
}

/* ==========================================================================
   The hero, on load
   ==========================================================================
   Done in CSS, not through the reveal script. The script is deferred, so by
   the time it runs the hero has already been painted; marking it hidden then
   would make the headline blink out and fade back in. A keyframe with
   `backwards` fill starts from the hidden state at first paint instead. */
@keyframes pdtn-hero-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.pdtn main > section:first-of-type > div > div > div:first-child,
.pdtn main > section:first-of-type h1,
.pdtn main > section:first-of-type > div > div > p,
.pdtn main > section:first-of-type > div > div > div:last-child{
  animation:pdtn-hero-up .85s cubic-bezier(.2,.7,.2,1) backwards}
.pdtn main > section:first-of-type h1{animation-delay:.12s}
.pdtn main > section:first-of-type > div > div > p{animation-delay:.24s}
.pdtn main > section:first-of-type > div > div > div:last-child{animation-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .pdtn main > section:first-of-type *{animation:none!important}
}