/* ============================================================
   RASTRICK — Street Typography Enhancement Layer
   Layer on top of styles.css — modular, non-breaking
   ============================================================ */

/* ---- Additional display font imports ---- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo+Black&family=Oswald:wght@400;500;600;700&display=swap');

/* ---- Spray paint glow on all headings ---- */
h1, h2, h3,
.hero h1,
.section-head h2 {
  text-shadow:
    0 0 40px rgba(232, 19, 42, 0.25),
    0 0 80px rgba(232, 19, 42, 0.12);
}

/* Hero h1 gets maximum impact */
.hero h1 {
  text-shadow:
    0 0 60px rgba(232, 19, 42, 0.35),
    0 0 120px rgba(232, 19, 42, 0.18),
    0 0 200px rgba(232, 19, 42, 0.08);
}

/* Contact heading gets pink glow */
.contact h3 {
  text-shadow:
    0 0 40px rgba(255, 26, 140, 0.3),
    0 0 80px rgba(255, 26, 140, 0.12);
}

/* ---- Graffiti tag utility ---- */
.graffiti-tag {
  font-family: var(--f-graffiti);
  transform: rotate(-2deg);
  display: inline-block;
  color: var(--accent-3);
  line-height: 1;
}

/* ---- Outlined text effects ---- */
.text-outline {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.text-outline-accent {
  -webkit-text-stroke: 1.5px var(--accent);
  color: transparent;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.text-outline-yellow {
  -webkit-text-stroke: 1.5px var(--accent-2);
  color: transparent;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Text highlight marker effect ---- */
.text-highlight {
  background: linear-gradient(
    104deg,
    transparent 0.9%,
    var(--accent-2) 2.4%,
    var(--accent-2) 97.9%,
    transparent 99%
  );
  background-position: 0 86%;
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  padding: 0 2px;
}

.text-highlight-red {
  background: linear-gradient(
    104deg,
    transparent 0.9%,
    var(--accent) 2.4%,
    var(--accent) 97.9%,
    transparent 99%
  );
  background-position: 0 86%;
  background-repeat: no-repeat;
  background-size: 100% 0.35em;
  padding: 0 2px;
}

.text-highlight-pink {
  background: linear-gradient(
    104deg,
    transparent 0.9%,
    var(--accent-3) 2.4%,
    var(--accent-3) 97.9%,
    transparent 99%
  );
  background-position: 0 86%;
  background-repeat: no-repeat;
  background-size: 100% 0.35em;
  padding: 0 2px;
}

/* ---- Condensed bold utility ---- */
.text-condensed {
  font-family: "Oswald", "Archivo Black", var(--f-display);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.9;
}

/* ---- Vertical text utility ---- */
.text-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--f-display);
  font-size: clamp(10px, 1.2vw, 14px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---- Hand-drawn underline ---- */
.underline-sketch {
  position: relative;
  display: inline;
}

.underline-sketch::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -4px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(-0.8deg) skew(-3deg);
}

.underline-sketch-yellow::after {
  background: var(--accent-2);
  transform: rotate(0.5deg) skew(2deg);
}

.underline-sketch-pink::after {
  background: var(--accent-3);
  transform: rotate(-1.2deg) skew(-4deg);
}

/* ---- Enhanced headline sizes ---- */
.headline-xl {
  font-family: var(--f-display);
  font-size: clamp(80px, 14vw, 220px);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.headline-lg {
  font-family: var(--f-display);
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.headline-md {
  font-family: "Archivo Black", var(--f-display);
  font-size: clamp(32px, 5vw, 80px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ---- Bebas display class ---- */
.font-bebas {
  font-family: "Bebas Neue", var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Archivo Black display class ---- */
.font-archivo {
  font-family: "Archivo Black", var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
}

/* ---- Oswald display class ---- */
.font-oswald {
  font-family: "Oswald", var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---- Section index label boost ---- */
.section-head .idx {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

/* ---- Stencil mono label ---- */
.label-mono {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---- All-caps bold block ---- */
.text-block-bold {
  font-family: "Archivo Black", var(--f-display);
  font-weight: 900;
  font-size: clamp(18px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.0;
}

/* =============== MOBILE =============== */
@media (max-width: 720px) {
  h1, h2, h3,
  .hero h1,
  .section-head h2 {
    text-shadow:
      0 0 24px rgba(232, 19, 42, 0.2),
      0 0 48px rgba(232, 19, 42, 0.08);
  }

  .headline-xl {
    font-size: clamp(60px, 18vw, 100px);
  }

  .headline-lg {
    font-size: clamp(40px, 12vw, 80px);
  }

  .text-vertical {
    display: none;
  }
}