/* Outfit, served from this site (/fonts/) since 19 Oct 2026, not from Google Fonts: one fewer
   connection before the first paint. Two files, both the whole variable font (every weight from
   one file), split the way Google splits it: plain Latin, and the extra Latin letters. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-v15-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-v15-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* /brand/: the club's Brand Guidelines.
   LAYOUT: the structure of the Brand Guidelines page of the July site (its app/brand/page.tsx):
   a 250px sticky sidebar, 32px insets, a 540px opening, section headings beside their first
   paragraph, sections no wider than 966px, swatches four across, picture frames 467 by 295.
   THE KIT, OBEYED: this page states the club's rules, so it follows them. Type is Outfit on the
   kit's eleven sizes only (11 12 14 16 20 28 36 46 64 84 108); the July page's 60, 30, 22, 18, 15
   and 13 were moved to the nearest of those. Gaps are on the kit's ten steps
   (4 8 12 16 24 32 48 64 96 128). Running text is 16 / 1.55 in the body grey at weight 400;
   headings are 600, the large headings 500; nothing is heavier except the one highlighted word.
   Headings are sentence case. Orange appears as fills, lines and headline-size type only.
   Every class begins with "bk" or "dd" and is used on this page only. */
:root { --ink: #111111; --body: #3A3A3A; --muted: #6B6B6B; --rule: #E4E4E4; --panel: #F5F5F5; --orange: #FF8033; --orange-d: #FFA770; --hair: rgba(0, 0, 0, .1); --out: cubic-bezier(.16, 1, .3, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Outfit", system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
i { font-style: normal; }
a { color: inherit; text-decoration: none; transition: color 150ms var(--out), text-decoration-color 150ms var(--out); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 600; color: var(--ink); }
.bk-skip { position: absolute; left: -9999px; top: 0; z-index: 5; padding: 12px 16px; background: var(--ink); color: #fff; }
.bk-skip:focus { left: 16px; top: 8px; }

.bk { min-height: 100vh; }
.bk-cols { display: flex; flex-direction: column; }
.bk-logo { width: auto; max-width: none; }

/* ── the sidebar ── */
.bk-side { padding: 32px 32px 24px; }
.bk-mark { display: inline-block; }
.bk-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; }
.bk-nav a { display: inline-flex; align-items: flex-start; gap: 4px; font-size: 14px; line-height: 20px; }
.bk-nav a span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color 150ms var(--out); }
.bk-nav a:hover span, .bk-nav a[aria-current] span { text-decoration-color: var(--orange); }
.bk-nav sup { font-size: 11px; line-height: 12px; color: var(--muted); vertical-align: baseline; }
.bk-more { margin-top: 48px; }
.bk-more a { font-size: 14px; line-height: 20px; color: var(--muted); }
.bk-more a:hover { color: var(--ink); }
@media (pointer: coarse) {                   /* a finger needs more than a 20px line to land on */
  .bk-nav { gap: 0 24px; margin-top: 24px; }
  .bk-nav a, .bk-more a { padding: 12px 0; }
  .bk-more { margin-top: 16px; display: flex; gap: 24px; }
  .bk-toc a { display: inline-block; padding: 4px 0; }
  .bk-cap .bk-copy { padding: 14px 0; }
  .bk-files a { display: inline-block; padding: 12px 0; }
  .bk-foot-links a, .bk-p a { display: inline-block; padding: 8px 0; }
}

/* ── the main column ── */
.bk-main { min-width: 0; flex: 1; }
.bk-hero { display: flex; justify-content: center; align-items: center; height: 420px; background: #000; }
.bk-body { padding: 0 32px 96px; }
.bk-intro { display: grid; gap: 32px; margin-top: 32px; }
.bk-h1, .bk-h2 { font-weight: 500; font-size: 36px; line-height: 1.1; letter-spacing: -.03em; }
.bk-version { margin-top: 16px; }
.bk-lead { max-width: 660px; }
.bk-lead p { font-size: 20px; line-height: 1.45; color: var(--body); }
.bk-lead p + p { margin-top: 16px; }
.bk-p { max-width: 467px; color: var(--body); }
.bk-p.gap { margin-top: 16px; }
.bk-p.after { margin-top: 32px; }
.bk-p.after.small { margin-top: 24px; }
.bk-p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bk-p a:hover { text-decoration-thickness: 3px; }
.bk-contents { display: grid; gap: 24px; margin: 96px -32px 0; padding: 32px 32px 0; border-top: 1px solid var(--hair); }
.bk-contents.second { margin-top: 64px; }
.bk-h30 { font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; scroll-margin-top: 32px; }
.bk-toc li + li { margin-top: 8px; }
.bk-toc a { font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.bk-toc a span { color: var(--muted); }
.bk-toc a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bk-glance { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 660px; }

.bk-cap966 { max-width: 966px; }
.bk-hr { width: calc(100% + 32px); margin: 128px 0 0 -32px; border: 0; border-top: 1px solid var(--hair); }
.bk-cap966 section { margin-top: 32px; }
.bk-row, .bk-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.bk-two, .bk-block { margin-top: 64px; }
.bk-h2 { align-self: start; scroll-margin-top: 32px; }
.bk-h2 span { padding-right: 12px; color: var(--orange); }
.bk-stack > * + * { margin-top: 24px; }
.bk-big { max-width: 467px; font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
.bk-h3 { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.bk-pairs > * + * { margin-top: 24px; }
.bk-k { font-weight: 600; font-size: 14px; line-height: 20px; }
.bk-k.top { margin-top: 8px; }
.bk-v { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--body); }
.bk-four { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
.bk-cap { font-size: 12px; line-height: 16px; }
.bk-cap.muted { color: var(--muted); }
.bk-cap.strong { font-weight: 600; }
.bk-num { font-variant-numeric: tabular-nums; }
.bk-mono { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bk-test { max-width: 467px; padding-left: 16px; border-left: 3px solid var(--orange); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.bk-rules { max-width: 467px; }
.bk-rules li { position: relative; padding-left: 16px; color: var(--body); }
.bk-rules li + li { margin-top: 12px; }
.bk-rules li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 2px; background: var(--ink); }
.bk-yes, .bk-no { display: inline-block; width: 1.1em; font-weight: 600; color: var(--ink); }
.bk-swipe { margin-top: 24px; }
.bk-swipe + .bk-scroll { margin-top: 8px; }

/* shared small pieces: the kit's label with its bar, the highlighted word */
.bk-eyebrow { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.bk-eyebrow::before { content: ""; display: inline-block; width: 22px; height: 3px; margin-right: 10px; border-radius: 1px; background: var(--orange); vertical-align: middle; }
.bk-hl { padding: 0 .16em; border-radius: 3px; background: var(--orange); color: var(--ink); font-weight: 700; }
.bk-demo-h { font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; }

/* ── logo ── */
.bk-lockups { margin-top: 32px; }
.bk-lockups figure + figure { margin-top: 64px; }
.bk-lock { display: flex; justify-content: center; align-items: center; height: 360px; }
.bk-lock.small { height: 200px; }
.bk-lock.light { background: var(--panel); }
.bk-lock.dark { background: #000; }
.bk-lockups figcaption { margin-top: 16px; }
.bk-table.files { min-width: 760px; }
.bk-table.files td { vertical-align: middle; }
.bk-thumb { display: flex; justify-content: center; align-items: center; width: 96px; height: 64px; background: var(--panel); }
.bk-thumb.dark { background: #000; }
.bk-thumb img { max-width: 64px; max-height: 44px; width: auto; height: auto; }
.bk-anat { max-width: 300px; border: 1px solid var(--hair); }
.bk-clear { margin-top: 32px; }
/* the drawing: the mark 96px tall with 16px around it (17% of 96), and 120 with 20 on a wider screen */
.bk-clear-box { position: relative; display: inline-block; padding: 16px; border: 1px dashed var(--orange); background: var(--panel); line-height: 0; }
.bk-clear-box .bk-logo { outline: 1px solid var(--hair); height: 96px; }
.bk-x { position: absolute; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 12px; line-height: 1; color: var(--ink); }
.bk-x.t { left: 50%; top: 0; width: 16px; height: 16px; margin-left: -8px; }
.bk-x.l { left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; }
.bk-clear figcaption { max-width: 360px; margin-top: 8px; }
.bk-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 48px; margin-top: 32px; }
.bk-sizes .bk-logo { margin-bottom: 8px; }
.bk-grounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 32px; }
.bk-misuse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 32px; }
.bk-tile { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 311 / 161; overflow: hidden; background: var(--panel); }
.bk-tile.white { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.bk-tile.black { background: #000; }
.bk-tile.grey { background: #8a8a8a; }
.bk-tile + .bk-cap { margin-top: 8px; }
.bk-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.bk-logo.over { position: relative; }
.bk-gone { position: relative; display: inline-block; line-height: 0; }
.bk-gone i { position: absolute; background: var(--panel); }
.bk-fake { font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -.02em; }
.bk-inlay { display: flex; align-items: center; gap: 12px; }
.bk-inlay b { font-weight: 600; font-size: 14px; }

/* ── colour ── */
.bk-states { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bk-state { padding: 32px; }
.bk-state.light { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.bk-state.dark { background: #000; }
.bk-state-h { margin: 16px 0 12px; font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; }
.bk-state.dark .bk-state-h { color: #fff; }
.bk-state.dark .bk-state-h span { color: var(--orange-d); font-weight: 700; }
.bk-state.dark .bk-eyebrow { color: #9A9A9A; }
.bk-state.dark .bk-eyebrow::before { background: var(--orange-d); }
.bk-state.dark .bk-v { color: #E6E6E6; }
.bk-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 32px; }
.bk-swatches.small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-swatches.small .bk-dot { max-width: 96px; }
.bk-dot { aspect-ratio: 1; width: 100%; border-radius: 50%; }
.bk-dot.edge { box-shadow: inset 0 0 0 1px var(--hair); }
.bk-dot.sq { border-radius: 0; }
.bk-dot + .bk-cap { margin-top: 8px; }
.bk-copy { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: copy; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bk-copy:hover { text-decoration-color: var(--orange); }
.bk-copy.done::after { content: "  copied"; color: var(--muted); }
.bk-prop { display: flex; height: 48px; margin: 48px 0 8px; box-shadow: inset 0 0 0 1px var(--hair); font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.bk-prop span { display: flex; align-items: center; padding: 0 12px; }
.bk-prop .w { flex: 60; color: var(--muted); }
.bk-prop .k { flex: 30; background: #000; color: #9A9A9A; }
.bk-prop .o { flex: 10; padding: 0; background: var(--orange); }
.bk-panel { margin-top: 32px; padding: 32px; background: var(--panel); }
.bk-grad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.bk-gradient { aspect-ratio: 435 / 292; width: 100%; background: linear-gradient(135deg, #FCE83E 0%, #F69E2C 50%, #F2634A 100%); }
.bk-gradient + .bk-cap { margin-top: 8px; }
.bk-grad-dots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-self: start; }
.bk-scroll { margin-top: 32px; overflow-x: auto; }
.bk-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
.bk-table th { padding: 0 24px 16px 0; font-weight: 600; font-size: 14px; line-height: 20px; }
.bk-table td { padding: 16px 24px 16px 0; border-top: 1px solid var(--hair); font-size: 14px; line-height: 20px; vertical-align: top; color: var(--body); }
.bk-table td:first-child { color: var(--ink); }
.bk-table.apps { min-width: 800px; }
.bk-sample { display: inline-block; padding: 4px 12px; font-weight: 500; }

/* ── typography ── */
.bk-spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 0; border-top: 1px solid var(--hair); }
.bk-spec:first-child { padding-top: 0; border-top: 0; }
.bk-spec:last-child { padding-bottom: 0; }
.bk-spec-display { font-weight: 500; font-size: 46px; line-height: 1; letter-spacing: -.03em; }
.bk-spec-heading { font-weight: 600; font-size: 36px; line-height: 1.25; letter-spacing: -.025em; }
.bk-spec-body { font-size: 16px; line-height: 1.55; color: var(--body); }
.bk-spec-label { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.bk-spec-number { font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bk-scale { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 24px; margin-top: 32px; }
.bk-scale span { display: block; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.bk-scale p { margin-top: 8px; }
.bk-weights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 32px; }
.bk-weights span { display: block; margin-bottom: 8px; font-size: 64px; line-height: 1; letter-spacing: -.02em; }

/* ── elements ── */
.bk-devices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 16px; margin-top: 32px; }
.bk-device-demo { display: flex; flex-direction: column; justify-content: center; min-height: 128px; margin-bottom: 16px; padding: 24px; background: var(--panel); }
.bk-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk-evidence div { padding: 12px 8px; border: 1px solid var(--rule); background: #fff; }
.bk-evidence b { display: block; font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bk-evidence span { display: block; margin-top: 8px; font-weight: 600; font-size: 11px; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bk-switch { display: flex; height: 64px; box-shadow: inset 0 0 0 1px var(--hair); background: #fff; }
.bk-switch i { flex: 1; }
.bk-switch i + i { background: #000; }
.bk-footdemo { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bk-space { display: flex; align-items: flex-end; gap: 12px; height: 160px; }
.bk-space div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.bk-space i { display: block; width: 100%; max-width: 24px; background: var(--orange); }

/* ── art direction ── */
.bk-art { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px 32px; margin-top: 64px; }
.bk-frame { position: relative; aspect-ratio: 467 / 295; overflow: hidden; }
.bk-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-frame + .bk-cap { margin-top: 8px; }
.bk-treat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 32px; margin-top: 32px; }
.bk-treat-light, .bk-treat-dark { position: relative; aspect-ratio: 467 / 295; overflow: hidden; }
.bk-treat-light { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 16px; box-shadow: inset 0 0 0 1px var(--hair); }
.bk-treat-light span { position: relative; height: 100%; overflow: hidden; }
.bk-treat-light img, .bk-treat-dark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-treat-light > div { padding: 0 16px 24px 0; }
.bk-treat-dark i { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.bk-treat-dark > div { position: absolute; left: 24px; bottom: 24px; right: 24px; }
.bk-treat .bk-demo-h { margin-top: 8px; font-size: 20px; line-height: 1.25; }
.bk-treat-dark .bk-demo-h { color: #fff; }
.bk-treat-dark .bk-demo-h span { color: var(--orange-d); font-weight: 700; }
.bk-treat-dark .bk-eyebrow { color: #9A9A9A; }
.bk-treat-dark .bk-eyebrow::before { background: var(--orange-d); }

/* ── partners ── */
.bk-lockpair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lockcap { margin-top: 8px; }
/* "PARTNER" stands in for another club's logo. Its capitals are set as tall as SEC's letters:
   Outfit's capitals are about 0.7 of the type size, so 37px type beside a 26px mark, 57 beside 40. */
.dd-pair { display: flex; align-items: flex-end; gap: 16px; }
.dd-pair span { font-size: 20px; line-height: 26px; color: var(--muted); }
.dd-pair b { font-weight: 700; font-size: 37px; line-height: .72; letter-spacing: .02em; color: #2D5BD0; }
.dd-pair.big { gap: 24px; }
.dd-pair.big span { font-size: 28px; line-height: 40px; }
.dd-pair.big b { font-size: 57px; }
.dd-pair.big b.box { padding: 16px; margin-bottom: -16px; background: #fff; }
.dd-pair.off { align-items: center; }
.dd-pair.off b { font-size: 14px; line-height: 1; }
.bk-sponsors { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); }
.bk-sponsors div { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 16px; }
.bk-sponsors i { width: 40px; height: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); }      /* six, 32px apart, on one line of the 467px column */
@media (max-width: 639px) {
  .dd-pair.big { gap: 12px; }
  .dd-pair.big .bk-logo { height: 24px; }
  .dd-pair.big span { font-size: 20px; line-height: 24px; }
  .dd-pair.big b { font-size: 34px; }
  .dd-pair.big b.box { padding: 8px; margin-bottom: -8px; }
}
@media (max-width: 399px) {                   /* the narrowest phones: both marks smaller, still matched */
  .dd-pair .bk-logo, .dd-pair.big .bk-logo { height: 18px; }
  .dd-pair b, .dd-pair.big b { font-size: 26px; }
  .dd-pair, .dd-pair.big { gap: 8px; }
  .dd-pair.off b { font-size: 11px; }
}

/* ── applications: example canvases, drawn to scale (cqw = a hundredth of the frame's width) ── */
.bk-canvases { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 32px; margin-top: 32px; }
.bk-canvas { container-type: inline-size; }
.bk-canvas-in { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.bk-canvas.deck .bk-canvas-in { aspect-ratio: 1920 / 1080; padding: 5cqw; }           /* 96 of 1920 */
.bk-canvas.post .bk-canvas-in { aspect-ratio: 1080 / 1350; padding: 8.89cqw; }       /* 96 of 1080 */
.bk-canvas .dark { background: #000; color: #fff; }
.bk-canvas .cv-eyebrow { font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.bk-canvas .cv-eyebrow::before { content: ""; display: inline-block; vertical-align: middle; background: var(--orange); }
.bk-canvas .dark .cv-eyebrow { color: #9A9A9A; }
.bk-canvas .dark .cv-eyebrow::before { background: var(--orange-d); }
.bk-canvas .cv-display { font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.bk-canvas .dark .cv-display span { color: var(--orange-d); font-weight: 700; }
.bk-canvas .cv-h { font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.bk-canvas .cv-foot { display: flex; justify-content: space-between; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule); }
.bk-canvas .dark .cv-foot { color: #9A9A9A; border-color: #2A2A2A; }
.bk-canvas.deck .cv-eyebrow { font-size: 1.1cqw; margin-bottom: 1.25cqw; }
.bk-canvas.deck .cv-eyebrow::before { width: 2.2cqw; height: .3cqw; margin-right: 1cqw; }
.bk-canvas.deck .cv-display { font-size: 4.375cqw; }                                 /* 84 of 1920 */
.bk-canvas.deck .cv-h { font-size: 2.4cqw; max-width: 22em; }                         /* 46 of 1920 */
.bk-canvas.deck .cv-foot { font-size: 1cqw; padding-top: .8cqw; }
.bk-canvas.deck .cv-evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25cqw; }
.bk-canvas.deck .cv-evidence div { padding: 1.6cqw; border: 1px solid var(--rule); }
.bk-canvas.deck .cv-evidence b { display: block; font-weight: 600; font-size: 3.3cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.bk-canvas.deck .cv-evidence span { display: block; margin-top: .8cqw; font-weight: 600; font-size: 1cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bk-canvas.post .cv-eyebrow { font-size: 2.2cqw; margin-bottom: 2.6cqw; }
.bk-canvas.post .cv-eyebrow::before { width: 4.4cqw; height: .6cqw; margin-right: 2cqw; }
.bk-canvas.post .cv-display { font-size: 8.89cqw; }                                  /* 96 of 1080 */
.bk-canvas.post .cv-h { font-size: 5.9cqw; }                                          /* 64 of 1080 */
.bk-canvas.post .cv-foot { font-size: 2cqw; padding-top: 1.6cqw; }
.bk-canvas.post .cv-photo { position: relative; aspect-ratio: 1080 / 640; margin: -8.89cqw -8.89cqw 6cqw; overflow: hidden; }      /* the top 640 of the 1350 */
.bk-canvas.post .cv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-canvas + .bk-k, .bk-canvas ~ .bk-k { margin-top: 8px; }

/* ── do and don't ── */
.bk-dds { margin-top: 64px; }
.bk-dd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 32px; }
.bk-dd + .bk-dd { margin-top: 48px; }
.dd-tag { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.bk-dd .dont .dd-tag { color: var(--muted); }
.dd-demo { display: flex; flex-direction: column; justify-content: center; min-height: 152px; margin: 8px 0 12px; padding: 24px; background: var(--panel); overflow: hidden; }
.bk-dd .do .dd-demo { border-top: 3px solid var(--ink); }
.bk-dd .dont .dd-demo { border-top: 3px dashed #A8A8A8; background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.dd-line { font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; }
.dd-line.caps { font-size: 20px; text-transform: uppercase; letter-spacing: 0; }
.dd-fill { align-self: flex-start; padding: 8px 16px; background: var(--orange); font-weight: 600; font-size: 16px; }
.dd-orange { font-weight: 600; font-size: 16px; color: var(--orange); }
.dd-beside { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; }
.dd-beside span { position: relative; height: 104px; overflow: hidden; }
.dd-beside p, .dd-on p { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.dd-on { position: relative; margin: -24px; flex: 1; min-height: 152px; overflow: hidden; }
.dd-on i { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.dd-on p { position: absolute; left: 24px; bottom: 24px; color: #fff; }
.dd-on.bw img { filter: grayscale(1); }
.dd-body { max-width: 30em; font-size: 16px; line-height: 1.55; color: var(--body); }
.dd-body.thin { font-weight: 300; }
.dd-logo { display: flex; align-items: center; gap: 24px; }
.dd-social { font-size: 14px; line-height: 1.55; color: var(--body); }

/* ── the kit, the footer ── */
.bk-kit { margin-top: 128px !important; }
.bk-files { margin-top: 32px; }
.bk-files li + li { margin-top: 12px; }
.bk-files a { font-weight: 500; font-size: 20px; line-height: 1.25; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bk-files a:hover { text-decoration-thickness: 3px; }
.bk-files .bk-cap { margin-left: 8px; }
.bk-foot { margin-top: 128px; }
.bk-foot-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px 64px; }
.bk-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 48px; padding-bottom: 12px; }
.bk-foot-links a { font-size: 14px; line-height: 20px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bk-foot-links a:hover { text-decoration-color: var(--orange); }
.bk-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 32px -32px 0; padding: 24px 32px 8px; border-top: 1px solid var(--hair); }
.bk-legal p { font-size: 12px; line-height: 16px; }

@media (min-width: 640px) {
  .bk-four, .bk-glance, .bk-states, .bk-treat, .bk-lockpair, .bk-dd, .bk-canvases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-misuse, .bk-swatches, .bk-devices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-swatches.small { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bk-grounds, .bk-weights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-grad, .bk-art { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-spec { grid-template-columns: 140px minmax(0, 1fr) auto; align-items: baseline; gap: 32px; }
  .bk-swipe { display: none; }
  .bk-clear-box { padding: 20px; }
  .bk-clear-box .bk-logo { height: 120px; }
  .bk-x.t { height: 20px; }
  .bk-x.l { width: 20px; }
}
@media (min-width: 768px) {
  .bk-hero { height: 540px; }
  .bk-h1, .bk-h2 { font-size: 64px; line-height: 1.05; }
  .bk-toc a { font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
  .bk-lock { height: 500px; }
  .bk-lock.small { height: 240px; }
  .bk-spec-display { font-size: 84px; }
}
@media (min-width: 1024px) {
  .bk-cols { flex-direction: row; }
  .bk-side { position: sticky; top: 0; flex: none; width: 250px; height: 100vh; padding: 32px 0 32px 32px; overflow-y: auto; }
  .bk-nav { display: block; }
  .bk-nav li + li { margin-top: 8px; }
  .bk-body { border-left: 1px solid var(--hair); }
  .bk-intro { grid-template-columns: 419px minmax(0, 1fr); }
  .bk-contents { grid-template-columns: 572px minmax(0, 1fr); gap: 0; margin-top: 128px; }
  .bk-contents.second { margin-top: 96px; }
  .bk-row, .bk-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-two > .bk-h3 { position: sticky; top: 32px; align-self: start; }      /* the label stays beside a long right-hand column */
  .bk-four, .bk-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-swatches.small { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* ── on a phone ─────────────────────────────────────────────────────────────
   Everything from here to the end is for screens with no sidebar. Nothing in it applies at 1024px
   and wider. Gaps stay on the kit's steps; corners stay 4px; no shadows. */
.bk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bk-jump { display: none; }

@media (max-width: 1023px) {
  /* things to tap are 44px tall or more */
  .bk-mark { padding: 2px 0; }
  .bk-toc li + li { margin-top: 0; border-top: 1px solid var(--hair); }
  .bk-toc a { display: flex; align-items: center; min-height: 48px; padding: 0; }
  .bk-toc a span { padding-right: 8px; }
  .bk-foot-links { gap: 0 32px; }
  .bk-foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .bk-files li + li { margin-top: 0; }
  .bk-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .bk-cap .bk-copy { min-width: 44px; text-align: left; }

  /* the section bar */
  html.bk-jumping .bk-jump { display: block; }
  html.bk-jumping .bk { padding-bottom: 96px; }
  html.bk-jumping .bk-side .bk-nav { display: none; }      /* the bar and the Contents list below do this job */
  .bk-jump-bar {
    position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; height: 56px; overflow: hidden;
    background: #000; color: #fff; border-radius: 4px; outline: 1px solid rgba(255, 255, 255, .3);
  }
  .bk-jump-bar a, .bk-jump-now { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0; border: 0; background: none; color: #fff; font: inherit; }
  .bk-jump-bar a { font-size: 28px; line-height: 1; padding-bottom: 4px; }
  .bk-jump-bar a[aria-disabled="true"] { opacity: .3; }
  .bk-jump-now { justify-content: flex-start; gap: 8px; min-width: 0; padding: 0 16px; border-left: 1px solid rgba(255, 255, 255, .2); border-right: 1px solid rgba(255, 255, 255, .2); font-weight: 600; font-size: 16px; line-height: 20px; text-align: left; cursor: pointer; }
  .bk-jump-now .n { color: var(--orange-d); font-variant-numeric: tabular-nums; }
  .bk-jump-now .n:empty { display: none; }
  .bk-jump-now .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bk-jump-now .c { flex: none; width: 10px; height: 10px; margin-top: 4px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); transition: transform 200ms var(--out); }
  .bk-jump-now[aria-expanded="true"] .c { margin-top: -6px; transform: rotate(225deg); }
  .bk-jump-fill { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--orange-d); transform: scaleX(var(--p, 0)); transform-origin: left; }
  .bk-jump-veil { position: fixed; inset: 0; z-index: 18; background: rgba(0, 0, 0, .5); }
  .bk-jump-sheet {
    position: fixed; z-index: 19; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 16px 8px; background: #fff; border: 1px solid var(--ink); border-radius: 4px;
  }
  .bk-jump-sheet ol { margin: 0; padding: 0; list-style: none; }
  .bk-jump-sheet ol li + li { border-top: 1px solid var(--hair); }
  .bk-jump-sheet ol a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 500; font-size: 16px; line-height: 20px; }
  .bk-jump-sheet ol a span { width: 24px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .bk-jump-sheet ol a[aria-current] { font-weight: 600; }
  .bk-jump-sheet ol a[aria-current]::after { content: ""; width: 22px; height: 3px; margin-left: auto; border-radius: 1px; background: var(--orange); }
  .bk-jump-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 4px; border-top: 1px solid var(--ink); }
  .bk-jump-more a { display: flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--body); }
}

@media (max-width: 639px) {
  /* 24px at the sides, where there were 32 */
  .bk-side { padding: 24px 24px 16px; }
  .bk-body { padding: 0 24px 64px; }
  .bk-contents { margin: 64px -24px 0; padding: 32px 24px 0; }
  .bk-contents.second { margin-top: 48px; }
  .bk-hr { width: calc(100% + 24px); margin: 96px 0 0 -24px; }
  .bk-legal { margin: 32px -24px 0; padding: 24px 24px 8px; }
  /* less empty space */
  .bk-hero { height: 240px; }
  .bk-two, .bk-block { margin-top: 48px; }
  .bk-lock { height: 240px; }
  .bk-lock.small { height: 160px; }
  .bk-lockups figure + figure { margin-top: 32px; }
  .bk-kit { margin-top: 96px !important; }
  .bk-foot { margin-top: 96px; }
  .bk-panel { padding: 24px; }

  /* the three wide tables: one block per row, the column's name beside each value */
  .bk-swipe { display: none; }
  .bk-swipe + .bk-scroll { margin-top: 24px; }
  .bk-table.files, .bk-table.pairs, .bk-table.apps { display: block; min-width: 0; }
  .files thead, .pairs thead, .apps thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .files tbody, .pairs tbody, .apps tbody { display: block; }
  .files tr, .pairs tr, .apps tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--hair); }
  .files td, .pairs td, .apps td { display: block; grid-column: 1 / -1; padding: 0; border: 0; }
  .files td::before, .apps td::before { content: attr(data-label); display: block; margin-top: 8px; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--muted); }
  .files tr { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .files td:first-child { grid-column: 1; grid-row: 1 / span 3; }
  .files td:not(:first-child) { grid-column: 2; }
  .files td:first-child::before, .files td:nth-child(2)::before, .apps td:first-child::before { display: none; }
  .files .bk-mono { white-space: normal; overflow-wrap: anywhere; }
  .apps td:first-child { font-size: 16px; line-height: 24px; }
  .pairs td:nth-child(1) { grid-column: 1; align-self: center; font-weight: 600; }
  .pairs td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .pairs td:nth-child(3) { grid-column: 1; }
  .pairs td:nth-child(3)::before { content: "Contrast "; color: var(--muted); }
  .pairs td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } a, .bk-nav a span { transition: none; } }