/* Landing page. One focal point: the headline, on calm Ink ("copy space"). The media wall (natural-colour headshots
   + our covers) owns the top of the hero and fades to solid Ink before the copy, so no text sits on a busy patch. */

.k-hero {
  position: relative; isolation: isolate; overflow: clip;  /* clip, not hidden: #subscribe anchor jumps used to scroll the hero's insides */ min-height: 100svh; margin-top: -68px;  /* under the fixed header */
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 1.25rem clamp(2.5rem, 7vh, 4.5rem); text-align: center; background: var(--color-ink);
}

/* --- wall --- */
.k-wall {
  position: absolute; inset: -14% -6% 22%; z-index: -3; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  transform: rotate(-4deg); transform-origin: 50% 40%;
}
.k-wall__track { display: flex; flex-direction: column; gap: 1rem; animation: k-drift var(--dur, 90s) linear infinite; will-change: transform; }
.k-wall__col:nth-child(even) .k-wall__track { animation-direction: reverse; }
@keyframes k-drift { to { transform: translateY(-50%); } }

.k-card { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: .9rem; overflow: hidden; background: var(--color-ink-card); }
.k-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-card--person::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(transparent, rgb(11 11 11 / .7)); }
.k-card__name {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 1; background: #fff; color: var(--color-ink);
  font: 900 .62rem/1 Satoshi, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .35em .5em;
}

/* fade: dark under the header, then the wall dissolves into solid Ink before the copy (white on #0b0b0b is ~19:1) */
.k-hero__fade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(11 11 11 / .94) 0, rgb(11 11 11 / .6) 8%, rgb(11 11 11 / 0) 18%),
    linear-gradient(to bottom, rgb(11 11 11 / 0) 34%, rgb(11 11 11 / .78) 48%, var(--color-ink) 60%);
}

/* --- copy --- */
.k-hero h1 {
  font-family: var(--k-anton); font-weight: 400; text-transform: uppercase; color: #fff; margin: 0 auto;
  font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: .98; letter-spacing: .01em; max-width: 15ch; text-wrap: balance;
}
.k-hero h1 .text-gradient { padding: 0 .03em; background: linear-gradient(transparent 50%, var(--k-highlight) 50% 80%, transparent 80%); }  /* marker band inside the glyph box */
.k-hero > p { color: var(--k-body-grey); font: 500 clamp(1.05rem, 1.4vw, 1.2rem)/1.5 Satoshi, sans-serif; margin: 1rem auto 0; max-width: 32rem; }
.k-hero__form { margin-top: 1.75rem; width: min(30rem, 100%); }
.k-hero__form > div { margin-top: 0; }
.k-hero #subscribe { scroll-margin: 40vh 0; }  /* header Subscribe lands with the form mid-screen */  /* the form wrapper brought its own mt-9: one gap, not two */
.k-follow {
  margin-top: 1.4rem; color: var(--k-muted); font: 700 .72rem/1 Satoshi, sans-serif; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: color .2s ease;
}
.k-follow:hover { color: #fff; }

.k-hero > :is(h1, p, .k-hero__form, .k-follow) { animation: k-rise .45s var(--un-osmo, ease) both; }  /* quick: content must not feel late (owner, 12 Oct) */
.k-hero > p { animation-delay: .04s; }
.k-hero > .k-hero__form { animation-delay: .08s; }
.k-hero > .k-follow { animation-delay: .12s; }
@keyframes k-rise { from { opacity: 0; transform: translateY(.6rem); } }

/* --- headline ticker --- */
.k-ticker { overflow: hidden; border-block: 1px solid #222; background: var(--color-ink); padding: 1.1rem 0; }
.k-ticker__track { display: flex; width: max-content; animation: k-scroll 70s linear infinite; }
.k-ticker:hover .k-ticker__track { animation-play-state: paused; }
.k-ticker__item { font-family: var(--k-anton); text-transform: uppercase; color: #fff; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1; white-space: nowrap; display: flex; align-items: center; }
.k-ticker__item::after { content: ""; width: .32em; height: .32em; background: var(--k-muted); margin: 0 1.1em; transform: rotate(45deg); }
@keyframes k-scroll { to { transform: translateX(-50%); } }

main .sheet h2 { font-family: var(--k-anton); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .95; }

/* --- phones: three wide columns, wall owns the top ~55%, copy below --- */
@media (max-width: 767px) {
  .k-hero { min-height: 100svh; }  /* phones: the hero fills the screen, nothing peeks in below */
  .k-wall { grid-template-columns: repeat(3, 1fr); gap: .7rem; inset: -6% -18% 46%; transform: rotate(-5deg); }
  .k-wall__track { gap: .7rem; }
  .k-wall__col:nth-child(n + 4) { display: none; }
  .k-card { border-radius: .7rem; }
  .k-card__name { font-size: .5rem; left: .5rem; bottom: .5rem; }
  .k-hero__fade { background:
    linear-gradient(to bottom, rgb(11 11 11 / .94) 0, rgb(11 11 11 / .6) 9%, rgb(11 11 11 / 0) 20%),
    linear-gradient(to bottom, rgb(11 11 11 / 0) 38%, rgb(11 11 11 / .8) 50%, var(--color-ink) 60%); }
  .k-hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .k-hero > p { font-size: 1rem; }
}

/* tall tablets: the copy sits low, so the wall reaches further down */
@media (min-width: 768px) and (max-aspect-ratio: 4 / 5) {
  .k-wall { inset: -8% -8% 14%; }
  .k-hero__fade { background:
    linear-gradient(to bottom, rgb(11 11 11 / .94) 0, rgb(11 11 11 / .6) 7%, rgb(11 11 11 / 0) 15%),
    linear-gradient(to bottom, rgb(11 11 11 / 0) 46%, rgb(11 11 11 / .8) 58%, var(--color-ink) 68%); }
}

@media (prefers-reduced-motion: reduce) {
  .k-wall__track, .k-ticker__track, .k-hero > * { animation: none !important; }
}

/* --- zoom-proof sizing (2026-10-12) ---------------------------------------------------------------
   The hero's height and wall scale with the viewport, so the copy must too, or zooming out leaves tiny
   text sunk under a black gap and zooming in pushes the headline under the header. Copy now scales with
   the screen (vh/vw) and keeps a rem floor, so zooming in still enlarges text (WCAG 1.4.4). */
.k-hero {
  padding-top: calc(68px + clamp(1.25rem, 5vh, 4rem));  /* never under the fixed header */
  padding-bottom: max(2.5rem, 6.5vh);
}
.k-hero h1 { font-size: max(2.3rem, min(5.4vw, 9.6vh)); }
.k-hero > p { font-size: max(1rem, min(1.4vw, 2.3vh)); max-width: max(32rem, 34vw); margin-top: max(1rem, 1.9vh); }
.k-hero__form { width: min(100%, max(30rem, 36vw, 55vh)); margin-top: max(1.75rem, 3.3vh); }
.k-hero__form input, .k-hero__form button { font-size: max(1rem, 1.85vh); }
.k-hero__form input { padding-block: max(.625rem, 1.25vh); }
.k-hero__form button { padding: max(.625rem, 1.25vh) max(1.25rem, 2.4vh); }
.k-follow { font-size: max(.72rem, 1.35vh); margin-top: max(1.4rem, 2.6vh); }
.k-hero__form .max-w-lg { max-width: none; }  /* the template's inner cap fought the scaled form width */
/* short screens (heavy zoom-in, landscape phones): the copy fills most of the hero, so darken sooner */
@media (max-height: 560px) {
  .k-hero__fade { background:
    linear-gradient(to bottom, rgb(11 11 11 / .94) 0, rgb(11 11 11 / .7) 14%, rgb(11 11 11 / .55) 22%),
    linear-gradient(to bottom, rgb(11 11 11 / 0) 0, rgb(11 11 11 / .82) 26%, var(--color-ink) 40%); }
}

/* full-bleed white below the hero: no dark side bars or rounded sheet corners (2026-10-12) */
main .px-2:has(> .sheet) { padding-inline: 0; }
main .sheet { border-radius: 0; }
footer.px-2 { padding-inline: 0; padding-bottom: 0; }
footer .sheet { border-radius: 0; }

/* landscape screens (desktops, laptops, zoomed windows): the hero keeps its default composition at ANY zoom.
   Every hero size is a share of the screen, with no rem floors, so browser zoom cannot rearrange it. (2026-10-12) */
@media (min-aspect-ratio: 1/1) {
  .k-hero { min-height: 100svh; height: 100svh; padding-top: calc(68px + 4vh); padding-bottom: 6.5vh; }
  .k-hero h1 { font-size: min(5.4vw, 9.6vh); }
  .k-hero > p { font-size: min(1.4vw, 2.3vh); max-width: min(56vw, 60vh); margin-top: 1.9vh; }
  .k-hero__form { width: min(56vw, 58vh); margin-top: 3.3vh; }
  .k-hero__form form { padding: .7vh; border-radius: 1.4vh; }
  .k-hero__form input, .k-hero__form button { font-size: min(1.25vw, 1.85vh); }
  .k-hero__form input { padding: 1.25vh 1.5vh; }
  .k-hero__form button { padding: 1.25vh 2.4vh; border-radius: 1vh; }
  .k-hero__form button svg { width: 2vh; height: 2vh; }
  .k-follow { font-size: min(.95vw, 1.35vh); margin-top: 2.6vh; }
  /* the default fade, also on short windows: composition is identical at every zoom now */
  .k-hero__fade { background:
    linear-gradient(to bottom, rgb(11 11 11 / .94) 0, rgb(11 11 11 / .6) 8%, rgb(11 11 11 / 0) 18%),
    linear-gradient(to bottom, rgb(11 11 11 / 0) 34%, rgb(11 11 11 / .78) 48%, var(--color-ink) 60%); }
}
@media (min-aspect-ratio: 1/1) {
  /* keep the desktop wall on landscape screens even when zoom makes the window "narrow" */
  .k-wall { grid-template-columns: repeat(6, 1fr); gap: 1.1vw; inset: -14% -6% 22%; transform: rotate(-4deg); }
  .k-wall__col:nth-child(n + 4) { display: block; }
  .k-wall__track { gap: 1.1vw; }
  .k-card { border-radius: 1vw; }
  .k-card__name { font-size: .7vw; left: .8vw; bottom: .8vw; }
}

/* header on the home page, landscape screens: scale with the screen like the hero, so zoom changes nothing.
   Values are the defaults at a 900px-tall window (68px bar = 7.56vh). "html body" outranks underlay-nav.css,
   which loads after this file and has its own small-screen rules. Other pages keep normal zoom. (2026-10-12) */
@media (min-aspect-ratio: 1/1) {
  html body .underlay-nav__container { height: 7.56vh; padding: 0 3.55vh; }
  html body .underlay-nav__spacer { height: 7.56vh; }
  html body .page-dark { margin-top: -7.56vh; padding-top: 7.56vh; }
  html body .k-hero { margin-top: -7.56vh; padding-top: calc(7.56vh + 4vh); }
  html body .underlay-nav__logo-mark { height: 2.45vh; }
  html body .underlay-nav__actions { gap: 3vh; }
  html body .underlay-nav__toggle { font-size: 1.78vh; margin: -1.78vh; padding: 1.78vh; }
  html body .underlay-nav__cta-header { display: inline-grid; }
  html body .button-043 { font-size: 1.56vh; --button-043-padding: 1.1vh 1.1vh 1.1vh 2vh; --button-043-border-radius: 1.1vh; --button-043-icon-border-radius: .67vh; }
}

/* ---- landing additions (2026-10-12): lean, TLDR-style. Hairlines and type, no boxes. ---- */
.k-trust { margin: .9rem 0 0; color: var(--k-muted); font: 600 .8rem/1.4 Satoshi, sans-serif; letter-spacing: .01em; }
.k-trust a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.k-trust a:hover { color: #fff; }
.k-hero > .k-trust { animation: k-rise .9s var(--un-osmo, ease) .22s both; }
@media (min-aspect-ratio: 1/1) { html body .k-trust { font-size: min(.95vw, 1.45vh); margin-top: 1.5vh; } }

.kl { max-width: 76rem; margin: 0 auto; padding: 4.5rem 1.25rem 1rem; color: var(--color-ink); }
.kl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-ink); }
.kl-head h2 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.25rem) !important; line-height: 1; }
.kl-meta { margin: 0; font-size: .9375rem; color: var(--color-mute, #737373); max-width: 34rem; }
.kl-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; margin-top: 2rem; }
.kl-lead { position: relative; display: block; text-decoration: none; color: inherit; }
.kl-lead img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.kl-lead .kl-n { display: inline-block; margin-top: 1rem; }
.kl-lead .kl-h { display: block; margin-top: .25rem; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.kl-list a:hover .kl-h { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.kl-n { font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: var(--color-mute, #737373); font-variant-numeric: tabular-nums; }
.kl-list { list-style: none; margin: 0; padding: 0; }
.kl-list li { border-bottom: 1px solid var(--color-line, #e5e5e5); }
.kl-list li:first-child { border-top: 0; }
.kl-list a { display: grid; grid-template-columns: 2rem 1fr 6.5rem; gap: 1rem; align-items: center; padding: 1rem 0; text-decoration: none; color: inherit; }
.kl-list .kl-h { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.kl-list img { width: 6.5rem; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.kl-foot { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin-top: 1.75rem; }
.kl-foot a { font-weight: 700; color: inherit; text-decoration: none; }
.kl-foot a:hover { text-decoration: underline; }
.kl-read { padding: .75rem 1.125rem; border-radius: 3px; background: var(--color-ink); color: var(--color-paper) !important; }

.kf { width: min(73.5rem, calc(100% - 2.5rem)); margin: 0 auto; padding: 1rem 0 4.5rem; color: var(--color-ink); }  /* same column as the tools section above */
.kf-list { max-width: 52rem; }
.kf-title { margin: 0 0 .5rem; font-size: clamp(1.75rem, 3vw, 2.25rem) !important; line-height: 1; }
.kf-list details { border-bottom: 1px solid var(--color-line, #e5e5e5); }
.kf-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 700; font-size: 1.0625rem; }
.kf-list summary::-webkit-details-marker { display: none; }
.kf-list summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; transition: transform .25s ease; }
.kf-list details[open] summary::after { transform: rotate(45deg); }
.kf-list details p { margin: 0 0 1.1rem; max-width: 40rem; color: color-mix(in oklab, var(--color-ink) 75%, transparent); }
.kf-cta { margin: 1.5rem 0 0; }
.kf-cta a { font-weight: 700; color: inherit; }
@media (max-width: 860px) { .kl-grid { grid-template-columns: 1fr; gap: 1.5rem; } .kl-list a { grid-template-columns: 2rem 1fr 5rem; } .kl-list img { width: 5rem; } }
.kl-lead img { object-position: center 25%; }

/* ---- human layer (2026-10-12): collage cut-out, margin note, noise-to-clarity headlines, sticker tags ---- */
.kl-lead { isolation: isolate; }
.kl-lead > img { position: relative; z-index: 1; }
/* "Some of the people we cover" */
.kl-people { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; font-weight: 600; color: var(--color-mute, #737373); }
.kl-faces { display: flex; }
.kl-faces img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid #fff; margin-left: -.55rem;
  transition: transform .3s cubic-bezier(.34, 1.6, .64, 1); background: #ddd; }
.kl-faces img:first-child { margin-left: 0; }
.kl-faces img:hover { transform: translateY(-4px) rotate(-6deg) scale(1.12); position: relative; z-index: 2; }
.kl-head { row-gap: .9rem; }
/* sticker name tags on the hero wall react to the cursor */
.k-card__name { transition: transform .45s cubic-bezier(.34, 1.7, .64, 1); transform-origin: 0 100%; }
.k-card:nth-child(odd) .k-card__name { transform: rotate(-2deg); }
.k-card:nth-child(even) .k-card__name { transform: rotate(1.5deg); }
.k-card:hover .k-card__name { transform: rotate(-7deg) translateY(-3px) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .kl-peek img, .k-card__name, .kl-faces img { transition: none; } }
/* human layer, pass 3: a rotating cast of tech leaders rises from behind the section rule; scroll lifts them (parallax), they duck and swap on a timer */
.kl-lead > img { aspect-ratio: 16 / 9; object-position: 92% 35%; }
.kl-head { position: relative; }
.kl-peek { position: absolute; left: calc(max(53%, calc(34rem + 3rem)) - 3.25rem); bottom: 0; cursor: pointer; width: clamp(6.5rem, 9.5vw, 9rem); aspect-ratio: 1 / .9; clip-path: inset(-80% -120% 0 -150%); }
.kl-peek-in { display: block; height: 100%; }
.kl-peek img { display: block; width: 100%; height: auto; transform: translateY(0); filter: drop-shadow(0 4px 8px rgb(0 0 0 / .15));
  transition: transform .55s cubic-bezier(.34, 1.45, .64, 1); }
.kl:not(.is-in) .kl-peek img, .kl-peek.is-ducking img { transform: translateY(105%); transition: transform .4s cubic-bezier(.5, 0, .75, 0); }
.kl-peek-name { position: absolute; left: 18%; top: -1.9rem; white-space: nowrap; padding: .2rem .5rem; border-radius: 4px;
  background: #0b0b0b; color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .01em; transform: rotate(-4deg);
  transition: opacity .25s, transform .45s cubic-bezier(.34, 1.7, .64, 1); }
.kl:not(.is-in) .kl-peek-name, .kl-peek.is-ducking .kl-peek-name { opacity: 0; transform: rotate(4deg) translateY(.4rem); }
.kl-faces img { animation: kl-bob 3.2s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes kl-bob { to { transform: translateY(-3px); } }
.kl-faces img:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .kl-peek img, .kl-peek-name { transition: none; } .kl-faces img { animation: none; } }
@media (max-width: 860px) { .kl-peek { left: auto; right: .25rem; width: 5rem; } .kl-peek-name { left: auto; right: 0; top: -1.5rem; } .kl-meta { padding-right: 5.75rem; } }
/* mid widths: no room for the peek between the paragraph and the face row, so the row drops under the paragraph and the peek takes the right */
@media (min-width: 861px) and (max-width: 1280px) { .kl-meta { order: 2; flex-basis: 100%; max-width: none; padding-right: 13rem; } .kl-people { order: 3; } .kl-peek { left: auto; right: 4%; } }

/* 2026-10-15: hero tool search (replaces the newsletter form) */
.k-hero__form { position: relative; z-index: 5; }
.k-hero__results { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); margin: 0; padding: .375rem; list-style: none; text-align: left; background: #fff; color: #0b0b0b; border-radius: .875rem; box-shadow: 0 18px 50px rgba(0,0,0,.45); max-height: min(52vh, 26rem); overflow: auto; }
.k-hero__results a { display: block; padding: .625rem .75rem; border-radius: .5rem; color: inherit; text-decoration: none; font: 500 1rem/1.35 Satoshi, sans-serif; }
.k-hero__results b { font-weight: 700; }
.k-hero__results span { color: #5c5c5c; font-size: .875rem; }
.k-hero__results small { display: block; color: #5c5c5c; font-size: .8125rem; }
.k-hero__results a:hover, .k-hero__results [aria-selected] a { background: #f1f1ef; }
.k-hero__all { border-top: 1px solid #e4e4e1; margin-top: .25rem; padding-top: .25rem; }
.k-hero__none { padding: .75rem; color: #5c5c5c; }
.k-hero__results.is-up { top: auto; bottom: calc(100% + .5rem); }
.kp-note { margin: .75rem 0 0; font-size: .8125rem; color: var(--k-body-grey, #6b6b6b); }
.kp-person img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: inherit; }
.kp--people { padding-top: 0; }