@font-face { font-family: "Nunito Sans"; src: url("fonts/nunito-sans.woff2?v=1") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/nunito-sans-bold-italic.woff2?v=1") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root { color-scheme: dark; --ink: #221e1e; --background: #130f0f; --gold: #e4c073; --parchment: #f0dfbb; --feature-gold: #d2b583; --display: "trajan-sans-pro", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--background); color: var(--parchment); font: 300 18px/1.5 "Nunito Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: #ffe4aa; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.parchment a:focus-visible { outline-color: var(--ink); }
button { font: inherit; }
strong { font-weight: 700; }
h1, h2, p { margin: 0; }
img { display: block; }
.page { position: relative; width: 100%; padding-bottom: 53px; overflow: clip; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 12px; background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 3; display: flex; align-items: center; gap: 26px; width: 77.5%; max-width: 1116px; min-height: 72px; margin-inline: auto; }
.site-header::before { content: ""; position: absolute; z-index: -1; inset: -61px -65px -16px; background: radial-gradient(ellipse closest-side, #252525 57%, #231d1200); mask: url("assets/header-mask.webp?v=1") center / 100% 100% no-repeat; pointer-events: none; }
.brand { flex: 0 0 178px; display: grid; justify-items: center; color: var(--gold); font: 600 16px/1 var(--display); text-shadow: 1px 1px #0004; }
.brand-eagle { width: 110px; height: 37px; margin-bottom: -12px; background: url("assets/eagle.webp?v=2") center / contain no-repeat; mask: url("assets/eagle-mask.svg?v=1") center / 120.222px 42.7908px no-repeat; }
.brand small { margin-top: 9px; color: #a38443; font-size: 10px; font-weight: 400; }
.primary-nav, .footer-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 32px; font: 600 14px/1.2 var(--display); color: var(--gold); }
.primary-nav a, .footer-nav a { padding-block: 14px; white-space: nowrap; text-shadow: 1px 1px #0004; }
.menu-toggle { display: none; }

.button { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; width: 367px; max-width: 100%; height: 58px; padding-inline: 24px; color: var(--gold); font: 600 20px/1 var(--display); white-space: nowrap; transition: filter 150ms ease, translate 150ms ease; }
.button::before { content: ""; position: absolute; z-index: -1; inset: -16px -24px -24px -16px; background: url("assets/button-dark.svg?v=3") center / 100% 100% no-repeat; pointer-events: none; }
.button:hover { color: var(--gold); filter: brightness(1.15); translate: 0 -1px; }
.arrow { flex: none; width: 10.4204px; height: 10.4204px; background: url("assets/arrow-gold.svg?v=1") center no-repeat; transform: rotate(-45deg) scaleY(-1); }
.button-gold { width: 420px; height: 71.4072px; padding: 0 44px 0 94px; color: #232323; font-weight: 700; text-shadow: 1px -.5px #ffe3b3; }
.button-gold::before { inset: 0; background-image: url("assets/button-gold.svg?v=3"); }
.button-gold .arrow { background-image: url("assets/arrow-dark.svg?v=1"); }
.button-gold:hover, .button-outline:hover { color: #232323; }
.gamefound-mark { position: absolute; width: 65px; height: 61px; left: 16px; top: 7px; background: url("assets/gamefound.webp?v=2") .49px center / 253px auto no-repeat; }
.button-small { width: 296px; height: 50.3505px; font-size: 14px; padding-inline: 66px 30px; gap: 8px; }
.button-small::before { background-image: url("assets/button-gold-small.svg?v=3"); }
.button-small .gamefound-mark { width: 46px; height: 43px; left: 11px; top: 5px; background-size: 178.55px auto; }
.button-small .arrow { width: 7.23221px; height: 7.23221px; background-image: url("assets/arrow-small.svg?v=1"); }
.button-outline { width: 277px; color: var(--ink); }
.button-outline::before { background-image: url("assets/button-outline.svg?v=2"); }
.button-outline .arrow { background-image: url("assets/arrow-ink.svg?v=1"); }
.campaign-note { color: #b6985d; font-size: 14px; line-height: 1.3; }

.hero { position: relative; isolation: isolate; min-height: 653px; margin-top: -72px; }
/* Absolute positioning is confined to decorative compositions. Content uses normal flow. */
.hero-scene { position: absolute; z-index: -2; width: 85.14%; aspect-ratio: 1226 / 1105; left: 8.68%; top: -143px; mask: url("assets/hero-mask.svg?v=2") center / 100% 100% no-repeat; pointer-events: none; }
.hero-landscape { position: absolute; width: 75.04%; aspect-ratio: 920 / 1516; left: 22.19%; top: -13.39%; background: url("assets/hero-landscape.webp?v=1") center / cover no-repeat; mask: url("assets/landscape-mask.svg?v=1") -17px 156px / 102.94% 72.89% no-repeat; }
.hero-glow { position: absolute; left: 40.5%; top: 12%; width: 74%; height: 23%; background: radial-gradient(ellipse closest-side, #ffe9df5c 20%, #cb7a1160 52%, #f20e0e00 72%); transform: rotate(-27.87deg); mix-blend-mode: plus-lighter; }
.hero-product { position: absolute; z-index: -1; width: 73.194%; max-width: 1054px; height: auto; left: calc(50% - 334px); top: 20px; pointer-events: none; }
.hero-inner { width: 74%; max-width: 1066px; margin-inline: auto; padding-top: 122px; }
.hero-copy { position: relative; width: 518px; max-width: 100%; }
.hero-copy::before { content: ""; position: absolute; z-index: -1; width: 658px; height: 539px; top: -118px; left: -95px; background: radial-gradient(ellipse closest-side, #252525 57%, #231d1200); pointer-events: none; }
.hero h1 { font: 600 48px/1 var(--display); text-shadow: 1px 1px #0004; }
.hero-tagline { margin-top: 3px; font-size: 18px; }
.hero-panel { width: 518px; max-width: calc(100% + 11px); min-height: 140px; margin: 14px 0 0 -11px; padding: 20px 21px 20px 30px; background: url("assets/hero-panel.webp?v=2") center / 100% 100% no-repeat; font-size: 20px; line-height: 1.5; }
.game-details { margin-top: 15px; }
.hero .button-gold { width: 438px; height: 78.7596px; margin: 8px 0 0 -20px; padding-left: 104px; }
.hero .button-gold::before { background-image: url("assets/button-campaign.svg?v=1"); }
.hero .gamefound-mark { top: 13px; }
.hero .campaign-note { margin-top: 3px; }

.features { position: relative; isolation: isolate; min-height: 170px; }
.features::before { content: ""; position: absolute; z-index: -1; inset: 10px -7% -66px; background: linear-gradient(transparent, var(--ink) 23.077%, var(--ink) 78.365%, transparent 97.115%); pointer-events: none; }
.feature-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; width: 73%; max-width: 1050px; margin: 0 auto; padding: 0; list-style: none; }
.feature-list li { position: relative; text-align: center; padding-inline: 18px; }
.feature-list li + li::before { content: ""; position: absolute; left: 0; top: 0; width: 122.857px; height: 2.85715px; background: url("assets/feature-divider.svg?v=1") center no-repeat; transform: rotate(90deg); transform-origin: 1.428575px center; }
.feature-list h2 { margin-top: 5px; color: var(--feature-gold); font: 600 18px/1.25 var(--display); }
.feature-list li:nth-child(2) h2 { max-width: 130px; margin-inline: auto; overflow-wrap: anywhere; }
.feature-list li:nth-child(3) h2 { padding-top: 11px; }
.medallion { position: relative; isolation: isolate; display: grid; place-items: center; width: 110px; height: 101px; margin-inline: auto; }
.medallion::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0 5px; background: url("assets/ring.webp?v=2") left top / 105px auto no-repeat; transform: scaleX(-1); }
.medallion::after { content: ""; position: absolute; z-index: 2; width: 102px; height: 75px; top: 20px; left: 0; background: url("assets/ring-stripe.webp?v=2") center / contain no-repeat; transform: rotate(1.43deg); pointer-events: none; }
.medallion > img { position: relative; }
.duel span { position: absolute; top: 25px; left: 43px; color: var(--feature-gold); font: 600 12px/1 var(--display); }
.duel .duel-left { position: absolute; left: 27px; top: 44px; }
.duel .duel-right { position: absolute; left: 55px; top: 43px; }
.deck i { position: absolute; width: 29.582px; height: 40.023px; border: solid #2d2c34; border-width: 4px 3px 3px; border-radius: 8px; background: var(--feature-gold); box-shadow: inset 0 1px #f4dbb0, 0 4px 4px #0004; }
.deck i:first-child { transform: translateX(-12px) rotate(-15deg); }
.deck i:last-child { transform: translateX(12px) rotate(15deg); }
.campaign > img:first-child { position: absolute; top: 26px; left: 25px; }
.campaign > img:last-child { position: absolute; top: 36px; left: 2px; }
.terrain > img { position: absolute; }
.terrain-top { left: 49px; top: 31px; }
.terrain-bottom { left: 49px; top: 49px; }
.terrain-left { left: 17px; top: 35px; }
.rearrange .terrain-left { transform: rotate(-90deg); left: 24px; top: 38px; }

.section-inner { position: relative; display: grid; grid-template-columns: 44% 56%; align-items: start; width: 72.5%; max-width: 1044px; margin-inline: auto; }
.section-copy { position: relative; z-index: 1; }
.eyebrow { font-size: 22px; line-height: 1.5; }
.eyebrow::after { content: ""; display: block; width: 277.143px; height: 5.71434px; max-width: 100%; margin-top: 9px; background: url("assets/separator-gold.svg?v=2") left center no-repeat; }
.section-copy h2 { margin: 22px 0 22px; color: var(--gold); font: 600 40px/1 var(--display); text-shadow: 1px 1px #0004; }
.section-copy > p:not(.eyebrow):not(.campaign-note) { max-width: 446px; }
.section-note { margin-top: 25px; }
.section-copy > .button { margin-top: 22px; }
.parchment { position: relative; z-index: 1; isolation: isolate; color: #080706; }
.parchment::before { content: ""; position: absolute; z-index: -2; inset: 25px 0 20px; background: #e6cd9b; }
.parchment-edge { position: absolute; z-index: -1; left: 0; width: 100%; height: 186px; display: flex; overflow: hidden; mask: url("assets/parchment-mask.webp?v=3") center / 100% 100% no-repeat; pointer-events: none; }
.parchment-edge i { flex: none; width: 68.733%; height: 207px; margin-top: -13px; background: url("assets/parchment.webp?v=1") 54% -59px / 129.3% 472.17px no-repeat; }
.parchment-edge i:first-child { margin-left: -18.75%; transform: scaleX(-1); }
/* Blend the textured edges into the center without stretching their height. */
.parchment-edge::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 35%; background: linear-gradient(transparent, #e6cd9b); pointer-events: none; }
.edge-top { top: -31px; }
.edge-bottom { bottom: -30px; transform: scaleY(-1); }
.parchment .eyebrow::after { width: 269.286px; background-image: url("assets/separator-dark.svg?v=2"); }
.parchment h2 { color: var(--ink); margin-block: 20px 12px; }
.parchment .eyebrow { line-height: 1.3; }
.challenge { min-height: 485px; }
.challenge .section-inner { padding-top: 42px; }
.challenge .section-copy h2 { margin-top: 20px; }
.challenge .section-copy > p { max-width: 425px; }
.challenge-art { position: absolute; width: 80.372%; aspect-ratio: 1157.355 / 516.668; left: 50.512%; top: 1px; mask: url("assets/battle-mask.webp?v=3") center / 100% 100% no-repeat; }
.challenge-art img { position: absolute; width: 64.026%; height: auto; left: 1.178%; top: -80.335%; }

.scenic { position: relative; isolation: isolate; }
.scenic .section-inner { padding-top: 42px; }
.scenic .section-copy::before { content: ""; position: absolute; z-index: -1; width: 624px; height: 606px; left: -122px; top: -177px; background: radial-gradient(ellipse closest-side, #252525 57%, #231d1200); pointer-events: none; }
.scenic-art { position: absolute; z-index: -2; width: 82.43%; aspect-ratio: 1187 / 527.792; left: 23.2%; mask: url("assets/battle-mask.webp?v=3") center / 100% 100% no-repeat; }
.world { min-height: 360px; }
.world-art { top: -76px; background: url("assets/world-miniature.webp?v=2") 58.247% 54px / 83.657% auto no-repeat; }
.world .section-copy > p { max-width: 404px; }
.tactics { min-height: 480px; }
.tactics .edge-top { top: -46px; }
.tactics .edge-bottom { bottom: -40px; }
.tactics .section-inner { grid-template-columns: 63% 37%; padding-top: 35px; }
.tactics .section-copy { grid-column: 2; width: 429px; max-width: 115%; }
.tactics .section-copy > p { max-width: 425px; }
.tactics-art { position: absolute; width: 83.75%; max-width: 1206px; aspect-ratio: 1206 / 536; left: calc(50% - 1166px); top: -15px; mask: url("assets/battle-mask.webp?v=3") center / 100% 100% no-repeat; }
.tactics-art img { position: absolute; max-width: none; height: auto; }
.tactics-miniature { width: 92.154%; left: 8.502%; top: -2.585%; }
.tactics-board { width: 123.042%; left: 8.789%; top: -5.97%; }
.modular { min-height: 462px; }
.modular .section-copy::before { width: 588px; height: 599px; top: -118px; }
.modular-art { left: 19.44%; top: -30px; background: url("assets/modular-landscape.webp?v=3") 90.503% 145.378% / 84.92% auto no-repeat; }
.modular-features { display: flex; justify-content: space-between; width: 465px; max-width: 100%; margin: 22px 0 0 -14px; padding: 0; list-style: none; text-align: center; font: 600 18px/1.25 var(--display); color: var(--feature-gold); }
.modular-features span { display: block; margin-top: 5px; }

.community { position: relative; isolation: isolate; min-height: 680px; }
.community::after { content: ""; position: absolute; z-index: -2; inset: 2px 0 -65px; background: url("assets/community.webp?v=1") 33% top / 113.472% auto no-repeat; mask: url("assets/community-mask.svg?v=1") center / 100% 100% no-repeat; pointer-events: none; }
.community::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: url("assets/community-line.svg?v=1") center no-repeat; }
.community .section-inner { padding-top: 44px; grid-template-columns: 51.3% 48.7%; }
.community .section-copy { grid-column: 2; width: 580px; max-width: 115%; }
.community .section-copy h2 { white-space: nowrap; }
.community .community-intro { width: 332px; }
.community dl { margin: 13px 0 18px; }
.community dt { color: var(--gold); font-size: 22px; font-weight: 700; }
.community dd { margin: 0 0 20px; }
.community dd:nth-of-type(2) { margin-bottom: 30px; }
.community dd:last-child { margin-bottom: 18px; }
.community .button-discord { margin: 8px 0 0 -54px; padding-left: 102px; }
.button-discord img { position: absolute; left: 15px; top: 16px; }
.button-discord::after { content: ""; position: absolute; z-index: -2; width: 139px; height: 54px; left: -54px; top: 10px; background: linear-gradient(to left, #000, #12110e00); }
.site-footer { position: relative; isolation: isolate; display: flex; align-items: center; gap: 30px; min-height: 86px; margin: 0 8.9% 0 11.7%; }
.footer-nav { position: relative; align-self: center; padding-bottom: 10px; gap: 36px; }
.footer-nav::after { content: ""; position: absolute; left: 0; right: -420px; bottom: -6px; height: 3px; background: url("assets/footer-line.svg?v=1") left center no-repeat; }
.footer-legal { flex: none; align-self: center; width: 255px; font-size: 12px; text-align: right; }

/* Keep content centered while the section artwork fills wider screens. */
@media (min-width: 1441px) {
  .hero-scene { width: 1226px; left: calc(50% - 595px); }
  .scenic-art { top: 50%; transform: translateY(-50%); }
  .world-art { background-position-y: center; }
  .modular-art { background-position-y: center; }
  .community::after { background-size: cover; background-position: center; }
}
@media (max-width: 1250px) {
  .site-header { width: 94%; gap: 16px; }
  .primary-nav { gap: 20px; }
  .site-header .brand { flex-basis: 155px; }
  .hero-inner { width: 84%; }
  .hero-scene { width: 96%; left: 4%; }
  .hero-product { left: 24%; top: 70px; }
  .section-inner { width: 84%; }
  .section-copy h2 { font-size: 34px; }
  .tactics .section-inner { grid-template-columns: 58% 42%; }
  .tactics .section-copy { max-width: 100%; }
  .tactics-art { left: -34%; top: 25px; }
  .site-footer { margin-inline: 4%; gap: 20px; flex-wrap: wrap; padding-block: 20px; }
  .footer-legal { width: 100%; font-size: 14px; }
  .footer-nav::after { right: 0; background-size: 100% 3px; }
}
@media (max-width: 1000px) {
  .site-header { flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 8px; }
  .site-header .brand { min-height: 56px; }
  .primary-nav { flex-basis: 100%; order: 3; justify-content: center; gap: 36px; }
  .hero { margin-top: -116px; min-height: 730px; }
  .hero-inner { width: 88%; padding-top: 150px; }
  .hero-copy { width: 470px; }
  .hero h1 { font-size: 42px; }
  .hero-panel { width: 480px; font-size: 18px; }
  .hero-tagline { font-size: 16px; }
  .hero-scene { top: 70px; left: 14%; width: 115%; mask: radial-gradient(ellipse closest-side, #000 55%, transparent); }
  .hero-product { width: 100%; left: 16%; mask: linear-gradient(#000 77%, transparent 98%); }
  .feature-list { width: 94%; margin-inline: auto; gap: 10px; }
  .feature-list li { padding-inline: 4px; }
  .feature-list h2 { font-size: 15px; }
  .section-inner { width: 88%; grid-template-columns: 50% 50%; }
  .section-copy h2 { font-size: 28px; }
  .section-copy p { font-size: 16px; }
  .section-copy .eyebrow { font-size: 20px; }
  .button-dark { font-size: 17px; width: 325px; }
  .challenge-art { width: 100%; left: 49%; top: 40px; }
  .scenic-art { width: 110%; left: 15%; }
  .world-art { background-position: 70px 54px; }
  .tactics .section-inner { grid-template-columns: 53% 47%; }
  .tactics-art { width: 100%; left: -48%; top: 60px; }
  .community { min-height: 680px; }
  .community::after { background-size: auto 100%; background-position: 40% top; }
  .community .section-inner { grid-template-columns: 42% 58%; }
  .community .section-copy { width: auto; max-width: 100%; }
  .community .section-copy h2 { white-space: normal; }
  .community .section-copy::before { content: ""; position: absolute; z-index: -1; inset: -30px; background: radial-gradient(ellipse closest-side, #221e1ee6 35%, #221e1e00 75%); }
  .community dd { font-size: 16px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 16px; }
  .site-header { width: 90%; min-height: 72px; }
  .site-header .button-small { display: none; }
  .menu-toggle:not([hidden]) { display: flex; gap: 10px; align-items: center; border: 1px solid #a3844380; border-radius: 3px; padding: 12px; background: var(--ink); color: var(--gold); font: 600 14px/1 var(--display); }
  .primary-nav { flex-wrap: wrap; gap: 0 24px; font-size: 14px; }
  .primary-nav[data-state="closed"] { display: none; }
  .primary-nav[data-state="open"] { display: flex; }
  .hero { margin-top: 0; min-height: 0; display: flex; flex-direction: column; }
  .hero-inner { width: 88%; padding-top: 24px; }
  .hero-copy { width: 100%; }
  .hero-copy::before { display: none; }
  .hero h1 { font-size: clamp(31px, 8vw, 48px); }
  .hero-tagline { max-width: 420px; margin-top: 12px; font-size: 16px; }
  .hero-panel { width: min(calc(100% + 16px), 518px); max-width: none; min-height: 140px; margin-left: -8px; padding: 20px; font-size: 17px; }
  .game-details { font-size: 16px; }
  .hero .button-gold { height: 64px; padding-inline: 70px 24px; margin: 12px 0 0 -8px; max-width: calc(100% + 16px); }
  .hero .gamefound-mark { top: 7px; }
  .button { font-size: clamp(14px, 3.9vw, 20px); }
  .button-gold { width: 420px; height: 64px; padding-inline: 70px 24px; }
  .button-gold .gamefound-mark { width: 53px; height: 50px; left: 12px; background-size: 207px auto; }
  .hero-scene { width: 120%; height: 50%; aspect-ratio: auto; left: -10%; top: auto; bottom: 0; mask: linear-gradient(transparent, #000 8%, #000 90%, transparent); }
  .hero-product { position: relative; order: 2; width: 120%; max-width: none; left: -10%; top: auto; margin-block: 12px -15px; }
  .hero-landscape { inset: 0; width: 100%; height: 100%; mask: radial-gradient(ellipse closest-side, #000, transparent 72%); background-position: center 40%; }
  .features { padding-block: 12px 52px; }
  .feature-list { width: 92%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .feature-list li { padding: 0; }
  .feature-list li + li::before { display: none; }
  .feature-list li:last-child { grid-column: 1 / -1; }
  .feature-list h2 { max-width: 150px; margin-inline: auto; }
  .section-inner, .tactics .section-inner { display: flex; flex-direction: column; width: 86%; padding-block: 35px; }
  .section-copy, .tactics .section-copy { width: 100%; max-width: 100%; }
  .section-copy h2 { font-size: clamp(26px, 6.4vw, 36px); margin-block: 22px 18px; }
  .section-copy p { font-size: 17px; }
  .section-copy .campaign-note { font-size: 14px; }
  .eyebrow::after { max-width: 85%; }
  .parchment::before { inset-block: 15px; }
  .parchment-edge { height: 13vw; }
  .parchment-edge i { height: 14.375vw; margin-top: -.903vw; background-size: 129.3% 32.79vw; background-position-y: -4.1vw; }
  .parchment .edge-top { top: -20px; }
  .parchment .edge-bottom { bottom: -20px; }
  .challenge, .tactics, .world, .modular { min-height: 0; }
  .challenge-art { position: relative; width: 100%; aspect-ratio: 741 / 480; left: 0; top: auto; margin-top: -15px; }
  .challenge-art img { width: 100%; left: 0; top: -86.473%; }
  .world .section-inner { padding-top: 50px; padding-bottom: 240px; }
  .scenic .section-copy::before { width: 180%; height: 450px; top: -100px; left: -40%; }
  .scenic-art { width: 140%; left: -20%; top: auto; bottom: 0; }
  .world-art { background-position: 55% 30%; }
  .tactics .section-inner { padding-top: 35px; }
  .tactics-art { position: relative; width: 160%; max-width: none; left: -60%; top: auto; margin-top: -10px; }
  .modular .section-inner { padding-top: 50px; padding-bottom: 220px; }
  .modular-art { background-position: center; background-size: 100% auto; }
  .modular-features { width: 100%; margin: 24px 0 0; font-size: 14px; }
  .modular-features .medallion { width: 100px; }
  .community { min-height: 0; }
  .community::after { inset: 0; background-size: auto 480px; background-position: 24% bottom; mask: none; }
  .community .section-inner { padding-block: 40px 340px; }
  .community .section-copy { width: 100%; }
  .community .community-intro { width: auto; }
  .community .section-copy::before { display: none; }
  .community dl { margin-top: 20px; }
  .community dt { font-size: 21px; }
  .community dd { font-size: 17px; margin-bottom: 18px; }
  .community .button-discord { margin: 12px 0 0; padding-left: 70px; }
  .button-discord img { left: 8px; top: 12px; }
  .site-footer { flex-direction: column; gap: 18px; margin: 0; padding: 24px 5%; background: var(--ink); }
  .page { padding-bottom: 0; }
  .site-footer .brand { flex-basis: auto; }
  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 0 24px; }
  .footer-legal { text-align: center; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}