<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Marines — War Dungeon</title>
<link rel="preconnect" href="https://use.typekit.net">
<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;0,700;1,400&family=Courier+Prime&display=swap" rel="stylesheet">
<style>
/* ============================================================
TOKENS — verbatim from Frontier styleguide
Two-namespace law: chromatic identifiers vs surface semantics
============================================================ */
:root {
/* Chromatic identifiers — accents only, never background */
--primary: #C5A688;
--secondary: #D8C3B1;
--tertiary: #F4A479;
--dark: #1B1314;
--light: #FFFFFF;
--white: #FFFFFF;
--text: #613F34;
--neutral: #2B1B1C;
--accent: #832D15;
--positive: #4A6E50;
--negative: #C8442D;
/* Brand-named hues */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--sienna: #832D15;
/* Surface semantics — backgrounds + per-ground text roles */
--bg-page: var(--rodeo);
--bg-surface-light: var(--rodeo-light);
--bg-surface-dark: var(--cowboy);
--bg-surface-darker: var(--liquourice);
--bg-panel-darker: var(--liquourice);
--bg-panel-stamp: var(--sienna);
--bg-card-on-light: var(--rodeo-light);
--bg-card-on-dark: var(--liquourice);
--bg-elevated: var(--liquourice);
--bg-card: var(--liquourice);
--bg-surface-alt: var(--rodeo-light);
/* Text roles per ground */
--text-on-light: var(--caput);
--text-on-dark: var(--light);
--text-on-neutral: var(--light);
--text-on-accent: var(--light);
--text-on-stamp: var(--light);
--text-on-card-light: var(--caput);
--text-on-card-dark: var(--white);
--text-eyebrow: var(--sienna);
/* Typography */
--font-display: "modesto-condensed", "Palatino Linotype", "EB Garamond", Georgia, serif;
--font-body: "palatino-linotype", "Palatino", "EB Garamond", Georgia, serif;
/* Type scale */
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 48px;
--fs-h3: 36px;
--fs-h4: 24px;
--fs-body-lg: 22px;
--fs-body: 18px;
--fs-body-sm: 16px;
--fs-eyebrow: 13px;
--micro: 12px;
/* legacy aliases for catalogue blocks */
--body-lg: 22px;
--body: 18px;
--body-sm: 16px;
--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;
/* Shadows — hard edge, no blur */
--shadow-sm: 2px 2px 0 rgba(27, 19, 20, 0.85);
--shadow-md: 4px 4px 0 rgba(27, 19, 20, 0.9);
--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);
/* Containers + breakpoints */
--container-narrow: 720px;
--container-default: 1200px;
--container-wide: 1440px;
/* Gear pattern fill — bronze on dark, ~10% opacity */
--gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23F4A479' stroke-opacity='0.10' stroke-width='1'><circle cx='90' cy='90' r='22'/><circle cx='90' cy='90' r='36'/><circle cx='90' cy='90' r='50'/><path d='M90 30v6M90 144v6M30 90h6M144 90h6M48 48l4 4M128 128l4 4M132 48l-4 4M48 132l4-4'/><circle cx='90' cy='90' r='4' fill='%23F4A479' fill-opacity='0.30'/></g></svg>");
}
/* ============================================================
RESET + GROUND
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
font-size: 20px; /* lived v1 baseline per brief */
line-height: var(--lh-body);
color: var(--text-on-light);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.container { max-width: var(--container-wide); margin: 0 auto; padding: 0 40px; }
.container--default { max-width: var(--container-default); }
.container--narrow { max-width: var(--container-narrow); }
/* Rivets — shared ornament primitive (used by catalogue blocks) */
.rivet-panel { position: relative; }
.rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--bronze); border: 1px solid var(--caput); box-shadow: inset 0 0 0 1px rgba(27,19,20,0.4); z-index: 2; pointer-events: none; }
.rivet--tl { top: 8px; left: 8px; }
.rivet--tr { top: 8px; right: 8px; }
.rivet--bl { bottom: 8px; left: 8px; }
.rivet--br { bottom: 8px; right: 8px; }
/* ============================================================
REUSED — announcement-bar
============================================================ */
.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); }
/* ============================================================
REUSED — site-header
============================================================ */
.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: 8px; }
@media (max-width: 980px) { .site-header__nav { display: none; } .site-header__inner { grid-template-columns: auto 1fr; } }
/* ============================================================
REUSED — breadcrumbs
============================================================ */
.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); }
/* ============================================================
REUSED — btn
============================================================ */
.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%; }
/* ============================================================
REUSED — eyebrow-stamp
============================================================ */
.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); }
/* ============================================================
REUSED — section-head
============================================================ */
.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); }
.section-head--left { text-align: left; margin-bottom: 40px; }
.section-head--left .section-head__rule { margin: 12px 0 16px; }
.section-head--left .section-head__lede { margin-left: 0; }
/* ============================================================
REUSED — gear-divider
============================================================ */
.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); }
/* ============================================================
REUSED — plated-frame
============================================================ */
.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; }
/* ============================================================
REUSED — stamped-roundel
============================================================ */
.stamped-roundel { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 110px; height: 110px; border-radius: 50%; background: var(--bronze); color: var(--liquourice); border: 4px solid var(--caput); border-style: ridge; text-align: center; box-shadow: var(--shadow-md); flex-shrink: 0; font-family: var(--font-display); letter-spacing: var(--ls-wide); text-transform: uppercase; position: relative; }
.stamped-roundel::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--caput); opacity: 0.5; pointer-events: none; }
.stamped-roundel--review { width: 86px; height: 86px; font-size: 13px; }
.stamped-roundel--review .stars { font-size: 22px; line-height: 1; }
.stamped-roundel--loyalty { width: 140px; height: 140px; }
.stamped-roundel--loyalty .num { font-family: var(--font-display); font-size: 32px; line-height: 1; }
.stamped-roundel--loyalty .label { font-size: 10px; letter-spacing: var(--ls-widest); margin-top: 4px; line-height: 1.1; }
.stamped-roundel--stat { width: 132px; height: 132px; }
.stamped-roundel--stat .num { font-family: var(--font-display); font-size: 44px; line-height: 1; }
.stamped-roundel--stat .label { font-size: 10px; letter-spacing: var(--ls-widest); margin-top: 6px; line-height: 1.15; max-width: 88px; }
/* ============================================================
NEW — category-hero
Side-by-side at desktop: content half + diorama half.
Locked composition rule — never image-above-content at 1440px.
============================================================ */
.category-hero { background-color: var(--cowboy); background-image: var(--gear-pattern); color: var(--text-on-dark); padding: var(--sp-9) 0 var(--sp-10); position: relative; }
.category-hero__inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.category-hero__content { display: flex; flex-direction: column; gap: 0; max-width: 560px; position: relative; }
.category-hero__eyebrow-row { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.category-hero__chapter-mark { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.category-hero__chapter-mark::before { content: "✦"; color: var(--bronze); }
.category-hero__title { margin: 0; font-family: var(--font-display); font-size: clamp(64px, 9vw, var(--fs-display)); 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; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); margin: 28px 0 24px; }
.category-hero__lede { margin: 0 0 40px; font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--rodeo-light); }
.category-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.category-hero__meta { margin-top: 40px; padding-top: 24px; border-top: 1px dashed var(--caput); display: flex; gap: 32px; flex-wrap: wrap; 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__visual { position: relative; }
.category-hero__visual .plated-frame { padding: 12px; border-width: 6px; }
.category-hero__visual .plated-frame__media { aspect-ratio: 1 / 1; }
.category-hero__stat { position: absolute; left: -36px; bottom: -36px; z-index: 3; }
.category-hero__plaque { position: absolute; right: 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); }
@media (max-width: 980px) {
.category-hero { padding: var(--sp-7) 0 var(--sp-9); }
.category-hero__inner { grid-template-columns: 1fr; gap: 48px; }
.category-hero__visual { order: -1; }
.category-hero__stat { left: 16px; bottom: -32px; }
.category-hero__stat .stamped-roundel--stat { width: 108px; height: 108px; }
.category-hero__stat .stamped-roundel--stat .num { font-size: 36px; }
}
@media (max-width: 640px) {
.category-hero__title { font-size: clamp(48px, 14vw, 72px); }
.category-hero__ctas .btn { flex: 1 1 100%; }
}
/* ============================================================
NEW — category-positioning
Single editorial paragraph below hero. Full-width band but
constrained max-width (~700px) and centred. The brand
committing to the category in writing.
============================================================ */
.category-positioning { background: var(--rodeo); padding: var(--sp-9) 0; color: var(--text-on-light); position: relative; }
.category-positioning__inner { max-width: 760px; margin: 0 auto; padding: 0 40px; text-align: center; }
.category-positioning__mark { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--sienna); }
.category-positioning__mark::before, .category-positioning__mark::after { content: ""; width: 56px; height: 6px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 6'><path d='M0 3h56' stroke='%23832D15' stroke-width='1.2'/><circle cx='28' cy='3' r='2.4' fill='%23832D15'/></svg>"); }
.category-positioning__paragraph { margin: 0; font-family: var(--font-body); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.45; color: var(--caput); letter-spacing: 0; }
.category-positioning__paragraph em { font-style: italic; color: var(--sienna); }
/* ============================================================
NEW — sub-category-billboard
3×2 grid, full-width focal band. Each tile is a lit-diorama
billboard: image dominant, ridge bronze frame, corner rivets,
stamped sub-cat name, 1-line positioning, Browse CTA.
============================================================ */
.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__head { max-width: 1200px; margin: 0 auto 48px; padding: 0 40px; }
.sub-category-billboards__grid { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.sub-category-billboard { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; color: var(--text-on-card-dark); text-decoration: none; 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: 9px; height: 9px; }
.sub-category-billboard__media { position: relative; aspect-ratio: 4 / 3; background: var(--cowboy); border-bottom: 2px ridge var(--bronze); overflow: hidden; }
.sub-category-billboard__media img { width: 100%; height: 100%; object-fit: cover; }
.sub-category-billboard__count { position: absolute; top: 14px; right: 14px; padding: 4px 12px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; 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); }
.sub-category-billboard__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sub-category-billboard__plate { display: inline-block; align-self: flex-start; padding: 4px 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--cowboy); border: 1px solid var(--bronze); border-radius: var(--r-sm); margin-bottom: 4px; }
.sub-category-billboard__title { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.05; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.sub-category-billboard__copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.45; color: var(--rodeo-light); font-style: italic; }
.sub-category-billboard__cta { margin-top: auto; padding-top: 20px; 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: 10px; align-self: flex-start; border-top: 1px dashed var(--caput); width: 100%; padding-top: 20px; }
.sub-category-billboard__cta::after { content: "→"; transition: transform 120ms linear; }
.sub-category-billboard:hover .sub-category-billboard__cta::after { transform: translateX(4px); }
@media (max-width: 980px) { .sub-category-billboards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sub-category-billboards__grid { grid-template-columns: 1fr; } }
/* ============================================================
REUSED — product-card (featured products row)
============================================================ */
.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); overflow: hidden; }
.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; }
/* Featured products wrapper (light band for tone variation) */
.featured-products { background: var(--rodeo); padding: var(--sp-9) 0; color: var(--text-on-light); }
.featured-products__head { max-width: 1200px; margin: 0 auto 48px; padding: 0 40px; }
.featured-products__head .section-head__title { color: var(--text-on-light); }
.featured-products__head .section-head__lede { color: var(--caput); }
.featured-products__grid { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
@media (max-width: 980px) { .featured-products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .featured-products__grid { grid-template-columns: 1fr; } }
/* ============================================================
PAIRED ROW — starter-path + how-to-guides
Two halves at desktop, stacked on mobile. Section heads share row.
============================================================ */
.paired-row { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; }
.paired-row__inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: stretch; }
@media (max-width: 980px) { .paired-row__inner { grid-template-columns: 1fr; gap: var(--sp-8); } }
/* NEW — starter-path */
.starter-path { display: flex; flex-direction: column; height: 100%; }
.starter-path__head { margin-bottom: 32px; }
.starter-path__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(32px, 4vw, var(--fs-h2)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-dark); }
.starter-path__rule { display: block; width: 100px; height: 4px; background: var(--bronze); margin: 12px 0 16px; }
.starter-path__lede { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--rodeo-light); font-style: italic; max-width: 480px; }
.starter-path__steps { display: flex; flex-direction: column; gap: 0; flex: 1; counter-reset: starter-step; }
.starter-path__step { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 24px; padding: 28px 0; border-top: 1px dashed var(--caput); align-items: flex-start; counter-increment: starter-step; }
.starter-path__step:last-child { border-bottom: 1px dashed var(--caput); }
.starter-path__num { 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; color: var(--liquourice); box-shadow: var(--shadow-sm); position: relative; }
.starter-path__num::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid var(--caput); opacity: 0.5; }
.starter-path__num::after { content: counter(starter-step, decimal-leading-zero); }
.starter-path__num--icon { background: var(--liquourice); color: var(--bronze); }
.starter-path__step-body { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.starter-path__step-title { margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); line-height: 1.1; }
.starter-path__step-copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.45; color: var(--rodeo-light); }
.starter-path__step-link { margin-top: 6px; font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding-bottom: 3px; border-bottom: 1px dashed var(--bronze); }
.starter-path__step-link::after { content: "→"; }
/* REUSED-SHAPE — how-to-guides column (uses guide-card stack) */
.how-to-guides { display: flex; flex-direction: column; height: 100%; }
.how-to-guides__head { margin-bottom: 32px; }
.how-to-guides__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(32px, 4vw, var(--fs-h2)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-dark); }
.how-to-guides__rule { display: block; width: 100px; height: 4px; background: var(--bronze); margin: 12px 0 16px; }
.how-to-guides__lede { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--rodeo-light); font-style: italic; max-width: 480px; }
.how-to-guides__stack { display: flex; flex-direction: column; gap: var(--sp-5); flex: 1; }
/* REUSED — guide-card (used inside how-to-guides) */
.guide-card { position: relative; display: grid; grid-template-columns: 220px 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-card-dark); overflow: hidden; text-decoration: none; }
.guide-card__media { position: relative; overflow: hidden; background: var(--cowboy); border-right: 2px ridge var(--bronze); min-height: 200px; }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__badges { position: absolute; left: 10px; top: 10px; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.guide-card__badge { padding: 3px 10px; 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; display: grid; gap: 10px; align-content: center; }
.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: 22px; letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1.1; color: var(--white); }
.guide-card__copy { margin: 0; color: var(--rodeo-light); font-size: var(--fs-body-sm); line-height: 1.4; }
.guide-card__cta { margin-top: 8px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); display: inline-flex; gap: 8px; align-self: flex-start; }
.guide-card__cta::after { content: "→"; }
@media (max-width: 640px) { .guide-card { grid-template-columns: 1fr; } .guide-card__media { aspect-ratio: 16/10; border-right: 0; border-bottom: 2px ridge var(--bronze); } }
/* ============================================================
PAIRED ROW — painting-showcase + loyalty-strip
Masonry ~⅔ + loyalty ⅓ at desktop, stacked on mobile.
============================================================ */
.paired-row--showcase { background-color: var(--liquourice); }
.paired-row--showcase .paired-row__inner { grid-template-columns: 2fr 1fr; gap: var(--sp-8); }
@media (max-width: 980px) { .paired-row--showcase .paired-row__inner { grid-template-columns: 1fr; } }
/* REUSED — painting-showcase (masonry) */
.painting-showcase { display: flex; flex-direction: column; }
.painting-showcase__head { margin-bottom: 32px; }
.painting-showcase__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(32px, 4vw, var(--fs-h2)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-dark); }
.painting-showcase__rule { display: block; width: 100px; height: 4px; background: var(--bronze); margin: 12px 0 16px; }
.painting-showcase__lede { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--rodeo-light); font-style: italic; max-width: 520px; }
.painting-showcase__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; gap: 14px; }
.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; }
.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 3; grid-row: span 2; }
.painting-showcase__tile--sm { grid-column: span 2; grid-row: span 2; }
.painting-showcase__tile--wide { grid-column: span 4; grid-row: span 2; }
.painting-showcase__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; 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); display: block; font-size: 10px; margin-top: 2px; }
.painting-showcase__submit { margin-top: 32px; }
@media (max-width: 980px) { .painting-showcase__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; } .painting-showcase__tile--lg { grid-column: span 4; grid-row: span 3; } .painting-showcase__tile--md { grid-column: span 2; } .painting-showcase__tile--sm { grid-column: span 2; } .painting-showcase__tile--wide { grid-column: span 4; } }
/* REUSED — loyalty-strip (vertical-stacked variant inside paired row) */
.loyalty-strip { background-color: var(--bg-panel-stamp); border: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); border-radius: var(--r-md); 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>"); padding: 40px 32px; height: 100%; }
.loyalty-strip__inner { display: flex; flex-direction: column; gap: 28px; }
.loyalty-strip__head { display: flex; flex-direction: column; gap: 12px; }
.loyalty-strip__title { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); 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); display: block; }
.loyalty-strip__copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--rodeo-light); font-style: italic; line-height: 1.5; }
.loyalty-strip__brands { display: grid; grid-template-columns: 1fr; gap: 10px; }
.loyalty-strip__brand { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--caput); }
.loyalty-strip__mark { width: 36px; height: 36px; 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: 14px; letter-spacing: var(--ls-wider); flex-shrink: 0; }
.loyalty-strip__name { font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bronze); line-height: 1.1; display: block; }
.loyalty-strip__role { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: var(--ls-widest); color: var(--rodeo-light); margin-top: 3px; text-transform: uppercase; }
.loyalty-strip__cta { margin-top: 8px; }
.loyalty-strip__cta .btn { width: 100%; background: var(--liquourice); color: var(--bronze); }
/* ============================================================
PAIRED ROW — related-categories + newsletter
Two halves at desktop, stacked on mobile. The graceful exits.
============================================================ */
.paired-row--exits { background-color: var(--cowboy); background-image: var(--gear-pattern); }
.paired-row--exits .paired-row__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: stretch; }
@media (max-width: 980px) { .paired-row--exits .paired-row__inner { grid-template-columns: 1fr; } }
/* NEW — related-category-card */
.related-categories { display: flex; flex-direction: column; }
.related-categories__head { margin-bottom: 32px; }
.related-categories__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-dark); }
.related-categories__rule { display: block; width: 100px; height: 4px; background: var(--bronze); margin: 12px 0 16px; }
.related-categories__lede { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--rodeo-light); font-style: italic; max-width: 460px; }
.related-categories__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1; }
.related-category-card { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); padding: 0; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--text-on-card-dark); transition: transform 120ms linear; }
.related-category-card:hover { transform: translate(-1px, -1px); box-shadow: inset 0 0 0 1px var(--caput), 3px 3px 0 var(--caput); }
.related-category-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--cowboy); border-bottom: 1px solid var(--bronze); overflow: hidden; }
.related-category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.related-category-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,19,20,0) 50%, rgba(27,19,20,0.6) 100%); pointer-events: none; }
.related-category-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.related-category-card__title { margin: 0; font-family: var(--font-display); font-size: 19px; letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1.1; color: var(--white); }
.related-category-card__copy { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--rodeo-light); font-style: italic; }
.related-category-card__cta { margin-top: auto; padding-top: 10px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 6px; }
.related-category-card__cta::after { content: "→"; }
@media (max-width: 640px) { .related-categories__grid { grid-template-columns: 1fr; } }
/* REUSED — newsletter-garrison (panel inside paired-row half) */
.newsletter-garrison { display: flex; flex-direction: column; height: 100%; }
.newsletter-garrison__panel { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); color: var(--rodeo-light); flex: 1; justify-content: center; }
.newsletter-garrison__panel .rivet { width: 12px; height: 12px; }
.newsletter-garrison__eyebrow { margin: 0 0 4px; }
.newsletter-garrison__copy h3 { font-family: var(--font-display); font-size: clamp(32px, 3vw, 44px); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white); margin: 0 0 var(--sp-3); line-height: 1.05; }
.newsletter-garrison__copy h3 em { font-style: normal; color: var(--bronze); display: block; }
.newsletter-garrison__copy p { font-family: var(--font-body); font-style: italic; font-size: var(--fs-body); margin: 0; color: var(--rodeo-light); line-height: 1.5; }
.newsletter-garrison__rule { display: block; width: 90px; height: 4px; background: var(--bronze); margin: 0 0 8px; }
.newsletter-garrison__form { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: stretch; margin-top: 8px; }
.newsletter-garrison__form input { background: var(--cowboy); color: var(--white); border: 2px ridge var(--bronze); padding: 14px 16px; font-family: "Courier Prime", "Courier New", monospace; font-size: var(--fs-body); box-shadow: inset 0 0 0 1px var(--caput); border-radius: var(--r-sm); }
.newsletter-garrison__form input::placeholder { color: var(--rodeo-light); font-style: italic; opacity: 0.7; }
.newsletter-garrison__form button { background: var(--sienna); color: var(--white); border: 2px ridge var(--bronze); 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: inset 0 0 0 1px var(--caput), var(--shadow-stamp); border-radius: var(--r-sm); }
.newsletter-garrison__perks { margin-top: 14px; display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.newsletter-garrison__perks span { display: inline-flex; align-items: center; gap: 6px; }
.newsletter-garrison__perks span::before { content: ""; width: 8px; height: 8px; background: var(--bronze); border: 1px solid var(--caput); transform: rotate(45deg); }
@media (max-width: 640px) { .newsletter-garrison__form { grid-template-columns: 1fr; } }
/* ============================================================
REUSED — site-footer
============================================================ */
.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: 1440px; margin: 0 auto; }
.site-footer__brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.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; line-height: 1.5; }
.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: 1440px; 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-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--rodeo-light); }
@media (max-width: 980px) { .site-footer__columns { grid-template-columns: repeat(2, 1fr); padding: 64px 32px 32px; } }
@media (max-width: 640px) { .site-footer__columns { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<!-- ============================================================
ANNOUNCEMENT BAR (REUSED)
============================================================ -->
<div class="announcement-bar" role="region" aria-label="Announcements">
<div class="announcement-bar__inner">
<span class="announcement-bar__msg">Free UK shipping over £75 — and an extra ten percent off your first muster</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 (REUSED)
============================================================ -->
<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 · 2</span><span class="site-header__points">+340 PTS</span></a>
</div>
</div>
</header>
<!-- ============================================================
BREADCRUMBS (REUSED)
============================================================ -->
<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)
Side-by-side at desktop: content LEFT + diorama RIGHT.
Locked composition rule — never image-above-content at 1440px.
Primary CTA sits in a clean zone (no rivets crossing, no
gear-divider crossing, no stamped badges overlapping).
============================================================ -->
<section class="category-hero">
<div class="category-hero__inner">
<div class="category-hero__content">
<div class="category-hero__eyebrow-row">
<span class="eyebrow-stamp">M41 · Adeptus Astartes</span>
<span class="category-hero__chapter-mark">The Imperium of Mankind</span>
</div>
<h1 class="category-hero__title">Space <em>Marines</em></h1>
<span class="category-hero__rule" aria-hidden="true"></span>
<p class="category-hero__lede">Ten thousand years of war, every chapter you can name, and a hundred more you can't. The Adeptus Astartes are the front line of the Imperium — and the front line of most painters' first armies.</p>
<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 class="category-hero__meta">
<span>Codex Current</span>
<span>13 Founding Chapters</span>
<span>Newcomer to Tournament</span>
</div>
</div>
<div class="category-hero__visual">
<figure class="plated-frame">
<div class="plated-frame__media">
<img src="https://picsum.photos/seed/spacemarines-hero/720/720" alt="Lit diorama of a Space Marines tactical squad advancing through ruined Imperial cathedral terrain">
</div>
</figure>
<div class="category-hero__stat">
<div class="stamped-roundel stamped-roundel--stat">
<div class="num">94</div>
<div class="label">Kits<br>in stock<br>today</div>
</div>
</div>
<span class="category-hero__plaque">Diorama: Watchfire at Macragge — 2026</span>
</div>
</div>
</section>
<!-- ============================================================
CATEGORY POSITIONING (NEW)
Single editorial paragraph below hero. Full-width band but
constrained max-width (~760px) and centred.
The brand committing to the category in writing.
============================================================ -->
<section class="category-positioning">
<div class="category-positioning__inner">
<div class="category-positioning__mark" aria-hidden="true">Brand Statement</div>
<p class="category-positioning__paragraph">From Salamanders to Raven Guard, from a single Combat Patrol box to a tournament-grade two-thousand-point list — <em>we stock what you need, and we know how to paint it.</em> Codex-current ranges, the long-running fan favourites, and the paints, brushes and bits that make them yours.</p>
</div>
</section>
<!-- gear divider between focal bands -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
SUB-CATEGORY BILLBOARDS (NEW)
Full-width focal band, 3×2 grid.
============================================================ -->
<section class="sub-category-billboards">
<div class="sub-category-billboards__head">
<div class="section-head">
<span class="eyebrow-stamp">Walk the Aisles</span>
<h2 class="section-head__title">Find Your Way In</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Six routes into the Space Marines range. Each one's a mini-homepage of its own — have a look, take your time.</p>
</div>
</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://picsum.photos/seed/combatpatrol-marines/640/480" alt="Combat Patrol box contents arranged on a workbench">
<span class="sub-category-billboard__count">8 boxes</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">Start Here</span>
<h3 class="sub-category-billboard__title">Combat Patrols</h3>
<p class="sub-category-billboard__copy">A starter army in a box. Ten units, the codex pages, and enough work to keep you painting through winter.</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://picsum.photos/seed/marines-singles/640/480" alt="A Space Marines Captain miniature painted in Ultramarines colours">
<span class="sub-category-billboard__count">52 kits</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">Build the Chapter</span>
<h3 class="sub-category-billboard__title">Single Units & Characters</h3>
<p class="sub-category-billboard__copy">Captains, Tactical Squads, Terminators, Eradicators. The line of plastic that builds the chapter, one kit at a time.</p>
<span class="sub-category-billboard__cta">Browse Single Units</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://picsum.photos/seed/marines-codex/640/480" alt="Space Marines codex and supplementary rulebooks">
<span class="sub-category-billboard__count">11 books</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">Rules of Engagement</span>
<h3 class="sub-category-billboard__title">Codexes & Datasheets</h3>
<p class="sub-category-billboard__copy">The rules you'll actually need at the table. Current codex, supplement editions, and printable datasheet packs.</p>
<span class="sub-category-billboard__cta">Browse Codexes</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://picsum.photos/seed/marines-paints/640/480" alt="Citadel paint pots in marine chapter colours arranged on a workbench">
<span class="sub-category-billboard__count">38 sets</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">Paint the Chapter</span>
<h3 class="sub-category-billboard__title">Chapter Hobby Supplies</h3>
<p class="sub-category-billboard__copy">Citadel paints in the marquee Marine schemes — Macragge Blue, Mephiston Red, Salamander Green — plus the tools that make them sing.</p>
<span class="sub-category-billboard__cta">Browse Hobby Supplies</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://picsum.photos/seed/chaos-marines/640/480" alt="A Chaos Space Marines warrior miniature in dark armour">
<span class="sub-category-billboard__count">Cross-system</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">The Fallen Brotherhood</span>
<h3 class="sub-category-billboard__title">Chaos Space Marines</h3>
<p class="sub-category-billboard__copy">Black Legion through Death Guard. Everything you'll need if you'd rather field the heretic Astartes than chase them.</p>
<span class="sub-category-billboard__cta">Browse Chaos Marines</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://picsum.photos/seed/forge-world-marines/640/480" alt="A Forge World resin dreadnought painted as a centrepiece kit">
<span class="sub-category-billboard__count">14 kits</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">Centrepieces</span>
<h3 class="sub-category-billboard__title">Forge World & Display Kits</h3>
<p class="sub-category-billboard__copy">Resin behemoths, dreadnoughts, and bench-piece dioramas. The kits every collection wants one of.</p>
<span class="sub-category-billboard__cta">Browse Forge World</span>
</div>
</a>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
FEATURED PRODUCTS (REUSED product-card, light band)
Full-width focal band, 4-up row.
============================================================ -->
<section class="featured-products">
<div class="featured-products__head">
<div class="section-head section-head--on-light">
<span class="eyebrow-stamp">The Operator's Picks</span>
<h2 class="section-head__title">Four to Start a Conversation</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Not the bestsellers list — the four we'd put on the table if you walked in through the saloon door this morning.</p>
</div>
</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://picsum.photos/seed/product-combat-patrol/480/480" alt="Combat Patrol: Space Marines box on a clean white background">
</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">+30 PTS</span>
<img src="https://picsum.photos/seed/product-captain-gravis/480/480" alt="Captain in Gravis Armour kit on a clean white background">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Captain in Gravis Armour</h3>
<div class="product-card__rating">★★★★★ <em>(62)</em></div>
<div class="product-card__price-row"><span class="product-card__price">£30.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">+37 PTS</span>
<img src="https://picsum.photos/seed/product-codex-marines/480/480" alt="Codex: Space Marines rulebook cover on a clean white background">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Codex: Space Marines</h3>
<div class="product-card__rating">★★★★★ <em>(98)</em></div>
<div class="product-card__price-row"><span class="product-card__price">£37.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">Paint</span>
<span class="product-card__loyalty">+24 PTS</span>
<img src="https://picsum.photos/seed/product-paint-set/480/480" alt="Citadel Paint Set for Ultramarines on a clean white background">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Paint Set: Ultramarines</h3>
<div class="product-card__rating">★★★★☆ <em>(41)</em></div>
<div class="product-card__price-row"><span class="product-card__price">£24.00</span><button class="product-card__quickview">Quick View</button></div>
</div>
</article>
</div>
</section>
<!-- gear divider before paired-row band -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
PAIRED ROW — STARTER PATH (NEW) + HOW-TO GUIDES (REUSED guide-card)
Two halves at desktop: starter-path LEFT + guide-card stack RIGHT.
Mobile collapses to stacked sections.
============================================================ -->
<section class="paired-row paired-row--starter">
<div class="paired-row__inner">
<div class="starter-path">
<div class="starter-path__head">
<span class="eyebrow-stamp">For the New Hand</span>
<h2 class="starter-path__title">Start Your Marines Army</h2>
<span class="starter-path__rule" aria-hidden="true"></span>
<p class="starter-path__lede">Three moves. You'll be playing your first game by month's end — and you'll have something painted to be proud of, too.</p>
</div>
<div class="starter-path__steps">
<div class="starter-path__step">
<div class="starter-path__num" aria-hidden="true"></div>
<div class="starter-path__step-body">
<h3 class="starter-path__step-title">Choose Your Chapter</h3>
<p class="starter-path__step-copy">Ultramarines blue, Salamanders green, Raven Guard black — pick your colours, pick your code of honour. There's no wrong answer here.</p>
<a class="starter-path__step-link" href="#">Read the Chapter Guide</a>
</div>
</div>
<div class="starter-path__step">
<div class="starter-path__num" aria-hidden="true"></div>
<div class="starter-path__step-body">
<h3 class="starter-path__step-title">Build Your Starter Force</h3>
<p class="starter-path__step-copy">A Combat Patrol box gives you a captain, a squad, and reinforcements — enough to play your first game on Sunday. The Army Builder will lay it out for you.</p>
<a class="starter-path__step-link" href="#">Open the Army Builder</a>
</div>
</div>
<div class="starter-path__step">
<div class="starter-path__num" aria-hidden="true"></div>
<div class="starter-path__step-body">
<h3 class="starter-path__step-title">Paint & Field</h3>
<p class="starter-path__step-copy">Three coats and a clean edge gets grey plastic table-ready before the kettle's cold. Our guides walk every step from base to highlight.</p>
<a class="starter-path__step-link" href="#">Read the Painting Guides</a>
</div>
</div>
</div>
</div>
<div class="how-to-guides">
<div class="how-to-guides__head">
<span class="eyebrow-stamp">From the Workbench</span>
<h2 class="how-to-guides__title">How-To & Tutorials</h2>
<span class="how-to-guides__rule" aria-hidden="true"></span>
<p class="how-to-guides__lede">Marine-specific guides written by hobbyists who paint these kits week in and week out.</p>
</div>
<div class="how-to-guides__stack">
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/guide-edge-highlight/440/280" alt="Close-up of a brush edge-highlighting a Space Marine pauldron">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">18 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 technique that makes flat blue look like ceramite. A bench routine that takes a Saturday morning.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/guide-magnetising/440/280" alt="A Marine torso being magnetised with tweezers and rare-earth magnets">
<div class="guide-card__badges">
<span class="guide-card__badge">Advanced</span>
<span class="guide-card__badge guide-card__badge--time">24 min read</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Modelling · How-To</span>
<h3 class="guide-card__title">Magnetising Weapon Options</h3>
<p class="guide-card__copy">Swap your Captain's loadout between games. The drill bits, the magnet sizes, and the order to do it in.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/guide-salamanders/440/280" alt="A Salamanders Space Marine miniature painted green over a black undercoat">
<div class="guide-card__badges">
<span class="guide-card__badge">Beginner</span>
<span class="guide-card__badge guide-card__badge--time">12 min read</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · Chapter Scheme</span>
<h3 class="guide-card__title">Salamanders Green on Black</h3>
<p class="guide-card__copy">A clean walkthrough of the trickiest of the marquee schemes. Tested on twelve squads and counting.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
PAIRED ROW — PAINTING SHOWCASE (REUSED masonry) + LOYALTY STRIP (REUSED)
Masonry ~⅔ + loyalty ⅓ vertical at desktop.
============================================================ -->
<section class="paired-row paired-row--showcase">
<div class="paired-row__inner">
<div class="painting-showcase">
<div class="painting-showcase__head">
<span class="eyebrow-stamp">Painting Showcase</span>
<h2 class="painting-showcase__title">Painted by the Community</h2>
<span class="painting-showcase__rule" aria-hidden="true"></span>
<p class="painting-showcase__lede">Marines painted by War Dungeon hobbyists this fortnight. Tag your Instagram with #wardungeonpainted and we'll feature you here.</p>
</div>
<div class="painting-showcase__grid">
<a class="painting-showcase__tile painting-showcase__tile--lg" href="#">
<img src="https://picsum.photos/seed/paint-ultramarines/600/600" alt="Painted Ultramarines tactical squad on a city ruins base">
<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://picsum.photos/seed/paint-salamanders/500/400" alt="Painted Salamanders tactical marines">
<span class="painting-showcase__caption">Salamanders Squad <span>· @pelltheslow</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--sm" href="#">
<img src="https://picsum.photos/seed/paint-ravenguard/400/400" alt="Painted Raven Guard Phobos squad">
<span class="painting-showcase__caption">Raven Guard <span>· @hammerhand</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--sm" href="#">
<img src="https://picsum.photos/seed/paint-imperialfists/400/400" alt="Painted Imperial Fists captain in yellow armour">
<span class="painting-showcase__caption">Imperial Fists Captain <span>· @gloryorashes</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--md" href="#">
<img src="https://picsum.photos/seed/paint-bloodangels/500/400" alt="Painted Blood Angels Sanguinary Guard">
<span class="painting-showcase__caption">Blood Angels Sanguinary <span>· @benwalters</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--sm" href="#">
<img src="https://picsum.photos/seed/paint-whitescars/400/400" alt="Painted White Scars Outriders on jetbikes">
<span class="painting-showcase__caption">White Scars Outriders <span>· @thelastlatch</span></span>
</a>
</div>
<div class="painting-showcase__submit">
<a class="btn btn--ghost" href="#">Submit Your Marines Painting</a>
</div>
</div>
<aside class="loyalty-strip rivet-panel" aria-label="Loyalty programme">
<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="loyalty-strip__inner">
<div class="loyalty-strip__head">
<span class="eyebrow-stamp">Loyalty · Cross-Brand</span>
<h2 class="loyalty-strip__title">Earn Here. <em>Redeem Anywhere.</em></h2>
<p class="loyalty-strip__copy">Spend at War Dungeon, redeem at any sister brand. Same wallet, four shopfronts.</p>
</div>
<div class="loyalty-strip__brands">
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">W</span><div><span class="loyalty-strip__name">War Dungeon</span><span class="loyalty-strip__role">Warhammer & D&D</span></div></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">N</span><div><span class="loyalty-strip__name">Nerdworks</span><span class="loyalty-strip__role">TCG & Tabletop</span></div></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">A</span><div><span class="loyalty-strip__name">ArtSabers</span><span class="loyalty-strip__role">Helmets & Sabers</span></div></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">P</span><div><span class="loyalty-strip__name">Paragon</span><span class="loyalty-strip__role">Gaming Peripherals</span></div></div>
</div>
<div class="loyalty-strip__cta"><a class="btn" href="#">See Your Balance</a></div>
</div>
</aside>
</div>
</section>
<!-- gear divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ============================================================
PAIRED ROW — RELATED CATEGORIES (NEW) + NEWSLETTER (REUSED)
Two halves at desktop: the graceful exits.
============================================================ -->
<section class="paired-row paired-row--exits">
<div class="paired-row__inner">
<div class="related-categories">
<div class="related-categories__head">
<span class="eyebrow-stamp">Lateral Routes</span>
<h2 class="related-categories__title">If Marines Aren't For You</h2>
<span class="related-categories__rule" aria-hidden="true"></span>
<p class="related-categories__lede">Adjacent ranges worth a look. No hard sell — just the door that's nearest you.</p>
</div>
<div class="related-categories__grid">
<a class="related-category-card" href="#">
<div class="related-category-card__media">
<img src="https://picsum.photos/seed/cat-chaos/420/280" alt="Painted Chaos Space Marines miniatures">
</div>
<div class="related-category-card__body">
<h3 class="related-category-card__title">Chaos Space Marines</h3>
<p class="related-category-card__copy">The dark twin of the Astartes range.</p>
<span class="related-category-card__cta">Browse Chaos</span>
</div>
</a>
<a class="related-category-card" href="#">
<div class="related-category-card__media">
<img src="https://picsum.photos/seed/cat-guard/420/280" alt="Painted Astra Militarum Imperial Guard infantry">
</div>
<div class="related-category-card__body">
<h3 class="related-category-card__title">Astra Militarum</h3>
<p class="related-category-card__copy">Imperial Guard — humanity's first wall.</p>
<span class="related-category-card__cta">Browse Guard</span>
</div>
</a>
<a class="related-category-card" href="#">
<div class="related-category-card__media">
<img src="https://picsum.photos/seed/cat-stormcast/420/280" alt="Painted Stormcast Eternals miniatures from Age of Sigmar">
</div>
<div class="related-category-card__body">
<h3 class="related-category-card__title">Stormcast Eternals</h3>
<p class="related-category-card__copy">The Marine-shaped army on the Age of Sigmar side.</p>
<span class="related-category-card__cta">Browse Stormcast</span>
</div>
</a>
<a class="related-category-card" href="#">
<div class="related-category-card__media">
<img src="https://picsum.photos/seed/cat-painting/420/280" alt="Citadel paints and hobby tools on a workbench">
</div>
<div class="related-category-card__body">
<h3 class="related-category-card__title">Painting & Hobby Supplies</h3>
<p class="related-category-card__copy">Paints, brushes, glues, the lot. The whole workbench.</p>
<span class="related-category-card__cta">Browse Hobby</span>
</div>
</a>
</div>
</div>
<div class="newsletter-garrison">
<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__eyebrow"><span class="eyebrow-stamp">Newsletter</span></div>
<div class="newsletter-garrison__copy">
<h3>Join the <em>Garrison</em></h3>
<span class="newsletter-garrison__rule" aria-hidden="true"></span>
<p>New Marines kits, pre-orders, paint-night invites. Sent when there's something worth sending — never more than a fortnight apart.</p>
</div>
<form class="newsletter-garrison__form">
<input type="email" placeholder="ranger@your-garrison.uk" aria-label="Email address">
<button type="submit">Muster In</button>
</form>
<div class="newsletter-garrison__perks">
<span>10% off first order</span>
<span>500 bonus loyalty points</span>
<span>One mailout a fortnight</span>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
SITE FOOTER (REUSED)
============================================================ -->
<footer class="site-footer">
<div class="site-footer__columns">
<div class="site-footer__brand">
<div class="site-footer__brand-mark">
<span class="site-header__cog" aria-hidden="true"></span>
<span class="site-footer__word">War Dungeon</span>
</div>
<p class="site-footer__copy">The workbench of warriors. Warhammer 40,000, Age of Sigmar, The Old World, and Dungeons & Dragons — stocked, painted, and known back-to-front.</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="#">Tools</a></li>
<li><a href="#">Learn</a></li>
<li><a href="#">Creators</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Painting Showcase</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="#">FAQ</a></li>
<li><a href="#">Track Order</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</a></li>
<li><a href="#">Sister Brands</a></li>
<li><a href="#">Loyalty Programme</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__legal">© 2026 War Dungeon · Privacy · Terms · Cookies</div>
</div>
</div>
</footer>
</body>
</html>