/* Cambridge Centre for Attachment — stylesheet — built 2026-10-28 10:24 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:#F7F9FA;
  --surface:#FFFFFF;
  --ink:#16202A;
  --muted:#5C6672;
  --rule:#DDE3E9;
  --accent:#2E6489;
  --accent-soft:#E8EFF6;
  --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:#1B7E8C; --pat-collab-bg:#EDF6F7;
  --pat-child:#3D5880;  --pat-child-bg:#F0F3F9;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1419;--surface:#161D24;--ink:#E7EBEF;--muted:#9DA7B2;
    --rule:#273039;--accent:#7FB4DC;--accent-soft:#16212C;
    --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:#0F1419;--surface:#161D24;--ink:#E7EBEF;--muted:#9DA7B2;
  --rule:#273039;--accent:#7FB4DC;--accent-soft:#16212C;
    --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.2rem;line-height:1.45;
  margin-block:2rem;padding-left:1.25rem;border-left:2px solid var(--accent);max-width:36rem;margin-inline:0}
/* CCA only: uncited quotes (such as the one under the home page introduction)
   match the inset endorsement style, so they keep to the text width and sit
   apart from the paragraph above. MotC's site/styles.css is unchanged. */
.page-head .pull{margin-top:2.25rem}
.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}
.course .book{margin-top:.2rem}

/* ---------- 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}
.foot-legal{margin:2rem 0 0;padding-top:1.25rem;border-top:1px solid var(--rule);
  font-size:.8rem;color:var(--muted)}
.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}
/* Long DOI and URL links must be able to break, or they push the page
   wider than a phone screen. */
.ref a{overflow-wrap:anywhere}
.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}}

/* longer wordmark: the full centre name needs a touch less size to sit
   beside eight navigation items without crowding them */
.mark b{font-size:1.15rem;line-height:1.2}
@media (max-width:900px){.mark b{font-size:1.05rem}}

/* ---------- embedded video ---------- */
.video{margin:0;margin-block:1.75rem;max-width:44rem}
.video .frame{position:relative;aspect-ratio:16/9;background:var(--accent-soft);
  border:1px solid var(--rule);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-size:.82rem;color:var(--muted);margin-top:.6rem}