/* ============================================================
   ROBERT BURNS — robertburns.uk
   Main stylesheet (desktop layout).
   
   First-pass approach: each section uses the extracted page SVG
   as the canvas (carries all blue typography, body copy, nav,
   brand logos, handwritten elements, dot portrait). Raster images
   and the MP4 sit on top at percentage coordinates derived from
   the source AI/PDF placement matrices.
   
   The .showcase__inner uses CSS aspect-ratio to lock proportions
   to the source canvas dimensions, so the SVG's intrinsic ratio
   is preserved and all absolute-percentage children scale together.
   ============================================================ */

:root {
  --colour-blue:  #2c56eb;
  --colour-cream: #fdf6ee;
}

html, body {
  background: var(--colour-cream);
}

body {
  overflow-x: hidden;
}

/* ---------- Canvas containers ---------- */
.canvas {
  width: 100%;
}

/* Desktop canvas hidden on mobile, mobile canvas hidden on desktop. */
.canvas--mobile { display: none; }

@media (max-width: 759px) {
  .canvas--desktop { display: none; }
  .canvas--mobile  { display: block; }
}

/* ---------- Showcase sections ---------- */
.showcase {
  width: 100%;
  background: var(--colour-cream);
  display: flex;
  justify-content: center;
}

.showcase__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  /* aspect-ratio comes from inline style on each section */
}

/* SVG canvas: the typography and vector layer */
.showcase__svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Raster + video assets layer over the SVG. Positions are percentages,
   which means they scale with the showcase__inner container. */
.asset {
  position: absolute;
  z-index: 2;
  object-fit: cover;
}

.asset--video {
  background: #000;
}

/* About / Contact section. Page 4 SVG carries everything. */
.showcase--about .showcase__inner {
  max-width: 1440px;
}

/* ---------- Mobile nav defaults (hidden on desktop) ---------- */
.mobile-nav {
  display: none;
}