/* Rhythm Writer theme: cream paper, a VHS rainbow band, heavy type, a little grain.
   Shared by the editor, the worksheet and the site. Light by default; data-theme="dark" on <html> is the VHS-black variant. */
@font-face { font-family: 'Archivo'; src: url('fonts/Archivo.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url('fonts/ArchivoBlack.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* paper */
  --bg: #efe7d8; --panel: #e8dfcc; --panel-2: #f6f0e4; --line: #cdbfa6; --text: #1d1a16; --muted: #6f665a;
  --accent: #ec6a23; --accent-ink: #1d1a16; --danger: #d9245a; --ok: #3f8f36; --focus: #1b8fa0;
  --plum: #5a2b82;
  /* the band */
  --s1: #1b8fa0; --s2: #5aa446; --s3: #f2b418; --s4: #ec6a23; --s5: #d9245a;
  --ink: #1d1a16; --paper: #f9f5ec;
  --head: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --sans: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  /* section colours, from the band */
  --c-intro: #1b8fa0; --c-verse: #5aa446; --c-prechorus: #a3b51e; --c-chorus: #ec6a23;
  --c-postchorus: #f2b418; --c-interlude: #5a2b82; --c-bridge: #d9245a; --c-breakdown: #b5161f;
  --c-solo: #f2b418; --c-instrumental: #1b8fa0; --c-build: #8e3fb0; --c-drop: #ec6a23;
  --c-outro: #6f665a; --c-custom: #8a8176;
  --grain-opacity: .055;
  --tint: rgba(29,26,22,.03); --tint-2: rgba(29,26,22,.05); --tint-3: rgba(29,26,22,.08);
}
:root[data-theme="dark"] {
  --tint: rgba(255,255,255,.02); --tint-2: rgba(255,255,255,.045); --tint-3: rgba(255,255,255,.07);
  --bg: #121110; --panel: #1b1a18; --panel-2: #26231f; --line: #3a362f; --text: #efe7d8; --muted: #a79d8c;
  --accent: #ec6a23; --accent-ink: #1d1a16; --focus: #3fb0c0; --ok: #7cc26a; --plum: #c9a7ec;
  --ink: #efe7d8; --paper: #1b1a18;
  --grain-opacity: .08;
}

/* film grain over everything, very light */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-opacity); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }

/* the band: five stripes with a black chevron, as a block or a thin rule */
.band { display: flex; height: 14px; width: 100%; position: relative; overflow: hidden; }
.band i { flex: 1; display: block; }
.band i:nth-child(1) { background: var(--s1); } .band i:nth-child(2) { background: var(--s2); } .band i:nth-child(3) { background: var(--s3); }
.band i:nth-child(4) { background: var(--s4); } .band i:nth-child(5) { background: var(--s5); }
.band.chevron::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: var(--ink); clip-path: polygon(45% 0, 100% 0, 100% 100%, 45% 100%, 0 50%); }
.band.tall { height: 56px; }
.band.thin { height: 6px; }
/* the three-stripe mark from the Room Flow project */
.mark { display: inline-flex; flex-direction: column; gap: 2px; width: 22px; flex: none; }
.mark i { display: block; height: 4px; border-radius: 2px; }
.mark i:nth-child(1) { background: var(--s4); } .mark i:nth-child(2) { background: var(--s3); } .mark i:nth-child(3) { background: var(--s5); }

/* a "VHS label" badge: small, uppercase, boxed */
.badge { display: inline-block; font-family: var(--head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border: 2px solid var(--ink); padding: 2px 7px; color: var(--ink); line-height: 1.3; }