/* North Photography — Phase 1 prototype */

:root {
  --rock: #1A1F24;
  --shadow: #2B3138;
  --stone: #6B7177;
  --sand: #C9B8A7;
  --light: #F4F4F2;
  --hair: rgba(244, 244, 242, 0.18);
  --serif: "Newsreader", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 3vw, 48px);
  --logo-w: min(41vw, 700px);
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

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

html { background: var(--rock); color: var(--light); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  background: var(--rock);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--sand);
  outline-offset: 6px;
}
em { font-style: italic; font-weight: 300; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 12px; left: 50%; transform: translate(-50%, -200%);
  padding: 8px 14px; background: var(--light); color: var(--rock);
  font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; z-index: 100;
  transition: transform .2s;
}
.skip:focus-visible { transform: translate(-50%, 0); outline: none; }

/* UI labels */
.label, .nav, .chapter, .caption, .strip__label, .cover__scroll span, .outro__fields, .outro__foot {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  line-height: 1;
}

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px var(--gutter);
  color: rgba(244, 244, 242, .8);
  pointer-events: none;
}
.nav a { pointer-events: auto; padding: 6px 0; }
.nav__links { display: flex; gap: 2.2em; }
.nav__links a { position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: .32em; bottom: 0;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* Chapter indicator */
.chapter {
  position: fixed; left: var(--gutter); top: 50%; z-index: 40;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  color: rgba(244, 244, 242, .55);
  white-space: nowrap;
  pointer-events: none;
}
.chapter__num { color: rgba(244, 244, 242, .85); }
.chapter__name { display: inline-block; }

/* Stage */
.stage { position: relative; height: 100vh; height: 100svh; background: var(--rock); }
.stage__inner { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* Cover */
.cover { position: absolute; inset: 0; }
.cover__fallback {
  position: absolute; inset: 0;
  background: var(--rock) url("../assets/brand/cover.webp") center / cover no-repeat;
}
.cover__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.cover.is-gl .cover__gl { opacity: 1; }
.cover.is-gl .cover__logo { opacity: 0; }
.cover__logo {
  position: absolute; left: 50%; top: 50%;
  width: var(--logo-w); height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cover__line {
  position: absolute; left: var(--gutter); bottom: 34px; margin: 0;
  font: italic 300 15px/1.4 var(--serif);
  font-optical-sizing: auto;
  color: rgba(244, 244, 242, .82);
  z-index: 3;
}
.cover__scroll {
  position: absolute; right: var(--gutter); bottom: 34px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: rgba(244, 244, 242, .6);
  z-index: 3;
}
.cover__scroll { gap: 10px; }
.cover__scroll span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8.5px; letter-spacing: .28em; }
.cue { position: relative; width: 1px; height: 40px; background: var(--hair); overflow: hidden; }
.cue__fill {
  position: absolute; inset: 0; background: var(--light);
  transform: scaleY(0); transform-origin: top;
}

/* Plates */
.plates { position: absolute; inset: 0; }
.plate {
  position: absolute; inset: 0; margin: 0;
  clip-path: inset(0% 0% 0% 0%);
  visibility: hidden;
  will-change: transform, clip-path;
}
.plate__img { position: absolute; inset: 0; will-change: transform; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--a img { object-position: 50% 45%; }
.plate--a .plate__img { transform-origin: 40% 50%; }
/* plate B's image is fitted to its window box so the full-body crop is composed */
.plate--b .plate__img { inset: 30% 8% 8% 60%; }
.plate--b img { object-position: 50% 30%; }
.plate--c img, .plate--mono img { object-position: 50% 30%; filter: grayscale(1) contrast(1.05); }

/* Split strips: three full-stage containers, each clipped to a third */
.split { position: absolute; inset: 0; visibility: hidden; }
.split__item { position: absolute; inset: 0; will-change: transform; }
.strip { position: absolute; inset: 0; will-change: clip-path; }
.strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strip__mono { object-position: 50% 30%; filter: grayscale(1) contrast(1.05); }
.strip__color { opacity: 0; filter: grayscale(1); }
.split__item[data-i="0"] .strip { clip-path: inset(0% 66.667% 0% 0%); }
.split__item[data-i="1"] .strip { clip-path: inset(0% 33.333% 0% 33.333%); }
.split__item[data-i="2"] .strip { clip-path: inset(0% 0% 0% 66.667%); }
/* colour images are fitted to their final frame (not the stage) so each crop is composed */
.split__item[data-i="0"] .strip__color { left: 4%; top: 18%; width: 26.5%; height: 56%; object-position: 62% 45%; }
.split__item[data-i="1"] .strip__color { left: 37%; top: 18%; width: 26.5%; height: 56%; object-position: 64% 50%; }
.split__item[data-i="2"] .strip__color { left: 69.5%; top: 18%; width: 26.5%; height: 56%; object-position: 50% 25%; }
.strip__label {
  position: absolute; color: rgba(244, 244, 242, .6); opacity: 0;
}
.split__item[data-i="0"] .strip__label { left: 4%; top: 78.5%; }
.split__item[data-i="1"] .strip__label { left: 37%; top: 78.5%; }
.split__item[data-i="2"] .strip__label { left: 70%; top: 78.5%; }

/* Words */
.words { position: absolute; inset: 0; pointer-events: none; }
.headline {
  position: absolute; left: 52%; top: 50%; margin: 0;
  transform: translateY(-50%);
  font: 300 clamp(44px, 6.4vw, 112px)/.95 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  color: var(--light);
}
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line__in { display: block; }
.headline { opacity: 0; } /* JS poses the lines (yPercent 110) then shows the block */
.caption {
  position: absolute; margin: 0; opacity: 0;
  color: rgba(244, 244, 242, .6);
}
.caption--01 { left: 12%; top: 89%; }
.caption--02 { left: 60%; top: 94%; }
.shutter {
  position: absolute; margin: 0; opacity: 0;
  font: italic 300 clamp(28px, 3.6vw, 56px)/1.1 var(--serif);
  font-optical-sizing: auto;
  color: var(--light);
}
.shutter--a { left: var(--gutter); bottom: 34px; }
.shutter--b { right: var(--gutter); top: 96px; }
.world {
  position: absolute; left: 50%; top: 92%; margin: 0; opacity: 0;
  transform: translateX(-50%);
  font: 300 clamp(22px, 2.2vw, 34px)/1.2 var(--serif);
  font-optical-sizing: auto;
  color: rgba(244, 244, 242, .92);
  white-space: nowrap;
}

/* Outro */
/* Closing: one last photograph — the only bright, open frame — beside the contact */
.outro {
  position: relative;
  background: var(--rock);
  padding: 16vh var(--gutter) 0;
}
.outro__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px;
  align-items: end;
}
.outro__photo {
  grid-column: 1 / span 7; margin: 0;
  position: relative; overflow: hidden;
  aspect-ratio: 1320 / 1302; max-height: 84vh; max-width: calc(84vh * 1320 / 1302);
  background: var(--shadow);
  will-change: clip-path;
}
.outro__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.outro__text { grid-column: 9 / span 4; padding-bottom: 1vh; }
.outro__line {
  margin: 0 0 1.1em;
  font: 300 clamp(40px, 4.4vw, 72px)/.98 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  color: var(--light);
}
.outro__line .line { display: block; overflow: hidden; padding-bottom: .06em; }
.outro__line .line__in { display: inline-block; }
.outro__fields { margin: 0 0 7vh; color: rgba(244, 244, 242, .5); line-height: 1.9; }
.outro__contact { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.outro__contact li {
  display: grid; grid-template-columns: 7.5em 1fr; align-items: baseline; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--hair);
}
.outro__contact .label { color: rgba(244, 244, 242, .45); }
.outro__contact a {
  justify-self: start;
  font: 300 19px/1.3 var(--serif);
  color: var(--light);
  background: linear-gradient(var(--sand), var(--sand)) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size .5s cubic-bezier(.2, .7, .2, 1), color .4s;
  user-select: text; overflow-wrap: anywhere;
}
.outro__contact a:hover, .outro__contact a:focus-visible { color: var(--sand); background-size: 100% 1px; }
.outro__foot {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 28px 0 30px;
  margin-top: 16vh;
  border-top: 1px solid var(--hair);
  color: rgba(244, 244, 242, .4);
}
.outro__foot a { color: inherit; transition: color .3s; }
.outro__foot a:hover { color: var(--light); }

/* Reduced motion / static flow */
.static { display: none; padding: 0 0 12vh; }
.static__headline {
  margin: 0; padding: 14vh var(--gutter) 10vh;
  font: 300 clamp(40px, 6vw, 96px)/1 var(--serif);
  font-optical-sizing: auto;
  max-width: 14ch;
}
.static__plate { margin: 0 0 3vh; }
.static__plate img { width: 100%; height: 100vh; object-fit: cover; }
.static__plate--mono img { filter: grayscale(1) contrast(1.05); }
.static__plate figcaption {
  padding: 18px var(--gutter);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(244, 244, 242, .6);
}
.static__line {
  margin: 0; padding: 8vh var(--gutter);
  font: 300 clamp(28px, 3.6vw, 56px)/1.15 var(--serif);
}

html.is-reduced .plates, html.is-reduced .words, html.is-reduced .cover__scroll, html.is-reduced .cover__gl { display: none; }
html.is-reduced .static { display: block; }
html.is-reduced .chapter { display: none; }
html.is-reduced .cover__logo { opacity: 1; }

/* Mobile */
@media (max-width: 767px) {
  :root { --logo-w: 72vw; --gutter: 20px; }
  .cover__fallback { background-image: url("../assets/brand/cover-m.webp"); }
  .nav { padding: 20px var(--gutter); font-size: 9.5px; letter-spacing: .22em; white-space: nowrap; }
  .nav__links { gap: 1.3em; }
  .outro__fields { line-height: 1.9; }
  .chapter { left: 14px; }
  .cover__line { bottom: 28px; font-size: 14px; max-width: 55%; }
  .cover__scroll { bottom: 28px; }
  .cue { height: 32px; }

  .plate--a .plate__img { transform-origin: 32% 50%; }
  .plate--b .plate__img { inset: 48% 8% 8% 45%; }
  .headline {
    left: 8%; right: 8%; top: 62%; transform: none;
    font-size: clamp(44px, 13vw, 64px);
  }
  .caption--01 { left: 8%; top: 92%; }
  .caption--02 { left: 8%; top: 92%; }
  .shutter { font-size: clamp(26px, 8vw, 40px); }
  .shutter--b { top: 64px; }

  .split__item[data-i="0"] .strip { clip-path: inset(0% 0% 66.667% 0%); }
  .split__item[data-i="1"] .strip { clip-path: inset(33.333% 0% 33.333% 0%); }
  .split__item[data-i="2"] .strip { clip-path: inset(66.667% 0% 0% 0%); }
  .split__item[data-i="0"] .strip__color { left: 8%; top: 7%; width: 84%; height: 21%; object-position: 62% 40%; }
  .split__item[data-i="1"] .strip__color { left: 8%; top: 35%; width: 84%; height: 21%; object-position: 60% 50%; }
  .split__item[data-i="2"] .strip__color { left: 8%; top: 63%; width: 84%; height: 21%; object-position: 50% 22%; }
  .split__item[data-i="0"] .strip__label { left: 8%; top: 31%; }
  .split__item[data-i="1"] .strip__label { left: 8%; top: 59%; }
  .split__item[data-i="2"] .strip__label { left: 8%; top: 87%; }
  .world { top: auto; bottom: 22px; font-size: 20px; }

  .outro { padding-top: 12vh; }
  .outro__grid { display: block; }
  .outro__photo { max-height: none; max-width: none; margin-right: 12%; }
  .outro__text { padding: 7vh 0 0; }
  .outro__line { font-size: clamp(38px, 11vw, 52px); }
  .outro__fields { margin-bottom: 5vh; }
  .outro__contact li { grid-template-columns: 6.5em 1fr; }
  .outro__contact a { font-size: 18px; }
  .outro__foot { margin-top: 10vh; flex-wrap: wrap; letter-spacing: .22em; }
  .outro__foot > * { white-space: nowrap; }
}

@media (hover: none) {
  .nav__links a::after { display: none; }
}