/* Shared public-site shell. Game and account pages do not load this stylesheet. */
:root {
  --ink: #283c24;
  --forest: #285224;
  --paper: #fffef0;
  --line: #cad6b3;
  --footer: #25482d;
  --content-width: 1060px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.75 Arial, sans-serif; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; }
h1 { font-size: clamp(32px, 4vw, 48px); }
h2 { font-size: clamp(27px, 3vw, 36px); margin-bottom: 20px; }
h3 { font-size: 23px; margin-bottom: 10px; }
p { text-wrap: pretty; }
a { color: var(--forest); text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #1267a2; outline-offset: 5px; }
.content-width { width: min(var(--content-width), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; right: 20px; z-index: 20; padding: 12px; background: white; color: var(--ink); }
.skip-link:focus { top: 12px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1240px, 100%); margin-inline: auto; padding: 16px 32px; }
.brand { flex-shrink: 0; display: block; line-height: 0; }
.brand img { display: block; width: 238px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; font-size: 16px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding-block: 18px; font-size: 19px; font-weight: 700; }
details p { margin: 0 0 20px; max-width: 75ch; }
.site-footer { margin: 0; padding: 32px 24px; background: var(--footer); color: var(--paper); text-align: center; font-size: 15px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); }
.site-footer a:focus-visible { outline-color: #fff; }
.site-footer .social-links { gap: 12px; align-items: center; max-width: var(--content-width); margin: 24px auto 16px; padding-bottom: 24px; border-bottom: 1px solid #59745a; }
.social-links a { justify-content: center; width: 48px; height: 48px; background: white; border-radius: 50%; }
.social-links a:hover { background: #e2ebd5; }
.social-links img { display: block; width: 24px; height: 24px; }
.social-links .social-blog { width: auto; padding-inline: 18px; border-radius: 5px; color: var(--forest); font-weight: 700; }
@media (max-width: 900px) {
  .site-header { flex-direction: column; gap: 12px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .content-width { width: calc(100% - 40px); }
  .site-header { padding: 16px 20px 12px; gap: 8px; }
  .brand img { width: 210px; }
  .site-nav { gap: 0 16px; font-size: 15px; }
  .site-footer { padding-inline: 20px; }
}

.search-guides { padding-block: 32px; border-top: 1px solid var(--line); }
.search-guides p { margin-block: 16px; }