/* ==========================================================================
   SL Tournaments — landing page
   Content is blocks. Everything in this file is design, so editing cannot
   break it. Section order matches the mockup top to bottom.
   ========================================================================== */

:root {
	--slt-black: #1a1a1a;
	--slt-white: #fff;
	--slt-yellow: #ffff00;
	--slt-yellow-soft: #fff7d2;
	/* Sampled off the mockup: the ink used for the word IN and for ONE CHAMPION,
	   and the pale stroke behind TOURNAMENT. */
	--slt-yellow-ink: #ffe935;
	--slt-yellow-pale: #fff999;

	/* 🔴 IMAGES ARE CACHED FOR TEN YEARS AT THE CLOUDFLARE EDGE
	   (`cache-control: max-age=315360000`). Editing an SVG or PNG in place changes
	   NOTHING for any visitor — and nothing for you either, so you will tune a shape
	   you are not actually looking at. Only the CSS is versioned (WordPress adds
	   ?ver=filemtime). When you change an image, BUMP THE ?v= ON ITS URL BELOW. */
	--slt-cream: #fef9e6;
	--slt-red: #f4364a;
	--slt-muted: #6b6b6b;
	--slt-line: #e4e4e4;

	--slt-gold: #f5c518;
	--slt-silver: #b9bcc2;
	--slt-bronze: #e08a2e;

	--slt-slant: 9deg;
	--slt-radius: 14px;
	--slt-shell: clamp(1.125rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.slt-display,
.slt-cond,
.slt-hl {
	text-wrap: balance;
}

/* Heavy condensed display, slanted the way the mockup is. Anton ships no
   italic, so the browser synthesises the oblique from the angle. */
.slt-display {
	font-family: Anton, "Arial Narrow", Impact, sans-serif;
	font-weight: 400;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	line-height: 0.9;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.slt-cond {
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.08;
	letter-spacing: 0.01em;
}

.slt-upright {
	font-style: normal;
}

/* The yellow marker stroke. A masked SVG so the edges stay rough and hand-made
   instead of reading as a rectangle. */
.slt-hl {
	position: relative;
	display: inline-block;
	isolation: isolate;
}

.slt-hl::before {
	content: "";
	position: absolute;
	inset: 0.1em -0.07em 0.02em -0.07em;
	background: var(--slt-yellow);
	-webkit-mask: url(../img/hl-stroke.svg?v=3) center / 100% 100% no-repeat;
	mask: url(../img/hl-stroke.svg?v=3) center / 100% 100% no-repeat;
	z-index: -1;
}

/* Pale variant used where the mockup tints rather than fills. */
.slt-hl--soft::before {
	background: #fff59a;
}

/* Thin scribble under a line of text. */
.slt-ul {
	position: relative;
	display: inline-block;
}

.slt-ul::after {
	content: "";
	position: absolute;
	left: -0.04em;
	right: -0.04em;
	bottom: -0.16em;
	height: 0.19em;
	background: var(--slt-yellow);
	-webkit-mask: url(../img/hl-underline.svg) center / 100% 100% no-repeat;
	mask: url(../img/hl-underline.svg) center / 100% 100% no-repeat;
}

/* "One champion." is the same yellow ink as IN, and the mockup rules a stroke
   under it too. */
.slt-yellow-text {
	color: var(--slt-yellow-ink);
	position: relative;
	display: inline-block;
}

.slt-yellow-text::after {
	content: "";
	position: absolute;
	left: -0.04em;
	right: -0.04em;
	bottom: -0.16em;
	height: 0.18em;
	background: var(--slt-yellow-ink);
	-webkit-mask: url(../img/hl-underline.svg) center / 100% 100% no-repeat;
	mask: url(../img/hl-underline.svg) center / 100% 100% no-repeat;
}
.slt-red-text { color: var(--slt-red); }
.slt-muted-text { color: var(--slt-muted); }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.slt-main {
	padding-block: 0;
}

.slt-main > * {
	margin-block: 0;
}

/* Sections sit on a common rhythm. */
.slt-section {
	margin-block: clamp(2.5rem, 6vw, 4.5rem) !important;
}

/* ⚠ The page's blocks are wrapped in .entry-content (wp-block-post-content), so
   `.slt-main > .slt-section` never matched and the first section kept a 40px top
   margin under the header. Both selectors are needed. */
.slt-main > .slt-section:first-child,
.slt-main .entry-content > .slt-section:first-child {
	margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.slt-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	padding-block: 0.85rem;
}

.slt-header.is-stuck {
	border-bottom-color: var(--slt-line);
	box-shadow: 0 6px 24px -18px rgba(0, 0, 0, 0.5);
}

.slt-header__inner {
	gap: 1rem;
}

/* The THNDR / IN / seashell lockup */
.slt-lockup {
	display: flex;
	align-items: center;
	gap: var(--slt-lockup-gap, clamp(0.5rem, 1.4vw, 0.9rem));
	text-decoration: none !important;
	color: var(--slt-black);
	flex: 0 1 auto;
	min-width: 0;
}

.slt-lockup__thndr {
	width: clamp(84px, 12vw, 128px);
	height: auto;
	display: block;
}

/* The brand column: the THNDR lockup on top, "Operated by + Sports Legends" beneath it.
   The column is exactly as wide as the lockup, and the line below stretches to match —
   so "Operated by" sits under the THNDR mark and the Sports Legends logo lands under the
   end of "North Coast". The two rows read as one block at every width. */
.slt-header__brand {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	flex: 0 1 auto;
	/* ⚠ ONE gap for BOTH header rows. They have to match exactly or the columns drift
	   apart — the offsets accumulate across the row and the second line ends up several
	   pixels out. Override this variable, never the individual rows. */
	--slt-lockup-gap: clamp(0.5rem, 1.4vw, 0.9rem);
}

/* Row 2 mirrors row 1: the same divider rules and the same yellow chip, reusing
   .slt-lockup__rule and .slt-lockup__in so the two rows can never drift apart in style.
   The left cluster keeps row 1's tight rhythm; the logo is pushed to the right edge so
   the row still ends exactly where "NORTH COAST" ends. */
.slt-header__by {
	display: flex;
	align-items: center;
	gap: var(--slt-lockup-gap, clamp(0.5rem, 1.4vw, 0.9rem));
	margin-top: clamp(0.3rem, 0.9vw, 0.55rem);
}



/* ⚠ Same width as .slt-lockup__thndr above it. "Operated" is much narrower than the
   THNDR wordmark, and without this every column after it shifts left and the two rows
   stop lining up. If the logo's width clamp changes, change this one to match. */
.slt-header__by-label {
	width: clamp(84px, 12vw, 128px);
	flex: none;
	font-family: Inter, sans-serif;
	font-weight: 600;
	font-size: clamp(0.62rem, 0.86vw, 0.82rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #3d3d3d;
	line-height: 1;
	white-space: nowrap;
	/* On a phone the label nearly fills its box, so left reads correctly. On desktop the
	   box is the full width of the THNDR wordmark and the short word floated at the far
	   left looked stranded — centring sits it under the logo instead. */
	text-align: left;
}

@media (min-width: 641px) {
	.slt-header__by-label {
		text-align: center;
	}
}

/* Big enough to actually read — "Sports Legends" is a two-line wordmark, so it needs
   more height than a single-line one to stay legible. It has a whole line to itself,
   so there is room. */
.slt-header__by-logo {
	height: clamp(22px, 2.1vw, 30px);
	width: auto;
	display: block;
}

.slt-lockup__rule {
	width: 1px;
	height: 26px;
	background: var(--slt-line);
	flex: none;
}

.slt-lockup__in {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	background: var(--slt-yellow);
	padding: 0.15rem 0.4rem 0.1rem;
	line-height: 1;
	flex: none;
	/* IN and BY are both two letters but not the same width. Forcing a common width
	   keeps the chips — and everything after them — aligned between the two rows. */
	box-sizing: border-box;
	min-width: 2.15em;
	text-align: center;
}

.slt-lockup__seashell {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	min-width: 0;
}

/* Stand-in for the client's seashell wordmark, which is not in the media
   library yet. Swap the two spans for an <img> when the real file arrives. */
.slt-lockup__seashell-name {
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: clamp(1.05rem, 2.4vw, 1.6rem);
	letter-spacing: -0.015em;
}

.slt-lockup__seashell-sub {
	font-family: Inter, sans-serif;
	font-weight: 600;
	font-size: clamp(0.5rem, 1.1vw, 0.62rem);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	margin-top: 0.28em;
	margin-right: -0.26em;
	/* "NORTH COAST" is ONE line in the mockup. The tracking makes it wider than
	   the word above it, so on a phone it wrapped to "NORTH" / "COAST" and the
	   lockup grew a third line. */
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.slt-btn .wp-block-button__link,
.slt-btn.wp-block-button .wp-element-button {
	font-family: Anton, "Arial Narrow", sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(0.9rem, 1.5vw, 1.1rem);
	padding: 0.8rem 1.5rem 0.7rem;
	border-radius: 999px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	transition: transform 0.15s ease, filter 0.15s ease;
	text-decoration: none;
}

.slt-btn .wp-block-button__link::after {
	content: "";
	width: 1.15em;
	height: 0.75em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 7h19.2L14 1.6 15.5 0 24 8l-8.5 8L14 14.4 19.2 9H0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 7h19.2L14 1.6 15.5 0 24 8l-8.5 8L14 14.4 19.2 9H0z'/%3E%3C/svg%3E") center / contain no-repeat;
	flex: none;
}

.slt-btn--red .wp-block-button__link {
	background: var(--slt-red);
	color: #fff;
}

.slt-btn--black .wp-block-button__link {
	background: var(--slt-black);
	color: #fff;
}

.slt-btn .wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.slt-btn--lg .wp-block-button__link {
	font-size: clamp(1.05rem, 2vw, 1.45rem);
	padding: 1.05rem 2.1rem 0.95rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.slt-hero {
	position: relative;
	padding-block: clamp(1.5rem, 4vw, 3rem) 0;
	isolation: isolate;
}

.slt-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	align-items: start;
	gap: clamp(1rem, 3vw, 2rem);
}

.slt-hero__copy {
	position: relative;
	z-index: 2;
	padding-top: clamp(0.5rem, 2vw, 1.75rem);
}

/* Each headline line carries its own size so the stack matches the mockup. */
.slt-hero__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.08em, 0.4vw, 0.13em);
	font-size: clamp(2.6rem, 8.4vw, 6.6rem);
	line-height: 0.86;
}

.slt-hero__title > * {
	display: block;
	margin: 0;
	font-family: Anton, "Arial Narrow", Impact, sans-serif;
	font-weight: 400;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	line-height: 0.86;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	width: fit-content;
}

.slt-line-1 {
	font-size: 0.82em;
	display: flex !important;
	align-items: center;
	gap: 0.28em;
}

/* In the mockup "IN" is YELLOW TYPE with a stroke ruled under it — it is NOT black
   type sitting on a yellow chip, which is what this used to be. */
.slt-line-1 .slt-in {
	font-size: 0.5em;
	position: relative;
	display: inline-block;
	padding: 0;
	color: var(--slt-yellow-ink);
}

.slt-line-1 .slt-in::before {
	content: none;
}

.slt-line-1 .slt-in::after {
	content: "";
	position: absolute;
	left: -0.06em;
	right: -0.06em;
	bottom: -0.1em;
	height: 0.16em;
	background: var(--slt-yellow-ink);
	-webkit-mask: url(../img/hl-underline.svg) center / 100% 100% no-repeat;
	mask: url(../img/hl-underline.svg) center / 100% 100% no-repeat;
}

.slt-line-2 { font-size: 1em; }
.slt-line-3 { font-size: 0.585em; }
.slt-line-4 { font-size: 0.705em; }

/* ⚠ Per line, straight off the mockup — do not "tidy" these into one rule:
   SEASHELL          bright yellow stroke
   BEACH VOLLEYBALL  NO stroke at all
   TOURNAMENT        pale yellow stroke
   The .slt-hl class stays on all three so the hook survives an edit; the CSS
   decides which of them actually paints. */
.slt-line-3.slt-hl::before {
	content: none;
}

.slt-line-4.slt-hl::before {
	background: var(--slt-yellow-pale);
}

.slt-hero__tagline {
	margin: clamp(0.9rem, 2.2vw, 1.4rem) 0 0;
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(0.9rem, 1.9vw, 1.32rem);
	letter-spacing: 0.01em;
	line-height: 1.2;
}

/* Artwork column */
.slt-hero__art {
	position: relative;
	z-index: 1;
	margin-top: clamp(-1rem, -1vw, 0rem);
}

.slt-hero__ball {
	position: relative;
	z-index: 1;
}

.slt-hero__ball img {
	width: 100%;
	height: auto;
	display: block;
}

/* Stickers. Absolutely placed here so they can never be dragged loose. */
.slt-sticker {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	user-select: none;
}

.slt-sticker img {
	width: 100%;
	height: auto;
	display: block;
}

.slt-sticker--hi {
	width: clamp(72px, 11vw, 132px);
	top: -2%;
	left: -6%;
	transform: rotate(-6deg);
}

.slt-sticker--vibes {
	width: clamp(58px, 8.5vw, 104px);
	bottom: 8%;
	left: -3%;
	transform: rotate(8deg);
}

/* Hand-drawn ticks beside the ball */
.slt-hero__ticks {
	position: absolute;
	top: 6%;
	right: 2%;
	width: clamp(30px, 4.5vw, 58px);
	aspect-ratio: 60 / 56;
	background: var(--slt-black);
	-webkit-mask: url(../img/ticks.svg) center / contain no-repeat;
	mask: url(../img/ticks.svg) center / contain no-repeat;
	z-index: 3;
}

/* --------------------------------------------------------------------------
   Facts strip
   -------------------------------------------------------------------------- */

.slt-facts {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	margin-block: clamp(2rem, 5vw, 3.5rem) !important;
}

.slt-fact {
	position: relative;
	text-align: center;
	padding: 0 clamp(0.3rem, 1.2vw, 1rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	/* ⚠ WordPress's flow-layout rule gives every block AFTER the first a 20px
	   top margin. In a grid that is invisible everywhere except the FIRST ROW,
	   where item 1 has no margin and its neighbour does — so "28 August 2026"
	   sat 20px higher than "Seashell" and nothing else looked wrong. The grid's
	   own gap does the spacing here. */
	margin-block: 0 !important;
}

.slt-fact + .slt-fact::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6%;
	bottom: 6%;
	width: 1px;
	background: var(--slt-line);
}

/* Icon, with the yellow smudge the mockup puts behind it. */
.slt-fact__icon {
	position: relative;
	width: clamp(30px, 3.6vw, 44px);
	aspect-ratio: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.slt-fact__icon::after {
	content: "";
	position: absolute;
	right: -22%;
	bottom: 4%;
	width: 66%;
	height: 24%;
	background: var(--slt-yellow);
	-webkit-mask: url(../img/hl-stroke.svg?v=3) center / 100% 100% no-repeat;
	mask: url(../img/hl-stroke.svg?v=3) center / 100% 100% no-repeat;
	z-index: -1;
}

.slt-fact__icon { isolation: isolate; }

.slt-fact--date   .slt-fact__icon { background-image: url(../img/ico-date.svg); }
.slt-fact--place  .slt-fact__icon { background-image: url(../img/ico-place.svg); }
.slt-fact--teams  .slt-fact__icon { background-image: url(../img/ico-teams.svg); }
.slt-fact--player .slt-fact__icon { background-image: url(../img/ico-player.svg); }
.slt-fact--entry  .slt-fact__icon { background-image: url(../img/ico-ticket.svg); }
.slt-fact--age    .slt-fact__icon { background-image: url(../img/ico-age.svg); }

.slt-fact p {
	margin: 0;
}

.slt-fact__lead {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(0.78rem, 1.35vw, 1.02rem);
	line-height: 1.05;
	letter-spacing: 0.005em;
}

.slt-fact__sub {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(0.66rem, 1.05vw, 0.8rem);
	letter-spacing: 0.05em;
	color: var(--slt-muted);
	line-height: 1.15;
}

/* --------------------------------------------------------------------------
   Prize pool
   -------------------------------------------------------------------------- */

.slt-prizes {
	background: var(--slt-cream);
	border-radius: var(--slt-radius);
	padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 3.5vw, 2.75rem);
}

.slt-prizes__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}

.slt-prizes__total p { margin: 0; }

.slt-prizes__label {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(1rem, 1.8vw, 1.4rem);
	letter-spacing: 0.01em;
}

.slt-prizes__amount {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	font-size: clamp(2.4rem, 5.4vw, 4rem);
	line-height: 0.95;
	margin-top: 0.12em !important;
	position: relative;
	display: inline-block;
}

.slt-prizes__note {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: clamp(1rem, 2.4vw, 1.6rem) !important;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(0.78rem, 1.2vw, 0.95rem);
	line-height: 1.2;
	letter-spacing: 0.02em;
	max-width: 22ch;
}

.slt-prizes__note::before {
	content: "";
	width: 0.95em;
	height: 0.95em;
	border-radius: 50%;
	background: var(--slt-yellow);
	flex: none;
	margin-top: 0.1em;
}

.slt-places {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.75rem);
	border-left: 1px solid #e8ddb8;
	padding-left: clamp(1rem, 2.5vw, 2rem);
}

.slt-place {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	/* ⚠ Same trap as .slt-fact (trap 26): WordPress's flow-layout rule gives every
	   block AFTER the first a 20px top margin, so 1st place sat 20px HIGHER than 2nd
	   and 3rd and the prize figures never lined up. The grid's own gap spaces these. */
	margin-block: 0 !important;
}

.slt-place p { margin: 0; }

.slt-place__trophy {
	width: clamp(38px, 5vw, 62px);
	aspect-ratio: 1;
	background: currentColor;
	-webkit-mask: url(../img/trophy.svg) center / contain no-repeat;
	mask: url(../img/trophy.svg) center / contain no-repeat;
}

.slt-place--1 { color: var(--slt-gold); }
.slt-place--2 { color: var(--slt-silver); }
.slt-place--3 { color: var(--slt-bronze); }

.slt-place__chip {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(0.66rem, 1.05vw, 0.8rem);
	letter-spacing: 0.05em;
	background: currentColor;
	padding: 0.16em 0.7em 0.1em;
	border-radius: 999px;
	line-height: 1.25;
}

.slt-place__chip span { color: var(--slt-black); }

.slt-place__amount {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	font-size: clamp(1.15rem, 2.4vw, 1.85rem);
	line-height: 1;
	color: var(--slt-black);
	margin-top: 0.15em !important;
}

.slt-place__per {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	font-size: clamp(0.85rem, 1.5vw, 1.15rem);
	line-height: 1;
	color: currentColor;
	margin-top: 0.35em !important;
}

.slt-place__perlabel {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(0.62rem, 1vw, 0.76rem);
	letter-spacing: 0.06em;
	color: var(--slt-muted);
	margin-top: 0.1em !important;
}

/* --------------------------------------------------------------------------
   Gather your team
   -------------------------------------------------------------------------- */

.slt-gather__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.slt-photo {
	position: relative;
	isolation: isolate;
	transform: rotate(-2.4deg);
	background: #fff;
	padding: 10px 10px 10px;
	box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.55);
	width: fit-content;
	justify-self: start;
}

.slt-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.slt-photo .slt-sticker--amazing {
	width: clamp(78px, 12vw, 128px);
	top: -10%;
	left: -8%;
	transform: rotate(-14deg);
}

.slt-gather__panel {
	background: var(--slt-yellow-soft);
	border-radius: var(--slt-radius);
	padding: clamp(1.4rem, 3.4vw, 2.5rem);
	text-align: center;
	position: relative;
}

.slt-gather__panel p { margin: 0; }

.slt-gather__kicker {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(1.05rem, 2.2vw, 1.6rem);
	line-height: 1.1;
}

.slt-gather__big {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	line-height: 1;
	margin-top: 0.05em !important;
	display: inline-block;
	position: relative;
}

.slt-gather__body {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(0.92rem, 1.6vw, 1.18rem);
	line-height: 1.3;
	letter-spacing: 0.015em;
	margin-top: clamp(0.75rem, 1.8vw, 1.1rem) !important;
}

/* Curved arrow that points from the photo across to the panel. */
.slt-gather__arrow {
	position: absolute;
	left: -8%;
	bottom: 6%;
	width: clamp(52px, 7vw, 92px);
	aspect-ratio: 120 / 70;
	background: var(--slt-black);
	-webkit-mask: url(../img/arrow-curve.svg) center / contain no-repeat;
	mask: url(../img/arrow-curve.svg) center / contain no-repeat;
	transform: rotate(6deg);
	z-index: 4;
}

.slt-gather__smiley {
	position: absolute;
	right: 2%;
	bottom: -13%;
	width: clamp(30px, 4vw, 52px);
	aspect-ratio: 1;
	background: var(--slt-black);
	-webkit-mask: url(../img/smiley.svg?v=3) center / contain no-repeat;
	mask: url(../img/smiley.svg?v=3) center / contain no-repeat;
}

.slt-gather__spark {
	position: absolute;
	right: -3%;
	top: -8%;
	width: clamp(26px, 3.4vw, 44px);
	aspect-ratio: 1;
	background: var(--slt-yellow);
	-webkit-mask: url(../img/spark.svg) center / contain no-repeat;
	mask: url(../img/spark.svg) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Register section
   -------------------------------------------------------------------------- */

.slt-register {
	scroll-margin-top: 88px;
	position: relative;
	margin-bottom: clamp(1rem, 2.5vw, 2rem) !important;
}

.slt-register__head {
	text-align: center;
	margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.slt-register__head p { margin: 0; }

.slt-register__title {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1;
	display: inline-block;
	position: relative;
}

.slt-register__sub {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(0.9rem, 1.5vw, 1.1rem);
	letter-spacing: 0.03em;
	color: var(--slt-muted);
	margin-top: 0.6rem !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.slt-footer {
	margin-top: clamp(3rem, 7vw, 5.5rem);
	padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
	border-top: 1px solid var(--slt-line);
}

.slt-footer__inner {
	gap: 1.5rem;
	align-items: flex-end;
}

.slt-footer__badge {
	width: clamp(150px, 22vw, 250px);
	margin: 0 !important;
}

.slt-footer__badge img {
	width: 100%;
	height: auto;
	display: block;
}

.slt-tagline {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(1.05rem, 2.2vw, 1.6rem);
	line-height: 1.12;
	text-align: right;
	margin: 0 !important;
}

.slt-footer__legal {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: 1rem;
	border-top: 1px solid var(--slt-line);
	color: var(--slt-muted);
	gap: 0.75rem 1.5rem;
	/* Centred at every width. The block's own layout is flex/space-between, which
	   parked the copyright hard against the left edge once the policy links were
	   removed and it became the only child. */
	justify-content: center;
	text-align: center;
}

.slt-footer__legal p { margin: 0; }

.slt-footer__legal a {
	color: var(--slt-muted);
	text-decoration: none;
}

.slt-footer__legal a:hover {
	color: var(--slt-black);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Plain pages (thank you, privacy, 404)
   -------------------------------------------------------------------------- */

.slt-plain {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.slt-thanks {
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
}

.slt-thanks__sticker {
	width: clamp(120px, 20vw, 200px);
	margin: 0 auto clamp(1rem, 2.5vw, 1.75rem) !important;
}

.slt-thanks__sticker img { width: 100%; height: auto; display: block; }

.slt-thanks__title {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(2.2rem, 6vw, 4rem);
	line-height: 0.95;
	margin: 0 !important;
}

.slt-thanks__lead {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(1rem, 2vw, 1.35rem);
	letter-spacing: 0.02em;
	margin-top: 1rem !important;
}

/* Long-form document pages — Tournament Rules, Terms & Conditions.
   Plain, readable, and deliberately quiet: these are read, not admired. */
.slt-doc {
	max-width: 46rem;
	margin-inline: auto;
}

.slt-doc__title {
	font-family: Anton, sans-serif;
	font-style: oblique var(--slt-slant);
	font-synthesis: style;
	text-transform: uppercase;
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	line-height: 0.98;
	margin: 0 !important;
}

.slt-doc__meta {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.82rem;
	color: var(--slt-muted);
	margin-top: 0.75rem !important;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--slt-line);
}

.slt-doc h2 {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	line-height: 1.15;
	margin-top: clamp(2rem, 4vw, 2.75rem) !important;
	margin-bottom: 0.6rem !important;
}

/* The yellow tick that sits before every section heading. */
.slt-doc h2::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.5em;
	background: var(--slt-yellow);
	vertical-align: 0.08em;
}

.slt-doc p,
.slt-doc li {
	font-family: Inter, sans-serif;
	font-size: 0.97rem;
	line-height: 1.62;
}

.slt-doc ul,
.slt-doc ol {
	margin: 0.6rem 0 0;
	padding-left: 1.25em;
}

.slt-doc li { margin-bottom: 0.45rem; }
.slt-doc li:last-child { margin-bottom: 0; }

.slt-doc__note {
	background: var(--slt-yellow-soft);
	border-radius: var(--slt-radius);
	padding: clamp(1rem, 2.5vw, 1.4rem);
	margin-top: clamp(2rem, 4vw, 2.75rem) !important;
}

.slt-doc__note p { margin: 0 !important; }

@media (max-width: 640px) {
	.slt-doc p,
	.slt-doc li { font-size: 0.94rem; }

	/* The tracked caps subtitle ran to three lines on a phone. */
	.slt-doc__meta {
		font-size: 0.74rem;
		letter-spacing: 0.04em;
	}
}

.slt-next {
	background: var(--slt-cream);
	border-radius: var(--slt-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	text-align: left;
}

.slt-next h2 {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	margin: 0 0 0.75rem;
}

.slt-next ol { margin: 0; padding-left: 1.2em; }
.slt-next li { margin-bottom: 0.5rem; }
.slt-next li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

/* Between roughly 900px and 1280px the page container is at its 1120px cap with
   thin gutters, so the AMAZING sticker's -8% hang put it OFF THE LEFT EDGE of the
   screen, where it is clipped and cannot be scrolled to. Above 1280 there is room
   for the hang, so the wide-desktop look is untouched. */
@media (max-width: 1279px) {
	.slt-photo .slt-sticker--amazing {
		left: 0;
	}
}

@media (max-width: 1024px) {
	.slt-prizes__grid {
		grid-template-columns: 1fr;
	}

	.slt-places {
		border-left: 0;
		border-top: 1px solid #e8ddb8;
		padding-left: 0;
		padding-top: clamp(1.25rem, 3vw, 1.75rem);
	}

	.slt-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: clamp(1.5rem, 4vw, 2.25rem);
	}

	.slt-fact + .slt-fact::before { display: none; }

	.slt-fact:nth-child(3n + 2)::before,
	.slt-fact:nth-child(3n)::before {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.slt-header {
		padding-block: 0.6rem;
	}

	/* 🔴 The extra `.slt-btn` is load-bearing. `.slt-header__cta .wp-block-button__link`
	   is (0,2,0) — exactly the same as the generic `.slt-btn .wp-block-button__link`
	   rule, which is defined LATER and therefore won. Every header-CTA size rule below
	   silently did nothing for months: the button stayed at full desktop size on phones,
	   which is why the lockup beside it was always being squeezed. */
	.slt-header__cta .slt-btn .wp-block-button__link {
		font-size: 0.8rem;
		padding: 0.65rem 1rem 0.55rem;
	}

	.slt-header__cta .slt-btn .wp-block-button__link::after {
		width: 1em;
		height: 0.66em;
	}

	.slt-gather__grid {
		grid-template-columns: 1fr;
	}

	/* Align the pinned photo to the same gutter as every other section instead of
	   floating it in the middle at 88%. The -2.4deg rotation widens its box by
	   ~2.7%, which still clears the viewport. */
	.slt-photo {
		justify-self: stretch;
		width: auto;
		max-width: none;
	}

	/* ⚠ Once the photo sits on the gutter, `left: -8%` puts this sticker 20px off
	   the LEFT EDGE OF THE SCREEN, where it is clipped and cannot scroll into view.
	   Keep it inside the photo on a phone. */
	.slt-photo .slt-sticker--amazing {
		top: -7%;
		left: 2%;
	}

	.slt-gather__arrow { display: none; }

	/* The badge and the tagline stay side by side on a phone. Stacking them left
	   a band of empty space down the middle of the footer for no gain. */
	.slt-footer__inner {
		flex-direction: row;
		align-items: flex-end !important;
		gap: 1rem;
		flex-wrap: nowrap;
	}

	.slt-footer__badge {
		width: clamp(112px, 36vw, 165px);
		flex: none;
	}

	.slt-tagline { text-align: right; }

	/* One centred line for the copyright, with the two policy links under it. */
	.slt-footer__legal {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.5rem;
	}

	/* Held to ONE line, so the size has to follow the screen: the string is a fixed
	   57 characters and simply does not fit at the normal size on a 360px phone. */
	/* Held to ONE line, so the size has to follow the screen: the string is a fixed
	   57 characters and simply does not fit at the normal size on a 360px phone.
	   ⚠ `!important` is required — WordPress emits its font-size presets as
	   `.has-xs-font-size { font-size: ... !important }`, so a plain rule loses. */
	.slt-footer__legal p:first-child {
		font-size: min(0.7rem, 2.6vw) !important;
		white-space: nowrap;
	}
}

/* At 360px the header simply runs out of room: the lockup wants ~158px and the CTA
   takes 188px of the 324px available, so "seashell NORTH COAST" ends up under the
   button. Trimming the button back a little on the narrowest phones is the least
   damaging place to find those pixels. */
@media (max-width: 400px) {
	.slt-header__cta .slt-btn .wp-block-button__link {
		font-size: 0.72rem;
		padding: 0.6rem 0.8rem 0.5rem;
	}
}

/* The hero keeps the mockup's two columns — headline left, ball right — down to
   640px. Stacking it at 782px made the ball 768px wide on a tablet and swamped the
   page. Below 640 it stacks and the ball goes full bleed. */
@media (max-width: 640px) {
	.slt-hero__grid {
		grid-template-columns: 1fr;
	}

	/* The ball runs EDGE TO EDGE once the hero stacks. In the mockup the artwork
	   bleeds off the page; a centred, inset image reads as a mistake. The negative
	   margin cancels the root padding that .slt-main applies, so no wrapper needs
	   to change. Do NOT put `order: -1` back — the mockup leads with the headline. */
	.slt-hero__art {
		order: 0;
		width: auto;
		margin-inline: calc(var(--wp--style--root--padding-left, 1.125rem) * -1);
		margin-top: clamp(-1.25rem, -3vw, -0.5rem);
	}

	.slt-hero__title {
		align-items: flex-start;
	}

	/* ⚠ Positive offsets only. The art is full-bleed now, so a negative `left`
	   hangs the sticker off the viewport and creates sideways scroll.
	   In the mockup the "hi" burst sits to the RIGHT of the headline, high up —
	   not down on the left of the ball. With the hero stacked, the ball's top
	   right corner is the same spot relative to the headline. */
	.slt-sticker--hi {
		left: auto;
		right: 5%;
		top: -9%;
	}

	.slt-sticker--vibes { bottom: 5%; left: 5%; }

}

@media (max-width: 560px) {
	.slt-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.slt-fact::before { display: none !important; }

	.slt-fact:nth-child(2n)::before { display: block !important; }

	.slt-places {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}

	/* Trophy on the left, place + total in the middle, per-player on the right.
	   A single flex row squeezed the figures onto two lines each. */
	.slt-place {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 0.85rem;
		row-gap: 0.1rem;
		text-align: left;
	}

	.slt-place__trophy { grid-area: 1 / 1 / 3 / 2; width: 42px; }
	.slt-place__chip { grid-area: 1 / 2 / 2 / 3; justify-self: start; }
	.slt-place__amount { grid-area: 2 / 2 / 3 / 3; margin-top: 0 !important; }
	.slt-place__per { grid-area: 1 / 3 / 2 / 4; justify-self: end; margin-top: 0 !important; }
	.slt-place__perlabel { grid-area: 2 / 3 / 3 / 4; justify-self: end; margin-top: 0 !important; }

	/* The header must stay on one line at 390px or the CTA wraps and crushes
	   the logo lockup beside it. */
	.slt-header__cta .slt-btn .wp-block-button__link {
		white-space: nowrap;
		font-size: 0.66rem;
		padding: 0.58rem 0.8rem 0.48rem;
		gap: 0.4em;
	}

	/* ⚠ Tight on purpose, and set on the BRAND so both rows get it. At 390px the logo
	   row has little spare width, and if the two rows use different gaps their columns
	   drift apart by a few pixels per gap. */
	.slt-header__brand { --slt-lockup-gap: 0.28rem; }
	.slt-lockup__thndr { width: 64px; }
	/* must track the logo width above, or the two header rows stop lining up */
	.slt-header__by-label {
		width: 64px;
		/* a touch smaller than the desktop size — at phone scale the tracked caps read
		   heavier than they measure */
		font-size: 0.55rem;
	}
	.slt-lockup__rule { height: 20px; }
	.slt-lockup__in { font-size: 0.6rem; padding: 0.1rem 0.28rem 0.06rem; }
	.slt-lockup__seashell-name { font-size: 0.88rem; }
	.slt-lockup__seashell-sub { font-size: 0.44rem; letter-spacing: 0.16em; }

	.slt-hero { padding-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}