/* =========================================================================
   ROOTED by Hope4Cancer
   Landing page styles.

   Palette and type follow the Hope4Cancer brand concept. Hex values were taken
   from the brand board and cross-checked against hope4cancer.com.

   MOBILE FIRST. Every rule outside a media query describes the narrow-screen
   layout, and the only breakpoints are `min-width`, adding capability as the
   viewport grows. Most sections need no breakpoint at all: they use clamp()
   for fluid type and spacing, and auto-fit grids that reflow on their own.

   Breakpoints, both in rem so they follow the user's text size:
     40rem (640px)  phone  -> large phone / small tablet
     60rem (960px)  tablet -> desktop
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
	/* Primary */
	--pp-rooted-white: #ffffff;
	--pp-rooted-deep-blue: #142b3b;
	--pp-rooted-deep-blue-dark: #0e1f2b;

	/* Secondary */
	--pp-rooted-stone: #807e7f;
	--pp-rooted-sand: #cdbcaf;
	--pp-rooted-wet-sand: #9b6b45;
	--pp-rooted-wet-sand-dark: #7d5631;
	--pp-rooted-misty-breeze: #c9d9d7;
	--pp-rooted-charcoal: #2c2d2c;

	/* Supporting tints used across hope4cancer.com */
	--pp-rooted-paper: #f3efe8;
	--pp-rooted-light-sand: #ecdfcc;
	--pp-rooted-ink: #0b2428;

	/* Roles */
	--pp-rooted-bg: var(--pp-rooted-white);
	--pp-rooted-text: var(--pp-rooted-ink);
	--pp-rooted-text-muted: #5a6b78;
	--pp-rooted-rule: rgba(11, 36, 40, 0.14);
	--pp-rooted-rule-light: rgba(243, 239, 232, 0.22);

	/* Type.
	   The licensed families lead each stack. Cormorant Garamond and Jost are
	   loaded only while the licensed files are absent, and drop out on their
	   own once the real fonts are installed. */
	--pp-rooted-font-display: "ivyora-display", "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--pp-rooted-font-body: "MarrSansRegular", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--pp-rooted-font-body-strong: "MarrSansSemibold", "MarrSansRegular", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Rhythm. The fluid values already carry their own small-screen floor as
	   the first clamp() argument; the header is the one fixed height, so it
	   starts at its phone size and grows at the first breakpoint. */
	--pp-rooted-shell: 1180px;
	--pp-rooted-measure: 1180px;
	--pp-rooted-gutter: clamp(1.25rem, 5vw, 3.5rem);
	--pp-rooted-section-y: clamp(4.5rem, 10vw, 9rem);
	--pp-rooted-header-h: 4.25rem;

	/* Motion */
	--pp-rooted-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--pp-rooted-bg);
	color: var(--pp-rooted-text);
	font-family: var(--pp-rooted-font-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.72;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

strong,
b {
	font-family: var(--pp-rooted-font-body-strong);
	font-weight: 600;
}

a {
	color: var(--pp-rooted-wet-sand);
	text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
	color: var(--pp-rooted-wet-sand-dark);
}

:focus-visible {
	outline: 2px solid var(--pp-rooted-wet-sand);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Hidden visually, still read by screen readers. */
.pp-rooted-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pp-rooted-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--pp-rooted-deep-blue);
	color: var(--pp-rooted-paper);
	text-decoration: none;
}

.pp-rooted-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* -------------------------------------------------------------------------
   3. Layout primitives
   ---------------------------------------------------------------------- */

.pp-rooted-shell {
	width: 100%;
	max-width: var(--pp-rooted-shell);
	margin-inline: auto;
	padding-inline: var(--pp-rooted-gutter);
}

.pp-rooted-measure {
	max-width: var(--pp-rooted-measure);
}

.pp-rooted-section {
	padding-block: var(--pp-rooted-section-y);
	position: relative;
	/* Keeps the fixed header from covering a section linked to by anchor. */
	scroll-margin-top: var(--pp-rooted-header-h);
}

.pp-rooted-section--paper {
	background: var(--pp-rooted-paper);
}

/* Two consecutive sections on the same ground read as one surface. Drop the
   second one's top padding so the join doesn't leave a doubled gap. */
.pp-rooted-section--paper + .pp-rooted-section--paper,
.pp-rooted-section--sand + .pp-rooted-section--sand,
.pp-rooted-section--blue + .pp-rooted-section--blue {
	padding-top: 0;
}

.pp-rooted-section--sand {
	background: var(--pp-rooted-light-sand);
}

.pp-rooted-section--blue {
	background: var(--pp-rooted-deep-blue);
	color: var(--pp-rooted-paper);
}

.pp-rooted-section--blue a {
	color: var(--pp-rooted-sand);
}

/* -------------------------------------------------------------------------
   4. Type scale
   ---------------------------------------------------------------------- */

.pp-rooted-h2 {
	font-family: var(--pp-rooted-font-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
	line-height: 1.16;
	letter-spacing: 0.005em;
	margin: 0 0 1.4rem;
	color: var(--pp-rooted-deep-blue);
	text-wrap: balance;
}

.pp-rooted-h2--center {
	text-align: center;
	margin-inline: auto;
}

.pp-rooted-h2--light {
	color: var(--pp-rooted-paper);
}

.pp-rooted-section p {
	margin: 0 0 1.35rem;
}

.pp-rooted-section p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------------------- */

/* Full width on phones, where a thumb-sized target across the column reads as
   the obvious next action. Released to its natural width at 40rem. */
.pp-rooted-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 1.05rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--pp-rooted-font-body-strong);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s var(--pp-rooted-ease),
		color 0.25s var(--pp-rooted-ease),
		border-color 0.25s var(--pp-rooted-ease),
		transform 0.25s var(--pp-rooted-ease);
}

.pp-rooted-btn:hover,
.pp-rooted-btn:focus-visible {
	transform: translateY(-2px);
}

.pp-rooted-btn--primary {
	background: var(--pp-rooted-wet-sand);
	border-color: var(--pp-rooted-wet-sand);
	color: var(--pp-rooted-white);
}

.pp-rooted-btn--primary:hover,
.pp-rooted-btn--primary:focus-visible {
	background: var(--pp-rooted-wet-sand-dark);
	border-color: var(--pp-rooted-wet-sand-dark);
	color: var(--pp-rooted-white);
}

.pp-rooted-btn--light {
	background: var(--pp-rooted-paper);
	border-color: var(--pp-rooted-paper);
	color: var(--pp-rooted-deep-blue);
}

.pp-rooted-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--pp-rooted-paper);
}

.pp-rooted-btn--outline:hover,
.pp-rooted-btn--outline:focus-visible {
	background: var(--pp-rooted-paper);
	border-color: var(--pp-rooted-paper);
	color: var(--pp-rooted-deep-blue);
}

.pp-rooted-btn--sm {
	padding: 0.8rem 1.6rem;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
}

/* Stays full width at every size. */
.pp-rooted-btn--block {
	width: 100%;
}

/* Shown when no Universe URL is configured. */
.pp-rooted-btn--pending {
	cursor: not-allowed;
	opacity: 0.55;
}

.pp-rooted-btn--pending:hover,
.pp-rooted-btn--pending:focus-visible {
	transform: none;
}

/* -------------------------------------------------------------------------
   6. Site header
   ---------------------------------------------------------------------- */

.pp-rooted-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background: transparent;
	transition: background-color 0.35s var(--pp-rooted-ease),
		box-shadow 0.35s var(--pp-rooted-ease);
}

.pp-rooted-header.is-stuck {
	background: var(--pp-rooted-deep-blue);
	box-shadow: 0 1px 0 var(--pp-rooted-rule-light);
}

.pp-rooted-header__inner {
	max-width: var(--pp-rooted-shell);
	margin-inline: auto;
	padding: 0 var(--pp-rooted-gutter);
	height: var(--pp-rooted-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* The banner's own Save My Seat is in view on a phone (it lands inside the
   first screen at 375x812), so the header repeat is dead weight there. It
   returns at 40rem, where the banner button falls below the fold. */
.pp-rooted-header__cta {
	display: none;
}

.pp-rooted-header__logo img {
	width: auto;
	height: clamp(2.1rem, 4.5vw, 2.8rem);
}

/* -------------------------------------------------------------------------
   7. Banner
   ---------------------------------------------------------------------- */

/* Deep blue, as the text hero before it was, so the transparent header still
   reads over it before the page scrolls. Top padding clears the fixed header. */
.pp-rooted-banner {
	position: relative;
	background: var(--pp-rooted-deep-blue);
	color: var(--pp-rooted-paper);
	padding-block: calc(var(--pp-rooted-header-h) + clamp(1.5rem, 4vw, 3rem)) clamp(3.5rem, 8vw, 6rem);
	overflow: hidden;
}

/* The same soft lift the hero used, now behind the video. */
.pp-rooted-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 40% at 50% 20%, rgba(201, 217, 215, 0.1), transparent 70%),
		radial-gradient(90% 60% at 50% 110%, rgba(155, 107, 69, 0.18), transparent 70%);
	pointer-events: none;
}

.pp-rooted-banner__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2rem, 5vw, 3.5rem);
}

/* Holds the 16:9 frame in a darker blue while the Wistia player loads. */
.pp-rooted-banner__video {
	width: 100%;
	background: var(--pp-rooted-deep-blue-dark);
}

/* Logo, then date and place, centred above the video. */
.pp-rooted-banner__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 1.75rem);
	text-align: center;
}

.pp-rooted-banner__logo {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.75rem, 1.8vw, 1.1rem);
	color: var(--pp-rooted-paper);
}

/* A supplied logo file. Height follows its own proportions. */
.pp-rooted-banner__logo-img {
	width: clamp(13rem, 42vw, 26rem);
	height: auto;
}

/* The typeset lockup, used until a logo file is added. Smaller than the old
   text hero, because the video now carries the top of the page and should sit
   mostly above the fold. */
.pp-rooted-wordmark__name {
	font-family: var(--pp-rooted-font-display);
	font-weight: 400;
	font-size: clamp(2.6rem, 1rem + 7vw, 5.5rem);
	line-height: 0.92;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Optical correction for the trailing letterspace. */
	text-indent: 0.14em;
	color: var(--pp-rooted-paper);
}

.pp-rooted-wordmark__byline {
	position: relative;
	padding-top: clamp(0.8rem, 1.8vw, 1.1rem);
	font-family: var(--pp-rooted-font-body);
	font-size: 0.72rem;
	line-height: 1.5;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--pp-rooted-sand);
}

.pp-rooted-wordmark__byline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(3rem, 8vw, 4.5rem);
	height: 1px;
	background: var(--pp-rooted-wet-sand);
}

.pp-rooted-banner__when {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.pp-rooted-banner__date {
	font-family: var(--pp-rooted-font-display);
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--pp-rooted-paper);
}

.pp-rooted-banner__place {
	font-size: 0.98rem;
	letter-spacing: 0.04em;
	color: var(--pp-rooted-misty-breeze);
}

.pp-rooted-banner__actions {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Natural width even on a phone. Stretched edge to edge beneath the video it
   reads as a bar rather than an invitation. */
.pp-rooted-banner__actions .pp-rooted-btn {
	width: auto;
	padding-inline: 2.4rem;
}

/* -------------------------------------------------------------------------
   8. The gathering
   ---------------------------------------------------------------------- */

.pp-rooted-gathering .pp-rooted-measure {
	margin-inline: auto;
	text-align: center;
}

/* ------------------------------------------------------------------------
   10. Registration includes
   ---------------------------------------------------------------------- */

.pp-rooted-includes__list {
	list-style: none;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1px;
	background: var(--pp-rooted-rule);
	border: 1px solid var(--pp-rooted-rule);
}

.pp-rooted-includes__list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.35rem 1.4rem;
	background: var(--pp-rooted-paper);
	font-size: 1.02rem;
	line-height: 1.5;
}

.pp-rooted-includes__mark {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid var(--pp-rooted-wet-sand);
	transform: rotate(45deg);
}

/* ------------------------------------------------------------------------
   11. Tickets
   ---------------------------------------------------------------------- */

.pp-rooted-tickets__grid {
	margin-top: clamp(2.25rem, 5vw, 3.25rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	align-items: stretch;
}

.pp-rooted-ticket {
	display: flex;
	flex-direction: column;
	padding: clamp(2rem, 4vw, 2.9rem);
	background: rgba(243, 239, 232, 0.05);
	border: 1px solid var(--pp-rooted-rule-light);
}

.pp-rooted-ticket--vip {
	background: var(--pp-rooted-paper);
	color: var(--pp-rooted-text);
	border-color: var(--pp-rooted-paper);
}

.pp-rooted-ticket__head {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--pp-rooted-rule-light);
}

.pp-rooted-ticket--vip .pp-rooted-ticket__head {
	border-bottom-color: var(--pp-rooted-rule);
}

.pp-rooted-ticket__name {
	margin: 0 0 0.7rem;
	font-family: var(--pp-rooted-font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
	line-height: 1.2;
	color: var(--pp-rooted-paper);
}

.pp-rooted-ticket--vip .pp-rooted-ticket__name {
	color: var(--pp-rooted-deep-blue);
}

.pp-rooted-price {
	display: block;
	font-family: var(--pp-rooted-font-display);
	font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
	line-height: 1.1;
	color: var(--pp-rooted-sand);
}

.pp-rooted-ticket--vip .pp-rooted-price {
	color: var(--pp-rooted-wet-sand);
}

.pp-rooted-price--pending {
	font-family: var(--pp-rooted-font-body);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.8;
}

/* Early bird: the regular price struck through, then the offer beneath it. */
.pp-rooted-price--early {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.pp-rooted-price__regular {
	font-family: var(--pp-rooted-font-body);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--pp-rooted-misty-breeze);
}

.pp-rooted-ticket--vip .pp-rooted-price__regular {
	color: var(--pp-rooted-text-muted);
}

.pp-rooted-price__regular del {
	text-decoration-thickness: 1px;
}

.pp-rooted-price__early {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.6rem;
	row-gap: 0.2rem;
}

.pp-rooted-price__label {
	font-family: var(--pp-rooted-font-body-strong);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
}

.pp-rooted-ticket__list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 1.2rem;
	flex: 1 1 auto;
}

.pp-rooted-ticket__list li {
	display: grid;
	gap: 0.3rem;
}

.pp-rooted-ticket__list strong {
	font-size: 0.97rem;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

.pp-rooted-ticket__list span {
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--pp-rooted-misty-breeze);
}

.pp-rooted-ticket--vip .pp-rooted-ticket__list span {
	color: var(--pp-rooted-text-muted);
}

.pp-rooted-ticket__foot {
	margin-top: auto;
}

/* ------------------------------------------------------------------------
   11b. Conference photos
   ---------------------------------------------------------------------- */

/* A filmstrip on the same deep blue as the tickets above, which the
   same-ground rule joins into one surface. */
.pp-rooted-gallery__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pp-rooted-gallery__track::-webkit-scrollbar {
	display: none;
}

.pp-rooted-gallery__slide {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}

/* One shared height; each photo keeps its own width, so the portrait shot is
   a narrower frame rather than a cropped one. On a phone a landscape shot
   would outrun the screen, so its width is capped and it crops slightly. */
.pp-rooted-gallery__slide img {
	display: block;
	width: auto;
	height: clamp(15rem, 34vw, 26rem);
	max-width: 82vw;
	object-fit: cover;
	background: var(--pp-rooted-deep-blue-dark);
}

.pp-rooted-gallery__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

/* Matches the story reel's controls. */
.pp-rooted-gallery__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(243, 239, 232, 0.28);
	border-radius: 0;
	color: var(--pp-rooted-paper);
	cursor: pointer;
	transition: background-color 0.18s, border-color 0.18s, opacity 0.18s;
}

.pp-rooted-gallery__nav:hover:not(:disabled) {
	background: rgba(243, 239, 232, 0.1);
	border-color: rgba(243, 239, 232, 0.6);
}

.pp-rooted-gallery__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.pp-rooted-gallery__nav svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Shows how much of the strip is in view and where. */
.pp-rooted-gallery__rail {
	position: relative;
	flex: 1;
	min-width: 40px;
	height: 1px;
	background: rgba(243, 239, 232, 0.2);
}

.pp-rooted-gallery__rail i {
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--pp-rooted-sand);
}

/* ------------------------------------------------------------------------
   12. Why Rooted
   ---------------------------------------------------------------------- */

.pp-rooted-why {
	background: var(--pp-rooted-white);
}

.pp-rooted-why .pp-rooted-measure {
	margin-inline: auto;
}

/* "Alone." is the beat that lands the paragraph above it, so it stays on the
   same left edge as the body copy rather than being centred against it. The
   weight comes from scale, colour and the space around it, and a short rule
   above acts as the pause. */
.pp-rooted-why__beat {
	font-family: var(--pp-rooted-font-display);
	font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.25rem);
	line-height: 1;
	color: var(--pp-rooted-wet-sand);
	margin-block: 2.75rem 2.5rem !important;
	padding-top: 2.1rem;
	position: relative;
}

.pp-rooted-why__beat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.25rem;
	height: 1px;
	background: var(--pp-rooted-wet-sand);
	opacity: 0.55;
}

.pp-rooted-why__turn {
	font-family: var(--pp-rooted-font-display);
	font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
	line-height: 1.34;
	color: var(--pp-rooted-deep-blue);
}

/* ------------------------------------------------------------------------
   12b. The ground we stand on
   ---------------------------------------------------------------------- */

.pp-rooted-ground__intro {
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* The seven principles as a ruled grid, in the same idiom as the registration
   list. Numbering comes from an ordered-list counter, so it reflects the
   markup rather than being typed into the copy. */
.pp-rooted-ground__list {
	list-style: none;
	counter-reset: pp-rooted-principle;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--pp-rooted-rule);
	border: 1px solid var(--pp-rooted-rule);
}

.pp-rooted-ground__item {
	counter-increment: pp-rooted-principle;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.6rem, 3vw, 2.25rem);
	background: var(--pp-rooted-paper);
}

.pp-rooted-ground__item::before {
	content: counter(pp-rooted-principle, decimal-leading-zero);
	font-family: var(--pp-rooted-font-display);
	font-size: 1.05rem;
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--pp-rooted-wet-sand);
}

.pp-rooted-ground__title {
	margin: 0;
	font-family: var(--pp-rooted-font-display);
	font-weight: 400;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
	line-height: 1.2;
	color: var(--pp-rooted-deep-blue);
}

/* Scoped under the section so it outranks the generic `.pp-rooted-section p`
   margin. */
.pp-rooted-section .pp-rooted-ground__text {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.62;
	color: var(--pp-rooted-text-muted);
}

.pp-rooted-ground__outro {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* The closing line lands the section, echoing the "turn" lines in Why Rooted. */
.pp-rooted-ground__turn {
	font-family: var(--pp-rooted-font-display);
	font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
	line-height: 1.34;
	color: var(--pp-rooted-deep-blue);
}

/* Registered mark, set small and raised without disturbing the line height. */
.pp-rooted-reg {
	font-size: 0.6em;
	line-height: 0;
	vertical-align: super;
	margin-left: 0.05em;
}

/* ------------------------------------------------------------------------
   13. FAQ
   ---------------------------------------------------------------------- */

.pp-rooted-faq .pp-rooted-measure {
	margin-inline: auto;
}

.pp-rooted-faq__list {
	margin-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid var(--pp-rooted-rule);
}

.pp-rooted-faq__item {
	border-bottom: 1px solid var(--pp-rooted-rule);
}

.pp-rooted-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.45rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--pp-rooted-font-display);
	font-size: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
	line-height: 1.35;
	color: var(--pp-rooted-deep-blue);
	transition: color 0.2s var(--pp-rooted-ease);
}

.pp-rooted-faq__q::-webkit-details-marker {
	display: none;
}

.pp-rooted-faq__q:hover {
	color: var(--pp-rooted-wet-sand);
}

/* Plus sign that becomes a minus when the item is open. */
.pp-rooted-faq__icon {
	flex: 0 0 auto;
	position: relative;
	width: 1rem;
	height: 1rem;
	margin-top: 0.35em;
}

.pp-rooted-faq__icon::before,
.pp-rooted-faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--pp-rooted-wet-sand);
	transition: transform 0.28s var(--pp-rooted-ease);
}

.pp-rooted-faq__icon::after {
	transform: rotate(90deg);
}

.pp-rooted-faq__item[open] .pp-rooted-faq__icon::after {
	transform: rotate(0deg);
}

.pp-rooted-faq__a {
	padding: 0 0 1.6rem;
}

.pp-rooted-faq__a p {
	margin: 0 0 1rem;
	font-size: 0.99rem;
}

.pp-rooted-faq__a p:last-child {
	margin-bottom: 0;
}


/* ------------------------------------------------------------------------
   15. Closing
   ---------------------------------------------------------------------- */

.pp-rooted-closing__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.55rem;
}

.pp-rooted-closing__title {
	margin: 0 0 0.9rem;
	font-family: var(--pp-rooted-font-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem);
	line-height: 1.16;
	letter-spacing: 0.01em;
	color: var(--pp-rooted-paper);
/* 	max-width: 18ch; */
	text-wrap: balance;
}

.pp-rooted-closing__date {
	margin: 0 !important;
	font-family: var(--pp-rooted-font-display);
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	color: var(--pp-rooted-sand);
}

/* The closing section and the story reel share the same deep blue and now sit
   back to back, so a hairline marks where one ends. Matches the rule beneath
   the hero. Scoped to that pairing only. */
.pp-rooted-section--blue + .pp-rooted-reel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100%, var(--pp-rooted-shell));
	height: 1px;
	background: var(--pp-rooted-rule-light);
}

.pp-rooted-closing__place {
	margin: 0 0 1.75rem !important;
	color: var(--pp-rooted-misty-breeze);
	font-size: 0.98rem;
	letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------------
   16. Footer
   ---------------------------------------------------------------------- */

.pp-rooted-footer {
	background: var(--pp-rooted-deep-blue-dark);
	color: var(--pp-rooted-misty-breeze);
	padding-block: clamp(3rem, 6vw, 4.5rem);
	text-align: center;
}

.pp-rooted-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4rem;
}

.pp-rooted-footer__logo img {
	width: auto;
	height: clamp(3.2rem, 7vw, 4.2rem);
}

.pp-rooted-footer__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	font-size: 0.92rem;
	letter-spacing: 0.05em;
}

.pp-rooted-footer__sep {
	color: var(--pp-rooted-wet-sand);
}

.pp-rooted-footer__contact {
	margin: 0;
	font-size: 0.92rem;
	letter-spacing: 0.03em;
	color: var(--pp-rooted-misty-breeze);
}

.pp-rooted-footer__contact a {
	color: var(--pp-rooted-sand);
	text-decoration: underline;
	text-decoration-color: rgba(205, 188, 175, 0.45);
	text-underline-offset: 0.25em;
	overflow-wrap: anywhere;
}

.pp-rooted-footer__contact a:hover,
.pp-rooted-footer__contact a:focus-visible {
	color: var(--pp-rooted-paper);
	text-decoration-color: currentColor;
}

.pp-rooted-footer__legal {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: var(--pp-rooted-stone);
}

/* ------------------------------------------------------------------------
   17. Plain fallback template
   ---------------------------------------------------------------------- */

.pp-rooted-plain {
	padding-block: calc(var(--pp-rooted-header-h) + 4rem) 4rem;
	max-width: 46rem;
}

.pp-rooted-plain__title {
	font-family: var(--pp-rooted-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	line-height: 1.2;
	color: var(--pp-rooted-deep-blue);
}

/* The fallback template sits on white, so the fixed header needs a ground. */
body:not(.page-template-template-rooted-landing) .pp-rooted-header {
	background: var(--pp-rooted-deep-blue);
}

/* ------------------------------------------------------------------------
   18. Scroll reveal
   ---------------------------------------------------------------------- */

/* Content is visible by default. The hidden starting state is only applied
   once the script has confirmed it is running, so a failed or blocked script
   can never leave the page blank. */
.pp-rooted-js [data-pp-rooted-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--pp-rooted-ease), transform 0.7s var(--pp-rooted-ease);
}

.pp-rooted-js [data-pp-rooted-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------------
   19. Responsive
   ---------------------------------------------------------------------- */

/* 40rem — large phone and up. Room for the header CTA and for buttons to sit
   at their own width. */
@media (min-width: 40rem) {
	:root {
		--pp-rooted-header-h: 5rem;
	}

	.pp-rooted-header__cta {
		display: block;
	}

	/* --block opts out and stays full width inside the ticket cards. */
	.pp-rooted-btn:not(.pp-rooted-btn--block) {
		width: auto;
		padding-inline: 2.4rem;
	}

	.pp-rooted-includes__list li {
		padding: 1.6rem 1.75rem;
	}

	/* Two up. The seventh principle closes the grid at full width rather than
	   sitting alone in half a row. */
	.pp-rooted-ground__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.pp-rooted-ground__item:last-child {
		grid-column: 1 / -1;
	}
}

/* 60rem — tablet landscape and up. */
@media (min-width: 60rem) {
	/* Three up: two full rows of three, then the seventh across the width. */
	.pp-rooted-ground__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ------------------------------------------------------------------------
   20. Print and reduced motion
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html,
	.pp-rooted-gallery__track {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.pp-rooted-js [data-pp-rooted-reveal] {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.pp-rooted-header,
	.pp-rooted-btn {
		display: none !important;
	}

	.pp-rooted-section--blue,
	.pp-rooted-banner {
		background: none !important;
		color: #000 !important;
	}

	/* A video frame prints as an empty box. */
	.pp-rooted-banner__video {
		display: none !important;
	}

	.pp-rooted-js [data-pp-rooted-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}