/* Open project: description column beside the gallery, plus prev/next.
   Proportions and type scale follow assets-2/Materials/websitelayout-02.jpg. */

#project-pages:empty { display: none; }

.project-page { min-height: 400px; margin-bottom: var(--stack); }

.project-meta {
  float: left;
  width: var(--meta-col);
  padding-right: var(--meta-gap);
}

/* Title and credits are centred in the column; the body stays left-aligned.
   The rule under the title stops short of both column edges. */
/* Scoped: #project-thumbs uses .project-title too, and must not inherit the
   rule, indent, or display face meant for the open project. */
.project-page .project-title {
  display: block;
  width: 88%;
  margin: 0 auto;
  padding: 0 0 0.45em;
  border-bottom: 1px solid var(--pink);
  font-family: var(--font-title);
  font-size: var(--fs-title);
  font-weight: 400;
  font-style: normal;   /* the base h2 rule is italic; the title is not */
  letter-spacing: 0;
  line-height: 1.35;
  text-align: center;
  /* Centred text needs even line lengths; without this a long title drops a
     single orphaned word onto the second line. */
  text-wrap: balance;
  text-transform: none;
  color: var(--ink);
}

.project-credits {
  margin: 1em 0 2.6em;
  font-family: var(--font-body);
  font-size: var(--fs-credits);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  text-transform: none;
  color: var(--ink);
}

.project-description {
  padding-left: 1.7em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.project-gallery {
  float: right;
  width: calc(100% - var(--meta-col));
}

/* ---- slideshow -------------------------------------------------------- */

.gallery { position: relative; }

.gallery-stage {
  position: relative;
  aspect-ratio: var(--stage-ratio);
  background: transparent;
  line-height: 0;
}

.gallery-slide { display: none; position: absolute; inset: 0; }
.gallery-slide.is-active { display: block; }

/* Contained, never cropped, and pinned to the top of the stage so mixed
   orientations share one slideshow without the image jumping about. */
.gallery-slide img,
.gallery-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

/* ---- prev / next over the image --------------------------------------- */

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--arrow-w);
  height: var(--arrow-h);
  background: var(--arrow-bg);
  color: var(--arrow-fg);
  transition: color var(--speed) ease;
}
/* Straddling the edge, half over the image and half outside it. */
.gallery-arrow.is-prev { left: 0; transform: translate(-50%, -50%); }
.gallery-arrow.is-next { right: 0; transform: translate(50%, -50%); }
.gallery-arrow:hover { color: var(--ink); }
.gallery-arrow svg { width: 42%; height: 42%; }

/* ---- thumbnail strip -------------------------------------------------- */

/* One row always: projects run to 22 items, and a wrapping strip pushed the
   page down by several rows of thumbnails. Overflow scrolls sideways instead.
   `safe center` centres a short strip but falls back to flush-left once the
   row overflows — plain `center` would put the first thumbnails in negative
   scroll space, where they cannot be reached. */
.gallery-thumbs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  align-items: center;
  gap: var(--thumb-gap);
  margin-top: var(--thumb-strip);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* The strip is driven by the arrows, the thumbnails and drag; a scrollbar
     under the row would read as chrome in a layout that has none. */
  scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }

/* The only cue that the row continues past the edge. JS sets the two classes
   from the scroll position, so a fade appears exactly when there is more in
   that direction and never at either end of the travel. */
.gallery-thumbs {
  --fade-left: 0px;
  --fade-right: 0px;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--fade-left),
    #000 calc(100% - var(--fade-right)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--fade-left),
    #000 calc(100% - var(--fade-right)), transparent 100%);
}
.gallery-thumbs.can-scroll-left { --fade-left: 3.5em; }
.gallery-thumbs.can-scroll-right { --fade-right: 3.5em; }

/* Uniform height, width following each image's own aspect. Safe now that
   the strip loads purpose-built thumbnail files rather than full images. */
.gallery-thumb {
  flex: 0 0 auto;
  height: var(--thumb-h);
  line-height: 0;
  opacity: 0.55;
  transition: opacity var(--speed) ease;
}
.gallery-thumb img { height: 100%; width: auto; display: block; }
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.is-active { opacity: 1; }

/* A video with no poster frame: a play glyph on a tinted tile. */
.gallery-thumb.is-video { position: relative; }
.gallery-thumb .thumb-video-glyph {
  display: block;
  height: 100%;
  width: calc(var(--thumb-h) * 16 / 9);
  background: var(--arrow-bg);
}
.gallery-thumb .thumb-video-glyph::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--ink);
}

.gallery-thumbs:has(.gallery-thumb:only-child) { display: none; }

/* ---- controls --------------------------------------------------------- */

/* Pinned to the foot of the viewport so a long description never scrolls the
   back link and prev/next away. Sticky rather than fixed: it rides the bottom
   edge only while there is page below it, then settles into its designed
   position at the end of the article, as in the layout reference.
   The margin (not painted) keeps that settled spacing; the padding (painted)
   keeps the pinned bar compact. */
.project-controls {
  clear: both;
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: calc(var(--stack) * 1.8);
  padding: 1.15em 0;
  /* Matches body::before exactly — same image, same viewport-relative
     positioning — so the bar masks the text scrolling under it without
     showing a seam in the paper. */
  background: var(--ground) var(--paper) center / cover no-repeat fixed;
  font-family: var(--font-body);
  font-size: var(--fs-controls);
  font-weight: 400;
  letter-spacing: var(--ls-nav);
  line-height: 1.6em;
  text-transform: uppercase;
}
body.page-open .project-controls { display: block; }

/* A short fade above the bar so text dissolves rather than meeting a hard
   horizontal cut. It carries the same paper, masked to fade out upwards —
   not a gradient to a flat colour, which would leave a visibly lighter band
   over the texture once the bar has settled and there is nothing to hide. */
.project-controls::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 2.6em;
  pointer-events: none;
  background: var(--ground) var(--paper) center / cover no-repeat fixed;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}

.project-controls .back-link {
  float: left;
  margin-left: 2.4em;
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.project-controls .back-link:hover { color: var(--pink-deep); }

.project-controls .project-nav {
  float: right;
  color: var(--pink);
}
.project-controls .project-nav button {
  color: var(--pink);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.project-controls .project-nav button:hover:not([disabled]) { color: var(--pink-deep); }
.project-controls .project-nav button[disabled] {
  cursor: default;
  color: var(--muted);
}

@media (max-width: 767px) {
  .project-meta,
  .project-gallery {
    float: none;
    width: 100%;
    padding-right: 0;
  }
  .project-page .project-title { width: 100%; }
  .project-description { padding-left: 0; }
  .project-gallery { margin-top: 2.5em; }
  .project-controls .back-link { margin-left: 0; }
  /* Inside the edges on small screens, where there is no room outside. */
  .gallery-arrow.is-prev { transform: translate(0, -50%); }
  .gallery-arrow.is-next { transform: translate(0, -50%); }
}