/* ==========================================================================
   The Early Years — earlyyears.aidalee.com
   Shared design system. Light/dark via prefers-color-scheme.
   Mobile-first: every layout track is minmax(0, 1fr) so nothing can
   inflate past the viewport (see macos-web-hosting SKILL, responsive rule).
   ========================================================================== */

:root{
  color-scheme: light dark;

  --bg:#f1ece1;
  --paper:#fffdf8;
  --paper-2:#faf6ed;
  --ink:#25302b;
  --muted:#65706a;
  --line:#ded7c9;

  --green:#2a4f3d;
  --green-ink:#1d3a2c;
  --green-soft:#e2ece5;
  --blue:#dee9ee;
  --blue-ink:#33566a;
  --gold:#b8862a;
  --gold-soft:#f5ead1;
  --rose:#f2e2dd;
  --rose-ink:#8c4f45;

  --white:#ffffff;
  --shadow:0 14px 44px rgba(37,48,43,.10);
  --shadow-sm:0 4px 16px rgba(37,48,43,.07);
  --radius:10px;
  --wrap:1140px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#131714;
    --paper:#1e2521;
    --paper-2:#232b26;
    --ink:#eef3ef;
    --muted:#aeb8b2;
    --line:#39423b;

    --green:#95cbad;
    --green-ink:#c3e6d2;
    --green-soft:#25332b;
    --blue:#243a42;
    --blue-ink:#a9d3e0;
    --gold:#e8c377;
    --gold-soft:#3b3425;
    --rose:#3d2c28;
    --rose-ink:#f0b1a5;

    --white:#161b18;
    --shadow:0 14px 44px rgba(0,0,0,.34);
    --shadow-sm:0 4px 16px rgba(0,0,0,.28);
  }
  /* Default browser visited-link blue washes out on dark. Use warm amber. */
  a{ color:#ffb86b; }
  a:hover{ color:#ffd39b; }
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
button,a{ font:inherit; }
a{ color:var(--green); text-underline-offset:3px; }
a:hover{ color:var(--green-ink); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:3px; }

/* ---------- shell ------------------------------------------------------- */

.wrap{ width:min(var(--wrap),100%); margin-inline:auto; padding-inline:clamp(18px,4vw,32px); }
.wrap-wide{ width:min(1320px,100%); }

/* ---------- masthead ---------------------------------------------------- */

.masthead{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.masthead .bar{
  display:flex; align-items:center; gap:clamp(12px,3vw,34px);
  min-height:64px; flex-wrap:wrap; padding-block:8px;
}
.brand{
  display:flex; align-items:baseline; gap:9px;
  font:650 22px/1.1 "Newsreader",Georgia,serif;
  color:var(--green); text-decoration:none; letter-spacing:-.02em; white-space:nowrap;
}
.brand .dot{
  width:8px; height:8px; border-radius:50%; background:var(--gold);
  display:inline-block; transform:translateY(-3px);
}
.brand:hover{ color:var(--green-ink); }
.brand .scope{
  font:600 11px/1 "DM Sans",sans-serif; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); display:block; margin-top:4px;
}
.mainnav{ display:flex; flex-wrap:wrap; gap:2px; margin-left:auto; }
.mainnav a{
  display:block; padding:8px 11px; border-radius:999px;
  font-size:13.5px; font-weight:600; text-decoration:none; color:var(--muted);
  white-space:nowrap;
}
.mainnav a:hover{ background:var(--green-soft); color:var(--green-ink); }
.mainnav a[aria-current="page"]{ background:var(--green); color:var(--white); }

/* ---------- generic page header ----------------------------------------- */

.page-head{ padding-block:clamp(38px,6vw,72px) clamp(26px,3.6vw,40px); }
.page-head .eyebrow{
  font:700 11.5px/1 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:14px;
}
.page-head h1{
  font:650 clamp(38px,6.2vw,68px)/.98 "Newsreader",Georgia,serif;
  letter-spacing:-.038em; margin:0 0 18px; max-width:22ch;
}
.page-head .lede{
  font-size:clamp(17px,1.6vw,20px); color:var(--muted);
  max-width:62ch; margin:0;
}

/* ---------- home hero --------------------------------------------------- */

.hero{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  margin-top:clamp(20px,3vw,34px);
}
.hero-copy{ padding:clamp(30px,5vw,64px); align-self:center; }
.hero-copy .eyebrow{
  font:700 11.5px/1 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:14px;
}
.hero-copy h1{
  font:650 clamp(42px,6.4vw,76px)/.94 "Newsreader",Georgia,serif;
  letter-spacing:-.045em; margin:0 0 22px;
}
.hero-copy .lede{ font-size:clamp(17px,1.55vw,20px); color:var(--muted); margin:0; max-width:56ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:30px; }
.btn{
  display:inline-block; padding:12px 20px; border-radius:999px; text-decoration:none;
  font-weight:650; font-size:15px; border:1px solid transparent;
}
.btn-primary{ background:var(--green); color:var(--white); }
.btn-primary:hover{ background:var(--green-ink); color:var(--white); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:var(--paper); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green-ink); }
.hero-photo{ position:relative; min-height:380px; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.photo-note{
  position:absolute; left:16px; right:16px; bottom:16px;
  background:var(--paper); padding:15px 16px; border-left:5px solid var(--gold);
  border-radius:4px; font-size:13.5px; color:var(--muted); box-shadow:var(--shadow-sm);
}
.photo-note strong{ display:block; font:650 16px/1.2 "Newsreader",Georgia,serif; color:var(--ink); margin-bottom:3px; }

/* ---------- section rhythm --------------------------------------------- */

.section{ padding-block:clamp(40px,6vw,76px); }
.section + .section{ border-top:1px solid var(--line); }
.section-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(16px,3vw,34px); align-items:end; margin-bottom:clamp(22px,3vw,34px);
}
.section-head .eyebrow{
  font:700 11.5px/1 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:10px;
}
.section-head h2{
  font:650 clamp(30px,4.6vw,50px)/1 "Newsreader",Georgia,serif;
  letter-spacing:-.03em; margin:0;
}
.section-head p{ margin:0; color:var(--muted); font-size:16px; }
.subhead{
  font:650 clamp(23px,3vw,32px)/1.08 "Newsreader",Georgia,serif;
  letter-spacing:-.02em; margin:clamp(30px,4vw,52px) 0 16px;
}

/* ---------- card grid (home) ------------------------------------------- */

.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:16px;
}
.card{
  display:flex; flex-direction:column; gap:11px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-sm); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--green); color:inherit; }
.card .ico{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  font-size:21px; background:var(--green-soft);
}
.card h3{ font:650 23px/1.14 "Newsreader",Georgia,serif; margin:0; letter-spacing:-.015em; }
.card p{ margin:0; color:var(--muted); font-size:15px; }
.card .go{ margin-top:auto; font-size:13.5px; font-weight:700; color:var(--green); }
.card .go::after{ content:" →"; }
.card.c-baby .ico{ background:var(--green-soft); }
.card.c-age .ico{ background:var(--blue); }
.card.c-skills .ico{ background:var(--gold-soft); }
.card.c-lang .ico{ background:var(--rose); }
.card.c-safety .ico{ background:var(--blue); }
.card.c-ask .ico{ background:var(--rose); }
.card.c-src .ico{ background:var(--green-soft); }

/* ---------- prose blocks ----------------------------------------------- */

.prose{ max-width:68ch; }
.prose p{ margin:0 0 1.05em; }
.prose h3{
  font:650 26px/1.16 "Newsreader",Georgia,serif; letter-spacing:-.015em;
  margin:2em 0 .55em;
}
.prose h3:first-child{ margin-top:0; }
.prose ul,.prose ol{ margin:0 0 1.05em; padding-left:1.25em; }
.prose li + li{ margin-top:.45em; }
.prose strong{ color:var(--ink); }
.fine{ font-size:14px; color:var(--muted); }
.fine a{ font-weight:600; }

/* ---------- principles trio ------------------------------------------- */

.principles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.principle{ background:var(--paper); padding:26px 24px; }
.principle .n{ font:600 12px/1 ui-monospace,monospace; color:var(--gold); letter-spacing:.06em; }
.principle h3{ font:650 23px/1.1 "Newsreader",Georgia,serif; margin:12px 0 9px; letter-spacing:-.015em; }
.principle p{ margin:0; color:var(--muted); font-size:14.5px; }

/* ---------- family note (callout) ------------------------------------- */

.note{
  margin-top:26px; background:var(--green-soft); border-radius:var(--radius);
  padding:24px 26px; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:18px; align-items:start;
}
.note .mark{ width:28px; height:28px; border-radius:50%; border:7px solid var(--green); margin-top:2px; }
.note b{ font:650 21px/1.18 "Newsreader",Georgia,serif; display:block; letter-spacing:-.012em; }
.note p{ margin:6px 0 0; color:var(--muted); }
.note.warm{ background:var(--gold-soft); }
.note.warm .mark{ border-color:var(--gold); }

/* ---------- milestone map -------------------------------------------- */

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.filters button{
  border:1px solid var(--line); background:transparent; color:var(--muted);
  padding:9px 15px; border-radius:999px; cursor:pointer; font-weight:650; font-size:14px;
}
.filters button:hover{ border-color:var(--green); color:var(--green-ink); }
.filters button[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:var(--white); }

.timeline{ display:grid; gap:13px; }
.age-card{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  overflow:hidden;
}
.age-label{ padding:24px 22px; background:var(--green-soft); border-right:1px solid var(--line); }
.age-label strong{ font:650 25px/1.05 "Newsreader",Georgia,serif; display:block; letter-spacing:-.02em; }
.age-label span{ font-size:12.5px; color:var(--muted); display:block; margin-top:7px; }
.age-body{ padding:22px 24px; min-width:0; }
.age-summary{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:18px 20px;
}
.age-summary h3{
  font:700 11px/1 "DM Sans",sans-serif; letter-spacing:.09em; text-transform:uppercase;
  margin:0 0 9px; color:var(--green);
}
.age-summary ul{ margin:0; padding-left:17px; color:var(--muted); font-size:14.5px; }
.age-summary li + li{ margin-top:6px; }
.age-toggle{
  margin-top:18px; border:0; background:transparent; color:var(--green);
  padding:0; font-weight:700; font-size:14.5px; cursor:pointer;
}
.age-toggle:hover{ color:var(--green-ink); text-decoration:underline; }
.age-details{
  display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:20px;
}
.age-card.open .age-details{ display:grid; }
.age-details p{ margin:0; font-size:14.5px; }
.age-details b{ display:block; margin-bottom:5px; color:var(--ink); font-size:13px; letter-spacing:.02em; text-transform:uppercase; }
.age-details .ask{ color:var(--rose-ink); }

/* ---------- skills grid ------------------------------------------------ */

.skills{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper);
}
.skill{
  padding:22px 24px; display:grid; grid-template-columns:minmax(0,110px) minmax(0,1fr);
  gap:18px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
}
.skill .when{ font-weight:700; color:var(--green); font-size:13px; }
.skill h3{ font-size:16.5px; margin:0 0 6px; letter-spacing:-.005em; }
.skill p{ font-size:14px; color:var(--muted); margin:0; }

/* ---------- feature split (photo + copy) ------------------------------ */

.feature{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  background:var(--blue); border-radius:var(--radius); overflow:hidden;
}
.feature img{ width:100%; height:100%; min-height:280px; object-fit:cover; }
.feature-copy{ padding:clamp(26px,4.4vw,52px); align-self:center; min-width:0; }
.feature-copy h3{
  font:650 clamp(27px,3.6vw,42px)/1.02 "Newsreader",Georgia,serif;
  letter-spacing:-.028em; margin:0 0 14px;
}
.feature-copy p{ color:var(--muted); margin:0; font-size:16px; }
.points{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:14px 18px; margin-top:20px;
}
.points div{
  border-top:1px solid color-mix(in srgb,var(--blue-ink) 42%,transparent);
  padding-top:12px; font-size:14px; color:var(--muted);
}
.points b{ display:block; margin-bottom:4px; color:var(--ink); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }

/* ---------- two-column text blocks ----------------------------------- */

.cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(20px,3.4vw,40px);
}
.tile{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px;
}
.tile.t-blue{ background:var(--blue); border-color:transparent; }
.tile.t-gold{ background:var(--gold-soft); border-color:transparent; }
.tile.t-rose{ background:var(--rose); border-color:transparent; }
.tile h3{ font:650 24px/1.12 "Newsreader",Georgia,serif; margin:0 0 11px; letter-spacing:-.018em; }
.tile ul,.tile ol{ margin:0; padding-left:19px; color:var(--muted); font-size:15px; }
.tile li + li{ margin-top:8px; }
.tile p{ color:var(--muted); margin:0; font-size:15px; }
.tile p + p{ margin-top:.9em; }
.tile b{ color:var(--ink); }

/* ---------- when to ask --------------------------------------------- */

.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:1px; background:color-mix(in srgb,var(--rose-ink) 26%,transparent);
  border-radius:var(--radius); overflow:hidden; margin-top:22px;
}
.step{ background:var(--paper); padding:22px 22px; }
.step b{ color:var(--rose-ink); font-size:14px; letter-spacing:.02em; }
.step p{ font-size:14px; margin:8px 0 0; color:var(--muted); }

.flags{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:14px; margin-top:18px;
}
.flag{
  border:1px solid color-mix(in srgb,var(--rose-ink) 32%,var(--line));
  border-radius:var(--radius); padding:20px 22px; background:var(--paper-2);
}
.flag b{ display:block; margin-bottom:7px; font-size:15px; }
.flag p{ margin:0; font-size:14.5px; color:var(--muted); }

/* ---------- sources -------------------------------------------------- */

.sources{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  gap:0 30px;
}
.source{ border-top:1px solid var(--line); padding:18px 0; }
.source b{ display:block; font-size:16px; }
.source p{ font-size:14px; color:var(--muted); margin:5px 0 9px; }
.source a{ font-size:14px; font-weight:700; }

/* ---------- disclaimer / footer ------------------------------------- */

.disclaimer{
  margin-top:34px; padding:22px 24px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--paper-2);
  font-size:13.5px; color:var(--muted); max-width:none;
}
.disclaimer b{ color:var(--ink); }

.site-footer{
  border-top:1px solid var(--line); margin-top:clamp(40px,6vw,72px);
  padding-block:34px 46px; background:var(--paper);
}
.footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:26px 32px;
}
.footer-grid h4{
  font:700 11px/1 "DM Sans",sans-serif; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li + li{ margin-top:7px; }
.footer-grid a{ font-size:14.5px; text-decoration:none; font-weight:600; }
.footer-grid a:hover{ text-decoration:underline; }
.footer-note{
  margin-top:30px; padding-top:20px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}

/* ---------- inline glossary term ------------------------------------- */

abbr.term{
  text-decoration:none; border-bottom:1.5px dotted var(--gold);
  cursor:help; font-style:normal;
}
.term-wrap{ position:relative; }
.term-def{
  display:none; background:var(--gold-soft); border-left:4px solid var(--gold);
  padding:9px 12px; margin:8px 0 0; font-size:14px; border-radius:4px;
  color:var(--ink); max-width:44ch;
}
.term-def.show{ display:block; }

/* ---------- prev/next ------------------------------------------------- */

.pager{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:14px; margin-top:clamp(36px,5vw,60px);
}
.pager a{
  display:block; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; text-decoration:none; color:inherit;
}
.pager a:hover{ border-color:var(--green); }
.pager span{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.pager strong{ font:650 20px/1.15 "Newsreader",Georgia,serif; font-weight:650; }

/* ---------- responsive ------------------------------------------------- */

@media (max-width: 980px){
  .hero{ grid-template-columns:minmax(0,1fr); }
  .hero-photo{ min-height:320px; }
  .section-head{ grid-template-columns:minmax(0,1fr); gap:12px; align-items:start; }
  .feature{ grid-template-columns:minmax(0,1fr); }
  .feature img{ min-height:260px; }
}

@media (max-width: 760px){
  body{ font-size:16px; }
  .masthead .bar{ gap:10px; min-height:56px; }
  .mainnav{ margin-left:0; width:100%; gap:2px; overflow-x:auto; padding-bottom:4px; }
  .mainnav a{ font-size:12.5px; padding:7px 10px; }
  .age-card{ grid-template-columns:minmax(0,1fr); }
  .age-label{ border-right:0; border-bottom:1px solid var(--line); padding:16px 18px; }
  .age-label strong{ font-size:22px; }
  .age-body{ padding:18px; }
  .skill{ grid-template-columns:minmax(0,1fr); gap:6px; border-right:0; }
  .note{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .note .mark{ width:22px; height:22px; border-width:5px; }
  .hero-copy{ padding:30px 22px; }
  .wrap{ padding-inline:18px; }
}

@media (max-width: 420px){
  .page-head h1{ font-size:clamp(32px,9vw,42px); }
  .card{ padding:20px; }
  .tile{ padding:22px; }
  .flags,.sources{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card{ transition:none; }
  .card:hover{ transform:none; }
}

/* ---------- print ------------------------------------------------------ */

@media print{
  :root{ --bg:#fff; --paper:#fff; --ink:#000; --muted:#444; --line:#bbb; }
  .masthead,.pager,.site-footer .footer-grid,.age-toggle{ display:none !important; }
  .age-details{ display:grid !important; }
  .hero,.age-card,.tile,.flag,.step{ break-inside:avoid; box-shadow:none; }
  a{ color:#000; text-decoration:underline; }
  body{ font-size:11pt; }
}