/* ───────── Pilot Showcase — the five-panel sheet ─────────
   Christo's collage logic: one large frame, supporting frames, technical
   annotations in the margin. data-hero on .sheet decides which panel takes
   the large frame; the rest auto-place in DOM order. */

.sheet{margin-top:44px;display:grid;gap:14px;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "hero hero ."
    "hero hero ."
    ".    .    notes"}
.sheet[data-hero="mission"] .pn-mission,
.sheet[data-hero="human"]   .pn-human,
.sheet[data-hero="motion"]  .pn-motion,
.sheet[data-hero="machine"] .pn-machine,
.sheet[data-hero="god"]     .pn-god{grid-area:hero}
.pn-notes{grid-area:notes}

.pn{margin:0;border:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column;min-width:0}
.pn img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}
.pn-machine img{object-fit:contain;background:#0e1113}
.sheet[data-hero="mission"] .pn-mission img,
.sheet[data-hero="human"]   .pn-human img,
.sheet[data-hero="motion"]  .pn-motion img,
.sheet[data-hero="machine"] .pn-machine img,
.sheet[data-hero="god"]     .pn-god img{aspect-ratio:auto}
.pn figcaption{padding:10px 12px 12px;border-top:1px solid var(--hair);font-size:12px;line-height:1.5;color:var(--ink-2)}
.pn figcaption i{display:block;font-family:'Plex',monospace;font-style:normal;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:4px}
.pn figcaption b{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.pn figcaption span{display:block;font-size:11.5px;color:var(--mid)}

/* An unflown panel is drawn as an empty, hatched frame and says why. */
.pn-empty .empty{flex:1;min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:24px;gap:8px;
  background:repeating-linear-gradient(135deg,transparent 0 9px,var(--hair) 9px 10px)}
.pn-empty .empty i{font-family:'Plex',monospace;font-style:normal;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);background:var(--paper);padding:4px 10px;border:1px solid var(--ink)}
.pn-empty .empty span{font-size:12px;color:var(--ink-2);max-width:28ch;background:var(--paper);padding:2px 6px}

/* Margin annotations, drawing-note register. */
.pn-notes{border:1px solid var(--ink);background:var(--paper);padding:14px 16px;font-size:12px;line-height:1.55}
.pn-notes > i{display:block;font-family:'Plex',monospace;font-style:normal;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px}
.pn-notes dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:5px}
.pn-notes dt{font-family:'Plex',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);padding-top:2px}
.pn-notes dd{margin:0;color:var(--ink-2)}

.story{margin-top:40px;max-width:66ch}
.story p{font-size:15.5px;line-height:1.65;color:var(--ink-2)}

/* Index of installations */
.installs{margin-top:40px;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.inst{border:1px solid var(--ink);background:var(--paper);text-decoration:none;color:inherit;display:block;transition:transform .3s}
.inst:hover{transform:translateY(-3px)}
.inst img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.inst div{padding:12px 14px 14px}
.inst i{display:block;font-family:'Plex',monospace;font-style:normal;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.inst b{display:block;font-size:17px;font-weight:500;letter-spacing:-.02em;margin:6px 0 4px;color:var(--ink)}
.inst span{font-size:12.5px;color:var(--mid)}

@media(max-width:900px){
  .sheet{grid-template-columns:1fr 1fr;grid-template-areas:"hero hero" ". ." ". ." "notes notes"}
}
@media(max-width:600px){
  .sheet{grid-template-columns:1fr;grid-template-areas:"hero" "." "." "." "." "notes"}
  .pn img{aspect-ratio:4/3}
}