/* =========================================================
   Small Wonders Notes - reading for parents (SEO/blog layer)
   Mobile first: base = phone; min-width adds the rest.
   Reuses sw.css tokens (--gold/--navy/--paper/--ink/--muted/--serif/--sans/--jp)
   and the site's existing vocabulary: eyebrow, sec-title, sec-sub, micro, sw-btn,
   hairline rows (as in .fs/.facts), cp-open reading measure. No new component
   language, no cards-with-shadows, no carousels, no pills-in-a-row.
   ========================================================= */
.page-notes{--nt:var(--gold);--nt-ink:var(--gold-on-white)}

/* ---------- masthead: typographic only, matches the ikigai "word, breathing"
   restraint - a list of writing needs no hero art ---------- */
.nt-head{padding:calc(var(--nav-h) + 2.6rem) 1.2rem 2.2rem;max-width:1180px;margin:0 auto}
.nt-head-in{max-width:40rem}
.nt-head .sec-title{margin-top:1rem}
@media(min-width:769px){.nt-head{padding:calc(var(--nav-h) + 4.4rem) 2rem 3rem}}
@media(min-width:1000px){.nt-head{padding-left:3rem;padding-right:3rem}}

/* ---------- the index: a numbered, hairline-ruled list, the same idiom
   as .facts and .fs elsewhere on the site, not a grid of cards ---------- */
.nt-list{padding:0 1.2rem 3.6rem;max-width:1180px;margin:0 auto}
.nt-row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem 1.1rem;
  padding:1.6rem 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.nt-list .nt-row:last-child{border-bottom:1px solid var(--line)}
.nt-n{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.1rem;color:var(--muted);line-height:1.6}
.nt-copy{display:grid;gap:.5rem}
.nt-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text)}
.nt-top time{color:var(--muted);letter-spacing:.1em;font-weight:500}
.nt-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,5.4vw,2.05rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.nt-dek{max-width:52ch;font-size:.98rem;line-height:1.65;color:#4A5468}
.nt-row-art{display:none}
.nt-cta{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--gold-on-white)}
.nt-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
@media(hover:hover){.nt-row:hover .nt-title{color:var(--gold-on-white)}.nt-row:hover .nt-cta svg{transform:translate(2px,0)}}
.nt-row:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:6px}

@media(min-width:700px){
  .nt-row{grid-template-columns:auto 1fr auto;align-items:center}
  .nt-row-art{display:block;width:104px;height:104px;border-radius:14px;overflow:hidden}
  .nt-row-art img{width:100%;height:100%;object-fit:cover}
}
@media(min-width:1000px){.nt-list{padding-left:3rem;padding-right:3rem;padding-bottom:5rem}}

/* ---------- article page ---------- */
.nt-art-head{padding:calc(var(--nav-h) + 2.4rem) 1.2rem 0;max-width:44rem;margin:0 auto}
.nt-art-meta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin-top:1.3rem;font-size:.82rem;color:var(--muted)}
.nt-art-meta span+span::before{content:'\00b7';margin-right:1rem}
.nt-art-photo{margin:2rem auto 0;max-width:44rem;padding:0 1.2rem}
.nt-art-photo img{width:100%;height:auto;border-radius:18px;aspect-ratio:16/10;object-fit:cover}
.nt-art-photo figcaption{margin-top:.6rem;font-size:.8rem;color:var(--muted)}
.nt-art-body{max-width:44rem;margin:0 auto;padding:2.2rem 1.2rem 1rem;font-size:1.05rem;line-height:1.85}
.nt-art-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,5vw,1.9rem);line-height:1.2;margin:2.2rem 0 .9rem;color:var(--ink)}
.nt-art-body p{margin-top:1.15rem}
.nt-art-body p:first-child{margin-top:0}
.nt-art-body ul,.nt-art-body ol{margin:1.15rem 0 1.15rem 1.3rem;display:grid;gap:.6rem}
.nt-art-body li{line-height:1.7}
.nt-art-body a{color:var(--gold-on-white);text-decoration-color:rgba(148,111,63,.4);text-underline-offset:3px}
.nt-art-body strong{font-weight:600;color:var(--ink)}
.nt-pull{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.3rem,4.4vw,1.6rem);line-height:1.4;margin:2rem 0;color:var(--gold-on-white);border-left:2px solid var(--gold);padding-left:1.2rem}
.nt-art-foot{max-width:44rem;margin:0 auto;padding:1.6rem 1.2rem 3.2rem;border-top:1px solid var(--line)}
.nt-art-foot p{font-size:.95rem;color:var(--muted);line-height:1.7}
.nt-art-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}

.nt-more{padding:2.6rem 1.2rem 3.6rem;background:var(--warm-note,var(--paper));max-width:1180px;margin:0 auto}
.nt-more .eyebrow{margin-bottom:.3rem}
.nt-more-grid{margin-top:1.6rem;display:grid;gap:0}

@media(min-width:769px){
  .nt-art-head,.nt-art-photo,.nt-art-body,.nt-art-foot{padding-left:2rem;padding-right:2rem}
  .nt-more{padding-left:2rem;padding-right:2rem}
}
@media(min-width:1000px){
  .nt-art-head{padding-top:calc(var(--nav-h) + 4.2rem)}
  .nt-more{padding-left:3rem;padding-right:3rem;padding-top:3.6rem;padding-bottom:5rem}
}