<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorials — War Dungeon</title>
<link rel="stylesheet" href="https://use.typekit.net/onl7dxx.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap">
<style>
/* ============================================================ */
/* TOKENS — War Dungeon Frontier (SWD1) */
/* ============================================================ */
:root {
/* fonts */
--font-display: "modesto-condensed", "Palatino Linotype", "EB Garamond", Georgia, serif;
--font-body: "palatino-linotype", "Palatino Linotype", "Literata", "EB Garamond", Georgia, serif;
--font-mono: "Courier Prime", "Courier New", monospace;
/* palette — verbatim from styleguide */
--primary: #C5A688;
--secondary: #D8C3B1;
--tertiary: #F4A479;
--dark: #1B1314;
--light: #FFFFFF;
--text: #613F34;
--neutral: #2B1B1C;
--accent: #832D15;
--positive: #4A6E50;
--negative: #C8442D;
/* brand-named hue aliases */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--caput: #613F34;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--sienna: #832D15;
--bronze: #F4A479;
--white: #FFFFFF;
/* surface semantics — role-named, theme-portable */
--bg-card: var(--rodeo);
--bg-card-on-dark: var(--liquourice);
--bg-card-on-light: var(--rodeo-light);
--bg-panel-stamp: var(--sienna);
--bg-panel-darker: var(--liquourice);
--bg-surface-alt: var(--rodeo-light);
--bg-filter-group: var(--cowboy);
--text-on-dark: var(--white);
--text-on-light: var(--caput);
--text-on-stamp: var(--white);
--text-on-card-dark: var(--white);
--text-on-card-light: var(--caput);
/* type scale (px) */
--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;
/* 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 (px) */
--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 offsets, 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: 2px 2px 0 var(--caput);
/* gear-pattern background */
--gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23F4A479' stroke-opacity='0.06' stroke-width='1'><circle cx='60' cy='60' r='28'/><circle cx='60' cy='60' r='42'/><circle cx='60' cy='60' r='3' fill='%23F4A479' fill-opacity='0.1'/><circle cx='180' cy='180' r='28'/><circle cx='180' cy='180' r='42'/><circle cx='180' cy='180' r='3' fill='%23F4A479' fill-opacity='0.1'/></g></svg>");
}
/* ============================================================ */
/* RESET + PAGE PRIMITIVES */
/* ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--caput); background: var(--cowboy); }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }
p { margin: 0; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
/* shared chrome primitives — rivets used across many catalogue blocks */
.rivet-panel { position: relative; }
.rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--bronze); border: 2px solid var(--caput); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); z-index: 4; }
.rivet--tl { top: 8px; left: 8px; }
.rivet--tr { top: 8px; right: 8px; }
.rivet--bl { bottom: 8px; left: 8px; }
.rivet--br { bottom: 8px; right: 8px; }
/* ============================================================ */
/* CATALOGUE REUSE — verbatim */
/* ============================================================ */
/* 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); }
/* 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: " \25BE"; font-size: 10px; color: var(--bronze); }
.site-header__nav-item--is-current { color: var(--bronze); }
.site-header__nav-item--is-current::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; background: 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); }
/* 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); }
/* 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%; }
/* 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); }
/* 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: 40px; line-height: 1; color: var(--liquourice); }
.stamped-roundel--stat .label { font-size: 10px; letter-spacing: var(--ls-widest); margin-top: 6px; line-height: 1.15; color: var(--liquourice); }
/* 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; }
/* guide-card (catalogue) */
.guide-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--liquourice); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); color: var(--text-on-dark); overflow: hidden; transition: transform 120ms linear; }
.guide-card:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 1px var(--caput), 6px 6px 0 var(--caput); }
.guide-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--cowboy); border-bottom: 2px ridge var(--bronze); }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__badges { position: absolute; left: 12px; top: 12px; display: inline-flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.guide-card__badge { padding: 4px 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; background: var(--bronze); color: var(--liquourice); border: 1px solid var(--caput); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput); }
.guide-card__badge--time { background: var(--liquourice); color: var(--bronze); border-color: var(--bronze); }
.guide-card__body { padding: 24px 24px 28px; display: grid; gap: 10px; }
.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: 24px; letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-dark); }
.guide-card__copy { margin: 0; color: var(--rodeo-light); font-size: var(--fs-body-sm); font-style: italic; }
.guide-card__cta { margin-top: 8px; font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px dashed var(--bronze); align-self: flex-start; }
.guide-card__cta::after { content: "\2192"; transition: transform 120ms linear; }
.guide-card:hover .guide-card__cta::after { transform: translateX(4px); }
/* guide-card — video modifier (content-level treatment, no structural change) */
.guide-card--video .guide-card__media::after {
content: "";
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 68px; height: 68px;
border-radius: 50%;
background-color: rgba(27, 19, 20, 0.78);
border: 3px ridge var(--bronze);
box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon points='12,8 25,16 12,24' fill='%23F4A479' stroke='%23613F34' stroke-width='1'/></svg>");
background-repeat: no-repeat;
background-position: center;
background-size: 26px 26px;
pointer-events: none;
z-index: 1;
}
.guide-card--video .guide-card__media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(27,19,20,0) 50%, rgba(27,19,20,0.55) 100%);
pointer-events: none;
z-index: 1;
}
.guide-card--video .guide-card__badge--time { display: inline-flex; align-items: center; gap: 6px; }
.guide-card--video .guide-card__badge--time::before { content: ""; width: 0; height: 0; border-left: 6px solid var(--bronze); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.guide-card__series { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; background: var(--cowboy); color: var(--bronze); 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; box-shadow: 1px 1px 0 var(--caput); }
.guide-card__series::before { content: ""; width: 8px; height: 8px; background: var(--bronze); border: 1px solid var(--caput); border-radius: 50%; }
.guide-card__series--live { background: var(--sienna); color: var(--white); border-color: var(--bronze); }
.guide-card__series--live::before { background: var(--white); animation: gc-live-pulse 1.8s infinite; }
.guide-card__series--standalone { color: var(--rodeo-light); background: transparent; border-style: dashed; opacity: 0.9; }
.guide-card__series--standalone::before { background: var(--rodeo-light); border-color: var(--caput); }
@keyframes gc-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* 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); }
/* pagination */
.pagination { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-7) 0; border-top: 1px solid var(--caput); }
.pagination__panel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-7); background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; box-shadow: inset 0 0 0 1px var(--caput); position: relative; }
.pagination__summary { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--rodeo-light); }
.pagination__summary strong { color: var(--bronze); }
.pagination__tiles { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: center; }
.pagination__tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--cowboy); color: var(--rodeo-light); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.pagination__tile--active { background: var(--bronze); color: var(--liquourice); }
.pagination__tile--nav { width: auto; padding: 0 16px; gap: 6px; }
.pagination__tile--disabled { opacity: 0.4; cursor: not-allowed; }
.pagination__tile--ellipsis { background: transparent; border: 0; box-shadow: none; color: var(--bronze); }
.pagination__loadmore { justify-self: end; }
/* newsletter-garrison */
.newsletter-garrison { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-7) 0; }
.newsletter-garrison__panel { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; padding: var(--sp-6) var(--sp-7); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; color: var(--rodeo-light); height: 100%; }
.newsletter-garrison__copy h3 { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white); margin: 0 0 var(--sp-2); }
.newsletter-garrison__copy p { font-family: var(--font-body); font-style: italic; font-size: var(--fs-body); margin: 0; color: var(--rodeo-light); }
.newsletter-garrison__form { display: flex; gap: var(--sp-3); align-items: stretch; }
.newsletter-garrison__form input { background: var(--cowboy); color: var(--white); border: 2px solid var(--bronze); padding: var(--sp-3) var(--sp-4); font-family: var(--font-body); font-size: var(--fs-body); width: 280px; }
.newsletter-garrison__form input::placeholder { color: var(--rodeo-light); font-style: italic; }
.newsletter-garrison__form button { background: var(--sienna); color: var(--white); border: 2px solid var(--bronze); border-style: ridge; font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: var(--ls-wide); padding: var(--sp-3) var(--sp-5); box-shadow: 2px 2px 0 var(--caput); cursor: pointer; }
/* creator-spotlight */
.creator-spotlight { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; color: var(--text-on-dark); padding: var(--sp-6); background: var(--liquourice); background-image: var(--gear-pattern); border: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); height: 100%; }
.creator-spotlight__copy { color: var(--rodeo-light); }
.creator-spotlight__name { margin: 12px 0 8px; font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--bronze); }
.creator-spotlight__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.creator-spotlight__tag { padding: 4px 12px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); }
.creator-spotlight__quote { margin: 0 0 32px; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-on-dark); font-style: italic; }
.creator-spotlight__stats { display: flex; gap: 36px; margin: 0 0 32px; padding: 20px 24px; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); }
.creator-spotlight__stat strong { display: block; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--bronze); letter-spacing: var(--ls-wide); }
.creator-spotlight__stat span { display: block; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--rodeo-light); }
/* 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); }
.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-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); color: var(--rodeo-light); text-transform: uppercase; font-family: var(--font-display); }
/* ============================================================ */
/* NEW BLOCKS — authored for BBWD16 (collide with BBWD15) */
/* ============================================================ */
/* hub-header */
.hub-header { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-8) 0; color: var(--text-on-dark); }
.hub-header__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; padding: var(--sp-7); background: var(--liquourice); background-image: var(--gear-pattern); border: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); }
.hub-header__content { display: flex; flex-direction: column; gap: var(--sp-4); padding-right: var(--sp-6); border-right: 1px dashed var(--caput); }
.hub-header__content .eyebrow-stamp { align-self: flex-start; }
.hub-header__title { margin: 0; font-family: var(--font-display); font-size: clamp(56px, 7.5vw, 96px); line-height: 0.92; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.hub-header__title em { font-style: normal; color: var(--bronze); }
.hub-header__rule { display: block; width: 220px; height: 6px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); margin: 4px 0 var(--sp-2); }
.hub-header__lede { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); font-style: italic; color: var(--rodeo-light); max-width: 640px; }
.hub-header__meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px dashed var(--caput); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.hub-header__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hub-header__meta span::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--bronze); border: 1px solid var(--caput); }
.hub-header__stat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); justify-self: center; }
.hub-header__stat-plaque { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--rodeo-light); text-align: center; max-width: 220px; padding: 8px 14px; background: var(--cowboy); border: 1px dashed var(--bronze); border-radius: var(--r-sm); }
/* filter-chips-bar */
.filter-chips-bar { background-color: var(--liquourice); background-image: var(--gear-pattern); padding: var(--sp-7) 0; }
.filter-chips-bar__panel { position: relative; padding: var(--sp-5) var(--sp-6); background: var(--cowboy); background-image: var(--gear-pattern); border: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); display: flex; flex-direction: column; gap: 0; }
.filter-chips-bar__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-5); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px dashed var(--caput); }
.filter-chips-bar__row:last-of-type { border-bottom: 0; }
.filter-chips-bar__label { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: var(--sp-2); }
.filter-chips-bar__label::before { content: ""; width: 8px; height: 8px; background: var(--bronze); border: 1px solid var(--caput); transform: rotate(45deg); }
.filter-chips-bar__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filter-chips-bar__chip { padding: 7px 14px; background: var(--liquourice); color: var(--rodeo-light); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: 2px 2px 0 var(--caput); font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wider); text-transform: uppercase; cursor: pointer; transition: transform 120ms linear; }
.filter-chips-bar__chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--caput); }
.filter-chips-bar__chip.is-active { background: var(--bronze); color: var(--liquourice); box-shadow: inset 0 0 0 1px var(--caput), 2px 2px 0 var(--caput); }
.filter-chips-bar__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) 0 0; border-top: 2px ridge var(--bronze); margin-top: var(--sp-3); }
.filter-chips-bar__count { font-family: var(--font-display); font-size: var(--fs-body-sm); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--rodeo-light); display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.filter-chips-bar__count strong { color: var(--bronze); font-size: var(--fs-h4); }
.filter-chips-bar__clear { background: transparent; color: var(--bronze); border: 1px dashed var(--bronze); padding: 8px 14px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; cursor: pointer; }
.filter-chips-bar__clear:hover { background: var(--liquourice); }
/* featured-guide-card */
.featured-guide-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 0; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-lg); overflow: hidden; color: var(--text-on-dark); height: 100%; }
.featured-guide-card .rivet { width: 12px; height: 12px; }
.featured-guide-card__media { position: relative; min-height: 360px; background: var(--cowboy); border-right: 2px ridge var(--bronze); overflow: hidden; }
.featured-guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-guide-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,19,20,0.0) 30%, rgba(27,19,20,0.55) 95%); pointer-events: none; }
.featured-guide-card__badges { position: absolute; left: 16px; top: 16px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 32px); }
.featured-guide-card__badge { padding: 5px 12px; font-family: var(--font-display); font-size: 11px; 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), 1px 1px 0 var(--caput); }
.featured-guide-card__badge--time { background: var(--liquourice); color: var(--bronze); border-color: var(--bronze); display: inline-flex; align-items: center; gap: 6px; }
.featured-guide-card__badge--time::before { content: ""; width: 0; height: 0; border-left: 6px solid var(--bronze); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.featured-guide-card__badge--system { background: var(--cowboy); color: var(--bronze); border-color: var(--bronze); }
.featured-guide-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 116px; height: 116px; border-radius: 50%; background: rgba(27,19,20,0.8); border: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-lg); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><polygon points='18,10 38,24 18,38' fill='%23F4A479' stroke='%23613F34' stroke-width='1.2'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: 48px 48px; pointer-events: none; }
.featured-guide-card__play::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--bronze); opacity: 0.55; }
.featured-guide-card__series-flag { position: absolute; left: 16px; bottom: 16px; z-index: 3; padding: 8px 16px; background: var(--sienna); color: var(--white); border: 2px ridge var(--bronze); border-radius: var(--r-sm); font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--caput), 2px 2px 0 var(--caput); display: inline-flex; align-items: center; gap: 8px; }
.featured-guide-card__series-flag::before { content: ""; width: 8px; height: 8px; background: var(--white); border: 1px solid var(--caput); border-radius: 50%; }
.featured-guide-card__body { padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); color: var(--rodeo-light); }
.featured-guide-card__kicker { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); align-self: flex-start; padding: 4px 10px; background: var(--cowboy); border: 1px dashed var(--bronze); border-radius: var(--r-sm); }
.featured-guide-card__title { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.0; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.featured-guide-card__title em { font-style: normal; color: var(--bronze); display: block; }
.featured-guide-card__rule { display: block; width: 160px; height: 5px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.featured-guide-card__copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--rodeo-light); }
.featured-guide-card__presenter { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--cowboy); border: 1px solid var(--caput); border-left: 3px solid var(--bronze); border-radius: var(--r-sm); }
.featured-guide-card__presenter-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bronze); border: 2px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='17' r='7' fill='%23613F34'/><path d='M9 38c0-7 6-11 13-11s13 4 13 11' fill='%23613F34'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: 32px 32px; }
.featured-guide-card__presenter-handle { display: block; font-family: var(--font-display); font-size: var(--fs-body-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bronze); line-height: 1.1; }
.featured-guide-card__presenter-role { display: block; font-family: var(--font-body); font-style: italic; font-size: var(--micro); color: var(--rodeo-light); margin-top: 3px; }
.featured-guide-card__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.featured-guide-card__meta { padding-top: var(--sp-4); margin-top: auto; border-top: 1px dashed var(--caput); display: flex; flex-wrap: wrap; gap: var(--sp-4); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.featured-guide-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.featured-guide-card__meta span::before { content: ""; width: 8px; height: 8px; background: var(--bronze); border: 1px solid var(--caput); border-radius: 50%; }
/* ============================================================ */
/* PAGE-LEVEL LAYOUT — THIS page's composition decisions */
/* ============================================================ */
/* Featured paired-row band */
.featured-paired-row { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; }
.featured-paired-row__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--sp-7); align-items: stretch; }
.featured-paired-row__left { display: flex; }
.featured-paired-row__left > * { width: 100%; }
.featured-paired-row__right { display: flex; }
.featured-paired-row__secondary { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--sp-4); width: 100%; }
/* Tutorial 3x3 grid band */
.tutorial-grid { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0; }
.tutorial-grid__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); border-bottom: 2px ridge var(--bronze); }
.tutorial-grid__head-title { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); margin: 0; }
.tutorial-grid__head-sub { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.tutorial-grid__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
/* Closer paired-row band */
.closer-paired-row { background-color: var(--liquourice); background-image: var(--gear-pattern); padding: var(--sp-9) 0; }
.closer-paired-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: stretch; }
/* ============================================================ */
/* RESPONSIVE */
/* ============================================================ */
@media (max-width: 1180px) {
.featured-paired-row__grid { grid-template-columns: 1fr; }
.featured-paired-row__secondary { grid-template-columns: 1fr 1fr; }
.tutorial-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
.hub-header__panel { grid-template-columns: 1fr; padding: var(--sp-5); }
.hub-header__content { padding-right: 0; border-right: 0; border-bottom: 1px dashed var(--caput); padding-bottom: var(--sp-5); }
.featured-guide-card { grid-template-columns: 1fr; }
.featured-guide-card__media { min-height: 280px; aspect-ratio: 16/10; border-right: 0; border-bottom: 2px ridge var(--bronze); }
.featured-guide-card__body { padding: var(--sp-5); }
.creator-spotlight { grid-template-columns: 1fr; padding: var(--sp-5); }
.creator-spotlight__stats { gap: var(--sp-5); padding: var(--sp-4); }
.closer-paired-row__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
.newsletter-garrison__panel { grid-template-columns: 1fr; padding: var(--sp-5); }
.newsletter-garrison__form { flex-direction: column; }
.newsletter-garrison__form input { width: 100%; }
.site-header__inner { grid-template-columns: auto auto; }
.site-header__nav { display: none; }
.pagination__panel { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }
.pagination__summary { text-align: center; }
.pagination__tiles { justify-self: center; }
.pagination__loadmore { justify-self: center; }
}
@media (max-width: 880px) {
.filter-chips-bar__row { grid-template-columns: 1fr; gap: var(--sp-3); }
.filter-chips-bar__footer { flex-direction: column; align-items: stretch; gap: var(--sp-3); text-align: center; }
.site-footer__columns { grid-template-columns: repeat(2, 1fr); padding-top: 64px; }
.featured-paired-row__secondary { grid-template-columns: 1fr; grid-template-rows: auto; }
.tutorial-grid__grid { grid-template-columns: 1fr; }
.announcement-bar__inner { padding: 8px 16px; }
.container { padding: 0 24px; }
}
@media (max-width: 640px) {
.hub-header__title { font-size: clamp(48px, 12vw, 72px); }
.featured-guide-card__ctas .btn { flex: 1 1 100%; }
.featured-guide-card__title { font-size: clamp(28px, 7vw, 36px); }
.site-footer__columns { grid-template-columns: 1fr; }
.creator-spotlight__stats { flex-direction: column; gap: var(--sp-3); }
}
</style>
</head>
<body>
<!-- ====================================================== -->
<!-- 1. ANNOUNCEMENT BAR (catalogue: announcement-bar) -->
<!-- ====================================================== -->
<div class="announcement-bar" role="region" aria-label="Announcements">
<div class="announcement-bar__inner">
<span class="announcement-bar__msg">Free UK shipping over £75 — new tutorial drops every Thursday</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>
<!-- ====================================================== -->
<!-- 2. SITE HEADER (catalogue: site-header) -->
<!-- ====================================================== -->
<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" 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 site-header__nav-item--is-current" 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>
<!-- ====================================================== -->
<!-- 3. BREADCRUMBS (catalogue: breadcrumbs) -->
<!-- ====================================================== -->
<nav class="breadcrumbs" aria-label="Breadcrumb">
<div class="container breadcrumbs__inner">
<a href="#">Home</a><span class="breadcrumbs__sep">/</span>
<a href="#">Learn</a><span class="breadcrumbs__sep">/</span>
<span class="breadcrumbs__item--current">Tutorials</span>
</div>
</nav>
<!-- ====================================================== -->
<!-- 4. HUB HEADER (NEW: hub-header) -->
<!-- ====================================================== -->
<section class="hub-header">
<div class="container">
<div class="hub-header__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="hub-header__content">
<span class="eyebrow-stamp">Learn · Tutorials</span>
<h1 class="hub-header__title">Tutorials</h1>
<span class="hub-header__rule" aria-hidden="true"></span>
<p class="hub-header__lede">Roll the tape — bench skills, on the move. Painters, builders and tournament heads with a camera over the workbench, talking through every cut, glaze and edge highlight at the pace you can follow.</p>
<div class="hub-header__meta">
<span>14 tutorials live</span>
<span>5 presenters on the roster</span>
<span>Updated this week</span>
<span>Captioned throughout</span>
</div>
</div>
<aside class="hub-header__stat">
<div class="stamped-roundel stamped-roundel--stat">
<div class="num">25</div>
<div class="label">Min<br>Avg<br>Watch</div>
</div>
<span class="hub-header__stat-plaque">Average watch time across the rack</span>
</aside>
</div>
</div>
</section>
<!-- ====================================================== -->
<!-- 5. FILTER CHIPS BAR (NEW: filter-chips-bar) -->
<!-- ====================================================== -->
<section class="filter-chips-bar" aria-label="Filter tutorials">
<div class="container">
<div class="filter-chips-bar__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="filter-chips-bar__row">
<span class="filter-chips-bar__label">Difficulty</span>
<div class="filter-chips-bar__chips">
<button class="filter-chips-bar__chip is-active" type="button">All levels</button>
<button class="filter-chips-bar__chip" type="button">Beginner</button>
<button class="filter-chips-bar__chip" type="button">Intermediate</button>
<button class="filter-chips-bar__chip" type="button">Advanced</button>
</div>
</div>
<div class="filter-chips-bar__row">
<span class="filter-chips-bar__label">System</span>
<div class="filter-chips-bar__chips">
<button class="filter-chips-bar__chip is-active" type="button">All systems</button>
<button class="filter-chips-bar__chip" type="button">Warhammer 40K</button>
<button class="filter-chips-bar__chip" type="button">Age of Sigmar</button>
<button class="filter-chips-bar__chip" type="button">The Old World</button>
<button class="filter-chips-bar__chip" type="button">Dungeons & Dragons</button>
</div>
</div>
<div class="filter-chips-bar__row">
<span class="filter-chips-bar__label">Topic</span>
<div class="filter-chips-bar__chips">
<button class="filter-chips-bar__chip is-active" type="button">All topics</button>
<button class="filter-chips-bar__chip" type="button">Painting</button>
<button class="filter-chips-bar__chip" type="button">Assembly</button>
<button class="filter-chips-bar__chip" type="button">Basing</button>
<button class="filter-chips-bar__chip" type="button">Magnetising</button>
<button class="filter-chips-bar__chip" type="button">Edge Highlighting</button>
<button class="filter-chips-bar__chip" type="button">Lighting</button>
</div>
</div>
<div class="filter-chips-bar__row">
<span class="filter-chips-bar__label">Format</span>
<div class="filter-chips-bar__chips">
<button class="filter-chips-bar__chip is-active" type="button">All formats</button>
<button class="filter-chips-bar__chip" type="button">Series</button>
<button class="filter-chips-bar__chip" type="button">Standalone</button>
<button class="filter-chips-bar__chip" type="button">Live recording</button>
</div>
</div>
<div class="filter-chips-bar__footer">
<span class="filter-chips-bar__count"><strong>14</strong> tutorials match your filters</span>
<button class="filter-chips-bar__clear" type="button">× Reset all filters</button>
</div>
</div>
</div>
</section>
<!-- ====================================================== -->
<!-- 6. FEATURED PAIRED ROW (1 featured + 4 secondary 2x2) -->
<!-- ====================================================== -->
<section class="featured-paired-row">
<div class="container">
<div class="featured-paired-row__grid">
<!-- LEFT half: featured-guide-card (NEW) -->
<div class="featured-paired-row__left">
<article class="featured-guide-card 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="featured-guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-featured/900/1100" alt="Workbench with sprues, clippers and primed Space Marines mid-assembly">
<div class="featured-guide-card__badges">
<span class="featured-guide-card__badge featured-guide-card__badge--difficulty">Beginner</span>
<span class="featured-guide-card__badge featured-guide-card__badge--time">28 min watch</span>
<span class="featured-guide-card__badge featured-guide-card__badge--system">Warhammer 40K</span>
</div>
<span class="featured-guide-card__play" aria-hidden="true"></span>
<span class="featured-guide-card__series-flag">Series · Ep 1 of 8</span>
</div>
<div class="featured-guide-card__body">
<span class="featured-guide-card__kicker">Featured Tutorial · The Workbench</span>
<h2 class="featured-guide-card__title">Combat Patrol Build — <em>Episode 1: Assembly</em></h2>
<span class="featured-guide-card__rule" aria-hidden="true"></span>
<p class="featured-guide-card__copy">Open the box, sprue to base — every cut, clip and trim before a drop of paint touches the plastic. First of eight episodes that take a single Combat Patrol from cellophane to tabletop‑ready, no skipped steps, no off-camera magic.</p>
<div class="featured-guide-card__presenter">
<span class="featured-guide-card__presenter-avatar" aria-hidden="true"></span>
<div>
<span class="featured-guide-card__presenter-handle">@brushhand_halloran</span>
<span class="featured-guide-card__presenter-role">Mara Halloran · Workshop lead, seven years on the bench</span>
</div>
</div>
<div class="featured-guide-card__ctas">
<a class="btn btn--lg" href="#">Watch Episode 1</a>
<a class="btn btn--ghost btn--lg" href="#">View the whole series</a>
</div>
<div class="featured-guide-card__meta">
<span>Filmed at the Forge · 2026</span>
<span>Closed captions</span>
<span>Kit list included</span>
</div>
</div>
</article>
</div>
<!-- RIGHT half: 4 guide-cards in 2x2 -->
<div class="featured-paired-row__right">
<div class="featured-paired-row__secondary">
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-2/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">16 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Magnetising · @eli_hartwell</span>
<h3 class="guide-card__title">Magnetising Marines for Loadout Swaps</h3>
<p class="guide-card__copy">One sergeant, three weapons, zero glue you'll regret.</p>
<span class="guide-card__series guide-card__series--standalone">Standalone</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-3/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">22 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · @brushhand_halloran</span>
<h3 class="guide-card__title">Edge Highlighting Power Armour</h3>
<p class="guide-card__copy">The brushwork that turns a tabletop army into a parade-ready one.</p>
<span class="guide-card__series">Series · Ep 3 of 6</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-4/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Advanced</span>
<span class="guide-card__badge guide-card__badge--time">19 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · @pelltheslow</span>
<h3 class="guide-card__title">Painting Eldar Wraiths — Bone Method</h3>
<p class="guide-card__copy">Cool whites and bone yellows, no airbrush required.</p>
<span class="guide-card__series guide-card__series--standalone">Standalone</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-5/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">45 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · @forgemaster_yelena</span>
<h3 class="guide-card__title">Two-Brush Blending Live Demo</h3>
<p class="guide-card__copy">An hour at the bench, one cape, two brushes, no edits.</p>
<span class="guide-card__series guide-card__series--live">Live recording</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- ====================================================== -->
<!-- 7. GEAR DIVIDER (catalogue: gear-divider) -->
<!-- ====================================================== -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ====================================================== -->
<!-- 8. TUTORIAL 3x3 GRID (9 guide-cards) -->
<!-- ====================================================== -->
<section class="tutorial-grid">
<div class="container">
<div class="tutorial-grid__head">
<h2 class="tutorial-grid__head-title">The Full Rack</h2>
<span class="tutorial-grid__head-sub">Showing 9 of 13 · sorted newest first</span>
</div>
<div class="tutorial-grid__grid">
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-6/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Beginner</span>
<span class="guide-card__badge guide-card__badge--time">14 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Basing · @forgemaster_yelena</span>
<h3 class="guide-card__title">Basing Workshop — Realistic Mud</h3>
<p class="guide-card__copy">Brown ink, PVA, sand from the back garden — mud worth standing in.</p>
<span class="guide-card__series guide-card__series--standalone">Standalone</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-7/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Beginner</span>
<span class="guide-card__badge guide-card__badge--time">18 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · @pelltheslow</span>
<h3 class="guide-card__title">Stormcast Vanguard — Episode 1: Skin Tones</h3>
<p class="guide-card__copy">Where the human face under the helm starts — warm flesh, no plastic feel.</p>
<span class="guide-card__series">Series · Ep 1 of 5</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-8/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Advanced</span>
<span class="guide-card__badge guide-card__badge--time">26 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · @captain_holloran</span>
<h3 class="guide-card__title">Old World Empire Heraldry</h3>
<p class="guide-card__copy">Freehand griffons and twin-tailed comets, taught the slow way.</p>
<span class="guide-card__series">Series · Ep 4 of 9</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-9/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">58 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · @brushhand_halloran</span>
<h3 class="guide-card__title">D&D Hero Speed-Paint Under the Hour</h3>
<p class="guide-card__copy">One paladin, sixty minutes, no shortcuts that show.</p>
<span class="guide-card__series guide-card__series--standalone">Standalone</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-10/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Beginner</span>
<span class="guide-card__badge guide-card__badge--time">33 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Assembly · @forgemaster_yelena</span>
<h3 class="guide-card__title">Airbrush Setup for Beginners</h3>
<p class="guide-card__copy">Compressor, hose, cup, gun — first spray on cardboard, not your minis.</p>
<span class="guide-card__series">Series · Ep 1 of 4</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-11/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">21 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · @pelltheslow</span>
<h3 class="guide-card__title">Painting Tyranid Carapace</h3>
<p class="guide-card__copy">Wet-blended chitin without making the model look glossy.</p>
<span class="guide-card__series guide-card__series--standalone">Standalone</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-12/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Advanced</span>
<span class="guide-card__badge guide-card__badge--time">38 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Lighting · @eli_hartwell</span>
<h3 class="guide-card__title">Object Source Lighting on Necrons</h3>
<p class="guide-card__copy">Green glow off a gauss flayer, painted in — no LEDs, no shortcuts.</p>
<span class="guide-card__series guide-card__series--live">Live recording</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-13/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">12 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Painting · @brushhand_halloran</span>
<h3 class="guide-card__title">Salamander Chapter Markings</h3>
<p class="guide-card__copy">Crossed-hammer shoulder pad, freehand, taught the lazy way.</p>
<span class="guide-card__series">Series · Ep 6 of 8</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
<article class="guide-card guide-card--video">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/wd-tut-14/640/400" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">24 min watch</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Magnetising · @captain_holloran</span>
<h3 class="guide-card__title">Magnetising Vehicle Turrets</h3>
<p class="guide-card__copy">Three loadouts, one Predator, swap mid-game without a click.</p>
<span class="guide-card__series">Series · Ep 2 of 4</span>
<span class="guide-card__cta">Watch tutorial</span>
</div>
</article>
</div>
</div>
</section>
<!-- ====================================================== -->
<!-- 9. PAGINATION (catalogue: pagination) -->
<!-- ====================================================== -->
<section class="pagination">
<div class="container">
<div class="pagination__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="pagination__summary">Page <strong>1</strong> of <strong>2</strong> · 14 tutorials on the rack</div>
<div class="pagination__tiles">
<button class="pagination__tile pagination__tile--nav pagination__tile--disabled" type="button">← Prev</button>
<button class="pagination__tile pagination__tile--active" type="button">1</button>
<button class="pagination__tile" type="button">2</button>
<span class="pagination__tile pagination__tile--ellipsis">···</span>
<button class="pagination__tile pagination__tile--nav" type="button">Next →</button>
</div>
<div class="pagination__loadmore">
<a class="btn btn--ghost" href="#">Load more tutorials ↓</a>
</div>
</div>
</div>
</section>
<!-- ====================================================== -->
<!-- 10. CLOSER PAIRED ROW (newsletter + creator-spotlight) -->
<!-- ====================================================== -->
<section class="closer-paired-row">
<div class="container">
<div class="closer-paired-row__grid">
<!-- LEFT half: newsletter-garrison panel -->
<div class="newsletter-garrison__panel rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="newsletter-garrison__copy">
<h3>Join the Garrison</h3>
<p>New tutorial drops, kit lists from the bench, and the occasional invite to a Thursday-evening paint-along. Sent when there's something worth sending.</p>
</div>
<form class="newsletter-garrison__form" onsubmit="return false;">
<input type="email" placeholder="your.signal@dispatch.uk" aria-label="Email address">
<button type="submit">Enlist</button>
</form>
</div>
<!-- RIGHT half: creator-spotlight -->
<div class="creator-spotlight">
<div class="creator-spotlight__portrait">
<figure class="plated-frame">
<div class="plated-frame__media" style="aspect-ratio: 4/5;">
<img src="https://picsum.photos/seed/wd-tut-creator/600/750" alt="Mara Halloran at her painting desk">
</div>
</figure>
</div>
<div class="creator-spotlight__copy">
<span class="eyebrow-stamp">Featured This Fortnight</span>
<h3 class="creator-spotlight__name">Mara “Brushhand” Halloran</h3>
<div class="creator-spotlight__tags">
<span class="creator-spotlight__tag">40K</span>
<span class="creator-spotlight__tag">Painting</span>
<span class="creator-spotlight__tag">Workbench</span>
</div>
<p class="creator-spotlight__quote">“I paint slow, I narrate slower, and I have never met a glaze I didn't want to lay down one more time.”</p>
<div class="creator-spotlight__stats">
<div class="creator-spotlight__stat"><strong>184</strong><span>Tutorials filmed</span></div>
<div class="creator-spotlight__stat"><strong>62K</strong><span>Subscribers</span></div>
<div class="creator-spotlight__stat"><strong>7 yrs</strong><span>On the bench</span></div>
</div>
<a class="btn" href="#">Visit Mara's Workshop</a>
</div>
</div>
</div>
</div>
</section>
<!-- ====================================================== -->
<!-- 11. SITE FOOTER (catalogue: site-footer) -->
<!-- ====================================================== -->
<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, Dungeons & Dragons, and the kit, paint and patience between.</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="#">Paints & Hobby</a></li>
<li><a href="#">New Releases</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Discover</h4>
<ul class="site-footer__list">
<li><a href="#">Army Builder</a></li>
<li><a href="#">Battle Simulator</a></li>
<li><a href="#">How-To Guides</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Painting Showcase</a></li>
<li><a href="#">Creator Workshops</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 War Dungeon</a></li>
<li><a href="#">Sister Brands</a></li>
<li><a href="#">Loyalty Programme</a></li>
<li><a href="#">Affiliate / Creators</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 · Cookies · Terms</div>
</div>
</div>
</footer>
</body>
</html>