/* Project pages — this site's exhibit shape, wearing the constellation's
 * palette and type.
 *
 * The layout is ours and is identical from project to project: the title
 * stack, the sticky links bar across the middle, one centred panel, and a
 * footer that sits at the end of the content rather than pinned to the
 * viewport. Only the words and the accent change.
 *
 * assets/ds supplies colour and type and nothing else. It ships no classes --
 * every file in it declares only :root custom properties and @font-face -- so
 * there is nothing to inherit structurally even if we wanted to. That is the
 * right shape for this: a palette to adopt, not a page to copy.
 *
 * The one place the system is worn plainly is the panel. Its own colours.css
 * calls itself "black ink on white paper"; the panel is that paper, sitting
 * inside this site's dark frame.
 */

body.project {
  --chip: var(--lilac);
  --chip-ink: var(--ink);
}
body.project.anecdote { --chip: var(--lilac); --chip-ink: var(--ink); }
body.project.nccv     { --chip: var(--slate); --chip-ink: var(--cream); }
body.project.fcpm     { --chip: #ffc61a;      --chip-ink: #101010; }

/* No album art behind these, and the index keeps the splatter to itself. */
body.project #bg { background-image: none; }

/* --------------------------------------------------------------- head -- */

body.project #title,
body.project #title-stroke {
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: var(--display-2);
  font-weight: var(--weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin: 0.15em 0 0;
  -webkit-text-stroke-width: 10px;
}
body.project #title { color: var(--cream); }
/* site.css keeps #title-stack on one line for the wordmark; a project name
   is not a wordmark. */
body.project #title-stack { white-space: normal; }

body.project #bg > .pair h2 {
  font-family: var(--font-mono);
  font-size: var(--mono-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--cream-dim);
  text-shadow: none;
}

/* ---------------------------------------------------------------- bar -- */

/* The same anchor bar the exhibits use. The right half holds the way out;
   the left is deliberately empty for whatever wants to live there later. */
body.project #chapters-control .tabs { min-height: 45px; }

body.project #music-control a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--mono-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
body.project #music-control img { border-radius: var(--radius-sm); }

/* -------------------------------------------------------------- panel -- */

/* Two traps here, both from the surrounding template. showcase.css styles
   `#showcase .content`, which outranks a plain `.content` rule and was adding
   20px side margins to a 100%-wide box -- 450 against a 430 viewport. And
   auto side margins would not help: on a flex item they shrink it to fit its
   text instead of centring a full-width box. So the width does the gutter and
   align-self does the centring, with no auto margin anywhere. */
body.project #showcase .content {
  box-sizing: border-box;
  width: min(44rem, 100% - 2.5rem);
  align-self: center;
  margin: var(--space-7) 0 var(--space-8);
  background-color: var(--surface);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-6) var(--space-5);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--mono-body);
  line-height: var(--leading-body);
}

body.project .feature {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}
body.project .feature img {
  width: 88px;
  height: 88px;
  padding: var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--chip);
  box-shadow: var(--shadow-card);
}

body.project .tagline {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--display-3);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  text-align: center;
}

body.project .note { margin: 0 0 var(--space-5); }
/* Written later; the placeholder lives in css so filling it in deletes
   nothing. */
body.project .note:empty { display: block; min-height: 4rem; }
body.project .note:empty::before { content: "\2026"; color: var(--text-muted); }

body.project .visit { margin: 0; text-align: center; }
body.project .visit a {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius-none);
  color: var(--text-strong);
  text-decoration: none;
  font-size: var(--mono-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transition: background-color 0.15s, color 0.15s;
}
body.project .visit a:hover { background: var(--chip); color: var(--chip-ink); }
body.project .visit .host {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--mono-caption);
  color: var(--text-muted);
}

/* Ends the content, the way this site's footers do. Not pinned anywhere. */
body.project #footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-faint);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--mono-caption);
  letter-spacing: var(--tracking-caps);
}
body.project #footer img { border-radius: var(--radius-sm); }