/* Wax Plum brand tokens — monospace-first, brand colors used boldly */

@font-face { font-family:'Source Code Pro'; font-weight:300; font-style:normal; src:url('fonts/SourceCodePro-Light.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Source Code Pro'; font-weight:400; font-style:normal; src:url('fonts/SourceCodePro-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Source Code Pro'; font-weight:400; font-style:italic;  src:url('fonts/SourceCodePro-Italic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Source Code Pro'; font-weight:500; font-style:normal; src:url('fonts/SourceCodePro-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Source Code Pro'; font-weight:500; font-style:italic;  src:url('fonts/SourceCodePro-MediumItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Source Code Pro'; font-weight:600; font-style:normal; src:url('fonts/SourceCodePro-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Source Code Pro'; font-weight:700; font-style:normal; src:url('fonts/SourceCodePro-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Source Code Pro'; font-weight:700; font-style:italic;  src:url('fonts/SourceCodePro-BoldItalic.ttf') format('truetype'); font-display:swap; }

:root {
  /* Brand spectrum — from the Brand DNA, page 24 */
  --wp-plum-red:    #b22b48;
  --wp-orange:      #ef483e;
  --wp-plum-purple: #3a365b;
  --wp-golden:      #dcae51;

  /* Neutrals */
  --wp-powder:      #c4d6d4;
  --wp-dark:        #171644;
  --wp-light:       #f0f0f0;

  --wp-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

.wp-mono { font-family: var(--wp-mono); }

/* Pixel "leaf" — 4-cell staircase pulled from the WP planet mark.
   Use as a small inline accent on dark or light surfaces. */
.wp-pixel-leaf {
  display: inline-block;
  width: var(--s, 24px);
  height: var(--s, 24px);
  background:
    linear-gradient(currentColor, currentColor) 0 66.66% / 33.33% 33.33% no-repeat,
    linear-gradient(currentColor, currentColor) 33.33% 33.33% / 33.33% 33.33% no-repeat,
    linear-gradient(currentColor, currentColor) 66.66% 0 / 33.33% 33.33% no-repeat;
}

/* Eyebrow / overline text */
.wp-eyebrow {
  font-family: var(--wp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wp-tag {
  font-family: var(--wp-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Underline link — survives on any background */
.wp-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Hairline rule */
.wp-rule {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
  margin: 0;
}

/* Pixel-corner accent — three little squares stepping outward, lifted
   straight from the wordmark's pixel-burst above the "P". Position absolutely. */
.wp-pixel-burst {
  position: absolute;
  width: 28px;
  height: 28px;
  background:
    linear-gradient(currentColor, currentColor) 0 0      / 33.33% 33.33% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 33.33%/ 33.33% 33.33% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 66.66%/ 33.33% 33.33% no-repeat;
}

/* CJK font for Chinese alchemical terms */
.wp-cjk { font-family: 'Noto Serif SC', serif; }

/* ---- Responsive utilities (phones / tablets) ---- */
@media (max-width: 820px) {
  .wp-mq-pad   { padding-left: 22px !important; padding-right: 22px !important; }
  .wp-mq-stack { grid-template-columns: 1fr !important; }
  .wp-mq-2col  { grid-template-columns: 1fr 1fr !important; }
  .wp-mq-hide  { display: none !important; }
  .wp-mq-head  { grid-template-columns: 1fr !important; row-gap: 14px !important; }
  .wp-mq-nav   { flex-wrap: wrap !important; gap: 14px 18px !important; justify-content: flex-start !important; }
  .wp-mq-foot  { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; text-align: left !important; }
  .wp-mq-row   { grid-template-columns: 64px 1fr !important; column-gap: 18px !important; }
}