/* Director's Notes — custom playbill-derived design for the blog's post
   header, archive list, and the [jrh-note-split] photo+text block. See
   docs/superpowers/specs/2026-08-26-directors-notes-blog-design.md for the
   approved design this implements. Deliberately separate from the theme's
   own CSS — this plugin never edits the theme directly. */

/* --- Archive → post page transition ---
   Joshua: "help me to make it more interesting than just the new page
   loading in" — specifically wanted the clicked entry to visually become
   the post, not a generic effect. This is the browser's own native
   cross-document View Transition feature: this at-rule turns it on for
   navigations between pages that both declare it — since this stylesheet
   only ever loads on this plugin's own archive/single pages (see
   jrh_directors_notes_assets() in jrh-directors-notes.php), that's
   naturally the ONLY place it applies; navigating to Gallery, Resume,
   etc. is completely unaffected. The actual per-post morph itself needs
   no JS or extra CSS beyond this — it comes from matching
   view-transition-name values set inline, per post ID, on the title and
   dateline in archive-directors-notes.php and single-directors-note.php;
   the browser finds the matching pair and animates between their real
   captured positions/sizes on its own.
   Unsupported browsers (older Safari) simply ignore this at-rule
   entirely and navigate exactly as before — directors-notes.js adds a
   plain fade-through-black for exactly that case, so nobody gets a flat,
   instant page swap either way. */
@view-transition {
	navigation: auto;
}

/* Default browser timing reads a little quick for this site's own
   "gentle, smooth, nothing stark" feel (Joshua's own words, said
   repeatedly about this blog's other motion). Slightly longer, eased
   throughout — applies to both the whole-page crossfade and the
   named-element morphs above, since both are ::view-transition-group
   animations under the hood. */
::view-transition-group(*) {
	animation-duration: 420ms;
	animation-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* The JS-driven fallback fade for browsers with no View Transition
   support at all (see directors-notes.js) — a plain opacity transition
   is enough since it's a one-shot fade, not scroll-driven. */
#jrh-dn-fade-overlay {
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

#jrh-dn-fade-overlay.is-active {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	#jrh-dn-fade-overlay {
		transition: none;
	}
}

/* IMPORTANT — do NOT add a padding-top override for #wrapper here.
   History: the theme's own header is position:fixed, so #wrapper needs
   top clearance to keep from starting underneath it — but the theme
   ALREADY does this correctly and dynamically on its own (confirmed
   live: matches the header's real height exactly, with no help from
   this plugin). Two earlier attempts to "fix" this from here both made
   things WORSE and both taught the same lesson:
   - v1: `padding-top: 0 !important` — a stylesheet `!important` rule
     beats the theme's own plain inline style, so this straight-up
     overrode the theme's correct value with zero. Joshua: "the top
     menu still covers the top of the blog page."
   - v1.5.1: tried to replicate the theme's own measurement via a
     --jrh-dn-header-h custom property set from directors-notes.js
     using header.offsetHeight — but .header_style_wrapper's own box
     has no layout height (its content is all position:absolute), so
     offsetHeight reads 0 at all times, not just mid-scroll. That set
     the custom property to 0px and reproduced the exact same "menu
     covers content" bug, disguised as a fresh new bug.
   The actual fix is to leave this alone entirely and let the theme's
   own correct, working mechanism run unmodified. */

/* --- Condensed header, in place ---
   Joshua: "its a little too large. Maybe when a user scrolls down it
   condenses." First version of this built a SEPARATE small bar meant to
   replace the big header once it scrolled out of view — but the theme's
   own real header (.header_style_wrapper, containing .top_bar) turns out
   to already be position:fixed, permanently pinned, on this page — it
   never scrolls away at all. So the separate bar just stacked on top of
   it instead of replacing it: "now we have two menus."
   Second version scaled the whole header down with a CSS transform —
   worked, but scaling shrinks WIDTH along with height, so the full-width
   white bar became a shrunken box floating in the middle of the black
   page. Joshua: "it looks like a pop up add."
   Third version fixed the width by fading just the signature logo, but
   only faded its opacity — the logo's own box turns out to be sized off
   its PARENT (height:100%, a table layout), not its own content, so
   shrinking the image inside it did nothing measurable; .top_bar's real
   height never actually changed. Joshua: "it needs to collapse... the
   same height as the one on the homepage" (that's .jrh-header-bar in
   jrh-curtain-hero, 58px tall).
   This version clips .header_style_wrapper itself down to that same
   58px, directly — sidestepping the internal table-layout quirks
   entirely, since nothing inside it needs to individually resize.
   overflow:hidden here is what makes the max-height clip (set from
   directors-notes.js) actually take effect, and is also why .top_bar can
   be shifted upward inside it (also in directors-notes.js) — clipping
   from the top would have cut off the nav links first and left the logo
   behind, so instead .top_bar as a whole slides up inside this frame,
   which reveals its bottom portion (the nav) while its top portion (the
   logo) scrolls out of view above it. Scoped to this plugin's own pages
   only, same as the #wrapper padding fix above — the rest of the site's
   header is completely untouched. */
body.single-post .header_style_wrapper,
body.page-template-jrh-directors-notes-archive .header_style_wrapper {
	overflow: hidden;
}

/* The theme has its OWN separate, unrelated scroll behavior: past 200px
   of scroll, the theme's own script (photography/js/custom.js) adds a
   "nofixed" class to this same element, and the theme's own CSS
   (screen.css) sets that class to display:none — hiding the header
   completely, all at once, no transition. That's a hard on/off switch
   the theme built for its OTHER header layouts, completely independent
   of the smooth shrink above — the two were fighting each other: ours
   shrinks it smoothly, then at 200px the theme yanks it away entirely.
   Joshua: "it now jumps to a smaller size, and eventually disappears."
   This cancels the theme's own display:none on these pages only, back
   to its own normal display:block, so the one smooth shrink is all that
   ever happens — nothing here ever needs to fully hide. */
body.single-post .header_style_wrapper.nofixed,
body.page-template-jrh-directors-notes-archive .header_style_wrapper.nofixed {
	display: block !important;
}

/* No reduced-motion override needed — like the rest of this feature (see
   directors-notes.js), the shrink is set directly, in exact proportion to
   the user's own scroll input, not a timed animation; nothing moves on
   its own beyond what the user's own scrolling already causes. */

/* --- [jrh-note-split] two-column photo+text block --- */

.jrh-dn-split {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin: 32px 0;
}

.jrh-dn-split-photo,
.jrh-dn-split-text {
	flex: 1 1 50%;
	min-width: 0; /* lets the photo shrink below its image's intrinsic width in the flex row */
}

.jrh-dn-split-photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.jrh-dn-split-text {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
}

/* --- Post header + body --- */

.jrh-dn-post {
	background: #0c0c0c;
	padding: 60px 8vw 80px;
}

/* Joshua: "somewhere in this space should we add a 'back to blog'
   button" — quiet on purpose, matching the eyebrow's own typographic
   language (Montserrat, uppercase, wide letter-spacing) but smaller and
   more muted, so it reads as a utility link, not competing with the
   title just below it. */
.jrh-dn-back-link {
	display: block;
	max-width: 640px;
	margin: 0 auto 28px;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
	transition: color 0.25s ease;
}

.jrh-dn-back-link:hover {
	color: rgba(212, 175, 55, 0.9);
}

.jrh-dn-post-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.jrh-dn-eyebrow-rule {
	width: 44px;
	height: 1px;
	background: rgba(212, 175, 55, 0.85);
}

.jrh-dn-eyebrow {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	letter-spacing: 0.25em;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
}

.jrh-dn-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	color: #fff;
	line-height: 1.3;
	max-width: 560px;
	margin: 0;
}

/* Rule-through-text technique: two equal flex-growing line segments with
   the dateline text between them, so the white rule visually passes
   through the words rather than sitting as a separate element above or
   below them — the specific detail Joshua asked for after seeing the
   first version with the rule and dateline as two separate pieces. */
.jrh-dn-dateline {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 420px;
	gap: 14px;
}

.jrh-dn-dateline-rule {
	flex: 1;
	height: 1px;
	background: #fff;
	opacity: 0.8;
	/* Only actually animates on the archive list's hover state (see
	   .jrh-dn-archive-entry:hover above) — harmless elsewhere, since
	   nothing else ever changes this rule's own background/opacity. */
	transition: background 0.3s ease, opacity 0.3s ease;
}

.jrh-dn-dateline-text {
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	white-space: nowrap;
}

.jrh-dn-summary {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.5;
	border-left: 2px solid rgba(212, 175, 55, 0.85);
	padding-left: 14px;
	max-width: 420px;
	text-align: left;
	margin-top: 4px;
}

/* Was width:100%/height:auto — let each photo's own natural proportions
   dictate how tall the hero image rendered, with nothing capping it. A
   photo shot at a steep angle (or just a tall/narrow source image) could
   end up towering over the whole page. First fix capped it at a 3:2 box,
   but Joshua wanted something shorter and wider still: "I want it more
   of a banner under the title sections" — a real banner ratio (much
   wider than tall) and wider than the reading column below it, rather
   than a tall photo just made a little less tall. */
.jrh-dn-hero-photo {
	max-width: 1200px;
	aspect-ratio: 3 / 1;
	overflow: hidden;
	margin: 40px auto 0;
	border-radius: 4px;
}

.jrh-dn-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* "Center" (the plain rule above, object-position defaults to center on
   its own) needs no extra rule here — only the two other choices the
   composer's own "Photo position" control offers. */
.jrh-dn-hero-photo--top img {
	object-position: top;
}

.jrh-dn-hero-photo--bottom img {
	object-position: bottom;
}

.jrh-dn-body {
	max-width: 640px;
	margin: 40px auto 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 17px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.75);
}

.jrh-dn-body p {
	margin: 0 0 1.4em;
}

/* Joshua: "can the hyperlinked text be a different color? You can't see
   it." — the theme's default link color was too close to the body text's
   own color on this dark background. Same gold accent used throughout
   this page (nav links, dividing rules), so a link reads as a deliberate
   part of the design rather than a mistake. */
.jrh-dn-body a {
	color: rgba(212, 175, 55, 0.9);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.jrh-dn-body a:hover {
	color: rgba(212, 175, 55, 1);
}

/* Joshua: "at the bottom of the blog, lets add buttons to navigate to
   the next, previous, first, and last posts." Previous/First group on
   the left, Next/Last on the right — space-between naturally pushes the
   two groups to opposite edges even when one side is empty (viewing the
   very first or very last note). A link simply isn't rendered at all
   (see single-directors-note.php) when there's nowhere for it to go,
   rather than showing a grayed-out dead link. */
.jrh-dn-post-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 640px;
	margin: 56px auto 0;
	padding-top: 28px;
	border-top: 1px solid rgba(212, 175, 55, 0.35);
}

.jrh-dn-post-nav-side {
	display: flex;
	align-items: center;
	gap: 18px;
}

.jrh-dn-post-nav-link {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.25s ease;
}

.jrh-dn-post-nav-link:hover {
	color: rgba(212, 175, 55, 0.95);
}

/* First/Last read as secondary, one step down from Previous/Next —
   otherwise all four compete equally, and Previous/Next (the ones most
   people actually want) should read as the primary pair. */
.jrh-dn-post-nav-link--edge {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 600;
}

.jrh-dn-post-nav-link--edge:hover {
	color: rgba(212, 175, 55, 0.85);
}

/* Long dateline strings (a long city/location) need somewhere to give —
   shrinking the gap and letting the text wrap onto its own line under a
   single full-width rule reads better than the two rule segments getting
   squeezed to nothing. */
@media (max-width: 480px) {
	.jrh-dn-dateline {
		flex-wrap: wrap;
		justify-content: center;
	}
	.jrh-dn-dateline-text {
		white-space: normal;
		order: -1;
		flex: 0 0 100%;
		text-align: center;
	}
}

/* --- Archive/landing page list --- */

/* Full-bleed section background — .jrh-dn-archive-inner (below) is what
   actually constrains reading width, kept as a SEPARATE element rather than
   max-width/margin:auto on this one, specifically so the black itself runs
   edge-to-edge like About Me/Directing already do instead of reading as a
   boxed card on white. Joshua: "the black box feels disconnected." Fades/
   rises into view on scroll (opacity + translateY, see .is-in below, added
   by directors-notes.js) rather than appearing instantly — same reveal
   pattern already used site-wide (About Me, Directing, the marquee).
   Joshua: "it feels static/lifeless." */
.jrh-dn-archive {
	background: #0c0c0c;
	padding: 60px 8vw 80px;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1s ease, transform 1s ease;
}

.jrh-dn-archive.is-in {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.jrh-dn-archive {
		transition-duration: 0.01ms;
	}
}

.jrh-dn-archive-inner {
	max-width: 640px;
	margin: 0 auto;
}

.jrh-dn-archive-heading {
	text-align: center;
	margin-bottom: 36px;
}

/* Joshua: "the landing page is too plain/empty" — a small labeled eyebrow
   and a closing flourish (below) give the header a bit more presence
   without adding real visual weight. */
.jrh-dn-archive-eyebrow {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.3em;
	color: rgba(212, 175, 55, 0.85);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.jrh-dn-archive-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 30px;
	color: #fff;
	/* Was a <div> until now (see archive-directors-notes.php) — changed
	   to a real <h1> for SEO/accessibility (search engines and screen
	   readers weight an actual heading differently than a styled div),
	   but browsers give <h1> its own default margin a <div> never had.
	   Reset to 0 so the change is invisible — same spacing as before,
	   purely a semantic fix. */
	margin: 0;
}

.jrh-dn-archive-tagline {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.45);
	text-transform: uppercase;
	margin-top: 8px;
}

.jrh-dn-archive-flourish {
	color: rgba(212, 175, 55, 0.6);
	font-size: 13px;
	letter-spacing: 0.5em;
	margin-top: 20px;
}

/* Hover state — the second half of "it feels static/lifeless": a row
   lifts slightly, its title warms toward gold, and its dividing rules
   brighten to the same gold. margin/padding trade-off (negative margin,
   wider padding) lets the highlighted background extend past the text's
   own column width without the CLICKABLE area (the <a> itself) shrinking
   to match. */
.jrh-dn-archive-entry {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 20px;
	margin: 0 -20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	transition: background 0.3s ease, transform 0.3s ease;
}

.jrh-dn-archive-entry:hover {
	background: rgba(255, 255, 255, 0.04);
	transform: translateY(-2px);
}

.jrh-dn-archive-list .jrh-dn-archive-entry:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Same small-caps eyebrow language as the single-post header's own "No.
   XX" (see .jrh-dn-eyebrow), just without repeating "Director's Notes"
   before it — the page's own big title above already says that once for
   the whole list. Joshua: "I'd like it on the blog page as well, not just
   the post." */
.jrh-dn-archive-entry-number {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.jrh-dn-archive-entry:hover .jrh-dn-archive-entry-number {
	color: rgba(212, 175, 55, 0.85);
}

.jrh-dn-archive-entry-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 22px;
	color: #fff;
	text-align: center;
	transition: color 0.3s ease;
}

.jrh-dn-archive-entry:hover .jrh-dn-archive-entry-title {
	color: #f3e2a8;
}

.jrh-dn-archive-entry:hover .jrh-dn-dateline-rule {
	opacity: 0.9;
	background: rgba(212, 175, 55, 0.85);
}

.jrh-dn-dateline--small {
	max-width: 340px;
}

.jrh-dn-dateline--small .jrh-dn-dateline-text {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
}

.jrh-dn-dateline--small .jrh-dn-dateline-rule {
	opacity: 0.5;
}

.jrh-dn-archive-entry-summary {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.jrh-dn-archive-empty {
	font-family: Montserrat, sans-serif;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}

/* --- Mobile (matches the site-wide 900px breakpoint already used for
   About Me, the Directing section, and the Gallery grid) --- */

@media (max-width: 900px) {
	.jrh-dn-split {
		flex-direction: column;
		gap: 16px;
	}

	.jrh-dn-post {
		padding: 48px 24px 60px;
	}

	.jrh-dn-title {
		font-size: 26px;
	}

	.jrh-dn-body,
	.jrh-dn-post-header,
	.jrh-dn-back-link,
	.jrh-dn-post-nav {
		max-width: 100%;
	}

	.jrh-dn-archive {
		padding: 48px 24px 60px;
	}

	.jrh-dn-archive-inner {
		max-width: 100%;
	}

	.jrh-dn-archive-entry-title {
		font-size: 19px;
	}
}