/* ============================================
   ILFORD inCOLOUR 2026 — about.css
   ============================================ */

/* ============================================
   HERO
   ============================================ */
.ic-ahero {
  position: relative;
  min-height: 620px;
  max-height: 720px;
  display: flex;
  align-items: center;
  padding: 70px 20px;
  background: #f7f4ee url('/wp-content/uploads/2026/07/about.jpg') right center / cover no-repeat;
  overflow: hidden;
}

/* cream wash so navy text stays readable */
.ic-ahero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(250,248,243,.99) 0%,
    rgba(250,248,243,.97) 30%,
    rgba(250,248,243,.88) 42%,
    rgba(250,248,243,.35) 56%,
    rgba(250,248,243,0) 70%
  );
}

.ic-ahero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 60px;
}

/* ---------- "About Us" ---------- */
.ic-ahero__script {
  position: relative;
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1;
  color: var(--ic-navy);
  margin-bottom: 20px !important;
  padding-bottom: 16px;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.ic-ahero__script::after {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 2px;
  width: 92%;
  height: 10px;
  background: var(--ic-teal);
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  transform: rotate(-.8deg);
  opacity: .95;
}

/* ---------- Main title ---------- */
.ic-ahero__title {
  font-weight: 900;
  line-height: .9;
  letter-spacing: -2px;
  color: var(--ic-navy) !important;
  margin-bottom: 0 !important;
}

.ic-ahero__l1,
.ic-ahero__l2 { display: block; }

.ic-ahero__l1 {
  font-size: clamp(2.9rem, 7vw, 5.4rem);
  text-shadow: 0 3px 0 rgba(255,255,255,.55);
}

.ic-ahero__l2 {
  font-size: clamp(2.9rem, 7vw, 5.4rem);
  margin-top: 4px;
}

.ic-ahero__l2 i {
  font-style: normal;
  font-size: .62em;
  margin-right: .12em;
}

.ic-ahero__l2 em {
  font-style: normal;
  display: inline-block;
  letter-spacing: -2px;
  text-shadow:
    0 2px 0 rgba(255,255,255,.5),
    0 6px 14px rgba(0,0,0,.10);
  transition: transform .25s ease;
}

.ic-ahero__l2 em:nth-of-type(1) { color: var(--ic-red);    transform: rotate(-2deg); }
.ic-ahero__l2 em:nth-of-type(2) { color: #ee6a2c;          transform: rotate(1.5deg) translateY(-2px); }
.ic-ahero__l2 em:nth-of-type(3) { color: var(--ic-yellow); transform: rotate(-1deg); }
.ic-ahero__l2 em:nth-of-type(4) { color: var(--ic-green);  transform: rotate(2deg)   translateY(2px); }
.ic-ahero__l2 em:nth-of-type(5) { color: var(--ic-teal);   transform: rotate(-1.5deg); }
.ic-ahero__l2 em:nth-of-type(6) { color: #2f7ec4;          transform: rotate(1deg)   translateY(-2px); }
.ic-ahero__l2 em:nth-of-type(7) { color: #d94b9c;          transform: rotate(-2deg); }
.ic-ahero__l2 em:nth-of-type(8) { color: var(--ic-purple); transform: rotate(1.5deg); }
.ic-ahero__l2 em:nth-of-type(9) { color: var(--ic-purple); }

.ic-ahero__l2 em:hover { transform: translateY(-6px) rotate(0deg); }

/* ---------- Hero responsive ---------- */
@media (max-width: 1200px) {
  .ic-ahero__inner { padding-left: 40px; }
  .ic-ahero::before {
    background: linear-gradient(
      100deg,
      rgba(246, 243, 250, 0.99) 0%,
      rgba(250,248,243,.96) 40%,
      rgba(250,248,243,.7) 58%,
      rgba(250,248,243,.15) 80%
    );
  }
}

@media (max-width: 900px) {
  .ic-ahero {
    min-height: 480px;
    max-height: none;
    padding: 60px 20px;
    background-position: 72% center;
  }
  .ic-ahero::before { background: rgba(250,248,243,.9); }
  .ic-ahero__inner { padding-left: 0; }
}

@media (max-width: 560px) {
  .ic-ahero { min-height: auto; padding: 50px 20px; }
}

/* ============================================
   INTRO — COME FOR THE ART
   ============================================ */
.ic-aintro {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 118px 20px 84px;   /* top padding clears the 70px drip */
}

/* ---------- Paint drip (top edge) ----------
   .ic-drip lives in custom.css. Add as the FIRST child of .ic-aintro:
   <div class="ic-drip ic-drip--top" aria-hidden="true"></div>
   Sits directly under the hero, dripping down into the white. */

/* two-column: media left, copy right.
   scoped selector so it beats .ic-wrap's max-width regardless of load order */
.ic-aintro .ic-aintro__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}

/* ---------- Media column ---------- */
/* offset teal frame — same treatment as the homepage When & Where image */
.ic-aintro__media {
  position: relative;
  align-self: center;
  padding: 34px 0 0 34px;
}

.ic-aintro__media::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 46px;
  bottom: 46px;
  border: 5px solid var(--ic-teal);
  border-radius: 4px;
  pointer-events: none;
}

.ic-aintro__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(27,27,107,.15);
}

/* purple splat tucked behind the photo — roughly half hidden.
   Lives INSIDE .ic-aintro__media so it tracks the image, not the
   section. z-index 0 keeps it under the img (z-index 1). */
.ic-aintro__splat--img {
  z-index: 0;
  bottom: -78px;
  left: -126px;
  --splat-w: 320px;
  --splat-h: 320px;
  --splat-o: 1;
  --splat-r: 14deg;
}

/* circular "Celebrating Creativity Community & Culture" stamp */
.ic-aintro__stamp {
  position: absolute;
  z-index: 2;
  right: -22px;
  bottom: -22px;
  width: 148px;
  height: auto;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* ---------- Copy column ---------- */
.ic-aintro__copy { align-self: center; }

/* ---------- Splat placement — corners ----------
   .ic-splat base lives in custom.css; these set position only.
   All four bleed off the edge — .ic-aintro clips the overflow. */
.ic-aintro__splat--tl {         /* yellow, top-left, sits under the drip */
  top: 46px;
  left: -110px;
  --splat-w: 300px;
  --splat-h: 300px;
  --splat-o: 1;
  --splat-r: -16deg;
}

.ic-aintro__splat--tr {         /* green, top-right */
  top: 58px;
  right: -100px;
  --splat-w: 270px;
  --splat-h: 270px;
  --splat-o: 1;
  --splat-r: 24deg;
}

.ic-aintro__splat--br {         /* orange, bottom-right */
  bottom: -70px;
  right: -110px;
  --splat-w: 340px;
  --splat-h: 340px;
  --splat-o: 1;
  --splat-r: -22deg;
}


/* ---------- Straplines ---------- */
.ic-aintro__strap1 {
  font-weight: 900;
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.6px;
  color: var(--ic-navy);
  margin-bottom: 4px !important;
}

.ic-aintro__strap2 {
  position: relative;
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  color: var(--ic-teal);
  margin-bottom: 36px !important;
  padding-bottom: 10px;
}

.ic-aintro__strap2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ic-teal) 0%, var(--ic-purple) 100%);
}

/* ---------- Point list ---------- */
/* built from divs, not ul/li/p — the .ic-section reset only targets
   ul, li and p, so divs sidestep the specificity fight entirely.
   Do not convert this back to a list. */
.ic-aintro__points { display: block; }

.ic-aintro__point {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 0;
}

/* coloured rule after each point except the last —
   starts at the text edge, not under the icon.
   left offset = icon width (58) + gap (22) */
.ic-aintro__point:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 80px;
  right: 0;
  height: 2px;
  border-radius: 2px;
}

.ic-aintro__point:nth-child(1)::after {
  background: linear-gradient(90deg, var(--ic-purple) 0%, var(--ic-red) 55%, rgba(217,75,156,0) 100%);
}
.ic-aintro__point:nth-child(2)::after {
  background: linear-gradient(90deg, var(--ic-red) 0%, var(--ic-teal) 55%, rgba(0,150,160,0) 100%);
}

.ic-aintro__ico {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 2px;
}
.ic-aintro__ico svg { width: 27px; height: 27px; }

.ic-aintro__ico--purple { background: var(--ic-purple); }
.ic-aintro__ico--red    { background: var(--ic-red); }
.ic-aintro__ico--teal   { background: var(--ic-teal); }

.ic-aintro__ptext {
  font-size: .98rem;
  line-height: 1.72;
  color: #333;
  font-weight: 500;
}

.ic-aintro__ptext a {
  color: var(--ic-teal);
  font-weight: 700;
  text-decoration: none;
}
.ic-aintro__ptext a:hover { text-decoration: underline; }

/* ---------- Intro responsive ---------- */
@media (max-width: 1100px) {
  .ic-aintro .ic-aintro__inner { gap: 44px; }
  .ic-aintro__media { padding: 26px 0 0 26px; }
  .ic-aintro__media::before { right: 34px; bottom: 34px; border-width: 4px; }
}

@media (max-width: 900px) {
  .ic-aintro { padding: 88px 20px 64px; }
  .ic-aintro .ic-aintro__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .ic-aintro__media {
    padding: 22px 0 0 22px;
    max-width: 640px;
    margin: 0 auto;
  }
  .ic-aintro__media::before { right: 28px; bottom: 28px; }
  .ic-aintro__stamp { width: 116px; right: -12px; bottom: -14px; }
  .ic-aintro__splat--tl { --splat-w: 200px; --splat-h: 200px; left: -80px; top: 34px; }
  .ic-aintro__splat--tr { --splat-w: 180px; --splat-h: 180px; right: -70px; top: 40px; }
  .ic-aintro__splat--img { --splat-w: 230px; --splat-h: 230px; left: -92px; bottom: -56px; }
  .ic-aintro__splat--br { --splat-w: 220px; --splat-h: 220px; right: -75px; bottom: -50px; }
}

@media (max-width: 768px) {
  .ic-aintro { padding: 76px 20px 56px; }
  .ic-aintro__strap2 { margin-bottom: 30px !important; }
}

@media (max-width: 560px) {
  .ic-aintro .ic-aintro__inner { gap: 34px; }
  .ic-aintro__media { padding: 16px 0 0 16px; }
  .ic-aintro__media::before { right: 20px; bottom: 20px; border-width: 3px; }
  .ic-aintro__media img { aspect-ratio: 3 / 2; }
  .ic-aintro__point { gap: 16px; padding: 20px 0; }
  .ic-aintro__point:not(:last-child)::after { left: 64px; }   /* 48 + 16 */
  .ic-aintro__ico { flex: 0 0 48px; width: 48px; height: 48px; }
  .ic-aintro__ico svg { width: 23px; height: 23px; }
  .ic-aintro__ptext { font-size: .93rem; }
  .ic-aintro__stamp { width: 94px; }
  /* trim to two on phones — four pieces of decor is noise at this width */
  .ic-aintro__splat--tr { display: none; }
  .ic-aintro__splat--tl { --splat-w: 150px; --splat-h: 150px; left: -60px; top: 26px; }
  .ic-aintro__splat--br { --splat-w: 165px; --splat-h: 165px; right: -58px; bottom: -40px; }
  .ic-aintro__splat--img { --splat-w: 175px; --splat-h: 175px; left: -70px; bottom: -44px; }
}

/* ============================================
   EVENT DETAILS BAND
   ============================================ */
.ic-adates {
  position: relative;                 /* anchors .ic-drip and splats */
  background: var(--ic-cream);
  padding: 88px 20px 76px;
  overflow: hidden;
}

/* ---------- Inner wrapper ---------- */
.ic-adates__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Headings ---------- */
.ic-adates__title {
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem) !important;
  letter-spacing: -.5px;
  color: var(--ic-navy) !important;
  margin-bottom: 20px !important;
}
.ic-adates__title sup { font-size: .55em; top: -.55em; }

.ic-adates__loc {
  display: table;
  margin: 0 auto 54px !important;
  padding: 34px 70px;
  background: url('/wp-content/uploads/2026/07/Asset-9.png') center center / 100% 100% no-repeat;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .3px;
}

/* ---------- Detail grid ---------- */
.ic-adates__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 0 auto;
}

.ic-adates__item {
  position: relative;
  text-align: center;
  padding: 0 22px;
}
.ic-adates__item + .ic-adates__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  width: 1px;
  height: 76%;
  background: rgba(27,27,107,.16);
}

/* ---------- Splat blobs ---------- */
/* splat colour rides a custom property, not `background`, so the
   element itself paints nothing and the organic ::before shape shows.
   `color` stays white for the icon stroke. */
.ic-adates__blob {
  --blob: var(--ic-red);
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .3s ease;
}
.ic-adates__blob::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--blob);
  box-shadow: 0 8px 20px rgba(0,0,0,.13);
}
.ic-adates__blob::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 15px;
  height: 13px;
  background: var(--blob);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}
.ic-adates__blob svg {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
}
.ic-adates__item:hover .ic-adates__blob { transform: translateY(-5px) rotate(-3deg); }

.ic-adates__blob--red    { --blob: var(--ic-red); }
.ic-adates__blob--teal   { --blob: var(--ic-teal); }
.ic-adates__blob--green  { --blob: var(--ic-green); }
.ic-adates__blob--orange { --blob: #ee6a2c; }

/* ---------- Splat droplets ----------
   One ::after droplet, multiplied by box-shadow. Negative spread
   shrinks each copy, so a single element gives four droplets at
   four different sizes with no extra markup.
   Offsets are relative to the ::after's own position, not the blob. */
.ic-adates__blob::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 16px;
  height: 16px;
  background: var(--blob);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}

.ic-adates__blob--red::before {
  border-radius: 63% 37% 42% 58% / 55% 45% 55% 45%;
  transform: rotate(-6deg);
}
.ic-adates__blob--red::after {
  top: -10px;
  right: 4px;
  box-shadow:
    -62px  18px 0 -3px var(--blob),
    -30px 102px 0 -5px var(--blob),
     12px  76px 0 -6px var(--blob),
    -80px  62px 0 -4px var(--blob);
}

.ic-adates__blob--teal::before {
  border-radius: 42% 58% 63% 37% / 48% 62% 38% 52%;
  transform: rotate(9deg);
}
.ic-adates__blob--teal::after {
  bottom: -12px;
  left: 8px;
  box-shadow:
     58px  10px 0 -3px var(--blob),
     22px -98px 0 -4px var(--blob),
     76px -46px 0 -6px var(--blob),
    -14px -74px 0 -5px var(--blob);
}

.ic-adates__blob--green::before {
  border-radius: 55% 45% 38% 62% / 62% 40% 60% 38%;
  transform: rotate(-11deg);
}
.ic-adates__blob--green::after {
  top: 0;
  left: -12px;
  box-shadow:
     28px -14px 0 -4px var(--blob),
    100px  22px 0 -3px var(--blob),
     52px  92px 0 -5px var(--blob),
     96px  70px 0 -6px var(--blob);
}

.ic-adates__blob--orange::before {
  border-radius: 48% 52% 58% 42% / 40% 55% 45% 60%;
  transform: rotate(5deg);
}
.ic-adates__blob--orange::after {
  bottom: 2px;
  right: -10px;
  box-shadow:
    -18px  16px 0 -3px var(--blob),
    -74px -12px 0 -5px var(--blob),
    -40px -92px 0 -4px var(--blob),
      6px -66px 0 -6px var(--blob);
}

/* ---------- Labels ---------- */
.ic-adates__label {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ic-navy);
  margin-bottom: 2px !important;
}

.ic-adates__value {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.35;
  color: var(--ic-navy);
}

/* ---------- Event band responsive ---------- */
@media (max-width: 900px) {
  .ic-adates { padding: 68px 20px 56px; }
  .ic-adates__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .ic-adates__item:nth-child(odd)::before { display: none; }
  .ic-adates__blob { width: 84px; height: 84px; }
  .ic-adates__blob svg { width: 33px; height: 33px; }
}

@media (max-width: 520px) {
  .ic-adates__grid { grid-template-columns: 1fr; gap: 34px 0; }
  .ic-adates__item::before { display: none !important; }
  .ic-adates__loc { margin-bottom: 40px !important; padding: 9px 24px; font-size: .95rem; }
  .ic-adates__blob { width: 76px; height: 76px; margin-bottom: 14px; }
  .ic-adates__blob svg { width: 30px; height: 30px; }
  .ic-adates__value { font-size: 1.05rem; }

  /* droplet offsets are fixed px — drop the widest scatter on a
     76px blob so stray dots don't float far from the splat */
  .ic-adates__blob--red::after    { box-shadow: -50px 14px 0 -4px var(--blob), -24px 80px 0 -6px var(--blob); }
  .ic-adates__blob--teal::after   { box-shadow:  46px  8px 0 -4px var(--blob),  18px -76px 0 -6px var(--blob); }
  .ic-adates__blob--green::after  { box-shadow:  24px -12px 0 -5px var(--blob), 80px 18px 0 -4px var(--blob); }
  .ic-adates__blob--orange::after { box-shadow: -14px 12px 0 -4px var(--blob), -58px -10px 0 -6px var(--blob); }
}

/* ============================================
   FEATURE TILE STRIP
   ============================================ */
/* NOTE: the homepage has a five-panel strip too. If home.css already
   defines an equivalent component, promote this to custom.css as a
   shared .ic-tiles rather than keeping two copies that drift. */
.ic-atiles {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
}

.ic-atiles__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.ic-atiles__item {
  --tile: var(--ic-red);
  position: relative;
  background: var(--tile);
  padding: 40px 26px 42px;
  text-align: center;
  color: #fff;
  transition: transform .3s ease;
}

/* faint splat wash so the flat panels pick up some texture */
.ic-atiles__item::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -30px;
  right: -26px;
  width: 130px;
  height: 130px;
  background: rgba(255,255,255,.09);
  border-radius: 58% 42% 45% 55% / 48% 60% 40% 52%;
  pointer-events: none;
}
.ic-atiles__item:nth-child(even)::before {
  top: auto;
  bottom: -34px;
  right: auto;
  left: -30px;
  border-radius: 45% 55% 60% 40% / 55% 42% 58% 45%;
}

.ic-atiles__item:hover { transform: translateY(-6px); }

.ic-atiles__ico {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.ic-atiles__ico svg {
  width: 38px;
  height: 38px;
}

.ic-atiles__title {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 10px;
}

.ic-atiles__text {
  position: relative;
  z-index: 1;
  font-size: .86rem;
  line-height: 1.55;
  font-weight: 500;
  max-width: 210px;
  margin: 0 auto;
}

/* ---------- Tile colours ----------
   Greens and oranges darkened from the mockup swatches so white
   body text clears WCAG AA (4.5:1). See note in the handoff. */
.ic-atiles__item--red    { --tile: var(--ic-red); }
.ic-atiles__item--blue   { --tile: #1f7f9c; }
.ic-atiles__item--green  { --tile: #3f8f3f; }
.ic-atiles__item--orange { --tile: #c25a17; }
.ic-atiles__item--purple { --tile: var(--ic-purple); }

/* ---------- Tile strip responsive ---------- */
@media (max-width: 1200px) {
  .ic-atiles__item { padding: 34px 18px 36px; }
  .ic-atiles__title { font-size: .88rem; letter-spacing: 1.1px; }
  .ic-atiles__text { font-size: .81rem; }
  .ic-atiles__ico svg { width: 34px; height: 34px; }
}

@media (max-width: 900px) {
  .ic-atiles__grid { grid-template-columns: repeat(2, 1fr); }
  /* fifth tile has no partner — let it run the full width */
  .ic-atiles__item:last-child { grid-column: 1 / -1; }
  .ic-atiles__item { padding: 38px 24px 40px; }
  .ic-atiles__title { font-size: .95rem; letter-spacing: 1.4px; }
  .ic-atiles__text { font-size: .88rem; max-width: 280px; }
}

@media (max-width: 520px) {
  .ic-atiles__grid { grid-template-columns: 1fr; }
  .ic-atiles__item { padding: 32px 22px 34px; }
  .ic-atiles__item::before { width: 100px; height: 100px; }
  .ic-atiles__ico { margin-bottom: 12px; }
  .ic-atiles__ico svg { width: 32px; height: 32px; }
}

/* ---------- Splat placement — corners ----------
   .ic-splat base lives in custom.css; these set position only.
   Rotations differ from .ic-aintro so the same PNGs don't read
   as copy-pasted down the page. */
.ic-adates__splat--tr {         /* purple, top-right */
  top: 52px;
  right: -95px;
  --splat-w: 280px;
  --splat-h: 280px;
  --splat-o: 1;
  --splat-r: -34deg;
}

.ic-adates__splat--bl {         /* yellow, bottom-left */
  bottom: -80px;
  left: -85px;
  --splat-w: 320px;
  --splat-h: 320px;
  --splat-o: 1;
  --splat-r: -8deg;
}

.ic-adates__splat--bl2 {        /* red, stacked above the yellow */
  bottom: 175px;
  left: -70px;
  --splat-w: 235px;
  --splat-h: 235px;
  --splat-o: 1;
  --splat-r: 22deg;
}

@media (max-width: 900px) {
  .ic-adates__splat--tr { --splat-w: 190px; --splat-h: 190px; right: -70px; top: 34px; }
  .ic-adates__splat--bl2 { --splat-w: 155px; --splat-h: 155px; left: -58px; bottom: 145px; }
  .ic-adates__splat--bl { --splat-w: 210px; --splat-h: 210px; left: -70px; bottom: -55px; }
}

@media (max-width: 520px) {
  .ic-adates__splat--tr { --splat-w: 150px; --splat-h: 150px; right: -58px; top: 22px; }
  .ic-adates__splat--bl { --splat-w: 165px; --splat-h: 165px; left: -58px; bottom: -38px; }
  .ic-adates__splat--bl2 { --splat-w: 125px; --splat-h: 125px; left: -50px; bottom: 118px; }
}