/* Page and component styles for CoCreate Square editorial documents.
   Geometry: a 12-column grid inside 16 mm margins. Columns 1-3 hold side material (section heads,
   byline, captions), column 4 is air, columns 5-12 carry the running text. Brick fields carry a
   fine 6 mm grid measured from the page origin, and mosaic blocks snap to it.
   --pw/--ph are set by paginate.js from the document's paper size. */

@page { size: 210mm 297mm; margin: 0; }

:root {
  --pw: 210mm;
  --ph: 297mm;
  --mx: 16mm;
  --gut: 4mm;
  --col: calc((var(--pw) - 2 * var(--mx) - 11 * var(--gut)) / 12);
  --side-w: calc(3 * var(--col) + 2 * var(--gut));
  --text-x: calc(4 * (var(--col) + var(--gut)));
  --text-w: calc(8 * var(--col) + 7 * var(--gut));

  /* set per layout candidate by the fit search */
  --body-size: 9.5pt;
  --body-lead: 14.5pt;
  --fig-ratio: 0.75;

  --para-gap: calc(var(--body-lead) * 0.5);
  --on-brick-soft: rgb(250 250 250 / 0.72);
  --brick-soft: rgb(84 41 34 / 0.66);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  background: #2a2321;
  font-family: var(--text);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

#doc { display: flex; flex-direction: column; align-items: center; gap: 10mm; padding: 10mm 0; }

.page {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  overflow: hidden;
  background: var(--cream);
  break-after: page;
}
.page:last-child { break-after: auto; }

@media print {
  body { background: none; }
  #doc { display: block; padding: 0; }
}

/* ---------- shared pieces ---------- */

.grid { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

.blk { position: absolute; background: var(--brick); }
.sq {
  display: inline-block;
  width: 2.4mm;
  height: 2.4mm;
  background: var(--salmon);
  transform: rotate(11.17deg);
  flex: none;
}

.label {
  font: 600 6.6pt/1 var(--text);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* highlight bars: the brand's headline device. inline-block so a bar never breaks across lines */
.bar {
  display: inline-block;
  line-height: 1;
  padding: 0.06em 0.12em 0.04em;
  color: var(--brick);
}
.bar--orange { background: var(--orange); }
.bar--sky { background: var(--sky); }
.bar--gold { background: var(--gold); }
.bar--salmon { background: var(--salmon); }
.bar--teal { background: var(--teal); color: var(--white); }

/* ---------- opener hero ---------- */

.hero {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pw);
  background: var(--brick);
  color: var(--white);
  padding: 13mm var(--mx) 0;
}
.hero > :not(.grid) { position: relative; }
.hero .top { display: flex; justify-content: space-between; align-items: center; height: 9mm; }
.hero .logo { height: 8.2mm; display: block; }
.hero .kicker { color: var(--on-brick-soft); }
.hero h1 {
  margin-top: 30mm;
  font: 700 46pt/1.05 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero h1 .bar { padding: 0.04em 0.1em 0.02em; }
.hero .stand {
  margin-top: 7.5mm;
  width: var(--text-w);
  font: 400 12pt/17pt var(--text);
  color: rgb(250 250 250 / 0.86);
  text-wrap: balance;
}
.hero .pad { height: 13mm; }

.salmon-cell {
  position: absolute;
  background: var(--salmon);
  transform: rotate(11.17deg);
}

/* ---------- running head and folio ---------- */

.runhead {
  position: absolute;
  left: var(--mx);
  right: var(--mx);
  top: 10mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--brick-soft);
}
.runhead .l { display: flex; align-items: center; gap: 3mm; }
.runhead img { height: 4.4mm; display: block; }

.folio {
  position: absolute;
  left: var(--mx);
  right: var(--mx);
  bottom: 9.5mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--brick-soft);
  font-variant-numeric: tabular-nums;
}
.folio .pg { display: flex; align-items: center; gap: 2.2mm; color: var(--brick); }
.page.has-closing > .folio { display: none; }

/* ---------- flow frame and text ---------- */

.frame { position: absolute; left: var(--mx); width: calc(var(--pw) - 2 * var(--mx)); display: flow-root; }

.t {
  margin-left: var(--text-x);
  hyphens: manual;
  text-wrap: pretty;
}
.p {
  font-size: var(--body-size);
  line-height: var(--body-lead);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--para-gap);
}
.lead {
  font-size: 12.5pt;
  line-height: 17.5pt;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--brick);
  margin-bottom: 4mm;
  hyphens: manual;
}
.t strong { font-weight: 700; }
.t em { font-style: italic; }
.li { position: relative; padding-left: 5mm; font-size: var(--body-size); line-height: var(--body-lead); margin-bottom: 1.4mm; }
.li::before {
  content: '';
  position: absolute;
  left: 0.3mm;
  top: calc(var(--body-lead) / 2 - 0.8mm);
  width: 1.6mm;
  height: 1.6mm;
  background: var(--brick);
}
.nobr { white-space: nowrap; }
.endmark {
  display: inline-block;
  width: 2.3mm;
  height: 2.3mm;
  margin-left: 1.8mm;
  background: var(--salmon);
  transform: rotate(11.17deg);
  vertical-align: 0;
}

/* side material floats into columns 1-3 */
.side { float: left; width: var(--side-w); }

/* byline (opener only), sits under the mosaic steps */
.byline { margin-top: 22mm; color: var(--brick); }
.byline .label { color: var(--brick-soft); }
.byline .tag {
  display: inline-block;
  margin-top: 2.2mm;
  padding: 1.3mm 2mm 1.1mm;
  background: var(--salmon);
  font: 600 8.6pt/1.15 var(--text);
  color: var(--brick);
}
.byline .meta { margin-top: 3.2mm; font: 500 7.6pt/11pt var(--text); color: var(--brick-soft); }

/* section heads: hairline across the frame, head in the side column beside the first paragraph */
.sec { clear: both; margin-top: 7.5mm; border-top: 0.2mm solid var(--divider); padding-top: 3.4mm; }
.frame > .sec:first-child { margin-top: 0; }
.sec .num { display: flex; align-items: center; gap: 2.2mm; color: var(--brick); margin-bottom: 2.6mm; }
.sec h2 {
  font: 600 13.5pt/1.13 var(--display);
  letter-spacing: var(--track-display);
  color: var(--brick);
  text-wrap: balance;
}

/* ---------- breakouts ---------- */

/* pull quote: a full-bleed Salmon field, text on the text column, stepped corner cut */
.pull {
  clear: both;
  position: relative;
  margin: 6.5mm calc(-1 * var(--mx)) 7.5mm;
  padding: 10mm var(--mx) 10.5mm calc(var(--mx) + var(--text-x));
  background: var(--salmon);
}
.pull > blockquote { position: relative; }
.pull blockquote {
  font: 600 22pt/1.14 var(--display);
  letter-spacing: var(--track-display);
  color: var(--brick);
  text-wrap: balance;
}
.pull .qmark {
  position: absolute;
  left: var(--mx);
  top: 9mm;
  font: 700 46pt/0.8 var(--display);
  color: var(--brick);
}
.cut { position: absolute; background: var(--cream); }

/* figure: image on the text column, caption in the side column, mosaic cut into the corner */
.fig {
  clear: both;
  position: relative;
  margin: 7mm 0 7.5mm;
  display: grid;
  grid-template-columns: var(--side-w) var(--text-w);
  column-gap: calc(var(--text-x) - var(--side-w));
  align-items: end;
}
.fig .cap { color: var(--brick); padding-bottom: 0.5mm; }
.fig .cap p { font: 500 8pt/11.5pt var(--text); text-wrap: pretty; }
.fig .cap .label { display: block; margin-top: 3mm; color: var(--brick-soft); font-size: 6pt; }
.fig .media { position: relative; height: calc(var(--text-w) * var(--fig-ratio)); overflow: hidden; background: var(--divider); }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* key points: three terms on highlight bars */
.points {
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gut);
  margin: 5mm 0 8.5mm;
}
.pt { border-top: 0.35mm solid var(--brick); padding-top: 3mm; }
.pt .label { color: var(--brick-soft); }
.pt .term { margin: 3.4mm 0 2.6mm; font: 700 14pt/1 var(--display); letter-spacing: var(--track-display); }
.pt .term .bar { padding: 0.12em 0.16em 0.08em; }
.pt p { font: 400 8.4pt/12pt var(--text); color: var(--ink); max-width: 46mm; text-wrap: pretty; }

/* ---------- closing ---------- */

.closing {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--pw);
  background: var(--brick);
  color: var(--white);
}
.closing > :not(.grid) { position: relative; }
.closing .line {
  position: absolute;
  left: var(--mx);
  top: 12mm;
  font: 700 25pt/1.08 var(--display);
  letter-spacing: -0.015em;
}
.closing .line .bar { padding: 0.05em 0.1em 0.03em; }
.closing .logo { position: absolute; right: var(--mx); top: 13mm; width: 54mm; display: block; }
.closing .fine {
  position: absolute;
  left: var(--mx);
  right: var(--mx);
  bottom: 9.5mm;
  display: flex;
  justify-content: space-between;
  color: rgb(250 250 250 / 0.6);
  font-variant-numeric: tabular-nums;
}
.closing .fine .pg { display: flex; align-items: center; gap: 2.2mm; color: var(--white); }

.closing--compact .line { top: auto; bottom: 9mm; font-size: 15pt; left: auto; right: var(--mx); }
.closing--compact .logo { left: var(--mx); right: auto; top: 9.5mm; width: 44mm; }
.closing--compact .fine { display: none; }

/* back page, used only when the closing cannot share the last text page */
.page--back { background: var(--brick); color: var(--white); }
.page--back .logo { position: absolute; left: 50%; top: 42%; width: 92mm; transform: translate(-50%, -50%); }
.page--back .line {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  text-align: center;
  font: 700 25pt/1.08 var(--display);
  letter-spacing: -0.015em;
}
.page--back .line .bar { padding: 0.05em 0.1em 0.03em; }
.page--back .fine {
  position: absolute;
  left: var(--mx);
  right: var(--mx);
  bottom: 9.5mm;
  display: flex;
  justify-content: space-between;
  color: rgb(250 250 250 / 0.6);
}