:root {
   --ground: #EDE6E4;
   --surface: #DFD7D5;
   --surface-2: #CEC5C2;
   --line: #ABA2A0;
   --ink-soft: #514C4A;
   --ink: #2B2827;
   --accent: #A9605F;
   --accent-ink: #FFFFFF;


   --accent-hover: #965352;
   --accent-active: #824544;
   --surface-hover: #D5CCC9;
   --surface-active: #C8BFBC;
   --line-strong: #8A817F;
   --line-subtle: #D2C9C6;


   --vubi-303: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", serif;
   --vubi-c4c: "Spectral", "Spectral Fallback", "Book Antiqua", Palatino, serif;
   --vubi-614: "JetBrains Mono", "JetBrains Mono Fallback", Consolas, "Courier New", monospace;


   --btn-height: 2.75rem;
   --btn-radius: var(--radius-sm);


   --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
   --font-size-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
   --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
   --font-size-md: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
   --font-size-lg: clamp(1.3125rem, 1.2rem + 0.56vw, 1.5rem);
   --font-size-xl: clamp(1.625rem, 1.45rem + 0.88vw, 1.9375rem);
   --font-size-2xl: clamp(2rem, 1.72rem + 1.4vw, 2.5rem);
   --font-size-3xl: clamp(2.375rem, 1.95rem + 2.1vw, 3.25rem);
   --font-size-hero: clamp(2.625rem, 2.1rem + 2.6vw, 4rem);


   --line-height-tight: 1.15;
   --line-height-snug: 1.28;
   --line-height-normal: 1.55;
   --line-height-relaxed: 1.7;


   --spacing-3xs: 0.25rem;
   --spacing-2xs: 0.5rem;
   --spacing-xs: 0.75rem;
   --spacing-sm: 1rem;
   --spacing-md: 1.5rem;
   --spacing-lg: 2rem;
   --spacing-xl: 3rem;
   --spacing-2xl: 4.5rem;
   --spacing-3xl: 6rem;


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


   --shadow-subtle: 0 1px 3px rgba(43, 40, 39, 0.05);
   --shadow-card: 0 4px 16px -2px rgba(43, 40, 39, 0.07);
   --shadow-floating: 0 12px 32px -4px rgba(43, 40, 39, 0.12);


   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);

   --duration-instant: 120ms;
   --duration-fast: 180ms;
   --duration-normal: 260ms;
   --duration-slow: 400ms;


   --container-max: 1240px;
   --container-reading: 65ch;
   --header-height-desk: 5rem;
   --dock-height-mobile: 4.25rem;
}


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


html {
   font-size: 16px;
   scroll-behavior: smooth;
   scroll-padding-top: var(--header-height-desk);
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
}


body {
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--vubi-c4c);
   font-size: var(--font-size-base);
   line-height: var(--line-height-normal);
   font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   padding-bottom: var(--dock-height-mobile);
}


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


@media (pointer: coarse), (max-width: 768px) {
   .site-utility__item,
   .site-footer__links a,
   .site-footer__contact a,
   .site-footer__legal-links a,
   .site-footer__legal-links button,
   .contact-info a.num,
   .contact-info-block a,
   .shape-table td a,
   .shape-list__row a,
   .notes-row a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
   }
}


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


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


h1, h2, h3, h4, h5, h6 {
   font-family: var(--vubi-303);
   font-weight: 600;
   line-height: var(--line-height-snug);
   color: var(--ink);
   text-wrap: balance;
   overflow-wrap: break-word;
}


h1 {
   font-size: var(--font-size-hero);
   line-height: var(--line-height-tight);
   letter-spacing: -0.02em;
   margin-bottom: var(--spacing-sm);
}


h2 {
   font-size: var(--font-size-2xl);
   line-height: var(--line-height-tight);
   letter-spacing: -0.015em;
   margin-bottom: var(--spacing-sm);
}


h3 {
   font-size: var(--font-size-xl);
   line-height: var(--line-height-snug);
   letter-spacing: -0.01em;
   margin-bottom: var(--spacing-xs);
}


h4 {
   font-size: var(--font-size-lg);
   font-weight: 500;
   margin-bottom: var(--spacing-2xs);
}


p {
   max-width: var(--container-reading);
   margin-bottom: var(--spacing-sm);
   color: var(--ink);
}


p:last-child { margin-bottom: 0; }


.lede, .lead {
   font-size: var(--font-size-md);
   line-height: var(--line-height-relaxed);
   color: var(--ink-soft);
   max-width: var(--container-reading);
}


small, .text-sm {
   font-size: var(--font-size-sm);
   color: var(--ink-soft);
}


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


.num, .price, .time, .code, .stat-value {
   font-family: var(--vubi-614);
   font-variant-numeric: tabular-nums;
   letter-spacing: -0.01em;
}


a {
   color: inherit;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
   transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
}


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


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
}


ul, ol { list-style: none; }


table {
   width: 100%;
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;
}


th, td {
   text-align: left;
   vertical-align: top;
}


hr {
   border: 0;
   height: 1px;
   background-color: var(--line);
   margin: var(--spacing-xl) 0;
}


blockquote {
   border-left: 3px solid var(--accent);
   padding-left: var(--spacing-md);
   margin: var(--spacing-lg) 0;
   font-style: italic;
   font-size: var(--font-size-md);
   color: var(--ink);
}


cite {
   display: block;
   font-family: var(--vubi-614);
   font-size: var(--font-size-xs);
   font-style: normal;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--ink-soft);
   margin-top: var(--spacing-2xs);
}


.container {
   width: 100%;

   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--spacing-md);
   padding-right: var(--spacing-md);
}


@media (min-width: 768px) {
   .container {
      padding-left: var(--spacing-lg);
      padding-right: var(--spacing-lg);
   }
}


.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: fixed;
   top: var(--spacing-xs);

   left: var(--spacing-xs);
   z-index: 10000;
   background-color: var(--ink);
   color: var(--ground);
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: var(--radius-sm);
   font-family: var(--vubi-614);
   font-size: var(--font-size-sm);
   text-decoration: none;
   transform: translateY(-160%);
   transition: transform var(--duration-fast) var(--ease-out);
}


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


.section {
   padding-top: var(--spacing-2xl);
   padding-bottom: var(--spacing-2xl);
   border-bottom: 1px solid var(--line);
   position: relative;
}


@media (min-width: 1024px) {
   .section {
      padding-top: var(--spacing-3xl);
      padding-bottom: var(--spacing-3xl);
   }
}


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


.held-layout {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-lg);
   align-items: start;
   max-width: 100%;
}


@media (min-width: 1024px) {
   .held-layout {
      grid-template-columns: minmax(220px, 0.28fr) minmax(0, 0.72fr);
      gap: var(--spacing-xl);
   }


   .held-header {
      position: sticky;
      top: calc(var(--spacing-xl) + 1rem);
      align-self: start;
      min-width: 0;
   }
}


.held-header { padding-bottom: var(--spacing-md); }


.held-header h2 { margin-bottom: var(--spacing-xs); }


.held-header .lead {
   font-size: var(--font-size-base);
   color: var(--ink-soft);
}


.held-body { min-width: 0; }


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