/* ---------------------------------------------------------------
   René Arseneau — Director of Photography
   --------------------------------------------------------------- */

:root {
  --bg: #0B0B0B;
  --ink: #EFA83C;
  --ink-dim: #8a6526;
  --text: #E8E6E1;
  --text-dim: #6E6B66;
  --line: rgba(239, 168, 60, 0.22);
  --gap: 12px;
  --pad: 28px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* responsive images arrive wrapped in <picture>; let the img lay out as if the wrapper weren't there */
picture { display: contents; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--bg); }

.mono { font-family: var(--mono); }

.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;
}

/* --- grain ------------------------------------------------------ */

.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 100; opacity: 0.035; mix-blend-mode: overlay;
}

/* --- header ----------------------------------------------------- */

#siteHeader {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  background: linear-gradient(180deg, var(--bg) 55%, rgba(11, 11, 11, 0));
}

.nav-item {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity 0.18s ease;
  white-space: nowrap;
}

.nav-item:hover { opacity: 0.6; }

.nav-item::before { content: "["; opacity: 0; margin-right: 2px; }
.nav-item::after  { content: "]"; opacity: 0; margin-left: 2px; }

.nav-item.active::before,
.nav-item.active::after { opacity: 1; }

/* every page: name on the left, links on the right */
.nav-links { display: flex; gap: clamp(10px, 3vw, 30px); margin-left: auto; }

.header-name {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(13px, 4.2vw, 21px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity 0.18s ease;
}

.header-name:hover { opacity: 0.62; }

/* home hides the header name — the big wordmark carries it */
body[data-view="home"] .header-name { display: none; }

/* --- views ------------------------------------------------------ */

.view { display: none; padding: 0 var(--pad) 120px; }
.view.active { display: block; animation: fade 0.4s ease both; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --- wordmark --------------------------------------------------- */

.wordmark {
  /* flex, not block: the grain padding uses negative margins, which would otherwise collapse */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 140px 0 34px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(34px, 11.4vw, 188px);
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-align: center;
  text-transform: uppercase;
}

/* film grain clipped to the letters, so the black around the name stays clean */
.wordmark-first,
.wordmark-last,
.header-name {
  color: transparent;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.1 1.1 1.1 0 -1.15 1.1 1.1 1.1 0 -1.15 1.1 1.1 1.1 0 -1.15 0 0 0 0 0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(var(--ink), var(--ink));
  background-size: 240px 240px, 100% 100%;
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text;
  background-clip: text;
}

.wordmark-first,
.wordmark-last {
  /* the É accent sits above the tight line box, where a text-clipped background can't paint */
  padding: 0.32em 0;
  margin: -0.32em 0;
}

.wordmark-sub {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 4px 0 42px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(16px, 1.6vw, 24px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark-sub::before,
.wordmark-sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: 0.55;
}

/* offsets the letter-spacing trailing the last letter, so the word sits dead centre */
.wordmark-sub::before { margin-right: 0.3em; }

/* --- brands ticker ------------------------------------------------ */

/* every client drifting past at the foot of the home page; hover to pause */
.brands-section { margin-top: 110px; }

.brands {
  overflow: hidden;
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.brands-track {
  display: flex;
  width: max-content;
  animation: brands 90s linear infinite;
}

.brands:hover .brands-track { animation-play-state: paused; }

.brands-list {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* every item carries its own trailing gap, the last one too, so the seam between copies looks like any other gap */
.brands-list li {
  display: flex;
  align-items: center;
  margin-right: clamp(40px, 5vw, 84px);
}

/* every logo comes out in one colour: the file is only used as a stencil, whatever colours it was drawn in */
.brand-logo {
  display: block;
  background-color: var(--text);
  -webkit-mask: var(--logo) center / 100% 100% no-repeat;
          mask: var(--logo) center / 100% 100% no-repeat;
  transition: background-color 0.2s ease;
}

.brand-logo img { display: block; width: auto; height: clamp(28px, 3.1vw, 46px); opacity: 0; }

.brands-list li:hover .brand-logo { background-color: var(--ink); }

/* a client without a logo yet shows its name */
.brand-name {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes brands { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* no drifting: the logos sit still, wrapped and centred */
  .brands { -webkit-mask-image: none; mask-image: none; }
  .brands-track { width: auto; animation: none; justify-content: center; }
  .brands-list { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .brands-list[aria-hidden] { display: none; }
}

/* --- grid ------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px var(--gap);
}

/* inner work view runs three across, like the reference */
#view-work .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  #view-work .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tile { display: block; position: relative; }

.tile-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #141414;
}

/* film-gate border laid over every thumbnail — stills and hover previews alike */
.tile-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url("/assets/film-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

.tile-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.35s ease;
}

.tile:hover .tile-frame img { transform: scale(1.035); filter: brightness(1.08); }

/* placeholder for projects with no still yet */
.tile-frame.is-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(239,168,60,0.05) 0 2px, transparent 2px 9px),
    #101010;
}

.tile-frame.is-empty span {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* hover preview — sits over the still, under the play glyph, and fades in only once it's playing,
   so the still crossfades straight into motion. Centred so any overscale crops evenly on both sides. */
.tile-preview {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  border: 0; object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.35s ease;
}

.tile-preview.is-on { opacity: 1; }

/* widescreen films set to letterbox: the whole picture, with black bars */
.tile-preview.is-letterbox { object-fit: contain; background: #000; }

/* zoom and brighten along with the still, so nothing shifts during the crossfade */
.tile:hover .tile-preview { transform: translate(-50%, -50%) scale(1.035); filter: brightness(1.08); }

.tile-play {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease;
  z-index: 2; pointer-events: none;
}

.tile:hover .tile-play { opacity: 1; }
.tile.previewing .tile-play { opacity: 0; }

.tile-play svg {
  width: 46px; height: 46px; fill: var(--bg);
  background: var(--ink); border-radius: 50%; padding: 13px 11px 13px 15px;
}

.tile-cap {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  transition: opacity 0.18s ease;
}

.tile:hover .tile-cap { opacity: 0.62; }

.tile-cap em { font-style: normal; color: var(--text); }

/* --- work sections ---------------------------------------------- */

.section-label {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  padding-top: 8px;
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink);
}

.section-label::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.work-section { padding-top: 58px; }
.work-section:first-of-type { padding-top: 130px; }

/* --- about ------------------------------------------------------ */

.about-photo {
  position: relative;
  margin-top: 64px;
  aspect-ratio: 2.47 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #141414;
}

.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

.about-photo.is-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(239,168,60,0.05) 0 2px, transparent 2px 9px),
    #101010;
}

.about-photo.is-empty span {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
}

.about-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px var(--gap);
  margin-top: 36px;
}

.about-col { max-width: 540px; }

.about-label {
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.about-col p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(239, 168, 60, 0.78);
}

.client-list .brand { color: var(--ink); text-transform: uppercase; }

.about-contacts {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0 56px;
  margin: 96px 0 0;
}

.about-contacts dt {
  margin-bottom: 8px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
}

.about-contacts dd {
  margin: 0 0 6px;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink);
}

/* hover shows the same [ ] as the current page in the nav, hung outside the word so nothing shifts */
.about-contacts a { position: relative; }

.about-contacts a::before,
.about-contacts a::after {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.about-contacts a::before { content: "["; right: 100%; margin-right: 2px; }
.about-contacts a::after  { content: "]"; left: 100%; margin-left: 2px; }

.about-contacts a:hover::before,
.about-contacts a:hover::after,
.about-contacts a:focus-visible::before,
.about-contacts a:focus-visible::after { opacity: 1; }

@media (max-width: 900px) {
  .about-photo { aspect-ratio: 3 / 2; }
  .about-cols { grid-template-columns: 1fr; }
  .about-col { max-width: none; }
  .about-contacts { margin-top: 48px; }
}

.about-quote {
  margin: 0 0 42px;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 110%;
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
}

.about-quote span { color: var(--ink); }

/* --- enquiry form ------------------------------------------------- */

/* a small, plain box, so it's obvious where to write */
.contact { max-width: 540px; margin: 120px auto 0; }

.enquiry {
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid rgba(232, 230, 225, 0.25);
  border-radius: 4px;
  background: #111;
}

.enquiry .about-label { margin: 0 0 4px; }

.enquiry-field { display: grid; gap: 8px; }

.enquiry-field label {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.enquiry-field input,
.enquiry-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(232, 230, 225, 0.35);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.enquiry-field textarea { min-height: 120px; resize: vertical; }

.enquiry-field input:focus,
.enquiry-field textarea:focus { outline: none; border-color: var(--ink); }

.enquiry .btn { justify-self: stretch; margin-top: 4px; text-align: center; }

.btn {
  justify-self: start;
  margin-top: 6px;
  padding: 14px 26px;
  background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: opacity 0.18s ease;
}

.btn:hover { opacity: 0.82; }

/* --- project page ------------------------------------------------ */

.project { padding-top: 86px; }

.project-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.project-player video,
.project-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}

.project-noplayer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim);
}

.project-title {
  margin: 26px 0 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.project-title em { font-style: normal; color: var(--text); }

.project-synopsis {
  max-width: 62ch;
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-dim);
}

.project .section-label { margin-top: 46px; }
.project .other-label { margin-top: 78px; }

/* credits — role dim, names in accent, exactly one line each */
.credits { margin: 0; }

.credit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  padding: 3px 0;
}

.credits dt {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.credits dd {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* series: every episode listed under the player — the one playing gets brackets, like the current page in the nav */
.episodes { margin: 0; padding: 0; list-style: none; }

.episode {
  display: inline-flex;
  gap: 12px;
  padding: 3px 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity 0.18s ease;
}

.episode:hover { opacity: 0.62; }

.episode-num { flex: none; color: var(--text); }

.episode-title::before { content: "["; opacity: 0; margin-right: 2px; }
.episode-title::after  { content: "]"; opacity: 0; margin-left: 2px; }

.episode.is-current .episode-title::before,
.episode.is-current .episode-title::after { opacity: 1; }

.other-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .other-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* --- message pages (404, thank you) ------------------------------ */

.message-page { max-width: 760px; margin: 0 auto; padding-top: 170px; }

.message-label {
  margin: 0 0 18px;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink);
}

.message-body {
  margin: 0 0 34px;
  font-size: 14px; line-height: 1.85; color: var(--text-dim);
}

.message-page .btn { display: inline-block; }

/* --- photography ------------------------------------------------ */

.album { padding-top: 58px; }
.album:first-of-type { padding-top: 110px; }

.album-note {
  margin: -12px 0 20px;
  font-size: 12px; color: var(--text-dim);
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.album-photo { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.album-photo .tile-frame { display: block; }
.album-photo:hover .tile-frame img { transform: scale(1.035); filter: brightness(1.08); }

.album-empty {
  margin: 0;
  padding: 46px 0;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
}

@media (max-width: 1100px) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- footer ----------------------------------------------------- */

footer {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 26px var(--pad) 34px;
  border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
}

/* --- lightbox --------------------------------------------------- */

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

.lightbox.open { display: flex; }

.lightbox-inner { position: relative; width: 100%; max-width: 1180px; }

.lightbox-close {
  position: absolute; top: -40px; right: 0;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}

.lightbox-image { width: 100%; max-height: 86vh; object-fit: contain; margin: 0 auto; }
.lightbox-image:not([src]), .lightbox-image[src=""] { display: none; }

/* --- responsive -------------------------------------------------- */

@media (max-width: 640px) {
  :root { --pad: 16px; }
  .grid { grid-template-columns: 1fr; gap: 26px 0; }
  #view-work .grid { grid-template-columns: 1fr; }
  .wordmark { padding-top: 120px; }
  .nav-item { font-size: 11px; letter-spacing: 0.05em; }
  footer { flex-direction: column; gap: 6px; }
}

/* on the narrowest phones the invisible brackets on inactive links cost too much width,
   so the brackets hang outside each link instead of taking up room */
@media (max-width: 400px) {
  .nav-links { gap: 14px; }
  .nav-item { position: relative; }
  .nav-item::before { position: absolute; right: 100%; }
  .nav-item::after { position: absolute; left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}