/* Snappalm Hex System — repeating design element layer
   Plug in on any page: <link rel="stylesheet" href="hex-system.css">
   Uses a single soft-hexagon SVG in data-URI form. */

:root {
  /* Soft hexagon SVG — stroked or filled via currentColor */
  --hex-path: path("M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z"); /* @kind other */

  /* Data URIs — each parameterized by color via CSS mask or background-image */
  --hex-bullet: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='%234F828A'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E"); /* @kind other */

  --hex-outline: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='none' stroke='%231B2029' stroke-width='14'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E"); /* @kind other */

  --hex-outline-light: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='none' stroke='%23F4F0E8' stroke-width='14'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E"); /* @kind other */

  --hex-tile: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='none' stroke='%231B2029' stroke-width='6' opacity='0.18'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E"); /* @kind other */
}

/* ─── Hex bullet — inline with text, replaces round dots ─── */
.hex-bullet {
  display: inline-block;
  width: 0.55em;
  height: 0.55em * 0.885;  /* hexagon aspect 520:460 = 1:0.885 */
  aspect-ratio: 520 / 460;
  height: auto;
  background: var(--hex-bullet);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: 0.08em;
  margin: 0 0.4em 0 0;
  flex-shrink: 0;
}
.hex-bullet--light {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='%23A8C2C5'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E");
}
.hex-bullet--ink {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='%231B2029'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E");
}

/* ─── Hex rule — replaces horizontal <hr> in brand contexts ─── */
.hex-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sp-tetsukon-06);
}
.hex-rule::before, .hex-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.hex-rule__mark {
  width: 12px;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline);
  background-size: contain;
  background-repeat: no-repeat;
}
.hex-rule--light {
  color: rgba(244, 240, 232, 0.12);
}
.hex-rule--light .hex-rule__mark {
  background-image: var(--hex-outline-light);
}

/* ─── Hex chapter dingbat ─── */
.hex-dingbat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.hex-dingbat--filled {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='%234F828A'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E");
}

/* ─── Hex watermark — huge, decorative, behind content ─── */
.hex-watermark {
  position: absolute;
  pointer-events: none;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.05;
}
.hex-watermark--light { background-image: var(--hex-outline-light); opacity: 0.06; }

/* ─── Hex tile pattern — subtle repeating backdrop ─── */
.hex-tiles {
  position: absolute;
  inset: 0;
  background-image: var(--hex-tile);
  background-size: 120px auto;
  background-position: center;
  background-repeat: space;
  opacity: 0.35;
  pointer-events: none;
}

/* ─── Hex spec marker — replaces spec-row leader dot ─── */
.hex-marker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hex-marker::before {
  content: "";
  width: 14px;
  aspect-ratio: 520 / 460;
  background: var(--hex-bullet);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* ─── Hex frame — small decorative badge ─── */
.hex-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  aspect-ratio: 520 / 460;
  position: relative;
}
.hex-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hex-outline);
  background-size: contain;
  background-repeat: no-repeat;
}
.hex-frame__num {
  font-family: var(--sp-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--sp-fg);
  position: relative;
}

/* ─── Hex cluster — three hexes as a rhythm beat ─── */
.hex-cluster {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.hex-cluster span {
  width: 10px;
  aspect-ratio: 520 / 460;
  background: var(--hex-outline);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.4;
}
.hex-cluster span:nth-child(2) { opacity: 0.7; }
.hex-cluster span:nth-child(3) {
  opacity: 1;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='%234F828A'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E");
}
.hex-cluster--light span { background-image: var(--hex-outline-light); }
.hex-cluster--light span:nth-child(3) {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 460' fill='%23A8C2C5'%3E%3Cpath d='M 140 14 C 132 14, 124 18, 120 25 L 22 195 C 14 209, 14 227, 22 241 L 120 411 C 124 418, 132 422, 140 422 L 380 422 C 388 422, 396 418, 400 411 L 498 241 C 506 227, 506 209, 498 195 L 400 25 C 396 18, 388 14, 380 14 Z'/%3E%3C/svg%3E");
}