/*
Theme Name: Cardboard Reveries
Theme URI: https://www.cardboardreveries.com/
Description: Tabletop game design studio theme for cardboardreveries.com. Family-pattern GeneratePress child sharing bw-common. Presentation only — content model and behavior live in the cardboardreveries-core plugin.
Author: Bill Ward
Template: generatepress
Version: 0.5.3
*/

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&display=swap');

/* Palette */
:root {
    --cr-bg: #f3ede2;              /* warm cream — slightly deeper than v0.2 */
    --cr-bg-deep: #ebe3d3;          /* alternate section tint */
    --cr-card: #fffcf5;             /* soft warm card surface (not stark white) */
    --cr-fg: #2b2520;               /* warm near-black */
    --cr-muted: #7a7068;            /* warm gray */
    --cr-rule: #d9cfbe;             /* warm hairline */
    --cr-accent: #b9523a;           /* warm rust — primary action / active status */
    --cr-accent-deep: #8e3e2c;      /* rust on darker surfaces */
    --cr-accent-soft: #f1d8d0;      /* tinted hover / footer band */
    --cr-signed: #b89a4e;           /* warm gold — celebratory */
    --cr-quiet: #a8a4a0;            /* low-saturation for dormant/attic */
    --cr-serif: 'Lora', Georgia, 'Times New Roman', serif;
    --cr-header-height: 170px;     /* JS sets body padding-top dynamically; this is the
                                       fallback before JS runs and the shrink-to-min target */

    /* Left-nav appearance contract (consumed by bw-common/common.css).
       The leftnav is Journal-only and currently inert; this gives it the rust
       palette for when the Journal fills out. */
    --bw-header-height: var(--cr-header-height);
    --bw-nav-width: 200px;
    --bw-nav-bg: var(--cr-card);
    --bw-nav-border: var(--cr-rule);
    --bw-nav-input-bg: #fff;
    --bw-nav-focus-border: var(--cr-accent);
    --bw-nav-heading: var(--cr-accent);
    --bw-nav-fg: var(--cr-fg);
    --bw-nav-hover: var(--cr-accent);
    --bw-nav-muted: var(--cr-muted);
}

body {
    background:
        radial-gradient(at 20% 0%, rgba(185, 82, 58, 0.04), transparent 50%),
        radial-gradient(at 80% 100%, rgba(184, 154, 78, 0.04), transparent 50%),
        var(--cr-bg);
    background-attachment: fixed;
    color: var(--cr-fg);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.page-title, .page-title a,
.archive-title,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,
.cr-game-title,
.cr-casestudy-title,
.cr-journal-heading,
.cr-designs-heading,
.cr-pipeline-heading,
.cr-journal-post-title {
    font-family: var(--cr-serif);
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Section labels stay sans (re-asserted because they're now caught by the
   h2/h3 override above otherwise). */
.cr-section-heading {
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* Body content links — rust with hover underline */
.cr-game-body a,
.cr-casestudy-body a,
.cr-journal-post-excerpt a,
.cr-pipeline-body a,
.cr-designs-body a,
.cr-pipeline-coming-soon a {
    color: var(--cr-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--cr-accent-soft);
    transition: border-color 0.15s ease;
}

.cr-game-body a:hover,
.cr-casestudy-body a:hover,
.cr-journal-post-excerpt a:hover,
.cr-pipeline-body a:hover,
.cr-designs-body a:hover,
.cr-pipeline-coming-soon a:hover {
    border-bottom-color: var(--cr-accent);
}

/* Widen GP's main site container to the full viewport so that this
   theme's own 1200px content blocks (.cr-front-page, .cr-designs,
   .cr-page, etc., each with their own margin:auto) can be visibly
   centered with whitespace on both sides on wide viewports.
   GP's default is 1200px, which matches our content blocks and leaves
   no centering space inside. Padding lives on the inner blocks. */
.site.grid-container.container {
    max-width: 100%;
}

/* Sections on the front page stack with breathing room */
.cr-front-section {
    margin: 60px auto;
    max-width: 1200px;
    padding: 0 24px;
}

/* Main is intentionally width-unconstrained. Each page-template class
   on <main id="cr-main"> (e.g. .cr-page, .cr-pipeline, .cr-single-game)
   sets its own max-width + margin:auto, so they self-center. An #cr-main
   max-width here would win the specificity battle (#id beats .class) and
   defeat those per-page caps. */

/* Section labels — small department dividers. NOT in the serif universal
   rule (kept sans uppercase) but adds a rust accent to the underline so
   the divider feels intentional rather than incidental. */
.cr-section-heading {
    font-family: -apple-system, system-ui, sans-serif;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cr-muted);
    margin: 0 0 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cr-rule);
    position: relative;
}

.cr-section-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 40px;
    height: 2px;
    background: var(--cr-accent);
}

/* Game grid: 3-col layout via minmax(320px,1fr) auto-fill. At a 1152px
   parent (.cr-front-page-body inside .cr-front-page main, which is
   1200px max with 24px padding each side), 1152/320 = 3 columns ~384px
   each. Drops to 2 below ~960px, 1 below ~640px.

   No max-width or margin: auto here — the grid takes 100% of its parent
   body wrapper, which is the same width as the prose paragraphs above.
   That keeps the visible card row aligned with the text edges.

   Two-class selector (.cpt-grid.cr-grid-games) beats the cpt-grid
   plugin's .cpt-grid defaults on specificity, since the plugin
   stylesheet typically loads after this one (shortcode rendered from a
   template enqueues post-wp_head, prints in footer). */
.cpt-grid.cr-grid-games {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Case study grid: wider essay-teaser cards */
.cr-grid-casestudies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}

/* Card chrome (shared) — warm tinted surface, soft shadow instead of hard border */
.cr-card {
    background: var(--cr-card);
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(43, 37, 32, 0.04), 0 2px 6px rgba(43, 37, 32, 0.03);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.cr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(43, 37, 32, 0.06), 0 8px 24px rgba(43, 37, 32, 0.07);
    border-color: var(--cr-accent-soft);
}

.cr-card a.cr-card-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cr-card-image {
    aspect-ratio: 4/3;
    background: var(--cr-rule);
    overflow: hidden;
}

.cr-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cr-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cr-card-title {
    font-size: 1.15em;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
}

.cr-card-pitch {
    color: var(--cr-muted);
    font-size: 0.95em;
    line-height: 1.4;
    margin: 0;
}

.cr-card-spec {
    color: var(--cr-muted);
    font-size: 0.85em;
    margin-top: auto;
    padding-top: 8px;
}

/* Status indicator — colored dot + label, not a pill. */
.cr-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: -apple-system, system-ui, sans-serif;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--cr-muted);
    line-height: 1.4;
}

.cr-badge::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.cr-status-playtesting,
.cr-status-pitch-ready,
.cr-status-pitching      { color: var(--cr-accent); }
.cr-status-in-design,
.cr-status-shopping      { color: var(--cr-accent-deep); }
.cr-status-signed        { color: var(--cr-signed); }
.cr-status-dormant,
.cr-status-attic         { color: var(--cr-quiet); }

/* Right-align the status within the card body (flex column) */
.cr-card .cr-badge {
    align-self: flex-end;
}

/* ---------- Single Game template ---------- */

.cr-game-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.cr-game-header .cr-badge {
    align-self: flex-start;
}

.cr-game-title {
    font-size: 2.4em;
    line-height: 1.1;
    margin: 4px 0 8px;
}

.cr-game-hero {
    float: right;
    width: 50%;
    max-width: 50%;
    margin: 0 0 12px 24px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cr-rule);
}

.cr-game-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hero floats right; the title and all game text flow to its left. Contain the
   float at the end of the article, and start demos/journal full-width below. */
.cr-game::after {
    content: "";
    display: block;
    clear: both;
}

.cr-game-demos,
.cr-game-journal {
    clear: both;
}

/* Search results: featured-image thumbnail floated beside each entry. */
.cr-search .cr-journal-post { overflow: hidden; }
.cr-search-thumb { float: left; width: 160px; margin: 4px 18px 8px 0; }
.cr-search-thumb img { width: 100%; height: auto; display: block; border-radius: 4px; }
@media (max-width: 600px) {
    .cr-search-thumb { float: none; width: 100%; margin: 0 0 12px; }
}

.cr-game-pitch {
    font-size: 1.2em;
    line-height: 1.45;
    color: var(--cr-fg);
    margin: 0;
}

.cr-game-spec {
    color: var(--cr-muted);
    font-size: 0.95em;
    margin: 0;
}

.cr-game-comps,
.cr-game-cats,
.cr-game-mechs {
    color: var(--cr-muted);
    font-size: 0.95em;
    margin: 0;
}

.cr-label {
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    color: var(--cr-muted);
    margin-right: 4px;
}

.cr-game-body {
    line-height: 1.6;
    font-size: 1.05em;
    margin-bottom: 40px;
}

.cr-game-demos,
.cr-game-journal {
    margin: 40px 0;
}

.cr-game-demos ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cr-game-demos li {
    padding: 8px 0;
    border-bottom: 1px solid var(--cr-rule);
    color: var(--cr-muted);
}

.cr-journal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cr-journal-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cr-rule);
}

.cr-journal-list a {
    color: var(--cr-fg);
    text-decoration: none;
}

.cr-journal-list a:hover {
    color: var(--cr-accent);
}

.cr-journal-date {
    color: var(--cr-muted);
    font-size: 0.85em;
    white-space: nowrap;
}

/* ---------- Default page template (.cr-page) ---------- */

.cr-page-header {
    margin-bottom: 24px;
}

.cr-page-title {
    font-size: 2.4em;
    line-height: 1.1;
    margin: 0 0 16px;
}

.cr-page-hero {
    margin: 12px 0 28px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cr-rule);
}

.cr-page-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.cr-page-body {
    line-height: 1.6;
    font-size: 1.05em;
}

/* Leftnav: current-page highlight (added by functions.php) */
.bw-left-nav li.is-current > a {
    color: var(--cr-accent);
    font-weight: 600;
}

/* ---------- Single CaseStudy (v1 stub) ---------- */

.cr-casestudy-header {
    margin-bottom: 32px;
}

.cr-casestudy-title {
    font-size: 2.4em;
    line-height: 1.1;
    margin: 0 0 16px;
}

.cr-casestudy-hero {
    margin: 12px 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cr-rule);
}

.cr-casestudy-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.cr-casestudy-body {
    line-height: 1.6;
    font-size: 1.05em;
}

/* ---------- Journal index (home.php) ---------- */

.cr-journal-header {
    margin-bottom: 32px;
}

.cr-journal-heading {
    font-size: 2.4em;
    line-height: 1.1;
    margin: 0 0 16px;
}

.cr-journal-filter ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cr-journal-filter a {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.85em;
    color: var(--cr-muted);
    text-decoration: none;
    border: 1px solid var(--cr-rule);
    border-radius: 999px;
    transition: all 0.12s ease;
}

.cr-journal-filter a:hover {
    color: var(--cr-accent);
    border-color: var(--cr-accent);
}

.cr-journal-posts {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cr-journal-post {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cr-rule);
}

.cr-journal-post:last-child {
    border-bottom: none;
}

.cr-journal-post-title {
    font-size: 1.5em;
    margin: 0 0 8px;
    line-height: 1.2;
}

.cr-journal-post-title a {
    color: var(--cr-fg);
    text-decoration: none;
}

.cr-journal-post-title a:hover {
    color: var(--cr-accent);
}

.cr-journal-post-meta {
    color: var(--cr-muted);
    font-size: 0.85em;
    margin: 0 0 12px;
}

.cr-journal-post-meta a {
    color: var(--cr-muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--cr-rule);
}

.cr-journal-post-meta a:hover {
    color: var(--cr-accent);
    border-bottom-color: var(--cr-accent);
}

.cr-journal-post-cats {
    margin-left: 8px;
}

.cr-journal-post-excerpt {
    color: var(--cr-fg);
    line-height: 1.55;
}

.cr-journal-empty {
    color: var(--cr-muted);
    font-style: italic;
}

/* ---------- Page-template shell (shared by every main template) ---------- */

.cr-front-page,
.cr-designs,
.cr-page,
.cr-pipeline,
.cr-journal-index,
.cr-single-game,
.cr-single-casestudy {
    max-width: 1200px;
    margin: 40px auto 80px;
    padding: 0 24px;
}

.cr-designs-intro {
    margin-bottom: 32px;
}

/* Game taxonomy archive (game_category / game_mechanism term pages) — header
   above the reused card grid. Browse nav is the shared .bw-left-nav. */
.cr-archive-intro {
    margin-bottom: 32px;
}

.cr-archive-kicker {
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    color: var(--cr-muted);
    margin: 0 0 4px;
}

.cr-archive-heading {
    font-size: 2.4em;
    line-height: 1.1;
    margin: 0;
}

.cr-archive-desc {
    color: var(--cr-muted);
    line-height: 1.55;
    margin: 12px 0 0;
}

.cr-archive-count {
    color: var(--cr-muted);
    font-size: 0.95em;
    margin: 8px 0 0;
}

.cr-archive-empty {
    color: var(--cr-muted);
}


.cr-designs-heading {
    font-size: 2.4em;
    line-height: 1.1;
    margin: 0 0 16px;
}

.cr-designs-body {
    color: var(--cr-muted);
    line-height: 1.55;
}

.cr-designs-filter {
    margin: 24px 0 32px;
}

.cr-designs-filter ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

.cr-designs-filter a {
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.12s ease;
}

.cr-designs-filter a:hover { opacity: 1; }

.cr-designs-filter a.is-active {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.cr-filter-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: -apple-system, system-ui, sans-serif;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--cr-muted);
    line-height: 1.4;
}

.cr-filter-all.is-active {
    color: var(--cr-fg);
}

.cr-designs-empty {
    color: var(--cr-muted);
    font-style: italic;
}

/* ---------- Pipeline page template (v1 stub) ---------- */

.cr-pipeline-intro {
    margin-bottom: 32px;
}

.cr-pipeline-heading {
    font-size: 2.4em;
    line-height: 1.1;
    margin: 0 0 16px;
}

.cr-pipeline-body {
    color: var(--cr-fg);
    line-height: 1.55;
}

.cr-pipeline-coming-soon {
    margin: 40px 0;
    padding: 28px;
    background: var(--cr-card);
    border: 1px dashed var(--cr-rule);
    border-radius: 4px;
    color: var(--cr-muted);
    line-height: 1.55;
    font-style: italic;
}

.cr-pipeline-coming-soon a {
    color: var(--cr-accent);
    border-bottom: 1px solid var(--cr-accent-soft);
}

.cr-pipeline-coming-soon a:hover {
    border-bottom-color: var(--cr-accent);
}

/* ---------- Site footer (.site-info) ---------- */

.site-info {
    margin-top: 60px;
    padding: 24px;
    text-align: center;
    font-size: 0.85em;
    color: var(--cr-muted);
    border-top: 1px solid var(--cr-rule);
}

/* ---------- Front page: link to full catalog beneath Active Games ---------- */

.cr-front-all-designs {
    text-align: center;
    margin: 24px 0 0;
    font-family: var(--cr-serif);
    font-style: italic;
}

.cr-front-all-designs a {
    color: var(--cr-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--cr-accent-soft);
}

.cr-front-all-designs a:hover {
    border-bottom-color: var(--cr-accent);
}

/* ---------- Page-intro typography refinements ---------- */

.cr-designs-body,
.cr-pipeline-body {
    font-size: 1.08em;
    line-height: 1.6;
    color: var(--cr-muted);
}

/* ---------- Front page body wrapper ---------- */

.cr-front-page-body {
    color: var(--cr-fg);
}

.cr-front-page-body p {
    margin: 0 0 1em;
}

/* ---------- Card title — serif weight 600 ---------- */

.cr-card-title {
    font-family: var(--cr-serif);
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* ---------- Journal post excerpt — slightly larger reading size ---------- */

.cr-journal-post-excerpt {
    font-size: 1.02em;
    line-height: 1.6;
}

/* ---------- Status badge serif touch and tighter padding ---------- */

/* ---------- Filter button group spacing ---------- */

.cr-journal-filter ul {
    gap: 6px;
}

/* ---------- Demo-history list — italic accent line ---------- */

.cr-game-demos li {
    font-family: var(--cr-serif);
    font-style: italic;
    font-size: 1em;
}

.cr-game-demos li::before {
    content: '— ';
    color: var(--cr-accent);
    margin-right: 4px;
}

/* ---------- Reading widths — keep prose under 70ch for legibility ---------- */


/* ---------- Header — single integrated rust band ----------
   Brand + menu + search all live inside .site-header. The GP-rendered
   .main-navigation is hidden; our custom .cr-header-extras (rendered
   via generate_after_header_content in functions.php) sits absolute-
   positioned on the right side of the band.

   Brand sits bottom-aligned with an em-based 0.3em lift — same pattern
   as billward — so descenders stay above the rust/dark-rust stripe at
   any shrunk height. The em-base means the lift scales with the font
   as the JS animates font-size on scroll. */

.site-header {
    background: var(--cr-accent);
    border-bottom: 3px solid var(--cr-accent-deep);
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
}

.inside-header {
    max-width: none;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    /* Size to match .site-header (animated by JS) rather than overflow it.
       min-height: 0 prevents the CSS default from creating overflow when the
       header shrinks. height: 100% follows the JS-animated header height. */
    height: 100%;
    min-height: 0;
    padding: 0 32px;
    position: relative;
}

.main-title a, .site-title a {
    color: #fff !important;
    font-family: var(--cr-serif);
    font-weight: 700;
    font-size: 2.2em;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-decoration: none;
    position: relative;
    bottom: 0.3em;  /* em-based lift — scales with font as JS shrinks it */
}

.site-description {
    color: rgba(255,255,255,0.82);
    font-size: 0.95em;
    font-style: italic;
}

/* Hide GP's separate topnav — we render menu+search inside .site-header */
.main-navigation { display: none !important; }

/* Custom header extras: menu + search, pinned to the TOP-right of the rust
   band. The brand sits bottom-left (flex-end), so the two occupy separate rows
   and can't collide horizontally as the window narrows. When there's no room —
   narrow viewport, or the band scroll-shrinks — they collapse to the hamburger
   (see the collapse rules below). */
.cr-header-extras {
    position: absolute;
    right: 32px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 24px;
}
/* On Journal surfaces the left nav carries page links + search, so suppress the
   header's nav/search there to avoid duplication (.has-leftnav is set by
   bw_leftnav_enabled() only on those surfaces). The header band keeps the brand. */
.has-leftnav .cr-header-extras { display: none; }

.cr-header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
}

.cr-header-nav a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-family: var(--cr-serif);
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 0.005em;
}

.cr-header-nav a:hover,
.cr-header-nav .is-current a {
    color: var(--cr-accent-soft);
}

.cr-header-search input[type="search"] {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    color: #fff;
    padding: 4px 10px;
    font-size: 0.85em;
    width: 180px;
    display: block;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cr-header-search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.cr-header-search input[type="search"]:focus {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    outline: none;
}

/* Mobile hamburger toggle (hidden on desktop, shown < 768px) */
.cr-header-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 1.4em;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 3px;
}

.cr-header-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Collapse the inline header extras to a hamburger when there's no room for the
   top-row layout: a narrow viewport, OR the band scroll-shrinks (the shared JS
   sets html.bw-header-shrunk). The :not(.is-open) guard lets the open dropdown
   re-reveal them. */
@media (max-width: 768px) {
    .cr-header-mobile-toggle { display: block; }
    .cr-header-extras:not(.is-open) .cr-header-nav,
    .cr-header-extras:not(.is-open) .cr-header-search { display: none; }
    .main-title a, .site-title a { font-size: 1.6em; }
    /* Hero spans full width on narrow screens — a 50% float is too cramped. */
    .cr-game-hero { float: none; width: 100%; max-width: 100%; margin: 12px 0; }
}
html.bw-header-shrunk .cr-header-mobile-toggle { display: block; }
html.bw-header-shrunk .cr-header-extras:not(.is-open) .cr-header-nav,
html.bw-header-shrunk .cr-header-extras:not(.is-open) .cr-header-search { display: none; }

/* Open hamburger dropdown — applies whenever .is-open, regardless of which
   trigger (narrow or shrunk) collapsed the header. */
.cr-header-extras.is-open {
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    right: 0;
    width: 240px;
    max-width: 80vw;
    background: var(--cr-accent);
    padding: 16px 20px;
    border: 1px solid var(--cr-accent-deep);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 18px rgba(43, 37, 32, 0.22);
    gap: 16px;
}
.cr-header-extras.is-open .cr-header-nav ul { flex-direction: column; gap: 12px; }
.cr-header-extras.is-open .cr-header-search input[type="search"] { width: 100%; }

/* ── Footer action buttons (Comment/Edit) ──
   generate_footer_meta() in bw-common emits .cr-actions + .cr-comment-btn/
   .cr-edit-btn (class derived from BW_CSS_PREFIX='cr'). The other themes style
   their own prefix; this is the cardboardreveries equivalent, rust palette. */
.cr-actions {
    display: block;
    clear: both;
    text-align: center;
    margin-top: 8px;
}
.cr-comment-btn, .cr-edit-btn {
    display: inline-block;
    font-size: 0.78rem;
    text-decoration: none;
    padding: 3px 12px;
    border-radius: 2px;
    margin: 0 4px;
    color: #fff !important;
    background: var(--cr-accent);
    border: 1px solid var(--cr-accent);
}
.cr-comment-btn:hover, .cr-edit-btn:hover {
    background: var(--cr-accent-deep);
    border-color: var(--cr-accent-deep);
    color: #fff !important;
}
.single .cr-comment-btn { display: none; }