/* Backdoor Rupture skin — "facility dossier" on the Lobby.
   The page is the Lobby: a drop ceiling of tiles across the top (the header), striped yellow wallpaper below it,
   content in ceiling-tile panels, and the D-0066 personnel file as the one bright object on the page.
   Palette: ONLY the Lobby's colours (Projects/BackdoorRupture/AUTHORING.md → Identity), plus neutral black
   (rgb(0 0 0 / …)) for drop shadows only. No neon, no magenta/cyan.
   Fonts: Barlow Condensed (headings), IBM Plex Sans (body), IBM Plex Mono (dossier fields), Saira Stencil One ONLY on
   the D-0066 stamp. Motion: this skin adds no animation at all; the shared components' motion (loops,
   previews) ignores prefers-reduced-motion by the user's ruling. */

:root {
    /* The Lobby's palette (art direction: Lobby README "Colour targets" + "current textures", 30-levels lighting). */
    --br-carpet: #7c6535;
    --br-carpet-light: #ad9559;
    --br-damp: #5b4c29;
    --br-tile: #bfaf73;
    --br-grid: #76673c;
    --br-wall: #3d3511;
    --br-wall-shadow: #4d451e;
    --br-ceiling-dark: #2c2714;
    --br-carpet-dark: #29230d;
    --br-tube: #fafcef;
    --br-mercury: #61ff6b;
    --br-starter: #6b99ff;
    --br-amber: #ff8529;
    --br-sickly: #85c733;
    --br-coverall: #c0602a;

    /* Roles. Contrast (WCAG): ink on wall ≈ 10.3:1 (≈ 9.3:1 on the stripes), muted on wall ≈ 5.6:1 (≈ 5.0:1 on the
       stripes), amber on wall ≈ 5.0:1 (≈ 4.54:1 on the stripes: just above AA, so keep the stripes no darker),
       carpet-dark on tile ≈ 7.2:1, carpet-dark on coverall ≈ 3.7:1 (stamp only: large text). */
    --br-ink: color-mix(in srgb, var(--br-tube) 80%, var(--br-tile));
    --br-ink-muted: var(--br-tile);
    --br-link: var(--br-amber);
    --br-font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
    --br-font-body: "IBM Plex Sans", system-ui, sans-serif;
    --br-font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --br-font-stamp: "Saira Stencil One", "Barlow Condensed", sans-serif;
    --br-tile-size: 4.75rem;
    --br-frame: 3px solid var(--br-grid);
    /* Portrait clips keep caps (the user's rule): a row of three clips, and one clip beside text. */
    --br-clip-row: 42rem;
    --br-side-clip: 22rem;
    --br-entry-pad: clamp(1rem, 3vw, 1.75rem);
    /* Text spans the whole page (the user, 2026-10-23). */
    --br-measure: 100%;
    --br-gutter: 1rem;
    /* The shared page-width rule (80% of the window from 64rem up) plus this skin's gutters. */
    --br-page: calc(var(--blog-page-width) + 2 * var(--br-gutter));

    /* Shared component tokens (Areas/Blog/AUTHORING.md → Component CSS variables). */
    --blog-ink: var(--br-ink);
    --blog-ink-muted: var(--br-ink-muted);
    --blog-surface: var(--br-wall);
    --blog-surface-raised: var(--br-ceiling-dark);
    --blog-rule: color-mix(in srgb, var(--br-grid) 85%, transparent);
    --blog-accent: var(--br-amber);
    --blog-accent-ink: var(--br-carpet-dark);
    --blog-focus: var(--br-starter);
    --blog-radius: 2px;
    --blog-gap: 1.25rem;
    --blog-font-ui: var(--br-font-body);
    --blog-font-mono: var(--br-font-mono);
    --blog-media-backdrop: var(--br-carpet-dark);
    --blog-lightbox-backdrop: color-mix(in srgb, var(--br-carpet-dark) 94%, transparent);
    --blog-lightbox-ink: var(--br-tube);
    /* The D-0066 matrix has eight weapon columns: these minimums let it fit the 60% page from a 1280 px window (768 px)
       without scrolling sideways; on wider screens the tiles grow up to the shared cap. */
    --blog-matrix-action-width: 6.5rem;
    --blog-matrix-tile-min: 4.5rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--br-wall);
}

/* The wallpaper: the lit wall with faint vertical stripes in its shadowed tone. Kept faint so muted text on it still
   clears AA. */
body.br {
    margin: 0;
    min-height: 100vh;
    background-color: var(--br-wall);
    background-image: repeating-linear-gradient(90deg,
        transparent 0 2.25rem,
        color-mix(in srgb, var(--br-wall-shadow) 45%, transparent) 2.25rem 2.5rem,
        transparent 2.5rem 2.75rem,
        color-mix(in srgb, var(--br-wall-shadow) 45%, transparent) 2.75rem 3rem);
    color: var(--br-ink);
    font: 400 1.0625rem/1.65 var(--br-font-body);
    -webkit-font-smoothing: antialiased;
}

.br a {
    color: var(--br-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.br a:hover {
    text-decoration-thickness: 2px;
}

.br a:focus-visible,
.br summary:focus-visible {
    outline: 2px solid var(--blog-focus);
    outline-offset: 2px;
}

/* On the ceiling tiles the starter blue is too faint (1.3:1); ring the nav in the carpet's dark brown (7.2:1). */
.br-ceiling a:focus-visible {
    outline-color: var(--br-carpet-dark);
}

/* The shared skip link (blog-components.css places it), in the ceiling's colours. */
.br a.blog-skip {
    background: var(--br-tile);
    color: var(--br-carpet-dark);
    font-family: var(--br-font-body);
}

.br h1,
.br h2,
.br h3 {
    font-family: var(--br-font-head);
    font-weight: 700;
    line-height: 1.05;
    color: var(--br-tube);
    text-wrap: balance;
}

.br h2 {
    margin: 3rem 0 0.75rem;
    font-size: 2rem;
    font-weight: 600;
}

.br h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.375rem;
    font-weight: 600;
}

.br p {
    margin: 0 0 1em;
}

.br img,
.br video {
    max-width: 100%;
}

/* ---- The ceiling: the header is a drop ceiling of tiles on a T-bar grid, with one lit tube ---- */

/* Sticky (data-blog-sticky-header in the layout; blog-components.css positions it), so it stays overhead while the
   page scrolls. No position here: it would override the sticky one. */
.br-ceiling {
    min-height: calc(var(--br-tile-size) + 1px);
    overflow: hidden;
    background-color: var(--br-tile);
    background-image:
        linear-gradient(to right, var(--br-grid) 3px, transparent 3px),
        linear-gradient(to bottom, var(--br-grid) 3px, transparent 3px);
    background-size: var(--br-tile-size) var(--br-tile-size);
    /* The grid is anchored on the right edge, so the tube (placed from the right) always sits between T-bars. */
    background-position: right -2px;
    border-bottom: 3px solid var(--br-grid);
    box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 0.55);
    color: var(--br-carpet-dark);
}

/* The tube: one fixture across two tiles, the second and third from the right, clear of the nav on the left.
   Static light, no flicker. */
.br-ceiling::before {
    content: "";
    position: absolute;
    top: calc(var(--br-tile-size) * 0.3 + 1px);
    right: var(--br-tile-size);
    width: calc(var(--br-tile-size) * 2 - 3px);
    height: calc(var(--br-tile-size) * 0.4);
    background: var(--br-tube);
    box-shadow: 0 0 1.75rem 0.4rem color-mix(in srgb, var(--br-tube) 55%, transparent);
    pointer-events: none;
}

/* Narrow screens: the nav wraps across the tiles, so the tube would sit on it. Only the grid remains. */
@media (max-width: 47.99rem) {
    .br-ceiling::before {
        display: none;
    }
}

.br-ceiling-inner {
    position: relative;
    max-width: var(--br-page);
    margin: 0 auto;
    padding: 1.4rem var(--br-gutter) 1rem;
}

.br-ceiling .blog-nav {
    font-family: var(--br-font-head);
    font-size: 1.25rem;
    font-weight: 600;
}

.br-ceiling .blog-nav-list {
    gap: 0.25rem 0.5rem;
}

.br-ceiling .blog-nav a {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background: var(--br-tile);
    color: var(--br-carpet-dark);
}

.br-ceiling .blog-nav a[aria-current] {
    background: var(--br-carpet-dark);
    color: var(--br-tile);
    text-decoration: none;
}

.br-ceiling .blog-nav-item--blog a {
    font-weight: 400;
}

/* Phones: the ceiling is sticky, so keep it one row of nav and not a fifth of the screen. */
@media (max-width: 30rem) {
    .br-ceiling-inner {
        padding-top: 0.9rem;
        padding-bottom: 0.7rem;
    }

    .br-ceiling .blog-nav {
        font-size: 1.0625rem;
    }

    .br-ceiling .blog-nav-list {
        gap: 0.25rem 0.2rem;
    }

    .br-ceiling .blog-nav a {
        padding: 0.1rem 0.4rem;
    }
}

/* ---- Page frame ---- */

.br-main {
    max-width: var(--br-page);
    margin: 0 auto;
    padding: 2.5rem var(--br-gutter) 3rem;
}

.br-lede {
    max-width: var(--br-measure);
    font-size: 1.1875rem;
    color: var(--br-ink);
}

.br-footer {
    max-width: var(--br-page);
    margin: 0 auto;
    padding: 0 var(--br-gutter) 2.5rem;
}

.br-footer .blog-credits {
    margin-top: 0;
    color: var(--br-ink-muted);
}

/* ---- Ceiling-tile panels: the site's one container. A dark tile in the grid's T-bar frame ---- */

.br-panel {
    padding: 1.25rem 1.25rem 1rem;
    border: var(--br-frame);
    background: var(--br-ceiling-dark);
}

.br-panel > :last-child {
    margin-bottom: 0;
}

.br-panel h2,
.br-panel h3 {
    margin-top: 0;
}

/* ---- Redaction bars: DECORATIVE and EMPTY. Real text never sits under a bar (the page source is public). ---- */

.br-redact {
    display: inline-block;
    height: 0.8em;
    vertical-align: -0.05em;
    background: currentColor;
}

.br-redact--s {
    width: 2.5em;
}

.br-redact--m {
    width: 4.5em;
}

.br-redact--l {
    width: 7em;
}

/* ---- Status lamp: a pre-alpha badge with one lit indicator ---- */

.br-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--br-grid);
    background: var(--br-carpet-dark);
    font: 500 0.9375rem/1.3 var(--br-font-mono);
    color: var(--br-ink);
}

.br-status-lamp {
    flex: none;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--br-mercury);
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--br-mercury) 70%, transparent);
}

/* ---- Intro ----
   The one bold move: the key art. The name, then one big honest picture across the whole page (concept art, and its
   caption says so), then the pitch, the hook line and the way on. The real model follows right after it. */

.br-hero-title {
    margin: 0 0 1rem;
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 0.92;
    letter-spacing: 0.005em;
    overflow-wrap: anywhere;
}

.br-hero .br-key {
    margin: 0;
}

.br-key .blog-media-frame {
    border: var(--br-frame);
}

.br-hero-pitch {
    margin: 1.25rem 0 0.75rem;
    font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
    line-height: 1.5;
}

.br-hero-hook {
    margin: 0 0 1.25rem;
    font-family: var(--br-font-head);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--br-tube);
    text-wrap: balance;
}

.br-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

/* The premise beside the real model. Text takes all the room the capped portrait clip leaves. */
.br-wake {
    display: grid;
    gap: 2rem;
    align-items: start;
    margin-top: 3rem;
}

.br-premise {
    max-width: var(--br-measure);
    font-size: 1.125rem;
}

.br-wake .br-wake-media {
    width: 100%;
    max-width: var(--br-side-clip);
    margin: 0;
    justify-self: center;
}

.br-wake-media .blog-media-frame {
    border: var(--br-frame);
}

.br-tone {
    margin: 2.5rem 0;
    padding: 0;
    font-family: var(--br-font-head);
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--br-tube);
}

.br-tone p {
    margin: 0;
}

.br-tone p + p {
    color: var(--br-ink-muted);
}

.br-isnt {
    display: grid;
    gap: 1rem;
}

.br-isnt ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.br-isnt li {
    padding: 0.45rem 0;
    border-top: 1px solid color-mix(in srgb, var(--br-grid) 60%, transparent);
}

.br-isnt li:first-child {
    border-top: 0;
}

.br-isnt strong {
    font-family: var(--br-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--br-tube);
}

.br-isnt-list--not li {
    color: var(--br-ink-muted);
}

.br-feels {
    margin: 0;
    display: grid;
    gap: 0.5rem 1.5rem;
}

.br-feels div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    align-items: baseline;
}

.br-feels dt {
    font-family: var(--br-font-head);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--br-tube);
}

.br-feels dd {
    margin: 0;
    color: var(--br-ink-muted);
}

.br-onward {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The amber chip link: the intro's onward links and the D-0066 jump list (smaller there). */
.br-onward a,
.br .br-jump a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid var(--br-amber);
    font-family: var(--br-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
}

.br .br-jump a {
    padding: 0.25rem 0.75rem;
    font-size: 1.125rem;
}

.br-onward a:hover,
.br .br-jump a:hover {
    background: var(--br-amber);
    color: var(--br-carpet-dark);
}

/* Three real clips in a row. Portrait, so the row keeps a cap (the user's rule for portrait clips). */
.br-moves,
.br-post-clips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: var(--br-clip-row);
}

.br .br-moves .blog-media {
    margin: 0;
}

.br-moves .blog-media-frame {
    border: 2px solid var(--br-grid);
}

/* One frame shape for the row, so the captions line up (the clips differ slightly in height). Enlarged, a clip leaves
   the row and shows whole. */
.br-moves .blog-video,
.br-post-clips .blog-video {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.br-moves .blog-media-caption,
.br-post-clips .blog-media-caption {
    font-size: 0.8125rem;
    line-height: 1.3;
}

.br-post-clips {
    margin: 0.5rem auto 1.5rem;
}

.br-moves + .br-note {
    margin-top: 1rem;
}

/* A smaller Play button on these narrow clips, so it does not cover him. */
.br-moves .blog-player-start--center,
.br-post-clips .blog-player-start--center {
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0 -1.25rem;
}

.br-moves .blog-player-start--center .blog-player-glyph,
.br-post-clips .blog-player-start--center .blog-player-glyph {
    font-size: 1.05rem;
}

/* ---- Link cards: the intro's doors and the section indexes. A ceiling tile with a picture of what is behind it ---- */

.br-doors {
    display: grid;
    gap: 1.25rem;
    margin: 3rem 0 0;
}

.br-door,
.br-card {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1rem;
    border: var(--br-frame);
    background: var(--br-ceiling-dark);
}

.br a.br-door,
.br a.br-card {
    color: var(--br-ink);
    text-decoration: none;
}

/* A card with no media keeps its text in the one full-width column. */
.br .br-door--text-only,
.br .br-card--text-only {
    grid-template-columns: minmax(0, 1fr);
}

.br a.br-door:hover,
.br a.br-card:hover {
    border-color: var(--br-amber);
}

/* The thumbnail box: a 3:4 crop, the top of the picture kept (that is where his head is). */
.br-door-thumb,
.br-card-thumb {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 2px solid var(--br-grid);
    background: var(--br-carpet-dark);
}

.br-door-thumb .blog-thumb,
.br-card-thumb .blog-thumb {
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.br-door-text > span {
    display: block;
}

.br-door-title {
    margin-bottom: 0.25rem;
    font-family: var(--br-font-head);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--br-amber);
}

.br-cards {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.br .br-card-title {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
    color: var(--br-tube);
}

.br a.br-card:hover .br-card-title {
    color: var(--br-amber);
}

.br-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    margin: 0 0 0.5rem;
    font: 400 0.875rem/1.4 var(--br-font-mono);
    color: var(--br-ink-muted);
}

/* "How it was made": the mark on the technical posts. */
.br-card-mark {
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--br-amber);
    color: var(--br-amber);
}

.br .br-card-summary {
    margin: 0;
}

/* The engine systems: folded away under the Powered by panel. */
.br-engine summary {
    padding: 0.75rem 0;
    color: var(--br-link);
    font-weight: 600;
    cursor: pointer;
}

/* "Powered by EngineD": the shared panel, then the systems the game leans on. */
.br-powered {
    margin: 3rem 0 0;
}

.br .blog-panel {
    margin: 0;
    border-left-width: 6px;
    background: var(--br-ceiling-dark);
}

.br .blog-panel-title {
    font-family: var(--br-font-head);
    font-size: 1.5rem;
    color: var(--br-tube);
}

.br .blog-panel-text {
    color: var(--br-ink-muted);
}

.br .blog-used-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 0;
    margin: 0;
    padding: 0.25rem 1rem 1rem calc(1rem + 6px);
    list-style: none;
    background: var(--br-ceiling-dark);
}

.br .blog-used-pages li {
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-top: 1px solid color-mix(in srgb, var(--br-grid) 60%, transparent);
}

.br .blog-used-pages a {
    font-weight: 600;
}

.br .blog-used-pages span {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--br-ink-muted);
}

/* ---- The personnel file (wiki entry): the one bright object on the page ---- */

.br-file-head h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(2.75rem, 8vw, 5rem);
    line-height: 0.95;
}

/* The top: one grid. Phones stack the jump list, the clip, the file card and the body; wider screens put the clip on
   the left and the card, the body and the jump list beside it (see "Wider screens"). */
.br-file-top {
    display: grid;
    grid-template-areas: "jump" "media" "dossier" "body";
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.br-file-top > .br-jump {
    grid-area: jump;
}

.br-file-top > .br-dossier {
    grid-area: dossier;
}

.br-file-top > .br-file-body {
    grid-area: body;
}

/* Portrait clip: capped like the intro's, so a wide page does not make it taller than the screen. */
.br-file-top > .blog-media {
    grid-area: media;
    width: 100%;
    max-width: 34rem;
    margin: 0;
    justify-self: center;
}

.br-file-body > h2:first-child {
    margin-top: 0;
}

.br-file-body h2 {
    margin-top: 1.5rem;
    font-size: 1.625rem;
}

.br-file-body > :last-child {
    margin-bottom: 0;
}

/* In-page jumps: three separate chips in the heading face. */
.br-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.br-file-top .blog-media-frame {
    border: var(--br-frame);
}

.br-dossier {
    position: relative;
    margin: 0;
    padding: 1.25rem 1.25rem 1.1rem;
    background: var(--br-tile);
    color: var(--br-carpet-dark);
    box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.7);
}

.br-dossier a {
    color: var(--br-carpet-dark);
}

.br-dossier-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid var(--br-carpet-dark);
}

.br-dossier-kind {
    margin: 0;
    font: 500 0.875rem/1.4 var(--br-font-mono);
}

.br-dossier-kind .br-redact {
    margin-left: 0.4em;
}

/* The stamp: the coverall's own stencil, on a swatch of the coverall. The only place Saira Stencil One is used. */
.br-stamp {
    display: inline-block;
    padding: 0.2rem 0.65rem 0.1rem;
    background: var(--br-coverall);
    color: var(--br-carpet-dark);
    font-family: var(--br-font-stamp);
    font-size: 2.25rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    transform: rotate(-2deg);
}

.br-dossier-fields {
    display: grid;
    margin: 0;
}

.br-dossier-fields div {
    display: grid;
    grid-template-columns: minmax(7.5rem, 34%) 1fr;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--br-grid) 70%, transparent);
}

.br-dossier-fields div:last-child {
    border-bottom: 0;
}

.br-dossier-fields dt {
    font: 500 0.8125rem/1.5 var(--br-font-mono);
}

.br-dossier-fields dd {
    margin: 0;
    font: 400 0.9375rem/1.5 var(--br-font-mono);
}

.br-file-body {
    max-width: var(--br-measure);
}

.br-concepts {
    display: grid;
    gap: 1.25rem;
}

.br-concepts .blog-media {
    margin: 0;
}

.br-compares {
    display: grid;
    gap: 0.5rem 2rem;
}

.br-compares .blog-compare {
    margin: 1rem 0;
}

.br-compares .blog-compare-tag {
    font-family: var(--br-font-mono);
}

.br-note {
    max-width: var(--br-measure);
    color: var(--br-ink-muted);
}

/* ---- Development: behind the scenes, "above the ceiling" ----
   A dark panel under a strip of the ceiling's T-bar grid: the same tiles as the header, seen from the other side.
   The stages are a real sequence (concept → turnarounds → model → hand work → animation → the earlier model), so they
   carry numbers: a CSS counter in the heading face, on a rail that ties the stages together. */

.br-dev {
    margin-top: 3.5rem;
    border: var(--br-frame);
    background: var(--br-carpet-dark);
}

.br-dev::before {
    content: "";
    display: block;
    height: 1.5rem;
    background-color: var(--br-ceiling-dark);
    background-image:
        linear-gradient(to right, var(--br-grid) 3px, transparent 3px),
        linear-gradient(to bottom, var(--br-grid) 3px, transparent 3px);
    background-size: var(--br-tile-size) var(--br-tile-size);
    border-bottom: 3px solid var(--br-grid);
}

.br-dev-head {
    padding: 1.25rem var(--br-gutter) 0;
}

.br-dev-head h2 {
    margin-top: 0;
}

.br-dev-steps {
    counter-reset: br-dev-step;
    margin: 0;
    padding: 0.5rem var(--br-gutter) 1.5rem;
    list-style: none;
}

.br-dev-step {
    counter-increment: br-dev-step;
    position: relative;
    padding: 0 0 2rem 3.25rem;
}

/* The rail between the numbers. */
.br-dev-step::after {
    content: "";
    position: absolute;
    top: 2.6rem;
    bottom: 0.4rem;
    left: 1.05rem;
    width: 2px;
    background: var(--br-grid);
}

.br-dev-step:last-child {
    padding-bottom: 0;
}

.br-dev-step:last-child::after {
    display: none;
}

.br-dev-step-title {
    margin: 0 0 0.6rem;
    font-size: 1.625rem;
}

.br-dev-step-title::before {
    content: counter(br-dev-step);
    position: absolute;
    top: -0.1rem;
    left: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid var(--br-amber);
    color: var(--br-amber);
    font-size: 1.375rem;
    line-height: 2rem;
    text-align: center;
}

/* A step's body fills the Development panel (the turnaround sheet, the comparisons, the split figure use the width).
   Its text follows the shared reading column (width and type grow with the screen); the list of fixes flows into two
   columns on wide screens. */
.br-dev-step-body > p {
    max-width: var(--blog-column-width);
    font-size: var(--blog-column-font);
}

.br-dev .blog-media {
    margin: 0;
}

.br-dev .blog-media-frame {
    border: var(--br-frame);
}

.br-dev-fig--tall {
    max-width: 30rem;
}

/* The turnaround sheet: four views side by side, two by two on phones. */
.br-dev-sheet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.br-dev-fixes {
    max-width: var(--blog-column-width);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--blog-column-font);
}

.br-dev-fixes li {
    padding: 0.45rem 0;
    border-top: 1px solid color-mix(in srgb, var(--br-grid) 60%, transparent);
    break-inside: avoid;
}

@media (min-width: 100rem) {
    .br-dev-fixes {
        max-width: none;
        columns: 2;
        column-gap: 3rem;
    }
}

.br-dev-fixes li:first-child {
    border-top: 0;
}

.br-dev-fixes strong {
    font-family: var(--br-font-head);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--br-tube);
}

.br-dev .br-compares .blog-compare {
    margin: 0.5rem 0 1rem;
}

/* ---- Component skin details ---- */

.br .blog-media-caption,
.br .blog-compare-note {
    color: var(--br-ink-muted);
}

.br .blog-chip {
    font-family: var(--br-font-mono);
    font-size: 0.8125rem;
}

.br .blog-matrix-table thead th,
.br .blog-matrix-action {
    font-family: var(--br-font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--br-tube);
}

/* The sticky action column sits over the wallpaper: give it the wall's solid colour. */
.br .blog-matrix-action {
    background: var(--br-wall);
}

/* Desktop: headers wrap instead of widening their column. The shared matrix rules spread the eight weapon columns
   over the page width (tiles grow with it, up to a cap; the scroll region stays as the fallback). Phones use the
   shared stacked layout. */
@media (min-width: 40.0625rem) {
    .br .blog-matrix-table thead th {
        white-space: normal;
        vertical-align: bottom;
    }

    .br .blog-matrix-action {
        max-width: var(--blog-matrix-action-width);
        white-space: normal;
    }
}

.br .blog-section-header h1,
.br .blog-entry-title {
    margin: 0 0 0.5rem;
    font-size: clamp(2.5rem, 7vw, 4.25rem);
    line-height: 0.95;
}

/* Section indexes and posts sit in the shared reading column (.blog-column), which sets their width: no measure
   here, or the text would stay narrow and left inside it. */
.br .blog-section-summary {
    color: var(--br-ink-muted);
}

.br .blog-entry-date {
    font-family: var(--br-font-mono);
    font-size: 0.875rem;
    color: var(--br-ink-muted);
}

.br .blog-entry-header {
    margin-bottom: 1.75rem;
}

/* Long text on the striped wallpaper blends in, so a post's body sits on a ceiling tile (the skin's one container,
   like .br-panel): the dark tile in its T-bar frame, as wide as the reading column (the whole page). */

.br .blog-entry-body {
    padding: var(--br-entry-pad) var(--br-entry-pad) calc(var(--br-entry-pad) * 0.6);
    border: var(--br-frame);
    background: var(--br-ceiling-dark);
}

.br .blog-entry-body > :last-child {
    margin-bottom: 0;
}

/* Media inside a post: the clips are portrait, so cap the width or one clip fills two screens. */
.br .blog-entry-body .blog-media {
    max-width: 26rem;
    margin-inline: auto;
}

.br .blog-entry-body .blog-media-frame {
    border: var(--br-frame);
}

/* A row of clips in a post (.br-post-clips): each clip takes its third of the capped row. */
.br .blog-entry-body .br-post-clips .blog-media {
    max-width: none;
    margin: 0;
}

.br .blog-entry-body .br-post-clips .blog-media-frame {
    border-width: 2px;
}

/* An earlier-vs-current slider in a post: two portrait clips, capped like a row of clips. */
.br .blog-entry-body .blog-compare {
    max-width: var(--br-clip-row);
    margin-inline: auto;
}

/* Tables and diagrams in posts: T-bar rules, the heading face for headers; a diagram is a dark tile that scrolls
   sideways on its own rather than widening the page. */
.br .blog-entry-body table {
    width: 100%;
    margin: 0.25rem 0 1.5rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.br .blog-entry-body th,
.br .blog-entry-body td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--br-grid) 60%, transparent);
    text-align: left;
    vertical-align: top;
}

.br .blog-entry-body th {
    border-bottom: 2px solid var(--br-grid);
    font-family: var(--br-font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--br-tube);
}

.br .blog-entry-body pre {
    margin: 0.25rem 0 1.5rem;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    border: var(--br-frame);
    background: var(--br-carpet-dark);
    font: 400 0.875rem/1.6 var(--br-font-mono);
    color: var(--br-ink);
}

.br .blog-entry-body pre code {
    font: inherit;
    background: none;
}

/* ---- Wider screens ---- */

@media (min-width: 52rem) {
    :root {
        --br-gutter: 2rem;
    }

    .br-wake {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--br-side-clip));
        gap: 3rem;
    }

    /* The comparable games as one row of three. */
    .br-feels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .br-feels div {
        display: block;
    }

    .br-feels dd {
        margin-top: 0.25rem;
    }

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

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

    .br-card {
        grid-template-columns: 9rem minmax(0, 1fr);
    }

    .br-file-top {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "media dossier"
            "media body"
            "media jump"
            "media .";
        column-gap: 3rem;
    }

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

    .br-concepts > :first-child {
        grid-column: 1 / -1;
    }

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

    .br-dev-sheet {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .br-dev-step {
        padding-left: 4rem;
    }

    /* A single tall figure sits beside its text instead of under it. */
    .br-dev-step-body--split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, clamp(20rem, 22vw, 30rem));
        gap: 2rem;
        align-items: start;
    }
}

@media (max-width: 30rem) {
    .br-dossier-fields div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .br-stamp {
        font-size: 1.875rem;
    }
}

/* Motion: this skin adds no animation, transition or flicker (the tube is static light). */