/* ================================================================
   Law Office of Michael N. Burt — site.css
   ================================================================ */

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

/* ---- Tokens ---- */
:root {
  --font-display: 'Fraunces', 'Times New Roman', Times, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Fluid type scale (clamp-based) */
  --step--2: clamp(0.69rem, 0.66rem + 0.16vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.21vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.34vw, 1.41rem);
  --step-2:  clamp(1.44rem, 1.34rem + 0.50vw, 1.76rem);
  --step-3:  clamp(1.73rem, 1.59rem + 0.71vw, 2.20rem);
  --step-4:  clamp(2.07rem, 1.88rem + 0.98vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.22rem + 1.34vw, 3.43rem);
  --step-6:  clamp(2.99rem, 2.62rem + 1.84vw, 4.29rem);
  --step-7:  clamp(3.58rem, 3.07rem + 2.50vw, 5.36rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9rem;

  /* Layout */
  --content: 72rem;
  --measure: 36rem;
  --measure-narrow: 28rem;
  --radius: 2px;

  /* Light theme (default) */
  --bg:        #FAF8F2;
  --bg-alt:    #F1EEE3;
  --surface:   #FFFFFF;
  --ink:       #0E0F12;
  --ink-2:     #2C2D32;
  --ink-3:     #6B6D74;
  --ink-4:     #9A9CA3;
  --rule:      #E2DDD0;
  --rule-soft: #ECE8DB;
  --accent:    #876D33;
  --accent-2:  #5C481E;
  --link:      #876D33;
  --error:     #B3261E;

  --shadow-1: 0 1px 2px rgba(20,18,10,0.04), 0 1px 1px rgba(20,18,10,0.04);
  --shadow-2: 0 14px 40px -12px rgba(20,18,10,0.14), 0 4px 8px rgba(20,18,10,0.04);

  --t-fast: 120ms ease;
  --t:      240ms ease;
  --t-slow: 480ms ease;
}

[data-theme="dark"] {
  --bg:        #0E0E10;
  --bg-alt:    #16161B;
  --surface:   #18181E;
  --ink:       #F4F1E7;
  --ink-2:     #C9C6BB;
  --ink-3:     #898882;
  --ink-4:     #62615C;
  --rule:      #2A2A30;
  --rule-soft: #1F1F25;
  --accent:    #D2B36A;
  --accent-2:  #EFD58F;
  --link:      #D2B36A;
  --error:     #E59A93;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 14px 50px -10px rgba(0,0,0,0.6);
}

html { color-scheme: light dark; }
[data-theme="dark"] html, [data-theme="dark"] body { color-scheme: dark; }

/* ---- Body ---- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  font-feature-settings: "kern", "liga", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t), color var(--t);
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
h1 { font-size: var(--step-7); font-weight: 300; line-height: 1.0; letter-spacing: -0.035em; }
h2 { font-size: var(--step-5); font-weight: 400; letter-spacing: -0.025em; }
h3 { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); font-weight: 500; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 500;
  display: inline-block;
}
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--ink-3); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--t-fast); }
a:hover { color: var(--accent-2); }

em { font-style: italic; }

/* ---- Layout primitives ---- */
.container { width: min(100% - 2rem, var(--content)); margin-inline: auto; }
.container--narrow { width: min(100% - 2rem, var(--measure)); margin-inline: auto; }
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--bg-alt); }
.flow > * + * { margin-top: 1em; }

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 1000;
  background: var(--ink); color: var(--bg); padding: 0.75rem 1rem;
  text-decoration: none; transition: top var(--t);
}
.skip-link:focus { top: 1rem; }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color var(--t), border-color var(--t);
}
.site-header__inner {
  width: min(100% - 2rem, var(--content));
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-l);
  padding-block: var(--space-s);
}
.brand { text-decoration: none; flex-shrink: 0; line-height: 1.1; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand__role {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-top: 1px;
}
.primary-nav { margin-inline-start: auto; }
.primary-nav ul { display: flex; gap: var(--space-l); align-items: center; }
.primary-nav a {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-decoration: none;
  text-transform: uppercase;
  padding-block: 0.5rem;
  position: relative;
  transition: color var(--t-fast);
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a[aria-current="page"] { color: var(--ink); }
.primary-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--accent);
}
.nav-cv { color: var(--accent) !important; }
.nav-cv:hover { color: var(--accent-2) !important; }

.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); transform: rotate(15deg); }
.theme-toggle__icon { width: 18px; height: 18px; }
.theme-toggle__icon--sun { display: none; }
.theme-toggle__icon--moon { display: block; }
[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

@media (max-width: 800px) {
  .site-header__inner { flex-wrap: wrap; gap: var(--space-s); }
  .primary-nav { order: 3; flex-basis: 100%; margin-inline-start: 0; overflow-x: auto; }
  .primary-nav ul { gap: var(--space-m); white-space: nowrap; }
  .theme-toggle { order: 2; }
}

/* ---- Hero ---- */
.hero { padding-block: var(--space-3xl) var(--space-2xl); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero__eyebrow { margin-bottom: var(--space-m); }
.hero__title { margin-bottom: var(--space-l); }
.hero__title em { color: var(--accent); }
.hero__lede { max-width: var(--measure); margin-bottom: var(--space-l); }
.hero__cta-row { display: flex; gap: var(--space-s); flex-wrap: wrap; }
.hero__portrait {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 800px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero__portrait { max-width: 22rem; margin-inline: auto; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  cursor: pointer;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg); transform: translateY(-1px); }
[data-theme="dark"] .btn { color: var(--bg); }
[data-theme="dark"] .btn:hover { color: var(--bg); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-1px); }

/* ---- Credentials strip ---- */
.credentials { border-block: 1px solid var(--rule); padding-block: var(--space-l); }
.credentials__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-l);
  text-align: center;
}
.credentials__item .num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  color: var(--accent);
  display: block;
  line-height: 1;
  letter-spacing: -0.02em;
}
.credentials__item .label {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Section heads ---- */
.section-head { margin-bottom: var(--space-xl); max-width: var(--measure); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-s); }
.section-head__intro { color: var(--ink-2); margin-top: var(--space-s); max-width: var(--measure); }

/* ---- Practice grid ---- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-l);
}
.practice {
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.practice:hover { border-color: var(--accent); transform: translateY(-2px); }
.practice__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--accent);
  font-feature-settings: "tnum";
  letter-spacing: 0.08em;
}
.practice__title { font-size: var(--step-2); margin-block: var(--space-s); }
.practice__desc { color: var(--ink-2); }

/* ---- Pull quote ---- */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.2;
  font-weight: 300;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.02em;
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}
.pullquote cite {
  display: block;
  margin-top: var(--space-m);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

/* ---- Bio grid ---- */
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-2xl);
  align-items: start;
}
.bio-grid__photo {
  position: sticky; top: 7rem;
  aspect-ratio: 4/5; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.bio-grid__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bio-grid__body p + p { margin-top: var(--space-m); }
@media (max-width: 800px) {
  .bio-grid { grid-template-columns: 1fr; gap: var(--space-l); }
  .bio-grid__photo { position: static; max-width: 22rem; margin-inline: auto; }
}

/* ---- Timeline ---- */
.timeline { border-top: 1px solid var(--rule); }
.timeline > li {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-l);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule);
}
.timeline__years {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
  font-size: var(--step-1);
  font-weight: 300;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.timeline__title { font-size: var(--step-2); margin-bottom: 0.4rem; }
.timeline__org { color: var(--ink-3); margin-bottom: var(--space-2xs); font-style: italic; }
.timeline__desc { color: var(--ink-2); max-width: var(--measure); }
@media (max-width: 700px) {
  .timeline > li { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* ---- Cases ---- */
.case-list { display: grid; gap: var(--space-m); }
.case {
  padding: var(--space-l);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--t-fast);
}
.case:hover { border-color: var(--accent); }
.case__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  margin-bottom: var(--space-2xs);
  font-weight: 400;
}
.case__court {
  font-size: var(--step--1);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-s);
}
.case__summary { color: var(--ink-2); max-width: var(--measure); }
.case__outcome {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Citations list (for published cases) ---- */
.citations { display: grid; gap: var(--space-s); border-top: 1px solid var(--rule); padding-top: var(--space-l); }
.citations li {
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-m);
  align-items: baseline;
}
.citations__name { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); }
.citations__cite { color: var(--ink-3); font-feature-settings: "tnum"; font-size: var(--step--1); white-space: nowrap; }
@media (max-width: 600px) {
  .citations li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---- Form ---- */
.form { max-width: var(--measure); }
.field { margin-block: var(--space-m); }
.field__label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}
.field__input, .field__textarea {
  display: block; width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__input:focus, .field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field__textarea { min-height: 9rem; resize: vertical; }
.field__hint { display: block; font-size: var(--step--1); color: var(--ink-3); margin-top: 0.5rem; }
.field--error .field__input, .field--error .field__textarea { border-color: var(--error); }
.field--error .field__hint { color: var(--error); }

.alert {
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.alert--success { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.alert--error { border-color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }

/* ---- Office card ---- */
.office-card {
  padding: var(--space-l);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ---- Lady Justice mark ---- */
.justice-mark {
  width: 200px;
  opacity: 0.55;
  margin-inline: auto;
  display: block;
  filter: none;
  transition: opacity var(--t);
}
[data-theme="dark"] .justice-mark { filter: invert(0.85) sepia(0.25) hue-rotate(15deg) brightness(0.95); opacity: 0.7; }

/* ---- Closing CTA section ---- */
.closing-cta {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 800px) {
  .closing-cta { grid-template-columns: 1fr; gap: var(--space-xl); }
  .closing-cta__mark { order: -1; }
}

/* ---- Footer ---- */
.site-footer {
  margin-top: var(--space-3xl);
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  padding-block: var(--space-2xl);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.site-footer__inner {
  width: min(100% - 2rem, var(--content));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: var(--space-2xl);
}
.site-footer__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--ink);
}
.site-footer__role { color: var(--ink-3); margin-top: 0.25rem; font-style: italic; }
.site-footer__contact p { margin: 0; line-height: 1.7; }
.site-footer__attorney-advertising {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.site-footer__disclaimer { font-size: var(--step--1); color: var(--ink-3); line-height: 1.6; }
.site-footer__copyright { margin-top: var(--space-m); font-size: var(--step--2); color: var(--ink-4); }
@media (max-width: 800px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-l); }
}

/* ---- Reveal animation ---- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease, transform 800ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

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

/* ---- Print ---- */
@media print {
  .site-header, .site-footer, .theme-toggle, .skip-link, .hero__cta-row, .nav-cv { display: none; }
  body { color: #000; background: #fff; }
}