/* ---------------------------------------------------------------
   Design system — see CLAUDE.md. Everything derives from these.
   --------------------------------------------------------------- */
:root {
  --bg: #0a0a0a;          /* near-black ground; vignettes dissolve into it */
  --text: #b9b9b9;        /* museum wall text: quiet but unambiguous */
  --text-dim: #7d7d7d;    /* secondary: counters, footer, chevrons at rest */
  --u: 8px;               /* the single spacing unit */

  /* One typeface, three sizes */
  --font: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size-label: 0.8125rem;    /* 13px — labels, titles, counters */
  --size-about: 0.9375rem;    /* 15px — About text */
  --size-body: 1.0625rem;     /* 17px — header nav */
  --size-wordmark: 1.25rem;   /* 20px — the wordmark alone (initials;
                                 the smaller capitals land at 17px) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-label);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a { color: var(--text); text-decoration: none; }
a:focus-visible { outline: 1px solid var(--text-dim); outline-offset: 4px; }

/* Labels: initial caps, quiet tracking — nav links, gallery titles, footer */
.label {
  font-size: var(--size-label);
  letter-spacing: 0.03em;
}

/* The one formal element: the wordmark keeps letterspaced caps,
   with full-size initials over slightly smaller capitals */
.wordmark {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--size-wordmark);
}
.wordmark .wm-small { font-size: 0.85em; }

/* Header nav reads at body size so About-page text never outweighs it.
   Scoped to links and the nav cell — never bare `.site-header .label`,
   which would outrank the span.wordmark size above and shrink it. */
.site-header a.label,
.site-header nav .label { font-size: var(--size-body); }

/* ---------------------------------------------------------------
   Header: Home left, static wordmark centered, About right.
   --------------------------------------------------------------- */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  padding: calc(var(--u) * 3);
}

.site-header > :first-child { justify-self: start; }
.site-header nav { justify-self: end; }

@media (min-width: 900px) {
  .site-header { padding: calc(var(--u) * 4) calc(var(--u) * 6); }
}

/* ---------------------------------------------------------------
   Homepage: tile grid. One label position: below the tile, left.
   --------------------------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 900px) {
  .tile-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--u) * 6);
    padding: calc(var(--u) * 6);
  }
}

.tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.tile .label {
  display: block;
  margin-top: calc(var(--u) * 1.5);
  color: var(--text);
}

/* Phones held upright: the homepage is a fixed six-tile index — it fills
   the screen exactly and does not scroll, and the grid sits close under
   the wordmark. Tiles give up strict squareness on short screens rather
   than overflow past Safari's bottom toolbar. Landscape falls back to
   normal scrolling. */
@media (max-width: 899px) and (orientation: portrait) {
  body.home-page { height: 100dvh; overflow: hidden; }
  body.home-page .tile-grid {
    flex: 1;
    min-height: 0;
    grid-template-rows: repeat(3, 1fr);
    padding-top: var(--u);
  }
  body.home-page .tile {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.home-page .tile img {
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
  }
}

/* ---------------------------------------------------------------
   Footer: quiet home for the Archive link
   --------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  padding: calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 4);
  text-align: center;
  color: var(--text-dim);
}

.site-footer a { color: var(--text-dim); }

/* ---------------------------------------------------------------
   Gallery sequence view: one image at a time on the black ground
   --------------------------------------------------------------- */
.sequence {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sequence-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 2);
  min-height: 60vh;
}

.sequence-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--u) * 2); /* keeps photographs off the screen edge */
  object-fit: contain;
  /* slightly above center: a photograph hung, not a file centered */
  object-position: center 40%;
  opacity: 0;
  transition: opacity 400ms ease;
}

@media (min-width: 900px) {
  .sequence-stage img { padding: 0 calc(var(--u) * 10); }
}

.sequence-stage img.is-visible { opacity: 1; }

/* Crossfade layers: each holds one photograph — or two, shown as a spread
   on desktop-class screens. The layer fades as a unit; scripts set each
   photograph's exact size and position (equal surface area). */
.sequence-stage .layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.sequence-stage .layer.is-visible { opacity: 1; }
.sequence-stage .layer img {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  padding: 0;
  opacity: 1;
  transition: none;
}
.about-sequence .sequence-stage .layer { transition-duration: 500ms; }

/* Chevrons: quiet, but visible — the audit's rule #6 */
.chev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 28px;
  line-height: 1;
  padding: calc(var(--u) * 2);
  cursor: pointer;
  z-index: 2;
}

.chev:hover, .chev:focus-visible { color: var(--text); }
.chev-prev { left: calc(var(--u) * 1); }
.chev-next { right: calc(var(--u) * 1); }

@media (min-width: 900px) {
  .chev { font-size: 34px; }
  .chev-prev { left: calc(var(--u) * 3); }
  .chev-next { right: calc(var(--u) * 3); }
}

/* One-time cue on portrait phones; gallery.js shows it once, then never again */
.rotate-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 3);
  text-align: center;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}

.rotate-hint.is-visible { opacity: 1; }

/* Title card beneath the photograph: "Magnetic North · 7 / 23" */
.sequence-counter {
  text-align: center;
  color: var(--text-dim);
  padding: calc(var(--u) * 2) 0 calc(var(--u) * 3);
  font-variant-numeric: tabular-nums;
}

/* About is one screen: statement above, self-portraits filling the rest.
   The images are square, so the layout stays stable as they change. */
body.about-page { height: 100vh; height: 100dvh; }
body.about-page .about { padding: calc(var(--u) * 2) calc(var(--u) * 3); }
body.about-page .about .contact { margin-top: calc(var(--u) * 3); }
body.about-page .site-footer { display: none; }

.about-sequence { flex: 1; min-height: 200px; }
.about-sequence .sequence-stage { min-height: 0; }
/* About photograph: undersized (the photograph accompanies the text, not
   vice versa) and hung high in its area, close under the statement, so the
   text reads centered between the wordmark and the photograph. The
   slideshow (two-plus photos) gets the same treatment from gallery.js. */
.about-sequence .sequence-stage img {
  transition-duration: 500ms;
  width: 85%;
  height: 85%;
  top: 2.25%;   /* 0.15 of the 15% slack */
  bottom: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 900px) {
  .about-sequence .sequence-stage img {
    width: 68%;
    height: 68%;
    top: 4.8%;  /* 0.15 of the 32% slack */
  }
}

/* ---------------------------------------------------------------
   About
   --------------------------------------------------------------- */
.about {
  max-width: 34em;
  margin: 0 auto;
  padding: calc(var(--u) * 6) calc(var(--u) * 3);
  font-size: var(--size-about);
  color: var(--text-dim);  /* whole statement in the quieter gray */
}

/* Desktop: the statement floats centered between the wordmark and the
   photograph, which keeps a steady band of the screen. */
@media (min-width: 900px) {
  body.about-page .about {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.about-page .about-sequence { flex: 0 1 58vh; }
}

.about p + p { margin-top: calc(var(--u) * 3); }

.about .contact { margin-top: calc(var(--u) * 6); color: var(--text-dim); }
.about .contact a { color: var(--text); }