/* ============================================================
   THE STRONG ANGLE — DESIGN SYSTEM
   One file. Every page loads it. Nothing gets invented per-page.

   The audit found 20 separate :root blocks, 18 corner radii, 39 content
   widths, 21 headline sizes and 2 page backgrounds across 40 pages. That
   inconsistency — not the typeface, not the copy — is what read as
   machine-assembled. Everything below exists to make those numbers small.

   Typefaces are unchanged on purpose: the wordmark is a serif, so the
   display face has to be. The discipline is new, not the fonts.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  color-scheme: only light;

  /* One ground. Warm-neutral, chosen so navy reads rich and gold reads
     metallic rather than yellow. */
  --sa-bg:        #faf9f6;
  --sa-surface:   #ffffff;
  --sa-sunken:    #f2f1ec;

  /* Ink is navy-black, never pure black — it sits with the brand instead of
     punching a hole in it. */
  --sa-ink:       #17202f;
  --sa-body:      #4d5765;
  --sa-muted:     #7b8494;
  --sa-line:      #e4e2da;
  --sa-line-firm: #cfccc2;

  /* Brand */
  --sa-navy:      #15294c;
  --sa-navy-deep: #101d36;
  --sa-gold:      #c9a84c;   /* fills and rules only — fails contrast as text on white */
  --sa-gold-ink:  #8a6b1f;   /* gold AS TEXT on light grounds */
  --sa-gold-lit:  #e7c869;   /* gold as text on navy */

  /* Semantic — deliberately separate from the accent */
  --sa-good:      #2f6b4a;
  --sa-warn:      #9a6a12;
  --sa-bad:       #a8403a;

  /* Radius — three, and only three */
  --sa-r-sm:      8px;    /* controls, inputs, chips */
  --sa-r-md:      16px;   /* cards, panels, media */
  --sa-r-pill:    999px;

  /* Spacing — 8px base */
  --sa-1: 8px;  --sa-2: 16px; --sa-3: 24px;
  --sa-4: 40px; --sa-5: 64px; --sa-6: 96px;

  /* Widths — two */
  --sa-page:  1120px;
  --sa-prose: 660px;
  --sa-read:  660px; /* alias of --sa-prose; an undefined width token fails silently to max-width:none */

  /* Type scale — six steps, 1.28 ratio, everything lands on it */
  --sa-t-label: 0.86rem;
  --sa-t-sm:    1.04rem;
  --sa-t-body:  1.1875rem;
  --sa-t-lede:  clamp(1.26rem, 1.8vw, 1.45rem);
  --sa-t-h2:    clamp(1.95rem, 3.9vw, 2.75rem);
  --sa-t-h1:    clamp(2.6rem, 5.7vw, 4rem);

  --sa-shadow:  0 12px 34px rgba(23,32,47,.07);
  --sa-shadow-l:0 24px 60px rgba(23,32,47,.13);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--sa-bg);
  color:var(--sa-body);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  font-size:var(--sa-t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,video,iframe{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--sa-gold-ink); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ---------- TYPE ---------- */
.sa-h1,.sa-h2,.sa-h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500; color:var(--sa-ink);
  line-height:1.06; letter-spacing:-.012em; text-wrap:balance;
}
.sa-h1{ font-size:var(--sa-t-h1); }
.sa-h2{ font-size:var(--sa-t-h2); line-height:1.1; }
.sa-h3{ font-size:1.45rem; line-height:1.2; }
.sa-h1 em,.sa-h2 em,.sa-h3 em{ font-style:italic; color:var(--sa-gold-ink); }

.sa-eyebrow{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:.19em; font-size:var(--sa-t-label); font-weight:600;
  color:var(--sa-gold-ink);
}
.sa-lede{ font-size:var(--sa-t-lede); color:var(--sa-body); max-width:58ch; }
.sa-small{ font-size:var(--sa-t-sm); color:var(--sa-muted); }

/* On navy, the whole type set flips together — never one token at a time. */
.sa-on-navy{ color:#c8d4e6; }
.sa-on-navy .sa-h1,.sa-on-navy .sa-h2,.sa-on-navy .sa-h3{ color:#fff; }
.sa-on-navy .sa-h1 em,.sa-on-navy .sa-h2 em,.sa-on-navy .sa-h3 em{ color:var(--sa-gold-lit); }
.sa-on-navy .sa-eyebrow{ color:var(--sa-gold-lit); }
.sa-on-navy .sa-lede{ color:#c8d4e6; }
.sa-on-navy .sa-small{ color:#93a3bd; }

/* ---------- LAYOUT ----------
   One section rhythm. No alternating tint bands — the audit found 17 of them
   being used as a substitute for actual hierarchy. */
.sa-sec{ padding:var(--sa-6) var(--sa-3); }
.sa-sec--tight{ padding:var(--sa-5) var(--sa-3); }
.sa-in{ max-width:var(--sa-page); margin:0 auto; }
.sa-prose{ max-width:var(--sa-prose); }

/* Ranged left is the default. Centring is a decision you make twice a page,
   not the thing that happens when nobody decided. */
.sa-head{ margin-bottom:var(--sa-4); max-width:var(--sa-prose); }
.sa-head .sa-eyebrow{ display:block; margin-bottom:var(--sa-1); }
.sa-head .sa-h2{ margin-bottom:12px; }
.sa-center{ text-align:center; margin-left:auto; margin-right:auto; }

.sa-dark{ background:linear-gradient(165deg,var(--sa-navy),var(--sa-navy-deep)); }
.sa-sunken{ background:var(--sa-sunken); }

/* ---------- GRID ---------- */
.sa-grid{ display:grid; gap:var(--sa-2); }
.sa-grid--2{ grid-template-columns:repeat(2,1fr); }
.sa-grid--3{ grid-template-columns:repeat(3,1fr); }
.sa-grid--4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .sa-grid--3,.sa-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .sa-grid--2,.sa-grid--3,.sa-grid--4{ grid-template-columns:1fr; } }

/* ---------- BUTTONS — two, not nineteen ---------- */
/* Buttons. Barlow rather than Barlow Condensed, with the tracking pulled in —
   condensed uppercase at small sizes with wide letter-spacing reads as a label,
   not an action. Feedback from a first-time user: "buttons could be clearer in
   colour and font type/size, throughout." */
.sa-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:15px 28px; min-height:48px; border:2px solid transparent; border-radius:var(--sa-r-sm);
  font-family:'Barlow',system-ui,sans-serif; text-transform:uppercase;
  letter-spacing:.05em; font-size:1rem; font-weight:700; line-height:1.15; text-decoration:none;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.sa-btn:hover{ transform:translateY(-2px); }
.sa-btn .sa-btn-meta{
  font-size:.8rem; letter-spacing:.01em; font-weight:500; opacity:.85; margin-top:4px;
  text-transform:none;
}
.sa-btn--primary{ background:var(--sa-navy); color:#fff; box-shadow:var(--sa-shadow); }
.sa-btn--primary:hover{ background:var(--sa-navy-deep); }
.sa-btn--gold{ background:var(--sa-gold); color:var(--sa-navy-deep); box-shadow:var(--sa-shadow); }
.sa-btn--gold:hover{ background:#bb9a3f; }
.sa-btn--quiet{ background:transparent; border-color:var(--sa-navy); color:var(--sa-navy); }
.sa-btn--quiet:hover{ border-color:var(--sa-gold-ink); color:var(--sa-gold-ink); }
.sa-on-navy .sa-btn--quiet{ border-color:rgba(231,200,105,.45); color:var(--sa-gold-lit); }
.sa-on-navy .sa-btn--quiet:hover{ border-color:var(--sa-gold-lit); background:rgba(255,255,255,.05); }

/* ---------- CARD ---------- */
.sa-card{
  background:var(--sa-surface); border:1px solid var(--sa-line);
  border-radius:var(--sa-r-md); padding:var(--sa-3);
}
.sa-card--raised{ box-shadow:var(--sa-shadow); }
.sa-card .sa-h3{ margin-bottom:6px; }
.sa-card p{ color:var(--sa-body); font-size:var(--sa-t-sm); }
.sa-on-navy .sa-card{
  background:rgba(255,255,255,.055); border-color:rgba(231,200,105,.2);
}
.sa-on-navy .sa-card p{ color:#b8c6dc; }

/* ---------- SMALL PARTS ---------- */
.sa-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:var(--sa-r-pill);
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:.13em; font-size:.72rem; font-weight:700;
  background:rgba(201,168,76,.16); color:var(--sa-gold-ink);
}
.sa-on-navy .sa-chip{ background:rgba(231,200,105,.16); color:var(--sa-gold-lit);
  border:1px solid rgba(231,200,105,.32); }

.sa-rule{ border:0; border-top:1px solid var(--sa-line); margin:var(--sa-4) 0; }

.sa-stack{ display:flex; flex-direction:column; gap:var(--sa-2); }
.sa-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* A quoted line. One treatment, used sparingly. */
.sa-quote{
  font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(1.35rem,2.6vw,1.85rem);
  line-height:1.42; color:var(--sa-ink); border-left:2px solid var(--sa-gold);
  padding-left:var(--sa-3); max-width:52ch;
}
.sa-quote cite{
  display:block; font-family:'Barlow Condensed',sans-serif; font-style:normal;
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
  color:var(--sa-muted); margin-top:14px;
}
.sa-on-navy .sa-quote{ color:#fff; }
.sa-on-navy .sa-quote cite{ color:#93a3bd; }

/* ---------- FOOTER ---------- */
.sa-footer{
  background:var(--sa-navy-deep); color:#93a3bd;
  padding:var(--sa-4) var(--sa-3); text-align:center;
}
.sa-footer a{ color:var(--sa-gold-lit); text-decoration:none; }
.sa-footer a:hover{ text-decoration:underline; }
.sa-footer .sa-creed{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:clamp(1.3rem,3vw,1.75rem); color:#fff; margin-bottom:12px;
}

@media(max-width:640px){
  :root{ --sa-6:64px; --sa-5:48px; }
  .sa-sec{ padding:var(--sa-6) var(--sa-2); }
}

/* ============================================================
   COMPATIBILITY LAYER
   Forty pages were each written against their own token names. Rather than
   rewrite every rule, the legacy names are aliased onto the system here and
   each page's own :root is deleted. One set of values, no markup churn.
   New work should use the --sa-* tokens above; these exist to converge what
   already shipped.
   ============================================================ */
:root{
  --bg:            var(--sa-bg);
  --paper:         var(--sa-surface);
  --white:         var(--sa-surface);
  --card:          var(--sa-surface);
  --bg-elev:       var(--sa-surface);
  --bg-elev-1:     var(--sa-surface);
  --bg-elev-2:     var(--sa-sunken);
  --bg-elev-3:     var(--sa-sunken);
  --cool:          var(--sa-sunken);

  --ink:           var(--sa-ink);
  --cream:         var(--sa-ink);
  --charcoal:      var(--sa-navy-deep);
  --ink-soft:      var(--sa-body);
  --cream-deep:    var(--sa-body);
  --gray:          var(--sa-muted);

  --line:          var(--sa-line);
  --line-cool:     var(--sa-line);
  --line-solid:    var(--sa-line-firm);
  --gray-line:     var(--sa-line);
  --gray-line-strong: var(--sa-line-firm);

  --gold:          var(--sa-gold);
  --gold-deep:     var(--sa-gold-ink);
  --gold-bright:   var(--sa-gold-ink);
  --gold-on-navy:  var(--sa-gold-lit);
  --amber:         var(--sa-gold);

  --royal:         var(--sa-navy);
  --royal-deep:    var(--sa-navy-deep);
  --navy:          var(--sa-navy);
  --navy-2:        var(--sa-navy-deep);
  --blue:          var(--sa-navy);

  --green:         var(--sa-good);
  --red:           var(--sa-bad);

  --shadow-md:     var(--sa-shadow);
  --shadow-lg:     var(--sa-shadow-l);
}

/* ============================================================
   STRUCTURAL COMPAT
   The same convergence as the token layer, applied to structure. These legacy
   class names appear on 8–30 pages each, every one with its own values. Defined
   once here, they inherit the system; a page only needs its own rule where the
   page genuinely differs.
   Declared BEFORE page <style> blocks, so any page can still override.
   ============================================================ */
.eyebrow{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:.19em; font-size:var(--sa-t-label); font-weight:600;
  color:var(--sa-gold-ink);
}
.display{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:500;
  line-height:1.06; letter-spacing:-.012em; text-wrap:balance; color:var(--sa-ink);
}
.display em{ font-style:italic; color:var(--sa-gold-ink); }

/* Any light-on-dark context: let the heading inherit, and switch the accent to the
   gold that actually reads on navy. Without this the compat colour above wins over
   an inherited white and the heading disappears into the ground. */
.hero .display, .band .display, .final .display, .next .display,
.is-dark .display, .sa-dark .display, .sa-on-navy .display,
.nil .display, .namelist .display, .free .display,
.hero h1, .hero h2, .band h2, .final h2,
.is-dark h2, .sa-dark h2{ color:inherit; }
.hero .display em, .band .display em, .final .display em, .next .display em,
.is-dark .display em, .sa-dark .display em, .sa-on-navy .display em,
.nil .display em, .namelist .display em, .free .display em{ color:var(--sa-gold-lit); }

.card{
  background:var(--sa-surface); border:1px solid var(--sa-line);
  border-radius:var(--sa-r-md); padding:var(--sa-3);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border-radius:var(--sa-r-sm); border:1.5px solid transparent;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:.95rem; font-weight:700; text-decoration:none; cursor:pointer;
}
.hero{ padding:var(--sa-6) var(--sa-3); }
.head{ margin-bottom:var(--sa-4); }
.wrap{ max-width:var(--sa-page); margin:0 auto; }
.footer{ background:var(--sa-navy-deep); color:#93a3bd; padding:var(--sa-4) var(--sa-3); }
.footer a{ color:var(--sa-gold-lit); text-decoration:none; }
.hidden{ display:none!important; }

/* ---- Legibility floor for page-local buttons ----------------------------
   Thirty-one pages still carry their own .btn rules, some down at .66rem in
   condensed capitals. `body .btn` outranks a bare `.btn` without touching
   colour, so each page keeps its palette and only gains size and a readable
   face. Deliberately small variants (.btn-sm / .btn-xs) are left alone. */
body .btn:not(.btn-sm):not(.btn-xs),
body .approve-btn,
body .btn-primary:not(.btn-sm),
body .btn-outline:not(.btn-sm){
  font-family:'Barlow',system-ui,sans-serif;
  font-size:.95rem; letter-spacing:.05em; font-weight:700; line-height:1.15;
  min-height:44px;
}
body .btn.btn-sm, body .btn.btn-xs{
  font-family:'Barlow',system-ui,sans-serif; letter-spacing:.04em; font-weight:700;
}
body .panel-cta, body .card-cta, body .card-lock, body .lk .pad{
  font-family:'Barlow',system-ui,sans-serif;
  font-size:.9rem; letter-spacing:.04em; font-weight:700;
}