:root {
   --ground: #4a1f22;
   --ground-deep: #2e1214;
   --ground-surface: #3c181b;
   --ground-elevated: #562529;
   --ground-overlay: rgba(46, 18, 20, 0.94);
   --ground-translucent: rgba(74, 31, 34, 0.88);
   --ground-card: #381619;
   --paper: #f7f2e8;
   --paper-muted: #d8cebc;
   --paper-faint: rgba(247, 242, 232, 0.62);
   --paper-whisper: rgba(247, 242, 232, 0.12);
   --accent-gold: #c29b38;
   --accent-gold-hover: #d4ab46;
   --accent-gold-active: #a8832b;
   --accent-gold-subtle: rgba(194, 155, 56, 0.16);
   --hazard-line: #e07a2b;
   --hazard-line-subtle: rgba(224, 122, 43, 0.18);
   --border-subtle: rgba(247, 242, 232, 0.16);
   --border-medium: rgba(247, 242, 232, 0.28);
   --border-strong: rgba(247, 242, 232, 0.46);
   --border-gold: rgba(194, 155, 56, 0.5);
   --status-error: #ff5e5e;
   --status-error-bg: rgba(255, 94, 94, 0.12);
   --status-success: #52c480;
   --status-success-bg: rgba(82, 196, 128, 0.12);

   --gabo-005: "Syne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --gabo-a44: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --gabo-962: "Space Mono", "SFMono-Regular", Consolas, monospace;

   --text-hero: clamp(2.15rem, 5.8vw, 4.4rem);
   --text-h1: clamp(1.85rem, 4.4vw, 3.2rem);
   --text-h2: clamp(1.45rem, 3.2vw, 2.25rem);
   --text-h3: clamp(1.2rem, 2.2vw, 1.65rem);
   --text-h4: clamp(1.05rem, 1.6vw, 1.3rem);
   --text-lead: clamp(1.02rem, 1.3vw, 1.2rem);
   --text-body: clamp(0.92rem, 1.05vw, 1.02rem);
   --text-sm: clamp(0.8rem, 0.9vw, 0.88rem);
   --text-xs: clamp(0.7rem, 0.78vw, 0.76rem);

   --leading-tight: 1.08;
   --leading-snug: 1.22;
   --leading-normal: 1.52;
   --leading-relaxed: 1.7;

   --tracking-tight: -0.025em;
   --tracking-normal: 0em;
   --tracking-wide: 0.05em;
   --tracking-widest: 0.14em;
   --tracking-stencil: 0.18em;

   --space-3xs: 0.25rem;
   --space-2xs: 0.5rem;
   --space-xs: 0.75rem;
   --space-sm: 1rem;
   --space-md: 1.5rem;
   --space-lg: 2rem;
   --space-xl: 3rem;
   --space-2xl: 4.5rem;
   --space-3xl: 6.5rem;
   --space-section: clamp(3.5rem, 7.5vw, 6.75rem);
   --gutter: clamp(1rem, 4vw, 2.5rem);

   --container-max: 1240px;
   --container-narrow: 840px;
   --container-measure: 68ch;
   --caption-measure: 48ch;

   --radius-none: 0px;
   --radius-pill: 2px;
   --tap-min: 44px;

   --duration-instant: 120ms;
   --duration-fast: 180ms;
   --duration-normal: 260ms;
   --duration-slow: 450ms;
   --duration-deliberate: 750ms;
   --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
   --ease-industrial: cubic-bezier(0.16, 1, 0.3, 1);

   --shadow-subtle: 0 4px 12px rgba(20, 8, 9, 0.35);
   --shadow-medium: 0 8px 24px rgba(20, 8, 9, 0.52);
   --shadow-heavy: 0 16px 40px rgba(15, 6, 7, 0.72);
   --shadow-plate: 0 1px 0 rgba(247, 242, 232, 0.08), 0 12px 32px rgba(15, 6, 7, 0.55);

   --z-negative: -1;
   --z-ground: 0;
   --z-elevated: 10;
   --z-sticky: 100;
   --z-header: 200;
   --z-drawer: 300;
   --z-banner: 400;
   --z-chat: 500;
   --z-modal: 600;
   --z-tooltip: 700;
}

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

html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
   background-color: var(--ground);
   color: var(--paper);
}

body {
   font-family: var(--gabo-a44);
   font-size: var(--text-body);
   line-height: var(--leading-normal);
   font-weight: 400;
   color: var(--paper);
   background-color: var(--ground);
   min-height: 100vh;
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

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

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

a {
   color: inherit;
   text-decoration: none;
}

table {
   border-collapse: collapse;

   border-spacing: 0;
   width: 100%;
}

ul,
ol { list-style: none; }

fieldset { border: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--gabo-005);
   color: var(--paper);
   font-weight: 800;
   line-height: var(--leading-tight);
   letter-spacing: var(--tracking-tight);
   text-wrap: balance;
   overflow-wrap: break-word;
   word-break: normal;
}

h1 { font-size: var(--text-h1); }

h2 { font-size: var(--text-h2); }

h3 { font-size: var(--text-h3); }

h4 { font-size: var(--text-h4); }

p {
   color: var(--paper-muted);
   line-height: var(--leading-relaxed);
   max-width: var(--container-measure);
}

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

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

em,
i { font-style: italic; }

small {
   font-size: var(--text-sm);
   line-height: var(--leading-normal);
}

code,
kbd,
samp,
pre {
   font-family: var(--gabo-962);
   font-size: 0.9em;
}

address {
   font-style: normal;
   line-height: var(--leading-normal);
}

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

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

.shell-container--full {
   max-width: 100%;
   padding-left: 0;
   padding-right: 0;
}

.section-flow {
   padding-top: var(--space-section);
   padding-bottom: var(--space-section);
}

.section-flow--snug {
   padding-top: calc(var(--space-section) * 0.65);
   padding-bottom: calc(var(--space-section) * 0.65);
}

.section-flow--tall {
   padding-top: calc(var(--space-section) * 1.35);

   padding-bottom: calc(var(--space-section) * 1.35);
}

.surface-deep { background-color: var(--ground-deep); }

.surface-base { background-color: var(--ground); }

.surface-raised { background-color: var(--ground-surface); }

.surface-elevated { background-color: var(--ground-elevated); }

.border-subtle { border: 1px solid var(--border-subtle); }

.border-top-subtle { border-top: 1px solid var(--border-subtle); }

.border-bottom-subtle { border-bottom: 1px solid var(--border-subtle); }

.border-hazard { border-left: 3px solid var(--hazard-line); }

.border-gold { border-left: 3px solid var(--accent-gold); }

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

.skip-link {
   position: absolute;
   top: -100px;
   left: var(--gutter);
   background-color: var(--accent-gold);
   color: var(--ground-deep);
   font-family: var(--gabo-962);
   font-weight: 700;
   font-size: var(--text-sm);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   padding: 0.75rem 1.5rem;
   z-index: 9999;
   border-radius: var(--radius-none);
   box-shadow: var(--shadow-heavy);
   transition: top var(--duration-fast) var(--ease-out-quad);
}

.skip-link:focus-visible {
   top: 1rem;
   outline: 3px solid var(--paper);
   outline-offset: 2px;
}

.mono-tag {
   font-family: var(--gabo-962);
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-stencil);
   text-transform: uppercase;
   color: var(--accent-gold);
}

.mono-meta {
   font-family: var(--gabo-962);
   font-size: var(--text-sm);
   color: var(--paper-muted);
}

.hazard-rule {
   height: 2px;
   width: 100%;
   background-color: var(--hazard-line);
   margin: var(--space-md) 0;
}

.gold-rule {
   height: 1px;
   width: 100%;
   background-color: var(--accent-gold);
   opacity: 0.45;
   margin: var(--space-md) 0;
}

.subtle-rule {
   height: 1px;
   width: 100%;
   background-color: var(--border-subtle);
   margin: var(--space-md) 0;
}

.prose {
   color: var(--paper-muted);
   font-size: var(--text-body);
   line-height: var(--leading-relaxed);
   max-width: var(--container-measure);
}

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

.prose h2,
.prose h3,
.prose h4 {
   color: var(--paper);
   margin-top: var(--space-xl);
   margin-bottom: var(--space-sm);
}

.prose ul,
.prose ol {
   margin: var(--space-md) 0;
   padding-left: 1.5rem;
}

.prose ul { list-style: square; }

.prose ol { list-style: decimal; }

.prose li { margin-bottom: var(--space-xs); }

.prose blockquote {

   border-left: 3px solid var(--accent-gold);
   padding-left: var(--space-md);
   margin: var(--space-lg) 0;
   color: var(--paper);
   font-style: italic;
}

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

.flex-between {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--space-sm);
}

.flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
}

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