/* Pacific motif tiles, derived ONLY from the geometry of the Vivid Pacific mark
   (inverted triangle · upright triangle · the long diamond where they overlap).
   Use as background-image with background-size set to the tile size shown. */
:root{
  /* Tide — alternating triangles, teal over sunrise. Tile 48×24. Bands & edges. */
  --pattern-tide:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2224%22%20viewBox%3D%220%200%2048%2024%22%3E%3Cpath%20fill%3D%22%23F8C268%22%20d%3D%22M0%200h48v24H0z%22%2F%3E%3Cpath%20fill%3D%22%2346A5BB%22%20d%3D%22M0%200h24L12%2024zM24%200h24L36%2024z%22%2F%3E%3C%2Fsvg%3E"); /* @kind other */
  /* Tide Earth — teal / earth brown. Tile 48×24. */
  --pattern-tide-earth:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2224%22%20viewBox%3D%220%200%2048%2024%22%3E%3Cpath%20fill%3D%22%2352402A%22%20d%3D%22M0%200h48v24H0z%22%2F%3E%3Cpath%20fill%3D%22%2346A5BB%22%20d%3D%22M0%200h24L12%2024zM24%200h24L36%2024z%22%2F%3E%3C%2Fsvg%3E"); /* @kind other */
  /* Diamond chain — the mark's brown diamond, repeated. Tile 24×48 on transparent. */
  --pattern-diamond:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2048%22%3E%3Cpath%20fill%3D%22%2352402A%22%20d%3D%22M12%200l12%2024-12%2024L0%2024z%22%2F%3E%3C%2Fsvg%3E"); /* @kind other */
  /* Reef — quiet triangle lattice for large backgrounds. Tile 32×28, 10% teal. */
  --pattern-reef:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2228%22%20viewBox%3D%220%200%2032%2028%22%3E%3Cpath%20fill%3D%22%2346A5BB%22%20fill-opacity%3D%22.10%22%20d%3D%22M0%2028L16%200l16%2028z%22%2F%3E%3C%2Fsvg%3E"); /* @kind other */
  /* Reef on dark — 8% white lattice for ink backgrounds. */
  --pattern-reef-inverse:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2228%22%20viewBox%3D%220%200%2032%2028%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%22.07%22%20d%3D%22M0%2028L16%200l16%2028z%22%2F%3E%3C%2Fsvg%3E"); /* @kind other */
}
.vp-band-tide{background:var(--pattern-tide) repeat-x;background-size:48px 24px;height:24px}
.vp-band-tide-earth{background:var(--pattern-tide-earth) repeat-x;background-size:48px 24px;height:24px}
.vp-band-diamond{background:var(--pattern-diamond) repeat-x;background-size:12px 24px;height:24px}
.vp-bg-reef{background-image:var(--pattern-reef);background-size:32px 28px}
.vp-bg-reef-inverse{background-image:var(--pattern-reef-inverse);background-size:32px 28px}