:root {
    --bg:#f7f5ed;
    --ink:#123b2f;
    --gold:#e9bc64;
    --green:#0a392d;
    --muted:#61736a
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:16px/1.7 Arial,Helvetica,sans-serif
}

a {
    color:inherit
}

button,select {
    font:inherit
}

button,a {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

.topbar {
    background:#062c23;
    color:#e9d7aa;
    text-align:center;
    font-size:11px;
    letter-spacing:1.5px;
    padding:9px
}

.topbar span {
    margin-left:40px;
    letter-spacing:.4px
}

header {
    max-width:1380px;
    margin:auto;
    padding:23px 5%;
    display:flex;
    align-items:center;
    gap:38px;
    border-bottom:1px solid #d9dfd3
}

header nav {
    display:flex;
    gap:25px;
    margin-left:auto
}

nav a {
    text-decoration:none;
    font-size:13px;
    font-weight:bold
}

header img {
    object-fit:contain;
    width:178px;
    height:auto
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    padding:15px 23px;
    background:var(--green);
    color:#fff9e9;
    border:0;
    border-radius:4px;
    text-decoration:none;
    font-weight:bold;
    font-size:14px
}

.button:hover {
    background:#165640
}

.button.small {
    padding:11px 16px;
    white-space:nowrap
}

main {
    max-width:1380px;
    margin:auto;
    padding:0 5%
}

.hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    padding:58px 0 65px
}

.eyebrow {
    display:block;
    font-size:11px;
    font-weight:bold;
    letter-spacing:2px;
    color:#7a6843;
    margin-bottom:20px
}

h1,h2,h3,p {
    margin-top:0
}

h1 {
    font-family:Georgia,serif;
    font-weight:normal;
    font-size:clamp(44px,5.5vw,76px);
    line-height:1.08;
    letter-spacing:-2.5px;
    margin-bottom:25px
}

h2 {
    font-family:Georgia,serif;
    font-size:36px;
    font-weight:normal;
    line-height:1.2;
    letter-spacing:-1px
}

h3 {
    line-height:1.3
}

.hero p,.pagehero p {
    color:var(--muted);
    max-width:460px;
    font-size:17px
}

.actions {
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    margin:28px 0
}

.textlink {
    font-size:13px;
    font-weight:bold;
    text-underline-offset:6px
}

.hero-notes {
    display:flex;
    gap:20px;
    font-size:11px;
    margin-top:35px;
    color:#53695b
}

figure {
    margin:0;
    position:relative
}

figure img {
    width:100%;
    height:auto;
    border-radius:160px 160px 10px 10px;
    display:block
}

figcaption {
    font-size:9px;
    letter-spacing:1.3px;
    text-align:center;
    margin-top:13px;
    color:#607063
}

.sectionhead {
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin:25px 0
}

.sectionhead h2 {
    margin:0
}

.cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.gamecard {
    text-decoration:none;
    border:1px solid #d4dccd;
    background:#fffef9;
    border-radius:9px;
    overflow:hidden;
    transition:transform .2s
}

.gamecard:hover {
    transform:translateY(-5px)
}

.cardart {
    height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(ellipse at 50% 110%,#37705b,#073526 75%);
    color:#f8d58e;
    font:64px Georgia;
    text-shadow:0 4px 0 #9e752a;
    letter-spacing:5px
}

.c1 .cardart {
    background:radial-gradient(ellipse at 40% 100%,#9e5946,#401b24)
}

.c2 .cardart {
    background:radial-gradient(ellipse at 50% 100%,#8e6c38,#393025);
    font-size:110px
}

.c3 .cardart {
    background:radial-gradient(ellipse at 50% 100%,#536c80,#1b3048)
}

.cardbody {
    padding:23px
}

.cardbody small {
    font-size:9px;
    letter-spacing:1.4px;
    color:#7b795f
}

.cardbody h3 {
    font:25px Georgia;
    margin:9px 0
}

.cardbody p {
    font-size:12px;
    color:var(--muted);
    min-height:40px
}

.cardbody b {
    font-size:12px
}

.editorial {
    background:#e9eadd;
    margin:70px 0;
    padding:45px;
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:20px 65px;
    border-radius:8px
}

.editorial>span {
    grid-column:1/-1;
    font-size:10px;
    letter-spacing:2px
}

.editorial h2 {
    grid-row:2/4;
    margin:0
}

.editorial p {
    font-size:15px;
    color:#53695b;
    margin:0
}

.pagehero {
    max-width:900px;
    padding:65px 0 35px
}

.pagehero h1 {
    font-size:60px
}

.reading {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:70px;
    padding:55px 0;
    border-top:1px solid #d5dacd
}

.reading p {
    font-size:15px;
    color:#4b6056
}

.reading h3 {
    font-size:18px
}

.faq {
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:70px;
    padding:45px 0 65px
}

.faq h2 {
    max-width:330px
}

details {
    border-bottom:1px solid #d4d9cb;
    padding:17px 0
}

summary {
    cursor:pointer;
    font-weight:bold;
    font-size:14px
}

details p {
    margin:15px 0 0;
    color:#52675c;
    font-size:14px
}

.warning {
    background:#f0e5d0;
    border-left:4px solid #a57a33;
    padding:25px 30px;
    margin:0 0 60px
}

.warning strong {
    font-size:18px
}

.warning p {
    font-size:13px;
    margin:10px 0
}

.warning a {
    font-size:12px;
    font-weight:bold
}

footer {
    background:#082f25;
    color:#d9e1d1;
    padding:55px max(5%,calc((100vw - 1242px)/2)) 100px;
    display:grid;
    grid-template-columns:1.3fr 1fr 1.2fr 1fr;
    gap:30px
}

footer img {
    object-fit:contain
}

footer p,footer small {
    font-size:12px
}

footer h3 {
    font-size:13px;
    color:#e4c17d
}

footer a {
    display:block;
    text-decoration:none;
    font-size:11px;
    padding:3px 0;
    color:#bbccbe
}

.sessionbar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:12px 5%;
    background:#fffef5;
    border-top:1px solid #d0d8c9;
    display:flex;
    gap:25px;
    align-items:center;
    z-index:5;
    font-size:11px
}

.sessionbar span {
    margin-right:auto;
    color:#226144
}

.sessionbar button {
    border:0;
    background:none;
    color:#244f3e;
    font-size:11px;
    font-weight:bold
}

.playpanel {
    background:#0a392d;
    color:#fff4d7;
    padding:35px;
    border-radius:12px;
    margin:25px 0 55px;
    text-align:center
}

.playpanel .eyebrow {
    color:#dabd76
}

.playpanel .actions {
    justify-content:center
}

.playpanel button {
    background:#eaca83;
    color:#143b2e
}

.playpanel small {
    font-size:11px
}

.display {
    display:flex;
    justify-content:center;
    gap:15px;
    font-size:48px;
    min-height:95px;
    align-items:center
}

.display span,.memorycard {
    background:#fff8de;
    color:#173d2c;
    border-radius:9px;
    padding:10px 20px
}

.display.memory {
    display:grid;
    grid-template-columns:repeat(4,65px);
    font-size:26px
}

.memorycard {
    height:74px;
    border:0;
    font-size:25px;
    padding:0
}

.memorycard:disabled {
    opacity:.8
}

.playpanel select {
    padding:12px;
    margin:15px;
    border-radius:4px
}

.sitemap {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-bottom:45px
}

.sitemap a {
    padding:12px;
    border-bottom:1px solid #cbd7c8
}

dialog {
    border:1px solid #a9bda6;
    border-radius:12px;
    padding:35px;
    max-width:480px;
    background:#f7f5ed;
    color:#153c2d
}

dialog::backdrop {
    background:#03251dd9
}

.skip {
    position:absolute;
    top:-100px
}

.skip:focus {
    top:10px;
    z-index:10;
    background:white;
    padding:10px
}

:focus-visible {
    outline:3px solid #ce942e;
    outline-offset:4px
}

@media(max-width:1000px) {
    header {
        gap:20px
    }

    header nav {
        gap:14px
    }

    header nav a {
        font-size:11px
    }

    .hero {
        gap:30px
    }

    .hero-notes {
        gap:10px;
        flex-wrap:wrap
    }

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

    footer {
        grid-template-columns:repeat(2,1fr)
    }

}

@media(max-width:650px) {
    .topbar span {
        display:none
    }

    header {
        flex-wrap:wrap;
        padding:18px 5%;
        justify-content:space-between
    }

    header nav {
        order:3;
        overflow:auto;
        width:100%;
        gap:22px;
        padding:8px 0;
        margin:0;
        white-space:nowrap
    }

    header img {
        width:145px
    }

    header .small {
        font-size:11px
    }

    .hero {
        grid-template-columns:1fr;
        gap:35px;
        padding-top:35px
    }

    .hero h1 {
        font-size:53px
    }

    .hero figure {
        max-width:440px;
        justify-self:center
    }

    .hero p {
        font-size:15px
    }

    .hero-notes {
        font-size:10px
    }

    .hero .actions {
        gap:15px
    }

    .button {
        font-size:12px;
        padding:13px 17px
    }

    h2 {
        font-size:30px
    }

    .sectionhead {
        align-items:start;
        gap:15px
    }

    .sectionhead .textlink {
        font-size:11px;
        white-space:nowrap
    }

    .cards {
        gap:12px
    }

    .cardart {
        height:125px;
        font-size:45px
    }

    .cardbody {
        padding:15px
    }

    .cardbody h3 {
        font-size:22px
    }

    .editorial {
        padding:25px;
        grid-template-columns:1fr;
        gap:20px;
        margin:40px 0
    }

    .editorial h2 {
        grid-row:auto
    }

    .reading,.faq {
        grid-template-columns:1fr;
        gap:15px;
        padding:35px 0
    }

    .pagehero {
        padding-top:35px
    }

    .pagehero h1 {
        font-size:43px;
        letter-spacing:-1.5px
    }

    .playpanel {
        padding:22px 15px
    }

    .display {
        font-size:32px;
        gap:8px
    }

    .display span {
        padding:8px 14px
    }

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

    .warning {
        padding:20px
    }

    footer {
        gap:25px 20px;
        padding-bottom:105px
    }

    footer>div:first-child {
        grid-column:1/-1
    }

    .sessionbar {
        gap:13px;
        font-size:9px
    }

    .sessionbar button {
        font-size:10px
    }

    dialog {
        margin:auto 20px
    }

}

header .brand {
    background:#082f25;
    border-radius:5px;
    padding:8px 12px;
    display:flex;
    align-items:center
}