:root {
  --paper: #faf7f2;
  --ink: #1f1c19;
  --muted: #6f685f;
  --current: #957234; /* the open page in the nav */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pad: clamp(16px, 4.9vw, 64px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--helvetica);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* every button-like control is flat: no gradient, border, outline or shadow */
a, button { -webkit-tap-highlight-color: transparent; outline: none; }
button {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.instant *, .instant *::before, .instant *::after { transition: none !important; }

/* ================= the scene: landscape, the two animated figures, the title and nav ================= */

/* behind everything: the dark landscape on phones, the light one on wider screens */
.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 87% 50%; /* the crop of the phone mock-up */
  transition: opacity 0.6s var(--ease);
}
@media (min-width: 700px) {
  .bg { object-position: 50% 50%; }
}

/* The scene as one picture, centred on the screen with the nav at its middle: everything inside is placed
   in % of it, so it scales as a whole. Wide screens use the desktop proportions (2000 x 1390), tall ones the
   phone's (924 x 2000). --cw is its width, and the text follows it (never below 14px: on smaller screens the
   picture stays that big and runs off the edges rather than crowding the nav). */
.comp {
  --cw: max(848px, min(100vw, 100vh * 2000 / 1390));
  --fs: calc(var(--cw) * 0.0165);
  --lh: 1.3;
  position: fixed;
  z-index: 2;
  left: calc(50% - var(--cw) / 2);
  top: calc(50% - var(--cw) * 1390 / 2000 / 2);
  width: var(--cw);
  aspect-ratio: 2000 / 1390;
  transform-origin: 0 0;
}
@supports (height: 1svh) {
  .comp { --cw: max(848px, min(100vw, 100svh * 2000 / 1390)); }
}
@media (max-aspect-ratio: 1/1) {
  .home .comp {
    --cw: max(268px, min(100vw, 100vh * 924 / 2000));
    --fs: calc(var(--cw) * 0.0522);
    top: calc(50% - var(--cw) * 2000 / 924 / 2);
    aspect-ratio: 924 / 2000;
  }
  @supports (height: 1svh) {
    .home .comp { --cw: max(268px, min(100vw, 100svh * 924 / 2000)); }
  }
}

/* each figure is its whole video frame, placed around the nav; js/figures.js puts the frames inside */
.fig {
  position: absolute;
  display: block;
  aspect-ratio: 2368 / 1644;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.fig img { position: absolute; height: auto; max-width: none; visibility: hidden; }
.fig img.on { visibility: visible; }
/* faded in once every frame has loaded (at once when they already have) */
.fig > * { opacity: 0; transition: opacity 0.6s var(--ease); }
.fig.ready > * { opacity: 1; }
.fig-top { left: -5.93%; top: 0.193%; width: 138.11%; }
.fig-bottom { left: 1.535%; top: 0.144%; width: 100.31%; }
@media (max-aspect-ratio: 1/1) {
  .home .fig-top { left: -29.004%; top: 17%; width: 199.9%; }
  .home .fig-bottom { left: -4.978%; top: 40.5%; width: 115.32%; }
}

.site-title,
.menu {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  margin: 0;
  color: #fff;
  font-size: var(--fs);
  font-weight: 400;
  line-height: var(--lh);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.site-title { transition: opacity 0.45s var(--ease); }

/* the nav takes the title's place, centred on the screen */
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}
.show-nav .site-title { opacity: 0; }
.show-nav .menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease) 0.25s, visibility 0s;
}

.menu a { text-decoration: none; transition: color 0.4s var(--ease); }
.menu .spaced { margin-top: calc(var(--lh) * 1em); } /* about, after a blank line */
.menu .home { display: none; }
@media (hover: hover) {
  .menu a:hover { color: var(--current); }
}
.menu a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

/* ================= landing ================= */

.home,
.home body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.home body { background-color: #3b3d3c; transition: background-color 0.6s var(--ease); }
@media (min-width: 700px) {
  .home body { background-color: #c4c7c0; }
}

/* choosing a page: the landscape and the lower figure give way, the nav turns to the pages' colours */
.leaving body { background-color: var(--paper); }
.leaving .bg,
.leaving .fig-bottom { opacity: 0; }
.leaving .menu a { color: var(--ink); }
.leaving .menu a.current { color: var(--current); }
/* phones and tall screens: the scene fades instead of sliding into a sidebar */
.leaving.fade .comp { opacity: 0; transition: opacity 0.35s var(--ease); }

/* ================= pages ================= */

/* wider screens: the desktop scene slid left into a sidebar, the upper figure leading home */
.page { --pw: max(848px, min(100vw * 2000 / 1400, 100vh * 2000 / 1390)); }
@supports (height: 1svh) {
  .page { --pw: max(848px, min(100vw * 2000 / 1400, 100svh * 2000 / 1390)); }
}
.page .comp { --cw: var(--pw); left: calc(var(--pw) * -0.305); }
.page .bg,
.page .fig-bottom { opacity: 0; }
.page .menu { opacity: 1; visibility: visible; transition: none; }
.page .menu a { color: var(--ink); }
.page .menu a[aria-current='page'] { color: var(--current); }
.page .fig-top img.on { pointer-events: auto; cursor: pointer; }

/* the content fills the rest of the screen, so the footer rests on its bottom edge */
.page body { display: flex; flex-direction: column; min-height: 100vh; }
.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin-left: calc(var(--pw) * 0.236 + clamp(28px, 4vw, 72px));
  padding-right: var(--pad);
  animation: rise 0.6s var(--ease-out) 0.1s backwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* going home: the content clears, the scene slides back to the middle and the landscape returns */
.to-home .content { opacity: 0; transition: opacity 0.3s var(--ease); }
.to-home body { background-color: #c4c7c0; transition: background-color 0.6s var(--ease); }
.to-home .bg,
.to-home .fig-bottom { opacity: 1; }
.to-home .menu a,
.to-home .menu a[aria-current='page'] { color: #fff; }

/* phones: a slim row of links at the top, no scene */
@media (max-width: 699px) {
  .page .comp {
    position: static;
    width: auto;
    aspect-ratio: auto;
    padding: calc(var(--safe-t) + 18px) var(--pad) 0;
  }
  .page .fig,
  .page .bg { display: none; }
  .page .menu {
    position: static;
    transform: none;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
  }
  .page .menu .spaced { margin-top: 0; }
  .page .menu .home {
    display: block;
    flex-basis: 100%;
    margin-bottom: 2px;
    font-size: 13px;
    color: var(--muted);
  }
  .content { margin-left: 0; padding-right: 0; }
}

/* ---------- footer: the contact details, on every page but the landing ---------- */

.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: auto;
  padding: 48px 0 calc(22px + var(--safe-b));
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.site-foot a { text-decoration: none; transition: color 0.3s var(--ease); }
.site-foot a:hover,
.site-foot a:focus-visible { color: var(--current); }
@media (max-width: 699px) {
  .site-foot { padding-left: var(--pad); padding-right: var(--pad); }
}

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

.gallery {
  padding-top: clamp(40px, 9vh, 110px);
  overflow-x: hidden;
  overflow-x: clip;
}
.g-rows { width: min(100%, 1180px); margin: 0 auto; }
@media (max-width: 699px) {
  .gallery { padding-top: 26px; }
}

.row { display: flex; align-items: flex-start; }
.cell { flex: none; min-width: 0; }
.tile { display: block; cursor: zoom-in; }
.tile img { width: 100%; height: auto; transform-origin: 50% 50%; }
.stack .tile + .tile { margin-top: clamp(6px, 1.4vw, 16px); }
@media (hover: hover) {
  .tile img { transition: opacity 0.25s; }
  .tile:hover img { opacity: 0.88; }
}

.noscript { color: var(--muted); padding-top: 60px; }

/* ---------- pages still to come ---------- */

.soon {
  margin: 0;
  padding-top: clamp(40px, 12vh, 140px);
  font-size: 16px;
  color: var(--muted);
}
@media (max-width: 699px) {
  .soon { padding: 26px var(--pad) 0; }
}

/* ---------- about: the photo ---------- */

.about { padding-top: clamp(40px, 9vh, 110px); }
.about-photo { width: 100%; max-width: 1100px; height: auto; }
@media (max-width: 699px) {
  .about { padding-top: 26px; }
}

/* ---------- lightbox: the only place names appear ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--paper);
  padding: calc(64px + var(--safe-t)) var(--pad) calc(92px + var(--safe-b));
}
.lightbox[hidden] { display: none; }

.lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}
.lb-img {
  max-width: min(92vw, 1400px);
  max-height: calc(100vh - 220px);
  max-height: calc(100svh - 220px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lb-cap { text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
.lb-title { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; font-weight: 400; line-height: 1.2; }

.lb-btn {
  position: absolute;
  padding: 10px 16px;
  font-size: 16px;
  line-height: 1;
  background: var(--paper);
  color: var(--ink);
  transition: color 0.2s;
}
.lb-btn:hover, .lb-btn:focus-visible { color: var(--current); }
.lb-close { top: calc(12px + var(--safe-t)); right: calc(var(--pad) - 16px); }
.lb-prev, .lb-next { bottom: calc(24px + var(--safe-b)); }
.lb-prev { left: calc(var(--pad) - 16px); }
.lb-next { right: calc(var(--pad) - 16px); }

@media (prefers-reduced-motion: reduce) {
  .content { animation: none; }
}