/* parole in libertà test page (marinetti / depero): exploded wordmark, radiating lines, collage panels.
   Stage calc(100 * var(--u)) × calc(62.5 * var(--u)), everything in vw so it scales as one picture. */
/* --u: one hundredth of the stage width; the stage (16:10) always fits the window, by width or by height */
.pl { --green: var(--accent); --u: min(1vw, 1.6vh); overflow: hidden; display: flex; justify-content: center; }
.pl-stage { position: relative; width: calc(100 * var(--u)); height: calc(62.5 * var(--u)); overflow: hidden; background: var(--bg); }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

.pl-rays { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-rays line { stroke: var(--fg); stroke-width: 0.06; opacity: 0.55; }
.pl-rays line.g { stroke: var(--green); stroke-width: 0.25; opacity: 1; }
.pl-disc { position: absolute; left: calc(33 * var(--u)); top: calc(19 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--green); clip-path: inset(0 0 0 50%); transform: rotate(-30deg); }
.pl-bar { position: absolute; left: calc(62 * var(--u)); top: calc(17.6 * var(--u)); width: calc(42 * var(--u)); height: calc(1.6 * var(--u)); background: var(--fg); transform: rotate(-6deg); }

/* exploded wordmark */
.pl-l { position: absolute; z-index: 1; line-height: 0.8; font-weight: 500; color: var(--fg); pointer-events: none; transform-origin: left top; }
.pl-l.g { color: var(--green); }
.pl-l.o { color: transparent; -webkit-text-stroke: calc(0.2 * var(--u)) var(--fg); }
.pl-l.og { color: transparent; -webkit-text-stroke: calc(0.3 * var(--u)) var(--green); }

/* free words: Harald's own titles and phonetics */
.pl-w { position: absolute; z-index: 0; opacity: 0.65; line-height: 1; font-weight: 400; color: var(--fg); pointer-events: none; transform-origin: left top; white-space: nowrap; }
.pl-w.g { color: var(--green); }
.pl-w.o { color: transparent; -webkit-text-stroke: 1px var(--fg); }
.pl-w.og { color: transparent; -webkit-text-stroke: 1px var(--green); }
.pl-cresc { position: absolute; z-index: 1; left: calc(2 * var(--u)); top: calc(56 * var(--u)); line-height: 1; font-weight: 500; color: var(--fg); white-space: nowrap; pointer-events: none; transform: rotate(-4deg); transform-origin: left bottom; }
.pl-cresc span { vertical-align: baseline; }

/* text fields */
.pl-block { position: absolute; z-index: 2; font-size: calc(1.08 * var(--u)); line-height: 1.3; }
.pl-block h2 { margin: 0 0 0.4em; font-weight: 500; line-height: 1; }
.pl-block p { margin: 0 0 0.55em; }
.pl-block a:hover { color: var(--accent); }

.pl-about { left: calc(2 * var(--u)); top: calc(9.5 * var(--u)); width: calc(29 * var(--u)); padding: calc(1.1 * var(--u)) calc(1.3 * var(--u)) calc(0.9 * var(--u)); background: rgba(0, 0, 0, 0.74); font-size: calc(1.42 * var(--u)); transform: rotate(-3deg); }
.pl-about h2 { font-size: calc(4.62 * var(--u)); letter-spacing: -0.045em; white-space: nowrap; color: var(--green); margin: 0 0 calc(1.6 * var(--u)) -0.07em; }
/* the same air between name, text, link line and icons */
.pl-about .pl-abouttext { margin: 0; }
.pl-about .pl-links { margin: calc(2 * var(--u)) 0 0; }
.pl-about .pl-icons { margin: calc(2.45 * var(--u)) 0 0; }
.pl-links { font-weight: 500; }
.pl-icons { display: flex; justify-content: space-between; align-items: center; }
.pl-icons svg { width: calc(2.1 * var(--u)); height: calc(2.1 * var(--u)); }

/* work: a cascade of sizes and angles */
.pl-work { left: calc(65 * var(--u)); top: calc(20 * var(--u)); width: calc(32.5 * var(--u)); padding: calc(1 * var(--u)) calc(1.2 * var(--u)) calc(0.4 * var(--u)); background: rgba(0, 0, 0, 0.74); transform: rotate(-7deg); transform-origin: left top; }
.pl-work h2 { font-size: calc(4.2 * var(--u)); letter-spacing: -0.03em; transform: rotate(-6deg); transform-origin: left bottom; margin-bottom: 0.25em; }
.pl-work ul { list-style: none; margin: 0; padding: 0; }
.pl-work li { margin: 0.5em 0; white-space: nowrap; transform-origin: left center; }
.pl-work strong { font-weight: 500; }
.pl-work strong.sb { font-family: 'Courier New', Courier, monospace; font-weight: 700; letter-spacing: -0.05em; }
.pl-w0 { font-size: calc(2 * var(--u)); transform: rotate(-4deg); }
.pl-w1 { font-size: calc(1.45 * var(--u)); transform: rotate(2deg) translateX(calc(2.5 * var(--u))); }
.pl-w2 { font-size: calc(1.95 * var(--u)); transform: rotate(-2deg); }
.pl-w3 { font-size: calc(1.6 * var(--u)); transform: rotate(3deg) translateX(calc(1.2 * var(--u))); }
.pl-w4 { font-size: calc(1.35 * var(--u)); transform: rotate(-5deg) translate(calc(5 * var(--u)), 0.6em); }
.pl-w5 { font-size: calc(1.9 * var(--u)); transform: rotate(2deg); }
.pl-w6 { font-size: calc(1.45 * var(--u)); transform: rotate(-3deg) translateX(calc(3.5 * var(--u))); }
.pl-w7 { font-size: calc(1.55 * var(--u)); transform: rotate(4deg) translateX(calc(1.5 * var(--u))); }
.pl-w8 { font-size: calc(1.35 * var(--u)); transform: rotate(-2deg) translateX(calc(6 * var(--u))); }

/* news: a pasted-on white sheet */
.pl-news { left: calc(33 * var(--u)); top: calc(17.5 * var(--u)); width: calc(27.5 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.4 * var(--u)) calc(0.8 * var(--u)); background: rgba(255, 255, 255, 0.88); color: #000; transform: rotate(4deg); font-size: calc(1.2 * var(--u)); box-shadow: calc(0.6 * var(--u)) calc(0.6 * var(--u)) 0 var(--green); }
.pl-news h2 { font-size: calc(3.2 * var(--u)); letter-spacing: -0.02em; color: var(--green); }
.pl-news a:hover { color: #3d6600; }
.pl-news .news-list { margin: 0; gap: 0.35em; }
.pl-news .news-item { border-top-color: #000 !important; padding-top: 0.25em; }
.pl-news .news-item img { display: none; }
.pl-news .news-item:nth-child(n+9) { display: none; }
.pl-news .pl-all { margin: -0.2em 0 0.6em; }
.pl-all { margin-top: 0.5em; font-weight: 500; }

@media (max-width: 900px) {
  .pl { --u: 1vw; display: block; }
  .pl-stage { width: auto; }
  .pl-stage { height: auto; padding: 0 16px 40px; }
  .pl-rays, .pl-disc, .pl-bar, .pl-w, .pl-cresc { display: none; }
  .pl-l { position: relative; display: inline-block; left: auto !important; top: auto !important; font-size: 16vw !important; margin: 6vw 0 0 0; }
  .pl-block { position: static; transform: none; width: auto; font-size: 17px; margin-top: 28px; }
  .pl-about h2, .pl-news h2 { font-size: 30px; }
  .pl-about, .pl-news, .pl-work { background: none; padding: 0; }
  .pl-about h2 { font-size: 30px; }
  .pl-news { background: var(--fg); }
  .pl-work { transform: none; }
  .pl-work h2 { font-size: 40px; transform: none; }
  .pl-work li { font-size: 20px !important; transform: none !important; }
  .pl-icons svg { width: 26px; height: 26px; }
  .pl-news { padding: 16px; font-size: 17px; }
  .pl-news .news-item { display: block !important; }
}

#pl-free { position: absolute; inset: 0; pointer-events: none; }

/* headings green with one random white letter; single random green letters in the work entries (set by parole-free.js) */
.pl-work h2 { color: var(--green); }
.pl-block h2 .wl { color: var(--fg); }
.pl-news h2 .wl { color: #000; }
.pl-work a .gl { color: var(--green); }