/* velvetbetcassino.com, design v5: Catalogue atlas. Written for this site alone. */

@font-face {
  font-family: "Rethink Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/rethink-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Rethink Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/rethink-sans-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;
}

:root {
  /* Velobet palette, exact values (research/PALETTE.md) */
  --vb-bg: #11110F;
  --vb-surface: #131313;
  --vb-surface-2: #181916;
  --vb-surface-3: #1E1D1D;
  --vb-text: #EAEAEA;
  --vb-text-body: rgba(255, 255, 255, .6);
  --vb-text-muted: #BCBCC0;
  --vb-brand: #95F400;
  --vb-on-brand: #11110F;
  --vb-border: #3C3C3D;
  --vb-accent: #FFDD2A;
  --vb-error: #FE0000;
  /* tints of the palette only */
  --lime-10: rgba(149, 244, 0, .10);
  --lime-45: rgba(149, 244, 0, .45);
  --rule-soft: rgba(255, 255, 255, .08);
  /* type: Rethink Sans, ratio 1.25 */
  --f: "Rethink Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --t-small: .875rem;
  --t-data: .875rem;
  /* v6: one reading measure; the inner pages' promo rail */
  --measure: 52ch;
  --rail: 24rem;
  --t-body: 1rem;
  --t-h3: 1.125rem;
  --t-h2: 1.5rem;
  --t-h1: 2rem;
  /* plane */
  --plane: 1120px;
  --gut: 16px;
  --w: min(100% - 2 * var(--gut), var(--plane));
  --sec: 28px;
  --r-s: 7px;
  --r-m: 10px;
  --r-l: 16px;
  color-scheme: dark;
}
@media (min-width: 720px) {
  :root { --gut: 24px; --t-h3: 1.25rem; --t-h2: 1.953rem; --t-h1: 3.052rem; }
}
@media (min-width: 1200px) {
  :root { --t-h1: 3.815rem; }
}
/* v6 (22.10): the type grows with the screen, 17px from 1024 and 17 / 18.3 / 20px at 1440 / 1920 / 2560; the plane grows
   faster than the type (1120 / 1312 / 1568px), so a wide screen gets a larger page, never a stretched line */
@media (min-width: 1024px) {
  html { font-size: 106.25%; }
}
@media (min-width: 1440px) {
  html { font-size: clamp(17px, calc(13.143px + .2679vw), 20px); }
  :root { --plane: clamp(1120px, calc(1120px + (100vw - 1440px) * .4), 1600px); --gut: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--vb-bg); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--vb-bg);
  color: var(--vb-text-muted);
  font: 400 var(--t-body)/1.5 var(--f);
  font-kerning: normal;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: var(--vb-text); text-decoration-color: var(--lime-45); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--vb-brand); }
:focus-visible { outline: 2px solid #EAEAEA; outline-offset: 2px; box-shadow: 0 0 0 2px #11110F; border-radius: 4px; }
h1, h2, h3 { color: var(--vb-text); font-weight: 750; text-wrap: balance; margin: 0; }
p, li, dd, td, figcaption { text-wrap: pretty; }
p { margin: 0; }
b, strong { color: var(--vb-text); font-weight: 600; }
q { color: var(--vb-text); }
.ic { width: 20px; height: 20px; flex: none; }
a, button, summary, label { touch-action: manipulation; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap, main > * { width: var(--w); margin-inline: auto; }

/* ---------- header: two rows ---------- */
.bar2 { background: var(--vb-bg); border-bottom: 1px solid var(--vb-border); }
.bar2-id { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 24px; padding-block: 10px 9px; }
.wm { display: inline-flex; align-items: baseline; gap: .3em; color: var(--vb-text); text-decoration: none; font-size: 1.125rem; line-height: 1.6rem; white-space: nowrap; }
.wm::before {
  content: ""; align-self: center; width: 15px; height: 16px; margin-right: 4px; border-radius: 2px;
  background:
    linear-gradient(var(--vb-brand), var(--vb-brand)) 100% 100% / 3px 70% no-repeat,
    linear-gradient(var(--vb-text-muted), var(--vb-text-muted)) 50% 100% / 3px 100% no-repeat,
    linear-gradient(var(--vb-text-muted), var(--vb-text-muted)) 0 100% / 3px 82% no-repeat;
}
.wm-l { font-weight: 750; letter-spacing: -.01em; }
.wm-a { font-weight: 400; color: var(--vb-text-muted); }
.bar2-tag { font-size: var(--t-small); line-height: 1.125rem; color: var(--vb-text-muted); }
.pages ul { list-style: none; margin: 0; padding: 0; display: flex; }
.pages a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  color: var(--vb-text-muted); font-size: var(--t-data); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.pages a:hover { color: var(--vb-text); }
.pages a[aria-current="page"] { color: var(--vb-text); }
.pages-head { border-top: 1px solid var(--rule-soft); }
.pages-head ul { gap: 4px; margin-inline: auto; }
.pages-head li:first-child a { padding-left: 0; }
.pages-head a { position: relative; }
.pages-head a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--vb-brand); }
.pages-head li:first-child a[aria-current="page"]::after { left: 0; }
.pages-head .ic, .pages-deal .ic { color: var(--vb-text-muted); }
.pages a[aria-current="page"] .ic { color: var(--vb-brand); }
.pages-deal { display: none; }
@media (max-width: 719px) {
  /* one-row header (22.10): a two-line lockup at left, the category icons scrolled inline at right;
     the tag line hangs under the bar, inside the opening's top padding */
  .bar2 { position: relative; display: flex; align-items: center; gap: 14px; padding-left: 16px; }
  .bar2-id { width: auto; margin: 0; flex: none; display: block; padding-block: 4px; }
  .bar2 .wm { display: grid; align-content: center; gap: 0; min-height: 44px; font-size: 1.0625rem; line-height: 1.1; }
  .bar2 .wm::before { display: none; }
  .bar2 .wm-a { font-size: .875rem; letter-spacing: .01em; }
  .bar2-tag { position: absolute; left: 16px; top: calc(100% + 8px); }
  .pages-head { flex: 1 1 auto; min-width: 0; border: 0; }
  .pages-head ul {
    width: auto; gap: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .pages-head ul::-webkit-scrollbar { display: none; }
  .pages-head li { flex: none; }
  .pages-head li:last-child { padding-right: 24px; }
  .pages-head a, .pages-head li:first-child a { min-width: 44px; padding: 0 11px; justify-content: center; }
  .pages-head a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pages-head a[aria-current="page"]::after, .pages-head li:first-child a[aria-current="page"]::after { left: 10px; right: 10px; bottom: 4px; }
  .pages-head a:focus-visible { outline-offset: -2px; }
  .pages-deal { display: block; margin-top: 16px; border-block: 1px solid var(--rule-soft); }
  .pages-deal ul {
    gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .pages-deal ul::-webkit-scrollbar { display: none; }
  .pages-deal li { scroll-snap-align: start; flex: none; }
  .pages-deal li:last-child { padding-right: 32px; }
  .pages-deal a { position: relative; padding: 0 10px; }
  .pages-deal li:first-child a { padding-left: 0; }
  .pages-deal a:focus-visible { outline-offset: -2px; }
  .pages-deal a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--vb-brand); }
  .pages-deal li:first-child a[aria-current="page"]::after { left: 0; }
}

/* ---------- opening: H1 + intro left, promo card right ---------- */
main { display: block; padding-bottom: 8px; }
.opening { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 40px; padding-top: 12px; align-items: start; }
.opening > *, .split > * { min-width: 0; }
.hero .h1row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
h1 { font-size: var(--t-h1); line-height: 1.125; letter-spacing: -.025em; }
.plate {
  display: inline-flex; align-items: center; padding: 7px 10px; border-radius: var(--r-s);
  background: var(--vb-surface-2); border: 1px solid var(--vb-border);
}
.plate img { display: block; width: 104px; height: auto; }
.lede { margin-top: 6px; color: var(--vb-text); font-size: 1rem; line-height: 1.375rem; max-width: var(--measure); }
.intro, .hero > p:not(.lede) { margin-top: 8px; max-width: var(--measure); }
main > header.hero { padding-top: 14px; }
main > header.hero > .plate { margin-bottom: 10px; }
@media (min-width: 720px) {
  .opening { padding-top: 32px; }
  main > header.hero { padding-top: 32px; }
  .plate img { width: 112px; }
  .lede { font-size: 1.125rem; line-height: 1.625rem; margin-top: 10px; }
  .intro, .hero > p:not(.lede) { margin-top: 14px; }
}
@media (min-width: 960px) {
  .opening { grid-template-columns: minmax(0, 1fr) 25rem; grid-template-rows: auto 1fr; grid-template-areas: "hero deal" "op deal"; row-gap: 24px; }
  .opening > .hero { grid-area: hero; }
  .opening > .promo { grid-area: deal; }
  .opening > .opbox { grid-area: op; align-self: start; }
  .opening .promo-plate { padding-block: 12px; }
  .opening .promo-terms li { padding-block: 5px; }
  .hero .h1row { gap: 10px 20px; }
}
/* first screen at phone width (22.10): the title stands on a full-bleed shelf rule with the plate resting on its
   baseline at right; bold 17px lede; dense 15px intro; the promo card runs edge to edge under a lime shelf label.
   Round 2: 58px of air above the title and a tighter stack under the rule (10/10/24), so the deal keeps its place */
@media (max-width: 719px) {
  .opening, main > header.hero { padding-top: 46px; }
  .opening { padding-top: 36px; row-gap: 10px; }
  .opening .h1row { display: grid; gap: 0; }
  .opening .h1row > * { grid-area: 1 / 1; }
  .opening h1 {
    margin-inline: calc(-1 * var(--gut)); padding: 0 calc(100px + var(--gut)) 8px var(--gut); border-bottom: 1px solid var(--vb-border);
    font-size: 3rem; line-height: 1; letter-spacing: -.035em;
  }
  .opening .h1row .plate { justify-self: end; align-self: end; margin-bottom: 20px; padding: 5px 8px; }
  .opening .plate img { width: 84px; }
  .opening .lede { margin-top: 6px; font-size: 1.0625rem; line-height: 1.4; font-weight: 700; }
  .opening .intro { margin-top: 6px; font-size: 1rem; line-height: 1.5; }
  .opening > .promo, main > .promo { position: relative; overflow: visible; margin-top: 28px; border-radius: 0; border-inline: 0; }
  .opening > .promo { width: calc(100% + 2 * var(--gut)); margin-left: calc(-1 * var(--gut)); margin-top: 14px; }
  main > .promo { width: 100%; }
  .promo .promo-plate { border-radius: 0; padding-top: 14px; }
  /* v6: the shelf label is a dark tab with a lime hairline and lime text, never a lime label */
  .promo .promo-kicker {
    position: absolute; top: -14px; left: 16px; padding: 1px 10px; border-radius: 6px;
    background: var(--vb-bg); border: 1px solid var(--lime-45); color: var(--vb-brand); font-size: .875rem; line-height: 1.25rem;
  }
}
/* polish 2: on a 360px phone the 09:46Z lede runs a line longer, so the stack above the deal gives back 26px (air above
   the title 36 to 20, the rule 4px closer, the logo plate's top padding 14 to 8) and the padded logo stays above 560 */
@media (max-width: 379.98px) {
  .opening { padding-top: 20px; }
  .opening h1 { padding-bottom: 4px; }
  .opening .h1row .plate { margin-bottom: 16px; }
  .opening > .promo .promo-plate { padding-top: 8px; }
}

/* ---------- the deal: promo card ---------- */
.promo { background: var(--vb-surface-3); border: 1px solid var(--vb-border); border-radius: var(--r-l); overflow: hidden; }
.promo-plate { display: flex; align-items: center; padding: 10px 16px; background: var(--vb-bg); border-bottom: 1px solid var(--vb-border); }
.promo-plate img { display: block; width: 132px; height: auto; }
/* v6: the abstract band is a dark shelf of grey spines; the one lime spine is a 5px tick drawn on its own, never part
   of the band's background */
.promo-band {
  position: relative; height: 24px; border-bottom: 1px solid var(--vb-border);
  background:
    linear-gradient(var(--vb-surface-3), var(--vb-surface-3)) 0 0 / 100% 22% no-repeat,
    repeating-linear-gradient(90deg, var(--vb-surface-3) 0 13px, transparent 13px 41px) 0 0 / 100% 48% no-repeat,
    linear-gradient(var(--vb-accent), var(--vb-accent)) 88% 100% / 4px 46% no-repeat,
    repeating-linear-gradient(90deg, #2C2C2A 0 7px, var(--vb-surface-3) 7px 10px, #3C3C3D 10px 14px, var(--vb-surface-3) 14px 17px, #262624 17px 26px, var(--vb-surface-3) 26px 29px);
}
.promo-band::after { content: ""; position: absolute; left: 62%; bottom: 0; width: 5px; height: 64%; background: var(--vb-brand); }
.promo-body { padding: 16px 18px 18px; }
.promo-kicker { color: var(--vb-brand); font-size: var(--t-data); font-weight: 600; line-height: 1.25rem; }
.promo-offer { margin-top: 4px; color: var(--vb-text); font-size: 1.5rem; line-height: 1.75rem; font-weight: 750; letter-spacing: -.01em; }
/* polish 1 (22.10, 09:00Z): the significant terms read at least as large as the affiliate line under the button, and in
   the primary text colour, so the card reads offer, terms, button, label, disclosure */
.promo-terms { list-style: none; margin: 12px 0 0; padding: 0; color: var(--vb-text); font-size: 1rem; line-height: 1.5; }
.promo-terms li { padding: 6px 0; border-top: 1px solid var(--rule-soft); }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: var(--r-s); background: var(--vb-brand); color: var(--vb-on-brand);
  font-weight: 750; font-size: var(--t-body); text-decoration: none; text-align: center;
}
.btn:hover { filter: brightness(1.08); }
.promo-btn { margin-top: 14px; }
.promo-ad { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: var(--t-small); line-height: 1.125rem; color: var(--vb-text-muted); }
.promo-aff { margin-top: 8px; font-size: 1rem; line-height: 1.5; }
.age { display: inline-block; padding: 0 5px; border: 1px solid var(--vb-error); border-radius: 4px; color: var(--vb-text); font-size: .875rem; font-weight: 600; line-height: 1.25rem; }
@media (min-width: 720px) {
  .promo-plate { padding: 14px 18px; }
  .promo-plate img { width: 160px; }
  .promo-band { height: 32px; }
  .promo-body { padding: 18px 20px 20px; }
  .promo-offer { font-size: 1.75rem; line-height: 2rem; }
}
/* inner pages: the promo card runs across the plane */
main > .promo { margin-top: 16px; }
@media (min-width: 960px) {
  main > .promo { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto 1fr; margin-top: 24px; }
  main > .promo .promo-plate { grid-column: 1; grid-row: 1; }
  main > .promo .promo-band { grid-column: 1; grid-row: 2; height: auto; min-height: 52px; border-bottom: 0; border-right: 1px solid var(--vb-border); }
  main > .promo .promo-plate { border-right: 1px solid var(--vb-border); }
  main > .promo .promo-body { grid-column: 2; grid-row: 1 / span 2; }
  main > .promo .promo-terms { columns: 2; column-gap: 28px; }
  main > .promo .promo-terms li { break-inside: avoid; }
  main > .promo .promo-btn { max-width: 340px; }
}

/* ---------- operator box: compact 2-col facts strip ---------- */
.opbox { border-top: 1px solid var(--vb-border); padding-top: 12px; }
.opt { color: var(--vb-text); font-weight: 600; font-size: var(--t-data); }
.opbox dl { margin: 8px 0 0; display: grid; gap: 0 28px; }
.opbox dl > div { padding: 8px 0; border-top: 1px solid var(--rule-soft); }
.opbox dt { color: var(--vb-text-muted); font-size: var(--t-small); font-weight: 600; line-height: 1.125rem; }
.opbox dd { margin: 2px 0 0; color: var(--vb-text); font-size: 1rem; line-height: 1.5; }
@media (min-width: 720px) {
  .opbox dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opbox dl > div:last-child { grid-column: 1 / -1; }
}

/* ---------- shelves: H2 left, page link right, one baseline ---------- */
.shelf { margin-top: calc(var(--sec) + 17px); }
.shelf-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding-top: 14px; margin-bottom: 14px; position: relative; border-top: 3px solid var(--vb-border);
}
.shelf-head, main > section:not(.shelf):not(.faq):not(.rg) > h2 { --spine: rgba(255, 255, 255, .26); --spine-hi: var(--vb-text-muted); }
.shelf-head:has(.shelf-link) { --spine-hi: var(--vb-brand); }
.shelf-head::before, main > section:not(.shelf):not(.faq):not(.rg) > h2::before {
  content: ""; position: absolute; left: 0; top: -17px; width: 60px; height: 14px;
  background:
    linear-gradient(var(--spine), var(--spine)) 0 100% / 5px 57% no-repeat,
    linear-gradient(var(--spine), var(--spine)) 8px 100% / 4px 86% no-repeat,
    linear-gradient(var(--spine-hi), var(--spine-hi)) 15px 100% / 6px 100% no-repeat,
    linear-gradient(var(--spine), var(--spine)) 24px 100% / 4px 71% no-repeat,
    linear-gradient(var(--spine), var(--spine)) 31px 100% / 5px 93% no-repeat,
    linear-gradient(var(--spine), var(--spine)) 39px 100% / 3px 50% no-repeat;
}
.shelf-head h2, main > section:not(.shelf):not(.faq):not(.rg) > h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 800; letter-spacing: -.016em; }
.shelf-head h2 { flex: 0 1 auto; }
.shelf-head::after { content: ""; flex: 1 1 32px; order: 1; min-width: 32px; border-bottom: 2px dotted rgba(255, 255, 255, .28); transform: translateY(-.3em); }
.shelf-link, .shelf-mark { order: 2; white-space: nowrap; font-size: var(--t-h3); line-height: 1.5rem; font-weight: 600; }
.shelf-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--vb-brand); text-decoration: none; }
.shelf-link:hover { text-decoration: underline; text-decoration-color: var(--vb-brand); }
.shelf-link .ic { width: 18px; height: 18px; }
.shelf-mark { color: var(--vb-text); font-variant-numeric: tabular-nums; }
.passage { max-width: var(--measure); }
.passage + .passage, .shelf > * + .passage, .split > * + .passage { margin-top: 18px; }

/* inner pages: plain sections get the same plank */
main > section:not(.shelf):not(.faq):not(.rg) { margin-top: calc(var(--sec) + 17px); }
main > section:not(.shelf):not(.faq):not(.rg) > h2 { padding-top: 14px; margin-bottom: 14px; border-top: 3px solid var(--vb-border); position: relative; }
main > section > p, main > section > ul:not([class]), main > section > ol:not([class]), main > header.hero > p { max-width: var(--measure); }
main > section:not(.shelf, .rg, .faq) > :is(ul, ol):not([class]) { margin: 14px 0 0; padding-left: 1.25em; }
main > section:not(.shelf, .rg, .faq) > :is(ul, ol):not([class]) > li + li { margin-top: 6px; }
main > section:not(.shelf, .rg, .faq) > ul:not([class]) > li::marker { color: var(--vb-brand); }
main > section > * + .tbl { margin-top: 18px; }
main > section > p + p, main > section > * + p { margin-top: 18px; }

/* ---------- ledger: the lobby counters as a register ---------- */
.ledger { list-style: none; margin: 16px 0; padding: 0; border-top: 1px solid var(--vb-border); }
.ledger li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.ledger b { grid-row: 1 / span 2; color: var(--vb-text); font-size: 1.25rem; line-height: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.ledger span { color: var(--vb-text); font-size: var(--t-data); font-weight: 600; line-height: 1.25rem; }
.ledger small { font-size: var(--t-small); line-height: 1.125rem; }
@media (min-width: 720px) {
  .ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-soft); }
  .ledger li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; border-bottom: 0; border-left: 1px solid var(--rule-soft); }
  .ledger li:first-child { border-left: 0; padding-left: 0; }
  .ledger b { font-size: 1.953rem; line-height: 2.25rem; letter-spacing: -.01em; }
}
/* the tool section on a wide screen (22.10): the two passages read in the left 8 columns, the counters stand as a
   register in the right 4, and the filtered catalogue then spans the whole plane */
@media (min-width: 960px) {
  .shelf[data-tool] { display: grid; grid-template-columns: minmax(0, 1fr) 21.25rem; grid-template-rows: auto auto auto 1fr auto; column-gap: 3.5rem; }
  .shelf[data-tool] > * { grid-column: 1 / -1; min-width: 0; }
  .shelf[data-tool] > .passage:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .shelf[data-tool] > .passage:nth-of-type(2) { grid-column: 1; grid-row: 3; margin-top: 14px; }
  .shelf[data-tool] > .ledger { grid-column: 2; grid-row: 2 / span 3; display: block; margin: 16px 0 0; border-bottom: 0; }
  .shelf[data-tool] > .ledger li, .shelf[data-tool] > .ledger li:first-child { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--rule-soft); }
  .shelf[data-tool] > .ledger b { grid-row: 1 / span 2; font-size: 2.441rem; line-height: 2.5rem; font-weight: 800; }
  .shelf[data-tool] > .catalogue { grid-row: 5; margin-top: 28px; }
}

/* ---------- catalogue table + filter (the tool) ---------- */
.catalogue { margin-top: 16px; }
.cat-filters {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 10px 0; background: var(--vb-bg); border-bottom: 1px solid var(--rule-soft);
}
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fgroup-l { margin-right: 4px; color: var(--vb-text-muted); font-size: var(--t-small); font-weight: 600; }
.fchip {
  flex: none; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-s);
  background: none; color: var(--vb-text); font: 600 var(--t-data)/1 var(--f); cursor: pointer;
}
.fchip:hover { border-color: var(--vb-text-muted); }
.fchip[aria-pressed="true"] { border-color: var(--vb-brand); background: var(--lime-10); box-shadow: inset 0 -2px 0 var(--vb-brand); }
.fcount { margin-left: auto; color: var(--vb-text-muted); font-size: var(--t-data); font-variant-numeric: tabular-nums; }
.tbl { margin-top: 12px; margin-inline: -10px; }
.cat-filters { margin-inline: -10px; padding-inline: 10px; }
.cat { width: 100%; border-collapse: collapse; font-size: var(--t-data); line-height: 1.25rem; }
.cat caption { caption-side: top; text-align: left; padding: 0 0 10px 10px; color: var(--vb-text); font-size: var(--t-body); font-weight: 750; line-height: 1.5rem; }
.cat th { text-align: left; padding: 8px 14px; color: var(--vb-text-muted); font-size: var(--t-small); font-weight: 600; border-bottom: 1px solid var(--vb-border); }
.cat td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
.cat td:first-child { color: var(--vb-text); font-weight: 600; }
.cat tbody tr:nth-child(even) { background: var(--vb-surface-2); }
.catalogue.is-on .cat tbody tr { background: none; }
.catalogue.is-on .cat tbody tr.is-alt { background: var(--vb-surface-2); }
.cat .mut { color: var(--vb-text-muted); }
.stag, .st { display: inline-block; padding: 1px 8px; border-radius: 6px; background: none; box-shadow: inset 0 0 0 1px var(--vb-border); color: var(--vb-text); font-size: var(--t-small); font-weight: 600; line-height: 1.25rem; white-space: nowrap; }
.st { margin-left: 8px; }
.catalogue.is-fresh tbody tr:not([hidden]) { animation: rowin .2s ease-out; }
@keyframes rowin { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 720px) {
  .cat th:first-child, .cat td:first-child { padding-left: 10px; }
  /* the 34/18 split fits the filter's game/studio columns only; reading tables size to their own cells */
  .catalogue[data-catalogue] .cat td:first-child { width: 34%; }
  .catalogue[data-catalogue] .cat td:nth-child(2) { width: 18%; }
}
@media (max-width: 719px) {
  .cat-filters { position: static; display: block; padding-block: 4px 10px; }
  .fgroup { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -16px; padding: 6px 16px; }
  .fgroup::-webkit-scrollbar { display: none; }
  .fgroup-l { flex: none; min-width: 6.5rem; }
  .fcount { display: block; margin: 6px 0 0; }
  .cat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cat, .cat tbody { display: block; }
  .cat caption { display: block; }
  .cat tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 10px 11px; border-bottom: 1px solid var(--rule-soft); }
  .cat td { display: block; padding: 0; border: 0; }
  .cat td:nth-child(n+3) { grid-column: 1 / -1; color: var(--vb-text-muted); }
  .cat td:nth-child(n+3)::before { content: attr(data-l); display: block; color: var(--vb-text-muted); font-size: .875rem; font-weight: 600; }
  .cat td.mut { font-size: var(--t-small); }
  .cat tr[hidden] { display: none; }
  /* inner tables with two columns stack the same way */
  .cat td:nth-child(2):last-child { grid-column: 1 / -1; color: var(--vb-text-muted); }
  .cat td:nth-child(2):last-child::before { content: attr(data-l); display: block; color: var(--vb-text-muted); font-size: .875rem; font-weight: 600; }
}

/* ---------- 8/4 split: passage + side ---------- */
.split > * + * { margin-top: 14px; }
@media (min-width: 960px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 21.25rem; column-gap: 3rem; align-items: start; }
  .split > * { grid-column: 1; }
  .split > .side { grid-column: 2; grid-row: 1 / span 8; margin-top: 0; position: sticky; top: 16px; }
  .split > .passage { max-width: 52ch; }
}
/* 1440 rhythm (22.10): two widths on a wide screen. Shelves that carry data (the catalogue, a split with its aside, a
   vitrine line, a studio pair, the counters, the studio finder) span the 1120px plane. Prose shelves, the FAQ and the
   RG close keep to the plane's left 8 columns, the width of a split's text column, and leave the right 4 open; every
   passage reads at 52ch. Phone widths are untouched. */
@media (min-width: 960px) {
  main > .shelf:not([data-tool]):not(:has(.catalogue, .split, .release-line, .studio-pair, .ledger, .poslist, .finder)),
  main > .faq, main > .rg {
    width: calc(var(--w) - 21.25rem - 3rem);
    margin-left: calc((100% - var(--w)) / 2); margin-right: auto;
  }
  .passage { max-width: 52ch; }
}

/* tab order of a lobby: a ruled text line, never a control */
.tabline, .chips, .pchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 25px; overflow: hidden; font-size: var(--t-data); line-height: 1.25rem; }
.tabline li, .chips li, .pchips li { position: relative; padding: 6px 0; color: var(--vb-text-muted); cursor: default; }
.tabline li + li::before, .chips li + li::before, .pchips li + li::before { content: ""; position: absolute; left: -13px; top: 8px; bottom: 8px; border-left: 1px solid var(--vb-border); }
.tabline .on, .chips .chip.on { color: var(--vb-text); font-weight: 600; }
.side .tabline { display: block; border-top: 1px solid var(--vb-border); }
.side .tabline li { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.side .tabline li + li::before { content: none; }
.cnt { margin-top: 10px; font-size: var(--t-data); }
.split > .tabline { margin-top: 16px; }

/* vitrine order */
.release-line { list-style: none; margin: 14px 0 0; padding: 0; max-width: 560px; border-top: 1px solid var(--vb-border); }
.release-line li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.release-line .tn { color: var(--vb-text); font-weight: 600; }
.release-line small { color: var(--vb-text-muted); font-size: var(--t-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 720px) {
  .release-line { max-width: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--vb-border); }
  .release-line li { flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 10px 14px 12px; border-bottom: 0; border-left: 1px solid var(--rule-soft); }
  .release-line li:first-child { border-left: 0; padding-left: 0; }
  .release-line small { white-space: normal; }
  /* v6: the vitrine order wraps as a ruled register (the minijogos lobby lists 12 places, too many for one strip) */
  .release-line { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); column-gap: 14px; }
  .release-line li, .release-line li:first-child { padding: 10px 0 12px; border-left: 0; border-bottom: 1px solid var(--rule-soft); }
}

/* live table positions */
.poslist { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--vb-border); }
.poslist li { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); break-inside: avoid; }
.poslist b { width: 2ch; flex: none; color: var(--vb-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.poslist .tn { color: var(--vb-text); }
@media (min-width: 720px) { .poslist { columns: 2; column-gap: 32px; } }

/* ---------- studio cards: the only cards ---------- */
.studio { background: var(--vb-surface-3); border: 1px solid var(--vb-border); border-radius: var(--r-m); padding: 14px 16px; }
.studio-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; font-size: var(--t-data); line-height: 1.25rem; }
.studio-list li { padding: 6px 0; border-bottom: 1px solid var(--rule-soft); color: var(--vb-text); break-inside: avoid; }

/* comparison: two studio cards on the same dimensions */
.studio-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.studio-pair > .studio { min-width: 0; }
.studio h3, .studio-pair .studio-t { font-size: var(--t-h3); line-height: 1.5rem; margin-bottom: 8px; }
/* the writer's pair titles are p.studio-t (an h3 there broke the heading sequence): same look as .studio h3 */
.studio-pair .studio-t { color: var(--vb-text); font-weight: 750; text-wrap: balance; }
.studio dl { margin: 0; border-top: 1px solid var(--vb-border); }
.studio dl > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: var(--t-data); line-height: 1.25rem; }
.studio dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.studio dt { color: var(--vb-text-muted); font-weight: 600; }
.studio dd { margin: 0; color: var(--vb-text); }
@media (min-width: 720px) { .studio-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* callout: one studio card inside a shelf */
.shelf > aside.studio, .split > aside.studio:not(.side) { margin-top: 16px; max-width: 56ch; }
.studio-t { color: var(--vb-text); font-weight: 750; line-height: 1.5rem; }
.studio > p + p { margin-top: 6px; }

/* steps: a real sequence, numbers from CSS */
.path { list-style: none; margin: 16px 0 0; padding: 0; max-width: 72ch; counter-reset: step; border-top: 1px solid var(--vb-border); }
.path li { counter-increment: step; position: relative; padding: 12px 0 12px 44px; border-bottom: 1px solid var(--rule-soft); }
.path li::before {
  content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--vb-border); border-radius: var(--r-s); color: var(--vb-text); font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums;
}
.path b { display: block; color: var(--vb-text); font-weight: 600; }

/* checklist: ruled rows with a drawn check */
.check-shelf { list-style: none; margin: 16px 0 0; padding: 0; max-width: 72ch; border-top: 1px solid var(--vb-border); }
.check-shelf li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--rule-soft); }
.check-shelf li::before { content: ""; position: absolute; left: 3px; top: 17px; width: 12px; height: 6px; border-left: 2px solid var(--vb-brand); border-bottom: 2px solid var(--vb-brand); transform: rotate(-45deg); }

/* optional contents box (2,500+ word pages only) */
.contents { padding: 12px 16px 6px; border: 1px solid var(--vb-border); border-radius: var(--r-m); background: var(--vb-surface); }
main > .contents { margin-top: var(--sec); }
.contents-t { color: var(--vb-text); font-size: var(--t-data); font-weight: 750; line-height: 1.25rem; }
.contents ol { list-style: none; margin: 6px 0 0; padding: 0; }
.contents li { break-inside: avoid; border-top: 1px solid var(--rule-soft); }
.contents a { display: flex; align-items: center; min-height: 44px; color: var(--vb-text); font-size: var(--t-data); line-height: 1.25rem; text-decoration: none; }
.contents a:hover { color: var(--vb-brand); }
@media (min-width: 720px) { .contents ol { columns: 2; column-gap: 32px; } }
@media (min-width: 1100px) { .contents ol { columns: 3; } }
/* two-up plates (22.10, round 2): from 1200px main is one grid on the 1120px plane, and the content keeps its DOM
   order. Tracks: 648 | 32 | 8 | 32 | 316 | 84. Short prose shelves are plates and pair up in one row like the plates
   of an atlas: a 648px main plate on the left and a 432px inset plate (a tinted card) on the right; a plate left alone
   before a data shelf takes the 680px reading column. Data shelves (a split, a studio pair, a catalogue), the FAQ and
   the RG close run 1036px, the tool and the byline the full plane. The opening's boxes join the same grid (display: contents), so the contents
   box sits in the reading column under the operator box, beside the deal, and the tool starts on the first screen. */
@media (min-width: 1200px) {
  main {
    display: grid; align-items: start;
    grid-template-columns: [plane-start] minmax(0, 648fr) [plate-l-end] minmax(0, 32fr) [read-end] minmax(0, 8fr) [plate-r-start] minmax(0, 32fr) [deal-start] minmax(0, 316fr) [data-end] minmax(0, 84fr) [plane-end];
    padding-inline: calc((100% - var(--w)) / 2);
  }
  main > .wrap, main > * { grid-column: plane-start / plane-end; width: auto; margin-inline: 0; min-width: 0; }
  main > .shelf:not([data-tool]):not(:has(.catalogue, .split, .release-line, .studio-pair, .ledger, .poslist, .finder)),
  main > .faq, main > .rg { width: auto; margin-left: 0; margin-right: 0; }
  main > .shelf:not([data-tool]):has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder)) { grid-column: plane-start / data-end; }
  main > .faq, main > .rg { grid-column: plane-start / data-end; }
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) { grid-column: plane-start / plate-l-end; }
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) { grid-column: plate-r-start / plane-end; margin-top: calc(var(--sec) + 17px - 22px); padding: 22px 18px 24px; background: var(--vb-surface-2); border: 1px solid var(--rule-soft); border-radius: var(--r-l); }
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))):has(+ :not(.shelf), + [data-tool], + .shelf > :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder)),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))):has(+ :not(.shelf), + [data-tool], + .shelf > :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder)),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))):has(+ :not(.shelf), + [data-tool], + .shelf > :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder)),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))):has(+ :not(.shelf), + [data-tool], + .shelf > :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder)),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))):has(+ :not(.shelf), + [data-tool], + .shelf > :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder)),
  main > :is(:not(.shelf), [data-tool], .shelf:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) + .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))):has(+ :not(.shelf), + [data-tool], + .shelf > :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder)) { grid-column: plane-start / read-end; }

  main > .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) > .passage { max-width: 54ch; }
  .opening:has(+ .contents) { display: contents; }
  .opening:has(+ .contents) > .hero { grid-column: plane-start / read-end; grid-row: 1; margin-top: 16px; }
  .opening:has(+ .contents) > .promo { grid-column: deal-start / plane-end; grid-row: 1 / span 3; margin-top: 16px; }
  .opening:has(+ .contents) > .opbox { grid-column: plane-start / read-end; grid-row: 2; margin-top: 24px; }
  .opening:has(+ .contents) + .contents { grid-column: plane-start / read-end; grid-row: 3; margin-top: 20px; padding: 9px 0 7px; border-color: transparent; background: transparent; }
  .opening:has(+ .contents) + .contents ol { columns: auto; display: flex; flex-wrap: wrap; column-gap: 22px; margin-top: 2px; }
  .opening:has(+ .contents) + .contents li { border-top: 0; }
  .opening:has(+ .contents) + .contents a { min-height: 28px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .24); text-underline-offset: 4px; }
  .opening:has(+ .contents) + .contents a:hover { text-decoration-color: currentColor; }
}
h2[id] { scroll-margin-top: 16px; }

/* ---------- v6 (22.10): inner pages on a wide screen ----------
   The inner pages take the home's shelf opening as their whole frame: from 1200px main is an 8/4 grid, the reading
   column on the left (hero, sections, tables, FAQ, RG close, byline) and the promo card in a right rail, sticky for the
   length of the page. The DOM order is unchanged: the deal still follows the intro. From 960px the hero's plate stands
   beside the H1 like a catalogue label. */
@media (min-width: 960px) {
  /* polish 1: the label tile is a square two H1 lines high, floated into the title's corner like a catalogue label:
     never stretched down a long H1, and a third H1 line runs back to the column edge under it */
  main > header.hero { display: flow-root; }
  main > header.hero > .plate {
    float: left; display: flex; align-items: center; justify-content: center; width: calc(2.125 * var(--t-h1)); aspect-ratio: 1;
    margin: calc(.0625 * var(--t-h1)) 1.5rem 0 0; padding: 12px;
  }
  main > header.hero > .plate img { width: min(7.5rem, 100%); }
  main > header.hero > p { clear: left; }
}
@media (min-width: 1200px) {
  main:has(> header.hero) {
    grid-template-columns: [plane-start read-start] minmax(0, 1fr) [read-end] 3rem [rail-start] var(--rail) [rail-end plane-end];
    grid-template-rows: repeat(40, auto);
  }
  main:has(> header.hero) > *, main:has(> header.hero) > :is(.faq, .rg) { grid-column: read-start / read-end; width: auto; margin-inline: 0; }
  main:has(> header.hero) > .promo {
    grid-column: rail-start / rail-end; grid-row: 1 / -1; align-self: start;
    /* polish 2: static in the rail by default; sticky only where the whole card fits the window with 24px above and
       below (the card is 826px tall to 1679px, 845 to 1919, 865 to 2559 and 887 from 2560), so it never scrolls inside itself */
    position: relative; top: auto;
    display: block; margin-top: 32px;
  }
  main:has(> header.hero) > .promo .promo-plate { border-right: 0; }
  main:has(> header.hero) > .promo .promo-band { height: 32px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--vb-border); }
  main:has(> header.hero) > .promo .promo-terms { columns: auto; }
  main:has(> header.hero) > .promo .promo-btn { max-width: none; }
  main:has(> header.hero) > section:not(.faq, .rg) > .tbl { margin-inline: 0; }
}
@media (min-width: 1200px) and (max-width: 1679.98px) and (min-height: 880px),
       (min-width: 1680px) and (max-width: 1919.98px) and (min-height: 900px),
       (min-width: 1920px) and (max-width: 2559.98px) and (min-height: 920px),
       (min-width: 2560px) and (min-height: 944px) {
  main:has(> header.hero) > .promo { position: sticky; top: 24px; }
}

/* inner pages: the studio ranks, in bands of 25 (writer blocks) */
div.studios { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--vb-border); }
div.studios .band { color: var(--vb-text); font-size: var(--t-data); line-height: 1.25rem; }
div.studios .slist { columns: 10.5rem; column-gap: 24px; margin-top: 6px; list-style: decimal inside; }
div.studios .slist li::marker { color: var(--vb-text-muted); font-variant-numeric: tabular-nums; }
main > section > .pchips { margin-top: 14px; padding-block: 4px; border-block: 1px solid var(--vb-border); }

/* studio finder (bound by app.js) */
.finder { margin-top: 16px; border-radius: var(--r-l); padding: 16px; }
.finder-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.search { position: relative; flex: 1 1 260px; max-width: 420px; display: block; }
.search .ic { position: absolute; left: 12px; top: 12px; color: var(--vb-text-muted); pointer-events: none; }
.search input {
  width: 100%; min-height: 44px; padding: 0 12px 0 42px; border: 1px solid var(--vb-border); border-radius: var(--r-s);
  background: var(--vb-bg); color: var(--vb-text); font: 400 var(--t-body)/1 var(--f);
}
.search input::placeholder { color: var(--vb-text-muted); }
.search input:focus-visible { border-color: var(--vb-text); }
.finder output { color: var(--vb-text-muted); font-size: var(--t-data); font-variant-numeric: tabular-nums; }
.finder .pchips { margin-top: 14px; }
.finder details { margin-top: 12px; }
.vall {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
  border: 1px solid var(--vb-border); border-radius: var(--r-s); color: var(--vb-text); font-size: var(--t-data); font-weight: 600;
}
.vall::-webkit-details-marker { display: none; }
.vall .ic { transition: transform .15s ease-out; }
details[open] > .vall .ic { transform: rotate(180deg); }
.slist { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 20px; font-size: var(--t-data); line-height: 1.25rem; }
.slist li { padding: 5px 0; break-inside: avoid; color: var(--vb-text); border-bottom: 1px solid var(--rule-soft); }
.slist .ft::after, .legend i { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--vb-accent); vertical-align: .1em; }
.legend { margin-top: 12px; font-size: var(--t-small); }
.legend i { margin: 0 8px 0 0; }
.finder .none { margin-top: 12px; color: var(--vb-text); }
@media (min-width: 720px) { .slist { columns: 4; } .finder { padding: 20px 22px; } }
@media (min-width: 1100px) { .slist { columns: 5; } }

/* inner pages: details lists of studios and minigames */
details.studios { margin-top: 16px; border-top: 1px solid var(--vb-border); }
details.studios > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--vb-text); font-weight: 600; font-size: var(--t-data); }

/* inner pages: tiles become text records */
.tiles { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--vb-border); }
.tile { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.tile .art, .tile .glyph { display: none; }
.tile b { width: 2ch; flex: none; color: var(--vb-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .tn { color: var(--vb-text); }
@media (min-width: 720px) { .tiles { columns: 2; column-gap: 32px; } .tile { break-inside: avoid; } }

/* captures */
.shot { margin: 18px 0 0; }
.shot img { display: block; border-radius: var(--r-m); border: 1px solid var(--vb-border); }
.shot figcaption { margin-top: 8px; font-size: var(--t-small); line-height: 1.125rem; color: var(--vb-text-muted); }

/* ---------- FAQ: rule-separated details, lime bar when open ---------- */
.faq { margin-top: calc(var(--sec) + 8px); }
.faq > h2, .rg > h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 800; letter-spacing: -.016em; margin-bottom: 10px; }
.faq details { border-top: 1px solid var(--vb-border); }
.faq details:last-of-type { border-bottom: 1px solid var(--vb-border); }
.faq summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--vb-text-muted); border-bottom: 2px solid var(--vb-text-muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s ease-out; }
.faq details[open] > summary::after { transform: rotate(225deg); }
.faq summary h3 { font-size: var(--t-h3); line-height: 1.5rem; }
.faq details > p { position: relative; padding: 0 0 14px; max-width: 52ch; }
.faq details[open] > summary::before, .faq details[open] > p::before { content: ""; position: absolute; left: -12px; width: 3px; background: var(--vb-brand); }
.faq details[open] > summary::before { top: 10px; bottom: 0; }
.faq details[open] > p::before { top: 0; bottom: 14px; }

/* ---------- RG close: rule-separated list ---------- */
.rg { margin-top: var(--sec); }
.rg > p { max-width: 52ch; }
.rg > p + p { margin-top: 10px; }
.rg ul { list-style: none; margin: 14px 0 0; padding: 0; max-width: 64ch; border-top: 1px solid var(--vb-border); }
.rg li { padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }

/* ---------- byline ---------- */
.byline { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--sec); padding: 14px 0 6px; border-top: 1px solid var(--vb-border); }
.by-ic { display: inline-flex; padding: 8px; border-radius: 50%; background: var(--vb-surface-3); color: var(--vb-text-muted); }
.by-n { font-weight: 600; color: var(--vb-text); }
.by-note, .by-up { font-size: var(--t-data); line-height: 1.25rem; }
.by-up { margin-top: 2px; color: var(--vb-text-muted); }

/* ---------- footer: catalogue colophon ---------- */
.colophon { margin-top: 40px; padding-block: 24px 32px; background: var(--vb-surface); border-top: 1px solid var(--vb-border); font-size: var(--t-data); line-height: 1.25rem; }
.col-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-soft); }
.col-pages ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.col-pages a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; color: var(--vb-text-muted); font-weight: 600; text-decoration: none; }
.col-pages a:hover, .col-pages a[aria-current="page"] { color: var(--vb-text); }
.col-pages .ic { width: 18px; height: 18px; }
.col-index { padding-block: 16px; border-bottom: 1px solid var(--rule-soft); }
.col-index-h { color: var(--vb-text); font-weight: 600; }
.col-index-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; max-width: 90ch; }
.col-index-list li:not(:last-child)::after { content: ","; margin-right: .35em; }
.col-legal { padding-top: 16px; display: grid; gap: 8px; max-width: 90ch; }
.col-legal .age { margin-right: 6px; }
.col-indep { color: var(--vb-text); }
.col-pub { color: var(--vb-text-muted); }
.col-pages li:first-child a { padding-left: 0; }
@media (max-width: 719px) { .col-pages a { padding: 0 12px 0 0; } }
/* colophon form (22.10): a tall imprint plate with the large lockup; on a phone the pages run as a two-column
   contents list and the studios as a two-column index; on a wide screen index | contents | imprint stand as three columns,
   the studio index opening the plate on the left and the lockup with the imprint closing it on the right (round 2) */
.colophon { padding-top: 64px; }
.wm-foot { display: grid; gap: 2px; font-size: 2.441rem; line-height: 1.05; }
.wm-foot::before { width: 22px; height: 24px; margin: 0 0 10px; align-self: start; }
.wm-foot .wm-a { font-size: 1.125rem; letter-spacing: .02em; }
.col-top { display: grid; gap: 36px; padding-bottom: 20px; }
.col-pages ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.col-pages li a, .col-pages li:first-child a { padding: 0; }
.col-index-list { display: block; columns: 2; column-gap: 16px; margin-top: 10px; }
.col-index-list li { break-inside: avoid; padding-block: 3px; }
.col-index-list li:not(:last-child)::after { content: none; }
/* phone and tablet (round 2): two plates side by side, the contents list on the left and the studio index on the right,
   then the imprint across, and the lockup closing the page at the foot */
@media (max-width: 959px) {
  .colophon > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .col-top { display: contents; }
  .col-pages { grid-column: 1; grid-row: 1; padding-bottom: 20px; }
  .col-pages ul { grid-template-columns: minmax(0, 1fr); }
  .col-index { grid-column: 2; grid-row: 1; padding-top: 0; border-bottom: 0; }
  .col-index-list { columns: 1; margin-top: 8px; }
  .col-legal { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--rule-soft); }
  .wm-foot { grid-column: 1 / -1; grid-row: 3; margin-top: 40px; }
}
@media (min-width: 960px) {
  .colophon { padding-block: 72px 40px; }
  .colophon > .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 56px; }
  .col-top { display: contents; }
  .wm-foot { grid-column: 3; grid-row: 1; align-self: start; font-size: 2.441rem; }
  .wm-foot .wm-a { font-size: 1.25rem; }
  .col-pages { grid-column: 2; grid-row: 1 / span 2; }
  .col-pages ul { grid-template-columns: minmax(0, 1fr); }
  .col-pages li a { min-height: 40px; }
  .col-index { grid-column: 1; grid-row: 1 / span 2; padding-top: 10px; border-bottom: 0; }
  .col-legal { grid-column: 3; grid-row: 2; padding-top: 28px; max-width: 52ch; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* design-time note for unwritten sections (skeleton and gallery only) */
.v5-pending { margin-top: 12px; padding: 12px 14px; border: 2px dashed var(--vb-border); border-radius: var(--r-s); color: var(--vb-text-muted); font-size: var(--t-data); }

/* phones: the FAQ questions and the support rows sit on the shelf as filled spines, each with the barcode mark, instead of
   ruled rows; the byline hangs under a shelf rule (22.10 comparative critique: .casino/cassino read alike at 390) */
@media (max-width: 639.98px) {
  .faq details, .rg li { --spine: rgba(255, 255, 255, .26); --spine-hi: var(--vb-text-muted); position: relative; background: var(--vb-surface-2); border: 0; border-radius: 2px; }
  .faq details { margin-top: 6px; padding: 0 14px 0 50px; }
  .faq details:last-of-type { border-bottom: 0; }
  .faq details[open] { --spine-hi: var(--vb-brand); }
  .faq details[open] > summary::before, .faq details[open] > p::before { display: none; }
  .faq details::before, .rg li::before {
    content: ""; position: absolute; left: 14px; top: 20px; width: 24px; height: 16px;
    background:
      linear-gradient(var(--spine), var(--spine)) 0 100% / 4px 60% no-repeat,
      linear-gradient(var(--spine-hi), var(--spine-hi)) 7px 100% / 5px 100% no-repeat,
      linear-gradient(var(--spine), var(--spine)) 15px 100% / 3px 80% no-repeat,
      linear-gradient(var(--spine), var(--spine)) 21px 100% / 3px 50% no-repeat;
  }
  .rg ul { border-top: 0; display: grid; gap: 6px; }
  .rg li { padding: 12px 14px 12px 50px; }
  .rg li::before { top: 16px; }
  .byline { border-top: 3px solid var(--vb-border); padding-top: 16px; }
  .by-ic { border-radius: 2px; }
}

/* ---------- v6 (22.10): the home on a wide screen, every passage with a partner ----------
   A data shelf whose prose stands alone (passages, then one table or one pair of studio cards) becomes an 8/4 split
   inside the data width: the passages keep the 52ch column and the data block stands beside them, like the atlas's
   studio asides. The RG close pairs its paragraph with its help list the same way. In a pair of plates the shorter
   plate is sticky inside the pair's row, so it travels beside the longer one instead of leaving a void under it. In the
   tool, the filtered catalogue reads in the left column and the counters' register stays beside it, sticky, to the end
   of the table. DOM order is unchanged everywhere. */
@media (min-width: 1200px) {
  :is(main:has(> .opening) > .shelf:not([data-tool]):has(> .passage + .catalogue:last-child):not(:has(> :is(.split, .studio-pair, .ledger, .finder, .poslist))),
      main:has(> .opening) > .shelf:not([data-tool]):has(> .studio-pair):not(:has(> :is(.split, .catalogue, .ledger, .finder, .poslist))),
      main:has(> .opening) > .rg:has(> p + ul)) {
    display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); grid-template-rows: auto repeat(10, auto) 1fr;
    column-gap: 3rem; align-items: start;
  }
  :is(main:has(> .opening) > .shelf:not([data-tool]):has(> .passage + .catalogue:last-child):not(:has(> :is(.split, .studio-pair, .ledger, .finder, .poslist))),
      main:has(> .opening) > .shelf:not([data-tool]):has(> .studio-pair):not(:has(> :is(.split, .catalogue, .ledger, .finder, .poslist))),
      main:has(> .opening) > .rg:has(> p + ul)) > * { grid-column: 1; min-width: 0; }
  :is(main:has(> .opening) > .shelf:not([data-tool]):has(> .passage + .catalogue:last-child):not(:has(> :is(.split, .studio-pair, .ledger, .finder, .poslist))),
      main:has(> .opening) > .shelf:not([data-tool]):has(> .studio-pair):not(:has(> :is(.split, .catalogue, .ledger, .finder, .poslist))),
      main:has(> .opening) > .rg:has(> p + ul)) > :is(.shelf-head, h2, h3) { grid-column: 1 / -1; }
  :is(main:has(> .opening) > .shelf:not([data-tool]):has(> .passage + .catalogue:last-child):not(:has(> :is(.split, .studio-pair, .ledger, .finder, .poslist))),
      main:has(> .opening) > .shelf:not([data-tool]):has(> .studio-pair):not(:has(> :is(.split, .catalogue, .ledger, .finder, .poslist))),
      main:has(> .opening) > .rg:has(> p + ul)) > :is(.catalogue, .studio-pair, ul) { grid-column: 2; grid-row: 2 / -1; max-width: none; }
  main:has(> .opening) > .shelf:not([data-tool]) > .studio-pair { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
  main:has(> .opening) > .shelf:not([data-tool]) > .catalogue { margin-top: 18px; }
  main:has(> .opening) > .shelf:not([data-tool]) > .catalogue > .tbl { margin-top: 0; }
  main:has(> .opening) > .rg > ul { margin-top: 0; }

  /* polish 2: a sticky grid item is held by the whole grid (main), not by its row, so a sticky plate rode over the
     shelves below it. Now the plate stretches to its pair's row and only its last block is sticky, inside the plate: the
     blocks above it scroll away as usual, the last one travels beside the longer plate and stops at the row's end. Only
     on a window tall enough for it; lower, the plates are static. */
  main:has(> .opening) > .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) { align-self: stretch; }

  main:has(> .opening) > .shelf[data-tool] { grid-template-rows: auto auto auto auto 1fr; }
  main:has(> .opening) > .shelf[data-tool] > .ledger { grid-row: 2 / -1; align-self: start; position: sticky; top: 24px; }
  main:has(> .opening) > .shelf[data-tool] > .catalogue { grid-column: 1; grid-row: 4; }
}

@media (min-width: 1200px) and (min-height: 880px) {
  main:has(> .opening) > .shelf:not([data-tool]):not(:has(> :is(.catalogue, .split, .studio-pair, .ledger, .poslist, .finder))) > :last-child:not(:first-child) { position: sticky; top: 24px; }
}

/* v6: the assembler wraps hyphen-joined H1 words in .nw so a heading never breaks at the hyphen */
.nw { white-space: nowrap; }