:root {
   --ground: #e9edf1;
   --surface: #dadee3;

   --surface-2: #c7ccd2;
   --line: #a5aaae;
   --ink-soft: #4a4d51;
   --ink: #27292b;
   --accent: #2f7f8a;
   --accent-ink: #ffffff;

   --hopu-87a: "Space Grotesk", "Space Grotesk Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --hopu-4fe: "Archivo", "Archivo Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --hopu-c67: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

   --font-size-root: 16px;
   --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
   --text-sm: clamp(0.84375rem, 0.81rem + 0.2vw, 0.9375rem);
   --text-base: clamp(0.96875rem, 0.92rem + 0.25vw, 1.0625rem);
   --text-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
   --text-lg: clamp(1.3125rem, 1.2rem + 0.6vw, 1.5625rem);
   --text-xl: clamp(1.625rem, 1.45rem + 0.9vw, 2.0625rem);
   --text-2xl: clamp(2.0625rem, 1.8rem + 1.4vw, 2.75rem);
   --text-display: clamp(2.125rem, 1.65rem + 2.5vw, 4.25rem);

   --lh-tight: 1.15;
   --lh-snug: 1.3;
   --lh-body: 1.65;
   --lh-loose: 1.8;

   --tracking-tight: -0.025em;
   --tracking-normal: 0em;
   --tracking-wide: 0.05em;

   --measure-narrow: 45ch;
   --measure-body: 65ch;
   --measure-wide: 75ch;

   --shell-max: 1200px;
   --editorial-max: 1040px;
   --gutter: clamp(1.25rem, 4vw, 3.5rem);
   --section-rhythm: clamp(3.5rem, 7vw, 7rem);

   --dock-height: 64px;
   --strip-height: 48px;

   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --duration-fast: 140ms;
   --duration-normal: 220ms;
   --duration-slow: 380ms;
}

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

html {
   font-size: var(--font-size-root);
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--hopu-4fe);
   line-height: var(--lh-body);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--strip-height) + 1.5rem);
}

body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--hopu-4fe);
   font-size: var(--text-base);
   line-height: var(--lh-body);
   padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
}

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

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

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

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

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: 2px;
}

h1, h2, h3, h4, h5, h6 {
   margin: 0;
   font-family: var(--hopu-87a);
   font-weight: 700;
   line-height: var(--lh-tight);
   letter-spacing: var(--tracking-tight);
   color: var(--ink);
   text-wrap: balance;
}

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

h2 {
   font-size: var(--text-2xl);
   font-weight: 700;
}

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

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

p {
   margin: 0 0 1.25rem 0;
   max-width: var(--measure-body);
}

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

.lede {
   font-size: var(--text-md);
   line-height: var(--lh-snug);
   color: var(--ink-soft);
   max-width: var(--measure-body);
}

ul, ol {
   margin: 0 0 1.25rem 0;
   padding-left: 1.5rem;
}

ul:last-child, ol:last-child {
   margin-bottom: 0;
}

li {
   margin-bottom: 0.35rem;
   max-width: var(--measure-body);
}

blockquote {
   margin: 2rem 0;
   padding: 0;
   border: 0;
}

blockquote p {
   font-family: var(--hopu-87a);
   font-size: var(--text-xl);
   line-height: var(--lh-snug);
   letter-spacing: var(--tracking-tight);
   color: var(--ink);
   max-width: 32ch;
}

figure {
   margin: 0;
}

figcaption {
   font-size: var(--text-xs);
   line-height: 1.4;
   color: var(--ink-soft);
   margin-top: 0.5rem;
}

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

.tabular, [data-tabular] {
   font-family: var(--hopu-c67);
   font-variant-numeric: tabular-nums;
   font-feature-settings: "tnum" 1;
}

.icon {
   width: 1.25rem;
   height: 1.25rem;
   fill: currentColor;
   flex-shrink: 0;

   vertical-align: -0.15em;
}

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

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

.editorial-layout {
   display: block;
}

@media (min-width: 768px) {
   .editorial-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: clamp(1.5rem, 3.5vw, 3.5rem);
      align-items: start;
   }

   .editorial-layout--reversed {
      grid-template-columns: 220px minmax(0, 1fr);
   }
}

.editorial-main {
   min-width: 0;
}

.editorial-margin {
   min-width: 0;
   font-size: var(--text-sm);
   line-height: 1.5;
   color: var(--ink-soft);
   border-top: 1px solid var(--line);
   padding-top: 0.75rem;
   margin-top: 1.5rem;
}

@media (min-width: 768px) {
   .editorial-margin {
      margin-top: 0;
      border-top: 1px solid var(--line);
      padding-top: 0.5rem;
   }
}

.editorial-margin-block {
   margin-bottom: 1.5rem;
}

.editorial-margin-block:last-child {
   margin-bottom: 0;
}

.editorial-margin-label {
   display: block;
   font-family: var(--hopu-c67);
   font-size: var(--text-xs);
   color: var(--ink);
   margin-bottom: 0.25rem;
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
}

.editorial-margin-value {
   color: var(--ink-soft);
   font-size: var(--text-sm);
}

.skip-link {
   position: absolute;
   top: 0.75rem;
   left: 0.75rem;
   background: var(--ink);
   color: var(--accent-ink);
   padding: 0.65rem 1.15rem;
   z-index: 1000;
   font-size: var(--text-sm);
   font-weight: 500;
   text-decoration: none;

   transform: translateY(-150%);
   transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
   transform: translateY(0);
}

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

/* Swiss typography & layout helpers */
.swiss-grid-line {
   border-bottom: 1px solid var(--line);
}

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

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

.surface-box {
   background-color: var(--surface);
   border: 1px solid var(--line);
   padding: clamp(1rem, 2.5vw, 2rem);
}

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