/* Keep version 2's layout and spacing; soften its palette and decoration. */
body.playful {
  --ink: #244b40;
  --muted: #52645b;
  --paper: #f7f7f2;
  --accent: #dbe6d2;
  --line: #becbc1;
  --journey-sky: #f7f7f2;
  --journey-ocean: #244b40;
  --journey-yellow: #dbe6d2;
  --journey-lilac: #e8ece5;
  --journey-coral: #a3795a;
  color: #283f35;
}
body.playful h1, body.playful h2, body.playful h3,
body.playful .journey-text-link { color: var(--ink); }
body.playful .site-header { background: #fdfdf9; }
body.playful .btn { border-color: var(--ink); color: var(--ink); box-shadow: none; }
body.playful .btn:hover { background: #cbdcc0; }
body.playful .btn.outline { background: transparent; }
body.playful a:focus-visible, body.playful button:focus-visible,
body.playful summary:focus-visible { outline-color: #244b40; }
body.playful .journey-landscape img { border-color: #d2dcd0; object-position: center 42%; }
body.playful .journey-question-grid details { border-color: #aabeb0; }
body.playful .journey-question-grid details:nth-child(3) { background: #efecdf; }
body.playful .journey-question-grid details:nth-child(4) { background: #ece5dd; }
body.playful details[open] summary { border-bottom-color: #aabeb0; }
body.playful .journey-path:before { border-left-color: #9aac9d; }
body.playful .journey-step { border-color: var(--ink); }
body.playful .journey-station:nth-child(3) .journey-step { background: #ece5dd; }
body.playful .journey-prompt { border-left-color: #a3795a; }
body.playful .journey-mat { border-color: #aabeb0; border-style: solid; box-shadow: none; }
body.playful .journey-mat-items span { border-color: #aabeb0; }
body.playful .journey-mat-items span:nth-child(3) { background: #ece5dd; }
body.playful .journey-notebook { background: #fdfcf7; border-color: #aabeb0; box-shadow: none; }
body.playful .journey-notebook:before { border-left-color: #a3795a; }
body.playful .journey-notebook dl div { border-bottom-color: var(--line); }
body.playful .journey-listening,
body.playful .journey-role-details details,
body.playful .journey-role-details details:first-child { border-color: #aabeb0; }
body.playful .journey-faq-list details { border-bottom-color: var(--line); }
body.playful .journey-invitation { background: #e8ece0; }
/* Frame portrait stock photos within the existing version 2 image slots. */
body.playful .journey-photo img { object-fit: cover; object-position: center 68%; }

.cms-status{width:min(1240px,90%);margin:24px auto;padding:20px;border:1px solid #aabeb0;border-radius:12px;background:#f8f1df}.cms-status p{margin:0 0 12px}.cms-programs article{padding:28px 0;border-bottom:1px solid #aabeb0}.cms-programs figure{margin:32px 0}.cms-programs img{max-height:540px;object-fit:contain}
/* Real foundation documentation and detailed source content. */
body.playful .journey-landscape img{height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
body.playful .source-section{scroll-margin-top:120px}
.source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.source-grid article,.field-program{min-width:0;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fdfdf9}
.source-prose{line-height:1.85;overflow-wrap:anywhere;max-width:85ch}
.source-section details{margin:16px 0;border:1px solid var(--line);border-radius:12px;background:#fdfdf9}
.source-section summary{padding:18px 22px;cursor:pointer;font-weight:650;line-height:1.5}
.source-section details>.source-prose,.source-section details>article{padding:0 22px 22px}
.field-program{margin:28px 0;scroll-margin-top:120px}
.program-jumps{display:flex;flex-wrap:wrap;gap:12px}
.program-jumps a{padding:12px 18px;border:1px solid var(--line);border-radius:12px}
body.playful .navlinks{gap:14px;font-size:13px}
body.playful .brand{max-width:320px}
body.playful .brand small{font-size:11px}
[hidden]{display:none!important}
@media(max-width:1000px){body.playful .navlinks{font-size:12px;gap:10px}body.playful .brand{max-width:260px}}
@media(max-width:760px){.source-grid{grid-template-columns:1fr}.source-grid article,.field-program{padding:18px}.source-section summary{padding:16px}.source-section details>.source-prose{padding:0 16px 16px}body.playful .brand{max-width:240px;font-size:17px}}
.contact-directory dd{min-width:0;overflow-wrap:anywhere}
.source-section,.journey-station-copy,.footer-grid>div{min-width:0}
/* A single brand in the header, followed by the foundation tagline in the hero. */
body.playful .site-header .nav{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;min-height:84px;padding-block:16px;gap:24px}
body.playful .site-header .brand{max-width:none;font-size:19px;gap:10px;flex-shrink:0}
body.playful .site-header .mark{width:40px;height:40px;font-size:28px;border-radius:12px}
body.playful .site-header .navlinks{flex-wrap:nowrap;justify-content:flex-end;font-size:14px;gap:4px}
body.playful .site-header .navlinks>a{padding:8px 10px;background:transparent;border-radius:8px;white-space:nowrap}
body.playful .site-header .navlinks>a:hover{background:#edf1e8}
body.playful .journey-welcome{padding-top:clamp(44px,6vw,84px)}
body.playful .journey-welcome h1{font-size:clamp(2.25rem,5vw,4.25rem);line-height:1.14;max-width:18ch;margin-inline:auto}
@media(max-width:1120px){
 body.playful .site-header .nav{flex-wrap:wrap;min-height:80px;gap:12px}
 body.playful .site-header .brand{max-width:calc(100% - 88px)}
 body.playful .site-header .navlinks{width:100%;font-size:16px;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
 body.playful .site-header .navlinks>a{padding:10px 12px;min-height:48px;white-space:normal}
 body.playful .site-header .menu{min-width:72px;min-height:48px;padding:8px 12px;font-size:16px}
}
@media(max-width:480px){
 body.playful .site-header .nav{min-height:76px;padding-block:12px}
 body.playful .site-header .brand{font-size:16px;line-height:1.25}
 body.playful .site-header .mark{width:36px;height:36px;font-size:25px}
 body.playful .journey-welcome .eyebrow{font-size:14px;margin-bottom:16px}
 body.playful .journey-welcome-copy .lead{font-size:18px;line-height:1.65;margin-top:20px}
}
body.playful .journey-photo img{aspect-ratio:3/2;object-fit:contain;object-position:center}
.vision-note{margin-top:20px;padding:18px 22px;border-left:3px solid #a3795a;background:#fdfcf7;border-radius:0 12px 12px 0}
.vision-note h3{font-size:1.2rem}.vision-note p{font-size:1rem;line-height:1.7;margin-top:10px}
/* Visual entry points and optional reading keep the landing easy to scan. */
body.playful .journey-question-grid summary{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:14px;padding:18px 0;list-style:none;line-height:1.45}
body.playful .journey-question-grid summary::-webkit-details-marker{display:none}
body.playful .journey-question-grid summary::after{content:'+';font-size:25px;font-weight:400;text-align:center;color:var(--ink)}
body.playful .journey-question-grid details[open] summary::after{content:'−'}
.program-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#e8eee2;color:#244b40}
.program-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
body.playful .reading-detail{margin-top:18px;border:0;border-top:1px solid var(--line);padding:0;background:transparent;border-radius:0}
body.playful .reading-detail summary{padding:14px 0;font-size:16px;line-height:1.5;color:var(--muted)}
body.playful .reading-detail[open] summary{border:0}
body.playful .reading-detail>div,body.playful .reading-detail>p{padding:0 0 16px;margin-top:0;font-size:18px;line-height:1.7}
body.playful .reading-detail>div>p{margin-top:0}
body.playful .program-readiness{max-width:65ch;margin-top:12px}
body.playful .journey-welcome-copy .lead{max-width:44ch}
@media(max-width:480px){body.playful .journey-question-grid summary{grid-template-columns:40px minmax(0,1fr) 18px;gap:11px;font-size:17px}.program-icon{width:40px;height:40px}.program-icon svg{width:25px;height:25px}}
/* Contact symbols accompany the labels without replacing their accessible names. */
.contact-directory dt{display:flex;align-items:center;gap:9px}
.contact-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
