:root {
  --page-width: 320mm;
  --page-height: 180mm;
  --viewport-gutter: clamp(16px, 2vw, 28px);
  --page-stack-gap: clamp(18px, 2vw, 28px);
  --page-shell-pad: clamp(18px, 2.4vw, 40px);
  --page-radius: clamp(14px, 1.8vw, 18px);
  --page-width-screen: min(1280px, calc(100vw - (var(--viewport-gutter) * 2)));
  --page-height-screen: calc(var(--page-width-screen) * 0.5625);
  --bg: #f1f0ec;
  --bg-accent: #faf9f6;
  --page-border: rgba(17, 17, 17, 0.05);
  --page-shadow: 0 22px 52px rgba(0, 0, 0, 0.06), 0 3px 12px rgba(0, 0, 0, 0.03);
}

@font-face {
  font-family: "Panton Light";
  src: url("./fonts/Panton-Light-BG.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: block;
}

@font-face {
  font-family: "Panton Regular";
  src: url("./fonts/Panton-Regular-BG.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Panton SemiBold";
  src: url("./fonts/Panton-SemiBold-BG.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: "Panton Bold";
  src: url("./fonts/Panton-Bold-BG.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: "Panton Black";
  src: url("./fonts/Panton-Black-BG.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: radial-gradient(circle at top, var(--bg-accent) 0%, var(--bg) 68%);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.brandbook {
  width: min(100%, calc(var(--page-width-screen) + (var(--viewport-gutter) * 2)));
  margin: 0 auto;
  padding: var(--page-shell-pad) var(--viewport-gutter) calc(var(--page-shell-pad) + 24px);
}

.page {
  width: var(--page-width-screen);
  height: var(--page-height-screen);
  margin: 0 auto var(--page-stack-gap);
  background: #fff;
  border: 1px solid var(--page-border);
  border-radius: var(--page-radius);
  box-shadow: var(--page-shadow);
  overflow: hidden;
  page-break-after: always;
  break-after: page;
}

.page:last-child {
  margin-bottom: 0;
}

.page-svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.page-svg text {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  white-space: pre;
  dominant-baseline: text-before-edge;
}

.page-svg image {
  image-rendering: auto;
  shape-rendering: geometricPrecision;
  backface-visibility: hidden;
}

.page-component {
  overflow: hidden;
}

@page {
  size: 320mm 180mm;
  margin: 0;
}

@media print {
  :root {
    --page-width-screen: var(--page-width);
    --page-height-screen: var(--page-height);
    --page-shell-pad: 0;
    --page-stack-gap: 0;
  }

  html,
  body {
    background: #fff;
  }

  .brandbook {
    width: auto;
    margin: 0;
    padding: 0;
  }

  .page {
    width: var(--page-width);
    height: var(--page-height);
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .page:last-child {
    page-break-after: auto;
    break-after: auto;
  }
}

@media (max-width: 900px) {
  :root {
    --viewport-gutter: 12px;
    --page-shell-pad: 16px;
    --page-stack-gap: 20px;
  }

  .page {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.05);
  }
}