/* =========================================================
   Fortis Legal — base.css
   Reset, design tokens, typography, utilities
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- Design tokens ---------- */
:root {
  /* -------- Brand constants (never theme-shift) -------- */
  --brand-navy:  #0f2a5c;
  --brand-gold:  #c9a247;

  /* -------- DARK THEME (default) — navy + gold -------- */

  /* Surfaces — brand navy */
  --ink:        #0a1f47;   /* primary page — slightly richer than brand */
  --ink-2:      #0f2a5c;   /* brand navy (from logo artwork) */
  --ink-3:      #163368;   /* lifted surface */
  --line:       rgba(244, 239, 226, 0.12);
  --line-soft:  rgba(244, 239, 226, 0.07);

  /* Type colours */
  --bone:       #f4efe2;
  --bone-dim:   #d6d3c7;
  --muted:      #9aa4bd;   /* muted cool gray — reads on navy */
  --muted-dim:  #6372a0;

  /* Accent — brand gold */
  --accent:     #c9a247;
  --accent-2:   #e0bd64;

  /* Derived / compositional tokens */
  --header-bg:       rgba(10, 31, 71, 0.78);
  --nav-border:      rgba(244, 239, 226, 0.24);
  --surface-lo:      rgba(244, 239, 226, 0.035);
  --surface-md:      rgba(244, 239, 226, 0.05);
  --surface-hi:      rgba(244, 239, 226, 0.07);
  --dot-track:       rgba(244, 239, 226, 0.20);
  --nav-ring:        rgba(244, 239, 226, 0.20);
  --photo-scrim:     rgba(10, 31, 71, 0.35);
  --hero-glow-1:     rgba(201, 162, 71, 0.14);
  --hero-glow-2:     rgba(201, 162, 71, 0.08);
  --accent-glow:     rgba(201, 162, 71, 0.10);
  --accent-halo:     rgba(201, 162, 71, 0.16);
  --accent-sheen:    rgba(201, 162, 71, 0.60);
  --danger:          #c96a6a;

  /* Photo treatment — tamed on dark, crisper on light */
  --photo-grayscale: 0.15;
  --photo-contrast:  1.05;
  --photo-brightness: 0.9;

  /* Typography */
  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (fluid) */
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.25rem;     /* 20 */
  --fs-xl:   clamp(1.5rem, 2vw + .8rem, 2rem);
  --fs-2xl:  clamp(2rem, 3vw + 1rem, 3rem);
  --fs-3xl:  clamp(2.75rem, 5vw + 1rem, 5rem);
  --fs-4xl:  clamp(3.5rem, 8vw + 1rem, 9rem);

  /* Layout */
  --container: 1360px;
  --gutter:    clamp(20px, 4vw, 56px);
  --section-y: clamp(96px, 11vw, 180px);

  /* Motion */
  --ease:   cubic-bezier(.2, .7, .2, 1);
  --ease-2: cubic-bezier(.6, 0, .1, 1);
  --dur:    .7s;
}

/* ---------- LIGHT THEME — ivory + navy + gold ---------- */
:root[data-theme="light"] {
  /* Surfaces — ivory page, navy for alt surfaces */
  --ink:        #f4efe2;    /* warm ivory — becomes the "page" */
  --ink-2:      #ebe3ce;    /* alt surface */
  --ink-3:      #e0d6bb;    /* deepest alt */
  --line:       rgba(15, 42, 92, 0.14);
  --line-soft:  rgba(15, 42, 92, 0.07);

  /* Type colours — navy on ivory */
  --bone:       #0f2a5c;    /* brand navy as primary type */
  --bone-dim:   #2b3f6b;    /* body text */
  --muted:      #6b7594;    /* labels / meta */
  --muted-dim:  #9ba3bd;    /* placeholder */

  /* Accent — brand gold, deepened slightly for contrast on ivory */
  --accent:     #a67f22;
  --accent-2:   #c9a247;

  /* Derived / compositional tokens */
  --header-bg:       rgba(244, 239, 226, 0.80);
  --nav-border:      rgba(15, 42, 92, 0.22);
  --surface-lo:      rgba(15, 42, 92, 0.035);
  --surface-md:      rgba(15, 42, 92, 0.05);
  --surface-hi:      rgba(15, 42, 92, 0.07);
  --dot-track:       rgba(15, 42, 92, 0.20);
  --nav-ring:        rgba(15, 42, 92, 0.22);
  --photo-scrim:     rgba(244, 239, 226, 0.25);
  --hero-glow-1:     rgba(166, 127, 34, 0.12);
  --hero-glow-2:     rgba(166, 127, 34, 0.08);
  --accent-glow:     rgba(166, 127, 34, 0.16);
  --accent-halo:     rgba(166, 127, 34, 0.18);
  --accent-sheen:    rgba(166, 127, 34, 0.60);
  --danger:          #b33a3a;

  /* Photos render with full color on light ivory */
  --photo-grayscale: 0;
  --photo-contrast:  1;
  --photo-brightness: 1;

  color-scheme: light;
}

:root { color-scheme: dark; }

/* ---------- Body ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--bone);
  background: var(--ink);
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Smooth theme cross-fade — only on color-ish properties so layout stays crisp */
html.theme-animating,
html.theme-animating *,
html.theme-animating *::before,
html.theme-animating *::after {
  transition:
    background-color .5s var(--ease),
    color .5s var(--ease),
    border-color .5s var(--ease),
    fill .5s var(--ease),
    stroke .5s var(--ease),
    box-shadow .5s var(--ease),
    filter .5s var(--ease) !important;
}

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

/* ---------- Typography ---------- */
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-3xl);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.display.light { color: var(--bone); }

h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}

p { color: var(--bone-dim); }

em { font-style: italic; }

/* ---------- Utility / helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--ink);
  font-size: var(--fs-sm);
  z-index: 999;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 16px; }

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--bone);
  border-bottom: 1px solid var(--line);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.inline-link:hover { color: var(--accent); border-color: var(--accent); }
.inline-link--lg { font-size: var(--fs-md); margin-top: 48px; }

/* Section head — used across the site */
.section-head { margin-bottom: 64px; }
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px 80px;
  align-items: end;
}
.section-num {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.section-num.light { color: var(--accent); }
.section-lede {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 42ch;
}

/* Reveal (used by JS IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}