/* Layout: an ivory jharokha arch set into a sindoor-red jaali wall, with a marigold toran across the top.
   One fixed look on purpose: an invitation keeps its colours in light and dark mode alike. */
:root {
  --sindoor: #8E1B1F;
  --sindoor-deep: #560D12;
  --zari: #B8892F;
  --zari-light: #E9D08F;
  --paper: #F7F0E2;
  --ink: #3B1D14;
  --ink-soft: #74503F;

  --haldi: #C7860A;
  --haldi-wash: #FAE7A8;
  --mehendi: #4F7A2B;
  --mehendi-wash: #DDEBC6;
  --rani: #B83A62;
  --rani-wash: #F6D6CF;

  --f-display: "Rozha One", "Tiro Devanagari Hindi", "Kohinoor Devanagari", serif;
  --f-script: "Amita", "Tiro Devanagari Hindi", "Kohinoor Devanagari", serif;
  --f-body: "Tiro Devanagari Hindi", "Kohinoor Devanagari", "Devanagari Sangam MN", serif;
  --f-latin: "Marcellus", "Cormorant Garamond", Georgia, serif;

  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23E9D08F' stroke-opacity='.14' stroke-width='1'%3E%3Ccircle cx='18' cy='9' r='9'/%3E%3Ccircle cx='27' cy='18' r='9'/%3E%3Ccircle cx='18' cy='27' r='9'/%3E%3Ccircle cx='9' cy='18' r='9'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='1.4' fill='%23E9D08F' fill-opacity='.22'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wall {
  background-color: var(--sindoor);
  background-image: var(--jaali), radial-gradient(120% 80% at 50% 35%, #A3262B 0%, var(--sindoor) 45%, var(--sindoor-deep) 100%);
  color: var(--paper);
}

.paper {
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
}

.ganesha { display: block; color: var(--sindoor); }

/* Illustrations are painted on white paper; multiply drops the paper into whatever is behind. */
.illus {
  mix-blend-mode: multiply;
  filter: url(#whiten);
  -webkit-mask-image: radial-gradient(ellipse 70% 66% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 66% at 50% 50%, #000 62%, transparent 100%);
}
.illus.warm { filter: url(#whiten-warm); }

/* Small gold flourish used as a divider. */
.flourish { display: block; width: 120px; height: 12px; color: var(--zari); }

/* Patrika-style date: day and month between rules, the numeral breaking through them. */
.pdate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 10px;
  font-family: var(--f-body);
}
.pdate .side {
  position: relative;
  border-block: 1px solid var(--zari);
  padding-block: 3px 1px;
  text-align: center;
}
.pdate .side::before,
.pdate .side::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--zari);
}
.pdate .side.l::before { left: -2px; }
.pdate .side.l::after { left: -2px; top: auto; bottom: -3px; }
.pdate .side.r::before { right: -2px; }
.pdate .side.r::after { right: -2px; top: auto; bottom: -3px; }
.pdate .num {
  font-family: var(--f-display);
  line-height: .9;
  color: var(--sindoor);
}
.pdate .year {
  grid-column: 2;
  text-align: center;
  font-family: var(--f-latin);
  letter-spacing: .18em;
  color: var(--ink-soft);
}