/* Marion: a calm, accessible UK parenting sleep site.
   Design goals: WCAG 2.2 AA, works with no JS, readable at 200% zoom,
   honours prefers-reduced-motion / prefers-contrast, light + dark. */

/* ---------- tokens ---------- */
:root {
  --night-900:#10131f; --night-800:#171b2b; --night-700:#202641; --night-600:#2c3357;
  --ink-900:#151824; --ink-700:#333a52; --ink-600:#4c546f; --ink-400:#6d7590;
  --paper:#fbfaf7; --paper-2:#f3f1ec; --line:#8f8b82;
  --amber:#a95903; --amber-soft:#fdf3e4; --amber-line:#e8c493;
  --teal:#1f6f6a; --teal-soft:#e7f3f1; --teal-line:#a9d2cd;
  --plum:#6c4370; --plum-soft:#f4ecf5;
  --alert:#a3231f; --alert-soft:#fdeceb; --alert-line:#eab3b0;

  --bg:var(--paper); --bg-2:var(--paper-2); --surface:#fff;
  --fg:var(--ink-900); --fg-2:var(--ink-700); --fg-3:var(--ink-600);
  --rule:var(--line); --accent:var(--amber); --link:#1a5a8f; --link-visited:#6b3f86;

  --max:68rem; --measure:38rem; --radius:14px;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --shadow: 0 1px 2px rgba(16,19,31,.06), 0 8px 24px -12px rgba(16,19,31,.18);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* Dark is the default signal; the in-page toggle stamps data-theme and must win. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:var(--night-900); --bg-2:var(--night-800); --surface:var(--night-700);
    --fg:#f2f3f7; --fg-2:#d3d7e4; --fg-3:#a9b0c4;
    --rule:#5e6587; --link:#8fc4f0; --link-visited:#c9a9e6;
    --amber:#f0b76b; --amber-soft:#2e2418; --amber-line:#6a5030;
    --teal:#7fd6cd; --teal-soft:#16302f; --teal-line:#2f5f5a;
    --plum:#d3aede; --plum-soft:#2a2135;
    --alert:#ff9d97; --alert-soft:#33201f; --alert-line:#7a3a36;
  }
}
:root[data-theme="dark"] {
  --bg:var(--night-900); --bg-2:var(--night-800); --surface:var(--night-700);
  --fg:#f2f3f7; --fg-2:#d3d7e4; --fg-3:#a9b0c4;
  --rule:#5e6587; --link:#8fc4f0; --link-visited:#c9a9e6;
  --amber:#f0b76b; --amber-soft:#2e2418; --amber-line:#6a5030;
  --teal:#7fd6cd; --teal-soft:#16302f; --teal-line:#2f5f5a;
  --plum:#d3aede; --plum-soft:#2a2135;
  --alert:#ff9d97; --alert-soft:#33201f; --alert-line:#7a3a36;
}
:root[data-theme="light"] {
  --bg:var(--paper); --bg-2:var(--paper-2); --surface:#fff;
  --fg:var(--ink-900); --fg-2:var(--ink-700); --fg-3:var(--ink-600);
  --rule:var(--line); --link:#1a5a8f; --link-visited:#6b3f86;
  --amber:#a95903; --amber-soft:#fdf3e4; --amber-line:#e8c493;
  --teal:#1f6f6a; --teal-soft:#e7f3f1; --teal-line:#a9d2cd;
  --plum:#6c4370; --plum-soft:#f4ecf5;
  --alert:#a3231f; --alert-soft:#fdeceb; --alert-line:#eab3b0;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.22;font-weight:600;margin:0 0 .5em;color:var(--fg)}
h1{font-size:clamp(2rem,5vw,2.9rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.4vw,2.05rem);margin-top:2.2em}
h3{font-size:clamp(1.2rem,2.4vw,1.4rem);margin-top:1.8em}
h4{font-size:1.06rem;font-family:var(--sans);font-weight:700;margin-top:1.5em}
p,li{color:var(--fg-2)}
p{margin:0 0 1.1em;max-width:var(--measure)}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:.08em}
a:visited{color:var(--link-visited)}
a:hover{text-decoration-thickness:.16em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
strong{color:var(--fg);font-weight:670}
abbr{text-decoration:none;border-bottom:1px dotted currentColor}
::selection{background:var(--accent);color:var(--bg)}

/* ---------- layout ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--fg);
  padding:.8rem 1.2rem;border:2px solid var(--accent);border-radius:0 0 var(--radius) 0;font-weight:600}
.skip:focus{left:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:46rem}
main{display:block;padding-bottom:4rem}
.stack>*+*{margin-top:1.1em}

/* ---------- header / nav ---------- */
.site-head{background:var(--bg-2);border-bottom:1px solid var(--rule);position:relative}
.head-row{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding-block:.9rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.3rem;
  font-weight:600;color:var(--fg);text-decoration:none}
.brand:visited{color:var(--fg)}
.brand svg{flex:none}
.brand span small{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600}
nav.main ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .35rem;margin:0;padding:0 0 .7rem}
nav.main a{display:block;padding:.42rem .7rem;border-radius:999px;text-decoration:none;
  color:var(--fg-2);font-size:.94rem;font-weight:560}
nav.main a:hover{background:var(--surface);color:var(--fg);text-decoration:underline}
nav.main a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.theme-toggle{background:var(--surface);border:1px solid var(--rule);color:var(--fg-2);
  border-radius:999px;padding:.4rem .8rem;font:inherit;font-size:.85rem;cursor:pointer;display:inline-flex;
  gap:.4rem;align-items:center}
.theme-toggle:hover{color:var(--fg);border-color:var(--fg-3)}

/* ---------- hero ---------- */
.hero{background:var(--bg-2);border-bottom:1px solid var(--rule);padding-block:clamp(2rem,6vw,4rem)}
.hero-grid{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr}
@media (min-width:56rem){.hero-grid{grid-template-columns:1.15fr .85fr}}
.lede{font-size:1.2rem;color:var(--fg-2);max-width:34rem}
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:.7rem}

/* ---------- cards ---------- */
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.3rem 1.35rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem}
.card h3{margin:0;font-size:1.15rem}
.card p{margin:0;font-size:.96rem;color:var(--fg-3)}
a.card{text-decoration:none}
a.card:hover{border-color:var(--accent)}
a.card h3{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.card .ico{color:var(--accent)}

/* ---------- callouts ---------- */
.box{border:1px solid var(--rule);border-left-width:5px;border-radius:10px;
  padding:1.1rem 1.25rem;margin:1.8rem 0;background:var(--surface)}
.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}
.box h2,.box h3,.box h4{margin-top:0}
.box p,.box li{max-width:none}
.box-safety{border-color:var(--alert-line);border-left-color:var(--alert);background:var(--alert-soft)}
.box-safety h2,.box-safety h3,.box-safety h4{color:var(--alert)}
.box-calm{border-color:var(--teal-line);border-left-color:var(--teal);background:var(--teal-soft)}
.box-calm h2,.box-calm h3,.box-calm h4{color:var(--teal)}
.box-note{border-color:var(--amber-line);border-left-color:var(--amber);background:var(--amber-soft)}
.box-note h2,.box-note h3,.box-note h4{color:var(--accent)}

/* ---------- steps ---------- */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:1.5rem 0}
ol.steps>li{counter-increment:s;position:relative;padding:0 0 1.4rem 3.2rem;margin:0}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:-.1rem;width:2.2rem;height:2.2rem;
  display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--bg);
  font-weight:700;font-size:.95rem;font-family:var(--sans)}
ol.steps>li::after{content:"";position:absolute;left:1.1rem;top:2.3rem;bottom:.15rem;width:2px;background:var(--amber-line)}
ol.steps>li:last-child{padding-bottom:0}
ol.steps>li:last-child::after{display:none}
ol.steps>li strong:first-child{display:block;color:var(--fg);font-size:1.03rem}

/* ---------- lists ---------- */
ul.ticks,ul.crosses{list-style:none;padding:0;margin:1.1rem 0}
ul.ticks li,ul.crosses li{position:relative;padding-left:1.9rem;margin-bottom:.6rem}
ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--teal);font-weight:700}
ul.crosses li::before{content:"✕";position:absolute;left:0;top:0;color:var(--alert);font-weight:700}

/* ---------- details / accordion ---------- */
details{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  padding:0 1.15rem;margin:.7rem 0}
details[open]{padding-bottom:.4rem}
summary{cursor:pointer;padding:.95rem 0;font-weight:640;color:var(--fg);list-style:none;
  display:flex;gap:.6rem;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-family:var(--sans);color:var(--accent);font-weight:700;
  font-size:1.25rem;line-height:1.2;flex:none}
details[open] summary::before{content:"−"}
summary:hover{color:var(--link)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
caption{text-align:left;padding:.9rem 1rem;color:var(--fg-3);font-size:.9rem;border-bottom:1px solid var(--rule)}
th,td{text-align:left;padding:.72rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{background:var(--bg-2);font-size:.83rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-3)}
tbody tr:last-child td{border-bottom:0}

/* ---------- support directory ---------- */
.org{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:1.25rem 1.35rem;margin:1rem 0}
.org h3{margin:0 0 .35rem;font-size:1.18rem}
.org .meta{font-size:.85rem;color:var(--fg-3);margin:0 0 .6rem}
.org .tel{font-size:1.22rem;font-weight:700;font-family:var(--sans);color:var(--fg);display:block;margin:.35rem 0 .1rem}
.org .tel a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:.06em;white-space:nowrap}
.org .tel a:hover{text-decoration-thickness:.14em}
.org .hours{font-size:.9rem;color:var(--fg-3);margin:0 0 .6rem}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:.2rem .5rem;border-radius:5px;background:var(--bg-2);color:var(--fg-3);border:1px solid var(--rule);margin-right:.3rem}
.tag-free{background:var(--teal-soft);color:var(--teal);border-color:var(--teal-line)}
.tag-247{background:var(--amber-soft);color:var(--accent);border-color:var(--amber-line)}

/* ---------- figures ---------- */
figure{margin:1.8rem 0}
figure svg{display:block;width:100%;height:auto;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius)}
figcaption{font-size:.88rem;color:var(--fg-3);margin-top:.6rem;max-width:var(--measure)}

/* ---------- source citations ---------- */
.src{font-size:.85rem;color:var(--fg-3)}
.sources{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-top:3rem}
.sources h2{margin:0 0 .6rem;font-size:1.1rem;font-family:var(--sans)}
.sources ul{margin:0;padding-left:1.1rem;font-size:.92rem}
.sources li{margin-bottom:.35rem;color:var(--fg-3)}
.updated{font-size:.85rem;color:var(--fg-3);margin-top:.4rem}

/* ---------- on this page ---------- */
.toc{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--radius);padding:1.1rem 1.35rem;margin:2rem 0}
.toc h2{margin:0 0 .5rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);color:var(--fg-3)}
.toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem}
@media (max-width:40rem){.toc ol{columns:1}}
.toc li{margin-bottom:.3rem;font-size:.95rem;break-inside:avoid}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-2);border-top:1px solid var(--rule);padding-block:2.5rem;margin-top:4rem}
.foot-grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.site-foot h2{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);
  color:var(--fg-3);margin:0 0 .6rem}
.site-foot ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.site-foot li{margin-bottom:.35rem}
.site-foot .fine{font-size:.85rem;color:var(--fg-3);margin-top:2rem;border-top:1px solid var(--rule);padding-top:1.3rem;max-width:none}

/* ---------- emergency strip ---------- */
.emergency{background:var(--alert-soft);border-bottom:1px solid var(--alert-line)}
.emergency p{margin:0;padding-block:.65rem;font-size:.93rem;color:var(--fg-2);max-width:none}
.emergency strong{color:var(--alert)}

@media print{
  /* Force a light, high-contrast palette: a stored dark theme otherwise printed
     pale grey text and invisible phone numbers onto white paper. */
  :root, :root[data-theme="dark"], :root[data-theme="light"]{
    --bg:#fff; --bg-2:#fff; --surface:#fff;
    --fg:#000; --fg-2:#1a1a1a; --fg-3:#444;
    --rule:#999; --link:#000; --link-visited:#000;
    --accent:#000; --alert:#000; --teal:#000;
    --amber-soft:#fff; --teal-soft:#fff; --alert-soft:#fff; --amber-line:#999;
  }
  .site-head,.theme-toggle,.toc,.skip{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  p,li,td,th{color:#000}
  a{color:#000}
  /* Print the source URLs, but not tel: or in-page anchors: the directory has 46
     phone links and printed "0808 802 6869 (tel:08088026869)" every time. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}
  a[href^="tel:"]::after,a[href^="#"]::after{content:""}
  /* Counters are white-on-amber on screen, so they printed white on white. */
  ol.steps>li::before{background:#fff;color:#000;border:1.5px solid #000}
  ol.steps>li::after{background:#999}
  /* Collapsed detail is real content; print it. */
  details>*{display:block}
  summary::before{content:""}
  /* Boxes are distinguished only by colour, which a mono printer loses. */
  .box{border:1px solid #000;border-left-width:4px}
  .box-safety h2::before,.box-safety h3::before,.box-safety h4::before{content:"Safety: "}
  .org,.box,figure,.tablewrap,details{break-inside:avoid}
  h2,h3{break-after:avoid}
  /* Keep the urgent numbers: they were hidden with the rest of the footer. */
  .site-foot{display:block;border-top:1px solid #000}
  .foot-grid>div:not(:nth-child(3)){display:none}
}

/* ---------- related pages ---------- */
.related{margin-top:3rem}
.related h2{margin:0 0 .2rem;font-size:1.15rem;font-family:var(--sans)}

/* ---------- breadcrumbs ---------- */
.crumbs{margin:0 0 1.2rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .5rem;margin:0;padding:0;font-size:.88rem}
.crumbs li{color:var(--fg-3)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--fg-3);opacity:.6}
.crumbs a{color:var(--fg-3)}
.crumbs [aria-current="page"]{color:var(--fg-2);font-weight:600}

/* ---------- in-section menu ---------- */
.subnav{margin:3rem 0 0;background:var(--bg-2);border:1px solid var(--rule);
  border-radius:var(--radius);padding:1.1rem 1.35rem}
.subnav h2{margin:0 0 .6rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--sans);color:var(--fg-3)}
.subnav ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.subnav li{margin:0}
.subnav a{display:block;padding:.4rem .6rem;border-radius:8px;text-decoration:none;
  color:var(--link);font-size:.95rem}
.subnav a:hover{background:var(--surface);text-decoration:underline}
.subnav a[aria-current="page"]{background:var(--surface);color:var(--fg);font-weight:650}
.subnav a[aria-current="page"]::before{content:"You are here: ";font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);display:block}

/* ---------- previous / next ---------- */
.prevnext{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;margin:2.5rem 0 0}
.prevnext a{flex:1 1 14rem;background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;padding:.8rem 1rem;text-decoration:none;color:var(--link);font-weight:600}
.prevnext a:hover{border-color:var(--accent)}
.prevnext a span{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);font-weight:700;margin-bottom:.15rem}
.prevnext .next{text-align:right}

/* ---------- "what is happening tonight" router ---------- */
.router{margin:0 0 2.5rem}
.router h2{margin:0 0 .8rem;font-size:1.1rem;font-family:var(--sans)}
.router ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.router li{margin:0}
.router a{display:block;background:var(--surface);border:1px solid var(--rule);
  border-left:5px solid var(--accent);border-radius:10px;padding:.85rem 1.05rem;
  text-decoration:none;color:var(--fg);font-weight:640;font-size:1.02rem;line-height:1.35}
.router a:hover{border-color:var(--accent);background:var(--amber-soft)}
.router a small{display:block;font-weight:450;font-size:.88rem;color:var(--fg-3);margin-top:.15rem}
.router a.urgent{border-left-color:var(--alert)}
.router a.urgent:hover{background:var(--alert-soft)}

/* ---------- answer-first summary ---------- */
/* Deliberately neutral, not one of the three semantic box colours: this block can
   carry a safety rule or a reassurance, and it must not miscolour its own content. */
.tldr{background:var(--bg-2);border:1px solid var(--rule);border-left:5px solid var(--fg);
  border-radius:10px;padding:1.05rem 1.25rem;margin:0 0 2rem}
.tldr h2{margin:0 0 .5rem;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--sans);color:var(--fg-2)}
.tldr li::marker{color:var(--fg-3)}
.tldr ul{margin:0;padding-left:1.15rem}
.tldr li{margin-bottom:.4rem;color:var(--fg-2)}
.tldr li:last-child{margin-bottom:0}
.tldr li strong{color:var(--fg)}
.tldr p{margin:.6rem 0 0;font-size:.88rem;color:var(--fg-3);max-width:none}

/* ---------- page length hint ---------- */
.readtime{font-size:.85rem;color:var(--fg-3);margin:-.4rem 0 1.4rem}
.readtime::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
  background:var(--accent);margin-right:.45rem;vertical-align:.05em}