:root {
            /* Atelier Kommune � Produktv�g lystema */
            --paper: #f4efe6;
            --paper-dark: #e8e0d2;
            --ink: #171311;
            --ink-soft: #6b5e52;
            --accent: #c96a3d;
            --accent-dim: rgba(201, 106, 61, 0.65);
            --accent-muted: rgba(201, 106, 61, 0.1);
            --primary: #2d7a78;
            --primary-hover: #245f5d;
            --primary-muted: rgba(45, 122, 120, 0.16);
            --secondary: #d7a928;
            --accent-pink: #e77c6b;
            --red: #c44a2f;
            --yellow: #d7a928;
            --green: #5a9a42;
            --blue: #2d7a78;
            --rose: #e77c6b;
            --white: #fff8ee;
            --line: rgba(23, 19, 17, 0.12);
            --shadow: 0 20px 40px rgba(31, 22, 12, 0.14);
            --shadow-card: 0 8px 24px rgba(201, 106, 61, 0.08), 0 0 0 1px rgba(201, 106, 61, 0.12);
            --font-display: "Public Sans", Impact, Haettenschweiler, "Arial Black", sans-serif;
            --font-body: "Public Sans", "Trebuchet MS", "Gill Sans", sans-serif;
            --font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
        }

        * {
            box-sizing: border-box;
        }

        [hidden] {
            display: none !important;
        }

        html {
            scroll-behavior: smooth;
        }

        /* ── A11y: reduced-motion + focus-visible + disabled ── */
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        a:focus-visible,
        button:focus-visible,
        .chip-button:focus-visible,
        .filter-chip:focus-visible,
        .type-filter-chip:focus-visible,
        .access-filter-chip:focus-visible,
        .release-type-filter-chip:focus-visible,
        .genre-filter-chip:focus-visible,
        .tone-filter-chip:focus-visible,
        .complexity-filter-chip:focus-visible,
        .brand-home-link:focus-visible,
        .project-card:focus-visible,
        .poster:focus-visible {
            outline: 3px solid var(--primary);
            outline-offset: 3px;
        }

        .chip-button:disabled,
        .filter-chip:disabled,
        .type-filter-chip:disabled,
        .access-filter-chip:disabled,
        .release-type-filter-chip:disabled,
        .genre-filter-chip:disabled,
        .tone-filter-chip:disabled,
        .complexity-filter-chip:disabled,
        .nav-links button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
            box-shadow: 4px 4px 0 var(--ink);
        }

        body {
            margin: 0;
            color: var(--ink);
            font-family: var(--font-body);
            background:
                radial-gradient(circle at 12% 18%, rgba(201, 106, 61, 0.08), transparent 24%),
                radial-gradient(circle at 88% 22%, rgba(45, 122, 120, 0.1), transparent 26%),
                radial-gradient(circle at 70% 82%, rgba(215, 169, 40, 0.08), transparent 20%),
                linear-gradient(180deg, #f8f2e8 0%, var(--paper) 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: 0.3;
            background-image:
                linear-gradient(rgba(23, 19, 17, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(23, 19, 17, 0.04) 1px, transparent 1px);
            background-size: 24px 24px;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 92%);
        }

        button,
        input,
        textarea,
        select {
            font: inherit;
        }

        button {
            border: 0;
            background: none;
            cursor: pointer;
        }

        button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
        }

        .page-shell {
            width: min(1320px, calc(100% - 28px));
            max-width: 100%;
            margin: 0 auto;
            padding: 18px 0 110px;
        }

        .site-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 18px;
            flex-wrap: wrap;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .brand-mark {
            width: 64px;
            height: 64px;
            display: grid;
            place-items: center;
            border-radius: 18px;
            background: var(--ink);
            color: var(--white);
            font-family: var(--font-display);
            font-size: 1.5rem;
            letter-spacing: 0.08em;
            box-shadow: var(--shadow);
            transform: rotate(-4deg);
        }

        .brand-copy strong {
            display: block;
            font-size: 1rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .brand-copy span {
            display: block;
            color: var(--ink-soft);
            font-size: 0.92rem;
        }

        .brand-reviewed {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            margin-top: 0.35rem;
            padding: 2px 8px;
            border-radius: 999px;
            background: rgba(45, 122, 120, 0.1);
            border: 1.5px solid rgba(45, 122, 120, 0.25);
            color: #245f5d;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            width: fit-content;
        }

        .brand-reviewed span[aria-hidden="true"] {
            color: var(--primary);
            font-size: 0.85em;
        }

        .brand-home-link {
            display: none;
            margin-left: auto;
            padding: 8px 12px;
            color: var(--ink-soft);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 140ms ease;
        }

        .brand-home-link:hover {
            color: var(--ink);
        }

        @media (min-width: 768px) {
            .brand-home-link {
                display: inline;
            }
        }

        .nav-links {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .header-safety {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
            padding: 8px 12px;
            border-radius: 16px;
            border: 2px solid var(--ink);
            background: color-mix(in srgb, var(--white) 90%, #f7e3a4);
            box-shadow: 4px 4px 0 var(--ink);
            cursor: pointer;
            transition: transform 140ms ease, box-shadow 140ms ease;
            text-align: left;
        }

        .header-safety:hover {
            transform: translate(-2px, -2px);
            box-shadow: 7px 7px 0 var(--ink);
        }

        .header-safety:focus-visible {
            outline: 3px solid #2d9856;
            outline-offset: 2px;
        }

        .header-safety[data-state="ok"] {
            background: color-mix(in srgb, var(--white) 86%, #c4efb2);
        }

        .header-safety[data-state="warn"] {
            background: color-mix(in srgb, var(--white) 86%, #f7e3a4);
        }

        .header-safety[data-state="danger"] {
            background: color-mix(in srgb, var(--white) 86%, #f2b3b3);
        }

        .header-safety__dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid var(--ink);
            background: #d6a31e;
            box-shadow: 0 0 0 2px rgba(23, 19, 17, 0.12);
            flex-shrink: 0;
        }

        .header-safety[data-state="ok"] .header-safety__dot {
            background: #2d9856;
        }

        .header-safety[data-state="warn"] .header-safety__dot {
            background: #d6a31e;
        }

        .header-safety[data-state="danger"] .header-safety__dot {
            background: #bc3f3f;
        }

        .header-safety__text {
            display: grid;
            gap: 1px;
            line-height: 1.2;
        }

        .header-safety__text strong {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .header-safety__text small {
            font-size: 0.72rem;
            color: var(--ink-soft);
        }

        .nav-links button,
        .chip-button,
        .filter-chip,
        .type-filter-chip,
        .access-filter-chip,
        .release-type-filter-chip,
        .genre-filter-chip,
        .tone-filter-chip,
        .complexity-filter-chip {
            min-height: 44px;
            padding: 10px 16px;
            border: 2px solid var(--ink);
            border-radius: 999px;
            background: var(--white);
            color: var(--ink);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-decoration: none;
            box-shadow: 4px 4px 0 var(--ink);
            transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
        }

        .nav-links button:hover,
        .nav-links button.active,
        .chip-button:hover,
        .filter-chip:hover,
        .filter-chip.active,
        .type-filter-chip:hover,
        .type-filter-chip.active,
        .access-filter-chip:hover,
        .access-filter-chip.active,
        .release-type-filter-chip:hover,
        .release-type-filter-chip.active,
        .genre-filter-chip:hover,
        .genre-filter-chip.active,
        .tone-filter-chip:hover,
        .tone-filter-chip.active,
        .complexity-filter-chip:hover,
        .complexity-filter-chip.active {
            transform: translate(-2px, -2px);
            box-shadow: 7px 7px 0 var(--ink);
        }

        .nav-links button.active,
        .filter-chip.active,
        .type-filter-chip.active,
        .access-filter-chip.active,
        .release-type-filter-chip.active,
        .genre-filter-chip.active,
        .tone-filter-chip.active,
        .complexity-filter-chip.active {
            background: var(--accent);
            color: var(--white);
        }

        .showroom-release-filters {
            display: contents;
        }

        .showroom-metadata-filters {
            display: contents;
        }

        .masthead {
            display: grid;
            grid-template-columns: 1.08fr 0.92fr;
            gap: 18px;
            margin-bottom: 20px;
        }

        .masthead > *,
        .audience-strip > *,
        .control-row > * {
            min-width: 0;
        }

        .panel {
            position: relative;
            background: rgba(255, 248, 238, 0.84);
            border: 2px solid var(--ink);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .poster {
            min-height: 470px;
            padding: 28px;
            border-radius: 34px;
            background:
                linear-gradient(135deg, rgba(215, 169, 40, 0.82), rgba(201, 106, 61, 0.92));
        }

        .poster::before {
            content: "";
            position: absolute;
            inset: 22px;
            border: 2px dashed rgba(23, 19, 17, 0.25);
            border-radius: 26px;
        }

        .poster-head {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: start;
            flex-wrap: wrap;
        }

        .tiny-label,
        .slab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 8px 12px;
            border: 2px solid var(--ink);
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            background: var(--white);
            box-shadow: 3px 3px 0 var(--ink);
            max-width: 100%;
            text-align: center;
            white-space: normal;
        }

        .poster h1 {
            position: relative;
            z-index: 1;
            margin: 22px 0 0;
            font-family: var(--font-display);
            font-size: 7.2rem;
            line-height: 0.88;
            letter-spacing: 0;
            text-transform: uppercase;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .poster-line {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 18px;
        }

        .poster-line strong {
            min-width: 0;
            max-width: 100%;
            font-size: clamp(1.25rem, 2.2vw, 2rem);
            text-transform: uppercase;
            line-height: 1;
            overflow-wrap: break-word;
        }

        .poster-copy {
            position: relative;
            z-index: 1;
            max-width: 38ch;
            margin: 18px 0 0;
            font-size: 1.06rem;
            line-height: 1.45;
            color: rgba(23, 19, 17, 0.84);
            overflow-wrap: break-word;
        }

        .poster-actions {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 28px;
        }

        .chip-button.dark {
            background: var(--primary);
            color: var(--white);
        }

        .chip-button.light {
            background: var(--white);
        }

        .chip-button.red {
            background: var(--accent);
            color: var(--white);
        }

        .board {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            align-content: start;
        }

        .stat-box,
        .note-box,
        .mini-box {
            border-radius: 24px;
            padding: 18px;
            border: 2px solid var(--ink);
            box-shadow: var(--shadow);
        }

        .stat-box {
            min-height: 148px;
            background: var(--white);
        }

        .stat-box:nth-child(1) { background: #faf2e0; transform: rotate(-2deg); }
        .stat-box:nth-child(2) { background: #e4f0ee; transform: rotate(2deg); }
        .stat-box:nth-child(3) { background: #f8e8e0; transform: rotate(-1deg); }
        .stat-box:nth-child(4) { background: #eef5e8; transform: rotate(1.5deg); }

        .stat-box span {
            display: block;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .stat-box strong {
            display: block;
            margin-top: 12px;
            font-family: var(--font-display);
            font-size: clamp(2.4rem, 5vw, 4rem);
            line-height: 0.92;
        }

        .note-box {
            grid-column: span 2;
            background: var(--ink);
            color: var(--white);
            padding: 20px 22px;
        }

        .note-box strong {
            display: inline-block;
            margin-bottom: 8px;
            font-size: 0.82rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .note-box p {
            margin: 0;
            font-size: 1rem;
            line-height: 1.35;
        }

        .strip {
            display: flex;
            gap: 12px;
            overflow: hidden;
            margin: 6px 0 24px;
            padding: 14px 0;
        }

        .audience-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            margin: 0 0 24px;
        }

        .audience-card {
            padding: 20px;
            border: 2px solid var(--ink);
            border-radius: 30px;
            box-shadow: var(--shadow);
            background: rgba(255, 248, 238, 0.9);
            display: grid;
            gap: 12px;
            align-content: start;
        }

        .audience-card h2 {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(1.55rem, 2vw, 2.1rem);
            line-height: 0.96;
            text-transform: uppercase;
        }

        .audience-card p {
            margin: 0;
            color: var(--ink-soft);
            line-height: 1.45;
        }

        .audience-card strong {
            color: var(--ink);
        }

        .audience-card--play {
            background: linear-gradient(180deg, #faf2e0 0%, #fffaf0 100%);
        }

        .audience-card--youth {
            background: linear-gradient(180deg, #f8e8e0 0%, #fff7f1 100%);
        }

        .audience-card--curious {
            background: linear-gradient(180deg, #e4f0ee 0%, #f4f9f8 100%);
        }

        .strip-track {
            display: flex;
            gap: 12px;
            min-width: max-content;
            animation: slide-strip 22s linear infinite;
        }

        .slab {
            background: var(--ink);
            color: var(--white);
            white-space: nowrap;
        }

        .slab.alt {
            background: var(--yellow);
            color: var(--ink);
        }

        @keyframes slide-strip {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        .project-view {
            display: grid;
            gap: 16px;
            margin-bottom: 26px;
        }

        .project-view[hidden] {
            display: none !important;
        }

        .project-view__rail {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .project-view__hash {
            display: inline-flex;
            min-height: 32px;
            align-items: center;
            padding: 6px 12px;
            border: 2px solid var(--ink);
            border-radius: 999px;
            background: var(--white);
            box-shadow: 3px 3px 0 var(--ink);
            font-family: var(--font-mono);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .project-stage,
        .project-detail-grid {
            display: grid;
            gap: 16px;
        }

        .project-stage {
            grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
            align-items: start;
        }

        .project-hero {
            min-height: 0;
            padding: 24px;
            border-radius: 34px;
            background:
                radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--project-accent, var(--accent)) 48%, transparent), transparent 22%),
                linear-gradient(135deg, color-mix(in srgb, var(--project-accent, var(--accent)) 22%, white), transparent 62%),
                #faf2e8;
        }

        .project-hero::before {
            content: "";
            position: absolute;
            inset: 18px;
            border: 2px dashed rgba(23, 19, 17, 0.18);
            border-radius: 26px;
            pointer-events: none;
        }

        .project-hero[data-pattern="scan"] {
            background:
                repeating-linear-gradient(-45deg, rgba(23, 19, 17, 0.08) 0 10px, transparent 10px 22px),
                radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--project-accent, var(--accent)) 48%, transparent), transparent 22%),
                linear-gradient(135deg, color-mix(in srgb, var(--project-accent, var(--accent)) 22%, white), transparent 62%),
                #faf2e8;
        }

        .project-hero[data-pattern="banana"] {
            background:
                radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.72) 0 22px, transparent 23px),
                radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.52) 0 28px, transparent 29px),
                radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--project-accent, var(--accent)) 48%, transparent), transparent 22%),
                linear-gradient(135deg, color-mix(in srgb, var(--project-accent, var(--accent)) 22%, white), transparent 62%),
                #faf2e8;
        }

        .project-hero[data-pattern="grid"] {
            background:
                linear-gradient(rgba(23, 19, 17, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(23, 19, 17, 0.08) 1px, transparent 1px),
                radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--project-accent, var(--accent)) 48%, transparent), transparent 22%),
                linear-gradient(135deg, color-mix(in srgb, var(--project-accent, var(--accent)) 22%, white), transparent 62%),
                #faf2e8;
            background-size: 18px 18px, 18px 18px, auto, auto, auto;
        }

        .project-hero__top,
        .project-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .project-status-line {
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .project-hero h2 {
            position: relative;
            z-index: 1;
            margin: 18px 0 0;
            font-family: var(--font-display);
            font-size: clamp(2.8rem, 7vw, 6rem);
            line-height: 0.9;
            text-transform: uppercase;
        }

        .project-summary,
        .project-note,
        .project-copy,
        .project-list {
            color: var(--ink-soft);
        }

        .project-summary {
            position: relative;
            z-index: 1;
            margin: 14px 0 0;
            max-width: 30ch;
            font-size: clamp(1.1rem, 2vw, 1.55rem);
            line-height: 1.1;
            color: var(--ink);
            text-transform: uppercase;
        }

        .project-note {
            position: relative;
            z-index: 1;
            margin: 14px 0 0;
            max-width: 54ch;
            font-size: 1rem;
            line-height: 1.4;
        }

        .project-gallery {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin: 18px 0 0;
        }

        .project-gallery__item {
            min-height: 108px;
            padding: 14px;
            border-radius: 22px;
            border: 2px solid var(--ink);
            background: rgba(255, 248, 238, 0.78);
            box-shadow: 4px 4px 0 rgba(23, 19, 17, 0.18);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
        }

        .project-gallery__item span {
            font-family: var(--font-mono);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .project-gallery__item strong {
            font-size: 1.05rem;
            line-height: 1;
            text-transform: uppercase;
        }

        .project-actions {
            position: relative;
            z-index: 1;
            margin-top: 18px;
        }

        .project-next-step {
            position: relative;
            z-index: 1;
            margin-top: 12px;
            padding: 10px 12px;
            border: 2px solid rgba(23, 19, 17, 0.14);
            border-radius: 18px;
            background: rgba(255, 248, 238, 0.72);
            font-size: 0.9rem;
            font-weight: 800;
            line-height: 1.35;
            color: var(--ink);
        }

        .project-side {
            display: grid;
            gap: 14px;
            align-content: start;
        }

        .project-side__card,
        .project-panel {
            padding: 18px;
            border-radius: 28px;
            border: 2px solid var(--ink);
            background: #faf5ec;
            box-shadow: var(--shadow);
        }

        .project-side__card strong,
        .project-panel h3 {
            display: block;
            margin: 0 0 10px;
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .project-facts {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .project-fact {
            padding: 12px;
            border-radius: 20px;
            border: 2px solid var(--ink);
            background: var(--white);
        }

        .project-fact span {
            display: block;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .project-fact b {
            display: block;
            margin-top: 10px;
            font-size: 1rem;
            line-height: 1.1;
            text-transform: uppercase;
        }

        .project-metadata {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .metadata-item {
            padding: 10px;
            border-radius: 16px;
            border: 1px solid rgba(23, 19, 17, 0.15);
            background: rgba(23, 19, 17, 0.03);
        }

        .metadata-item[hidden] {
            display: none;
        }

        .metadata-item span {
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--ink-soft);
            margin-bottom: 4px;
        }

        .metadata-item b {
            display: block;
            font-size: 0.9rem;
            line-height: 1.1;
            color: var(--text-primary);
        }

        .project-detail-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .project-panel--wide {
            grid-column: span 2;
        }

        .project-copy {
            margin: 0;
            max-width: 56ch;
            line-height: 1.55;
        }

        .project-release-boost {
            margin: 14px 0 0;
            padding: 10px 12px;
            border: 2px solid var(--ink);
            border-radius: 18px;
            background: color-mix(in srgb, var(--project-accent, var(--accent)) 18%, white);
            font-size: 0.84rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .project-release-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 16px;
        }

        .release-pill {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 8px 14px;
            border-radius: 999px;
            border: 2px solid var(--ink);
            background: rgba(23, 19, 17, 0.06);
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow: 3px 3px 0 rgba(23, 19, 17, 0.14);
        }

        .release-pill--current {
            background: color-mix(in srgb, var(--project-accent, var(--accent)) 36%, white);
        }

        .release-pill--fix {
            background: #f8e4de;
        }

        .release-pill--content {
            background: #faf0c8;
        }

        .release-pill--layout {
            background: #daf0ee;
        }

        .release-pill--system {
            background: #e7eadb;
        }

        .project-list {
            margin: 0;
            padding-left: 18px;
            line-height: 1.45;
        }

        .project-list li + li {
            margin-top: 8px;
        }

        .rating-hint {
            margin: 6px 0 10px;
            font-size: 0.84rem;
            line-height: 1.4;
            color: var(--ink-soft);
        }

        .rating-previous-note {
            margin: 0 0 12px;
            padding: 8px 12px;
            border-left: 3px solid #2d7a78;
            background: rgba(45, 122, 120, 0.07);
            font-size: 0.82rem;
            line-height: 1.4;
            color: #2d7a78;
            border-radius: 0 4px 4px 0;
        }

        #project-why-it-matters li {
            color: var(--ink);
        }

        .related-projects-panel {
            grid-column: 1 / -1;
            padding: 18px;
            border-radius: 28px;
            border: 2px solid var(--ink);
            background: #faf5ec;
            box-shadow: var(--shadow);
        }

        .related-projects-panel h3 {
            display: block;
            margin: 0 0 18px;
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .related-projects-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .related-project-card {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .related-project-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
            border-color: var(--card-accent, var(--accent-primary));
        }

        .related-project-card h4 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
            line-height: 1.3;
        }

        .related-project-card__top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 6px;
        }

        .related-project-card__label {
            display: inline-block;
            padding: 3px 6px;
            background: var(--card-accent, var(--accent-primary));
            color: white;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: 3px;
            flex-shrink: 0;
        }

        .related-project-card__art {
            width: 100%;
            height: 120px;
            background: linear-gradient(135deg, var(--card-accent, #d74a2f) 0%, rgba(215, 74, 47, 0.3) 100%);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.2);
        }

        .related-project-card__lead {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.3;
            flex-grow: 1;
        }

        .related-project-card__stickers {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .related-project-card__meta {
            display: flex;
            gap: 6px;
            font-size: 11px;
            color: var(--text-secondary);
            flex-wrap: wrap;
        }

        .related-project-card__meta span {
            padding: 2px 4px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 2px;
        }

        .related-project-card--status-stabil {
            border-left: 3px solid var(--status-stabil, #5a9a42);
        }

        .related-project-card--status-prototype {
            border-left: 3px solid var(--status-prototype, #c96a3d);
        }

        .project-rating-panel {
            margin: 0;
            background:
                linear-gradient(135deg, rgba(201, 106, 61, 0.12), transparent 60%),
                #faf5ec;
            box-shadow: var(--shadow);
        }

        .section-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        .section-bar h2 {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(2.2rem, 5vw, 4.2rem);
            line-height: 0.9;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .section-copy p {
            margin: 8px 0 0;
            max-width: 48ch;
            color: var(--ink-soft);
            line-height: 1.4;
        }

        .result-label {
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ink-soft);
        }

        .control-row {
            display: grid;
            grid-template-columns: minmax(230px, 320px) 1fr;
            gap: 14px;
            margin-bottom: 18px;
            align-items: start;
        }

        .search-panel,
        .filters-panel,
        .admin-section,
        .modal-content {
            border-radius: 30px;
        }

        .search-panel,
        .filters-panel {
            padding: 16px;
        }

        .search-panel input {
            width: 100%;
            min-height: 58px;
            padding: 14px 18px;
            border: 2px solid var(--ink);
            border-radius: 20px;
            background: var(--white);
            color: var(--ink);
            font-size: 1rem;
            box-shadow: inset 0 -3px 0 rgba(23, 19, 17, 0.08);
        }

        .filters-panel {
            display: grid;
            gap: 10px;
            align-items: stretch;
        }

        .filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .sort-group {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .filter-row--quicktags .sort-group {
            margin-left: auto;
        }

        .sort-label {
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .sort-chip {
            min-height: 38px;
            padding: 8px 12px;
            border: 2px solid var(--ink);
            border-radius: 999px;
            background: transparent;
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .sort-chip.active {
            background: var(--ink);
            color: var(--white);
        }

        .filters-panel .reset-button {
            margin-left: 0;
        }

        .advanced-filters {
            justify-self: start;
            width: fit-content;
            min-width: 160px;
            border: 2px dashed rgba(23, 19, 17, 0.28);
            border-radius: 20px;
            padding: 0;
            background: transparent;
            overflow: hidden;
        }

        .advanced-filters[open] {
            width: 100%;
            background: rgba(255, 248, 238, 0.58);
        }

        .advanced-filters summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            cursor: pointer;
            padding: 10px 12px;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--ink-soft);
            list-style: none;
            user-select: none;
        }

        .advanced-filters summary::-webkit-details-marker {
            display: none;
        }

        .advanced-filters summary::after {
            content: "?";
            font-size: 0.72rem;
            line-height: 1;
            color: rgba(23, 19, 17, 0.75);
            margin-left: auto;
        }

        .advanced-filters[open] summary::after {
            transform: rotate(180deg);
        }

        #advanced-filter-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            min-height: 24px;
            padding: 0 8px;
            border-radius: 999px;
            border: 2px solid var(--ink);
            background: var(--accent);
            color: var(--white);
            font-size: 0.7rem;
            line-height: 1;
        }

        #advanced-filter-count[hidden] {
            display: none;
        }

        .advanced-filters__body {
            margin-top: 0;
            display: grid;
            gap: 8px;
            padding: 2px 12px 12px;
            border-top: 1px dashed rgba(23, 19, 17, 0.16);
        }

        .filter-group {
            display: grid;
            gap: 6px;
        }

        .filter-group__title {
            margin: 0;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .active-advanced-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding-bottom: 4px;
            border-bottom: 1px dashed rgba(23, 19, 17, 0.2);
        }

        .active-advanced-filters[hidden] {
            display: none;
        }

        .advanced-filter-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            padding: 6px 8px;
            border-radius: 14px;
            border: 1px dashed rgba(23, 19, 17, 0.24);
            background: rgba(255, 248, 238, 0.5);
        }

        .advanced-filter-summary[hidden] {
            display: none;
        }

        .active-filter-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 28px;
            padding: 4px 9px;
            border: 2px solid var(--ink);
            border-radius: 999px;
            background: #faf2e0;
            color: var(--ink);
            font-size: 0.67rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            box-shadow: 2px 2px 0 var(--ink);
        }

        .active-filter-pill b {
            font-size: 0.76rem;
            line-height: 1;
        }

        .showroom-release-filters,
        .showroom-metadata-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .filter-chip--secondary {
            box-shadow: 2px 2px 0 var(--ink);
            background: rgba(255, 255, 255, 0.86);
        }

        .featured-shelf {
            margin-bottom: 48px;
        }

        .series-shelf {
            margin-bottom: 40px;
        }

        .series-shelf__label {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-secondary, #6b6354);
            margin-bottom: 4px;
        }

        #series-shelf {
            margin-bottom: 8px;
        }

        .featured-shelf__header {
            margin-bottom: 20px;
        }

        .featured-shelf__label {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--accent-warm);
            margin-bottom: 4px;
        }

        .featured-shelf__header p {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .featured-shelf__track {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 8px;
            scroll-behavior: smooth;
            scroll-padding-inline: 16px;
            -webkit-overflow-scrolling: touch;
        }

        .featured-shelf__track::-webkit-scrollbar {
            height: 6px;
        }

        .featured-shelf__track::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 3px;
        }

        .featured-shelf__track::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 3px;
        }

        .featured-shelf__track::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.5);
        }

        .featured-card {
            position: relative;
            flex: 0 0 350px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .featured-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
            border-color: var(--card-accent, var(--accent-primary));
        }

        .featured-card h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
            line-height: 1.3;
        }

        .featured-card__top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 8px;
        }

        .featured-card__label {
            display: inline-block;
            padding: 4px 8px;
            background: var(--card-accent, var(--accent-primary));
            color: white;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .featured-card__art {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, var(--card-accent, #d74a2f) 0%, rgba(215, 74, 47, 0.3) 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: rgba(255, 255, 255, 0.2);
        }

        .featured-card__lead {
            font-size: 13px;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.4;
            flex-grow: 1;
        }

        .featured-card__stickers {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .featured-card__meta {
            display: flex;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            flex-wrap: wrap;
        }

        .featured-card__meta span {
            padding: 2px 6px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 3px;
        }

        .featured-card--status-stabil {
            border-left: 4px solid var(--status-stabil, #5a9a42);
            background: linear-gradient(135deg, rgba(90, 154, 66, 0.05) 0%, transparent 100%);
        }

        .featured-card--status-prototype {
            border-left: 4px solid var(--status-prototype, #c96a3d);
            background: linear-gradient(135deg, rgba(201, 106, 61, 0.05) 0%, transparent 100%);
        }

        .game-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 16px;
            align-items: stretch;
        }

        .game-card {
            position: relative;
            grid-column: span 4;
            min-height: 340px;
            padding: 18px;
            border-radius: 28px;
            background: var(--white);
            border: 2px solid var(--ink);
            box-shadow: var(--shadow);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 14px;
            isolation: isolate;
            transition: transform 160ms ease;
        }

        .game-card::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 6px;
            background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--yellow)) 70%, var(--ink)) var(--signal-strength, 18%), transparent 0);
            opacity: 0.8;
            pointer-events: none;
        }

        .game-card:hover {
            transform: translateY(-3px) rotate(-0.4deg);
        }

        .game-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 85% 14%, color-mix(in srgb, var(--card-accent, var(--yellow)) 40%, transparent), transparent 26%),
                linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--yellow)) 24%, white), transparent 55%);
            z-index: -1;
        }

        .game-card--children {
            transform: rotate(-0.6deg);
        }

        .game-card--children::before {
            background:
                radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.72) 0 18px, transparent 19px),
                radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.44) 0 24px, transparent 25px),
                radial-gradient(circle at 85% 14%, color-mix(in srgb, var(--card-accent, var(--secondary)) 46%, transparent), transparent 26%),
                linear-gradient(135deg, #faf2e0, #faf5ec 54%);
        }

        .game-card--youth::before {
            background:
                linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0 22%, transparent 22% 100%),
                linear-gradient(135deg, #f8e4de 0%, #faf2e8 48%, #e4f0ee 100%);
        }

        .card-top {
            display: flex;
            justify-content: space-between;
            align-items: start;
            gap: 16px;
            min-height: 36px;
        }

        .card-index {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }

        .game-card--status-prototype {
            background:
                linear-gradient(180deg, rgba(248, 228, 222, 0.9) 0%, rgba(244, 239, 230, 0) 34%),
                var(--white);
            border-color: rgba(201, 106, 61, 0.85);
        }

        .game-card--status-stabil {
            background:
                linear-gradient(180deg, rgba(228, 244, 222, 0.95) 0%, rgba(244, 239, 230, 0) 34%),
                var(--white);
            border-color: rgba(90, 154, 66, 0.9);
        }

        .status-mark {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 2px solid var(--ink);
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            background: var(--white);
            box-shadow: 3px 3px 0 var(--ink);
            letter-spacing: 0.04em;
        }

        .status-mark::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 999px;
            border: 2px solid currentColor;
            background: currentColor;
            box-shadow: inset 0 0 0 1px rgba(255, 248, 238, 0.55);
        }

        .status-mark.prototype {
            background: #f8e4de;
            color: #8a3d1b;
        }

        .status-mark.stabil {
            background: #e4f2de;
            color: #3a5e1b;
        }

        .card-art {
            width: 100%;
            height: 92px;
            border-radius: 22px;
            border: 2px solid var(--ink);
            background:
                linear-gradient(120deg, color-mix(in srgb, var(--card-accent, var(--yellow)) 92%, white), transparent 60%),
                repeating-linear-gradient(-45deg, rgba(23, 19, 17, 0.12) 0 10px, transparent 10px 20px),
                var(--white);
        }

        .card-art[data-pattern="banana"] {
            background:
                radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.7) 0 18px, transparent 19px),
                radial-gradient(circle at 84% 74%, rgba(255, 255, 255, 0.4) 0 22px, transparent 23px),
                linear-gradient(120deg, color-mix(in srgb, var(--card-accent, var(--yellow)) 92%, white), transparent 60%),
                repeating-linear-gradient(-45deg, rgba(23, 19, 17, 0.08) 0 10px, transparent 10px 20px),
                var(--white);
        }

        .card-art[data-pattern="grid"] {
            background:
                linear-gradient(rgba(23, 19, 17, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(23, 19, 17, 0.08) 1px, transparent 1px),
                linear-gradient(120deg, color-mix(in srgb, var(--card-accent, var(--yellow)) 92%, white), transparent 60%),
                var(--white);
            background-size: 16px 16px, 16px 16px, auto, auto;
        }

        .card-art[data-pattern="scan"] {
            background:
                linear-gradient(120deg, color-mix(in srgb, var(--card-accent, var(--yellow)) 92%, white), transparent 60%),
                repeating-linear-gradient(-45deg, rgba(23, 19, 17, 0.16) 0 8px, transparent 8px 18px),
                var(--white);
        }

        .game-card--children .card-art {
            box-shadow: 0 0 0 4px rgba(215, 169, 40, 0.12);
            background:
                radial-gradient(circle at 14% 26%, rgba(255, 255, 255, 0.82) 0 14px, transparent 15px),
                radial-gradient(circle at 36% 72%, rgba(255, 255, 255, 0.65) 0 10px, transparent 11px),
                radial-gradient(circle at 82% 30%, rgba(255, 255, 255, 0.7) 0 16px, transparent 17px),
                linear-gradient(135deg, rgba(215, 169, 40, 0.28), transparent 45%),
                repeating-linear-gradient(-35deg, rgba(23, 19, 17, 0.08) 0 8px, transparent 8px 18px),
                linear-gradient(120deg, color-mix(in srgb, var(--card-accent, var(--secondary)) 92%, white), transparent 60%),
                #faf8f0;
        }

        .game-card--youth .card-art {
            box-shadow: 0 0 0 4px rgba(201, 106, 61, 0.12);
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0 16%, transparent 16% 100%),
                linear-gradient(115deg, transparent 0 26%, rgba(255, 255, 255, 0.34) 26% 32%, transparent 32% 100%),
                repeating-linear-gradient(-55deg, rgba(23, 19, 17, 0.12) 0 8px, transparent 8px 18px),
                linear-gradient(125deg, #f8e4de 0%, #faf2e8 42%, #e4f0ee 100%);
        }

        .game-card--children h3 {
            color: #7a4b00;
            text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.45);
        }

        .game-card--youth h3 {
            color: #6b3a2a;
            text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.35);
        }

        .game-card--children .card-why {
            background: rgba(250, 242, 224, 0.88);
        }

        .game-card--youth .card-why {
            background: rgba(248, 228, 222, 0.8);
        }

        .card-rated-badge {
            display: inline-flex;
            align-items: center;
            padding: 3px 9px;
            border-radius: 999px;
            background: #2d7a78;
            color: #fff;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            opacity: 0.92;
            white-space: nowrap;
        }

        .card-audience-ribbon {
            display: inline-flex;
            align-items: center;
            align-self: start;
            min-height: 30px;
            padding: 6px 12px;
            border: 2px solid var(--ink);
            border-radius: 999px;
            background: var(--ink);
            color: var(--white);
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow: 3px 3px 0 rgba(23, 19, 17, 0.2);
        }

        .game-card--children .card-audience-ribbon {
            background: var(--secondary);
            color: var(--ink);
        }

        .game-card--youth .card-audience-ribbon {
            background: var(--accent);
        }

        .game-card h3 {
            margin: 0;
            font-size: clamp(1.35rem, 2vw, 2.2rem);
            line-height: 1;
            text-transform: uppercase;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2em;
        }

        .card-sticker-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: flex-start;
            min-height: 32px;
        }

        .card-sticker {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 5px 8px;
            border: 2px solid var(--ink);
            border-radius: 999px;
            background: var(--white);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;

        .card-feedback-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            min-height: 28px;
        }

        .card-feedback-badge {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 5px 9px;
            border: 2px solid rgba(23, 19, 17, 0.22);
            border-radius: 999px;
            background: rgba(255, 248, 238, 0.86);
            color: var(--ink);
            font-size: 0.69rem;
            font-weight: 800;
            letter-spacing: 0.03em;
            white-space: nowrap;
        }

        .card-feedback-badge--empty {
            border-style: dashed;
            color: rgba(23, 19, 17, 0.72);
            background: rgba(255, 248, 238, 0.52);
        }

        .card-feedback-badge--issues {
            border-color: rgba(201, 106, 61, 0.35);
            background: rgba(248, 228, 222, 0.75);
            color: #7a3d1b;
        }
            box-shadow: 2px 2px 0 var(--ink);
        }

        .card-sticker--boost {
            background: color-mix(in srgb, var(--card-accent, var(--yellow)) 28%, white);
        }

        .card-discovery-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            align-items: center;
            min-height: 24px;
        }

        .card-discovery-badge {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid rgba(23, 19, 17, 0.2);
            background: rgba(23, 19, 17, 0.04);
            color: var(--ink-soft);
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .game-description {
            margin: 0;
            color: var(--ink-soft);
            font-size: 0.98rem;
            max-width: 42ch;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-why {
            display: grid;
            gap: 8px;
            padding: 12px 14px;
            border: 2px solid rgba(23, 19, 17, 0.12);
            border-radius: 18px;
            background: rgba(255, 248, 238, 0.72);
            min-height: 102px;
        }

        .card-why__lead {
            margin: 0;
            font-weight: 800;
            line-height: 1.35;
            color: var(--ink);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-why__meta {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .tag-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: flex-start;
            min-height: 34px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 6px 10px;
            border: 2px solid var(--ink);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.72);
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .tag.born { background: #faf2e0; }
        .tag.voksen { background: #f8e4de; }
        .tag.skole { background: #e4f0ee; }
        .tag.eksperiment { background: #f8e8e0; }
        .tag.membranen { background: #e4f2ee; }
        .tag.rovbananen { background: #faf0c8; }
        .tag.struktur { background: #f8e4e0; }
        .tag.app { background: #e4eeef; }
        .tag.gratis { background: #eef5e8; }

        .card-footer {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .card-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .card-actions .chip-button {
            min-height: 40px;
            padding: 8px 12px;
            font-size: 0.76rem;
        }

        .card-release-line {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-height: 30px;
        }

        .card-release-badge {
            min-height: 24px;
            padding: 3px 8px;
            font-size: 0.64rem;
            box-shadow: none;
        }

        .stars {
            color: var(--ink);
            letter-spacing: 0.12em;
            font-size: 0.92rem;
        }

        .meta-line {
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .empty-state {
            display: none;
            padding: 28px;
            margin-top: 14px;
            border-radius: 28px;
            border: 2px dashed var(--ink);
            text-align: center;
            background: rgba(255, 248, 238, 0.7);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .admin-section {
            display: none;
            margin-top: 34px;
            padding: 22px;
            background: rgba(23, 19, 17, 0.96);
            color: var(--white);
            border: 2px solid var(--ink);
            box-shadow: var(--shadow);
        }

        .admin-section.is-visible {
            display: block;
        }

        .admin-heading,
        .admin-tools,
        .admin-card__head,
        .admin-card__metrics,
        .modal-head,
        .modal-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .admin-heading {
            margin-bottom: 18px;
        }

        .admin-heading h2 {
            margin: 0;
            font-family: var(--font-display);
            font-size: clamp(2rem, 4vw, 3.8rem);
            text-transform: uppercase;
            line-height: 0.92;
        }

        .admin-heading p {
            margin: 6px 0 0;
            color: rgba(255, 248, 238, 0.74);
        }

        .admin-onboarding {
            margin: 0 0 14px;
        }

        .admin-onboarding-card {
            padding: 14px;
            border-radius: 16px;
            border: 1px solid rgba(255, 248, 238, 0.28);
            background: linear-gradient(160deg, rgba(45, 122, 120, 0.2), rgba(255, 248, 238, 0.06));
            display: grid;
            gap: 10px;
        }

        .admin-onboarding-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .admin-onboarding-head strong {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .admin-onboarding-list {
            margin: 0;
            padding-left: 18px;
            display: grid;
            gap: 5px;
            color: rgba(255, 248, 238, 0.9);
            font-size: 0.84rem;
        }

        .admin-data-note {
            margin: 0 0 12px;
            padding: 8px 12px;
            border: 1px solid rgba(255, 248, 238, 0.25);
            border-radius: 6px;
            background: rgba(255, 248, 238, 0.08);
            font-size: 0.78rem;
            color: rgba(255, 248, 238, 0.7);
            line-height: 1.4;
        }

        .admin-data-note code {
            font-family: monospace;
            background: rgba(255, 248, 238, 0.12);
            padding: 1px 5px;
            border-radius: 3px;
        }

        .admin-password-status {
            margin: 0 0 12px;
            padding: 7px 11px;
            border-left: 3px solid rgba(255, 248, 238, 0.35);
            background: rgba(255, 248, 238, 0.04);
            border-radius: 0 4px 4px 0;
            font-size: 0.76rem;
            line-height: 1.4;
            color: rgba(255, 248, 238, 0.78);
        }

        .admin-password-status--override {
            border-left-color: rgba(215, 169, 40, 0.85);
            background: rgba(215, 169, 40, 0.12);
            color: #d7a928;
        }

        .admin-tool-status {
            margin: 0 0 12px;
            padding: 7px 11px;
            border-left: 3px solid rgba(255, 248, 238, 0.5);
            background: rgba(255, 248, 238, 0.06);
            border-radius: 0 4px 4px 0;
            font-size: 0.76rem;
            line-height: 1.4;
            color: rgba(255, 248, 238, 0.8);
        }

        .admin-tool-status--error {
            border-left-color: #ffd2d2;
            background: rgba(180, 32, 32, 0.28);
            color: #ffe9e9;
        }

        .admin-cloud-panel {
            margin: 0 0 18px;
            padding: 14px;
            border-radius: 16px;
            border: 1px solid rgba(45, 122, 120, 0.54);
            background: linear-gradient(160deg, rgba(45, 122, 120, 0.18), rgba(255, 248, 238, 0.04));
        }

        .admin-cloud-panel__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }

        .admin-cloud-state {
            font-size: 0.76rem;
            color: rgba(255, 248, 238, 0.78);
        }

        .admin-cloud-login .form-block {
            margin-bottom: 10px;
        }

        .admin-safety-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
            margin: 0 0 18px;
        }

        .admin-safety-card {
            padding: 14px;
            border-radius: 16px;
            border: 1px solid rgba(255, 248, 238, 0.2);
            background: linear-gradient(160deg, rgba(255, 248, 238, 0.12), rgba(255, 248, 238, 0.04));
        }

        .admin-safety-card--live {
            border-color: rgba(215, 169, 40, 0.62);
            background: linear-gradient(160deg, rgba(215, 169, 40, 0.2), rgba(255, 248, 238, 0.04));
        }

        .admin-safety-card--guide {
            border-color: rgba(45, 122, 120, 0.54);
            background: linear-gradient(160deg, rgba(45, 122, 120, 0.22), rgba(255, 248, 238, 0.04));
        }

        .admin-safety-card__head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .admin-safety-card__head strong {
            font-size: 0.96rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .admin-safety-card__head span {
            font-size: 0.74rem;
            color: rgba(255, 248, 238, 0.8);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .admin-safety-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .admin-safety-cell {
            padding: 8px 10px;
            border-radius: 10px;
            background: rgba(23, 19, 17, 0.44);
            border: 1px solid rgba(255, 248, 238, 0.16);
        }

        .admin-safety-cell span {
            display: block;
            margin-bottom: 4px;
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255, 248, 238, 0.65);
        }

        .admin-safety-cell b {
            font-size: 0.85rem;
            color: rgba(255, 248, 238, 0.96);
        }

        .admin-safety-list {
            margin: 0;
            padding-left: 18px;
            display: grid;
            gap: 6px;
            font-size: 0.84rem;
            color: rgba(255, 248, 238, 0.9);
        }

        .admin-tools .chip-button,
        .admin-tools .nav-links button {
            box-shadow: 4px 4px 0 rgba(255, 248, 238, 0.3);
        }

        .admin-tools .chip-button.dark {
            border-color: var(--white);
        }

        .admin-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }

        .admin-release-filters {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .admin-release-filter-chip.active {
            background: var(--accent);
            color: var(--white);
            border-color: var(--accent);
        }

        .metric-card {
            padding: 16px;
            border-radius: 24px;
            border: 2px solid rgba(255, 248, 238, 0.18);
            background: rgba(255, 248, 238, 0.07);
        }

        .metric-card strong {
            display: block;
            font-family: var(--font-display);
            font-size: 2.4rem;
            line-height: 0.9;
        }

        .metric-card span {
            display: block;
            margin-top: 8px;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255, 248, 238, 0.72);
        }

        .admin-game-list {
            display: grid;
            gap: 12px;
        }

        .admin-card {
            padding: 18px;
            border-radius: 24px;
            border: 2px solid rgba(255, 248, 238, 0.12);
            background: rgba(255, 248, 238, 0.04);
        }

        .admin-card__head strong {
            font-size: 1.1rem;
        }

        .admin-release-line {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .admin-release-badge {
            min-height: 28px;
            padding: 4px 10px;
            font-size: 0.68rem;
            box-shadow: none;
        }

        .admin-card__actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .admin-card__metrics {
            margin: 12px 0;
            color: rgba(255, 248, 238, 0.7);
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .admin-card__body {
            color: rgba(255, 248, 238, 0.88);
        }

        .admin-card__body ul {
            margin: 0;
            padding-left: 18px;
        }

        .admin-card__body p,
        .admin-card__body li {
            margin: 0 0 6px;
        }

        .modal-bg {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(23, 19, 17, 0.42);
            backdrop-filter: blur(6px);
            z-index: 60;
        }

        .modal-bg.is-open {
            display: flex;
        }

        .modal-content {
            width: min(920px, 100%);
            max-height: 92vh;
            overflow-y: auto;
            padding: 24px;
            background: var(--white);
            border: 2px solid var(--ink);
            box-shadow: 0 30px 90px rgba(23, 19, 17, 0.28);
        }

        .modal-head {
            align-items: start;
            margin-bottom: 16px;
        }

.modal-head h2 {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 0.9;
    text-transform: uppercase;
}

.modal-banner {
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 24px;
    border: 2px solid var(--ink);
    background:
                radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--modal-accent, var(--accent)) 46%, transparent), transparent 24%),
                linear-gradient(135deg, color-mix(in srgb, var(--modal-accent, var(--accent)) 22%, white), transparent 68%),
                #faf2e8;
}

.modal-banner[data-pattern="scan"] {
    background:
        repeating-linear-gradient(-45deg, rgba(23, 19, 17, 0.08) 0 8px, transparent 8px 18px),
        radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--modal-accent, var(--accent)) 46%, transparent), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--modal-accent, var(--accent)) 22%, white), transparent 68%),
        #faf2e8;
}

.modal-banner[data-pattern="banana"] {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.65) 0 22px, transparent 23px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.45) 0 26px, transparent 27px),
        radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--modal-accent, var(--accent)) 46%, transparent), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--modal-accent, var(--accent)) 22%, white), transparent 68%),
        #faf2e8;
}

.modal-banner[data-pattern="grid"] {
    background:
        linear-gradient(rgba(23, 19, 17, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 19, 17, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--modal-accent, var(--accent)) 46%, transparent), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--modal-accent, var(--accent)) 22%, white), transparent 68%),
        #faf2e8;
    background-size: 18px 18px, 18px 18px, auto, auto, auto;
}

.modal-banner__eyebrow {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 6px 10px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal-status-note {
    margin: 12px 0 0;
    max-width: 44ch;
    color: var(--ink-soft);
    font-size: 1rem;
}

.close-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--ink);
            background: var(--white);
            box-shadow: 3px 3px 0 var(--ink);
            font-size: 1.4rem;
            font-weight: 800;
        }

        .modal-meta-grid,
        .modal-body-grid,
        .form-grid {
            display: grid;
            gap: 12px;
        }

        .modal-meta-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-bottom: 14px;
        }

        .modal-meta-card,
        .modal-section,
        .form-block,
        .rating-panel {
            padding: 16px;
            border-radius: 24px;
            border: 2px solid var(--ink);
            background: #faf5ec;
        }

        .modal-meta-card strong,
        .rating-group label,
        .form-block label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .form-hint {
            margin: 10px 0 0;
            color: var(--ink-soft);
            font-size: 0.88rem;
            line-height: 1.4;
        }

        .modal-body-grid {
            grid-template-columns: 1.15fr 0.85fr;
            margin-bottom: 14px;
        }

        .modal-section h3,
        .rating-panel h3 {
            margin: 0 0 10px;
            font-size: 1rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .modal-copy,
        .modal-log,
        .rating-panel p {
            margin: 0;
            color: var(--ink-soft);
        }

        .modal-log {
            padding-left: 18px;
        }

        .modal-actions {
            margin-bottom: 14px;
        }

        .rating-stars {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .rating-stars span {
            display: inline-grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 2px solid var(--ink);
            background: var(--white);
            font-size: 1.2rem;
            box-shadow: 3px 3px 0 var(--ink);
            color: rgba(23, 19, 17, 0.24);
            transition: 120ms ease;
        }

        .rating-stars span:hover,
        .rating-stars span.active {
            color: var(--ink);
            background: var(--secondary);
            transform: translate(-1px, -1px);
        }

        input,
        textarea,
        select {
            width: 100%;
            min-height: 48px;
            padding: 12px 14px;
            border: 2px solid var(--ink);
            border-radius: 18px;
            background: var(--white);
            color: var(--ink);
        }

        textarea {
            min-height: 110px;
            resize: vertical;
        }

        .form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin: 16px 0;
        }

        .form-mode-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        .mode-toggle-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .mode-toggle-row .chip-button.is-active {
            background: var(--accent);
            color: var(--white);
        }

        .form-mode-note {
            font-size: 0.78rem;
            color: var(--ink-soft);
        }

        .form-error-summary {
            margin: 8px 0 0;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid #b05a3a;
            background: #faf0ec;
            color: #7a2a1d;
            font-size: 0.82rem;
            line-height: 1.35;
        }

        .form-input--invalid {
            border-color: #b05a3a;
            background: #faf5f1;
        }

        .form-block--advanced.is-hidden {
            display: none;
        }

        .form-grid.is-quick .form-block--noncore {
            display: none;
        }

        .full {
            grid-column: 1 / -1;
        }

        .gdpr-notice {
            position: fixed;
            right: 14px;
            bottom: 14px;
            max-width: 320px;
            padding: 12px 14px;
            border: 2px solid var(--ink);
            border-radius: 18px;
            background: var(--white);
            box-shadow: var(--shadow);
            font-size: 0.8rem;
            font-weight: 800;
            line-height: 1.3;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            z-index: 30;
        }

        .gdpr-notice--warning {
            border-color: #7a1f1f;
            background: #fff1f1;
            color: #7a1f1f;
        }

        @media (max-width: 1080px) {
            .audience-strip,
            .masthead,
            .control-row,
            .modal-body-grid,
            .project-stage,
            .project-detail-grid {
                grid-template-columns: 1fr;
            }

            .project-panel--wide {
                grid-column: span 1;
            }

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

            .game-card {
                grid-column: span 6;
            }
        }

        @media (max-width: 760px) {
            .page-shell {
                width: calc(100vw - 20px);
                max-width: calc(100vw - 20px);
            }

            .poster,
            .search-panel,
            .filters-panel,
            .admin-section,
            .modal-content {
                padding: 18px;
            }

            .poster {
                min-height: 0;
                width: 100%;
                max-width: 100%;
            }

            .poster::before {
                inset: 12px;
                border-radius: 22px;
            }

            .poster-head {
                gap: 8px;
            }

            .poster h1 {
                /* Skaleres med viewporten saa "PRODUKTVAEG" aldrig knaekker midt i ordet. */
                font-size: clamp(1.9rem, 10.5vw, 3.05rem);
                line-height: 0.9;
                margin-top: 18px;
            }

            .poster-line strong {
                font-size: 1.22rem;
                line-height: 1.05;
                max-width: 100%;
            }

            .poster-copy {
                max-width: none;
                font-size: 0.98rem;
            }

            .poster-actions {
                gap: 10px;
                margin-top: 22px;
            }

            .poster-actions .chip-button {
                width: 100%;
                justify-content: center;
            }

            .control-row {
                gap: 10px;
            }

            .search-panel {
                padding: 12px;
            }

            .filters-panel {
                display: grid;
                gap: 10px;
                overflow: visible;
                padding: 12px;
            }

            .filters-panel::before,
            .filters-panel::after {
                display: none;
            }

            .filter-row {
                gap: 6px;
            }

            .advanced-filters,
            .advanced-filters[open] {
                width: 100%;
            }

            .advanced-filter-summary {
                gap: 5px;
                padding: 6px;
            }

            .showroom-release-filters,
            .showroom-metadata-filters {
                gap: 6px;
            }

            .filters-panel .chip-button,
            .filters-panel .filter-chip,
            .filters-panel .type-filter-chip,
            .filters-panel .access-filter-chip,
            .filters-panel .release-type-filter-chip,
            .filters-panel .genre-filter-chip,
            .filters-panel .tone-filter-chip,
            .filters-panel .complexity-filter-chip {
                min-height: 38px;
                padding: 8px 12px;
                font-size: 0.72rem;
            }

            .sort-group {
                flex-wrap: nowrap;
                gap: 6px;
                margin-left: auto;
            }

            .sort-group .sort-label {
                display: none;
            }

            .sort-chip {
                min-height: 36px;
                padding: 7px 10px;
                font-size: 0.7rem;
            }

            .board,
            .audience-strip,
            .modal-meta-grid,
            .form-grid,
            .project-facts,
            .project-gallery {
                grid-template-columns: 1fr;
            }

            .note-box {
                grid-column: span 1;
            }

            .game-grid {
                grid-template-columns: 1fr;
            }

            .game-card {
                grid-column: span 1;
                min-height: 0;
                padding: 15px;
                gap: 11px;
                border-radius: 22px;
            }

            .card-top {
                min-height: 0;
                gap: 10px;
            }

            .card-audience-ribbon {
                min-height: 28px;
                padding: 5px 10px;
                font-size: 0.68rem;
            }

            .card-art {
                height: 84px;
                border-radius: 18px;
            }

            .game-card h3 {
                font-size: clamp(1.2rem, 7.2vw, 1.55rem);
            }

            .game-description {
                font-size: 0.92rem;
            }

            .card-sticker-row,
            .tag-row {
                gap: 6px;
            }

            .card-sticker,
            .tag {
                min-height: 26px;
                padding: 4px 7px;
                font-size: 0.68rem;
            }

            .card-why {
                min-height: 0;
                padding: 10px 11px;
                gap: 7px;
            }

            .card-why__meta {
                gap: 8px;
                font-size: 0.68rem;
            }

            .card-footer {
                gap: 10px;
            }

            .card-release-line {
                min-height: 0;
                gap: 6px;
            }

            .game-card .chip-button {
                width: 100%;
                justify-content: center;
            }

            .sort-group,
            .filters-panel .reset-button {
                margin-left: 0;
            }

            .site-header,
            .section-bar,
            .modal-head,
            .modal-actions,
            .admin-heading {
                align-items: stretch;
            }

            .site-header,
            .brand,
            .brand-copy {
                min-width: 0;
            }

            .brand-copy span {
                white-space: normal;
            }

            .header-safety {
                width: 100%;
            }

            .admin-safety-grid {
                grid-template-columns: 1fr;
            }

            .gdpr-notice {
                left: 10px;
                right: 10px;
                max-width: none;
            }

            .featured-shelf {
                margin-bottom: 32px;
            }

            .featured-shelf__label {
                font-size: 10px;
            }

            .featured-shelf__header p {
                font-size: 16px;
            }

            .featured-card {
                flex: 0 0 300px;
                padding: 12px;
                gap: 10px;
            }

            .featured-card h3 {
                font-size: 16px;
            }

            .featured-card__art {
                height: 140px;
            }

            .featured-card__lead {
                font-size: 12px;
            }

            .featured-card__meta {
                font-size: 11px;
            }

            .related-projects-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }

            .related-project-card {
                padding: 10px;
                gap: 8px;
            }

            .related-project-card h4 {
                font-size: 14px;
            }

            .related-project-card__art {
                height: 100px;
            }

            .related-project-card__lead {
                font-size: 11px;
            }

            .related-project-card__meta {
                font-size: 10px;
            }
        }