← Nerdworks

Nerdworks Homepage

MNW18 Homepage Nerdworks
Open in New Tab
Template type: Full-page Gutenberg — ready for /wire-template.

Mockup HTML

Open in New Tab 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nerdworks — Curated TCG & Tabletop, Online and In-Store</title>
<link rel="stylesheet" href="https://use.typekit.net/vlm3jnu.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap">
<style>
:root {
  /* Palette */
  --anchor: #1f231f;
  --anchor-elevated: #262a26;
  --bright: #f0f2ee;
  --primary: #266038;
  --saffron: #f5c840;

  /* Hairline rules per ground */
  --rule-on-anchor: rgba(240, 242, 238, 0.12);
  --rule-on-bright: rgba(25, 28, 25, 0.12);
  --rule-on-primary: rgba(240, 242, 238, 0.18);

  /* Card shadows */
  --card-shadow: 0 8px 24px rgba(25, 28, 25, 0.1);
  --card-shadow-hover: 0 16px 32px rgba(25, 28, 25, 0.2);

  /* Fonts */
  --font-heading: "proxima-nova", sans-serif;
  --font-body: "proxima-nova", sans-serif;
  --font-label: "JetBrains Mono", monospace;

  /* Type scale */
  --fs-display: 52px;
  --fs-h2: 30px;
  --fs-h3: 21px;
  --fs-h4: 17px;
  --fs-body: 16px;
  --fs-lead: 19px;
  --fs-meta: 13px;
  --fs-eyebrow: 13px;
  --fs-label: 14px;
  --fs-label-card: 20px;

  /* Spacing scale (restricted set) */
  --space-15: 15px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;

  /* Radii */
  --radius-interactive: 4px;
  --radius-card: 8px;

  /* Container */
  --container-max: 1400px;
  --gutter: 20px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  background: var(--anchor);
  color: var(--bright);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Section grounds ---------- */
.section { width: 100%; padding-block: var(--space-60); }
.section--anchor  { background: var(--anchor);  color: var(--bright); }
.section--bright  { background: var(--bright);  color: var(--anchor); }
.section--primary { background: var(--primary); color: var(--bright); }

.section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ====================================================================== */
/* BLOCK: site-header                                                     */
/* ====================================================================== */
.site-header {
  background: var(--anchor);
  color: var(--bright);
  border-bottom: 1px solid var(--rule-on-anchor);
}
.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-20) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-30);
}
.site-header__brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--bright);
}
.site-header__brand span { color: var(--saffron); }
.site-header__nav {
  display: flex;
  gap: var(--space-30);
  flex-wrap: wrap;
}
.site-header__link {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--bright);
}
.site-header__link:hover { color: var(--saffron); }
.site-header__actions { display: flex; gap: var(--space-15); align-items: center; }
.site-header__cart {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
  color: var(--saffron);
}

/* ====================================================================== */
/* BLOCK: hero  (always anchor ground; primary-accent exception)          */
/* ====================================================================== */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--space-40);
}
.hero__col {
  padding-block: var(--space-60);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary); /* hero exception: primary accent on anchor */
  margin-bottom: var(--space-15);
}
.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bright);
}
.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--bright);
  margin-top: var(--space-20);
  max-width: 32em;
}
.hero__cta {
  align-self: flex-start;
  margin-top: var(--space-30);
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-interactive);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  background: var(--primary); /* hero exception: primary fill */
  color: var(--bright);
}
.hero__cta:hover { filter: brightness(1.08); }
.hero__media { position: relative; }
.hero__image {
  width: 100%;
  height: 100%;
  min-height: 480px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--anchor) 0%, var(--anchor) 25%, rgba(31,35,31,0) 60%);
  pointer-events: none;
}
/* USP panel docked at bottom of left column */
.hero__usp {
  margin-top: var(--space-40);
  background: rgba(31, 35, 31, 0.55);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--rule-on-anchor);
  border-radius: var(--radius-card);
  padding: var(--space-20);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
}
.hero__usp-cell { display: flex; gap: var(--space-15); align-items: flex-start; }
.hero__usp-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--primary); /* hero exception: primary-coloured icons */
}
.hero__usp-icon svg { width: 100%; height: 100%; display: block; }
.hero__usp-label {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--bright);
  line-height: 1.2;
}
.hero__usp-sub {
  font-size: var(--fs-meta);
  color: rgba(240, 242, 238, 0.62);
  line-height: 1.4;
}

/* ====================================================================== */
/* BLOCK: section-header  (self-scoped, ground-relative)                  */
/* ====================================================================== */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-30);
  margin-bottom: var(--space-40);
}
.section-header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-header__group { max-width: 760px; }
.section-header__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-15);
}
.section-header__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.section-header__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  margin-top: var(--space-15);
}
.section-header__link {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  white-space: nowrap;
}
.section-header__link::after { content: " \2192"; }
/* ground-relative colour */
.section--anchor .section-header__eyebrow,
.section--anchor .section-header__link { color: var(--saffron); }
.section--bright .section-header__eyebrow,
.section--bright .section-header__link { color: var(--primary); }
.section--primary .section-header__eyebrow,
.section--primary .section-header__link { color: var(--saffron); }
.section-header__link:hover { text-decoration: underline; }

/* ====================================================================== */
/* BLOCK: btn  (ground-relative button system)                            */
/* ====================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-interactive);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  transition: filter .15s ease, background .15s ease, color .15s ease;
}
/* Primary button per ground */
.section--anchor  .btn--primary { background: var(--saffron);  color: var(--anchor); }
.section--bright  .btn--primary { background: var(--primary);  color: var(--bright); }
.section--primary .btn--primary { background: var(--anchor);   color: var(--bright); }
.btn--primary:hover { filter: brightness(1.08); }
/* Secondary (ghost) button per ground */
.section--anchor  .btn--secondary { background: transparent; border-color: var(--saffron); color: var(--saffron); }
.section--bright  .btn--secondary { background: transparent; border-color: var(--primary); color: var(--primary); }
.section--primary .btn--secondary { background: transparent; border-color: var(--saffron); color: var(--saffron); }
.section--anchor  .btn--secondary:hover { background: rgba(245,200,64,0.12); }
.section--bright  .btn--secondary:hover { background: rgba(38,96,56,0.08); }
.section--primary .btn--secondary:hover { background: rgba(245,200,64,0.12); }
.btn-row { display: flex; gap: var(--space-15); flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

/* ====================================================================== */
/* BLOCK: game-tile  (image-fill nav tile)                                */
/* ====================================================================== */
.game-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.game-tile:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.game-tile__image { width: 100%; height: 100%; object-fit: cover; }
.game-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31,35,31,0.85) 0%, rgba(31,35,31,0.15) 55%, rgba(31,35,31,0) 100%);
}
.game-tile__name {
  position: absolute;
  left: var(--space-20);
  right: var(--space-20);
  bottom: var(--space-20);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bright);
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

/* ====================================================================== */
/* BLOCK: feature-product  (split: image + editorial body)                */
/* ====================================================================== */
.feature-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-40);
  align-items: center;
}
.feature-product__media { border-radius: var(--radius-card); overflow: hidden; }
.feature-product__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.feature-product__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--saffron);
  margin-bottom: var(--space-15);
}
.feature-product__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bright);
}
.feature-product__body {
  font-size: var(--fs-lead);
  line-height: 1.5;
  margin-top: var(--space-20);
  color: var(--bright);
}
.feature-product__price {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label-card);
  color: var(--saffron);
  margin-top: var(--space-20);
}
.feature-product__cta { margin-top: var(--space-30); }

/* ====================================================================== */
/* BLOCK: product-card  (4:5 image, name, price, CTA — ground-relative)   */
/* ====================================================================== */
.product-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.product-card__media { width: 100%; }
.product-card__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.product-card__body {
  padding: var(--space-15);
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  flex: 1;
}
.product-card__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.product-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}
.product-card__price {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label-card);
}
.product-card__cta { margin-top: auto; }
/* Card surface + nested-ground colour, per styleguide card-surface-per-ground */
.section--anchor .product-card  { background: var(--anchor-elevated); color: var(--bright); }
.section--anchor .product-card .product-card__title { color: var(--bright); }
.section--anchor .product-card .product-card__eyebrow,
.section--anchor .product-card .product-card__price { color: var(--saffron); }
.section--bright .product-card  { background: var(--anchor); color: var(--bright); }
.section--bright .product-card .product-card__title { color: var(--bright); }
.section--bright .product-card .product-card__eyebrow,
.section--bright .product-card .product-card__price { color: var(--saffron); }
.section--primary .product-card { background: var(--bright); color: var(--anchor); }
.section--primary .product-card .product-card__title { color: var(--anchor); }
.section--primary .product-card .product-card__eyebrow,
.section--primary .product-card .product-card__price { color: var(--primary); }
/* In-card secondary button takes the CARD ground, not the section */
.section--anchor .product-card .btn--secondary,
.section--bright .product-card .btn--secondary { background: transparent; border-color: var(--saffron); color: var(--saffron); }
.section--anchor .product-card .btn--secondary:hover,
.section--bright .product-card .btn--secondary:hover { background: rgba(245,200,64,0.12); }
.section--primary .product-card .btn--secondary { background: transparent; border-color: var(--primary); color: var(--primary); }
.section--primary .product-card .btn--secondary:hover { background: rgba(38,96,56,0.08); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
}

/* ====================================================================== */
/* BLOCK: preorder-feature  (centred single-column release intro)         */
/* ====================================================================== */
.preorder-feature {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.preorder-feature__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-30);
}
.preorder-feature__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.preorder-feature__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-15);
}
.preorder-feature__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.preorder-feature__body {
  font-size: var(--fs-lead);
  line-height: 1.5;
  margin-top: var(--space-20);
}
.preorder-feature__specs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-30);
  margin-top: var(--space-30);
  padding-top: var(--space-20);
  border-top: 1px solid transparent;
}
.preorder-feature__spec { text-align: left; }
.preorder-feature__spec-label {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
}
.preorder-feature__spec-value {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
}
.preorder-feature__cta { margin-top: var(--space-30); }
/* ground-relative */
.section--bright .preorder-feature__eyebrow,
.section--bright .preorder-feature__spec-label { color: var(--primary); }
.section--bright .preorder-feature__spec-value { color: var(--primary); }
.section--bright .preorder-feature__specs { border-top-color: var(--rule-on-bright); }
.section--anchor .preorder-feature__eyebrow,
.section--anchor .preorder-feature__spec-label,
.section--anchor .preorder-feature__spec-value { color: var(--saffron); }
.section--anchor .preorder-feature__specs { border-top-color: var(--rule-on-anchor); }
.section--primary .preorder-feature__eyebrow,
.section--primary .preorder-feature__spec-label,
.section--primary .preorder-feature__spec-value { color: var(--saffron); }
.section--primary .preorder-feature__specs { border-top-color: var(--rule-on-primary); }

/* ====================================================================== */
/* BLOCK: single-card  (editorial single-card panel, 3-up)                */
/* ====================================================================== */
.single-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.single-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.single-card__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.single-card__body {
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  flex: 1;
}
.single-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}
.single-card__meta {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
  padding-bottom: var(--space-15);
  border-bottom: 1px solid transparent;
}
.single-card__price {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label-card);
}
.single-card__note { font-size: var(--fs-body); line-height: 1.65; }
/* ground-relative card surface + colour */
.section--primary .single-card { background: var(--bright); color: var(--anchor); }
.section--primary .single-card .single-card__title { color: var(--anchor); }
.section--primary .single-card .single-card__meta,
.section--primary .single-card .single-card__price { color: var(--primary); }
.section--primary .single-card .single-card__meta { border-bottom-color: var(--rule-on-bright); }
.section--anchor .single-card { background: var(--anchor-elevated); color: var(--bright); }
.section--anchor .single-card .single-card__title { color: var(--bright); }
.section--anchor .single-card .single-card__meta,
.section--anchor .single-card .single-card__price { color: var(--saffron); }
.section--anchor .single-card .single-card__meta { border-bottom-color: var(--rule-on-anchor); }
.section--bright .single-card { background: var(--anchor); color: var(--bright); }
.section--bright .single-card .single-card__title { color: var(--bright); }
.section--bright .single-card .single-card__meta,
.section--bright .single-card .single-card__price { color: var(--saffron); }
.section--bright .single-card .single-card__meta { border-bottom-color: var(--rule-on-anchor); }
.single-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }

/* ====================================================================== */
/* BLOCK: single-tile  (compact card tile w/ condition badge)             */
/* ====================================================================== */
.single-tile {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.single-tile:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.single-tile__media { position: relative; }
.single-tile__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.single-tile__badge {
  position: absolute;
  top: var(--space-15);
  left: var(--space-15);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-meta);
  padding: 4px 8px;
  border-radius: var(--radius-interactive);
}
.single-tile__body {
  padding: var(--space-15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.single-tile__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
}
.single-tile__set {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-meta);
}
.single-tile__price {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label-card);
}
/* ground-relative */
.section--anchor .single-tile { background: var(--anchor-elevated); color: var(--bright); }
.section--anchor .single-tile .single-tile__name { color: var(--bright); }
.section--anchor .single-tile .single-tile__set { color: rgba(240,242,238,0.62); }
.section--anchor .single-tile .single-tile__price { color: var(--saffron); }
.section--anchor .single-tile .single-tile__badge { background: var(--saffron); color: var(--anchor); }
.section--bright .single-tile { background: var(--anchor); color: var(--bright); }
.section--bright .single-tile .single-tile__name { color: var(--bright); }
.section--bright .single-tile .single-tile__set { color: rgba(240,242,238,0.62); }
.section--bright .single-tile .single-tile__price { color: var(--saffron); }
.section--bright .single-tile .single-tile__badge { background: var(--saffron); color: var(--anchor); }
.section--primary .single-tile { background: var(--bright); color: var(--anchor); }
.section--primary .single-tile .single-tile__name { color: var(--anchor); }
.section--primary .single-tile .single-tile__set { color: rgba(31,35,31,0.6); }
.section--primary .single-tile .single-tile__price { color: var(--primary); }
.section--primary .single-tile .single-tile__badge { background: var(--saffron); color: var(--anchor); }
.single-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); margin-bottom: var(--space-40); }

/* ====================================================================== */
/* BLOCK: metric-strip  (compact horizontal stats band)                   */
/* ====================================================================== */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-30);
}
.metric-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.metric-strip__icon { width: 28px; height: 28px; }
.metric-strip__icon svg { width: 100%; height: 100%; display: block; }
.metric-strip__figure {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 24px;
}
.metric-strip__label {
  font-size: var(--fs-meta);
  font-weight: 400;
}
/* ground-relative */
.section--bright .metric-strip__icon { color: var(--primary); }
.section--bright .metric-strip__figure { color: var(--primary); }
.section--bright .metric-strip__label { color: var(--anchor); }
.section--anchor .metric-strip__icon,
.section--anchor .metric-strip__figure { color: var(--saffron); }
.section--anchor .metric-strip__label { color: var(--bright); }
.section--primary .metric-strip__icon,
.section--primary .metric-strip__figure { color: var(--saffron); }
.section--primary .metric-strip__label { color: var(--bright); }

/* ====================================================================== */
/* BLOCK: spotlight  (split image + editorial copy w/ eyebrow)            */
/* ====================================================================== */
.spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-40);
  align-items: center;
}
.spotlight--reverse .spotlight__media { order: 2; }
.spotlight__media { border-radius: var(--radius-card); overflow: hidden; }
.spotlight__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.spotlight__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-15);
}
.spotlight__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.spotlight__body {
  font-size: var(--fs-body);
  line-height: 1.65;
  margin-top: var(--space-20);
}
.spotlight__cta { margin-top: var(--space-30); }
/* ground-relative */
.section--primary .spotlight__eyebrow { color: var(--saffron); }
.section--anchor .spotlight__eyebrow { color: var(--saffron); }
.section--bright .spotlight__eyebrow { color: var(--primary); }

/* ====================================================================== */
/* BLOCK: process-steps  (numbered horizontal process row)                */
/* ====================================================================== */
.process-row {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}
.process-row__intro { max-width: 720px; margin-inline: auto; }
.process-row__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.process-row__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  margin-top: var(--space-15);
}
.process-row__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-30);
  margin-top: var(--space-40);
}
.process-step { text-align: left; }
.process-step__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-15);
  padding-bottom: var(--space-15);
  border-bottom: 1px solid transparent;
  display: block;
}
.process-step__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}
.process-step__body { font-size: var(--fs-body); line-height: 1.65; margin-top: var(--space-15); }
.process-row__cta { margin-top: var(--space-40); }
/* ground-relative */
.section--anchor .process-step__eyebrow { color: var(--saffron); border-bottom-color: var(--rule-on-anchor); }
.section--bright .process-step__eyebrow { color: var(--primary); border-bottom-color: var(--rule-on-bright); }
.section--primary .process-step__eyebrow { color: var(--saffron); border-bottom-color: var(--rule-on-primary); }

/* ====================================================================== */
/* BLOCK: terrain-tile  (4:5 labelled thumbnail)                          */
/* ====================================================================== */
.terrain-tile { display: flex; flex-direction: column; gap: var(--space-15); }
.terrain-tile__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.terrain-tile:hover .terrain-tile__media { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.terrain-tile__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.terrain-tile__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
}
.terrain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); margin-bottom: var(--space-40); }

/* ====================================================================== */
/* BLOCK: event-card  (small image + meta + CTA)                          */
/* ====================================================================== */
.event-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.event-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.event-card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.event-card__body {
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  flex: 1;
}
.event-card__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.event-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}
.event-card__date {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label);
}
.event-card__desc { font-size: var(--fs-body); line-height: 1.65; }
.event-card__cta { margin-top: auto; }
/* ground-relative card surface (primary section → bright card) */
.section--primary .event-card { background: var(--bright); color: var(--anchor); }
.section--primary .event-card .event-card__title { color: var(--anchor); }
.section--primary .event-card .event-card__eyebrow,
.section--primary .event-card .event-card__date { color: var(--primary); }
.section--primary .event-card .btn--secondary { border-color: var(--primary); color: var(--primary); }
.section--primary .event-card .btn--secondary:hover { background: rgba(38,96,56,0.08); }
.section--anchor .event-card { background: var(--anchor-elevated); color: var(--bright); }
.section--anchor .event-card .event-card__title { color: var(--bright); }
.section--anchor .event-card .event-card__eyebrow,
.section--anchor .event-card .event-card__date { color: var(--saffron); }
.section--anchor .event-card .btn--secondary { border-color: var(--saffron); color: var(--saffron); }
.section--bright .event-card { background: var(--anchor); color: var(--bright); }
.section--bright .event-card .event-card__title { color: var(--bright); }
.section--bright .event-card .event-card__eyebrow,
.section--bright .event-card .event-card__date { color: var(--saffron); }
.section--bright .event-card .btn--secondary { border-color: var(--saffron); color: var(--saffron); }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }

/* ====================================================================== */
/* BLOCK: feature-event  (image-driven single-event spotlight)            */
/* ====================================================================== */
.feature-event {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
}
.feature-event__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.feature-event__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31,35,31,0.92) 0%, rgba(31,35,31,0.55) 45%, rgba(31,35,31,0.1) 100%);
}
.feature-event__content {
  position: relative;
  padding: var(--space-40);
  max-width: 640px;
}
.feature-event__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--saffron);
  margin-bottom: var(--space-15);
}
.feature-event__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bright);
}
.feature-event__date {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-label-card);
  color: var(--saffron);
  margin-top: var(--space-15);
}
.feature-event__body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--bright);
  margin-top: var(--space-20);
}
.feature-event__cta { margin-top: var(--space-30); }

/* ====================================================================== */
/* BLOCK: gallery-mosaic  (asymmetric event photo mosaic)                 */
/* ====================================================================== */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: var(--space-15);
}
.gallery-mosaic__item {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.gallery-mosaic__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-mosaic__item--wide { grid-column: span 2; }
.gallery-mosaic__item--tall { grid-row: span 2; }
.gallery-mosaic__item--big  { grid-column: span 2; grid-row: span 2; }
.gallery-mosaic__caption {
  text-align: center;
  margin-top: var(--space-30);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.gallery-mosaic__caption a { font-weight: 600; }
.section--bright .gallery-mosaic__caption a { color: var(--primary); }
.section--bright .gallery-mosaic__caption a:hover { text-decoration: underline; }

/* ====================================================================== */
/* BLOCK: blog-card  (3:2 image, title, date, hook)                       */
/* ====================================================================== */
.blog-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.blog-card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.blog-card__body {
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  flex: 1;
}
.blog-card__date {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-meta);
}
.blog-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}
.blog-card__hook { font-size: var(--fs-body); line-height: 1.65; }
/* ground-relative card surface (primary section → bright card) */
.section--primary .blog-card { background: var(--bright); color: var(--anchor); }
.section--primary .blog-card .blog-card__title { color: var(--anchor); }
.section--primary .blog-card .blog-card__date { color: var(--primary); }
.section--anchor .blog-card { background: var(--anchor-elevated); color: var(--bright); }
.section--anchor .blog-card .blog-card__title { color: var(--bright); }
.section--anchor .blog-card .blog-card__date { color: var(--saffron); }
.section--bright .blog-card { background: var(--anchor); color: var(--bright); }
.section--bright .blog-card .blog-card__title { color: var(--bright); }
.section--bright .blog-card .blog-card__date { color: var(--saffron); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); margin-bottom: var(--space-40); }

/* ====================================================================== */
/* BLOCK: newsletter  (centred inline email capture)                      */
/* ====================================================================== */
.newsletter { max-width: 640px; margin-inline: auto; text-align: center; }
.newsletter__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bright);
}
.newsletter__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--bright);
  margin-top: var(--space-15);
}
.newsletter__form {
  display: flex;
  gap: var(--space-15);
  margin-top: var(--space-30);
}
.newsletter__input {
  flex: 1;
  min-height: 44px;
  padding: 12px var(--space-15);
  border-radius: var(--radius-interactive);
  border: 1px solid var(--rule-on-anchor);
  background: var(--anchor-elevated);
  color: var(--bright);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.newsletter__input::placeholder { color: rgba(240,242,238,0.5); }
.newsletter__input:focus { outline: 2px solid var(--saffron); outline-offset: 0; }
.newsletter__submit {
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-interactive);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  background: var(--saffron);
  color: var(--anchor);
}
.newsletter__submit:hover { filter: brightness(1.06); }

/* ====================================================================== */
/* BLOCK: site-footer                                                     */
/* ====================================================================== */
.site-footer {
  background: var(--anchor);
  color: var(--bright);
  padding-block: var(--space-40);
  border-top: 1px solid var(--rule-on-anchor);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-30);
  justify-content: space-between;
  align-items: center;
}
.site-footer__brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--bright);
}
.site-footer__brand span { color: var(--saffron); }
.site-footer__meta {
  font-size: var(--fs-meta);
  color: rgba(240,242,238,0.62);
}
.site-footer__links { display: flex; gap: var(--space-20); flex-wrap: wrap; }
.site-footer__link { font-size: var(--fs-meta); font-weight: 600; }
.site-footer__link:hover { color: var(--saffron); }

/* ====================================================================== */
/* RESPONSIVE                                                             */
/* ====================================================================== */
@media (max-width: 960px) {
  :root { --fs-display: 40px; --fs-h2: 26px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__image { min-height: 280px; }
  .hero__overlay { background: linear-gradient(to bottom, rgba(31,35,31,0) 40%, var(--anchor) 100%); }
  .hero__col { padding-block: var(--space-40); }
  .feature-product,
  .spotlight { grid-template-columns: 1fr; }
  .spotlight--reverse .spotlight__media { order: -1; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .single-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .terrain-grid { grid-template-columns: repeat(2, 1fr); }
  .single-grid-3 { grid-template-columns: 1fr; }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .process-row__steps { grid-template-columns: 1fr; }
  .gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-mosaic__item--big { grid-column: span 2; }
  .section-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  :root { --fs-display: 32px; }
  .hero__usp { grid-template-columns: 1fr 1fr; }
  .product-grid,
  .single-tile-grid,
  .terrain-grid,
  .event-grid,
  .game-grid { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .newsletter__form { flex-direction: column; }
  .site-header__nav { display: none; }
  .gallery-mosaic { grid-template-columns: 1fr; }
  .gallery-mosaic__item--wide,
  .gallery-mosaic__item--big { grid-column: span 1; }
  .feature-event__content { padding: var(--space-20); }
}
</style>
</head>
<body>

<!-- ===================== SITE HEADER ===================== -->
<header class="site-header">
  <div class="site-header__inner">
    <a class="site-header__brand" href="#">Nerd<span>works</span></a>
    <nav class="site-header__nav">
      <a class="site-header__link" href="#">Trading cards</a>
      <a class="site-header__link" href="#">Singles</a>
      <a class="site-header__link" href="#">Warhammer</a>
      <a class="site-header__link" href="#">Star Wars</a>
      <a class="site-header__link" href="#">Events</a>
      <a class="site-header__link" href="#">Journal</a>
    </nav>
    <div class="site-header__actions">
      <span class="site-header__cart">Basket (0)</span>
    </div>
  </div>
</header>

<!-- ===================== 1. HERO (anchor) ===================== -->
<section class="section section--anchor hero">
  <div class="hero__inner">
    <div class="hero__col">
      <span class="hero__eyebrow">Curated in-house</span>
      <h1 class="hero__title">A collector's shop for trading cards, built by people who play them.</h1>
      <p class="hero__lead">Hand-picked singles, sealed product and Warhammer kits — verified, graded by condition and shipped from our shop, not a warehouse algorithm.</p>
      <a class="hero__cta" href="#">Shop the latest arrivals</a>
      <div class="hero__usp">
        <div class="hero__usp-cell">
          <span class="hero__usp-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg></span>
          <div>
            <span class="hero__usp-label">Verified authentic</span>
            <span class="hero__usp-sub">Every single checked at intake</span>
          </div>
        </div>
        <div class="hero__usp-cell">
          <span class="hero__usp-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h11v8H3z"/><path d="M14 10h4l3 3v2h-7z"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg></span>
          <div>
            <span class="hero__usp-label">Tracked UK shipping</span>
            <span class="hero__usp-sub">Sleeved and top-loaded</span>
          </div>
        </div>
        <div class="hero__usp-cell">
          <span class="hero__usp-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="1"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span>
          <div>
            <span class="hero__usp-label">Secure checkout</span>
            <span class="hero__usp-sub">Pay safely, every order</span>
          </div>
        </div>
        <div class="hero__usp-cell">
          <span class="hero__usp-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 2.5-5 6-5s6 2 6 5"/><path d="M15 20c0-2 1-3.5 3-3.5s3 1.5 3 3.5"/></svg></span>
          <div>
            <span class="hero__usp-label">Real game store</span>
            <span class="hero__usp-sub">Tables, events and staff</span>
          </div>
        </div>
      </div>
    </div>
    <div class="hero__media">
      <img class="hero__image" src="https://picsum.photos/seed/nw-hero/1200/800" alt="Trading card singles laid out on a shop counter">
      <div class="hero__overlay"></div>
    </div>
  </div>
</section>

<!-- ===================== 2. SHOP BY GAME (bright) ===================== -->
<section class="section section--bright">
  <div class="section__inner">
    <div class="section-header">
      <div class="section-header__group">
        <span class="section-header__eyebrow">Shop by game</span>
        <h2 class="section-header__title">Pick your system</h2>
        <p class="section-header__lead">Sealed, singles and accessories across the systems we stock and play in-store.</p>
      </div>
    </div>
    <div class="game-grid">
      <a class="game-tile" href="#">
        <img class="game-tile__image" src="https://picsum.photos/seed/nw-pokemon/600/600" alt="Pokémon cards">
        <span class="game-tile__scrim"></span>
        <span class="game-tile__name">Pokémon</span>
      </a>
      <a class="game-tile" href="#">
        <img class="game-tile__image" src="https://picsum.photos/seed/nw-mtg/600/600" alt="Magic: The Gathering cards">
        <span class="game-tile__scrim"></span>
        <span class="game-tile__name">Magic: The Gathering</span>
      </a>
      <a class="game-tile" href="#">
        <img class="game-tile__image" src="https://picsum.photos/seed/nw-lorcana/600/600" alt="Lorcana cards">
        <span class="game-tile__scrim"></span>
        <span class="game-tile__name">Lorcana</span>
      </a>
      <a class="game-tile" href="#">
        <img class="game-tile__image" src="https://picsum.photos/seed/nw-onepiece/600/600" alt="One Piece card game">
        <span class="game-tile__scrim"></span>
        <span class="game-tile__name">One Piece</span>
      </a>
      <a class="game-tile" href="#">
        <img class="game-tile__image" src="https://picsum.photos/seed/nw-swu/600/600" alt="Star Wars Unlimited cards">
        <span class="game-tile__scrim"></span>
        <span class="game-tile__name">Star Wars Unlimited</span>
      </a>
      <a class="game-tile" href="#">
        <img class="game-tile__image" src="https://picsum.photos/seed/nw-riftbound/600/600" alt="Riftbound cards">
        <span class="game-tile__scrim"></span>
        <span class="game-tile__name">Riftbound</span>
      </a>
    </div>
  </div>
</section>

<!-- ===================== 3. FEATURED PRODUCT (primary) ===================== -->
<section class="section section--primary">
  <div class="section__inner">
    <div class="feature-product">
      <div class="feature-product__media">
        <img class="feature-product__image" src="https://picsum.photos/seed/nw-featured/800/1000" alt="Pokémon Prismatic Evolutions Elite Trainer Box">
      </div>
      <div class="feature-product__copy">
        <span class="feature-product__eyebrow">New arrival</span>
        <h2 class="feature-product__title">Prismatic Evolutions Elite Trainer Box</h2>
        <p class="feature-product__body">The set everyone's been chasing. Nine boosters, the Eevee-family promo and enough top-loaded value to make the secondary market nervous. We've capped it at two per customer so it lands in collectors' hands, not the resale pile.</p>
        <div class="feature-product__price">£49.95</div>
        <a class="btn btn--primary feature-product__cta" href="#">Add to basket</a>
      </div>
    </div>
  </div>
</section>

<!-- ===================== 4. NEW ARRIVALS (anchor) ===================== -->
<section class="section section--anchor">
  <div class="section__inner">
    <div class="section-header">
      <div class="section-header__group">
        <span class="section-header__eyebrow">Just in</span>
        <h2 class="section-header__title">New arrivals</h2>
      </div>
      <a class="section-header__link" href="#">View all new arrivals</a>
    </div>
    <div class="product-grid">
      <article class="product-card">
        <div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-na1/600/750" alt="Magic Foundations Bundle"></div>
        <div class="product-card__body">
          <span class="product-card__eyebrow">Magic: The Gathering</span>
          <h3 class="product-card__title">Foundations Bundle</h3>
          <div class="product-card__price">£42.00</div>
          <a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
        </div>
      </article>
      <article class="product-card">
        <div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-na2/600/750" alt="Lorcana Azurite Sea booster box"></div>
        <div class="product-card__body">
          <span class="product-card__eyebrow">Lorcana</span>
          <h3 class="product-card__title">Azurite Sea Booster Box</h3>
          <div class="product-card__price">£114.99</div>
          <a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
        </div>
      </article>
      <article class="product-card">
        <div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-na3/600/750" alt="One Piece Two Legends booster"></div>
        <div class="product-card__body">
          <span class="product-card__eyebrow">One Piece</span>
          <h3 class="product-card__title">Two Legends Booster</h3>
          <div class="product-card__price">£4.50</div>
          <a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
        </div>
      </article>
      <article class="product-card">
        <div class="product-card__media"><img class="product-card__image" src="https://picsum.photos/seed/nw-na4/600/750" alt="Dragon Shield matte sleeves"></div>
        <div class="product-card__body">
          <span class="product-card__eyebrow">Accessories</span>
          <h3 class="product-card__title">Dragon Shield Matte Sleeves (100)</h3>
          <div class="product-card__price">£8.95</div>
          <a class="btn btn--secondary product-card__cta" href="#">Add to cart</a>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ===================== 5. PRODUCT PRE-ORDER (bright) ===================== -->
<section class="section section--bright">
  <div class="section__inner">
    <div class="preorder-feature">
      <div class="preorder-feature__media">
        <img class="preorder-feature__image" src="https://picsum.photos/seed/nw-preorder/900/600" alt="Star Wars Unlimited Legends of the Force key art">
      </div>
      <span class="preorder-feature__eyebrow">Pre-order</span>
      <h2 class="preorder-feature__title">Star Wars Unlimited: Legends of the Force</h2>
      <p class="preorder-feature__body">The fifth set leans hard into the Force users — Jedi and Sith leaders with build-around mechanics that should shake up the meta. We're taking pre-orders on boosters, the two starter decks and the prerelease box. Prerelease seats at the shop open the same weekend.</p>
      <div class="preorder-feature__specs">
        <div class="preorder-feature__spec">
          <span class="preorder-feature__spec-label">Release date</span>
          <span class="preorder-feature__spec-value">11 Jul 2026</span>
        </div>
        <div class="preorder-feature__spec">
          <span class="preorder-feature__spec-label">Format</span>
          <span class="preorder-feature__spec-value">Premier & Twin Suns</span>
        </div>
        <div class="preorder-feature__spec">
          <span class="preorder-feature__spec-label">Edition</span>
          <span class="preorder-feature__spec-value">First print run</span>
        </div>
      </div>
      <a class="btn btn--primary preorder-feature__cta" href="#">Pre-order now</a>
    </div>
  </div>
</section>

<!-- ===================== 6. HOTTEST SINGLES (primary) ===================== -->
<section class="section section--primary">
  <div class="section__inner">
    <div class="section-header section-header--center">
      <div class="section-header__group">
        <span class="section-header__eyebrow">From the singles cabinet</span>
        <h2 class="section-header__title">Hottest singles in stock</h2>
        <p class="section-header__lead">The rarest and most-wanted cards on our shelves right now — every one staff-verified and graded for condition.</p>
      </div>
    </div>
    <div class="single-grid-3">
      <article class="single-card">
        <img class="single-card__image" src="https://picsum.photos/seed/nw-single1/600/750" alt="Charizard ex Special Illustration Rare">
        <div class="single-card__body">
          <h3 class="single-card__title">Charizard ex — Special Illustration Rare</h3>
          <div class="single-card__meta"><span>Obsidian Flames</span><span>SIR 215/197</span><span>NM</span></div>
          <div class="single-card__price">£289.00</div>
          <p class="single-card__note">Why we love it: the alt-art everyone wants and the one that anchors a Pokémon binder. Centring is dead-on and the holo is clean under the loupe — a genuine display piece.</p>
        </div>
      </article>
      <article class="single-card">
        <img class="single-card__image" src="https://picsum.photos/seed/nw-single2/600/750" alt="Ragavan, Nimble Pilferer foil">
        <div class="single-card__body">
          <h3 class="single-card__title">Ragavan, Nimble Pilferer (Foil)</h3>
          <div class="single-card__meta"><span>Modern Horizons 2</span><span>Mythic</span><span>LP</span></div>
          <div class="single-card__price">£62.50</div>
          <p class="single-card__note">A four-of in nearly every Modern aggro deck and still climbing. This foil copy reads light-play with a faint edge wear — priced fairly below a clean NM for players who'd rather sleeve than shelf.</p>
        </div>
      </article>
      <article class="single-card">
        <img class="single-card__image" src="https://picsum.photos/seed/nw-single3/600/750" alt="Elsa Spirit of Winter enchanted">
        <div class="single-card__body">
          <h3 class="single-card__title">Elsa — Spirit of Winter (Enchanted)</h3>
          <div class="single-card__meta"><span>Rise of the Floodborn</span><span>Enchanted</span><span>NM</span></div>
          <div class="single-card__price">£175.00</div>
          <p class="single-card__note">The chase enchanted from Lorcana's second set and a scarce one to find in NM. Borderless full-art with the textured foil — far harder to pull than the print run suggests.</p>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ===================== 7. SINGLES (anchor) ===================== -->
<section class="section section--anchor">
  <div class="section__inner">
    <div class="section-header section-header--center">
      <div class="section-header__group">
        <span class="section-header__eyebrow">The singles desk</span>
        <h2 class="section-header__title">Every card, one at a time</h2>
        <p class="section-header__lead">Thousands of individual singles across Pokémon and Magic, priced against the live market and condition-graded by our buying desk. NM and LP only — no surprises in the post.</p>
      </div>
    </div>
    <div class="single-tile-grid">
      <article class="single-tile">
        <div class="single-tile__media">
          <img class="single-tile__image" src="https://picsum.photos/seed/nw-st1/600/750" alt="Pikachu V Full Art">
          <span class="single-tile__badge">NM</span>
        </div>
        <div class="single-tile__body">
          <h4 class="single-tile__name">Pikachu V — Full Art</h4>
          <span class="single-tile__set">Vivid Voltage</span>
          <div class="single-tile__price">£34.00</div>
        </div>
      </article>
      <article class="single-tile">
        <div class="single-tile__media">
          <img class="single-tile__image" src="https://picsum.photos/seed/nw-st2/600/750" alt="Liliana of the Veil">
          <span class="single-tile__badge">LP</span>
        </div>
        <div class="single-tile__body">
          <h4 class="single-tile__name">Liliana of the Veil</h4>
          <span class="single-tile__set">Dominaria United</span>
          <div class="single-tile__price">£11.75</div>
        </div>
      </article>
      <article class="single-tile">
        <div class="single-tile__media">
          <img class="single-tile__image" src="https://picsum.photos/seed/nw-st3/600/750" alt="Mewtwo ex">
          <span class="single-tile__badge">NM</span>
        </div>
        <div class="single-tile__body">
          <h4 class="single-tile__name">Mewtwo ex</h4>
          <span class="single-tile__set">151</span>
          <div class="single-tile__price">£18.50</div>
        </div>
      </article>
      <article class="single-tile">
        <div class="single-tile__media">
          <img class="single-tile__image" src="https://picsum.photos/seed/nw-st4/600/750" alt="Sheoldred the Apocalypse">
          <span class="single-tile__badge">NM</span>
        </div>
        <div class="single-tile__body">
          <h4 class="single-tile__name">Sheoldred, the Apocalypse</h4>
          <span class="single-tile__set">Dominaria United</span>
          <div class="single-tile__price">£58.00</div>
        </div>
      </article>
    </div>
    <div class="btn-row btn-row--center">
      <a class="btn btn--primary" href="#">Browse all singles</a>
      <a class="btn btn--secondary" href="#">Search by card name</a>
    </div>
  </div>
</section>

<!-- ===================== 8. TRUST STRIP (bright) ===================== -->
<section class="section section--bright">
  <div class="section__inner">
    <div class="metric-strip">
      <div class="metric-strip__item">
        <span class="metric-strip__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h11v8H3z"/><path d="M14 10h4l3 3v2h-7z"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg></span>
        <span class="metric-strip__figure">28,400+</span>
        <span class="metric-strip__label">Orders shipped</span>
      </div>
      <div class="metric-strip__item">
        <span class="metric-strip__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V8l8-4 8 4v12"/><path d="M9 20v-6h6v6"/></svg></span>
        <span class="metric-strip__figure">11 years</span>
        <span class="metric-strip__label">Trading on the high street</span>
      </div>
      <div class="metric-strip__item">
        <span class="metric-strip__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l2.6 5.6 6.4.6-4.8 4.2 1.4 6.2L12 16.8 6 19.6 7.4 13.4 2.6 9.2l6.4-.6z"/></svg></span>
        <span class="metric-strip__figure">4.9 / 5</span>
        <span class="metric-strip__label">Across 1,900+ Trustpilot reviews</span>
      </div>
      <div class="metric-strip__item">
        <span class="metric-strip__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 2.5-5 6-5s6 2 6 5"/><path d="M15 20c0-2 1-3.5 3-3.5s3 1.5 3 3.5"/></svg></span>
        <span class="metric-strip__figure">A team of specialists</span>
        <span class="metric-strip__label">Players, painters and graders</span>
      </div>
    </div>
  </div>
</section>

<!-- ===================== 9. SET SPOTLIGHT (primary) ===================== -->
<section class="section section--primary">
  <div class="section__inner">
    <div class="spotlight spotlight--reverse">
      <div class="spotlight__media">
        <img class="spotlight__image" src="https://picsum.photos/seed/nw-spotlight/900/600" alt="Magic: The Gathering Tarkir Dragonstorm key art">
      </div>
      <div class="spotlight__copy">
        <span class="spotlight__eyebrow">Magic: The Gathering</span>
        <h2 class="spotlight__title">Tarkir: Dragonstorm</h2>
        <p class="spotlight__body">A return to Tarkir, and the dragons are back at the centre of it. Five wedge clans, a run of mechanically-rich commanders and some of the strongest Standard playables we've seen in a year. The collector boosters are carrying serial-numbered dragon art that's already drawing attention on the secondary market. We've got display boxes, commander decks and the prerelease kits in stock now.</p>
        <a class="btn btn--primary spotlight__cta" href="#">Shop the set</a>
      </div>
    </div>
  </div>
</section>

<!-- ===================== 10. SALE OR RETURN (anchor) ===================== -->
<section class="section section--anchor">
  <div class="section__inner">
    <div class="process-row">
      <div class="process-row__intro">
        <h2 class="process-row__title">Sell your cards through us</h2>
        <p class="process-row__lead">Bring in cards or sealed product and we'll list them at a price you agree, sell them through the shop and online, and pay you on the sale minus a flat commission. No listing fees, no relisting, no marketplace hassle.</p>
      </div>
      <div class="process-row__steps">
        <div class="process-step">
          <span class="process-step__eyebrow">Step 1</span>
          <h3 class="process-step__title">Bring it in</h3>
          <p class="process-step__body">Drop your cards at the buying desk. We grade condition, log each one and confirm what's saleable.</p>
        </div>
        <div class="process-step">
          <span class="process-step__eyebrow">Step 2</span>
          <h3 class="process-step__title">We list it at an agreed price</h3>
          <p class="process-step__body">You set a minimum. We price against the live market and list it across the shop and the website.</p>
        </div>
        <div class="process-step">
          <span class="process-step__eyebrow">Step 3</span>
          <h3 class="process-step__title">You get paid on sale</h3>
          <p class="process-step__body">When it sells, you're paid automatically minus commission — by bank transfer or store credit, your call.</p>
        </div>
      </div>
      <div class="btn-row btn-row--center process-row__cta">
        <a class="btn btn--primary" href="#">Start a sale or return</a>
      </div>
    </div>
  </div>
</section>

<!-- ===================== 11. WARHAMMER TABLE BOOKING (bright) ===================== -->
<section class="section section--bright">
  <div class="section__inner">
    <div class="section-header section-header--center">
      <div class="section-header__group">
        <span class="section-header__eyebrow">In-store gaming</span>
        <h2 class="section-header__title">Book a fully-modelled Warhammer table</h2>
        <p class="section-header__lead">Reserve a private session on one of our terrain-built battle tables. Pick the map and layout you want and we'll have it set up and ready when you arrive — bring your army, we'll handle the board.</p>
      </div>
    </div>
    <div class="terrain-grid">
      <div class="terrain-tile">
        <div class="terrain-tile__media"><img class="terrain-tile__image" src="https://picsum.photos/seed/nw-terrain1/600/750" alt="Imperial city ruins table layout"></div>
        <span class="terrain-tile__name">Sanctus Reach Ruins</span>
      </div>
      <div class="terrain-tile">
        <div class="terrain-tile__media"><img class="terrain-tile__image" src="https://picsum.photos/seed/nw-terrain2/600/750" alt="Death world jungle table layout"></div>
        <span class="terrain-tile__name">Catachan Deathworld</span>
      </div>
      <div class="terrain-tile">
        <div class="terrain-tile__media"><img class="terrain-tile__image" src="https://picsum.photos/seed/nw-terrain3/600/750" alt="Frozen tundra table layout"></div>
        <span class="terrain-tile__name">Fenris Ice Fields</span>
      </div>
      <div class="terrain-tile">
        <div class="terrain-tile__media"><img class="terrain-tile__image" src="https://picsum.photos/seed/nw-terrain4/600/750" alt="Industrial manufactorum table layout"></div>
        <span class="terrain-tile__name">Manufactorum Sprawl</span>
      </div>
    </div>
    <div class="btn-row btn-row--center">
      <a class="btn btn--primary" href="#">Book a session</a>
      <a class="btn btn--secondary" href="#">Browse maps</a>
    </div>
  </div>
</section>

<!-- ===================== 12. EVENTS (primary) ===================== -->
<section class="section section--primary">
  <div class="section__inner">
    <div class="section-header">
      <div class="section-header__group">
        <span class="section-header__eyebrow">What's on</span>
        <h2 class="section-header__title">Upcoming events</h2>
      </div>
      <a class="section-header__link" href="#">View all events</a>
    </div>
    <div class="event-grid">
      <article class="event-card">
        <img class="event-card__image" src="https://picsum.photos/seed/nw-event1/600/400" alt="Friday Night Magic">
        <div class="event-card__body">
          <span class="event-card__eyebrow">Magic: The Gathering</span>
          <h3 class="event-card__title">Friday Night Magic — Standard</h3>
          <div class="event-card__date">Fri 5 Jun · 18:30</div>
          <p class="event-card__desc">Weekly Standard tournament, four rounds Swiss. Promo packs to all entrants.</p>
          <a class="btn btn--secondary event-card__cta" href="#">Book</a>
        </div>
      </article>
      <article class="event-card">
        <img class="event-card__image" src="https://picsum.photos/seed/nw-event2/600/400" alt="Pokémon League Cup">
        <div class="event-card__body">
          <span class="event-card__eyebrow">Pokémon</span>
          <h3 class="event-card__title">Pokémon League Cup</h3>
          <div class="event-card__date">Sat 13 Jun · 11:00</div>
          <p class="event-card__desc">Sanctioned League Cup with championship points on the line. Pre-registration required.</p>
          <a class="btn btn--secondary event-card__cta" href="#">Details</a>
        </div>
      </article>
      <article class="event-card">
        <img class="event-card__image" src="https://picsum.photos/seed/nw-event3/600/400" alt="Warhammer paint night">
        <div class="event-card__body">
          <span class="event-card__eyebrow">Warhammer</span>
          <h3 class="event-card__title">Paint Night — Edge Highlighting</h3>
          <div class="event-card__date">Wed 17 Jun · 19:00</div>
          <p class="event-card__desc">Bring a mini and a brush. We'll run through edge highlighting and contrast layering.</p>
          <a class="btn btn--secondary event-card__cta" href="#">Book</a>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ===================== 13. FEATURED EVENT (anchor) ===================== -->
<section class="section section--anchor">
  <div class="section__inner">
    <div class="feature-event">
      <img class="feature-event__image" src="https://picsum.photos/seed/nw-featevent/1200/675" alt="Regional TCG championship in the Nerdworks store">
      <span class="feature-event__scrim"></span>
      <div class="feature-event__content">
        <span class="feature-event__eyebrow">Regional showdown</span>
        <h2 class="feature-event__title">Nerdworks Summer Slam — Lorcana 1K</h2>
        <div class="feature-event__date">Sat 28 Jun · 10:00 · 64 seats</div>
        <p class="feature-event__body">Our biggest Lorcana event of the year, with a £1,000 prize pool and exclusive enchanted card raffle. Full day of competitive play, side events between rounds and the shop bar open all day. Seats always sell out — book early.</p>
        <a class="btn btn--primary feature-event__cta" href="#">Book your seat</a>
      </div>
    </div>
  </div>
</section>

<!-- ===================== 14. EVENTS GALLERY (bright) ===================== -->
<section class="section section--bright">
  <div class="section__inner">
    <div class="gallery-mosaic">
      <div class="gallery-mosaic__item gallery-mosaic__item--big"><img src="https://picsum.photos/seed/nw-g1/800/800" alt="Tournament hall full of players"></div>
      <div class="gallery-mosaic__item"><img src="https://picsum.photos/seed/nw-g2/400/400" alt="Players mid-game"></div>
      <div class="gallery-mosaic__item gallery-mosaic__item--tall"><img src="https://picsum.photos/seed/nw-g3/400/800" alt="Painted Warhammer army on a table"></div>
      <div class="gallery-mosaic__item"><img src="https://picsum.photos/seed/nw-g4/400/400" alt="Trophy presentation"></div>
      <div class="gallery-mosaic__item gallery-mosaic__item--wide"><img src="https://picsum.photos/seed/nw-g5/800/400" alt="Crowd at a release night"></div>
      <div class="gallery-mosaic__item"><img src="https://picsum.photos/seed/nw-g6/400/400" alt="Close-up of a winning deck"></div>
    </div>
    <p class="gallery-mosaic__caption">Snapshots from the shop floor. <a href="#">Follow Nerdworks</a> to see what's on next.</p>
  </div>
</section>

<!-- ===================== 15. BLOG (primary) ===================== -->
<section class="section section--primary">
  <div class="section__inner">
    <div class="section-header">
      <div class="section-header__group">
        <span class="section-header__eyebrow">The journal</span>
        <h2 class="section-header__title">Notes from the shop</h2>
        <p class="section-header__lead">Set breakdowns, buying-desk notes and deck tech from the people behind the counter.</p>
      </div>
    </div>
    <div class="blog-grid">
      <a class="blog-card" href="#">
        <img class="blog-card__image" src="https://picsum.photos/seed/nw-blog1/600/400" alt="Prismatic Evolutions pull rates breakdown">
        <div class="blog-card__body">
          <span class="blog-card__date">22 May 2026</span>
          <h3 class="blog-card__title">Is Prismatic Evolutions worth the hype? Our pull-rate notes</h3>
          <p class="blog-card__hook">We cracked a case at the counter and logged every hit. Here's what the maths actually says about chasing the Eevee chase cards.</p>
        </div>
      </a>
      <a class="blog-card" href="#">
        <img class="blog-card__image" src="https://picsum.photos/seed/nw-blog2/600/400" alt="Buying desk notes on grading">
        <div class="blog-card__body">
          <span class="blog-card__date">14 May 2026</span>
          <h3 class="blog-card__title">Buying desk: how we grade NM vs LP, and why it matters</h3>
          <p class="blog-card__hook">The line between near-mint and light-play decides the price. Here's exactly what we look for under the loupe before a card goes in the cabinet.</p>
        </div>
      </a>
      <a class="blog-card" href="#">
        <img class="blog-card__image" src="https://picsum.photos/seed/nw-blog3/600/400" alt="Tarkir Dragonstorm Commander deck tech">
        <div class="blog-card__body">
          <span class="blog-card__date">6 May 2026</span>
          <h3 class="blog-card__title">Deck tech: brewing the new Tarkir dragon commanders</h3>
          <p class="blog-card__hook">Three of the new wedge commanders, three first drafts, and a few cards we think are quietly underpriced right now.</p>
        </div>
      </a>
    </div>
    <div class="btn-row btn-row--center">
      <a class="btn btn--secondary" href="#">View all posts</a>
    </div>
  </div>
</section>

<!-- ===================== 16. NEWSLETTER (anchor) ===================== -->
<section class="section section--anchor">
  <div class="section__inner">
    <div class="newsletter">
      <h2 class="newsletter__title">Get the drops before they sell out</h2>
      <p class="newsletter__lead">New stock drops, event announcements and buying-desk market notes — straight to your inbox, no filler.</p>
      <form class="newsletter__form" action="#" method="post" onsubmit="return false;">
        <input class="newsletter__input" type="email" placeholder="you@example.com" aria-label="Email address" required>
        <button class="newsletter__submit" type="submit">Subscribe</button>
      </form>
    </div>
  </div>
</section>

<!-- ===================== SITE FOOTER ===================== -->
<footer class="site-footer">
  <div class="site-footer__inner">
    <div>
      <div class="site-footer__brand">Nerd<span>works</span></div>
      <p class="site-footer__meta">A real game store, online and on the high street. © 2026 Nerdworks Ltd.</p>
    </div>
    <nav class="site-footer__links">
      <a class="site-footer__link" href="#">Shop</a>
      <a class="site-footer__link" href="#">Singles</a>
      <a class="site-footer__link" href="#">Events</a>
      <a class="site-footer__link" href="#">Sell to us</a>
      <a class="site-footer__link" href="#">Find the shop</a>
      <a class="site-footer__link" href="#">Contact</a>
    </nav>
  </div>
</footer>

</body>
</html>