/* A project's own page (El Pati, BIVAC…): as on the homepage, the
   lettering grey, titles lime, headings fluo turquoise, dates pink.
   The name (back home) and the languages at the top; then the pictures, all
   in one place (one big, the rest small underneath: click to change), and
   beside them the title, the role, the text and the links. On a computer
   the whole page fits the window. */
:root { --grey: #7d7d7d; --lime: #8fe000; --turquoise: #00dcd0; --pink: #ff2e93; --page: #efefef; }
html, body.project { background: var(--page); }
/* (no swiping back a page sideways, and no browser arrow for it) */
html:has(body.project) { overscroll-behavior-x: none; }
body.project { overscroll-behavior-x: none; }
body.project { color: var(--grey); font-size: 13px; line-height: 1.6; }
.project a { text-decoration: underline; }
.project a[target="_blank"]::after { content: " ↗"; }
.project p + p { margin-top: 1em; }

.project .bar { padding: 16px 28px; }
.project .bar .home { text-decoration: none; font-weight: bold; }
.project .bar .home::before { content: "← "; color: var(--pink); }
.project .langs { top: 16px; right: 28px; }

.project main {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 28px 32px;
}

/* the pictures: the one shown, its number, and all of them small */
.viewer { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.viewer .stage { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }   /* (no band beside an upright picture) */
.viewer .stage img { display: block; max-width: 100%; max-height: 66svh; width: auto; height: auto; object-fit: contain; }
.viewer .thumbs { display: none; }   /* (the list of the pictures: shown one at a time, above) */

/* the words */
.about-project h1 { font-size: 22px; line-height: 1.2; color: var(--lime); margin-bottom: 6px; }
.about-project .role { margin-bottom: 20px; }
.about-project .text { font-size: 12px; line-height: 1.6; }
.about-project h2 { font-size: 13px; font-weight: normal; color: var(--turquoise); margin: 24px 0 8px; }
.about-project .links { margin-top: 1.2em; }

/* a list of events: the date on the left */
.events { list-style: none; font-size: 12px; }
.events li { display: grid; grid-template-columns: 7em 1fr; gap: 0 12px; padding: 4px 0; }
.events time { color: var(--pink); }
.events b { color: var(--lime); font-weight: normal; }

/* the four F's: four small drawings in a row, their names under them */
.fours { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.fours figure { margin: 0; }
.fours img { display: block; width: auto; height: 64px; }
.fours figcaption { margin-top: 4px; font-size: 12px; color: var(--lime); }

/* a computer: all in the window */
@media (min-width: 900px) and (min-height: 600px) {
  body.project { height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
  .project main { flex: 1; min-height: 0; width: 100%; }
  .about-project { overflow-y: auto; scrollbar-width: none; min-height: 0; }
  .about-project::-webkit-scrollbar { display: none; }
}
@media (max-width: 899px) {
  .project main { grid-template-columns: 1fr; gap: 24px; }
  .project .langs { position: static; justify-content: flex-end; margin: 12px 28px 0; }
}

/* a single picture: no numbers, no small ones */
.viewer.one .stage { cursor: default; }

/* three tiny grey dots under the picture, to say there are more (a click
   on it shows the next) */
.viewer .dots { display: flex; justify-content: center; gap: 5px; padding-top: 4px; }
.viewer .dots i { width: 3px; height: 3px; border-radius: 50%; background: #b5b5b5; }
.viewer.one .dots { display: none; }

/* a line under the picture (like @elpati), in the middle */
.viewer .under { text-align: center; font-size: 12px; }

/* a computer: the words smaller, at the bottom on the right, their last
   line level with the bottom of the picture (the dots and the line under
   the picture hang below it, outside the column's height) */
@media (min-width: 900px) {
  .project main { align-items: end; }
  .viewer { position: relative; }
  .viewer .dots, .viewer .under { position: absolute; left: 0; right: 0; }
  .viewer .dots { top: calc(100% + 8px); }
  .viewer .under { top: calc(100% + 22px); }
  .project main { padding-bottom: 64px; }
  .about-project h1 { font-size: 18px; }
  .about-project .role { font-size: 12px; margin-bottom: 14px; }
  .about-project .text { font-size: 11px; line-height: 1.55; }
  .about-project h2 { font-size: 12px; margin: 16px 0 6px; }
  .events, .fours figcaption { font-size: 11px; }
  .events li { grid-template-columns: 8.5em 1fr; padding: 2px 0; }
}