:root {
    --black: #030303;
    --white: #f8f7ef;
    --pink: #ff427f;
    --green: #8cff32;
    --orange: #ff6a00;
    --pixel-font: "Lucida Console", "Cascadia Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--white);
    background-color: #050505;
    background-image:
        linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
        url("assets/doom-background-new.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    font-family: var(--pixel-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    -webkit-font-smoothing: none;
    text-rendering: geometricPrecision;
    overflow-x: hidden;
}

body::after {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    content: "";
    opacity: .1;
    background: repeating-linear-gradient(to bottom, transparent 0 3px, #000 3px 4px);
}

a { color: inherit; }

.site-header,
.page,
footer {
    width: min(980px, 100%);
    margin-inline: auto;
    background: var(--black);
}

.site-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    border-bottom: 1px solid #242424;
}

.brand {
    color: var(--white);
    font-size: 17px;
    text-decoration: none;
}

.page {
    min-height: calc(100vh - 120px);
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr);
}

.project-links {
    padding: 50px 22px;
    border-right: 1px solid #242424;
}

.project-links h2 {
    margin: 0 0 25px;
    color: #707070;
    font-size: 11px;
    letter-spacing: .14em;
}

.project-menu-label {
    display: block;
    margin: 28px 0 15px;
    color: #555;
    font-size: 9px;
    letter-spacing: .14em;
}

.project-links a {
    position: relative;
    display: block;
    padding-left: 17px;
    margin-bottom: 17px;
    color: #858585;
    font-size: 13px;
    text-decoration: none;
}

.project-links a::before {
    position: absolute;
    left: 0;
    content: "·";
}

.project-links a:hover { color: var(--white); }
.project-links a.is-active { color: var(--green); }
.project-links a.is-active::before { content: ">"; }
.project-page { width: 100%; min-width: 0; max-width: 790px; margin: 0 auto; padding: 60px 54px 90px; }

.project-preview {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 2px solid #bdbdbd;
    background: #080808;
    cursor: zoom-in;
}

.project-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.image-lens {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background-image: url("assets/tuinwad-launcher.png");
    background-repeat: no-repeat;
    box-shadow:
        0 0 0 5px rgba(0, 0, 0, .6),
        inset 14px 14px 24px rgba(255, 255, 255, .12),
        inset -14px -14px 24px rgba(0, 0, 0, .3);
    transform: translate(-50%, -50%) scale(.85);
    transition: opacity .12s steps(3, end), transform .12s steps(3, end);
}

.project-preview.is-magnifying .image-lens {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.project-title {
    margin: 0 0 30px;
    padding: 18px 20px;
    border-left: 4px solid var(--green);
    background: linear-gradient(90deg, rgba(31, 72, 19, .48), rgba(74, 15, 45, .18) 70%, transparent);
    text-align: left;
}

.project-title h1 {
    margin: 0;
    color: var(--white);
    font-size: clamp(27px, 4vw, 39px);
    line-height: 1.15;
}

.project-title p {
    margin: 11px 0 0;
    color: var(--pink);
    font-size: 12px;
}

.story {
    max-width: 590px;
    margin: 62px auto 0;
}

.story h2 {
    margin: 0 0 22px;
    font-size: clamp(19px, 2.4vw, 24px);
    line-height: 1.45;
}

.story p {
    margin: 0;
    color: #d7d7d7;
    font-size: 18px;
    line-height: 1.85;
}

.download-button {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 19px;
    color: #050505;
    background: var(--green);
    font-size: 14px;
    text-decoration: none;
}

.download-button:hover { background: #b0ff68; }

.project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.project-actions .download-button { margin-top: 0; }

.source-button {
    display: inline-block;
    padding: 14px 18px;
    border: 1px solid #686868;
    color: #c9c9c9;
    background: #0b0b0b;
    font-size: 14px;
    text-decoration: none;
}

.source-button:hover {
    border-color: var(--green);
    color: var(--green);
}

.home-page { max-width: 815px; }

.home-header {
    border-left-color: var(--green);
    background: linear-gradient(90deg, rgba(31, 76, 18, .5), rgba(94, 20, 53, .2) 70%, transparent);
}

.home-header h1 {
    color: var(--white);
    text-shadow: none;
}

.home-header .status-line { color: var(--green); }
.home-header div > p:last-child { color: var(--pink); }

.home-intro {
    max-width: 620px;
    margin: 48px 0 42px;
}

.home-intro h2 {
    margin: 0 0 18px;
    color: #ffd5e2;
    font-size: 19px;
}

.home-intro p {
    margin: 0;
    color: #d7d7d7;
    font-size: 15px;
    line-height: 1.8;
}

.home-intro p + p { margin-top: 15px; }

.links-page { max-width: 815px; }

.links-header {
    border-left-color: #56d8ff;
    background: linear-gradient(90deg, rgba(11, 54, 68, .58), rgba(92, 17, 59, .2) 72%, transparent);
}

.links-header h1 {
    color: #a8ebff;
    text-shadow: 3px 3px 0 #12313b;
}

.links-header .status-line { color: var(--green); }
.links-header div > p:last-child { color: var(--pink); }

.links-intro {
    max-width: 610px;
    margin: 48px 0 32px;
}

.links-intro h2 {
    margin: 0 0 17px;
    color: #d9f6ff;
    font-size: 19px;
}

.links-intro p {
    margin: 0;
    color: #c4c4c4;
    font-size: 14px;
    line-height: 1.75;
}

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

.social-link {
    position: relative;
    overflow: hidden;
    min-height: 225px;
    padding: 22px;
    border: 1px solid #3d3d3d;
    border-top: 4px solid currentColor;
    background: #080808;
    text-decoration: none;
    transition: transform .12s steps(2, end), border-color .12s steps(2, end);
}

.social-link::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .12;
    background: repeating-linear-gradient(135deg, transparent 0 16px, currentColor 16px 17px);
}

.social-link > * { position: relative; }

.social-link span {
    display: block;
    color: #aaa;
    font-size: 9px;
    letter-spacing: .12em;
}

.social-link strong {
    display: block;
    margin-top: 24px;
    color: currentColor;
    font-size: clamp(25px, 4vw, 38px);
}

.social-link p {
    margin: 14px 0 26px;
    color: #bdbdbd;
    font-size: 12px;
    line-height: 1.6;
}

.social-link b {
    color: var(--white);
    font-size: 10px;
}

.social-link:hover,
.social-link:focus-visible {
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    border-left-color: currentColor;
    transform: translateY(-3px);
}

.itch-link { color: #ff6b9e; }
.github-link { color: #77e1c4; }

.junk-page { max-width: 815px; }

.junk-header {
    border-left-color: #f6dc42;
    background:
        repeating-linear-gradient(135deg, rgba(246, 220, 66, .05) 0 8px, transparent 8px 16px),
        linear-gradient(90deg, rgba(92, 74, 5, .45), rgba(91, 13, 53, .2) 72%, transparent);
}

.junk-header h1 {
    color: #f6dc42;
    text-shadow: 3px 3px 0 #7c224d;
}

.junk-header .status-line { color: #ff69a0; }
.junk-header div > p:last-child { color: #bdbb9c; }

.junk-intro {
    max-width: 590px;
    margin: 46px auto 28px;
}

.junk-intro h2 {
    margin: 0 0 14px;
    color: #f6dc42;
    font-size: 20px;
}

.junk-intro p {
    margin: 0;
    color: #bababa;
    font-size: 13px;
    line-height: 1.75;
}

.junk-list {
    display: grid;
    gap: 26px;
    max-width: 650px;
    margin: 0 auto;
}

.junk-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #544b23;
    border-bottom-color: #8a7040;
    background: linear-gradient(135deg, #0d0d0a, #090709 70%);
    box-shadow: 8px 8px 0 rgba(80, 20, 48, .2);
}

.junk-card::after {
    position: absolute;
    right: -23px;
    bottom: 13px;
    width: 105px;
    height: 8px;
    content: "";
    background: #ff4a84;
    opacity: .35;
    transform: rotate(-34deg);
}

.junk-number {
    display: grid;
    place-items: start center;
    padding-top: 25px;
    border-right: 1px dashed #574f2a;
    color: #f6dc42;
    font-size: 22px;
}

.junk-card-content { min-width: 0; padding: 25px 27px 28px; }
.junk-tag { margin: 0 0 10px; color: #ff69a0; font-size: 9px; letter-spacing: .14em; }
.junk-card h2 { margin: 0 0 18px; color: var(--white); font-size: clamp(19px, 3vw, 26px); }
.junk-card-content > p:not(.junk-tag) { margin: 0; color: #c9c9c9; font-size: 13px; line-height: 1.75; }
.junk-card-content > p + p:not(.junk-tag) { margin-top: 14px; }
.junk-card-content .junk-requirement { margin-top: 18px; color: #f0ce58; font-size: 10px; line-height: 1.6; }

.junk-preview {
    position: relative;
    z-index: 1;
    float: right;
    display: block;
    width: 180px;
    margin: 0 0 16px 20px;
    padding: 5px;
    border: 1px solid #705b34;
    background: #050505;
}

.junk-preview img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    transition: filter .15s steps(3, end), transform .15s steps(3, end);
}

.junk-preview:hover img,
.junk-preview:focus-visible img {
    filter: brightness(1.16) contrast(1.06);
    transform: scale(1.02);
}

.skeltero-card { border-color: #6a4930; }
.skeltero-card .junk-number { color: #e6b975; }
.skeltero-card .junk-tag { color: #ef7758; }

.junk-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}

.junk-controls span {
    padding: 7px 8px;
    border: 1px solid #333;
    color: #aaa;
    background: #060606;
    font-size: 8px;
}

.junk-download { position: relative; z-index: 1; background: #f6dc42; }
.junk-download:hover { background: #fff18a; }

.rtx-project { max-width: 815px; }

.rtx-header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 30px;
    padding: 18px 20px;
    border-left: 4px solid var(--green);
    background: linear-gradient(90deg, rgba(35, 75, 19, .42), rgba(93, 31, 6, .16) 70%, transparent);
}

.rtx-header > img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    image-rendering: pixelated;
}

.rtx-header h1 {
    margin: 5px 0 7px;
    font-size: clamp(30px, 5vw, 46px);
    line-height: .95;
}

.rtx-header p { margin: 0; }
.rtx-header div > p:last-child { color: var(--orange); font-size: 12px; }

.status-line {
    color: var(--green);
    font-size: 10px;
    letter-spacing: .14em;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid #3d3028;
    background: #080706;
    cursor: zoom-in;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .16s steps(3, end), transform .16s steps(3, end);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
    filter: brightness(1.16) saturate(1.08);
    transform: scale(1.015);
}

.rtx-story { margin-top: 48px; }
.rtx-story h2 { color: #ffd19d; }
.rtx-story p + p { margin-top: 18px; }

.coming-soon {
    display: inline-block;
    margin-top: 29px;
    padding: 14px 17px;
    border: 1px solid var(--orange);
    color: var(--orange);
    font-size: 12px;
}

.rtx-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
}

.rtx-gallery .gallery-item { aspect-ratio: 16 / 10; }
.rtx-gallery .gallery-item:last-child img { object-fit: contain; }

.voxel-header {
    padding: 18px 20px;
    border-left: 4px solid #c72222;
    background: linear-gradient(90deg, rgba(124, 12, 12, .25), transparent 70%);
}

.voxel-header h1 {
    color: #ff5a43;
    text-shadow: 3px 3px 0 #4b0808;
}

.voxel-header .status-line { color: #ffcc36; }
.voxel-header div > p:last-child { color: #c7b4a2; }
.voxel-project .rtx-gallery .gallery-item { border-color: #5e2222; }
.voxel-project .rtx-gallery .gallery-item:last-child img { object-fit: cover; }
.voxel-story h2 { color: #ff8c70; }
.voxel-story .download-button { background: #ffcc36; }
.voxel-story .download-button:hover { background: #ffe07b; }

.quake2-header {
    padding: 18px 20px;
    border-left: 4px solid #ff9d35;
    background: linear-gradient(90deg, rgba(31, 62, 99, .42), transparent 72%);
}

.quake2-header h1 {
    color: #9fc7ff;
    text-shadow: 3px 3px 0 #17283d;
}

.quake2-header .status-line { color: #ffba54; }
.quake2-header div > p:last-child { color: #aebdd0; }
.quake2-project .rtx-gallery .gallery-item { border-color: #344f70; }
.quake2-project .rtx-gallery .gallery-item:last-child img { object-fit: cover; }
.quake2-story h2 { color: #b9d5ff; }
.quake2-story .download-button { background: #ffad45; }
.quake2-story .download-button:hover { background: #ffc477; }

.vkquake-header {
    padding: 18px 20px;
    border-left: 4px solid #e3432d;
    background: linear-gradient(90deg, rgba(100, 17, 12, .48), rgba(17, 51, 53, .2) 68%, transparent);
}

.vkquake-header h1 {
    color: #ff765d;
    text-shadow: 3px 3px 0 #44100b;
}

.vkquake-header .status-line { color: #82e6cf; }
.vkquake-header div > p:last-child { color: #c6b8a5; }
.vkquake-project .rtx-gallery .gallery-item { border-color: #70402f; }
.vkquake-project .rtx-gallery .gallery-item:last-child img { object-fit: cover; }
.vkquake-story h2 { color: #ff9a72; }
.vkquake-story .coming-soon { border-color: #62cdb8; color: #82e6cf; }

.vkquake-story .download-button { background: #62cdb8; }
.vkquake-story .download-button:hover { background: #91ead9; }

.topdoom-header {
    border-left-color: #f24c2b;
    background: linear-gradient(90deg, rgba(84, 13, 7, .5), rgba(75, 55, 8, .2) 72%, transparent);
}

.topdoom-header h1 { color: #ff7652; text-shadow: 3px 3px 0 #49100a; }
.topdoom-header .status-line { color: #ffd03d; }
.topdoom-header div > p:last-child { color: #d5b9a3; }
.topdoom-project .gallery-item { border-color: #6e291c; }
.topdoom-story h2 { color: #ff9073; }
.topdoom-story .download-button { background: #ffd03d; }
.topdoom-story .download-button:hover { background: #ffe278; }

.tuinrpg-header {
    border-left-color: #c791ff;
    background: linear-gradient(90deg, rgba(59, 21, 79, .52), rgba(111, 71, 7, .19) 72%, transparent);
}

.tuinrpg-header h1 { color: #e2b5ff; text-shadow: 3px 3px 0 #30103f; }
.tuinrpg-header .status-line { color: #ffd552; }
.tuinrpg-header div > p:last-child { color: #d4c4df; }
.tuinrpg-project .gallery-item { border-color: #563668; }
.tuinrpg-story h2 { color: #e4baff; }
.tuinrpg-story .download-button { background: #ffd552; }
.tuinrpg-story .download-button:hover { background: #ffe589; }

.ultimate3dmap-header {
    border-left-color: #35d8ff;
    background: linear-gradient(90deg, rgba(8, 62, 78, .56), rgba(92, 17, 12, .17) 72%, transparent);
}

.ultimate3dmap-header h1 {
    color: #79e6ff;
    text-shadow: 3px 3px 0 #073746;
}

.ultimate3dmap-header .status-line { color: #ff674d; }
.ultimate3dmap-header div > p:last-child { color: #b7d9e1; }
.ultimate3dmap-project .gallery-item { border-color: #246d80; }
.ultimate3dmap-gallery .gallery-item:last-child img { object-fit: cover; }
.ultimate3dmap-story h2 { color: #7ee8ff; }
.ultimate3dmap-story .download-button { background: #50dcff; }
.ultimate3dmap-story .download-button:hover { background: #8ceaff; }

.creators-header {
    border-left-color: #ff4e2e;
    background: linear-gradient(90deg, rgba(103, 20, 10, .58), rgba(107, 72, 8, .2) 72%, transparent);
}

.creators-header h1 {
    color: #ffb13b;
    text-shadow: 3px 3px 0 #5b130b;
}

.creators-header .status-line { color: #9cff68; }
.creators-header div > p:last-child { color: #f2c99f; }
.creators-project .gallery-item { border-color: #713323; }
.creators-gallery .gallery-item:last-child img { object-fit: cover; }
.creators-story h2 { color: #ffb565; }
.creators-story .download-button { background: #ff9f32; }
.creators-story .download-button:hover { background: #ffc067; }

.codydave-header {
    border-left-color: #f0a12e;
    background: linear-gradient(90deg, rgba(28, 79, 35, .62), rgba(111, 60, 12, .22) 72%, transparent);
}

.codydave-header h1 {
    color: #ffd05a;
    text-shadow: 3px 3px 0 #2f541e;
}

.codydave-header .status-line { color: #9cff68; }
.codydave-header div > p:last-child { color: #d5d9b4; }
.codydave-project .gallery-item { border-color: #55723a; }
.codydave-gallery .gallery-item:last-child img { object-fit: cover; }
.codydave-story h2 { color: #ffd56f; }
.codydave-story .coming-soon { border-color: #83d957; color: #a0ee74; }

.project-note {
    margin-top: 24px !important;
    padding: 12px 14px;
    border-left: 3px solid currentColor;
    color: #d7d2b5;
    background: rgba(255, 255, 255, .035);
    font-size: 12px !important;
    line-height: 1.65 !important;
    letter-spacing: .05em;
}

.stewie-header {
    border-left-color: #ff4938;
    background: linear-gradient(90deg, rgba(124, 8, 8, .58), rgba(40, 44, 112, .27) 72%, transparent);
}

.stewie-header h1 {
    color: #ffc63d;
    text-shadow: 3px 3px 0 #401069;
}

.stewie-header .status-line { color: #ff765d; }
.stewie-header div > p:last-child { color: #d9c9ff; }
.stewie-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stewie-gallery .gallery-item,
.snes-gallery .gallery-item,
.cleanup-gallery .gallery-item { aspect-ratio: 16 / 9; }
.stewie-gallery .gallery-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.stewie-project .gallery-item { border-color: #77362e; }
.stewie-project .gallery-item img { object-fit: cover; }
.stewie-project .rtx-gallery .gallery-item:last-child img,
.snes-project .rtx-gallery .gallery-item:last-child img,
.cleanup-project .rtx-gallery .gallery-item:last-child img { object-fit: cover; }
.stewie-story h2 { color: #ffc85a; }
.stewie-story .project-note { color: #ff9e74; }
.stewie-story .download-button { background: #ffc83d; }
.stewie-story .download-button:hover { background: #ffdf7d; }

.cleanup-header {
    border-left-color: #50d9df;
    background: linear-gradient(90deg, rgba(18, 76, 79, .56), rgba(112, 28, 13, .22) 72%, transparent);
}

.cleanup-header h1 {
    color: #d8f7f4;
    text-shadow: 3px 3px 0 #174d50;
}

.cleanup-header .status-line { color: #ff7b55; }
.cleanup-header div > p:last-child { color: #a9dbd8; }
.cleanup-project .gallery-item { border-color: #39797c; }
.cleanup-project .gallery-item img { object-fit: cover; }
.cleanup-story h2 { color: #74e6e2; }
.cleanup-story .project-note { color: #ffb26b; }
.cleanup-story .download-button { background: #64ded9; }
.cleanup-story .download-button:hover { background: #9cece9; }

.snes-header {
    border-left-color: #9d7cff;
    background: linear-gradient(90deg, rgba(45, 31, 98, .64), rgba(102, 81, 9, .2) 72%, transparent);
}

.snes-header h1 {
    color: #fff562;
    text-shadow: 3px 3px 0 #3b286f;
}

.snes-header .status-line { color: #ad90ff; }
.snes-header div > p:last-child { color: #d8ccff; }
.snes-project .gallery-item { border-color: #54427c; }
.snes-project .gallery-item img { object-fit: cover; }
.snes-story h2 { color: #fff36a; }
.snes-story .project-note { color: #b9a4ff; }
.snes-story .download-button { background: #fff052; }
.snes-story .download-button:hover { background: #fff68e; }

.soundtrack-player {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 54px;
    padding: 12px;
    border: 1px solid #55723a;
    border-left: 4px solid #f0a12e;
    background: linear-gradient(90deg, rgba(24, 65, 30, .52), rgba(0, 0, 0, .25));
}

.soundtrack-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 0 17px;
    border: 1px solid #f0a12e;
    color: #131008;
    background: #ffd05a;
    font: 700 12px/1 var(--pixel-font);
    cursor: pointer;
}

.soundtrack-button:hover,
.soundtrack-button:focus-visible { background: #ffe18a; }
.soundtrack-button[aria-pressed="true"] { color: #eaffde; background: #315e2f; }
.soundtrack-icon { width: 14px; font-size: 14px; text-align: center; }

.soundtrack-status {
    color: #a0ee74;
    font: 700 11px/1.4 var(--pixel-font);
    letter-spacing: .04em;
}

.project-audio {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 3px;
    accent-color: #83d957;
}

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

.topdoom-gallery .gallery-item:last-child img,
.tuinrpg-gallery .gallery-item:last-child img { object-fit: cover; }

.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--white);
    background: rgba(0, 0, 0, .94);
}

.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, .88); }

.lightbox figure {
    display: grid;
    place-items: center;
    gap: 12px;
    margin: 0;
}

.lightbox figure img {
    display: block;
    max-width: min(92vw, 1800px);
    max-height: 86vh;
    object-fit: contain;
}

.lightbox figcaption {
    max-width: 80vw;
    color: #bdb7b0;
    font: 700 11px/1.5 var(--pixel-font);
    text-align: center;
}

.lightbox-close,
.lightbox-arrow {
    position: fixed;
    z-index: 2;
    border: 0;
    color: var(--white);
    background: #111;
    font-family: var(--pixel-font);
    cursor: pointer;
}

.lightbox-close {
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    color: var(--green);
    font-size: 28px;
}

.lightbox-arrow {
    top: 50%;
    width: 52px;
    height: 68px;
    font-size: 40px;
    transform: translateY(-50%);
}

.lightbox-previous { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-close:hover,
.lightbox-arrow:hover { color: var(--orange); }

footer {
    padding: 17px 28px;
    border-top: 1px solid #242424;
    color: #666;
    font-size: 10px;
}

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

@media (max-width: 700px) {
    body { background-attachment: scroll; }
    .site-header { padding-inline: 18px; }
    .brand { max-width: 190px; font-size: 14px; }
    .page { display: block; }
    .project-links { padding: 16px 18px; border-right: 0; border-bottom: 1px solid #242424; }
    .project-links h2 { display: none; }
    .project-links { display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
    .project-menu-label { display: none; }
    .project-links a { flex: 0 0 auto; width: max-content; margin-bottom: 0; padding-block: 4px; }
    .project-page { padding: 38px 18px 62px; }
    .story { margin-top: 47px; }
    .rtx-header { gap: 15px; }
    .rtx-header > img { width: 68px; height: 68px; }
    .rtx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .soundtrack-player { align-items: stretch; flex-direction: column; }
    .soundtrack-button { justify-content: center; }
    .social-links { grid-template-columns: 1fr; }
    .lightbox-arrow { top: auto; bottom: 16px; width: 48px; height: 48px; transform: none; }
    .lightbox figure img { max-width: 96vw; max-height: 78vh; }
    footer { padding-inline: 18px; }
}

@media (max-width: 520px) {
    .site-header { min-height: 60px; }
    .project-links { gap: 16px; padding-block: 12px; }
    .project-links a { font-size: 12px; line-height: 1.2; }
    .project-page { padding: 30px 14px 54px; }
    .rtx-header,
    .project-title { margin-bottom: 20px; padding: 15px 14px; }
    .rtx-header h1 { font-size: clamp(26px, 10.5vw, 36px); line-height: 1; overflow-wrap: anywhere; }
    .rtx-header div > p:last-child { font-size: 10px; line-height: 1.45; }
    .status-line { font-size: 9px; line-height: 1.5; }
    .rtx-gallery,
    .topdoom-gallery { grid-template-columns: 1fr; gap: 12px; }
    .rtx-gallery .gallery-item { aspect-ratio: 16 / 9; }
    .story { margin-top: 38px; }
    .story h2 { font-size: 20px; }
    .story p { font-size: 18px; line-height: 1.75; }
    .project-actions { align-items: stretch; flex-direction: column; }
    .project-actions a { width: 100%; text-align: center; }
    .download-button,
    .source-button,
    .coming-soon { line-height: 1.45; }
    .lightbox-close { top: 10px; right: 10px; }
    .lightbox-previous { left: 10px; }
    .lightbox-next { right: 10px; }
    .lightbox figcaption { max-width: 90vw; padding-inline: 8px; }
    .junk-intro { margin-top: 34px; }
    .junk-card { grid-template-columns: 1fr; }
    .junk-number { place-items: center start; padding: 12px 16px; border-right: 0; border-bottom: 1px dashed #574f2a; font-size: 16px; }
    .junk-card-content { padding: 22px 16px 25px; }
    .junk-preview { float: none; width: min(100%, 320px); margin: 0 0 18px; }
    .junk-download { width: 100%; text-align: center; }
}

@media (hover: none), (pointer: coarse) {
    .project-preview { cursor: default; }
    .image-lens { display: none; }
}