/* =========================================================
   Alex Brotmann — minimal gallery site
   ========================================================= */

/* Self-hosted Darker Grotesque variable font */
@font-face {
  font-family: 'Darker Grotesque';
  src: url('../fonts/DarkerGrotesque-Variable.ttf') format('truetype-variations'),
       url('../fonts/DarkerGrotesque-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Dark fallback so overscroll / collapsing-address-bar gaps never
     reveal a white sliver behind the body */
  background: #0a0a0a;
}

body {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgb(1, 1, 1);
  background: #0a0a0a;
  font-weight: 400;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* =========================================================
   Intro: logo on a plain black overlay.
   Short, calm fade-in → settle → fade-out → site appears.
   ========================================================= */
#intro {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
#intro.hidden { opacity: 0; }
#intro.removed { display: none; }

/* Wrapper applies the entrance: quick fade + subtle scale settle */
.intro-inner {
  position: relative;
  width: min(48vw, 280px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.94);
  animation: introLogoIn 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 100ms;
  will-change: transform, opacity;
}

#intro-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes introLogoIn {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

/* If user has already seen the intro, skip instantly */
body.intro-skip #intro { display: none; }

@media (max-width: 720px) {
  .intro-inner { width: 64vw; }
}

/* =========================================================
   Header
   ========================================================= */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 86px;
  padding: 0 30px;
  z-index: 2000;
  background: transparent;
  transform: translateY(0);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Hide header when scrolling down, reveal on scroll up */
body.hide-header #header {
  transform: translateY(-100%);
}
body.hide-header .header-shade {
  opacity: 0;
  transition: opacity 350ms ease;
}
/* Never hide while the menu overlay is open */
body.nav-open #header {
  transform: translateY(0) !important;
}

/* Solid header background on non-home pages */
body.page-text #header {
  background: #ffffff;
  border-bottom: 1px solid rgb(235, 235, 235);
}

#header .inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0;
}

#logo a {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 7.2px;
  text-transform: uppercase;
  color: rgb(17, 17, 17);
  display: block;
  white-space: nowrap;
  transition: color 250ms ease;
}

/* On the home page the header always sits over the slideshow on top of a
   dark gradient shade — keep the logo + hamburger white for guaranteed
   contrast. On content pages (about/contact) we use the page-text body
   class which keeps the dark default. */
body.page-home #logo a { color: #ffffff; }
body.page-home #slide_nav_reveal .hamburger span { background-color: #ffffff; }

/* Hamburger button */
#slide_nav_reveal {
  width: 28px;
  height: 22px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hamburger {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: rgb(17, 17, 17);
  transition:
    transform 300ms ease,
    top 250ms ease 100ms,
    opacity 200ms ease;
}

.hamburger span:nth-child(1) { top: 4px; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 16px; }

/* Open state: morph into × */
body.nav-open .hamburger span:nth-child(1) {
  top: 10px;
  transform: rotate(45deg);
  transition: top 250ms ease, transform 300ms ease 200ms;
}
body.nav-open .hamburger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .hamburger span:nth-child(3) {
  top: 10px;
  transform: rotate(-45deg);
  transition: top 250ms ease, transform 300ms ease 200ms;
}

/* When nav is open, hamburger and logo should be white on the dark overlay */
body.nav-open #slide_nav_reveal .hamburger span {
  background-color: #ffffff;
}
body.nav-open #logo a {
  color: #ffffff;
}

/* =========================================================
   Floating view switcher (pill control above the pager)
   ========================================================= */
.view-switcher {
  position: absolute;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: stretch;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: opacity 350ms ease, transform 350ms ease;
}
body.fullscreen-slide-light .view-switcher {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}

.view-switcher-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1);
  left: 4px;
  z-index: 0;
}
body.fullscreen-slide-light .view-switcher-slider { background: #111; }
#slideshow[data-mode="carousel"] ~ * .view-switcher-slider,
#slideshow[data-mode="carousel"] .view-switcher-slider { left: 50%; }

.view-opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: color 280ms ease, transform 220ms ease;
}
.view-opt:hover { color: #fff; }
.view-opt.is-active { color: #111; }
.view-opt:active { transform: scale(0.94); }
body.fullscreen-slide-light .view-opt { color: rgba(0, 0, 0, 0.55); }
body.fullscreen-slide-light .view-opt:hover { color: #000; }
body.fullscreen-slide-light .view-opt.is-active { color: #fff; }

.view-opt svg { display: inline-block; flex: none; }

/* Hide view switcher when nav menu is open */
body.nav-open .view-switcher {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
}

/* =========================================================
   Slideshow container — switches between two modes
   ========================================================= */
#slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

/* Header readability gradient — always a darker top so light text reads
   over any slide. Independent of slide brightness detection. */
.header-shade {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 170px;
  z-index: 12;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.32) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* =========================================================
   Entry choreography — thumbnails fly into place
   Plays once per session after the intro completes.
   ========================================================= */
#entry-stage {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}
#entry-stage.playing {
  opacity: 1;
  visibility: visible;
  transition: opacity 0s, visibility 0s;
}
#entry-stage.done {
  opacity: 0;
  visibility: visible;
  transition: opacity 700ms ease;
}

.entry-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 290px;
  margin-left: -110px;
  margin-top: -145px;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform:
    translate(var(--ec-x, 0), var(--ec-y, 0))
    rotate(var(--ec-rot, 0deg))
    scale(0.55);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--ec-delay, 0ms);
  will-change: transform, opacity;
}
.entry-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fly into scatter positions */
#entry-stage.playing .entry-card {
  opacity: 1;
  transform:
    translate(var(--ec-x, 0), var(--ec-y, 0))
    rotate(var(--ec-rot, 0deg))
    scale(1);
}

/* Converge to center + scale up + fade out */
#entry-stage.done .entry-card {
  opacity: 0;
  transform: translate(0, 0) rotate(0) scale(1.15);
  transition:
    opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0ms;
}

@media (max-width: 720px) {
  .entry-card { width: 150px; height: 200px; margin-left: -75px; margin-top: -100px; }
}

.slideshow-classic,
.slideshow-carousel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
#slideshow[data-mode="classic"] .slideshow-classic {
  opacity: 1;
  pointer-events: auto;
}
#slideshow[data-mode="carousel"] .slideshow-carousel {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   Mode A — Classic horizontal slideshow
   Uses real <img> tags for smooth decoded crossfade
   ========================================================= */
.slides-classic {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.slide-classic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  z-index: 0;
}
.slide-classic.is-active {
  opacity: 1;
  z-index: 2;
}
/* The previous slide stays beneath the new one to prevent flash */
.slide-classic.is-prev {
  opacity: 1;
  z-index: 1;
}

/* Single full-bleed image — every slide fills the viewport identically.
   Consistent size across all slides regardless of aspect ratio. */
.slide-classic img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Arrows (desktop hint, hidden on mobile in favor of swipe) */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  z-index: 5;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 250ms ease;
}
#slideshow:hover .slide-arrow { opacity: 0.55; }
.slide-arrow:hover { opacity: 1 !important; }
.slide-arrow-prev { left: 18px; }
.slide-arrow-next { right: 18px; }
.slide-arrow::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px;
  height: 14px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.slide-arrow-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
body.fullscreen-slide-light .slide-arrow::before {
  border-color: rgb(17, 17, 17);
}

/* Pager dots */
.slideshow_pager_inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px;
  text-align: center;
  z-index: 10;
}
.slideshow_pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.slideshow-pager-item-wrapper {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
}
.slideshow-pager-item {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.38);
  transition: background 250ms ease, transform 200ms ease;
}
.slideshow-pager-item-wrapper:hover .slideshow-pager-item {
  transform: scale(1.2);
}
.slideshow-pager-item-wrapper.active .slideshow-pager-item {
  background: rgba(255, 255, 255, 0.95);
}
body.fullscreen-slide-light .slideshow-pager-item {
  background: rgba(0, 0, 0, 0.28);
}
body.fullscreen-slide-light .slideshow-pager-item-wrapper.active .slideshow-pager-item {
  background: rgba(9, 9, 9, 0.95);
}

/* =========================================================
   Mode B — Floating carousel
   Center card large, neighbors smaller + dim. Interactive.
   ========================================================= */
.slideshow-carousel {
  background: #0a0a0a;
}

.carousel-stage {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

.carousel-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.carousel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(46vw, 620px);
  height: min(78vh, 760px);
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1a1a;
  transform: translate(-50%, -50%) translateX(var(--tx, 0px)) translateZ(var(--tz, 0px)) scale(var(--scale, 1));
  opacity: var(--opacity, 1);
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity   700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter    700ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: brightness(var(--brightness, 1));
  cursor: pointer;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  will-change: transform, opacity, filter;
}

.carousel-card.center {
  z-index: 10;
  cursor: zoom-in;
}

.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show full artwork inside the card */
  object-position: center;
  display: block;
  background: #0a0a0a;
  user-select: none;
  -webkit-user-drag: none;
}

/* Carousel arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%) scale(1.05);
}
.carousel-arrow-prev { left: 26px; }
.carousel-arrow-next { right: 26px; }
.carousel-arrow::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.carousel-arrow-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.carousel-caption {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 15;
  pointer-events: none;
}
.carousel-counter {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 4.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Lightbox-zoom for the center card (toggle .zoomed on .carousel-card.center) */
.carousel-card.center.zoomed {
  --scale: 1;
  --tx: 0px;
  --tz: 0px;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  background: #000;
  cursor: zoom-out;
  z-index: 30;
}
.carousel-card.center.zoomed img {
  object-fit: contain;
  background: #000;
}

/* =========================================================
   Nav overlay — magazine-style split: menu (left) + preview (right)
   ========================================================= */
#responsive_slide_nav_wrapper {
  position: fixed;
  inset: 0;
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.nav-open #responsive_slide_nav_wrapper {
  opacity: 1;
  pointer-events: auto;
}

.nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

#responsive_slide_nav_wrapper_inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 110px 60px 60px;
  gap: 60px;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---------- Left: menu ---------- */
.nav-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 40px;
}

nav ul.topnav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

nav ul.topnav li {
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms + 150ms);
}
body.nav-open nav ul.topnav li {
  opacity: 1;
  transform: translateY(0);
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 22px;
  padding: 8px 0;
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: clamp(40px, 6.4vw, 76px);
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
  text-decoration: none;
  transition: color 250ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-item:hover { color: #ffffff; transform: translateX(10px); }
.nav-item.active { color: #ffffff; }
.nav-item.active::after {
  content: "";
  margin-left: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3FB8B8;
  display: inline-block;
  vertical-align: middle;
  align-self: center;
}

.nav-num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.4);
  align-self: flex-start;
  margin-top: 0.5em;
}
.nav-label { display: inline-block; }

.nav-meta {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease 500ms, transform 500ms ease 500ms;
}
.nav-meta a { color: inherit; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 3px; }
.nav-meta a:hover { color: #fff; border-color: #fff; }
body.nav-open .nav-meta { opacity: 1; transform: translateY(0); }

/* ---------- Right: floating preview ---------- */
.nav-preview {
  position: relative;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 250ms,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 250ms;
}
body.nav-open .nav-preview { opacity: 1; transform: translateY(0) scale(1); }

.nav-preview-frame {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: navFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes navFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.nav-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 450ms ease, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-preview-img.swap-out { opacity: 0; transform: scale(1.04); }

/* =========================================================
   Scroll hint (bottom-left on home, fades on scroll)
   ========================================================= */
.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 30px;
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 9px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 350ms ease;
}
.scroll-hint-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
  animation: scrollHint 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollHint {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(40px); opacity: 0; }
}
body.scrolled .scroll-hint { opacity: 0; }
@media (max-width: 720px) {
  .scroll-hint { left: 18px; bottom: 16px; font-size: 8px; letter-spacing: 2.5px; }
  .scroll-hint-line { height: 26px; }
}

/* =========================================================
   Manifesto section — scrolls in below the home slideshow
   ========================================================= */
.manifesto {
  position: relative;
  background: #0a0a0a;
  color: #f4f1ea;
  padding: 18vh 30px 22vh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Subtle neutral vignette — no color tint */
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.025), transparent 60%);
  pointer-events: none;
}

.manifesto-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  z-index: 1;
}

.manifesto-eyebrow,
.manifesto-eyebrow.reveal {
  display: inline-flex !important;
  align-items: center;
  gap: 16px;
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 40px;
  /* keep the leading dash separate from the text — don't let reveal clip-path bleed */
  overflow: visible !important;
}
.manifesto-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.manifesto-headline {
  font-family: 'Darker Grotesque', sans-serif;
  font-size: clamp(34px, 5.4vw, 76px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.4px;
  margin: 0 0 56px;
  color: #ffffff;
  max-width: 18ch;
}
.manifesto-headline span { display: block; }
/* (manifesto-accent removed — minimal, all lines share the same color) */

.manifesto-body {
  font-family: 'Darker Grotesque', sans-serif;
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 36px;
  max-width: 42ch;
  letter-spacing: 0.1px;
}
.manifesto-body span { display: block; }

.manifesto-meta {
  margin-top: 56px;
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  display: inline-flex;
  gap: 14px;
  align-items: baseline;
}
.manifesto-meta .meta-label { color: rgba(255, 255, 255, 0.35); }
.manifesto-meta .meta-value { color: rgba(255, 255, 255, 0.75); }

/* "Powered by Mule" backlink — bottom-center of manifesto, subtle */
.powered-by {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 220ms ease;
  white-space: nowrap;
}
.powered-by:hover { color: rgba(255, 255, 255, 0.95); }
@media (max-width: 720px) {
  .powered-by { font-size: 9px; letter-spacing: 2.8px; bottom: 18px; }
}

/* Scroll reveal — each .reveal element fades + rises when .in-view is added */
/* Written-out reveal: each line uses a clip-path wipe (left → right)
   on a wrapper, with the text inside also sliding up + fading. The
   compound effect feels like the words are being drawn out as you scroll. */
.reveal {
  display: inline-block;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translateY(12px);
  transition:
    clip-path 1300ms cubic-bezier(0.7, 0, 0.2, 1),
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: clip-path, opacity, transform;
}
.reveal.in-view {
  clip-path: inset(0 0 0 0) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  /* Release the GPU layer once the reveal has finished — keeping
     will-change on every line is what causes the scroll lag. */
  will-change: auto;
}
/* Make headline + body spans block-level so each line wipes its full width. */
.manifesto-headline .reveal,
.manifesto-body .reveal {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* Footer also visible after scroll on home now */
body.page-home #footer {
  display: block;
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.page-home #footer .copyright-text {
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 720px) {
  .manifesto {
    padding: 12vh 22px 14vh;
    min-height: auto;
  }
  .manifesto-eyebrow { font-size: 9px; letter-spacing: 3px; margin-bottom: 22px; }
  .manifesto-headline {
    font-size: clamp(26px, 7.5vw, 38px);
    line-height: 1.18;
    margin-bottom: 28px;
  }
  .manifesto-headline .reveal { line-height: 1.18; }
  .manifesto-body {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 18px;
    max-width: none;
  }
  .manifesto-body .reveal { line-height: 1.45; }
  .manifesto-meta {
    font-size: 9px;
    letter-spacing: 2.5px;
    margin-top: 30px;
  }
  /* Powered by sits at the very bottom with breathing room above */
  .powered-by { bottom: 16px; }
}

/* =========================================================
   Minimal artistic pages (about, contact)
   Shared dark theme; uses the same header + nav overlay as home.
   ========================================================= */
body.page-minimal {
  background: #0a0a0a;
  color: #f4f1ea;
  /* Minimal pages have nothing below the fold → lock to viewport, no scroll */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.page-minimal #header { background: transparent; border-bottom: none; }
body.page-minimal #logo a { color: #ffffff; }
body.page-minimal #slide_nav_reveal .hamburger span { background-color: #ffffff; }

.minimal-page {
  flex: 1 1 auto;
  min-height: 0;
  padding: 150px 60px 60px;
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.minimal-page-center {
  align-items: center;
  justify-content: center;
}

/* Subtle radial accent so the page doesn't feel flat */
.minimal-page::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(63, 184, 184, 0.06), transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(255, 255, 255, 0.03), transparent 50%);
  pointer-events: none;
}

.minimal-frame {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  z-index: 1;
}
.minimal-frame-center { text-align: center; }

.minimal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 28px;
}
.minimal-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.minimal-title {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: clamp(38px, 5.6vw, 76px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin: 0 0 44px;
  color: #ffffff;
}

.minimal-lede {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.74);
  max-width: 580px;
  margin: 0 0 56px;
}

.minimal-email {
  display: inline-block;
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 400;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 8px;
  margin: 12px 0 48px;
  transition: border-color 250ms ease, color 250ms ease, transform 320ms ease;
}
.minimal-email:hover {
  border-color: #3FB8B8;
  color: #3FB8B8;
  transform: translateY(-2px);
}

.minimal-meta {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 8px;
}
.minimal-meta-row { justify-content: center; }
.minimal-page-center .minimal-frame { display: flex; flex-direction: column; align-items: center; }
.meta-label  { color: rgba(255, 255, 255, 0.35); }
.meta-dot    { color: rgba(255, 255, 255, 0.3); }
.meta-value  { color: rgba(255, 255, 255, 0.6); }

/* Minimal footer matches dark theme */
/* Minimal pages are locked to a single viewport — the footer would
   only ever show as a white sliver below the fold. Just hide it. */
body.page-minimal #footer {
  display: none !important;
}

.cv-item {
  flex: 1;
}

/* Contact page */
.contact-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-page .content-inner {
  text-align: center;
}

.contact-line {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 18px;
  letter-spacing: 5.8px;
  text-transform: uppercase;
  margin: 0;
}

.contact-line a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: 4px;
  transition: border-color 200ms ease;
}

.contact-line a:hover {
  border-bottom-color: rgba(0, 0, 0, 0.8);
}

/* =========================================================
   Footer
   ========================================================= */
#footer {
  padding: 30px 0;
  border-top: 1px solid rgb(235, 235, 235);
  background: #ffffff;
}

/* No footer over the slideshow on home (paulcoulon style) */
body.page-home #footer {
  display: none;
}

#footer .inner {
  padding: 0 30px;
  text-align: center;
}

.small-links-container a,
.copyright-text {
  font-family: 'Darker Grotesque', 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 4.4px;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 720px) {
  #header {
    height: 70px;
    padding: 0 18px;
  }

  #logo a {
    font-size: 13px;
    letter-spacing: 4.5px;
  }

  #slide_nav_reveal {
    width: 24px;
    height: 18px;
  }

  .hamburger span:nth-child(1) { top: 3px; }
  .hamburger span:nth-child(2) { top: 8px; }
  .hamburger span:nth-child(3) { top: 13px; }
  body.nav-open .hamburger span:nth-child(1),
  body.nav-open .hamburger span:nth-child(3) { top: 8px; }

  /* Nav layout collapses to single column on mobile, hide preview */
  #responsive_slide_nav_wrapper_inner {
    grid-template-columns: 1fr;
    padding: 90px 28px 40px;
    gap: 24px;
    overflow-y: auto;
  }
  .nav-menu { justify-content: flex-start; padding-top: 24px; gap: 30px; }
  .nav-item {
    font-size: clamp(36px, 11vw, 56px);
    gap: 14px;
  }
  .nav-num { font-size: 10px; letter-spacing: 2.5px; }
  .nav-preview { display: none; }

  /* Minimal pages on mobile */
  .minimal-page {
    padding: 110px 22px 70px;
  }
  .minimal-eyebrow {
    margin-bottom: 22px;
    font-size: 10px;
    letter-spacing: 4px;
  }
  .minimal-eyebrow { gap: 10px; }
  .minimal-eyebrow::before { width: 16px; }
  .minimal-title {
    font-size: clamp(32px, 9vw, 50px);
    margin-bottom: 32px;
    line-height: 1.08;
  }
  .minimal-lede {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 40px;
  }
  .minimal-email {
    font-size: 18px;
    letter-spacing: 3.5px;
    margin: 16px 0 40px;
  }
  .minimal-meta {
    font-size: 10px;
    letter-spacing: 3px;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Slide arrows on mobile: always visible (no hover state on touch) */
  .slide-arrow {
    opacity: 0.7;
    width: 44px;
    height: 44px;
  }
  .slide-arrow-prev { left: 6px; }
  .slide-arrow-next { right: 6px; }
  #slideshow:hover .slide-arrow { opacity: 0.7; }
  .slide-arrow::before {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
  }

  /* View switcher: smaller on mobile */
  .view-switcher {
    bottom: 56px;
    padding: 3px;
  }
  .view-opt {
    padding: 8px 14px;
    font-size: 9.5px;
    letter-spacing: 2.6px;
    gap: 7px;
  }
  .view-opt svg { width: 12px; height: 12px; }

  /* Carousel on mobile: portrait card, peeking neighbors */
  .carousel-card {
    width: 78vw;
    height: 64vh;
    height: 64dvh;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
  .carousel-arrow {
    width: 44px;
    height: 44px;
  }
  .carousel-arrow-prev { left: 10px; }
  .carousel-arrow-next { right: 10px; }
  .carousel-caption { bottom: 22px; }

  .slideshow_pager_inner {
    bottom: 22px;
  }

  .slideshow-pager-item-wrapper {
    padding: 7px;
  }

  .small-links-container a,
  .copyright-text {
    font-size: 10px;
    letter-spacing: 3.5px;
  }
}

/* =========================================================
   Landscape orientation on mobile
   When a phone is rotated the viewport becomes short and wide.
   Reflow the carousel card to a landscape proportion so artwork
   fills it naturally. Classic (full-bleed cover) adapts on its own.
   max-height: 600px targets phones in landscape without touching tablets.
   ========================================================= */
@media (orientation: landscape) and (max-height: 600px) {
  .carousel-card {
    width: 58vw;
    height: 80vh;
    height: 80dvh;
  }

  /* Pull controls up slightly — less vertical room to work with */
  .view-switcher    { bottom: 36px; }
  .slideshow_pager_inner { bottom: 12px; }
  .carousel-caption { bottom: 14px; }

  /* Scroll hint takes too much space in landscape — hide it */
  .scroll-hint { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slide-classic,
  .carousel-card,
  #intro,
  .intro-inner,
  .intro-glow,
  .hamburger span,
  nav ul.topnav li a {
    transition: none !important;
    animation: none !important;
  }
}