/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Hallmark · macrostructure: Bento Grid · knobs: tiles=5, spans=named-areas
 * irregular, border=hairline all · nav: N7 brutal slab · footer: Ft4 dense
 * colophon · genre: editorial-tactile · theme: custom-tuned "Darkroom
 * Paper" (paper-band: mid-light warm · display: display-condensed Big
 * Shoulders · accent-hue: cool chinagraph blue) · enrichment: Tier-A CSS
 * contact sheet (film frames, edge codes, grease-pencil keeper circle) ·
 * motion: stagger reveal + cta lift · contrast: pass (40–41) ·
 * slop: pass (42–45) · honest: pass (46) · chrome: pass (47) ·
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57)
 */

.home {
	/* ---- tokens ------------------------------------------------------ */
	--color-paper: oklch(92% 0.028 85);
	--color-paper-2: oklch(95% 0.022 88);
	--color-paper-3: oklch(88% 0.032 82);
	--color-ink: oklch(25% 0.032 62);
	--color-ink-2: oklch(40% 0.030 62);
	--color-muted: oklch(43% 0.022 62);
	--color-rule: oklch(25% 0.032 62 / 0.22);
	--color-rule-2: oklch(25% 0.032 62 / 0.50);
	--color-accent: oklch(45% 0.14 258);
	--color-focus: var(--color-accent);

	--font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--font-body: "Spectral", Georgia, serif;
	--font-outlier: "Courier Prime", "Courier New", monospace;

	--text-xs: 0.64rem;
	--text-sm: 0.8rem;
	--text-base: 1rem;
	--text-md: 1.25rem;
	--text-lg: 1.5625rem;
	--text-xl: 1.9531rem;
	--text-display: clamp(2.75rem, 6vw + 1rem, 5.5rem);

	--space-3xs: 0.125rem;
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2.5rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;
	--space-4xl: 9rem;

	--dur-micro: 120ms;
	--dur-short: 220ms;
	--dur-long: 420ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--page-gutter: clamp(1rem, 4vw, 3rem);
	--z-grain: 500;

	/* ---- base -------------------------------------------------------- */
	box-sizing: border-box;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.55;
	min-height: 100dvh;
	position: relative;
}

.home *, .home *::before, .home *::after { box-sizing: inherit; margin: 0; padding: 0; }

html, body { overflow-x: clip; }

.home img { display: block; max-width: 100%; height: auto; }

.home :focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

/* Film grain over the whole sheet — one SVG turbulence layer, multiply. */
.home::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--z-grain);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.05;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* ---- entrance (one-shot stagger, capped) ------------------------------ */
.home .reveal {
	opacity: 0;
	transform: translateY(8px);
	animation: home-reveal var(--dur-long) var(--ease-out) forwards;
	animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes home-reveal { to { opacity: 1; transform: none; } }

/* ---- nav · N7 brutal slab --------------------------------------------- */
.home-slab {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-sm) var(--page-gutter);
	border-bottom: 2px solid var(--color-ink);
}

.home-mark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-md);
	letter-spacing: 0.06em;
	color: var(--color-ink);
	text-decoration: none;
}

.home-slab-nav ul {
	display: flex;
	gap: var(--space-lg);
	list-style: none;
	margin-inline-start: auto;
}

.home-slab-nav a {
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	color: var(--color-ink-2);
	text-decoration: none;
	padding-block: var(--space-xs);
	white-space: nowrap;
	transition: color var(--dur-micro) var(--ease-out);
}

.home-slab-nav a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }

.home-slab-cta {
	font-size: var(--text-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	color: var(--color-ink);
	text-decoration: none;
	border: 2px solid var(--color-ink);
	padding: var(--space-xs) var(--space-md);
	white-space: nowrap;
	transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.home-slab-cta:hover { background: var(--color-ink); color: var(--color-paper); }
.home-slab-cta:active { transform: translateY(1px); }

/* ---- hero -------------------------------------------------------------- */
.home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2xl);
	align-items: center;
	padding: var(--space-3xl) var(--page-gutter) var(--space-3xl);
	overflow-x: clip;
}

.home-hero-copy { max-width: 38rem; min-width: 0; }

@media (min-width: 60rem) {
	.home-hero {
		grid-template-columns: minmax(0, 1fr) minmax(26rem, 40rem);
		column-gap: var(--space-xl);
		padding-block: var(--space-3xl) var(--space-4xl);
	}
}

.home-h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-display);
	line-height: 1.04;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	min-width: 0;
}

.home-sub {
	margin-block-start: var(--space-lg);
	font-size: var(--text-md);
	color: var(--color-ink-2);
	max-width: 52ch;
}

/* ---- hero deal stack (prints cycling like a deck) --------------------- */
.home-deal {
	justify-self: center;
	width: min(22rem, 100%);
}

@media (min-width: 60rem) {
	.home-deal {
		width: 100%;
		justify-self: stretch;
	}
}

.home-deal .home-kicker { margin-block-end: var(--space-sm); }

.home-deal-stack {
	position: relative;
	isolation: isolate;
	width: 100%;
	padding-top: 70%;
	padding-bottom: 8.75rem;
}

.home-deal-card {
	position: absolute;
	top: 0;
	left: 0;
	width: 88%;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule-2);
	padding: var(--space-xs);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	transition: transform var(--dur-long) var(--ease-out);
}

.home-deal-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: grayscale(0.85) sepia(0.22) contrast(1.05);
	border: 1px solid var(--color-rule-2);
}

.home-deal-card figcaption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-inline: var(--space-3xs);
}

.home-deal-id {
	font-family: var(--font-outlier);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	color: var(--color-muted);
}

.home-deal-grade {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	border: 2px solid var(--color-rule-2);
	min-width: 1.5em;
	text-align: center;
	line-height: 1.15;
	padding: 0 var(--space-3xs);
}

.home-deal-grade.is-s {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.home-deal-grade.is-d { color: var(--color-muted); }

.home-deal-card:nth-child(1) { transform: rotate(-2deg); z-index: 5; }
.home-deal-card:nth-child(2) { transform: translate(18px, 14px) rotate(4deg); z-index: 4; }
.home-deal-card:nth-child(3) { transform: translate(-14px, 26px) rotate(-5deg); z-index: 3; }
.home-deal-card:nth-child(4) { transform: translate(22px, 38px) rotate(6deg); z-index: 2; }
.home-deal-card:nth-child(5) { transform: translate(-10px, 48px) rotate(-3.2deg); z-index: 1; }

.home-deal-card.is-out {
	transform: translate(10%, -18%) rotate(8deg);
	z-index: 6;
}

/* Lab slip: types the dummy verdict onto the front print. */
.home .home-deal-slip {
	position: relative;
	min-height: 3.75rem;
	padding: var(--space-2xs) var(--space-3xs) var(--space-xs);
	border-top: 1px solid var(--color-rule);
	font-family: var(--font-outlier);
	font-size: var(--text-xs);
	line-height: 1.45;
	color: var(--color-ink-2);
	opacity: 0;
	overflow-wrap: anywhere;
}

.home-deal-card:nth-child(1) .home-deal-slip,
.home-deal-card.is-out .home-deal-slip {
	opacity: 1;
}

.home-deal-line { display: block; }

.home-deal-tag {
	color: var(--color-accent);
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

.home-deal-caret {
	display: none;
	width: 0.55em;
	height: 0.95em;
	margin-inline-start: 0.12em;
	background: var(--color-accent);
	vertical-align: -0.12em;
	animation: home-caret 1s steps(2, end) infinite;
}

.home-deal-card:nth-child(1) .home-deal-caret.is-on {
	display: inline-block;
}

@keyframes home-caret {
	50% { opacity: 0; }
}

/* ---- CTA chip (C1 outlined) --------------------------------------------- */
.home-chip {
	display: inline-block;
	margin-block-start: var(--space-xl);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-ink);
	text-decoration: none;
	border: 1.5px solid var(--color-ink);
	padding: var(--space-sm) var(--space-xl);
	white-space: nowrap;
	transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.home-chip:hover { background: var(--color-ink); color: var(--color-paper); transform: translateY(-1px); }
.home-chip:active { transform: translateY(0); }

.home-kicker {
	font-family: var(--font-outlier);
	font-size: var(--text-xs);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.home-cell .home-kicker {
	color: var(--color-accent);
	font-size: var(--text-xs);
	max-width: none;
}

/* ---- after the shoot ------------------------------------------------------- */
.home-after {
	padding: var(--space-xl) var(--page-gutter) var(--space-3xl);
	border-top: 1px solid var(--color-rule);
}

.home-after-h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-xl);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-block: var(--space-sm) var(--space-xl);
	max-width: 22ch;
	overflow-wrap: anywhere;
}

.home-after-list {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.home-after-list li {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--space-lg);
	padding-block: var(--space-lg);
	border-top: 1px solid var(--color-rule);
}

.home-after-num {
	font-family: var(--font-outlier);
	font-size: var(--text-sm);
	letter-spacing: 0.08em;
	color: var(--color-accent);
	padding-block-start: 0.35em;
}

.home-after-list h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-block-end: var(--space-xs);
}

.home-after-list p { color: var(--color-ink-2); max-width: 58ch; }

/* ---- bento --------------------------------------------------------------- */
.home-bento {
	display: grid;
	gap: var(--space-sm);
	padding: 0 var(--page-gutter) var(--space-3xl);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas:
		"sheet sheet upload grade"
		"sheet sheet burst advice";
}

.home-cell {
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule-2);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.home-cell--sheet { grid-area: sheet; padding: var(--space-md); }
.home-cell--upload { grid-area: upload; }
.home-cell--grade { grid-area: grade; }
.home-cell--burst { grid-area: burst; }
.home-cell--advice { grid-area: advice; }

.home-cell-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.home-cell p { color: var(--color-ink-2); font-size: var(--text-base); max-width: 58ch; }

.home-cell-note { font-size: var(--text-sm); color: var(--color-muted); }

/* ---- contact sheet tile ---------------------------------------------------- */
.home-edge {
	font-family: var(--font-outlier);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	color: var(--color-muted);
	padding-block: var(--space-2xs);
	overflow-wrap: anywhere;
}

.home-frames {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-xs);
}

.home-frame { position: relative; }

.home-frame img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: grayscale(0.85) sepia(0.22) contrast(1.05);
	border: 1px solid var(--color-rule-2);
}

.home-fnum {
	font-family: var(--font-outlier);
	font-size: var(--text-xs);
	color: var(--color-muted);
	padding-block-start: var(--space-3xs);
}

.home-frame--keeper .home-fnum { color: var(--color-accent); font-weight: 700; }

/* Grease-pencil circle around the keeper — hand-drawn irregular radii. */
.home-circle {
	position: absolute;
	inset: -5% -4% 8% -4%;
	border: 2px solid var(--color-accent);
	border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%;
	transform: rotate(-4deg);
	pointer-events: none;
}

/* ---- grade ladder ----------------------------------------------------------- */
.home-scale {
	display: flex;
	gap: var(--space-2xs);
	align-self: flex-start;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	line-height: 1;
	letter-spacing: 0.04em;
	transform: rotate(-2deg);
}

.home-scale span {
	border: 2px solid var(--color-rule-2);
	padding: var(--space-2xs) var(--space-xs);
	min-width: 1.75em;
	text-align: center;
}

.home-scale .is-s {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.home-scale .is-d {
	color: var(--color-muted);
}

/* ---- plans ----------------------------------------------------------------- */
.home-plans {
	padding: var(--space-xl) var(--page-gutter) var(--space-3xl);
	border-top: 1px solid var(--color-rule);
}

.home-plan-list {
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--space-sm);
	margin-block-end: var(--space-lg);
}

.home-plan-list li {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	border: 1px solid var(--color-rule-2);
	padding: var(--space-lg);
	min-width: 0;
	background: var(--color-paper-2);
}

.home-plan--pro {
	border-color: var(--color-ink);
	background: var(--color-paper-3);
}

.home-plan-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.home-plan-price {
	font-family: var(--font-outlier);
	font-size: var(--text-sm);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.home-plan-spec {
	color: var(--color-ink-2);
	font-size: var(--text-sm);
	flex: 1;
}

.home-plan-addon {
	font-size: var(--text-sm);
	color: var(--color-ink);
	border-top: 1px solid var(--color-rule);
	padding-block-start: var(--space-sm);
	margin-block-start: var(--space-xs);
}

.home-plan-list a {
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: var(--text-sm);
	margin-block-start: var(--space-sm);
	align-self: flex-start;
	transition: color var(--dur-micro) var(--ease-out);
}

.home-plan-list a:hover { color: var(--color-accent); }

/* ---- footer · Ft4 dense colophon ----------------------------------------------- */
.home-colophon {
	border-top: 2px solid var(--color-ink);
	padding: var(--space-lg) var(--page-gutter) var(--space-xl);
}

.home-colophon p {
	font-family: var(--font-outlier);
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--color-ink-2);
	max-width: 70ch;
}

/* ---- tablet / mobile --------------------------------------------------------------- */
@media (max-width: 60rem) {
	.home-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"sheet sheet"
			"upload grade"
			"burst advice";
	}

	.home-plan-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
	.home-hero { padding-block: var(--space-2xl) var(--space-xl); }

	.home-slab-nav ul { display: none; }
	.home-slab-cta { padding-block: var(--space-xs); min-height: 44px; display: inline-flex; align-items: center; }
	.home-slab-nav { margin-inline-start: auto; }

	.home-bento {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "sheet" "upload" "grade" "burst" "advice";
	}

	.home-after-list li {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xs);
	}

	.home-chip,
	.home-plan-list a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.home .reveal { animation: home-reveal-reduced 150ms linear forwards; }
	@keyframes home-reveal-reduced { to { opacity: 1; transform: none; } }
	.home *, .home *::before, .home *::after { transition-duration: 0.01ms !important; }
	.home-deal-caret { animation: none; }
}