/* gwd-photo-editorial
   A fixed sidebar plus a narrow content column is what lets a two-job portfolio
   read as deliberate. Nothing here scales with the number of photographs. */

:root {
  --ground: #ffffff;
  --ink: #050505;
  --mute: #969696;
  --accent: #bc8f8f;
  --rule: rgba(5, 5, 5, 0.15);

  --sidebar-w: 240px;
  --content-x: 305px;
  --content-max: 1070px;
  --gutter: 5px;

  --serif-display: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --serif-body: 'EB Garamond', Georgia, 'Times New Roman', serif;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 17.6px;
  line-height: 1.65;
  font-weight: 400;
}

img { max-width: 100%; }

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

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

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ground);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus { left: 0; }

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

/* ---------- sidebar ---------- */

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  padding: 52px 34px 40px 40px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  background: var(--ground);
  z-index: 50;
  overflow: hidden;
}

.wordmark {
  font-family: var(--serif-display);
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: 0.14em;
  color: var(--ink);
  display: block;
  margin-right: -0.14em; /* tracking adds a trailing space that breaks the left rag */
}

.wordmark__sub {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--mute);
}

.nav-primary {
  margin-top: 46px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.nav-primary a {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.2s ease;
}

.nav-primary a:hover,
.nav-primary a:focus-visible,
.nav-primary a.is-active { color: var(--ink); }

.nav-secondary {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.nav-secondary a {
  font-style: italic;
  font-size: 16px;
  color: var(--mute);
  transition: color 0.2s ease;
}

.nav-secondary a:hover,
.nav-secondary a:focus-visible { color: var(--accent); }

/* ---------- content column ---------- */

.content {
  margin-left: var(--content-x);
  max-width: var(--content-max);
  padding: 0 40px 0 0;
}

.section { padding: 96px 0; border-top: 1px solid var(--rule); }
.content > .section:first-child,
.content > article.section:first-child { border-top: 0; }

.section__head { margin-bottom: 40px; }

.section__title {
  font-family: var(--serif-display);
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section__intro {
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  max-width: 46ch;
  margin-top: 14px;
}

/* ---------- split hero, grafted from taylorandporter ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 64px 0;
}

/* The rule belongs to the section, never to a column. As a border it would stop
   at whichever half is shorter the moment the two stop matching. */
.hero::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}

.hero__figure {
  padding-right: 56px;
  margin: 0;
}

.hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* A 4:5 frame at half the page is taller than a laptop viewport, which pushed the
     photograph below the fold and left the first screen mostly empty white. Capping it
     keeps the whole split hero above the fold, which is the only reason it exists. */
  max-height: calc(100svh - 160px);
}

.hero__body { padding-left: 56px; }

.hero__mark {
  font-family: var(--serif-display);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.16;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
}

.hero__tagline {
  margin-top: 26px;
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 32ch;
}

.hero__cue {
  margin-top: 34px;
  display: inline-block;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero__cue:hover,
.hero__cue:focus-visible { color: var(--ink); border-color: var(--accent); }

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

.about {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: start;
}

.about__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about__name {
  font-family: var(--serif-display);
  font-size: 28px;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
}

.about__region {
  margin-top: 10px;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.about__body {
  margin-top: 26px;
  max-width: 58ch;
}

.about__body > p:first-child { font-style: italic; }

/* ---------- photo grid, mixed rows ---------- */

.photogrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
}

.cell { margin: 0; }

.cell a,
.cell figure { display: block; margin: 0; }

.cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(5, 5, 5, 0.04);
  transition: opacity 0.25s ease;
}

.cell a:hover img,
.cell a:focus-visible img { opacity: 0.82; }

.cell--full  { grid-column: span 6; aspect-ratio: 3 / 2; }
.cell--half  { grid-column: span 3; aspect-ratio: 4 / 5; }
.cell--third { grid-column: span 2; aspect-ratio: 3 / 2; }

.cell--full a, .cell--half a, .cell--third a,
.cell--full figure, .cell--half figure, .cell--third figure { height: 100%; }

/* ---------- galleries index ---------- */

.covers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 40px;
}

.cover { display: block; }

.cover__frame {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.cover__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease, opacity 0.25s ease;
}

.cover:hover .cover__frame img { transform: scale(1.03); }

.cover__meta { display: block; margin-top: 18px; }

.cover__title {
  display: block;
  font-family: var(--serif-display);
  font-size: 21px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
}

.cover__sub {
  display: block;
  margin-top: 7px;
  font-style: italic;
  font-size: 16px;
  color: var(--mute);
}

.cover__count {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.cover:hover .cover__count { color: var(--accent); }

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

.job__head {
  max-width: 60ch;
  margin-bottom: 44px;
}

.job__title {
  font-family: var(--serif-display);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-right: -0.12em;
}

.job__meta {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.job__meta span + span::before {
  content: '\00b7';
  margin: 0 10px;
  color: var(--rule);
}

.job__intro {
  margin-top: 22px;
  font-style: italic;
  font-size: 19px;
}

.job__nav {
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.job__nav a:hover, .job__nav a:focus-visible { color: var(--accent); }

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

.enquiry {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 32px;
  max-width: 640px;
}

.enquiry .field--wide { grid-column: 1 / -1; }

.enquiry label em { font-style: italic; text-transform: none; letter-spacing: 0; }

.enquiry label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 8px;
}

.enquiry input,
.enquiry select,
.enquiry textarea {
  width: 100%;
  font-family: var(--serif-body);
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 7px 0;
  border-radius: 0;
}

.enquiry select { appearance: none; }

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

.enquiry .honey { position: absolute; left: -9999px; }

.enquiry button {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--serif-body);
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 14px 34px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.enquiry button:hover { color: var(--accent); border-color: var(--accent); }

.form-message {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  font-style: italic;
  margin-bottom: 28px;
}

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

.footer {
  border-top: 1px solid var(--rule);
  padding: 34px 0 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.footer__socials { display: flex; gap: 20px; }
.footer__socials a:hover, .footer__socials a:focus-visible { color: var(--accent); }

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

.lb {
  position: fixed;
  inset: 0;
  background: var(--ground);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 72px;
}

.lb[hidden] { display: none; }

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

.lb__cap {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  padding: 0 72px;
}

.lb__btn {
  position: absolute;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 26px;
  line-height: 1;
  padding: 14px;
}

.lb__btn:hover { color: var(--accent); }
.lb__close { top: 14px; right: 18px; font-size: 30px; }
.lb__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 8px; top: 50%; transform: translateY(-50%); }

.lb__count {
  position: absolute;
  top: 20px; left: 24px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--mute);
}

/* ---------- narrow ---------- */

@media (max-width: 1100px) {
  :root { --sidebar-w: 200px; --content-x: 244px; }
  .sidebar { padding: 40px 24px 32px 28px; }
  .wordmark { font-size: 25px; }
}

@media (max-width: 860px) {
  .sidebar {
    position: static;
    width: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 32px 20px 24px;
    overflow: visible;
  }

  .nav-primary {
    margin-top: 24px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 22px;
  }

  .nav-secondary {
    margin-top: 16px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 0;
  }

  .content {
    margin-left: 0;
    max-width: none;
    padding: 0 20px;
  }

  .section { padding: 56px 0; }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 40px 0 0;
    gap: 32px;
  }

  .hero::after { display: none; }
  .hero__figure { padding-right: 0; }
  .hero__body { padding-left: 0; }

  .about { grid-template-columns: 1fr; gap: 28px; }
  .about__portrait { max-width: 260px; }

  .photogrid { grid-template-columns: repeat(2, 1fr); }
  .cell--full  { grid-column: span 2; }
  .cell--half  { grid-column: span 1; }
  .cell--third { grid-column: span 1; aspect-ratio: 4 / 5; }

  .covers { grid-template-columns: 1fr; gap: 40px; }
  .cover__frame { aspect-ratio: 3 / 2; }

  .enquiry { grid-template-columns: 1fr; gap: 22px; }

  .lb { padding: 56px 12px 64px; }
  .lb__cap { padding: 0 20px; }
}

@media (max-width: 420px) {
  body { font-size: 17px; }
  .wordmark { font-size: 22px; }
  .hero__mark { font-size: 27px; }
  .section { padding: 44px 0; }
}