/* Channel identity */
:root {
    --accent: #f47b25;
    --cobalt: #3457a6;
    --st-dark: #17191d;
    --st-panel: #24262a
}

body[data-page=home] {
    --display: 'Silkscreen',monospace;
    --body: 'IBM Plex Mono',monospace;
    font-synthesis: none
}

.announcement, .site-header, .footer {
    --display: 'Silkscreen',monospace;
    --body: 'IBM Plex Mono',monospace;
    font-synthesis: none
}

.announcement {
    background: #202422;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: .06em
}

.site-header .brand, .footer .brand {
    font-size: 16px;
    line-height: 1.2
}

.site-header .navbar .nav-link {
    font-size: 12px;
    line-height: 1.5
}

body[data-page=home] .eyebrow {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: .06em
}

body[data-page=ase] .eyebrow {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .06em
}

body[data-page=home] .hero h1 {
    font-size: clamp(28px,3.2vw,44px);
    letter-spacing: -.065em;
    line-height: 1.35
}

body[data-page=home] .section-top h2 {
    font-size: clamp(22px,2.45vw,33px);
    letter-spacing: -.065em;
    line-height: 1.45
}

body[data-page=home] .teaser-copy h2 {
    font-size: clamp(18px,2vw,27px);
    letter-spacing: -.065em;
    line-height: 1.5
}

body[data-page=home] .video-detail h3 {
    font-size: clamp(16px,1.6vw,21px);
    line-height: 1.6;
    letter-spacing: -.04em
}

body[data-page=home] .value-card h3 {
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: -.04em
}

body[data-page=home] .btn-pill, body[data-page=home] .text-link, body[data-page=home] .round-link {
    font-size: 12px;
    line-height: 1.5
}

body[data-page=home] .channel-hero-sticker {
    font-size: 10px;
    line-height: 1.5
}

@media(max-width:480px) {
    body[data-page=home] .hero h1 {
        font-size: clamp(23px,6vw,27px)
    }

    body[data-page=home] .teaser-copy h2 {
        font-size: 17px
    }

    body[data-page=home] .channel-hero-sticker {
        font-size: 8px
    }
}

.brand-avatar {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: none
}

.footer .brand-avatar {
    filter: drop-shadow(0 2px 8px #0006)
}

.site-header {
    --ink: #202422;
    background: #f6f4ed;
    color: #202422;
    font-family: var(--body);
    border-bottom-color: #dcded6
}

.footer {
    font-family: var(--body)
}

.contact-main {
    min-height: 520px;
    padding-top: 85px;
    padding-bottom: 110px
}

.contact-main [hidden] {
    display: none !important
}

.contact-main h1 {
    font: 700 clamp(55px,8vw,100px)/1.02 'Space Grotesk',sans-serif;
    letter-spacing: -.075em;
    margin: 20px 0 28px
}

.contact-main h1 em {
    color: #ea5a42
}

.contact-main > p {
    max-width: 620px;
    color: #60665f;
    font-size: 18px;
    line-height: 1.7
}

#contact-address {
    margin-top: 26px;
    overflow-wrap: anywhere
}

#contact-email {
    color: #202422;
    font: 600 clamp(20px,4vw,32px)/1.3 'Space Grotesk',sans-serif
}

.contact-hint {
    display: block;
    margin-top: 10px;
    font-size: 14px
}

body[data-page=not-found] {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.not-found-main {
    flex: 1;
    min-height: 420px;
    padding-top: 60px;
    padding-bottom: 60px
}

.channel-hero {
    grid-template-columns: 48% 52%;
    gap: 1%;
    min-height: 680px
}

    .channel-hero .hero-copy > p {
        max-width: 500px
    }

    .channel-hero .hero-foot {
        margin-top: 55px
    }

.channel-hero-art {
    position: relative;
    width: min(100%,550px);
    aspect-ratio: 1/1.03;
    margin: 20px auto 10px;
    padding: 15px;
    background: #202830;
    border: 1px solid #0b1520;
    box-shadow: 18px 19px 0 #d3d5c9;
    transform: rotate(3deg);
    display: flex;
    flex-direction: column;
    color: #f7f4e9
}

.channel-hero-top, .channel-hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font: 10px/1.2 var(--display);
    letter-spacing: .14em;
    padding: 8px 7px
}

.channel-hero-screen {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: radial-gradient(circle at 65% 28%,#6986c8,#3557a6 67%,#223f83);
    border: 5px solid #151e2a;
    display: grid;
    place-items: center
}

    .channel-hero-screen:after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 4px)
    }

.channel-hero-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#fff1 1px,transparent 1px),linear-gradient(#fff1 1px,transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(transparent,#000)
}

.channel-hero-screen img {
    position: relative;
    z-index: 1;
    width: 79%;
    height: auto;
    align-self: end;
    filter: drop-shadow(15px 9px 0 #142b6280)
}

.screen-cross {
    position: absolute;
    color: #f5f4e5;
    font: 400 32px var(--display);
    z-index: 2
}

.cross-one {
    top: 8%;
    left: 9%
}

.cross-two {
    right: 10%;
    bottom: 10%
}

.record-dot {
    color: #ff8765
}

.channel-hero-sticker {
    position: absolute;
    right: -27px;
    bottom: 52px;
    z-index: 3;
    width: 117px;
    height: 117px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 50%;
    background: #f47b25;
    color: #202422;
    font: 700 16px/1.1 var(--display);
    transform: rotate(-15deg);
    box-shadow: 4px 8px 0 #151e2a
}

.machine-strip {
    background: #dbe3ec;
    border-block: 1px solid #bcc9dc
}

.machine-strip-inner {
    min-height: 154px;
    display: flex;
    align-items: center;
    gap: 34px
}

.machine-strip-label {
    font: 12px/1.5 var(--display);
    letter-spacing: .13em;
    min-width: 175px
}

    .machine-strip-label i {
        color: var(--accent);
        margin-left: 8px
    }

.machine-icons {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px;
    flex: 1
}

    .machine-icons > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 105px;
        border-left: 1px solid #bbc7d8
    }

    .machine-icons img {
        width: 120px;
        height: 100px;
        object-fit: contain;

        transition: transform .2s
    }

    .machine-icons > div:hover img {
        transform: translateY(-5px)
    }

    .machine-icons span {
        font: 12px var(--display);
        letter-spacing: .07em;
        text-align: center
    }

.channel-banner-section {
    padding: 75px 0;
    background: #dbe3ec
}

    .channel-banner-section .eyebrow {
        margin-bottom: 18px
    }

.channel-banner {
    display: block;
    height: 245px;
    position: relative;
    overflow: hidden;
    background: #3457a6;
    border: 8px solid #222b36;
    box-shadow: 13px 13px 0 #b8c6d6
}

    .channel-banner img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 55%;
        transition: transform .25s
    }

    .channel-banner:hover img {
        transform: scale(1.025)
    }

    .channel-banner > span {
        position: absolute;
        right: 13px;
        bottom: 13px;
        background: #f6f4ed;
        color: #202422;
        padding: 11px 15px;
        font: 700 11px var(--display);
        letter-spacing: .09em
    }

        .channel-banner > span i {
            margin-left: 15px;
            color: var(--accent)
        }

.video-placeholder {
    background: #3457a6
}

    .video-placeholder img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

    .video-placeholder span {
        position: relative;
        z-index: 1;
        background: #202422d9;
        padding: 10px 13px;
        font-size: 10px;
        color: white;
        transform: translateY(140px)
    }

.teaser-logo {
    display: block;
    width: min(100%,360px);
    height: auto;
    margin: 30px 0 0
}

.teaser-copy .teaser-overline {
    margin-top: 28px
}

.ase-teaser {
    background: #1d2224
}

.teaser-ring {
    background: #2b353a;
    border-color: #3c474b
}

.ase-window {
    margin: 0;
    background: #bfc3bd;
    border-color: #bfc3bd
}

.window-screen img {
    display: block;
    aspect-ratio: 952/811;
    object-fit: cover
}

.teaser-chip {
    background: #6fc3cb
}
/* ASE: Atari casing, application charcoal and orange controls */
body[data-page=ase] {
    --paper: #eeefec;
    --ink: #222429;
    --line: #d2d4d1;
    --accent: #f47b25;
    --display: 'SF Atarian System',monospace;
    --body: 'IBM Plex Mono',monospace;
    background: #eeefec;
    font-synthesis: none
}

    body[data-page=ase] .ase-hero h1 {
        font-size: clamp(40px,4.5vw,62px);
        line-height: 1.2
    }

    body[data-page=ase] .section-top h2, body[data-page=ase] .info-grid h2, body[data-page=ase] .join-inner h2 {
        font-size: clamp(34px,3.5vw,48px);
        line-height: 1.25
    }

    body[data-page=ase] .feature-copy h2 {
        font-size: clamp(34px,3.3vw,45px);
        line-height: 1.3
    }

    body[data-page=ase] .ase-spec-grid h3 {
        font-size: 24px;
        line-height: 1.3
    }

    body[data-page=ase] .release-copy h2 {
        font-size: 25px;
        line-height: 1.3
    }

    body[data-page=ase] .info-links a {
        font-size: 18px;
        line-height: 1.4
    }

    body[data-page=ase] .btn-pill, body[data-page=ase] .text-link, body[data-page=ase] .round-link {
        font-size: 15px;
        line-height: 1.4
    }

    body[data-page=ase] .ase-badge, body[data-page=ase] .mini-label {
        font-size: 14px
    }

    body[data-page=ase] .ase-spec-grid span, body[data-page=ase] .feature-index, body[data-page=ase] .compare-meta, body[data-page=ase] .compare-controls, body[data-page=ase] .toolbox-panel-header, body[data-page=ase] .toolbox-routing, body[data-page=ase] .gallery-grid figcaption {
        font-size: 12px;
        line-height: 1.4
    }

    body[data-page=ase] .machine-top, body[data-page=ase] .machine-bottom, body[data-page=ase] .visual-caption {
        font-size: 12px
    }

    body[data-page=ase] .machine-logo {
        font-size: 12px
    }

    body[data-page=ase] .image-zoom .zoom-hint, body[data-page=ase] .gallery-grid .image-zoom:after, body[data-page=ase] .compare-zoom-actions button {
        font-size: 12px
    }

@media(max-width:480px) {
    body[data-page=ase] .ase-hero h1 {
        font-size: 42px
    }

    body[data-page=ase] .feature-copy h2 {
        font-size: 34px
    }

    body[data-page=ase] .machine-top, body[data-page=ase] .machine-bottom {
        font-size: 10px
    }

    body[data-page=ase] .machine-logo {
        font-size: 10px
    }
}

body[data-page=ase] .ase-hero {
    background: #181a1e;
    position: relative
}

    body[data-page=ase] .ase-hero:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 28px;
        background: repeating-linear-gradient(115deg,#747b7b 0 2px,#9ba19d 2px 5px,#343b3e 5px 7px);
        opacity: .42
    }

body[data-page=ase] .ase-hero-grid {
    min-height: 660px;
    position: relative;
    z-index: 1
}

.ase-page-logo {
    display: block;
    width: min(100%,480px);
    height: auto;
    margin-top: 30px
}

body[data-page=ase] .ase-badge {
    margin-top: 28px;
    background: #282b2f;
    border-color: #42474b
}

body[data-page=ase] .ase-hero h1 {
    margin: 20px 0 22px
}

body[data-page=ase] .ase-hero-copy > p {
    color: #bfc3c2
}

body[data-page=ase] .ase-hero-visual {
    min-height: 620px
}

.ase-visual-grid {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,transparent 0 20px,#fff1 21px 22px),repeating-linear-gradient(90deg,transparent 0 20px,#fff1 21px 22px);
    mask-image: radial-gradient(circle,#000,transparent 72%)
}

body[data-page=ase] .ase-machine {
    width: 88%;
    max-width: 530px;
    background: #bfc3be;
    box-shadow: 25px 27px 0 #0a0b0d;
    transform: rotate(3deg)
}

body[data-page=ase] .machine-screen {
    aspect-ratio: 952/811;
    border-color: #454849;
    background: #070808
}

    body[data-page=ase] .machine-screen img {
        object-fit: contain
    }

body[data-page=ase] .machine-top, body[data-page=ase] .machine-bottom {
    color: #35383a
}

body[data-page=ase] .visual-caption {
    bottom: 38px;
    color: #bfc7c7
}

body[data-page=ase] .release-section {
    background: #dfe3e1
}

.ase-intro .section-intro {
    max-width: 425px;
    color: #666c6c;
    line-height: 1.7
}

.ase-spec-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: #c8ceca;
    border: 1px solid #c8ceca
}

    .ase-spec-grid > div {
        background: #f7f7f2;
        padding: 34px;
        min-height: 255px
    }

    .ase-spec-grid span, .feature-index, .compare-meta, .compare-controls, .toolbox-panel-header, .toolbox-routing, .gallery-grid figcaption {
        font: 700 10px/1.5 var(--display);
        letter-spacing: .12em
    }

    .ase-spec-grid span {
        color: #d7661e
    }

    .ase-spec-grid h3 {
        font: 700 25px/1.1 var(--display);
        letter-spacing: -.05em;
        margin: 34px 0 12px
    }

    .ase-spec-grid p {
        font-size: 14px;
        line-height: 1.65;
        color: #626a69;
        margin: 0
    }

.ase-feature {
    padding: 100px 0
}

.feature-picture {
    background: #d4d9d6
}

.feature-audio {
    background: #1d2023;
    color: #f2f2ed;
    position: relative;
    overflow: hidden
}

    .feature-audio:before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(115deg,transparent 0 7px,#fff1 8px 9px);
        mask-image: linear-gradient(90deg,transparent 65%,#000)
    }

.feature-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 8%;
    align-items: center;
    position: relative
}

.feature-copy {
    max-width: 495px
}

.feature-index {
    color: #cb601c
}

.feature-copy h2 {
    font: 700 clamp(42px,4.7vw,70px)/1.04 var(--display);
    letter-spacing: -.075em;
    margin: 19px 0 24px
}

.feature-copy > p {
    line-height: 1.77;
    color: #555f5c;
    font-size: 16px
}

.feature-copy .feature-note {
    font-size: 13px;
    color: #68716d;
    border-left: 3px solid var(--accent);
    padding-left: 15px;
    margin: 25px 0
}

.feature-copy .text-link {
    display: inline-block;
    margin-top: 8px
}

.feature-audio .feature-copy > p {
    color: #bfc6c3
}

.feature-audio .feature-copy .feature-note {
    color: #9fa8a5
}

.feature-audio .feature-copy .text-link {
    border-color: #eee;
    color: #eee
}

    .feature-audio .feature-copy .text-link:hover {
        color: var(--accent);
        border-color: var(--accent)
    }

.compare-panel {
    background: #1b1e21;
    color: #fff;
    padding: 16px;
    box-shadow: 16px 17px 0 #a7afaa
}

.compare-meta, .toolbox-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 3px 14px;
    color: #c8d0ce
}

.compare-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 594/401;
    background: #050606;
    touch-action: none;
    cursor: ew-resize
}

    .compare-stage > img, .compare-after img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        image-rendering: pixelated
    }

.compare-after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--compare))
}

.compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--compare);
    width: 2px;
    background: #fff;
    transform: translateX(-1px);
    pointer-events: none
}

    .compare-divider span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: grid;
        place-items: center;
        background: var(--accent);
        border: 2px solid white;
        border-radius: 50%;
        width: 39px;
        height: 39px;
        font: 700 19px var(--display)
    }

.compare-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 2px;
    color: #dee1de;
    white-space: nowrap
}

    .compare-controls input {
        min-width: 0;
        flex: 1;
        accent-color: var(--accent);
        cursor: ew-resize
    }

    .compare-controls span:last-child {
        color: #ff9c56
    }

.toolbox-panel {
    background: #2a2d30;
    border: 1px solid #505457;
    padding: 26px;
    box-shadow: 17px 19px 0 #0b0d0f;
    display: flex;
    flex-direction: column;
    align-items: center
}

.toolbox-panel-header {
    align-self: stretch;
    border-bottom: 1px solid #454a4b;
    margin-bottom: 26px;
    color: #d5dcda
}

.toolbox-panel img {
    display: block;
    width: min(100%,399px);
    height: auto;
    box-shadow: 0 15px 25px #0008
}

.toolbox-routing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 28px;
    color: #c9d2d0
}

    .toolbox-routing span {
        padding: 8px 10px;
        background: #3f4545
    }

    .toolbox-routing i {
        color: #f47b25;
        font-size: 20px
    }

    .toolbox-routing strong {
        color: #1a1e1e;
        background: #85bac0;
        padding: 8px 12px
    }

.ase-gallery .section-intro {
    max-width: 350px;
    line-height: 1.7;
    color: #69706c
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 20px
}

    .gallery-grid figure {
        margin: 0;
        background: #212426;
        padding: 8px;
        min-width: 0
    }

    .gallery-grid img {
        display: block;
        width: 100%;
        aspect-ratio: 4/3;
        height: auto;
        object-fit: cover;
        object-position: top left
    }

    .gallery-grid figcaption {
        color: #f6f6ef;
        padding: 15px 8px 8px
    }

        .gallery-grid figcaption span {
            color: var(--accent);
            margin-right: 12px
        }

@media(max-width:991px) {
    .channel-hero {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .channel-hero-art {
        width: min(85%,540px);
        margin: 30px auto 40px
    }

    .machine-strip-inner {
        display: block;
        padding-top: 24px;
        padding-bottom: 20px
    }

    .machine-icons {
        margin-top: 16px
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .feature-copy {
        max-width: 660px
    }

    .ase-spec-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr
    }

        .gallery-grid figure:first-child {
            grid-column: span 2
        }
}

@media(max-width:767px) {
    .channel-hero-art {
        width: min(88%,480px)
    }

    .channel-hero-sticker {
        right: -15px;
        width: 92px;
        height: 92px;
        font-size: 12px
    }

    .machine-icons {
        grid-template-columns: repeat(3,1fr)
    }

        .machine-icons > div:nth-child(4) {
            border-left: 0
        }

        .machine-icons > div {
            min-height: 95px
        }

    .ase-spec-grid {
        grid-template-columns: 1fr
    }

        .ase-spec-grid > div {
            min-height: 0
        }

        .ase-spec-grid h3 {
            margin-top: 16px
        }

    .ase-feature {
        padding: 75px 0
    }

    .gallery-grid {
        grid-template-columns: 1fr
    }

        .gallery-grid figure:first-child {
            grid-column: auto
        }

    body[data-page=ase] .ase-hero-visual {
        min-height: 440px
    }

    .compare-controls {
        font-size: 8px;
        gap: 7px
    }

    .toolbox-panel {
        padding: 15px
    }
}

@media(max-width:480px) {
    .channel-hero-art {
        width: 90%;
        padding: 8px;
        box-shadow: 10px 12px 0 #d3d5c9
    }

    .channel-hero-top, .channel-hero-bottom {
        font-size: 7px
    }

    .channel-hero-sticker {
        bottom: 35px
    }

    .machine-icons {
        grid-template-columns: repeat(2,1fr)
    }

        .machine-icons > div:nth-child(odd) {
            border-left: 0
        }

        .machine-icons > div:nth-child(4) {
            border-left: 1px solid #bbc7d8
        }

        .machine-icons img {
            width: 80px
        }

    .ase-page-logo {
        margin-top: 22px
    }

    .feature-copy h2 {
        font-size: 46px
    }

    .compare-panel {
        padding: 8px;
        box-shadow: 8px 9px 0 #a7afaa
    }

    .compare-meta, .toolbox-panel-header {
        font-size: 8px
    }

    .compare-controls {
        flex-wrap: wrap
    }

        .compare-controls input {
            order: 3;
            flex-basis: 100%
        }

    .toolbox-routing {
        font-size: 8px;
        gap: 4px
    }
}

@media(max-width:480px) {
    .channel-banner-section {
        padding: 55px 0
    }

    .channel-banner {
        height: 190px;
        border-width: 5px;
        box-shadow: 7px 8px 0 #b8c6d6
    }

        .channel-banner > span {
            font-size: 9px;
            padding: 8px
        }
}

/* Full-size screenshot viewer */
.image-zoom {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: zoom-in;
    overflow: hidden
}

    .image-zoom img {
        display: block
    }

    .image-zoom:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: -3px
    }

    .image-zoom .zoom-hint {
        position: absolute;
        right: 10px;
        bottom: 10px;
        padding: 8px 11px;
        background: #161a1de6;
        color: #fff;
        font: 700 10px var(--display);
        letter-spacing: .1em;
        pointer-events: none
    }

    .image-zoom:hover .zoom-hint, .image-zoom:focus-visible .zoom-hint {
        background: var(--accent);
        color: #191b1d
    }

.machine-screen > .image-zoom {
    height: 100%
}

.toolbox-panel > .image-zoom {
    width: min(100%,399px)
}

.gallery-grid .image-zoom img {
    width: 100%
}

.gallery-grid .image-zoom:after {
    content: 'EXPAND ↗';
    position: absolute;
    right: 9px;
    bottom: 9px;
    padding: 7px 10px;
    background: #161a1de6;
    color: #fff;
    font: 700 10px var(--display);
    letter-spacing: .1em;
    pointer-events: none
}

.gallery-grid .image-zoom:hover:after, .gallery-grid .image-zoom:focus-visible:after {
    background: var(--accent);
    color: #191b1d
}

.compare-zoom-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 13px
}

    .compare-zoom-actions button {
        border: 1px solid #5c6364;
        background: #292d30;
        color: #f2f2ed;
        padding: 8px 11px;
        font: 700 11px var(--display);
        cursor: zoom-in
    }

        .compare-zoom-actions button:hover, .compare-zoom-actions button:focus-visible {
            border-color: var(--accent);
            color: #ff9c56
        }

    .compare-zoom-actions i {
        margin-left: 8px
    }

.image-lightbox {
    width: max-content;
    max-width: 96vw;
    max-height: 96dvh;
    margin: auto;
    padding: 0;
    border: 1px solid #596067;
    background: #16191c;
    color: #f5f5f0;
    box-shadow: 0 25px 90px #0009
}

    .image-lightbox::backdrop {
        background: #080a0de0;
        backdrop-filter: blur(5px)
    }

.lightbox-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 54px 16px 0
}

.lightbox-close {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 38px;
    height: 38px;
    border: 1px solid #626a6e;
    background: #2b3033;
    color: #fff;
    font: 400 29px/1 var(--body);
    cursor: pointer
}

    .lightbox-close:hover, .lightbox-close:focus-visible {
        background: var(--accent);
        color: #141719;
        border-color: var(--accent)
    }

.lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(96dvh - 135px);
    width: auto;
    height: auto;
    object-fit: contain
}

.lightbox-footer {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 2px;
    font: var(--display)
}

    .lightbox-footer p {
        margin: 0
    }

    .lightbox-footer a {
        white-space: nowrap;
        color: #ff9c56;
        text-decoration: underline;
        text-underline-offset: 3px
    }

        .lightbox-footer a:hover {
            color: #fff
        }

@media(max-width:600px) {
    .lightbox-shell {
        padding: 48px 8px 0
    }

    .lightbox-image {
        max-height: calc(96dvh - 145px)
    }

    .lightbox-footer {
        font-size: 10px;
        gap: 8px
    }
}

/* Use the font's natural character spacing within ASE content. */
body[data-page=ase] main, body[data-page=ase] main *, body[data-page=ase] main *::before, body[data-page=ase] main *::after, body[data-page=ase] .image-lightbox, body[data-page=ase] .image-lightbox * {
    letter-spacing: normal !important
}