/* ==========================================================================
   Astelia — Site styles

   Everything that is not a token. Reads tokens.css and hard-codes nothing:
   no literal color, no literal font family. See docs/BRIEF.md §4.

   House rules enforced throughout — no border-radius, no gradient, no
   box-shadow, no photography. Every divider is a 1px hairline.

   VERSIONING: pages link this file as css/site.css?v=YYYYMMDD. Bump that
   version in every public/*.html when this file changes, or a returning
   visitor gets new markup against a cached stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset and ground
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Explicit token background: the page must never borrow a host's ground. */
html, body {
  background: var(--paper);
  color: var(--ink);
}

body {
  /* Body prose is the body face, never the display face — see tokens.css.
     17px, not 18: Georgia's x-height runs well above Cormorant's, so the two
     sit at the same optical size at different point sizes. */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-wrap: balance;
  color: var(--ink);
  letter-spacing: .002em;
}

p { color: var(--ink-soft); }
p + p { margin-top: var(--space-2); }

/* Italic emphasis carries moss — the only decorative use of the color. */
em { font-style: italic; color: var(--moss); }
strong { font-weight: 600; color: var(--ink); }

a { color: inherit; }
::selection { background: var(--linen); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.col      { max-width: var(--measure); }
.col-wide { max-width: 74ch; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-1) var(--space-2);
  border: var(--rule);
  font-family: var(--font-utility);
  font-size: 13px;
  z-index: 10;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

.hairline      { height: 1px; background: var(--hairline);      border: none; }
.hairline-soft { height: 1px; background: var(--hairline-soft); border: none; }

section { padding: var(--space-5) 0; }
section.tight { padding: var(--space-4) 0; }

/* --------------------------------------------------------------------------
   Utility type — labels, eyebrows, nav, metadata
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-utility);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brass);
}

.label {
  font-family: var(--font-utility);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone);
}

.section-head { margin-bottom: var(--space-3); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-2); }
.section-head h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.28;
  max-width: 24ch;
}
.section-head h2.wide { max-width: 34ch; }

section p { font-size: 17px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   The mark
   Inlined from the locked brand file as a currentColor symbol, so it inverts
   with the theme. Never redrawn, never recolored per page.
   -------------------------------------------------------------------------- */

.mark-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.a-mark {
  display: block;
  color: var(--ink);
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

header.masthead { padding: var(--space-4) 0 0; }

.masthead-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.masthead a.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

/* 32px, not 44. The identity system makes the WORDMARK the primary mark and
   the "A" the secondary one, for square formats — avatars and favicons. At
   44px above a 32px wordmark the secondary mark stood more than twice the
   optical height of the name and outranked it, which inverts the system. Here
   the "A" sits above the name like a fleuron, not a crown. The footer mark is
   sized separately and is unaffected. */
.masthead .a-mark { width: 32px; height: 32px; margin-bottom: var(--space-1); }

/* Cormorant carries very little visual mass at this tracking — thin strokes and
   a lot of white — so it reads far smaller than its point size suggests. At
   32px its cap-height was ~21px against a 58px hero, which is what made the
   masthead feel undersized. 46px puts the name at the widest and heaviest
   element of the lockup, where the identity system wants it. The footer
   overrides the size; the tracking is shared deliberately. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 46px;
  letter-spacing: .22em;
  /* The wordmark is letterspaced; the trailing space would sit off-center. */
  text-indent: .22em;
  line-height: 1.1;
}

/* The one place --tracking-label is deliberately not used. The tagline is site
   chrome, not part of the approved lockup, and at 10px/2.5px it ran 304px wide
   against a 178px wordmark — the widest line in the block, which the eye reads
   as the dominant one. 9px at .2em brings it to ~258px, just inside the
   wordmark, so it tucks under the name rather than framing it. */
.colophon {
  font-family: var(--font-utility);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: var(--space-1);
}

nav.primary {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
}

nav.primary a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
nav.primary a:hover,
nav.primary a:focus-visible { color: var(--moss); border-color: var(--moss); }

/* Current page: stated in the markup with aria-current, styled from it, so
   the marker can never drift out of sync with the accessible name. */
nav.primary a[aria-current="page"] { color: var(--ink); border-color: var(--brass); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding: var(--space-6) 0 var(--space-5); text-align: center; }

.hero h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.14;
  /* Wide enough that "High-Net-Worth" stays whole on one line. */
  max-width: 26ch;
  margin: 0 auto var(--space-3);
}

.hero p.lede {
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 auto;
}

.hero .actions { margin-top: var(--space-4); }

/* Interior pages: a shorter hero with the same voice. */
.page-head { padding: var(--space-5) 0 var(--space-4); }
.page-head h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.18;
  max-width: 22ch;
  margin-top: var(--space-2);
}
.page-head p.lede {
  font-size: 18.5px;
  line-height: 1.7;
  max-width: var(--measure);
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Actions
   Brass is never a filled surface — the filled state uses ink on paper.
   -------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* An action row that follows prose needs air above it. */
.prose .actions { margin-top: var(--space-3); }
.hero .actions { justify-content: center; }

.button {
  display: inline-block;
  font-family: var(--font-utility);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: 1px solid var(--hairline);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.button:hover,
.button:focus-visible { border-color: var(--ink); }

.button-primary { border-color: var(--ink); }
.button-primary:hover,
.button-primary:focus-visible { background: var(--ink); color: var(--paper); }

.button[disabled] { color: var(--stone); border-color: var(--hairline-soft); cursor: default; }
.button[disabled]:hover { background: transparent; color: var(--stone); }

/* Inline text link, and the arrow link that closes a card. */
a.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
a.link:hover, a.link:focus-visible { color: var(--moss); border-color: var(--moss); }

a.arrow {
  display: inline-block;
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stone);
  transition: color .2s;
}
a.arrow:hover, a.arrow:focus-visible { color: var(--moss); }

/* --------------------------------------------------------------------------
   Prose blocks
   -------------------------------------------------------------------------- */

.prose p { font-size: 18px; line-height: 1.72; }
.prose p + p { margin-top: var(--space-2); }
.prose h3 {
  font-size: 24px;
  line-height: 1.3;
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   The two engagements
   -------------------------------------------------------------------------- */

.engagements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--rule);
  border-bottom: var(--rule);
}

.engagement {
  padding: var(--space-3);
  border-left: var(--rule);
  display: flex;
  flex-direction: column;
}
.engagement:first-child { border-left: none; }

.engagement .label { display: block; }
.engagement h3 {
  /* A named thing, not a sentence: the small-caps face carries it. The italic
     that used to do this job is gone — Cormorant SC has no true italic, and
     faking one on small caps produces a slant, not a style. */
  font-family: var(--font-named);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: var(--tracking-named);
  margin: var(--space-1) 0 var(--space-2);
}
.engagement p { font-size: 17px; line-height: 1.68; }
.engagement .arrow { margin-top: auto; padding-top: var(--space-3); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.tag {
  font-family: var(--font-utility);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  border: 1px solid var(--hairline);
  padding: 6px 10px;
}

/* --------------------------------------------------------------------------
   Ledger — What's Underneath, and the referral steps
   -------------------------------------------------------------------------- */

.ledger { border-top: var(--rule); }

.ledger-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--rule);
}

.ledger-row h3 {
  font-family: var(--font-named);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: var(--tracking-named);
  line-height: 1.35;
}
.ledger-row p { margin: 0; max-width: 56ch; }

/* Numbered variant — the referral sequence. */
.ledger-row .step-num {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  color: var(--brass);
  display: block;
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   The document — system.html
   A document, not a marketing page: long measure, numbered sections,
   generous space, hairline rules and nothing else.
   -------------------------------------------------------------------------- */

.document { padding-bottom: var(--space-5); }

/* A document is read, not scanned: the measure is centered rather than set
   against the left edge of the marketing grid. */
.document .shell { max-width: 56rem; }

.document .doc-section {
  padding: var(--space-4) 0;
  border-top: var(--rule);
}

.document .doc-section > .num {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  color: var(--brass);
  display: block;
  margin-bottom: var(--space-2);
}

.document .doc-section > h2 {
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.3;
  max-width: 26ch;
  margin-bottom: var(--space-3);
}

.document p { font-size: 17.5px; line-height: 1.75; max-width: var(--measure); }
.document p + p { margin-top: var(--space-2); }

/* Each practice within a section leads with its own claim. */
.document .point { margin-top: var(--space-3); max-width: var(--measure); }
.document .point h3 {
  font-family: var(--font-named);
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: var(--tracking-named);
  margin-bottom: var(--space-1);
}

.pullquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  text-align: center;
}
.pullquote p {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.32;
  font-style: italic;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto;
}

.document .contents {
  padding: var(--space-3) 0 0;
  list-style: none;
}
.document .contents li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-utility);
  font-size: 13px;
}
.document .contents li span { color: var(--brass); letter-spacing: .1em; }
.document .contents a { color: var(--ink); text-decoration: none; }
.document .contents a:hover, .document .contents a:focus-visible { color: var(--moss); }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form { max-width: 40rem; margin-top: var(--space-3); }

.field { margin-bottom: var(--space-3); }

.field > label,
fieldset > legend {
  display: block;
  font-family: var(--font-utility);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--space-1);
}

.field .hint {
  font-family: var(--font-utility);
  font-size: 12px;
  color: var(--stone);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 6px;
  display: block;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-utility);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: 12px 14px;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--moss);
  outline: 1px solid var(--moss);
  outline-offset: -2px;
}

/* Radio set — the two paths. */
fieldset { border: none; margin-bottom: var(--space-3); }

.choices { display: grid; gap: 0; border-top: var(--rule); }

.choices label {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 14px 2px;
  border-bottom: var(--rule);
  font-family: var(--font-utility);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.choices input { accent-color: var(--moss); }

/* Honeypot. Hidden from people, reachable by a bot that fills every input.
   Not display:none — some bots skip those. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-family: var(--font-utility);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--space-2);
  padding: 12px 14px;
  border-left: 2px solid var(--brass);
  background: var(--ivory);
  color: var(--ink);
}
.form-status[hidden] { display: none; }

.form-note {
  font-family: var(--font-utility);
  font-size: 13px;
  color: var(--stone);
  margin-top: var(--space-2);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer.colophon-footer {
  margin-top: var(--space-5);
  padding: var(--space-4) 0 var(--space-4);
  border-top: var(--rule);
  text-align: center;
}

footer.colophon-footer .a-mark {
  width: 30px;
  height: 30px;
  margin: 0 auto var(--space-2);
  color: var(--brass);
}

footer.colophon-footer .wordmark { font-size: 20px; }

footer.colophon-footer .meta {
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--stone);
  margin-top: var(--space-2);
}
footer.colophon-footer .meta a { color: var(--stone); text-decoration: none; border-bottom: 1px solid var(--hairline); }
footer.colophon-footer .meta a:hover { color: var(--moss); }
footer.colophon-footer .legal {
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--stone);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Narrow viewports
   -------------------------------------------------------------------------- */

@media (max-width: 46rem) {
  body { font-size: 17px; }

  .shell { padding: 0 var(--space-2); }

  section { padding: var(--space-4) 0; }
  .hero { padding: var(--space-5) 0 var(--space-4); }

  nav.primary { gap: var(--space-2); font-size: 11px; }

  .engagements { grid-template-columns: 1fr; }
  .engagement { border-left: none; border-top: var(--rule); }
  .engagement:first-child { border-top: none; }

  .ledger-row { grid-template-columns: 1fr; gap: var(--space-1); }

  .document .doc-section { padding: var(--space-3) 0; }
  .document p { font-size: 16.5px; }

  .actions .button { width: 100%; text-align: center; }
}