/* ===========================================================================
   ZE German's Holding Inc. — brand tokens
   One accent, used like a warning light. Everything else is paper and ink.
   =========================================================================== */
:root {
  --ink:        #141414;  /* near-black, never pure black */
  --paper:      #F5F3EF;  /* warm off-white */
  --paper-pure: #FFFFFF;
  --oxide:      #9A3412;  /* the single signal colour */
  --grey:       #6B6762;  /* secondary text */
  --hairline:   #D6D2CA;  /* rules and borders */

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* the wordmark's fixed proportions */
  --track-wide: 0.26em;   /* micro labels */
  --track-mark: 0.10em;   /* the wordmark itself */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* --- the wordmark, built in CSS so it stays crisp and editable --------- */
.zg-mark { display: flex; align-items: stretch; gap: 14px; }
.zg-mark { align-items: center; }
/* the tree mark (from the tattoo) replaces the old oxide bar; same slot, same class */
.zg-mark__bar {
  flex: none; width: var(--tree-w, 26px); height: var(--tree-h, 58px);
  background: url("../logo/tree/tree-mark-ink.svg") center / contain no-repeat;
}
.zg-mark--reversed .zg-mark__bar { background-image: url("../logo/tree/tree-mark-white.svg"); }
.zg-mark__body { display: flex; flex-direction: column; justify-content: center; }
.zg-mark__name {
  font-weight: 600;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.zg-mark__name em { font-style: normal; font-weight: 400; color: var(--grey); }
.zg-mark__rule { height: 1px; background: var(--hairline); margin: 10px 0 7px; }
.zg-mark__sub {
  font-size: 8px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--grey);
  line-height: 1;
  white-space: nowrap;
}

/* micro label used throughout */
.label {
  font-size: 8.5px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 500;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.doodle-strip, .doodle-watermark { position: relative; }
/* papers: a faint column of doodles down the left edge (an <img class="doodle-strip-img">, which prints reliably) */
.doodle-strip { overflow: hidden; }
.doodle-strip-img {
  position: absolute !important; left: 0.2in; top: 0.3in; width: 0.34in; height: auto;
  opacity: .32; pointer-events: none; user-select: none;
}
/* alternative: a very light doodle watermark over the whole sheet */
.doodle-watermark::before {
  content: ""; position: absolute; inset: 0;
  background: url("doodle-watermark-light.svg") 0 0 / 2.2in 2.2in repeat;
  opacity: .07; pointer-events: none;
}
.doodle-strip > *, .doodle-watermark > * { position: relative; }

@media print {
  .doodle-strip, .doodle-watermark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 0; }
  body { background: #fff; }
  .no-print { display: none !important; }
}