/* ============================================================
   index — Fonts
   ------------------------------------------------------------
   Hanken Grotesk is used as the single, expressive workhorse:
   a geometric grotesque carried from Light (editorial whispers)
   to Black (the loud display voice). The brand's real wordmark
   appears to use a custom geometric typeface; Hanken Grotesk is
   the closest high-quality Google Fonts match. SUBSTITUTION —
   confirm with the user / supply the original font files.
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/4fb45187-920a-4d99-8cba-9a0dd9b4f7f0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/c7f7f18a-a186-4b64-96ea-8d9c80fd6428.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/c146a37a-03cd-4f30-ba3a-61309485731e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ba5b0f27-56de-4e1a-a897-edb7735aba53.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/4fb45187-920a-4d99-8cba-9a0dd9b4f7f0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/c7f7f18a-a186-4b64-96ea-8d9c80fd6428.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/c146a37a-03cd-4f30-ba3a-61309485731e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/ba5b0f27-56de-4e1a-a897-edb7735aba53.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Traceline comic entry — confined to the IA page. */
.index-bd-intro{padding:clamp(28px,3.5vw,48px) clamp(20px,4vw,48px) clamp(48px,6vw,90px)}
.index-bd-inner{max-width:var(--container-max);margin:0 auto}
.index-bd-question{font-size:clamp(26px,3.4vw,48px);font-weight:var(--fw-light);line-height:1.1;letter-spacing:-.03em;margin:0 0 30px}.index-bd-question strong{font-weight:var(--fw-black)}
.index-bd-entry{display:grid;grid-template-columns:1fr 1.35fr;border:2px solid #000;color:#000;background:#fff;text-decoration:none;overflow:hidden;transition:box-shadow .18s ease}.index-bd-entry:hover{box-shadow:7px 7px 0 #000}.index-bd-entry:focus-visible{outline:3px solid #000;outline-offset:6px}
.index-bd-copy{padding:clamp(25px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.index-bd-kicker{font-size:12px;letter-spacing:.12em;line-height:1.5;font-weight:700}.index-bd-title{font-size:clamp(48px,7vw,96px);font-weight:var(--fw-black);line-height:1;letter-spacing:-.06em;margin:20px 0 24px}.index-bd-story{font-size:clamp(28px,3vw,43px);line-height:1.05;letter-spacing:-.03em;font-weight:var(--fw-bold)}.index-bd-description{font-size:17px;line-height:1.5;margin:18px 0 25px;max-width:24em}
.index-bd-cta{display:inline-flex;align-items:center;gap:30px;background:#000;color:#fff;border-radius:40px;padding:13px 24px;font-size:16px;font-weight:700}.index-bd-image{border-left:2px solid #000;min-height:450px}.index-bd-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:43% center}
@media(max-width:700px){.index-bd-entry{grid-template-columns:1fr}.index-bd-image{border-left:0;border-top:2px solid #000;min-height:0;height:330px}.index-bd-copy{padding:28px}.index-bd-title{font-size:65px;margin:15px 0 20px}.index-bd-story{font-size:33px}.index-bd-question{font-size:30px}.index-bd-question strong{display:block}.index-bd-kicker{font-size:12px}}
@media(prefers-reduced-motion:reduce){.index-bd-entry{transition:none}}


/* ============================================================
   index — Colors
   The identity is strictly monochrome: pure black on pure white,
   with a true-gray ramp for hierarchy. No accent hues. Contrast
   IS the brand. Color is created by inverting black <-> white,
   never by introducing a third hue.
   ============================================================ */

:root {
  /* ---- Base ---- */
  --black: #000000;
  --white: #ffffff;

  /* ---- True-gray ramp ---- */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f4;
  --gray-200: #e6e6e6;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #767676;
  --gray-600: #525252;
  --gray-700: #3d3d3d;
  --gray-800: #262626;
  --gray-900: #141414;
  --gray-950: #0a0a0a;

  /* ---- Semantic: text ---- */
  --text-primary:   var(--black);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
  --text-inverse:   var(--white);

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-subtle:  var(--gray-100);
  --surface-sunken:  var(--gray-50);
  --surface-inverse: var(--black);
  --surface-overlay: rgba(0, 0, 0, 0.55);

  /* ---- Semantic: borders ---- */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--black);

  /* ---- Semantic: interactive ---- */
  --action-bg:        var(--black);
  --action-fg:        var(--white);
  --action-bg-hover:  var(--gray-800);
  --action-bg-active: var(--gray-700);

  --action-ghost-fg:    var(--black);
  --action-ghost-hover: var(--gray-100);

  /* ---- Focus ring (monochrome) ---- */
  --focus-ring: rgba(0, 0, 0, 0.20);
}

/* ============================================================
   Dark surface scope — flips black/white semantics for the
   full-bleed black sections that anchor the brand.
   Apply with: <div class="index-dark"> … </div>
   ============================================================ */

.index-dark {
  --text-primary:   var(--white);
  --text-secondary: var(--gray-300);
  --text-muted:     var(--gray-400);
  --text-faint:     var(--gray-500);
  --text-inverse:   var(--black);

  --surface-page:    var(--black);
  --surface-card:    var(--black);
  --surface-subtle:  var(--gray-900);
  --surface-sunken:  var(--gray-950);
  --surface-inverse: var(--white);
  --surface-overlay: rgba(255, 255, 255, 0.16);

  --border-subtle:  var(--gray-800);
  --border-default: var(--gray-700);
  --border-strong:  var(--white);

  --action-bg:        var(--white);
  --action-fg:        var(--black);
  --action-bg-hover:  var(--gray-200);
  --action-bg-active: var(--gray-300);

  --action-ghost-fg:    var(--white);
  --action-ghost-hover: var(--gray-900);

  --focus-ring: rgba(255, 255, 255, 0.32);

  color: var(--text-primary);
  background: var(--surface-page);
}

/* ============================================================
   index — Typography
   One family, full weight range. The brand voice swings between
   two extremes of the SAME face: Black (900) for impact and
   Light (300) for editorial contrast — often inside one phrase.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Type scale (editorial, large) ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  4rem;      /* 64 */
  --text-6xl:  5.5rem;    /* 88 */
  --text-7xl:  7rem;      /* 112 */
  --text-8xl:  9rem;      /* 144 */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.14em;  /* eyebrow / label small-caps */

  /* ---- Semantic roles ---- */
  --display-weight:   var(--fw-black);
  --display-tracking: var(--tracking-tight);
  --display-leading:  var(--leading-tight);

  --heading-weight:   var(--fw-extrabold);
  --body-weight:      var(--fw-regular);
  --body-leading:     var(--leading-normal);

  --eyebrow-weight:   var(--fw-semibold);
  --eyebrow-tracking: var(--tracking-wider);
}

/* ============================================================
   index — Spacing
   8pt-based scale with a couple of fine steps. The brand lives
   on negative space — use the larger steps generously between
   sections; the small steps inside components.
   ============================================================ */

:root {
  --space-0:  0;
  --space-px: 1px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* ---- Layout ---- */
  --container-max:  1240px;
  --container-text: 720px;   /* comfortable reading measure */
  --gutter:         var(--space-5);
  --section-y:      var(--space-10);
}

/* ============================================================
   index — Radius
   The wordmark is soft and round, so corners are allowed to be
   generous. Pills echo the logo's terminals on actions/tags;
   surfaces stay crisp and editorial (small radii).
   ============================================================ */

:root {
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     14px;
  --radius-xl:     22px;
  --radius-2xl:    32px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---- Semantic ---- */
  --radius-button:  var(--radius-pill);
  --radius-input:   var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-control: var(--radius-md);
  --radius-tag:     var(--radius-pill);
}

/* ============================================================
   index — Elevation
   A monochrome brand leans on borders and contrast, not glow.
   Shadows are soft, neutral and sparing; the 1px hairline is
   the primary way to separate surfaces.
   ============================================================ */

:root {
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 14px 44px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 28px 70px rgba(0, 0, 0, 0.18);

  /* Hairline borders (use as box-shadow to avoid layout shift) */
  --hairline:        inset 0 0 0 1px var(--border-subtle);
  --hairline-strong: inset 0 0 0 1px var(--border-strong);

  /* Focus */
  --shadow-focus: 0 0 0 3px var(--focus-ring);
}

/* ============================================================
   index — Motion
   Movement is quick, confident and clean. Crisp ease-outs;
   no playful bounce on UI (reserve any spring for delight
   moments only). Honor reduced-motion everywhere.
   ============================================================ */

:root {
  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */
  --dur-slower:  560ms; /* @kind other */

  --ease-out:    cubic-bezier(0.20, 0.80, 0.20, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.40, 0.64, 1); /* @kind other */

  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
  --transition-fast: all var(--dur-fast) var(--ease-out); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast:    0ms; /* @kind other */
    --dur-base:    0ms; /* @kind other */
    --dur-slow:    0ms; /* @kind other */
    --dur-slower:  0ms; /* @kind other */
  }
}

/* ============================================================
   index — Base & brand primitives
   Minimal reset + a few brand text utilities that encode the
   identity's signature moves: heavy display, editorial light
   contrast, the eyebrow label, and the skewed hand-underline.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--heading-weight); }
p { margin: 0; }
a { color: inherit; }

::selection { background: var(--black); color: var(--white); }
.index-dark ::selection { background: var(--white); color: var(--black); }

/* ---- Display: the loud voice ---- */
.index-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

/* ---- Light editorial contrast (pair inside a heading) ---- */
.index-light {
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-snug);
}

/* ---- Eyebrow / kicker label ---- */
.index-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--eyebrow-weight);
  font-size: var(--text-sm);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

/* ---- Signature underline: a slightly skewed editorial mark ---- */
.index-underline {
  position: relative;
  white-space: nowrap;
}
.index-underline::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.02em;
  height: 0.06em;
  background: currentColor;
  transform: rotate(-0.6deg);
  transform-origin: left center;
}

/* ---- The interpunct motif (albert·ine) ---- */
.index-dot::before { content: "·"; }

/* ---- Reading measure helper ---- */
.index-measure { max-width: var(--container-text); }

/* ============================================================
   index — Design System
   Single entry point. Consumers link this one file.
   This file is @import lines only — all rules live in the
   imported token files below.
   ============================================================ */

/* ============================================================
   index — Fonts
   ------------------------------------------------------------
   Hanken Grotesk is used as the single, expressive workhorse:
   a geometric grotesque carried from Light (editorial whispers)
   to Black (the loud display voice). The brand's real wordmark
   appears to use a custom geometric typeface; Hanken Grotesk is
   the closest high-quality Google Fonts match. SUBSTITUTION —
   confirm with the user / supply the original font files.
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/4fb45187-920a-4d99-8cba-9a0dd9b4f7f0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/c7f7f18a-a186-4b64-96ea-8d9c80fd6428.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/c146a37a-03cd-4f30-ba3a-61309485731e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ba5b0f27-56de-4e1a-a897-edb7735aba53.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/4fb45187-920a-4d99-8cba-9a0dd9b4f7f0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/c7f7f18a-a186-4b64-96ea-8d9c80fd6428.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/c146a37a-03cd-4f30-ba3a-61309485731e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/ba5b0f27-56de-4e1a-a897-edb7735aba53.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/6362cd00-905f-4f32-9d58-a9b531a1a202.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/e6a0304e-14f7-43ca-987b-d9a8f51a3c55.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/8ed3382e-7eb3-4b11-b129-13a79a9415f0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/9a04a6da-7679-406f-bc16-c58013821c64.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   index — Colors
   The identity is strictly monochrome: pure black on pure white,
   with a true-gray ramp for hierarchy. No accent hues. Contrast
   IS the brand. Color is created by inverting black <-> white,
   never by introducing a third hue.
   ============================================================ */

:root {
  /* ---- Base ---- */
  --black: #000000;
  --white: #ffffff;

  /* ---- True-gray ramp ---- */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f4;
  --gray-200: #e6e6e6;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #767676;
  --gray-600: #525252;
  --gray-700: #3d3d3d;
  --gray-800: #262626;
  --gray-900: #141414;
  --gray-950: #0a0a0a;

  /* ---- Semantic: text ---- */
  --text-primary:   var(--black);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
  --text-inverse:   var(--white);

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-subtle:  var(--gray-100);
  --surface-sunken:  var(--gray-50);
  --surface-inverse: var(--black);
  --surface-overlay: rgba(0, 0, 0, 0.55);

  /* ---- Semantic: borders ---- */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--black);

  /* ---- Semantic: interactive ---- */
  --action-bg:        var(--black);
  --action-fg:        var(--white);
  --action-bg-hover:  var(--gray-800);
  --action-bg-active: var(--gray-700);

  --action-ghost-fg:    var(--black);
  --action-ghost-hover: var(--gray-100);

  /* ---- Focus ring (monochrome) ---- */
  --focus-ring: rgba(0, 0, 0, 0.20);
}

/* ============================================================
   Dark surface scope — flips black/white semantics for the
   full-bleed black sections that anchor the brand.
   Apply with: <div class="index-dark"> … </div>
   ============================================================ */

.index-dark {
  --text-primary:   var(--white);
  --text-secondary: var(--gray-300);
  --text-muted:     var(--gray-400);
  --text-faint:     var(--gray-500);
  --text-inverse:   var(--black);

  --surface-page:    var(--black);
  --surface-card:    var(--black);
  --surface-subtle:  var(--gray-900);
  --surface-sunken:  var(--gray-950);
  --surface-inverse: var(--white);
  --surface-overlay: rgba(255, 255, 255, 0.16);

  --border-subtle:  var(--gray-800);
  --border-default: var(--gray-700);
  --border-strong:  var(--white);

  --action-bg:        var(--white);
  --action-fg:        var(--black);
  --action-bg-hover:  var(--gray-200);
  --action-bg-active: var(--gray-300);

  --action-ghost-fg:    var(--white);
  --action-ghost-hover: var(--gray-900);

  --focus-ring: rgba(255, 255, 255, 0.32);

  color: var(--text-primary);
  background: var(--surface-page);
}

/* ============================================================
   index — Typography
   One family, full weight range. The brand voice swings between
   two extremes of the SAME face: Black (900) for impact and
   Light (300) for editorial contrast — often inside one phrase.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Type scale (editorial, large) ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  4rem;      /* 64 */
  --text-6xl:  5.5rem;    /* 88 */
  --text-7xl:  7rem;      /* 112 */
  --text-8xl:  9rem;      /* 144 */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.14em;  /* eyebrow / label small-caps */

  /* ---- Semantic roles ---- */
  --display-weight:   var(--fw-black);
  --display-tracking: var(--tracking-tight);
  --display-leading:  var(--leading-tight);

  --heading-weight:   var(--fw-extrabold);
  --body-weight:      var(--fw-regular);
  --body-leading:     var(--leading-normal);

  --eyebrow-weight:   var(--fw-semibold);
  --eyebrow-tracking: var(--tracking-wider);
}

/* ============================================================
   index — Spacing
   8pt-based scale with a couple of fine steps. The brand lives
   on negative space — use the larger steps generously between
   sections; the small steps inside components.
   ============================================================ */

:root {
  --space-0:  0;
  --space-px: 1px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* ---- Layout ---- */
  --container-max:  1240px;
  --container-text: 720px;   /* comfortable reading measure */
  --gutter:         var(--space-5);
  --section-y:      var(--space-10);
}

/* ============================================================
   index — Radius
   The wordmark is soft and round, so corners are allowed to be
   generous. Pills echo the logo's terminals on actions/tags;
   surfaces stay crisp and editorial (small radii).
   ============================================================ */

:root {
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     14px;
  --radius-xl:     22px;
  --radius-2xl:    32px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---- Semantic ---- */
  --radius-button:  var(--radius-pill);
  --radius-input:   var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-control: var(--radius-md);
  --radius-tag:     var(--radius-pill);
}

/* ============================================================
   index — Elevation
   A monochrome brand leans on borders and contrast, not glow.
   Shadows are soft, neutral and sparing; the 1px hairline is
   the primary way to separate surfaces.
   ============================================================ */

:root {
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 14px 44px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 28px 70px rgba(0, 0, 0, 0.18);

  /* Hairline borders (use as box-shadow to avoid layout shift) */
  --hairline:        inset 0 0 0 1px var(--border-subtle);
  --hairline-strong: inset 0 0 0 1px var(--border-strong);

  /* Focus */
  --shadow-focus: 0 0 0 3px var(--focus-ring);
}

/* ============================================================
   index — Motion
   Movement is quick, confident and clean. Crisp ease-outs;
   no playful bounce on UI (reserve any spring for delight
   moments only). Honor reduced-motion everywhere.
   ============================================================ */

:root {
  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */
  --dur-slower:  560ms; /* @kind other */

  --ease-out:    cubic-bezier(0.20, 0.80, 0.20, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.40, 0.64, 1); /* @kind other */

  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
  --transition-fast: all var(--dur-fast) var(--ease-out); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast:    0ms; /* @kind other */
    --dur-base:    0ms; /* @kind other */
    --dur-slow:    0ms; /* @kind other */
    --dur-slower:  0ms; /* @kind other */
  }
}

/* ============================================================
   index — Base & brand primitives
   Minimal reset + a few brand text utilities that encode the
   identity's signature moves: heavy display, editorial light
   contrast, the eyebrow label, and the skewed hand-underline.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--heading-weight); }
p { margin: 0; }
a { color: inherit; }

::selection { background: var(--black); color: var(--white); }
.index-dark ::selection { background: var(--white); color: var(--black); }

/* ---- Display: the loud voice ---- */
.index-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

/* ---- Light editorial contrast (pair inside a heading) ---- */
.index-light {
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-snug);
}

/* ---- Eyebrow / kicker label ---- */
.index-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--eyebrow-weight);
  font-size: var(--text-sm);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

/* ---- Signature underline: a slightly skewed editorial mark ---- */
.index-underline {
  position: relative;
  white-space: nowrap;
}
.index-underline::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.02em;
  height: 0.06em;
  background: currentColor;
  transform: rotate(-0.6deg);
  transform-origin: left center;
}

/* ---- The interpunct motif (albert·ine) ---- */
.index-dot::before { content: "·"; }

/* ---- Reading measure helper ---- */
.index-measure { max-width: var(--container-text); }



  body { margin: 0; background: #fff; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--gray-600); }
  .index-dark a:hover { color: var(--gray-400); }
  .index-hero-logo svg { width: min(100%, 940px); height: auto; }
  @keyframes orb-cw { to { transform: rotate(360deg) } }
      @keyframes orb-ccw { to { transform: rotate(-360deg) } }
      @keyframes index-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
  @media (min-width: 820px) { [data-pub-nowrap] { white-space: nowrap } }
  @keyframes index-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
  @keyframes index-marquee-rev { from { transform: translateX(-50%) } to { transform: translateX(0) } }
  @media (prefers-reduced-motion: reduce) { [style*="index-marquee"] { animation: none !important } [style*="index-marquee-rev"] { animation: none !important } }
  @keyframes sav-in { 0% { opacity: 0; transform: translateY(7px) } 5%, 90% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-4px) } }
  @keyframes sav-bar { 0% { width: 4% } 46% { width: 62% } 100% { width: 100% } }
  @keyframes sav-alert { 0%, 42% { opacity: 0; transform: scale(.96) } 47%, 90% { opacity: 1; transform: none } 100% { opacity: 0 } }
  @keyframes sav-rise { 0% { transform: scaleY(.04) } 18%, 100% { transform: scaleY(1) } }
  @keyframes sav-widen { 0% { transform: scaleX(0) } 26%, 100% { transform: scaleX(1) } }
  @keyframes sav-draw { 0% { stroke-dashoffset: 900 } 55%, 100% { stroke-dashoffset: 0 } }
  @keyframes sav-pulse { 0%, 46% { opacity: .3 } 52%, 100% { opacity: 1 } }
  @keyframes sav-move { from { offset-distance: 0% } to { offset-distance: 100% } }
  @keyframes sav-scan { 0% { transform: translateY(-100%) } 100% { transform: translateY(1100%) } }
  @keyframes sav-tick { 0%, 30% { opacity: 1 } 34%, 40% { opacity: .25 } 44%, 100% { opacity: 1 } }
  @media (prefers-reduced-motion: reduce) { [data-sav] * { animation: none !important } }
  @media (max-width: 719px) { .rp-conn { display: none } }