/* ==========================================================================
   Cyber City · the drawing at the head of a page (inc/art.php, assets/js/art.js)
   The head is a dark panel: the drawing fills it, the words sit on its lower left. On a phone the drawing stands
   above the words. Without a script the photo itself is shown; while a script can run the photo is hidden from the
   first paint, so it never flashes before the drawing comes.
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

.ecc-arthead { position: relative; overflow: hidden; }
.ecc-art { position: absolute; inset: 0; margin: 0; color: var(--ecc-ink); caret-color: var(--ecc-spark); } /* the script reads the two colours from here */
.ecc-art__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.ecc-art__print { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ecc-js .ecc-art__img { visibility: hidden; } /* the drawing stands in for the photo from the first paint (.ecc-js is set in the head) */
.ecc-js .ecc-art--off .ecc-art__img { visibility: visible; } /* art.js could not draw: the photo is shown */
.ecc-art--off .ecc-art__print { display: none; }
html:not(.ecc-js) .ecc-art__print { display: none; }
.ecc-arthead__words { position: relative; display: grid; gap: var(--ecc-s-4); align-content: end; max-width: 46em; }
/* without the script the words sit on the photo: a veil keeps them readable */
html:not(.ecc-js) .ecc-arthead__words, .ecc-arthead:has(.ecc-art--off) .ecc-arthead__words { background: linear-gradient(90deg, var(--ecc-panel), transparent); }

@media (max-width: 760px) {
  .ecc-arthead .ecc-art { position: relative; inset: auto; height: calc(var(--ecc-s-9) * 2.25); margin: calc(var(--ecc-s-5) * -1) calc(var(--ecc-s-5) * -1) var(--ecc-s-2); }
}