/* === Graffiti mode (html[data-theme="graffiti"]) ===
   The third site theme, after dark and light. Based on the reporecon graffiti banner:
   a night-navy wall, white and Grinx-yellow tag lettering with black outlines,
   spray lines, splatter, stickers. Load after css/theme.css (and after sitenav.css
   where used). Everything here is scoped to the graffiti theme, so dark and
   light are untouched.

   Fonts are self-hosted (SIL Open Font License, see /fonts/LICENSE.md) so
   pages with strict CSP (recon) can use them. */

@font-face { font-family: "Sedgwick Ave Display"; src: url("/fonts/sedgwick-ave-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/fonts/permanent-marker.woff2") format("woff2"); font-display: swap; }

/* --- Tokens --- */
html:root[data-theme="graffiti"] {
  --gx-bg: #090f16;               /* the banner's wall color */
  --gx-bg-2: #111a25;
  --gx-bg-3: #1a2431;
  --gx-hover: #243142;
  --gx-border: #2b3747;
  --gx-text: #f4f1ea;             /* chalky white, like the "repo" letters */
  --gx-text-2: #b9c0c9;
  --gx-muted: #7f8995;
  --gx-accent: #f5c518;
  --gx-accent-dim: rgba(245, 197, 24, 0.16);
  --gx-fill: #f5c518;
  --gx-on-fill: #090f16;
  --gx-red: #ff5a4f;
  --gx-orange: #ff9f1c;
  --gx-shadow: rgba(0, 0, 0, 0.55);
  --gx-nav-bg: rgba(9, 15, 22, 0.94);
  --gx-tag: "Sedgwick Ave Display", "Permanent Marker", "Marker Felt", cursive;
  --gx-marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --gx-outline: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 0 #000;
  color-scheme: dark;

  /* recon/style.css and gitwho/style.css only define their palettes for dark and
     light; give them graffiti values here. */
  --bg-2: var(--gx-bg-2);
  --bg-3: var(--gx-bg-3);
  --text-2: var(--gx-text-2);
  --muted: var(--gx-muted);
  --green: #7ee07e;
  --yellow: var(--gx-accent);
  --red: var(--gx-red);
  --purple: #d0a8ff;
  --accent-fill: var(--gx-fill);
  --on-accent: var(--gx-on-fill);
  --link: var(--gx-accent);
  --bg-primary: var(--gx-bg);
  --bg-tertiary: var(--gx-bg-3);
  --text-primary: var(--gx-text);
  --text-secondary: var(--gx-text-2);
  --accent-yellow: var(--gx-accent);
  --accent-red: var(--gx-red);
  --accent-purple: #d0a8ff;
  --lang-bar-bg: var(--gx-bg-3);
  --lang-bar-fill: var(--gx-fill);
  --table-stripe: var(--gx-bg-2);
}

/* --- The wall --- */
html[data-theme="graffiti"] body {
  background: var(--gx-bg) url("/images/graffiti/wall.webp") repeat;
  background-attachment: fixed;
}

/* --- Lettering --- */
html[data-theme="graffiti"] h1 {
  font-family: var(--gx-tag);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--gx-text);
  text-shadow: var(--gx-outline), 5px 6px 0 var(--gx-fill);
}
html[data-theme="graffiti"] h2 {
  font-family: var(--gx-tag);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 3px 4px 0 rgba(245, 197, 24, 0.85);
}
html[data-theme="graffiti"] h3,
html[data-theme="graffiti"] h4 { font-family: var(--gx-marker); font-weight: 400; letter-spacing: 0.02em; }

/* Long-form reading stays in the plain sans; only headings get paint. */
html[data-theme="graffiti"] .markdown-body h2,
html[data-theme="graffiti"] .markdown-body h3,
html[data-theme="graffiti"] .markdown-body h4 { font-family: var(--gx-marker); text-shadow: none; }

/* Eyebrow labels look hand-marked */
html[data-theme="graffiti"] .section-label,
html[data-theme="graffiti"] .ai-section-label,
html[data-theme="graffiti"] .split:not(.center) .role,
html[data-theme="graffiti"] .stat-label,
html[data-theme="graffiti"] .lens-group h4,
html[data-theme="graffiti"] .section-title {
  font-family: var(--gx-marker);
  color: var(--gx-accent);
  letter-spacing: 0.06em;
  width: fit-content;
  transform: rotate(-2deg);
}
html[data-theme="graffiti"] .section-label,
html[data-theme="graffiti"] .ai-section-label { display: block; }

/* Inline text links read as a quick spray underline (not links that wrap a whole card) */
html[data-theme="graffiti"] main a:not([class]):not(:has(h1, h2, h3, h4, p, div, img)),
html[data-theme="graffiti"] .markdown-body a:not(:has(img)),
html[data-theme="graffiti"] article a:not([class]):not(:has(h1, h2, h3, h4, p, div, img)) {
  color: var(--gx-text);
  text-decoration: none;
  background: linear-gradient(transparent 62%, rgba(245, 197, 24, 0.55) 62%, rgba(245, 197, 24, 0.55) 92%, transparent 92%);
}
html[data-theme="graffiti"] main a:not([class]):not(:has(h1, h2, h3, h4, p, div, img)):hover,
html[data-theme="graffiti"] .markdown-body a:not(:has(img)):hover { background: rgba(245, 197, 24, 0.85); color: var(--gx-on-fill); }

::selection { background: #f5c518; color: #090f16; }

/* --- Wordmarks: sh(o) luv, repo rec(o)n, git wh(o), Le(o)n --- */
html[data-theme="graffiti"] .gx-wordmark,
html[data-theme="graffiti"] .header-logo,
html[data-theme="graffiti"] .topbar .logo {
  font-family: var(--gx-tag);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gx-text);
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}
html[data-theme="graffiti"] .gx-wordmark .accent,
html[data-theme="graffiti"] .logo .accent,
html[data-theme="graffiti"] .header-logo .accent { color: var(--gx-fill); }
html[data-theme="graffiti"] .gx-wordmark .o,
html[data-theme="graffiti"] .logo .o,
html[data-theme="graffiti"] .header-logo .o,
html[data-theme="graffiti"] .hero .o,
html[data-theme="graffiti"] .gx-o {
  box-shadow: 0 0 0 0.07em #000;
  transform: rotate(-10deg);
}

/* Tag lettering needs more size than a clean sans to read */
html[data-theme="graffiti"] .nav-logo.gx-wordmark,
html[data-theme="graffiti"] .site-nav .gx-wordmark { font-size: 27px; }
html[data-theme="graffiti"] .topbar .logo,
html[data-theme="graffiti"] .header-logo { font-size: 26px; }

/* Small utility headings stay in marker, not full tag lettering */
html[data-theme="graffiti"] .bookmarklet-box h2,
html[data-theme="graffiti"] .settings h2,
html[data-theme="graffiti"] .block-title h2,
html[data-theme="graffiti"] .card h3 {
  font-family: var(--gx-marker);
  text-shadow: none;
  letter-spacing: 0.03em;
}

/* Painted banners (recon, gitwho, Leon Johnson) stand in for the plain heading.
   Elements marked .gx-plain-title show in dark and light only. */
.graffiti-banner { display: none; }
html[data-theme="graffiti"] .gx-plain-title { display: none !important; }
html[data-theme="graffiti"] .graffiti-banner {
  display: block;
  width: min(100%, 880px);
  height: auto;
  margin: -1.5rem auto 0.5rem;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 62%, transparent 100%);
}
html[data-theme="graffiti"] .graffiti-banner.is-sm { width: min(100%, 440px); margin: -0.5rem auto 0.25rem; }
html[data-theme="graffiti"] .graffiti-banner.is-md { width: min(100%, 620px); margin: 0 auto 0.5rem; }
/* gitwho and Leon Johnson were painted on lighter brick than the site wall, so fade their edges harder */
html[data-theme="graffiti"] .graffiti-banner[src*="gitwho"],
html[data-theme="graffiti"] .graffiti-banner[src*="leon-johnson"],
html[data-theme="graffiti"] .graffiti-banner[src*="blog"],
html[data-theme="graffiti"] .graffiti-banner[src*="lets-connect"],
html[data-theme="graffiti"] .graffiti-banner[src*="speaking"],
html[data-theme="graffiti"] .graffiti-banner[src*="ai-consulting"] {
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 48%, transparent 100%);
}
/* gitwho's search column is 600px; let the banner break out to recon's size */
html[data-theme="graffiti"] #search-page .graffiti-banner {
  width: min(94vw, 880px);
  margin: 0 0 -0.75rem 50%;
  transform: translateX(-50%);
}
html[data-theme="graffiti"] .hero .graffiti-banner { width: min(100%, 780px); margin: 0.75rem auto 0; }
/* Left-aligned section headers (blog, work sections): banner sits left and a bit smaller */
html[data-theme="graffiti"] .graffiti-banner.is-left { width: min(100%, 560px); margin: -0.75rem 0 0 -2rem; }

/* --- Headers: a rough spray-painted line along the bottom edge --- */
html[data-theme="graffiti"] .brand-nav,
html[data-theme="graffiti"] .site-nav,
html[data-theme="graffiti"] .results-header,
html[data-theme="graffiti"] .section-nav { border-bottom: none; box-shadow: none; }
html[data-theme="graffiti"] .brand-nav::after,
html[data-theme="graffiti"] .site-nav::after,
html[data-theme="graffiti"] .results-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 8px);
  height: 16px;
  background: url("/images/graffiti/stroke.svg") 0 0 / 480px 16px repeat-x;
  pointer-events: none;
}
html[data-theme="graffiti"] .results-header { position: relative; }
html[data-theme="graffiti"] .brand-nav { background: var(--gx-nav-bg); }
html[data-theme="graffiti"] .post-header { padding-top: 14px; }
html[data-theme="graffiti"] .site-nav + .topbar { padding-top: 14px; border-bottom-color: var(--gx-border); }

/* On the work page the section menu slides in under the header: the line moves to its edge */
html[data-theme="graffiti"] .brand-nav:has(~ .section-nav.visible)::after { display: none; }
html[data-theme="graffiti"] .section-nav.visible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 8px);
  height: 16px;
  background: url("/images/graffiti/stroke.svg") 0 0 / 480px 16px repeat-x;
  pointer-events: none;
}

html[data-theme="graffiti"] .nav-links a,
html[data-theme="graffiti"] .site-nav-links a,
html[data-theme="graffiti"] .section-nav-inner a { font-family: var(--gx-marker); font-size: 15px; letter-spacing: 0.03em; }
html[data-theme="graffiti"] .nav-links a::after,
html[data-theme="graffiti"] .site-nav-links a::after {
  height: 4px;
  bottom: -6px;
  border-radius: 3px 1px 4px 1px;
  transform: rotate(-2deg);
}

/* --- Buttons are stickers --- */
html[data-theme="graffiti"] .btn-primary,
html[data-theme="graffiti"] .split:not(.center) .cta,
html[data-theme="graffiti"] .search-btn,
html[data-theme="graffiti"] .hero-form button,
html[data-theme="graffiti"] .top-form button,
html[data-theme="graffiti"] .header-search button,
html[data-theme="graffiti"] .save-contact-btn {
  font-family: var(--gx-marker);
  font-weight: 400;
  letter-spacing: 0.04em;
  background: var(--gx-fill);
  color: var(--gx-on-fill);
  border: 2px solid #000;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-1.5deg);
  transition: transform 0.15s, box-shadow 0.15s;
}
html[data-theme="graffiti"] .btn-primary:hover,
html[data-theme="graffiti"] .split:not(.center) .cta:hover,
html[data-theme="graffiti"] .search-btn:hover,
html[data-theme="graffiti"] .hero-form button:hover,
html[data-theme="graffiti"] .top-form button:hover,
html[data-theme="graffiti"] .header-search button:hover {
  background: var(--gx-fill);
  color: var(--gx-on-fill);
  transform: rotate(1deg) scale(1.04);
  box-shadow: 6px 6px 0 #000;
  opacity: 1;
  filter: none;
}
html[data-theme="graffiti"] .btn-outline {
  font-family: var(--gx-marker);
  font-weight: 400;
  background: transparent;
  color: var(--gx-text);
  border: 2px dashed var(--gx-fill);
  transform: rotate(1deg);
}
html[data-theme="graffiti"] .btn-outline:hover { background: var(--gx-fill); color: var(--gx-on-fill); border-style: solid; }

/* Pills and tags are little stickers slapped on at angles */
html[data-theme="graffiti"] .hero-pill,
html[data-theme="graffiti"] .card-tag,
html[data-theme="graffiti"] .topic,
html[data-theme="graffiti"] .focus-tag,
html[data-theme="graffiti"] .post-tag {
  font-family: var(--gx-marker);
  font-weight: 400;
  background: var(--gx-text);
  color: var(--gx-on-fill);
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0 #000;
  transform: rotate(-2deg);
}
html[data-theme="graffiti"] .hero-pill:nth-child(even),
html[data-theme="graffiti"] .card-tag:nth-child(even),
html[data-theme="graffiti"] .topic:nth-child(even),
html[data-theme="graffiti"] .focus-tag:nth-child(even),
html[data-theme="graffiti"] .post-tag:nth-child(even) { transform: rotate(2deg); background: var(--gx-fill); }

/* --- Cards: pasted-up panels with a hard shadow, slightly off-square --- */
html[data-theme="graffiti"] .card,
html[data-theme="graffiti"] .service-card,
html[data-theme="graffiti"] .tool-card,
html[data-theme="graffiti"] .cve-card,
html[data-theme="graffiti"] .writing-card,
html[data-theme="graffiti"] .contrib-card,
html[data-theme="graffiti"] .post-card,
html[data-theme="graffiti"] .lens,
html[data-theme="graffiti"] .profile-card,
html[data-theme="graffiti"] .content-section,
html[data-theme="graffiti"] .metric-card,
html[data-theme="graffiti"] .bookmarklet-box,
html[data-theme="graffiti"] .settings {
  background-color: rgba(17, 26, 37, 0.92);
  border: 2px solid #000;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.9), 5px 5px 0 1px rgba(245, 197, 24, 0.35);
}
html[data-theme="graffiti"] .card:nth-child(odd),
html[data-theme="graffiti"] .service-card:nth-child(odd),
html[data-theme="graffiti"] .tool-card:nth-child(odd),
html[data-theme="graffiti"] .writing-card:nth-child(odd),
html[data-theme="graffiti"] .post-card:nth-child(odd) { transform: rotate(-0.4deg); }
html[data-theme="graffiti"] .card:nth-child(even),
html[data-theme="graffiti"] .service-card:nth-child(even),
html[data-theme="graffiti"] .tool-card:nth-child(even),
html[data-theme="graffiti"] .writing-card:nth-child(even),
html[data-theme="graffiti"] .post-card:nth-child(even) { transform: rotate(0.4deg); }
html[data-theme="graffiti"] .lens:hover,
html[data-theme="graffiti"] .post-card:hover,
html[data-theme="graffiti"] .tool-card:hover,
html[data-theme="graffiti"] .service-card:hover { border-color: var(--gx-fill); }

/* Inputs look like strips of tape */
html[data-theme="graffiti"] .hero-form input,
html[data-theme="graffiti"] .top-form input,
html[data-theme="graffiti"] .search-box,
html[data-theme="graffiti"] .header-search input,
html[data-theme="graffiti"] #search-input:not(.search-box input) {
  background: rgba(244, 241, 234, 0.07);
  border: 2px solid var(--gx-text);
  border-radius: 3px;
}

/* --- Landing page: three doors on one wall --- */
html[data-theme="graffiti"] .split.left,
html[data-theme="graffiti"] .split.right { background: transparent; }
/* .split.center keeps its green terminal look in every theme (css/landing.css) */

/* --- Talk rows: hover is a highlighter swipe --- */
html[data-theme="graffiti"] .talks-list li:has(.talk-title a):hover,
html[data-theme="graffiti"] .past-talks-list li:has(.past-talk-title a):hover { background: rgba(245, 197, 24, 0.2); transform: rotate(-0.3deg); }

/* --- Software menu: marker label, pasted-up panel --- */
html[data-theme="graffiti"] .nav-menu .nav-menu-btn { font-family: var(--gx-marker); font-size: 15px; letter-spacing: 0.03em; }
html[data-theme="graffiti"] .nav-menu .nav-menu-panel { background: #111a25; border: 2px solid #000; box-shadow: 5px 5px 0 #000, 5px 5px 0 1px rgba(245, 197, 24, 0.35); }
html[data-theme="graffiti"] .nav-menu .nav-menu-label { font-family: var(--gx-marker); color: var(--gx-accent); letter-spacing: 0.06em; }
html[data-theme="graffiti"] .nav-menu .nav-menu-panel a.nav-menu-item strong { font-family: var(--gx-marker); font-weight: 400; letter-spacing: 0.03em; }
html[data-theme="graffiti"] .nav-menu .nav-menu-panel a.nav-menu-item small { font-family: var(--gx-sans); letter-spacing: 0; text-transform: none; }

/* --- The theme toggle is a little sticker too --- */
html[data-theme="graffiti"] [data-theme-toggle] {
  background: var(--gx-fill);
  color: #090f16;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  transform: rotate(-4deg);
}
html[data-theme="graffiti"] [data-theme-toggle]:hover { color: #090f16; border-color: #000; transform: rotate(3deg) scale(1.06); }

/* --- Grinx speaks on a sticker --- */
html[data-theme="graffiti"] .gx-buddy .gx-say,
html[data-theme="graffiti"] .buddy .say {
  font-family: var(--gx-marker);
  background: var(--gx-text);
  color: #090f16;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  transform: rotate(-2deg);
}
html[data-theme="graffiti"] .gx-buddy .gx-face,
html[data-theme="graffiti"] .buddy .face { border-color: #000; box-shadow: 0 0 0 3px var(--gx-fill), 4px 4px 0 3px #000; }

/* Speaking page cards and stats */
html[data-theme="graffiti"] .watch-card,
html[data-theme="graffiti"] .kit-bio,
html[data-theme="graffiti"] .talk-topic-card,
html[data-theme="graffiti"] .breakdown-card,
html[data-theme="graffiti"] .format-card {
  background-color: rgba(17, 26, 37, 0.92);
  border: 2px solid #000;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.9), 5px 5px 0 1px rgba(245, 197, 24, 0.35);
}
html[data-theme="graffiti"] .talk-topic-card:nth-child(odd),
html[data-theme="graffiti"] .format-card:nth-child(odd) { transform: rotate(-0.4deg); }
html[data-theme="graffiti"] .talk-topic-card:nth-child(even),
html[data-theme="graffiti"] .format-card:nth-child(even) { transform: rotate(0.4deg); }
html[data-theme="graffiti"] .talk-topic-card:hover,
html[data-theme="graffiti"] .format-card:hover { border-color: var(--gx-fill); }
html[data-theme="graffiti"] .format-icon img { border-color: #000; box-shadow: 0 0 0 3px var(--gx-fill); transform: rotate(-6deg); }
html[data-theme="graffiti"] .speak-hero-photo img { border: 3px solid #000; box-shadow: 7px 7px 0 var(--gx-fill), 7px 7px 0 3px #000; transform: rotate(1.5deg); }
html[data-theme="graffiti"] .book-checklist li { font-family: var(--gx-marker); background: var(--gx-text); color: #090f16; border: 1.5px solid #000; box-shadow: 2px 2px 0 #000; transform: rotate(-1.5deg); }
html[data-theme="graffiti"] .book-checklist li:nth-child(even) { background: var(--gx-fill); transform: rotate(1.5deg); }
html[data-theme="graffiti"] .watch-card strong,
html[data-theme="graffiti"] .kit-bio-head h3 { font-family: var(--gx-marker); font-weight: 400; letter-spacing: 0.02em; }
html[data-theme="graffiti"] .credential-label { font-family: var(--gx-marker); color: var(--gx-text-2); letter-spacing: 0.03em; }

/* Stats and scores in tag lettering */
html[data-theme="graffiti"] .credential-number,
html[data-theme="graffiti"] .stat-number,
html[data-theme="graffiti"] .stat-value,
html[data-theme="graffiti"] .metric-value,
html[data-theme="graffiti"] .score-big {
  font-family: var(--gx-tag);
  font-weight: 400;
  color: var(--gx-fill);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 3px 3px 0 #000;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="graffiti"] * { transition: none !important; }
}