/*
Theme Name: Island Works Photography
Theme URI: https://islandworksphotography.com
Author: Island Works LLC
Author URI: https://islandworksphotography.com
Description: Custom hand-coded theme for Island Works Photography — fine-art aerial & landscape photography from Harpswell, Maine. Dark-themed, photo-first design with a Gallery, Prints & Framing, About, Contact, and a Journal built on native WordPress posts.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: island-works
*/

/* ==========================================================================
   Reset & base
   ========================================================================== */

* { box-sizing: border-box; }

html { background: oklch(15% 0.01 250); }

body {
	margin: 0;
	background: oklch(15% 0.01 250);
	color: oklch(95% 0.005 250);
	font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: oklch(85% 0.01 250);
	text-decoration: none;
}
a:hover { color: oklch(75% 0.15 85); }

.iw-site { width: 100%; min-height: 100%; }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 26px 28px 26px 48px;
	border-bottom: 1px solid oklch(28% 0.01 250);
	flex-wrap: wrap;
	gap: 12px;
}

.site-logo {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: oklch(95% 0.005 250);
}
.site-logo:hover { color: oklch(95% 0.005 250); }

.site-nav {
	display: flex;
	gap: 28px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: oklch(75% 0.01 250);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav li { display: contents; }
.site-nav a { color: oklch(75% 0.01 250); }
.site-nav a:hover { color: oklch(75% 0.15 85); }
.site-nav .current-menu-item a,
.site-nav a.current-menu-item {
	color: oklch(95% 0.005 250);
}
.site-nav .current-menu-item a:hover { color: oklch(75% 0.15 85); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	padding: 26px 48px;
	border-top: 1px solid oklch(28% 0.01 250);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}
.site-footer-left {
	font-size: 10px;
	color: oklch(55% 0.01 250);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.site-footer-right {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	white-space: nowrap;
	color: oklch(95% 0.005 250);
}

/* ==========================================================================
   Generic page header (title + intro line), used on Gallery / Prints /
   About / Contact / Journal index
   ========================================================================== */

.page-intro { padding: 56px 48px 40px; }
.page-intro.tight { padding-bottom: 8px; }
.page-title {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 40px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.15;
	max-width: 640px;
}
.page-subtitle {
	font-size: 14px;
	color: oklch(75% 0.01 250);
	margin-top: 10px;
	max-width: 560px;
	line-height: 1.5;
}
.page-subtitle.italic {
	font-style: italic;
	color: oklch(70% 0.01 250);
	max-width: 520px;
	line-height: 1.6;
}
.eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: oklch(75% 0.15 85);
}

/* ==========================================================================
   Panels (bordered content boxes — About / Prints / Contact)
   ========================================================================== */

.panel {
	border: 1px solid oklch(28% 0.01 250);
	border-radius: 2px;
	padding: 32px 30px;
	max-width: 640px;
}
.panel + .panel { margin-top: 20px; }
.panel-eyebrow {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: oklch(75% 0.15 85);
}
.panel-heading {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 22px;
	font-weight: 800;
	margin-top: 12px;
	letter-spacing: -0.005em;
}
.panel-heading.large {
	font-size: 19px;
}
.panel-body {
	font-size: 14px;
	line-height: 1.7;
	color: oklch(85% 0.005 250);
	margin-top: 14px;
}
.panel-body p { margin: 0 0 14px; }
.panel-body p:last-child { margin-bottom: 0; }
.panel-fine {
	font-size: 12px;
	color: oklch(60% 0.01 250);
	margin-top: 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.panel-row { padding: 32px 48px 8px; display: flex; gap: 24px; flex-wrap: wrap; }
.panel-row .panel { flex: 1 1 360px; max-width: 400px; min-width: 0; }
.panel-row .panel.narrow { flex-basis: 260px; max-width: 300px; }

.page-body { }
.section { padding: 0 48px 8px; }
.section.pad-top { padding-top: 32px; }
.section.pad-top-sm { padding-top: 20px; }
.section-loose { padding: 28px 48px 56px; }

.foot-strip {
	border-top: 1px solid oklch(28% 0.01 250);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: oklch(85% 0.005 250);
}
.foot-strip .highlight { color: oklch(95% 0.005 250); }
.foot-note {
	border-top: 1px solid oklch(28% 0.01 250);
	padding-top: 24px;
	font-size: 12px;
	color: oklch(60% 0.01 250);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	max-width: 640px;
}

/* ==========================================================================
   Homepage hero
   ========================================================================== */

.hero {
	position: relative;
	width: 100%;
	height: 560px;
	overflow: hidden;
	background: oklch(12% 0.02 260);
}
.hero img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.hero-tagline {
	position: absolute;
	top: 44px; right: 48px;
	text-align: right;
	font-size: 13px;
	color: oklch(96% 0.005 250);
	max-width: 260px;
	line-height: 1.5;
	text-shadow: 0 1px 10px oklch(5% 0 0 / 0.85), 0 1px 3px oklch(5% 0 0 / 0.9);
}

/* ==========================================================================
   Gallery grid
   ========================================================================== */

.gallery-grid {
	padding: 0 48px 48px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 8px;
	gap: 12px;
	grid-auto-flow: dense;
}
.gallery-tile {
	display: block;
	background: oklch(10% 0.01 250);
	overflow: hidden;
	transition: opacity 0.15s ease;
}
.gallery-tile:hover { opacity: 0.82; cursor: pointer; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }

.gallery-tile.span-2-11 { grid-column: span 2; grid-row: span 11; }
.gallery-tile.span-2-10 { grid-column: span 2; grid-row: span 10; }
.gallery-tile.span-2-18 { grid-column: span 2; grid-row: span 18; }
.gallery-tile.span-3-12 { grid-column: span 3; grid-row: span 12; }

.empty-note { padding: 0 48px 48px; color: oklch(65% 0.01 250); font-size: 14px; }

/* ==========================================================================
   Photo detail (single-photo.php)
   ========================================================================== */

.back-link-row { padding: 24px 48px 0; }
.back-link {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: oklch(65% 0.01 250);
}

.photo-detail { padding: 28px 48px 0; }
.photo-detail-inner { max-width: 700px; }
.photo-detail-image {
	float: left;
	width: 340px;
	margin: 4px 32px 20px 0;
	background: oklch(10% 0.01 250);
	overflow: hidden;
}
.photo-detail-title {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 28px;
	font-weight: 800;
	margin-top: 10px;
	letter-spacing: -0.005em;
	line-height: 1.2;
}
.photo-detail-caption {
	font-size: 13px;
	font-style: italic;
	color: oklch(70% 0.01 250);
	margin-top: 10px;
	line-height: 1.6;
}
.photo-detail-story {
	font-size: 14px;
	line-height: 1.75;
	color: oklch(85% 0.005 250);
	margin-top: 18px;
}
.photo-detail-story p { margin: 0 0 14px; }
.photo-detail-story p:first-child { margin-top: 0; }
.clearfix { clear: both; }

.detail-nav {
	padding: 40px 48px 56px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.detail-nav .dim { color: oklch(65% 0.01 250); }
.detail-nav .disabled { color: oklch(45% 0.01 250); }
.detail-nav .center-link { color: oklch(95% 0.005 250); }

/* ==========================================================================
   Journal index
   ========================================================================== */

.journal-list {
	padding: 0 48px 56px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: oklch(28% 0.01 250);
}
.journal-card {
	background: oklch(15% 0.01 250);
	padding: 28px 0;
	display: flex;
	gap: 28px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.journal-thumb {
	flex: 0 0 220px;
	width: 220px;
	height: 150px;
	border-radius: 2px;
	object-fit: cover;
}
.journal-body { flex: 1; min-width: 0; }
.journal-meta {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: oklch(60% 0.01 250);
}
.journal-title {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 22px;
	font-weight: 800;
	margin-top: 8px;
	letter-spacing: -0.005em;
	transition: color 0.15s ease;
	color: oklch(95% 0.005 250);
}
.journal-card:hover .journal-title { color: oklch(75% 0.15 85); }
.journal-excerpt {
	font-size: 14px;
	line-height: 1.7;
	color: oklch(80% 0.005 250);
	margin-top: 10px;
	max-width: 560px;
}
.journal-readmore {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: oklch(75% 0.15 85);
}
.journal-card-link { display: block; }

/* ==========================================================================
   Journal single post
   ========================================================================== */

.journal-post-header { padding: 28px 48px 0; }
.journal-post-title {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 34px;
	font-weight: 800;
	margin-top: 10px;
	letter-spacing: -0.005em;
	line-height: 1.2;
	max-width: 640px;
}

.journal-media { padding: 24px 48px 0; }
.journal-media-frame {
	border-radius: 2px;
	overflow: hidden;
	max-width: 700px;
	position: relative;
	background: oklch(10% 0.01 250);
}
.journal-media-frame img {
	width: 100%;
	height: auto;
	max-height: 394px;
	object-fit: cover;
	opacity: 0.55;
}
.journal-media-frame.no-image {
	height: 260px;
	max-width: 700px;
}
.play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.play-button {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: oklch(75% 0.15 85);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: oklch(15% 0.01 250);
	padding-left: 4px;
}
.video-links {
	max-width: 700px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 2px 0;
	flex-wrap: wrap;
	gap: 8px;
}
.video-links .youtube-link {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: oklch(75% 0.15 85);
}
.video-links .facebook-link {
	font-size: 12px;
	color: oklch(65% 0.01 250);
}
.video-note { max-width: 700px; padding-top: 6px; }
.video-note p { font-size: 11px; color: oklch(55% 0.01 250); font-style: italic; margin: 0; }

.journal-body-copy { padding: 28px 48px 0; max-width: 640px; }
.journal-body-copy p {
	font-size: 14px;
	line-height: 1.75;
	color: oklch(85% 0.005 250);
	margin: 0 0 16px;
}
.journal-body-copy p:last-child { margin-bottom: 0; }

.journal-inline-link { padding: 20px 48px 0; max-width: 640px; }
.journal-inline-link a { font-size: 13px; color: oklch(75% 0.15 85); }

.post-nav-row { padding: 40px 48px 56px; max-width: 640px; }
.post-nav-strip {
	border-top: 1px solid oklch(28% 0.01 250);
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex-wrap: wrap;
	gap: 8px;
}
.post-nav-strip .dim { color: oklch(65% 0.01 250); }
.post-nav-strip .disabled { color: oklch(45% 0.01 250); }
.post-nav-strip .center-link { color: oklch(95% 0.005 250); }

/* ==========================================================================
   404
   ========================================================================== */

.error-404 { padding: 90px 48px; max-width: 640px; }
.error-404 .code {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 72px;
	font-weight: 900;
	line-height: 1;
	color: oklch(75% 0.15 85);
}
.error-404 h1 {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 28px;
	font-weight: 800;
	margin: 16px 0 0;
	text-transform: uppercase;
	letter-spacing: -0.005em;
}
.error-404 p {
	font-size: 14px;
	line-height: 1.7;
	color: oklch(85% 0.005 250);
	margin-top: 14px;
	max-width: 480px;
}
.error-404 a { font-size: 13px; color: oklch(75% 0.15 85); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 720px) {
	.site-header, .page-intro, .section, .section-loose,
	.back-link-row, .photo-detail, .detail-nav, .site-footer,
	.journal-list, .journal-post-header, .journal-media,
	.journal-body-copy, .journal-inline-link, .post-nav-row,
	.panel-row, .gallery-grid, .error-404 {
		padding-left: 24px;
		padding-right: 24px;
	}
	.photo-detail-image { float: none; width: 100%; margin: 0 0 20px; }
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.gallery-tile.span-3-12 { grid-column: span 2; }
	.journal-thumb { flex-basis: 100%; width: 100%; height: 200px; }
}