/* agexhibit — Indexhibit-style layout: fixed text menu left, exhibit right. */
:root {
  --bg: #fff;
  --fg: #000;
  --muted: #888;
  --link: #000;
  --hover: #888;
  --rule: #e5e5e5;
  --menu-w: 215px;
  --img-max: 1000px;  /* images and videos never grow wider than this (big / 4K screens) */
  --gap: 25px;
  --font: Verdana, Geneva, "DejaVu Sans", sans-serif;
  --size: 11px;
  --leading: 1.6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111; --fg: #ddd; --muted: #777; --link: #ddd; --hover: #fff; --rule: #2a2a2a;
  }
}
:root[data-theme="dark"] {
  --bg: #111; --fg: #ddd; --muted: #777; --link: #ddd; --hover: #fff; --rule: #2a2a2a;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: var(--size)/var(--leading) var(--font);
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--hover); }
h1 { font-size: inherit; font-weight: bold; margin: 0 0 1em; }
h1 .year { font-weight: normal; color: var(--muted); }

/* menu */
#menu {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--menu-w);
  padding: var(--gap);
  overflow-y: auto;
}
.site-title { font-weight: bold; margin-bottom: 2em; }
#menu ul { list-style: none; margin: 0 0 1.6em; padding: 0; }
.section-title { color: var(--muted); }
#menu li.active a { font-weight: bold; }
#menu li.active a::before { content: "\\ "; font-weight: normal; }
.footer { color: var(--muted); margin-top: 3em; }

/* content */
#content {
  margin-left: var(--menu-w);
  padding: var(--gap) var(--gap) 80px 0;
  max-width: 1400px;
}
.text { max-width: 440px; margin-bottom: 2em; }
.text-info { margin-top: 2em; }
/* EN / IT on the same line as the title */
.exhibit-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.2em; }
.lang-switch { margin: 0 0 1em; color: var(--muted); }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--fg); }
.lang-switch [aria-current] { color: var(--fg); font-weight: bold; } /* the language you are reading */
.text p { margin: 0 0 1em; }
.text img { max-width: 100%; }
figure { margin: 0; }
figcaption { color: var(--muted); margin-top: .4em; }
img, video { display: block; max-width: 100%; height: auto; background: var(--rule); }

.embed { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; background: var(--rule); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.grid .cell-embed { grid-column: span 2; aspect-ratio: 16 / 9; }
.horizontal .embed { height: 70vh; width: auto; max-width: none; }

.stack figure { margin-bottom: 3em; }
.stack img, .stack video { width: 100%; height: auto; max-width: var(--img-max); } /* every image the same width */
.stack .embed { max-width: var(--img-max); }

.slideshow .controls { margin-bottom: 1em; user-select: none; }
.slideshow .counter { color: var(--muted); margin-left: 1em; }
.slideshow img, .slideshow video { max-height: 80vh; width: auto; cursor: e-resize; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.grid .cell { display: block; aspect-ratio: 1; overflow: hidden; }
.grid img, .grid video { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.grid .cell:hover img { opacity: .8; }

.horizontal {
  display: flex; gap: 15px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 1em;
  margin-right: calc(-1 * var(--gap));
}
.horizontal figure { flex: 0 0 auto; }
.horizontal img, .horizontal video { height: 70vh; width: auto; max-width: none; }

/* graph: section titles that are concepts, threads, concept / fragment / index pages */
.section-title a { color: var(--muted); }
.section-title a:hover { color: var(--fg); }
#menu ul.anchor { margin-top: 1.6em; }  /* one blank line from the list, as Info from Dark */

.threads { margin-top: 4em; padding-top: 1.2em; border-top: 1px solid var(--rule); max-width: 640px; }
.threads p { margin: 0 0 1em; }
.t-concepts a { color: var(--muted); }
.t-concepts a:hover { color: var(--fg); }
.t-fragments { display: flex; flex-wrap: wrap; gap: 8px; }
.t-fragments img { width: 72px; height: 72px; object-fit: cover; }
.t-fragments a:hover img { opacity: .8; }

.concept-word { font-size: 2.4em; font-weight: normal; line-height: 1.2; margin: 0; }
.t-entities a { color: var(--muted); font-style: italic; }
.t-entities a:hover { color: var(--fg); }
.format-concept .threads, .format-entity .threads { border-top: 0; margin-top: 2em; }
.format-concept .t-works, .format-entity .t-works { font-size: 1.2em; }
.format-concept .t-fragments img, .format-entity .t-fragments img { width: 120px; height: 120px; }
.format-entity .concept-word { font-style: italic; }

.fragment img { max-height: 88vh; width: auto; max-width: min(100%, var(--img-max)); }
.index-list { list-style: none; margin: 0; padding: 0; }

/* home flow */
.format-flow #content { max-width: none; }
.flow-row { display: flex; }
.flow-row:first-child { margin-top: 0 !important; }
.flow-item { display: block; flex: 0 0 auto; }
.flow-item img { width: 100%; height: auto; background: none; opacity: 0; transition: opacity .8s ease; }
.flow-item.in img { opacity: 1; }
.flow-item:hover img { opacity: .85; }
.flow-stack .flow-row { display: block; margin-top: 3em; }
.flow-stack .flow-item { display: block; width: 100%; }
.flow-stack .flow-item img { width: 100%; height: auto; max-width: var(--img-max); } /* same width for every image */
.flow-columns { display: flex; align-items: flex-start; gap: 15px; width: var(--flow-w, 100%); }
.flow-col { flex: 1 1 0; min-width: 0; max-width: var(--img-max); will-change: transform; }
.flow-col .flow-item { display: block; margin-bottom: 15px; }
.flow-col .flow-item img { width: 100%; height: auto; }
.flow-static { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
@media (prefers-reduced-motion: reduce) { .flow-item img { transition: none; } }

/* lightbox for grid */
.lightbox {
  position: fixed; inset: 0; z-index: 10;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--gap); cursor: zoom-out;
}
.lightbox img, .lightbox video { max-width: 100%; max-height: 88vh; width: auto; }
.lightbox figcaption { text-align: center; }

/* light / dark switch: a plain word in the menu, like the other entries (needs JS) */
.theme-item { display: none; }
.js .theme-item { display: list-item; margin-top: 1.6em; }  /* a blank line away from Info */
.theme-toggle { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; }
.theme-toggle:hover { color: var(--hover); }

/* work pages on wide screens: text in a column on the left (it stays in view), images on the right */
@media (min-width: 1000px) {
  body.format-stack #content, body.format-slideshow #content,
  body.format-grid #content, body.format-horizontal #content {
    display: grid;
    grid-template-columns: var(--text-w, 500px) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
  .exhibit-info {
    grid-column: 1; grid-row: 1 / span 2;
    position: sticky; top: var(--gap);
    /* a long text scrolls on its own, under the mouse, without moving the images; no visible scrollbar */
    max-height: calc(100vh - 2 * var(--gap)); overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .exhibit-info::-webkit-scrollbar { display: none; }
  .exhibit-info .text { max-width: none; }
  /* the empty space at the end of the page belongs to the image column: otherwise, at the bottom,
     the page's own padding pushes the (sticky) text column up */
  body.format-stack #content, body.format-slideshow #content,
  body.format-grid #content, body.format-horizontal #content { padding-bottom: var(--gap); }
  #content > .stack, #content > .slideshow, #content > .grid, #content > .horizontal { padding-bottom: calc(80px - var(--gap)); }
  #content > .stack, #content > .slideshow, #content > .grid, #content > .horizontal { grid-column: 2; grid-row: 1; }
  #content > .threads { grid-column: 2; }
}

/* Notes: short notes from the author's phone, newest first */
.notes { max-width: 700px; }
.note { margin-bottom: 4em; }
.note time { display: block; color: var(--muted); margin-bottom: 0.8em; }
.note figure { margin: 0 0 1em; }
.note img { display: block; width: 100%; height: auto; }
.note p { max-width: 440px; margin: 0 0 1em; overflow-wrap: anywhere; }
.notes-empty { color: var(--muted); }
/* site.yml `notes: fit`: every sentence as wide as the page (sizes set by assets/notes.js) */
.notes-fit { max-width: var(--text-w, 440px); }   /* as wide as the text column of the work pages */
body.format-notes #content { max-width: none; }   /* the Journal can use the whole width of big screens */
.notes-fit .note figure { max-width: none; }   /* photos as wide as the page too */
.fit-text { margin: 0 0 1em; opacity: 0; }
.notes-fit.fitted .fit-text { opacity: 1; transition: opacity 0.3s; }
.fit { font-weight: bold; line-height: 0.95; letter-spacing: -0.02em; margin: 0; overflow-wrap: normal; }
.fit a { color: inherit; }
.notes-fit .note p { max-width: var(--text-w, 440px); }   /* the small text next to photos */

/* with the menu on the left: the text of a work starts on the line of the first work in the menu
   (same space under the work's title as under the site's name) */
@media (min-width: 701px) {
  .exhibit-head h1, .exhibit-head .lang-switch { margin-bottom: 2em; }
}

/* menu button: only on phones */
.menu-toggle { display: none; }

/* narrow screens: a bar with the name and a button; the list opens full screen (after eatock.com) */
@media (max-width: 700px) {
  :root { --gap: 16px; --size: 13px; }
  #menu {
    position: sticky; top: 0; z-index: 20;
    width: auto; bottom: auto;
    display: flex; flex-wrap: wrap; align-items: center;
    padding: 6px var(--gap); background: var(--bg); overflow: visible;
  }
  .site-title { flex: 1; margin: 0; font-size: 15px; }
  .site-title a { display: inline-block; padding: 10px 0; }
  .menu-toggle {
    display: block; width: 44px; height: 44px; margin-right: -10px; padding: 10px;
    background: none; border: 0; color: var(--fg); cursor: pointer;
  }
  .menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .menu-toggle .i-close, #menu.open .menu-toggle .i-open { display: none; }
  #menu.open .menu-toggle .i-close { display: block; }
  .menu-list { flex-basis: 100%; font-size: 14px; }
  #menu .menu-list ul { margin: 0 0 1.2em; }
  #menu .menu-list ul.anchor { margin-top: 1.6em; }
  #menu .menu-list li a, #menu .menu-list .theme-toggle { display: block; padding: 8px 0; text-align: left; }
  .js .menu-list { display: none; }
  .js #menu.open .menu-list {
    display: block; position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
    overflow-y: auto; padding: 12px var(--gap) 40px; background: var(--bg);
  }
  .js body.menu-open { overflow: hidden; }
  .footer { margin-top: 1em; }
  #content { margin-left: 0; padding: var(--gap); }
  .stack img, .stack video, .slideshow img, .slideshow video, .fragment img { width: 100%; max-height: none; }
  /* images placed between the paragraphs by site.js */
  .text > figure { margin: 1.6em 0 2em; }
  .text > figure img, .text > figure video { display: block; width: 100%; height: auto; }
  .text > figure .embed { max-width: none; }
  .horizontal { margin-right: calc(-1 * var(--gap)); }
  .horizontal img, .horizontal video { height: 55vh; }
}