/* Printed guides: the paper pieces shared by the visitor guide (Serious Wing)
   and the gallery guide (the Index in the exhibition). Layout lives with each page. */

.sheet {
  --guide-paper: #fbfaf7;
  --guide-ink: #111111;
  background: var(--guide-paper);
  color: var(--guide-ink);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 28px 56px -28px rgba(0, 0, 0, 0.5);
}

/* Spot colour: a room tint, deepened so it prints legibly on paper. */
.sheet, [style*="--tint"] { --spot: var(--tint); }
@supports (color: oklch(from red l c h)) {
  .sheet, [style*="--tint"] { --spot: oklch(from var(--tint) calc(l * 0.66) calc(c * 4.5) h); }
}
/* A leaflet with its own tint carries it along the top edge. */
.sheet[style*="--tint"] { border-top: 8px solid var(--spot); }

/* Panels. Each fold is a faint crease: a hairline, a highlight, and shading that
   alternates so the sheet reads as concertina-folded (valley, then mountain). */
.panel {
  position: relative;
  padding: var(--panel-pad, 56px 64px);
}
.panel + .panel {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.panel:nth-child(even) { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.035), rgba(0, 0, 0, 0) 48px); }
.panel:nth-child(odd):not(:first-child) { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 48px); }
.panel > * + * { margin-top: 18px; }

/* Printed masthead. */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--guide-ink);
}
.masthead-mark { font-family: var(--display, "Archivo"), sans-serif; font-weight: 900; font-stretch: 62%; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; }
.masthead-title { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }

/* Wayfinding signs: numbered section headings, like the exhibition's floor-plan tooltip. */
.sign {
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 7px 14px 8px;
  background: var(--guide-ink); color: var(--guide-paper);
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1.4;
}
.sign-no { font-weight: 800; letter-spacing: 0.06em; }
.sign + * { margin-top: 26px !important; }

@media (max-width: 760px) {
  .sheet { --panel-pad: 36px 20px; }
}