/* ============================================================
   articles.css — shared stylesheet for all Resources for New Mom
   article detail pages. Mirrors index.html / for-new-mom.html
   design tokens, supports global day / night mode.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
    font-family:var(--serif);
    background:var(--paper);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;font-weight:400;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--gold-warm);color:var(--paper)}

:root{
    --paper:#FBF5E8;
    --cream:#F5E9D0;
    --cream-deep:#EBDBB8;
    --forest:#3D6B41;
    --forest-soft:#5C8F60;
    --gold:#B57E2A;
    --gold-warm:#D49744;
    --text:#2A2520;
    --text-mid:#5E5247;
    --text-soft:#8C7E6E;
    --rule:rgba(60,50,40,.14);
    --night-bg:#1B2A4E;
    --night-bg-deep:#13203D;
    --night-glow:#F2C268;
    --night-text:#F4E9D2;
    --night-rule:rgba(244,233,210,.14);
    --serif:'Instrument Serif',ui-serif,'New York',Georgia,serif;
    --sans:'Outfit',system-ui,-apple-system,sans-serif;
    --wrap:760px;
    --pad:clamp(20px,5vw,56px);
}

html[data-mode="night"]{
    --paper:#14192A;
    --cream:#1A1F2D;
    --cream-deep:#232838;
    --text:#F4E9D2;
    --text-mid:rgba(244,233,210,.72);
    --text-soft:rgba(244,233,210,.45);
    --rule:rgba(244,233,210,.14);
    --forest:#74B078;
    --forest-soft:#8FC793;
    --gold:#F2C268;
    --gold-warm:#F5CC7A;
}

/* Smooth mode transition — class is added briefly by the toggle JS,
   then removed after ~850ms so hover micro-interactions resume normal speed. */
html.is-mode-transitioning,
html.is-mode-transitioning *,
html.is-mode-transitioning *::before,
html.is-mode-transitioning *::after{
    transition:background-color 700ms cubic-bezier(.45,0,.55,1),
               background 700ms cubic-bezier(.45,0,.55,1),
               color 700ms cubic-bezier(.45,0,.55,1),
               border-color 700ms cubic-bezier(.45,0,.55,1),
               fill 700ms cubic-bezier(.45,0,.55,1),
               stroke 700ms cubic-bezier(.45,0,.55,1),
               box-shadow 700ms cubic-bezier(.45,0,.55,1),
               filter 700ms cubic-bezier(.45,0,.55,1) !important;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
    position:sticky;top:0;z-index:50;
    padding:14px var(--pad);
    background:rgba(251,245,232,.82);
    backdrop-filter:saturate(140%) blur(18px);
    -webkit-backdrop-filter:saturate(140%) blur(18px);
    border-bottom:1px solid var(--rule);
}
html[data-mode="night"] .nav{background:rgba(19,32,61,.62)}
.nav-in{
    max-width:1400px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{
    display:flex;align-items:center;gap:12px;
    font-family:var(--serif);font-size:22px;letter-spacing:-.01em;
    color:var(--forest);
}
html[data-mode="night"] .brand{color:var(--night-glow)}
.brand-mark{
    width:30px;height:30px;border-radius:8px;
    background:url('./image/app_icon.png') center/cover,var(--gold);
    box-shadow:0 2px 6px rgba(60,50,40,.18);
}
.nav-right{display:flex;align-items:center;gap:18px;font-family:var(--sans);font-size:14px}
.nav-back{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--text-mid);
    transition:color .2s ease,gap .2s ease;
}
.nav-back:hover{color:var(--forest);gap:10px}
.nav-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.mode-toggle{
    width:36px;height:36px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--rule);color:var(--text-mid);
    transition:transform .25s ease,color .25s ease;
    position:relative;overflow:hidden;
}
.mode-toggle:hover{transform:rotate(15deg);color:var(--forest)}
.mode-toggle svg{
    width:16px;height:16px;position:absolute;
    transition:opacity .4s ease,transform .4s cubic-bezier(.4,0,.2,1);
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.mode-toggle .ic-moon{opacity:1;transform:rotate(0) scale(1)}
.mode-toggle .ic-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
html[data-mode="night"] .mode-toggle .ic-moon{opacity:0;transform:rotate(90deg) scale(.4)}
html[data-mode="night"] .mode-toggle .ic-sun{opacity:1;transform:rotate(0) scale(1)}

/* ============================================================
   ARTICLE
   ============================================================ */
.prose{
    max-width:var(--wrap);
    margin:0 auto;
    padding:clamp(36px,5vw,72px) var(--pad) clamp(60px,8vw,120px);
}

.breadcrumb{
    font-family:var(--sans);font-size:12px;font-weight:500;
    letter-spacing:.04em;
    color:var(--text-soft);
    margin-bottom:32px;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.breadcrumb a{color:inherit;transition:color .2s ease}
.breadcrumb a:hover{color:var(--forest)}
.breadcrumb-sep{opacity:.5}

.kicker{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--sans);font-size:11px;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--forest);
    margin-bottom:20px;
}
html[data-mode="night"] .kicker{color:var(--night-glow)}
.kicker::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6}

.prose h1{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(38px,5.4vw,68px);
    line-height:1.04;letter-spacing:-.02em;
    color:var(--text);
    margin-bottom:18px;
}
.prose h1 em{font-style:italic;color:var(--gold)}

.prose .lead{
    font-family:var(--serif);
    font-size:clamp(19px,1.7vw,24px);
    line-height:1.5;
    color:var(--text-mid);
    margin-bottom:24px;
    max-width:64ch;
}

.prose-meta{
    font-family:var(--sans);font-size:13px;
    color:var(--text-soft);
    display:flex;gap:14px;flex-wrap:wrap;align-items:center;
    margin-bottom:48px;
    padding-bottom:32px;
    border-bottom:1px solid var(--rule);
}
.prose-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

.poster-figure{
    margin:0 0 clamp(40px,6vw,72px);
    border-radius:18px;overflow:hidden;
    box-shadow:0 24px 60px -22px rgba(60,50,40,.32),
               0 8px 18px -8px rgba(60,50,40,.18);
    background:var(--cream-deep);
}
html[data-mode="night"] .poster-figure{
    box-shadow:0 28px 70px -24px rgba(0,0,0,.6),
               0 10px 22px -10px rgba(0,0,0,.4);
}
.poster-figure img{
    width:100%;height:auto;display:block;
    transition:filter .6s cubic-bezier(.45,0,.55,1);
}
/* Posters don't have dark versions; dim brightness + saturation in night
   mode so they don't blast off the dark page. */
html[data-mode="night"] .poster-figure img{
    filter:brightness(0.72) saturate(0.92);
}

.prose-body h2{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(26px,2.8vw,36px);
    line-height:1.15;letter-spacing:-.015em;
    color:var(--text);
    margin:clamp(40px,5vw,64px) 0 16px;
}
.prose-body h2 em{font-style:italic;color:var(--gold)}

.prose-body h3{
    font-family:var(--serif);font-weight:400;font-style:italic;
    font-size:clamp(20px,1.8vw,24px);
    color:var(--text);
    margin:32px 0 12px;
}

.prose-body p{
    font-family:var(--serif);
    font-size:clamp(17px,1.3vw,19px);
    line-height:1.65;
    color:var(--text);
    margin-bottom:18px;
    max-width:64ch;
}
.prose-body p em{color:var(--text-mid);font-style:italic}
.prose-body p strong{font-weight:400;color:var(--text);background:linear-gradient(transparent 62%,rgba(212,151,68,.28) 62%)}

.prose-body ul,.prose-body ol{
    margin:0 0 24px 0;padding-left:24px;
    font-family:var(--serif);
    font-size:clamp(17px,1.3vw,19px);
    line-height:1.65;color:var(--text);
}
.prose-body li{margin-bottom:10px}
.prose-body li::marker{color:var(--gold)}

.prose-body a{
    color:var(--forest);
    border-bottom:1px solid rgba(61,107,65,.3);
    transition:color .2s ease,border-color .2s ease;
}
.prose-body a:hover{color:var(--forest-soft);border-bottom-color:var(--forest-soft)}
html[data-mode="night"] .prose-body a{
    color:var(--night-glow);
    border-bottom-color:rgba(242,194,104,.3);
}

.callout{
    margin:32px 0;
    padding:24px 28px;
    background:var(--cream);
    border-left:3px solid var(--forest);
    border-radius:0 10px 10px 0;
}
html[data-mode="night"] .callout{
    background:rgba(116,176,120,.08);
    border-left-color:var(--forest);
}
.callout strong{
    display:block;
    font-family:var(--sans);font-size:11px;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--forest);
    margin-bottom:8px;
    background:none;
}
.callout p{font-size:16px;margin-bottom:0;color:var(--text-mid)}

/* Pull-quote */
.pullquote{
    margin:36px 0;
    padding:0 0 0 24px;
    border-left:2px solid var(--gold);
    font-family:var(--serif);font-style:italic;
    font-size:clamp(20px,2vw,26px);
    line-height:1.4;color:var(--text);
}

/* Sources */
.sources{
    margin-top:clamp(48px,6vw,72px);
    padding-top:32px;
    border-top:1px solid var(--rule);
}
.sources h2{
    font-family:var(--sans);font-size:12px;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--text-soft);
    margin-bottom:18px;
}
.sources ol{
    padding-left:22px;
    font-family:var(--serif);font-size:15px;line-height:1.55;
    color:var(--text-mid);
}
.sources li{margin-bottom:10px}
.sources li a{color:var(--forest);border-bottom:1px solid rgba(61,107,65,.3)}
html[data-mode="night"] .sources li a{color:var(--night-glow);border-bottom-color:rgba(242,194,104,.3)}

/* Prev / Next nav */
.prev-next{
    margin-top:clamp(48px,6vw,80px);
    padding-top:36px;
    border-top:1px solid var(--rule);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.prev-next a{
    display:flex;flex-direction:column;gap:6px;
    padding:18px 22px;border-radius:14px;
    border:1px solid var(--rule);
    transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.prev-next a:hover{
    border-color:var(--forest);
    transform:translateY(-2px);
    background:var(--cream);
}
html[data-mode="night"] .prev-next a:hover{background:rgba(116,176,120,.06)}
.prev-next .dir{
    font-family:var(--sans);font-size:11px;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);
}
.prev-next .title{
    font-family:var(--serif);font-size:17px;line-height:1.3;color:var(--text);
}
.prev-next .title em{font-style:italic;color:var(--gold)}
.prev-next .prev{text-align:left}
.prev-next .next{text-align:right}
.prev-next .next:only-child{grid-column:2}
.prev-next a:only-child:not(.next){grid-column:1}
@media (max-width:680px){
    .prev-next{grid-template-columns:1fr}
    .prev-next a:only-child,.prev-next .next:only-child{grid-column:1}
}

/* CTA banner at end of article */
.cta-end{
    margin-top:clamp(56px,7vw,96px);
    padding:clamp(32px,5vw,52px) clamp(28px,4vw,44px);
    border-radius:20px;
    background:linear-gradient(135deg,var(--forest) 0%,var(--forest-soft) 100%);
    color:var(--paper);
    text-align:center;
}
html[data-mode="night"] .cta-end{
    background:linear-gradient(135deg,var(--night-bg) 0%,var(--night-bg-deep) 100%);
}
.cta-end h3{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(22px,2.4vw,30px);
    line-height:1.2;
    margin-bottom:12px;
}
.cta-end p{
    font-family:var(--serif);
    font-size:17px;line-height:1.5;
    opacity:.86;
    max-width:480px;margin:0 auto 22px;
}
.cta-end a{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--sans);font-size:14px;font-weight:500;
    padding:14px 26px;border-radius:999px;
    background:var(--paper);color:var(--forest);
    transition:transform .2s ease;
}
html[data-mode="night"] .cta-end a{background:var(--night-glow);color:var(--night-bg-deep)}
.cta-end a:hover{transform:translateY(-1px)}
.cta-end a svg{width:16px;height:16px;fill:currentColor}

/* Footer */
.page-foot{
    background:var(--night-bg-deep);color:rgba(244,233,210,.7);
    padding:40px var(--pad);
    font-family:var(--sans);font-size:13px;
}
.page-foot-in{
    max-width:1400px;margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:18px;
}
.page-foot a{color:rgba(244,233,210,.7);transition:color .2s ease}
.page-foot a:hover{color:var(--night-glow)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}

/* Disclaimer */
.disclaimer{
    margin-top:32px;
    font-family:var(--sans);font-size:12px;line-height:1.5;
    color:var(--text-soft);
    padding:16px 20px;
    border-radius:10px;
    background:var(--cream-deep);
}
html[data-mode="night"] .disclaimer{background:rgba(244,233,210,.06)}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
}