/* Shared tokens lifted from the BSH logo */
:root {
  --bsh-teal: #0F3340;
  --bsh-teal-deep: #0A1F2A;
  --bsh-ocean: #1A5A6B;
  --bsh-foam: #C9DDE0;
  --bsh-snow: #F4EFE6;
  --bsh-paper: #EDE6D7;
  --bsh-sunset: #E8693A;
  --bsh-coral: #F4A983;
  --bsh-rust: #B84A2A;
  --bsh-pine: #1F3D33;
  --bsh-stone: #6B7A82;
}

/* tiny SVG noise / grain helper */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* placeholder painterly tiles — striped diagonal as fallback for missing illustrations */
.painterly-placeholder {
  background:
    linear-gradient(135deg,
      transparent 0 12px,
      rgba(0,0,0,0.06) 12px 13px,
      transparent 13px 24px),
    linear-gradient(180deg, var(--bsh-coral), var(--bsh-sunset) 60%, var(--bsh-rust));
  color: var(--bsh-snow);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 12px;
}

/* hairline rule */
.rule { height: 1px; background: currentColor; opacity: 0.2; }