/* dennisstever.com — one photograph on paper. */

:root {
  color-scheme: light;
  --paper: #f7f6f3;
  --ink: #1b1b19;
  --quiet: #6f6c65;

  /* The page's vertical budget, named once. The photograph gets whatever is
     left after the margins, the two gaps, the name and the link — worked out
     in real units rather than as a percentage of the row, because a
     percentage height inside a stretched grid item does not reliably resolve
     and the picture silently overflows onto the link. */
  --margin: clamp(1.6rem, 4vh, 3rem);
  --gap: clamp(1.25rem, 3.5vh, 2.5rem);
  --name-height: 1.1rem;
  --link-height: 2.7rem;
  --chrome: calc(2 * var(--margin) + 2 * var(--gap) + var(--name-height) + var(--link-height));
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
 * Three rows: the name, the photograph, the link. The middle row takes
 * whatever is left over, so the photograph is always as large as the screen
 * allows without pushing anything off it.
 *
 * The height is definite rather than a minimum, because the photograph's
 * height is a percentage of the row and a percentage of "at least this tall"
 * resolves to nothing. The middle row is minmax(0, 1fr) rather than 1fr for
 * the same kind of reason: a plain 1fr refuses to shrink below the
 * photograph's own minimum size, which on a short landscape screen would push
 * the link up over the picture. Spacing is row-gap rather than padding on the
 * figure, so the row and the photograph's containing block are the same box.
 */
main {
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  row-gap: var(--gap);
  padding: var(--margin) 1rem;
}

h1 {
  margin: 0;
  font-size: clamp(0.66rem, 1.4vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  /* Tracking adds a trailing space after the last letter; this pulls the word
     back so it sits optically centred rather than measurably centred. */
  text-indent: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  height: var(--name-height);
  line-height: var(--name-height);
}

figure {
  margin: 0;
  width: 100%;
  align-self: stretch;
  min-height: 0;
  display: grid;
  place-items: center;
}

/* The photograph is never cropped. It is sized to the largest it can be while
   staying whole, and the page is built around whatever shape it is. */
img {
  display: block;
  max-width: min(92vw, 1500px);
  max-height: calc(100vh - var(--chrome));
  max-height: calc(100svh - var(--chrome));
  width: auto;
  height: auto;
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.07),
    0 14px 38px -16px rgba(24, 24, 27, 0.30);
}

.instagram {
  display: inline-flex;
  /* Padding, not a small glyph in a small box: the tap target is 44px even
     though the mark is 21px. */
  padding: 0.7rem;
  color: var(--quiet);
  transition: color 220ms ease;
}

.instagram:hover,
.instagram:focus-visible { color: var(--ink); }

.instagram:focus-visible {
  outline: 1px solid var(--quiet);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Portrait screens. A landscape photograph can only ever be a band across a
   tall phone, so rather than stranding the name at the top and the link at the
   bottom of all that empty paper, the three pieces gather into one centred
   group. */
@media (max-aspect-ratio: 1 / 1) {
  main {
    grid-template-rows: auto auto auto;
    align-content: center;
  }

  figure { align-self: center; }

  img { max-height: 70svh; }
}

@media (prefers-reduced-motion: reduce) {
  .instagram { transition: none; }
}