/* ── NAV OVERRIDES (about page uses mc palette) ── */
        :root {
            --nav-accent: var(--mc-crater);
            --nav-glow: rgba(255,61,110,0.3);
            --nav-brand: var(--mc-cereal-cyan);
            --nav-brand-glow: rgba(0,245,255,0.6);
        }

        body {
            background-color: var(--mc-sky-deep);
            background-image: repeating-linear-gradient(
                0deg, transparent, transparent 2px,
                rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px
            );
            color: var(--mc-text-primary);
        }

        /* ── BREADCRUMB ── */
        .breadcrumb {
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            color: var(--mc-smoke);
            letter-spacing: 0.1em;
            margin-bottom: 20px;
            align-self: flex-start;
        }
        .breadcrumb a { color: var(--mc-smoke); text-decoration: none; }
        .breadcrumb a:hover { color: var(--mc-crater); }
        .breadcrumb .sep { margin: 0 8px; color: var(--mc-ash); }
        .breadcrumb .current { color: var(--mc-text-primary); font-weight: 700; }

        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 80px 20px 60px;
            gap: 0;
        }

        /* ── DATELINE ── */
        .dateline {
            width: 100%;
            max-width: 960px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            padding: 10px 0;
            border-top: 2px solid var(--mc-crater);
            border-bottom: 1px solid var(--mc-border);
            margin-bottom: 24px;
            font-family: 'Press Start 2P', monospace;
            font-size: 9px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--mc-smoke);
            box-shadow: 0 2px 12px rgba(255,61,110,0.15);
        }
        .dateline-sep { color: var(--mc-crater); }

        /* ── PAGE TITLE ── */
        .page-title {
            font-family: 'Press Start 2P', monospace;
            font-size: 18px;
            font-weight: 400;
            color: var(--mc-smoke);
            letter-spacing: 0.08em;
            margin-bottom: 8px;
            text-transform: lowercase;
        }

        /* ── MASTHEAD ──
           The figlet ASCII this replaced needed 140 monospace columns, so it
           had to be set at three to seven pixels to fit the page and became a
           smear at every width. Same words, in the site's own pixel face. */
        .masthead {
            width: 100%;
            max-width: 960px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 18px;
        }
        /* The shadow stack is the cereal box's palette, not the homepage's.
           This page's animation is the box (animations/cereal.js), whose
           colors are pink #FF3D6E, edge #FF6CB2, the cyan band #00F5FF, milk
           #F5E6D0 and box black #09090C -- so the masthead steps through those
           rather than through the lava reds the homepage title uses. */
        .masthead-title {
            font-family: 'Press Start 2P', monospace;
            /* Floor is 20px, not 18, so that at the smallest size the 0.05em
               layers land on whole pixels (1/2/3/4/5) rather than 0.9/1.8/2.7.
               Press Start 2P is a pixel face and a fractional offset softens
               it. Matches the homepage title's floor. */
            font-size: clamp(20px, 4.4vw, 46px);
            line-height: 1.45;
            text-align: center;
            text-transform: lowercase;
            color: var(--mc-crater);
            letter-spacing: 0.05em;
            /* Same proportional extrusion as the homepage title, so the
               same wordmark reads the same on both pages, and so the media
               query below needs no second set of offsets. */
            --title-layer: 0.05em;
            text-shadow:
                calc(var(--title-layer) * 1) calc(var(--title-layer) * 1) 0 #ff6cb2,
                calc(var(--title-layer) * 2) calc(var(--title-layer) * 2) 0 var(--mc-cereal-cyan),
                calc(var(--title-layer) * 3) calc(var(--title-layer) * 3) 0 #f5e6d0,
                calc(var(--title-layer) * 4) calc(var(--title-layer) * 4) 0 var(--mc-lava-bright),
                calc(var(--title-layer) * 5) calc(var(--title-layer) * 5) 0 #09090c;
        }
        .masthead-rule {
            width: min(420px, 70%);
            height: 2px;
            margin: 26px 0 16px;
            background: linear-gradient(90deg,
                transparent, var(--mc-cereal-cyan) 20%,
                var(--mc-crater) 50%,
                var(--mc-cereal-cyan) 80%, transparent);
        }
        /* Both of these were figlet blocks set in Courier Prime before, and
           that is the register they belong in. Press Start 2P and Lora were
           pulling them toward the homepage and the zine body copy instead. */
        .masthead-sub {
            font-family: 'Courier Prime', monospace;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.42em;
            text-indent: 0.42em;
            color: var(--mc-cereal-cyan);
            text-transform: uppercase;
        }
        .masthead-quote {
            margin-top: 14px;
            font-family: 'Courier Prime', monospace;
            font-size: 14px;
            line-height: 1.9;
            letter-spacing: 0.06em;
            text-align: center;
            color: var(--mc-smoke);
        }

        /* ── SECTION JUMP LIST ──
           A div rather than a <nav>: style.css styles the bare `nav` element
           as the fixed top bar, so a second <nav> anywhere on a page is
           pinned over the site nav until six properties are undone. */
        .about-jump {
            width: 100%;
            max-width: 960px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px 10px;
            margin: 4px 0 26px;
        }
        .about-jump a {
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            letter-spacing: 0.08em;
            color: var(--mc-smoke);
            text-decoration: none;
            padding: 7px 10px;
            border: 1px solid var(--mc-border);
            transition: color 0.15s, border-color 0.15s, background 0.15s;
        }
        .about-jump a:hover,
        .about-jump a:focus-visible {
            color: var(--mc-sky-deep);
            background: var(--mc-crater);
            border-color: var(--mc-crater);
        }

        /* ── SECTION HEADINGS ──
           scroll-margin-top keeps a jumped-to heading clear of the fixed nav. */
        .about-heading,
        .section-label,
        .logo-grid-label,
        .email-callout { scroll-margin-top: 90px; }

        .about-heading {
            font-family: 'Press Start 2P', monospace;
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.1em;
            text-transform: lowercase;
            color: var(--mc-crater);
            margin: 34px 0 18px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--mc-border);
            clear: both;
        }
        .about-text > .about-heading:first-child { margin-top: 0; }

        /* ── ASCII BLOCK COLORS ── */
        .ascii-block.ascii-masthead pre {
            color: var(--mc-crater);
            text-shadow: 0 0 10px rgba(255,61,110,0.4);
        }
        .ascii-block.ascii-since pre {
            color: var(--mc-smoke);
        }
        .ascii-block.ascii-founded pre {
            color: var(--mc-cereal-cyan);
            text-shadow: 0 0 10px rgba(0,245,255,0.4);
        }
        .ascii-block.ascii-producers pre {
            color: var(--mc-lava-bright);
            text-shadow: 0 0 10px rgba(255,224,58,0.3);
        }

        /* ── CENTERED ASCII ──
           The "founded by" credit was float: right at clamp(2px, 0.5vw, 5px),
           which rendered it 139px wide in a 799px column -- 17% of the width,
           and floated beside nothing, because the element after it is a heading
           that clears. Centered and sized to the column instead, by the same
           --cols arithmetic the artist strips use: 0.6 is Courier Prime's
           advance in em, so 100cqw / cols / 0.6 is the size that exactly fills
           the width, and the cap stops it growing past a comfortable measure. */
        .ascii-center {
            container-type: inline-size;
            width: 100%;
            display: flex;
            justify-content: center;
            clear: both;
            margin: 34px 0 30px;
        }
        .ascii-center pre {
            font-size: min(13px, calc(100cqw / var(--cols, 60) / 0.6)) !important;
            line-height: 1.2;
            white-space: pre;
            flex-shrink: 0;
        }

        /* ── FLOAT ASCII FOR TEXT WRAPPING ──
           Only the commented-out "producers" block uses this now. */
        .ascii-float-right {
            float: right;
            margin: 20px 20px 20px 24px;
            max-width: 50%;
        }
        .ascii-float-right pre {
            font-size: clamp(2px, 0.5vw, 5px) !important;
        }

        /* ── DIVIDER ── */
        .divider {
            width: 100%;
            max-width: 960px;
            height: 1px;
            background: var(--mc-crater);
            box-shadow: 0 0 8px rgba(255,61,110,0.4);
            margin: 16px 0;
        }

        /* ── SINGLE COLUMN LAYOUT ── */
        .newspaper-body {
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
        }

        /* ── ZINE ELEMENTS ── */
        .ascii-large pre {
            font-size: clamp(4px, 0.85vw, 8px) !important;
        }
        .ascii-rotate { transform: rotate(-2deg); }
        .ascii-rotate-alt { transform: rotate(1.5deg); }

        .pull-quote {
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--mc-crater);
            border-left: 4px solid var(--mc-crater);
            padding: 16px 20px;
            margin: 24px 0;
            text-shadow: 0 0 8px rgba(255,61,110,0.3);
            background: rgba(255,61,110,0.05);
        }

        .zine-bg-magenta {
            background: rgba(255,61,110,0.08);
            padding: 16px;
            margin: 16px 0;
        }
        .zine-bg-cyan {
            background: rgba(0,245,255,0.08);
            padding: 16px;
            margin: 16px 0;
        }

        .zine-border-magenta { border: 2px solid var(--mc-crater); padding: 8px; }
        .zine-border-cyan { border: 2px solid var(--mc-cereal-cyan); padding: 8px; }

        .zine-overlap { margin-top: -24px; }
        .zine-mt-sm { margin-top: 8px; }
        .zine-mt-lg { margin-top: 32px; }
        .zine-mb-lg { margin-bottom: 32px; }
        .zine-mb-xl { margin-bottom: 48px; }

        /* Cereal animation canvas */
        .cereal-canvas-wrap {
            float: right;
            margin: 8px 0 20px 24px;
            width: 50%;
            max-width: 300px;
        }
        .cereal-canvas-wrap canvas {
            display: block;
            width: 100%;
            height: auto;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }

        /* Zine links */
        .zine-links {
            margin-top: 48px;
            padding: 24px 0;
            border-top: 2px solid var(--mc-crater);
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            box-shadow: 0 -2px 12px rgba(255,61,110,0.15);
        }
        .zine-links a {
            font-family: 'Courier Prime', monospace;
            font-size: 12px;
            color: var(--mc-cereal-cyan);
            text-decoration: none;
            padding: 6px 12px;
            border: 1px solid var(--mc-cereal-cyan);
            transition: all 0.15s;
        }
        .zine-links a:hover {
            color: var(--mc-sky-deep);
            background: var(--mc-cereal-cyan);
            box-shadow: 0 0 8px rgba(0,245,255,0.4);
        }

        /* ── BODY TEXT ── */
        .about-text {
            width: 100%;
            max-width: 960px;
            padding: 0 20px;
            animation: none;
        }
        .about-text p {
            font-family: 'Courier Prime', monospace;
            font-size: 14px;
            line-height: 1.8;
            color: var(--mc-text-primary);
            margin-bottom: 18px;
            text-align: justify;
        }
        .about-text p:last-child { margin-bottom: 0; }
        .about-text a {
            color: var(--mc-cereal-cyan);
            text-decoration: none;
            border-bottom: 1px solid rgba(0,245,255,0.3);
            transition: color 0.15s, border-color 0.15s;
        }
        .about-text a:hover {
            color: var(--mc-crater);
            border-bottom-color: var(--mc-crater);
        }

        /* Drop cap */
        .about-text p:first-of-type::first-letter {
            font-family: 'Press Start 2P', monospace;
            font-size: 2.2em;
            float: left;
            line-height: 0.85;
            margin-right: 8px;
            margin-top: 4px;
            color: var(--mc-crater);
            text-shadow: 0 0 12px rgba(255,61,110,0.5);
        }

        /* Float ASCII art for text wrapping */

        /* ── LOGO ── */
        .logo-wrap {
            margin-bottom: 24px;
            text-align: center;
        }
        .logo-wrap img {
            width: min(160px, 100%);
            height: auto;
            display: block;
            margin: 0 auto;
            border: 1px solid var(--mc-crater);
            box-shadow: 0 0 12px rgba(255,61,110,0.2);
        }
        .logo-wrap::before, .logo-wrap::after { display: none; }
        .photo-caption {
            font-family: 'Playfair Display', serif;
            font-size: 9px;
            font-style: italic;
            color: var(--mc-smoke);
            text-align: center;
            margin-top: 8px;
        }

        /* ── QUICK LINKS (old sidebar, now unused) ── */

        /* ── FOOTER ── */
        footer {
            background: var(--mc-sky-deep) !important;
            border-top-color: var(--mc-border) !important;
            color: var(--mc-smoke) !important;
        }
        footer span { color: var(--mc-crater) !important; }

        /* ── MOBILE ── */
        @media (max-width: 640px) {
            main { padding: 64px 14px 48px; }
            .page-title { font-size: 10px; }
            .about-text p { font-size: 13px; }
            .dateline { font-size: 7px; gap: 10px; }
            .zine-links { flex-direction: column; align-items: center; }
            .cereal-canvas-wrap { float: none; width: 80%; max-width: 260px; margin: 16px auto; }

            .masthead-title { line-height: 1.5; }
            .masthead-rule { margin: 18px 0 12px; }
            .masthead-sub { font-size: 11px; letter-spacing: 0.3em; text-indent: 0.3em; }
            .masthead-quote { font-size: 12px; line-height: 1.8; }

            .about-jump { gap: 5px 6px; margin-bottom: 20px; }
            .about-jump a { font-size: 7px; padding: 6px 7px; }

            .about-heading { font-size: 10px; margin: 26px 0 14px; }

            /* The floated ASCII blocks are 60-plus monospace columns wide. At
               half a phone's width they are unreadable AND they squeeze the
               prose into a four-word column, so they go full width here. */
            .ascii-float-right {
                float: none;
                max-width: 100%;
                margin: 18px 0;
                overflow-x: auto;
            }
            .ascii-float-right pre { font-size: clamp(3px, 1.5vw, 6px) !important; }
        }

        /* ── ARTIST LINK STRIPS ── */
        .link-strip {
            position: relative;
            width: 100%;
            max-width: 960px;
            height: 140px;
            overflow: hidden;
            border: 1px solid var(--mc-border);
            margin-bottom: 12px;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .link-strip:hover {
            border-color: var(--mc-crater);
            box-shadow: 0 0 20px rgba(255,61,110,0.25);
        }
        .link-strip-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            filter: brightness(0.25) saturate(0.5);
            transition: filter 0.3s;
        }
        .link-strip:hover .link-strip-bg {
            filter: brightness(0.35) saturate(0.7);
        }
        .link-strip-inner {
            /* Query container for the fit-to-box font-size below. `size` and
               not `inline-size`, because the art has to fit vertically too and
               that needs 100cqh. It is safe here: this box takes both its
               dimensions from the strip (100% of a fixed 140px), so size
               containment removes nothing it was using. */
            container-type: size;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: var(--mc-text-primary);
            padding: 12px 20px;
            box-sizing: border-box;
        }
        /* ── ARTIST STRIP ART ──
           Every strip used to be set at the same clamp whatever its size, so a
           block too big for the box was silently cropped rather than scaled:
           texas-holdem-lava-dome overflowed 474x161 into 918x114 and lost its
           top and bottom rows, juanito thompson 138 into 114, and on a phone
           texas-holdem also ran 379px of art through 305px of room and lost the
           end of the word. Nothing said so -- the art just stopped early.

           Each <pre> carries its own --cols and --rows, so the size below is
           whichever of three limits binds first: the 5px cap, the width, or the
           height. 0.6 is Courier Prime's advance in em, measured rather than
           assumed (158 cols at 4px come to 379px, and 379/158/4 = 0.5997);
           1.15 is the line-height on this rule.

           The clamp stays as the first declaration. A browser without container
           queries cannot parse cqw/cqh, drops the second declaration whole, and
           keeps the old behavior. */
        .link-strip-inner pre {
            font-family: 'Courier Prime', monospace;
            font-size: clamp(2px, 0.5vw, 5px);
            /* The outer max() keeps the clamp's old 2px floor: past that
               point shrinking stops buying anything and cropping is the lesser
               of the two evils. */
            font-size: max(2px, min(
                5px,
                calc(100cqw / var(--cols, 120) / 0.6),
                calc(100cqh / var(--rows, 20) / 1.15)
            ));
            line-height: 1.15;
            white-space: pre;
            text-shadow: 0 0 8px rgba(255,45,155,0.3);
            overflow: hidden;
        }
        .strip-hover-tag {
            position: absolute;
            bottom: 10px;
            right: 14px;
            font-family: 'Press Start 2P', monospace;
            font-size: 6px;
            color: var(--mc-crater);
            letter-spacing: 0.06em;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
            text-shadow: 0 0 8px rgba(255,61,110,0.5);
        }
        .link-strip:hover .strip-hover-tag { opacity: 1; }
        .strips-divider {
            width: 100%;
            max-width: 960px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--mc-crater), var(--mc-cereal-cyan), var(--mc-crater), transparent);
            margin-bottom: 24px;
            opacity: 0.4;
        }
        .section-label {
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            color: var(--mc-crater);
            letter-spacing: 0.18em;
            margin-bottom: 20px;
            opacity: 0.8;
            text-shadow: 0 0 10px rgba(255,61,110,0.3);
        }

        @media (max-width: 640px) {
            .link-strip { height: 110px; }
            .link-strip-inner pre {
                font-size: clamp(1.5px, 1.2vw, 4px);
                font-size: max(1.5px, min(
                    4px,
                    calc(100cqw / var(--cols, 120) / 0.6),
                    calc(100cqh / var(--rows, 20) / 1.15)
                ));
            }
        }

        /* ── EMAIL CALLOUT ── */
        .email-callout {
            width: 100%;
            max-width: 960px;
            text-align: center;
            padding: 40px 24px;
            margin: 40px 0;
            border: 2px solid var(--mc-cereal-cyan);
            background: rgba(0,245,255,0.04);
            box-shadow: 0 0 24px rgba(0,245,255,0.15), inset 0 0 30px rgba(0,245,255,0.03);
            position: relative;
        }
        .email-callout::before,
        .email-callout::after {
            content: '//';
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            color: var(--mc-cereal-cyan);
            opacity: 0.5;
            position: absolute;
            top: 12px;
        }
        .email-callout::before { left: 16px; }
        .email-callout::after { right: 16px; }
        .email-callout-label {
            font-family: 'Press Start 2P', monospace;
            font-size: 11px;
            color: var(--mc-cereal-cyan);
            letter-spacing: 0.15em;
            text-transform: lowercase;
            margin-bottom: 16px;
            text-shadow: 0 0 12px rgba(0,245,255,0.5);
        }
        .email-callout a {
            font-family: 'Courier Prime', monospace;
            font-size: 18px;
            font-weight: 700;
            color: var(--mc-cereal-cyan);
            text-decoration: none;
            border-bottom: 2px solid rgba(0,245,255,0.4);
            padding-bottom: 2px;
            transition: color 0.15s, border-color 0.15s, text-shadow 0.15s;
        }
        .email-callout a:hover {
            color: #fff;
            border-bottom-color: #fff;
            text-shadow: 0 0 16px rgba(0,245,255,0.7);
        }
        .email-callout-sub {
            font-family: 'Courier Prime', monospace;
            font-size: 11px;
            color: var(--mc-smoke);
            margin-top: 12px;
            opacity: 0.7;
        }

        @media (max-width: 640px) {
            .email-callout { padding: 28px 16px; margin: 28px 0; }
            .email-callout-label { font-size: 9px; }
            .email-callout a { font-size: 15px; }
        }

        /* ── PIXELATED LOGO GRID ── */
        .logo-grid-section {
            width: 100%;
            background: var(--deep);
            border-top: 2px solid #1a1a2a;
            border-bottom: 2px solid #1a1a2a;
            padding: 48px 28px 52px;
            animation: fadeUp 0.5s 0.3s ease both;
            margin-top: 48px;
        }
        .logo-grid-label {
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            color: var(--mc-lava-bright);
            letter-spacing: 0.18em;
            text-align: center;
            margin-bottom: 40px;
            text-shadow: 0 0 12px rgba(255,224,58,0.4);
        }
        .logo-grid-groups {
            display: flex;
            flex-direction: column;
            gap: 36px;
            max-width: 900px;
            margin: 0 auto;
        }
        .logo-group { display: flex; flex-direction: column; gap: 12px; }
        .logo-group-label {
            font-family: 'Press Start 2P', monospace;
            font-size: 6px;
            color: var(--dim);
            letter-spacing: 0.18em;
            text-transform: uppercase;
            opacity: 0.55;
            padding-bottom: 8px;
            border-bottom: 1px solid #1a1a2a;
        }
        .logo-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
        .logo-link {
            display: block;
            position: relative;
            text-decoration: none;
            transition: transform 0.15s ease, filter 0.15s ease;
            margin-bottom: 20px;
        }
        .logo-link:hover {
            transform: scale(1.18);
            filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,224,58,0.55));
        }
        .logo-link::after {
            content: attr(data-label);
            position: absolute;
            bottom: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Press Start 2P', monospace;
            font-size: 4.5px;
            color: var(--mc-lava-bright);
            white-space: nowrap;
            letter-spacing: 0.06em;
            opacity: 0;
            transition: opacity 0.15s ease;
            pointer-events: none;
        }
        .logo-link:hover::after { opacity: 0.85; }
        .pixel-logo {
            width: 48px;
            height: 48px;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            display: block;
            filter: saturate(0.85) brightness(0.9);
            transition: filter 0.15s ease;
        }
        .logo-link:hover .pixel-logo { filter: saturate(1.1) brightness(1.1); }

        @media (max-width: 640px) {
            .logo-grid-section { padding: 36px 20px 44px; }
            .pixel-logo { width: 40px; height: 40px; }
        }