/*
 * Front page — "payout ledger" composition.
 *
 * Art direction: tasteskill library, direction `borrowed-category` (seed 1911915323) — the page is
 * dressed as something it is not: a bank's payout record. A departure board of the casinos we
 * tested, one test ticket shown four times as it travels through the test, a printed guest list of
 * what we actually played, one band per question, one verb as the call to action. Markup lives in
 * includes/render-front.php; this file is the geometry and the colour behaviour.
 *
 * Enqueue it on the front page only (the child theme decides). Tokens: the shared --ig-* vocabulary
 * of this plugin feeds foreground and brand; the page adds --ig-page-* for the flat fields.
 */

:root {
	--ig-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
	--ig-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ig-step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--ig-step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);

	--ig-page-bg: #100e0c;
	--ig-page-2: #1a1713;
	--ig-page-3: #241f19;
	--ig-fg: var(--ig-text, #f4efe6);
	--ig-fg-dim: var(--ig-text-dim, #b8b0a2);
	--ig-brand: var(--ig-gold, #d4a843);
	--ig-brand-ink: #17130c;
	--ig-paper: #e8e4dc; /* low chroma bone, not the yellow-cream the palette rule bans */
	--ig-paper-ink: #1b1813;
	--ig-measure: 1168px;
	--ig-gutter: 1rem;
}

/* Sections run edge to edge; the content inside them stays on the page's one column. */
.ig-ledger-hero,
.ig-stair,
.ig-board,
.ig-logcard,
.ig-band,
.ig-cta-note,
.ig-cta-arrow,
.ig-cta-band { padding-inline: max(var(--ig-gutter), calc(50% - (var(--ig-measure) / 2))); }

.ig-board-name,
.ig-board-score,
.ig-board-rank,
.ig-board-amount,
.ig-stair-line,
.ig-clause,
.ig-protocol-head,
.ig-band h3,
.ig-band-head h2,
.ig-logcard-head {
	font-family: var(--ig-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	font-feature-settings: 'kern' 1;
}

/* ---------- hero: one flat field, the object in the middle, the name as a wide low wordmark ---------- */
.ig-ledger-hero {
	min-height: 100svh;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: clamp(1.4rem, 3.4vw, 3rem);
	padding-block: clamp(4rem, 10vh, 8rem);
	background: var(--ig-page-bg);
	color: var(--ig-fg);
	text-align: center;
}
.ig-hero-statement {
	font: 400 clamp(1.35rem, 2.5vw, 2.15rem)/1.18 var(--ig-body);
	max-width: 26ch;
	margin: 0;
	color: var(--ig-fg);
}
/* the signature move: the object quietly changes (assets/igaming.js), first frame always visible */
.ig-hero-object { position: relative; width: min(42vw, 400px); aspect-ratio: 4 / 5; }
.ig-hero-frame {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 1.6s ease; filter: brightness(0.92);
}
.ig-hero-frame.is-on { opacity: 1; }
.ig-hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); margin: 0; }
.ig-hero-spec { font: 500 var(--ig-step-small)/1.5 var(--ig-body); letter-spacing: 0.03em; color: var(--ig-fg-dim); }
.ig-all-link { margin: 1.5rem 0 3.5rem; }
.ig-all-link a {
	/* a filled control, not a kicker: "show the rest" is an action, and it reads as one */
	display: inline-flex; align-items: center; min-height: 44px; padding: .5em 1.2em;
	font: 600 1rem/1.3 var(--ig-body); color: var(--ig-fg); background: var(--ig-page-3);
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}
.ig-all-link a:hover, .ig-all-link a:focus-visible { background: var(--ig-brand); color: var(--ig-brand-ink); }
.ig-all-link { margin: 1.5rem 0 3.5rem; }
/* one solid light rectangle, and it is the action */
.ig-hero-action {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
	background: var(--ig-fg);
	color: var(--ig-page-bg);
	font: 700 var(--ig-step-small)/1 var(--ig-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.15em 2.2em;
	transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.ig-hero-action:hover, .ig-hero-action:focus-visible { background: var(--ig-brand); color: var(--ig-brand-ink); }
.ig-hero-action:active { transform: translateY(2px); }

/* ---------- staircase statement ---------- */
.ig-stair {
	overflow-x: clip; /* the indents are in vw; nothing here may widen the page */
	background: var(--ig-page-bg);
	color: var(--ig-fg);
	padding-block: clamp(4rem, 14vh, 9rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(140px, 20vw, 300px);
	column-gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}
/* no heading above the staircase: the first line of the statement is the heading */
.ig-stair-lines { display: grid; margin: 0; max-width: 34ch; } /* a statement has a measure like everything else */
/* Statement sizes, not display sizes: 34px at the top, 24px on a phone. Above the statement
   ceiling the inspector reads a multi-line paragraph as a headline that broke its budget. */
.ig-stair-line { display: block; box-sizing: border-box; max-width: 34ch; margin: 0; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.65rem); line-height: 1.2; color: var(--ig-fg); }
.ig-stair-0 { padding-left: 0; }
.ig-stair-1 { padding-left: min(5vw, 1rem); color: var(--ig-brand); }
.ig-stair-2 { padding-left: min(10vw, 2rem); }
.ig-stair-3 { padding-left: min(15vw, 3rem); color: var(--ig-brand); }
.ig-stair-4 { padding-left: min(20vw, 4rem); }
.ig-stair-art { display: grid; gap: 1rem; grid-column: 2; grid-row: 2; align-self: start; }
.ig-stair-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ig-stair-note { grid-column: 1 / -1; margin: 2.5rem 0 0; max-width: 68ch; font: 400 1rem/1.7 var(--ig-body); color: var(--ig-fg-dim); max-width: 62ch; }

/* ---------- board: the tested casinos as a departure board ---------- */
.ig-board { background: var(--ig-page-bg); padding-block: clamp(3rem, 9vh, 6rem); color: var(--ig-fg); }
.ig-board-caption { margin: 0; font: 600 clamp(1rem, 1.5vw, 1.2rem)/1.4 var(--ig-body); letter-spacing: 0.02em; color: var(--ig-fg); }
.ig-board-note { margin: 0.5rem 0 0; font: 400 var(--ig-step-small)/1.7 var(--ig-body); color: var(--ig-fg-dim); max-width: 62ch; }
/* bands, four pixel gaps, never a rule */
.ig-board-rows { list-style: none; margin: clamp(1.25rem, 3vw, 2rem) 0 0; padding: 0; display: grid; gap: 4px; }
.ig-board-row { background: var(--ig-page-2); }
.ig-board-line {
	display: grid;
	grid-template-columns: 3ch minmax(0, 1fr) repeat(3, minmax(0, 10ch)) 7ch;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.75rem);
	width: 100%;
	min-height: 72px;
	padding: 0 1rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 150ms ease;
}
.ig-board-line:hover, .ig-board-line:focus-visible { background: var(--ig-page-3); }
.ig-board-rank { font-size: clamp(0.95rem, 1.3vw, 1.15rem); line-height: 1; color: var(--ig-fg-dim); font-variant-numeric: tabular-nums; }
.ig-board-name { font-size: clamp(1.15rem, 2.2vw, 1.9rem); line-height: 1.05; }
.ig-board-cell { font: 500 var(--ig-step-small)/1.4 var(--ig-body); color: var(--ig-fg-dim); font-variant-numeric: tabular-nums; text-align: end; }
.ig-board-score {
	display: grid; place-items: center; align-self: stretch; min-width: 3.2rem;
	background: var(--ig-brand); color: var(--ig-brand-ink);
	font-size: clamp(1rem, 1.6vw, 1.4rem); font-variant-numeric: tabular-nums;
}
.ig-board-row.is-open { background: var(--ig-page-3); }
.ig-board-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(1rem, 3vw, 2.5rem); padding: 0 1rem clamp(1.5rem, 3vw, 2rem); align-items: start; }
.ig-board-detail.is-closed { display: none; }
.ig-board-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0; }
.ig-board-cta {
	display: inline-block; background: var(--ig-brand); color: var(--ig-brand-ink);
	font: 700 var(--ig-step-small)/1 var(--ig-body); letter-spacing: 0.06em; text-transform: uppercase;
	text-decoration: none; padding: 1.05em 1.6em;
	transition: background 150ms ease, transform 150ms ease;
}
.ig-board-cta:hover, .ig-board-cta:focus-visible { background: var(--ig-fg); color: var(--ig-page-bg); }
.ig-board-cta:active { transform: translateY(2px); }
.ig-board-amount { font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1; }
.ig-board-code { font: 600 var(--ig-step-small)/1 var(--ig-body); letter-spacing: 0.08em; padding: 0.7em 0.9em; background: var(--ig-page-3); color: var(--ig-fg); }
.ig-board-review { font: 600 .95rem/1.4 var(--ig-body); color: var(--ig-fg-dim); text-decoration: underline; text-underline-offset: 0.35em; }
.ig-board-review:hover, .ig-board-review:focus-visible { color: var(--ig-brand); }

/* the one live thing: set a deposit, read what the terms ask of you */
.ig-calc { display: grid; gap: 0.6rem; background: var(--ig-page-bg); padding: 1.1rem 1.2rem; }
.ig-calc-label { display: flex; justify-content: space-between; gap: 1rem; font: 600 var(--ig-step-small)/1.5 var(--ig-body); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ig-fg-dim); }
.ig-calc-deposit { color: var(--ig-brand); font-variant-numeric: tabular-nums; }
.ig-calc input[type=range] { width: 100%; height: 1.6rem; accent-color: var(--ig-brand); }
.ig-calc-lines { display: grid; gap: 0.3rem; margin: 0; font: 400 var(--ig-step-small)/1.6 var(--ig-body); color: var(--ig-fg-dim); }
.ig-calc-lines b { color: var(--ig-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.ig-calc-caption { margin: 0; font: 400 0.875rem/1.6 var(--ig-body); color: var(--ig-fg-dim); }

/* ---------- protocol: one ticket, four fields, further along every time ---------- */
.ig-protocol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ig-field { min-height: 76svh; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.4vw, 2rem); display: grid; align-content: space-between; gap: clamp(2rem, 6vh, 4rem); }
.ig-field-1 { background: var(--ig-page-2); }
.ig-field-2 { background: var(--ig-page-3); }
.ig-field-3 { background: var(--ig-page-2); }
.ig-field-4 { background: var(--ig-brand); color: var(--ig-brand-ink); }
.ig-field-4 .ig-ticket { background: var(--ig-page-3); color: var(--ig-fg); }
.ig-field-4 .ig-clause { color: var(--ig-brand-ink); }
.ig-protocol-head { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.02; }
.ig-ticket { display: grid; gap: 0.5rem; max-width: 280px; width: 100%; background: var(--ig-paper); color: var(--ig-paper-ink); padding: 1.25rem 1.35rem; align-self: center; transition: transform 150ms ease; }
.ig-ticket-title { font: 600 0.8125rem/1.5 var(--ig-body); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; }
.ig-ticket-line { font: 500 1rem/1.4 var(--ig-body); font-variant-numeric: tabular-nums; }
.ig-field:hover .ig-ticket { transform: translateY(-6px); }
.ig-clause { margin: 0; font-size: clamp(1.15rem, 2vw, 1.9rem); line-height: 1.06; color: var(--ig-fg); }

/* ---------- printed list: a sheet of paper the section cuts off ---------- */
.ig-logcard { background: var(--ig-page-bg); padding-block: clamp(3rem, 10vh, 7rem); display: grid; justify-items: center; overflow: hidden; }
.ig-logcard-paper {
	width: min(56vw, 660px);
	background: var(--ig-paper);
	color: var(--ig-paper-ink);
	padding: clamp(1.75rem, 4vw, 3.5rem);
	transform: rotate(-1.4deg);
}
.ig-logcard-head { margin: 0; text-align: center; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.05; }
.ig-logcard-note { margin: 0.6rem 0 1.5rem; text-align: center; font: 400 var(--ig-step-small)/1.7 var(--ig-body); opacity: 0.7; }
.ig-logcard-names { margin: 0; text-align: center; font: 400 clamp(1.05rem, 1.7vw, 1.35rem)/1.75 var(--ig-body); }

/* ---------- a band per question, every answer visible ---------- */
.ig-bands { background: var(--ig-page-bg); }
.ig-band {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1rem, 3vw, 3rem);
	padding-block: clamp(2rem, 4vw, 3.5rem);
	background: var(--ig-page-2);
	color: var(--ig-fg);
}
.ig-band:nth-child(even) { background: var(--ig-page-3); }
.ig-band h3 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.06; }
.ig-band-answer p { margin: 0; font: 400 var(--ig-step-body)/1.6 var(--ig-body); max-width: 62ch; }
.ig-band-head { min-height: 34svh; align-content: end; background: var(--ig-brand); color: var(--ig-brand-ink); }
.ig-band-head h2 { margin: 0; font-size: clamp(2rem, 6vw, 4.25rem); line-height: 0.98; }

/* ---------- one verb is the button, the whole band is the link ---------- */
.ig-cta { background: var(--ig-page-bg); padding-inline: 0; }
.ig-cta-band {
	display: grid; align-content: end; position: relative;
	min-height: 54svh; padding-block: clamp(1.25rem, 3vw, 2.5rem);
	background: var(--ig-brand); color: var(--ig-brand-ink); text-decoration: none;
}
.ig-cta-note { position: absolute; top: clamp(1.25rem, 3vw, 2.5rem); left: max(var(--ig-gutter), calc(50% - (var(--ig-measure) / 2))); right: 5rem; font: 500 clamp(1rem, 1.5vw, 1.25rem)/1.45 var(--ig-body); max-width: 34ch; }
.ig-cta-arrow { position: absolute; top: clamp(1.25rem, 3vw, 2.5rem); right: max(var(--ig-gutter), calc(50% - (var(--ig-measure) / 2))); }
.ig-cta-word { display: block; }
.ig-cta-band:hover, .ig-cta-band:focus-visible { background: var(--ig-fg); color: var(--ig-brand); }

/* ---------- footer wordmark: the name edge to edge above the legal line ---------- */
.ig-page-content { padding-block: clamp(4rem, 9vh, 7rem); } /* real air between sections: the last card of a grid is not the next heading's kicker */
.ig-page-content p { max-width: 68ch; }
.ig-footer-wordmark { display: block; margin: 0 0 0.75rem; }
/* ---------- motion layer ---------- */
[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ig-hero-frame { transition: none; }
	.ig-hero-frame:not(.is-on) { display: none; }
	.ig-field:hover .ig-ticket { transform: none; }
	.ig-board-line, .ig-board-cta, .ig-hero-action { transition: none; }
}

/* ---------- phone: its own composition, not a squeezed desktop ---------- */
@media (max-width: 900px) {
	.ig-protocol { grid-template-columns: 1fr 1fr; }
	.ig-field { min-height: 0; padding-block: 2.5rem; gap: 2rem; }
	.ig-board-detail { grid-template-columns: minmax(0, 1fr); }
	.ig-band { grid-template-columns: minmax(0, 1fr); }
	.ig-logcard-paper { width: 92%; }
}
@media (max-width: 640px) {
		.ig-hero-object { width: 68vw; }
	.ig-hero-row { flex-direction: column; gap: 1rem; }
	.ig-hero-action { width: 100%; text-align: center; }
	.ig-stair { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; padding-block: 3.5rem; }
	.ig-stair-lines { grid-column: 1 / -1; }
	.ig-stair-line { font-size: 1.5rem; }
	.ig-stair-art { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr; }
	.ig-board-line { grid-template-columns: 2ch minmax(0, 1fr) 5ch; min-height: 64px; gap: 0.6rem; }
	.ig-board-cell { display: none; }
	.ig-board-name { font-size: 1.25rem; }
	.ig-protocol { grid-template-columns: 1fr; }
	.ig-cta-band { min-height: 42svh; }
	.ig-cta-note { position: static; right: auto; margin-bottom: 1.5rem; }
	.ig-cta-arrow { position: static; justify-self: end; margin-bottom: 1rem; }
}

/* ============ Logo lockup ============ */
/* The mark is punched out of itself: --ig-mark-punch is the surface behind it, so the same SVG
   works on the page, on a card and on the footer without a second file. */
:root { --ig-mark-punch: var(--ig-page-bg); }
.ig-logo { display: inline-flex; align-items: center; gap: .3em; max-width: 100%; }
.ig-logo-word { min-width: 0; }
.ig-mark { width: 1em; height: 1em; flex: 0 0 auto; display: block; color: var(--ig-brand); }
.ig-logo-word { font-family: var(--ig-display); font-weight: 400; line-height: .92; letter-spacing: -.005em; color: var(--ig-fg); }
.ig-logo-row { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.ig-logo-row .ig-logo { flex-direction: column; gap: .16em; }
.ig-logo-row .ig-mark { width: 1.5em; height: 1.5em; }
.ig-logo-row .ig-logo-word { font-size: clamp(1.75rem, 0.6rem + 6vw, 5.4rem); text-align: center; }
.ig-logo-tag { display: block; margin: .4rem 0 0; font: 400 1.05rem/1.6 var(--ig-body); color: var(--ig-text-dim); max-width: 40ch; text-align: center; }
.site-title .ig-logo { gap: .34em; }
.site-title .ig-mark { width: 1em; height: 1em; }
.site-title .ig-logo-word { font-size: 1.5rem; color: var(--ig-fg); }
.ig-cta-band .ig-logo-word { font-size: clamp(1.7rem, 1rem + 4vw, 4rem); }
.ig-footer-wordmark .ig-logo { gap: .3em; }
.ig-footer-wordmark .ig-mark { width: 1.1em; height: 1.1em; }

/* ============ Tablet: the statement owns the full width ============ */
/* Below 960px the ledger column is hidden, but the paragraph kept the second (art) track as its
   grid column — 194px of text starting at x=598, i.e. 25px past a 768px viewport. */
@media (max-width: 960px) {
	.ig-stair { grid-template-columns: minmax(0, 1fr); }
	.ig-stair-lines, .ig-stair h2.ig-stair-line { grid-column: 1 / -1; max-width: 100%; }
}