/* Dawn layer for the data stories, linked straight after each story's own <style> so it wins at
   equal specificity. The story keeps its layout, charts and chapter rail; this file moves type,
   surfaces and colour onto Dawn and seats the rail under the sticky Dawn nav. Chart fills that
   used clay are mapped per page (dusk for areas and bars, amber for marks). */
:root{
  --navh:72px;
  --bg:var(--page);--ink2:var(--ink);--dim:var(--soft);--hair:var(--line);--ghost:var(--tile);
  --body:var(--ink);--panel-text:var(--soft);--panel-body:var(--soft);
  --ink:#1C1D22; /* literal: stories redefine --ink to their own warm black */
  --clay:var(--ink);--clay2:var(--ink);--clay-d:var(--ink);--clay-deep:var(--ink);--clay-light:var(--tile);
}
/* Author ships 300/400/500: render heavier requests as Medium instead of a synthetic bold */
/* a story's html{overflow-x:clip} makes body its own scroller, which strands the sticky nav when
   the menu locks scroll; body keeps the clip */
html{overflow-x:visible}
/* jumps and keyboard focus land below the nav and rail (set on the content, not as html
   scroll-padding, which would scroll the page when focus moves within the header itself) */
section,header.open,header.opener,main :is(a,button,input,[tabindex]),section :is(a,button,input,[tabindex]),.footer a,.foot a{scroll-margin-top:calc(var(--navh) + var(--railh,0px) + 8px)}
body{background-color:var(--page);background-image:none;font-family:var(--f);font-synthesis-weight:none}
h1,h2{font-weight:400;letter-spacing:-.03em}
h3{font-weight:500}

/* the chapter rail sits under the Dawn nav (held to exactly --navh); the nav carries the logo */
body #nav{height:var(--navh)}
#rail{top:var(--navh);z-index:50;background:color-mix(in srgb,var(--page) 94%,transparent);border-bottom:1px solid var(--line)}
#rail{-webkit-backdrop-filter:blur(5px)}
#rail .row{padding-left:var(--gut);padding-right:var(--gut);min-height:calc(var(--railh) - 1px)}
#rail .brand img,#rail .brand > a{display:none}
#rail button,#rail .backbtn{text-transform:none;letter-spacing:0;font-size:var(--t-caption);font-weight:500;color:var(--soft)}
#rail .mark{text-transform:none;letter-spacing:0;font-size:var(--t-caption);font-weight:500;color:var(--ink)}
#rail button.on{color:var(--ink);border-bottom-color:var(--ink)}
#rail button:hover,#rail .backbtn:hover{color:var(--ink)}

/* eyebrows become sentence-case captions, as elsewhere on Dawn */
.eyebrow,.kicker{text-transform:none;letter-spacing:0;font-size:var(--t-caption);font-weight:500;color:var(--soft)}
.chap,.ro .fx{letter-spacing:0}
.footer .fh,.stagename,.card .when,.hs .k,.field label,.ro span,.res span,.tbl th{text-transform:none;letter-spacing:0;font-size:var(--t-caption);font-weight:500}

/* links: ink, underlined */
.byline a,.prose a,.p a,.quiet a,.footer a,.foot a,.cap a,.p-p a,.cta-quiet a,.pcontent .sub a,#tldr a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px;font-weight:inherit}
.prose a:hover,.p a:hover,.quiet a:hover,.footer a:hover,.foot a:hover,.cap a:hover{color:var(--soft)}
:focus-visible{outline-color:var(--ink)}

.menu-open #rail{visibility:hidden}
/* the site footer sits above any fixed story band (e.g. the housing pipeline's vein) */
#dawn-foot{position:relative;z-index:2}
/* the rail follows the nav into its dark state over a dark story section ([data-nav-dark]) */
#rail{transition:background-color .3s,border-color .3s}
#nav.dark ~ #rail{background:color-mix(in srgb,var(--night) 80%,transparent);border-bottom-color:rgba(255,255,255,.14)}
#nav.dark ~ #rail button,#nav.dark ~ #rail .backbtn{color:rgba(244,238,230,.72)}
#nav.dark ~ #rail button.on,#nav.dark ~ #rail .mark,#nav.dark ~ #rail button:hover,#nav.dark ~ #rail .backbtn:hover{color:var(--on-dark)}
#nav.dark ~ #rail button.on{border-bottom-color:var(--amber)}