/* Junie's World site styles. Palette: /workspace/junie/palette.md (locked v1).
   To change colors, edit only the variables in :root (and the quiet mode block below it). */
:root{
  --bg:#F3EEE6;        /* Oat Paper */
  --panel:#E4E9E4;     /* Mist Sage */
  --sky:#D6DFE3;       /* Quiet Sky */
  --wall:#DCE3DD;      /* Soft Wall */
  --ink:#3E3A40;       /* Ink: body text */
  --title:#3F5568;     /* Title Slate: headings, buttons */
  --ink2:#5C5862;      /* Soft Ink: captions */
  --line:#B9BDB8;      /* soft divider */
  --cup:#6F8FB0;       /* Blue Cup accent */
  --bee:#D8B46E;       /* Honey Bee accent */
  --glow:#F2DDB0;      /* Lamp Glow */
  --btn-text:#F3EEE6;
  --focus:#6F8FB0;
}
/* Quiet mode: even softer, lower color energy. Text still passes WCAG AA. */
html[data-quiet="on"]{
  --bg:#ECEAE6; --panel:#E4E3E0; --sky:#E0E1E1; --wall:#E2E2DF;
  --ink:#3F3D41; --title:#4A5159; --ink2:#5A585D; --line:#C6C5C2;
  --cup:#8C96A0; --bee:#C9BFA8; --glow:#E9E2D4; --btn-text:#ECEAE6; --focus:#7D8590;
}
html[data-quiet="on"] img{filter:saturate(.6) brightness(.97)}
@font-face{font-family:"Andika";src:url(../fonts/andika-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url(../fonts/andika-bold.woff) format("woff");font-weight:700;font-display:swap}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box;animation:none!important;transition:none!important;scroll-behavior:auto!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Andika","Atkinson Hyperlegible","Lexend",Verdana,"Trebuchet MS",Tahoma,system-ui,sans-serif;
  font-size:1.25rem;line-height:1.65;letter-spacing:.01em;word-spacing:.06em}
img{max-width:100%;height:auto;display:block;border-radius:20px}
a{color:var(--title);text-decoration-thickness:2px;text-underline-offset:.2em}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:1rem;top:1rem;background:var(--bg);padding:.6rem 1rem;z-index:10}
h1,h2,h3{color:var(--title);line-height:1.3;font-weight:700}
h1{font-size:2rem;margin:1.5rem 0 1rem}h2{font-size:1.5rem;margin:2.2rem 0 .8rem}h3{font-size:1.25rem;margin:1.4rem 0 .5rem}
p,li{max-width:38em}
/* Header: same place, same order, every page. Not sticky, so nothing moves while scrolling. */
.site-header{background:var(--sky);border-bottom:2px solid var(--line);padding:.8rem 1rem}
.bar{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:1.4rem;color:var(--title);text-decoration:none;min-height:48px}
.brand img{width:48px;height:48px;border-radius:50%}
.quiet-toggle{font:inherit;font-size:1.05rem;min-height:48px;padding:.4rem 1rem;border-radius:999px;cursor:pointer;
  background:var(--bg);color:var(--ink);border:2px solid var(--title)}
.quiet-toggle[aria-pressed="true"]{background:var(--title);color:var(--btn-text)}
.site-nav{max-width:1080px;margin:.7rem auto 0}
.site-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.site-nav a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:.4rem .8rem;
  border-radius:16px;background:var(--bg);color:var(--title);text-decoration:none;font-weight:700;font-size:1.05rem;border:2px solid transparent}
.site-nav a[aria-current="page"]{border-color:var(--title);background:var(--panel)}
.site-nav .grownups{grid-column:1/-1}
.site-nav .grownups a{background:var(--wall);color:var(--ink)}
main{max-width:1080px;margin:0 auto;padding:0 1.2rem 2rem}
.lead{font-size:1.4rem}
.panel{background:var(--panel);border-radius:24px;padding:1.3rem 1.4rem;margin:1.4rem 0}
.panel.sky{background:var(--sky)}.panel.wall{background:var(--wall)}
.hero{margin-top:1.4rem}
.hero-text{margin-top:1rem}
.junie-says{font-size:1.45rem;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.6rem 1.4rem;margin:.4rem .4rem .4rem 0;
  border-radius:999px;background:var(--title);color:var(--btn-text);font-weight:700;text-decoration:none;border:2px solid var(--title);font:inherit;font-weight:700;cursor:pointer}
.btn.soft{background:var(--bg);color:var(--title)}
.soon{display:inline-block;padding:.3rem 1rem;border-radius:999px;background:var(--glow);color:var(--ink);font-weight:700}
/* Feelings buttons: big, calm, one per row on phones */
.feelings{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1rem;grid-template-columns:1fr}
.feelings a{display:flex;align-items:center;gap:1rem;min-height:96px;padding:1rem 1.3rem;border-radius:24px;text-decoration:none;
  font-size:1.6rem;font-weight:700;color:var(--ink);background:var(--panel);border:2px solid var(--line)}
.feelings a .dot{flex:none;width:44px;height:44px;border-radius:50%;background:var(--sky);border:2px solid var(--line)}
.feelings .f-calm .dot{background:var(--panel)}.feelings .f-happy .dot{background:var(--bee)}
.feelings .f-loud .dot{background:#A9ABAE}.feelings .f-break .dot{background:var(--glow)}.feelings .f-curious .dot{background:var(--cup)}
.feelings a small{display:block;font-size:1.05rem;font-weight:400;color:var(--ink2)}
/* Steps: all visible without script. With script, one step shown at a time, no timer. */
.steps{padding-left:1.6rem;font-size:1.35rem}.steps li{margin:.6rem 0}
.js .steps.stepper li{display:none}.js .steps.stepper li.now{display:list-item}
.step-controls{display:none}.js .step-controls{display:block}
.step-count{color:var(--ink2);font-size:1.05rem}
.split{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:start}
.split img{max-width:360px;margin:0 auto;width:100%}
.book{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:start}
.book img{max-width:440px;width:100%}
.rules{padding-left:1.6rem}.rules li{margin:.7rem 0}
.quiet-corner{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--glow);border-radius:28px;padding:2rem 1.4rem;margin:1.4rem 0}
.quiet-corner p{font-size:1.4rem}
.note{color:var(--ink2);font-size:1.05rem}
address{font-style:normal}
.site-footer{background:var(--wall);border-top:2px solid var(--line);margin-top:2rem;padding:1.6rem 1rem;color:var(--ink)}
.site-footer .bar{justify-content:flex-start;gap:1rem}
.site-footer img{width:72px;height:auto;border-radius:50%}
.site-footer p{margin:.2rem 0;font-size:1.05rem}
@media (min-width:760px){
  .site-nav .grownups{grid-column:auto;margin-left:1rem}
  body{font-size:1.3rem}h1{font-size:2.5rem}
  .site-nav ul{grid-template-columns:repeat(5,auto);justify-content:start}
  .feelings{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1.3fr 1fr}
  .book{grid-template-columns:440px 1fr}
}
@media print{.site-nav,.quiet-toggle,.step-controls{display:none}}