@font-face { font-family: 'Big Shoulders Stencil Display'; font-style: normal; font-weight: 800 900; font-display: swap; src: url('/media/v1/brand/big-shoulders-stencil-display-latin-v1.woff2') format('woff2'); }
:root {
  color-scheme: dark;
  --ink: #151b1e;
  --slate: #253238;
  --chalk: #f3f1ea;
  --mist: #b9c3c5;
  --accent: #b83d32;
  --brass: #caa45d;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--chalk);
  background: var(--ink);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: white; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brass); outline-offset: 6px; }
img { display: block; max-width: 100%; }
p { margin: 0 0 1.1em; font-size: 18px; line-height: 1.65; }
h1, h2 { margin: 0; }
h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.12; font-weight: 650; letter-spacing: -.04em; text-wrap: balance; }
.skip-link { position: absolute; top: -100px; z-index: 10; padding: 15px; background: var(--ink); }
.skip-link:focus { top: 0; }
.wordmark { position: relative; width: min(100%, 480px); aspect-ratio: 1280 / 720; margin: 0 0 35px; }
.wordmark img { display: block; width: 100%; height: auto; }
.hero-hook { margin: 0 0 16px; font-size: clamp(27px, 2.7vw, 39px); font-weight: 650; line-height: 1.18; letter-spacing: -.025em; text-shadow: 0 2px 10px #111e27; }
.hero-description { max-width: 500px; margin: 0 0 28px; font-size: 20px; line-height: 1.6; text-shadow: 0 2px 10px #111e27; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 34px; min-height: 56px; padding: 16px 26px; background: var(--accent); color: white; border: 1px solid #d26452; border-radius: 3px; font: 650 16px/1.3 system-ui, sans-serif; transition: background .15s; cursor: pointer; }
a.button:hover { background: #cd493d; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions button { cursor: pointer; }
.button-secondary { background: #172129c7; border-color: #849095; box-shadow: none; }
a.button-secondary:hover { background: #2a383f; border-color: var(--chalk); }
.button:disabled { cursor: not-allowed; }
.hero-status { margin: 15px 0 0; font-size: 12px; color: #e1e5e2; }
.hero-status > span[aria-hidden] { padding: 0 8px; }
.section-wrap { width: min(1200px, 88%); margin-inline: auto; }
.feature { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; align-items: center; padding-block: 110px; }
.eyebrow { color: var(--brass); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; margin: 0 0 19px; }
.section-number { display: inline-block; color: var(--mist); font-variant-numeric: tabular-nums; padding-right: 15px; margin-right: 12px; border-right: 1px solid #647077; letter-spacing: 0; }
.feature h2 { margin-bottom: 26px; }
.feature-copy > p:not(.eyebrow) { color: var(--mist); font-size: 17px; }
.feature-copy > p:last-child { margin-bottom: 0; }
.capture { margin: 0; min-width: 0; }
.capture-frame { width: 100%; min-width: 0; aspect-ratio: 16 / 9; background: #233038; border: 1px solid #46565e; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 28px; text-align: center; position: relative; }
.capture-frame-media { padding: 0; overflow: hidden; background: #11191d; }
.capture-media { width: 100%; height: 100%; object-fit: cover; }
.media-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 2; min-height: 42px; padding: 10px 13px; border: 1px solid #d5d9d7; border-radius: 2px; background: #11191de8; color: #f3f1ea; font: 650 11px/1.2 system-ui, sans-serif; cursor: pointer; }
.media-toggle:hover { background: #29373e; }
.media-toggle[hidden] { display: none; }
.media-tag { position: absolute; left: 14px; bottom: 14px; padding: 7px 10px; background: #11191ddd; border-left: 2px solid var(--brass); color: #f3f1ea; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
figcaption { font-size: 11px; color: var(--mist); line-height: 1.6; margin-top: 12px; }
.command-band { background: #1b252b; }
.scale-band { background: #202a2e; }
.feature-reverse { grid-template-columns: 1.2fr .8fr; }
.feature-reverse .feature-copy { grid-column: 2; grid-row: 1; }
.feature-reverse .capture { grid-column: 1; grid-row: 1; }
.art-story-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8%; align-items: end; margin-bottom: 40px; }
.art-story-heading h2 { max-width: 650px; }
.art-story-heading > p { color: var(--mist); font-size: 17px; margin: 0; }
.war-journey { padding-block: 75px 0; background: #202a2e; border-top: 1px solid #455057; }
.journey-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: start; }
.journey-heading h2 { max-width: 420px; }
.journey-heading p:not(.eyebrow) { font-size: 17px; }
.journey-heading .journey-note { color: var(--mist); font-size: 12px; line-height: 1.6; }
.theatre-card { flex: 0 0 350px; min-width: 0; scroll-snap-align: start; }
.theatre-date { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0; padding: 23px 0 20px; border-top: 1px solid #6a7478; position: relative; font-size: 23px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.theatre-date::before { content: ''; position: absolute; width: 7px; height: 7px; border: 1px solid var(--brass); background: #202a2e; top: -4px; left: 0; border-radius: 50%; }
.theatre-date::after { content: ''; position: absolute; left: 100%; top: -1px; width: 28px; border-top: 1px solid #6a7478; }
.theatre-card:last-child .theatre-date::after { display: none; }
.theatre-card:first-child .theatre-date::before { background: var(--brass); }
.theatre-card figure { position: relative; margin: 0; }
.theatre-card img { width: 100%; height: 290px; object-fit: cover; object-position: center 56%; }
.theatre-card figcaption { position: absolute; bottom: 0; right: 0; margin: 0; padding: 5px 9px; background: #151b1edd; color: #ecece4; font-size: 9px; }
.theatre-copy { padding-top: 20px; }
.theatre-copy h3 { margin: 0 0 10px; font-size: 23px; font-weight: 550; letter-spacing: -.025em; }
.theatre-copy p { margin: 0; color: var(--mist); font-size: 14px; line-height: 1.7; max-width: 330px; }
.wishlist { position: relative; padding: 85px 24px; background: linear-gradient(90deg, #172129f0, #151b1edb), url('/media/v1/brand/steam-library-hero-v3.webp') center / cover; border-top: 1px solid #455057; }
.wishlist-inner { max-width: 1000px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: center; }
.wishlist-brand { text-align: center; }
.wishlist-brand .wordmark { max-width: 320px; margin: 0 auto 20px; }
.wishlist-brand p { font-size: 13px; color: var(--mist); margin: 0; }
.wishlist-action { border-left: 1px solid #4c585d; padding-left: 45px; }
.wishlist h2 { margin-bottom: 12px; font-size: 27px; letter-spacing: -.02em; }
.wishlist-action > p { color: var(--mist); font-size: 15px; }
.wishlist .button { border-radius: 1px; background: #a63a30; border-color: #bd6553; box-shadow: inset 3px 0 #caa45d; }
.wishlist .button-secondary { background: #172129c7; border-color: #849095; box-shadow: none; }
.wishlist .availability { font-size: 12px; margin: 15px 0 25px; }
.community-link { font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 900px) {
  .hero-description { font-size: 18px; }
  .feature { gap: 5%; padding-block: 75px; }
  .capture-frame { padding: 45px 20px; }
}
@media (max-width: 640px) {
  .wordmark { max-width: 330px; margin: 0 auto 24px; }
  .hero-hook { font-size: clamp(25px, 6.3vw, 32px); margin-bottom: 14px; }
  .hero-description { font-size: 17px; line-height: 1.55; max-width: 360px; margin: 0 auto 22px; }
  .hero-actions { justify-content: center; }
  .hero-status { font-size: 11px; }
  .section-wrap { width: calc(100% - 40px); }
  .feature, .feature-reverse { grid-template-columns: 1fr; gap: 30px; padding-block: 58px; }
  .feature-reverse .feature-copy, .feature-reverse .capture { grid-column: auto; grid-row: auto; }
  .feature-copy { max-width: 460px; }
  .feature h2 { margin-bottom: 20px; }
  .capture-frame { min-height: 215px; }
  .art-story-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  .war-journey { padding-top: 50px; }
  .journey-heading { grid-template-columns: 1fr; gap: 25px; }
  .theatre-card { flex-basis: min(310px, 82vw); }
  .theatre-date::after { width: 20px; }
  .theatre-card img { height: 265px; }
  .wishlist { padding-block: 65px; }
  .wishlist-inner { grid-template-columns: 1fr; gap: 35px; text-align: center; }
  .wishlist-brand .wordmark { max-width: 260px; }
  .wishlist-action { border-left: 0; border-top: 1px solid #4c585d; padding: 30px 0 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 6%; padding-block: 85px; }
.faq h2 { font-size: 36px; }
.faq details { border-top: 1px solid #455057; padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid #455057; }
.faq summary { cursor: pointer; font-size: 17px; font-weight: 550; line-height: 1.5; }
.faq summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }
.faq details p { font-size: 15px; color: var(--mist); margin: 16px 0 0; }
.faq a { text-decoration: underline; text-underline-offset: 4px; }
.press-page { max-width: 1050px; padding-block: 65px; }
.press-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-bottom: 50px; }
.press-heading > img, .press-art figure > img { width: 100%; height: auto; }
.press-heading h1 { font-size: 48px; margin-bottom: 20px; letter-spacing: -.035em; }
.press-page h2 { font-size: 28px; margin-bottom: 24px; }
.press-section { padding-block: 40px; border-top: 1px solid #455057; }
.press-facts { display: grid; grid-template-columns: 160px 1fr; gap: 15px 30px; font-size: 16px; line-height: 1.6; }
.press-facts dt { color: var(--mist); }
.press-facts dd { margin: 0; }
.press-page a:not(.button) { text-decoration: underline; text-underline-offset: 4px; }
.press-art { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.press-art figure { margin: 0; }
.press-art .logo-board { background: #101619; aspect-ratio: 1232 / 706; display: grid; place-items: center; }
.press-art .wordmark { width: 80%; margin-bottom: 0; }
@media (max-width: 640px) {
  .faq { grid-template-columns: 1fr; gap: 30px; padding-block: 55px; }
  .press-heading, .press-art { grid-template-columns: 1fr; gap: 30px; }
  .press-facts { grid-template-columns: 1fr; gap: 5px; }
  .press-facts dd { margin-bottom: 15px; }
}
#the-war { counter-reset: phase; }
.road-footnote { margin: 4px auto 0; padding-bottom: 60px; text-align: right; color: var(--mist); font-size: 11px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--reveal-delay, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* Hero entrance and scroll reveals. Everything here is skipped under Reduced Motion. */
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes button-sheen { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-content > .hero-description { animation-delay: .35s; }
  .hero-content > .hero-actions { animation-delay: .5s; }
  .hero-content > .hero-status { animation-delay: .65s; }
  .button { position: relative; overflow: hidden; transition: background .15s, transform .2s ease, box-shadow .2s ease; }
  .button::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, #ffffff38, transparent); transform: translateX(-120%) skewX(-20deg); pointer-events: none; }
  a.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #0006; }
  a.button:hover::after { animation: button-sheen .8s ease; }
  .capture-frame-media .capture-media { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
  .media-panel:hover .capture-media { transform: scale(1.03); }
  .reveal-media .capture-frame { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); transition-delay: var(--reveal-delay, 0s); }
  .reveal-media .capture-media { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0s); }
  .reveal-media.is-visible .capture-frame { clip-path: inset(0 0 0 0); }
  .reveal-media.is-visible .capture-media { transform: none; }
  .reveal-media.is-visible:hover .capture-media { transform: scale(1.03); transition-delay: 0s; transition-duration: .9s; }
  .feature-reverse .reveal-media .capture-frame { clip-path: inset(0 0 0 100%); }
  .feature-reverse .reveal-media.is-visible .capture-frame { clip-path: inset(0 0 0 0); }
  .reveal .section-number { transition: color .6s .5s; }
  .eyebrow.reveal::after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 1px; margin-left: 14px; background: var(--brass); transition: width .9s .35s cubic-bezier(.2, .7, .2, 1); }
  .eyebrow.reveal.is-visible::after { width: 48px; }
}
@media (min-width: 761px) { .theatre-card { flex: 1 1 0; max-width: 350px; } }
@media (max-width: 760px) {
  .theatre-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; padding: 12px; background: #1a2428; border: 1px solid #3b484e; border-left: 2px solid #6a7478; }
  .theatre-card figure { grid-column: 1; grid-row: 1 / span 2; }
  .theatre-card img { height: 100%; min-height: 150px; aspect-ratio: 2 / 3; object-position: center 40%; }
  .theatre-card figcaption { display: none; }
  .theatre-date { grid-column: 2; padding: 2px 0 8px; border-top: 0; font-size: 16px; }
  .theatre-date::before, .theatre-date::after { display: none; }
  .theatre-copy { grid-column: 2; padding-top: 0; }
  .theatre-copy h3 { margin-bottom: 6px; font-size: 19px; }
  .theatre-copy p { font-size: 14px; line-height: 1.55; }
  .road-footnote { text-align: left; padding-bottom: 44px; }
}
.hero-status .status-item { white-space: nowrap; }
.feature-copy > p.feature-lead { color: var(--chalk); font-size: 21px; line-height: 1.5; }
@media (max-width: 640px) { .feature-copy > p.feature-lead { font-size: 19px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-hook { font-size: clamp(25px, 2.4vw, 34px); margin-bottom: 12px; }
.hero-description { max-width: 490px; font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
.hero-actions .button { gap: 16px; padding-inline: 20px; }
.campaign-band { background: #151e23; }
.capture-frame-media { padding: 0; min-height: 0; }
.scale-band .feature { padding-bottom: 56px; }
.battle-details { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; padding-block: 28px 58px; border-top: 1px solid #455057; }
.battle-details .eyebrow { margin-bottom: 10px; }
.battle-details p:not(.eyebrow) { max-width: 480px; color: var(--mist); font-size: 16px; margin-bottom: 0; }
.campaign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.campaign-grid .theatre-card { display: grid; grid-template-columns: 36% minmax(0, 1fr); min-width: 0; max-width: none; background: #192328; border: 1px solid #46565e; }
.campaign-grid .theatre-card figure { min-width: 0; }
.campaign-grid .theatre-card img { height: 100%; min-height: 280px; object-position: center; }
.campaign-grid .theatre-copy { padding: 28px; }
.campaign-grid .theatre-date { padding: 0; margin: 0 0 14px; border: 0; color: var(--brass); font-size: 12px; letter-spacing: .08em; }
.campaign-grid .theatre-date::before, .campaign-grid .theatre-date::after { display: none; }
.campaign-grid .theatre-copy h3 { font-size: 25px; margin-bottom: 12px; }
.campaign-grid .theatre-copy .campaign-chapters { margin-top: 16px; font-size: 12px; color: #d8ddda; line-height: 1.8; }
.war-journey .road-footnote { padding: 28px 0 0; margin-top: 0; text-align: left; font-size: 12px; padding-bottom: 65px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-content > .hero-hook { animation-delay: .3s; }
}
@media (max-width: 1000px) {
  .hero-description { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .campaign-grid { grid-template-columns: 1fr; gap: 18px; }
  .campaign-grid .theatre-copy { padding: 22px; }
  .campaign-grid .theatre-copy h3 { font-size: 22px; }
}
@media (max-width: 760px) {
  .campaign-grid .theatre-card { grid-template-rows: auto; column-gap: 0; padding: 0; border-left: 1px solid #46565e; }
  .campaign-grid .theatre-card figure { grid-column: 1; grid-row: auto; }
  .campaign-grid .theatre-card img { min-height: 240px; aspect-ratio: auto; }
  .campaign-grid .theatre-card figcaption { display: block; }
  .campaign-grid .theatre-copy { grid-column: 2; }
  .campaign-grid .theatre-date { display: block; }
}
@media (max-width: 640px) {
  .hero-hook { font-size: 28px; }
  .hero-description { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: center; gap: 10px; }
  .hero-actions .button-secondary { min-height: 38px; padding: 7px 0; background: transparent; border: 0; }
  .scale-band .feature { padding-bottom: 34px; }
  .battle-details { grid-template-columns: 1fr; gap: 26px; padding-block: 26px 44px; }
  .campaign-grid .theatre-card { grid-template-columns: 32% minmax(0, 1fr); }
  .campaign-grid .theatre-copy { padding: 20px 18px; }
  .campaign-grid .theatre-copy h3 { font-size: 21px; }
  .campaign-grid .theatre-copy p { font-size: 13px; }
}

.press-layers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.press-layers figure { margin: 0; }
.layer-board { aspect-ratio: 16 / 10; background: #202a2e; border: 1px solid #46565e; display: grid; place-items: center; padding: 18px; }
.layer-board img { width: 100%; height: 100%; object-fit: contain; }
.layer-board-officer img { max-height: 270px; }
@media (max-width: 640px) { .press-layers { grid-template-columns: 1fr; } }

/* Road Ahead cards: a status tag on the art, and the three chapters laid over the card on hover or click.
   The tag follows the game's HUD labels: square, condensed capitals, brass line on ink, olive for what is in at launch. */
.campaign-grid .theatre-card { position: relative; }
.theatre-pill { position: absolute; white-space: nowrap; z-index: 1; top: 0; left: 0; padding: 5px 10px 4px; border: 1px solid var(--brass); border-width: 0 1px 1px 0; border-radius: 0; background: #151b1ef2; color: var(--brass); font-family: 'Bahnschrift Condensed', 'Arial Narrow', system-ui, sans-serif; font-stretch: condensed; font-size: 12px; font-weight: 600; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; }
.theatre-pill-now { border-color: #8caa7f; background: #4f6b43; color: #eef3e8; }
.campaign-grid .theatre-copy .theatre-more { display: inline-flex; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; text-align: left; color: #d8ddda; cursor: pointer; }
.theatre-more:hover { color: var(--chalk); }
.theatre-more-mark { color: var(--brass); font-size: 15px; font-weight: 700; }
.theatre-chapters { position: absolute; inset: 0; z-index: 2; overflow: auto; padding: 22px; background: #151e23f5; border: 1px solid var(--brass); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; cursor: pointer; }
.theatre-card.is-open .theatre-chapters { opacity: 1; visibility: visible; transition: opacity .2s; }
@media (hover: hover) and (pointer: fine) {
  .theatre-card:hover .theatre-chapters { opacity: 1; visibility: visible; transition: opacity .2s .12s; }
}
.theatre-chapters ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; height: 100%; margin: 0; padding: 0; list-style: none; }
.theatre-chapters li { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; }
.campaign-grid .theatre-chapters img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; object-position: center 40%; border: 1px solid #46565e; }
.theatre-chapters h4 { margin: 12px 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.theatre-chapters p { margin: 0; color: var(--mist); font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) {
  .theatre-pill { max-width: 100%; padding: 4px 7px 3px; white-space: normal; font-size: 11px; letter-spacing: .06em; }
}
@media (max-width: 520px) {
  .theatre-chapters { padding: 12px; }
  .theatre-chapters ol { grid-template-columns: 1fr; gap: 8px; height: auto; }
  .theatre-chapters li { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: start; }
  .campaign-grid .theatre-chapters img { grid-row: 1 / span 2; width: 46px; height: 64px; }
  .theatre-chapters h4 { margin: 2px 0 2px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .theatre-chapters, .theatre-card:hover .theatre-chapters, .theatre-card.is-open .theatre-chapters { transition: none; } }

/* Hero: the Steam key art as three layers (battlefield, officer, wordmark) so each screen size can frame them separately. */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; align-items: end; min-height: 640px; height: min(860px, 92svh); overflow: hidden; }
.hero-art { grid-area: 1 / 1; position: relative; z-index: -1; height: 100%; overflow: hidden; }
.hero-landscape, .hero-landscape img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-landscape img { object-fit: cover; object-position: 60% 55%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink), transparent 34%), linear-gradient(90deg, #111a21e6 0%, #111a21a8 34%, transparent 62%); }
.hero-officer { position: absolute; bottom: 0; right: max(1%, calc(50% - 900px)); height: 97%; aspect-ratio: 738 / 1400; }
.hero-officer img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom right; }
/* The bottom fade sits over the officer too, so his feet melt into the page instead of ending on a hard edge. */
.hero-art::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(0deg, var(--ink), transparent); pointer-events: none; }
.hero-content { grid-area: 1 / 1; width: 48%; max-width: 640px; margin: 0 0 64px max(6%, calc(50% - 670px)); text-align: left; }
.hero-wordmark { width: clamp(320px, 36vw, 620px); margin: 0 0 22px -1.5%; line-height: 0; }
.hero-wordmark img { width: 100%; height: auto; }
@media (min-width: 1200px) { .hero-description { max-width: none; white-space: nowrap; } }
@media (max-width: 1000px) {
  .hero { min-height: 600px; height: min(760px, 88svh); }
  .hero-officer { right: -16%; height: 84%; }
  .hero-content { width: 58%; margin-left: 5%; margin-bottom: 48px; }
  .hero-actions .button { padding-inline: 14px; }
  .hero-wordmark { width: min(440px, 100%); }
}
@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; align-items: start; padding-bottom: 36px; }
  .hero-content { display: contents; }
  .hero-art { grid-area: 1 / 1; height: clamp(330px, 96vw, 560px); }
  .hero-landscape img { object-position: 42% 50%; }
  .hero-shade { background: linear-gradient(0deg, var(--ink) 0%, transparent 30%), linear-gradient(180deg, #111a2199 0%, transparent 40%); }
  .hero-officer { right: -10%; height: 100%; }
  .hero-wordmark { grid-area: 1 / 1; align-self: start; width: min(60%, 340px); margin: 22px 0 0 16px; }
  .hero-hook, .hero-description, .hero-actions, .hero-status { width: calc(100% - 32px); max-width: 430px; justify-self: center; text-align: center; }
  .hero-hook { margin: 6px 0 12px; }
  .hero-description { margin: 0 0 20px; }
  .hero-actions { justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-officer img { animation: hero-officer-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-landscape img { animation: hero-settle 2.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-landscape { will-change: transform; }
}
@keyframes hero-officer-in { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }

/* Beyond the road ahead: a short text close to the roadmap, above its disclaimer. */
.beyond { margin-top: 40px; padding-top: 32px; border-top: 1px solid #455057; }
.beyond .eyebrow { margin-bottom: 12px; }
.beyond p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--mist); font-size: 16px; line-height: 1.7; }

/* The game's UI language (src/client/ui/FieldUIStyles.ts): condensed capital titles, brass section labels, square controls,
   a brass top line on panels, and the paper record for reading matter. */
:root { --stencil: 'Big Shoulders Stencil Display', 'Bahnschrift Condensed', 'Arial Narrow', sans-serif; --heading: 'Bahnschrift Condensed', 'Avenir Next Condensed', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; --paper: #eee5d2; --paper-ink: #302b23; --paper-muted: #514a3e; --paper-line: #b5a88e; --paper-brass: #685238; }
/* The store page's lettering on the site's own colours (Matt, 27 October 2026): stencil titles, and a red torn rule under
   each section's title. */
h2, .theatre-copy h3, .roadmap-stop h3 { font-family: var(--stencil); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
h2 { font-weight: 900; line-height: .95; font-size: clamp(44px, 4.6vw, 66px); }
.feature h2::after, .journey-heading h2::after, .faq h2::after { content: ''; display: block; width: min(320px, 80%); height: 6px; margin-top: 14px; background: var(--accent); clip-path: polygon(0 20%, 3% 0, 30% 30%, 55% 0, 80% 25%, 100% 0, 99% 100%, 70% 75%, 45% 100%, 20% 70%, 0 100%); }
.eyebrow { font-family: var(--heading); font-stretch: condensed; font-size: 13px; font-weight: 600; letter-spacing: .14em; }
.button { border-radius: 1px; font-weight: 600; letter-spacing: .03em; }
.campaign-grid .theatre-card { border-top: 2px solid var(--brass); }

/* The Road Ahead: the roadmap as a timeline, a row of stops on a rule; one column below 1180 px. Each title takes two lines
   (its <br> in the page) and each point one line, so the stops line up. */
.roadmap { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 14px; margin-top: 44px; padding: 0; list-style: none; position: relative; }
.roadmap::before { content: ''; position: absolute; left: 0; right: 0; top: 41px; height: 1px; background: #46565e; }
.roadmap-stop { position: relative; min-width: 0; padding-top: 62px; }
.roadmap-stop::before { content: ''; position: absolute; left: 0; top: 34px; width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid var(--chalk); background: var(--ink); }
.roadmap-now::before { background: var(--accent); border-color: #e0786a; }
.roadmap-next::before { background: var(--chalk); }
.roadmap-when { position: absolute; top: 0; left: 0; margin: 0; color: var(--brass); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; }
.roadmap-now .roadmap-when { color: #e0786a; }
.roadmap-stop h3 { margin: 0 0 10px; font-size: 24px; line-height: 1; white-space: nowrap; }
.roadmap-stop ul { margin: 0; padding: 0; list-style: none; }
.roadmap-stop ul li { position: relative; padding-left: 13px; margin: 0 0 5px; color: var(--mist); font-size: 13px; line-height: 1.35; white-space: nowrap; }
.roadmap-stop ul li::before { content: ''; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--accent); }
.roadmap-later h3 { color: #dcdcd4; }
@media (max-width: 1180px) {
  .roadmap { grid-template-columns: 1fr; gap: 0; }
  .roadmap::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .roadmap-stop { padding: 0 0 22px 34px; }
  .roadmap-stop::before { top: 2px; left: 0; }
  .roadmap-when { position: static; margin-bottom: 4px; }
}

/* Timeline stops highlight on hover or focus, and a campaign stop opens its card's chapters below. */
.roadmap-stop { padding-inline: 10px; margin-inline: -10px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.roadmap-stop::before { left: 10px; }
.roadmap-when { left: 10px; }
.roadmap-stop.is-active, .roadmap-stop:focus-visible { background: #ffffff0a; border-color: var(--brass); outline: none; }
.roadmap-stop[data-chapters] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .roadmap-stop { transition: none; } }
@media (max-width: 1180px) {
  .roadmap-stop { margin-inline: 0; padding-inline: 34px 10px; }
  .roadmap-stop::before { left: 0; }
}
/* Phones: the timeline keeps its desktop form as a row you swipe through, two stops in view; the campaign cards stay below,
   and tapping a campaign stop opens its card's chapters. */
@media (max-width: 760px) {
  .roadmap { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 6px; }
  .roadmap::-webkit-scrollbar { display: none; }
  .roadmap::before { display: none; }
  .roadmap-stop { flex: 0 0 46%; margin: 0; padding: 62px 12px 12px; scroll-snap-align: start; }
  .roadmap-stop::after { content: ''; position: absolute; left: 0; right: 0; top: 41px; height: 1px; background: #46565e; }
  .roadmap-stop::before { left: 12px; top: 34px; z-index: 1; }
  .roadmap-when { position: absolute; top: 0; left: 12px; margin: 0; }
}