.ptc-carta {
	background: #2b201b;
}

/* Hero ---------------------------------------------------------------- */

.ptc-carta-hero {
	position: relative;
	z-index: 1;
	aspect-ratio: 1920 / 1000;
	min-height: 560px;
	overflow: hidden;
	color: #fff;
}

/* Framed a bit lower than dead center so the part of the photo that
   ends up sitting behind the notch cutout (the last ~68px of this
   section, under .ptc-carta-letter) is actually the cow/eye, not just
   empty blurred background. */
/* A filter on the image itself (not a gradient ::before, darkest at the
   bottom) keeps the PSD's lost dark treatment even across the whole
   photo — a bottom-heavy gradient made the sliver of this photo
   revealed through .ptc-carta-letter's own notch read as a noticeably
   darker patch poking into it. */
.ptc-carta-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 65%;
	filter: brightness(.72) saturate(1.05);
}

.ptc-carta-hero__copy {
	position: absolute;
	z-index: 2;
	top: 45%;
	left: 19%;
	max-width: 620px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.ptc-carta-hero__copy h1 {
	font-family: var(--ptc-font-display);
	font-size: clamp(2.3rem, 4.4vw, 5rem);
	font-style: italic;
	font-weight: 500;
	line-height: .85;
	letter-spacing: -.02em;
	margin: 0 0 22px;
}

.ptc-carta-hero__copy p {
	font-family: var(--ptc-font-display);
	font-style: italic;
	font-size: clamp(1rem, 1.5vw, 1.4rem);
	line-height: 1.35;
	margin: 0;
}

/* Letter ---------------------------------------------------------------- */

/* Per the source PSD, the paper texture and the letter text are layered
   directly on top of this same photo — not a separate section below it
   — and so is the support form further down. Height is no longer a
   fixed aspect-ratio matched to the photo's own native size; instead
   .ptc-carta-letter__text and .ptc-carta-support are normal in-flow
   content (nothing else in this section is), so the section's real
   height comes from however tall the actual Customizer-edited text
   turns out to be — and __bg (position: absolute, inset: 0) stretches
   via object-fit: cover to always fully cover exactly that height.
   That's what makes this safe at any text length or screen width: the
   photo can never be shorter than the content needs, the way a
   fixed-aspect-ratio box could. object-position: top keeps that crop
   anchored to the photo's own top edge — the curved cutout baked into
   it (meant to sit over the previous section, revealing the hero
   through it) lives right there, and center-cropping (the default)
   would just cut it off once this box is much shorter than the photo's
   native 1920×4099 proportions, which it usually is now. Still pulled
   up over the hero's bottom edge for that same cutout to actually
   overlap it. */
.ptc-carta-letter {
	position: relative;
	z-index: 2;
	margin-top: calc(-3.54vw * var(--ptc-notch-x));
}

.ptc-carta-letter__bg {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* Holds the letter copy straight on top of the section photo — no paper
   texture and no scrim behind it. Both were removed: the texture distorted
   when stretched and the scrim, being a flat panel with a soft edge, read as
   a second sheet of paper laid over the photo.
   Neither is needed for legibility. Measured over the column the letter
   actually occupies, carta_bg.png's photo peaks at a relative luminance of
   61/255, which puts white text at 10.8:1 against its brightest pixel —
   well clear of the 4.5:1 AA threshold, and that is the worst case, not the
   average (4.7:1 equivalent on average). A plain in-flow block, so it is simply as tall
   as the text at any length. */
.ptc-carta-letter__text {
	position: relative;
}

/* max-width down from 900px and the type up: at 900px wide and ~18px the
   letter ran to well over 110 characters a line, which is the main reason
   it read as a wall of text. ~78ch at a larger size is a normal reading
   measure, and the extra line-height/paragraph spacing gives the letter
   the rhythm of something meant to be read rather than skimmed. */
.ptc-carta-letter__inner {
	position: relative;
	z-index: 2;
	max-width: 78ch;
	color: #fff;
	padding-top: 320px;
	padding-bottom: 90px;
}

.ptc-carta-letter__inner h2 {
	font-family: var(--ptc-font-body);
	font-size: clamp(1.15rem, 1.75vw, 1.8rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .01em;
	color: #fff;
	margin: 0 0 1.4em;
}

.ptc-carta-letter__body p {
	font-size: clamp(1rem, 1.2vw, 1.32rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 1.35em;
}

.ptc-carta-letter__body p strong {
	font-weight: 700;
	color: #fff;
}

.ptc-carta-letter__body h3 {
	font-family: var(--ptc-font-body);
	font-size: clamp(.95rem, 1.1vw, 1.2rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #fff;
	margin: 1.8em 0 .8em;
}

.ptc-carta-letter__body ol {
	list-style: none;
	counter-reset: carta-item;
	margin: 0 0 .6em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .9em;
}

.ptc-carta-letter__body ol li {
	position: relative;
	padding-left: 1.6em;
	font-size: clamp(1rem, 1.2vw, 1.32rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, .92);
}

.ptc-carta-letter__body ol li::before {
	counter-increment: carta-item;
	content: counter(carta-item) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: #fff;
}

.ptc-carta-letter__body ol li strong {
	font-weight: 700;
	color: #fff;
}

/* The seam "detail": a small rounded notch is baked into the photo's own
   top edge (meant to sit over the hero), with a scroll-down button
   nested in it. Position, size, color and z-index all come from the
   shared .ptc-scroll-down class (main.css) now — nothing page-specific
   left to add here. */

/* Support / contact form -------------------------------------------------- */

/* Normal in-flow content too (see the big comment on .ptc-carta-letter
   above) — simply comes after .ptc-carta-letter__inner, at any content
   length or screen width, instead of needing a bottom:% guess at where
   the text was likely to end. Sits on top of the same photo/paper
   background as the letter text (both cover the whole section), not
   its own separate colored block. */
.ptc-carta-support {
	position: relative;
	z-index: 2;
	padding: 20px 24px 90px;
}

.ptc-carta-support .ptc-contact-form--transparent {
	background: none;
	padding: 0;
	margin-bottom: 8rem;
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 880px) {
		/* The notch that used to be cut into the artwork itself. The phone
		   crops the client supplied are flat JPEGs with no transparency, so
		   the seam lost its relief; this cuts the same shape back in with a
		   mask. Two layers: the notch sheet across the top (or bottom) strip,
		   plus a solid block covering the rest of the image, unioned by the
		   default add compositing — a single-layer mask would hide everything
		   the sheet doesn't reach. 6.25vw is the sheet's own 120/1920 height,
		   scaled by the same --ptc-notch-x the seams use. */
	.ptc-carta-letter__bg {
		-webkit-mask-image: url('../images/decor/notch-top.svg'), linear-gradient(#000, #000);
		-webkit-mask-repeat: no-repeat, no-repeat;
		-webkit-mask-position: top center, bottom center;
		-webkit-mask-size: var(--ptc-notch-scale) auto, 100% calc(100% - var(--ptc-notch-x) * 6.25vw);
		mask-image: url('../images/decor/notch-top.svg'), linear-gradient(#000, #000);
		mask-repeat: no-repeat, no-repeat;
		mask-position: top center, bottom center;
		mask-size: var(--ptc-notch-scale) auto, 100% calc(100% - var(--ptc-notch-x) * 6.25vw);
	}

	/* Mobile keeps the same photo-with-overlaid-text layout as desktop
	   (an earlier version split this into a stacked photo-then-caption
	   flow instead — rejected, since it no longer read as a background
	   photo at all). The photo (__bg) stays position: absolute; inset: 0
	   with its existing height: 100% — that resolves fine against a
	   content-driven parent height because the CSS percentage-height
	   rule specifically carves out absolutely positioned children (only
	   non-absolute children fall back to "auto" against an auto-height
	   containing block). The copy block becomes a normal in-flow
	   element (instead of also being absolutely positioned) so it can
	   actually establish that parent height, and the section's fixed
	   aspect-ratio is dropped so it can grow to fit. Mobile wraps this
	   copy onto far more lines than desktop ever has to make room for,
	   so the photo now crops tighter to fill the resulting taller,
	   narrower box — the accepted trade-off for keeping the text on
	   the photo instead of below it. */
	.ptc-carta-hero {
		aspect-ratio: auto;
		/* The banners now carry a 9:16 phone crop (see ptc_section_photo),
		   but the section's height still came only from the copy inside it —
		   about 427px, which squeezed a portrait photo into a letterbox and
		   left no room for the carved notch the scroll-down button sits in.
		   85svh gives the banner its own height: most of the screen, the
		   photo close to its real proportions, and space under the text for
		   that notch. svh (not vh) because on iOS vh measures the viewport
		   with the browser bars collapsed, so a vh-sized banner is always
		   taller than what's actually visible when the page loads. */
		min-height: 85vh;
		min-height: 85svh;
	}

	/* padding-top clears .ptc-site-header, which floats position: absolute
	   over this hero at every width (transparent background, 193px tall
	   on a phone with its nav toggle) — the site-wide 48px this used to
	   inherit left the title rendering underneath/behind it. */
	.ptc-carta-hero__copy {
		position: relative;
		top: auto;
		left: auto;
		max-width: none;
		margin-bottom: 0;
		padding: 220px 24px 48px;
		transform: none;
	}

	.ptc-carta-letter__inner {
		padding-top: 90px;
		padding-bottom: 40px;
	}

	.ptc-carta-support {
		padding: 16px 24px 64px;
	}
}