@font-face { font-family: "Calibre"; src: url("../fonts/TestCalibre-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("../fonts/TestCalibre-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("../fonts/TestCalibre-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("../fonts/TestCalibre-Semibold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Calibre"; src: url("../fonts/TestCalibre-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --black: #000;
  --ink: #0F0E0C;
  --white: #fff;
  --stone: #C6C1B5;
  --blue: #006AB6;
  --tile: #1c1b19;
  --gutter: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 44px;
}
@media (min-width: 900px) { :root { --gutter: 76px; --header-h: 56px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Calibre", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
section[id] { scroll-margin-top: calc(var(--header-h) - 20px); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  color: var(--black); transition: color .4s var(--ease);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--black);
  opacity: 0; transition: opacity .4s var(--ease);
}
/* Home: white behind the header so the photo stack doesn't slide under the logo as it scrolls away */
body:has(.stage) .header:not(.panel-open):not(.is-solid) { background: var(--white); }
.header.is-solid, .header.panel-open { color: var(--white); }
.header.is-solid::before { opacity: 1; }
/* The header's own background also turns black once the fade has finished, because iPhone Safari
   colours the strip around the camera from it (and from theme-color, which site.js keeps in step). */
.header.is-solid { background: var(--black); transition: color .4s var(--ease), background-color 0s .4s; }
.logo { font-weight: 500; font-size: 26px; letter-spacing: -0.03em; justify-self: start; line-height: 1; }
@media (min-width: 900px) { .logo { font-size: 34px; } }
.logo:hover { opacity: .75; }
.logo:active { opacity: .55; }

.contact-menu { grid-column: 3; justify-self: end; position: relative; }
.contact-btn { position: relative; font-size: 21px; padding: 6px 0; }
@media (min-width: 900px) { .contact-btn { font-size: 23px; } }
.contact-btn::after, .u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.contact-btn:hover::after, .contact-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.contact-btn:active { opacity: .6; }

.contact-panel {
  position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh;
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
}
.contact-panel.is-open { opacity: 1; pointer-events: auto; }
.contact-panel a {
  position: relative; color: var(--white);
  font-weight: 500; font-size: clamp(64px, 12vw, 190px); letter-spacing: -0.045em; line-height: 1.05;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.contact-panel.is-open a { opacity: 1; transform: none; }
.contact-panel.is-open a:nth-child(2) { transition-delay: .08s; }
.contact-panel a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .04em;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.contact-panel a:hover::after, .contact-panel a:focus-visible::after { transform: scaleX(1); }
.contact-panel a:active { opacity: .6; }
body.panel-open, body.lb-open { overflow: hidden; }

/* ---------- Home: photo stack ---------- */
/* One screen tall; it scrolls away normally and the photos keep flipping while it's in view */
.hero { padding-top: var(--header-h); background: var(--white); }
.stage { position: relative; height: calc(100svh - var(--header-h)); background: var(--white); }
.stack { position: absolute; inset: 3svh var(--gutter); container-type: size; }
.stack img {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(calc(var(--s) * 100cqw), calc(var(--s) * 100cqh * var(--r)));
  aspect-ratio: var(--r); height: auto; object-fit: cover;
}

/* ---------- Statement ---------- */
.statement { background: var(--white); color: var(--black); padding: 120px var(--gutter) 48px; }
@media (min-width: 900px) { .statement { padding: 180px var(--gutter) 64px; } }
.statement p {
  margin: 0 0 0 auto; max-width: 18em;
  font-size: clamp(30px, 3.6vw, 58px); line-height: 1.14; letter-spacing: -0.015em;
}
@media (min-width: 900px) { .statement p { width: 58%; } }
.reveal .gap { display: block; height: .55em; }
.reveal .c { opacity: .14; transition: opacity .25s linear; }

/* ---------- Arrows ---------- */
.arrow { width: 20px; height: 20px; flex: none; transition: transform .45s var(--ease); }
.round {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #2b2a28; transition: background-color .3s var(--ease), color .3s var(--ease);
}

/* ---------- Home: work sections ---------- */
.sections { padding: 100px var(--gutter) 120px; display: grid; gap: 48px; }
@media (min-width: 900px) { .sections { grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 140px var(--gutter) 160px; } }
.tile { display: block; }
.tile-media { position: relative; overflow: hidden; background: var(--tile); aspect-ratio: 4 / 4.7; }
.tile-media img, .tile-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile:hover .tile-media img, .tile:hover .tile-media video { transform: scale(1.04); }
.tile:active .tile-media img, .tile:active .tile-media video { transform: scale(1.02); }
.tile-cap {
  display: flex; justify-content: space-between; align-items: center; margin-top: 20px;
  font-weight: 600; font-size: 27px; letter-spacing: -0.01em;
}
.tile:hover .arrow { transform: translateX(6px); }
.tile:hover .round { background: var(--white); color: var(--black); }

/* ---------- Home: projects link ---------- */
.projects { background: var(--white); color: var(--black); padding: 0 var(--gutter) 40px; display: grid; justify-items: center; }
@media (min-width: 900px) { .projects { padding: 0 var(--gutter) 40px; } }
.projects-link { font-weight: 500; font-size: clamp(40px, 6vw, 96px); letter-spacing: -0.04em; line-height: 1.1; }
.projects-link::after { height: .04em; bottom: .04em; }
.projects-link:hover::after, .projects-link:focus-visible::after { transform: scaleX(1); }
.projects-link:active { opacity: .6; }

/* ---------- Sub pages ---------- */
.page-head { padding: calc(var(--header-h) + 32px) var(--gutter) 22px; }
@media (min-width: 900px) { .page-head { padding-top: calc(var(--header-h) + 44px); padding-bottom: 30px; } }
.page-title { margin: 0; font-weight: 500; font-size: clamp(64px, 12vw, 190px); letter-spacing: -0.045em; line-height: .95; }
.subnav { display: flex; gap: 28px; margin-top: 28px; }
.subnav a { position: relative; font-size: 23px; color: rgba(255,255,255,.55); transition: color .3s var(--ease); }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--white); }
.subnav a:hover::after, .subnav a[aria-current="page"]::after { transform: scaleX(1); }
.subnav a:active { opacity: .6; }
.u { position: relative; }

.page-tabs { display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 3.5vw, 36px); }
.page-tabs a {
  font-weight: 500; font-size: clamp(24px, 6.4vw, 40px); letter-spacing: -0.04em; line-height: 1;
  color: rgba(255,255,255,.28); transition: color .3s var(--ease);
}
@media (min-width: 900px) {
  .page-tabs { gap: 0 clamp(16px, 2vw, 32px); }
  .page-tabs a { font-size: clamp(32px, 2.9vw, 50px); }
}
.page-tabs a::after { height: .035em; bottom: -.02em; }
.page-tabs a:hover { color: rgba(255,255,255,.7); }
.page-tabs a[aria-current="page"] { color: var(--white); }
.page-tabs a:hover::after, .page-tabs a[aria-current="page"]::after { transform: scaleX(1); }
.page-tabs a:active { opacity: .6; }

.page-body { padding: 0 8px 120px; }
@media (min-width: 900px) { .page-body { padding: 0 var(--gutter) 160px; } }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.shot { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tile); cursor: zoom-in; }
.grid--3 .shot { aspect-ratio: 4 / 3; }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity .4s var(--ease); }
.shot:hover img, .shot:hover video { transform: scale(1.04); }
.shot:active img, .shot:active video { opacity: .8; }

/* Justified rows: every photo keeps its full frame; rows stretch to fill the width.
   Each .shot gets --r (width / height) from the photo list. */
.grid--justified { display: flex; flex-wrap: wrap; gap: 6px; --row: 120px; }
@media (min-width: 900px) { .grid--justified { gap: 16px; --row: 340px; } }
.grid--justified::after { content: ""; flex-grow: 999; }
.grid--justified .shot { aspect-ratio: var(--r); flex: var(--r) 1 calc(var(--r) * var(--row)); width: auto; }
/* Art direction: pieces sized by importance. Each .shot spans --span of 12 columns on desktop,
   --span-sm of 2 on phones (set per piece in design.html). */
.grid--design { gap: 6px; align-items: start; }
.grid--design .shot { aspect-ratio: var(--r, 1); grid-column: span var(--span-sm, 1); }
@media (min-width: 900px) {
  .grid--design { grid-template-columns: repeat(12, 1fr); gap: 16px; }
  .grid--design .shot { grid-column: span var(--span, 4); }
}

.films { display: grid; gap: 56px; }
@media (min-width: 900px) { .films { gap: 90px; } }
.film-frame { position: relative; aspect-ratio: 16 / 9; background: var(--tile); overflow: hidden; }
.film-frame video, .film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-title { margin: 18px 0 0; font-weight: 600; font-size: 27px; letter-spacing: -0.01em; padding: 0 8px; }
@media (min-width: 900px) { .film-title { padding: 0; } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.96);
  display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 18px var(--gutter);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lb-top { display: flex; justify-content: space-between; align-items: center; font-size: 19px; }
.lb-count { color: var(--stone); font-variant-numeric: tabular-nums; }
/* minmax(0, 1fr) gives the stage a fixed size, so a photo's max-height: 100% is the stage height and it always fits */
.lb-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 16px 0 24px; }
@media (min-width: 900px) { .lb-stage { padding: 16px 88px 24px; } }
.lb-stage img, .lb-stage video { max-height: 100%; max-width: 100%; object-fit: contain; transition: opacity .3s var(--ease); }
/* arrows sit centred on the left and right edges */
.lb-nav { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.lb-nav .lb-btn { pointer-events: auto; }
.lb-btn { font-size: 19px; padding: 8px 0; }
.lb-btn:hover { opacity: .7; }
.lb-btn:active { opacity: .5; }
.lb-nav .lb-btn:hover .round { background: var(--white); color: var(--black); }

/* ---------- Contact footer ---------- */
.contact { background: var(--white); color: var(--black); padding: 90px var(--gutter) 60px; }
@media (min-width: 900px) { .contact { padding: 120px var(--gutter) 70px; } }
.rows { border-top: 1px solid var(--black); }
.row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 24px 0; border-bottom: 1px solid var(--black);
}
@media (min-width: 900px) { .row { grid-template-columns: 220px 1fr auto; padding: 30px 0; } }
.row-label { font-size: 19px; color: #6b6760; }
.row-value {
  grid-column: 1 / -1; grid-row: 2; font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(30px, 4.6vw, 68px); line-height: 1; word-break: break-word;
  transition: color .3s var(--ease);
}
@media (min-width: 900px) { .row-value { grid-column: 2; grid-row: 1; } }
.row-actions { display: flex; gap: 12px; align-items: center; }
.row .round { background: var(--black); color: var(--white); }
.row:hover .row-value { color: var(--blue); }
.row:hover .round, .round:focus-visible { background: var(--blue); }
.row a.round:active, .copy:active { transform: scale(.94); }
.row a.round:hover .arrow { transform: translateX(4px); }
.copy {
  font-size: 18px; padding: 0 18px; height: 56px; border: 1px solid var(--black); border-radius: 28px;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.copy:hover { background: var(--black); color: var(--white); }
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-top: 90px; font-size: 17px; color: #6b6760;
}

/* Dark footer on the work pages */
.contact--dark { background: var(--black); color: var(--white); }
.contact--dark .rows, .contact--dark .row { border-color: rgba(255,255,255,.25); }
.contact--dark .row-label, .contact--dark .footer { color: rgba(255,255,255,.55); }
.contact--dark .row .round { background: var(--white); color: var(--black); }
.contact--dark .row:hover .round, .contact--dark .round:focus-visible { background: var(--blue); color: var(--white); }
.contact--dark .copy { border-color: rgba(255,255,255,.5); }
.contact--dark .copy:hover { background: var(--white); color: var(--black); }

/* ---------- Cursor (desktop only, added by site.js) ---------- */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor iframe { cursor: auto !important; }
.cursor {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  pointer-events: none; mix-blend-mode: difference;
}
.cursor-dot {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: rgba(170,170,170,.85);
  transform: scale(.36);
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.cursor.is-hover .cursor-dot { transform: scale(1); }
.cursor.is-down .cursor-dot { transform: scale(.28); }
.cursor.is-hover.is-down .cursor-dot { transform: scale(.8); }
.cursor.is-hidden .cursor-dot { opacity: 0; }

/* ---------- Text me pop-up (added by site.js after 20s) ---------- */
.textme {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--gutter);
  background: rgba(0,0,0,.55); opacity: 0; transition: opacity .4s var(--ease);
}
.textme.is-open { opacity: 1; }
.textme-card { position: relative; transform: translateY(24px); transition: transform .6s var(--ease); }
.textme.is-open .textme-card { transform: none; }
.textme-box {
  display: block; background: var(--blue); color: var(--white);
  font-weight: 500; font-size: clamp(30px, 4.2vw, 60px); letter-spacing: -0.04em; line-height: 1;
  padding: .65em 1.7em .75em;
}
.textme-box .u::after { height: .04em; bottom: -.04em; }
.textme-box:hover .u::after, .textme-box:focus-visible .u::after { transform: scaleX(1); }
/* never an outline box; keyboard focus shows the underline instead */
.textme-box:focus, .textme-box:focus-visible, .textme-close:focus, .textme-close:focus-visible { outline: none; }
.textme-box:active { opacity: .8; }
.textme-close {
  position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--white); font-size: 28px; line-height: 1; opacity: .75; transition: opacity .3s var(--ease);
}
.textme-close:hover, .textme-close:focus-visible { opacity: 1; }
.textme-close:active { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal .c { opacity: 1 !important; }
}