/* Base: reset, type, rules, grid. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--margin); top: -100px; z-index: 1000; padding: 12px 20px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; }

/* Page frame: margins only, no max-width below 1600. */
.kv-page { padding-inline: var(--margin); max-width: 1648px; margin-inline: auto; }
.kv-main { padding-top: calc(var(--header-h) + 4px); }
.kv-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--gut); }
.kv-block { margin-bottom: var(--block); }

/* Rules in the page's own ink. 5px between sections, 2px inside rows, 3px in the cart. */
.kv-rule { border: 0; height: 5px; background: currentColor; color: inherit; margin: 0; }
.kv-rule--2 { height: 2px; } .kv-rule--3 { height: 3px; }

/* Type */
.kv-statement { font-size: var(--t-statement); font-weight: 800; line-height: 1; letter-spacing: -0.05em; text-wrap: balance; }
.kv-statement span { color: var(--ink-2); }
.kv-h1 { font-size: var(--t-h1); font-weight: 500; line-height: 0.9; letter-spacing: -0.025em; text-wrap: balance; hyphens: manual; }
.kv-h2 { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.025em; }
.kv-ui { font-size: var(--t-ui); line-height: 1.33; letter-spacing: -0.025em; }
.kv-meta { font-size: var(--t-meta); font-weight: 700; line-height: 1.33; text-transform: none; }
.kv-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-tag); line-height: 1.5; }
.kv-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kv-muted { color: var(--ink-2); }
.kv-sup { font-size: 0.3em; vertical-align: top; position: relative; top: 0.35em; margin-left: 0.1em; letter-spacing: 0; font-weight: 400; }

/* Link: a 2px bar that draws in from the left over 500ms. No colour change. */
.kv-u { position: relative; display: inline-block; }
.kv-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: max(2px, 0.08em); background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-hover) var(--e-link); }
.kv-u:hover::after, .kv-u:focus-visible::after, .kv-u[data-selected]::after, .kv-u.is-current::after { transform: scaleX(1); }

/* CTA: bare text plus an arrow. On hover the label slides one em right while a leading arrow comes in. */
.kv-cta { position: relative; display: inline-flex; align-items: center; overflow: hidden; font-size: var(--t-cta); line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.kv-cta > svg { width: 0.5em; height: 0.5em; fill: currentColor; flex: none; transition: translate var(--d-hover) var(--e-cta); }
.kv-cta > svg:first-child { position: absolute; left: 0; top: 50%; translate: -1em -50%; }
.kv-cta > span { margin-right: 0.5em; transition: translate var(--d-hover) var(--e-cta); }
.kv-cta:hover > span, .kv-cta:focus-visible > span, .kv-cta:hover > svg:last-child { translate: 1em 0; }
.kv-cta:hover > svg:first-child, .kv-cta:focus-visible > svg:first-child { translate: 0 -50%; }
.kv-cta[disabled], .kv-cta.disabled, .kv-cta[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.kv-cta--sm { font-size: 24px; } .kv-cta--xs { font-size: 16px; letter-spacing: -0.01em; } .kv-cta--lg { font-size: 64px; }

/* Masked lines: rise 73px on entrance. */
.js .kv-lines .kv-line { display: block; clip-path: inset(-0.25em -0.1em -0.3em -0.1em); }
.js .kv-lines .kv-line > span { display: block; transform: translateY(0.8em); transition: transform 600ms var(--e-out); }
.js .kv-lines.is-in .kv-line > span { transform: none; }
.js .kv-rise { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--e-out), transform 1s var(--e-out); }
.js .kv-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .kv-lines .kv-line > span, .js .kv-rise { transform: none; opacity: 1; transition: none; } }

/* Prose */
.kv-prose { font-size: 24px; line-height: 1.25; letter-spacing: -0.025em; max-width: 52ch; }
.kv-prose p + p, .kv-prose ul + p, .kv-prose p + ul { margin-top: 1em; }
.kv-prose h2, .kv-prose h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1; margin: 1.6em 0 0.5em; }
.kv-prose h2 { font-size: 36px; } .kv-prose h3 { font-size: 30px; }
.kv-prose a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 2px; }
.kv-prose ul { list-style: disc; padding-left: 1em; } .kv-prose ol { list-style: decimal; padding-left: 1em; }
.kv-prose blockquote { margin: 1.5em 0; font-weight: 700; }
.kv-prose--sm { font-size: 16px; line-height: 1.5; letter-spacing: 0; }
@media (max-width: 1023px) { .kv-prose { font-size: 18px; line-height: 1.3; } }

/* Inputs: a 2px rule, no box. */
.kv-field { display: grid; gap: 8px; }
.kv-field__label { font-size: var(--t-meta); font-weight: 700; }
.kv-input { width: 100%; min-height: 48px; padding: 8px 0; background: transparent; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; font-size: 24px; letter-spacing: -0.025em; color: inherit; }
.kv-input:focus { outline: none; }
.kv-input::placeholder { color: var(--ink-2); }
.kv-input--area { min-height: 96px; resize: vertical; line-height: 1.3; }
select.kv-input { appearance: none; }

/* Notices */
.kv-notice { padding: 12px 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; font-size: var(--t-body); }

/* Transition layer: ink panel with the wordmark, wipes bottom to top on leave, top to bottom away on arrival. */
.kv-layer { position: fixed; inset: 0; z-index: 1200; background: var(--layer-ink, var(--ink)); color: var(--paper); display: grid; place-items: center; pointer-events: none; clip-path: inset(100% 0 0); }
.kv-layer svg { width: min(224px, 40vw); height: auto; fill: currentColor; }
.kv-covered .kv-layer { clip-path: inset(0); }
.kv-layer.is-in { transition: clip-path var(--d-wipe) var(--e-wipe); clip-path: inset(0); }
.kv-layer.is-out { transition: clip-path var(--d-out) var(--e-wipe); clip-path: inset(0 0 100%); }
.kv-main { transform-origin: 50% 0; transition: transform var(--d-wipe) var(--e-wipe), opacity 120ms linear; }
.kv-leaving .kv-main { transform: scale(0.9) translateY(-16vh); opacity: 0.9; }
.kv-covered .kv-main, .kv-covered .kv-top, .kv-covered .kv-foot { visibility: hidden; }
.kv-covered.kv-arrived .kv-main, .kv-covered.kv-arrived .kv-top, .kv-covered.kv-arrived .kv-foot { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .kv-layer, .kv-main { transition: none !important; } }

/* Intro: once per session. Ink panel, four rotated photos shrink one by one, a counter, the wordmark; then the panel lifts. */
.kv-intro { position: fixed; inset: 0; z-index: 1300; background: var(--ink); color: var(--paper); display: none; place-items: center; overflow: hidden; transition: transform 700ms var(--e-wipe); }
.kv-intro-running .kv-intro { display: grid; }
.kv-intro__shots { position: absolute; inset: 0; display: grid; place-items: center; }
.kv-intro__shots img { position: absolute; width: 12vw; min-width: 117px; aspect-ratio: 9 / 12; object-fit: cover; background: var(--photo); transform: rotate(var(--rot)) scale(1); transition: transform 500ms var(--e-io); }
.kv-intro.is-shrinking .kv-intro__shots img { transform: rotate(var(--rot)) scale(0); }
.kv-intro__shots img:nth-child(1) { --rot: -7deg; transition-delay: 100ms; } .kv-intro__shots img:nth-child(2) { --rot: 11deg; transition-delay: 260ms; } .kv-intro__shots img:nth-child(3) { --rot: 15deg; transition-delay: 420ms; } .kv-intro__shots img:nth-child(4) { --rot: 19deg; transition-delay: 0ms; }
.kv-intro__mark { position: relative; width: min(448px, 60vw); fill: currentColor; }
.kv-intro__count { position: absolute; right: var(--margin); top: 50%; translate: 0 -50%; font-size: 16px; font-variant-numeric: tabular-nums; }
.kv-intro.is-done { transform: translateY(-101%); }
.kv-intro[hidden] { display: none; }
.kv-intro-running .kv-top { transform: translateY(-96px); }
.kv-intro-running .kv-themes { opacity: 0; }
.kv-themes { transition: opacity 600ms var(--e-out) 300ms; }


/* Search form inside the meta row */
.kv-searchform { display: flex; gap: 16px; align-items: end; max-width: 480px; }
.kv-searchform .kv-input { font-size: 16px; min-height: 36px; padding: 4px 0; }