/* ==========================================================================
   Pictographie — Clémence Pic
   Minimal editorial photography portfolio
   ========================================================================== */

:root {
  --bg: #f7f5f1;
  --ink: #16140f;
  --ink-soft: #4a463d;
  --line: rgba(22, 20, 15, 0.12);
  --accent: #b08a4e;
  --header-h: 88px;
  --gap: 1.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------- Custom cursor ---------- */

/* Only enable custom cursor on precise pointers (mouse/trackpad).
   Touch devices keep the default behaviour. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }

  a,
  button,
  input,
  textarea,
  select,
  label,
  .grid-cell,
  body .grid-cell,
  [role="button"] {
    cursor: none;
  }

  /* Dot at the exact pointer position */
  .custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cursor-color, #2c4ebd) !important;
    opacity: 1 !important;
    mix-blend-mode: normal;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.25s var(--ease), height 0.25s var(--ease);
  }

  .custom-cursor-dot.is-hovering {
    width: 20px;
    height: 20px;
    background: #2c4ebd !important;
    opacity: 1 !important;
  }
}

/* Hide the custom cursor when native is shown (reduced motion fallback) */
@media (prefers-reduced-motion: reduce) {
  .custom-cursor-dot {
    display: none;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  max-width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  z-index: 100;
  color: #fff;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), height 0.4s var(--ease);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent);
  z-index: -1;
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}

.site-header.is-scrolled {
  height: 72px;
  background: rgba(247, 245, 241, 0.92);
  color: var(--ink);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.site-header.is-scrolled::before {
  opacity: 0;
}

.brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  font-style: italic;
  white-space: nowrap;
}

.brand .brand-sub {
  display: block;
  font-family: "Jost", sans-serif;
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  opacity: 0.75;
  margin-top: 0.15rem;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}

.main-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.35s var(--ease);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  right: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 1px;
  background: currentColor;
}

/* ---------- Nav dropdown (Photos) ---------- */

.nav-item.has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0.7rem 0;
  min-width: 210px;
  background: rgba(247, 245, 241, 0.97);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(20, 17, 11, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 110;
  backdrop-filter: blur(8px);
}

/* Invisible bridge filling the vertical gap between the "Photos" link and the
   dropdown. Because a margin alone does not capture pointer events, the mouse
   would otherwise cross a dead zone on its way to the menu and collapse it.
   This pseudo-element only spans the gap band (it does NOT extend down over the
   items), so the menu stays open while the pointer travels into it without
   intercepting clicks on the reportage links. */
.nav-item.has-dropdown .dropdown::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: 0;
  width: 100%;
  height: 1.2rem;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown li a {
  position: static;
  display: block;
  padding: 0.55rem 1.4rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.dropdown li a::after {
  content: none;
}

.dropdown li a:hover,
.dropdown li a:focus-visible {
  color: var(--accent);
  background: rgba(176, 138, 78, 0.08);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0e0d0b;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
  will-change: opacity, transform;
}

.hero-img.is-active {
  opacity: 1;
  animation: hero-zoom 9s linear forwards;
}

/* The first hero slide (2025_silverejarrosson_8375.jpg) is cropped at the top;
   lower its viewing window so the bottom of the image shows and the top is hidden. */
.hero-img:first-of-type {
  object-position: center 5%;
}

/* The fifth hero slide (2025_thaliadalecky_8207.jpg) is cropped at the top;
   lower its viewing window so the bottom of the image shows and the top is hidden. */
.hero-img:nth-of-type(5) {
  object-position: center 50%;
}

@keyframes hero-zoom {
  to {
    transform: scale(1);
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 7, 5, 0.78) 0%, rgba(8, 7, 5, 0.15) 45%, rgba(8, 7, 5, 0.1) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fdfbf7;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(3rem, 8vh, 5.5rem);
  width: 100%;
}

.hero-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  letter-spacing: 0.02em;
  opacity: 0;
  animation: rise 1.1s var(--ease) 0.3s forwards;
}

.hero-tagline {
  margin-top: 0.9rem;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  animation: rise 1.1s var(--ease) 0.55s forwards;
}

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

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 2;
  color: #fdfbf7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
}

.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: currentColor;
  overflow: hidden;
  position: relative;
}

.scroll-cue .line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  animation: cue-drop 1.8s ease-in-out infinite;
}

@keyframes cue-drop {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* ---------- Intro ---------- */

.intro {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(4.5rem, 10vh, 7rem) 1.5rem clamp(3rem, 8vh, 5rem);
  text-align: center;
}

.intro p {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  color: var(--ink-soft);
}

.intro .signature {
  display: block;
  margin-top: 1.75rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
}

/* ---------- Gallery / photo grid ---------- */

.gallery {
  padding-bottom: 2rem;
}

.gallery-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  padding: clamp(1.5rem, 5vh, 3rem) 1.25rem 0.5rem;
  color: var(--ink);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

.grid-cell {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e9e6de;
  border-radius: 2px;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}

.grid-cell img.is-loaded {
  opacity: 1;
}

.grid-cell:hover img,
.grid-cell:focus-visible img {
  transform: scale(1.045);
}

.grid-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 7, 0);
  transition: background 0.5s var(--ease);
}

.grid-cell:hover::after,
.grid-cell:focus-visible::after {
  background: rgba(10, 9, 7, 0.12);
}

/* ---------- Subfolder gallery pages ---------- */

.page-main {
  padding-top: var(--header-h);
  min-height: 100vh;
}

.page-gallery {
  padding: clamp(2rem, 6vh, 4rem) 0;
}

.back-link {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  margin: 0 clamp(1.25rem, 4vw, 3.5rem) 1rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.back-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------- Photos index page ---------- */

.photos-page .photos-intro {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 auto 2.5rem;
}

.photos-list {
  list-style: none;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}

.photos-item {
  border-bottom: 1px solid var(--line);
}

.photos-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0.25rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}

.photos-link::after {
  content: "→";
  font-family: "Jost", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.photos-link:hover {
  color: var(--accent);
  padding-left: 0.75rem;
}

.photos-link:hover::after {
  color: var(--accent);
  transform: translateX(4px);
}

/* ---------- Contact page ---------- */

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

.contact-page .contact {
  width: 100%;
  border-top: none;
  margin-top: 0;
}


/* ---------- Contact ---------- */

.contact {
  padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 4vw, 3.5rem);
  text-align: center;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}

.contact h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
}

.contact p {
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto 1.75rem;
}

.contact-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.contact-links a {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 2rem clamp(1.25rem, 4vw, 3.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    width: min(78vw, 320px);
    background: var(--bg);
    color: var(--ink);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem clamp(1.5rem, 6vw, 2.5rem);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .main-nav a {
    font-size: 0.9rem;
  }

  /* In the off-canvas mobile menu the Photos dropdown expands inline
     instead of floating, so it stays usable on touch devices. */
  .nav-item.has-dropdown {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav-item.has-dropdown .dropdown {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    margin: 0.25rem 0 0;
    padding: 0 1rem 0 1.4rem;
    background: transparent;
    border: none;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: none;
  }

  .nav-item.has-dropdown .dropdown li a {
    font-size: 0.82rem;
    padding: 0.4rem 0.25rem;
    white-space: normal;
    color: var(--ink-soft);
  }

  .nav-item.has-dropdown .dropdown li a:hover,
  .nav-item.has-dropdown .dropdown li a:focus-visible {
    color: var(--accent);
    background: transparent;
  }

  /* In the inline mobile menu the dropdown has no gap to bridge, and the
     absolutely-positioned hover bridge is neither needed nor wanted. */
  .nav-item.has-dropdown .dropdown::before {
    content: none;
  }

  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    padding: 1.25rem;
  }

  .page-main {
    padding-top: calc(var(--header-h) * 0.85);
  }
}

@media (max-width: 480px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-img,
  .hero-title,
  .hero-tagline,
  .grid-cell img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Under reduced motion, reveal only the active hero slide */
  .hero-img {
    opacity: 0 !important;
  }
  .hero-img.is-active {
    opacity: 1 !important;
  }

  .grid-cell img {
    opacity: 1 !important;
  }
}