/* Variant: Calendar — a wall calendar with project dates. Light. */
:root {
  --bg: #fbf6f2; --surface: #ffffff; --muted: #f4ebe4; --ink: #22161c; --ink-2: #6a5a62; --line: #eddfd6;
  --accent: #e8453c; --accent-ink: #ffffff; --accent-soft: #ffe2df; --green-soft: #e4e6ff; --amber-soft: #fff0cc;
  --night: #22161c; --night-2: #33232b;
  --ea: #4b6bff; --eb: #e8453c; --ec: #f5a524;
  color-scheme: light;
}
.cal { padding: clamp(14px, 2vw, 22px); border-radius: 22px; background: #ffffff; box-shadow: 0 40px 70px -40px rgba(34, 22, 28, 0.4); }
.cal::before { content: ""; display: block; height: 14px; margin: -2px 0 10px; background: radial-gradient(circle at 10px 7px, #d9cbc3 4px, transparent 5px) 0 0 / 40px 14px repeat-x; }
.cal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cal-top b { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; color: var(--accent); }
.cal-top i { display: inline-block; width: 26px; height: 26px; margin-left: 6px; border-radius: 50%; background: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-h { padding-bottom: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--ink-2); text-align: center; }
.cal-d { display: flex; flex-direction: column; gap: 2px; min-height: clamp(2.6rem, 5.4vw, 4.2rem); padding: 4px; border-radius: 8px; background: #faf6f3; font-size: 0.75rem; overflow: hidden; }
.cal-d b { font-weight: 600; color: var(--ink-2); }
.cal-d.is-off { background: transparent; }
.cal-d.is-today b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #ffffff; }
.cal-e { padding: 1px 4px; border-radius: 4px; font-size: clamp(0.5rem, 0.8vw, 0.6875rem); font-style: normal; font-weight: 600; line-height: 1.3; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-e--a { background: var(--ea); } .cal-e--b { background: var(--eb); } .cal-e--c { background: var(--ec); color: #2a1800; }
.tile--dark .focus strong { color: #ffaaa4; }
.product__visual--water { background: #e4e6ff; } .product__visual--jobs { background: #ffe2df; } .product__visual--food { background: #fff0cc; }