/* Title typography for nodrugs.space
   Credit: adapted from Ana Tudor (thebabydino)'s "FLASH" typography pen
   https://codepen.io/thebabydino/pen/vExzBxd
   The pen's purple-teal page background is omitted so this sits on the
   existing space theme. Face, side, and outline colors match the pen.
   The pen paints those layers with SVG filters whose kernel is a fixed
   pixel size; here the same look is done with background-clip, a white
   text stroke, and em-scaled drop-shadows so the 3D offset scales with
   font size, nothing overflows on a 390px screen, and heading text does
   not have to be duplicated in the markup (or read twice).

   Stock Roboto 900 italic (even the static files) has overlapping
   contours, and -webkit-text-stroke would draw white lines through
   glyphs such as H, A, N, W, and E. This file therefore loads a
   self-hosted, overlap-removed Roboto Black Italic and keeps
   paint-order: stroke fill so only the outer edge and counters are
   outlined.
*/

@font-face {
  font-family: "Roboto Title";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/Roboto-BlackItalic.woff2") format("woff2");
}

:root {
  --text-face-c0: #01f9ae;
  --text-face-c1: #01a7fe;
  --text-side-c0: #ff016b;
  --text-side-c1: #e303dd;
  --text-line-c0: #ededed;
  --title-d: 0.05em;
}

h1, h2, h3, h4, h5, h6,
.logo,
.logo a,
.rule .big {
  font-family: "Roboto Title", Roboto, sans-serif;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.125;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding-right: 0.14em;
  padding-bottom: 0.12em;
  background-image: linear-gradient(to bottom, var(--text-face-c0) 15%, var(--text-face-c1) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  background-color: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.03em var(--text-line-c0);
  paint-order: stroke fill;
  text-shadow: none;
  filter:
    drop-shadow(0.018em 0.018em 0 var(--text-side-c0))
    drop-shadow(calc(var(--title-d) * 0.65) calc(var(--title-d) * 0.65) 0 var(--text-side-c0))
    drop-shadow(var(--title-d) var(--title-d) 0 var(--text-side-c1))
    drop-shadow(calc(var(--title-d) * 1.4) calc(var(--title-d) * 1.4) calc(var(--title-d) * 0.55) hsl(0 0% 0% / .31));
}

/* Inner spans that used to carry their own fill (sheen, accent, "No") */
h1 .grad,
h1 .no,
.logo span,
.logo a {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  background-image: inherit;
  background-size: auto;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: inherit;
  animation: none;
  text-shadow: none;
  filter: none;
}

/* Keep the psychedelic "drugs" word; don't let the title stroke cover it. */
h1 .drug-trip,
h2 .drug-trip,
h3 .drug-trip,
.rule .big .drug-trip,
.drug-trip {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 700px) {
  :root { --title-d: 0.04em; }
  h1, h2, h3, h4, h5, h6, .logo, .logo a, .rule .big {
    -webkit-text-stroke-width: 0.026em;
  }
}

@media (max-width: 400px) {
  .logo { font-size: 1.05rem; }
}

/* Prevent text disappearing in forced-colors / high contrast mode.
   (Same idea as thebabydino's pen.) */
@media (forced-colors: active) {
  h1, h2, h3, h4, h5, h6,
  .logo, .logo a, .rule .big,
  h1 .grad, h1 .no, .logo span {
    background: none;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText;
    -webkit-text-stroke: 0;
    filter: none;
  }
}