/* ==========================================================================
   Design tokens — edit these per site. Keep colors as CSS custom
   properties (not literals scattered through the file) so a palette
   change is a one-line edit, and comment what each one is FOR, not
   just what it is.
   ========================================================================== */
/* Cartograph (Connary Fagen) is a paid commercial font — not on Google
   Fonts, and no license files exist on this machine yet. Drop the
   licensed web files (woff2 preferred, woff fallback) into /fonts,
   matching the filenames below, and the @font-face block right after
   this :root activates automatically — 'Cartograph' already leads the
   --font-body stack, it just falls through to Space Mono (loaded from
   Google Fonts, see index.html) until the real files exist. */
:root {
	/* No real brand palette yet — these are brighter placeholders
	   (swapped from a duller brick-red/tan starting point) to give the
	   page some energy in the meantime. Swap freely once a real
	   palette is chosen. */
	--color-accent: #E8341F;   /* primary brand color */
	--color-ink: #171308;      /* body text */
	--color-white: #FFFFFF;    /* content backgrounds */
	--color-grey-link: #363636; /* unvisited link text */
	--color-pegboard-bg: #F5E6C8; /* preview-box background, pegboard-dot base */

	--font-title: 'HernandezNiu-UltraBold', Arial Narrow, sans-serif;
	--font-body: 'Cartograph', 'Space Mono', 'Courier New', monospace;
	}

/*
Font: 		Hernandez Niu
Style: 		UltraBold
URL: 		https://youworkforthem.com/font/T6351/hernandez-niu
Foundry: 	LatinoType
Foundry: 	https://youworkforthem.com/designer/220/latinotype
Copyright:	Copyright © 2016 by Daniel Hernandez. All rights reserved.
Version: 	18
License: 	https://www.youworkforthem.com/font-license
License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted
			from using the WebFonts(s) listed without a purchased license.
			All details above must always remain unaltered and visible in your CSS.
*/
@font-face {
	font-family: 'HernandezNiu-UltraBold';
	src: url('fonts/hernandez-niu-ultrabold.woff2') format('woff2'),
		url('fonts/hernandez-niu-ultrabold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	}

/* Uncomment once the licensed Cartograph files are in /fonts (see note above).
@font-face {
	font-family: 'Cartograph';
	src: url('fonts/Cartograph-Regular.woff2') format('woff2'),
		url('fonts/Cartograph-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	}

@font-face {
	font-family: 'Cartograph';
	src: url('fonts/Cartograph-Bold.woff2') format('woff2'),
		url('fonts/Cartograph-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	}
*/

*, *::before, *::after {
	box-sizing: border-box;
	}

body {
	margin: 0;
	color: var(--color-ink);
	background-color: var(--color-white);
	font-family: var(--font-body), Arial, Verdana, Sans-serif;
	}

img {
	border: none;
	max-width: 100%;
	height: auto;
	}

/* ==========================================================================
   Accessibility: skip-link. Pair with tabindex="-1" on the page's
   <main id="content"> so it's a valid, focusable jump target.
   ========================================================================== */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background-color: var(--color-white);
	color: var(--color-ink);
	padding: 10px 16px;
	text-decoration: none;
	}

.skip-link:focus {
	left: 10px;
	top: 10px;
	}

/* ==========================================================================
   Layout shell. max-width + width:100% + margin:0 auto is the
   recurring pattern for every centered content band — title, nav,
   content, footer all share it so they line up.
   ========================================================================== */
#title,
#navcontainer,
#content,
#footer {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	}

#title {
	background-color: var(--color-accent);
	padding: 40px 24px;
	text-align: center;
	}

#title h1 {
	color: var(--color-white);
	margin: 0 0 12px;
	text-wrap: balance;
	}

#tagline {
	color: var(--color-white);
	margin: 0;
	}

/* Optional title-banner photo pattern: an image that must fill a
   flex row's full height via object-fit: cover. A plain <img> won't
   reliably stretch to 100% height in a flex row (browsers size
   replaced elements by their intrinsic aspect ratio first) — wrap it
   in a block-level div instead and absolutely-position the image
   inside that. See js-global/lightbox.js's sibling note, or the
   diddy-wa-diddy project, for the worked example:
   #title { display: flex; align-items: stretch; }
   #title-photo-wrap { flex: 0 0 auto; width: 30%; max-width: 240px;
     position: relative; overflow: hidden; }
   #title-photo { position: absolute; inset: 0; width: 100%;
     height: 100%; object-fit: cover; display: block; } */

#navcontainer ul {
	margin: 0 auto;
	padding: 8px 0 5px 0;
	text-align: center;
	list-style-type: none;
	}

#navcontainer ul li {
	display: inline;
	}

#navcontainer ul li a {
	color: var(--color-ink);
	padding: 5px 16px;
	text-decoration: none;
	}

#navcontainer ul li a:hover,
#navcontainer ul li a.active {
	color: var(--color-accent);
	}

/* Optional dropdown submenu — pairs with nav.php's 'children' key. */
#navcontainer ul li.has-submenu {
	display: inline-block;
	position: relative;
	}

#navcontainer ul li .submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 6px 0;
	list-style: none;
	white-space: nowrap;
	background-color: var(--color-white);
	border: 1px solid var(--color-accent);
	text-align: left;
	z-index: 10;
	}

#navcontainer ul li.has-submenu:hover .submenu,
#navcontainer ul li.has-submenu:focus-within .submenu {
	display: block;
	}

#content {
	background-color: var(--color-white);
	padding: 20px;
	}

a:link {
	color: var(--color-grey-link);
	font-weight: bold;
	}

a:hover,
a:active {
	color: var(--color-accent);
	}

#footer {
	text-align: center;
	padding: 25px 20px;
	font-size: 0.85em;
	}

@media (max-width: 480px) {
	#navcontainer ul {
		white-space: normal;
		}
	}


/* ==========================================================================
   Gallery lightbox — see js-global/lightbox.js
   ========================================================================== */
#lightbox {
	border: none;
	padding: 0;
	margin: 0;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	background: transparent;
	overflow: visible;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.18s ease, transform 0.18s ease, overlay 0.18s ease allow-discrete, display 0.18s ease allow-discrete;
	}

#lightbox[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transform: scale(1);
	}

#lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
	}

@starting-style {
	#lightbox[open] {
		opacity: 0;
		transform: scale(0.96);
		}
	}

@media (prefers-reduced-motion: reduce) {
	#lightbox {
		transition: none;
		}
	}

.lightbox-img {
	display: block;
	max-width: 78vw;
	max-height: 80vh;
	margin: 0 auto;
	}

#lightbox.is-loading .lightbox-img {
	visibility: hidden;
	}

.lightbox-spinner {
	display: none;
	}

#lightbox.is-loading .lightbox-spinner {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--color-white);
	border-radius: 50%;
	animation: lightbox-spin 0.8s linear infinite;
	}

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

@keyframes lightbox-spin {
	to { transform: rotate(360deg); }
	}

.lightbox-caption {
	color: var(--color-white);
	font-size: 0.9em;
	text-align: center;
	margin: 10px 0 0;
	}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
	position: fixed;
	background: none;
	color: var(--color-white);
	border: none;
	cursor: pointer;
	line-height: 1;
	opacity: 0.55;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
	transition: opacity 0.15s ease;
	}

.lightbox-close {
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	font-size: 1.8rem;
	}

.lightbox-prev,
.lightbox-next {
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	font-size: 1.6rem;
	}

.lightbox-prev {
	left: 16px;
	}

.lightbox-next {
	right: 16px;
	}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
	opacity: 1;
	}

.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
	border-radius: 50%;
	}


/* ==========================================================================
   Homepage hero — two-column "coming soon" layout. Left: welcome copy.
   Right: rotating image preview box. See partials/header.php's usual
   #title banner for the multi-page pattern this page intentionally
   skips — it's a single placeholder page for now.
   ========================================================================== */
#content.hero {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	/* Full-bleed on this page — overrides the shared #title/#navcontainer
	   /#content/#footer max-width cap so the showcase image reaches the
	   real right and bottom edges of the viewport instead of stopping
	   at a centered 1100px column. */
	max-width: none;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 0;
	}

.hero-intro {
	flex: 1 1 0%;
	min-width: 300px;
	padding: 48px 40px 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	}

.hero-intro-copy {
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* pinned to the top — any leftover
		vertical space (from a short intro next to a tall showcase, or
		vice versa) collects below the text, just above the footer,
		instead of centering the block and splitting the gap */
	flex: 1 1 auto;
	/* Lets h1/h2 size themselves off THIS box's own width via cqw,
	   instead of vw (viewport width) — the column is a fixed fraction
	   of the viewport, so vw-based sizing grows with the full viewport
	   regardless of the column's actual width, and at plenty of real
	   widths the text ends up wider than the column has room for
	   (overflowing into the showcase column, which then paints over
	   it since it comes later in the DOM — this is what clipped the
	   "D" in "Pegboard"). cqw tracks the column itself instead. */
	container-type: inline-size;
	}

.hero-intro .hero-brand {
	font-family: var(--font-title);
	font-size: 1.5rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink);
	/* Needs the extra .hero-intro specificity to beat the generic
	   ".hero-intro p { margin: 0 0 16px }" rule below — .hero-brand is
	   a <p> too, so it was matching that instead of this. */
	margin: 0;
	}

.hero-intro h1 {
	font-family: var(--font-title);
	font-weight: normal; /* Hernandez Niu is UltraBold by design — only
		registers as weight 400 (see @font-face above), so leave the
		browser's default h1 bold off or it'll synthesize a faux-bold
		on top of an already-ultrabold face. */
	font-size: clamp(2rem, 15cqw, 4rem); /* cqw, not vw — see
		.hero-intro-copy's container-type above */
	white-space: nowrap; /* belt and braces on top of the cqw sizing —
		see .hero-intro h2's note below for why */
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0; /* h1 is always immediately followed by h2 here, so no
		bottom margin to cancel out below */
	}

.hero-intro h2 {
	font-family: var(--font-title);
	font-weight: normal; /* Hernandez Niu is UltraBold by design — only
		registers as weight 400 (see @font-face above), so leave the
		browser's default h1 bold off or it'll synthesize a faux-bold
		on top of an already-ultrabold face. */
	font-size: clamp(1rem, 6cqw, 2.5rem); /* cqw, not vw — see
		.hero-intro-copy's container-type above. The column is a fixed
		fraction of the viewport, so vw-based sizing drifts out of
		proportion with it and "Studio + Gallery" wraps/overflows at
		plenty of real widths; cqw tracks the column itself instead. */
	white-space: nowrap; /* belt and braces on top of the cqw sizing */
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 40px; /* top:0 keeps it flush against h1 directly,
		instead of the old margin-top:-20px hack that cancelled out
		h1's bottom margin; bottom:20px carries the same gap h1 used to
		have, so spacing before the next paragraph is unchanged. */
	}

.hero-intro p {
	font-size: 0.9rem; /* a little smaller than the base size — the lede
		below stays at 1rem so it still reads as the opening line */
	line-height: 1.7;
	margin: 0 0 16px;
	}

.hero-intro p.hero-lede {
	font-size: 1rem;
	font-weight: bold;
	}

.hero-intro p:last-child {
	margin-bottom: 0;
	}

.hero-showcase {
	flex: 2 1 0%;
	min-width: 320px;
	position: relative;
	min-height: 320px;
	/* Matches the studio photos' own 3:4 portrait ratio — every one of
	   the 13 (confirmed via naturalWidth/Height, which respects each
	   photo's EXIF orientation) is exactly that shape, so this fills
	   the box with zero letterboxing on any slide. */
	aspect-ratio: 3 / 4;
	/* ...but that ratio alone has no ceiling: on a very wide viewport
	   the width (2/3 of the row) drives the height even taller, and
	   since the row stretches both columns to match, .hero-intro gets
	   forced to match too — pushing the footer far below the fold.
	   Cap it to one screen's height; past that, object-fit: contain
	   just letterboxes the photo on the sides instead. */
	max-height: 100vh;
	max-height: 100dvh;
	/* Matches body's white — this used to be the tan pegboard-dot color,
	   but every .rotator-slide is plain white now (see .rotator-slide),
	   so any sub-pixel gap between them was showing a faint tan line
	   against the left column's white. */
	background-color: var(--color-white);
	overflow: hidden;
	}

.rotator {
	position: absolute;
	inset: 0;
	}

.rotator-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	background-color: var(--color-white); /* plain — no color wash or dot
		pattern behind the letterboxed photos */
	transition: opacity 1s ease;
	}

.rotator-slide.is-active {
	opacity: 1;
	}

/* ==========================================================================
   Studio photos — real shots of the space (including actual pegboard
   with art mounted on it). object-fit: contain below keeps the whole
   photo visible regardless of its aspect ratio, letterboxed against
   the slide's own dark tint + pegboard dots rather than cropped.
   ========================================================================== */
.rotator-photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* show the whole photo uncropped — the slide's
		own dark tint + pegboard dots (see .rotator-slide above) show
		through the letterboxed space around it */
	object-position: center top; /* pinned to the top — any leftover
		space (box taller than the photo needs) collects at the bottom
		instead of centering it top and bottom */
	}

.rotator-slide--announce {
	flex-direction: column;
	gap: 8px;
	text-align: center;
	padding: 24px;
	background-color: var(--color-ink);
	/* Punched-hole pegboard dots — kept just on this slide (the photo
	   slides went plain white, see .rotator-slide above) — a dark
	   "shadow" dot plus a light "highlight" dot, slightly offset, so
	   one or the other reads against the dark ink background. */
	background-image:
		radial-gradient(circle, rgba(0, 0, 0, 0.35) 2px, transparent 2.6px),
		radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.35) 1.1px, transparent 1.6px);
	background-size: 22px 22px;
	}

.rotator-announce-eyebrow {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-white);
	opacity: 0.7;
	}

.rotator-announce-headline {
	margin: 0;
	font-family: var(--font-title);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-white);
	}

@media (prefers-reduced-motion: reduce) {
	.rotator-slide {
		transition: none;
		}
	}

@media (max-width: 700px) {
	#content.hero {
		min-height: 0;
		}

	.hero-intro {
		padding: 40px 24px;
		}

	.hero-showcase {
		min-height: 280px;
		}
	}


/* ==========================================================================
   Footer — nested in the left column (see hero-footer-slot below) with
   phone/email + credit link (placeholder Two Bit link, see footer.php).
   ========================================================================== */
.hero-footer-slot {
	border-top: 2px solid var(--color-ink);
	padding-top: 20px;
	}

/* Override the sitewide #footer band styles (centered, capped width,
   generous padding) — here it's a small block inside .hero-intro. */
.hero-footer-slot #footer {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 0.85em;
	}

#footer-contact,
#footer-phone,
#footer-mailing-list {
	margin: 0 0 6px;
	}

#footer-contact a,
#footer-phone a,
#footer-mailing-list a {
	font-family: var(--font-title);
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	}

#footer-credit {
	margin: 0 0 6px;
	}

#footer-copyright {
	margin: 0;
	font-weight: normal;
	opacity: 0.7;
	}