/* ============================================================
   PORCHLIGHT — ARTISTIC LAYER
   Screenprint posters · color blocks · organic shapes · grain
   Loaded AFTER report.css. Turns the report from corporate
   editorial into a community-arts piece.
   ============================================================ */

/* ---- Risograph grain — DISABLED over content (dimmed text on dark sections) ---- */
.report::after { content: none; }
.report__grain-disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3C/svg%3E");
}

/* ---- Poster frame (replaces photo) ---- */
.poster { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg-card); }
.poster svg { display: block; width: 100%; height: 100%; }
.poster .shot__tag { z-index: 4; }

/* ---- Color blocks behind frames (the Outstand/Valora move) ---- */
.blockwrap { position: relative; }
.blockwrap > .poster, .blockwrap > .shot { position: relative; z-index: 2; }
.cblock { position: absolute; z-index: 1; border-radius: var(--radius-lg); }
.cblock--coral { background: var(--sig); }
.cblock--teal  { background: var(--cool); }
.cblock--gold  { background: var(--gold); }
.cblock--navy  { background: var(--navy-800); }
.cblock--ring  { background: transparent; border: 2px solid currentColor; }
.cblock--dots  {
  background-image: radial-gradient(currentColor 2px, transparent 2.2px);
  background-size: 16px 16px; opacity: .5;
}

/* ---- Halftone dot field utility ---- */
.halftone {
  background-image: radial-gradient(var(--sig) 1.7px, transparent 1.9px);
  background-size: 14px 14px;
}

/* ---- Light-ring motif (the "porch light") ---- */
.lightrings { position: absolute; pointer-events: none; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 27%, currentColor 27% 28%, transparent 28% 45%,
      currentColor 45% 46%, transparent 46% 64%, currentColor 64% 65%, transparent 65% 84%,
      currentColor 84% 85%, transparent 85%);
  opacity: .22; }

/* ---- Organic blobs (soft background shapes) ---- */
.blob { position: absolute; pointer-events: none; z-index: 0; filter: blur(2px); opacity: .9; }
.blob--soft { filter: blur(40px); opacity: .5; }

/* ---- Brush-stroke underline / highlight ---- */
.brush-u { position: relative; display: inline-block; }
.brush-u > svg { position: absolute; left: -4%; right: -4%; width: 108%; bottom: -0.18em; height: 0.42em; color: var(--sig); z-index: -1; }
.brush-hl { position: relative; display: inline-block; }
.brush-hl > svg { position: absolute; inset: -8% -6%; width: 112%; height: 116%; color: var(--sig); z-index: -1; opacity: .9; }

/* ---- Illustrated value chips ---- */
.value { position: relative; }
.value__chip { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  margin-bottom: 1rem; background: var(--sig-soft); color: var(--sig-deep); }
.value__chip svg { width: 36px; height: 36px; }
.value:nth-child(2) .value__chip { background: var(--cool-soft); color: var(--cool); }
.value:nth-child(3) .value__chip { background: var(--gold-soft); color: var(--sig-700); }

/* ---- Section decorative scene strip (community figures etc.) ---- */
.scene-strip { width: 100%; height: auto; display: block; }

/* ---- Big decorative spark/star colors ---- */
.spark--gold { color: var(--gold); }
.spark--teal { color: var(--cool); }

/* ---- Arch / scallop top on sections ---- */
.arch-top { position: absolute; top: -1px; left: 0; width: 100%; height: 60px; }

/* ---- Closing porch illustration glow ---- */
.porch-art { position: relative; }
.porch-art .glow { position: absolute; border-radius: 50%; filter: blur(60px); background: var(--sig); opacity: .35; }

/* tags inside posters keep readable */
.poster .shot__tag { position: absolute; left: 1rem; bottom: 1rem; }

/* make program media taller / posters fill */
.program__media .poster { aspect-ratio: 5/4; }

/* mission gets a painted backdrop */
.mission-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#mission .wrap { position: relative; z-index: 1; }

/* numbers section decorative */
#numbers { overflow: hidden; }
#programs { overflow: hidden; }