/* Portfolio — heavy geometric type in vermilion over one fullscreen loop at a time. */
:root {
  --y: #E73913; --y-rgb: 231,57,19;        /* accent, overridden from Site settings */
  --fg: #F4F4F4; --fg-rgb: 244,244,244;    /* second colour: names, subtitles, body text */
  --bg: #0c0c0b;
  --font: 'Jost', 'Futura PT', Futura, 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --tw: 200px;                             /* thumbnail width (set by JS) */
  --pad: clamp(18px, 3vw, 44px);
  --reel-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--y); font-family: var(--font);
  overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  letter-spacing: inherit; text-transform: inherit; text-align: inherit; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- stage */
#stage { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none;
  touch-action: none; cursor: grab; }
#stage.drag { cursor: grabbing; }

#bg, .layer { position: absolute; inset: 0; }
#bg { z-index: 0; }  /* own stacking context: layer z-indexes stay below the shade */
.layer { opacity: 0; transition: opacity 900ms ease; overflow: hidden; background: #000; }
.layer.on { opacity: 1; }
.plate { position: absolute; inset: 0; background: #000 center / cover no-repeat; transition: opacity 1400ms ease; }
.plate.b { opacity: 0; }
.plate.b.show { opacity: 1; }
.layer.kb .plate { animation: kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.5%, -1%, 0); } }
.layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 700ms ease; pointer-events: none; }
.layer video.ready { opacity: 1; }
#shade { position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0,0,0,.14), rgba(0,0,0,.32)),
    linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.14) 60%, rgba(0,0,0,.4) 100%); }
#shade::after { content: ''; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- header */
#top { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; justify-content: space-between;
  align-items: flex-start; padding: calc(22px + env(safe-area-inset-top, 0px)) var(--pad) 0;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
#top nav { display: flex; gap: 1.6em; }
#top a { padding: 6px 0; color: var(--y); transition: color 200ms; }
#top a:hover, #top a.on { color: var(--fg); }
#top .sections a.on::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--y); margin: 0 .55em .14em 0; vertical-align: middle; }

/* ---------------------------------------------------------------- wordmark */
#mark { position: absolute; z-index: 5; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center;
  pointer-events: none; width: max-content; max-width: 94vw; transition: opacity 700ms ease; }
#mark.gone { opacity: 0; transition-duration: 1600ms; }  /* slow fade out, quicker fade back in */
#markName { margin: 0; font-weight: 700; font-size: clamp(44px, 9.2vw, 156px); letter-spacing: -.025em; line-height: .88;
  color: var(--y); text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 40px rgba(0,0,0,.28); }
#markRole { margin: 20px 0 0; font-size: clamp(12px, 1.1vw, 16px); font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; color: var(--fg); }
#hint { margin: 12px 0 0; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(var(--fg-rgb), .55); }

/* ---------------------------------------------------------------- thumbnail reel */
#reel { position: absolute; z-index: 6; left: 0; right: 0; bottom: var(--reel-bottom); height: calc(var(--tw) * 9 / 16 + 40px);
  outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
#strip { position: absolute; inset: 0; }
.item { position: absolute; left: 0; top: 0; width: var(--tw); will-change: transform; }
.item .th { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #161615; overflow: hidden; }
.item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-user-drag: none; filter: grayscale(1) brightness(.78); opacity: .62; transition: filter 900ms ease, opacity 900ms ease; }
.item .th::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--y); opacity: 0; transition: opacity 600ms ease; }
.item .nm { display: block; margin-top: 11px; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.15;
  text-transform: uppercase; color: rgba(var(--fg-rgb), .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 600ms ease; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.item.on img { filter: none; opacity: 1; }
.item.on .th::after { opacity: 1; }
.item.on .nm { color: var(--y); }
@media (hover: hover) {
  .item:hover img { filter: none; opacity: 1; }
  .item:hover .nm { color: var(--fg); }
}
#reel:focus-visible .item.on .th { outline: 1px solid var(--fg); outline-offset: 4px; }

#counter { position: absolute; z-index: 7; right: var(--pad); bottom: calc(var(--reel-bottom) + var(--tw) * 9 / 16 + 56px);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--y); font-variant-numeric: tabular-nums; }

/* compact (phones, short windows) */
.compact #mark { top: 36%; }
.compact #markName { font-size: clamp(34px, 12vw, 72px); }
.compact #markRole { font-size: 11px; white-space: normal; max-width: 86vw; margin-left: auto; margin-right: auto; line-height: 1.5; }
.compact #hint { display: none; }
.compact #top { font-size: 11.5px; }
.compact #top nav { gap: 1.1em; }
.compact .item .nm { font-size: 11px; margin-top: 8px; }
.short #mark { top: 34%; }
.short #markRole { margin-top: 12px; }

/* ---------------------------------------------------------------- overlays */
.overlay { position: fixed; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(8,8,7,.74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 380ms ease; color: var(--fg); }
.overlay.open { opacity: 1; }
.ov-inner { position: relative; max-width: 1280px; margin: 0 auto; min-height: 100%;
  padding: calc(28px + env(safe-area-inset-top, 0px)) clamp(16px, 5vw, 72px) 90px; }
.ov-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.ov-kick { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--y); text-transform: uppercase; }
.ov-title { margin: 0; font-size: clamp(38px, 6vw, 96px); font-weight: 700; letter-spacing: -.025em; line-height: .9;
  color: var(--y); text-transform: uppercase; }
.ov-sub { margin: 12px 0 0; font-size: clamp(15px, 1.5vw, 21px); font-weight: 500; letter-spacing: 0; line-height: 1.25;
  color: var(--fg); text-transform: uppercase; }
.ov-close { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 8px 0 8px 12px; color: var(--y);
  text-transform: uppercase; }
.ov-close:hover { color: var(--fg); }

.film { display: flex; flex-direction: column; align-items: center; }
.film-box { position: relative; width: min(100%, calc(72vh * var(--ar, 1.7778))); aspect-ratio: var(--ar, 16 / 9);
  background: #000; overflow: hidden; }
.film-box video, .film-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.film-box video { accent-color: var(--y); }
.facade { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #000 center / cover no-repeat; }
.facade::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.2); transition: background 250ms; }
.facade:hover::before { background: rgba(0,0,0,.05); }
.facade .play { position: relative; font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase;
  padding: 14px 24px; background: var(--y); color: var(--fg); transition: background 200ms, color 200ms; }
.facade:hover .play, .facade:focus-visible .play { background: var(--fg); color: var(--y); }
.film-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; margin-top: 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; }
.film-tabs button { padding: 6px 0; color: rgba(var(--fg-rgb), .5); border-bottom: 2px solid transparent; }
.film-tabs button:hover { color: var(--fg); }
.film-tabs button.on { color: var(--y); border-bottom-color: var(--y); }
.film-tabs .i { margin-right: .6em; opacity: .7; }

.ov-body { max-width: 760px; margin: 40px 0 0; font-size: clamp(16px, 1.35vw, 19px); font-weight: 500; letter-spacing: -.005em;
  line-height: 1.45; white-space: pre-line; color: var(--fg); }
/* rows never grow taller than ~88% of the screen: max width = 88vh x (sum of aspect ratios) */
.collage { display: flex; flex-direction: column; gap: 14px; margin-top: 48px; }
.c-row { display: flex; gap: 14px; width: 100%; margin: 0 auto; max-width: calc(88vh * var(--sum, 1.5) + var(--gaps, 0px)); }
.c-row.solo { justify-content: center; }
.collage figure { margin: 0; flex: calc(var(--ar) * 100) 1 0; min-width: 0; }  /* x100: grow factors under 1 wouldn't fill the row */
.collage button { display: block; width: 100%; cursor: zoom-in; }
.collage img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; background: #151514; }
.collage figcaption { margin-top: 9px; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: rgba(var(--fg-rgb), .65); }
.ov-empty { margin: 60px 0; text-align: center; font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--y); }

.ov-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 20px;
  border-top: 2px solid var(--y); font-size: clamp(18px, 2vw, 28px); font-weight: 700; letter-spacing: -.01em;
  line-height: 1; text-transform: uppercase; color: var(--y); }
.ov-nav button { text-align: left; max-width: 46%; }
.ov-nav button:last-child { text-align: right; }
.ov-nav button:hover { color: var(--fg); }
.ov-nav small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(var(--fg-rgb), .55); margin-bottom: 8px; }
.side { position: fixed; z-index: 21; top: 50%; width: 40px; height: 72px; margin-top: -36px; font-size: 30px; font-weight: 500;
  color: var(--y); display: flex; align-items: center; justify-content: center; }
.side:hover { color: var(--fg); }
.side.prev { left: max(6px, env(safe-area-inset-left, 0px)); }
.side.next { right: max(6px, env(safe-area-inset-right, 0px)); }

/* info / contact */
.pg-inner { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(80px + env(safe-area-inset-top, 0px)) 24px 80px; position: relative; }
.pg-inner > * { max-width: 860px; }
.pg-close { position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); right: var(--pad); font-size: 13px; font-weight: 600;
  letter-spacing: .02em; padding: 8px 0; text-transform: uppercase; color: var(--y); }
.pg-close:hover { color: var(--fg); }
.pg-title { margin: 0 0 34px; font-size: clamp(40px, 7vw, 110px); font-weight: 700; letter-spacing: -.025em; line-height: .9;
  text-transform: uppercase; color: var(--y); max-width: none !important; }
.pg-body { margin: 0; font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.005em; line-height: 1.45;
  white-space: pre-line; color: var(--fg); }
.pg-label { margin: 56px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--y); text-transform: uppercase; }
.pg-clients { margin: 14px 0 0; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; letter-spacing: -.005em; line-height: 1.5;
  color: var(--fg); text-transform: uppercase; }
.pg-clients span { color: var(--y); }
.pg-list { margin: 0; }
.pg-list dt { margin-top: 34px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--y); text-transform: uppercase; }
.pg-list dt:first-child { margin-top: 0; }
.pg-list dd { margin: 8px 0 0; font-size: clamp(19px, 2vw, 28px); font-weight: 500; letter-spacing: -.01em; line-height: 1.3;
  white-space: pre-line; color: var(--fg); }
.pg-list a { border-bottom: 2px solid var(--y); }
.pg-list a:hover { color: var(--y); }

/* lightbox */
#lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(8,8,7,.97); display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity 260ms ease; touch-action: pan-y; }
#lightbox.open { opacity: 1; }
#lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 120px); object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb-close { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 22px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; padding: 8px; text-transform: uppercase; color: var(--y); }
.lb-bar { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex;
  justify-content: space-between; gap: 20px; padding: 0 24px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--y); }
.lb-bar .cap { color: rgba(var(--fg-rgb), .75); font-weight: 500; text-transform: none; }
#lightbox .side { position: absolute; }

/* loader */
#loader { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; transition: opacity 700ms ease, visibility 0s 700ms; }
#loader.out { opacity: 0; visibility: hidden; }
.ld-name { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--y); text-transform: uppercase; }
.ld-bar { width: min(220px, 46vw); height: 2px; background: rgba(var(--y-rgb), .2); overflow: hidden; }
.ld-bar i { display: block; height: 100%; background: var(--y); transform-origin: left center; transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(.6,.05,.3,.95); }

@media (max-width: 700px) {
  .c-row { flex-direction: column; max-width: 100%; }
  .side { display: none; }
  #lightbox img { max-width: 100vw; max-height: calc(100vh - 110px); }
  #lightbox .side { display: flex; top: auto; bottom: 44px; }
  .ov-head { align-items: flex-start; }
  .ov-nav { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .layer, .plate, .overlay, #lightbox, .layer video, .item img { transition-duration: 1ms; }
  .layer.kb .plate { animation: none; }
}