/*
 * web-spec.css - the SpectrEm page.
 *
 * Built from the Spectrum's own furniture rather than the site's cards:
 * the loading border, the eight attribute colours, the rubber keys with
 * their keyword legends, and the tape header line. One text face for
 * everything, and a monospace only where the machine is being quoted.
 */

:root {
    --zx-black: #000;
    --zx-blue: #0022c7;
    --zx-red: #d62816;
    --zx-magenta: #cb3fd5;
    --zx-green: #00c525;
    --zx-cyan: #00c7c9;
    --zx-yellow: #ccc82a;
    --zx-white: #cfcfcf;
    --zx-bright: #fff;

    --ink: #e8e8e8;
    --ink-dim: #9a9a9a;
    --rule: #262626;
    --key: #1d1d1d;
    --key-edge: #3a3a3a;

    --sans: "Space Grotesk", system-ui, sans-serif;
    --mono: "JetBrains Mono", "Fira Code", monospace;

    --wrap: 1120px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--zx-black);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--zx-cyan);
    outline-offset: 3px;
}

h1,
h2,
h3,
p {
    margin: 0;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.mono {
    font-family: var(--mono);
}

/* ----- Nav ---------------------------------------------------------- */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.brand {
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.navlinks {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.95rem;
}

.navlinks a {
    text-decoration: none;
    color: var(--ink-dim);
}

.navlinks a:hover {
    color: var(--ink);
}

/* ----- Loading border --------------------------------------------- */

/* The border of a Spectrum screen while a program loads: yellow and blue
   bands of uneven width, shifting as the data comes in. This is the page's
   one piece of decoration, and it frames the hero the way it framed every
   game anyone ever waited for. */
.loading {
    --band-a: var(--zx-yellow);
    --band-b: var(--zx-blue);
    padding: clamp(1.5rem, 4vw, 3rem);
    background: repeating-linear-gradient(
        180deg,
        var(--band-a) 0 6px,
        var(--band-b) 6px 14px,
        var(--band-a) 14px 24px,
        var(--band-b) 24px 30px,
        var(--band-a) 30px 34px,
        var(--band-b) 34px 46px,
        var(--band-a) 46px 58px,
        var(--band-b) 58px 64px
    );
    background-size: 100% 64px;
    animation: load 1.1s linear infinite;
}

@keyframes load {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 64px;
    }
}

/* The paper area inside the border. */
.screen {
    background: var(--zx-black);
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
}

.wordmark {
    font-size: clamp(3.25rem, 8vw, 6.5rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
}

.zx-red {
    color: var(--zx-red);
}
.zx-yellow {
    color: var(--zx-yellow);
}
.zx-green {
    color: var(--zx-green);
}
.zx-cyan {
    color: var(--zx-cyan);
}

.lead {
    margin-top: 1.5rem;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    max-width: 30rem;
    color: var(--zx-white);
}

.actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* The Sinclair stripe, on the one button that switches the machine on. */
.launch {
    position: relative;
    display: inline-block;
    padding: 0.85rem 4.25rem 0.85rem 1.5rem;
    background: var(--zx-bright);
    color: var(--zx-black);
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

.launch::after {
    content: "";
    position: absolute;
    right: -0.6rem;
    top: -0.5rem;
    bottom: -0.5rem;
    width: 4.5rem;
    background: linear-gradient(
        110deg,
        transparent 0 18%,
        var(--zx-red) 18% 38%,
        var(--zx-yellow) 38% 58%,
        var(--zx-green) 58% 78%,
        var(--zx-cyan) 78%
    );
    z-index: -1;
    transition: transform 150ms ease;
}

.launch:hover::after {
    transform: translateX(-0.5rem);
}

.quiet {
    color: var(--ink-dim);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.quiet:hover {
    color: var(--ink);
}

/* The tape header, as the ROM prints it. */
.header-line {
    margin-top: 2.5rem;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--zx-white);
}

.header-line span {
    color: var(--zx-cyan);
}

.screen-shot {
    display: block;
    border: 0;
    background: #000;
}

.screen-shot img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

/* ----- Sections ---------------------------------------------------- */

.sec {
    padding-top: clamp(3rem, 7vw, 5.5rem);
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
    border-top: 1px solid var(--rule);
}

.sec-title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1.75rem;
}

.prose {
    max-width: 38rem;
    color: var(--zx-white);
}

.prose + .prose {
    margin-top: 1rem;
}

/* ----- Full-width screenshot -------------------------------------- */

.full-shot {
    padding-top: clamp(2rem, 5vw, 4rem);
}

.full-shot figure {
    margin: 0;
}

.full-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.full-shot figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--ink-dim);
}

/* ----- The four machines, as rubber keys ------------------------- */

.keys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.key {
    display: block;
}

/* The keyword printed above a Spectrum key, in the colour it was printed. */
.key-legend {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--zx-red);
    margin-bottom: 0.4rem;
}

.key-cap {
    display: block;
    background: var(--key);
    border: 1px solid var(--key-edge);
    border-bottom-width: 4px;
    border-radius: 6px;
    padding: 1.1rem 1rem 0.9rem;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 700;
    color: var(--zx-bright);
    line-height: 1;
}

.key-note {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.95rem;
    color: var(--zx-white);
}

/* ----- Plain two-column list ------------------------------------- */

.list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 3rem;
}

.list-item {
    padding: 1.1rem 0;
    border-top: 1px solid var(--rule);
}

.list-item h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.list-item p {
    color: var(--zx-white);
    font-size: 0.95rem;
}

/* ----- The debugger ----------------------------------------------- */

.debug {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.debug-shot {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--rule);
}

.debug-shot img {
    display: block;
    width: 250%;
    height: auto;
    transform: translate(-58%, -2%);
}

.debug .list {
    grid-template-columns: 1fr;
    gap: 0;
}

/* ----- Switch it on ------------------------------------------------ */

.end {
    text-align: left;
}

.end .header-line {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.foot {
    padding-top: 2rem;
    padding-bottom: 3rem;
    font-size: 0.9rem;
    color: var(--ink-dim);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ----- Small screens ---------------------------------------------- */

@media (max-width: 900px) {
    .screen {
        grid-template-columns: 1fr;
    }

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

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

    .debug-shot {
        aspect-ratio: 16 / 10;
    }

    .debug-shot img {
        width: 200%;
        transform: translate(-50%, -2%);
    }

    .navlinks .hide-sm {
        display: none;
    }
}

@media (max-width: 560px) {
    .list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}