← Theme Factory Dev

NW Homepage Showcase Dark (TN14 — MN18 Stitch Converted to SG1)

TTF3 Rejected Homepage Theme Factory Dev

Template HTML

<!DOCTYPE html>
<html lang="en-GB">
<head>
	<meta charset="utf-8" />
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<title>Nerdworks | Premium UK TCG Curation</title>
	<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
	<style>
		/* ════════════════════════════════════════════════
		   TN14 — Nerdworks Homepage (Dark)
		   Prototype CSS — SG1 tokens, BEM classes
		   ════════════════════════════════════════════════ */

		:root {

			--ff-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
			--fw-regular: 400;
			--fw-medium: 500;
			--fw-semibold: 600;
			--fw-bold: 700;
			--fw-extrabold: 800;

			--fs-display: 112px;
			--fs-h1: 72px;
			--fs-h2: 56px;
			--fs-h3: 40px;
			--fs-h4: 28px;
			--fs-body-lg: 20px;
			--fs-body: 16px;
			--fs-body-sm: 14px;
			--fs-eyebrow: 12px;

			--lh-tight: 1.05;
			--lh-heading: 1.15;
			--lh-body: 1.55;
			--lh-card: 1.35;

			--ls-tight: -0.02em;
			--ls-heading: -0.01em;
			--ls-normal: 0;
			--ls-wide: 0.08em;
			--ls-wider: 0.14em;
			--ls-widest: 0.2em;

			--near-black: #1A1E1A;
			--dark-charcoal: #28302A;
			--dark-grey: #5A645A;
			--mid-grey: #9AA49A;
			--light-grey: #E2E6E2;
			--off-white: #F0F2F0;
			--near-white: #F8F9F8;
			--pure-white: #FFFFFF;

			--nw-green: #266038;
			--nw-green-light: #217E52;
			--nw-green-pale: #D4EAD9;
			--accent-red: #CC2222;
			--accent-yellow: #CCAA00;
			--darkest-green: #022C22;

			--bg-primary-dark: var(--near-black);
			--bg-surface-dark: var(--dark-charcoal);
			--bg-statement-green: var(--nw-green);
			--bg-primary-light: var(--near-white);
			--bg-surface-light: var(--pure-white);
			--bg-footer: var(--darkest-green);

			--text-on-dark: var(--near-white);
			--text-on-dark-muted: var(--mid-grey);
			--text-on-light: var(--near-black);
			--text-on-light-muted: var(--dark-grey);
			--text-on-green: var(--near-white);
			--text-eyebrow: var(--nw-green-light);

			--radius-none: 0;
			--radius-sm: 4px;
			--radius-md: 8px;
			--radius-lg: 12px;
			--radius-xl: 16px;

			--space-1: 4px;
			--space-2: 8px;
			--space-3: 12px;
			--space-4: 16px;
			--space-5: 24px;
			--space-6: 32px;
			--space-7: 48px;
			--space-8: 64px;
			--space-9: 96px;
			--space-10: 128px;

			--border-hairline: 1px;
			--border-regular: 2px;
			--border-thick: 4px;

			--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
			--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
			--shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
			--shadow-xl: 0 24px 64px rgba(0,0,0,0.6);

			--content-max-width: 1440px;

		}

		/* ── Reset & base ── */

		*,
		*::before,
		*::after {

			box-sizing: border-box;
			margin: 0;
			padding: 0;

		}

		html {

			scroll-behavior: smooth;

		}

		body {

			font-family: var(--ff-body);
			font-weight: var(--fw-regular);
			font-size: var(--fs-body);
			line-height: var(--lh-body);
			color: var(--text-on-dark);
			background-color: var(--bg-primary-dark);
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

		}

		::selection {

			background-color: var(--nw-green-light);
			color: var(--pure-white);

		}

		img {

			display: block;
			max-width: 100%;
			height: auto;

		}

		a {

			text-decoration: none;
			color: inherit;

		}

		button {

			font-family: inherit;
			cursor: pointer;
			border: none;
			background: none;

		}

		input {

			font-family: inherit;

		}

		ul {

			list-style: none;

		}

		/* ── Focus-visible ── */

		:focus-visible {

			outline: var(--border-regular) solid var(--nw-green-light);
			outline-offset: 2px;

		}

		/* ── SVG icons ── */

		.icon {

			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			flex-shrink: 0;

		}

		.icon svg {

			width: 100%;
			height: 100%;
			fill: currentColor;

		}

		.icon--star {

			width: 20px;
			height: 20px;
			color: var(--accent-yellow);

		}

		/* ════════════════════════════════════════════════
		   SITE NAV
		   ════════════════════════════════════════════════ */

		.site-nav {

			position: sticky;
			top: 0;
			z-index: 50;
			background-color: rgba(26, 30, 26, 0.85);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			border-bottom: var(--border-hairline) solid rgba(226, 230, 226, 0.1);
			transition: background-color 0.3s ease;

		}

		.site-nav__inner {

			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			max-width: var(--content-max-width);
			margin: 0 auto;
			padding: var(--space-4) var(--space-5);

		}

		.site-nav__left {

			display: flex;
			align-items: center;
			gap: var(--space-7);

		}

		.site-nav__logo {

			font-size: 24px;
			font-weight: var(--fw-bold);
			letter-spacing: var(--ls-tight);
			color: var(--text-on-dark);

		}

		.site-nav__logo-accent {

			color: var(--nw-green-light);

		}

		.site-nav__links {

			display: flex;
			gap: var(--space-6);
			align-items: center;

		}

		.site-nav__link {

			font-family: var(--ff-body);
			font-weight: var(--fw-medium);
			text-transform: uppercase;
			letter-spacing: var(--ls-widest);
			font-size: var(--fs-eyebrow);
			color: var(--text-on-dark);
			transition: color 0.2s ease;

		}

		.site-nav__link:hover,
		.site-nav__link:focus-visible {

			color: var(--nw-green-light);

		}

		.site-nav__link--active {

			color: var(--nw-green-light);
			border-bottom: var(--border-regular) solid var(--nw-green-light);
			padding-bottom: var(--space-1);

		}

		.site-nav__actions {

			display: flex;
			align-items: center;
			gap: var(--space-5);

		}

		.site-nav__action {

			color: var(--text-on-dark);
			transition: opacity 0.2s ease;
			position: relative;
			display: inline-flex;
			align-items: center;
			background: none;
			border: none;
			padding: 0;

		}

		.site-nav__action:hover {

			opacity: 0.8;

		}

		.site-nav__badge {

			position: absolute;
			top: -4px;
			right: -4px;
			background-color: var(--nw-green-light);
			font-size: 10px;
			width: 16px;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			font-weight: var(--fw-bold);

		}

		/* ════════════════════════════════════════════════
		   HERO
		   ════════════════════════════════════════════════ */

		.hero {

			background-color: var(--bg-primary-dark);
			padding: var(--space-10) var(--space-5);
			overflow: hidden;

		}

		.hero__inner {

			max-width: var(--content-max-width);
			margin: 0 auto;
			display: grid;
			grid-template-columns: 60% 40%;
			gap: var(--space-7);
			align-items: center;

		}

		.hero__eyebrow {

			display: block;
			color: var(--text-eyebrow);
			font-size: var(--fs-eyebrow);
			font-weight: var(--fw-semibold);
			text-transform: uppercase;
			letter-spacing: var(--ls-wide);
			margin-bottom: var(--space-4);

		}

		.hero__title {

			font-size: var(--fs-display);
			font-weight: var(--fw-extrabold);
			line-height: var(--lh-tight);
			letter-spacing: var(--ls-tight);
			margin-bottom: var(--space-6);
			color: var(--text-on-dark);

		}

		.hero__body {

			color: var(--text-on-dark-muted);
			font-size: var(--fs-body-lg);
			max-width: 560px;
			margin-bottom: var(--space-7);
			line-height: var(--lh-body);

		}

		.hero__actions {

			display: flex;
			flex-wrap: wrap;
			gap: var(--space-4);

		}

		.hero__image-wrap {

			position: relative;
			aspect-ratio: 4 / 5;
			border-radius: var(--radius-xl);
			overflow: hidden;
			background-color: var(--bg-surface-dark);

		}

		.hero__image {

			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.7s ease;

		}

		.hero__image-wrap:hover .hero__image {

			transform: scale(1.05);

		}

		.hero__image-overlay {

			position: absolute;
			inset: 0;
			background: linear-gradient(to top, rgba(26, 30, 26, 0.6), transparent);

		}

		/* ── Buttons ── */

		.btn {

			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: var(--space-4) var(--space-6);
			border-radius: var(--radius-lg);
			font-weight: var(--fw-semibold);
			text-transform: uppercase;
			letter-spacing: var(--ls-wide);
			font-size: var(--fs-body);
			transition: all 0.2s ease;

		}

		.btn:active {

			transform: scale(0.97);

		}

		.btn--primary {

			background-color: var(--nw-green);
			color: var(--text-on-green);

		}

		.btn--primary:hover,
		.btn--primary:focus-visible {

			background-color: var(--nw-green-light);

		}

		.btn--outline {

			background: transparent;
			border: var(--border-hairline) solid var(--text-on-dark);
			color: var(--text-on-dark);

		}

		.btn--outline:hover,
		.btn--outline:focus-visible {

			background-color: var(--text-on-dark);
			color: var(--bg-primary-dark);

		}

		.btn--block {

			width: 100%;

		}

		.btn--white {

			background-color: var(--near-white);
			color: var(--near-black);

		}

		.btn--white:hover,
		.btn--white:focus-visible {

			background-color: var(--off-white);

		}

		/* ════════════════════════════════════════════════
		   EDITORIAL
		   ════════════════════════════════════════════════ */

		.editorial {

			background-color: var(--bg-surface-dark);
			padding: var(--space-9) var(--space-5);

		}

		.editorial__inner {

			max-width: var(--content-max-width);
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 80px;
			align-items: center;

		}

		.editorial__image-wrap {

			aspect-ratio: 4 / 3;
			border-radius: var(--radius-xl);
			overflow: hidden;
			background-color: var(--bg-primary-dark);

		}

		.editorial__image {

			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0.8;

		}

		.editorial__title {

			font-size: var(--fs-h2);
			font-weight: var(--fw-bold);
			line-height: var(--lh-heading);
			margin-bottom: var(--space-5);
			color: var(--text-on-dark);

		}

		.editorial__body {

			color: var(--text-on-dark-muted);
			font-size: var(--fs-body-lg);
			margin-bottom: var(--space-6);
			line-height: var(--lh-body);

		}

		.editorial__link {

			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			color: var(--nw-green-light);
			font-weight: var(--fw-semibold);
			text-transform: uppercase;
			letter-spacing: var(--ls-wide);

		}

		.editorial__link .icon {

			transition: transform 0.2s ease;

		}

		.editorial__link:hover .icon {

			transform: translateX(4px);

		}

		/* ════════════════════════════════════════════════
		   PRODUCT GRID (Latest Acquisitions)
		   ════════════════════════════════════════════════ */

		.acquisitions {

			background-color: var(--bg-primary-dark);
			padding: var(--space-9) var(--space-5);

		}

		.acquisitions__inner {

			max-width: var(--content-max-width);
			margin: 0 auto;

		}

		.acquisitions__header {

			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: var(--space-7);

		}

		.acquisitions__title {

			font-size: var(--fs-h3);
			font-weight: var(--fw-bold);

		}

		.acquisitions__view-all {

			color: var(--text-on-dark-muted);
			transition: color 0.2s ease;
			margin-bottom: var(--space-2);

		}

		.acquisitions__view-all:hover {

			color: var(--nw-green-light);

		}

		.acquisitions__grid {

			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: var(--space-5);

		}

		.product-card {

			/* no explicit styling needed — just a container */

		}

		.product-card__image-wrap {

			aspect-ratio: 3 / 4;
			background-color: var(--bg-surface-dark);
			border-radius: var(--radius-lg);
			overflow: hidden;
			margin-bottom: var(--space-4);
			position: relative;

		}

		.product-card__badge {

			position: absolute;
			top: var(--space-3);
			left: var(--space-3);
			font-size: 10px;
			font-weight: var(--fw-bold);
			padding: var(--space-1) var(--space-2);
			border-radius: var(--radius-sm);
			text-transform: uppercase;
			z-index: 1;

		}

		.product-card__badge--staff-pick {

			background-color: var(--accent-yellow);
			color: var(--near-black);

		}

		.product-card__badge--rare {

			background-color: var(--nw-green-light);
			color: var(--near-white);

		}

		.product-card__image {

			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s ease;

		}

		.product-card:hover .product-card__image {

			transform: scale(1.05);

		}

		.product-card__name {

			font-size: 18px;
			font-weight: var(--fw-medium);
			line-height: var(--lh-card);
			margin-bottom: var(--space-1);

		}

		.product-card__price {

			color: var(--nw-green-light);
			font-weight: var(--fw-semibold);

		}

		/* ════════════════════════════════════════════════
		   VAULT (Testimonials)
		   ════════════════════════════════════════════════ */

		.vault {

			background-color: var(--bg-statement-green);
			padding: var(--space-9) var(--space-5);
			color: var(--text-on-green);

		}

		.vault__header {

			max-width: 800px;
			margin: 0 auto var(--space-8);
			text-align: center;

		}

		.vault__title {

			font-size: var(--fs-h2);
			font-weight: var(--fw-bold);
			margin-bottom: var(--space-4);

		}

		.vault__subtitle {

			font-size: var(--fs-body-lg);
			font-weight: var(--fw-medium);
			font-style: italic;
			opacity: 0.9;

		}

		.vault__grid {

			max-width: var(--content-max-width);
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: var(--space-6);

		}

		.vault-card {

			background-color: var(--darkest-green);
			padding: var(--space-6);
			border-radius: var(--radius-lg);

		}

		.vault-card__stars {

			display: flex;
			gap: var(--space-1);
			margin-bottom: var(--space-5);

		}

		.vault-card__quote {

			font-size: 18px;
			font-style: italic;
			margin-bottom: var(--space-6);
			line-height: 1.6;

		}

		.vault-card__author {

			font-weight: var(--fw-bold);
			color: var(--nw-green-light);
			text-transform: uppercase;
			letter-spacing: var(--ls-widest);
			font-size: var(--fs-eyebrow);

		}

		/* ════════════════════════════════════════════════
		   EXPLORE ARCHIVE
		   ════════════════════════════════════════════════ */

		.explore {

			background-color: var(--bg-surface-dark);
			padding: var(--space-9) var(--space-5);

		}

		.explore__inner {

			max-width: var(--content-max-width);
			margin: 0 auto;

		}

		.explore__header {

			display: flex;
			align-items: center;
			gap: var(--space-5);
			margin-bottom: var(--space-8);

		}

		.explore__title {

			font-size: var(--fs-h3);
			font-weight: var(--fw-bold);
			white-space: nowrap;

		}

		.explore__rule {

			height: 2px;
			background-color: var(--nw-green-light);
			width: 100%;
			opacity: 0.5;

		}

		.explore__grid {

			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: var(--space-5);

		}

		.category-tile {

			position: relative;
			aspect-ratio: 1 / 1;
			border-radius: var(--radius-xl);
			overflow: hidden;
			background-color: var(--bg-primary-dark);
			display: block;

		}

		.category-tile__image {

			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0.6;
			transition: transform 0.7s ease;

		}

		.category-tile:hover .category-tile__image {

			transform: scale(1.05);

		}

		.category-tile__label {

			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: var(--fs-h4);
			font-weight: var(--fw-medium);
			letter-spacing: var(--ls-heading);
			color: var(--text-on-dark);

		}

		/* ════════════════════════════════════════════════
		   THIS WEEK (Events)
		   ════════════════════════════════════════════════ */

		.thisweek {

			background-color: var(--bg-primary-light);
			padding: var(--space-9) var(--space-5);
			color: var(--text-on-light);

		}

		.thisweek__inner {

			max-width: var(--content-max-width);
			margin: 0 auto;

		}

		.thisweek__eyebrow {

			display: block;
			color: var(--text-eyebrow);
			font-size: var(--fs-eyebrow);
			font-weight: var(--fw-semibold);
			text-transform: uppercase;
			letter-spacing: var(--ls-wide);
			margin-bottom: var(--space-4);

		}

		.thisweek__title {

			font-size: var(--fs-h2);
			font-weight: var(--fw-bold);
			margin-bottom: var(--space-7);

		}

		.thisweek__grid {

			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: var(--space-6);

		}

		.event-card {

			background-color: var(--bg-surface-light);
			padding: 40px;
			border-radius: var(--radius-lg);
			box-shadow: var(--shadow-sm);
			border: var(--border-hairline) solid var(--light-grey);

		}

		.event-card__time {

			display: block;
			color: var(--nw-green-light);
			font-weight: var(--fw-bold);
			font-size: var(--fs-eyebrow);
			text-transform: uppercase;
			letter-spacing: var(--ls-widest);
			margin-bottom: var(--space-5);

		}

		.event-card__name {

			font-size: var(--fs-h4);
			font-weight: var(--fw-medium);
			margin-bottom: var(--space-4);

		}

		.event-card__body {

			color: var(--text-on-light-muted);
			margin-bottom: var(--space-6);

		}

		/* ════════════════════════════════════════════════
		   CIRCLE (Newsletter)
		   ════════════════════════════════════════════════ */

		.circle {

			background-color: var(--bg-statement-green);
			padding: var(--space-9) var(--space-5);
			color: var(--text-on-green);
			text-align: center;

		}

		.circle__inner {

			max-width: 640px;
			margin: 0 auto;

		}

		.circle__title {

			font-size: var(--fs-h2);
			font-weight: var(--fw-bold);
			margin-bottom: var(--space-5);

		}

		.circle__body {

			font-size: var(--fs-body-lg);
			opacity: 0.9;
			margin-bottom: var(--space-7);

		}

		.circle__form {

			display: flex;
			gap: var(--space-4);

		}

		.circle__input {

			flex-grow: 1;
			background-color: var(--darkest-green);
			border: none;
			border-radius: var(--radius-lg);
			padding: 20px;
			color: var(--text-on-dark);
			font-size: var(--fs-body);

		}

		.circle__input::placeholder {

			color: var(--mid-grey);

		}

		.circle__input:focus {

			outline: var(--border-regular) solid var(--nw-green-light);
			outline-offset: 0;

		}

		/* ════════════════════════════════════════════════
		   ARCHIVE (From Archive — editorial posts)
		   ════════════════════════════════════════════════ */

		.archive {

			background-color: var(--bg-surface-dark);
			padding: var(--space-9) var(--space-5);

		}

		.archive__inner {

			max-width: var(--content-max-width);
			margin: 0 auto;

		}

		.archive__title {

			font-size: var(--fs-h3);
			font-weight: var(--fw-bold);
			margin-bottom: var(--space-7);

		}

		.archive__grid {

			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 40px;

		}

		.post-card {

			cursor: pointer;

		}

		.post-card__image-wrap {

			aspect-ratio: 16 / 9;
			border-radius: var(--radius-lg);
			overflow: hidden;
			margin-bottom: var(--space-5);

		}

		.post-card__image {

			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.7s ease;

		}

		.post-card:hover .post-card__image {

			transform: scale(1.05);

		}

		.post-card__eyebrow {

			display: block;
			color: var(--text-eyebrow);
			font-size: var(--fs-eyebrow);
			font-weight: var(--fw-semibold);
			text-transform: uppercase;
			letter-spacing: var(--ls-wide);
			margin-bottom: var(--space-3);

		}

		.post-card__title {

			font-size: 24px;
			font-weight: var(--fw-medium);
			line-height: var(--lh-card);
			margin-bottom: var(--space-3);

		}

		.post-card__excerpt {

			color: var(--text-on-dark-muted);

		}

		/* ════════════════════════════════════════════════
		   SITE FOOTER
		   ════════════════════════════════════════════════ */

		.site-footer {

			background-color: var(--bg-footer);
			padding-top: var(--space-8);
			padding-bottom: var(--space-6);
			border-top: var(--border-hairline) solid rgba(248, 249, 248, 0.05);

		}

		.site-footer__grid {

			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: var(--space-6);
			max-width: var(--content-max-width);
			margin: 0 auto;
			padding: 0 var(--space-5);

		}

		.site-footer__brand-name {

			font-size: 20px;
			font-weight: var(--fw-bold);
			color: var(--text-on-dark);
			margin-bottom: var(--space-4);

		}

		.site-footer__brand-desc {

			font-size: var(--fs-body-sm);
			color: var(--text-on-dark-muted);
			max-width: 200px;

		}

		.site-footer__heading {

			color: var(--text-on-dark);
			font-weight: var(--fw-bold);
			text-transform: uppercase;
			letter-spacing: var(--ls-widest);
			font-size: var(--fs-eyebrow);
			margin-bottom: var(--space-5);

		}

		.site-footer__link {

			display: block;
			font-size: var(--fs-body-sm);
			color: var(--text-on-dark-muted);
			transition: color 0.2s ease;
			margin-bottom: var(--space-4);

		}

		.site-footer__link:last-child {

			margin-bottom: 0;

		}

		.site-footer__link:hover {

			color: var(--nw-green-light);

		}

		.site-footer__bottom {

			max-width: var(--content-max-width);
			margin: 0 auto;
			padding: var(--space-6) var(--space-5) 0;
			margin-top: var(--space-8);
			border-top: var(--border-hairline) solid rgba(248, 249, 248, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--space-4);

		}

		.site-footer__copyright {

			font-size: var(--fs-body-sm);
			color: var(--text-on-dark-muted);

		}

		.site-footer__tagline {

			display: flex;
			align-items: center;
			gap: var(--space-2);
			font-size: var(--fs-body-sm);
			color: var(--text-on-dark-muted);

		}

		.site-footer__dot {

			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: var(--nw-green-light);

		}

		/* ════════════════════════════════════════════════
		   RESPONSIVE — 1200px
		   ════════════════════════════════════════════════ */

		@media (max-width: 1200px) {

			.hero__title {

				font-size: var(--fs-h1);

			}

			.acquisitions__grid {

				grid-template-columns: repeat(3, 1fr);

			}

			.explore__grid {

				grid-template-columns: repeat(3, 1fr);

			}

		}

		/* ════════════════════════════════════════════════
		   RESPONSIVE — 960px
		   ════════════════════════════════════════════════ */

		@media (max-width: 960px) {

			.hero__inner {

				grid-template-columns: 1fr;

			}

			.hero__title {

				font-size: var(--fs-h2);

			}

			.editorial__inner {

				grid-template-columns: 1fr;
				gap: var(--space-7);

			}

			.editorial__title {

				font-size: var(--fs-h3);

			}

			.acquisitions__grid {

				grid-template-columns: repeat(2, 1fr);

			}

			.vault__grid {

				grid-template-columns: repeat(2, 1fr);

			}

			.vault__title {

				font-size: var(--fs-h3);

			}

			.explore__grid {

				grid-template-columns: repeat(2, 1fr);

			}

			.thisweek__grid {

				grid-template-columns: repeat(2, 1fr);

			}

			.thisweek__title {

				font-size: var(--fs-h3);

			}

			.archive__grid {

				grid-template-columns: repeat(2, 1fr);

			}

			.site-footer__grid {

				grid-template-columns: repeat(2, 1fr);

			}

			.site-footer__bottom {

				flex-direction: column;
				text-align: center;

			}

			.circle__form {

				flex-direction: column;

			}

			.site-nav__links {

				display: none;

			}

		}

		/* ════════════════════════════════════════════════
		   RESPONSIVE — 768px
		   ════════════════════════════════════════════════ */

		@media (max-width: 768px) {

			.hero {

				padding: var(--space-9) var(--space-4);

			}

			.hero__title {

				font-size: var(--fs-h3);

			}

			.acquisitions__grid {

				grid-template-columns: 1fr;

			}

			.vault__grid {

				grid-template-columns: 1fr;

			}

			.explore__grid {

				grid-template-columns: 1fr;

			}

			.thisweek__grid {

				grid-template-columns: 1fr;

			}

			.archive__grid {

				grid-template-columns: 1fr;

			}

			.site-footer__grid {

				grid-template-columns: 1fr;

			}

			.acquisitions__header {

				flex-direction: column;
				align-items: flex-start;
				gap: var(--space-2);

			}

		}
	</style>
</head>
<body>

<!-- ═══ SECTION: Navigation ═══ -->
<header class="site-nav">
	<nav class="site-nav__inner">
		<div class="site-nav__left">
			<a class="site-nav__logo" href="/">NERD<span class="site-nav__logo-accent">WORKS</span></a>
			<div class="site-nav__links">
				<a class="site-nav__link" href="#">Acquisitions</a>
				<a class="site-nav__link" href="#">Editorial</a>
				<a class="site-nav__link" href="#">Events</a>
				<a class="site-nav__link site-nav__link--active" href="#">The Vault</a>
				<a class="site-nav__link" href="#">Archive</a>
			</div>
		</div>
		<div class="site-nav__actions">
			<button class="site-nav__action" aria-label="Search">
				<span class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></span>
			</button>
			<button class="site-nav__action" aria-label="Account">
				<span class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 0 1-6 3.22z"/></svg></span>
			</button>
			<button class="site-nav__action" aria-label="Bag">
				<span class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm6 16H6V8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h4v2c0 .55.45 1 1 1s1-.45 1-1V8h2v12z"/></svg></span>
				<span class="site-nav__badge">0</span>
			</button>
		</div>
	</nav>
</header>

<main>

<!-- ═══ SECTION: Hero ═══ -->
<section class="hero">
	<div class="hero__inner">
		<div class="hero__content">
			<span class="hero__eyebrow">The Obsidian Selection</span>
			<h1 class="hero__title">Curated for collectors.</h1>
			<p class="hero__body">A premium UK TCG destination where trading cards meet fine art. Discover rare acquisitions, expertly curated archives, and an editorial vision for the modern enthusiast.</p>
			<div class="hero__actions">
				<button class="btn btn--primary">Enter the Vault</button>
				<button class="btn btn--outline">Browse the Archive</button>
			</div>
		</div>
		<div class="hero__image-wrap">
			<img class="hero__image" alt="Ultra-rare holographic trading card displayed in a crystal clear acrylic slab with dramatic moody lighting and dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCYafqPpvCmtXA47fWVp01KmCwlKNskcx0AVuN75i17ll2xavq3rBjhptGADX3zAyeZ8x3_e4sftRAsmvoWaYEUC98-gp1aZwXfx46ROKbBNkwhgxH9UhRF18oy8ukBu7PTtAN_BNoRbKa8ffWvQ-vnh4OYsimV5grVaqNX-L2ksRojfQn7rqKeIUprMC8V9Aq0CxspoN1T7kwhbNw-KS9aoq3-qUDLYoGCCKJ-bfFDtzuGn69dONhxP1WI8UodGSrkovnMSh9q" />
			<div class="hero__image-overlay"></div>
		</div>
	</div>
</section>

<!-- ═══ SECTION: Editorial Feature ═══ -->
<section class="editorial">
	<div class="editorial__inner">
		<div class="editorial__image-wrap">
			<img class="editorial__image" alt="Professional grading tools, magnifying loupe, and microfiber gloves laid out on a dark walnut desk with warm atmospheric lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRGrBMI9Tmtd53_KNQkIEb3gy7-Qg8cLy0kQ0LkHL-tTVLnxwmRjdwFdPrabki7avLVeFy8Ij9SnSWcB-l3F7nxz54w-CQguLTnu69GVeph28NOQkMaNDVr6-eRX1CbWEg04BOlC98xNhrfRAOWZok6GNQWbiZHHVAyyIoPBcUUCjTwy-8v9sCH0jVjQ6WfP7SpfFPdmAY5MlqSZWBmQ1guEPhcD4BFm-C4RYLBBqIW53cSDeY3qhk0_09JXW8KwkXaXz5vf28" />
		</div>
		<div class="editorial__body-wrap">
			<h2 class="editorial__title">The curator's notebook.</h2>
			<p class="editorial__body">Every card that passes through Nerdworks undergoes a rigorous vetting process. From shop floor pulls to private acquisitions, we document the history and condition of each piece with meticulous care.</p>
			<a class="editorial__link" href="#">
				Read the journals
				<span class="icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg></span>
			</a>
		</div>
	</div>
</section>

<!-- ═══ SECTION: Latest Acquisitions ═══ -->
<section class="acquisitions">
	<div class="acquisitions__inner">
		<div class="acquisitions__header">
			<h2 class="acquisitions__title">Latest acquisitions</h2>
			<a class="acquisitions__view-all" href="#">View all</a>
		</div>
		<div class="acquisitions__grid">
			<!-- Product 1 -->
			<div class="product-card">
				<div class="product-card__image-wrap">
					<span class="product-card__badge product-card__badge--staff-pick">Staff Pick</span>
					<img class="product-card__image" alt="A Charizard Pokemon card in a protective sleeve showing detailed flame artwork and gold foiling elements" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8HJ-HQMSbGuTdytmT0IVBMMXPd8Dl8cwijl9DqfskCquH8A_nf1Tkfy9itJGt-QAwyW5rla3UgiaqBJJnrEklvP8EEiNbZndMAUsASiT2flTefjdwtVi8RYM6dnj6yppidDtcFv7qVmLoVsSD4m0SUeD7CXTm6wARvqAdNCCddjz_5EMycI0J7nqoD8YYycQSCPCkD_WGwJpftCx18GDyD3TtSfXYXmma1R8b10e6OkDGwb0FehNrc2eQBDmAppqDEGOYiDL_" />
				</div>
				<h4 class="product-card__name">Charizard ex</h4>
				<p class="product-card__price">£495.00</p>
			</div>
			<!-- Product 2 -->
			<div class="product-card">
				<div class="product-card__image-wrap">
					<img class="product-card__image" alt="Vintage Magic The Gathering card Mox Opal with intricate steampunk artifact artwork on dark green velvet" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCsi3cKGutTYEVRpgdhMeL7ACZBng3Tdog_QoaZo3pGntiG3iQB8sici6zx8l6fBt9O71SBTi7HVSs7zp3cUlfxHz7T8e1xb5elhLYBpT7KwCzvRj6HktHhbw25e-5Tr4yg_i-ugMyWCDnuI6c8DSbCipFDb2NV8A5K7wHWBeC7JnbnmUy8T9DBV-f7vo_-tJOCn2VybzFh-bgb9HgbCr46Jqnb3XKj6PVSJl_oAvNQ6g89lrolVzqzTwPO8dX9N9MsmkgJz9Oo" />
				</div>
				<h4 class="product-card__name">Mox Opal</h4>
				<p class="product-card__price">£120.00</p>
			</div>
			<!-- Product 3 -->
			<div class="product-card">
				<div class="product-card__image-wrap">
					<span class="product-card__badge product-card__badge--rare">Rare</span>
					<img class="product-card__image" alt="Lorcana card Ursula's Quest featuring dark fantasy ink illustration and purple mystical borders" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDsjhGYP8KZI8W5hngGg1dH-SgnikW73ejkiPnHPurlT0J4Fyfli5t8FHPQzRiTr-VCm2RJFVydLyaxiURq8x6hin1cjUreDe6tXicvVjuhEDNRTI0xvQ_Z86e4KsDtiI8Izd5wH3BG6b7MgOQKgvZzx9l9brEX75TnV8z4MDXhGb_knXZCPCjjGOuHAZti6OPYnlxV32yaS8QYnCYP3n1EkecLKqzP4OvWa_bNqMGQ94Kwci8NpCUUktyevCl4HLNrd9ID7qIn" />
				</div>
				<h4 class="product-card__name">Ursula's Quest</h4>
				<p class="product-card__price">£65.00</p>
			</div>
			<!-- Product 4 -->
			<div class="product-card">
				<div class="product-card__image-wrap">
					<img class="product-card__image" alt="Phyrexian Tower Magic card showing a dark monolithic structure in a bleak sci-fi landscape" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPg-s17h7kX4OaPA7FueaZ7bmFhDx4Iv6Z6jJY_wtlWtmX26DJytnuCjfI6rnAl6fA59qkhv2Ly782D_NCOxzDiUs9pSugYbEvEb1L_clnrHP2dQtajUTUUAYJWCP9fQ6u6zL85zARcjDRg1Q75uLbVU9PkeAGe-jICDYS-I05C0_Je0URzMvBKsvf81VXBuVYkeGjXvdGuUn5-xYDD0VBJyaQ4KkhF0h_2G-pG3IIFrum7iXT9d7wSJjo91GEST_5owVyHrYy" />
				</div>
				<h4 class="product-card__name">Phyrexian Tower</h4>
				<p class="product-card__price">£42.00</p>
			</div>
			<!-- Product 5 -->
			<div class="product-card">
				<div class="product-card__image-wrap">
					<img class="product-card__image" alt="Fantasy card Elspeth Tirel depicting a noble warrior in white armor with celestial glowing background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABit9V9NIBphgKlaWe9Sfqpj6nhh0KOFOSWBu0ZeX-oG-PiHa3xnbZF3xULT-DlZwlDhAee2LzYj29F-OqAXTacepUWOQgEVsSG_uDFjhTAC2sLnia58VKbL8NxetusyZKhdn_bpm-Bsz-W6njvBXgsAXYryJ_0rfWHUihlD_IgH9dT5bmryvA_gIwdcXs97KyWs_NefgVcGD8-XQV71vEIw6J-tBlx4dlETHbQcRdPrulZ0rbNEsBf6DUCfEtRB6ENv0dpr-r" />
				</div>
				<h4 class="product-card__name">Elspeth Tirel</h4>
				<p class="product-card__price">£38.00</p>
			</div>
		</div>
	</div>
</section>

<!-- ═══ SECTION: Curator's Vault (Testimonials) ═══ -->
<section class="vault">
	<div class="vault__header">
		<h2 class="vault__title">The Curator's Vault</h2>
		<p class="vault__subtitle">What our inner circle has to say about the Nerdworks standard.</p>
	</div>
	<div class="vault__grid">
		<div class="vault-card">
			<div class="vault-card__stars">
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
			</div>
			<p class="vault-card__quote">"The level of curation here is unmatched in the UK. Nerdworks treats every card like a masterpiece."</p>
			<p class="vault-card__author">Marcus Thorne</p>
		</div>
		<div class="vault-card">
			<div class="vault-card__stars">
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
			</div>
			<p class="vault-card__quote">"Found a gem for my collection that I couldn't find anywhere else. Transparent, professional, and passionate."</p>
			<p class="vault-card__author">Elena Voss</p>
		</div>
		<div class="vault-card">
			<div class="vault-card__stars">
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
				<span class="icon icon--star"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
			</div>
			<p class="vault-card__quote">"As a professional grader, I'm always impressed by the quality Nerdworks brings to market."</p>
			<p class="vault-card__author">Jordan Chen</p>
		</div>
	</div>
</section>

<!-- ═══ SECTION: Explore Archive ═══ -->
<section class="explore">
	<div class="explore__inner">
		<div class="explore__header">
			<h2 class="explore__title">Explore Archive</h2>
			<div class="explore__rule"></div>
		</div>
		<div class="explore__grid">
			<a class="category-tile" href="#">
				<img class="category-tile__image" alt="Collection of colourful Pokemon cards spread out with classic Pokeball graphic in soft focus background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBx8uAZ6W-ouOJlBBLKtKei6A9ImrGysRKMm9NNHV3In-dRS7tFlE-9OkTuGg-9Bqu7GPHFbjR21yLEV5Bibv9cbjhbLx9aZ_HauntvLX29BcpzasVH9y72asnzEk_cf-q5DoCsVxzUAO431NOCKfQ8Jozp9ac2HS6r3mbQtCgOekUjwg3sHexXqZH90P4xcFMnuNXvcye9n6qr_oBTxsVib-11Or0CiJ6taNgZnyLBYVuq4WwYrddN2zIOjpopoKl1tJfyXG9s" />
				<div class="category-tile__label"><h3>Pokemon</h3></div>
			</a>
			<a class="category-tile" href="#">
				<img class="category-tile__image" alt="A detailed Magic: The Gathering card being held in a hand against a dark fantasy backdrop" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_fJQyYG2oBTt0UNlqbTCPYfuAnZzv9eT8bm0O2cdZ9lw_3sZ-omdCiArex9CKeBhcHLWwR3avhBkORdYSGyNlvFIggThJYVnmsBMe-0AHBcIDqFdGvdLGVwIIzUWLRAQmvQ3oURDPBf6jIlh61c_gRvXA-ddT4vLl-Kgsw07hVvbAALPGeNPBlete-PCmzkf7I4cYP9GG3JV-pRl8IwTAZHG0QXDruYbeGN7QaT3fo1w2jqthFRF5XvM0_b9nZCUWWHYA0wsU" />
				<div class="category-tile__label"><h3>Magic</h3></div>
			</a>
			<a class="category-tile" href="#">
				<img class="category-tile__image" alt="Disney Lorcana cards with high saturation and vibrant character art of Mickey Mouse in a sorcerer's outfit" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTkHOBo5siV5QiEarsI8N9EpGdz57fnvrJ47FRiKBnOOe0AjhkuyIn67yRZpqK__HywRvjhf6Vz93yyyvxRqDJX8bcb7BlKddvTb-c1IcFUOLIkeOYz74XXNeJhpmvyxJGBkXXRwLtwUpJCJyXjczE5WP8Ww2Fa5BWGYIqrTcelLXErt0fmz4XhMnokJeBzK42xP_-JVwaj4PvmXKhqjhaW3LOW9aYVb7h4afTFUUX4HGHjYPZdIFRmAqDkO_sBKnybKIDWTkR" />
				<div class="category-tile__label"><h3>Lorcana</h3></div>
			</a>
			<a class="category-tile" href="#">
				<img class="category-tile__image" alt="Detailed board game pieces and dice on a high-quality wooden table with warm indoor lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCogv6sJ1lWwm2NT_sbMXZUfLj_bNpcXlF6MAvcuyg5J1aW_KPjU2jT5J0Nsy9HHY8SgO4qkxcz51GJ_AAzwlWDHodiu35UXsFMcNEbiyjg8CpaaksyWeNLBYyLhDhiHu3ETttwjrYldfhPB_F3TJ9npipNGZ3D9h-SXQAxNsBdqFrXe83A2UIWX9jeClqKUOi57TlybszGMKKKby3dffqQsHuSTLDC39Shiz1UADWG3MNhRcNatfYQwwLcAC70HLRf-SXUZ0Vn" />
				<div class="category-tile__label"><h3>Board games</h3></div>
			</a>
			<a class="category-tile" href="#">
				<img class="category-tile__image" alt="Hand-painted Warhammer miniatures of Space Marines on a weathered battleground landscape" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYFPH8R-OZKBkcgRuKOKGh1xyD93Rgo2KoR3NXFxMXl3Rz517fWE_uP9w4DLwFIsuH-6MVrdSYHzq6d4UR6gHxqZLhhVHzjEFA6rDU1ZGnW4IAU9bDfMAUQbudLjjlj7OQsJhKepKukN2fFMaQ9kXkvGFStfR-BHPhhVOjmW0Nf0ub9ibmxpqYeaMFHY5NDKtWAWwlSbca5mPgxsMsQMdbGBWEJwZf_2axn26joO5a729Gjon7zRuA6ZC7WWwuVybfrN5WeylC" />
				<div class="category-tile__label"><h3>Warhammer</h3></div>
			</a>
			<a class="category-tile" href="#">
				<img class="category-tile__image" alt="High-end leather card binders and protective deck boxes arranged neatly on a dark shelf" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBd1XOsgsIjjln8ZkumyqvVO-F5W-9koKp2do6oCqyn6sUYUiYa3uWpT4Zu6OOzlv5RbXFRku8C6JGekcTKzB8-sOOK036BlJoQPYWKVB7vrCS9ktVbKOl6FPKaH1nvhogeuYT9Yih2b55P0qcavElkAswC8QxhH6nyponGvTQHpHV_Kb27Jyefg0BHaaipexBB1fxg7gOB-fR6ol5L0-_tHOWmEzSjZI4gzoTW6THO9JsSxWLJdquTN3s2c2QTVF0GNQH4EH-w" />
				<div class="category-tile__label"><h3>Accessories</h3></div>
			</a>
		</div>
	</div>
</section>

<!-- ═══ SECTION: This Week at the Shop ═══ -->
<section class="thisweek">
	<div class="thisweek__inner">
		<span class="thisweek__eyebrow">Social Hub</span>
		<h2 class="thisweek__title">This week at the shop.</h2>
		<div class="thisweek__grid">
			<div class="event-card">
				<span class="event-card__time">FRI 19:00</span>
				<h4 class="event-card__name">Friday Night Magic</h4>
				<p class="event-card__body">Modern Format. Competitive environment with exclusive promo rewards for the top 4.</p>
				<button class="btn btn--primary btn--block">Book Seat</button>
			</div>
			<div class="event-card">
				<span class="event-card__time">SAT 11:00</span>
				<h4 class="event-card__name">Pokemon League</h4>
				<p class="event-card__body">Standard Format. All skill levels welcome. Free participation pack for every trainer.</p>
				<button class="btn btn--primary btn--block">Book Seat</button>
			</div>
			<div class="event-card">
				<span class="event-card__time">SUN 14:00</span>
				<h4 class="event-card__name">Lorcana Draft</h4>
				<p class="event-card__body">Limited format. Explore the Inklands with our community-led drafting session.</p>
				<button class="btn btn--primary btn--block">Book Seat</button>
			</div>
		</div>
	</div>
</section>

<!-- ═══ SECTION: Inner Circle (Newsletter) ═══ -->
<section class="circle">
	<div class="circle__inner">
		<h2 class="circle__title">Inner Circle</h2>
		<p class="circle__body">Receive priority access to rare acquisitions and editorial updates before they hit the general archive.</p>
		<form class="circle__form">
			<input class="circle__input" type="email" placeholder="YOUR EMAIL ADDRESS" />
			<button class="btn btn--white" type="submit">Join Now</button>
		</form>
	</div>
</section>

<!-- ═══ SECTION: From Archive (Editorial Posts) ═══ -->
<section class="archive">
	<div class="archive__inner">
		<h2 class="archive__title">From Archive</h2>
		<div class="archive__grid">
			<div class="post-card">
				<div class="post-card__image-wrap">
					<img class="post-card__image" alt="Digital graphs and data visualization showing rising market trends for collectibles on a dark glass monitor" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBUHiWO8igYtgH9PyH49dhg3cxe53QLgA764CyIP_ralPzh4ADYAExhvQgNf9GCXNIDYzBQAwqnQd-DbdPeQ6MBwXOaLbkzEnfu6ZLJrm0tTOVxOgt6El5Cdqlekpe8RY_OD_thLaULBwOv77W4WJ3I_H_m4ZZ-9vls28XyFz-Y1MJ7Eih-_dZvJZIRY9DcIKtYDyyDXZGsfOeyJE8uTzhzV4e_DjQQbgSomvCEHNwUaZgckBGyehAMlpvkfomM-Hsx55ooarF7" />
				</div>
				<span class="post-card__eyebrow">Insights</span>
				<h4 class="post-card__title">Q3 Market Trends: The Rise of Lorcana</h4>
				<p class="post-card__excerpt">A data-driven look at how the latest Disney sets are impacting the secondary market.</p>
			</div>
			<div class="post-card">
				<div class="post-card__image-wrap">
					<img class="post-card__image" alt="Close-up of a person carefully placing a trading card into a high-quality semi-rigid protective card holder" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAjtUUIT5sMd_UNSv1zQaBUOB3k6SRpXnfKnZ9iBOCYEUN0XAmVz5ADK9nbtFoXU9VTWVPkF98wVy4biqHsRGMHgRz5xgzBTDDHcHkbgg3cFGvLKcZSldwpfYCXdevPrj6KM0qZp_QaIaqdCqRk68v6gOjmaFxMfakD6zWY7w90ZTl7PwxjAX_Tc9VbeKgwiGPFRZbRkqsdBl-jIxZy9bnNe9mH3X72fFEH4Y0ONXsKP-aixxDD3qyJOWvQf501uIAK8QPaWh8f" />
				</div>
				<span class="post-card__eyebrow">Care Guide</span>
				<h4 class="post-card__title">Preservation: More Than Just Sleeves</h4>
				<p class="post-card__excerpt">Our definitive guide to long-term storage and temperature control for high-value cards.</p>
			</div>
			<div class="post-card">
				<div class="post-card__image-wrap">
					<img class="post-card__image" alt="Dramatic top-down view of rare holographic cards illuminated by a single spotlight on a black surface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARO8WnJhE2ilc5ln4wuExOmKvFwv3Jl9MyIZ6YCWsA1FI_GZ1Z--fGzU-dExNvSZks9wC0luinpI1wJ8jQeAWM0C47DdPr59086l2h7W8-XpjCvuYwPidCQ4l6t5SuW_IkkHuIj2HZSqv_IbprjWhpqckgBTgnL7pm635_kovtnMxrq-w7VJU5bDZsoZWXUt69ZMTMaWlIBldrJAqDPWWqFfjZxNkQty8uLUdfojyJBQDsMBsB6usvBh9Bp2ksbdTHiXmQ9noc" />
				</div>
				<span class="post-card__eyebrow">Deep Dive</span>
				<h4 class="post-card__title">The Art of the Pull: Base Set Shadows</h4>
				<p class="post-card__excerpt">Reflecting on the iconic design choices of the original 1999 card set.</p>
			</div>
		</div>
	</div>
</section>

</main>

<!-- ═══ SECTION: Footer ═══ -->
<footer class="site-footer">
	<div class="site-footer__grid">
		<div>
			<h3 class="site-footer__brand-name">NERDWORKS</h3>
			<p class="site-footer__brand-desc">The UK's premier destination for curated trading card game assets and editorial content.</p>
		</div>
		<div>
			<h4 class="site-footer__heading">Shop</h4>
			<ul>
				<li><a class="site-footer__link" href="#">The Vault</a></li>
				<li><a class="site-footer__link" href="#">Latest Acquisitions</a></li>
				<li><a class="site-footer__link" href="#">Graded Cards</a></li>
				<li><a class="site-footer__link" href="#">Store Locator</a></li>
			</ul>
		</div>
		<div>
			<h4 class="site-footer__heading">Information</h4>
			<ul>
				<li><a class="site-footer__link" href="#">Shipping & Returns</a></li>
				<li><a class="site-footer__link" href="#">Terms of Service</a></li>
				<li><a class="site-footer__link" href="#">Privacy Policy</a></li>
				<li><a class="site-footer__link" href="#">Affiliates</a></li>
			</ul>
		</div>
		<div>
			<h4 class="site-footer__heading">Contact</h4>
			<ul>
				<li><a class="site-footer__link" href="#">Contact Us</a></li>
				<li><a class="site-footer__link" href="#">Instagram</a></li>
				<li><a class="site-footer__link" href="#">Twitter (X)</a></li>
				<li><a class="site-footer__link" href="#">Discord</a></li>
			</ul>
		</div>
	</div>
	<div class="site-footer__bottom">
		<p class="site-footer__copyright">© 2026 Nerdworks. Premium UK TCG Curation.</p>
		<div class="site-footer__tagline">
			<span>Founded in London</span>
			<span class="site-footer__dot"></span>
			<span>Curated for the World</span>
		</div>
	</div>
</footer>

</body>
</html>