/* Salio Capital LLC — single stylesheet.
   No framework, no CDN, no third-party request of any kind. Three reasons,
   all compliance-adjacent:
   1. A CDN or Google Fonts request sends your visitor's IP to a third party.
      Your Privacy Policy is stricter than the federal baseline; fewer third
      parties in the request path is fewer questions to answer.
   2. Every byte the browser loads is a byte you are responsible for.
   3. One page does not need a framework.

   The Content-Security-Policy in firebase.json sets `font-src 'self'` and
   `style-src 'self'`. A <link> to fonts.googleapis.com is therefore BLOCKED in
   production and the page silently falls back to Georgia — which is why the
   three faces below are served from /assets/fonts/ instead. If you ever find
   yourself adding a webfont <link>, you are about to ship a page that looks
   right locally and wrong in production.

   DESIGN SOURCE: "Salio Capital Brand Guidelines", Edition 1, August 2026.
   Every colour and every face below is a token from section 06. Nothing here
   is invented. See the layout note above `header` for what the arrangement is
   doing and why. */

/* ---------- faces ----------
   Extracted from the woff2 embedded in the brand guidelines file itself, so
   these are the specified faces rather than substitutes — the same provenance
   as the logo PNGs in ../Brand Assets/. Latin subset only; the site's copy is
   entirely Latin-1.

   EB Garamond and Jost ship from Google Fonts as VARIABLE fonts: one file
   covers the whole weight range, which is why 400/500/600 all point at
   eb-garamond.woff2 rather than at three static cuts. Declaring the range on
   `font-weight` is what lets the browser interpolate instead of synthesising
   a fake bold. */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('/assets/fonts/jost.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ----------
   Verbatim from section 06 of the guidelines. Do not add a colour here that is
   not in that section; the filing documents, the letterhead template and this
   site all read from the same eleven values, and that is the only reason they
   look like one firm. */

:root {
  /* core */
  --ink:      #2A2723;
  --gold:     #A8905C;
  --ivory:    #F7F4EC;

  /* neutrals */
  --paper:    #FDFBF6;
  --stone:    #E3DED2;
  --slate:    #6B6A64;
  --hairline: #C9C3B4;

  /* reserve — not used on this page. Deep Green is for charts, Oxblood for
     critical disclosures, and this page publishes no chart. Listed so the next
     person does not reach for an off-token colour. */
  --green:    #2F473A;
  --oxblood:  #6B2B2E;

  /* type */
  --serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* measure — ~65 characters at the body size, which is the readable line */
  --measure: 36rem;

  /* the rail that carries section headings; see the layout note below */
  --rail: 200px;
  --gutter: 48px;
  --pad: 72px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 17px/1.74 var(--serif);
  -webkit-font-smoothing: antialiased;

  /* Column flex with main growing, so the Ink footer closes the page against
     the bottom of the viewport rather than floating with an Ivory band under
     it. Most visible on 404, which is short. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

/* ---------- masthead ----------
   LAYOUT NOTE. The page is built as a masthead: a full-bleed Ink band carrying
   the reversed lockup and the firm's name, an Ivory body on a rail-and-column
   grid, and an Ink footer closing against the band that opened it.

   The rail matters for more than looks. Section headings sit in it rather than
   above the prose, so a reader looking for "Important disclosures" finds it by
   scanning one narrow column instead of reading through the page. A disclosure
   nobody can locate is a disclosure that is present but not prominent.

   THERE IS NO NAVIGATION, deliberately. The site is one page. A nav bar would
   put four words of visible text on the page that do not appear in Exhibit A
   of the Advertising Materials Statement filed with the Division, and the
   Firm's undertaking at §4 of that statement is to provide the Division with
   any materially revised version before publication. Adding nav means filing
   first. */

.masthead {
  background: var(--ink);
  color: var(--ivory);
  padding: 34px var(--pad) 0;
}

.masthead .lockup {
  display: block;
  width: 260px;   /* the guidelines' intended display width for the horizontal
                     lockup; the file is 1040px, so it is never upscaled */
  height: auto;
}

.masthead .hero {
  padding: 56px 0 74px;
  border-bottom: 1px solid var(--gold);
}

/* ---------- type ---------- */

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.14;
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.lede {
  font-size: 20px;
  line-height: 1.66;
  color: rgba(247, 244, 236, 0.72);
  max-width: 48ch;
  margin: 26px 0 0;
}

/* Section headings live in the rail. Jost 300 uppercase at 0.16em is the
   guidelines' Label step; Gold clears 3:1 against Ivory for graphic elements
   but fails for text below 18px, so the LABEL is Ink and only the rule above
   it is Gold. This is the same call recorded in the August brand-application
   log for `Salio Table Header`. */

h2 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  padding-top: 7px;
}

main section {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding: 52px var(--pad);
  border-bottom: 1px solid var(--hairline);
}

main section:last-of-type { border-bottom: none; }

.column { max-width: var(--measure); }

.column > p { margin: 0 0 18px; }
.column > p:last-child { margin-bottom: 0; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

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

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

strong { font-weight: 600; }

address {
  font-style: normal;
  line-height: 1.82;
}

/* <address> carries no margin of its own, so give the paragraph that follows
   it the same rhythm as paragraph-to-paragraph.

   Scoped to .column deliberately: `address + p` alone is specificity (0,0,2)
   and loses to `.column > p` at (0,1,1), whose `margin: 0 0 18px` shorthand
   sets margin-top back to zero. The two rules then silently cancel and the
   address runs into the paragraph below it. */
.column address + p { margin-top: 18px; }

/* Reference numbers in IBM Plex Mono, per section 02: the face is for
   "figures, tables, disclosures ... reference numbers and dates". The
   telephone number qualifies. The address line does NOT — setting "Tysons
   Corner, VA" in mono to reach the postal code puts a city name in a face
   reserved for numerals, which reads as a mistake rather than a system. */
.figure {
  font-family: var(--mono);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

/* ---- risk / disclosure callout ----
   Manual §9 requires advertising to be "fair, balanced, and not misleading" —
   a stricter standard than 21VAC5-80-200 A.13.f's bare "not misleading". In
   practice that means risk appears alongside benefit at COMPARABLE PROMINENCE.
   This callout exists to make that structural rather than a matter of memory:
   it is set at full body size, on Paper (the guidelines' raised surface), with
   a Gold rule. Do not restyle it smaller, and do not move it to the footer. */

.disclosure {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--gold);
  padding: 24px 28px;
  margin: 26px 0 0;
  max-width: var(--measure);
}

.disclosure p { margin: 0; }

/* ---------- footer ----------
   Ink, closing against the masthead. Same rail grid, so the page has one
   structure from top to bottom. */

footer {
  background: var(--ink);
  color: rgba(247, 244, 236, 0.66);
  padding: 40px var(--pad) 48px;
}

/* The footer text hangs off the same rail the sections use, so the page has
   one left edge from the masthead down. Indented with a margin rather than a
   grid cell, because the rail has nothing to put in it here and an empty grid
   cell would mean an empty element in the markup — one more thing a text
   extraction of this page has to be told to ignore. */
footer p {
  font-size: 15px;
  line-height: 1.76;
  max-width: 62ch;
  margin: 0 0 0 calc(var(--rail) + var(--gutter));
}

footer a { color: rgba(247, 244, 236, 0.9); }
footer a:hover { color: var(--gold); }

/* ---------- 404 ----------
   Same masthead, shorter hero, one line of prose hanging off the same rail the
   home page's sections use. */

.masthead--brief .hero h1 { font-size: 44px; }

.brief {
  padding: 56px var(--pad) 88px;
}

.brief p {
  font-size: 18px;
  max-width: var(--measure);
  margin: 0 0 0 calc(var(--rail) + var(--gutter));
}

/* ---------- narrow ----------
   The rail collapses and its heading sits above its column, which is where a
   heading normally goes. Nothing is hidden at any width; a disclosure that
   disappears on a phone has not been disclosed. */

@media (max-width: 900px) {
  :root { --pad: 32px; --gutter: 22px; }

  body { font-size: 16px; }

  h1 { font-size: 36px; }

  .lede { font-size: 18px; }

  .masthead .lockup { width: 208px; }

  .masthead .hero { padding: 40px 0 52px; }

  main section {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  footer p,
  .brief p { margin-left: 0; }

  .masthead--brief .hero h1 { font-size: 32px; }

  .brief { padding: 38px var(--pad) 56px; }

  main section { padding: 38px var(--pad); }

  h2 { padding-top: 0; }

  footer { padding: 32px var(--pad) 40px; }
}

@media (max-width: 420px) {
  :root { --pad: 22px; }
  h1 { font-size: 31px; }
}

/* ---------- print ----------
   Someone will print this page and put it in a file. Make it the letterhead. */

@media print {
  body { background: #fff; font-size: 11pt; }
  .masthead, footer { background: #fff !important; color: var(--ink); }
  .masthead { border-bottom: 1px solid var(--hairline); }
  .lede { color: var(--slate); }
  footer { color: var(--slate); border-top: 1px solid var(--hairline); }
  footer a { color: var(--ink); }
  main section { break-inside: avoid; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}