/* Filmbilder ohne Bild: der Teaser als Zettel, gemeinsam für den Streifen
   der Startseite (templates/start.gohtml, assets/js/startseite.js) und das
   Mosaik (assets/encounters.js). Drei Angaben steuern ihn:
   data-ton   Farbe aus FCD: paper, ink oder slate.
   data-form  Form des Beitrags, sie bestimmt den Satz:
              note       Instrument Serif kursiv unten, das Anführungszeichen direkt darüber
              narrative  Newsreader mit zweizeiliger Initiale
              list       Newsreader kursiv auf einer linierten Karteikarte
              time       Space Grotesk an einer Zeitlinie mit Punkt
   data-laenge  kurz, mittel oder lang nach der Zeichenzahl; sie bestimmt die
              Schriftgröße im Verhältnis zur Höhe des Bildfelds (--zettel-h).
   Die Breite des Filmbilds hängt ebenfalls an der Form (internal/site/
   begegnungen.go zettelformat, in beiden Skripten gleich). */
.zettel{
  --z-bg:#b6ac98;--z-ink:#1f1b16;--z-mark:#6c6150;--z-line:rgba(31,27,22,.17);
  --z-size:calc(var(--zettel-h,200px)*.13);
  position:relative;display:block;box-sizing:border-box;height:100%;overflow:hidden;padding:12px 14px 14px;
  background:var(--z-bg);color:var(--z-ink);
  font:400 max(13px,var(--z-size))/1.2 'Newsreader',Georgia,serif;
  hyphens:auto;overflow-wrap:break-word;text-wrap:pretty;-webkit-font-smoothing:antialiased}
.zettel[data-laenge=kurz]{--z-size:calc(var(--zettel-h,200px)*.155)}
.zettel[data-laenge=lang]{--z-size:calc(var(--zettel-h,200px)*.112)}
.zettel[data-ton=ink]{--z-bg:#272a2f;--z-ink:#e2ddd3;--z-mark:#a39579;--z-line:rgba(226,221,211,.13)}
.zettel[data-ton=slate]{--z-bg:#2f3b46;--z-ink:#e4e9ed;--z-mark:#9bb0c2;--z-line:rgba(228,233,237,.15)}

/* Notiz */
.zettel:not([data-form]),.zettel[data-form=note]{display:flex;flex-direction:column;justify-content:flex-end;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:max(14px,calc(var(--z-size)*.92));line-height:1.06}
.zettel:not([data-form])::before,.zettel[data-form=note]::before{content:"\201C";display:block;height:.36em;margin-bottom:.06em;font-size:3.2em;line-height:.78;color:var(--z-mark)}

/* Erzählung */
/* Initiale über zwei Zeilen, aus den Maßen von Newsreader berechnet
   (Versalhöhe c = 0,715, Ober- und Unterlänge 0,74 und 0,26, Zeilenhöhe
   1,16). Größe 1 + 1,16 / c = 2,622: die Versalhöhe der Initiale reicht von
   der Versalhöhe der ersten bis zur Grundlinie der zweiten Zeile. Der obere
   Rand von 0,015 em setzt ihre Grundlinie auf die der zweiten Zeile; der
   untere Rand von −0,2 em (rechnerisch −0,13 em, mit Abstand gegen Rundung)
   hält die dritte Zeile frei. initial-letter rechnet
   in Chrome mit einer anderen Versalhöhe und setzt die Initiale zu hoch. */
.zettel[data-form=narrative]{padding-top:16px;font-weight:300;line-height:1.16}
.zettel[data-form=narrative]::first-letter{float:left;margin:.015em .07em -.2em 0;font-size:2.622em;line-height:1;font-weight:400;color:var(--z-mark)}
.zettel[data-form=narrative]::after{content:"";position:absolute;left:14px;bottom:14px;width:26px;border-top:1px solid var(--z-mark)}

/* Liste */
.zettel[data-form=list]{
  --z-f:.86;--z-lh:calc(max(12px,var(--z-size)*var(--z-f))*1.3);
  padding:calc(var(--z-lh)*.7) 12px 12px 26px;font-size:max(12px,calc(var(--z-size)*var(--z-f)));font-style:italic;line-height:var(--z-lh);
  background:linear-gradient(90deg,transparent 17px,var(--z-mark) 17px 18px,transparent 18px),repeating-linear-gradient(transparent 0 calc(var(--z-lh) - 1px),var(--z-line) calc(var(--z-lh) - 1px) var(--z-lh)) var(--z-bg);
  background-origin:border-box,content-box}

.zettel[data-form=list][data-laenge=lang]{--z-f:.74}

/* Zeitstrahl */
/* Zeitstrahl: der Text beginnt bei einem Fünftel der Höhe, der Punkt sitzt
   auf seiner ersten Zeile. */
.zettel[data-form=time]{--z-top:calc(var(--zettel-h,200px)*.2);padding:var(--z-top) 12px 14px 32px;font:400 max(12px,calc(var(--z-size)*.68))/1.36 'Space Grotesk',Arial,sans-serif;letter-spacing:.01em;hyphens:auto}
.zettel[data-form=time]::before{content:"";position:absolute;left:17px;top:0;bottom:0;border-left:1px solid var(--z-mark)}
.zettel[data-form=time]::after{content:"";position:absolute;left:13px;top:calc(var(--z-top) + .36em);width:9px;height:9px;border-radius:50%;background:var(--z-mark)}
@media(max-width:599px){.zettel{padding:9px 10px 10px}.zettel[data-form=list]{padding:6px 8px 8px 24px}.zettel[data-form=time]{padding-left:28px}.zettel[data-form=narrative]::after{left:10px;bottom:10px}}