/* ─── Google Fonts ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --bg:         #09090A;
    --fg:         #EDE9E0;
    --accent:     #00CCFF;
    --muted:      rgba(237,233,224,0.38);
    --border:     rgba(237,233,224,0.10);
    --sans:       'DM Sans', sans-serif;
    --serif:      'Cormorant Garamond', serif;
    --fg-rgb:     237, 233, 224;
    --bg-rgb:     9, 9, 10;
    --accent-rgb: 0, 204, 255;
}

[data-theme="light"] {
    --bg:         #F5F0E8;
    --fg:         #0E0D0C;
    --accent:     #0099CC;
    --muted:      rgba(14,13,12,0.40);
    --border:     rgba(14,13,12,0.10);
    --fg-rgb:     14, 13, 12;
    --bg-rgb:     245, 240, 232;
    --accent-rgb: 0, 153, 204;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    overflow-x: hidden;
    cursor: none;
    min-height: 100vh;
}

/* ─── Cursor ─────────────────────────────────────────────────────────────── */
.cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width .3s ease, height .3s ease, background .3s ease, border .3s ease;
    will-change: left, top;
}

.cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(var(--accent-rgb),.35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width .4s ease, height .4s ease, border-color .3s ease;
    will-change: left, top;
}

body.is-hovering .cursor {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1.5px solid var(--accent);
}

body.is-hovering .cursor-ring {
    width: 0;
    height: 0;
    border-color: transparent;
}

/* ─── Touch devices: hide custom cursor, restore default ─────────────────── */
@media (hover: none) {
    .cursor, .cursor-ring { display: none; }
    body, *, button, a { cursor: auto; }
}

/* ─── Nav ────────────────────────────────────────────────────────────────── */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 56px;
    transition: padding .4s ease, background .4s ease, backdrop-filter .4s ease;
}

nav.scrolled {
    padding: 20px 56px;
    background: rgba(var(--bg-rgb),.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* ─── Project pages: keep nav readable over dark hero in light mode ───────── */
[data-theme="light"] body.project-page #nav:not(.scrolled) .nav-logo,
[data-theme="light"] body.project-page #nav:not(.scrolled) .nav-links a,
[data-theme="light"] body.project-page #nav:not(.scrolled) .lang-btn,
[data-theme="light"] body.project-page #nav:not(.scrolled) .lang-sep {
    color: #EDE9E0;
}
[data-theme="light"] body.project-page #nav:not(.scrolled) .theme-btn {
    filter: invert(1);
}

.nav-logo {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
}

.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 44px;
    list-style: none;
}

.nav-links a {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    opacity: .45;
    transition: opacity .25s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0; right: 100%;
    height: 1px;
    background: var(--accent);
    transition: right .35s cubic-bezier(.16,1,.3,1);
}

.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }
.nav-links a.active { opacity: 1; }

/* ─── Language Switch ────────────────────────────────────────────────────── */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.lang-btn {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg);
    background: none;
    border: none;
    padding: 0;
    cursor: none;
    opacity: .35;
    transition: opacity .25s ease;
}

.lang-btn:hover  { opacity: .75; }
.lang-btn.active { opacity: 1; }

.lang-sep {
    font-size: 11px;
    color: var(--muted);
    pointer-events: none;
    opacity: .5;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer {
    padding: 28px 56px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer p {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--muted);
}

/* ─── Scroll Reveal ──────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Section Header ─────────────────────────────────────────────────────── */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: 22px;
    margin-bottom: 72px;
}

.section-title {
    font-family: var(--serif);
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 300;
    font-style: italic;
    letter-spacing: -.02em;
    line-height: 1;
}

.section-label {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ─── Page Wrapper ───────────────────────────────────────────────────────── */
.page-content {
    padding: 148px 56px 96px;
}

/* ─── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes revealUp {
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ─── Project Pages ──────────────────────────────────────────────────────── */

/* Back breadcrumb (inside hero, overlay) */
.project-breadcrumb {
    position: absolute;
    top: 96px;
    left: 56px;
    z-index: 10;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(237,233,224,.45);
    text-decoration: none;
    transition: color .25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeIn .6s ease .4s forwards;
}
.project-breadcrumb:hover { color: var(--fg); }

/* Hero */
.project-hero {
    height: 82vh;
    min-height: 520px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.project-hero-bg {
    position: absolute;
    inset: 0;
    background-color: #1a1a18;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
}

.project-hero:hover .project-hero-bg { transform: scale(1.02); }

.project-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9,9,10,.75) 0%, rgba(9,9,10,.1) 50%, transparent 100%);
}

.project-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 56px 56px;
    opacity: 0;
    animation: fadeSlideUp .9s cubic-bezier(.16,1,.3,1) .3s forwards;
}

.project-hero-num {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.project-hero-title {
    font-family: var(--serif);
    font-size: clamp(52px, 9vw, 130px);
    font-weight: 700;
    line-height: .88;
    letter-spacing: -.025em;
    margin-bottom: 16px;
}

.project-hero-cat {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Metadata strip */
.project-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--border);
    padding: 0 56px;
}

.meta-item {
    padding: 26px 0 26px 28px;
    border-left: 1px solid var(--border);
}

.meta-item:first-child { border-left: none; padding-left: 0; }

.meta-label {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
}

.meta-value {
    font-size: 14px;
    font-weight: 300;
    color: var(--fg);
}

/* Overview */
.project-overview {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 80px;
    padding: 80px 56px;
    border-bottom: 1px solid var(--border);
}

.overview-label {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 8px;
}

.overview-text {
    font-family: var(--serif);
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: rgba(var(--fg-rgb),.88);
}

/* ── Project Table of Contents ──────────────────────────────────────── */
.project-toc {
    border-bottom: 1px solid var(--border);
    padding: 0 56px 14px;
}
.toc-heading {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 32px 0 16px;
    display: block;
}
.toc-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: color .25s ease;
}
.toc-num {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    flex-shrink: 0;
}
.toc-name {
    font-family: var(--serif);
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 300;
    font-style: italic;
    color: var(--fg);
    flex: 1;
    transition: color .25s ease;
}
.toc-arrow {
    font-size: 16px;
    color: var(--muted);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1), color .25s ease;
    flex-shrink: 0;
}
.toc-item:hover .toc-name  { color: var(--accent); }
.toc-item:hover .toc-arrow { opacity: 1; transform: translateY(0); color: var(--accent); }

/* Image containers */
.img-full       { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; }
.img-full-tall  { width: 100%; aspect-ratio: 21/8; position: relative; overflow: hidden; }
.img-full-portrait { width: 100%; aspect-ratio: 4/5; position: relative; overflow: hidden; }

.img-row {
    display: grid;
    gap: 3px;
    margin: 3px 0;
}
.img-row-2      { grid-template-columns: 1fr 1fr; }
.img-row-2-asym { grid-template-columns: 2fr 1fr; }
.img-row-2-rev  { grid-template-columns: 1fr 2fr; }
.img-row-3      { grid-template-columns: 1fr 1fr 1fr; }

.img-block {
    position: relative;
    overflow: hidden;
}
.img-block[data-ratio="4/3"]  { aspect-ratio: 4/3; }
.img-block[data-ratio="3/4"]  { aspect-ratio: 3/4; }
.img-block[data-ratio="1/1"]  { aspect-ratio: 1/1; }
.img-block[data-ratio="16/9"] { aspect-ratio: 16/9; }
.img-block[data-ratio="3/2"]  { aspect-ratio: 3/2; }
.img-block[data-ratio="2/3"]  { aspect-ratio: 2/3; }

.img-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .75s cubic-bezier(.16,1,.3,1);
}
.img-block:hover .img-bg,
.img-full:hover .img-bg,
.img-full-tall:hover .img-bg { transform: scale(1.03); }

.img-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(237,233,224,.2);
    pointer-events: none;
}

.img-caption {
    padding: 14px 56px;
    font-size: 11px;
    font-weight: 300;
    color: var(--muted);
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}

/* Text block */
.project-text {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 80px;
    padding: 80px 56px;
    border-bottom: 1px solid var(--border);
}

.project-text-label {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 6px;
}

.project-text-body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.82;
    color: rgba(var(--fg-rgb),.7);
}

.project-text-body strong { color: var(--fg); font-weight: 500; }
.project-text-body p + p  { margin-top: 22px; }

/* Credits */
.project-credits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 56px;
    border-bottom: 1px solid var(--border);
}

.credit-item {
    padding: 0 28px;
    border-left: 1px solid var(--border);
}

.credit-item:first-child { border-left: none; padding-left: 0; }

.credit-role {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
}

.credit-name { font-size: 14px; font-weight: 300; }

/* Next project link */
.next-project {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 56px;
    text-decoration: none;
    color: var(--fg);
    border-bottom: 1px solid var(--border);
    transition: background .3s ease;
}

.next-project:hover { background: rgba(var(--fg-rgb),.03); }

.next-label {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.next-title {
    font-family: var(--serif);
    font-size: clamp(36px, 6vw, 80px);
    font-weight: 300;
    font-style: italic;
    letter-spacing: -.02em;
}

.next-arrow {
    font-size: 36px;
    color: var(--accent);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.next-project:hover .next-arrow { transform: translateX(14px); }

/* ─── Theme Toggle Button ────────────────────────────────────────────────── */
.theme-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--muted);
    background: none;
    cursor: none;
    padding: 0;
    margin-left: 14px;
    position: relative;
    flex-shrink: 0;
    transition: border-color .25s ease;
}

.theme-btn::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--fg);
    transition: opacity .3s ease, transform .3s ease;
}

[data-theme="light"] .theme-btn::before {
    opacity: 0;
    transform: scale(0.5);
}

.theme-btn:hover { border-color: var(--accent); }

/* ─── Light mode: project hero text stays readable over dark image bg ─────── */
[data-theme="light"] .project-hero-content,
[data-theme="light"] .project-hero-content * { color: #EDE9E0; }
[data-theme="light"] .project-hero-cat       { color: rgba(237,233,224,.55); }
[data-theme="light"] .project-breadcrumb     { color: rgba(237,233,224,.45); }
[data-theme="light"] .project-breadcrumb:hover { color: #EDE9E0; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    nav          { padding: 24px 28px; }
    nav.scrolled { padding: 18px 28px; }
    .page-content { padding: 108px 28px 72px; }
    footer        { padding: 24px 28px; }

    .project-breadcrumb     { left: 28px; }
    .project-hero-content   { padding: 0 28px 40px; }
    .project-meta           { grid-template-columns: 1fr 1fr; padding: 0 28px; }
    .meta-item              { padding-left: 20px; }
    .project-overview       { grid-template-columns: 1fr; gap: 16px; padding: 56px 28px; }
    .project-text           { grid-template-columns: 1fr; gap: 16px; padding: 56px 28px; }
    .project-credits        { grid-template-columns: 1fr 1fr; padding: 32px 28px; gap: 24px 0; }
    .credit-item            { border-left: none; padding: 0; }
    .img-caption            { padding: 12px 28px; }
    .img-row-2, .img-row-2-asym, .img-row-2-rev, .img-row-3 { grid-template-columns: 1fr; }
    .next-project           { padding: 40px 28px; }
    .project-toc            { padding: 0 28px; }
    .toc-name               { font-size: 18px; }
}

/* ─── Hamburger button ───────────────────────────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: 12px;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--fg);
    transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }

[data-theme="light"] body.project-page #nav:not(.scrolled) .hamburger span { background: #EDE9E0; }

/* ─── Mobile Menu overlay ────────────────────────────────────────────────── */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 40px 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 120px;
    margin-bottom: auto;
}

.mobile-nav-links a {
    font-family: var(--serif);
    font-size: clamp(44px, 13vw, 64px);
    font-weight: 300;
    font-style: italic;
    letter-spacing: -.02em;
    color: var(--fg);
    text-decoration: none;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1), color .2s ease;
    line-height: 1.2;
}

.mobile-menu.open .mobile-nav-links a:nth-child(1) { opacity: .85; transform: none; transition-delay: .06s; }
.mobile-menu.open .mobile-nav-links a:nth-child(2) { opacity: .85; transform: none; transition-delay: .11s; }
.mobile-menu.open .mobile-nav-links a:nth-child(3) { opacity: .85; transform: none; transition-delay: .16s; }

.mobile-nav-links a:hover,
.mobile-nav-links a.active { color: var(--accent); opacity: 1; }

.mobile-menu-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 48px;
}

.mobile-menu-footer .lang-btn { font-size: 13px; }
.mobile-menu-footer .lang-sep { font-size: 13px; }

body.menu-open { overflow: hidden; }

@media (max-width: 540px) {
    .nav-links       { display: none; }
    .hamburger       { display: flex; }
    .project-meta    { grid-template-columns: 1fr 1fr; }
    .project-credits { grid-template-columns: 1fr; }
    .about-cta       { flex-direction: column; align-items: flex-start; }
}