/* ============================================================
   LIHTC Leaders — shared styles
   Tokens + chrome (header, footer, eyebrow, base type, motion).
   Linked by every page. Page-specific CSS stays inline per page.
   Fonts are self-hosted via /assets/fonts/fonts.css.
   ============================================================ */
:root{
  color-scheme:light;
  --ink:#0B1B2B; --mute:#5A6B7C; --body:#33424F; --blue:#255BE3; --blue-dark:#1A41A6;
  --blue-wash:#E9EEFC; --paper:#FFFFFF; --paper-2:#F7F6F2; --line:#E3E1DA;
  --on-dark:#D5DEE8; --on-dark-mute:#9AA8B8; --on-dark-accent:#7FA3E0; --on-dark-accent-2:#9DBCE6;
  --gold:#F0B429; --gold-ink:#8A5A00;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  --s6:96px;
  --measure:66ch;
  --edge:24px;
  --nav-h:66px;                     /* design exports: min-height 66 + 8px padding-block */
  --max:1200px;
  --t-3xl:clamp(38px,5.4vw,64px);   /* hero h1 — unified hero size */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--edge)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  display:block;margin-bottom:var(--s3);
}
h2{
  font-family:'Newsreader',Georgia,serif;font-weight:600;
  font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.008em;
  text-align:left;max-width:24ch;
}
h1,h2{text-wrap:pretty}

/* ---------- section header block ----------
   The eyebrow + h2 + optional lede/sub that opens a section. Two tiers:
   the supporting line sits TIGHT under the headline (--s3), the whole block
   stands OFF the content below it (--s5). Before this existed every section
   set its own margins and the gap after a headline ranged 0-40px, while the
   gap before the content ranged 26-78px. Page-level rules may still set
   alignment and max-width; they should not set these margins. */
.section-head{margin-bottom:var(--s5)}
.section-head h2{margin-bottom:0}
.section-head h2 + *{margin-top:var(--s3)}
.section-head p + p{margin-top:var(--s3)}
.section-head > :last-child{margin-bottom:0}
/* A header whose content block OPENS WITH PROSE keeps the tight tier. A line of
   body copy under a headline is the same relationship whether it sits inside the
   header or inside the content — the gap should not depend on which. */
.section-head.leads-prose{margin-bottom:var(--s3)}
/* A header block with nothing after it (the .faq pointer sections are a header
   and nothing else) has no content to stand off from — the after-gap would just
   stack on the section's own bottom padding. */
.section-head:last-child{margin-bottom:0}

/* ---------- table label ----------
   Names the thing a table or list enumerates. NOT an .eyebrow: an eyebrow opens
   a section (blue, announcing), this labels a column (grey, furniture). Using an
   eyebrow here makes the table read as a second section starting. */
.table-label{
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  display:block;margin-bottom:14px;
}
/* When a table carries a label, the label + its own margin already add ~34px, so a
   full --s5 after the header pushes the table's rule 98px off the copy. Measure the
   separation to the TABLE, not to its label. The label still sits far closer to the
   table (14px) than to the copy, so it reads as part of the table. */
.section-head:has(+ .table-label){margin-bottom:var(--s4)}
.sub,.lede,.whysub,.pissub{text-wrap:pretty}

/* ---------- skip link (a11y) ----------
   Keyboard and screen-reader users otherwise have to tab through the whole nav on
   every page. Off-screen until focused, then pinned top-left.
   Wired up on all 12 pages as of 2026-08. Any NEW page needs two things:
     1. <a class="skip-link" href="#main">Skip to main content</a>  as the first
        child of <body> — before any decorative element (e.g. .read-progress on the
        article pages), so it's the first thing a Tab press reaches.
     2. id="main" on that page's <main>.
   The two generated pages get this from their generators
   (AI/Tools/conference-directory/build.py, AI/Tools/qap-directory/build.py) — edit
   the generator, never the output HTML. conference-directory's validate.py fails the
   build if either half goes missing. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 18px;
  font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;font-weight:600;
  border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* ---------- header / nav ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-h);padding-block:8px}
.wordmark{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:18px;letter-spacing:-.003em;color:var(--ink)}
.wordmark span{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500}
.nav-links a{color:var(--ink)}
.nav-links a:hover{color:var(--blue)}
.nav-links a.nav-cta{font-size:15px;font-weight:600;padding:9px 18px;background:var(--blue);color:#fff;border:1px solid var(--blue)}
.nav-links a.nav-cta:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.takeover{position:fixed;inset:0;background:var(--ink);z-index:90;display:none;flex-direction:column;justify-content:center;padding:40px 28px;gap:6px}
.takeover.open{display:flex}
.takeover a{font-family:'Newsreader',Georgia,serif;font-size:30px;font-weight:600;color:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.takeover a:hover{color:var(--on-dark-accent)}
/* takeover sub-items (Library children) — smaller, indented, hairline rule kept */
.takeover a.takeover-sub{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:17px;font-weight:500;color:var(--on-dark);padding:9px 0 9px 20px;border-bottom-color:rgba(255,255,255,.08)}
.takeover a.takeover-sub:hover{color:var(--on-dark-accent)}
body.menu-open{overflow:hidden}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){.nav-links{display:none}.burger{display:block}}

/* ---------- entry motion (one device, restrained) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--on-dark-mute);padding:var(--s5) 0 0;font-size:14px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(150px,max-content));gap:56px;align-items:start}
footer .wordmark{color:#fff;font-size:18px;font-family:'Newsreader',Georgia,serif;font-weight:600}
footer .wordmark span{color:var(--on-dark-accent)}
.foot-dek{margin:12px 0 0;color:#8696A6;line-height:1.5;max-width:38ch}
.foot-dek-2{display:block;margin-top:6px}

/* ---------- reading-progress bar (long-form articles) ---------- */
.read-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:200;background:transparent;pointer-events:none}
.read-progress span{display:block;height:100%;width:0;background:var(--blue)}
@media(prefers-reduced-motion:no-preference){.read-progress span{transition:width .1s linear}}
footer h4{font-family:'IBM Plex Mono',monospace;color:#fff;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer ul a{color:#C3CDD8}
footer ul a:hover{color:#fff}
.foot-bottom{margin-top:48px;border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#75858F}
.foot-bottom a{color:var(--on-dark-mute)}
.foot-bottom a:hover{color:#fff}
@media(max-width:680px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-grid > div:nth-child(1){grid-column:1 / -1}          /* brand */
  .foot-grid > div:nth-child(2){grid-column:1;grid-row:2}    /* Platform */
  .foot-grid > div:nth-child(4){grid-column:2;grid-row:2}    /* Company  */
  .foot-grid > div:nth-child(3){grid-column:1 / -1;grid-row:3} /* Partner */
}

/* ---------- cookie consent banner (injected by app.js) ---------- */
/* With the takeover open the translucent header turned muddy over the navy, and the
   consent banner covered the lower nav items. Fix both while body.menu-open is set. */
body.menu-open header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
body.menu-open .cookie-banner{display:none}
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:760px;margin:0 auto;background:var(--ink);color:#C3D0DD;border:1px solid rgba(255,255,255,.14);padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.cookie-text{font-size:14px;line-height:1.5;flex:1 1 320px;margin:0}
.cookie-text a{color:var(--on-dark-accent);text-decoration:underline}
.cookie-actions{display:flex;gap:8px;flex:0 0 auto}
.cookie-btn{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;font-weight:600;padding:9px 18px;cursor:pointer;border:1px solid transparent}
.cookie-accept{background:var(--blue);color:#fff;border-color:var(--blue);min-height:44px}
@media(max-width:640px){.cookie-banner{padding:14px 16px;gap:12px}
  .cookie-banner p{font-size:13.5px;line-height:1.5}}
.cookie-accept:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.cookie-decline{background:transparent;color:#C3D0DD;border-color:rgba(255,255,255,.3)}
.cookie-decline:hover{border-color:#fff;color:#fff}
.cookie-btn:focus-visible{outline:2px solid var(--on-dark-accent);outline-offset:2px}
@media(max-width:560px){.cookie-banner{flex-direction:column;align-items:stretch}.cookie-text{flex:0 1 auto}.cookie-actions{justify-content:flex-end}}

/* ---------- rounded controls (buttons + capture forms) ---------- */
.nav-cta,.btn,.btn-ghost,.btn-white,.btn-ghost-white,.cta-solid,.ghost,.solid,.lib-btn-secondary,.lib-chip,.cookie-btn{border-radius:8px}
/* joined email-capture groups: round the outer corners only */
.mockform input,.sub-form input{border-radius:8px 0 0 8px}
.mockform button,.sub-form button{border-radius:0 8px 8px 0}
@media(max-width:560px){
  .mockform,.sub-form{gap:8px}
  .mockform input,.sub-form input{border-radius:8px;border-right:1px solid var(--ink)}
  .mockform button,.sub-form button{border-radius:8px}
}

/* ---------- nav dropdown (Partner with us) ---------- */
.nav-dd{position:relative;display:inline-flex;align-items:center;align-self:stretch}
.nav-dd-btn{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;font-weight:500;color:var(--ink);background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;align-self:stretch}
.nav-dd-btn:hover{color:var(--blue)}
.nav-dd-caret{display:inline-block;transition:transform .15s ease}
.nav-dd.open .nav-dd-btn{color:var(--blue)}
.nav-dd.open .nav-dd-caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:242px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 44px rgba(11,27,43,.16);padding:8px;display:none;flex-direction:column;gap:2px;z-index:70}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{display:flex}
.nav-dd-menu a{font-size:14px;font-weight:500;color:var(--ink);padding:10px 12px;border-radius:6px;white-space:nowrap}
.nav-dd-menu a:hover{background:var(--blue-wash);color:var(--blue)}

/* current page — set by app.js, not per-page markup */
.nav-links a.is-current,.nav-dd-btn.is-current{color:var(--blue)}
.nav-dd-menu a.is-current{color:var(--blue);background:var(--blue-wash)}
.takeover a.is-current{color:var(--on-dark-accent)}