:root {
  color-scheme: dark;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --black: #000000;
  --soft-white: #dcdcdc;
  --white: #fbfbfb;
  --red: #800000;
  background: var(--black);
  color: var(--white);
}

* { box-sizing: border-box; }

html { background: var(--black); }

body {
  background: var(--black);
  isolation: isolate;
  margin: 0;
  min-height: 100svh;
  position: relative;
}

body[data-page]::before {
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
}

body[data-page]::before {
  background-image: var(--page-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.025);
  z-index: 0;
}

a { color: inherit; }

.shell {
  display: grid;
  grid-template-columns: minmax(12rem, 18vw) minmax(0, 1fr);
  min-height: 100svh;
  position: relative;
  z-index: 1;
}

.rail {
  display: flex;
  flex-direction: column;
  height: 100svh;
  inset: 0 auto 0 0;
  justify-content: flex-start;
  overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 3.2rem);
  position: fixed;
  width: max(12rem, 18vw);
}

.brand {
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .9;
  text-decoration: none;
}

.brand-full { display: none; }

.nav { margin-top: 2.25rem; }

.nav ul {
  display: grid;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--soft-white);
  display: inline-block;
  font-size: clamp(1.15rem, 1.55vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: .98;
  padding: .22rem 0;
  text-decoration: none;
  text-transform: none;
}

.nav a::before {
  background: var(--red);
  content: "";
  display: inline-block;
  height: .45rem;
  margin-right: .7rem;
  opacity: 0;
  transform: translateX(-.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
  width: .45rem;
}

.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"] { color: var(--white); }

.nav a:hover::before,
.nav a:focus-visible::before,
.nav a[aria-current="page"]::before {
  opacity: 1;
  transform: translateX(0);
}

.background-swap {
  align-self: flex-start;
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-top: 1.4rem;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 16 / 9;
  width: clamp(5.5rem, 8.4vw, 7.6rem);
}

.background-swap img {
  display: block;
  height: 100%;
  object-fit: cover;
  opacity: .95;
  width: 100%;
}

.background-swap:hover img { opacity: 1; }

.copyright {
  color: rgba(251, 251, 251, .78);
  font-size: clamp(.82rem, 1.08vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: .98;
  margin: 0;
}

.rail .copyright { margin-top: auto; padding-top: 2rem; position: static; }
.copyright-desktop { display: inline-block; line-height: 1.25; }
.copyright-mobile { display: none; }

.nav a:focus-visible,
.brand:focus-visible,
.back:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: .35rem;
}

.main {
  align-content: start;
  display: grid;
  grid-column: 2;
  min-width: 0;
  padding: calc(clamp(1.5rem, 3vw, 3.2rem) + clamp(1.35rem, 1.89vw, 1.8rem) + 1.4rem + clamp(3.09rem, 4.725vw, 4.275rem) + 2.25rem) clamp(2rem, 6vw, 7rem) clamp(2rem, 6vw, 7rem);
}

.page {
  animation: rise 560ms both cubic-bezier(.16, 1, .3, 1);
  max-width: 60rem;
}

body[data-page="photography"] .main,
body[data-page="archive"] .main { align-content: start; }

.gallery-page { max-width: 86rem; width: 100%; }

.gallery {
  display: grid;
  gap: clamp(.45rem, .9vw, .85rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 4rem);
}

.gallery-item {
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, .5);
  border: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}

.gallery-item img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
  width: 100%;
}

.archive-gallery .gallery-item img {
  object-fit: contain;
}

.archive-gallery .gallery-item {
  background: transparent;
}

.archive-gallery .gallery-item:hover img,
.archive-gallery .gallery-item:focus-visible img {
  opacity: 1;
  transform: none;
}

.gallery-item:hover img,
.gallery-item:focus-visible img { opacity: .88; transform: scale(1.018); }

button.gallery-item:hover:not(:disabled),
button.gallery-item:active {
  background: rgba(0, 0, 0, .5);
  border-color: transparent;
  color: inherit;
}

.gallery-item.is-expanded {
  aspect-ratio: auto;
  cursor: zoom-out;
  grid-column: 1 / -1;
}

.gallery-item.is-expanded img {
  height: auto;
  margin: 0 auto;
  max-height: min(78svh, 58rem);
  object-fit: contain;
  transform: none;
}

.kicker {
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  margin: 0 0 1.4rem;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(3.4rem, 8.6vw, 9.5rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: .78;
  margin: 0;
  text-wrap: balance;
}

.intro {
  color: var(--soft-white);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.45;
  margin: 2rem 0 0;
  max-width: 58rem;
}

.intro--list { max-width: 58rem; }
.intro--form { max-width: 42rem; }

.statement,
.supplier-list p {
  color: var(--soft-white);
  font-size: clamp(1.3rem, 2.15vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.03;
  margin: 2rem 0 0;
  max-width: 58rem;
}

.statement { letter-spacing: -.005em; }
.archive-note { font-size: 57.5%; }
a.archive-note { color: var(--soft-white); text-decoration: none; transition: color 160ms ease; }
a.archive-note:hover,
a.archive-note:focus-visible,
a.archive-note:active { color: #003a6f; text-decoration: none; }

.content-list {
  display: grid;
  gap: .65rem;
  list-style: none;
  margin: 2rem 0 0;
  max-width: 58rem;
  padding: 0;
}
.content-list li,
.content-list summary {
  color: var(--soft-white);
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
}
.cv-intro { margin: 2rem 0 0; max-width: 58rem; }
.content-list details { border-top: 1px solid rgba(220,220,220,.35); padding: .8rem 0 0; }
.content-list details:last-child { border-bottom: 1px solid rgba(220,220,220,.35); padding-bottom: .8rem; }
.content-list summary { cursor: pointer; }
.content-list p { color: var(--soft-white); font-size: clamp(.94rem, 1.25vw, 1.08rem); line-height: 1.45; margin: .75rem 0 0; max-width: 58rem; }
.content-list .project-statement { white-space: nowrap; }
.content-list li::before { color: var(--red); content: "•"; display: inline-block; margin-right: .55rem; }
.detail-list { display: grid; gap: .45rem; list-style: none; margin: .9rem 0 0; padding: 0; }
.content-list .detail-list li { color: var(--soft-white); font-size: clamp(.9rem, 1.15vw, 1.03rem); font-weight: 400; line-height: 1.4; }
.client-groups { margin-top: .9rem; }
.content-list .client-groups p { font-size: clamp(.9rem, 1.15vw, 1.03rem); margin: .55rem 0 0; }
.client-groups strong { color: var(--white); }
.masterclass-list { display: flex; flex-wrap: wrap; gap: .55rem .85rem; margin-top: 1rem; }
.masterclass-list span { color: var(--soft-white); font-size: clamp(.86rem, 1.1vw, 1rem); }
.advocate-logos { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem clamp(1rem, 2.5vw, 2rem); margin-top: 1rem; }
.advocate-logos a { display: block; transition: opacity .2s ease; }
.advocate-logos a:hover, .advocate-logos a:focus-visible { opacity: .7; }
.advocate-logos a:focus-visible { outline: 1px solid var(--white); outline-offset: .45rem; }
.advocate-logos img { display: block; height: clamp(2.8rem, 5vw, 4.25rem); max-width: min(12rem, 38vw); object-fit: contain; width: auto; }
.advocate-logos a:first-child img, .advocate-logos a:last-child img { height: clamp(3.2rem, 5.5vw, 4.7rem); }

.email-form { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; max-width: 42rem; }
.form-row { display: grid; gap: .45rem; }
.form-row-full, .note, .form-actions { grid-column: 1 / -1; }
.form-row label { color: var(--soft-white); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body[data-page="email"] label,
body[data-page="email"] button { letter-spacing: normal; text-transform: none; }
.form-row input, .form-row textarea { background: rgba(0, 0, 0, .2); border: 1px solid rgba(220, 220, 220, .55); border-radius: 0; color: var(--white); font: inherit; min-height: 2.85rem; padding: .7rem .8rem; }
.form-row textarea { min-height: 8rem; resize: vertical; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--white); outline: 0; }
.trap-field { height: 1px; left: -9999px; overflow: hidden; position: absolute; width: 1px; }
.cf-turnstile { min-height: 65px; }
.form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: -.35rem; }
.form-actions button { background: #003a6f; border: 1px solid #003a6f; border-radius: 0; color: var(--white); cursor: pointer; font: inherit; font-weight: 700; min-height: 2.3rem; padding: calc(.4rem + 2px) .75rem calc(.4rem - 2px); text-transform: none; }
.form-actions button:hover:not(:disabled) { background: #003a6f; border-color: #003a6f; color: var(--white); opacity: .82; }
.form-actions button:disabled { cursor: wait; opacity: .65; }
.form-status { color: var(--soft-white); font-size: .95rem; margin: 0; }
.form-status[data-state="error"] { color: #ffb4b4; }
.form-status[data-state="success"] { color: var(--white); }
.note { color: var(--soft-white); font-size: .9rem; line-height: 1.45; margin: 0; }

.supplier-list { margin: 0; }
.supplier-list p + p { margin-top: .7rem; }
.supplier-list span { color: var(--white); }

.contact-form {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.75rem;
  max-width: 36rem;
}

.field { display: grid; gap: .55rem; }

label {
  color: var(--soft-white);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

input,
textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(220, 220, 220, .45);
  border-radius: 0;
  color: var(--white);
  font: inherit;
  padding: .65rem 0;
  width: 100%;
}

textarea { min-height: 9rem; resize: vertical; }

input:focus,
textarea:focus { border-bottom-color: var(--red); outline: 0; }

button {
  appearance: none;
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--black);
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  justify-self: start;
  letter-spacing: .05em;
  padding: .9rem 1.2rem;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease;
}

button:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--white); }
button:disabled { cursor: wait; opacity: .58; }

.form-status { color: var(--soft-white); font-size: .92rem; line-height: 1.4; margin: 0; min-height: 1.4em; }
.form-status[data-state="error"] { color: var(--red); }
.trap { left: -9999px; position: absolute; }

@keyframes rise {
  from { opacity: 0; transform: translateY(.9rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .shell { display: block; }
  .rail { border-bottom: 1px solid rgba(220, 220, 220, .22); height: auto; min-height: auto; overflow: visible; padding: 1.4rem 1.5rem .5rem; position: static; width: auto; }
  .brand-short { display: none; }
  .brand-full { display: inline; }
  .nav { margin-top: 1.19rem; overflow: visible; }
  .nav ul { display: grid; gap: .35rem; min-width: 0; }
  .nav a::before { display: none; }
  .background-swap { margin-top: 1.25rem; width: 5.1rem; }
  .rail .copyright { font-size: clamp(.62rem, 2.9vw, .75rem); letter-spacing: -.015em; margin-top: 1.5rem; padding-top: 0; white-space: normal; }
  .copyright-desktop { display: none; }
  .copyright-mobile { display: inline; }
  .main { align-content: start; grid-column: auto; min-height: calc(100svh - 13rem); padding: 1.75rem 1.5rem; }
  .gallery { grid-template-columns: 1fr; }
  .content-list .project-statement { white-space: normal; }
  .email-form { grid-template-columns: 1fr; }
  .form-row-full, .note, .form-actions { grid-column: 1; }
}

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