/*
 * Darkroom mode - portfolio single pages only (Field Plan Phase 2, Kedyn's
 * call 2026-08-23: scoped to "portfolio single pages + gallery templates",
 * not the whole site - homepage/contact/the footer on every OTHER page
 * stay the warm light identity Phase 1 built). A darkroom is where you go
 * to look at photos, not the whole house.
 *
 * Scoped entirely by body.single-portfolios, which WordPress already puts
 * on all 9 real portfolio posts (post_type 'portfolios') - no new template
 * logic needed. Leans hard on the Phase 1 token system (reset.css):
 * redefining --surface-warm / --color-heading-text / --color-body-text /
 * --color-border / --color-accent on body.single-portfolios flips every
 * rule elsewhere (portfolio-grid.css's grid-frame background, site-
 * footer.css's whole footer band, etc.) that already reads those vars -
 * free, no separate rule needed here for any of them. Only the still-
 * hardcoded literals in legacy screen.css (header, nav, footer text)
 * need an explicit override below.
 */

/*
 * Re-toned 2026-08-24 (Kedyn: "revisit the black backgrounds on all portfolio
 * pages - might be too much maybe a light/grainier look to not be so stark").
 *
 * The old ground was #121010 - effectively black, and on a large screen a
 * field that dark reads as a void rather than as a room: the photographs
 * float in nothing, and any panel that is even slightly lighter (the
 * gallery's own loading tone, at #1c1815) shows up as a slab against it.
 *
 * The new ground is #1c1917: still unmistakably a darkroom, ~5 steps of
 * lightness up from black, and warm rather than neutral (R > G > B) so it
 * sits with the sienna accent and the warm greys of her prints instead of
 * fighting them. Every surface derives from --surface-page now, so the whole
 * mode can be re-toned from one line.
 *
 * The grain is the other half of "not so stark": a fine monochrome noise
 * tile composited over the ground colour, which breaks up the flat digital
 * field the way paper stock does behind a physical print. It is applied as a
 * BACKGROUND layer, never an overlay - so it sits behind every photograph
 * and can never degrade the images themselves, which is the one thing that
 * would be unforgivable on a photography site. ~4% opacity: visible as
 * texture at arm's length, invisible as pattern.
 */
body.single-portfolios {
	--color-heading-text: #f4efe8;
	--color-body-text: #c9c0b4;
	--color-border: #3a3531;
	--color-accent: var(--color-accent-dark, #c48f6a);
	/* The page ground itself - referenced by every surface below rather than
	   re-typed, so re-toning is a one-line change. */
	--surface-page: #1c1917;
	/* Tile/placeholder tone: a touch lighter than the ground so a
	   still-loading photo reads as "loading", not as a hole. */
	--surface-warm: #262220;
	/* Fine film grain, tiled. feTurbulence at a high base frequency gives
	   per-pixel noise rather than visible blotches; stitchTiles keeps the
	   200px tile seamless where it repeats. */
	--surface-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.042'/%3E%3C/svg%3E");
	/* Stacked layout's fanned "deck" cards (blocks.css) default to white
	   paper, which is right on a light page and blinding here - measured as
	   pure rgb(255,255,255) against this ground. No live page uses the
	   stacked layout today, but it is one editor click away. */
	--kcb-deck-card: #2b2624;
	--kcb-deck-card-border: rgba(255, 255, 255, 0.08);

	background-color: var(--surface-page);
	background-image: var(--surface-grain);
	color: var(--color-body-text);
}

/*
 * #wrapper (the theme's own top-level layout div, direct child of body)
 * paints a hardcoded white background of its own - found live as a real
 * white band between the grid and the footer that the body background
 * alone didn't reach, since #wrapper sits on top of it.
 */
body.single-portfolios #wrapper {
	/* Carries the grain too: #wrapper covers the body for the full height of
	   the content, so grain on body alone would only show in the overscroll
	   margins. */
	background-color: var(--surface-page);
	background-image: var(--surface-grain);
}

/* Header / nav ----------------------------------------------------------- */

body.single-portfolios .top_bar {
	/* Re-toned with the ground above (was rgba(18,16,16,.92)); kept as rgba
	   rather than the token because the translucency over scrolling
	   photographs is the point. */
	background: rgba(28, 25, 23, 0.92);
	border-bottom-color: var(--color-border);
}

body.single-portfolios #logo_wrapper {
	border-bottom-color: var(--color-border);
}

/*
 * The theme already ships a light-ink logo variant for transparent/dark
 * header states elsewhere on the site (.logo_wrapper.hidden, normally
 * display:none) - reuse that existing asset instead of adding a new upload
 * or guessing with a CSS filter.
 */
body.single-portfolios .logo_wrapper.default {
	display: none;
}
body.single-portfolios .logo_wrapper.hidden {
	display: inline-block;
}

/*
 * Scrolled fixed-header state (js/custom.js adds .scroll past 200px).
 * style.css solidifies that state with `background-color: #fff
 * !important` - its own comment admits the white was "a plain white
 * guess, not verified" - which is correct on the light pages but on
 * these dark pages paints a jarring white band over dark content
 * (reported by Kedyn from mobile, 2026-08-23; equally wrong on
 * desktop). Same !important so this competes in the same layer;
 * higher specificity (body.single-portfolios prefix) wins. Slightly
 * more opaque than the 0.92 at-rest tone above, mirroring how the
 * light theme's scrolled state also goes more solid than its at-rest
 * 0.95 translucency.
 */
body.single-portfolios .top_bar.scroll,
body.single-portfolios .header_style_wrapper.scroll {
	background-color: rgba(28, 25, 23, 0.97) !important;
}

body.single-portfolios .top_bar a {
	color: var(--color-accent);
}

body.single-portfolios .header_style_wrapper ul.nav > li > a {
	color: #b8afa2;
}
body.single-portfolios .header_style_wrapper ul.nav > li > a:hover {
	color: var(--color-heading-text);
}

/* Gallery surfaces --------------------------------------------------------
 * .pm-uniform-grid__frame / img backgrounds (portfolio-grid.css) already
 * read var(--surface-warm) - covered by the redefinition above. Only the
 * density-toggle pill still hardcodes var(--color-white) as its own
 * background, so it needs an explicit flip.
 */

body.single-portfolios .pm-density-toggle__btn {
	background: var(--surface-warm);
	/*
	 * Not var(--color-border) here (2026-08-24 audit). That token is #3a3531,
	 * which against this button's own #262220 ground measures 1.30:1 - well
	 * under the 3:1 WCAG 1.4.11 asks for the boundary of a UI component, so
	 * on the dark portfolio pages the control's edge was barely findable.
	 * #756d65 is 3.10:1 against the same ground and still reads as a quiet
	 * warm hairline rather than a hard outline. The label colour is left
	 * alone - #a89f92 is already 6.04:1.
	 *
	 * Deliberately a literal rather than a new token: --color-border is used
	 * for genuine dividers all over the darkroom pages, where a much softer
	 * line is correct; raising it globally to satisfy a control boundary
	 * would coarsen every one of them.
	 */
	border-color: #756d65;
	color: #a89f92;
}
body.single-portfolios .pm-density-toggle__btn:hover,
body.single-portfolios .pm-density-toggle__btn:focus-visible,
body.single-portfolios .pm-density-toggle__btn[aria-pressed="true"] {
	border-color: var(--color-accent);
	color: var(--color-heading-text);
}

/* The "black bar behind galleries" (Kedyn, 2026-08-24) ---------------------
 *
 * Two things stacked up to produce it, both inherited from when these pages
 * were light:
 *
 * 1. The slider box paints var(--surface-warm) as its while-loading tone
 *    (blocks.css). On a light page that is a near-invisible #edebe7; here
 *    --surface-warm is LIGHTER than the page ground - so the gallery read as
 *    a pale slab and the page either side of it read as the dark bars she
 *    saw. Measured live at the time: box rgb(28,24,21) against body
 *    rgb(18,16,16). (Both tones have since been re-toned, but the
 *    relationship - and therefore this fix - is unchanged.)
 * 2. .kcb-gallery-slider carries `0 20px 40px -15px rgba(0,0,0,0.35)`
 *    (blocks.css). A black drop shadow on a near-black page cannot read as
 *    lift - there is no light for it to occlude - it can only smear a
 *    darker halo around the photo, which is exactly the "shadows being a
 *    darker black" half of her report.
 *
 * So on darkroom pages the slider surface matches the page (the box is
 * simply invisible until the photograph paints) and the shadow is dropped.
 * The photo's own edge against the page ground is a cleaner boundary than any
 * shadow. The grid tiles deliberately KEEP their --surface-warm placeholder:
 * those are small squares where a faint tone reads as "photo loading"
 * rather than as a slab.
 */
body.single-portfolios .kcb-gallery-slider,
body.single-portfolios .kcb-portfolio-slider {
	box-shadow: none;
}

/* Mirrors blocks.css's own three selector shapes (including the :not()
 * chains) rather than a shorter `.slider_wrapper .flexslider`: each of those
 * scores 4 classes, so the short form loses the cascade outright - confirmed
 * live, the box stayed rgb(28,24,21) until these matched shape-for-shape.
 * Adding `body.single-portfolios` puts each at 4 classes + 1 type, which
 * wins. Coverflow/scattered stay excluded for blocks.css's own stated reason:
 * their cards float on the page background by design. */
body.single-portfolios .kcb-gallery-slider:not(.kcb-gallery-slider--coverflow):not(.kcb-gallery-slider--scattered) .flexslider,
body.single-portfolios .kcb-portfolio-slider:not(.kcb-portfolio-slider--coverflow):not(.kcb-portfolio-slider--scattered) .flexslider,
body.single-portfolios .slider_wrapper:not(.kcb-gallery-slider):not(.kcb-portfolio-slider) .flexslider {
	/* transparent, not var(--surface-page): the ground carries a grain layer,
	   so a box painting the flat ground COLOUR is fractionally darker than
	   the grained field around it and reappears as a faint rectangle - the
	   same bug this block fixes, just inverted. Letting the page show through
	   makes the box unconditionally invisible, whatever the ground is
	   re-toned to later. */
	background-color: transparent;
}

/* Footer -------------------------------------------------------------------
 * .footer_bar / .pm-footer-signoff already paint var(--surface-warm) - free
 * via the redefinition above. Only the still-hardcoded literals below
 * (site-footer.css's __nav a, and screen.css's #copyright / social icons)
 * need an explicit flip. The signoff logo is the theme's normal dark-ink
 * wordmark PNG (same tg_retina_logo Kirki option the header uses on every
 * other page) - there's no ready-made light variant for THIS specific
 * image the way the header logo has one, so it's inverted with a filter
 * instead.
 */

body.single-portfolios .pm-footer-signoff__logo img {
	filter: brightness(0) invert(1);
}

/*
 * The tagline line needs the same flip as __nav a below and was missed when
 * this block was written. site-footer.css:91 sets it to #5f5f5f, chosen to
 * clear AA against the LIGHT footer band (5.36:1 on #edebe7) - on the
 * darkroom surface that same value inverts to roughly 2.47:1, i.e. unreadable
 * on all nine portfolio pages. Reuses the neighbouring #a89f92 rather than
 * inventing a second value.
 */
body.single-portfolios .pm-footer-signoff__line {
	color: #a89f92;
}

body.single-portfolios .pm-footer-signoff__nav a {
	color: #a89f92;
}
body.single-portfolios .pm-footer-signoff__nav a:hover,
body.single-portfolios .pm-footer-signoff__nav a:focus-visible {
	color: var(--color-heading-text);
}
body.single-portfolios .pm-footer-signoff__nav a.pm-footer-signoff__cta:hover,
body.single-portfolios .pm-footer-signoff__nav a.pm-footer-signoff__cta:focus-visible {
	border-color: var(--color-accent);
}

body.single-portfolios #copyright,
body.single-portfolios .footer_bar_wrapper {
	color: #a89f92;
}
body.single-portfolios .footer_bar_wrapper .social_wrapper ul li a {
	color: #a89f92;
}
body.single-portfolios .footer_bar_wrapper .social_wrapper ul li a:hover,
body.single-portfolios .footer_bar_wrapper .social_wrapper ul li a:active {
	color: var(--color-accent);
	opacity: 1;
}