<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>War Dungeon — Apothecary</title>
<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=Cinzel:wght@400;500;600;700;800;900&family=IM+Fell+English:ital@0;1&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet">
<style>
/* ---------- TOKENS — Apothecary styleguide ---------- */
:root {
/* Palette — verbatim values */
--primary: #832D15;
--secondary: #1B1314;
--tertiary: #613F34;
--dark: #1B1314;
--light: #C5A688;
--text: #FFFFFF;
--neutral: #2B1B1C;
--accent: #832D15;
--positive: #4A6E50;
--negative: #C8442D;
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--caput: #613F34;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--sienna: #832D15;
--bronze: #F4A479;
--white-text: #FFFFFF;
/* Semantic — Apothecary polarity */
--bg-page: var(--liquourice);
--bg-card: var(--rodeo-light);
--bg-card-alt: var(--rodeo);
--text-on-dark: var(--rodeo);
--text-on-card: var(--caput);
--text-on-accent: var(--white-text);
/* Typography */
--ff-display: "Cinzel", modesto-condensed, "IM Fell English", "Cormorant Garamond", palatino-linotype, Georgia, serif;
--ff-body: "IM Fell English", "Cormorant Garamond", palatino-linotype, Georgia, serif;
--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;
--fs-micro: 12px;
--lh-tight: 1.2;
--lh-heading: 1.35;
--lh-body: 1.5;
--lh-card: 1.35;
--lh-ui: 1.2;
--ls-tight: -0.01em;
--ls-heading: 0;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* Spacing */
--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: 0px;
--r-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
--r-xl: 21px;
/* Shadows — hard-edged, no blur */
--sh-sm: 1px 1px 0 rgba(97, 63, 52, 0.9);
--sh-md: 2px 2px 0 rgba(97, 63, 52, 0.95);
--sh-lg: 4px 4px 0 rgba(97, 63, 52, 1);
--sh-xl: 6px 6px 0 rgba(97, 63, 52, 1);
/* Borders */
--bw-hairline: 1px;
--bw-regular: 2px;
--bw-thick: 4px;
/* Containers */
--container-narrow: 720px;
--container-default: 1200px;
--container-wide: 1440px;
}
/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
background: var(--bg-page);
color: var(--text-on-dark);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
/* ---------- Containers ---------- */
.container {
max-width: var(--container-default);
margin: 0 auto;
padding: 0 40px;
}
.container--wide {
max-width: var(--container-wide);
}
/* ---------- Section bands (Apothecary darks only) ---------- */
.band { position: relative; }
.band--liq { background: var(--liquourice); color: var(--rodeo); }
.band--cowboy { background: var(--cowboy); color: var(--rodeo); }
.band--caput { background: var(--caput); color: var(--rodeo-light); }
.band--pad { padding: var(--sp-9) 0; }
.band--pad-lg { padding: var(--sp-10) 0; }
/* ---------- Apothecary overlay — patches for reused Frontier blocks ---------- */
/* Frontier blocks use var(--secondary) for chrome text/icon colours; under
Apothecary that token is liquourice, which renders invisible on the chrome
liquourice grounds. Overlay rules below restore visibility without re-authoring
the catalogue blocks. */
.announcement-bar { color: var(--rodeo); }
.announcement-bar__aside { color: var(--rodeo); }
.announcement-bar__aside a { color: var(--rodeo); }
.site-header { color: var(--rodeo); }
.site-header__icon { color: var(--rodeo); }
.site-header__nav a { color: var(--rodeo); }
/* ---------- Buttons (Apothecary) ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-6);
background: var(--sienna);
color: var(--white-text);
border: var(--bw-regular) solid var(--liquourice);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
font-family: var(--ff-display);
font-size: var(--fs-body);
font-weight: 700;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
line-height: var(--lh-ui);
transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: var(--sh-lg); }
.btn--ghost {
background: transparent;
color: var(--rodeo);
border-color: var(--rodeo);
box-shadow: none;
}
.btn--ghost:hover { background: var(--liquourice); color: var(--rodeo-light); border-color: var(--rodeo-light); }
.btn--secondary {
background: var(--rodeo-light);
color: var(--caput);
border-color: var(--caput);
}
.btn--secondary:hover { background: var(--rodeo); }
.btn--small { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-eyebrow); }
/* =================================================================
REUSED catalogue blocks — pasted verbatim from harvest
================================================================= */
/* ---------- announcement-bar (REUSED) ---------- */
.announcement-bar {
background: var(--liquourice);
color: var(--light);
border-bottom: var(--bw-hairline) solid var(--caput);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 600;
}
.announcement-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) 40px;
max-width: var(--container-wide);
margin: 0 auto;
}
.announcement-bar__rotator {
display: flex;
align-items: center;
gap: var(--sp-3);
flex: 1;
justify-content: center;
}
.announcement-bar__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--bronze);
}
.announcement-bar__msg { color: var(--light); }
.announcement-bar__msg em { color: var(--bronze); font-style: normal; }
.announcement-bar__aside {
display: flex; gap: var(--sp-5);
color: var(--secondary);
}
.announcement-bar__aside em { color: var(--bronze); font-style: normal; }
.announcement-bar__aside a:hover { color: var(--bronze); }
@media (max-width: 768px) {
.announcement-bar__aside { display: none; }
}
/* ---------- site-header (REUSED — verbatim, 5-item nav) ---------- */
.site-header {
background: var(--liquourice);
color: var(--light);
border-bottom: var(--bw-regular) solid var(--caput);
position: relative;
}
.site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sp-7);
padding: var(--sp-5) 40px;
max-width: var(--container-wide);
margin: 0 auto;
}
.site-header__brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--light); }
.site-header__mark {
width: 44px; height: 44px;
border: var(--bw-regular) solid var(--bronze);
border-radius: var(--r-md);
display: grid; place-items: center;
background: var(--cowboy);
color: var(--bronze);
font-weight: 800;
font-stretch: 75%;
font-size: 22px;
letter-spacing: -0.02em;
box-shadow: var(--sh-sm);
}
.site-header__wordmark {
font-size: 28px;
font-weight: 800;
font-stretch: 75%;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
line-height: 1;
}
.site-header__wordmark small {
display: block;
font-size: 10px;
letter-spacing: var(--ls-widest);
color: var(--bronze);
font-weight: 600;
margin-top: 4px;
}
.site-header__nav { display: flex; justify-content: center; gap: var(--sp-6); }
.site-header__nav a {
font-size: var(--fs-body-sm);
font-weight: 600;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
padding: var(--sp-2) 0;
border-bottom: var(--bw-regular) solid transparent;
white-space: nowrap;
transition: border-color 120ms ease;
}
.site-header__nav a:hover { border-bottom-color: var(--bronze); }
.site-header__nav a.is-active { border-bottom-color: var(--sienna); color: var(--bronze); }
.site-header__utility { display: flex; align-items: center; gap: var(--sp-5); }
.site-header__icon {
position: relative;
width: 32px; height: 32px;
display: grid; place-items: center;
color: var(--secondary);
}
.site-header__icon:hover { color: var(--bronze); }
.site-header__icon svg { width: 22px; height: 22px; }
.site-header__badge {
position: absolute;
top: -6px; right: -8px;
background: var(--sienna);
color: var(--light);
font-size: 10px;
font-weight: 800;
border-radius: var(--r-md);
padding: 2px 6px;
border: 1px solid var(--liquourice);
line-height: 1;
}
.site-header__points {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: var(--cowboy);
border: var(--bw-hairline) solid var(--bronze);
border-radius: var(--r-md);
font-size: 11px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--bronze);
}
@media (max-width: 1100px) {
.site-header__nav { display: none; }
}
/* ---------- gear-divider (REUSED) ---------- */
.gear-divider {
display: block;
width: 100%;
height: 22px;
color: var(--caput);
margin: 0;
}
.gear-divider svg { width: 100%; height: 100%; }
.gear-divider--light { color: var(--bronze); }
/* ---------- category-billboard (REUSED — rodeo card on dark) ---------- */
.category-billboard {
position: relative;
display: flex;
flex-direction: column;
background: var(--rodeo);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
overflow: hidden;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.category-billboard:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-lg); }
.category-billboard::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 2;
}
.category-billboard__art {
aspect-ratio: 4/3;
position: relative;
background:
radial-gradient(ellipse 60% 60% at 50% 65%, rgba(244,164,121,0.45) 0%, transparent 70%),
var(--cowboy);
border-bottom: var(--bw-regular) solid var(--caput);
display: grid; place-items: center;
color: var(--bronze);
overflow: hidden;
}
.category-billboard__art-label {
position: absolute; bottom: var(--sp-3); left: var(--sp-3);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
padding: 3px 8px;
background: rgba(27,19,20,0.6);
border: 1px solid var(--bronze);
color: var(--bronze);
}
.category-billboard__silhouette { width: 65%; opacity: 0.85; }
.category-billboard__body {
padding: var(--sp-6);
display: flex; flex-direction: column;
gap: var(--sp-3);
flex: 1;
}
.category-billboard__eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.category-billboard__title {
font-size: var(--fs-h4);
font-weight: 800;
font-stretch: 75%;
line-height: var(--lh-tight);
color: var(--liquourice);
letter-spacing: var(--ls-tight);
}
.category-billboard__copy {
font-size: var(--fs-body-sm);
color: var(--caput);
line-height: var(--lh-card);
flex: 1;
}
.category-billboard__cta {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
color: var(--sienna);
display: inline-flex; align-items: center; gap: var(--sp-2);
margin-top: var(--sp-3);
border-bottom: 1px solid var(--sienna);
padding-bottom: 2px;
align-self: flex-start;
}
/* ---------- tutorial-card (REUSED — rodeo card on dark) ---------- */
.tutorial-card {
position: relative;
background: var(--rodeo);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.tutorial-card:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-lg); }
.tutorial-card::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23613F34'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 2;
}
.tutorial-card__art {
aspect-ratio: 16/10;
position: relative;
background:
radial-gradient(ellipse 70% 60% at 45% 60%, rgba(244,164,121,0.35) 0%, transparent 70%),
var(--cowboy);
border-bottom: var(--bw-regular) solid var(--caput);
display: grid; place-items: center;
color: var(--bronze);
overflow: hidden;
}
.tutorial-card__art-label {
position: absolute; bottom: var(--sp-3); left: var(--sp-3);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
padding: 3px 8px;
background: rgba(27,19,20,0.6);
border: 1px solid var(--bronze);
}
.tutorial-card__badges {
position: absolute; top: var(--sp-3); left: var(--sp-3);
display: flex; gap: var(--sp-2);
z-index: 3;
}
.tutorial-card__badge {
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 4px 8px;
background: var(--liquourice);
color: var(--light);
border: 1px solid var(--bronze);
line-height: 1;
}
.tutorial-card__badge--beginner { background: var(--positive); color: var(--light); border-color: var(--liquourice); }
.tutorial-card__badge--intermediate { background: var(--bronze); color: var(--liquourice); border-color: var(--liquourice); }
.tutorial-card__badge--advanced { background: var(--sienna); color: var(--light); border-color: var(--liquourice); }
.tutorial-card__format {
position: absolute; top: var(--sp-3); right: var(--sp-3);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 4px 8px;
background: rgba(27,19,20,0.85);
color: var(--bronze);
border: 1px solid var(--bronze);
z-index: 3;
}
.tutorial-card__body {
padding: var(--sp-6);
display: flex; flex-direction: column;
gap: var(--sp-3); flex: 1;
}
.tutorial-card__category {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.tutorial-card__title {
font-size: var(--fs-h4);
font-weight: 800;
font-stretch: 75%;
line-height: var(--lh-tight);
color: var(--liquourice);
letter-spacing: var(--ls-tight);
}
.tutorial-card__excerpt {
font-size: var(--fs-body-sm);
color: var(--caput);
line-height: var(--lh-card);
flex: 1;
}
.tutorial-card__meta {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--caput);
padding-top: var(--sp-4);
border-top: 1px solid var(--caput);
margin-top: var(--sp-3);
}
.tutorial-card__cta {
color: var(--sienna);
font-weight: 700;
}
.tutorial-card__cta:hover { color: var(--liquourice); }
/* ---------- creator-quote (REUSED — dark-ground pull quote) ---------- */
.creator-quote {
background: var(--cowboy);
color: var(--secondary);
border: var(--bw-regular) solid var(--liquourice);
border-radius: var(--r-md);
box-shadow: var(--sh-lg);
padding: var(--sp-7);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.creator-quote__mark {
font-size: 96px;
line-height: 1;
color: var(--bronze);
font-weight: 800;
font-stretch: 80%;
margin-bottom: var(--sp-3);
}
.creator-quote__text {
font-size: var(--fs-h4);
line-height: var(--lh-heading);
font-style: italic;
color: var(--light);
margin-bottom: var(--sp-5);
letter-spacing: var(--ls-tight);
}
.creator-quote__attrib {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
}
/* ---------- painting-tile (REUSED — dark photo tile) ---------- */
.painting-tile {
position: relative;
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-sm);
overflow: hidden;
display: block;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.painting-tile:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-md); }
.painting-tile::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23F4A479'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23F4A479'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23F4A479'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23F4A479'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 3;
}
.painting-tile__art {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 70% at 50% 60%, rgba(244,164,121,0.35) 0%, transparent 70%),
var(--liquourice);
display: grid; place-items: center;
color: var(--bronze);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
.painting-tile__overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--sp-3) var(--sp-4);
background: rgba(27,19,20,0.78);
color: var(--light);
font-size: var(--fs-body-sm);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-3);
border-top: 1px solid var(--bronze);
z-index: 2;
}
.painting-tile__author { font-weight: 700; letter-spacing: var(--ls-tight); }
.painting-tile__game {
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
}
.painting-tile--tall { grid-row: span 2; }
.painting-tile--wide { grid-column: span 2; }
/* =================================================================
NEW Apothecary blocks — authored fresh for the polarity flip
================================================================= */
/* ---------- hero (NEW) — dark ground, rodeo-light content slab beside a cowboy diorama frame ---------- */
.hero {
background: var(--cowboy);
padding: var(--sp-9) 0 var(--sp-10);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 90% at 20% 30%, rgba(131,45,21,0.25) 0%, transparent 60%),
radial-gradient(ellipse 60% 90% at 80% 70%, rgba(97,63,52,0.4) 0%, transparent 60%);
pointer-events: none;
}
.hero__frame {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
border: var(--bw-thick) solid var(--rodeo);
border-radius: var(--r-md);
box-shadow: var(--sh-xl);
background: var(--liquourice);
overflow: hidden;
min-height: 580px;
}
.hero__art {
position: relative;
background:
radial-gradient(ellipse 60% 70% at 40% 55%, rgba(244,164,121,0.30) 0%, rgba(244,164,121,0) 60%),
radial-gradient(ellipse 80% 60% at 60% 80%, rgba(131,45,21,0.55) 0%, rgba(27,19,20,0) 70%),
var(--liquourice);
border-right: var(--bw-thick) solid var(--rodeo);
display: grid;
place-items: center;
color: var(--rodeo);
overflow: hidden;
}
.hero__art-mark {
position: absolute; inset: var(--sp-5);
border: var(--bw-hairline) dashed rgba(197,166,136,0.35);
border-radius: var(--r-sm);
pointer-events: none;
}
.hero__art-label {
position: absolute; bottom: var(--sp-5); left: var(--sp-5);
padding: var(--sp-2) var(--sp-3);
background: rgba(27,19,20,0.75);
border: 1px solid var(--rodeo);
color: var(--rodeo);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
.hero__art-silhouette { width: 70%; max-width: 360px; opacity: 0.85; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.6)); }
.hero__content {
padding: var(--sp-9) var(--sp-8);
background: var(--rodeo-light);
color: var(--caput);
display: flex; flex-direction: column; justify-content: center;
position: relative;
}
.hero__content::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E");
background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
background-repeat: no-repeat;
background-size: 8px 8px;
}
.hero__eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
color: var(--sienna);
display: inline-flex; align-items: center; gap: var(--sp-3);
margin-bottom: var(--sp-5);
font-family: var(--ff-display);
}
.hero__eyebrow::before, .hero__eyebrow::after {
content: ''; width: 28px; height: 1px; background: var(--sienna);
}
.hero__title {
font-family: var(--ff-display);
font-size: 76px;
line-height: 0.98;
letter-spacing: -0.01em;
font-weight: 800;
color: var(--liquourice);
margin-bottom: var(--sp-5);
}
.hero__title em { color: var(--sienna); font-style: italic; font-weight: 600; }
.hero__lede {
font-family: var(--ff-body);
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--caput);
max-width: 460px;
margin-bottom: var(--sp-7);
font-style: italic;
}
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.hero__actions .btn--ghost { color: var(--caput); border-color: var(--caput); }
.hero__actions .btn--ghost:hover { background: var(--caput); color: var(--rodeo-light); border-color: var(--caput); }
@media (max-width: 900px) {
.hero__frame { grid-template-columns: 1fr; min-height: 0; }
.hero__art { aspect-ratio: 4/3; border-right: none; border-bottom: var(--bw-thick) solid var(--rodeo); }
.hero__content { padding: var(--sp-7) var(--sp-5); }
.hero__title { font-size: 48px; }
}
/* ---------- trust-strip (NEW) — dark band, rodeo-light card cells ---------- */
.trust-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
position: relative;
}
.trust-strip__cell {
position: relative;
background: var(--rodeo-light);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
padding: var(--sp-6) var(--sp-5);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-3);
}
.trust-strip__cell::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 2;
}
.trust-strip__icon {
width: 44px; height: 44px;
display: grid; place-items: center;
color: var(--sienna);
}
.trust-strip__icon svg { width: 36px; height: 36px; }
.trust-strip__title {
font-family: var(--ff-display);
font-size: var(--fs-body);
font-weight: 700;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--liquourice);
}
.trust-strip__copy {
font-size: var(--fs-body-sm);
color: var(--caput);
line-height: var(--lh-card);
font-style: italic;
}
@media (max-width: 900px) {
.trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.trust-strip { grid-template-columns: 1fr; }
}
/* ---------- tool-teaser-card (NEW) — rodeo-light body on liquourice art panel ---------- */
.tool-teaser-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 280px auto;
background: var(--rodeo-light);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-lg);
overflow: hidden;
position: relative;
}
.tool-teaser-card::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E");
background-position:
10px 10px, calc(100% - 10px) 10px,
10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
50% 10px, 50% calc(100% - 10px),
10px 50%, calc(100% - 10px) 50%;
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 2;
}
.tool-teaser-card__art {
position: relative;
background:
radial-gradient(ellipse 50% 80% at 30% 60%, rgba(244,164,121,0.35) 0%, transparent 70%),
var(--liquourice);
display: grid; place-items: center;
color: var(--rodeo);
border-bottom: var(--bw-regular) solid var(--caput);
overflow: hidden;
}
.tool-teaser-card__plate {
border: var(--bw-regular) solid var(--rodeo);
padding: var(--sp-5) var(--sp-6);
background: rgba(27,19,20,0.6);
text-align: center;
border-radius: var(--r-md);
letter-spacing: var(--ls-widest);
font-size: var(--fs-eyebrow);
text-transform: uppercase;
font-weight: 700;
font-family: var(--ff-display);
}
.tool-teaser-card__plate svg {
width: 56px; height: 56px;
margin: 0 auto var(--sp-3);
display: block;
}
.tool-teaser-card__status {
position: absolute;
top: var(--sp-5); right: var(--sp-5);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
padding: var(--sp-2) var(--sp-3);
background: var(--sienna);
color: var(--white-text);
border: var(--bw-hairline) solid var(--liquourice);
font-weight: 700;
font-family: var(--ff-display);
}
.tool-teaser-card__status--coming {
background: var(--cowboy);
color: var(--rodeo);
border-color: var(--rodeo);
}
.tool-teaser-card__body {
padding: var(--sp-6) var(--sp-7);
background: var(--rodeo-light);
}
.tool-teaser-card__eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
margin-bottom: var(--sp-3);
font-family: var(--ff-display);
}
.tool-teaser-card__title {
font-family: var(--ff-display);
font-size: var(--fs-h3);
line-height: var(--lh-tight);
font-weight: 800;
color: var(--liquourice);
margin-bottom: var(--sp-3);
letter-spacing: var(--ls-tight);
}
.tool-teaser-card__copy {
font-size: var(--fs-body);
color: var(--caput);
margin-bottom: var(--sp-6);
font-style: italic;
line-height: var(--lh-body);
}
/* ---------- product-card (NEW) — rodeo-light card on dark ground ---------- */
.product-card {
position: relative;
background: var(--rodeo-light);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.product-card:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-lg); }
.product-card::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E");
background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
background-repeat: no-repeat;
background-size: 8px 8px;
z-index: 3;
}
.product-card__art {
position: relative;
aspect-ratio: 1/1;
background: var(--rodeo);
border-bottom: var(--bw-regular) solid var(--caput);
display: grid; place-items: center;
color: var(--caput);
}
.product-card__art svg { width: 60%; opacity: 0.5; }
.product-card__loyalty {
position: absolute;
top: var(--sp-3); right: var(--sp-3);
width: 52px; height: 52px;
border-radius: 50%;
background: var(--sienna);
border: var(--bw-regular) solid var(--liquourice);
display: grid; place-items: center;
text-align: center; line-height: 1;
color: var(--white-text);
font-weight: 800;
font-family: var(--ff-display);
box-shadow: var(--sh-sm);
z-index: 4;
}
.product-card__loyalty-pts { font-size: 18px; letter-spacing: -0.02em; }
.product-card__loyalty-lbl { font-size: 8px; letter-spacing: var(--ls-widest); text-transform: uppercase; margin-top: 1px; }
.product-card__tag {
position: absolute;
top: var(--sp-3); left: var(--sp-3);
font-size: 10px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: 700;
padding: 3px 8px;
background: var(--liquourice);
color: var(--rodeo);
border: 1px solid var(--rodeo);
font-family: var(--ff-display);
z-index: 4;
}
.product-card__body {
padding: var(--sp-5);
display: flex; flex-direction: column;
gap: var(--sp-2); flex: 1;
}
.product-card__game {
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.product-card__title {
font-family: var(--ff-display);
font-size: var(--fs-body);
font-weight: 700;
color: var(--liquourice);
line-height: var(--lh-card);
letter-spacing: var(--ls-tight);
}
.product-card__rating {
display: inline-flex; align-items: center; gap: var(--sp-2);
color: var(--sienna);
font-size: var(--fs-body-sm);
}
.product-card__rating svg { width: 14px; height: 14px; fill: currentColor; }
.product-card__rating-count { color: var(--caput); opacity: 0.75; font-size: var(--fs-body-sm); font-style: italic; }
.product-card__price-row {
display: flex; justify-content: space-between; align-items: center;
margin-top: auto;
padding-top: var(--sp-4);
border-top: 1px dashed var(--caput);
}
.product-card__price {
font-family: var(--ff-display);
font-size: var(--fs-body-lg);
font-weight: 800;
color: var(--sienna);
letter-spacing: var(--ls-tight);
}
.product-card__qv {
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
color: var(--liquourice);
border-bottom: 1px solid var(--liquourice);
padding-bottom: 1px;
}
.product-card__qv:hover { color: var(--sienna); border-bottom-color: var(--sienna); }
/* ---------- creator-card (NEW) — rodeo-light card on dark ---------- */
.creator-card {
position: relative;
background: var(--rodeo-light);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-lg);
padding: var(--sp-7);
display: grid;
grid-template-columns: 180px 1fr;
gap: var(--sp-6);
align-items: start;
}
.creator-card::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E");
background-position:
10px 10px, calc(100% - 10px) 10px,
10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
50% 10px, 50% calc(100% - 10px),
10px 50%, calc(100% - 10px) 50%;
background-repeat: no-repeat;
background-size: 8px 8px;
}
.creator-card__avatar {
width: 180px; height: 180px;
border: var(--bw-thick) solid var(--liquourice);
border-radius: var(--r-md);
background:
radial-gradient(ellipse 70% 70% at 50% 40%, rgba(244,164,121,0.5) 0%, transparent 70%),
var(--liquourice);
display: grid; place-items: center;
color: var(--rodeo);
box-shadow: var(--sh-sm);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
}
.creator-card__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.creator-card__eyebrow {
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.creator-card__name {
font-family: var(--ff-display);
font-size: var(--fs-h3);
font-weight: 800;
line-height: var(--lh-tight);
color: var(--liquourice);
letter-spacing: var(--ls-tight);
}
.creator-card__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.creator-card__tag {
font-size: 11px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
padding: 3px 10px;
background: var(--liquourice);
color: var(--rodeo);
border: 1px solid var(--caput);
border-radius: var(--r-md);
font-weight: 700;
font-family: var(--ff-display);
}
.creator-card__copy {
font-size: var(--fs-body);
color: var(--caput);
line-height: var(--lh-body);
font-style: italic;
}
.creator-card__cta-row {
display: flex; gap: var(--sp-4); align-items: center;
margin-top: var(--sp-3);
}
.creator-card__stats {
display: flex; gap: var(--sp-6);
padding-top: var(--sp-4);
border-top: 1px solid var(--caput);
}
.creator-card__stat-num {
font-family: var(--ff-display);
font-size: var(--fs-h4);
font-weight: 800;
color: var(--sienna);
letter-spacing: var(--ls-tight);
line-height: 1;
}
.creator-card__stat-lbl {
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--caput);
font-weight: 600;
margin-top: 4px;
font-family: var(--ff-display);
}
@media (max-width: 900px) {
.creator-card { grid-template-columns: 1fr; }
.creator-card__avatar { margin: 0 auto; }
}
/* ---------- creator-thumb (NEW) — rodeo-light chip on dark ---------- */
.creator-thumb {
flex: 0 0 220px;
background: var(--rodeo-light);
border: var(--bw-regular) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-sm);
padding: var(--sp-5);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-3);
scroll-snap-align: start;
position: relative;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.creator-thumb:hover { transform: translate(-2px,-2px); box-shadow: var(--sh-md); }
.creator-thumb__avatar {
width: 92px; height: 92px;
border-radius: 50%;
border: var(--bw-regular) solid var(--liquourice);
background:
radial-gradient(ellipse 70% 70% at 50% 40%, rgba(244,164,121,0.45) 0%, transparent 70%),
var(--liquourice);
color: var(--rodeo);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
display: grid; place-items: center;
}
.creator-thumb__name {
font-family: var(--ff-display);
font-size: var(--fs-body);
font-weight: 700;
color: var(--liquourice);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
}
.creator-thumb__tags {
font-family: var(--ff-display);
font-size: 11px;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
/* ---------- loyalty-strip (NEW) — caput band, rodeo-light cells, sienna self-cell ---------- */
.loyalty-strip {
background: var(--caput);
border-top: var(--bw-regular) solid var(--liquourice);
border-bottom: var(--bw-regular) solid var(--liquourice);
padding: var(--sp-8) 0;
position: relative;
color: var(--rodeo-light);
}
.loyalty-strip__inner {
max-width: var(--container-default);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-8);
align-items: center;
}
.loyalty-strip__eyebrow {
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
margin-bottom: var(--sp-3);
display: block;
}
.loyalty-strip__title {
font-family: var(--ff-display);
font-size: var(--fs-h2);
font-weight: 800;
color: var(--rodeo-light);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
margin-bottom: var(--sp-4);
}
.loyalty-strip__title em { color: var(--bronze); font-style: italic; font-weight: 600; }
.loyalty-strip__copy {
font-size: var(--fs-body-lg);
color: var(--rodeo);
margin-bottom: var(--sp-5);
max-width: 540px;
font-style: italic;
}
.loyalty-strip__brands { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.loyalty-strip__brand {
border: var(--bw-regular) solid var(--liquourice);
background: var(--rodeo-light);
padding: var(--sp-5);
min-width: 140px;
text-align: center;
border-radius: var(--r-md);
box-shadow: var(--sh-md);
font-family: var(--ff-display);
font-weight: 800;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--liquourice);
font-size: var(--fs-body);
line-height: 1.1;
}
.loyalty-strip__brand small {
display: block;
font-size: 10px;
letter-spacing: var(--ls-widest);
color: var(--sienna);
font-weight: 700;
margin-top: 4px;
}
.loyalty-strip__brand--self {
background: var(--sienna);
color: var(--white-text);
border-color: var(--liquourice);
box-shadow: var(--sh-lg);
}
.loyalty-strip__brand--self small { color: var(--bronze); }
@media (max-width: 900px) {
.loyalty-strip__inner { grid-template-columns: 1fr; }
}
/* ---------- newsletter-signup (NEW) — rodeo-light panel on dark ---------- */
.newsletter-signup {
background: var(--rodeo-light);
border: var(--bw-thick) solid var(--caput);
border-radius: var(--r-md);
box-shadow: var(--sh-xl);
padding: var(--sp-8);
max-width: 880px;
margin: 0 auto;
text-align: center;
position: relative;
}
.newsletter-signup::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E"),
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23832D15'/%3E%3C/svg%3E");
background-position:
12px 12px, calc(100% - 12px) 12px,
12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px),
50% 12px, 50% calc(100% - 12px),
12px 50%, calc(100% - 12px) 50%;
background-repeat: no-repeat;
background-size: 8px 8px;
}
.newsletter-signup__plate {
display: inline-block;
border: var(--bw-regular) solid var(--sienna);
padding: var(--sp-2) var(--sp-5);
margin-bottom: var(--sp-5);
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
}
.newsletter-signup__title {
font-family: var(--ff-display);
font-size: var(--fs-h2);
font-weight: 800;
color: var(--liquourice);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
margin-bottom: var(--sp-4);
}
.newsletter-signup__lede {
font-size: var(--fs-body-lg);
color: var(--caput);
margin-bottom: var(--sp-6);
max-width: 540px;
margin-left: auto;
margin-right: auto;
font-style: italic;
}
.newsletter-signup__form {
display: grid;
grid-template-columns: 1fr auto;
max-width: 560px;
margin: 0 auto;
border: var(--bw-regular) solid var(--liquourice);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
background: var(--white-text);
overflow: hidden;
}
.newsletter-signup__input {
font-family: var(--ff-body);
font-size: var(--fs-body);
padding: var(--sp-4) var(--sp-5);
border: none;
background: var(--white-text);
color: var(--liquourice);
outline: none;
}
.newsletter-signup__input::placeholder { color: var(--caput); opacity: 0.6; font-style: italic; }
.newsletter-signup__submit {
background: var(--sienna);
color: var(--white-text);
font-family: var(--ff-display);
font-weight: 800;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-size: var(--fs-body);
padding: 0 var(--sp-6);
border: none;
border-left: var(--bw-regular) solid var(--liquourice);
}
.newsletter-signup__submit:hover { background: var(--liquourice); color: var(--rodeo); }
.newsletter-signup__perks {
margin-top: var(--sp-5);
display: flex;
justify-content: center;
gap: var(--sp-6);
flex-wrap: wrap;
font-size: var(--fs-body-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--caput);
font-weight: 600;
font-family: var(--ff-display);
}
.newsletter-signup__perk { display: flex; align-items: center; gap: var(--sp-2); }
/* ---------- site-footer (NEW) — Apothecary text colours ---------- */
.site-footer {
background: var(--liquourice);
color: var(--rodeo);
padding-top: var(--sp-9);
}
.site-footer__columns {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
gap: var(--sp-7);
padding-bottom: var(--sp-8);
border-bottom: 1px solid var(--caput);
}
.site-footer__brand-col { display: flex; flex-direction: column; gap: var(--sp-4); }
.site-footer__mark {
font-family: var(--ff-display);
font-size: 28px;
font-weight: 800;
color: var(--rodeo-light);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
line-height: 1;
}
.site-footer__tagline {
font-size: var(--fs-body-sm);
color: var(--rodeo);
font-style: italic;
line-height: var(--lh-card);
}
.site-footer__signoff {
margin-top: auto;
border-top: 1px solid var(--caput);
padding-top: var(--sp-4);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-family: var(--ff-display);
}
.site-footer__col-title {
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
margin-bottom: var(--sp-5);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--caput);
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; padding: 0; }
.site-footer__list a {
font-size: var(--fs-body-sm);
color: var(--rodeo);
line-height: var(--lh-card);
}
.site-footer__list a:hover { color: var(--bronze); }
.site-footer__newsletter-mini {
background: var(--cowboy);
border: 1px solid var(--caput);
border-radius: var(--r-md);
padding: var(--sp-4);
margin-top: var(--sp-3);
}
.site-footer__newsletter-mini label {
font-family: var(--ff-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
display: block;
margin-bottom: var(--sp-3);
}
.site-footer__newsletter-mini form {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-2);
}
.site-footer__newsletter-mini input {
font-family: var(--ff-body);
font-size: var(--fs-body-sm);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--caput);
background: var(--liquourice);
color: var(--rodeo-light);
border-radius: var(--r-sm);
}
.site-footer__newsletter-mini button {
background: var(--sienna);
color: var(--white-text);
font-family: var(--ff-display);
font-size: 11px;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: 700;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--liquourice);
border-radius: var(--r-sm);
}
.site-footer__utility {
background: var(--cowboy);
padding: var(--sp-5) 0;
margin-top: var(--sp-7);
}
.site-footer__utility-inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: var(--sp-5);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wider);
color: var(--rodeo);
}
.site-footer__payments { display: flex; gap: var(--sp-3); align-items: center; }
.site-footer__pay-chip {
background: var(--liquourice);
color: var(--rodeo-light);
font-family: var(--ff-display);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
padding: 4px 8px;
border-radius: var(--r-sm);
border: 1px solid var(--caput);
text-transform: uppercase;
}
.site-footer__copyright {
text-align: center;
text-transform: uppercase;
letter-spacing: var(--ls-widest);
color: var(--bronze);
font-family: var(--ff-display);
}
.site-footer__socials { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.site-footer__social {
width: 32px; height: 32px;
display: grid; place-items: center;
color: var(--rodeo);
border: 1px solid var(--caput);
border-radius: var(--r-sm);
}
.site-footer__social:hover { color: var(--bronze); border-color: var(--bronze); }
.site-footer__social svg { width: 16px; height: 16px; }
@media (max-width: 1100px) {
.site-footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.site-footer__columns { grid-template-columns: 1fr; }
.site-footer__utility-inner { grid-template-columns: 1fr; text-align: center; }
.site-footer__socials, .site-footer__payments { justify-content: center; }
}
/* ---------- Section-specific layout helpers ---------- */
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--sp-8);
}
.section-head__eyebrow {
font-family: var(--ff-display);
display: inline-block;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--sienna);
font-weight: 700;
margin-bottom: var(--sp-3);
padding: 4px 14px;
border: 1px solid var(--sienna);
}
.section-head__title {
font-family: var(--ff-display);
font-size: var(--fs-h2);
font-weight: 800;
color: var(--rodeo-light);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
margin-bottom: var(--sp-3);
}
.section-head__lede {
font-size: var(--fs-body-lg);
color: var(--rodeo);
font-style: italic;
line-height: var(--lh-body);
}
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.tutorials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.creator-feature {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-6);
margin-bottom: var(--sp-7);
}
.creator-strip {
display: flex;
gap: var(--sp-5);
overflow-x: auto;
padding: var(--sp-3) 0 var(--sp-4);
scroll-snap-type: x mandatory;
}
.painting-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: var(--sp-4);
}
.painting-cta-row {
display: flex; justify-content: center;
margin-top: var(--sp-7);
}
@media (max-width: 1100px) {
.tools-grid, .creator-feature, .products-grid { grid-template-columns: 1fr 1fr; }
.categories-grid, .tutorials-grid { grid-template-columns: repeat(2, 1fr); }
.painting-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.tools-grid, .products-grid, .categories-grid, .tutorials-grid, .creator-feature { grid-template-columns: 1fr; }
.painting-grid { grid-template-columns: repeat(2, 1fr); }
.hero__title { font-size: 40px; }
}
</style>
</head>
<body>
<!-- announcement-bar (REUSED) -->
<div class="announcement-bar" role="region" aria-label="Site announcements">
<div class="announcement-bar__inner">
<div class="announcement-bar__aside">
<a href="#">Free UK shipping over <em>£75</em></a>
</div>
<div class="announcement-bar__rotator" aria-live="polite">
<span class="announcement-bar__dot" aria-hidden="true"></span>
<span class="announcement-bar__msg">New 40K Combat Patrols on the workbench — <em>kit, paint, and field in a fortnight</em></span>
<span class="announcement-bar__dot" aria-hidden="true"></span>
</div>
<div class="announcement-bar__aside">
<a href="#">Earn here. <em>Redeem anywhere.</em></a>
</div>
</div>
</div>
<!-- site-header (REUSED — 5-item nav verbatim) -->
<header class="site-header">
<div class="site-header__inner">
<a class="site-header__brand" href="#" aria-label="War Dungeon home">
<span class="site-header__mark">WD</span>
<span class="site-header__wordmark">War Dungeon<small>Specialty Wargames Outfitter</small></span>
</a>
<nav class="site-header__nav" aria-label="Primary">
<a href="#" class="is-active" aria-haspopup="true">Warhammer</a>
<a href="#">Dungeons & Dragons</a>
<a href="#">Tools</a>
<a href="#" aria-haspopup="true">Learn</a>
<a href="#">Creators</a>
</nav>
<div class="site-header__utility">
<span class="site-header__points" title="Loyalty balance">1,840 pts</span>
<a href="#" class="site-header__icon" aria-label="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></a>
<a href="#" class="site-header__icon" aria-label="Account"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg></a>
<a href="#" class="site-header__icon" aria-label="Wishlist"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="site-header__badge">3</span></a>
<a href="#" class="site-header__icon" aria-label="Basket"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18l-2 11H5L3 6z"/><path d="M8 6V4a4 4 0 0 1 8 0v2"/></svg><span class="site-header__badge">5</span></a>
</div>
</div>
</header>
<!-- HERO (NEW) — cowboy section, dark frame, rodeo-light content slab -->
<section class="hero" aria-label="Brand statement">
<div class="container">
<div class="hero__frame">
<div class="hero__art" aria-hidden="true">
<span class="hero__art-mark"></span>
<svg class="hero__art-silhouette" viewBox="0 0 200 240" fill="currentColor"><path d="M100 12c-14 0-26 8-30 22-2 6 0 12 4 16-10 6-14 16-12 28 2 8 6 14 12 18l-4 32c0 4 2 8 6 10l-8 18c-2 4 0 8 4 10l4 2c-4 6-6 12-4 20l4 14c2 6 8 10 14 10h20c6 0 12-4 14-10l4-14c2-8 0-14-4-20l4-2c4-2 6-6 4-10l-8-18c4-2 6-6 6-10l-4-32c6-4 10-10 12-18 2-12-2-22-12-28 4-4 6-10 4-16-4-14-16-22-30-22z"/></svg>
<span class="hero__art-label">Lit diorama — lantern-watch over the broken city</span>
</div>
<div class="hero__content">
<span class="hero__eyebrow">Forge your campaign</span>
<h1 class="hero__title">Battle on Your Tabletop. <em>Crafted on Ours.</em></h1>
<p class="hero__lede">Warhammer, Age of Sigmar, The Old World, and Dungeons & Dragons — stocked, painted, played, and answered for by hobbyists who roll the dice on Friday nights.</p>
<div class="hero__actions">
<a class="btn" href="#">Build Your Army</a>
<a class="btn btn--ghost" href="#">Shop New Releases</a>
</div>
</div>
</div>
</div>
</section>
<!-- TRUST STRIP (NEW) — liquourice band, rodeo-light cells -->
<section class="band band--liq band--pad" aria-label="Trust signals">
<div class="container">
<div class="trust-strip">
<div class="trust-strip__cell">
<span class="trust-strip__icon" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="6" y="14" width="28" height="18" rx="1"/><path d="M34 18h6l4 6v8h-10z"/><circle cx="14" cy="36" r="4"/><circle cx="36" cy="36" r="4"/></svg></span>
<h3 class="trust-strip__title">Free UK Shipping</h3>
<p class="trust-strip__copy">On orders over £75. Next-day on the rolling stock.</p>
</div>
<div class="trust-strip__cell">
<span class="trust-strip__icon" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M24 6 L40 14 L40 26 C40 34 32 40 24 42 C16 40 8 34 8 26 L8 14 Z"/><path d="M18 24 L22 28 L30 18"/></svg></span>
<h3 class="trust-strip__title">30-Day Returns</h3>
<p class="trust-strip__copy">Unopened plastic or rule-light dice — bring it back, no quarrel.</p>
</div>
<div class="trust-strip__cell">
<span class="trust-strip__icon" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="24" cy="24" r="18"/><path d="M24 6 V42 M6 24 H42"/></svg></span>
<h3 class="trust-strip__title">Multi-Game Expertise</h3>
<p class="trust-strip__copy">40K · Age of Sigmar · The Old World · D&D</p>
</div>
<div class="trust-strip__cell">
<span class="trust-strip__icon" aria-hidden="true"><svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="24,4 30,18 44,18 33,28 38,42 24,34 10,42 15,28 4,18 18,18"/></svg></span>
<h3 class="trust-strip__title">A Nerdworks Brand</h3>
<p class="trust-strip__copy">Backed by twelve years of UK specialist hobby retail.</p>
</div>
</div>
</div>
</section>
<!-- gear-divider (REUSED) — cowboy lead-in -->
<div class="band band--cowboy"><div class="container"><div class="gear-divider" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div></div></div>
<!-- TOOLS TEASER — cowboy ground, tool-teaser-card NEW -->
<section class="band band--cowboy band--pad" aria-label="Tools">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">Workbench tools</span>
<h2 class="section-head__title">Set Your List Before You Set the Table.</h2>
<p class="section-head__lede">Two in-house tools, built for players who'd rather brew their list before they brew the tea.</p>
</div>
<div class="tools-grid">
<article class="tool-teaser-card">
<div class="tool-teaser-card__art" aria-hidden="true">
<span class="tool-teaser-card__status">Live now</span>
<div class="tool-teaser-card__plate">
<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><circle cx="32" cy="32" r="22"/><circle cx="32" cy="32" r="8"/><line x1="32" y1="2" x2="32" y2="14"/><line x1="32" y1="50" x2="32" y2="62"/><line x1="2" y1="32" x2="14" y2="32"/><line x1="50" y1="32" x2="62" y2="32"/></svg>
Army Builder
</div>
</div>
<div class="tool-teaser-card__body">
<span class="tool-teaser-card__eyebrow">Launch feature</span>
<h3 class="tool-teaser-card__title">Army Builder</h3>
<p class="tool-teaser-card__copy">Pick a faction, drop in units, watch the points tally in real time. Save your list, share it with your group, and add every part to basket in one shove.</p>
<a class="btn" href="#">Start a List</a>
</div>
</article>
<article class="tool-teaser-card">
<div class="tool-teaser-card__art" aria-hidden="true">
<span class="tool-teaser-card__status tool-teaser-card__status--coming">Coming soon</span>
<div class="tool-teaser-card__plate">
<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><rect x="8" y="8" width="48" height="48" rx="2"/><line x1="8" y1="20" x2="56" y2="20"/><line x1="8" y1="32" x2="56" y2="32"/><line x1="8" y1="44" x2="56" y2="44"/><line x1="20" y1="8" x2="20" y2="56"/><line x1="32" y1="8" x2="32" y2="56"/><line x1="44" y1="8" x2="44" y2="56"/></svg>
Battle Simulator
</div>
</div>
<div class="tool-teaser-card__body">
<span class="tool-teaser-card__eyebrow">Phase two — in the workshop</span>
<h3 class="tool-teaser-card__title">Battle Simulator</h3>
<p class="tool-teaser-card__copy">Top-down turn-based viewer for your saved armies. Play a friend or take the field against a generated rival, with live commentary in the side-chat.</p>
<a class="btn btn--secondary" href="#">Notify Me</a>
</div>
</article>
</div>
</div>
</section>
<!-- gear-divider (REUSED) — light variant on caput section -->
<div class="band band--caput"><div class="container"><div class="gear-divider gear-divider--light" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div></div></div>
<!-- CHOOSE YOUR GAME — caput ground, category-billboard REUSED -->
<section class="band band--caput band--pad" aria-label="Choose your game">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">Choose your game</span>
<h2 class="section-head__title">Six Tables. One Workbench.</h2>
<p class="section-head__lede">Curated routes into every system we stock — not a wall of SKUs, but a fork in the road.</p>
</div>
<div class="categories-grid">
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M100 20l-30 20v40l-20 10v50l30 20h40l30-20v-50l-20-10V40l-30-20z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Far-future grimdark</span>
<h3 class="category-billboard__title">Warhammer 40,000</h3>
<p class="category-billboard__copy">Combat Patrols, Codex armies, and the new 10th edition starter sets. Bolters, bayonets, and the cold honour of the Astra Militarum.</p>
<span class="category-billboard__cta">Enter the Grimdark →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M100 14l-26 24-20 4 6 26-26 18 14 24-10 26 28 4 18 22 16-22 28-4-10-26 14-24-26-18 6-26-20-4-22-24z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Realms eternal</span>
<h3 class="category-billboard__title">Age of Sigmar</h3>
<p class="category-billboard__copy">Mortal Realms, god-king Stormcasts, and the Beasts of Chaos who'd rather pull it all down. A spearhead for every shelf you've cleared.</p>
<span class="category-billboard__cta">Walk the Realms →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M100 16l-40 30v40l-15 25 15 25v30l40 18 40-18v-30l15-25-15-25V46l-40-30z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Rank-and-flank</span>
<h3 class="category-billboard__title">The Old World</h3>
<p class="category-billboard__copy">The shield-wall reborn. Empire footmen, Bretonnian Knights of the Realm, and dwarfs with grudges older than your grandfather.</p>
<span class="category-billboard__cta">Hold the Line →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M100 22l-50 30v50l30 20 20 36 20-36 30-20V52l-50-30zM100 70l-22 12v26l22 14 22-14V82l-22-12z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Worlds you write</span>
<h3 class="category-billboard__title">Dungeons & Dragons</h3>
<p class="category-billboard__copy">Rulebooks, dice, prepainted minis, terrain tiles, and the kind of GM screens that hide your bad rolls without breaking line-of-sight.</p>
<span class="category-billboard__cta">Roll Initiative →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M40 60h120v20H40zM50 90h100v90H50zM70 110h60v50H70zM85 50h30v10H85z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Tools of the trade</span>
<h3 class="category-billboard__title">Hobby Supplies</h3>
<p class="category-billboard__copy">Clippers, files, plastic glue, magnets in twelve sizes, drilling jigs, and the cutting mat your kitchen table secretly needs.</p>
<span class="category-billboard__cta">Stock the Workbench →</span>
</div>
</a>
<a class="category-billboard" href="#">
<div class="category-billboard__art" aria-hidden="true">
<svg class="category-billboard__silhouette" viewBox="0 0 200 200" fill="currentColor"><path d="M70 30h60v40l20 10v100l-100 0V80l20-10z"/></svg>
<span class="category-billboard__art-label">Lit diorama</span>
</div>
<div class="category-billboard__body">
<span class="category-billboard__eyebrow">Brush ready</span>
<h3 class="category-billboard__title">Paints</h3>
<p class="category-billboard__copy">Citadel, Vallejo, Army Painter Speedpaints, and the contrast trio that paints a battleline in an evening. Tested, sorted, racked.</p>
<span class="category-billboard__cta">Open the Paint Pots →</span>
</div>
</a>
</div>
</div>
</section>
<!-- gear-divider (REUSED) — cowboy interlude -->
<div class="band band--cowboy"><div class="container"><div class="gear-divider" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div></div></div>
<!-- FAN FAVOURITES — cowboy ground, product-card NEW -->
<section class="band band--cowboy band--pad" aria-label="Fan favourites">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">Fan favourites</span>
<h2 class="section-head__title">What the Regulars Are Buying.</h2>
<p class="section-head__lede">Four kits chosen by the till, not by an algorithm. Earn points on every one of them.</p>
</div>
<div class="products-grid">
<article class="product-card">
<div class="product-card__art" aria-hidden="true">
<span class="product-card__tag">New</span>
<span class="product-card__loyalty">
<span class="product-card__loyalty-pts">+84</span>
<span class="product-card__loyalty-lbl">pts</span>
</span>
<svg viewBox="0 0 200 200" fill="var(--liquourice)"><rect x="40" y="60" width="120" height="100" rx="6"/><rect x="60" y="40" width="80" height="22"/></svg>
</div>
<div class="product-card__body">
<span class="product-card__game">Warhammer 40,000</span>
<h3 class="product-card__title">Combat Patrol — Adepta Sororitas</h3>
<span class="product-card__rating">
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill-opacity="0.3"/></svg>
<span class="product-card__rating-count">4.7 (38)</span>
</span>
<div class="product-card__price-row">
<span class="product-card__price">£84.00</span>
<a class="product-card__qv" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__art" aria-hidden="true">
<span class="product-card__tag">Bestseller</span>
<span class="product-card__loyalty">
<span class="product-card__loyalty-pts">+62</span>
<span class="product-card__loyalty-lbl">pts</span>
</span>
<svg viewBox="0 0 200 200" fill="var(--liquourice)"><polygon points="60,30 140,30 170,90 100,170 30,90"/></svg>
</div>
<div class="product-card__body">
<span class="product-card__game">Age of Sigmar</span>
<h3 class="product-card__title">Spearhead — Stormcast Eternals</h3>
<span class="product-card__rating">
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<span class="product-card__rating-count">4.9 (112)</span>
</span>
<div class="product-card__price-row">
<span class="product-card__price">£62.50</span>
<a class="product-card__qv" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__art" aria-hidden="true">
<span class="product-card__tag">Pre-order</span>
<span class="product-card__loyalty">
<span class="product-card__loyalty-pts">+45</span>
<span class="product-card__loyalty-lbl">pts</span>
</span>
<svg viewBox="0 0 200 200" fill="var(--liquourice)"><rect x="50" y="40" width="100" height="130" rx="4"/><line x1="50" y1="70" x2="150" y2="70" stroke="var(--rodeo-light)" stroke-width="3"/><line x1="50" y1="100" x2="150" y2="100" stroke="var(--rodeo-light)" stroke-width="3"/><line x1="50" y1="130" x2="150" y2="130" stroke="var(--rodeo-light)" stroke-width="3"/></svg>
</div>
<div class="product-card__body">
<span class="product-card__game">Dungeons & Dragons</span>
<h3 class="product-card__title">Player's Handbook 2025 (Hardcover)</h3>
<span class="product-card__rating">
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill-opacity="0.5"/></svg>
<span class="product-card__rating-count">4.6 (24)</span>
</span>
<div class="product-card__price-row">
<span class="product-card__price">£45.00</span>
<a class="product-card__qv" href="#">Quick view</a>
</div>
</div>
</article>
<article class="product-card">
<div class="product-card__art" aria-hidden="true">
<span class="product-card__tag">Restocked</span>
<span class="product-card__loyalty">
<span class="product-card__loyalty-pts">+18</span>
<span class="product-card__loyalty-lbl">pts</span>
</span>
<svg viewBox="0 0 200 200" fill="var(--liquourice)"><circle cx="60" cy="100" r="22"/><circle cx="100" cy="100" r="22"/><circle cx="140" cy="100" r="22"/><rect x="50" y="50" width="100" height="14" rx="2"/></svg>
</div>
<div class="product-card__body">
<span class="product-card__game">Hobby Supplies</span>
<h3 class="product-card__title">Citadel Contrast Trio — Bone & Brass</h3>
<span class="product-card__rating">
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill-opacity="0.4"/></svg>
<span class="product-card__rating-count">4.5 (61)</span>
</span>
<div class="product-card__price-row">
<span class="product-card__price">£18.00</span>
<a class="product-card__qv" href="#">Quick view</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- gear-divider (REUSED) — liquourice interlude -->
<div class="band band--liq"><div class="container"><div class="gear-divider" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div></div></div>
<!-- HOW-TO GUIDES & TUTORIALS — liquourice ground, tutorial-card REUSED -->
<section class="band band--liq band--pad" aria-label="How-to guides and tutorials">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">From the workbench</span>
<h2 class="section-head__title">How-To Guides & Tutorials</h2>
<p class="section-head__lede">Hobby know-how from the till and the table. Pick a skill, sharpen it, take it home.</p>
</div>
<div class="tutorials-grid">
<article class="tutorial-card">
<div class="tutorial-card__art" aria-hidden="true">
<div class="tutorial-card__badges">
<span class="tutorial-card__badge tutorial-card__badge--beginner">Beginner</span>
</div>
<span class="tutorial-card__format">Read · 8 min</span>
<span class="tutorial-card__art-label">Lit photo — brushes in hand</span>
</div>
<div class="tutorial-card__body">
<span class="tutorial-card__category">Painting</span>
<h3 class="tutorial-card__title">Your First Three Citadel Contrasts</h3>
<p class="tutorial-card__excerpt">If you've never touched a brush, start here. Three pots, one brush, one undercoat — and a marine on the table by tea time.</p>
<div class="tutorial-card__meta">
<span>Lily · Updated Apr</span>
<a class="tutorial-card__cta" href="#">Read Guide →</a>
</div>
</div>
</article>
<article class="tutorial-card">
<div class="tutorial-card__art" aria-hidden="true">
<div class="tutorial-card__badges">
<span class="tutorial-card__badge tutorial-card__badge--intermediate">Intermediate</span>
</div>
<span class="tutorial-card__format">Watch · 22 min</span>
<span class="tutorial-card__art-label">Lit photo — deployment plan</span>
</div>
<div class="tutorial-card__body">
<span class="tutorial-card__category">Rules & strategy</span>
<h3 class="tutorial-card__title">Reading the Mission Pack: 10th Ed Pariah</h3>
<p class="tutorial-card__excerpt">A walkthrough of one mission pack from the cover down. Where the points are won, where the games are lost, and what to put on the line first.</p>
<div class="tutorial-card__meta">
<span>Hesketh · Updated May</span>
<a class="tutorial-card__cta" href="#">Watch Tutorial →</a>
</div>
</div>
</article>
<article class="tutorial-card">
<div class="tutorial-card__art" aria-hidden="true">
<div class="tutorial-card__badges">
<span class="tutorial-card__badge tutorial-card__badge--advanced">Advanced</span>
</div>
<span class="tutorial-card__format">Read · 14 min</span>
<span class="tutorial-card__art-label">Lit photo — foam-board ruin</span>
</div>
<div class="tutorial-card__body">
<span class="tutorial-card__category">Terrain</span>
<h3 class="tutorial-card__title">Building a Sector Imperialis Ruin for £7</h3>
<p class="tutorial-card__excerpt">Foam-board, PVA, and a craft knife. We do the scoring, you do the painting. Four-hour build, a fortnight's worth of cover for your games.</p>
<div class="tutorial-card__meta">
<span>Maeve · Updated Mar</span>
<a class="tutorial-card__cta" href="#">Read Guide →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- gear-divider (REUSED) — cowboy interlude -->
<div class="band band--cowboy"><div class="container"><div class="gear-divider" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div></div></div>
<!-- CREATOR SPOTLIGHT — cowboy ground; creator-card NEW, creator-quote REUSED, creator-thumb NEW -->
<section class="band band--cowboy band--pad" aria-label="Creator spotlight">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">Creator partners</span>
<h2 class="section-head__title">The People at the Workbench.</h2>
<p class="section-head__lede">Painters, GMs, streamers, and rules-lawyers we've signed up to show their working.</p>
</div>
<div class="creator-feature">
<article class="creator-card">
<div class="creator-card__avatar" aria-hidden="true">Avatar — portrait</div>
<div class="creator-card__body">
<span class="creator-card__eyebrow">Featured this month</span>
<h3 class="creator-card__name">Maeve "Iron Maiden" Cross</h3>
<div class="creator-card__tags">
<span class="creator-card__tag">Warhammer 40K</span>
<span class="creator-card__tag">Age of Sigmar</span>
<span class="creator-card__tag">Painting</span>
</div>
<p class="creator-card__copy">Twelve years on the brush and the only person in the country who paints Sisters of Battle armour faster than they release codices. Her contrast tutorials are the reason half our regulars are still painting.</p>
<div class="creator-card__cta-row">
<a class="btn" href="#">Visit Creator</a>
<a class="btn btn--ghost btn--small" href="#">Watch Live</a>
</div>
<div class="creator-card__stats">
<div><div class="creator-card__stat-num">42</div><div class="creator-card__stat-lbl">Guides authored</div></div>
<div><div class="creator-card__stat-num">11.8k</div><div class="creator-card__stat-lbl">Followers</div></div>
<div><div class="creator-card__stat-num">Fri</div><div class="creator-card__stat-lbl">Live on Twitch</div></div>
</div>
</div>
</article>
<aside class="creator-quote">
<span class="creator-quote__mark" aria-hidden="true">“</span>
<p class="creator-quote__text">The shop already had what I needed. The community here is what makes me keep coming back to teach.</p>
<p class="creator-quote__attrib">— Maeve Cross, on War Dungeon</p>
</aside>
</div>
<div class="creator-strip" role="list" aria-label="More creators">
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Tom Hesketh</h4>
<p class="creator-thumb__tags">The Old World</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Priya Bose</h4>
<p class="creator-thumb__tags">D&D · Worldbuilding</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Ade Okonkwo</h4>
<p class="creator-thumb__tags">40K · Tournaments</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Rhys ap Gwyn</h4>
<p class="creator-thumb__tags">Age of Sigmar</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">Sara Lindqvist</h4>
<p class="creator-thumb__tags">Terrain & scenery</p>
</a>
<a class="creator-thumb" href="#">
<div class="creator-thumb__avatar" aria-hidden="true">Avatar</div>
<h4 class="creator-thumb__name">James Latham</h4>
<p class="creator-thumb__tags">Painting · NMM</p>
</a>
</div>
</div>
</section>
<!-- gear-divider (REUSED) — liquourice lead-in -->
<div class="band band--liq"><div class="container"><div class="gear-divider" aria-hidden="true">
<svg viewBox="0 0 1440 22" preserveAspectRatio="none">
<line x1="0" y1="11" x2="1440" y2="11" stroke="currentColor" stroke-width="1"/>
<g fill="currentColor">
<circle cx="120" cy="11" r="4"/>
<circle cx="360" cy="11" r="4"/>
<circle cx="600" cy="11" r="4"/>
<circle cx="840" cy="11" r="4"/>
<circle cx="1080" cy="11" r="4"/>
<circle cx="1320" cy="11" r="4"/>
<circle cx="720" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="720" cy="11" r="2.2"/>
</g>
</svg>
</div></div></div>
<!-- PAINTING SHOWCASE — liquourice ground, painting-tile REUSED -->
<section class="band band--liq band--pad" aria-label="Painting showcase">
<div class="container">
<div class="section-head">
<span class="section-head__eyebrow">Painting showcase</span>
<h2 class="section-head__title">From the Garrison's Brushes.</h2>
<p class="section-head__lede">Customer work, submitted, photographed, and shown the way it deserves.</p>
</div>
<div class="painting-grid">
<a class="painting-tile painting-tile--tall painting-tile--wide" href="#" aria-label="Painting by James L">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Imperial Knight</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">James L.</span>
<span class="painting-tile__game">40K · Knight Errant</span>
</div>
</a>
<a class="painting-tile" href="#" aria-label="Painting by Priya B">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Stormcast Liberator</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Priya B.</span>
<span class="painting-tile__game">AoS</span>
</div>
</a>
<a class="painting-tile painting-tile--tall" href="#" aria-label="Painting by Ade O">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Necron Warriors</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Ade O.</span>
<span class="painting-tile__game">40K · Necrons</span>
</div>
</a>
<a class="painting-tile" href="#" aria-label="Painting by Rhys G">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Bretonnian Knight</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Rhys G.</span>
<span class="painting-tile__game">The Old World</span>
</div>
</a>
<a class="painting-tile painting-tile--wide" href="#" aria-label="Painting by Sara L">
<div class="painting-tile__art" aria-hidden="true">Lit photo — Sector Imperialis diorama</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Sara L.</span>
<span class="painting-tile__game">Terrain · 40K</span>
</div>
</a>
<a class="painting-tile" href="#" aria-label="Painting by Tom H">
<div class="painting-tile__art" aria-hidden="true">Lit photo — D&D mini party</div>
<div class="painting-tile__overlay">
<span class="painting-tile__author">Tom H.</span>
<span class="painting-tile__game">D&D</span>
</div>
</a>
</div>
<div class="painting-cta-row">
<a class="btn" href="#">Submit Your Painting</a>
</div>
</div>
</section>
<!-- LOYALTY STRIP (NEW) — caput band, rodeo-light cells, sienna self-mark -->
<section class="loyalty-strip" aria-label="Cross-brand loyalty">
<div class="loyalty-strip__inner">
<div>
<span class="loyalty-strip__eyebrow">Nerdworks loyalty</span>
<h2 class="loyalty-strip__title">Earn here. <em>Redeem anywhere.</em></h2>
<p class="loyalty-strip__copy">Every pound spent at War Dungeon earns loyalty points you can spend at our sister brands — Nerdworks for TCG and tabletop, ArtSabers for Star Wars helmets and lightsabers, and Paragon for peripherals.</p>
<div style="display:flex;gap:16px;flex-wrap:wrap;">
<a class="btn" href="#">Sign in to see your balance</a>
<a class="btn btn--secondary" href="#">How loyalty points work</a>
</div>
</div>
<div class="loyalty-strip__brands">
<div class="loyalty-strip__brand loyalty-strip__brand--self">War Dungeon<small>Earn here</small></div>
<div class="loyalty-strip__brand">Nerdworks<small>Redeem</small></div>
<div class="loyalty-strip__brand">ArtSabers<small>Redeem</small></div>
<div class="loyalty-strip__brand">Paragon<small>Redeem</small></div>
</div>
</div>
</section>
<!-- NEWSLETTER — cowboy section, newsletter-signup NEW (rodeo-light panel on dark) -->
<section class="band band--cowboy band--pad" aria-label="Newsletter">
<div class="container">
<div class="newsletter-signup">
<span class="newsletter-signup__plate">Field dispatches</span>
<h2 class="newsletter-signup__title">Join the Garrison.</h2>
<p class="newsletter-signup__lede">One short dispatch a week: new releases, hobby tutorials, list ideas, and what's actually worth your time. We don't pad the inbox.</p>
<form class="newsletter-signup__form" onsubmit="event.preventDefault();">
<input class="newsletter-signup__input" type="email" placeholder="Your dispatch address" aria-label="Email address" required>
<button class="newsletter-signup__submit" type="submit">Enlist</button>
</form>
<div class="newsletter-signup__perks">
<span class="newsletter-signup__perk">10% off your first order</span>
<span class="newsletter-signup__perk">Early access to releases</span>
<span class="newsletter-signup__perk">Painters' tips weekly</span>
</div>
</div>
</div>
</section>
<!-- site-footer (NEW — Apothecary text colours) -->
<footer class="site-footer">
<div class="site-footer__columns">
<div class="site-footer__brand-col">
<div class="site-footer__mark">War Dungeon</div>
<p class="site-footer__tagline">Specialty wargames outfitter. Painted, stocked, and answered for by people who roll the dice on Friday nights.</p>
<div class="site-footer__signoff">A Nerdworks Brand</div>
</div>
<div>
<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="#">Hobby Supplies</a></li>
<li><a href="#">Paints</a></li>
</ul>
</div>
<div>
<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="#">Tutorials</a></li>
<li><a href="#">Creator Partners</a></li>
<li><a href="#">Painting Showcase</a></li>
</ul>
</div>
<div>
<h4 class="site-footer__col-title">Help</h4>
<ul class="site-footer__list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Shipping & Delivery</a></li>
<li><a href="#">Returns & Exchanges</a></li>
<li><a href="#">Order Tracking</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div>
<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="#">Sister Brands</a></li>
<li><a href="#">Loyalty Programme</a></li>
<li><a href="#">Affiliate Programme</a></li>
</ul>
<div class="site-footer__newsletter-mini">
<label for="footer-email">Field dispatches</label>
<form onsubmit="event.preventDefault();">
<input id="footer-email" type="email" placeholder="Email" aria-label="Email">
<button type="submit">Enlist</button>
</form>
</div>
</div>
</div>
<div class="site-footer__utility">
<div class="site-footer__utility-inner">
<div class="site-footer__payments" aria-label="Accepted payments">
<span class="site-footer__pay-chip">Visa</span>
<span class="site-footer__pay-chip">Mastercard</span>
<span class="site-footer__pay-chip">Amex</span>
<span class="site-footer__pay-chip">Apple Pay</span>
<span class="site-footer__pay-chip">Klarna</span>
</div>
<div class="site-footer__copyright">© 2026 War Dungeon · A Nerdworks Brand</div>
<div class="site-footer__socials">
<a class="site-footer__social" href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/></svg></a>
<a class="site-footer__social" href="#" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="3"/></svg></a>
<a class="site-footer__social" href="#" aria-label="Discord"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6c4-2 10-2 14 0l2 12c-3 2-6 3-9 3l-1-2c-2 0-3-1-5-2-3 0-5-1-7-3z"/></svg></a>
</div>
</div>
</div>
</footer>
</body>
</html>