/* Meaning of the Child — shared stylesheet — built 2026-10-27 18:13 UTC
   Layout: one measured column on a quiet ground; full-width tinted bands mark
   substantive sections; endorsements sit in the flow as indented display type. */

:root{
  --bg:#F7F8F8;
  --surface:#FFFFFF;
  --ink:#16211F;
  --muted:#5B6967;
  --rule:#DCE3E1;
  --accent:#00706B;
  --accent-soft:#E6F0EE;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  /* the three caregiving patterns: warm for parent-led, the accent for
     collaborative, cool for child-led. Direction, not better or worse. */
  --pat-parent:#92542A; --pat-parent-bg:#FBF5EF;
  --pat-collab:#00706B; --pat-collab-bg:#EFF7F5;
  --pat-child:#3D5880;  --pat-child-bg:#F0F3F9;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1513;--surface:#161E1C;--ink:#E7EDEB;--muted:#9DAAA7;
    --rule:#273331;--accent:#5CC2B9;--accent-soft:#162624;
    --pat-parent:#DBA471; --pat-parent-bg:#201810;
    --pat-collab:#5CC2B9; --pat-collab-bg:#11201E;
    --pat-child:#97ADD6;  --pat-child-bg:#151A26;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1513;--surface:#161E1C;--ink:#E7EDEB;--muted:#9DAAA7;
  --rule:#273331;--accent:#5CC2B9;--accent-soft:#162624;
    --pat-parent:#DBA471; --pat-parent-bg:#201810;
    --pat-collab:#5CC2B9; --pat-collab-bg:#11201E;
    --pat-child:#97ADD6;  --pat-child-bg:#151A26;
    color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
  z-index:20;background:var(--surface);
}
img{max-width:100%}
.wrap{
  max-width:60rem;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.measure{max-width:38rem}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--accent)}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;
  background:var(--surface);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;padding-block:.75rem}
.mark{display:flex;align-items:center;gap:.7rem;margin-right:auto;text-decoration:none;color:inherit}
.mark .logo{width:2.6rem;height:2.6rem;object-fit:contain;flex:none}
.mark-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
@media (max-width:420px){.mark .logo{width:2.1rem;height:2.1rem}}
.mark b{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.mark span{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
nav{display:flex;flex-wrap:wrap;gap:.3rem 1.05rem}
nav a{color:var(--muted);text-decoration:none;font-size:.85rem;padding-bottom:2px;
  border-bottom:1px solid transparent}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
nav a:hover,nav a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- page head ---------- */
.page-head{padding-block:3rem 2rem}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
  font-weight:600;margin-bottom:1rem}
.page-head h1{font-size:clamp(2rem,4.5vw,2.9rem);line-height:1.12;letter-spacing:-.02em}
.page-head .standfirst{color:var(--muted);margin-top:1rem;max-width:38rem;font-size:1.1rem}

/* ---------- sections ---------- */
section{padding-block:3rem}
.band{background:var(--surface);border-block:1px solid var(--rule)}
.section-title{font-size:1.65rem;letter-spacing:-.01em;margin-bottom:1.5rem}
.sub-title{font-size:1.2rem;margin-block:2.25rem .9rem}
.prose{display:flex;flex-direction:column;gap:1.1rem}
.aside{font-size:.95rem;color:var(--muted);margin-top:1rem;max-width:40rem}

/* ---------- quotes ---------- */
.endorse{padding-left:1.25rem;border-left:2px solid var(--accent);max-width:36rem;margin-block:2rem}
.endorse q{font-family:var(--display);font-size:1.2rem;line-height:1.45;font-style:italic;
  display:block;quotes:"\201C" "\201D"}
.endorse cite{display:block;margin-top:.7rem;font-style:normal;font-size:.85rem;color:var(--muted)}
.pull{font-family:var(--display);font-style:italic;font-size:1.25rem;line-height:1.45;
  margin-block:.5rem;padding-left:1.25rem;border-left:2px solid var(--accent-soft)}
.pull footer{font-family:var(--body);font-style:normal;font-size:.82rem;color:var(--muted);margin-top:.6rem}

/* quote grid (testimonials) */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:1.75rem}
.quote{background:var(--surface);padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;min-width:0}
.quote p{font-family:var(--display);font-size:1.05rem;line-height:1.5;font-style:italic}
.quote cite{font-style:normal;font-size:.82rem;color:var(--muted);margin-top:auto}

/* ---------- panels ---------- */
.panels{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.75rem}
.panels.two{grid-template-columns:1fr 1fr}
.panels.three{grid-template-columns:repeat(3,1fr)}
.panel{background:var(--surface);padding:1.45rem;display:flex;flex-direction:column;gap:.55rem;min-width:0}
.panel h3{font-size:1.1rem}
.panel p{font-size:.95rem;color:var(--muted)}
.panel .alt,.panel .q{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--accent);font-weight:600}
.panel .child{font-size:.88rem;color:var(--ink);border-top:1px solid var(--rule);
  padding-top:.6rem;margin-top:auto}
@media (max-width:700px){.panels.two,.panels.three{grid-template-columns:1fr}}

/* ---------- synchrony scale ---------- */
.scale-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:1rem}
.step{padding:.75rem .85rem;background:var(--accent-soft);min-width:0}
.step:nth-child(1){opacity:.45}
.step:nth-child(2){opacity:.65}
.step:nth-child(3){opacity:.82}
.step b{display:block;font-size:.9rem;font-weight:600}
.step span{font-size:.75rem;color:var(--muted)}
@media (max-width:640px){.scale-bar{grid-template-columns:1fr 1fr}}

/* ---------- buttons and file links ---------- */
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.62rem 1.1rem;
  border:1px solid var(--accent);border-radius:2px;color:var(--accent);
  text-decoration:none;font-size:.92rem;font-weight:600}
.btn:hover,.btn:focus-visible{background:var(--accent);color:var(--surface)}
.btn small{font-weight:400;opacity:.75}

/* ---------- listed rows (courses, findings) ---------- */
.rows{list-style:none;padding:0;margin:1.25rem 0 0;display:flex;flex-direction:column}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) 14rem;gap:.35rem 1.5rem;
  padding-block:1rem;border-top:1px solid var(--rule)}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.rows b{font-weight:600}
.rows .src,.rows time{font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:700px){.rows li{grid-template-columns:1fr}}

/* ---------- course cards ---------- */
.course{border:1px solid var(--rule);background:var(--surface);padding:1.6rem;
  display:flex;flex-direction:column;gap:.8rem;margin-top:1.25rem}
.course .meta{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--accent);font-weight:600}
.course h3{font-size:1.25rem}
.course p{font-size:.98rem}
.course .req{font-size:.88rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:.7rem}

/* ---------- notice ---------- */
.notice{border:1px solid var(--accent);background:var(--accent-soft);padding:1.4rem 1.6rem;
  margin-top:1.5rem;display:flex;flex-direction:column;gap:.6rem}
.notice b{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.notice p{font-size:.98rem}

/* ---------- placeholder for images not in the prototype ---------- */
.img-note{aspect-ratio:3/2;background:var(--accent-soft);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;max-width:100%}
.img-note span{font-size:.75rem;color:var(--muted);line-height:1.4}

/* ---------- footer ---------- */
footer.site{background:var(--surface);border-top:1px solid var(--rule);padding-block:2.5rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem}
.foot-grid h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  font-family:var(--body);font-weight:600;color:var(--muted);margin-bottom:.6rem}
.foot-grid p,.foot-grid a{font-size:.95rem}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.colophon{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--rule);
  font-size:.8rem;color:var(--muted)}

/* ---------- publications: filter bar and bibliography ---------- */
.controls{position:sticky;top:calc(env(safe-area-inset-top,0px) + 3.6rem);z-index:10;
  background:var(--bg);border-bottom:1px solid var(--rule)}
.controls .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding-block:.85rem}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.tab{font:inherit;font-size:.85rem;padding:.35rem .85rem;border:1px solid var(--rule);
  border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.tab[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#q{font:inherit;font-size:.9rem;padding:.4rem .7rem;border:1px solid var(--rule);
  border-radius:2px;background:var(--surface);color:var(--ink);min-width:0;flex:1 1 12rem;max-width:20rem}
#q:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.count{font-size:.82rem;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}

.biblio{padding-block:2.5rem 4rem}
.group-title{font-size:1.3rem;margin-block:2.25rem 1rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--rule)}
.group-title:first-child{margin-top:0}
.ref{padding-block:.95rem;padding-left:1.6rem;text-indent:-1.6rem;
  border-bottom:1px solid var(--rule);max-width:48rem}
.ref .t{font-style:italic}
.ref .meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;text-indent:0;
  padding-left:1.6rem;margin-top:.45rem;font-size:.9rem;color:var(--muted)}
.ref .meta a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.ref .meta a:hover span:last-child,.ref .meta a:focus-visible{text-decoration:underline}
.ref .note{display:block;text-indent:0;padding-left:1.6rem;margin-top:.3rem;
  font-size:.88rem;color:var(--muted);font-style:italic;max-width:42rem}
.tag{font-size:.65rem;text-transform:uppercase;letter-spacing:.09em;font-weight:600;
  padding:.15rem .45rem;border-radius:2px;white-space:nowrap}
.tag.oa{background:var(--accent-soft);color:var(--accent)}
.tag.prepub{background:transparent;color:var(--muted);border:1px solid var(--rule)}
mark{background:var(--accent-soft);color:inherit;padding:0 .1em}
.empty{color:var(--muted);padding-block:2rem}

/* featured book */
.book-feature{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:2.25rem;align-items:start}
.cover{aspect-ratio:1/1.42;background:var(--accent-soft);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;max-width:100%}
.cover span{font-size:.75rem;color:var(--muted);line-height:1.4}
@media (max-width:640px){.book-feature{grid-template-columns:1fr}.cover{max-width:10rem}}

/* ---------- images ---------- */
figure{margin:0}
.fig{margin-top:1.75rem}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.fig figcaption{font-size:.82rem;color:var(--muted);margin-top:.6rem}
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.5rem;max-width:34rem}
.fig-pair a{display:block}
.fig-pair img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.fig-pair span{display:block;font-size:.82rem;color:var(--accent);font-weight:600;margin-top:.5rem}
.fig-side{float:right;width:14rem;max-width:40%;margin:0 0 1.25rem 1.75rem}
.fig-side img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
@media (max-width:640px){
  .fig-pair{grid-template-columns:1fr}
  .fig-side{float:none;width:100%;max-width:18rem;margin:1.5rem 0}
}
.cover img{display:block;width:100%;height:auto}
.cover{padding:0;background:transparent;max-width:11rem}
.cover img{max-width:100%}

/* ---------- embedded caregiving figure ---------- */
.embedded{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:2.5rem;align-items:start;margin-top:1.75rem}
.rings{margin:0}
.rings svg{display:block;width:100%;height:auto}
.layers{list-style:none;counter-reset:layer;padding:0;margin:0;
  display:flex;flex-direction:column}
.layers li{counter-increment:layer;position:relative;padding:.85rem 0 .85rem 2.2rem;
  border-top:1px solid var(--rule);min-width:0}
.layers li:last-child{border-bottom:1px solid var(--rule)}
.layers li::before{content:counter(layer);position:absolute;left:0;top:.9rem;
  font-size:.8rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums}
.layers b{display:block;font-weight:600;font-size:.98rem}
.layers span{display:block;font-size:.92rem;color:var(--muted);margin-top:.15rem}
@media (max-width:760px){
  .embedded{grid-template-columns:1fr;gap:1.75rem}
  .rings{max-width:20rem;margin-inline:auto}
}

/* ---------- the three caregiving patterns ---------- */
.patterns{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
  margin-block:1.75rem 3rem}
.pattern{padding:1.45rem;display:flex;flex-direction:column;gap:.55rem;min-width:0;
  border-top:3px solid var(--pat);background:var(--pat-bg)}
.pattern .alt{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--pat);font-weight:600}
.pattern h3{font-size:1.1rem}
.pattern p{font-size:.95rem;color:var(--muted)}
.pattern .child{font-size:.88rem;color:var(--ink);border-top:1px solid var(--rule);
  padding-top:.6rem;margin-top:auto}
.pattern--parent{--pat:var(--pat-parent);--pat-bg:var(--pat-parent-bg)}
.pattern--collab{--pat:var(--pat-collab);--pat-bg:var(--pat-collab-bg)}
.pattern--child{--pat:var(--pat-child);--pat-bg:var(--pat-child-bg)}
@media (max-width:700px){.patterns{grid-template-columns:1fr}}