/* pg corner motif (asCss/pg/corner.js): the CF2 area pages' sticky bottom-left section graphic (asCss/cf2/corner.css), for the pages built on include/pg_shell.php. Same look, own prefix pg-cnr.
   A fixed box (up to 180px, shrinking to 64px as the gutter beside the 1326px content column narrows), the picture on top, a two-line label under it (from 1570px wide). No layout effect: no CLS.
   Shown only on a wide screen with a pointer (corner.js does not even build it otherwise). z-index 40: above the page, below the dock (49), the header and every modal. */
@layer pg {
  .pg-cnr {
    --pg-cnr-s: clamp(64px, calc((100vw - 1326px) / 2 - 12px), 180px);
    --pg-cnr-th: 52px;
    position: fixed; left: max(8px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
    inline-size: var(--pg-cnr-s); block-size: calc(var(--pg-cnr-s) + var(--pg-cnr-th));
    margin: 0; padding: 0; pointer-events: none; user-select: none;
    opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s;
  }
  .pg-cnr[data-on] { opacity: 1; visibility: visible; transition-delay: 0s; }
  .pg-cnr[data-near] { opacity: .16; transition-duration: .2s, 0s; }
  .pg-cnr-l { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: var(--pg-cnr-s); display: block; pointer-events: none; background: no-repeat 0 0 / 100% 100%; opacity: 0; transition: opacity var(--pg-cnr-f, 700ms) ease-in-out; }
  .pg-cnr-l[data-on] { opacity: 1; }
  .pg-cnr-t { position: absolute; inset-inline: 0; inset-block-start: calc(var(--pg-cnr-s) + 2px); block-size: calc(var(--pg-cnr-th) - 2px); box-sizing: border-box; padding-inline: calc(var(--pg-cnr-s) * .08); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity calc(var(--pg-cnr-f, 700ms) * .35) ease-in-out; }
  .pg-cnr-t[data-on] { opacity: 1; transition-duration: calc(var(--pg-cnr-f, 700ms) * .55); }
  .pg-cnr-k { display: block; font: var(--w-h, 700) clamp(10px, calc(var(--pg-cnr-s) * .06), 11px)/1.2 var(--f, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--orange-ink, #8A4B00); }
  .pg-cnr-n { display: block; margin-block-start: 2px; font: var(--w-h, 700) clamp(12px, calc(var(--pg-cnr-s) * .085), 15px)/1.15 var(--f, system-ui, sans-serif); letter-spacing: -.01em; text-wrap: balance; color: var(--fg, #0C141D); }
  @media (max-width: 1569px) { .pg-cnr { --pg-cnr-th: 0px; } .pg-cnr-t { display: none; } }
  html[data-theme="dark"] .pg-cnr-l { filter: drop-shadow(0 0 1px rgb(244 239 228 / .9)) drop-shadow(0 0 3px rgb(244 239 228 / .35)); }
  @media (prefers-reduced-motion: reduce) { .pg-cnr, .pg-cnr-l, .pg-cnr-t { transition: none; } }
  @media print, (forced-colors: active) { .pg-cnr { display: none !important; } }
  @media (max-width: 1479px), (hover: none) { .pg-cnr { display: none !important; } }
}
