:root{color-scheme:light;--ink:#263b32;--green:#315f50;--muted:#69786d;--line:#dce5db;--cream:#fbf9f3;--serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;--sans:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:0;color:var(--ink);background:#fff;font:16px/1.95 var(--sans);overflow-wrap:anywhere}
.frame{width:min(100% - 48px,1000px);margin:0 auto}
.narrow{width:min(100% - 48px,690px);margin:0 auto}
a{color:var(--green);text-underline-offset:4px}
a:focus-visible{outline:3px solid #b58c45;outline-offset:5px;border-radius:3px}
.masthead{background:linear-gradient(155deg,#fbf9f4 2%,#f3f7f0 90%);overflow:hidden}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;border-bottom:1px solid rgba(86,118,96,.15)}
.wordmark{font-size:17px;color:#2b5243;font-weight:750;letter-spacing:.035em;text-decoration:none;white-space:nowrap}
.nav-back{font-size:12px;font-weight:650;text-decoration:none;color:#446657;text-align:right}
.nav-back span{margin-left:4px}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.89fr);align-items:center;gap:22px;padding:50px 0 45px;min-height:455px}
.hero-copy{position:relative;z-index:1;padding-bottom:5px}
.eyebrow,.section-label{font-size:12px;font-weight:750;color:#62816d;letter-spacing:.15em}
.eyebrow{margin:0 0 22px}
h1,h2,h3,p{word-break:normal}
h1{font-family:var(--serif);font-weight:650;letter-spacing:.045em;font-size:clamp(35px,4.6vw,64px);line-height:1.55;margin:0 0 25px}
h1 span{color:#315f50}
.hero-lead{max-width:480px;margin:0;font-size:clamp(14px,1.65vw,17px);line-height:2.25;letter-spacing:.02em}
.hero-art{margin:0;min-width:0;display:flex;align-items:center;justify-content:center}
.hero-art svg{display:block;width:100%;max-width:440px;height:auto}
.hero-rule{height:24px;display:flex;justify-content:center;align-items:flex-start}
.hero-rule span{width:1px;height:40px;background:#afc4b3}
.intro-section{text-align:center;padding:95px 0 82px}
.section-label{margin:0 0 21px}
.intro-section h2,.closing-section h2{font-family:var(--serif);font-size:clamp(25px,3vw,37px);font-weight:650;line-height:1.7;letter-spacing:.025em;margin:0 0 34px}
.intro-section p:not(.section-label){margin:0 0 20px;color:#506259;font-size:15px}
.journey-section{position:relative;max-width:910px;padding-bottom:85px}
.journey-rail{position:absolute;top:114px;bottom:153px;left:187px;width:1px;background:linear-gradient(#e4cfad,#bacfb9,#b3cbbb);pointer-events:none}
.journey-item{position:relative;display:grid;grid-template-columns:310px 1fr;align-items:center;gap:34px;min-height:248px;margin:0 0 28px;padding:18px 10px 18px 0}
.journey-art{position:relative;display:flex;align-items:center;justify-content:center;height:204px;min-width:0}
.journey-art::before{content:"";position:absolute;width:166px;height:166px;border:1px solid #e1e9df;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.4)}
.journey-art svg{position:relative;display:block;width:180px;height:150px}
.journey-text{min-width:0;padding-top:9px}
.journey-label{font-size:12px;letter-spacing:.13em;font-weight:750;color:#718779;margin:0 0 7px}
.journey-label span{margin-left:12px;letter-spacing:.08em;font-weight:550}
.journey-text h3{font:650 clamp(25px,3.2vw,36px)/1.55 var(--serif);margin:0 0 14px;color:#305744;letter-spacing:.03em}
.journey-text p:last-child{font-size:15px;color:#54655b;line-height:2;margin:0}
.cycle-section{padding:64px 0 67px;background:#f0f5ee}
.cycle-inner{display:grid;grid-template-columns:minmax(285px,.82fr) minmax(0,1fr);align-items:center;gap:55px}
.cycle-art{margin:0;display:flex;justify-content:center}
.cycle-art svg{width:min(100%,335px);height:auto;display:block}
.cycle-copy h2{font-family:var(--serif);font-size:clamp(27px,3.4vw,42px);font-weight:650;line-height:1.65;margin:0 0 26px;letter-spacing:.025em}
.cycle-copy p:not(.section-label){font-size:15px;margin:0 0 17px;color:#53645a}
.closing-section{text-align:center;padding:105px 0 95px}
.closing-section p:not(.section-label){font-size:15px;color:#56685d;margin:0 0 27px;line-height:2.2}
.closing-section .last-line{font-family:var(--serif);font-size:21px!important;color:#315f50!important;margin-top:30px!important;font-weight:650}
.closing-section .reading-note{font-size:11px!important;line-height:1.85!important;color:#79887c!important;margin:65px auto 0!important;max-width:600px}
.end-nav{padding:0 0 85px;display:flex;justify-content:center}
.end-nav a{display:inline-flex;align-items:center;gap:18px;padding:13px 25px;background:#fff;border:1px solid #b9cfc0;border-radius:50px;min-height:47px;text-decoration:none;font-weight:700;font-size:13px;color:#315f50;transition:background .15s,border-color .15s}
.end-nav a:hover{background:#f1f7f0;border-color:#719782}
.footer{padding:23px 0 40px;border-top:1px solid #e5ebe4;text-align:center;font-size:11px;color:#7d8a7d}
@media(max-width:740px){
 .hero-inner{grid-template-columns:1fr;gap:0;min-height:0;padding:44px 0 14px}
 .hero-copy{text-align:center}
 .hero-art svg{max-width:300px}
 .hero-lead{margin:0 auto}
 .eyebrow{margin-bottom:13px}
 .hero-copy h1{margin-bottom:15px}
 .intro-section{padding:80px 0 55px}
 .journey-section{padding-bottom:44px}
 .journey-item{grid-template-columns:130px minmax(0,1fr);gap:11px;min-height:185px;margin-bottom:17px;padding:12px 0}
 .journey-art{height:142px}
 .journey-art::before{width:115px;height:115px}
 .journey-art svg{width:130px;height:auto}
 .journey-rail{left:65px;top:88px;bottom:95px}
 .journey-text{padding:0}
 .journey-label{font-size:10px;margin-bottom:4px}
 .journey-label span{margin-left:5px}
 .journey-text h3{font-size:clamp(22px,4.9vw,28px);margin-bottom:7px}
 .journey-text p:last-child{font-size:13px;line-height:1.9}
 .cycle-section{padding:45px 0 55px}
 .cycle-inner{grid-template-columns:1fr;gap:16px}
 .cycle-art svg{width:min(100%,230px)}
 .cycle-copy{text-align:center;max-width:540px;margin:0 auto}
 .closing-section{padding:85px 0 72px}
}
@media(max-width:390px){
 .frame,.narrow{width:calc(100% - 32px)}
 .site-nav{min-height:63px}
 .hero-inner{padding-top:37px}
 .hero-art svg{max-width:265px}
 .journey-item{grid-template-columns:100px minmax(0,1fr);gap:8px;min-height:165px}
 .journey-art{height:118px}
 .journey-art::before{width:92px;height:92px}
 .journey-art svg{width:110px}
 .journey-rail{left:50px}
 .journey-label span{letter-spacing:0;font-size:9px}
 .journey-text h3{font-size:22px}
 .journey-text p:last-child{font-size:12px}
 .intro-section p:not(.section-label),.cycle-copy p:not(.section-label),.closing-section p:not(.section-label){font-size:14px}
}

/* An example from one organization: current activity and future vision stay separate. */
.example-section{padding:85px 0 12px}
.example-inner{max-width:880px;margin:0 auto;padding:54px 58px 44px;border:1px solid #dbe7d9;border-radius:24px;background:linear-gradient(145deg,#f9fbf7 0%,#fffefb 100%)}
.example-heading{text-align:center}
.example-heading h2{font:650 clamp(26px,3.1vw,39px)/1.7 var(--serif);letter-spacing:.024em;margin:0 0 12px;color:#305744}
.example-heading .section-label{margin-bottom:8px}
.example-organization{margin:0;color:#415f4d;font-size:16px;font-weight:730;letter-spacing:.03em}
.example-intro{max-width:700px;margin:28px auto 31px;color:#526359;font-size:15px;line-height:2.12}
.example-stages{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:16px;align-items:stretch}
.example-stage{border:1px solid #dce6dc;border-radius:15px;padding:25px 22px 20px;background:#fff;min-width:0}
.example-stage-label{display:inline-block;color:#547563;background:#edf4ed;border-radius:30px;font-size:11px;font-weight:750;letter-spacing:.05em;padding:3px 12px}
.example-stage h3{font:650 20px/1.65 var(--serif);margin:14px 0 12px;color:#315f50}
.example-stage p{margin:0;font-size:14px;color:#55665b;line-height:2}
.example-stage-arrow{align-self:center;justify-self:center;font-size:22px;color:#8caa91;font-weight:400}
.example-note{font-size:12px;color:#627166;line-height:1.95;margin:0 0 14px}
.example-sources{font-size:12px;color:#627166;margin:0;line-height:1.9}
.example-sources a{font-weight:650}
@media(max-width:740px){
  .example-section{padding:65px 0 0}
  .example-inner{padding:38px 22px 35px;border-radius:18px}
  .example-intro{margin:21px 0 24px;font-size:14px}
  .example-stages{grid-template-columns:1fr;gap:9px}
  .example-stage{padding:20px 18px 17px}
  .example-stage-arrow{transform:rotate(90deg);line-height:1;height:22px}
}
@media(max-width:390px){
  .example-inner{padding:34px 17px 28px}
  .example-organization{font-size:14px}
  .example-stage h3{font-size:18px}
  .example-stage p{font-size:13px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.end-nav a{transition:none}}