:root {
    --font-hand: "Comic Sans MS", "Trebuchet MS", cursive;
}

.page {
    width: 100%;
    max-width: 760px;
    padding: 0 16px var(--notebook-grid);
}

.hero {
    margin: 0 0 var(--notebook-grid);
    padding: 0 4px;
}

.hero h1 {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: var(--notebook-grid);
    text-transform: uppercase;
}

.hero p {
    position: relative;
    top: var(--page-text-baseline-shift);
    max-width: 34rem;
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: var(--notebook-grid);
}

.status-strip {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 100%;
    max-width: 428px;
    min-height: 64px;
    margin: 0 auto 20px;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 8px;
    border: 0;
    background: transparent;
    color: rgba(64, 43, 24, 0.82);
    font-family: var(--font-hand);
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-0.45deg);
    transform-origin: 52% 48%;
}

.status-strip span {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 0 5px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 0 rgba(255, 239, 203, 0.34),
        0 -1px 0 rgba(64, 43, 24, 0.24);
    white-space: nowrap;
}

.status-strip strong {
    display: block;
    color: rgba(46, 30, 15, 0.84);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-shadow:
        0 1px 0 rgba(255, 239, 203, 0.18),
        0 -1px 0 rgba(39, 24, 11, 0.46),
        1px 0 0 rgba(255, 239, 203, 0.1),
        -1px 0 0 rgba(39, 24, 11, 0.22);
}

.section-heading {
    margin: 0 0 8px;
}

.marker-title {
    position: relative;
    top: var(--page-text-baseline-shift);
    display: inline;
    margin: 0;
    padding: 0 4px;
    background:
        linear-gradient(177deg, transparent 0 15%, rgba(255, 238, 0, 0.7) 15% 86%, transparent 86% 100%),
        linear-gradient(2deg, transparent 0 24%, rgba(255, 238, 0, 0.5) 24% 94%, transparent 94% 100%),
        linear-gradient(90deg, rgba(255, 238, 0, 0.72), rgba(255, 238, 0, 0.82) 42%, rgba(255, 238, 0, 0.64));
    background-position: 0 4px, 0 5px, 0 4px;
    background-repeat: no-repeat;
    background-size: 100% 1.35em;
    border-radius: 3px 6px 4px 5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--ink);
    font-size: 17px;
    line-height: var(--notebook-grid);
    text-transform: uppercase;
}

.game-list {
    display: grid;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0 10px;
}

.game-card {
    position: relative;
    isolation: isolate;
    display: grid;
    height: 84px;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 0 12px 0 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    overflow: visible;
    transform: translateX(var(--game-card-x, 0)) rotate(var(--game-card-tilt, 0deg));
}

.game-card::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid rgba(82, 69, 49, 0.32);
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
        linear-gradient(0deg, rgba(82, 69, 49, 0.06) 1px, transparent 1px),
        #fbf4df;
    background-size: 17px 19px, 23px 29px, auto;
    clip-path: polygon(
        0 0,
        24px 0,
        24px 1px,
        27px 1px,
        27px 0,
        66px 0,
        66px 1px,
        69px 1px,
        69px 0,
        100% 0,
        100% 42px,
        calc(100% - 1px) 42px,
        calc(100% - 1px) 58px,
        100% 58px,
        100% 100%,
        calc(100% - 31px) 100%,
        calc(100% - 31px) calc(100% - 1px),
        calc(100% - 34px) calc(100% - 1px),
        calc(100% - 34px) 100%,
        0 100%,
        0 28px,
        1px 28px,
        1px 25px,
        0 25px
    );
    content: "";
    filter: url("#game-card-paper-grain");
    pointer-events: none;
}

.game-card::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 2px;
    background: #d9cebd;
    box-shadow:
        -1px 1px 0 rgba(82, 69, 49, 0.28),
        -3px 3px 0 #3a342d,
        -4px 4px 0 #8c806e,
        -5px 5px 0 #c8bca8,
        -6px 6px 0 #f0e8dc;
    content: "";
    pointer-events: none;
}

.game-card:hover,
.game-card:focus-visible {
    outline: none;
    transform: translateX(var(--game-card-x, 0)) rotate(calc(var(--game-card-tilt, 0deg) - 0.08deg)) translateY(-1px);
}

.game-card:nth-child(1) {
    --game-card-x: -1px;
    --game-card-tilt: -0.16deg;
}

.game-card:nth-child(2) {
    --game-card-x: 3px;
    --game-card-tilt: 0.12deg;
}

.game-card:nth-child(3) {
    --game-card-x: -2px;
    --game-card-tilt: -0.08deg;
}

.game-card:nth-child(4) {
    --game-card-x: 2px;
    --game-card-tilt: 0.14deg;
}

.game-card:nth-child(5) {
    --game-card-x: -1px;
    --game-card-tilt: -0.12deg;
}


.game-card-copy,
.game-card > .game-preview {
    position: relative;
    z-index: 2;
}

.game-card-copy {
    align-self: center;
}

.game-preview {
    display: grid;
    width: calc(var(--notebook-grid) * 3);
    height: calc(var(--notebook-grid) * 3);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    align-self: center;
    border: 2px solid rgba(37, 63, 143, 0.72);
    background: rgba(245, 238, 220, 0.88);
    box-shadow: -1px 1px 0 rgba(34, 45, 57, 0.2);
    overflow: hidden;
}

.game-preview-image {
    display: block;
    object-fit: cover;
}

.game-card h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-hand);
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
}

.game-card p {
    margin: 3px 0 0;
    color: var(--ink);
    font-family: var(--font-hand);
    font-size: 13px;
    line-height: 16px;
}

.play-line {
    display: inline-block;
    margin-top: 3px;
    color: var(--page-blue);
    font-family: var(--font-hand);
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase;
}

.content-block,
.faq-block,
.puzzle-types {
    margin: 0 0 var(--notebook-grid);
    padding: 0 4px;
}

.content-block p,
.feature-list p,
.puzzle-type,
.faq-item p {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: var(--notebook-grid);
}

.feature-list,
.puzzle-type-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.feature-list p::before,
.puzzle-type::before {
    color: var(--page-blue);
    content: "- ";
    font-weight: 700;
}

.puzzle-type a {
    font-weight: 700;
}

.faq-item {
    margin-bottom: var(--notebook-grid);
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item h3 {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: var(--notebook-grid);
}

@media (min-width: 760px) {
    .page {
        max-width: 920px;
    }

    .game-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .hero h1 {
        font-size: 20px;
        line-height: var(--notebook-grid);
    }

    .status-strip {
        font-size: 18px;
        min-height: 64px;
    }

    .status-strip strong {
        font-size: 10px;
    }

    .game-card {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 10px;
        height: 84px;
        padding: 0 8px 0 0;
    }

    .game-card h2 {
        font-size: 16px;
        line-height: 18px;
    }

    .game-card p {
        font-size: 12px;
        line-height: 15px;
    }

    .play-line {
        font-size: 12px;
        line-height: 15px;
    }
}