/* S1 Hero. Source: Paper 2ZO-0 (desktop 1440×891) and 36M-0 (mobile 390×720),
   get_jsx / get_computed_styles. Mobile-first; desktop composition from 1024px. */

.hero {
  position: relative;
  overflow: clip;
  display: flex;
  align-items: center;
  /* Canvas height, but never taller than the viewport (2026-09-09, human:
     the lit threshold must be on the first screen; 100svh / --zoom is the
     real viewport height in zoomed CSS px). The px line first is the
     fallback for browsers without svh. */
  min-height: 720px;
  min-height: min(720px, calc(100svh / var(--zoom)));
}

/* Photo: full-bleed, cover; mobile frame 68% 50% (36N-0), desktop 50% (30D-0). */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

/* Dim overlay (36O-0): vertical night gradient 10% → 45% → 88%, oklab. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(in oklab 180deg, oklab(16.5% -0.0005 -0.018 / 10%) 0%, oklab(16.5% -0.0005 -0.018 / 45%) 45%, oklab(16.5% -0.0005 -0.018 / 88%) 100%);
}

/* Persuasion column (36P-0): 350 wide at 390 (gutters 20), pinned to the
   bottom, padding-bottom 48, gap 20. */
.hero__column {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
  min-height: 720px;
  min-height: min(720px, calc(100svh / var(--zoom)));
  max-width: calc(var(--lane) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: 48px;
}

/* «Official partners» + the partner icon (gap 12, icon 24×24). The label is
   Inter 300 since 2026-10-24 (human: the mono «сильно выбивается», wanted the
   body font, thinner); later the same day: sentence case, upright (an
   italic trial was dropped: italic is reserved for «rejection» in the
   title), tracking 0.02em instead of the caps tracking. */
.hero__partners {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__partners-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 300;
  line-height: var(--leading-body); /* audit 2026-10-24: 145% like every label (was 16px) */
  letter-spacing: 0.02em;
  color: var(--color-surface);
  opacity: 0.62; /* hierarchy pass: tertiary level .62 (was .85) */
}
/* One 24px partner icon; the flip (rotateY 0 -> 90, swap, -90 -> 0) runs
   from js/site.js with the Web Animations API, every 2.5 s, 0.6 s per turn.
   The only motion on the page (R7 exception by the human, 2026-09-09);
   it does not run under prefers-reduced-motion. */
.hero__flip {
  display: block;
  width: 24px;
  height: 24px;
  perspective: 200px;
}
.hero__flip img {
  width: 24px;
  height: 24px;
  backface-visibility: hidden;
}

/* H1 (36R-0 / 2ZT-0): Inter 800, 36/105% mobile, 52/105% desktop, tracking -0.02em.
   On the canvas the words are separate nodes with a fixed gap: 9px at 36px,
   13px at 52px. A natural space (with the tracking) measures 6.45px / 9.33px
   in Chrome, so word-spacing adds the difference; this keeps the canvas line
   breaks. */
/* «rejection» (2026-10-24, human): light 400 italic inside the 800 line, the
   contrast is the weight; the slant is synthesized (Inter Slant), since the
   only true italic on the site is the 800 instance. */
.hero__title em {
  font-family: "Inter Slant", var(--font-sans);
  font-style: italic;
  font-weight: var(--font-weight-regular);
}
.hero__title {
  font-size: 36px;
  font-weight: var(--font-weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  word-spacing: 2.55px;
  color: var(--color-surface);
}

/* Sub (379-0 / 2ZS-0): 16/145% mobile, 18/145% desktop max-width 560, .9. */
.hero__sub {
  font-size: 16px;
  line-height: var(--leading-body);
  color: var(--color-surface);
  opacity: 0.78; /* hierarchy pass: secondary level .78 (was .9) */
}

/* Brand mark (2026-10-24, human): the Kerf badge at the top-left of the hero,
   on the left edge of the hero text (gutter on mobile, the column's margin
   on desktop), 48 / 56px, inverted (white frame, black inside),
   above the photo; absolutely positioned, so the centred column is untouched. */
.hero__brand {
  position: absolute;
  top: 24px;
  left: var(--gutter);
  z-index: 1;
  width: 48px;
  height: 48px;
  color: var(--color-surface);
}
.hero__brand svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* CTA: full width on mobile; desktop = .cta default (narrow form, 2026-10-23). */
.hero__cta {
  align-self: stretch;
}

@media (min-width: 1024px) {
  .hero {
    min-height: 891px;
    min-height: min(891px, calc(100svh / var(--zoom)));
  }
  /* Desktop frame: the picture box starts 8% above the hero, so the top
     slice of the photo is cropped and the door sits higher (2026-09-09). */
  .hero__photo {
    top: -8%;
  }
  .hero__photo img {
    object-position: 50% 50%;
  }
  /* Glow-dim overlay (30C-0): right 740px, 90deg, oklab 14.5% 0% → 50%. */
  .hero::after {
    inset: 0 0 0 auto;
    width: 740px;
    background: linear-gradient(in oklab 90deg, oklab(14.5% 0 0 / 0%) 0%, oklab(14.5% 0 0 / 50%) 100%);
  }
  /* Column (2ZP-0): left 72 at 1440, 760 wide, gap 28, centred on the hero's
     height (2026-09-09, human; the canvas had it 40px above centre).
     72 = lane edge (120) minus 48; clamps to the gutter. */
  .hero__column {
    justify-content: center;
    gap: 28px;
    width: 760px;
    max-width: none;
    min-height: 0;
    margin-inline: 0;
    margin-left: max(var(--gutter), calc((100% - var(--container-max)) / 2 - 48px));
    padding-inline: 0;
    padding-bottom: 0;
  }
  .hero__title {
    font-size: var(--text-display);
    word-spacing: 3.67px;
  }
  .hero__sub {
    font-size: var(--text-body);
    max-width: 560px;
  }
  .hero__cta {
    align-self: flex-start;
  }
  .hero__partners-label {
    font-size: 16px; /* audit 2026-10-24: desktop labels are 16 (was 13) */
  }
  .hero__brand {
    top: 40px;
    left: max(var(--gutter), calc((100% - var(--container-max)) / 2 - 48px));
    width: 56px;
    height: 56px;
  }
}