/* Page CSS for page-key-ideas.php
   Extracted from an inline <style> block that sat inside <main>, which is
   invalid HTML. 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(250,246,235,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(164,124,27,0.08);line-height:0.8;margin-bottom:-2rem;user-select:none;}
.mech-num::before{content:attr(data-num);}
.mech-aside{background:var(--navy-card);border:1px solid var(--navy-border);border-left:3px solid var(--gold);padding:2rem;border-radius:var(--radius);}
.mech-aside__label{font-family:var(--font-ui);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:0.75rem;}
.mech-aside p{font-family:var(--font-display);font-size:1.15rem;color:var(--cream);font-style:italic;line-height:1.6;margin-bottom:1rem;}
.mech-aside small{font-family:var(--font-ui);font-size:0.85rem;color:var(--text-muted);}
.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;}}