/* Reusable pieces. Each block is self-contained: copy the markup, get the look. */

/* ── Headpiece ornament ─────────────────────────────── */
.headpiece { margin: var(--space-3) auto 0; color: var(--rubric); }
.headpiece img, .headpiece svg { width: 100%; height: auto; }

/* ── Chapter numeral: "— I —" ───────────────────────── */
.numeral {
  display: flex; justify-content: center; align-items: center; gap: .7em;
  color: var(--rubric); font-size: var(--numeral); font-weight: 600;
  margin: var(--space-4) 0 var(--space-1);
  letter-spacing: .1em;
}
.numeral::before, .numeral::after { content: ""; width: 1.1em; border-top: .07em solid currentColor; }

/* ── Opening paragraph: drop cap + small-caps lead-in ── */
.opening::first-letter {
  /* Two-line drop cap, set by hand: CSS initial-letter trusts EB Garamond's cap-height
     metric, which leaves the W sitting below the small caps it should line up with. */
  float: left;
  color: var(--rubric);
  font-size: 4.35em;
  line-height: .4;
  margin: .06em .05em 0 -.02em;
  font-weight: 400;
}
.lead-in { font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 500; }

.prose { text-align: justify; }
@media (max-width: 30em) { .prose { text-align: left; } }

/* ── Status tag ─────────────────────────────────────── */
.status {
  display: block; text-align: center; margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--ink-2);
  font-size: 1.05em;
}
.status[data-state="soon"], .status[data-state="live"] { color: var(--rubric); }

/* ── Call to action link ────────────────────────────── */
.cta {
  display: inline-block; margin: var(--space-1) 0 var(--space-2);
  padding: .55em 1.1em; min-height: 44px;
  border: 1.5px solid var(--rubric); border-radius: var(--radius);
  text-decoration: none; font-variant-caps: all-small-caps; letter-spacing: .12em; font-size: 1.1em;
}
.cta:hover { background: var(--rubric); color: var(--paper); }
.cta-row { text-align: center; }

/* ── Feature list (definition-style) ────────────────── */
.features { list-style: none; padding: 0; margin: 0 0 var(--space-2); }
.features li { margin-bottom: var(--space-2); padding-left: 1.2em; position: relative; }
.features li::before { content: "❧" / ""; position: absolute; left: 0; color: var(--rubric); }
.features b { font-weight: 600; }

/* ── Gallery ────────────────────────────────────────── */
.gallery { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); padding: 0; list-style: none; }
.gallery[data-kind="phone"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 34em) { .gallery[data-kind="phone"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery[data-kind="wide"] { grid-template-columns: 1fr; }
.gallery[data-kind="photo"] { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }

.shot { margin: 0; }
.shot button {
  all: unset; display: block; width: 100%; cursor: zoom-in; border-radius: var(--radius);
}
.shot button:focus-visible { outline: var(--focus); outline-offset: 3px; }
.shot img {
  width: 100%; border-radius: var(--radius); background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--rule), 0 6px 18px rgb(60 40 20 / .10);
}
.shot figcaption { color: var(--ink-2); font-size: var(--text-small); font-style: italic; margin-top: .4em; line-height: 1.35; }

/* Placeholder slot for pictures still to come */
.shot.placeholder .frame {
  aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center;
  border: 1.5px dashed var(--rule); border-radius: var(--radius); color: var(--ink-2); padding: var(--space-2);
}

/* ── Lightbox (native <dialog>) ─────────────────────── */
.lightbox {
  border: 0; padding: 0; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh;
  background: #14100C; color: var(--paper);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox .lb-bar { display: flex; justify-content: flex-end; padding: var(--space-1); }
.lightbox .lb-close {
  font: inherit; font-size: 1.1em; min-width: 48px; min-height: 48px; padding: 0 1em;
  background: var(--paper); color: var(--ink); border: 0; border-radius: var(--radius); cursor: pointer;
}
.lightbox .lb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gutter) var(--space-2); gap: var(--space-1); }
.lightbox img { max-height: 100%; min-height: 0; object-fit: contain; flex: 1 1 auto; }
.lightbox p { margin: 0; text-align: center; font-size: 1.05em; max-width: var(--measure); }

/* ── Contents list ──────────────────────────────────── */
.toc { margin: var(--space-3) 0; }
.toc h3 { margin-top: 0; }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list a {
  display: flex; align-items: baseline; gap: .6em; padding: .35em 0; min-height: 44px;
  color: var(--ink); text-decoration: none;
}
.toc-list a:hover .toc-title { color: var(--rubric); text-decoration: underline; text-underline-offset: .18em; }
.toc-num { flex: 0 0 2.2em; color: var(--rubric); font-weight: 600; letter-spacing: .04em; }
.toc-title { flex: 0 1 auto; }
.toc-dots { flex: 1 1 1em; min-width: 1em; border-bottom: 1.5px dotted var(--rule); transform: translateY(-.3em); }
.toc-status { flex: 0 0 auto; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--ink-2); }
.toc-status[data-state="live"] { color: var(--rubric); }
@media (max-width: 30em) { .toc-dots { display: none; } .toc-list a { flex-wrap: wrap; } .toc-status { flex-basis: 100%; padding-left: 2.8em; margin-top: -.2em; } }

/* ── Small Greek epigraph ───────────────────────────── */
.epigraph { text-align: center; margin: var(--space-3) auto; max-width: 28em; }
.epigraph > span { display: block; }
.epigraph [lang="grc"] { font-size: 1.25em; line-height: 1.45; }
.epigraph .source { display: block; color: var(--ink-2); font-style: italic; margin-top: .3em; font-size: var(--text-small); }

/* ── Footer ─────────────────────────────────────────── */
.site-footer {
  margin-top: var(--space-4); padding-block: var(--space-3);
  border-top: 1px solid var(--rule); text-align: center; color: var(--ink-2); font-size: var(--text-small);
}
.site-footer p { margin-bottom: var(--space-1); }