body {
    background-color: transparent;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    /* Ensure full height */
}

#site-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: -2;
    background-color: #050403;
}

/* A low-resolution woodland, anchored to the viewport behind the page. */
#autumn-trees {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(38vh, 330px);
    z-index: -1;
    pointer-events: none;
    image-rendering: pixelated;
}

#autumn-leaves {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    image-rendering: pixelated;
}

@media (max-width: 768px) {
    #autumn-trees {
        display: none;
    }
}

.leaves-toggle {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 12px;
    border: 2px solid #62503e;
    border-radius: 3px;
    background: repeating-linear-gradient(0deg, #17130f 0 2px, #120f0c 2px 4px);
    color: #ff8b3d;
    box-shadow: 3px 3px 0 #000, inset 0 1px 0 #35291e;
    font: 20px/1 'Jersey 10', monospace;
    letter-spacing: 1px;
    cursor: pointer;
    touch-action: manipulation;
}

.leaves-toggle[hidden] { display: none; }
.leaves-toggle:hover { border-color: #ff8b3d; }
.leaves-toggle:focus-visible { outline: 2px solid #ff8b3d; outline-offset: 4px; }
.leaves-toggle:active { transform: translateY(1px); }
.leaves-toggle__icon { width: 24px; height: 24px; }
.leaves-toggle__light { width: 5px; height: 5px; background: #ff8b3d; box-shadow: 0 0 5px #ff6b0055; }
.leaves-toggle[data-mode="off"] { color: #99928a; border-color: #3e3933; }
.leaves-toggle[data-mode="off"] .leaves-toggle__light { background: #504a43; box-shadow: none; }

.status-cover-link {
    display: inline-block;
    vertical-align: -0.4em;
    margin-right: 3px;
    line-height: 0;
}

.status-cover {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border: 1px solid #62503e;
    image-rendering: auto;
}

.status-cover-link:focus-visible { outline: 2px solid #ff8b3d; outline-offset: 3px; }

main {
    width: 900px;
    display: flex;
    gap: 20px;
    margin: 0;
}

.column-left {
    flex: 3;
}

.column-right {
    flex: 1;
}

.card {
    border: 4.5px solid #333333;
    border-radius: 4px;
    padding: 4px;
    background-color: #050403;
    margin-bottom: 20px;
}

.card:last-child {
    margin-bottom: 0;
}

.card[data-section="status"] {
    position: relative;
}

.card[data-section="status"] { min-height: 150px; overflow: hidden; }
.status-float { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.status-float img {
    position: absolute;
    width: 128px;
    height: 128px;
    left: calc(50% - 64px);
    top: calc(50% - 64px);
    image-rendering: pixelated;
    opacity: .28;
    animation: status-float 8s ease-in-out infinite;
}
.card[data-section="status"] .card-content { text-shadow: 0 1px 3px #000, 0 0 4px #000; }
@keyframes status-float { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .status-float img { animation: none; } }

.card[data-section="status"] .card-header,
.card[data-section="status"] .card-content {
    position: relative;
    z-index: 1;
}

.card-header {
    font-family: 'Jersey 10', sans-serif;
    font-size: 2rem;
    color: #ff6b00;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #ff8b3d;
    margin-bottom: 4px;
    position: relative;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header span {
    background: repeating-linear-gradient(0deg,
            #ff6b00,
            #ff6b00 2px,
            #cc5500 2px,
            #cc5500 4px);
    background-size: 100% 4px;
    animation: scan 0.5s steps(4, end) infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #ff8b3d;
}

.profile-section {
    display: flex;
    gap: 20px;
    color: #ffffff;
    font-family: "MS UI Gothic", monospace;
    padding: 4px 12px;
}

.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.avatar-placeholder {
    width: 150px;
    height: 150px;
    border: 1.5px solid #ff8b3d;
    overflow: hidden;
    position: relative;
    background: url('back.gif');
    background-size: cover;
}

.avatar-placeholder img {
    width: 150.0px;
    position: absolute;
    /* top: -10px; */
    /* left: -33.75px; */
}

.bullet {
    color: #ff6b00;
}

.pronouns {
    font-size: 0.9rem;
    color: #ff8b3d;
    font-family: "MS UI Gothic", monospace;
}

.bio {
    font-size: 1rem;
    line-height: 1.4;
    font-family: "MS UI Gothic", monospace;
}

.title {
    font-family: 'Jersey 10', sans-serif;
    font-size: 6.5rem;
    color: #ff6b00;
    letter-spacing: -2px;
    text-transform: uppercase;
    -webkit-text-stroke: 2px #ff8b3d;
    margin: 1px 0;
    line-height: 0.85;
    padding: 0;
}

/* Gecko (Firefox) already shows a sliver of gap between letters; Blink’s stroke fills those gaps
   unless tracking is slightly looser. Only Chromium — leaves Firefox exactly as before. */
@media screen and (min-width: 769px) {
    html.ua-chromium .title {
        letter-spacing: -1px;
    }
}

.title-content {
    position: relative;
    display: inline-block;
    animation: flicker 5s steps(2, end) infinite;
}

.tight-ly {
    display: inline-block;
    margin-right: -6px;
}

.title-content::before {
    content: "POLYCARBONAT";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* No stroke on scanline layer — avoids double-outline with real text in Chromium */
    -webkit-text-stroke: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
            #ff6b00,
            #ff6b00 2px,
            #cc5500 2px,
            #cc5500 4px);
    animation: scan 0.5s steps(4, end) infinite;
    background-size: 100% 4px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.broken {
    position: relative;
    display: inline-block;
    transform: rotate(15deg) translateY(5px);
    animation: broken-flicker 4.7s steps(2, end) infinite;
}

.broken::before {
    content: "E";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-text-stroke: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
            #ff6b00,
            #ff6b00 2px,
            #cc5500 2px,
            #cc5500 4px);
    animation: scan 0.5s steps(4, end) infinite;
    background-size: 100% 4px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

@keyframes scan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 4px;
    }
}

@keyframes flicker {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.85;
    }

    50% {
        opacity: 0.95;
    }

    51% {
        opacity: 0.8;
    }

    52% {
        opacity: 0.9;
    }

    53% {
        opacity: 1;
    }

    75% {
        opacity: 0.85;
    }

    100% {
        opacity: 1;
    }
}

@keyframes broken-flicker {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.75;
    }

    50% {
        opacity: 0.9;
    }

    51% {
        opacity: 0.7;
    }

    52% {
        opacity: 0.8;
    }

    53% {
        opacity: 1;
    }

    75% {
        opacity: 0.75;
    }

    100% {
        opacity: 1;
    }
}

.header-container {
    display: none;
}

.pixel-heart {
    display: grid;
    grid-template-columns: repeat(9, 2.7px);
    grid-template-rows: repeat(9, 2.7px);
    gap: 0;
    transform: translateY(0px);
}

.pixel-heart .pixel {
    width: 2.7px;
    height: 2.7px;
}

.outline {
    background-color: #333333;
}

.nb-yellow {
    background-color: #fcac34;
}

.nb-white {
    background-color: #FFFFFF;
}

.nb-purple {
    background-color: #9C59D1;
}

.black {
    background-color: #050403;
}

.pixel-heart.small {
    transform: scale(0.75) translateY(-1px);
}

.pixel-star {
    display: grid;
    grid-template-columns: repeat(7, 2.7px);
    grid-template-rows: repeat(7, 2.7px);
    gap: 0;
    transform: translateY(0px);
}

.pixel-star .pixel {
    width: 2.7px;
    height: 2.7px;
}

.pixel-star .star {
    background-color: #FFD700;
}

.star-link {
    color: #ffffff;
    text-decoration: none;
    font-family: "MS UI Gothic", monospace;
    font-size: 1rem;
    display: block;
    padding: 4px 12px;
}

.star-link:hover {
    color: #ff8b3d;
}

.star-link::before {
    content: "> ";
    color: #ff6b00;
}

.badge-banner {
    width: 100%;
    height: 31px;
    overflow: hidden;
    background: #050403;
    border: 1.5px solid #333333;
    margin-top: 12px;
    margin-bottom: 20px;
    position: relative;
}

.badge-scroll {
    display: flex;
    gap: 10px;
    position: absolute;
    left: 0;
    animation: scroll 30s linear infinite;
}

.badge-scroll:hover {
    animation-play-state: paused;
}

.badge {
    width: 88px;
    height: 31px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-22 * (88px + 10px)));
        /* Move by the width of one complete set */
    }
}

.card-content {
    padding: 12px;
    font-family: "MS UI Gothic", monospace;
    color: #ffffff;
}

.status-header,
.status-header span {
    color: #00ff00;
    -webkit-text-stroke: 1px #00cc00;
}

.status-header span {
    background: repeating-linear-gradient(0deg,
            #00ff00,
            #00ff00 2px,
            #00cc00 2px,
            #00cc00 4px);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.webring-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 4px;
}

.album {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.album-cover {
    width: 100%;
    height: auto;
    border: 1.5px solid #333333;
}

.album-info {
    padding: 0 4px;
}

.album-title {
    color: #ff6b00;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.album-artist {
    color: #ff8b3d;
    font-size: 0.8rem;
}

.pixel-note {
    display: grid;
    grid-template-columns: repeat(9, 2.7px);
    grid-template-rows: repeat(9, 2.7px);
    gap: 0;
    transform: translateY(0px);
}

.pixel-note .pixel {
    width: 2.7px;
    height: 2.7px;
}

.pixel-note .note {
    background-color: #E6E6FA;
}

.album-info .album-artist {
    color: #666;
    font-size: 0.9em;
}

/* Project Section Styles */
.project {
    padding: 15px;
    border: 1px solid #333;
    background-color: #0a0a0a;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
}

.project h3 {
    margin: 0 0 10px 0;
    color: #e6e6fa;
    font-family: 'Space Mono', monospace;
    font-size: 1.1em;
}

.project--text {
    grid-template-columns: 1fr;
}

.project-details {
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
}

.project-details span {
    color: #666;
    font-size: 0.9em;
    font-family: 'Space Mono', monospace;
}

.project p {
    margin: 10px 0;
    color: #999;
    font-size: 0.95em;
    line-height: 1.4;
}

.kanagawa-container {
    display: flex;
    border: 1.5px solid #ff8b3d;
    margin: 0;
    overflow: hidden;
    max-height: 250px;
    aspect-ratio: 1 / 1;
    min-width: 0;
}

.kanagawa-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.project-link {
    display: inline-block;
    color: #e6e6fa;
    text-decoration: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.9em;
    margin-top: 10px;
    transition: color 0.2s;
}

.project-link:hover {
    color: #fff;
}

/* Footer Styles */
.footer {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
    font-family: 'Space Mono', monospace;
    color: #666;
    font-size: 0.9em;
}

.footer span {
    display: inline-block;
    position: relative;
}

.footer span::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    width: 15px;
    height: 1px;
    background: #333;
}

.footer span::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 50%;
    width: 15px;
    height: 1px;
    background: #333;
}

/* Mobile Layout */
@media screen and (max-width: 768px) {
    body {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    main {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    .title {
        font-size: 14vw;
        text-align: center;
        margin: 5px 0 15px 0;
        padding: 0;
        line-height: 1;
        letter-spacing: -0.02em;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        white-space: nowrap;
    }

    .title::before {
        display: none;
    }

    .broken::before {
        display: none;
    }

    .broken {
        display: inline-block;
        transform: rotate(15deg) translateY(2px);
        white-space: nowrap;
    }

    .column-left {
        width: 100%;
        order: unset;
        display: contents;
    }

    .column-right {
        width: 100%;
        margin-top: 0;
        display: contents;
    }

    .card {
        margin-bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Explicit ordering */
    .card[data-section="about"] {
        order: 1;
    }

    .badge-banner {
        order: 2;
    }

    .card[data-section="stars"] {
        order: 3;
    }

    .card[data-section="status"] {
        order: 4;
    }

    .card[data-section="setup"] {
        order: 5;
    }

    .card[data-section="albums"] {
        order: 6;
    }

    .card[data-section="projects"] {
        order: 7;
    }

    .card[data-section="webring"] {
        order: 8;
    }

    .card-header {
        font-size: 1.8rem;
    }

    .profile-section {
        flex-direction: column;
        align-items: center;
    }

    .avatar-container {
        margin-bottom: 15px;
    }

    .bio {
        text-align: left;
        width: 100%;
    }

    .album-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .album-info {
        margin-bottom: 5px;
    }

    .badge-banner {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .project {
        padding: 12px;
    }

    .project h3 {
        font-size: 1em;
    }

    .footer {
        padding: 15px 10px;
    }
}

.card[data-section="albums"] {
    position: relative;
}

.hanging-sign {
    position: absolute;
    left: -25px;
    top: 110px;
    image-rendering: pixelated;
    display: none;
    transform: scale(2.5);
    transform-origin: right center;
}

@media screen and (min-width: 769px) {
    .hanging-sign {
        display: block;
    }
}

.hanging-sign-right {
    position: absolute;
    right: -75px;
    top: 90px;
    image-rendering: pixelated;
    display: none;
    transform: scale(2.5) scaleX(-1);
    transform-origin: left center;
}

@media screen and (min-width: 769px) {
    .hanging-sign-right {
        display: block;
    }
}

.sitting-cat {
    position: absolute;
    top: 35px;
    /* Containing block is body (not the narrow card) so 50% matches the old layout */
    left: calc(50% - 415px);
    transform: scale(1.25);
    image-rendering: pixelated;
    display: none;
    z-index: 2;
}

/* Separate the existing sprite at the tail root; only the tail moves. */
.sitting-cat { width: 64px; height: 64px; }
.sitting-cat img { position: absolute; inset: 0; width: 64px; height: 64px; }
.sitting-cat__body { clip-path: inset(0 28.125% 0 0); }
.sitting-cat__tail {
    clip-path: inset(43.75% 0 28.125% 71.875%);
    transform-origin: 70.3125% 65.625%;
    animation: mewo-tail-wag 3.2s steps(8, end) infinite;
}
@keyframes mewo-tail-wag {
    0%, 100% { transform: rotate(-12deg); }
    50% { transform: rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sitting-cat__tail { animation: none; }
}

@media (min-width: 768px) {
    .sitting-cat {
        display: block;
    }
}

.setup-content {
    padding: 12px;
    font-family: "MS UI Gothic", monospace;
    color: #ffffff;
}

/* Current setup: full-width 3D to card edges, title overlaid on top */
.card[data-section="setup"] {
    order: 5;
    padding: 0;
    overflow: hidden;
}

.setup-viewport-block {
    position: relative;
    width: 100%;
}

.card[data-section="setup"] .setup-header-overlap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
    padding: 8px 12px 28px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(5, 4, 3, 0.94) 0%,
        rgba(5, 4, 3, 0.45) 45%,
        transparent 100%);
}

.card[data-section="setup"] .setup-content--specs {
    padding: 12px;
    margin: 0;
    background-color: #050403;
}

/* 3D laptop (Three.js canvas): hologram edge reveal; sweep-in when ready */
.setup-model-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    box-sizing: border-box;
    background: #0c0b0a;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: brightness(1.2) saturate(1.05);
}

.setup-model-wrap.is-loaded {
    animation: setup-model-sweep-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes setup-model-sweep-in {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        filter: brightness(1.35) saturate(1.12);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
        filter: brightness(1) saturate(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .setup-model-wrap {
        opacity: 1;
        clip-path: none;
        filter: none;
    }

    .setup-model-wrap.is-loaded {
        animation: none;
    }
}

.setup-model-wrap canvas.setup-model {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    touch-action: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.setup-specs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.setup-specs li {
    padding: 4px 0;
    color: #ffffff;
}

.setup-specs li::before {
    content: "> ";
    color: #ff6b00;
}

.card[data-section="albums"] {
    order: 6;
}

/* —— Favorite listens: skeuomorphic shelf (desktop only) —— */
.albums-shelf {
    /* Establish CB for corner deck; without this, absolute deck uses card-content and gets clipped wrong */
    position: relative;
}

.albums-shelf-stage {
    display: block;
}

.albums-fairy-lights {
    display: none;
}

.album-package {
    display: contents;
}

.album-vinyl-slide {
    display: none;
}

.albums-shelf-board,
.albums-deck,
.albums-tonearm-layer {
    display: none;
}

@keyframes albums-vinyl-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes albums-vinyl-spec-drift {
    0%,
    100% {
        opacity: 0.55;
        transform: rotate(-18deg) scale(1);
    }

    50% {
        opacity: 0.85;
        transform: rotate(-14deg) scale(1.02);
    }
}

@keyframes albums-fairy-twinkle {

    0%,
    100% {
        opacity: 0.8;
        filter: brightness(0.96) drop-shadow(0 0 1px rgba(255, 255, 255, 0.12));
    }

    50% {
        opacity: 1;
        filter: brightness(1.28) drop-shadow(0 0 4px rgba(255, 255, 255, 0.32));
    }
}

@media screen and (min-width: 769px) {
    .card[data-section="albums"] {
        padding: 0;
        /* hanging-sign sits at left: -25px; must not clip */
        overflow: visible;
        min-height: clamp(228px, 29vw, 310px);
    }

    .card[data-section="albums"] .card-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin-bottom: 0;
        padding: 8px 14px 10px;
        z-index: 18;
        pointer-events: none;
        background: linear-gradient(180deg,
                rgba(12, 8, 6, 0.88) 0%,
                rgba(18, 12, 9, 0.42) 52%,
                transparent 100%);
    }

    .card[data-section="albums"] .hanging-sign {
        z-index: 22;
    }

    .card[data-section="albums"] .card-content {
        position: relative;
        padding: 0;
        min-height: clamp(228px, 29vw, 310px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .albums-shelf {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: clamp(228px, 29vw, 310px);
        padding-bottom: clamp(26px, 3.2vh, 36px);
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(24, 18, 12, 0.35) 0%, rgba(10, 7, 5, 0.55) 100%),
            url("albums/images/background.jpg") center / cover no-repeat;
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35);
    }

    .albums-shelf-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        flex-shrink: 0;
        position: relative;
        z-index: 4;
    }

    .albums-shelf-board {
        display: block;
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 92%;
        max-width: 820px;
        height: clamp(36px, 8vh, 52px);
        margin: 0 auto;
        flex-shrink: 0;
        border-radius: 3px 3px 8px 8px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, transparent 22%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, transparent 12%, transparent 88%, rgba(0, 0, 0, 0.45) 100%),
            url("albums/images/background.jpg") center / 180% auto;
        filter: brightness(0.42) saturate(0.88) contrast(1.08);
        transform: perspective(480px) rotateX(52deg);
        transform-origin: 50% 0%;
        box-shadow:
            0 6px 0 rgba(22, 16, 12, 0.95),
            0 28px 42px rgba(0, 0, 0, 0.58),
            0 48px 64px rgba(0, 0, 0, 0.25),
            inset 0 3px 5px rgba(255, 255, 255, 0.18),
            inset 0 -6px 16px rgba(0, 0, 0, 0.5);
        z-index: 1;
        pointer-events: none;
    }

    .albums-deck {
        display: block;
        position: absolute;
        width: min(46vw, 300px);
        height: min(46vw, 300px);
        right: max(-150px, -15vw);
        bottom: max(-150px, -14vw);
        z-index: 8;
        pointer-events: none;
    }

    /* PNG tonearm (asset has pivot left, headshell right — mirror so pivot tucks to shelf corner) */
    .albums-tonearm-layer {
        display: block;
        position: absolute;
        width: min(36vw, 164px);
        height: auto;
        /* larger right inset = nudge left on screen so it isn’t lost past the card edge */
        right: clamp(22px, 5.5vw, 56px);
        bottom: clamp(34px, 10vh, 82px);
        z-index: 16;
        pointer-events: none;
        overflow: visible;
        line-height: 0;
    }

    .albums-tonearm-img {
        display: block;
        width: 100%;
        height: auto;
        transform: scaleX(-1);
        transform-origin: right center;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    }

    /* Platter only — filter stays here so it does not flatten the tonearm */
    .albums-corner-vinyl {
        position: absolute;
        inset: 0;
        overflow: visible;
        pointer-events: none;
        filter: drop-shadow(-4px 8px 18px rgba(0, 0, 0, 0.65));
    }

    .albums-corner-vinyl-spin {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        transform-origin: center;
        animation: albums-vinyl-spin 11s linear infinite;
        will-change: transform;
    }

    .albums-corner-vinyl-grooves {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 50%,
                #0a0a0a 0,
                #0a0a0a 1.15%,
                #1a1512 1.2%,
                #1a1512 1.7%,
                transparent 1.75%),
            radial-gradient(circle at 50% 50%,
                transparent 15%,
                rgba(255, 255, 255, 0.04) 15.2%,
                transparent 15.5%,
                transparent 28%,
                rgba(0, 0, 0, 0.22) 28.1%,
                transparent 28.4%,
                transparent 42%,
                rgba(255, 255, 255, 0.025) 42.1%,
                transparent 42.4%,
                transparent 56%,
                rgba(0, 0, 0, 0.18) 56.05%,
                transparent 56.2%,
                transparent 100%),
            repeating-radial-gradient(circle at 50% 50%,
                rgba(55, 52, 50, 0.95) 0,
                rgba(55, 52, 50, 0.95) 1px,
                rgba(22, 20, 19, 0.98) 1px,
                rgba(22, 20, 19, 0.98) 2px),
            repeating-radial-gradient(circle at 50.8% 49.2%,
                transparent 0,
                transparent 1.5px,
                rgba(70, 70, 72, 0.12) 1.5px,
                rgba(70, 70, 72, 0.12) 3px);
        box-shadow:
            inset 0 0 55px rgba(0, 0, 0, 0.94),
            inset 0 2px 5px rgba(255, 255, 255, 0.07),
            inset 0 -8px 22px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(10, 8, 6, 0.9);
    }

    .albums-corner-vinyl-label {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 31%;
        height: 31%;
        margin: -15.5% 0 0 -15.5%;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 50%, rgba(10, 6, 6, 0.45) 42%, transparent 46%),
            radial-gradient(circle at 32% 28%, rgba(255, 245, 238, 0.22), rgba(255, 255, 255, 0) 40%),
            conic-gradient(from 220deg at 50% 50%,
                rgba(0, 0, 0, 0.12),
                rgba(255, 255, 255, 0.04),
                rgba(0, 0, 0, 0.1),
                rgba(255, 255, 255, 0.035),
                rgba(0, 0, 0, 0.12)),
            radial-gradient(circle at 50% 50%, #d42828 0%, #a01515 36%, #5f0a0a 68%, #240404 100%);
        box-shadow:
            inset 0 1px 3px rgba(255, 255, 255, 0.18),
            inset 0 -3px 10px rgba(0, 0, 0, 0.58),
            0 3px 12px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(20, 10, 10, 0.6);
    }

    /* Spindle hole (paints above label fills) */
    .albums-corner-vinyl-label::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12%;
        height: 12%;
        min-width: 2px;
        min-height: 2px;
        max-width: 5px;
        max-height: 5px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #2a2a2a, #050505 65%, #000000 100%);
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 1);
        pointer-events: none;
    }

    .albums-corner-vinyl-shine {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: linear-gradient(118deg,
                transparent 34%,
                rgba(255, 255, 255, 0.04) 40%,
                rgba(255, 255, 255, 0.26) 45.5%,
                rgba(255, 255, 255, 0.08) 48%,
                transparent 53%);
        mix-blend-mode: soft-light;
        pointer-events: none;
        /* keep label / hole from looking chalky */
        -webkit-mask-image: radial-gradient(circle at 50% 50%,
                transparent 0%,
                transparent 21%,
                rgba(0, 0, 0, 0.35) 28%,
                black 36%);
        mask-image: radial-gradient(circle at 50% 50%,
                transparent 0%,
                transparent 21%,
                rgba(0, 0, 0, 0.35) 28%,
                black 36%);
    }

    .albums-corner-vinyl-spec {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: linear-gradient(52deg,
                transparent 46%,
                rgba(255, 255, 255, 0.1) 48.5%,
                rgba(255, 245, 230, 0.32) 50%,
                rgba(255, 255, 255, 0.12) 51.5%,
                transparent 54%);
        mix-blend-mode: overlay;
        pointer-events: none;
        animation: albums-vinyl-spec-drift 5.5s ease-in-out infinite;
        -webkit-mask-image: radial-gradient(circle at 50% 50%,
                transparent 0%,
                transparent 20%,
                rgba(0, 0, 0, 0.45) 27%,
                black 34%);
        mask-image: radial-gradient(circle at 50% 50%,
                transparent 0%,
                transparent 20%,
                rgba(0, 0, 0, 0.45) 27%,
                black 34%);
    }

    .albums-fairy-lights {
        display: block;
        width: 100%;
        margin: 0 auto;
        --fairy-xpad: clamp(12px, 3vw, 28px);
        padding: clamp(5px, 1.2vw, 10px) var(--fairy-xpad) clamp(3px, 0.8vw, 6px);
        position: relative;
        z-index: 3;
        pointer-events: none;
        box-sizing: border-box;
        overflow: visible;
    }

    .albums-fairy-strand--front {
        position: relative;
        z-index: 2;
    }

    /* Warm strand behind: tilt — translateX(-50%) centers the widened row; -45% pulled it right and shorted the left */
    .albums-fairy-strand--back {
        position: absolute;
        left: 50%;
        top: clamp(1px, 0.35vw, 4px);
        width: calc(100% + clamp(24px, 6vw, 52px));
        max-width: none;
        transform: translateX(-50%) rotate(-11.5deg) scale(0.94);
        transform-origin: 50% 0;
        z-index: 1;
        opacity: 0.86;
        filter: saturate(0.92) brightness(1.02);
    }

    .albums-fairy-strand--back .albums-fairy-string::before {
        opacity: 0.72;
        /* Extra reach on the left (tilt + scale shrink the apparent end) */
        left: calc(-1 * var(--fairy-xpad) - clamp(14px, 3.5vw, 32px));
        right: calc(-1 * var(--fairy-xpad) - clamp(4px, 1vw, 10px));
    }

    .albums-fairy-string {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0;
        position: relative;
        height: 26px;
        overflow: visible;
    }

    /* Cord spans full row; deep sag to match bulb translateY */
    .albums-fairy-string::before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--fairy-xpad));
        right: calc(-1 * var(--fairy-xpad));
        top: 0;
        height: 22px;
        width: auto;
        border: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 26'%3E%3Cpath d='M0 2.5 Q50 21 100 2.5' fill='none' stroke='%232a201a' stroke-width='1.45' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center top;
        pointer-events: none;
    }

    .albums-fairy-bulb {
        --fairy-sag: 0px;
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        width: clamp(2.5px, 0.55vw, 3.5px);
        height: clamp(3.5px, 0.78vw, 5px);
        margin-top: 3px;
        transform: translateY(var(--fairy-sag));
        border-radius: 45% 45% 50% 50%;
        background: linear-gradient(180deg, var(--bulb-top) 0%, var(--bulb-mid) 52%, var(--bulb-deep) 100%);
        box-shadow:
            0 0 2px 0.5px var(--bulb-glow-a),
            0 0 7px 1.5px var(--bulb-glow-b),
            inset 0 1px 0.5px rgba(255, 255, 255, 0.42);
        animation: albums-fairy-twinkle var(--fairy-tw-dur, 2.5s) ease-in-out infinite;
        animation-delay: var(--fairy-tw-delay, 0s);
    }

    /* Warm white / yellow */
    .albums-fairy-bulb:nth-child(4n + 1) {
        --bulb-top: #fffef6;
        --bulb-mid: #fff3b0;
        --bulb-deep: #e8c030;
        --bulb-glow-a: rgba(255, 240, 160, 0.9);
        --bulb-glow-b: rgba(255, 220, 80, 0.45);
        --fairy-tw-dur: 2.35s;
        --fairy-tw-delay: 0s;
    }

    /* Red */
    .albums-fairy-bulb:nth-child(4n + 2) {
        --bulb-top: #ffb0b0;
        --bulb-mid: #e83030;
        --bulb-deep: #901010;
        --bulb-glow-a: rgba(255, 100, 100, 0.88);
        --bulb-glow-b: rgba(255, 60, 60, 0.42);
        --fairy-tw-dur: 2.8s;
        --fairy-tw-delay: 0.25s;
    }

    /* Blue */
    .albums-fairy-bulb:nth-child(4n + 3) {
        --bulb-top: #c8e8ff;
        --bulb-mid: #3088e8;
        --bulb-deep: #143c8a;
        --bulb-glow-a: rgba(120, 190, 255, 0.88);
        --bulb-glow-b: rgba(80, 160, 255, 0.42);
        --fairy-tw-dur: 2.55s;
        --fairy-tw-delay: 0.5s;
    }

    /* Green */
    .albums-fairy-bulb:nth-child(4n + 4) {
        --bulb-top: #d8ffc8;
        --bulb-mid: #38c848;
        --bulb-deep: #146820;
        --bulb-glow-a: rgba(100, 255, 140, 0.75);
        --bulb-glow-b: rgba(60, 220, 100, 0.38);
        --fairy-tw-dur: 2.65s;
        --fairy-tw-delay: 0.75s;
    }

    /* Parabolic sag: deepest at center; tracks the deeper cord */
    .albums-fairy-bulb:nth-child(1),
    .albums-fairy-bulb:nth-child(15) {
        --fairy-sag: 0px;
    }

    .albums-fairy-bulb:nth-child(2),
    .albums-fairy-bulb:nth-child(14) {
        --fairy-sag: 1.5px;
    }

    .albums-fairy-bulb:nth-child(3),
    .albums-fairy-bulb:nth-child(13) {
        --fairy-sag: 3px;
    }

    .albums-fairy-bulb:nth-child(4),
    .albums-fairy-bulb:nth-child(12) {
        --fairy-sag: 4.5px;
    }

    .albums-fairy-bulb:nth-child(5),
    .albums-fairy-bulb:nth-child(11) {
        --fairy-sag: 6px;
    }

    .albums-fairy-bulb:nth-child(6),
    .albums-fairy-bulb:nth-child(10) {
        --fairy-sag: 7px;
    }

    .albums-fairy-bulb:nth-child(7),
    .albums-fairy-bulb:nth-child(9) {
        --fairy-sag: 7.5px;
    }

    .albums-fairy-bulb:nth-child(8) {
        --fairy-sag: 8px;
    }

    /* Back row: all warm white / yellow (overrides nth-color inside this strand) */
    .albums-fairy-strand--back .albums-fairy-bulb {
        --bulb-top: #fffef8;
        --bulb-mid: #fff6c4;
        --bulb-deep: #e8c038;
        --bulb-glow-a: rgba(255, 248, 200, 0.82);
        --bulb-glow-b: rgba(255, 225, 100, 0.34);
        --fairy-tw-dur: 2.85s;
        --fairy-tw-delay: 0.35s;
        box-shadow:
            0 0 1.5px 0.35px var(--bulb-glow-a),
            0 0 5px 1px var(--bulb-glow-b),
            inset 0 1px 0.4px rgba(255, 255, 255, 0.45);
    }

    .card[data-section="albums"] .album-grid {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-end;
        gap: clamp(10px, 2.2vw, 26px);
        padding: 26px clamp(12px, 3vw, 28px) 0;
        margin: 0 auto;
        margin-bottom: clamp(-12px, -1.4vh, -5px);
        box-sizing: border-box;
        width: 100%;
    }

    .card[data-section="albums"] .album {
        position: relative;
        flex: 0 1 auto;
        width: clamp(76px, 15vw, 124px);
        max-width: 124px;
        transform-style: flat;
    }

    .card[data-section="albums"] .album-package {
        display: block;
        position: relative;
        width: 100%;
        isolation: isolate;
        transform-style: flat;
        perspective: 900px;
    }

    .card[data-section="albums"] .album-vinyl-slide {
        display: block;
        position: absolute;
        width: 86%;
        aspect-ratio: 1;
        left: 50%;
        top: 50%;
        margin-left: -43%;
        margin-top: -43%;
        border-radius: 50%;
        z-index: 0;
        background:
            radial-gradient(circle at 50% 50%, rgba(200, 50, 50, 0.2) 0%, transparent 26%),
            repeating-radial-gradient(circle at 50% 50%,
                #2a2a2a 0,
                #2a2a2a 1px,
                #1a1a1a 1px,
                #1a1a1a 2.5px);
        box-shadow:
            inset 0 0 22px rgba(0, 0, 0, 0.95),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        /* Same depth entire tween — only X moves so the disc never crosses the jacket plane */
        transform: translate3d(0, 0, -32px) scale(0.88);
        transition: transform 0.4s cubic-bezier(0.34, 1.15, 0.64, 1);
    }

    .card[data-section="albums"] .album-vinyl-slide::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 30%;
        height: 30%;
        margin: -15% 0 0 -15%;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%),
            radial-gradient(circle at 50% 50%, #c41e1e, #6b0a0a);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
    }

    .card[data-section="albums"] .album:hover .album-vinyl-slide {
        transform: translate3d(-40%, 0, -32px) scale(0.88);
    }

    .card[data-section="albums"] .album-cover {
        position: relative;
        z-index: 2;
        width: 100%;
        height: auto;
        display: block;
        border-radius: 2px;
        border: 1px solid rgba(20, 14, 10, 0.85);
        object-fit: cover;
        aspect-ratio: 1;
        transform: perspective(720px) rotateX(14deg) rotateY(-8deg) translateZ(8px);
        transform-origin: 50% 100%;
        box-shadow:
            0 2px 0 rgba(0, 0, 0, 0.25),
            0 8px 14px rgba(0, 0, 0, 0.42),
            0 20px 36px rgba(0, 0, 0, 0.45),
            -6px 5px 14px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
        transition: transform 0.32s ease, box-shadow 0.32s ease;
    }

    .card[data-section="albums"] .album:hover .album-cover {
        transform: perspective(720px) rotateX(9deg) rotateY(-5deg) translateZ(16px) scale(1.02);
        box-shadow:
            0 4px 0 rgba(0, 0, 0, 0.2),
            0 12px 22px rgba(0, 0, 0, 0.4),
            0 26px 48px rgba(0, 0, 0, 0.48),
            -7px 9px 20px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .card[data-section="albums"] .album-info {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: 100%;
        margin-bottom: 10px;
        margin-top: 0;
        width: max-content;
        max-width: min(240px, 28vw);
        padding: 10px 14px;
        box-sizing: border-box;
        transform: translateX(-50%) translateY(8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.22s ease,
            transform 0.22s ease,
            visibility 0.22s;
        z-index: 25;
        text-align: center;
        background: rgba(8, 6, 5, 0.94);
        border: 1px solid rgba(255, 107, 0, 0.45);
        border-radius: 4px;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        overflow-wrap: anywhere;
    }

    .card[data-section="albums"] .album:hover .album-info {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .card[data-section="albums"] .album-info .album-title {
        color: #ff6b00;
        font-size: 0.85rem;
        margin-bottom: 4px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .card[data-section="albums"] .album-info .album-artist {
        color: #ff8b3d;
        font-size: 0.78rem;
    }
}

.card[data-section="projects"] {
    order: 7;
}

.card[data-section="webring"] {
    order: 8;
}

/* Atmosphere Card Styles */
.card[data-section="atmosphere"] {
    padding: 0;
}

.atmosphere-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
    overflow: hidden;
    background-color: #000;
}

.atmosphere-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px);
    animation: scan 0.5s steps(4, end) infinite;
    background-size: 100% 4px;
}

.tv-startup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: white;
    pointer-events: none;
    animation: tv-fade-out 1s ease-out 1s forwards;
}

.tv-startup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: black;
    animation: shutter-open-top 0.5s ease-out 0.5s forwards;
}

.tv-startup::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: black;
    animation: shutter-open-bottom 0.5s ease-out 0.5s forwards;
}

@keyframes shutter-open-top {
    to {
        height: 0;
    }
}

@keyframes shutter-open-bottom {
    to {
        height: 0;
    }
}

@keyframes tv-fade-out {
    to {
        opacity: 0;
    }
}

.atmosphere-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 1s ease;
}

.atmosphere-image.loaded {
    opacity: 1;
}

.atmosphere-info {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    text-shadow: 1px 1px 0 #000;
    background: #000;
    /* Pure black */
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    gap: 8px;
}

.atmosphere-header {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-family: 'Jersey 10', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    padding: 0 6px;
    line-height: 1;
}

.atmosphere-header.text-white span {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
    -webkit-text-stroke: 1px #ff8b3d;
    text-shadow: 4px 4px 0 #333333;
    transition: color 3s ease, text-shadow 3s ease, opacity 3s ease;
}

.atmosphere-header.text-black span {
    color: #000000;
    -webkit-text-fill-color: #000000;
    background: none;
    -webkit-text-stroke: 1px #000000;
    text-shadow: 2px 2px 0 #000000;
}

/* Rain is drawn on a low-resolution pixel canvas. */
.rain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 5;
    overflow: hidden;
}

.rain-overlay {
    image-rendering: pixelated;
}

.rain-overlay.active {
    opacity: 1;
}

/* Thunder Animation */
.thunder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;
    z-index: 6;
    transition: background-color 0.1s;
}

.thunder-overlay.active {
    animation: thunder 5s infinite;
}

@keyframes thunder {

    0%,
    95%,
    98% {
        background-color: rgba(255, 255, 255, 0);
    }

    96%,
    99% {
        background-color: rgba(255, 255, 255, 0.3);
    }

    97% {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.card[data-section="atmosphere"] {
    padding: 0;
    /* Edge to edge */
    border: 4.5px solid #333333;
    /* Match other cards border */
    overflow: hidden;
    /* Ensure content doesn't spill out */
}

.atmosphere-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    opacity: 0;
    /* Start hidden */
    transition: opacity 1s ease;
    /* Smooth fade in */
    color: transparent;
    /* Hide alt text */
}

.atmosphere-image.loaded {
    opacity: 1;
}

/* Mobile ordering for atmosphere card */
@media screen and (max-width: 768px) {
    .card[data-section="atmosphere"] {
        order: 4;
        /* Place it after status, before setup */
    }
}

.global-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.title,
main,
footer {
    z-index: 2;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .rain-overlay {
        display: none !important;
    }

    .title {
        font-size: 14vw;
        white-space: nowrap;
    }

    /* Hide fancy scanline overlay on mobile to prevent doubling/misalignment */
    .title-content::before,
    .broken::before {
        display: none !important;
    }
}

/* Blahaj Fund Banner */
.blahaj-banner {
    position: relative;
    margin-bottom: 20px;
    border: 2px solid #0000FF;
    overflow: hidden;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #02021a;
    /* Deep Navy/Black */
    border: 4px solid transparent;
    border-image: repeating-linear-gradient(45deg, #000080 0, #000080 15px, #4682B4 15px, #4682B4 30px) 1;
}

.blahaj-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.03) 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px);
    background-size: 100% 4px;
    animation: scan 0.5s steps(4, end) infinite;
}

.blahaj-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/blahaj.gif');
    background-repeat: repeat;
    background-size: 150px auto;
    opacity: 0.4;
    overflow: hidden;
    z-index: 0;
}

.bubble {
    position: absolute;
    bottom: -20px;
    background: rgba(255, 255, 255, 0.1);
    /* Slightly lighter than background */
    border-radius: 50%;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(-150px);
        opacity: 0;
    }
}

/* Randomize bubbles */
.bubble:nth-child(1) {
    left: 10%;
    width: 10px;
    height: 10px;
    animation-duration: 4s;
    animation-delay: 0s;
}

.bubble:nth-child(2) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-duration: 6s;
    animation-delay: 1s;
}

.bubble:nth-child(3) {
    left: 35%;
    width: 8px;
    height: 8px;
    animation-duration: 3s;
    animation-delay: 2s;
}

.bubble:nth-child(4) {
    left: 50%;
    width: 12px;
    height: 12px;
    animation-duration: 5s;
    animation-delay: 0.5s;
}

.bubble:nth-child(5) {
    left: 65%;
    width: 18px;
    height: 18px;
    animation-duration: 7s;
    animation-delay: 1.5s;
}

.bubble:nth-child(6) {
    left: 80%;
    width: 9px;
    height: 9px;
    animation-duration: 4.5s;
    animation-delay: 3s;
}

.bubble:nth-child(7) {
    left: 90%;
    width: 14px;
    height: 14px;
    animation-duration: 5.5s;
    animation-delay: 2.5s;
}

.bubble:nth-child(8) {
    left: 5%;
    width: 11px;
    height: 11px;
    animation-duration: 6.5s;
    animation-delay: 1s;
}

.bubble:nth-child(9) {
    left: 25%;
    width: 16px;
    height: 16px;
    animation-duration: 4s;
    animation-delay: 0.2s;
}

.bubble:nth-child(10) {
    left: 45%;
    width: 7px;
    height: 7px;
    animation-duration: 3.5s;
    animation-delay: 1.8s;
}

.bubble:nth-child(11) {
    left: 60%;
    width: 13px;
    height: 13px;
    animation-duration: 5.2s;
    animation-delay: 0.8s;
}

.bubble:nth-child(12) {
    left: 75%;
    width: 19px;
    height: 19px;
    animation-duration: 7.5s;
    animation-delay: 2.2s;
}

.bubble:nth-child(13) {
    left: 15%;
    width: 10px;
    height: 10px;
    animation-duration: 4.8s;
    animation-delay: 3.5s;
}

.bubble:nth-child(14) {
    left: 55%;
    width: 14px;
    height: 14px;
    animation-duration: 6.2s;
    animation-delay: 1.2s;
}

.bubble:nth-child(15) {
    left: 85%;
    width: 8px;
    height: 8px;
    animation-duration: 3.8s;
    animation-delay: 0.5s;
}

.blahaj-content {
    position: relative;
    z-index: 1;
    text-align: center;
    /* Removed dark background to let bubbles show through better, or keep it light */
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px;
    /* Removed border from content box as main banner has it */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.blahaj-content h3 {
    font-family: 'Jersey 10', sans-serif;
    color: #4deeea;
    /* Bright Teal/Cyan */
    margin: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 5px #0000ff;
    /* Blue glow */
}

/* Override Ko-fi widget styles if needed to fit */
div[id^="kofi-widget-overlay"] {
    display: none !important;
    /* Prevent floating widget if it tries to spawn */
}

.ambient-paused, .ambient-paused::before, .ambient-paused::after,
.ambient-paused *, .ambient-paused *::before, .ambient-paused *::after {
    animation-play-state: paused !important;
}

.album-artist { overflow-wrap: anywhere; }

/* Close-up vinyl: rotating surface, fixed room reflections and a stationary arm. */
@media screen and (min-width: 769px) {
    .albums-deck { width: 220px; height: 220px; right: -95px; bottom: -100px; }
    .albums-corner-vinyl { filter: none; border-radius: 50%; box-shadow: 0 3px 0 #121212, 0 5px 0 #32312f, -8px 12px 20px #0009; }
    .albums-corner-vinyl-spin { animation-duration: 8s; animation-direction: reverse; }
    .albums-corner-vinyl-grooves {
        background:
            radial-gradient(circle, transparent 33%, #080808 33.3%, #171717 34%, transparent 34.4%, transparent 57%, #080808 57.3%, #191919 58%, transparent 58.4%, transparent 79%, #080808 79.3%, #191919 80%, transparent 80.4%),
            repeating-radial-gradient(circle, #121313 0 .65px, #252626 .85px, #111212 1.2px, #111212 1.8px);
        box-shadow: inset 0 0 0 1px #555653, inset 0 0 0 3px #141514, inset 0 0 0 4px #393a37, inset 0 0 25px #0009;
    }
    .albums-corner-vinyl-label {
        background: radial-gradient(circle, #171717 0 3%, transparent 3.5%), radial-gradient(circle, #9d7160 0 43%, #755041 44% 45%, #a37b68 46% 94%, #6d4a3d 96%);
        box-shadow: inset 0 0 0 1px #b9907880;
        color: #2a211d;
        font-family: Georgia, serif;
        text-align: center;
    }
    .vinyl-label-name { position: absolute; top: 17%; left: 0; width: 100%; font-size: 8px; font-weight: bold; letter-spacing: 1px; }
    .vinyl-label-detail { position: absolute; bottom: 19%; left: 0; width: 100%; font-size: 5px; letter-spacing: .5px; }
    .albums-corner-vinyl-shine {
        background: conic-gradient(from 12deg, transparent 0deg 34deg, #d5dbdb08 43deg, #d5dbdb28 54deg, #d5dbdb0c 64deg, transparent 75deg 216deg, #d5dbdb20 232deg, #d5dbdb08 244deg, transparent 259deg);
        mix-blend-mode: normal;
    }
    .albums-corner-vinyl-spec { animation: none; opacity: .28; mix-blend-mode: normal; }
    .vinyl-spindle { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -3px; border-radius: 50%; background: linear-gradient(120deg, #f0f0e9, #85877e 45%, #252823 70%); box-shadow: 1px 2px 2px #000; }
    .albums-tonearm-layer { width: 180px; right: -90px; bottom: 100px; transform: rotate(-35deg); transform-origin: 73% 52%; }
    .albums-tonearm-img { transform-origin: center; filter: brightness(.72) contrast(1.2) drop-shadow(2px 4px 2px #0009); }
}
@media (prefers-reduced-motion: reduce) { .albums-corner-vinyl-spin { animation: none; } }

/* About is a dim apartment room: faded wallpaper and a light left on. */
.card[data-section="about"] { position: relative; isolation: isolate; }
.card[data-section="about"] .sitting-cat { top: -60px; left: 32px; }
.card[data-section="about"]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse at var(--lamp-x, 94%) 35%, #100c08cc 0%, #100c0870 12%, transparent 38%);
    opacity: 0;
    animation: about-lamp-flicker 4.7s linear infinite;
}
@keyframes about-lamp-flicker {
    0%, 100% { opacity: .08; }
    7% { opacity: .22; }
    13% { opacity: .06; }
    19% { opacity: .15; }
    23% { opacity: .32; }
    27% { opacity: .1; }
    36% { opacity: .18; }
    43% { opacity: .04; }
    49% { opacity: .25; }
    54% { opacity: .12; }
    62% { opacity: .3; }
    67% { opacity: .08; }
    76% { opacity: .19; }
    82% { opacity: .06; }
    89% { opacity: .27; }
    94% { opacity: .14; }
}
@media (prefers-reduced-motion: reduce) {
    .card[data-section="about"]::before { animation: none; }
}
.card[data-section="about"] {
    background: linear-gradient(#0004, #0004), url('images/about-room-stylized.webp') right bottom / cover no-repeat #171714;
    border-color: #444039;
    box-shadow: inset 0 0 24px #0008, 0 3px 8px #0008;
}
.card[data-section="about"] .card-content { padding-bottom: 28px; }
.card[data-section="about"] .bio {
    padding-right: 30px;
    text-shadow: 0 1px 2px #000, 0 0 5px #000;
}
.card[data-section="about"] .avatar-container { position: relative; }
.card[data-section="about"] .avatar-placeholder {
    border: 4px solid #b4aea0;
    box-shadow: 3px 4px 0 #080807a6;
    transform: rotate(-2deg);
    overflow: visible;
}
.card[data-section="about"] .avatar-placeholder::before,
.card[data-section="about"] .avatar-placeholder::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 42px;
    height: 12px;
    background: linear-gradient(100deg, #a69a7566, #c1b58d88 48%, #94876c66);
    box-shadow: inset 0 1px 1px #d4c59d33, 0 1px 2px #0003;
    pointer-events: none;
}
.card[data-section="about"] .avatar-placeholder::before { top: 2px; left: -13px; transform: rotate(-45deg); }
.card[data-section="about"] .avatar-placeholder::after { bottom: 2px; right: -13px; transform: rotate(-45deg); }
.card[data-section="about"] .pronouns { color: #b9ac91; }
@media (max-width: 768px) {
    .card[data-section="about"] { background-size: auto, auto 100%; background-position: center, right bottom; --lamp-x: 81%; }
    .card[data-section="about"] .bio { padding-right: 0; }
}

/* A dog-eared notebook left in the hallway. */
.card.guestbook {
    padding: 14px 13px 12px 18px;
    color: #c0b39a;
    border-color: #514637;
    background: linear-gradient(90deg, #120f0c 0 5px, #74604655 6px, transparent 8px),
        repeating-linear-gradient(0deg, transparent 0 23px, #b9a57b0d 23px 24px), #27231c;
    box-shadow: inset -3px 0 #93806433, inset 0 0 30px #0005, 2px 3px 0 #0c0b09;
    font-family: Georgia, serif;
}
.guestbook h2 { margin: 0; font-size: 25px; font-weight: normal; font-style: italic; color: #d4c6a8; }
.guestbook-invitation { font-size: 12px; font-style: italic; margin: 5px 0 15px; color: #a99a7f; }
#guestbook-entries { max-height: 245px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #62533d #27231c; }
#guestbook-entries article { padding: 8px 0; border-bottom: 1px dashed #8c785533; overflow-wrap: anywhere; }
#guestbook-entries strong { display: block; font-size: 14px; font-weight: normal; color: #d6c6a4; }
#guestbook-entries time { font: 10px monospace; color: #958a76; }
#guestbook-entries p { font-size: 13px; line-height: 1.5; white-space: pre-wrap; margin: 5px 0; }
#guestbook-form { display: grid; gap: 6px; margin-top: 14px; }
#guestbook-form label { font-size: 12px; font-style: italic; }
#guestbook-form input, #guestbook-form textarea {
    width: 100%; box-sizing: border-box; min-width: 0; border: 1px solid #62543f;
    background: #17140f80; color: #ddd0b5; padding: 7px; border-radius: 2px; font: 13px Georgia, serif;
}
#guestbook-form textarea { resize: vertical; max-height: 240px; }
#guestbook-form small { font: 10px/1.5 monospace; color: #a99a7f; }
.guestbook button { border: 1px solid #78664a; padding: 6px 8px; background: #3c3326; color: #d6c6a4; cursor: pointer; font: italic 12px Georgia, serif; }
.guestbook button:hover { background: #4a3e2c; }
.guestbook button:disabled { opacity: .5; cursor: wait; }
.guestbook :focus-visible { outline: 2px solid #c0a06a; outline-offset: 2px; }
#guestbook-more { margin-top: 10px; }
#guestbook-feedback { font-size: 12px; line-height: 1.4; margin: 9px 0 0; }
.guestbook-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 768px) {
    .card[data-section="about"] { background: #050403; }
    .card[data-section="about"]::before { display: none; animation: none; }
    #autumn-leaves, #leaves-toggle { display: none !important; }
    .card[data-section="guestbook"] { order: 4; }
    #guestbook-form input, #guestbook-form textarea { font-size: 16px; }
}

/* An old clothbound visitor book, with a stained paper leaf tucked inside. */
.card.guestbook {
    position: relative;
    padding: 21px 16px 17px 24px;
    border: 5px solid #38362f;
    border-left: 8px solid #24241f;
    border-radius: 3px 7px 7px 3px;
    color: #383328;
    background:
        linear-gradient(90deg, #332c2070, transparent 14%, transparent 92%, #40352133),
        radial-gradient(ellipse at 100% 2%, #59422055, transparent 44%),
        radial-gradient(ellipse at 4% 95%, #65503844, transparent 40%),
        repeating-linear-gradient(0deg, transparent 0 23px, #4f51471c 23px 24px),
        #b2a58b;
    box-shadow: inset 3px 0 7px #261e1760, inset -2px 0 #d1c5ac, 2px 2px 0 #706854, 4px 4px 0 #292720, 0 5px 10px #0009;
}
.card.guestbook::before {
    content: ''; position: absolute; top: -5px; right: 18px; width: 12px; height: 25px;
    background: linear-gradient(90deg, #41372e, #69523e 45%, #3f342a);
    clip-path: polygon(0 0,100% 0,100% 100%,50% 79%,0 100%);
    box-shadow: 1px 2px 3px #0005;
}
.guestbook h2 { color: #39332a; font-size: 25px; text-shadow: 0 1px #d6cbb344; }
.guestbook-invitation { color: #584d3d; margin-bottom: 13px; }
#guestbook-entries { max-height: 230px; scrollbar-color: #70624c #b2a58b; }
#guestbook-entries article { border-bottom-color: #665b3b55; }
#guestbook-entries strong { color: #393127; font-style: italic; }
#guestbook-entries time { color: #635b4a; }
#guestbook-entries p { color: #383328; }
#guestbook-compose { margin-top: 12px; border-top: 1px solid #65593955; padding-top: 10px; }
#guestbook-compose summary { cursor: pointer; font-size: 13px; font-style: italic; color: #4a3c2c; }
#guestbook-form { margin-top: 12px; }
#guestbook-form input, #guestbook-form textarea {
    color: #30291f; background: #d9cdb344; border: 0; border-bottom: 1px solid #786a4e;
    border-radius: 0; box-shadow: inset 0 1px 3px #40311d10;
}
#guestbook-form small { color: #655946; }
.guestbook button { color: #3d3324; background: #c4b596; border-color: #867453; }
.guestbook button:hover { background: #d1c2a3; }
#guestbook-signed { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #65593955; font: italic 12px/1.5 Georgia, serif; color: #584b37; }
#guestbook-compose[hidden], #guestbook-signed[hidden] { display: none; }
#guestbook-feedback:empty { display: none; }

/* Keep the profile quiet and black. */
.card[data-section="about"] { background: #050403; }
.card[data-section="about"]::before { display: none; animation: none; }

/* A small cabinet of keepsakes: every object is a saved link. */
.card[data-section="stars"] {
    position: relative; padding: 5px 8px 12px;
    border: 5px solid #3b352b;
    background: radial-gradient(ellipse at 20% 0, #66533525, transparent 65%),
        repeating-linear-gradient(90deg, #24241e 0 39px, #1b1d17 40px, #24241e 42px);
    box-shadow: inset 0 0 24px #000b, inset 1px 1px #73644b, 0 4px 8px #0008;
}
.card[data-section="stars"] .card-header {
    font: 25px "Schoolbell", cursive; padding: 4px 6px 6px; gap: 5px;
    text-transform: none; -webkit-text-stroke: 0;
}
.card[data-section="stars"] .card-header span {
    background: none; animation: none; color: #bdb39a;
    -webkit-text-fill-color: #bdb39a; -webkit-text-stroke: 0;
}
.stars-hand-star { width: 23px; height: 23px; transform: rotate(-8deg); }
.stars-hand-star path { stroke: #bdb39a; }
.card[data-section="stars"] .card-content {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; padding: 0 0 8px;
    background: repeating-linear-gradient(to bottom, transparent 0 73px, #796347 73px 75px, #443b2c 75px 81px, #12130f 81px 85px, transparent 85px 109px);
}
.card[data-section="stars"] .star-link {
    display: flex; flex-direction: column; align-items: center; justify-content: end;
    height: 97px; min-width: 0; padding: 0 2px; box-sizing: border-box;
    color: #b9b19c; text-decoration: none; font: 12px/17px "Schoolbell", cursive;
}
.star-object { width: 78px; max-width: 100%; height: 64px; margin-bottom: 10px; overflow: visible; filter: drop-shadow(2px 3px 2px #0009); transition: transform .18s ease, filter .18s ease; }
.star-link span { transform: rotate(-2deg); }
.star-link:nth-child(even) span { transform: rotate(2deg); }
.card[data-section="stars"] .star-link:hover { color: #ead4ac; }
.star-link:hover .star-object, .star-link:focus-visible .star-object { transform: translateY(-3px); filter: drop-shadow(2px 6px 3px #000b) brightness(1.15); }
.card[data-section="stars"] .star-link:focus-visible { outline: 1px dashed #c3a578; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .star-object { transition: none; } }
.card[data-section="stars"] .star-link::before { content: none; }
.card[data-section="stars"] .star-link { font-size: 14px; }
.star-object { image-rendering: pixelated; width: 88px; }

/* A low-resolution cabinet, framed like a late-90s inventory panel. */
.card[data-section="stars"] {
    padding: 5px 5px 9px; border: 4px solid #494c40; border-radius: 0;
    border-top-color: #777966; border-left-color: #666a59;
    border-right-color: #292e26; border-bottom-color: #22271f;
    background:
        repeating-conic-gradient(#ffffff05 0% 25%, transparent 0% 50%) 0 0 / 4px 4px,
        repeating-linear-gradient(90deg, #20261e 0 31px, #171e17 31px 33px, #30362a 33px 34px);
    box-shadow: inset 2px 2px #10170e, inset -2px -2px #62664f, 3px 3px #090e08;
}
.card[data-section="stars"] .card-header {
    font: 25px/1 "Jersey 10", monospace; text-transform: uppercase;
    padding: 5px 5px 8px; border-bottom: 2px solid #10170d; margin-bottom: 8px;
    text-shadow: 2px 2px #11160d;
}
.card[data-section="stars"] .card-header span { color: #c4c8a8; -webkit-text-fill-color: #c4c8a8; }
.stars-hand-star { width: 17px; height: 17px; transform: none; }
.card[data-section="stars"] .card-content {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 0; padding-bottom: 4px;
    background: repeating-linear-gradient(to bottom, transparent 0 64px, #929078 64px 66px, #5b5e4b 66px 70px, #343d2e 70px 74px, #11190f 74px 78px, transparent 78px 102px);
}
.card[data-section="stars"] .star-link {
    height: 90px; padding: 0 1px; color: #c8cbb0;
    font: 16px/14px "Jersey 10", monospace;
    text-shadow: 1px 1px #080d06; letter-spacing: -.3px;
}
.card[data-section="stars"] .star-link span { transform: none; }
.star-object { width: 66px; height: 48px; margin-bottom: 17px; filter: drop-shadow(2px 2px 0 #080d08); transition: none; }
.star-link:hover .star-object, .star-link:focus-visible .star-object { transform: translateY(-2px); filter: drop-shadow(2px 4px 0 #080d08) brightness(1.18); }
.card[data-section="stars"] .star-link:hover span,
.card[data-section="stars"] .star-link:focus-visible span { background: #737754; color: #ffffd5; }
.card[data-section="stars"] .star-link:focus-visible { outline: 1px solid #bec593; outline-offset: -1px; }

/* Deep cabinet bays with visible side walls and projecting shelf tops. */
.card[data-section="stars"] { padding: 5px 5px 8px; box-shadow: inset 2px 2px #10170e, inset -2px -2px #62664f, 4px 4px #252d20, 7px 7px #080d07; }
.card[data-section="stars"] .card-header { font-size: 2rem; line-height: normal; padding: 4px 5px 8px; }
.card[data-section="stars"] .stars-hand-star { width: 23px; height: 23px; }
.card[data-section="stars"] .card-content {
    gap: 11px 0; padding: 0 0 7px;
    background: url('images/shelf-recess.svg') 0 0 / 100% 110px repeat-y;
}
.card[data-section="stars"] .star-link { height: 99px; padding-bottom: 1px; }
.card[data-section="stars"] .star-object { margin-bottom: 23px; filter: drop-shadow(4px 4px 1px #080d08); }
.card[data-section="stars"] .star-link span { position: relative; z-index: 1; }
@media (max-width: 768px) { .card[data-section="stars"] .card-header { font-size: 1.8rem; } }

/* An old vending machine: glazed display, selection tabs and a delivery hatch. */
.card[data-section="stars"] {
    background: repeating-conic-gradient(#ffffff06 0% 25%, transparent 0% 50%) 0 0 / 4px 4px, #39443e;
    border-top-color: #899082; border-left-color: #707e71;
}
.card[data-section="stars"] .card-header {
    background: #292f28; box-shadow: inset 0 2px #92977a, inset 0 -2px #101810;
    margin-bottom: 7px;
}
.card[data-section="stars"] .card-header span { color: #e2d2a3; -webkit-text-fill-color: #e2d2a3; text-shadow: 1px 1px #181d13, 0 0 7px #c4b58244; }
.card[data-section="stars"] .card-content { position: relative; border: 2px solid #131c17; box-shadow: 1px 1px #89907a; }
.card[data-section="stars"] .card-content::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(114deg, transparent 0 23%, #bbd4c009 23% 32%, transparent 32% 70%, #bbd4c00a 70% 74%, transparent 74%);
    box-shadow: inset 2px 0 #a2b49d25, inset -2px 0 #0007;
}
.card[data-section="stars"] .star-link { position: relative; border-right: 1px solid #91a18a18; }
.card[data-section="stars"] .star-link::before {
    content: attr(data-selection); position: absolute; top: 5px; left: 5px;
    color: #bdb78f; font: 10px/11px monospace; letter-spacing: 0;
}
.card[data-section="stars"] .star-link span {
    background: #262f29; border: 1px solid #76816b; border-right-color: #0e1811; border-bottom-color: #0e1811;
    padding: 1px 3px; box-shadow: 1px 1px #09110c; font-size: 14px;
}
.card[data-section="stars"] .star-object { margin-bottom: 19px; }
.stars-vending-panel { height: 31px; display: flex; gap: 10px; align-items: center; padding: 5px 9px 0; }
.stars-collection-slot { flex: 1; height: 18px; background: #111a15; border: 2px solid #1e2821; border-bottom-color: #7d8978; border-right-color: #637060; box-shadow: inset 0 5px #070d09, inset 0 7px #313c30; }
.stars-coin-slot { width: 15px; height: 23px; background: linear-gradient(90deg, #7b8270 0 5px, #101811 5px 8px, #a0a28c 8px); border: 2px solid #19251d; box-shadow: 1px 1px #65745f; }
.stars-ready-light { width: 4px; height: 4px; background: #cbae63; box-shadow: 0 0 4px #d3aa6670; }

.card[data-section="stars"] { position: relative; }
.stars-dispensing-object {
    position: absolute; z-index: 5; pointer-events: none; image-rendering: pixelated;
    filter: drop-shadow(3px 5px 2px #050b08); transform-origin: center;
}
.card[data-section="stars"].is-dispensing .stars-ready-light { background: #efd48c; box-shadow: 0 0 7px #edc572; }
.card[data-section="stars"].is-dispensing .stars-collection-slot { border-bottom-color: #b6b895; }

/* Clip the falling object where it passes behind the machine’s bottom bar. */
.stars-dispensing-chute { position: absolute; top: 0; left: 0; right: 0; overflow: hidden; z-index: 5; pointer-events: none; }
.stars-vending-panel { position: relative; z-index: 6; background: #39443e; }

#pixel-moon {
    position: fixed; top: 115px; left: max(20px, calc(50% - 560px));
    width: 72px; height: 72px; z-index: -1; pointer-events: none;
    image-rendering: pixelated; animation: moon-drift 12s ease-in-out infinite;
    filter: none;
}
@keyframes moon-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 768px) { #pixel-moon { top: 18px; left: auto; right: 12px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { #pixel-moon { animation: none; } }

/* Expose the page block along the fore-edge and foot of the book. */
.card.guestbook {
    border-right: 7px solid #a69a80;
    border-bottom: 7px solid #a69a80;
    border-radius: 3px 2px 2px 3px;
    box-shadow: inset 3px 0 7px #261e1760, 2px 2px 0 #38362f, 4px 4px 0 #24241f, 0 5px 10px #0009;
}
.card.guestbook::after {
    content: ''; position: absolute; pointer-events: none;
    top: 0; left: 0; right: -7px; bottom: -7px;
    background:
        repeating-linear-gradient(90deg, #c4b89c 0 1px, #82785f 1px 2px, #b1a58b 2px 3px) right top / 7px 100% no-repeat,
        repeating-linear-gradient(0deg, #c4b89c 0 1px, #82785f 1px 2px, #b1a58b 2px 3px) left bottom / 100% 7px no-repeat;
}

/* Loose low-resolution tools against the black profile backdrop. */
.card[data-section="about"] { background: #050403; }
.profile-tools { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.profile-tool {
    position: absolute; width: 88px; height: 80px; padding: 0; border: 0; background: transparent;
    pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
    transform: translate(-50%, -50%) rotate(var(--tool-angle, 0deg));
}
.profile-tool canvas { width: 110px; height: 80px; margin-left: -11px; image-rendering: pixelated; pointer-events: none; filter: brightness(.75) drop-shadow(3px 4px 0 #000); }
.profile-tool.is-held { cursor: grabbing; z-index: 2; }
.profile-tool.is-held canvas { filter: brightness(.95) drop-shadow(6px 9px 1px #0009); }
.profile-tool:focus-visible { outline: 1px dashed #888b78; outline-offset: 0; }
@media (max-width: 768px) { .profile-tools { display: none; } }

.avatar-placeholder[role="button"] { cursor: pointer; transform-origin: center top; }
.avatar-placeholder[role="button"]:focus-visible { outline: 2px dashed #b6b3a0; outline-offset: 8px; }
.card[data-section="about"] .avatar-placeholder.tape-falling::before { animation: portrait-tape-drop 650ms ease-in forwards; }
.card[data-section="about"] .avatar-placeholder.tape-falling::after { animation: portrait-tape-drop 650ms 90ms ease-in forwards; }
@keyframes portrait-tape-drop {
    0% { transform: rotate(-45deg) translate(0,0); opacity: 1; }
    25% { transform: rotate(-20deg) translate(4px,8px); opacity: 1; }
    100% { transform: translate(18px,150px) rotate(70deg); opacity: 0; }
}
.card[data-section="about"] .avatar-placeholder.photo-absent { background: transparent; border-color: transparent; box-shadow: none; }
.avatar-placeholder.photo-absent > img { visibility: hidden; }
.portrait-paper-stage { position: fixed; z-index: 40; pointer-events: none; perspective: 650px; }

/* Quiet perforated board: baked pixel marks, with no extra animation work. */
@media (min-width: 769px) {
    .card[data-section="about"] {
        background-color: #080807;
        background-image: linear-gradient(90deg, #050403cc, #05040355 65%, #05040322), url('images/pegboard-dark.svg?v=2');
        background-size: 100% 100%, 18px 18px;
        background-position: 0 0;
    }
}

/* A small floating figure beneath a stormy sky and above distant hills. */
.card[data-section="status"] {
    min-height: 278px;
    display: flex;
    flex-direction: column;
    border: 4px solid #303131;
    border-top-color: #3b3c3a;
    border-radius: 2px;
    padding: 4px;
    background: #0c0d0e;
    box-shadow: inset 0 0 22px #0007;
}
.card[data-section="status"] .card-header { padding: 4px 12px; }
.card[data-section="status"] .status-header span {
    background-image: repeating-linear-gradient(0deg, #9d9e98 0 2px, #727570 2px 4px);
    -webkit-text-stroke-color: #858780;
    text-shadow: none;
}
.card[data-section="status"] .card-content {
    margin-top: auto;
    padding: 16px 12px 17px;
    color: #b4b5af;
    line-height: 1.65;
    text-shadow: 1px 2px 2px #000;
}
.card[data-section="status"] .status-cover {
    border-color: #454644;
    opacity: .8;
}
.card[data-section="status"] .status-float { inset: 0; }
.card[data-section="status"] .status-float img {
    width: 48px;
    height: 48px;
    left: calc(56% - 24px);
    top: 102px;
    opacity: .42;
    animation-duration: 12s;
}

/* Yellowed compact Macintosh shell surrounding the modern machine. */
.card[data-section="setup"] {
    position: relative;
    padding: 12px 12px 26px;
    border: 3px solid #747266;
    border-top-color: #aaa696;
    border-left-color: #979382;
    border-radius: 8px 8px 5px 5px;
    background: linear-gradient(110deg, #a29d8a, #928e7c 58%, #7f7d6e);
    box-shadow: inset 2px 2px 0 #bcb5a080, inset -3px -3px 0 #656355, 3px 4px 0 #090a08;
}
.card[data-section="setup"] > .card-header { padding: 0 0 9px; white-space: nowrap; }
.card[data-section="setup"] > .card-header span {
    background-image: repeating-linear-gradient(0deg, #30352e 0 2px, #454a3e 2px 4px);
    -webkit-text-stroke-color: #34392f;
    text-shadow: 0 1px #b9b49e66;
}
.card[data-section="setup"] .setup-viewport-block {
    box-sizing: border-box;
    padding: 8px;
    border: 2px solid #575a4c;
    border-right-color: #b2ad99;
    border-bottom-color: #b2ad99;
    border-radius: 7px;
    background: #696a5b;
    box-shadow: inset 3px 4px 6px #2a302880;
}
.card[data-section="setup"] .setup-model-wrap {
    aspect-ratio: 4 / 3;
    border: 2px solid #292f27;
    border-radius: 5px;
    background: #161a17;
    box-shadow: 0 1px 0 #b6b09a60;
}
.card[data-section="setup"] canvas.setup-model { image-rendering: pixelated; }
.setup-case-detail { display: flex; align-items: center; justify-content: space-between; height: 25px; padding: 7px 5px 0; }
.setup-case-badge {
    width: 9px; height: 11px;
    background: linear-gradient(#77855a 0 17%, #b4a55a 17% 34%, #ad7950 34% 51%, #995e57 51% 68%, #786782 68% 84%, #5d7d89 84%);
    box-shadow: 0 1px #c5bea177;
}
.setup-floppy-slot { width: 64%; height: 4px; background: #272c25; border-bottom: 2px solid #bbb49f; box-shadow: inset 0 1px #11180f; }
.setup-case-name { padding: 0 5px 9px; font: 10px Georgia, serif; color: #353a30; text-shadow: 0 1px #c3bca066; }
.card[data-section="setup"] .setup-content--specs {
    padding: 9px 8px;
    background: #979481;
    border: 1px solid #6d705f;
    box-shadow: inset 0 1px #b7b29b77;
    font-size: 12px;
}
.card[data-section="setup"] .setup-specs li { color: #282f26; padding: 2px 0; }
.card[data-section="setup"] .setup-specs li::before { color: #575e4c; content: '· '; }
.card[data-section="setup"]::after {
    content: ''; position: absolute; bottom: 7px; left: 16px; right: 16px; height: 9px;
    background: repeating-linear-gradient(90deg, #505847 0 2px, #aba58e 2px 3px, transparent 3px 6px);
    opacity: .7; pointer-events: none;
}

/* Keep the records, lights, and turntable; age the cabinet around them. */
.card[data-section="albums"] {
    border-color: #4d493e #282920 #25261f #5b5648;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #77715a55, 2px 4px 0 #030403;
}
@media (min-width: 769px) {
    .card[data-section="albums"] .albums-shelf {
        background-image: linear-gradient(180deg, #10140f55, #090c0aaa), url('albums/images/background.jpg');
        box-shadow: inset 0 0 65px #0009, inset 3px 0 #a0967040, inset -3px 0 #090e0a99;
    }
    .card[data-section="albums"] .card-header span {
        background-image: repeating-linear-gradient(0deg, #c4b08c 0 2px, #99866b 2px 4px);
        -webkit-text-stroke-color: #a28f72;
    }
}

/* Loose engineering notes pinned above a workbench. */
.card[data-section="projects"] {
    background: #151513;
    border-color: #504d44 #252622 #252622 #4d4c43;
    border-radius: 2px;
    box-shadow: inset 0 0 25px #0009, 2px 4px 0 #030403;
}
.card[data-section="projects"] .card-header span {
    background-image: repeating-linear-gradient(0deg, #bcb6a1 0 2px, #8a8879 2px 4px);
    -webkit-text-stroke-color: #959180;
}
.card[data-section="projects"] .card-content { padding: 17px 18px 12px; counter-reset: project-note; }
.card[data-section="projects"] .project {
    position: relative;
    counter-increment: project-note;
    padding: 25px 18px 17px;
    border: 1px solid #858477;
    background: repeating-linear-gradient(0deg, transparent 0 19px, #555e5118 19px 20px),
        repeating-linear-gradient(90deg, transparent 0 19px, #555e5118 19px 20px), #9b9989;
    box-shadow: 3px 5px 0 #06080699, inset 0 0 18px #524f3820;
    margin-bottom: 27px;
}
.card[data-section="projects"] .project::before {
    content: ''; position: absolute; left: 50%; top: -8px; width: 52px; height: 15px;
    background: #b9ad7e88;
    border-left: 1px dashed #ded2a144; border-right: 1px dashed #ded2a144;
    transform: translateX(-50%) rotate(-5deg); box-shadow: 0 1px 1px #312d2522; pointer-events: none;
}
.card[data-section="projects"] .project::after {
    content: '0' counter(project-note); position: absolute; right: 12px; top: 9px;
    font: 11px monospace; color: #53594d;
}
.card[data-section="projects"] .project--text { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
.project-screenshot {
    display: block; align-self: center; padding: 5px 5px 13px;
    background: #b9b5a0; box-shadow: 2px 3px #44483b66;
    transform: rotate(1deg); line-height: 0;
}
.project-screenshot img { display: block; width: 100%; height: auto; image-rendering: auto; }
.project-screenshot:focus-visible { outline: 2px dashed #293d2b; outline-offset: 4px; }
.card[data-section="projects"] .project:nth-child(2) .project-screenshot { transform: rotate(-1deg); }
.card[data-section="projects"] .project h3 {
    padding: 0 0 5px; margin: 0 0 8px;
    border-bottom: 1px solid #454e3e66;
    color: #222c22;
    font-family: 'Schoolbell', cursive;
    font-size: 1.45rem;
    line-height: 1.2;
}
.card[data-section="projects"] .project p { color: #343d31; }
.card[data-section="projects"] .project-details { flex-wrap: wrap; gap: 5px 15px; }
.card[data-section="projects"] .project-details span { color: #49533f; }
.card[data-section="projects"] .project-link { color: #293d2b; text-decoration: underline; text-underline-offset: 4px; }
.card[data-section="projects"] .project-link:hover { color: #0c1c10; }
.card[data-section="projects"] .kanagawa-container { border: 5px solid #b9b5a0; box-shadow: 2px 3px #44483b66; }
.card[data-section="projects"] .project:last-child { margin-bottom: 5px; }
@media (max-width: 768px) {
    .card[data-section="projects"] .card-content { padding: 15px 10px; }
    .card[data-section="projects"] .project--text { grid-template-columns: 1fr; }
}

/* The webring is a little communal directory in a wooden wall box. */
.card[data-section="webring"] {
    position: relative;
    padding: 8px 4px 13px;
    border: 4px solid #555043;
    border-right-color: #2a3027;
    border-bottom-color: #252b23;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, #252820 0 3px, #292c23 3px 4px, #24281f 4px 10px);
    box-shadow: inset 0 0 0 1px #88816844, 2px 3px #030503;
}
.card[data-section="webring"] .card-header { padding: 0 10px 6px; }
.card[data-section="webring"] .card-header span {
    background-image: repeating-linear-gradient(0deg, #c1b898 0 2px, #938d73 2px 4px);
    -webkit-text-stroke-color: #9e997d;
}
.card[data-section="webring"] .webring-content {
    margin: 0 3px;
    padding: 6px 0;
    border: 2px solid #0d150d;
    border-bottom-color: #6b7058;
    border-right-color: #6b7058;
    background: #0d130e;
    box-shadow: inset 0 0 10px #000;
}
.card[data-section="webring"] iframe { display: block; max-width: 100%; }

.status-landscape {
    position: absolute; inset: 0; width: 100%; height: 100%;
    image-rendering: pixelated; pointer-events: none;
}

/* CRT tube warming: a soft phosphor line opens vertically into the picture. */
.crt-shutter { position: absolute; left: 0; right: 0; height: 50%; background: #000; }
.crt-shutter--top { top: 0; transform-origin: center top; }
.crt-shutter--bottom { bottom: 0; transform-origin: center bottom; }
.crt-phosphor {
    position: absolute; left: 5%; right: 5%; top: calc(50% - 1px); height: 2px;
    background: #b7bda3; opacity: 0; transform: scaleX(.005);
    box-shadow: 0 0 5px #c9ceae88, 0 0 20px #9aa78666, 0 0 45px #8e9f7733;
}
.crt-warmth { position: absolute; inset: 0; opacity: 0; background: #97a582; pointer-events: none; }
.crt-warming .crt-shutter { animation: crt-open 1.65s cubic-bezier(.22,.7,.25,1) both; }
.crt-warming .crt-phosphor { animation: crt-ignite 1.65s ease-out both; }
.crt-warming .crt-warmth { animation: crt-warm 1.65s ease-out both; }
@keyframes crt-open {
    0%, 34% { transform: scaleY(1); }
    45% { transform: scaleY(.995); }
    62% { transform: scaleY(.87); }
    88%, 100% { transform: scaleY(0); }
}
@keyframes crt-ignite {
    0%, 8% { opacity: 0; transform: scaleX(.005); }
    20% { opacity: .38; transform: scaleX(.025); }
    38% { opacity: .78; transform: scaleX(.8); }
    50% { opacity: .52; transform: scaleX(1); }
    65%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes crt-warm { 0%, 52% { opacity: 0; } 78% { opacity: .1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .crt-warming .crt-shutter, .crt-warming .crt-phosphor, .crt-warming .crt-warmth { animation: none; }
}

/* A quiet doorway into the back of the website. */
#bench-seat { position: fixed; z-index: 22; border: 0; padding: 0; background: transparent; cursor: pointer; color: #aaa99a; }
#bench-seat span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 16px 'Jersey 10', monospace; opacity: 0; transition: opacity .2s; text-shadow: 0 2px #000; }
#bench-seat:hover span, #bench-seat:focus-visible span, #bench-seat:disabled span { opacity: 1; }
#bench-seat:focus-visible { outline: 1px dashed #77796e; outline-offset: 4px; }
body.bench-active { overflow: hidden; }
body.bench-active > :not(#bench-world) { visibility: hidden !important; }
#bench-world { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #090c0d; }
#bench-world > canvas, .bench-dom { position: absolute; inset: 0; }
#bench-world > canvas { image-rendering: pixelated; }
.bench-dom { pointer-events: none; }
.bench-panel { pointer-events: none !important; backface-visibility: hidden; }
.bench-panel:not(.bench-panel--back) > * { margin: 0 !important; width: 100% !important; height: 100% !important; box-sizing: border-box; }
.bench-panel--back { box-sizing: border-box; border: 7px ridge #494b40; background: repeating-linear-gradient(0deg, #252922 0 3px, #2b2e26 3px 5px, #24271f 5px 31px, #141813 31px 33px); box-shadow: inset 0 0 70px #000b; color: #929383; }
.bench-panel--back::before, .bench-panel--back::after { content: ''; position: absolute; top: 8%; bottom: 8%; width: 9px; background: #34372e; border: 2px outset #494c40; }
.bench-panel--back::before { left: 12%; } .bench-panel--back::after { right: 12%; }
.bench-panel--back span { position: absolute; top: 28px; left: 24%; padding: 8px 13px; background: #777461; color: #292c26; font: 16px 'Space Mono', monospace; transform: rotate(-3deg); opacity: .7; }
.bench-controls { position: absolute; z-index: 5; inset: auto 0 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #b5b5a7; font: 16px 'Jersey 10', monospace; text-shadow: 0 2px #000; }
.bench-controls button { background: #191d19; border: 2px ridge #616354; padding: 8px 18px; color: #c4c4b6; font: 19px 'Jersey 10', monospace; cursor: pointer; }
@media(max-width:768px) { #bench-seat { display: none; } }

.bench-panel * { animation-play-state: paused !important; }