/**
 * Creative Associates: layout and component styles.
 * Colours, fonts and sizes are theme.json presets.
 *
 * Two kinds of page:
 * - The home page (front-page template, header-home part): photo bands and
 *   white panels, with a floating logo and nav. Everything under "Home page"
 *   below applies only there.
 * - Every other page (page, single, index, home, 404 templates, header
 *   part): an ordinary WordPress layout with a header whose look is set per
 *   page. See "Other pages".
 * Both headers use the same menu (".ca-nav"): links, menu button and the
 * open phone menu look the same everywhere.
 */

:root {
	--ca-band-h: clamp(240px, 22vw, 320px);
	/* One device pixel (site.js sets it from the screen's pixel ratio), so
	   edges can be snapped to the screen's real pixels. */
	--ca-dp: 1px;
	/* Whole pixels, so the logo, nav and menu button render crisply. */
	--ca-gutter: round(nearest, max(1.25rem, 10vw, calc(50vw - 540px)), 1px);
	--ca-top: round(nearest, calc(var(--wp-admin--admin-bar--height, 0px) + clamp(1rem, 2.6vw, 2.5rem)), var(--ca-dp));
	--ca-logo-h: clamp(72px, 9vw, 128px);
	--ca-page-logo-h: clamp(64px, 6vw, 88px);
	--ca-nav-size: clamp(14px, 1.25vw, 17px);
	/* Space between the bottom of the nav and the top of the white panel. */
	--ca-nav-gap: 2rem;
	/* Distance from the nav's bottom edge to its text baseline: the link's
	   bottom padding plus half-leading and descent (line-height 1.5, Roboto
	   Condensed). The logo's bottom sits on that baseline. */
	--ca-nav-baseline: calc(0.25rem + var(--ca-nav-size) * 0.441);
	--ca-focus: var(--wp--preset--color--ink);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
}

:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--ca-focus);
	outline-offset: 2px;
}

strong,
b {
	font-weight: 600;
}

.wp-site-blocks > * {
	margin-block: 0;
}

/* Menu and close buttons (both headers): icons drawn in CSS. The bars'
   thickness, gaps and position are rounded to whole device pixels, so all
   three come out identical at any screen density (on many phones a CSS pixel
   is 2.625 device pixels, and unrounded bars render at different weights). */
.wp-block-navigation__responsive-container-open {
	--ca-bar: round(nearest, 2px, var(--ca-dp));
	--ca-bar-gap: round(nearest, 4px, var(--ca-dp));
	--ca-icon-h: calc(3 * var(--ca-bar) + 2 * var(--ca-bar-gap));
	--ca-icon-top: round(down, calc(22px - var(--ca-icon-h) / 2), var(--ca-dp));
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	display: none;
}

/* The top bar, with the other two as shadows of it. Plain fills, not
   borders: browsers round border widths on their own terms. */
.wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	top: var(--ca-icon-top);
	left: calc(50% - 9px);
	width: 18px;
	height: var(--ca-bar);
	background: currentColor;
	box-shadow:
		0 calc(var(--ca-bar) + var(--ca-bar-gap)) 0 currentColor,
		0 calc(2 * (var(--ca-bar) + var(--ca-bar-gap))) 0 currentColor;
}

.wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 10px);
	width: 20px;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}

.wp-block-navigation__responsive-container-close::after {
	transform: rotate(-45deg);
}

/* The menu becomes a menu button below 1100px (core switches at 600px),
   where the six links no longer fit on one line beside the logo. */
@media (min-width: 600px) and (max-width: 1099.98px) {
	.ca-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.ca-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Home page
   =========================================================================

   Layering (one stacking context, the root):
     1  photo bands
     2  logo and nav (fixed, transparent)
     3  white content panels, which slide over the logo and nav
     4  logo or nav while it holds keyboard focus
     5  the phone menu button, always reachable
   The logo and nav are positioned separately (not inside one fixed header),
   because a fixed parent would trap the menu button below the panels.
   Core Navigation also puts the block's class ("ca-nav") on its inner list,
   so rules for the nav element itself say nav.ca-nav. The menu's look is
   shared with other pages; its position here is under ".ca-header". */

/* Sections stack without gaps: band, panel, band, panel... */
.ca-front > *,
.wp-site-blocks .ca-section,
.wp-site-blocks .ca-section > * {
	margin-block: 0;
}

/* ---------- Floating logo and nav ---------- */

.ca-header {
	position: absolute;
	inset: 0 0 auto;
	height: 0;
}

/* The logo's bottom sits on the nav's text baseline, which sits just above
   the white panel; on phones, where the nav is a button, it keeps the same
   place. */
.ca-logo {
	position: fixed;
	z-index: 2;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ca-band-h) - var(--ca-nav-gap) - var(--ca-nav-baseline));
	left: var(--ca-gutter);
	margin: 0;
	transform: translateY(-100%);
}

.ca-logo img {
	display: block;
	width: auto;
	height: var(--ca-logo-h);
}

nav.ca-nav {
	--ca-focus: var(--wp--preset--color--gold);
	margin: 0; /* not the header group's block gap */
	font-size: var(--ca-nav-size);
}

.ca-header nav.ca-nav {
	position: fixed;
	z-index: 2;
	top: var(--ca-top);
	right: var(--ca-gutter);
	color: var(--wp--preset--color--white);
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
}

.ca-logo:focus-within,
.ca-header nav.ca-nav:focus-within {
	z-index: 4;
}

.ca-logo a:focus {
	outline: none;
}

.ca-logo a:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 4px;
}

/* Menu links: keyboard focus is an underline, not a box. */
.ca-nav .wp-block-navigation-item__content:focus {
	outline: none;
}

.ca-nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.ca-nav .wp-block-navigation__container {
	gap: 0.4rem 1.5em;
}

.ca-nav .wp-block-navigation-item__content {
	padding-block: 0.25rem;
	line-height: 1.5;
	text-decoration: none;
}

.ca-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
}

/* Desktop: the nav's bottom edge sits var(--ca-nav-gap) above the band's
   bottom, so it lands just above the white panel at load and after every jump. */
@media (min-width: 1100px) {
	.ca-header nav.ca-nav {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ca-band-h) - var(--ca-nav-gap));
		transform: translateY(-100%);
	}
}

/* Phones and tablets: the menu button stays on top of everything. */
@media (max-width: 1099.98px) {
	.ca-header nav.ca-nav {
		z-index: 5;
	}
}

.ca-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	text-shadow: none;
}

.ca-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus {
	outline: none;
}

.ca-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--white), 0 0 0 4px var(--wp--preset--color--ink);
}

/* Open menu: full-screen black overlay. The close button sits where the
   home page's menu button is; the links are a left-aligned list below it. */
.ca-header nav.ca-nav:has(.is-menu-open),
.ca-site-header:has(.is-menu-open) {
	z-index: 10;
}

.ca-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	text-align: left;
	text-shadow: none;
}

.ca-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	min-height: 100%;
	padding: var(--ca-top) var(--ca-gutter) 2rem;
}

.ca-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

.ca-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 1.5rem;
}

/* The nav is right-justified on the band; the open menu reads left to right.
   (Core sets these on the list itself, via its items-justified-right class.) */
.ca-nav .is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	align-items: flex-start;
	gap: 0.25rem;
	font-size: 1.25rem;
	letter-spacing: 0.08em;
}

.ca-nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding-block: 0.6rem;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}

.ca-nav .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
}

/* In the Site Editor the floating header is shown as a plain dark strip, so
   the front page template isn't a jumble of overlapping text. */
.editor-styles-wrapper .ca-header {
	position: relative;
	height: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.5rem var(--ca-gutter);
	background: var(--wp--preset--color--black);
}

.editor-styles-wrapper .ca-logo,
.editor-styles-wrapper nav.ca-nav {
	position: static;
	transform: none;
}

/* In the Site Editor both menus show their links, whatever the canvas width,
   so they're easy to see and edit. */
.editor-styles-wrapper .ca-nav .wp-block-navigation__responsive-container-open {
	display: none;
}

.editor-styles-wrapper .ca-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: block;
}

/* ---------- Photo bands and white panels ---------- */

.ca-band {
	position: relative;
	z-index: 1;
	height: var(--ca-band-h);
	overflow: hidden;
	background: var(--wp--preset--color--black);
	scroll-margin-top: var(--wp-admin--admin-bar--height, 0px);
}

/* .wp-block-image prefix: core sets img { height: auto } at the same specificity. */
.wp-block-image.ca-band img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.wp-block-image.ca-band.is-focus-right img {
	object-position: 70% 50%;
}

.wp-block-image.ca-band.is-focus-far-right img {
	object-position: 88% 50%;
}

.ca-panel {
	position: relative;
	z-index: 3;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--white);
}

/* Section titles: wide-spaced capitals, grey with gold words. */
.ca-panel > h2.wp-block-heading {
	margin-block-end: 1.5rem;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 350;
	line-height: 1.6;
	letter-spacing: 0.5em;
	text-transform: uppercase;
}

@media (max-width: 599.98px) {
	.ca-panel > h2.wp-block-heading {
		letter-spacing: 0.3em;
	}
}

/* Media inside panels. */
.ca-panel .wp-block-video,
.ca-panel .wp-block-image {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ca-panel .wp-block-video video,
.ca-panel .wp-block-video img {
	display: block;
	width: 100%;
	height: auto;
}

.ca-panel :where(.wp-block-video, .wp-block-image) + p {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Click-to-play videos (case studies, reel): the button covering the poster
   is added by site.js; the native controls appear once the video plays. */
.ca-panel .wp-block-video {
	position: relative;
}

.ca-video-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.ca-video-play::before {
	content: "";
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.55);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ca-video-play::after {
	content: "";
	position: absolute;
	margin-left: 0.3rem;
	border-block: 0.85rem solid transparent;
	border-inline-start: 1.35rem solid var(--wp--preset--color--white);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ca-video-play:hover::before,
.ca-video-play:hover::after,
.ca-video-play:focus-visible::before,
.ca-video-play:focus-visible::after {
	opacity: 1;
}

.ca-video-play:focus-visible {
	outline-offset: -4px;
	outline-color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 6px var(--wp--preset--color--ink);
}

/* Grids: case studies and Polaroids. (The client logos are a gallery, which
   lays itself out: 2 columns on phones, 4 from 600px.) */
.ca-case-studies,
.ca-polaroids {
	display: grid;
	margin-block-start: var(--wp--preset--spacing--40);
}

.ca-panel .wp-block-gallery.ca-logos {
	--wp--style--unstable-gallery-gap: 2.5rem;
	gap: var(--wp--style--unstable-gallery-gap);
	margin-block-start: var(--wp--preset--spacing--40);
}

.ca-panel :is(.ca-case-studies, .ca-logos, .ca-polaroids) > * {
	min-width: 0;
	margin: 0;
}

.ca-case-studies {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50) 3.75rem;
}

.ca-polaroids {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
}

@media (min-width: 480px) {
	.ca-polaroids {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 782px) {
	.ca-case-studies {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ca-polaroids {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 3.5rem;
	}
}

.ca-case-study .wp-block-video {
	margin: 0;
	box-shadow: var(--wp--preset--shadow--card);
}

.ca-case-study p {
	margin-block-start: 1.5rem;
}

/* Client logos. */
.ca-logos img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bio portrait, floated beside the first paragraphs. A float goes to the
   panel's padding edge, so on wide screens it's moved in to the content edge,
   where the section title starts. */
.ca-panel .ca-portrait {
	width: clamp(110px, 16vw, 180px);
	margin: 0.4em 1.75rem 0.75rem max(0px, calc((100% - var(--wp--style--global--content-size, 1080px)) / 2));
}

.ca-portrait img {
	display: block;
	width: 100%;
	height: auto;
}

/* Contact and social icons. */
.ca-social {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ca-social .wp-social-link {
	color: #888;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.ca-social .wp-social-link a {
	padding: 0.35em;
}

.ca-social .wp-social-link:hover {
	color: var(--wp--preset--color--ink);
}

/* =========================================================================
   Polaroid image style (usable on any page)
   ========================================================================= */

.wp-block-image.is-style-polaroid {
	container-type: inline-size;
	margin: 0;
	padding: 3% 3% 0;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
}

.wp-block-image.is-style-polaroid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.wp-block-image.is-style-polaroid figcaption {
	margin: 0.3em 0 0.5em;
	color: #1e1e1e;
	font-family: var(--wp--preset--font-family--handwriting);
	font-size: clamp(0.95rem, 7cqi, 1.6rem);
	line-height: 1.3;
	text-wrap: balance;
	text-align: center;
}

/* =========================================================================
   Other pages: the header (logo left, menu right) and ordinary content.

   Each page picks its header's look in the editor's "Header" panel
   (inc/header.php adds the classes): white (default), dark ("is-dark", the
   palette's near-black), or
   transparent over the page's top photo ("is-transparent"); text colour
   automatic, dark ("has-dark-text") or white ("has-white-text"); a line
   underneath ("has-line"). Always: logo at the left gutter, the menu's text
   baseline (or the menu button's bottom) on the logo's bottom edge, and the
   same menu as the home page. The header scrolls away with the page.
   ========================================================================= */

.ca-site-header {
	--ca-header-fg: var(--wp--preset--color--ink);
	position: relative;
	z-index: 3;
	display: flex;
	align-items: last baseline;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: clamp(1rem, 2.6vw, 2.5rem) var(--ca-gutter) clamp(1rem, 2vw, 1.75rem);
	background: var(--wp--preset--color--white);
	color: var(--ca-header-fg);
}

.ca-site-header > * {
	margin: 0; /* not the group's block gap */
}

.ca-site-header.has-line {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ca-site-header.is-dark {
	--ca-header-fg: var(--wp--preset--color--white);
	background: var(--wp--preset--color--black);
}

.ca-site-header.is-dark.has-line {
	border-bottom-color: rgb(255 255 255 / 0.14);
}

/* Over the page's first block (a photo): out of the flow, at the very top. */
.has-transparent-header .wp-site-blocks {
	position: relative;
}

.ca-site-header.is-transparent {
	--ca-header-fg: var(--wp--preset--color--white);
	position: absolute;
	inset: 0 0 auto;
	background: none;
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
}

.ca-site-header.has-dark-text {
	--ca-header-fg: var(--wp--preset--color--ink);
	text-shadow: none;
}

.ca-site-header.has-white-text {
	--ca-header-fg: var(--wp--preset--color--white);
}

.ca-site-header__logo img {
	display: block;
	width: auto;
	height: var(--ca-page-logo-h);
}

.ca-site-header__logo a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.ca-site-header nav.ca-nav {
	color: var(--ca-header-fg);
}

/* On a white background a gold link would be hard to read: underline it. */
.ca-site-header:not(.is-dark, .is-transparent) .ca-nav .wp-block-navigation-item__content:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Below 1100px the menu is the button: its bottom on the logo's bottom. */
@media (max-width: 1099.98px) {
	.ca-site-header {
		align-items: flex-end;
	}
}

/* In the Site Editor the header shows as it does on a white page. */
.editor-styles-wrapper .ca-site-header {
	position: relative;
}

.ca-page {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.ca-page__header {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Under a transparent header the page starts with its photo, at the top.
   With no page title it starts straight after the header: a full-width
   block (a photo) meets the header, anything else keeps the usual space. */
.has-transparent-header .ca-page,
.has-no-page-title .ca-page {
	padding-block-start: 0;
}

.has-no-page-title:not(.has-transparent-header) .ca-page .wp-block-post-content > :first-child:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* =========================================================================
   Press (the blog): a photo band with the title, then cards; and posts.
   ========================================================================= */

/* ---------- Page header: a photo with the title over it ---------- */

.wp-block-cover.ca-page-hero {
	min-height: clamp(340px, 30vw, 460px);
	padding: 0 var(--ca-gutter) clamp(1.75rem, 3.5vw, 3rem);
	align-items: flex-end;
	background: var(--wp--preset--color--black);
}

/* A light shade at the top and bottom, so the menu and title read on any
   photo. */
.wp-block-cover.ca-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgb(0 0 0 / 0.35), transparent 35%, transparent 60%, rgb(0 0 0 / 0.3));
	pointer-events: none;
}

.ca-page-hero .wp-block-cover__inner-container {
	z-index: 2; /* above the shade */
	width: 100%;
}

.ca-page-hero h1.wp-block-heading {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: clamp(3rem, 8vw, 6.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Heading style "Gold underline": a short gold bar under the heading. */
.wp-block-heading.is-style-gold-underline::after {
	content: "";
	display: block;
	width: max(2.5rem, 1.25em);
	max-width: 100%;
	height: max(3px, 0.05em);
	margin-top: 0.25em;
	background: var(--wp--preset--color--gold);
}

.wp-block-heading.is-style-gold-underline.has-text-align-center::after {
	margin-inline: auto;
}

.wp-block-heading.is-style-gold-underline.has-text-align-right::after {
	margin-inline-start: auto;
}

/* The Blog: its page's own content (the photo and title), then the posts. */
.ca-blog-page-content {
	margin: 0;
}

.ca-press__body {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.ca-press__archive-title {
	margin-block-end: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 350;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* Cards: as many columns as fit (three at full width). The title's link
   covers the whole card, so each card is one link. */
.ca-press-grid.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-press-grid > li {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

.ca-press-grid > li > * {
	margin-block: 0;
}

.ca-press-card__image {
	margin-block-end: 1.25rem !important;
	overflow: hidden;
	background: var(--wp--preset--color--line);
}

.ca-press-card__image img {
	transition: transform 0.5s ease;
}

.ca-press-grid > li:hover .ca-press-card__image img {
	transform: scale(1.04);
}

.ca-press-card__date,
.ca-post__date,
.ca-post__eyebrow {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The gold rule before dates and the eyebrow link. */
.ca-press-card__date::before,
.ca-post__eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 2px;
	margin-inline-end: 0.6rem;
	vertical-align: middle;
	background: var(--wp--preset--color--gold);
}

.ca-press-card__title.wp-block-post-title {
	margin-block: 0.5rem 0.75rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.3;
}

.ca-press-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ca-press-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ca-press-grid > li:hover .ca-press-card__title a,
.ca-press-card__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.ca-press-card__title a:focus-visible {
	outline: none;
}

.ca-press-grid > li:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 0.75rem;
}

.ca-press-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
	line-height: 1.7;
}

.ca-press-pagination {
	margin-block-start: var(--wp--preset--spacing--50);
	gap: 0.5rem 1.25rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ca-press-pagination a {
	text-decoration: none;
}

.ca-press-pagination :is(a:hover, .current) {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* A post. */
.ca-post__header {
	margin-block-end: var(--wp--preset--spacing--40);
}

.ca-post__header > * {
	margin-block: 0;
}

.ca-post__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.ca-post__eyebrow a:hover {
	color: var(--wp--preset--color--ink);
}

.ca-post .wp-block-post-title {
	margin-block: 1rem 0.75rem;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.2;
}

.ca-post__image.wp-block-post-featured-image {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ca-post__image img {
	width: 100%;
	height: auto;
}

.ca-post__footer {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ca-post__footer > .wp-block-group {
	gap: 1rem 2rem;
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.ca-post__footer a {
	text-decoration: none;
}

.ca-post__footer a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.ca-press-card__image img {
		transition: none;
	}
}

.ca-post__footer .post-navigation-link__label {
	display: block;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ca-post__footer .post-navigation-link-next {
	margin-inline-start: auto;
	text-align: end;
}