/* ================================================================
   GLOBAL NAV — nav.css
   ================================================================ */

.site-nav {
  position: fixed;
  top: 58px;
  left: 60px;
  right: 60px;
  z-index: 9000;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: transparent;
  box-sizing: border-box;
  /* No halo by default — a white glow behind dark text on a page with a
     plain, predictable ground (Home, Projects, Artworks, Experiments)
     added nothing but a soft blur/smudge around otherwise crisp nav
     text. Only pages whose nav can sit directly over unpredictable
     photo/video content (About, Contact, Detail, Reel, and Projects
     during its hover takeover) opt in with their own real --nav-halo
     value below — everywhere else this stays transparent, so no
     text-shadow renders at all. */
  --nav-halo: rgba(0, 0, 0, 0);
}

/* ── LEGIBILITY HALO ─────────────────────────────────────────────
   The bar is transparent until the page scrolls past 50px (see
   initScrollReactive in nav.js), so for that first stretch — and on any
   page whose content sits directly under it — nav text and icons read
   straight over whatever photo or video is there, with no guaranteed
   contrast. A soft blurred halo behind each glyph (colour flipped to
   whichever side of light/dark that page's ink sits on, via --nav-halo
   below) keeps them legible against any frame without needing an opaque
   backdrop that would hide the content it's supposed to float over. */
.nav-link, .nav-left-text, .nav-brand, .nav-logo {
  text-shadow: 0 1px 5px var(--nav-halo), 0 0 12px var(--nav-halo);
}
.nav-burger, .nav-home-icon {
  filter: drop-shadow(0 0 4px var(--nav-halo));
}

/* ── LEFT ────────────────────────────────────────────────────── */
.nav-left {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.nav-left-text {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-fg, rgba(255, 255, 255, 0.42));
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
  transition: color 0.25s;
  min-width: 9ch;
  display: inline-block;
  /* .nav-left sits in a min-width:0 flex slot so it can yield room to its
     neighbours (the brand mark, the burger) on a narrow bar — without
     this, nowrap text doesn't shrink with the box, it just paints past
     its own right edge and over whatever sits next in the DOM (seen with
     Contact's "COME FOR ME" running straight through the brand mark). */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.nav-left-text { cursor: pointer; }
a.nav-left-text:hover { color: var(--nav-fg-hover, #fff); }

/* ── RIGHT — LINKS ───────────────────────────────────────────── */
.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

.nav-link {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-fg, rgba(255, 255, 255, 0.42));
  text-decoration: none;
  transition: color 0.25s;
  position: relative;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover { color: var(--nav-fg-hover, #fff); }
.nav-link:hover::after { transform: scaleX(1); }

/* Active page: a small squared box around just this link — replaces the
   old full-width pill bar as the "you are here" indicator. */
.nav-link.is-active {
  color: var(--nav-fg-active, #fff);
  border: 2px solid var(--nav-border, rgba(255, 255, 255, 0.25));
  border-radius: 6px;
  padding: 6px 12px;
  margin: -6px -12px;
}
.nav-link.is-active::after { content: none; }

/* ── PAGE-SPECIFIC COLORS ────────────────────────────────────── */

/* Index */
body.page-index .site-nav {
  --nav-border:          rgba(45, 45, 45, 0.22);
  --nav-bg-scrolled:     rgba(26, 22, 20, 0.90);
  --nav-border-scrolled: rgba(45, 45, 45, 0.35);
  --nav-fg:              rgba(45, 45, 45, 0.72);
  --nav-fg-hover:        #1C1814;
  --nav-fg-active:       #1C1814;
}

/* Projects */
body.page-uxui .site-nav {
  --nav-border:          rgba(10, 25, 41, 0.38);
  --nav-bg-scrolled:     rgba(239, 68, 68, 0.92);
  --nav-border-scrolled: rgba(10, 25, 41, 0.45);
  --nav-fg:              rgba(10, 25, 41, 0.65);
  --nav-fg-icon:         rgba(10, 25, 41, 0.65);
  --nav-fg-hover:        #0a1929;
  --nav-fg-active:       #0a1929;
}

/* Artworks — text/icons/border in dark navy (#0a1929), bg unchanged */
body.page-artworks .site-nav {
  --nav-border:          rgba(10, 25, 41, 0.38);
  --nav-bg-scrolled:     rgba(255, 214, 51, 0.92);
  --nav-border-scrolled: rgba(10, 25, 41, 0.45);
  --nav-fg:              rgba(10, 25, 41, 0.65);
  --nav-fg-icon:         rgba(10, 25, 41, 0.65);
  --nav-fg-hover:        #0a1929;
  --nav-fg-active:       #0a1929;
}

/* Project detail — dark */
body.page-detail .site-nav {
  --nav-border:          rgba(255, 255, 255, 0.38);
  --nav-bg-scrolled:     rgba(12, 10, 8, 0.90);
  --nav-border-scrolled: rgba(255, 255, 255, 0.45);
  --nav-fg:              rgba(255, 255, 255, 0.68);
  --nav-fg-hover:        #fff;
  --nav-fg-active:       #fff;
  /* white ink needs a dark halo, not the light one every other page uses */
  --nav-halo:            rgba(0, 0, 0, 0.45);
}

/* Reel pages (ai-ads/ai-vfx/ai-animations, body.page-reel). This page
   type was missing from getPageKey() in nav.js until now, which meant
   it silently fell through to the 'index' branch and picked up
   index's dark-ink/light-halo theme regardless of what was underneath.

   Unlike every other page here, the ground right under the nav isn't
   one consistent tone — the very top of the page is a light info panel
   (title, description) before the first video begins, so light-ink and
   dark-ink both go low-contrast somewhere in that first viewport. The
   site's ".is-scrolled" mechanism (nav.js toggles the class, meant to
   swap in a solid --nav-bg-scrolled backdrop once you scroll) has no
   matching CSS anywhere in this file, on any page — it's a no-op, so
   every page's nav is fully transparent at every scroll position. That
   silent gap is harmless on a single-toned hero; it's exactly what
   breaks here. Simplest correct fix for this one page type: skip
   transparency entirely and give the bar its own permanent solid strip,
   so legibility never depends on whatever's playing underneath. */
body.page-reel .site-nav {
  --nav-border:          rgba(255, 255, 255, 0.16);
  --nav-fg:              rgba(255, 255, 255, 0.82);
  --nav-fg-hover:        #fff;
  --nav-fg-active:       #fff;
  --nav-halo:            rgba(0, 0, 0, 0.5);
  /* Liquid-glass strip, not a solid bar — low-opacity fill + blur +
     saturate lets the video read through tinted rather than covered,
     with a light top edge and soft cast shadow for that glass lip. */
  background: rgba(20, 18, 16, 0.38);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 14px;
  border: 1px solid var(--nav-border);
  border-top-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

/* Detail pages use the lighter boxed header from the reference work index. */
body.page-detail .site-nav {
  top: 24px;
  left: 40px;
  right: 40px;
  height: 40px;
  padding: 0;
  justify-content: flex-start;
  color: #0e0e0e;
  z-index: 9999;
}

body.page-detail .site-nav .nav-left {
  flex: 0 0 auto;
}

body.page-detail .nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 147px;
  height: 35px;
  padding: 0 14px;
  background: #0e0e0e;
  color: #fff;
  font: 400 0.82rem/1 'Type Machine', monospace;
  letter-spacing: 0.02em;
  text-decoration: none;
}

body.page-detail .site-nav .nav-links {
  position: absolute;
  left: 40%;
  transform: none;
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 0;
  padding: 4px;
  /* Blur was reserved for the reel pages' liquid-glass header on
     request — dropped here for consistency. Opacity raised from .58 to
     stay a clean, legible pill on its own now that blur isn't there to
     soften whatever project imagery sits behind it. */
  background: rgba(255, 255, 255, 0.92);
}

body.page-detail .site-nav .nav-link {
  min-height: 33px;
  padding: 9px 16px;
  color: #0e0e0e;
  font: 400 0.62rem/1 'Type Machine', monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

body.page-detail .site-nav .nav-link::after {
  display: none;
}

body.page-detail .site-nav .nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.page-detail .site-nav .nav-link.is-active {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0e0e0e;
  color: #fff;
}

body.page-detail .site-nav .nav-burger {
  display: none;
}

/* ── MOBILE ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-nav {
    top: 22px;
    left: 28px;
    right: 28px;
    height: 46px;
    padding: 0 14px;
    gap: 0;
  }

  .nav-left-text {
    font-size: 0.78rem;
    letter-spacing: 0.11em;
    min-width: 0;
  }

  .nav-links { gap: 14px; }
  .nav-link  { font-size: 0.78rem; letter-spacing: 0.10em; }
}

@media (max-width: 767px) {
  body.page-detail .site-nav {
    top: 14px;
    left: 20px;
    right: 20px;
    height: 35px;
  }

  body.page-detail .site-nav .nav-links {
    display: none;
  }

  body.page-detail .site-nav .nav-burger {
    display: flex;
    width: 35px;
    height: 35px;
    padding: 7px 3px;
    background: transparent !important;
    border-radius: 0;
  }

  body.page-detail .site-nav .nav-burger span {
    height: 2px;
    background: #0e0e0e !important;
  }

  body.page-detail .site-nav .nav-burger span:nth-child(1),
  body.page-detail .site-nav .nav-burger span:nth-child(3) {
    width: 22px;
  }

  body.page-detail .site-nav .nav-burger span:nth-child(2) {
    width: 14px;
  }
}

@media (max-width: 400px) {
  .site-nav {
    left: 22px;
    right: 22px;
    padding: 0 12px;
  }
  /* Index'te SIVIN/KOUSHIP label'ı gizle, diğer sayfalarda HOME / I WANT TO BELIEVE kalır */
  body.page-index .nav-left-text { display: none; }
  .nav-links { justify-content: center; gap: 16px; }
}

/* ── HAMBURGER BUTTON ────────────────────────────────────── */
@keyframes burgerWave {
  0%, 100% { transform: scaleX(1);    opacity: 0.55; }
  50%       { transform: scaleX(0.5); opacity: 1;    }
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  height: 3px;
  background: var(--nav-fg, rgba(255, 255, 255, 0.8));
  border-radius: 2px;
  transform-origin: right center;
}

.nav-burger span:nth-child(1) { width: 22px; animation: burgerWave 1.6s ease-in-out infinite 0s;    }
.nav-burger span:nth-child(2) { width: 14px; animation: burgerWave 1.6s ease-in-out infinite 0.28s; }
.nav-burger span:nth-child(3) { width: 22px; animation: burgerWave 1.6s ease-in-out infinite 0.56s; }

.nav-burger:hover span { animation: none; transition: transform 0.30s cubic-bezier(0.22,1,0.36,1), width 0.30s cubic-bezier(0.22,1,0.36,1); }
.nav-burger:hover span:nth-child(1) { width: 14px; transform: translateX(8px); }
.nav-burger:hover span:nth-child(2) { width: 22px; transform: translateX(-4px); }
.nav-burger:hover span:nth-child(3) { width: 14px; transform: translateX(8px); }

/* ── HOME BUTTON ──────────────────────────────────────────────
   Same box as .nav-burger — 40x40, no fill or border of its own — so
   the two sit as a matched pair at opposite ends of the bar. Same
   default-hidden / shown-everywhere-but-index visibility rule too (see
   the two rules below and the mobile block further down), so it
   behaves like the burger's twin rather than a one-off addition. */
.nav-home {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  margin-right: 4px;
  flex-shrink: 0;
  /* Was a fixed red on every page regardless of ground — on some pages
     (this one included) that read as low-contrast against the page's
     own photo/video. Follows the same per-page ink var as the rest of
     the nav now, same as .nav-burger already did. */
  color: var(--nav-fg-active, #1C1814);
  text-decoration: none;
}
body:not(.page-index) .nav-home { display: flex; }

.nav-home-icon { width: 22px; height: 22px; overflow: visible; }

/* The door panel swings open on its hinge (left edge) and shuts again,
   on a loop — matching .nav-burger's own span:nth-child(n) rules a few
   lines up, which run burgerWave continuously rather than only on
   hover. The two buttons are meant to read as a matched pair sitting
   idle at opposite ends of the bar, not one animated and one static.
   transform-box: fill-box lets the CSS transform-origin sit at the
   shape's own left edge regardless of the viewBox coordinate it was
   drawn at. */
.nav-home-door {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: navDoorSwing 3.2s ease-in-out infinite;
}
@keyframes navDoorSwing {
  0%, 40%  { transform: scaleX(1); }
  70%      { transform: scaleX(0.22); }
  100%     { transform: scaleX(1); }
}
.nav-home:hover .nav-home-door { animation-duration: 1.1s; }
@media (prefers-reduced-motion: reduce) {
  .nav-home-door { animation: none; }
}

/* ── SIGNATURE MARK ───────────────────────────────────────────
   Mobile-only, on request — desktop already names the site via the full
   .nav-links row (Projects/Artworks/.../Contact all spelled out), so a
   second static "Sivin" there was redundant, and being absolutely
   centred against a bar with an unpredictable amount of link text either
   side of it is exactly what kept colliding with "Artworks" under
   ~900px. Below 768px .nav-links disappears entirely (burger-only nav),
   so there's a real gap for it.

   A real flex child sitting between .nav-left and .nav-links in DOM
   order, not absolutely centred — a fixed left:50% would still risk
   overlapping a long .nav-left label (Contact's "COME FOR ME" ran
   straight through it before .nav-left-text got its own
   overflow/ellipsis handling above). In normal flow, flexbox can't let
   siblings overlap; worst case .nav-left ellipsis-truncates a touch
   earlier to make room. */
.nav-brand {
  display: none;
  flex: 0 0 auto;
  padding: 0 16px;
  font-family: var(--font-slab, 'Rockwell', 'Rockwell Nova', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--nav-fg-active, currentColor);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}
@media (max-width: 768px) {
  .nav-brand { display: block; }
}

/* ── MOBILE MENU OVERLAY ─────────────────────────────────── */
.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

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

/* Nav bar gizle menü açıkken */
body.mob-menu-open .site-nav {
  opacity: 0;
  pointer-events: none;
}

.mob-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.32);
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  border-radius: 16px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.mob-menu-close:hover {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  transform: rotate(90deg);
}

.mob-menu-close svg {
  width: 22px;
  height: 22px;
}

.mob-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.mob-menu-link {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}

.mob-menu-link:hover,
.mob-menu-link.is-active { color: #fff; }

.mob-menu-social {
  position: absolute;
  bottom: 40px;
  display: flex;
  gap: 36px;
}

.mob-menu-social-link {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s;
}

.mob-menu-social-link:hover { color: rgba(255, 255, 255, 0.90); }

/* ── OVERLAY BACKGROUND PER PAGE ─────────────────────────────
   The base .mob-menu above sets no background of its own, so a page
   with no rule here drew the overlay fully transparent — white 2rem
   links floating over the live page. Index needs a rule for exactly
   that reason; it is the page's own transition colour (#1a1614, the
   '/' entry in TX_COLORS), which holds up over all three mobile snap
   panels: the pale portrait landing, the #f8f1dc projects panel and
   the #0d0d0d contact panel. */
body.page-index    .mob-menu { background: rgba(26,  22,  20,  0.97); }
body.page-uxui     .mob-menu { background: rgba(185, 28,  28,  0.97); }
body.page-artworks .mob-menu { background: rgba(29,  78,  216, 0.97); }
body.page-contact  .mob-menu { background: rgba(20,  20,  26,  0.97); }
body.page-detail   .mob-menu { background: rgba(10,  8,   8,   0.97); }
body.page-reel     .mob-menu { background: rgba(20,  17,  13,  0.97); }
body.page-about    .mob-menu { background: rgba(5,   5,   5,   0.97); }
body.page-privacy  .mob-menu { background: rgba(5,   5,   5,   0.97); }

/* ── MOBILE: burger görünür, nav-links gizli ─────────────── */
@media (max-width: 768px) {
  body:not(.page-index) .nav-links  { display: none; }
  body:not(.page-index) .nav-burger { display: flex; }
}

/* ── NON-INDEX PAGES — MOBILE: white nav ────────────────── */
@media (max-width: 768px) {
  body.page-uxui .site-nav,
  body.page-artworks .site-nav,
  body.page-contact .site-nav,
  body.page-detail .site-nav {
    --nav-border:          rgba(255, 255, 255, 0.65);
    --nav-border-scrolled: rgba(255, 255, 255, 0.75);
    --nav-fg:              rgba(255, 255, 255, 0.95);
    --nav-fg-icon:         rgba(255, 255, 255, 0.95);
    --nav-fg-hover:        #fff;
    --nav-fg-active:       #fff;
  }
}

/* ── INDEX — MOBILE OVERRIDES ────────────────────────────── */
@media (max-width: 768px) {
  body.page-index .site-nav {
    --nav-border:          rgba(45, 45, 45, 0.28);
    --nav-border-scrolled: rgba(45, 45, 45, 0.40);
    --nav-fg:              rgba(45, 45, 45, 0.80);
  }

  body.page-index .site-nav .nav-left {
    display: none;
  }

  body.page-index .site-nav .nav-links {
    flex: 1;
    justify-content: center;
    gap: 32px;
  }

  body.page-index .site-nav .nav-link {
    font-size: 0.78rem;
    padding: 8px 4px;
  }
}

/* ================================================================
   FOOTER CTA — built by nav.js on scrolling pages. Contact receives a
   legal-only footer, while the fixed home hero uses a compact legal rail.

   Was a full dark band — logo mark, three lines of display type, a
   three-column block (email capture, full sitemap, enquiries), a
   social row — heavy enough on a phone to be nearly a second screen.
   Replaced on request (2026-08-16) with the same close every legacy
   case-study page already uses (.pd-contact / .pd-contact-btn in
   project-detail.css): one line of copy, one button to /contact.
   var(--fg)/var(--bg) means it always takes the page's own palette —
   dark on About, black-on-yellow on Artworks — rather than forcing a
   black band onto pages that aren't black. */
.sv-cta {
  position: relative;
  z-index: 20;
  /* Background and border both used to render var(--bg)/var(--border) —
     matching the page's own tone in principle, but every page's flat
     fill plus the dividing line still read as a distinct card sitting
     ON the page rather than a continuation of it (worse on any page
     that hadn't set --bg/--fg at all — About, Experiments, Reel — where
     this fell all the way back to the site root's #FBFBFB/#2D2D2D,
     visibly the wrong shade of the page's own paper/ink). Transparent
     everywhere lets it sit flush against whatever's actually behind it;
     var(--fg) below still has to be correct per page for the text
     itself to read, which is why those three pages now define it. */
  border-top: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  transition: color 0.35s ease;
}
/* Projects' list-view hover takeover plays the film full-bleed behind
   the page (.pj-viewtoggle already inverts for it, see projects.css) —
   this CTA sat right at the bottom of that same page in its normal
   solid paper background, which broke the takeover as an opaque card
   floating over the video. Same light-on-dark flip as the rest of the
   takeover content. */
body.pj-takeover .sv-cta {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.16);
  color: #f4efe2;
}
body.pj-takeover .sv-cta-heading { color: #f4efe2; }
body.pj-takeover .sv-cta-btn {
  border-color: rgba(244, 239, 226, 0.55);
  color: #f4efe2;
}
body.pj-takeover .sv-cta-btn:hover {
  background: #f4efe2;
  color: #14110d;
}
/* Same takeover, the top nav itself — it keeps Projects' normal dark-
   navy ink otherwise (body.page-uxui .site-nav further up), which goes
   low-contrast once a film starts playing full-bleed behind it. Flips
   to light on request, no blur/solid backdrop added — stays exactly as
   transparent as it is normally, just with lighter ink + a dark halo
   to hold up against the video. */
body.pj-takeover .site-nav {
  --nav-fg:        rgba(255, 255, 255, 0.85);
  --nav-fg-icon:   rgba(255, 255, 255, 0.85);
  --nav-fg-hover:  #fff;
  --nav-fg-active: #fff;
  --nav-halo:      rgba(0, 0, 0, 0.5);
}
.sv-cta-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 60px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
body.page-about .sv-cta-inner {
  padding-top: clamp(128px, 18vh, 190px);
  padding-bottom: clamp(128px, 18vh, 190px);
}
/* Projects is the one page with a floating fixed control (.pj-viewtoggle,
   the GRID/LIST capsule) pinned to the viewport bottom regardless of
   scroll position — when this CTA is short enough to land on-screen
   without scrolling, the capsule sat right on top of "Have something
   worth saying?" itself. Extra bottom room on this page only pushes the
   actual heading/button row clear of it; the reserved space below just
   becomes plain background, which the capsule can sit over harmlessly. */
body.page-uxui .sv-cta-inner {
  padding-bottom: clamp(96px, 14vh, 160px);
}
.sv-cta-heading {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.sv-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 16px 32px;
  border: 1.5px solid var(--fg);
  border-radius: 999px;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.sv-cta-arrow { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.sv-cta-btn:hover {
  background: var(--fg);
  color: var(--bg);
}
.sv-cta-btn:hover .sv-cta-arrow { transform: translateX(4px); }

/* ── PRIVACY LINKS ─────────────────────────────────────────────
   The policy and settings controls are part of the shared close on every
   public route. Home uses a compact fixed rail because its hero does not
   scroll; Contact receives the same rail in normal document flow. */
.sv-legal {
  flex: 1 0 100%;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  color: var(--fg);
}
.sv-legal a,
.sv-legal button {
  border: 0;
  padding: 6px 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 44%, transparent);
  text-underline-offset: 4px;
  text-transform: uppercase;
  opacity: 0.68;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.sv-legal a:hover,
.sv-legal button:hover,
.sv-legal a:focus-visible,
.sv-legal button:focus-visible {
  opacity: 1;
}
.sv-legal a:focus-visible,
.sv-legal button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}
.sv-legal-footer {
  position: relative;
  z-index: 20;
  padding: 26px clamp(20px, 5vw, 60px) max(30px, env(safe-area-inset-bottom));
  color: var(--fg);
}
.sv-legal-footer .sv-legal {
  width: min(1400px, 100%);
  margin: 0 auto;
}
.sv-legal-footer--floating {
  position: fixed;
  z-index: 8500;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: auto;
  padding: 0;
  color: #f2f0ea;
}
.sv-legal-footer--floating .sv-legal {
  width: auto;
  padding: 8px 14px;
  border: 1px solid rgba(242, 240, 234, 0.26);
  border-radius: 999px;
  background: rgba(8, 10, 9, 0.68);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  gap: 14px;
}
.ultra-minimal-footer .sv-legal {
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto;
}
body.pj-takeover .sv-legal { color: #f4efe2; }

@media (max-width: 600px) {
  .sv-cta-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .sv-cta-btn { width: 100%; justify-content: center; }
  .sv-legal { justify-content: flex-start; gap: 16px; }
  .sv-legal-footer--floating {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .sv-legal-footer--floating .sv-legal { gap: 12px; padding: 8px 12px; }
  .sv-legal a, .sv-legal button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── INDEX NAV FIT (≤400px) ───────────────────────────────────────
   The home page shows all four links with no hamburger fallback, and the
   32px gap set in the block above pushed "Contact" off-screen at 375px,
   making it unreachable. This sits after those rules and matches their
   specificity so it wins, tightening type and gaps just enough to fit. */
@media (max-width: 400px) {
  body.page-index .site-nav .nav-links { gap: 8px; }
  body.page-index .site-nav .nav-link {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    padding: 8px 2px;
  }
}

/* ── EXPERIMENTS — amber nav on black, matching the page ──────── */
body.page-experiments .site-nav {
  --nav-border:          rgba(198, 162, 116, 0.42);
  --nav-bg-scrolled:     rgba(0, 0, 0, 0.92);
  --nav-border-scrolled: rgba(198, 162, 116, 0.50);
  --nav-fg:              rgba(198, 162, 116, 0.72);
  --nav-fg-icon:         rgba(198, 162, 116, 0.72);
  --nav-fg-hover:        #ffe6bd;
  --nav-fg-active:       #ffe6bd;
}
body.page-experiments .mob-menu { background: rgba(0, 0, 0, 0.97); }

/* Flask icon sitting beside the Experiments label */
.nav-link--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
}
.nav-link-icon {
  width: 1.02em;
  height: 1.02em;
  flex-shrink: 0;
  /* nudge so the flask's optical centre lines up with the cap height */
  transform: translateY(-0.04em);
}

/* ── NAV CONTRAST PER PAGE (2026-08-09) ───────────────────────────
   Contact used a dark navy nav because the page was flat yellow. It is
   now a dark photograph, so that nav rendered dark-on-dark and read as
   missing entirely — the Experiments link was present and full width,
   just invisible. Flip it light, like the other dark pages. */
body.page-contact .site-nav {
  --nav-border:          rgba(255, 255, 255, 0.42);
  --nav-bg-scrolled:     rgba(10, 10, 12, 0.90);
  --nav-border-scrolled: rgba(255, 255, 255, 0.52);
  --nav-fg:              rgba(255, 255, 255, 0.82);
  --nav-fg-icon:         rgba(255, 255, 255, 0.82);
  --nav-fg-hover:        #ffffff;
  --nav-fg-active:       #ffffff;
  /* white ink needs a dark halo, not the light one every light-ground
     page uses (see the ── LEGIBILITY HALO ── rule near the top) */
  --nav-halo:            rgba(0, 0, 0, 0.5);
}

/* About is a dark video plate — same treatment. */
body.page-about .site-nav {
  --nav-border:          rgba(255, 255, 255, 0.38);
  --nav-bg-scrolled:     rgba(5, 5, 5, 0.90);
  --nav-border-scrolled: rgba(255, 255, 255, 0.48);
  --nav-fg:              rgba(255, 255, 255, 0.78);
  --nav-fg-icon:         rgba(255, 255, 255, 0.78);
  --nav-fg-hover:        #ffffff;
  --nav-fg-active:       #ffffff;
  --nav-halo:            rgba(0, 0, 0, 0.5);
}

/* Privacy uses the same dark CRT plate as About. */
body.page-privacy .site-nav {
  --nav-border:          rgba(255, 255, 255, 0.38);
  --nav-bg-scrolled:     rgba(5, 5, 5, 0.90);
  --nav-border-scrolled: rgba(255, 255, 255, 0.48);
  --nav-fg:              rgba(255, 255, 255, 0.78);
  --nav-fg-icon:         rgba(255, 255, 255, 0.78);
  --nav-fg-hover:        #ffffff;
  --nav-fg-active:       #ffffff;
  --nav-halo:            rgba(0, 0, 0, 0.5);
}

/* ── EXPERIMENTS LINK — always unmistakable (2026-08-09) ──────────
   The user could not find this link on any page. In the DOM it was
   always present, uncovered and correctly sized — it was simply drawn
   in the same dimmed --nav-fg as the other links (0.65–0.72 alpha) and
   read as part of the background, and on Contact it was dark-on-dark.

   So it now gets its own chip: full-strength currentColor plus a
   bordered, tinted pill. It inherits --nav-fg-hover, which every page
   already defines against its own ground, so the contrast follows the
   page rather than being hard-coded to one colour. */
.nav-link--icon {
  color: var(--nav-fg-hover, #fff) !important;
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 5px 11px;
  margin: -5px 0;
  background: color-mix(in srgb, currentColor 12%, transparent);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.nav-link--icon::before {
  content: '';
  position: absolute;
  inset: -45% auto -45% -46%;
  z-index: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
  animation: navExperimentShine 5.2s ease-in-out infinite;
}
@keyframes navExperimentShine {
  0%, 54% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  59%     { opacity: 0.46; }
  76%     { transform: skewX(-18deg) translateX(560%); opacity: 0; }
  100%    { transform: skewX(-18deg) translateX(560%); opacity: 0; }
}
/* Browsers without color-mix() still get a readable chip */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .nav-link--icon { background: rgba(128, 128, 128, 0.14); }
}
.nav-link--icon:hover,
.nav-link--icon:focus-visible {
  background: color-mix(in srgb, currentColor 22%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}
/* it never needs the underline sweep the plain links use */
.nav-link--icon::after { content: none !important; }

/* When Experiments IS the current page, keep the existing active box
   from doubling up with this chip. */
.nav-link--icon.is-active {
  border-width: 2px;
  background: color-mix(in srgb, currentColor 20%, transparent);
  padding: 5px 11px;
  margin: -5px 0;
}

@media (prefers-reduced-motion: reduce) {
  .nav-link--icon::before { animation: none; }
}

/* ── MOBILE: burger only, on every page ──────────────────────────
   Replaces the old `body:not(.page-index)` pair, which left the home
   page showing the full inline link row on a phone and gave it no
   burger. Below 768px every page now shows the burger and nothing else. */
@media (max-width: 768px) {
  .nav-links  { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-home   { display: flex !important; }

  /* Contrast: the bars inherited --nav-fg, which several pages set to a
     0.65-0.72 alpha tuned for small text. At 3px bars over a photo or
     video that reads as barely-there, so use the page's full-strength
     hover colour and sit the icon on its own scrim. */
  .nav-burger {
    background: rgba(0, 0, 0, 0.34);
    border-radius: 7px;
    padding: 8px 7px;
    width: 42px;
    height: 42px;
    backdrop-filter: blur(3px);
  }
  /* Same scrim as the burger, for the same reason — the icon needs to
     sit on its own ground over a photo or video panel. Now that the
     icon itself follows the page's ink colour instead of a fixed red
     (see .nav-home above), it needs the same light/dark scrim swap as
     the burger below, or a light-ink icon would sit on a scrim tuned
     for the opposite case. */
  .nav-home {
    background: rgba(0, 0, 0, 0.34);
    border-radius: 7px;
    padding: 8px 7px;
    width: 42px;
    height: 42px;
    backdrop-filter: blur(3px);
  }
  .nav-burger span {
    background: var(--nav-fg-hover, #fff) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }
  /* Light-ground pages get a light scrim and dark bars instead */
  body.page-uxui .nav-burger,
  body.page-artworks .nav-burger,
  body.page-detail .nav-burger {
    background: rgba(255, 255, 255, 0.42);
  }
  body.page-uxui .nav-burger span,
  body.page-artworks .nav-burger span,
  body.page-detail .nav-burger span {
    background: #0a1929 !important;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
  }
  /* Same swap for the door icon's scrim, matching the burger above. */
  body.page-uxui .nav-home,
  body.page-artworks .nav-home {
    background: rgba(255, 255, 255, 0.42);
  }
  body.page-detail .nav-home {
    background: rgba(255, 255, 255, 0.42);
    color: #0a1929;
  }
}

/* ── MOBILE: burger pinned right ─────────────────────────────────
   .nav-links is display:none below 768px, so the flex row is just
   [.nav-left, .nav-burger]. Without this the burger sat immediately
   after the left label (measured right edge 76px on a 375px screen)
   instead of at the far edge. */
@media (max-width: 768px) {
  .site-nav .nav-burger { margin-left: auto; }
}

/* ── MOBILE: name lockup moves above the portrait ────────────────
   Desktop keeps it anchored to the bottom (.name-section is
   position:absolute; bottom:15px). On a phone the head fills the
   frame, so the name reads better sitting above it. Scoped to the
   mobile query only — the desktop rule is untouched. */
@media (max-width: 768px) {
  body.page-index .name-section {
    top: clamp(84px, 13vh, 132px);
    bottom: auto;
  }
  /* portrait drops below the name instead of sharing its space */
  body.page-index .portrait-section {
    bottom: 0;
    height: 62vh;
  }
}