/* SS Advisory — site.css
   Page-level layout shared across all pages (Home, Who, The Work, Contact).
   The BRAND VALUES live in ss_advisory_tokens.css; this file only arranges them.
   Every page links both: tokens first, then this file. */

body { background: var(--bg-navy-deep); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- Header ground variables ----------
   Extend the token ground classes so the header recolours itself depending on
   whether it sits on navy or cream — without editing the tokens file. */
.ss-navy, .ss-navy-deep {
  --head-ink:    var(--gold-200);
  --head-muted:  var(--on-navy-muted);
  --head-accent: var(--on-navy-accent);
  --head-line:   var(--line-cool);
}
.ss-paper {
  --head-ink:    var(--on-paper-accent);
  --head-muted:  var(--on-paper-soft);
  --head-accent: var(--on-paper-accent);
  --head-line:   var(--line-navy);
}

/* ---------- Header ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  max-width: 1180px; margin-inline: auto;
  padding: var(--space-6) var(--margin-page) 0;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-4); }
/* #5 — the real S monogram (extracted from LOGO.png as a transparent
   silhouette). Painted with the ground's accent variable, so it recolours
   itself: antique gold on navy, deeper gold on cream. Aspect 0.583. */
.monogram {
  display: inline-block; flex: none;
  width: 23px; height: 40px;
  background-color: var(--head-accent);
  -webkit-mask: url("monogram.png") center / contain no-repeat;
          mask: url("monogram.png") center / contain no-repeat;
}
.wordmark {
  font-family: var(--font-sans); font-weight: var(--weight-sans-md);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-name);
  text-transform: uppercase; color: var(--head-ink);
}
/* Full trade name (Home only). Tighter tracking + no wrap so it sits on one line. */
.wordmark--full { letter-spacing: 0.14em; white-space: nowrap; }
.nav { display: flex; gap: var(--space-6); }
.nav a {
  font-family: var(--font-sans); font-weight: var(--weight-sans);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--head-muted);
  transition: color var(--dur) var(--ease-soft);
}
.nav a:hover, .nav a.is-current { color: var(--head-accent); }

/* ---------- Navy top wrapper with focal glow ---------- */
.top { position: relative; overflow: hidden; }
.top.ss-navy::before, .top.ss-navy-deep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* #7 — a faint, STATIC gold warmth bloomed behind the hero line. A whisper:
     not a bright gradient, not animation. (The brand file has no --focal-glow
     token; using the existing --gold-glow at very low opacity.) */
  background: radial-gradient(44% 38% at 30% 34%, var(--gold-glow) 0%, transparent 60%);
  opacity: .07;
}
.top > * { position: relative; }

/* ---------- Hero / page intro ---------- */
.hero {
  max-width: 1180px; margin-inline: auto;
  padding: clamp(var(--space-9), 16vh, 200px) var(--margin-page) clamp(var(--space-9), 14vh, var(--space-11));
}
.hero .ss-rule { margin: var(--space-5) 0 var(--space-6); }
.hero h1 { max-width: var(--measure-display); }
.hero.is-xl h1   { font-size: clamp(2.75rem, 8.5vw, var(--fs-display-xl)); }
.hero.is-page    { padding-bottom: var(--space-7); }
.hero.is-page h1 { font-size: clamp(2.25rem, 6vw, var(--fs-display-l)); max-width: 22ch; }
.hero .lead { max-width: 38ch; margin: var(--space-6) 0 0;
  font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
.ss-navy .hero .lead, .ss-navy-deep .hero .lead { color: var(--on-navy-body); }
.ss-paper .hero .lead { color: var(--on-paper-soft); }

/* Hero statement — thin (~2px) gold VERTICAL rule in the left margin marks the
   hero (per the visual system). The words carry the screen; generous air. */
.hero-statement { border-left: 2px solid var(--gold-500); padding-left: var(--space-6); }
.hero-lines {
  font-size: clamp(2.25rem, 6vw, var(--fs-display-l));
  max-width: 20ch; line-height: var(--lh-tight);
}

/* ---------- Section band ---------- */
.band { padding-block: clamp(var(--space-8), 13vw, var(--space-11)); }
.band--tight { padding-top: 0; }
.band .ss-eyebrow { display: block; margin-bottom: var(--space-5); }
.ss-paper .ss-eyebrow { color: var(--on-paper-accent); }
.band h2 { font-size: var(--fs-display-s); margin-bottom: var(--space-6); }
.band p  { font-size: var(--fs-body); }
.ss-paper p { color: var(--on-paper-body); }
.ss-navy p, .ss-navy-deep p { color: var(--on-navy-body); }
.ss-navy-deep h1, .ss-navy-deep h2, .ss-navy-deep h3 { color: var(--on-navy-display); }

/* ---------- Prose helpers ---------- */
/* #3 — every prose paragraph is ONE consistent size (--fs-body); no lead-in
   enlargement. The previous .lede size step read as a rendering glitch, not
   hierarchy. .lede now only relaxes line-height. */
.ss-prose p, .ss-prose .lede { font-size: var(--fs-body); }
.ss-prose .lede { line-height: var(--lh-relaxed); color: var(--on-paper-body); }
.subhead { display: block; margin: var(--space-8) 0 var(--space-4); }

/* ---------- Two-column "rail" — #2 column balance ----------
   Section label + gold rule anchored in the LEFT column; prose at ~62ch in the
   RIGHT column, so the text fills the width instead of floating in a narrow
   column with an empty half opposite. Left-aligned throughout (brand rule).
   The label is sticky so the left column keeps presence beside long prose. */
.rail { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-7); align-items: start; }
.rail-label { position: sticky; top: var(--space-6); }
.rail-label .ss-eyebrow { display: block; margin-bottom: var(--space-4); }
.rail-label .ss-rule { margin: 0; }
.rail + .rail { margin-top: var(--space-9); }

/* Head variant: a real heading (not just a label) anchors the left column. */
.rail--head .rail-label { position: static; }
.rail-head-title { font-size: clamp(1.9rem, 3.6vw, var(--fs-display-m));
  line-height: var(--lh-snug); margin: var(--space-4) 0 0; }
.act-summary { font-style: italic; color: var(--on-paper-soft); margin-bottom: var(--space-5); }

/* Visually-hidden heading, for pages whose H1 is carried by the label. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Pointer link ---------- */
.pointer {
  font-family: var(--font-sans); font-weight: var(--weight-sans-md);
  font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6);
}
.ss-paper .pointer { color: var(--on-paper-accent); }
.ss-navy .pointer, .ss-navy-deep .pointer { color: var(--on-navy-accent); }
.pointer::after { content: "\2192"; transition: transform var(--dur) var(--ease-soft); }
.pointer:hover::after { transform: translateX(4px); }

/* ---------- The three acts ---------- */
.acts { display: grid; gap: var(--space-7); grid-template-columns: repeat(3, 1fr); margin-top: var(--space-7); }
.act { border-top: 1px solid var(--line-gold); padding-top: var(--space-5); }
.act .idx { font-family: var(--font-sans); font-weight: var(--weight-sans);
  font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; }
.ss-navy .act .idx  { color: var(--on-navy-muted); }
.ss-paper .act .idx { color: var(--on-paper-soft); }
.act h3 { font-size: var(--fs-title); margin: var(--space-3) 0 var(--space-4); }
.ss-navy .act h3  { color: var(--on-navy-display); }
.ss-paper .act h3 { color: var(--on-paper-display); }
.act p { line-height: var(--lh-body); }

/* The Work page: acts as full-width editorial rows */
.acts--rows { grid-template-columns: 1fr; gap: 0; margin-top: var(--space-6); }
.acts--rows .act { padding-block: var(--space-7); }
.acts--rows .act:last-child { border-bottom: 1px solid var(--line-gold); }
.acts--rows .row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-7); align-items: start; }
.acts--rows .act h3 { font-size: var(--fs-display-s); margin: 0; }
.acts--rows .act .body { max-width: 54ch; }
.acts--rows .act .idx { display: block; margin-bottom: var(--space-3); }

/* ---------- Closing / contact ---------- */
.closing .invite { max-width: 46ch; font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
.address {
  /* #6 — discreet, not a banner. Body-size (a touch above body), still gold,
     thin gold rule kept beneath. The right person leans in to read it. */
  display: inline-block; margin-top: var(--space-6);
  font-family: var(--font-display); font-weight: var(--weight-body);
  font-size: var(--fs-body-l); color: var(--gold-400);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--line-gold); padding-bottom: var(--space-2);
  transition: color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.address:hover { color: var(--gold-glow); border-color: var(--gold-400); }

/* ---------- Footer ---------- */
.site-foot {
  max-width: 1180px; margin-inline: auto;
  padding: var(--space-8) var(--margin-page) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  border-top: 1px solid var(--head-line);
}
.site-foot .fine {
  font-family: var(--font-sans); font-weight: var(--weight-sans);
  font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--on-navy-muted);
}

/* Legal line — registered entity + jurisdiction. Non-contactable: fine print,
   no mailto/tel. The trade name "SS Advisory" stays in the page copy. */
.legal-bar {
  max-width: 1180px; margin-inline: auto;
  padding: 0 var(--margin-page) var(--space-8);
}
.legal {
  display: block;
  font-family: var(--font-sans); font-weight: var(--weight-sans);
  font-size: var(--fs-micro); letter-spacing: 0.08em; line-height: var(--lh-snug);
  color: var(--on-navy-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .nav { gap: var(--space-5); }
  .acts { grid-template-columns: 1fr; gap: var(--space-6); }
  .acts--rows .row { grid-template-columns: 1fr; gap: var(--space-4); }
  .rail { grid-template-columns: 1fr; gap: var(--space-4); }
  .rail-label { position: static; margin-bottom: var(--space-2); }
  .site-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .wordmark { display: none; }   /* keep the monogram; drop the wordmark to make room for nav */
}