/* ============ Sandra Milanovic — Photography ============
   Dark, minimal theme matching the About page design language:
   Cormorant Garamond (serif display) + Montserrat (UI), near-black
   background, warm accent. */

:root {
  --bg: #0a0a0a;
  --ink: #f5f4f0;
  --muted: #9a9a9a;
  --light: #d0cfc9;
  --line: #1e1e1e;
  --accent: #c8b89a;
  --surface: #131313;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, 'Segoe UI', sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

.site-header {
  position: relative;
  padding: 38px 24px 0;
  text-align: center;
  z-index: 40;
}

.logo {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .32em;
  margin-right: -.32em; /* optically re-center the letterspacing */
}

.logo small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: .42em;
  letter-spacing: .6em;
  margin-right: -.6em;
  color: var(--accent);
  margin-top: .55em;
  font-weight: 300;
}

.main-nav { margin-top: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }

.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.6rem;
  margin: 0;
  padding: 0;
}

.main-nav a,
.main-nav .drop-trigger {
  font-family: inherit;
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s, color .2s;
}

.main-nav a:hover,
.main-nav .drop-trigger:hover { opacity: 1; color: var(--accent); }

.has-dropdown { position: relative; }
.drop-trigger::after { content: " ▾"; font-size: .8em; }

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  min-width: 230px;
  padding: 16px 30px;
  background: #101010;
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  text-align: center;
  z-index: 60;
}

.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown { display: block; }

.dropdown a {
  display: block;
  padding: 8px 0;
  font-size: .64rem;
  letter-spacing: .24em;
  white-space: nowrap;
}

/* Hamburger icon; the "Menu" text stays in the markup as the screen-reader label */
.nav-toggle {
  display: none;
  position: absolute;
  top: 44px;
  right: 24px;
  width: 26px;
  height: 17px;
  padding: 0;
  font-size: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 0    / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50%  / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  border: none;
  color: var(--ink);
  cursor: pointer;
}

.site-header--overlay .nav-toggle { color: #fff; }

/* Overlay header (homepage, sits on the hero) */

.site-header--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  color: #fff;
}

.site-header--overlay .logo small { color: var(--accent); }
.site-header--overlay .main-nav { border-bottom: none; }
.site-header--overlay .main-nav a,
.site-header--overlay .main-nav .drop-trigger { color: #fff; }
.site-header--overlay .dropdown {
  background: rgba(10,10,10,.92);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}

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

.hero {
  position: relative;
  height: 100vh;
  min-height: 540px;
  background: #000;
  overflow: hidden;
}

.hero-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease;
}

.hero-slides img.active { opacity: 1; }

.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.15) 30%, rgba(0,0,0,.35));
  pointer-events: none;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}

.hero-tagline {
  color: #fff;
  font-size: clamp(.85rem, 2.2vw, 1.2rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .55em;
  margin-right: -.55em;
  line-height: 2.4;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  opacity: .8;
  animation: drift 2.4s ease-in-out infinite;
  z-index: 5;
}

@keyframes drift {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* ---------- Homepage gallery tiles ---------- */

.tiles-section { max-width: 1240px; margin: 0 auto; padding: 90px 24px 40px; }

.section-title {
  text-align: center;
  font-size: .78rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .45em;
  margin: 0 0 46px;
  color: var(--accent);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease, opacity .8s ease;
}

.tile:hover img { transform: scale(1.045); }

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  transition: background .4s;
}

.tile:hover::after { background: rgba(0,0,0,.12); }

.tile span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .78rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .4em;
  margin-right: -.4em;
  text-align: center;
  padding: 0 14px;
  z-index: 2;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

/* ---------- Gallery pages ---------- */

.page { max-width: 1240px; margin: 0 auto; padding: 60px 24px 40px; }

.page-title {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .3em;
  margin: 0 0 54px;
}

.lead-figure { margin: 0 0 16px; cursor: zoom-in; }

.lead-figure img {
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
  background: var(--surface);
}

.series-title {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: .18em;
  color: var(--accent);
  margin: 64px 0 28px;
}

/* Curated rows: every photo shares ONE standard width (a third of the
   container), so all portraits render at the same size and all landscapes
   render at the same size. Natural heights, tops aligned; partial rows
   are centered. */
.crow {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.crow a {
  display: block;
  flex: 0 0 auto;
  width: calc((100% - 32px) / 3);
  cursor: zoom-in;
  background: var(--surface);
}

.crow img {
  width: 100%;
  height: auto;
  transition: opacity .35s;
}

.crow a:hover img { opacity: .8; }

.next-gallery {
  display: block;
  text-align: center;
  margin: 90px 0 30px;
  font-size: .72rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--muted);
  transition: color .25s;
}

.next-gallery:hover { color: var(--accent); }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5,5,5,.97);
  z-index: 100;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
}

.lb-btn {
  position: fixed;
  z-index: 101;
  background: none;
  border: none;
  color: #999;
  font-family: inherit;
  font-size: 1.9rem;
  line-height: 1;
  padding: 18px;
  cursor: pointer;
  transition: color .2s;
}

.lb-btn:hover { color: #fff; }
.lb-close { top: 10px; right: 12px; font-size: 1.3rem; }
.lb-prev  { left: 8px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 8px; top: 50%; transform: translateY(-50%); }

.lb-count {
  position: fixed;
  left: 0; right: 0; bottom: 14px;
  text-align: center;
  color: #9a9a9a;
  font-size: .68rem;
  letter-spacing: .3em;
}

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

.contact-block {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 30px 0 50px;
}

.contact-block p { color: #b3b1ab; }

.contact-links { margin-top: 38px; }

.contact-links a {
  display: inline-block;
  margin: 0 18px 14px;
  font-size: .72rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .28em;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: color .2s;
}

.contact-links a:hover { color: var(--accent); }

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

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 40px 24px 44px;
  text-align: center;
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #8f8d88;
}

.site-footer nav { margin-bottom: 18px; }
.site-footer nav a { margin: 0 16px; color: var(--muted); transition: color .2s; }
.site-footer nav a:hover { color: var(--ink); }
.site-footer p { margin: 0; }

/* ---------- Mobile ---------- */

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

  /* keep the wordmark clear of the MENU button */
  .site-header { padding-left: 72px; padding-right: 72px; }
  .logo { font-size: .95rem; letter-spacing: .2em; margin-right: -.2em; }
  .logo small { letter-spacing: .42em; margin-right: -.42em; }

  .main-nav ul { display: none; flex-direction: column; gap: 1.5rem; padding: 30px 0 8px; }
  .main-nav.open ul { display: flex; }

  .dropdown {
    position: static;
    transform: none;
    display: none;
    border: none;
    box-shadow: none;
    background: none;
    padding: 12px 0 0;
    min-width: 0;
  }

  .site-header--overlay .main-nav.open {
    background: rgba(8,8,8,.94);
    margin: 24px -72px 0;
    padding: 0 24px 22px;
  }

  .has-dropdown.open .dropdown { display: block; }

  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile span { font-size: .66rem; }

  .crow { gap: 10px; margin-bottom: 10px; }
  .crow a { width: calc((100% - 10px) / 2); }
}

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