.site-header, .home-main, .site-footer { max-width: 1120px; margin: auto; padding-inline: 40px; }
.site-header { min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 700; }
.site-nav a { text-decoration: none; padding-block: 12px; }
.site-nav a:hover { color: var(--orange); }
.source-link { border-bottom: 1px solid var(--ink); }
.hero { padding: 68px 0 64px; position: relative; }
.hero .eyebrow { color: var(--orange); margin: 0 0 22px; display: flex; gap: 8px; align-items: center; }
.hero .eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }
.hero h1 { font-size: clamp(52px, 7.7vw, 88px); font-weight: 700; line-height: 1.03; letter-spacing: -5px; margin: 0 0 25px; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-copy { color: var(--muted); font-size: 17px; line-height: 1.75; margin: 0; }
.hero-promise { margin-top: 16px; font-size: 13px; font-weight: 700; }
.play-seal { position: absolute; right: 34px; top: 95px; width: 148px; height: 148px; border: 1px solid #c5c7b8; border-radius: 50%; transform: rotate(12deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; color: #5c6850; }
.play-seal span { font: 700 10px 'Courier New', monospace; letter-spacing: 2px; text-transform: uppercase; }
.play-seal svg { width: 46px; height: 46px; }
.collection-heading { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 22px 0; }
.collection-heading h2 { font-size: 12px; font-weight: 700; margin: 0; letter-spacing: 1.5px; text-transform: uppercase; }
.collection-heading p { margin: 0; color: var(--muted); font: 11px 'Courier New', monospace; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.game-card { text-decoration: none; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; transition: border-color .15s, transform .15s; background: #fffdf7; }
.game-card:hover { border-color: #8f9786; transform: translateY(-3px); }
.game-card:hover .play-arrow { background: var(--ink); color: var(--paper); }
.game-preview { height: 240px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.game-preview svg { width: 100%; height: 100%; }
.preview-labyrinth { background: #e6eadc; }
.preview-snake { background: #e0e9dd; }
.preview-memory { background: #eae0ed; }
.preview-mole { background: #efe1c9; }
.preview-flap { background: #dde8ec; }
.preview-blocks { background: #e4e3ee; }
.game-number { position: absolute; top: 18px; left: 20px; color: #464b4090; font: 11px 'Courier New', monospace; }
.card-info { padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-info h3 { margin: 0 0 7px; font-size: 23px; letter-spacing: -.7px; }
.card-info p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.play-arrow { border: 1px solid var(--line); border-radius: 50%; width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; font-size: 21px; transition: background .15s; }
.about { margin-top: 72px; padding: 42px 0 48px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; }
.about h2 { font-size: 30px; line-height: 1.2; letter-spacing: -1px; margin: 0; }
.about h2 span { color: var(--orange); }
.about p { font-size: 14px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; }
.about a { color: var(--ink); font-weight: 700; text-underline-offset: 4px; font-size: 13px; }
.site-footer { border-top: 1px solid var(--line); padding-block: 26px 32px; display: flex; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--muted); }
.site-footer p { margin: 0; }
.site-footer a { text-underline-offset: 3px; }
.source-main { max-width: 800px; padding-top: 50px; padding-bottom: 60px; }
.source-main h1 { font-size: clamp(36px, 6vw, 58px); margin: 0 0 20px; }
.source-main p { line-height: 1.8; color: var(--muted); }
.source-main h2 { margin-top: 36px; font-size: 22px; }
.source-main li { margin: 14px 0; }
.source-main a { text-underline-offset: 4px; }
@media (max-width: 760px) {
  .site-header, .home-main, .site-footer { padding-inline: 24px; }
  .hero { padding: 46px 0 44px; }
  .hero h1 { letter-spacing: -3px; }
  .play-seal { width: 108px; height: 108px; right: 0; top: 67px; }
  .play-seal span { font-size: 8px; letter-spacing: 1px; }
  .play-seal svg { width: 32px; height: 32px; }
  .game-preview { height: 195px; }
  .game-grid { gap: 20px; }
  .card-info { padding: 18px; }
  .card-info h3 { font-size: 21px; }
  .card-info p { font-size: 12px; }
  .about { gap: 30px; margin-top: 48px; }
}
@media (max-width: 540px) {
  .site-header { min-height: 80px; }
  .site-nav { gap: 18px; font-size: 12px; }
  .site-nav .about-link { display: none; }
  .hero { padding-top: 36px; }
  .hero h1 { font-size: 57px; }
  .hero-copy { font-size: 15px; max-width: 310px; }
  .hero-promise { font-size: 11px; }
  .play-seal { display: none; }
  .game-grid { grid-template-columns: 1fr; }
  .game-preview { height: 215px; }
  .collection-heading p { font-size: 10px; }
  .about { grid-template-columns: 1fr; gap: 20px; padding-block: 32px; }
  .site-footer { flex-direction: column; gap: 12px; }
}