@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("./assets/fonts/montserrat-latin-ext-variable.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02ba, U+02bd-02c5, U+02c7-02cc, U+02ce-02d7, U+02dd-02ff,
    U+0304, U+0308, U+0329, U+1d00-1dbf, U+1e00-1e9f, U+1ef2-1eff,
    U+2020, U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f,
    U+a720-a7ff;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("./assets/fonts/montserrat-latin-variable.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
    U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+20ac, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("./assets/fonts/geist-mono-symbols2-variable.woff2")
    format("woff2-variations");
  unicode-range:
    U+2000-2001, U+2004-2008, U+200a, U+23b8-23bd, U+2500-259f;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("./assets/fonts/geist-mono-latin-ext-variable.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02ba, U+02bd-02c5, U+02c7-02cc, U+02ce-02d7, U+02dd-02ff,
    U+0304, U+0308, U+0329, U+1d00-1dbf, U+1e00-1e9f, U+1ef2-1eff,
    U+2020, U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f,
    U+a720-a7ff;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("./assets/fonts/geist-mono-latin-variable.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
    U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+20ac, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.491 0.27 292.581);
  --dark-background: oklch(0.185 0.013 322);
  --dark-foreground: oklch(0.985 0 0);
  --dark-primary: oklch(0.432 0.232 292.759);
  --paper-soft: oklch(0.97 0.006 310);
  --paper-mid: oklch(0.925 0.012 310);
  --muted: oklch(0.43 0.015 320);
  --rule: oklch(0.82 0.018 310);
  --page-w: 210mm;
  --page-h: 297mm;
  --safe: 16mm;
}

@page {
  size: A4;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  background: oklch(0.88 0.01 310);
  color: var(--foreground);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 12mm 0;
}

main {
  display: grid;
  gap: 12mm;
  justify-content: center;
}

.page {
  background: var(--background);
  break-after: page;
  break-inside: avoid;
  color: var(--foreground);
  display: grid;
  grid-template-rows: 13mm minmax(0, 1fr) 8mm;
  height: var(--page-h);
  overflow: hidden;
  padding: var(--safe);
  position: relative;
  width: var(--page-w);
  box-shadow: 0 3mm 10mm oklch(0.15 0.01 320 / 0.18);
}

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

.page[data-overflow="true"]::after {
  background: #d90000;
  color: white;
  content: "OVERFLOW";
  font: 700 8pt/1 "Geist Mono", monospace;
  padding: 2mm;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}

.page--dark {
  background: var(--dark-background);
  color: var(--dark-foreground);
}

.page__header,
.page__footer {
  align-items: center;
  display: flex;
  font-family: "Geist Mono", monospace;
  font-size: 6.4pt;
  font-weight: 520;
  justify-content: space-between;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page__header {
  border-bottom: 0.25mm solid currentColor;
  opacity: 0.72;
}

.page__footer {
  align-self: end;
  border-top: 0.25mm solid currentColor;
  opacity: 0.72;
}

.page__body {
  min-height: 0;
  overflow: hidden;
  padding: 9mm 0 7mm;
}

.page__body--flush {
  padding-bottom: 0;
  padding-top: 0;
}

.eyebrow,
.label {
  font-family: "Geist Mono", monospace;
  font-size: 7pt;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--primary);
}

.page--dark .eyebrow {
  color: oklch(0.78 0.15 296);
}

h1,
h2,
h3,
p,
ul,
ol,
blockquote,
figure,
table {
  margin-top: 0;
}

blockquote,
q {
  font-style: italic;
}

h1,
h2,
h3 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.03em;
}

h1 {
  font-size: 35pt;
  font-weight: 720;
  line-height: 0.98;
  margin-bottom: 8mm;
  max-width: 160mm;
}

h2 {
  font-size: 24pt;
  font-weight: 690;
  line-height: 1.04;
  margin-bottom: 6mm;
  max-width: 158mm;
}

.page--catalogue h2 {
  font-size: 22pt;
  max-width: none;
}

h3 {
  font-size: 11pt;
  font-weight: 690;
  line-height: 1.15;
  margin-bottom: 2.5mm;
}

p,
li {
  font-size: 8.8pt;
  line-height: 1.43;
}

p {
  margin-bottom: 3.2mm;
}

ul,
ol {
  margin-bottom: 4mm;
  padding-left: 5mm;
}

li {
  margin-bottom: 1.5mm;
  padding-left: 1mm;
}

strong {
  font-weight: 720;
}

code,
.mono {
  font-family: "Geist Mono", monospace;
  font-size: 0.92em;
}

a {
  color: inherit;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 0.35mm;
  text-underline-offset: 0.8mm;
}

.lede {
  font-size: 13pt;
  font-weight: 430;
  letter-spacing: -0.015em;
  line-height: 1.36;
  max-width: 157mm;
}

.small,
.small li {
  font-size: 7.25pt;
  line-height: 1.38;
}

.muted {
  color: var(--muted);
}

.page--dark .muted {
  color: currentColor;
  opacity: 0.72;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 5mm;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-2--wide {
  grid-template-columns: 1.25fr 0.75fr;
}

.grid-2--technical {
  grid-template-columns: 0.8fr 1.2fr;
}

.stack {
  display: grid;
  gap: 4mm;
}

.align-start {
  align-items: start;
}

.space-before-4 {
  margin-top: 4mm;
}

.space-before-5 {
  margin-top: 5mm;
}

.space-before-6 {
  margin-top: 6mm;
}

.space-before-7 {
  margin-top: 7mm;
}

.space-before-8 {
  margin-top: 8mm;
}

.space-before-9 {
  margin-top: 9mm;
}

.space-before-10 {
  margin-top: 10mm;
}

.space-before-23 {
  margin-top: 23mm;
}

.plate,
.callout,
.rule-block,
.metric,
.do,
.dont {
  border: 0.25mm solid var(--rule);
  padding: 4mm;
}

.page--dark .plate,
.page--dark .callout,
.page--dark .rule-block {
  border-color: currentColor;
}

.callout--soft {
  background: var(--paper-soft);
}

.plate--dark {
  background: var(--dark-background);
  border-color: var(--dark-background);
  color: var(--dark-foreground);
}

.plate--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.plate--primary .eyebrow {
  color: white;
}

.callout {
  border-left: 1.8mm solid var(--primary);
}

.callout--spaced {
  margin-top: 5mm;
}

.dont {
  border-left: 1.8mm solid var(--foreground);
}

.do {
  border-left: 1.8mm solid var(--primary);
}

.metric__value {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 18pt;
  font-weight: 720;
  line-height: 1;
  margin-bottom: 2mm;
}

.metric__label {
  font-family: "Geist Mono", monospace;
  font-size: 6.2pt;
  line-height: 1.25;
  text-transform: uppercase;
}

.brand-hero {
  align-items: start;
  display: grid;
  gap: 14mm;
  grid-template-columns: 62mm 1fr;
  margin-top: 18mm;
}

.brand-hero img {
  display: block;
  height: auto;
  width: 100%;
}

.cover-lockup {
  display: block;
  margin-top: 33mm;
  width: 147mm;
}

.cover-meta {
  bottom: 28mm;
  display: grid;
  font-family: "Geist Mono", monospace;
  font-size: 7pt;
  gap: 1.5mm;
  left: 16mm;
  letter-spacing: 0.05em;
  position: absolute;
  text-transform: uppercase;
}

.logo-stage {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 38mm;
  padding: 6mm;
}

.logo-stage img {
  display: block;
  max-height: 31mm;
  max-width: 100%;
}

.logo-stage--dark {
  background: var(--dark-background);
}

.clear-space-demo {
  background:
    linear-gradient(var(--paper-mid) 0 0) 0 0 / 0.25mm 100% no-repeat,
    linear-gradient(var(--paper-mid) 0 0) 100% 0 / 0.25mm 100% no-repeat,
    linear-gradient(var(--paper-mid) 0 0) 0 0 / 100% 0.25mm no-repeat,
    linear-gradient(var(--paper-mid) 0 0) 0 100% / 100% 0.25mm no-repeat;
  padding: 12mm;
}

.clear-space-demo img {
  display: block;
  height: 38mm;
  margin: auto;
  width: auto;
}

.color-chip {
  border: 0.25mm solid var(--rule);
  min-height: 34mm;
  padding: 4mm;
}

.color-chip__sample {
  height: 13mm;
  margin: -4mm -4mm 4mm;
}

.color-chip code {
  display: block;
  font-size: 5.8pt;
  line-height: 1.45;
}

.type-specimen--heading {
  font-family: "Montserrat", sans-serif;
  font-size: 24pt;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.type-specimen--body {
  font-family: "Montserrat", sans-serif;
  font-size: 11pt;
  line-height: 1.45;
}

.type-specimen--mono {
  font-family: "Geist Mono", monospace;
  font-size: 8pt;
  line-height: 1.5;
}

.asset-preview {
  display: block;
  height: auto;
  margin: auto;
  max-height: 55mm;
  max-width: 100%;
  object-fit: contain;
}

.asset-preview--small {
  max-height: 33mm;
}

.asset-preview--icon {
  height: 34mm;
  width: 34mm;
}

.background-photo-proxy {
  background:
    linear-gradient(125deg, oklch(0.32 0.07 290), transparent 62%),
    repeating-linear-gradient(45deg, oklch(0.72 0.1 300) 0 3mm, oklch(0.38 0.05 320) 3mm 7mm);
  min-height: 65mm;
  padding: 9mm;
}

.photo-plate {
  background: white;
  padding: 7mm;
  width: 82mm;
}

.photo-plate img {
  display: block;
  width: 100%;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

caption {
  font-family: "Geist Mono", monospace;
  font-size: 6.3pt;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin-bottom: 2mm;
  text-align: left;
  text-transform: uppercase;
}

th,
td {
  border-bottom: 0.25mm solid var(--rule);
  overflow-wrap: anywhere;
  padding: 2.1mm 1.8mm;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--paper-soft);
  font-family: "Geist Mono", monospace;
  font-size: 6.1pt;
  font-weight: 720;
  letter-spacing: 0.035em;
  line-height: 1.25;
  text-transform: uppercase;
}

td {
  font-size: 6.8pt;
  line-height: 1.35;
}

.table--compact th,
.table--compact td {
  padding: 1.45mm 1.25mm;
}

.table--compact th {
  font-size: 5.35pt;
}

.table--compact td {
  font-size: 5.75pt;
  line-height: 1.23;
}

.table--catalogue th,
.table--catalogue td {
  padding: 1.1mm 1mm;
}

.table--catalogue th {
  font-size: 4.75pt;
}

.table--catalogue td {
  font-size: 5.05pt;
  line-height: 1.16;
}

.table--catalogue .path {
  font-family: "Geist Mono", monospace;
  width: 43%;
}

.table--catalogue .format {
  width: 8%;
}

.table--catalogue .dimensions {
  width: 11%;
}

.table--catalogue .appearance {
  width: 15%;
}

.table--catalogue .purpose {
  width: 23%;
}

.contents {
  display: block;
}

.contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contents li {
  border-bottom: 0.25mm solid var(--rule);
  display: grid;
  font-size: 7.7pt;
  gap: 3mm;
  grid-template-columns: 1fr auto;
  margin: 0;
  padding: 2mm 0;
}

.number-grid {
  display: grid;
  gap: 3mm;
  grid-template-columns: repeat(4, 1fr);
}

.number-grid > div {
  border-top: 0.7mm solid var(--primary);
  padding-top: 2mm;
}

.number-grid strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 14pt;
}

.anatomy-measurement {
  display: block;
  height: 45mm;
  width: 45mm;
}

.anatomy-measurement__guide {
  fill: none;
  opacity: 0.42;
  stroke: currentColor;
  stroke-dasharray: 2 2;
  stroke-width: 1;
}

.anatomy-measurement__dimension {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
}

.anatomy-measurement text {
  fill: currentColor;
  font-family: "Geist Mono", monospace;
  font-size: 8px;
  font-weight: 650;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  border-bottom: 0.25mm solid var(--rule);
  display: grid;
  grid-template-columns: 5mm 1fr;
  padding: 1.6mm 0;
}

.checklist li::before {
  border: 0.25mm solid currentColor;
  content: "";
  height: 2.2mm;
  margin-top: 0.8mm;
  width: 2.2mm;
}

.reference-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reference-list li {
  border-bottom: 0.25mm solid var(--rule);
  font-size: 6.1pt;
  line-height: 1.35;
  margin: 0;
  padding: 1.6mm 0;
}

.reference-list a {
  overflow-wrap: anywhere;
}

.cobrand-lockup {
  align-items: center;
  border: 0.25mm solid var(--rule);
  display: grid;
  gap: 8mm;
  grid-template-columns: 1fr auto 1fr;
  padding: 9mm;
}

.cobrand-lockup .logo-stage {
  min-height: 0;
  padding: 0;
}

.cobrand-lockup .logo-stage img {
  max-height: 20mm;
}

.cobrand-rule {
  align-self: stretch;
  background: var(--rule);
  justify-self: center;
  min-height: 22mm;
  width: 0.4mm;
}

.partner-slot {
  align-items: center;
  border: 0.4mm dashed var(--rule);
  color: var(--muted);
  display: flex;
  justify-content: center;
  min-height: 22mm;
}

.misuse-grid {
  display: grid;
  gap: 4mm;
  grid-template-columns: repeat(3, 1fr);
}

.misuse {
  border: 0.25mm solid var(--rule);
  border-left: 1.8mm solid var(--foreground);
  padding: 3mm;
}

.misuse .eyebrow {
  color: var(--foreground);
}

.misuse__stage {
  align-items: center;
  display: flex;
  height: 26mm;
  justify-content: center;
  margin: 2.5mm 0;
  overflow: hidden;
}

.misuse__stage--pale {
  background: var(--paper-soft);
}

.misuse__art {
  display: block;
  max-height: 15mm;
  max-width: 100%;
}

.misuse__type {
  font-family: "Montserrat", sans-serif;
  font-size: 17pt;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media print {
  html,
  body {
    background: transparent;
  }

  body {
    padding: 0;
  }

  main {
    display: block;
  }

  .page {
    box-shadow: none;
    margin: 0;
  }

  .page[data-overflow="true"]::after {
    display: none;
  }
}

@media (forced-colors: active) {
  .page,
  .plate,
  .callout,
  .rule-block,
  .metric,
  .do,
  .dont,
  .color-chip,
  .logo-stage,
  .photo-plate {
    background: Canvas;
    border-color: CanvasText;
    color: CanvasText;
    forced-color-adjust: auto;
  }
}