:root{
  --navy:#062d59;
  --navy-deep:#032344;
  --gold:#e6a91d;
  --green:#287a48;
  --cream:#f7f4ee;
  --ink:#10253e;
  --white:#fff;
  --max:1200px;
  /* font variables — overridden by theme.css */
  --font-heading:'Libre Baskerville',Georgia,serif;
  --font-body:Montserrat,Arial,sans-serif;
  /* image position variables — overridden by theme.css */
  --hero-bg-x:50%;
  --hero-bg-y:42%;
  --portrait-right:18px;
  --portrait-height:97%;
  --meet-photo-y:50%;
  /* layout variables — overridden by theme.css */
  --section-py:27px;
  --h-scale:1;
  --b-scale:1;
  --meet-align:left;
  --about-align:left;
  --running-align:left;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font-body);background:#fff}
/* Prevent Chrome scroll-anchoring from jumping page when fonts/images load */
@media(max-width:620px){html,body{overflow-anchor:none}}
a{color:inherit;text-decoration:none}
.site-header{
  min-height:102px;
  padding:15px max(28px,calc((100vw - var(--max))/2));
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,var(--navy-deep),var(--navy));
  border-bottom:3px solid var(--gold);
  position:relative;z-index:20
}
.brand{display:flex;flex-direction:column;color:#fff;line-height:1}
.brand span{font:700 clamp(2rem,3vw,3.15rem)/1 serif;font-family:var(--font-heading);letter-spacing:.02em}
.brand small{font:700 clamp(.9rem,1.5vw,1.42rem)/1.2 serif;font-family:var(--font-heading);margin-top:8px}
.main-nav{display:flex;align-items:center;gap:30px;color:#fff;font-weight:700}
.main-nav a:not(.button):hover{color:#ffd578}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;font-weight:800;border:2px solid transparent;transition:.2s}
.button:hover{transform:translateY(-1px)}
.button-gold{background:var(--gold);color:#08264b}
.button-outline{border-color:#fff;color:#fff;background:rgba(0,0,0,.12)}
.menu-toggle{display:none}

/* ── HERO ── */
@keyframes heroReveal{
  from{opacity:0}
  to{opacity:1}
}
.hero{
  animation:heroReveal .7s ease both;
  min-height:340px;
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    url('assets/hero-banner.png') 82% 38%/cover no-repeat;
}
/* dark navy overlay fading left→right so text stays readable */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,35,68,.96) 0%, rgba(3,35,68,.88) 22%, rgba(3,35,68,.65) 40%, rgba(3,35,68,.20) 58%, rgba(3,35,68,0) 72%),
    linear-gradient(to bottom, rgba(3,35,68,.18) 0%, transparent 15%, transparent 80%, rgba(3,35,68,.22) 100%);
}
.hero-copy{
  position:relative;
  z-index:3;
  max-width:700px;
  padding:28px 34px 18px max(38px,calc((100vw - var(--max))/2));
}
.hero h1{
  font:400 clamp(1.9rem,2.8vw,2.8rem)/1.1 serif;font-family:var(--font-heading);margin:0;
  white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4);
}
.gold-rule{
  width:90px;height:4px;background:var(--gold);margin:14px 0;
}
.hero h2{
  font:700 clamp(1.05rem,1.75vw,1.34rem)/1.42 serif;font-family:var(--font-heading);
  margin:0 0 8px;max-width:530px;text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.hero p{
  font-size:.94rem;line-height:1.47;max-width:510px;margin:0;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hero-actions{
  display:flex;gap:14px;margin-top:14px;
}
.hero-portrait{
  display:none;
}
/* mobile-only subhead+body band — hidden on desktop */
.hero-lower{display:none}

.priorities-section{max-width:var(--max);margin:auto;padding:10px 16px 8px}
.section-intro{text-align:center;max-width:100%;margin:0 0 10px;font-weight:700;line-height:1.42;color:#163560;font-size:.93rem}
.priority-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.priority-card{text-align:center;padding:0 36px 6px;min-height:auto}
.priority-card+.priority-card{border-left:1px solid #ddd2c3}
.icon{width:58px;height:58px;border-radius:50%;color:#fff;display:grid;place-items:center;margin:0 auto 3px;font-size:1.45rem}
.icon-navy{background:var(--navy)}
.icon-green{background:var(--green)}
.icon-gold{background:var(--gold)}
.number{font:700 2rem serif;font-family:var(--font-heading);display:block}
.navy{color:var(--navy)}
.green{color:var(--green)}
.gold{color:#d49300}
.priority-card h3{font:700 1.18rem/1.15 serif;font-family:var(--font-heading);color:#0a3260;margin:2px 0 9px}
.priority-card p{line-height:1.44;margin:0 auto;max-width:290px;font-size:.92rem}
.priority-more{display:inline-block;margin-top:12px;font-weight:700;font-size:.85rem;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:1px;transition:.15s}
.priority-more:hover{color:var(--gold)}
.principles-line{text-align:center;font-weight:700;color:#143967;max-width:800px;margin:4px auto 0;line-height:1.35}
blockquote{margin:0;padding:22px 40px;text-align:center;background:var(--cream);font:400 clamp(1.4rem,2.6vw,2rem)/1.25 serif;font-family:var(--font-heading);color:#153a68;display:block;width:100%}
blockquote:before,blockquote:after{color:var(--gold);font-size:1.4em;font-weight:700}
blockquote:before{content:'" '}
blockquote:after{content:' "'}
.meet-section{max-width:var(--max);margin:auto;padding:var(--section-py) 34px;overflow:hidden}
#meet{text-align:var(--meet-align)}
#about{text-align:var(--about-align)}
#running{text-align:var(--running-align)}
.meet-section img{float:left;width:38%;height:260px;object-fit:cover;object-position:center var(--meet-photo-y);border-radius:4px;margin:4px 28px 12px 0}
.about-section{background:#fff}
.eyebrow{font-weight:800;color:var(--gold);font-size:.87rem;letter-spacing:.04em}
.meet-section h2,.detail-section h2,.involved-section h2{font:400 clamp(1.75rem,3.2vw,2.45rem)/1.15 serif;font-family:var(--font-heading);margin:9px 0;font-size:calc(clamp(1.75rem,3.2vw,2.45rem) * var(--h-scale))}
.meet-section p,.about-section p,.detail-section p,.meet-section .article-body p,.about-section .article-body p,.detail-section .article-body p{font-size:calc(.94rem * var(--b-scale))}
.meet-section p,.detail-section p,.meet-section .article-body p,.detail-section .article-body p{line-height:1.57}
.article-body p{margin:0}.article-body p+p{margin-top:.9em}
.detail-section{background:#f4f7fa;padding:var(--section-py) max(34px,calc((100vw - var(--max))/2));display:block}
.detail-section>div{margin-bottom:14px}
.detail-section>p{margin:0;max-width:none;width:100%}
.involved-section{padding:34px max(34px,calc((100vw - var(--max))/2));background:linear-gradient(90deg,var(--navy-deep),var(--navy));color:#fff;display:flex;justify-content:space-between;align-items:center;gap:35px}
.light{color:#ffd36e}
.involved-section p{margin-bottom:0}
.involved-actions{display:flex;gap:14px;flex-wrap:wrap}.disabled{opacity:.62;pointer-events:none}
footer{background:#022b57;color:#fff;text-align:center;padding:17px 25px}
footer p{display:inline-block;border:1px solid rgba(255,255,255,.75);padding:10px 38px;margin:0;font-size:.86rem}

/* ── 900px — tablet ── */
@media(max-width:900px){
  .site-header{min-height:auto;flex-direction:column;align-items:stretch;padding:12px 18px 0}
  .brand{padding-bottom:10px}
  .brand span{font-size:1.5rem}
  .brand small{font-size:.76rem}
  .menu-toggle{display:none}
  .main-nav{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 0 10px;border-top:1px solid rgba(255,255,255,.18);justify-content:flex-end}
  .main-nav a:not(.button){font-size:.82rem;padding:2px 0}
  .main-nav .button{font-size:.8rem;padding:6px 14px;min-height:34px}
  .hero{height:462px;background-position:78% center}
  .hero-copy{padding:34px 28px;max-width:62%}
  .priority-grid{grid-template-columns:repeat(3,1fr)}
  .priority-card{padding:0 12px 18px;min-height:auto}
  .priority-card+.priority-card{border-left:1px solid #ddd2c3;border-top:0;padding-top:0}
  .priority-card p{font-size:.78rem}
  .priority-card h3{font-size:.95rem}
  .meet-section,.detail-section{grid-template-columns:1fr}
  .involved-section{align-items:flex-start;flex-direction:column}
}

/* ── 620px — mobile portrait ── */
@media(max-width:620px){
  /* Prevent any horizontal scrolling */
  html,body{overflow-x:hidden;max-width:100%}

  /* ── Header: brand left, hamburger right ── */
  .site-header{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    padding:max(7px,env(safe-area-inset-top)) 16px 7px;
    min-height:0;
    gap:0;
  }
  .brand{flex:1;padding-bottom:0}
  .brand span{font-size:1.3rem}
  .brand small{font-size:.68rem;margin-top:5px}

  /* Hamburger toggle: visible on mobile */
  .menu-toggle{
    display:flex;
    align-items:center;
    gap:5px;
    background:none;
    border:2px solid rgba(255,255,255,.55);
    color:#fff;
    padding:7px 13px;
    font:700 .88rem Montserrat,Arial,sans-serif;
    border-radius:6px;
    cursor:pointer;
    flex-shrink:0;
  }
  .menu-toggle::before{content:'☰';font-size:1rem}

  /* Nav hidden by default; revealed by .open class (set by script.js) */
  .main-nav{
    display:none;
    flex-direction:column;
    flex-basis:100%;
    gap:0;
    padding:4px 0 6px;
    border-top:1px solid rgba(255,255,255,.18);
    justify-content:flex-start;
    flex-wrap:nowrap;
  }
  .main-nav.open{display:flex}
  .main-nav a:not(.button){
    font-size:.97rem;
    padding:11px 2px;
    border-bottom:1px solid rgba(255,255,255,.09);
    display:block;
  }
  .main-nav a:last-child{border-bottom:none}
  .main-nav .button{display:none} /* hide nav-level action buttons on mobile */

  /* ── Hero: mobile-specific crop positions face at ~68% from left ──
     Wider coastal scenery on the left gives a clean, dark text zone.
     The mobile image (hero-banner-mobile.jpg) is a re-cropped version
     of the desktop image; the desktop background is unchanged. */
  .hero{
    display:block;
    height:auto;
    min-height:208px;
    overflow:hidden;
    /* Mobile crop: face lands at ~68% from left with minimal offset */
    background-image:url('assets/hero-banner-mobile.jpg');
    background-position:calc(60% + 25px) 18%;
    background-size:cover;
  }
  .hero::before{display:none}
  /* Stronger gradient: dark left zone covers text area fully;
     fades well before Marika's face at ~68% from left */
  .hero::after{
    display:block;
    background:
      linear-gradient(90deg,
        rgba(3,35,68,.96)  0%,
        rgba(3,35,68,.92) 28%,
        rgba(3,35,68,.70) 42%,
        rgba(3,35,68,.36) 54%,
        rgba(3,35,68,.10) 62%,
        rgba(3,35,68,0)   66%),
      linear-gradient(to bottom,
        rgba(3,35,68,.18) 0%,
        transparent       12%,
        transparent       78%,
        rgba(3,35,68,.32) 100%);
  }
  /* Text zone: hard right edge at 48% — stays inside dark gradient,
     well clear of the face which starts at ~68% */
  .hero-copy{
    max-width:48%;
    width:auto;
    padding:44px 6px 0px 16px;
    background:none;
    border-top:none;
    position:relative;
    z-index:3;
  }
  .hero h1{
    font-size:clamp(1.15rem,4.8vw,1.45rem);
    white-space:normal;
    line-height:1.12;
    margin:0;
  }
  .gold-rule{width:60px;margin:9px 0}
  /* Subhead now lives inside the hero — the key improvement.
     Sized to fit the narrow column without wrapping excessively. */
  .hero h2{
    display:block;
    font-size:.82rem;
    line-height:1.38;
    max-width:none;
    margin:0;
    font-weight:700;
    text-shadow:0 1px 5px rgba(0,0,0,.55);
  }
  /* Body paragraph stays in the lower band — too long for the hero column */
  .hero p{display:none}

  /* ── Hero lower band: body paragraph only ──
     Gold bar + deep navy continues the hero's visual identity */
  .hero-lower{
    display:block;
    background:#032344;
    color:#fff;
    padding:16px 22px 22px;
    border-top:3px solid var(--gold);
  }
  .hero-lower h2{display:none} /* subhead already in hero */
  .hero-lower p{
    font-size:.83rem;
    line-height:1.44;
    margin:0;
    color:rgba(255,255,255,.88);
  }
  .hero-lower p+p{margin-top:.8em}

  .hero-actions{flex-direction:column;align-items:flex-start}

  /* ── Priority cards: single column ── */
  .priorities-section{padding:22px 18px}
  .priority-grid{grid-template-columns:1fr}
  .priority-card{padding:22px 0 4px;text-align:center}
  .priority-card+.priority-card{border-left:none;border-top:1px solid #ddd2c3;padding-top:22px}
  .priority-card p{font-size:.9rem;max-width:none}

  /* ── Meet section: image stacked above text ── */
  .meet-section{padding:26px 20px}
  .meet-section img{
    float:none;
    width:100%;
    height:210px;
    object-fit:cover;
    margin:0 0 18px 0;
    border-radius:4px;
    display:block;
  }

  .detail-section,.involved-section{padding:32px 22px}
  #about{padding-bottom:12px}
  #running{padding-top:12px}
  .section-intro{font-size:.83rem;line-height:1.31;text-align:left;margin-left:-4px;margin-right:-4px}
  footer p{padding:10px 12px}

  /* ── Hide editing tools from public mobile view ── */
  #em-trigger,#dp-trigger{display:none !important}
}
button,
.button,
input[type="submit"] {
  cursor: pointer;
}
/* Clean campaign footer */
.site-footer p {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.site-footer a {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}