/* Fussy Mama look (2026-11-09): guide cards, the Journal at /blogs and the guide reading layout.
   Linked right after <style id="fm-edu"> on every page that shows guide cards or a guide, so it
   overrides that block; _build/fm_look_link.py adds the link and checks it. Root path, not
   /wp-content, so edits are not stuck behind the year-long immutable cache. */

:root{
  --fm-ink:#1F2933;--fm-muted:#5F6B76;--fm-line:#EFE6DC;
  --fm-teal:#0EA8A3;--fm-teal-d:#0A7C78;--fm-teal-soft:#D8F2EF;
  --fm-pink:#F39BB9;--fm-pink-d:#B0305F;--fm-pink-soft:#FCE4EC;
  --fm-cream:#FCF2E9;--fm-cream-2:#FFF8F1;
}

/* ---------- topic colours: cards carry data-cat as a section slug or a category name ---------- */
.fm-acard,.fm-j-sec,.fm-j-stage{--t-soft:#D8F2EF;--t-deep:#066561}
[data-cat="pregnancy-prenatal"],[data-cat="Pregnancy & Prenatal"],[data-stage="pregnancy"]{--t-soft:#FCE4EC;--t-deep:#B0305F}
[data-cat="newborn-infant-care"],[data-cat="Newborn & Infant Care"],[data-stage="baby"]{--t-soft:#E2EEFB;--t-deep:#285E9C}
[data-cat="toddlers-young-kids"],[data-cat="Toddlers & Young Kids"],[data-stage="kids"]{--t-soft:#FFF1C4;--t-deep:#7A5600}
[data-cat="confinement-recovery"],[data-cat="Confinement & Recovery"],[data-stage="confinement"]{--t-soft:#F1E4F6;--t-deep:#7A3B8F}
[data-cat="parenthood-planning"],[data-cat="Parenthood & Planning"],[data-stage="home"]{--t-soft:#D8F2EF;--t-deep:#066561}
[data-cat="play"],[data-cat="Play"],[data-stage="out"]{--t-soft:#E6F4CF;--t-deep:#436900}
[data-cat="eat"],[data-cat="Eat"]{--t-soft:#FFE6D2;--t-deep:#9C410D}
[data-cat="travel"],[data-cat="Travel"]{--t-soft:#D9F0F8;--t-deep:#13617F}
[data-cat="whats-on"],[data-cat="What's On"]{--t-soft:#FDE1DB;--t-deep:#A63225}
[data-cat="schools-learning"],[data-cat="schools"],[data-cat="Schools & Learning"]{--t-soft:#E5E6FB;--t-deep:#45429E}
[data-cat="style-shopping"],[data-cat="style"],[data-cat="Style & Shopping"]{--t-soft:#F3EEDB;--t-deep:#62561F}
[data-cat="wellness"],[data-cat="Wellness"]{--t-soft:#D9F4EA;--t-deep:#136448}

/* ---------- guide cards (Journal, hubs, related guides) ---------- */
.fm-cards{gap:22px}
.fm-acard{border:0;border-radius:20px;background:#fff;text-decoration:none!important;
  box-shadow:0 1px 2px rgba(31,41,51,.06),0 10px 24px -14px rgba(31,41,51,.22);transition:transform .18s ease,box-shadow .18s ease}
.fm-acard:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(31,41,51,.06),0 18px 34px -16px rgba(31,41,51,.32)}
.fm-acard:focus-visible{outline:3px solid var(--fm-teal-d);outline-offset:3px}
.fm-acard *{text-decoration:none!important}
.fm-acard .top{display:none}
.fm-acard-img{aspect-ratio:16/9;height:auto;object-fit:cover;background:var(--t-soft)}
.fm-acard .bd{padding:14px 18px 18px;gap:7px}
.fm-acard .c{align-self:flex-start;background:var(--t-soft);color:var(--t-deep);border-radius:999px;padding:4px 10px;font-size:.68rem;letter-spacing:.04em}
.fm-acard h3{font-size:1.04rem;line-height:1.35;color:var(--fm-ink);font-weight:700}
.fm-acard:hover h3{color:var(--t-deep)}
.fm-acard p{color:var(--fm-muted);font-size:.875rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fm-acard .rd{color:var(--fm-muted);font-size:.76rem}
.fm-sec-h{color:var(--fm-ink);font-size:1.35rem;font-weight:800;letter-spacing:-.01em}

/* ---------- the Journal (/blogs) ---------- */
.fm-j-hero{background:var(--fm-cream);border-radius:28px;padding:36px 32px 28px;margin:0 0 28px;position:relative;overflow:hidden}
.fm-j-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--fm-pink-soft);opacity:.8}
.fm-j-hero>*{position:relative;z-index:1}
.fm-edu .fm-j-hero h1{color:var(--fm-ink);font-size:clamp(1.9rem,1.3rem + 2.4vw,2.8rem);font-weight:800;letter-spacing:-.015em;margin:0 0 .4rem}
.fm-edu .fm-j-hero .lede{color:var(--fm-muted);margin:0 0 1.1rem;max-width:40rem}
.fm-j-hero .lede a{color:var(--fm-teal-d);font-weight:600}
.fm-j-search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #E6DACB;border-radius:999px;padding:4px 6px 4px 18px;max-width:560px}
.fm-j-search:focus-within{border-color:var(--fm-teal-d);box-shadow:0 0 0 4px rgba(10,124,120,.14)}
.fm-j-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1rem;padding:10px 0;color:var(--fm-ink)}
.fm-j-search button{border:0;background:var(--fm-teal-d);color:#fff;font:inherit;font-weight:600;font-size:.9rem;border-radius:999px;padding:10px 18px;cursor:pointer}
.fm-j-stages{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:16px -4px 0;padding:2px 4px 4px}
.fm-j-stages::-webkit-scrollbar{display:none}
@media(min-width:680px){.fm-j-stages{flex-wrap:wrap;overflow:visible}}
.fm-j-stage{flex:none;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid transparent;border-radius:999px;padding:9px 16px;font-size:.9rem;font-weight:600;color:var(--fm-ink);text-decoration:none!important;box-shadow:0 1px 2px rgba(31,41,51,.06)}
.fm-j-stage i{width:10px;height:10px;border-radius:50%;background:var(--t-deep)}
.fm-j-stage:hover{border-color:var(--t-deep)}
.fm-j-sec{margin:40px 0 0;scroll-margin-top:20px}
.fm-j-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.fm-j-head h2{margin:0;font-size:1.4rem;font-weight:800;color:var(--fm-ink);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.fm-j-head h2 i{width:12px;height:12px;border-radius:4px;background:var(--t-deep);transform:rotate(45deg)}
.fm-j-head .n{color:var(--fm-muted);font-size:.85rem;font-weight:500}
.fm-j-all{flex:none;font-size:.9rem;font-weight:600;color:var(--t-deep,var(--fm-teal-d));text-decoration:none!important;white-space:nowrap}
.fm-j-all:hover{text-decoration:underline!important}
/* newest guides: one large card and two beside it */
.fm-edu:has(.fm-j-hero){max-width:1220px}
.fm-j-new{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:680px){.fm-j-new{grid-template-columns:repeat(3,1fr)}.fm-j-new .fm-acard h3{font-size:1.12rem}}
/* pregnancy week by week */
.fm-j-weeks{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin:0 -2px;scrollbar-width:thin}
.fm-j-week{flex:none;scroll-snap-align:start;width:86px;border-radius:18px;background:var(--fm-pink-soft);color:var(--fm-pink-d);text-decoration:none!important;padding:12px 8px 10px;text-align:center;transition:transform .15s ease}
.fm-j-week:hover{transform:translateY(-2px);background:#F9D3E0}
.fm-j-week b{display:block;font-size:1.7rem;line-height:1;font-weight:800}
.fm-j-week span{display:block;font-size:.72rem;font-weight:600;margin-top:4px;color:var(--fm-ink)}
.fm-j-week.tri{background:var(--fm-pink-d);color:#fff}.fm-j-week.tri span{color:#fff}
/* stage shelves: four newest per stage */
@media(min-width:680px){.fm-j-shelf .fm-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.fm-j-shelf .fm-cards{grid-template-columns:repeat(4,1fr)}}
@media(max-width:679px){
  .fm-j-shelf .fm-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:2px 20px 14px;scrollbar-width:none}
  .fm-j-shelf .fm-cards::-webkit-scrollbar{display:none}
  .fm-j-shelf .fm-acard{flex:0 0 78%;scroll-snap-align:start}
  .fm-j-shelf .fm-acard p{display:none}}
/* free tools */
.fm-j-tools{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.fm-j-tool{display:block;background:var(--fm-cream-2);border:1px solid var(--fm-line);border-radius:16px;padding:14px 16px;text-decoration:none!important;color:var(--fm-ink)}
.fm-j-tool:hover{border-color:var(--fm-teal-d)}
.fm-j-tool b{display:block;font-size:.95rem;color:var(--fm-teal-d)}
.fm-j-tool span{display:block;font-size:.82rem;color:var(--fm-muted);margin-top:3px;line-height:1.45}
/* every guide: stage filter + search, cards stay in the HTML */
.fm-edu .fm-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 20px;padding:2px}
.fm-edu .fm-chips::-webkit-scrollbar{display:none}
.fm-edu .fm-chip{flex:none;border:1.5px solid #E6DACB;color:var(--fm-ink);font-weight:500;padding:8px 16px}
.fm-edu .fm-chip.active{background:var(--fm-ink);border-color:var(--fm-ink);color:#fff}
.fm-edu #fm-more{background:#fff;border:1.5px solid var(--fm-ink);color:var(--fm-ink);font-weight:600;padding:12px 26px}
.fm-edu #fm-more:hover{background:var(--fm-ink);color:#fff}
.fm-j-none{display:none;color:var(--fm-muted);padding:20px 0}
.fm-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fm-j-sub{font-size:1rem;font-weight:700;color:var(--fm-ink);margin:26px 0 10px}

/* ---------- guide pages: a cream header band, larger intro, sidebar contents ---------- */
.fm-edu:has(>.fm-crumbs){max-width:1180px;padding-top:24px}
.fm-edu:has(>.fm-crumbs) .fm-crumbs ol{font-size:.8rem}
.fm-edu:has(>.fm-crumbs) .fm-crumbs a{color:var(--fm-teal-d);font-weight:600;text-decoration:none}
.fm-edu:has(>.fm-crumbs)>.fm-cat{background:var(--fm-teal-soft);color:#066561;padding:5px 12px;font-size:.7rem}
.fm-edu:has(>.fm-crumbs)>h1{color:var(--fm-ink);font-size:clamp(1.7rem,1.15rem + 2.3vw,2.6rem);line-height:1.15;font-weight:800;letter-spacing:-.015em;margin:.5rem 0 .55rem;max-width:52rem}
.fm-edu:has(>.fm-crumbs)>.fm-meta{color:var(--fm-muted);font-size:.85rem;margin:0 0 1.1rem}
.fm-edu:has(>.fm-crumbs)>.fm-hero{border-radius:24px;aspect-ratio:16/9;object-fit:cover;box-shadow:none;margin:6px 0 10px}
.fm-edu:has(>.fm-crumbs) .fm-prose{font-size:1.0625rem;color:var(--fm-ink)}
.fm-edu:has(>.fm-crumbs) .fm-prose p,.fm-edu:has(>.fm-crumbs) .fm-prose li{color:#36414B;line-height:1.75}
.fm-edu:has(>.fm-crumbs) .fm-prose>p:first-of-type{font-size:1.2rem;line-height:1.65;color:var(--fm-ink);margin-top:0}
.fm-edu:has(>.fm-crumbs) .fm-prose h2{color:var(--fm-ink);font-size:1.55rem;line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:2.6rem 0 .7rem;scroll-margin-top:20px}
.fm-edu:has(>.fm-crumbs) .fm-prose h2::before{content:"";display:block;width:36px;height:5px;border-radius:5px;background:var(--fm-pink);margin:0 0 12px}
.fm-edu:has(>.fm-crumbs) .fm-prose h3{color:var(--fm-ink);font-size:1.15rem;font-weight:700;margin:1.6rem 0 .45rem}
.fm-edu:has(>.fm-crumbs) .fm-prose a{color:var(--fm-teal-d);text-decoration:underline;text-decoration-color:rgba(10,124,120,.35);text-underline-offset:3px}
.fm-edu:has(>.fm-crumbs) .fm-prose a:hover{text-decoration-color:currentColor}
.fm-edu:has(>.fm-crumbs) .fm-callout{background:var(--fm-cream);border:0;border-radius:18px;padding:18px 20px;color:var(--fm-ink)}
.fm-edu:has(>.fm-crumbs) .fm-tablewrap table{border-radius:14px;overflow:hidden;font-size:.92rem}
.fm-edu:has(>.fm-crumbs) .fm-tablewrap th{background:var(--fm-cream);color:var(--fm-ink)}
.fm-edu:has(>.fm-crumbs) .fm-fig img{box-shadow:none;border-radius:18px}
.fm-edu:has(>.fm-crumbs) .fm-sources{background:var(--fm-cream-2);border:1px solid var(--fm-line);border-radius:18px;padding:18px 20px;color:var(--fm-muted)}
.fm-edu:has(>.fm-crumbs) .fm-sources a{color:var(--fm-teal-d)}
.fm-edu:has(>.fm-crumbs) .ilm-related{border:0!important;background:var(--fm-teal-soft);border-radius:18px;padding:18px 20px!important}
.fm-edu:has(>.fm-crumbs) .ilm-related h3{margin-top:0}
.fm-edu:has(>.fm-crumbs) .ilm-related a{font-weight:600}
.fm-edu:has(>.fm-crumbs) .fm-toc{background:var(--fm-cream-2);border:1px solid var(--fm-line);border-radius:18px;padding:14px 18px}
.fm-edu:has(>.fm-crumbs) .fm-toc a{color:var(--fm-ink)}
.fm-edu:has(>.fm-crumbs) .fm-toc a:hover{color:var(--fm-pink-d)}
.fm-edu:has(>.fm-crumbs) .fm-cross a{color:var(--fm-teal-d)}

@media(min-width:1080px){
  /* explicit rows: every guide has the same top-level order (crumbs, cat, h1, meta, [event status], hero, [credit], toc, prose, sources) */
  .fm-edu:has(>.fm-crumbs){display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:56px;align-items:start}
  .fm-edu:has(>.fm-crumbs)>*{grid-column:1/-1}
  .fm-edu:has(>.fm-crumbs)::before{content:"";grid-column:1/-1;grid-row:1/6;background:var(--fm-cream);border-radius:32px;align-self:stretch;margin:0 -40px}
  .fm-edu:has(>.fm-crumbs)>#fmtop,.fm-edu:has(>.fm-crumbs)>.fm-crumbs{grid-row:1;padding-top:36px}
  .fm-edu:has(>.fm-crumbs)>.fm-cat{grid-row:2;justify-self:start}
  .fm-edu:has(>.fm-crumbs)>h1{grid-row:3}
  .fm-edu:has(>.fm-crumbs)>.fm-meta{grid-row:4;margin:0;padding-bottom:36px}
  .fm-edu:has(>.fm-crumbs)>.fm-event-status{grid-row:5;margin:-20px 0 0!important;padding-bottom:30px}
  .fm-edu:has(>.fm-crumbs)>.fm-hero{grid-row:6;margin:28px 0 8px;max-height:520px;width:100%}
  .fm-edu:has(>.fm-crumbs)>.fm-hero-credit{grid-row:7}
  .fm-edu:has(>.fm-crumbs)>.fm-toc{grid-row:8/10;grid-column:2;position:sticky;top:24px;margin:32px 0 0;max-height:calc(100vh - 48px);overflow:auto}
  .fm-edu:has(>.fm-crumbs)>.fm-toc summary{pointer-events:none}
  .fm-edu:has(>.fm-crumbs)>.fm-toc summary::after{content:none}
  .fm-edu:has(>.fm-crumbs)>.fm-toc ol{list-style:none;padding:0;gap:2px}
  .fm-edu:has(>.fm-crumbs)>.fm-toc li{font-size:.86rem}
  .fm-edu:has(>.fm-crumbs)>.fm-toc a{display:block;padding:6px 10px;border-radius:10px}
  .fm-edu:has(>.fm-crumbs)>.fm-toc a:hover{background:#fff;text-decoration:none}
  .fm-edu:has(>.fm-crumbs)>.fm-prose{grid-row:8;grid-column:1;max-width:none;margin-top:32px}
  .fm-edu:has(>.fm-crumbs)>.fm-sources{grid-row:9;grid-column:1}
  .fm-edu:has(>.fm-crumbs)>.fm-sources~section:not(.fm-cross){grid-row:10}
  .fm-edu:has(>.fm-crumbs)>.fm-sources~p{grid-row:11}
  .fm-edu:has(>.fm-crumbs)>.fm-sources~.fm-cross{grid-row:12}
}
@media(max-width:1079px){
  .fm-edu:has(>.fm-crumbs){padding-top:16px}
  .fm-edu:has(>.fm-crumbs) .fm-prose>p:first-of-type{font-size:1.125rem}
}

/* ---------- hubs and other pages with the fm-edu shell (/play, /eat, /learn/..., /whats-on, /nursing-rooms-singapore ...):
   the same cream header band as the guides. Every such page opens with [a.fm-back] [span.fm-cat] h1 [p.lede];
   they sit in rows 2-5 (column 1, or a row-locked item opens an implicit second column) between two spacer rows, under a band that spans rows 1-6, so the rest flows from row 8. ---------- */
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero)):has(>h1){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:28px repeat(4,auto) 30px;padding-top:24px}
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero)):has(>h1)::before{content:"";grid-column:1;grid-row:1/7;background:var(--fm-cream);border-radius:28px;margin:0 -16px}
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero))>.fm-back{grid-column:1;grid-row:2;justify-self:start;margin:0 0 8px;color:var(--fm-teal-d);font-size:.85rem}
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero))>.fm-cat{grid-column:1;grid-row:3;justify-self:start;background:var(--fm-teal-soft);color:#066561;padding:5px 12px;font-size:.7rem;margin:0 0 4px}
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero))>h1{grid-column:1;grid-row:4;color:var(--fm-ink);font-size:clamp(1.8rem,1.2rem + 2.4vw,2.7rem);line-height:1.15;font-weight:800;letter-spacing:-.015em;margin:.2rem 0 .5rem;max-width:52rem}
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero))>.lede{grid-column:1;grid-row:5;color:var(--fm-muted);max-width:44rem;margin:0}
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero))>.lede a{color:var(--fm-teal-d);font-weight:600}
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero))>.fm-hero{margin:0 0 8px;border-radius:24px;box-shadow:none}
/* row 7 is a gap under the band; ::after holds it so the page content starts at row 8 */
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero)):has(>h1)::after{content:"";grid-column:1;grid-row:7;height:26px}
.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero)) .fm-prose h2{color:var(--fm-ink)}
@media(min-width:1080px){.fm-edu:not(:has(>.fm-crumbs)):not(:has(.fm-j-hero)):has(>h1)::before{margin:0 -40px}}
.fm-tool,.fm-tool *{text-decoration:none!important}
.fm-tool:hover{border-color:var(--fm-teal-d)}
.fm-tool .t{color:var(--fm-teal-d)}
/* at-a-glance tables (label + value rows) wrap on a phone instead of scrolling sideways */
.fm-tablewrap table:has(th[scope="row"]){min-width:0}
.fm-tablewrap th[scope="row"]{width:34%;white-space:normal}