<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>War Dungeon — Battle on Your Tabletop. Crafted on Ours.</title>
<link rel="stylesheet" href="https://use.typekit.net/onl7dxx.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cinzel:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
/* Chromatic tokens — used for accents, type, hairlines, never for surface fills */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--light: #FFFFFF;
--white-dark: #EDEDED;
/* Surface + text semantics — Editorial Restraint pins page to rodeo throughout */
--bg-page: var(--rodeo);
--bg-card: transparent;
--text-on-light: var(--caput);
--text-on-page: var(--caput);
--text-eyebrow: var(--sienna);
--hairline: var(--caput);
--cta-underline: var(--sienna);
/* Typography */
--font-display: "modesto-condensed", "Cinzel", "Playfair Display", Georgia, serif;
--font-body: "palatino-linotype", "Palatino Linotype", "EB Garamond", Palatino, Georgia, serif;
/* Type scale (from styleguide) */
--type-display: 96px;
--type-h1: 64px;
--type-h2: 48px;
--type-h3: 36px;
--type-h4: 24px;
--type-body-lg: 22px;
--type-body: 18px;
--type-body-sm: 16px;
--type-eyebrow: 13px;
--type-micro: 12px;
/* Spacing scale (px) */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
/* Radii */
--radius-sm: 4px;
--radius-md: 7px;
/* Layout */
--container-default: 1200px;
--container-wide: 1440px;
--container-narrow: 720px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.65;
color: var(--text-on-page);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container {
max-width: var(--container-default);
margin: 0 auto;
padding: 0 var(--s-5);
}
.container--wide { max-width: var(--container-wide); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ============================================================ */
/* BLOCK: eyebrow — small-caps palatino with wide tracking */
/* ============================================================ */
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-eyebrow);
font-weight: 600;
margin: 0;
}
/* ============================================================ */
/* BLOCK: text-cta — the editorial-restraint signature */
/* Large modesto-condensed text with 2px sienna underline */
/* ============================================================ */
.text-cta {
display: inline-block;
font-family: var(--font-display);
font-size: var(--type-h4);
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--caput);
padding-bottom: 6px;
border-bottom: 2px solid var(--cta-underline);
transition: color 0.15s ease, transform 0.15s ease;
}
.text-cta:hover { color: var(--sienna); }
.text-cta--sm {
font-size: var(--type-body);
letter-spacing: 0.08em;
padding-bottom: 4px;
}
/* ============================================================ */
/* BLOCK: hairline-divider */
/* ============================================================ */
.hairline {
border: 0;
border-top: 1px solid var(--hairline);
margin: 0;
}
/* ============================================================ */
/* SECTION rhythm */
/* ============================================================ */
.section { padding: var(--s-9) 0; }
.section--tight { padding: var(--s-8) 0; }
/* ============================================================ */
/* BLOCK: section-head — eyebrow + display title + lede */
/* ============================================================ */
.section-head {
margin-bottom: var(--s-8);
max-width: 880px;
}
.section-head__eyebrow { margin-bottom: var(--s-4); }
.section-head__title {
font-family: var(--font-display);
font-size: 56px;
line-height: 1.1;
color: var(--caput);
margin: 0 0 var(--s-4);
font-weight: 500;
}
.section-head__title em { color: var(--sienna); font-style: normal; }
.section-head__lede {
font-family: var(--font-body);
font-size: var(--type-body-lg);
line-height: 1.6;
color: var(--caput);
max-width: 720px;
margin: 0;
}
/* ============================================================ */
/* BLOCK: announcement-bar */
/* ============================================================ */
.announcement-bar {
background: var(--bg-page);
border-bottom: 1px solid var(--hairline);
padding: var(--s-3) var(--s-5);
text-align: center;
font-family: var(--font-display);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--caput);
}
.announcement-bar__list {
display: inline-flex;
gap: var(--s-5);
list-style: none;
margin: 0;
padding: 0;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.announcement-bar__sep {
display: inline-block;
width: 4px;
height: 4px;
background: var(--sienna);
border-radius: 50%;
}
/* ============================================================ */
/* BLOCK: site-header */
/* ============================================================ */
.site-header {
background: var(--bg-page);
border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-7);
padding: var(--s-5) 0;
}
.site-header__wordmark {
font-family: var(--font-display);
font-size: 30px;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--caput);
font-weight: 500;
}
.site-header__wordmark em {
color: var(--sienna);
font-style: normal;
padding: 0 var(--s-1);
}
.site-header__nav {
display: flex;
gap: var(--s-6);
list-style: none;
margin: 0;
padding: 0;
}
.site-header__nav a {
font-family: var(--font-display);
font-size: var(--type-body-sm);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--caput);
padding-bottom: 2px;
border-bottom: 2px solid transparent;
transition: border-color 0.15s ease, color 0.15s ease;
}
.site-header__nav a:hover {
color: var(--sienna);
border-bottom-color: var(--sienna);
}
.site-header__util {
display: flex;
gap: var(--s-5);
align-items: center;
font-family: var(--font-display);
font-size: var(--type-body-sm);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--caput);
}
.site-header__util a:hover { color: var(--sienna); }
.site-header__basket {
border-bottom: 2px solid var(--sienna);
padding-bottom: 2px;
}
.site-header__basket-points {
font-size: var(--type-micro);
letter-spacing: 0.16em;
color: var(--sienna);
margin-left: var(--s-2);
}
/* ============================================================ */
/* BLOCK: editorial-hero */
/* ============================================================ */
.editorial-hero {
padding: var(--s-10) 0 var(--s-9);
}
.editorial-hero__head { max-width: 920px; }
.editorial-hero__eyebrow { margin-bottom: var(--s-5); }
.editorial-hero__title {
font-family: var(--font-display);
font-size: 88px;
line-height: 1;
letter-spacing: 0;
color: var(--caput);
margin: 0 0 var(--s-6);
font-weight: 500;
}
.editorial-hero__title em {
color: var(--sienna);
font-style: normal;
}
.editorial-hero__subhead {
font-family: var(--font-body);
font-size: var(--type-body-lg);
line-height: 1.65;
color: var(--caput);
max-width: 640px;
margin: 0 0 var(--s-7);
}
.editorial-hero__actions {
display: flex;
gap: var(--s-7);
align-items: center;
margin-bottom: var(--s-9);
flex-wrap: wrap;
}
.editorial-hero__image {
position: relative;
width: 100%;
aspect-ratio: 21 / 9;
overflow: hidden;
margin: 0;
}
.editorial-hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85) contrast(1.02);
}
.editorial-hero__caption {
margin-top: var(--s-3);
font-family: var(--font-body);
font-style: italic;
font-size: var(--type-body-sm);
color: var(--caput);
opacity: 0.75;
max-width: 720px;
}
/* ============================================================ */
/* BLOCK: trust-strip */
/* ============================================================ */
.trust-strip {
padding: var(--s-7) 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.trust-strip__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.trust-strip__cell {
padding: 0 var(--s-6);
text-align: left;
border-right: 1px solid var(--hairline);
}
.trust-strip__cell:first-child { padding-left: 0; }
.trust-strip__cell:last-child { border-right: 0; padding-right: 0; }
.trust-strip__label {
font-family: var(--font-display);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
margin: 0 0 var(--s-2);
}
.trust-strip__body {
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.55;
color: var(--caput);
margin: 0;
}
/* ============================================================ */
/* BLOCK: tool-card */
/* ============================================================ */
.tools-teaser__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-7);
}
.tool-card {
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
background: transparent;
padding: var(--s-7);
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.tool-card__image {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-sm);
margin: 0;
}
.tool-card__image img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.85);
}
.tool-card__status {
font-family: var(--font-display);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
margin: 0;
}
.tool-card__status--soon { color: var(--caput); opacity: 0.7; }
.tool-card__title {
font-family: var(--font-display);
font-size: 40px;
line-height: 1.1;
color: var(--caput);
margin: 0;
font-weight: 500;
}
.tool-card__body {
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.65;
color: var(--caput);
margin: 0;
}
.tool-card__cta { margin-top: auto; }
/* ============================================================ */
/* BLOCK: category-card */
/* ============================================================ */
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
}
.category-card {
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
background: transparent;
padding: var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.category-card__image {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-sm);
margin: 0;
}
.category-card__image img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.85);
}
.category-card__eyebrow { margin-top: var(--s-3); }
.category-card__title {
font-family: var(--font-display);
font-size: 30px;
line-height: 1.1;
color: var(--caput);
margin: 0;
font-weight: 500;
}
.category-card__body {
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.55;
color: var(--caput);
margin: 0;
}
.category-card__cta { margin-top: var(--s-3); }
/* ============================================================ */
/* BLOCK: product-card */
/* ============================================================ */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-6);
}
.product-card {
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
background: transparent;
padding: var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-3);
position: relative;
}
.product-card__image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--rodeo-light);
margin: 0;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__points {
position: absolute;
top: calc(var(--s-5) + var(--s-3));
right: calc(var(--s-5) + var(--s-3));
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
padding: 4px 10px;
border: 1px solid var(--sienna);
border-radius: 999px;
background: var(--rodeo);
}
.product-card__cat {
font-family: var(--font-body);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
margin: var(--s-3) 0 0;
font-weight: 600;
}
.product-card__title {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.2;
color: var(--caput);
margin: 0;
font-weight: 500;
}
.product-card__rating {
font-family: var(--font-body);
font-size: var(--type-body-sm);
color: var(--caput);
margin: 0;
letter-spacing: 0.04em;
}
.product-card__rating-stars { color: var(--sienna); letter-spacing: 0.08em; }
.product-card__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: auto;
padding-top: var(--s-3);
border-top: 1px solid var(--hairline);
}
.product-card__price {
font-family: var(--font-display);
font-size: var(--type-h4);
color: var(--caput);
margin: 0;
font-weight: 500;
}
/* ============================================================ */
/* BLOCK: guide-card */
/* ============================================================ */
.guide-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-7);
}
.guide-card {
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
background: transparent;
display: flex;
flex-direction: column;
}
.guide-card__image {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
border-bottom: 1px solid var(--hairline);
border-radius: var(--radius-md) var(--radius-md) 0 0;
margin: 0;
}
.guide-card__image img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.85);
}
.guide-card__inner {
padding: var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-3);
flex: 1;
}
.guide-card__meta {
display: flex;
gap: var(--s-4);
align-items: center;
font-family: var(--font-display);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.guide-card__difficulty { color: var(--sienna); }
.guide-card__time { color: var(--caput); opacity: 0.7; }
.guide-card__title {
font-family: var(--font-display);
font-size: 28px;
line-height: 1.15;
color: var(--caput);
margin: 0;
font-weight: 500;
}
.guide-card__excerpt {
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.6;
color: var(--caput);
margin: 0;
}
.guide-card__cta { margin-top: auto; padding-top: var(--s-4); }
/* ============================================================ */
/* BLOCK: creator-spotlight */
/* ============================================================ */
.creator-spotlight {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--s-8);
align-items: start;
border: 1px solid var(--hairline);
border-radius: var(--radius-md);
padding: var(--s-7);
}
.creator-spotlight__avatar {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
border: 1px solid var(--hairline);
margin: 0;
}
.creator-spotlight__avatar img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.85);
}
.creator-spotlight__name {
font-family: var(--font-display);
font-size: 44px;
line-height: 1.05;
color: var(--caput);
margin: var(--s-3) 0 var(--s-4);
font-weight: 500;
}
.creator-spotlight__tags {
list-style: none;
margin: 0 0 var(--s-5);
padding: 0;
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
}
.creator-spotlight__tag {
font-family: var(--font-display);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
padding: 4px 10px;
border: 1px solid var(--sienna);
border-radius: 999px;
}
.creator-spotlight__body {
font-family: var(--font-body);
font-size: var(--type-body-lg);
line-height: 1.65;
color: var(--caput);
margin: 0 0 var(--s-5);
}
/* ============================================================ */
/* BLOCK: creator-thumb-strip + creator-thumb */
/* ============================================================ */
.creator-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s-5);
margin-top: var(--s-7);
}
.creator-thumb { text-align: center; }
.creator-thumb__avatar {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
border: 1px solid var(--hairline);
margin: 0 0 var(--s-3);
}
.creator-thumb__avatar img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.85);
}
.creator-thumb__name {
font-family: var(--font-display);
font-size: var(--type-body);
letter-spacing: 0.04em;
color: var(--caput);
margin: 0;
font-weight: 500;
}
.creator-thumb__tag {
font-family: var(--font-body);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
margin: var(--s-1) 0 0;
}
/* ============================================================ */
/* BLOCK: painting-gallery + painting-tile */
/* ============================================================ */
.painting-gallery {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 180px;
gap: var(--s-3);
}
.painting-tile {
overflow: hidden;
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
position: relative;
display: block;
}
.painting-tile img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.85);
transition: transform 0.4s ease;
}
.painting-tile:hover img { transform: scale(1.03); }
.painting-tile--tall { grid-row: span 2; }
.painting-tile--wide { grid-column: span 2; }
.painting-tile__caption {
position: absolute;
bottom: 0; left: 0; right: 0;
font-family: var(--font-body);
font-style: italic;
font-size: var(--type-eyebrow);
letter-spacing: 0.04em;
color: var(--light);
padding: var(--s-3) var(--s-4);
background: rgba(27,19,20,0.65);
margin: 0;
}
.painting-gallery__cta {
text-align: center;
margin-top: var(--s-7);
}
/* ============================================================ */
/* BLOCK: loyalty-strip */
/* ============================================================ */
.loyalty-strip {
text-align: center;
padding: var(--s-9) 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.loyalty-strip__eyebrow { margin-bottom: var(--s-4); }
.loyalty-strip__title {
font-family: var(--font-display);
font-size: 64px;
line-height: 1.05;
color: var(--caput);
margin: 0 0 var(--s-5);
font-weight: 500;
}
.loyalty-strip__title em {
color: var(--sienna);
font-style: normal;
}
.loyalty-strip__body {
font-family: var(--font-body);
font-size: var(--type-body-lg);
line-height: 1.6;
color: var(--caput);
max-width: 640px;
margin: 0 auto var(--s-7);
}
.loyalty-strip__brands {
display: flex;
justify-content: center;
gap: var(--s-7);
margin: 0 0 var(--s-7);
list-style: none;
padding: 0;
flex-wrap: wrap;
}
.loyalty-strip__brand {
font-family: var(--font-display);
font-size: var(--type-h4);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--caput);
}
.loyalty-strip__brand--current {
color: var(--sienna);
border-bottom: 2px solid var(--sienna);
padding-bottom: 4px;
}
/* ============================================================ */
/* BLOCK: newsletter-form */
/* ============================================================ */
.newsletter {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.newsletter__eyebrow { margin-bottom: var(--s-4); }
.newsletter__title {
font-family: var(--font-display);
font-size: 56px;
line-height: 1.05;
color: var(--caput);
margin: 0 0 var(--s-4);
font-weight: 500;
}
.newsletter__body {
font-family: var(--font-body);
font-size: var(--type-body-lg);
line-height: 1.6;
color: var(--caput);
margin: 0 0 var(--s-6);
}
.newsletter__form {
display: flex;
gap: var(--s-3);
align-items: stretch;
max-width: 520px;
margin: 0 auto;
}
.newsletter__input {
flex: 1;
font-family: var(--font-body);
font-size: var(--type-body);
padding: var(--s-3) var(--s-4);
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
background: transparent;
color: var(--caput);
}
.newsletter__input::placeholder {
color: var(--caput);
opacity: 0.5;
font-style: italic;
}
.newsletter__input:focus {
outline: none;
border-color: var(--sienna);
}
.newsletter__submit {
font-family: var(--font-display);
font-size: var(--type-body);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--caput);
background: transparent;
border: 0;
padding: 0 var(--s-3) 4px;
border-bottom: 2px solid var(--sienna);
cursor: pointer;
transition: color 0.15s ease;
}
.newsletter__submit:hover { color: var(--sienna); }
.newsletter__fineprint {
font-family: var(--font-body);
font-style: italic;
font-size: var(--type-eyebrow);
letter-spacing: 0.04em;
color: var(--caput);
opacity: 0.7;
margin: var(--s-4) 0 0;
}
/* ============================================================ */
/* BLOCK: site-footer */
/* ============================================================ */
.site-footer {
border-top: 1px solid var(--hairline);
padding-top: var(--s-9);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--s-7);
padding-bottom: var(--s-9);
}
.footer-col__title {
font-family: var(--font-display);
font-size: var(--type-body);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
margin: 0 0 var(--s-5);
font-weight: 600;
}
.footer-col__list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.footer-col__list a {
font-family: var(--font-body);
font-size: var(--type-body);
color: var(--caput);
transition: color 0.15s ease;
}
.footer-col__list a:hover { color: var(--sienna); }
.footer-col__sister {
margin-top: var(--s-5);
padding-top: var(--s-4);
border-top: 1px solid var(--hairline);
font-family: var(--font-body);
font-style: italic;
font-size: var(--type-body-sm);
color: var(--caput);
line-height: 1.55;
}
.footer-col__sister strong {
font-style: normal;
font-family: var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: var(--type-eyebrow);
color: var(--sienna);
display: block;
margin-bottom: var(--s-2);
}
.footer-base {
border-top: 1px solid var(--hairline);
padding: var(--s-5) 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--s-4);
font-family: var(--font-body);
font-size: var(--type-body-sm);
color: var(--caput);
}
.footer-base p { margin: 0; }
.footer-base a { border-bottom: 1px solid transparent; }
.footer-base a:hover { border-bottom-color: var(--sienna); color: var(--sienna); }
.footer-base__icons {
display: flex;
gap: var(--s-4);
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-display);
font-size: var(--type-eyebrow);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--caput);
opacity: 0.7;
}
.footer-base__icons li {
padding: 2px 8px;
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
}
.footer-base__nerdworks {
font-family: var(--font-display);
font-size: var(--type-eyebrow);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sienna);
font-weight: 600;
}
/* ============================================================ */
/* Responsive */
/* ============================================================ */
@media (max-width: 1024px) {
.editorial-hero { padding: var(--s-9) 0 var(--s-8); }
.editorial-hero__title { font-size: 64px; }
.section-head__title { font-size: 44px; }
.loyalty-strip__title { font-size: 44px; }
.newsletter__title { font-size: 40px; }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.category-grid { grid-template-columns: repeat(2, 1fr); }
.creator-strip { grid-template-columns: repeat(3, 1fr); }
.site-footer__grid { grid-template-columns: 1fr 1fr; }
.tool-card__title { font-size: 32px; }
}
@media (max-width: 768px) {
.site-header__nav { display: none; }
.site-header__util { gap: var(--s-3); font-size: var(--type-micro); }
.editorial-hero { padding: var(--s-7) 0; }
.editorial-hero__title { font-size: 44px; }
.editorial-hero__actions { gap: var(--s-5); }
.section { padding: var(--s-8) 0; }
.section-head { margin-bottom: var(--s-6); }
.trust-strip__grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.trust-strip__cell {
padding: var(--s-4);
border-right: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.trust-strip__cell:first-child { padding-left: var(--s-4); padding-top: 0; }
.trust-strip__cell:nth-child(even) { border-right: 0; padding-right: var(--s-4); }
.trust-strip__cell:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.tools-teaser__grid { grid-template-columns: 1fr; gap: var(--s-5); }
.guide-grid { grid-template-columns: 1fr; gap: var(--s-6); }
.creator-spotlight { grid-template-columns: 1fr; padding: var(--s-6); gap: var(--s-5); }
.creator-spotlight__avatar { width: 180px; }
.painting-gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 160px;
}
.painting-tile--wide { grid-column: span 2; }
.painting-tile--tall { grid-row: span 1; }
.loyalty-strip__brands { gap: var(--s-5); }
}
@media (max-width: 480px) {
.product-grid { grid-template-columns: 1fr; }
.category-grid { grid-template-columns: 1fr; }
.creator-strip { grid-template-columns: repeat(2, 1fr); }
.newsletter__form { flex-direction: column; gap: var(--s-3); }
.newsletter__submit { padding: var(--s-3) 0; }
.editorial-hero__title { font-size: 36px; }
.section-head__title { font-size: 30px; }
.loyalty-strip__title { font-size: 32px; }
.newsletter__title { font-size: 30px; }
.site-footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
.footer-base { flex-direction: column; align-items: flex-start; }
.editorial-hero__actions { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.text-cta { font-size: 20px; }
.announcement-bar__list { gap: var(--s-3); font-size: 11px; }
}
</style>
</head>
<body>
<!-- ============================================================ -->
<!-- 1. Pre-header announcement bar -->
<!-- ============================================================ -->
<div class="announcement-bar" role="region" aria-label="Announcements">
<ul class="announcement-bar__list">
<li>Free UK Carriage over £75</li>
<li><span class="announcement-bar__sep" aria-hidden="true"></span></li>
<li>New 40K Combat Patrols just landed</li>
<li><span class="announcement-bar__sep" aria-hidden="true"></span></li>
<li>Earn here · Redeem at Nerdworks, ArtSabers, Paragon</li>
</ul>
</div>
<!-- ============================================================ -->
<!-- 2. Global header -->
<!-- ============================================================ -->
<header class="site-header">
<div class="container container--wide">
<div class="site-header__inner">
<a class="site-header__wordmark" href="/">War <em>·</em> Dungeon</a>
<nav aria-label="Primary">
<ul class="site-header__nav">
<li><a href="/warhammer">Warhammer</a></li>
<li><a href="/dungeons-and-dragons">Dungeons & Dragons</a></li>
<li><a href="/tools">Tools</a></li>
<li><a href="/learn">Learn</a></li>
<li><a href="/creators">Creators</a></li>
</ul>
</nav>
<div class="site-header__util">
<a href="/search">Search</a>
<a href="/account">Account</a>
<a href="/wishlist">Wishlist</a>
<a class="site-header__basket" href="/cart">Basket <span class="site-header__basket-points">+ 240 pts</span></a>
</div>
</div>
</div>
</header>
<main>
<!-- ============================================================ -->
<!-- 3. Hero — editorial broadsheet treatment -->
<!-- ============================================================ -->
<section class="editorial-hero">
<div class="container container--wide">
<div class="editorial-hero__head">
<p class="eyebrow editorial-hero__eyebrow">Issue No. VII · Frontier Edition · Spring '26</p>
<h1 class="editorial-hero__title">Battle on your tabletop.<br><em>Crafted</em> on ours.</h1>
<p class="editorial-hero__subhead">A long-keep specialty for Warhammer 40,000, Age of Sigmar, The Old World, and Dungeons & Dragons. Painted minis, primed plastics, sound advice — and a few honest tools to help you field something worth seeing across the table.</p>
<div class="editorial-hero__actions">
<a class="text-cta" href="/tools/army-builder">Build Your Army</a>
<a class="text-cta" href="/shop/new-releases">Shop New Releases</a>
</div>
</div>
<figure class="editorial-hero__image">
<img src="https://picsum.photos/seed/wd-hero-diorama-frontier/1440/620" alt="Painted Warhammer 40,000 diorama lit by warm side-lighting: a Space Marine command squad advances through broken hive-city terrain in low fog." loading="eager">
<figcaption class="editorial-hero__caption">Above — Sergeant Greyhold's command squad, painted at the workbench by candlelight. From a forthcoming Painting Showcase feature.</figcaption>
</figure>
</div>
</section>
<!-- ============================================================ -->
<!-- 4. Trust strip -->
<!-- ============================================================ -->
<section class="trust-strip">
<div class="container container--wide">
<div class="trust-strip__grid">
<div class="trust-strip__cell">
<p class="trust-strip__label">Free Carriage</p>
<p class="trust-strip__body">Posted at no charge across the United Kingdom on every order north of £75.</p>
</div>
<div class="trust-strip__cell">
<p class="trust-strip__label">Thirty Days' Grace</p>
<p class="trust-strip__body">If a pack arrives wrong-rolled, send it back inside thirty days for a full refund.</p>
</div>
<div class="trust-strip__cell">
<p class="trust-strip__label">Four Game Systems</p>
<p class="trust-strip__body">40K · Age of Sigmar · The Old World · Dungeons & Dragons. Stocked deep, known well.</p>
</div>
<div class="trust-strip__cell">
<p class="trust-strip__label">A Nerdworks Brand</p>
<p class="trust-strip__body">Backed by the family of specialty shops kitting out hobbyists since the year aught.</p>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- 5. Tools teaser — Army Builder + Battle Simulator -->
<!-- ============================================================ -->
<section class="section">
<div class="container">
<div class="section-head">
<p class="eyebrow section-head__eyebrow">From The Workbench · Tools</p>
<h2 class="section-head__title">Honest tools for fielding a better army.</h2>
<p class="section-head__lede">No spreadsheets. No half-finished apps. Two tools, both pulled from the workbench by hand, both meant to be used while the glue dries.</p>
</div>
<div class="tools-teaser__grid">
<article class="tool-card">
<figure class="tool-card__image">
<img src="https://picsum.photos/seed/wd-tool-army-builder/720/420" alt="Painted Space Marine command squad arranged on a battle-mat, ready for list construction." loading="lazy">
</figure>
<p class="tool-card__status">Now Open</p>
<h3 class="tool-card__title">Army Builder</h3>
<p class="tool-card__body">Pick a faction, hand-pick the unit roster, watch the points run hot or cold against the legal cap. Save a list, hand it to a friend, take it to the table — or send it straight to the cart, fully kitted out.</p>
<a class="text-cta text-cta--sm tool-card__cta" href="/tools/army-builder">Open the Builder</a>
</article>
<article class="tool-card">
<figure class="tool-card__image">
<img src="https://picsum.photos/seed/wd-tool-battle-sim/720/420" alt="Top-down tabletop view of two painted armies arrayed across modular terrain." loading="lazy">
</figure>
<p class="tool-card__status tool-card__status--soon">In The Forge · Coming Soon</p>
<h3 class="tool-card__title">Battle Simulator</h3>
<p class="tool-card__body">Two armies, one battlefield, the dice in our hands. Pit a saved list against a friend across the wire, or against a generated rival the engine will narrate as the turns roll. Phase Two of the workshop — keep watch.</p>
<a class="text-cta text-cta--sm tool-card__cta" href="/tools/battle-simulator">Ring the bell</a>
</article>
</div>
</div>
</section>
<hr class="hairline">
<!-- ============================================================ -->
<!-- 6. Choose Your Game — 6 category cards -->
<!-- ============================================================ -->
<section class="section">
<div class="container">
<div class="section-head">
<p class="eyebrow section-head__eyebrow">Choose Your Game</p>
<h2 class="section-head__title">Six game systems, one workbench.</h2>
<p class="section-head__lede">Each one a curated mini-homepage, not a shelf of SKUs. Pick the war you want to fight; the maps will follow.</p>
</div>
<div class="category-grid">
<article class="category-card">
<figure class="category-card__image">
<img src="https://picsum.photos/seed/wd-cat-40k/640/480" alt="A Warhammer 40,000 diorama: armoured infantry across the ruined floor of a hive city." loading="lazy">
</figure>
<p class="eyebrow category-card__eyebrow">M41 · The Grimdark</p>
<h3 class="category-card__title">Warhammer 40,000</h3>
<p class="category-card__body">The Imperium, the Xenos, the lost gods — ten thousand years of war, yours to command.</p>
<a class="text-cta text-cta--sm category-card__cta" href="/warhammer/40k">Enter the 41st Millennium</a>
</article>
<article class="category-card">
<figure class="category-card__image">
<img src="https://picsum.photos/seed/wd-cat-aos/640/480" alt="An Age of Sigmar diorama: shining knights advancing through a fog-bound realm." loading="lazy">
</figure>
<p class="eyebrow category-card__eyebrow">The Mortal Realms</p>
<h3 class="category-card__title">Age of Sigmar</h3>
<p class="category-card__body">Storm-cast and sky-borne — fantasy reborn, big-hearted and bold-edged.</p>
<a class="text-cta text-cta--sm category-card__cta" href="/warhammer/age-of-sigmar">Take to the Realms</a>
</article>
<article class="category-card">
<figure class="category-card__image">
<img src="https://picsum.photos/seed/wd-cat-old-world/640/480" alt="The Old World miniatures arrayed for a classic rank-and-file engagement." loading="lazy">
</figure>
<p class="eyebrow category-card__eyebrow">Return of the Old World</p>
<h3 class="category-card__title">The Old World</h3>
<p class="category-card__body">Rank-and-file, banners high — the classic fantasy battlefield is open for business again.</p>
<a class="text-cta text-cta--sm category-card__cta" href="/warhammer/old-world">Form the Ranks</a>
</article>
<article class="category-card">
<figure class="category-card__image">
<img src="https://picsum.photos/seed/wd-cat-dnd/640/480" alt="D&D rulebooks, dice, and a painted dragon mini on a wooden table." loading="lazy">
</figure>
<p class="eyebrow category-card__eyebrow">Adventure Awaits</p>
<h3 class="category-card__title">Dungeons & Dragons</h3>
<p class="category-card__body">Rulebooks, dice that ring true, minis to fight over — everything the table needs.</p>
<a class="text-cta text-cta--sm category-card__cta" href="/dungeons-and-dragons">Roll Initiative</a>
</article>
<article class="category-card">
<figure class="category-card__image">
<img src="https://picsum.photos/seed/wd-cat-hobby/640/480" alt="Hobby supplies — clippers, files, modelling knives — on a paint-spattered workbench." loading="lazy">
</figure>
<p class="eyebrow category-card__eyebrow">The Workbench</p>
<h3 class="category-card__title">Hobby Supplies</h3>
<p class="category-card__body">Clippers, glue, files, brushes, basing material — every tool the workbench asks for.</p>
<a class="text-cta text-cta--sm category-card__cta" href="/hobby-supplies">Stock the Bench</a>
</article>
<article class="category-card">
<figure class="category-card__image">
<img src="https://picsum.photos/seed/wd-cat-paints/640/480" alt="Paint pots arranged on a workbench — the full Citadel range." loading="lazy">
</figure>
<p class="eyebrow category-card__eyebrow">The Paint Rack</p>
<h3 class="category-card__title">Paints</h3>
<p class="category-card__body">Citadel, Vallejo, Army Painter — the full rack, sorted by recipe, never by SKU.</p>
<a class="text-cta text-cta--sm category-card__cta" href="/paints">Open the Rack</a>
</article>
</div>
</div>
</section>
<hr class="hairline">
<!-- ============================================================ -->
<!-- 7. Fan Favourites — 4 products -->
<!-- ============================================================ -->
<section class="section">
<div class="container">
<div class="section-head">
<p class="eyebrow section-head__eyebrow">Fan Favourites · This Fortnight</p>
<h2 class="section-head__title">What the players have been buying.</h2>
<p class="section-head__lede">Four packs out the door more often than the rest — across factions, across systems, across the workbench. Honest sellers.</p>
</div>
<div class="product-grid">
<article class="product-card">
<figure class="product-card__image">
<img src="https://picsum.photos/seed/wd-prod-40k-cp/360/360" alt="Warhammer 40K Space Marines Combat Patrol box on a white background." loading="lazy">
</figure>
<span class="product-card__points">Earn 96 pts</span>
<p class="product-card__cat">Warhammer 40,000</p>
<h3 class="product-card__title">Space Marines Combat Patrol</h3>
<p class="product-card__rating"><span class="product-card__rating-stars">★★★★★</span> 4.9 · 128 reviews</p>
<div class="product-card__meta">
<p class="product-card__price">£96.00</p>
<a class="text-cta text-cta--sm" href="/shop/space-marines-combat-patrol">Quick view</a>
</div>
</article>
<article class="product-card">
<figure class="product-card__image">
<img src="https://picsum.photos/seed/wd-prod-aos-vh/360/360" alt="Age of Sigmar Stormcast Vanguard Hunters box on a white background." loading="lazy">
</figure>
<span class="product-card__points">Earn 64 pts</span>
<p class="product-card__cat">Age of Sigmar</p>
<h3 class="product-card__title">Stormcast Vanguard Hunters</h3>
<p class="product-card__rating"><span class="product-card__rating-stars">★★★★★</span> 4.8 · 74 reviews</p>
<div class="product-card__meta">
<p class="product-card__price">£64.00</p>
<a class="text-cta text-cta--sm" href="/shop/stormcast-vanguard-hunters">Quick view</a>
</div>
</article>
<article class="product-card">
<figure class="product-card__image">
<img src="https://picsum.photos/seed/wd-prod-dnd-phb/360/360" alt="D&D 2024 Player's Handbook cover, white background." loading="lazy">
</figure>
<span class="product-card__points">Earn 50 pts</span>
<p class="product-card__cat">Dungeons & Dragons</p>
<h3 class="product-card__title">Player's Handbook (2024)</h3>
<p class="product-card__rating"><span class="product-card__rating-stars">★★★★½</span> 4.7 · 412 reviews</p>
<div class="product-card__meta">
<p class="product-card__price">£49.99</p>
<a class="text-cta text-cta--sm" href="/shop/dnd-players-handbook-2024">Quick view</a>
</div>
</article>
<article class="product-card">
<figure class="product-card__image">
<img src="https://picsum.photos/seed/wd-prod-paints-essentials/360/360" alt="Citadel Essentials paint set, white background." loading="lazy">
</figure>
<span class="product-card__points">Earn 22 pts</span>
<p class="product-card__cat">Hobby · Paints</p>
<h3 class="product-card__title">Citadel Essentials Paint Set</h3>
<p class="product-card__rating"><span class="product-card__rating-stars">★★★★★</span> 4.9 · 256 reviews</p>
<div class="product-card__meta">
<p class="product-card__price">£22.50</p>
<a class="text-cta text-cta--sm" href="/shop/citadel-essentials">Quick view</a>
</div>
</article>
</div>
</div>
</section>
<hr class="hairline">
<!-- ============================================================ -->
<!-- 8. How-To Guides + Tutorials — 3 editorial cards -->
<!-- ============================================================ -->
<section class="section">
<div class="container">
<div class="section-head">
<p class="eyebrow section-head__eyebrow">Learn · The Long Read</p>
<h2 class="section-head__title">Honest workbench writing.</h2>
<p class="section-head__lede">Painting recipes, rules tutorials, terrain pieces. Written by hobbyists who'd rather show their working than sell you something.</p>
</div>
<div class="guide-grid">
<article class="guide-card">
<figure class="guide-card__image">
<img src="https://picsum.photos/seed/wd-guide-paint/640/420" alt="A painter's hand applying a wash to a Space Marine pauldron under candlelight." loading="lazy">
</figure>
<div class="guide-card__inner">
<div class="guide-card__meta">
<span class="guide-card__difficulty">Beginner</span>
<span class="guide-card__time">12 min read</span>
</div>
<h3 class="guide-card__title">Painting your first Space Marine — the slow, honest way</h3>
<p class="guide-card__excerpt">Five recipes, four brushes, and the patience to let each coat dry before the next. A primer for the hobbyist who's never opened a pot before.</p>
<a class="text-cta text-cta--sm guide-card__cta" href="/learn/painting-first-space-marine">Read Guide</a>
</div>
</article>
<article class="guide-card">
<figure class="guide-card__image">
<img src="https://picsum.photos/seed/wd-guide-rules/640/420" alt="A 40K rulebook open on a table beside dice and a measuring stick." loading="lazy">
</figure>
<div class="guide-card__inner">
<div class="guide-card__meta">
<span class="guide-card__difficulty">Intermediate</span>
<span class="guide-card__time">18 min watch</span>
</div>
<h3 class="guide-card__title">10th Ed. 40K — movement, charges, and not losing to a Knight</h3>
<p class="guide-card__excerpt">A practical walk through the rules-as-played, with a few honest tactics worth knowing before you take a list down to the local tournament.</p>
<a class="text-cta text-cta--sm guide-card__cta" href="/learn/40k-10th-rules-tutorial">Watch Tutorial</a>
</div>
</article>
<article class="guide-card">
<figure class="guide-card__image">
<img src="https://picsum.photos/seed/wd-guide-terrain/640/420" alt="A hand-built ruined-hive terrain piece in progress on a workbench." loading="lazy">
</figure>
<div class="guide-card__inner">
<div class="guide-card__meta">
<span class="guide-card__difficulty">Advanced</span>
<span class="guide-card__time">26 min read</span>
</div>
<h3 class="guide-card__title">Building a ruined hive-block in a weekend — foam, plaster, patience</h3>
<p class="guide-card__excerpt">A piece of terrain you can walk away from at midnight and still come back to on Sunday. Tools, materials, and a few honest shortcuts.</p>
<a class="text-cta text-cta--sm guide-card__cta" href="/learn/hive-block-terrain">Read Guide</a>
</div>
</article>
</div>
</div>
</section>
<hr class="hairline">
<!-- ============================================================ -->
<!-- 9. Creator Partner spotlight -->
<!-- ============================================================ -->
<section class="section">
<div class="container">
<div class="section-head">
<p class="eyebrow section-head__eyebrow">Creator Partners</p>
<h2 class="section-head__title">The hobbyists worth following.</h2>
<p class="section-head__lede">Painters, narrators, list-builders — partnered with the workshop and pouring their best work into the public square.</p>
</div>
<article class="creator-spotlight">
<figure class="creator-spotlight__avatar">
<img src="https://picsum.photos/seed/wd-creator-bram/320/320" alt="Portrait of Bram Pertwee, painter and tournament list-builder." loading="lazy">
</figure>
<div>
<p class="eyebrow">This Month's Featured</p>
<h3 class="creator-spotlight__name">Bram "Old Holloway" Pertwee</h3>
<ul class="creator-spotlight__tags">
<li class="creator-spotlight__tag">40K</li>
<li class="creator-spotlight__tag">Age of Sigmar</li>
<li class="creator-spotlight__tag">Painting</li>
</ul>
<p class="creator-spotlight__body">Forty years a hobbyist, twelve a tournament player, the past three a partnered creator with the workshop. Bram paints by candlelight and writes about it plainly — colour recipes, list theory, and the long, honest arc of getting good at this.</p>
<a class="text-cta" href="/creators/bram-pertwee">Visit Creator</a>
</div>
</article>
<div class="creator-strip">
<article class="creator-thumb">
<figure class="creator-thumb__avatar"><img src="https://picsum.photos/seed/wd-creator-1/160/160" alt="Marg Wilkes, D&D narrator." loading="lazy"></figure>
<p class="creator-thumb__name">Marg Wilkes</p>
<p class="creator-thumb__tag">D&D</p>
</article>
<article class="creator-thumb">
<figure class="creator-thumb__avatar"><img src="https://picsum.photos/seed/wd-creator-2/160/160" alt="Sam Foulkes, 40K painter." loading="lazy"></figure>
<p class="creator-thumb__name">Sam Foulkes</p>
<p class="creator-thumb__tag">40K</p>
</article>
<article class="creator-thumb">
<figure class="creator-thumb__avatar"><img src="https://picsum.photos/seed/wd-creator-3/160/160" alt="Iona Hark, AoS list-builder." loading="lazy"></figure>
<p class="creator-thumb__name">Iona Hark</p>
<p class="creator-thumb__tag">AoS</p>
</article>
<article class="creator-thumb">
<figure class="creator-thumb__avatar"><img src="https://picsum.photos/seed/wd-creator-4/160/160" alt="Eli Quint, terrain-builder." loading="lazy"></figure>
<p class="creator-thumb__name">Eli Quint</p>
<p class="creator-thumb__tag">Terrain</p>
</article>
<article class="creator-thumb">
<figure class="creator-thumb__avatar"><img src="https://picsum.photos/seed/wd-creator-5/160/160" alt="Theo Carrow, Old World narrator." loading="lazy"></figure>
<p class="creator-thumb__name">Theo Carrow</p>
<p class="creator-thumb__tag">Old World</p>
</article>
<article class="creator-thumb">
<figure class="creator-thumb__avatar"><img src="https://picsum.photos/seed/wd-creator-6/160/160" alt="Ada Crane, painting tutor." loading="lazy"></figure>
<p class="creator-thumb__name">Ada Crane</p>
<p class="creator-thumb__tag">Painting</p>
</article>
</div>
</div>
</section>
<hr class="hairline">
<!-- ============================================================ -->
<!-- 10. Painting Showcase / UGC -->
<!-- ============================================================ -->
<section class="section">
<div class="container">
<div class="section-head">
<p class="eyebrow section-head__eyebrow">The Gallery · This Week's Postings</p>
<h2 class="section-head__title">Painted by the customers themselves.</h2>
<p class="section-head__lede">Sent in by hobbyists across the network — nothing staged, nothing studio-lit, just honest work shown plainly.</p>
</div>
<div class="painting-gallery">
<a class="painting-tile painting-tile--tall" href="/showcase/1">
<img src="https://picsum.photos/seed/wd-paint-1/360/640" alt="A painted Space Marine command squad on resin terrain." loading="lazy">
<p class="painting-tile__caption">By Hattie Gormley</p>
</a>
<a class="painting-tile painting-tile--wide" href="/showcase/2">
<img src="https://picsum.photos/seed/wd-paint-2/640/360" alt="A painted Stormcast knight wielding a war-hammer." loading="lazy">
<p class="painting-tile__caption">By Joss Whitlock</p>
</a>
<a class="painting-tile" href="/showcase/3">
<img src="https://picsum.photos/seed/wd-paint-3/360/360" alt="A painted Orruk warboss mid-charge." loading="lazy">
<p class="painting-tile__caption">By Mira Hask</p>
</a>
<a class="painting-tile" href="/showcase/4">
<img src="https://picsum.photos/seed/wd-paint-4/360/360" alt="A red dragon mini on broken terrain." loading="lazy">
<p class="painting-tile__caption">By Tom Branch</p>
</a>
<a class="painting-tile painting-tile--wide" href="/showcase/5">
<img src="https://picsum.photos/seed/wd-paint-5/640/360" alt="Rank-and-file Empire halberdiers on a basing tray." loading="lazy">
<p class="painting-tile__caption">By Walter Penn</p>
</a>
<a class="painting-tile" href="/showcase/6">
<img src="https://picsum.photos/seed/wd-paint-6/360/360" alt="An Adeptus Mechanicus skitarii squad with non-metallic blades." loading="lazy">
<p class="painting-tile__caption">By Sloan Mercer</p>
</a>
</div>
<div class="painting-gallery__cta">
<a class="text-cta" href="/showcase/submit">Submit Your Painting</a>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- 11. Loyalty cross-brand strip -->
<!-- ============================================================ -->
<section class="loyalty-strip">
<div class="container">
<p class="eyebrow loyalty-strip__eyebrow">The Long-Keep Ledger · Loyalty Points</p>
<h2 class="loyalty-strip__title">Earn here. <em>Redeem anywhere.</em></h2>
<p class="loyalty-strip__body">Every pound spent at War Dungeon earns points to your ledger — and that ledger spends across the whole family of shops. One balance, four counters.</p>
<ul class="loyalty-strip__brands">
<li class="loyalty-strip__brand">Nerdworks</li>
<li class="loyalty-strip__brand">ArtSabers</li>
<li class="loyalty-strip__brand">Paragon</li>
<li class="loyalty-strip__brand loyalty-strip__brand--current">War Dungeon</li>
</ul>
<a class="text-cta" href="/loyalty">See How Points Work</a>
</div>
</section>
<!-- ============================================================ -->
<!-- 12. Newsletter signup -->
<!-- ============================================================ -->
<section class="section">
<div class="container">
<div class="newsletter">
<p class="eyebrow newsletter__eyebrow">The Garrison Dispatch · Delivered Fortnightly</p>
<h2 class="newsletter__title">Join the Garrison.</h2>
<p class="newsletter__body">A fortnightly dispatch from the workshop: new releases, painting recipes, tournament reports, and the occasional bit of nonsense. Sign up and we'll knock 10% off your first order — or its weight in loyalty points, if you'd rather.</p>
<form class="newsletter__form" action="#" method="post" aria-label="Newsletter signup">
<label for="garrison-email" class="visually-hidden">Email address</label>
<input id="garrison-email" class="newsletter__input" type="email" name="email" placeholder="your.address@theshire.co.uk" required>
<button class="newsletter__submit" type="submit">Sign Up</button>
</form>
<p class="newsletter__fineprint">One letter a fortnight, never more. Unsubscribe with a single click — we won't pester.</p>
</div>
</div>
</section>
</main>
<!-- ============================================================ -->
<!-- 13. Global footer -->
<!-- ============================================================ -->
<footer class="site-footer">
<div class="container container--wide">
<div class="site-footer__grid">
<div>
<h3 class="footer-col__title">Shop</h3>
<ul class="footer-col__list">
<li><a href="/warhammer/40k">Warhammer 40,000</a></li>
<li><a href="/warhammer/age-of-sigmar">Age of Sigmar</a></li>
<li><a href="/warhammer/old-world">The Old World</a></li>
<li><a href="/dungeons-and-dragons">Dungeons & Dragons</a></li>
<li><a href="/hobby-supplies">Hobby Supplies</a></li>
<li><a href="/paints">Paints</a></li>
</ul>
</div>
<div>
<h3 class="footer-col__title">Discover</h3>
<ul class="footer-col__list">
<li><a href="/tools/army-builder">Army Builder</a></li>
<li><a href="/tools/battle-simulator">Battle Simulator</a></li>
<li><a href="/learn/how-to-guides">How-To Guides</a></li>
<li><a href="/learn/tutorials">Tutorials</a></li>
<li><a href="/creators">Creators</a></li>
<li><a href="/showcase">Painting Showcase</a></li>
</ul>
</div>
<div>
<h3 class="footer-col__title">Help</h3>
<ul class="footer-col__list">
<li><a href="/contact">Contact</a></li>
<li><a href="/shipping">Shipping</a></li>
<li><a href="/returns">Returns</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/track-order">Track Order</a></li>
</ul>
</div>
<div>
<h3 class="footer-col__title">Brand & Loyalty</h3>
<ul class="footer-col__list">
<li><a href="/about">About War Dungeon</a></li>
<li><a href="/loyalty">Loyalty Programme</a></li>
<li><a href="/affiliate">Affiliate & Creators</a></li>
</ul>
<div class="footer-col__sister">
<strong>Sister Brands</strong>
Spend your points at Nerdworks, ArtSabers, or Paragon — one ledger, four counters.
</div>
</div>
</div>
<div class="footer-base">
<p>© 2026 War Dungeon · A Nerdworks Brand · <a href="/privacy">Privacy</a> · <a href="/terms">Terms</a></p>
<ul class="footer-base__icons">
<li>Visa</li><li>Mastercard</li><li>Amex</li><li>Apple Pay</li><li>Klarna</li>
</ul>
<span class="footer-base__nerdworks">A Nerdworks Brand</span>
</div>
</div>
</footer>
</body>
</html>