/* 1K — black / paper / one red. Numbers do the talking. Pages: home (the Block), roll, apply, charter. The seat page has its own sheet (/1k/seat.css). */
:root {
  --k-black: #070707; --k-ink: #0b0b0b; --k-paper: #f4f2ed; --k-white: #ffffff; --k-red: #e0271b;
  --k-grey: #6b6b6b; --k-grey-2: #9a9a9a; --k-line: rgba(0,0,0,.16); --k-line-d: rgba(255,255,255,.16);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(16px, 3.4vw, 48px); --max: 1344px; --head: 64px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--k-black); color: var(--k-white); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
/* Focus follows the surface (white on black, ink on paper) — red is kept for meaning. */
:focus-visible { outline: 2px solid var(--k-white); outline-offset: 3px; }
.light :focus-visible, .light:focus-visible { outline-color: var(--k-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.red { color: var(--k-red); }
.muted { color: var(--k-grey); }
[data-numerals] { display: inline-block; line-height: 0; }
[data-numerals]:not(.num-ready) { font-weight: 800; letter-spacing: -.04em; line-height: 1; font-size: inherit; }
[data-numerals] svg { display: inline-block; height: 1em; width: auto; vertical-align: -0.08em; }

/* ── Brand slot inside the shared shell (/sw/shell.css): the 1K mark (Sidewave's ribbon runs over the header, /sw/ribbon.js) ── */
.k-lockup { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.k-lockup a { display: inline-flex; align-items: center; color: inherit; }
/* The 1K mark: the Block as one cube, seat 000 the red cube at its corner, "1K" in the numerals (/1k/mark.js).  */
.k-lockup .k-1k { height: 26px; width: auto; overflow: visible; }
.k-1k .k-000 { fill: var(--k-red, #e0271b); }
/* The red corner lifts off the block on hover and drops back: the seat that started it. */
.k-lockup a:hover .k-000, .k-lockup a:focus-visible .k-000 { animation: k-land .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes k-land { 40% { transform: translateY(-16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .k-lockup a:hover .k-000 { animation: none; } }
/* Pages whose header floats over a dark stage start under the 64px bar. */
.under-bar { padding-top: var(--head); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border: 1px solid currentColor; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; background: transparent; transition: background .15s, color .15s; }
.btn.fill { background: var(--k-white); color: var(--k-black); border-color: var(--k-white); }
.btn.fill:hover { background: transparent; color: var(--k-white); border-color: var(--k-white); }
.btn.ghost:hover { background: var(--k-white); color: var(--k-black); }
.light .btn.fill { background: var(--k-black); color: var(--k-white); border-color: var(--k-black); }
.light .btn.fill:hover { background: transparent; color: var(--k-black); border-color: var(--k-black); }
.light .btn.ghost:hover { background: var(--k-black); color: var(--k-white); }
.cta-row { margin: 28px 0 0; }
.btn-row { margin: 18px 0 0; }

/* Skip link + shell additions for 1K */
.skip { position: absolute; left: 16px; top: -100px; z-index: 60; padding: 10px 14px; background: var(--k-white); color: var(--k-black); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.skip:focus { top: 12px; }
.sh .k-signin { display: inline-flex; align-items: center; height: 36px; padding: 0 10px; font-size: 14px; font-weight: 500; color: var(--sh-fg-2); white-space: nowrap; }
.sh .k-signin:hover { color: var(--sh-fg); }
.sh .k-signin:focus-visible { outline: 2px solid var(--sh-fg); outline-offset: 3px; }

/* ── Sections ──────────────────────────────────────────────────────────── */
.light { background: var(--k-paper); color: var(--k-ink); color-scheme: light; }
.dark { background: var(--k-black); color: var(--k-white); }
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec-h { display: grid; grid-template-columns: 72px 1fr; align-items: end; gap: 16px; padding-top: 18px; border-top: 1px solid var(--k-line-d); margin-bottom: clamp(36px, 5vw, 64px); }
.light .sec-h { border-color: var(--k-line); }
.sec-h .n { font-size: 34px; align-self: baseline; }
.sec-h:not(:has(.n)) { grid-template-columns: 1fr; } /* a one-section page carries no index */
.sec-h h1, .sec-h h2 { margin: 0; font-size: clamp(30px, 4.2vw, 56px); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -.01em; max-width: 34em; margin: 0; }

/* ── Home: the Block fills the viewport under the bar; the counts line sits on its bottom edge ── */
.hero { position: relative; padding-top: var(--head); isolation: isolate; }
.hero .stage { position: relative; height: calc(100svh - var(--head)); min-height: 560px; overflow: hidden; }
.stage canvas { width: 100%; height: 100%; cursor: grab; outline-offset: -4px; }
.stage canvas:active { cursor: grabbing; }
.hero .foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; padding: 18px 0 22px; border-top: 1px solid var(--k-line-d); pointer-events: none; }
.hero .foot > * { pointer-events: auto; }
.count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.k-pair { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.count .big { font-size: clamp(34px, 4vw, 48px); }
.count .mono { color: var(--k-grey-2); white-space: nowrap; }
.count .sep { font-size: 28px; color: var(--k-grey-2); vertical-align: 0; }
.stale, .count .mono.stale, .holders .mono.stale { color: var(--k-red); font-size: 12px; }
.k-stale .count .big { color: var(--k-grey); }
.count .stale { flex-basis: 100%; } /* the state line takes its own row under the counts */

/* ── The hover card: paper, hairline, the identity's poster, the number, the name. Red only on 000. ── */
.kv-card { position: absolute; left: 0; top: 0; z-index: 2; width: clamp(180px, 22vw, 300px); background: var(--k-paper); color: var(--k-ink); color-scheme: light; border: 1px solid var(--k-ink); padding-bottom: 12px; cursor: pointer; will-change: transform; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.kv-art { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--k-ink); background: var(--k-paper); }
.kv-art img, .kv-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kv-art canvas { visibility: hidden; }
.kv-card.live .kv-art canvas { visibility: visible; }
.kv-card.live .kv-art img { visibility: hidden; }
/* Open scene: the seat's own number stands over the open poster (ink, 2 px paper outline); the live scene draws it in 3D. */
.kv-over { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.kv-over:empty, .kv-card.live .kv-over { display: none; }
.kv-over svg { height: 40px; width: auto; overflow: visible; }
.kv-over path { fill: var(--k-ink); stroke: var(--k-paper); stroke-width: 4px; paint-order: stroke fill; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
/* Leader: a hairline from the cube to the card, so a card beside the Block still points at its seat. */
.kv-lead { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kv-lead polyline { fill: none; stroke: var(--k-grey); stroke-width: 1px; shape-rendering: crispEdges; }
@media (max-width: 720px) { .kv-card { width: 180px; } .kv-num svg { height: 24px; } .kv-over svg { height: 32px; } }
.kv-num { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 0; line-height: 0; }
.kv-num svg { height: 28px; width: auto; }
/* Sample identities say so: red carries meaning here, as on the seat stage. */
.kv-tag { font: 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 4px 6px; background: var(--k-red); color: #fff; white-space: nowrap; }
.kv-name { margin: 8px 12px 0; font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* The holder's profile: one mono line (company · @handle · host) and the bio's first sentence. Rows are reserved while the dossier loads. */
.kv-meta { margin: 4px 12px 0; font: 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-bio { margin: 6px 12px 0; font-size: 13px; line-height: 1.35; color: #555; overflow-wrap: anywhere; }
.kv-card.loading .kv-meta { min-height: 14px; }
.kv-card.loading .kv-bio { min-height: 35px; }
.kv-card.founder { border-color: var(--k-red); }
.kv-card.founder .kv-art { border-bottom-color: var(--k-red); }
.kv-card.founder .kv-num { color: var(--k-red); }
@media (prefers-reduced-motion: reduce) { .kv-art canvas { display: none; } .kv-card.live .kv-art img { visibility: visible; } }

/* No-WebGL / still fallback sheet */
.k-flat { width: 100%; height: auto; }
.k-flat.is-interactive rect { cursor: pointer; }
.k-flat a rect { pointer-events: all; } /* open seats are fill:none — the whole cell must still take the mouse */
.k-flat a:focus { outline: none; }
.k-flat .k-ring { fill: none; stroke: var(--k-white); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.k-flat a:focus-visible rect.open { stroke: var(--k-white); }
.k-flat a:hover rect.open { stroke: rgba(255,255,255,.9); }
.hero .stage > .k-flat, .roll-stage .stage > .k-flat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88%, 1100px); overflow: visible; }
/* Wide: the sheet stands left so the card has its band on the right (as beside the WebGL Block). Narrower: the card takes the band above. */
@media (min-width: 1025px) { .hero .stage > .k-flat, .roll-stage .stage > .k-flat { left: var(--gutter); transform: translateY(-50%); width: min(64%, 980px); } }
@media (max-width: 880px) { .hero .stage > .k-flat, .roll-stage .stage > .k-flat { width: calc(100% - var(--gutter) * 2); } }
.k-flat rect.open { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 1; }
.k-flat rect.held { fill: var(--k-white); }
.k-flat rect.founder { fill: var(--k-red); }
.light .k-flat rect.open { stroke: rgba(0,0,0,.4); }
.light .k-flat rect.held { fill: var(--k-ink); }

/* ── Apply: lead + steps beside the form ───────────────────────────────── */
.two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 880px) { .two { grid-template-columns: 1fr; } }
.steps { display: grid; }
.steps > div { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--k-line); align-items: start; }
.dark .steps > div { border-top-color: var(--k-line-d); }
.steps > div:last-child { border-bottom: 1px solid var(--k-line); }
.dark .steps > div:last-child { border-bottom-color: var(--k-line-d); }
.steps .n { font-size: 28px; margin-top: 2px; }
.steps.gap-top { margin-top: 32px; }
/* The sentence that closes the deal is set at lead size, not as a footnote. */
.cost { margin: 14px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -.01em; max-width: 34em; text-wrap: balance; }
.cost + .cost { margin-top: 6px; }
.steps p { margin: 0; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.steps p small { display: block; font-size: 15px; font-weight: 400; color: var(--k-grey); margin-top: 6px; letter-spacing: 0; }

/* ── Roll page ─────────────────────────────────────────────────────────── */
.roll-stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.roll-stage .stage { position: absolute; inset: 0; }
.roll-stage canvas { width: 100%; height: 100%; }
.roll-stage .hud { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--head) + 20px) 0 24px; }
.roll-stage .hud > * { pointer-events: auto; }
.hud-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.hud-bottom { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.layers { display: flex; flex-direction: column; gap: 2px; align-self: center; justify-self: end; }
.layers button { background: rgba(7,7,7,.7); border: 1px solid var(--k-line-d); color: var(--k-grey-2); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; padding: 7px 10px; min-width: 64px; text-align: left; cursor: pointer; }
.layers button:hover { color: var(--k-white); border-color: var(--k-white); }
.layers button[aria-pressed="true"] { background: var(--k-white); color: var(--k-black); border-color: var(--k-white); }
.layers button.scan:not([aria-pressed="true"]) { color: var(--k-white); }
/* Home: the strip sits in the foot line, right of the counts — All, then 000 … 900 (each opens its hundred). */
.hero .layers { flex-direction: row; flex-wrap: wrap; align-self: end; justify-self: auto; }
.hero .layers button { min-width: 0; padding: 7px 9px; text-align: center; }
@media (max-width: 880px) {
  .roll-stage { height: 78svh; min-height: 520px; }
  .roll-stage .hud { grid-template-rows: auto 1fr auto; }
  .layers { flex-direction: row; flex-wrap: nowrap; align-self: end; justify-self: stretch; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .layers::-webkit-scrollbar { display: none; }
  .layers button { min-width: 0; padding: 7px 10px; flex: 0 0 auto; }
}
.holders { padding: clamp(48px, 6vw, 96px) 0; }
.holders .row { display: grid; grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1fr) auto auto; gap: 16px 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--k-line-d); }
.holders .row .thumb { display: none; }
.holders .with-thumbs .row { grid-template-columns: 48px 96px minmax(0, 1.2fr) minmax(0, 1fr) auto auto; }
.holders .with-thumbs .row .thumb { display: block; }
.holders .row:last-child { border-bottom: 1px solid var(--k-line-d); }
.holders .row .thumb { width: 48px; height: 32px; overflow: hidden; }
.holders .row .thumb img { width: 48px; height: 32px; object-fit: cover; }
.holders .row .n { font-size: 28px; }
.holders .row .n.founder { color: var(--k-red); }
.holders .row .name { font-size: 20px; font-weight: 600; letter-spacing: -.02em; min-width: 0; overflow-wrap: anywhere; }
.holders .row .co { min-width: 0; overflow-wrap: anywhere; }
.holders .row .name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.holders .row .mono { color: var(--k-grey-2); }
@media (max-width: 720px) {
  /* Phone: the name takes the row; the date gets its own line under it. */
  .holders .row { grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; }
  .holders .with-thumbs .row { grid-template-columns: 48px 72px minmax(0, 1fr); }
  .holders .row .co, .holders .row .lin { display: none; }
  .holders .row .date { grid-column: -2 / -1; }
  .holders .row .date:empty { display: none; }
}
.holders .open-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 28px; }

/* ── Apply form ────────────────────────────────────────────────────────── */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--k-grey); display: flex; justify-content: space-between; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--k-ink); padding: 10px 0; font-size: 18px; border-radius: 0; }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.4; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--k-ink); border-bottom-width: 2px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 2px; }
.field input.short { max-width: 8em; }
.field .err { color: var(--k-red); font-size: 13px; display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid textarea { border-bottom-color: var(--k-red); }
.form .actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form .status { color: var(--k-grey); font-size: 14px; }
.form .status.err { color: var(--k-red); }
.done { display: grid; gap: 18px; padding: 32px 0; border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); }
.done h2 { margin: 0; font-size: clamp(32px, 4vw, 56px); letter-spacing: -.04em; line-height: 1; }
.done p { margin: 0; color: var(--k-grey); max-width: 32em; }

/* ── Charter ───────────────────────────────────────────────────────────── */
.charter { padding: calc(var(--head) + clamp(56px, 8vw, 112px)) 0 clamp(80px, 10vw, 140px); }
.charter h1 { margin: 0 0 clamp(40px, 6vw, 80px); font-size: clamp(44px, 7vw, 104px); letter-spacing: -.05em; line-height: .92; }
.charter ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.charter li { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--k-line-d); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.22; letter-spacing: -.025em; font-weight: 600; }
.charter li:last-child { border-bottom: 1px solid var(--k-line-d); }
.charter li .n { font-size: 22px; color: var(--k-grey-2); }
/* Terms: a giant numeral for the clause being read (sticky, left), ten cells beside it lighting as clauses are read; the clauses
   on the right, the one at the middle of the screen full white, the rest falling back with distance (--d, set by 1k.js). */
.charter h1 { font-size: clamp(72px, 15vw, 240px); letter-spacing: -.065em; line-height: .84; }
.ct { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.ct-dial { position: sticky; top: calc(var(--head) + 24px); display: grid; gap: 22px; }
.ct-num { position: relative; display: block; height: min(46vh, 30vw); overflow: hidden; }
.ct-num > span { position: absolute; left: 0; bottom: 0; animation: ct-in .55s cubic-bezier(.2, .7, .2, 1) both; }
.ct-num > span.is-out { animation: ct-out .45s cubic-bezier(.7, 0, .8, .3) both; }
.ct-num svg { display: block; height: min(46vh, 30vw); width: auto; }
.ct-num path { fill: var(--k-white); }
@keyframes ct-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ct-out { to { transform: translateY(-100%); opacity: 0; } }
.ct-cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 320px; }
.ct-cells i { display: block; aspect-ratio: 1; border: 1px solid var(--k-line-d); transition: background .3s, border-color .3s; }
.ct-cells i.on { background: var(--k-white); border-color: var(--k-white); }
.ct-live .charter li { --d: 0; color: color-mix(in srgb, var(--k-white) calc((1 - var(--d)) * 100%), #3c3c3c); transform: translateX(calc(var(--d) * 18px)); }
.ct-live .charter li .n { color: color-mix(in srgb, var(--k-white) calc((1 - var(--d)) * 100%), #3c3c3c); }
.ct-live .charter li a { color: inherit; }
@media (max-width: 860px) {
  .ct { grid-template-columns: minmax(0, 1fr); }
  .ct-dial { top: var(--head); z-index: 2; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 10px 0; background: var(--k-black, #070707); }
  .ct-num, .ct-num svg { height: 44px; }
  .ct-num { width: 56px; }
}
.count { color: inherit; text-decoration: none; } .count:hover .mono { color: var(--k-white, #fff); }
/* Founder poster (/1k/poster) */
.pst { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--head, 64px) + 24px) 16px 64px; }
.pst-wrap { display: grid; gap: 18px; justify-items: center; }
.pst-canvas { display: block; height: min(78svh, 1350px); width: auto; aspect-ratio: 4 / 5; max-width: calc(100vw - 32px); object-fit: contain; background: #0b0b0b; box-shadow: 0 30px 80px rgba(0,0,0,.5); touch-action: none; }
.pst-wrap[data-fmt="story"] .pst-canvas { aspect-ratio: 9 / 16; }
.pst-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.pst-fmt { display: flex; gap: 6px; }
.pst-fmt .btn[aria-pressed="true"] { background: var(--k-white); color: var(--k-black); }
.pst-back { color: var(--k-grey-2); text-decoration: none; }
.pst-back:hover { color: var(--k-white); }
/* the Founder's own face on the cube's card: a cut-out square in the corner of the identity art */
.kv-art { position: relative; }
.kv-art .kv-face, .kv-card.live .kv-art .kv-face { position: absolute; inset: auto 10px 10px auto; z-index: 2; width: 34%; height: auto; aspect-ratio: 1; object-fit: cover; visibility: visible; filter: grayscale(1) contrast(1.25); border: 1px solid var(--k-ink); background: var(--k-paper); }
.kv-art .kv-face[hidden] { display: none; }
.holders .thumb.face img, .thumb.face img { object-fit: cover; filter: grayscale(1) contrast(1.2); }

/* People | Surface — the two sides of 1K (the people below, the surface everyone sees), in the header of the dark pages. */
.sh[data-brand="1k"] .sh-in:has(.k-sides) { grid-template-columns: auto 1fr auto; }
.k-sides { justify-self: center; display: inline-flex; box-shadow: inset 0 0 0 1px var(--k-line-d); }
.k-sides a { padding: 8px 13px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--k-grey-2); transition: color .2s ease, background-color .2s ease; }
.k-sides a:hover { color: var(--k-white); }
.k-sides a[aria-current="page"] { background: var(--k-white); color: var(--k-ink); }
@media (max-width: 720px) { .sh[data-brand="1k"] .sh-in:has(.k-sides) { gap: 10px; } .k-sides { justify-self: end; } .k-sides a { padding: 8px 8px; letter-spacing: .08em; } }

/* The seat's address (home): Layer · Row · Col, each a reel of pixel digits that rolls to the seat being shown, over a ruler of ten. */
.k-addr { display: flex; gap: 12px; align-items: flex-end; opacity: .32; transition: opacity .4s; }
.k-addr.is-on, .k-addr.is-layer { opacity: 1; }
.k-addr.is-layer .k-addr-c:not(.is-lit) { opacity: .3; }
.k-addr-c { transition: opacity .4s; }
.k-addr-c { display: grid; gap: 6px; justify-items: start; }
.k-addr-win { display: block; height: 40px; overflow: hidden; }
.k-addr-reel { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -40px)); transition: transform .62s cubic-bezier(.7, 0, .2, 1) calc(var(--k) * 70ms); }
.k-addr-reel svg { display: block; height: 40px; width: auto; flex: none; }
.k-addr-reel path { fill: var(--k-white, #f4f2ed); }
.k-addr-ruler { display: grid; grid-template-columns: repeat(10, 3px); gap: 2px; height: 8px; align-items: end; }
.k-addr-ruler i { display: block; height: 3px; background: rgba(244, 242, 237, .22); transition: height .4s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * 70ms), background .3s; }
.k-addr-ruler i.on { height: 8px; background: var(--k-white, #f4f2ed); }
.k-addr small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--k-grey-2); }
@media (max-width: 1180px) { .k-addr { display: none; } }
@media (prefers-reduced-motion: reduce) { .k-addr-reel, .k-addr-ruler i { transition: none; } }

/* A layer at a glance: a 10 × 10 grid on its button, held seats filled. */
.k-lgrid { width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; background: rgba(244, 242, 237, .07); outline: 1px solid rgba(244, 242, 237, .2); }
.k-lgrid rect { fill: currentColor; }
.k-lgrid rect.k-red { fill: var(--k-red, #E0271B); }
.layers button[aria-pressed="true"] .k-lgrid { outline-color: rgba(11, 11, 11, .3); background: rgba(11, 11, 11, .07); }
.layers button { transition: color .2s, border-color .2s, background .2s; }
.layers button { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.hero .layers button { padding: 7px 7px; }
@media (max-width: 1360px) { .hero .k-lgrid { display: none; } }

/* A new seat on the card: the art wipes in along the 11° cut, the number and lines follow, the leader draws from the cube. */
.kv-card.kv-in .kv-art { animation: kv-wipe .62s cubic-bezier(.7, 0, .2, 1) both; }
.kv-card.kv-in .kv-num, .kv-card.kv-in .kv-name, .kv-card.kv-in .kv-meta, .kv-card.kv-in .kv-bio { animation: kv-rise .5s cubic-bezier(.2, .7, .2, 1) .16s both; }
.kv-lead polyline { stroke-dasharray: 1; }
.kv-lead.kv-in polyline { animation: kv-draw .5s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes kv-wipe { from { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); } to { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); } }
@keyframes kv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .kv-card.kv-in .kv-art, .kv-card.kv-in .kv-num, .kv-card.kv-in .kv-name, .kv-card.kv-in .kv-meta, .kv-card.kv-in .kv-bio, .kv-lead.kv-in polyline { animation: none; } }