:root {
  --paper: #f7f7f0;
  --paper-2: #efefe6;
  --ink: #0a0a0a;
  --muted: #4b4b45;
  --rule: #d6d6cc;
  --sans: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 48px);
  --bar: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  interpolate-size: allow-keywords;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--bar); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 12px; background: var(--ink); color: var(--paper); }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; max-width: 22ch; }
h3 { font-size: 1.25rem; line-height: 1.3; }

.eyebrow, .num, dt, figcaption {
  font: 500 .8125rem/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow, .num { margin: 0 0 1rem; }

.prose p { margin: 0 0 1rem; color: var(--muted); max-width: 60ch; }
.prose h3 { margin-bottom: .5rem; }

.btn {
  display: inline-block;
  padding: 13px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* The logo's own vocabulary: a hollow node, and a backbone line between two. */

.node {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  background: var(--paper);
  transition: background .25s;
}

.spine {
  position: relative;
  height: 16px;
  margin: 0 var(--gutter);
}
.spine::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--ink);
  transition: transform 1.2s var(--ease);
}
.spine::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle closest-side, transparent 52%, var(--ink) 56% 94%, transparent 100%) left / 16px 16px no-repeat,
    radial-gradient(circle closest-side, transparent 52%, var(--ink) 56% 94%, transparent 100%) right / 16px 16px no-repeat;
  transition: opacity .3s 1s, transform .3s 1s var(--ease);
}
.js .spine:not(.in)::before { transform: scaleX(0); }
.js .spine:not(.in)::after { opacity: 0; transform: scale(.6); }

/* Header: the navigation is a backbone that fills as you scroll */

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar);
  padding: 0 var(--gutter);
}
.brand img { width: 52px; height: 52px; }

.menu { display: flex; align-items: center; }
.menu-mail, .menu-btn { display: none; }

.spine-nav {
  --fill: 0;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spine-nav::before, .spine-nav::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 56px;
  height: 2px;
}
.spine-nav::before { right: 56px; background: var(--rule); }
.spine-nav::after { width: calc((100% - 112px) * var(--fill)); background: var(--ink); }
.spine-nav a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .9375rem;
  color: var(--muted);
  text-decoration: none;
}
.spine-nav a:hover, .spine-nav a.on { color: var(--ink); }
.spine-nav .node { color: var(--ink); }
.spine-nav a.on .node, .spine-nav a:hover .node { background: var(--ink); }

/* Narrow screens: the menu button is a node; its ink spreads out in a circle
   to fill the screen, and the backbone stands upright. */

@media (max-width: 820px) {
  :root { --bar: 64px; }
  .brand img { width: 44px; height: 44px; }

  /* Without JS the backbone wraps under the brand. */
  .bar-in { flex-wrap: wrap; height: auto; min-height: var(--bar); }
  .spine-nav { grid-auto-columns: 84px; }
  .spine-nav::before { left: 42px; right: 42px; }
  .spine-nav::after { left: 42px; width: calc((100% - 84px) * var(--fill)); }
  .js .bar-in { flex-wrap: nowrap; height: var(--bar); }

  .js .menu-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 10px 10px;
    border: 0;
    background: none;
    color: var(--ink);
    font: 600 1rem/1 var(--sans);
    cursor: pointer;
  }
  .js .menu-btn .node { width: 18px; height: 18px; border-width: 3px; transition: background .25s, border-color .25s; }
  .menu-open .menu-btn { color: var(--paper); }
  .menu-open .menu-btn .node { background: var(--paper); border-color: var(--paper); }

  .js .menu {
    --x: calc(100% - 40px);
    --y: 32px;
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 112px var(--gutter) 32px;
    background: var(--ink);
    color: var(--paper);
    clip-path: circle(0 at var(--x) var(--y));
    visibility: hidden;
    transition: clip-path .45s cubic-bezier(.4, 0, 1, 1), visibility 0s .45s;
  }
  .js .menu.open {
    clip-path: circle(150vmax at var(--x) var(--y));
    visibility: visible;
    transition: clip-path .75s cubic-bezier(.6, 0, .9, .5), visibility 0s;
  }

  .js .spine-nav { grid-auto-flow: row; grid-auto-rows: 76px; grid-auto-columns: auto; }
  .js .spine-nav::before, .js .spine-nav::after { top: 38px; left: 8px; width: 2px; height: auto; }
  .js .spine-nav::before { bottom: 38px; right: auto; background: #3a3a36; }
  .js .spine-nav::after { height: calc((100% - 76px) * var(--fill)); background: var(--paper); }
  .js .spine-nav a { flex-direction: row; gap: 22px; height: 100%; font-size: 2rem; font-weight: 650; letter-spacing: -.02em; color: var(--paper); }
  .js .spine-nav .node { width: 18px; height: 18px; border-width: 3px; color: var(--paper); background: var(--ink); }
  .js .spine-nav a.on .node { background: var(--paper); }
  .js .menu-mail { display: block; margin-top: auto; font-size: 1rem; color: #b4b4ac; }

  .js .spine-nav li, .js .menu-mail { opacity: 0; transform: translateX(-12px); transition: opacity .15s, transform .15s; }
  .js .menu.open li, .js .menu.open .menu-mail { opacity: 1; transform: none; transition: opacity .3s .3s, transform .4s .3s var(--ease); }
  .js .menu.open li:nth-child(2) { transition-delay: .36s; }
  .js .menu.open li:nth-child(3) { transition-delay: .42s; }
  .js .menu.open li:nth-child(4) { transition-delay: .48s; }

  .menu-open { overflow: hidden; }
}

/* Hero, after the reference video: a fade up from black, three hard cuts of
   flat geometry, then a star that zooms out and cracks as you scroll. Cuts
   change under three times a second. */

.hero {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: calc(100svh - var(--bar));
  overflow: hidden;
}

.hero-in {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  max-width: 42rem;
  padding: clamp(56px, 9vh, 112px) var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}

.hero-art {
  grid-area: 1 / 2;
  justify-self: center;
  width: min(92svh, 50vw);
  animation: zoom-out 1.4s var(--ease) 1.85s both;
}
@keyframes zoom-out { from { transform: scale(1.9); } }

.hero-star { display: block; width: 100%; overflow: visible; }
.hero-star polygon { fill: var(--ink); }
.hero-star .cracks polygon { fill: var(--paper); }
.hero-star .spikes polygon, .hero-star .cracks polygon {
  transform: scale(min(1, calc(var(--p) * 2.4)));
}

.cuts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cuts::before, .cut { position: absolute; inset: 0; }
.cuts::before { content: ""; z-index: 4; background: var(--ink); animation: fade-up .6s ease-out .1s both; }
.cut { animation: cut-out .01s both; }
.cut-bars { z-index: 3; background: repeating-linear-gradient(90deg, var(--ink) 0 9vw, var(--paper) 9vw 16vw); animation-delay: 1.05s; }
.cut-stripes { z-index: 2; background: repeating-linear-gradient(180deg, var(--ink) 0 5.5vh, var(--paper) 5.5vh 11vh); animation-delay: 1.45s; }
.cut-diagonal { z-index: 1; background: repeating-linear-gradient(-28deg, var(--ink) 0 7vw, var(--paper) 7vw 13vw); animation-delay: 1.85s; }
@keyframes fade-up { to { opacity: 0; visibility: hidden; } }
@keyframes cut-out { to { visibility: hidden; } }

.hero h1 { max-width: 14ch; text-wrap: balance; }
.lede { margin: 1.75rem 0 2rem; max-width: 34rem; font-size: 1.1875rem; color: var(--muted); }

.hero-in > * { animation: rise .7s var(--ease) both; }
.hero-in > :nth-child(1) { animation-delay: 2.1s; }
.hero-in > :nth-child(2) { animation-delay: 2.2s; }
.hero-in > :nth-child(3) { animation-delay: 2.35s; }
.hero-in > :nth-child(4) { animation-delay: 2.45s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-art { grid-area: 1 / 1; justify-self: end; width: min(78vw, 44svh); margin: 32px var(--gutter) 0 0; }
  .hero-in { grid-area: 2 / 1; padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cuts { display: none; }
}

/* Key facts */

.facts-row { border-top: 1px solid var(--ink); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; }
.facts div { padding: 22px 20px 28px 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.facts dd { margin: 6px 0 0; font-weight: 600; }

@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

/* Sections open with a backbone drawn across the screen */

.sec { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.sec > .spine { position: absolute; top: -8px; left: 0; right: 0; }
.sec-alt { background: var(--paper-2); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px clamp(32px, 6vw, 80px);
}
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 32px clamp(32px, 6vw, 80px);
  margin-top: 40px;
}
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* HANS DB rules, strung on one backbone */

.rules {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.rules::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
}
.rule .node { position: relative; display: block; margin-bottom: 24px; background: var(--paper-2); }
.rule:has(details[open]) .node { background: var(--ink); }
.rule > p { margin: .5rem 0 1rem; color: var(--muted); }

.rule summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.rule summary::-webkit-details-marker { display: none; }
.rule summary::after { content: "+"; font-weight: 400; }
.rule details[open] summary::after { content: "\2212"; }
.rule details p { margin: .75rem 0 0; padding-left: 16px; border-left: 2px solid var(--ink); color: var(--muted); font-size: 1rem; }

.rule details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .4s var(--ease), content-visibility .4s allow-discrete;
}
.rule details[open]::details-content { block-size: auto; }

@media (max-width: 820px) {
  .rules { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-left: 40px; }
  .rules::before { top: 7px; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .rule .node { position: absolute; left: 0; margin: 0; }
}

/* Comparison */

.sub { margin: 72px 0 16px; }

.compare { width: 100%; border-collapse: collapse; font-size: 1rem; background: var(--paper); }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rule); }
.compare thead th { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.compare tbody th { font-weight: 500; }
.compare td:last-child, .compare thead th:last-child { background: var(--ink); color: var(--paper); font-weight: 600; }

@media (max-width: 700px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { padding: 12px 0; border-bottom: 1px solid var(--ink); }
  .compare th, .compare td { padding: 4px 16px; border: 0; }
  .compare tbody th { padding-top: 8px; font-weight: 650; }
  .compare td { display: flex; justify-content: space-between; gap: 16px; }
  .compare td::before { content: attr(data-label); color: var(--muted); font-weight: 400; }
  .compare td:last-child::before { color: #b4b4ac; }
}

/* Quote band: diagonal stripes from the reference video, cropped at the edge */

.band {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.band::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  background: repeating-linear-gradient(-28deg, #1d1d1b 0 28px, transparent 28px 64px);
  pointer-events: none;
}
.band figure { position: relative; margin: 0 auto; }
blockquote {
  margin: 0 0 1.25rem;
  max-width: 34ch;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -.01em;
}
blockquote::before { content: "\201C"; }
blockquote::after { content: "\201D"; }
.band figcaption { color: #a4a49c; }

/* Footer */

.foot { padding: 28px 0; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--muted); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.foot p { margin: 0; }
.foot address { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::details-content { transition: none !important; animation: none !important; }
  .hero { --p: 0 !important; }
}