:root {
    --bg: #fafaf8;
    --ink: #111111;
    --hairline: #dedad2;
    --accent: #6b2737;
    --font-display: 'Newsreader', serif;
    --font-body: 'Archivo', sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    height: 100%;
}

/* Classic sticky-footer layout: body stretches to at least the full viewport height, main
   absorbs any leftover space, so the footer sits at the bottom of the viewport on short pages
   instead of floating right under the content. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Header / Nav ---------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2.5rem;
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 50;
}

.site-logo {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
}

.site-nav {
    display: flex;
    gap: 2rem;
}

.site-nav a {
    position: relative;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-bottom: 4px;
}

/* signature: underline draws from center outward on hover/active */
.site-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 1px;
    background: var(--accent);
    transition: left 0.25s ease, right 0.25s ease;
}

.site-nav a:hover::after,
.site-nav a.active::after {
    left: 0;
    right: 0;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.nav-toggle span {
    width: 22px;
    height: 1px;
    background: var(--ink);
}

/* ---------- Gallery heading ---------- */

.gallery-heading {
    padding: 3rem 2.5rem 1.5rem;
}

.gallery-heading h1 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin: 0 0 0.75rem;
}

.gallery-heading::after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    background: var(--accent);
}

/* ---------- Masonry grid ---------- */

.masonry-grid {
    columns: 4 260px;
    column-gap: 2px;
    padding: 0 0 3rem;
}

.grid-item {
    display: block;
    position: relative;
    break-inside: avoid;
    margin-bottom: 2px;
    overflow: hidden;
}

.grid-item img {
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

.grid-item:hover img {
    transform: scale(1.03);
}

.grid-item .caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid-item:hover .caption {
    opacity: 1;
}

.empty-state {
    padding: 2rem 2.5rem;
    font-style: italic;
    color: #777;
}

/* ---------- Static pages ---------- */

.static-page {
    padding: 3rem 2.5rem 6rem;
}

/* Full-bleed section (background/padding spans the page like the gallery grid), but the actual
   prose still wraps at a comfortable reading width instead of stretching edge-to-edge. The
   featured-project section below is deliberately left out of this wrapper — it already centers
   its own pull-quote at a readable width and looks better spanning the full section on wide
   screens. */
.static-page-intro {
    max-width: 640px;
    margin: 0 auto;
}

.error-page {
    text-align: center;
    padding: 3rem 0;
}

.error-page .error-code {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 4rem;
    line-height: 1;
    color: var(--accent);
    margin: 0 0 0.5rem;
}

.error-page h1 {
    margin-bottom: 0.75rem;
}

.error-page p {
    color: #555;
}

.error-back-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.error-back-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.static-page h1 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
}

.static-page p {
    line-height: 1.7;
    color: #333;
}

.static-page-intro p a {
    transition: color 0.15s ease;
}

.static-page-intro p a:hover {
    color: var(--accent);
}

.static-page .tagline {
    font-family: var(--font-display);
    font-style: italic;
    color: #555;
}

.static-page .prose {
    line-height: 1.7;
    color: #333;
}

.about-headline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.4;
    margin: 0 0 0.4rem;
}

.about-location {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
    margin: 0 0 2rem;
}

/* ---------- Contact page ---------- */

.contact-banner {
    display: block;
    width: 100%;
    height: 60vh;
    max-height: 640px;
    object-fit: cover;
}

.social-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-top: 1.75rem;
    /* Safety net on very narrow phones — 6 items at this size fit down to ~360px, so this
       should rarely engage, but scrolling beats letting labels clip or force-wrap. */
    overflow-x: auto;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.social-links a svg {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

.social-links a:hover {
    color: var(--accent);
}

.brand-logos-section {
    margin: 4.5rem 0 2rem;
    padding: 3rem 2.5rem 0;
    border-top: 1px solid var(--hairline);
    text-align: center;
}

.brand-logos-section h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0 0 2rem;
}

.brand-logos-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.brand-logos-strip img {
    max-height: 48px;
    max-width: 140px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.brand-logos-strip img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ---------- Services & Rates ---------- */

.services-section {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--hairline);
}

.services-section h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.75rem;
    margin: 0 0 1.75rem;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.service-card {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--hairline);
}

.service-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.service-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.service-card-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.service-price {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    white-space: nowrap;
}

.service-duration {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
    margin: 0.35rem 0 0;
}

.service-description {
    line-height: 1.7;
    color: #333;
    margin: 0.6rem 0 0;
}

/* ---------- Featured project: editorial pull-quote treatment ---------- */

.featured-project {
    margin: 4.5rem 0 2rem;
    padding: 3rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    text-align: center;
}

.featured-project-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 3rem);
    margin: 0 0 1rem;
}

.featured-project-subheadline {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 2.25rem;
}

.featured-project-body {
    margin: 0 auto;
    max-width: 560px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--ink);
    text-align: left;
    border-left: 2px solid var(--accent);
    padding-left: 1.75rem;
}

.site-logo-img {
    max-height: 3rem;
    display: block;
}

/* ---------- Footer ---------- */

.site-footer {
    padding: 2rem 2.5rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
}

.pagination-wrap {
    padding: 0 2.5rem 3rem;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pagination-arrow,
.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.5rem;
    border: 1px solid var(--hairline);
    color: var(--ink);
    font-size: 0.85rem;
}

.pagination-arrow:hover,
.pagination-page:hover {
    border-color: var(--accent);
}

.pagination-arrow.is-disabled {
    color: #999;
    opacity: 0.5;
    cursor: default;
}

.pagination-page.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    color: #999;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .masonry-grid { columns: 2 180px; }
}

@media (max-width: 640px) {
    .site-nav {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg);
        flex-direction: column;
        gap: 1.5rem;
        padding: 2.5rem;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    .site-nav.open { transform: translateX(0); }
    .nav-toggle { display: flex; }
    .masonry-grid { columns: 1; }
    .contact-banner { height: 45vh; }
}

/* GLightbox's "clean" skin only positions the prev/next arrows on-screen at 769px and up
   (top: -100% below that), leaving mobile to swipe-only navigation. We want the same visible
   tap-to-advance arrows mobile visitors get on desktop. */
@media (max-width: 768px) {
    .glightbox-clean .gprev,
    .glightbox-clean .gnext {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Lighter arrow background at every width — GLightbox's own default (rgba(0,0,0,.75)) only
   backs off to a lighter shade at 769px and up, so below that (including the mobile arrows
   enabled above) it stayed at the darker fallback. */
.glightbox-clean .gprev,
.glightbox-clean .gnext {
    background-color: rgba(0, 0, 0, 0.32);
}

.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .grid-item img,
    .site-nav a::after,
    .site-nav { transition: none; }
}