/*
 * Dark mode (2026-10-01). The same paper-and-ink world at night: a warm
 * charcoal ground, not black, and warm off-white ink, so the site reads as
 * the firm's rather than as a template's dark theme.
 *
 * It follows the device unless the spirit-level toggle has set a choice.
 * The inline head script in functions.php puts `is-dark` on <html> before
 * first paint and tracks the device live. `html.is-dark` (0,1,1) also
 * outranks the `:root` accent that functions.php prints inline.
 *
 * Screen only: a printout (the capabilities statement) is always paper.
 *
 * Every text token is solved against card and the raised surface (the
 * lightest grounds either sits on) and clears 4.5:1 on all three surfaces.
 */
@media screen {
html.is-dark {
	color-scheme: dark;
	--paper-rgb: 28 26 23;
	--ink: #ebe6dc;
	--body-muted: #c8c1b4;
	--muted: #aea698;
	--faint: #a69e91;
	--fainter: #a19a8d;
	--card: #25221e;
	/* `white` is the raised surface: form fields, experience rows. */
	--white: #2a2723;
	--img-placeholder: #322e29;
	--accent: #c69a6f;
	--error-ink: #ec9488;
	--hairline: rgba(255, 255, 255, 0.10);
	--hairline-soft: rgba(255, 255, 255, 0.07);
	/* The light the photographs' overlays and the lightbox were drawn in.
	   Those surfaces are dark in both modes, so they keep it. */
	--light-rgb: 244 242 237;
}

/* Dark in both modes: text over photographs and the lightbox chrome keep the
   daytime paper as their light, or they would go dark on dark. */
html.is-dark .hero,
html.is-dark .jg-lightbox,
html.is-dark .proj-hero,
html.is-dark .jg-rendering-tag,
html.is-dark .jg-scan-tag,
html.is-dark .jg-existing-tag {
	--paper-rgb: var(--light-rgb);
	--paper: rgb(var(--light-rgb));
}
html.is-dark .jg-rendering-tag,
html.is-dark .jg-existing-tag,
html.is-dark .jg-scan-tag {
	background: rgb(20 18 15 / 0.86);
}

/* The quote band was ink on paper's ground; at night it becomes a lifted
   panel rather than a bright slab. */
html.is-dark .testimonial-band { background: var(--card); color: var(--ink); border: 1px solid var(--hairline); }

/* Hairline underlines and outlines drawn in black alpha. */
html.is-dark .evidence-list a,
html.is-dark .btn-outline,
html.is-dark .sector-viewall,
html.is-dark .principal-contact a,
html.is-dark .contact-done-next a,
html.is-dark .contact-tel { border-color: rgb(255 255 255 / 0.22); }
html.is-dark .cta-dot { border-color: rgb(255 255 255 / 0.30); }
html.is-dark .exp-chip { border-color: rgb(255 255 255 / 0.18); }
html.is-dark .exp-item { border-color: rgb(255 255 255 / 0.08); background: var(--white); }

/* Form: the underline is ink already; the message box had a white wash. */
html.is-dark .field textarea { border-color: rgb(235 230 220 / 0.45); background: rgb(255 255 255 / 0.03); }
html.is-dark .contact-notice.is-success { background: #1f3322; color: #9fd4a4; }
html.is-dark .contact-notice.is-error { background: #3a2220; color: var(--error-ink); }

html.is-dark .jg-lightbox-thumb { background-color: #3a352e; }

/* Photographs stay as shot. Only the very brightest white-ground images
   (scan screenshots, drawings) would glare; none are dimmed in the mock-up. */

/* The select's chevron is an inline SVG drawn in daytime ink. */
html.is-dark .field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ebe6dc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
}

/* The studio map is drawn on paper. At night its canvas is turned over into
   a dark map (hue rotated back so the roads keep their warmth); the JG pin is
   an HTML marker above the canvas, so it keeps its own colours. */
html.is-dark .map-live .maplibregl-canvas { filter: invert(0.9) hue-rotate(180deg) saturate(0.6); }
html.is-dark .map-live .maplibregl-ctrl-group button span { filter: invert(1) saturate(0); }
html.is-dark .map-live .maplibregl-ctrl-attrib { background: rgb(var(--paper-rgb) / 0.82); }

/* The experience list's selected tab was a paper-white pill under ink text;
   at night it takes the same light pill as the selected client chip. */
html.is-dark .exp-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* The booking page. Google's calendar is a cross-origin frame and cannot
   follow the scheme, so at night it is drawn inverted, with the hue turned
   back so Google's blues stay blue: a dark calendar in a dark page (the
   firm's pick over setting it on a light sheet, 2026-10-01). invert(.9)
   lands its white near our charcoal; the day-mode multiply blend is off,
   since multiplying the inverted frame onto charcoal would crush its text. */
html.is-dark .book-frame { background: var(--paper); }
html.is-dark .book-frame iframe { mix-blend-mode: normal; filter: invert(0.9) hue-rotate(180deg); }
}