/* =========================================================
   Tokens
   ========================================================= */
:root {
  --bg: #fbfbf9;
  --bg-2: #efeeea;
  --ink: #111110;
  --muted: #8b8a85;
  --rule: rgba(17, 17, 16, 0.12);
  --alert: #c8361d;

  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', 'Times New Roman', Times, serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(12px, 1.2vw, 20px);
  --header-h: 44px;
  --row-gap: clamp(72px, 10vw, 170px);
  --story-gap: clamp(140px, 17vw, 300px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #0e0e0d;
  --bg-2: #1a1a18;
  --ink: #f1f0ec;
  --muted: #84837e;
  --rule: rgba(241, 240, 236, 0.12);
  --alert: #e8492c;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 12px/1.3 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

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

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

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

[hidden] {
  display: none !important;
}

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

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.label {
  font: 700 11px/1.25 var(--sans);
  letter-spacing: 0.01em;
}

.muted {
  color: var(--muted);
}

/* =========================================================
   Header: small name + nav, see-through over the photos
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pad);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

/* The name: big across the opening image, then it glides into the corner as you scroll.
   It is set at its large size and scaled down, so it stays crisp the whole way. */
/* Typeface, weight, case and spacing come from names.css (the style is chosen in the editor). */
.name {
  position: fixed;
  left: var(--pad);
  top: 0;
  font-size: var(--name-small);
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: translateY(calc((var(--header-h) - var(--name-small)) / 2));
  transition: opacity 0.6s var(--ease);
}

/* Stay hidden until the chosen typeface has loaded and the name is measured */
html:not(.name-ready) .name {
  opacity: 0;
}

.name--hero {
  font-size: calc((100vw - 2 * var(--pad)) / 8.4);
  transform: translateY(calc(100svh - 1.2em));
  will-change: transform;
}

.name.is-big {
  pointer-events: none;
}

.nav {
  display: flex;
  margin-left: auto;
  font: 600 13px/1 var(--serif);
}

/* Commas between the links; a hidden link takes its comma with it */
.nav a + a::before {
  content: ',';
  display: inline-block; /* keeps the comma out of the hover underline */
  margin-right: 0.3em;
}

.nav a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.nav a:hover,
.nav a.is-current {
  text-decoration-line: underline;
}

/* Cursor styles live in cursors.css (the style is chosen in the editor). */

/* =========================================================
   Opening image
   ========================================================= */
.hero {
  position: relative;
  height: 100svh;
  min-height: 480px;
  background: var(--bg-2);
}

.hero__btn {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* =========================================================
   Work: editorial feed
   ========================================================= */
.stories + .footer {
  margin-top: var(--story-gap);
}

.story + .story {
  margin-top: var(--story-gap);
}

.row {
  display: flex;
  align-items: flex-start;
}

.row + .row,
.caption + .row {
  margin-top: var(--row-gap);
}

.shot {
  margin: 0;
  width: 50%;
}

.row--full .shot {
  width: 100%;
}

.row--right {
  justify-content: flex-end;
}

.row--center {
  justify-content: center;
}

.row--center .shot {
  width: 38%;
}

.shot__btn {
  display: block;
  width: 100%;
}

.shot__btn img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  background: var(--bg-2);
  transition: background-color 0.5s var(--ease);
}

/* ---- A few analog finishes ---- */

/* White-bordered print, like a Polaroid */
.shot--print {
  --rot: -1.6deg;
  padding: 14px 0 34px;
}

.shot--print .shot__btn {
  padding: 5% 5% 17%;
  background: #fdfcf9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 22px 50px -22px rgba(30, 20, 10, 0.45);
  transform: rotate(var(--rot));
}

.row--center .shot--print {
  width: 32%;
}

/* 35mm negative scan: black rebate, rounded window, edge numbers */
.shot--film .shot__btn {
  position: relative;
  padding: 9% 5.5%;
  background: #0c0b0a;
}

.shot--film .shot__btn img {
  border-radius: 3px;
}

.film-edge {
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  display: flex;
  justify-content: space-between;
  font: 500 clamp(7px, 0.6vw, 10px)/1 var(--mono);
  letter-spacing: 0.1em;
  color: #d9923f;
  opacity: 0.85;
}

.film-edge--top {
  top: 3.4%;
}

.film-edge--bottom {
  bottom: 3.4%;
}

/* ---- A photo laid on top of a photo ---- */
.layer {
  position: relative;
  width: 100%;
}

.layer__bg {
  width: 100%;
}

.layer__fg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  transform: translate(-50%, -50%) translateY(var(--py, 0px));
  will-change: transform;
}

.layer__fg.shot--print {
  width: 30%;
}

/* Portrait photo on a background photo: keep the pair within one screen height */
.row--layer.is-tall .layer {
  width: min(100%, calc(100svh * var(--bg-ratio)));
  margin: 0 auto;
}

.row--layer.is-tall .layer__fg {
  width: 46%;
}

/* A portrait set to "full width" fills the screen height instead of becoming enormous */
.row--full {
  justify-content: center;
}

.row--full .shot--tall {
  width: min(100%, calc(100svh * var(--ratio)));
}

/* Finished singles on the left or right keep a little distance from the edge */
.row--left .shot--print,
.row--left .shot--film {
  width: 34%;
  margin-left: 8%;
}

.row--right .shot--print,
.row--right .shot--film {
  width: 34%;
  margin-right: 8%;
}

/* Text beside a left/right photo, at the bottom of the empty half */

.row__text {
  flex: 1;
  align-self: flex-end;
  max-width: 30em;
  margin: 0;
  padding: 0 var(--pad);
  font: 500 13px/1.35 var(--serif);
}

.row--right .row__text {
  order: -1;
  margin-left: auto;
}

.load-error {
  max-width: 40em;
  padding: 120px var(--pad);
}

.caption {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--pad);
  padding: 10px var(--pad) 0;
}

.caption__title {
  grid-column: 1 / span 3;
  margin: 0;
}

.caption__note {
  grid-column: 5 / span 5;
  margin: 0;
  font: 500 13px/1.3 var(--serif);
}

.caption__meta {
  grid-column: 11 / span 2;
  text-align: right;
}

/* Quiet fade-in as things enter the viewport */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Auto-scroll control */
.autoplay {
  position: fixed;
  right: var(--pad);
  bottom: 12px;
  z-index: 60;
  color: #fff;
  mix-blend-mode: difference;
  font: 600 13px/1 var(--serif);
}

.autoplay:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px var(--pad);
  padding: clamp(48px, 8vh, 96px) var(--pad) var(--pad);
  border-top: 1px solid var(--rule);
}

.footer__lead {
  grid-column: 1 / span 7;
  margin: 0;
  font: 500 clamp(26px, 3vw, 46px)/1.08 var(--serif);
  letter-spacing: -0.01em;
}

.footer__lead a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

.footer__lead a:hover {
  text-decoration-color: transparent;
}

.footer__links {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.footer__links a:hover,
.footer__bottom button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(40px, 10vh, 120px);
}

/* =========================================================
   Lightbox
   ========================================================= */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: var(--header-h) minmax(0, 1fr) auto;
  background: var(--bg);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}

.lb.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease);
}

.lb__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 var(--pad);
}

.lb__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lb__nav button:hover,
.lb__close:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lb__close {
  justify-self: end;
}

.lb__stage {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.lb__img {
  position: absolute;
  top: 0;
  left: var(--pad);
  width: calc(100% - 2 * var(--pad));
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.lb__img.is-in {
  opacity: 1;
}

.lb__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
}

.lb__zone--prev { left: 0; }
.lb__zone--next { right: 0; }

.lb__thumbs {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px var(--pad) 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.lb__thumb {
  flex: none;
  height: 44px;
  aspect-ratio: var(--ratio);
  opacity: 0.3;
  transition: opacity 0.3s;
}

.lb__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb__thumb:hover {
  opacity: 0.65;
}

.lb__thumb.is-current {
  opacity: 1;
}

/* =========================================================
   Contact page
   ========================================================= */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100svh;
}

/* Without a photo the contact page is a single column */
.contact--no-photo {
  grid-template-columns: minmax(0, 1fr);
}

.contact--no-photo .contact__body {
  max-width: 860px;
}

.contact__media {
  position: sticky;
  top: 0;
  height: 100svh;
  margin: 0;
  background: var(--bg-2);
}

.contact__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact__body {
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + clamp(48px, 14vh, 160px)) clamp(20px, 4vw, 72px) var(--pad);
}

.contact__title {
  margin: 14px 0 0;
  max-width: 15em;
  font: 500 clamp(28px, 2.8vw, 44px)/1.08 var(--serif);
  letter-spacing: -0.01em;
}

.contact__lead {
  max-width: 34em;
  margin: 18px 0 0;
  font: 500 14px/1.4 var(--serif);
  color: var(--muted);
}

.details {
  margin: clamp(40px, 7vh, 72px) 0 0;
}

.details__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.details__row:last-child {
  border-bottom: 1px solid var(--rule);
}

.details__row dd {
  margin: 0;
  font: 500 15px/1.3 var(--serif);
  overflow-wrap: anywhere;
}

.details__row dd a:hover,
.copy-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.copy-btn {
  color: var(--muted);
}

/* Form */
.enquiry {
  margin-top: clamp(56px, 10vh, 110px);
}

.enquiry__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.enquiry__head h2 {
  margin: 0;
}

.field {
  position: relative;
  display: block;
  margin-bottom: 18px;
}

.field__label {
  display: block;
  margin-bottom: 2px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 6px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 17px/1.3 var(--serif);
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}

.field select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

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

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

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

.field.is-invalid input,
.field.is-invalid textarea {
  border-bottom-color: var(--alert);
}

.field__error {
  display: none;
  margin-top: 4px;
  color: var(--alert);
}

.field.is-invalid .field__error {
  display: block;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 22px;
  padding: 0;
  border: 0;
}

.chips legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid var(--rule);
  font: 500 14px/1 var(--serif);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.chip span:hover {
  border-color: var(--ink);
}

.chip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.chip input:focus-visible + span {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

.submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 6px;
  padding: 15px 16px;
  background: var(--ink);
  color: var(--bg);
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}

.submit:hover {
  opacity: 0.85;
}

.form-note {
  margin: 10px 0 0;
}

.form-done {
  display: none;
}

.form-done h3 {
  margin: 0 0 10px;
  font: 500 clamp(26px, 2.6vw, 38px)/1.1 var(--serif);
}

.form-done p {
  margin: 0 0 14px;
  max-width: 38em;
  font: 500 14px/1.4 var(--serif);
}

.form-done a,
.form-done button {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enquiry.is-sent form {
  display: none;
}

.enquiry.is-sent .form-done {
  display: block;
}

.contact-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: clamp(56px, 10vh, 110px);
}

.contact-footer a:hover,
.contact-footer button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 767px) {
  .nav .nav__extra {
    display: none;
  }

  /* On a phone a photo alone in its row (left, centre or right) is as wide as one photo of a pair */
  .row--right .shot,
  .row--left .shot,
  .row--center .shot,
  .row--center .shot--print,
  .row--left .shot--print,
  .row--left .shot--film,
  .row--right .shot--print,
  .row--right .shot--film {
    width: 50%;
  }

  .row--single {
    flex-wrap: wrap;
  }

  .row__text {
    flex-basis: 100%;
    order: 0 !important;
    margin: 0;
    padding-top: 10px;
  }

  .layer__bg .shot__btn img {
    aspect-ratio: 4 / 5;
  }

  .layer__fg {
    width: 42%;
  }

  .layer__fg.shot--print {
    width: 48%;
  }

  .caption {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }

  .caption__title {
    grid-column: 1;
  }

  .caption__meta {
    grid-column: 2;
    grid-row: 1;
  }

  .caption__note {
    grid-column: 1 / -1;
  }

  .footer__lead,
  .footer__links {
    grid-column: 1 / -1;
  }

  .contact {
    grid-template-columns: 1fr;
  }

  .contact__media {
    position: relative;
    height: calc(var(--m-h, 72) * 1svh); /* phone framing, set in the editor */
  }

  .contact__media img {
    object-position: var(--m-x, 50%) var(--m-y, 50%);
  }

  /* The opening image on a phone: height and what's in view are set in the editor (Phone framing) */
  .hero {
    height: calc(var(--m-h, 100) * 1svh);
    min-height: 300px;
  }

  .hero__btn img {
    object-position: var(--m-x, 50%) var(--m-y, 30%);
  }

  .contact__body {
    padding-top: 40px;
  }

  .details__row {
    grid-template-columns: 84px minmax(0, 1fr) auto;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* After sending: one message when the form sent it, another when the visitor's email app took over */
.enquiry[data-via='form'] .form-done__mail,
.enquiry:not([data-via='form']) .form-done__sent {
  display: none;
}

.submit:disabled {
  opacity: 0.6;
  cursor: wait;
}