/* brand-system: a two-language brand system (colour and type), in the client's own faces */
.bs{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:calc(33px + 40px * var(--ui, 1) + 24px);
  font-family:"Archivo", var(--c-body); color:#1B1D20; }
.bs-view{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s .5s; }
.bs-view.is-on{ opacity:1; visibility:visible; transition-delay:0s; }
.bs-mono{ margin:0; font:400 10px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.bs-name{ margin:0; font:600 15px/1.2 "Archivo", sans-serif; display:flex; flex-direction:column; gap:3px; }
.bs-name span{ font:400 10px/1.3 "JetBrains Mono", monospace; letter-spacing:.06em; opacity:.75; }
.bs-caps{ font-family:"Archivo", sans-serif; font-stretch:62%; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:.78; }
.bs-light{ font-family:"Archivo", sans-serif; font-weight:300; letter-spacing:-.05em; line-height:.95; }

/* colour: the core */
.bs-core{ position:absolute; inset:0; display:grid; grid-template-columns:1.6fr 1fr .7fr; gap:8px; }
.bs-panel{ position:relative; border-radius:14px; background:var(--bg); color:var(--fg); padding:22px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); overflow:clip; }
.bs-wm{ position:absolute; left:50%; top:50%; translate:-50% -60%; width:calc(100% - 64px); max-width:420px; }
.bs-view.is-on .bs-panel{ animation:bs-rise .7s cubic-bezier(0.32, 0.72, 0, 1) both; }
.bs-view.is-on .bs-panel:nth-child(2){ animation-delay:.07s; } .bs-view.is-on .bs-panel:nth-child(3){ animation-delay:.14s; }
@keyframes bs-rise{ from{ opacity:0; translate:0 16px; } }

/* colour: kids */
.bs-core--kids{ grid-template-columns:1fr 1fr; }
.bs-core--kids .bs-wm{ max-width:380px; }
/* colour: the game families, an accordion */
.bs-acc{ position:absolute; inset:0; display:flex; gap:8px; }
.bs-game{ all:unset; cursor:pointer; position:relative; flex:1 1 0; min-width:0; border-radius:14px; overflow:clip; background:var(--b); color:#fff;
  transition:flex-grow .7s cubic-bezier(0.32, 0.72, 0, 1); }
.bs-game.is-open{ flex-grow:5.5; }
.bs-game:focus-visible{ outline:1.5px solid #1B1D20; outline-offset:3px; }
.bs-vert{ position:absolute; left:50%; bottom:22px; writing-mode:vertical-rl; rotate:180deg; translate:-50% 0; white-space:nowrap;
  font:900 26px/1 "Archivo", sans-serif; font-stretch:62%; text-transform:uppercase; transition:opacity .3s ease; }
.bs-game.is-open .bs-vert{ opacity:0; }
.bs-logo{ position:absolute; left:50%; top:42%; translate:-50% -50%; width:min(72%, 520px); opacity:0; scale:.9;
  transition:opacity .4s ease, scale .6s cubic-bezier(0.32, 0.72, 0, 1); filter:drop-shadow(0 14px 26px rgba(0,0,0,.28)); }
.bs-game.is-open .bs-logo{ opacity:1; scale:1; transition-delay:.15s; }
.bs-info{ position:absolute; left:26px; right:26px; bottom:24px; display:flex; flex-direction:column; gap:12px; opacity:0; translate:0 10px; transition:opacity .4s ease, translate .4s ease; }
.bs-game.is-open .bs-info{ opacity:1; translate:none; transition-delay:.25s; }
.bs-tones{ display:flex; gap:6px; }
.bs-tones i{ width:36px; height:36px; border-radius:99px; box-shadow:0 0 0 1.5px rgba(255,255,255,.6); }
.bs-tones .bs-grad{ flex:1; max-width:200px; border-radius:99px; background:linear-gradient(90deg, var(--d), var(--b), var(--l)); }
.bs-line{ font:400 13px/1.4 "Archivo", sans-serif; max-width:360px; }

/* type */
.bs-ty{ position:absolute; inset:0; border-radius:14px; overflow:clip; padding:34px 38px; display:flex; flex-direction:column; gap:18px; }
.bs-ty--kids{ background:var(--bg); color:var(--fg); }
.bs-ty--master{ background:#1B1D20; color:#EDEFF2; }
.bs-kid{ position:absolute; right:-8%; bottom:-14%; height:112%; width:auto; pointer-events:none; }
.bs-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.42) contrast(1.1); }
.bs-ty > *:not(.bs-kid):not(.bs-photo){ position:relative; }
.bs-hero{ margin:0; font-size:clamp(60px, 9.6cqw, 132px); max-width:68%; }
.bs-ty{ container-type:inline-size; }
.bs-ty--kids .bs-hero{ font-size:clamp(70px, 13cqw, 170px); }
.bs-scale{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:10px; max-width:52%; }
.bs-scale li{ display:grid; grid-template-columns:118px 1fr; align-items:baseline; gap:14px; border-top:1px solid currentColor; border-color:color-mix(in srgb, currentColor 30%, transparent); padding-top:8px; }
.bs-scale b{ font-size:calc(var(--s) * 1cqw / 10); font-weight:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bs-scale--caps b{ font-family:"Archivo", sans-serif; font-stretch:62%; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:.9; }
.bs-scale--light b{ font-family:"Archivo", sans-serif; font-weight:300; letter-spacing:-.04em; line-height:1; }
.bs-view.is-on .bs-hero{ animation:bs-rise .8s cubic-bezier(0.32, 0.72, 0, 1) .05s both; }
.bs-view.is-on .bs-kid{ animation:bs-kid .9s cubic-bezier(0.32, 0.72, 0, 1) .15s both; }
@keyframes bs-kid{ from{ opacity:0; translate:0 40px; } }
@media (prefers-reduced-motion: reduce){ .bs-view, .bs-game, .bs-logo{ transition:none; } .bs-view.is-on *{ animation:none !important; } }


/* the type lockup board (uses game-board's .gb / .gb-row / .gb-t) */
.bs .gb.bs-lkb{ left:0; right:0; top:0; bottom:calc(-1 * (40px * var(--ui, 1) + 24px)); }
.bs-lkb figure.gb-t > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bs-cap{ position:absolute; left:14px; top:12px; z-index:1; font:400 10px/1 "JetBrains Mono", monospace; letter-spacing:.12em; text-transform:uppercase; color:#EDEFF2; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.bs-lk-hero{ background:#1B1D20; container-type:size; }
.bs-lk-photo{ filter:grayscale(1) brightness(.55) contrast(1.1); }
.bs-lk-in{ position:absolute; left:7%; right:7%; bottom:8%; display:flex; flex-direction:column; gap:18px; }
.bs-lk-line{ margin:0; color:#EDEFF2; font-size:min(9cqw, 13cqh); line-height:.95; }
.bs-lk-wm{ width:40%; }
.bs-lk-type{ background:var(--bg); color:var(--fg); padding:42px 26px 24px; display:flex; flex-direction:column; justify-content:space-between; container-type:size; }
.bs-lk-type .bs-cap{ color:var(--fg); opacity:.7; text-shadow:none; }
.bs-lk-type p{ margin:0; font-size:min(10cqw, 17cqh); line-height:.95; letter-spacing:-.05em; }
.bs-lk-type > img{ position:static; width:min(56%, 160px); height:auto; display:block; }
.bs-lw{ display:inline-block; }
.bs-view.is-on .bs-lkb .gb-t{ animation:bs-rise .7s cubic-bezier(0.32, 0.72, 0, 1) both; }
.bs-view.is-on .bs-lkb .gb-row:nth-child(2) .gb-t{ animation-delay:.12s; }
.bs-view.is-on .bs-lk-photo{ animation:bs-push 9s cubic-bezier(.2, 0, .1, 1) both; }
.bs-view.is-on .bs-lk-hero .bs-lw{ animation:bs-rise .9s cubic-bezier(0.32, 0.72, 0, 1) calc(.4s + var(--i) * .18s) both; }
@keyframes bs-push{ from{ scale:1.1; } to{ scale:1; } }

/* finished artwork in a board: whole, centred on its own dark ground */
.bs-lkb figure.is-art{ background:#1B1D20; flex:0 0 auto; height:100%; aspect-ratio:var(--ar); }   /* sized to its own shape, so it is never cropped */
.bs-lkb figure.is-art.is-big{ flex-grow:0; }
.bs-lkb figure.is-art > img{ object-fit:contain; }