:root {
  /* Shell: the photo's fabric (#AAA19C) lifted to ~92% lightness */
  --shell: #EAE2DB;
  --ink: #000;
  --gutter: clamp(16px, 3.5vw, 56px);
  --logo-h: clamp(88px, 10vw, 150px);
  --icon: 22px;
  --photo-ratio: 3979 / 3162;
  --brand-min: 15rem;

  --meta-size: 0.875rem;
  --meta-line: 1.3rem;
  --foot-size: 0.6875rem;
  --foot-line: 1rem;
  --foot-pad: calc(var(--gutter) * 0.35);

  /* Everything that isn't photo: top gutter, gap to rule, rule, copyright padding, copyright */
  --chrome-h: calc(var(--gutter) * 3 + var(--foot-pad) + 1px + var(--foot-line));
  --photo-max-h: max(240px, calc(100vh - var(--chrome-h)));
  /* Photo column: whatever is left after the brand column, unless that would run taller than the screen */
  --photo-w: min(100vw - 3 * var(--gutter) - var(--brand-min), var(--photo-max-h) * var(--photo-ratio));
}

@supports (height: 100svh) {
  :root {
    --photo-max-h: max(240px, calc(100svh - var(--chrome-h)));
  }
}

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

html {
  background: var(--shell);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr var(--photo-w);
  grid-template-rows: 1fr auto;
  column-gap: var(--gutter);
  padding: var(--gutter) var(--gutter) 0;
  background: var(--shell);
  color: var(--ink);
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.5;
}

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

/* Images can't invert on selection, so keep them out of it */
.logo,
.contact,
.hero {
  -webkit-user-select: none;
  user-select: none;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 6px;
}

/* Left column: logo and details */

.logo {
  display: block;
  width: max-content;
  line-height: 0;
}

.logo img {
  display: block;
  height: var(--logo-h);
  width: auto;
}

.meta {
  margin: 0;
  font-size: var(--meta-size);
  line-height: var(--meta-line);
  letter-spacing: 0.01em;
}

.logo + .meta {
  margin-top: clamp(3.5rem, 8vw, 7rem);
}

.meta + .meta {
  margin-top: var(--meta-line);
}

.contact {
  display: flex;
  gap: 14px;
  margin-top: 1.5rem;
}

.contact a {
  display: block;
  line-height: 0;
}

.contact svg {
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.contact .dot {
  fill: var(--ink);
  stroke: none;
}

/* Right column: photo */

.hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--photo-ratio);
}

/* Across both columns: rule and copyright */

.colophon {
  grid-column: 1 / -1;
  margin-top: var(--gutter);
  padding: var(--foot-pad) 0 var(--gutter);
  border-top: 1px solid var(--ink);
  text-align: center;
}

.colophon p {
  margin: 0;
  font-size: var(--foot-size);
  line-height: var(--foot-line);
  letter-spacing: 0.01em;
}

/* Narrow screens: stack into one column */

@media (max-width: 759px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .brand {
    margin-bottom: 4rem;
  }

  /* Centre 60% of the photo's width, full height */
  .hero {
    aspect-ratio: calc(3979 * 0.6) / 3162;
    object-fit: cover;
    object-position: center;
  }
}