/**
 * lopp.com — full-page Esquire cover
 *
 * Visual DNA inherited from randsinrepose.com's Esquire footer
 * (card grid on gray canvas, #cd3700 accent), promoted to a full
 * viewport magazine cover.
 *
 * FONT NAMES: the "Family A"/"Family B" names below are PLACEHOLDERS
 * until the Cloud.typography dev project exists — update :root once we
 * see the real CSS. Until then the fallback stacks carry the design.
 */

:root {
	/* Rands palette (theme.json, randsinrepose.com) */
	--main: #474747;
	--primary: #cd3700;
	--secondary: #7e7e7e;
	--bg: #ffffff;
	--bg-2: #cbcece;
	--bg-3: #e5e7e7;
	--bg-4: #f2f3f3;

	/* Core voices — the Rands continuity
	   (real names from dev project 7384032: Sentinel 400/700±i, Ideal Sans 400/700±i) */
	--font-serif: "Sentinel A", "Sentinel B", Georgia, serif;
	--font-sans: "Ideal Sans A", "Ideal Sans B", system-ui, sans-serif;
	/* No SC family in dev project yet — labels use letterspaced uppercase sans instead */
	--font-sc: "Ideal Sans A", "Ideal Sans B", system-ui, sans-serif;

	/* Display + voice faces — Tungsten × Archer (the call, locked) */
	--font-tungsten: "Tungsten A", "Tungsten B", "Arial Narrow", Impact, sans-serif;
	--font-archer: "Archer A", "Archer B", Rockwell, "Courier New", serif;

	--font-display: var(--font-tungsten);
	--font-voice: var(--font-archer);
	--weight-display: 700;
	--weight-voice: 500;
	--style-voice: italic;

	--gap: 8px;
	--radius: 4px;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
}

body {
	background: var(--bg-4);
	font-family: var(--font-sans);
	color: var(--main);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* paper grain — barely-there noise so the canvas isn't dead flat */
	background-image: radial-gradient(rgba(71, 71, 71, 0.025) 1px, transparent 1px);
	background-size: 4px 4px;
}

/* ----- Masthead rule — the only chrome ----- */
.cover {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(10px, 2vh, 28px) clamp(10px, 2.5vw, 32px);
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* "Feature Spread" geometry — the example-5 winner (2026-06-09).
   Fixed 6×6 area grid so the tall/two-part treatments get real height. */
.cover__grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: repeat(6, minmax(0, 1fr));
	gap: var(--gap);
	grid-template-areas:
		"name  name   name   name   ticket ticket"
		"name  name   name   name   now    disp"
		"mag   mag    mag    drop   drop   drop"
		"mag   mag    mag    drop   drop   drop"
		"pills pills  pills  knock  ghost  ghost"
		"date  social social latest latest logo";
}

/* ----- Cells ----- */
.cell {
	padding: 12px 14px;
	background: var(--bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	align-items: center;
	min-width: 0;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
	/* staggered page-load reveal */
	opacity: 0;
	transform: translateY(6px);
	animation: cell-in 0.45s ease forwards;
}

@keyframes cell-in {
	to { opacity: 1; transform: none; }
}

.cell:nth-child(1)  { animation-delay: 0.00s; }
.cell:nth-child(2)  { animation-delay: 0.05s; }
.cell:nth-child(3)  { animation-delay: 0.10s; }
.cell:nth-child(4)  { animation-delay: 0.15s; }
.cell:nth-child(5)  { animation-delay: 0.20s; }
.cell:nth-child(6)  { animation-delay: 0.25s; }
.cell:nth-child(7)  { animation-delay: 0.30s; }
.cell:nth-child(8)  { animation-delay: 0.35s; }
.cell:nth-child(9)  { animation-delay: 0.40s; }
.cell:nth-child(10) { animation-delay: 0.45s; }
.cell:nth-child(11) { animation-delay: 0.50s; }
.cell:nth-child(12) { animation-delay: 0.55s; }
.cell:nth-child(13) { animation-delay: 0.60s; }
.cell:nth-child(14) { animation-delay: 0.65s; }

.cell:hover {
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
	transform: translateY(1px);
}

.cell--accent {
	background: var(--primary);
	box-shadow: 0 2px 6px rgba(205, 55, 0, 0.3);
}

.cell--dark { background: var(--main); }

.cell--stat,
.cell--link,
.cell--now,
.cell--col {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.cell--rule-red { border-left: 3px solid var(--primary); }
.cell--rule-dark { border-left: 3px solid var(--main); }

/* ----- The name — masthead display ----- */
.name {
	font-family: var(--font-display);
	font-size: clamp(64px, 11vw, 150px);
	font-weight: var(--weight-display);
	text-transform: uppercase;
	line-height: 0.86;
	letter-spacing: 0.01em;
	color: var(--main);
	margin: 0;
	min-width: 0; /* flex child: allow shrinking so the name can wrap */
}

.name em {
	font-style: normal;
	color: var(--primary);
}

/* ----- Display words (smaller cells) ----- */
.display {
	font-family: var(--font-display);
	font-size: clamp(34px, 4.6vw, 58px);
	font-weight: var(--weight-display);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 0.9;
	color: var(--main);
}

.cell--accent .display { color: var(--bg); }

/* ----- Voice (bio quips, NOW) — Operator/Archer slot ----- */
.voice {
	font-family: var(--font-voice);
	font-size: clamp(13px, 1.4vw, 17px);
	font-weight: var(--weight-voice);
	font-style: var(--style-voice);
	line-height: 1.45;
	color: var(--main);
}

.now__label {
	font-family: var(--font-sc);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--primary);
	display: block;
	margin-bottom: 4px;
}

.now__text {
	font-family: var(--font-voice);
	font-size: clamp(13px, 1.3vw, 16px);
	font-weight: var(--weight-voice);
	line-height: 1.4;
	color: var(--main);
}

.now__text a { color: inherit; text-decoration: none; }
.now__text a:hover { color: var(--primary); }

/* ----- Serif quips — Sentinel continuity ----- */
.quip {
	font-family: var(--font-serif);
	font-size: clamp(14px, 1.5vw, 18px);
	font-weight: 400;
	font-style: italic;
	line-height: 1.35;
	color: var(--main);
}

.quip a, .voice a { color: inherit; text-decoration: none; }

/* ----- Stats ----- */
.stat { text-decoration: none; display: block; }
.stat:hover .stat__num { opacity: 0.7; }

.stat__num {
	font-family: var(--font-serif);
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--main);
	display: block;
	line-height: 1;
}

.stat__lbl {
	font-family: var(--font-sans);
	font-size: 9px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--secondary);
	display: block;
	margin-top: 3px;
}

.cell--dark .stat__num, .cell--accent .stat__num { color: var(--bg); }
.cell--dark .stat__lbl { color: #999; }
.cell--accent .stat__lbl { color: rgba(255, 255, 255, 0.7); }

/* ----- Links ----- */
.linkcard__pre {
	font-family: var(--font-sc);
	font-size: 8px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--primary);
	display: block;
	margin-bottom: 3px;
}

.linkcard a {
	font-family: var(--font-serif);
	font-size: clamp(14px, 1.4vw, 17px);
	font-weight: 700;
	color: var(--main);
	text-decoration: none;
}

.linkcard a:hover { color: var(--primary); }

/* ----- Social rail ----- */
.social__label {
	font-family: var(--font-sc);
	font-size: 8px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--primary);
	display: block;
	margin-bottom: 3px;
}

.social__links a {
	font-family: var(--font-serif);
	font-size: clamp(13px, 1.3vw, 15px);
	font-weight: 700;
	color: var(--main);
	text-decoration: none;
}

.social__links a:hover { color: var(--primary); }

.social__sep { color: var(--secondary); }

/* ----- Latest post (live) ----- */
.latest__label {
	font-family: var(--font-sc);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bg);
	opacity: 0.75;
	display: block;
	margin-bottom: 4px;
}

.latest a {
	font-family: var(--font-serif);
	font-size: clamp(15px, 1.6vw, 20px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--bg);
	text-decoration: none;
}

.latest a:hover { text-decoration: underline; }

/* ----- Credits ----- */
.credit {
	font-family: var(--font-sc);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--secondary);
	line-height: 1.5;
}

/* ----- Books ----- */
.books {
	display: flex;
	gap: var(--gap);
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	text-decoration: none;
}

.books img { width: 56px; height: auto; display: block; }

/* ----- Logo ----- */
.cell--logo {
	padding: 0;
	background: none;
	box-shadow: none;
	align-items: flex-end;
	justify-content: flex-end;
	cursor: pointer;
}

.cell--logo:hover { box-shadow: none; transform: none; }

.cell--logo img {
	width: 96px;
	/* never wider than the grid column — a fixed 96px bled over the
	   neighboring cell when the logo column shrank below it */
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* =====================================================================
   Feature Spread treatments (ported from example.css, 2026-06-09)
   ===================================================================== */

/* ----- Feature: kicker / head / deck ----- */
.mag__kick {
	font-family: var(--font-sc);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--primary);
}

.mag__head {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	text-transform: uppercase;
	font-size: clamp(40px, 5.4vw, 70px);
	line-height: 0.9;
	margin: 6px 0 8px;
	color: var(--main);
}

.mag__deck {
	font-family: var(--font-voice);
	font-style: var(--style-voice);
	font-weight: var(--weight-voice);
	font-size: clamp(14px, 1.5vw, 17px);
	line-height: 1.5;
	color: var(--secondary);
}

/* ----- Drop-cap bio ----- */
.drop {
	margin: 0;
	font-family: var(--font-voice);
	font-weight: var(--weight-voice);
	font-size: clamp(14px, 1.5vw, 17px);
	line-height: 1.55;
	color: var(--main);
}

.drop__cap {
	float: left;
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: clamp(64px, 7vw, 96px);
	line-height: 0.7;
	padding: 8px 12px 0 0;
	color: var(--primary);
	text-transform: uppercase;
}

/* ----- Ticket stub ----- */
.ticket {
	display: block;
	width: 100%;
	border: 2px dashed var(--main);
	border-radius: 6px;
	padding: 12px 16px;
	position: relative;
	text-decoration: none;
}

.ticket::before,
.ticket::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	background: var(--bg);
	border-radius: 50%;
	transform: translateY(-50%);
}

.ticket::before { left: -9px; box-shadow: inset -1px 0 0 var(--main); }
.ticket::after { right: -9px; box-shadow: inset 1px 0 0 var(--main); }

.ticket__adm {
	display: block;
	font-family: var(--font-sc);
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--primary);
}

.ticket__ev {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	text-transform: uppercase;
	font-size: clamp(18px, 2.2vw, 28px);
	line-height: 1;
	color: var(--main);
	margin-top: 4px;
}

.ticket__no {
	display: block;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 10px;
	color: var(--secondary);
	margin-top: 6px;
}

a.ticket:hover .ticket__ev { color: var(--primary); }

/* ----- Badge pills ----- */
.c-pills {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	align-content: center;
}

.pill {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
}

.pill--o { border: 1.5px solid var(--main); color: var(--main); }
.pill--f { background: var(--main); color: var(--bg); }
.pill--r { background: var(--primary); color: var(--bg); }

/* ----- Reverse knockout (accent cell) ----- */
.c-knock {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.knock__w {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	text-transform: uppercase;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 0.86;
	color: var(--bg);
}

.knock__s {
	font-family: var(--font-sc);
	font-size: 8px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 6px;
}

/* ----- Ghost numeral ----- */
.c-ghost {
	position: relative;
	overflow: hidden;
	justify-content: flex-end;
}

.ghost__num {
	position: absolute;
	right: -6px;
	top: -26px;
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: clamp(120px, 16vw, 210px);
	line-height: 1;
	color: var(--main);
	opacity: 0.06;
	pointer-events: none;
}

.ghost__lbl {
	/* block: these spans sit inside the ghost__link anchor, not the flex cell */
	display: block;
	font-family: var(--font-sc);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--primary);
}

.ghost__big {
	display: block;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 30px);
	color: var(--main);
	margin-top: 2px;
}

.ghost__link { display: block; width: 100%; color: inherit; text-decoration: none; }
.ghost__link:hover .ghost__big { color: var(--primary); }

/* ----- Dateline rule ----- */
.dateline {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.dateline::before,
.dateline::after {
	content: "";
	flex: 1;
	height: 1.5px;
	background: var(--main);
}

.dateline__lbl {
	font-family: var(--font-sc);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--main);
	white-space: nowrap;
	/* never clip mid-letter in a narrow cell — ellipsis instead */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ----- Audit mode (?audit, dev-only): every pool item as its own cell —
       neutralize the area grid so same-area cells don't stack ----- */
.audit .cover__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: none;
	grid-auto-rows: minmax(150px, auto);
	grid-template-areas: none;
}

.audit .cell { grid-area: auto !important; }

/* ----- Variant HUD (dev-only A/B control) ----- */
.hud {
	position: fixed;
	bottom: 10px;
	left: 10px;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.05em;
	color: var(--bg);
	background: rgba(71, 71, 71, 0.92);
	padding: 6px 10px;
	border-radius: var(--radius);
	z-index: 9;
	user-select: none;
}

.hud b { color: #ffb38a; font-weight: 600; }

/* ----- Area assignments (Feature Spread) ----- */
.c-name   { grid-area: name; }
.c-ticket { grid-area: ticket; }
.c-now    { grid-area: now; }
.c-disp   { grid-area: disp; }
.c-mag    { grid-area: mag; }
.c-drop   { grid-area: drop; }
.c-pills  { grid-area: pills; }
.c-knock  { grid-area: knock; }
.c-ghost  { grid-area: ghost; }
.c-date   { grid-area: date; }
.c-social { grid-area: social; }
.c-latest { grid-area: latest; }
.c-logo   { grid-area: logo; }

/* ----- Narrow grid window (821–900px): same areas, smaller type ----- */
@media (max-width: 900px) and (min-width: 821px) {
	.name { font-size: clamp(56px, 11vw, 96px); }
	.mag__head { font-size: clamp(30px, 5vw, 44px); }
	.ghost__num { font-size: clamp(100px, 18vw, 150px); }
}

/* ----- Tablet (561–820px): re-dealt 6-col map — same cells, new geometry,
       variety preserved (2-row features, 2-row ghost, mixed widths) ----- */
@media (max-width: 820px) and (min-width: 561px) {
	.cover__grid {
		grid-template-rows: repeat(6, minmax(min-content, 1fr));
		grid-template-areas:
			"name   name   name   name   ticket ticket"
			"mag    mag    mag    now    now    now"
			"mag    mag    mag    disp   disp   disp"
			"drop   drop   drop   drop   ghost  ghost"
			"knock  knock  pills  pills  date   date"
			"social social latest latest logo   logo";
	}

	.name { font-size: clamp(48px, 11vw, 80px); }
	.mag__head { font-size: clamp(30px, 5.5vw, 42px); }
	.ghost__num { font-size: clamp(90px, 16vw, 130px); }
	/* dateline sits in a 1-col cell here — tighter type so it never ellipsizes */
	.dateline__lbl { font-size: 9px; letter-spacing: 0.12em; }
}

/* ----- Phone (≤560px): 2-col rhythm — full-width features alternating
       with paired small cells, not a flat stack ----- */
@media (max-width: 560px) {
	.cover { padding: 10px; }

	.cover__grid {
		gap: 6px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-template-areas:
			"name   name"
			"ticket ticket"
			"now    disp"
			"mag    mag"
			"drop   drop"
			"knock  ghost"
			"pills  pills"
			"date   social"
			"latest latest"
			"logo   logo";
	}

	.cell { min-height: 92px; }
	.c-name { min-height: 120px; }
	.c-mag, .c-drop { min-height: 150px; }

	.name { font-size: clamp(44px, 14vw, 72px); }
	.mag__head { font-size: clamp(32px, 9vw, 44px); }
	.ghost__num { font-size: 100px; }
	.cell--logo img { width: 80px; }
}