/* Content pages (Explainers, and the Workflow library that follows).
   Loaded only by the content layout, src/_includes/content.html.

   The header is the first thing to fix: cinematic.css positions it absolutely
   over the homepage's dark hero and paints it white. A content page has no
   hero, so the header has to sit in the flow and go back to ink on paper. */
.content-page .header{position:static;color:var(--ink);background:var(--paper);border-bottom:1px solid var(--line);height:auto;padding:22px 7%;max-width:1440px;margin:auto}
.content-page .header .brand svg{color:var(--copper)}
.content-page .header-cta{border-color:var(--ink)}
.content-page .header nav a:hover{color:var(--copper)}
.content-page .mobile-menu summary{border-color:var(--line)}

/* The page itself: one readable column, not the homepage's full-bleed grid. */
.content-page .content{max-width:820px;margin:auto;padding:70px 7% 90px}
.content-head{padding-bottom:34px;border-bottom:1px solid var(--line)}
.content-head h1{font-size:clamp(2.6rem,5.5vw,4.2rem)}
.content-lede{font-size:1.25rem;line-height:1.5;color:var(--ink);margin-top:24px}
.content-lede em{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400;color:var(--copper)}

.content-block{margin-top:56px}
.content-block h2{font-size:clamp(1.7rem,2.6vw,2.2rem);letter-spacing:-.03em}
.content-block h2+p,.content-block p+p{margin-top:18px}
.content-block p{font-size:1.0625rem}
.content-block .eyebrow{margin-bottom:14px}

.content-glossary{margin:28px 0 0;padding:0}
.content-glossary dt{font-family:Manrope,sans-serif;font-weight:600;font-size:1.0625rem;letter-spacing:-.02em;padding-top:20px;border-top:1px solid var(--line)}
.content-glossary dd{margin:8px 0 20px;color:var(--muted);font-size:1.0625rem}

.content-steps{margin:28px 0 0;padding:0;list-style:none;counter-reset:content-step}
.content-steps li{position:relative;counter-increment:content-step;padding:18px 0 18px 46px;border-bottom:1px solid var(--line);color:var(--muted);font-size:1.0625rem}
.content-steps li:first-child{border-top:1px solid var(--line)}
.content-steps li::before{content:counter(content-step,decimal-leading-zero);position:absolute;left:0;top:20px;font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--copper)}
.content-steps strong{color:var(--ink);font-weight:600}

.content-back{margin-top:30px}
.content-back a{border-bottom:1px solid var(--ink);color:var(--ink);padding-bottom:4px}
.content-back span{margin-left:14px}

@media(max-width:760px){
  .content-page .header{padding:16px 7%}
  .content-page .content{padding:44px 7% 64px}
  .content-lede{font-size:1.0625rem}
  .content-block{margin-top:42px}
}