/* =========================================================
   LANDING
   One locked screen. It never scrolls. The carousel runs on a
   timer behind the chrome; "View portfolio" leaves for another
   page rather than revealing content below.
   Everything here is sentence case.
   ========================================================= */

body.landing {
  margin: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  height: 100dvh;
}

/* ---------- stage ---------- */

.stage {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

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

.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; margin: 0;
  transform: translateX(100%);
  transition: transform .9s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.slide.is-active { transform: translateX(0); }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- top nav: landing overrides only ---------- */
/* The header is defined once in style.css and is identical on every page.
   Here it only loses its background so the photograph runs behind it.
   Position and padding are untouched, so the links do not move when you
   navigate away from the landing page. */

body.landing .topnav {
  position: absolute;
  background: transparent;
  backdrop-filter: none;
}

/* ---------- name ---------- */

.titleblock {
  position: absolute; z-index: 20;
  left: clamp(24px, 4vw, 60px);
  top: 50%; transform: translateY(-50%);
}
.titleblock h1 {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 8.6vw, 132px);
  line-height: .88;
  letter-spacing: -0.035em;
}

/* ---------- carousel controls ---------- */

.controls {
  position: absolute; z-index: 20; bottom: clamp(26px, 3.4vw, 46px);
  left: clamp(24px, 4vw, 60px); right: clamp(24px, 4vw, 60px);
  display: flex; align-items: center; justify-content: space-between;
}
.controls__left { display: flex; align-items: center; }

.count {
  display: flex; align-items: center; gap: 14px;
  font: 400 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .04em; color: #fff; margin: 0;
}
.count em { font-style: normal; }
.count s { display: block; width: 38px; height: 1px; background: rgba(255,255,255,.6); text-decoration: none; }

.dots { display: flex; gap: 11px; margin-left: clamp(20px, 3vw, 44px); }
.dots button {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.38); border: 0;
  transition: background-color .3s ease;
}
.dots button.is-active { background: #fff; }

.arrows { display: flex; gap: clamp(20px, 3vw, 40px); }
.arrows button {
  background: none; border: 0; padding: 0; cursor: pointer;
  width: 44px; height: 20px; position: relative;
  transition: opacity .25s ease;
}
.arrows button:hover { opacity: .55; }
.arrows button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: #fff;
}
.arrows button::after {
  content: ""; position: absolute; top: calc(50% - 4px);
  width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff;
}
.arrows .prev::after { left: 0; transform: rotate(-135deg); }
.arrows .next::after { right: 0; transform: rotate(45deg); }

/* ---------- mobile ---------- */

@media (max-width: 720px) {
  .topnav { flex-wrap: wrap; gap: 12px; }
  .topnav__links { gap: 16px; }
  .topnav a { font-size: 13px; }
  .dots { display: none; }

  /* Drop the name from the middle of the screen down to just above the
     slide counter. Measured off the controls' own bottom offset plus
     their row height, so it tracks that row instead of being pinned to a
     number that would drift if the controls ever move. Phone only; on
     desktop it stays centred. */
  .titleblock {
    top: auto;
    transform: none;
    bottom: calc(clamp(26px, 3.4vw, 46px) + 48px);
  }

  /* If a slide's subject sits hard to one side, the phone's narrow crop
     is taken from the centre and can lose them off the edge. Give that
     figure a class and set object-position on its img to shift the crop:
     LOWER slides the photo right, HIGHER slides it left. Roughly 9 screen
     pixels per percent on a 390px phone. No slide needs it right now. */
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition-duration: .01ms !important; }
}

/* ---------- next-slide progress ring ---------- */
/* Sits where the location marker used to be. Circumference of r=16 is
   100.53, so the dash offset runs from that to zero across the interval. */
.progress { width: 30px; height: 30px; flex: none; }
.progress svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.progress circle { fill: none; stroke-width: 2; }
.progress__track { stroke: rgba(255,255,255,.35); }
.progress__bar {
  stroke: #fff;
  stroke-dasharray: 100.53;
  stroke-dashoffset: 100.53;
}
.progress__bar.run { animation: ringfill var(--ring-dur, 6000ms) linear forwards; }
@keyframes ringfill { to { stroke-dashoffset: 0; } }

/* Hidden while the mobile menu is up. The header deliberately stays above
   the panel so the name and toggle never move, which would otherwise
   leave this ring visibly ticking through the carousel on top of the
   menu. nav-arriving covers the same moment on a page arrived at from a
   menu tap, before nav.js has run. */
/* Asymmetric on purpose: it leaves at once, but comes back on a delay so
   it does not fade up underneath the name still sliding out of that same
   spot on arrival from another page. */
.progress { transition: opacity .3s ease .32s; }
.nav-open .progress,
.nav-arriving .progress,
.brand-exit .progress {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease 0s;
}

@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
}