
:root {
   --ground: #4a1f22;
   --surface: #5b272b;
   --surface-2: #6f3337;
   --line: #915255;
   --ink-soft: #d0aeae;
   --ink: #fce0e0;
   --accent: #c2a262;
   --accent-ink: #111111;

   --ruhu-f48: 'Archivo', 'Archivo Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --ruhu-8e2: 'Source Sans 3', 'Source Sans 3 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --ruhu-9d0: "JetBrains Mono", 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;

   --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
   --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
   --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
   --text-md: clamp(1.125rem, 1.06rem + 0.35vw, 1.25rem);
   --text-lg: clamp(1.25rem, 1.15rem + 0.52vw, 1.5rem);
   --text-xl: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
   --text-2xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.625rem);
   --text-3xl: clamp(2.25rem, 1.85rem + 2vw, 3.375rem);
   --text-display: clamp(2.5rem, 1.95rem + 2.75vw, 4.25rem);

   --leading-none: 1;
   --leading-tight: 1.12;
   --leading-snug: 1.28;
   --leading-normal: 1.55;

   --leading-relaxed: 1.7;

   --tracking-tight: -0.035em;
   --tracking-snug: -0.018em;
   --tracking-normal: 0;
   --tracking-wide: 0.05em;
   --tracking-wider: 0.1em;

   --space-2xs: clamp(0.25rem, 0.22rem + 0.12vw, 0.375rem);
   --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
   --space-sm: clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
   --space-md: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
   --space-lg: clamp(2rem, 1.7rem + 1.4vw, 3rem);
   --space-xl: clamp(3rem, 2.4rem + 2.8vw, 5rem);
   --space-2xl: clamp(4.5rem, 3.6rem + 4.2vw, 7.5rem);

   --dock-height: 64px;
   --site-max: 1380px;
   --reading-max: 65ch;
   --radius-zero: 0px;

   --dur-fast: 160ms;
   --dur-med: 280ms;
   --dur-slow: 480ms;
   --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-expo: cubic-bezier(0.16, 1, 0.3, 1);

   --border-hairline: 1px solid var(--line);
   --border-heavy: 2px solid var(--line);
   --border-focus: 2px solid var(--accent);
   --shadow-recess: inset 0 1px 3px rgba(0, 0, 0, 0.4);
   --shadow-plate: 0 4px 16px rgba(0, 0, 0, 0.35);
   --shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.6);
}

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

html {
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--ruhu-8e2);
   font-size: 16px;
   line-height: var(--leading-normal);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
   scroll-padding-top: 2rem;
}

body {
   background-color: var(--ground);
   color: var(--ink);
   min-height: 100vh;
   position: relative;
   overflow-x: hidden;
   padding-bottom: var(--dock-height);
}

@media (min-width: 960px) {
   body {
      padding-bottom: 0;
   }
}

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

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

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

ul,
ol {
   list-style: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--ruhu-f48);
   font-weight: 800;
   line-height: var(--leading-tight);
   letter-spacing: var(--tracking-tight);
   color: var(--ink);
   text-wrap: balance;
}

h1 {
   font-size: var(--text-display);
   font-weight: 900;
   letter-spacing: -0.04em;
   line-height: var(--leading-none);
}

h2 {
   font-size: var(--text-2xl);
   font-weight: 800;
   line-height: var(--leading-tight);
}

h3 {
   font-size: var(--text-xl);
   font-weight: 800;
   line-height: var(--leading-snug);
}

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

p {
   max-width: var(--reading-max);
   color: var(--ink-soft);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
}

p.lede {
   font-size: var(--text-md);
   line-height: var(--leading-snug);
   color: var(--ink);
   font-weight: 400;
   max-width: var(--reading-max);
}

strong,
b {

   font-weight: 700;
   color: var(--ink);
}

small {
   font-size: var(--text-xs);
   line-height: var(--leading-normal);
   color: var(--ink-soft);
}

code,
pre,
kbd,
samp,
.mono {
   font-family: var(--ruhu-9d0);
   font-feature-settings: "tnum" 1, "zero" 1;
}

.tabular {
   font-family: var(--ruhu-9d0);
   font-variant-numeric: tabular-nums lining-nums;
   letter-spacing: -0.01em;
}

.skip-link {
   position: absolute;
   top: -9999px;
   left: 1rem;
   background-color: var(--accent);
   color: var(--accent-ink);
   padding: 0.75rem 1.25rem;
   font-weight: 700;
   font-size: var(--text-sm);
   z-index: 9999;
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   border: 1px solid var(--accent-ink);
}

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

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

.site-wrap {

   width: 100%;
   max-width: var(--site-max);
   margin-inline: 0;
   padding-inline: clamp(1rem, 0.8rem + 1.2vw, 2.5rem);
}

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

@media (min-width: 860px) {
   .grid-asymmetric.split-2-1 {
      grid-template-columns: 2fr 1fr;
      gap: var(--space-lg);
   }
   .grid-asymmetric.split-1-2 {
      grid-template-columns: 1fr 2fr;
      gap: var(--space-lg);
   }
}

.grid-asymmetric > * {
   min-width: 0;
}

.rule-solid {
   border: 0;
   border-top: var(--border-hairline);
   margin-block: var(--space-md);
   width: 100%;
}

.rule-heavy {
   border: 0;
   border-top: var(--border-heavy);
   margin-block: var(--space-lg);
   width: 100%;
}

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

.text-soft {
   color: var(--ink-soft);
}

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

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

#smooth-wrapper {
   position: relative;
   width: 100%;
   overflow: hidden;
}

#smooth-content {
   position: relative;
   width: 100%;
   overflow: visible;
}

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

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

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

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

.surface-box {
   background-color: var(--surface);
   border: var(--border-hairline);
   padding: var(--space-md);
}

.surface-card {
   background-color: var(--surface-2);
   border: var(--border-hairline);
   padding: var(--space-md);
}

.eyebrow-disabled {
   display: none;
}

.layout-stack {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

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

.align-left {
   text-align: left;
}

.border-bottom {
   border-bottom: var(--border-hairline);
}

.border-top {
   border-top: var(--border-hairline);
}
