/* marulli.studio — artist website */

:root {
  --ink: #222;   /* off-black — everything neutral, color belongs to the work */
  --muted: #999;
  --bg: #fff;
  --rule: #e5e5e5;
  --overlay: rgba(255, 255, 255, 0.97);
  --sidebar: 240px;
}

/* inverted theme — a work can opt in via "invert": true in works.config.json */
body.invert {
  --ink: #f5f5f5;
  --muted: #888;
  --bg: #000;
  --rule: #333;
  --overlay: rgba(0, 0, 0, 0.97);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inconsolata", monospace;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* ---- left nav ---- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar);
  height: 100vh;
  padding: 2rem 1.75rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.wordmark {
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

.nav-list {
  list-style: none;
}

.nav-list li {
  margin-bottom: 0.35rem;
}

.nav-list a {
  color: var(--muted);
}

.nav-list a:hover,
.nav-list a.active {
  color: var(--ink);
}

/* Info sits right under the name, set apart from the works */
.nav-info {
  color: var(--muted);
  margin-bottom: 1.75rem;
}

.nav-info:hover,
.nav-info.active {
  color: var(--ink);
}

/* ---- content column ---- */

main {
  margin-left: var(--sidebar);
  max-width: 760px;
  padding: 2rem 2.5rem 6rem;
}

/* Info page content starts lower, aligned with the nav items beside it */
main.info-page {
  padding-top: 3.85rem;
}

/* staircase (Found Fiction) gets a wider measure so its panels read larger */
main.stagger {
  max-width: 1100px;
}

/* ---- a body of work ---- */

.work-year {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 2.5rem;
}

.works figure {
  margin: 0 0 5rem;
  text-align: center;
}

.works figure:last-child {
  margin-bottom: 0;
}

.works img {
  max-width: 100%;
  max-height: 88vh;
  height: auto;
  display: block;
  margin: 0 auto;
  cursor: zoom-in;
}

.works video {
  max-width: 100%;
  max-height: 88vh;
  height: auto;
  display: block;
  margin: 0 auto;
}

.works figcaption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 0.75rem;
}

/* "crop" works (e.g. Underpoems): zoom each image in slightly, trimming the edges */
.cropbox {
  display: inline-block;
  overflow: hidden;
  line-height: 0;
}

.cropbox img {
  display: block;
  transform: scale(1.2);
}

/* ---- a piece: panels shown together in a row, wrapping when there are many ---- */

.piece {
  margin: 0 0 5rem;
  text-align: center;
}

.piece:last-child {
  margin-bottom: 0;
}

.piece-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}

/* stacked rows within one piece sit the same distance apart as panels in a row */
.piece-grid + .piece-grid {
  margin-top: 0.6rem;
}

/* staircase: each row steps half a panel further right than the one above (per piece) */
.stagger .piece-grid {
  justify-content: flex-start;
  margin-left: calc(var(--row, 0) * (100% - (var(--cols) - 1) * 0.6rem) / var(--cols) / 2);
}

.piece-grid figure {
  margin: 0;
  flex: 0 0 calc((100% - (var(--cols) - 1) * 0.6rem) / var(--cols));
}

.piece-grid img,
.piece-grid video {
  width: 100%;
  max-height: none;
  margin: 0;
}

.piece-caption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 1rem;
}

/* Found Fiction: captions sit at the left edge */
.stagger .piece-caption {
  text-align: left;
}

/* ---- about page ---- */

.info-block {
  margin-bottom: 3.5rem;
}

.info-block h2 {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.info-block a {
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.15s ease;
}

.info-block a:hover {
  border-color: var(--ink);
}

.info-list {
  list-style: disc;
  padding-left: 1.1rem;
}

.info-list li {
  margin-bottom: 0.35rem;
}

/* email signup */
.signup {
  display: flex;
  gap: 0.5rem;
  max-width: 420px;
  margin-top: 0.5rem;
}

.signup input[type="email"] {
  flex: 1;
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
}

.signup input[type="email"]:focus {
  outline: none;
  border-color: var(--ink);
}

.signup button {
  font: inherit;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.signup button:hover {
  background: var(--bg);
  color: var(--ink);
}

.signup .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.signup-note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 0.75rem;
}

/* ---- lightbox ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}

.lightbox.open {
  display: flex;
}

.lb-stage {
  margin: 0;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: zoom-out;
}

.lb-media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  line-height: 0;
}

.lb-img {
  max-width: 90vw;
  max-height: 82vh;
  height: auto;
  display: block;
}

/* a poem shows beside its artwork; both share the width */
.lb-poem {
  max-height: 82vh;
  height: auto;
  display: none;
}

.lb-media.has-poem .lb-poem {
  display: block;
}

/* artwork (the "page") is the hero — larger than the poem beside it */
.lb-media.has-poem .lb-img,
.lb-media.has-poem .lb-poem {
  height: auto;
  max-width: none;
  max-height: none;
}

.lb-media.has-poem .lb-img {
  width: min(48vw, 64vh);
}

.lb-media.has-poem .lb-poem {
  width: min(33vw, 45vh);
}

.lb-caption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 1rem;
  text-align: center;
}

.lb-close,
.lb-prev,
.lb-next {
  position: fixed;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  padding: 0.5rem;
  transition: color 0.15s ease;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  color: var(--muted);
}

.lb-close {
  top: 1.25rem;
  right: 1.5rem;
  font-size: 28px;
}

.lb-prev,
.lb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
}

.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }

/* ---- small screens ---- */

@media (max-width: 720px) {
  .sidebar {
    position: static;
    width: auto;
    height: auto;
    padding: 1.5rem 1.5rem 0;
  }

  .nav-list li {
    margin-bottom: 0.15rem;
  }

  main {
    margin-left: 0;
    max-width: none;
    padding: 1.5rem 1.5rem 4rem;
  }

  /* on mobile the sidebar stacks on top, so no alignment offset needed */
  main.info-page {
    padding-top: 1.5rem;
  }

  .works figure {
    margin-bottom: 3rem;
  }

  .piece {
    margin-bottom: 3rem;
  }

  /* panels go 2-up on narrow screens regardless of desktop column count */
  .piece-grid figure {
    flex-basis: calc((100% - 0.6rem) / 2);
  }

  /* no staircase on mobile — the offsets don't fit the narrow column */
  .stagger .piece-grid {
    justify-content: center;
    margin-left: 0;
  }

  .lb-prev,
  .lb-next {
    font-size: 32px;
  }

  .lb-prev { left: 0.4rem; }
  .lb-next { right: 0.4rem; }

  /* artwork + poem stack vertically on narrow screens */
  .lb-media.has-poem {
    flex-direction: column;
    gap: 0.75rem;
  }

  .lb-media.has-poem .lb-img,
  .lb-media.has-poem .lb-poem {
    width: auto;
    height: auto;
    max-width: 90vw;
  }

  .lb-media.has-poem .lb-img { max-height: 52vh; }
  .lb-media.has-poem .lb-poem { max-height: 36vh; }
}