/* ============================================================
   Pole to Pole — shared site styles
   Theme: deep magenta + blue (single source of truth).
   Owns: design tokens, base reset, nav, section label, footer.
   Page-specific styles live in each page's inline <style>.
   ============================================================ */
:root{
  --serif:"Playfair Display",ui-serif,Georgia,serif;
  --sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ink:#f4ede3;--ink-dim:#a39e93;--ink-faint:#60584d;
  --paper:#161c2d;--paper-2:#1e2538;--paper-3:#283049;
  --line:#343f5a;--line-2:#42506e;
  --accent:#ff4d8d;--accent-soft:rgba(255,77,141,.45);--accent-hover:#ff6ba3;
  --accent-2:#6f9fd8;
  --ice:#cfe2ee;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* THEME BRIDGE — p2p.css prints after Blocksy's chain (declared dependency
   on 'ct-main-styles', see p2p-blocks.php), so equal-specificity ties
   resolve to the rules below without any !important.
   1. h1-h6 color:inherit — the static site never declared a heading color
      (headings inherited --ink from body); Blocksy's element-level
      h1..h6{color:var(--theme-headings-color)} would fill that vacuum on
      every load order, so inheritance is restored explicitly.
   2. Variable pins — repoint Blocksy's palette-driven components
      (headings/text/links/buttons; palette-7 is its body background,
      verified against ct-main-styles-inline output) at the p2p tokens so
      anything the theme still styles inherits the dark magenta theme. */
h1,h2,h3,h4,h5,h6{color:inherit}
body{
  --theme-headings-color:var(--ink);
  --theme-text-color:var(--ink);
  --theme-link-initial-color:var(--ink);
  --theme-link-hover-color:var(--accent);
  --theme-palette-color-7:var(--paper);
  --theme-button-background-initial-color:var(--accent);
  --theme-button-background-hover-color:var(--accent-hover);
  --theme-button-text-initial-color:var(--paper);
  --theme-button-text-hover-color:var(--paper);
}
/* FULL-BLEED PAGE CANVAS — Blocksy wraps page content in .ct-container-full
   (60px top/bottom spacing) and Gutenberg's constrained entry-content caps
   every top-level block at the theme block width (1290px, centered) with
   content-spacing margins between blocks. The ported pages are full-bleed
   sections that own their padding/max-widths (in the static site they sat
   directly under <body>), so the wrapper spacing is neutralized on `page`
   views only — blog posts (body.single) keep the theme's content rhythm. */
.page .ct-container-full{padding-top:0;padding-bottom:0}
/* width:auto also undoes Blocksy's width:var(--theme-block-width) (90%) on
   the same constrained children. */
.page .entry-content.is-layout-constrained > *{max-width:none;width:auto;margin-block-start:0;margin-block-end:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--paper)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;background:var(--accent);color:var(--paper);padding:11px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-radius:0 0 6px 6px;transition:top .2s}
.skip-link:focus{top:0}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.03;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:flex-start;padding:22px 36px;transition:background .4s,backdrop-filter .4s,border-color .4s,padding .35s cubic-bezier(.2,.7,.2,1);border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(22,28,45,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line);padding-top:10px;padding-bottom:10px}
.nav__brand{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.01em;display:flex;align-items:center;gap:10px}
.nav__brand-mark{width:68px;height:68px;flex-shrink:0;display:block;border-radius:0;transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1)}
.nav.is-scrolled .nav__brand-mark{width:42px;height:42px}
.nav__links{display:flex;gap:28px;font-size:13px;font-weight:500;letter-spacing:.01em;margin-left:auto}
.nav__links a{position:relative;padding:4px 0;opacity:.85;transition:opacity .2s}
.nav__links a:hover,.nav__links a.is-current{opacity:1}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav__links a:hover::after,.nav__links a.is-current::after{transform:scaleX(1)}
.nav__cta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--ink-faint);border-radius:999px;transition:border-color .2s,color .2s,background .2s;margin-left:24px}
.nav__cta:hover{border-color:var(--accent);color:var(--accent)}
.nav__cta--donate{background:var(--accent);color:var(--paper);border-color:var(--accent);display:inline-flex;align-items:center;gap:8px;margin-left:10px}
.nav__cta--donate:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--paper)}
.nav__cta-heart{width:13px;height:13px;animation:heartbeat 1.4s ease-in-out infinite;flex-shrink:0}
.nav__menu-cta--donate{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
@keyframes heartbeat{0%,40%,100%{transform:scale(1)}20%,60%{transform:scale(1.22)}}
.nav__menu-btn{display:none;background:transparent;border:0;color:inherit;align-items:center;justify-content:center}
.nav__menu{display:none}

/* SECTION LABEL */
.section-label{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:40px;display:inline-flex;align-items:center}
.kicker-icon{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-right:14px;display:inline-block;vertical-align:middle}

/* FOOTER */
.footer{padding:80px 36px 40px;background:var(--paper);border-top:1px solid var(--line)}
.footer__inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:60px}
.footer__brand-title{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 12px;letter-spacing:-.01em}
.footer__brand-sub{font-size:14px;color:var(--ink-dim);max-width:320px}
.footer__col-title{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 20px}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.footer__col a{font-size:14px;color:var(--ink-dim);transition:color .2s}
.footer__col a:hover{color:var(--accent)}
.footer__brand-mark{width:72px;height:72px;margin:0 0 20px;display:block;border-radius:0}
.footer__col ul.footer__socials{display:flex;gap:14px;list-style:none;padding:0;margin:0;flex-direction:row}
.footer__socials a{color:var(--ink-dim);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;transition:color .2s,border-color .2s,background .2s}
.footer__socials a:hover{color:var(--paper);background:var(--accent);border-color:var(--accent)}
.footer__socials svg{width:16px;height:16px}
/* Call-feedback wave A (A9): bottom bar (© line + agency credit, incl.
   the credit's link via inheritance) switches mono -> Plus Jakarta Sans;
   tracking eased .1em -> .06em — mono-era spacing reads too wide in a
   sans. Size/uppercase treatment unchanged (© text is typed uppercase). */
.footer__bottom{max-width:1400px;margin:0 auto;padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}

/* RESPONSIVE — nav + footer */
@media (max-width:1024px){
  .nav{padding:18px 22px}.nav__links{gap:18px;font-size:12px}
  .nav__brand-mark{width:54px;height:54px}.nav.is-scrolled .nav__brand-mark{width:38px;height:38px}
  .footer__inner{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:640px){
  .nav{padding:16px 18px}
  .nav__links,.nav__cta{display:none}
  .nav__menu-btn{display:flex;width:38px;height:38px}
  .nav.is-menu-open{background:rgba(22,28,45,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--line)}
  .nav__menu{position:absolute;top:100%;left:0;right:0;background:rgba(22,28,45,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:8px 18px 22px;display:none;flex-direction:column;gap:0}
  .nav.is-menu-open .nav__menu{display:flex}
  .nav__menu a{padding:14px 0;font-size:15px;border-bottom:1px solid var(--line);color:var(--ink);letter-spacing:.01em}
  .nav__menu a:last-child{border-bottom:0}
  .nav__menu-cta{margin-top:18px;padding:14px 22px;background:var(--accent);color:var(--paper);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:center;font-weight:500}
  .nav__menu-ctas{display:flex;gap:10px;margin-top:18px;width:100%}
  .nav__menu-ctas .nav__menu-cta{margin-top:0;flex:1;padding:14px 12px}
  .footer__inner{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   SUB-PAGE COMPONENTS
   Shared by the content pages (the-cause, blog, the-team, contact,
   dream-movement, the-expedition, polar-training, donate).
   index.html is the bespoke homepage: it keeps its own hero, photo,
   cta and interstitial styling inline (loaded after this file, so it
   overrides these where it redefines the same selectors).
   ============================================================ */

/* Entrance animations */
@keyframes rise{to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{to{opacity:1}}

/* PAGE HERO */
.page-hero{position:relative;padding:200px 36px 110px;background:radial-gradient(ellipse 60% 50% at 78% 40%,rgba(255,77,141,.12),transparent 60%),radial-gradient(ellipse 50% 40% at 12% 30%,rgba(207,226,238,.08),transparent 60%),linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);border-bottom:1px solid var(--line);overflow:hidden}
.page-hero__inner{max-width:1400px;margin:0 auto;position:relative;z-index:2}
.page-hero__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:28px;opacity:0;animation:rise 1s .15s ease forwards;display:inline-flex;align-items:center;gap:12px}
.page-hero__eyebrow svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
.page-hero__title{font-family:'Oswald',ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(48px,7.6vw,128px);line-height:1;letter-spacing:.005em;text-transform:uppercase;margin:0 0 34px;color:var(--ink);max-width:15ch}
.page-hero__title em{font-style:normal;font-weight:600;color:var(--accent)}
.page-hero__title-line{display:block;overflow:hidden}
.page-hero__title-line span{display:inline-block;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.7,.1,1) forwards}
.page-hero__title-line:nth-child(1) span{animation-delay:.25s}
.page-hero__title-line:nth-child(2) span{animation-delay:.38s}
.page-hero__title-line:nth-child(3) span{animation-delay:.51s}
.page-hero__lede{max-width:640px;font-size:18px;line-height:1.65;color:var(--ink-dim);margin:0;opacity:0;animation:rise 1s .9s ease forwards}

/* REVEAL ON SCROLL (paired with site.js) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal--d1{transition-delay:.08s}.reveal--d2{transition-delay:.16s}.reveal--d3{transition-delay:.24s}

/* GENERIC SECTION */
.section{padding:150px 36px;background:var(--paper);border-top:1px solid var(--line);position:relative}
.section--alt{background:var(--paper-2)}
.section__inner{max-width:1400px;margin:0 auto}
.section__head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:72px}
.section__title{font-family:'Oswald',ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(38px,5vw,80px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;margin:0}
.section__title em{font-style:normal;font-weight:600;color:var(--accent)}
.section__intro{font-size:18px;line-height:1.6;color:var(--ink-dim);max-width:460px}

/* INTERSTITIAL */
.interstitial{min-height:70svh;padding:150px 36px;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;display:flex;align-items:center;overflow:hidden}
.interstitial::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(255,77,141,.10),transparent 70%);pointer-events:none}
.interstitial__inner{max-width:1400px;margin:0 auto;width:100%;position:relative;z-index:1}
.interstitial__kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:48px;display:inline-flex;align-items:center}
.interstitial__kicker .kicker-icon{margin-right:14px}
.interstitial__stat{font-family:'Oswald',ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(48px,7.4vw,128px);line-height:.98;letter-spacing:.005em;text-transform:uppercase;margin:0 0 44px;color:var(--ink);max-width:18ch}
.interstitial__stat em{font-style:normal;font-weight:600;color:var(--accent)}
.interstitial__body{font-size:17px;line-height:1.65;color:var(--ink-dim);max-width:640px;margin:0 0 40px}
.interstitial__source{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

/* CTA */
.cta{padding:160px 36px;background:var(--paper-2);border-top:1px solid var(--line);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:-20% -10% auto;height:80%;background:radial-gradient(ellipse at 50% 0%,rgba(255,77,141,.16),transparent 60%);pointer-events:none}
.cta__inner{max-width:800px;margin:0 auto;text-align:center;position:relative}
.cta__title{font-family:'Oswald',ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(40px,5.7vw,84px);line-height:1.04;letter-spacing:.005em;text-transform:uppercase;margin:0 0 24px}
.cta__title em{font-style:normal;font-weight:600;color:var(--accent)}
.cta__body{font-size:18px;color:var(--ink-dim);margin:0 0 48px}
.cta__body-note{display:block;margin-top:10px;font-style:italic;font-size:.82em;color:var(--ink-faint)}
.cta__form{display:flex;gap:12px;max-width:480px;margin:0 auto}
.cta__input{flex:1;background:transparent;border:1px solid var(--ink-faint);border-radius:999px;padding:16px 22px;font:inherit;color:var(--ink);font-size:14px;transition:border-color .2s}
.cta__input:focus{outline:none;border-color:var(--accent)}
.cta__input::placeholder{color:var(--ink-faint)}
.cta__submit{background:var(--accent);color:var(--paper);border:0;border-radius:999px;padding:16px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:background .2s,transform .2s}
.cta__submit:hover{background:var(--accent-hover);transform:translateY(-1px)}
.cta__note{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}

/* CTA — Fluent Forms "Follow the journey" swap-in (task-18 controller
   amendment #2). The static `.cta__form` was a bare email input + button
   row with no visible label; Fluent Forms' default markup renders a
   fieldset with a visible field label above the input and its own submit
   button classes. This reproduces the original row layout on top of that
   real markup — visually hides the (still screen-reader-accessible)
   label, sizes the input/button to match `.cta__input`/`.cta__submit`,
   and lays the fieldset out as a flex row instead of stacked fields. */
.cta .fluentform{max-width:480px;margin:0 auto}
/* align-items:stretch (was flex-start) + the display:flex submit wrapper
   below make the button match the (now height:auto) input's row height, the
   way static's `.cta__form{display:flex}` default-stretched `.cta__submit`
   to `.cta__input` — restoring the matched ~56px pill pair. The visually-
   hidden label is position:absolute, so the input wrapper's height is just
   the input's; stretch can't be thrown off by it. */
.cta .fluentform fieldset{display:flex!important;flex-wrap:wrap;gap:12px;align-items:stretch}
.cta .fluentform .ff-el-group{margin:0!important;flex:1 1 220px}
.cta .fluentform .ff-el-group.ff_submit_btn_wrapper{flex:0 0 auto;display:flex}
.cta .fluentform .ff-el-input--label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cta .fluentform .ff-el-form-control{width:100%;background:transparent;border:1px solid var(--ink-faint);border-radius:999px;padding:16px 22px;font:inherit;color:var(--ink);font-size:14px;transition:border-color .2s}
/* Field-height fix: Blocksy's `.ff-inherit-theme-style .ff-el-form-control
   :not([size]):not([multiple])` (0-4-0) pins height:var(--theme-form-field-
   height,40px), squashing the pill input to 40px against the ~49px submit
   pill so the newsletter CTA row misaligns. Match Blocksy's own :not()
   shape, scoped under .cta (0-5-0, beats 0-4-0), to restore intrinsic
   sizing — same winning-specificity tactic the contact submit-button rule
   uses (.contact-form-wrap .fluentform .ff-el-group button.ff-btn
   [type="submit"]). height alone here; the base rule above still owns the
   pill's padding/border/radius. */
.cta .fluentform .ff-el-form-control:not([size]):not([multiple]){height:auto}
.cta .fluentform .ff-el-form-control:focus{outline:none;border-color:var(--accent)}
.cta .fluentform .ff-el-form-control::placeholder{color:var(--ink-faint)}
.cta .fluentform button[type="submit"]{background:var(--accent);color:var(--paper);border:0;border-radius:999px;padding:16px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:background .2s,transform .2s}
.cta .fluentform button[type="submit"]:hover{background:var(--accent-hover);transform:translateY(-1px)}
.cta .fluentform .ff-errors-in-stack{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--accent)}
@media (max-width:640px){
  /* Column layout flips the flex main axis to vertical, so the row layout's
     `flex:1 1 220px` on .ff-el-group (meant to give the desktop email input
     a minimum row width) is instead read as a 220px MIN-HEIGHT hint, which
     blows a ~200px gap between the input and the button below it. Reset the
     basis so height is content-driven again, and stretch the button to full
     width to match static's `.cta__form{flex-direction:column}` mobile look
     (both children default to `align-items:stretch` there since neither
     `.cta__input` nor `.cta__submit` sets its own width). */
  .cta .fluentform fieldset{flex-direction:column;align-items:stretch}
  .cta .fluentform .ff-el-group{flex:0 1 auto}
  .cta .fluentform button[type="submit"]{width:100%}
}

/* RESPONSIVE — sub-page components */
@media (max-width:1024px){
  .page-hero{padding:150px 22px 70px}
  .section,.cta{padding:110px 22px}
  .section__head{grid-template-columns:1fr;gap:30px}
}
@media (max-width:640px){
  .page-hero{padding:130px 18px 60px}
  .section,.cta{padding:80px 18px}
  .cta__form{flex-direction:column}
}

/* ============================================================
   HERO MAP — p2p/route-hero block (and the home hero's map).
   index.html and the-expedition.html theme this same component
   differently; base rules below carry index.html's (home) values and
   the-expedition.html's divergences are scoped under
   .p2p--the-expedition (body_class from p2p-site/chrome.php) —
   same philosophy as the .journey.is-home/.is-full split.
   Identical-on-both-pages rules stay unscoped.
   ============================================================ */
.hero__map-wrap{position:relative;width:100%;opacity:0;animation:fadeIn 1.4s 1s ease forwards}
.hero__map{width:100%;aspect-ratio:5/7;position:relative;border:1px solid var(--line);background:transparent;padding:18px}
.p2p--the-expedition .hero__map{border-color:rgba(255,77,141,.32);box-shadow:0 0 0 1px rgba(255,77,141,.06) inset}
#heroMapLand .map-land{fill:none;stroke:rgba(244,237,227,.22);stroke-width:.6;vector-effect:non-scaling-stroke}
.hero__map svg{width:100%;height:100%;display:block;overflow:visible}
.hero__map #heroMapWaypoints{position:relative;z-index:2}
.hero__map-label{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);pointer-events:none}
.hero__map-label--tl{top:14px;left:18px}
.hero__map-label--br{bottom:14px;right:18px;text-align:right}
.hero__map-label strong{display:block;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:16px;letter-spacing:.02em;text-transform:none;color:var(--ink);margin-top:3px}

.map-grid-line{stroke:rgba(255,255,255,.07);stroke-width:.6;fill:none;vector-effect:non-scaling-stroke}
.map-grid-line--major{stroke:rgba(255,255,255,.13)}
.map-grid-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;fill:rgba(244,237,227,.36);text-transform:uppercase}
.map-land{fill:#2f3c5e;stroke:#475780;stroke-width:.7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map-frame{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1;vector-effect:non-scaling-stroke}
.map-route-full{fill:none;stroke:#ffaccf;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(255,77,141,.6));vector-effect:non-scaling-stroke}
.map-wp-dot{fill:#ffd0e4;stroke:#161c2d;stroke-width:1.2;vector-effect:non-scaling-stroke}
/* the-expedition.html's warm cream-tinted SVG map palette */
.p2p--the-expedition .map-grid-line{stroke:rgba(244,237,227,.07)}
.p2p--the-expedition .map-grid-line--major{stroke:rgba(244,237,227,.13)}
.p2p--the-expedition .map-land{fill:var(--paper-3);stroke:var(--line-2)}
.p2p--the-expedition .map-frame{stroke:rgba(244,237,227,.1)}
.p2p--the-expedition .map-wp-dot{stroke:var(--paper-3)}
.map-wp-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;fill:#fff;text-transform:uppercase;dominant-baseline:middle}
.map-wp-label--major{font-size:12px;letter-spacing:.22em;fill:#fff;font-weight:500}
.map-wp-label-bg{fill:var(--accent)}

.hero__map-legend{display:flex;justify-content:center;gap:22px;margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.hero__map-legend span{display:inline-flex;align-items:center;gap:7px}
.hero__map-legend i{width:14px;height:2px;border-radius:2px;display:inline-block}

@media (max-width:1024px){
  .hero__map-wrap{max-width:480px;margin:0 auto}
}
@media (max-width:640px){
  .hero__map-wrap{max-width:340px}
  .map-wp-label{font-size:9.5px}
  .map-wp-label--major{font-size:10.5px}
  .map-grid-label{font-size:9px}
}

/* ============================================================
   LEG BREAKDOWN — p2p/leg-cards block.
   Ported verbatim from the static site's the-expedition.html
   inline <style> (.legs, .leg*, including responsive rules).
   ============================================================ */
.legs{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:8px}
.leg{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:start;padding:50px 0;border-bottom:1px solid var(--line);position:relative;transition:background .35s}
.leg:hover{background:var(--paper)}
.leg__num{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--accent);padding-top:9px;display:flex;align-items:center;gap:0}
.leg__num::after{content:"";display:block;width:0;height:1px;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.2,1);margin-left:0}
.leg:hover .leg__num::after{width:28px;margin-left:14px}
.leg__main{max-width:660px}
.leg__mode{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.leg__mode svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.leg__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(26px,3vw,42px);line-height:1.06;letter-spacing:.005em;text-transform:uppercase;margin:0 0 14px;color:var(--ink)}
.leg__title em{font-style:normal;font-weight:600;color:var(--accent)}
.leg__route{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-dim);margin:0 0 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.leg__route .sep{color:var(--accent)}
.leg__body{font-size:15.5px;line-height:1.72;color:var(--ink-dim);margin:0}
.leg__stats{display:flex;flex-direction:column;gap:18px;text-align:right;min-width:128px;padding-top:7px}
.leg__stat{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.leg__stat strong{display:block;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:26px;letter-spacing:.01em;text-transform:none;color:var(--ink);margin-bottom:3px}

@media (max-width:1024px){
  .leg{grid-template-columns:auto 1fr;gap:18px 30px}
  .leg__stats{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:30px;text-align:left;padding-left:0;padding-top:4px}
}
@media (max-width:640px){
  .leg{grid-template-columns:1fr;gap:8px}
  .leg__num{padding-top:0}
  .leg__stats{padding-left:0;gap:24px;padding-top:6px}
}

/* ============================================================
   JOURNEY MAP — p2p/journey-map block.
   Ported from the static site's the-expedition.html inline <style>
   (.journey*, plus the journey-specific .map-route-past/-future,
   .map-marker-*, and the #mapLand .map-land override — the generic
   grid/land/frame/waypoint .map-* rules shared with the hero map are
   already above, from the p2p/route-hero port). Variant differences
   (home vs expedition) ported from index.html and scoped under
   .journey.is-home / .journey.is-full: track height, sticky
   background gradient + starfield, and video background/blend mode.
   Heights vary ONLY via these two classes (index.html: 400vh;
   the-expedition.html: 720vh) — no bare .journey__track height rule.

   Journey chrome shared between both variants (rail, HUD, chapter
   panel, vehicle badge) uses the-expedition.html's values, which are
   already expressed in this file's design tokens (var(--line)/
   var(--ink-dim)/etc.). index.html's copy of the same rules carries
   slightly different hardcoded rgba() values left over from that
   page's pre-unification palette — this file's own header states it
   is the "single source of truth" theme, so one canonical set is used
   for both variants rather than reintroducing that divergence.
   ============================================================ */
.journey{background:var(--paper);color:var(--ink);position:relative;border-top:1px solid var(--line)}
.journey__intro{padding:160px 36px 100px;text-align:center}
.journey__intro .section-label{margin-left:auto;margin-right:auto}
.journey__intro-title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(40px,5.2vw,78px);line-height:1.04;letter-spacing:.005em;text-transform:uppercase;margin:0 auto 32px;max-width:16ch}
.journey__intro-title em{font-style:normal;font-weight:600;color:var(--accent)}
.journey__intro-sub{font-size:17px;color:var(--ink-dim);max-width:520px;margin:0 auto}
.journey__cue{display:inline-flex;align-items:center;gap:10px;margin-top:32px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.journey__cue svg{width:16px;height:16px;animation:journeyCueBounce 1.8s ease-in-out infinite}
@keyframes journeyCueBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.journey__cue svg{animation:none}}
/* p2p/journey-map (Task 12) does not render .journey__intro (that's page
   content) — its "is-home" section renders .journey__cue as a direct
   child of <section class="journey is-home">, not nested inside
   .journey__intro{text-align:center} the way both static sources have it.
   Without that parent, the base rule above (bare inline-flex, no
   container padding) left the cue flush left with no breathing room
   above the sticky map. This override (flagged in Task 12's review,
   applied here in Task 13) self-centers it and restores top spacing
   independent of whatever page content precedes the block. */
.journey.is-home .journey__cue{display:flex;justify-content:center;padding:28px 22px 0}
/* Client directive (July 2026): the home scroll cue sat flush against the
   sticky map below it — give it breathing room underneath. Scoped to
   .p2p--home (the sanctioned page-scope body class, chrome.php 2b) even
   though is-home only renders on the front page today.
   Call-feedback wave A (A6b): client flagged the spacing a second time —
   32px read as nothing against the full-bleed sticky below, so the gap
   is now genuinely generous. */
.p2p--home .journey.is-home .journey__cue{padding-bottom:56px}

.journey__track{position:relative}
.journey.is-home .journey__track{height:400vh}
.journey.is-full .journey__track{height:720vh}
.journey__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.journey.is-full .journey__sticky{background:radial-gradient(ellipse 80% 70% at 40% 50%,rgba(207,226,238,.18),var(--paper-2) 75%)}
.journey.is-home .journey__sticky{background:radial-gradient(ellipse 80% 70% at 40% 50%,rgba(48,62,100,.5),#11172a 75%)}
.journey.is-home .journey__sticky::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 20%,rgba(255,255,255,.45),transparent 50%),radial-gradient(1px 1px at 27% 65%,rgba(255,255,255,.3),transparent 50%),radial-gradient(1px 1px at 45% 40%,rgba(255,255,255,.35),transparent 50%),radial-gradient(1.2px 1.2px at 65% 28%,rgba(255,255,255,.4),transparent 50%),radial-gradient(1px 1px at 78% 78%,rgba(255,255,255,.25),transparent 50%),radial-gradient(1px 1px at 88% 45%,rgba(255,255,255,.35),transparent 50%),radial-gradient(1.2px 1.2px at 18% 88%,rgba(255,255,255,.25),transparent 50%);pointer-events:none;opacity:.5;z-index:0}
.journey__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}
.journey.is-full .journey__video{opacity:.14;filter:blur(2px) grayscale(60%);mix-blend-mode:multiply}
.journey.is-home .journey__video{opacity:.22;filter:blur(2px) grayscale(45%);mix-blend-mode:screen}
.journey__map{position:absolute;top:90px;left:0;right:440px;bottom:90px;display:flex;align-items:center;justify-content:center;z-index:1;padding:0 40px}
.journey__map svg{width:100%;height:100%;max-width:780px;max-height:920px;overflow:visible}

/* Base = index.html (home) journey-map palette; the-expedition.html's
   divergences scoped under .p2p--the-expedition below. */
#mapLand .map-land{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.18);stroke-width:.5}
.map-route-future{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-opacity:.4;stroke-dasharray:5 5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map-route-past{fill:none;stroke:#ffaccf;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,77,141,.7));vector-effect:non-scaling-stroke}
.map-wp-dot--passed{fill:#ff8a4a}
.map-marker-pulse{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;animation:mapPulse 1.8s ease-out infinite;vector-effect:non-scaling-stroke}
.map-marker-pulse--2{animation-delay:.9s}
@keyframes mapPulse{0%{r:6;opacity:.85}100%{r:38;opacity:0}}
.map-marker-dot{fill:#fff;filter:drop-shadow(0 0 8px #ff4d8d) drop-shadow(0 0 16px rgba(255,77,141,.6))}
.map-marker-halo{fill:url(#mapMarkerGrad);opacity:.6}
.p2p--the-expedition #mapLand .map-land{fill:rgba(244,237,227,.06);stroke:rgba(244,237,227,.22)}
.p2p--the-expedition .map-wp-dot--passed{fill:var(--accent)}
.p2p--the-expedition .map-marker-dot{fill:var(--accent);filter:drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 16px rgba(255,77,141,.6))}

/* JOURNEY HUD */
.journey__hud-top{position:absolute;top:0;left:0;right:0;z-index:4;padding:96px 40px 32px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.journey__hud-block{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.journey__hud-block strong{display:block;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:38px;letter-spacing:.005em;color:var(--ink);margin-top:6px;line-height:1;font-variant-numeric:tabular-nums;text-transform:none}
.journey__hud-block strong small{font-size:13px;font-family:var(--mono);font-weight:300;color:var(--ink-dim);margin-left:4px;letter-spacing:0}
.journey__hud--center{text-align:center;display:flex;align-items:center;gap:12px}
.journey__hud-leg{color:var(--accent);font-size:10px;letter-spacing:.22em;padding:8px 14px;border:1px solid rgba(255,77,141,.4);border-radius:999px;background:rgba(255,77,141,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.journey__hud--right{text-align:right}
.journey__hud-bottom{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:0 40px 32px;display:flex;align-items:center;gap:20px;pointer-events:none}
.journey__vehicle{width:56px;height:56px;border:1px solid var(--line);border-radius:50%;background:rgba(22,28,45,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .3s,transform .3s}
.journey__vehicle.is-changing{transform:scale(.85);border-color:var(--accent)}
.journey__vehicle svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.journey__vehicle-mode{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.journey__vehicle-mode strong{display:block;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:1px}
.journey__progress-wrap{flex:1;margin-left:12px}
.journey__progress-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.journey__progress{height:1px;background:rgba(255,255,255,.12);position:relative}
.p2p--the-expedition .journey__progress{background:rgba(244,237,227,.12)}
.journey__progress-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);box-shadow:0 0 12px var(--accent);width:0%;transition:width .05s linear}

/* CHAPTER PANEL */
.journey__panel{position:absolute;top:50%;right:60px;transform:translateY(-50%);width:400px;max-width:calc(100vw - 100px);z-index:3;pointer-events:none}
.journey__chapter{position:absolute;top:0;left:0;right:0;padding:36px 36px 34px;background:rgba(22,28,45,.85);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--line);opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.journey__chapter.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.journey__chapter.is-before{transform:translateY(-20px)}
.journey__chapter-num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.journey__chapter-num span{display:inline-block;width:26px;height:1px;background:var(--accent)}
.journey__chapter-title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.08;letter-spacing:.01em;text-transform:uppercase;margin:0 0 16px}
.journey__chapter-title em{font-style:normal;font-weight:600;color:var(--accent)}
.journey__chapter-body{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin:0 0 26px}
.journey__chapter-stats{display:flex;gap:28px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.journey__chapter-stat{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.journey__chapter-stat strong{display:block;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:23px;letter-spacing:.015em;text-transform:none;color:var(--ink);margin-bottom:2px}
.journey__rail{position:absolute;left:32px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:2px}
.journey__rail-item{display:flex;align-items:center;gap:14px;padding:7px 8px 7px 0;color:var(--ink-faint);text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .25s,gap .25s,opacity .25s;opacity:.55}
.journey__rail-item::before{content:"";display:block;width:14px;height:1px;background:currentColor;transition:width .25s,background .25s;flex-shrink:0}
.journey__rail-item:hover{color:var(--ink-dim);opacity:1;gap:18px}
.journey__rail-item.is-active{color:var(--ink);opacity:1}
.journey__rail-item.is-active::before{width:30px;background:var(--accent)}
.journey__rail-num{font-weight:500}
.journey__rail-label{display:none;color:var(--ink-dim);white-space:nowrap}
.journey__rail-item.is-active .journey__rail-label,.journey__rail-item:hover .journey__rail-label{display:inline}
/* WP-only: real-time "current leg" badge, no static-page equivalent —
   set by view.js only when P2P_LEGS.state === 'underway'. */
.journey__rail-item.is-live{color:var(--accent)}
.journey__rail-item.is-live .journey__rail-label{display:inline}
.journey__rail-item.is-live::after{content:"LIVE";margin-left:8px;padding:2px 6px;font-size:8px;letter-spacing:.16em;color:var(--paper);background:var(--accent);border-radius:999px}
@media (max-width:1100px){.journey__rail{display:none}}

@media (max-width:1024px){
  .journey__intro{padding:120px 22px 60px}
  .journey__hud-top{padding:78px 20px 18px;align-items:center}
  .journey__hud-bottom{padding:0 20px 18px;gap:14px}
  .journey__hud-block strong{font-size:22px}
  .journey__hud-block strong small{font-size:10px}
  .journey__hud-leg{font-size:9px;padding:6px 10px}
  .journey__map{top:80px;right:0;left:0;bottom:240px;padding:0 16px}
  .journey__map svg{max-height:none}
  .journey__panel{top:auto;bottom:96px;right:18px;left:18px;transform:none;width:auto;max-height:200px;overflow:hidden}
  .journey__chapter{padding:18px 20px}
  .journey__chapter-num{margin-bottom:10px;font-size:10px}
  .journey__chapter-title{font-size:clamp(20px,5vw,30px);margin-bottom:8px}
  .journey__chapter-body{font-size:13.5px;line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .journey__chapter-stats{gap:18px;padding-top:12px}
  .journey__chapter-stat strong{font-size:18px}
  .journey__vehicle{width:46px;height:46px}.journey__vehicle svg{width:22px;height:22px}
  .journey__vehicle-mode strong{font-size:14px}
}
@media (max-width:640px){
  .journey__intro{padding:80px 18px 50px}
  .journey__intro-title{font-size:clamp(28px,7vw,40px);margin-bottom:20px}
  .journey__intro-sub{font-size:14px}
  .journey__hud-top{flex-direction:row;gap:12px;padding:68px 16px 14px;flex-wrap:wrap}
  .journey__hud--center{flex-basis:100%;order:3;justify-content:center;margin-top:6px}
  .journey__hud--right{text-align:right}
  .journey__hud-block{font-size:8.5px;letter-spacing:.14em}
  .journey__hud-block strong{font-size:18px;margin-top:3px}
  .journey__hud-block strong small{font-size:9px;margin-left:2px}
  .journey__hud-leg{font-size:8px;letter-spacing:.18em;padding:5px 10px}
  .journey__hud-bottom{padding:0 16px 14px;gap:10px}
  .journey__vehicle{width:40px;height:40px}.journey__vehicle svg{width:18px;height:18px}
  .journey__vehicle-mode{font-size:8.5px}
  .journey__vehicle-mode strong{font-size:12px}
  .journey__progress-wrap{margin-left:6px}
  .journey__progress-label{font-size:8px}
  .journey__map{top:96px;bottom:220px;padding:0 12px}
  .journey__panel{bottom:78px;right:14px;left:14px;max-height:190px}
  .journey__chapter{padding:16px 18px}
  .journey__chapter-title{font-size:20px}
  .journey__chapter-body{font-size:13px;margin-bottom:12px;-webkit-line-clamp:2}
  .journey__chapter-stats{gap:14px;padding-top:10px}
  .journey__chapter-stat{font-size:8px}
  .journey__chapter-stat strong{font-size:16px}
}

/* ============================================================
   CALL-FEEDBACK WAVE A (A1) — home journey panel experiment.
   Client-approved divergence from the static reference (July 2026
   call): (1) the chapter panel grows from a fixed 400px sidebar to a
   ~42% share of the row at desktop ("same size as the map box"
   direction), with type scaled to match; (2) each leg activation
   shifts a per-leg colour. view.js mirrors the active chapter's
   data-leg onto <section class="journey"> as data-active-leg; the
   attribute maps to --leg-color below. Palette is a hue sweep from
   the site's blue (--accent-2) to its magenta (--accent) — leg 1
   starts arctic blue, leg 7 arrives at the brand accent. Scoped to
   .is-home throughout: the-expedition's .is-full journey is
   untouched. Mobile keeps the stacked layout (rules below are
   min-width:1025px, matching the existing 1024px breakpoint).
   ============================================================ */
@media (min-width:1025px){
  .journey.is-home{--journey-panel-w:clamp(400px,42vw,660px)}
  .journey.is-home .journey__map{right:calc(var(--journey-panel-w) + 40px)}
  .journey.is-home .journey__panel{width:var(--journey-panel-w)}
  /* The panel is a zero-height anchor (chapters are position:absolute),
     so base chapters hang DOWN from the 50% line — fine at 400px wide,
     but the grown card's tallest chapter would clip at the fold. Centre
     each chapter on the anchor instead, folding the ±20px entrance
     shift into the same transform. */
  .journey.is-home .journey__chapter{top:50%;transform:translateY(calc(-50% + 24px))}
  .journey.is-home .journey__chapter.is-active{transform:translateY(-50%)}
  .journey.is-home .journey__chapter.is-before{transform:translateY(calc(-50% - 24px))}
  .journey.is-home .journey__chapter{padding:44px 48px 40px}
  .journey.is-home .journey__chapter-num{font-size:12px}
  .journey.is-home .journey__chapter-title{font-size:clamp(30px,3.1vw,46px)}
  .journey.is-home .journey__chapter-body{font-size:16px;line-height:1.65;max-width:60ch}
  .journey.is-home .journey__chapter-stats{gap:34px}
  .journey.is-home .journey__chapter-stat strong{font-size:26px}
}
/* Per-leg colour indicator (all widths). Default = brand accent, so
   pre-scroll (no data-active-leg) looks exactly like the base design.
   Wave C (C1): the seven sweep values are extracted to --leg-1..7 so the
   chapter-panel sweep and the map waypoint dots below share ONE palette
   definition and can't drift. */
.journey.is-home{--leg-color:var(--accent);--leg-1:#7fabde;--leg-2:#8d9ce6;--leg-3:#a48fe8;--leg-4:#c47fe0;--leg-5:#e56cc0;--leg-6:#ff5da4;--leg-7:#ff4d8d}
.journey.is-home[data-active-leg="1"]{--leg-color:var(--leg-1)}
.journey.is-home[data-active-leg="2"]{--leg-color:var(--leg-2)}
.journey.is-home[data-active-leg="3"]{--leg-color:var(--leg-3)}
.journey.is-home[data-active-leg="4"]{--leg-color:var(--leg-4)}
.journey.is-home[data-active-leg="5"]{--leg-color:var(--leg-5)}
.journey.is-home[data-active-leg="6"]{--leg-color:var(--leg-6)}
.journey.is-home[data-active-leg="7"]{--leg-color:var(--leg-7)}
.journey.is-home .journey__chapter-num{color:var(--leg-color);transition:color .5s}
.journey.is-home .journey__chapter-num span{background:var(--leg-color);transition:background-color .5s}
.journey.is-home .journey__chapter-title em{color:var(--leg-color);transition:color .5s}
.journey.is-home .journey__progress-fill{background:var(--leg-color);box-shadow:0 0 12px var(--leg-color);transition:width .05s linear,background-color .5s,box-shadow .5s}
@supports (background:color-mix(in oklab,red 50%,blue)){
  /* Panel tint: blend 8% of the leg colour into the paper tone. Body/
     stat text lifted a step so the tinted background stays ≥4.5:1. */
  .journey.is-home .journey__chapter{background:color-mix(in oklab,rgba(22,28,45,.85) 92%,var(--leg-color));border-color:color-mix(in oklab,var(--line) 72%,var(--leg-color));transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1),background-color .5s,border-color .5s}
  .journey.is-home .journey__chapter-body{color:#c0bab0}
  .journey.is-home .journey__chapter-stat{color:#b3ada2}
}

/* Wave C (C1), client-approved: home journey-map waypoint dots light up
   as the drawn route line reaches them, each in its OWN leg's sweep
   colour (view.js stamps data-leg + a precomputed data-progress offset
   on every dot and toggles .is-reached per frame). Dormant = the muted
   base dot; the legacy latitude-based --passed orange is neutralised on
   home (is-reached supersedes it; the expedition map's .is-full journey
   keeps the old behaviour untouched). Reverse scroll un-reaches dots in
   step with the line un-drawing. The .3s fill/glow transition is
   colour-only — the reached STATE still applies under reduced motion.

   Reach-state legibility fix (July 2026, client call): dot-only colour
   "reads as nothing happening" at real scale, so the reach state now owns
   the whole waypoint. (1) LABELS join in — on home, dormant labels drop
   the always-on accent pill (that constant magenta was exactly why nothing
   seemed to change) for a muted dark one, and the city name lights up in
   its leg colour on reach. Lit text is the leg colour lightened toward
   white via color-mix: the raw sweep colours dip to ~4:1 against the navy
   map / tinted pill (leg 7 worst), while a 72%-leg/28%-white mix keeps
   every leg >=5.3:1 vs map centre #212b47, map edge #11172a AND the
   reached pill (WCAG-computed 2026-07). (2) Reached DOTS also scale 1.4x
   (transform-box:fill-box so SVG circles scale about their own centre)
   with a one-time pop on reach. Under prefers-reduced-motion the colour
   state still applies; scale/pop/transform-transition do not. All scoped
   .journey.is-home — the expedition (.is-full) journey map and the hero
   map keep white-on-accent pills everywhere, unchanged. */
.journey.is-home .map-wp-dot{transform-box:fill-box;transform-origin:center;transition:fill .3s ease,filter .3s ease,transform .3s ease}
.journey.is-home .map-wp-dot--passed{fill:#ffd0e4}
.journey.is-home .map-wp-dot[data-leg="1"]{--wp-leg:var(--leg-1)}
.journey.is-home .map-wp-dot[data-leg="2"]{--wp-leg:var(--leg-2)}
.journey.is-home .map-wp-dot[data-leg="3"]{--wp-leg:var(--leg-3)}
.journey.is-home .map-wp-dot[data-leg="4"]{--wp-leg:var(--leg-4)}
.journey.is-home .map-wp-dot[data-leg="5"]{--wp-leg:var(--leg-5)}
.journey.is-home .map-wp-dot[data-leg="6"]{--wp-leg:var(--leg-6)}
.journey.is-home .map-wp-dot[data-leg="7"]{--wp-leg:var(--leg-7)}
.journey.is-home .map-wp-label[data-leg="1"],.journey.is-home .map-wp-label-bg[data-leg="1"]{--wp-leg:var(--leg-1)}
.journey.is-home .map-wp-label[data-leg="2"],.journey.is-home .map-wp-label-bg[data-leg="2"]{--wp-leg:var(--leg-2)}
.journey.is-home .map-wp-label[data-leg="3"],.journey.is-home .map-wp-label-bg[data-leg="3"]{--wp-leg:var(--leg-3)}
.journey.is-home .map-wp-label[data-leg="4"],.journey.is-home .map-wp-label-bg[data-leg="4"]{--wp-leg:var(--leg-4)}
.journey.is-home .map-wp-label[data-leg="5"],.journey.is-home .map-wp-label-bg[data-leg="5"]{--wp-leg:var(--leg-5)}
.journey.is-home .map-wp-label[data-leg="6"],.journey.is-home .map-wp-label-bg[data-leg="6"]{--wp-leg:var(--leg-6)}
.journey.is-home .map-wp-label[data-leg="7"],.journey.is-home .map-wp-label-bg[data-leg="7"]{--wp-leg:var(--leg-7)}
.journey.is-home .map-wp-dot.is-reached{fill:var(--wp-leg,var(--accent));filter:drop-shadow(0 0 4px var(--wp-leg,var(--accent)));transform:scale(1.4);animation:p2pWpPop .5s ease-out}
@keyframes p2pWpPop{0%{transform:scale(1)}55%{transform:scale(1.9)}100%{transform:scale(1.4)}}
.journey.is-home .map-wp-label{fill:#9aa4ba;transition:fill .3s ease,filter .3s ease}
.journey.is-home .map-wp-label--major{fill:#b6bfd2}
.journey.is-home .map-wp-label-bg{fill:rgba(13,18,33,.72);stroke:rgba(255,255,255,.15);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .3s ease,stroke .3s ease}
.journey.is-home .map-wp-label.is-reached{fill:#fff;filter:drop-shadow(0 0 6px var(--wp-leg,var(--accent)))}
.journey.is-home .map-wp-label-bg.is-reached{fill:rgba(13,18,33,.85);stroke:var(--wp-leg,var(--accent))}
@supports (fill:color-mix(in srgb,red 50%,#fff)){
  .journey.is-home .map-wp-label.is-reached{fill:color-mix(in srgb,var(--wp-leg,var(--accent)) 72%,#fff)}
  .journey.is-home .map-wp-label-bg.is-reached{fill:color-mix(in srgb,rgba(13,18,33,.85) 82%,var(--wp-leg,var(--accent)));stroke:color-mix(in srgb,var(--wp-leg,var(--accent)) 55%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .journey.is-home .map-wp-dot{transition:fill .3s ease,filter .3s ease}
  .journey.is-home .map-wp-dot.is-reached{transform:none;animation:none}
}

/* ============================================================
   DREAM WALL — p2p/dream-wall block.
   Ported verbatim from the static site's dream-movement.html inline
   <style> (.wall__filters, .wall__search, .wall__chip, .wall__grid,
   .wall__card and children, .wall__empty, .wall__add and children,
   .dream-modal, and the "KIT LOCK STATES" rules the block's view.js
   toggles on the Dream Chaser Kit CTA). Responsive rules ported from
   the same source's two @media blocks (only the wall/modal-relevant
   declarations — the .pillars/.kits selectors in those blocks belong
   to page content, not this block, and are intentionally not
   duplicated here). NB: never write a wildcard like "wall__card*"
   followed by "/" in these comments — the "* /" pair (without the
   space) terminates the comment early and the parser then swallows
   the next real rule while recovering (this exact bug once ate the
   .wall base rule here and .stats further down).
   ============================================================ */
/* WALL SECTION WRAPPER — index.html's home Dream Wall section shell
   (.wall/.wall__inner/.wall__head/.wall__title/.wall__intro + its 640px
   variants further down). These were missed in the original merge (only
   dream-movement.html's card-level wall__* rules were ported; the dream
   page wraps its wall in `.section section--alt`, so these home-only
   shell rules are inert there). */
.wall{padding:160px 36px;background:var(--paper);border-top:1px solid var(--line);position:relative}
.wall__inner{max-width:1400px;margin:0 auto}
.wall__head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:64px}
.wall__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(38px,4.7vw,72px);line-height:1.04;letter-spacing:.005em;text-transform:uppercase;margin:0}
.wall__title em{font-style:normal;font-weight:600;color:var(--accent)}
.wall__intro{font-size:16px;line-height:1.6;color:var(--ink-dim);max-width:480px}
/* Task H: the intro sentence moved from a bare `<p style="margin:0 0
   16px">` (inline style, un-round-trippable through the block editor's
   style engine — see block-normalize.php's own docblock) into a real
   `wp:paragraph` block with this class, so it's editable; margin matches
   the inline value byte-for-byte. */
.wall__intro-text{margin:0 0 16px}

.wall__filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:36px}
.wall__search{position:relative;margin-right:6px;flex:0 0 auto}
.wall__search input{background:transparent;border:1px solid var(--ink-faint);border-radius:999px;padding:10px 16px 10px 38px;font:inherit;font-size:13px;color:var(--ink);width:230px;transition:border-color .2s}
.wall__search input:focus{outline:none;border-color:var(--accent)}
.wall__search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--ink-faint);fill:none;stroke-width:1.6;pointer-events:none}
.wall__chip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink-dim);transition:border-color .2s,color .2s,background .2s}
.wall__chip:hover{border-color:var(--accent);color:var(--accent)}
.wall__chip.is-active{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.wall__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.wall__card{border:1px solid var(--line);border-left:2px solid rgba(255,77,141,.45);padding:28px;background:rgba(244,237,227,.03);display:flex;flex-direction:column;gap:16px;transition:border-color .3s,transform .3s,background .3s,box-shadow .3s}
.wall__card:hover{border-color:var(--accent);transform:translateY(-3px);background:rgba(255,77,141,.05);box-shadow:0 14px 38px rgba(255,77,141,.10)}
.wall__card.is-hidden{display:none}
.wall__card-cat{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-soft);border-radius:999px;padding:4px 9px;align-self:flex-start}
.wall__card-quote{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink);margin:0;font-weight:400}
.wall__card-quote::before{content:"\201C";color:var(--accent);font-size:1.35em;line-height:0;margin-right:3px;vertical-align:-.12em}
.wall__card-attr{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-top:auto;display:flex;align-items:center;gap:10px}
.wall__card-attr::before{content:"—";color:var(--accent)}
.wall__card.is-new{animation:wallFadeIn .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes wallFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wall__empty{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);padding:40px 0;text-align:center;display:none}
.wall__empty.is-shown{display:block}

/* PREVIEW variant (variant="preview") cards — match index.html's home
   wall cards, which are DELIBERATELY simpler than the dream page's:
   no category chip, no oversized opening-quote glyph, 17px quote,
   fainter background, and an 80px gap below the grid. Child classes are
   renamed wall__preview-* rather than reusing wall__card-*: card count
   is asserted in tests/test-dream-wall.php via a raw substr_count() of
   the literal string "wall__card", and "wall__card-quote" etc. would
   each count as extra occurrences ("wall__grid--preview" is safe — it
   does not contain that substring). Divergent card-container
   declarations are scoped under .wall__grid--preview (emitted only by
   the preview branch of blocks/dream-wall/render.php).
   Call-feedback wave A (A5), July 2026: the static home's uniform
   hairline border (border-left:1px var(--line), which this rule used to
   reproduce) read as "the left border does not work" — the accent left
   edge from the base .wall__card rule now renders on BOTH walls. */
.wall__grid--preview{margin-bottom:80px}
.wall__grid--preview .wall__card{background:rgba(255,255,255,.02);gap:18px}
.wall__grid--preview .wall__card:hover{background:rgba(255,77,141,.04);box-shadow:none}
.wall__preview-quote{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink);margin:0;font-weight:400}
.wall__preview-attr{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-top:auto;display:flex;align-items:center;gap:10px}
.wall__preview-attr::before{content:"—";color:var(--accent)}

/* WALL ADD BUTTON */
.wall__add{display:flex;justify-content:center;margin:48px 0 0}
.wall__add-btn{background:var(--accent);color:var(--paper);border:0;border-radius:999px;padding:18px 38px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:12px;transition:background .2s,transform .2s}
.wall__add-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.wall__add-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* MODAL — Wave C (C3) client bug fix: the Country/Category selects (and
   the text inputs) rendered 40px tall with their text bottom-clipped.
   Root cause: Blocksy's main.min.css sets `height:var(--theme-form-field-
   height, 40px)` on bare `select`/`input:is([type=email],…)`, and 40px
   minus this modal's 13px vertical paddings leaves a 12px content box —
   half a line. `height:auto` on our higher-specificity field rule below
   restores intrinsic sizing. Viewport units also moved 90vh -> 90dvh so
   short/dynamic mobile viewports measure the VISIBLE height (fields must
   never be clipped at >=320x568; the body scrolls instead), with the
   inner scroll box inset for the dialog's own 1px borders so it can't
   spill past the frame. */
.dream-modal{border:1px solid var(--line);background:var(--paper-2);color:var(--ink);padding:0;width:min(640px,92vw);max-height:90dvh;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.dream-modal::backdrop{background:rgba(11,14,22,.78);backdrop-filter:blur(3px)}
.dream-modal[open]{animation:modalIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dream-modal__inner{padding:44px 44px 40px;overflow-y:auto;max-height:calc(90dvh - 2px)}
.dream-modal__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border:1px solid var(--line-2);background:transparent;border-radius:50%;color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.dream-modal__close:hover{border-color:var(--accent);color:var(--accent)}
.dream-modal__close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.dream-modal__label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}
.dream-modal__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:.005em;text-transform:uppercase;margin:0 0 28px}
.dream-modal__title em{font-style:normal;font-weight:600;color:var(--accent)}
.dream-modal__field{display:block;margin-bottom:14px}
.dream-modal__field-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:7px;display:block}
.dream-modal__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Call-feedback wave A (A4): privacy reassurance under the email field. */
.dream-modal__privacy{font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.55;color:var(--ink-dim);margin:-4px 0 16px}
.dream-modal input,.dream-modal textarea,.dream-modal select{background:transparent;border:1px solid var(--ink-faint);padding:13px 16px;font:inherit;font-size:14px;color:var(--ink);transition:border-color .2s;border-radius:0;width:100%;height:auto}
.dream-modal textarea{min-height:96px;resize:vertical;font-family:inherit}
.dream-modal select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a39e93' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 16px center}
.dream-modal input:focus,.dream-modal textarea:focus,.dream-modal select:focus{outline:none;border-color:var(--accent)}
.dream-modal input::placeholder,.dream-modal textarea::placeholder{color:var(--ink-faint)}
.dream-modal__submit{background:var(--accent);color:var(--paper);border:0;border-radius:999px;padding:16px 32px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;width:100%;margin-top:10px;transition:background .2s,transform .2s}
.dream-modal__submit:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* Consent checkbox row — no static-page equivalent (the static form has
   no server round-trip, so it never needed a submit/opt-in status row).
   Reuses the same field spacing/typography tokens as the rest of the
   modal rather than the block input styling above (a checkbox has no
   business being width:100%). */
.dream-modal__field--check{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-dim);cursor:pointer}
.dream-modal__field--check input[type=checkbox]{width:auto;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}

/* Submit status row (fetch-enhanced submit result) — no static-page
   equivalent either, for the same reason: wp-comments-post.php can
   reject a submission (honeypot/throttle/required-field) in ways the
   static form's client-only validation never could, so this block needs
   somewhere to surface that message. */
.dream-modal__status{font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.5;margin:14px 0 0;display:none}
.dream-modal__status.is-shown{display:block}
.dream-modal__status.is-success{color:var(--accent)}
.dream-modal__status.is-error{color:#ff6b6b}

/* KIT LOCK STATES */
.kit__cta-btn{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;border-radius:999px;padding:12px 20px;cursor:pointer;border:1px solid var(--line-2);background:transparent;transition:border-color .2s,color .2s,background .2s}
.kit__cta-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.kit__cta-btn.is-locked{color:var(--ink-faint);border-style:dashed;cursor:not-allowed}
.kit__cta-btn.is-unlocked{color:var(--accent);border-color:var(--accent)}
.kit__cta-btn.is-unlocked:hover{background:var(--accent);color:var(--paper)}
.kit__lock-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:14px 0 0}
.kit__lock-note.is-unlocked{color:var(--accent)}

@media (max-width:1024px){
  .wall__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .wall{padding:110px 22px}
  .wall__head{grid-template-columns:1fr;gap:30px}
  .wall__grid{grid-template-columns:1fr;gap:16px}
  .wall__search input{width:100%}
  .wall__search{width:100%;margin-right:0;margin-bottom:4px}
  .dream-modal__row{grid-template-columns:1fr}
  .dream-modal__inner{padding:40px 26px 34px}
}

/* ============================================================
   PATTERN LIBRARY — Task 14 (p2p-site/patterns/*.php).
   Section CSS these 17 patterns depend on, ported from the static
   site's page-specific inline <style> blocks (index.html,
   dream-movement.html, the-team.html, donate.html — the task's
   read-only pattern sources). Selectors already covered elsewhere in
   this file (.page-hero*, .interstitial*, .cta*, .hero__map-wrap/
   .hero__map, .kit__cta-btn lock states) are intentionally not
   repeated here.
   ============================================================ */

/* PHOTO — p2p/photo-frame, and reused by p2p/mission-cards,
   p2p/journal-grid, p2p/profile wherever a `.photo` placeholder is
   used. Base rule carries background-size:cover/background-position:
   center — 9 of the 10 static pages declare them (import-media.php DOES
   set real inline background-images, so without them images rendered
   tiled at natural size, top-left anchored). dream-movement.html is the
   only source that omits the pair, and it never sets an inline
   background-image, so the cover/center declarations are inert there —
   an omission-only divergence, no modifier needed. Remaining .photo
   sub-part rules are the shared sub-page variants; index.html's
   divergent caption/gradient treatments are scoped under .p2p--home
   below (body_class from mu-plugins/p2p-site/chrome.php).
   `.photo[style*="background-image"]::before` (below the base ::before)
   is NOT page-scoped: the p2p/photo block (Task D) can put a real inline
   background-image on a `.photo` on ANY page, not just home, and the
   opaque placeholder gradient must give way to a translucent scrim so
   that image actually renders (the-team's profile portrait is the
   current sub-page example). The `.p2p--home` variant of the same
   selector further below carries identical values — it's a harmless,
   more-specific duplicate kept alongside home's other `.p2p--home
   .photo*` treatments rather than deleted, so this block stays a
   self-contained diff. */
/* background-clip keeps the image inside the padding box: without it the image
   paints under the translucent 1px border while the ::before scrim (inset:0)
   stops at the border's inner edge — a 1px un-darkened strip (client-reported
   on the-cause). */
.photo{position:relative;overflow:hidden;background-color:var(--paper-3);background-size:cover;background-position:center;border:1px solid var(--line);background-clip:padding-box}
.photo::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 30% 30%,rgba(207,226,238,.10),transparent 60%),radial-gradient(ellipse 60% 80% at 80% 80%,rgba(255,77,141,.08),transparent 60%),linear-gradient(135deg,var(--paper-3) 0%,var(--paper-2) 100%);z-index:0}
.photo[style*="background-image"]::before{background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 22%,transparent 48%);z-index:1;pointer-events:none}
.photo::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,237,227,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(244,237,227,.015) 1px,transparent 1px);background-size:18px 18px;z-index:0}
.photo>*{position:relative;z-index:1}
.photo__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);z-index:1}
.photo__ph svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4}
.photo__caption{position:absolute;bottom:14px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--accent);padding:6px 10px;z-index:2}
.photo__corner{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);z-index:2}
/* index.html's home-only .photo treatments (its inline <style> diverges
   from the sub-page variant that landed above): a bottom-darkening
   overlay on real images, deeper slate gradient placeholder, plain
   transparent mono caption with an accent dash (NOT the magenta pill —
   the pill on home's field journal was a variant collision, not a theme
   leak), and a fainter corner label. */
.p2p--home .photo[style*="background-image"]::before{background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 22%,transparent 48%);z-index:1;pointer-events:none}
.p2p--home .photo::before{background:radial-gradient(ellipse 80% 60% at 30% 30%,rgba(207,226,238,.08),transparent 60%),radial-gradient(ellipse 60% 80% at 80% 80%,rgba(255,77,141,.08),transparent 60%),linear-gradient(135deg,#2c3856 0%,#1a2138 100%)}
.p2p--home .photo::after{background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px)}
.p2p--home .photo__caption{left:16px;color:rgba(244,237,227,.85);background:none;padding:0}
.p2p--home .photo__caption::before{content:"";display:inline-block;width:14px;height:1px;background:rgba(255,77,141,.7);vertical-align:middle;margin-right:8px}
.p2p--home .photo__corner{color:rgba(244,237,227,.35)}

/* INTERSTITIAL — index.html's inline <style> scales `.interstitial__stat`
   up from the shared sub-page rule above (~line 176: clamp(48px,7.4vw,
   128px)/.98/44px margin/18ch) and keeps its <em> on one line. Values
   copied verbatim from index.html's own <style> block. */
.p2p--home .interstitial__stat{font-size:clamp(54px,8.4vw,148px);line-height:.96;margin:0 0 48px;max-width:16ch}
.p2p--home .interstitial__stat em{white-space:nowrap}

/* HERO — VIDEO — p2p/hero-video (index.html's bespoke homepage hero;
   distinct from the generic `.page-hero*` used by p2p/hero-page).
   `.hero__map-wrap`/`.hero__map` are not repeated here — already
   ported above for p2p/route-hero and reused as-is by this pattern. */
.hero{min-height:100svh;position:relative;display:flex;align-items:center;padding:120px 36px 80px;background:radial-gradient(ellipse 60% 50% at 75% 50%,rgba(255,77,141,.08),transparent 60%),radial-gradient(ellipse 50% 40% at 20% 30%,rgba(120,180,200,.06),transparent 60%),linear-gradient(180deg,#1c2542 0%,#161c2d 100%);overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;filter:blur(1px) grayscale(20%);pointer-events:none;z-index:0}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,28,45,.55) 0%,rgba(22,28,45,.75) 100%);pointer-events:none;z-index:1}
.hero__stars{position:absolute;top:0;left:0;right:0;height:90vh;background-image:radial-gradient(1px 1px at 12% 20%,rgba(255,255,255,.55),transparent 50%),radial-gradient(1px 1px at 27% 15%,rgba(255,255,255,.4),transparent 50%),radial-gradient(1px 1px at 45% 40%,rgba(255,255,255,.5),transparent 50%),radial-gradient(1.5px 1.5px at 65% 28%,rgba(255,255,255,.6),transparent 50%),radial-gradient(1px 1px at 78% 18%,rgba(255,255,255,.4),transparent 50%),radial-gradient(1px 1px at 88% 65%,rgba(255,255,255,.45),transparent 50%),radial-gradient(1px 1px at 18% 70%,rgba(255,255,255,.3),transparent 50%),radial-gradient(1.5px 1.5px at 53% 80%,rgba(255,255,255,.5),transparent 50%);pointer-events:none;opacity:0;animation:fadeIn 2s .3s ease forwards;z-index:2}
/* the-expedition.html themes the same .hero shell differently: lighter
   paper gradient, dimmed multiplied video, softer scrim, no starfield.
   Scoped via the p2p--{slug} body class (p2p-site/chrome.php). */
.p2p--the-expedition .hero{background:radial-gradient(ellipse 60% 50% at 75% 50%,rgba(255,77,141,.10),transparent 60%),radial-gradient(ellipse 50% 40% at 20% 30%,rgba(207,226,238,.08),transparent 60%),linear-gradient(180deg,var(--paper-2) 0%,var(--paper-3) 100%)}
.p2p--the-expedition .hero__video{opacity:.18;filter:blur(1px) grayscale(40%);mix-blend-mode:multiply}
.p2p--the-expedition .hero__scrim{background:linear-gradient(180deg,rgba(22,28,45,.45) 0%,rgba(22,28,45,.7) 100%)}
.p2p--the-expedition .hero__stars{display:none}
.hero__inner{position:relative;z-index:2;max-width:1400px;width:100%;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:80px}
.hero__text{position:relative}
.hero__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:32px;opacity:0;animation:rise 1s .2s ease forwards;display:inline-flex;align-items:center;gap:12px}
.hero__eyebrow-icon{width:16px;height:16px;color:var(--accent);flex-shrink:0}
.hero__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(50px,6.2vw,104px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;margin:0 0 36px;color:var(--ink)}
.hero__title em{font-style:normal;font-weight:600;color:var(--accent)}
/* Staged per-line title reveal — index.html's .hero__title-line spans.
   import/content/home.php carries this exact markup, so the rules are
   live on the home hero (decorative entrance animation only). */
.hero__title-line{display:block;overflow:hidden}
.hero__title-line span{display:inline-block;transform:translateY(105%);opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.1,1) forwards}
.hero__title-line:nth-child(1) span{animation-delay:.4s}
.hero__title-line:nth-child(2) span{animation-delay:.55s}
.hero__title-line:nth-child(3) span{animation-delay:.7s}
.hero__lede{max-width:480px;font-size:17px;line-height:1.6;color:var(--ink-dim);margin:0 0 44px;opacity:0;animation:rise 1s 1s ease forwards}
.hero__meta{display:grid;grid-template-columns:repeat(3,auto);gap:40px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);opacity:0;animation:rise 1s 1.15s ease forwards}
.hero__meta strong{font-variant-numeric:tabular-nums;display:block;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:32px;letter-spacing:.005em;text-transform:none;color:var(--ink);margin-bottom:4px}
.hero__meta strong sup{font-size:13px;font-family:var(--mono);font-weight:300;opacity:.7;vertical-align:super;margin-left:2px}
.hero__note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:18px 0 0;opacity:0;animation:rise 1s 1.3s ease forwards}
.hero__scroll{margin:36px auto 0;width:fit-content;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:fadeIn 1s 1.8s ease forwards}
.hero__scroll-line{width:1px;height:50px;background:linear-gradient(180deg,var(--ink-faint),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;top:-50%;left:0;right:0;height:50%;background:linear-gradient(180deg,transparent,var(--accent));animation:scrollPulse 2.2s ease-in-out infinite}
@keyframes scrollPulse{0%{top:-50%}100%{top:100%}}
@media (max-width:1024px){
  .hero{padding:90px 22px 50px;min-height:auto}
  .p2p--the-expedition .hero{padding:120px 22px 60px}
  .hero__inner{grid-template-columns:1fr;gap:50px}
  .hero__meta{gap:24px}.hero__meta strong{font-size:24px}
}
@media (max-width:640px){
  .hero{padding:100px 18px 36px}
  .p2p--the-expedition .hero{padding:120px 18px 40px}
  .hero__title{font-size:clamp(40px,11vw,60px);margin-bottom:24px}
  .hero__lede{font-size:15px;margin-bottom:32px}
  .hero__meta{grid-template-columns:1fr 1fr;gap:18px}.hero__meta strong{font-size:22px}
}

/* STAT BAND — p2p/stat-band. Generic shell (placeholder copy, per
   task-14-brief.md's section→source map: "index.html hero meta +
   interstitial stats"). Not a verbatim port — a new reusable
   three-up number band, styled from the same tokens as
   `.hero__meta` (label+figure pairing) and `.interstitial__source`
   (mono source citation), under its own `.statband` prefix so it
   doesn't collide with `.hero__meta` (hero-only) or the-team.html's
   page-specific "prior expeditions" `.stats`/`.stat` classes (not a
   pattern in this library). */
.statband{padding:0}
.statband__grid{display:grid;grid-template-columns:repeat(3,auto);gap:48px;margin-bottom:20px}
.statband__item{display:flex;flex-direction:column;gap:6px}
.statband__num{font-variant-numeric:tabular-nums;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:.005em;color:var(--ink)}
.statband__label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.statband__source{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);margin:0}
@media (max-width:640px){.statband__grid{grid-template-columns:1fr 1fr;gap:24px}}

/* MISSION — p2p/mission-cards (index.html MISSION). */
.mission{padding:160px 36px;background:var(--paper);border-top:1px solid var(--line)}
.mission__inner{max-width:1400px;margin:0 auto}
.mission__head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:80px}
.mission__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(42px,5.7vw,84px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;margin:0}
.mission__title em{font-style:normal;font-weight:600;color:var(--accent)}
.mission__intro{font-size:18px;line-height:1.6;color:var(--ink-dim);max-width:460px}
.mission__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.mission__card{position:relative;border:1px solid var(--line);background:var(--paper-2);transition:border-color .3s,background .3s,transform .4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;overflow:hidden}
.mission__card:hover{border-color:var(--accent);transform:translateY(-4px)}
.mission__card-photo{aspect-ratio:16/10;width:100%;border:0;border-bottom:1px solid var(--line)}
.mission__card-body{padding:36px;display:flex;flex-direction:column;flex-grow:1}
.mission__card-num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent);margin:0 0 22px}
.mission__card-title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:28px;line-height:1.1;letter-spacing:.015em;text-transform:uppercase;margin:0 0 18px}
.mission__card-text{font-size:15px;line-height:1.6;color:var(--ink-dim);margin:0 0 32px;flex-grow:1}
.mission__card-cta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:12px;transition:gap .2s,color .2s}
.mission__card-cta:hover{gap:18px;color:var(--accent)}
.mission__card-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
@media (max-width:1024px){
  .mission{padding:110px 22px}
  .mission__head{grid-template-columns:1fr;gap:30px}
  .mission__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mission{padding:80px 18px}
  .mission__card-body{padding:28px 24px}
  .mission__card-title{font-size:24px}
}

/* CAUSE — p2p/cause-summary (index.html CAUSE). `.sarah__link` is
   ported here too — a standalone outbound-link style (not scoped under
   `.sarah`) reused by the cause section's own "Learn about the cause"
   link, and by every other section that links off the home page (DREAM
   WALL's "Share your dream…", SARAH's own "Meet Sarah"). */
.cause{padding:160px 36px;background:var(--paper);border-top:1px solid var(--line);position:relative}
.cause__inner{max-width:1400px;margin:0 auto}
.cause__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(42px,5.7vw,88px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;margin:0}
.cause__title em{font-style:normal;font-weight:600;color:var(--accent)}
.cause__intro{font-size:18px;line-height:1.6;color:var(--ink-dim);max-width:460px}
.cause__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cause__stat{background:var(--paper);padding:56px 32px;transition:background .3s}
.cause__stat:hover{background:var(--paper-2)}
.cause__stat-num{font-variant-numeric:tabular-nums;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(46px,5.2vw,80px);line-height:1;letter-spacing:0;color:var(--ink);display:block;margin-bottom:18px}
.cause__stat-num em{font-style:normal;font-weight:600;color:var(--accent)}
.cause__stat-label{font-size:14px;line-height:1.45;color:var(--ink-dim)}
.cause__source{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:24px;letter-spacing:.06em}
.cause__guide{margin:0 0 100px}
.cause__guide-title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(28px,3.2vw,46px);line-height:1.08;letter-spacing:.005em;text-transform:uppercase;margin:0 0 48px;max-width:24ch}
.cause__guide-cols{display:block}
.cause__guide-body{max-width:66ch}
.cause__guide-body p{font-size:16px;line-height:1.7;color:var(--ink-dim);margin:0 0 22px}
.cause__guide-body p:last-child{margin-bottom:0}
.cause__guide-body strong{color:var(--ink);font-weight:500}
.sarah__link{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--ink);transition:gap .2s,color .2s,border-color .2s;margin-top:12px}
.sarah__link:hover{gap:18px;color:var(--accent);border-color:var(--accent)}
@media (max-width:1024px){
  .cause{padding:110px 22px}
  .cause__stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cause{padding:80px 18px}
  .cause__stats{grid-template-columns:1fr}
  .cause__stat{padding:36px 22px}
  .cause__stat-num{font-size:46px;margin-bottom:12px}
}

/* SARAH — index.html SARAH (homepage teaser only; no p2p/* pattern wraps
   this section, it's built directly as block markup in
   import/content/home.php since nothing else on the site reuses it).
   `.sarah__link` itself lives above, in the CAUSE block. */
.sarah{padding:160px 36px;background:var(--paper);border-top:1px solid var(--line)}
.sarah__inner{max-width:1400px;margin:0 auto}
.sarah__main{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;margin-bottom:80px}
.sarah__photo{aspect-ratio:4/5;width:100%}
.sarah__video-wrap{border:1px solid var(--line);background:var(--paper-3)}
.sarah__video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sarah__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(38px,4.7vw,72px);line-height:1.04;letter-spacing:.005em;text-transform:uppercase;margin:0 0 32px}
.sarah__title em{font-style:normal;font-weight:600;color:var(--accent)}
.sarah__body{font-size:17px;line-height:1.65;color:var(--ink-dim);margin:0 0 18px}
.sarah__body strong{color:var(--ink);font-weight:500}
@media (max-width:1024px){
  .sarah{padding:110px 22px}
  .sarah__main{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .sarah{padding:80px 18px}
  .sarah__title{font-size:36px;margin-bottom:24px}
  .sarah__body{font-size:15px}
}

/* JOURNAL — p2p/journal-grid (index.html FIELD JOURNAL). */
.journal{padding:140px 36px;background:var(--paper-2);border-top:1px solid var(--line)}
.journal__inner{max-width:1400px;margin:0 auto}
.journal__head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:64px}
.journal__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(38px,4.7vw,72px);line-height:1.04;letter-spacing:.005em;text-transform:uppercase;margin:0}
.journal__title em{font-style:normal;font-weight:600;color:var(--accent)}
.journal__intro{font-size:16px;line-height:1.6;color:var(--ink-dim);max-width:440px}
.journal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.journal__item{width:100%;aspect-ratio:4/3}
@media (max-width:1024px){
  .journal{padding:110px 22px}
  .journal__head{grid-template-columns:1fr;gap:30px}
  .journal__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .journal{padding:80px 18px}
  .journal__grid{grid-template-columns:1fr}
}

/* PILLARS — p2p/pillars (dream-movement.html). */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pillar{background:var(--paper-2);padding:54px 44px;transition:background .3s}
.pillar:hover{background:var(--paper-3)}
.pillar__num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.pillar__num span{display:inline-block;width:26px;height:1px;background:var(--accent)}
.pillar__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;margin:0 0 16px}
.pillar__text{font-size:15px;line-height:1.65;color:var(--ink-dim);margin:0}
@media (max-width:1024px){.pillars{grid-template-columns:1fr}}
@media (max-width:640px){.pillar{padding:40px 28px}}

/* KITS — p2p/kits (dream-movement.html). `.kit__cta-btn` lock-state
   rules already exist above (ported for p2p/dream-wall in Task 13) —
   not repeated here. */
.kits{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.kit{position:relative;border:1px solid var(--line);background:var(--paper);padding:52px 48px;display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.kit:hover{border-color:var(--accent);transform:translateY(-4px)}
.kit::before{content:"";position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle at 100% 0,rgba(255,77,141,.14),transparent 70%);pointer-events:none}
.kit__label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.kit__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(26px,2.8vw,38px);line-height:1.08;letter-spacing:.01em;text-transform:uppercase;margin:0 0 18px}
.kit__text{font-size:15px;line-height:1.7;color:var(--ink-dim);margin:0 0 34px;flex-grow:1}
.kit__cta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:10px;align-self:flex-start;border:1px dashed var(--line-2);border-radius:999px;padding:11px 18px}
.kit__cta .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulseDot 1.8s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:1024px){.kits{grid-template-columns:1fr}}
@media (max-width:640px){.kit{padding:40px 30px}}

/* PROFILE — p2p/profile (the-team.html Sarah profile). */
.profile{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.profile__media{position:sticky;top:120px}
.profile__photo{aspect-ratio:4/5;width:100%}
.profile__badge{margin-top:16px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.profile__role{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.profile__role svg{width:16px;height:16px}
.profile__name{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(34px,4.4vw,62px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;margin:0 0 32px;color:var(--ink)}
.profile__name em{font-style:normal;font-weight:600;color:var(--accent)}
.profile__body p{font-size:16.5px;line-height:1.78;color:var(--ink-dim);margin:0 0 22px}
.profile__body p:first-of-type{font-size:19px;color:var(--ink);line-height:1.6}
.profile__body strong{color:var(--ink);font-weight:500}
.profile__link{color:var(--accent);font-weight:500;border-bottom:1px solid var(--accent-soft);transition:border-color .2s}
.profile__link:hover{border-color:var(--accent)}
@media (max-width:1024px){
  .profile{grid-template-columns:1fr;gap:40px}
  .profile__media{position:relative;top:0;max-width:460px}
  .profile__photo{aspect-ratio:4/3}
}

/* CREDENTIALS — p2p/credentials (the-team.html). */
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cred{background:var(--paper);padding:46px 38px}
.cred__label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:26px;display:flex;align-items:center;gap:12px}
.cred__label svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cred ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.cred li{font-size:15px;line-height:1.55;color:var(--ink-dim);padding-left:22px;position:relative}
.cred li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--accent)}
.cred li strong{color:var(--ink);font-weight:500}
.cred li em{font-style:italic;color:var(--ink)}
@media (max-width:1024px){.creds{grid-template-columns:1fr}}
@media (max-width:640px){.cred{padding:36px 26px}}

/* BEAR GRYLLS QUOTE — p2p/quote (the-team.html). */
.bgquote{padding:150px 36px;background:var(--paper-3);color:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--line)}
.bgquote::before{content:"";position:absolute;inset:-30% -10% auto;height:90%;background:radial-gradient(ellipse at 50% 0%,rgba(255,77,141,.30),transparent 62%);pointer-events:none}
.bgquote__inner{max-width:980px;margin:0 auto;text-align:center;position:relative;z-index:1}
/* Circular Bear Grylls avatar above the quote mark ("Meet Sarah" rework).
   The 50% 20% crop was an inline style on the static source's photo div;
   the p2p/photo block has no background-position attribute, so it lives
   here (overrides `.photo`'s background-position:center). */
.bgquote__avatar{width:150px;height:150px;border-radius:50%;margin:0 auto 28px;background-position:50% 20%}
.bgquote__avatar .photo__ph{font-size:9px;letter-spacing:.14em;text-align:center;padding:0 8px}
.bgquote__mark{font-family:"Playfair Display",serif;font-size:140px;line-height:.7;color:var(--accent);display:block;height:.5em;margin-bottom:10px}
.bgquote__text{font-family:"Playfair Display",serif;font-weight:500;font-style:italic;font-size:clamp(24px,3.2vw,42px);line-height:1.32;margin:0 0 38px}
.bgquote__cite{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.bgquote__cite span{display:block;color:var(--ink-dim);margin-top:9px;letter-spacing:.12em;font-size:11px}
@media (max-width:1024px){.bgquote{padding:110px 22px}}
@media (max-width:640px){.bgquote{padding:80px 18px}}

/* ADVISORY BOARD — p2p/advisors (the-team.html). */
.advisors{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.advisor{border:1px solid var(--line);background:var(--paper-2);display:flex;flex-direction:column;transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.advisor:hover{border-color:var(--accent);transform:translateY(-4px)}
.advisor__top{display:flex;align-items:center;gap:15px;padding:30px 30px 0}
.advisor__icon{width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;transition:border-color .3s,background .3s}
.advisor:hover .advisor__icon{border-color:var(--accent);background:rgba(255,77,141,.08)}
.advisor__icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.advisor__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:18px;letter-spacing:.05em;text-transform:uppercase;margin:0;color:var(--ink)}
.advisor__body{padding:18px 30px 32px;font-size:14.5px;line-height:1.68;color:var(--ink-dim);margin:0}
.advisor__body a{color:var(--accent);border-bottom:1px solid var(--accent-soft);transition:border-color .2s;word-break:break-word}
.advisor__body a:hover{border-color:var(--accent)}
@media (max-width:1024px){.advisors{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.advisors{grid-template-columns:1fr}}

/* ALLOCATION — p2p/allocation (donate.html "where your money goes"). */
.allocation{margin:44px 0 8px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.alloc{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.alloc__icon{width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.alloc__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.alloc__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:19px;letter-spacing:.03em;text-transform:uppercase;margin:0 0 8px;color:var(--ink);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.alloc__tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-soft);border-radius:999px;padding:4px 9px}
.alloc__text{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin:0}

/* FAQ — p2p/faq (donate.html FAQ, `<details>`/`<summary>` via
   core/details). `.faq__body` renders as a `<p>` in this pattern
   (core/paragraph, so the answer text stays client-editable) rather
   than the source's plain `<div>` — margin:0 added below so the
   browser default `<p>` margin doesn't reintroduce spacing the
   source never had. */
.faq{max-width:820px}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(18px,2vw,23px);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__icon{position:relative;width:18px;height:18px;flex-shrink:0}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--accent);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq__icon::before{top:8px;left:0;width:18px;height:2px}
.faq__icon::after{top:0;left:8px;width:2px;height:18px}
.faq__item[open] .faq__icon::after{transform:scaleY(0)}
.faq__body{margin:0;padding:0 0 28px;font-size:15.5px;line-height:1.7;color:var(--ink-dim);max-width:70ch}
.faq__body a{color:var(--accent);border-bottom:1px solid var(--accent-soft)}

/* ============================================================
   TASK 17 — INNER PAGE SECTIONS
   Page-specific components not covered by Tasks 9-14 (checked against
   this file first — .photo, .pillars, .kits, the wall components,
   .dream-modal, .profile, .creds, .bgquote, .advisors, .hero (+map),
   the journey and legs components were already
   fully ported and are reused as-is). Ported verbatim, token-based,
   from the-cause.html / modern-slavery.html / dream-movement.html /
   the-team.html inline <style> blocks.

   NOTE — dead CSS not ported: modern-slavery.html defines a
   `.matrix-wrap`/`.matrix`/`.matrix__dot`/`.matrix__big`/`.matrix__copy`
   ruleset with no corresponding markup anywhere in that file's body (nor
   any of the other 4 pages this task covers) — confirmed via grep. It is
   leftover from an earlier design iteration in the static source itself.
   Porting unused CSS would just be dead weight, so it's intentionally
   skipped here.
   ============================================================ */

/* STATS BAND — the-cause.html + modern-slavery.html ("SOURCE — ..."
   number bands). Distinct from p2p/stat-band's `.statband*` (a separate,
   as-yet-unused generic pattern) — this base ruleset is
   the shape used bare (modern-slavery's at-risk-imports band, 4 cols) and
   under the `.stats--six`/`.stats--3` modifiers already present verbatim
   in the-cause.html/modern-slavery.html's own markup. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats--six{grid-template-columns:repeat(3,1fr)}
.stats--3{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--paper);padding:60px 32px;transition:background .3s}
.stat:hover{background:var(--paper-2)}
.stat-num{font-variant-numeric:tabular-nums;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(46px,5.2vw,82px);line-height:1;letter-spacing:0;color:var(--ink);display:block;margin-bottom:18px}
.stat-num em{font-style:normal;font-weight:600;color:var(--accent)}
.stat-label{font-size:15px;line-height:1.45;color:var(--ink-dim)}
.stats-source{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:24px;letter-spacing:.06em}
@media (max-width:1024px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.stats{grid-template-columns:1fr}.stat{padding:36px 22px}}

/* GUIDE — the-cause.html + modern-slavery.html long-form explainer
   layout ("What it looks like" / "What is modern slavery?" / "Supply
   chains" / etc). `.guide__facts a` is modern-slavery's addition (its
   Tools-for-individuals/organisations link lists) — harmless on
   the-cause, which never nests a link inside `.guide__facts li`. */
.guide{display:grid;grid-template-columns:7fr 5fr;gap:60px;align-items:start;margin-top:8px}
.guide__feature{aspect-ratio:4/5;width:100%;position:sticky;top:120px}
.guide__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(28px,3.2vw,46px);line-height:1.08;letter-spacing:.005em;text-transform:uppercase;margin:0 0 36px;max-width:22ch}
.guide__body p{font-size:16px;line-height:1.7;color:var(--ink-dim);margin:0 0 22px}
.guide__body strong{color:var(--ink);font-weight:500}
.guide__cols{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start;margin-top:48px;padding-top:48px;border-top:1px solid var(--line)}
/* Call-feedback wave A (A3b): modern-slavery's organisations-tools row
   balances into equal halves (tools split 2+2 with the bespoke-advice
   note folded under the second pair). Declared before the 640px
   collapse below so mobile still stacks to one column. */
.guide__cols--equal{grid-template-columns:1fr 1fr}
.guide__side-block{margin-bottom:36px}
.guide__side-block:last-child{margin-bottom:0}
.guide__side-label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.guide__side ul{list-style:none;padding:0;margin:0;font-size:15px;line-height:1.7;color:var(--ink-dim)}
.guide__facts li{margin-bottom:12px;line-height:1.55}
.guide__facts li:last-child{margin-bottom:0}
.guide__facts strong{color:var(--ink);font-weight:500}
.guide__facts a{color:var(--accent);border-bottom:1px solid rgba(255,77,141,.35);transition:border-color .2s}
.guide__facts a:hover{border-bottom-color:var(--accent)}
/* TOOL LINKS — call-feedback wave A (A3a): modern-slavery's individuals'
   ethical-tools links promoted from a guide__cols side list into their
   own block above the "Small, regular actions add up" cards. */
.tool-links{margin:0 0 56px}
.tool-links__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tool-link{display:flex;flex-direction:column;gap:10px;padding:28px 30px;border:1px solid var(--line);background:var(--paper-2);transition:border-color .25s,transform .25s}
.tool-link:hover{border-color:var(--accent);transform:translateY(-3px)}
.tool-link__name{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:21px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:10px}
.tool-link__name svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:transform .25s}
.tool-link:hover .tool-link__name svg{transform:translate(2px,-2px)}
.tool-link__desc{font-size:15px;line-height:1.6;color:var(--ink-dim)}
.tool-link__tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-top:auto;padding-top:14px}
@media (max-width:900px){.tool-links__grid{grid-template-columns:1fr}}
@media (max-width:1024px){
  .guide{grid-template-columns:1fr;gap:40px}.guide__feature{position:relative;top:0;aspect-ratio:16/10;max-width:560px}
}
@media (max-width:640px){.guide__cols{grid-template-columns:1fr;gap:32px}}

/* FRONT LINE — the-cause.html "On the front line" IJM photo grid
   (3-up 4:3 frames + mono credit line), ported verbatim; collapses to
   one column at 900px per the static source. */
.frontline__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.frontline__item{aspect-ratio:4/3;width:100%}
.frontline__credit{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:24px}
@media (max-width:900px){.frontline__grid{grid-template-columns:1fr}}

/* TRAINGRID — the-expedition.html "Training for the ice" Norway photo
   grid (4-up 3:4 portrait frames), ported verbatim; 2-up at 1024px, one
   4:3 column at 640px per the static source. */
.traingrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.traingrid__item{aspect-ratio:3/4;width:100%}
@media (max-width:1024px){.traingrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.traingrid{grid-template-columns:1fr}.traingrid__item{aspect-ratio:4/3}}

/* CARDS — the-cause.html + modern-slavery.html ("Three ways to act" /
   "Beyond the supply chain" / "Four cases around the world" etc).
   `.dot`'s `pulseDot` keyframe already exists above (KITS section, Task
   14) — not redeclared here. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
/* Call-feedback wave A (A8): modern-slavery's 4-card "Four cases around
   the world" section renders 2×2 at desktop instead of 3+1 ("50% width,
   2 and 2 rather than 3 and 1"). Opt-in modifier — every other .cards
   grid legitimately stays 3-col. Declared before the 1024px collapse
   below so mobile still stacks to one column. */
.cards--2col{grid-template-columns:1fr 1fr}
.card{position:relative;border:1px solid var(--line);background:var(--paper-2);transition:border-color .3s,background .3s,transform .4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;overflow:hidden}
.card:hover{border-color:var(--accent);transform:translateY(-4px)}
.card--feature{background:var(--paper-3);color:var(--ink)}
.card--feature .card-text{color:var(--ink-dim)}
.card-body{padding:40px 36px;display:flex;flex-direction:column;flex-grow:1}
.card-num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent);margin-bottom:22px}
.card-title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:28px;line-height:1.1;letter-spacing:.015em;text-transform:uppercase;margin:0 0 18px}
.card-text{font-size:16px;line-height:1.65;color:var(--ink-dim);margin:0 0 32px;flex-grow:1}
.card-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:10px;margin-top:auto}
.card-tag--live{color:var(--accent)}
.card-tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulseDot 1.8s ease-in-out infinite}
@media (max-width:1024px){.cards{grid-template-columns:1fr}}

/* ACTION CTAs — the-cause.html "learn more / for organisations" buttons. */
.actions__cta{margin-top:48px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.action-btn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border-radius:999px;border:1px solid var(--ink-faint);transition:background .2s,border-color .2s,color .2s,transform .2s}
.action-btn svg{width:20px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .3s}
.action-btn:hover svg{transform:translateX(5px)}
.action-btn--primary{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.action-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--paper);transform:translateY(-2px)}
.action-btn--ghost{color:var(--ink)}
.action-btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* DREAM HERO — dream-movement.html's counter hero (`.page-hero.dream-hero`,
   [data-count] animated generically by p2p.js). */
.dream-hero__count{display:block;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:clamp(64px,12vw,180px);line-height:1;color:var(--accent);letter-spacing:-.01em;margin:0 0 .22em;padding-bottom:.04em;font-variant-numeric:tabular-nums;text-shadow:0 0 70px rgba(255,77,141,.28);opacity:0;animation:rise 1.1s .3s ease forwards}
/* Call-feedback wave A (A2): goal framing directly under the animated
   counter — styled like the site's other mono sub-labels. */
.dream-hero__goal{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 30px;opacity:0;animation:rise 1s .45s ease forwards}
.dream-hero__goal em{font-style:normal;color:var(--accent)}
.dream-hero__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(30px,4.8vw,72px);line-height:1.05;letter-spacing:.01em;text-transform:uppercase;margin:0 0 32px;color:var(--ink);opacity:0;animation:rise 1s .55s ease forwards}
.dream-hero__title em{font-style:normal;font-weight:600;color:var(--accent)}

/* MARQUEE — dream-movement.html scrolling dream-line banner. Items built
   into #marqueeTrack by p2p.js's generic "MARQUEE BUILD" block. */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);padding:30px 0;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(19px,2.2vw,28px);color:var(--ink);padding:0 34px;white-space:nowrap;display:inline-flex;align-items:center;gap:34px}
.marquee__item::after{content:"✺";font-style:normal;color:var(--accent);font-size:15px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* TEAM PRIOR ADVENTURES — the-team.html "Before the poles" section
   ("Meet Sarah" rework). The old `.stats--prior` km-count stat-band
   overrides that lived here were removed with the band itself; the page
   now uses this 2-col `.advcards` card grid (statband-head kept — it
   still heads the section). Ported verbatim from the reworked static
   source's inline <style>, except `.advcard__year`: a `<span>` there, a
   native core/paragraph here, so its display:block gains an explicit
   margin (0 0 10px) to neutralise the theme's default <p> margin. */
.statband-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.statband-head h2{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(28px,3.4vw,48px);line-height:1.05;letter-spacing:.005em;text-transform:uppercase;margin:0}
.statband-head h2 em{font-style:normal;font-weight:600;color:var(--accent)}
.statband-head p{font-size:14px;color:var(--ink-dim);max-width:360px;margin:0}
.advcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.advcard{border:1px solid var(--line);background:var(--paper-2);display:flex;flex-direction:column;transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.advcard:hover{border-color:var(--accent);transform:translateY(-4px)}
.advcard__photo{aspect-ratio:3/4;border:0;border-bottom:1px solid var(--line)}
.advcard__body{padding:26px 28px 32px}
.advcard__year{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin:0 0 10px}
.advcard__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:19px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px;color:var(--ink)}
.advcard__desc{font-size:14.5px;line-height:1.68;color:var(--ink-dim);margin:0}
@media (max-width:1024px){.advcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.advcards{grid-template-columns:1fr}.advcard__photo{aspect-ratio:4/3}}

/* TEAM PHOTO ROW — the-team.html two-up photo pair closing the
   credentials section ("Meet Sarah" rework). Ported verbatim. */
.photorow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
.photorow .photo{aspect-ratio:16/10}
@media (max-width:640px){.photorow{grid-template-columns:1fr;margin-top:48px}}

/* ============================================================
   TASK 18 — DONATE + CONTACT
   Ported verbatim from donate.html / contact.html inline <style> blocks
   (`.photo`, `.allocation`/`.alloc*` and `.faq*` already ported in Tasks
   14/17 and reused as-is; not repeated here). The two forms themselves
   are Fluent Forms shortcode embeds rather than the static `.cform`/
   `.cta__form` markup, so `.cta .fluentform` (added alongside the
   p2p/cta-follow pattern edit) and `.contact-form-wrap .fluentform`
   below are scoped skins over Fluent Forms' own DOM instead of straight
   ports of the now-unused `.cform`/`.field` rules.
   ============================================================ */

/* DONATE — "give" (why-give + allocation + donate card) and "other ways". */
.give{display:grid;grid-template-columns:1fr 500px;gap:72px;align-items:start}
.give__lead .section-label{margin-bottom:28px}
.give__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:.005em;text-transform:uppercase;margin:0 0 24px;color:var(--ink)}
.give__title em{font-style:normal;font-weight:600;color:var(--accent)}
.give__body p{font-size:16.5px;line-height:1.75;color:var(--ink-dim);margin:0 0 22px}
.give__body strong{color:var(--ink);font-weight:500}

.trust{display:flex;flex-wrap:wrap;gap:26px;margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.trust__item{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.trust__item svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.give__panel{position:sticky;top:108px}
.donate-card{border:1px solid var(--line);background:var(--paper-2);overflow:hidden}
.donate-card__head{padding:28px 30px;border-bottom:1px solid var(--line);background:var(--paper-3);color:var(--ink)}
.donate-card__eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:12px;display:flex;align-items:center;gap:9px}
.donate-card__eyebrow svg{width:14px;height:14px;animation:heartbeat 1.4s ease-in-out infinite}
.donate-card__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:25px;letter-spacing:.02em;text-transform:uppercase;margin:0;line-height:1.1}
.donate-card__title em{font-style:normal;font-weight:600;color:var(--accent)}

.donorbox-wrap{position:relative;min-height:680px;background:var(--paper)}
.donorbox-wrap iframe{position:relative;z-index:2;display:block;width:100%;background:transparent;opacity:0;transition:opacity .45s ease}
.donorbox-wrap.is-loaded iframe{opacity:1}
.donorbox-wrap.is-loaded .donorbox-fallback{display:none}
.donorbox-fallback{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 36px;gap:18px}
.donorbox-fallback__ring{width:60px;height:60px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.donorbox-fallback__ring svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.donorbox-fallback h3{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:20px;letter-spacing:.02em;text-transform:uppercase;margin:0;color:var(--ink)}
.donorbox-fallback p{font-size:13.5px;line-height:1.6;color:var(--ink-dim);margin:0;max-width:34ch}
.donorbox-fallback code{font-family:var(--mono);font-size:11px;color:var(--accent);background:rgba(255,77,141,.07);padding:2px 7px;border-radius:5px}
.p2p-donate-embed__pending{padding:48px 36px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--ink-dim)}
.donate-card__foot{padding:18px 30px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;gap:9px}
.donate-card__foot svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}

.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.way{border:1px solid var(--line);background:var(--paper);padding:38px 34px;display:flex;flex-direction:column;transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.way:hover{border-color:var(--accent);transform:translateY(-4px)}
.way__icon{width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:24px}
.way__icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.way__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:20px;letter-spacing:.03em;text-transform:uppercase;margin:0 0 14px;color:var(--ink)}
.way__text{font-size:14.5px;line-height:1.65;color:var(--ink-dim);margin:0 0 22px;flex-grow:1}
.way__link{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:10px;margin-top:auto}
.way__link svg{width:20px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .3s}
.way:hover .way__link svg{transform:translateX(5px)}

@media (max-width:1024px){
  .give{grid-template-columns:1fr;gap:48px}
  .give__panel{position:relative;top:0;max-width:500px}
  .ways{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ways{grid-template-columns:1fr}
}

/* CONTACT — layout + sidebar (static markup) + Fluent Forms skin. */
.contact{display:grid;grid-template-columns:1.4fr 1fr;gap:72px;align-items:start}

/* Task-20 controller fix #3: reply-time note under the form, verbatim
   `.cform__note` rule from contact.html — the class itself was dropped
   along with the rest of `.cform`'s now-unused markup (see this section's
   header comment), but this one element is reused as plain static markup
   below the Fluent Forms embed, so its rule is ported back in. */
.cform__note{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.06em;margin-top:4px}
/* Reply-note spacing: in the static source the note sat inside .cform's
   flex column (22px gap) + its own 4px margin = ~26px under the submit
   button. Here the note is a sibling paragraph after the Fluent Forms
   embed, so only its 4px margin applied and it crowded the button. Restore
   the ~26px baseline gap, scoped to the contact wrapper (0-2-0 beats the
   verbatim base rule above). */
.contact-form-wrap .cform__note{margin-top:26px}

/* max-width matches static's `.cform` column width (~756-758px at 1440px
   viewport, i.e. the `.contact` grid's 1.4fr column) — was capped at 640px
   here, narrower than the static reference. */
.contact-form-wrap .fluentform{max-width:758px}
/* Grid instead of a column flex stack so the Name/Email fields (the only
   two carrying the `cform-col` container_class set by import/forms.php's
   Contact form fields — see p2p_ff_set_field_container_class()) can sit
   side by side as a row, matching static's `.field-row{grid-template-
   columns:1fr 1fr}` wrapper around just those two fields. Every other
   field has no container_class, so it defaults to spanning the full grid
   row via `.ff-el-group{grid-column:1/-1}` below and stacks normally. */
.contact-form-wrap .fluentform fieldset{display:grid!important;grid-template-columns:1fr 1fr;gap:22px}
.contact-form-wrap .ff-el-group{margin:0!important;grid-column:1/-1}
.contact-form-wrap .ff-el-group.cform-col{grid-column:span 1}
.contact-form-wrap .ff-el-input--label label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);display:inline-block;margin-bottom:9px}
.contact-form-wrap .ff-el-input--label.ff-el-is-required label::after{content:" *";color:var(--accent)}
.contact-form-wrap .ff-el-form-control{background:rgba(244,237,227,.04);border:1px solid var(--ink-faint);border-radius:12px;padding:15px 18px;font:inherit;font-size:15px;color:var(--ink);transition:border-color .2s,background .2s;width:100%}
/* Field-height fix (contact): same Blocksy 40px height pin as the .cta
   forms — it squashed the name/email inputs to 40px against the ~55px
   select and submit pill. Restore intrinsic height by matching Blocksy's
   own `.ff-el-form-control:not([size]):not([multiple])` shape, scoped under
   .contact-form-wrap .fluentform (0-5-0, beats Blocksy's 0-4-0). */
.contact-form-wrap .fluentform .ff-el-form-control:not([size]):not([multiple]){height:auto}
.contact-form-wrap .ff-el-form-control::placeholder{color:var(--ink-faint)}
.contact-form-wrap .ff-el-form-control:focus{outline:none;border-color:var(--accent);background:rgba(244,237,227,.07)}
.contact-form-wrap select.ff-el-form-control{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a39e93' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.contact-form-wrap textarea.ff-el-form-control{min-height:160px;resize:vertical;line-height:1.6}
.contact-form-wrap button[type="submit"]{align-self:flex-start;background:var(--accent);color:var(--paper);border:0;border-radius:999px;padding:16px 34px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:background .2s,transform .2s}
.contact-form-wrap button[type="submit"]:hover{background:var(--accent-hover);transform:translateY(-1px)}
/* Blocksy's own button base rule (`.fluentform .ff-el-group button.ff-btn`,
   0-3-1 — border-radius/padding/min-height/font-family/font-size/
   letter-spacing/text-transform/color/border/background all via
   --theme-button-* vars) outguns the rule above (0-2-1) despite p2p.css
   printing after Blocksy in the head (see p2p-blocks.php's enqueue-order
   comment — that trick only wins TIES, not real specificity gaps). Fixed
   by matching Blocksy's own selector shape (.ff-el-group + button.ff-btn),
   scoped under .contact-form-wrap so it still only matches the Contact
   page's form and leaves `.cta .fluentform button[type="submit"]` (the
   home/donate/expedition CTA forms' pill button, which already wins its
   own tie against Blocksy via source order) untouched. */
.contact-form-wrap .fluentform .ff-el-group button.ff-btn[type="submit"]{align-self:flex-start;background:var(--accent);color:var(--paper);border:0;border-radius:999px;padding:16px 34px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:background .2s,transform .2s}
.contact-form-wrap .fluentform .ff-el-group button.ff-btn[type="submit"]:hover{background:var(--accent-hover);transform:translateY(-1px)}
.contact-form-wrap .ff-errors-in-stack{margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--accent)}

.contact-side{display:flex;flex-direction:column}
/* Sidebar portrait above the reach-out list — contact.html's
   `.cside-photo` frame, verbatim (4:5 rounded portrait; the 30px
   margin keeps the first `.cside-block`'s border-top reading as a
   divider under it, exactly as in the static source). */
.cside-photo{aspect-ratio:4/5;border-radius:16px;margin-bottom:30px;width:100%}
.cside-block{padding:30px 0;border-top:1px solid var(--line)}
.cside-block:first-child{padding-top:0;border-top:0}
.cside-block:last-child{padding-bottom:0}
.cside-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.cside-reasons{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.cside-reasons li{display:flex;gap:14px;align-items:flex-start}
.cside-reasons svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}
.cside-reasons strong{display:block;font-size:15px;color:var(--ink);font-weight:500;margin-bottom:3px;font-family:var(--sans)}
.cside-reasons span{font-size:13.5px;line-height:1.55;color:var(--ink-dim)}
.cside-socials{display:flex;gap:14px;list-style:none;padding:0;margin:0}
.cside-socials a{color:var(--ink-dim);display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;transition:color .2s,border-color .2s,background .2s}
.cside-socials a:hover{color:var(--paper);background:var(--accent);border-color:var(--accent)}
.cside-socials svg{width:18px;height:18px}
.cside-meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:1.8;color:var(--ink-faint);text-transform:uppercase}
.cside-meta strong{color:var(--ink);font-weight:500}

@media (max-width:1024px){
  .contact{grid-template-columns:1fr;gap:54px}
}
@media (max-width:640px){
  .contact-form-wrap .fluentform{max-width:100%}
  /* collapse the Name/Email row back to one column, matching static's
     `.field-row{grid-template-columns:1fr}` at this same breakpoint */
  .contact-form-wrap .fluentform fieldset{grid-template-columns:1fr}
}

/* ============================================================
   BLOG — listing (blog.html) + single post
   (polar-training-in-norway.html). Ported verbatim from both files'
   inline <style> blocks, rendered by the custom templates in
   wp-content/mu-plugins/p2p-site/templates/ (task-18 controller
   amendment #6 — see blog-templates.php's header note for why a
   template swap rather than skinning Blocksy's own archive/single
   markup). `.figure`/`.post-lead__media` target a real `<img>` (core/
   image block output) rather than the static source's `.photo` div
   placeholder, since import/import-blog.php inserts real image blocks;
   `.feature-post`/`.post-card` still use the `.photo` div (shared,
   already-ported placeholder-or-real-photo component) via
   p2p_post_card_photo().
   ============================================================ */

/* LISTING — featured post + post grid */
.feature-post{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--line);background:var(--paper-2);overflow:hidden;transition:border-color .35s}
.feature-post:hover{border-color:var(--accent)}
.feature-post__media{position:relative;overflow:hidden;min-height:420px}
.feature-post__media .photo{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feature-post:hover .feature-post__media .photo{transform:scale(1.04)}
.feature-post__flag{position:absolute;top:18px;left:18px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--accent);padding:7px 12px}
.feature-post__body{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.feature-post__meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.feature-post__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.feature-post__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(30px,3.8vw,52px);line-height:1.04;letter-spacing:.005em;text-transform:uppercase;margin:0 0 22px;color:var(--ink)}
.feature-post__title em{font-style:normal;font-weight:600;color:var(--accent)}
.feature-post__excerpt{font-size:17px;line-height:1.65;color:var(--ink-dim);margin:0 0 34px;max-width:46ch}
.read-more{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:12px;width:fit-content}
.read-more svg{width:22px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.feature-post:hover .read-more svg,.post-card:hover .read-more svg{transform:translateX(6px)}

.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:32px}
.post-card{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;overflow:hidden;transition:border-color .35s,transform .4s cubic-bezier(.2,.7,.2,1)}
.post-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.post-card__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.post-card__media .photo{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.post-card:hover .post-card__media .photo{transform:scale(1.05)}
.post-card__body{padding:34px 32px 36px;display:flex;flex-direction:column;flex-grow:1}
.post-card__meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.post-card__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.post-card__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:26px;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;margin:0 0 14px;color:var(--ink)}
.post-card__excerpt{font-size:15px;line-height:1.6;color:var(--ink-dim);margin:0 0 28px;flex-grow:1}
.post-card .read-more{margin-top:auto}

@media (max-width:1024px){
  .feature-post{grid-template-columns:1fr}
  .feature-post__media{min-height:300px;aspect-ratio:16/10}
  .feature-post__body{padding:40px 34px}
}
@media (max-width:640px){
  .feature-post__body{padding:32px 24px}
  .posts{grid-template-columns:1fr}
}

/* SINGLE POST — reading progress bar */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:60;box-shadow:0 0 10px var(--accent);transition:width .08s linear}

/* SINGLE POST — hero (title/meta/back-link) */
.post-hero{position:relative;padding:170px 36px 56px;background:radial-gradient(ellipse 60% 50% at 80% 30%,rgba(207,226,238,.12),transparent 60%),radial-gradient(ellipse 50% 40% at 12% 20%,rgba(255,77,141,.10),transparent 60%),linear-gradient(180deg,var(--paper-2) 0%,var(--paper-2) 100%);border-bottom:1px solid var(--line);overflow:hidden}
.post-hero__inner{max-width:840px;margin:0 auto;position:relative;z-index:2}
.post-hero__back{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);display:inline-flex;align-items:center;gap:10px;margin-bottom:36px;transition:color .2s;opacity:0;animation:rise .9s .1s ease forwards}
.post-hero__back:hover{color:var(--accent)}
.post-hero__back svg{width:20px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .3s}
.post-hero__back:hover svg{transform:translateX(-5px)}
.post-hero__meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;opacity:0;animation:rise .9s .2s ease forwards}
.post-hero__meta .sep{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.post-hero__meta .muted{color:var(--ink-dim)}
.post-hero__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(38px,5.4vw,76px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;margin:0 0 28px;color:var(--ink);opacity:0;animation:rise 1s .3s ease forwards}
.post-hero__title em{font-style:normal;font-weight:600;color:var(--accent)}
.post-hero__lead{font-size:19px;line-height:1.6;color:var(--ink-dim);margin:0;max-width:60ch;opacity:0;animation:rise 1s .45s ease forwards}

/* SINGLE POST — lead image (real <img>, not the .photo placeholder div) */
.post-lead{max-width:1120px;margin:0 auto;padding:0 36px}
.post-lead__media{margin-top:-40px;position:relative;z-index:3}
.post-lead__media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--line)}
/* Task F fix: a post with a corner/caption set but NO featured image falls
   back to the shared `.photo` placeholder-or-real-photo treatment
   (p2p_post_lead_media()) inside a `.post-lead__media` wrapper — this rule
   gives THAT `.photo` div the same real height as the `.post-lead__media
   img` rule above gives a real photo, instead of collapsing to zero (every
   other `.photo` div is sized by an ancestor with `position:absolute;
   inset:0`, which `.post-lead__media` never set). */
.post-lead .photo{aspect-ratio:3/2}

/* SINGLE POST — article body */
.article{max-width:760px;margin:0 auto;padding:80px 36px 30px}
.article p{font-size:18px;line-height:1.82;color:var(--ink-dim);margin:0 0 28px}
.article p strong{color:var(--ink);font-weight:600}
.article p em{font-style:italic}
.article p a{color:var(--accent);border-bottom:1px solid var(--accent-soft);transition:border-color .2s}
.article p a:hover{border-color:var(--accent)}
.article__intro::first-letter{float:left;font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:74px;line-height:.78;padding:6px 14px 0 0;color:var(--accent)}
.article__h{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(22px,2.5vw,30px);letter-spacing:.05em;text-transform:uppercase;margin:56px 0 22px;color:var(--ink);display:flex;align-items:center;gap:16px}
.article__h::before{content:"";width:28px;height:2px;background:var(--accent);flex-shrink:0}

/* SINGLE POST — figure (real <img>, not the .photo placeholder div) */
.figure{margin:46px 0}
.figure img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--line)}
.figure figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);margin-top:14px;font-style:italic;text-align:center}

/* SINGLE POST — pull quote */
.pullquote{margin:56px 0;padding:6px 0 6px 30px;border-left:2px solid var(--accent)}
.pullquote p{font-family:"Playfair Display",serif;font-style:italic;font-weight:500;font-size:clamp(22px,2.7vw,32px);line-height:1.36;color:var(--ink);margin:0}

/* SINGLE POST — inline stat strip */
.post-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:52px 0}
.post-stat{background:var(--paper-2);padding:34px 22px;text-align:center}
.post-stat strong{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(34px,4vw,52px);line-height:1;color:var(--ink);display:block;margin-bottom:10px;font-variant-numeric:tabular-nums}
.post-stat strong sup{font-size:.34em;font-family:var(--mono);font-weight:300;color:var(--ink-dim);vertical-align:super;margin-left:2px}
.post-stat span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}

/* SINGLE POST — footer (author bio + back link) */
.post-foot{max-width:760px;margin:0 auto;padding:8px 36px 40px}
.post-author{display:flex;gap:20px;align-items:center;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-author__avatar{width:62px;height:62px;border-radius:50%;flex-shrink:0;overflow:hidden;position:relative;border:1px solid var(--line)}
.post-author__avatar .photo{position:absolute;inset:0}
.post-author__avatar .photo__ph{display:none}
.post-author__name{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:20px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 4px;color:var(--ink)}
.post-author__sub{font-size:14px;color:var(--ink-dim);margin:0}
.post-author__sub a{color:var(--accent);border-bottom:1px solid var(--accent-soft)}
.post-next{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:30px;flex-wrap:wrap}
.post-next__back{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);display:inline-flex;align-items:center;gap:10px;transition:color .2s}
.post-next__back:hover{color:var(--accent)}
.post-next__back svg{width:20px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5}
/* Right-hand "Next post" link — deliberately skipped when this file's
   .post-next rules were first ported (the static source's own link had
   nowhere real to point yet); ported now that the single-post template
   renders a real get_previous_post() link (see blog-single.php). */
.post-next__link{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;text-align:right}
.post-next__link small{display:block;color:var(--ink-faint);letter-spacing:.12em;margin-bottom:3px}
.post-next__link svg{width:20px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .3s}
.post-next__link:hover svg{transform:translateX(5px)}

@media (max-width:1024px){
  .post-hero{padding:150px 22px 50px}
  .post-lead,.article,.post-foot{padding-left:22px;padding-right:22px}
}
@media (max-width:640px){
  .post-hero{padding:130px 18px 44px}
  .post-lead,.article,.post-foot{padding-left:18px;padding-right:18px}
  .post-lead__media{margin-top:-24px}
  .article{padding-top:56px}
  .article p{font-size:16.5px}
  .post-stats{grid-template-columns:1fr}
}

/* EDITOR-VALIDITY UTILITIES (Task A) — stand-ins for the inline
   style="padding-top:0;…" the static markup carried on a few section
   wrappers. core/group's save() cannot round-trip arbitrary inline
   declarations (the style engine can't emit `border-top:0`), so those
   groups were permanently "invalid" in the editor. Same computed result
   as the inline declarations they replace; appended last in this file so
   they win every equal-specificity tie, including the media-query
   .section paddings above. */
.section--flush{padding-top:0;padding-bottom:0;border-top:0}
.section--flush-top{padding-top:0;border-top:0}

/* SPONSORS — /sponsors scaffold (wave B, B2). Empty logo-grid slots until
   real partner marks land; the page ships as a DRAFT for Josh/Sarah to
   react to, so this stays deliberately minimal. */
.sponsor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.sponsor-slot{aspect-ratio:5/3;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:900px){.sponsor-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.sponsor-grid{grid-template-columns:1fr;gap:14px}}

/* Footer bottom-left stack — © line with the agency credit beneath it (client request 2026-07-23) */
.footer__bottom-left{display:flex;flex-direction:column;gap:6px}

/* SPONSOR GRID (wave D) — p2p/sponsor-grid: published Sponsor entries
   grouped by tier. Extends wave B's `.sponsor-grid` vocabulary above:
   empty tiers reuse `.sponsor-slot` unchanged; populated tiers render
   `.sponsor-card`s in the same grid. Logo sits on a LIGHT panel (--ice
   tint over near-white) so dark sponsor marks read on the dark theme. */
.sponsor-tier{margin-top:56px}
.sponsor-tier .sponsor-grid{margin-top:20px}
.sponsor-tier__title{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin:0;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sponsor-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
a.sponsor-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.sponsor-card__logo{display:flex;align-items:center;justify-content:center;aspect-ratio:5/3;background:#f6f3ec;border-radius:4px;padding:16px;margin-bottom:8px}
.sponsor-card__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.sponsor-card__logo-name{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#161c2d;text-align:center}
.sponsor-card__name{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:17px;letter-spacing:.03em;text-transform:uppercase;line-height:1.2}
.sponsor-card__leg{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sponsor-card__blurb{font-size:13.5px;line-height:1.55;color:var(--ink-dim)}

/* ============================================================
   WAVE F — editor-insertable section pattern library.
   Small, self-contained utilities backing the curated "Pole to
   Pole" inserter sections (wp-content/mu-plugins/p2p-site/
   patterns/sections/*). Appended last, like the Task-A
   `.section--flush` helpers, so they win equal-specificity ties.
   None of these selectors match any existing baked page content
   (verified: no `.photo-grid`/`.photo-band`/`.section__body` in
   the site; `.cta` sections use `.cta .fluentform`, never a
   core button) — so front-end pages stay byte-identical.
   ============================================================ */

/* Photo grid (p2p/section-photo-grid) — a clean responsive 3-up of
   `.photo` frames, distinct from the home page's bespoke `.journal__grid`
   5-tile bento. Each frame needs an intrinsic height (the `.photo` div has
   none of its own). */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.photo-grid .photo{aspect-ratio:4/3;width:100%}
@media (max-width:900px){.photo-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.photo-grid{grid-template-columns:1fr;gap:14px}}

/* Full-bleed photo band (p2p/section-photo-band) — one wide `.photo` fills
   the band; the heading overlays it, bottom-left, on the dark gradient the
   `.photo` treatment already lays down over a background-image. */
.photo-band{position:relative;min-height:66svh;display:flex;align-items:flex-end;padding:56px 36px;background:var(--paper-2);border-top:1px solid var(--line);overflow:hidden}
.photo-band .photo{position:absolute;inset:0;border:0}
.photo-band__inner{position:relative;z-index:2;max-width:1400px;margin:0 auto;width:100%}
.photo-band__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(38px,5vw,80px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase;margin:0;color:var(--ink)}
.photo-band__title em{font-style:normal;font-weight:600;color:var(--accent)}
.photo-band__text{font-size:16px;line-height:1.6;color:var(--ink-dim);margin:16px 0 0;max-width:560px}
@media (max-width:1024px){.photo-band{padding:40px 22px;min-height:52svh}}
@media (max-width:640px){.photo-band{padding:32px 18px;min-height:44svh}}

/* Call-to-action button (p2p/section-cta) — style the generic
   core/button inside a `.cta` to the brand accent pill, matching the
   `.cta__submit` / `.action-btn--primary` look, so a dropped-in button
   reads on-brand with no per-instance styling. Scoped to `.cta` so it
   never touches buttons elsewhere. */
.cta .wp-block-buttons{margin-top:8px}
.cta .wp-block-button__link{background:var(--accent);color:var(--paper);border:0;border-radius:999px;padding:16px 32px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:background .2s,transform .2s}
.cta .wp-block-button__link:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* Text-section body (p2p/section-text) — a readable-measure prose column,
   mirroring the `.cause__guide-body` treatment used for the site's guide
   copy. */
.section__body{max-width:66ch;margin-top:40px}
.section__body p{font-size:17px;line-height:1.7;color:var(--ink-dim);margin:0 0 22px}
.section__body p:last-child{margin-bottom:0}
.section__body strong{color:var(--ink);font-weight:500}

/* AUG 2026 — MS RESTRUCTURE */
/* Modern-slavery page restructure (Sarah's call feedback). Appended-only;
   existing rules above are untouched. */
/* Closing callout — slightly larger than body text. */
.ms-callout{font-size:20px;line-height:1.6;color:var(--ink);font-weight:500;max-width:62ch;margin:36px 0 0}
/* Landscape variant of the guide photo frame (modern-slavery's two frames). */
.guide__feature--wide{aspect-ratio:16/10}
/* Wrapper for a guide photo + its caption; carries the sticky behaviour the
   bare .guide__feature had when it was the grid child. */
.guide__media{position:sticky;top:120px}
@media (max-width:1024px){.guide__media{position:static}}
/* IJM safeguarding note — mono, small, ink-faint, sits under IJM imagery. */
.ijm-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.7;color:var(--ink-faint);margin:12px 0 0}
/* Tool links moved below the individuals action cards: flip the block's
   margin from bottom (above-cards placement) to top. */
.tool-links--after-cards{margin:56px 0 0}

/* AUG 2026 — CAUSE RESTRUCTURE */
/* The-cause page restructure (Sarah's feedback). Appended-only; the MS
   RESTRUCTURE block above is untouched. */
/* Word suffixes on registry-bound stat figures ("50 million", "U$236
   billion", "12 million"): long words can't sit at the tight symbol size,
   so .stat-suffix drops them to a smaller size relative to the figure and
   adds a small gap. Colour/weight inherit from `.stat-num em`. */
.stat-num .stat-suffix{font-size:.34em;letter-spacing:.02em;margin-left:.22em;vertical-align:baseline}
/* Combined courtesy + safeguarding note under the front-line photo grid
   (replaces the old one-line .frontline__credit). */
.ijm-note--frontline{margin-top:24px;max-width:78ch}

/* AUG 2026 — FOLLOW MODAL (nav CTA popover; frame from .dream-modal) */
.follow-modal__body{padding:52px 44px 40px}
.follow-modal__title{font-family:"Oswald",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:clamp(28px,4vw,40px);line-height:1.05;letter-spacing:.005em;text-transform:uppercase;margin:0 0 14px}
.follow-modal__title em{font-style:normal;font-weight:600;color:var(--accent)}
.follow-modal__lede{font-size:15.5px;line-height:1.6;color:var(--ink-dim);margin:0 0 28px}
.follow-modal__note{display:block;margin-top:8px;font-style:italic;font-size:.85em;color:var(--ink-faint)}
.follow-modal__meta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-faint);margin:18px 0 0}
.follow-modal .fluentform .ff-el-group{margin-bottom:0}
@media (max-width:640px){.follow-modal__body{padding:44px 24px 32px}}

/* AUG 2026 — LEG PHOTOS + EXPEDITION PHOTO STRIP */
.leg--media{grid-template-columns:auto 300px 1fr auto}
.leg__media{aspect-ratio:4/3;width:100%;align-self:start}
@media (max-width:1024px){.leg--media{grid-template-columns:auto 1fr}.leg__media{grid-column:2;max-width:420px}}
@media (max-width:640px){.leg--media{grid-template-columns:1fr}.leg__media{grid-column:1;max-width:none}}
.expstrip{width:100vw;margin-left:calc(50% - 50vw);display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.expstrip .photo{aspect-ratio:3/4;border-left:0;border-right:0}
.expstrip .photo+.photo{border-left:1px solid var(--line)}
@media (max-width:1024px){.expstrip{grid-template-columns:repeat(5,1fr)}.expstrip .photo{aspect-ratio:2/3}}
@media (max-width:640px){.expstrip{grid-template-columns:1fr 1fr}.expstrip .photo{aspect-ratio:4/3}.expstrip .photo:last-child{grid-column:span 2}}

/* AUG 2026 — NILE HIGHLIGHTS REEL (Meet Sarah, under the adventure cards) */
.nilereel{margin-top:32px;border:1px solid var(--line);background:var(--paper-3)}
.nilereel__video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.nilereel__caption{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin:0;padding:12px 16px}

/* AUG 2026 — DREAMS-IN-ACTION GRID (dream-movement photo break) */
.dreamsgrid{width:100vw;margin-left:calc(50% - 50vw);display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.dreamsgrid .photo{aspect-ratio:4/3;border-left:0;border-right:0}
.dreamsgrid .photo+.photo{border-left:1px solid var(--line)}
@media (max-width:640px){.dreamsgrid{grid-template-columns:1fr}.dreamsgrid .photo+.photo{border-left:0;border-top:0}}

/* AUG 2026 — BOOK SECTION (Meet Sarah, "Paddle the Nile" 2-col) */
.bookrow{display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:start}
.bookrow__cover{aspect-ratio:2/3;max-width:280px}
.bookrow__subtitle{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.bookrow__quote{font-family:var(--serif);font-style:italic;color:var(--ink-dim);border-left:2px solid var(--accent);padding-left:20px}
@media (max-width:768px){.bookrow{grid-template-columns:1fr;gap:32px}.bookrow__cover{max-width:220px}}

/* AUG 2026 — STRIP CREDIT (CC attribution under the expedition photo strip) */
.strip-credit{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-faint);margin:10px 0 0;text-align:right;padding:0 16px}
.strip-credit a{color:var(--ink-dim)}
