/* Hang This Or That. Warm gallery-wall look: sand and charcoal with a terracotta accent, photos in white-matted frames. */
@font-face { font-family: Inter; font-style: normal; font-weight: 300 900; font-display: fallback; src: url('../fonts/inter-variable.woff2') format('woff2'); }
@font-face { font-family: Cardo; font-style: normal; font-weight: 400; font-display: fallback; src: url('../fonts/cardo-400.woff2') format('woff2'); }
@font-face { font-family: Cardo; font-style: italic; font-weight: 400; font-display: fallback; src: url('../fonts/cardo-400-italic.woff2') format('woff2'); }
@font-face { font-family: Cardo; font-style: normal; font-weight: 700; font-display: fallback; src: url('../fonts/cardo-700.woff2') format('woff2'); }

:root {
	--base: #fbf8f3;
	--sand: #efe7da;
	--line: #e3d9c9;
	--contrast: #231f1c;
	--muted: #5f564e;
	--accent: #a84f28;
	--accent-dark: #8b3f1e;
	--space-20: min(1.5rem, 2vw);
	--space-30: min(2.5rem, 3vw);
	--space-40: min(4rem, 5vw);
	--space-50: min(6rem, 8vw);
	--gap: 1.2rem;
	--text-small: 0.9rem;
	--text-medium: 1.05rem;
	--text-large: clamp(1.3rem, 1.3rem + ((1vw - 0.2rem) * 0.6), 1.65rem);
	--text-x-large: clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.083), 2.5rem);
	--text-xx-large: clamp(2.3rem, 2.3rem + ((1vw - 0.2rem) * 1.9), 3.6rem);
	--heading: Cardo, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--base);
	color: var(--contrast);
	font-family: Inter, sans-serif;
	font-size: var(--text-medium);
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}
p, figure, h1, h2, h3 { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a.underlined { text-decoration: underline; }
a.underlined:hover { text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--heading); font-weight: 400; line-height: 1.15; }
h1 { font-size: var(--text-xx-large); }
h2 { font-size: var(--text-x-large); }

.wrap { max-width: 1200px; margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 20; padding: 0.75rem 1rem; background: #fff; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
.eyebrow { color: var(--accent); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Buttons */
.btn { display: inline-block; padding: 0.8rem 1.4rem; border: 2px solid transparent; border-radius: 3px; font-weight: 600; line-height: 1.2; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { border-color: var(--contrast); }
.btn-ghost:hover { background: var(--contrast); color: var(--base); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Photos hung in a white mat and thin frame */
.frame { display: block; padding: 10px; border: 2px solid var(--contrast); background: #fff; box-shadow: 0 12px 26px rgba(50, 32, 18, 0.2); }
.frame img { width: 100%; }

/* Header */
.site-header { padding: 16px var(--space-50); border-bottom: 1px solid var(--line); background: var(--base); }
.site-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.site-title { font-family: var(--heading); font-size: 1.45rem; line-height: 1.2; }
.site-title a:hover { text-decoration: none; }
.site-nav { font-weight: 500; }
.site-nav ul { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.nav-phone { padding: 0.45rem 0.9rem; border: 2px solid var(--accent); border-radius: 3px; color: var(--accent); font-weight: 600; }
.nav-phone:hover { background: var(--accent); color: #fff; text-decoration: none; }
.nav-open, .nav-close { display: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav-open svg, .nav-close svg { display: block; fill: currentColor; }

@media (max-width: 599px) {
	.nav-open { display: block; }
	.nav-menu { display: none; }
	.nav-menu.is-open { position: fixed; inset: 0; z-index: 10; display: block; padding: 1.5rem var(--space-50); background: var(--base); overflow: auto; }
	.nav-menu.is-open .nav-close { display: block; margin-left: auto; }
	.nav-menu ul { flex-direction: column; align-items: flex-start; margin-top: 2rem; }
}

/* Hero */
.hero { padding: var(--space-50); background: var(--sand); }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-40) var(--space-50); }
.hero h1 { margin-top: 0.75rem; }
.lead { margin-top: var(--gap); color: var(--muted); font-size: 1.2rem; }
.hero .actions { margin-top: 1.75rem; }
.hero-wall { display: grid; grid-template-columns: 5fr 6fr; align-items: center; gap: 20px; max-width: 600px; margin-inline: auto; }
.hero-wall-stack { display: grid; gap: 20px; }

/* Services */
.services { padding: var(--space-50); }
.section-title { max-width: 38rem; margin-bottom: 2rem; }
.section-title h2 { margin-top: 0.5rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 899px) {
	.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.service-grid { grid-template-columns: minmax(0, 1fr); }
}
.service { padding: 1.5rem; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: #fff; }
.service svg { display: block; width: 32px; height: 32px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service h3 { margin-top: 0.9rem; font-size: 1.4rem; }
.service p { margin-top: 0.5rem; color: var(--muted); }

/* Story bands */
.band { padding: var(--space-50); }
.band-sand { background: var(--sand); }
.columns { display: flex; align-items: center; gap: var(--space-40) var(--space-50); }
.col-text { display: flex; flex: 1 1 60%; flex-direction: column; gap: var(--gap); min-width: 0; }
.col-text .story { font-family: var(--heading); font-size: var(--text-large); line-height: 1.3; }
.col-image { display: flex; flex: 1 1 40%; justify-content: center; min-width: 0; }
.col-image .land { width: min(420px, 100%); }
.col-image .port { width: min(300px, 100%); }

@media (max-width: 781px) {
	.hero-row { grid-template-columns: minmax(0, 1fr); }
	.columns { flex-direction: column; align-items: stretch; }
	.col-text, .col-image { flex-basis: auto; }
	.band .columns.photo-first { flex-direction: column-reverse; }
}

/* A few more photos */
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.work-more { margin-top: 2rem; text-align: center; }
@media (max-width: 781px) {
	.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contact band */
.contact { padding: var(--space-50); background: var(--contrast); color: var(--base); text-align: center; }
.contact .eyebrow { color: #e9a27f; }
.contact-name { margin-top: 0.5rem; font-family: var(--heading); font-size: clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 3), 4rem); line-height: 1.2; }
.contact-text { margin-top: 0.5rem; }
.contact .btn { margin-top: 1.5rem; font-size: var(--text-large); }
.contact-email { margin-top: 1.25rem; font-size: min(1.25rem, 5vw); overflow-wrap: anywhere; }

/* Page headings and narrow content (gallery, privacy) */
.page-heading { padding: var(--space-50) var(--space-50) 0; text-align: center; }
.page-heading .lead { margin-top: 0.75rem; }
.content { max-width: calc(680px + var(--space-50) * 2); margin-inline: auto; padding: var(--space-40) var(--space-50) var(--space-50); }
.content.wide { max-width: calc(1100px + var(--space-50) * 2); }
.prose h2 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--gap); }

/* Gallery */
.gallery { columns: 3; column-gap: 1.25rem; }
.tile { position: relative; display: block; margin-bottom: 1.25rem; padding: 8px; overflow: hidden; border: 2px solid var(--contrast); background: #fff; box-shadow: 0 8px 18px rgba(50, 32, 18, 0.16); break-inside: avoid; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.tile img { width: 100%; }
.tile:hover, .tile:focus-visible { box-shadow: 0 14px 28px rgba(50, 32, 18, 0.28); transform: translateY(-3px); }
@media (max-width: 781px) {
	.gallery { columns: 2; column-gap: 0.75rem; }
	.tile { margin-bottom: 0.75rem; padding: 5px; }
}

/* Lightbox */
.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0a0a0a; color: #fff; }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox-stage { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 3rem 1rem 1rem; }
.lightbox-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox button { border: 0; background: rgba(0, 0, 0, 0.5); color: #fff; font: inherit; cursor: pointer; }
.lightbox-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.75rem; height: 2.75rem; font-size: 1.5rem; line-height: 1; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; width: 2.75rem; height: 4rem; font-size: 1.75rem; transform: translateY(-50%); }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }
.lightbox-count { position: absolute; top: 1rem; left: 1rem; font-size: var(--text-small); }
.lightbox-thumbs { display: flex; flex: none; gap: 4px; padding: 8px; overflow-x: auto; }
.lightbox .lightbox-thumbs button { flex: none; width: 56px; height: 56px; padding: 0; background: none; opacity: 0.55; }
.lightbox .lightbox-thumbs button[aria-current="true"] { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }
.lightbox-thumbs img { width: 56px; height: 56px; object-fit: cover; }

/* Footer */
.site-footer { padding: var(--space-40) var(--space-50); border-top: 1px solid var(--line); font-size: 0.95rem; }
.footer-columns { display: flex; justify-content: space-between; gap: var(--gap) var(--space-50); }
.footer-title { font-family: var(--heading); font-size: 1.3rem; line-height: 1.2; }
.footer-title a:hover { text-decoration: none; }
/* "Server Sanity Monitoring by PatchSanity.com": Patch Sanity's shield (fill drifting blue, black, red, black) with the MI,
   and two lines of text no taller than the shield */
.monitored { display: flex; width: max-content; margin-top: 0.9rem; align-items: center; gap: 8px; color: var(--muted); }
.monitored:hover { text-decoration: none; }
.monitored:hover b { text-decoration: underline; }
.ps-text { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 29px; font-size: 11px; line-height: 1.15; white-space: nowrap; }
.ps-text b { color: var(--contrast); font-size: 14px; line-height: 1.1; }
.shield { position: relative; display: block; flex: none; width: 26px; height: 29px; }
.shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes shieldcycle {
	0%, 100% { fill: #14306a; }
	25% { fill: #0b0b0c; }
	50% { fill: #5a0c12; }
	75% { fill: #0b0b0c; }
}
.shield path { fill: #14306a; stroke: #8c8c8c; stroke-width: 1.6; stroke-linejoin: round; animation: shieldcycle 40s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.shield path { animation: none; }
}
.shield img { position: absolute; left: 50%; top: 46%; width: auto; max-width: none; height: 16px; transform: translate(-50%, -50%); }
.footer-contact { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.footer-contact h2 { font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.55; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-contact nav { margin-top: 0.5rem; font-size: var(--text-small); }
@media (max-width: 781px) {
	.footer-columns { flex-direction: column; }
}

/* Call bar on phones */
.call-bar { display: none; }
@media (max-width: 599px) {
	body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
	.call-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; display: block; padding: 0.95rem 1rem calc(0.95rem + env(safe-area-inset-bottom)); background: var(--accent); color: #fff; font-weight: 600; line-height: 1.2; text-align: center; }
	.call-bar:hover { text-decoration: none; }
}

/* Sections ease in as they scroll into view. site.js adds .reveal-on only when it can reveal them again. */
.reveal-on .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-on .reveal.is-seen { opacity: 1; transform: none; }