/* YouthVoice brand, per Josh 10/27: navy #111827, mint #35D6A0, white. Heavy italic condensed type. Spray grain.
   The mark and wordmark here are interim builds; final files from Josh replace them. */
:root {
  --yv-navy: #111827; --yv-navy-2: #1B2433; --yv-mint: #35D6A0; --yv-mint-2: #9BF2CF; --yv-mint-wash: #E6FBF3; --yv-mint-ink: #0B7A55; --yv-white: #FFFFFF;
  --yv-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --yv-font-body: "Barlow", system-ui, sans-serif;
}
.yv-grain { position: relative; isolation: isolate; }
.yv-grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(53, 214, 160, .55), transparent 60%),
    radial-gradient(45% 60% at 0% 100%, rgba(53, 214, 160, .42), transparent 62%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 -1.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 -1.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Wordmark: capital Y, check V, map-pin O (selected identity). */
.yv-wm { font-family: var(--yv-font-display); font-weight: 900; font-style: italic; letter-spacing: -0.015em; white-space: nowrap; display: inline-flex; align-items: baseline; line-height: 1; }
.yv-wm .yv-wm-v { display: inline-block; width: .8em; height: .98em; margin: 0 -.07em 0 -.03em; position: relative; overflow: visible; align-self: flex-end; transform: translateY(-.13em); }
.yv-wm .yv-wm-o { display: inline-block; width: .5em; height: .66em; margin: 0 .02em 0 .02em; position: relative; top: .14em; overflow: visible; }
.yv-wm .yv-wm-ai { color: inherit; }
.yv-mark { display: inline-block; width: 1.6em; height: 1.6em; flex: none; vertical-align: middle; }
/* Waveform line, used as a brand motif. */
.yv-wave-line { display: block; width: 100%; height: 48px; overflow: visible; }
.yv-wave-line path { fill: none; stroke: var(--yv-mint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .yv-wave-line path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: yv-draw 2.4s cubic-bezier(.6, .1, .2, 1) .3s forwards; }
  @keyframes yv-draw { to { stroke-dashoffset: 0; } }
}

/* Logo images (Josh's renditions). Size with font-size or height on the parent. */
.yv-wm-img { height: 1em; width: auto; display: inline-block; vertical-align: middle; }
img.yv-mark { width: 1.6em; height: auto; display: inline-block; vertical-align: middle; }
.yv-lockup { height: 100%; width: auto; display: block; }