:root {
  color-scheme: light;
  background: #faf7ef;
  color: #252b28;
  font: 1rem/1.65 system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #14533f; text-underline-offset: .19em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #14533f; outline-offset: 4px; }
.wrap { width: min(71rem, calc(100% - 2.5rem)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: 1rem; padding: .55rem 1rem; background: white; transform: translateY(-200%); }
.skip:focus { transform: none; z-index: 1; }
header { display: flex; padding-block: 1.3rem; border-bottom: 1px solid #e2ded3; }
.brand { display: inline-flex; gap: .6rem; align-items: center; min-height: 2.75rem; color: #252b28; font-weight: 700; text-decoration: none; }
.brand span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .75rem; color: #fff9dc; background: #254c3b; }
main { padding-block: 1.8rem 3rem; }
.hero { margin-block: 1rem 2rem; }
.hero h1, .article h1 { max-width: 20ch; font-family: Georgia, serif; font-size: clamp(2.2rem, 5.5vw, 4.4rem); font-weight: 500; line-height: 1.09; margin: .2em 0; overflow-wrap: break-word; }
.hero p { max-width: 56ch; }
.eyebrow, .kicker { font-size: .85rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #3f5d4e; }
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem; }
.card { display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid #dfddd1; background: #fffdf7; border-radius: 1rem; }
.game-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .8rem; font-size: 1.42rem; color: #fff9dc; }
.jade { background: #2d5849; }
.plum { background: #604761; }
.amber { background: #694812; }
.card h2 { margin: .85rem 0 .3rem; font-size: 1.18rem; }
.card p { margin: 0 0 .9rem; }
.card-links { display: flex; gap: 1.15rem; margin-top: auto; }
.card-links a, .game-nav a, footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.game-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: 1rem; }
.game-nav [aria-current] { color: #252b28; font-weight: 700; text-decoration: none; }
.article { max-width: 68ch; overflow-wrap: anywhere; }
.article h2 { margin-top: 1.6rem; font-size: 1.2rem; line-height: 1.35; }
.article details { padding-block: .65rem; border-bottom: 1px solid #e2ded3; }
.article summary { cursor: pointer; font-weight: 650; }
.article details p { margin: .5rem 0; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .1rem 1rem; padding-block: .6rem; border-top: 1px solid #e2ded3; }