/*
 * 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: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', 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-mast-hero,
.ig-stair,
.ig-board,
.ig-logcard,
.ig-band,
.ig-cta-note,
.ig-cta-arrow,
.ig-trust,
.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: 700;
	text-transform: none; /* capitals on a display face are the poster look we are leaving */
	letter-spacing: -0.015em;
	font-feature-settings: 'kern' 1;
}

/* ---------- hero: one flat field, the object in the middle, the name as a wide low wordmark ---------- */
/* Two columns, left-aligned, with one light source: a flat black field reads as a template, a lit
   one reads as a page somebody set. The data card sits beside the promise, so the first thing on the
   screen is a test result and not a slogan. */
/* Content-sized and top-aligned. A min-height with centred content put a dark void over the first
   line of copy — the fold began with nothing in it. The proof line now lives inside the column, so
   the first screen carries the claim, the numbers and the legal frame without any height trick. */
.ig-ledger-hero {
	min-height: auto;
	display: grid;
	align-content: start;
	justify-items: start;
	gap: clamp(1.6rem, 3.4vw, 3rem);
	padding-block: clamp(2.6rem, 6vh, 5rem) clamp(1.4rem, 4vh, 2.6rem);
	background: radial-gradient(115% 78% at 88% -6%, var(--ig-page-3) 0%, transparent 62%), var(--ig-page-bg);
	color: var(--ig-fg);
	text-align: left;
}
.ig-hero-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .5fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; width: 100%; }
.ig-hero-copy { min-width: 0; }
.ig-hero-kicker { margin: 0 0 .9rem; font: 600 .9375rem/1.5 var(--ig-body); letter-spacing: 0; color: var(--ig-brand); }
/* Two lines, never three: the claim is set to a measure that holds it, and the size stops where
   the wrap would start. */
/* Sized to the column it actually lives in: the claim must land in two lines at 1440, 768 and 390. */
.ig-hero-headline { margin: 0; font-family: var(--ig-display); font-weight: 700;
	font-size: clamp(2.15rem, 4.6vw, 3.05rem); line-height: 1.06; letter-spacing: -0.02em; text-transform: none; }
.ig-hero-note { margin: 1.1rem 0 0; max-width: 46ch; font: 400 1.0625rem/1.55 var(--ig-body); color: var(--ig-fg-dim); }
/* Not a badge wall: the limits themselves, set as one plain line. This is the sentence that tells a
   German player the writer knows what signing up here costs. */
/* One flowing sentence, not a flex row: at 390px the bold fragments became ragged left-aligned
   blocks and read as a layout error. A hairline rule, because a brand-coloured bar turns a fact
   into a pull-quote. */
.ig-hero-proof { margin: 1.15rem 0 0; padding: .7rem 0 .7rem .9rem;
	border-left: 1px solid var(--ig-line); font-size: .9375rem; line-height: 1.55;
	color: var(--ig-fg-dim); max-width: 52ch; }
.ig-hero-proof b { color: var(--ig-fg); font-weight: 600; }
.ig-hero-panel { min-width: 0; }
/* The phone and tablet overrides for the hero and the two data cards sit further down, after the
   components they change — with equal specificity CSS order decides, and an override placed above a
   definition is simply dead. They were here until round 16 measured the result on a phone. */
.ig-ledgercard { display: block; padding: 1.2rem 1.3rem 1.15rem; background: var(--ig-card-grad);
	border: 1px solid var(--ig-line); border-radius: 14px; text-decoration: none; color: var(--ig-fg); }
.ig-ledgercard-top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin: 0 0 .55rem;
	font: 600 .875rem/1.4 var(--ig-body); letter-spacing: .03em; color: var(--ig-fg-dim); }
.ig-ledgercard-name { margin: 0; font: 700 1.375rem/1.2 var(--ig-display); letter-spacing: -0.01em; }
.ig-ledgercard-score { display: flex; align-items: baseline; gap: .45rem; margin: .5rem 0 .8rem; color: var(--ig-fg-dim); font-size: .9375rem; }
.ig-ledgercard-score b { font: 700 2rem/1 var(--ig-display); letter-spacing: -0.02em; color: var(--ig-brand); }
.ig-ledgercard-rows { display: grid; gap: .45rem; margin: 0; padding: .8rem 0 0; border-top: 1px solid var(--ig-line); list-style: none; }
.ig-ledgercard-rows li { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem;
  font-size: .9375rem; color: var(--ig-fg-dim); }
.ig-ledgercard-rows li b { order: -1; margin-right: auto; }
.ig-ledgercard-rows li + li { position: relative; padding-top: .5rem; }
.ig-ledgercard-rows li + li::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
  border-top: 1px dashed var(--ig-fg-dim); opacity: .5; }
.ig-ledgercard-rows b { color: var(--ig-fg); font-weight: 600; }
.ig-ledgercard-foot { margin: .9rem 0 0; font-size: .8125rem; color: var(--ig-fg-dim); }
/* the numbers a German player has to live with — stated plainly, they read as expertise */
/* padding-block only: the measure list above owns padding-inline, and a shorthand here would
   reset it to zero and push the text against the viewport edge on tablets. */
.ig-trust { display: flex; flex-wrap: wrap; gap: .55rem 2.2rem; margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
	padding-block: 1.1rem; border-top: 1px solid var(--ig-line); border-bottom: 1px solid var(--ig-line); }
.ig-trust-item { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ig-trust-item b { font: 700 1.5rem/1.1 var(--ig-display); letter-spacing: -0.01em; }
.ig-trust-item span { max-width: 30ch; font-size: .9375rem; line-height: 1.45; color: var(--ig-fg-dim); }
.ig-trust-stand { margin-left: auto; align-self: center; font-size: .8125rem; color: var(--ig-fg-dim); }
@media (max-width: 820px) { .ig-trust { gap: .9rem 1.4rem; } .ig-trust-stand { margin-left: 0; } }
.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; gap: clamp(1rem, 4vw, 2.4rem); margin: 1.6rem 0 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: 600 1.0625rem/1 var(--ig-body);
	letter-spacing: 0;
	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); }

/* ---------- the second fold: a legal masthead (Casino Fuchs) ---------- */
/* No light source here: a page that proves something is flat, ruled and dense, and it opens with a
   stand line and a double rule instead of a spotlight. The measured numbers are three ruled lines
   across the whole measure, so the fold is a table of findings rather than one boxed card. */
.ig-mast-hero {
	display: grid; align-content: start; gap: clamp(.9rem, 2.2vw, 1.5rem);
	background: var(--ig-page-bg); color: var(--ig-fg);
	padding-block: clamp(1.1rem, 3vh, 2rem) clamp(1.6rem, 5vh, 3rem);
}
/* the rule under the stand line is the masthead: at a 10 %-alpha hairline it disappears and the
   block reads as an unruled list. Mixed toward the foreground so both palettes get a real rule. */
.ig-mast-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1.5rem;
	padding-bottom: .75rem; border-bottom: 3px double var(--ig-line); }
@supports (color: color-mix(in oklab, red, blue)) {
	.ig-mast-top { border-bottom-color: color-mix(in oklab, var(--ig-line), var(--ig-fg) 55%); }
}
.ig-mast-kicker { margin: 0; font: 600 .9375rem/1.4 var(--ig-body); letter-spacing: .01em; color: var(--ig-brand); }
.ig-mast-stand { margin: 0; font: 500 .9375rem/1.4 var(--ig-body); color: var(--ig-fg-dim); font-variant-numeric: tabular-nums; }
.ig-mast-head { margin: 0; max-width: 21ch; font-family: var(--ig-display); font-weight: 700;
	font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.02; letter-spacing: -0.025em; }
.ig-mast-ledger { list-style: none; margin: clamp(.3rem, 1.4vw, .9rem) 0 0; padding: 0;
	border-top: 1px solid var(--ig-line); }
.ig-mast-row { display: grid; grid-template-columns: 4ch minmax(0, 1fr) auto auto;
	align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); padding-block: .95rem;
	border-bottom: 1px solid var(--ig-line); }
.ig-mast-rank { font: 600 .9375rem/1 var(--ig-num); color: var(--ig-fg-dim); }
.ig-mast-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; min-width: 0;
	font: 700 clamp(1.25rem, 2.4vw, 1.95rem)/1.05 var(--ig-display); color: var(--ig-fg); text-decoration: none; }
.ig-mast-name:hover, .ig-mast-name:focus-visible { color: var(--ig-brand); }
.ig-mast-when { font: 500 .875rem/1 var(--ig-body); color: var(--ig-fg-dim); white-space: nowrap; }
/* a row answers "why is this one here" before it answers "what does it pay": the first measured
   finding from the test, its figure set in the protocol face like every other number on the page */
.ig-mast-id { display: grid; gap: .3rem; min-width: 0; }
.ig-mast-proof { max-width: 66ch; font: 400 .9375rem/1.5 var(--ig-body); color: var(--ig-fg-dim); }
.ig-mast-proof-n { color: var(--ig-fg); font-family: var(--ig-num); font-weight: 600;
	font-variant-numeric: tabular-nums; }
.ig-mast-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem 1.1rem;
	font: 500 .9375rem/1.35 var(--ig-body); color: var(--ig-fg-dim); font-variant-numeric: tabular-nums; }
.ig-mast-score { display: grid; place-items: center; min-width: 3.1rem; padding: .4rem .5rem;
	background: var(--ig-brand); color: var(--ig-brand-ink); font: 700 1.3rem/1 var(--ig-num); }
/* the legal frame printed as what it is: fine print at the foot of the proof, not a pull-quote */
.ig-mast-fine { margin: 0; max-width: 92ch; font: 400 .875rem/1.6 var(--ig-body); color: var(--ig-fg-dim); }
.ig-mast-star { color: var(--ig-brand); font-weight: 700; }
.ig-mast-row-cta { margin-top: .2rem; }
@media (max-width: 640px) { .ig-mast-row-cta { margin-top: .55rem; } }
.ig-mast-row-cta > .ig-hero-spec:first-of-type { margin-left: auto; }

/* ---------- 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); }

/* ---------- the fox's board: ruled entries, evidence under the finding ---------- */
/* SlotAffe's board is a departure board: one line per casino, facts in columns to the right. The fox
   reads like an audit file: the finding on the first line, the measured evidence ruled beneath it,
   the note set as a stamp pressed against the margin. Taller rows, a tick column instead of a
   duration string - the two boards are not the same object wearing different colours. */
.ig-board-line--ledger {
	grid-template-columns: 5ch minmax(0, 1fr) auto;
	grid-template-areas: "rank name stamp" "under under under";
	row-gap: .6rem; align-items: center; min-height: 108px; padding-block: 1rem;
}
.ig-board--ledger .ig-board-rank { grid-area: rank; font-family: var(--ig-num); }
.ig-board--ledger .ig-board-name { grid-area: name; }
.ig-board-stamp { grid-area: stamp; display: grid; place-items: center; min-width: 3.4rem;
	padding: .45rem .6rem; border: 2px solid var(--ig-brand); color: var(--ig-brand);
	font: 700 1.5rem/1 var(--ig-num); font-variant-numeric: tabular-nums; }
.ig-board-row.is-open .ig-board-stamp { background: var(--ig-brand); color: var(--ig-brand-ink); }
.ig-board-under { grid-area: under; display: flex; flex-wrap: wrap; align-items: center;
	gap: .45rem 1.2rem; font: 500 var(--ig-step-small)/1.4 var(--ig-body); color: var(--ig-fg-dim);
	font-variant-numeric: tabular-nums; }
/* the measured duration, drawn: four ticks, filled for how fast the money moved */
.ig-board-ticks { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.ig-board-ticks > span { width: 15px; height: 9px; background: var(--ig-brand); }
.ig-board-ticks > span.is-missing { background: transparent; box-shadow: inset 0 0 0 1px var(--ig-line); }
.ig-board--ledger .ig-board-line:hover .ig-board-ticks > span,
.ig-board--ledger .ig-board-line:focus-visible .ig-board-ticks > span { background: var(--ig-fg); }
.ig-board--ledger .ig-board-line:hover .ig-board-ticks > span.is-missing,
.ig-board--ledger .ig-board-line:focus-visible .ig-board-ticks > span.is-missing { background: transparent; }

/* ---------- 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); }
/* the second ending for the second site: the claim as a clause you can read between two rules, the
   word kept as a signature instead of a poster, and the link named instead of an arrow. Without this
   variant both homes closed on the same light band (gb10, round 16). */
.ig-cta--rule .ig-cta-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem 2.5rem;
	min-height: 0; background: var(--ig-page-bg); color: var(--ig-fg); text-decoration: none;
	border-block-start: 1px solid var(--ig-line); border-block-end: 3px double var(--ig-line);
	padding-block: clamp(1.8rem, 5vw, 3.25rem); }
@supports (color: color-mix(in oklab, red, blue)) {
	.ig-cta--rule .ig-cta-band { border-block-color: color-mix(in oklab, var(--ig-line), var(--ig-fg) 45%); }
}
.ig-cta--rule .ig-cta-note { position: static; right: auto; margin: 0; max-width: 40ch;
	font: 500 clamp(1.0625rem, 1.6vw, 1.375rem)/1.4 var(--ig-body); color: var(--ig-fg); }
.ig-cta--rule .ig-cta-link { margin-left: auto; white-space: nowrap; color: var(--ig-brand);
	font: 600 1rem/1.3 var(--ig-body); border-bottom: 2px solid currentColor; padding-bottom: .12rem; }
.ig-cta--rule .ig-cta-word { flex: none; white-space: nowrap; margin-left: 1.4rem; opacity: .3; }
.ig-cta--rule .ig-cta-band .ig-logo-word { font-size: clamp(1.1rem, 1.5vw, 1.55rem); }
.ig-cta--rule .ig-cta-band:hover, .ig-cta--rule .ig-cta-band:focus-visible { background: var(--ig-page-bg); color: var(--ig-fg); }
.ig-cta--rule .ig-cta-band:hover .ig-cta-word, .ig-cta--rule .ig-cta-band:focus-visible .ig-cta-word { opacity: .85; }
/* the ghost word is decoration; it goes before it is allowed to break mid-word */
@media (max-width: 1180px) { .ig-cta--rule .ig-cta-word { display: none; } }
.ig-cta--rule .ig-cta-band:hover .ig-cta-link { color: var(--ig-fg); }
/* ---------- the same two blocks, placed where they can win ---------- */
@media (max-width: 900px) {
	.ig-ledger-hero { padding-block: 1.4rem 1.3rem; }
	.ig-hero-cols { grid-template-columns: 1fr; gap: 1.4rem; }
	.ig-ledgercard { padding: .95rem 1.05rem; }
	.ig-ledgercard-rows { gap: .35rem; padding-top: .6rem; }
	.ig-hero-row { margin-top: 1.1rem; }
	.ig-hero-note { margin-top: .85rem; }
	.ig-hero-proof { margin-top: .8rem; padding-block: .55rem; }
}
@media (max-width: 640px) {
	/* the phone hero runs tight: the blocks above the card have to leave the card room in screen one */
	.ig-hero-cols { gap: .8rem; }
	.ig-hero-note { font-size: .9375rem; }
	.ig-hero-proof { font-size: .875rem; max-width: none; }
	.ig-ledger-hero { padding-block: 1.1rem 1.2rem; }
	.ig-ledgercard { padding: .85rem .95rem; }
	.ig-ledgercard-name { font-size: 1.2rem; }
	.ig-ledgercard-score { margin: .4rem 0 .6rem; }
	.ig-ledgercard-score b { font-size: 1.7rem; }
	.ig-ledgercard-rows { gap: .3rem; padding-top: .55rem; }
	.ig-ledgercard-foot { margin-top: .6rem; }
	/* gb10 on the phone fold: "der Feinprint frisst zu viel Hoehe". The masthead gives back what it
	   took, so the first board row — the only place the payout ticks are drawn — enters screen one. */
	.ig-mast-hero { padding-block: .9rem 1.25rem; }
	.ig-mast-head { font-size: clamp(2rem, 8.6vw, 2.7rem); }
	.ig-mast-ledger { margin-top: .35rem; }
	.ig-mast-fine { font-size: .8125rem; line-height: 1.55; }
	.ig-mast-row { padding-block: .65rem;
		grid-template-columns: 3ch minmax(0, 1fr) auto;
		grid-template-areas: "rank name stamp"; }
	.ig-mast-rank { grid-area: rank; }
	.ig-mast-id { grid-area: name; }
	.ig-mast-score { grid-area: stamp; }
	/* on a phone the measured finding takes the row the shared facts occupied: payout, bonus and
	   licence say the same thing about most of this market, the number from the test does not */
	.ig-mast-facts { display: none; }
	.ig-mast-proof { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
		overflow: hidden; font-size: .875rem; line-height: 1.45; }
	/* the claim stays a two-line title on a phone: the reading, not the type, carries the size */
	.ig-hero-headline { font-size: 1.7rem; text-wrap: balance; }
}

@media (max-width: 640px) {
	.ig-cta--rule .ig-cta-band { padding-block: 1.5rem 1.6rem; }
	.ig-cta--rule .ig-cta-link { margin-left: 0; }
	.ig-cta--rule .ig-cta-word { display: none; }
}

/* ---------- 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 ----------
   The [data-reveal] rules sit in igaming.css: archives and test reports use them too. */

@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:not(.ig-board--ledger) .ig-board-cell { display: none; }
	/* the fox keeps the evidence line on a phone but drops to the two facts a player compares */
	.ig-board-line--ledger { grid-template-columns: 4ch minmax(0, 1fr) auto; min-height: 96px; row-gap: .5rem; }
	.ig-board-under .ig-board-cell:nth-child( 3 ) { display: none; }
	.ig-board-stamp { min-width: 3rem; font-size: 1.25rem; }
	/* the measured card belongs in the first screen: headline, finding, then the reading */
	.ig-hero-copy { display: contents; }
	.ig-hero-copy > .ig-hero-kicker { order: 1; }
	.ig-hero-copy > .ig-hero-headline { order: 2; }
	.ig-hero-panel { order: 3; }
	.ig-hero-copy > .ig-hero-note { order: 4; margin-top: .9rem; }
	.ig-hero-copy > .ig-hero-proof { order: 5; margin-top: .5rem; }
	.ig-hero-copy > .ig-hero-row { order: 6; }
	.ig-mast-row { grid-template-columns: 3ch minmax(0, 1fr) auto; }
	.ig-mast-facts { grid-column: 2 / -1; justify-content: flex-start; }
	.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: flex-start; 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: left; }
.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; }
.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%; }
	/* the art kept its desktop track (grid-column: 2), which invented a second column, squeezed the
	   statement to 34ch beside it and painted the pictures across the statement at 768px */
	.ig-stair-art { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr; margin-top: 1.75rem; }
}