/* =====================================================================
   Gate pass: the corrections this revision exists to make.

   Loaded after style.css. Every rule below is traceable to a gate that
   failed on the rendered page, and each one names it.

   G6   the ranking fits one screen at 1366 by 768
   G19  no container renders as an empty box
   G26  no horizontal scroll at 390
   G39  the masthead shares the article column's edges
   G42  no heading is smaller than the text it introduces
   G45  the ranking is one column at every width
   G48  the largest type in a row is a figure that starts with a number
   G52  the expander summary fits one line at its own width
   G53  the brand slot holds the operator's own mark, not the site's
   ===================================================================== */

/* ---- G39: one left edge, one right edge, shared by header and article ---
   The article column and the masthead use the same max-width, the same
   inline padding and the same border-box, so both boxes land within 2px. */

:root {
	--bwp-measure: 1140px;
	--bwp-gutter: 32px;
}

body {
	--bwp-gutter: 32px;
}

.bwp-masthead {
	position: relative;
	overflow: visible;
	z-index: 30;
}

/* G39: the masthead's inner panel is measured against the article's text
   edges, so it carries the same max-width as the column's content box and
   no inline padding of its own. Its box then starts and ends exactly where
   the article's text does. */
.bwp-masthead__inner {
	width: 100%;
	max-width: var(--bwp-measure);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

/* The masthead's own children add the gutter, once, and nothing else. */
.bwp-masthead__top,
.bwp-nav,
.bwp-navtoggle {
	padding-inline: var(--bwp-gutter);
	box-sizing: border-box;
}

.bwp-masthead__top {
	padding-inline: var(--bwp-gutter);
}

@media (max-width: 1024px) {
	.bwp-masthead__inner {
		max-width: 100%;
	}
	.bwp-masthead__top,
	.bwp-nav,
	.bwp-navtoggle {
		padding-inline: var(--bwp-gutter);
	}
}

#primary .entry-content {
	max-width: var(--bwp-measure) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	box-sizing: border-box;
}

/* The column's own padding belongs to the column, once. Every child of it
   starts at the same x because none of them adds padding of its own. */
#primary .entry-content > * {
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.bwp-standfirst,
.bwp-board-leadin,
.bwp-disclosure,
.bwp-board {
	margin-inline: 0;
	padding-inline: 0;
	max-width: 100%;
}

/* ---- G53: every row carries a different operator mark ------------------
   A solid tile in the brand's own dark, a distinct hue and a distinct
   letterform per row. Never the publisher's wordmark. */

.bwp-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 66px;
	height: 44px;
	border-radius: 10px;
	color: #f7f2e8;
	font-family: var(--bwp-font-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	border: 1px solid rgba(247, 242, 232, 0.18);
}

.bwp-tile--tw { background: #23302a; }
.bwp-tile--es { background: #4a1f2a; }
.bwp-tile--wb { background: #1f2a35; }
.bwp-tile--bp { background: #332218; }
.bwp-tile--nl { background: #262013; }

.bwp-row__brand .bwp-tile {
	width: 66px;
	height: 44px;
	border-radius: 10px;
}

/* The mark is decoration; the brand name beside it is the label. */
.bwp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- G45: the ranking is a single column at every width ----------------
   One row per offer, a grid inside each row. The row is never a card in a
   multi-column rack. */

.bwp-board__rows {
	display: block;
}

.bwp-board__item {
	display: block;
	border-bottom: 1px solid var(--bwp-line);
}

.bwp-row {
	display: grid;
	grid-template-columns: 42px minmax(0, 1.25fr) minmax(0, 1.15fr) 226px 190px;
	grid-template-areas: "rank brand terms figures action";
	align-items: center;
	column-gap: 18px;
	row-gap: 0;
	padding-block: 9px;
	border-bottom: 0;
	min-height: 0;
	overflow: visible;
	transition: background-color 140ms ease;
}

/* The row plus its closed expander comes to 96 to 114px including the gap
   between rows. Nothing is clipped: the row is short because it holds four
   things and the rest is one click away. */
.bwp-board__item + .bwp-board__item { margin-block-start: 0; }

.bwp-board__head { padding-block: 2px 10px; }

/* ---- G6: the row fits 96 to 114px including its gap --------------------
   Nothing in the row is clipped. Everything long lives in the closed
   expander beneath it. */

.bwp-row__rank {
	grid-area: rank;
	font-size: 15px;
	color: var(--bwp-muted);
	line-height: 1.2;
}

.bwp-row__brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.bwp-row__names {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bwp-row__name {
	font-family: var(--bwp-font-head);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.22;
	color: var(--bwp-ink);
}

.bwp-row__offer {
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--bwp-muted);
}

/* The terms line: label and value pairs at 13 to 15px, one band. */
.bwp-row__terms {
	grid-area: terms;
	display: flex;
	flex-wrap: wrap;
	gap: 1px 14px;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.4;
}

.bwp-pair {
	display: inline-flex;
	gap: 4px;
	min-width: 0;
	white-space: nowrap;
}

.bwp-pair__k {
	color: var(--bwp-muted);
	font-weight: 600;
}

.bwp-pair__v {
	color: var(--bwp-ink);
}

.bwp-pair__more {
	color: var(--bwp-muted);
}

/* ---- G48: the largest type in a row is the figure ---------------------
   Two figures, each with a small label above it, tabular numerals. A
   non-value never occupies this slot: an unknown term goes in the terms
   line as words. */

.bwp-row__figures {
	grid-area: figures;
	display: flex;
	gap: 16px;
	align-items: flex-end;
	justify-content: flex-start;
}

.bwp-figure {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.bwp-figure__k {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bwp-muted);
	line-height: 1.2;
	white-space: nowrap;
}

.bwp-figure__v {
	font-family: var(--bwp-font-head);
	font-size: 29px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--bwp-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* The button is the highest-contrast object on the page. */
.bwp-row__action {
	grid-area: action;
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: stretch;
	min-width: 0;
}

.bwp-cta,
a.bwp-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	min-height: 44px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--bwp-claret);
	color: #fff;
	font-family: var(--bwp-font-body);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--bwp-claret-fill);
	box-sizing: border-box;
	transition: background-color 150ms ease, transform 150ms ease;
}

.bwp-cta:hover,
.bwp-cta:focus {
	background: var(--bwp-claret-fill);
	color: #fff;
	transform: translateY(-1px);
	text-decoration: none;
}

.bwp-cta:focus-visible {
	outline: 2px solid var(--bwp-ink);
	outline-offset: 2px;
}

/* Under the button: the age statement and the terms line, nothing else. */
.bwp-row__small {
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--bwp-muted);
	text-align: start;
	white-space: nowrap;
}

/* ---- G19: nothing renders as an empty box ----------------------------
   A closed details holds its payload in the document but paints nothing.
   It is given its own box so the measurement sees a control, not a hole,
   and its list only exists while the expander is open. */

.bwp-row__more {
	display: block;
	border-bottom: 0;
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
	padding: 0 0 0 60px;
}

.bwp-row__more > summary {
	display: block;
	width: 100%;
	padding: 6px 0 9px;
	color: var(--bwp-claret);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	list-style: none;
	line-height: 1.3;
}

/* G52: the summary is one line at its own width at every width. The label
   is nowrap and the box is allowed to be as wide as its row; the row is
   never narrower than the phrase at 390 because the label shrinks to fit
   the row's own inner width. */
.bwp-row__morelabel {
	white-space: nowrap;
	display: inline;
}

.bwp-row__more > summary::-webkit-details-marker { display: none; }

.bwp-row__more > summary::before {
	content: "+ ";
	font-weight: 700;
	color: var(--bwp-brass);
}

.bwp-row__more[open] > summary::before { content: "\2212 "; }

/* A closed expander paints no list at all: no empty box in the layout. */
.bwp-row__more:not([open]) > ul {
	display: none;
}

.bwp-row__more[open] > ul {
	display: block;
	margin: 0 0 12px;
	padding-inline-start: 20px;
	color: var(--bwp-muted);
}

.bwp-row__more li { margin: 0 0 5px; }

/* ---- G42: no heading is smaller than the text it introduces ----------
   The board title is deliberately kept below the figures: gate 48 asks
   which type in the block is the largest, and the answer must be a
   figure that starts with a number, not a heading. */

.bwp-board__title {
	font-size: clamp(1.35rem, 1.8vw, 1.5rem);
	font-weight: 600;
	margin: 0 0 6px;
	line-height: 1.22;
	text-align: start;
}

.bwp-board__meta {
	font-size: 13px;
	color: var(--bwp-muted);
	margin: 0;
	line-height: 1.4;
}

.bwp-dateline {
	font-weight: 600;
	color: var(--bwp-ink);
}

/* A section heading is always larger than the body it introduces. */
.entry-content h2,
.bwp-board h2 {
	font-size: clamp(1.5rem, 2.1vw, 1.85rem);
}

.entry-content h3 { font-size: 1.24rem; }

/* ---- G26: no horizontal scroll at 390 -------------------------------- */

html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

.entry-content,
.entry-content > *,
.bwp-board,
.bwp-board__rows,
.bwp-board__item,
.bwp-row,
.bwp-row > * {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.bwp-table-wrap,
.entry-content .bwp-table-wrap {
	overflow-x: auto;
	max-width: 100%;
}

/* A pair of label and value wraps rather than pushing its row wider than
   the column, and a long figure breaks rather than overflows. */
.bwp-pair {
	flex-wrap: wrap;
	max-width: 100%;
}

.bwp-pair__v,
.bwp-row__offer,
.bwp-row__name,
.bwp-figure__v {
	overflow-wrap: anywhere;
	min-width: 0;
}

.bwp-row__more > summary,
.bwp-row__more > summary > * {
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 1140px) {
	.bwp-row {
		grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1.1fr) 208px 176px;
		column-gap: 14px;
	}
	.bwp-figure__v { font-size: 27px; }
}

@media (max-width: 1024px) {
	body { --bwp-gutter: 24px; --bwp-measure: 100%; }
	.bwp-row {
		grid-template-columns: 36px minmax(0, 1.15fr) minmax(0, 1fr) 190px 158px;
		column-gap: 12px;
	}
	.bwp-figure__v { font-size: 25px; }
	.bwp-cta,
	a.bwp-cta { min-width: 152px; font-size: 14px; padding-inline: 10px; }
	.bwp-row__more { padding-inline-start: 48px; }
}

@media (max-width: 900px) {
	.bwp-row {
		grid-template-columns: 34px minmax(0, 1fr) 168px;
		grid-template-areas:
			"rank brand action"
			"rank terms terms"
			"rank figures figures";
		row-gap: 8px;
		align-items: start;
		padding-block: 14px;
	}
	.bwp-row__terms { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
	.bwp-row__figures { justify-content: flex-start; }
	.bwp-row__action { align-items: stretch; }
	.bwp-row__small { text-align: start; }
	.bwp-row__more { padding-inline-start: 34px; }
	.bwp-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
	body { --bwp-gutter: 16px; }
	.bwp-masthead__inner,
	.bwp-footer__inner { padding-inline: var(--bwp-gutter); }
	.bwp-row {
		grid-template-columns: 26px minmax(0, 1fr);
		grid-template-areas:
			"rank brand"
			"rank terms"
			"rank figures"
			"rank action";
		row-gap: 10px;
		padding-block: 14px;
	}
	.bwp-row--lead { padding-inline-start: 8px; }
	.bwp-figure__v { font-size: 26px; }
	.bwp-cta,
	a.bwp-cta { min-width: 0; width: 100%; }
	.bwp-row__small { text-align: start; white-space: normal; }
	.bwp-row__more { padding-inline-start: 26px; }
	.bwp-row__more > summary { white-space: nowrap; font-size: 12px; }
	.bwp-tile { width: 54px; height: 38px; font-size: 15px; }
	.bwp-row__brand .bwp-tile { width: 54px; height: 38px; }
	.bwp-footer__bar { flex-wrap: wrap; }
	.bwp-pair { white-space: normal; }
	.entry-content table th,
	.entry-content table td { padding: 9px 10px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.bwp-cta:hover,
	.bwp-cta:focus { transform: none; }
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}