/* Shared by index.html and about.html. */

:root {
  --bg: #faf9f7;
  --fg: #1a1817;
  --muted: #6b6560;
  --rule: #e4dfd8;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#121110; --fg:#f1ede8; --muted:#978f87; --rule:#2e2b28; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 clamp(1rem, 5vw, 4rem) 4rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 1100px;
  margin-inline: auto;
}

a { color: inherit; }

/* ── Masthead + nav ─────────────────────────────────────────── */

header {
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

h1 {
  font: 400 clamp(2rem, 6vw, 3.25rem)/1.1 Palatino, Georgia, serif;
  letter-spacing: .02em;
  margin: 0;
}

/* The name is a link home, but shouldn't look like one. */
h1 a {
  color: inherit;
  text-decoration: none;
}

nav {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

nav a:hover,
nav a[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: currentColor;
}

/* ── Gallery ────────────────────────────────────────────────── */

/* Justified rows, like Flickr or Google Photos: every row is one height,
   each photo keeps its true proportions and takes the width that implies,
   and the row fills edge to edge. Reads 1 2 3 / 4 5 6. Nothing cropped.

   The sizes here are only a fallback for before the script runs (or if it
   doesn't) — the real widths are computed by the script in index.html. */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}

figure {
  margin: 0;
  width: 300px;
}

figure img {
  width: 100%;
  height: 280px;
  object-fit: cover;   /* absorbs sub-pixel rounding; no visible crop once justified */
  display: block;
  transition: opacity .25s;
}

figure a:hover img { opacity: .82; }

/* These rules style the bare text that follows the title (medium, year) —
   uppercase and letterspaced, the same treatment as the nav, so it reads as
   a technical label rather than a sentence. The <b> opts back out below.
   Scoped to `figcaption`, so the lightbox's copy of the same markup (a div)
   keeps normal case. */
figcaption {
  margin-top: .6rem;
  /* One title line plus one detail line. Keeps rows even when a piece has
     no detail line, or a shorter one than its neighbours. */
  min-height: 2.75rem;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

figcaption b {
  font: italic 400 1.0625rem/1.4 Palatino, Georgia, serif;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg);
  display: block;
  margin-bottom: .25rem;
}

/* The long-form statement lives in the caption markup but only ever shows
   in the lightbox — under a grid thumbnail it would wreck the row heights. */
.gallery .statement { display: none; }

/* ── Lightbox ───────────────────────────────────────────────── */

/* Deliberately uses divs, not <figure> — the gallery's figure rules set a
   fixed width and a cropped height, which would fight this. */
/* Flex with align-items:flex-start plus margin:auto on the child, rather
   than centring the container. Centred overflow clips the TOP of tall
   content and makes it unreachable — this centres when it fits and scrolls
   properly when a long statement makes it taller than the screen. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 15, 14, .95);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(1.5rem, 5vw, 4rem);
}

/* Beats .lightbox{display:flex}, which would otherwise override [hidden]. */
.lightbox[hidden] { display: none; }

.lb-stage {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 100%;
}

.lightbox img {
  max-width: 100%;
  /* Capped well under the viewport so the statement has room beneath it. */
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lb-cap {
  margin: 0;
  color: #cfc8c0;
  font-size: .8125rem;
  text-align: center;
  max-width: 34rem;
}

/* Long-form reads better ragged-left than centred. */
.lb-cap .statement {
  text-align: left;
  margin-top: 1.25rem;
  font-size: .9375rem;
  line-height: 1.65;
}

.lb-cap .statement .lede {
  font: italic 400 1.1875rem/1.45 Palatino, Georgia, serif;
  color: #f4efe9;
}

.lb-cap .statement p { margin: 0 0 1rem; }
.lb-cap .statement p:last-child { margin-bottom: 0; }

.lb-cap b {
  font: italic 400 1.0625rem/1.4 Palatino, Georgia, serif;
  color: #f4efe9;
  display: block;
}

/* Fixed, not absolute — the lightbox scrolls now, and absolute buttons
   would scroll off with a long statement. */
.lb-close,
.lb-nav {
  position: fixed;
  background: none;
  border: 0;
  color: #cfc8c0;
  cursor: pointer;
  line-height: 1;
  padding: .75rem;
  transition: color .2s;
}

.lb-close:hover,
.lb-nav:hover { color: #fff; }

.lb-close {
  top: clamp(.5rem, 2vw, 1.5rem);
  right: clamp(.5rem, 2vw, 1.5rem);
  font-size: 2.5rem;
}

.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
}

.lb-prev { left: clamp(.25rem, 1.5vw, 1.5rem); }
.lb-next { right: clamp(.25rem, 1.5vw, 1.5rem); }

/* Only one photo — nothing to page through. */
.lightbox.solo .lb-nav { display: none; }

/* Stops the page behind scrolling while the overlay is up. */
body.lb-open { overflow: hidden; }

/* ── About page ─────────────────────────────────────────────── */

.prose {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.prose .lede {
  font: italic 400 clamp(1.1875rem, 3vw, 1.5rem)/1.45 Palatino, Georgia, serif;
  margin: 0 0 1.75rem;
}

.prose p { margin: 0 0 1.25rem; }

.prose h2 {
  font: 400 1.375rem/1.3 Palatino, Georgia, serif;
  margin: 2.5rem 0 .75rem;
}

.prose img {
  width: 100%;
  height: auto;
  display: block;
  margin: 2rem 0;
}

/* ── Footer ─────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
  font-size: .8125rem;
  color: var(--muted);
  text-align: center;
}

/* The invitation sits above the address rather than inline. Sentence case,
   not the letterspaced uppercase used for the nav and caption labels — that
   treatment works on a single word and turns a full sentence into shouting. */
footer span {
  display: block;
  margin-bottom: .45rem;
}

/* Full contrast against the muted footer — it's the one thing here anyone
   is meant to act on. */
footer a { color: var(--fg); }