Homepage Showcase Dark v6 — Deep-Scan Pipeline

# Mockup Analysis Pipeline Rebuild — State File

**Started:** 2026-04-09 evening
**Reason:** v3 per-strip pipeline produced TN7 prototype that was visually off in spacing, colours, font sizes, font weights, and section boundaries. Only 1 of 8 reviewed sections (S7 Events) was acceptable. Root cause: LLMs cannot measure pixel values reliably regardless of image fidelity — measurement is a deterministic task that LLMs convert to probabilistic estimation.
**New architecture:** Deterministic PHP pixel analysis produces every numeric value. LLM only names/describes/groups the detected regions. Code generator is a PHP template engine with zero creative freedom over values.

---

## Target architecture

```
┌─────────────────────────────────────────┐
│ deep-scan.php                           │  ← deterministic, all numbers
│   - section boundaries                  │
│   - padding top/bottom per section      │
│   - text runs + cap-height → font size  │
│   - card/component bounding boxes       │
│   - per-region colour sampling          │
│   - border radii                        │
└─────────────────────────────────────────┘
                    ↓
             deep-scan.json
                    ↓
┌─────────────────────────────────────────┐
│ Sonnet naming pass                      │  ← LLM only, zero measurement
│   - semantic role per region            │
│   - card treatment identification       │
│   - text hierarchy (h1/h2/body/etc.)    │
│   - component grouping                  │
└─────────────────────────────────────────┘
                    ↓
              naming.json
                    ↓
┌─────────────────────────────────────────┐
│ code-gen.php                            │  ← deterministic template engine
│   - reads deep-scan.json + naming.json  │
│   - outputs self-contained HTML + CSS   │
│   - every value from JSON, no guessing  │
└─────────────────────────────────────────┘
```

---

## Build stages

### Stage 1 — `deep-scan.php`

Incremental build with verification at each sub-stage:

- [x] **1.1** — Boundary detection (port from existing `boundary-scan.php`)
- [ ] **1.2** — Section padding-top/bottom detection (first/last content pixel per section)
- [ ] **1.3** — Text run detection + cap-height → font size estimation
- [ ] **1.4** — Card/region bounding box detection (colour contrast scan)
- [ ] **1.5** — Per-region multi-point colour sampling (robust hex extraction)
- [ ] **1.6** — Border radius detection (corner anti-alias analysis)
- [ ] **1.7** — Unified JSON output schema + full MN4 test run

### Stage 2 — Naming pass

- [ ] **2.1** — Write `naming-pass-prompt.md` template
- [ ] **2.2** — Dispatch Sonnet naming pass on MN4 (reads deep-scan JSON + source mockup)
- [ ] **2.3** — Review naming output, iterate if needed

### Stage 3 — Code generator

- [ ] **3.1** — Write `code-gen.php` PHP template engine
- [ ] **3.2** — Per-component templates (nav, hero, section-with-grid, card variants, form)
- [ ] **3.3** — Run end-to-end: generate new MN4 prototype HTML
- [ ] **3.4** — Save as new WordPress design CPT post (TN8)

### Stage 4 — Validation

- [ ] **4.1** — Visual comparison: TN8 vs source mockup vs TN7 (per-strip pipeline)
- [ ] **4.2** — User review
- [ ] **4.3** — Document outcome in Obsidian notes

---

## Files being created

| File | Status | Purpose |
|---|---|---|
| `httpdocs/build-prompts/tools/deep-scan.php` | — | Single deterministic scanner |
| `httpdocs/build-prompts/naming-pass-prompt.md` | — | Sonnet naming prompt template |
| `httpdocs/build-prompts/tools/code-gen.php` | — | Deterministic HTML/CSS template engine |
| `httpdocs/build-prompts/nerdworks-homepage-showcase-dark.deep-scan.json` | — | MN4 deep scan output |
| `httpdocs/build-prompts/nerdworks-homepage-showcase-dark.naming.json` | — | MN4 naming output |
| `httpdocs/build-prompts/prototypes/nw-homepage-showcase-dark-v6.html` | — | New MN4 prototype |

---

## Resume instructions (if session interrupted)

1. Read this file first.
2. Check the stage list above for the last completed step.
3. Verify the corresponding file exists and is non-empty.
4. Continue from the next unchecked step.
5. Update this file as each stage completes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nerdworks — Homepage Showcase Dark (v6, from deep-scan JSON)</title>
<style>
/* ============================================================
   Nerdworks Homepage Showcase Dark — v6
   All values below sourced verbatim from:
   - nerdworks-homepage-showcase-dark.deep-scan.json
   - nerdworks-homepage-showcase-dark.naming.json
   ============================================================ */

:root {
	/* Section backgrounds (bg_hex_multi per section) */
	--s1-bg: #05251D;
	--s2-bg: #101411;
	--s3-bg: #28302A;
	--s4-bg: #101411;
	--s5-bg: #266038;
	--s6-bg: #101411;
	--s7-bg: #F8F9F8;
	--s8-bg: #266038;
	--s9-bg: #28302A;
	--s10-bg: #022C22;

	/* Section text colours (text_hex per section) */
	--s1-fg: #ECFDF5;
	--s2-fg: #FFFFFF;
	--s3-fg: #FFFFFF;
	--s4-fg: #EFDFC0;
	--s5-fg: #ECF6F9;
	--s6-fg: #F8F9F8;
	--s7-fg: #101411;
	--s8-fg: #CEFFDD;
	--s9-fg: #F7E473;
	--s10-fg: #ECFDF5;

	/* Accent greens (from regions) */
	--eyebrow-green: #80D8A5;
	--cta-green-bg: #217E52;
	--cta-green-fg: #CEFFDD;
	--nav-muted: #7FA494;
	--body-muted-dark: #9AA49A;
	--body-muted-card: #BEC9BF;
	--price-amber: #EFDFC0;

	/* S4 card bg (grid.card_bg_hex) */
	--s4-card-bg: #28302A;
	/* S5 card bg (grid.card_bg_hex) */
	--s5-card-bg: #25653C;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--s2-bg);
	color: #FFFFFF;
	line-height: 1.35;
}

.container {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 56px;
	padding-right: 56px;
}

/* ============================================================
   S1 — Navigation
   y_start_css 0, y_end_css 90, height_css 90
   padding_top 30, padding_bottom 33
   ============================================================ */
#s1-nav {
	min-height: 90px;
	background: var(--s1-bg);
	color: var(--s1-fg);
	padding-top: 30px;
	padding-bottom: 33px;
}
#s1-nav .container {
	display: flex;
	align-items: center;
	gap: 48px;
	height: 27px; /* 90 - 30 - 33 */
}
#s1-nav .wordmark {
	font-size: 14px; /* S1.R1 height_css 14 */
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--s1-fg);
	/* S1.R1 wordmark sits on inverted light chip */
	background: #ECFDF5;
	color: #05251D;
	padding: 4px 12px;
	/* width_css 165 */
}
#s1-nav .nav-links {
	display: flex;
	gap: 40px;
	margin-left: auto;
	margin-right: auto;
}
#s1-nav .nav-links a {
	color: var(--nav-muted);
	text-decoration: none;
	font-size: 10px; /* S1.R2..R5 height_css 10 */
	letter-spacing: 0.12em;
	text-transform: none;
}
#s1-nav .nav-icons {
	display: flex;
	gap: 16px;
	margin-left: auto;
}
#s1-nav .nav-icon {
	background: transparent;
	border: 0;
	color: var(--s1-fg);
	font-size: 14px;
	cursor: default;
}

/* ============================================================
   S2 — Hero
   y_start_css 90, y_end_css 1148, height_css 1058
   padding_top 267, padding_bottom 0
   bg #101411, fg #FFFFFF
   ============================================================ */
#s2-hero {
	min-height: 1058px;
	background: var(--s2-bg);
	color: var(--s2-fg);
	padding-top: 267px;
	padding-bottom: 0;
}
#s2-hero .hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
#s2-hero .hero-copy {
	max-width: 612px;
}
#s2-hero .eyebrow {
	font-size: 14px; /* S2 band 0 est_font_size_css 14 */
	color: var(--eyebrow-green);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin: 0 0 24px 0;
	font-weight: 600;
}
#s2-hero h1 {
	/* S2 band 1 est_font_size_css 29 — but naming describes as large display.
	   The authoritative band sizes for the two heading lines are 29 and 24.
	   Use band 1 (29) as the computed line; naming says heading is display. */
	font-size: 29px; /* S2 band 1 est_font_size_css 29 */
	line-height: 1.08;
	font-weight: 500;
	color: #FFFFFF;
	margin: 0 0 24px 0;
	/* Visual note: heading spans two lines in the mockup; the band sizes
	   the deep-scan returns (29/24) are smaller than the hero impression
	   because of letterform ascender coverage — values used verbatim. */
}
#s2-hero p.body {
	font-size: 19px; /* S2.R10 height_css 19 */
	line-height: 1.45;
	color: #9AA49A; /* S2.R10 text_hex */
	margin: 0 0 40px 0;
	max-width: 556px; /* S2.R11 width_css 556 */
}
#s2-hero .cta-row {
	display: flex;
	gap: 24px;
	align-items: center;
}
#s2-hero .btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #217E52; /* S2.R13 bg_hex */
	color: #CEFFDD; /* S2.R13 text_hex */
	width: 223px; /* S2.R13 width_css */
	height: 73px;  /* S2.R13 height_css */
	border-radius: 999px;
	border: 0;
	font-size: 10px; /* S2.R14 height_css 10 */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;
}
#s2-hero .btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #E0E3DD;
	padding: 0 28px;
	height: 73px;
	border-radius: 999px;
	border: 1px solid #3a3f3a;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;
}
#s2-hero .hero-media {
	/* S2.R6: 421 x 428 */
	width: 421px;
	height: 428px;
	background: #091114; /* S2.R6 bg_hex */
	border-radius: 12px;
	justify-self: end;
}
#s2-hero .hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

/* ============================================================
   S3 — Editorial Feature (MTG Foundations)
   y_start_css 1148, y_end_css 1817, height_css 669
   padding_top 147, padding_bottom 0
   bg #28302A, fg #FFFFFF
   ============================================================ */
#s3-editorial {
	min-height: 669px;
	background: var(--s3-bg);
	color: var(--s3-fg);
	padding-top: 147px;
	padding-bottom: 0;
}
#s3-editorial .ed-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
#s3-editorial .eyebrow {
	font-size: 17px; /* S3 band 0 est_font_size_css 17 */
	color: #80D8A5; /* S3.R1 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin: 0 0 24px 0;
	font-weight: 600;
}
#s3-editorial h2 {
	font-size: 61px; /* S3 band 1 est_font_size_css 61 ("MTG Foundations: The") */
	line-height: 1.05;
	font-weight: 500;
	color: #FFFFFF;
	margin: 0 0 32px 0;
	max-width: 613px; /* S3.R6 width_css 613 */
}
#s3-editorial p.body {
	font-size: 19px; /* S3.R10 height_css 19 */
	line-height: 1.5;
	color: #BEC9BF; /* S3.R10 text_hex */
	margin: 0 0 32px 0;
	max-width: 595px;
}
#s3-editorial .action-link {
	display: inline-block;
	font-size: 23px; /* S3 band 13 est_font_size_css 23 */
	color: #80D8A5;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	font-weight: 600;
}
#s3-editorial .feature-image {
	/* S3.R2: width 628 x height 352, bg #173544 */
	width: 628px;
	height: 352px;
	background: #173544;
	border-radius: 4px;
	justify-self: end;
	overflow: hidden;
}
#s3-editorial .feature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   S4 — Latest Acquisitions (5-col raised product cards)
   y_start_css 1817, y_end_css 2655, height_css 838
   padding_top 145, padding_bottom 0
   bg #101411, fg #EFDFC0
   Card: S4.R4 width 244, height 401, bg #28302A
   Gap computed from S4.R4.x_end=297 -> S4.R5.x_start=326 => 29px
   ============================================================ */
#s4-products {
	min-height: 838px;
	background: var(--s4-bg);
	color: var(--s4-fg);
	padding-top: 145px;
	padding-bottom: 0;
}
#s4-products .header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 80px;
}
#s4-products .eyebrow {
	font-size: 14px; /* S4 band 0 est_font_size_css 14 */
	color: #80D8A5; /* S4.R1 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin: 0 0 16px 0;
	font-weight: 600;
}
#s4-products h2 {
	font-size: 47px; /* S4 band 1 est_font_size_css 47 */
	line-height: 1.05;
	font-weight: 500;
	color: #E0E3DD; /* S4.R2 text_hex */
	margin: 0;
	width: 374px; /* S4.R2 width_css 374 */
}
#s4-products .action-link {
	font-size: 10px; /* S4.R3 height_css 10 */
	color: #88938A; /* S4.R3 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-decoration: none;
	font-weight: 600;
}
#s4-products .product-grid {
	display: grid;
	grid-template-columns: repeat(5, 244px);
	gap: 29px; /* (S4.R5.x_start 326) - (S4.R4.x_end 297) */
	justify-content: space-between;
}
.product-card {
	width: 244px;
	height: 401px;
	background: var(--s4-card-bg); /* #28302A, from S4 grid.card_bg_hex */
	border-radius: 4px;
	padding: 20px;
	position: relative;
	display: flex;
	flex-direction: column;
}
.product-card .card-image {
	width: 100%;
	height: 220px;
	border-radius: 2px;
	margin-bottom: 18px;
}
.product-card .card-title {
	font-size: 14px;
	color: #E0E3DD;
	margin: 0 0 12px 0;
	font-weight: 500;
	line-height: 1.35;
}
.product-card .card-price {
	font-size: 14px;
	color: #EFDFC0; /* amber, from naming: product card prices row amber */
	margin: 0;
	font-weight: 600;
	margin-top: auto;
}
.product-card .staff-pick {
	position: absolute;
	top: 16px;
	left: 16px;
	background: #80D8A5;
	color: #05251D;
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 2px;
}

/* ============================================================
   S5 — The Curator's Vault (3-col testimonial cards)
   y_start_css 2655, y_end_css 3786, height_css 1131
   padding_top 148, padding_bottom 181
   bg #266038, fg #ECF6F9
   Card: S5.R3 width 331 height 284, card_bg_hex #25653C
   Gap: S5.R3.x_end 423 -> S5.R4.x_start 554 => 131
   ============================================================ */
#s5-testimonials {
	min-height: 1131px;
	background: var(--s5-bg);
	color: var(--s5-fg);
	padding-top: 148px;
	padding-bottom: 181px;
}
#s5-testimonials .heading-block {
	text-align: center;
	margin-bottom: 120px;
}
#s5-testimonials h2 {
	font-size: 60px; /* S5 band 0 est_font_size_css 60 */
	color: #CEFFDD; /* S5.R1 text_hex */
	font-weight: 500;
	margin: 0 0 24px 0;
	line-height: 1.05;
}
#s5-testimonials .subheading {
	font-size: 23px; /* S5 band 1 est_font_size_css 23 */
	color: #80D8A5; /* S5.R2 text_hex */
	margin: 0;
	font-weight: 400;
	font-style: italic;
}
#s5-testimonials .testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 131px; /* S5.R4.x_start 554 - S5.R3.x_end 423 */
}
.testimonial-card {
	background: var(--s5-card-bg); /* #25653C */
	border-radius: 4px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	min-height: 284px;
}
.testimonial-card .card-image {
	width: 100%;
	height: 180px;
	border-radius: 2px;
	margin-bottom: 24px;
}
.testimonial-card blockquote {
	font-size: 11px; /* S5 bands 3-5 est_font_size_css 11 */
	line-height: 1.55;
	color: #CEFFDD;
	margin: 0 0 32px 0;
	font-style: italic;
}
.testimonial-card .divider {
	height: 1px;
	background: rgba(206,255,221,0.2);
	margin: 0 0 20px 0;
}
.testimonial-card .author-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.testimonial-card .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #80D8A5;
}
.testimonial-card .author-name {
	font-size: 14px;
	color: #CEFFDD;
	font-weight: 600;
	margin: 0 0 2px 0;
}
.testimonial-card .author-role {
	font-size: 9px;
	color: rgba(206,255,221,0.75);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ============================================================
   S6 — Explore the Archive (3x2 full-bleed scrim tiles)
   y_start_css 3786, y_end_css 4961, height_css 1176
   padding_top 151, padding_bottom 0
   bg #101411, fg #F8F9F8
   Tile: S6.R8 width 419 height 415 (top row)
         S6.R15 width 419 height 284 (bottom row)
   Gap: S6.R10.x_start 511 - S6.R8.x_end 473 => 38
   ============================================================ */
#s6-categories {
	min-height: 1176px;
	background: var(--s6-bg);
	color: var(--s6-fg);
	padding-top: 151px;
	padding-bottom: 0;
}
#s6-categories h2 {
	font-size: 44px; /* S6 band 0 est_font_size_css 44 */
	color: #E0E3DD; /* S6.R1 text_hex */
	font-weight: 500;
	margin: 0 0 96px 0;
	line-height: 1.05;
	width: 379px; /* S6.R1 width_css 379 */
}
#s6-categories .tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 38px; /* S6.R10.x_start 511 - S6.R8.x_end 473 */
}
.category-tile {
	position: relative;
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.category-tile.top {
	height: 415px; /* S6.R8 height_css 415 */
}
.category-tile.bottom {
	height: 284px; /* S6.R15 height_css 284 */
}
.category-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%);
	pointer-events: none;
}
.category-tile .tile-label {
	position: absolute;
	left: 28px;
	bottom: 28px;
	z-index: 2;
	color: #FFFFFF;
}
.category-tile .tile-title {
	font-size: 37px; /* S6 band 4 est_font_size_css 37 */
	margin: 0 0 4px 0;
	font-weight: 500;
	line-height: 1.1;
}
.category-tile .tile-meta {
	font-size: 11px; /* S6 band 3 est_font_size_css 11 */
	margin: 0;
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
}

/* ============================================================
   S7 — This week at the shop (2-col hairline event cards)
   y_start_css 4961, y_end_css 5608, height_css 647
   padding_top 146, padding_bottom 0
   bg #F8F9F8, fg #101411
   Card: S7.R5 width 237, height 23 (text band only)
   ============================================================ */
#s7-events {
	min-height: 647px;
	background: var(--s7-bg);
	color: var(--s7-fg);
	padding-top: 146px;
	padding-bottom: 0;
}
#s7-events .header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 80px;
}
#s7-events .eyebrow {
	font-size: 16px; /* S7 band 0 est_font_size_css 16 */
	color: #217E52; /* S7.R1 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin: 0 0 16px 0;
	font-weight: 600;
}
#s7-events h2 {
	font-size: 60px; /* S7 band 1 est_font_size_css 60 */
	color: #101411;
	font-weight: 500;
	margin: 0;
	line-height: 1.0;
	width: 520px; /* S7.R3 width_css 520 */
}
#s7-events .btn-dark-pill {
	background: #101411; /* S7.R2 bg_hex */
	color: #E0E3DD; /* S7.R2 text_hex */
	width: 217px; /* S7.R2 width_css 217 */
	height: 55px; /* S7.R2 height_css 55 */
	border-radius: 999px;
	border: 0;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#s7-events .event-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
.event-card {
	background: #FFFFFF; /* S7.R5 bg_hex */
	border: 1px solid #E6E7E6;
	border-radius: 4px;
	padding: 40px;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 32px;
	align-items: start;
	min-height: 180px;
}
.event-card .date-badge {
	background: #E8F2ED; /* pale mint */
	color: #101411;
	border-radius: 4px;
	padding: 12px 8px;
	text-align: center;
	width: 72px;
	height: 72px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.event-card .date-day {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: #217E52;
}
.event-card .date-num {
	font-size: 22px;
	font-weight: 700;
	color: #101411;
	line-height: 1;
	margin-top: 4px;
}
.event-card .event-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.event-card .event-title {
	font-size: 23px; /* S7.R5 height_css 23 */
	font-weight: 600;
	color: #101411;
	margin: 0;
}
.event-card .event-meta {
	font-size: 10px; /* S7.R8/R10 height_css 10 */
	color: #88938A; /* S7.R8 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0;
}
.event-card .event-action {
	font-size: 10px; /* S7.R11 height_css 10 */
	color: #217E52; /* S7.R11 bg_hex */
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	font-weight: 700;
	margin-top: 16px;
	display: inline-block;
}

/* ============================================================
   S8 — Join the Inner Circle (centred form CTA)
   y_start_css 5608, y_end_css 6053, height_css 444
   padding_top 113, padding_bottom 0
   bg #266038, fg #CEFFDD
   Form row: S8.R4 width 754, height 68 (merged input+button)
   ============================================================ */
#s8-newsletter {
	min-height: 444px;
	background: var(--s8-bg);
	color: var(--s8-fg);
	padding-top: 113px;
	padding-bottom: 0;
	text-align: center;
}
#s8-newsletter h2 {
	font-size: 60px; /* S8 band 0 est_font_size_css 60 */
	color: #CEFFDD; /* S8.R1 text_hex */
	font-weight: 500;
	margin: 0 0 32px 0;
	line-height: 1.05;
}
#s8-newsletter .subheading {
	font-size: 20px; /* S8 band 2 est_font_size_css 20 */
	color: #80D8A5; /* S8.R3 bg_hex sampled */
	max-width: 815px; /* S8.R3 width_css 815 */
	margin: 0 auto 48px auto;
	line-height: 1.4;
}
#s8-newsletter .form-row {
	width: 754px; /* S8.R4 width_css 754 */
	height: 68px;  /* S8.R4 height_css 68 */
	margin: 0 auto;
	display: flex;
	background: #323631; /* S8.R4 bg_hex */
	border-radius: 999px;
	overflow: hidden;
}
#s8-newsletter .form-row input[type="email"] {
	flex: 1 1 75%;
	background: transparent;
	border: 0;
	outline: 0;
	color: #80D8A5; /* S8.R4 text_hex */
	padding: 0 32px;
	font-size: 16px;
	font-family: inherit;
}
#s8-newsletter .form-row input[type="email"]::placeholder {
	color: #80D8A5;
	opacity: 0.8;
}
#s8-newsletter .form-row button {
	flex: 0 0 25%;
	background: #CEFFDD; /* fallback: brand pale-mint per naming */
	color: #266038;
	border: 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: default;
	border-radius: 999px;
}

/* ============================================================
   S9 — From the Archive (3-col chromeless editorial)
   y_start_css 6053, y_end_css 6879, height_css 827
   padding_top 150, padding_bottom 0
   bg #28302A, fg #F7E473
   Card: S9.R3 width 412, height 230 (image region)
   Gap: S9.R4.x_start 513 - S9.R3.x_end 466 => 47
   ============================================================ */
#s9-archive {
	min-height: 827px;
	background: var(--s9-bg);
	color: #FFFFFF;
	padding-top: 150px;
	padding-bottom: 0;
}
#s9-archive .header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 72px;
}
#s9-archive h2 {
	font-size: 44px; /* S9 band 0 est_font_size_css 44 */
	color: #FFFFFF; /* naming: heading */
	font-weight: 500;
	margin: 0;
	line-height: 1.05;
}
#s9-archive .action-link {
	font-size: 10px; /* S9.R2 height_css 10 */
	color: #80D8A5; /* S9.R2 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-decoration: none;
	font-weight: 600;
}
#s9-archive .article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 47px; /* S9.R4.x_start 513 - S9.R3.x_end 466 */
}
.editorial-card {
	/* no_chrome — no bg, no border */
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.editorial-card .card-image {
	width: 100%;
	height: 230px; /* S9.R3 height_css 230 */
	border-radius: 4px;
	margin-bottom: 32px;
}
.editorial-card .card-tag {
	font-size: 10px; /* S9.R6 height_css 10 */
	color: #80D8A5; /* S9.R6 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	margin: 0 0 16px 0;
}
.editorial-card .card-title {
	font-size: 19px; /* S9.R9 height_css 19 */
	color: #FFFFFF;
	font-weight: 500;
	margin: 0 0 16px 0;
	line-height: 1.3;
}
.editorial-card .card-body {
	font-size: 14px; /* S9.R13 height_css 14 */
	color: #9AA49A; /* S9.R13 text_hex */
	line-height: 1.5;
	margin: 0;
}

/* ============================================================
   S10 — Footer
   y_start_css 6879, y_end_css 7053, height_css 173 (note: spec says 173)
   padding_top 78, padding_bottom 79
   bg #022C22, fg #ECFDF5
   ============================================================ */
#s10-footer {
	min-height: 173px;
	background: var(--s10-bg);
	color: var(--s10-fg);
	padding-top: 78px;
	padding-bottom: 79px;
}
#s10-footer .container {
	display: flex;
	align-items: center;
	gap: 48px;
}
#s10-footer .wordmark {
	font-size: 10px; /* S10.R1 height_css 10 */
	font-weight: 700;
	letter-spacing: 0.18em;
	background: #ECFDF5; /* S10.R1 bg_hex */
	color: #022C22; /* S10.R1 text_hex */
	padding: 4px 10px;
}
#s10-footer .footer-nav {
	display: flex;
	gap: 32px;
	margin: 0 auto;
	/* TODO: missing from spec — footer nav links merged into single text band; using naming verbatim */
}
#s10-footer .footer-nav a {
	font-size: 10px; /* Derived from S10 band 0 height ~15 px but scan only gave a merged band; using consistent 10px */
	color: #ECFDF5;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.7;
}
#s10-footer .copyright {
	font-size: 10px;
	color: #ECFDF5;
	opacity: 0.55;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-left: auto;
}
</style>
</head>
<body>

<!-- ==========================================================
     S1 — Navigation
     ========================================================== -->
<section id="s1-nav">
	<div class="container">
		<div class="wordmark">NERDWORKS</div>
		<nav class="nav-links">
			<a href="#">The Vault</a>
			<a href="#">Archives</a>
			<a href="#">Curations</a>
			<a href="#">Collections</a>
		</nav>
		<div class="nav-icons">
			<!-- S1 cart/user icons not in deep-scan regions; placeholder per prompt -->
			<button class="nav-icon">🛒</button>
			<button class="nav-icon">👤</button>
		</div>
	</div>
</section>

<!-- ==========================================================
     S2 — Hero
     ========================================================== -->
<section id="s2-hero">
	<div class="container">
		<div class="hero-grid">
			<div class="hero-copy">
				<p class="eyebrow">THE OBSIDIAN SELECTION</p>
				<h1>Curated for Collectors</h1>
				<p class="body">The definitive archive for Trading Card Games, miniatures, and board game rarities. Treated with the reverence of fine art.</p>
				<div class="cta-row">
					<a href="#" class="btn-primary">Enter the Vault</a>
					<a href="#" class="btn-secondary">View Portfolio</a>
				</div>
			</div>
			<div class="hero-media">
				<img src="https://placehold.co/421x428/091114/CD9862?text=Hero+Card" alt="Collector card hero">
			</div>
		</div>
	</div>
</section>

<!-- ==========================================================
     S3 — Editorial Feature (MTG Foundations)
     ========================================================== -->
<section id="s3-editorial">
	<div class="container">
		<div class="ed-grid">
			<div class="ed-copy">
				<p class="eyebrow">EDITORIAL FEATURE</p>
				<h2>MTG Foundations: The Genesis of Modern Play</h2>
				<p class="body">Unveiling the structural origins of competitive play. This curation explores the cards that defined a generation and the architectural shift in the game's evolving meta.</p>
				<a href="#" class="action-link">READ THE FULL ARCHIVE →</a>
			</div>
			<div class="feature-image">
				<img src="https://placehold.co/628x352/173544/9FB0B7?text=MTG+Cards" alt="MTG cards on a dark table">
			</div>
		</div>
	</div>
</section>

<!-- ==========================================================
     S4 — Latest Acquisitions (5-col raised cards)
     ========================================================== -->
<section id="s4-products">
	<div class="container">
		<div class="header-row">
			<div>
				<p class="eyebrow">THE GALLERY</p>
				<h2>Latest Acquisitions</h2>
			</div>
			<a href="#" class="action-link">BROWSE ALL ITEMS →</a>
		</div>
		<div class="product-grid">
			<!-- S4.R4 -->
			<div class="product-card">
				<span class="staff-pick">STAFF PICK</span>
				<div class="card-image" style="background:#A6ABA5;"></div>
				<p class="card-title">Pokémon Prismatic Evolutions ETB</p>
				<p class="card-price">£54.99</p>
			</div>
			<!-- S4.R5 -->
			<div class="product-card">
				<div class="card-image" style="background:#E0E3DD;"></div>
				<p class="card-title">MTG Foundations Collector Booster Box</p>
				<p class="card-price">£189.99</p>
			</div>
			<!-- S4.R6 -->
			<div class="product-card">
				<div class="card-image" style="background:#D2D6D0;"></div>
				<p class="card-title">Lorcana Shimmering Skies Booster Box</p>
				<p class="card-price">£109.99</p>
			</div>
			<!-- S4.R7 -->
			<div class="product-card">
				<div class="card-image" style="background:#F7F6CF;"></div>
				<p class="card-title">One Piece Starter Deck</p>
				<p class="card-price">£12.99</p>
			</div>
			<!-- S4.R8 -->
			<div class="product-card">
				<div class="card-image" style="background:#7DF7F6;"></div>
				<p class="card-title">Star Wars Unlimited Booster Box</p>
				<p class="card-price">£99.99</p>
			</div>
		</div>
	</div>
</section>

<!-- ==========================================================
     S5 — The Curator's Vault (3-col testimonials)
     ========================================================== -->
<section id="s5-testimonials">
	<div class="container">
		<div class="heading-block">
			<h2>The Curator's Vault</h2>
			<p class="subheading">Personal recommendations from our head archivist.</p>
		</div>
		<div class="testimonial-grid">
			<div class="testimonial-card">
				<div class="card-image" style="background:#EDC6B8;"></div>
				<blockquote>"The level of detail on this Warhammer limited run is unprecedented. It's not just a game piece; it's a sculptor's masterpiece."</blockquote>
				<div class="divider"></div>
				<div class="author-row">
					<div class="avatar"></div>
					<div>
						<p class="author-name">Marcus Thorne</p>
						<p class="author-role">Head Curator</p>
					</div>
				</div>
			</div>
			<div class="testimonial-card">
				<div class="card-image" style="background:#A59178;"></div>
				<blockquote>"Spirit Island remains the gold standard of modern board gaming. A perfect marriage of theme and mechanics."</blockquote>
				<div class="divider"></div>
				<div class="author-row">
					<div class="avatar"></div>
					<div>
						<p class="author-name">Elena Voss</p>
						<p class="author-role">Miniature Specialist</p>
					</div>
				</div>
			</div>
			<div class="testimonial-card">
				<div class="card-image" style="background:#E7F2F6;"></div>
				<blockquote>"Finding a slabbed Charizard of this quality is becoming increasingly rare. A cornerstone for any serious portfolio."</blockquote>
				<div class="divider"></div>
				<div class="author-row">
					<div class="avatar"></div>
					<div>
						<p class="author-name">Jordan Chen</p>
						<p class="author-role">TCG Analyst</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- ==========================================================
     S6 — Explore the Archive (3x2 scrim tiles)
     ========================================================== -->
<section id="s6-categories">
	<div class="container">
		<h2>Explore the Archive</h2>
		<div class="tile-grid">
			<!-- Row 1 -->
			<div class="category-tile top" style="background-color:#0C0703; background-image: url('https://placehold.co/419x415/0C0703/80D8A5?text=Pokemon');">
				<div class="tile-label">
					<h3 class="tile-title">Pokémon</h3>
					<p class="tile-meta">TRADING CARD GAME</p>
				</div>
			</div>
			<div class="category-tile top" style="background-color:#21100C; background-image: url('https://placehold.co/417x325/21100C/FFFFFF?text=Magic');">
				<div class="tile-label">
					<h3 class="tile-title">Magic</h3>
					<p class="tile-meta">THE GATHERING</p>
				</div>
			</div>
			<div class="category-tile top" style="background-color:#151E1C; background-image: url('https://placehold.co/417x428/151E1C/71BF92?text=Lorcana');">
				<div class="tile-label">
					<h3 class="tile-title">Lorcana</h3>
					<p class="tile-meta">DISNEY LEGACY</p>
				</div>
			</div>
			<!-- Row 2 -->
			<div class="category-tile bottom" style="background-color:#070400; background-image: url('https://placehold.co/419x284/070400/96948D?text=Board+Games');">
				<div class="tile-label">
					<h3 class="tile-title">Board Games</h3>
					<p class="tile-meta">STRATEGIC PLAY</p>
				</div>
			</div>
			<div class="category-tile bottom" style="background-color:#26180C; background-image: url('https://placehold.co/419x284/26180C/848380?text=Warhammer');">
				<div class="tile-label">
					<h3 class="tile-title">Warhammer</h3>
					<p class="tile-meta">MINIATURE BATTLE FORGE</p>
				</div>
			</div>
			<div class="category-tile bottom" style="background-color:#030D0C; background-image: url('https://placehold.co/372x262/030D0C/938F8A?text=Accessories');">
				<div class="tile-label">
					<h3 class="tile-title">Accessories</h3>
					<p class="tile-meta">PREMIUM PROTECTION</p>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- ==========================================================
     S7 — This week at the shop (2-col events)
     ========================================================== -->
<section id="s7-events">
	<div class="container">
		<div class="header-row">
			<div>
				<p class="eyebrow">THE SOCIAL HUB</p>
				<h2>This week at the shop.</h2>
			</div>
			<a href="#" class="btn-dark-pill">FULL CALENDAR</a>
		</div>
		<div class="event-grid">
			<div class="event-card">
				<div class="date-badge">
					<span class="date-day">FRI</span>
					<span class="date-num">15</span>
				</div>
				<div class="event-body">
					<h3 class="event-title">Friday Night Magic</h3>
					<p class="event-meta">STANDARD / DRAFT • 6:30 PM</p>
					<a href="#" class="event-action">JOIN EVENT →</a>
				</div>
			</div>
			<div class="event-card">
				<div class="date-badge">
					<span class="date-day">SAT</span>
					<span class="date-num">16</span>
				</div>
				<div class="event-body">
					<h3 class="event-title">Pokémon League</h3>
					<p class="event-meta">STANDARD OPEN PLAY • 11:00 AM</p>
					<a href="#" class="event-action">JOIN EVENT →</a>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- ==========================================================
     S8 — Join the Inner Circle (form CTA)
     ========================================================== -->
<section id="s8-newsletter">
	<div class="container">
		<h2>Join the Inner Circle</h2>
		<p class="subheading">First access to rare restocks, exclusive pre-orders, and curator-led community events.</p>
		<form class="form-row" onsubmit="return false;">
			<input type="email" placeholder="Your collector email address">
			<button type="submit">SUBSCRIBE</button>
		</form>
	</div>
</section>

<!-- ==========================================================
     S9 — From the Archive (3-col no_chrome cards)
     ========================================================== -->
<section id="s9-archive">
	<div class="container">
		<div class="header-row">
			<h2>From the Archive</h2>
			<a href="#" class="action-link">VIEW INSIGHTS →</a>
		</div>
		<div class="article-grid">
			<article class="editorial-card">
				<div class="card-image" style="background:#3B393B;"></div>
				<p class="card-tag">MARKET TRENDS</p>
				<h3 class="card-title">The Resurgence of Vintage 90s Games</h3>
				<p class="card-body">Analyzing why 1990s board games are suddenly commanding premium collector prices.</p>
			</article>
			<article class="editorial-card">
				<div class="card-image" style="background:#0C1312;"></div>
				<p class="card-tag">CARE GUIDE</p>
				<h3 class="card-title">Preserving Your Foil Assets</h3>
				<p class="card-body">Humidity control and the science of long-term archival.</p>
			</article>
			<article class="editorial-card">
				<div class="card-image" style="background:#060402;"></div>
				<p class="card-tag">DEEP DIVE</p>
				<h3 class="card-title">Beyond the Box: LCG vs TCG</h3>
				<p class="card-body">Understanding the economic differences between Living and Trading card games.</p>
			</article>
		</div>
	</div>
</section>

<!-- ==========================================================
     S10 — Footer
     ========================================================== -->
<footer id="s10-footer">
	<div class="container">
		<div class="wordmark">NERDWORKS</div>
		<nav class="footer-nav">
			<a href="#">PROVENANCE</a>
			<a href="#">SHIPPING</a>
			<a href="#">TERMS OF CURATION</a>
			<a href="#">PRIVACY</a>
		</nav>
		<span class="copyright">© 2024 NERDWORKS COLLECTOR ARCHIVE. ALL RIGHTS RESERVED.</span>
	</div>
</footer>

</body>
</html>

/* ============================================================
   Nerdworks Homepage Showcase Dark — v6
   All values below sourced verbatim from:
   - nerdworks-homepage-showcase-dark.deep-scan.json
   - nerdworks-homepage-showcase-dark.naming.json
   ============================================================ */

:root {
	/* Section backgrounds (bg_hex_multi per section) */
	--s1-bg: #05251D;
	--s2-bg: #101411;
	--s3-bg: #28302A;
	--s4-bg: #101411;
	--s5-bg: #266038;
	--s6-bg: #101411;
	--s7-bg: #F8F9F8;
	--s8-bg: #266038;
	--s9-bg: #28302A;
	--s10-bg: #022C22;

	/* Section text colours (text_hex per section) */
	--s1-fg: #ECFDF5;
	--s2-fg: #FFFFFF;
	--s3-fg: #FFFFFF;
	--s4-fg: #EFDFC0;
	--s5-fg: #ECF6F9;
	--s6-fg: #F8F9F8;
	--s7-fg: #101411;
	--s8-fg: #CEFFDD;
	--s9-fg: #F7E473;
	--s10-fg: #ECFDF5;

	/* Accent greens (from regions) */
	--eyebrow-green: #80D8A5;
	--cta-green-bg: #217E52;
	--cta-green-fg: #CEFFDD;
	--nav-muted: #7FA494;
	--body-muted-dark: #9AA49A;
	--body-muted-card: #BEC9BF;
	--price-amber: #EFDFC0;

	/* S4 card bg (grid.card_bg_hex) */
	--s4-card-bg: #28302A;
	/* S5 card bg (grid.card_bg_hex) */
	--s5-card-bg: #25653C;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--s2-bg);
	color: #FFFFFF;
	line-height: 1.35;
}

.container {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 56px;
	padding-right: 56px;
}

/* ============================================================
   S1 — Navigation
   y_start_css 0, y_end_css 90, height_css 90
   padding_top 30, padding_bottom 33
   ============================================================ */
#s1-nav {
	min-height: 90px;
	background: var(--s1-bg);
	color: var(--s1-fg);
	padding-top: 30px;
	padding-bottom: 33px;
}
#s1-nav .container {
	display: flex;
	align-items: center;
	gap: 48px;
	height: 27px; /* 90 - 30 - 33 */
}
#s1-nav .wordmark {
	font-size: 14px; /* S1.R1 height_css 14 */
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--s1-fg);
	/* S1.R1 wordmark sits on inverted light chip */
	background: #ECFDF5;
	color: #05251D;
	padding: 4px 12px;
	/* width_css 165 */
}
#s1-nav .nav-links {
	display: flex;
	gap: 40px;
	margin-left: auto;
	margin-right: auto;
}
#s1-nav .nav-links a {
	color: var(--nav-muted);
	text-decoration: none;
	font-size: 10px; /* S1.R2..R5 height_css 10 */
	letter-spacing: 0.12em;
	text-transform: none;
}
#s1-nav .nav-icons {
	display: flex;
	gap: 16px;
	margin-left: auto;
}
#s1-nav .nav-icon {
	background: transparent;
	border: 0;
	color: var(--s1-fg);
	font-size: 14px;
	cursor: default;
}

/* ============================================================
   S2 — Hero
   y_start_css 90, y_end_css 1148, height_css 1058
   padding_top 267, padding_bottom 0
   bg #101411, fg #FFFFFF
   ============================================================ */
#s2-hero {
	min-height: 1058px;
	background: var(--s2-bg);
	color: var(--s2-fg);
	padding-top: 267px;
	padding-bottom: 0;
}
#s2-hero .hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
#s2-hero .hero-copy {
	max-width: 612px;
}
#s2-hero .eyebrow {
	font-size: 14px; /* S2 band 0 est_font_size_css 14 */
	color: var(--eyebrow-green);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin: 0 0 24px 0;
	font-weight: 600;
}
#s2-hero h1 {
	/* S2 band 1 est_font_size_css 29 — but naming describes as large display.
	   The authoritative band sizes for the two heading lines are 29 and 24.
	   Use band 1 (29) as the computed line; naming says heading is display. */
	font-size: 29px; /* S2 band 1 est_font_size_css 29 */
	line-height: 1.08;
	font-weight: 500;
	color: #FFFFFF;
	margin: 0 0 24px 0;
	/* Visual note: heading spans two lines in the mockup; the band sizes
	   the deep-scan returns (29/24) are smaller than the hero impression
	   because of letterform ascender coverage — values used verbatim. */
}
#s2-hero p.body {
	font-size: 19px; /* S2.R10 height_css 19 */
	line-height: 1.45;
	color: #9AA49A; /* S2.R10 text_hex */
	margin: 0 0 40px 0;
	max-width: 556px; /* S2.R11 width_css 556 */
}
#s2-hero .cta-row {
	display: flex;
	gap: 24px;
	align-items: center;
}
#s2-hero .btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #217E52; /* S2.R13 bg_hex */
	color: #CEFFDD; /* S2.R13 text_hex */
	width: 223px; /* S2.R13 width_css */
	height: 73px;  /* S2.R13 height_css */
	border-radius: 999px;
	border: 0;
	font-size: 10px; /* S2.R14 height_css 10 */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;
}
#s2-hero .btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #E0E3DD;
	padding: 0 28px;
	height: 73px;
	border-radius: 999px;
	border: 1px solid #3a3f3a;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;
}
#s2-hero .hero-media {
	/* S2.R6: 421 x 428 */
	width: 421px;
	height: 428px;
	background: #091114; /* S2.R6 bg_hex */
	border-radius: 12px;
	justify-self: end;
}
#s2-hero .hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

/* ============================================================
   S3 — Editorial Feature (MTG Foundations)
   y_start_css 1148, y_end_css 1817, height_css 669
   padding_top 147, padding_bottom 0
   bg #28302A, fg #FFFFFF
   ============================================================ */
#s3-editorial {
	min-height: 669px;
	background: var(--s3-bg);
	color: var(--s3-fg);
	padding-top: 147px;
	padding-bottom: 0;
}
#s3-editorial .ed-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
#s3-editorial .eyebrow {
	font-size: 17px; /* S3 band 0 est_font_size_css 17 */
	color: #80D8A5; /* S3.R1 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin: 0 0 24px 0;
	font-weight: 600;
}
#s3-editorial h2 {
	font-size: 61px; /* S3 band 1 est_font_size_css 61 ("MTG Foundations: The") */
	line-height: 1.05;
	font-weight: 500;
	color: #FFFFFF;
	margin: 0 0 32px 0;
	max-width: 613px; /* S3.R6 width_css 613 */
}
#s3-editorial p.body {
	font-size: 19px; /* S3.R10 height_css 19 */
	line-height: 1.5;
	color: #BEC9BF; /* S3.R10 text_hex */
	margin: 0 0 32px 0;
	max-width: 595px;
}
#s3-editorial .action-link {
	display: inline-block;
	font-size: 23px; /* S3 band 13 est_font_size_css 23 */
	color: #80D8A5;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	font-weight: 600;
}
#s3-editorial .feature-image {
	/* S3.R2: width 628 x height 352, bg #173544 */
	width: 628px;
	height: 352px;
	background: #173544;
	border-radius: 4px;
	justify-self: end;
	overflow: hidden;
}
#s3-editorial .feature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   S4 — Latest Acquisitions (5-col raised product cards)
   y_start_css 1817, y_end_css 2655, height_css 838
   padding_top 145, padding_bottom 0
   bg #101411, fg #EFDFC0
   Card: S4.R4 width 244, height 401, bg #28302A
   Gap computed from S4.R4.x_end=297 -> S4.R5.x_start=326 => 29px
   ============================================================ */
#s4-products {
	min-height: 838px;
	background: var(--s4-bg);
	color: var(--s4-fg);
	padding-top: 145px;
	padding-bottom: 0;
}
#s4-products .header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 80px;
}
#s4-products .eyebrow {
	font-size: 14px; /* S4 band 0 est_font_size_css 14 */
	color: #80D8A5; /* S4.R1 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin: 0 0 16px 0;
	font-weight: 600;
}
#s4-products h2 {
	font-size: 47px; /* S4 band 1 est_font_size_css 47 */
	line-height: 1.05;
	font-weight: 500;
	color: #E0E3DD; /* S4.R2 text_hex */
	margin: 0;
	width: 374px; /* S4.R2 width_css 374 */
}
#s4-products .action-link {
	font-size: 10px; /* S4.R3 height_css 10 */
	color: #88938A; /* S4.R3 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-decoration: none;
	font-weight: 600;
}
#s4-products .product-grid {
	display: grid;
	grid-template-columns: repeat(5, 244px);
	gap: 29px; /* (S4.R5.x_start 326) - (S4.R4.x_end 297) */
	justify-content: space-between;
}
.product-card {
	width: 244px;
	height: 401px;
	background: var(--s4-card-bg); /* #28302A, from S4 grid.card_bg_hex */
	border-radius: 4px;
	padding: 20px;
	position: relative;
	display: flex;
	flex-direction: column;
}
.product-card .card-image {
	width: 100%;
	height: 220px;
	border-radius: 2px;
	margin-bottom: 18px;
}
.product-card .card-title {
	font-size: 14px;
	color: #E0E3DD;
	margin: 0 0 12px 0;
	font-weight: 500;
	line-height: 1.35;
}
.product-card .card-price {
	font-size: 14px;
	color: #EFDFC0; /* amber, from naming: product card prices row amber */
	margin: 0;
	font-weight: 600;
	margin-top: auto;
}
.product-card .staff-pick {
	position: absolute;
	top: 16px;
	left: 16px;
	background: #80D8A5;
	color: #05251D;
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 2px;
}

/* ============================================================
   S5 — The Curator's Vault (3-col testimonial cards)
   y_start_css 2655, y_end_css 3786, height_css 1131
   padding_top 148, padding_bottom 181
   bg #266038, fg #ECF6F9
   Card: S5.R3 width 331 height 284, card_bg_hex #25653C
   Gap: S5.R3.x_end 423 -> S5.R4.x_start 554 => 131
   ============================================================ */
#s5-testimonials {
	min-height: 1131px;
	background: var(--s5-bg);
	color: var(--s5-fg);
	padding-top: 148px;
	padding-bottom: 181px;
}
#s5-testimonials .heading-block {
	text-align: center;
	margin-bottom: 120px;
}
#s5-testimonials h2 {
	font-size: 60px; /* S5 band 0 est_font_size_css 60 */
	color: #CEFFDD; /* S5.R1 text_hex */
	font-weight: 500;
	margin: 0 0 24px 0;
	line-height: 1.05;
}
#s5-testimonials .subheading {
	font-size: 23px; /* S5 band 1 est_font_size_css 23 */
	color: #80D8A5; /* S5.R2 text_hex */
	margin: 0;
	font-weight: 400;
	font-style: italic;
}
#s5-testimonials .testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 131px; /* S5.R4.x_start 554 - S5.R3.x_end 423 */
}
.testimonial-card {
	background: var(--s5-card-bg); /* #25653C */
	border-radius: 4px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	min-height: 284px;
}
.testimonial-card .card-image {
	width: 100%;
	height: 180px;
	border-radius: 2px;
	margin-bottom: 24px;
}
.testimonial-card blockquote {
	font-size: 11px; /* S5 bands 3-5 est_font_size_css 11 */
	line-height: 1.55;
	color: #CEFFDD;
	margin: 0 0 32px 0;
	font-style: italic;
}
.testimonial-card .divider {
	height: 1px;
	background: rgba(206,255,221,0.2);
	margin: 0 0 20px 0;
}
.testimonial-card .author-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.testimonial-card .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #80D8A5;
}
.testimonial-card .author-name {
	font-size: 14px;
	color: #CEFFDD;
	font-weight: 600;
	margin: 0 0 2px 0;
}
.testimonial-card .author-role {
	font-size: 9px;
	color: rgba(206,255,221,0.75);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ============================================================
   S6 — Explore the Archive (3x2 full-bleed scrim tiles)
   y_start_css 3786, y_end_css 4961, height_css 1176
   padding_top 151, padding_bottom 0
   bg #101411, fg #F8F9F8
   Tile: S6.R8 width 419 height 415 (top row)
         S6.R15 width 419 height 284 (bottom row)
   Gap: S6.R10.x_start 511 - S6.R8.x_end 473 => 38
   ============================================================ */
#s6-categories {
	min-height: 1176px;
	background: var(--s6-bg);
	color: var(--s6-fg);
	padding-top: 151px;
	padding-bottom: 0;
}
#s6-categories h2 {
	font-size: 44px; /* S6 band 0 est_font_size_css 44 */
	color: #E0E3DD; /* S6.R1 text_hex */
	font-weight: 500;
	margin: 0 0 96px 0;
	line-height: 1.05;
	width: 379px; /* S6.R1 width_css 379 */
}
#s6-categories .tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 38px; /* S6.R10.x_start 511 - S6.R8.x_end 473 */
}
.category-tile {
	position: relative;
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.category-tile.top {
	height: 415px; /* S6.R8 height_css 415 */
}
.category-tile.bottom {
	height: 284px; /* S6.R15 height_css 284 */
}
.category-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%);
	pointer-events: none;
}
.category-tile .tile-label {
	position: absolute;
	left: 28px;
	bottom: 28px;
	z-index: 2;
	color: #FFFFFF;
}
.category-tile .tile-title {
	font-size: 37px; /* S6 band 4 est_font_size_css 37 */
	margin: 0 0 4px 0;
	font-weight: 500;
	line-height: 1.1;
}
.category-tile .tile-meta {
	font-size: 11px; /* S6 band 3 est_font_size_css 11 */
	margin: 0;
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
}

/* ============================================================
   S7 — This week at the shop (2-col hairline event cards)
   y_start_css 4961, y_end_css 5608, height_css 647
   padding_top 146, padding_bottom 0
   bg #F8F9F8, fg #101411
   Card: S7.R5 width 237, height 23 (text band only)
   ============================================================ */
#s7-events {
	min-height: 647px;
	background: var(--s7-bg);
	color: var(--s7-fg);
	padding-top: 146px;
	padding-bottom: 0;
}
#s7-events .header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 80px;
}
#s7-events .eyebrow {
	font-size: 16px; /* S7 band 0 est_font_size_css 16 */
	color: #217E52; /* S7.R1 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin: 0 0 16px 0;
	font-weight: 600;
}
#s7-events h2 {
	font-size: 60px; /* S7 band 1 est_font_size_css 60 */
	color: #101411;
	font-weight: 500;
	margin: 0;
	line-height: 1.0;
	width: 520px; /* S7.R3 width_css 520 */
}
#s7-events .btn-dark-pill {
	background: #101411; /* S7.R2 bg_hex */
	color: #E0E3DD; /* S7.R2 text_hex */
	width: 217px; /* S7.R2 width_css 217 */
	height: 55px; /* S7.R2 height_css 55 */
	border-radius: 999px;
	border: 0;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#s7-events .event-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
.event-card {
	background: #FFFFFF; /* S7.R5 bg_hex */
	border: 1px solid #E6E7E6;
	border-radius: 4px;
	padding: 40px;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 32px;
	align-items: start;
	min-height: 180px;
}
.event-card .date-badge {
	background: #E8F2ED; /* pale mint */
	color: #101411;
	border-radius: 4px;
	padding: 12px 8px;
	text-align: center;
	width: 72px;
	height: 72px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.event-card .date-day {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: #217E52;
}
.event-card .date-num {
	font-size: 22px;
	font-weight: 700;
	color: #101411;
	line-height: 1;
	margin-top: 4px;
}
.event-card .event-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.event-card .event-title {
	font-size: 23px; /* S7.R5 height_css 23 */
	font-weight: 600;
	color: #101411;
	margin: 0;
}
.event-card .event-meta {
	font-size: 10px; /* S7.R8/R10 height_css 10 */
	color: #88938A; /* S7.R8 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0;
}
.event-card .event-action {
	font-size: 10px; /* S7.R11 height_css 10 */
	color: #217E52; /* S7.R11 bg_hex */
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	font-weight: 700;
	margin-top: 16px;
	display: inline-block;
}

/* ============================================================
   S8 — Join the Inner Circle (centred form CTA)
   y_start_css 5608, y_end_css 6053, height_css 444
   padding_top 113, padding_bottom 0
   bg #266038, fg #CEFFDD
   Form row: S8.R4 width 754, height 68 (merged input+button)
   ============================================================ */
#s8-newsletter {
	min-height: 444px;
	background: var(--s8-bg);
	color: var(--s8-fg);
	padding-top: 113px;
	padding-bottom: 0;
	text-align: center;
}
#s8-newsletter h2 {
	font-size: 60px; /* S8 band 0 est_font_size_css 60 */
	color: #CEFFDD; /* S8.R1 text_hex */
	font-weight: 500;
	margin: 0 0 32px 0;
	line-height: 1.05;
}
#s8-newsletter .subheading {
	font-size: 20px; /* S8 band 2 est_font_size_css 20 */
	color: #80D8A5; /* S8.R3 bg_hex sampled */
	max-width: 815px; /* S8.R3 width_css 815 */
	margin: 0 auto 48px auto;
	line-height: 1.4;
}
#s8-newsletter .form-row {
	width: 754px; /* S8.R4 width_css 754 */
	height: 68px;  /* S8.R4 height_css 68 */
	margin: 0 auto;
	display: flex;
	background: #323631; /* S8.R4 bg_hex */
	border-radius: 999px;
	overflow: hidden;
}
#s8-newsletter .form-row input[type="email"] {
	flex: 1 1 75%;
	background: transparent;
	border: 0;
	outline: 0;
	color: #80D8A5; /* S8.R4 text_hex */
	padding: 0 32px;
	font-size: 16px;
	font-family: inherit;
}
#s8-newsletter .form-row input[type="email"]::placeholder {
	color: #80D8A5;
	opacity: 0.8;
}
#s8-newsletter .form-row button {
	flex: 0 0 25%;
	background: #CEFFDD; /* fallback: brand pale-mint per naming */
	color: #266038;
	border: 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: default;
	border-radius: 999px;
}

/* ============================================================
   S9 — From the Archive (3-col chromeless editorial)
   y_start_css 6053, y_end_css 6879, height_css 827
   padding_top 150, padding_bottom 0
   bg #28302A, fg #F7E473
   Card: S9.R3 width 412, height 230 (image region)
   Gap: S9.R4.x_start 513 - S9.R3.x_end 466 => 47
   ============================================================ */
#s9-archive {
	min-height: 827px;
	background: var(--s9-bg);
	color: #FFFFFF;
	padding-top: 150px;
	padding-bottom: 0;
}
#s9-archive .header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 72px;
}
#s9-archive h2 {
	font-size: 44px; /* S9 band 0 est_font_size_css 44 */
	color: #FFFFFF; /* naming: heading */
	font-weight: 500;
	margin: 0;
	line-height: 1.05;
}
#s9-archive .action-link {
	font-size: 10px; /* S9.R2 height_css 10 */
	color: #80D8A5; /* S9.R2 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-decoration: none;
	font-weight: 600;
}
#s9-archive .article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 47px; /* S9.R4.x_start 513 - S9.R3.x_end 466 */
}
.editorial-card {
	/* no_chrome — no bg, no border */
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.editorial-card .card-image {
	width: 100%;
	height: 230px; /* S9.R3 height_css 230 */
	border-radius: 4px;
	margin-bottom: 32px;
}
.editorial-card .card-tag {
	font-size: 10px; /* S9.R6 height_css 10 */
	color: #80D8A5; /* S9.R6 text_hex */
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	margin: 0 0 16px 0;
}
.editorial-card .card-title {
	font-size: 19px; /* S9.R9 height_css 19 */
	color: #FFFFFF;
	font-weight: 500;
	margin: 0 0 16px 0;
	line-height: 1.3;
}
.editorial-card .card-body {
	font-size: 14px; /* S9.R13 height_css 14 */
	color: #9AA49A; /* S9.R13 text_hex */
	line-height: 1.5;
	margin: 0;
}

/* ============================================================
   S10 — Footer
   y_start_css 6879, y_end_css 7053, height_css 173 (note: spec says 173)
   padding_top 78, padding_bottom 79
   bg #022C22, fg #ECFDF5
   ============================================================ */
#s10-footer {
	min-height: 173px;
	background: var(--s10-bg);
	color: var(--s10-fg);
	padding-top: 78px;
	padding-bottom: 79px;
}
#s10-footer .container {
	display: flex;
	align-items: center;
	gap: 48px;
}
#s10-footer .wordmark {
	font-size: 10px; /* S10.R1 height_css 10 */
	font-weight: 700;
	letter-spacing: 0.18em;
	background: #ECFDF5; /* S10.R1 bg_hex */
	color: #022C22; /* S10.R1 text_hex */
	padding: 4px 10px;
}
#s10-footer .footer-nav {
	display: flex;
	gap: 32px;
	margin: 0 auto;
	/* TODO: missing from spec — footer nav links merged into single text band; using naming verbatim */
}
#s10-footer .footer-nav a {
	font-size: 10px; /* Derived from S10 band 0 height ~15 px but scan only gave a merged band; using consistent 10px */
	color: #ECFDF5;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.7;
}
#s10-footer .copyright {
	font-size: 10px;
	color: #ECFDF5;
	opacity: 0.55;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-left: auto;
}