:root {
   --ground: #EDE6E4;
   --surface-light: #F5EFEB;
   --surface-muted: #E3DBD8;
   --concrete: #696261;
   --concrete-dark: #4F4948;
   --concrete-deep: #2A2625;
   --ink: #1C1919;
   --ink-secondary: #4A4443;
   --ink-muted: #6B6261;
   --accent: #C46D5E;
   --accent-hover: #AF5749;
   --accent-light: #F2DDD8;
   --rule: #302B2A;
   --rule-muted: rgba(48, 43, 42, 0.22);
   --rule-accent: #C46D5E;
   --rule-light: rgba(237, 230, 228, 0.28);

   --zela-286: 'Big Shoulders Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Impact, sans-serif;
   --zela-d4e: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   --zela-82f: "JetBrains Mono", 'SF Mono', Consolas, Monaco, monospace;

   --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
   --fs-sm: clamp(0.84375rem, 0.81rem + 0.18vw, 0.9375rem);
   --fs-base: clamp(0.96875rem, 0.93rem + 0.22vw, 1.0625rem);
   --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
   --fs-lg: clamp(1.35rem, 1.22rem + 0.65vw, 1.625rem);
   --fs-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.375rem);
   --fs-2xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
   --fs-3xl: clamp(2.85rem, 2.2rem + 3.25vw, 4.75rem);
   --fs-huge: clamp(3.25rem, 2.5rem + 4.5vw, 6.25rem);

   --lh-solid: 0.92;
   --lh-tight: 1.1;
   --lh-snug: 1.25;
   --lh-base: 1.6;
   --lh-loose: 1.75;

   --measure-prose: 65ch;
   --measure-narrow: 48ch;

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

   --shell-max: 1280px;
   --shell-gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);

   --dur-fast: 140ms;
   --dur-normal: 220ms;
   --dur-slow: 400ms;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
   --ease-mechanical: cubic-bezier(0.2, 0, 0, 1);

   --border-thick: 3px solid var(--rule);
   --border-std: 2px solid var(--rule);
   --border-thin: 1px solid var(--rule);
   --border-muted: 1px solid var(--rule-muted);

   --focus-ring: 3px solid var(--accent);
   --focus-offset: 2px;
}

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

html {
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--zela-d4e);
   font-size: 16px;
   line-height: var(--lh-base);
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
   overflow-x: hidden;
}

body {
   background-color: var(--ground);
   color: var(--ink);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
   width: 100%;
}

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

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

button {
   cursor: pointer;
   background: none;
   border: none;
   text-align: left;
}

a {
   color: inherit;
   text-decoration-skip-ink: auto;
}

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

ul, ol {
   list-style: none;
}

h1, h2, h3, h4, h5, h6 {
   font-family: var(--zela-286);
   text-transform: uppercase;
   font-weight: 800;
   line-height: var(--lh-tight);
   letter-spacing: -0.01em;
   color: var(--ink);
   overflow-wrap: break-word;
   hyphens: manual;
}

h1 {
   font-size: var(--fs-3xl);
   font-weight: 900;
   line-height: var(--lh-solid);
   letter-spacing: -0.02em;
}

h2 {
   font-size: var(--fs-2xl);
   line-height: var(--lh-solid);
}

h3 {
   font-size: var(--fs-xl);
   line-height: var(--lh-tight);
}

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

p, li, dd {
   font-size: var(--fs-base);
   line-height: var(--lh-base);
   color: var(--ink-secondary);
   max-width: var(--measure-prose);
}

strong, b {
   font-weight: 600;
   color: var(--ink);
}

code, kbd, samp, pre {
   font-family: var(--zela-82f);
   font-size: 0.9em;
}

.skip-link {
   position: absolute;
   top: -100px;
   left: 1rem;
   background: var(--ink);
   color: var(--ground);
   padding: var(--sp-xs) var(--sp-md);
   font-family: var(--zela-82f);
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: 700;
   border: 2px solid var(--accent);
   z-index: 9999;
   transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
   top: 1rem;
   outline: none;
}

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

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

.shell-wide {
   width: 100%;
   padding-left: var(--shell-gutter);
   padding-right: var(--shell-gutter);
}

.prose {
   max-width: var(--measure-prose);
}

.prose > * + * {
   margin-top: var(--sp-md);
}

.prose h2 {
   margin-top: var(--sp-2xl);
   margin-bottom: var(--sp-sm);
}

.prose h3 {
   margin-top: var(--sp-xl);
   margin-bottom: var(--sp-xs);
}

.prose ul, .prose ol {
   padding-left: 1.25rem;
}

.prose ul > li {
   list-style-type: square;
   margin-top: 0.35rem;
}

.prose ol > li {
   list-style-type: decimal;
   margin-top: 0.35rem;
}

.prose blockquote {
   border-left: 4px solid var(--accent);
   padding-left: var(--sp-md);
   font-style: italic;

   color: var(--ink);
   margin: var(--sp-lg) 0;
}

.prose a {
   color: var(--ink);
   text-decoration: underline;

   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
}

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

.mono-meta {
   font-family: var(--zela-82f);
   font-size: var(--fs-xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--ink-muted);
}

.mono-spec {
   font-family: var(--zela-82f);
   font-size: var(--fs-sm);
   color: var(--ink);
}

.icon {
   width: 1.25em;
   height: 1.25em;
   fill: currentColor;
   flex-shrink: 0;
   display: inline-block;
   vertical-align: middle;
}

.icon-sm {
   width: 1em;
   height: 1em;
}

.icon-lg {
   width: 1.75em;
   height: 1.75em;
}

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

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }
  
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
  
   .marquee-track {
      animation: none !important;
      transform: none !important;
   }
}

.stack-xs > * + * { margin-top: var(--sp-2xs); }
.stack-sm > * + * { margin-top: var(--sp-xs); }
.stack-md > * + * { margin-top: var(--sp-md); }
.stack-lg > * + * { margin-top: var(--sp-lg); }
.stack-xl > * + * { margin-top: var(--sp-xl); }
.stack-2xl > * + * { margin-top: var(--sp-2xl); }

.cluster {
   display: flex;

   flex-wrap: wrap;
   gap: var(--sp-sm);
   align-items: center;
}

.cluster-tight {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-xs);
   align-items: center;
}

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

.grid-auto {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
   gap: var(--sp-xl);
}

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

@media (min-width: 768px) {
   .grid-2 {
      grid-template-columns: repeat(2, 1fr);
   }
}

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

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

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

.border-top-thick { border-top: var(--border-thick); }
.border-bottom-thick { border-bottom: var(--border-thick); }
.border-top-std { border-top: var(--border-std); }
.border-bottom-std { border-bottom: var(--border-std); }
.border-left-thick { border-left: var(--border-thick); }
.border-right-thick { border-right: var(--border-thick); }

.bg-ground { background-color: var(--ground); }
.bg-surface-light { background-color: var(--surface-light); }
.bg-surface-muted { background-color: var(--surface-muted); }
.bg-concrete { background-color: var(--concrete); color: var(--ground); }
.bg-concrete-dark { background-color: var(--concrete-dark); color: var(--ground); }
.bg-concrete-deep { background-color: var(--concrete-deep); color: var(--ground); }
.bg-ink { background-color: var(--ink); color: var(--ground); }

.bg-concrete p, .bg-concrete li, .bg-concrete-dark p, .bg-concrete-dark li, .bg-concrete-deep p, .bg-concrete-deep li, .bg-ink p, .bg-ink li {
   color: var(--surface-muted);
}

.bg-concrete h1, .bg-concrete h2, .bg-concrete h3, .bg-concrete h4,
.bg-concrete-dark h1, .bg-concrete-dark h2, .bg-concrete-dark h3, .bg-concrete-dark h4,
.bg-concrete-deep h1, .bg-concrete-deep h2, .bg-concrete-deep h3, .bg-concrete-deep h4,
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 {
   color: var(--surface-light);
}

.color-accent { color: var(--accent); }
.color-ink { color: var(--ink); }
.color-muted { color: var(--ink-muted); }