/* Chapter 3 Capital — design tokens (Material Design 3)
   Seed #9C4A2E · SchemeFidelity · the site ships DARK ONLY. */

:root {
  color-scheme: dark;
  --md-sys-color-primary: #ffb59d;
  --md-sys-color-on-primary: #5b1a03;
  --md-sys-color-primary-container: #9c4a2e;
  --md-sys-color-on-primary-container: #ffd5c8;
  --md-sys-color-inverse-primary: #97472b;
  --md-sys-color-secondary: #f2baa8;
  --md-sys-color-on-secondary: #4a271b;
  --md-sys-color-secondary-container: #673f32;
  --md-sys-color-on-secondary-container: #e3ac9a;
  --md-sys-color-tertiary: #82d4d7;
  --md-sys-color-on-tertiary: #003738;
  --md-sys-color-tertiary-container: #006d70;
  --md-sys-color-on-tertiary-container: #9aecee;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-surface: #19120f;
  --md-sys-color-surface-dim: #19120f;
  --md-sys-color-surface-bright: #413734;
  --md-sys-color-surface-container-lowest: #140c0a;
  --md-sys-color-surface-container-low: #221a17;
  --md-sys-color-surface-container: #261e1b;
  --md-sys-color-surface-container-high: #312825;
  --md-sys-color-surface-container-highest: #3d3330;
  --md-sys-color-on-surface: #f0dfda;
  --md-sys-color-on-surface-variant: #dbc1b9;
  --md-sys-color-surface-variant: #55433d;
  --md-sys-color-outline: #a38c85;
  --md-sys-color-outline-variant: #55433d;
  --md-sys-color-inverse-surface: #f0dfda;
  --md-sys-color-inverse-on-surface: #382e2b;
  --md-sys-color-surface-tint: #ffb59d;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

/* UNUSED — light scheme kept for future use only.
   Not applied: no prefers-color-scheme switching, no toggle. */
[data-theme="light"] {
  color-scheme: light;
  --md-sys-color-primary: #7e3319;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #9c4a2e;
  --md-sys-color-on-primary-container: #ffd5c8;
  --md-sys-color-inverse-primary: #ffb59d;
  --md-sys-color-secondary: #7f5446;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #fec4b2;
  --md-sys-color-on-secondary-container: #7a4f41;
  --md-sys-color-tertiary: #005355;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #006d70;
  --md-sys-color-on-tertiary-container: #9aecee;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-surface: #fff8f6;
  --md-sys-color-surface-dim: #e7d6d2;
  --md-sys-color-surface-bright: #fff8f6;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fff1ed;
  --md-sys-color-surface-container: #fceae5;
  --md-sys-color-surface-container-high: #f6e5e0;
  --md-sys-color-surface-container-highest: #f0dfda;
  --md-sys-color-on-surface: #221a17;
  --md-sys-color-on-surface-variant: #55433d;
  --md-sys-color-surface-variant: #f8ddd5;
  --md-sys-color-outline: #88726c;
  --md-sys-color-outline-variant: #dbc1b9;
  --md-sys-color-inverse-surface: #382e2b;
  --md-sys-color-inverse-on-surface: #ffede8;
  --md-sys-color-surface-tint: #97472b;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

:root {
  --c3-font-brand: "Fraunces", Georgia, serif;
  --c3-font-plain: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-sys-typescale-display-large-font: var(--c3-font-brand);
  --md-sys-typescale-display-large-weight: 360;
  --md-sys-typescale-display-large-size: 3.5625rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-tracking: -0.5px;
  --md-sys-typescale-display-medium-font: var(--c3-font-brand);
  --md-sys-typescale-display-medium-weight: 360;
  --md-sys-typescale-display-medium-size: 2.8125rem;
  --md-sys-typescale-display-medium-line-height: 3.25rem;
  --md-sys-typescale-display-medium-tracking: -0.25px;
  --md-sys-typescale-display-small-font: var(--c3-font-brand);
  --md-sys-typescale-display-small-weight: 360;
  --md-sys-typescale-display-small-size: 2.25rem;
  --md-sys-typescale-display-small-line-height: 2.75rem;
  --md-sys-typescale-display-small-tracking: 0px;
  --md-sys-typescale-headline-large-font: var(--c3-font-brand);
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-tracking: -0.25px;
  --md-sys-typescale-headline-medium-font: var(--c3-font-brand);
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  --md-sys-typescale-headline-medium-tracking: 0px;
  --md-sys-typescale-headline-small-font: var(--c3-font-brand);
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-size: 1.5rem;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-tracking: 0px;
  --md-sys-typescale-title-large-font: var(--c3-font-plain);
  --md-sys-typescale-title-large-weight: 500;
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-tracking: 0px;
  --md-sys-typescale-title-medium-font: var(--c3-font-plain);
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-small-font: var(--c3-font-plain);
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-size: 0.875rem;
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-body-large-font: var(--c3-font-plain);
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-tracking: 0.15px;
  --md-sys-typescale-body-medium-font: var(--c3-font-plain);
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-small-font: var(--c3-font-plain);
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-size: 0.75rem;
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-tracking: 0.4px;
  --md-sys-typescale-label-large-font: var(--c3-font-plain);
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-medium-font: var(--c3-font-plain);
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-small-font: var(--c3-font-plain);
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-size: 0.6875rem;
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-tracking: 0.5px;

  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  --c3-space-0: 0px;
  --c3-space-1: 4px;
  --c3-space-2: 8px;
  --c3-space-3: 12px;
  --c3-space-4: 16px;
  --c3-space-6: 24px;
  --c3-space-8: 32px;
  --c3-space-10: 40px;
  --c3-space-12: 48px;
  --c3-space-16: 64px;
  --c3-space-20: 80px;
  --c3-space-24: 96px;
  --c3-space-32: 128px;

  --md-sys-state-hover-state-layer-opacity: 0.08;
  --md-sys-state-focus-state-layer-opacity: 0.10;
  --md-sys-state-pressed-state-layer-opacity: 0.10;
  --md-sys-state-disabled-container-opacity: 0.12;
  --md-sys-state-disabled-content-opacity: 0.38;
  --c3-focus-ring: 3px solid var(--md-sys-color-secondary);
  --c3-focus-ring-offset: 2px;
  --c3-scrim: rgb(0 0 0 / 0.32);

  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium2: 300ms;

  --c3-margin: 16px;          /* compact <600 */
  --c3-header-height: 64px;
  --c3-grid-gutter: 12px;
  --c3-max-width: 1440px;     /* incl. margins → 1280px content */
  --c3-measure: 66ch;
}
@media (min-width: 600px) { :root { --c3-margin: 32px; --c3-header-height: 80px; --c3-grid-gutter: 16px; } }
@media (min-width: 840px) { :root { --c3-margin: 80px; --c3-header-height: 104px; --c3-grid-gutter: 24px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* State layer example:
   background: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%); */

/* Fonts — self-hosted WOFF2, Latin subset (see HANDOFF.md) */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 360; font-display: swap; src: url("/fonts/fraunces-latin-360-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/fraunces-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 360; font-display: swap; src: url("/fonts/fraunces-latin-360-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Chapter 3 Capital — site styles. Breakpoints: compact <600, medium 600–839, expanded ≥840. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--md-sys-color-surface); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--c3-font-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
main { flex: 1 0 auto; }
main:focus { outline: none; }
.icon { flex: none; }

:focus-visible { outline: var(--c3-focus-ring); outline-offset: var(--c3-focus-ring-offset); }

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

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size) / var(--md-sys-typescale-label-large-line-height) var(--c3-font-plain);
  text-decoration: none;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--c3-max-width);
  margin-inline: auto;
  padding-inline: var(--c3-margin);
}

/* Section top spacing: 32 / 64 / 96 */
.section { padding-top: var(--c3-space-8); padding-bottom: var(--c3-space-16); }
@media (min-width: 600px) { .section { padding-top: var(--c3-space-16); } }
@media (min-width: 840px) { .section { padding-top: var(--c3-space-24); } }

/* Expanded: content starts one-third in (408 of 1280), as in the design. */
@media (min-width: 840px) {
  .offset { display: grid; grid-template-columns: minmax(0, 408fr) minmax(0, 872fr); }
  .offset > * { grid-column: 2; }
}

/* Inline text links: always underlined. */
.prose a, .fact__body a, .signature a, .legal a {
  color: var(--md-sys-color-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 2px;
}
.prose a:visited, .fact__body a:visited, .signature a:visited, .legal a:visited { color: var(--md-sys-color-tertiary); }
@media (hover: hover) {
  .prose a:hover, .fact__body a:hover, .signature a:hover, .legal a:hover { text-decoration-thickness: 2px; }
}

/* ---------- Header ---------- */
.header { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.header__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--c3-header-height);
  padding-inline: 4px;
}
@media (min-width: 600px) { .header__inner { padding-inline: var(--c3-margin); justify-content: space-between; } }

.wordmark {
  font-family: var(--c3-font-brand);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.75rem;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
}
@media (min-width: 600px) { .wordmark { font-size: 1.5rem; line-height: 1.875rem; letter-spacing: -0.4px; } }
@media (min-width: 840px) { .wordmark { font-size: 1.75rem; line-height: 2.25rem; } }
.wordmark--drawer { font-size: 1.375rem !important; line-height: 1.75rem !important; letter-spacing: 0 !important; }

.menu-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  flex: none;
}
@media (hover: hover) {
  .menu-button:hover, .icon-button:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
}
.menu-button:active, .icon-button:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); }
@media (min-width: 600px) { .menu-button { display: none; } }

.topnav { display: none; align-self: stretch; }
@media (min-width: 600px) { .topnav { display: block; } }
.topnav ul { display: flex; gap: 4px; height: 100%; }
.topnav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(100% + 1px);
  padding: 0 12px;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
}
@media (min-width: 840px) { .topnav__link { padding: 0 16px; } }
.topnav__link:focus-visible { outline-offset: -3px; border-radius: 4px; }
@media (hover: hover) {
  .topnav__link:hover { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
}
.topnav__link:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); }
.topnav__link[aria-current="page"] { color: var(--md-sys-color-primary); }
.topnav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--md-sys-color-primary);
}
@media (min-width: 840px) { .topnav__link[aria-current="page"]::after { left: 16px; right: 16px; } }

/* ---------- Navigation drawer (compact) ---------- */
.drawer { display: none; position: fixed; inset: 0; z-index: 100; }
.drawer:target, .drawer.is-active { display: block; }
@media (min-width: 600px) { .drawer, .drawer:target, .drawer.is-active { display: none; } }
.drawer__scrim { position: absolute; inset: 0; background: var(--c3-scrim); }
.drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(300px, calc(100vw - 56px));
  padding: 12px;
  overflow-y: auto;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding-left: 16px;
  margin-right: -4px;
}
.drawer nav { margin-top: 16px; position: relative; }
.drawer nav::before {
  content: "";
  position: absolute;
  top: -12px; left: 16px; right: 16px; /* 4px below the head row, 12px above the items */
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.drawer__link {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface-variant);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
}
@media (hover: hover) {
  .drawer__link:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); color: var(--md-sys-color-on-surface); }
}
.drawer__link:focus-visible { outline-offset: -3px; }
.drawer__link[aria-current="page"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Animated states (JS only). */
.drawer.is-active .drawer__scrim { opacity: 0; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate); }
.drawer.is-active .drawer__panel { transform: translateX(-100%); transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate); }
.drawer.is-open .drawer__scrim { opacity: 1; transition-duration: var(--md-sys-motion-duration-medium2); transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate); }
.drawer.is-open .drawer__panel { transform: none; transition-duration: var(--md-sys-motion-duration-medium2); transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
  font-family: var(--c3-font-plain);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn--filled {
  height: 48px;
  padding: 0 24px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
@media (hover: hover) {
  .btn--filled:hover { background: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary)); }
}
.btn--filled:active { background: color-mix(in srgb, var(--md-sys-color-on-primary) 10%, var(--md-sys-color-primary)); }
.btn--filled:focus-visible { background: color-mix(in srgb, var(--md-sys-color-on-primary) 10%, var(--md-sys-color-primary)); }
.btn--filled:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  cursor: default;
}
.btn--text {
  height: 40px;
  padding: 0 12px;
  margin-inline-start: -12px;
  color: var(--md-sys-color-primary);
}
@media (hover: hover) {
  .btn--text:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
}
.btn--text:active { background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }

/* ---------- Home ---------- */
.hero { padding-top: var(--c3-space-12); padding-bottom: var(--c3-space-16); }
@media (min-width: 600px) { .hero { padding-top: var(--c3-space-24); padding-bottom: var(--c3-space-24); } }
@media (min-width: 840px) { .hero { padding-top: var(--c3-space-32); padding-bottom: var(--c3-space-32); } }

.hero__title, .notfound__title {
  max-width: 12.6em;
  font-family: var(--md-sys-typescale-display-small-font);
  font-weight: var(--md-sys-typescale-display-small-weight);
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  color: var(--md-sys-color-on-surface);
  text-wrap: balance;
}
@media (min-width: 600px) {
  .hero__title, .notfound__title {
    font-size: var(--md-sys-typescale-display-medium-size);
    line-height: var(--md-sys-typescale-display-medium-line-height);
    letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  }
}
@media (min-width: 840px) {
  .hero__title, .notfound__title {
    font-size: var(--md-sys-typescale-display-large-size);
    line-height: var(--md-sys-typescale-display-large-line-height);
    letter-spacing: var(--md-sys-typescale-display-large-tracking);
  }
}
.hero__title { max-width: none; }
.hero__title em { font-style: italic; color: var(--md-sys-color-primary); }

.hero__lede {
  max-width: 34.5em;
  margin-top: var(--c3-space-6);
  color: var(--md-sys-color-on-surface-variant);
}
@media (min-width: 600px) { .hero__lede { margin-top: var(--c3-space-8); } }
.hero .btn { margin-top: var(--c3-space-6); }
@media (min-width: 600px) { .hero .btn { margin-top: var(--c3-space-8); } }

.strip { padding-bottom: var(--c3-space-12); }
.strip__heading {
  padding-top: var(--c3-space-6);
  margin-bottom: var(--c3-space-4);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--c3-grid-gutter);
}
@media (min-width: 600px) { .strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 840px) { .strip__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.strip__tile {
  display: block;
  border-radius: var(--md-sys-shape-corner-small);
}
.strip__tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--md-sys-shape-corner-small);
}
@media (hover: hover) {
  .strip__tile:hover { outline: 2px solid var(--md-sys-color-on-surface-variant); outline-offset: 2px; }
}
.strip__tile:focus-visible { outline: var(--c3-focus-ring); outline-offset: var(--c3-focus-ring-offset); }

/* ---------- Mission ---------- */
.prose { max-width: 42.5rem; }
.prose p + p { margin-top: var(--c3-space-6); }
.accent { font-style: normal; color: var(--md-sys-color-primary); }
.signature {
  margin-top: var(--c3-space-12);
  color: var(--md-sys-color-on-surface-variant);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.signature::before {
  content: "";
  display: block;
  width: 120px;
  margin-bottom: var(--c3-space-6);
  border-top: 1px solid var(--md-sys-color-outline);
}

/* ---------- Facts ---------- */
.fact {
  display: grid;
  gap: var(--c3-space-4);
  padding-block: var(--c3-space-8);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.fact--closing { border-top-color: var(--md-sys-color-outline); padding-top: var(--c3-space-12); }
@media (min-width: 600px) {
  .fact, .fact--closing { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--c3-space-6); padding-block: var(--c3-space-10); }
  .fact__body { grid-column: 2; grid-row: 1; }
}
@media (min-width: 840px) {
  .fact, .fact--closing { grid-template-columns: minmax(0, 408fr) minmax(0, 872fr); column-gap: 0; padding-block: var(--c3-space-12); }
  .fact__head { padding-right: var(--c3-space-6); }
}
.fact__num {
  margin-bottom: var(--c3-space-3);
  color: var(--md-sys-color-primary);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.fact h2 {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  letter-spacing: -0.2px; /* keeps "What’s in the name “Chapter 3”?" on one line at 390, as designed */
  text-wrap: balance;
}
@media (min-width: 600px) {
  .fact h2 {
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
    font-size: var(--md-sys-typescale-headline-medium-size);
    line-height: var(--md-sys-typescale-headline-medium-line-height);
  }
}
.fact__body { max-width: 41.5rem; }

/* ---------- Portfolio ---------- */
.portfolio { padding-bottom: var(--c3-space-20); }
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--c3-grid-gutter);
}
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 840px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards > li { display: flex; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__text {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  padding: 12px 12px 16px;
}
@media (min-width: 600px) { .card__text { padding: 16px 16px 20px; } }
.card__label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.card__name {
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.card__caption {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.card__icon { margin-top: 2px; color: var(--md-sys-color-on-surface-variant); }
@media (hover: hover) {
  .card:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container)); }
}
.card:focus-visible { background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, var(--md-sys-color-surface-container)); }

/* ---------- Contact ---------- */
.contact__intro { max-width: 400px; margin-bottom: var(--c3-space-8); }
@media (min-width: 600px) { .contact__intro { margin-bottom: var(--c3-space-10); } }
@media (min-width: 840px) {
  .contact { display: grid; grid-template-columns: minmax(0, 408fr) minmax(0, 872fr); align-items: start; }
  .contact__intro { max-width: none; margin-bottom: 0; padding-right: var(--c3-space-12); }
}
.contact__title {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}
.contact__lede { margin-top: var(--c3-space-3); color: var(--md-sys-color-on-surface-variant); }
@media (min-width: 600px) { .contact__lede { margin-top: var(--c3-space-4); } }
.contact { padding-bottom: var(--c3-space-20); }
.contact__main { max-width: 640px; }

.form__note {
  margin-bottom: 20px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--c3-space-4); }
@media (min-width: 600px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--email, .field--subject, .field--message { grid-column: 1 / -1; }
}

.field { position: relative; }
.field__input {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  caret-color: var(--md-sys-color-primary);
  font: inherit;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  appearance: none;
}
textarea.field__input { height: 144px; padding: 16px; resize: none; }
.field__input::placeholder { color: transparent; }
.field__input:focus { outline: none; }
@media (hover: hover) {
  .field__input:hover:not(:focus):not(:disabled) { border-color: var(--md-sys-color-on-surface); }
}
.field__input:focus { border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }

.field__label {
  position: absolute;
  left: 12px;
  top: 28px;
  padding: 0 4px;
  transform: translateY(-50%);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  pointer-events: none;
  transition: top var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), font-size var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.field--multi .field__label { top: 28px; }
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  top: 0;
  background: var(--md-sys-color-surface);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.field__input:focus + .field__label { color: var(--md-sys-color-primary); }

.field__error-icon { display: none; position: absolute; right: 12px; top: 16px; color: var(--md-sys-color-error); pointer-events: none; }
.field__error {
  margin: 4px 16px 0;
  color: var(--md-sys-color-error);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.field__error:empty { display: none; }
.field.is-invalid .field__input { border-color: var(--md-sys-color-error); box-shadow: inset 0 0 0 1px var(--md-sys-color-error); padding-right: 48px; }
.field.is-invalid textarea.field__input { padding-right: 48px; }
.field.is-invalid .field__label { color: var(--md-sys-color-error); }
.field.is-invalid .field__error-icon { display: block; }

.field__input:disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
.field__input:disabled + .field__label { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }

.form__failure {
  margin-top: var(--c3-space-6);
  color: var(--md-sys-color-error);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.form__actions { display: flex; justify-content: flex-end; margin-top: var(--c3-space-6); }
.btn--submit { padding: 0 32px; }
.btn--submit[aria-disabled="true"] { cursor: progress; }
.btn__spinner { display: inline-flex; }
.btn__spinner[hidden] { display: none; }
.btn__spinner .icon { animation: c3-spin 1s linear infinite; }
@keyframes c3-spin { to { transform: rotate(360deg); } }

.success {
  padding: var(--c3-space-10);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
}
.success:focus { outline: none; }
.success__icon { color: var(--md-sys-color-primary); }
.success__text {
  margin-top: var(--c3-space-4);
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
}

/* ---------- Privacy (long form) ---------- */
.legal { max-width: 42.5rem; }
.legal h1 {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}
.legal__updated {
  margin-top: var(--c3-space-2);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.legal h2 {
  margin-top: var(--c3-space-10);
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
}
.legal p, .legal ul { margin-top: var(--c3-space-4); }
.legal ul { padding-left: 28px; }
.legal li + li { margin-top: var(--c3-space-2); }
.legal strong { font-weight: 500; }
.legal a { overflow-wrap: anywhere; }

/* ---------- 404 ---------- */
.notfound { padding-top: var(--c3-space-12); }
@media (min-width: 600px) { .notfound { padding-top: var(--c3-space-24); } }
@media (min-width: 840px) { .notfound { padding-top: var(--c3-space-32); } }
.eyebrow {
  margin-bottom: var(--c3-space-6);
  color: var(--md-sys-color-primary);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
@media (min-width: 600px) { .eyebrow { margin-bottom: var(--c3-space-8); } }
.notfound__title { max-width: 11em; text-wrap: balance; }
.notfound .btn { margin-top: var(--c3-space-6); }
@media (min-width: 600px) { .notfound .btn { margin-top: var(--c3-space-8); } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--md-sys-color-outline-variant); }
.footer__inner {
  padding-top: var(--c3-space-6);
  padding-bottom: var(--c3-space-8);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}
.footer__pipe { margin-inline: 8px; }
.footer a {
  color: var(--md-sys-color-on-surface-variant);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 2px;
}
@media (hover: hover) { .footer a:hover { color: var(--md-sys-color-primary); } }