/* Warhammer hub theme. Article layouts keep their own reading styles. */
.wh-home {
  --ink:#182322;
  --muted:#56615a;
  --line:#d5d8ca;
  --gold:#d9bd79;
  --paper:#f2f1e8;
  --body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 var(--body)
}
.wh-home * {
  box-sizing:border-box
}
.wh-home a {
  color:inherit;
  text-underline-offset:4px
}
.wh-home a:focus-visible,.wh-home summary:focus-visible {
  outline:3px solid #a77820;
  outline-offset:5px
}
.wh-home img {
  display:block;
  max-width:100%
}
.wh-home .wrap {
  width:min(1280px,calc(100% - 80px));
  margin:auto
}
.wh-home h1,.wh-home h2,.wh-home h3 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  line-height:1.12
}
.wh-home h2 {
  font-size:clamp(1.8rem,3vw,2.5rem);
  margin:0
}
.wh-home h3 {
  margin:0;
  font-size:1.65rem
}
.wh-home p {
  margin:0 0 1em
}
.wh-home .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
.wh-home .skip {
  position:absolute;
  top:-100px;
  left:16px;
  z-index:10;
  padding:12px;
  background:white
}
.wh-home .skip:focus {
  top:10px
}
.wh-home .top {
  background:#141e1d;
  color:#f4f1e5;
  border-bottom:1px solid #39443c
}
.wh-home .top>.wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:92px
}
.wh-home .brand {
  text-decoration:none;
  font-family:Georgia,serif;
  font-size:23px;
  line-height:1.2
}
.wh-home .brand small {
  display:block;
  font:11px/1.6 var(--body);
  color:#b6bcb0;
  letter-spacing:.08em;
  margin-top:4px
}
.wh-home .desktop-nav {
  display:flex;
  gap:30px
}
.wh-home .desktop-nav a {
  text-decoration:none;
  font-size:14px;
  padding:15px 0
}
.wh-home .desktop-nav a:hover {
  color:var(--gold)
}
.wh-home .mobile-nav {
  display:none
}
.wh-home .hero {
  background:#1b2826;
  color:#f5f1e2;
  border-bottom:5px solid var(--gold);
  overflow:hidden
}
.wh-home .hero-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:52px;
  align-items:center;
  padding-block:58px 64px
}
.wh-home .eyebrow {
  color:var(--gold);
  font-size:11px;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:650;
  margin-bottom:20px
}
.wh-home h1 {
  font-size:clamp(3.2rem,5.4vw,5rem);
  letter-spacing:-.045em;
  margin:0 0 24px
}
.wh-home .hero-description {
  max-width:45ch;
  color:#d2d7cb;
  font-size:16px;
  line-height:1.75
}
.wh-home .release-line {
  font-size:12px;
  color:#c0c8b7;
  margin:24px 0 18px
}
.wh-home .hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.wh-home .button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  text-decoration:none;
  font-weight:650;
  font-size:13px;
  padding:13px 16px;
  min-height:48px
}
.wh-home .primary {
  background:var(--gold);
  color:#1b2826;
  border:1px solid var(--gold)
}
.wh-home .secondary {
  border:1px solid #718074;
  color:#f2f0e5
}
.wh-home .button:hover {
  background:#ecdaa8;
  color:#172320
}
.wh-home .platform-link {
  display:inline-block;
  margin-top:19px;
  color:#ced4c5;
  font-size:12px
}
.wh-home .hero-image {
  margin:0;
  min-width:0;
  position:relative;
  padding:12px;
  border:1px solid #5c6855;
  background:#111b1a;
  transform:rotate(-1deg)
}
.wh-home .hero-image img {
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center;
  image-rendering:auto
}
.wh-home .hero-image figcaption {
  font-size:10px;
  color:#b4bdad;
  margin-top:8px;
  line-height:1.4
}
.wh-home .hub-content {
  padding-top:60px
}
.wh-home .section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:25px
}
.wh-home .section-heading>p {
  color:var(--muted);
  font-size:14px;
  margin:0;
  max-width:38ch
}
.wh-home .featured-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:22px
}
.wh-home .feature-card {
  text-decoration:none;
  display:flex;
  flex-direction:column;
  padding:30px;
  border:1px solid var(--line)
}
.wh-home .feature-card p {
  font-size:14px;
  max-width:48ch;
  margin-top:16px;
  color:var(--muted)
}
.wh-home .feature-card .card-kicker {
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin:0 0 14px;
  color:#53634e;
  font-weight:700
}
.wh-home .evolution-card {
  background:#fffef7;
  display:grid;
  grid-template-columns:1fr 39%;
  gap:24px;
  align-items:center
}
.wh-home .evolution-card img {
  height:100%;
  min-height:220px;
  object-fit:cover;
  object-position:47% center
}
.wh-home .coop-card {
  background:#dfe4d5;
  border-top:4px solid #718064
}
.wh-home .card-action {
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  font-weight:700;
  margin-top:24px
}
.wh-home .coop-card .card-action {
  margin-top:auto;
  padding-top:16px
}
.wh-home .feature-card:hover,.wh-home .task-card:hover {
  border-color:#7b7854;
  box-shadow:0 5px 18px #18232212
}
.wh-home .progression-section {
  padding-block:54px
}
.wh-home .task-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.wh-home .task-card {
  display:flex;
  flex-direction:column;
  text-decoration:none;
  padding:28px;
  background:#fffef7;
  border:1px solid var(--line)
}
.wh-home .task-card h3 {
  font-size:1.45rem
}
.wh-home .task-card p {
  font-size:14px;
  color:var(--muted);
  margin:17px 0 0
}
.wh-home .task-card .card-action {
  margin-top:auto;
  padding-top:26px
}
.wh-home .access-section {
  border-top:1px solid #a8b29d;
  padding-block:40px
}
.wh-home .access-copy {
  max-width:88ch;
  font-size:14px
}
.wh-home .access-copy a,.wh-home .help-body a {
  color:#3a583b
}
.wh-home .help-section {
  padding-bottom:42px
}
.wh-home .help-item {
  border-top:1px solid var(--line);
  scroll-margin-top:24px
}
.wh-home .help-item:last-child {
  border-bottom:1px solid var(--line)
}
.wh-home .help-item summary {
  cursor:pointer;
  padding:20px 4px;
  font-size:15px;
  font-weight:600
}
.wh-home .help-body {
  max-width:88ch;
  font-size:14px;
  padding:0 24px 15px
}
.wh-home .help-body h3 {
  font-size:1.3rem;
  margin-block:22px 12px
}
.wh-home .editorial-note {
  display:flex;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
  padding-block:24px 35px;
  font-size:11px;
  color:var(--muted)
}
.wh-home .editorial-note p {
  max-width:88ch;
  margin:0
}
.wh-home .editorial-note>a {
  white-space:nowrap
}
.wh-home footer {
  background:#141e1d;
  color:#b9c2b2;
  padding:28px 0;
  font-size:12px
}
.wh-home footer a {
  margin-right:18px
}
.wh-home footer p {
  margin-bottom:12px
}
@media(min-width:1600px) {
  .wh-home .wrap {
    width:min(1420px,calc(100% - 120px))
  }
  .wh-home .hero-grid {
    gap:80px;
    padding-block:76px
  }
  .wh-home h1 {
    font-size:5.5rem
  }
}
@media(max-width:1100px) {
  .wh-home .wrap {
    width:calc(100% - 48px)
  }
  .wh-home .hero-grid {
    gap:26px
  }
  .wh-home .evolution-card {
    grid-template-columns:1fr
  }
  .wh-home .evolution-card img {
    height:150px;
    min-height:0;
    width:100%;
    object-position:center 52%
  }
  .wh-home .desktop-nav {
    gap:20px
  }
}
@media(max-width:900px) {
  .wh-home .desktop-nav {
    display:none
  }
  .wh-home .mobile-nav {
    display:block;
    position:relative
  }
  .wh-home .mobile-nav summary {
    cursor:pointer;
    padding:12px 8px;
    font-size:14px
  }
  .wh-home .mobile-links {
    position:absolute;
    right:0;
    top:100%;
    display:grid;
    min-width:210px;
    background:#192824;
    border:1px solid #68745f;
    padding:12px;
    z-index:5
  }
  .wh-home .mobile-links a {
    padding:12px;
    text-decoration:none
  }
  .wh-home .hero-grid {
    grid-template-columns:1fr;
    gap:30px;
    padding-block:35px
  }
  .wh-home .hero-copy {
    max-width:650px
  }
  .wh-home h1 br {
    display:none
  }
  .wh-home h1 {
    font-size:3.8rem
  }
  .wh-home .hero-image {
    transform:none;
    max-width:720px;
    width:100%
  }
  .wh-home .hero-image img {
    aspect-ratio:2.2;
    object-position:center 45%
  }
  .wh-home .featured-grid {
    grid-template-columns:1fr 1fr
  }
  .wh-home .task-grid {
    gap:14px
  }
  .wh-home .task-card {
    padding:22px
  }
  .wh-home .section-heading {
    align-items:start;
    flex-direction:column;
    gap:12px
  }
}
@media(max-width:600px) {
  .wh-home .wrap {
    width:calc(100% - 36px)
  }
  .wh-home .top>.wrap {
    min-height:76px;
    gap:12px
  }
  .wh-home .brand {
    font-size:19px
  }
  .wh-home .brand small {
    font-size:9px
  }
  .wh-home .hero-grid {
    padding-block:28px;
    gap:25px
  }
  .wh-home .eyebrow {
    margin-bottom:13px;
    font-size:10px
  }
  .wh-home h1 {
    font-size:3.25rem;
    line-height:1.02;
    margin-bottom:17px
  }
  .wh-home .hero-description {
    font-size:14px;
    line-height:1.7
  }
  .wh-home .release-line {
    margin:18px 0 14px
  }
  .wh-home .hero-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:10px
  }
  .wh-home .button {
    font-size:13px;
    padding:12px 15px
  }
  .wh-home .hero-image {
    padding:7px
  }
  .wh-home .hero-image img {
    aspect-ratio:1.8
  }
  .wh-home .platform-link {
    margin-top:15px
  }
  .wh-home .hub-content {
    padding-top:34px
  }
  .wh-home .featured-grid,.wh-home .task-grid {
    grid-template-columns:1fr
  }
  .wh-home .feature-card,.wh-home .task-card {
    padding:24px
  }
  .wh-home .evolution-card {
    grid-template-columns:1fr
  }
  .wh-home .evolution-card img {
    height:155px
  }
  .wh-home .coop-card .card-action {
    padding-top:0;
    margin-top:12px
  }
  .wh-home .task-card .card-action {
    padding-top:18px
  }
  .wh-home .progression-section {
    padding-block:35px
  }
  .wh-home .access-section {
    padding-block:30px
  }
  .wh-home .help-body {
    padding-inline:4px
  }
  .wh-home .help-item summary {
    font-size:14px;
    padding-block:18px
  }
  .wh-home .editorial-note {
    flex-direction:column;
    gap:12px
  }
  .wh-home footer .wrap {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px
  }
  .wh-home footer a {
    margin-right:0
  }
  .wh-home footer p {
    width:100%
  }
}
.wh-home footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px
}
.wh-home footer nav a {
  margin-right:0
}