/* ============================================================================
   COFFEE FESTIVAL EUROPE — Das Signaturband
   ----------------------------------------------------------------------------
   Der Streifen zwischen zwei Abschnitten trug eine Strichzeichnung — einen
   Becher mit Dampf, einen Trieb aus der Bohne, einen Stand, der sich aufbaut.
   Jetzt traegt er Bewegtbild. Welches, entscheidet signature.js anhand der
   Seitengruppe (`data-pt`), damit nicht alle Seiten gleich aussehen.

   Geblieben ist die Geometrie: das Band ist so hoch gedeckelt, dass es auf
   einem breiten Fenster genau das Seitenverhaeltnis des Bildes erreicht
   (1280:320 = 4:1). Bei 1440 Punkten Breite sind das 360 Punkte Hoehe.

   Geblieben ist auch `.sig:empty{display:none}`: faellt das Skript aus, ist
   der Streifen leer und verschwindet, statt eine schwarze Luecke zu lassen.

   Drei Lagen, von unten nach oben:
     0  der Film, formatfuellend beschnitten und leicht gedaempft
     1  der Schleier — oben und unten ins Tintenschwarz, von unten ein Hauch
        Ember. Damit steht das Band nicht als Rechteck im Fluss der Seite.
     3  die beiden Haarlinien, die es einfassen (::before/::after)
   ========================================================================= */

.sig{position:relative;overflow:clip;isolation:isolate;
  height:clamp(190px,26vw,360px);
  background:var(--ink)}
.sig:empty{display:none}

.sig__film{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 50%;
  /* Gedaempft und leicht ins Warme gezogen: der Streifen ist Zierrat und
     soll dem Abschnitt darueber nicht die Aufmerksamkeit nehmen. */
  filter:saturate(.9) brightness(.84) contrast(1.05)}

.sig__wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--ink) 0,rgba(11,8,6,.06) 26%,
                    rgba(11,8,6,.06) 72%,var(--ink) 100%),
    radial-gradient(120% 150% at 50% 118%,rgba(226,85,30,.18),transparent 60%)}

.sig::before,.sig::after{content:'';position:absolute;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(244,238,228,.16) 22%,
    rgba(244,238,228,.16) 78%,transparent)}
.sig::before{top:0}
.sig::after{bottom:0}

@media (max-width:700px){
  /* Auf dem Telefon bleibt vom 4:1-Ausschnitt nur die Mitte stehen; der
     Streifen wird dort flacher, damit er nicht die halbe Seite einnimmt. */
  .sig{height:clamp(150px,38vw,220px)}
}