/* Project pages — the constellation's design system, wearing our layout.
 *
 * These pages hand their appearance over to assets/ds outright. Paper ground,
 * ink text, hard black rules, sharp corners, Playfair over-large with Space
 * Mono underneath. site.css is deliberately not loaded: the splatter ground
 * and the wordmark plate belong to the index and nowhere else, and overriding
 * them here would be a fight rather than a decision.
 *
 * What stays ours is the shape: a masthead, one mark, a little to read, and
 * the door out. And the footer, where the system's own persistent slate
 * lockup bar carries our name back to us.
 *
 * Each subject keeps one accent, which is how the system already works --
 * lilac is described in colors.css as "the one accent, the mark's chip". Here
 * the chip is whichever mark the page is about.
 */

/* Our mark only, for the lockup. Everything else speaks the system's voice. */
@font-face {
  font-family: BrandFont;
  src: url('../fonts/Angelic Serif.ttf') format('truetype');
}

body.project {
  margin: 0;
  background: var(--surface);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--mono-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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; }

/* ---------------------------------------------------------------- sheet -- */

.sheet {
  flex: 1 0 auto;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-9) var(--gutter) var(--space-8);
  box-sizing: border-box;
}

/* The system doubles down on the little it puts on the page, so the name is
   allowed to be the largest thing here by a wide margin. */
.masthead h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--display-1);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  text-shadow: var(--shadow-display);
}

/* The canonical heavy underline. */
.masthead::after {
  content: "";
  display: block;
  height: var(--rule);
  background: var(--border);
  margin: var(--space-5) 0 var(--space-6);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The mark sits on its own chip, the one soft-cornered thing the system
   allows, in the subject's colour rather than the system's lilac. */
.chip {
  display: inline-flex;
  padding: var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--chip);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
}
.chip img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
}

.tagline {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--display-3);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  max-width: 28ch;
}

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

/* Hard-edged, the way the system draws everything except the chip. */
.visit a {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius-none);
  background: var(--surface);
  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;
}
.visit a:hover { background: var(--chip); color: var(--chip-ink); }
.visit .host {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--mono-caption);
  color: var(--text-muted);
}

/* --------------------------------------------------------------- lockup -- */

/* The system's persistent slate bar. It is the one place these pages speak as
   us rather than as the subject, so it carries our mark and the way back. */
.lockup {
  flex: 0 0 auto;
  min-height: var(--footer-h);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--gutter);
  box-sizing: border-box;
}
.lockup a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-on-inverse);
  text-decoration: none;
  font-family: BrandFont, Georgia, serif;
  font-size: 1.4rem;
}
.lockup a img { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.lockup a:hover { color: var(--accent); }
.lockup .rights {
  font-size: var(--mono-caption);
  letter-spacing: var(--tracking-caps);
  color: var(--text-on-inverse-dim);
  text-align: right;
}

@media (max-width: 640px) {
  .sheet { padding-top: var(--space-7); }
  .lockup { flex-direction: column; align-items: flex-start; }
  .lockup .rights { text-align: left; }
}