/* ==========================================================================
   PORTFOLIO — BENOIT GODDE
   Single shared stylesheet used by every page.
   --------------------------------------------------------------------------
   Sections:
     01. Tokens & resets
     02. Header / nav panel
     03. Page framework
     04. Home page (carousel, marquee, featured)
     05. Work page (posters grid)
     06. About page
     07. Contact page
     08. Project page (gallery)
     09. Floating footer
     10. Responsive
   ========================================================================== */


/* ==========================================================================
   01. TOKENS & RESETS
   ========================================================================== */
:root {
  --bg: #f5f3ee;
  --bg-alt: #ecebe5;
  --fg: #1a1a1a;
  --fg-soft: #5a5a5a;
  --fg-mute: #9a9a9a;
  --line: #d8d6d0;
  --overlay: rgba(245, 243, 238, 0.96);
  --shadow: 0 30px 60px -20px rgba(0,0,0,0.18);
  --radius: 16px;
  --ease: cubic-bezier(.65,.05,.35,1);
  /* Photo shown inside the socials chip when collapsed. Default value is a
     transparent placeholder so nothing weird shows before JS runs.
     common.js sets the real value to images/about/portrait-chip.jpg with
     a correct BASE_PATH-adjusted URL. */
  --socials-portrait: none;
}
[data-theme="dark"] {
  --bg: #0e0e0e;
  --bg-alt: #161616;
  --fg: #f0ede5;
  --fg-soft: #aaa69d;
  --fg-mute: #6a6862;
  --line: #2a2a2a;
  --overlay: rgba(14, 14, 14, 0.96);
  --shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Mobile: only vertical scrolling. Clip any horizontal overflow and kill the
     sideways rubber-band / back-swipe so the whole page can't be dragged left
     or right (the carousels handle their own horizontal swipe in JS). */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* Visually hidden but readable by search engines and screen readers (used for
   the home page H1). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
body {
  position: relative;
  font-family: 'Noto Sans', sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* Small room at the bottom for the vertical copyright stamp */
  padding-bottom: 40px;
  transition: background .5s var(--ease), color .5s var(--ease);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }


/* ==========================================================================
   02. HEADER / NAV PANEL
   ========================================================================== */
/* ==========================================================================
   HEADER STRUCTURE
   --------------------------------------------------------------------------
   1. .logo            — absolutely positioned at top-left, scrolls away with
                         the page (no card / vignette behind, just text)
   2. .header-bar      — fixed at top-right, stays in place when scrolling.
                         Contains the nav pill + every action chip on the right
                         side. Background is transparent — visual interest comes
                         from per-element backdrop-filter on each chip.
   ========================================================================== */

.logo {
  position: fixed;
  top: 30px;
  /* Shifted 35px right from the page padding edge */
  left: 71px;
  z-index: 100;
  will-change: transform, filter;
  /* Smooth re-focus when scrolling back to top — transform is updated per
     frame by JS so we don't transition it; only the filter benefits. */
  transition: filter .25s ease-out;
}

.header-bar {
  position: fixed;
  /* Lowered so the "Soon" tooltip above the shop chip isn't clipped by the
     viewport edge. */
  top: 40px;
  /* Shifted 35px left from the page padding edge */
  right: 71px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.header-bar > * { pointer-events: auto; }

/* The old absolute-positioned .header wrapper is retained as a no-op for any
   markup that still references it. Real layout now uses .logo + .header-bar. */
.header { display: none; }
.top-blur { display: none; }

.logo {
  font-size: 18px;
  line-height: 1.3;
  /* No card / vignette — just text on the page background */
  background: transparent;
  padding: 0;
  border: none;
  max-width: calc(100% - 130px);
  will-change: transform;
}
.logo strong {
  font-weight: 600; display: block;
  letter-spacing: 0.01em; margin-bottom: 5px;
  font-size: 22px; line-height: 1.15;
  /* Light/beige tones in BOTH themes — per request the logo should look
     the same in light mode as it does in dark mode (light text). */
  color: #f0ede5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.logo span {
  display: block; font-size: 12px;
  letter-spacing: 0.05em; font-weight: 400;
  line-height: 1.4;
  /* Same light tone for the tagline */
  color: #c8c4ba;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* On the About and Contact pages in LIGHT mode, there's no carousel image
   to provide contrast, so the light-on-light logo would be unreadable.
   Switch back to the normal page text color on those pages only. */
body[data-page="about"]:not([data-theme="dark"]) .logo strong,
body[data-page="contact"]:not([data-theme="dark"]) .logo strong,
body[data-page="work"]:not([data-project]):not([data-theme="dark"]) .logo strong {
  color: var(--fg);
  text-shadow: none;
}
body[data-page="about"]:not([data-theme="dark"]) .logo span,
body[data-page="contact"]:not([data-theme="dark"]) .logo span,
body[data-page="work"]:not([data-project]):not([data-theme="dark"]) .logo span {
  color: var(--fg-soft);
  text-shadow: none;
}

/* Horizontal nav for desktop — sits in the header next to the toggles.
   The burger + popup nav remain in the DOM but are hidden on desktop, then
   reappear via the responsive media query for mobile. */
.nav-horizontal {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--overlay);
  border: 1px solid var(--line);
}
.nav-horizontal a {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  transition: all .25s var(--ease);
  color: var(--fg-soft);
  border: 1px solid transparent;
}
/* Hover: same look as .lang-toggle on hover — fg becomes bg, bg becomes fg */
.nav-horizontal a:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
/* Current page: bold + filled background to clearly show where the user is */
.nav-horizontal a.current {
  color: var(--bg);
  background: var(--fg);
  font-weight: 700;
  border-color: var(--fg);
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle, .burger, .lang-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--overlay);
  display: grid; place-items: center;
  transition: all .3s var(--ease);
  position: relative;
  z-index: 210;
  color: var(--fg);
}
.lang-toggle {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--fg);
}
/* Same hover style for language and dark-mode toggles — fg/bg inversion */
.lang-toggle:hover,
.theme-toggle:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.theme-toggle:hover svg { stroke: var(--bg); }
.theme-toggle svg { width: 16px; height: 16px; transition: stroke .25s var(--ease); }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* WhatsApp chip — circular button in the top bar that opens wa.me on click. */
.whatsapp-chip {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--overlay);
  display: grid; place-items: center;
  color: var(--fg);
  transition: all .25s var(--ease);
}
.whatsapp-chip svg { width: 18px; height: 18px; transition: fill .25s var(--ease); }
.whatsapp-chip:hover {
  background: var(--fg);
  border-color: var(--fg);
}
.whatsapp-chip:hover svg { fill: var(--bg); }

.burger-inner { width: 18px; height: 14px; position: relative; }
/* Burger is hidden by default (desktop uses .nav-horizontal). Shown in mobile via media query. */
.burger { display: none; }
.burger-inner span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--fg);
  transition: transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease);
}
.burger-inner span:nth-child(1) { top: 0; }
.burger-inner span:nth-child(2) { top: 6px; }
.burger-inner span:nth-child(3) { top: 12px; }
.burger.active .burger-inner span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger.active .burger-inner span:nth-child(2) { opacity: 0; }
.burger.active .burger-inner span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Nav panel — small overlay, top-right */
.nav-panel {
  position: fixed;
  top: 78px;
  right: 36px;
  z-index: 200;
  background: var(--overlay);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 28px;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
  box-shadow: var(--shadow);
}
.nav-panel.active { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-list { list-style: none; }
.nav-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.nav-list li:last-child { border-bottom: none; }
.nav-list a {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  transition: padding-left .3s var(--ease);
}
.nav-list a:hover { padding-left: 6px; }
.nav-list a.current { color: var(--fg-mute); pointer-events: none; }
/* On a project page (a Work sub-page, body[data-project]), the WORK item is
   shown active but must stay tappable so the burger menu returns to the Work
   index page. */
body[data-project] .nav-list a.current {
  color: var(--fg);
  pointer-events: auto;
}
.nav-list .num { font-size: 10px; color: var(--fg-mute); letter-spacing: 0.2em; }


/* ==========================================================================
   03. PAGE FRAMEWORK
   ========================================================================== */
.page-enter { animation: fadeUp .6s var(--ease); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   04. HOME PAGE — carousel, marquee, featured
   ========================================================================== */
.home-wrap { padding: 120px 36px 60px; max-width: 1600px; margin: 0 auto; }

/* Wrapper that holds the ambient blurred background AND the actual carousel.
   The ambient layer is positioned absolutely behind the carousel and extends
   well beyond it so the blur edges fade smoothly. */
.carousel-wrap {
  position: relative;
}
/* Ambient backdrop — shows the currently-visible slide image, blown up,
   heavily blurred, and faded out toward the bottom + sides via a soft mask.
   It floats BEHIND the carousel (z-index 0) and the carousel sits on top
   with a slight elevation. Parallax-driven X/Y are written to the
   --ax / --ay CSS variables by JS. */
.carousel-ambient {
  position: absolute;
  /* Extend ABOVE the carousel so the halo bleeds up behind the page header.
     -320px = -120px to clear the home-wrap padding + 200px extra lift so
     the blurred image floats higher and the bottom fade has more room. */
  top: -320px;
  left: -200px;
  right: -200px;
  /* Shorter downward overflow — the gradient now dies earlier so the ambient
     doesn't drag into the studios marquee / featured grid below. */
  bottom: -80px;
  z-index: 0;
  pointer-events: none;
  background-image: var(--ambient-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Soft blur — visible halo without losing too much of the image colour */
  filter: blur(20px) saturate(1.1);
  opacity: 0.8;
  /* Faster bottom fade: starts dropping at 50% and fully transparent by 75%
     so the ambient gracefully exits the page well before the section below. */
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,0.3) 70%, transparent 85%),
    radial-gradient(ellipse 95% 100% at 50% 40%, #000 35%, rgba(0,0,0,0.55) 75%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,0.3) 70%, transparent 85%),
    radial-gradient(ellipse 95% 100% at 50% 40%, #000 35%, rgba(0,0,0,0.55) 75%, transparent 100%);
          mask-composite: intersect;
  /* Parallax — JS sets --ax / --ay (in px) based on mouse and scroll */
  transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) scale(1.05);
  transition: background-image .6s ease-out, opacity .4s ease-out;
  will-change: transform, background-image;
}
/* The actual carousel sits ABOVE the ambient backdrop. */
.carousel,
.project-gallery {
  position: relative;
  z-index: 1;
  /* Vertical page scroll stays with the browser; horizontal gestures are
     handed to our JS swipe handler so the page never pans sideways. */
  touch-action: pan-y;
}
.carousel {
  width: 100%;
  /* Reduced from 100vh-200px so that the studios marquee and featured grid
     are partially visible without scrolling */
  height: 72vh; min-height: 480px; max-height: 800px;
  overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--bg-alt);
}
.carousel-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s var(--ease); cursor: pointer;
  /* Inactive slides are visually hidden AND must not catch clicks —
     otherwise the topmost slide in the DOM stack intercepts every click,
     which sends the user to a random project. */
  pointer-events: none;
}
/* Active slide: visible, and click-through over its image so the underlying
   left/right click zones receive hover + clicks (carousel navigation). It sits
   above the zones (z-index) so the "Visit the project" link — the only element
   with pointer-events:auto inside — stays clickable. */
.carousel-slide.active { opacity: 1; pointer-events: none; z-index: 6; }
.carousel-slide .slide-img {
  position: absolute; inset: -5%;
  background-size: cover; background-position: center;
  transform: scale(1);
  transition: transform 8s linear;
}
.carousel-slide.active .slide-img { transform: scale(1.12); }
.carousel-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.slide-content {
  position: absolute; left: 40px; bottom: 60px;
  right: auto;
  max-width: 50%;
  color: #fff; z-index: 2; pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.slide-cat {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0.85; font-weight: 500;
}
.slide-subline {
  font-size: 15px;
  letter-spacing: 0.04em;
  font-weight: 400;
  opacity: 0.9;
}
/* Each credit (line) sits on its own row with a small gap between them */
.slide-subline-line {
  line-height: 1.4;
}
/* When 2 lines are present (e.g. Life: "Screenwriters" / "Rhett Reese..."),
   the first one reads like a small label, the second like the real value */
.slide-subline-line:first-child:not(:only-child) {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2px;
}
/* A bit of breathing room between the text block and the project logo */
.slide-logo-big { margin-top: 20px; }
/* Big project logo BELOW the text info. Anchored bottom-left of the slide. */
.slide-logo-big {
  max-width: 100%;
}
.slide-logo-big img {
  max-height: 70px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6));
}

/* "Visit the project" link, placed under the logo (bottom-left). It is the
   only clickable element inside .slide-content (which is otherwise click-
   through, so the rest of the slide drives carousel navigation). */
.slide-visit {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.slide-visit:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: #fff;
  color: #111;
}
.slide-visit-arrow { transition: transform 0.25s ease; }
.slide-visit:hover .slide-visit-arrow { transform: translateX(3px); }

/* Award badges shown bottom-right on each carousel slide. Aligned with the
   project logo (slide-logo-big) which sits bottom-left, so both visuals share
   the same baseline. */
.slide-awards {
  position: absolute;
  right: 40px;
  bottom: 60px;
  display: flex;
  gap: 14px;
  align-items: center;
  z-index: 3;
  pointer-events: none;
}
.slide-awards img {
  height: 70px;
  width: auto;
  /* Force the logos to white regardless of the source PNG color, then add a
     soft shadow so they read on any background image. The chain works as:
     - brightness(0) → black silhouette
     - invert(1)     → white silhouette */
  filter: brightness(0) invert(1) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6));
}
@media (max-width: 768px) {
  .slide-awards { right: 18px; bottom: 18px; gap: 8px; }
  .slide-awards img { height: 50px; }
}

/* Carousel dots — now positioned BELOW the carousel, not overlaid.
   The container .carousel-dots is moved out of .carousel via JS so the
   dots use page background colors (dark dot on light bg). */
.carousel-dots {
  position: relative;
  margin: 22px auto 0;
  display: flex; gap: 10px; justify-content: center;
  max-width: 90%; flex-wrap: wrap;
}

/* Cursor label — pill that follows the pointer over the carousel, sitting to
   its LEFT (like a context hint). pointer-events:none so it never blocks the
   click. Positioned via fixed + JS-set left/top = clientX/clientY; the
   transform shifts it left of and vertically centered on the pointer. */
.carousel-cursor-label {
  position: fixed;
  top: 0; left: 0;
  transform: translate(calc(-100% - 16px), -50%) scale(0.96);
  transform-origin: right center;
  display: flex; align-items: baseline; gap: 7px;
  padding: 7px 13px;
  /* Light mode: dark pill, light text. Explicit (not var) so the colour is
     guaranteed to invert with the theme regardless of where the label sits
     in the DOM relative to the data-theme attribute. */
  background: #1a1a1a; color: #f5f3ee;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 11px; letter-spacing: 0.02em;
  box-shadow: 0 6px 22px rgba(0,0,0,0.22);
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
/* Dark mode: keep the dark pill with light text (same as light mode). */
[data-theme="dark"] .carousel-cursor-label {
  background: #1a1a1a; color: #f5f3ee;
  box-shadow: 0 6px 22px rgba(0,0,0,0.5);
}

/* Gallery cursor label (project pages): "Next" left of cursor on the right
   zone, "Previous" right of cursor on the left zone. Same pill look as the
   home label; dark in both themes. Never affects the native cursor. */
.gallery-cursor-label {
  position: fixed; top: 0; left: 0;
  padding: 7px 14px;
  background: #1a1a1a; color: #f5f3ee;
  border-radius: 999px; white-space: nowrap;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
  pointer-events: none;
  opacity: 0; z-index: 9999;
  transition: opacity .15s var(--ease);
}
.gallery-cursor-label.show { opacity: 1; }
.gallery-cursor-label.to-left  { transform: translate(calc(-100% - 18px), -50%); }
.gallery-cursor-label.to-right { transform: translate(18px, -50%); }
@media (hover: none) { .gallery-cursor-label { display: none; } }
.carousel-cursor-label.show {
  opacity: 1;
  transform: translate(calc(-100% - 16px), -50%) scale(1);
}
.carousel-cursor-label .ccl-action {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600; font-size: 9px; opacity: 0.6;
}
.carousel-cursor-label .ccl-title { font-weight: 500; }
/* Hide the custom label on touch / coarse pointers (no hover there) */
@media (hover: none) { .carousel-cursor-label { display: none; } }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line);
  border: 1px solid var(--line);
  cursor: pointer; padding: 0;
  transition: all .3s var(--ease);
}
.dot.active { background: var(--fg); width: 32px; border-radius: 5px; border-color: var(--fg); }
.dot:hover { background: var(--fg-soft); }
/* In dark mode, the default --line is very dark and the inactive dots
   nearly disappear against the page bg. Lift them a few shades so the
   pagination remains discoverable without competing with the active dot. */
[data-theme="dark"] .dot {
  background: #4a4a4a;
  border-color: #4a4a4a;
}
/* The active dot uses the LIGHT mode's bg color (#f5f3ee) — same beige as
   the light theme background. */
[data-theme="dark"] .dot.active {
  background: #f5f3ee;
  border-color: #f5f3ee;
}

/* Studios marquee */
.studios-section {
  margin-top: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.studios-label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 24px; font-weight: 500;
  text-align: center;
}
.studios-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.studios-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* Animate continuously by default — 40s for a noticeable but not frantic pace */
  animation: marquee 40s linear infinite;
  /* Explicitly RUNNING so any browser/extension that defaults to paused
     still scrolls the marquee. */
  animation-play-state: running;
  /* Hint the browser to use GPU compositing — smoother + ensures the
     transform actually triggers rendering on slower devices. */
  will-change: transform;
}
.studios-track:hover { animation-play-state: paused; }
/* Even when the user has reduced-motion enabled, we keep the marquee moving
   because it's a decorative scroller that wouldn't break accessibility. */
@media (prefers-reduced-motion: reduce) {
  .studios-track { animation-duration: 80s; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.studio-logo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  /* Espace identique entre chaque logo (y compris à la jointure de la boucle).
     On utilise margin-right plutôt que `gap` pour que le défilement CSS -50%
     se raccorde parfaitement, sans saut. Un seul réglage gouverne l'écart. */
  margin-right: 56px;
  /* Softer in light mode (dark marks on beige can feel heavy) */
  opacity: 0.55;
  transition: opacity .3s var(--ease);
}
/* In DARK mode the light marks are subtle on black, so nudge opacity up. */
[data-theme="dark"] .studio-logo {
  opacity: 0.75;
}
.studio-logo:hover { opacity: 1; }

/* The logos ship as WHITE artwork on transparent. We tint them per theme with
   a CSS filter (universally supported):
   - LIGHT mode: brightness(0) turns the artwork solid dark, reading as near
     black on the beige page background.
   - DARK mode: repaint to the light background tone (a warm off-white) so the
     logos read as light marks on the dark background. */
.studio-logo img {
  display: block;
  object-fit: contain;
  filter: brightness(0);
}
[data-theme="dark"] .studio-logo img {
  filter: brightness(0) invert(1) sepia(0.12) saturate(0.6) brightness(0.97);
}

/* Featured 2-col */
.featured-section { margin-top: 20px; }
.featured-label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 30px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; font-weight: 500;
}
.featured-label .right {
  font-weight: 400; letter-spacing: 0.05em;
  color: var(--fg-mute); text-transform: none; font-size: 12px;
}
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.featured-card { cursor: pointer; }
.featured-img-wrap {
  position: relative; aspect-ratio: 16/10;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-alt); box-shadow: var(--shadow); margin-bottom: 22px;
}
.featured-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .9s var(--ease);
}
.featured-card:hover .featured-img { transform: scale(1.05); }
/* Project logo centered on the cover image — same visual treatment as the
   home carousel slides, but anchored in the middle of the wrap. */
.featured-logo-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
  padding: 32px;
}
.featured-logo-center img {
  max-width: 60%;
  max-height: 50%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55));
}
/* Award badges shown bottom-right on the featured card cover */
.featured-awards {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.featured-awards img {
  height: 50px;
  width: auto;
  /* Force white over the cover image */
  filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
@media (max-width: 768px) {
  .featured-awards { right: 12px; bottom: 12px; gap: 6px; }
  .featured-awards img { height: 40px; }
}
.featured-logo-overlay {
  position: absolute; top: 24px; left: 24px;
  max-width: 140px;
}
.featured-logo-overlay img { max-height: 60px; width: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.featured-cat-tag {
  position: absolute; top: 24px; right: 24px;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  padding: 6px 12px; border-radius: 20px; font-weight: 500;
}
.featured-meta {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;
}
.featured-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.featured-year { font-size: 12px; color: var(--fg-mute); letter-spacing: 0.15em; }
.featured-desc { font-size: 14px; color: var(--fg-soft); line-height: 1.6; }


/* ==========================================================================
   05. WORK PAGE — posters grid
   ========================================================================== */
.work-page { padding: 100px 36px 80px; max-width: 1600px; margin: 0 auto; }
.page-title {
  font-size: clamp(36px, 5.5vw, 64px); font-weight: 300;
  letter-spacing: -0.02em; margin-bottom: 14px;
}
.page-subtitle {
  font-size: 14px; color: var(--fg-soft);
  margin-bottom: 60px; max-width: 500px;
}
.work-tabs {
  display: flex; gap: 32px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.work-tab {
  padding: 14px 0; font-size: 13px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-mute); position: relative;
  transition: color .3s var(--ease);
}
.work-tab .count {
  font-size: 10px; margin-left: 4px; color: var(--fg-mute);
  font-weight: 400; vertical-align: super;
}
.work-tab.active { color: var(--fg); }
.work-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 100%; height: 1px; background: var(--fg);
}
.work-tab:hover { color: var(--fg); }

/* Phones only (≤600px): category tabs shrink to stay on ONE line, and the
   posters grid switches to 2 columns. Tablets (iPad, 768px+) are unaffected. */
@media (max-width: 600px) {
  .work-tabs {
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .work-tab {
    font-size: 8.5px;
    letter-spacing: 0;
    padding: 11px 0;
    white-space: nowrap;
  }
  .work-tab .count { font-size: 7px; margin-left: 2px; }
}

.posters-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px;
}
/* Phones (≤600px): two columns of covers (placed after the base rule so it
   reliably overrides the auto-fill default). */
@media (max-width: 600px) {
  .posters-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.poster { cursor: pointer; transition: transform .4s var(--ease); }
.poster:hover { transform: translateY(-6px); }
.poster-img-wrap {
  /* Project covers are designed at 800×1115 — keep the same aspect-ratio
     so the placeholder fills the same proportions */
  aspect-ratio: 800 / 1115;
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); background: var(--bg-alt);
  margin-bottom: 14px; position: relative;
}
.poster-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .8s var(--ease);
}
.poster:hover .poster-img { transform: scale(1.06); }
.poster-info { padding: 0 4px; }
.poster-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; letter-spacing: -0.01em; }
/* Studio name shown under the title for video-game covers only */
.poster-studio {
  font-size: 12px;
  color: var(--fg-soft);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.poster-meta { font-size: 11px; color: var(--fg-mute); letter-spacing: 0.12em; text-transform: uppercase; }

/* Lock chip in the top-right corner of a protected cover */
.poster-lock {
  position: absolute;
  /* Centered on the cover, much larger so the locked state reads from afar */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3;
  transition: background .25s var(--ease), transform .25s var(--ease);
  cursor: pointer;
}
.poster-lock svg { width: 32px; height: 32px; }
.poster-lock:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: translate(-50%, -50%) scale(1.05);
}
.poster--locked .poster-img { filter: brightness(0.55); }

/* Password modal */
.pw-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.pw-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.pw-modal-card {
  background: var(--bg);
  color: var(--fg);
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 32px 32px 24px;
  width: min(420px, calc(100vw - 36px));
  text-align: center;
  position: relative;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  transform: translateY(8px);
  transition: transform .25s var(--ease);
}
.pw-modal.open .pw-modal-card { transform: translateY(0); }
.pw-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  font-size: 24px; line-height: 1;
  color: var(--fg-soft); cursor: pointer;
  padding: 4px 8px;
  transition: color .2s var(--ease);
}
.pw-modal-close:hover { color: var(--fg); }
.pw-modal-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--fg);
}
.pw-modal-title {
  font-size: 20px; font-weight: 500;
  margin-bottom: 6px; letter-spacing: -0.01em;
}
.pw-modal-sub {
  font-size: 13px; color: var(--fg-soft);
  margin-bottom: 22px; line-height: 1.5;
}
.pw-modal-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s var(--ease);
  text-align: center;
  letter-spacing: 0.08em;
}
.pw-modal-input:focus { border-color: var(--fg); }
.pw-modal-error {
  font-size: 12px;
  color: #c0392b;
  margin-top: 10px;
  min-height: 18px;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.pw-modal-error.show { opacity: 1; }
.pw-modal-submit {
  margin-top: 18px;
  padding: 12px 32px;
  border: 1px solid var(--fg);
  border-radius: 50px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .2s var(--ease);
}
.pw-modal-submit:hover { opacity: 0.85; }

/* Intro popup hint rows (reuses the pw-modal shell). */
.intro-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-alt, rgba(127,127,127,0.10));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  text-align: center;
}
.intro-hints {
  text-align: left;
  margin: 4px 0 4px;
  display: flex; flex-direction: column; gap: 12px;
}
.intro-hint {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px;
  align-items: center;
}
.intro-hint-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 7px 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-alt);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--fg);
}
.intro-hint-text { font-size: 13px; color: var(--fg-soft); line-height: 1.45; }

/* "Additional cinema work" list under the cinema grid — styled like awards.
   Lifted higher (no border-top / smaller margin) per request. */
.more-films-section {
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
}
.more-films-section .awards-title {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 24px;
  /* No bottom border above the title anymore */
  padding-bottom: 0; border-bottom: none;
  font-weight: 500;
}
.more-films-section .award {
  display: grid; grid-template-columns: 70px 1fr auto auto;
  gap: 30px; padding: 16px 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.more-films-section .award:last-child { border-bottom: none; }
.more-films-section .award-designer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 70px;
  font-size: 13px; color: var(--fg-soft);
  letter-spacing: 0.01em; text-align: right; white-space: nowrap;
}
/* Award label, styled like the carousel's "Visit the project" pill, shown to
   the LEFT of the credit and centered on the line. */
.award-tag {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-soft);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.award-star { font-size: 10px; margin-right: 7px; line-height: 1; }


/* ==========================================================================
   06. ABOUT PAGE
   ========================================================================== */
.about-page { padding: 120px 36px 80px; max-width: 1100px; margin: 0 auto; }
.about-intro {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 40px; margin-bottom: 40px; align-items: start;
}
.about-portrait {
  aspect-ratio: 3/4; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg-alt), var(--line));
  background-size: cover; background-position: center;
  box-shadow: var(--shadow);
  /* Make the portrait sit ABOVE the fixed logo when scrolling. The logo
     has z-index: 100, so 101 here lifts the photo over it. */
  position: relative;
  z-index: 101;
  /* will-change hints the browser for the parallax translate updates */
  will-change: transform;
}
.about-text h1 {
  font-size: clamp(32px, 4.5vw, 52px); font-weight: 300;
  letter-spacing: -0.02em; margin-bottom: 30px; line-height: 1.1;
}
.about-text p {
  font-size: 16px; color: var(--fg-soft);
  margin-bottom: 18px; line-height: 1.75;
}
.about-text em { font-style: italic; color: var(--fg); font-weight: 500; }

/* Additional content sections below the intro */
.about-section {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
/* Skills + Software shown side by side on the about page */
.about-skills-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.about-skills-title {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 500;
  margin-bottom: 14px;
}
.about-skills-body p {
  font-size: 15px;
  color: var(--fg);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 768px) {
  .about-skills-row { grid-template-columns: 1fr; gap: 24px; }
}

/* Big circular social chips at the bottom of the About page — same diameter
   as the lock chip on protected covers (~76px) so they read as primary CTAs. */
.about-socials {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.about-social-chip {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--overlay);
  display: grid; place-items: center;
  color: var(--fg);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.about-social-chip:hover {
  background: var(--fg);
  border-color: var(--fg);
  transform: translateY(-2px);
}
.about-social-chip svg {
  width: 26px; height: 26px;
  fill: var(--fg-soft);
  transition: fill .25s var(--ease);
  display: block;
}
.about-social-chip:hover svg { fill: var(--bg); }
/* IMDb's wider viewBox (text-only mark) */
.about-social-chip[aria-label="IMDb"] svg { width: 36px; height: auto; }
@media (max-width: 600px) {
  .about-social-chip { width: 52px; height: 52px; }
  .about-social-chip svg { width: 22px; height: 22px; }
  .about-social-chip[aria-label="IMDb"] svg { width: 32px; }
  .about-socials { gap: 12px; }
}
.about-section h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  line-height: 1.2;
}
.about-section p {
  font-size: 16px;
  color: var(--fg-soft);
  margin-bottom: 18px;
  line-height: 1.75;
}
.about-section em {
  font-style: italic;
  color: var(--fg);
  font-weight: 500;
}

/* Invitation to IMDb for full filmography */
.imdb-cta {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  font-size: 15px;
}
.imdb-cta a {
  color: var(--fg);
  font-weight: 500;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 1px;
  transition: opacity .2s var(--ease);
}
.imdb-cta a:hover { opacity: 0.65; }

.awards-section { margin-top: 60px; }
.awards-title {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 30px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.award {
  display: grid;
  /* year | trophy logo | description | category */
  grid-template-columns: 70px 56px 1fr auto;
  gap: 22px; padding: 20px 0;
  border-bottom: 1px solid var(--line); align-items: center;
}
.award-year { color: var(--fg-mute); font-size: 14px; font-weight: 500; letter-spacing: 0.05em; }
.award-logo-row {
  /* Trophy icon, sized to roughly fit the row */
  display: grid; place-items: center;
  color: var(--fg-soft);
  opacity: 0.85;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.award-logo-row svg, .award-logo-row img {
  width: 44px; height: 44px;
  object-fit: contain;
}
.award:hover .award-logo-row { opacity: 1; color: var(--fg); }
/* Dark mode: invert raster PNGs so the gold trophy reads on dark bg */
/* Dark mode: tint award PNG trophies to the LIGHT mode's bg color (#f5f3ee)
   so they read as beige on the dark page background. */
[data-theme="dark"] .award-logo-row img {
  filter: brightness(0) invert(1) sepia(0.18) saturate(0.7) brightness(0.96);
}
.award-name { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; }
.award-name small {
  display: block; font-size: 12px; color: var(--fg-soft);
  font-weight: 400; margin-top: 4px; letter-spacing: 0.02em;
}
.award-name a {
  color: inherit;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease), opacity .2s var(--ease);
}
.award-name a:hover { border-bottom-color: currentColor; opacity: 0.75; }
.award-cat {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 500;
}
/* Empty award-logo cell — keeps the layout aligned even when no trophy logo */
.award-logo-row.empty { visibility: hidden; }
@media (max-width: 600px) {
  .award { grid-template-columns: 60px 40px 1fr; gap: 12px; }
  .award-logo-row svg, .award-logo-row img { width: 32px; height: 32px; }
  .award-cat { display: none; }
}


/* ==========================================================================
   07. CONTACT PAGE
   ========================================================================== */
.contact-page { padding: 109px 36px 80px; max-width: 900px; margin: 0 auto; }
.contact-intro { text-align: center; margin-bottom: 60px; }
.contact-intro h1 {
  font-size: clamp(32px, 4.5vw, 56px); font-weight: 300;
  letter-spacing: -0.02em; margin-bottom: 18px;
  white-space: nowrap;
}
/* On narrow screens, allow the title to wrap rather than overflow */
@media (max-width: 600px) {
  .contact-intro h1 { white-space: normal; font-size: clamp(28px, 7vw, 40px); }
}
.contact-intro p { font-size: 16px; color: var(--fg-soft); max-width: 500px; margin: 0 auto; line-height: 1.65; }
/* WhatsApp + location: rendered as a pill chip, same visual style as the top
   nav and the lang/theme/socials buttons in the header. The WhatsApp link
   fills the pill entirely so the hover highlight has equal margin on every
   side (top/bottom/left/right after "Saigon"). */
.contact-info {
  margin: 28px auto 0 !important;
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border-radius: 999px;
  background: var(--overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  font-size: 14px !important;
  letter-spacing: 0.04em;
  color: var(--fg) !important;
  font-weight: 500;
  overflow: hidden;
}
/* WhatsApp link fills the entire pill content. */
.contact-info a.wa-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  /* Same padding all around so the hover highlight is visually balanced */
  padding: 10px 22px;
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.contact-info a.wa-link:hover {
  background: var(--fg);
  color: var(--bg);
}
.contact-info a.wa-link strong { font-weight: 700; }
.contact-info .wa-suffix { padding-right: 0; }

/* Live clocks for Paris + Saigon — small, centered under the WhatsApp pill */
.contact-clocks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.contact-clock .clock-label { margin-right: 6px; opacity: 0.75; }
.contact-clocks .clock-sep { opacity: 0.5; }
/* Override the default text-align center on the .contact-intro parent so the
   pill chip sits in the middle on its own line */
.contact-intro { display: flex; flex-direction: column; align-items: center; }
.contact-intro h1, .contact-intro > p:not(.contact-info) { width: 100%; }
.contact-form { display: grid; gap: 28px; margin-bottom: 70px; }
.form-wrap { margin-bottom: 70px; }
.form-wrap.sent .contact-form { display: none; }
.form-wrap:not(.sent) .thanks-card { display: none; }

.thanks-card {
  text-align: center;
  padding: 60px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  animation: thanksIn .55s var(--ease);
}
@keyframes thanksIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.thanks-icon {
  width: 56px; height: 56px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--fg);
}
.thanks-icon svg { width: 24px; height: 24px; }
.thanks-card h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.thanks-card h2 span { font-weight: 500; }
.thanks-card p {
  font-size: 15px;
  color: var(--fg-soft);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 30px;
}
.thanks-card p strong { color: var(--fg); font-weight: 500; }
.thanks-btn {
  padding: 14px 32px;
  border: 1px solid var(--line);
  border-radius: 50px;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 500;
  transition: all .3s var(--ease);
}
.thanks-btn:hover { border-color: var(--fg); color: var(--fg); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.form-field { position: relative; }
.form-field label {
  position: absolute; top: 14px; left: 0;
  font-size: 13px; color: var(--fg-mute);
  pointer-events: none; letter-spacing: 0.04em;
  transition: all .3s var(--ease);
}
.form-field input, .form-field textarea {
  width: 100%; padding: 14px 0 10px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--line);
  color: var(--fg); font-family: inherit; font-size: 15px;
  outline: none; transition: border-color .3s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field input:focus, .form-field textarea:focus { border-bottom-color: var(--fg); }
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: -10px; font-size: 10px;
  color: var(--fg-soft); letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500;
}
.submit-btn {
  justify-self: end; padding: 16px 38px;
  border: 1px solid var(--fg); border-radius: 50px;
  font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  transition: all .3s var(--ease); margin-top: 10px; font-weight: 500;
}
.submit-btn:hover { background: var(--fg); color: var(--bg); }
.submit-btn:disabled { opacity: 0.5; cursor: wait; }

.form-error {
  font-size: 13px; color: #c0392b; margin-top: 10px;
  display: none;
}
.form-error.active { display: block; }

.social-section { text-align: center; padding-top: 50px; border-top: 1px solid var(--line); }
.social-label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 26px; font-weight: 500;
}
.social-icons { display: flex; justify-content: center; gap: 22px; }
.social-icons a {
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  transition: all .3s var(--ease);
}
.social-icons a:hover {
  background: var(--fg); border-color: var(--fg); transform: translateY(-3px);
}
.social-icons a:hover svg { fill: var(--bg); }
.social-icons svg { width: 17px; height: 17px; fill: var(--fg); transition: fill .3s var(--ease); }


/* ==========================================================================
   08. PROJECT PAGE — gallery
   ========================================================================== */
.project-gallery-wrap {
  padding: 120px 36px 0;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}
.project-gallery {
  position: relative; width: 100%;
  z-index: 1;
  /* Reduced height from 100vh-200px to ~72vh — gives more breathing room
     to the content below and stops the gallery from dominating the page */
  height: 72vh; min-height: 480px; max-height: 800px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-alt);
}
/* Dedicated layer that holds the stacked slides. Sits below the back-link,
   logo overlay, click-zones — they remain visible and interactive. */
.gallery-slides {
  position: absolute; inset: 0;
  z-index: 1;
}
.gallery-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.gallery-slide.active { opacity: 1; }
.gallery-slide .slide-img {
  position: absolute; inset: -5%;
  background-size: cover; background-position: center;
  transform: scale(1);
  transition: transform 8s linear;
}
.gallery-slide.active .slide-img { transform: scale(1.12); }
.gallery-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

/* Invisible left / right click zones for prev / next */
.gallery-click-zone {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 5;
  cursor: pointer;
  background: transparent;
}
.gallery-click-zone.prev { left: 0; cursor: w-resize; }
.gallery-click-zone.next { right: 0; cursor: e-resize; }

.project-logo-overlay {
  position: absolute; top: 28px; right: 28px;
  z-index: 4;
  max-width: 240px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
  pointer-events: none;
}
.project-logo-overlay img { max-height: 90px; width: auto; }

/* Counter bars — moved BELOW the gallery (no longer overlaid on it).
   We pull the .gallery-counter OUT of the .project-gallery box visually
   by positioning it just below, centered, with dark-on-light bullets. */
.gallery-counter {
  position: relative;
  margin: 22px auto 0;
  display: flex; gap: 10px;
  justify-content: center;
  width: 100%;
}
.counter-bar {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line);
  border: 1px solid var(--line);
  cursor: pointer; padding: 0;
  transition: all .3s var(--ease);
}
.counter-bar:hover { background: var(--fg-soft); }
.counter-bar.active { background: var(--fg); width: 32px; border-radius: 5px; border-color: var(--fg); }
/* Same lift in dark mode as the home carousel dots */
[data-theme="dark"] .counter-bar {
  background: #4a4a4a;
  border-color: #4a4a4a;
}
[data-theme="dark"] .counter-bar.active {
  background: #f5f3ee;
  border-color: #f5f3ee;
}

.project-content {
  max-width: 1100px; margin: 0 auto;
  /* Remonté : padding-top réduit pour rapprocher le bloc texte/info de la galerie */
  padding: 40px 36px 60px;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px;
}
.project-info h1 {
  font-size: clamp(34px, 5vw, 56px); font-weight: 300;
  letter-spacing: -0.02em; margin-bottom: 30px; line-height: 1.05;
}
.project-desc {
  font-size: 16px; color: var(--fg-soft);
  line-height: 1.8; margin-bottom: 22px;
}
.project-desc-p { margin: 0 0 14px; }
.project-desc-p:last-child { margin-bottom: 0; }
/* Highlight names (people, studios, titles) inside project text, exactly
   like on the About page: italic, full foreground colour, medium weight. */
.project-desc em,
.project-desc-p em { font-style: italic; color: var(--fg); font-weight: 500; }
/* Inline links inside project text (e.g. cross-links to related projects). */
.project-desc a,
.project-desc-p a {
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease), opacity .2s var(--ease);
}
.project-desc a:hover,
.project-desc-p a:hover { border-bottom-color: currentColor; opacity: 0.78; }

/* Optional link buttons under the description (Instagram, website, …).
   Same visual language as the WhatsApp chip: pill, 1px line, overlay bg,
   hover inverts to the foreground colour. Works in dark + light. */
.project-links {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 22px;
}
.project-links:empty { display: none; }
.social-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--overlay);
  color: var(--fg);
  font-size: 14px; letter-spacing: 0.01em;
  text-decoration: none;
  transition: all .25s var(--ease);
}
.social-chip svg {
  width: 18px; height: 18px;
  fill: currentColor;
  transition: fill .25s var(--ease);
}
.social-chip:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* Awards logos under the description — DEPRECATED. Awards are now shown only
   in the sidebar (as text) and on the home carousel slides (as PNG badges).
   The container is always empty on project pages now, so it stays hidden. */
.project-awards { display: none; }
.award-logo {
  height: 60px; width: auto;
  opacity: 0.85;
  transition: opacity .25s var(--ease);
}
.award-logo:hover { opacity: 1; }

/* In dark mode, invert the dark grey logos so they read as light grey on dark bg */
[data-theme="dark"] .award-logo {
  filter: invert(1) brightness(0.85);
}

/* Multiple award names in the sidebar */
.award-name-line {
  margin-bottom: 6px;
  line-height: 1.4;
}
.award-name-line:last-child { margin-bottom: 0; }

/* Project specs sidebar — no top border so it sits flush with the project title */
.project-specs { border-top: none; padding-top: 0; }
.specs-label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 24px; font-weight: 500;
}
.spec-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.spec-row:last-child { border-bottom: none; }
.spec-row.hidden { display: none; }
.spec-key {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 500;
}
.spec-val { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }

/* PROJECT PRESS — table of publications under the description, same visual
   language as the spec rows (year key left, name/title right). */
.project-press { margin: 30px 0 22px; }
.project-press:empty { display: none; }
.press-label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 18px; font-weight: 500;
}
.press-group { margin-bottom: 56px; }
.press-group:last-child { margin-bottom: 0; }
.press-subhead {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 500;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.press-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.press-row:last-child { border-bottom: none; }
.press-year {
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--fg-mute); font-weight: 500;
}
.press-name { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
.press-name a {
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color .2s var(--ease);
}
.press-name a:hover { border-bottom-color: var(--fg); }
.press-title {
  display: block;
  font-size: 12px; font-weight: 400; color: var(--fg-soft);
  margin-top: 3px; line-height: 1.4;
}

.back-link {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; font-weight: 500;
  transition: background .3s var(--ease);
  z-index: 7;
}
.back-link:hover { background: rgba(255,255,255,0.3); }


/* ==========================================================================
   09. SOCIALS CHIP + VERTICAL COPYRIGHT
   --------------------------------------------------------------------------
   The old floating footer has been removed. In its place:
     - A round "chip" in the top-right of the header that expands vertically
       on hover to reveal the social media icons.
     - A small vertical copyright line in the bottom-right corner.
   ========================================================================== */

/* Socials chip — collapsed state is a circular button matching the other
   header buttons (lang-toggle, theme-toggle). Hovering the wrapper expands
   the chip downward into a pill that contains the social icons. */
.socials-chip {
  position: relative;
  width: 44px;
  height: 44px;
}

/* Shop chip — circular button with a "Soon" tooltip on hover. Placed between
   the nav and the lang toggle. Same visual size as lang/theme buttons. */
.shop-chip {
  position: relative;
}
.shop-chip-trigger {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--overlay);
  display: grid;
  place-items: center;
  color: var(--fg);
  cursor: not-allowed;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.shop-chip-trigger:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
/* Tooltip "Soon / Bientôt" positioned above the chip, fades in on hover */
.shop-chip-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--fg);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.shop-chip:hover .shop-chip-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* OLD: trigger button hidden, replaced by .socials-chip-portrait inside the panel */
.socials-chip-trigger { display: none; }

/* The panel — a vertical pill containing the portrait (always visible) and
   the social link icons (revealed on hover). */
.socials-chip-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--overlay);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  /* Collapsed: only the portrait shows (one row of 36px + padding 8px = 44px). */
  height: 44px;
  overflow: hidden;
  transition: height .35s var(--ease);
  z-index: 2;
}
.socials-chip:hover .socials-chip-panel,
.socials-chip:focus-within .socials-chip-panel {
  /* 7 items (portrait + 6 icons) × 36px + 6 gaps × 4px + 8px padding = 284px */
  height: 284px;
}

/* Portrait disc — same diameter as the social icons so it aligns with them
   in the expanded pill. Uses --socials-portrait set by common.js. */
.socials-chip-portrait {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background-image: var(--socials-portrait, none);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt); /* fallback while the image loads */
  /* Nudged 1px up for optical alignment with the chip's center */
  margin-top: -1px;
}

.socials-chip-panel a {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  /* Fade in only when the chip is expanded */
  opacity: 0;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              opacity .3s var(--ease) .08s;
}
.socials-chip:hover .socials-chip-panel a,
.socials-chip:focus-within .socials-chip-panel a {
  opacity: 1;
}
.socials-chip-panel a:hover {
  background: var(--fg);
  border-color: var(--fg);
}
.socials-chip-panel svg {
  /* Larger icons inside the same 36px circle — fills the space better */
  width: 22px; height: 22px;
  fill: var(--fg-soft);
  transition: fill .25s var(--ease);
  /* Make sure SVG is treated as a centered block (no inline baseline offset) */
  display: block;
}
/* IMDb uses a wider 64×32 viewBox (rounded rectangle with brand letters);
   size it to roughly half the chip diameter so it stays balanced visually. */
/* IMDb uses a wider 56×24 viewBox (text-only mark — viewBox tight to letters
   so the SVG is perfectly centered in the round chip). */
.socials-chip-panel a[aria-label="IMDb"] svg {
  width: 26px;
  height: auto;
}
.socials-chip-panel a:hover svg { fill: var(--bg); }

/* Vertical copyright — sits in the bottom-right corner of the viewport.
   Uses CSS writing-mode for the rotation so it stays accessible to assistive
   technologies (vs an SVG / transform-rotate hack). */
.copyright-vertical {
  position: fixed;
  bottom: 28px;
  /* Position : 8px from the viewport edge (was 10px, shifted 2px further
     right per request). */
  right: 8px;
  z-index: 50;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.7;
}

/* Right-click copyright toast — slides in from the bottom for a moment */
.copyright-toast {
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translate(-50%, 20px);
  background: var(--overlay);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.copyright-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .featured-grid { grid-template-columns: 1fr; }
  .project-content { grid-template-columns: 1fr; gap: 50px; }
  /* Switch nav strategy: hide horizontal nav, show burger button */
  .nav-horizontal { display: none; }
  .burger { display: grid; }
}
@media (max-width: 768px) {
  .nav-panel { right: 18px; top: 130px; }
  .home-wrap, .work-page, .about-page, .contact-page {
    padding-left: 18px; padding-right: 18px;
    /* More top room because the header-bar is below the logo on mobile */
    padding-top: 170px;
  }

  /* On mobile, the header-bar sits BELOW the logo, not floating top-right */
  .logo {
    position: absolute;
    top: 22px; left: 18px;
    max-width: calc(100% - 36px);
  }
  .logo strong { font-size: 18px; }
  .logo span { font-size: 11px; white-space: normal; }

  .header-bar {
    position: absolute;
    top: 110px; left: 18px; right: 18px;
    /* Centered on mobile per request — the chips group is centered in the
       row instead of being right-aligned. */
    justify-content: center;
    /* Allow chips to wrap if needed */
    flex-wrap: wrap;
    gap: 8px;
  }
  .header-bar .header-actions {
    /* Center the chips group within itself too (in case its own flex would
       left-align). */
    justify-content: center;
    width: 100%;
  }
  .carousel { height: 55vh; min-height: 360px; }
  .slide-content {
    left: 26px; right: 26px; bottom: 40px;
    gap: 14px;
  }
  .slide-cat { font-size: 10px; }
  .slide-logo-big { max-width: 80%; }
  .slide-logo-big img { max-height: 110px; }
  .slide-subline { font-size: 14px; }

  .about-intro { grid-template-columns: 1fr; gap: 30px; }
  .about-portrait { max-width: 260px; }

  .form-row { grid-template-columns: 1fr; }
  .award { grid-template-columns: 50px 1fr; }
  .award-cat { grid-column: 2; margin-top: 4px; }

  .project-content { padding: 60px 18px 60px; }
  .project-gallery-wrap { padding: 170px 18px 0; }
  .project-gallery { height: 55vh; min-height: 360px; }
  .back-link { top: 18px; left: 18px; padding: 8px 14px; font-size: 10px; }
  .project-logo-overlay { max-width: 140px; top: 18px; right: 18px; }
  .project-logo-overlay img { max-height: 60px; }

  /* Vertical copyright — keep it minimal on mobile */
  .copyright-vertical {
    font-size: 8.5px;
    /* Shifted right so it doesn't get clipped by the viewport edge */
    right: 8px;
    bottom: 28px;
    opacity: 0.6;
  }
  /* Socials chip stays in the header — only thing to do is tighten the spacing */
  .socials-chip { width: 40px; height: 40px; }
  .socials-chip-trigger { width: 40px; height: 40px; }
  .socials-chip-panel { height: 40px; }
  /* 7 items (portrait + 6 icons) on mobile — slightly shorter than desktop */
  .socials-chip:focus-within .socials-chip-panel { height: 248px; }
  .socials-chip:hover .socials-chip-panel { height: 248px; }

  body { padding-bottom: 40px; }
  /* Marquee: smaller gap on mobile to match the JS width math (ROW_H 30 /
     MARGIN 38). No fixed height here — the container is sized by the image so
     the logos are never clipped vertically. */
  .studio-logo { margin-right: 38px; }

  /* Dots stay readable on mobile */
  .dot { width: 10px; height: 10px; }
  .dot.active { width: 26px; }
  .counter-bar { width: 10px; height: 10px; }
  .counter-bar.active { width: 28px; }
}