/*
Theme Name: Sports with Joe - Final Design
Theme URI: https://sportswithjoe.com
Author: Joseph Kiran
Description: Premium editorial theme for Sports With Joe — franchise cricket, women's cricket and football. Built to the final brand kit: Tenon throughout with Overpass Mono eyebrows, a locked card system, and a server-rendered section library composed into twelve templates.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swj-final
Tags: blog, news, one-column, block-patterns, full-site-editing, custom-colors, custom-menu
*/

/* ==========================================================================
   FONTS — Tenon, self-hosted.

   Nine cuts, as the brand kit declares them. Each face is its own file, so
   a page downloads only the weights it actually sets. Overpass Mono carries
   the eyebrows and is loaded from Google, which is where the design has it.
   ========================================================================== */

@font-face {
	font-family: 'Tenon';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('assets/fonts/Tenon-XLight.otf') format('opentype');
}

@font-face {
	font-family: 'Tenon';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/Tenon-Light.otf') format('opentype');
}

@font-face {
	font-family: 'Tenon';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/Tenon-LightItalic.otf') format('opentype');
}

@font-face {
	font-family: 'Tenon';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/Tenon-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'Tenon';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/Tenon-Medium.otf') format('opentype');
}

@font-face {
	font-family: 'Tenon';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/Tenon-MediumItalic.otf') format('opentype');
}

@font-face {
	font-family: 'Tenon';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/Tenon-Bold.otf') format('opentype');
}

@font-face {
	font-family: 'Tenon';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/Tenon-BoldItalic.otf') format('opentype');
}

@font-face {
	font-family: 'Tenon';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/Tenon-XBold.otf') format('opentype');
}

/* ==========================================================================
   01 · TOKENS

   Taken verbatim from the Version 2.0 brand kit. Deliberately kept as the
   design's own custom properties rather than translated into WordPress
   preset variables: the translation layer is what silently broke headline
   sizing in the previous theme, and keeping these names means a future
   design revision is close to a copy-paste.
   ========================================================================== */

:root {
	/* Brand */
	--primary: #042453;      /* navy — masthead, footer, dark bands          */
	--secondary: #F6BF1B;    /* gold — rules, badges, buttons. Never body    */
	--green: #14584A;        /* links, kickers, section labels               */

	/* Neutral ramp */
	--ink: #1C1B17;          /* headlines and body copy                      */
	--ink2: #3A382F;         /* standfirsts, deks                            */
	--muted: #6B675C;        /* metadata, captions                           */
	--paper: #EEF1F4;        /* desktop page ground                          */
	--card: #FFFFFF;         /* card and panel surfaces                      */
	--tint: #E3E9EF;         /* editorial bands, image placeholders, hover   */
	--line: #D3DAE2;         /* hairlines and card borders                   */
	--line-mob: #DFE5EB;     /* one step lighter on mobile                   */
	--cream: #FAF7F0;        /* type on navy and ink grounds                 */
	--band: #1C1B17;         /* Team Briefings ground                        */
	--headline: #042453;     /* headline hover                               */
	--line-hover: #B9C4D0;   /* card border on hover                         */

	/* Type */
	--head-font: 'Tenon', Helvetica, Roboto, 'DM Sans', sans-serif;
	--body-font: 'Tenon', Helvetica, Roboto, 'DM Sans', sans-serif;
	--ui-font: 'Tenon', Helvetica, Roboto, 'DM Sans', sans-serif;
	--eyebrow-font: 'Overpass Mono', ui-monospace, SFMono-Regular, monospace;

	/* One dial for the whole type scale, and one for heading weight. */
	--tscale: 1;
	--head-weight: 700;

	/* Geometry */
	--r: 10px;
	--gutter: 24px;
	--pad: 16px;

	/* Container widths — three, nothing in between */
	--w-full: 1280px;        /* chrome, homepage, hubs                       */
	--w-hub: 1060px;         /* About, Privacy, Search, 404, Rewind, Analysis */
	--w-long: 760px;         /* News Brief, Rewind issue                     */

	/* Rhythm */
	--page-bottom: 56px;
	--section-gap: 44px;
	--grid-gap: 20px;
	--measure: 68ch;

	/* Fixed card geometry — headline length must never move a card */
	--body-lead: 152px;
	--body-card: 114px;
	/* Measured, not guessed: kicker 18 + 6 + two headline lines 39.7 + 6 +
	   date 20.7, inside 13/15 padding, is 118.4px. At the design's 102px the
	   date overflowed on two-line cards and sat mid-box on one-line ones, so
	   a row never lined up. 120px clears it and leaves the date pinned to the
	   same baseline across the row. */
	--body-side: 120px;
	--row-h: 88px;
	--thumb-w: 128px;

	/* The lightning bolt the Rewind carries, masked so it takes currentColor */
	--bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L3 14h6l-1 8 10-12h-6z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   02 · BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--paper); }

body {
	font-family: var(--body-font);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--primary); }

img { max-width: 100%; height: auto; }

::selection { background: var(--green); color: var(--cream); }

:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }

.swj-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Skip link — required on every page by the spec. */
.swj-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--secondary);
	color: var(--primary);
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 12px 18px;
}

.swj-skip:focus { left: 0; }

/* Container widths */
.swj-wrap { max-width: var(--w-full); margin: 0 auto; padding-inline: var(--gutter); }

/* Core's flow layout puts margin-block-start: 24px on every child after the
   first. Inside this theme spacing comes from `gap` or from an explicit
   margin, so that inherited margin only ever doubles up — and in a flex row
   like the masthead it pushes the logo and nav down out of alignment. The
   core rule is written with :where(), so it carries no specificity and this
   single line is enough to switch it off wherever the theme lays out. */
.wp-site-blocks > *,
.v2-main > *,
.swj-wrap > *,
.v2-mast__inner > *,
.v2-mast__left > *,
.v2-mast__logo > *,
.v2-mast__act > *,
.v2-artgrid > *,
.v2-artcol > *,
.v2-body > *,
.v2-pggrid > *,
.v2-pgbody > *,
.v2-bio > *,
.v2-biocol > *,
.v2-drawer__panel > * {
	margin-block-start: 0;
}
.swj-wrap--hub { max-width: var(--w-hub); }
.swj-wrap--long { max-width: var(--w-long); }

/* ==========================================================================
   03 · CLAMPS — fixed card height regardless of headline length
   ========================================================================== */

.cl2, .cl3, .cl4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cl2 { -webkit-line-clamp: 2; }
.cl3 { -webkit-line-clamp: 3; }
.cl4 { -webkit-line-clamp: 4; }

/* ==========================================================================
   04 · THE CARD SYSTEM

   One card, eight sizes. White surface, 1px border, 10px radius, 16:9
   image, kicker → headline → meta. Body heights are locked so a long
   headline clamps rather than growing the card.
   ========================================================================== */

.v2-c {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	color: var(--ink);
	transition: border-color 0.16s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.v2-c:hover {
	border-color: var(--line-hover);
	box-shadow: 0 10px 26px rgba(4, 36, 83, 0.10);
	transform: translateY(-2px);
	color: var(--ink);
}

.v2-cimg {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--tint);
	flex-shrink: 0;
}

.v2-cimg img,
.v2-cimg > :not(.v2-flag) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.v2-c:hover .v2-cimg img,
.v2-c:hover .v2-cimg > :not(.v2-flag) { transform: scale(1.04); }

/* Gold flag over the image — used for the hero's format badge. */
.v2-flag {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	background: var(--secondary);
	color: var(--primary);
	font-family: var(--eyebrow-font);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 4px;
}

.v2-cbody {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 13px 15px 15px;
	height: var(--body-card);
	box-sizing: border-box;
}

.v2-k {
	flex-shrink: 0;
	font-family: var(--eyebrow-font);
	font-size: calc(10px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.072em;
	text-transform: uppercase;
	color: var(--green);
}

.v2-t {
	margin: 0;
	flex-shrink: 0;
	font-family: var(--head-font);
	font-weight: 500;
	font-size: calc(17px * var(--tscale));
	line-height: 1.28;
	letter-spacing: -0.014em;
	color: var(--ink);
	transition: color 0.16s ease;
}

.v2-c:hover .v2-t { color: var(--headline); }

.v2-m {
	margin-top: auto;
	flex-shrink: 0;
	font-family: var(--ui-font);
	font-size: calc(11.5px * var(--tscale));
	letter-spacing: 0.05em;
	color: var(--muted);
}

/* Side card — hero right column and top-stories grid */
.v2-side .v2-cbody { height: var(--body-side); }
.v2-side .v2-t { font-size: calc(15.5px * var(--tscale)); line-height: 1.28; letter-spacing: -0.008em; }

/* Lead card — homepage hero and section leads */
.v2-lead .v2-cbody { height: var(--body-lead); padding: 18px 20px 20px; gap: 9px; }
.v2-lead .v2-t { font-size: calc(26px * var(--tscale)); line-height: 1.18; letter-spacing: -0.028em; }
.v2-lead .v2-k { font-size: calc(11px * var(--tscale)); }
.v2-lead .v2-m { font-size: calc(12.5px * var(--tscale)); }

/* The hero lead carries an H1; it takes the card weight, not the page's. */
h1.v2-t { font-weight: 500; }

.v2-cmeta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.v2-age {
	font-family: var(--ui-font);
	font-size: 11.5px;
	letter-spacing: 0.05em;
	color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
	.v2-c, .v2-lrow, .v2-cimg img, .v2-cimg > * { transition: none !important; }
	.v2-c:hover, .v2-lrow:hover { transform: none !important; }
	.v2-c:hover .v2-cimg img, .v2-c:hover .v2-cimg > :not(.v2-flag) { transform: none !important; }
}

/* ==========================================================================
   05 · SECTION HEADER — gold rule, title, optional "more" link
   ========================================================================== */

.v2-shead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.v2-sleft { display: flex; align-items: center; gap: 12px; min-width: 0; }

.v2-rule {
	flex-shrink: 0;
	width: 26px;
	height: 4px;
	background: var(--secondary);
	border-radius: 2px;
}

.v2-shead h2 {
	margin: 0;
	font-family: var(--head-font);
	font-weight: var(--head-weight);
	font-size: calc(clamp(23px, 2.5vw, 30px) * var(--tscale));
	line-height: 1;
	letter-spacing: -0.028em;
	color: var(--headline);
}

.v2-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	font-family: var(--eyebrow-font);
	font-weight: 600;
	font-size: calc(11.3px * var(--tscale));
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: var(--green);
}

.v2-more span:last-child { display: inline-block; transition: transform 0.16s ease; }
.v2-more:hover span:last-child { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.v2-more span:last-child { transition: none !important; }
	.v2-more:hover span:last-child { transform: none !important; }
}

/* Section spacing: a hairline between major sections. */
.v2-section { padding: 36px 0 44px; border-top: 1px solid var(--line); }
/* The first section on a page opens it — no rule above, less air. */
.v2-section--first { padding: 32px 0 38px; border-top: 0; }

/* The section straight after the lead runs on from it. */
.v2-section--first + .v2-section { padding-top: 0; border-top: 0; }

/* ==========================================================================
   06 · HP-01 HERO — lead plus two supports
   ========================================================================== */

.v2-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.v2-heroside { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; align-content: start; }

/* The lead and its supports square off against each other: the row
   stretches, the cards fill it, and each body takes what is left rather
   than a fixed height. */
.v2-hero { align-items: stretch; }
.v2-hero .v2-c { height: 100%; }
.v2-hero .v2-cbody { height: auto; flex: 1 1 auto; }
.v2-heroside .v2-c { height: 100%; }
.v2-heroside .v2-cbody { height: auto; flex: 1 1 auto; }

/* A list row centres its text instead of pinning it to a fixed box. */

/* ==========================================================================
   07 · HP-02 TOP STORIES — four uniform cards
   ========================================================================== */

.v2-topgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap);
}

/* ==========================================================================
   08 · HP-03 SPORT SECTION — lead beside a panel of four rows
   ========================================================================== */

.v2-sect {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 24px 26px;
	align-items: start;
}

.v2-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.v2-lrow {
	display: flex;
	flex-direction: column;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	transition: border-color 0.16s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.v2-lrow:hover {
	border-color: var(--line-hover);
	box-shadow: 0 10px 26px rgba(4, 36, 83, 0.10);
	transform: translateY(-2px);
	color: var(--ink);
}

.v2-lthumb {
	order: -1;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--tint);
}

.v2-lthumb img,
.v2-lthumb > * {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.v2-lrow:hover .v2-lthumb img,
.v2-lrow:hover .v2-lthumb > * { transform: scale(1.04); }

.v2-ltext {
	min-width: 0;
	display: grid;
	gap: 5px;
	padding: 13px 15px 15px;
	box-sizing: border-box;

	/* The final design drops the fixed box here — a row now carries a date
	   under its headline, and the text centres in whatever height it needs. */
	height: auto;
	align-content: center;
}

.v2-rt {
	margin: 0;
	font-family: var(--head-font);
	font-weight: 500;
	font-size: calc(15.5px * var(--tscale));
	line-height: 1.28;
	letter-spacing: -0.008em;
	color: var(--ink);
	transition: color 0.16s ease;
}

.v2-lrow:hover .v2-rt { color: var(--headline); }

/* Mode: Lead + list — supporting stories become a bordered row list. */
.v2-sect[data-style="Lead + list"] .v2-panel,
.v2-panel--flat {
	display: block;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.v2-sect[data-style="Lead + list"] .v2-lrow,
.v2-panel--flat .v2-lrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--thumb-w);
	gap: 14px;
	align-items: center;
	height: var(--row-h);
	padding: 0 16px;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
}

.v2-sect[data-style="Lead + list"] .v2-lrow + .v2-lrow,
.v2-panel--flat .v2-lrow + .v2-lrow { border-top: 1px solid var(--line); }
.v2-sect[data-style="Lead + list"] .v2-lrow:hover,
.v2-panel--flat .v2-lrow:hover { background: var(--tint); box-shadow: none; transform: none; }
.v2-sect[data-style="Lead + list"] .v2-lthumb,
.v2-panel--flat .v2-lthumb { order: 2; width: var(--thumb-w); border-radius: 6px; }
.v2-sect[data-style="Lead + list"] .v2-ltext,
.v2-panel--flat .v2-ltext { order: 1; height: auto; padding: 0; gap: 4px; align-content: center; }
.v2-sect[data-style="Lead + list"] .v2-rt,
.v2-panel--flat .v2-rt { font-weight: 500; font-size: calc(15px * var(--tscale)); }

/* Mode: All cards — one uniform five-up grid. */
.v2-sect[data-style="All cards"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); }
.v2-sect[data-style="All cards"] .v2-panel { display: contents; }
.v2-sect[data-style="All cards"] .v2-lead .v2-cbody { height: var(--body-side); padding: 13px 15px 15px; gap: 5px; }
.v2-sect[data-style="All cards"] .v2-lead .v2-t { font-size: calc(15.5px * var(--tscale)); line-height: 1.28; letter-spacing: -0.008em; }

/* ==========================================================================
   09 · MASTHEAD — CH-01, CH-02
   ========================================================================== */

.v2-mast {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--primary);
	color: var(--cream);
	box-shadow: 0 3px 0 var(--secondary), 0 5px 16px rgba(0, 0, 0, 0.18);
}

/* CH-02 · reading progress. Sits inside the masthead, over its top edge,
   so there is no navy strip above the gold. */
.v2-progtrack {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(250, 247, 240, 0.14);
	z-index: 2;
}

#v2-progress {
	height: 100%;
	width: 0;
	background: var(--secondary);
	transform-origin: left center;
}

.v2-mast__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 22px;
	max-width: var(--w-full);
	margin: 0 auto;
	padding: 14px var(--gutter);
}

.v2-mast__left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.v2-mast__logo { display: flex; align-items: center; min-width: 0; }
.v2-mast__logo a { display: flex; align-items: center; }

.v2-mast__logo img,
.v2-mast__logo .custom-logo {
	height: 68px;
	width: auto;
	max-width: none;
	display: block;
}

/* Text fallback until a logo is uploaded. */
.v2-mast__title a,
.v2-mast__title {
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cream);
}

.v2-mast__logo:has(.custom-logo-link) .v2-mast__title { display: none; }

/* Burger — hidden until the drawer breakpoint. */
.v2-burger {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.v2-burger span { display: block; width: 22px; height: 2px; background: var(--cream); }

/* ---- Navigation -------------------------------------------------------- */

.v2-mast .v2-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	font-family: var(--ui-font);
}

.v2-mast .v2-nav .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: nowrap;
}

.v2-mast .v2-nav .wp-block-navigation-item__content,
.v2-mast .v2-nav .wp-block-navigation-submenu__toggle {
	font-family: var(--ui-font);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cream);
	padding: 6px 0;
	text-decoration: none;
	white-space: nowrap;
}

.v2-mast .v2-nav .wp-block-navigation-item__content:hover,
.v2-mast .v2-nav .wp-block-navigation-submenu__toggle:hover { color: var(--secondary); }

.v2-mast .v2-nav .wp-block-navigation-submenu__toggle {
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Monday Rewind is the one gold item. */
.v2-mast .v2-nav .v2-navrewind .wp-block-navigation-item__content,
.v2-mast .v2-nav .v2-navrewind > a {
	font-weight: 600;
	color: var(--secondary);
	box-shadow: inset 0 -2px 0 var(--secondary);
}

/* Dropdown panel */
.v2-mast .v2-nav .wp-block-navigation__submenu-container {
	min-width: 232px;
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--secondary);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
	padding: 6px;
	z-index: 70;
	border-radius: 0;
}

.v2-mast .v2-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	padding: 9px 12px;
}

.v2-mast .v2-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--tint);
	color: var(--green);
}

/* ---- Actions ----------------------------------------------------------- */

.v2-mast__act { display: flex; align-items: center; gap: 16px; }

.v2-iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--cream);
	background: none;
	border: 0;
	cursor: pointer;
}

.v2-iconbtn:hover { color: var(--secondary); }

.v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ui-font);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 11px 16px;
	min-height: 44px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.v2-btn--gold { color: var(--primary); background: var(--secondary); }
.v2-btn--gold:hover { color: var(--primary); filter: brightness(0.94); }

.v2-btn--ghost {
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
}

.v2-btn--ghost:hover { color: var(--primary); border-color: var(--primary); }

/* --- Sport marks in the dropdowns ---------------------------------------- */

.swj-navicon { flex-shrink: 0; color: var(--green); }

/* The supplied sport artwork is painted through a mask rather than placed as
   a picture, so a mark takes the colour of wherever it sits — green in a
   dropdown, gold on a drawer tile, headline ink at a section head — exactly
   as the drawn icons do. The white detail inside a glyph (the panels on the
   ball, the strings on the racket) stays knocked out. */
.swj-sicon {
	display: inline-block;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--swj-icon) no-repeat center / contain;
	mask: var(--swj-icon) no-repeat center / contain;
}

/* A dropdown row carries its mark, and grows to a real tap target. */
body .v2-mast .v2-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	min-height: 44px;
	box-sizing: border-box;
	font-size: calc(14px * var(--tscale));
}

body .v2-mast .v2-nav .wp-block-navigation__submenu-container { min-width: 244px; }

.v2-drawer__fold .swj-navicon { color: var(--secondary); }

body .v2-drawer__fold .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ==========================================================================
   10 · FIXTURES RAIL — CH-03
   ========================================================================== */

.v2-fixbar { background: var(--band); color: var(--cream); }

.v2-fixinner {
	display: flex;
	align-items: stretch;
	max-width: var(--w-full);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.v2-fixlabel {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 18px;
	margin-right: 4px;
	border-right: 1px solid rgba(250, 247, 240, 0.16);
	font-family: var(--eyebrow-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-fixscroll {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.v2-fixscroll::-webkit-scrollbar { display: none; }

/* Information only — the rail does not link anywhere. */
.v2-fix {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 10px 18px;
	border-right: 1px solid rgba(250, 247, 240, 0.1);
	color: var(--cream);
}

.v2-fixcomp {
	font-family: var(--eyebrow-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-fixteams { font-family: var(--ui-font); font-size: 13px; white-space: nowrap; }
.v2-fixteams .v2-v { color: rgba(250, 247, 240, 0.55); }
.v2-fixteams .v2-when { color: rgba(250, 247, 240, 0.55); }

/* ==========================================================================
   11 · MOBILE DRAWER — CH-06
   ========================================================================== */

.v2-drawer {
	position: fixed;
	inset: 0;
	z-index: 80;
	visibility: hidden;
	pointer-events: none;
}

.v2-drawer.is-open { visibility: visible; pointer-events: auto; }

.v2-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.v2-drawer.is-open .v2-drawer__scrim { opacity: 1; }

.v2-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(86vw, 320px);
	background: var(--primary);
	color: var(--cream);
	padding: 14px 20px 32px;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.24s ease;
	box-shadow: 6px 0 26px rgba(0, 0, 0, 0.32);
}

.v2-drawer.is-open .v2-drawer__panel { transform: translateX(0); }

.v2-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(250, 247, 240, 0.18);
}

.v2-drawer__brand img { height: 44px; width: auto; display: block; }

.v2-drawer__x {
	background: none;
	border: 0;
	padding: 11px;
	color: var(--cream);
	cursor: pointer;
	display: flex;
}


/* ==========================================================================
   12 · PAGE FRAME
   ========================================================================== */

.v2-main { display: block; padding-bottom: var(--page-bottom); }
.v2-main > * { min-width: 0; }

.v2-empty {
	margin: 0;
	padding: 40px 0;
	font-family: var(--ui-font);
	font-size: 15px;
	color: var(--muted);
}

/* CH-07 · Breadcrumb */
.v2-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 22px 0 0;
	font-family: var(--eyebrow-font);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.v2-crumb a { color: var(--muted); }
.v2-crumb a:hover { color: var(--green); }
.v2-crumb__here { color: var(--green); font-weight: 600; }

/* Hub head — category, tag and archive pages */
.v2-hubhead { padding: 26px 0 4px; }

.v2-hublabel {
	display: block;
	font-family: var(--eyebrow-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 10px;
}

.v2-hubtitle {
	margin: 0;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.14;
	letter-spacing: -0.022em;
	color: var(--ink);
	text-wrap: pretty;
}

.v2-hubmeta {
	margin: 10px 0 0;
	font-family: var(--ui-font);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.v2-hubdesc {
	margin: 14px 0 0;
	max-width: 62ch;
	font-family: var(--body-font);
	font-size: 17px;
	line-height: 1.62;
	color: var(--ink2);
}


/* Pagination */
.v2-pager { padding-top: 32px; }

.v2-pager .wp-block-query-pagination,
.v2-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--ui-font);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.v2-pager .nav-links > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink);
}

.v2-pager .nav-links > a:hover { border-color: var(--primary); color: var(--primary); }
.v2-pager .nav-links .current { background: var(--primary); border-color: var(--primary); color: var(--cream); }
.v2-pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ==========================================================================
   13 · NEWSLETTER CARD — HP-05
   ========================================================================== */

.v2-nl {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding: 30px 32px 32px;
	background: var(--primary);
	border: 1px solid var(--line);
	border-top: 4px solid var(--secondary);
	border-radius: var(--r);
	overflow: hidden;
	color: var(--cream);
}

.v2-nl > * { margin-block-start: 0; }

.v2-nl__kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
	font-family: var(--eyebrow-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-nl__kicker svg { flex-shrink: 0; color: var(--secondary); }

.v2-nl__copy h2 {
	margin: 0 0 10px;
	font-family: var(--head-font);
	font-weight: 600;
	font-size: clamp(23px, 2.4vw, 30px);
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--cream);
	text-wrap: pretty;
}

.v2-nl__copy p {
	margin: 0;
	max-width: 50ch;
	font-family: var(--body-font);
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(250, 247, 240, 0.8);
	text-wrap: pretty;
}

.v2-nl__foot {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 14px;
	font-family: var(--eyebrow-font);
	font-size: 12px;
	color: rgba(250, 247, 240, 0.62);
}

.v2-nl__foot .v2-more { color: var(--secondary); }
.v2-nl__foot .v2-more:hover { color: var(--secondary); }

/* Signup form — the same control everywhere it appears. */
.v2-signup { display: block; min-width: 0; }
.v2-nl__act { min-width: 0; }

.v2-nlform { display: flex; gap: 10px; flex-wrap: wrap; }

.v2-nlform input[type="email"] {
	flex: 1 1 190px;
	min-width: 0;
	font-family: var(--ui-font);
	font-size: 15px;
	padding: 14px 16px;
	border: 1px solid rgba(250, 247, 240, 0.35);
	background: rgba(250, 247, 240, 0.07);
	color: var(--cream);
	border-radius: 0;
}

.v2-nlform input[type="email"]::placeholder { color: rgba(250, 247, 240, 0.5); }
.v2-nlform input[type="email"]:focus { outline: 3px solid var(--secondary); outline-offset: 2px; }

.v2-nlform button {
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary);
	background: var(--secondary);
	border: 0;
	border-radius: 0;
	padding: 14px 24px;
	min-height: 48px;
	cursor: pointer;
}

.v2-nlform button:hover { filter: brightness(0.94); }
.v2-nlform button[disabled] { opacity: 0.6; cursor: default; }

.v2-formmsg {
	margin: 10px 0 0;
	font-family: var(--ui-font);
	font-size: 13px;
	line-height: 1.5;
}

.v2-formmsg:empty { margin: 0; }
.v2-formmsg.is-ok { color: var(--secondary); }
.v2-formmsg.is-error { color: #F2A5A5; }

/* On paper rather than navy — the same form inverts. */
.v2-page .v2-nlform input[type="email"],
.v2-artcol .v2-nlform input[type="email"] {
	border-color: var(--line);
	background: var(--card);
	color: var(--ink);
}

.v2-page .v2-formmsg.is-error,
.v2-artcol .v2-formmsg.is-error { color: #A3231F; }

.v2-page .v2-formmsg.is-ok,
.v2-artcol .v2-formmsg.is-ok { color: var(--green); }

/* ==========================================================================
   14 · TEAM BRIEFINGS — HP-04
   ========================================================================== */

.v2-tbband { background: var(--band); color: var(--cream); padding: 42px 0 46px; }
.v2-tbinner { max-width: var(--w-full); margin: 0 auto; padding: 0 var(--gutter); }

.v2-tbhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.v2-tbtitles { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.v2-tbtitles h2 {
	margin: 0;
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--cream);
}

.v2-tbtitles span {
	font-family: var(--eyebrow-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(250, 247, 240, 0.55);
}

.v2-tbnav { display: flex; gap: 10px; }

.v2-arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(250, 247, 240, 0.3);
	background: none;
	color: var(--cream);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.v2-arrow:hover { border-color: var(--secondary); color: var(--secondary); }

.v2-tbtrack {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
}

.mscroll { scrollbar-width: none; -ms-overflow-style: none; }
.mscroll::-webkit-scrollbar { display: none; }

.v2-tb {
	position: relative;
	flex-shrink: 0;
	scroll-snap-align: start;
	width: 274px;
	height: 426px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 16px;
	overflow: hidden;
	background: #24231F;
	color: var(--cream);
}

a.v2-tb:hover { color: var(--cream); }

.v2-tbimg { position: absolute; top: 0; left: 0; right: 0; height: 288px; }

.v2-tbimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	display: block;
}

.v2-tbveil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(28, 27, 23, 0.6) 0%,
		rgba(28, 27, 23, 0.05) 22%,
		rgba(28, 27, 23, 0.3) 44%,
		rgba(28, 27, 23, 0.88) 62%,
		rgba(28, 27, 23, 1) 72%,
		rgba(28, 27, 23, 1) 100%
	);
}

.v2-tbtop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 16px;
}

.v2-tbbadge {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--secondary);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: 13px;
}

.v2-tbname {
	margin: 0;
	font-family: var(--ui-font);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.v2-tbbody {
	position: relative;
	pointer-events: none;
	padding: 0 16px 16px;
	display: grid;
	gap: 12px;
}

.v2-tbstatus {
	font-family: var(--eyebrow-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-tbsum {
	margin: 0;
	font-family: var(--body-font);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--cream);
}

.v2-ghost {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border: 1px solid rgba(250, 247, 240, 0.4);
	border-radius: 999px;
	font-family: var(--ui-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cream);
}

a.v2-tb:hover .v2-ghost { border-color: var(--secondary); color: var(--secondary); }

/* ==========================================================================
   15 · ARTICLE — AR-01, AR-02, AR-03, AR-12, AR-13, AR-14
   ========================================================================== */

.v2-article { padding-bottom: var(--page-bottom); }

.v2-ahead { padding: 22px 0 0; }
.v2-ahead .v2-crumb { padding-top: 0; }

.v2-h1 {
	margin: 26px 0 18px;
	max-width: 900px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: calc(clamp(32px, 5vw, 52px) * var(--tscale));
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ink);
	text-wrap: pretty;
}

.v2-standfirst {
	margin: 0 0 26px;
	max-width: 660px;
	font-family: var(--body-font);
	font-size: calc(20px * var(--tscale));
	line-height: 1.55;
	color: var(--ink2);
	text-wrap: pretty;
}

/* AR-02 · byline and share */
.v2-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 18px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.v2-avatar {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--green);
	color: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: 18px;
}

.v2-avatar--lg { width: 58px; height: 58px; font-size: 23px; }

/* Avatar and name sit together; the share row is pushed to the far end. */
.v2-byline .v2-avatar { margin-right: -6px; }
.v2-byline .v2-bymeta { margin-right: auto; }

.v2-bymeta { display: grid; gap: 2px; font-family: var(--ui-font); }

.v2-byname {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--green);
}

.v2-bydate {
	font-family: var(--eyebrow-font);
	font-size: calc(11.3px * var(--tscale));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.v2-share { display: flex; align-items: center; gap: 8px; }

.v2-share a,
.v2-share button {
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--card);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.v2-share a:hover,
.v2-share button:hover { border-color: var(--primary); color: var(--primary); }
.v2-share button.is-copied { border-color: var(--green); color: var(--green); }

/* AR-03 · hero figure */
.v2-herofig { margin: 22px 0 0; }

.v2-herofig img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--r);
	border: 1px solid var(--line);
	background: var(--tint);
	display: block;
}

.v2-herofig figcaption {
	margin-top: 10px;
	font-family: var(--ui-font);
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}

/* Two-column body */
.v2-artgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 262px;
	gap: 56px;
	align-items: start;
	padding-top: 36px;
}

.v2-artgrid > * { margin-block-start: 0; }
.v2-artcol { max-width: 680px; min-width: 0; }

/* Article body typography */
.v2-body {
	font-family: var(--body-font);
	font-size: calc(17.5px * var(--tscale));
	line-height: 1.7;
	color: var(--ink);
}

.v2-body > p,
.v2-body > ul,
.v2-body > ol { max-width: var(--measure); }

.v2-body p { margin: 0 0 26px; text-wrap: pretty; }
.v2-body p:last-child { margin-bottom: 0; }
.v2-body a { text-decoration: underline; text-underline-offset: 3px; }

.v2-body h2 {
	margin: 44px 0 18px;
	font-family: var(--head-font);
	font-weight: var(--head-weight);
	font-size: calc(29px * var(--tscale));
	line-height: 1.2;
	letter-spacing: -0.024em;
	color: var(--ink);
	text-wrap: pretty;
	scroll-margin-top: 120px;
}

.v2-body h3 {
	margin: 34px 0 14px;
	font-family: var(--head-font);
	font-weight: var(--head-weight);
	font-size: calc(22px * var(--tscale));
	line-height: 1.28;
	letter-spacing: -0.018em;
	color: var(--ink);
}

.v2-body ul,
.v2-body ol { margin: 0 0 26px; padding-left: 22px; }
.v2-body li { margin-bottom: 10px; }

.v2-body blockquote {
	margin: 34px 0;
	padding: 26px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-left: 0;
}

.v2-body blockquote p {
	margin: 0;
	font-family: var(--head-font);
	font-style: italic;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.42;
	color: var(--ink);
}

.v2-body blockquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--ui-font);
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.v2-body figure { margin: 32px 0; }
.v2-body img { max-width: 100%; height: auto; border-radius: var(--r); display: block; }

.v2-body figcaption {
	margin-top: 10px;
	font-family: var(--ui-font);
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}

.v2-body hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }

.v2-body table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 0 0 26px; }
.v2-body th,
.v2-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }

.v2-body th {
	background: var(--tint);
	font-family: var(--ui-font);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Sticky rail */
.v2-rail {
	position: sticky;
	top: 108px;
	display: grid;
	gap: 22px;
	align-self: start;
}

.v2-toclabel {
	margin: 0 0 10px;
	font-family: var(--eyebrow-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--green);
}

.v2-toc nav { display: flex; flex-direction: column; }

.v2-toc a {
	display: flex;
	gap: 10px;
	align-items: baseline;
	border-top: 1px solid var(--line);
	padding: 11px 0;
	font-family: var(--ui-font);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink2);
}

.v2-toc a:hover { color: var(--green); }
.v2-toc a span:first-child { font-weight: 700; color: var(--green); }

.v2-railnote {
	margin: 0;
	border-top: 1px solid var(--line);
	padding-top: 18px;
	font-family: var(--ui-font);
	font-size: 12px;
	line-height: 1.6;
	color: var(--muted);
}

/* AR-12 · tag chips */
.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 30px 0 0; }

.v2-chips a {
	font-family: var(--ui-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 15px;
	background: var(--card);
}

.v2-chips a:hover { border-color: var(--primary); color: var(--primary); }

/* AR-13 · author card */
.v2-authorcard {
	margin: 30px 0 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
	display: flex;
	gap: 18px;
	align-items: center;
}

.v2-authorcard > div { display: grid; gap: 5px; }

.v2-authorname {
	font-family: var(--head-font);
	font-weight: 700;
	font-size: 18px;
	color: var(--ink);
}

.v2-authorname:hover { color: var(--primary); }

.v2-authorbio {
	margin: 0;
	font-family: var(--ui-font);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink2);
}

/* AR-14 · read next */
.v2-readnext { margin-top: 44px; border-top: 1px solid var(--line); }
.v2-nextgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.v2-nextgrid > * { margin-block-start: 0; }

/* Verdict */
.v2-verdict {
	/* Parchment with a green spine, as the final design draws it. */
	margin: 34px 0 0;
	background: #F1ECE1;
	border: 0;
	border-left: 4px solid var(--green);
	border-radius: 0 10px 10px 0;
	padding: 24px 28px 20px;
}

.v2-verdict__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}

.v2-verdict__title {
	font-family: var(--head-font);
	font-weight: 700;
	font-size: calc(17px * var(--tscale));
	letter-spacing: -0.014em;
	text-transform: none;
	color: var(--green);
}

.v2-verdict__score {
	font-family: var(--head-font);
	font-weight: 700;
	font-size: calc(24px * var(--tscale));
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--green);
}

.v2-verdict__score small {
	font-family: var(--ui-font);
	font-size: calc(12px * var(--tscale));
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--muted);
	margin-left: 4px;
}

.v2-verdict__line {
	margin: 0;
	font-family: var(--body-font);
	font-size: calc(17.5px * var(--tscale));
	line-height: 1.6;
	color: var(--ink);
	text-wrap: pretty;
}

.v2-verdict__potm {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid #D8CFBD;
	font-family: var(--body-font);
	font-size: calc(14px * var(--tscale));
	line-height: 1.55;
	color: var(--ink2);
	text-wrap: pretty;
}

.v2-verdict__potm strong { font-weight: 700; color: var(--ink); }


/* Standard page */
.v2-page .v2-h1 { margin-bottom: 26px; }
.v2-page .v2-body { padding-top: 8px; }

/* ==========================================================================
   17 · 404 — UT-01, UT-02
   ========================================================================== */

.v2-nf {
	padding: 56px 0 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.v2-nfnum {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--secondary);
}

.v2-nfnum svg { flex-shrink: 0; }

.v2-nfnum span {
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(96px, 15vw, 168px);
	line-height: 0.82;
	letter-spacing: -0.04em;
	color: var(--primary);
}

.v2-nf h1 {
	margin: 22px 0 14px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: pretty;
}

.v2-nf p {
	margin: 0 0 28px;
	max-width: 46ch;
	font-family: var(--body-font);
	font-size: 18px;
	line-height: 1.62;
	color: var(--ink2);
	text-wrap: pretty;
}

.v2-nfacts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.v2-nfacts .v2-btn { min-height: 50px; padding: 14px 24px; font-weight: 700; letter-spacing: 0.1em; border-radius: 6px; }

/* ==========================================================================
   18 · FOOTER — CH-08
   ========================================================================== */

.v2-foot {
	background: var(--primary);
	color: rgba(250, 247, 240, 0.85);
	border-top: 3px solid var(--secondary);
}

.v2-finner { max-width: var(--w-full); margin: 0 auto; padding: 44px var(--gutter) 26px; }

.v2-ftop {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 56px;
	justify-content: space-between;
	align-items: flex-start;
}

.v2-fbrand { max-width: 300px; }
.v2-flogo { display: flex; align-items: center; margin-bottom: 14px; }
.v2-flogo img { height: 92px; width: auto; max-width: none; display: block; }

.v2-fblurb {
	margin: 0 0 16px;
	font-family: var(--ui-font);
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(250, 247, 240, 0.72);
}

.v2-fsocial { display: flex; gap: 10px; }

.v2-fsocial a {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(250, 247, 240, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(250, 247, 240, 0.82);
}

.v2-fsocial a:hover { border-color: var(--secondary); color: var(--secondary); }
.v2-fsocial svg { width: 15px; height: 15px; }

.v2-fcols { display: flex; flex-wrap: wrap; gap: 26px 44px; align-items: flex-start; }

.v2-fhead {
	margin: 0 0 12px;
	font-family: var(--eyebrow-font);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-fcol ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
	font-family: var(--ui-font);
	font-size: 14px;
}

.v2-fcol a { color: rgba(250, 247, 240, 0.78); }
.v2-fcol a:hover { color: var(--secondary); }

.v2-fbottom {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba(250, 247, 240, 0.16);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	font-family: var(--ui-font);
	font-size: 12px;
	color: rgba(250, 247, 240, 0.55);
}

/* ==========================================================================
   19 · JOIN COMMUNITY POP-UP
   ========================================================================== */

.v2-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	visibility: hidden;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.v2-modal.is-open { visibility: visible; pointer-events: auto; }

.v2-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(4, 36, 83, 0.62);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.v2-modal.is-open .v2-modal__scrim { opacity: 1; }

.v2-modal__panel {
	position: relative;
	width: min(100%, 520px);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--primary);
	color: var(--cream);
	border-top: 4px solid var(--secondary);
	border-radius: var(--r);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
	padding: 30px 32px 32px;
	opacity: 0;
	transform: translateY(10px) scale(0.985);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.v2-modal.is-open .v2-modal__panel { opacity: 1; transform: none; }

.v2-modal__x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: rgba(250, 247, 240, 0.8);
	cursor: pointer;
}

.v2-modal__x:hover { color: var(--secondary); }

.v2-modal__kicker {
	margin: 0 0 10px;
	font-family: var(--eyebrow-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-modal__title {
	margin: 0 0 10px;
	max-width: 24ch;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(23px, 3vw, 29px);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--cream);
	text-wrap: pretty;
}

.v2-modal__dek {
	margin: 0 0 22px;
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 1.6;
	color: rgba(250, 247, 240, 0.8);
}

.v2-modal__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary);
	background: var(--secondary);
	padding: 14px 20px;
}

.v2-modal__wa:hover { color: var(--primary); filter: brightness(0.94); }

.v2-modal__or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0;
	font-family: var(--ui-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(250, 247, 240, 0.55);
}

.v2-modal__or::before,
.v2-modal__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: rgba(250, 247, 240, 0.2);
}

.v2-modal__small {
	margin: 12px 0 0;
	font-family: var(--ui-font);
	font-size: 12px;
	color: rgba(250, 247, 240, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.v2-modal__panel,
	.v2-modal__scrim,
	.v2-drawer__panel,
	.v2-drawer__scrim { transition: none !important; }
}

/* ==========================================================================
   20 · JOIN COMMUNITY POP-UP — light

   The pop-up reads as a card on paper rather than a navy band: cream panel,
   gold rule across the top, the WhatsApp route in brand green and the email
   route in gold. Overrides the navy block above rather than replacing it,
   so the structure and the focus trap stay exactly as they were.
   ========================================================================== */

.v2-modal__panel {
	background: var(--cream);
	color: var(--ink);
	border-radius: 0;
	box-shadow: 0 26px 70px rgba(4, 36, 83, 0.30);
	padding: 34px 36px 32px;
}

.v2-modal__x { top: 16px; right: 16px; color: var(--ink2); }
.v2-modal__x:hover { color: var(--primary); }

.v2-modal__kicker { color: var(--green); margin-bottom: 12px; }

.v2-modal__title {
	color: var(--ink);
	font-size: clamp(24px, 3vw, 30px);
	margin-bottom: 12px;
}

.v2-modal__dek { color: var(--ink2); font-size: 17px; margin-bottom: 24px; }

/* WhatsApp is the loud route, so it takes the solid green bar. */
.v2-modal__wa {
	background: var(--green);
	color: var(--cream);
	min-height: 58px;
	font-size: 14px;
	letter-spacing: 0.09em;
}

.v2-modal__wa:hover { background: var(--primary); color: var(--cream); filter: none; }

.v2-modal__or { color: var(--muted); margin: 22px 0; }
.v2-modal__or::before,
.v2-modal__or::after { background: var(--line); }

.v2-modal__small { color: var(--muted); margin-top: 16px; }

/* The email row inside the pop-up: field, then the gold button. */
.v2-modal .v2-nlform input[type="email"] {
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	border-radius: 0;
	padding: 16px 16px;
}

.v2-modal .v2-nlform input[type="email"]::placeholder { color: var(--muted); }
.v2-modal .v2-nlform button { min-height: 56px; border-radius: 0; }
.v2-modal .v2-formmsg.is-ok { color: var(--green); }
.v2-modal .v2-formmsg.is-error { color: #A3231F; }

/* ==========================================================================
   21 · STANDING PAGES — About, Legal, The Monday Rewind
   ========================================================================== */

/* The gold tick and green label that opens a section. */
.v2-kick { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.v2-kick span:first-child { width: 26px; height: 4px; background: var(--secondary); flex-shrink: 0; }

.v2-kick span:last-child {
	font-family: var(--eyebrow-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green);
}

/* --- Page head ----------------------------------------------------------- */

.v2-pghead { padding: 26px 0 28px; border-bottom: 1px solid var(--line); }

.v2-pgtitle {
	margin: 0 0 12px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(32px, 4.6vw, 46px);
	line-height: 1.14;
	letter-spacing: -0.022em;
	color: var(--ink);
	text-wrap: pretty;
}

.v2-pgdek {
	margin: 0 0 18px;
	max-width: 62ch;
	font-family: var(--body-font);
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink2);
	text-wrap: pretty;
}

.v2-pgdate {
	font-family: var(--eyebrow-font);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.v2-pgh2 {
	margin: 0 0 6px;
	max-width: 30ch;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 32px);
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: pretty;
}

/* --- Legal body and contents -------------------------------------------- */

.v2-pggrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 262px);
	gap: 52px;
	align-items: start;
	padding-top: 34px;
}

.v2-pgbody {
	font-family: var(--body-font);
	font-size: calc(17.5px * var(--tscale));
	line-height: 1.7;
	color: var(--ink);
	min-width: 0;
}

.v2-pgbody > p,
.v2-pgbody > ul,
.v2-pgbody > ol { max-width: var(--measure); }

.v2-pgbody p { margin: 0 0 20px; text-wrap: pretty; }
.v2-pgbody ul,
.v2-pgbody ol { margin: 0 0 20px; padding-left: 22px; }
.v2-pgbody li { margin-bottom: 9px; text-wrap: pretty; }
.v2-pgbody li:last-child { margin-bottom: 0; }
.v2-pgbody a { text-decoration: underline; text-underline-offset: 3px; }

/* Each H2 opens a numbered section, so it carries the rule and the air. */
.v2-pgbody h2 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 26px 0 12px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	font-family: var(--head-font);
	font-weight: var(--head-weight);
	font-size: calc(24px * var(--tscale));
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-wrap: pretty;
	scroll-margin-top: 120px;
}

.v2-pgbody > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.v2-pgnum {
	flex-shrink: 0;
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: calc(13px * var(--tscale));
	letter-spacing: 0.08em;
	color: var(--secondary);
}

.v2-pgbody h3 {
	margin: 24px 0 10px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	color: var(--ink);
}

/* The rail must fill the grid row, or the sticky card inside it has no
   travel and never actually sticks. */
.v2-pgrail { align-self: stretch; }

.v2-pgtoc {
	position: sticky;
	top: 108px;
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--secondary);
	border-radius: var(--r);
	padding: 16px 18px 18px;
}

.v2-pgtoc .v2-toclabel { margin-bottom: 10px; }

.v2-pgtoc a {
	display: block;
	font-family: var(--ui-font);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink2);
	padding: 8px 0;
	border-top: 1px solid var(--line);
}

.v2-pgtoc a:first-of-type { border-top: none; }
.v2-pgtoc a:hover { color: var(--primary); }

/* --- About: collage ------------------------------------------------------ */

/* --- The Monday Rewind --------------------------------------------------- */

.v2-mrhero { background: var(--tint); border-bottom: 1px solid var(--line); }

.v2-mrinner {
	max-width: var(--w-hub);
	margin: 0 auto;
	padding: 56px var(--gutter) 52px;
	text-align: center;
}

.v2-mrkick {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 16px;
	font-family: var(--eyebrow-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green);
}

.v2-mrkick svg { color: var(--secondary); flex-shrink: 0; }

.v2-mrtitle {
	margin: 0;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(38px, 6.4vw, 66px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--ink);
	text-wrap: pretty;
}

.v2-mrrule { width: 64px; height: 4px; background: var(--secondary); margin: 22px auto 0; }

.v2-mrdek {
	margin: 22px auto 0;
	max-width: 58ch;
	font-family: var(--body-font);
	font-size: 18px;
	line-height: 1.7;
	color: var(--ink2);
	text-wrap: pretty;
}

/* The hero's sign-up is centred and capped, unlike the band's. */
.v2-mrinner .v2-signup { margin: 30px auto 0; max-width: 520px; }
.v2-mrinner .v2-nlform { gap: 9px; }

.v2-mrinner .v2-nlform input[type="email"] {
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink);
	border-radius: 6px;
}

.v2-mrinner .v2-nlform button { border-radius: 6px; min-height: 50px; }
.v2-mrinner .v2-formmsg.is-ok { color: var(--green); }
.v2-mrinner .v2-formmsg.is-error { color: #A3231F; }

.v2-mrsmall {
	margin: 12px auto 0;
	font-family: var(--eyebrow-font);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.v2-mrlatest {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: 36px;
	align-items: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 4px solid var(--secondary);
	border-radius: var(--r);
	padding: 28px 30px;
	color: var(--ink);
}

.v2-mrlatest:hover { border-color: var(--line-hover); color: var(--ink); }

.v2-mrissue {
	font-family: var(--eyebrow-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green);
}

.v2-mrlt {
	margin: 13px 0 14px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 36px);
	line-height: 1.18;
	letter-spacing: -0.022em;
	color: var(--ink);
	text-wrap: pretty;
}

.v2-mrldek {
	margin: 0 0 18px;
	max-width: 58ch;
	font-family: var(--body-font);
	font-size: 17.5px;
	line-height: 1.68;
	color: var(--ink2);
	text-wrap: pretty;
}

.v2-mrgo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green);
}

.v2-mrart {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tint);
}

.v2-mrart img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

.v2-mrlist {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.v2-mrrow {
	display: grid;
	grid-template-columns: 152px minmax(0, 1fr) 24px;
	gap: 24px;
	align-items: center;
	padding: 18px 16px;
	border-top: 1px solid var(--line);
	color: var(--ink);
	transition: background 0.14s ease;
}

.v2-mrrow:first-child { border-top: none; }
.v2-mrrow:hover { background: var(--tint); color: var(--ink); }

.v2-mrrow .v2-mrissue { color: var(--muted); font-size: 12.5px; letter-spacing: 0.1em; }
.v2-mrrow:hover .v2-mrissue { color: var(--green); }

.v2-mrat {
	margin: 0;
	font-family: var(--head-font);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.32;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	transition: color 0.14s ease;
}

.v2-mrrow:hover .v2-mrat { color: var(--headline); }

.v2-mrarrow {
	font-family: var(--ui-font);
	font-size: 16px;
	color: var(--muted);
	opacity: 0;
	transition: opacity 0.14s ease, transform 0.14s ease;
}

.v2-mrrow:hover .v2-mrarrow { opacity: 1; transform: translateX(3px); color: var(--green); }

/* A Rewind issue reads as a letter, so its column is the narrow one. */
body.swj-format-the-monday-rewind .v2-artgrid { grid-template-columns: minmax(0, 1fr); }
body.swj-format-the-monday-rewind .v2-artcol { max-width: var(--w-long); margin: 0 auto; }
body.swj-format-the-monday-rewind .v2-rail { display: none; }

@media (prefers-reduced-motion: reduce) {
	.v2-mrrow,
	.v2-mrat,
	.v2-mrarrow { transition: none !important; }
}

/* ==========================================================================
   22 · HEADER, FIXTURES AND PAGE GROUND
   ========================================================================== */

/* --- The Monday Rewind carries the bolt, as the design has it ------------ */

.v2-mast .v2-nav .v2-navrewind .wp-block-navigation-item__content::before,
.v2-mast .v2-nav .v2-navrewind > a::before,
.v2-drawer__nav .v2-navrewind .wp-block-navigation-item__content::before {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	background: currentColor;
	-webkit-mask: var(--bolt) center / contain no-repeat;
	mask: var(--bolt) center / contain no-repeat;
}

.v2-mast .v2-nav .v2-navrewind .wp-block-navigation-item__content,
.v2-mast .v2-nav .v2-navrewind > a,
.v2-drawer__nav .v2-navrewind .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
}

/* --- Fixtures: five equal cells across the row -------------------------- */

.v2-fixscroll {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	overflow: hidden;
}

.v2-fix {
	min-width: 0;
	padding: 10px 16px;
}

.v2-fix:last-child { border-right: 0; }

.v2-fixcomp,
.v2-fixteams {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Grain, per the design's "Grain" background ------------------------- */

body {
	background-image: radial-gradient(rgba(28, 27, 23, 0.07) 0.5px, transparent 0.6px);
	background-size: 4px 4px;
	background-repeat: repeat;
}

/* Sheets, bands and cards sit on top of the grain, not in it. */
.v2-mast,
.v2-fixbar,
.v2-foot,
.v2-tbband,
.v2-mrhero,
.v2-aboutband,
.v2-c,
.v2-nl,
.v2-panel,
.v2-results,
.v2-mrlist,
.v2-cform,
.v2-pgtoc { background-image: none; }

/* --- Controls that belong to the phone layout --------------------------- */

.v2-snav { display: none; }
.v2-more__short { display: none; }

/* ==========================================================================
   23 · RESPONSIVE — tablet 768–1023, mobile ≤767
   ========================================================================== */

@media (max-width: 1023px) {
	.v2-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.v2-topgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v2-heroside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v2-sect,
	.v2-sect[data-style="All cards"] { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.v2-sect[data-style="All cards"] .v2-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 767px) {
	:root {
		--gutter: var(--pad);
		--line: var(--line-mob);
		--body-lead: auto;
		--body-card: auto;
		--body-side: auto;
		--row-h: auto;
		--thumb-w: 96px;
	}

	.v2-topgrid, .v2-heroside { grid-template-columns: minmax(0, 1fr); }

	/* Every list collapses to the same tucked row: text left, 96px thumb right. */
	.v2-panel,
	.v2-sect[data-style="All cards"] .v2-panel {
		display: block;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: var(--r);
		overflow: hidden;
	}

	.v2-lrow {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 96px;
		gap: 13px;
		align-items: center;
		border: none;
		border-radius: 0;
		background: none;
		box-shadow: none;
		transform: none;
		padding: 14px 15px;
	}

	.v2-lrow + .v2-lrow { border-top: 1px solid var(--line); }
	.v2-lthumb { order: 2; width: 96px; border-radius: 6px; }
	.v2-ltext { order: 1; padding: 0; height: auto; }

	.v2-lead .v2-t { font-size: 22px; }
	.v2-section { padding-top: 30px; }
}

/* --- New sections, tablet ------------------------------------------------ */

@media (max-width: 1023px) {
	.v2-artgrid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.v2-artcol { max-width: none; }

	/* The rail stops sticking and the contents list becomes a chip row. */
	.v2-rail { position: static; top: auto; }
	.v2-toc nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }

	.v2-toc a {
		border-top: none;
		border: 1px solid var(--line);
		border-radius: 999px;
		padding: 8px 14px;
		background: var(--card);
	}

	.v2-nl { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 24px 28px; }
}

/* --- New sections, mobile ------------------------------------------------ */

@media (max-width: 767px) {
	/* CH-01 · single row: burger, centred logo, search.

	   The burger and the logo are wrapped together in the markup, so the
	   wrapper dissolves into the grid — otherwise the search icon lands in
	   the middle column instead of the last one. */
	.v2-mast__inner {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) 48px;
		align-items: center;
		gap: 0;
		padding: 14px 10px;
	}

	.v2-mast__left { display: contents; }

	.v2-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 48px;
		height: 48px;
		justify-self: start;
	}

	.v2-burger span { width: 22px; height: 2px; }

	.v2-mast__logo { justify-self: center; }
	.v2-mast__logo img,
	.v2-mast__logo .custom-logo { height: 58px; }

	/* The desktop menu and the Join button move into the drawer. */
	body .v2-mast .v2-nav { display: none; }
	.v2-mast__act { justify-self: end; }
	body .v2-mast__act .v2-btn { display: none; }
	.v2-iconbtn { width: 48px; height: 48px; }

	/* CH-03 · fixtures are a desktop rail. */
	.v2-fixbar { display: none; }

	/* Article */
	.v2-verdict { margin-top: 26px; padding: 20px 20px 18px; }
	.v2-verdict__title { font-size: calc(15.5px * var(--tscale)); }
	.v2-verdict__line { font-size: calc(16px * var(--tscale)); }
	.v2-verdict__potm { margin-top: 16px; padding-top: 14px; font-size: calc(13.5px * var(--tscale)); }
	.v2-h1 { font-size: clamp(28px, 8vw, 38px); }
	.v2-standfirst { font-size: 19px; }
	.v2-body { font-size: 17.5px; line-height: 1.75; }
	.v2-body h2 { font-size: 24px; scroll-margin-top: 90px; }
	.v2-body h3 { font-size: 20px; }
	.v2-body blockquote p { font-size: 21px; }
	.v2-artgrid { padding-top: 26px; gap: 28px; }
	.v2-share { display: none; }
	.v2-nextgrid { grid-template-columns: minmax(0, 1fr); }
	.v2-authorcard { flex-direction: column; align-items: flex-start; gap: 14px; }

	/* Newsletter */
	.v2-nl { padding: 24px 18px 26px; border-radius: var(--r); }
	.v2-nlform { gap: 8px; }
	.v2-nlform input[type="email"] { flex: 1 1 100%; }
	.v2-nlform button { width: 100%; }

	/* Team briefings */
	.v2-tbband { padding: 32px 0 34px; }
	.v2-tb { width: 244px; height: 396px; }
	.v2-tbimg { height: 258px; }
	.v2-tbhead { margin-bottom: 16px; }
	.v2-tbtitles span { display: none; }

	/* Search */
	.v2-searchform { flex-wrap: wrap; }
	.v2-searchform input[type="search"] { font-size: 17px; padding: 16px 16px 16px 48px; flex: 1 1 100%; }
	.v2-searchform button { width: 100%; }
	.v2-searchicon { left: 17px; top: 27px; transform: none; }

	.v2-srow {
		grid-template-columns: minmax(0, 1fr) 96px;
		gap: 13px;
		padding: 14px;
		align-items: start;
	}

	.v2-stext { order: 1; }
	.v2-sthumb { order: 2; width: 96px; }
	.v2-st { font-size: 16.5px; }
	.v2-sdek { display: none; }

	/* Footer */
	.v2-finner { padding: 30px var(--gutter) 20px; }
	.v2-flogo img { height: 64px; }
	.v2-fcols { gap: 22px 32px; }

	/* Pop-up */
	.v2-modal { padding: 12px; align-items: flex-end; }
	.v2-modal__panel { padding: 26px 20px 24px; max-height: calc(100vh - 24px); }
}

/* The drawer is a mobile control; keep it out of the way above the fold. */
@media (min-width: 768px) {
	.v2-drawer { display: none; }
}

/* ==========================================================================
   24 · MOBILE — built to "Homepage Mob - Ver 2.0"

   The phone design is its own layout, not the desktop one narrowed. Sections
   are full-bleed white sheets separated by 10px of paper; the lead runs edge
   to edge; Top stories becomes a peek carousel; sport sections become a
   stacked lead plus three inset tiles; Team Briefings closes the page.

   Every number below is taken from that file.
   ========================================================================== */

@media (max-width: 767px) {
	:root { --line: var(--line-mob); --tint: #EDF1F5; }

	body { background: var(--paper); }

	/* main: one column of sheets, 10px apart. */
	.v2-main { padding-inline: 0; padding-bottom: 10px; }

	.v2-section {
		background: var(--card);
		margin-bottom: 10px;
		padding: 0;
		border-top: 0;
	}

	.v2-section--first,
	.v2-section + .v2-section { padding-top: 0; border-top: 0; }

	/* ---- section head ------------------------------------------------- */

	.v2-shead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px var(--pad) 8px;
	}

	.v2-sleft { gap: 9px; }
	.v2-rule { width: 20px; height: 4px; }

	.v2-shead h2 {
		font-family: var(--head-font);
		font-weight: 700;
		font-size: 20px;
		line-height: 1;
		letter-spacing: -0.02em;
		color: var(--headline);
	}

	/* Top stories takes the small uppercase head the phone design uses. */
	.v2-shead--kicker h2 {
		font-family: var(--ui-font);
		font-weight: 700;
		font-size: 12px;
		line-height: 1;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--green);
	}

	.v2-more {
		flex-shrink: 0;
		min-height: 44px;
		min-width: 56px;
		justify-content: flex-end;
		padding: 0 2px 0 12px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.1em;
	}

	.v2-more__long { display: none; }
	.v2-more__short { display: inline; }

	/* The final phone design carries no carousel arrows. */
	.v2-snav { display: none; }

	/* ---- 1 · lead ------------------------------------------------------ */

	/* The phone leads on one story, and the two supports that sit beside it
	   on the desktop follow underneath as ordinary stacked tiles — the same
	   tile the rest of the page lists with. Nothing is dropped on a phone. */
	.v2-hero { display: block; gap: 0; }

	.v2-c,
	.v2-c:hover {
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transform: none;
	}

	.v2-cimg { border-radius: 0; }

	.v2-flag {
		top: 11px;
		left: 11px;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.13em;
		padding: 5px 9px;
		border-radius: 0;
	}

	.v2-lead .v2-cbody { height: auto; padding: 13px var(--pad) 17px; gap: 9px; }

	.v2-lead .v2-cmeta {
		justify-content: flex-start;
		gap: 9px;
		flex-wrap: wrap;
	}

	.v2-k { font-size: 10px; letter-spacing: 0.13em; }
	.v2-age { font-size: 10px; letter-spacing: 0.08em; }

	.v2-lead .v2-t {
		font-size: 26px;
		line-height: 1.16;
		letter-spacing: -0.022em;
	}

	.v2-lead .v2-m { font-size: 12px; }

	/* ---- 2 · Top stories, peek carousel -------------------------------- */

	.v2-section--top { padding-bottom: 16px; }

	.v2-section--top .v2-topgrid {
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		padding: 0 var(--pad);
	}

	.v2-section--top .v2-topgrid .v2-c {
		flex: 0 0 82%;
		scroll-snap-align: start;
		display: grid;
		gap: 11px;
	}

	.v2-section--top .v2-topgrid .v2-cimg {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 12px;
		overflow: hidden;
	}

	.v2-section--top .v2-topgrid .v2-cbody { height: auto; padding: 0; gap: 6px; }

	.v2-section--top .v2-topgrid .v2-t {
		font-size: 18px;
		line-height: 1.24;
		letter-spacing: -0.012em;
		font-weight: 700;
	}

	.v2-section--top .v2-topgrid .v2-m { font-size: 11px; }

	/* Everywhere else a card grid stacks — the hub's "Latest", read-next,
	   the two hero supports and the 404 rail all use the same tile the sport
	   sections do. */
	.v2-topgrid,
	.v2-nextgrid,
	.v2-heroside {
		display: block;
		grid-template-columns: none;
	}

	.v2-topgrid > .v2-c,
	.v2-nextgrid > .v2-c,
	.v2-heroside > .v2-c { display: block; height: auto; }

	.v2-topgrid > .v2-c .v2-cimg,
	.v2-nextgrid > .v2-c .v2-cimg,
	.v2-heroside > .v2-c .v2-cimg {
		width: auto;
		margin: 0 var(--pad);
		border-radius: 12px;
		aspect-ratio: 16 / 9;
	}

	.v2-topgrid > .v2-c .v2-cbody,
	.v2-nextgrid > .v2-c .v2-cbody,
	.v2-heroside > .v2-c .v2-cbody { height: auto; padding: 11px var(--pad) 20px; gap: 7px; }

	.v2-topgrid > .v2-c:last-child .v2-cbody,
	.v2-nextgrid > .v2-c:last-child .v2-cbody,
	.v2-heroside > .v2-c:last-child .v2-cbody { padding-bottom: 18px; }

	/* ---- 3 · sport sections ---------------------------------------------
	   The lead stacks; everything under it is a row with its thumbnail on
	   the left, which is what the final phone design draws. */

	.v2-sect,
	.v2-sect[data-style="All cards"] { display: block; gap: 0; }

	.v2-sect .v2-lead .v2-cbody { padding: 11px var(--pad) 20px; gap: 7px; }

	.v2-sect .v2-lead .v2-t {
		font-size: calc(20px * var(--tscale));
		line-height: 1.2;
		letter-spacing: -0.016em;
		font-weight: 500;
	}

	.v2-panel,
	.v2-panel--flat,
	.v2-sect[data-style="Lead + list"] .v2-panel,
	.v2-sect[data-style="All cards"] .v2-panel {
		display: block;
		background: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
		grid-template-columns: none;
		padding-bottom: 6px;
	}

	/* The phone design carries three rows under the lead, not four. */
	.v2-sect .v2-panel .v2-lrow:nth-child(n + 4) { display: none; }

	.v2-panel .v2-lrow,
	.v2-panel--flat .v2-lrow,
	.v2-sect[data-style="Lead + list"] .v2-lrow {
		display: grid;
		grid-template-columns: 118px minmax(0, 1fr);
		gap: 13px;
		align-items: start;
		height: auto;
		padding: 14px var(--pad);
		border: 0;
		border-top: 1px solid var(--line);
		border-radius: 0;
		background: none;
		box-shadow: none;
		transform: none;
	}

	.v2-panel .v2-lrow:first-child,
	.v2-panel--flat .v2-lrow:first-child,
	.v2-sect[data-style="Lead + list"] .v2-lrow:first-child { border-top: 0; }

	.v2-panel .v2-lrow:active,
	.v2-panel--flat .v2-lrow:active { background: var(--tint); }

	.v2-panel .v2-lthumb,
	.v2-panel--flat .v2-lthumb,
	.v2-sect[data-style="Lead + list"] .v2-lthumb {
		order: 1;
		width: 118px;
		margin: 0;
		aspect-ratio: 16 / 10;
		border-radius: 8px;
	}

	.v2-panel .v2-ltext,
	.v2-panel--flat .v2-ltext,
	.v2-sect[data-style="Lead + list"] .v2-ltext {
		order: 2;
		height: auto;
		padding: 0;
		gap: 5px;
		align-content: start;
	}

	.v2-rt,
	.v2-sect[data-style="Lead + list"] .v2-rt {
		font-weight: 500;
		font-size: calc(15.5px * var(--tscale));
		line-height: 1.3;
		letter-spacing: -0.012em;
	}

	/* A row headline runs to three lines on a phone. */
	.v2-panel .v2-rt { -webkit-line-clamp: 3; }

	/* A card with no image should not leave a gap where one would be. */
	.v2-lthumb:not(:has(img)),
	.v2-cimg:not(:has(img)) { display: none; }

	/* ---- 4 · The Monday Rewind ----------------------------------------- */

	.v2-section:has(.v2-nl) {
		background: none;
		padding: 0 var(--pad);
	}

	.v2-nl {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin: 0;
		padding: 20px 18px;
		border: 1px solid var(--line);
		border-top: 4px solid var(--secondary);
		border-radius: 12px;
	}

	.v2-nl__kicker { gap: 8px; margin-bottom: 10px; font-size: 11px; }
	.v2-nl__kicker svg { width: 12px; height: 12px; }

	.v2-nl__copy h2 {
		margin: 0 0 8px;
		font-size: 22px;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}

	.v2-nl__copy p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; }

	.v2-nl .v2-nlform { display: grid; gap: 9px; }

	.v2-nl .v2-nlform input[type="email"] {
		font-size: 16px;
		padding: 13px 15px;
		min-height: 48px;
		width: 100%;
	}

	.v2-nl .v2-nlform button {
		width: 100%;
		font-size: 13.5px;
		padding: 14px 20px;
		min-height: 48px;
	}

	.v2-nl__foot { margin-top: 12px; gap: 12px; font-size: 11.5px; }
	.v2-nl__foot .v2-more { min-height: 0; min-width: 0; padding: 0; font-size: 11.5px; }

	/* ---- 6 · Team Briefings -------------------------------------------- */

	.v2-tbband { padding: 22px 0 26px; }
	.v2-tbinner { padding: 0; }

	.v2-tbhead {
		align-items: flex-end;
		gap: 14px;
		margin: 0;
		padding: 0 var(--pad) 14px;
	}

	.v2-tbtitles { display: block; }
	.v2-tbtitles h2 { margin: 0 0 5px; font-size: 24px; letter-spacing: 0.01em; }
	.v2-tbtitles span { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; }

	.v2-tbnav { gap: 8px; flex-shrink: 0; }

	.v2-tbnav .v2-arrow {
		width: 44px;
		height: 44px;
		border: 1px solid rgba(250, 247, 240, 0.32);
		background: none;
		color: var(--cream);
	}

	.v2-tbtrack { gap: 12px; padding: 2px var(--pad); }
	.v2-tb { width: 248px; height: 400px; border-radius: 16px; }
	.v2-tbimg { height: 268px; }
	.v2-tbtop { gap: 9px; padding: 14px; }
	.v2-tbbadge { width: 32px; height: 32px; font-size: 12px; }
	.v2-tbname { font-size: 16px; }
	.v2-tbbody { padding: 0 14px 14px; gap: 10px; }
	.v2-tbstatus { font-size: 9.5px; letter-spacing: 0.14em; }
	.v2-tbsum { font-size: 14px; line-height: 1.48; }
	.v2-ghost { height: 38px; font-size: 11.5px; letter-spacing: 0.12em; }

	/* ---- footer ---------------------------------------------------------
	   The phone footer is not the desktop one stacked: a 60px logo, a
	   shorter blurb, five round social buttons above the links, and two
	   columns of 40px targets. */

	.v2-finner { padding: 30px var(--pad) 24px; }
	.v2-ftop { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.v2-fbrand { display: contents; }
	.v2-flogo { order: 1; margin: 0; }
	.v2-flogo img { height: 60px; }
	.v2-fblurb { order: 2; margin: 8px 0 20px; font-size: calc(13px * var(--tscale)); line-height: 1.6; color: rgba(250, 247, 240, 0.66); }
	.v2-fsocial { order: 3; gap: 12px; margin: 0 0 28px; }

	.v2-fsocial a {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		border: 1px solid rgba(250, 247, 240, 0.35);
	}

	.v2-fsocial svg { width: 17px; height: 17px; }

	.v2-fcols {
		order: 4;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px 20px;
	}

	.v2-fhead {
		margin: 0;
		padding-bottom: 6px;
		font-size: calc(10.8px * var(--tscale));
		letter-spacing: 0.088em;
	}

	.v2-fcol ul { gap: 4px; font-size: calc(14.5px * var(--tscale)); }

	.v2-fcol a {
		display: flex;
		align-items: center;
		min-height: 40px;
		color: rgba(250, 247, 240, 0.8);
	}

	.v2-fbottom {
		margin-top: 26px;
		padding-top: 16px;
		display: grid;
		gap: 8px;
		font-size: calc(11.5px * var(--tscale));
		color: rgba(250, 247, 240, 0.5);
	}

	/* ---- chrome that the phone design does not carry -------------------- */

	.v2-fixbar { display: none; }
}

/* ==========================================================================
   25 · OTHER TEMPLATES ON A PHONE

   The sheet grid above is the homepage. Hubs get a sheet head; an article
   stays one measured column on paper rather than a stack of sheets.
   ========================================================================== */

@media (max-width: 767px) {
	/* Hubs */
	.v2-hubhead {
		background: var(--card);
		margin-bottom: 10px;
		padding: 18px var(--pad) 22px;
	}

	/* Search and 404 sit inside an unpadded main. */
	.v2-nf { padding-inline: var(--pad); }

	/* An article is not a sheet page — its wrap already carries the gutter. */
	.v2-article .v2-section,
	.v2-legal .v2-section,
	.v2-aboutpage .v2-section {
		background: none;
		margin-bottom: 0;
		padding-inline: 0;
	}

	.v2-article .v2-section:has(.v2-nl) { padding-inline: 0; }

	.v2-readnext {
		background: var(--card);
		margin-inline: calc(var(--pad) * -1);
		padding: 0 0 18px;
		margin-top: 34px;
	}

	.v2-readnext .v2-shead { padding-inline: var(--pad); }
	.v2-readnext .v2-nextgrid { padding-inline: var(--pad); }
}

/* ==========================================================================
   26 · STANDING PAGES — tablet and mobile

   The same treatment the rest of the theme gets: two columns become one,
   the sticky contents card stops sticking, and on a phone the sections
   become full-bleed sheets on paper.
   ========================================================================== */

@media (max-width: 1023px) {
	.v2-pggrid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 28px; }
	.v2-pgtoc { position: static; top: auto; }




	.v2-mrlatest { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.v2-mrrow { grid-template-columns: 130px minmax(0, 1fr) 20px; gap: 18px; }
}

@media (max-width: 767px) {
	/* Legal and About sit on sheets like every other mobile page. */
	.v2-legal,
	.v2-aboutpage { padding-inline: 0; }

	.v2-pghead { padding-inline: var(--pad); }

	.v2-pghead {
		background: var(--card);
		margin-bottom: 10px;
		padding-block: 18px 22px;
		border-bottom: 0;
	}

	.v2-legal .v2-crumb { padding-top: 16px; }

	.v2-pggrid { padding: 0 var(--pad); gap: 24px; }
	.v2-pgbody { font-size: 17.5px; line-height: 1.75; }
	.v2-pgbody h2 { font-size: 21px; margin-top: 22px; padding-top: 22px; scroll-margin-top: 90px; }
	.v2-pgtitle { font-size: clamp(28px, 8vw, 38px); }
	.v2-pgdek { font-size: 17px; }

	/* Contents first, so the reader can jump before reading. */
	.v2-pggrid { display: flex; flex-direction: column; }

	/* In a flex column, the base align-self: start would shrink the card to
	   its content width instead of filling the sheet. */
	.v2-pgrail { order: -1; align-self: stretch; }
	.v2-pgtoc { border-radius: var(--r); }


	/* Rewind */
	.v2-mrinner { padding: 36px var(--pad) 34px; }
	.v2-mrtitle { font-size: clamp(32px, 10vw, 44px); }
	.v2-mrdek { font-size: 17px; margin-top: 18px; }
	.v2-mrrule { margin-top: 18px; }
	.v2-mrinner .v2-signup { margin-top: 22px; }
	.v2-mrinner .v2-nlform input[type="email"] { flex: 1 1 100%; }
	.v2-mrinner .v2-nlform button { width: 100%; }

	.v2-rewindpage .v2-section { padding-inline: 0; }
	.v2-rewindpage .v2-kick,
	.v2-rewindpage .v2-shead { padding-inline: var(--pad); }

	.v2-mrlatest {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 20px var(--pad) 22px;
		border-radius: 0;
		border-inline: 0;
	}

	.v2-mrlt { font-size: clamp(24px, 7vw, 30px); margin: 10px 0 12px; }
	.v2-mrldek { font-size: 16.5px; }
	.v2-mrart { aspect-ratio: 16 / 9; }

	.v2-mrlist { border-radius: 0; border-inline: 0; }

	.v2-mrrow {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		padding: 15px var(--pad);
		align-items: start;
	}

	.v2-mrarrow { display: none; }
	.v2-mrat { font-size: 17px; }


	/* Pop-up */
	.v2-modal__panel { padding: 26px 20px 24px; }
	.v2-modal__title { font-size: clamp(22px, 6.4vw, 27px); }
	.v2-modal__dek { font-size: 16px; margin-bottom: 20px; }
	.v2-modal__wa { min-height: 54px; font-size: 13px; }
	.v2-modal .v2-nlform button { width: 100%; }

	/* Sections separate with paper, so the desktop rule would double up. */
	.v2-section { border-top: 0; }
}

/* ==========================================================================
   27 · ABOUT — built to "About - Ver 2.0" and "About Mob - Ver 2.0"
   ========================================================================== */

.v2-aboutpage .v2-crumb { padding: 22px 0 24px; }
.v2-aboutpage .v2-section--first { padding: 0 0 0; }

/* --- poster card and tiles ---------------------------------------------- */

.v2-collage {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 16px;
	align-items: stretch;
}

.v2-postercard {
	background: var(--primary);
	border-radius: var(--r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.v2-poster {
	aspect-ratio: 3 / 4;
	background: var(--tint);
	margin: 6px 6px 0;
	overflow: hidden;
	border-radius: 6px;
}

.v2-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.v2-posterplate {
	padding: 20px 22px 22px;
	border-top: 4px solid var(--secondary);
	margin-top: 6px;
}

.v2-postername {
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: clamp(24px, 3.2vw, 33px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cream);
	line-height: 1.05;
}

.v2-posterrole {
	margin-top: 8px;
	font-family: var(--eyebrow-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-tiles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 16px;
	min-height: 0;
}

.v2-tile {
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--tint);
}

.v2-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The green tile in the middle of the grid. */
.v2-qtile {
	min-height: 0;
	overflow: hidden;
	background: var(--green);
	border-radius: var(--r);
	padding: 17px 19px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
}

.v2-qtile__k {
	font-family: var(--eyebrow-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-qtile__t {
	font-family: var(--head-font);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.32;
	color: var(--cream);
	text-wrap: pretty;
}

/* --- bio ----------------------------------------------------------------- */

.v2-bio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
	gap: 48px;
	align-items: start;
	padding: 52px 0 0;
}

.v2-biocol { min-width: 0; }

.v2-biocol .v2-pgbody h1,
.v2-biocol > h1 {
	margin: 0 0 20px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 44px);
	line-height: 1.16;
	letter-spacing: -0.022em;
	color: var(--ink);
	text-wrap: pretty;
}

/* The About body is prose, not a numbered policy. */
.v2-aboutpage .v2-pgbody { font-size: calc(17.5px * var(--tscale)); line-height: 1.7; }
.v2-aboutpage .v2-pgbody p { margin: 0 0 26px; max-width: var(--measure); }
.v2-aboutpage .v2-pgbody p:last-child { margin-bottom: 0; }
.v2-aboutpage .v2-pgbody em { font-style: italic; }

.v2-aboutpage .v2-pgbody h2 {
	display: block;
	border-top: 0;
	padding-top: 0;
	margin: 30px 0 12px;
	font-size: 22px;
}

.v2-facts { display: grid; gap: 14px; align-content: start; }
.v2-fact { border-top: 1px solid var(--line); padding-top: 14px; }
.v2-fact:first-child { border-top: 3px solid var(--primary); }

.v2-fk {
	font-family: var(--eyebrow-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 3px;
}

.v2-fv { font-family: var(--body-font); font-size: 16px; line-height: 1.5; color: var(--ink); }
.v2-fsoc { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 9px; }

.v2-fsoc a {
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	background: var(--card);
}

.v2-fsoc a:hover { border-color: var(--primary); color: var(--primary); }
.v2-fsoc svg { width: 15px; height: 15px; }

/* --- the tinted band ----------------------------------------------------- */

.v2-aboutband {
	margin-top: 60px;
	background: var(--tint);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.v2-aboutband__inner { max-width: var(--w-hub); margin: 0 auto; padding: 52px var(--gutter); }

.v2-pgh2 {
	margin: 0 0 18px;
	font-family: var(--head-font);
	font-weight: var(--head-weight);
	font-size: calc(clamp(26px, 3.2vw, 36px) * var(--tscale));
	line-height: 1.22;
	letter-spacing: -0.024em;
	color: var(--ink);
	text-wrap: pretty;
}

.v2-pgh2--wide { max-width: 24ch; }

.v2-aboutband__intro {
	margin: 0;
	font-family: var(--body-font);
	font-size: 18.5px;
	line-height: 1.8;
	color: var(--ink);
	max-width: var(--measure);
	text-wrap: pretty;
}

.v2-pillars {
	margin-top: 38px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}

.v2-pillar {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--secondary);
	border-radius: var(--r);
	padding: 17px 18px 19px;
}

.v2-pillar__t {
	margin: 0 0 7px;
	font-family: var(--head-font);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: var(--ink);
}

.v2-pillar__b {
	margin: 0;
	font-family: var(--eyebrow-font);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink2);
}

.v2-rules {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 26px;
}

.v2-rule2 { min-width: 0; }

.v2-rule2__k {
	font-family: var(--eyebrow-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 7px;
}

.v2-rule2__t {
	margin: 0;
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 1.62;
	color: var(--ink);
	text-wrap: pretty;
}

/* --- contact -------------------------------------------------------------- */

.v2-aboutpage #contact { padding: 52px 0 0; }

.v2-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 44px;
	align-items: start;
	margin-top: 26px;
}

.v2-contact .v2-facts { gap: 18px; }

.v2-cform {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 22px;
	display: grid;
	gap: 12px;
	min-width: 0;
}

.v2-in {
	font-family: var(--ui-font);
	font-size: 15px;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
	color: var(--ink);
	width: 100%;
	box-sizing: border-box;
	display: block;
}

.v2-in:focus { border-color: var(--primary); outline: none; }
.v2-in::placeholder { color: var(--muted); }
textarea.v2-in { resize: vertical; min-height: 120px; line-height: 1.5; }

/* The design sets the submit to its own width, not the form's. */
.v2-cform .v2-btn {
	justify-self: start;
	min-height: 48px;
	padding: 14px 24px;
	border-radius: 0;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* --- tablet -------------------------------------------------------------- */

@media (max-width: 1023px) {
	.v2-collage { grid-template-columns: minmax(0, 1fr); }
	.v2-poster { aspect-ratio: 16 / 9; }
	.v2-tiles { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.v2-tiles > * { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 16 / 9; }
	.v2-bio { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.v2-contact { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.v2-pillars { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.v2-aboutband__inner { padding: 36px var(--gutter); }
	.v2-aboutband { margin-top: 40px; }
}

/* --- phone --------------------------------------------------------------- */

@media (max-width: 767px) {
	/* The page runs on paper; only the band is tinted. */
	.v2-aboutpage .v2-section { padding-inline: var(--pad); }
	.v2-aboutpage .v2-crumb { padding: 14px 0 12px; }

	.v2-aboutpage .v2-section--first { padding: 14px 0 0; }
	.v2-aboutpage .v2-section--first .v2-kick { padding-inline: var(--pad); }

	.v2-collage { gap: 0; }

	/* Poster card runs edge to edge, 4:3, with the plate under it. */
	.v2-postercard { border-radius: 0; }
	.v2-poster { aspect-ratio: 4 / 3; margin: 0; border-radius: 0; }
	.v2-posterplate { margin-top: 0; padding: 17px var(--pad) 19px; }
	.v2-postername { font-size: 27px; }
	.v2-posterrole { margin-top: 7px; font-size: 12px; }

	.v2-tiles {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 10px;
		padding: 14px var(--pad) 0;
	}

	.v2-tile,
	.v2-qtile { aspect-ratio: 4 / 3; border-radius: 8px; }
	.v2-qtile { padding: 14px; gap: 8px; }
	.v2-qtile__k { font-size: 10px; }
	.v2-qtile__t { font-size: 15.5px; line-height: 1.3; }

	/* The phone grid carries three images and the quote. */
	.v2-tiles .v2-tile:nth-of-type(4) { display: none; }

	.v2-aboutpage .v2-bio { padding: 26px var(--pad) 24px; gap: 24px; }

	.v2-biocol .v2-pgbody h1,
	.v2-biocol > h1 { margin: 0 0 16px; font-size: 27px; line-height: 1.26; }

	.v2-aboutpage .v2-pgbody { font-size: 17.5px; line-height: 1.78; }
	.v2-aboutpage .v2-pgbody p { margin: 0 0 24px; }

	.v2-facts { margin-top: 24px; gap: 0; }
	.v2-fact { padding: 13px 0; }
	.v2-fk { font-size: 10.5px; }
	.v2-fv { font-size: 15.5px; }

	/* Band */
	.v2-aboutpage .v2-aboutband { margin: 0; margin-inline: 0; }

	.v2-aboutband {
		border-top: 3px solid var(--secondary);
		border-bottom: 0;
	}

	.v2-aboutband__inner { padding: 20px var(--pad) 24px; }
	.v2-kick { gap: 9px; margin-bottom: 14px; }
	.v2-kick span:first-child { width: 20px; }
	.v2-kick span:last-child { font-size: 11.5px; }
	.v2-pgh2 { margin: 0 0 14px; font-size: 23px; line-height: 1.32; }
	.v2-aboutband__intro { font-size: 17.5px; line-height: 1.78; }

	.v2-pillars { margin-top: 24px; gap: 16px; }

	/* On a phone a pillar is a gold rule over text, not a card. */
	.v2-pillar {
		background: none;
		border: 0;
		border-top: 3px solid var(--secondary);
		border-radius: 0;
		padding: 13px 0 0;
	}

	.v2-pillar__b { font-size: 13.5px; }

	.v2-rules { margin-top: 24px; padding-top: 20px; gap: 18px; grid-template-columns: minmax(0, 1fr); }
	.v2-rule2__k { font-size: 10.5px; margin-bottom: 6px; }
	.v2-rule2__t { font-size: 15.5px; line-height: 1.6; }

	/* Contact */
	.v2-aboutpage #contact { padding: 24px var(--pad); }
	.v2-contact { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 18px; }
	.v2-contact .v2-facts { margin-top: 0; gap: 0; }
	.v2-fsoc { gap: 8px; margin-top: 16px; }
	.v2-cform { padding: 0; border: 0; background: none; border-radius: 0; }
	.v2-in { font-size: 16px; min-height: 48px; }
	.v2-cform .v2-btn { justify-self: stretch; font-size: 13.5px; }
}

/* ==========================================================================
   28 · THE DRAWER — built to the final design

   A panel of its own rather than a copy of the desktop menu: a log-in pill,
   four featured tiles, a two-column list of sports, the desk links, search
   and the call to action.
   ========================================================================== */

.v2-drawer__panel {
	width: min(88vw, 344px);
	padding: 14px 20px 34px;
}

.v2-dw__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.v2-dw__brand { display: flex; align-items: center; min-height: 44px; }
.v2-dw__brand img { height: 44px; width: auto; display: block; }

.v2-drawer__x { padding: 11px; margin-right: -11px; color: var(--cream); }

/* Section labels run to a hairline. */
.v2-dw__label { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }

.v2-dw__label > span:first-child {
	font-family: var(--eyebrow-font);
	font-size: calc(10.8px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--secondary);
}

.v2-dw__rule { flex: 1; height: 1px; background: rgba(250, 247, 240, 0.26); }

/* Featured — four tiles, two up. */
.v2-dw__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.v2-dw__tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	min-height: 98px;
	padding: 14px 13px;
	border: 1px solid rgba(250, 247, 240, 0.28);
	border-radius: 12px;
	color: var(--cream);
}

.v2-dw__tile:hover { border-color: var(--secondary); color: var(--cream); }
.v2-dw__tile .swj-navicon { color: var(--secondary); }

.v2-dw__tile span {
	font-family: var(--eyebrow-font);
	font-size: calc(10.6px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.25;
}

/* Sports — two columns of plain links. */
.v2-dw__sports { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }

.v2-dw__sports a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--ui-font);
	font-size: calc(15px * var(--tscale));
	color: rgba(250, 247, 240, 0.88);
}

.v2-dw__sports a:hover { color: var(--secondary); }

/* The desk — one quieter column. */
.v2-dw__desk { display: grid; gap: 2px; }

.v2-dw__desk a {
	display: flex;
	align-items: center;
	min-height: 42px;
	font-family: var(--ui-font);
	font-size: calc(14.5px * var(--tscale));
	color: rgba(250, 247, 240, 0.7);
}

.v2-dw__desk a:hover { color: var(--secondary); }

.v2-drawer__search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(250, 247, 240, 0.22);
	min-height: 44px;
	box-sizing: content-box;
	font-family: var(--ui-font);
	font-size: calc(15px * var(--tscale));
	color: rgba(250, 247, 240, 0.88);
}

.v2-drawer__search:hover { color: var(--secondary); }
.v2-drawer__search svg { flex-shrink: 0; }

.v2-drawer__cta {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 16px;
	padding: 16px;
	border: 0;
	border-radius: 8px;
	background: var(--secondary);
	color: var(--primary);
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: calc(12.5px * var(--tscale));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.v2-drawer__cta:hover { filter: brightness(0.94); }

/* ==========================================================================
   29 · SECTION HEADS — the final design's two kinds

   A sport section leads with its own mark and a Tenon headline. Everything
   else — Top stories, Latest, Read next — keeps the gold tick and the small
   green label.
   ========================================================================== */

.v2-shead--kicker .v2-sleft { gap: 12px; }
.v2-shead--kicker .v2-rule { width: 26px; height: 4px; }

.v2-shead--kicker h2 {
	font-family: var(--eyebrow-font);
	font-size: calc(12.2px * var(--tscale));
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.099em;
	text-transform: uppercase;
	color: var(--green);
}

/* A sport section swaps the tick for its mark. */
.v2-shead--sport .v2-sleft { gap: 12px; }
.v2-shead--sport .v2-rule { display: none; }
.swj-sportmark { flex-shrink: 0; color: var(--headline); }

/* Both heads sit on the same baseline. */
.v2-shead { align-items: flex-end; }
.v2-sleft { align-items: center; }

/* ==========================================================================
   30 · FOOTER — five routes, three columns
   ========================================================================== */

.v2-fhead {
	font-family: var(--eyebrow-font);
	font-size: calc(11.3px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.088em;
}

.v2-fcol ul { font-size: calc(14px * var(--tscale)); }
.v2-fblurb { font-size: calc(13.5px * var(--tscale)); }
.v2-fbottom { font-size: calc(12px * var(--tscale)); }

/* ==========================================================================
   31 · HERO LEAD AND THE REWIND CARD — the final design's two set pieces
   ========================================================================== */

/* The lead runs bigger than a card headline and carries a standfirst. */
.v2-hero .v2-lead .v2-t {
	font-size: calc(clamp(28px, 3.2vw, 40px) * var(--tscale));
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.v2-lead__dek {
	margin: 0;
	font-family: var(--body-font);
	font-size: calc(16px * var(--tscale));
	line-height: 1.6;
	color: var(--ink2);
	text-wrap: pretty;
}

.v2-hero .v2-lead .v2-cmeta { gap: 10px; justify-content: flex-start; flex-wrap: wrap; }

.v2-hero .v2-lead .v2-age {
	font-family: var(--eyebrow-font);
	font-size: calc(10.3px * var(--tscale));
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: var(--muted);
}

.v2-flag {
	top: 14px;
	left: 14px;
	font-family: var(--ui-font);
	font-size: calc(10.6px * var(--tscale));
	font-weight: 700;
	letter-spacing: 0.084em;
	padding: 6px 11px;
	border-radius: 0;
}

/* The Rewind card is parchment now, not navy. */
.v2-section:has(.v2-nl) > .v2-nl,
.v2-nl {
	background: #F1ECE1;
	border: 1px solid #E3DACA;
	border-top: 1px solid #E3DACA;
	border-radius: 14px;
	color: var(--ink);
	padding: 30px 32px 32px;
}

.v2-nl__kicker { color: var(--green); gap: 9px; margin-bottom: 12px; }
.v2-nl__kicker svg { color: var(--green); width: 13px; height: 13px; }
.v2-nl__kicker span { font-size: calc(11.3px * var(--tscale)); letter-spacing: 0.099em; }

.v2-nl__copy h2 {
	margin: 0 0 10px;
	font-weight: 500;
	font-size: calc(clamp(23px, 2.4vw, 30px) * var(--tscale));
	line-height: 1.14;
	letter-spacing: -0.028em;
	color: var(--ink);
}

.v2-nl__copy p { color: var(--ink2); font-size: calc(16.5px * var(--tscale)); line-height: 1.6; }

.v2-nl .v2-nlform input[type="email"] {
	border: 1px solid #D8CFBD;
	background: #FBF8F2;
	color: var(--ink);
	font-size: calc(15px * var(--tscale));
	padding: 15px 16px;
}

.v2-nl .v2-nlform input[type="email"]::placeholder { color: var(--muted); }

.v2-nl .v2-nlform button {
	background: var(--green);
	color: var(--cream);
	font-size: calc(12.5px * var(--tscale));
	letter-spacing: 0.06em;
}

.v2-nl .v2-nlform button:hover { background: var(--primary); filter: none; }
.v2-nl__foot { color: var(--muted); font-size: calc(12px * var(--tscale)); gap: 16px; margin-top: 14px; }
.v2-nl__foot > span { font-family: var(--ui-font); letter-spacing: 0; text-transform: none; }
.v2-nl .v2-formmsg.is-ok { color: var(--green); }
.v2-nl .v2-formmsg.is-error { color: #A3231F; }

/* ==========================================================================
   32 · TEAM BRIEFINGS — no arrows, and a plain link out
   ========================================================================== */

.v2-tbhead .v2-tbnav { display: none; }
.v2-tbtitles h2 { letter-spacing: 0.006em; }
.v2-tbtitles span { font-size: calc(11.3px * var(--tscale)); font-weight: 500; letter-spacing: 0.066em; }
.v2-tbstatus { font-size: calc(10px * var(--tscale)); letter-spacing: 0.077em; }
.v2-tbsum { font-size: calc(14.5px * var(--tscale)); line-height: 1.5; }
.v2-tbname { font-size: calc(17px * var(--tscale)); }

/* The pill is a text link in this design. */
.v2-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 7px;
	height: auto;
	border: 0;
	border-radius: 0;
	font-family: var(--eyebrow-font);
	font-size: calc(11px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.07em;
	color: var(--secondary);
}

a.v2-tb:hover .v2-ghost { color: var(--secondary); }

/* ==========================================================================
   33 · SEARCH — built to "Search - Ver 2.0" and "Search Mob - Ver 2.0"

   One field with no button, a row of sport filters, popular searches while
   nothing has been asked for, and results as thumbnail rows.
   ========================================================================== */

.v2-searchhead { padding: 34px 0 0; }
.v2-searchhead .v2-kick { margin-bottom: 16px; }

.v2-searchtitle {
	margin: 0 0 22px;
	font-family: var(--head-font);
	font-weight: var(--head-weight);
	font-size: calc(clamp(30px, 4.4vw, 44px) * var(--tscale));
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.v2-searchform { position: relative; display: block; margin: 0; }

.v2-searchicon {
	position: absolute;
	left: 19px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--muted);
	pointer-events: none;
}

.v2-searchfield {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--ui-font);
	font-size: calc(19px * var(--tscale));
	padding: 18px 18px 18px 54px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--secondary);
	border-radius: var(--r);
	background: var(--card);
	color: var(--ink);
	-webkit-appearance: none;
	appearance: none;
}

.v2-searchfield:focus {
	outline: none;
	border-color: var(--primary);
	border-top-color: var(--secondary);
}

/* Filters */
.v2-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.v2-pill {
	font-family: var(--ui-font);
	font-size: calc(13px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink2);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	padding: 9px 16px;
}

.v2-pill:hover { color: var(--primary); border-color: var(--primary); }
.v2-pill[data-on="true"] { background: var(--primary); border-color: var(--primary); color: var(--cream); }

/* Each sport pill leads with its own mark, which inherits the pill's ink so
   it turns with the pill on hover and when it is the one being asked for. */
.v2-pill { display: inline-flex; align-items: center; gap: 8px; }
.v2-pill__i { flex-shrink: 0; opacity: 0.9; }
.v2-pill:hover .v2-pill__i,
.v2-pill[data-on="true"] .v2-pill__i { opacity: 1; }

/* Popular searches, shown before anything is asked for. */
.v2-prompt { padding: 30px 0 0; }

.v2-prompt__label {
	margin: 0 0 13px;
	font-family: var(--eyebrow-font);
	font-size: calc(11.3px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.088em;
	text-transform: uppercase;
	color: var(--muted);
}

.v2-chipset { display: flex; flex-wrap: wrap; gap: 8px; }

.v2-chip {
	font-family: var(--ui-font);
	font-size: calc(14px * var(--tscale));
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	padding: 9px 17px;
}

.v2-chip:hover { color: var(--primary); border-color: var(--primary); }

.v2-prompt__note {
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	max-width: 56ch;
	font-family: var(--body-font);
	font-size: calc(16px * var(--tscale));
	line-height: 1.7;
	color: var(--ink2);
	text-wrap: pretty;
}

/* Results */
.v2-results { padding: 26px 0 0; margin: 0; background: none; border: 0; border-radius: 0; }

.v2-results__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 14px;
}

.v2-results__count {
	font-family: var(--ui-font);
	font-size: calc(13px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.v2-results__clear {
	font-family: var(--ui-font);
	font-size: calc(11.5px * var(--tscale));
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--green);
}

.v2-results__list {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

.v2-srow {
	display: grid;
	grid-template-columns: 136px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 16px;
	border-top: 1px solid var(--line);
	color: var(--ink);
	transition: background 0.14s ease;
}

.v2-srow:first-child { border-top: none; }
.v2-srow:hover { background: var(--tint); color: var(--ink); }

.v2-sthumb {
	width: 136px;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tint);
}

.v2-sthumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.v2-stext { min-width: 0; }

.v2-srt {
	margin: 5px 0 5px;
	font-family: var(--head-font);
	font-weight: 500;
	font-size: calc(19px * var(--tscale));
	line-height: 1.3;
	letter-spacing: -0.014em;
	text-wrap: pretty;
	transition: color 0.14s ease;
}

.v2-srow:hover .v2-srt { color: var(--headline); }
.v2-srow .v2-m { display: block; font-size: calc(12px * var(--tscale)); }

/* Nothing matched */
.v2-noresults {
	margin: 30px 0 0;
	padding: 40px 28px;
	background: var(--tint);
	border: 1px solid var(--line);
	border-top: 3px solid var(--secondary);
	border-radius: var(--r);
	text-align: center;
}

.v2-noresults__t {
	margin-bottom: 8px;
	font-family: var(--head-font);
	font-weight: var(--head-weight);
	font-size: calc(23px * var(--tscale));
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.v2-noresults p {
	margin: 0 auto 20px;
	max-width: 44ch;
	font-family: var(--body-font);
	font-size: calc(16.5px * var(--tscale));
	line-height: 1.65;
	color: var(--ink2);
	text-wrap: pretty;
}

.v2-noresults__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 24px;
	background: var(--secondary);
	color: var(--primary);
	font-family: var(--ui-font);
	font-weight: 700;
	font-size: calc(12.5px * var(--tscale));
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.v2-noresults__btn:hover { filter: brightness(0.94); color: var(--primary); }

@media (max-width: 1023px) {
	.v2-srow { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
	.v2-sthumb { width: 120px; }
	.v2-searchfield { font-size: calc(17px * var(--tscale)); padding: 16px 16px 16px 48px; }
}

@media (max-width: 767px) {
	/* The head, the filters, the prompt and the results are each a sheet. */
	.v2-searchhead { padding: 14px var(--pad) 0; background: var(--card); }
	.v2-searchhead .v2-kick { margin-bottom: 12px; gap: 9px; }
	.v2-searchhead .v2-kick span:first-child { width: 20px; }
	.v2-searchhead .v2-kick span:last-child { font-size: calc(10.8px * var(--tscale)); }

	.v2-searchtitle {
		margin-bottom: 16px;
		font-size: calc(28px * var(--tscale));
		line-height: 1.18;
	}

	.v2-searchicon { left: 15px; }
	.v2-searchicon svg { width: 20px; height: 20px; }

	.v2-searchfield {
		font-size: calc(16px * var(--tscale));
		padding: 15px 15px 15px 46px;
		border-radius: 8px;
		min-height: 52px;
	}

	/* Filters swipe rather than wrap. */
	.v2-filters {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		margin: 0;
		padding: 14px var(--pad) 2px;
		background: var(--card);
	}

	.v2-pill {
		flex-shrink: 0;
		white-space: nowrap;
		font-size: calc(12.5px * var(--tscale));
		padding: 9px 15px;
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}

	.v2-prompt {
		background: var(--card);
		padding: 22px var(--pad) 26px;
		margin-bottom: 10px;
	}

	.v2-prompt__label { font-size: calc(10.3px * var(--tscale)); margin-bottom: 12px; }
	.v2-chip { font-size: calc(13px * var(--tscale)); padding: 10px 16px; min-height: 40px; display: inline-flex; align-items: center; }
	.v2-prompt__note { margin-top: 22px; padding-top: 20px; font-size: calc(16px * var(--tscale)); line-height: 1.66; }

	.v2-results { background: var(--card); padding: 18px 0 22px; margin-bottom: 10px; }
	.v2-results__head { padding: 0 var(--pad) 10px; gap: 12px; }
	.v2-results__count { font-size: calc(12px * var(--tscale)); letter-spacing: 0.05em; }
	.v2-results__clear { flex-shrink: 0; font-size: calc(10.6px * var(--tscale)); }
	.v2-results__list { background: none; border: 0; border-radius: 0; }

	/* Text first, thumbnail second. */
	.v2-srow {
		grid-template-columns: minmax(0, 1fr) 104px;
		gap: 13px;
		align-items: center;
		padding: 14px var(--pad);
	}

	.v2-stext { order: 1; }
	.v2-sthumb { order: 2; width: 104px; border-radius: 6px; }
	.v2-srow:active { background: var(--tint); }
	.v2-srt { margin: 5px 0 4px; font-size: calc(16px * var(--tscale)); }
	.v2-srow .v2-m { font-size: calc(11px * var(--tscale)); }

	.v2-noresults {
		margin: 20px var(--pad) 0;
		padding: 28px 20px;
		border-radius: 10px;
		border: 0;
		border-top: 3px solid var(--secondary);
	}

	.v2-noresults__t { font-size: calc(21px * var(--tscale)); }
	.v2-noresults p { margin-bottom: 18px; font-size: calc(15.5px * var(--tscale)); line-height: 1.62; }
	.v2-noresults__btn { width: 100%; }
}