/* ── absrd.xyz ──────────────────────────────────────────────────────────
   Cargo-style layout: a fixed index column on the left, images on the right.

   Every value that the admin Design panel can change is read from a CSS
   custom property. The fallbacks below are the shipped defaults, so this
   stylesheet renders correctly on its own even if design.json is missing.
   ------------------------------------------------------------------- */

:root {
  --fg: #1a1a1a;
  --bg: #f2f2f0;          /* warm off-white, like the reference */
  --muted: #7a7a78;
  --accent: #e8291c;      /* current-page red */
  --rule: #1a1a1a;

  --sidebar-w: 26rem;
  --gutter: 2rem;         /* sidebar padding */
  --content-pad: 3rem;
  --content-max: none;
  --content-align: 0 auto 0 0;
  --text-align: left;

  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Courier New", monospace;

  /* gallery */
  --columns: 1;
  --img-gap: 1.75rem;
  --row-gap: 4.5rem;
  --cover-min: 18rem;
  --single-max: 68rem;

  /* type styles */
  --site-title-family: var(--sans);
  --site-title-size: 1.65rem;
  --site-title-line: 1.32;
  --site-title-weight: 400;
  --site-title-spacing: -0.015em;
  --site-title-color: var(--fg);

  --nav-heading-family: var(--sans);
  --nav-heading-size: 1.5rem;
  --nav-heading-line: 1.32;
  --nav-heading-weight: 400;
  --nav-heading-spacing: -0.015em;
  --nav-heading-color: var(--fg);

  --nav-link-family: var(--sans);
  --nav-link-size: 1rem;
  --nav-link-line: 1.65;
  --nav-link-weight: 400;
  --nav-link-spacing: 0em;
  --nav-link-color: var(--fg);

  --project-title-family: var(--sans);
  --project-title-size: 1.5rem;
  --project-title-line: 1.32;
  --project-title-weight: 400;
  --project-title-spacing: -0.015em;
  --project-title-color: var(--fg);

  --body-family: var(--sans);
  --body-size: 1rem;
  --body-line: 1.5;
  --body-weight: 400;
  --body-spacing: 0em;
  --body-color: var(--fg);

  --caption-family: var(--mono);
  --caption-size: 0.8rem;
  --caption-line: 1.4;
  --caption-weight: 400;
  --caption-spacing: -0.01em;
  --caption-color: var(--fg);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.32;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--fg); color: var(--bg); padding: .5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ── sidebar index ─────────────────────────────────────────────────── */

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  padding: 2.5rem var(--gutter) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-title {
  display: block;
  font-family: var(--site-title-family);
  font-size: var(--site-title-size);
  line-height: var(--site-title-line);
  font-weight: var(--site-title-weight);
  letter-spacing: var(--site-title-spacing);
  color: var(--site-title-color);
  margin-bottom: 2rem;
}

/* The hairline above each group heading, and above a bare top-level list */
.nav-group,
.nav > .nav-list {
  border-top: 1px solid var(--rule);
  padding-top: .5rem;
  margin-bottom: 1.6rem;
}

/* A nested group inside a group: heading only, no second rule */
.nav-group .nav-group { border-top: 0; padding-top: 0; margin-bottom: 1rem; }

.nav-heading a:hover,
.nav-heading a.is-current { color: var(--accent); }

.nav-heading {
  font-family: var(--nav-heading-family);
  font-size: var(--nav-heading-size);
  line-height: var(--nav-heading-line);
  font-weight: var(--nav-heading-weight);
  letter-spacing: var(--nav-heading-spacing);
  color: var(--nav-heading-color);
  margin: 0 0 .35rem;
}

.nav-list { list-style: none; margin: 0; padding: 0; }

.nav-list a {
  display: block;
  font-family: var(--nav-link-family);
  font-size: var(--nav-link-size);
  line-height: var(--nav-link-line);
  font-weight: var(--nav-link-weight);
  letter-spacing: var(--nav-link-spacing);
  color: var(--nav-link-color);
  transition: color .12s ease;
}
.nav-list a:hover { color: var(--accent); }
.nav-list a.is-current { color: var(--accent); }

/* ── content column ────────────────────────────────────────────────── */

.content {
  margin-left: var(--sidebar-w);
  padding: 2.5rem var(--content-pad) 6rem;
  min-height: 100vh;
  text-align: var(--text-align);
}

/* Site alignment. The content column itself always fills the space beside the
   index; it's the block grid inside it that shifts, which is why this only
   becomes visible once "Content max" is set to something narrower. */
.blocks {
  margin: var(--content-align);
  max-width: var(--content-max);
}

.project-title {
  font-family: var(--project-title-family);
  font-size: var(--project-title-size);
  line-height: var(--project-title-line);
  font-weight: var(--project-title-weight);
  letter-spacing: var(--project-title-spacing);
  color: var(--project-title-color);
  margin: 0 0 1.5rem;
}

.home-intro, .project-intro {
  max-width: 46rem;
  font-family: var(--body-family);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-spacing);
  color: var(--body-color);
  margin-bottom: 3rem;
}
.home-intro p, .project-intro p { margin: 0 0 1em; }

/* ── image rows ────────────────────────────────────────────────────── */

.row { margin: 0 0 var(--row-gap); }

.row-images {
  display: grid;
  gap: var(--img-gap);
  align-items: end;
  /* A row with no shared caption falls back to the configured column count. */
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
/* Captioned groups know their own width and override the default. */
.row--1 .row-images { grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); }
.row--2 .row-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row--3 .row-images { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* One image on its own doesn't need to fill a 2000px screen */
.row--1 .shot { max-width: var(--single-max); }

.shot img { width: 100%; }

.caption {
  font-family: var(--caption-family);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  font-weight: var(--caption-weight);
  letter-spacing: var(--caption-spacing);
  color: var(--caption-color);
  margin-top: .9rem;
}

/* ── gallery blocks ────────────────────────────────────────────────────
   One project page can hold several galleries, each with its own layout.
   --img-gap, --block-cols and --row-h are set per block by a scoped rule.  */

.gal { margin: 0 0 var(--row-gap); }
/* Scale shrinks the block within its column; align places what's left over. */
.gal-items, .gal .row { max-width: var(--gal-scale, 100%); margin: var(--gal-align, 0 auto 0 0); }
.gal-item { margin: 0; }
.gal-item .caption { margin-top: .6rem; }

/* Grid — equal columns */
.gal--grid .gal-items {
  display: grid;
  grid-template-columns: repeat(var(--block-cols, 3), minmax(0, 1fr));
  gap: var(--img-gap);
  align-items: end;
}

/* Justified — rows of a target height; flex-basis carries each aspect ratio */
.gal--justify .gal-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--img-gap);
}
.gal--justify .gal-item { flex: 1 1 20rem; }
.gal--justify .gal-item img { width: 100%; height: auto; }

/* Masonry — vertical columns, natural heights */
.gal--masonry .gal-items {
  column-count: var(--block-cols, 3);
  column-gap: var(--img-gap);
}
.gal--masonry .gal-item {
  break-inside: avoid;
  margin-bottom: var(--img-gap);
}

/* Slideshow — one horizontal strip that snaps */
.gal--slideshow .gal-items {
  display: flex;
  gap: var(--img-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  overscroll-behavior-x: contain;
}
.gal--slideshow .gal-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  max-width: 85%;
}
.gal--slideshow .gal-item img { height: var(--row-h, 20rem); width: auto; }

/* ── home: project covers ──────────────────────────────────────────── */

.covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cover-min), 1fr));
  gap: var(--img-gap);
}
.cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cover-label {
  display: block;
  font-family: var(--caption-family);
  font-size: var(--caption-size);
  letter-spacing: var(--caption-spacing);
  color: var(--caption-color);
  margin-top: .6rem;
}
.cover:hover .cover-label { color: var(--accent); }

/* ── project prev/next + footer ────────────────────────────────────── */

.project-nav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: .75rem;
  margin-top: 2rem;
  font-family: var(--caption-family);
  font-size: var(--caption-size);
}
.project-nav a:hover { color: var(--accent); }

.site-footer {
  margin-top: 4rem;
  font-family: var(--caption-family);
  font-size: calc(var(--caption-size) * 0.94);
  color: var(--muted);
}
.site-footer p { margin: 0; }

/* ── the page grid ─────────────────────────────────────────────────────
   Galleries and text blocks are placed on one grid of --page-cols columns.
   Each block sets --span, so a 6-and-6 pair sits side by side and a block
   spanning every column gets a row to itself. Blocks flow and wrap; a block
   can force a new row with grid-column-start:1. */

.blocks {
  display: grid;
  grid-template-columns: repeat(var(--page-cols, 12), minmax(0, 1fr));
  column-gap: var(--page-gap, 2rem);
  row-gap: var(--row-gap);
  align-items: start;          /* short blocks sit at the top of their row */
}
.blocks > * { grid-column: span var(--span, 12); min-width: 0; }

/* The grid owns the vertical rhythm now, so children don't add their own. */
.blocks > .gal,
.blocks > .text-block { margin-bottom: 0; }

/* Span decides the width here — the old percentage cap would fight it. */
.blocks > .text-block { max-width: none; }

/* ── text blocks ───────────────────────────────────────────────────────
   Runs of prose between galleries. Width is a percentage of the content
   column, set per block; alignment is inline. Type follows Body copy. */

.text-block {
  max-width: var(--tw, 46%);
  margin: 0 0 var(--row-gap);
  font-family: var(--body-family);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-spacing);
  color: var(--body-color);
}
.text-block > :first-child { margin-top: 0; }
.text-block > :last-child { margin-bottom: 0; }
.text-block p { margin: 0 0 1em; }
.text-block h2, .text-block h3 {
  font-family: var(--project-title-family);
  font-weight: var(--project-title-weight);
  letter-spacing: var(--project-title-spacing);
  margin: 0 0 .5em;
}
.text-block h2 { font-size: var(--project-title-size); }
.text-block h3 { font-size: calc(var(--project-title-size) * 0.8); }
.text-block a { text-decoration: underline; text-underline-offset: .15em; }
.text-block a:hover { color: var(--accent); }
.text-block ul, .text-block ol { margin: 0 0 1em; padding-left: 1.25em; }
.text-block blockquote {
  margin: 0 0 1em; padding-left: 1em;
  border-left: 2px solid var(--rule);
}
/* Centred text should sit in the middle of the column, not hug the left. */
.text-block[style*="center"] { margin-left: auto; margin-right: auto; }
.text-block[style*="right"]  { margin-left: auto; }

@media (max-width: 900px) {
  .text-block { max-width: 100%; }
}

/* ── lightbox (Quick View) ─────────────────────────────────────────────
   Full-screen viewer with arrows at the screen edges. Colours follow the
   design settings so it belongs to the site rather than looking bolted on. */

html.lb-open { overflow: hidden; }          /* stop the page scrolling behind */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lb-bg, rgba(242, 242, 240, 0.97));
  padding: 3vmin;
}
.lb[hidden] { display: none; }

.lb-stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.lb-img {
  max-width: min(100%, 90vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lb-cap {
  font-family: var(--caption-family);
  font-size: var(--caption-size);
  color: var(--caption-color);
  text-align: center;
  max-width: 60ch;
}

/* Arrows sit against the screen edges, as Cargo's do */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 6rem;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
  transition: opacity .12s ease;
}
.lb-nav:hover, .lb-nav:focus-visible { opacity: 1; }
.lb-nav svg { width: 2rem; height: 2rem; }
.lb-prev { left: 0; }
.lb-next { right: 0; }

.lb-close {
  position: absolute;
  top: .75rem; right: 1rem;
  width: 2.5rem; height: 2.5rem;
  border: 0; background: none;
  color: var(--fg);
  font-size: 1.9rem; line-height: 1;
  cursor: pointer;
  opacity: .55;
}
.lb-close:hover, .lb-close:focus-visible { opacity: 1; }

.lb-count {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .lb { padding: 0; }
  .lb-nav { width: 3rem; height: 100%; top: 0; transform: none; }
  .lb-img { max-width: 100vw; max-height: 82vh; }
}

/* ── mobile: index collapses behind a toggle ───────────────────────── */

.nav-toggle-btn { display: none; }

@media (max-width: 900px) {
  :root { --content-pad: 1.25rem; --gutter: 1.25rem; }

  .nav-toggle-btn {
    display: block;
    position: fixed;
    top: .75rem; right: .75rem;
    z-index: 20;
    background: var(--fg);
    color: var(--bg);
    font-family: var(--mono);
    font-size: .75rem;
    padding: .45rem .8rem;
    cursor: pointer;
  }

  .sidebar {
    position: static;
    width: auto;
    height: auto;
    padding: 1.5rem var(--gutter) 0;
  }
  /* Collapsed by default on small screens; the checkbox reveals the list. */
  .sidebar .nav { display: none; }
  .nav-toggle:checked ~ .sidebar .nav { display: block; padding-bottom: 2rem; }

  .content { margin-left: 0; padding-top: 1.5rem; max-width: none; }

  /* One column on a phone — spans would squeeze blocks to slivers. */
  .blocks { grid-template-columns: minmax(0, 1fr); }
  .blocks > * { grid-column: auto; }

  .row { margin-bottom: calc(var(--row-gap) * 0.55); }
  .row-images,
  .row--1 .row-images,
  .row--2 .row-images,
  .row--3 .row-images { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .covers { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}