/* ==========================================================================
   Kerim Sabuncuoğlu — Underwater Photography
   ========================================================================== */
:root {
    --ink: #0f1720;
    --ink-soft: #566573;
    --deep: #0a2540;
    --sea: #0e7490;
    --sea-light: #22a7c4;
    --bg: #ffffff;
    --bg-alt: #f5f7f8;
    --line: #e6eaec;
    --white: #ffffff;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, sans-serif;
    --header-h: 76px;
    --wrap: 1200px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: .01em; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; }
.section { padding: 90px 0; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); text-align: center; margin-bottom: 48px; }
.section-cta { text-align: center; margin-top: 48px; }
.empty-state { text-align: center; color: var(--ink-soft); padding: 60px 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block; padding: 14px 34px; font-family: var(--sans);
    font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
    border-radius: 40px; transition: all .35s var(--ease); cursor: pointer; border: 1px solid transparent;
}
.btn-hero { background: rgba(255,255,255,.95); color: var(--ink); }
.btn-hero:hover { background: var(--white); transform: translateY(-2px); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-dark { background: var(--deep); color: var(--white); border: none; }
.btn-dark:hover { background: var(--sea); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
    padding: 8px 0;
}
.header-inner {
    max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: var(--header-h);
}
.header-left { display: flex; align-items: center; gap: 16px; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.login-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%;
    color: inherit; opacity: .8; transition: opacity .3s, background .3s; flex: none;
}
.login-icon:hover { opacity: 1; background: rgba(255,255,255,.14); }
.brand-name { font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: .02em; }
.brand-tag { font-size: .93rem; letter-spacing: .28em; text-transform: uppercase; opacity: .8; margin-top: 4px; }

.site-nav { display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links > a {
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
    position: relative; padding: 4px 0; transition: opacity .3s;
}
.nav-links > a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
    background: currentColor; transition: width .35s var(--ease);
}
.nav-links > a:hover::after { width: 100%; }
/* Mobile-only elements inside the menu, hidden on desktop */
.nav-mobile-logo, .nav-mobile-social { display: none; }
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: .74rem; letter-spacing: .1em; }
.lang-switch a { opacity: .55; }
.lang-switch a.active { opacity: 1; font-weight: 600; }
.lang-switch .sep { opacity: .4; }

/* Home: transparent header over hero, white text */
.is-home .site-header { color: var(--white); }
.is-home .site-header .brand-tag { opacity: .85; }
/* Inner pages: solid header, spacer for fixed nav */
.is-inner .site-main { padding-top: var(--header-h); }
.is-inner .site-header { background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.4) blur(8px); }

/* Inner page with a top hero: transparent header over the hero (like home) */
.has-hero .site-main { padding-top: 0; }
.has-hero .page-head { display: none; }
.is-inner.has-hero .site-header { background: transparent; color: var(--white); box-shadow: none; backdrop-filter: none; }
.is-inner.has-hero .site-header.scrolled { background: rgba(255,255,255,.97); color: var(--ink); box-shadow: 0 2px 24px rgba(0,0,0,.06); backdrop-filter: saturate(1.4) blur(8px); }

/* Scrolled state (added by JS on home) */
.site-header.scrolled {
    background: rgba(255,255,255,.97); color: var(--ink);
    box-shadow: 0 2px 24px rgba(0,0,0,.06); backdrop-filter: saturate(1.4) blur(8px);
}

/* Hamburger */
.nav-toggle { display: none; background: none; border: 0; width: 34px; height: 26px; position: relative; cursor: pointer; padding: 0; }
.nav-toggle span { position: absolute; left: 0; height: 2px; width: 100%; background: currentColor; transition: transform .35s var(--ease), opacity .3s; }
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 12px; }
.nav-toggle span:nth-child(3) { top: 22px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; height: 100vh; min-height: 560px; }
.hero-swiper, .hero-swiper .swiper-wrapper { height: 100%; }
.hero-slide {
    position: relative; height: 100%; background-size: cover; background-position: center;
    display: flex; align-items: flex-end;
}
.hero-slide.swiper-slide-active .hero-content { animation: heroIn 1.1s var(--ease) both; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,18,32,.72) 0%, rgba(4,18,32,.15) 45%, rgba(4,18,32,.25) 100%); }
.hero-content { position: relative; z-index: 2; color: var(--white); max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 0 24px 12vh; }
.hero-content h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 500; max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.hero-content p { font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 300; max-width: 42ch; margin: 18px 0 28px; opacity: .95; }

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

/* Ken-burns on active slide bg */
.hero-slide::before {
    content: ''; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center;
}
.hero-swiper .swiper-pagination { bottom: 26px !important; text-align: center; }
.hero-swiper .swiper-pagination-bullet { width: 9px; height: 9px; background: #fff; opacity: .5; transition: opacity .3s, width .3s; }
.hero-swiper .swiper-pagination-bullet-active { opacity: 1; width: 26px; border-radius: 5px; }

.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; color: #fff;
    font-size: 2.4rem; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: .65; transition: opacity .3s; user-select: none;
}
.hero-arrow:hover { opacity: 1; }
.hero-prev { left: 8px; }
.hero-next { right: 8px; }

.hero-signature {
    position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); z-index: 6;
    font-family: 'Great Vibes', cursive; color: #fff; opacity: .8;
    font-size: 2.2rem; line-height: 1; pointer-events: none; user-select: none;
    text-shadow: 0 2px 14px rgba(0,0,0,.4); letter-spacing: .01em; white-space: nowrap;
}
@media (max-width: 640px) {
    .hero-signature { bottom: 96px; font-size: 1.6rem; }
}

.hero-scroll {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5;
    color: #fff; font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; opacity: .85;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll::after { content: ''; width: 1px; height: 34px; background: #fff; animation: scrollLine 1.8s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ==========================================================================
   Page hero (auto-rotating, masked background, prominent title)
   Shared by About / Blog / Contact
   ========================================================================== */
.page-hero { position: relative; height: 62vh; min-height: 420px; overflow: hidden; }
.page-hero-swiper, .page-hero-swiper .swiper-wrapper { height: 100%; }
.page-hero-slide { height: 100%; background-size: cover; background-position: center; }
/* Mask so the text in front stays clearly legible over any photo */
.page-hero-mask {
    position: absolute; inset: 0; z-index: 2;
    /* Mask lightened ~30% so the photo reads more clearly behind the title */
    background:
        linear-gradient(to bottom, rgba(4,18,32,.38) 0%, rgba(4,18,32,.24) 45%, rgba(4,18,32,.5) 100%),
        rgba(4,18,32,.2);
}
.page-hero-content {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: #fff; padding: 0 24px;
}
.page-hero-eyebrow { font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; opacity: .9; margin-bottom: 14px; }
.page-hero-content h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); text-shadow: 0 2px 30px rgba(0,0,0,.45); }

/* ==========================================================================
   Full-page background slider (Gallery index): top (0) → footer
   ========================================================================== */
.page-bg { position: fixed; inset: 0; z-index: 0; background: var(--deep); }
.page-bg .page-hero-swiper, .page-bg .page-hero-swiper .swiper-wrapper { height: 100%; }
.page-bg-mask {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(4,18,32,.62) 0%, rgba(4,18,32,.5) 40%, rgba(4,18,32,.72) 100%);
}
/* Content + footer sit above the fixed background */
.has-bg-slider .site-main { position: relative; z-index: 2; background: transparent; }
.has-bg-slider .site-footer { position: relative; z-index: 2; }
.gallery-over { padding-top: calc(var(--header-h) + 60px); }
.gallery-over-head { text-align: center; color: #fff; margin-bottom: 48px; }
.gallery-over-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-top: 10px; }
.gallery-over-head .page-hero-eyebrow { display: inline-block; }
.gallery-over-head .page-intro { color: rgba(255,255,255,.85); margin-left: auto; margin-right: auto; }
.gallery-over-head .back-link-light { color: #fff; opacity: .95; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.gallery-over-head .back-link-light:hover { opacity: 1; }
.empty-state-light { color: rgba(255,255,255,.85); }

/* ==========================================================================
   Page head (inner pages)
   ========================================================================== */
.page-head { padding: 70px 0 20px; text-align: center; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.page-intro { color: var(--ink-soft); max-width: 60ch; margin: 16px auto 0; font-size: 1.05rem; }
.back-link { display: inline-block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; }
.back-link:hover { color: var(--ink); }

/* ==========================================================================
   Gallery grid (categories)
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-grid-lg { gap: 24px; }
.gallery-card { position: relative; overflow: hidden; border-radius: 4px; background: #0a2540; aspect-ratio: 4/5; display: block; }
.gallery-card-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.1s var(--ease); }
.gallery-card:hover .gallery-card-img { transform: scale(1.07); }
.gallery-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,18,32,.78), rgba(4,18,32,0) 55%); transition: background .4s; }
.gallery-card:hover::after { background: linear-gradient(to top, rgba(4,18,32,.85), rgba(4,18,32,.1) 60%); }
.gallery-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px; color: #fff; }
.gallery-card-body h3 { font-size: 1.5rem; }
.gallery-card-meta { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* ==========================================================================
   Photo masonry (inside a gallery)
   ========================================================================== */
.photo-masonry { columns: 3; column-gap: 16px; }
.photo-item { position: relative; display: block; margin: 0 0 16px; break-inside: avoid; overflow: hidden; border-radius: 3px; }
.photo-item img { width: 100%; transition: transform .8s var(--ease), filter .4s; }
.photo-item:hover img { transform: scale(1.05); }
.photo-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 16px 14px; color: #fff;
    font-size: .82rem; background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
    opacity: 0; transform: translateY(8px); transition: all .4s var(--ease);
}
.photo-item:hover .photo-caption { opacity: 1; transform: translateY(0); }

.gallery-show-intro { text-align: center; margin-bottom: 40px; }
.gallery-show-intro .back-link { display: inline-block; }
.gallery-show-intro .page-intro { margin: 12px auto 0; }

/* Signature watermark inside the PhotoSwipe lightbox */
.pswp__signature, .pswp-signature {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 1600;
    font-family: 'Great Vibes', cursive; color: #fff; opacity: .8;
    font-size: 2rem; line-height: 1; pointer-events: none; user-select: none;
    text-shadow: 0 2px 12px rgba(0,0,0,.5); white-space: nowrap;
}

/* ==========================================================================
   Posts
   ========================================================================== */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.post-card { display: block; }
.post-card-img { aspect-ratio: 3/2; background-size: cover; background-position: center; border-radius: 4px; margin-bottom: 16px; overflow: hidden; transition: transform .8s var(--ease); }
.post-card:hover .post-card-img { transform: scale(1.03); }
.post-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.post-card p { color: var(--ink-soft); font-size: .95rem; }
.post-date { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sea); }
.read-more { display: inline-block; margin-top: 10px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.posts-teaser { background: var(--bg-alt); }

/* Post single */
.post-single { }
.post-hero { height: 52vh; min-height: 340px; background-size: cover; background-position: center; position: relative; }
.post-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 60%); }
.post-single .container-narrow { padding-top: 50px; padding-bottom: 90px; }
.post-title { font-size: clamp(2rem, 5vw, 3.2rem); margin: 12px 0 30px; }
.post-body { font-size: 1.12rem; line-height: 1.85; color: #26333f; }
.post-body p { margin: 0 0 1.4em; }
.post-body img { border-radius: 4px; margin: 1.5em 0; }

/* ==========================================================================
   About
   ========================================================================== */
.about-wrap { }
.about-portrait { max-width: 340px; margin: 0 auto 40px; }
.about-portrait img { border-radius: 4px; }
.about-body { font-size: 1.1rem; line-height: 1.85; color: #26333f; }
.about-body p { margin: 0 0 1.3em; }

/* About over full-page slider: 50% mask + dark text panel */
.page-bg-50 .page-bg-mask { background: rgba(6,20,34,.5); }
.about-over .about-portrait { margin: 0 auto 30px; }
.about-panel {
    background: rgba(6,20,34,.88); color: #fff; padding: 40px 44px 46px; border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0,0,0,.3);
}
.about-panel .about-body { color: rgba(255,255,255,.92); }
.about-panel .about-body a { color: var(--sea-light); }
@media (max-width: 640px) { .about-panel { padding: 28px 22px 32px; } }

/* Contact over full-page slider: dark panels + white text */
.contact-over .contact-wrap { align-items: stretch; }
.contact-panel {
    background: rgba(6,20,34,.88); border-radius: 10px; padding: 34px 32px;
    box-shadow: 0 24px 70px rgba(0,0,0,.3); color: #fff;
}
.contact-over .contact-info { gap: 22px; }
.contact-over .contact-item a { color: #fff; }
.contact-over .contact-item a:hover { color: var(--sea-light); }
.contact-socials { display: flex; gap: 16px; }
.contact-over .contact-form label { color: rgba(255,255,255,.85); }
.contact-over .contact-form input,
.contact-over .contact-form textarea {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.contact-over .contact-form input:focus,
.contact-over .contact-form textarea:focus {
    border-color: var(--sea-light); background: rgba(255,255,255,.14);
}
.contact-over .contact-form input::placeholder,
.contact-over .contact-form textarea::placeholder { color: rgba(255,255,255,.5); }

/* About interview video */
.about-video { margin-top: 48px; text-align: center; }
.about-video-label { display: block; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sea); margin-bottom: 16px; }
.video-trigger {
    position: relative; width: 100%; aspect-ratio: 16/9; border: 0; cursor: pointer;
    background-size: cover; background-position: center; border-radius: 6px; overflow: hidden;
}
.video-trigger::after { content: ''; position: absolute; inset: 0; background: rgba(4,18,32,.35); transition: background .3s; }
.video-trigger:hover::after { background: rgba(4,18,32,.15); }
.video-play {
    position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--deep);
    display: flex; align-items: center; justify-content: center; padding-left: 4px;
    transition: transform .3s var(--ease), background .3s;
}
.video-trigger:hover .video-play { transform: translate(-50%,-50%) scale(1.08); background: #fff; }

/* Video modal */
.video-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.video-modal.open { display: flex; }
.video-modal-overlay { position: absolute; inset: 0; background: rgba(4,12,20,.9); }
.video-modal-box { position: relative; z-index: 2; width: 100%; max-width: 960px; }
.video-modal-frame { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; }
.video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; opacity: .85; }
.video-modal-close:hover { opacity: 1; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.contact-item { display: flex; flex-direction: column; gap: 4px; }
.contact-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sea); }
.contact-form .field { margin-bottom: 20px; }
.contact-form label { display: block; font-size: .78rem; letter-spacing: .08em; margin-bottom: 8px; color: var(--ink-soft); }
.contact-form input, .contact-form textarea {
    width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px;
    font-family: var(--sans); font-size: .98rem; background: var(--bg-alt); transition: border-color .3s, background .3s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--sea); background: #fff; }
.field-hp { position: absolute; left: -9999px; }
.alert { padding: 14px 18px; border-radius: 4px; margin-bottom: 22px; font-size: .95rem; }
.alert-success { background: #e6f6ef; color: #10603f; }
.alert-error { background: #fdecec; color: #a12626; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: rgba(9, 28, 46, .5);
    color: rgba(255,255,255,.9); padding: 64px 0 0; position: relative;
}
/* Fully opaque footer background (blog page) */
.footer-clear .site-footer { background: rgb(9, 28, 46); }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px 44px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: center; }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand .brand-name { color: #fff; font-size: 1.3rem; font-weight: 700; }
.footer-brand .brand-tag { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; opacity: .75; margin-top: 4px; font-weight: 600; }
.footer-nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-social { display: flex; gap: 20px; align-items: center; }
.footer-nav a, .footer-social a { font-size: .84rem; letter-spacing: .08em; opacity: .9; font-weight: 700; }
.footer-nav a:hover, .footer-social a:hover { opacity: 1; }
.footer-social .login-icon { width: 34px; height: 34px; }
.footer-social .login-icon svg { width: 17px; height: 17px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 24px; font-size: .78rem; opacity: .8; font-weight: 600; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; max-width: var(--wrap); margin: 0 auto; }
.footer-credit { letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; opacity: .85; font-weight: 700; }
@media (max-width: 640px) { .footer-bottom { flex-direction: column; text-align: center; gap: 6px; } }

.error-page { text-align: center; padding: 160px 0; }
.error-page h1 { font-size: 6rem; color: var(--sea); }
.error-page p { color: var(--ink-soft); margin: 10px 0 30px; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
    .photo-masonry { columns: 2; }
    .contact-wrap { grid-template-columns: 1fr; gap: 34px; }
    .section { padding: 64px 0; }
}
@media (max-width: 640px) {
    :root { --header-h: 62px; }
    .nav-toggle { display: block; z-index: 120; }
    /* Burger lines follow the header text colour: white over heroes, dark on
       solid/scrolled headers; white while the menu overlay is open. */
    .site-header.scrolled .nav-toggle { color: var(--ink); }
    body.nav-open .nav-toggle { color: #fff; }

    /* Full-screen mobile menu: logo (top) · links (middle) · social (bottom) */
    .site-nav {
        position: fixed; inset: 0; background: rgba(8,26,42,.98); color: #fff;
        flex-direction: column; justify-content: space-between; align-items: center;
        padding: 78px 28px 46px; gap: 0;
        transform: translateX(100%); transition: transform .45s var(--ease); z-index: 110;
    }
    body.nav-open { overflow: hidden; }
    body.nav-open .site-nav { transform: translateX(0); }

    .nav-mobile-logo { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
    .nav-mobile-logo .brand-name { font-size: 1.7rem; }
    .nav-mobile-logo .brand-tag { font-size: .64rem; opacity: .8; margin-top: 5px; }

    .nav-links { flex-direction: column; align-items: center; gap: 26px; }
    .nav-links > a { font-size: 1.15rem; }
    .lang-switch { font-size: 1rem; margin-top: 6px; }

    .nav-mobile-social { display: flex; gap: 30px; }
    .nav-mobile-social a {
        font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85;
    }
    .nav-mobile-social a:hover { opacity: 1; }

    .gallery-grid, .posts-grid { grid-template-columns: 1fr; }
    .photo-masonry { columns: 1; }
    .hero-content { padding-bottom: 16vh; }
    .hero-arrow { display: none; }
    .footer-inner { flex-direction: column; text-align: center; align-items: center; }
}