/* ==========================================================================
   Terms of Trade — main stylesheet
   Editorial / civic palette: ink, cream, sand, terracotta.
   Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	--tot-ink: #0f172a;
	--tot-ink-light: #1e293b;
	--tot-ink-deep: #020617;
	--tot-charcoal: #1c1917;
	--tot-cream: #fbfbf9;
	--tot-sand: #f3f3ef;
	--tot-rule: #e7e5e4;
	--tot-slate: #44403c;
	--tot-terracotta: #a33b39;
	--tot-terracotta-dark: #852e2d;
	--tot-terracotta-light: #c4605d;
	--tot-white: #fff;

	--tot-ink-90: rgba(15, 23, 42, 0.9);
	--tot-sand-40: rgba(243, 243, 239, 0.4);
	--tot-sand-50: rgba(243, 243, 239, 0.5);
	--tot-sand-60: rgba(243, 243, 239, 0.6);

	--tot-serif: "Merriweather", Georgia, "Times New Roman", serif;
	--tot-sans: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--tot-max: 80rem;        /* 7xl */
	--tot-gutter: 1.5rem;    /* px-6 */
	--tot-gutter-md: 2.5rem; /* px-10 */
	--tot-header-h: 4.25rem;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	border: 0 solid var(--tot-rule);
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--tot-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	background: var(--tot-cream);
	color: var(--tot-charcoal);
	font-family: var(--tot-sans);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--tot-serif);
	font-weight: 400;
	font-feature-settings: "ss01", "kern";
	color: var(--tot-ink);
}

p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; padding: 0; }
hr { border: 0; }
strong, b { font-weight: 700; }

::selection { background: var(--tot-terracotta); color: #fff; }

*:focus-visible {
	outline: 2px solid var(--tot-terracotta);
	outline-offset: 2px;
}

.tot-icon { flex-shrink: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tot-skip-link:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	z-index: 100;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--tot-ink);
	color: var(--tot-cream);
	font-size: 0.875rem;
}

.tot-app { min-height: 100vh; display: flex; flex-direction: column; }
.tot-main { flex: 1; outline: none; }

/* Palette helper classes used by editor content */
.has-terracotta-color { color: var(--tot-terracotta) !important; }
.has-ink-color { color: var(--tot-ink) !important; }
.has-cream-color { color: var(--tot-cream) !important; }
.has-sand-color { color: var(--tot-sand) !important; }
.has-slate-color { color: var(--tot-slate) !important; }
.has-terracotta-background-color { background-color: var(--tot-terracotta) !important; }
.has-ink-background-color { background-color: var(--tot-ink) !important; }
.has-cream-background-color { background-color: var(--tot-cream) !important; }
.has-sand-background-color { background-color: var(--tot-sand) !important; }
.has-slate-background-color { background-color: var(--tot-slate) !important; }
mark.has-inline-color { background: transparent; }

/* ---------- 3. Layout ---------- */
.tot-container {
	width: 100%;
	max-width: var(--tot-max);
	margin-inline: auto;
	padding-inline: var(--tot-gutter);
}
.tot-container--tight { padding-inline: 1.25rem; }

@media (min-width: 768px) {
	.tot-container,
	.tot-container--tight { padding-inline: var(--tot-gutter-md); }
}

.tot-narrow { max-width: 56rem; }      /* 4xl */
.tot-wide-narrow { max-width: 64rem; } /* 5xl */
.tot-prose-wrap { max-width: 48rem; }  /* 3xl */
.tot-prose-section { padding-block: 3.5rem; padding-inline: 1.25rem; }
@media (min-width: 768px) { .tot-prose-section { padding-block: 5rem; padding-inline: 2.5rem; } }

.tot-section__inner { padding-block: 4rem; }
@media (min-width: 768px) { .tot-section__inner { padding-block: 6rem; } }

.tot-section--ruled { border-bottom: 1px solid var(--tot-rule); }
.tot-section--sand { background: var(--tot-sand-60); }

/* ---------- 4. Typography helpers ---------- */
.tot-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-family: var(--tot-sans);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tot-terracotta);
}
.tot-eyebrow--lg { margin-bottom: 1.5rem; }
.tot-eyebrow--tight { margin-bottom: 0.5rem; }
.tot-eyebrow--flush { margin-bottom: 0; }
.tot-eyebrow--tag { letter-spacing: 0.22em; margin-bottom: 1rem; }

.tot-pulse {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--tot-terracotta);
	animation: tot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes tot-pulse { 50% { opacity: 0.5; } }

.tot-accent { color: var(--tot-terracotta); }
.tot-strong { font-weight: 600; font-variant-numeric: tabular-nums; }

.tot-link-more,
.tot-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-ink);
	transition: color 0.15s;
}

.tot-section-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 2rem;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--tot-terracotta);
}
.tot-section-label--tight { margin-bottom: 0.75rem; }

.tot-section-title {
	margin-bottom: 2.5rem;
	font-size: 2.25rem;
	line-height: 1.25;
}
@media (min-width: 768px) { .tot-section-title { font-size: 3rem; } }

.tot-section-note { margin-top: 2.5rem; color: var(--tot-slate); }
.tot-section-note a,
.tot-entry--prose a,
.tot-petition__privacy a {
	color: var(--tot-terracotta);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.tot-section-note a:hover,
.tot-entry--prose a:hover,
.tot-petition__privacy a:hover { color: var(--tot-terracotta-dark); }
.tot-section-extra { margin-top: 2.5rem; }

.tot-rule { height: 1px; background: var(--tot-rule); margin-block: 1.75rem; }

/* ---------- 5. Buttons ---------- */
.tot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--tot-terracotta);
	color: #fff;
	font-family: var(--tot-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	border: 1px solid transparent;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.tot-btn:hover { background: var(--tot-terracotta-dark); }
.tot-btn:disabled,
.tot-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.tot-btn:disabled:hover { background: var(--tot-terracotta); }

.tot-btn--sm { padding: 0.5rem 1.25rem; }
.tot-btn--sm2 { padding: 0.75rem 1.25rem; }
.tot-btn--lg { padding-block: 0.875rem; font-size: 12px; }
.tot-btn--lg2 { padding: 0.875rem 1.75rem; }
.tot-btn--xl { padding: 1rem 2rem; font-size: 12px; }
.tot-btn--block { width: 100%; }
.tot-btn--form { padding: 0.875rem 2rem; width: 100%; }
@media (min-width: 640px) { .tot-btn--form { width: auto; } }

.tot-btn--ink { background: var(--tot-ink); color: var(--tot-cream); }
.tot-btn--ink:hover { background: var(--tot-ink-light); }

.tot-btn--outline { background: transparent; color: var(--tot-ink); border-color: var(--tot-ink); }
.tot-btn--outline:hover { background: var(--tot-ink); color: var(--tot-cream); }

.tot-btn--outline-accent { background: transparent; color: var(--tot-terracotta); border-color: var(--tot-terracotta); }
.tot-btn--outline-accent:hover { background: var(--tot-terracotta); color: #fff; }

/* ---------- 6. Header ---------- */
.tot-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--tot-rule);
	background: rgba(251, 251, 249, 0.95);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}
.admin-bar .tot-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tot-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .tot-header { top: 0; } }

.tot-header__bar {
	max-width: var(--tot-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1.25rem;
}
@media (min-width: 768px) { .tot-header__bar { padding: 1rem 2.5rem; } }

.tot-wordmark {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	font-family: var(--tot-serif);
	font-weight: 900;
	letter-spacing: -0.025em;
	font-size: 1.125rem;
}
@media (min-width: 640px) { .tot-wordmark { font-size: 1.25rem; } }
.tot-header .tot-wordmark { flex-shrink: 0; white-space: nowrap; }
.tot-wordmark--dark { color: var(--tot-ink); }
.tot-wordmark--light { color: var(--tot-cream); }
.tot-wordmark--logo img { max-height: 2.5rem; width: auto; }

.tot-nav { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 1024px) { .tot-nav { display: flex; } }

.tot-nav__list { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.tot-nav__list > li { position: relative; }
.tot-nav__list a {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tot-slate);
	transition: color 0.15s;
}
.tot-nav__list a:hover { color: var(--tot-ink); }
.tot-nav__list > li > a,
.tot-nav__cta { white-space: nowrap; }

/* Laptop widths: tighten the desktop nav so it stays on one line. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.tot-nav,
	.tot-nav__list { gap: 1.125rem; }
	.tot-nav__list a { font-size: 11px; letter-spacing: 0.12em; }
	.tot-nav__cta { padding-inline: 0.875rem; letter-spacing: 0.16em; }
	.tot-header__bar { padding-inline: 2rem; }
}
@media (min-width: 1024px) and (max-width: 1149px) {
	.tot-nav,
	.tot-nav__list { gap: 0.875rem; }
	.tot-nav__list a { letter-spacing: 0.08em; }
	.tot-nav__cta { padding-inline: 0.75rem; letter-spacing: 0.12em; }
	.tot-header__bar { padding-inline: 1.5rem; }
	.tot-header .tot-wordmark { font-size: 1.125rem; }
}
.tot-nav__list .current-menu-item > a,
.tot-nav__list .current-menu-ancestor > a,
.tot-nav__list .current-page-ancestor > a,
.tot-nav__list .current_page_parent > a { color: var(--tot-terracotta); }

/* Dropdowns (for menus with children) */
.tot-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 14rem;
	padding: 0.5rem 0;
	margin-top: 0.75rem;
	list-style: none;
	background: var(--tot-cream);
	border: 1px solid var(--tot-rule);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.tot-nav__list .sub-menu::before { content: ""; position: absolute; inset: -0.85rem 0 auto; height: 0.85rem; }
.tot-nav__list li:hover > .sub-menu,
.tot-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.tot-nav__list .sub-menu a { display: block; padding: 0.5rem 1rem; font-size: 11px; }
.tot-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.35em;
	height: 0.35em;
	margin-left: 0.5em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.2em) rotate(45deg);
}

.tot-menu-toggle { display: inline-flex; padding: 0.5rem; color: var(--tot-ink); }
@media (min-width: 1024px) { .tot-menu-toggle { display: none; } }
.tot-menu-toggle__close { display: none; }
.tot-menu-toggle[aria-expanded="true"] .tot-menu-toggle__open { display: none; }
.tot-menu-toggle[aria-expanded="true"] .tot-menu-toggle__close { display: block; }

.tot-mobile-nav { border-top: 1px solid var(--tot-rule); background: var(--tot-cream); max-height: calc(100vh - var(--tot-header-h)); overflow-y: auto; }
@media (min-width: 1024px) { .tot-mobile-nav { display: none !important; } }
.tot-mobile-nav nav { max-width: var(--tot-max); margin-inline: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; }
.tot-mobile-nav__list { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.tot-mobile-nav__list a {
	display: block;
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--tot-rule);
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tot-ink);
}
.tot-mobile-nav__list .current-menu-item > a,
.tot-mobile-nav__list .current-menu-ancestor > a,
.tot-mobile-nav__list .current-page-ancestor > a { color: var(--tot-terracotta); }
.tot-mobile-nav__list .sub-menu { list-style: none; padding-left: 1rem; }
.tot-mobile-nav__list .sub-menu a { font-size: 0.75rem; }
.tot-mobile-nav__cta { margin-top: 1rem; padding-block: 0.75rem; }

/* ---------- 7. Home hero / banner / layout ---------- */
.tot-home-hero__inner { padding-block: 2.5rem; }
@media (min-width: 768px) { .tot-home-hero__inner { padding-block: 4rem; } }
.tot-home-hero__eyebrow { gap: 0.625rem; margin-bottom: 1.25rem; }

.tot-home-hero__title {
	max-width: 64rem;
	font-size: 2.25rem;
	line-height: 1.02;
	letter-spacing: -0.025em;
}
@media (min-width: 640px) { .tot-home-hero__title { font-size: 3rem; } }
@media (min-width: 768px) { .tot-home-hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .tot-home-hero__title { font-size: 4.5rem; } }

.tot-home-hero__text {
	margin-top: 1.5rem;
	max-width: 48rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--tot-slate);
}
@media (min-width: 768px) { .tot-home-hero__text { font-size: 1.25rem; } }

/* Combined hero: banner image behind the headline. */
.tot-home-hero--banner {
	position: relative;
	overflow: hidden;
	background: var(--tot-ink);
	border-bottom: 1px solid var(--tot-rule);
}
.tot-home-hero__media { position: absolute; inset: 0; }
.tot-home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.tot-home-hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.35) 55%, rgba(15, 23, 42, 0.15) 100%);
}
@media (min-width: 768px) {
	.tot-home-hero__shade {
		background:
			linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 38%, rgba(15, 23, 42, 0.2) 75%, rgba(15, 23, 42, 0.05) 100%);
	}
}
.tot-home-hero--banner .tot-home-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 34rem;
	padding-block: 6rem 3rem;
}
@media (min-width: 768px) {
	.tot-home-hero--banner .tot-home-hero__inner { justify-content: center; min-height: 36rem; padding-block: 6rem; }
}
@media (min-width: 1024px) {
	.tot-home-hero--banner .tot-home-hero__inner { min-height: min(46rem, calc(100vh - var(--tot-header-h))); }
}
.tot-home-hero--banner .tot-home-hero__title { max-width: 52rem; color: var(--tot-cream); text-shadow: 0 2px 24px rgba(15, 23, 42, 0.35); }
.tot-home-hero--banner .tot-accent { color: #e8897f; }
.tot-home-hero--banner .tot-eyebrow { color: #f0a39b; }
.tot-home-hero--banner .tot-pulse { background: #e8897f; }
.tot-home-hero--banner .tot-home-hero__text { max-width: 40rem; color: rgba(251, 251, 249, 0.88); }

/* Banner slider (home page): the featured petition + ticked discussions and petitions. */
.tot-hero-slider { position: relative; background: var(--tot-ink); border-bottom: 1px solid var(--tot-rule); }
.tot-hero-slider__track { display: grid; }
.tot-hero-slide {
	grid-area: 1 / 1;
	border-bottom: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.tot-hero-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.7s ease; }
.tot-hero-slider .tot-home-hero--banner .tot-home-hero__inner { padding-bottom: 6.5rem; }
/* Phones: the text sits higher than in the single hero, so darken the middle of the photo more. */
@media (max-width: 767px) {
	.tot-hero-slider .tot-home-hero__shade { background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 60%, rgba(15, 23, 42, 0.35) 100%); }
}
@media (min-width: 768px) { .tot-hero-slider .tot-home-hero--banner .tot-home-hero__inner { padding-bottom: 7.5rem; } }
.tot-home-hero__actions { margin-top: 2rem; }
.tot-hero-slider__controls { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; }
.tot-hero-slider__bar { display: flex; align-items: center; gap: 0.75rem; padding-block: 1.5rem; }
@media (min-width: 768px) { .tot-hero-slider__bar { padding-block: 2.25rem; } }
.tot-hero-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(251, 251, 249, 0.45);
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.35);
	color: var(--tot-cream);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tot-hero-slider__btn:hover { border-color: var(--tot-cream); background: var(--tot-cream); color: var(--tot-ink); }
.tot-hero-slider__btn:focus-visible,
.tot-hero-slider__dot:focus-visible { outline: 2px solid #f0a39b; outline-offset: 3px; }
.tot-hero-slider__btn[hidden] { display: none; }
.tot-hero-slider__pause { margin-left: auto; }
.tot-hero-slider__icon-play,
.tot-hero-slider.is-paused .tot-hero-slider__icon-pause { display: none; }
.tot-hero-slider.is-paused .tot-hero-slider__icon-play { display: block; }
.tot-hero-slider__dots { display: flex; align-items: center; gap: 0.25rem; }
.tot-hero-slider__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.tot-hero-slider__dot::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: rgba(251, 251, 249, 0.5);
	transition: width 0.3s, background 0.3s;
}
.tot-hero-slider__dot:hover::before { background: var(--tot-cream); }
.tot-hero-slider__dot.is-active::before { width: 1.5rem; background: #e8897f; }

/* Sign-form slider (home page aside): one card per open petition. */
.tot-form-slider__bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.tot-form-slider__status { margin-right: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-slate); }
.tot-form-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--tot-rule);
	border-radius: 999px;
	background: var(--tot-white);
	color: var(--tot-ink);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tot-form-slider__btn:hover { border-color: var(--tot-ink); background: var(--tot-ink); color: var(--tot-cream); }
.tot-form-slider__btn:focus-visible,
.tot-form-slider__dot:focus-visible { outline: 2px solid var(--tot-terracotta); outline-offset: 2px; }
.tot-form-slider__more { margin-top: 1rem; }
.tot-form-slider__dots { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.75rem; }
.tot-form-slider__dot { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.tot-form-slider__dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--tot-rule); transition: width 0.3s, background 0.3s; }
.tot-form-slider__dot:hover::before { background: var(--tot-slate); }
.tot-form-slider__dot.is-active::before { width: 1.5rem; background: var(--tot-terracotta); }

.tot-home-main { border-bottom: 1px solid var(--tot-rule); }
.tot-home-main__grid {
	display: grid;
	gap: 2.5rem;
	padding-block: 2.5rem;
}
@media (min-width: 768px) { .tot-home-main__grid { padding-block: 4rem; } }
@media (min-width: 1024px) {
	.tot-home-main__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem; }
	.tot-home-main__body { grid-column: span 7 / span 7; }
	.tot-home-main__aside { grid-column: span 5 / span 5; }
	.tot-home-main__sticky { position: sticky; top: 6rem; }
	.admin-bar .tot-home-main__sticky { top: calc(6rem + 32px); }
}
@media (min-width: 1280px) {
	.tot-home-main__body { grid-column: span 8 / span 8; }
	.tot-home-main__aside { grid-column: span 4 / span 4; }
}
.tot-home-main__body { min-width: 0; }

/* ---------- 8. Entry content (block editor output) ---------- */
.tot-entry > *:first-child { margin-top: 0; }

/* Petition body */
.tot-entry--petition p {
	margin-bottom: 1.25rem;
	font-family: var(--tot-serif);
	font-size: 1.125rem;
	line-height: 1.85;
	color: var(--tot-ink-90);
}
.tot-entry--petition h2 {
	margin: 3rem 0 1.25rem;
	font-size: 1.5rem;
	line-height: 1.2;
}
@media (min-width: 768px) { .tot-entry--petition h2 { margin-top: 4rem; font-size: 1.875rem; } }
.tot-entry--petition p.tot-eyebrow {
	display: block;
	margin: 3rem 0 0.75rem;
	font-family: var(--tot-sans);
	font-size: 11px;
	line-height: 1.5;
	color: var(--tot-terracotta);
}
@media (min-width: 768px) { .tot-entry--petition p.tot-eyebrow { margin-top: 4rem; } }
.tot-entry--petition > p.tot-eyebrow:first-child { margin-top: 0; }
.tot-entry--petition p.tot-eyebrow + h2 { margin-top: 0; }

/* Callout with terracotta rule */
.tot-entry p.tot-callout,
.tot-callout {
	margin-block: 2rem;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-left: 2px solid var(--tot-terracotta);
	background: var(--tot-sand-40);
	font-family: var(--tot-serif);
	font-size: 1.25rem;
	line-height: 1.375;
	color: var(--tot-ink);
}
@media (min-width: 768px) { .tot-entry p.tot-callout, .tot-callout { font-size: 1.5rem; } }

/* Principle (ink rule) */
.tot-principle { margin-block: 0.5rem 1.25rem; padding: 0.5rem 0 0.5rem 1.5rem; border-left: 2px solid var(--tot-ink); }
.tot-entry .tot-principle p {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.375;
	color: var(--tot-ink);
}
@media (min-width: 768px) { .tot-entry .tot-principle p { font-size: 1.5rem; } }
.tot-entry .tot-principle p.tot-principle__aside {
	margin-top: 1rem;
	font-size: 1rem;
	font-style: italic;
	color: var(--tot-slate);
}
@media (min-width: 768px) { .tot-entry .tot-principle p.tot-principle__aside { font-size: 1.125rem; } }

/* Pillars grid (hairline grid) */
.tot-pillars {
	display: grid;
	gap: 1px;
	margin-block: 1.5rem;
	background: var(--tot-rule);
	border: 1px solid var(--tot-rule);
}
@media (min-width: 640px) { .tot-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tot-pillar { padding: 1.25rem; background: var(--tot-cream); }
.tot-pillars > .tot-pillar,
.tot-pillars > .wp-block-group__inner-container > .tot-pillar { margin: 0; }
/* Classic themes wrap group children in an inner container — let the grid see through it. */
.tot-pillars > .wp-block-group__inner-container { display: contents; }
.tot-entry .wp-block-group__inner-container > *:first-child { margin-top: 0; }
@media (min-width: 768px) { .tot-pillar { padding: 1.5rem; } }
.tot-entry .tot-pillar p.tot-pillar__tag {
	margin: 0;
	font-family: var(--tot-sans);
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-terracotta);
}
.tot-entry .tot-pillar h3 { margin-top: 0.5rem; font-size: 1.125rem; line-height: 1.375; }
@media (min-width: 768px) { .tot-entry .tot-pillar h3 { font-size: 1.25rem; } }
.tot-entry .tot-pillar p:not(.tot-pillar__tag) {
	margin: 0.75rem 0 0;
	font-family: var(--tot-sans);
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--tot-slate);
}

/* Uprisings list */
.tot-entry ul.tot-uprisings,
.tot-uprisings {
	display: grid;
	gap: 0.5rem 1.5rem;
	margin-block: 1.5rem;
	padding: 1.25rem;
	list-style: none;
	border: 1px solid var(--tot-rule);
	background: var(--tot-sand-40);
}
@media (min-width: 640px) { .tot-uprisings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tot-uprisings li {
	display: flex;
	gap: 0.75rem;
	font-family: var(--tot-serif);
	font-size: 1rem;
	line-height: 1.375;
	color: var(--tot-ink);
}
.tot-uprisings li::before { content: "\25C6"; color: var(--tot-terracotta); }

/* Dig deeper cards */
.tot-dig { display: grid; gap: 1rem; }
@media (min-width: 640px) { .tot-dig { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tot-dig__card {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	background: var(--tot-cream);
	border: 1px solid var(--tot-rule);
	transition: border-color 0.15s;
}
.tot-dig__card:hover { border-color: var(--tot-ink); }
.tot-dig__icon {
	display: block;
	width: 22px;
	height: 22px;
	background: var(--tot-terracotta);
	-webkit-mask: var(--tot-dig-icon) center / contain no-repeat;
	mask: var(--tot-dig-icon) center / contain no-repeat;
}
.tot-dig__icon--book { --tot-dig-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.tot-dig__icon--news { --tot-dig-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E"); }
.tot-entry .tot-dig__card h3 { margin-top: 0.75rem; font-size: 1.125rem; line-height: 1.375; }
.tot-entry .tot-dig__card p {
	margin: 0.5rem 0 0;
	font-family: var(--tot-sans);
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--tot-slate);
}
.tot-dig__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 1rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-ink);
	transition: color 0.15s;
}
.tot-dig__more::after {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tot-dig__card:hover .tot-dig__more { color: var(--tot-terracotta); }

/* Article / topic body */
.tot-entry--article { margin-top: 3rem; }
.tot-entry--article p,
.tot-entry--article li {
	font-family: var(--tot-serif);
	font-size: 1.125rem;
	line-height: 1.85;
	color: var(--tot-ink-90);
}
.tot-entry--article p { margin-bottom: 1.75rem; }
.tot-entry--article h2 { margin: 3rem 0 1rem; font-size: 1.875rem; line-height: 1.25; }
.tot-entry--article h3 { margin: 2rem 0 0.75rem; font-size: 1.375rem; line-height: 1.375; }
.tot-entry--article ul,
.tot-entry--article ol { margin: 0 0 1.75rem; padding-left: 1.5rem; }
.tot-entry--article a { color: var(--tot-terracotta); text-decoration: underline; text-underline-offset: 4px; }
.tot-entry--article blockquote { margin: 2.5rem 0; padding: 0.5rem 0 0.5rem 1.5rem; border-left: 2px solid var(--tot-terracotta); }
.tot-entry--article blockquote p { font-size: 1.5rem; line-height: 1.375; color: var(--tot-ink); }

.tot-entry p.tot-draft-badge {
	display: inline-block;
	margin: 0.75rem 0 0;
	padding: 0.5rem 1rem;
	background: var(--tot-sand);
	vertical-align: top;
	border: 1px solid var(--tot-rule);
	font-family: var(--tot-sans);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-slate);
}

/* Figures in content */
.tot-entry figure,
.wp-block-image { margin: 0 0 1.75rem; }
.tot-entry .tot-figure img,
.tot-entry figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--tot-sand);
	border: 1px solid var(--tot-rule);
}
.tot-entry figcaption,
.tot-caption {
	margin-top: 0.75rem;
	font-family: var(--tot-sans);
	font-size: 0.75rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--tot-slate);
	text-align: left;
}

/* Topic body: paragraphs 4xl, figures 5xl */
.tot-entry--topic { margin-top: 0; }
.tot-entry--topic > *:not(figure) { max-width: 51rem; margin-inline: auto; }
.tot-entry--topic > figure { margin-block: 4.75rem 3rem; }
@media (min-width: 768px) { .tot-entry--topic > figure { margin-block: 5.75rem 4rem; } }

/* Long-form prose pages (privacy etc.) */
.tot-entry--prose p,
.tot-entry--prose li {
	font-family: var(--tot-serif);
	font-size: 1rem;
	line-height: 1.85;
	color: var(--tot-ink-90);
}
@media (min-width: 768px) { .tot-entry--prose p, .tot-entry--prose li { font-size: 1.125rem; } }
.tot-entry--prose li { line-height: 1.625; }
.tot-entry--prose p { margin-bottom: 1.25rem; }
.tot-entry--prose h2 { margin: 3.5rem 0 1rem; font-size: 1.5rem; line-height: 1.25; }
@media (min-width: 768px) { .tot-entry--prose h2 { font-size: 1.875rem; } }
.tot-entry--prose h3 { margin: 2rem 0 0.75rem; font-size: 1.125rem; line-height: 1.375; }
@media (min-width: 768px) { .tot-entry--prose h3 { font-size: 1.25rem; } }
.tot-entry--prose ul,
.tot-entry--prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.tot-entry--prose ul { list-style: disc; }
.tot-entry--prose li + li { margin-top: 0.5rem; }
.tot-entry--prose blockquote { margin: 2rem 0; padding-left: 1.5rem; border-left: 2px solid var(--tot-terracotta); }
.tot-entry--prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.tot-entry--prose th, .tot-entry--prose td { border: 1px solid var(--tot-rule); padding: 0.5rem 0.75rem; text-align: left; }

/* Core alignment helpers */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.wp-block-embed iframe { width: 100%; }

/* ---------- 9. Petition form ---------- */
.tot-petition {
	background: var(--tot-cream);
	border: 1px solid var(--tot-rule);
	padding: 1.5rem;
	box-shadow: 0 2px 30px rgba(15, 23, 42, 0.06);
}
@media (min-width: 768px) { .tot-petition { padding: 1.75rem; } }

.tot-count { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; }
.tot-count--ruled { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--tot-rule); }
.tot-count__number {
	font-family: var(--tot-serif);
	font-size: 3rem;
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--tot-ink);
}
@media (min-width: 768px) { .tot-count__number { font-size: 3.75rem; } }
.tot-count__label {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-slate);
}
@media (min-width: 768px) { .tot-count__label { font-size: 1rem; } }

.tot-petition__eyebrow { display: flex; gap: 0.625rem; }
.tot-petition__title {
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: -0.025em;
}
@media (min-width: 768px) { .tot-petition__title { font-size: 1.875rem; } }
.tot-petition__text { margin-top: 1rem; line-height: 1.625; color: var(--tot-slate); }

.tot-petition__form { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }

.tot-field { display: block; }
.tot-field__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-slate);
}
.tot-input {
	display: block;
	width: 100%;
	margin-top: 0.375rem;
	padding: 0.75rem 1rem;
	background: #fff;
	border: 1px solid var(--tot-rule);
	border-radius: 0;
	font-family: var(--tot-serif);
	font-size: 1rem;
	color: var(--tot-ink);
	-webkit-appearance: none;
	appearance: none;
}
.tot-input::placeholder { color: rgba(68, 64, 60, 0.6); }
.tot-input:focus { outline: none; border-color: var(--tot-ink); }
.tot-input[aria-invalid="true"],
.tot-input[aria-invalid="true"]:focus { border-color: var(--tot-terracotta); }
.tot-field__error { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--tot-terracotta); }
.tot-field__error[hidden] { display: none; }

.tot-check { display: flex; align-items: flex-start; gap: 0.75rem; padding-top: 0.25rem; cursor: pointer; user-select: none; }
.tot-check input { flex-shrink: 0; accent-color: var(--tot-terracotta); }
.tot-check span { font-size: 0.875rem; line-height: 1.625; color: var(--tot-slate); }

.tot-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.tot-petition__privacy { display: flex; gap: 0.625rem; padding-top: 0.75rem; font-size: 0.75rem; color: var(--tot-slate); }
@media (min-width: 768px) { .tot-petition__privacy { font-size: 0.875rem; } }
.tot-petition__privacy .tot-icon { margin-top: 0.125rem; color: var(--tot-terracotta); }
.tot-petition__privacy p { line-height: 1.625; }
.tot-petition__privacy strong { color: var(--tot-ink); }
.tot-petition__privacy a { word-break: break-all; }

.tot-petition__thanks:focus { outline: none; }
.tot-petition__check { color: var(--tot-terracotta); margin-bottom: 1.25rem; }
.tot-petition__thanks-text {
	margin-top: 1.25rem;
	font-family: var(--tot-serif);
	line-height: 1.625;
	color: var(--tot-ink-90);
}
.tot-petition__closing { margin-top: 1rem; font-family: var(--tot-serif); color: var(--tot-ink); }
.tot-petition__closing--flush { margin-top: 0; }
.tot-petition__share { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- 10. Home feature cards ---------- */
.tot-feature { border-top: 1px solid var(--tot-rule); }
.tot-feature--sand { background: var(--tot-sand-40); }
.tot-feature--cream { background: var(--tot-cream); }
.tot-feature__inner { padding-block: 3.5rem; }
@media (min-width: 768px) { .tot-feature__inner { padding-block: 5rem; } }
.tot-feature__heading {
	max-width: 48rem;
	margin-bottom: 2.5rem;
	font-size: 1.875rem;
	line-height: 1.1;
}
@media (min-width: 768px) { .tot-feature__heading { font-size: 3rem; } }

.tot-feature__card {
	display: grid;
	overflow: hidden;
	background: var(--tot-cream);
	border: 1px solid var(--tot-rule);
	transition: border-color 0.15s;
}
.tot-feature__card:hover { border-color: var(--tot-ink); }
@media (min-width: 768px) { .tot-feature__card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tot-feature__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tot-sand); }
@media (min-width: 768px) { .tot-feature__media { aspect-ratio: auto; } }
.tot-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.tot-feature__card:hover .tot-feature__media img { transform: scale(1.015); }
.tot-feature__body { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; }
@media (min-width: 768px) { .tot-feature__body { padding: 2.5rem; } }
.tot-feature__title { margin-top: 0.75rem; font-size: 1.5rem; line-height: 1.25; }
@media (min-width: 768px) { .tot-feature__title { font-size: 1.875rem; } }
.tot-feature__text { margin-top: 1rem; line-height: 1.625; color: var(--tot-slate); }
.tot-feature__body .tot-link-more { margin-top: 1.5rem; }
.tot-feature__card:hover .tot-link-more { color: var(--tot-terracotta); }

/* ---------- 11. CTA banner ---------- */
.tot-cta { border-top: 1px solid var(--tot-rule); }
.tot-cta--dark { background: var(--tot-ink); color: var(--tot-cream); }
.tot-cta--light { background: var(--tot-sand); color: var(--tot-ink); }
.tot-cta__inner {
	max-width: 72rem;
	margin-inline: auto;
	padding: 3.5rem 1.25rem;
	text-align: center;
}
@media (min-width: 768px) { .tot-cta__inner { padding: 5rem 2.5rem; } }
.tot-cta__eyebrow { margin-bottom: 1rem; color: var(--tot-cream); }
.tot-cta__eyebrow .tot-pulse { background: var(--tot-cream); }
.tot-cta__title {
	max-width: 48rem;
	margin-inline: auto;
	font-size: 1.875rem;
	line-height: 1.1;
}
@media (min-width: 768px) { .tot-cta__title { font-size: 3rem; } }
.tot-cta--dark .tot-cta__title { color: var(--tot-cream); }
.tot-cta__text { max-width: 42rem; margin: 1.25rem auto 0; }
.tot-cta--dark .tot-cta__text { color: rgba(251, 251, 249, 0.8); }
.tot-cta--light .tot-cta__text { color: var(--tot-slate); }
.tot-cta__action { margin-top: 2rem; }

/* ---------- 12. Sticky petition bar ---------- */
.tot-sticky-bar {
	position: fixed;
	inset: auto 0 0;
	z-index: 40;
	border-top: 1px solid rgba(133, 46, 45, 0.4);
	background: rgba(15, 23, 42, 0.95);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	box-shadow: 0 -6px 30px rgba(15, 23, 42, 0.25);
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s, opacity 0.3s;
}
.tot-sticky-bar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.tot-sticky-bar__inner {
	max-width: var(--tot-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
}
@media (min-width: 768px) { .tot-sticky-bar__inner { padding: 1rem 2.5rem; } }
.tot-sticky-bar__copy { display: none; min-width: 0; }
@media (min-width: 640px) { .tot-sticky-bar__copy { display: block; } }
.tot-sticky-bar__label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(251, 251, 249, 0.6); }
.tot-sticky-bar__text {
	font-family: var(--tot-serif);
	font-size: 0.875rem;
	line-height: 1.375;
	color: var(--tot-cream);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (min-width: 768px) { .tot-sticky-bar__text { font-size: 1rem; } }
.tot-sticky-bar__mobile { flex: 1; min-width: 0; }
.tot-sticky-bar__mobile .tot-sticky-bar__label { font-size: 9px; letter-spacing: 0.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tot-sticky-bar__mobile-text {
	margin-top: 0.125rem;
	font-family: var(--tot-serif);
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--tot-cream);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 640px) { .tot-sticky-bar__mobile { display: none; } }
.tot-sticky-bar__btn { flex-shrink: 0; padding: 0.75rem 1.25rem; white-space: nowrap; }
/* Phones: a more compact button leaves room for the two-line message beside it. */
@media (max-width: 639px) {
	.tot-sticky-bar__inner { gap: 0.75rem; }
	.tot-sticky-bar__btn { padding: 0.75rem 0.875rem; letter-spacing: 0.12em; }
}
@media (max-width: 399px) {
	.tot-sticky-bar__btn { max-width: 8.5rem; white-space: normal; line-height: 1.3; }
}

/* ---------- 13. Footer ---------- */
.tot-footer { margin-top: 6rem; background: var(--tot-ink); color: var(--tot-cream); }
.tot-footer__grid { display: grid; gap: 3rem; padding-block: 4rem; }
@media (min-width: 768px) {
	.tot-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 5rem; }
	.tot-footer__about { grid-column: span 7 / span 7; }
	.tot-footer__explore { grid-column: span 5 / span 5; }
}
.tot-footer__tagline {
	max-width: 28rem;
	margin-top: 1.5rem;
	font-family: var(--tot-serif);
	line-height: 1.625;
	color: rgba(251, 251, 249, 0.85);
}
.tot-footer__org { max-width: 28rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(251, 251, 249, 0.15); }
.tot-footer__label {
	margin-bottom: 1rem;
	font-family: var(--tot-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(251, 251, 249, 0.6);
}
.tot-footer__heading { margin-bottom: 1.25rem; font-family: var(--tot-serif); }
.tot-footer__org-link { display: inline-block; }
.tot-footer__logo { display: inline-block; padding: 1rem 1.25rem; background: var(--tot-cream); }
.tot-footer__logo img { height: 2.5rem; width: auto; }
@media (min-width: 768px) { .tot-footer__logo img { height: 3rem; } }
.tot-footer__org-text { display: block; margin-top: 1rem; font-size: 0.875rem; line-height: 1.625; color: rgba(251, 251, 249, 0.8); }
.tot-footer__org-url {
	display: inline-flex;
	margin-top: 0.75rem;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-terracotta);
	transition: color 0.15s;
}
.tot-footer__org-link:hover .tot-footer__org-url { color: var(--tot-terracotta-light); }

.tot-footer__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; list-style: none; font-size: 0.875rem; }
.tot-footer__menu a { color: rgba(251, 251, 249, 0.85); transition: color 0.15s; }
/* Taller tap targets on phones, same look (the padding replaces part of the gap). */
@media (max-width: 767px) {
	.tot-footer__menu { gap: 0.25rem 0.75rem; }
	.tot-footer__menu a { display: inline-block; padding-block: 0.25rem; }
}
.tot-footer__menu a:hover { color: var(--tot-terracotta); }
.tot-footer__cta { margin-top: 2rem; }

.tot-footer__bottom { border-top: 1px solid rgba(251, 251, 249, 0.15); }
.tot-footer__bottom-inner { display: flex; flex-direction: column; gap: 0.75rem; padding-block: 1.5rem; }
@media (min-width: 768px) { .tot-footer__bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.tot-footer__copy { font-size: 0.75rem; color: rgba(251, 251, 249, 0.6); }
.tot-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.75rem; }
.tot-footer__legal-menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; }
.tot-footer__legal-menu a { color: rgba(251, 251, 249, 0.7); text-decoration: underline; text-underline-offset: 4px; transition: color 0.15s; }
.tot-footer__legal-menu a:hover { color: var(--tot-terracotta); }
.tot-footer__note { color: rgba(251, 251, 249, 0.5); }

/* ---------- 14. Inner page hero ---------- */
.tot-hero { border-bottom: 1px solid var(--tot-rule); }
.tot-hero--gradient { background: linear-gradient(to bottom, var(--tot-cream), var(--tot-sand-60)); }
.tot-hero--gradient-soft { background: linear-gradient(to bottom, var(--tot-cream), var(--tot-sand-50)); }
.tot-hero__inner { padding-block: 5rem; }
@media (min-width: 768px) { .tot-hero__inner { padding-block: 7rem; } }
.tot-hero__inner--narrow { max-width: 56rem; padding-block: 4rem; padding-inline: 1.25rem; }
@media (min-width: 768px) { .tot-hero__inner--narrow { padding-block: 6rem; padding-inline: 2.5rem; } }
.tot-hero__eyebrow { margin-bottom: 1.5rem; }
.tot-hero__inner--narrow .tot-hero__eyebrow { margin-bottom: 1.25rem; }

.tot-hero__title {
	max-width: 56rem;
	font-size: 3rem;
	line-height: 1.02;
	letter-spacing: -0.025em;
	overflow-wrap: break-word;
}
@media (min-width: 768px) { .tot-hero__title { font-size: 4.5rem; } }
.tot-hero__inner--xwide .tot-hero__title { max-width: 64rem; }
.tot-hero__inner--narrow .tot-hero__title { font-size: 2.25rem; line-height: 1.04; }
@media (min-width: 768px) { .tot-hero__inner--narrow .tot-hero__title { font-size: 3.75rem; } }
.tot-hero__title--md { font-size: 2.25rem; }
@media (min-width: 768px) { .tot-hero__title--md { font-size: 3.75rem; } }

.tot-hero__text { max-width: 42rem; margin-top: 2rem; font-size: 1.125rem; line-height: 1.625; color: var(--tot-slate); }
.tot-hero__text--lg { max-width: 48rem; font-size: 1.25rem; }
.tot-hero__inner--narrow .tot-hero__text { max-width: none; margin-top: 1.5rem; }
.tot-hero__meta { margin-top: 1rem; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-slate); }
.tot-hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.tot-hero__search { margin-top: 2rem; max-width: 36rem; }

/* Story banner */
.tot-story-banner__frame { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--tot-ink); }
@media (min-width: 768px) { .tot-story-banner__frame { aspect-ratio: 21 / 7; } }
.tot-story-banner__frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.tot-story-banner__shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.35), transparent); }
.tot-story-banner__caption { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.tot-story-banner__caption .tot-container { padding-bottom: 2rem; }
@media (min-width: 768px) { .tot-story-banner__caption .tot-container { padding-bottom: 3rem; } }
.tot-story-banner__caption p {
	max-width: 42rem;
	font-family: var(--tot-serif);
	font-size: 1.25rem;
	line-height: 1.375;
	color: var(--tot-cream);
}
@media (min-width: 768px) { .tot-story-banner__caption p { font-size: 1.875rem; } }
.tot-story-intro { padding-top: 3rem; }

/* Filters */
.tot-filters-wrap { padding-block: 3rem; }
@media (min-width: 768px) { .tot-filters-wrap { padding-block: 4rem; } }
.tot-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tot-filter {
	padding: 0.5rem 1rem;
	border: 1px solid var(--tot-rule);
	background: var(--tot-cream);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-slate);
	transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.tot-filter:hover { border-color: var(--tot-ink); color: var(--tot-ink); }
.tot-filter.is-active { background: var(--tot-ink); border-color: var(--tot-ink); color: var(--tot-cream); }

/* ---------- 15. Hairline grids & cards ---------- */
.tot-grid {
	display: grid;
	gap: 1px;
	background: var(--tot-rule);
	border: 1px solid var(--tot-rule);
}
@media (min-width: 768px) {
	.tot-grid--2,
	.tot-grid--3,
	.tot-grid--md3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tot-grid--md3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.tot-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) { .tot-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tot-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tot-grid > [hidden] { display: none; }

.tot-card {
	display: flex;
	flex-direction: column;
	background: var(--tot-cream);
	text-align: left;
	transition: background-color 0.15s;
}
.tot-card--story { padding: 1.75rem; }
@media (min-width: 768px) { .tot-card--story { padding: 2rem; } }
.tot-card--story:hover,
.tot-card--news:hover { background: var(--tot-sand); }
.tot-card--topic:hover { background: rgba(251, 251, 249, 0.7); }
.tot-card--compact.tot-card--story { padding: 1.5rem; }
@media (min-width: 768px) { .tot-card--compact.tot-card--story { padding: 2rem; } }

.tot-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tot-sand); color: rgba(68, 64, 60, 0.6); }
.tot-card__media--inset { margin-bottom: 1.5rem; }
.tot-card__media--ruled { border-bottom: 1px solid var(--tot-rule); }
/* Video coverage: play button over the thumbnail. */
.tot-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: -1.625rem 0 0 -1.625rem;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.78);
	color: #fff;
	pointer-events: none;
}
.tot-card__play .tot-icon { margin-left: 3px; }
.tot-card__media img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.5s; }
.tot-card--story .tot-card__media img { filter: grayscale(35%); }
.tot-card--topic .tot-card__media img { filter: grayscale(30%); }
.tot-card:hover .tot-card__media img { filter: none; }

.tot-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
@media (min-width: 768px) { .tot-card--topic:not(.tot-card--compact) .tot-card__body, .tot-card--news .tot-card__body { padding: 1.75rem; } }

.tot-card__tag { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-terracotta); }
.tot-card__title { margin-top: 0.75rem; font-family: var(--tot-serif); font-size: 1.5rem; line-height: 1.25; color: var(--tot-ink); }
.tot-card--topic .tot-card__title { line-height: 1.375; }
.tot-card--compact .tot-card__title,
.tot-card__title--sm { font-size: 1.25rem; line-height: 1.375; }
.tot-card--compact.tot-card--story .tot-card__title { line-height: 1.25; }
.tot-card__text { margin-top: 0.75rem; line-height: 1.625; color: var(--tot-slate); }
.tot-card--topic .tot-card__text,
.tot-card--compact .tot-card__text { font-size: 0.875rem; }
@media (min-width: 768px) { .tot-card--topic:not(.tot-card--compact) .tot-card__text { font-size: 1rem; } }
.tot-card__more { margin-top: auto; padding-top: 1.5rem; }
.tot-card:hover .tot-card__more { color: var(--tot-terracotta); }

.tot-card--news { width: 100%; padding: 0; border: 0; }
.tot-card__pub { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-slate); }
.tot-card__date { display: block; margin-top: 0.5rem; font-size: 0.875rem; color: var(--tot-slate); }

.tot-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.5rem;
	background: rgba(251, 251, 249, 0.9);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-terracotta);
}
.tot-badge--lg { top: 1rem; left: 1rem; padding: 0.25rem 0.625rem; }


/* Empty states */
.tot-empty {
	padding: 2.5rem;
	border: 1px dashed var(--tot-rule);
	text-align: center;
	color: rgba(68, 64, 60, 0.5);
}
@media (min-width: 768px) { .tot-empty { padding: 3.5rem; } }
.tot-empty .tot-icon { margin: 0 auto 1.25rem; }
.tot-empty--sand { background: var(--tot-sand-40); }
.tot-empty--cream { background: var(--tot-cream); }
.tot-empty--filter { margin-top: 1.5rem; padding: 2rem; color: var(--tot-slate); }
.tot-empty__title { font-family: var(--tot-serif); font-size: 1.5rem; color: var(--tot-ink); }
.tot-empty__title--sm { font-size: 1.25rem; }
.tot-empty__text { max-width: 36rem; margin: 0.75rem auto 0; color: var(--tot-slate); }
.tot-empty__link {
	display: inline-flex;
	margin-top: 1.5rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-terracotta);
}
.tot-empty__link:hover { color: var(--tot-terracotta-dark); }

/* ---------- 16. Article & topic ---------- */
.tot-article__header { border-bottom: 1px solid var(--tot-rule); }

.tot-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-slate);
	transition: color 0.15s;
}
.tot-back:hover { color: var(--tot-ink); }
.tot-article__eyebrow { display: block; margin: 2.5rem 0 0; }
.tot-article__title {
	letter-spacing: -0.025em;
	overflow-wrap: break-word;
}
.tot-article__teaser { color: var(--tot-slate); }

.tot-article__body { padding-block: 3rem; }
@media (min-width: 768px) { .tot-article__body { padding-block: 4rem; } }

.tot-frame { overflow: hidden; background: var(--tot-sand); border: 1px solid var(--tot-rule); }
.tot-frame--16x9 { aspect-ratio: 16 / 9; }
.tot-frame--4x3 { aspect-ratio: 4 / 3; }
.tot-frame img { width: 100%; height: 100%; object-fit: cover; }

.tot-stat {
	margin-top: 3rem;
	padding: 1rem 0 1rem 1.5rem;
	border-left: 2px solid var(--tot-terracotta);
	background: var(--tot-sand-40);
}
@media (min-width: 768px) { .tot-stat { padding-left: 2rem; } }
.tot-stat__label { margin-bottom: 0.5rem; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-terracotta); }
.tot-stat__value { font-family: var(--tot-serif); font-size: 1.875rem; line-height: 1.25; color: var(--tot-ink); }
@media (min-width: 768px) { .tot-stat__value { font-size: 2.25rem; } }
.tot-stat__text { margin-top: 0.5rem; color: var(--tot-slate); }

.tot-topic__stat { padding-top: 0.0001px; }
.tot-topic__stat .tot-stat { margin-top: 3rem; }
@media (min-width: 768px) { .tot-topic__stat .tot-stat { margin-top: 4rem; } }
.tot-topic__body { padding-block: 3rem; }
@media (min-width: 768px) { .tot-topic__body { padding-block: 4rem; } }

.tot-pullquote { max-width: 51rem; margin: 2.5rem auto 0; padding: 0.5rem 0 0.5rem 1.5rem; border-left: 2px solid var(--tot-terracotta); }
@media (min-width: 768px) { .tot-pullquote { padding-left: 2rem; } }
.tot-pullquote p { font-family: var(--tot-serif); font-size: 1.5rem; line-height: 1.375; color: var(--tot-ink); }
@media (min-width: 768px) { .tot-pullquote p { font-size: 1.875rem; } }
.tot-pullquote cite { display: block; margin-top: 0.75rem; font-style: normal; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-terracotta); }

.tot-video { border-block: 1px solid var(--tot-rule); background: var(--tot-sand-50); }
.tot-video__inner { padding-block: 4rem; }
@media (min-width: 768px) { .tot-video__inner { padding-block: 5rem; } }
.tot-video .tot-section-label { margin-bottom: 1.25rem; }
.tot-video__title { margin-bottom: 2rem; font-size: 1.875rem; line-height: 1.25; }
@media (min-width: 768px) { .tot-video__title { font-size: 2.25rem; } }
.tot-video__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	aspect-ratio: 16 / 9;
	padding: 1rem;
	background: var(--tot-ink);
	border: 1px solid var(--tot-rule);
	color: var(--tot-terracotta);
	text-align: center;
}
.tot-video__placeholder p { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(251, 251, 249, 0.7); }
a.tot-video__placeholder { text-decoration: none; transition: background-color 0.15s; }
a.tot-video__placeholder:hover p,
a.tot-video__placeholder:focus-visible p { color: var(--tot-cream); }
.tot-video__embed { position: relative; aspect-ratio: 16 / 9; background: var(--tot-ink); }
.tot-video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.tot-topic__gallery { padding-block: 4rem; }
@media (min-width: 768px) { .tot-topic__gallery { padding-block: 5rem; } }
.tot-gallery { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .tot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tot-topic__spacer { padding-bottom: 2rem; }

.tot-related { border-top: 1px solid var(--tot-rule); background: var(--tot-sand); }
.tot-related__inner { padding-block: 5rem; }
@media (min-width: 768px) { .tot-related__inner { padding-block: 6rem; } }
.tot-related--topics .tot-related__inner { padding-block: 4rem; }
@media (min-width: 768px) { .tot-related--topics .tot-related__inner { padding-block: 5rem; } }
.tot-related__title { margin-bottom: 2.5rem; font-size: 1.875rem; line-height: 1.2; }
@media (min-width: 768px) { .tot-related__title { font-size: 2.25rem; } }

/* Comments */

/* ---------- 17. Discussions & Roundtable ---------- */

.tot-events { display: grid; gap: 1.5rem; }
.tot-event-card { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--tot-rule); background: var(--tot-cream); transition: background-color 0.15s; }
.tot-event-card > * { min-width: 0; }
.tot-event-card:hover { background: var(--tot-sand); }
@media (min-width: 768px) { .tot-event-card { grid-template-columns: 5fr 7fr; } }
.tot-event-card__side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	aspect-ratio: 16 / 9;
	padding: 2rem;
	background: linear-gradient(to bottom right, var(--tot-ink), var(--tot-ink-deep));
	color: var(--tot-cream);
}
@media (min-width: 768px) { .tot-event-card__side { aspect-ratio: auto; } }
.tot-event-card__body { display: flex; flex-direction: column; padding: 2rem; }
@media (min-width: 768px) { .tot-event-card__body { padding: 2.5rem; } }
.tot-event-card__facts { display: flex; flex-direction: column; gap: 0.75rem; color: var(--tot-slate); }
.tot-event-card__facts p { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.tot-event-card__facts .tot-icon { color: var(--tot-terracotta); }
.tot-event-card__text { margin-top: 1.5rem; line-height: 1.625; color: var(--tot-slate); }
.tot-event-card__body .tot-link-more { margin-top: 1.5rem; }
.tot-event-card:hover .tot-link-more { color: var(--tot-terracotta); }
.tot-event-future { padding: 2rem; border: 1px dashed var(--tot-rule); text-align: center; }
.tot-event-future__label { margin-bottom: 0.5rem; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tot-slate); }
.tot-event-future__text { font-family: var(--tot-serif); font-size: 1.25rem; color: var(--tot-ink); }

.tot-rt-banner { border-bottom: 1px solid var(--tot-rule); }
.tot-rt-banner__frame { width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: var(--tot-sand); }
@media (min-width: 768px) { .tot-rt-banner__frame { aspect-ratio: 21 / 7; } }
.tot-rt-banner__frame img { width: 100%; height: 100%; object-fit: cover; }
.tot-rt-banner__frame--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
	background: linear-gradient(to bottom right, var(--tot-sand), var(--tot-cream), var(--tot-sand));
	color: rgba(68, 64, 60, 0.5);
	text-align: center;
}
.tot-rt-banner__hint { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(68, 64, 60, 0.7); }
.tot-rt-banner__size { font-size: 0.75rem; color: rgba(68, 64, 60, 0.6); }

.tot-rt-question { background: var(--tot-sand); border-bottom: 1px solid var(--tot-rule); }
.tot-rt-question__inner { max-width: 64rem; padding-block: 5rem; }
@media (min-width: 768px) { .tot-rt-question__inner { padding-block: 7rem; } }
.tot-rt-question__quote { padding-left: 1.5rem; border-left: 2px solid var(--tot-terracotta); }
@media (min-width: 768px) { .tot-rt-question__quote { padding-left: 2.5rem; } }
.tot-rt-question__quote p { font-family: var(--tot-serif); font-size: 1.875rem; line-height: 1.25; color: var(--tot-ink); }
@media (min-width: 768px) { .tot-rt-question__quote p { font-size: 2.25rem; } }
.tot-rt-question__cols { display: grid; gap: 2.5rem; margin-top: 3rem; line-height: 1.625; color: var(--tot-slate); }
@media (min-width: 768px) { .tot-rt-question__cols { grid-template-columns: 1fr 1fr; } }

.tot-rt-details { border-bottom: 1px solid var(--tot-rule); }
.tot-rt-details__inner { padding-block: 5rem; }
@media (min-width: 768px) { .tot-rt-details__inner { padding-block: 6rem; } }
.tot-rt-fact { padding: 2rem; background: var(--tot-cream); }
.tot-rt-fact > .tot-icon { color: var(--tot-terracotta); }
.tot-rt-fact__label { margin-top: 1.25rem; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-slate); }
.tot-rt-fact__value { margin-top: 0.5rem; font-family: var(--tot-serif); font-size: 1.5rem; line-height: 1.33; color: var(--tot-ink); }
.tot-rt-fact__note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--tot-slate); }
.tot-rt-fact__link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-terracotta); }
.tot-rt-fact__link:hover { color: var(--tot-terracotta-dark); }

.tot-rt-flow { border-bottom: 1px solid var(--tot-rule); }
.tot-flow { list-style: none; border-top: 1px solid var(--tot-rule); }
.tot-flow__step { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--tot-rule); }
@media (min-width: 768px) { .tot-flow__step { grid-template-columns: 5rem 1fr; gap: 2rem; padding-block: 2rem; } }
.tot-flow__num { font-family: var(--tot-serif); font-size: 1.5rem; line-height: 1.2; color: var(--tot-terracotta); }
@media (min-width: 768px) { .tot-flow__num { font-size: 2rem; } }
.tot-flow__title { font-size: 1.375rem; line-height: 1.3; }
@media (min-width: 768px) { .tot-flow__title { font-size: 1.625rem; } }
.tot-flow__by { margin-top: 0.5rem; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-slate); }
.tot-flow__text { margin-top: 0.75rem; max-width: 46rem; line-height: 1.625; color: var(--tot-slate); }

.tot-rt-petition { background: var(--tot-sand); border-bottom: 1px solid var(--tot-rule); scroll-margin-top: var(--tot-header-h); }
.tot-rt-petition__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .tot-rt-petition__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 4rem; } }
.tot-rt-petition__intro .tot-rt-heading { margin-bottom: 1.5rem; }
.tot-rt-petition__text { margin-block: 0 1.75rem; max-width: 40rem; line-height: 1.625; color: var(--tot-slate); }

.tot-rt-isnot { background: var(--tot-sand); border-bottom: 1px solid var(--tot-rule); }
.tot-rt-isnot__inner { padding-block: 5rem; }
@media (min-width: 768px) { .tot-rt-isnot__inner { padding-block: 7rem; } }
.tot-rt-isnot__cell { padding: 2rem; background: var(--tot-cream); }
@media (min-width: 768px) { .tot-rt-isnot__cell { padding: 3rem; } }
.tot-rt-isnot__title { font-size: 1.875rem; line-height: 1.25; }
.tot-rt-isnot__list { margin-top: 1.5rem; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; line-height: 1.625; color: var(--tot-slate); }

.tot-rt-speakers { background: var(--tot-sand); border-bottom: 1px solid var(--tot-rule); }
.tot-rt-section { padding-block: 5rem; }
@media (min-width: 768px) { .tot-rt-section { padding-block: 7rem; } }
.tot-rt-section--sm { padding-block: 4rem; }
@media (min-width: 768px) { .tot-rt-section--sm { padding-block: 5rem; } }
.tot-rt-heading { margin-bottom: 2.5rem; font-size: 2.25rem; line-height: 1.25; }
@media (min-width: 768px) { .tot-rt-heading { font-size: 3rem; } }
.tot-rt-heading--xl { margin-bottom: 3rem; font-size: 3rem; }
@media (min-width: 768px) { .tot-rt-heading--xl { font-size: 3.75rem; } }

.tot-speaker { display: flex; flex-direction: column; padding: 1.5rem; background: var(--tot-cream); }
.tot-speaker__photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; background: var(--tot-sand); border: 1px solid var(--tot-rule); color: rgba(68, 64, 60, 0.6); }
.tot-speaker__photo img { width: 100%; height: 100%; object-fit: cover; }
.tot-speaker__name { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.375; }
.tot-speaker__role { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.375; color: var(--tot-terracotta); }
.tot-speaker__bio { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.625; color: var(--tot-slate); }



/* ---------- 18. Dialog ---------- */
.tot-dialog { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; }
.tot-dialog[hidden] { display: none; }
.tot-dialog__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); animation: tot-fade 0.2s ease; }
.tot-dialog__panel {
	position: relative;
	width: 100%;
	max-width: 42rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: var(--tot-cream);
	border: 1px solid var(--tot-rule);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	animation: tot-zoom 0.2s ease;
}
.tot-dialog__panel:focus { outline: none; }
.tot-dialog__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tot-sand); color: rgba(68, 64, 60, 0.6); }
.tot-dialog__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Show the whole clipping so it can be read, on a light backdrop. */
.tot-dialog__media.has-image:not(.has-video) { background: #fff; }
.tot-dialog__media.has-image .tot-dialog__placeholder { display: none; }
.tot-dialog__media video,
.tot-dialog__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tot-dialog__media.has-video .tot-badge { display: none; }
/* The base `img, video, iframe { display: block }` rule would otherwise show hidden slots. */
.tot-dialog__media [hidden] { display: none; }
.tot-dialog__body { padding: 1.5rem; }
@media (min-width: 768px) { .tot-dialog__body { padding: 2rem; } }
.tot-dialog__meta { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-slate); }
.tot-dialog__title { margin-top: 0.75rem; font-size: 1.5rem; line-height: 1.375; }
@media (min-width: 768px) { .tot-dialog__title { font-size: 1.875rem; } }
.tot-dialog__text { margin-top: 1rem; line-height: 1.625; color: var(--tot-slate); }
.tot-dialog__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tot-dialog__actions [hidden] { display: none; }
.tot-dialog__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	background: rgba(251, 251, 249, 0.9);
	color: var(--tot-ink);
	opacity: 0.8;
	transition: opacity 0.15s;
}
.tot-dialog__close:hover { opacity: 1; }
body.tot-no-scroll { overflow: hidden; }
@keyframes tot-fade { from { opacity: 0; } }
@keyframes tot-zoom { from { opacity: 0; transform: scale(0.96); } }

/* ---------- 19. Contact form ---------- */
.tot-contact { max-width: 48rem; padding-block: 4rem; }
@media (min-width: 768px) { .tot-contact { padding-block: 5rem; } }
.tot-contact__intro { margin-bottom: 2rem; }
.tot-form { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; background: var(--tot-cream); border: 1px solid var(--tot-rule); }
@media (min-width: 768px) { .tot-form { padding: 2.5rem; } }
.tot-form__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .tot-form__grid { grid-template-columns: 1fr 1fr; } }
.tot-form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.tot-form__field label { font-size: 0.875rem; font-weight: 500; line-height: 1; color: var(--tot-charcoal); }
.tot-control {
	display: flex;
	width: 100%;
	height: 2.25rem;
	padding: 0.25rem 0.75rem;
	background: #fff;
	border: 1px solid var(--tot-rule);
	border-radius: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	font-size: 1rem;
	color: var(--tot-charcoal);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
@media (min-width: 768px) { .tot-control { font-size: 0.875rem; } }
.tot-control:focus { outline: none; box-shadow: 0 0 0 1px var(--tot-ink); }
.tot-control[aria-invalid="true"] { border-color: var(--tot-terracotta); }
.tot-control--area { height: auto; min-height: 7.5rem; padding-block: 0.5rem; resize: none; }
.tot-control::placeholder { color: rgba(68, 64, 60, 0.7); }
.tot-select { position: relative; display: block; }
.tot-select select { padding-right: 2.25rem; cursor: pointer; }
.tot-select select:invalid,
.tot-select select.is-empty { color: rgba(68, 64, 60, 0.7); }
.tot-select .tot-icon { position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); opacity: 0.5; pointer-events: none; }
.tot-form__consent { display: flex; align-items: flex-start; gap: 0.75rem; padding-top: 0.25rem; }
.tot-form__consent input { flex-shrink: 0; accent-color: var(--tot-ink); }
.tot-form__consent label { font-size: 0.75rem; line-height: 1.625; color: var(--tot-slate); cursor: pointer; }
.tot-form__submit { padding-top: 0.5rem; }

/* ---------- 20. 404, search, pagination ---------- */
.tot-404__inner { max-width: 48rem; padding-block: 8rem; text-align: center; }
.tot-404__title { font-size: 3rem; line-height: 1.25; }
@media (min-width: 768px) { .tot-404__title { font-size: 4.5rem; } }
.tot-404__text { margin-top: 1.5rem; color: var(--tot-slate); }
.tot-404__btn { margin-top: 2.5rem; }

.tot-search { display: flex; }
.tot-search__input { margin-top: 0; font-family: var(--tot-sans); }
.tot-search__btn { padding-inline: 1rem; }

.tot-results { list-style: none; border-top: 1px solid var(--tot-rule); }
.tot-results__item a { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--tot-rule); }
.tot-results__title { font-family: var(--tot-serif); font-size: 1.5rem; line-height: 1.25; color: var(--tot-ink); transition: color 0.15s; }
.tot-results__item a:hover .tot-results__title { color: var(--tot-terracotta); }
.tot-results__text { color: var(--tot-slate); }

.tot-pagination,
.navigation.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--tot-rule);
	font-size: 0.875rem;
	color: var(--tot-slate);
}
.nav-links .page-numbers:hover { border-color: var(--tot-ink); color: var(--tot-ink); }
.nav-links .page-numbers.current { background: var(--tot-ink); border-color: var(--tot-ink); color: var(--tot-cream); }
.tot-page-links { margin-top: 2rem; display: flex; gap: 0.5rem; font-size: 0.875rem; }
.tot-page__image { margin-bottom: 2.5rem; }

/* ---------- 21. Toasts ---------- */
.tot-toasts {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: min(356px, calc(100vw - 2rem));
	pointer-events: none;
}
@media (min-width: 640px) { .tot-toasts { right: 2rem; bottom: 2rem; } }
.tot-has-sticky-bar .tot-toasts { bottom: 5.5rem; }
.tot-toast {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2.5rem 1rem 1rem;
	border: 1px solid;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	pointer-events: auto;
	animation: tot-toast-in 0.25s ease;
}
.tot-toast--success { background: #ecfdf3; border-color: #bffcd9; color: #008a2e; }
.tot-toast--error { background: #fff0f0; border-color: #ffe0e1; color: #e60000; }
.tot-toast__close { position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; color: inherit; opacity: 0.7; }
.tot-toast__close:hover { opacity: 1; }
.tot-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; }
@keyframes tot-toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- 22. Print ---------- */
@media print {
	.tot-header, .tot-sticky-bar, .tot-cta, .tot-footer, .tot-toasts, .tot-petition { display: none !important; }
	body { background: #fff; }
}

/* ---------- 23. Line-height parity with the reference at larger breakpoints ----------
   In the reference build, responsive font-size utilities also set line-height, which
   overrides the base leading-* value from the md breakpoint up. Mirror that here. */
@media (min-width: 640px) {
	.tot-home-hero__title { line-height: 1; }
}
@media (min-width: 768px) {
	.tot-hero__title,
	.tot-article__title,
	.tot-cta__title,
	.tot-feature__heading,
	.tot-rt-heading,
	.tot-rt-heading--xl,
	.tot-section-title,
	.tot-404__title,
	.tot-hero__inner--narrow .tot-hero__title { line-height: 1; }

	.tot-feature__title,
	.tot-petition__title,
	.tot-story-banner__caption p,
	.tot-pullquote p,
	.tot-dialog__title,
	.tot-entry--prose h2 { line-height: 1.2; }

	.tot-stat__value,
	.tot-related__title,
	.tot-video__title,
	.tot-rt-question__quote p,
	.tot-event-card__title { line-height: 1.111; }

	.tot-entry p.tot-callout,
	.tot-callout,
	.tot-entry .tot-principle p { line-height: 1.333; }

	.tot-entry .tot-pillar h3,
	.tot-entry--prose h3 { line-height: 1.4; }

	.tot-home-hero__text,
	.tot-article__teaser--lg { line-height: 1.4; }

	.tot-entry--prose p,
	.tot-entry--prose li,
	.tot-entry .tot-principle p.tot-principle__aside { line-height: 1.556; }

	.tot-card--topic:not(.tot-card--compact) .tot-card__text { line-height: 1.5; }
}

/* Roundtable: details and "is / is not" grids sit inside a grey panel, as in the reference. */
.tot-rt-details__inner,
.tot-rt-isnot__inner { background: var(--tot-rule); border: 1px solid var(--tot-rule); }
.tot-rt-details__inner > .tot-grid,
.tot-rt-isnot__inner > .tot-grid { border: 0; }

/* ---------- 24. Multiple petitions & discussions ---------- */
.tot-home-hero__status {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.375rem 0.75rem;
	border: 1px solid currentColor;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tot-slate);
}
.tot-home-hero--banner .tot-home-hero__status { color: var(--tot-cream); }

.tot-petition__closed { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 2px solid var(--tot-ink); background: var(--tot-sand-60); }
.tot-petition__closed-label { margin-bottom: 0.375rem; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-ink); }
.tot-petition__closed p:last-child { font-size: 0.875rem; line-height: 1.625; color: var(--tot-slate); }

.tot-badge--muted { color: var(--tot-slate); }
.tot-card__count { margin-top: 1rem; font-size: 0.875rem; color: var(--tot-slate); }
.tot-card__count strong { font-family: var(--tot-serif); font-size: 1.25rem; font-weight: 900; color: var(--tot-ink); font-variant-numeric: tabular-nums; }
.tot-card--petition .tot-card__media .tot-icon { color: rgba(68, 64, 60, 0.5); }
.tot-more-petitions__all { margin-top: 2rem; }
.tot-more-petitions__all .tot-link-more:hover { color: var(--tot-terracotta); }

.tot-events__heading { margin-top: 0.5rem; font-size: 1.5rem; line-height: 1.25; }
.tot-events__heading--past { margin-top: 2.5rem; }
@media (min-width: 768px) { .tot-events__heading { font-size: 1.875rem; } }
.tot-event-card--past .tot-event-card__side { background: linear-gradient(to bottom right, var(--tot-ink-light), var(--tot-ink)); }

/* ---------- 25. In the News ---------- */
.tot-news-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.5rem; font-size: 0.875rem; color: var(--tot-slate); }
.tot-news-article__meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.tot-news-article__meta .tot-icon { color: var(--tot-terracotta); }
.tot-news-article__pub { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-ink); }
.tot-news-article__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--tot-rule); }
a.tot-card--news { color: inherit; }

/* ---------- 26. Discussion page: video banner, partners, closing ---------- */
.tot-rt-banner__frame--video { position: relative; border-block: 1px solid var(--tot-rule); background: var(--tot-ink); }
.tot-rt-banner__frame--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tot-rt-partners { background: var(--tot-sand); border-bottom: 1px solid var(--tot-rule); }
.tot-rt-partners .tot-rt-heading { margin-bottom: 2.5rem; }
.tot-partners__note { margin-bottom: 1.5rem; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-slate); }
.tot-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; list-style: none; }
@media (min-width: 640px) { .tot-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tot-partners { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tot-partners__logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tot-cream); border: 1px solid var(--tot-rule); transition: border-color 0.15s; }
a.tot-partners__logo:hover { border-color: var(--tot-ink); }
.tot-partners__logo img { max-width: 100%; max-height: 100%; padding: 0.75rem; object-fit: contain; }
.tot-partners__name { padding: 0.75rem; font-family: var(--tot-serif); text-align: center; color: var(--tot-ink); }

.tot-rt-closing { background: var(--tot-ink); color: var(--tot-cream); }
.tot-rt-closing__inner { max-width: 64rem; margin-inline: auto; padding: 6rem 1.5rem; text-align: center; }
@media (min-width: 768px) { .tot-rt-closing__inner { padding: 8rem 2.5rem; } }
.tot-rt-closing__title { font-size: 2.25rem; line-height: 1.25; color: var(--tot-cream); }
@media (min-width: 768px) { .tot-rt-closing__title { font-size: 3.75rem; line-height: 1; } }
.tot-rt-closing__text { max-width: 42rem; margin: 1.5rem auto 0; color: rgba(251, 251, 249, 0.8); }
.tot-rt-closing__btn { margin-top: 2.5rem; padding-inline: 2rem; }

/* ---------- 27. Compact inner-page hero ----------
   Shorter heading band for inner pages (The Initiative, The Story, News & Resources,
   Contact, Discussions, Petitions, Privacy, discussion pages, archives, search). */
.tot-hero .tot-hero__inner,
.tot-hero--gradient .tot-hero__inner,
.tot-hero .tot-hero__inner--narrow { padding-block: 2.5rem; }
@media (min-width: 768px) {
	.tot-hero .tot-hero__inner,
	.tot-hero--gradient .tot-hero__inner,
	.tot-hero .tot-hero__inner--narrow { padding-block: 3.5rem; }
}

/* Small label with a short terracotta rule. */
.tot-hero .tot-hero__eyebrow,
.tot-hero .tot-hero__inner--narrow .tot-hero__eyebrow { gap: 0.75rem; margin-bottom: 0.875rem; }
.tot-hero .tot-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
}
.tot-hero .tot-hero__eyebrow .tot-icon { margin-left: -0.25rem; }

.tot-hero .tot-hero__title,
.tot-hero .tot-hero__inner--narrow .tot-hero__title,
.tot-hero .tot-hero__title--md {
	max-width: 52rem;
	font-size: 2.25rem;
	line-height: 1.08;
}
@media (min-width: 768px) {
	.tot-hero .tot-hero__title,
	.tot-hero .tot-hero__inner--narrow .tot-hero__title,
	.tot-hero .tot-hero__title--md { font-size: 3rem; line-height: 1.06; }
}
@media (min-width: 1024px) {
	.tot-hero .tot-hero__title { font-size: 3.5rem; }
}
.tot-hero .tot-hero__inner--xwide .tot-hero__title { max-width: 60rem; }

.tot-hero .tot-hero__text,
.tot-hero .tot-hero__inner--narrow .tot-hero__text { margin-top: 1rem; font-size: 1rem; line-height: 1.6; }
@media (min-width: 768px) {
	.tot-hero .tot-hero__text,
	.tot-hero .tot-hero__inner--narrow .tot-hero__text { font-size: 1.125rem; }
	.tot-hero .tot-hero__text--lg { font-size: 1.1875rem; }
}
.tot-hero .tot-hero__meta { margin-top: 0.75rem; }
.tot-hero .tot-hero__actions { margin-top: 1.75rem; }
.tot-hero .tot-hero__search { margin-top: 1.5rem; }

/* Content right after the compact hero starts a little closer, to keep the rhythm. */
.tot-hero + .tot-section .tot-section__inner { padding-top: 2.5rem; }
@media (min-width: 768px) { .tot-hero + .tot-section .tot-section__inner { padding-top: 3.5rem; } }
.tot-hero + .tot-section .tot-prose-section { padding-top: 2.5rem; }
@media (min-width: 768px) { .tot-hero + .tot-section .tot-prose-section { padding-top: 3.5rem; } }
.tot-hero + .tot-section .tot-contact { padding-top: 2.5rem; }
@media (min-width: 768px) { .tot-hero + .tot-section .tot-contact { padding-top: 3.5rem; } }

/* ---------- 28. Discussion cards with image (as on the live site) ---------- */
.tot-event-card__side { position: relative; overflow: hidden; }
.tot-event-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s ease; }
/* The card image is shown whole (wide banners keep their title) over a soft, blurred copy of itself. */
.tot-event-card.has-image .tot-event-card__side::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--tot-media-bg) center / cover no-repeat;
	filter: blur(22px) saturate(0.85);
	opacity: 0.6;
}
.tot-event-card.has-image .tot-event-card__side { background: #e4dbcf; }
.tot-event-card.has-image .tot-event-card__shade { display: none; }
.tot-event-card.has-image .tot-event-card__label {
	align-self: flex-start;
	padding: 0.375rem 0.625rem;
	background: rgba(251, 251, 249, 0.92);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.tot-event-card.has-image:hover .tot-event-card__img { transform: scale(1.02); }
.tot-event-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 18, 36, 0.8), rgba(11, 18, 36, 0.1) 55%, transparent); }
.tot-event-card__label { position: relative; }
.tot-event-card__side-title { position: relative; font-family: var(--tot-serif); font-size: 1.875rem; line-height: 1.2; color: var(--tot-cream); }
@media (min-width: 768px) { .tot-event-card__side-title { font-size: 2.25rem; line-height: 1.111; } }
@media (min-width: 768px) { .tot-event-card.has-image .tot-event-card__side { min-height: 18.75rem; } }

.tot-event-card__heading { font-size: 1.5rem; line-height: 1.25; color: var(--tot-ink); transition: color 0.15s; }
@media (min-width: 768px) { .tot-event-card__heading { font-size: 1.875rem; } }
.tot-event-card:hover .tot-event-card__heading { color: var(--tot-terracotta); }
.tot-event-card__body .tot-event-card__facts { flex-direction: row; flex-wrap: wrap; gap: 0.75rem 2.25rem; margin-top: 1.25rem; }
.tot-event-card__body .tot-event-card__text { margin-top: 1.5rem; }

/* ---------- 29. Responsive & accessibility fixes (audit) ---------- */
/* Committee cards shrink on very small phones instead of pushing the page sideways. */

/* Bigger tap areas (at least 24px, WCAG 2.2) without changing the layout. */
.tot-wordmark { padding-block: 0.5rem; margin-block: -0.5rem; }
.tot-back,
.tot-rt-fact__link { padding-block: 0.4375rem; margin-block: -0.4375rem; }
.tot-check input,
.tot-form__consent input { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }

/* ---------- 30. Compact article & topic header ----------
   Back link and category share one line; smaller title and tighter spacing
   (History Library articles and The Initiative topics). */
.tot-article__header { background: linear-gradient(180deg, var(--tot-sand) 0%, var(--tot-cream) 100%); }
.tot-article__header-inner,
.tot-article__header-inner--topic { padding-block: 2.25rem 2.5rem; }
@media (min-width: 768px) {
	.tot-article__header-inner,
	.tot-article__header-inner--topic { padding-block: 3rem 3.25rem; }
}

.tot-article__topline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
}
.tot-article__topline .tot-article__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
}
.tot-article__topline .tot-article__eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	background: var(--tot-rule);
	background: color-mix(in srgb, var(--tot-slate) 35%, transparent);
}

.tot-article__title {
	max-width: 48rem;
	margin-top: 1.125rem;
	font-size: 2rem;
	line-height: 1.1;
}
@media (min-width: 768px) { .tot-article__title { font-size: 2.75rem; line-height: 1.06; } }
@media (min-width: 1024px) { .tot-article__title { font-size: 3rem; } }

.tot-article__teaser { max-width: 42rem; margin-top: 0.875rem; font-size: 1rem; line-height: 1.6; }
@media (min-width: 768px) {
	.tot-article__teaser { font-size: 1.125rem; }
	.tot-article__teaser--lg { font-size: 1.1875rem; line-height: 1.55; }
}

/* Body and topic image start a little closer to the shorter header. */
.tot-article__body { padding-top: 2.25rem; }
@media (min-width: 768px) { .tot-article__body { padding-top: 2.75rem; } }
.tot-topic__hero { padding-top: 1.75rem; }
@media (min-width: 768px) { .tot-topic__hero { padding-top: 2.25rem; } }

/* ---------- 31. Home: Panel Discussion card uses the discussion's banner ----------
   The banner is wide with its title on the left, so show it whole (never cropped)
   over a soft, blurred copy of itself that fills the rest of the frame. */
.tot-feature__media--panel { position: relative; display: flex; align-items: center; background: #e4dbcf; }
.tot-feature__media--panel::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--tot-media-bg) center / cover no-repeat;
	filter: blur(22px) saturate(0.85);
	opacity: 0.55;
}
.tot-feature__media--panel img { position: relative; height: auto; object-fit: contain; }
.tot-feature__card:hover .tot-feature__media--panel img { transform: none; }

/* ---------- 32. Pages that start without a heading band (Discussions) ---------- */
.tot-section--top .tot-section__inner { padding-top: 2.5rem; }
@media (min-width: 768px) { .tot-section--top .tot-section__inner { padding-top: 3.5rem; } }

/* ---------- 33. Discussion photo gallery ---------- */
.tot-rt-gallery { border-top: 1px solid var(--tot-rule); }
.tot-gallery__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 2rem; }
.tot-gallery__head .tot-rt-heading { margin-bottom: 0; }
.tot-gallery__count { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tot-slate); }

/* People's Voices (home page): vertical Shorts and Reels. */
.tot-reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; list-style: none; }
@media (min-width: 640px) { .tot-reels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
@media (min-width: 1024px) { .tot-reels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tot-reels__item { min-width: 0; }
.tot-reels__more { margin-top: 2.5rem; text-align: center; }
.tot-vgallery__frame.tot-vgallery__frame--reel { aspect-ratio: 9 / 16; }
.tot-reels__title { margin-top: 0.875rem; font-family: var(--tot-serif); font-size: 1.0625rem; line-height: 1.35; color: var(--tot-ink); }
.tot-reels__by { margin-top: 0.25rem; font-size: 0.875rem; color: var(--tot-slate); }

/* Video gallery (after the photo gallery): cover + play button; the player loads on click. */
.tot-rt-videos { background: var(--tot-sand); border-top: 1px solid var(--tot-rule); border-bottom: 1px solid var(--tot-rule); }
.tot-vgallery { display: grid; gap: 2rem; list-style: none; }
@media (min-width: 640px) { .tot-vgallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
@media (min-width: 1024px) { .tot-vgallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
.tot-vgallery__item { min-width: 0; }
.tot-vgallery__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tot-ink); }
.tot-vgallery__frame > iframe,
.tot-vgallery__frame > video,
.tot-vgallery__frame > .tot-vgallery__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tot-vgallery__frame > video { background: var(--tot-ink); }
/* Other sites' players (e.g. TikTok) set their own size once loaded. */
.tot-vgallery__frame--embed.is-playing { aspect-ratio: auto; overflow: visible; background: none; }
.tot-vgallery__frame--embed.is-playing > iframe { position: static; width: 100%; aspect-ratio: 16 / 9; height: auto; }
.tot-vgallery__frame--embed.is-playing > blockquote { margin: 0 auto; }
.tot-vgallery__play {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--tot-ink);
	color: var(--tot-cream);
	cursor: pointer;
}
.tot-vgallery__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.3s; }
.tot-vgallery__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.1)); }
.tot-vgallery__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 999px;
	background: var(--tot-terracotta);
	color: var(--tot-white);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
	transition: transform 0.2s, background 0.2s;
}
.tot-vgallery__icon .tot-icon { margin-left: 0.15rem; }
.tot-vgallery__play:hover .tot-vgallery__cover { transform: scale(1.03); }
.tot-vgallery__play:hover .tot-vgallery__icon { transform: scale(1.08); background: var(--tot-terracotta-dark); }
.tot-vgallery__play:focus-visible { outline: 3px solid var(--tot-terracotta); outline-offset: 3px; }
.tot-vgallery__title { margin-top: 1rem; font-family: var(--tot-serif); font-size: 1.125rem; line-height: 1.35; color: var(--tot-ink); }

.tot-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 15rem;
	grid-auto-flow: row dense;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.tot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 12rem; }
	.tot-gallery__item:nth-child(9n + 1) { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1024px) {
	.tot-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 14rem; gap: 1rem; }
	/* Every block of nine opens with a large photo, alternating left and right. */
	.tot-gallery__item:nth-child(18n + 10) { grid-column: 2 / span 2; }
}
.tot-gallery__item { min-width: 0; margin: 0; }
.tot-gallery__item[hidden] { display: none; }

.tot-gallery__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--tot-ink);
	cursor: zoom-in;
	outline-offset: 3px;
}
.tot-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
.tot-gallery__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 18, 36, 0.55), rgba(11, 18, 36, 0) 55%);
	opacity: 0;
	transition: opacity 0.3s;
}
.tot-gallery__zoom {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(251, 251, 249, 0.92);
	color: var(--tot-ink);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.25s, transform 0.25s;
}
.tot-gallery__caption {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0.875rem;
	z-index: 1;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--tot-cream);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.3s, transform 0.3s;
}
.tot-gallery__link:hover .tot-gallery__img,
.tot-gallery__link:focus-visible .tot-gallery__img { transform: scale(1.04); }
.tot-gallery__link:hover::after,
.tot-gallery__link:focus-visible::after,
.tot-gallery__link:hover .tot-gallery__zoom,
.tot-gallery__link:focus-visible .tot-gallery__zoom,
.tot-gallery__link:hover .tot-gallery__caption,
.tot-gallery__link:focus-visible .tot-gallery__caption { opacity: 1; transform: none; }
@media (hover: none) { .tot-gallery__zoom { opacity: 1; transform: none; } }
.tot-gallery__more { margin-top: 2rem; text-align: center; }

/* Full-screen viewer */
.tot-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 22, 0.94); animation: tot-lightbox-in 0.2s ease-out; }
.tot-lightbox[hidden] { display: none; }
@keyframes tot-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.tot-lightbox__panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem 1.5rem; outline: none; }
@media (min-width: 768px) { .tot-lightbox__panel { padding: 3.5rem 5.5rem 2rem; } }
.tot-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 0.875rem; max-width: 100%; max-height: 100%; margin: 0; }
.tot-lightbox__img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); transition: opacity 0.2s; }
.tot-lightbox__img.is-loading { opacity: 0.35; }
.tot-lightbox__caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; max-width: 48rem; font-size: 0.875rem; line-height: 1.5; text-align: center; color: rgba(251, 251, 249, 0.85); }
.tot-lightbox__counter { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(251, 251, 249, 0.55); }
.tot-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(251, 251, 249, 0.25);
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.55);
	color: var(--tot-cream);
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}
.tot-lightbox__btn:hover,
.tot-lightbox__btn:focus-visible { background: var(--tot-terracotta); border-color: var(--tot-terracotta); }
.tot-lightbox__btn--close { top: 0.875rem; right: 0.875rem; }
.tot-lightbox__btn--prev,
.tot-lightbox__btn--next { top: 50%; margin-top: -1.5rem; }
.tot-lightbox__btn--prev { left: 0.75rem; }
.tot-lightbox__btn--next { right: 0.75rem; }
@media (max-width: 767px) {
	.tot-lightbox__btn--prev,
	.tot-lightbox__btn--next { top: auto; bottom: 1rem; margin-top: 0; }
	.tot-lightbox__panel { padding-bottom: 5rem; }
	.tot-lightbox__img { max-height: calc(100vh - 12rem); }
}


/* ---------- 34. Home: On Air (radio interviews) ---------- */
.tot-audio-grid { display: grid; gap: 1.25rem; }
@media (min-width: 960px) { .tot-audio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tot-audio {
	display: flex;
	gap: 1rem;
	min-width: 0;
	padding: 0.625rem;
	background: var(--tot-sand);
	border: 1px solid var(--tot-rule);
	border-radius: 4px;
}
.tot-audio__art {
	display: grid;
	flex: none;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	overflow: hidden;
	background: var(--tot-white);
	color: var(--tot-slate);
}
@media (min-width: 640px) { .tot-audio__art { width: 7.75rem; height: 7.75rem; } }
.tot-audio__art img { width: 100%; height: 100%; object-fit: cover; }

.tot-audio__main { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.tot-audio__head { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; }

.tot-audio__play {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 50%;
	background: var(--tot-terracotta);
	color: var(--tot-white);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
@media (min-width: 640px) { .tot-audio__play { width: 3.25rem; height: 3.25rem; } }
.tot-audio__play:hover { background: var(--tot-terracotta-dark); transform: scale(1.04); }
.tot-audio__play:focus-visible { outline: 2px solid var(--tot-ink); outline-offset: 2px; }
.tot-audio__play svg { fill: currentColor; stroke: none; }
.tot-audio__icon-play { margin-left: 3px; }
.tot-audio__icon-pause,
.tot-audio.is-playing .tot-audio__icon-play { display: none; }
.tot-audio.is-playing .tot-audio__icon-pause { display: block; }
.tot-audio.is-loading .tot-audio__play { animation: tot-audio-pulse 1s ease-in-out infinite; }
@keyframes tot-audio-pulse { 50% { opacity: 0.6; } }

.tot-audio__meta { display: flex; flex: 1; flex-direction: column; min-width: 0; padding-top: 0.125rem; }
.tot-audio__source {
	overflow: hidden;
	color: var(--tot-slate);
	font-size: 0.8125rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.tot-audio__source { text-decoration: underline; text-underline-offset: 2px; }
a.tot-audio__source:hover { color: var(--tot-terracotta); }
.tot-audio__title {
	overflow: hidden;
	color: var(--tot-ink);
	font-family: var(--tot-sans);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 639px) {
	/* Phones: up to two lines instead of one cut-off line. */
	.tot-audio__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
}
@media (min-width: 640px) { .tot-audio__title { font-size: 1.125rem; } }
.tot-audio__label {
	flex: none;
	max-width: 40%;
	overflow: hidden;
	padding-top: 0.125rem;
	color: var(--tot-slate);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
@media (max-width: 479px) { .tot-audio__label { display: none; } }

.tot-audio__wave {
	position: relative;
	height: 2.75rem;
	cursor: pointer;
	touch-action: none;
}
@media (min-width: 640px) { .tot-audio__wave { height: 3.75rem; } }
.tot-audio__wave:focus-visible { outline: 2px solid var(--tot-ink); outline-offset: 2px; }
.tot-audio__bars { position: absolute; inset: 0; width: 100%; height: 100%; fill: #8a8580; }
.tot-audio__bars .tot-audio__reflect { opacity: 0.45; }
.tot-audio__bars--played { fill: var(--tot-terracotta); clip-path: inset(0 calc(100% - var(--tot-audio-p, 0%)) 0 0); }
.tot-audio__wave:hover .tot-audio__bars:not(.tot-audio__bars--played) { fill: #6f6a65; }
.tot-audio__time {
	position: absolute;
	bottom: 18%;
	padding: 0.0625rem 0.25rem;
	background: rgba(28, 25, 23, 0.85);
	color: var(--tot-white);
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	pointer-events: none;
}
.tot-audio__time--total { right: 0; }
.tot-audio__time--now { left: 0; background: var(--tot-terracotta); }
.tot-audio__time[hidden] { display: none; }
@media (max-width: 379px) {
	.tot-audio { gap: 0.75rem; }
	.tot-audio__art { width: 4.5rem; height: 4.5rem; }
	.tot-audio__play { width: 2.375rem; height: 2.375rem; }
	.tot-audio__head { gap: 0.5rem; }
}

/* Discussion that is not live yet: notice for logged-in editors (visitors never see the page). */
.tot-preview-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.75rem;
	padding: 0.625rem var(--tot-gutter);
	background: var(--tot-terracotta);
	color: var(--tot-white);
	font-family: var(--tot-sans);
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: center;
}
.tot-preview-notice strong { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; }
.tot-preview-notice a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }