/* Graph Scene — per-scene regional graffiti name treatments.
   Element-scoped: Scenes.hand(el, name, opts) in js/scenes.js gives any element
   class="hand", data-scene=<slug> and the lockup it needs (.nm, DC's .nm-row
   stack, Atlanta's data-under layer, a .drip). Every rule here keys on THAT
   element, never on the body, so two names on one page can wear two hands.
   artist.html's #a-name is one such element; body[data-scene] still carries
   the page tint (--acc) there, but nothing below reads it.

   Adapted from design-reference/name-treatments.html at the artist page's 44px
   scale. Sizing: --nfs is the size a page asks for (44px unless it says), --k is
   each hand's own ratio to that (Chicago's block runs small, Atlanta's Bangers
   runs large), --m is the mobile multiplier the artist page applies. */

body { --acc: var(--pink); }

/* ---- base lockup: the def / neutral-wall look ---- */
.hand {
  --fs: calc(var(--nfs, 44px) * var(--k, 1) * var(--m, 1));
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  font-size: var(--fs);
  line-height: 1;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--acc), 0 0 22px color-mix(in srgb, var(--acc) 35%, transparent);
  transform: rotate(-1deg);
  position: relative;
}
#a-name { margin-top: 20px; }
.hand .nm { display: inline-block; }
.hand.long .nm { font-size: .72em; }

/* drip: carries the scene accent; visible only where the treatment earns it */
.hand .drip { display: none; background: linear-gradient(var(--acc), transparent); }
.hand:not([data-scene]) .drip,
.hand[data-scene=nyc] .drip,
.hand[data-scene=nol] .drip,
.hand[data-scene=atl] .drip { display: block; }

/* ---- scene plaque under the meta line (artist page) ---- */
#scene-plaque {
  border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent);
  color: var(--acc);
  font: 11px 'Special Elite', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 10px;
  width: fit-content;
  margin-top: 10px;
}

/* ---- NEW YORK: throw-up — fade fill inside a hard keyline ---- */
.hand[data-scene=nyc] {
  transform: rotate(-2deg);
  text-shadow: none;
  filter: drop-shadow(3px 3px 0 var(--ink)) drop-shadow(0 0 14px color-mix(in srgb, var(--acc) 30%, transparent));
}
.hand[data-scene=nyc] .nm {
  background: linear-gradient(115deg, var(--acc) 15%, var(--yellow) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

/* ---- PHILADELPHIA: tall hand — one monoline stroke, no fill, no glow ---- */
.hand[data-scene=phl] {
  font-family: Caveat, cursive;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--paper);
  text-shadow: none;
  letter-spacing: -.02em;
  transform: scaleY(1.5) rotate(-1deg);
  transform-origin: left bottom;
  margin-top: calc(var(--fs) * 1.18); /* the stretch grows upward — keep clear of what sits above */
}

/* ---- LOS ANGELES: placa — blackletter, monochrome, dead straight ---- */
.hand[data-scene=lax] {
  font-family: 'Pirata One', cursive;
  font-weight: 400;
  color: #c2c7cf;
  text-shadow: 2px 2px 0 rgba(15, 15, 19, .8);
  letter-spacing: .03em;
  transform: none;
}

/* ---- CHICAGO: structure — even modular block on a visible baseline ---- */
.hand[data-scene=chi] {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  --k: .773; /* 34px at the artist page's 44 */
  color: var(--acc);
  letter-spacing: .04em;
  text-shadow: none;
  transform: none;
  box-shadow: 0 6px 0 -2px rgba(242, 240, 234, .25);
  padding-bottom: 8px;
  width: fit-content;
}

/* ---- BAY AREA: handstyle funk — black & silver ---- */
.hand[data-scene=bay] {
  font-family: 'Rock Salt', cursive;
  --k: .682; /* 30px at 44: Rock Salt runs wide */
  line-height: 1.25;
  color: #cfd2d8;
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);
  margin-top: calc(var(--fs) * .93);
}

/* ---- WASHINGTON DC: the stack — name × 3, plain and legible ---- */
.hand[data-scene=dcx] {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  --k: .591; /* 26px at 44 */
  line-height: 1.1;
  color: var(--acc);
  letter-spacing: .1em;
  text-shadow: none;
  transform: none;
}
.hand[data-scene=dcx] .nm-row { display: block; }
.hand[data-scene=dcx] .nm-row:nth-child(2) { opacity: .75; }
.hand[data-scene=dcx] .nm-row:nth-child(3) { opacity: .5; }

/* ---- DETROIT: bubble at building scale ---- */
.hand[data-scene=det] {
  font-family: 'Titan One', cursive;
  --k: .909; /* 40px at 44 */
  color: var(--acc);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: none;
  filter: drop-shadow(4px 4px 0 rgba(15, 15, 19, .9));
  transform: rotate(-1.5deg);
}

/* ---- ATLANTA: palimpsest — the layer beneath shows through ---- */
.hand[data-scene=atl] {
  font-family: 'Bangers', cursive;
  --k: 1.045; /* 46px at 44 */
  color: var(--acc);
  letter-spacing: .04em;
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1deg);
}
.hand[data-scene=atl] .nm { position: relative; }
.hand[data-scene=atl] .nm::before {
  content: attr(data-under);
  position: absolute;
  left: -12px;
  top: -16px;
  font: .82em 'Rock Salt', cursive;
  letter-spacing: 0;
  color: rgba(242, 240, 234, .13);
  text-shadow: none;
  -webkit-text-stroke: 0;
  transform: rotate(-6deg);
  white-space: nowrap;
  z-index: -1;
}

/* ---- HOUSTON: production wall — clean, slab, slowed down ---- */
.hand[data-scene=hou] {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  --k: .909; /* 40px at 44 */
  color: var(--acc);
  letter-spacing: .06em;
  text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 color-mix(in srgb, var(--acc) 22%, transparent);
  transform: scaleY(1.15);
  transform-origin: left bottom;
  margin-top: calc(var(--fs) * .65);
}

/* ---- NEW ORLEANS: hand-painted, fluorescent on house paint ---- */
.hand[data-scene=nol] {
  color: var(--acc);
  text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 45%, transparent), 2px 2px 0 var(--ink);
  transform: rotate(-2.5deg);
}

/* ---- MIAMI: curated colour, designed for the photograph ---- */
.hand[data-scene=mia] {
  font-family: 'Titan One', cursive;
  --k: .909; /* 40px at 44 */
  text-shadow: none;
  transform: none;
}
.hand[data-scene=mia] .nm {
  background: linear-gradient(100deg, var(--acc) 10%, var(--pink) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(15, 15, 19, .85);
}

/* ---- responsive: the artist page scales its name down; other pages size
   their hands themselves through Scenes.hand({size}) ---- */
@media (max-width: 760px) {
  #a-name.hand { --m: .62; }
  #a-name.hand[data-scene=phl] { margin-top: 34px; }
  #a-name.hand[data-scene=hou] { margin-top: 22px; }
}

/* style.css's mobile rule `.neon { flex: 1 1 140px }` is meant for row-flex
   stat plaques; in the artist rail's column flex the 140px basis becomes
   height and stretches the Direct Circle box. Artist page loads scenes.css,
   so scope the reset here. */
@media (max-width: 760px) {
  .neon.neon-yellow { flex: 0 0 auto; }
}

/* ---- letterforms only: for text that cannot hold the lockup (an <input>, an
   SVG label). Scenes.font(el, name) sets class="hand-font" data-scene=<slug>;
   the hand's typeface, weight and case come through, nothing layered. ---- */
.hand-font[data-scene=phl] { font-family: Caveat, cursive; font-weight: 600; letter-spacing: -.02em; }
.hand-font[data-scene=lax] { font-family: 'Pirata One', cursive; font-weight: 400; letter-spacing: .03em; }
.hand-font[data-scene=chi] { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.hand-font[data-scene=bay] { font-family: 'Rock Salt', cursive; }
.hand-font[data-scene=dcx] { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.hand-font[data-scene=det],
.hand-font[data-scene=mia] { font-family: 'Titan One', cursive; }
.hand-font[data-scene=atl] { font-family: 'Bangers', cursive; letter-spacing: .04em; }
.hand-font[data-scene=hou] { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* nyc and nol keep the marker: their hands are colour and layer, not a typeface */