/* ==========================================================================
   Connor C Neville, CPA, PLLC - Design System : Tokens, Reset, Typography
   Aesthetic: ledger-and-brass. Charcoal-green ink, warm brass, aged paper.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted latin subsets) ------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  /* -- Ink (dominant ground) -- */
  --ink:        #0E1A17;
  --ink-2:      #16241F;
  --ink-3:      #1E2F29;
  --ink-line:   rgba(184, 134, 59, 0.16);

  /* -- Brass (single accent) -- */
  --brass:      #B8863B;   /* text/marks on ink   - 5.54:1 on --ink   */
  --brass-lt:   #D9A94E;   /* highlights, hovers                     */
  --brass-dk:   #8A6229;   /* text/marks on cream - 4.72:1 on --cream */

  /* -- Paper (light zones) -- */
  --cream:      #F4EFE4;
  --cream-2:    #EAE2D2;
  --cream-3:    #DED3BE;

  /* -- Oxide (tension only: tax bills, IRS notices, consequence copy) -- */
  --oxide:      #9E3B2A;   /* fills, borders, text on cream - 5.88:1 */
  --oxide-lt:   #D4614A;   /* text on ink - 4.75:1                   */

  /* -- Text roles -- */
  --on-ink:       #F4EFE4;               /* 15.6:1 */
  --on-ink-mute:  rgba(244,239,228,.62); /*  6.6:1 */
  --on-ink-faint: rgba(244,239,228,.55); /* 5.45:1 on --ink */
  --on-cream:     #14201C;
  --on-cream-mute:#4A5A54;               /*  6.4:1 */

  /* -- Surfaces (semantic; flipped by [data-zone]) -- */
  --bg:        var(--ink);
  --fg:        var(--on-ink);
  --fg-mute:   var(--on-ink-mute);
  --fg-faint:  var(--on-ink-faint);
  --accent:    var(--brass);
  --tension:   var(--oxide-lt);
  --rule:      var(--ink-line);
  --tint:      rgba(244, 239, 228, .055);

  /* -- Type families -- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono:    'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* -- Fluid type scale -- */
  --fs-hero:    clamp(3.05rem, 1.20rem + 8.60vw, 7.50rem);
  --fs-display: clamp(2.55rem, 1.30rem + 5.60vw, 5.50rem);
  --fs-h2:      clamp(2.10rem, 1.10rem + 3.20vw, 3.75rem);
  --fs-h3:      clamp(1.45rem, 1.05rem + 1.30vw, 2.15rem);
  --fs-h4:      clamp(1.15rem, 0.98rem + 0.55vw, 1.45rem);
  --fs-lead:    clamp(1.08rem, 0.95rem + 0.62vw, 1.42rem);
  --fs-body:    clamp(1.00rem, 0.95rem + 0.20vw, 1.09rem);
  --fs-sm:      0.875rem;
  --fs-label:   0.70rem;
  --fs-stat:    clamp(3.40rem, 2.00rem + 5.00vw, 6.50rem);
  --fs-marquee: clamp(3.50rem, 13vw, 15rem);

  /* -- Spacing (8px base, generous at scale) -- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3.2vw, 4.5rem);
  --measure:   62ch;
  --maxw:      1440px;

  /* -- Motion -- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur:       420ms;
  --dur-slow:  900ms;

  /* -- Depth (used sparingly; this design leans on rules, not shadows) -- */
  --lift: 0 1px 0 rgba(244,239,228,.05), 0 18px 40px -24px rgba(0,0,0,.75);
  --lift-cream: 0 1px 0 rgba(255,255,255,.6), 0 18px 40px -28px rgba(20,32,28,.45);
}

/* -- Zone: aged paper. Flips every semantic role. -- */
[data-zone='paper'] {
  --bg:       var(--cream);
  --fg:       var(--on-cream);
  --fg-mute:  var(--on-cream-mute);
  --fg-faint: rgba(20,32,28,.68); /* 5.39:1 on --cream */
  --accent:   var(--brass-dk);
  --tension:  var(--oxide);
  --rule:     rgba(20,32,28,.14);
  --tint:     rgba(20, 32, 28, .05);
}

[data-zone='paper-deep'] {
  --bg:       var(--cream-2);
  --fg:       var(--on-cream);
  --fg-mute:  var(--on-cream-mute);
  --fg-faint: rgba(20,32,28,.68); /* 5.39:1 on --cream-2 */
  --accent:   var(--brass-dk);
  --tension:  var(--oxide);
  --rule:     rgba(20,32,28,.16);
  --tint:     rgba(20, 32, 28, .05);
}

[data-zone='ink-deep'] {
  --bg:       #0A1512;
  --fg:       var(--on-ink);
  --fg-mute:  var(--on-ink-mute);
  --fg-faint: var(--on-ink-faint);
  --accent:   var(--brass);
  --tension:  var(--oxide-lt);
  --rule:     var(--ink-line);
  --tint:     rgba(244, 239, 228, .055);
}

/* ---------- 3. Reset ----------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--brass-dk) var(--ink);
}

body {
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

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

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--brass); color: var(--ink); }

/* Visible, brand-consistent focus for every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brass-lt);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 1000;
  background: var(--brass);
  color: var(--ink);
  padding: var(--s-3) var(--s-5);
  font: 500 var(--fs-sm)/1 var(--font-body);
  letter-spacing: .04em;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Typography ------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  font-variation-settings: 'opsz' 144;
}

h1 { font-size: var(--fs-hero); line-height: 0.94; letter-spacing: -0.032em; font-weight: 700; }
h2 { font-size: var(--fs-h2);   line-height: 1.00; letter-spacing: -0.026em; }
h3 { font-size: var(--fs-h3);   line-height: 1.12; letter-spacing: -0.018em; font-variation-settings: 'opsz' 72; }
h4 { font-size: var(--fs-h4);   line-height: 1.22; letter-spacing: -0.012em; font-variation-settings: 'opsz' 48; font-weight: 600; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
  text-wrap: balance;
}

/* Small caps ledger label - the recurring structural mark of this system. */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.label::before {
  content: '';
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: 1px;
  background: currentColor;
  opacity: .7;
}
.label--bare::before { display: none; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.52;
  color: var(--fg-mute);
  max-width: 46ch;
  text-wrap: pretty;
}

.prose p { max-width: var(--measure); color: var(--fg-mute); text-wrap: pretty; }
.prose p + p { margin-top: var(--s-4); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose em { font-style: italic; color: var(--fg); }

/* Brass-underscored emphasis inside headings. */
.mark {
  color: var(--accent);
  font-style: italic;
  font-variation-settings: 'opsz' 144;
}

/* Oxide-red tension word. Reserved for tax-bill / IRS-notice moments. */
.tension { color: var(--tension); }

/* Figures always align in columns - this is a ledger. */
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1; }

/* ---------- 5. Layout ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 900px; }
.wrap--wide   { max-width: 1680px; }

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
  /* Elements awaiting a slide-in reveal park 46px outside their box; clip so
     that never widens the document. `clip` (not `hidden`) keeps this from
     becoming a scroll container. */
  overflow-x: clip;
}

.section--flush { padding-block: 0; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* Hairline ledger rule - the system's primary divider. */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

.stack > * + * { margin-top: var(--s-5); }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-7); }

.grid { display: grid; gap: var(--s-6); }

/* Side-aligned zones: content lives in the outer 40% on wide screens so the
   hero canvas stays readable behind it. */
.zone-left  { max-width: 40rem; margin-right: auto; }
.zone-right { max-width: 40rem; margin-left: auto; text-align: right; }
.zone-right .label { flex-direction: row-reverse; }
.zone-right .lead  { margin-left: auto; }
.zone-center { max-width: 52rem; margin-inline: auto; text-align: center; }
.zone-center .label { justify-content: center; }
.zone-center .lead  { margin-inline: auto; }

/* ---------- 6. Texture --------------------------------------------------- */

/* Paper grain. feTurbulence baked to a data URI, multiplied over the ground. */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .38;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Fine ledger grid. Horizontal rules at 44px, one vertical brass margin line. */
.ledger-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule) 0 1px,
    transparent 1px 44px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  opacity: .55;
}

.section > .wrap { position: relative; z-index: 2; }

/* ---------- 7. Reduced motion -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal-on-scroll elements must never be left invisible. */
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .marquee__track { animation: none !important; transform: none !important; }
}