/* exp28 HDR TYPE (experimental) — paired with assets/hdr-type.js.
   PQ-tagged rasters (assets/hdrtype/*.png, BT.2100 PQ) overlay hero H1s,
   kickers and primary CTAs when html[data-hdrtype="on"] and viewport >= 900px,
   so the type pops above SDR white on HDR displays. The live text stays in the
   DOM underneath: transparent fill, still selectable and screen-reader visible.
   Themes without rasters (paper/riso/brutal/acid) never get the class.
   Delete this file + hdr-type.js + assets/hdrtype/ + the two head lines per
   page to ship without the experiment. */
.hdrtype-ov{display:none;}
@media (min-width:900px){
  html[data-hdrtype="on"] .hdrtype-img{
    position:relative;
    color:transparent !important;
    text-shadow:none !important;
    background-color:transparent !important;
    background-image:none !important;
    border-color:transparent !important;
  }
  /* nested markup + theme decorations (terminal [ ] brackets, kicker dot,
     terminal h1 cursor) are baked into the raster: hide the live copies */
  html[data-hdrtype="on"] .hdrtype-img *:not(.hdrtype-ov){
    color:transparent !important;
    text-shadow:none !important;
  }
  /* h1::after is the terminal blink cursor: not in the raster, stays live.
     Every other decoration (terminal "> " prompt and [ ] brackets, kicker dot)
     is baked into the raster, so the live copy is hidden. */
  html[data-hdrtype="on"] .hdrtype-img::before,
  html[data-hdrtype="on"] .hdrtype-img:not(h1)::after{
    color:transparent !important;
    text-shadow:none !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  /* the raster: absolutely positioned over the element's border box; js sets
     background-image + negative inset (border widths, h1 descender pad) inline */
  html[data-hdrtype="on"] .hdrtype-img > .hdrtype-ov{
    display:block;
    position:absolute;
    background-repeat:no-repeat;
    background-size:100% 100%;
    pointer-events:none;
  }
}