/* ==========================================================================
   Monark Commerce LLC — monark.css
   Direction: "engraved commerce". Banknote line-work, hairline rules,
   tabular figures, gold used like foil rather than like paint.

   One stylesheet. Plain CSS, custom properties, no preprocessor.
   Every component is styled through tokens; the dark theme redefines
   tokens only. There are no theme-specific component rules.

   Contents
     1. Tokens
     2. Reset and base
     3. Layout primitives
     4. Typography roles
     5. Header and navigation
     6. Hero (permanently dark token context)
     7. The Record panel
     8. Ruled grids: modes, operations, ledger index
     9. Prose, callouts, terms lists
    10. Footer
    11. Motion and focus
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   Navy and both golds are lifted from the company icon artwork, which draws
   the mark in a #202E42 -> #0E1520 gradient with an #E0A526 rule.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Brand constants. These do not change between themes: the hero is
     always a dark ground, whichever theme the visitor is in. */
  --leaf:  #E0A526;
  --navy:  #202E42;
  --abyss: #0E1520;

  /* Light theme */
  --ground:   #EFF0F3;
  --surface:  #FFFFFF;
  --sunk:     #E4E6EB;
  --ink:      #141C28;
  --ink-2:    #4C5768;
  --ink-3:    #79839A;
  --rule:     #CDD1D9;
  --rule-2:   #E0E3E9;
  --gold:     #C08A1E;
  --gold-txt: #7A5410;
  --ok:       #1E6B45;
  --pending:  #8A5A0B;

  /* The engraved gap. Card grids sit on a --rule ground and are held apart
     by this, so the seams read as ruled lines rather than as whitespace. */
  --gap: 1px;

  /* Type roles. System stacks only — zero font requests, zero layout shift. */
  --display: "Hoefler Text", "Iowan Old Style", Constantia, "Palatino Linotype", Palatino, Charter, Georgia, serif;
  --body:    "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --data:    "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", ui-monospace, Menlo, monospace;

  /* Scale, ratio 1.25 */
  --s--1: 0.8125rem;
  --s-0:  1.0625rem;
  --s-1:  1.25rem;
  --s-2:  1.5rem;
  --s-3:  1.875rem;
  --s-4:  2.375rem;
  --s-5:  3.25rem;

  /* Measure and rhythm */
  --wrap:    1120px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --bay:     clamp(2.75rem, 6vw, 4.5rem);
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:   #0E1520;
    --surface:  #16202E;
    --sunk:     #111A26;
    --ink:      #E6E9EF;
    --ink-2:    #A3AEC0;
    --ink-3:    #77839A;
    --rule:     rgba(38, 50, 67, 0.6);
    --rule-2:   #212C3D;
    --gold:     #E0A526;
    --gold-txt: #EBB742;
    --ok:       #5FBF8B;
    --pending:  #E0A526;
  }
}


/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

/* Spacing between siblings is done with flex/grid gap throughout, so the
   margin reset is total rather than selective. */
html, body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, blockquote, address, table {
  margin: 0;
  padding: 0;
}

html {
  /* No smooth scrolling: the in-page catalogue anchor must not animate. */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--s-0);
  line-height: 1.65;
  /* The page body must never scroll horizontally, at any width. */
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

img, svg, canvas { max-width: 100%; }

ul, ol { list-style-position: outside; }

li::marker { color: var(--gold); }

address { font-style: normal; }

hr { border: 0; border-top: 1px solid var(--rule); }


/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A full-bleed horizontal band. Sections are separated by a hairline rule,
   not by a change of background and never by a shadow. */
.band { padding-block: var(--bay); }
.band + .band { border-top: 1px solid var(--rule); }

/* Vertical stacks. All sibling spacing lives here. */
.stack { display: flex; flex-direction: column; gap: 1.5rem; }
.stack--xs { gap: 0.4rem; }
.stack--s  { gap: 0.85rem; }
.stack--m  { gap: 1.5rem; }
.stack--l  { gap: 2.5rem; }
.stack--xl { gap: clamp(2.5rem, 5vw, 3.5rem); }

/* Ruled grid: children sit on a --rule ground, held apart by --gap so the
   seams read as engraved lines. */
.ruled {
  display: grid;
  gap: var(--gap);
  background: var(--rule);
  border: 1px solid var(--rule);
}

.ruled > * {
  background: var(--surface);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
}

.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 52rem) {
  .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Wide content scrolls inside its own container, never the page. */
.scroll-x { overflow-x: auto; }


/* --------------------------------------------------------------------------
   4. Typography roles
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--s-4); }
h2 { font-size: var(--s-3); }
h3 { font-size: var(--s-1); }
h4 { font-size: var(--s-0); }

@media (min-width: 48rem) {
  h1 { font-size: var(--s-5); }
}

/* Mono, uppercase, wide-tracked. Used for eyebrows, labels, table headers. */
.eyebrow {
  font-family: var(--data);
  font-size: 0.6875rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-txt);
}

/* All prices, IDs, dates and figures. */
.data {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
}

.lede {
  font-size: var(--s-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

/* Every policy opens with a one-sentence plain answer, set in display type.
   The full terms follow beneath it in body type. */
.answer {
  font-family: var(--display);
  font-size: var(--s-2);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 34ch;
  color: var(--ink);
}

@media (min-width: 48rem) {
  .answer { font-size: var(--s-3); }
}

/* Large display numerals; --ink-3 is reserved for type at this size, where
   3:1 is the applicable threshold. It is never used for running copy. */
.folio {
  font-family: var(--data);
  font-size: var(--s-4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.rule-gold {
  width: 68px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.ok      { color: var(--ok); }
.pending { color: var(--pending); }

.status {
  font-family: var(--data);
  font-size: var(--s--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}

.masthead-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.1rem;
}

.wordmark {
  font-family: var(--display);
  font-size: var(--s-1);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.wordmark:hover { border-bottom-color: var(--gold); }

/* Five links wrap onto a second row on narrow screens. No hamburger. */
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  list-style: none;
}

.nav a {
  font-family: var(--data);
  font-size: var(--s--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-block: 0.15rem;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}


/* --------------------------------------------------------------------------
   6. Hero
   A permanently dark ground. Rather than writing theme-specific rules, the
   hero redefines the tokens for everything inside it, so the Record panel,
   the eyebrow and the rules all resolve correctly without knowing where
   they are.
   -------------------------------------------------------------------------- */

.hero {
  --surface:  #16202E;
  --sunk:     #121B27;
  --ink:      #E6E9EF;
  --ink-2:    #A3AEC0;
  --ink-3:    #77839A;
  --rule:     #2A3A52;
  --rule-2:   #202C3D;
  --gold:     #E0A526;
  --gold-txt: #EBB742;
  --ok:       #5FBF8B;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(163deg, #24334A 0%, #16202E 52%, #0B111A 100%);
  color: var(--ink);
  padding-block: clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--rule);
}

/* Guilloche rosettes, drawn parametrically onto a canvas. Decorative. */
.engraving {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
  z-index: -2;
}

/* The single animated element on the site: a monarch migration route,
   which is also a trade route. Drawn once on load, then static forever. */
.route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.route path {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 1.25;
  opacity: 0.55;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 56rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.hero h1 { max-width: 14ch; }

.hero-lede {
  font-size: var(--s-1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

.seal {
  width: clamp(112px, 14vw, 140px);
  height: auto;
  flex: none;
}


/* --------------------------------------------------------------------------
   7. The Record panel
   The company's public registration facts, set as designed data. Every fact
   in it is already public at the Illinois Secretary of State.
   -------------------------------------------------------------------------- */

.record {
  background: var(--sunk);
  border: 1px solid var(--rule);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.record-head {
  font-family: var(--data);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-txt);
}

.record-rows {
  display: flex;
  flex-direction: column;
}

.record-rows > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
  padding-block: 0.55rem;
  border-top: 1px solid var(--rule-2);
}

.record-rows dt {
  font-size: var(--s--1);
  color: var(--ink-2);
}

.record-rows dd {
  font-family: var(--data);
  font-size: var(--s--1);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
}

/* Needs to out-specify `.record-rows dd` above, which would otherwise win
   over the bare .ok / .pending status colours. */
.record-rows dd.ok      { color: var(--ok); }
.record-rows dd.pending { color: var(--pending); }


/* --------------------------------------------------------------------------
   8. Ruled grids
   -------------------------------------------------------------------------- */

/* Mode panels: the three ways this company sells. Descriptive in Phase 1. */
.mode {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mode h2 {
  font-family: var(--data);
  font-size: var(--s--1);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-txt);
}

.mode p {
  font-size: var(--s-0);
  color: var(--ink-2);
  max-width: 34ch;
}

/* Operating blocks and ledger index entries. */
.entry {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: start;
}

.entry p { color: var(--ink-2); max-width: 42ch; }

.entry-link {
  font-family: var(--data);
  font-size: var(--s--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-txt);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15rem;
}

.entry-link:hover { border-bottom-color: var(--gold); }


/* --------------------------------------------------------------------------
   9. Prose, callouts, terms
   -------------------------------------------------------------------------- */

.prose {
  display: flex;
  flex-direction: column;
  gap: 1.05em;
  max-width: var(--measure);
  color: var(--ink-2);
}

.prose h2, .prose h3 { color: var(--ink); }

.prose ul, .prose ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.2rem;
}

.prose strong { color: var(--ink); font-weight: 600; }

a {
  color: var(--gold-txt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule);
}

a:hover { text-decoration-color: var(--gold); }

.prose a { color: var(--gold-txt); }

/* Draft callout. Every legal page carries one. */
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  border: 1px solid var(--pending);
  background: var(--sunk);
  padding: 0.9rem 1.1rem;
  font-size: var(--s--1);
  color: var(--ink-2);
  max-width: var(--measure);
}

.callout-tag {
  font-family: var(--data);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pending);
  flex: none;
}

/* Terms lists: a labelled parameter and its current state. */
.terms {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}

.terms > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule-2);
}

@media (max-width: 40rem) {
  .terms > div { grid-template-columns: minmax(0, 1fr); }
}

.terms dt {
  font-family: var(--data);
  font-size: var(--s--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.terms dd {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Contact details, set as data. */
.detail {
  font-family: var(--data);
  font-size: var(--s-1);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}


/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  background: var(--sunk);
  padding-block: var(--bay) 0;
}

.footer-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 52rem) {
  .footer-in { grid-template-columns: minmax(0, 1fr); }
}

.footer-col { display: flex; flex-direction: column; gap: 0.85rem; }

.legal-name {
  font-family: var(--display);
  font-size: var(--s-1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.footer address,
.footer-col p { font-size: var(--s--1); color: var(--ink-2); }

.footer address a { color: var(--gold-txt); }

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  list-style: none;
}

.footer-col ul a {
  font-size: var(--s--1);
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer-col ul a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.footer .record { background: transparent; }

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: 1.1rem;
  font-family: var(--data);
  font-size: var(--s--1);
  color: var(--ink-2);
}

.colophon-in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
}


/* --------------------------------------------------------------------------
   11. Motion and focus
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  top: -4rem;
  left: var(--gutter);
  z-index: 20;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--gold);
  padding: 0.65rem 1rem;
  font-family: var(--data);
  font-size: var(--s--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.skip:focus { top: 0.75rem; }

/* Visible on every interactive element, in both themes. --gold-txt is used
   rather than --gold because #C08A1E resolves to 2.67:1 against the light
   ground, short of the 3:1 that WCAG 2.2 requires of a focus indicator.
   #7A5410 clears it at 5.9:1, and #EBB742 at 9.9:1 on the dark ground. */
:focus-visible {
  outline: 2px solid var(--gold-txt);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}