/* ============================================================
   WordPress compatibility shims.

   These rules exist ONLY to reproduce markup-level details of
   third-phase-home.html that WordPress cannot carry through
   wp_nav_menu() or an ACF image field. They add no new design.
============================================================ */

/* The original markup carried style="color:var(--tp-gold-dark)" on the
   "Companion Guide" link. A nav menu item cannot hold an inline style, so
   add the CSS class `tp-nav-link-accent` to that menu item instead
   (Appearance -> Menus -> item -> CSS Classes). */
.tp-nav-links .tp-nav-link-accent > a,
.tp-footer-links .tp-nav-link-accent > a,
.tp-backstage-footer-links .tp-nav-link-accent > a {
	color: var(--tp-gold-dark);
}

/* wp_nav_menu() emits its own list markup; neutralise WordPress defaults so
   the flex rules in style.css apply exactly as they did to the static <ul>. */
.tp-nav-links,
.tp-footer-links,
.tp-backstage-footer-links {
	list-style: none;
}

.tp-nav-links li,
.tp-footer-links li,
.tp-backstage-footer-links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* An uploaded logo image stands in for the original text logo. */
.tp-nav-logo-image {
	display: block;
	width: auto;
	max-height: 44px;
}

.tp-footer-logo-image {
	display: inline-block;
	width: auto;
	max-height: 34px;
}

/* Uploaded icon images inherit the box the inline SVGs occupied. */
.tp-feature-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.tp-backstage-footer-social img,
.tp-footer-social img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}

/* An uploaded interview still fills the media frame the placeholder occupied. */
.tp-interview-media-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The WordPress admin bar must not cover the fixed nav. */
body.admin-bar .tp-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .tp-nav {
		top: 46px;
	}
}

/* ============================================================
   EMBEDDED FORM PLUGIN (Gravity Forms) — Email Signup section

   When the Email Signup section is given a form shortcode, the plugin's markup
   replaces the built-in .tp-email-form. These rules reproduce the design's form
   on that markup so the section looks unchanged.

   Values mirror the effective .tp-email-form / .tp-email-input /
   .tp-email-submit rules in style.css — including the inherited
   line-height: 1.7, which Gravity Forms' CSS reset unsets. Change these if
   those change.

   !important is used deliberately. Gravity Forms 2.8's theme framework styles
   its controls through selectors such as
     .gform-theme.gform-theme--framework.gform_wrapper .button:where(...)
   at specificity (0,4,0), which outranks a sane theme selector. Scoping is
   limited to .tp-email-form-embed, so no other form on the site is affected.
   Tested against Gravity Forms 2.8 ("orbital" theme).
============================================================ */
.tp-email-form-embed {
	max-width: 640px;
	margin: 0 auto;
}

/* Strip the plugin wrapper's own spacing. */
.tp-email-form-embed .gform_wrapper,
.tp-email-form-embed .gform_wrapper form,
.tp-email-form-embed .gform-body,
.tp-email-form-embed .ginput_container {
	margin: 0 !important;
	padding: 0 !important;
}

/* One row: the two fields, then the button — matching .tp-email-form. */
.tp-email-form-embed .gform_wrapper form {
	display: flex !important;
	flex-direction: row !important;
	gap: 0.6rem !important;
	/*
	 * stretch, not flex-start: in the original design the submit button has no
	 * height of its own and is stretched to the inputs' height by the flex
	 * container. Anything else leaves the button a few pixels short.
	 */
	align-items: stretch !important;
}

.tp-email-form-embed .gform-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

/* Gravity Forms lays fields out on a grid; the design wants them side by side. */
.tp-email-form-embed .gform_fields {
	display: flex !important;
	flex-direction: row !important;
	grid-template-columns: none !important;
	gap: 0.6rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tp-email-form-embed .gfield {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	padding: 0 !important;
	grid-column: auto !important;
}

/* The design shows no labels. */
.tp-email-form-embed .gfield_label,
.tp-email-form-embed .gfield_required,
.tp-email-form-embed .gform_hidden + .gfield_label {
	display: none !important;
}

/* Text inputs — mirrors .tp-email-input. */
.tp-email-form-embed .gform_wrapper input[type="text"],
.tp-email-form-embed .gform_wrapper input[type="email"] {
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	font-family: var(--tp-font-sans) !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	padding: 0.85rem 1.2rem !important;
	border: 1.5px solid var(--tp-cream-dark) !important;
	border-radius: 2px !important;
	background: var(--tp-white) !important;
	color: var(--tp-charcoal) !important;
	outline: none !important;
	/*
	 * The section is centre-aligned. The design's own inputs keep the UA
	 * default (start), but Gravity Forms' reset lets them inherit the centring,
	 * which visibly shifts the placeholder text.
	 */
	text-align: start !important;
	/* Gravity Forms adds a subtle drop shadow; the design has none. */
	box-shadow: none !important;
	transition: border-color 0.2s !important;
}

.tp-email-form-embed .gform_wrapper input[type="text"]:focus,
.tp-email-form-embed .gform_wrapper input[type="email"]:focus {
	border-color: var(--tp-gold) !important;
	box-shadow: none !important;
}

.tp-email-form-embed .gform_wrapper input[type="text"]::placeholder,
.tp-email-form-embed .gform_wrapper input[type="email"]::placeholder {
	color: rgba(58, 53, 48, 0.65) !important;
	opacity: 1;
}

/* Submit button — mirrors .tp-email-submit. */
.tp-email-form-embed .gform_footer {
	display: flex !important;
	align-items: stretch !important;
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tp-email-form-embed .gform_wrapper input[type="submit"],
.tp-email-form-embed .gform_wrapper .gform_button,
.tp-email-form-embed .gform_wrapper button.gform_button {
	box-sizing: border-box !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	font-family: var(--tp-font-sans) !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	background: var(--tp-gold) !important;
	color: var(--tp-white) !important;
	padding: 0.85rem 1.6rem !important;
	border: none !important;
	border-radius: 2px !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background 0.2s !important;
	white-space: nowrap !important;
}

.tp-email-form-embed .gform_wrapper input[type="submit"]:hover,
.tp-email-form-embed .gform_wrapper .gform_button:hover {
	background: var(--tp-gold-dark) !important;
}

/* Validation and confirmation messages inherit the section's type. */
.tp-email-form-embed .gform_validation_errors,
.tp-email-form-embed .gfield_validation_message,
.tp-email-form-embed .gform_confirmation_message,
.tp-email-form-embed .gform_ajax_spinner {
	font-family: var(--tp-font-sans);
	font-size: 0.75rem;
}

/* The design stacks the form below 640px. */
@media (max-width: 640px) {
	.tp-email-form-embed .gform_wrapper form,
	.tp-email-form-embed .gform_fields {
		flex-direction: column !important;
	}

	.tp-email-form-embed .gform_footer,
	.tp-email-form-embed .gform_wrapper input[type="submit"],
	.tp-email-form-embed .gform_wrapper .gform_button {
		width: 100% !important;
	}
}

/* ============================================================
   EMBEDDED FORM PLUGIN — BACKSTAGE notify + Contact

   Same job as the Email Signup block above: reproduce the design's form on
   Gravity Forms' markup. Values mirror .tp-notify-* / .tp-contact-* in
   style.css. !important for the same reason — GF 2.8's theme framework styles
   its controls at (0,4,0) specificity. Scoped to the embed wrappers.
============================================================ */

/* ── shared: strip the plugin's own chrome ── */
.tp-notify-form-embed .gform_wrapper,
.tp-notify-form-embed .gform_wrapper form,
.tp-notify-form-embed .gform-body,
.tp-notify-form-embed .ginput_container,
.tp-contact-form-embed .gform_wrapper,
.tp-contact-form-embed .gform_wrapper form,
.tp-contact-form-embed .gform-body,
.tp-contact-form-embed .ginput_container {
	margin: 0 !important;
	padding: 0 !important;
}

/* ── BACKSTAGE notify form — mirrors .tp-notify-form / -input / -btn ── */
.tp-notify-form-embed {
	max-width: 620px;
	margin-bottom: 0.6rem;
}

.tp-notify-section .tp-notify-form-embed {
	margin: 0 auto 0.6rem;
}

/* Joined control: fields and button sit flush, as one bar. */
.tp-notify-form-embed .gform_wrapper form {
	display: flex !important;
	flex-direction: row !important;
	gap: 0 !important;
	align-items: stretch !important;
}

.tp-notify-form-embed .gform-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.tp-notify-form-embed .gform_fields {
	display: flex !important;
	flex-direction: row !important;
	grid-template-columns: none !important;
	gap: 0 !important;
}

.tp-notify-form-embed .gfield {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	padding: 0 !important;
	grid-column: auto !important;
}

.tp-notify-form-embed .gfield_label,
.tp-notify-form-embed .gfield_required {
	display: none !important;
}

.tp-notify-form-embed .gform_wrapper input[type="text"],
.tp-notify-form-embed .gform_wrapper input[type="email"] {
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	font-family: var(--tp-font-body) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	text-align: start !important;
	padding: 0.85rem 1.2rem !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(200, 134, 10, 0.35) !important;
	border-right: none !important;
	border-radius: 2px 0 0 2px !important;
	color: var(--tp-cream) !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.2s, background 0.2s !important;
}

/* The second field continues the bar, so it loses its rounded corners. */
.tp-notify-form-embed .gfield + .gfield .gform_wrapper input,
.tp-notify-form-embed .gfield + .gfield input[type="text"],
.tp-notify-form-embed .gfield + .gfield input[type="email"] {
	border-radius: 0 !important;
}

.tp-notify-form-embed .gform_wrapper input[type="text"]::placeholder,
.tp-notify-form-embed .gform_wrapper input[type="email"]::placeholder {
	color: rgba(245, 238, 220, 0.65) !important;
	opacity: 1;
}

.tp-notify-form-embed .gform_wrapper input[type="text"]:focus,
.tp-notify-form-embed .gform_wrapper input[type="email"]:focus {
	border-color: var(--tp-gold) !important;
	background: rgba(255, 255, 255, 0.12) !important;
}

/* The notify section sits on cream, so its fields invert. */
.tp-notify-section .tp-notify-form-embed .gform_wrapper input[type="text"],
.tp-notify-section .tp-notify-form-embed .gform_wrapper input[type="email"] {
	background: var(--tp-white) !important;
	border: 1px solid var(--tp-cream-dark) !important;
	border-right: none !important;
	color: var(--tp-charcoal) !important;
}

.tp-notify-section .tp-notify-form-embed .gform_wrapper input[type="text"]::placeholder,
.tp-notify-section .tp-notify-form-embed .gform_wrapper input[type="email"]::placeholder {
	color: rgba(60, 50, 40, 0.65) !important;
}

.tp-notify-form-embed .gform_footer {
	display: flex !important;
	align-items: stretch !important;
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tp-notify-form-embed .gform_wrapper input[type="submit"],
.tp-notify-form-embed .gform_wrapper .gform_button {
	box-sizing: border-box !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	font-family: var(--tp-font-sans) !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	background: var(--tp-gold) !important;
	color: var(--tp-white) !important;
	padding: 0.85rem 1.6rem !important;
	border: none !important;
	border-radius: 0 2px 2px 0 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	white-space: nowrap !important;
	transition: background 0.2s !important;
}

.tp-notify-form-embed .gform_wrapper input[type="submit"]:hover,
.tp-notify-form-embed .gform_wrapper .gform_button:hover {
	background: var(--tp-gold-dark) !important;
}

/* The design stacks this form below 640px, swapping which edges are rounded. */
@media (max-width: 640px) {
	.tp-notify-form-embed .gform_wrapper form,
	.tp-notify-form-embed .gform_fields {
		flex-direction: column !important;
	}

	.tp-notify-form-embed .gform_wrapper input[type="text"],
	.tp-notify-form-embed .gform_wrapper input[type="email"] {
		border-right: 1px solid rgba(200, 134, 10, 0.35) !important;
		border-bottom: none !important;
		border-radius: 2px 2px 0 0 !important;
	}

	.tp-notify-section .tp-notify-form-embed .gform_wrapper input[type="text"],
	.tp-notify-section .tp-notify-form-embed .gform_wrapper input[type="email"] {
		border-right: 1px solid var(--tp-cream-dark) !important;
	}

	.tp-notify-form-embed .gfield + .gfield input[type="text"],
	.tp-notify-form-embed .gfield + .gfield input[type="email"] {
		border-radius: 0 !important;
	}

	.tp-notify-form-embed .gform_footer,
	.tp-notify-form-embed .gform_wrapper input[type="submit"],
	.tp-notify-form-embed .gform_wrapper .gform_button {
		width: 100% !important;
	}

	.tp-notify-form-embed .gform_wrapper input[type="submit"],
	.tp-notify-form-embed .gform_wrapper .gform_button {
		border-radius: 0 0 2px 2px !important;
	}
}

/* ── Contact form ──
   The section wraps the plugin in .tp-contact-form, so the design's generic
   `.tp-contact-form input, select, textarea` rules already apply. These only
   undo the plugin's own reset and restyle the parts it owns. */
.tp-contact-form-embed .gform_fields {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	/* Columns only. The vertical rhythm is .gfield's own margin-top (1.3rem, as
	   in the design); a row-gap on top of it would double the spacing between
	   every field. */
	column-gap: 1.2rem !important;
	row-gap: 0 !important;
}

/* Full-width by default; the name/email pair is set to half width in the form. */
.tp-contact-form-embed .gfield {
	grid-column: 1 / -1 !important;
	padding: 0 !important;
	margin-top: 1.3rem !important;
}

.tp-contact-form-embed .gfield--width-half {
	grid-column: span 1 !important;
	margin-top: 0 !important;
}

.tp-contact-form-embed .gfield_label {
	display: block !important;
	margin: 0 0 0.5rem !important;
	font-family: var(--tp-font-sans) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--tp-charcoal-mid) !important;
}

.tp-contact-form-embed .gfield_required {
	display: none !important;
}

.tp-contact-form-embed .gform_wrapper input[type="text"],
.tp-contact-form-embed .gform_wrapper input[type="email"],
.tp-contact-form-embed .gform_wrapper select,
.tp-contact-form-embed .gform_wrapper textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	border: 1px solid #C9C0AD !important;
	border-radius: 1px !important;
	background: #FFFEFA !important;
	color: var(--tp-charcoal) !important;
	font-family: var(--tp-font-body) !important;
	font-size: 1.08rem !important;
	line-height: 1.4 !important;
	padding: 0.85rem 0.95rem !important;
	text-align: start !important;
	outline: none !important;
	box-shadow: none !important;
}

.tp-contact-form-embed .gform_wrapper select {
	font-family: var(--tp-font-sans) !important;
	font-size: 0.9rem !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233A3530' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.95rem center !important;
	background-size: 12px 8px !important;
	padding-right: 2.6rem !important;
}

/* IE/Edge legacy arrow, which would sit beside the one drawn above. */
.tp-contact-form-embed .gform_wrapper select::-ms-expand {
	display: none !important;
}

.tp-contact-form-embed .gform_wrapper textarea {
	resize: vertical !important;
	min-height: 10rem !important;
	/* The design's textarea is rows="7": 7 x 1.08rem x 1.4 line-height, plus the
	   0.85rem padding on each edge and the border. The plugin's own rows setting
	   renders a taller box, so pin the height here instead. */
	height: 12.4rem !important;
}

.tp-contact-form-embed .gform_wrapper input:focus,
.tp-contact-form-embed .gform_wrapper select:focus,
.tp-contact-form-embed .gform_wrapper textarea:focus {
	border-color: var(--tp-gold) !important;
	box-shadow: 0 0 0 3px rgba(200, 134, 10, 0.12) !important;
}

.tp-contact-form-embed .gform_footer {
	margin: 0 !important;
	padding: 0 !important;
}

.tp-contact-form-embed .gform_wrapper input[type="submit"],
.tp-contact-form-embed .gform_wrapper .gform_button {
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin-top: 1.7rem !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: var(--tp-gold) !important;
	color: #21170a !important;
	font-family: var(--tp-font-sans) !important;
	font-size: 0.88rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.13em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	padding: 1rem !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: transform 0.16s ease, background 0.16s ease !important;
}

.tp-contact-form-embed .gform_wrapper input[type="submit"]:hover,
.tp-contact-form-embed .gform_wrapper .gform_button:hover {
	background: var(--tp-gold-dark) !important;
	color: var(--tp-white) !important;
}

@media (max-width: 640px) {
	.tp-contact-form-embed .gform_fields {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}

	.tp-contact-form-embed .gfield--width-half {
		grid-column: 1 / -1 !important;
		margin-top: 1.3rem !important;
	}
}

/* ── Contact page: the design gives this page its own ground and a solid nav.
   Scoped by the slug body class from thethirdphasenovel_body_class() so
   header.php stays global. ── */
body.tp-page-contact .tp-site,
body.tp-page-thank-you .tp-site,
body.error404 .tp-site {
	min-height: 100vh;
	background: var(--tp-cream);
}

body.tp-page-contact .tp-nav:not(.tp-nav-scrolled),
body.tp-page-thank-you .tp-nav:not(.tp-nav-scrolled),
body.error404 .tp-nav:not(.tp-nav-scrolled) {
	background: rgba(10, 6, 2, 0.94);
}

/* The 404 page reuses .tp-footer-links on a light ground, where the footer's
   near-white link colour would be unreadable. */
body.error404 .tp-hook-section .tp-footer-links {
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-top: 1.5rem;
}

body.error404 .tp-hook-section .tp-footer-links a {
	color: var(--tp-charcoal-mid);
	font-size: 0.75rem;
}

body.error404 .tp-hook-section .tp-footer-links a:hover {
	color: var(--tp-gold-dark);
}

/* ============================================================
   THANK YOU + 404 — full-screen treatment

   These two pages carry a single short message, so the hero fills the viewport
   and centres it rather than leaving the footer halfway up the screen.

   They also need their own type scale. The design sizes the hero's intro with
   `.tp-contact-hero p:last-child`, which only works when the paragraph really
   is last — on these pages a button paragraph follows it, so the intro would
   fall back to the body size. Sized explicitly here instead.

   Scoped to these two pages, so the Contact page keeps the original design.
============================================================ */
body.tp-page-thank-you .tp-contact-hero,
body.error404 .tp-contact-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	/* svh, not vh: avoids the mobile-browser toolbar overshoot. Padding-top
	   clears the fixed 68px nav, so the content centres in the space below it. */
	min-height: 100svh;
	padding: 68px 5% 3rem;
	text-align: center;
}

body.tp-page-thank-you .tp-contact-hero-inner,
body.error404 .tp-contact-hero-inner {
	max-width: 760px;
}

body.tp-page-thank-you .tp-contact-eyebrow,
body.error404 .tp-contact-eyebrow {
	font-size: clamp(0.78rem, 1.5vw, 0.95rem);
	letter-spacing: 0.26em;
	margin-bottom: 1.35rem;
}

/* The design constrains and left-aligns the heading; centre it and scale up. */
body.tp-page-thank-you .tp-contact-hero h1,
body.error404 .tp-contact-hero h1 {
	max-width: 18ch;
	margin: 0 auto 1.35rem;
	font-size: clamp(2.9rem, 7.5vw, 5.6rem);
	line-height: 1.02;
}

/* Every paragraph, not just the last one — but not the eyebrow, which is also
   a <p> and keeps its own small size. */
body.tp-page-thank-you .tp-contact-hero p:not(.tp-contact-eyebrow),
body.error404 .tp-contact-hero p:not(.tp-contact-eyebrow) {
	max-width: 60ch;
	margin: 0 auto;
	font-size: clamp(1.1rem, 1.9vw, 1.45rem);
	line-height: 1.6;
	color: rgba(247, 242, 232, 0.9);
}

/* The quiet text link becomes a real button — it is the only action here. */
body.tp-page-thank-you .tp-back-to-main,
body.error404 .tp-back-to-main {
	margin-top: 2.5rem;
	padding: 1rem 2.1rem;
	border-radius: 2px;
	background: var(--tp-gold);
	color: #21170a;
	font-size: clamp(0.78rem, 1.3vw, 0.88rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	transition: background 0.2s, color 0.2s;
}

body.tp-page-thank-you .tp-back-to-main:hover,
body.error404 .tp-back-to-main:hover {
	background: var(--tp-gold-dark);
	color: var(--tp-white);
}

/* Short viewports (landscape phones) — let the section shrink to its content
   rather than forcing a full screen the message cannot fill. */
@media (max-height: 560px) {
	body.tp-page-thank-you .tp-contact-hero,
	body.error404 .tp-contact-hero {
		min-height: 0;
		padding: 7rem 5% 3.5rem;
	}
}

@media (max-width: 640px) {
	body.tp-page-thank-you .tp-contact-hero,
	body.error404 .tp-contact-hero {
		padding: 68px 6% 2.5rem;
	}

	body.tp-page-thank-you .tp-contact-hero h1,
	body.error404 .tp-contact-hero h1 {
		max-width: none;
		font-size: clamp(2.5rem, 11vw, 3.4rem);
	}

	body.tp-page-thank-you .tp-back-to-main,
	body.error404 .tp-back-to-main {
		width: 100%;
		max-width: 320px;
		justify-content: center;
	}
}

/* The 404's second section keeps its own rhythm but reads larger. */
body.error404 .tp-hook-section {
	padding: var(--tp-section-pad-y) 5%;
}

body.error404 .tp-hook-section .tp-section-h2 {
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

/* ============================================================
   FORM VALIDATION MESSAGES

   Gravity Forms shows a banner above the form and a note under each field.
   Both are hidden here: the note sits inside the field, so it changes the
   field's height, which stretches the joined notify/newsletter bar and deforms
   the submit button. script.js collects the same messages into a single
   .tp-form-error placed after the form, where it cannot affect the layout.
============================================================ */
.tp-email-form-embed .gform_validation_errors,
.tp-notify-form-embed .gform_validation_errors,
.tp-contact-form-embed .gform_validation_errors,
.tp-email-form-embed .gfield_validation_message,
.tp-notify-form-embed .gfield_validation_message,
.tp-contact-form-embed .gfield_validation_message,
.tp-email-form-embed .gform_submission_error,
.tp-notify-form-embed .gform_submission_error,
.tp-contact-form-embed .gform_submission_error {
	display: none !important;
}

/* The error state must not add its own box, or the row grows again. */
.tp-email-form-embed .gfield_error,
.tp-notify-form-embed .gfield_error,
.tp-contact-form-embed .gfield_error {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.tp-email-form-embed .gfield_error,
.tp-notify-form-embed .gfield_error {
	padding: 0 !important;
	margin: 0 !important;
}

/* Mark the field that needs attention, since the message no longer sits under it. */
.tp-email-form-embed .gfield_error input,
.tp-notify-form-embed .gfield_error input,
.tp-contact-form-embed .gfield_error input,
.tp-contact-form-embed .gfield_error select,
.tp-contact-form-embed .gfield_error textarea {
	border-color: #A64C3B !important;
}

/* The one message. pre-line keeps each problem on its own line. */
.tp-form-error {
	white-space: pre-line;
	margin: 0.7rem 0 0;
	font-family: var(--tp-font-sans);
	font-size: 0.8rem;
	line-height: 1.5;
	font-weight: 600;
	color: #C2543F;
}

/* Centred in the two centred signup sections. */
.tp-email-capture .tp-form-error,
.tp-notify-section .tp-form-error {
	text-align: center;
}

/* Lighter red on the dark BACKSTAGE hero. */
.tp-backstage-hero .tp-form-error {
	color: #F0A489;
}

/* On the contact panel it takes the design's own status-box treatment. */
.tp-contact-form .tp-form-error {
	margin: 0.9rem 0 0;
	padding: 0.85rem 1rem;
	background: #F7E7E2;
	color: #7A2C20;
	border-left: 3px solid #A64C3B;
	font-size: 0.86rem;
	text-align: left;
}

/* ============================================================
   SMOOTH SCROLLING

   The nav links are in-page anchors on the homepage, so jumping to a section
   should glide rather than snap. Wrapped in a no-preference query so anyone who
   has asked for reduced motion still gets an instant jump.

   No scroll-margin-top is needed: each target section has 96px of top padding
   against the 69px fixed nav, so nothing lands underneath it.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------------------------
   Anchor targets that are not full sections need to clear the fixed nav.

   The homepage sections each carry 96px of top padding, so they land clear on
   their own. #order is the hero's button row, which has none — and because it
   also carries .tp-fade-in, revealing it lifts it 24px, so a browser anchor
   jump (which uses the untransformed layout position) leaves it above the fold
   and behind the nav. scroll-margin-top parks it below the bar with some of the
   hero still visible above.
------------------------------------------------------------ */
.tp-dedicated-actions[id],
.tp-dedicated-lower-grid [id],
.tp-hook-inner [id] {
	scroll-margin-top: 120px;
}

/* ============================================================
   INTERVIEW SECTION — embedded video

   The media box is a placeholder frame in the design. When the section is given
   a video URL the player fills it, and the box takes a 16:9 shape so the video
   is not letterboxed — at the design's column width that lands within a few
   pixels of its original 330px min-height, so the section keeps its proportions.
============================================================ */
.tp-interview-media-has-video {
	aspect-ratio: 16 / 9;
	min-height: 0;
	padding: 0;
}

.tp-interview-media .tp-interview-video,
.tp-interview-media .tp-interview-video-oembed iframe {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.tp-interview-media .tp-interview-video-oembed {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ─────────────  1.25×  —  2000px AND WIDER  ───────────── */
@media screen and (min-width: 2000px) {

  /* ══ PART 1 — rules that override assets/css/style.css ══ */
  /* ── ROOT TYPE SCALE ───────────────────────────────────────────────────────
     The single most important line here: it carries every rem/em in the file. */
  html { font-size: 20px; }

  /* Base body copy is declared in px, so it must be restated. */
  .tp-site { font-size: 22.5px; }   /* was 18px */

  /* ── NAVIGATION ─────────────────────────────────────────────────────────── */
  .tp-nav-inner { max-width: 1500px; height: 85px; }   /* was 1200px 68px */
  .tp-nav-cta   { border-radius: 2.5px; }   /* was 2px */

  /* ── HERO ───────────────────────────────────────────────────────────────── */
  .tp-hero              { padding-top: 85px; }   /* was 68px */
  .tp-hero-inner        { max-width: 1750px;   /* was 1400px */
                          min-height: calc(100vh - 85px); }   /* was 68px */
  .tp-hero-kicker::before { width: 40px; }   /* was 32px */
  .tp-hero-subhead      { max-width: 650px; }   /* was 520px */
  .tp-hero-endorsements { max-width: 600px; }   /* was 480px */
  .tp-hero-tagline-rule { max-width: 150px; }   /* was 120px */
  .tp-btn-primary,
  .tp-btn-secondary     { border-radius: 2.5px; }   /* was 2px */

  /* Book cover, its glow and its cast shadow scale as one unit. */
  .tp-book-cover-wrap          { max-width: 450px; }   /* was 360px */
  .tp-book-cover-wrap::before  { inset: -50px; }   /* was -40px */
  .tp-book-shadow              { bottom: -30px; height: 62.5px; }   /* was -24px 50px */
  .tp-book-cover-3d            { border-radius: 2.5px; }   /* was 2px */
  .tp-hero-book-ctas           { max-width: 300px; }   /* was 240px */
  .tp-book-retailers           { max-width: 400px; }   /* was 320px */
  .tp-retailer-btn,
  .tp-preorder-btn             { border-radius: 2.5px; }   /* was 2px */

  /* ── TRUST BAR ──────────────────────────────────────────────────────────── */
  .tp-trust-bar-inner   { max-width: 1500px; }   /* was 1200px */
  .tp-trust-bar-divider { height: 22.5px; }   /* was 18px */

  /* ── ABOUT THE BOOK ─────────────────────────────────────────────────────── */
  .tp-about-book-inner     { max-width: 1375px; }   /* was 1100px */
  .tp-section-eyebrow::before { width: 35px; }   /* was 28px */
  .tp-scope-block          { border-radius: 5px; }   /* was 4px */
  .tp-scope-character-dot  { width: 7.5px; height: 7.5px; }   /* was 6px 6px */
  .tp-scope-character-text { font-size: 22.5px; }   /* was 18px */

  /* ── ENDORSEMENTS ───────────────────────────────────────────────────────── */
  .tp-endorsements-inner          { max-width: 1375px; }   /* was 1100px */
  .tp-endorsement-card            { border-radius: 3.75px; }   /* was 3px */
  .tp-endorsement-card blockquote { font-size: 22.5px; }   /* was 18px */

  /* ── AUTHOR ─────────────────────────────────────────────────────────────── */
  .tp-author-inner             { max-width: 1375px;   /* was 1100px */
                                 grid-template-columns: 350px 1fr; }   /* was 280px */
  .tp-author-photo,
  .tp-author-photo-fallback    { border-radius: 3.75px; }   /* was 3px */
  .tp-author-photo-fallback svg { width: 100px; height: 100px; }   /* was 80px 80px */
  .tp-credential-tag           { border-radius: 2.5px; }   /* was 2px */

  /* ── BOOK CLUB ──────────────────────────────────────────────────────────── */
  .tp-book-club::before     { width: 750px; height: 750px; }   /* was 600px 600px */
  .tp-book-club-inner       { max-width: 1375px; }   /* was 1100px */
  .tp-book-club-feature,
  .tp-book-club-cta-block   { border-radius: 5px; }   /* was 4px */
  .tp-feature-icon          { width: 50px; height: 50px; }   /* was 40px 40px */
  .tp-feature-icon svg      { width: 22.5px; height: 22.5px; }   /* was 18px 18px */
  .tp-feature-text          { font-size: 22.5px; }   /* was 18px */

  /* ── EMAIL CAPTURE ──────────────────────────────────────────────────────── */
  .tp-email-capture-inner { max-width: 750px; }   /* was 600px */
  .tp-email-form          { max-width: 800px; }   /* was 640px */
  .tp-email-input,
  .tp-email-submit        { border-radius: 2.5px; }   /* was 2px */

  /* ── FOOTER ─────────────────────────────────────────────────────────────── */
  .tp-footer-inner      { max-width: 1500px; }   /* was 1200px */
  .tp-footer-social a,
  .tp-footer-social-pending,
  .tp-backstage-footer-social-pending     { width: 42.5px; height: 42.5px; }   /* was 34px 34px */
  .tp-footer-social svg,
  .tp-footer-social-pending svg,
  .tp-backstage-footer-social-pending svg { width: 18.75px; height: 18.75px; }   /* was 15px 15px */

  /* ── BACKSTAGE PAGE ─────────────────────────────────────────────────────── */
  .tp-backstage-hero          { padding-top: 85px; }   /* was 68px */
  .tp-backstage-hero-inner    { max-width: 1600px;   /* was 1280px */
                                grid-template-columns: 1fr 500px; }   /* was 400px */
  .tp-backstage-eyebrow::before { width: 40px; }   /* was 32px */
  .tp-coming-soon-badge       { border-radius: 2.5px; }   /* was 2px */
  .tp-coming-soon-badge::before { width: 8.75px; height: 8.75px; }   /* was 7px 7px */
  .tp-cover-img-wrap          { max-width: 425px; }   /* was 340px */
  .tp-cover-img-wrap img      { border-radius: 2.5px; }   /* was 2px */
  .tp-hook-inner              { max-width: 1025px; }   /* was 820px */
  .tp-structure-inner         { max-width: 1375px; }   /* was 1100px */
  .tp-disciplines-inner       { max-width: 1375px; }   /* was 1100px */
  .tp-deepdive-card::before   { height: 2.5px; }   /* was 2px */
  .tp-intrigue-inner          { max-width: 1375px; }   /* was 1100px */
  .tp-intrigue-bullet         { width: 8.75px; height: 8.75px;   /* was 7px 7px */
                                min-width: 8.75px; }   /* was 7px */
  .tp-notify-inner            { max-width: 725px; }   /* was 580px */
  .tp-notify-form             { max-width: 775px; }   /* was 620px */
  .tp-notify-input            { border-radius: 2.5px 0 0 2.5px; }   /* was 2px 2px */
  .tp-notify-btn              { border-radius: 0 2.5px 2.5px 0; }   /* was 2px 2px */
  .tp-backstage-footer-inner  { max-width: 1375px; }   /* was 1100px */
  .tp-backstage-footer-social a   { width: 42.5px; height: 42.5px; }   /* was 34px 34px */
  .tp-backstage-footer-social svg { width: 18.75px; height: 18.75px; }   /* was 15px 15px */

  /* ── INTERVIEW (original two-column block) ──────────────────────────────── */
  .tp-interview-inner  { max-width: 1550px;   /* was 1240px */
                         min-height: 537.5px;   /* was 430px */
                         grid-template-columns: minmax(0, 1.12fr) minmax(375px, 0.88fr); }   /* was 300px */
  .tp-interview-media      { min-height: 412.5px; }   /* was 330px */
  .tp-interview-media-glow { width: 262.5px; height: 262.5px; }   /* was 210px 210px */
  .tp-interview-static-indicator { width: 105px; height: 72.5px;   /* was 84px 58px */
                                   border-radius: 2.5px; }   /* was 2px */
  .tp-interview-static-indicator::before,
  .tp-interview-static-indicator::after { left: 18.75px; right: 18.75px; }   /* was 15px 15px */
  .tp-interview-static-indicator::before { top: 25px; }   /* was 20px */
  .tp-interview-static-indicator::after  { top: 13.75px; right: 60px; }   /* was 11px 48px */
  .tp-interview-copy h2 { max-width: 650px; }   /* was 520px */
  .tp-interview-copy > p:not(.tp-interview-status) { max-width: 662.5px; }   /* was 530px */
  .tp-interview-watch   { border-radius: 2.5px; }   /* was 2px */

  /* ── DEDICATED HERO (BACKSTAGE / landing variant) ───────────────────────── */
  .tp-hero.tp-hero-dedicated { min-height: max(850px, min(100svh, 1125px));   /* was 680px 900px */
                               padding-top: 85px; }   /* was 68px */
  .tp-dedicated-image-band   { min-height: 300px; }   /* was 240px */
  .tp-dedicated-lower-grid   { max-width: 1750px; }   /* was 1400px */
  .tp-dedicated-copy         { min-width: 350px; }   /* was 280px */
  .tp-dedicated-kicker::before { width: 37.5px; flex: 0 0 37.5px; }   /* was 30px 30px */
  .tp-dedicated-subhead      { max-width: 537.5px; }   /* was 430px */
  .tp-dedicated-endorsement  { min-width: 262.5px; }   /* was 210px */
  .tp-dedicated-book         { min-width: 362.5px; }   /* was 290px */
  .tp-dedicated-book-cover   { width: min(100%, 450px); }   /* was 360px */
  .tp-dedicated-actions      { min-width: 275px; }   /* was 220px */
  .tp-dedicated-tagline      { max-width: 1750px; }   /* was 1400px */
  .tp-dedicated-book-link,
  .tp-dedicated-primary-cta,
  .tp-dedicated-secondary-cta { border-radius: 2.5px; }   /* was 2px */

  /* ── SHARED BODY-COPY SIZE ──────────────────────────────────────────────────
     Mirrors the "BODY COPY SIZE" rule earlier in this file, which sets 18px on
     every long-form paragraph across all pages. */
  .tp-section-body,
  .tp-scope-block .tp-section-body,
  .tp-author-bio,
  .tp-book-club-body,
  .tp-book-club-cta-body,
  .tp-email-capture-body,
  .tp-intrigue-body,
  .tp-notify-section-body,
  .tp-part-desc,
  .tp-discipline-detail,
  .tp-deepdive-detail,
  .tp-dedicated-subhead,
  .tp-hook-quote p,
  .tp-interview-copy > p:not(.tp-interview-status),
  .tp-contact-context > p:not(.tp-section-eyebrow):not(.tp-contact-response-note) {
    font-size: 22.5px;   /* was 18px */
  }

  /* ── CONTACT PAGE ───────────────────────────────────────────────────────── */
  .tp-contact-hero        { padding: calc(var(--tp-section-pad-y) + 85px) 5% var(--tp-section-pad-y); }   /* was 68px */
  .tp-contact-hero-inner  { max-width: 1375px; }   /* was 1100px */
  .tp-contact-hero h1     { max-width: 900px; }   /* was 720px */
  .tp-contact-hero p:last-child { max-width: 837.5px; }   /* was 670px */
  .tp-contact-layout      { max-width: 1375px; }   /* was 1100px */
  .tp-contact-form input,
  .tp-contact-form select,
  .tp-contact-form textarea { border-radius: 1.25px; }   /* was 1px */
  .tp-contact-submit      { border-radius: 2.5px; }   /* was 2px */

  /* ── IN CONVERSATION (revised interview fold) ───────────────────────────── */
  .tp-iv-inner  { max-width: 1550px; }   /* was 1240px */
  .tp-iv-grid   { grid-template-columns: minmax(0, 1.62fr) minmax(387.5px, 1fr); }   /* was 310px */
  /* vw terms are scaled too — see the FLUID TYPE note at the end of this block. */
  .tp-iv-feature { min-height: clamp(375px, 32.5vw, 537.5px); }   /* was 300px 26vw 430px */
  .tp-iv-play   { width: clamp(72.5px, 6.75vw, 97.5px); }   /* was 58px 5.4vw 78px */
  .tp-iv-clip   { grid-template-columns: 85px minmax(0, 1fr); }   /* was 68px */
  .tp-iv-clip-title    { font-size: 25px; }   /* was 20px */
  .tp-iv-thumb-play svg { width: 27.5px; height: 27.5px; }   /* was 22px 22px */
  .tp-iv-modal-close     { width: 47.5px; height: 47.5px; }   /* was 38px 38px */
  .tp-iv-modal-close svg { width: 22.5px; height: 22.5px; }   /* was 18px 18px */
  .tp-iv-modal-frame     { width: min(92vw, 1475px); }   /* was 92vw 1180px */
  .tp-iv-grid-single .tp-iv-list li { flex: 1 1 325px; }   /* was 260px */

  /* ── FLUID clamp() HEADINGS ────────────────────────────────────────────────
     Every fluid size in this stylesheet is written as clamp(min, Xvw, max).
     The vw term in the middle only tracks the viewport, so on a wide screen it
     can land BELOW the new max and win the clamp — which would silently cap the
     heading and make it grow by less than intended.

     Example: .tp-dedicated-h1 is clamp(2.45rem, 3.3vw, 3.9rem) in the original.
     On a 2560px screen a bare 3.3vw is only 84.48px, well under the 93.6px this
     heading should reach. So the vw figure is raised here too, which pushes the
     clamp back onto its max and gives the correct size.

     All three parts of each clamp are given as literal px / vw below, so every
     heading size is fully explicit and can be hand-tuned on its own. */
  :root { --tp-section-pad-y: clamp(45px, 5.5vw, 80px); }   /* was 2.25rem 4.4vw 4rem */

  .tp-hero-h1              { font-size: clamp(52px,  6.25vw, 84px); }   /* was 2.6rem 5vw 4.2rem */
  .tp-hero-closing-kicker  { font-size: clamp(29px, 3vw, 40px); }   /* was 1.45rem 2.4vw 2rem */
  .tp-countdown-number     { font-size: clamp(32px,  3.125vw, 44px); }   /* was 1.6rem 2.5vw 2.2rem */
  .tp-countdown-sep        { font-size: clamp(28px,  2.5vw, 38px); }   /* was 1.4rem 2vw 1.9rem */
  .tp-section-h2           { font-size: clamp(38px,  4.375vw, 56px); }   /* was 1.9rem 3.5vw 2.8rem */
  .tp-backstage-h1         { font-size: clamp(56px,  6.25vw, 92px); }   /* was 2.8rem 5vw 4.6rem */
  .tp-backstage-subtitle   { font-size: clamp(22px,  2.5vw, 29px); }   /* was 1.1rem 2vw 1.45rem */
  .tp-intrigue-h2          { font-size: clamp(36px,  3.75vw, 52px); }   /* was 1.8rem 3vw 2.6rem */
  .tp-notify-section-h2    { font-size: clamp(40px,    4.375vw, 56px); }   /* was 2rem 3.5vw 2.8rem */
  .tp-interview-copy h2    { font-size: clamp(45px, 4.625vw, 70px); }   /* was 2.25rem 3.7vw 3.5rem */
  .tp-interview-inner      { gap:       clamp(60px,    7.5vw, 140px); }   /* was 3rem 6vw 7rem */
  .tp-contact-hero h1      { font-size: clamp(60px,    7.5vw, 104px); }   /* was 3rem 6vw 5.2rem */

  /* Dedicated hero (the homepage hero). The kicker is declared twice earlier in
     this file; these are the values from the later, winning rule. */
  .tp-dedicated-kicker     { font-size: clamp(15.6px, 1.15vw, 17.6px); }   /* was 0.78rem 0.92vw 0.88rem */
  .tp-dedicated-h1         { font-size: clamp(49px, 4.125vw, 78px); }   /* was 2.45rem 3.3vw 3.9rem */
  .tp-dedicated-copy .tp-countdown-number { font-size: clamp(38px, 3.125vw, 51px); }   /* was 1.9rem 2.5vw 2.55rem */
  .tp-dedicated-tagline p  { font-size: clamp(25px, 2.25vw, 34px); }   /* was 1.25rem 1.8vw 1.7rem */

  /* In Conversation fold. */
  .tp-iv-head          { margin-bottom: clamp(38px, 3.75vw, 52px); }   /* was 1.9rem 3vw 2.6rem */
  .tp-iv-head h2       { font-size:     clamp(42px, 5.125vw, 67px); }   /* was 2.1rem 4.1vw 3.35rem */
  .tp-iv-intro         { font-size:     clamp(20px,   1.4375vw, 22px); }   /* was 1rem 1.15vw 1.1rem */
  .tp-iv-grid          { gap:           clamp(35px, 4vw, 62px); }   /* was 1.75rem 3.2vw 3.1rem */
  .tp-iv-feature-label { font-size:     clamp(26px, 2.375vw, 34.4px); }   /* was 1.3rem 1.9vw 1.72rem */
  .tp-iv-modal-title   { font-size:     clamp(23px, 2.75vw, 32px); }   /* was 1.15rem 2.2vw 1.6rem */
  .tp-iv-feature-bar   { padding: clamp(20px,   2.25vw, 34px)   /* was 1rem 1.8vw 1.7rem */
                                  clamp(22px, 2.5vw, 38px); }   /* was 1.1rem 2vw 1.9rem */

  /* NOT touched on purpose: .tp-iv-modal padding and .tp-iv-modal-video
     max-width are pure vh/vw. That is a full-screen video overlay — it is meant
     to fill the viewport at every size, so scaling it would only shrink the
     video relative to the screen. */

  /* ══ PART 2 — rules that override this file (wp-theme.css) ══ */
	/* ── Uploaded logos ─────────────────────────────────────────────────────── */
	.tp-nav-logo-image    { max-height: 55px; }   /* was 44px */
	.tp-footer-logo-image { max-height: 42.5px; }   /* was 34px */

	/* ── Uploaded icons standing in for the inline SVGs ─────────────────────── */
	.tp-feature-icon img { width: 22.5px; height: 22.5px; }   /* was 18px 18px */
	.tp-backstage-footer-social img,
	.tp-footer-social img { width: 18.75px; height: 18.75px; }   /* was 15px 15px */

	/* ── Gravity Forms: email capture ───────────────────────────────────────── */
	.tp-email-form-embed { max-width: 800px; }   /* was 640px */
	.tp-email-form-embed .gform_wrapper input[type="text"],
	.tp-email-form-embed .gform_wrapper input[type="email"],
	.tp-email-form-embed .gform_wrapper input[type="submit"],
	.tp-email-form-embed .gform_wrapper .gform_button,
	.tp-email-form-embed .gform_wrapper button.gform_button {
		border-radius: 2.5px !important;   /* was 2px */
	}

	/* ── Gravity Forms: BACKSTAGE notify bar ────────────────────────────────── */
	.tp-notify-form-embed { max-width: 775px; }   /* was 620px */
	.tp-notify-form-embed .gform_wrapper input[type="text"],
	.tp-notify-form-embed .gform_wrapper input[type="email"] {
		border-radius: 2.5px 0 0 2.5px !important;   /* was 2px 2px */
	}
	.tp-notify-form-embed .gform_wrapper input[type="submit"],
	.tp-notify-form-embed .gform_wrapper .gform_button {
		border-radius: 0 2.5px 2.5px 0 !important;   /* was 2px 2px */
	}

	/* ── Gravity Forms: contact form ────────────────────────────────────────── */
	.tp-contact-form-embed .gform_wrapper input[type="text"],
	.tp-contact-form-embed .gform_wrapper input[type="email"],
	.tp-contact-form-embed .gform_wrapper select,
	.tp-contact-form-embed .gform_wrapper textarea {
		border-radius: 1.25px !important;   /* was 1px */
	}
	.tp-contact-form-embed .gform_wrapper input[type="submit"],
	.tp-contact-form-embed .gform_wrapper .gform_button {
		border-radius: 2.5px !important;   /* was 2px */
	}

	/* ── Thank You + 404 pages ──────────────────────────────────────────────── */
	body.tp-page-thank-you .tp-contact-hero,
	body.error404 .tp-contact-hero {
		padding: 85px 5% 3rem;   /* was 68px 3rem */
	}
	body.tp-page-thank-you .tp-contact-hero-inner,
	body.error404 .tp-contact-hero-inner {
		max-width: 950px;   /* was 760px */
	}
	body.tp-page-thank-you .tp-back-to-main,
	body.error404 .tp-back-to-main {
		border-radius: 2.5px;   /* was 2px */
	}

	/* ── Anchor-jump offset must clear the now-taller fixed nav ─────────────── */
	.tp-dedicated-actions[id],
	.tp-dedicated-lower-grid [id],
	.tp-hook-inner [id] {
		scroll-margin-top: 150px;   /* was 120px */
	}
}


/* ─────────────  1.5×  —  2560px AND WIDER  ───────────── */
@media screen and (min-width: 2560px) {

  /* ══ PART 1 — rules that override assets/css/style.css ══ */
  /* ── ROOT TYPE SCALE ───────────────────────────────────────────────────────
     The single most important line here: it carries every rem/em in the file. */
  html { font-size: 24px; }

  /* Base body copy is declared in px, so it must be restated. */
  .tp-site { font-size: 27px; }   /* was 18px */

  /* ── NAVIGATION ─────────────────────────────────────────────────────────── */
  .tp-nav-inner { max-width: 1800px; height: 102px; }   /* was 1200px 68px */
  .tp-nav-cta   { border-radius: 3px; }   /* was 2px */

  /* ── HERO ───────────────────────────────────────────────────────────────── */
  .tp-hero              { padding-top: 102px; }   /* was 68px */
  .tp-hero-inner        { max-width: 2100px;   /* was 1400px */
                          min-height: calc(100vh - 102px); }   /* was 68px */
  .tp-hero-kicker::before { width: 48px; }   /* was 32px */
  .tp-hero-subhead      { max-width: 780px; }   /* was 520px */
  .tp-hero-endorsements { max-width: 720px; }   /* was 480px */
  .tp-hero-tagline-rule { max-width: 180px; }   /* was 120px */
  .tp-btn-primary,
  .tp-btn-secondary     { border-radius: 3px; }   /* was 2px */

  /* Book cover, its glow and its cast shadow scale as one unit. */
  .tp-book-cover-wrap          { max-width: 540px; }   /* was 360px */
  .tp-book-cover-wrap::before  { inset: -60px; }   /* was -40px */
  .tp-book-shadow              { bottom: -36px; height: 75px; }   /* was -24px 50px */
  .tp-book-cover-3d            { border-radius: 3px; }   /* was 2px */
  .tp-hero-book-ctas           { max-width: 360px; }   /* was 240px */
  .tp-book-retailers           { max-width: 480px; }   /* was 320px */
  .tp-retailer-btn,
  .tp-preorder-btn             { border-radius: 3px; }   /* was 2px */

  /* ── TRUST BAR ──────────────────────────────────────────────────────────── */
  .tp-trust-bar-inner   { max-width: 1800px; }   /* was 1200px */
  .tp-trust-bar-divider { height: 27px; }   /* was 18px */

  /* ── ABOUT THE BOOK ─────────────────────────────────────────────────────── */
  .tp-about-book-inner     { max-width: 1650px; }   /* was 1100px */
  .tp-section-eyebrow::before { width: 42px; }   /* was 28px */
  .tp-scope-block          { border-radius: 6px; }   /* was 4px */
  .tp-scope-character-dot  { width: 9px; height: 9px; }   /* was 6px 6px */
  .tp-scope-character-text { font-size: 27px; }   /* was 18px */

  /* ── ENDORSEMENTS ───────────────────────────────────────────────────────── */
  .tp-endorsements-inner          { max-width: 1650px; }   /* was 1100px */
  .tp-endorsement-card            { border-radius: 4.5px; }   /* was 3px */
  .tp-endorsement-card blockquote { font-size: 27px; }   /* was 18px */

  /* ── AUTHOR ─────────────────────────────────────────────────────────────── */
  .tp-author-inner             { max-width: 1650px;   /* was 1100px */
                                 grid-template-columns: 420px 1fr; }   /* was 280px */
  .tp-author-photo,
  .tp-author-photo-fallback    { border-radius: 4.5px; }   /* was 3px */
  .tp-author-photo-fallback svg { width: 120px; height: 120px; }   /* was 80px 80px */
  .tp-credential-tag           { border-radius: 3px; }   /* was 2px */

  /* ── BOOK CLUB ──────────────────────────────────────────────────────────── */
  .tp-book-club::before     { width: 900px; height: 900px; }   /* was 600px 600px */
  .tp-book-club-inner       { max-width: 1650px; }   /* was 1100px */
  .tp-book-club-feature,
  .tp-book-club-cta-block   { border-radius: 6px; }   /* was 4px */
  .tp-feature-icon          { width: 60px; height: 60px; }   /* was 40px 40px */
  .tp-feature-icon svg      { width: 27px; height: 27px; }   /* was 18px 18px */
  .tp-feature-text          { font-size: 27px; }   /* was 18px */

  /* ── EMAIL CAPTURE ──────────────────────────────────────────────────────── */
  .tp-email-capture-inner { max-width: 900px; }   /* was 600px */
  .tp-email-form          { max-width: 960px; }   /* was 640px */
  .tp-email-input,
  .tp-email-submit        { border-radius: 3px; }   /* was 2px */

  /* ── FOOTER ─────────────────────────────────────────────────────────────── */
  .tp-footer-inner      { max-width: 1800px; }   /* was 1200px */
  .tp-footer-social a,
  .tp-footer-social-pending,
  .tp-backstage-footer-social-pending     { width: 51px; height: 51px; }   /* was 34px 34px */
  .tp-footer-social svg,
  .tp-footer-social-pending svg,
  .tp-backstage-footer-social-pending svg { width: 22.5px; height: 22.5px; }   /* was 15px 15px */

  /* ── BACKSTAGE PAGE ─────────────────────────────────────────────────────── */
  .tp-backstage-hero          { padding-top: 102px; }   /* was 68px */
  .tp-backstage-hero-inner    { max-width: 1920px;   /* was 1280px */
                                grid-template-columns: 1fr 600px; }   /* was 400px */
  .tp-backstage-eyebrow::before { width: 48px; }   /* was 32px */
  .tp-coming-soon-badge       { border-radius: 3px; }   /* was 2px */
  .tp-coming-soon-badge::before { width: 10.5px; height: 10.5px; }   /* was 7px 7px */
  .tp-cover-img-wrap          { max-width: 510px; }   /* was 340px */
  .tp-cover-img-wrap img      { border-radius: 3px; }   /* was 2px */
  .tp-hook-inner              { max-width: 1230px; }   /* was 820px */
  .tp-structure-inner         { max-width: 1650px; }   /* was 1100px */
  .tp-disciplines-inner       { max-width: 1650px; }   /* was 1100px */
  .tp-deepdive-card::before   { height: 3px; }   /* was 2px */
  .tp-intrigue-inner          { max-width: 1650px; }   /* was 1100px */
  .tp-intrigue-bullet         { width: 10.5px; height: 10.5px;   /* was 7px 7px */
                                min-width: 10.5px; }   /* was 7px */
  .tp-notify-inner            { max-width: 870px; }   /* was 580px */
  .tp-notify-form             { max-width: 930px; }   /* was 620px */
  .tp-notify-input            { border-radius: 3px 0 0 3px; }   /* was 2px 2px */
  .tp-notify-btn              { border-radius: 0 3px 3px 0; }   /* was 2px 2px */
  .tp-backstage-footer-inner  { max-width: 1650px; }   /* was 1100px */
  .tp-backstage-footer-social a   { width: 51px; height: 51px; }   /* was 34px 34px */
  .tp-backstage-footer-social svg { width: 22.5px; height: 22.5px; }   /* was 15px 15px */

  /* ── INTERVIEW (original two-column block) ──────────────────────────────── */
  .tp-interview-inner  { max-width: 1860px;   /* was 1240px */
                         min-height: 645px;   /* was 430px */
                         grid-template-columns: minmax(0, 1.12fr) minmax(450px, 0.88fr); }   /* was 300px */
  .tp-interview-media      { min-height: 495px; }   /* was 330px */
  .tp-interview-media-glow { width: 315px; height: 315px; }   /* was 210px 210px */
  .tp-interview-static-indicator { width: 126px; height: 87px;   /* was 84px 58px */
                                   border-radius: 3px; }   /* was 2px */
  .tp-interview-static-indicator::before,
  .tp-interview-static-indicator::after { left: 22.5px; right: 22.5px; }   /* was 15px 15px */
  .tp-interview-static-indicator::before { top: 30px; }   /* was 20px */
  .tp-interview-static-indicator::after  { top: 16.5px; right: 72px; }   /* was 11px 48px */
  .tp-interview-copy h2 { max-width: 780px; }   /* was 520px */
  .tp-interview-copy > p:not(.tp-interview-status) { max-width: 795px; }   /* was 530px */
  .tp-interview-watch   { border-radius: 3px; }   /* was 2px */

  /* ── DEDICATED HERO (BACKSTAGE / landing variant) ───────────────────────── */
  .tp-hero.tp-hero-dedicated { min-height: max(1020px, min(100svh, 1350px));   /* was 680px 900px */
                               padding-top: 102px; }   /* was 68px */
  .tp-dedicated-image-band   { min-height: 360px; }   /* was 240px */
  .tp-dedicated-lower-grid   { max-width: 2100px; }   /* was 1400px */
  .tp-dedicated-copy         { min-width: 420px; }   /* was 280px */
  .tp-dedicated-kicker::before { width: 45px; flex: 0 0 45px; }   /* was 30px 30px */
  .tp-dedicated-subhead      { max-width: 645px; }   /* was 430px */
  .tp-dedicated-endorsement  { min-width: 315px; }   /* was 210px */
  .tp-dedicated-book         { min-width: 435px; }   /* was 290px */
  .tp-dedicated-book-cover   { width: min(100%, 540px); }   /* was 360px */
  .tp-dedicated-actions      { min-width: 330px; }   /* was 220px */
  .tp-dedicated-tagline      { max-width: 2100px; }   /* was 1400px */
  .tp-dedicated-book-link,
  .tp-dedicated-primary-cta,
  .tp-dedicated-secondary-cta { border-radius: 3px; }   /* was 2px */

  /* ── SHARED BODY-COPY SIZE ──────────────────────────────────────────────────
     Mirrors the "BODY COPY SIZE" rule earlier in this file, which sets 18px on
     every long-form paragraph across all pages. */
  .tp-section-body,
  .tp-scope-block .tp-section-body,
  .tp-author-bio,
  .tp-book-club-body,
  .tp-book-club-cta-body,
  .tp-email-capture-body,
  .tp-intrigue-body,
  .tp-notify-section-body,
  .tp-part-desc,
  .tp-discipline-detail,
  .tp-deepdive-detail,
  .tp-dedicated-subhead,
  .tp-hook-quote p,
  .tp-interview-copy > p:not(.tp-interview-status),
  .tp-contact-context > p:not(.tp-section-eyebrow):not(.tp-contact-response-note) {
    font-size: 27px;   /* was 18px */
  }

  /* ── CONTACT PAGE ───────────────────────────────────────────────────────── */
  .tp-contact-hero        { padding: calc(var(--tp-section-pad-y) + 102px) 5% var(--tp-section-pad-y); }   /* was 68px */
  .tp-contact-hero-inner  { max-width: 1650px; }   /* was 1100px */
  .tp-contact-hero h1     { max-width: 1080px; }   /* was 720px */
  .tp-contact-hero p:last-child { max-width: 1005px; }   /* was 670px */
  .tp-contact-layout      { max-width: 1650px; }   /* was 1100px */
  .tp-contact-form input,
  .tp-contact-form select,
  .tp-contact-form textarea { border-radius: 1.5px; }   /* was 1px */
  .tp-contact-submit      { border-radius: 3px; }   /* was 2px */

  /* ── IN CONVERSATION (revised interview fold) ───────────────────────────── */
  .tp-iv-inner  { max-width: 1860px; }   /* was 1240px */
  .tp-iv-grid   { grid-template-columns: minmax(0, 1.62fr) minmax(465px, 1fr); }   /* was 310px */
  /* vw terms are scaled too — see the FLUID TYPE note at the end of this block. */
  .tp-iv-feature { min-height: clamp(450px, 39vw, 645px); }   /* was 300px 26vw 430px */
  .tp-iv-play   { width: clamp(87px, 8.1vw, 117px); }   /* was 58px 5.4vw 78px */
  .tp-iv-clip   { grid-template-columns: 102px minmax(0, 1fr); }   /* was 68px */
  .tp-iv-clip-title    { font-size: 30px; }   /* was 20px */
  .tp-iv-thumb-play svg { width: 33px; height: 33px; }   /* was 22px 22px */
  .tp-iv-modal-close     { width: 57px; height: 57px; }   /* was 38px 38px */
  .tp-iv-modal-close svg { width: 27px; height: 27px; }   /* was 18px 18px */
  .tp-iv-modal-frame     { width: min(92vw, 1770px); }   /* was 92vw 1180px */
  .tp-iv-grid-single .tp-iv-list li { flex: 1 1 390px; }   /* was 260px */

  /* ── FLUID clamp() HEADINGS ────────────────────────────────────────────────
     Every fluid size in this stylesheet is written as clamp(min, Xvw, max).
     The vw term in the middle only tracks the viewport, so on a wide screen it
     can land BELOW the new max and win the clamp — which would silently cap the
     heading and make it grow by less than intended.

     Example: .tp-dedicated-h1 is clamp(2.45rem, 3.3vw, 3.9rem) in the original.
     On a 2560px screen a bare 3.3vw is only 84.48px, well under the 93.6px this
     heading should reach. So the vw figure is raised here too, which pushes the
     clamp back onto its max and gives the correct size.

     All three parts of each clamp are given as literal px / vw below, so every
     heading size is fully explicit and can be hand-tuned on its own. */
  :root { --tp-section-pad-y: clamp(54px, 6.6vw, 96px); }   /* was 2.25rem 4.4vw 4rem */

  .tp-hero-h1              { font-size: clamp(62.4px,  7.5vw, 100.8px); }   /* was 2.6rem 5vw 4.2rem */
  .tp-hero-closing-kicker  { font-size: clamp(34.8px, 3.6vw, 48px); }   /* was 1.45rem 2.4vw 2rem */
  .tp-countdown-number     { font-size: clamp(38.4px,  3.75vw, 52.8px); }   /* was 1.6rem 2.5vw 2.2rem */
  .tp-countdown-sep        { font-size: clamp(33.6px,  3vw, 45.6px); }   /* was 1.4rem 2vw 1.9rem */
  .tp-section-h2           { font-size: clamp(45.6px,  5.25vw, 67.2px); }   /* was 1.9rem 3.5vw 2.8rem */
  .tp-backstage-h1         { font-size: clamp(67.2px,  7.5vw, 110.4px); }   /* was 2.8rem 5vw 4.6rem */
  .tp-backstage-subtitle   { font-size: clamp(26.4px,  3vw, 34.8px); }   /* was 1.1rem 2vw 1.45rem */
  .tp-intrigue-h2          { font-size: clamp(43.2px,  4.5vw, 62.4px); }   /* was 1.8rem 3vw 2.6rem */
  .tp-notify-section-h2    { font-size: clamp(48px,    5.25vw, 67.2px); }   /* was 2rem 3.5vw 2.8rem */
  .tp-interview-copy h2    { font-size: clamp(54px, 5.55vw, 84px); }   /* was 2.25rem 3.7vw 3.5rem */
  .tp-interview-inner      { gap:       clamp(72px,    9vw, 168px); }   /* was 3rem 6vw 7rem */
  .tp-contact-hero h1      { font-size: clamp(72px,    9vw, 124.8px); }   /* was 3rem 6vw 5.2rem */

  /* Dedicated hero (the homepage hero). The kicker is declared twice earlier in
     this file; these are the values from the later, winning rule. */
  .tp-dedicated-kicker     { font-size: clamp(18.72px, 1.38vw, 21.12px); }   /* was 0.78rem 0.92vw 0.88rem */
  .tp-dedicated-h1         { font-size: clamp(58.8px, 4.95vw, 93.6px); }   /* was 2.45rem 3.3vw 3.9rem */
  .tp-dedicated-copy .tp-countdown-number { font-size: clamp(45.6px, 3.75vw, 61.2px); }   /* was 1.9rem 2.5vw 2.55rem */
  .tp-dedicated-tagline p  { font-size: clamp(30px, 2.7vw, 40.8px); }   /* was 1.25rem 1.8vw 1.7rem */

  /* In Conversation fold. */
  .tp-iv-head          { margin-bottom: clamp(45.6px, 4.5vw, 62.4px); }   /* was 1.9rem 3vw 2.6rem */
  .tp-iv-head h2       { font-size:     clamp(50.4px, 6.15vw, 80.4px); }   /* was 2.1rem 4.1vw 3.35rem */
  .tp-iv-intro         { font-size:     clamp(24px,   1.725vw, 26.4px); }   /* was 1rem 1.15vw 1.1rem */
  .tp-iv-grid          { gap:           clamp(42px, 4.8vw, 74.4px); }   /* was 1.75rem 3.2vw 3.1rem */
  .tp-iv-feature-label { font-size:     clamp(31.2px, 2.85vw, 41.28px); }   /* was 1.3rem 1.9vw 1.72rem */
  .tp-iv-modal-title   { font-size:     clamp(27.6px, 3.3vw, 38.4px); }   /* was 1.15rem 2.2vw 1.6rem */
  .tp-iv-feature-bar   { padding: clamp(24px,   2.7vw, 40.8px)   /* was 1rem 1.8vw 1.7rem */
                                  clamp(26.4px, 3vw, 45.6px); }   /* was 1.1rem 2vw 1.9rem */

  /* NOT touched on purpose: .tp-iv-modal padding and .tp-iv-modal-video
     max-width are pure vh/vw. That is a full-screen video overlay — it is meant
     to fill the viewport at every size, so scaling it would only shrink the
     video relative to the screen. */

  /* ══ PART 2 — rules that override this file (wp-theme.css) ══ */
	/* ── Uploaded logos ─────────────────────────────────────────────────────── */
	.tp-nav-logo-image    { max-height: 66px; }   /* was 44px */
	.tp-footer-logo-image { max-height: 51px; }   /* was 34px */

	/* ── Uploaded icons standing in for the inline SVGs ─────────────────────── */
	.tp-feature-icon img { width: 27px; height: 27px; }   /* was 18px 18px */
	.tp-backstage-footer-social img,
	.tp-footer-social img { width: 22.5px; height: 22.5px; }   /* was 15px 15px */

	/* ── Gravity Forms: email capture ───────────────────────────────────────── */
	.tp-email-form-embed { max-width: 960px; }   /* was 640px */
	.tp-email-form-embed .gform_wrapper input[type="text"],
	.tp-email-form-embed .gform_wrapper input[type="email"],
	.tp-email-form-embed .gform_wrapper input[type="submit"],
	.tp-email-form-embed .gform_wrapper .gform_button,
	.tp-email-form-embed .gform_wrapper button.gform_button {
		border-radius: 3px !important;   /* was 2px */
	}

	/* ── Gravity Forms: BACKSTAGE notify bar ────────────────────────────────── */
	.tp-notify-form-embed { max-width: 930px; }   /* was 620px */
	.tp-notify-form-embed .gform_wrapper input[type="text"],
	.tp-notify-form-embed .gform_wrapper input[type="email"] {
		border-radius: 3px 0 0 3px !important;   /* was 2px 2px */
	}
	.tp-notify-form-embed .gform_wrapper input[type="submit"],
	.tp-notify-form-embed .gform_wrapper .gform_button {
		border-radius: 0 3px 3px 0 !important;   /* was 2px 2px */
	}

	/* ── Gravity Forms: contact form ────────────────────────────────────────── */
	.tp-contact-form-embed .gform_wrapper input[type="text"],
	.tp-contact-form-embed .gform_wrapper input[type="email"],
	.tp-contact-form-embed .gform_wrapper select,
	.tp-contact-form-embed .gform_wrapper textarea {
		border-radius: 1.5px !important;   /* was 1px */
	}
	.tp-contact-form-embed .gform_wrapper input[type="submit"],
	.tp-contact-form-embed .gform_wrapper .gform_button {
		border-radius: 3px !important;   /* was 2px */
	}

	/* ── Thank You + 404 pages ──────────────────────────────────────────────── */
	body.tp-page-thank-you .tp-contact-hero,
	body.error404 .tp-contact-hero {
		padding: 102px 5% 3rem;   /* was 68px 3rem */
	}
	body.tp-page-thank-you .tp-contact-hero-inner,
	body.error404 .tp-contact-hero-inner {
		max-width: 1140px;   /* was 760px */
	}
	body.tp-page-thank-you .tp-back-to-main,
	body.error404 .tp-back-to-main {
		border-radius: 3px;   /* was 2px */
	}

	/* ── Anchor-jump offset must clear the now-taller fixed nav ─────────────── */
	.tp-dedicated-actions[id],
	.tp-dedicated-lower-grid [id],
	.tp-hook-inner [id] {
		scroll-margin-top: 180px;   /* was 120px */
	}
}