/* ============================================================
   Studio Maurice Shapero — Shared Stylesheet
   ============================================================ */

/* ===== VARIABLES ===== */
:root {
    --black: #0a0a0a;
    --dark: #111111;
    --dark-mid: #1a1a1a;
    --grey-dark: #2a2a2a;
    --grey: #555;
    --grey-light: #888;
    --off-white: #e8e4df;
    --white: #f5f2ed;
    --accent: #c4a882;
    --accent-dim: rgba(196, 168, 130, 0.15);
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'DM Sans', Helvetica, sans-serif;
    --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; background: var(--black); }
body {
    font-family: var(--sans);
    background: var(--black);
    color: var(--off-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ===== NAVIGATION ===== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.5s var(--transition), padding 0.4s var(--transition);
}

nav.scrolled {
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1rem 3rem;
}

.nav-logo {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
}

.nav-logo span { color: var(--accent); }

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

.nav-links a {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grey-light);
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.4s var(--transition);
}

.nav-links a:hover,
.nav-links a.active { color: var(--white); }

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Nav back link (project pages) */
.nav-back {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grey-light);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: color 0.3s ease;
}
.nav-back:hover { color: var(--white); }
.nav-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    background: none;
    border: none;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--white);
    transition: all 0.3s ease;
}

/* Hamburger → X animation */
.nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Mobile nav overlay */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.6);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.nav-overlay.visible {
    opacity: 1;
}

/* ===== SECTION LABEL ===== */
.section-label {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--grey-light);
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.section-label::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--accent);
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
    0% { top: -100%; }
    50% { top: 100%; }
    100% { top: 100%; }
}

@keyframes heroSlow {
    0% { transform: scale(1.03); }
    100% { transform: scale(1.0); }
}

@keyframes heroZoom {
    0% { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    animation: fadeUp 1s var(--transition) 1.2s forwards;
}

.scroll-indicator span {
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--grey-light);
    writing-mode: vertical-rl;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: var(--grey);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 1px;
    height: 100%;
    background: var(--accent);
    animation: scrollPulse 2s ease-in-out infinite;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--transition), transform 0.8s var(--transition);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== PROJECT HERO (shared across project pages & heritage) ===== */
.project-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.project-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    animation: heroSlow 20s var(--transition) infinite alternate;
}

.project-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(10,10,10,0.25) 0%,
        rgba(10,10,10,0.0) 30%,
        rgba(10,10,10,0.0) 50%,
        rgba(10,10,10,0.7) 85%,
        rgba(10,10,10,1) 100%
    );
}

.project-hero-content {
    position: absolute;
    bottom: 6rem;
    left: 3rem;
    right: 3rem;
    max-width: 700px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s var(--transition) 0.3s forwards;
}

.project-hero-meta {
    font-family: var(--sans);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.8rem;
}

.project-hero-title {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 300;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 0.6rem;
}

.project-hero-location {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--grey-light);
}

/* ===== PROJECT BODY LAYOUT ===== */
.project-body { max-width: 100%; }

.project-text {
    max-width: 700px;
    margin: 0 auto;
    padding: 5rem 3rem;
}

.project-text p {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--grey-light);
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.project-text p:last-child { margin-bottom: 0; }
.project-text p strong { color: var(--off-white); font-weight: 400; }

.project-text blockquote {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 300;
    font-style: italic;
    color: var(--off-white);
    line-height: 1.6;
    border-left: 2px solid var(--accent);
    padding-left: 1.5rem;
    margin: 2.5rem 0;
}

/* Full-bleed image */
.project-image-full {
    width: 100%;
    height: 85vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Two-up images */
.project-image-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

.project-image-pair .pair-image {
    height: 70vh;
    background-size: cover;
    background-position: center;
}

/* ===== IMAGE PAIR (img-based, used across project pages) ===== */
.image-pair {
    display: flex;
    gap: 3px;
    margin-bottom: 3px;
}

.image-pair img {
    width: calc(50% - 1.5px);
    height: auto;
    object-fit: cover;
    display: block;
}

/* data-fill: images fill height of tallest */
.image-pair[data-fill="true"] img {
    flex: 1;
    min-width: 0;
    object-fit: cover;
    height: 70vh;
    width: calc(50% - 1.5px);
}

/* Pair ratio variants */
.pair-ab img:first-child { width: 67%; }
.pair-ab img:last-child  { width: calc(33% - 3px); }

.pair-cd img:first-child { width: 50%; }
.pair-cd img:last-child  { width: calc(50% - 3px); }

.pair-ef img:first-child { width: 70%; }
.pair-ef img:last-child  { width: calc(30% - 3px); }

.pair-gh img:first-child { width: 51.7%; }
.pair-gh img:last-child  { width: calc(48.3% - 3px); }

.pair-ij img:first-child { width: 31.4%; }
.pair-ij img:last-child  { width: calc(68.6% - 3px); }

/* Numbered pair variants (default 50/50) */
.pair-42 img { width: calc(50% - 1.5px); }
.pair-35 img { width: calc(50% - 1.5px); }
.pair-67 img { width: calc(50% - 1.5px); }
.pair-08-06 img { width: calc(50% - 1.5px); }

/* Full-bleed pair variants */
.full-bleed-row { width: 100vw; margin-left: calc(-50vw + 50%); }
.full-bleed-row img { width: calc(50% - 1.5px); }

.pair-10-11 img { width: calc(50% - 1.5px); }
.pair-15-07 img { width: calc(50% - 1.5px); }

/* project-image-pair full-bleed variant (king-henry etc.) */
.project-image-pair.full-bleed {
    width: 100%;
}
.project-image-pair.full-bleed img {
    width: 100%;
    height: auto;
    display: block;
}

/* project-image-full: img tag support (in addition to background-image) */
.project-image-full img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== CONTAINED IMAGE ===== */
.project-image-contained {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3rem;
}

.project-image-contained img {
    width: 100%;
    display: block;
}

/* ===== HALF-WIDTH IMAGE ===== */
.project-image-half {
    max-width: 55%;
    margin: 0 auto;
    padding: 0 3rem;
}

.project-image-half img {
    width: 100%;
    display: block;
}

/* ===== FOUR-IMAGE ROW ===== */
.image-row-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.image-row-four img {
    width: 100%;
    display: block;
}

/* ===== FULL-WIDTH IMAGE (heritage page) ===== */
.image-full {
    width: 100%;
}

.image-full img {
    width: 100%;
    display: block;
}

/* Image with caption */
.project-image-captioned {
    padding: 0 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.project-image-captioned img { width: 100%; display: block; }

.project-image-captioned .image-placeholder {
    width: 100%;
    aspect-ratio: 3/2;
    background-size: cover;
    background-position: center;
}

.image-caption {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--grey);
    letter-spacing: 0.05em;
    margin-top: 0.8rem;
    padding-bottom: 1rem;
}

/* Triple image layout */
.image-triple { display: flex; gap: 3px; }
.image-triple-item { flex: 1; }
.image-triple-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Image single (heritage page) */
.image-single { display: flex; justify-content: center; padding: 2rem 3rem; }
.image-single img { max-width: 50vw; width: 100%; display: block; }

/* Details grid */
.project-details {
    max-width: 700px;
    margin: 0 auto;
    padding: 4rem 3rem;
    border-top: 1px solid var(--grey-dark);
    border-bottom: 1px solid var(--grey-dark);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.detail-label {
    font-family: var(--sans);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 0.3rem;
}

.detail-value {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--off-white);
}

/* Next project link */
.next-project {
    position: relative;
    height: 50vh;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.next-project-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s var(--transition);
}

.next-project:hover .next-project-bg { transform: scale(1.03); }

.next-project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.7);
    transition: background 0.5s ease;
}

.next-project:hover .next-project-overlay { background: rgba(10,10,10,0.5); }

.next-project-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.next-project-label {
    font-family: var(--sans);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.8rem;
}

.next-project-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 300;
    color: var(--white);
}

/* Photo credit */
.photo-credit {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 3rem 0;
}

.photo-credit p {
    font-family: var(--sans);
    font-size: 0.65rem;
    color: var(--grey);
    letter-spacing: 0.05em;
}

/* ===== FOOTER ===== */
footer {
    padding: 3rem;
    border-top: 1px solid var(--grey-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-left {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--grey);
    letter-spacing: 0.1em;
}

.footer-links { display: flex; gap: 2rem; }

.footer-links a {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--grey);
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

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

/* ===== BLOG STYLES ===== */
.blog-toc {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 3rem 4rem;
}

.blog-toc a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--grey-dark);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.blog-toc a:first-child { border-top: 1px solid var(--grey-dark); }
.blog-toc a:hover { opacity: 0.7; }
.blog-toc-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--white); }
.blog-toc-date { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); white-space: nowrap; margin-left: 2rem; }
.blog-post { max-width: 800px; margin: 0 auto; padding: 6rem 3rem; border-top: 1px solid var(--grey-dark); }
.blog-post-date { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.blog-post-title { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; color: var(--white); line-height: 1.15; margin-bottom: 2.5rem; }
.blog-post-body p { font-family: var(--sans); font-size: 0.95rem; font-weight: 300; color: var(--grey-light); line-height: 1.9; margin-bottom: 1.5rem; }
.blog-post-body p strong { color: var(--off-white); font-weight: 400; }
.blog-post-body p em { font-style: italic; color: var(--off-white); }
.blog-post-body .addendum { border-top: 1px solid var(--grey-dark); margin-top: 3rem; padding-top: 2rem; }
.blog-post-body .addendum-label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.blog-post-body .addendum a { color: var(--accent); text-decoration: none; }

.blog-images { margin: 2.5rem 0; }
.blog-images img { width: 100%; display: block; margin-bottom: 3px; }
.blog-image-pair { display: flex; gap: 3px; margin-bottom: 3px; }
.blog-image-pair img { height: auto; }
.pair-ai-model img:first-child { width: 36%; }
.pair-ai-model img:last-child { width: calc(64% - 3px); }
.pair-50 img { width: calc(50% - 1.5px); }
.pair-plans img:first-child { width: 60%; }
.pair-plans img:last-child { width: calc(40% - 3px); }
.pair-schools img:first-child { width: 52%; }
.pair-schools img:last-child { width: calc(48% - 3px); }
.blog-images img[style*="max-width"] { margin-left: auto; margin-right: auto; }
.blog-image-caption { font-family: var(--sans); font-size: 0.7rem; font-weight: 300; color: var(--grey); margin-top: 0.5rem; }

.blog-nav {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 3rem 5rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--grey-dark);
}

.blog-nav a {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-nav a:hover { color: var(--white); }

.back-to-top { max-width: 800px; margin: 0 auto; padding: 3rem 3rem 5rem; text-align: center; border-top: 1px solid var(--grey-dark); }
.back-to-top a { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-light); text-decoration: none; transition: color 0.3s ease; }
.back-to-top a:hover { color: var(--white); }

/* ===== PAGE HEADER (projects, blog) ===== */
.page-header {
    padding: 10rem 3rem 4rem;
}

.page-header h1 {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 1rem;
}

.page-header p {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--grey-light);
    max-width: 600px;
    line-height: 1.7;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    /* Image layout resets */
    .image-triple { display: block; }
    .image-triple-item { margin-bottom: 1px; }
    .image-triple-item:last-child { margin-bottom: 0; }
    .image-pair,
    .blog-image-pair,
    .blog-image-row { flex-direction: column !important; }
    .image-pair img,
    .blog-image-pair img,
    .blog-image-row img { width: 100% !important; height: auto !important; }

    /* Nav */
    nav { padding: 1.2rem 1.5rem; }
    nav.scrolled { padding: 1rem 1.5rem; }
    .nav-toggle { display: flex; }
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: var(--dark);
        flex-direction: column;
        padding: 5rem 2rem;
        gap: 2rem;
        transition: right 0.5s var(--transition);
        z-index: 999;
    }
    .nav-links.open { right: 0; }
    .nav-overlay { display: block; }

    /* Project layout */
    .project-image-pair { grid-template-columns: 1fr !important; }
    .project-image-pair .pair-image { height: 50vh; }
    .project-hero-content { bottom: 4rem; left: 1.5rem; right: 1.5rem; }
    .project-text { padding: 3.5rem 1.5rem; }
    .project-image-full { height: 55vh; }
    .project-image-full img { height: auto; }
    .project-image-captioned { padding: 0 1.5rem; }
    .project-image-contained { padding: 0 1.5rem; max-width: 100%; }
    .project-image-half { max-width: 100%; padding: 0 1.5rem; }
    .image-pair[data-fill="true"] img { height: 50vh; }
    .image-row-four { grid-template-columns: repeat(2, 1fr); }
    .full-bleed-row { width: 100%; margin-left: 0; }
    .project-details { padding: 3rem 1.5rem; grid-template-columns: 1fr; gap: 1.5rem; }
    .next-project { height: 35vh; }
    .photo-credit { padding: 2rem 1.5rem 0; }
    .image-single img { max-width: 100vw; }

    /* Sections */
    .section { padding: 5rem 1.5rem; }
    .page-header { padding: 8rem 1.5rem 3rem; }
    .scroll-indicator { display: none; }

    /* Blog */
    .blog-toc { padding: 0 1.5rem 3rem; }
    .blog-post { padding: 4rem 1.5rem; }
    .blog-nav { padding: 2rem 1.5rem 4rem; }
    .back-to-top { padding: 2rem 1.5rem 4rem; }

    /* Footer */
    footer { padding: 2rem 1.5rem; flex-direction: column; text-align: center; }
}