/* ==========================================================================
   graffiti.css — street-art UI kit (fully offline, no external requests)
   Copy this file + the fonts/ folder into the project, e.g. /graffiti/.
   Font URLs below are relative to this file: ./fonts/...
   ========================================================================== */

/* ---------- Fonts (local only) ---------- */
@font-face { font-family: "Wet Paint";    src: url("./fonts/RubikWetPaint-Regular.ttf") format("truetype");      font-display: swap; }
@font-face { font-family: "Spray Paint";  src: url("./fonts/RubikSprayPaint-Regular.ttf") format("truetype");    font-display: swap; }
@font-face { font-family: "Sedgwick";     src: url("./fonts/SedgwickAveDisplay-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Marker";       src: url("./fonts/PermanentMarker-Regular.ttf") format("truetype");    font-display: swap; }
@font-face { font-family: "Bangers";      src: url("./fonts/Bangers-Regular.ttf") format("truetype");            font-display: swap; }
@font-face { font-family: "Grotesk";      src: url("./fonts/SpaceGrotesk-Variable.ttf") format("truetype");      font-weight: 300 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* paint */
  --g-pink:   #ff2e88;
  --g-lime:   #b6ff2e;
  --g-cyan:   #20e3ff;
  --g-yellow: #ffe600;
  --g-orange: #ff6b1a;
  --g-purple: #8a3cff;

  /* wall */
  --g-wall:      #1b1b1d;   /* page background (dark concrete) */
  --g-wall-2:    #26262a;   /* raised surfaces */
  --g-ink:       #f4f1ea;   /* body text on wall */
  --g-ink-dim:   #b9b5ab;
  --g-outline:   #0b0b0c;   /* heavy black outlines */

  /* type */
  --g-font-tag:     "Sedgwick", "Marker", cursive;      /* signatures, small tags */
  --g-font-throw:   "Wet Paint", "Bangers", sans-serif; /* hero / dripping headings */
  --g-font-spray:   "Spray Paint", "Bangers", sans-serif;
  --g-font-marker:  "Marker", cursive;                  /* sub-heads, hand notes */
  --g-font-comic:   "Bangers", sans-serif;              /* buttons, labels */
  --g-font-body:    "Grotesk", system-ui, sans-serif;   /* readable body copy */

  --g-radius: 4px 14px 6px 18px / 16px 5px 14px 6px;   /* wobbly hand-cut corners */
  --g-shadow: 6px 6px 0 var(--g-outline);
  --g-shadow-lg: 10px 10px 0 var(--g-outline);
}

/* Light "white-wall / paste-up" variant */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --g-wall: #ece7dc; --g-wall-2: #fffaf0; --g-ink: #141414; --g-ink-dim: #4a4740;
  }
}
:root[data-theme="light"] {
  --g-wall: #ece7dc; --g-wall-2: #fffaf0; --g-ink: #141414; --g-ink-dim: #4a4740;
}

/* ---------- Base ---------- */
.g-page {
  margin: 0;
  min-height: 100vh;
  color: var(--g-ink);
  font-family: var(--g-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  background-color: var(--g-wall);
  /* concrete: noise + soft stains, all inline (no network) */
  background-image:
    radial-gradient(ellipse at 15% 20%, rgb(255 255 255 / .05), transparent 45%),
    radial-gradient(ellipse at 85% 70%, rgb(0 0 0 / .25), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Brick wall section background */
.g-bricks {
  background-color: #6b2a1f;
  background-image:
    linear-gradient(0deg, rgb(0 0 0 / .45) 2px, transparent 2px),
    linear-gradient(90deg, rgb(0 0 0 / .45) 2px, transparent 2px),
    linear-gradient(90deg, rgb(0 0 0 / .45) 2px, transparent 2px);
  background-size: 80px 40px, 80px 80px, 80px 80px;
  background-position: 0 0, 0 0, 40px 40px;
}

/* ---------- Headings ---------- */
.g-throw {                         /* big dripping hero piece */
  font-family: var(--g-font-throw);
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: .9;
  margin: 0;
  color: var(--g-yellow);
  -webkit-text-stroke: 3px var(--g-outline);
  paint-order: stroke fill;
  text-shadow:
    5px 5px 0 var(--g-pink),
    10px 10px 0 var(--g-outline);
  transform: rotate(-3deg);
}

.g-fill-gradient {                 /* multi-colour fill for a throw-up */
  background: linear-gradient(180deg, var(--g-lime), var(--g-cyan) 55%, var(--g-purple));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(4px 4px 0 var(--g-pink)) drop-shadow(5px 5px 0 var(--g-outline));
}

.g-spray {                         /* fuzzy sprayed heading */
  font-family: var(--g-font-spray);
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--g-cyan);
  text-shadow: 0 0 6px currentColor, 0 0 18px color-mix(in srgb, currentColor 60%, transparent);
  margin: 0 0 .4em;
}

.g-marker {                        /* hand-written sub-heading */
  font-family: var(--g-font-marker);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--g-lime);
  transform: rotate(-1.5deg);
  display: inline-block;
}

.g-tag {                           /* small signature / tag */
  font-family: var(--g-font-tag);
  font-size: 1.6rem;
  color: var(--g-pink);
  transform: rotate(-6deg);
  display: inline-block;
}

/* Paint drip under any element */
.g-drip { position: relative; }
.g-drip::after {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 100%;
  height: 34px;
  background:
    radial-gradient(circle at 50% 100%, currentColor 5px, transparent 6px) 6% 100% / 12px 34px no-repeat,
    linear-gradient(currentColor, currentColor) 6% 0 / 6px 28px no-repeat,
    radial-gradient(circle at 50% 100%, currentColor 4px, transparent 5px) 38% 100% / 10px 20px no-repeat,
    linear-gradient(currentColor, currentColor) 38% 0 / 5px 15px no-repeat,
    radial-gradient(circle at 50% 100%, currentColor 6px, transparent 7px) 71% 100% / 14px 40px no-repeat,
    linear-gradient(currentColor, currentColor) 71% 0 / 7px 33px no-repeat;
  pointer-events: none;
}

/* Marker underline / highlighter swipe */
.g-swipe {
  background: linear-gradient(100deg, transparent 2%, var(--g-pink) 4%, var(--g-pink) 94%, transparent 97%) 0 88% / 100% .45em no-repeat;
  padding: 0 .15em;
}

/* ---------- Surfaces ---------- */
.g-card {
  background: var(--g-wall-2);
  border: 3px solid var(--g-outline);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  padding: 1.5rem;
  transition: transform .2s, box-shadow .2s;
}
.g-card:nth-child(3n+1) { transform: rotate(-1deg); }
.g-card:nth-child(3n+2) { transform: rotate(.8deg); }
.g-card:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: var(--g-shadow-lg); }

.g-sticker {                       /* peel-off sticker badge */
  display: inline-block;
  font-family: var(--g-font-comic);
  letter-spacing: .05em;
  padding: .35em .8em;
  background: var(--g-yellow);
  color: var(--g-outline);
  border: 3px solid var(--g-outline);
  border-radius: 999px;
  box-shadow: 0 0 0 4px #fff, 4px 6px 0 4px var(--g-outline);
  transform: rotate(-8deg);
}

.g-tape {                          /* masking-tape strip */
  position: relative;
}
.g-tape::before {
  content: "";
  position: absolute; top: -14px; left: 50%;
  width: 110px; height: 28px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgb(255 240 190 / .75);
  box-shadow: 0 1px 2px rgb(0 0 0 / .3);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}

/* ---------- Buttons ---------- */
.g-btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--g-font-comic);
  font-size: 1.35rem;
  letter-spacing: .06em;
  padding: .55em 1.3em;
  color: var(--g-outline);
  background: var(--g-lime);
  border: 3px solid var(--g-outline);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s, background .2s;
}
.g-btn:hover  { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 8px 0 var(--g-outline); background: var(--g-yellow); }
.g-btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--g-outline); }
.g-btn:focus-visible { outline: 4px dashed var(--g-pink); outline-offset: 5px; }
.g-btn--pink { background: var(--g-pink); color: #fff; }
.g-btn--cyan { background: var(--g-cyan); }

/* ---------- Nav ---------- */
.g-nav a {
  font-family: var(--g-font-marker);
  color: var(--g-ink);
  text-decoration: none;
  padding: .2em .4em;
}
.g-nav a:hover, .g-nav a[aria-current="page"] {
  background: linear-gradient(100deg, transparent 2%, var(--g-cyan) 4%, var(--g-cyan) 95%, transparent 98%) 0 85% / 100% .5em no-repeat;
}

/* ---------- Forms ---------- */
.g-input {
  font: inherit;
  padding: .7em 1em;
  background: var(--g-wall-2);
  color: var(--g-ink);
  border: 3px solid var(--g-outline);
  border-radius: var(--g-radius);
  box-shadow: 4px 4px 0 var(--g-outline);
}
.g-input:focus-visible { outline: 3px solid var(--g-lime); outline-offset: 2px; }

/* ---------- Decorations ---------- */
.g-splat {                         /* paint splat blob, place absolutely */
  width: 180px; aspect-ratio: 1;
  background: var(--g-pink);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(.4px);
  opacity: .85;
  pointer-events: none;
}

.g-arrow::after {                  /* hand-drawn arrow pointing right */
  content: " ⟶";
  font-family: var(--g-font-marker);
  color: var(--g-yellow);
}

/* ---------- Motion ---------- */
@keyframes g-spray-in {
  0%   { opacity: 0; filter: blur(14px); transform: scale(1.08) rotate(-3deg); }
  60%  { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; filter: blur(0); transform: scale(1) rotate(-3deg); }
}
@keyframes g-wobble {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(-4deg) scale(1.05); }
}
.g-spray-in { animation: g-spray-in .9s cubic-bezier(.2,.8,.2,1) both; }
.g-wobble   { animation: g-wobble 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .g-spray-in, .g-wobble { animation: none; }
  .g-card, .g-btn { transition: none; }
}