:root {
  --bg-ground:#a8503c;
  --bg-surface:#7b3424;
  --bg-surface-deep:#4f1f15;
  --bg-surface-elevated:#8c3c2a;
  --bg-translucent:rgba(123, 52, 36, 0.88);
  --bg-translucent-deep:rgba(79, 31, 21, 0.94);
  
  --text-main:#fff;
  --text-muted:#f8ece3;
  --text-dim:rgba(255, 255, 255, 0.88);
  --text-inverse:#4f1f15;

  --accent-sage:#eaf2e8;
  --accent-sage-soft:rgba(213, 229, 210, 0.22);
  --accent-sage-solid:#b8d1b4;

  --accent-gold:#f2ccaa;
  
  --border-ledger:rgba(247, 242, 236, 0.18);
  --border-ledger-strong:rgba(247, 242, 236, 0.32);
  --border-ledger-faint:rgba(247, 242, 236, 0.09);
  --border-focus:#ebdcc9;
  --border-accent:rgba(182, 200, 178, 0.45);
  --border-error:#f29e8e;

  --nada-d2e:'DM Serif Display', Georgia, serif;
  --nada-3dd:'Barlow Semi Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nada-d6b:'DM Mono', 'SF Mono', Consolas, monospace;

  --fs-xs:clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-sm:clamp(0.84rem, 0.8rem + 0.2vw, 0.92rem);
  --fs-base:clamp(0.96rem, 0.92rem + 0.25vw, 1.05rem);
  --fs-md:clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem);
  --fs-lg:clamp(1.28rem, 1.18rem + 0.6vw, 1.55rem);
  --fs-xl:clamp(1.52rem, 1.35rem + 0.9vw, 1.95rem);
  --fs-2xl:clamp(1.85rem, 1.55rem + 1.5vw, 2.55rem);
  --fs-3xl:clamp(2.2rem, 1.8rem + 2.2vw, 3.25rem);
  --fs-display:clamp(2.6rem, 2.1rem + 3vw, 4.2rem);

  --lh-tight:1.15;
  --lh-snug:1.3;
  --lh-base:1.65;
  --lh-relaxed:1.8;

  --space-2xs:0.25rem;
  --space-xs:0.5rem;
  --space-sm:0.75rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:3rem;
  --space-3xl:4.5rem;
  --space-4xl:6.5rem;

  --container-max:76rem;
  --container-narrow:56rem;
  --container-pad:clamp(0.65rem, 3.5vw, 2.5rem);

  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-pill:9999px;

  --shadow-sm:0 1px 3px rgba(35, 12, 8, 0.35);
  --shadow-md:0 4px 14px rgba(35, 12, 8, 0.45);
  --shadow-lg:0 12px 32px rgba(35, 12, 8, 0.55);
  --shadow-ambient:0 24px 60px rgba(35, 12, 8, 0.65);

  --dur-fast:140ms;
  --dur-med:240ms;
  --dur-slow:420ms;
  --ease-standard:cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

  --header-height:5.25rem;
  --utility-height:2.25rem;
}

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

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

body {
  background-color:var(--bg-ground);
  color:var(--text-main);
  font-family:var(--nada-3dd);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:var(--lh-base);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;

}

main {
  flex:1 0 auto;
  position:relative;
}

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

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

img {
  height:auto;
  font-style:italic;
  shape-margin:0.75rem;
}

table {
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
}

fieldset {
  border:none;
  padding:0;
  margin:0;
}

legend { padding:0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--nada-d2e);
  color:var(--text-main);
  font-weight:400;
  line-height:var(--lh-tight);
  text-wrap:balance;
  overflow-wrap:break-word;
  word-break:normal;
}

h1 {
  font-size:var(--fs-3xl);
  letter-spacing:-0.02em;
}

h2 {
  font-size:var(--fs-2xl);
  letter-spacing:-0.015em;
}

h3 {

  font-size:var(--fs-xl);
  letter-spacing:-0.01em;
}

h4 {
  font-size:var(--fs-lg);
  line-height:var(--lh-snug);
}

h5 {
  font-size:var(--fs-md);
  line-height:var(--lh-snug);
}

h6 {
  font-size:var(--fs-base);
  line-height:var(--lh-snug);
}

p {
  color:var(--text-main);
  max-width:68ch;
  text-wrap:pretty;
}

p + p { margin-top:var(--space-md); }

.text-lead {
  font-size:var(--fs-lg);
  line-height:var(--lh-snug);
  color:var(--text-main);
  font-weight:500;
  max-width:58ch;
}

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

.text-dim { color:var(--text-dim); }

.text-sage { color:var(--accent-sage); }

.text-display {
  font-family:var(--nada-d2e);
  font-size:var(--fs-display);
  line-height:1.08;
  letter-spacing:-0.025em;
}

.font-mono {
  font-family:var(--nada-d6b);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}

.font-display { font-family:var(--nada-d2e); }

.font-body { font-family:var(--nada-3dd); }

a {
  color:var(--text-main);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
}

a:hover { color:var(--accent-sage); }

a:focus-visible {
  outline:2px solid var(--border-focus);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}

b,
strong {
  font-weight:700;
  color:var(--text-main);
}

em,
i { font-style:italic; }

small {
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
}

mark {
  background-color:var(--accent-sage-soft);
  color:var(--text-main);
  padding:0.1em 0.3em;
  border-radius:var(--radius-xs);
}

code,
kbd,
samp {
  font-family:var(--nada-d6b);
  font-size:0.88em;
  background:var(--bg-surface-deep);
  color:var(--accent-sage);
  padding:0.15em 0.4em;
  border-radius:var(--radius-xs);
  border:1px solid var(--border-ledger);
}

pre {
  font-family:var(--nada-d6b);
  font-size:var(--fs-sm);
  background:var(--bg-surface-deep);
  color:var(--text-main);
  padding:var(--space-md);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-ledger);
  overflow-x:auto;
  line-height:1.5;
}

hr {
  border:none;
  border-top:1px solid var(--border-ledger);
  margin:var(--space-2xl) 0;
  width:100%;
}

blockquote {
  border-left:2px solid var(--accent-sage);
  padding:var(--space-sm) 0 var(--space-sm) var(--space-lg);
  margin:var(--space-xl) 0;
  font-family:var(--nada-d2e);
  font-size:var(--fs-lg);
  line-height:var(--lh-snug);
  color:var(--text-main);
  background:linear-gradient(90deg, rgba(182, 200, 178, 0.06), transparent 80%);
}

ul,
ol { padding-left:1.35rem; }

li + li { margin-top:var(--space-xs); }

dl {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xs) var(--space-lg);
}

@media (min-width: 480px) {
  dl { grid-template-columns:max-content 1fr; }
}

dt {
  font-family:var(--nada-d6b);
  font-size:var(--fs-sm);
  color:var(--text-muted);
}

dd {
  font-weight:500;
  color:var(--text-main);
}

.container {
  width:100%;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.container--narrow { max-width:var(--container-narrow); }

.container--fluid {
  max-width:100%;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

.section {
  position:relative;
  padding-top:clamp(2.8rem, 6vw, 5.5rem);
  padding-bottom:clamp(2.8rem, 6vw, 5.5rem);
}

.section--compact {
  padding-top:clamp(1.8rem, 4vw, 3.2rem);
  padding-bottom:clamp(1.8rem, 4vw, 3.2rem);
}

.section--hero {
  padding-top:clamp(2.5rem, 5vw, 4.8rem);
  padding-bottom:clamp(3rem, 6vw, 6rem);
}

.ledger-bound {
  position:relative;
  border-top:1px solid var(--border-ledger);
  border-bottom:1px solid var(--border-ledger);
}

.ledger-rule { position:relative; }

.ledger-rule::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background-color:var(--border-ledger);
  pointer-events:none;
}

.ledger-grid {
  display:grid;
  border-left:1px solid var(--border-ledger);
  border-top:1px solid var(--border-ledger);
}

.ledger-grid > * {
  border-right:1px solid var(--border-ledger);
  border-bottom:1px solid var(--border-ledger);
  min-width:0;
}

.grid {
  display:grid;
  gap:var(--space-lg);
}

.grid-2 {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
}

.grid-3 {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
}

.grid-4 {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

.flow > * + * { margin-top:var(--space-md); }

.flow-lg > * + * { margin-top:var(--space-xl); }

.flow-sm > * + * { margin-top:var(--space-xs); }

.flex { display:flex; }

.flex-col {
  display:flex;
  flex-direction:column;
}

.flex-wrap { flex-wrap:wrap; }

.items-center { align-items:center; }

.items-start { align-items:flex-start; }

.items-baseline { align-items:baseline; }

.justify-between { justify-content:space-between; }

.justify-center { justify-content:center; }

.justify-start { justify-content:flex-start; }

.justify-end { justify-content:flex-end; }

.gap-xs { gap:var(--space-xs); }

.gap-sm { gap:var(--space-sm); }

.gap-md { gap:var(--space-md); }

.gap-lg { gap:var(--space-lg); }

.gap-xl { gap:var(--space-xl); }

.relative { position:relative; }

.w-full { width:100%; }

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

.skip-link {
  position:absolute;
  top:var(--space-xs);
  left:var(--space-xs);
  z-index:10000;
  padding:var(--space-sm) var(--space-md);
  background:var(--bg-surface-deep);
  color:var(--text-main);
  border:1px solid var(--accent-sage);
  border-radius:var(--radius-xs);
  font-family:var(--nada-d6b);
  font-size:var(--fs-sm);
  transform:translateY(-160%);
  transition:transform var(--dur-fast) var(--ease-out);
  text-decoration:none;
}

.skip-link:focus {
  transform:translateY(0);
  outline:2px solid var(--border-focus);
}

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