/* ==========================================================================
   TEDx — "The Power of a Nap"
   --------------------------------------------------------------------------
   This page is deliberately not built like the rest of the site. The brief was
   editorial rather than sales: big imagery, a lot of air, and the red TEDx
   stage photography doing most of the visual work.

   Three things carry that and nothing else changes:

   1. Air. Sections run on `--tx-gap`, which tops out well past the theme's
      largest spacing preset. The page has eight sections and only one ask, so
      it can afford the room.
   2. Measure. Headings get a wide column, running copy a narrow one (~62ch).
      The gap between the two is what makes a page read as editorial.
   3. One borrowed colour. TED red appears as rules, the eyebrow, the quote
      mark and the play target — never as a button. Buttons stay gold so the
      conversion path still looks like the rest of the site.

   Red: #C8241A is the red used for text on the light bands (5.6:1 against the
   page); the brighter #E62B1E is decoration only — rules, the quote mark, the
   credential ticks. There is no red type on the dark bands: two of the three
   sit over photographs whose subject is a wall of red TED letters, and the
   third is forest green, where it measures 2.9:1. Those use cream.

   Everything else comes from the active theme's palette, so the page follows
   the site rather than pinning its own colours. Worth knowing when reading the
   token names: under the kg-style child theme `charcoal` resolves to #000 and
   `warm-white` to #fff, and `playfair` is Black Mango, not Playfair.
   ========================================================================== */

.kog-tx {
	--tx-red: #e62b1e;          /* decoration only */
	--tx-red-ink: #c8241a;      /* red text on light */
	--tx-red-ink-dark: #f0392b; /* red text on dark */
	--tx-ink: var(--wp--preset--color--charcoal);
	--tx-paper: var(--wp--preset--color--warm-white);
	--tx-cream: var(--wp--preset--color--cream);
	--tx-black: #0e0e0d;
	--tx-serif: var(--wp--preset--font-family--playfair);
	--tx-sans: var(--wp--preset--font-family--dm-sans);
	--tx-gap: clamp(4.5rem, 9vw, 9rem);
	--tx-measure: 62ch;
	--tx-max: 1240px;
}

.kog-tx-section {
	padding-block: var(--tx-gap);
	background: var(--tx-paper);
}

/* Shared inner rails. `--tx-max` rather than the theme's 1200 contentSize:
   these sections are full-bleed, so they set their own measure. */
.kog-tx-talk__inner,
.kog-tx-behind__inner,
.kog-tx-idea__inner,
.kog-tx-meet__inner,
.kog-tx-paths__inner,
.kog-tx-room__inner,
.kog-tx-ask__inner,
.kog-tx-hero__inner {
	width: min(var(--tx-max), 100%);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

/* The eyebrow carries a short red rule instead of sitting on its own, which is
   what ties the section openings to the stage photography. */
.kog-tx-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.1rem;
	font-family: var(--tx-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--tx-red-ink);
}

.kog-tx-eyebrow::before {
	content: '';
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2px;
	background: var(--tx-red);
}

/* Cream on the dark bands, not red. Two of the three sit over photographs
   whose subject is a wall of red TED letters, and the third is the forest
   green the rest of the site uses, where this red measures 2.9:1. The rule in
   front of the words still carries the accent. */
.kog-tx-eyebrow--light { color: rgba(250, 248, 243, 0.92); }

.kog-tx-h2 {
	margin: 0 0 1.4rem;
	font-family: var(--tx-serif);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--tx-ink);
}

/* Size and face only — no colour. Text colour is inherited from the section,
   which is the one thing that scales to eight bands, three of them dark.
   Setting it here instead started a specificity race this lost twice: the
   eyebrows are <p>, so a bare `.kog-tx-section p` painted all eight of them
   charcoal (1.0:1 on the dark bands), and adding `:not(.kog-tx-eyebrow)` to
   fix that then outranked the dark bands' own body colour and blacked those
   out too. `:not()` is still here so the eyebrows keep their own size. */
.kog-tx-section { color: var(--tx-ink); }

.kog-tx-section p:not(.kog-tx-eyebrow) {
	font-family: var(--tx-sans);
	font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
	line-height: 1.72;
}

.kog-tx-lede {
	max-width: var(--tx-measure);
	font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
	color: rgba(28, 28, 26, 0.82);
}

/* --------------------------------------------------------------------------
   Buttons — gold, as everywhere else on the site. The red stays decorative.
   -------------------------------------------------------------------------- */
.kog-tx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.kog-tx-actions--centred { justify-content: center; }

.kog-tx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 100px;
	background: var(--wp--preset--color--gold);
	color: #1c1c1a;
	font-family: var(--tx-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 240ms ease-out, border-color 240ms ease-out, color 240ms ease-out;
}

.kog-tx-btn:hover,
.kog-tx-btn:focus-visible {
	background: var(--wp--preset--color--gold-light);
	border-color: var(--wp--preset--color--gold-light);
	color: #1c1c1a;
}

.kog-tx-btn--ghost {
	background: transparent;
	border-color: rgba(28, 28, 26, 0.3);
	color: var(--tx-ink);
}

.kog-tx-btn--ghost:hover,
.kog-tx-btn--ghost:focus-visible {
	background: transparent;
	border-color: var(--wp--preset--color--gold);
	color: var(--tx-ink);
}

.kog-tx-btn--on-dark {
	border-color: rgba(250, 248, 243, 0.42);
	color: var(--tx-paper);
}

.kog-tx-btn--on-dark:hover,
.kog-tx-btn--on-dark:focus-visible {
	border-color: var(--wp--preset--color--gold-light);
	color: var(--tx-paper);
}

/* --------------------------------------------------------------------------
   1 — Hero
   The photo is an <img> under an absolute scrim rather than a background, so
   it can be `fetchpriority="high"` — it is the page's LCP and a background
   image would not be discoverable until the CSS had parsed.
   -------------------------------------------------------------------------- */
.kog-tx-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(88vh, 860px);
	padding-block: clamp(6rem, 12vw, 9rem) clamp(3rem, 7vw, 5.5rem);
	overflow: hidden;
	background: var(--tx-black);
}

.kog-tx-hero__photo,
.kog-tx-idea__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The photo is 3:2 and this band is about 2.3:1, so cover crops it vertically
   and the horizontal position does nothing — the whole width is always shown.
   Biased to the top because centring it takes her head off. */
.kog-tx-hero__photo { object-position: center 30%; }

/* Dark at the foot and along the left, clear over the red letters on the
   right, so the stage keeps its colour and the title still reads. */
.kog-tx-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(8,8,7,0.90) 0%, rgba(8,8,7,0.64) 28%, rgba(8,8,7,0.18) 58%, rgba(8,8,7,0) 84%),
		linear-gradient(90deg, rgba(8,8,7,0.62) 0%, rgba(8,8,7,0.22) 46%, rgba(8,8,7,0) 76%);
}

/* Photo 0, scrim 1, copy 2. Not negative z-indexes behind an isolated parent:
   that works, but it puts the photograph on its own compositing layer, which
   some renderers then leave out of a capture. Nothing here needs it. */
.kog-tx-hero__inner { position: relative; z-index: 2; }

.kog-tx-hero__title {
	/* The theme uppercases every h1. This page is editorial, and the talk has a
	   title rather than a headline, so it keeps its sentence case. */
	text-transform: none;
	/* Wrapped to two lines on purpose. She stands left of centre with the red
	   TED filling the right, so a single line ran the full width and put the
	   title across her. Two lines keep it stacked in the dark left third. */
	max-width: 11ch;
	margin: 0 0 1.4rem;
	font-family: var(--tx-serif);
	font-weight: 400;
	font-size: clamp(2.75rem, 6.2vw, 5.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--tx-paper);
}

.kog-tx-hero__dek {
	max-width: 52ch;
	margin: 0;
	font-family: var(--tx-sans);
	font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
	line-height: 1.6;
	color: rgba(250, 248, 243, 0.9);
}

/* --------------------------------------------------------------------------
   2 — The talk
   -------------------------------------------------------------------------- */
.kog-tx-talk__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.kog-tx-talk__head .kog-tx-h2 { margin-bottom: 0; }

/* Wider than the reading rail on purpose — the brief asked for the embed big,
   and this is the one element allowed past `--tx-max`. */
.kog-tx-talk__stage {
	width: min(1560px, 100%);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	box-sizing: border-box;
}

.kog-tx-talk__player {
	width: 100%;
	margin-inline: auto;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(14, 14, 13, 0.22);
}

.kog-tx-talk__note {
	max-width: var(--tx-measure);
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	color: rgba(28, 28, 26, 0.82);
}

.kog-tx-behind, .kog-tx-paths { color: var(--tx-ink); }

/* --------------------------------------------------------------------------
   3 — Behind the talk
   -------------------------------------------------------------------------- */
.kog-tx-behind { background: var(--tx-cream); }

.kog-tx-behind__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}

.kog-tx-behind__figure,
.kog-tx-meet__figure {
	margin: 0;
	line-height: 0;
}

.kog-tx-behind__figure img,
.kog-tx-meet__figure img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.kog-tx-behind__copy > p,
.kog-tx-meet__copy > p { max-width: var(--tx-measure); }
.kog-tx-behind__copy > p + p,
.kog-tx-meet__copy > p + p { margin-top: 1.15rem; }
.kog-tx-behind__copy > p:first-of-type,
.kog-tx-meet__copy > p:first-of-type { margin-top: 0; }

/* --------------------------------------------------------------------------
   4 — The big idea
   -------------------------------------------------------------------------- */
.kog-tx-idea {
	color: rgba(250, 248, 243, 0.86);
	position: relative;
	overflow: hidden;
	background: var(--tx-black);
	padding-block: clamp(5.5rem, 11vw, 10rem);
}

.kog-tx-idea__photo { object-position: center 35%; }

.kog-tx-idea__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* The lightest that still clears WCAG on all three layers of type. Sampling
	   the composite under each: 3.6:1 on the question (large, needs 3), 5.8:1
	   on the body and 4.6:1 on the eyebrow. Anything lighter drops the question
	   below 3; anything heavier and the stage stops reading as a photograph —
	   it is a dark theatre shot, mean luminance 0.06 before the scrim. */
	background: linear-gradient(180deg, rgba(8,8,7,0.72) 0%, rgba(8,8,7,0.50) 42%, rgba(8,8,7,0.64) 100%);
}

.kog-tx-idea__inner { position: relative; z-index: 2; text-align: center; }
.kog-tx-idea .kog-tx-eyebrow { justify-content: center; }

.kog-tx-idea__q {
	max-width: 20ch;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	font-family: var(--tx-serif);
	font-weight: 400;
	font-size: clamp(2.25rem, 5.6vw, 4.5rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--tx-paper);
}

.kog-tx-idea__body {
	max-width: 58ch;
	margin-inline: auto;
}

.kog-tx-idea__body p + p { margin-top: 1.15rem; }

/* --------------------------------------------------------------------------
   5 — Meet Khaliah
   -------------------------------------------------------------------------- */
/* Held to one line. "Meet Khaliah O. Guillory" is 24 characters against a
   column that is barely half the rail, so at the shared heading size it wanted
   633px in 596 and broke after "O." — which reads as a typo rather than a line
   break. 3rem is the largest that fits, and 3.4vw keeps it fitting as the
   column narrows. A name should not wrap. */
.kog-tx-meet .kog-tx-h2 {
	font-size: clamp(1.75rem, 3.4vw, 3rem);
}

.kog-tx-meet__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}

.kog-tx-meet__creds {
	margin: 0 0 1.6rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 1.4rem;
	max-width: 46rem;
}

.kog-tx-meet__creds li {
	position: relative;
	font-family: var(--tx-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(28, 28, 26, 0.72);
}

/* A red tick before each, in place of the pipes the copy came in with. */
.kog-tx-meet__creds li::before {
	content: '';
	display: inline-block;
	width: 0.5rem;
	height: 2px;
	margin-right: 0.55rem;
	vertical-align: 0.3em;
	background: var(--tx-red);
}

/* --------------------------------------------------------------------------
   6 — From the talk to the work
   -------------------------------------------------------------------------- */
.kog-tx-paths { background: var(--tx-cream); }
.kog-tx-paths__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.kog-tx-paths__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kog-tx-card { display: flex; }

.kog-tx-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--tx-paper);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 240ms ease-out, box-shadow 240ms ease-out;
}

.kog-tx-card__link:hover,
.kog-tx-card__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(14, 14, 13, 0.14);
}

.kog-tx-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	line-height: 0;
}

.kog-tx-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kog-tx-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.6rem;
	padding: clamp(1.35rem, 2.4vw, 1.9rem);
}

.kog-tx-card__kicker {
	font-family: var(--tx-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--tx-red-ink);
}

.kog-tx-card__title {
	font-family: var(--tx-serif);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.15;
	color: var(--tx-ink);
}

.kog-tx-card__text {
	font-family: var(--tx-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(28, 28, 26, 0.78);
}

/* Pushed to the foot so the three cards' links sit on one line however long
   the copy above them runs. */
.kog-tx-card__cta {
	margin-top: auto;
	padding-top: 0.5rem;
	font-family: var(--tx-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tx-ink);
}

.kog-tx-card__link:hover .kog-tx-card__cta,
.kog-tx-card__link:focus-visible .kog-tx-card__cta { color: var(--tx-red-ink); }

/* --------------------------------------------------------------------------
   7 — The room has spoken
   -------------------------------------------------------------------------- */
.kog-tx-room__inner {
	margin: 0 auto;
	max-width: 70rem;
	text-align: center;
}

.kog-tx-room .kog-tx-eyebrow { justify-content: center; }

/* The sans face, not the display one. The display face's opening quote is a
   pair of steep wedges that reads as two slashes at this size, and clipping it
   to `line-height: 0.6` — which is what it was doing — made that worse. */
.kog-tx-room__mark {
	display: block;
	font-family: var(--tx-sans);
	font-size: clamp(5rem, 11vw, 9rem);
	line-height: 1;
	height: 0.55em;
	overflow: hidden;
	color: var(--tx-red);
	margin: 1.4rem 0 0.5rem;
}

.kog-tx-room__quote { margin: 0; }

.kog-tx-room__quote p {
	margin: 0;
	font-family: var(--tx-serif);
	font-size: clamp(1.375rem, 2.7vw, 2.125rem) !important;
	font-style: italic;
	line-height: 1.3;
	color: var(--tx-ink);
}

/* --------------------------------------------------------------------------
   8 — The ask. The page's only conversion section.
   -------------------------------------------------------------------------- */
.kog-tx-ask {
	background: var(--wp--preset--color--forest);
	color: rgba(250, 248, 243, 0.86);
	text-align: center;
}

.kog-tx-ask .kog-tx-eyebrow { justify-content: center; }

.kog-tx-ask__head {
	margin: 0 0 1.2rem;
	font-family: var(--tx-serif);
	font-weight: 400;
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	line-height: 1.1;
	color: var(--tx-paper);
}

.kog-tx-ask__body {
	max-width: 56ch;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.kog-tx-paths__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
	.kog-tx-behind__inner,
	.kog-tx-meet__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 5vw, 2.5rem);
	}
	/* Copy first in both: a full-height stage portrait above the words pushes
	   them off the first screen. */
	.kog-tx-behind__figure { order: 2; }
	.kog-tx-behind__copy { order: 1; }
	.kog-tx-hero { min-height: min(78vh, 680px); }
}

@media (prefers-reduced-motion: reduce) {
	.kog-tx-card__link { transition: none; }
	.kog-tx-card__link:hover,
	.kog-tx-card__link:focus-visible { transform: none; }
}