/* ============================================================
   Radio KG — Transmission Board
   Written once, cleanly. No layered overrides, no !important.

   Three rules hold this design together:
     1. A rule organises, a frame encloses — hairlines only, never boxes.
     2. Nothing repeats — asymmetry does the work a card grid cannot.
     3. The phone gets its own design, not the desktop collapsed.
   ============================================================ */

/* ============================================================
   PALETTE

   Every colour on the page comes from this block, so the whole
   design can be re-pitched by swapping eighteen values. The
   alternatives live at the foot of this file under [data-pal].

   Reading colours are neutral on purpose: a warm cream (#EDEAE2)
   over a blue-black ground reads as yellow, because the eye judges
   text against what is behind it. The accent stays on broadcast
   marks — times, play buttons, links, the on-air dot — and never
   on text.
   ============================================================ */

.rkg-tx{
	/* NEWSROOM — 25 Aug 2026. The structure of this design stays; its clothes
	   change. Readers of Somali news arrive expecting white paper, bold sans
	   headlines and a coloured band across the top, and the cream-and-Bodoni
	   version read as foreign to them. The unusual part — the broadcast log,
	   the editorial split, the live board — is kept, because that is the part
	   worth being unusual about. Familiar clothes, same bones. */
	--night:#FFFFFF; --panel:#F4F6F9; --hair:#DCE1E7;
	--band:#0E3A66; --band-on:#FFFFFF; --band-2:#9DB6CE;
	--brass:#0E5AA7; --brass-d:#7FA3C6;
	--gold:#D6A93F;
	--bone:#11161C; --bone-2:#49525C; --bone-3:#7A838D;
	--live:#C8102E;
	--read:#1F262E; --quiet:#2C343D;
	--side:#39434E; --side-hi:#11161C; --side-dim:#7A838D; --slip:#49525C;
	--ph:#A8B0B8; --media-1:#DCE2E8; --media-2:#C4CCD4;
	--blue:#12467F; --blue-on:#FFFFFF;
	/* text laid over a photograph stays light in every palette */
	--over:#F4F5F7;

	/* Type scale. Every font size in this file is stated as N * --t, so the
	   whole page can be set larger for readers who need it without any rule
	   being re-tuned by hand. The default already sits above the browser
	   norm; the two steps above it are for older eyes. */
	--t:1.2;
	/* A news grotesque, not a fashion serif. Bodoni is beautiful and it is
	   what made the page read as a magazine rather than a newspaper. */
	--display:"Archivo","Inter Tight",-apple-system,"Segoe UI",system-ui,sans-serif;
	--ui:"Inter Tight",-apple-system,"Segoe UI",system-ui,sans-serif;
	--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
	--gut:26px;

	margin:0;background:var(--night);color:var(--bone);
	font-family:var(--ui);-webkit-font-smoothing:antialiased;
}

/* ---------- holding the ground ----------
   37 inline <style> blocks are printed into wp_head by other plugins and
   cannot be dequeued, and several set body background and colour. These two
   declarations are the only !important in the file: they exist so the page
   cannot be repainted underneath us. Every headline below states its colour
   rather than inheriting, for the same reason. */

html body.rkg-tx{background:var(--night) !important;color:var(--bone) !important}

.rkg-tx *{box-sizing:border-box}
.rkg-tx img{max-width:100%;display:block}
.rkg-tx a{text-decoration:none;color:inherit}
.rkg-tx h1,.rkg-tx h2,.rkg-tx h3,.rkg-tx h4,.rkg-tx p{margin:0}
.rkg-tx :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.rkg-tx button{font:inherit;background:transparent;border:none;cursor:pointer;color:inherit;padding:0}

.tx-mast__in,.tx-nav__in,.tx-page,.tx-foot__in{max-width:1620px;margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- shared marks ---------- */

.tx-colhead{
	font:500 calc(11.5px * var(--t))/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
	color:var(--bone-3);padding-bottom:13px;margin-bottom:16px;
	border-bottom:1px solid var(--hair);
	display:flex;align-items:center;gap:8px;
}
.tx-live{width:5px;height:5px;background:var(--live);border-radius:50%}
.tx-col--log .tx-colhead{color:var(--brass)}
.tx-cat{display:block;font:500 calc(10px * var(--t))/1 var(--mono);letter-spacing:.16em;color:var(--bone-3)}
.tx-ph{display:grid;place-items:center;height:100%;font:500 calc(9.5px * var(--t))/1.6 var(--mono);letter-spacing:.16em;color:var(--ph);text-align:center}

/* ---------- masthead ---------- */

.tx-mast{border-bottom:1px solid var(--hair)}
.tx-mast__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--gut);min-height:82px}

.tx-brand{display:flex;align-items:center;gap:13px}
.tx-brand__mark{display:flex;align-items:flex-end;gap:3px;height:30px}
.tx-brand__mark i{width:3px;background:var(--brass);display:block}
.tx-brand__mark i:nth-child(1){height:30%}.tx-brand__mark i:nth-child(2){height:58%}
.tx-brand__mark i:nth-child(3){height:100%}.tx-brand__mark i:nth-child(4){height:58%}
.tx-brand__mark i:nth-child(5){height:30%}.tx-brand__mark i:nth-child(6){height:72%}
.tx-brand__mark i:nth-child(7){height:42%}
.tx-brand__name{display:block;color:var(--bone);font:700 calc(31px * var(--t))/1 var(--display);letter-spacing:.01em}
.tx-brand__name em{font-style:italic;color:var(--brass)}
.tx-brand__sub{display:block;margin-top:7px;font:500 calc(9.5px * var(--t))/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--bone-3)}
.tx-brand__sub i{font-style:normal;color:var(--brass-d);margin:0 6px}

.tx-signal{display:flex;align-items:center;gap:13px;justify-self:center}
.tx-signal__btn{color:var(--brass);font-size:calc(15px * var(--t));line-height:1}
.tx-signal__wave{display:flex;align-items:center;gap:2px;height:22px}
.tx-signal__wave i{width:2px;background:var(--brass-d);display:block;animation:tx-pulse 1.4s ease-in-out infinite}
.tx-signal__wave i:nth-child(odd){background:var(--brass)}
.tx-signal__wave i:nth-child(1){height:30%;animation-delay:0s}
.tx-signal__wave i:nth-child(2){height:62%;animation-delay:.1s}
.tx-signal__wave i:nth-child(3){height:88%;animation-delay:.2s}
.tx-signal__wave i:nth-child(4){height:46%;animation-delay:.3s}
.tx-signal__wave i:nth-child(5){height:74%;animation-delay:.4s}
.tx-signal__wave i:nth-child(6){height:34%;animation-delay:.5s}
.tx-signal__wave i:nth-child(7){height:58%;animation-delay:.6s}
.tx-signal__wave i:nth-child(8){height:26%;animation-delay:.7s}
@keyframes tx-pulse{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.tx-signal__wave i{animation:none}}
.tx-signal__label{display:block;font:500 calc(8.5px * var(--t))/1 var(--mono);letter-spacing:.2em;color:var(--brass)}
.tx-signal__name{display:block;color:var(--bone);font:600 calc(14px * var(--t))/1 var(--ui);margin-top:5px}

.tx-clock{text-align:right}
.tx-clock__t{color:var(--bone);font:500 calc(17px * var(--t))/1 var(--mono);font-variant-numeric:tabular-nums}
.tx-clock__c{font:500 calc(8.5px * var(--t))/1 var(--mono);letter-spacing:.2em;color:var(--bone-3);margin-top:5px}

/* ---------- nav: hides nothing ---------- */

.tx-nav{border-bottom:1px solid var(--hair)}
.tx-nav__in{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding-top:9px;padding-bottom:9px;column-gap:8px}
.tx-nav__in li{list-style:none}
.tx-nav__in a{display:block;font:500 calc(13px * var(--t))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2);padding:12px 26px 12px 0}
.tx-nav__in a:hover{color:var(--brass)}

/* ---------- page ---------- */

/* language switch — Luqad's ?lang= links, rebuilt for this header */
/* ---------- the language switch ----------
   Bilingual publishing is the thing this site does that others here do not,
   and it was set as the quietest text on the page. This is the one control
   allowed to be a control: a single bordered group in ink blue, carrying its
   own label so a reader knows what it offers before reading the options.
   It is the only enclosed shape in the design — kept to one, so it reads as
   deliberate rather than as a stray box. */

.tx-lang{
	display:inline-flex;align-items:stretch;margin-left:auto;
	border:1px solid var(--blue);border-radius:2px;overflow:hidden;
}
.tx-lang__l{
	display:flex;align-items:center;
	font:500 calc(9.5px * var(--t))/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
	color:var(--blue-on);background:var(--blue);padding:0 12px;
}
.tx-lang a{
	display:flex;align-items:center;
	font:500 calc(11px * var(--t))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
	color:var(--blue);padding:11px 14px;
	border-left:1px solid var(--blue);
	transition:background .16s ease,color .16s ease;
}
.tx-lang a:hover{background:var(--blue);color:var(--blue-on)}
.tx-lang a.is-on{background:var(--blue);color:var(--blue-on)}

@media (max-width:900px){
	.tx-lang{margin-left:0;margin-top:10px;margin-bottom:10px}
	.tx-lang a{padding:11px 12px}
}
@media (max-width:420px){
	.tx-lang{width:100%}
	.tx-lang a{flex:1;justify-content:center;padding:11px 6px;font-size:calc(10px * var(--t))}
}

.tx-page{padding-bottom:80px}

/* board: log | lead | also */
.tx-board{display:grid;grid-template-columns:250px 1fr 300px;border-bottom:1px solid var(--hair)}
.tx-col{padding:24px 0;min-width:0}
.tx-col+.tx-col{border-left:1px solid var(--hair);padding-left:var(--gut);margin-left:var(--gut)}

.tx-log a{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.tx-log a:last-child{border-bottom:none}
.tx-log time{font:500 calc(13px * var(--t))/1.3 var(--mono);color:var(--brass-d);font-variant-numeric:tabular-nums}
/* the log is the one place brass earns its keep: these are broadcast times */
.tx-log h4{font:500 calc(16.5px * var(--t))/1.38 var(--ui);color:var(--bone-2)}
.tx-log a:hover h4{color:var(--bone)}
.tx-log a:hover time{color:var(--brass)}

/* ---------- photo grade ----------
   Not a flat grayscale duotone: faces go grim and a news page looks
   funereal. Colour is kept and pushed — contrast and saturation lifted,
   a warm brass wash through the highlights, charcoal weight in the
   shadows, and a soft vignette so the subject lifts off the page.
   Mixed wire photos still come out looking like one publication. */

.tx-media{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(160deg,var(--media-1),var(--media-2))}
.tx-media img{
	width:100%;height:100%;object-fit:cover;
	filter:contrast(1.16) saturate(1.14) brightness(.95);
	transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .4s ease;
}

/* Film grain. Wire photos arrive from a dozen sources at a dozen qualities;
   a fine grain laid over all of them in overlay blend is what makes them read
   as one publication rather than a folder of downloads. It is also the one
   thing a template will not have — generated here, no image file to load. */
.tx-media::before{
	content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size:160px 160px;
	mix-blend-mode:overlay;opacity:.26;
	transition:opacity .4s ease;
}
a:hover .tx-media::before{opacity:.16}

/* Light with a direction. A vignette on its own is flat and everyone has one;
   this puts a warm key over the top-left and lets the weight fall away to the
   lower right, so a photograph has a light source instead of just edges. */
.tx-media::after{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	background:
		radial-gradient(115% 85% at 20% -6%, rgba(214,177,96,.20), transparent 58%),
		linear-gradient(148deg, rgba(12,14,18,0) 38%, rgba(8,10,14,.58) 100%);
	box-shadow:inset 0 0 100px 22px rgba(8,10,14,.5);
}

/* a slow push on hover; still on phones and for reduced motion */
a:hover > .tx-media img,
a:hover .tx-media img{transform:scale(1.035);filter:contrast(1.18) saturate(1.24) brightness(1)}
@media (prefers-reduced-motion:reduce){.tx-media img{transition:none}a:hover .tx-media img{transform:none}}

.tx-lead__media{aspect-ratio:21/9}
.tx-lead__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 100px 22px rgba(8,10,14,.5);background:radial-gradient(110% 80% at 18% -8%, rgba(214,177,96,.16), transparent 56%),linear-gradient(180deg,transparent 34%,rgba(10,12,16,.42) 64%,rgba(10,12,16,.95))}
.tx-lead__over{position:absolute;inset:auto 0 0 0;z-index:3;padding:30px 32px}
.tx-slug{display:inline-block;font:500 calc(9.5px * var(--t))/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--live);margin-bottom:10px}
.tx-lead__h{color:var(--over);font:700 clamp(calc(32px * var(--t)),calc(3.5vw * var(--t)),calc(62px * var(--t)))/1.03 var(--display);letter-spacing:-.012em;max-width:20ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.65)}
.tx-lead:hover .tx-lead__h{color:var(--brass)}
.tx-lead__sum{font:400 calc(18.5px * var(--t))/1.6 var(--ui);color:var(--bone-2);margin-top:14px;max-width:60ch}
.tx-lead__foot{margin-top:16px;padding-top:13px;border-top:1px solid var(--hair);display:flex;gap:18px;font:500 calc(10px * var(--t))/1 var(--mono);letter-spacing:.14em;color:var(--bone-3)}

.tx-also a{display:block;padding:14px 0;border-bottom:1px solid var(--hair)}
.tx-also a:first-child{padding-top:0}
.tx-also a:last-child{border-bottom:none}
.tx-also h4{color:var(--bone);font:600 calc(19px * var(--t))/1.28 var(--display);margin-top:7px;text-wrap:balance}
.tx-also a:hover h4{color:var(--brass)}

/* signal rule — the logo as punctuation */
.tx-sigrule{display:flex;align-items:flex-end;gap:3px;height:12px;opacity:.32}
.tx-sigrule i{flex:1;background:var(--brass-d)}
.tx-sigrule i:nth-child(3n){height:88%}
.tx-sigrule i:nth-child(3n+1){height:34%}
.tx-sigrule i:nth-child(3n+2){height:60%}

/* editorial split — one story with weight, one index with none */
/* align-items:start matters here. Without it the grid stretches the feature
   column to the height of the index beside it, and because the feature aligns
   its own contents to the bottom, the photograph sank to the foot of a tall
   empty cell — the exact hole this layout exists to avoid. */
.tx-split{display:grid;grid-template-columns:1.5fr 1fr;border-bottom:1px solid var(--hair);align-items:start}
.tx-feature{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:30px var(--gut) 30px 0;align-items:end}
/* The headline sits on the base of the photograph rather than beside its
   middle. The air then collects at the top, under the section rule, where it
   reads as space — not as a hole punched beside the text. */
.tx-feature__media{aspect-ratio:4/5}
.tx-feature__body{display:flex;flex-direction:column;gap:11px;min-width:0;padding-bottom:4px}
.tx-feature__h{color:var(--bone);font:700 clamp(calc(25px * var(--t)),calc(2.05vw * var(--t)),calc(36px * var(--t)))/1.12 var(--display);text-wrap:balance}
.tx-feature:hover .tx-feature__h{color:var(--brass)}
.tx-feature__sum{font:400 calc(17px * var(--t))/1.55 var(--ui);color:var(--bone-2)}

.tx-index{border-left:1px solid var(--hair);padding:30px 0 30px var(--gut);min-width:0}
.tx-index a{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.tx-index a:last-child{border-bottom:none}
.tx-index__n{font:400 calc(26px * var(--t))/1 var(--display);color:var(--bone-3);font-variant-numeric:tabular-nums}
.tx-index h4{color:var(--bone);font:500 calc(20.5px * var(--t))/1.26 var(--display);text-wrap:balance}
.tx-index a:hover h4,.tx-index a:hover .tx-index__n{color:var(--brass)}

/* tape */
.tx-tape{padding-top:26px;display:grid;grid-template-columns:1fr 360px;gap:46px}
/* A short archive must never leave a headed column standing empty:
   when a section has nothing to hold, the layout closes over it. */
.tx-tape--solo{grid-template-columns:1fr}
/* With no second column to sit beside, the bulletin deck stops being a rail
   and becomes a band: the four latest recordings laid across the full width,
   which closes the page instead of leaving half of it dark. */
.tx-tape--solo .tx-deck{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gut);row-gap:0}
.tx-tape--solo .tx-deck .tx-colhead{grid-column:1/-1}
.tx-tape--solo .tx-deck__row{border-bottom:none;border-right:1px solid var(--hair);padding:6px 22px 6px 0;align-items:start}
.tx-tape--solo .tx-deck__row:last-of-type{border-right:none}
.tx-tape--solo .tx-deck__all{grid-column:1/-1;margin-top:26px;padding-top:16px;border-top:1px solid var(--hair)}
@media (max-width:900px){
	.tx-tape--solo .tx-deck{grid-template-columns:1fr 1fr}
	.tx-tape--solo .tx-deck__row{border-right:none;border-bottom:1px solid var(--hair);padding:14px 0}
}
@media (max-width:580px){
	.tx-tape--solo .tx-deck{grid-template-columns:1fr}
}
.tx-board--noalso{grid-template-columns:250px 1fr}
.tx-split--solo{grid-template-columns:1fr}
.tx-more a{display:grid;grid-template-columns:48px 1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.tx-more time{font:500 calc(12px * var(--t))/1 var(--mono);color:var(--bone-3);font-variant-numeric:tabular-nums}
.tx-more h4{color:var(--bone);font:500 calc(20px * var(--t))/1.28 var(--display)}
.tx-more a:hover h4{color:var(--brass)}
.tx-more span{font:500 calc(9px * var(--t))/1 var(--mono);letter-spacing:.16em;color:var(--bone-3)}

.tx-side{display:flex;flex-direction:column;gap:30px;min-width:0}
.tx-deck__row{display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
.tx-deck__row:last-of-type{border-bottom:none}
.tx-deck__play{color:var(--brass);font-size:calc(13px * var(--t));line-height:1}
.tx-deck__t{color:var(--bone);font:600 calc(16.5px * var(--t))/1.25 var(--ui)}
.tx-deck__d{font:500 calc(10px * var(--t))/1 var(--mono);color:var(--bone-3);margin-top:5px;letter-spacing:.1em}
.tx-deck__all{display:block;margin-top:16px;font:500 calc(10px * var(--t))/1 var(--mono);letter-spacing:.14em;color:var(--brass)}

/* ad slots — hairlines, never frames; invisible when empty */
.tx-ad{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:20px 0;margin-top:26px}
.tx-ad__tag{display:block;font:500 calc(8.5px * var(--t))/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);padding-bottom:10px}

.tx-foot{border-top:1px solid var(--hair);margin-top:44px}
.tx-foot__in{padding-top:26px;padding-bottom:44px;display:flex;flex-wrap:wrap;gap:8px 26px;font:500 calc(10px * var(--t))/1.6 var(--mono);letter-spacing:.12em;color:var(--bone-3)}

/* the dock only exists on phones */
.tx-dock{display:none}

/* ============ laptop ============ */
@media (max-width:1180px){
	.tx-board{grid-template-columns:230px 1fr}
	.tx-col--also{display:none}
	.tx-tape{grid-template-columns:1fr 300px;gap:30px}
}

/* ============ tablet ============ */
@media (max-width:900px){
	.tx-board{grid-template-columns:1fr}
	.tx-col+.tx-col{border-left:none;padding-left:0;margin-left:0;border-top:1px solid var(--hair)}
	.tx-col--log{order:3}
	.tx-split{grid-template-columns:1fr}
	.tx-feature{padding:26px 0}
	.tx-index{border-left:none;border-top:1px solid var(--hair);padding:26px 0}
	.tx-tape{grid-template-columns:1fr;gap:30px}
	.tx-signal{display:none}
	.tx-lead__media{aspect-ratio:16/9}
}

/* ============ phone: its own design ============ */
@media (max-width:580px){
	.rkg-tx{--gut:16px}

	.tx-clock{display:none}
	.tx-brand__name{font-size:calc(26px * var(--t))}
	.tx-nav__in a{padding:10px 18px 10px 0;font-size:calc(12.5px * var(--t))}

	/* hero fills the screen, photo bleeds to both edges */
	.tx-col--lead{padding:0;border:none;margin:0}
	.tx-lead__media{aspect-ratio:4/5;margin:0 calc(var(--gut) * -1)}
	.tx-lead__over{padding:22px 20px 26px}
	.tx-lead__h{font-size:clamp(calc(27px * var(--t)),calc(8.4vw * var(--t)),calc(38px * var(--t)));max-width:15ch}
	.tx-lead__sum{display:none}
	.tx-lead__foot{margin-top:14px}

	/* the log becomes a marked band, not another list */
	.tx-col--log{
		background:var(--panel);
		margin:22px calc(var(--gut) * -1) 0;
		padding:20px var(--gut);
		border-top:1px solid var(--brass-d);
		border-bottom:1px solid var(--brass-d);
	}
	.tx-log h4{font-size:calc(16px * var(--t));color:var(--bone)}

	.tx-feature{grid-template-columns:1fr;gap:16px;padding:22px 0}
	.tx-feature__media{aspect-ratio:3/2;margin:0 calc(var(--gut) * -1)}
	.tx-index{padding:20px 0}
	.tx-index h4{font-size:calc(18px * var(--t))}

	.tx-more a{grid-template-columns:48px 1fr}
	.tx-more a span{display:none}
	.tx-more h4{font-size:calc(18.5px * var(--t))}

	.tx-sigrule{margin:22px calc(var(--gut) * -1) 0;height:12px}
	.tx-page{padding-bottom:96px}

	/* player pinned to the thumb */
	.tx-dock{
		display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
		background:rgba(12,14,18,.94);backdrop-filter:blur(10px);
		border-top:1px solid var(--brass-d);
		align-items:center;gap:13px;
		padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
	}
	.tx-dock__btn{color:var(--brass);font-size:calc(17px * var(--t));line-height:1}
	.tx-dock__meta{min-width:0}
	.tx-dock__l{display:block;font:500 calc(8px * var(--t))/1 var(--mono);letter-spacing:.2em;color:var(--brass)}
	.tx-dock__n{display:block;font:600 calc(13px * var(--t))/1.2 var(--ui);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ============================================================
   The article page

   A story is a column of type. Everything else on the page is
   subordinate to it: the slip on the left is a broadcast record,
   the rail on the right is what to read next, and neither is
   allowed to compete with the sentence the reader is on.
   ============================================================ */

.tx-art{padding-top:0;overflow-x:clip}
.tx-art__grid{
	display:grid;
	grid-template-columns:190px minmax(0,1fr) 320px;
	align-items:start;
}
.tx-art__main{
	padding:38px var(--gut) 54px;
	border-left:1px solid var(--hair);
	border-right:1px solid var(--hair);
	min-width:0;
}

/* the slip — a transmission record, not a byline block */
.tx-slip{position:sticky;top:26px;padding:38px 0 0;min-width:0}
.tx-slip__row{display:flex;flex-direction:column;gap:5px;padding:11px 0;border-bottom:1px solid var(--hair)}
.tx-slip__row span{font:500 calc(10.5px * var(--t))/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.tx-slip__row b{font:500 calc(15.5px * var(--t))/1.2 var(--mono);color:var(--bone-2);font-weight:500}
.tx-slip__mark{display:flex;align-items:flex-end;gap:3px;height:20px;margin:20px 0;opacity:.5}
.tx-slip__mark i{width:3px;background:var(--brass-d)}
.tx-slip__mark i:nth-child(3n){height:100%}
.tx-slip__mark i:nth-child(3n+1){height:38%}
.tx-slip__mark i:nth-child(3n+2){height:66%}
.tx-slip__back{font:500 calc(10.5px * var(--t))/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}

/* the headline and the opening */
.tx-art__h{
	color:var(--bone);
	font:700 clamp(calc(34px * var(--t)),calc(3.4vw * var(--t)),calc(58px * var(--t)))/1.05 var(--display);
	letter-spacing:-.012em;max-width:22ch;text-wrap:balance;
}
.tx-art__stand{font:400 clamp(calc(19px * var(--t)),calc(1.5vw * var(--t)),calc(23px * var(--t)))/1.55 var(--ui);color:var(--bone-2);margin-top:18px;max-width:62ch}
.tx-art__rule{height:1px;background:linear-gradient(90deg,var(--brass) 0,var(--brass-d) 90px,var(--hair) 90px,var(--hair) 100%);margin:26px 0 0}

.tx-art__fig{margin:30px 0 0}
.tx-art__fig .tx-media{aspect-ratio:16/9}
.tx-art__fig figcaption{margin-top:11px;font:500 calc(12px * var(--t))/1.5 var(--mono);letter-spacing:.06em;color:var(--bone-3);max-width:70ch}

/* the body: one measure, generous leading, nothing decorative */
.tx-art__body{margin-top:30px;max-width:68ch}
.tx-art__body p{font:400 calc(20px * var(--t))/1.7 var(--ui);color:var(--read);margin:0 0 1.15em}

.tx-art__body h2,.tx-art__body h3{color:var(--bone);font-family:var(--display);font-weight:700;line-height:1.2;margin:1.7em 0 .5em}
.tx-art__body h2{font-size:calc(31px * var(--t))}
.tx-art__body h3{font-size:calc(25px * var(--t))}
.tx-art__body a{color:var(--brass);border-bottom:1px solid var(--brass-d)}
.tx-art__body a:hover{color:var(--bone)}
.tx-art__body ul,.tx-art__body ol{margin:0 0 1.15em;padding-left:1.2em}
.tx-art__body li{font:400 calc(20px * var(--t))/1.68 var(--ui);color:var(--read);margin-bottom:.45em}
.tx-art__body blockquote{
	margin:1.6em 0;padding-left:24px;border-left:2px solid var(--brass-d);
	font:400 italic calc(25px * var(--t))/1.45 var(--display);color:var(--bone);
}
.tx-art__body blockquote p{font:inherit;color:inherit;margin:0}
.tx-art__body img,.tx-art__body figure img{width:100%;height:auto;margin:1.4em 0 .5em}
.tx-art__body figcaption{font:500 calc(11px * var(--t))/1.5 var(--mono);letter-spacing:.06em;color:var(--bone-3);margin-bottom:1.4em}
.tx-art__body iframe,.tx-art__body video,.tx-art__body audio{max-width:100%;margin:1.4em 0}
.tx-art__body strong,.tx-art__body b{color:var(--bone);font-weight:600}
.tx-art__body hr{border:none;border-top:1px solid var(--hair);margin:2em 0}

.tx-art__side{padding:38px 0 54px var(--gut);display:flex;flex-direction:column;gap:34px;min-width:0}

/* what to read next, laid across the foot of the page */
.tx-art__more{padding:26px 0 70px}
.tx-index--flat{border-left:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gut)}
.tx-index--flat a{border-bottom:1px solid var(--hair)}

@media (max-width:1180px){
	.tx-art__grid{grid-template-columns:170px minmax(0,1fr)}
	.tx-art__main{border-right:none;padding-right:0}
	.tx-art__side{grid-column:1/-1;padding:10px 0 54px;border-top:1px solid var(--hair);
		display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:start}
	.tx-index--flat{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
	.tx-art__grid{grid-template-columns:1fr}
	.tx-slip{position:static;padding:22px 0 0;display:grid;grid-template-columns:repeat(4,auto);gap:0 26px;align-items:end}
	.tx-slip__row{border-bottom:none;padding:0}
	.tx-slip__mark{display:none}
	.tx-slip__back{grid-column:1/-1;margin-top:16px}
	.tx-art__main{border-left:none;padding:24px 0 44px}
	.tx-art__side{grid-template-columns:1fr}
}

@media (max-width:580px){
	.tx-art__h{font-size:clamp(calc(27px * var(--t)),calc(7.6vw * var(--t)),calc(36px * var(--t)));max-width:none}
	.tx-art__stand{font-size:calc(17px * var(--t))}
	.tx-art__body p,.tx-art__body li{font-size:calc(17.5px * var(--t));line-height:1.68}
	.tx-art__body p:first-of-type::first-letter{font-size:calc(52px * var(--t));margin-right:9px}
	.tx-slip{grid-template-columns:repeat(2,auto);gap:12px 30px}
	.tx-art__fig .tx-media{margin:0 calc(var(--gut) * -1);aspect-ratio:4/3}
	.tx-index--flat{grid-template-columns:1fr}
	.tx-art__more{padding-bottom:96px}
}

/* ---------- holding the ground on an article ----------
   The same inline <style> blocks that repainted the front page also cap
   `article` at 760px and impose a reading measure on `.entry-content`. This
   page is not their article template; it states its own frame once, here,
   rather than fighting them rule by rule. */

/* Other plugins print an inline rule capping `article` at 760px with margin 0,
   so this has to be stated at the same weight. It used to say "full width,
   no centring" from when the article was a three-column layout; now the story
   is one centred column, and this must say so or the page pins itself left. */
html body.rkg-tx .tx-art__grid{max-width:760px !important;width:auto !important;margin:0 auto !important;padding:38px 0 0 !important;float:none !important}
html body.rkg-tx .tx-art__main{max-width:none !important;float:none !important}
html body.rkg-tx .tx-art__after{max-width:760px !important;margin:0 auto !important;float:none !important}
html body.rkg-tx .tx-art__body{max-width:68ch !important}
html body.rkg-tx .tx-art__body p{max-width:none !important}

/* Luqad's link to the other language, dressed for this page */
.tx-art__body .rkg13-other{margin:0 0 26px}
.tx-art__body .rkg13-other a{
	display:inline-block;font:500 calc(11px * var(--t))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
	color:var(--brass);border:none;border-bottom:1px solid var(--brass-d);padding-bottom:6px;
}
.tx-art__body .rkg13-other a:hover{color:var(--bone);border-bottom-color:var(--bone)}

/* ---------- the story's own furniture ----------
   The Akhris plugin prints a meta strip, two date lines and a related-stories
   block into the content. Beside the slip on the left and the rail on the
   right, all three say the same thing twice. Keep the share row — that one
   does a job nothing else does — and clear the rest, so the reader meets the
   headline and then the story. */

.tx-art__body .rkg15-strip{display:none}
.tx-art__body p.rk-postdate,
.tx-art__body p.rkg-dateline{display:none}
.tx-art__body .rkg15-more{display:none}
.tx-art__body .rkg15-top{border:none;padding:0;margin:0 0 26px;background:none}

/* share: names, not a row of circles */
.tx-art__body .rkg15-share{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 18px;border-bottom:1px solid var(--hair);background:none}
.tx-art__body .rkg15-share__l{font:500 calc(9.5px * var(--t))/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.tx-art__body .rkg15-s{
	width:auto !important;height:auto !important;border:none !important;border-radius:0 !important;
	background:none !important;box-shadow:none !important;color:var(--bone-3) !important;padding:0 !important;
	display:inline-flex;align-items:center;
}
.tx-art__body .rkg15-s svg{width:17px;height:17px;fill:currentColor}
.tx-art__body .rkg15-s:hover{color:var(--brass) !important}

/* the opening letter, set on the first real paragraph of the story */
.tx-art__body .rkg-dateline + p::first-letter{
	float:left;font:700 calc(66px * var(--t))/.82 var(--display);color:var(--bone);
	margin:6px 12px 0 0;
}

/* Luqad's other-language link, held against the plugin's own pill */
.tx-art__body p.rkg13-other a{
	display:inline-block !important;
	font:500 calc(11px * var(--t))/1 var(--mono) !important;letter-spacing:.14em;text-transform:uppercase;
	color:var(--brass) !important;background:none !important;
	border:none !important;border-bottom:1px solid var(--brass-d) !important;border-radius:0 !important;
	padding:0 0 6px !important;box-shadow:none !important;
}
.tx-art__body p.rkg13-other a:hover{color:var(--bone) !important;border-bottom-color:var(--bone) !important}

/* ---------- not every entry is worth the same ----------
   A list where all twelve items are set identically reads as a queue a
   machine printed. Giving the top of each rail more weight makes it read as
   an edit — someone decided that one mattered most. Desktop only; the phone
   layout is already tuned line by line. */

@media (min-width:901px){
	.tx-log a:first-child h4{font-size:calc(19px * var(--t));color:var(--bone);font-weight:600}
	.tx-log a:first-child time{color:var(--brass)}
	.tx-also a:first-child h4{font-size:calc(23px * var(--t));line-height:1.2}
	.tx-art__side .tx-also a:first-child h4{font-size:calc(24px * var(--t))}
	.tx-more a:first-child h4{font-size:calc(23px * var(--t))}
	.tx-index a:first-child h4{font-size:calc(23px * var(--t))}
	.tx-index a:first-child .tx-index__n{color:var(--brass-d)}
}

/* ---------- the key-points block, unboxed ----------
   Akhris prints its summary as a pale card with an orange rule and orange
   bullets — a white box dropped into a dark page, and the one shape this
   design does not use. Same information, no container: a hairline down the
   left, the label in the mono voice the rest of the page speaks, and marks
   instead of dots. */

.tx-art__body .rkg15-glance{
	background:none !important;border:none !important;border-radius:0 !important;
	box-shadow:none !important;
	border-left:1px solid var(--brass-d) !important;
	padding:2px 0 2px 26px !important;margin:34px 0 !important;
}
.tx-art__body .rkg15-glance h2{
	font:500 calc(11px * var(--t))/1 var(--mono) !important;letter-spacing:.2em;text-transform:uppercase;
	color:var(--bone-3) !important;margin:0 0 16px !important;
}
.tx-art__body .rkg15-glance ul{list-style:none !important;margin:0 !important;padding:0 !important}
.tx-art__body .rkg15-glance li{
	position:relative;padding-left:22px;margin:0 0 14px;
	font:400 calc(18px * var(--t))/1.62 var(--ui) !important;color:var(--quiet) !important;
}
.tx-art__body .rkg15-glance li::marker{content:none}
.tx-art__body .rkg15-glance li::before{
	content:"";position:absolute;left:0;top:.62em;
	width:9px;height:1px;background:var(--brass-d);
}
.tx-art__body .rkg15-glance li:last-child{margin-bottom:0}

/* The plugin's floating back button repeats the one on the slip and sits on
   top of the story as a pill. One way home is enough. */
.rkg-tx .floating-back-button{display:none !important}

/* ---------- temperature, not just size ----------
   The side columns take a blue cast while the story stays neutral white.
   Hierarchy then comes from warmth as well as scale: the eye goes to the
   coolest-to-warmest step, so the centre reads as the thing to read and the
   rails read as reference. A genuinely dark blue would sit too close to the
   #0C0E12 ground to be legible, so these are blue in hue and light in value. */

.tx-col--log .tx-log h4,
.tx-col--also .tx-also h4,
.tx-art__side .tx-also h4,
.tx-art__side .tx-deck__t{color:var(--side)}
.tx-col--log .tx-log a:hover h4,
.tx-col--also .tx-also a:hover h4,
.tx-art__side .tx-also a:hover h4{color:var(--side-hi)}
.tx-slip__row b{color:var(--slip)}
.tx-slip__row span,
.tx-art__side .tx-colhead,
.tx-col--also .tx-colhead{color:var(--side-dim)}
.tx-art__side .tx-deck__d{color:var(--side-dim)}

/* ============================================================
   ALTERNATIVE PALETTES

   Each block restates the eighteen values and nothing else — no
   layout, no type, no exceptions. Switch with data-pal on <html>.

   Photo treatment is deliberately NOT re-stated here: the scrims
   and vignettes live inside the picture, not on the page ground,
   so they read correctly whether the page around them is ink or
   paper.
   ============================================================ */

/* SIGNAL — graphite and one vermilion. No gold anywhere. The accent
   is the same red as the on-air dot, so every mark on the page reads
   as broadcast. Closest to a wire service. */
html[data-pal="signal"] .rkg-tx{
	--blue:#7FA8CC; --blue-on:#0B0B0C;
	--night:#0B0B0C; --panel:#131315; --hair:#262628;
	--brass:#E2503A; --brass-d:#8C2E20;
	--bone:#F0F0F1; --bone-2:#A0A0A4; --bone-3:#6E6E73;
	--live:#E2503A;
	--read:#D8D8DA; --quiet:#C8C8CC;
	--side:#A8A8AE; --side-hi:#EDEDEF; --side-dim:#6E6E73; --slip:#94949A;
	--ph:#4A4A4F; --media-1:#26262A; --media-2:#101012;
}

/* INK — a navy night rather than a neutral one, with a cold steel
   accent. Reads as late-evening broadcast; the coolest of the five
   and the furthest from the gold he kept seeing. */
html[data-pal="ink"] .rkg-tx{
	--blue:#79B8CE; --blue-on:#080D16;
	--night:#080D16; --panel:#0E1420; --hair:#1E2838;
	--brass:#79B8CE; --brass-d:#3E6A80;
	--bone:#E7ECF3; --bone-2:#93A2B5; --bone-3:#64738A;
	--live:#E2604A;
	--read:#D2DAE5; --quiet:#C4CEDC;
	--side:#A2B4CB; --side-hi:#DCE7F5; --side-dim:#64738A; --slip:#8FA3BD;
	--ph:#45536A; --media-1:#1C2635; --media-2:#0A0F18;
}

/* SLATE — no accent at all. The hairlines and the type do every job;
   only the on-air dot is allowed colour, so when it appears it means
   something. The most austere, and the hardest to make look cheap. */
html[data-pal="slate"] .rkg-tx{
	--blue:#8FA9C4; --blue-on:#0D0F11;
	--night:#0D0F11; --panel:#14171A; --hair:#262A2E;
	--brass:#C9CFD6; --brass-d:#79808A;
	--bone:#EDEFF2; --bone-2:#A0A7AF; --bone-3:#6D747B;
	--live:#D6543A;
	--read:#D6DADF; --quiet:#C6CBD1;
	--side:#A9B0B8; --side-hi:#E8EBEF; --side-dim:#6D747B; --slip:#98A0A8;
	--ph:#4A5058; --media-1:#23272B; --media-2:#101315;
}

/* BRASS — the original: gold on blue-black, taken straight from the logo. */
html[data-pal="brass"] .rkg-tx{
	--blue:#5C9BD6; --blue-on:#0C0E12;
	--night:#0C0E12; --panel:#12151B; --hair:#252A33;
	--brass:#C8A24A; --brass-d:#8E7130;
	--bone:#E9EBEE; --bone-2:#9BA2AC; --bone-3:#6B727C;
	--live:#D6543A;
	--read:#D3D7DC; --quiet:#C9CDD3;
	--side:#A9B7CC; --side-hi:#DDE5F0; --side-dim:#6B7788; --slip:#93A3BA;
	--ph:#454C56; --media-1:#232932; --media-2:#10131A;
}

/* ---------- reading size ---------- */
html[data-size="lg"] .rkg-tx{--t:1.34}
html[data-size="xl"] .rkg-tx{--t:1.58}

/* ============================================================
   The chooser

   Visible only to a logged-in administrator, never to a reader.
   It writes to <html> and remembers the choice in the browser, so
   it carries across the front page and articles while he decides.
   Nothing here ships to the public page.
   ============================================================ */

.tx-pick{
	position:fixed;top:46px;right:0;z-index:9999;
	background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
	border-left:1px solid var(--hair);border-bottom:1px solid var(--hair);
	padding:14px 16px;display:grid;gap:12px;min-width:186px;
	font-family:var(--mono);
}
html[data-pal="brass"] .tx-pick,
html[data-pal="signal"] .tx-pick,
html[data-pal="ink"] .tx-pick,
html[data-pal="slate"] .tx-pick{background:rgba(10,12,16,.94)}
.tx-pick__t{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.tx-pick__row{display:flex;flex-wrap:wrap;gap:4px}
.tx-pick button{
	font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
	color:var(--bone-2);padding:7px 9px;border:1px solid transparent;
}
.tx-pick button:hover{color:var(--bone)}
.tx-pick button[aria-pressed="true"]{color:var(--brass);border-color:var(--brass-d)}
.tx-pick__hide{justify-self:start;font-size:9px !important;letter-spacing:.14em;color:var(--bone-3) !important;padding:0 !important}
@media (max-width:700px){
	.tx-pick{top:auto;bottom:0;left:0;right:0;border-left:none;border-top:1px solid var(--hair)}
}

/* ============================================================
   Pages

   A page can hold a paragraph or a scoreboard, so the measure is
   set on the text elements themselves. Prose gets a readable line
   length; a component spans the page.
   ============================================================ */

.tx-pg{padding-bottom:90px}
.tx-pg__head{padding:44px 0 0}
.tx-pg__h{
	color:var(--bone);
	font:700 clamp(calc(26px * var(--t)),calc(2.4vw * var(--t)),calc(42px * var(--t)))/1.08 var(--display);
	letter-spacing:-.01em;max-width:26ch;text-wrap:balance;
}
.tx-pg__rule{height:1px;margin-top:22px;background:linear-gradient(90deg,var(--brass) 0,var(--brass-d) 90px,var(--hair) 90px,var(--hair) 100%)}
.tx-pg__body{padding-top:34px}
.tx-pg__body > p,
.tx-pg__body > ul,
.tx-pg__body > ol,
.tx-pg__body > blockquote,
.tx-pg__body > h2,
.tx-pg__body > h3{max-width:68ch}
.tx-pg__body p{font:400 calc(19px * var(--t))/1.68 var(--ui);color:var(--read);margin:0 0 1.15em}
.tx-pg__body li{font:400 calc(19px * var(--t))/1.66 var(--ui);color:var(--read);margin-bottom:.45em}
.tx-pg__body h2{color:var(--bone);font:700 calc(28px * var(--t))/1.2 var(--display);margin:1.7em 0 .5em}
.tx-pg__body h3{color:var(--bone);font:700 calc(23px * var(--t))/1.2 var(--display);margin:1.6em 0 .4em}
.tx-pg__body a{color:var(--brass);border-bottom:1px solid var(--brass-d)}
.tx-pg__body img{width:100%;height:auto;margin:1.4em 0}

/* ============================================================
   Ciyaaraha — the scoreboard

   It arrived as a white rounded card with pill buttons, which is
   the one shape this design does not use, and it read as a toy.
   A scoreboard is a board: rules, ranked type, tabular figures,
   and the two teams facing each other across the result.
   ============================================================ */

.tx-pg__body .rkg14{
	background:none !important;border:none !important;border-radius:0 !important;
	box-shadow:none !important;padding:0 !important;margin:0 !important;max-width:none !important;
}

.tx-pg__body .rkg14__head{
	display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;
	background:none !important;border:none !important;padding:0 0 16px !important;
	border-bottom:1px solid var(--hair) !important;
}
.tx-pg__body .rkg14__head h2{
	font:500 calc(11.5px * var(--t))/1 var(--mono) !important;letter-spacing:.2em;text-transform:uppercase;
	color:var(--bone-3) !important;margin:0 0 10px !important;display:flex;align-items:center;gap:9px;
}
.tx-pg__body .rkg14__dot{width:5px;height:5px;border-radius:50%;background:var(--live);display:inline-block}
.tx-pg__body .rkg14__head p{
	font:400 calc(15.5px * var(--t))/1.5 var(--ui) !important;color:var(--bone-2) !important;
	margin:0 !important;max-width:56ch;
}

/* yesterday / today / tomorrow — three words, not three pills */
.tx-pg__body .rkg14__days{display:flex;gap:0;background:none !important;border:none !important;padding:0 !important}
.tx-pg__body .rkg14__days button{
	font:500 calc(12px * var(--t))/1 var(--mono) !important;letter-spacing:.14em;text-transform:uppercase;
	color:var(--bone-3) !important;background:none !important;border:none !important;border-radius:0 !important;
	padding:10px 0 !important;margin-left:24px;box-shadow:none !important;
	border-bottom:1px solid transparent !important;
}
.tx-pg__body .rkg14__days button:first-child{margin-left:0}
.tx-pg__body .rkg14__days button:hover{color:var(--bone-2) !important}
.tx-pg__body .rkg14__days button.is-on{color:var(--brass) !important;border-bottom-color:var(--brass) !important}

/* the leagues */
.tx-pg__body .rkg14__tabs{
	display:flex;gap:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
	background:none !important;border:none !important;padding:0 !important;margin:0 0 8px !important;
	border-bottom:1px solid var(--hair) !important;
	scrollbar-width:none;
}
.tx-pg__body .rkg14__tabs::-webkit-scrollbar{display:none}
.tx-pg__body .rkg14-tab{
	flex:0 0 auto;
	font:500 calc(11.5px * var(--t))/1 var(--mono) !important;letter-spacing:.13em;text-transform:uppercase;
	color:var(--bone-3) !important;background:none !important;border:none !important;border-radius:0 !important;
	padding:15px 22px 15px 0 !important;box-shadow:none !important;white-space:nowrap;
	border-bottom:2px solid transparent !important;margin-bottom:-1px;
}
.tx-pg__body .rkg14-tab:hover{color:var(--bone-2) !important}
.tx-pg__body .rkg14-tab.is-on{color:var(--bone) !important;border-bottom-color:var(--brass) !important}

/* the board */
.tx-pg__body .rkg14__board{background:none !important;border:none !important;padding:0 !important;margin:0 !important}

.tx-pg__body .rkg14-match{
	display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
	padding:18px 0 !important;
	background:none !important;border-radius:0 !important;box-shadow:none !important;
	border:none !important;border-bottom:1px solid var(--hair) !important;
	margin:0 !important;
}
.tx-pg__body .rkg14-match:last-child{border-bottom:none !important}

.tx-pg__body .rkg14-side{display:flex;align-items:center;gap:14px;min-width:0}
.tx-pg__body .rkg14-side.home{justify-content:flex-end;text-align:right}
.tx-pg__body .rkg14-side.home{flex-direction:row-reverse}
.tx-pg__body .rkg14-side img{
	width:30px;height:30px;object-fit:contain;flex:0 0 auto;
	filter:saturate(1.05) contrast(1.05);
}
.tx-pg__body .rkg14-side span{
	font:600 calc(17px * var(--t))/1.25 var(--ui);color:var(--bone);
	overflow:hidden;text-overflow:ellipsis;
}

.tx-pg__body .rkg14-mid{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:120px}
.tx-pg__body .rkg14-score{
	font:500 calc(26px * var(--t))/1 var(--mono);color:var(--bone);
	font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;
}
.tx-pg__body .rkg14-state{
	font:500 calc(9.5px * var(--t))/1 var(--mono) !important;letter-spacing:.18em;text-transform:uppercase;
	color:var(--bone-3) !important;
	background:none !important;border:none !important;border-radius:0 !important;
	padding:0 !important;box-shadow:none !important;
}
.tx-pg__body .rkg14-state.in,
.tx-pg__body .rkg14-state.live{color:var(--live) !important}
.tx-pg__body .rkg14-state.pre{color:var(--bone-2) !important}

.tx-pg__body .rkg14__empty{
	background:none !important;border:none !important;padding:52px 0 !important;
	font:500 calc(12px * var(--t))/1 var(--mono) !important;letter-spacing:.16em;text-transform:uppercase;
	color:var(--bone-3) !important;text-align:center;
}

.tx-pg__body .rkg14__foot{
	background:none !important;border:none !important;
	border-top:1px solid var(--hair) !important;
	padding:18px 0 0 !important;margin-top:8px !important;
	font:500 calc(11px * var(--t))/1.6 var(--mono) !important;letter-spacing:.06em;
	color:var(--bone-3) !important;
}

@media (max-width:580px){
	.tx-pg__body .rkg14-match{grid-template-columns:1fr auto 1fr;gap:12px}
	.tx-pg__body .rkg14-side span{font-size:calc(14.5px * var(--t))}
	.tx-pg__body .rkg14-side img{width:24px;height:24px}
	.tx-pg__body .rkg14-mid{min-width:88px}
	.tx-pg__body .rkg14-score{font-size:calc(21px * var(--t))}
	.tx-pg__body .rkg14__days button{margin-left:18px}
	.tx-pg__body .rkg14-tab{padding-right:18px !important}
}

/* the page name carries the weight; what it is sits quietly under it */
.tx-pg__sub{
	display:block;margin-top:14px;
	font:500 calc(11.5px * var(--t))/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;
	color:var(--bone-3);
}

/* With the duplicated heading gone, what is left of the component's header
   is its one useful sentence and the day switch. Set them on a single line
   so the page reads title, then controls, then results. */
.tx-pg__body .rkg14__head{padding-top:0 !important;align-items:center}
.tx-pg__body .rkg14__head > div:first-child{flex:1 1 300px;min-width:0}

/* ============================================================
   The live board

   Replaces the click-first scoreboard. Every league is asked at
   once and the matches are laid out in the order they kick off,
   so the page answers before it is questioned. The strap along
   the top runs continuously, the way a broadcast score crawl does.
   LIVE appears only when the feed reports a match in progress.
   ============================================================ */

.tx-sc{margin:0}

/* the crawl */
.tx-strap{
	overflow:hidden;border-bottom:1px solid var(--hair);
	padding:13px 0;margin-bottom:4px;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
	        mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.tx-strap__run{
	display:inline-flex;align-items:center;white-space:nowrap;
	animation:tx-crawl 70s linear infinite;
}
.tx-strap:hover .tx-strap__run{animation-play-state:paused}
@keyframes tx-crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
	.tx-strap__run{animation:none}
	.tx-strap{overflow-x:auto}
}
.tx-strap__i{
	display:inline-flex;align-items:center;gap:8px;
	padding:0 26px;border-right:1px solid var(--hair);
	font:500 calc(13px * var(--t))/1 var(--mono);color:var(--bone-2);
	font-variant-numeric:tabular-nums;
}
.tx-strap__i b{font-weight:600;color:var(--bone)}
.tx-strap__i.is-live{color:var(--live)}
.tx-strap__i.is-live b{color:var(--live)}
.tx-strap__i i{width:5px;height:5px;border-radius:50%;background:var(--live);display:inline-block}

/* day switch */
.tx-sc__bar{display:flex;justify-content:flex-end;padding:10px 0 0}
.tx-sc__days button{
	font:500 calc(12px * var(--t))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
	color:var(--bone-3);padding:10px 0;margin-left:24px;
	border-bottom:1px solid transparent;
}
.tx-sc__days button:first-child{margin-left:0}
.tx-sc__days button:hover{color:var(--bone-2)}
.tx-sc__days button[aria-pressed="true"]{color:var(--brass);border-bottom-color:var(--brass)}

/* league filter — a filter now, not a gate */
.tx-sc__lgs{
	display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
	border-bottom:1px solid var(--hair);margin-bottom:6px;
}
.tx-sc__lgs::-webkit-scrollbar{display:none}
.tx-sc__lgs button{
	flex:0 0 auto;
	font:500 calc(12px * var(--t))/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
	color:var(--bone-3);padding:15px 22px 15px 0;
	border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tx-sc__lgs button:hover{color:var(--bone-2)}
.tx-sc__lgs button[aria-pressed="true"]{color:var(--bone);border-bottom-color:var(--brass)}

/* the rows */
.tx-sc__row{
	display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
	padding:17px 0;border-bottom:1px solid var(--hair);
}
.tx-sc__row:last-child{border-bottom:none}
.tx-sc__side{display:flex;align-items:center;gap:13px;min-width:0}
.tx-sc__side--h{justify-content:flex-end;text-align:right}
.tx-sc__side img{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.tx-sc__side span{
	font:600 calc(17px * var(--t))/1.25 var(--ui);color:var(--bone);
	overflow:hidden;text-overflow:ellipsis;
}
.tx-sc__mid{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:132px}
.tx-sc__score{font:500 calc(25px * var(--t))/1 var(--mono);color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.tx-sc__time{font:500 calc(19px * var(--t))/1 var(--mono);color:var(--bone-2);font-variant-numeric:tabular-nums}
.tx-sc__st{
	display:flex;align-items:center;gap:7px;
	font:500 calc(9.5px * var(--t))/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
	color:var(--bone-3);text-align:center;
}
.tx-sc__st.is-live{color:var(--live)}
.tx-sc__st.is-live i{width:5px;height:5px;border-radius:50%;background:var(--live);display:inline-block;animation:tx-beat 1.6s ease-in-out infinite}
@keyframes tx-beat{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.tx-sc__st.is-live i{animation:none}}

.tx-sc__none{
	padding:52px 0;text-align:center;
	font:500 calc(12px * var(--t))/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
	color:var(--bone-3);
}
.tx-sc__foot{
	border-top:1px solid var(--hair);padding-top:18px;margin-top:8px;
	font:500 calc(11px * var(--t))/1.6 var(--mono);letter-spacing:.06em;color:var(--bone-3);
}

@media (max-width:580px){
	.tx-sc__side span{font-size:calc(14.5px * var(--t))}
	.tx-sc__side img{width:22px;height:22px}
	.tx-sc__mid{min-width:92px}
	.tx-sc__score{font-size:calc(20px * var(--t))}
	.tx-sc__row{gap:11px}
}

/* The sports plugin injects its own plain "Ciyaaraha" into every menu, which
   sat next to the menu item for the same page. One way in is enough. */
.tx-nav__in .rkg14-navlink{display:none}

/* Navigation labels are read at a glance and were coming out small against
   the rest of the page; state the size here so no inherited rule shrinks it. */
html body.rkg-tx .tx-nav__in a{font-size:calc(15px * var(--t))}

/* Room to breathe: the row was set tight against its own rules, so the links
   and the language control ran into each other. */
.tx-nav__in li a{padding:15px 30px 15px 0}
@media (min-width:901px){
	.tx-lang{margin-left:auto;position:relative}
	/* a hairline of separation, so the control is clearly not another link */
	.tx-lang::before{
		content:"";position:absolute;left:-30px;top:50%;transform:translateY(-50%);
		width:1px;height:22px;background:var(--hair);
	}
}

/* two stories carried under the lead, so the middle column reaches the foot
   of the board instead of stopping short of the columns beside it */
.tx-under{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut);margin-top:26px;border-top:1px solid var(--hair);padding-top:4px}
.tx-under a{display:block;padding:16px 0}
.tx-under a + a{border-left:1px solid var(--hair);padding-left:var(--gut)}
.tx-under time{display:block;font:500 calc(11px * var(--t))/1 var(--mono);color:var(--bone-3);margin-bottom:8px;font-variant-numeric:tabular-nums}
.tx-under h4{color:var(--bone);font:600 calc(18px * var(--t))/1.28 var(--display);text-wrap:balance}
.tx-under a:hover h4{color:var(--brass)}
@media (max-width:580px){
	.tx-under{grid-template-columns:1fr;gap:0}
	.tx-under a + a{border-left:none;padding-left:0;border-top:1px solid var(--hair)}
}

/* ---------- masthead utilities ----------
   War Cusub and the way in. The old header carried these as filled orange
   pills; here they are marks in the same voice as the rest of the furniture,
   so the masthead keeps its line. War Cusub takes the accent because it is
   the one thing pressed daily; Gal stays quiet. */

.tx-right{display:flex;align-items:center;gap:26px;justify-self:end}
.tx-util{display:flex;align-items:center;gap:20px}
.tx-util a{
	font:500 calc(11px * var(--t))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
	white-space:nowrap;
}
.tx-util__new{
	color:var(--brass);display:inline-flex;align-items:center;gap:7px;
	border-bottom:1px solid var(--brass-d);padding-bottom:5px;
}
.tx-util__new span{font-size:1.25em;line-height:0}
.tx-util__new:hover{color:var(--bone);border-bottom-color:var(--bone)}
.tx-util__in{color:var(--bone-3);border-bottom:1px solid transparent;padding-bottom:5px}
.tx-util__in:hover{color:var(--bone);border-bottom-color:var(--hair)}

@media (max-width:900px){
	.tx-right{gap:16px}
	.tx-util{gap:14px}
	.tx-util a{font-size:calc(10px * var(--t))}
}
@media (max-width:580px){
	.tx-util__new span{display:none}
}

/* ---------- a guard against runaway headlines ----------
   Two stories in the archive carry titles that are whole paragraphs (one runs
   to forty words). In a column layout a single title like that stretches its
   column far past the ones beside it and opens a hole across the page. The
   headline is trimmed on screen at three lines; nothing is lost, the full
   title still reaches the story, search engines and screen readers. The real
   fix is editorial — a headline should be a headline — but the page should
   not fall over while that is happening. */

.tx-log h4,
.tx-also h4,
.tx-index h4,
.tx-more h4,
.tx-under h4{
	display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.tx-log h4{-webkit-line-clamp:3}
.tx-also h4{-webkit-line-clamp:3}
.tx-index h4{-webkit-line-clamp:2}
.tx-more h4{-webkit-line-clamp:2}
.tx-under h4{-webkit-line-clamp:3}

/* The audio band is the last thing on the page; it does not need eighty pixels
   of air under it before the footer. */
.tx-tape--solo{padding-bottom:0}
.tx-tape--solo .tx-deck__all{margin-top:20px;padding-top:14px}
.rkg-tx .tx-page:has(.tx-tape--solo){padding-bottom:34px}

/* Four bulletins across a 1600px page drift apart; hold the band to a width
   where the items still read as a group. */
.tx-tape--solo .tx-deck{max-width:1180px}

/* ============================================================
   NEWSROOM SURFACE

   Everything below is clothing, not structure. The masthead
   becomes a solid band the way a newspaper's does, headlines are
   set in a grotesque rather than a serif, and breaking news gets
   the red it is expected to have. Remove this block and the
   layout underneath is unchanged.
   ============================================================ */

/* --- the band --- */
.rkg-tx .tx-mast{background:var(--band);border-bottom:none}
.rkg-tx .tx-mast__in{min-height:92px}
.rkg-tx .tx-brand__name{color:var(--band-on);font-weight:800;letter-spacing:-.02em}
.rkg-tx .tx-brand__name em{color:var(--gold);font-style:normal}
.rkg-tx .tx-brand__sub{color:var(--band-2)}
.rkg-tx .tx-brand__sub i{color:var(--gold)}
.rkg-tx .tx-brand__mark i{background:var(--gold)}

.rkg-tx .tx-signal__btn,
.rkg-tx .tx-signal__label{color:var(--gold)}
.rkg-tx .tx-signal__name{color:var(--band-on)}
.rkg-tx .tx-signal__wave i{background:var(--gold)}
.rkg-tx .tx-signal__wave i:nth-child(even){background:#B0873090}

.rkg-tx .tx-clock__t{color:var(--band-on)}
.rkg-tx .tx-clock__c{color:var(--band-2)}

.rkg-tx .tx-util__new{color:var(--gold);border-bottom-color:#B08730}
.rkg-tx .tx-util__new:hover{color:var(--band-on);border-bottom-color:var(--band-on)}
.rkg-tx .tx-util__in{color:var(--band-2)}
.rkg-tx .tx-util__in:hover{color:var(--band-on);border-bottom-color:var(--band-2)}

/* --- headlines: grotesque, not serif --- */
.rkg-tx .tx-lead__h{font-weight:800;letter-spacing:-.022em;line-height:1.02}
.rkg-tx .tx-art__h{font-weight:800;letter-spacing:-.02em;line-height:1.05}
.rkg-tx .tx-pg__h{font-weight:800;letter-spacing:-.018em}
.rkg-tx .tx-feature__h{font-weight:700;letter-spacing:-.016em}
.rkg-tx .tx-also h4,
.rkg-tx .tx-index h4,
.rkg-tx .tx-more h4,
.rkg-tx .tx-under h4{font-weight:600;letter-spacing:-.008em}
.rkg-tx .tx-index__n{font-weight:600;color:var(--brass-d)}
.rkg-tx .tx-art__body h2,
.rkg-tx .tx-art__body h3,
.rkg-tx .tx-pg__body h2,
.rkg-tx .tx-pg__body h3{font-weight:700;letter-spacing:-.014em}
.rkg-tx .tx-art__body blockquote{font-style:normal;font-weight:600;letter-spacing:-.01em;border-left-color:var(--brass)}
/* the opening letter belongs to the serif era; a grotesque drop cap is a mess */
.rkg-tx .tx-art__body .rkg-dateline + p::first-letter{float:none;font:inherit;color:inherit;margin:0}

/* --- breaking news reads red, because that is what red is for --- */
.rkg-tx .tx-colhead .tx-live{background:var(--live)}
.rkg-tx .tx-col--log .tx-colhead{color:var(--live)}
.rkg-tx .tx-log time{color:var(--bone-3)}
.rkg-tx .tx-log a:hover time{color:var(--live)}
.rkg-tx .tx-slug{color:var(--live);font-weight:700}

/* --- the rest of the accent work moves from gold to news blue --- */
.rkg-tx .tx-sigrule i{background:var(--brass-d)}
.rkg-tx .tx-sigrule{opacity:.5}
.rkg-tx .tx-art__rule{background:linear-gradient(90deg,var(--live) 0,var(--live) 90px,var(--hair) 90px,var(--hair) 100%)}
.rkg-tx .tx-pg__rule{background:linear-gradient(90deg,var(--live) 0,var(--live) 90px,var(--hair) 90px,var(--hair) 100%)}
.rkg-tx .tx-slip__mark i{background:var(--brass-d)}
.rkg-tx .tx-slip__back{color:var(--brass)}
.rkg-tx .tx-deck__play{color:var(--brass)}
.rkg-tx .tx-deck__all{color:var(--brass)}

/* --- nav sits under the band as its own white bar --- */
.rkg-tx .tx-nav{border-bottom:2px solid var(--hair);background:var(--night)}
.rkg-tx .tx-nav__in a{color:var(--bone);font-family:var(--ui);font-weight:600;letter-spacing:0;text-transform:none}
.rkg-tx .tx-nav__in a:hover{color:var(--brass)}

/* --- the language control keeps its blue, matched to the band --- */
.rkg-tx .tx-lang{border-color:var(--band)}
.rkg-tx .tx-lang__l{background:var(--band);color:var(--band-on)}
.rkg-tx .tx-lang a{color:var(--band);border-left-color:var(--band)}
.rkg-tx .tx-lang a:hover,
.rkg-tx .tx-lang a.is-on{background:var(--band);color:var(--band-on)}

/* --- scores --- */
.rkg-tx .tx-sc__lgs button[aria-pressed="true"]{border-bottom-color:var(--live)}
.rkg-tx .tx-sc__days button[aria-pressed="true"]{color:var(--live);border-bottom-color:var(--live)}
.rkg-tx .tx-strap__i b{font-family:var(--ui)}

/* ============================================================
   PICTURE-LED FRONT PAGE

   Built to the proportions of the reference: a lead taking about
   two fifths, three cards across the rest, headline under the
   image, red section label and time beneath. No frames, no
   shadows, no rounded corners — white space separates the cards,
   which is why they read as clean rather than as boxes.
   ============================================================ */

/* --- photographs, clean ---
   The grain, warm key and vignette were built for a dark editorial page.
   On a white news page they make a photograph look processed, and readers
   read processed as "artwork" rather than "news". Cards get the picture as
   shot: sharp, full colour, nothing laid over it. */
.tx-card__media::before,
.tx-card__media::after,
.tx-more__media::before,
.tx-more__media::after{content:none}
.tx-card__media img,
.tx-more__media img{filter:none}
.tx-card:hover .tx-card__media img{transform:scale(1.03)}

.tx-hero{
	display:grid;grid-template-columns:repeat(5,1fr);
	gap:34px 26px;padding:30px 0 34px;border-bottom:1px solid var(--hair);
}
.tx-card{display:flex;flex-direction:column;min-width:0}
.tx-card__media{aspect-ratio:16/9;margin-bottom:13px;background:var(--panel)}
.tx-card__h{
	color:var(--bone);font-family:var(--display);font-weight:700;
	font-size:calc(19px * var(--t));line-height:1.2;letter-spacing:-.012em;
	text-wrap:balance;
}
.tx-card:hover .tx-card__h{color:var(--brass)}
.tx-card__sum{
	font:400 calc(16px * var(--t))/1.5 var(--ui);color:var(--bone-2);margin-top:10px;
}
.tx-card__meta{
	display:flex;align-items:center;gap:9px;margin-top:12px;
	font:500 calc(12px * var(--t))/1 var(--ui);color:var(--bone-3);
}
.tx-card__cat{color:var(--live);font-weight:600}
.tx-card__meta time::before{content:"·";margin-right:9px;color:var(--bone-3)}
.tx-card__meta:has(.tx-card__cat) time::before{content:"·"}
.tx-card__meta > time:first-child::before{content:none}

/* the lead: two columns wide, two rows deep */
.tx-card--lead{grid-column:span 2;grid-row:span 2;border-right:1px solid var(--hair);padding-right:26px}
.tx-card--lead .tx-card__media{aspect-ratio:3/2;margin-bottom:17px}
.tx-card--lead .tx-card__h{font-size:calc(31px * var(--t));line-height:1.12;font-weight:800;letter-spacing:-.02em}

/* a full row of cards */
.tx-row{padding:30px 0 34px;border-bottom:1px solid var(--hair)}
.tx-row__in{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}

/* the broadcast log, as a band across the page */
.tx-band{padding:26px 0 30px;border-bottom:1px solid var(--hair)}
.tx-band__in{display:grid;grid-template-columns:repeat(3,1fr);column-gap:34px}
.tx-band__in a{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.tx-band__in time{font:500 calc(13px * var(--t))/1.3 var(--mono);color:var(--live);font-variant-numeric:tabular-nums}
.tx-band__in h4{
	color:var(--bone);font-family:var(--display);font-weight:600;
	font-size:calc(16.5px * var(--t));line-height:1.3;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tx-band__in a:hover h4{color:var(--brass)}

/* the thumbnail list */
.tx-more a{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--hair);align-items:start}
.tx-more__media{aspect-ratio:16/9;background:var(--panel)}
.tx-more h4{
	color:var(--bone);font-family:var(--display);font-weight:600;
	font-size:calc(18px * var(--t));line-height:1.26;letter-spacing:-.008em;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tx-more time{display:block;margin-top:9px;font:500 calc(12px * var(--t))/1 var(--ui);color:var(--bone-3)}
.tx-more a:hover h4{color:var(--brass)}

@media (max-width:1180px){
	.tx-hero{grid-template-columns:repeat(4,1fr)}
	.tx-card--lead{grid-column:span 2;grid-row:span 2}
	.tx-row__in{grid-template-columns:repeat(4,1fr)}
	.tx-band__in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
	.tx-hero{grid-template-columns:repeat(2,1fr);gap:26px 22px}
	.tx-card--lead{grid-column:1/-1;grid-row:auto;border-right:none;padding-right:0;padding-bottom:24px;border-bottom:1px solid var(--hair)}
	.tx-row__in{grid-template-columns:repeat(2,1fr)}
	.tx-band__in{grid-template-columns:1fr}
}
@media (max-width:580px){
	.tx-hero{grid-template-columns:1fr;gap:0;padding-top:18px}
	.tx-hero .tx-card{padding:18px 0;border-bottom:1px solid var(--hair)}
	.tx-card--lead{padding-bottom:20px}
	.tx-card--lead .tx-card__media{aspect-ratio:4/3;margin:0 calc(var(--gut) * -1) 16px}
	.tx-card--lead .tx-card__h{font-size:calc(27px * var(--t))}
	.tx-row__in{grid-template-columns:1fr;gap:0}
	.tx-row__in .tx-card{padding:18px 0;border-bottom:1px solid var(--hair)}
	.tx-more a{grid-template-columns:104px 1fr;gap:14px}
}

/* BBC holds every card headline to three lines, which is what makes the rows
   line up. Without it one forty-word title stretches its card and the grid
   stops looking composed. */
.tx-card__h{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3}
.tx-card--lead .tx-card__h{-webkit-line-clamp:4}
.tx-card__sum{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3}
.tx-card__meta{margin-top:auto;padding-top:12px}
.tx-hero,.tx-row__in{align-items:start}

/* ---------- the foot of an article ----------
   One row of cards, the same as the front page uses. With the rail no longer
   repeating them, this is the single place a reader looks for what is next. */
.tx-art__more{padding:34px 0 80px;border-top:1px solid var(--hair)}
.tx-art__more .tx-row__in{grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){.tx-art__more .tx-row__in{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.tx-art__more .tx-row__in{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){
	.tx-art__more .tx-row__in{grid-template-columns:1fr;gap:0}
	.tx-art__more .tx-card{padding:18px 0;border-bottom:1px solid var(--hair)}
	.tx-art__more{padding-bottom:96px}
}

/* the rail is now audio and campaigns only, so it needs less room */
@media (min-width:1181px){
	.tx-art__grid{grid-template-columns:190px minmax(0,1fr) 300px}
}

/* ---------- the article, simplified ----------
   The story column no longer competes with a rail of labelled fields on its
   left. What that column said now sits in one line under the headline, and
   the story gets the width back. */

.rkg-tx .tx-art__grid{grid-template-columns:minmax(0,1fr) 300px}
.rkg-tx .tx-art__main{border-left:none;padding-left:0;padding-right:var(--gut)}
.rkg-tx .tx-art__side{padding-left:var(--gut);border-left:1px solid var(--hair)}

.tx-art__by{
	display:flex;align-items:center;flex-wrap:wrap;gap:10px;
	margin-top:18px;padding-bottom:18px;
	font:500 calc(13.5px * var(--t))/1 var(--ui);color:var(--bone-3);
}
.tx-art__by-cat{color:var(--live);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tx-art__by > * + *::before{content:"·";margin-right:10px;color:var(--bone-3)}
.tx-art__rule{margin-top:0}

@media (max-width:1180px){
	.rkg-tx .tx-art__grid{grid-template-columns:minmax(0,1fr)}
	.rkg-tx .tx-art__main{padding-right:0}
	.rkg-tx .tx-art__side{border-left:none;padding-left:0;border-top:1px solid var(--hair);padding-top:26px}
}
@media (max-width:900px){
	.rkg-tx .tx-art__main{padding-top:22px}
}

/* ============================================================
   LESS FURNITURE

   The design used a monospace face for every label — strapline,
   section heads, the on-air caption, War Cusub, Luqad, category
   marks. Six of them in the masthead alone. Monospace reads as
   technical, and a page covered in technical labels reads as
   cluttered before a word of it is understood. It is kept for the
   three places it earns: the clock, broadcast times, and scores,
   where figures need to line up.
   ============================================================ */

.rkg-tx .tx-colhead{
	font-family:var(--ui);font-weight:700;font-size:calc(13px * var(--t));
	letter-spacing:.02em;text-transform:none;color:var(--live);
	border-bottom-width:2px;border-bottom-color:var(--bone);
	padding-bottom:9px;margin-bottom:14px;
}
.rkg-tx .tx-col--log .tx-colhead,
.rkg-tx .tx-art__side .tx-colhead{color:var(--live)}

.rkg-tx .tx-brand__sub{font-family:var(--ui);font-weight:500;letter-spacing:.06em;font-size:calc(11.5px * var(--t))}
.rkg-tx .tx-signal__label{font-family:var(--ui);font-weight:600;letter-spacing:.04em;font-size:calc(11px * var(--t));text-transform:none}
.rkg-tx .tx-util a{font-family:var(--ui);font-weight:600;letter-spacing:0;text-transform:none;font-size:calc(13.5px * var(--t))}
.rkg-tx .tx-lang__l{font-family:var(--ui);font-weight:600;letter-spacing:.04em;font-size:calc(11.5px * var(--t))}
.rkg-tx .tx-lang a{font-family:var(--ui);font-weight:600;letter-spacing:0;text-transform:none;font-size:calc(14px * var(--t))}
.rkg-tx .tx-cat,.rkg-tx .tx-slug{font-family:var(--ui);font-weight:700;letter-spacing:.03em}
.rkg-tx .tx-deck__t{font-family:var(--ui)}
.rkg-tx .tx-deck__all{font-family:var(--ui);font-weight:600;letter-spacing:0;text-transform:none;font-size:calc(13.5px * var(--t))}
.rkg-tx .tx-pg__sub{font-family:var(--ui);font-weight:600;letter-spacing:.06em;font-size:calc(12.5px * var(--t));color:var(--bone-3)}
.rkg-tx .tx-foot__in{font-family:var(--ui);letter-spacing:0}
.rkg-tx .tx-art__body figcaption,
.rkg-tx .tx-art__fig figcaption{font-family:var(--ui);letter-spacing:0;font-size:calc(13px * var(--t))}
.rkg-tx .rkg15-glance h2{font-family:var(--ui) !important;font-weight:700 !important;letter-spacing:.02em;color:var(--live) !important;text-transform:none}
.rkg-tx .rkg13-other a{font-family:var(--ui) !important;font-weight:600;letter-spacing:0;text-transform:none;font-size:calc(14px * var(--t)) !important}
.rkg-tx .tx-sc__lgs button,
.rkg-tx .tx-sc__days button,
.rkg-tx .tx-sc__foot{font-family:var(--ui);letter-spacing:.01em;text-transform:none;font-weight:600}
.rkg-tx .tx-sc__st{font-family:var(--ui);letter-spacing:.03em;font-weight:600;font-size:calc(11.5px * var(--t))}
.rkg-tx .tx-band__in h4{font-family:var(--display)}

/* kept in monospace, because figures should line up */
.rkg-tx .tx-clock__t,
.rkg-tx .tx-log time,
.rkg-tx .tx-band__in time,
.rkg-tx .tx-deck__d,
.rkg-tx .tx-sc__score,
.rkg-tx .tx-sc__time,
.rkg-tx .tx-strap__i{font-family:var(--mono)}
.rkg-tx .tx-clock__c{font-family:var(--ui);letter-spacing:.06em;font-size:calc(11px * var(--t))}

/* ============================================================
   THE ARTICLE, GIVEN A SHAPE

   A story page that opens with a headline and then eight equal
   paragraphs has no design in it — the reader gets no signal about
   where to start or what matters. Four marks fix that without any
   decoration: a section kicker, a lead picture, an opening
   paragraph set larger, and the summary given a ground of its own.
   ============================================================ */

.tx-art__kicker{
	display:inline-block;margin-bottom:14px;
	font:700 calc(13px * var(--t))/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
	color:var(--live);
	border-left:4px solid var(--live);padding-left:11px;
}

/* the lead picture, however it was found */
.tx-art__fig{margin:26px 0 0}
.tx-art__body > figure:first-child,
.tx-art__body > p:first-child > img{margin-top:0}
.rkg-tx .tx-art__fig .tx-media{aspect-ratio:auto;background:none}
.rkg-tx .tx-art__fig .tx-media img{position:static;height:auto;filter:none}
.rkg-tx .tx-art__fig .tx-media::before,
.rkg-tx .tx-art__fig .tx-media::after{content:none}
.tx-art__lead-img{margin:26px 0 0}
.tx-art__lead-img img{width:100%;height:auto;display:block}
.tx-art__lead-img figcaption{
	margin-top:10px;font:400 calc(13.5px * var(--t))/1.5 var(--ui);color:var(--bone-3);
}

/* the opening paragraph carries more weight than the ones after it */
.rkg-tx .tx-art__body > p:first-of-type,
.rkg-tx .tx-art__body .rkg-dateline + p{
	font-size:calc(21.5px * var(--t));line-height:1.6;color:var(--bone);font-weight:500;
}

/* At a glance: a ground of its own, which is the one place a news page
   earns a panel — it is a different kind of reading, not part of the story. */
.rkg-tx .tx-art__body .rkg15-glance{
	background:var(--panel) !important;
	border-left:4px solid var(--live) !important;
	padding:24px 26px !important;margin:34px 0 !important;
}
.rkg-tx .tx-art__body .rkg15-glance h2{margin-bottom:14px !important}
.rkg-tx .tx-art__body .rkg15-glance li{font-size:calc(17px * var(--t)) !important;color:var(--read) !important}
.rkg-tx .tx-art__body .rkg15-glance li::before{background:var(--live);width:7px}

/* share row */
.rkg-tx .tx-art__body .rkg15-share__l{font-family:var(--ui);font-weight:700;letter-spacing:.03em;color:var(--bone-2)}
.rkg-tx .tx-art__body .rkg15-s{color:var(--bone-2) !important}
.rkg-tx .tx-art__body .rkg15-s:hover{color:var(--live) !important}

@media (max-width:580px){
	.rkg-tx .tx-art__body > p:first-of-type,
	.rkg-tx .tx-art__body .rkg-dateline + p{font-size:calc(19px * var(--t))}
	.rkg-tx .tx-art__body .rkg15-glance{padding:20px 18px !important;margin-left:0;margin-right:0}
}

/* ============================================================
   THE STORY, CENTRED

   The article sat in a left column with a rail beside it, which
   left a band of empty page between the text and the edge — no
   man's land. A newspaper centres its story and puts everything
   else underneath. One column, middle of the page, nothing
   competing with it sideways.
   ============================================================ */

.rkg-tx .tx-art__grid{
	display:block;max-width:760px;margin:0 auto;padding-top:38px;
}
.rkg-tx .tx-art__main{
	border:none;padding:0;max-width:none;
}
.rkg-tx .tx-art__body{max-width:none !important}

/* the lead picture is allowed past the column, the way a printed page does it */
.rkg-tx .tx-art__lead-img{margin-left:-60px;margin-right:-60px;max-width:calc(100% + 120px)}
.rkg-tx .tx-art__lead-img figcaption{padding:0 60px}

/* what follows the story, on the same centre line */
.tx-art__after{
	max-width:760px;margin:0 auto;padding:34px 0 0;
	display:grid;gap:30px;
}
.rkg-tx .tx-art__more{max-width:1620px;margin:0 auto}

@media (max-width:900px){
	.rkg-tx .tx-art__grid{padding-top:26px}
	.rkg-tx .tx-art__lead-img{margin-left:0;margin-right:0}
	.rkg-tx .tx-art__lead-img figcaption{padding:0}
}
@media (max-width:580px){
	.rkg-tx .tx-art__lead-img{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1)}
	.rkg-tx .tx-art__lead-img figcaption{padding:0 var(--gut)}
}

/* ---------- archives, search, not-found ---------- */
.tx-arc__stand{margin-top:14px;font:400 calc(17px * var(--t))/1.5 var(--ui);color:var(--bone-2);max-width:60ch}
.tx-arc{padding-top:30px}
.tx-pages{
	display:flex;flex-wrap:wrap;gap:8px;align-items:center;
	padding:38px 0 80px;
}
.tx-pages a,.tx-pages span{
	display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;
	font:600 calc(15px * var(--t))/1 var(--ui);color:var(--brass);
	border:1px solid var(--hair);
}
.tx-pages a:hover{background:var(--panel);border-color:var(--brass)}
.tx-pages .current{background:var(--band);border-color:var(--band);color:var(--band-on)}
.tx-pages .dots{border:none;color:var(--bone-3)}

/* ================================================================
   JOIN BAND + SPONSOR LINE — v3.0.0
   ----------------------------------------------------------------
   The two pieces a news site needs before it can earn anything.
   Both follow the rules the rest of this design follows: hairlines
   rather than frames, no rounded corners, no drop shadows, and the
   blue reserved for controls — the join button is the second
   enclosed shape on the site after the language switch, and for the
   same reason: it is a control, not content.
   ================================================================ */

.tx-join{
	margin:46px 0 0;padding:30px 0 32px;
	border-top:2px solid var(--band);border-bottom:1px solid var(--hair);
	background:var(--panel);
}
.tx-join__in{
	display:grid;grid-template-columns:1fr minmax(300px,420px);
	gap:var(--gut);align-items:center;
}
/* Alignment is the whole job here. On the front page the band's content
   lines up with the story grid above it; on an article it lines up with the
   760px column the reader has just finished. A band centred on its own
   measure sits level with nothing, which is the "no man's land" look. */
.tx-art .tx-join__in{max-width:760px;margin:0 auto;grid-template-columns:1fr 340px}
.tx-join__h{
	font:700 calc(21px * var(--t))/1.2 var(--display);
	color:var(--bone);letter-spacing:-.01em;margin:0 0 6px;
}
.tx-join__p{
	font:400 calc(15px * var(--t))/1.5 var(--ui);
	color:var(--bone-2);margin:0;max-width:44ch;
}

.tx-join__do{display:flex;flex-direction:column;gap:12px}

/* WhatsApp is where the Somali diaspora already is, so it goes first
   and gets the filled treatment. Its own green would be a third brand
   colour on the page; the site's blue carries it instead. */
.rkg-tx .tx-join__wa{
	display:flex;align-items:center;justify-content:center;
	font:600 calc(13px * var(--t))/1 var(--ui);letter-spacing:.02em;
	background:var(--band);color:var(--band-on);
	padding:14px 18px;border-radius:2px;
	transition:background .16s ease;
}
.rkg-tx .tx-join__wa:hover{background:var(--blue)}

.tx-join__form{display:grid;grid-template-columns:1fr auto;gap:0;position:relative}
.rkg-tx .tx-join__in-f{
	font:400 calc(14px * var(--t))/1 var(--ui);
	color:var(--bone);background:var(--night);
	border:1px solid var(--blue);border-right:none;border-radius:2px 0 0 2px;
	padding:13px 14px;min-width:0;
}
.tx-join__in-f::placeholder{color:var(--bone-3)}
.rkg-tx .tx-join__go{
	font:600 calc(13px * var(--t))/1 var(--ui);letter-spacing:.02em;
	background:var(--blue);color:var(--blue-on);
	border:1px solid var(--blue);border-radius:0 2px 2px 0;
	padding:13px 20px;cursor:pointer;
	transition:opacity .16s ease;
}
.rkg-tx .tx-join__go:hover{opacity:.88}
.rkg-tx .tx-join__go[disabled]{opacity:.5;cursor:default}

/* Off-screen, never display:none — a field a bot cannot see but can
   still fill in is the whole point. */
.tx-join__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.tx-join__msg{
	grid-column:1 / -1;margin:8px 0 0;
	font:400 calc(13px * var(--t))/1.4 var(--ui);color:var(--bone-2);min-height:1.4em;
}
.tx-join__msg.is-ok{color:var(--band)}
.tx-join__msg.is-no{color:var(--live)}

@media (max-width:820px){
	.tx-join{margin-top:34px;padding:24px 0 26px}
	.tx-join__in{grid-template-columns:1fr;gap:18px}
	.tx-join__p{max-width:none}
}

/* ---------- sponsor ----------
   Labelled every time, in the reader's language. A sponsor's name must
   never be able to pass as editorial, which is why the tag sits before
   the line and not tucked underneath it. */
.tx-spon{
	display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
	padding:0 0 13px;margin:0 0 16px;
	border-bottom:1px solid var(--hair);
}
.tx-spon__tag{
	font:500 calc(9.5px * var(--t))/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
	color:var(--night);background:var(--bone-3);padding:4px 7px;border-radius:2px;
	flex:none;
}
.tx-spon__l{
	margin:0;font:400 calc(14px * var(--t))/1.45 var(--ui);color:var(--bone-2);
}
.rkg-tx .tx-spon__l a,.rkg-tx .tx-spon__l b{color:var(--bone);font-weight:600}
.rkg-tx .tx-spon__l a:hover{color:var(--blue);text-decoration:underline}

/* The theme's stylesheets are dequeued on these templates, so the one
   WordPress utility class the markup relies on is restated here. */
.rkg-tx .screen-reader-text{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* The band after someone has left the list: one column, nothing to fill in. */
.tx-join__in--said{grid-template-columns:1fr}

/* ================================================================
   THE LISTEN ROW — v3.2.0
   ----------------------------------------------------------------
   The newest bulletin, given a control a reader can see from across
   the page and a number they can measure against their own time.
   A small triangle beside a date asks them to guess what they are
   agreeing to; "2:30" answers it.

   This is the third enclosed shape on the site, after the language
   switch and the join button, and for the same reason: it is a
   control, not content.
   ================================================================ */

.tx-deck__lead{
	display:grid;grid-template-columns:auto 1fr auto;
	gap:16px;align-items:center;
	padding:14px 0 18px;margin:0 0 4px;
	border-bottom:1px solid var(--hair);
}

.rkg-tx .tx-deck__big{
	width:52px;height:52px;flex:none;border-radius:50%;
	background:var(--band);color:var(--band-on);
	font-size:calc(15px * var(--t));line-height:1;
	display:flex;align-items:center;justify-content:center;
	padding-left:3px; /* an optical nudge: a triangle sits left of centre */
	transition:background .16s ease,transform .16s ease;
}
.rkg-tx .tx-deck__big:hover{background:var(--blue);transform:scale(1.05)}

.tx-deck__kicker{
	display:block;font:500 calc(10px * var(--t))/1 var(--mono);
	letter-spacing:.16em;text-transform:uppercase;color:var(--live);
	margin-bottom:6px;
}
.tx-deck__leadt{
	font:700 calc(18px * var(--t))/1.28 var(--display);
	color:var(--bone);margin:0;
}
.tx-deck__len{
	font:500 calc(15px * var(--t))/1 var(--mono);
	color:var(--bone-2);font-variant-numeric:tabular-nums;
	white-space:nowrap;align-self:center;
}

/* On the front page the panel spreads across four columns; the listen
   row keeps the full width so it reads as one invitation, not a cell. */
.tx-tape--solo .tx-deck__lead{grid-column:1/-1}

@media (max-width:560px){
	.tx-deck__lead{gap:13px;padding:12px 0 16px}
	.rkg-tx .tx-deck__big{width:46px;height:46px}
	.tx-deck__leadt{font-size:calc(16.5px * var(--t))}
}

/* ================================================================
   THE PHONE MASTHEAD — v3.3.0
   ----------------------------------------------------------------
   Measured on a 412px screen before this: masthead 92px, navigation
   272px, language switch 40px — 404px of furniture before a reader
   met a single headline, which landed at y=604 and never appeared on
   the first screen at all.

   The navigation was wrapping into five stacked rows. Five rows is
   not a menu on a phone, it is a wall. It becomes one row that
   scrolls sideways — the pattern every news app uses — and the
   language switch pins itself to the right so it cannot scroll away.
   ================================================================ */

@media (max-width:700px){
	.rkg-tx .tx-mast__in{min-height:0;padding-top:14px;padding-bottom:14px}

	.rkg-tx .tx-nav__in{
		flex-wrap:nowrap;
		overflow-x:auto;
		overscroll-behavior-x:contain;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		-ms-overflow-style:none;
		column-gap:0;
		padding-top:0;padding-bottom:0;
	}
	.rkg-tx .tx-nav__in::-webkit-scrollbar{display:none}

	.rkg-tx .tx-nav__in li{flex:none}
	/* Smaller than the desktop 18px on purpose: at that size barely one
	   item fits, and a strip showing one item does not look scrollable.
	   At this size two and a half show, and the half is the invitation. */
	html body.rkg-tx .tx-nav__in li a{white-space:nowrap;padding:14px 16px 14px 0;font-size:calc(12px * var(--t))}

	/* Sticky inside a sideways scroller: the switch stays on screen
	   while the menu slides under it. */
	.rkg-tx .tx-lang{
		position:sticky;right:0;flex:none;width:auto;
		align-self:center;margin:0 0 0 6px;
		background:var(--night);
		box-shadow:-22px 0 16px -4px var(--night);
	}
	/* "Luqad" is a label for a control that is already obvious. On a
	   412px screen it was costing a third of the strip, so it goes. */
	.rkg-tx .tx-lang__l{display:none}
	/* The switch sits inside .tx-nav__in, so `html body.rkg-tx .tx-nav__in a`
	   — written to hold the ground against other plugins — was setting these
	   to 18px and making the control eat two thirds of the strip. Matched
	   here rather than lowered there, because that rule is load-bearing. */
	html body.rkg-tx .tx-lang a{padding:9px 11px;font-size:calc(9.5px * var(--t));letter-spacing:.04em;flex:none;justify-content:center}
	.rkg-tx .tx-lang a:first-of-type{border-left:none}
}