/* GWD Photo Bold
   Drama comes from layout, type and colour. There is no animation library and no
   scroll framework, so the weight has to be carried by band colour, scale jumps and
   the tinted photo bands. */

:root {
  --ink:    #212121;
  --brown:  #443F38;
  --orange: #B6703E;
  --cream:  #F7F3F0;
  --muted:  #CFC9C1;

  --fg: var(--cream);
  --bg: var(--ink);
  --dim: var(--muted);
  --rule: rgba(247, 243, 240, .18);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;

  /* 46px on a 360px phone, 182px on a 1400px desktop. The clamp is the whole reason
     the very large type does not produce a sideways scrollbar. */
  --fs-display: clamp(2.875rem, 13vw, 11.375rem);
  --fs-display-sm: clamp(2.25rem, 8vw, 6rem);
  --fs-serif: clamp(1.6875rem, 1.15rem + 2.4vw, 2.8125rem);
  --fs-body: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-eyebrow: 0.75rem;

  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --grid-gap: clamp(1.125rem, 3vw, 2.75rem);
  --band-pad: clamp(4rem, 9vw, 9rem);
  --wrap: 1480px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  /* very large type plus a narrow viewport is the classic sideways-scroll bug */
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--orange); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cream);
  color: var(--ink);
  padding: .75rem 1.25rem;
  z-index: 200;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 62rem; }

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3em;   /* 3.6px at 12px */
  color: var(--orange);
  margin: 0 0 1.25rem;
  display: block;
}

.band--orange .eyebrow,
.tint .eyebrow { color: var(--cream); opacity: .82; }

.display {
  font-family: var(--display);
  font-size: var(--fs-display);
  line-height: .88;
  letter-spacing: -.005em;
  text-transform: uppercase;
  /* Anton is narrow, but a 20 character word still overflows a 360px screen */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.display--sm { font-size: var(--fs-display-sm); }

.subhead {
  font-family: var(--serif);
  font-size: var(--fs-serif);
  line-height: 1.22;
  letter-spacing: -.01em;
}

.lede { font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); color: var(--dim); }

.meta {
  font-family: var(--sans);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .26em;   /* 3.4px at 13px */
  color: var(--dim);
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .26em;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn--solid { background: var(--orange); border-color: var(--orange); color: var(--cream); }
.btn--solid:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* orange on orange is invisible, so the solid button flips to cream in that band */
.band--orange .btn--solid { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.band--orange .btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ---------- bands ---------- */

.band {
  padding-block: var(--band-pad);
  background: var(--bg);
  color: var(--fg);
}

.band--ink    { --bg: #212121; --fg: var(--cream); --dim: var(--muted); --rule: rgba(247,243,240,.18); }
.band--brown  { --bg: #443F38; --fg: var(--cream); --dim: var(--muted); --rule: rgba(247,243,240,.22); }
.band--orange { --bg: #B6703E; --fg: var(--cream); --dim: rgba(247,243,240,.8); --rule: rgba(247,243,240,.3); }
.band--cream  { --bg: #F7F3F0; --fg: var(--ink);   --dim: #6b6157;        --rule: rgba(33,33,33,.16); }

.band--cream .eyebrow { color: var(--orange); }
.band--flush { padding-block: 0; }

/* ---------- tinted photo band, the rubistyle graft ----------
   A desaturated photograph multiplied into a flat colour, with the type sitting on
   top. One photograph carries a whole full-width section, which is the answer to a
   client who has shot two jobs. */

.tint {
  position: relative;
  isolation: isolate;
  background: var(--tint, #B6703E);
  overflow: hidden;
  color: var(--cream);
}

.tint__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.08) brightness(1.06);
  z-index: 0;
}

/* keeps type legible over the light end of a photograph */
.tint::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(33, 33, 33, .55), rgba(33, 33, 33, 0) 62%);
  z-index: 1;
  pointer-events: none;
}

.tint__inner { position: relative; z-index: 2; }

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

.site-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem);
  color: var(--cream);
}

.site-head--solid {
  position: relative;
  background: var(--ink);
  border-bottom: 1px solid rgba(247, 243, 240, .14);
}

.site-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }

.nav a {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3em;
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current='page'] { border-bottom-color: currentColor; }

/* CSS-only mobile menu. The lightbox is the only place JS is unavoidable. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-btn { display: none; }

@media (max-width: 800px) {
  .nav-btn {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3em;
    cursor: pointer;
    padding: .35rem 0;
    border-bottom: 1px solid currentColor;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--ink);
    border: 1px solid rgba(247, 243, 240, .18);
    padding: .5rem 1.25rem;
  }
  .nav a { display: block; width: 100%; padding-block: .95rem; border-bottom: 1px solid rgba(247,243,240,.12); }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle:checked ~ .nav { display: flex; }
}

/* ---------- hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--ink, #212121);
}

/* The hero does NOT use the tinted-band treatment.
   multiply can only darken, so the tint colour caps the photograph's brightness and a
   good frame flattens into a colour field. That trade is right on the smaller bands,
   where one photo has to carry a whole section and the type is the subject. It is wrong
   here: on a photographer's site the first screen is the one place the photograph
   itself has to land. Scrim only, weighted to the bottom-left where the type sits. */
.hero .tint__img {
  mix-blend-mode: normal;
  filter: saturate(.92) contrast(1.04);
}

.hero.tint::after {
  background:
    linear-gradient(to top, rgba(24, 22, 20, .82), rgba(24, 22, 20, .28) 46%, rgba(24, 22, 20, .06) 72%),
    linear-gradient(to right, rgba(24, 22, 20, .58), rgba(24, 22, 20, .10) 52%, rgba(24, 22, 20, 0) 76%);
}

.hero__inner {
  width: 100%;
  padding-block: clamp(4.5rem, 11vw, 8rem);
}

.hero__headline { margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); max-width: 16ch; }

.hero__subhead { max-width: 26ch; color: var(--cream); }

.hero__scroll {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  text-decoration: none;
}
.hero__scroll::after { content: ''; width: 3.5rem; height: 1px; background: currentColor; }

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

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.about__portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.about__name { margin: 0 0 1.25rem; }

.about__region { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }

.about__body :first-child { margin-top: 0; }

@media (max-width: 820px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { max-width: 26rem; }
}

.tint--feature__inner { padding-block: clamp(5rem, 12vw, 10rem); }

/* ---------- section headings ---------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.25rem, 5vw, 4rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--rule);
}

.section-head__title { max-width: 30ch; }
.section-head__title p {
  font-family: var(--serif);
  font-size: var(--fs-serif);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 0;
}

/* ---------- photo grid ----------
   Three columns, cells alternating landscape and portrait, roughly 44px gutters.
   CSS columns rather than grid tracks: a grid row is as tall as its tallest cell, so
   mixing a 4:3 and a 3:4 crop in one row leaves a block of dead colour under every
   landscape frame. Columns pack tight and the alternating ratios do the staggering.
   The trade is that reading order runs down a column rather than across a row. */

.photo-grid {
  column-count: 3;
  column-gap: var(--grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.photo-grid__cell {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--grid-gap);
}

.photo-grid__link {
  display: block;
  position: relative;
  text-decoration: none;
  background: rgba(0, 0, 0, .18);
}

.photo-grid__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .25s ease;
}

.photo-grid__cell--land .photo-grid__link { aspect-ratio: 4 / 3; }
.photo-grid__cell--port .photo-grid__link { aspect-ratio: 3 / 4; }

.photo-grid__link:hover img { filter: brightness(.72) saturate(.85); }

.photo-grid__caption {
  display: block;
  margin-top: .85rem;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--dim);
}

@media (max-width: 900px) {
  .photo-grid { column-count: 2; }
}

@media (max-width: 520px) {
  .photo-grid { column-count: 1; }
  /* one column reads better all landscape than as a stack of tall crops */
  .photo-grid__cell--port .photo-grid__link { aspect-ratio: 4 / 3; }
}

/* ---------- galleries index ----------
   Each job is a full-width tinted band. Two jobs still fill a page. */

.cover {
  position: relative;
  text-decoration: none;
  min-height: clamp(24rem, 62vh, 40rem);
  display: flex;
  align-items: flex-end;
}

.cover + .cover { border-top: 1px solid rgba(247, 243, 240, .2); }

.cover__inner { width: 100%; padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.cover__title { display: block; margin: 0 0 1rem; max-width: 15ch; }

.cover__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }

.cover__go {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .3em;
}
.cover__go::after { content: ''; width: 3rem; height: 1px; background: currentColor; transition: width .22s ease; }
.cover:hover .cover__go::after { width: 5rem; }
.cover:hover .tint__img { filter: grayscale(.5) contrast(1.08) brightness(1.1); }

/* ---------- gallery page ---------- */

.gallery-head { --tint: #443F38; }
.gallery-head__inner { padding-block: clamp(6.5rem, 14vw, 11rem) clamp(3rem, 7vw, 5rem); }
.gallery-head__title { margin: 0 0 1.25rem; max-width: 14ch; }
.gallery-head__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }

.gallery-intro { max-width: 46rem; }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}

.pager a { font-size: .75rem; text-transform: uppercase; letter-spacing: .3em; text-decoration: none; }
.pager a:hover { color: var(--orange); }

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

.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(33, 33, 33, .97);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lb[open], .lb.is-open { display: flex; }

.lb__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 1rem; }

.lb__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

.lb__cap {
  color: var(--muted);
  text-align: center;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.lb__btn {
  position: absolute;
  background: none;
  border: 1px solid rgba(247, 243, 240, .35);
  color: var(--cream);
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lb__btn:hover { background: var(--orange); border-color: var(--orange); }

.lb__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__prev  { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__next  { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

.lb__count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: .75rem;
  letter-spacing: .3em;
  color: var(--muted);
}

@media (max-width: 520px) {
  .lb__prev { left: .35rem; }
  .lb__next { right: .35rem; }
  .lb__btn { width: 2.5rem; height: 2.5rem; }
}

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

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

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

.gwd-form__row { margin-bottom: 1.65rem; }

.gwd-form__label,
.gwd-form label {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .26em;
  margin-bottom: .6rem;
  color: var(--fg);
}

.gwd-form input[type='text'],
.gwd-form input[type='email'],
.gwd-form input[type='tel'],
.gwd-form input[type='date'],
.gwd-form select,
.gwd-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: .85rem 0;
  appearance: none;
}

.gwd-form select { background-image: none; }
.gwd-form select option { color: var(--ink); background: var(--cream); }

.gwd-form input:focus,
.gwd-form select:focus,
.gwd-form textarea:focus { outline: none; border-bottom-color: var(--fg); }

.gwd-form__actions { margin-top: 2.25rem; }

.gwd-form__errors, .gwd-form .form-errors { color: var(--cream); background: #8c2f1f; padding: .9rem 1.1rem; margin-bottom: 1.5rem; }

.form-messages, .alert { padding: 1rem 1.25rem; border: 1px solid var(--rule); margin-bottom: 2rem; }

.form-honeybear { position: absolute !important; left: -9999px; }

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

.site-foot {
  background: var(--ink);
  color: var(--muted);
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid rgba(247, 243, 240, .14);
}

.site-foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--cream); }

.socials { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.socials a { font-size: .75rem; text-transform: uppercase; letter-spacing: .3em; }

.site-foot__legal { font-size: .8125rem; letter-spacing: .05em; }

/* ---------- plain pages ---------- */

.prose { max-width: 46rem; }
.prose h2 { font-family: var(--serif); font-size: var(--fs-serif); margin: 2.5rem 0 1rem; }
.prose h3 { font-family: var(--serif); font-size: 1.5rem; margin: 2rem 0 .75rem; }
.prose a { color: var(--orange); }

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