/* key-ideas.css — extracted from page-key-ideas.php in 1.2.0.
   A <style> element is metadata content and belongs in <head>; inside <main>
   it is invalid, and it also cannot be cached. Enqueued conditionally from
   functions.php. */
.ki-hero{padding:7rem 2rem 4rem;background:var(--navy-deep);}
.ki-subnav{position:sticky;top:64px;z-index:100;background:rgba(12,26,46,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--navy-border);padding:0 2rem;}
.ki-subnav__inner{max-width:var(--max-w);margin:0 auto;display:flex;gap:0;overflow-x:auto;}
.ki-link{font-family:var(--font-ui);font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;padding:0.9rem 1.2rem;border-bottom:2px solid transparent;transition:color var(--transition),border-color var(--transition);}
.ki-link:hover{color:var(--cream);border-color:var(--gold-dim);}
.mech-section{padding:5rem 2rem;scroll-margin-top:120px;}
.mech-section:nth-child(odd){background:var(--navy-section);}
.mech-section:nth-child(even){background:var(--navy-mid);}
.mech-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
/* The ordinal is a watermark, not content: the card's own heading carries the
   meaning and the order is already in the document. It is supplied by the
   stylesheet through a data attribute so that it stays out of the accessibility
   tree, where a 12 percent tint would otherwise read as unreadable text. */
.mech-num{font-family:var(--font-display);font-size:8rem;font-weight:300;color:rgba(201,168,76,0.08);line-height:0.8;margin-bottom:-2rem;user-select:none;}
.mech-num::before{content:attr(data-num);}
.domain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem;}
.domain-item{background:var(--navy-card);border:1px solid var(--navy-border);padding:1.5rem;border-radius:var(--radius);}
.domain-item__num{font-family:var(--font-display);font-size:1.5rem;color:var(--gold-dim);font-weight:300;margin-bottom:0.3rem;}
.domain-item__title{font-family:var(--font-display);color:var(--cream);font-size:1.05rem;margin-bottom:0.5rem;}
.domain-item__body{font-family:var(--font-ui);font-size:0.88rem;color:var(--text-muted);line-height:1.7;}
.principle-item{display:grid;grid-template-columns:80px 1fr;gap:2rem;padding:2.5rem 0;border-bottom:1px solid var(--navy-border);}
.principle-item:last-child{border-bottom:none;}
.principle-num{font-family:var(--font-display);font-size:2.5rem;font-weight:300;color:var(--gold-dim);line-height:1;}
@media(max-width:900px){.mech-inner{grid-template-columns:1fr;gap:2rem;}.domain-grid{grid-template-columns:1fr;}.principle-item{grid-template-columns:48px 1fr;gap:1rem;}}

/* Promoted from <h4> to <h3> in 1.2.0 so the outline no longer skips a level.
   The appearance is unchanged: these are the h4 rules, applied by class. */
.research-subhead{font-family:var(--font-ui);font-size:1.2rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem;}
