:root {
  color-scheme: dark;
  --navy: #061225;
  --navy-deep: #030a15;
  --gold: #d8a64d;
  --gold-bright: #f2c86f;
  --gold-dim: #886a35;
  --blue: #9bb9df;
  --white: #f3f5fa;
  --muted: #8292ab;
  --line: rgba(135, 169, 211, .2);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy-deep); }
body { min-height: 100vh; margin: 0; background: var(--navy-deep); color: var(--white); font-family: Georgia, "Times New Roman", serif; }

.site-frame { position: relative; isolation: isolate; display: grid; min-height: 100vh; grid-template-columns: minmax(14rem, 23vw) minmax(0, 1fr); overflow: hidden; background: radial-gradient(circle at 78% 34%, rgba(28, 75, 129, .2), transparent 30rem), linear-gradient(112deg, #071528 0%, #071326 44%, #040c18 100%); }
.ambient, .grid-glow { position: absolute; pointer-events: none; z-index: -1; }
.ambient-orbit { width: 42rem; height: 42rem; top: -21rem; right: -12rem; border: 1px solid rgba(216, 166, 77, .24); border-radius: 50%; box-shadow: 0 0 0 1.3rem rgba(216, 166, 77, .035), 0 0 0 5rem rgba(216, 166, 77, .018); }
.ambient-glow { width: 26rem; height: 26rem; right: 19%; bottom: -18rem; border-radius: 50%; background: rgba(45, 125, 202, .15); filter: blur(46px); }
.grid-glow { inset: 0; opacity: .32; background-image: linear-gradient(rgba(130, 163, 204, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 163, 204, .06) 1px, transparent 1px); background-size: 4.5rem 4.5rem; mask-image: linear-gradient(90deg, transparent, black 35%, black 80%, transparent); }

.brand-rail { display: flex; min-height: 100vh; flex-direction: column; padding: 2.5rem clamp(1.25rem, 3vw, 3.25rem); border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(4, 13, 27, .62), rgba(4, 12, 23, .18)); }
.brand-lockup { display: flex; align-items: center; gap: .9rem; color: var(--white); text-decoration: none; }
.brand-icon { display: grid; flex: 0 0 auto; place-items: center; width: 4.5rem; height: 4.5rem; border: 1px solid rgba(216, 166, 77, .8); border-radius: 1rem; background: #050e1d; box-shadow: 0 0 1.6rem rgba(216, 166, 77, .2); }
.brand-icon img { width: 4rem; height: 4rem; border-radius: .8rem; }
.brand-name { color: var(--gold-bright); font-size: clamp(.78rem, 1.15vw, 1.2rem); letter-spacing: .08em; line-height: 1.02; text-transform: uppercase; }
.brand-name strong { color: var(--white); font-weight: 400; }
.brand-subtitle { margin-top: 1.3rem; color: var(--blue); font: 700 .59rem/1.4 Arial, sans-serif; letter-spacing: .22em; }
.rail-rule { width: 100%; height: 1px; margin: auto 0 1.5rem; background: linear-gradient(90deg, var(--gold-dim), transparent); }
.rail-note { margin: 0; color: var(--blue); font-size: clamp(.9rem, 1.3vw, 1.1rem); line-height: 1.6; }
.rail-year { margin-top: 3rem; color: var(--gold); font: 700 .62rem/1 Arial, sans-serif; letter-spacing: .3em; }

.content-column { display: flex; min-width: 0; min-height: 100vh; flex-direction: column; padding: 0 clamp(1.5rem, 5vw, 6rem); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.55rem 0 1.5rem; border-bottom: 1px solid var(--line); color: var(--muted); font: 700 .62rem/1 Arial, sans-serif; letter-spacing: .23em; }
.topbar-status { color: var(--gold-bright); }
.topbar-status i { display: inline-block; width: .38rem; height: .38rem; margin-right: .5rem; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 .7rem var(--gold); }
.hero-grid { display: grid; flex: 1; grid-template-columns: minmax(0, 1.05fr) minmax(19rem, .95fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: clamp(3rem, 8vh, 7rem) 0 3.5rem; }
.hero-copy { max-width: 40rem; }
.eyebrow { margin: 0 0 1.8rem; color: var(--blue); font: 700 .73rem/1 Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; }
h1 { max-width: 8ch; margin: 0; color: var(--white); font-size: clamp(4.5rem, 9vw, 9.5rem); font-weight: 400; letter-spacing: -.075em; line-height: .82; }
h1 span { color: var(--gold-bright); }
.intro { max-width: 34rem; margin: 2.5rem 0 0; color: #c0cede; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.7; }
.quiet-line { margin: 2.6rem 0 0; color: var(--gold-bright); font: 700 .7rem/1 Arial, sans-serif; letter-spacing: .32em; text-transform: uppercase; }

.emblem-panel { position: relative; display: grid; min-height: 28rem; place-items: center; align-content: center; justify-self: end; width: min(33rem, 100%); padding: 2.4rem; border: 1px solid rgba(115, 155, 204, .25); border-radius: .8rem; background: rgba(8, 23, 44, .64); box-shadow: 0 2rem 5rem rgba(0, 0, 0, .18), inset 0 0 3rem rgba(31, 87, 145, .06); }
.emblem-panel::before { position: absolute; content: ""; inset: .95rem; border: 1px solid rgba(216, 166, 77, .3); border-radius: .55rem; }
.panel-corner { position: absolute; z-index: 2; width: 1.1rem; height: 1.1rem; border-color: var(--gold); border-style: solid; }
.panel-corner-top { top: .95rem; right: .95rem; border-width: 1px 1px 0 0; }
.panel-corner-bottom { bottom: .95rem; left: .95rem; border-width: 0 0 1px 1px; }
.emblem { position: relative; z-index: 1; width: min(62%, 18rem); height: auto; border-radius: 22%; filter: drop-shadow(0 1.8rem 2rem rgba(0, 0, 0, .5)); }
.emblem-orbit { position: absolute; width: 73%; aspect-ratio: 1; border: 1px solid rgba(216, 166, 77, .55); border-radius: 50%; box-shadow: 0 0 0 1rem rgba(216, 166, 77, .035), inset 0 0 4rem rgba(103, 184, 255, .09); }
.emblem-orbit::after { position: absolute; content: ""; inset: 8%; border: 1px solid rgba(103, 184, 255, .28); border-radius: 50%; }
.emblem-caption { position: relative; z-index: 1; margin: 1.4rem 0 0; color: var(--gold-bright); font: 700 .76rem/1 Arial, sans-serif; letter-spacing: .28em; }
.emblem-motto { position: relative; z-index: 1; margin: .65rem 0 0; color: var(--blue); font: 700 .56rem/1 Arial, sans-serif; letter-spacing: .23em; }

.signal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-bottom: 3rem; }
.signal-card { display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(8, 22, 41, .65); }
.signal-card span { grid-row: span 2; color: var(--gold); font: 700 .62rem/1 Arial, sans-serif; letter-spacing: .15em; }
.signal-card strong { color: var(--white); font-size: 1.05rem; font-weight: 400; }
.signal-card small { margin-top: .25rem; color: var(--muted); font: .68rem/1.3 Arial, sans-serif; letter-spacing: .08em; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0 2rem; border-top: 1px solid var(--line); color: var(--muted); font: .67rem/1.5 Arial, sans-serif; letter-spacing: .08em; }
.footer-mark { color: var(--gold); font-weight: 700; letter-spacing: .2em; }

@media (max-width: 900px) {
  .site-frame { grid-template-columns: 1fr; }
  .brand-rail { min-height: auto; flex-direction: row; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-icon { width: 3.35rem; height: 3.35rem; border-radius: .75rem; }
  .brand-icon img { width: 3rem; height: 3rem; border-radius: .6rem; }
  .brand-subtitle, .rail-rule, .rail-note, .rail-year { display: none; }
  .content-column { min-height: calc(100vh - 5.6rem); padding: 0 clamp(1.25rem, 4vw, 3rem); }
}

@media (max-width: 680px) {
  .topbar { padding-top: 1.35rem; font-size: .55rem; letter-spacing: .14em; }
  .topbar-label { max-width: 10rem; }
  .hero-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; padding: 4rem 0 2.5rem; }
  h1 { font-size: clamp(4.2rem, 19vw, 6.8rem); }
  .emblem-panel { align-self: center; min-height: 23rem; width: min(100%, 25rem); }
  .signal-row { grid-template-columns: 1fr; padding-bottom: 2rem; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { scroll-behavior: auto !important; }
}