@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/static/fonts/jost/jost-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/jost/jost-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/jost/jost-latin-500.woff2") format("woff2"); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/inter/inter-latin-700.woff2") format("woff2"); }

:root { --accent: #00a9fe;
  --font-geometric: "Jost", "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
/* Reserve the scrollbar's space so the content width never changes when a vertical
   scrollbar appears. Without this, the JS-justified galleries are sized while the page
   is still short (no scrollbar); once their heights make the page scroll, the scrollbar
   steals ~15px and the pre-sized rows overflow and wrap ("two photos, a gap, then one").
   No-op for overlay scrollbars (which don't take space and don't trigger the bug). */
html { scrollbar-gutter: stable; }
body { margin: 0; font-family: var(--font-body); color: #111; }
a { color: inherit; text-decoration: none; }

.site-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 20px; flex-wrap: wrap; }
.site-name svg { height: 18px; width: auto; fill: #111; }
/* flex + gap (not margins) so a link wrapping to a second line stays flush-left */
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-nav a { color: var(--accent); font-weight: 300; font-family: var(--font-geometric); }

/* Cover grid (category page) */
.cover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cover { position: relative; display: block; }
.cover img { display: block; width: 100%; object-fit: cover; aspect-ratio: 4/3; }
.cover-title { position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 20px;
  display: flex; align-items: flex-start;
  font-family: var(--font-geometric); font-variant: small-caps; font-weight: 500; letter-spacing: .03em;
  color: #111; background: rgba(255, 255, 255, .75); transition: color .15s ease; }
.cover:hover .cover-title { color: var(--accent); }
.cover-grid[data-shuffle] { visibility: hidden; }   /* revealed by JS after shuffling (no-JS: see <noscript> in base.html) */
@media (max-width: 900px) { .cover-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cover-grid { grid-template-columns: 1fr; } }

/* Project & page hero */
.hero { position: relative; }
.hero img { display: block; width: 100%; max-height: 90vh; object-fit: cover; }
.hero-title { position: absolute; left: 0; bottom: 0; margin: 0; width: 100%; padding: 12px 16px;
  font-family: var(--font-geometric); font-variant: small-caps; font-weight: 500; letter-spacing: .03em; font-size: 1.5rem;
  color: #111; background: rgba(255, 255, 255, .75); }
.hero-title small { font-weight: 400; opacity: .65; }
.summary { max-width: 640px; margin: 28px auto; padding: 0 20px; line-height: 1.7; }
.further-reading-title { max-width: 640px; margin: 28px auto 0; padding: 0 20px;
  font-family: var(--font-geometric); font-variant: small-caps; font-weight: 700;
  letter-spacing: .03em; font-size: 1.1rem; }
.docs { max-width: 640px; margin: 6px auto 28px; padding: 0 20px;
  list-style-position: inside; }   /* bullet sits at the content left margin, not hanging left of it */
.docs a { color: var(--accent); }

/* Single pages (statement, contact) — hero (optional) + readable prose column */
.page-body { max-width: 680px; margin: 48px auto; padding: 0 20px; line-height: 1.75; }
.page-body h1 { font-family: var(--font-geometric); font-variant: small-caps; font-weight: 500;
  letter-spacing: .03em; font-size: 2rem; margin: 0 0 .7em; }
.page-body p { margin: 0 0 1.2em; }
.page-body a { color: var(--accent); }
.gallery { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; }
.gallery-item { flex: 1 1 280px; max-width: 100%; overflow: hidden; }   /* JS justifies into rows */
.gallery-item picture, .gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Lightbox */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none;
  z-index: 1000; overflow: hidden; cursor: zoom-out; }
.lightbox-overlay.open { display: block; }
/* Swipeable track of three slides (prev / current / next); JS translates it. */
.lightbox-track { display: flex; height: 100%; will-change: transform; }
.lightbox-slide { flex: 0 0 100%; height: 100%; position: relative;
  display: flex; align-items: center; justify-content: center; }
.lightbox-slide img { max-width: 95vw; max-height: 95vh; cursor: pointer;   /* click = next */
  opacity: 0; transition: opacity .2s ease; }
.lightbox-slide.loaded img { opacity: 1; }
.lightbox-spinner { position: absolute; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: lb-spin .8s linear infinite; }
.lightbox-slide.loaded .lightbox-spinner { display: none; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lightbox-close { position: absolute; top: 12px; left: 16px; z-index: 1;
  background: none; border: 0; color: #fff; font-size: 34px; line-height: 1;
  padding: 4px 10px; cursor: pointer; font-family: var(--font-geometric); }
.lightbox-close:hover { color: var(--accent); }