<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Space Marines — War Dungeon</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=Literata:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<style>
/* =========================================================
TOKENS — Frontier / SWD1 (verbatim from styleguide)
Token names match the harvested catalogue blocks so reused
CSS resolves correctly when pasted verbatim.
========================================================= */
:root {
/* palette (verbatim from styleguide) */
--primary: #C5A688;
--secondary: #D8C3B1;
--tertiary: #F4A479;
--dark: #1B1314;
--light: #FFFFFF;
--text: #613F34;
--neutral: #2B1B1C;
--accent: #832D15;
--positive: #4A6E50;
--negative: #C8442D;
--rodeo: #C5A688;
--rodeo-light:#D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--white: #FFFFFF;
--white-dark: #EDEDED;
/* surface semantics (the LAW: backgrounds use these, not chromatic ids) */
--bg-page: var(--rodeo);
--bg-surface-alt: var(--rodeo-light);
--bg-card-on-light: var(--rodeo-light);
--bg-card-on-dark: var(--liquourice);
--bg-card: var(--rodeo-light);
--bg-panel-stamp: var(--sienna);
--bg-panel-dark: var(--cowboy);
--bg-panel-darker: var(--liquourice);
/* text per ground */
--text-on-page: var(--caput);
--text-on-light: var(--caput);
--text-on-dark: var(--rodeo-light);
--text-on-neutral: var(--white);
--text-on-stamp: var(--white);
--text-on-card-light: var(--caput);
--text-on-card-dark: var(--white);
/* typography */
--font-display: "modesto-condensed", "Playfair Display", "Palatino Linotype", Georgia, serif;
--font-body: "Literata", "palatino-linotype", "Palatino Linotype", "Book Antiqua", Palatino, "EB Garamond", Georgia, serif;
/* type scale (px) */
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 48px;
--fs-h3: 36px;
--fs-h4: 24px;
--fs-body-lg: 22px;
--fs-body: 20px;
--fs-body-sm: 16px;
--fs-eyebrow: 13px;
--fs-micro: 12px;
/* unprefixed aliases — a few catalogue blocks use these */
--body-lg: 22px;
--body: 20px;
--body-sm: 16px;
--micro: 12px;
--h3: 36px;
/* line heights */
--lh-tight: 1.2;
--lh-heading: 1.35;
--lh-body: 1.5;
--lh-card: 1.35;
--lh-ui: 1.2;
/* letter spacing */
--ls-tight: -0.01em;
--ls-heading: 0;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* spacing scale */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
/* radii */
--r-none: 0;
--r-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
--r-xl: 21px;
/* hard-edged offset shadows (no blur) */
--shadow-sm: 2px 2px 0 rgba(27,19,20,0.85);
--shadow-md: 4px 4px 0 rgba(27,19,20,0.90);
--shadow-lg: 6px 6px 0 rgba(27,19,20,0.95);
--shadow-xl: 8px 8px 0 rgba(27,19,20,1);
--shadow-stamp: 3px 3px 0 rgba(27,19,20,0.95);
/* borders */
--bw-hair: 1px;
--bw-reg: 2px;
--bw-thick: 4px;
/* container + breakpoints */
--max-w: 1440px;
--max-w-md: 1200px;
--max-w-sm: 720px;
--gutter: 40px;
/* gear pattern — 10% bronze gear-and-chain motif, the brand's signature panel fill */
--gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='%23F4A479' stroke-opacity='0.10' stroke-width='1.1'><circle cx='55' cy='55' r='18'/><circle cx='55' cy='55' r='28'/><path d='M55 27v6M55 77v6M27 55h6M77 55h6M35 35l4 4M71 71l4 4M75 35l-4 4M35 75l4-4'/><circle cx='55' cy='55' r='4' fill='%23F4A479' fill-opacity='0.10'/><circle cx='165' cy='165' r='18'/><circle cx='165' cy='165' r='28'/><path d='M165 137v6M165 187v6M137 165h6M187 165h6M145 145l4 4M181 181l4 4M185 145l-4 4M145 185l4-4'/><circle cx='165' cy='165' r='4' fill='%23F4A479' fill-opacity='0.10'/><line x1='0' y1='110' x2='220' y2='110' stroke-opacity='0.06'/><line x1='110' y1='0' x2='110' y2='220' stroke-opacity='0.06'/></g></svg>");
}
/* =========================================================
RESET / BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-page);
color: var(--text-on-page);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--ls-wide); line-height: var(--lh-heading); margin: 0; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.container--md { max-width: var(--max-w-md); margin: 0 auto; padding: 0 var(--gutter); }
/* shared rivet primitive (referenced by every rivet-panel in the catalogue) */
.rivet-panel { position: relative; }
.rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--caput); border: 1px solid var(--bronze); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); z-index: 2; }
.rivet--tl { top: 8px; left: 8px; }
.rivet--tr { top: 8px; right: 8px; }
.rivet--bl { bottom: 8px; left: 8px; }
.rivet--br { bottom: 8px; right: 8px; }
/* =========================================================
BLOCK: preheader-bar [REUSED VERBATIM from catalogue]
========================================================= */
.preheader-bar { background: var(--liquourice); color: var(--rodeo-light); font-family: var(--font-body); font-size: var(--micro); letter-spacing: var(--ls-widest); text-transform: uppercase; padding: var(--sp-2) 0; border-bottom: 1px solid var(--caput); }
.preheader-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.preheader-bar__msg { display: flex; align-items: center; gap: var(--sp-3); }
.preheader-bar__msg::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); }
.preheader-bar__links { display: flex; gap: var(--sp-5); }
.preheader-bar__links a { color: var(--bronze); }
@media (max-width: 640px) { .preheader-bar__links { display: none; } }
/* =========================================================
BLOCK: announcement-bar [REUSED VERBATIM from catalogue]
========================================================= */
.announcement-bar { background: var(--bg-panel-stamp); border-top: 2px ridge var(--bronze); border-bottom: 2px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); color: var(--text-on-stamp); }
.announcement-bar__inner { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 44px; padding: 8px 40px; max-width: 1440px; margin: 0 auto; }
.announcement-bar__msg { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; }
.announcement-bar__msg::before, .announcement-bar__msg::after { content: ""; width: 28px; height: 6px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 6'><path d='M0 3h28' stroke='%23F4A479' stroke-width='1.2'/><circle cx='14' cy='3' r='2' fill='%23F4A479'/></svg>"); }
.announcement-bar__rotator { display: inline-flex; align-items: center; gap: 12px; }
.announcement-bar__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bronze); opacity: 0.4; }
.announcement-bar__dot--active { opacity: 1; box-shadow: 0 0 0 2px rgba(244,164,121,0.25); }
/* =========================================================
BLOCK: site-header [REUSED VERBATIM from catalogue]
========================================================= */
.site-header { background: var(--bg-panel-darker); border-bottom: 2px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 16px 40px; max-width: 1440px; margin: 0 auto; }
.site-header__brand { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); background: var(--liquourice); }
.site-header__cog { width: 28px; height: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23F4A479' stroke-width='1.4'><circle cx='14' cy='14' r='5'/><circle cx='14' cy='14' r='9'/><path d='M14 1v4M14 23v4M1 14h4M23 14h4M5 5l3 3M20 20l3 3M23 5l-3 3M5 23l3-3'/></svg>"); }
.site-header__word { font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); line-height: 1; }
.site-header__word small { display: block; font-size: 9px; color: var(--rodeo-light); margin-top: 2px; }
.site-header__nav { display: flex; gap: 0; justify-content: center; }
.site-header__nav-item { position: relative; padding: 12px 16px; font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--rodeo-light); text-decoration: none; }
.site-header__nav-item + .site-header__nav-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 999px; background: var(--bronze); transform: translate(-3px, -50%); }
.site-header__nav-item--has-mega::after { content: " ▾"; font-size: 10px; color: var(--bronze); }
.site-header__nav-item.is-active { color: var(--bronze); }
.site-header__tools { display: flex; gap: 12px; align-items: center; }
.site-header__tool { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); color: var(--bronze); text-decoration: none; }
.site-header__tool--basket { width: auto; padding: 0 12px; gap: 8px; font-family: var(--font-display); font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.site-header__points { padding: 2px 6px; font-size: 10px; background: var(--bronze); color: var(--liquourice); border-radius: 999px; border: 1px solid var(--caput); margin-left: 6px; }
@media (max-width: 980px) { .site-header__nav { display: none; } .site-header__inner { grid-template-columns: auto 1fr; } }
/* =========================================================
BLOCK: breadcrumbs [REUSED VERBATIM from catalogue]
========================================================= */
.breadcrumbs { background: var(--rodeo); border-top: 1px solid var(--caput); border-bottom: 1px solid var(--caput); padding: var(--sp-4) 0; color: var(--caput); font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--ls-wider); }
.breadcrumbs__inner { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.breadcrumbs__sep { color: var(--sienna); margin: 0 var(--sp-1); }
.breadcrumbs__item--current { color: var(--sienna); }
/* =========================================================
BLOCK: eyebrow-stamp [REUSED VERBATIM from catalogue]
========================================================= */
.eyebrow-stamp { display: inline-block; padding: 6px 16px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); }
/* =========================================================
BLOCK: btn [REUSED VERBATIM from catalogue]
========================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: var(--font-display); font-size: var(--fs-body-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--light); background: var(--sienna); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); text-decoration: none; cursor: pointer; transition: transform 120ms linear; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: inset 0 0 0 1px var(--caput), 3px 3px 0 var(--caput); }
.btn--ghost { color: var(--bronze); background: transparent; }
.btn--lg { padding: 18px 36px; font-size: var(--fs-h4); }
.btn--block { display: flex; width: 100%; }
/* =========================================================
BLOCK: plated-frame [REUSED VERBATIM from catalogue]
========================================================= */
.plated-frame { position: relative; padding: 8px; background: var(--liquourice); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); margin: 0; }
.plated-frame__media { position: relative; overflow: hidden; background: var(--cowboy); border: 1px solid var(--caput); }
.plated-frame__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* =========================================================
BLOCK: gear-divider [REUSED VERBATIM from catalogue]
========================================================= */
.gear-divider { height: 36px; background-color: var(--liquourice); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='36' viewBox='0 0 200 36'><g fill='none' stroke='%23F4A479' stroke-width='1.4'><line x1='0' y1='18' x2='200' y2='18'/><line x1='0' y1='14' x2='200' y2='14' stroke-opacity='0.35'/><line x1='0' y1='22' x2='200' y2='22' stroke-opacity='0.35'/><circle cx='50' cy='18' r='8'/><circle cx='50' cy='18' r='12'/><path d='M50 3v3M50 30v3M35 18h3M62 18h3'/><circle cx='50' cy='18' r='3' fill='%23F4A479'/><circle cx='150' cy='18' r='8'/><circle cx='150' cy='18' r='12'/><path d='M150 3v3M150 30v3M135 18h3M162 18h3'/><circle cx='150' cy='18' r='3' fill='%23F4A479'/></g></svg>"); background-repeat: repeat-x; border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); }
/* =========================================================
BLOCK: section-head [REUSED VERBATIM from catalogue]
========================================================= */
.section-head { text-align: center; margin-bottom: 64px; }
.section-head__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(40px, 6vw, var(--fs-h1)); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-on-dark); }
.section-head--on-light .section-head__title { color: var(--text-on-light); }
.section-head__rule { display: block; width: 120px; height: 4px; margin: 12px auto 16px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.section-head__lede { max-width: 640px; margin: 0 auto; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--secondary); }
.section-head--on-light .section-head__lede { color: var(--caput); }
/* =========================================================
BLOCK: category-hero [NEW]
Inverted dark cowboy panel with bronze gear-pattern at 10%.
Plated diorama right; eyebrow + display title + lede + dual
CTA left. Primary CTA sits in a CLEAN ZONE — no rivets,
no gear-divider, no stamped badges overlapping. The hero
panel itself carries rivets at the four corners; the CTA
row is well inside the safe rectangle.
========================================================= */
.category-hero { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0 var(--sp-10); color: var(--text-on-dark); position: relative; }
.category-hero__panel { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: center; padding: var(--sp-8); border: 4px solid var(--bronze); border-style: ridge; background: var(--liquourice); background-image: var(--gear-pattern); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-xl); }
.category-hero__panel .rivet { width: 14px; height: 14px; }
.category-hero__copy { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 600px; }
.category-hero__eyebrow { align-self: flex-start; }
.category-hero__title { margin: var(--sp-3) 0 0; font-family: var(--font-display); font-size: clamp(64px, 8vw, 112px); line-height: 0.92; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.category-hero__title em { font-style: normal; color: var(--bronze); display: block; }
.category-hero__rule { display: block; width: 200px; height: 6px; margin: var(--sp-5) 0; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.category-hero__lede { font-family: var(--font-body); font-size: var(--fs-body-lg); font-style: italic; line-height: var(--lh-body); color: var(--rodeo-light); margin: 0 0 var(--sp-5); max-width: 520px; }
.category-hero__clean-zone { background: var(--cowboy); border: 1px solid var(--caput); padding: var(--sp-5) var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; box-shadow: inset 0 0 0 1px rgba(244,164,121,0.10); }
.category-hero__ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.category-hero__meta { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-5); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.category-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.category-hero__meta span::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--bronze); border: 1px solid var(--caput); }
.category-hero__frame { position: relative; }
.category-hero__frame .plated-frame { padding: 12px; border-width: 6px; }
.category-hero__frame .plated-frame__media { aspect-ratio: 4/5; }
.category-hero__plaque { position: absolute; left: 24px; bottom: -22px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.category-hero__roundel { position: absolute; top: -28px; right: 32px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: var(--bronze); color: var(--liquourice); border: 4px solid var(--caput); border-style: ridge; border-radius: 50%; box-shadow: var(--shadow-md); font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-widest); text-align: center; line-height: 1.05; padding: 6px; z-index: 3; }
.category-hero__roundel strong { display: block; font-size: 22px; letter-spacing: var(--ls-wide); }
@media (max-width: 980px) { .category-hero__panel { grid-template-columns: 1fr; padding: var(--sp-6); } .category-hero__roundel { right: 16px; top: -22px; width: 80px; height: 80px; } }
/* =========================================================
BLOCK: category-positioning [NEW]
Single editorial paragraph on the rodeo light ground. No
chrome, just breathing space. Large palatino body type;
the brand commits to the category in writing here.
========================================================= */
.category-positioning { background: var(--bg-page); padding: var(--sp-9) 0; }
.category-positioning__inner { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.category-positioning__filigree { display: block; width: 64px; height: 14px; margin: 0 auto var(--sp-5); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><g fill='none' stroke='%23832D15' stroke-width='1.3'><line x1='0' y1='7' x2='22' y2='7'/><line x1='42' y1='7' x2='64' y2='7'/><circle cx='32' cy='7' r='4'/><circle cx='32' cy='7' r='1.4' fill='%23832D15'/></g></svg>"); background-repeat: no-repeat; background-position: center; }
.category-positioning__copy { font-family: var(--font-body); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.5; color: var(--caput); margin: 0; text-align: center; font-style: italic; }
.category-positioning__copy strong { font-style: normal; color: var(--sienna); font-weight: 500; }
.category-positioning__byline { display: block; margin-top: var(--sp-5); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); text-align: center; }
.category-positioning__byline::before, .category-positioning__byline::after { content: " — "; color: var(--sienna); }
/* =========================================================
BLOCK: sub-category-billboard [NEW]
Focal discovery mechanism — most visual weight after the
hero. Lit-diorama imagery dominant (4:3 plate), bronze
ridge frame, corner rivets, gear-pattern inner ground.
Modesto-condensed sub-category name on a stamped brass
plate, one-line positioning, "Browse" CTA. Entire card
is the clickable surface.
========================================================= */
.sub-category-billboards { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; color: var(--text-on-dark); }
.sub-category-billboards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.sub-category-billboard { position: relative; display: flex; flex-direction: column; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; padding: var(--sp-3); color: var(--rodeo-light); text-decoration: none; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); transition: transform 120ms linear; }
.sub-category-billboard:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 1px var(--caput), 6px 6px 0 var(--caput); }
.sub-category-billboard .rivet { width: 10px; height: 10px; }
.sub-category-billboard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cowboy); border: 2px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.sub-category-billboard__media img { width: 100%; height: 100%; object-fit: cover; }
.sub-category-billboard__plate { position: absolute; left: 14px; top: 14px; padding: 6px 14px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); }
.sub-category-billboard__count { position: absolute; right: 14px; top: 14px; padding: 4px 10px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); }
.sub-category-billboard__body { padding: var(--sp-5) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.sub-category-billboard__title { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.sub-category-billboard__rule { display: block; width: 60px; height: 3px; background: var(--bronze); }
.sub-category-billboard__copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-sm); font-style: italic; color: var(--rodeo-light); line-height: var(--lh-body); }
.sub-category-billboard__cta { margin-top: auto; padding-top: var(--sp-4); border-top: 1px dashed var(--caput); font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 8px; }
.sub-category-billboard__cta::after { content: "→"; }
@media (max-width: 980px) { .sub-category-billboards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sub-category-billboards__grid { grid-template-columns: 1fr; } }
/* =========================================================
BLOCK: featured-products [REUSE product-card pattern]
4 product-cards in a dark cowboy band. Carries the
catalogue's product-card CSS verbatim.
========================================================= */
.featured-products { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; color: var(--text-on-dark); }
.featured-products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.featured-products__footnote { margin-top: var(--sp-6); text-align: center; font-family: var(--font-body); font-style: italic; color: var(--rodeo-light); font-size: var(--fs-body-sm); }
@media (max-width: 980px) { .featured-products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .featured-products__grid { grid-template-columns: 1fr; } }
/* product-card [REUSED VERBATIM from catalogue] */
.product-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--bg-card-on-dark); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); color: var(--text-on-card-dark); }
.product-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--light); border-bottom: 2px ridge var(--bronze); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__game-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); }
.product-card__loyalty { position: absolute; top: 12px; right: 12px; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-family: var(--font-display); font-size: 11px; color: var(--liquourice); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); }
.product-card__body { padding: 24px; display: grid; gap: 12px; }
.product-card__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-card-dark); }
.product-card__rating { display: inline-flex; align-items: center; gap: 8px; color: var(--bronze); font-size: var(--fs-body-sm); }
.product-card__rating em { font-style: normal; color: var(--rodeo-light); font-family: var(--font-body); }
.product-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.product-card__price { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--bronze); line-height: 1; }
.product-card__quickview { padding: 10px 14px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--light); background: var(--sienna); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); cursor: pointer; }
/* =========================================================
BLOCK: starter-path [NEW]
Curated 3-step graphic flow on a light rodeo ground (deliberate
tonal break to make the conversion step stand out). Each step
is a plated card with a brass roundel step number, a line-art
gear/anvil/brush icon, a one-line guidance, and a sienna link.
A horizontal chain rule connects the three steps as a
visual "path."
========================================================= */
.starter-path { background-color: var(--rodeo-light); padding: var(--sp-9) 0; color: var(--caput); position: relative; }
.starter-path__inner { position: relative; }
.starter-path__rail { display: block; position: absolute; left: 8%; right: 8%; top: 50%; height: 6px; transform: translateY(-50%); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'><g fill='%23613F34'><circle cx='3' cy='3' r='1.5'/><circle cx='13' cy='3' r='1.5'/><circle cx='23' cy='3' r='1.5'/><circle cx='33' cy='3' r='1.5'/></g></svg>"); background-repeat: repeat-x; opacity: 0.45; pointer-events: none; z-index: 0; }
.starter-path__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); position: relative; z-index: 1; }
.starter-path__step { background: var(--rodeo); border: 4px solid var(--bronze); border-style: ridge; padding: var(--sp-7) var(--sp-6) var(--sp-6); position: relative; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); text-align: center; }
.starter-path__step .rivet { width: 8px; height: 8px; background: var(--caput); }
.starter-path__numeral { position: absolute; left: 50%; top: -32px; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; background: var(--bronze); border: 4px solid var(--caput); border-style: ridge; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--liquourice); letter-spacing: var(--ls-wide); box-shadow: var(--shadow-md); z-index: 2; }
.starter-path__numeral::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--caput); opacity: 0.5; }
.starter-path__icon { width: 72px; height: 72px; margin: var(--sp-5) auto var(--sp-4); display: block; }
.starter-path__icon svg { width: 100%; height: 100%; fill: none; stroke: var(--sienna); stroke-width: 1.3; }
.starter-path__title { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: 26px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--caput); line-height: var(--lh-tight); }
.starter-path__rule { display: block; width: 48px; height: 3px; margin: 0 auto var(--sp-3); background: var(--sienna); }
.starter-path__copy { margin: 0 0 var(--sp-5); font-family: var(--font-body); font-size: var(--fs-body); font-style: italic; line-height: var(--lh-body); color: var(--caput); }
.starter-path__link { font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--sienna); border-bottom: 2px dashed var(--sienna); padding-bottom: 2px; display: inline-flex; align-items: center; gap: 8px; }
.starter-path__link::after { content: "→"; }
@media (max-width: 900px) { .starter-path__grid { grid-template-columns: 1fr; gap: var(--sp-8); } .starter-path__rail { display: none; } }
/* =========================================================
BLOCK: guide-card [REUSED VERBATIM from catalogue]
Hosted in a dedicated 3-up dark band.
========================================================= */
.how-to-guides { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; color: var(--text-on-dark); }
.how-to-guides__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 980px) { .how-to-guides__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.guide-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--liquourice); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); color: var(--text-on-dark); overflow: hidden; }
.guide-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--cowboy); border-bottom: 2px ridge var(--bronze); }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__badges { position: absolute; left: 12px; top: 12px; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.guide-card__badge { padding: 4px 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; background: var(--bronze); color: var(--liquourice); border: 1px solid var(--caput); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput); }
.guide-card__badge--time { background: var(--liquourice); color: var(--bronze); border-color: var(--bronze); }
.guide-card__body { padding: 24px 24px 32px; display: grid; gap: 12px; }
.guide-card__kicker { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.guide-card__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-dark); }
.guide-card__copy { margin: 0; color: var(--secondary); font-size: var(--fs-body-sm); }
.guide-card__cta { margin-top: 12px; font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bronze); display: inline-flex; gap: 8px; }
.guide-card__cta::after { content: "→"; }
/* =========================================================
BLOCK: painting-showcase [REUSED VERBATIM from catalogue]
========================================================= */
.painting-showcase { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; color: var(--text-on-dark); }
.painting-showcase__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 16px; }
.painting-showcase__tile { position: relative; background: var(--liquourice); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); overflow: hidden; text-decoration: none; display: block; }
.painting-showcase__tile img { width: 100%; height: 100%; object-fit: cover; }
.painting-showcase__tile--lg { grid-column: span 3; grid-row: span 3; }
.painting-showcase__tile--md { grid-column: span 2; grid-row: span 2; }
.painting-showcase__tile--sm { grid-column: span 1; grid-row: span 2; }
.painting-showcase__tile--wide { grid-column: span 3; grid-row: span 2; }
.painting-showcase__tile--tall { grid-column: span 2; grid-row: span 3; }
.painting-showcase__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: linear-gradient(transparent, rgba(27,19,20,0.85)); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.painting-showcase__caption span { color: var(--rodeo-light); }
.painting-showcase__submit { margin-top: 48px; text-align: center; }
@media (max-width: 880px) { .painting-showcase__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .painting-showcase__tile--lg { grid-column: span 3; grid-row: span 3; } .painting-showcase__tile--md, .painting-showcase__tile--wide { grid-column: span 3; grid-row: span 2; } .painting-showcase__tile--sm, .painting-showcase__tile--tall { grid-column: span 3; grid-row: span 2; } }
/* =========================================================
BLOCK: loyalty-strip [REUSED VERBATIM from catalogue]
Brief says "compact treatment — single row, not the full
homepage panel" — same block, content compacted (3 brand
plates omitted from the right cluster, single row).
========================================================= */
.loyalty-strip { background-color: var(--bg-panel-stamp); border-top: 4px ridge var(--bronze); border-bottom: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); padding: var(--sp-6) 0; color: var(--text-on-stamp); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><g fill='none' stroke='%23F4A479' stroke-opacity='0.12' stroke-width='1'><circle cx='90' cy='90' r='24'/><circle cx='90' cy='90' r='40'/></g></svg>"); }
.loyalty-strip__inner { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--sp-7); max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.loyalty-strip__head { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--sp-5); }
.loyalty-strip__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--white); }
.loyalty-strip__title em { font-style: normal; color: var(--bronze); }
.loyalty-strip__copy { margin: 0; font-size: var(--fs-body); color: var(--rodeo-light); }
.loyalty-strip__brands { display: flex; gap: var(--sp-3); justify-content: flex-end; }
.loyalty-strip__brand { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); }
.loyalty-strip__mark { width: 30px; height: 30px; background: var(--bronze); border: 1px solid var(--caput); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--liquourice); font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wider); font-weight: 700; }
.loyalty-strip__name { font-family: var(--font-display); font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bronze); line-height: 1.1; }
@media (max-width: 980px) { .loyalty-strip__inner { grid-template-columns: 1fr; } .loyalty-strip__brands { justify-content: flex-start; flex-wrap: wrap; } .loyalty-strip__head { grid-template-columns: 1fr; gap: var(--sp-3); } }
/* =========================================================
BLOCK: related-category-card [NEW]
Small lateral-discovery card — diorama plate, name on a
stamped brass plate, micro positioning, arrow CTA. Bronze
ridge frame + corner rivets carries the methodology even
at small scale. Dark band ground.
========================================================= */
.related-categories { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; color: var(--text-on-dark); }
.related-categories__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.related-category-card { position: relative; display: flex; flex-direction: column; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; padding: var(--sp-3); color: var(--rodeo-light); text-decoration: none; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); transition: transform 120ms linear; }
.related-category-card:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 1px var(--caput), 5px 5px 0 var(--caput); }
.related-category-card .rivet { width: 7px; height: 7px; }
.related-category-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--cowboy); border: 2px ridge var(--bronze); }
.related-category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.related-category-card__system { position: absolute; left: 10px; top: 10px; padding: 3px 8px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); }
.related-category-card__body { padding: var(--sp-4) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.related-category-card__name { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); line-height: var(--lh-tight); }
.related-category-card__copy { margin: 0; font-family: var(--font-body); font-size: 14px; font-style: italic; color: var(--rodeo-light); line-height: 1.4; }
.related-category-card__cta { margin-top: auto; padding-top: var(--sp-3); border-top: 1px dashed var(--caput); font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 6px; }
.related-category-card__cta::after { content: "→"; }
@media (max-width: 980px) { .related-categories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .related-categories__grid { grid-template-columns: 1fr; } }
/* =========================================================
BLOCK: newsletter-garrison [REUSED VERBATIM from catalogue]
========================================================= */
.newsletter-garrison { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-7) 0; }
.newsletter-garrison__panel { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; padding: var(--sp-6) var(--sp-7); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; color: var(--rodeo-light); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); }
.newsletter-garrison__copy h3 { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white); margin: 0 0 var(--sp-2); }
.newsletter-garrison__copy p { font-family: var(--font-body); font-style: italic; font-size: var(--body); margin: 0; color: var(--rodeo-light); }
.newsletter-garrison__form { display: flex; gap: var(--sp-3); align-items: stretch; }
.newsletter-garrison__form input { background: var(--cowboy); color: var(--white); border: 2px solid var(--bronze); padding: var(--sp-3) var(--sp-4); font-family: var(--font-body); font-size: var(--body); width: 280px; }
.newsletter-garrison__form input::placeholder { color: var(--rodeo-light); font-style: italic; }
.newsletter-garrison__form button { background: var(--sienna); color: var(--white); border: 2px solid var(--bronze); border-style: ridge; font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: var(--ls-wide); padding: var(--sp-3) var(--sp-5); box-shadow: 2px 2px 0 var(--caput); }
@media (max-width: 880px) { .newsletter-garrison__panel { grid-template-columns: 1fr; padding: var(--sp-5); } .newsletter-garrison__form { flex-direction: column; } .newsletter-garrison__form input { width: 100%; } }
/* =========================================================
BLOCK: site-footer [REUSED VERBATIM from catalogue]
========================================================= */
.site-footer { background: var(--bg-panel-darker); color: var(--text-on-dark); border-top: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.site-footer__columns { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding: 96px 40px 48px; max-width: 1200px; margin: 0 auto; }
.site-footer__brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-footer__cog { width: 32px; height: 32px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23F4A479' stroke-width='1.4'><circle cx='16' cy='16' r='6'/><circle cx='16' cy='16' r='11'/><path d='M16 2v4M16 26v4M2 16h4M26 16h4M6 6l3 3M23 23l3 3M26 6l-3 3M6 26l3-3'/></svg>"); }
.site-footer__word { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__copy { margin: 0 0 24px; color: var(--rodeo-light); font-size: var(--fs-body-sm); font-style: italic; }
.site-footer__badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__col-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px ridge var(--bronze); font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__list a { color: var(--rodeo-light); font-size: var(--fs-body-sm); text-decoration: none; }
.site-footer__list a:hover { color: var(--bronze); }
.site-footer__baseline { border-top: 2px ridge var(--bronze); background: var(--cowboy); }
.site-footer__baseline-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 40px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.site-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.site-footer__pay span { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__legal { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); color: var(--rodeo-light); }
.site-footer__social { display: flex; gap: 12px; }
.site-footer__social a { width: 32px; height: 32px; background: var(--liquourice); border: 1px solid var(--bronze); display: inline-flex; align-items: center; justify-content: center; color: var(--bronze); border-radius: 50%; font-family: var(--font-display); font-size: 12px; }
@media (max-width: 880px) { .site-footer__columns { grid-template-columns: 1fr; gap: 32px; padding: 64px 24px 32px; } }
</style>
</head>
<body>
<!-- ===== preheader-bar [REUSE] ===== -->
<div class="preheader-bar">
<div class="container preheader-bar__inner">
<div class="preheader-bar__msg">Loyalty points earned on every order — redeem across all four Nerdworks brands</div>
<div class="preheader-bar__links">
<a href="#">Find a store</a>
<a href="#">Track your order</a>
<a href="#">Sign in</a>
</div>
</div>
</div>
<!-- ===== announcement-bar [REUSE] ===== -->
<div class="announcement-bar" role="region" aria-label="Announcements">
<div class="announcement-bar__inner">
<span class="announcement-bar__msg">New Codex: Space Marines on the bench — pre-orders open Saturday at sunup</span>
<span class="announcement-bar__rotator" aria-hidden="true">
<span class="announcement-bar__dot announcement-bar__dot--active"></span>
<span class="announcement-bar__dot"></span>
<span class="announcement-bar__dot"></span>
</span>
</div>
</div>
<!-- ===== site-header [REUSE] ===== -->
<header class="site-header">
<div class="site-header__inner">
<a class="site-header__brand" href="/">
<span class="site-header__cog" aria-hidden="true"></span>
<span class="site-header__word">War Dungeon<small>The Workbench of Warriors</small></span>
</a>
<nav class="site-header__nav" aria-label="Primary">
<a class="site-header__nav-item site-header__nav-item--has-mega is-active" href="#">Warhammer</a>
<a class="site-header__nav-item" href="#">Dungeons & Dragons</a>
<a class="site-header__nav-item" href="#">Tools</a>
<a class="site-header__nav-item site-header__nav-item--has-mega" href="#">Learn</a>
<a class="site-header__nav-item" href="#">Creators</a>
</nav>
<div class="site-header__tools">
<a class="site-header__tool" href="#" aria-label="Search">⌕</a>
<a class="site-header__tool" href="#" aria-label="Account">☉</a>
<a class="site-header__tool" href="#" aria-label="Wishlist">♥</a>
<a class="site-header__tool site-header__tool--basket" href="#"><span>Basket · 3</span><span class="site-header__points">+412 PTS</span></a>
</div>
</div>
</header>
<!-- ===== breadcrumbs [REUSE] ===== -->
<nav class="breadcrumbs" aria-label="Breadcrumb">
<div class="container breadcrumbs__inner">
<a href="#">Home</a><span class="breadcrumbs__sep">/</span>
<a href="#">Warhammer</a><span class="breadcrumbs__sep">/</span>
<a href="#">Warhammer 40,000</a><span class="breadcrumbs__sep">/</span>
<span class="breadcrumbs__item--current">Space Marines</span>
</div>
</nav>
<!-- ===== category-hero [NEW] ===== -->
<section class="category-hero">
<div class="container">
<div class="category-hero__panel rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="category-hero__roundel" aria-hidden="true">
<span><strong>~118</strong>kits in stock</span>
</div>
<div class="category-hero__copy">
<span class="eyebrow-stamp category-hero__eyebrow">M41 · The Imperium of Mankind</span>
<h1 class="category-hero__title">Space<em>Marines</em></h1>
<span class="category-hero__rule" aria-hidden="true"></span>
<p class="category-hero__lede">Eighteen-foot warriors in ceramite armour, ten thousand years on the line, and a paintjob ten thousand painters have argued over. The Imperium's first answer to every dark horizon.</p>
<div class="category-hero__clean-zone">
<div class="category-hero__ctas">
<a class="btn btn--lg" href="#">Shop Combat Patrols</a>
<a class="btn btn--ghost btn--lg" href="#">Build Your Marines Army</a>
</div>
</div>
<div class="category-hero__meta">
<span>Combat Patrols</span>
<span>Single Units</span>
<span>Codex & Datasheets</span>
<span>Hobby Supplies</span>
</div>
</div>
<div class="category-hero__frame">
<figure class="plated-frame">
<div class="plated-frame__media">
<img src="https://images.unsplash.com/photo-1601814933824-fd0b574dd592?w=900&auto=format&fit=crop&q=80" alt="Lit diorama of a painted Space Marines tactical squad on terrain">
</div>
</figure>
<span class="category-hero__plaque">Diorama: Watchfire on Cadia · The Long Vigil</span>
</div>
</div>
</div>
</section>
<!-- ===== category-positioning [NEW] ===== -->
<section class="category-positioning">
<div class="category-positioning__inner">
<span class="category-positioning__filigree" aria-hidden="true"></span>
<p class="category-positioning__copy">Ten thousand years of war, every chapter you can name, and a hundred more you can't. <strong>Marines are the front line of the Imperium</strong> — and the front line of most painters' starting collections. From Salamanders to Raven Guard, from a Combat Patrol on Saturday morning to a two-thousand-point army that took eighteen months to finish, we stock what you need, we know how to paint it, and we'll be the first to tell you when you don't need the new thing yet.</p>
<span class="category-positioning__byline">The shopkeeper's word</span>
</div>
</section>
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ===== sub-category-billboards [NEW block: sub-category-billboard] ===== -->
<section class="sub-category-billboards">
<div class="container">
<div class="section-head">
<span class="eyebrow-stamp">Pick Your Aisle</span>
<h2 class="section-head__title">Where in the Armoury</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Four ways into the chapter house. Pick by where you are, not by what's loudest on the shelf.</p>
</div>
<div class="sub-category-billboards__grid">
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://images.unsplash.com/photo-1606503825008-909a67e63c3d?w=800&auto=format&fit=crop&q=80" alt="Combat Patrol box product render">
<span class="sub-category-billboard__plate">Start Here</span>
<span class="sub-category-billboard__count">14 kits</span>
</div>
<div class="sub-category-billboard__body">
<h3 class="sub-category-billboard__title">Combat Patrols</h3>
<span class="sub-category-billboard__rule" aria-hidden="true"></span>
<p class="sub-category-billboard__copy">A captain, a tactical squad, an HQ rider — one box, one paintjob, one army to muster by Sunday.</p>
<span class="sub-category-billboard__cta">Browse Combat Patrols</span>
</div>
</a>
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://images.unsplash.com/photo-1635863138275-d9b33299680b?w=800&auto=format&fit=crop&q=80" alt="Painted Terminator squad on terrain">
<span class="sub-category-billboard__plate">The Line</span>
<span class="sub-category-billboard__count">68 kits</span>
</div>
<div class="sub-category-billboard__body">
<h3 class="sub-category-billboard__title">Single Units</h3>
<span class="sub-category-billboard__rule" aria-hidden="true"></span>
<p class="sub-category-billboard__copy">Captains, Tactical Squads, Terminators, Dreadnoughts. Pick the units the army actually needs, not the ones the box wanted to sell.</p>
<span class="sub-category-billboard__cta">Walk the Line</span>
</div>
</a>
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://images.unsplash.com/photo-1589998059171-988d887df646?w=800&auto=format&fit=crop&q=80" alt="Open Warhammer 40,000 Codex book">
<span class="sub-category-billboard__plate">The Rules</span>
<span class="sub-category-billboard__count">9 books</span>
</div>
<div class="sub-category-billboard__body">
<h3 class="sub-category-billboard__title">Codex & Datasheets</h3>
<span class="sub-category-billboard__rule" aria-hidden="true"></span>
<p class="sub-category-billboard__copy">The current Codex, supplements for every named chapter, and the datasheet cards you'll actually keep on the table.</p>
<span class="sub-category-billboard__cta">Open the Codex</span>
</div>
</a>
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://images.unsplash.com/photo-1599689019379-22716bdf3275?w=800&auto=format&fit=crop&q=80" alt="Citadel paints lined up on a workbench">
<span class="sub-category-billboard__plate">The Bench</span>
<span class="sub-category-billboard__count">37 sets</span>
</div>
<div class="sub-category-billboard__body">
<h3 class="sub-category-billboard__title">Hobby Supplies</h3>
<span class="sub-category-billboard__rule" aria-hidden="true"></span>
<p class="sub-category-billboard__copy">Chapter-specific paint sets, brush rolls, and the contrast paints that turned ten weekends of work into one.</p>
<span class="sub-category-billboard__cta">Open the Bench</span>
</div>
</a>
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://images.unsplash.com/photo-1604011099229-1c92f43b8f48?w=800&auto=format&fit=crop&q=80" alt="Terrain piece with painted Marines for scale">
<span class="sub-category-billboard__plate">The Bigs</span>
<span class="sub-category-billboard__count">22 kits</span>
</div>
<div class="sub-category-billboard__body">
<h3 class="sub-category-billboard__title">Vehicles & Flyers</h3>
<span class="sub-category-billboard__rule" aria-hidden="true"></span>
<p class="sub-category-billboard__copy">Rhinos, Razorbacks, Land Raiders, and the dread Stormhawks. The kits that take a week to paint and a campaign to forget.</p>
<span class="sub-category-billboard__cta">Open the Hangar</span>
</div>
</a>
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://images.unsplash.com/photo-1545987796-200677ee1011?w=800&auto=format&fit=crop&q=80" alt="Dark angels-style heraldry on painted shoulder pad">
<span class="sub-category-billboard__plate">The Named</span>
<span class="sub-category-billboard__count">31 kits</span>
</div>
<div class="sub-category-billboard__body">
<h3 class="sub-category-billboard__title">Chapter-Specific Kits</h3>
<span class="sub-category-billboard__rule" aria-hidden="true"></span>
<p class="sub-category-billboard__copy">Dark Angels, Blood Angels, Space Wolves, Ultramarines — the boxes with their own iconography stamped on every pauldron.</p>
<span class="sub-category-billboard__cta">Pick Your Chapter</span>
</div>
</a>
</div>
</div>
</section>
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ===== featured-products [NEW band hosting REUSED product-card] ===== -->
<section class="featured-products">
<div class="container">
<div class="section-head">
<span class="eyebrow-stamp">Curated by the Workbench</span>
<h2 class="section-head__title">Four Kits We'd Pick Ourselves</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Not the best-sellers algorithm — the four we'd reach for first if we had to muster a Marines army from this shelf today.</p>
</div>
<div class="featured-products__grid">
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">40K</span>
<span class="product-card__loyalty">+95 PTS</span>
<img src="https://images.unsplash.com/photo-1606503825008-909a67e63c3d?w=700&auto=format&fit=crop&q=80" alt="Combat Patrol: Space Marines box">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Combat Patrol: Space Marines</h3>
<div class="product-card__rating">★★★★★ <em>(184)</em></div>
<div class="product-card__price-row">
<span class="product-card__price">£95.00</span>
<button class="product-card__quickview">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">40K</span>
<span class="product-card__loyalty">+62 PTS</span>
<img src="https://images.unsplash.com/photo-1635863138275-d9b33299680b?w=700&auto=format&fit=crop&q=80" alt="Terminator Squad kit">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Terminator Squad — Tactical</h3>
<div class="product-card__rating">★★★★★ <em>(96)</em></div>
<div class="product-card__price-row">
<span class="product-card__price">£62.50</span>
<button class="product-card__quickview">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">40K</span>
<span class="product-card__loyalty">+35 PTS</span>
<img src="https://images.unsplash.com/photo-1589998059171-988d887df646?w=700&auto=format&fit=crop&q=80" alt="Codex Space Marines book">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Codex: Space Marines (10th Ed.)</h3>
<div class="product-card__rating">★★★★☆ <em>(248)</em></div>
<div class="product-card__price-row">
<span class="product-card__price">£35.00</span>
<button class="product-card__quickview">Quick View</button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">40K</span>
<span class="product-card__loyalty">+28 PTS</span>
<img src="https://images.unsplash.com/photo-1599689019379-22716bdf3275?w=700&auto=format&fit=crop&q=80" alt="Citadel Space Marines paint set">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Citadel Paint Set — Ultramarines</h3>
<div class="product-card__rating">★★★★★ <em>(412)</em></div>
<div class="product-card__price-row">
<span class="product-card__price">£28.00</span>
<button class="product-card__quickview">Quick View</button>
</div>
</div>
</article>
</div>
<p class="featured-products__footnote">Picks rotate each fortnight. These are the four currently on the bench.</p>
</div>
</section>
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ===== starter-path [NEW] ===== -->
<section class="starter-path">
<div class="container starter-path__inner">
<div class="section-head section-head--on-light">
<span class="eyebrow-stamp">Newcomer's Welcome</span>
<h2 class="section-head__title">Start Your Space Marines Army</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Three steps, one weekend each. Walk this path and you'll have a painted army on the table before next quarter's release.</p>
</div>
<span class="starter-path__rail" aria-hidden="true"></span>
<div class="starter-path__grid">
<article class="starter-path__step rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<span class="starter-path__numeral">I</span>
<span class="starter-path__icon" aria-hidden="true">
<svg viewBox="0 0 72 72"><circle cx="36" cy="36" r="22"/><circle cx="36" cy="36" r="13"/><path d="M36 8v8M36 56v8M8 36h8M56 36h8M16 16l5 5M51 51l5 5M56 16l-5 5M16 56l5-5"/><circle cx="36" cy="36" r="4" fill="#832D15" stroke="none"/></svg>
</span>
<h3 class="starter-path__title">Pick Your Chapter</h3>
<span class="starter-path__rule" aria-hidden="true"></span>
<p class="starter-path__copy">Ultramarines for the rulebook, Salamanders for the paint scheme, Black Templars if you mean it. We've written a guide to every one.</p>
<a class="starter-path__link" href="#">Read the Chapter Guide</a>
</article>
<article class="starter-path__step rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<span class="starter-path__numeral">II</span>
<span class="starter-path__icon" aria-hidden="true">
<svg viewBox="0 0 72 72"><rect x="14" y="20" width="44" height="38" rx="2"/><path d="M14 30h44M22 20v-6h28v6M28 40h16M28 48h12"/><circle cx="36" cy="40" r="2" fill="#832D15" stroke="none"/></svg>
</span>
<h3 class="starter-path__title">Muster Your Starter</h3>
<span class="starter-path__rule" aria-hidden="true"></span>
<p class="starter-path__copy">A Combat Patrol gets you to 25 power level. Add a captain, a transport, and you're tabletop-ready. The Army Builder will keep the points honest.</p>
<a class="starter-path__link" href="#">Open the Army Builder</a>
</article>
<article class="starter-path__step rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<span class="starter-path__numeral">III</span>
<span class="starter-path__icon" aria-hidden="true">
<svg viewBox="0 0 72 72"><path d="M16 56l8-8M22 50l8 8"/><path d="M28 44l16-16 6 6-16 16z"/><path d="M44 28l8-8 6 6-8 8z"/><circle cx="20" cy="58" r="4"/></svg>
</span>
<h3 class="starter-path__title">Paint & Field</h3>
<span class="starter-path__rule" aria-hidden="true"></span>
<p class="starter-path__copy">Three coats — base, wash, edge — and that grey plastic is tabletop-ready. Field it on Saturday, fix the gaps on Sunday.</p>
<a class="starter-path__link" href="#">Read the Painting How-To</a>
</article>
</div>
</div>
</section>
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ===== how-to-guides [REUSE guide-card] ===== -->
<section class="how-to-guides">
<div class="container">
<div class="section-head">
<span class="eyebrow-stamp">From the Workbench</span>
<h2 class="section-head__title">How-To Guides for Marines</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Three guides written by painters who finished the army, not painters who started one.</p>
</div>
<div class="how-to-guides__grid">
<article class="guide-card">
<div class="guide-card__media">
<img src="https://images.unsplash.com/photo-1605379399642-870262d3d051?w=800&auto=format&fit=crop&q=80" alt="Close-up of a Space Marine miniature being edge highlighted">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">14 min read</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · How-To</span>
<h3 class="guide-card__title">Edge Highlighting Power Armour</h3>
<p class="guide-card__copy">The right brush, the right thin, and the difference between a tabletop standard and a display piece.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
<article class="guide-card">
<div class="guide-card__media">
<img src="https://images.unsplash.com/photo-1567361808960-dec9cb578182?w=800&auto=format&fit=crop&q=80" alt="Magnets being glued to a miniature for swap-out weapon options">
<div class="guide-card__badges">
<span class="guide-card__badge">Beginner</span>
<span class="guide-card__badge guide-card__badge--time">9 min read</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Hobby · How-To</span>
<h3 class="guide-card__title">Magnetising Weapon Options</h3>
<p class="guide-card__copy">One sergeant, eight weapons, and a hundred future games. The bench drill the codex never tells you about.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
<article class="guide-card">
<div class="guide-card__media">
<img src="https://images.unsplash.com/photo-1635863138275-d9b33299680b?w=800&auto=format&fit=crop&q=80" alt="Painted Salamanders Space Marine with green and black scheme">
<div class="guide-card__badges">
<span class="guide-card__badge">Advanced</span>
<span class="guide-card__badge guide-card__badge--time">22 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · Video</span>
<h3 class="guide-card__title">Salamanders: Green on Black</h3>
<p class="guide-card__copy">The colour scheme that ate everyone's brushes in 2024 — and the four-paint recipe that actually finishes the job.</p>
<span class="guide-card__cta">Watch Guide</span>
</div>
</article>
</div>
</div>
</section>
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ===== painting-showcase [REUSE] ===== -->
<section class="painting-showcase">
<div class="container">
<div class="section-head">
<span class="eyebrow-stamp">Customer Painting · Marines</span>
<h2 class="section-head__title">The Chapter House Gallery</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Six Marines, six painters, six paint schemes the codex didn't invent. Tag your work and you'll find it here.</p>
</div>
<div class="painting-showcase__grid">
<a class="painting-showcase__tile painting-showcase__tile--lg" href="#">
<img src="https://images.unsplash.com/photo-1606503825008-909a67e63c3d?w=900&auto=format&fit=crop&q=80" alt="Ultramarines Tactical Squad painted">
<span class="painting-showcase__caption">Ultramarines Tactical Squad <span>· @brushhand</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--md" href="#">
<img src="https://images.unsplash.com/photo-1604011099229-1c92f43b8f48?w=700&auto=format&fit=crop&q=80" alt="Salamanders Captain">
<span class="painting-showcase__caption">Salamanders Captain <span>· @pelltheslow</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--sm" href="#">
<img src="https://images.unsplash.com/photo-1545987796-200677ee1011?w=600&auto=format&fit=crop&q=80" alt="Dark Angels Deathwing Terminator">
<span class="painting-showcase__caption">Deathwing Terminator <span>· @sigil_works</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--sm" href="#">
<img src="https://images.unsplash.com/photo-1635863138275-d9b33299680b?w=600&auto=format&fit=crop&q=80" alt="Raven Guard Vanguard">
<span class="painting-showcase__caption">Raven Guard Vanguard <span>· @oilsmoke</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--wide" href="#">
<img src="https://images.unsplash.com/photo-1567361808960-dec9cb578182?w=900&auto=format&fit=crop&q=80" alt="Blood Angels Death Company squad">
<span class="painting-showcase__caption">Death Company — Charge of the Damned <span>· @theglazer</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--md" href="#">
<img src="https://images.unsplash.com/photo-1605379399642-870262d3d051?w=700&auto=format&fit=crop&q=80" alt="Imperial Fists Intercessor squad">
<span class="painting-showcase__caption">Imperial Fists Intercessors <span>· @brassetcher</span></span>
</a>
</div>
<div class="painting-showcase__submit">
<a class="btn btn--ghost" href="#">Submit Your Space Marines Painting</a>
</div>
</div>
</section>
<!-- ===== loyalty-strip [REUSE — compact treatment] ===== -->
<section class="loyalty-strip">
<div class="loyalty-strip__inner">
<div class="loyalty-strip__head">
<span class="eyebrow-stamp">Loyalty</span>
<h2 class="loyalty-strip__title">Earn here. <em>Redeem anywhere.</em></h2>
<p class="loyalty-strip__copy">Every pound spent on Marines earns points across all four Nerdworks brands.</p>
<a class="btn" href="#">See Your Balance</a>
</div>
<div class="loyalty-strip__brands">
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">N</span><span class="loyalty-strip__name">Nerdworks</span></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">A</span><span class="loyalty-strip__name">ArtSabers</span></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">P</span><span class="loyalty-strip__name">Paragon</span></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">W</span><span class="loyalty-strip__name">War Dungeon</span></div>
</div>
</div>
</section>
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ===== related-categories [NEW block: related-category-card] ===== -->
<section class="related-categories">
<div class="container">
<div class="section-head">
<span class="eyebrow-stamp">If Marines Isn't Quite It</span>
<h2 class="section-head__title">Aisles Worth a Wander</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Four lateral steps from here — for the visitor still browsing intent.</p>
</div>
<div class="related-categories__grid">
<a class="related-category-card rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="related-category-card__media">
<img src="https://images.unsplash.com/photo-1601814933824-fd0b574dd592?w=600&auto=format&fit=crop&q=80" alt="Chaos Space Marines miniature">
<span class="related-category-card__system">40K</span>
</div>
<div class="related-category-card__body">
<h3 class="related-category-card__name">Chaos Space Marines</h3>
<p class="related-category-card__copy">The fallen brothers — same ceramite, different oath.</p>
<span class="related-category-card__cta">Cross the Eye</span>
</div>
</a>
<a class="related-category-card rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="related-category-card__media">
<img src="https://images.unsplash.com/photo-1604011099229-1c92f43b8f48?w=600&auto=format&fit=crop&q=80" alt="Imperial Guard infantry squad">
<span class="related-category-card__system">40K</span>
</div>
<div class="related-category-card__body">
<h3 class="related-category-card__name">Astra Militarum</h3>
<p class="related-category-card__copy">The mortal line. Forty men per box, all of them holding it together.</p>
<span class="related-category-card__cta">Stand the Line</span>
</div>
</a>
<a class="related-category-card rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="related-category-card__media">
<img src="https://images.unsplash.com/photo-1635863138275-d9b33299680b?w=600&auto=format&fit=crop&q=80" alt="Stormcast Eternals Liberator">
<span class="related-category-card__system">AoS</span>
</div>
<div class="related-category-card__body">
<h3 class="related-category-card__name">Stormcast Eternals</h3>
<p class="related-category-card__copy">Marines' parallel in the Mortal Realms — gold-plated and storm-forged.</p>
<span class="related-category-card__cta">Cross to Sigmar</span>
</div>
</a>
<a class="related-category-card rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="related-category-card__media">
<img src="https://images.unsplash.com/photo-1599689019379-22716bdf3275?w=600&auto=format&fit=crop&q=80" alt="Paints and brushes on a workbench">
<span class="related-category-card__system">Hobby</span>
</div>
<div class="related-category-card__body">
<h3 class="related-category-card__name">Painting & Hobby</h3>
<p class="related-category-card__copy">Every paint, brush, and tool we've ever recommended.</p>
<span class="related-category-card__cta">Open the Bench</span>
</div>
</a>
</div>
</div>
</section>
<!-- ===== newsletter-garrison [REUSE] ===== -->
<section class="newsletter-garrison">
<div class="container">
<div class="newsletter-garrison__panel rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="newsletter-garrison__copy">
<h3>Join the Garrison</h3>
<p>New Marines kit drops, pre-orders open, paint-night invites. Sent when there's something worth sending.</p>
</div>
<form class="newsletter-garrison__form" onsubmit="return false;">
<input type="email" placeholder="your.signal@dispatch.com">
<button type="submit">Enlist</button>
</form>
</div>
</div>
</section>
<!-- ===== site-footer [REUSE] ===== -->
<footer class="site-footer">
<div class="site-footer__columns">
<div class="site-footer__brand">
<div class="site-footer__brand-mark">
<span class="site-footer__cog" aria-hidden="true"></span>
<span class="site-footer__word">War Dungeon</span>
</div>
<p class="site-footer__copy">The workbench of warriors. Warhammer, Dungeons & Dragons, and the patience to finish the army.</p>
<span class="site-footer__badge">A Nerdworks Brand</span>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__list">
<li><a href="#">Warhammer 40,000</a></li>
<li><a href="#">Age of Sigmar</a></li>
<li><a href="#">The Old World</a></li>
<li><a href="#">Dungeons & Dragons</a></li>
<li><a href="#">Painting & Hobby</a></li>
<li><a href="#">Pre-orders</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Discover</h4>
<ul class="site-footer__list">
<li><a href="#">Army Builder</a></li>
<li><a href="#">Battle Simulator</a></li>
<li><a href="#">How-To Guides</a></li>
<li><a href="#">Painting Showcase</a></li>
<li><a href="#">Creators</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Help</h4>
<ul class="site-footer__list">
<li><a href="#">Contact</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Track Order</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Brand & Loyalty</h4>
<ul class="site-footer__list">
<li><a href="#">About War Dungeon</a></li>
<li><a href="#">Loyalty Programme</a></li>
<li><a href="#">Sister Brands</a></li>
<li><a href="#">Affiliate</a></li>
</ul>
</div>
</div>
<div class="site-footer__baseline">
<div class="site-footer__baseline-inner">
<div class="site-footer__pay">
<span>Visa</span><span>MC</span><span>Amex</span><span>PayPal</span><span>Klarna</span>
</div>
<div class="site-footer__social">
<a href="#" aria-label="Instagram">IG</a>
<a href="#" aria-label="YouTube">YT</a>
<a href="#" aria-label="TikTok">TT</a>
</div>
<div class="site-footer__legal">© 2026 War Dungeon · Privacy · Terms · Cookies</div>
</div>
</div>
</footer>
</body>
</html>