/* A brand presentation board keeps the approved Figma composition and original
   vector canvas. Its layout scales as one artwork alongside the web recording. */
.project-brand-presentation {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--brand-board-width) / var(--brand-board-height);
  width: calc(100% - var(--gutter-start, var(--gutter)) - var(--gutter-end, var(--gutter)));
  margin: var(--section-space) var(--gutter);
  margin-inline: var(--gutter-start, var(--gutter)) var(--gutter-end, var(--gutter));
  background: #fff;
  color: #000;
  overflow: hidden;
  font-family: Inter, Arial, sans-serif;
}
.project-brand-symbol { position: absolute; left: var(--brand-symbol-x); top: var(--brand-symbol-y); width: var(--brand-symbol-width); height: var(--brand-symbol-height); max-width: none; }
.project-brand-page, .project-brand-series, .project-brand-variation { position: absolute; font-weight: 400; line-height: normal; white-space: nowrap; }
.project-brand-page { left: 3.333333%; top: 4.814815%; font-size: calc(22 / var(--brand-board-width) * 100cqi); letter-spacing: calc(.5 / var(--brand-board-width) * 100cqi); opacity: .68; }
.project-brand-series { left: 39.583333%; top: 4.814815%; width: 20.833333%; text-align: center; font-size: calc(24 / var(--brand-board-width) * 100cqi); line-height: 1.208333; letter-spacing: calc(.35 / var(--brand-board-width) * 100cqi); }
.project-brand-variation { left: 49.21875%; top: 92.962963%; font-size: calc(16 / var(--brand-board-width) * 100cqi); letter-spacing: calc(.5 / var(--brand-board-width) * 100cqi); }