/* ============================================================
   XPRSHUN · Brand guidelines (document styles)
   Loaded after ../styles.css, which supplies the fonts, tokens and
   the shared cover, lockup and wordmark-crop components. Everything
   here is prefixed gl-. On screen the document is a stack of sheets;
   in print each section starts a page (A4 or Letter).
   ============================================================ */

:root {
  --page-w: 210mm;
  --page-h: 297mm;
  --gl-pad: 18mm;
}
:root[data-paper="letter"] {
  --page-w: 215.9mm;
  --page-h: 279.4mm;
}

html, body { background: var(--c-paper-3); }
body { color: var(--c-charcoal-2); }

.gl-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-paper-3);
}
.gl-toolbar__brand { display: flex; align-items: center; gap: var(--space-md); }
.gl-toolbar__brand img { height: 15px; width: auto; }
.gl-toolbar .actions { gap: var(--space-xs); }

.gl-doc {
  display: grid;
  justify-content: center;
  gap: 12mm;
  padding: 12mm 0 24mm;
}

/* A sheet: one or more printed pages */
.gl-sheet {
  position: relative;
  width: var(--page-w);
  min-height: var(--page-h);
  padding: var(--gl-pad) var(--gl-pad) 22mm;
  background: var(--c-paper);
  color: var(--c-charcoal-2);
  font-size: 10pt;
  line-height: 1.5;
}
.gl-sheet + .gl-sheet { break-before: page; }

.gl-folio {
  position: absolute;
  left: var(--gl-pad);
  right: var(--gl-pad);
  bottom: 10mm;
  display: flex;
  justify-content: space-between;
  font-size: 8.5pt;
  color: var(--c-bluegrey-deep);
  border-top: 1px solid var(--c-paper-3);
  padding-top: 3mm;
}

/* Cover page: the cover grammar, page-sized */
.gl-cover {
  page: cover;
  width: var(--page-w);
  height: var(--page-h);
  position: relative;
  overflow: hidden;
  background: var(--c-paper);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.gl-cover__photo { position: absolute; left: 0; top: 0; width: 100%; height: 66.667%; overflow: hidden; background: var(--c-charcoal-2); }
.gl-cover__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.gl-cover__photo::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-paper); background-size: 180px; opacity: 0.3; }
.gl-cover__band { position: absolute; left: 0; right: 0; top: 66.667%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7mm; }
.gl-cover__band::before { content: ""; position: absolute; inset: 0; background: url('../assets/img/mood/m03.jpg') center / cover; filter: brightness(1.072) saturate(0.6); opacity: 0.55; }
.gl-cover__wm { position: relative; width: 44%; }
.gl-cover__title { position: relative; font-family: var(--font-voice); font-style: italic; font-size: 24pt; line-height: 1; }
.gl-cover__meta {
  position: absolute;
  left: var(--gl-pad);
  right: var(--gl-pad);
  bottom: 12mm;
  display: flex;
  justify-content: space-between;
  font-size: 8.5pt;
  color: var(--c-bluegrey-deep);
}

/* Type */
.gl-kicker {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "FLAR" 50;
  font-size: 8.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-bluegrey-deep);
}
.gl-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "FLAR" 50;
  font-size: 8.5pt;
  letter-spacing: 0.08em;
  color: var(--c-gold-deep);
}
.gl-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "FLAR" 50;
  font-size: 30pt;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.gl-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "FLAR" 50;
  font-size: 24pt;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 3mm 0 0;
  max-width: 150mm;
  text-wrap: balance;
}
.gl-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11pt;
  line-height: 1.25;
  margin: 0 0 2mm;
}
.gl-lede { font-size: 12pt; line-height: 1.45; color: var(--c-stone-deep); max-width: 150mm; margin-top: 4mm; }
.gl-quote { font-family: var(--font-voice); font-style: italic; font-size: 13pt; line-height: 1.35; }
.gl-big-quote { font-family: var(--font-voice); font-style: italic; font-size: 20pt; line-height: 1.2; max-width: 150mm; text-wrap: balance; }
.gl-small { font-size: 9pt; color: var(--c-stone-deep); line-height: 1.45; }
.gl-cap { font-size: 9pt; color: var(--c-bluegrey-deep); line-height: 1.4; }
.gl-sheet p { margin: 0; }
.gl-sheet p + p { margin-top: 2.5mm; }

/* Section head */
.gl-head {
  display: grid;
  gap: 1mm;
  padding-bottom: 7mm;
  margin-bottom: 8mm;
  border-bottom: 1px solid var(--c-charcoal-2);
}
.gl-head__row { display: flex; gap: 4mm; align-items: baseline; }

/* Layout */
.gl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm 10mm; }
.gl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm 8mm; }
.gl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm 5mm; }
.gl-block + .gl-block { margin-top: 8mm; }
.gl-avoid { break-inside: avoid; }
.gl-rule { border: 0; border-top: 1px solid var(--c-paper-3); margin: 7mm 0; }

/* Lists */
.gl-list { list-style: none; padding: 0; margin: 0; }
.gl-list li { display: grid; grid-template-columns: 7mm 1fr; gap: 2mm; padding: 2.2mm 0; border-bottom: 1px solid var(--c-paper-3); break-inside: avoid; }
.gl-list li:first-child { border-top: 1px solid var(--c-paper-3); }
.gl-list .gl-n { font-family: var(--font-display); font-weight: 500; font-size: 8pt; letter-spacing: 0.06em; color: var(--c-bluegrey-deep); padding-top: 0.6mm; }
.gl-list strong { font-weight: 600; }
.gl-list svg { width: 4mm; height: 4mm; margin-top: 0.6mm; }
.gl-list--dont svg { color: var(--c-clay-deep); }
.gl-list--do svg { color: var(--c-charcoal-2); }
.gl-words { display: flex; flex-wrap: wrap; gap: 1.6mm; list-style: none; padding: 0; margin: 2mm 0 0; }
.gl-words li { padding: 0.6mm 2.6mm; border: 1px solid var(--c-paper-3); border-radius: 999px; font-size: 9pt; }

/* Tables */
.gl-table { width: 100%; border-collapse: collapse; font-size: 9pt; line-height: 1.4; }
.gl-table th { text-align: left; font-family: var(--font-display); font-weight: 500; font-size: 7.5pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-bluegrey-deep); padding: 0 3mm 2mm 0; border-bottom: 1px solid var(--c-charcoal-2); vertical-align: bottom; }
.gl-table td { padding: 2mm 3mm 2mm 0; border-bottom: 1px solid var(--c-paper-3); vertical-align: top; }
.gl-table tr { break-inside: avoid; }
.gl-table td.num, .gl-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gl-table .gl-row-h { font-weight: 600; width: 26%; }

/* Swatches */
.gl-swatch { break-inside: avoid; }
.gl-swatch__chip {
  height: 18mm;
  border-radius: 1.5mm 1.5mm 0 0;
  box-shadow: inset 0 0 0 0.3mm rgb(39 34 31 / 0.12);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.gl-swatch__meta { padding: 2mm 0 0; font-size: 8.5pt; line-height: 1.35; }
.gl-swatch__name { font-weight: 600; font-size: 9pt; }
.gl-swatch__ratios { display: flex; gap: 3mm; color: var(--c-stone-deep); font-variant-numeric: tabular-nums; }
.gl-dot { display: inline-block; width: 3.2mm; height: 3.2mm; border-radius: 50%; vertical-align: -0.5mm; margin-right: 1.5mm; box-shadow: inset 0 0 0 0.25mm rgb(39 34 31 / 0.2); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gl-strip { height: 12mm; border-radius: 1.5mm; background: var(--gradient-dawn); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gl-theme { padding: 6mm; border-radius: 2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gl-theme--paper { background: var(--c-paper-2); color: var(--c-charcoal-2); }
.gl-theme--dusk { background: var(--c-charcoal); color: var(--c-paper); }

/* Wordmark stages */
.gl-stage { display: flex; align-items: center; justify-content: center; padding: 12mm 10mm; border-radius: 2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gl-stage--paper { background: var(--c-paper-2); }
.gl-stage--dusk { background: var(--c-charcoal); color: var(--c-paper); }
.gl-stage img { width: 70%; }
.gl-stage .lockup { width: 100%; padding: 0; }
.gl-sheet .misuse { grid-template-columns: repeat(4, 1fr); gap: 4mm; }
.gl-sheet .misuse__stage { min-height: 24mm; padding: 3mm; border-radius: 1.5mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gl-sheet .misuse figcaption { font-size: 8pt; line-height: 1.3; }
.gl-sheet .misuse figcaption svg { width: 3.4mm; height: 3.4mm; }

/* Type specimens */
.gl-spec { display: grid; grid-template-columns: 42mm 1fr; gap: 6mm; padding: 5mm 0; border-top: 1px solid var(--c-paper-3); break-inside: avoid; }
.gl-spec__display { font-family: var(--font-display); font-weight: 500; font-size: 30pt; line-height: 1.02; letter-spacing: -0.01em; }
.gl-spec__voice { font-family: var(--font-voice); font-style: italic; font-size: 28pt; line-height: 1.05; }
.gl-spec__caps { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: 9pt; margin-top: 2mm; }

/* Cover diagram and photo */
.gl-cover-diagram { width: 82mm; }
.gl-cover-diagram .cg__label { font-size: 7pt; }
.gl-photo { border-radius: 0; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Motion curves */
.gl-curve { width: 26mm; height: 26mm; overflow: visible; }
.gl-curve rect { fill: none; stroke: var(--c-paper-3); }
.gl-curve line { stroke: var(--c-bluegrey-deep); stroke-dasharray: 2 2; }
.gl-curve path { fill: none; stroke: var(--c-charcoal-2); stroke-width: 1.6; }

/* Contents */
.gl-toc { list-style: none; padding: 0; margin: 0; }
.gl-toc li { display: grid; grid-template-columns: 12mm 1fr; gap: 3mm; padding: 3mm 0; border-bottom: 1px solid var(--c-paper-3); }
.gl-toc a { text-decoration: none; color: inherit; }
.gl-toc .gl-num { padding-top: 1.2mm; }
.gl-toc strong { font-family: var(--font-display); font-weight: 500; font-size: 14pt; letter-spacing: -0.005em; }

.gl-placeholder { padding: 5mm; border: 1px dashed var(--c-bluegrey-deep); border-radius: 2mm; }
.gl-thumb__art { aspect-ratio: 1 / 1; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gl-thumb__art canvas { display: block; width: 100%; height: auto; background: var(--c-paper-2); }

/* ── Print ──
   A4 by default; the toolbar's Letter button swaps the page size.
   Content is designed inside 174 × 243 mm, which fits both sizes.
   Page margins carry the running footer and the page number. */
@page {
  size: A4;
  margin: 16mm 18mm 20mm;
  @bottom-left {
    content: "XPRSHUN · Brand guidelines · Version 1.0";
    font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
    font-size: 8pt;
    color: #566572;
  }
  @bottom-right {
    content: counter(page);
    font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
    font-size: 8pt;
    color: #566572;
  }
}
@page cover {
  margin: 0;
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

@media print {
  html, body { background: #fff; }
  .gl-toolbar { display: none; }
  .gl-doc { display: block; padding: 0; gap: 0; }
  .gl-sheet {
    width: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    break-before: page;
  }
  .gl-sheet .gl-folio { display: none; }
  .gl-cover { width: 100%; height: calc(var(--page-h) - 1mm); break-after: page; }
  .gl-break { break-before: page; margin-top: 0 !important; }
  a { color: inherit; text-decoration: none; }
  /* Page-sized textures stall print rasterising: print the paper flat and skip the grain. */
  .gl-cover__photo::after,
  .cover__photo::after { display: none; }
  .gl-cover__band::before,
  .cover__band::before { filter: none; opacity: 0.3; }
}