/* Design styles from the Joey's Foundation site design */
:root{
  --navy:#122341;
  --navy-2:#1B3260;
  --paper:#EAF2FA;
  --card:#FFFFFF;
  --ink:#122341;
  --ink-soft:#4C6079;
  --ink-faint:#586C85; /* 4.77:1 on paper, 5.39:1 on white (was #7C93AC, 2.80:1) */
  --sky:#4FA6E0;
  --sky-ink:#1D6FA5;
  --blue:#2C5C99;
  --blue-ink:#1E3F6B;
  --line: rgba(18,35,65,0.14);
  --line-soft: rgba(18,35,65,0.07);
  --shadow: 0 1px 2px rgba(18,35,65,0.06), 0 8px 24px -12px rgba(18,35,65,0.2);
  --radius: 14px;
  --focus: #2C5C99;
  --logo-ground: #EAF2FA;
  /* Filled buttons with white text. Separate from --blue so dark mode can use a
     deeper fill (white needs 4.5:1) and darken, not lighten, on hover. */
  --btn:#2C5C99;
  --btn-hover:#1E3F6B;
  /* Form field edges: at least 3:1 against the field and the page. */
  --field-border:#71879F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#0A1526;
    --navy-2:#101F38;
    --paper:#0A1526;
    --card:#11213A;
    --ink:#EAF1FA;
    --ink-soft:#A9BFDA;
    --ink-faint:#7A93B5;
    --sky:#6FC0F2;
    --sky-ink:#8FD3FA;
    --blue:#4E8CD9;
    --blue-ink:#7DAEEA;
    --line: rgba(234,241,250,0.14);
    --line-soft: rgba(234,241,250,0.08);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
    --logo-ground: #E7F0FA;
    --btn:#356DB5;
    --btn-hover:#2A5A96;
    --focus:#7DAEEA;
    --field-border:#64799A;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* Keep linked sections (#resources) and keyboard focus clear of the sticky
   header (about 88px tall) when the browser scrolls to them. */
html{scroll-padding-top:96px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla", "Trebuchet MS", sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:"Fraunces","Iowan Old Style","Georgia",serif;
  font-weight:600;
  margin:0 0 .5em 0;
  text-wrap:balance;
  color:var(--ink);
}
h1{font-size:clamp(2.1rem,3.4vw + 1rem,3.4rem); font-weight:560; letter-spacing:-0.01em;}
h2{font-size:clamp(1.5rem,1.4vw + 1.1rem,2.05rem);}
h3{font-size:1.28rem;}
p{margin:0 0 1.1em 0;}
.container{max-width:1180px;margin:0 auto;padding:0 28px;}
.prose{max-width:66ch;}
.prose p{color:var(--ink-soft);}
.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-ink);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--sky);display:inline-block;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- header / nav ---- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; gap:20px; max-width:1180px; margin:0 auto;
}
/* The logo always keeps its supplied navy/cyan. --logo-ground gives it the
   light-blue bed those colours need; in the light theme that bed matches the
   page exactly, so the mark reads as printed straight onto it. */
.wordmark{
  text-decoration:none; display:inline-flex; align-items:center;
  background:transparent; border-radius:12px; padding:7px 13px;
  transition:transform .2s ease, box-shadow .25s ease;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wordmark{background:var(--logo-ground);}
}
.wordmark:hover{transform:translateY(-1px);}
.wordmark img{height:38px; width:auto;}
.wordmark.footer-mark{padding:14px 18px; border-radius:16px;}
.wordmark.footer-mark img{height:74px;}
nav.primary{display:flex; gap:2px; align-items:center; flex-wrap:wrap;}
nav.primary a{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  padding:9px 12px; border-radius:8px;
}
nav.primary a:hover{color:var(--ink); background:var(--line-soft);}
nav.primary a[aria-current="page"]{color:var(--blue-ink); background:var(--line-soft);}
/* The menus are Navigation blocks, so links sit in a list (nav > ul > li > a)
   and a link's class (e.g. nav-donate) lands on its <li>. */
nav.primary .wp-block-navigation__container{display:flex; gap:2px; align-items:center; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.site-header nav.primary .wp-block-navigation-item__content{display:inline-block; padding:9px 12px;}
nav.footer-links .wp-block-navigation__container{display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin:0; padding:0; list-style:none;}
.nav-donate > a{
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  background:var(--btn) !important; color:#fff !important;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 16px !important; border-radius:100px !important; margin-left:6px;
}
.nav-donate > a:hover{background:var(--btn-hover) !important; opacity:1;}

/* ---- hero ---- */
.hero{
  padding:76px 0 56px 0;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(1100px 420px at 82% -10%, color-mix(in srgb, var(--sky) 13%, transparent), transparent 60%),
    radial-gradient(900px 460px at -10% 10%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 60%);
}
.hero.compact{padding:56px 0 40px 0;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;}
.hero h1{margin-bottom:.4em;}
.hero .lede{font-size:1.14rem; color:var(--ink-soft); max-width:52ch;}
.hero-actions{display:flex; gap:12px; margin-top:1.6em; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  padding:13px 22px; border-radius:100px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--btn); color:#fff;}
.btn-primary:hover{background:var(--btn-hover);}
.btn-ghost{border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{background:var(--line-soft);}

/* pathway motif */
.pathway{display:block; width:100%; height:auto; margin:8px 0;}
.pathway path{fill:none; stroke:url(#pathGrad); stroke-width:2.4; stroke-linecap:round;}
.pathway circle{fill:var(--paper); stroke-width:2.4;}

/* ---- section rhythm ---- */
main{display:block;}
.section{padding:64px 0;}
.section + .section{border-top:1px solid var(--line-soft);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:2.2em; flex-wrap:wrap;}
.section-head h2{margin-bottom:.2em; max-width:34ch;}
.section-head .lede{color:var(--ink-soft); max-width:48ch; margin:0;}

/* ---- cards / grids ---- */
.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow);
}
.card .eyebrow{margin-bottom:.7em;}
.card h3{margin-bottom:.4em;}
.card p{color:var(--ink-soft); margin-bottom:0; font-size:.97rem;}
.pillar-card{position:relative; overflow:hidden;}
.pillar-card::before{
  content:""; position:absolute; top:0; left:0; width:4px; height:100%;
  background:linear-gradient(180deg,var(--sky),var(--blue));
}
.pillar-card{padding-left:30px;}

.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:2.4em 0;}
.stat{border-top:2px solid var(--line); padding-top:12px;}
.stat b{
  display:block; font-family:"Fraunces",serif; font-size:2rem; font-weight:600; color:var(--ink);
}
.stat span{font-size:.86rem; color:var(--ink-faint);}

/* pull quote */
blockquote.pull{
  margin:2em 0; padding:0 0 0 22px; border-left:3px solid var(--sky);
  font-family:"Fraunces",serif; font-size:1.28rem; font-weight:500; color:var(--ink);
  font-style:italic;
}
blockquote.pull cite{
  display:block; margin-top:.6em; font-family:"IBM Plex Mono",monospace;
  font-style:normal; font-size:.76rem; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase;
}

/* board grid */
.board-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;}
.board-cell{background:var(--card); padding:22px 24px;}
.board-cell h3{font-size:1.05rem; margin-bottom:.15em;}
.board-cell .role{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--blue-ink); letter-spacing:.03em;}

/* timeline (innovation) */
.timeline{border-left:2px solid var(--line); margin-left:6px; padding-left:26px; display:flex; flex-direction:column; gap:36px;}
.timeline-item{position:relative;}
.timeline-item::before{
  content:""; position:absolute; left:-32px; top:.35em; width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--sky);
}
.timeline-item .when{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; margin-bottom:.3em; display:block;}

/* blog filter */
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin:1.6em 0 0 0;}
.filter-bar button{
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 16px; border-radius:100px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-bar button:hover{border-color:var(--blue); color:var(--ink);}
.filter-bar button[aria-pressed="true"]{background:var(--btn); border-color:var(--btn); color:#fff;}

/* blog list */
.post-list{display:flex; flex-direction:column;}
.post{
  display:grid; grid-template-columns:1fr; gap:26px; padding:26px 0; border-top:1px solid var(--line-soft);
}
.post:first-child{border-top:none;}
.post .when{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-faint); letter-spacing:.03em; padding-top:.2em;}
.post h3{margin-bottom:.3em;}
.post .who{font-size:.82rem; color:var(--ink-faint); margin-bottom:.5em;}
.post p{color:var(--ink-soft); margin-bottom:0;}
.tag{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-ink); background:color-mix(in srgb, var(--blue) 12%, transparent); padding:3px 9px; border-radius:100px; margin-bottom:.6em;
}

/* donate methods */
.method{border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px; background:var(--card); box-shadow:var(--shadow);}
.method h3{display:flex; align-items:center; gap:10px;}
.method .num{
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; width:26px;height:26px;border-radius:50%;
  background:var(--line-soft); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* contact form */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.field input, .field textarea{
  font:inherit; font-size:.96rem; padding:11px 13px; border-radius:9px; border:1px solid var(--field-border);
  background:var(--card); color:var(--ink);
}
.field textarea{resize:vertical; min-height:110px;}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field.two .field{margin-bottom:0;}
.form-note{
  font-size:.86rem; color:var(--ink-soft); background:var(--line-soft); border-radius:10px; padding:12px 14px; margin-top:6px;
}
.info-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;}
.info-list li{display:flex; gap:14px; align-items:flex-start;}
.info-list .k{font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); width:84px; flex-shrink:0; padding-top:.25em;}
.info-list .v{color:var(--ink); font-size:1rem;}

/* footer */
.site-footer{border-top:1px solid var(--line-soft); padding:52px 0 40px 0; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;}
.footer-grid h2{font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1em; font-weight:600;}
.footer-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.footer-links a{text-decoration:none; color:var(--ink-soft); font-size:.94rem;}
.footer-links a:hover{color:var(--ink);}
.footer-donate{margin-top:8px;}
.footer-links a.btn-primary,.footer-links a.btn-primary:hover{color:#fff;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; margin-top:44px; padding-top:22px;
  border-top:1px solid var(--line-soft); font-size:.82rem; color:var(--ink-faint); flex-wrap:wrap; gap:10px;
}

@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .board-grid{grid-template-columns:1fr;}
  .post{grid-template-columns:1fr; gap:6px;}
  .post .when:empty{display:none;}
  .contact-grid{grid-template-columns:1fr; gap:32px;}
  .story-grid{grid-template-columns:1fr; gap:36px;}
  .logo-stage{padding:18px 22px;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  nav.primary{display:none;}
  .header-inner{flex-wrap:wrap;}
}

/* ---- hero logo ---- */
.hero-centered{max-width:820px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center;}
.logo-stage{
  position:relative; display:inline-block; margin-bottom:30px;
  padding:26px 34px; border-radius:26px;
  background:transparent;
  isolation:isolate;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-stage{background:var(--logo-ground);}
}
/* soft brand-blue halo that follows the pointer across the mark */
.logo-stage::before{
  content:""; position:absolute; inset:-14%; z-index:-1; border-radius:34px;
  background:radial-gradient(340px 220px at var(--gx,50%) var(--gy,45%),
             color-mix(in srgb, var(--sky) 46%, transparent), transparent 68%);
  opacity:.5; transition:opacity .45s ease; pointer-events:none;
  filter:blur(14px);
}
.logo-stage:hover::before{opacity:.95;}
/* three nested layers, each owning one motion so they never fight over
   `transform`: .logo-3d = pointer tilt, .logo-float = idle drift, heart = beat */
.logo-stage{perspective:1100px;}
.logo-3d{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.85,.3,1);
  will-change:transform;
}
/* Motion that starts by itself settles within about five seconds (WCAG 2.2.2);
   hovering the logo or an icon tile plays it again for as long as the pointer stays. */
.logo-float{position:relative; display:block; animation:floaty 5s ease-in-out 1;}
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-9px,0);}
}
.logo-base{width:min(520px, 76vw); height:auto; display:block;}
.logo-heart{
  position:absolute; inset:0; width:100%; height:100%;
  transform-origin:81.2% 14.6%;
  animation:beat 2.6s ease-in-out 1.15s 2;
  will-change:transform;
}
@keyframes beat{
  0%{transform:scale(1);} 7%{transform:scale(1.085);}
  15%{transform:scale(1.005);} 23%{transform:scale(1.055);}
  33%{transform:scale(1);} 100%{transform:scale(1);}
}
.logo-stage:hover .logo-heart{animation-duration:1.35s; animation-iteration-count:infinite;}
.logo-stage:hover .logo-float{animation-duration:3.6s; animation-iteration-count:infinite;}

/* entrance: wordmark rises, heart pops in just behind it */
.logo-stage.is-lit .logo-base{animation:logoIn 1s cubic-bezier(.22,.9,.3,1) both;}
.logo-stage.is-lit .logo-heart{
  animation:heartIn .75s cubic-bezier(.34,1.56,.5,1) .3s both,
            beat 2.6s ease-in-out 1.15s 2;
}
/* after the entrance rule, so it wins: two values, one per animation above */
.logo-stage.is-lit:hover .logo-heart{animation-duration:.75s, 1.35s; animation-iteration-count:1, infinite;}
@keyframes logoIn{
  from{opacity:0; transform:translateY(16px) scale(.965);}
  to{opacity:1; transform:none;}
}
@keyframes heartIn{
  from{opacity:0; transform:scale(.45) rotate(-14deg);}
  to{opacity:1; transform:scale(1) rotate(0);}
}

@media (prefers-reduced-motion: reduce){
  .logo-3d{transform:none; transition:none;}
  .logo-float, .logo-heart,
  .logo-stage.is-lit .logo-base, .logo-stage.is-lit .logo-heart{animation:none;}
}

/* ---- hero opening quote ---- */
.hero-quote{
  font-family:"Fraunces",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,.6vw + 1rem,1.48rem); line-height:1.45;
  color:var(--ink); max-width:38ch; margin:0 0 .5em 0; text-wrap:balance;
}
.hero-centered .hero-quote{margin-left:auto; margin-right:auto;}
.hero-centered .hero-lines{align-items:center;}
.hero-centered .hero-lines p{text-align:center;}
.hero-centered .hero-lines .emphasis{
  border-left:0; padding:0; margin-top:1.1em;
  max-width:24ch; text-align:center; position:relative;
}
.hero-centered .hero-lines .emphasis::before{
  content:""; display:block; width:58px; height:2px; margin:0 auto 20px auto;
  background:var(--sky); border-radius:2px;
}
.hero-quote .attrib{
  display:block; margin-top:.55em; font-family:"IBM Plex Mono",monospace; font-style:normal;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.hero-lines{display:flex; flex-direction:column; gap:.85em; margin:1.6em 0 0 0;}
.hero-lines p{margin:0; color:var(--ink-soft); font-size:1.06rem; max-width:50ch;}
.hero-lines .emphasis{
  font-family:"Fraunces",serif; font-size:clamp(1.3rem,.7vw + 1.05rem,1.62rem);
  font-weight:560; color:var(--ink); line-height:1.3;
  border-left:3px solid var(--sky); padding-left:18px; max-width:32ch;
  text-wrap:balance; margin:.15em 0 0 0; letter-spacing:-0.005em;
}

.story-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center;}

/* ---- portrait ---- */
.portrait{display:flex; flex-direction:column; align-items:center; gap:18px;}
.portrait figure{
  margin:0; width:100%; max-width:310px; border-radius:18px; overflow:hidden;
  border:1px solid var(--line-soft); box-shadow:var(--shadow);
  background:var(--card);
}
.portrait img{width:100%; height:auto; display:block;}

/* ---- animated study icons ---- */
.icon-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:2.6em 0 0 0;}
.icon-tile{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:24px 22px; box-shadow:var(--shadow);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.icon-tile:hover{
  transform:translateY(-4px); border-color:color-mix(in srgb, var(--sky) 40%, transparent);
  box-shadow:0 4px 10px rgba(18,35,65,.07), 0 18px 34px -16px rgba(18,35,65,.3);
}
.icon-tile .ico{width:44px; height:44px; color:var(--sky-ink); margin-bottom:16px;}
.icon-tile .ico svg{width:100%; height:100%; display:block; overflow:visible;}
.icon-tile h3{font-size:1.02rem; margin-bottom:.25em;}
.icon-tile p{margin:0; color:var(--ink-soft); font-size:.92rem;}

.ico svg [stroke]{stroke:currentColor;}
.ico svg [fill]:not([fill="none"]){fill:currentColor;}

/* each mark carries its own continuous motion; hover quickens it */
.ico .travel{animation:travel 3.4s ease-in-out 1;}
@keyframes travel{0%,100%{transform:translateX(0);} 50%{transform:translateX(20px);}}

.ico .pulse{animation:pulse 2.4s ease-in-out 2; transform-origin:20px 25px; transform-box:fill-box;}
@keyframes pulse{0%,100%{transform:scale(.8); opacity:.5;} 50%{transform:scale(1.25); opacity:1;}}

.ico .orbit{animation:orbit 4.6s linear 1; transform-origin:20px 20px; transform-box:view-box;}
@keyframes orbit{to{transform:rotate(360deg);}}

.ico .lift{animation:lift 2.6s ease-in-out 1;}
@keyframes lift{0%,100%{transform:translateY(2px);} 50%{transform:translateY(-3px);}}

.ico .dash{stroke-dasharray:5 5; animation:dash 3s linear 1;}
@keyframes dash{to{stroke-dashoffset:-20;}}

.icon-tile:hover .travel{animation-duration:1.5s; animation-iteration-count:infinite;}
.icon-tile:hover .pulse{animation-duration:1.1s; animation-iteration-count:infinite;}
.icon-tile:hover .orbit{animation-duration:1.8s; animation-iteration-count:infinite;}
.icon-tile:hover .lift{animation-duration:1.1s; animation-iteration-count:infinite;}
.icon-tile:hover .dash{animation-duration:1.2s; animation-iteration-count:infinite;}

@media (prefers-reduced-motion: reduce){
  .ico .travel, .ico .pulse, .ico .orbit, .ico .lift, .ico .dash{animation:none !important;}
  .icon-tile:hover{transform:none;}
}

/* ---- study lead ---- */
.study-lead{
  border-left:3px solid var(--sky); padding-left:24px; margin:0 0 1.6em 0;
}
.study-lead h2{margin-bottom:.35em;}
.study-lead .tagline{
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sky-ink); margin:0;
}

/* ---- soft photo treatment (ALPS / blog) ---- */
.soft-photo{
  margin:0; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-soft); box-shadow:var(--shadow);
  background:var(--card);
}
.soft-photo img{
  width:100%; height:100%; display:block; object-fit:cover;
  filter:saturate(.94); transition:filter .4s ease, transform .5s ease;
}
.soft-photo:hover img{filter:saturate(1); transform:scale(1.02);}
.photo-band{margin:2.6em 0;}
/* .photo-band may sit on the figure itself or on a wrapper around it */
.photo-band img{aspect-ratio:2.3/1; object-position:center 38%;}
.photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:2.6em 0;}
.photo-pair .soft-photo img{aspect-ratio:4/3;}
/* one landscape + one portrait: the 1.78 ratio makes both render the same height */
.photo-pair.mixed{grid-template-columns:1.78fr 1fr; align-items:start;}
.photo-pair .soft-photo.portrait img{aspect-ratio:3/4;}

/* ---- study text + photo ---- */
.study-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr); gap:36px; align-items:start;}
.study-grid .prose{max-width:none;}
.soft-photo.portrait img{aspect-ratio:3/4;}
.study-photo{align-self:start; max-width:340px; justify-self:end;}

/* ---- uncropped gallery ----
   An even grid distributes the photos across the page; each image only ever
   has its dimensions *capped* (both stay auto), so it keeps its own aspect
   ratio and no part of the frame is ever cut off. */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:end; margin:1.9em 0 0 0;}
.gallery figure{
  margin:0; display:flex; flex-direction:column; align-items:center;
  gap:11px; text-align:center; min-width:0;
}
.gallery img{
  width:auto; height:auto; max-height:250px; max-width:100%;
  display:block; border-radius:12px;
  border:1px solid var(--line-soft); box-shadow:var(--shadow);
  filter:saturate(.95); transition:transform .4s ease, filter .4s ease, box-shadow .4s ease;
}
.gallery figure:hover img{
  transform:translateY(-4px); filter:saturate(1);
  box-shadow:0 4px 10px rgba(18,35,65,.08), 0 16px 30px -14px rgba(18,35,65,.32);
}
.gallery figcaption{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; line-height:1.5;
  color:var(--ink-faint); max-width:100%;
}

/* ---- compact icon row ---- */
.icon-row.compact{grid-template-columns:repeat(3,1fr); gap:14px; margin:1.9em 0 0 0;}
.icon-row.compact .icon-tile{padding:18px 18px;}
.icon-row.compact .ico{width:34px; height:34px; margin-bottom:11px;}
.icon-row.compact h3{font-size:.95rem;}
.icon-row.compact p{font-size:.86rem;}

/* radar ping under a map pin */
.ico .ping{animation:ping 2.8s ease-out 1; transform-origin:20px 30px; transform-box:view-box;}
@keyframes ping{
  0%{transform:scale(.35); opacity:.85;}
  70%{transform:scale(1.15); opacity:0;}
  100%{transform:scale(1.15); opacity:0;}
}
/* slow rotation for the repeating-sessions mark */
.ico .spin{animation:spin 5s linear 1; transform-origin:20px 20px; transform-box:view-box;}
@keyframes spin{to{transform:rotate(360deg);}}
/* ECG trace drawing itself across the partnership mark */
.ico .trace{
  stroke-dasharray:64; stroke-dashoffset:64;
  /* draws itself once and stays drawn; the fading loop plays on hover */
  animation:trace-in 1.8s ease-in-out forwards;
}
@keyframes trace-in{to{stroke-dashoffset:0;}}
@keyframes trace{
  0%{stroke-dashoffset:64;} 55%{stroke-dashoffset:0;}
  85%{stroke-dashoffset:0; opacity:1;} 100%{stroke-dashoffset:0; opacity:0;}
}
.icon-tile:hover .ping{animation-duration:1.4s; animation-iteration-count:infinite;}
.icon-tile:hover .spin{animation-duration:2.6s; animation-iteration-count:infinite;}
.icon-tile:hover .trace{animation:trace 1.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .ico .ping, .ico .spin, .ico .trace{animation:none !important;}
  .ico .trace{stroke-dashoffset:0;}
  .gallery figure:hover img{transform:none;}
}

/* ---- blog post with photo ---- */
.post.with-media{grid-template-columns:150px 1fr 240px;}
.post.with-media .soft-photo img{aspect-ratio:4/3;}

/* ---- eye-gaze callout ---- */
.tech-note{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  margin:2.4em 0; padding:26px 28px; border-radius:var(--radius);
  background:color-mix(in srgb, var(--sky) 11%, var(--card));
  border:1px solid color-mix(in srgb, var(--sky) 30%, transparent);
}
.tech-note .glyph{
  color:var(--sky-ink); width:34px; height:34px; flex-shrink:0; margin-top:2px;
}
.tech-note .glyph svg{width:100%; height:100%; display:block;}
.tech-note .eyebrow{margin-bottom:.55em;}
.tech-note p{margin:0; color:var(--ink); font-size:1.02rem;}

/* ---- founding-belief panel ---- */
.belief-panel{
  margin:2.6em 0 2.2em 0; padding:34px 36px; border-radius:18px;
  background:linear-gradient(145deg, #16294A 0%, #1E3F6B 55%, #2C5C99 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 32px -18px rgba(18,35,65,.7);
  position:relative; overflow:hidden;
}
.belief-panel::after{
  content:""; position:absolute; right:-40px; top:-60px; width:230px; height:230px;
  border-radius:50%; background:radial-gradient(circle, rgba(111,192,242,.30), transparent 68%);
  pointer-events:none;
}
.belief-panel .eyebrow{color:#9CCBF0; margin-bottom:.9em;}
.belief-panel .eyebrow::before{background:#6FC0F2;}
.belief-panel p{
  margin:0; color:#F2F7FD; position:relative; z-index:1;
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-size:clamp(1.16rem,.55vw + 1.02rem,1.42rem); line-height:1.5; font-weight:500;
  text-wrap:pretty;
}
.belief-panel .commit{
  font-style:normal; color:#A6D8F8; font-weight:600;
}

/* ---- photo banner ---- */
.photo-banner{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  margin:1.8em 0; border:1px solid var(--line-soft);
}
.photo-banner img{
  width:100%; height:auto; display:block; aspect-ratio:2.5/1; object-fit:cover; object-position:center 30%;
}
.photo-caption{
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--ink-faint);
  margin-top:.8em; letter-spacing:.02em;
}

/* ---- interactivity: card lift ---- */
.card, .method, .board-cell{transition:transform .25s ease, box-shadow .25s ease;}
.card:hover, .method:hover{transform:translateY(-4px); box-shadow:0 4px 8px rgba(18,35,65,0.08), 0 16px 32px -14px rgba(18,35,65,0.28);}
.board-cell{cursor:default;}
.board-cell:hover{background:color-mix(in srgb, var(--sky) 7%, var(--card));}

/* ---- interactivity: pathway draw-in ---- */
.pathway path{stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 2.2s ease forwards .2s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .pathway path{stroke-dashoffset:0; animation:none;}
}

/* ---- interactivity: nav underline ---- */
nav.primary a{position:relative;}
nav.primary a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background:var(--sky); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
nav.primary a:hover::after, nav.primary a[aria-current="page"]::after{transform:scaleX(1);}

/* ---- responsive overrides for components defined above ----
   These live at the end of the sheet so they win on source order. */
@media (max-width: 880px){
  .icon-row{grid-template-columns:1fr 1fr;}
  .icon-row.compact{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .photo-pair, .photo-pair.mixed{grid-template-columns:1fr;}
  .post.with-media{grid-template-columns:1fr;}
  .tech-note{grid-template-columns:1fr; gap:14px;}
  .study-grid{grid-template-columns:1fr; gap:26px;}
  .study-photo{max-width:340px;}
}
@media (max-width: 560px){
  .icon-row, .icon-row.compact{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr; gap:22px;}
  .gallery img{max-height:230px;}
  .photo-band img{aspect-ratio:16/10;}
  /* stack the label/value pairs so long addresses can use the full width */
  .info-list li{flex-direction:column; gap:3px;}
  .info-list .k{width:auto;}
}
/* long unbroken strings (URLs, addresses) must never push the page wider */
.method a, .info-list .v, .footer-links a{overflow-wrap:anywhere;}
.info-list .v{min-width:0;}
/* the hero logo's halo is decorative and may extend past the viewport edge */
.hero{overflow-x:clip;}
/* grid items default to min-width:auto, so a form input's intrinsic minimum
   can force its whole track wider than the viewport — opt out of that */
.contact-grid > *{min-width:0;}
.field input, .field textarea{width:100%; min-width:0;}

.post h3 a{color:inherit; text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .25s ease;}
.post h3 a:hover,.post h3 a:focus-visible{background-size:100% 1px;}
.filter-bar button .n{opacity:.6; margin-left:4px;}
.post[hidden]{display:none;}
.more-wrap{display:flex; justify-content:center; padding-top:28px; border-top:1px solid var(--line-soft);}
.more-wrap[hidden]{display:none;}

/* balanced filter grid: 4 across, then the 3 therapies across */
.filter-bar{display:grid; grid-template-columns:repeat(12,1fr); gap:10px;}
.filter-bar button{grid-column:span 3; display:flex; justify-content:center; align-items:center; text-align:center; white-space:nowrap;}
.filter-bar button:nth-child(n+5){grid-column:span 4;}
@media (max-width:900px){
  .filter-bar{grid-template-columns:repeat(2,1fr);}
  .filter-bar button, .filter-bar button:nth-child(n+5){grid-column:span 1;}
  .filter-bar button:first-child{grid-column:span 2;}
  .filter-bar button{white-space:normal;}
}

@media (max-width:520px){
  .filter-bar button{flex-direction:column; gap:2px; padding:9px 10px; line-height:1.3; min-height:78px; border-radius:16px;}
  .filter-bar button:first-child{min-height:0; border-radius:100px;}
  .filter-bar button:first-child{flex-direction:row; gap:6px;}
  .filter-bar button .n{margin-left:0;}
}

/* inline styles from the drafts, as classes */
.u-f7d924{color:var(--ink);}
.u-7b1a9a{margin-bottom:.4em;}
.u-802db2{margin-top:1.3em;}
.u-553a64{margin-top:14px;}
.u-9cd2da{font-size:.86rem; color:var(--blue-ink); text-decoration:none;}
.u-13076d{text-align:center;}
.u-9b54a3{justify-content:center;}
.u-7945cf{max-width:26ch; margin-left:auto; margin-right:auto;}
.u-ccef1f{justify-content:center; margin-top:1.4em;}
.u-d166a0{max-width:20ch;}
.u-3e575f{color:var(--blue-ink);}
.u-257a0a{max-width:40ch;}
.u-6a447a{max-width:52ch; margin:22px 0 22px;}
.u-14e11f{max-width:18ch;}
.u-0948d9{scroll-margin-top:90px;}
.u-85983d{margin-top:2.6em;}
.u-14de17{scroll-margin-top:100px;}
.u-12245f{color:var(--ink-soft); margin-bottom:0;}
.u-79026a{color:var(--ink-soft);}
.u-2a4dac{align-items:start;}
.u-40063f{margin:0; padding-left:1.1em; color:var(--ink-soft); font-size:.96rem; display:flex; flex-direction:column; gap:10px;}
.u-c6f900{max-width:20ch; font-size:clamp(2.1rem,3.4vw + 1rem,3.4rem); font-weight:560; letter-spacing:-0.01em;}
.u-5371db{margin-top:10px;}
.u-e7fd83{color:var(--blue-ink); font-size:.9rem;}
.u-e1f4f4{margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:.9rem;}
.u-6d7f3f{max-width:16ch;}
.u-c94380{margin-top:2em;}
.u-8e8697{margin-bottom:16px;}
.u-e16145{color:var(--ink-soft); font-size:.95rem; max-width:38ch;}

/* ================= Phone & tablet menu ================= */
.menu-toggle{display:none;}
@media (max-width: 880px){
  .header-inner{flex-wrap:wrap; padding:12px 20px;}
  .menu-toggle{
    display:inline-flex; align-items:center; gap:10px; margin-left:auto;
    font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:100px;
    padding:10px 16px; min-height:44px; cursor:pointer;
  }
  .menu-toggle:hover{border-color:var(--blue);}
  .menu-toggle:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
  .menu-toggle-icon{position:relative; width:16px; height:12px; display:inline-block;}
  .menu-toggle-icon::before,.menu-toggle-icon::after,.menu-toggle-icon > span{
    content:""; position:absolute; left:0; width:16px; height:2px; border-radius:2px; background:currentColor;
    transition:transform .2s ease, opacity .2s ease, top .2s ease;
  }
  .menu-toggle-icon::before{top:0;}
  .menu-toggle-icon > span{top:5px;}
  .menu-toggle-icon::after{top:10px;}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::before{top:5px; transform:rotate(45deg);}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::after{top:5px; transform:rotate(-45deg);}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon > span{opacity:0;}
  nav.primary.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    flex-basis:100%; padding:10px 0 6px; border-top:1px solid var(--line-soft); margin-top:4px;
    /* The header is sticky, so on a short screen (a phone held sideways, or
       zoomed in) the open menu scrolls within itself rather than running off
       the bottom; 96px is the header row above it (logo, padding, margin). */
    max-height:calc(100vh - 96px);
    max-height:calc(100dvh - 96px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  /* Logged-in editors also have WordPress's admin bar (46px on phones). */
  .admin-bar nav.primary.is-open{max-height:calc(100vh - 142px); max-height:calc(100dvh - 142px);}
  nav.primary.is-open .wp-block-navigation__container{flex-direction:column; align-items:stretch;}
  nav.primary.is-open .wp-block-navigation-item{width:100%; display:block;}
  .site-header nav.primary.is-open .wp-block-navigation-item__content{display:block; padding:13px 12px; font-size:.86rem; border-radius:10px;}
  nav.primary.is-open a::after{display:none;}
  nav.primary.is-open .nav-donate{margin-top:8px;}
  nav.primary.is-open .nav-donate > a{text-align:center; margin-left:0;}
}

/* ================= WordPress integration ================= */
/* let the sticky header and footer sit directly in the page flow */
.wp-site-blocks > .wp-block-template-part{display:contents;}
.wp-site-blocks > *{margin-block:0;}
.page-content > *{margin-block:0;}
/* buttons and links that live inside paragraphs */
.hero-actions > p,.portrait > p{margin:0;}
blockquote.pull > p{margin:0;}
:where(.wp-block-image){margin:0;}
.wp-block-image img{height:auto;}
figure.wp-block-image.soft-photo img{width:100%;}
:where(.wp-element-caption){font-size:.85rem; color:var(--ink-faint); margin-top:.6em;}
.gallery .wp-element-caption{margin:0;}
/* blog list */
ul.post-list{list-style:none; margin:0; padding:0;}
ul.post-list > li{display:block; border-top:1px solid var(--line-soft); margin:0; padding:0;}
ul.post-list > li:first-child{border-top:none;}
ul.post-list > li[hidden]{display:none;}
.post-list > li > .post{border-top:none; display:block; padding:26px 0;}
.post-list > li > .post > *{margin-top:0; margin-bottom:0;}
.post-list > li > .post .wp-block-post-terms.tag{display:inline-block; margin-bottom:.6em;}
.post-list > li > .post .wp-block-post-title{margin-bottom:.3em;}
.post-list > li > .post .who{font-size:.82rem; color:var(--ink-faint); margin-bottom:.5em;}
.single-post .wp-block-post-terms.tag{display:inline-block;}
.wp-block-post-terms.tag a{color:inherit; text-decoration:none;}
.wp-block-post-terms__separator{opacity:.6;}
.who{display:flex; flex-wrap:wrap; gap:.35em; align-items:baseline;}
.who > *{margin:0;}
.who .by:not(:empty)::before{content:"\00b7\00a0 By "; }
.who .by:empty{display:none;}
.post .wp-block-post-title{margin-bottom:.3em;}
.post .wp-block-post-title a{color:inherit; text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .25s ease;}
.post .wp-block-post-title a:hover,.post .wp-block-post-title a:focus-visible{background-size:100% 1px;}
.wp-block-post-excerpt__excerpt{margin:0; color:var(--ink-soft);}
.wp-block-post-excerpt__more-text{display:none;}
.more-wrap{display:flex; justify-content:center; padding-top:28px; border-top:1px solid var(--line-soft);}
.more-wrap[hidden]{display:none;}
.filter-bar button .n{opacity:.6; margin-left:4px;}
.filter-bar button .n:empty{display:none;}
.pager{display:flex; gap:14px; justify-content:center; padding-top:28px; font-family:"IBM Plex Mono",monospace; font-size:.85rem;}
.pager a{color:var(--blue-ink);}
/* single post */
.single-wrap{max-width:760px;}
.single-post .wp-block-post-title{font-size:clamp(2rem,2.6vw + 1rem,3rem); margin:.2em 0 .3em;}
.single-post .who{font-size:.9rem; color:var(--ink-faint); margin-bottom:2em;}
.single-content{font-size:1.06rem;}
.single-content > *{margin:0 0 1.1em;}
.single-content img{height:auto; border-radius:var(--radius);}
.single-content .alignleft{float:left; margin:.3em 1.4em 1em 0; max-width:45%;}
.single-content .alignright{float:right; margin:.3em 0 1em 1.4em; max-width:45%;}
.single-content .aligncenter{margin-inline:auto;}
.single-content::after{content:""; display:table; clear:both;}
.single-content a{color:var(--blue-ink);}
.back-link{font-family:"IBM Plex Mono",monospace; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:1.4em;}
.back-link a{color:var(--blue-ink); text-decoration:none;}
.post-nav{margin-top:1.4em; font-size:.95rem;}
.post-nav a{color:var(--blue-ink);}
.wp-block-post-featured-image{margin:0 0 2em;}
.wp-block-post-featured-image img{border-radius:var(--radius);}
/* contact form messages */
.form-status{padding:12px 16px; border-radius:var(--radius); margin-bottom:1em; background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--ink);}
.form-status.is-error{background:color-mix(in srgb, #c0392b 14%, transparent);}
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}
/* screen-reader text used by core blocks */
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important;}