/* Zine format: Photobook / photo essay. Quiet, slow, one plate per page. */
:root {
  --green-900: #0d1a12;
  --green-800: #142619;
  --green-700: #1b3324;
  --green-600: #2f5338;
  --green-400: #5a7d5c;
  --green-200: #a9bda7;
  --paper: #ece8dc;        /* page stock */
  --table: #d8d3c4;        /* the surface the book rests on */
  --ink: #15201a;
  --ink-muted: #6b716a;
  --caliper: #2a5fd1;
  --line: rgba(21,32,26,.16);
  --line-light: rgba(236,232,220,.22);
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* Page geometry: one leaf, 4:5, measured in units of its own width */
  --w: min(860px, calc(100vw - 2rem));
  --u: calc(var(--w) / 100);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--table); color: var(--ink);
  font-family: var(--serif); line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* Header: same pattern as zine.css */
.zine-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.5rem; color: var(--paper);
  background: rgba(13,26,18,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-light);
}
.zine-brand { font-family: var(--serif); font-weight: 500; letter-spacing: .22em; font-size: .8rem; display: flex; flex-direction: column; text-decoration: none; }
.zine-brand span { font-family: var(--mono); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--green-200); font-size: .58rem; margin-top: .25rem; }
.zine-nav nav { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-200); }
.zine-nav nav a { text-decoration: none; white-space: nowrap; }
.zine-nav nav a:hover { color: var(--paper); }

/* The book: a single column of leaves resting on a table */
.book { padding: clamp(2rem, 6vw, 5rem) 0 6rem; }
.leaf {
  position: relative; width: var(--w); aspect-ratio: 4 / 5; margin: 0 auto clamp(2.5rem, 8vw, 6rem);
  padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 13);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(21,32,26,.08), 0 18px 40px -18px rgba(21,32,26,.35);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
/* Faint binding edge: recto binds on the left, verso on the right */
.leaf.recto { background-image: linear-gradient(to right, rgba(21,32,26,.07), transparent 4%); }
.leaf.verso { background-image: linear-gradient(to left, rgba(21,32,26,.07), transparent 4%); }

/* Folios and running heads, set in the outer margins */
.folio, .running {
  position: absolute; bottom: calc(var(--u) * 5.5);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.recto .folio { right: calc(var(--u) * 7); }
.verso .folio { left: calc(var(--u) * 7); }
.running { top: calc(var(--u) * 5.5); bottom: auto; }
.recto .running { right: calc(var(--u) * 7); }
.verso .running { left: calc(var(--u) * 7); }

/* Plates */
.plate { margin: 0; width: 100%; }
.plate img { width: 100%; object-fit: cover; background: var(--green-800); }
.plate.portrait { width: 72%; }
.plate.portrait img { aspect-ratio: 3 / 4; }
.plate.landscape img { aspect-ratio: 16 / 11; }
.plate.nose img { aspect-ratio: 16 / 10; }
.plate.square { width: 78%; }
.plate.square img { aspect-ratio: 1 / 1; }
.plate.small { width: 46%; }
.plate.strip img { aspect-ratio: 3 / 1; object-position: 50% 66%; }
.leaf.low { justify-content: flex-end; padding-bottom: calc(var(--u) * 22); }

/* Tight crop: scale around the caliper so it sits near the center of the frame */
.crop { overflow: hidden; }
.crop img { transform: scale(2.5); transform-origin: 54% 58%; }

/* Captions: small, quiet, aligned to the image edge */
.plate figcaption {
  display: flex; gap: 1.1rem; align-items: baseline; margin-top: .9rem;
  font-size: .82rem; line-height: 1.4; color: var(--ink-muted); font-style: italic; max-width: 46ch;
}
.plate figcaption b {
  flex: none; font-family: var(--mono); font-style: normal; font-weight: 400;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.plate figcaption b.accent { color: var(--caliper); }

/* The single dark leaf: full bleed, used once for pacing */
.leaf.bleed { padding: 0; background: var(--green-900); overflow: hidden; }
.leaf.bleed .plate { position: absolute; inset: 0; }
.leaf.bleed .plate img { height: 100%; object-position: 50% 45%; }
.leaf.bleed figcaption {
  position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 7); bottom: calc(var(--u) * 10); margin: 0;
  color: var(--paper); text-shadow: 0 1px 8px rgba(13,26,18,.8);
}
.leaf.bleed figcaption b { color: var(--paper); }
.leaf.bleed .folio { color: var(--paper); z-index: 1; text-shadow: 0 1px 6px rgba(13,26,18,.8); }

/* Title page */
.title-page { justify-content: space-between; text-align: center; }
.eyebrow { font-family: var(--mono); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.title-page h1 { font-weight: 400; font-size: clamp(2.4rem, calc(var(--u) * 8.5), 4.6rem); line-height: 1; letter-spacing: -.01em; margin: 0; }
.title-page h1 em { display: block; font-size: .4em; letter-spacing: .02em; color: var(--green-600); margin-top: 1.1rem; }
.title-page .rule { width: 2.5rem; height: 1px; background: var(--green-600); margin: 2rem auto; border: 0; }
.title-page .sub { font-style: italic; color: var(--ink-muted); margin: 0; font-size: 1.02rem; }
.title-page .imprint { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; margin: 0; }

/* Text pages */
.text { justify-content: flex-start; align-items: stretch; padding-top: calc(var(--u) * 20); }
.text > * { max-width: 34em; }
.text h2 { font-weight: 400; font-size: clamp(1.5rem, calc(var(--u) * 3.6), 2rem); margin: 1rem 0 2.25rem; letter-spacing: .005em; }
.text p { font-size: clamp(1rem, calc(var(--u) * 2.1), 1.12rem); margin: 0 0 1.1rem; hyphens: auto; }
.text p + p { text-indent: 1.5em; margin-top: -1.1rem; }
.text p.first::first-line { font-variant: small-caps; letter-spacing: .04em; }
.text .sign { margin-top: 2rem !important; text-indent: 0 !important; font-style: italic; color: var(--ink-muted); }

/* Interleaf: a nearly empty page that slows the sequence down */
.interleaf p { font-style: italic; color: var(--ink-muted); font-size: 1.05rem; margin: 0; text-align: center; max-width: 24ch; }

/* List of plates and colophon */
.plates-list { list-style: none; padding: 0; margin: 0 0 2.5rem; border-top: 1px solid var(--line); }
.plates-list li {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .75rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.plates-list li span:first-child, .plates-list li span:last-child { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: var(--ink-muted); }
.colophon { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 2rem; margin: 0; }
.colophon dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.colophon dd { margin: .15rem 0 0; font-size: .92rem; }
.text .fine { font-size: .78rem; color: var(--ink-muted); margin-top: 2rem; }

@media (max-width: 600px) {
  .zine-nav { padding: .9rem 1rem; }
  .leaf { aspect-ratio: 3 / 4; padding: calc(var(--u) * 14) calc(var(--u) * 9) calc(var(--u) * 16); }
  .leaf.bleed { padding: 0; }
  .text { padding-top: calc(var(--u) * 16); }
  .leaf.low { padding-bottom: calc(var(--u) * 20); }
  .plate.portrait { width: 80%; }
  .plate.square { width: 90%; }
  .plate.small { width: 62%; }
  .plate figcaption { flex-direction: column; gap: .25rem; font-size: .78rem; }
  .colophon { grid-template-columns: 1fr; }
  .plates-list li { grid-template-columns: 2.6rem 1fr auto; font-size: .86rem; }
}

@media print {
  @page { size: 8in 10in; margin: 0; }
  :root { --w: 8in; }
  body { background: #fff; overflow: visible; }
  .zine-nav { display: none; }
  .book { padding: 0; }
  .leaf {
    width: 8in; height: 10in; aspect-ratio: auto; margin: 0; box-shadow: none; background-image: none;
    break-after: page; page-break-after: always; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .leaf:last-child { break-after: auto; page-break-after: auto; }
}