/* Rakish Light — Phase 4C styles: front page, projects archive,
   single project, project card. Tokens from theme.json; shared rules
   (panel, scrim, meta, labels) from rl.css. Owner: Phase 4C.
   No page background or body text colour set here, so per-page
   colours keep working.
   2026-11-10 design pass: sticky header, see-through splash panel,
   one splash video (see "Header" and "Front page: splash"). */

/* --------------------------------------------------------------------- */
/* Header: stays on top while scrolling (as on the original site)         */
/* --------------------------------------------------------------------- */
/* The legacy "Rakish Light — Appearance" must-use plugin pads the body by
   110px for the old Twenty Twenty fixed header. The new header is sticky
   and takes its own space, so cancel that padding. */
body { padding-top: 0 !important; }

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Keep it below the WordPress admin bar when logged in. */
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}
@media (max-width: 600px) {
	/* Admin bar scrolls away at this width. */
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}

/* Banner as on the original site (2026-11-11): taller (110px), see-through
   grey (black at 29%) so the page or video shows through, white type,
   larger title and menu. The theme's green band colours (rl.css) are
   overridden here; the mobile menu overlay keeps its solid band colour. */
.rl-header {
	background-color: rgb(0 0 0 / 0.29) !important;
	border-bottom: 0 !important;
	padding-top: 2.5rem !important;    /* ≈110px tall in all */
	padding-bottom: 2.5rem !important;
}
.rl-header .wp-block-site-title {
	font-size: 1.5rem;   /* 24px */
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}
.rl-header .wp-block-navigation {
	font-size: 1.125rem; /* 18px */
	font-weight: 500;
	--wp--style--block-gap: 25px;
	gap: 25px;
}
.rl-header,
.rl-header a,
.rl-header .wp-block-site-title a,
.rl-header .wp-block-navigation a { color: #FFFFFF; }
/* Logged-out visitors on the home page see the video right up to the top:
   the banner overlays it rather than pushing it down. */
body.home .wp-site-blocks > header.wp-block-template-part + main.rl-c-front { margin-top: 0; }
@media (max-width: 781px) {
	.rl-header { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
	.rl-header .wp-block-site-title { font-size: 1.25rem; }
	.rl-c-splash { --rl-head-h: 72px; }
	.admin-bar .rl-c-splash { --rl-head-h: calc(72px + 46px); }
}

/* --------------------------------------------------------------------- */
/* Front page: splash                                                     */
/* --------------------------------------------------------------------- */
.rl-c-front { padding-top: 0; }
.rl-c-front > .rl-c-splash { margin-block-start: 0; }
/* Splash starts right under the header, no gap. */
.wp-site-blocks > header.wp-block-template-part + main.rl-c-front { margin-block-start: 0; }

/* One video only: the legacy "Page Backgrounds" must-use plugin also puts
   the same running-press video behind the whole page (#rl-bg-video).
   On the front page the splash's own video is the one we keep (it has
   the Pause control). Clearing the Home page's "Full Background" video
   in the editor stops it loading at all; this hides it either way. */
body.home #rl-bg-video { display: none !important; }

/* As on the original site: the press video fills the window and stays
   put; the statement starts near the bottom of the first screen and
   scrolls up over it. The home page is just video + statement + footer. */
body.home { background-color: var(--rl-ink); } /* behind the video while it loads */
.rl-c-splash {
	/* height of what sits above the splash (header, + admin bar when
	   logged in); only used to place the arrow on the first screen */
	--rl-head-h: 107px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	padding: var(--wp--preset--spacing--40);
	/* first screen is all video; the statement starts a little below the
	   bottom edge of the window at every size (as on the original site) */
	padding-top: calc(100vh - var(--rl-head-h) + 12rem);
	padding-top: calc(100svh - var(--rl-head-h) + 12rem);
	/* room to scroll the statement up over the video before the footer */
	padding-bottom: 30vh;
	padding-bottom: 30svh;
}
.rl-c-splash > * { margin-block: 0; }

.rl-c-splash__video {
	position: fixed;
	inset: 0;
	margin: 0;
	z-index: -1;
}
.admin-bar .rl-c-splash { --rl-head-h: calc(107px + 32px); }
@media (max-width: 782px) {
	.admin-bar .rl-c-splash { --rl-head-h: calc(107px + 46px); }
}

/* Scroll cue: yellow down arrow, bottom centre of the first screen,
   links to the statement. Gentle nudge unless reduced motion. */
.rl-c-splash__arrow {
	position: absolute;
	left: 50%;
	top: calc(100vh - var(--rl-head-h) - 8.5rem);
	top: calc(100svh - var(--rl-head-h) - 8.5rem);
	transform: translateX(-50%);
	display: block;
	padding: 0.5rem;
	color: #FFFF00;
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6));
	animation: rl-c-nudge 2.4s ease-in-out infinite;
}
.rl-c-splash__arrow svg { display: block; width: 21px; height: 60px; }
.rl-c-splash__arrow:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
@keyframes rl-c-nudge {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 0.5rem); }
}
@media (prefers-reduced-motion: reduce) {
	.rl-c-splash__arrow { animation: none; }
}

/* Footer sits above the fixed video. */
.wp-site-blocks > footer { position: relative; z-index: 1; }
.rl-c-splash__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Statement: as on the original site — large yellow (#FFFF00) text
   straight on the video, no box, left-aligned across the wide column.
   Type is EB Garamond (all-Garamond decision, 2026-11-11). The block
   style class is-style-rl-panel stays in the markup but is neutralised. */
.rl-c-splash__statement,
.rl-c-splash__statement.is-style-rl-panel {
	position: relative;
	width: 100%;
	max-width: 75rem; /* ~1200px, like production */
	margin-inline: auto;
	padding: 0;
	background: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
/* The statement is the front page's own content. Legacy markup carries
   inline font/size/colour (Fonts Plugin h2: futura, 60px, #ffff00):
   normalise it so it always reads the same. */
.rl-c-splash__statement :is(h1, h2, h3, h4, p) {
	font-family: var(--wp--preset--font-family--text) !important;
	font-size: clamp(2rem, 1.1rem + 3.6vw, 3.75rem) !important; /* 60px on desktop */
	font-weight: 500 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.02em !important;
	color: #FFFF00 !important;
	text-align: left !important;
	margin: 0;
}
.rl-c-splash__statement :is(h1, h2, h3, h4, p) + :is(h1, h2, h3, h4, p) { margin-top: 0.75em; }
.rl-c-splash__statement .wp-block-columns,
.rl-c-splash__statement .wp-block-column { display: block; margin: 0; max-width: none; }
.rl-c-splash__statement a { color: #FFFF00; }

/* (Pause / Play button removed 2026-11-11.) */

@media (min-width: 782px) {
	.rl-c-splash { padding-left: var(--wp--preset--spacing--60); padding-right: var(--wp--preset--spacing--60); }
}

/* --------------------------------------------------------------------- */
/* Section heads ("Recent projects   All projects →")                       */
/* --------------------------------------------------------------------- */
.rl-c-section-head { margin-bottom: var(--wp--preset--spacing--40); }
.rl-c-section-head > * { margin: 0; }
.rl-c-more,
.rl-c-sale__link {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------- */
/* Grid + project card (archive, front page, Sales, related docs)          */
/* --------------------------------------------------------------------- */
.rl-c-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
}
.rl-c-card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.rl-c-card > * { margin: 0; }
.rl-c-card .rl-c-card__image { margin: 0 0 var(--wp--preset--spacing--20); }
.rl-c-card .rl-c-card__image img { width: 100%; display: block; }
.rl-c-card .rl-c-card__image a { display: block; }
.rl-c-card__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}
.rl-c-card__title a { text-decoration: none; }
.rl-c-card__title a:hover,
.rl-c-card__title a:focus { text-decoration: underline; }
.rl-c-card__year,
.rl-c-card__edition,
.rl-c-card__status {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--small);
	color: var(--rl-muted);
	line-height: 1.4;
}
/* Sales variant */
.rl-c-card__sale { gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--20); }
.rl-c-card__sale > * { margin: 0; }
.rl-c-card__price {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}
.rl-c-card__status { font-weight: 500; }

/* --------------------------------------------------------------------- */
/* Single project                                                          */
/* --------------------------------------------------------------------- */
.rl-c-project__head { margin-bottom: var(--wp--preset--spacing--40); }
.rl-c-project__head .wp-block-post-title { margin: 0; }
.rl-c-byline {
	gap: 0 0.6em;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}
.rl-c-byline > * { margin: 0; }
.rl-c-byline > * + *::before { content: "·"; margin-right: 0.6em; color: var(--rl-muted); }

.rl-c-project__hero { margin-bottom: var(--wp--preset--spacing--50); }
.rl-c-project__hero img { width: 100%; display: block; }

/* One column (2026-11-11): content + video, then the details (Format,
   Edition, sale, Press) at the bottom, then Documentation and Older/Newer. */
.rl-c-project__main { margin-top: var(--wp--preset--spacing--50); }
.rl-c-project__details {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--rule-width, 1px) solid var(--rl-rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.rl-c-project__details > * { margin: 0; flex: 1 1 14rem; }
.rl-c-project__details > .rl-visually-hidden { flex: none; }
.rl-c-project__details:not(:has(p, li, .wp-block-button)) { display: none; }
.rl-c-project__details .rl-c-sale { border-top: 0; padding-top: 0; }

/* Meta: label / value pairs, same look as dl.rl-meta */
.rl-c-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.rl-c-meta:not(:has(*)) { display: none; }
.rl-c-meta__row { display: contents; }
.rl-c-meta__row > * { margin: 0; }
.rl-c-meta__label,
h2.rl-c-meta__label {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.4;
	color: var(--rl-muted);
	margin: 0;
}
.rl-c-meta__value { white-space: pre-line; }

/* Sale box: hairline above, price, Buy / Sold out, link to Sales */
.rl-c-sale {
	border-top: var(--wp--custom--rule-width) solid var(--rl-rule);
	padding-top: var(--wp--preset--spacing--40);
}
.rl-c-sale > * { margin: 0; }
.rl-c-sale > * + * { margin-top: var(--wp--preset--spacing--30); }
.rl-c-sale__price {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.2;
}
.rl-c-sale__status {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.rl-c-press .wp-block-rakishlight-press-links { margin: var(--wp--preset--spacing--20) 0 0; }
.rl-c-press .wp-block-rakishlight-press-links li + li { margin-top: var(--wp--preset--spacing--10); }

.rl-c-project__main > .wp-block-post-content > :first-child { margin-top: 0; }
.rl-c-project__video { margin-top: var(--wp--preset--spacing--50); }

/* Related documentation */
.rl-c-related {
	margin-top: var(--wp--preset--spacing--70);
}
.rl-c-related > .wp-block-heading { margin: 0 0 var(--wp--preset--spacing--40); }
.rl-c-card--doc .rl-c-card__title { font-size: var(--wp--preset--font-size--small); }

/* Older / Newer — visible and usable at every width */
.rl-c-project > .wp-block-separator { margin-top: var(--wp--preset--spacing--70); }
.rl-c-pager {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);
}
.rl-c-pager .post-navigation-link-previous,
.rl-c-pager .post-navigation-link-next { flex: 1 1 16rem; max-width: 100%; }
.rl-c-pager .post-navigation-link-next { text-align: right; }
.rl-c-pager a {
	display: inline-block;
	padding-block: var(--wp--preset--spacing--20); /* comfortable tap target */
	text-decoration: none;
}
.rl-c-pager a:hover,
.rl-c-pager a:focus { text-decoration: underline; }
.rl-c-pager .post-navigation-link__label {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--rl-muted);
}
.rl-c-pager .post-navigation-link__title { font-size: var(--wp--preset--font-size--medium); }
@media (max-width: 599px) {
	.rl-c-pager .post-navigation-link-next { text-align: left; }
}

/* Archive heading */
.rl-c-archive > h1 { margin: 0 0 var(--wp--preset--spacing--50); }

/* Anchor jumps land below the sticky header. */
html { scroll-padding-top: 6rem; }

/* --------------------------------------------------------------------- */
/* Project pages: content on a see-through panel over the page background */
/* (2026-11-10). Background colour/image, panel colour and text colour are */
/* per project, set in the editor's "Page colours" panel; functions.php    */
/* puts --rl-panel / --rl-panel-text on <body>. Empty panel = press green; */
/* empty text = white or ink, whichever reads better on the panel.         */
/* Opacity per project (rl_panel_opacity → --rl-panel-alpha), default 0%;  */
/* 0 makes the box invisible (no colour, no blur).                          */
/* --------------------------------------------------------------------- */
.rl-p-panel {
	--_panel: var(--rl-panel, #2F4F45);
	--_ptext: var(--rl-panel-text, #FFFFFF);
	--rl-muted: color-mix(in srgb, var(--_ptext) 75%, var(--_panel));
	--rl-rule: color-mix(in srgb, var(--_ptext) 35%, var(--_panel));
	background-color: color-mix(in srgb, var(--_panel) var(--rl-panel-alpha, 0%), transparent);
	-webkit-backdrop-filter: blur(var(--rl-panel-blur, 0px));
	backdrop-filter: blur(var(--rl-panel-blur, 0px));
	color: var(--_ptext);
	padding: var(--wp--preset--spacing--50);
}
.rl-p-panel > :first-child { margin-top: 0; }
@media (max-width: 781px) {
	.rl-p-panel { padding: var(--wp--preset--spacing--40); }
}
/* Text on the panel takes the panel's text colour, whatever the page sets. */
body .rl-p-panel,
body .rl-p-panel :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, cite, .wp-block-post-title, .wp-block-post-title a, a:not(.wp-element-button)) {
	color: var(--_ptext) !important;
}
body .rl-p-panel :is(.rl-c-meta__label, h2.rl-c-meta__label, .rl-c-card__year, .rl-c-card__edition, .rl-c-card__status, .post-navigation-link__label, figcaption, .wp-element-caption) {
	color: var(--rl-muted) !important;
}
.rl-p-panel .wp-element-button,
.rl-p-panel .wp-block-button__link {
	background: var(--_ptext);
	color: var(--_panel);
}
.rl-p-panel .wp-block-separator { border-top-color: var(--rl-rule); margin-top: var(--wp--preset--spacing--70); }
.rl-p-panel :focus-visible { outline-color: var(--_ptext); }

/* --------------------------------------------------------------------- */
/* Projects archive, styled like the original site (2026-11-11):          */
/* grey + tiled gold pattern behind, one narrow column, white text with   */
/* a soft shadow; bold uppercase heading; each project = underlined name  */
/* link + short excerpt. New theme fonts.                                  */
/* The background image is the site's own crazygold2.png (Media, 2020/07). */
/* --------------------------------------------------------------------- */
/* Background: set per listing page in Appearance → Listing backgrounds
   (functions.php prints it). Text colour comes from the same setting. */
.rl-c-projects,
.rl-c-projects :is(h1, h2, p, a) {
	color: var(--rl-list-text, #FFFFFF);
	text-shadow: var(--rl-list-shadow, 0 1px 3px rgb(0 0 0 / 0.55));
}
.rl-c-projects .rl-d-intro { margin: 0 0 var(--wp--preset--spacing--50); font-style: italic; }
.rl-c-projects__heading {
	font-family: var(--wp--preset--font-family--mechanical);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.rl-c-plist .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.rl-c-plist .wp-block-post-template > li { margin: 0 0 var(--wp--preset--spacing--50); }
.rl-c-plist .wp-block-post-template > li > * { margin: 0; }
.rl-c-plist__title {
	font-family: var(--wp--preset--font-family--text);
	font-size: 1.3125rem; /* 21px, as on the original */
	font-weight: 400;
	line-height: 1.4;
}
.rl-c-plist__title a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.rl-c-plist__title a:hover,
.rl-c-plist__title a:focus { text-decoration-thickness: 2px; }
.rl-c-plist__excerpt { margin-top: var(--wp--preset--spacing--10) !important; }
.rl-c-plist__excerpt .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--text);
	font-size: 1.3125rem;
	line-height: 1.5;
	margin: 0;
}
@media (max-width: 599px) {
	.rl-c-plist__title,
	.rl-c-plist__excerpt .wp-block-post-excerpt__excerpt { font-size: 1.125rem; }
}
.rl-c-plist__excerpt .wp-block-post-excerpt__more-text { display: none; }

/* --------------------------------------------------------------------- */
/* Mobile menu as a see-through drop-down under the banner (2026-11-11).  */
/* The core Navigation block normally opens a solid full-screen overlay;  */
/* here it drops down from the bottom of the banner, same grey (black     */
/* 29%) plus a light blur, so the video or page shows through.            */
/* --------------------------------------------------------------------- */
@media (max-width: 599px) {
	.rl-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--rl-banner-h, 4rem)) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		height: auto !important;
		max-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--rl-banner-h, 4rem));
		overflow-y: auto;
		padding: 3rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) !important; /* room for the × */
		background-color: rgb(0 0 0 / 0.29) !important;
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		color: #FFFFFF !important;
		font-size: var(--wp--preset--font-size--large);
		animation: none !important;
	}
	.rl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.rl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		margin: 0 !important;
		padding: 0 !important;
	}
	.rl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.rl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left;
	}
	.rl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30) !important;
	}
	.rl-header .wp-block-navigation__responsive-container.is-menu-open a {
		color: #FFFFFF !important;
		text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
	}
	/* Close (×) sits top-right of the drop-down. */
	.rl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 0.75rem;
		right: var(--wp--preset--spacing--40);
		color: #FFFFFF;
	}
	/* The page underneath stays scrollable-looking: no white flash. */
	html.has-modal-open { overflow: hidden; }
}

/* --------------------------------------------------------------------- */
/* Buy buttons (2026-11-11, Brian): always white type on press green,     */
/* on project pages and Sales cards, whatever the page or panel colours.  */
/* Before this, the panel rule above inverted them (panel text colour as  */
/* the fill), so a project whose panel text was green got an invisible    */
/* green-on-green button (e.g. Journal).                                  */
/* --------------------------------------------------------------------- */
body .wp-block-button.rl-buy-form .wp-block-button__link,
body .rl-p-panel .wp-block-button.rl-buy-form .wp-block-button__link {
	background-color: #2F4F45 !important;
	color: #FFFFFF !important;
	text-shadow: none !important;
}
body .wp-block-button.rl-buy-form .wp-block-button__link:hover,
body .wp-block-button.rl-buy-form .wp-block-button__link:focus-visible {
	background-color: #1F362F !important;
	color: #FFFFFF !important;
}