/* Neon Frenchie: brand kit page. Builds on site.css tokens. */

.kit-page {
  --pat-head: var(--t-pink);
  --pat-face: var(--t-sodium);
}
:root[data-theme="day"] .kit-page {
  --pat-head: #d92e7d;
  --pat-face: #b07a00;
}

/* ------------------------------------------------------------------ hero */
.hero--kit {
  min-height: 0;
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* ------------------------------------------------------- on this page */
.bk-toc {
  position: sticky;
  top: 72px;
  z-index: 20;
  border-block: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.bk-toc ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.bk-toc ul::-webkit-scrollbar {
  display: none;
}

.bk-toc a {
  display: block;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.2s, background-color 0.2s;
}

.bk-toc a:hover,
.bk-toc a[aria-current="true"] {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.bk-toc a[aria-current="true"] {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.kit-page .section {
  scroll-margin-top: 130px;
}

.kit-page .section + .section {
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------ layout bits */
.bk-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.bk-split--flip {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

.bk-split__text h2 {
  font-size: var(--step-4);
  margin-bottom: 0.45em;
}

.bk-split__text > p {
  max-width: 34rem;
  color: color-mix(in srgb, var(--fg) 86%, transparent);
}

.bk-subhead {
  margin: clamp(48px, 7vw, 80px) 0 0.4em;
  font-size: var(--step-2);
  font-stretch: 115%;
}

.bk-lede {
  max-width: 40rem;
  color: var(--muted);
}

/* the drafting sheet the diagrams sit on */
.bk-sheet {
  margin: 0;
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg) 10%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--bg-raised);
}

.bk-sheet figcaption {
  margin-top: 14px;
  font-size: var(--step--1);
  color: var(--muted);
}

/* ------------------------------------------------------- bending pattern */
.pattern {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pat-grid path {
  stroke: color-mix(in srgb, var(--fg) 12%, transparent);
  stroke-width: 0.25;
}

.pat-band--head {
  stroke: color-mix(in srgb, var(--pat-head) 26%, transparent);
}

.pat-band--face :is(path, circle) {
  stroke: color-mix(in srgb, var(--pat-face) 30%, transparent);
}

.pat-line {
  stroke: var(--pat-head);
  stroke-width: 0.55;
  stroke-dasharray: 2.2 1.4;
}

.pat-line--face :is(path, circle) {
  stroke: var(--pat-face);
  stroke-width: 0.55;
  stroke-dasharray: 1.6 1.2;
}

.pat-nodes circle {
  fill: var(--bg-raised);
  stroke: var(--fg);
  stroke-width: 0.5;
}

.pat-mirror {
  stroke: var(--muted);
  stroke-width: 0.4;
  stroke-dasharray: 0.6 2;
}

.bk-legend {
  display: grid;
  gap: 14px;
  margin: 32px 0 0;
}

.bk-legend div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 16px;
  align-items: baseline;
}

.bk-legend dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.bk-legend dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.bk-key {
  flex: none;
  width: 26px;
  height: 8px;
  border-radius: 8px;
}

.bk-key--head { background: var(--pat-head); }
.bk-key--face { background: var(--pat-face); }
.bk-key--node {
  width: 10px;
  height: 10px;
  margin-inline: 8px;
  border: 2px solid var(--fg);
}
.bk-key--mirror {
  height: 0;
  border-top: 2px dotted var(--muted);
  border-radius: 0;
}

/* ------------------------------------------------------------- the logo */
.bk-ways {
  --c: var(--accent);
  margin-bottom: 14px;
}

.bk-way-note {
  min-height: 1.6em;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: var(--step--1);
}

.bk-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.bk-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-raised);
}

.bk-card--wide { grid-column: span 4; }
.bk-card--half { grid-column: span 3; }

.bk-card__stage {
  --stage: #15112e;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(190px, 20vw, 260px);
  padding: 28px;
  background: var(--stage);
  transition: background-color 0.35s var(--ease);
}

.bk-card__stage img {
  min-width: 0;
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 100%;
  object-fit: contain;
}

.bk-card[data-kind="mark"] .bk-card__stage img {
  max-height: 72%;
}

.bk-logos[data-way-current="color-light"] .bk-card__stage { --stage: #ece8f1; }
.bk-logos[data-way-current="white"] .bk-card__stage { --stage: #d92e7d; }
.bk-logos[data-way-current="night"] .bk-card__stage { --stage: #ffffff; }
.bk-logos[data-way-current="lit"] .bk-card__stage { --stage: #15112e; padding: 0; }
.bk-logos[data-way-current="lit"] .bk-card__stage img { max-width: 100%; max-height: 100%; }

.bk-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 22px;
  flex: 1;
}

.bk-card h3 {
  font-size: var(--step-1);
  font-stretch: 115%;
}

.bk-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.bk-dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto !important;
  padding-top: 12px;
}

.bk-dl a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.bk-dl a::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v6M2 4.5 5 7.5 8 4.5M1.5 9h7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v6M2 4.5 5 7.5 8 4.5M1.5 9h7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bk-dl a:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ------------------------------------------------------- space and size */
.bk-space__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.clearspace {
  display: block;
  width: 100%;
  height: auto;
}

.cs-zone {
  fill: color-mix(in srgb, var(--pat-head) 7%, transparent);
  stroke: var(--pat-head);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.cs-box {
  fill: none;
  stroke: color-mix(in srgb, var(--fg) 25%, transparent);
  stroke-width: 1;
}

.cs-x rect {
  fill: color-mix(in srgb, var(--pat-face) 18%, transparent);
  stroke: var(--pat-face);
  stroke-width: 1;
}

.cs-x text {
  fill: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-anchor: middle;
}

.clearspace .logo-head { stroke: var(--logo-head); }
.clearspace .logo-face :is(path, circle) { stroke: var(--logo-face); }
.clearspace .logo-face .solid,
.clearspace .logo-dot { fill: var(--logo-face); stroke: none; }
.clearspace .logo-word path { stroke: var(--logo-word); }

.bk-sizes h3 {
  font-size: var(--step-1);
  font-stretch: 115%;
  margin-bottom: 18px;
}

.bk-sizes ul {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-sizes li {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 18px;
  align-items: center;
  font-size: var(--step--1);
  color: var(--muted);
}

.bk-sizes b {
  display: block;
  color: var(--fg);
}

.bk-size {
  display: grid;
  place-items: center;
  height: 64px;
  border-radius: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
}

.bk-size--h .logo {
  width: 120px;
  height: auto;
}

.bk-size--m .mark {
  width: 24px;
  height: auto;
}

.bk-size--f img {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------- misuse */
.bk-donts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-donts li p {
  margin: 12px 2px 0;
  font-size: var(--step--1);
  color: var(--muted);
}

.bk-dont__stage {
  --logo-head: var(--t-pink);
  --logo-face: var(--t-sodium);
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: #1f1a45;
  overflow: hidden;
}

.bk-dont__stage--light {
  background: #ece8f1;
}

.bk-dont__stage img,
.bk-dont__stage svg {
  width: 34%;
  height: auto;
}

/* the "no" sign: a ring with a bar through it, in pink tube */
.bk-dont__stage::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #ff5caa;
  background: linear-gradient(45deg, transparent calc(50% - 1.5px), #ff5caa calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  box-shadow: 0 0 calc(10px * var(--glow)) rgb(255 92 170 / 0.6);
}

.dont-stretch { transform: scale(1.5, 0.78); }
.dont-recolour { filter: hue-rotate(150deg) saturate(1.3); }
.dont-rotate { transform: rotate(-16deg); }
.dont-effects { filter: drop-shadow(5px 6px 0 #000) drop-shadow(0 0 8px #7cb6ff); }

/* --------------------------------------------------------------- colour */
.bk-swatches {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-swatch {
  grid-column: span 3;
}

.bk-swatch--xl {
  grid-column: span 5;
}

.bk-swatch button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0 0 4px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.bk-swatch__chip {
  position: relative;
  display: block;
  aspect-ratio: 5 / 3;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 0 0 1px var(--rule), 0 14px 40px -18px color-mix(in srgb, var(--sw) calc(70% * var(--glow)), transparent);
  transition: transform 0.25s var(--ease);
}

.bk-swatch--xl .bk-swatch__chip {
  aspect-ratio: 16 / 9;
}

.bk-swatch__chip::after {
  content: "Copy";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(21 17 46 / 0.72);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s;
}

.bk-swatch button:hover .bk-swatch__chip,
.bk-swatch button:focus-visible .bk-swatch__chip {
  transform: translateY(-3px);
}

.bk-swatch button:hover .bk-swatch__chip::after,
.bk-swatch button:focus-visible .bk-swatch__chip::after {
  opacity: 1;
}

.bk-swatch button.is-copied .bk-swatch__chip::after {
  content: "Copied";
  opacity: 1;
}

.bk-swatch__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 115%;
  font-size: var(--step-0);
  line-height: 1.2;
}

.bk-swatch__role {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.bk-swatch__codes {
  font-family: var(--font-code);
  font-size: 0.875rem;
}

.bk-swatch__codes small {
  margin-left: 8px;
  color: var(--muted);
  font-size: inherit;
}

.bk-swatches--tubes .bk-swatch__chip {
  aspect-ratio: 5 / 2;
  background:
    linear-gradient(var(--sw), var(--sw)) center / 76% 18% no-repeat,
    #15112e;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 0 1px var(--rule);
}

.bk-swatches--tubes .bk-swatch__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 50% 40% at 50% 50%, color-mix(in srgb, var(--sw) 45%, transparent), transparent 70%);
}

.bk-copied {
  min-height: 1.5em;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: var(--step--1);
}

/* ----------------------------------------------------------------- type */
.bk-specimen {
  padding-block: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--rule);
}

.bk-specimen + .bk-specimen {
  margin-top: 8px;
}

.bk-specimen__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin-bottom: 18px;
}

.bk-specimen__head h3 {
  font-size: var(--step-1);
  font-stretch: 115%;
}

.bk-specimen__head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.bk-specimen__sample {
  --wdth: 125;
  --wght: 800;
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1rem + 6.5vw, 7rem);
  font-stretch: calc(var(--wdth) * 1%);
  font-weight: var(--wght);
  line-height: 0.95;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  outline: none;
  border-radius: 8px;
}

.bk-specimen__sample:focus-visible {
  box-shadow: 0 0 0 2px var(--focus);
}

.bk-sliders {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-bottom: 16px;
}

.bk-sliders label {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: 6px 12px;
  min-width: min(280px, 100%);
  font-weight: 700;
  font-size: var(--step--1);
}

.bk-sliders output {
  font-family: var(--font-code);
  color: var(--muted);
}

.bk-sliders input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--accent);
}

.bk-specimen__rule {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.bk-specimen__para {
  max-width: 44rem;
  font-size: var(--step-1);
  line-height: 1.55;
}

.bk-specimen__weights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 18px;
  font-size: var(--step-2);
}

/* ------------------------------------------------------------- the glow */
.bk-glow__stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: clamp(20px, 4vw, 44px);
  border-radius: 18px;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--t-pink) calc(14% * var(--glow)), transparent), transparent 70%), var(--bg-sunk);
  border: 1px solid var(--rule);
}

.glow-demo {
  width: min(100%, 440px);
  height: auto;
  overflow: visible;
}

.glow-demo.hide-edge .tube__edge,
.glow-demo.hide-glass .tube__glass,
.glow-demo.hide-light .tube__light,
.glow-demo.hide-core .tube__core {
  display: none;
}

.glow-demo.hide-bloom .tubes {
  filter: none;
}

.bk-layers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.bk-layers button {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.bk-layers button[aria-pressed="true"] {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.bk-glow__note {
  min-height: 3em;
  max-width: 26rem;
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--step--1);
}

.bk-steps {
  display: grid;
  gap: 10px;
  margin: 24px 0;
  padding-left: 1.4em;
  max-width: 34rem;
}

.bk-steps li::marker {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
}

.bk-code {
  margin: 24px 0 0;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--bg-sunk);
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 0.82rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg) 88%, transparent);
}

/* ---------------------------------------------------------------- voice */
.bk-voices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.bk-voices article {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--bg-raised);
}

.bk-voices h3 {
  font-size: var(--step-1);
  font-stretch: 115%;
  margin-bottom: 16px;
}

.bk-say {
  position: relative;
  margin: 0;
  padding: 2px 0 2px 22px;
  line-height: 1.45;
}

.bk-say + .bk-say {
  margin-top: 14px;
}

.bk-say::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 4px;
  border-radius: 4px;
}

.bk-say--yes {
  font-size: var(--step-0);
  font-weight: 600;
}

.bk-say--yes::before {
  background: var(--t-felt);
  box-shadow: 0 0 calc(10px * var(--glow)) var(--t-felt);
}

:root[data-theme="day"] .bk-say--yes::before {
  background: #0f8a52;
}

.bk-say--no {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.bk-say--no::before {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}

/* ---------------------------------------------------------- in the wild */
.bk-wild__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bk-wild__grid figure {
  margin: 0;
}

.bk-wild__grid figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--step--1);
}

.bk-wild__sign {
  grid-column: 1 / -1;
}

.bk-wild__sign img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.bk-home,
.bk-wild__sticker .bk-sticker,
.bk-bizcard {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
}

.bk-home {
  align-content: center;
  gap: 10px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgb(255 92 170 / 0.55), transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 90%, rgb(124 182 255 / 0.5), transparent 60%),
    linear-gradient(160deg, #3b2f7a, #191433);
}

.bk-home img {
  width: 30%;
  height: auto;
  border-radius: 22.5%;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.6);
}

.bk-home span {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

.bk-sticker {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgb(255 255 255 / 0.08), transparent 60%),
    #34343c;
}

.bk-sticker img {
  width: 44%;
  height: auto;
  transform: rotate(-7deg);
  filter:
    drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff)
    drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff)
    drop-shadow(0 8px 10px rgb(0 0 0 / 0.45));
}

.bk-bizcard {
  position: relative;
  background: linear-gradient(160deg, #c9b8a6, #a8968a);
}

.bk-bizcard__front,
.bk-bizcard__back {
  position: absolute;
  width: 62%;
  aspect-ratio: 3.5 / 2;
  border-radius: 6px;
  box-shadow: 0 18px 30px -12px rgb(0 0 0 / 0.55);
}

.bk-bizcard__front {
  left: 7%;
  top: 8%;
  display: grid;
  place-items: center;
  background: #15112e;
  transform: rotate(-5deg);
  z-index: 1;
}

.bk-bizcard__front img {
  width: 92%;
  height: auto;
}

.bk-bizcard__back {
  right: 6%;
  bottom: 8%;
  display: grid;
  align-content: end;
  justify-items: end;
  gap: 1px;
  padding: 6% 7%;
  background: #ece8f1;
  color: #15112e;
  text-align: right;
  font-size: clamp(0.55rem, 0.85vw, 0.75rem);
  line-height: 1.35;
  transform: rotate(4deg);
}

.bk-bizcard__back b {
  font-family: var(--font-display);
  font-stretch: 120%;
  font-size: 1.25em;
  color: #d92e7d;
}

/* ------------------------------------------------------------ downloads */
.bk-zip {
  margin-bottom: clamp(36px, 5vw, 56px);
  padding-block: 10px;
  text-align: center;
}

.bk-files {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.bk-files h3 {
  font-size: var(--step-0);
  font-stretch: 115%;
  margin-bottom: 10px;
}

.bk-files p,
.bk-files li {
  color: var(--muted);
  font-size: var(--step--1);
}

.bk-files ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-files a {
  color: var(--fg);
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .bk-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bk-swatch {
    grid-column: span 5;
  }
}

@media (max-width: 900px) {
  .bk-split,
  .bk-split--flip,
  .bk-space__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-split--flip .bk-split__text {
    order: -1;
  }

  .bk-logos {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-card,
  .bk-card--wide,
  .bk-card--half {
    grid-column: auto;
  }

  .bk-donts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bk-voices {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk-wild__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .bk-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bk-swatch,
  .bk-swatch--xl {
    grid-column: span 1;
  }

  .bk-swatch--xl:first-child {
    grid-column: 1 / -1;
  }

  .bk-swatch__codes small {
    display: block;
    margin-left: 0;
  }

  .bk-legend div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .bk-sizes li {
    grid-template-columns: 104px 1fr;
  }

  .bk-wild__grid,
  .bk-files {
    grid-template-columns: minmax(0, 1fr);
  }
}