/* ===========================================================================
   After Hours — the site in a dark theme (inc/after-hours.php)

   An experiment (Corey, 2026-10-07). Every rule is scoped to
   html.after-hours, set from the head before the page paints, so the light
   site is untouched when it is off.

   The palette: a near-black with a breath of the greeting's green-grey in
   it, one step lighter for raised surfaces, and two inks — near-white for
   what leads and a softened grey-green for what follows. The band's pastel
   drift becomes the same hues as deep jewel tones at low strength, and
   each chip keeps its hue: a deep tint of it as the chip, a pale one as
   its words.
   =========================================================================== */

html.after-hours {
	--ah-bg: #0f1214;
	--ah-raised: #171b1e;
	--ah-line: rgba( 233, 238, 234, .1 );
	--ah-ink: #eceeea;
	--ah-ink-2: #aab3ae;
	--ah-ink-3: #7f8984;

	color-scheme: dark;
	background-color: var( --ah-bg );
}

/* Switching: the page's colours cross-fade rather than jump (js/after-
   hours.js adds the class for the moment of the switch only). */
html.after-hours-switching,
html.after-hours-switching *,
html.after-hours-switching *::before,
html.after-hours-switching *::after {
	transition: background-color .4s ease, color .4s ease, border-color .4s ease, -webkit-text-fill-color .4s ease !important;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

html.after-hours body,
html.after-hours #main-wrapper,
html.after-hours #content-wrapper {
	background-color: var( --ah-bg ) !important;
	color: var( --ah-ink-2 );
}

/* ---------------------------------------------------------------------------
   Header: the menu's pills and the toggle
   --------------------------------------------------------------------------- */

html.after-hours #header .main-d-nav ul li a,
html.after-hours #header .main-d-nav .nav-icon,
html.after-hours #header .main-d-nav svg {
	color: var( --ah-ink ) !important;
}

/* ---------------------------------------------------------------------------
   Landing page: the band
   --------------------------------------------------------------------------- */

html.after-hours .home-intro {
	background-color: color-mix( in srgb, var( --ah-bg ) calc( var( --p ) * 100% ), #13171a ) !important;
	background-image: linear-gradient( to bottom, var( --ah-bg ) 45%, rgba( 15, 18, 20, 0 ) 70% ) !important;
	color: var( --ah-ink );
}

/* The drifting ground in the night's colours: the same six fields, where
   they were, as deep green, amber, blue, rust and sage, the band's top
   fading into the page's black instead of its white. */
html.after-hours .home-intro::before {
	background-image:
		linear-gradient( to bottom, var( --ah-bg ) 0%, rgba( 15, 18, 20, .85 ) 12%, rgba( 15, 18, 20, 0 ) 55% ),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient( 40% 44% at 18% 30%, rgba( 52, 104, 82, .55 ), transparent 72% ),
		radial-gradient( 36% 42% at 78% 24%, rgba( 128, 98, 48, .5 ), transparent 72% ),
		radial-gradient( 42% 46% at 62% 78%, rgba( 48, 74, 132, .6 ), transparent 72% ),
		radial-gradient( 34% 40% at 26% 84%, rgba( 128, 60, 44, .5 ), transparent 72% ),
		radial-gradient( 30% 36% at 88% 86%, rgba( 44, 104, 72, .5 ), transparent 72% ),
		radial-gradient( 34% 40% at 50% 48%, rgba( 62, 92, 74, .35 ), transparent 72% ) !important;
}

/* The white cap at the band's foot, and the grid's frame, in the page's
   black. */
html.after-hours .home-intro::after,
html.after-hours .content-module.portfolio::before {
	background-color: var( --ah-bg ) !important;
}

/* The greeting: the first sentence near-white, the second a step back,
   its linked names with it; no dark hairline round the letters. */
html.after-hours .home-intro .home-intro-title,
html.after-hours .home-intro-title .home-intro-me {
	-webkit-text-fill-color: var( --ah-ink ) !important;
	-webkit-text-stroke: 0 !important;
}

html.after-hours .home-intro-title .home-intro-lede,
html.after-hours .home-intro-title .home-intro-name a {
	-webkit-text-fill-color: var( --ah-ink-2 ) !important;
}

html.after-hours .home-intro-title .home-intro-name a:is( :hover, :focus-visible ) {
	-webkit-text-fill-color: var( --ah-ink ) !important;
}

html.after-hours .home-intro-cta {
	color: var( --ah-ink-2 ) !important;
}

/* The chips: each hue's deep tint as the chip, a pale one as the words. */
html.after-hours .home-intro-title .home-intro-chip--hr {
	--chip-ink: #c8cbf2;
	--chip-bg: #282a46;
}

html.after-hours .home-intro-title .home-intro-chip--healthcare {
	--chip-ink: #ecd28f;
	--chip-bg: #3a3117;
}

html.after-hours .home-intro-title .home-intro-chip--retail {
	--chip-ink: #f3b89d;
	--chip-bg: #43251a;
}

html.after-hours .home-intro-title .home-intro-chip--personalization {
	--chip-ink: #a9d3f3;
	--chip-bg: #15324b;
}

html.after-hours .home-intro-title button.home-intro-chip:hover {
	background-color: color-mix( in srgb, var( --chip-bg ) 78%, var( --chip-ink ) );
}

/* The filter bar keeps its chip's colours, which the chips above now
   hand it in their night versions. */
html.after-hours .area-filter-bar {
	box-shadow: 0 6px 24px rgba( 0, 0, 0, .5 );
}

html.after-hours .area-filter-bar button {
	color: var( --ah-bg );
}

/* ---------------------------------------------------------------------------
   Header, continued: the bar, the logo, the links
   --------------------------------------------------------------------------- */

/* The bar that drops in on scrolling up: the page's black, a hair lighter,
   frosted as by day (style.css) — the page shows through it, blurred — and
   a faint light line under it in place of the dark one. */
html.after-hours body.header-stuck:not( .home.compact-menu ) #header {
	background-color: rgba( 20, 24, 26, .72 ) !important;
	box-shadow: 0 1px 0 rgba( 255, 255, 255, .06 ) !important;
}

/* The logo's light face wherever the light site shows its dark one: at
   the top of the landing page and on the bar. Written with the day's own
   :not( .home.compact-menu ) on the bar (style.css), which otherwise
   outweighed these and showed the dark logo and grey links on the night's
   bar. */
html.after-hours body.home:not(.header-stuck) #main-wrapper #header #nav-wrapper .logo-dark,
html.after-hours body.header-stuck:not( .home.compact-menu ) #main-wrapper #header #nav-wrapper .logo-dark {
	opacity: 0 !important;
}

html.after-hours body.home:not(.header-stuck) #main-wrapper #header #nav-wrapper .logo-light,
html.after-hours body.header-stuck:not( .home.compact-menu ) #main-wrapper #header #nav-wrapper .logo-light {
	opacity: 1 !important;
}

html.after-hours body.header-stuck:not( .home.compact-menu ) #main-wrapper #header #nav-wrapper .main-d-nav ul li:not( .active ) > a,
html.after-hours body.header-stuck #main-wrapper .menu-firer i.icon-menu {
	color: var( --ah-ink ) !important;
}

/* The band's own copy of the logo, drawn in the greys of the light face:
   turned to its light face here. */
html.after-hours .home-intro-logo-dark {
	filter: invert( 1 ) hue-rotate( 180deg ) brightness( 1.15 );
}

/* ---------------------------------------------------------------------------
   Content: the builder's white sections

   The page builder paints each module's background inline and records it
   as data-bgcolor, so the white ones can be found by it and taken to the
   night's black, their words to its inks. Modules in a colour of their own
   — the projects' green and blue bands, the dark outcome bands — keep it.
   The theme forces .content-module white with !important, hence these.
   --------------------------------------------------------------------------- */

html.after-hours #content-wrapper .content-module {
	background-color: var( --ah-bg ) !important;
}

/* The landing page's grid, though, clear above its frame as it is by day
   (style.css, "The white frame the tiles slide up over the still band
   in"): the grid's top runs up under the band's foot, and the band shows
   there down to the frame. Painted, it covered the band's last stretch and
   the gap over the tiles stood twice as tall as the day's (2026-10-08). */
html.after-hours body:is( .home-intro-up, .home-intro-kept ) #content-wrapper,
html.after-hours body:is( .home-intro-up, .home-intro-kept ) #content-wrapper .content-module.portfolio {
	background-color: transparent !important;
}

html.after-hours #content-wrapper .module:is( [data-bgcolor="#ffffff" i], [data-bgcolor="#fff" i], [data-bgcolor="#fafafa" i], [data-bgcolor="#f7f7f7" i], [data-bgcolor=""] ) {
	background-color: transparent !important;
}

html.after-hours #content-wrapper .module:is( [data-bgcolor="#ffffff" i], [data-bgcolor="#fff" i], [data-bgcolor="#fafafa" i], [data-bgcolor="#f7f7f7" i], [data-bgcolor=""] ) :is( p, li, span, em, label, td, th, figcaption, blockquote ) {
	color: var( --ah-ink-2 ) !important;
}

html.after-hours #content-wrapper .module:is( [data-bgcolor="#ffffff" i], [data-bgcolor="#fff" i], [data-bgcolor="#fafafa" i], [data-bgcolor="#f7f7f7" i], [data-bgcolor=""] ) :is( h1, h2, h3, h4, h5, h6, strong, b ) {
	color: var( --ah-ink ) !important;
}

html.after-hours #content-wrapper .module:is( [data-bgcolor="#ffffff" i], [data-bgcolor="#fff" i], [data-bgcolor="#fafafa" i], [data-bgcolor="#f7f7f7" i], [data-bgcolor=""] ) a {
	color: var( --ah-ink ) !important;
	text-decoration-color: rgba( 236, 238, 234, .35 ) !important;
}

/* ---------------------------------------------------------------------------
   About
   --------------------------------------------------------------------------- */

/* The right column's paper: the left half the page's black, the right a
   step raised, with the grain kept, faint and light. */
@media only screen and ( min-width: 1024px ) {
	html.after-hours #content-wrapper .content-module:has( .cl-skills ) {
		background-image:
			linear-gradient( to right, var( --ah-bg ) 0 50%, transparent 50% 100% ),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
			linear-gradient( 160deg, var( --ah-raised ), var( --ah-raised ) ) !important;
	}
}

/* The intro's two-tone title: the name near-white, the line after it a
   step back. */
html.after-hours body.page-id-565 #content-wrapper .copy h2 > span {
	color: var( --ah-ink-3 ) !important;
}

/* How I work: the cards a step raised, their icons in the ink. */
html.after-hours #content-wrapper .about-how li.about-tenet {
	background: var( --ah-raised );
}

html.after-hours body.page-id-565 #content-wrapper .module .about-how li.about-tenet {
	background: #1b2023;
}

html.after-hours #content-wrapper .about-how .about-tenet__icon,
html.after-hours #content-wrapper .about-how li.about-tenet > svg {
	color: var( --ah-ink ) !important;
}

/* The skills' chips: each group's tint deepened, its words lit. */
html.after-hours #content-wrapper .cl-skills .cl-skills__list li.cl-skills__skill {
	background: color-mix( in srgb, var( --cl-accent, #888 ) 18%, #14181a ) !important;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .05 ) !important;
	color: color-mix( in srgb, var( --cl-accent, #888 ) 35%, #eceeea ) !important;
}

/* Experience: the date pills and the teams' rule. */
html.after-hours #content-wrapper .about-experience .about-role__when {
	background: #1b2023 !important;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .08 ) !important;
	color: var( --ah-ink-2 ) !important;
}

/* The tools' pills, outlined only, as by day. */
html.after-hours #content-wrapper .cs-tools__list li {
	background: transparent !important;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .16 ) !important;
	color: var( --ah-ink-2 ) !important;
}

html.after-hours #content-wrapper .about-experience .about-role__teams {
	border-left-color: var( --ah-line );
}

html.after-hours #content-wrapper .about-experience .about-role__logo {
	background-color: var( --ah-ink-3 );
}

html.after-hours #content-wrapper .about-experience :is( i, svg ).about-role__logo--glyph {
	color: var( --ah-ink-3 );
}

/* The contact form. */
html.after-hours #content-wrapper .wpforms-container :is( input, textarea, select ) {
	background-color: #1b2023 !important;
	border-color: rgba( 255, 255, 255, .12 ) !important;
	color: var( --ah-ink ) !important;
}

html.after-hours #content-wrapper .wpforms-container label {
	color: var( --ah-ink-2 ) !important;
}

html.after-hours #content-wrapper .wpforms-container button[type="submit"] {
	background-color: var( --ah-ink ) !important;
	color: var( --ah-bg ) !important;
}

/* ---------------------------------------------------------------------------
   Project pages

   The content's light surfaces, marked by js/after-hours.js with their own
   colour as --ah-tint: each drawn as a deep shade of that colour over the
   night's black — a pale mint section a dark mint one — with light words.
   --------------------------------------------------------------------------- */

html.after-hours #content-wrapper .ah-surface {
	background-color: color-mix( in srgb, var( --ah-tint ) 13%, #111517 ) !important;
	background-image: none !important;
	border-color: rgba( 255, 255, 255, .08 ) !important;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .05 );
}

/* One the colour of the surface under it carries no box of its own. */
html.after-hours #content-wrapper .ah-surface.ah-surface--clear {
	box-shadow: none;
	border-color: transparent !important;
}

/* The lines between a surface's parts — a table's rows and cells, a
   card's header — drawn faint and light, where their dark hairlines would
   vanish on the night's black. */
html.after-hours #content-wrapper .ah-surface *,
html.after-hours #content-wrapper .module :is( table, thead, tbody, tr, th, td, hr ) {
	border-color: rgba( 255, 255, 255, .1 ) !important;
}

/* A module's whole band is quieter than a card within it. */
html.after-hours #content-wrapper .module.ah-surface {
	background-color: color-mix( in srgb, var( --ah-tint ) 9%, var( --ah-bg ) ) !important;
	box-shadow: none;
}

html.after-hours #content-wrapper .ah-surface,
html.after-hours #content-wrapper .ah-surface :is( p, li, span, em, label, td, th, figcaption, blockquote, small ) {
	color: var( --ah-ink-2 ) !important;
}

html.after-hours #content-wrapper .ah-surface :is( h1, h2, h3, h4, h5, h6, strong, b ) {
	color: var( --ah-ink ) !important;
}

html.after-hours #content-wrapper .ah-surface a {
	color: var( --ah-ink ) !important;
}

/* The credits' rows (css/case-studies.css, "Credits in rows"): titles in
   the ink, answers a step back, and the rules between rows faint and
   light. */
html.after-hours body.single-portfolio #main-wrapper #content-wrapper .cs-credits dt.cs-credit-label {
	color: var( --ah-ink-3 ) !important;
}

html.after-hours body.single-portfolio #content-wrapper .cs-credits dd.cs-credit-value,
html.after-hours body.single-portfolio #content-wrapper .cs-credits dd.cs-credit-value > p {
	color: var( --ah-ink ) !important;
}

html.after-hours body.single-portfolio #main-wrapper #content-wrapper .cs-credits dd.cs-credit-value > p.cs-role-note {
	color: var( --ah-ink-2 ) !important;
}

/* "Launched" in the night's green. */
html.after-hours body.single-portfolio #main-wrapper #content-wrapper .cs-credits :is( .cs-status, .timeline-status ) {
	background: rgba( 46, 106, 76, .28 ) !important;
	color: #9fd6b6 !important;
}

html.after-hours body.single-portfolio #content-wrapper .cs-credits .cs-credit-row {
	border-top-color: var( --ah-line ) !important;
}

/* The spec sheet's rules at night, as the rows' are; the duration a step
   back. */
html.after-hours body.single-portfolio #content-wrapper .cs-credits .cs-duration {
	color: var( --ah-ink-3 ) !important;
}

html.after-hours body.single-portfolio #content-wrapper .copy :is( h2, h3, section, .cs-tools ) {
	border-top-color: var( --ah-line ) !important;
	border-bottom-color: var( --ah-line ) !important;
}

/* The brand logos are masks in the credits' charcoal: lit. */
html.after-hours .cs-brand__logo {
	background-color: var( --ah-ink-2 ) !important;
}

/* The section bar that follows down a case study. */
html.after-hours .cs-phases {
	background-color: rgba( 20, 24, 26, .92 ) !important;
	box-shadow: 0 1px 0 rgba( 255, 255, 255, .06 ) !important;
}

html.after-hours .cs-phases a {
	color: var( --ah-ink-2 ) !important;
}

/* The close of each case study — Outcome and Looking back — set from its
   own palette (css/case-studies.css, .cs-close): the cards a deep shade of
   their colour, the figures a pale one, the lookback's wash a dark tint of
   the cards' colour in place of its light one. */
html.after-hours #content-wrapper .cs-close {
	background-color: var( --ah-bg ) !important;
	color: var( --ah-ink-2 );
	--cs-close-card-fg: var( --ah-ink );
	--cs-close-wash-fg: var( --ah-ink-2 );
}

html.after-hours #content-wrapper .cs-close .cs-outcome__stats li:not( .cs-outcome__featured ) {
	background-color: color-mix( in srgb, var( --cs-close-card ) 14%, #111517 ) !important;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .05 );
}

html.after-hours #content-wrapper .cs-close .cs-outcome__stats li:not( .cs-outcome__featured ) strong {
	color: color-mix( in srgb, var( --cs-close-value ) 45%, #eceeea ) !important;
}

html.after-hours #content-wrapper .cs-close .cs-outcome__stats li:not( .cs-outcome__featured ) span {
	color: var( --ah-ink-2 ) !important;
}

html.after-hours #content-wrapper .cs-close .cs-lookback {
	background: color-mix( in srgb, var( --cs-close-card ) 9%, var( --ah-bg ) ) !important;
}

html.after-hours #content-wrapper .cs-close .cs-lookback strong {
	color: color-mix( in srgb, var( --cs-close-value ) 40%, #eceeea ) !important;
}

html.after-hours #content-wrapper .cs-close :is( h2, h3, p:not( .cs-chip ), li ) {
	color: inherit;
}

/* The agency projects set their text near-black at (1,5,2) with
   !important (css/case-studies.css, "The older projects' type"). */
html.after-hours :is( body.postid-961, body.postid-937, body.postid-908 ) #content-wrapper .content-module > .text-module .copy :is( p:not( .cs-chip ), p span, li ) {
	color: var( --ah-ink-2 ) !important;
}

html.after-hours :is( body.postid-961, body.postid-937, body.postid-908 ) #content-wrapper .content-module > .text-module .copy :is( h2, h2 span, h2 strong ) {
	color: var( --ah-ink ) !important;
}

/* ---------------------------------------------------------------------------
   The slide-out menu (phones and tablets)
   --------------------------------------------------------------------------- */

html.after-hours body.compact-menu nav.main-d-nav {
	background-color: #14181a !important;
	background-image: linear-gradient( to bottom, rgba( 52, 104, 82, .14 ), rgba( 48, 74, 132, .1 ) ) !important;
}

html.after-hours body.compact-menu .main-d-nav .sf-menu > li > a {
	color: var( --ah-ink ) !important;
}

html.after-hours body.compact-menu .main-d-nav .sf-menu > li.active > a {
	color: #9fd6b6 !important;
}

html.after-hours body.compact-menu .main-d-nav .c-close-btn :is( .vr, .hr ) {
	background-color: var( --ah-ink ) !important;
}

html.after-hours body.home.compact-menu #main-wrapper.menu-open {
	background-color: var( --ah-bg ) !important;
}

/* ---------------------------------------------------------------------------
   The tag

   "After hours" beside the logo while the theme is on, in the header's top
   position only — not on the bar that drops in on scrolling up — with a
   red light like a studio's on-air lamp, breathing slowly. Inside the
   logo's link (js/after-hours.js), so it moves and fades with it; it takes
   no clicks of its own.
   --------------------------------------------------------------------------- */

.ah-tag {
	display: none;
}

html.after-hours .ah-tag {
	position: absolute;
	top: 50%;
	left: calc( 100% + 14px );
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 11px 6px 9px;
	border-radius: 999px;
	/* Dark glass, so it reads over a light hero picture as well as over
	   the night's black. */
	background: rgba( 15, 18, 20, .62 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .12 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	color: #dfe3de;
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	translate: 0 -50%;
}

html.after-hours body.header-stuck #header .ah-tag {
	display: none;
}

.ah-tag__light {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff3b30;
	box-shadow:
		0 0 0 2px rgba( 255, 59, 48, .16 ),
		0 0 9px 1px rgba( 255, 59, 48, .8 );
	animation: ah-tag-light 2.8s ease-in-out infinite;
}

@keyframes ah-tag-light {
	50% {
		background: #d8302a;
		box-shadow:
			0 0 0 2px rgba( 255, 59, 48, .08 ),
			0 0 3px 0 rgba( 255, 59, 48, .45 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ah-tag__light {
		animation: none;
	}
}

/* On the landing page, before the band glides away: the tag at the band's
   top right, on the greeting's right margin (js/after-hours.js measures
   it), level with where the header's logo sits (js/intro.js's --logo-y
   and --logo-h), mirroring the logo on the left; fading as the band goes.
   The menu is hidden while the band is up, so the corner is its own. */
html.after-hours .home-intro > .ah-tag--band {
	top: calc( var( --logo-y, 14px ) + var( --logo-h, 42px ) / 2 );
	right: var( --ah-tag-r, 30px );
	left: auto;
	z-index: 3;
	opacity: calc( 1 - var( --p, 0 ) * 3 );
}

/* ---------------------------------------------------------------------------
   Kept as by day

   Livestream Shopping's grey boxed sections — Tested concepts, and the three
   competing needs — keep their grey, and all in them their day colours, at
   night (Corey, 2026-10-08): js/after-hours.js leaves anything under
   --ah-keep: 1 untinted.
   --------------------------------------------------------------------------- */

html.after-hours body.postid-1117 #content-wrapper .module[data-bgcolor="#f1f1f1" i] {
	--ah-keep: 1;
}

/* The theme's own bar under 1024px (style.css), at night: it stayed the
   day's #fafafa. */
@media only screen and ( max-width: 1023px ) {
	html.after-hours body:not( .compact-menu ) #header.sticky #nav-wrapper .main-d-nav {
		background: rgba( 20, 24, 26, .72 ) !important;
		box-shadow: 0 1px 0 rgba( 255, 255, 255, .06 );
	}

	/* Its links light, over the theme's black for the day's bar; the
	   current page's pill keeps its dark word. */
	html.after-hours body:not( .compact-menu ) #header.sticky #nav-wrapper .main-d-nav ul li:not( .active ) > a {
		color: var( --ah-ink ) !important;
	}

	html.after-hours body:not( .compact-menu ) #header.sticky #nav-wrapper .logo-dark {
		opacity: 0 !important;
	}

	html.after-hours body:not( .compact-menu ) #header.sticky #nav-wrapper .logo-light {
		opacity: 1 !important;
	}
}

/* Looking back's cards at night: a breath of light over the wash, as on
   the dark washes by day. */
html.after-hours #content-wrapper .cs-close {
	--cs-learn-card: rgba( 255, 255, 255, .05 );
	--cs-learn-edge: rgba( 255, 255, 255, .07 );
}

/* Their accent — the icons, the titles, the buttons and dots — lit, as
   the night's lead-ins are: the day's deep accent would vanish here. */
html.after-hours #content-wrapper .cs-close .cs-learn {
	--cs-close-wash-lead: color-mix( in srgb, var( --cs-close-value ) 40%, #eceeea );
}

html.after-hours #content-wrapper .cs-close h3.cs-learn__title {
	color: var( --cs-close-wash-lead ) !important;
}