:root {
    --paper: #fffbe2;
    --ink: #2a1f14;
    --stripe-1: #ffe763;
    --stripe-2: #ff9263;
    --stripe-3: #ff639a;
    --phosphor: #33ff33;
    --gutter: clamp(24px, 6vw, 96px);
    --hero-size: clamp(2.5rem, 8vw, 9rem);
    --space-tight: 4px;
    --space-inner: 12px;
    --space-group: 32px;
}

@font-face {
    font-family: Doto;
    src: url("../fonts/Doto-VariableFont_ROND,wght.ttf") format("truetype");
    font-weight: 100 900;
}

@font-face {
    font-family: Shack;
    src: url("../fonts/Crystal Radio Kit.otf");
}

::selection {
    background: var(--stripe-3);
    color: var(--paper);
}

body {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(rgba(42, 31, 20, 0.07) 1px, transparent 1px);
    background-size: 6px 6px;
}

#hero {
    padding: calc(var(--gutter) / 2) var(--gutter);
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "name crt"
        "details crt";
    align-items: start;
    gap: calc(var(--gutter) / 2) var(--gutter);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.nameplate {
    grid-area: name;
}

#hero h1 {
    font-family: Shack, sans-serif;
    font-weight: bold;
    font-size: var(--hero-size);
    line-height: 0.85;
    letter-spacing: -0.01em;
}

.role {
    margin-top: var(--space-inner);
    font-size: 1.75rem;
    font-style: italic;
    line-height: 1.2;
}

.hero-details {
    grid-area: details;
    display: grid;
    gap: var(--space-group);
    max-width: 40rem;
}

#hero::after {
    content: "";
    position: absolute;
    top: calc(var(--gutter) / 2 + 0.85 * var(--hero-size));
    left: 0;
    width: 100%;
    height: 150px;
    transform: translateY(-50%);
    background: linear-gradient(var(--stripe-1) 0 50px, var(--stripe-2) 50px 100px, var(--stripe-3) 100px 150px);
    z-index: -1;
}

.crt {
    --screen-left: 11.4%;
    --screen-top: 7.9%;
    --screen-width: 45.8%;
    --screen-height: 36.3%;
    grid-area: crt;
    position: relative;
    width: 100%;
    max-width: 900px;
    justify-self: end;
    filter: drop-shadow(8px 8px 1px rgba(0, 0, 0, 20%));
}

@media (max-width: 1000px) {
    #hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: "name" "crt" "details";
    }
    .crt {
        --crt-width: min(140%, 900px);
        --computer-center: 0.365;
        justify-self: start;
        width: var(--crt-width);
        margin-left: calc(50% - var(--computer-center) * var(--crt-width));
    }
}

.crt-screen {
    position: absolute;
    left: var(--screen-left);
    top: var(--screen-top);
    width: var(--screen-width);
    height: var(--screen-height);
    background: radial-gradient(#0c1a0c, #020502);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.crt-canvas,
.crt-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.crt-text {
    padding: 24px;
    box-sizing: border-box;
    opacity: 0;
    color: var(--phosphor);
    background: transparent;
    border: 0;
    outline: 0;
    resize: none;
    font: 600 18px/25px Doto, monospace;
    white-space: pre-wrap;
    overflow: hidden;
}

.crt-body {
    display: block;
    width: 100%;
    position: relative;
    pointer-events: none;
}

.crt-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mask: url("../img/apple_iie.png") 0 0 / 100% 100%;
    mix-blend-mode: screen;
    opacity: 0.3;
    pointer-events: none;
}

.issue {
    max-width: max(60vw, 40rem);
    margin-inline: auto;
    padding: calc(var(--gutter) / 2) var(--gutter) var(--gutter);
}

a {
    color: inherit;
    text-decoration-color: var(--stripe-3);
    text-decoration-thickness: 2px;
}

kbd,
h3,
.catalog-number {
    font-family: Doto, monospace;
    font-weight: bold;
}

.headline {
    margin-bottom: var(--space-inner);
    font-family: Shack, sans-serif;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: 0.9;
}

.deck {
    max-width: 36em;
    margin-bottom: var(--space-group);
    font-size: 1.35rem;
    font-style: italic;
}

.columns {
    columns: 3 18rem;
    column-gap: var(--space-group);
    padding-top: var(--space-inner);
    border-top: 4px double var(--ink);
    text-align: justify;
    hyphens: auto;
}

.columns p + p {
    text-indent: 1.5em;
}

.columns p:first-child::first-letter {
    float: left;
    margin: var(--space-tight) var(--space-inner) 0 0;
    font-family: Shack, sans-serif;
    font-size: 4.5em;
    line-height: 0.75;
}

.specs h3 {
    padding: var(--space-tight) var(--space-inner);
    border-radius: 2px 2px 0 0;
    background: var(--ink);
    color: var(--paper);
}

.specs dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-tight) var(--space-inner);
    padding: var(--space-inner);
    line-height: 1.3;
}

.specs dt {
    font-weight: bold;
}

.chess {
    position: relative;
}

.chess::after {
    content: attr(data-note);
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--space-tight));
    width: max-content;
    padding: var(--space-tight) var(--space-inner);
    background: var(--ink);
    color: var(--paper);
    font: bold 0.8rem Doto, monospace;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.chess:hover::after,
.chess:focus-visible::after {
    opacity: 1;
}

.catalog-number {
    padding: var(--space-tight) var(--space-inner);
    border-top: 1px solid var(--ink);
    font-size: 0.8rem;
}

.coupon {
    padding: var(--space-inner);
    border: 2px dashed var(--ink);
    text-align: center;
}

.coupon h3 {
    margin-bottom: var(--space-tight);
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hero-deco-load-in {
    from { width: 0; left: 50%; }
    to   { width: 100%; left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    #hero h1 { animation: fade-in 2s ease-out; }
    #hero::after { animation: hero-deco-load-in 2s ease-out; }
}