:root {
  color-scheme:dark;
  --bg:#0d1010;
  --ink:#eee9df;
  --muted:#b2b6b2;
  --accent:#b68c58;
  --line:#343a35;
  --serif:'Cinzel',Georgia,serif;
  --sans:'Manrope',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased
}
body.modal-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:600 14px/1.4 var(--sans);
  color:inherit;
  cursor:pointer;
  border-radius:2px
}
button:disabled {
  cursor:not-allowed
}
button,input {
  accent-color:var(--accent)
}
a,button,summary {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
img,video {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.2
}
h2 {
  font-size:clamp(32px,3.2vw,48px)
}
h3 {
  font-size:28px
}
em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--accent)
}
h2 em {
  display:block;
  font-size:1.2em;
  line-height:1.2;
  margin-top:4px
}
p {
  color:var(--muted)
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:5px
}
::selection {
  background:#785e39;
  color:#fff
}
.container {
  width:min(1320px,calc(100% - 96px));
  margin-inline:auto
}
.section {
  padding-block:96px
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:48px;
  margin-bottom:36px
}
.section-heading>p {
  max-width:370px;
  font-size:15px
}
.kicker {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:24px
}
.kicker:after {
  content:'';
  height:1px;
  background:var(--line);
  flex:1;
  max-width:700px
}
.small-note {
  font-size:13px;
  line-height:1.75
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:var(--bg);
  padding:12px 20px;
  z-index:100
}
.skip-link:focus {
  top:12px
}
.site-header {
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:relative;
  z-index:10
}
.header-inner {
  display:flex;
  align-items:center;
  gap:28px;
  height:84px
}
.wordmark {
  font:400 32px/1 var(--serif);
  letter-spacing:.24em;
  color:var(--accent);
  text-transform:uppercase
}
.site-header nav {
  display:flex;
  gap:26px;
  margin-left:auto;
  font-size:13px
}
.site-header nav a {
  padding-block:12px;
  transition:color .2s
}
.site-header nav a:hover,.text-link:hover {
  color:var(--accent)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:48px;
  padding:12px 24px;
  border:1px solid transparent;
  font:600 14px/1.4 var(--sans);
  border-radius:2px;
  transition:background .2s,border-color .2s,color .2s
}
.button-primary {
  background:var(--accent);
  color:#10130f
}
.button-primary:hover {
  background:#ceaa7b
}
.button-outline {
  border-color:#766247;
  background:transparent;
  color:var(--ink)
}
.button-outline:hover {
  border-color:var(--accent);
  background:#b68c5812
}
.header-download {
  min-height:42px;
  padding:10px 24px;
  font-size:13px
}
.text-link {
  font-size:14px;
  border-bottom:1px solid var(--accent);
  padding-bottom:4px;
  transition:color .2s
}
.menu-toggle {
  display:none;
  background:transparent;
  border:0;
  padding:10px
}
.motion-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:0;
  padding:10px 0;
  font-size:12px;
  font-weight:400
}
.switch-track {
  width:30px;
  height:17px;
  border:1px solid #6a7168;
  border-radius:20px;
  padding:2px
}
.switch-track:after {
  content:'';
  display:block;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--muted);
  transition:transform .2s
}
.motion-toggle[aria-checked=true] .switch-track {
  border-color:var(--accent)
}
.motion-toggle[aria-checked=true] .switch-track:after {
  transform:translateX(12px);
  background:var(--ink)
}
.hero {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  align-items:center;
  gap:24px;
  min-height:650px;
  padding-block:72px
}
.hero h1 {
  font-size:clamp(50px,5.5vw,80px);
  line-height:1.05;
  letter-spacing:-.04em
}
.hero-slogan {
  font:italic clamp(27px,2.8vw,42px)/1.2 Georgia,serif;
  color:var(--accent);
  margin-top:16px
}
.hero-description {
  font-size:16px;
  max-width:460px;
  margin-top:28px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:32px
}
.hero-status {
  font-size:12px;
  margin-top:24px
}
.hero-art {
  position:relative;
  isolation:isolate;
  min-width:0;
  height:500px
}
.hero-archer {
  position:absolute;
  width:430px;
  max-width:79%;
  bottom:14px;
  left:-3%;
  z-index:2;
  transform:translate3d(var(--px,0px),var(--py,0px),0)
}
.hero-warrior {
  position:absolute;
  width:260px;
  max-width:46%;
  right:-2%;
  bottom:55px;
  z-index:1;
  transform:translate3d(var(--px,0px),var(--py,0px),0)
}
.aura {
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:50%;
  inset:8% -5% 0;
  background:radial-gradient(ellipse,rgba(43,106,135,.17),transparent 68%)
}
.aura-ember {
  inset:23% -8% 10% 42%;
  background:radial-gradient(ellipse,rgba(165,90,35,.18),transparent 65%)
}
.hero-art:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:70px;
  background:radial-gradient(ellipse,rgba(96,129,141,.09),transparent 70%)
}
.identity-strip {
  display:flex;
  justify-content:space-around;
  gap:24px;
  padding:25px 0;
  border-block:1px solid var(--line);
  color:var(--muted);
  font-family:var(--serif);
  font-size:16px
}
.identity-strip span+span {
  border-left:1px solid var(--line);
  padding-left:7%
}
.origin-tabs,.progress-tabs {
  display:flex;
  border-bottom:1px solid var(--line);
  overflow:auto;
  scrollbar-width:thin
}
.origin-tabs button,.progress-tabs button {
  position:relative;
  flex:1;
  background:none;
  white-space:nowrap;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  color:var(--muted);
  padding:18px 20px;
  font:400 20px/1.4 var(--serif)
}
[role=tab][aria-selected=true] {
  color:var(--accent);
  border-bottom-color:var(--accent)
}
[role=tab]:hover {
  color:var(--ink)
}
[role=tab]:focus-visible {
  outline-offset:-5px
}
.origin-panel {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
  align-items:center;
  padding-top:32px;
  min-height:530px
}
.origin-art {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-width:0;
  height:460px
}
.origin-art:before {
  content:'';
  position:absolute;
  inset:6%;
  z-index:-1;
  background:radial-gradient(ellipse,var(--origin-glow,#2b6a8728),transparent 66%)
}
.origin-art img {
  max-height:410px;
  width:auto;
  object-fit:contain
}
.origin-role {
  color:var(--accent);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:14px
}
.origin-copy h3 {
  font-size:46px;
  margin-bottom:16px
}
.origin-description {
  font-size:17px
}
.origin-details {
  margin:22px 0 18px
}
.origin-details>div {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:16px;
  padding:11px 0;
  border-top:1px solid var(--line)
}
dt {
  color:var(--muted);
  font-size:13px
}
dd {
  margin:0;
  font-size:14px
}
.origin-future {
  border-left:2px solid var(--accent);
  padding-left:18px;
  margin-top:22px
}
.origin-future>p:first-child {
  color:var(--accent);
  font-size:12px;
  margin-bottom:6px
}
.origin-future>p:last-child {
  font-size:14px
}
.origin-principle {
  max-width:760px;
  font-size:15px;
  margin:28px auto 0;
  text-align:center
}
.origin-principle strong {
  color:var(--ink);
  font-weight:600
}
.feature-list {
  display:grid;
  gap:24px
}
.feature-list article+article {
  padding-top:24px;
  border-top:1px solid var(--line)
}
.feature-list h3 {
  font-size:23px;
  margin-bottom:10px
}
.feature-list p {
  font-size:14px
}
.gallery {
  padding-block:48px 96px
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.gallery-image {
  display:block;
  position:relative;
  background:#070909;
  border:1px solid var(--line)
}
.gallery-image img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  transition:opacity .25s
}
.gallery-image:hover img {
  opacity:.8
}
.expand-icon {
  position:absolute;
  bottom:10px;
  right:10px;
  padding:7px;
  display:flex;
  background:#0d1010cc;
  border:1px solid #ffffff35
}
.expand-icon svg {
  width:18px;
  height:18px
}
figcaption {
  font-size:13px;
  color:var(--muted);
  margin-top:12px
}
.download-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  border-top:1px solid var(--line)
}
.download-copy>p {
  margin-top:22px
}
.download-copy>.button {
  margin-top:28px
}
.download-main {
  background:#272c29;
  color:#b2b6b2;
  border-color:#343a35
}
.download-main[href] {
  background:var(--accent);
  color:var(--bg)
}
.windows-icon {
  fill:currentColor;
  stroke:none
}
.release-details {
  margin:20px 0
}
.release-details>div {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
#release-checksum {
  overflow-wrap:anywhere
}
.copy-checksum {
  padding:8px 12px;
  border:1px solid var(--line);
  background:transparent;
  margin-top:12px
}
.requirements {
  border-left:1px solid var(--line);
  padding-left:60px
}
.requirements>p {
  margin-top:18px
}
.site-footer {
  display:flex;
  align-items:center;
  gap:40px;
  border-top:1px solid var(--line);
  padding-block:36px
}
.site-footer p {
  font-size:13px
}
.back-top {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px
}
.footer-note {
  text-align:center;
  padding-bottom:32px;
  font-size:12px
}
.lightbox {
  width:min(1280px,calc(100% - 40px));
  max-height:95dvh;
  padding:16px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line)
}
.lightbox::backdrop {
  background:#000d;
  backdrop-filter:blur(5px)
}
.lightbox-toolbar,.lightbox-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.lightbox-toolbar {
  margin-bottom:12px
}
.lightbox-toolbar p {
  font-size:14px
}
.icon-button {
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:none;
  min-width:44px;
  min-height:44px
}
#lightbox-image {
  width:100%;
  height:auto;
  max-height:calc(95dvh - 150px);
  object-fit:contain
}
.lightbox-bottom {
  margin-top:12px
}
#gallery-count {
  font-size:13px
}
@media(min-width:1600px) {
  .hero-art {
    height:520px
  }
  .hero {
    min-height:690px
  }
}
@media(max-width:1100px) {
  .header-inner {
    gap:20px
  }
  .site-header nav {
    gap:16px
  }
  .site-header nav a:first-child {
    display:none
  }
  .header-download {
    padding-inline:14px
  }
  .hero {
    min-height:580px
  }
  .hero-art {
    height:410px
  }
  .hero h1 {
    font-size:60px
  }
  .origin-panel {
    gap:36px
  }
  .origin-copy h3 {
    font-size:40px
  }
  .origin-art {
    height:410px
  }
  .origin-art img {
    max-height:360px
  }
  .download-section {
    gap:40px
  }
  .requirements {
    padding-left:40px
  }
}
@media(max-width:800px) {
  html {
    scroll-padding-top:24px
  }
  .container {
    width:calc(100% - 48px)
  }
  .header-inner {
    height:72px;
    gap:18px
  }
  .site-header nav {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--bg);
    padding:16px 24px 24px;
    border-bottom:1px solid var(--line)
  }
  .site-header nav.is-open {
    display:flex;
    flex-direction:column;
    gap:0
  }
  .site-header nav a:first-child {
    display:block
  }
  .site-header nav a {
    padding:12px
  }
  .menu-toggle {
    display:flex;
    margin-left:auto;
    order:4
  }
  .wordmark {
    font-size:28px
  }
  .motion-toggle {
    margin-left:auto
  }
  .hero {
    min-height:auto;
    gap:16px;
    padding-block:48px 28px;
    grid-template-columns:1fr
  }
  .hero-copy {
    max-width:620px
  }
  .hero h1 {
    font-size:clamp(42px,8vw,64px)
  }
  .hero-slogan {
    font-size:30px
  }
  .hero-description {
    margin-top:22px;
    font-size:15px
  }
  .hero-art {
    width:100%;
    max-width:520px;
    justify-self:center;
    height:340px;
    margin-top:4px
  }
  .hero-archer {
    width:330px;
    left:4%;
    bottom:0;
    max-width:70%
  }
  .hero-warrior {
    width:200px;
    right:0;
    bottom:24px;
    max-width:42%
  }
  .identity-strip {
    font-size:12px;
    gap:14px;
    padding:20px 0;
    text-align:center
  }
  .identity-strip span {
    flex:1
  }
  .identity-strip span+span {
    padding-left:14px
  }
  .section {
    padding-block:64px
  }
  .section-heading {
    display:block;
    margin-bottom:28px
  }
  .section-heading>p {
    max-width:600px;
    margin-top:20px
  }
  .origin-tabs button {
    font-size:16px;
    padding:16px 20px
  }
  .origin-panel {
    grid-template-columns:1fr;
    gap:16px;
    padding-top:20px;
    min-height:0
  }
  .origin-art {
    height:310px
  }
  .origin-art img {
    max-height:300px
  }
  .origin-copy h3 {
    font-size:36px
  }
  .origin-description {
    font-size:16px
  }
  .origin-principle {
    text-align:left
  }
  .gallery {
    padding-block:32px 64px
  }
  .gallery-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .gallery-image img {
    max-height:400px
  }
  .download-section {
    grid-template-columns:1fr;
    gap:40px
  }
  .requirements {
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--line);
    padding-top:36px
  }
  .site-footer {
    flex-wrap:wrap;
    gap:22px
  }
  .site-footer p {
    order:3;
    width:100%
  }
  .lightbox {
    width:calc(100% - 24px);
    padding:10px
  }
  .lightbox-bottom .button {
    padding:10px 12px;
    gap:8px
  }
}
@media(max-width:380px) {
  .container {
    width:calc(100% - 36px)
  }
  .hero h1 {
    font-size:38px
  }
  .hero-slogan {
    font-size:27px
  }
  .hero-art {
    height:290px
  }
  .hero-actions {
    gap:20px
  }
  .hero-actions .button {
    padding-inline:18px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .header-inner {
    gap:10px
  }
  .header-download {
    font-size:12px;
    padding-inline:10px
  }
  .motion-toggle {
    gap:5px
  }
  .motion-toggle>span:first-child {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
  }
  .origin-details>div {
    grid-template-columns:110px 1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .hero-archer,.hero-warrior {
    transform:none!important
  }
}
/* Editorial mechanics sections;
all explanations remain native text. */
.section-intro {
  max-width:920px;
  margin:26px 0 30px
}
.progression {
  border-block:1px solid var(--line)
}
.progress-layout {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  align-items:center;
  gap:52px;
  margin-top:32px
}
.screenshot {
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#070909;
  border:1px solid var(--line)
}
.progress-panels {
  min-height:375px;
  display:grid;
  align-items:center
}
.progress-panels h3 {
  font-size:36px;
  margin-bottom:20px
}
.progress-panels p {
  font-size:15px
}
.state-label {
  color:var(--accent);
  font-size:11px!important;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:16px
}
.mechanic-detail {
  margin-top:16px
}
.progress-panels .small-note {
  font-size:13px;
  margin-top:20px;
  border-top:1px solid var(--line);
  padding-top:16px
}
.progress-extra {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  border-top:1px solid var(--line);
  margin-top:40px;
  padding-top:32px
}
.progress-extra h3 {
  margin-bottom:12px
}
.progress-extra p:not(.state-label) {
  font-size:14px
}
.progress-extra article+article {
  border-left:1px solid var(--line);
  padding-left:48px
}
.combat-layout {
  display:grid;
  grid-template-columns:1.65fr 1fr;
  align-items:start;
  gap:44px
}
.media-slot video {
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#070909;
  border:1px solid var(--line)
}
.classes-take {
  border-top:1px solid var(--line);
  padding-top:32px;
  margin-top:40px
}
.classes-take h3 {
  margin-bottom:24px
}
.classes-take video {
  max-width:900px;
  margin-inline:auto
}
.classes-take figcaption {
  max-width:900px;
  margin-inline:auto;
  margin-top:12px
}
.media-error {
  color:#d1ae80;
  margin-top:12px
}
.tactics {
  border-top:1px solid var(--line)
}
.tactics .section-heading h2 {
  font-size:clamp(30px,2.7vw,42px)
}
.tactics .section-heading>p {
  max-width:340px
}
.execution-types,.tactical-details {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px
}
.execution-types {
  margin-block:48px 40px
}
.execution-types article+article,.tactical-details article+article {
  border-left:1px solid var(--line);
  padding-left:32px
}
.execution-types h3,.tactical-details h3 {
  font-size:23px;
  margin-bottom:18px
}
.execution-types p,.tactical-details p {
  font-size:14px
}
.formation {
  border-block:1px solid #766247;
  padding-block:32px
}
.formation-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.formation-heading h3 {
  font-size:25px;
  max-width:640px
}
.formation-controls {
  display:flex;
  gap:12px;
  flex-shrink:0
}
.formation-controls [aria-pressed=true] {
  border-color:var(--accent);
  background:#b68c5817;
  color:#dfba8a
}
.formation-flow {
  list-style:none;
  margin:36px 0;
  padding:0;
  display:flex;
  gap:48px
}
.formation-flow li {
  position:relative;
  flex:1;
  min-width:0;
  text-align:center;
  border:1px solid #766247;
  padding:16px 10px;
  font:400 16px/1.4 var(--serif)
}
.formation-flow li:not(:last-child):after {
  content:'';
  position:absolute;
  left:100%;
  top:50%;
  width:48px;
  height:1px;
  background:var(--accent)
}
.formation-flow li:not(:last-child):before {
  content:'';
  position:absolute;
  left:calc(100% + 39px);
  top:calc(50% - 4px);
  width:8px;
  height:8px;
  border-top:1px solid var(--accent);
  border-right:1px solid var(--accent);
  transform:rotate(45deg)
}
.formation-flow .enemy {
  border-color:#995b4c
}
.third-ally {
  border-color:#c68c68!important
}
.third-ally span {
  display:block;
  font:400 11px/1.5 var(--sans);
  color:#e0a181
}
.formation[data-allies="3"] .third-ally:after,.formation[data-allies="3"] .third-ally:before {
  display:none
}
.formation[data-allies="3"] .enemy {
  opacity:.45
}
.formation-result {
  color:var(--ink);
  font-size:15px;
  min-height:54px
}
.formation>.small-note {
  margin-top:12px
}
.tactical-details {
  margin-top:40px
}
.development-note {
  font-size:13px;
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-top:36px;
  max-width:1000px
}
details {
  border-block-end:1px solid var(--line)
}
summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  list-style:none;
  cursor:pointer;
  font:400 14px/1.6 var(--sans);
  padding:22px 0
}
summary::-webkit-details-marker {
  display:none
}
summary svg {
  width:17px;
  height:17px;
  color:var(--accent);
  transition:transform .2s
}
details[open]>summary svg {
  transform:rotate(90deg)
}
details>p {
  font-size:14px;
  padding-bottom:22px
}
.requirements>details:first-of-type {
  margin-top:32px;
  border-top:1px solid var(--line)
}
.requirements h3 {
  font-size:28px;
  line-height:1.4
}
.tactical-details details {
  margin-top:12px
}
.tactical-details summary {
  font-size:12px;
  min-height:66px
}
.tactical-details details p {
  font-size:13px
}
.embers {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:3
}
.embers i {
  position:absolute;
  left:calc(8% + var(--i)*9%);
  bottom:5%;
  width:2px;
  height:2px;
  background:#dfaa65;
  border-radius:50%;
  opacity:0
}
.motion-on .scene-active .embers i {
  animation:ember-rise 8s linear infinite;
  animation-delay:calc(var(--i)*-.9s)
}
.motion-on .scene-active .aura {
  animation:aura-breathe 8s ease-in-out infinite alternate
}
.motion-on .origin-art.is-changing img {
  animation:origin-enter .35s ease-out both
}
.motion-on .origin-art.is-changing:before {
  animation:origin-enter .45s ease-out both
}
@keyframes ember-rise {
  0% {
    opacity:0;
    transform:translate(0,0)
  }
  20% {
    opacity:.6
  }
  70% {
    opacity:.3
  }
  100% {
    opacity:0;
    transform:translate(18px,-240px)
  }
}
@keyframes aura-breathe {
  from {
    opacity:.65;
    transform:scale(.97)
  }
  to {
    opacity:1;
    transform:scale(1.04)
  }
}
@keyframes origin-enter {
  from {
    opacity:.2;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
html:not(.motion-on) {
  scroll-behavior:auto
}
@media(max-width:1100px) {
  .progress-layout {
    gap:32px;
    grid-template-columns:1.15fr 1fr
  }
  .progress-panels h3 {
    font-size:30px
  }
  .progress-panels {
    min-height:420px
  }
  .combat-layout {
    gap:28px;
    grid-template-columns:1.4fr 1fr
  }
  .formation-heading {
    align-items:start
  }
  .formation-controls .button {
    padding-inline:16px
  }
  .formation-flow {
    gap:32px
  }
  .formation-flow li:not(:last-child):after {
    width:32px
  }
  .formation-flow li:not(:last-child):before {
    left:calc(100% + 23px)
  }
}
@media(max-width:800px) {
  .progress-layout,.combat-layout {
    grid-template-columns:1fr;
    gap:28px
  }
  .progress-panels {
    min-height:340px
  }
  .progress-tabs button {
    font-size:17px;
    padding:16px 12px
  }
  .progress-extra {
    gap:28px
  }
  .progress-extra article+article {
    padding-left:24px
  }
  .execution-types,.tactical-details {
    grid-template-columns:1fr;
    gap:28px
  }
  .execution-types article+article,.tactical-details article+article {
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--line);
    padding-top:24px
  }
  .tactics .section-heading>p {
    max-width:600px
  }
  .formation-heading {
    display:block
  }
  .formation-controls {
    margin-top:24px
  }
  .formation-flow {
    gap:22px;
    flex-direction:column;
    align-items:center;
    margin-block:30px
  }
  .formation-flow li {
    width:190px;
    flex:auto;
    min-height:52px
  }
  .formation-flow li:not(:last-child):after {
    left:50%;
    top:100%;
    width:1px;
    height:22px
  }
  .formation-flow li:not(:last-child):before {
    left:calc(50% - 4px);
    top:calc(100% + 13px);
    transform:rotate(135deg)
  }
  .formation-result {
    min-height:0
  }
  .formation-heading h3 {
    font-size:23px
  }
  .requirements h3 {
    font-size:26px
  }
  .tactics .section-heading h2 {
    font-size:30px
  }
  .progress-extra {
    grid-template-columns:1fr
  }
  .progress-extra article+article {
    border-left:0;
    padding-left:0;
    padding-top:24px;
    border-top:1px solid var(--line)
  }
}
@media(max-width:800px) {
  .hero-slogan {
    font-size:clamp(24px,7vw,28px)
  }
  .hero-art {
    height:280px;
    overflow:clip
  }
  .hero-actions {
    gap:24px
  }
  .hero-description {
    max-width:500px
  }
  .hero-archer {
    left:0
  }
  .hero-warrior {
    right:0;
    bottom:16px
  }
}
@media(max-width:500px) {
  .header-inner {
    gap:12px
  }
  .header-inner .wordmark {
    font-size:26px
  }
  .motion-toggle>span:first-child {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
  }
  .header-download {
    padding-inline:12px;
    font-size:12px
  }
  .menu-toggle {
    padding:8px
  }
  .hero-art {
    height:260px
  }
  .hero-actions .button {
    padding-inline:20px
  }
  .hero-actions .text-link {
    font-size:13px
  }
}
@media(max-width:380px) {
  .header-inner {
    gap:8px
  }
  .hero-art {
    height:225px
  }
  .hero-actions {
    gap:18px
  }
  .hero-actions .button {
    padding-inline:16px
  }
  .hero-actions .text-link {
    font-size:12px
  }
}

/* SITE-02: illustrated explanations, with the existing editorial system. */
.learning-story,
.mechanic-scene {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 60px;
  margin-block: 42px;
}
.learning-copy > p + p,
.mechanic-scene-copy > p + p {
  margin-top: 18px;
}
.learning-copy .learning-lead {
  color: var(--ink);
  font-size: 23px;
  line-height: 1.6;
}
.learning-copy strong {
  color: var(--ink);
  font-weight: 600;
}
.concept-figure { min-width: 0; }
.concept-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.concept-figure figcaption {
  font-size: 12px;
  margin-top: 12px;
}
.learning-pillars {
  margin: 26px 0 0;
  border-block: 1px solid var(--line);
}
.learning-pillars > div {
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 20px;
  padding-block: 13px;
}
.learning-pillars > div + div { border-top: 1px solid var(--line); }
.learning-pillars dt { color: var(--accent); }
.learning-pillars dd { color: var(--ink); font-size: 13px; }
.learning-example {
  border-block: 1px solid #766247;
  padding-block: 32px;
  margin-block: 48px 64px;
}
.learning-example-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}
.learning-example-heading h3 { font-size: 29px; }
.learning-example-heading h3 em { display: block; margin-top: 8px; font-size: 1.12em; }
.learning-controls { display: flex; gap: 12px; flex-shrink: 0; }
.learning-controls [aria-pressed="true"] {
  border-color: var(--accent);
  background: #b68c5817;
  color: #dfba8a;
}
.learning-result > p { color: var(--ink); font-size: 16px; }
.learning-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin: 24px 0;
}
.learning-outcomes > div + div { border-left: 1px solid var(--line); padding-left: 30px; }
.learning-outcomes dt { color: var(--accent); margin-bottom: 8px; }
.learning-outcomes dd { font-size: 15px; }
.progress-current-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 24px;
}
.progress-current-heading h3 { font-size: 28px; }
.progress-current-heading p { max-width: 610px; font-size: 14px; }
.mechanic-scene { margin-block: 52px 40px; }
.mechanic-scene-copy h3 { font-size: 40px; margin-bottom: 24px; }
.mechanic-scene-copy h3 em { display: block; font-size: 1.1em; margin-top: 8px; }
.mechanic-scene-copy > p { max-width: 540px; }
.mechanic-scene-copy details { margin-top: 22px; }
.formation-scene { grid-template-columns: 1.1fr 1fr; border-top: 1px solid var(--line); padding-top: 44px; }
.formation-scene h3 { font-size: 30px; }
.illustrated-tactics { gap: 32px; margin-top: 52px; }
.illustrated-tactics article + article { border-left: 0; padding-left: 0; }
.illustrated-tactics article > .state-label { margin-top: 28px; }
.illustrated-tactics h3 { font-size: 25px; line-height: 1.4; }
.illustrated-tactics .concept-figure { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.terrain-rule { display: flex; align-items: center; gap: 14px; padding-block: 4px 24px; font-size: 12px; }
.terrain-rule strong { color: var(--accent); font-weight: 500; }
.push-rule { font-size: 13px; padding-left: 20px; color: var(--muted); }
.push-rule li { margin-bottom: 14px; }
@media (max-width: 1100px) {
  .learning-story, .mechanic-scene { gap: 32px; }
  .learning-copy .learning-lead { font-size: 21px; }
  .learning-copy > p, .mechanic-scene-copy > p { font-size: 15px; }
  .learning-example-heading { align-items: flex-start; }
  .learning-controls { flex-direction: column; }
  .learning-example-heading h3 { font-size: 27px; }
  .learning-pillars > div { grid-template-columns: 125px 1fr; gap: 12px; }
  .mechanic-scene-copy h3 { font-size: 34px; }
  .formation-scene h3 { font-size: 27px; }
}
@media (max-width: 800px) {
  .learning-story, .mechanic-scene { grid-template-columns: 1fr; gap: 28px; margin-block: 30px; }
  .learning-copy .learning-lead { font-size: 20px; }
  .learning-example { margin-block: 36px 48px; padding-block: 28px; }
  .learning-example-heading { display: block; }
  .learning-controls { flex-direction: row; margin-top: 24px; }
  .learning-controls .button { flex: 1; padding: 12px 14px; font-size: 12px; }
  .learning-outcomes { grid-template-columns: 1fr; gap: 16px; }
  .learning-outcomes > div + div { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .learning-result > p { font-size: 15px; }
  .progress-current-heading { display: block; }
  .progress-current-heading p { margin-top: 18px; }
  .mechanic-scene-copy h3 { font-size: 32px; }
  .formation-scene { padding-top: 32px; }
  .formation-scene .concept-figure { order: 2; }
  .illustrated-tactics { gap: 40px; }
  .illustrated-tactics article + article { padding-top: 28px; border-top: 1px solid var(--line); }
  .illustrated-tactics .concept-figure { border-bottom: 0; padding-bottom: 0; }
  .illustrated-tactics h3 { font-size: 25px; }
}