/* ==========================================================================
   APS at 90 — "The Ledger" design system
   Extracted from design-concepts.html (Concept A, approved).
   Single source of truth for tokens — extend here, don't invent one-offs
   in a page.
   ========================================================================== */

:root{
  /* Colour */
  --paper:        #F7F1E3;  /* base ground — aged paper */
  --paper-deep:    #ECDFBE;  /* deeper paper tint — index strips, print mounts */
  --paper-raised:  #FFFDF6;  /* lightest surface — cards sat on paper */
  --maroon:        #6E1F2B;  /* primary brand maroon */
  --maroon-deep:   #48141C;  /* dark bands, headline colour, footer ground */
  --brass:         #A9812F;  /* eyebrows, rules, accents on paper */
  --brass-light:   #D8B968;  /* accents on maroon/dark grounds only */
  --ink:           #2B2117;  /* body text — warm sepia-black, never pure black */
  --ink-soft:      #4A4030;  /* secondary/muted text */
  --ink-faint:     #7A6E58;  /* captions, filed-under notes, timestamps */
  --line:          rgba(43,27,23,0.15);   /* hairline borders */
  --line-strong:   rgba(43,27,23,0.28);

  /* Radius — deliberately sharp, matches the flagship system */
  --radius: 2px;

  /* Type */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --stamp: "Special Elite", "Courier New", monospace;

  /* Layout rhythm — matches flagship (DESIGN-SYSTEM.md) for family continuity */
  --content-max: 1180px;
  --pad: 32px;
  --pad-mobile: 18px;
  --rhythm: 88px;
  --rhythm-tight: 64px;
  --gutter: 32px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:
    repeating-linear-gradient(0deg, rgba(43,33,23,0.022) 0px, rgba(43,33,23,0.022) 1px, transparent 1px, transparent 3px),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration: none; }

.container{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (max-width:480px){
  .container{ padding: 0 var(--pad-mobile); }
}

.eyebrow{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 14px;
}
.eyebrow.on-dark{ color: var(--brass-light); }

.stamp-label{
  font-family: var(--stamp);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--maroon);
}

h1,h2,h3{
  font-family: var(--serif);
  font-weight: 500;
  color: var(--maroon-deep);
  line-height: 1.15;
  margin: 0 0 18px;
  text-wrap: balance;
}
h1 em, h2 em, h3 em{ font-style: italic; color: var(--maroon); }

p{ margin: 0 0 16px; color: var(--ink-soft); }

.btn{
  display:inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 13px 26px;
  border-radius: var(--radius);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.btn-primary{
  background: var(--maroon);
  color: var(--paper-raised);
  border: 1px solid var(--maroon);
}
.btn-primary:hover{ background: var(--maroon-deep); border-color: var(--maroon-deep); }
.btn-outline{
  background: transparent;
  color: var(--maroon);
  border: 1px solid var(--brass);
}
.btn-outline:hover{ background: rgba(169,129,47,0.08); }
.btn-outline.on-dark{ color: var(--brass-light); border-color: var(--brass-light); }
.btn-outline.on-dark:hover{ background: rgba(216,185,104,0.12); }

a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

section{ padding: var(--rhythm) 0; }
section.tight{ padding: var(--rhythm-tight) 0; }
@media (max-width:760px){
  section{ padding: 56px 0; }
  section.tight{ padding: 44px 0; }
}

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

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