/* ================================================================
   Design system — v2 hybrid site chrome
   ----------------------------------------------------------------
   Layout primitives that v2 hybrid templates opt into. Nothing
   here applies until a template emits one of these classes, so
   it is safe to load globally before any template conversion.

   Depends on:
     typography.css   (warm-stone tokens, Bootstrap palette aliases)
     tokens-extras.css (DC sub-palette, --pattern-* url() vars)

   Load order:  styles.css → typography.css → tokens-extras.css
                → site-chrome.css
   ================================================================ */

/* No global resets here.
   Bootstrap 5's reboot already handles box-sizing, body margin,
   and max-width:100% on images. Re-declaring them only invites
   specificity races. */

/* ── Compact sticky site head (alt nav for v2 templates) ─────── */
.site-head{border-bottom:1px solid var(--border-light);padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--surface-primary);position:sticky;top:0;z-index:20}
.site-head .wordmark{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-.015em;margin:0}
.site-head .wordmark em{font-style:italic;font-weight:400}
.site-head .wordmark a{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.site-head .wordmark .site-logo{height:32px;width:auto;max-width:200px;display:block}
.site-head .site-nav{display:flex;gap:22px;align-items:center}
.site-head .site-nav a{font-family:var(--font-body);font-weight:400;font-size:14px;color:var(--text-primary);text-decoration:none;letter-spacing:.01em}
.site-head .site-nav a.is-current{font-weight:600;border-bottom:1px solid var(--text-primary)}
.site-head .site-nav .search-ico{font-family:var(--font-body);font-size:14px;color:var(--text-secondary);cursor:pointer;background:none;border:0;padding:0}

/* ── Standard page header (text-led, used on every secondary
   page — Blog landing / Authors / Contact / Content / Search /
   Topic / 404 / Empty states. Articles continue to use the
   image-led .masthead from pageHeader.cshtml — see
   MASTHEAD-DECISION.md.) ─────────────────────────────────────── */
.page-head{padding:72px 32px 56px;text-align:left;border-bottom:1px solid var(--border-light);background:var(--surface-primary);position:relative;overflow:hidden}
.page-head .inner{max-width:1160px;margin:0 auto;position:relative;z-index:1}
.page-head .eye{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 18px}
.page-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.5rem, calc(1.8rem + 2.5vw), 4rem);line-height:1.03;letter-spacing:-.02em;margin:0 0 16px;max-width:22ch}
.page-head h1 em{font-style:italic;font-weight:300}
.page-head .dek{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.1rem, calc(1rem + .4vw), 1.375rem);line-height:1.4;color:var(--text-secondary);margin:0;max-width:48ch}
.page-head .rule{width:48px;height:1px;background:var(--accent-primary);margin:28px 0 0}

/* Optional pattern variants — opt in per page in the CMS. */
.page-head.has-pattern-scatter::before{content:"";position:absolute;inset:0;background-image:var(--pattern-scatter);background-size:cover;background-position:left center;background-repeat:no-repeat;opacity:.5;mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 82%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 82%);pointer-events:none}
.page-head.has-pattern-stochastic{background-image:var(--pattern-stochastic);background-size:220px 220px;background-repeat:repeat;background-color:var(--surface-secondary)}

/* ── v2 footer (alt to the existing .site-footer) ─────────────── */
.foot{padding:56px 32px 40px;background:var(--surface-primary);border-top:1px solid var(--border-light)}
.foot-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;align-items:start}
.foot h4{font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--text-secondary);margin:0 0 10px}
.foot .fm{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:-.015em;margin:0 0 8px}
.foot .fm em{font-style:italic;font-weight:400}
.foot .fm a{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.foot .fm .footer-logo{width:130px;max-width:130px;height:auto;max-height:80px;display:block}
.foot .col p,.foot .col a{font-family:var(--font-body);font-size:13px;line-height:1.6;color:var(--text-secondary);display:block;text-decoration:none}
.foot .colophon{grid-column:1/-1;padding-top:32px;margin-top:24px;border-top:1px solid var(--border-light);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}

/* ── Common layout helpers ─────────────────────────────────── */
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 32px}

/* .visually-hidden is provided by Bootstrap reboot in styles.css
   with !important. Not redeclared here to avoid noise. */

@media (max-width:820px){
  .site-head{padding:14px 20px;gap:14px}
  .site-head .site-nav{gap:14px}
  .page-head{padding:48px 22px 36px}
  .foot-inner{grid-template-columns:1fr;gap:28px}
  .wrap,.wrap-narrow{padding:0 22px}
}

/* ── Generic content layout (Content / Documentation templates) ─
   Two-column grid with a sticky section-nav rail on the left and
   the block-list body on the right. Pages without section nav
   collapse to a single narrow column via .content.no-nav.
   Source mock: D-content.html. ────────────────────────────────── */
.content{padding:64px 32px 96px;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:240px 1fr;gap:64px}
.content.no-nav{grid-template-columns:1fr;max-width:780px}

/* Section nav (left rail) */
.section-nav{position:sticky;top:88px;align-self:start;font-family:var(--font-body)}
.section-nav .eye{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--border-light)}
.section-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.section-nav a{display:block;padding:8px 0;font-size:14px;color:var(--text-primary);text-decoration:none;border-left:2px solid transparent;padding-left:12px;margin-left:-14px}
.section-nav a:hover{color:var(--accent-secondary)}
.section-nav a.is-current{border-left-color:var(--accent-primary);font-weight:600;color:var(--text-primary)}
.section-nav li.child a{font-size:13px;color:var(--text-secondary);padding-left:28px;margin-left:-14px}

/* Content body — generic block list rendering */
.c-body{max-width:660px}
.c-body .lede{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1.375rem;line-height:1.45;color:var(--text-primary);margin:0 0 32px;max-width:42ch}
.c-body h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.75rem,1.4rem+1vw,2.25rem);line-height:1.1;letter-spacing:-.01em;margin:2em 0 .4em}
.c-body h2 em{font-style:italic;font-weight:300}
.c-body h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.15;text-transform:none;margin:1.8em 0 .4em}
.c-body p{font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;margin:0 0 1.15em;max-width:36em}
.c-body ul,.c-body ol{font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;margin:0 0 1.15em 1.2em;padding:0}
.c-body ul li,.c-body ol li{margin-bottom:.4em}
.c-body blockquote{margin:2em 0;padding:0 0 0 24px;border-left:2px solid var(--accent-primary);font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1.5rem;line-height:1.3;max-width:34ch}

@media (max-width:820px){
  .content{grid-template-columns:1fr;gap:32px;padding:40px 22px 64px}
  .section-nav{position:static}
}