/*
 * Block: sn/hero
 *
 * EXPRESSIVE REGISTER (see the two-register note at the top of base.css). This
 * is the page's poster: the biggest type on the site, a great deal of negative
 * space, and nothing else competing.
 *
 * IT IS NOT A CONTAINER ANY MORE, and that is the single biggest structural
 * change from the sibling skin. There the hero was a tonal stage with a 48px
 * radius — the shape WAS the separator. This system has no radius, no shadow
 * and no second surface tone worth spending (a #0F0F0F panel on a #0A0A0A page
 * is 1.14:1), so the hero sits OPEN on the page ground and is closed by a rule.
 * That is also the more faithful reading of the direction: "deliberate negative
 * space — white space isn't empty, it's the frame around your type." A box
 * around a headline is the opposite of that.
 *
 * WHAT IS DELIBERATELY NOT HERE:
 *
 *  - NO SCROLL PARALLAX. The direction specifies scale 1→1.2 with opacity 1→0
 *    on the hero as the reader scrolls. Fading out an H1 is exactly what the
 *    standing compliance ruling forbids — no page element may be covered,
 *    hidden or delayed (CLAUDE.md §7, and §12 2026-07-14, where an earlier
 *    scroll animation on this very block was removed for the same reason). It
 *    would also animate the LCP candidate. The hero is static.
 *
 *  - No hover-revealed content anywhere. Motion may change colour and position,
 *    never visibility.
 *
 *  - No decorative oversized ghost word behind the headline. The system offers
 *    it ("large muted text behind smaller bright text") and it is genuinely
 *    tempting here, but it needs a word to set, the only candidate is the
 *    keyword, and a giant "GAMSTOP" behind an H1 on a site about casinos
 *    outside GamStop is the last thing this build should print (CLAUDE.md §1).
 *
 * The intro clamp with a "Read more" toggle STAYS. It has been removed and
 * restored three times; the standing decision is that the money list has to
 * clear the fold on a phone, the full text remains in the DOM, and expandable
 * content is indexed normally by Google and is not cloaking.
 */

.xfce88d8e {
	position: relative;
	background: transparent;
	border: 0;
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	padding: var(--sn-sp-8) 0;
	margin: 0 0 var(--sn-sp-12);
	box-shadow: none;
}

.xc5eec05d {
	position: relative;
}

/* The tracked-out mono label with its leading accent bar — the same object as
   .xa1b57f43 in base.css. The sibling skin made this a tonal chip; there are
   no chips with fills here. */
.xb97404db {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	margin: 0 0 var(--sn-sp-6);
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sn-primary);
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
}

.xb97404db::before {
	content: '';
	flex: 0 0 auto;
	width: 32px;
	height: var(--sn-border-thick);
	background: var(--sn-primary);
}

/*
 * The headline. Weight 600 at the tightest tracking in the system — "Bold
 * Typography" is a scale instruction, not a weight instruction, and at 80px a
 * heavier cut closes Inter Tight's counters and reads smaller.
 */
.x9c900b4b {
	margin: 0 0 var(--sn-sp-6);
	font-size: clamp(2.5rem, 1.4rem + 4.2vw, var(--sn-fs-4xl));
	font-weight: 600;
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	text-wrap: balance;
}

.x143c6651 > :first-child { margin-top: 0; }
.x143c6651 > :last-child { margin-bottom: 0; }

/* The intro is the system's lead paragraph: one step up from body, generous
   line height, and a constrained measure so it reads as a stand-first. */
.x143c6651 {
	max-width: 54ch;
	font-size: var(--sn-fs-lead);
	line-height: 1.5;
}

/* Non-compact intro: clamped to 3 lines with the toggle (compact clamps to 2
   below) — full walls of intro text looked bad either way. */
.xfce88d8e:not(.xe9f0a699) .x143c6651 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xfce88d8e.is-expanded .x143c6651 {
	display: block;
	overflow: visible;
}

/*
 * Author byline (replaces the retired review-meta block). Set in mono, because
 * a publication date and a reviewer credit are metadata — the same register as
 * the breadcrumbs and the table heads. It is NOT uppercased: it carries proper
 * names, and "WRITTEN BY JULIA GRIGY" costs recognition for no gain.
 */
.x8e6e513e {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-sp-2) var(--sn-sp-6);
	margin-top: var(--sn-sp-8);
	padding-top: var(--sn-sp-4);
	border-top: var(--sn-border-w) solid var(--sn-border);
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	letter-spacing: var(--sn-tracking-wide);
	color: var(--sn-text-muted);
}

.x272e1b51 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	white-space: nowrap;
	flex: 0 0 auto; /* Never shrink — the row scrolls instead of overlapping. */
}

.x10a8e9ab {
	flex: 0 0 auto;
	border-radius: 0;
	object-fit: cover;
}

.x272e1b51 svg {
	width: 14px;
	height: 14px;
	color: var(--sn-primary);
}

.x8e6e513e a {
	color: var(--sn-heading);
	font-weight: 500;
	text-decoration-thickness: var(--sn-border-thick);
	text-underline-offset: .2em;
}

/* CTA + trust chips variant. */
.x909f88d0 {
	margin: var(--sn-sp-8) 0 0;
}

.xda19fe04 {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-sp-2);
	margin: var(--sn-sp-8) 0 0;
	padding: 0;
}

/* Bordered mono marks — the same object as .xc2439fd3 in base.css. */
.x9f46800e {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-2) var(--sn-sp-3);
	background: transparent;
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	font-family: var(--sn-font-mono);
	font-size: var(--sn-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-wide);
	color: var(--sn-heading);
}

.x9f46800e svg {
	width: 14px;
	height: 14px;
	color: var(--sn-primary);
}

.x04214f7e {
	margin: var(--sn-sp-8) 0 0;
}

.x04214f7e .x888e01ff {
	width: 100%;
}

@media (min-width: 768px) {
	.xfce88d8e {
		padding: var(--sn-sp-16) 0;
	}

	.xc5eec05d {
		display: flex;
		align-items: center;
		gap: var(--sn-sp-12);
	}

	.xcc47291e {
		flex: 1 1 58%;
		min-width: 0;
	}

	.x04214f7e {
		flex: 1 1 42%;
		margin: 0;
	}
}

/* ---------- Compact mode ---------- */
/*
 * Compact is the DEFAULT. On this skin it is not a different container — there
 * is no container — it is the same open poster with a tighter vertical rhythm
 * and a smaller intro, so a casino list placed under it clears the fold.
 *
 * The fold is protected by layout, not by discarding content: the right column
 * only exists from 900px up (see the bottom of this file), and the image is
 * hidden below it.
 */

.xe9f0a699 {
	padding: var(--sn-sp-8) 0 var(--sn-sp-6);
	margin-bottom: var(--sn-sp-8);
	background: transparent;
	border: 0;
	border-bottom: var(--sn-border-w) solid var(--sn-border);
	border-radius: 0;
	box-shadow: none;
}

.xe9f0a699 .xcc47291e {
	padding: 0;
}

/*
 * The single loudest piece of type on the site, and ONE EXPRESSION for every
 * viewport — see the long note further down about why there is no longer a
 * mobile override.
 *
 * Solved to pass through 32px at 375px and 72px at 1280px:
 *   0.96rem + 4.42vw  =>  375: 32.0   768: 49.3   900: 55.2   1280: 72.0 (cap)
 */
.xe9f0a699 .x9c900b4b {
	font-size: clamp(2rem, .96rem + 4.42vw, var(--sn-fs-4xl));
	color: var(--sn-heading);
}

.xe9f0a699 .x143c6651 {
	color: var(--sn-text);
}

.xe9f0a699 .x8e6e513e {
	gap: var(--sn-sp-2) var(--sn-sp-4);
	color: var(--sn-text-muted);
}

.xe9f0a699 .x8e6e513e a {
	color: var(--sn-heading);
}

.xe9f0a699 .x272e1b51 {
	border: 0;
	padding: 0;
	font-size: var(--sn-fs-xs);
	font-weight: 400;
}

.xe9f0a699 .x272e1b51 svg {
	color: var(--sn-primary);
}

/* Compact intro: clamped to 2 lines with a "Read more" toggle. The full text
   stays in the DOM — expandable content is indexed normally and is not
   cloaking (CLAUDE.md §12, 2026-07-14). */
.xe9f0a699 .x143c6651 {
	font-size: var(--sn-fs-md);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 479px) {
	.xe9f0a699 .x143c6651 {
		font-size: var(--sn-fs-base);
	}
}

.xe9f0a699.is-expanded .x143c6651 {
	display: block;
	overflow: visible;
}

/*
 * The "Read more" control is the design system's text button: no container, an
 * accent label, and an underline that is always present and grows on hover.
 * Padded to a 44px touch target; no negative margin is needed because the
 * button has no horizontal padding to pull back from, so it aligns optically
 * with the intro above it by itself.
 */
.x9ee588f9 {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	min-height: 44px;
	margin-top: var(--sn-sp-2);
	padding: var(--sn-sp-1) 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--sn-primary);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--sn-tracking-label);
	cursor: pointer;
	transition: color var(--sn-motion-fast) var(--sn-ease);
}

.x9ee588f9::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--sn-sp-2);
	height: var(--sn-border-thick);
	background: currentColor;
	transform-origin: left center;
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

.x9ee588f9:hover,
.x9ee588f9:focus {
	background: none;
	color: var(--sn-primary-hover);
}

.x9ee588f9:hover::after,
.x9ee588f9:focus::after {
	transform: scaleX(1.1);
}

.x9ee588f9:active {
	transform: translateY(1px);
}

.x9ee588f9 svg {
	width: 14px;
	height: 14px;
	transition: transform var(--sn-motion-fast) var(--sn-ease);
}

.xe9f0a699.is-expanded .x9ee588f9 svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.x9ee588f9,
	.x9ee588f9:active,
	.x9ee588f9 svg,
	.x9ee588f9::after,
	.x9ee588f9:hover::after,
	.x9ee588f9:focus::after {
		transform: none;
		transition: none;
	}
}

/* Compact mobile: the byline scrolls sideways instead of stacking. */
.xe9f0a699 .x8e6e513e {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.xe9f0a699 .x8e6e513e::-webkit-scrollbar {
	display: none;
}

/* ---------- Trust rail ---------- */

.xe9f0a699 .x8e058b90 {
	margin: var(--sn-sp-6) 0 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.xe9f0a699 .xda19fe04 {
	margin: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.xe9f0a699 .xda19fe04::-webkit-scrollbar {
	display: none;
}

/* Mobile / strip form: a scrolling row of bordered marks. The hero has no fill
   of its own on this skin, so the chips sit on the page ground and their
   --sn-border-strong edge (4.18:1) is what makes them read as objects. */
.xe9f0a699 .x9f46800e {
	flex: 0 0 auto;
	white-space: nowrap;
	background: transparent;
	border: var(--sn-border-w) solid var(--sn-border-strong);
	border-radius: 0;
	color: var(--sn-heading);
	font-size: var(--sn-fs-xs);
}

.xe9f0a699 .x9f46800e svg {
	color: var(--sn-primary);
}

/* Compact hero renders no image below the split — there is no second column
   there, and the money list has to clear the fold. */
.xe9f0a699 .x04214f7e {
	display: none;
}

/* ---------- Phone/tablet: the headline scale ---------- */
/*
 * THERE IS NO MOBILE OVERRIDE HERE ANY MORE, AND THAT IS THE FIX.
 *
 * Every market in this family carried a `@media (max-width: 899px)` block with
 * its own clamp for this headline, each generation inheriting the structure and
 * re-tuning the numbers. The note attached to it claimed the two clamps met at
 * the 900px split "so there is no step at any width". MEASURED IN REAL CHROME,
 * that was false on this skin: the mobile ramp was pinned to its 4.5rem ceiling
 * from about 838px, while the desktop clamp evaluated to 61.8px at 900px — so
 * the headline went 72px at 899 and 61.8px at 900. A 10px DROP as the viewport
 * got WIDER, in the LCP element.
 *
 * Two clamps that must agree at a breakpoint are a standing invitation to that
 * bug: any change to either end re-opens it, and nothing in CSS enforces the
 * agreement. One clamp cannot disagree with itself, so the override is gone and
 * the single expression above covers 320px to 4K. Monotonic by construction.
 *
 * If a future pass needs a different mobile curve, change the slope and the
 * intercept of that one clamp — do not reintroduce a second one.
 */

/* ---------- Phone: the money list must break the fold ---------- */
/*
 * The rule this block exists to satisfy: on a 375x667 phone the first casino
 * card must be visible on load, and nothing may be hidden, delayed or covered
 * to achieve it (§7). The poster register is simply spent less lavishly on a
 * small screen — the H1 is still roughly twice the body size and three times
 * the byline.
 *
 * Test any change to the clamp against the LONGEST heading in CLAUDE.md §9,
 * not a short one: a heading that wraps to four lines gives the pixels
 * straight back.
 */
@media (max-width: 767px) {
	.xe9f0a699 {
		padding: var(--sn-sp-4) 0 var(--sn-sp-3);
		margin: 0 0 var(--sn-sp-4);
	}

	.xe9f0a699 .xb97404db {
		margin-bottom: var(--sn-sp-3);
	}

	.xe9f0a699 .x9c900b4b {
		margin-bottom: var(--sn-sp-4);
	}

	.x9ee588f9 {
		margin-top: var(--sn-sp-1);
	}

	.xe9f0a699 .x8e6e513e {
		margin-top: var(--sn-sp-4);
		padding-top: var(--sn-sp-3);
	}

	/* The avatar is what sets the byline row's height, so it is the only place
	   left in that row worth a pixel. 22px still reads as a face at 1x. */
	.xe9f0a699 .x10a8e9ab {
		width: 22px;
		height: 22px;
	}

	/* Tighter marks, same 12px label — the chips lose padding, not legibility. */
	.xe9f0a699 .x9f46800e {
		padding: var(--sn-sp-1) var(--sn-sp-2);
	}

	.xe9f0a699 .x8e058b90,
	.xe9f0a699 .x909f88d0,
	.xe9f0a699 .xda19fe04 {
		margin-top: var(--sn-sp-4);
	}
}

/*
 * SMALLEST PHONES ONLY, AND THE ORDER OF THIS BLOCK IS LOAD-BEARING.
 *
 * It must come AFTER the max-width:767px block above, not before it. The first
 * attempt put it up beside the compact-intro rules earlier in this file, where
 * it did nothing at all: both rules are the same specificity, both media
 * queries match at 320px, and the later one wins — so the sp-3 above silently
 * overrode this sp-2 and the measurement did not move. A dead rule that looks
 * live is worse than no rule.
 */
@media (max-width: 479px) {
	.xe9f0a699 .xb97404db {
		margin-bottom: var(--sn-sp-2);
	}

	.xe9f0a699 .x9c900b4b {
		margin-bottom: var(--sn-sp-3);
	}
}

@media (min-width: 768px) {
	.xe9f0a699 .x8a76cf85 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--sn-sp-4) var(--sn-sp-6);
	}
}

/* ---------- Compact layout: the split appears at 900px ---------- */

@media (min-width: 900px) {
	.xe9f0a699 .xc5eec05d {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--sn-sp-16);
		align-items: center;
	}

	/* With neither image nor rail there is no right column, so the grid
	   collapses — otherwise an empty gutter pushes the headline off-centre. */
	.xe9f0a699:not(.xacb4858a):not(.xeb72b77c) .xc5eec05d {
		display: block;
	}

	.xe9f0a699 .x04214f7e {
		display: block;
		grid-column: 2;
		margin: 0;
	}

	/* A hairline frame, matching every other content image in the theme. The
	   artwork is generated on the page ground (img-prompt.md), so the rule is
	   what separates the picture from the page rather than a change of tone. */
	.xe9f0a699 .x04214f7e img {
		display: block;
		width: 100%;
		height: auto;
		border: var(--sn-border-w) solid var(--sn-border-strong);
		border-radius: 0;
	}

	/* THE IMAGE WINS THE RIGHT COLUMN. When both exist the chips drop under the
	   body text as a strip rather than being thrown away. */
	.xe9f0a699.xacb4858a .x8e058b90 {
		grid-column: 1;
		grid-row: 2;
		margin-top: var(--sn-sp-6);
	}

	/* Rail alone: a bordered region in the right column, chips as a stacked
	   checklist. */
	.xe9f0a699.xeb72b77c:not(.xacb4858a) .x8e058b90 {
		grid-column: 2;
		margin: 0;
		padding: var(--sn-sp-6);
		background: transparent;
		border: var(--sn-border-w) solid var(--sn-border);
		border-radius: 0;
		box-shadow: none;
	}

	.xe9f0a699.xeb72b77c:not(.xacb4858a) .xda19fe04 {
		flex-direction: column;
		align-items: stretch;
		overflow: visible;
		gap: var(--sn-sp-4);
	}

	/* In checklist form the marks lose their boxes and become plain lines of
	   text behind a tick — a column of eight outlined chips reads as a form. */
	.xe9f0a699.xeb72b77c:not(.xacb4858a) .x9f46800e {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
		font-family: var(--sn-font);
		font-size: var(--sn-fs-base);
		font-weight: 400;
		text-transform: none;
		color: var(--sn-text);
		letter-spacing: var(--sn-tracking-body);
		white-space: normal;
	}

	.xe9f0a699.xeb72b77c:not(.xacb4858a) .x9f46800e svg {
		box-sizing: content-box;
		width: 18px;
		height: 18px;
		padding: 0;
		margin-top: .1em;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--sn-primary);
	}
}