/* AXION Design Tokens v1.1 - extracted from design.md + pages&spacing.md + AGENTS.md */
:root {
  /* Palette - Command Navy system */
  --navy-deep: #041225;
  --navy-command: #07182E;
  --navy-panel: #0B213A;
  --navy-overlay: rgba(4, 18, 37, 0.72);
  --gold: #C99A2E;
  --gold-highlight: #E0B44C;
  --gold-muted: rgba(201, 154, 46, 0.75);
  --champagne: #F0D9A0;
  --white: #F4F5F3;
  --silver: #AEB7C4;
  --silver-dim: #8A95A8;
  --border-gold: rgba(201,154,46,0.70);
  --line-gold: rgba(201,154,46,0.45);

  /* Typography - Times New Roman system */
  --font-heading: "Times New Roman", Times, Georgia, serif;
  --font-body: "Times New Roman", Times, Georgia, serif;
  --tracking-label: 0.14em;
  --tracking-cover: 0.03em;

  /* Scale - fluid — audit 2026-08-25: h1 tightened to 60-78px spec (Times 900 -0.015em) */
  --text-label: clamp(0.75rem, 0.7rem + 0.25vw, 0.9rem);
  --text-body: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  --text-card: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --text-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --h1: clamp(3.75rem, 2rem + 3vw, 4.875rem); /* 60px → 78px per Track D audit */
  --h2: clamp(1.9rem, 1.4rem + 2vw, 3.2rem);
  --h2-thesis: clamp(2.6rem, 1.8rem + 2.8vw, 4.2rem);
  --h3: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --metric: clamp(2.2rem, 1.6rem + 2vw, 3.6rem);

  /* Spacing - 8px base */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;

  /* Layout */
  --max-w: 1536px;
  --safe-x: 64px;
  --gutter: 24px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --nav-h: 84px;
}

/* Reset + base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s-2)}
body{
  margin:0;background:var(--navy-deep);color:var(--white);
  font-family:var(--font-body);font-size:var(--text-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}

/* Gold utilities */
.gold{color:var(--gold)}
.gold-h{color:var(--gold-highlight)}
.rule{height:2px;background:var(--gold);width:72px;margin:var(--s-2) 0 var(--s-3)}
.rule.center{margin-inline:auto}

/* Section label */
.eyebrow{
  font-size:var(--text-label);font-weight:600;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold);margin:0 0 var(--s-1);
}
.lede{color:var(--silver);font-size:var(--text-lead);line-height:1.45;max-width:62ch}
.fine{color:var(--silver-dim);font-size:0.92rem}
.quote{font-family:var(--font-heading);font-style:italic;font-size:1.35rem;line-height:1.35;color:var(--white)}
.quote::before{content:'\201C';color:var(--gold);font-size:2.2rem;line-height:0;vertical-align:-0.35em;margin-right:6px}

/* Navbar — moved to css/burger.css as single source (Track B). Keep brand base only. */
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:0.08em}
.brand img{height:28px;width:auto;filter:brightness(1.1)}

/* Hero / sections */
.section{padding:var(--s-8) var(--safe-x) var(--s-10);max-width:var(--max-w);margin:0 auto}
.section.dark{background:var(--navy-command)}
.section.deep{background:var(--navy-deep)}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-5{grid-column:span 5} .col-12{grid-column:span 12}

/* Mobile-fix 2026-08-25: grid items must not inherit min-width:auto —
   otherwise intrinsic image widths (srcset 600-1536px) inflate the collapsed
   single-column track on small screens and force horizontal overflow. */
.grid-12>*,.cover-split>*,.four-cards>*,.hub-grid>*,.office-grid>*,.leadership-grid>*,.sustain-cards>*{min-width:0}
.card[style*="grid-template-columns"]>*{min-width:0}
.hero-media,.card{max-width:100%}

/* Cards */
.card{
  background:var(--navy-panel);border:1.5px solid var(--border-gold);border-radius:var(--radius);
  padding:var(--s-3);position:relative;overflow:hidden;
}
.card.ghost{background:rgba(11,33,58,0.55)}
.stat{display:flex;align-items:baseline;gap:10px}
.stat b{font-family:var(--font-heading);font-size:var(--metric);color:var(--white);line-height:1}
.stat span{font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold)}

/* Image treatment */
.hero-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid var(--border-gold)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.angular-mask{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
@media(max-width:620px){.angular-mask{clip-path:none !important}}
@media(min-width:900px){.angular-mask{clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}}
.navy-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(4,18,37,0.82) 0%, rgba(4,18,37,0.22) 55%, transparent 100%)}

/* 4-col cards */
.four-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media(max-width:1100px){.four-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.four-cards{grid-template-columns:1fr}}

/* Division pillars */
.pillars{display:flex;flex-wrap:wrap;gap:10px}
.pillar{border:1px solid var(--border-gold);color:var(--gold);padding:8px 14px;border-radius:999px;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;background:rgba(201,154,46,0.08)}

/* Timeline / roadmap */
.timeline{border-left:2px solid var(--line-gold);padding-left:var(--s-3);display:grid;gap:var(--s-4)}
.timeline article{position:relative}
.timeline article::before{content:'';position:absolute;left:calc(-1*var(--s-3) - 7px);top:6px;width:12px;height:12px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 4px rgba(201,154,46,0.18)}
.year{color:var(--gold);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;font-size:0.85rem}

/* Chart bars */
.chart{display:flex;align-items:end;gap:14px;height:220px;padding:var(--s-3);background:var(--navy-panel);border:1.5px solid var(--border-gold);border-radius:var(--radius)}
.bar{flex:1;background:linear-gradient(180deg,var(--gold-highlight),var(--gold));border-radius:8px 8px 0 0;position:relative;min-height:40px}
.bar.b1{height:38%} .bar.b2{height:62%} .bar.b3{height:92%}
.bar::after{content:attr(data-value);position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-size:0.8rem;font-weight:700;white-space:nowrap;color:var(--white)}
.bar span{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:0.72rem;letter-spacing:0.08em;color:var(--silver)}

/* Footer */
.footer{border-top:1px solid var(--line-gold);padding:var(--s-4) var(--safe-x);display:flex;justify-content:space-between;gap:var(--s-3);color:var(--silver);font-size:0.85rem;flex-wrap:wrap}
.footer a{color:var(--silver)} .footer a:hover{color:var(--gold)}

/* Responsive - dynamic view any screen size */
@media(max-width:900px){
  :root{--safe-x:16px}
  html{scroll-padding-top:18px}
  .grid-12{grid-template-columns:1fr}
  .col-6,.col-7,.col-5{grid-column:span 1}
  .section{padding:var(--s-4) var(--safe-x) var(--s-6) !important}
  .cover-split{grid-template-columns:1fr !important;min-height:auto !important}
  .cover-left{padding:20px var(--safe-x) !important}
  .cover-right{height:360px !important;min-height:360px !important}
  .four-cards{grid-template-columns:1fr 1fr !important;gap:12px !important}
  .hub-grid{grid-template-columns:1fr 1fr !important}
  .office-grid{grid-template-columns:1fr !important}
  .leadership-grid{grid-template-columns:1fr !important}
  .leader{grid-column:auto !important}
  .sustain-cards{grid-template-columns:1fr 1fr !important}
  #roadmap3d{height:380px !important}
  .hero-media{height:280px !important}
}
@media(max-width:620px){
  .four-cards{grid-template-columns:1fr !important}
  .hub-grid{grid-template-columns:1fr !important}
  .sustain-cards{grid-template-columns:1fr !important}
  /* nav pill sizing handled in burger.css */
  .navbar .brand img{height:36px !important}
  #roadmap3d{height:320px !important}
}
@media(max-width:380px){
  .section{padding-left:12px !important;padding-right:12px !important}
}
/* RTL overrides - Track A4 */
[dir="rtl"] .cover-split{ direction:rtl; }
[dir="rtl"] .cover-left{ text-align:right; }
[dir="rtl"] .angular-mask{ clip-path:polygon(0 0,88% 0,100% 100%,0 100%); }
@media(min-width:900px){ [dir="rtl"] .angular-mask{ clip-path:polygon(0 0,86% 0,100% 100%,0 100%); } }
[dir="rtl"] .timeline{ border-left:none; border-right:2px solid var(--line-gold); padding-left:0; padding-right:var(--s-3); }
[dir="rtl"] .timeline article::before{ left:auto; right:calc(-1*var(--s-3) - 7px); }
[dir="rtl"] .navbar{ direction:rtl; }
[dir="rtl"] .nav-links{ direction:rtl; }
[dir="rtl"] .eyebrow, [dir="rtl"] .lede, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p{ text-align:right; }
[dir="rtl"] .rule{ margin-left:auto; margin-right:0; }