/* =====================================================================
   horizon.css — Horizon Intelligence, Inc.
   Palette and type carried from the printed document system
   (Charter HRZ-CHT-001, Business Plan HRZ-BUS-001).
   ===================================================================== */

:root {
  --ground:      #0a0a0a;
  --ground-2:    #0f0f0f;
  --rule:        #1e1c17;
  --rule-lit:    #2e2a20;

  --gold:        #a8894a;   /* structural gold */
  --gold-deep:   #7d6522;
  --gold-halo:   #d4b878;   /* warm halo */
  --cream:       #f0e4c8;
  --ivory:       #EDE4C8;
  --body:        #b9ae95;
  --muted:       #7e765f;

  --serif: Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Safety net. Without this, any image that loses its sizing rule renders at
   natural size and can push the document wider than the viewport. Sections are
   width:auto, so they keep painting to viewport width while the copy spills
   past them: black page on the left, white void on the right. That is exactly
   what a stale stylesheet on the host produced once. */
img { max-width: 100%; height: auto; }
canvas { max-width: 100%; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--ground); }

a { color: var(--gold-halo); text-decoration: none; }
a:hover { color: var(--cream); }
:focus-visible {
  outline: 2px solid var(--gold-halo);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--ground);
  padding: 10px 16px; font-family: var(--mono); font-size: 12px; z-index: 999;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------- structure */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

section { position: relative; padding: clamp(64px, 9vw, 128px) 0; }
section + section { border-top: 1px solid var(--rule); }

/* Ambient canvas layer. The parent must be position:relative. */
.field { position: relative; overflow: hidden; }
.field > canvas[data-horizon] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 0;
}
.field > .wrap, .field > .inner { position: relative; z-index: 1; }

/* ------------------------------------------------------------- type */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

h1, h2, h3, h4 { font-family: var(--serif); color: var(--cream); font-weight: 400; }

h1 {
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 28px;
}
h1 em { font-style: italic; color: var(--gold-halo); }

h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.16;
  margin: 0 0 24px;
  letter-spacing: -.01em;
}
h3 { font-size: 20px; line-height: 1.34; margin: 0 0 10px; }
h4 { font-size: 16px; margin: 0 0 8px; }

p { margin: 0 0 20px; }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--ivory); max-width: 64ch; }
.measure { max-width: 68ch; }
strong { color: var(--cream); font-weight: 600; }

.rule-3 { margin: 0 0 34px; }
.rule-3 span { display: block; height: 1px; background: var(--gold-deep); }
.rule-3 span:nth-child(1) { width: 100%; opacity: .85; }
.rule-3 span:nth-child(2) { width: 62%; margin-top: 4px; opacity: .5; }
.rule-3 span:nth-child(3) { width: 28%; margin-top: 4px; opacity: .3; }

/* ------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 62px; }
.brand {
  font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
  color: var(--cream); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto;
}
.brand b { color: var(--gold-halo); font-weight: 700; }

/* The PNG carries a real alpha channel, so it composites over the animated nav
   canvas with ordinary painting. It previously leaned on mix-blend-mode:screen
   to hide an opaque black field; that put a blend group inside a position:sticky
   element that also runs backdrop-filter, which breaks compositing in both
   Chrome and Safari. Do not reintroduce a blend mode here. */
.brandmark {
  height: 30px; width: auto; display: block; flex: 0 0 auto;
}

/* Five rotating platonic solids in the gap between brand and links. The engine
   lays its solids across the canvas at cxFrac .08 to .92, so a wide short
   canvas spreads them evenly. It needs h/2 +/- 22px to draw uncropped. */
.navfield { flex: 1 1 auto; min-width: 0; height: 46px; position: relative; }
.navfield > canvas { display: block; width: 100%; height: 100%; opacity: .7; }

.nav a.navlink {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--body); flex: 0 0 auto;
}
.nav a.navlink:hover, .nav a.navlink[aria-current="page"] { color: var(--gold-halo); }

/* Below 900px the gap is too narrow for five solids to read. */
@media (max-width: 900px) {
  .navfield { display: none; }
  .brand { margin-right: auto; }
}
@media (max-width: 720px) {
  .nav .wrap { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; gap: 14px; }
  .brand { width: 100%; margin-right: 0; }
  .brandmark { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .navfield > canvas { opacity: .4; }
}

/* ------------------------------------------------------------- hero */
.hero { min-height: 78vh; display: flex; align-items: center; padding: clamp(72px,10vw,150px) 0; }

/* ------------------------------------------------------------ grid */
.grid { display: grid; gap: 28px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ card */
.card {
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(168,137,74,.035), rgba(168,137,74,0));
  padding: 26px;
}
.card .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--gold-deep); display: block; margin-bottom: 14px;
}
.card p:last-child { margin-bottom: 0; }
.card p { font-size: 15.5px; }

/* --------------------------------------------------------- stat/kpi */
.kpi { border-left: 2px solid var(--gold-deep); padding: 4px 0 4px 18px; }
.kpi .v {
  font-family: var(--mono); font-size: clamp(22px,3vw,30px);
  color: var(--gold-halo); display: block; line-height: 1.2;
}
.kpi .k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream); display: block; margin-top: 8px; }
.kpi .s { font-size: 14px; color: var(--muted); display: block; margin-top: 4px; }

/* ----------------------------------------------------------- table */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 20px; }
.tbl caption {
  text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); padding-bottom: 12px;
}
.tbl th {
  text-align: left; font-family: var(--mono); font-weight: 400;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream); background: #141310;
  padding: 12px 14px; border-bottom: 1px solid var(--rule-lit);
}
.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl tr:nth-child(even) td { background: rgba(168,137,74,.022); }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.tbl tfoot td { border-top: 1px solid var(--gold-deep); border-bottom: none;
  color: var(--cream); font-weight: 600; background: #141310; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------- tag */
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--rule-lit);
  color: var(--muted); display: inline-block; white-space: nowrap;
}
.tag.on   { color: var(--gold-halo); border-color: var(--gold-deep); }
.tag.warn { color: #c98f5a; border-color: #4a3320; }

/* ----------------------------------------------------------- notes */
.note {
  border-left: 2px solid var(--gold-deep);
  padding: 16px 0 16px 20px;
  font-size: 15px; color: var(--muted); margin: 28px 0 0;
}
.note strong { color: var(--ivory); }
.callout {
  border: 1px solid var(--rule-lit);
  background: rgba(168,137,74,.04);
  padding: 24px 26px; margin: 32px 0 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ list */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--rule);
  position: relative; font-size: 15.5px; }
.ticks li::before { content: "→"; position: absolute; left: 0; color: var(--gold-deep);
  font-family: var(--mono); font-size: 13px; }

/* ------------------------------------------------------------- cta */
.btn {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--gold-deep); color: var(--gold-halo);
  padding: 14px 26px; transition: background .2s, color .2s;
}
.btn:hover { background: var(--gold); color: var(--ground); border-color: var(--gold); }
.btn.solid { background: var(--gold); color: var(--ground); border-color: var(--gold); }
.btn.solid:hover { background: var(--gold-halo); border-color: var(--gold-halo); }
.btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* ------------------------------------------------- context stream figure */
/* A foreground diagram, not an ambient field: it sits in normal flow and owns
   its own height, which the engine reads back off the element. */
.ctxbox {
  border: 1px solid var(--rule-lit);
  background: var(--ground-2);
  margin: 40px 0 0;
}
.ctxrow { padding: 20px 24px; border-bottom: 1px solid var(--rule); }
.ctxrow:last-child { border-bottom: none; background: rgba(168,137,74,.03); }
.ctxrow p { font-size: 15px; margin: 0; }
.ctxrow .lb {
  font-family: var(--mono); font-size: 10px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px; display: flex; justify-content: space-between; gap: 12px;
}
.ctxbox canvas { display: block; width: 100%; height: 160px; }
@media (max-width: 560px) {
  .ctxrow { padding: 16px 16px; }
  .ctxrow .lb { flex-direction: column; gap: 4px; }
}

/* ---------------------------------------------------------- footer */
footer { border-top: 1px solid var(--rule); padding: 56px 0 40px; background: var(--ground-2); }
.footermark {
  width: 212px; max-width: 100%; height: auto; display: block; margin-bottom: 18px;
}
footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
footer a { display: block; font-size: 14px; color: var(--body); margin-bottom: 8px; }

/* Footer contacts. Addresses are long, so they wrap rather than widen the
   column, and they sit tighter to their owner than the default link spacing. */
.person { margin-bottom: 18px; }
.person:last-child { margin-bottom: 0; }
.person .name {
  display: block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream);
}
.person .role {
  display: block; font-size: 13.5px; color: var(--muted); margin: 2px 0 5px;
}
.person a {
  font-size: 13px; color: var(--gold-halo); margin-bottom: 0;
  overflow-wrap: anywhere;
}
.person a:hover { color: var(--cream); }
.legal { border-top: 1px solid var(--rule); margin-top: 40px; padding-top: 24px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  line-height: 2; color: var(--muted); }

/* ----------------------------------------------------- form (access) */
.form { display: grid; gap: 16px; }
.form label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 7px; }
.form input, .form select, .form textarea {
  width: 100%; background: #131210; border: 1px solid var(--rule-lit);
  color: var(--ivory); padding: 12px 14px; font-family: var(--serif); font-size: 15px;
}
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--gold-deep);
}

/* ----------------------------------------------------- misc helpers */
.stack > * + * { margin-top: 28px; }
.tight { margin-bottom: 12px; }
.mono { font-family: var(--mono); font-size: 13px; }
.hr { height: 1px; background: var(--rule); border: 0; margin: 48px 0; }
.center { text-align: center; }
.ref { font-family: var(--mono); font-size: 10px; color: var(--gold-deep);
  vertical-align: super; }

/* =====================================================================
   LEGIBILITY LAYER
   The ambient canvases are the point, but body copy has to win against
   them. Three mechanisms, applied together:
     1. a scrim painted between the canvas and the content
     2. reduced canvas opacity in text-dense sections
     3. cards and callouts given a real surface instead of a wash
   Add class "text" to any .field section carrying substantive copy.
   Heroes keep the lighter default so the animation still reads.
   ===================================================================== */

/* ::after paints after the canvas sibling but still sits under .wrap (z-index 1). */
.field::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 68% at 50% 50%,
      rgba(10,10,10,.62) 0%,
      rgba(10,10,10,.40) 45%,
      rgba(10,10,10,.10) 78%,
      rgba(10,10,10,0) 100%);
}

/* Heroes where the animation is the main event rather than background texture.
   Lifts the canvas and pulls the scrim back, keeping just enough of it for the
   heading to stay readable. Pairs with a brighter `color` on the engine itself. */
.field.lit > canvas[data-horizon] { filter: brightness(1.2) saturate(1.05); }
.field.lit::after {
  background:
    radial-gradient(ellipse 78% 68% at 50% 50%,
      rgba(10,10,10,.44) 0%,
      rgba(10,10,10,.26) 45%,
      rgba(10,10,10,.06) 78%,
      rgba(10,10,10,0) 100%);
}

/* Text-dense sections: hold the animation well back. */
.field.text > canvas[data-horizon] { opacity: .58; }
.field.text::after {
  background:
    linear-gradient(180deg,
      rgba(10,10,10,.34) 0%,
      rgba(10,10,10,.46) 22%,
      rgba(10,10,10,.46) 78%,
      rgba(10,10,10,.34) 100%);
}

/* Cards and callouts become opaque panels so copy never sits on moving line work. */
.field.text .card {
  background: linear-gradient(180deg, rgba(22,21,17,.93), rgba(13,13,12,.90));
  border-color: var(--rule-lit);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.field.text .callout,
.field.text .ctxbox {
  background: rgba(19,18,15,.93);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.field.text .ctxrow:last-child { background: rgba(168,137,74,.045); }
.field.text .tbl th,
.field.text .tbl tfoot td { background: #16150f; }
.field.text .tbl td { background: rgba(12,12,11,.86); }
.field.text .tbl tr:nth-child(even) td { background: rgba(20,18,14,.88); }

/* Headings and ledes sit directly on the section rather than inside a card, so
   they get a local shadow instead of a heavier section-wide veil. This keeps the
   animation visible in the margins while the copy still wins wherever it lands. */
.field.text .eyebrow,
.field.text h1,
.field.text h2,
.field.text h3,
.field.text .lede,
.field.text .measure,
.field.text > .wrap > p {
  position: relative;
  text-shadow: 0 0 16px rgba(10,10,10,.96), 0 0 5px rgba(10,10,10,.92);
}

@media (prefers-reduced-motion: reduce) {
  .field > canvas[data-horizon] { opacity: .22; }
}