/* ==========================================================================
   POTR shared base (loaded only on pages that use a POTR block)
   1u = 1% of the block's own width (container query unit), capped at 14.4px,
   so the design stops growing past 1440px. Desktop numbers = mockup px / 13.66.
   ========================================================================== */

.potr-s:not(#potr){
	--u: min(1cqw, 14.4px);
	--potr-gold: #ad8330;
	--potr-taupe: #e7ded9;
	--potr-dark: #21180e;
	--potr-sand: #f7f7f5;
	--potr-font-display: "Kudryashev Display", "Kudryashev Display Contrast", "POTR Display", "Bodoni Moda", "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
	--potr-font-body: "POTR Sans", "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	container-type: inline-size;
	container-name: potr;
	position: relative;
	box-sizing: border-box;
	margin-block: 0;
	max-width: none;
	color: #000;
	font-family: var(--potr-font-body);
	font-weight: 300;
	-webkit-text-size-adjust: 100%;
}

.potr-s *:not(#potr),
.potr-s *:not(#potr)::before,
.potr-s *:not(#potr)::after{
	box-sizing: border-box;
}

/* Neutralise theme margins/padding (zero specificity so block rules still win). */
.potr-s :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote):not(#potr){
	margin: 0;
	padding: 0;
}

/* Headings inside POTR blocks must not pick up the theme's heading font/size/weight/colour. */
.potr-s :where(h1, h2, h3, h4, h5, h6):not(#potr){
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

.potr-s :where(ul, ol):not(#potr){
	list-style: none;
}

.potr-s img:not(#potr){
	max-width: none;
}

/* Force full width if the theme doesn't support alignfull. */
.potr-s.potr-s--breakout:not(#potr){
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- Typography helpers ---------- */

.potr-display:not(#potr){
	font-family: var(--potr-font-display);
	font-weight: 400;
	font-variation-settings: "opsz" 24;
	font-optical-sizing: none;
	text-transform: none;
	color: inherit;
}

.potr-line:not(#potr){
	display: block;
}

.potr-line.is-caps:not(#potr){
	letter-spacing: calc(0.04em * var(--potr-ls-k, 1));
}

.potr-eyebrow:not(#potr){
	color: var(--potr-gold);
	font-weight: 300;
	font-size: max(16px, calc(var(--u) * 1.76));
	line-height: 1.2;
}

/* ---------- Pill button ---------- */

.potr-btn:not(#potr){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: max(48px, calc(var(--u) * 4.25));
	padding: 0 max(26px, calc(var(--u) * 4.06));
	border-radius: 999px;
	border: 0;
	background: var(--potr-btn-bg, var(--potr-gold));
	color: var(--potr-btn-text, #fff);
	font-family: var(--potr-font-body);
	font-weight: 700;
	font-size: max(16px, calc(var(--u) * 1.72));
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.potr-btn:hover:not(#potr){
	filter: brightness(1.08);
}

.potr-btn:focus-visible:not(#potr){
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.potr-btn--taupe:not(#potr){
	--potr-btn-bg: var(--potr-taupe);
	--potr-btn-text: #21180e;
}

.potr-btn--red:not(#potr){
	--potr-btn-bg: #ff0000;
}

.potr-btn--dark:not(#potr){
	--potr-btn-bg: var(--potr-dark);
}

/* ---------- Round play button ---------- */

.potr-play:not(#potr){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: calc(var(--u) * 3.95);
	height: calc(var(--u) * 3.95);
	min-width: 40px;
	min-height: 40px;
	border-radius: 50%;
	background: var(--potr-gold);
}

.potr-play:not(#potr)::before{
	content: "";
	display: block;
	margin-left: 8%;
	border-style: solid;
	border-width: 0.5em 0 0.5em 0.8em;
	border-color: transparent transparent transparent #fff;
	font-size: max(10px, calc(var(--u) * 1.15));
}