@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@500;600;700;800&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --paper: #fdfdfb;
  --ink: #14130f;
  --ink-soft: #57544a;
  --ink-faint: #9c988a;
  --accent: #b33b2e;
  --hairline: #e4e1d8;
  --hairline-strong: #cfcbbd;
}
:root[data-theme="dark"] {
  --paper: #171510;
  --ink: #ede9dd;
  --ink-soft: #aba595;
  --ink-faint: #756f60;
  --accent: #e2685a;
  --hairline: #322e24;
  --hairline-strong: #423d30;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171510;
    --ink: #ede9dd;
    --ink-soft: #aba595;
    --ink-faint: #756f60;
    --accent: #e2685a;
    --hairline: #322e24;
    --hairline-strong: #423d30;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Libre Franklin", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.serif {
  font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

a { color: inherit; }

/* ---------- site header ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 40px;
}
.site-header .logo {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.site-header nav {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-header nav a {
  margin-left: 22px;
  text-decoration: none;
  color: var(--ink-soft);
}
.site-header nav a.on,
.site-header nav a:hover {
  color: var(--ink);
}
.site-header nav a.lang-switch {
  color: var(--ink-faint);
}
.site-header nav a.lang-switch:hover { color: var(--ink); }
.site-header nav a.soon {
  color: var(--hairline-strong);
  cursor: default;
  pointer-events: none;
}
/* lives outside .site-header on purpose — in focus mode the header is
   display:none, which would hide this too if it were nested inside it */
.focus-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  font-family: "Libre Franklin", -apple-system, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--paper);
  border: none;
  padding: 6px 10px;
  color: var(--ink-soft);
  cursor: pointer;
}
.focus-toggle:hover { color: var(--ink); }

body.focus-mode .site-header,
body.focus-mode .project-head {
  display: none;
}
/* margin (not padding) shrinks .stage itself within its flex parent —
   the image inside keeps filling .stage exactly as it always does,
   so this can't distort or crop it the way resizing the image directly did.
   Centering the (stage + caption bar) pair as a group — rather than just
   giving .stage equal top/bottom margins — is what keeps the photo looking
   centered once the caption bar's own height is taken into account. */
body.focus-mode #gallery-view {
  /* settles the (stage + counter row) group at the bottom instead of
     centering it — all the extra room goes above the photo, so the
     photo grows upward while its bottom edge (and distance from the
     counter) never moves */
  justify-content: flex-end;
}
body.focus-mode .stage {
  width: auto;
  margin: 80px 5% 0;
}
/* the click/cursor zones normally stop at the edge of .stage — in focus
   mode they're switched to fixed positioning so they also cover the white
   border around the (now smaller) photo, stopping short of the counter/
   caption row and footer so those stay clickable on their own */
body.focus-mode .arrow-zone {
  position: fixed;
  top: 0;
  bottom: 160px;
}

/* ---------- home: project index ---------- */
/* locks the home page to the viewport, same as the gallery pages, so the
   copyright line always sits at the very bottom of the screen instead of
   just trailing whatever content happens to be above it */
body.locked-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.locked-page .site-header,
body.locked-page .site-footer {
  flex: none;
}
body.locked-page .index-list,
body.locked-page .book-layout,
body.locked-page .shows-grid,
body.locked-page .about-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.locked-page .index-list::-webkit-scrollbar,
body.locked-page .book-layout::-webkit-scrollbar,
body.locked-page .shows-grid::-webkit-scrollbar,
body.locked-page .about-wrap::-webkit-scrollbar {
  display: none;
}

.index-list {
  max-width: 900px;
  margin: 40px auto 120px;
  padding: 0 40px;
}
.index-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}
.index-row:first-child { border-top: none; }
.index-row .title {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.index-row .meta {
  font-family: "Libre Franklin", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-left: 24px;
}
.index-row.soon { color: var(--ink-faint); cursor: default; }
.index-row.soon .title { color: var(--ink-faint); }

/* ---------- project head ---------- */
.project-head {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px 40px;
}
.back {
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 28px;
}
.kicker {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.project-head h1 {
  font-weight: 700;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.project-head .cite {
  font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 22px;
}
.toggle {
  font-weight: 700;
  font-size: 12px;
}
.toggle button {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-faint);
  cursor: pointer;
}
.toggle button.on { color: var(--ink); }
.toggle .sep { color: var(--hairline-strong); font-weight: 400; margin: 0 8px; }

/* ---------- gallery (sequential) view ---------- */
/* on project pages, the whole page is locked to the viewport height —
   header/title/meta/footer take their natural size, .stage absorbs the rest,
   so nothing ever scrolls */
body.stage-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.stage-page .site-header,
body.stage-page .project-head,
body.stage-page .site-footer {
  flex: none;
}
body.stage-page #gallery-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.stage-page #index-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.stage-page #index-view::-webkit-scrollbar {
  display: none;
}
body.stage-page #index-view .contact-grid { margin-bottom: 40px; }
body.stage-page .stage-meta { flex: none; }

.stage {
  position: relative;
  width: 100%;
  height: calc(100vh - 300px);
  min-height: 220px;
  background: var(--paper);
  overflow: hidden;
}
body.stage-page .stage {
  flex: 1;
  min-height: 220px;
  height: auto;
}
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
}
.stage-intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.stage-intro p {
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}
.stage-intro[hidden] { display: none; }
.arrow-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  cursor: pointer;
  user-select: none;
}
.arrow-zone.left {
  left: 0;
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTUgNSBMOCAxMiBMMTUgMTkiIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE1IDUgTDggMTIgTDE1IDE5IiBmaWxsPSJub25lIiBzdHJva2U9IiMxNDEzMGYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") 12 12, pointer;
}
.arrow-zone.right {
  right: 0;
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNOSA1IEwxNiAxMiBMOSAxOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNOSA1IEwxNiAxMiBMOSAxOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTQxMzBmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") 12 12, pointer;
}

/* caption bar lives in normal flow BELOW the stage, never overlaid on the photo
   (an overlay would intrude on the image at some widths/aspect ratios) */
.stage-meta {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.frame-count,
.frame-caption {
  font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 17px;
  color: var(--ink-soft);
}
.frame-count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.frame-caption {
  text-align: right;
}

/* ---------- index (contact sheet) view ---------- */
.contact-grid {
  max-width: 1100px;
  margin: 0 auto 120px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.contact-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background: var(--hairline);
}
.contact-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.1);
  transition: transform 0.2s;
}
.contact-tile:hover img { transform: scale(1.04); }
.contact-tile .n {
  position: absolute;
  left: 6px;
  bottom: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ---------- libro ---------- */
.book-layout {
  max-width: 1100px;
  margin: 0 auto 100px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}
.book-layout .cover {
  width: 100%;
  display: block;
  box-shadow: 0 20px 40px rgba(0,0,0,0.16);
}
.book-links {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.book-links a {
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  width: fit-content;
}

/* ---------- mostre ---------- */
.shows-grid {
  max-width: 900px;
  margin: 0 auto 100px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.show-card {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.show-plate {
  flex: none;
  width: 320px;
  background: var(--hairline);
}
.show-plate img {
  width: 100%;
  height: auto;
  display: block;
}
.show-plate.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/5;
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  padding: 20px;
}
.show-meta { flex: 1; padding-top: 0; }
.show-meta .venue {
  font-family: "Libre Franklin", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.show-meta .date {
  font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ---------- about ---------- */
.about-wrap {
  max-width: 900px;
  margin: 0 auto 100px;
  padding: 0 40px;
}
.about-section-label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.about-bio {
  font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 44px;
}
.about-bio i { color: var(--ink); }
.about-block { margin-bottom: 36px; }
.cv-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}
.cv-row:first-of-type { border-top: none; }
.cv-row .yr {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cv-row .what { color: var(--ink-soft); }
.cv-row .what b { color: var(--ink); font-weight: 500; }

[hidden] { display: none !important; }

footer.site-footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 40px 60px;
  border-top: 1px solid var(--hairline);
  font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 17px;
  color: var(--ink-soft);
}
body.stage-page footer.site-footer { border-top: none; }

@media (max-width: 680px) {
  .site-header { padding: 24px 20px; }
  .index-list, .project-head, footer.site-footer { padding-left: 20px; padding-right: 20px; }
  .contact-grid { grid-template-columns: repeat(3, 1fr); padding: 0 20px; }
  .index-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .index-row .meta { padding-left: 0; }
  .book-layout { grid-template-columns: 1fr; padding: 0 20px; }
  .book-layout .cover { max-width: 280px; }
  .shows-grid { grid-template-columns: 1fr; padding: 0 20px; }
  .show-card { flex-direction: column; }
  .show-plate { width: 100%; }
}