:root {
  --navy: #071a33;
  --navy-2: #0d2748;
  --blue: #6f9fc8;
  --gold: #c5a15b;
  --gold-light: #e5c77f;
  --ink: #10233a;
  --muted: #65768b;
  --line: #dce5ee;
  --paper: #f7f9fb;
  --white: #ffffff;
  --success: #27855a;
  --danger: #b14c4c;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(7,26,51,.08); backdrop-filter: blur(16px); }
.nav-shell { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px 4px 11px 4px; background: var(--navy); color: var(--gold-light); font-family: Georgia, serif; font-size: 21px; font-weight: 700; box-shadow: 0 5px 14px rgba(7,26,51,.16); }
.brand-copy { display: flex; flex-direction: column; gap: 0; line-height: 1; letter-spacing: .08em; }
.brand-copy strong { color: var(--navy); font-size: 15px; }
.brand-copy small { color: var(--muted); margin-top: 4px; font-size: 7px; font-weight: 700; letter-spacing: .18em; }
.main-nav { display: flex; align-items: center; gap: 30px; color: #4e6075; font-size: 13px; font-weight: 650; }
.main-nav a, .footer-links a { transition: color 180ms var(--ease); }
.main-nav a:hover, .footer-links a:hover { color: var(--gold); }
.market-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #dce7df; border-radius: 999px; color: var(--success); background: #f7fcf8; font-size: 10px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.market-badge i { width: 7px; height: 7px; border-radius: 50%; background: #55b57d; box-shadow: 0 0 0 4px rgba(85,181,125,.14); }

.hero { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr); align-items: center; gap: 70px; padding-top: 104px; padding-bottom: 112px; }
.hero-copy { max-width: 650px; }
.eyebrow { margin: 0 0 14px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 650px; margin-bottom: 24px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(46px, 6vw, 76px); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
h1 em { color: var(--gold); font-style: normal; }
.hero-lede { max-width: 570px; margin-bottom: 33px; color: #60738a; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 47px; padding: 0 19px; border-radius: 7px; font-size: 12px; font-weight: 750; transition: transform 170ms var(--ease), box-shadow 170ms var(--ease), background 170ms var(--ease); }
.button:active { transform: scale(.97); }
.button-primary { background: var(--navy); color: var(--white); box-shadow: 0 10px 20px rgba(7,26,51,.18); }
.button-primary:hover { background: var(--navy-2); box-shadow: 0 13px 26px rgba(7,26,51,.24); }
.button-primary span { color: var(--gold-light); font-size: 19px; line-height: 0; }
.button-quiet { color: #51647a; background: transparent; border: 1px solid #d6e0ea; }
.button-quiet:hover { background: var(--white); border-color: var(--gold); color: var(--navy); }

.hero-panel { position: relative; overflow: hidden; padding: 28px 29px 25px; border: 1px solid rgba(229,199,127,.24); border-radius: 8px; background: var(--navy); color: var(--white); box-shadow: 0 26px 55px rgba(7,26,51,.18); }
.hero-panel::before { content: ""; position: absolute; width: 290px; height: 290px; top: -150px; right: -100px; border: 1px solid rgba(197,161,91,.25); border-radius: 50%; box-shadow: 0 0 0 32px rgba(197,161,91,.035), 0 0 0 64px rgba(197,161,91,.025); }
.panel-label, .ticker-row, .chart-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.panel-label { position: relative; z-index: 1; color: #aabacf; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.status-pill { padding: 5px 8px; border: 1px solid rgba(197,161,91,.45); color: var(--gold-light); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.price-line { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 14px; margin: 28px 0 11px; }
.price-line > span:first-child { color: white; font-family: Georgia, serif; font-size: clamp(47px, 5vw, 63px); letter-spacing: -.06em; line-height: 1; }
.change { font-size: 14px; font-weight: 750; }
.positive { color: #73d3a0; } .negative { color: #ef9292; } .neutral { color: var(--gold-light); }
.ticker-row { position: relative; z-index: 1; color: #90a7be; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.mini-spark { position: relative; z-index: 1; height: 89px; display: grid; place-items: center; margin-top: 23px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); color: #8298ae; font-size: 10px; letter-spacing: .04em; }
.mini-spark::before { content: ""; position: absolute; left: 0; right: 0; top: 52%; border-top: 1px dashed rgba(197,161,91,.35); }
.mini-spark span { position: relative; z-index: 1; padding: 5px 9px; background: var(--navy); }

.market-section { padding-bottom: 105px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
h2 { margin-bottom: 0; color: var(--navy); font-family: Georgia, serif; font-size: 36px; font-weight: 500; letter-spacing: -.04em; }
.section-note { max-width: 320px; margin-bottom: 4px; color: var(--muted); font-size: 12px; line-height: 1.65; text-align: right; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { min-height: 146px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); box-shadow: 0 10px 25px rgba(7,26,51,.035); }
.metric-card.featured { border-color: rgba(197,161,91,.65); box-shadow: inset 0 2px 0 var(--gold), 0 10px 25px rgba(7,26,51,.05); }
.metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; color: #708196; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.metric-icon { color: var(--gold); font-size: 18px; line-height: 1; }
.metric-card strong { display: block; color: var(--navy); font-family: Georgia, serif; font-size: 29px; font-weight: 500; letter-spacing: -.04em; }
.metric-card small { display: block; margin-top: 8px; color: #8391a2; font-size: 10px; }

.chart-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr); gap: 14px; margin-top: 14px; }
.chart-card, .stats-card { border: 1px solid var(--line); border-radius: 7px; background: var(--white); box-shadow: 0 10px 25px rgba(7,26,51,.035); }
.chart-card { padding: 23px 23px 18px; }
.chart-header { align-items: start; margin-bottom: 20px; }
.chart-header h3 { margin: 3px 0 0; color: var(--navy); font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.chart-header .eyebrow { margin-bottom: 0; }
.chart-period { padding: 6px 8px; border: 1px solid #e1e8ef; color: #7e8ea1; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.chart-wrap { position: relative; height: 236px; overflow: hidden; background: linear-gradient(to bottom, rgba(7,26,51,.025) 1px, transparent 1px); background-size: 100% 25%; }
.chart-wrap svg { width: 100%; height: 100%; display: block; }
.chart-empty { display: grid; place-items: center; border: 1px dashed #d6e1eb; background: repeating-linear-gradient(0deg, rgba(7,26,51,.018) 0, rgba(7,26,51,.018) 1px, transparent 1px, transparent 59px); }
.empty-chart-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 285px; padding: 16px; color: #8b99a9; font-size: 10px; text-align: center; line-height: 1.6; }
.empty-chart-copy strong { color: #5c6d82; font-size: 11px; }
.chart-axis { display: flex; justify-content: space-between; gap: 15px; margin-top: 13px; color: #9aa7b5; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.stats-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.stats-card { padding: 23px; }
.gold-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(197,161,91,.13); }
.stats-list { margin: 5px 0 0; }
.stats-list > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #edf1f5; }
.stats-list > div:last-child { border-bottom: 0; }
.stats-list dt { color: #708196; font-size: 12px; } .stats-list dd { margin: 0; color: var(--navy); font-size: 12px; font-weight: 750; }
.status-text { color: var(--success); letter-spacing: .08em; font-size: 10px; }
.update-card { padding: 29px; border-radius: 7px; background: var(--navy); color: white; box-shadow: 0 18px 35px rgba(7,26,51,.12); }
.update-card .eyebrow { color: var(--gold-light); }
.update-date { margin: 26px 0 15px; color: #9db1c9; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.update-card h3 { margin-bottom: 13px; color: white; font-family: Georgia, serif; font-size: 25px; font-weight: 500; letter-spacing: -.03em; }
.update-card p { color: #b4c3d4; font-size: 13px; line-height: 1.75; }
.update-rule { width: 55px; height: 2px; margin: 25px 0 19px; background: var(--gold); }
.update-card .update-footnote { margin: 0; color: #7f97af; font-size: 11px; }

.institution-section { padding: 96px 0; background: var(--navy); color: white; }
.institution-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 92px; }
.institution-section h2 { max-width: 430px; color: white; font-size: 42px; }
.institution-lede { max-width: 430px; margin: 23px 0 0; color: #aabdce; font-size: 14px; line-height: 1.85; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; align-items: start; padding-top: 10px; }
.principles > div { padding-top: 16px; border-top: 1px solid rgba(197,161,91,.42); }
.principles span { color: var(--gold-light); font-family: Georgia, serif; font-size: 19px; }
.principles h3 { margin: 28px 0 10px; color: white; font-size: 14px; }
.principles p { margin: 0; color: #90a7bd; font-size: 11px; line-height: 1.75; }

.notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 42px; margin-bottom: 42px; padding: 20px 22px; border: 1px solid #e8d9b7; border-left: 3px solid var(--gold); background: #fffdf8; }
.notice-label { color: #977332; font-size: 9px; font-weight: 850; letter-spacing: .16em; white-space: nowrap; }
.notice p { margin: 0; color: #69798b; font-size: 11px; line-height: 1.7; }
.notice > span { color: #9b7838; font-size: 10px; font-weight: 750; white-space: nowrap; }
.site-footer { border-top: 1px solid var(--line); background: var(--white); }
.footer-inner { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer-links { display: flex; gap: 22px; color: #708196; font-size: 11px; }
.footer-inner > p { margin: 0; color: #8391a2; font-size: 10px; text-align: right; line-height: 1.7; }
.footer-inner > p span { color: #aab5c1; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 74px; padding-bottom: 80px; }
  .hero-panel { max-width: 560px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid, .stats-layout, .institution-grid { grid-template-columns: 1fr; }
  .institution-grid { gap: 52px; }
  .principles { padding-top: 0; }
  .notice { grid-template-columns: 1fr; gap: 10px; }
  .notice > span { white-space: normal; }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 30px, 1180px); }
  .nav-shell { min-height: 68px; }
  .main-nav { display: none; }
  .market-badge { padding: 7px 8px; font-size: 9px; }
  .hero { padding-top: 60px; padding-bottom: 66px; }
  h1 { font-size: 50px; }
  h2 { font-size: 31px; }
  .hero-lede { font-size: 14px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 135px; padding: 14px; }
  .metric-card strong { font-size: 23px; }
  .metric-top { font-size: 8px; }
  .chart-card, .stats-card, .update-card { padding: 18px; }
  .chart-wrap { height: 205px; }
  .principles { grid-template-columns: 1fr; gap: 30px; }
  .footer-inner { flex-direction: column; align-items: flex-start; padding: 26px 0; }
  .footer-inner > p { text-align: left; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-panel, .metric-card, .chart-card, .stats-card, .update-card { animation: rise-in 600ms var(--ease) both; }
  .hero-panel { animation-delay: 90ms; }
  .metric-card:nth-child(2) { animation-delay: 60ms; } .metric-card:nth-child(3) { animation-delay: 110ms; } .metric-card:nth-child(4) { animation-delay: 160ms; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}