@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400&display=swap');
:root {
  --m: clamp(16px, 2vw, 32px);
  /* Swap in your own font: add an @font-face below and put its name first. */
  
  --font: "Inter Tight", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  
}


/* No transitions or animations anywhere. */
*, *::before, *::after { box-sizing: border-box; transition: none !important; animation: none !important; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #222; font: 16px/1.4 var(--font); }
body.lock { overflow: hidden; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid #000; outline-offset: 3px; }

/* Top bar */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  padding: var(--m); background: #fff;
}
.bar .name { justify-self: start; margin: 0; font: inherit; }
.bar .role { justify-self: center; }
.bar .more { justify-self: end; }

/* Grid: images keep their aspect ratio, rows align to the top edge */
.grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--m); row-gap: clamp(48px, 6vw, 120px); align-items: start;
  padding: clamp(96px, 8vw, 160px) var(--m) clamp(48px, 6vw, 120px);
}
@media (max-width: 1400px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item { display: block; }
.item img { display: block; width: 100%; height: auto; }

/* Right sidebar, only visible after clicking "More" */
.menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 20;
  width: min(420px, 100vw); overflow: auto; padding: var(--m);
  background: #fff; /*border-left: 1px solid #000;*/
}
.menu-head { display: flex; justify-content: flex-end; }
.menu .about { margin-top: 64px; }
.menu .about p { margin: 0 0 1em; }
.menu .contact { margin-top: 48px; }
.menu .contact p { margin: 0; }
.menu .lbl { color: #767676; margin-bottom: 8px !important; }

/* Fullscreen image viewer */
.viewer {
  position: fixed; inset: 0; z-index: 30; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.viewer img { display: block; max-width: calc(100vw - 2 * var(--m)); max-height: calc(100vh - 128px); width: auto; height: auto; }
.v-cap, .v-count, .v-close { position: absolute; }
.v-cap { left: var(--m); bottom: var(--m); }
.v-count { right: var(--m); bottom: var(--m); }
.v-close { right: var(--m); top: var(--m); }

/* Phones: name + More on one line, "Photography" beneath the name */
.bar .name, .bar .role, .bar .more { white-space: nowrap; }
@media (max-width: 560px) {
  .bar { grid-template-columns: 1fr auto; row-gap: 0; }
  .bar .role { grid-column: 1; grid-row: 2; justify-self: start; color: #767676; }
  .bar .more { grid-column: 2; grid-row: 1; }
  .grid { padding-top: 112px; }
}
button, a { -webkit-tap-highlight-color: transparent; }