/*
Theme Name: Morgan Wells
Theme URI: https://example.com
Author: The Didovic Weddings Team
Author URI: https://example.com
Description: A high-end, editorial, minimalist WordPress theme built for portrait and wedding photography. Features a full-screen media hero with split navigation, light fonts with wide letter-spacing, and a white page with a near-black ink palette. The hero keeps a soft dark scrim over its photography so the overlaid type stays readable; the rest of the site is light-only with no theme switch.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morganwells
Tags: photography, one-column, custom-menu, custom-logo, custom-header, featured-images, threaded-comments, translation-ready
*/

/*
 * Google Fonts
 * Montserrat in light weights (200, 300, 400) for the editorial look.
 * The @import rule must appear before any other CSS rules.
 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&display=swap");

/* ==========================================================================
	0. Design Tokens
	--------------------------------------------------------------------------
	One fixed light palette — the theme is white-only by design. There is no
	dark variant and no runtime toggle, so these custom properties are the
	single source of truth for colour across the stylesheet.

	--mw-*      : on-page colour (white paper, near-black ink).
	--mw-hero-* : on-media colour for the full-bleed hero, where a dark scrim
	              sits behind the type and white stays the readable foreground.
	========================================================================== */
:root {
	--mw-paper: #ffffff;
	--mw-ink: #0a0a0a;
	--mw-ink-soft: rgba(10, 10, 10, 0.72);
	--mw-ink-muted: rgba(10, 10, 10, 0.45);
	--mw-surface: #f7f7f7;
	--mw-placeholder: #f0f0f0;
	--mw-line: rgba(10, 10, 10, 0.1);
	--mw-line-strong: rgba(10, 10, 10, 0.28);
	--mw-wash: rgba(10, 10, 10, 0.05);

	--mw-hero-ink: #ffffff;
	--mw-hero-line: rgba(255, 255, 255, 0.4);
	--mw-hero-line-strong: rgba(255, 255, 255, 0.7);
	--mw-hero-wash: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
	1. Reset / Base
	========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 300;
	color: var(--mw-ink);
	background-color: var(--mw-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Screen-reader-only utility, per Accessibility standards. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--mw-ink);
	clip: auto !important;
	clip-path: none;
	color: var(--mw-paper);
	display: block;
	font-size: 0.875rem;
	font-weight: 300;
	height: auto;
	left: 5px;
	top: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
	2. Hero (Full Viewport Header)
	========================================================================== */
.site-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh; /* Mobile-friendly full viewport height. */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #0a0a0a; /* Fallback colour before media loads. */

	/* Type sits on the scrim, so the hero renders light-on-dark. The compact
	   header re-asserts the dark ink below. */
	color: var(--mw-hero-ink);
}

/* Background slide stack — a pure background layer, crossfaded by JS. */
.hero-slides {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #0a0a0a;
}

/*
 * Each slide fills the viewport as a background. Images render via
 * background-image (cover); videos render inside their own cover box.
 */
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease, visibility 0.9s;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.hero-slide--image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-slide--video,
.hero-slide--video video {
	width: 100%;
	height: 100%;
}

.hero-slide--video video {
	object-fit: cover;
}

/*
 * Soft scrim behind the hero type. Kept dark in this white theme: the hero is
 * always full-bleed photography or video, and a light wash would leave the
 * white headline and nav unreadable.
 */
.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0.3) 50%,
		rgba(0, 0, 0, 0.6) 100%
	);
	z-index: 2;
}

/* ==========================================================================
	3. Top Navigation — brand left, menu right
	========================================================================== */
/* Pinned to the top of the hero, like a normal site nav. */
.hero-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 32px 48px;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 300;
	box-sizing: border-box;
}

/* Menu group is pinned to the right edge of the navbar. */
.hero-nav-menu {
	display: flex;
	align-items: center;
	gap: 32px;
}

.hero-nav-menu ul {
	display: flex;
	align-items: center;
	gap: 32px;
}

.hero-nav a {
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease, opacity 0.3s ease;
}

.hero-nav a:hover,
.hero-nav a:focus {
	border-bottom-color: var(--mw-hero-line-strong);
	opacity: 0.85;
}

/* Brand (logo or site name) on the left. */
.hero-brand {
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 7px;
	text-align: left;
	white-space: nowrap;
}

.hero-brand img {
	max-height: 48px;
	width: auto;
}

/* Mobile-only hamburger toggle — hidden until the ≤900px media query. */
.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: transparent;
	/* Border and bars follow the inherited text colour, so this control reads
	   correctly both over the hero media (white) and on the white compact
	   header (dark ink). */
	border: 1px solid currentColor;
	color: inherit;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.nav-toggle:hover,
.nav-toggle:focus {
	background-color: var(--mw-wash);
}

/* Inside the hero the surrounding type is white, so the hover wash must be
   light rather than the page's dark wash. */
.site-hero .nav-toggle:hover,
.site-hero .nav-toggle:focus {
	background-color: var(--mw-hero-wash);
}

/* Three-bar hamburger icon; morphs into a close (X) while open. */
.nav-toggle__bars {
	position: relative;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	transition: background-color 0.3s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.3s ease, top 0.3s ease;
}

.nav-toggle__bars::before {
	top: -6px;
}

.nav-toggle__bars::after {
	top: 6px;
}

/* Text label next to the icon (hidden where space is tight). */
.nav-toggle__label {
	line-height: 1;
}

/* ==========================================================================
	4. Optional Centre Content — headline + subtitle over the media
	========================================================================== */
.hero-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 24px;
}

.hero-content h1 {
	margin: 0 0 16px;
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	font-weight: 200;
	letter-spacing: 7px;
	text-transform: uppercase;
	line-height: 1.1;
}

.hero-content h3 {
	margin: 0;
	font-size: clamp(0.8rem, 2vw, 1.05rem);
	font-weight: 300;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.85;
}

/* ==========================================================================
	5. Side Accent Arrows (slider / gallery triggers)
	========================================================================== */
.hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--mw-hero-line);
	border-radius: 50%;
	font-size: 0.85rem;
	letter-spacing: 2px;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hero-arrow:hover,
.hero-arrow:focus {
	background-color: var(--mw-hero-wash);
	border-color: var(--mw-hero-ink);
}

.hero-arrow--left {
	left: 32px;
}

.hero-arrow--right {
	right: 32px;
}

/* ==========================================================================
	6. Page Content (below the hero)
	========================================================================== */
.site-main {
	position: relative;
	z-index: 2;
	background-color: var(--mw-paper);
	padding: 96px 24px;
	min-height: 50vh;
}

.site-main .content-wrap {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.site-main h2 {
	font-weight: 200;
	letter-spacing: 5px;
	text-transform: uppercase;
}

.site-main p {
	line-height: 1.9;
	font-weight: 300;
	color: var(--mw-ink-soft);
}

/* Site footer. */
.site-footer {
	background-color: var(--mw-paper);
	padding: 32px 24px;
	text-align: center;
	font-size: 0.7rem;
	font-weight: 300;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--mw-ink-muted);
	border-top: 1px solid var(--mw-line);
}

/* ==========================================================================
	7. About Section (homepage split grid)
	========================================================================== */

/* Front page: the About section supplies its own top spacing, so the main
   wrapper's padding must not compound with it. */
main.site-main--front {
	padding-top: 0;
}

.split-about-section {
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	box-sizing: border-box;
}

/* Central max-width container (prevents touching screen edges). */
.site-container {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}

/* Inner two-column grid. */
.split-grid {
	display: flex;
	gap: 60px;
	align-items: center;
}

/* Columns split (50/50 desktop). */
.split-col {
	flex: 1;
	width: 50%;
}

/* Left column: two imagery blocks side by side. */
.media-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.image-wrapper .grid-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Thin editorial heading. Prefixed with .site-main so it beats the generic
   .site-main h2 / p typography. */
.site-main .thin-heading {
	font-family: "Montserrat", sans-serif;
	font-weight: 200;
	font-size: 38px;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 24px;
}

.site-main .normal-description {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.8;
	color: var(--mw-ink-soft);
	margin: 0;
}

/* ==========================================================================
	8. Gallery Showcase (homepage masonry grid)
	========================================================================== */
.gallery-showcase-section {
	width: 100%;
	padding-top: 80px;
	padding-bottom: 80px;
	box-sizing: border-box;
}

/*
 * Lightbox2 overrides so the full-screen modal matches the light site
 * palette. Lightbox2 ships a dark skin, so the white chrome (close button,
 * prev/next arrows) is inverted and the copy is re-coloured to dark ink.
 */
.lb-outerContainer {
	background-color: var(--mw-paper);
}

.lb-data .lb-caption,
.lb-data .lb-number {
	color: var(--mw-ink-soft);
}

.lb-data .lb-caption {
	background-color: var(--mw-paper);
}

.lb-data .lb-close {
	opacity: 0.75;
	filter: invert(1);
	transition: opacity 0.3s ease;
}

.lb-data .lb-close:hover {
	opacity: 1;
}

/* Prev/next arrows are white glyphs on a dark skin. */
.lb-data .lb-nav {
	opacity: 0.75;
	filter: invert(1);
	transition: opacity 0.3s ease;
}

.lb-data .lb-nav:hover {
	opacity: 1;
}

/* CSS Columns masonry — fast and lightweight, no layout JS required. */
.masonry-grid {
	column-count: 3; /* 3 columns on desktop */
	column-gap: 20px;
	width: 100%;
}

.masonry-item {
	break-inside: avoid; /* Prevents an image splitting across columns */
	margin-bottom: 20px;
	overflow: hidden;
	background-color: var(--mw-placeholder);
}

.masonry-item a {
	display: block;
	width: 100%;
	cursor: pointer;
}

.masonry-item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease, filter 0.4s ease;
}

/* Hover effect. */
.masonry-item:hover img {
	transform: scale(1.03);
	filter: brightness(0.9);
}

/* Notice shown before any URLs are added in the Customizer. */
.gallery-empty-notice {
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mw-ink-muted);
	margin: 0;
}

/* ==========================================================================
	9b. Portfolio List (WP_Query-driven responsive grid)
	========================================================================== */
.portfolio-list-section {
	width: 100%;
	padding-top: 80px;
	padding-bottom: 80px;
	box-sizing: border-box;
}

/* Flex grid — up to 3 columns per row, 30px gutter (2 gaps × 30px = 60px). */
.portfolio-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.portfolio-card {
	flex: 0 0 calc((100% - 60px) / 3);
}

/* Whole card is wrapped in one link. */
.portfolio-card__link {
	display: block;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

/* Fixed 4:3 image container — images cover the area, never distort. */
.portfolio-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--mw-placeholder);
}

.portfolio-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.4s ease;
}

.portfolio-card__link:hover .portfolio-card__media img,
.portfolio-card__link:focus .portfolio-card__media img {
	transform: scale(1.03);
	filter: brightness(0.9);
}

/* Title sits directly beneath the image. */
.portfolio-card__title {
	margin: 16px 0 0;
	font-size: 0.95rem;
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mw-ink);
}

/* Notice shown before the first portfolio item is published. */
.portfolio-empty-notice {
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mw-ink-muted);
	margin: 0;
}

/* ==========================================================================
	9c. Portfolio item page + archive (/portfolio/)
	========================================================================== */

/* The archive heading spans full width above the grid section. */
.portfolio-archive-header {
	padding-top: 96px;
	text-align: center;
}

.portfolio-archive-title {
	margin: 0;
	font-weight: 200;
	font-size: 38px;
	letter-spacing: 4px;
	text-transform: uppercase;
}

/*
 * Single portfolio item. The hero is edge to edge, so this wrapper drops the
 * shared .site-main padding; .site-container supplies the gutters and the
 * vertical rhythm for the body copy underneath.
 */
.site-main--portfolio-single {
	padding: 0;
}

.site-main--portfolio-single .site-container {
	padding-top: 88px;
	padding-bottom: 88px;
}

/* ---- Hero: featured image with the item title over it ---- */
.portfolio-hero {
	position: relative;
	width: 100%;
	height: clamp(380px, 70vh, 720px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	/* Scrim colour, also the backdrop when no featured image is set. */
	background-color: #0a0a0a;

	/* The title sits on the scrim, so the hero is light-on-dark. */
	color: var(--mw-hero-ink);
}

.portfolio-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.portfolio-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Scrim behind the title. Matches the homepage hero so both read the same. */
.portfolio-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0.3) 50%,
		rgba(0, 0, 0, 0.6) 100%
	);
}

.portfolio-hero__content {
	position: relative;
	z-index: 3;

	/*
	 * Nudged below the top so the overlaid nav can never sit on the title.
	 * calc() against the viewport lets the offset collapse on short screens.
	 */
	padding: clamp(72px, 12vh, 120px) 24px 0;
	text-align: center;
}

.portfolio-hero__title {
	margin: 0;
	font-weight: 200;
	font-size: clamp(1.8rem, 5vw, 4rem);
	letter-spacing: 6px;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--mw-hero-ink);
	text-wrap: balance;
}

.portfolio-single__content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/*
 * Body images on a portfolio item. WordPress gallery blocks render a
 * flex layout with cropped columns; images are wrapped in a Lightbox2 anchor
 * (see morganwells_enable_portfolio_item_lightbox in inc/portfolio.php), so
 * the whole tile is the click target and shows a pointer + gentle lift on
 * hover to signal it opens full screen.
 */
.portfolio-single__content .wp-block-gallery {
	margin: 48px auto;
	gap: 16px;
}

.portfolio-single__content .wp-block-image {
	margin: 0;
}

.portfolio-single__content figure {
	margin: 0;
}

/* The lightbox anchor wrapping each image. */
.portfolio-single__content a[data-lightbox] {
	display: block;
	overflow: hidden;
	background-color: var(--mw-placeholder);
	cursor: zoom-in;
	transition: opacity 0.3s ease;
}

.portfolio-single__content a[data-lightbox]:hover,
.portfolio-single__content a[data-lightbox]:focus {
	opacity: 0.88;
}

.portfolio-single__content a[data-lightbox] img {
	width: 100%;
	height: auto;
	display: block;
}

.portfolio-single__back {
	margin: 48px 0 0;
	text-align: center;
}

.portfolio-single__back a {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--mw-line-strong);
	font-size: 0.75rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	transition: border-color 0.3s ease, opacity 0.3s ease;
}

.portfolio-single__back a:hover,
.portfolio-single__back a:focus {
	border-color: var(--mw-ink);
	opacity: 0.85;
}

/* ==========================================================================
	9d. Compact header (interior pages — slim nav only)
	========================================================================== */
.site-header-compact {
	position: relative;
	z-index: 2;
	background-color: var(--mw-paper);
	border-bottom: 1px solid var(--mw-line);

	/* The nav markup is shared with the hero, where it sits light-on-dark.
	   Here it sits on a white bar, so re-assert the dark ink. */
	color: var(--mw-ink);
}

/* Override the hero-nav's absolute overlay positioning: sit in normal flow,
   constrained to the shared 1200px site width. */
.site-header-compact .hero-nav {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 30px;
}

/* Inverted hover rules for the same reason: the hero rule is light-on-dark. */
.site-header-compact .hero-nav a:hover,
.site-header-compact .hero-nav a:focus {
	border-bottom-color: var(--mw-ink);
}

/*
 * Overlay variant (single portfolio item).
 *
 * The page opens with a full-bleed image hero, so the bar lifts off the flow
 * and floats on top of it. Two things must flip back: the type returns to
 * white for legibility over the photograph, and the z-index has to clear
 * .site-main (z-index 2) because the header is the earlier sibling and would
 * otherwise paint underneath the hero.
 */
.site-header-compact.site-header-compact--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background-color: transparent;
	border-bottom: 0;
	color: var(--mw-hero-ink);
}

.site-header-compact.site-header-compact--overlay .hero-nav a:hover,
.site-header-compact.site-header-compact--overlay .hero-nav a:focus {
	border-bottom-color: var(--mw-hero-ink);
}

/* The nav is light here, so the toggle's hover wash must be light too. */
.site-header-compact.site-header-compact--overlay .nav-toggle:hover,
.site-header-compact.site-header-compact--overlay .nav-toggle:focus {
	background-color: var(--mw-hero-wash);
}

/* ==========================================================================
	9e. Contact CTA (above the footer, all pages)
	========================================================================== */
.contact-cta-section {
	width: 100%;
	padding: 100px 0;
	background-color: var(--mw-surface);
	border-top: 1px solid var(--mw-line);
	box-sizing: border-box;
	text-align: center;
}

.contact-cta__heading {
	margin: 0 0 16px;
	font-weight: 200;
	font-size: clamp(1.6rem, 3.5vw, 2.6rem);
	letter-spacing: 5px;
	text-transform: uppercase;
}

.contact-cta__copy {
	max-width: 560px;
	margin: 0 auto 32px;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.9;
	color: var(--mw-ink-soft);
}

.contact-cta__button {
	display: inline-block;
	padding: 15px 38px;
	border: 1px solid var(--mw-line-strong);
	font-size: 0.8rem;
	font-weight: 300;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--mw-ink);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-cta__button:hover,
.contact-cta__button:focus {
	background-color: var(--mw-ink);
	border-color: var(--mw-ink);
	color: var(--mw-paper);
}

/* ==========================================================================
	9f. Footer social icons
	========================================================================== */
.site-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0 0 24px;
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mw-line-strong);
	border-radius: 50%;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus {
	border-color: var(--mw-ink);
	background-color: var(--mw-wash);
}

.site-footer__social svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ==========================================================================
	9g. Homepage section headings (Gallery / Portfolio)
	========================================================================== */
.section-heading {
	margin: 0 0 40px;
	font-weight: 200;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	letter-spacing: 5px;
	text-transform: uppercase;
	text-align: center;
	color: var(--mw-ink);
}

/* ==========================================================================
	9h. Reveal-on-scroll (only animates when JS is active)
	========================================================================== */
html.js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}



/* ==========================================================================
	9i. Skip-to-content link (accessibility)
	========================================================================== */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 13px 18px;
	background-color: var(--mw-ink);
	color: var(--mw-paper);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
	box-shadow: 0 0 0 3px var(--mw-line-strong);
}

/* ==========================================================================
	9. Responsive — stack / collapse on small screens
	========================================================================== */
@media (max-width: 900px) {
	/* Nav collapses to a brand + toggle row with the menu tucked beneath. */
	.hero-nav {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 12px 20px;
		padding: 20px;
	}

	.nav-toggle {
		display: inline-flex;
	}

	/* Menus collapse into a light panel beneath, hidden until toggled. */
	.hero-nav-menu {
		display: block;
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		padding: 0 16px;
		margin-top: 0;
		background-color: rgba(255, 255, 255, 0.95);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease, padding 0.4s ease;

		/* The panel is white, so its links must be dark ink even where the
		   surrounding nav sits white-on-media inside the hero. */
		color: var(--mw-ink);
	}

	.hero-nav.is-open .hero-nav-menu {
		max-height: 560px;
		opacity: 1;
		visibility: visible;
		padding: 14px 16px;
		margin-top: 4px;
		border-top: 1px solid var(--mw-line);
		border-bottom: 1px solid var(--mw-line);
	}

	/* Link hover underline follows the panel's ink, not the hero's white. */
	.hero-nav.is-open .hero-nav-menu a:hover,
	.hero-nav.is-open .hero-nav-menu a:focus {
		border-bottom-color: var(--mw-ink);
	}

	/* Open state morphs the hamburger bars into a close (X). */
	.hero-nav.is-open .nav-toggle__bars {
		background-color: transparent;
	}

	.hero-nav.is-open .nav-toggle__bars::before {
		top: 0;
		transform: rotate(45deg);
	}

	.hero-nav.is-open .nav-toggle__bars::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* Menus stack vertically inside the open panel. */
	.hero-nav-menu ul {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}

	.hero-content {
		padding: 0 16px;
	}

	.hero-arrow--left {
		left: 16px;
		width: 44px;
		height: 44px;
	}

	.hero-arrow--right {
		right: 16px;
		width: 44px;
		height: 44px;
	}

	.site-main {
		padding: 64px 20px;
	}
}

@media (max-width: 480px) {
	.hero-arrow {
		display: none; /* Arrow accents are redundant on very small screens. */
	}
}

/* About section: single-column stacked layout below 768px. */
@media (max-width: 768px) {
	.split-about-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.site-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.split-grid {
		flex-direction: column;
		gap: 40px;
	}

	.split-col {
		width: 100%;
	}

	.site-main .thin-heading {
		font-size: 28px;
	}
}

/* Gallery: masonry columns collapse from 3 → 2 → 1. */
@media (max-width: 900px) {
	.gallery-showcase-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.masonry-grid {
		column-count: 2; /* 2 columns on tablets */
	}
}

@media (max-width: 600px) {
	.masonry-grid {
		column-count: 1; /* 1 column on mobile phones */
	}
}

/* Portfolio: columns collapse from 3 → 2 → 1. */
@media (max-width: 900px) {
	.portfolio-list-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.portfolio-card {
		flex: 0 0 calc((100% - 30px) / 2); /* 2 columns on tablets */
	}

	/* Compact header nav matches the smaller mobile gutter. */
	.site-header-compact .hero-nav {
		padding: 20px;
	}

	/* Portfolio hero: shorter on tablets, and the title clears the nav. */
	.portfolio-hero {
		height: clamp(320px, 58vh, 520px);
	}

	.portfolio-hero__content {
		padding-top: clamp(64px, 11vh, 96px);
	}

	.portfolio-hero__title {
		font-size: clamp(1.5rem, 6vw, 2.4rem);
		letter-spacing: 4px;
	}

	/* Body copy under the hero breathes a bit less on small screens. */
	.site-main--portfolio-single .site-container {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	/* Contact CTA breathes a bit less on small screens. */
	.contact-cta-section {
		padding: 64px 0;
	}

	/* Section headings sit a touch tighter on small screens. */
	.section-heading {
		margin-bottom: 28px;
	}
}

@media (max-width: 600px) {
	.portfolio-card {
		flex: 0 0 100%; /* 1 column on mobile phones */
	}
}