@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap");
/* Long Shot Studios — Aether composition */
:root {
  color-scheme: light;
  --color-bg: #f5f1e8;
  --color-bg-deep: #ece4d7;
  --color-surface-glass: rgba(255, 251, 243, .55);
  --color-surface-glass-strong: rgba(255, 251, 243, .75);
  --color-surface-glass-soft: rgba(255, 251, 243, .35);
  --color-surface-raised: rgba(255, 252, 246, .85);
  --color-ink: #292322;
  --color-ink-secondary: #665650;
  --color-ink-tertiary: #827069;
  --color-ink-inverse: #fff8ee;
  --color-accent: #c9212c;
  --color-accent-soft: rgba(201, 33, 44, .10);
  --color-accent-ring: rgba(201, 33, 44, .30);
  --color-aurora-a: #eddbca;
  --color-aurora-b: #f0d6d1;
  --color-hairline: rgba(92, 48, 34, .10);
  --color-hairline-strong: rgba(92, 48, 34, .17);
  --color-bevel-light: rgba(255, 253, 246, .95);
  --color-bevel-soft: rgba(255, 250, 237, .65);
}
html { scroll-behavior: smooth; }
body { min-height: 100vh; font-size: 1rem; background-image: radial-gradient(900px 540px at 12% -10%, var(--color-aurora-a) 0%, transparent 60%), radial-gradient(720px 480px at 95% 10%, var(--color-aurora-b) 0%, transparent 60%), radial-gradient(640px 420px at 55% 110%, #eee0cd 0%, transparent 60%); }
.btn-solid { background: var(--color-accent); border-color: rgba(145, 17, 29, .4); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(99,10,18,.2), 0 10px 24px -8px rgba(163,28,38,.30); }
.btn-solid:hover { background: #b11c26; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-full); }
.wrap { max-width: 1200px; margin: auto; padding: 32px clamp(20px, 4vw, 48px) 0; }
.studio-header { width: 100%; display: flex; justify-content: space-between; padding: 12px 14px 12px 20px; margin-bottom: 48px; box-shadow: var(--glass-bevel-inset), var(--glass-shadow-resting); }
.brand { display: flex; align-items: center; gap: 12px; padding: 2px; }
.studio-logo { display: block; width: 118px; height: auto; }
footer { align-items: center; }
footer .btn { font-size: 13px; }
.mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-ink); color: var(--color-ink-inverse); font-size: 25px; font-weight: 500; box-shadow: 0 4px 10px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.18); }
.wordmark { font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -.012em; }
nav .btn { font-size: 14px; padding: 0 22px; }
.intro { padding: clamp(32px, 6vw, 72px); border-radius: var(--radius-2xl); margin-bottom: 48px; }
.intro > * { position: relative; z-index: 1; }
.eyebrow { height: auto; min-height: 28px; padding: 5px 12px; font-size: 12px; letter-spacing: .06em; }
h1 { font-size: clamp(2.7rem, 5.8vw, 4.5rem); font-weight: 600; line-height: 1.16; letter-spacing: -.022em; margin: 24px 0; }
h1 span { color: var(--color-accent); }
.intro p { color: var(--color-ink-secondary); font-size: 18px; line-height: 1.6; margin: 0; }
#work { scroll-margin-top: 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 8px 24px; }
h2 { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -.012em; margin: 0; }
.section-heading span { font-size: 14px; color: var(--color-ink-secondary); }
.grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.studio-card { gap: 0; padding: 24px; }
.preview { height: 240px; display: grid; place-items: center; border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); background: var(--color-surface-glass-soft); box-shadow: var(--glass-bevel-inset); }
.app-icon { width: 100px; height: 100px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-surface-raised); border: 1px solid var(--color-hairline); color: var(--color-ink); font-size: 40px; font-weight: 500; box-shadow: var(--glass-bevel-inset), var(--glass-shadow-raised); }
.game .app-icon { background: var(--color-accent); color: var(--color-ink-inverse); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--glass-shadow-raised); }
.card-info { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 24px 0 12px; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.012em; margin: 0; }
.category { font-size: 12px; flex: none; }
.studio-card p { font-size: 16px; line-height: 1.6; color: var(--color-ink-secondary); margin: 0; max-width: 370px; }
.note { margin: 24px 8px 0; font-size: 14px; color: var(--color-ink-secondary); }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px; margin-top: 48px; }
.about p { font-size: 17px; line-height: 1.6; color: var(--color-ink-secondary); margin: 0; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 32px 8px; font-size: 12px; color: var(--color-ink-secondary); }
@media(max-width:650px) {
  .wrap { padding-top: 20px; }
  .studio-header { margin-bottom: 28px; padding-left: 14px; }
  .mark { width: 36px; height: 36px; font-size: 22px; }
  .wordmark { font-size: 12px; }
  nav .btn { height: 40px; padding: 0 16px; }
  .intro { padding: 32px 24px; margin-bottom: 32px; }
  .intro p { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .studio-card { padding: 20px; }
  .preview { height: 220px; }
  .about { grid-template-columns: 1fr; padding: 24px; margin-top: 32px; }
  footer { flex-direction: column; gap: 8px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }

/* Red studio hero */
.intro.hero { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 620px; padding: 64px 56px 112px; background: #c9212c; color: #fff5e5; overflow: hidden; border: 1px solid rgba(146,17,28,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 22px 44px -14px rgba(107,29,31,.25); }
.hero .eyebrow { background: rgba(255,245,229,.10); border-color: rgba(255,245,229,.25); color: #fff5e5; box-shadow: none; }
.hero h1 { font-size: clamp(2.7rem, 4.7vw, 4rem); line-height: 1.08; margin: 28px 0; }
.hero p { color: #fff0db; font-size: 17px; }
.hero-art { width: 100%; height: 420px; min-width: 0; }
.hero-art canvas { display: block; width: 100%; height: 100%; }
.target-fallback { width: 75%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); margin: auto; display: block; }
.scene-ready .target-fallback { display: none; }
.hero .hero-scroll { position: absolute; z-index: 1; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; gap: 8px; color: #fff5e5; font-size: 14px; white-space: nowrap; padding: 8px 18px; border-radius: 24px; }
.hero-scroll span { font-size: 22px; line-height: 1; }
.hero-scroll:hover { background: rgba(255,245,229,.10); }
@media(max-width:750px) { .intro.hero { grid-template-columns: 1fr; padding: 36px 28px 94px; min-height: auto; } .hero-art { height: 310px; } .hero h1 { font-size: clamp(2.5rem, 8vw, 3.6rem); } .hero p { font-size: 16px; } }

/* Reference layout: integrated hero navigation and curved work transition. */
.wrap { max-width: 1440px; padding: 0; }
.intro.hero { border-radius: 0 0 32px 32px; border: 0; box-shadow: none; min-height: 660px; padding: 128px max(6%, 28px) 130px; margin-bottom: 0; }
.hero-header { position: absolute; top: 0; left: 0; right: 0; width: 100%; margin: 0; padding: 16px 6%; background: transparent; border: 0; box-shadow: none; z-index: 3; }
.hero-header .brand { color: #fff5e5; }
.hero-header .studio-logo { width: 85px; filter: brightness(0) invert(1); }
.hero-header nav { display: flex; gap: 28px; font-size: 14px; color: #fff5e5; }
.hero-header nav a { padding: 10px 0; }
.hero-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero .eyebrow { display: none; }
.hero .hero-cta { background: #fff3dd; color: #99202a; border-color: rgba(255,255,255,.3); margin-top: 28px; padding: 0 24px; font-weight: 600; }
.hero-art { height: 390px; }
.hero .hero-scroll { bottom: 80px; }
.hero .hero-wave { position: absolute; z-index: 0; bottom: -1px; left: 0; width: 100%; height: 75px; }
#work { background: #f5f1e8; padding: 24px 6% 48px; }
.section-heading { flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 32px; }
.section-heading h2 { font-size: clamp(28px, 3vw, 38px); color: #a8212c; }
.about { margin: 0 6% 32px; }
footer { margin: 0 6%; }
@media(max-width:750px) { .intro.hero { padding: 116px 28px 112px; } .hero-header { padding: 14px 28px; } .hero-art { height: 300px; } .hero .hero-scroll { bottom: 76px; } .hero-wave { height: 48px; } #work { padding-top: 16px; } }

.hero-header .horizontal-logo { display: block; width: 225px; height: auto; filter: brightness(0) invert(1); }
@media(max-width:600px) { .hero-header .horizontal-logo { width: 168px; } .hero-header nav { gap: 16px; font-size: 13px; } .hero-header { padding-left: 24px; padding-right: 24px; } }

/* Warm studio lighting across the red backdrop. */
.intro.hero { background: radial-gradient(ellipse at 72% 24%, rgba(255,112,84,.55), transparent 48%), radial-gradient(ellipse at 48% 100%, rgba(247,69,48,.72), transparent 56%), linear-gradient(120deg,#b41827 0%,#d82430 52%,#b81525 100%); }
.hero-art { filter: drop-shadow(0 18px 25px rgba(100,7,20,.12)); }
.hero h1 { text-shadow: 0 2px 12px rgba(103,15,23,.1); }
.hero .hero-cta { box-shadow: inset 0 2px 0 rgba(255,255,255,.85), 0 12px 24px -8px rgba(102,9,20,.42); }
@media(max-width:750px) { .intro.hero { padding-bottom: 140px; } }

.hero-art { height: 480px; }
@media(max-width:750px) { .hero-art { height: 370px; } }

.game-list { display: grid; gap: 40px; }
.game-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; padding: 48px; }
.game-row:nth-child(even) { grid-template-columns: 1.2fr .8fr; }
.game-row:nth-child(even) .game-visual { order: 2; }
.game-visual { display: grid; place-items: center; padding: 24px; }
.game-visual img { width: min(100%,240px); height: auto; border-radius: 26%; box-shadow: 0 22px 36px -18px rgba(73,38,25,.35); }
.game-summary h3 { font-size: 36px; margin: 16px 0; }
.game-summary p { font-size: 17px; line-height: 1.75; color: var(--color-ink-secondary); max-width: 540px; }
.game-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.game-actions .btn { font-size: 14px; }
.document-wrap { max-width: 900px; margin: auto; padding: 36px 24px 64px; }
.document-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.document-card { padding: clamp(24px,5vw,48px); }
.document-card h1 { font-size: clamp(32px,5vw,48px); }
.document-card h2 { margin-top: 30px; }
.document-card p,.document-card li { font-size: 16px; line-height: 1.8; }
.document-card a:not(.btn) { color: #a8212c; text-decoration: underline; }
.document-card .contents,.document-card .legal-topics { display: flex; flex-wrap: wrap; gap: 12px; }
.image-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.image-gallery figure { margin: 0; }
.image-gallery img { display: block; width: 100%; height: auto; border-radius: 20px; }
.image-gallery figcaption { font-size: 14px; padding: 12px 0; color: var(--color-ink-secondary); }
@media(max-width:750px) { .game-row,.game-row:nth-child(even) { grid-template-columns: 1fr; gap: 12px; padding: 28px; } .game-row:nth-child(even) .game-visual { order: 0; } .game-visual img { width: 180px; } .game-summary h3 { font-size: 30px; } .image-gallery { grid-template-columns: 1fr; } }

.studio-about { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; margin: 0; padding: 80px 8% 96px; background: #f5f1e8; scroll-margin-top: 24px; }
.about-lead h2 { font-size: clamp(36px,4.5vw,58px); line-height: 1.12; letter-spacing: -.03em; margin: 24px 0; font-weight: 600; }
.about-lead h2 em { color: #b51e2c; font-style: normal; }
.about-lead p { font-size: 18px; line-height: 1.8; color: var(--color-ink-secondary); max-width: 490px; }
.about-details { padding-top: 12px; }
.about-details > div { position: relative; border-top: 1px solid var(--color-hairline-strong); padding: 24px 0 24px 44px; }
.about-number { position: absolute; left: 0; top: 28px; color: #b51e2c; font-size: 13px; font-family: var(--font-mono); }
.about-details h3 { font-size: 20px; }
.about-details p { font-size: 16px; line-height: 1.75; color: var(--color-ink-secondary); }
.studio-footer { display: block; margin: 0; padding: 56px 6% 24px; color: #fff1df; background: #a91d2a; }
.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; }
.footer-brand img { display: block; width: min(250px,100%); height: auto; filter: brightness(0) invert(1); }
.footer-brand p { font-size: 15px; margin-top: 20px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-links h3 { font-size: 16px; margin: 10px 0 10px; }
.footer-links a,.footer-links button { font-size: 14px; color: #ffebda; line-height: 1.5; }
.footer-links button { font-family: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.footer-links a:hover,.footer-links button:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-links button:focus-visible { outline: 2px solid #fff1df; outline-offset: 5px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid rgba(255,241,223,.22); padding-top: 24px; font-size: 12px; }
@media(max-width:750px) { .studio-about { grid-template-columns: 1fr; gap: 24px; padding: 48px 7% 56px; } .footer-main { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .footer-brand { grid-column: 1/-1; } .footer-brand img { width: 220px; } .studio-footer { padding: 36px 7% 24px; } }

.footer-brand img { width: min(220px,100%); }
.footer-brand p { max-width: 260px; line-height: 1.6; }

/* Clean, continuous hero-to-work transition. */
.intro.hero { border-radius: 0; padding-bottom: 156px; }
.hero .hero-wave { height: 88px; bottom: -2px; width: calc(100% + 4px); left: -2px; pointer-events: none; }
.hero .hero-scroll { bottom: 106px; gap: 10px; font-size: 13px; letter-spacing: .025em; opacity: .9; }
.hero-scroll span { font-size: 24px; }
#work { padding-top: 48px; }
@media(max-width:750px) { .intro.hero { padding-bottom: 158px; } .hero .hero-wave { height: 58px; } .hero .hero-scroll { bottom: 82px; } #work { padding-top: 32px; } }

.hero .hero-scroll { bottom: 74px; }
.hero-game-strip { display: flex; align-items: center; justify-content: center; gap: 56px; padding: 28px 6% 32px; background: #f5f1e8; border-bottom: 1px solid var(--color-hairline); }
.strip-label { font-size: 15px; line-height: 1.5; color: var(--color-ink-secondary); }
.hero-game-strip a { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 16px; }
.hero-game-strip a:hover { background: rgba(255,255,255,.55); }
.hero-game-strip img { border-radius: 12px; box-shadow: 0 6px 14px -6px rgba(73,38,25,.25); }
.hero-game-strip a span { font-size: 16px; font-weight: 600; }
.hero-game-strip small { display: block; font-size: 13px; font-weight: 400; color: var(--color-ink-secondary); margin-top: 3px; }
#bombsy,#wordsurge { scroll-margin-top: 24px; }
/* Center the stacked mobile presentation. */
@media(max-width:750px) {
  .hero-copy, .about-lead, .about-details, .game-summary { text-align: center; }
  .hero-copy p, .about-lead p, .game-summary p { margin-left: auto; margin-right: auto; }
  .game-actions { justify-content: center; }
  .about-details > div { padding-left: 0; }
  .about-number { position: static; display: block; margin-bottom: 12px; }
  .footer-brand { display: grid; place-items: center; }
  .footer-links { align-items: center; text-align: center; }
  .footer-links button { text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
}
@media(max-width:750px) { .hero .hero-scroll { bottom: 58px; } .hero-game-strip { gap: 20px; flex-wrap: wrap; padding: 24px; } .strip-label { width: 100%; text-align: center; } .strip-label br { display: none; } .hero-game-strip a { gap: 10px; } .hero-game-strip small { font-size: 12px; } }

/* Keep the complete game strip visible beneath a straight hero edge. */
@media(min-width:751px) {
  .intro.hero { min-height: 560px; height: calc(100svh - 104px); padding-top: 112px; padding-bottom: 100px; }
  .hero-art { height: min(480px, calc(100svh - 316px)); }
  .hero .hero-scroll { bottom: 20px; }
  .hero-game-strip { min-height: 104px; padding: 20px 6%; }
}
@media(max-width:750px) {
  .intro.hero { padding-bottom: 120px; }
  .hero .hero-scroll { bottom: 28px; }
  .hero-game-strip { gap: 12px 24px; padding: 20px 16px; }
}

/* A balanced header that follows the page. */
.hero-header {
  position: fixed; left: 50%; right: auto; transform: translateX(-50%);
  width: 100%; max-width: 1440px; height: 96px; padding: 12px 6%;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; z-index: 50; transition: background .2s, box-shadow .2s;
}
.hero-header .brand { display: flex; align-items: center; }
.hero-header .horizontal-logo { width: 200px; }
.hero-header nav { align-items: center; }
.hero-header.is-scrolled { background: rgba(169,29,42,.96); box-shadow: 0 4px 18px rgba(83,14,23,.15); backdrop-filter: blur(12px); }
#about, #work, #bombsy, #wordsurge { scroll-margin-top: 112px; }
@media(max-width:750px) {
  .hero-header { height: 84px; padding: 12px 24px; }
  .hero-header .horizontal-logo { width: 154px; }
  .hero-header nav { gap: 18px; font-size: 13px; }
  #about, #work, #bombsy, #wordsurge { scroll-margin-top: 100px; }
}
@media(max-width:380px) {
  .hero-header { padding-left: 16px; padding-right: 16px; }
  .hero-header .horizontal-logo { width: 138px; }
  .hero-header nav { gap: 12px; }
}

/* Shared navigation for game documents. */
.document-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; display: grid; grid-template-columns: 180px 1fr 180px; align-items: center; gap: 20px; padding: 16px 5%; background: rgba(169,29,42,.97); box-shadow: 0 4px 18px rgba(83,14,23,.15); }
.document-brand img { display: block; width: 160px; height: auto; filter: brightness(0) invert(1); }
.document-header .document-nav { justify-content: center; align-items: center; flex-wrap: nowrap; margin: 0; }
.document-header .btn { white-space: nowrap; font-size: 13px; padding: 0 18px; }
.document-header [aria-current="page"] { background: #fff3dd; color: #a91d2a; box-shadow: inset 0 0 0 2px rgba(169,29,42,.2); }
.document-wrap { padding-top: 132px; }
.document-card section { scroll-margin-top: 120px; }
.document-toggle { display: none; }
@media(max-width:1000px) {
  .document-header { grid-template-columns: 1fr auto; padding: 12px 24px; min-height: 80px; }
  .document-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid rgba(255,243,221,.4); border-radius: 12px; background: transparent; cursor: pointer; }
  .document-toggle span { height: 2px; width: 100%; background: #fff3dd; }
  .document-header .document-nav { display: none; grid-column: 1/-1; flex-direction: column; padding: 12px 0; }
  .document-header.menu-open .document-nav { display: flex; }
  .document-header .document-nav .btn { min-width: 200px; }
  .document-wrap { padding-top: 112px; }
}

.document-page {
  min-height: 100vh;
  background: #f5f1e8;
  background-attachment: fixed;
}
.document-page .document-card {
  background: #fff8ec;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 48px rgba(107,29,42,.16);
}

.about-cta { max-width: 490px; text-align: center; margin-top: 28px; }
@media(max-width:750px) { .about-cta { margin-left: auto; margin-right: auto; } }

.game-strip-track, .game-strip-group { display: flex; align-items: center; gap: 56px; }
.strip-copy { display: none; }
@media(max-width:750px) {
  .intro.hero { height: calc(100svh - 100px); min-height: 520px; padding: 88px 24px 66px; grid-template-rows: auto minmax(0,1fr); gap: 12px; }
  .hero h1 { font-size: clamp(30px, 7.6vw, 48px); margin: 12px 0 18px; }
  .hero p { font-size: 14px; line-height: 1.5; margin: 0 auto; }
  .hero .hero-cta { margin-top: 18px; min-height: 42px; }
  .hero-art { height: 100%; min-height: 0; }
  .hero .hero-scroll { bottom: 10px; font-size: 12px; gap: 6px; }
  .hero-game-strip { display: block; height: 100px; padding: 18px 0; overflow: hidden; }
  .game-strip-track { width: max-content; gap: 0; animation: game-strip-loop 18s linear infinite; }
  .game-strip-group { flex-shrink: 0; gap: 28px; padding-right: 28px; }
  .strip-copy { display: flex; }
  .hero-game-strip a { flex-shrink: 0; padding: 8px; }
  .hero-game-strip a span { font-size: 15px; }
  .hero-game-strip:hover .game-strip-track, .hero-game-strip:focus-within .game-strip-track { animation-play-state: paused; }
}
@keyframes game-strip-loop { to { transform: translateX(-50%); } }
@media(prefers-reduced-motion:reduce) {
  .game-strip-track { animation: none; }
  .hero-game-strip { overflow-x: auto; }
  .strip-copy { display: none; }
}


@media(max-width:750px) {
  .footer-main > .footer-links:nth-child(2) { grid-column: 1 / -1; }
  .footer-main > .footer-links:nth-child(3) { grid-column: 1; }
  .footer-main > .footer-links:nth-child(4) { grid-column: 2; }
}

.document-header .document-nav .btn {
  background: #fff9ed; color: #292420; border: 1px solid #ece4d9;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(68,24,24,.12);
}
.document-header .document-nav .btn:hover { background: #fffdf7; }
.document-header .document-nav [aria-current="page"] { color: #a91d2a; }
@media(max-width:1000px) {
  .document-toggle { border: 0; border-radius: 0; }
  .document-toggle span { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
  .menu-open .document-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .document-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .document-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .document-header .document-nav {
    display: flex; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    padding: 0; transform: translateY(-12px);
    transition: max-height .3s ease, opacity .25s ease, transform .3s ease, padding .3s ease, visibility .3s;
  }
  .document-header { row-gap: 0; background: #a91d2a; }
  .document-header.menu-open .document-nav {
    max-height: 250px; padding: 18px 0 12px; opacity: 1; visibility: visible; transform: translateY(0);
  }
}
@media(prefers-reduced-motion:reduce) {
  .document-header .document-nav, .document-toggle span { transition: none; }
}

.hero h1, .about-lead h2, .section-heading h2, .game-summary h3 {
  font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
  font-weight: 900; letter-spacing: -.035em;
}
.hero h1 { line-height: 1.06; }
.btn { font-family: 'Nunito', sans-serif; font-weight: 800; }

@media(max-width:750px) {
  .footer-brand > a { display: block; width: min(220px, 100%); justify-self: center; }
  .footer-brand img { width: 100%; margin: 0 auto; }
}

.document-card a[href^="mailto:"] { overflow-wrap: anywhere; }
@media(max-width:1000px) { .document-header.menu-open .document-nav { max-height: 330px; } }