/* =====================================================================
   ApplEm - the Mac app
   =====================================================================

   Dressed as its icon: a platinum case with a dark screen set into it,
   green phosphor on the glass, and a row of keys underneath. The page is
   case colour; anything the machine itself shows (the prompt, the
   developer tools) sits on the screen colour. The only other colours are
   the four a hi-res screen fringes into, violet, green, orange and blue,
   used as small marks the way they appear in the screenshots.

   Two faces. Young Serif for the headings, chunky and warm, the way the
   computer magazines of the day set theirs. Recursive for everything
   else; where the machine is being quoted (a prompt, an address, a file
   name, a figure) it turns on its monospace and casual axes.
   ===================================================================== */

:root {
    --case: #e6dfcc;
    --case-deep: #d8cfb8;
    --case-edge: #bdb196;
    --ink: #26221c;
    --ink-soft: #625a4b;
    --ink-faint: #8a8170;
    --screen: #0b100d;
    --screen-raise: #131a15;
    --screen-rule: #24302a;
    --phosphor: #5fe08f;
    --phosphor-dim: #8fb79c;
    --violet: #c13cf0;
    --green: #3fc23f;
    --orange: #f2761d;
    --blue: #2f86f0;

    --wrap: 1180px;
    --gutter: clamp(16px, 4vw, 56px);
    --display: "Young Serif", "Cooper", Georgia, serif;
    --sans: "Recursive", "Helvetica Neue", Arial, sans-serif;
    --mono: "Recursive", ui-monospace, Menlo, monospace;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--case);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-variation-settings: "CASL" 0.25;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

::selection {
    background: var(--phosphor);
    color: var(--screen);
}

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

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

.mono {
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
}

/* ----- The vents ----------------------------------------------------
   The top of an Apple II case is slotted for cooling; the same slots run
   across the top of the page and above the footer. */

.vents {
    height: 22px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 10px,
        var(--case-edge) 10px 13px
    );
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    opacity: 0.55;
}

/* ----- Header ------------------------------------------------------ */

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.badge {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.badge img {
    width: 40px;
    height: 40px;
}

.badge span {
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.01em;
}

.crumb {
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
}

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

.toplinks {
    display: flex;
    align-items: center;
    gap: 26px;
}

.toplinks a.plain {
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-soft);
}

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

/* ----- The key ------------------------------------------------------
   The download is a key from the icon's keyboard: dark cap, a lighter
   face, and a deep skirt that shortens when it is pressed. */

.key {
    --skirt: 6px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 26px 15px 22px;
    background: #3a332a;
    color: #f3ecd9;
    text-decoration: none;
    font-weight: 650;
    font-variation-settings: "CASL" 1;
    font-size: 18px;
    line-height: 1.1;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),
        0 var(--skirt) 0 #1f1a14,
        0 calc(var(--skirt) + 10px) 18px -6px rgba(38, 34, 28, 0.45);
    transform: translateY(0);
    transition:
        transform 70ms ease-out,
        box-shadow 70ms ease-out,
        background 120ms;
}

.key:hover {
    background: #453d32;
}

.key:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),
        0 2px 0 #1f1a14,
        0 6px 10px -6px rgba(38, 34, 28, 0.45);
}

.key svg {
    flex: none;
}

.key small {
    display: block;
    margin-top: 3px;
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-weight: 400;
    font-size: 12px;
    color: #b9ae96;
}

.key-sm {
    --skirt: 4px;
    padding: 9px 16px;
    font-size: 14px;
    border-radius: 7px;
}

/* ----- Hero -------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
    padding-top: clamp(40px, 7vw, 88px);
    padding-bottom: clamp(48px, 6vw, 72px);
}

.overline {
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin: 0 0 22px;
}

.overline b {
    font-weight: 500;
    color: var(--ink);
}

h1 {
    font-size: clamp(42px, 6.6vw, 84px);
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 11.5em;
}

.lead {
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.55;
    color: #3e382f;
    max-width: 36em;
    margin: 30px 0 0;
}

.get {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 30px;
    margin-top: 38px;
}

.needs {
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0;
}

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

/* The four machines, as the badges on their cases might read. */
.models {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    text-align: right;
}

.models li {
    font-family: var(--display);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.models li::after {
    content: "";
    width: 26px;
    height: 8px;
    border-radius: 2px;
    background: var(--c);
}

/* ----- The screen band ----------------------------------------------
   Dark glass. A prompt in dot-matrix phosphor, then the app itself. */

.glass {
    background: var(--screen);
    color: #dfe9e2;
    position: relative;
}

.glass::before {
    /* Scanlines, faint, so the band reads as a tube without fighting the
       screenshots for attention. */
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.018) 0 1px,
        transparent 1px 3px
    );
    pointer-events: none;
}

.boot {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(48px, 7vw, 96px);
    position: relative;
}

.prompt {
    display: block;
    height: 32px;
    width: auto;
    image-rendering: pixelated;
    margin: 0 0 32px;
    filter: drop-shadow(0 0 6px rgba(95, 224, 143, 0.55));
}

.hero-shot {
    margin: 0;
}

.hero-shot img {
    width: 100%;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
}

.hero-shot figcaption,
.plate figcaption,
.bench figcaption,
.box figcaption {
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 13px;
    line-height: 1.55;
    margin-top: 16px;
}

.hero-shot figcaption {
    color: var(--phosphor-dim);
}

/* ----- Section heads ----------------------------------------------- */

.sec {
    padding-top: clamp(64px, 9vw, 120px);
    padding-bottom: clamp(16px, 3vw, 32px);
}

.head {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0 24px;
    border-top: 2px solid var(--ink);
    padding-top: 18px;
}

.num {
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 13px;
    padding-top: 10px;
    color: var(--ink-soft);
}

h2 {
    font-size: clamp(30px, 4.2vw, 50px);
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0;
}


/* ----- The machines: a data sheet ---------------------------------- */

.sheet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 44px;
    border-top: 1px solid var(--case-edge);
}

.sheet > div {
    padding: 22px 22px 26px 0;
    border-bottom: 1px solid var(--case-edge);
}

.sheet > div + div {
    padding-left: 22px;
    border-left: 1px solid var(--case-edge);
}

.sheet .bar {
    display: block;
    width: 34px;
    height: 8px;
    border-radius: 2px;
    background: var(--c);
    margin-bottom: 16px;
}

.sheet h3 {
    font-size: 21px;
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
}

.sheet dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    margin: 16px 0 0;
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 13px;
}

.sheet dt {
    color: var(--ink-faint);
}

.sheet dd {
    margin: 0;
}

.sheet p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 16px 0 0;
}

/* ----- Plates: one thing the app does, with its window ------------- */

.plate {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding-top: clamp(48px, 6vw, 80px);
}

.plate.flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.plate.flip .words {
    order: 2;
}

.plate.tall {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.plate.tall.flip {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.plate.tall figure img {
    max-height: 760px;
    width: auto;
    margin: 0 auto;
}

.plate figure {
    margin: 0;
}

.plate figure img {
    filter: drop-shadow(0 26px 34px rgba(38, 34, 28, 0.32));
}

.plate figcaption {
    color: var(--ink-soft);
}

.mark {
    display: inline-block;
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px 2px;
    border-radius: 3px;
    color: #fff;
    background: var(--c);
}

.words h3 {
    font-size: clamp(26px, 2.8vw, 34px);
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.08;
    margin: 16px 0 0;
}


.facts {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    border-top: 1px solid var(--case-edge);
}

.facts li {
    padding: 10px 0 10px 22px;
    border-bottom: 1px solid var(--case-edge);
    font-size: 15px;
    line-height: 1.5;
    color: #3e382f;
    position: relative;
}

.facts li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 18px;
    width: 8px;
    height: 4px;
    background: var(--ink);
}

.facts code,
.words code,
.bench code {
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 0.88em;
}

/* ----- The bench: the developer tools, on the screen colour -------- */

.bench-band {
    margin-top: clamp(80px, 10vw, 140px);
}

.bench-band .sec {
    padding-bottom: clamp(64px, 8vw, 110px);
    position: relative;
}

.bench-band .head {
    border-top-color: var(--phosphor);
}

.bench-band .num {
    color: var(--phosphor-dim);
}

.bench-band h2 {
    color: #f1f5f2;
}


.bench {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
    margin-top: 56px;
}

.bench figure {
    margin: 0;
}

.bench figure img {
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.7));
}

.bench figcaption {
    color: #b8c6bc;
}

.bench figcaption b {
    display: block;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 400;
    color: #f1f5f2;
    margin-bottom: 6px;
}

.bench figcaption b::before {
    content: "]";
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    color: var(--phosphor);
    margin-right: 8px;
}

/* ----- The rest of the box: small windows -------------------------- */

.box {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px 24px;
    margin-top: 44px;
    align-items: end;
}

.box figure {
    margin: 0;
}

.box img {
    filter: drop-shadow(0 14px 20px rgba(38, 34, 28, 0.28));
}

.box figcaption {
    color: var(--ink-soft);
    font-size: 12.5px;
}

.box figcaption b {
    display: block;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
}

/* Every screenshot opens larger. */
.zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.viewer {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(96vw, 1600px);
    max-height: 94vh;
}

.viewer::backdrop {
    background: rgba(11, 16, 13, 0.9);
}

.viewer img {
    max-width: min(96vw, 1600px);
    max-height: 94vh;
    width: auto;
    height: auto;
    cursor: zoom-out;
}

/* ----- Download, again --------------------------------------------- */

.last {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    margin-top: clamp(72px, 9vw, 120px);
    padding: clamp(28px, 4vw, 48px);
    background: var(--case-deep);
    border-radius: 22px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -3px 0 rgba(0, 0, 0, 0.06);
}

.last img {
    width: clamp(110px, 14vw, 168px);
}

.last h2 {
    font-size: clamp(28px, 3.6vw, 42px);
}

.last .get {
    margin-top: 26px;
}

.small-print {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-faint);
    max-width: 62em;
    margin: 48px 0 0;
}

footer {
    padding-top: 40px;
    padding-bottom: 32px;
}

footer .vents {
    margin-bottom: 24px;
}

footer p {
    font-family: var(--mono);
    font-variation-settings: "MONO" 1, "CASL" 1;
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
}

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

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

    .models {
        text-align: left;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        gap: 10px 32px;
    }

    .models li {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

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

    .sheet > div:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .plate,
    .plate.flip,
    .plate.tall,
    .plate.tall.flip {
        grid-template-columns: 1fr;
    }

    .plate.flip .words {
        order: 0;
    }

    .plate.tall figure img {
        max-height: 620px;
    }

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

    .toplinks a.plain {
        display: none;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 16px;
    }

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

    .num {
        padding-top: 0;
        margin-bottom: 6px;
    }


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

    .sheet > div,
    .sheet > div + div {
        padding-left: 0;
        border-left: 0;
    }

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

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

    .last {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .key {
        font-size: 16px;
    }

    .prompt {
        height: 24px;
    }

    .crumb {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .key {
        transition: none;
    }
}