/* Dixie Law Group — Base & Typography */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background-color: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { display: block; }

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--c-red); }

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: 0.4em; }

/* ── Headings ──────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--c-navy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

.display {
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-red);
  margin-bottom: var(--sp-4);
  display: inline-block;
}

.eyebrow-muted { color: var(--c-text-muted); }

.lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
  color: var(--c-text);
  max-width: var(--prose-max);
}

.lede + p { margin-top: 1em; }

blockquote {
  margin: var(--sp-7) 0;
  padding: 0 0 0 var(--sp-5);
  border-left: 3px solid var(--c-red);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--c-navy);
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-style: normal;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-muted);
}

hr {
  border: 0;
  height: 1px;
  background: var(--c-rule);
  margin: var(--sp-8) 0;
}

/* ── Layout primitives ─────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.container-narrow {
  max-width: 880px;
}

.section {
  padding-block: var(--section-pad-y);
}

.section-tight {
  padding-block: calc(var(--section-pad-y) * 0.6);
}

.section-cream { background-color: var(--c-cream); }
.section-paper { background-color: var(--c-paper); }
.section-paper-deep { background-color: var(--c-paper-deep); }
.section-navy { background-color: var(--c-navy); color: var(--c-cream); }
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--c-cream); }
.section-navy .eyebrow { color: var(--c-red); }

/* Paper texture mutation (applied to EP + case-result sections) */
.tex-paper {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.012) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.010) 0%, transparent 50%),
    linear-gradient(180deg, transparent 0%, transparent 100%);
}

.tex-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ── Editorial grid ────────────────────────── */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.grid-2-col,
.grid-3-col {
  display: grid;
  gap: var(--gutter);
}

.grid-2-col { grid-template-columns: 1fr 1fr; }
.grid-3-col { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .grid-2-col, .grid-3-col { grid-template-columns: 1fr; }
}

/* asymmetric-offset mutation utilities */
.col-7  { grid-column: span 7; }
.col-5  { grid-column: span 5; }
.col-8  { grid-column: span 8; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-12 { grid-column: span 12; }
.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }

@media (max-width: 900px) {
  [class*="col-"] { grid-column: span 12; }
  [class*="offset-"] { grid-column-start: auto; }
}

/* ── Utilities ─────────────────────────────── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-red { color: var(--c-red); }
.text-navy { color: var(--c-navy); }
.text-muted { color: var(--c-text-muted); }
.serif { font-family: var(--font-display); }
.sans { font-family: var(--font-body); }
.uppercase { text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.italic { font-style: italic; }
.weight-bold { font-weight: var(--weight-bold); }
.weight-medium { font-weight: var(--weight-medium); }

.rule-top { border-top: var(--border-hairline); padding-top: var(--sp-6); }
.rule-bottom { border-bottom: var(--border-hairline); padding-bottom: var(--sp-6); }
.rule-red { border-top: 2px solid var(--c-red); padding-top: var(--sp-5); display: inline-block; }

.flow > * + * { margin-top: var(--sp-5); }
.flow-lg > * + * { margin-top: var(--sp-7); }

.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;
}

/* ── Responsive type scale ─────────────────── */
@media (max-width: 1100px) {
  :root {
    --fs-display: 5.5rem;
    --fs-h1: 3.5rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.75rem;
  }
}

@media (max-width: 720px) {
  :root {
    --fs-display: 3.5rem;
    --fs-h1: 2.5rem;
    --fs-h2: 1.875rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-body: 1rem;
    --fs-body-lg: 1.0625rem;
  }
}

/* ── Reduced motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}