/*
 * Theme picker + alternative themes.
 * The default (neon) look lives in the page stylesheets; every other theme is
 * scoped to html[data-theme="..."] here, so loading this file changes nothing
 * until a theme is picked. theme.js sets the attribute before first paint.
 */

/* ------------------------------------------------------------------ */
/* Theme switch transition: theme.js grows the new theme out of the    */
/* picker as a circle, so the default cross-fade is switched off       */
/* ------------------------------------------------------------------ */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ------------------------------------------------------------------ */
/* Theme picker                                                         */
/* ------------------------------------------------------------------ */
.theme-picker {
  position: fixed;
  z-index: 60;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Sit above the home page's bottom section bar on tablet and mobile */
@media (max-width: 1023px) {
  body:has(.section-nav) .theme-picker {
    bottom: calc(5rem + env(safe-area-inset-bottom));
  }

  /* Matches the section nav ignoring Firefox's bottom inset (home.css) */
  @supports (-moz-appearance: none) {
    body:has(.section-nav) .theme-picker {
      bottom: 5rem;
    }
  }
}

.theme-picker-toggle {
  display: block;
  width: 3rem;
  height: 3rem;
  padding: 3px;
  border-radius: 50%;
  border: 2px solid rgba(192, 132, 252, 0.7);
  background: rgba(30, 5, 55, 0.9);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.6), 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.theme-picker-toggle:hover,
.theme-picker.is-open .theme-picker-toggle {
  transform: scale(1.08) rotate(-8deg);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.9), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.theme-picker-toggle:focus-visible,
.theme-option:focus-visible {
  outline: 2px solid var(--green-400);
  outline-offset: 3px;
}

.theme-picker-toggle .theme-swatch {
  width: 100%;
  height: 100%;
}

.theme-swatch {
  display: block;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

.theme-swatch--neon {
  background:
    radial-gradient(circle at 34% 30%, #f3e8ff 0 9%, rgba(243, 232, 255, 0) 10%),
    radial-gradient(circle at 50% 50%, var(--purple-400), var(--purple-700) 55%, var(--purple-950) 85%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(168, 85, 247, 0.7);
}

.theme-swatch--graffiti {
  background:
    radial-gradient(circle at 28% 30%, #ffe14d 0 21%, transparent 22%),
    radial-gradient(circle at 70% 34%, #ff2e88 0 25%, transparent 26%),
    radial-gradient(circle at 44% 72%, #2de2e6 0 23%, transparent 24%),
    radial-gradient(circle at 80% 76%, #a3ff12 0 11%, transparent 12%),
    radial-gradient(circle at 18% 64%, #ff7a1a 0 8%, transparent 9%),
    #1a1517;
  box-shadow: inset 0 0 0 2px #0d0d0d;
}

.theme-picker-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: 16.5rem;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(168, 85, 247, 0.5);
  background: rgba(20, 3, 38, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
  transform-origin: calc(100% - 1.5rem) calc(100% + 1.5rem);
  transform: scale(0.6);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, visibility 0s linear 0.25s;
}

.theme-picker.is-open .theme-picker-menu {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.theme-picker-heading {
  margin: 0 0 0.5rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(216, 180, 254, 0.7);
}

.theme-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 2rem 0.55rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  background: none;
  color: var(--purple-100);
  text-align: left;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.theme-option + .theme-option {
  margin-top: 0.25rem;
}

.theme-picker.is-open .theme-option {
  opacity: 1;
  transform: none;
  transition-delay: 0s, 0s, calc(0.06s + var(--option-index) * 0.06s), calc(0.06s + var(--option-index) * 0.06s);
}

.theme-option:hover {
  background: rgba(168, 85, 247, 0.15);
}

.theme-option[aria-pressed="true"] {
  border-color: rgba(192, 132, 252, 0.6);
  background: rgba(168, 85, 247, 0.2);
}

/* Tick on the active theme */
.theme-option[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.4rem;
  height: 0.75rem;
  margin-top: -0.5rem;
  border: solid var(--green-400);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.theme-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.theme-option-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.theme-option-desc {
  font-size: 0.75rem;
  color: rgba(216, 180, 254, 0.7);
}

/* Graffiti-only background layers, hidden in every other theme */
.bg-drips {
  display: none;
}

.spray-canvas {
  position: fixed;
  inset: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-picker-toggle,
  .theme-picker-menu,
  .theme-option {
    transition: none;
  }
}

/* ================================================================== */
/* GRAFFITI                                                             */
/* Spray paint on a brick wall: marker fonts, hard offset shadows,      */
/* hand-drawn edges and paint drips                                     */
/* ================================================================== */
html[data-theme="graffiti"] {
  --g-pink: #ff2e88;
  --g-yellow: #ffe14d;
  --g-cyan: #2de2e6;
  --g-lime: #a3ff12;
  --g-orange: #ff7a1a;
  --g-ink: #0d0d0d;
  --g-cream: #f4efe6;
  --g-text: rgba(244, 239, 230, 0.86);
  --g-muted: rgba(244, 239, 230, 0.62);
  --g-panel: rgba(16, 13, 14, 0.9);
  --g-marker: "Permanent Marker", "Comic Sans MS", cursive;
  --g-tag: "Sedgwick Ave Display", "Permanent Marker", cursive;
  /* Wobbly, hand-drawn outline */
  --g-rough: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --g-rough-alt: 15px 225px 15px 255px / 255px 15px 225px 15px;
  /* Subtler wobble for big panels, where the values above would bend the sides */
  --g-rough-lg: 6px 28px 8px 22px / 22px 8px 26px 6px;
  --g-drip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V4C97 4 97 14 94 14S91 4 88 4H80C77 4 77 22 74 22S71 4 68 4H55C53 4 53 10 51 10S49 4 47 4H33C30 4 30 18 27 18S24 4 21 4H12C10 4 10 9 8 9S6 4 4 4H0Z'/%3E%3C/svg%3E");
  --g-can: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg stroke='%230d0d0d' stroke-width='1.5'%3E%3Crect x='11' y='9' width='10' height='17' rx='2' fill='%23ff2e88'/%3E%3Crect x='13' y='5' width='6' height='4' fill='%23f4efe6'/%3E%3Crect x='14' y='2.5' width='3' height='2.5' fill='%230d0d0d'/%3E%3C/g%3E%3Cg fill='%23ffe14d'%3E%3Ccircle cx='9' cy='3' r='1.2'/%3E%3Ccircle cx='6' cy='5' r='1'/%3E%3Ccircle cx='4' cy='2' r='.9'/%3E%3Ccircle cx='8' cy='7.5' r='.8'/%3E%3C/g%3E%3C/svg%3E");
  --g-cursor: var(--g-can) 4 3;
}

html[data-theme="graffiti"] body {
  font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--g-text);
  background: #121012;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="graffiti"] body {
    cursor: var(--g-cursor), auto;
  }

  html[data-theme="graffiti"] a,
  html[data-theme="graffiti"] button {
    cursor: var(--g-cursor), pointer;
  }
}

html[data-theme="graffiti"] ::selection {
  background: var(--g-pink);
  color: var(--g-ink);
}

/* ---- The wall ---- */
html[data-theme="graffiti"] .page-shell::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.75) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%23110e10'/%3E%3Crect x='2' y='2' width='56' height='26' rx='1.5' fill='%23362628'/%3E%3Crect x='62' y='2' width='56' height='26' rx='1.5' fill='%232e2124'/%3E%3Crect x='-28' y='32' width='56' height='26' rx='1.5' fill='%2331232a'/%3E%3Crect x='32' y='32' width='56' height='26' rx='1.5' fill='%233a292a'/%3E%3Crect x='92' y='32' width='56' height='26' rx='1.5' fill='%2331232a'/%3E%3C/svg%3E") 0 0 / 132px 66px,
    #121012;
}

html[data-theme="graffiti"] .animated-bg .bg-grid,
html[data-theme="graffiti"] .animated-bg .bg-particle,
html[data-theme="graffiti"] .animated-bg .bg-orb,
html[data-theme="graffiti"] .cursor-glow,
html[data-theme="graffiti"] .scanline-overlay {
  display: none;
}

/* Old paint splats on the wall */
html[data-theme="graffiti"] .animated-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 46, 136, 0.22) 0 4rem, transparent 9rem),
    radial-gradient(circle at 88% 14%, rgba(45, 226, 230, 0.18) 0 3rem, transparent 8rem),
    radial-gradient(circle at 78% 42%, rgba(255, 225, 77, 0.14) 0 5rem, transparent 11rem),
    radial-gradient(circle at 8% 55%, rgba(163, 255, 18, 0.14) 0 3rem, transparent 8rem),
    radial-gradient(circle at 92% 72%, rgba(255, 46, 136, 0.16) 0 4rem, transparent 10rem),
    radial-gradient(circle at 20% 88%, rgba(255, 122, 26, 0.16) 0 4rem, transparent 9rem);
}

/* A huge faded tag behind everything */
html[data-theme="graffiti"] .animated-bg::after {
  content: "MARCEL";
  position: absolute;
  top: 6rem;
  left: 50%;
  transform: translateX(-50%) rotate(-9deg);
  font-family: var(--g-tag);
  font-size: clamp(6rem, 24vw, 22rem);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 46, 136, 0.16);
  pointer-events: none;
}

html[data-theme="graffiti"] .bg-drips {
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
}

html[data-theme="graffiti"] .bg-drip {
  position: absolute;
  top: 0;
  width: var(--drip-width, 8px);
  height: var(--drip-length, 30vh);
  border-radius: 0 0 999px 999px;
  background: var(--g-pink);
  opacity: 0.32;
  transform-origin: top;
  transform: scaleY(0);
}

html[data-theme="graffiti"] .bg-drip:nth-child(4n + 2) { background: var(--g-yellow); }
html[data-theme="graffiti"] .bg-drip:nth-child(4n + 3) { background: var(--g-cyan); }
html[data-theme="graffiti"] .bg-drip:nth-child(4n) { background: var(--g-lime); }

html[data-theme="graffiti"].fx .bg-drip {
  animation-name: wall-drip;
  animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1);
  animation-iteration-count: infinite;
}

html[data-theme="graffiti"]:not(.fx) .bg-drip {
  transform: none;
}

@keyframes wall-drip {
  0% { transform: scaleY(0); opacity: 0.32; }
  55% { transform: scaleY(1); opacity: 0.32; }
  85% { transform: scaleY(1); opacity: 0.32; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---- Picker ---- */
html[data-theme="graffiti"] .theme-picker-toggle {
  border: 3px solid var(--g-ink);
  background: var(--g-cream);
  box-shadow: 4px 4px 0 var(--g-pink);
}

html[data-theme="graffiti"] .theme-picker-toggle:hover,
html[data-theme="graffiti"] .theme-picker.is-open .theme-picker-toggle {
  transform: scale(1.08) rotate(12deg);
  box-shadow: 6px 6px 0 var(--g-cyan);
}

html[data-theme="graffiti"] .theme-picker-menu {
  border: 3px solid var(--g-ink);
  border-radius: var(--g-rough-lg);
  background: var(--g-cream);
  color: var(--g-ink);
  box-shadow: 7px 7px 0 var(--g-pink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="graffiti"] .theme-picker-heading {
  font-family: var(--g-marker);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--g-ink);
}

html[data-theme="graffiti"] .theme-option {
  color: var(--g-ink);
  border-radius: var(--g-rough-alt);
}

html[data-theme="graffiti"] .theme-option:hover {
  background: rgba(255, 225, 77, 0.55);
}

html[data-theme="graffiti"] .theme-option[aria-pressed="true"] {
  border: 2px solid var(--g-ink);
  background: var(--g-yellow);
}

html[data-theme="graffiti"] .theme-option[aria-pressed="true"]::after {
  border-color: var(--g-ink);
}

html[data-theme="graffiti"] .theme-option-name {
  font-family: var(--g-marker);
  font-weight: 400;
  font-size: 1.05rem;
}

html[data-theme="graffiti"] .theme-option-desc {
  color: rgba(13, 13, 13, 0.7);
}

html[data-theme="graffiti"] .theme-picker-toggle:focus-visible,
html[data-theme="graffiti"] .theme-option:focus-visible {
  outline: 3px solid var(--g-cyan);
}

/* ---- Buttons: sprayed-on blocks with paint dripping off the bottom ---- */
html[data-theme="graffiti"] .btn-pill,
html[data-theme="graffiti"] .btn-glow,
html[data-theme="graffiti"] .switch-btn,
html[data-theme="graffiti"] .neon-cta-button {
  --btn-bg: var(--g-yellow);
  --btn-fg: var(--g-ink);
  --btn-shadow: var(--g-pink);
  position: relative;
  overflow: visible;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 3px solid var(--g-ink);
  border-radius: var(--g-rough-alt);
  font-family: var(--g-marker);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 5px 5px 0 var(--btn-shadow);
  transform: rotate(-1.5deg);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
}

html[data-theme="graffiti"] .btn-pill { --btn-bg: var(--g-pink); --btn-fg: var(--g-ink); --btn-shadow: var(--g-cyan); }
html[data-theme="graffiti"] .neon-cta-button { --btn-bg: var(--g-cyan); --btn-shadow: var(--g-yellow); }

html[data-theme="graffiti"] .btn-pill::after,
html[data-theme="graffiti"] .btn-glow::after,
html[data-theme="graffiti"] .switch-btn::after,
html[data-theme="graffiti"] .neon-cta-button::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(100% - 1px);
  height: 0.45rem;
  background: var(--btn-bg);
  -webkit-mask: var(--g-drip-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--g-drip-mask) 0 0 / 100% 100% no-repeat;
  transition: height 0.5s cubic-bezier(0.3, 0, 0.4, 1);
  pointer-events: none;
}

html[data-theme="graffiti"] .btn-pill:hover,
html[data-theme="graffiti"] .btn-glow:hover:not(:disabled),
html[data-theme="graffiti"] .switch-btn:hover,
html[data-theme="graffiti"] .switch-btn:focus-visible,
html[data-theme="graffiti"] .neon-cta-button:hover {
  background: var(--btn-bg);
  transform: rotate(1deg) scale(1.06);
  box-shadow: 8px 8px 0 var(--btn-shadow);
}

html[data-theme="graffiti"] .btn-pill:hover::after,
html[data-theme="graffiti"] .btn-glow:hover:not(:disabled)::after,
html[data-theme="graffiti"] .switch-btn:hover::after,
html[data-theme="graffiti"] .neon-cta-button:hover::after {
  height: 1.4rem;
}

html[data-theme="graffiti"] .btn-pill:active,
html[data-theme="graffiti"] .btn-glow:active:not(:disabled),
html[data-theme="graffiti"] .switch-btn:active,
html[data-theme="graffiti"] .neon-cta-button:active {
  transform: rotate(0) translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--btn-shadow);
}

html[data-theme="graffiti"] .btn-glow:disabled {
  --btn-bg: #6b6466;
  --btn-shadow: rgba(0, 0, 0, 0.5);
}

html[data-theme="graffiti"] .neon-cta-button .icon,
html[data-theme="graffiti"] .neon-cta-button span {
  color: var(--g-ink);
  text-shadow: none;
}
html[data-theme="graffiti"] .back-link,
html[data-theme="graffiti"] .reset-link {
  font-family: var(--g-marker);
  color: var(--g-cyan);
}

html[data-theme="graffiti"] .back-link:hover,
html[data-theme="graffiti"] .reset-link:hover {
  color: var(--g-yellow);
}

/* ---- Form fields ---- */
html[data-theme="graffiti"] .simple-field label {
  font-family: var(--g-marker);
  font-size: 0.95rem;
  color: var(--g-yellow);
}

html[data-theme="graffiti"] .simple-field input,
html[data-theme="graffiti"] .simple-field textarea {
  border: 2px solid var(--g-cream);
  border-radius: var(--g-rough-alt);
  background: rgba(0, 0, 0, 0.55);
  color: var(--g-cream);
}

html[data-theme="graffiti"] .simple-field input::placeholder,
html[data-theme="graffiti"] .simple-field textarea::placeholder {
  color: var(--g-muted);
}

html[data-theme="graffiti"] .simple-field input:focus,
html[data-theme="graffiti"] .simple-field textarea:focus {
  border-color: var(--g-pink);
  box-shadow: 4px 4px 0 var(--g-pink);
}

/* ---- Profile header ---- */
html[data-theme="graffiti"] .profile-photo-ring {
  padding: 5px;
  background: conic-gradient(from 20deg, var(--g-pink), var(--g-yellow), var(--g-lime), var(--g-cyan), var(--g-pink));
  box-shadow: 0 0 0 4px var(--g-ink), 9px 9px 0 4px var(--g-pink);
}

html[data-theme="graffiti"] .profile-photo-ring:hover {
  box-shadow: 0 0 0 4px var(--g-ink), 12px 12px 0 4px var(--g-cyan);
}

html[data-theme="graffiti"] .profile-photo-mask {
  background: var(--g-ink);
}

/* Street portrait in place of the cartoon, drawn as the image's background with the <img>'s own
   picture pushed out of the box (as in professional) */
html[data-theme="graffiti"] .profile-photo-mask img,
html[data-theme="graffiti"] .section-nav-link .icon.section-nav-avatar,
html[data-theme="graffiti"] .section-nav-link.active .icon.section-nav-avatar {
  background: url("../graffiti_profile_photo.jpg") center / cover no-repeat;
  object-position: -99999px 0;
}

html[data-theme="graffiti"] .profile-photo-glow {
  inset: -2.5rem;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 46, 136, 0.55), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(45, 226, 230, 0.45), transparent 45%);
  filter: blur(24px);
}

html[data-theme="graffiti"] .experience-badge {
  padding: 0.45rem 1.1rem;
  border: 3px solid var(--g-ink);
  border-radius: var(--g-rough-alt);
  background: var(--g-lime);
  box-shadow: 4px 4px 0 var(--g-ink);
  backdrop-filter: none;
  transform: rotate(-3deg);
}

html[data-theme="graffiti"] .experience-badge .label {
  color: rgba(13, 13, 13, 0.75);
  font-weight: 700;
}

html[data-theme="graffiti"] .experience-badge .value {
  font-family: var(--g-marker);
  font-size: 1rem;
  color: var(--g-ink);
}

/* The name gets tagged on: chunky letters, outlined, with a 3D drop */
html[data-theme="graffiti"] .profile-name {
  font-family: var(--g-tag);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  background: none;
  color: var(--g-yellow);
  -webkit-text-fill-color: var(--g-yellow);
  -webkit-text-stroke: 2px var(--g-ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--g-ink), 6px 6px 0 var(--g-pink), 8px 8px 0 var(--g-ink);
  transform: rotate(-4deg);
}

@media (min-width: 768px) {
  html[data-theme="graffiti"] .profile-name {
    font-size: 4.5rem;
  }
}

html[data-theme="graffiti"] .name-char {
  display: inline-block;
}

html[data-theme="graffiti"] .name-char:nth-child(4n + 2) { -webkit-text-fill-color: var(--g-pink); text-shadow: 3px 3px 0 var(--g-ink), 6px 6px 0 var(--g-cyan), 8px 8px 0 var(--g-ink); rotate: 4deg; }
html[data-theme="graffiti"] .name-char:nth-child(4n + 3) { -webkit-text-fill-color: var(--g-cyan); rotate: -5deg; translate: 0 -0.06em; }
html[data-theme="graffiti"] .name-char:nth-child(4n) { -webkit-text-fill-color: var(--g-lime); text-shadow: 3px 3px 0 var(--g-ink), 6px 6px 0 var(--g-orange), 8px 8px 0 var(--g-ink); rotate: 3deg; translate: 0 0.05em; }

html[data-theme="graffiti"].fx .profile-name.is-intro .name-char {
  animation: tag-letter 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(0.15s + var(--i) * 0.07s);
}

@keyframes tag-letter {
  0% { opacity: 0; transform: translateY(-0.35em) scale(1.7) rotate(-14deg); filter: blur(8px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Table display shrink-wraps the highlighter stripe but keeps the title on its own line */
html[data-theme="graffiti"] .profile-title {
  display: table;
  margin: 0.5rem auto 0;
  font-family: var(--g-marker);
  color: var(--g-cream);
  background:
    linear-gradient(transparent 62%, rgba(255, 46, 136, 0.75) 62%, rgba(255, 46, 136, 0.75) 88%, transparent 88%);
  padding: 0 0.3rem;
}

@media (min-width: 768px) {
  html[data-theme="graffiti"] .profile-title {
    margin-left: 0;
  }
}

/* ---- "Need a website?" becomes a full piece on the wall ---- */
html[data-theme="graffiti"] .neon-cta .glow-backdrop {
  opacity: 0.5;
}

html[data-theme="graffiti"] .neon-cta .glow-backdrop::before {
  height: 12rem;
  background:
    radial-gradient(ellipse at 30% 50%, var(--g-pink), transparent 60%),
    radial-gradient(ellipse at 70% 50%, var(--g-cyan), transparent 60%);
  filter: blur(60px);
}

/* Fade in rather than neon-flicker */
html[data-theme="graffiti"] .neon-cta-content {
  transition: opacity 0.6s ease;
}

html[data-theme="graffiti"] .neon-title,
html[data-theme="graffiti"] .neon-title.flicker {
  font-family: var(--g-tag);
  font-weight: 400;
  line-height: 1.05;
  color: var(--g-yellow);
  -webkit-text-stroke: 2px var(--g-ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--g-ink), 6px 6px 0 var(--g-pink), 9px 9px 0 var(--g-pink), 11px 11px 0 var(--g-ink);
  transform: rotate(-3deg);
  animation: none;
}

@media (min-width: 768px) {
  html[data-theme="graffiti"] .neon-title { font-size: 4.75rem; }
}

html[data-theme="graffiti"].fx .neon-title.flicker {
  animation: piece-wobble 5s ease-in-out infinite;
}

@keyframes piece-wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-1.5deg) scale(1.02); }
}

html[data-theme="graffiti"] .neon-subtitle,
html[data-theme="graffiti"] .neon-subtitle.flicker {
  font-family: var(--g-marker);
  color: var(--g-cream);
  text-shadow: 2px 2px 0 var(--g-ink);
  animation: none;
}

/* ---- Switch offer: a sticker slapped on the wall ---- */
html[data-theme="graffiti"] .switch-offer {
  overflow: visible;
  background: var(--g-cream);
  border: 3px solid var(--g-ink);
  border-radius: var(--g-rough-lg);
  box-shadow: 9px 9px 0 var(--g-cyan);
  transform: rotate(1.5deg);
  color: var(--g-ink);
}

/* Shimmer becomes a strip of tape holding it up */
html[data-theme="graffiti"] .switch-offer::before {
  inset: auto;
  top: -0.9rem;
  left: 50%;
  width: 6.5rem;
  height: 1.7rem;
  background: rgba(240, 225, 180, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%) rotate(-4deg);
  animation: none;
}

html[data-theme="graffiti"] .platform-pill,
html[data-theme="graffiti"] .feature-pill {
  border: 2px solid var(--g-ink);
  border-radius: var(--g-rough-alt);
  font-family: var(--g-marker);
  font-weight: 400;
  text-shadow: none;
  box-shadow: 3px 3px 0 var(--g-ink);
}

html[data-theme="graffiti"] .platform-pill {
  background: var(--g-lime);
  color: var(--g-ink);
  transform: rotate(-3deg);
}

html[data-theme="graffiti"] .platform-pill + .platform-pill {
  transform: rotate(2deg);
}

html[data-theme="graffiti"] .feature-pill {
  background: var(--g-pink);
  color: var(--g-ink);
  transform: rotate(2deg);
}

html[data-theme="graffiti"] .switch-offer-title {
  font-family: var(--g-marker);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--g-ink);
  text-shadow: 2px 2px 0 var(--g-yellow);
}

html[data-theme="graffiti"] .switch-offer-text {
  color: rgba(13, 13, 13, 0.85);
}

html[data-theme="graffiti"] .switch-offer-text strong,
html[data-theme="graffiti"].fx .switch-offer-text strong {
  color: var(--g-ink);
  background: linear-gradient(transparent 55%, rgba(255, 46, 136, 0.55) 55%);
  -webkit-text-fill-color: currentColor;
  animation: none;
}

html[data-theme="graffiti"] .switch-offer-includes-label,
html[data-theme="graffiti"] .offer-progress-label {
  color: rgba(13, 13, 13, 0.75);
}

html[data-theme="graffiti"] .offer-progress-count strong {
  color: var(--g-pink);
  text-shadow: none;
}

html[data-theme="graffiti"] .offer-progress-track {
  height: 0.85rem;
  border: 2px solid var(--g-ink);
  background: rgba(13, 13, 13, 0.1);
  box-shadow: none;
}

/* Hazard-tape fill. Built from a square tile holding exactly two stripe pairs, so the stripes
   repeat without a seam however wide the fill is, and crawl by one tile per loop. */
html[data-theme="graffiti"] .offer-progress-fill {
  --hazard-tile: 22.63px; /* 8px stripes: 4 x 8px / sin(45deg) */
  background:
    linear-gradient(-45deg, var(--g-yellow) 25%, var(--g-ink) 25% 50%, var(--g-yellow) 50% 75%, var(--g-ink) 75%)
    0 0 / var(--hazard-tile) var(--hazard-tile);
  box-shadow: none;
  animation: none;
}

html[data-theme="graffiti"].fx .offer-progress-fill {
  animation: hazard-crawl 1.2s linear infinite;
}

@keyframes hazard-crawl {
  to { background-position: var(--hazard-tile) 0; }
}

html[data-theme="graffiti"] .offer-progress-note {
  color: rgba(13, 13, 13, 0.65);
}

/* ---- Bio: scrawled in marker ---- */
html[data-theme="graffiti"] .terminal-box {
  background: var(--g-panel);
  border: 2px dashed rgba(244, 239, 230, 0.6);
  border-radius: var(--g-rough-lg);
  box-shadow: 7px 7px 0 var(--g-lime);
  backdrop-filter: none;
}

html[data-theme="graffiti"] .terminal-box .prompt-line {
  font-family: var(--g-marker);
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

html[data-theme="graffiti"] .terminal-box .typed-text {
  color: var(--g-cream);
}

html[data-theme="graffiti"] .terminal-box .prompt-arrow,
html[data-theme="graffiti"] .terminal-box .cursor {
  color: var(--g-pink);
}

/* ---- Content sections: panels pasted on the wall ---- */
html[data-theme="graffiti"] .content-section,
html[data-theme="graffiti"] .content-section:hover {
  border: 3px solid var(--g-ink);
  border-radius: var(--g-rough-lg);
  background: var(--g-panel);
  backdrop-filter: none;
  box-shadow: 8px 8px 0 var(--g-pink);
}

html[data-theme="graffiti"] .content-section:nth-child(3n + 2),
html[data-theme="graffiti"] .content-section:nth-child(3n + 2):hover { box-shadow: 8px 8px 0 var(--g-cyan); }
html[data-theme="graffiti"] .content-section:nth-child(3n),
html[data-theme="graffiti"] .content-section:nth-child(3n):hover { box-shadow: 8px 8px 0 var(--g-lime); }

/* Header is a stripe of yellow paint with drips running off it */
html[data-theme="graffiti"] .section-header {
  position: relative;
  z-index: 1;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(var(--g-yellow), var(--g-yellow)) 0 0 / 100% 100% no-repeat;
  color: var(--g-ink);
  font-family: var(--g-marker);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
}

html[data-theme="graffiti"] .section-header .icon {
  color: var(--g-ink);
  stroke-width: 2.5;
}

html[data-theme="graffiti"] .section-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: 1.1rem;
  background: var(--g-yellow);
  -webkit-mask: var(--g-drip-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--g-drip-mask) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

html[data-theme="graffiti"] .section-body {
  padding-top: 1.75rem;
  color: var(--g-text);
}

html[data-theme="graffiti"] .type-cursor {
  color: var(--g-pink);
}

/* Scroll-in: the stripe is rolled on left to right, then the drips run.
   Animates background-size rather than clip-path so the observer still sees the header. */
html[data-theme="graffiti"].fx .section-header {
  background-size: 0% 100%;
}

html[data-theme="graffiti"].fx .section-header::after {
  height: 0;
}

html[data-theme="graffiti"].fx .section-header.is-powering {
  animation: paint-roll 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}

html[data-theme="graffiti"].fx .section-header.is-powering::after {
  animation: drip-run 1.4s cubic-bezier(0.3, 0, 0.5, 1) 0.45s both;
}

html[data-theme="graffiti"].fx .content-section.is-powering {
  animation: none;
}

@keyframes paint-roll {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}

@keyframes drip-run {
  from { height: 0; }
  to { height: 1.1rem; }
}

/* ---- Website highlights ---- */
html[data-theme="graffiti"] .site-intro {
  border-bottom: 2px dashed rgba(244, 239, 230, 0.3);
}

html[data-theme="graffiti"] .site-intro p,
html[data-theme="graffiti"] .site-entry p,
html[data-theme="graffiti"] .project-entry p,
html[data-theme="graffiti"] .timeline-entry ul {
  color: var(--g-text);
}

html[data-theme="graffiti"] .site-intro .site-legend {
  color: var(--g-muted);
}

html[data-theme="graffiti"] .site-dot.live {
  background: var(--g-lime);
  box-shadow: 0 0 0 2px var(--g-ink);
}

html[data-theme="graffiti"] .site-dot.retired {
  background: #8a8486;
  box-shadow: 0 0 0 2px var(--g-ink);
}

/* Links get a marker scribble underneath on hover */
html[data-theme="graffiti"] .site-link-row a {
  color: var(--g-cyan);
  font-weight: 700;
  background: linear-gradient(var(--g-pink), var(--g-pink)) 0 100% / 0 0.3em no-repeat;
  transition: background-size 0.3s ease, color 0.2s;
}

html[data-theme="graffiti"] .site-link-row a:hover,
html[data-theme="graffiti"] .site-link-row a:focus-visible {
  color: var(--g-cream);
  background-size: 100% 0.3em;
  animation: none;
  text-shadow: none;
}

/* Screenshots pinned up like prints */
html[data-theme="graffiti"] .site-shot {
  border: 6px solid var(--g-cream);
  border-radius: 3px;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
  rotate: -1.2deg;
}

html[data-theme="graffiti"] .site-entry:nth-child(even) .site-shot {
  rotate: 1.4deg;
}

html[data-theme="graffiti"] .site-shot:hover {
  box-shadow: 10px 10px 0 var(--g-pink);
}

/* Reveal: effects.js covers each screenshot with a wall-coloured canvas and
   sprays it away, so the image itself is shown and the scanline is dropped */
html[data-theme="graffiti"].fx .site-shot .site-screenshot,
html[data-theme="graffiti"].fx .site-shot.is-revealed .site-screenshot {
  clip-path: none;
  animation: none;
}

html[data-theme="graffiti"].fx .site-shot::after {
  display: none;
}

.shot-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #141112;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Once painting starts the canvas pixels take over from the flat fill */
.shot-cover.is-painting {
  background: none;
}

.shot-cover.is-done {
  opacity: 0;
}

/* The can follows the nozzle; its spray tip sits on the point being painted */
.shot-spray-can {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 3.5rem;
  height: 3.5rem;
  margin: -0.4rem 0 0 -0.6rem;
  background: var(--g-can) center / contain no-repeat;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.55));
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.shot-spray-can.is-done {
  opacity: 0;
}

/* ---- Projects ---- */
html[data-theme="graffiti"] .project-entry h3,
html[data-theme="graffiti"] .timeline-entry h3 {
  font-family: var(--g-marker);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--g-yellow);
}

html[data-theme="graffiti"] .project-entry .project-title-row .icon {
  color: var(--g-pink);
}

/* ---- Timeline: a dripping paint line ---- */
html[data-theme="graffiti"] .timeline::before,
html[data-theme="graffiti"].fx .timeline::before {
  width: 5px;
  left: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--g-pink), var(--g-orange), var(--g-yellow));
  box-shadow: none;
}

html[data-theme="graffiti"] .timeline-dot,
html[data-theme="graffiti"].fx .timeline-dot {
  background: var(--g-ink);
  border: 3px solid var(--g-cream);
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  box-shadow: none;
}

html[data-theme="graffiti"]:not(.fx) .timeline-dot,
html[data-theme="graffiti"].fx .timeline-entry.is-lit .timeline-dot {
  background: var(--g-cyan);
  border-color: var(--g-ink);
  box-shadow: 3px 3px 0 var(--g-pink);
}

html[data-theme="graffiti"].fx .timeline-entry.is-lit .timeline-dot {
  animation: dot-splat 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes dot-splat {
  0% { transform: scale(0.4) rotate(-40deg); }
  60% { transform: scale(1.6) rotate(10deg); }
  100% { transform: none; }
}

html[data-theme="graffiti"] .timeline-date {
  font-family: var(--g-marker);
  color: var(--g-lime);
}

/* ---- Section nav ---- */
html[data-theme="graffiti"] .section-nav {
  border: 3px solid var(--g-ink);
  background: rgba(244, 239, 230, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 6px 6px 0 var(--g-pink);
}

@media (min-width: 1024px) {
  html[data-theme="graffiti"] .section-nav {
    border-left: none;
  }
}

@media (max-width: 1023px) {
  html[data-theme="graffiti"] .section-nav {
    border-width: 3px 0 0;
    box-shadow: 0 -4px 0 var(--g-pink);
  }
}

html[data-theme="graffiti"] .section-nav-link {
  color: var(--g-ink);
}

html[data-theme="graffiti"] .section-nav-link .icon {
  border: 2px solid var(--g-ink);
  background: var(--g-cream);
}

html[data-theme="graffiti"] .section-nav-link:hover .icon,
html[data-theme="graffiti"] .section-nav-link:focus-visible .icon {
  color: var(--g-ink);
  border-color: var(--g-ink);
  box-shadow: 3px 3px 0 var(--g-cyan);
}

html[data-theme="graffiti"] .section-nav-link.active .icon {
  color: var(--g-ink);
  border-color: var(--g-ink);
  background: var(--g-yellow);
  box-shadow: 3px 3px 0 var(--g-pink);
}

html[data-theme="graffiti"] .section-nav-label {
  font-family: var(--g-marker);
  font-weight: 400;
}

html[data-theme="graffiti"] .section-nav-link.active .section-nav-label {
  color: var(--g-ink);
}

@media (min-width: 1024px) {
  html[data-theme="graffiti"] .section-nav-label {
    border: 2px solid var(--g-ink);
    background: var(--g-yellow);
    color: var(--g-ink);
    box-shadow: 3px 3px 0 var(--g-ink);
  }
}

/* ---- Social stickers ---- */
html[data-theme="graffiti"] .social-icon-link {
  background: var(--g-cream);
  border: 3px solid var(--g-ink);
  border-radius: var(--g-rough);
  box-shadow: 4px 4px 0 var(--g-pink);
  transform: rotate(-6deg);
}

html[data-theme="graffiti"] .social-icon-link + .social-icon-link {
  box-shadow: 4px 4px 0 var(--g-cyan);
  transform: rotate(5deg);
}

html[data-theme="graffiti"] .social-icon-link:hover {
  border-color: var(--g-ink);
  box-shadow: 7px 7px 0 var(--g-yellow);
  transform: rotate(0) scale(1.1);
}

html[data-theme="graffiti"] .social-icon-link .icon,
html[data-theme="graffiti"] .social-icon-link:hover .icon {
  color: var(--g-ink);
}

/* ---- Contact page ---- */
html[data-theme="graffiti"] .terminal-window {
  background: rgba(14, 11, 12, 0.82);
  backdrop-filter: none;
}

html[data-theme="graffiti"] .terminal-titlebar {
  background: var(--g-yellow);
  border-bottom: 3px solid var(--g-ink);
}

html[data-theme="graffiti"] .terminal-titlebar .terminal-label {
  color: var(--g-ink);
  font-family: var(--g-marker);
}

html[data-theme="graffiti"] .terminal-log .line.system {
  color: var(--g-cream);
}

html[data-theme="graffiti"] .simple-contact-title {
  font-family: var(--g-marker);
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--g-yellow);
  text-shadow: 3px 3px 0 var(--g-pink);
}

html[data-theme="graffiti"] .simple-contact-intro {
  color: var(--g-text);
}

/* ---- Estimator ---- */
html[data-theme="graffiti"] .estimate-bar {
  background: rgba(13, 13, 13, 0.94);
  border-bottom: 4px solid var(--g-yellow);
}

html[data-theme="graffiti"] .estimate-stat-label {
  color: var(--g-cyan);
  font-weight: 700;
}

html[data-theme="graffiti"] .estimate-stat-value {
  font-family: var(--g-marker);
  font-weight: 400;
  color: var(--g-yellow);
  text-shadow: 2px 2px 0 var(--g-pink);
}

html[data-theme="graffiti"] .breakdown-toggle {
  border: 2px solid var(--g-cream);
  border-radius: var(--g-rough-alt);
  color: var(--g-cream);
}

html[data-theme="graffiti"] .breakdown-toggle:hover:not(:disabled) {
  color: var(--g-ink);
  border-color: var(--g-ink);
  background: var(--g-yellow);
}

html[data-theme="graffiti"] .breakdown-toggle {
  font-family: var(--g-marker);
}

html[data-theme="graffiti"] .estimate-breakdown {
  border-top: 2px dashed rgba(244, 239, 230, 0.25);
  background: rgba(13, 13, 13, 0.6);
}

html[data-theme="graffiti"] .breakdown-row {
  color: var(--g-text);
}

html[data-theme="graffiti"] .breakdown-row-price {
  font-family: var(--g-marker);
  color: var(--g-cream);
}

html[data-theme="graffiti"] .breakdown-total {
  border-top: 2px solid var(--g-pink);
  font-family: var(--g-marker);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--g-yellow);
  text-shadow: 2px 2px 0 var(--g-ink);
}

html[data-theme="graffiti"] .breakdown-compare {
  border-top: 2px dashed rgba(244, 239, 230, 0.25);
  color: var(--g-muted);
}

html[data-theme="graffiti"] .breakdown-compare strong {
  color: var(--g-lime);
}

html[data-theme="graffiti"] .estimator-header h1,
html[data-theme="graffiti"] .page-heading {
  font-family: var(--g-tag);
  font-weight: 400;
  background: none;
  color: var(--g-yellow);
  -webkit-text-fill-color: var(--g-yellow);
  -webkit-text-stroke: 1.5px var(--g-ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--g-ink), 5px 5px 0 var(--g-pink);
  transform: rotate(-2deg);
}

html[data-theme="graffiti"] .estimator-intro,
html[data-theme="graffiti"] .page-intro,
html[data-theme="graffiti"] .section-subtitle {
  color: var(--g-text);
}

html[data-theme="graffiti"] .section-title {
  font-family: var(--g-marker);
  font-weight: 400;
  color: var(--g-cyan);
}

html[data-theme="graffiti"] .option-btn {
  border: 2px solid rgba(244, 239, 230, 0.75);
  border-radius: var(--g-rough-lg);
  background: var(--g-panel);
}

html[data-theme="graffiti"] .option-btn:hover {
  background: rgba(30, 24, 26, 0.95);
  border-color: var(--g-cream);
  transform: rotate(-0.6deg);
}

html[data-theme="graffiti"] .option-btn.selected {
  border: 3px solid var(--g-ink);
  background: var(--g-cream);
  box-shadow: 6px 6px 0 var(--g-pink);
}

html[data-theme="graffiti"] .option-btn .option-label {
  font-family: var(--g-marker);
  font-weight: 400;
  color: var(--g-cream);
}

html[data-theme="graffiti"] .option-btn .option-price {
  color: var(--g-yellow);
}

html[data-theme="graffiti"] .option-btn .option-desc {
  color: var(--g-text);
}

html[data-theme="graffiti"] .option-btn .option-market {
  color: var(--g-muted);
}

html[data-theme="graffiti"] .option-btn.selected .option-label,
html[data-theme="graffiti"] .option-btn.selected .option-desc {
  color: var(--g-ink);
}

html[data-theme="graffiti"] .option-btn.selected .option-price {
  color: var(--g-pink);
}

html[data-theme="graffiti"] .option-btn.selected .option-market {
  color: rgba(13, 13, 13, 0.6);
}

/* ---- 404 ---- */
html[data-theme="graffiti"] .glitch-heading .code {
  font-family: var(--g-tag);
  font-weight: 400;
  color: var(--g-pink);
  -webkit-text-stroke: 3px var(--g-ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--g-ink), 8px 8px 0 var(--g-yellow), 11px 11px 0 var(--g-ink);
  transform: rotate(-5deg);
  animation: none;
}

html[data-theme="graffiti"] .glitch-heading .code::before,
html[data-theme="graffiti"] .glitch-heading .code::after {
  display: none;
}

html[data-theme="graffiti"] .error-subtitle {
  font-family: var(--g-marker);
  color: var(--g-yellow);
  text-shadow: 2px 2px 0 var(--g-ink);
  animation: none;
}

html[data-theme="graffiti"] .boot-terminal,
html[data-theme="graffiti"] .hud-badge {
  background: var(--g-panel);
  border: 2px dashed rgba(244, 239, 230, 0.6);
  box-shadow: 6px 6px 0 var(--g-lime);
  backdrop-filter: none;
}

html[data-theme="graffiti"] .planet-core {
  background: radial-gradient(circle at 35% 35%, var(--g-yellow), var(--g-pink) 70%);
  box-shadow: 0 0 0 3px var(--g-ink), 4px 4px 0 3px var(--g-cyan);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="graffiti"] .btn-pill,
  html[data-theme="graffiti"] .btn-glow,
  html[data-theme="graffiti"] .switch-btn,
  html[data-theme="graffiti"] .neon-cta-button,
  html[data-theme="graffiti"] .btn-pill::after,
  html[data-theme="graffiti"] .btn-glow::after,
  html[data-theme="graffiti"] .switch-btn::after,
  html[data-theme="graffiti"] .neon-cta-button::after {
    transition: none;
  }
}

/* ================================================================== */
/* GRAFFITI: FULL PIECE                                                 */
/* Pushes the wall closer to a finished street piece: brush-lettered,   */
/* multi-coloured headlines with drips and splatter, painted buttons    */
/* with icons, a torn paper flyer, doodles across the wall and a wet    */
/* floor with spray cans at the foot of the page                        */
/* ================================================================== */
html[data-theme="graffiti"] {
  --g-brush: "Knewave", "Permanent Marker", cursive;
  --g-bold: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --g-splat-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23ff2e88' fill-opacity='1' stroke-opacity='1'%3E%3Ccircle cx='100' cy='100' r='32'/%3E%3Ccircle cx='67.0' cy='84.6' r='12.6'/%3E%3Ccircle cx='126.3' cy='124.1' r='16.7'/%3E%3Ccircle cx='81.3' cy='117.7' r='16.9'/%3E%3Ccircle cx='122.7' cy='82.0' r='18.1'/%3E%3Ccircle cx='103.7' cy='65.7' r='14.7'/%3E%3Ccircle cx='110.4' cy='69.1' r='13.0'/%3E%3Ccircle cx='90.8' cy='120.4' r='18.5'/%3E%3Ccircle cx='137.8' cy='102.2' r='18.9'/%3E%3Ccircle cx='134.4' cy='93.2' r='17.3'/%3E%3Ccircle cx='108.0' cy='6.8' r='3.6'/%3E%3Ccircle cx='53.2' cy='168.2' r='4.5'/%3E%3Ccircle cx='188.8' cy='72.5' r='3.0'/%3E%3Ccircle cx='180.3' cy='53.4' r='1.6'/%3E%3Ccircle cx='41.8' cy='38.5' r='2.5'/%3E%3Ccircle cx='96.1' cy='8.4' r='5.4'/%3E%3Ccircle cx='5.3' cy='99.5' r='3.4'/%3E%3Ccircle cx='153.0' cy='66.4' r='2.4'/%3E%3Ccircle cx='174.4' cy='87.5' r='5.2'/%3E%3Ccircle cx='29.5' cy='155.9' r='3.3'/%3E%3Ccircle cx='97.2' cy='28.5' r='4.1'/%3E%3Ccircle cx='38.8' cy='167.6' r='4.5'/%3E%3Ccircle cx='95.7' cy='41.6' r='4.1'/%3E%3Ccircle cx='148.1' cy='138.7' r='4.8'/%3E%3Ccircle cx='41.6' cy='161.8' r='3.2'/%3E%3Ccircle cx='67.7' cy='183.8' r='3.8'/%3E%3Ccircle cx='28.1' cy='61.5' r='1.9'/%3E%3Ccircle cx='108.0' cy='154.9' r='2.1'/%3E%3Ccircle cx='167.9' cy='62.7' r='2.9'/%3E%3Ccircle cx='50.1' cy='174.6' r='2.7'/%3E%3Ccircle cx='169.2' cy='55.9' r='3.8'/%3E%3Ccircle cx='90.9' cy='29.9' r='4.9'/%3E%3Ccircle cx='189.7' cy='73.7' r='3.4'/%3E%3Ccircle cx='159.8' cy='163.0' r='2.1'/%3E%3Ccircle cx='171.0' cy='76.8' r='2.8'/%3E%3Ccircle cx='11.8' cy='68.6' r='3.0'/%3E%3Ccircle cx='127.9' cy='33.6' r='1.2'/%3E%3Ccircle cx='15.5' cy='78.2' r='2.6'/%3E%3Cline x1='63.6' y1='73.6' x2='29.0' y2='50.7' stroke='%23ff2e88' stroke-width='4.7' stroke-linecap='round'/%3E%3Cline x1='119.0' y1='140.8' x2='130.3' y2='174.5' stroke='%23ff2e88' stroke-width='5.6' stroke-linecap='round'/%3E%3Cline x1='140.8' y1='81.1' x2='164.2' y2='61.8' stroke='%23ff2e88' stroke-width='3.2' stroke-linecap='round'/%3E%3Cline x1='130.4' y1='66.8' x2='154.0' y2='36.2' stroke='%23ff2e88' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --g-splat-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%232de2e6' fill-opacity='1' stroke-opacity='1'%3E%3Ccircle cx='100' cy='100' r='30'/%3E%3Ccircle cx='123.9' cy='115.5' r='13.7'/%3E%3Ccircle cx='113.5' cy='65.2' r='14.5'/%3E%3Ccircle cx='105.3' cy='122.0' r='18.8'/%3E%3Ccircle cx='133.5' cy='99.9' r='20.0'/%3E%3Ccircle cx='119.9' cy='76.0' r='15.7'/%3E%3Ccircle cx='128.5' cy='87.8' r='21.0'/%3E%3Ccircle cx='119.7' cy='79.3' r='21.3'/%3E%3Ccircle cx='124.8' cy='83.8' r='20.8'/%3E%3Ccircle cx='112.9' cy='121.6' r='14.3'/%3E%3Ccircle cx='127.6' cy='155.6' r='3.4'/%3E%3Ccircle cx='51.6' cy='158.7' r='3.6'/%3E%3Ccircle cx='173.2' cy='97.8' r='3.0'/%3E%3Ccircle cx='8.9' cy='85.4' r='2.8'/%3E%3Ccircle cx='41.9' cy='61.3' r='4.9'/%3E%3Ccircle cx='11.3' cy='131.5' r='2.9'/%3E%3Ccircle cx='94.1' cy='18.4' r='2.3'/%3E%3Ccircle cx='86.3' cy='174.2' r='3.4'/%3E%3Ccircle cx='123.5' cy='21.3' r='3.2'/%3E%3Ccircle cx='156.9' cy='60.3' r='4.3'/%3E%3Ccircle cx='31.1' cy='73.9' r='4.0'/%3E%3Ccircle cx='182.3' cy='67.8' r='4.8'/%3E%3Ccircle cx='157.4' cy='43.8' r='4.5'/%3E%3Ccircle cx='33.1' cy='108.6' r='4.6'/%3E%3Ccircle cx='138.1' cy='31.9' r='3.4'/%3E%3Ccircle cx='46.5' cy='52.3' r='4.3'/%3E%3Ccircle cx='30.1' cy='104.9' r='4.1'/%3E%3Ccircle cx='164.3' cy='41.2' r='2.7'/%3E%3Ccircle cx='188.3' cy='104.7' r='5.5'/%3E%3Ccircle cx='161.7' cy='148.6' r='1.4'/%3E%3Ccircle cx='30.4' cy='54.8' r='5.1'/%3E%3Ccircle cx='101.7' cy='39.4' r='2.3'/%3E%3Ccircle cx='142.4' cy='16.5' r='1.5'/%3E%3Ccircle cx='169.0' cy='48.5' r='1.4'/%3E%3Ccircle cx='58.4' cy='150.2' r='1.3'/%3E%3Ccircle cx='143.3' cy='138.3' r='1.4'/%3E%3Ccircle cx='161.3' cy='65.6' r='1.7'/%3E%3Ccircle cx='178.3' cy='66.7' r='3.4'/%3E%3Cline x1='145.0' y1='100.5' x2='183.0' y2='101.1' stroke='%232de2e6' stroke-width='3.7' stroke-linecap='round'/%3E%3Cline x1='144.2' y1='91.8' x2='168.9' y2='83.5' stroke='%232de2e6' stroke-width='4.9' stroke-linecap='round'/%3E%3Cline x1='99.3' y1='55.0' x2='98.9' y2='19.3' stroke='%232de2e6' stroke-width='3.9' stroke-linecap='round'/%3E%3Cline x1='57.3' y1='85.7' x2='21.0' y2='77.4' stroke='%232de2e6' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --g-splat-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23ffe14d' fill-opacity='1' stroke-opacity='1'%3E%3Ccircle cx='100' cy='100' r='33'/%3E%3Ccircle cx='79.7' cy='86.6' r='21.2'/%3E%3Ccircle cx='68.0' cy='105.3' r='18.1'/%3E%3Ccircle cx='125.6' cy='83.5' r='17.5'/%3E%3Ccircle cx='112.5' cy='132.6' r='17.4'/%3E%3Ccircle cx='72.3' cy='91.1' r='20.6'/%3E%3Ccircle cx='102.8' cy='124.6' r='21.3'/%3E%3Ccircle cx='82.8' cy='114.2' r='19.8'/%3E%3Ccircle cx='121.1' cy='133.0' r='12.4'/%3E%3Ccircle cx='106.9' cy='63.8' r='14.7'/%3E%3Ccircle cx='23.2' cy='48.0' r='2.9'/%3E%3Ccircle cx='117.2' cy='29.6' r='4.3'/%3E%3Ccircle cx='16.3' cy='56.1' r='1.8'/%3E%3Ccircle cx='62.5' cy='142.2' r='3.3'/%3E%3Ccircle cx='95.9' cy='182.4' r='4.5'/%3E%3Ccircle cx='144.4' cy='43.0' r='4.8'/%3E%3Ccircle cx='31.3' cy='65.5' r='3.0'/%3E%3Ccircle cx='107.6' cy='168.4' r='5.1'/%3E%3Ccircle cx='165.4' cy='111.9' r='3.8'/%3E%3Ccircle cx='71.9' cy='21.2' r='2.6'/%3E%3Ccircle cx='24.2' cy='79.6' r='1.6'/%3E%3Ccircle cx='54.7' cy='32.9' r='5.4'/%3E%3Ccircle cx='93.6' cy='159.8' r='3.3'/%3E%3Ccircle cx='51.9' cy='42.7' r='2.7'/%3E%3Ccircle cx='183.9' cy='137.3' r='1.3'/%3E%3Ccircle cx='35.4' cy='131.8' r='1.7'/%3E%3Ccircle cx='31.9' cy='47.2' r='2.8'/%3E%3Ccircle cx='33.6' cy='59.9' r='5.2'/%3E%3Ccircle cx='88.3' cy='163.6' r='1.4'/%3E%3Ccircle cx='159.4' cy='102.7' r='3.5'/%3E%3Ccircle cx='190.0' cy='70.1' r='2.5'/%3E%3Ccircle cx='93.0' cy='183.0' r='5.4'/%3E%3Ccircle cx='62.7' cy='159.0' r='1.8'/%3E%3Ccircle cx='145.5' cy='46.2' r='4.9'/%3E%3Ccircle cx='31.6' cy='159.4' r='4.1'/%3E%3Ccircle cx='175.9' cy='157.0' r='4.7'/%3E%3Ccircle cx='89.2' cy='180.3' r='4.3'/%3E%3Ccircle cx='167.2' cy='71.6' r='2.3'/%3E%3Cline x1='85.3' y1='142.5' x2='74.7' y2='182.5' stroke='%23ffe14d' stroke-width='6.0' stroke-linecap='round'/%3E%3Cline x1='82.2' y1='141.3' x2='69.0' y2='176.2' stroke='%23ffe14d' stroke-width='3.4' stroke-linecap='round'/%3E%3Cline x1='69.9' y1='66.5' x2='48.3' y2='42.1' stroke='%23ffe14d' stroke-width='5.8' stroke-linecap='round'/%3E%3Cline x1='65.1' y1='71.6' x2='41.0' y2='49.0' stroke='%23ffe14d' stroke-width='4.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --g-splat-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23a3ff12' fill-opacity='1' stroke-opacity='1'%3E%3Ccircle cx='100' cy='100' r='33'/%3E%3Ccircle cx='88.5' cy='133.0' r='16.8'/%3E%3Ccircle cx='118.9' cy='112.0' r='17.5'/%3E%3Ccircle cx='90.2' cy='138.6' r='12.6'/%3E%3Ccircle cx='71.7' cy='96.4' r='19.8'/%3E%3Ccircle cx='112.4' cy='76.3' r='21.4'/%3E%3Ccircle cx='133.1' cy='105.4' r='14.6'/%3E%3Ccircle cx='96.6' cy='124.7' r='14.9'/%3E%3Ccircle cx='126.4' cy='70.9' r='20.5'/%3E%3Ccircle cx='74.1' cy='126.7' r='15.4'/%3E%3Ccircle cx='50.3' cy='142.2' r='2.3'/%3E%3Ccircle cx='82.4' cy='192.1' r='4.7'/%3E%3Ccircle cx='183.6' cy='68.2' r='1.2'/%3E%3Ccircle cx='78.1' cy='181.0' r='2.5'/%3E%3Ccircle cx='106.0' cy='37.3' r='3.0'/%3E%3Ccircle cx='82.5' cy='171.4' r='2.2'/%3E%3Ccircle cx='94.7' cy='187.5' r='1.5'/%3E%3Ccircle cx='6.7' cy='122.3' r='3.4'/%3E%3Ccircle cx='49.9' cy='32.9' r='1.8'/%3E%3Ccircle cx='73.4' cy='48.8' r='5.1'/%3E%3Ccircle cx='51.7' cy='45.2' r='2.0'/%3E%3Ccircle cx='27.2' cy='131.0' r='3.9'/%3E%3Ccircle cx='121.6' cy='164.8' r='4.8'/%3E%3Ccircle cx='82.8' cy='35.9' r='3.7'/%3E%3Ccircle cx='138.9' cy='54.3' r='5.2'/%3E%3Ccircle cx='85.7' cy='154.2' r='2.7'/%3E%3Ccircle cx='182.1' cy='146.9' r='2.4'/%3E%3Ccircle cx='69.0' cy='39.0' r='2.6'/%3E%3Ccircle cx='73.3' cy='155.2' r='4.0'/%3E%3Ccircle cx='158.4' cy='30.7' r='4.1'/%3E%3Ccircle cx='170.9' cy='137.7' r='5.0'/%3E%3Ccircle cx='83.0' cy='163.0' r='3.8'/%3E%3Ccircle cx='142.5' cy='166.0' r='2.8'/%3E%3Ccircle cx='32.8' cy='119.6' r='4.7'/%3E%3Ccircle cx='178.4' cy='98.6' r='3.1'/%3E%3Ccircle cx='124.6' cy='189.3' r='1.7'/%3E%3Ccircle cx='178.8' cy='132.5' r='3.8'/%3E%3Ccircle cx='178.5' cy='85.3' r='3.5'/%3E%3Cline x1='60.9' y1='77.7' x2='33.1' y2='64.9' stroke='%23a3ff12' stroke-width='5.5' stroke-linecap='round'/%3E%3Cline x1='88.0' y1='143.4' x2='75.5' y2='181.3' stroke='%23a3ff12' stroke-width='3.6' stroke-linecap='round'/%3E%3Cline x1='113.4' y1='142.9' x2='123.8' y2='177.1' stroke='%23a3ff12' stroke-width='3.7' stroke-linecap='round'/%3E%3Cline x1='57.8' y1='115.6' x2='21.0' y2='127.6' stroke='%23a3ff12' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --g-splat-pink-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23ff2e88' fill-opacity='1' stroke-opacity='1'%3E%3Ccircle cx='100' cy='100' r='39'/%3E%3Ccircle cx='99.0' cy='128.4' r='18.9'/%3E%3Ccircle cx='118.3' cy='71.7' r='17.3'/%3E%3Ccircle cx='119.3' cy='69.7' r='14.5'/%3E%3Ccircle cx='123.5' cy='107.9' r='15.7'/%3E%3Ccircle cx='119.5' cy='78.8' r='13.0'/%3E%3Ccircle cx='100.1' cy='135.2' r='16.1'/%3E%3Ccircle cx='115.6' cy='134.2' r='15.9'/%3E%3Ccircle cx='101.7' cy='76.8' r='18.2'/%3E%3Ccircle cx='77.1' cy='108.3' r='21.7'/%3E%3Ccircle cx='186.7' cy='102.9' r='5.3'/%3E%3Ccircle cx='131.2' cy='153.4' r='2.5'/%3E%3Ccircle cx='128.7' cy='186.3' r='3.9'/%3E%3Ccircle cx='139.4' cy='186.1' r='2.0'/%3E%3Ccircle cx='169.0' cy='84.6' r='1.3'/%3E%3Ccircle cx='19.7' cy='147.6' r='2.3'/%3E%3Ccircle cx='56.5' cy='177.1' r='3.7'/%3E%3Ccircle cx='30.8' cy='52.4' r='1.5'/%3E%3Ccircle cx='58.5' cy='153.3' r='4.2'/%3E%3Ccircle cx='129.6' cy='168.2' r='2.0'/%3E%3Ccircle cx='96.4' cy='193.4' r='5.3'/%3E%3Ccircle cx='55.2' cy='155.8' r='3.6'/%3E%3Ccircle cx='38.5' cy='134.4' r='4.8'/%3E%3Ccircle cx='19.6' cy='124.5' r='3.9'/%3E%3Ccircle cx='157.4' cy='83.1' r='2.3'/%3E%3Ccircle cx='131.3' cy='33.0' r='3.4'/%3E%3Ccircle cx='151.0' cy='59.2' r='3.2'/%3E%3Ccircle cx='26.5' cy='53.5' r='2.8'/%3E%3Ccircle cx='79.3' cy='169.8' r='5.4'/%3E%3Ccircle cx='119.6' cy='173.5' r='2.8'/%3E%3Ccircle cx='139.6' cy='153.2' r='4.2'/%3E%3Ccircle cx='169.6' cy='145.5' r='2.5'/%3E%3Ccircle cx='124.3' cy='23.1' r='4.3'/%3E%3Ccircle cx='72.8' cy='169.7' r='4.3'/%3E%3Ccircle cx='169.5' cy='138.8' r='5.2'/%3E%3Ccircle cx='183.7' cy='117.0' r='2.7'/%3E%3Ccircle cx='99.9' cy='181.7' r='1.8'/%3E%3Ccircle cx='180.5' cy='89.3' r='4.6'/%3E%3Cline x1='77.3' y1='138.9' x2='62.4' y2='179.1' stroke='%23ff2e88' stroke-width='4.7' stroke-linecap='round'/%3E%3Cline x1='130.2' y1='133.3' x2='160.3' y2='158.6' stroke='%23ff2e88' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='68.6' y1='132.2' x2='50.2' y2='156.7' stroke='%23ff2e88' stroke-width='3.4' stroke-linecap='round'/%3E%3Cline x1='139.7' y1='78.8' x2='173.8' y2='65.3' stroke='%23ff2e88' stroke-width='4.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --g-wall-splat-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23ff2e88' fill-opacity='0.35' stroke-opacity='0.35'%3E%3Ccircle cx='100' cy='100' r='37'/%3E%3Ccircle cx='124.9' cy='72.0' r='19.8'/%3E%3Ccircle cx='64.3' cy='111.1' r='13.9'/%3E%3Ccircle cx='110.2' cy='71.2' r='18.1'/%3E%3Ccircle cx='111.7' cy='127.7' r='13.4'/%3E%3Ccircle cx='63.1' cy='90.8' r='18.3'/%3E%3Ccircle cx='76.0' cy='83.6' r='16.5'/%3E%3Ccircle cx='97.7' cy='66.4' r='18.2'/%3E%3Ccircle cx='111.4' cy='79.8' r='12.4'/%3E%3Ccircle cx='123.8' cy='77.5' r='19.8'/%3E%3Ccircle cx='63.5' cy='170.3' r='2.0'/%3E%3Ccircle cx='106.9' cy='166.7' r='1.2'/%3E%3Ccircle cx='170.5' cy='141.7' r='2.9'/%3E%3Ccircle cx='11.6' cy='70.5' r='1.6'/%3E%3Ccircle cx='97.8' cy='186.1' r='3.4'/%3E%3Ccircle cx='176.7' cy='114.5' r='1.7'/%3E%3Ccircle cx='152.2' cy='141.9' r='1.5'/%3E%3Ccircle cx='182.6' cy='108.8' r='2.1'/%3E%3Ccircle cx='151.2' cy='74.7' r='2.8'/%3E%3Ccircle cx='81.6' cy='30.2' r='3.6'/%3E%3Ccircle cx='126.3' cy='178.4' r='2.6'/%3E%3Ccircle cx='79.1' cy='151.6' r='3.0'/%3E%3Ccircle cx='153.5' cy='71.8' r='4.2'/%3E%3Ccircle cx='173.9' cy='105.1' r='3.3'/%3E%3Ccircle cx='74.0' cy='42.9' r='3.4'/%3E%3Ccircle cx='186.2' cy='92.0' r='3.0'/%3E%3Ccircle cx='47.0' cy='147.5' r='5.5'/%3E%3Ccircle cx='190.4' cy='100.3' r='5.4'/%3E%3Ccircle cx='19.9' cy='47.2' r='1.3'/%3E%3Ccircle cx='136.8' cy='188.5' r='3.8'/%3E%3Ccircle cx='49.8' cy='73.6' r='1.8'/%3E%3Ccircle cx='48.3' cy='119.9' r='3.8'/%3E%3Ccircle cx='134.2' cy='38.0' r='1.5'/%3E%3Ccircle cx='120.8' cy='178.4' r='1.3'/%3E%3Ccircle cx='45.4' cy='159.1' r='1.7'/%3E%3Ccircle cx='23.9' cy='53.5' r='1.8'/%3E%3Ccircle cx='39.1' cy='153.0' r='2.5'/%3E%3Ccircle cx='110.8' cy='179.3' r='4.3'/%3E%3Cline x1='124.5' y1='137.8' x2='145.6' y2='169.0' stroke='%23ff2e88' stroke-width='5.1' stroke-linecap='round'/%3E%3Cline x1='65.7' y1='129.1' x2='38.5' y2='146.3' stroke='%23ff2e88' stroke-width='3.1' stroke-linecap='round'/%3E%3Cline x1='134.8' y1='128.5' x2='162.9' y2='147.8' stroke='%23ff2e88' stroke-width='5.2' stroke-linecap='round'/%3E%3Cline x1='65.0' y1='128.3' x2='38.4' y2='156.6' stroke='%23ff2e88' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --g-wall-splat-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%232de2e6' fill-opacity='0.3' stroke-opacity='0.3'%3E%3Ccircle cx='100' cy='100' r='37'/%3E%3Ccircle cx='96.2' cy='131.3' r='15.5'/%3E%3Ccircle cx='70.6' cy='127.0' r='16.8'/%3E%3Ccircle cx='81.2' cy='76.3' r='20.6'/%3E%3Ccircle cx='103.1' cy='121.8' r='18.2'/%3E%3Ccircle cx='128.3' cy='96.1' r='15.4'/%3E%3Ccircle cx='108.0' cy='131.4' r='14.0'/%3E%3Ccircle cx='63.4' cy='96.9' r='18.8'/%3E%3Ccircle cx='107.0' cy='77.5' r='21.2'/%3E%3Ccircle cx='114.4' cy='69.3' r='14.2'/%3E%3Ccircle cx='172.2' cy='95.2' r='3.1'/%3E%3Ccircle cx='49.6' cy='19.7' r='3.5'/%3E%3Ccircle cx='157.5' cy='47.4' r='5.4'/%3E%3Ccircle cx='158.5' cy='48.8' r='3.4'/%3E%3Ccircle cx='169.1' cy='140.1' r='4.1'/%3E%3Ccircle cx='21.5' cy='115.2' r='3.5'/%3E%3Ccircle cx='63.0' cy='54.8' r='2.0'/%3E%3Ccircle cx='115.3' cy='36.1' r='5.2'/%3E%3Ccircle cx='147.2' cy='47.2' r='2.5'/%3E%3Ccircle cx='99.0' cy='168.7' r='2.8'/%3E%3Ccircle cx='22.6' cy='61.6' r='2.0'/%3E%3Ccircle cx='33.9' cy='161.4' r='1.3'/%3E%3Ccircle cx='181.6' cy='113.3' r='1.4'/%3E%3Ccircle cx='122.6' cy='176.6' r='4.4'/%3E%3Ccircle cx='110.7' cy='157.2' r='2.4'/%3E%3Ccircle cx='31.1' cy='130.6' r='3.8'/%3E%3Ccircle cx='88.5' cy='24.8' r='2.8'/%3E%3Ccircle cx='60.7' cy='162.3' r='4.2'/%3E%3Ccircle cx='139.9' cy='48.9' r='5.5'/%3E%3Ccircle cx='24.4' cy='117.0' r='2.0'/%3E%3Ccircle cx='106.6' cy='36.3' r='3.8'/%3E%3Ccircle cx='187.6' cy='70.1' r='4.6'/%3E%3Ccircle cx='137.5' cy='179.1' r='3.4'/%3E%3Ccircle cx='100.9' cy='159.8' r='2.8'/%3E%3Ccircle cx='41.3' cy='82.3' r='5.2'/%3E%3Ccircle cx='160.8' cy='44.3' r='2.4'/%3E%3Ccircle cx='164.2' cy='158.9' r='3.4'/%3E%3Ccircle cx='30.6' cy='104.5' r='4.1'/%3E%3Cline x1='57.7' y1='115.3' x2='18.9' y2='127.1' stroke='%232de2e6' stroke-width='4.9' stroke-linecap='round'/%3E%3Cline x1='143.1' y1='112.8' x2='174.1' y2='125.4' stroke='%232de2e6' stroke-width='4.9' stroke-linecap='round'/%3E%3Cline x1='57.7' y1='115.2' x2='17.7' y2='129.1' stroke='%232de2e6' stroke-width='4.6' stroke-linecap='round'/%3E%3Cline x1='144.3' y1='108.0' x2='169.0' y2='112.6' stroke='%232de2e6' stroke-width='4.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --g-crown-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60' fill='none' stroke='%23ffe14d' stroke-opacity='1' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M12 44 L8 16 L24 30 L40 8 L56 30 L72 14 L68 44 Z'/%3E %3Ccircle cx='8' cy='12' r='3' fill='%23ffe14d' fill-opacity='1'/%3E%3Ccircle cx='40' cy='5' r='3' fill='%23ffe14d' fill-opacity='1'/%3E%3Ccircle cx='72' cy='10' r='3' fill='%23ffe14d' fill-opacity='1'/%3E %3Cpath d='M22 46 V54 M50 46 V58'/%3E%3C/svg%3E");
  --g-crown-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60' fill='none' stroke='%230d0d0d' stroke-opacity='1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M12 44 L8 16 L24 30 L40 8 L56 30 L72 14 L68 44 Z'/%3E %3Ccircle cx='8' cy='12' r='3' fill='%230d0d0d' fill-opacity='1'/%3E%3Ccircle cx='40' cy='5' r='3' fill='%230d0d0d' fill-opacity='1'/%3E%3Ccircle cx='72' cy='10' r='3' fill='%230d0d0d' fill-opacity='1'/%3E %3Cpath d='M22 46 V54 M50 46 V58'/%3E%3C/svg%3E");
  --g-wall-crown-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60' fill='none' stroke='%23ff2e88' stroke-opacity='0.38' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M12 44 L8 16 L24 30 L40 8 L56 30 L72 14 L68 44 Z'/%3E %3Ccircle cx='8' cy='12' r='3' fill='%23ff2e88' fill-opacity='0.38'/%3E%3Ccircle cx='40' cy='5' r='3' fill='%23ff2e88' fill-opacity='0.38'/%3E%3Ccircle cx='72' cy='10' r='3' fill='%23ff2e88' fill-opacity='0.38'/%3E %3Cpath d='M22 46 V54 M50 46 V58'/%3E%3C/svg%3E");
  --g-wall-crown-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60' fill='none' stroke='%232de2e6' stroke-opacity='0.55' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M12 44 L8 16 L24 30 L40 8 L56 30 L72 14 L68 44 Z'/%3E %3Ccircle cx='8' cy='12' r='3' fill='%232de2e6' fill-opacity='0.55'/%3E%3Ccircle cx='40' cy='5' r='3' fill='%232de2e6' fill-opacity='0.55'/%3E%3Ccircle cx='72' cy='10' r='3' fill='%232de2e6' fill-opacity='0.55'/%3E %3Cpath d='M22 46 V54 M50 46 V58'/%3E%3C/svg%3E");
  --g-smiley: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 170' fill='none' stroke='%23a3ff12' stroke-opacity='0.55' stroke-width='9' stroke-linecap='round'%3E %3Ccircle cx='70' cy='70' r='58'/%3E%3Cpath d='M46 52 V64 M94 52 V64'/%3E%3Cpath d='M38 84 Q70 116 102 84'/%3E %3Cpath d='M40 122 V150 M98 120 V138 M70 128 V162'/%3E%3C/svg%3E");
  --g-arrow-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90' fill='none' stroke='%23ff2e88' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M6 70 C30 92 70 80 82 54 C90 36 76 28 68 40 C58 56 92 64 128 26'/%3E%3Cpath d='M108 24 L130 24 L126 46'/%3E%3C/svg%3E");
  --g-brush-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none' fill='%23ff2e88'%3E %3Cpath d='M3 12 C40 5 90 9 150 7 C210 5 260 9 297 6 C298 9 297 12 294 13 C250 15 200 13 150 15 C95 17 45 18 6 19 C2 17 1 14 3 12 Z'/%3E %3Ccircle cx='12' cy='5' r='1.6'/%3E%3Ccircle cx='285' cy='19' r='1.8'/%3E%3Ccircle cx='180' cy='20' r='1.2'/%3E%3C/svg%3E");
  --g-brush-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none' fill='%232de2e6'%3E %3Cpath d='M3 12 C40 5 90 9 150 7 C210 5 260 9 297 6 C298 9 297 12 294 13 C250 15 200 13 150 15 C95 17 45 18 6 19 C2 17 1 14 3 12 Z'/%3E %3Ccircle cx='12' cy='5' r='1.6'/%3E%3Ccircle cx='285' cy='19' r='1.8'/%3E%3Ccircle cx='180' cy='20' r='1.2'/%3E%3C/svg%3E");
  --g-brush-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none' fill='%230d0d0d'%3E %3Cpath d='M3 12 C40 5 90 9 150 7 C210 5 260 9 297 6 C298 9 297 12 294 13 C250 15 200 13 150 15 C95 17 45 18 6 19 C2 17 1 14 3 12 Z'/%3E %3Ccircle cx='12' cy='5' r='1.6'/%3E%3Ccircle cx='285' cy='19' r='1.8'/%3E%3Ccircle cx='180' cy='20' r='1.2'/%3E%3C/svg%3E");
  --g-sparks-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23ffe14d' stroke-width='5' stroke-linecap='round'%3E%3Cg%3E %3Cpath d='M14 40 L30 18 M26 46 L52 30 M10 28 L16 6'/%3E%3C/g%3E%3C/svg%3E");
  --g-sparks-cyan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%232de2e6' stroke-width='5' stroke-linecap='round'%3E%3Cg transform='translate(60 0) scale(-1 1)'%3E %3Cpath d='M14 40 L30 18 M26 46 L52 30 M10 28 L16 6'/%3E%3C/g%3E%3C/svg%3E");
  --g-cans: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 124'%3E %3Cellipse cx='85' cy='120' rx='80' ry='4' fill='%23000' fill-opacity='0.5'/%3E %3Ccircle cx='30' cy='108' r='6' fill='%23ff2e88' fill-opacity='0.6'/%3E%3Ccircle cx='120' cy='116' r='4' fill='%232de2e6' fill-opacity='0.6'/%3E %3Cg transform='translate(6 34) rotate(0 18 86)'%3E %3Crect x='0' y='14' width='36' height='72' rx='5' fill='%23ff2e88' stroke='%230d0d0d' stroke-width='2.5'/%3E %3Crect x='0' y='39' width='36' height='19' fill='%230d0d0d' fill-opacity='0.35'/%3E %3Cpath d='M4 14 Q18 2 32 14' fill='%23d9d4cc' stroke='%230d0d0d' stroke-width='2.5'/%3E %3Crect x='13' y='0' width='10' height='7' rx='1.5' fill='%23ffe14d' stroke='%230d0d0d' stroke-width='2'/%3E %3Cpath d='M6 26 Q10 33 8 38' stroke='%23fff' stroke-opacity='0.5' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3C/g%3E%3Cg transform='translate(52 20) rotate(0 18 100)'%3E %3Crect x='0' y='14' width='36' height='86' rx='5' fill='%23ffe14d' stroke='%230d0d0d' stroke-width='2.5'/%3E %3Crect x='0' y='45' width='36' height='22' fill='%230d0d0d' fill-opacity='0.35'/%3E %3Cpath d='M4 14 Q18 2 32 14' fill='%23d9d4cc' stroke='%230d0d0d' stroke-width='2.5'/%3E %3Crect x='13' y='0' width='10' height='7' rx='1.5' fill='%23ff2e88' stroke='%230d0d0d' stroke-width='2'/%3E %3Cpath d='M6 30 Q10 38 8 44' stroke='%23fff' stroke-opacity='0.5' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3C/g%3E%3Cg transform='translate(100 50) rotate(0 18 70)'%3E %3Crect x='0' y='14' width='36' height='56' rx='5' fill='%232de2e6' stroke='%230d0d0d' stroke-width='2.5'/%3E %3Crect x='0' y='32' width='36' height='15' fill='%230d0d0d' fill-opacity='0.35'/%3E %3Cpath d='M4 14 Q18 2 32 14' fill='%23d9d4cc' stroke='%230d0d0d' stroke-width='2.5'/%3E %3Crect x='13' y='0' width='10' height='7' rx='1.5' fill='%23a3ff12' stroke='%230d0d0d' stroke-width='2'/%3E %3Cpath d='M6 21 Q10 27 8 31' stroke='%23fff' stroke-opacity='0.5' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3C/g%3E%3Cg transform='translate(132 64) rotate(-8 18 56)'%3E %3Crect x='0' y='14' width='36' height='42' rx='5' fill='%23a3ff12' stroke='%230d0d0d' stroke-width='2.5'/%3E %3Crect x='0' y='25' width='36' height='12' fill='%230d0d0d' fill-opacity='0.35'/%3E %3Cpath d='M4 14 Q18 2 32 14' fill='%23d9d4cc' stroke='%230d0d0d' stroke-width='2.5'/%3E %3Crect x='13' y='0' width='10' height='7' rx='1.5' fill='%23ff2e88' stroke='%230d0d0d' stroke-width='2'/%3E %3Cpath d='M6 17 Q10 21 8 25' stroke='%23fff' stroke-opacity='0.5' stroke-width='3' fill='none' stroke-linecap='round'/%3E %3C/g%3E %3C/svg%3E");
}

/* ---- Wall: deeper shadows, coloured light thrown across the bricks ---- */
html[data-theme="graffiti"] .page-shell::before {
  background:
    radial-gradient(ellipse 45% 35% at 18% 22%, rgba(255, 46, 136, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 30%, rgba(45, 226, 230, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%),
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.82) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%230c0a0b'/%3E%3Crect x='2' y='2' width='56' height='26' rx='1.5' fill='%23302225'/%3E%3Crect x='62' y='2' width='56' height='26' rx='1.5' fill='%23281d20'/%3E%3Crect x='-28' y='32' width='56' height='26' rx='1.5' fill='%232b1f25'/%3E%3Crect x='32' y='32' width='56' height='26' rx='1.5' fill='%23332426'/%3E%3Crect x='92' y='32' width='56' height='26' rx='1.5' fill='%232b1f25'/%3E%3C/svg%3E") 0 0 / 132px 66px,
    #0c0a0b;
}

/* The faded tag is filled in like old, half-buffed paint rather than outlined */
html[data-theme="graffiti"] .animated-bg::after {
  color: rgba(150, 30, 100, 0.2);
  -webkit-text-stroke: 2px rgba(255, 46, 136, 0.12);
}

/* Old pieces left on the wall: crowns, a smiley and stray splats among the earlier blooms */
html[data-theme="graffiti"] .animated-bg::before {
  background:
    var(--g-wall-crown-pink) right 30% top 7rem / 7rem auto no-repeat,
    var(--g-smiley) right -2.5rem top 30rem / 9rem auto no-repeat,
    var(--g-wall-crown-cyan) right 3% top 46rem / 5rem auto no-repeat,
    var(--g-wall-splat-pink) left -3rem top 40rem / 12rem auto no-repeat,
    var(--g-wall-splat-cyan) right 8% top 60rem / 10rem auto no-repeat,
    var(--g-wall-crown-pink) left 6% bottom 30rem / 6rem auto no-repeat,
    radial-gradient(circle at 12% 8%, rgba(255, 46, 136, 0.22) 0 4rem, transparent 9rem),
    radial-gradient(circle at 88% 14%, rgba(45, 226, 230, 0.18) 0 3rem, transparent 8rem),
    radial-gradient(circle at 78% 42%, rgba(255, 225, 77, 0.14) 0 5rem, transparent 11rem),
    radial-gradient(circle at 8% 55%, rgba(163, 255, 18, 0.14) 0 3rem, transparent 8rem),
    radial-gradient(circle at 92% 72%, rgba(255, 46, 136, 0.16) 0 4rem, transparent 10rem),
    radial-gradient(circle at 20% 88%, rgba(255, 122, 26, 0.16) 0 4rem, transparent 9rem);
}

@media (max-width: 767px) {
  /* Phones keep the blooms and one crown, so the doodles never crowd the copy */
  html[data-theme="graffiti"] .animated-bg::before {
    background:
      var(--g-wall-crown-pink) right 6% top 5rem / 4.5rem auto no-repeat,
      radial-gradient(circle at 12% 8%, rgba(255, 46, 136, 0.22) 0 4rem, transparent 9rem),
      radial-gradient(circle at 88% 14%, rgba(45, 226, 230, 0.18) 0 3rem, transparent 8rem),
      radial-gradient(circle at 78% 42%, rgba(255, 225, 77, 0.14) 0 5rem, transparent 11rem),
      radial-gradient(circle at 8% 55%, rgba(163, 255, 18, 0.14) 0 3rem, transparent 8rem),
      radial-gradient(circle at 92% 72%, rgba(255, 46, 136, 0.16) 0 4rem, transparent 10rem);
  }
}

/* Denser, bolder drips running down from the top of the wall */
html[data-theme="graffiti"] .bg-drip {
  opacity: 0.55;
}

@keyframes wall-drip {
  0% { transform: scaleY(0); opacity: 0.55; }
  55% { transform: scaleY(1); opacity: 0.55; }
  85% { transform: scaleY(1); opacity: 0.55; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (max-width: 767px) {
  html[data-theme="graffiti"] .bg-drip:nth-child(n + 10) {
    display: none;
  }
}

/* Wet pavement at the foot of the wall, catching the colours, with the cans left behind */
html[data-theme="graffiti"] .page-shell::after {
  content: "";
  position: absolute;
  z-index: -5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9rem;
  pointer-events: none;
  background:
    var(--g-cans) left 4% bottom 2.6rem / 11rem auto no-repeat,
    radial-gradient(ellipse 18% 40% at 20% 70%, rgba(255, 46, 136, 0.28), transparent 70%),
    radial-gradient(ellipse 16% 40% at 55% 75%, rgba(45, 226, 230, 0.22), transparent 70%),
    radial-gradient(ellipse 14% 40% at 82% 70%, rgba(255, 225, 77, 0.18), transparent 70%),
    linear-gradient(to bottom, transparent 0, rgba(30, 28, 30, 0.9) 3.2rem, #161416 3.4rem, #0d0c0d);
}

@media (max-width: 1023px) {
  /* Leave room for the bottom section bar */
  html[data-theme="graffiti"] .page-shell::after {
    height: 12rem;
  }

  html[data-theme="graffiti"] .page-shell::after {
    background:
      var(--g-cans) left 4% bottom 5.6rem / 8rem auto no-repeat,
      radial-gradient(ellipse 30% 30% at 25% 70%, rgba(255, 46, 136, 0.28), transparent 70%),
      radial-gradient(ellipse 30% 30% at 75% 75%, rgba(45, 226, 230, 0.22), transparent 70%),
      linear-gradient(to bottom, transparent 0, rgba(30, 28, 30, 0.9) 6.2rem, #161416 6.4rem, #0d0c0d);
  }
}

/* ---- Name: brush-lettered in every colour, with drips and a crown ---- */
html[data-theme="graffiti"] .profile-name {
  position: relative;
  /* Shrink-wraps the name so the drips below stay under the letters */
  display: inline-block;
  font-family: var(--g-brush);
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 3px var(--g-ink);
  text-shadow: 4px 4px 0 var(--g-ink), 0 0 22px rgba(255, 46, 136, 0.35);
  transform: rotate(-3deg);
}

@media (min-width: 768px) {
  html[data-theme="graffiti"] .profile-name {
    font-size: clamp(3.6rem, 5.6vw, 5.25rem);
  }
}

html[data-theme="graffiti"] .name-char:nth-child(4n + 1) { -webkit-text-fill-color: var(--g-pink); }
html[data-theme="graffiti"] .name-char:nth-child(4n + 2) { -webkit-text-fill-color: var(--g-yellow); text-shadow: 4px 4px 0 var(--g-ink), 0 0 22px rgba(255, 225, 77, 0.35); }
html[data-theme="graffiti"] .name-char:nth-child(4n + 3) { -webkit-text-fill-color: var(--g-cyan); text-shadow: 4px 4px 0 var(--g-ink), 0 0 22px rgba(45, 226, 230, 0.35); }
html[data-theme="graffiti"] .name-char:nth-child(4n) { -webkit-text-fill-color: var(--g-lime); text-shadow: 4px 4px 0 var(--g-ink), 0 0 22px rgba(163, 255, 18, 0.35); }

/* A crown tagged above the first letter */
html[data-theme="graffiti"] .profile-name::before {
  content: "";
  position: absolute;
  left: 0.05em;
  top: -0.55em;
  width: 0.85em;
  height: 0.65em;
  background: var(--g-crown-yellow) center / contain no-repeat;
  transform: rotate(-8deg);
  pointer-events: none;
}

/* Paint running off the bottom of the letters */
html[data-theme="graffiti"] .profile-name::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 12%;
  top: 82%;
  height: 0.55em;
  background: linear-gradient(90deg, var(--g-pink) 0 30%, var(--g-cyan) 30% 62%, var(--g-lime) 62% 100%);
  -webkit-mask: var(--g-drip-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--g-drip-mask) 0 0 / 100% 100% no-repeat;
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}

/* ---- Job title and tagline: bold, clean caps over a sprayed underline ---- */
html[data-theme="graffiti"] .profile-title,
html[data-theme="graffiti"] .neon-subtitle,
html[data-theme="graffiti"] .neon-subtitle.flicker {
  font-family: var(--g-bold);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-cream);
  text-shadow: 2px 2px 0 var(--g-ink);
  background: var(--g-brush-pink) 0 100% / 100% 0.55em no-repeat;
  padding: 0 0.25rem 0.45em;
}

html[data-theme="graffiti"] .profile-title {
  margin-top: 1.1rem;
}

html[data-theme="graffiti"] .neon-subtitle,
html[data-theme="graffiti"] .neon-subtitle.flicker {
  display: table;
  margin-left: auto;
  margin-right: auto;
  background-image: var(--g-brush-cyan);
}

@media (min-width: 768px) {
  html[data-theme="graffiti"] .profile-title,
  html[data-theme="graffiti"] .neon-subtitle,
  html[data-theme="graffiti"] .neon-subtitle.flicker {
    font-size: 1.3rem;
  }
}

/* ---- "Need a website?": a two-line piece over a burst of paint ---- */
html[data-theme="graffiti"] .neon-title,
html[data-theme="graffiti"] .neon-title.flicker {
  font-family: var(--g-brush);
  font-size: clamp(3rem, 13vw, 4.5rem);
  line-height: 0.95;
  -webkit-text-stroke: 3px var(--g-ink);
  text-shadow: 4px 4px 0 var(--g-ink), 7px 7px 0 var(--g-pink), 9px 9px 0 var(--g-ink);
}

@media (min-width: 768px) {
  html[data-theme="graffiti"] .neon-title,
  html[data-theme="graffiti"] .neon-title.flicker {
    font-size: clamp(4.5rem, 7vw, 6.5rem);
  }
}

html[data-theme="graffiti"] .cta-line {
  display: block;
}

html[data-theme="graffiti"] .cta-line:first-child {
  color: var(--g-cream);
  -webkit-text-fill-color: var(--g-cream);
  text-shadow: 4px 4px 0 var(--g-ink), 7px 7px 0 var(--g-cyan), 9px 9px 0 var(--g-ink);
}

html[data-theme="graffiti"] .cta-line + .cta-line {
  color: var(--g-yellow);
  -webkit-text-fill-color: var(--g-yellow);
}

/* The soft glow becomes splatter thrown behind the letters */
html[data-theme="graffiti"] .neon-cta .glow-backdrop {
  opacity: 1;
}

html[data-theme="graffiti"] .neon-cta .glow-backdrop::before {
  top: 42%;
  width: min(100%, 38rem);
  height: 22rem;
  background:
    var(--g-splat-pink) 8% 30% / 9rem auto no-repeat,
    var(--g-splat-cyan) 92% 22% / 7rem auto no-repeat,
    var(--g-splat-yellow) 78% 82% / 8rem auto no-repeat,
    var(--g-splat-lime) 14% 88% / 5.5rem auto no-repeat,
    var(--g-splat-pink-2) 52% 4% / 5rem auto no-repeat;
  opacity: 0.85;
  filter: none;
  animation: none;
}

/* A hand-drawn arrow pointing from the piece across to the offer flyer */
@media (min-width: 1024px) {
  html[data-theme="graffiti"] .neon-cta::after {
    content: "";
    position: absolute;
    right: -2.5rem;
    top: 52%;
    width: 7rem;
    height: 4.5rem;
    background: var(--g-arrow-pink) center / contain no-repeat;
    transform: rotate(-6deg);
    pointer-events: none;
  }
}

/* ---- Buttons: icons, arrows and a halo of overspray ---- */
html[data-theme="graffiti"] .btn-pill,
html[data-theme="graffiti"] .switch-btn,
html[data-theme="graffiti"] .neon-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 4px 10px 3px 12px / 12px 4px 10px 3px;
  box-shadow: 5px 5px 0 var(--g-ink), 0 0 18px 2px var(--btn-glow, rgba(255, 46, 136, 0.45));
}

html[data-theme="graffiti"] .btn-pill { --btn-glow: rgba(255, 46, 136, 0.5); --btn-shadow: var(--g-ink); }
html[data-theme="graffiti"] .neon-cta-button { --btn-glow: rgba(45, 226, 230, 0.5); --btn-shadow: var(--g-ink); }
html[data-theme="graffiti"] .switch-btn { --btn-glow: rgba(255, 225, 77, 0.5); --btn-shadow: var(--g-ink); }

html[data-theme="graffiti"] .btn-pill:hover,
html[data-theme="graffiti"] .switch-btn:hover,
html[data-theme="graffiti"] .switch-btn:focus-visible,
html[data-theme="graffiti"] .neon-cta-button:hover {
  box-shadow: 8px 8px 0 var(--g-ink), 0 0 26px 4px var(--btn-glow, rgba(255, 46, 136, 0.45));
}

html[data-theme="graffiti"] .btn-pill:active,
html[data-theme="graffiti"] .switch-btn:active,
html[data-theme="graffiti"] .neon-cta-button:active {
  box-shadow: 2px 2px 0 var(--g-ink), 0 0 12px 1px var(--btn-glow, rgba(255, 46, 136, 0.45));
}

html[data-theme="graffiti"] .btn-arrow,
html[data-theme="graffiti"] .icon-alt {
  display: block;
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
}

html[data-theme="graffiti"] .neon-cta-button .icon:not(.icon-alt) {
  display: none;
}

/* The arrow nudges forward on hover */
html[data-theme="graffiti"] .btn-arrow {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="graffiti"] a:hover > .btn-arrow,
html[data-theme="graffiti"] a:focus-visible > .btn-arrow {
  transform: translateX(4px);
}

html[data-theme="graffiti"] .neon-cta-button {
  padding: 0.9rem 1.6rem;
  font-size: 1.15rem;
}

html[data-theme="graffiti"] .switch-btn-primary {
  width: 100%;
  padding: 0.95rem 1.25rem;
  font-family: var(--g-brush);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

/* ---- Profile photo: a spray halo and a few flicks of paint ---- */
html[data-theme="graffiti"] .profile-photo-col {
  position: relative;
}

html[data-theme="graffiti"] .profile-photo-glow {
  inset: -2.25rem;
  background:
    var(--g-splat-pink) 0 30% / 55% auto no-repeat,
    var(--g-splat-cyan) 100% 70% / 50% auto no-repeat;
  opacity: 0.75;
  filter: blur(3px);
}

html[data-theme="graffiti"] .profile-photo-ring::before,
html[data-theme="graffiti"] .profile-photo-ring::after {
  content: "";
  position: absolute;
  width: 3rem;
  height: 3rem;
  pointer-events: none;
}

html[data-theme="graffiti"] .profile-photo-ring {
  position: relative;
}

html[data-theme="graffiti"] .profile-photo-ring::before {
  top: -1.6rem;
  right: -1.9rem;
  background: var(--g-sparks-yellow) center / contain no-repeat;
}

html[data-theme="graffiti"] .profile-photo-ring::after {
  bottom: 0.4rem;
  right: -2.3rem;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--g-sparks-cyan) center / contain no-repeat;
  transform: rotate(70deg);
}

html[data-theme="graffiti"] .experience-badge {
  position: relative;
  z-index: 1;
  margin-top: -0.75rem;
  transform: rotate(-6deg);
  box-shadow: 4px 4px 0 var(--g-ink), 0 0 16px rgba(163, 255, 18, 0.45);
}

html[data-theme="graffiti"] .experience-badge .label {
  font-family: var(--g-marker);
  font-weight: 400;
}

/* ---- Switch offer: a torn paper flyer pasted on the wall ---- */
/* The paper is drawn by ::after and torn with clip-path, so the tape (::before) can sit over its edge */
html[data-theme="graffiti"] .switch-offer {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
  transform: rotate(1.5deg);
  isolation: isolate;
}

html[data-theme="graffiti"] .switch-offer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0.0% 1.6px, 3.8% 0.8px, 7.7% 3.3px, 11.5% 0.4px, 15.4% 2.7px, 19.2% 1.8px, 23.1% 0.3px, 26.9% 2.5px, 30.8% 0.2px, 34.6% 2.2px, 38.5% 0.3px, 42.3% 0.5px, 46.2% 2.1px, 50.0% 4.1px, 53.8% 0.6px, 57.7% 1.1px, 61.5% 3.1px, 65.4% 4.7px, 69.2% 2.9px, 73.1% 2.0px, 76.9% 4.9px, 80.8% 0.2px, 84.6% 4.3px, 88.5% 1.4px, 92.3% 0.7px, 96.2% 0.6px, calc(100% - 1.5px) 0.0%, calc(100% - 4.1px) 3.8%, calc(100% - 0.9px) 7.7%, calc(100% - 2.9px) 11.5%, calc(100% - 3.2px) 15.4%, calc(100% - 1.9px) 19.2%, calc(100% - 2.7px) 23.1%, calc(100% - 0.3px) 26.9%, calc(100% - 0.3px) 30.8%, calc(100% - 1.0px) 34.6%, calc(100% - 3.4px) 38.5%, calc(100% - 2.1px) 42.3%, calc(100% - 1.6px) 46.2%, calc(100% - 2.9px) 50.0%, calc(100% - 2.3px) 53.8%, calc(100% - 1.5px) 57.7%, calc(100% - 4.0px) 61.5%, calc(100% - 3.5px) 65.4%, calc(100% - 1.2px) 69.2%, calc(100% - 2.9px) 73.1%, calc(100% - 2.6px) 76.9%, calc(100% - 4.4px) 80.8%, calc(100% - 3.6px) 84.6%, calc(100% - 1.4px) 88.5%, calc(100% - 4.9px) 92.3%, calc(100% - 0.6px) 96.2%, 100.0% calc(100% - 2.1px), 96.2% calc(100% - 3.8px), 92.3% calc(100% - 0.8px), 88.5% calc(100% - 2.4px), 84.6% calc(100% - 0.2px), 80.8% calc(100% - 3.3px), 76.9% calc(100% - 3.8px), 73.1% calc(100% - 2.9px), 69.2% calc(100% - 4.4px), 65.4% calc(100% - 1.6px), 61.5% calc(100% - 3.5px), 57.7% calc(100% - 3.0px), 53.8% calc(100% - 2.9px), 50.0% calc(100% - 2.3px), 46.2% calc(100% - 4.2px), 42.3% calc(100% - 4.7px), 38.5% calc(100% - 2.4px), 34.6% calc(100% - 3.3px), 30.8% calc(100% - 0.3px), 26.9% calc(100% - 3.5px), 23.1% calc(100% - 3.2px), 19.2% calc(100% - 5.0px), 15.4% calc(100% - 4.1px), 11.5% calc(100% - 1.4px), 7.7% calc(100% - 1.9px), 3.8% calc(100% - 3.3px), 0.1px 100.0%, 2.3px 96.2%, 0.8px 92.3%, 0.6px 88.5%, 0.3px 84.6%, 3.8px 80.8%, 0.6px 76.9%, 1.2px 73.1%, 2.0px 69.2%, 4.4px 65.4%, 0.4px 61.5%, 2.2px 57.7%, 2.7px 53.8%, 4.4px 50.0%, 4.1px 46.2%, 4.3px 42.3%, 1.4px 38.5%, 2.1px 34.6%, 1.8px 30.8%, 4.4px 26.9%, 4.8px 23.1%, 0.8px 19.2%, 0.9px 15.4%, 1.2px 11.5%, 1.2px 7.7%, 2.4px 3.8%);
  background:
    var(--g-crown-ink) 1.1rem 1rem / 2.6rem auto no-repeat,
    var(--g-splat-pink) right -2.5rem top -2.5rem / 7rem auto no-repeat,
    var(--g-splat-cyan) left -2.5rem top 35% / 6rem auto no-repeat,
    var(--g-splat-yellow) right -2rem bottom -2.5rem / 6.5rem auto no-repeat,
    var(--g-splat-pink-2) left -1.5rem bottom -2rem / 5rem auto no-repeat,
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(120, 100, 70, 0.12), transparent 50%),
    #ece6da;
}

/* Tape sits over the torn edge */
html[data-theme="graffiti"] .switch-offer::before {
  z-index: 2;
  background: rgba(232, 218, 176, 0.88);
}

html[data-theme="graffiti"] .switch-offer > * {
  position: relative;
  z-index: 1;
}

html[data-theme="graffiti"] .switch-offer-title {
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.2rem 0.4em;
  font-family: var(--g-brush);
  font-size: clamp(1.8rem, 6vw, 2.3rem);
  line-height: 1.05;
  color: var(--g-ink);
  text-shadow: 2px 2px 0 var(--g-yellow);
  background:
    var(--g-brush-pink) 0 calc(100% - 0.12em) / 46% 0.4em no-repeat,
    var(--g-brush-ink) 100% 100% / 52% 0.4em no-repeat;
}

/* Key phrases marked with a pink highlighter */
html[data-theme="graffiti"] .switch-offer-text strong,
html[data-theme="graffiti"].fx .switch-offer-text strong {
  padding: 0.05em 0.25em;
  border-radius: 3px 6px 3px 8px;
  background: rgba(255, 46, 136, 0.45);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* "Included forms" between two ruled lines */
html[data-theme="graffiti"] .switch-offer-includes-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--g-bold);
  font-weight: 800;
  letter-spacing: 0.12em;
}

html[data-theme="graffiti"] .switch-offer-includes-label::before,
html[data-theme="graffiti"] .switch-offer-includes-label::after {
  content: "";
  flex: 1;
  height: 2px;
  background: rgba(13, 13, 13, 0.35);
}

/* Pills become painted blocks with icons */
html[data-theme="graffiti"] .platform-pill,
html[data-theme="graffiti"] .feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 3px 8px 4px 10px / 10px 3px 8px 4px;
}

html[data-theme="graffiti"] .pill-icon {
  display: block;
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
}

html[data-theme="graffiti"] .pill-icon--after {
  width: 0.85em;
  height: 0.85em;
  opacity: 0.8;
}

html[data-theme="graffiti"] .platform-pill {
  font-family: var(--g-bold);
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
}

html[data-theme="graffiti"] .platform-pill + .platform-pill {
  background: var(--g-cyan);
  text-transform: none;
  font-weight: 800;
}

html[data-theme="graffiti"] .feature-pill {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}

/* ---- Side nav: cream panel outlined in pink, with a drip ---- */
html[data-theme="graffiti"] .section-nav {
  border-color: var(--g-pink);
  box-shadow: 0 0 0 3px var(--g-ink), 6px 6px 0 3px var(--g-pink), 0 0 24px rgba(255, 46, 136, 0.35);
}

@media (min-width: 1024px) {
  html[data-theme="graffiti"] .section-nav::after {
    content: "";
    position: absolute;
    left: 30%;
    width: 2.4rem;
    top: calc(100% - 4px);
    height: 2.2rem;
    background: var(--g-pink);
    -webkit-mask: var(--g-drip-mask) 0 0 / 100% 100% no-repeat;
    mask: var(--g-drip-mask) 0 0 / 100% 100% no-repeat;
    pointer-events: none;
  }
}

@media (max-width: 1023px) {
  html[data-theme="graffiti"] .section-nav {
    box-shadow: 0 -4px 0 var(--g-pink), 0 -10px 24px rgba(255, 46, 136, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="graffiti"] .btn-arrow {
    transition: none;
  }
}

/* ---- Picker swatches for the newer themes ---- */
.theme-swatch--blueprint {
  background:
    radial-gradient(circle, transparent 0 36%, rgba(235, 244, 255, 0.95) 37% 41%, transparent 42%),
    linear-gradient(rgba(235, 244, 255, 0.3) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(90deg, rgba(235, 244, 255, 0.3) 1px, transparent 1px) 0 0 / 6px 6px,
    #134a8a;
  box-shadow: inset 0 0 0 1px rgba(235, 244, 255, 0.6);
}

.theme-swatch--professional {
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 22%, transparent 23%),
    #000000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Drafting tools only appear in blueprint */
.shot-pen,
.cad-guide,
.cad-readout {
  display: none;
}

/* ================================================================== */
/* BLUEPRINT                                                            */
/* The site drafted as an engineering plan: white linework on           */
/* blueprint blue, monospace annotations and drafting-pen animations    */
/* ================================================================== */
html[data-theme="blueprint"] {
  --b-paper: #134a8a;
  --b-paper-deep: #0d3566;
  --b-panel: rgba(21, 71, 127, 0.92);
  --b-line: rgba(235, 244, 255, 0.92);
  --b-line-soft: rgba(235, 244, 255, 0.55);
  --b-faint: rgba(235, 244, 255, 0.18);
  --b-text: #e8f1ff;
  --b-body: rgba(232, 241, 255, 0.84);
  --b-muted: rgba(232, 241, 255, 0.66);
  --b-pencil: #ffd166;
  --b-red: #ff8a80;
  --b-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  --b-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --b-hand: "Architects Daughter", "Comic Sans MS", cursive;
}

html[data-theme="blueprint"] body {
  font-family: var(--b-sans);
  color: var(--b-body);
  background: var(--b-paper);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="blueprint"] body {
    cursor: crosshair;
  }
}

html[data-theme="blueprint"] ::selection {
  background: var(--b-pencil);
  color: var(--b-paper-deep);
}

/* ---- The sheet: major and minor grid, vignette ---- */
html[data-theme="blueprint"] .page-shell::before {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.09), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 12, 35, 0.45) 100%),
    linear-gradient(rgba(235, 244, 255, 0.1) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, rgba(235, 244, 255, 0.1) 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(rgba(235, 244, 255, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(235, 244, 255, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--b-paper);
}

html[data-theme="blueprint"] .animated-bg .bg-grid,
html[data-theme="blueprint"] .animated-bg .bg-particle,
html[data-theme="blueprint"] .animated-bg .bg-orb,
html[data-theme="blueprint"] .cursor-glow,
html[data-theme="blueprint"] .scanline-overlay {
  display: none;
}

/* Drawing border around the whole sheet */
html[data-theme="blueprint"] .animated-bg::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1.5px solid var(--b-line-soft);
  outline: 1px solid var(--b-faint);
  outline-offset: 4px;
  pointer-events: none;
}

/* Title block in the corner of the sheet */
html[data-theme="blueprint"] .animated-bg::after {
  content: "DRAWN BY   M. MULDERS\A TITLE      DEVELOPER PROFILE\A SCALE      1:1     SHEET 1/1\A REV        2026";
  position: absolute;
  left: 1.75rem;
  bottom: 1.75rem;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--b-line-soft);
  background: rgba(13, 53, 102, 0.6);
  font-family: var(--b-mono);
  font-size: 0.65rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  white-space: pre;
  color: var(--b-muted);
  pointer-events: none;
}

@media (max-width: 1023px) {
  html[data-theme="blueprint"] .animated-bg::after {
    display: none;
  }
}

/* ---- CAD cursor (theme.js) ---- */
html[data-theme="blueprint"] .cad-guide {
  display: block;
  position: fixed;
  z-index: -5;
  top: 0;
  left: 0;
  background: rgba(235, 244, 255, 0.22);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

html[data-theme="blueprint"] .cad-guide-x {
  right: 0;
  height: 1px;
}

html[data-theme="blueprint"] .cad-guide-y {
  bottom: 0;
  width: 1px;
}

html[data-theme="blueprint"] .cad-readout {
  display: block;
  position: fixed;
  z-index: 70;
  top: 0;
  left: 0;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--b-line-soft);
  background: rgba(13, 53, 102, 0.92);
  font-family: var(--b-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  white-space: pre;
  color: var(--b-pencil);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

html[data-theme="blueprint"] body.cad-cursor-on .cad-guide,
html[data-theme="blueprint"] body.cad-cursor-on .cad-readout {
  opacity: 1;
}

/* ---- Picker ---- */
html[data-theme="blueprint"] .theme-picker-toggle {
  border: 1.5px solid var(--b-line);
  background: var(--b-paper-deep);
  box-shadow: 0 0 0 4px var(--b-paper-deep), 0 0 0 5px var(--b-faint);
}

html[data-theme="blueprint"] .theme-picker-toggle:hover,
html[data-theme="blueprint"] .theme-picker.is-open .theme-picker-toggle {
  box-shadow: 0 0 0 4px var(--b-paper-deep), 0 0 0 5px var(--b-pencil);
}

html[data-theme="blueprint"] .theme-picker-menu {
  border: 1.5px solid var(--b-line);
  border-radius: 0;
  background: var(--b-paper-deep);
  outline: 1px solid var(--b-faint);
  outline-offset: 4px;
  box-shadow: 0 12px 30px rgba(0, 10, 30, 0.45);
}

html[data-theme="blueprint"] .theme-picker-heading {
  font-family: var(--b-mono);
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .theme-option {
  border-radius: 0;
  color: var(--b-text);
}

html[data-theme="blueprint"] .theme-option:hover {
  background: rgba(235, 244, 255, 0.08);
}

html[data-theme="blueprint"] .theme-option[aria-pressed="true"] {
  border-color: var(--b-line-soft);
  background: rgba(235, 244, 255, 0.1);
}

html[data-theme="blueprint"] .theme-option[aria-pressed="true"]::after {
  border-color: var(--b-pencil);
}

html[data-theme="blueprint"] .theme-option-name {
  font-family: var(--b-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

html[data-theme="blueprint"] .theme-option-desc {
  color: var(--b-muted);
}

html[data-theme="blueprint"] .theme-picker-toggle:focus-visible,
html[data-theme="blueprint"] .theme-option:focus-visible {
  outline: 2px solid var(--b-pencil);
}

/* ---- Buttons: outlined, with a dimension line above that stretches on hover ---- */
html[data-theme="blueprint"] .btn-pill,
html[data-theme="blueprint"] .btn-glow,
html[data-theme="blueprint"] .switch-btn,
html[data-theme="blueprint"] .neon-cta-button {
  position: relative;
  overflow: visible;
  background: transparent;
  border: 1.5px solid var(--b-line);
  border-radius: 0;
  color: var(--b-text);
  font-family: var(--b-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
  transform: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

html[data-theme="blueprint"] .btn-pill::before,
html[data-theme="blueprint"] .btn-glow::before,
html[data-theme="blueprint"] .switch-btn::before,
html[data-theme="blueprint"] .neon-cta-button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.75rem;
  height: 0.45rem;
  border-left: 1px solid var(--b-line-soft);
  border-right: 1px solid var(--b-line-soft);
  background: linear-gradient(var(--b-line-soft), var(--b-line-soft)) center / 100% 1px no-repeat;
  transform: scaleX(0.9);
  opacity: 0.7;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
}

html[data-theme="blueprint"] .btn-pill:hover,
html[data-theme="blueprint"] .btn-glow:hover:not(:disabled),
html[data-theme="blueprint"] .switch-btn:hover,
html[data-theme="blueprint"] .switch-btn:focus-visible,
html[data-theme="blueprint"] .neon-cta-button:hover {
  background: rgba(235, 244, 255, 0.1);
  border-color: var(--b-pencil);
  color: var(--b-pencil);
  box-shadow: none;
  transform: none;
}

html[data-theme="blueprint"] .btn-pill:hover::before,
html[data-theme="blueprint"] .btn-glow:hover:not(:disabled)::before,
html[data-theme="blueprint"] .switch-btn:hover::before,
html[data-theme="blueprint"] .neon-cta-button:hover::before {
  transform: scaleX(1.12);
  opacity: 1;
  border-color: var(--b-pencil);
  background-image: linear-gradient(var(--b-pencil), var(--b-pencil));
}

html[data-theme="blueprint"] .btn-glow:disabled {
  opacity: 0.45;
}

html[data-theme="blueprint"] .neon-cta-button .icon,
html[data-theme="blueprint"] .neon-cta-button span {
  color: inherit;
  text-shadow: none;
  filter: none;
}

html[data-theme="blueprint"] .neon-cta-button span {
  font-size: 1rem;
}

html[data-theme="blueprint"] .btn-pill:focus-visible,
html[data-theme="blueprint"] .switch-btn:focus-visible {
  outline: 2px solid var(--b-pencil);
}

html[data-theme="blueprint"] .back-link,
html[data-theme="blueprint"] .reset-link {
  font-family: var(--b-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b-text);
}

html[data-theme="blueprint"] .back-link:hover,
html[data-theme="blueprint"] .reset-link:hover {
  color: var(--b-pencil);
}

/* ---- Form fields ---- */
html[data-theme="blueprint"] .simple-field label {
  font-family: var(--b-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b-muted);
}

html[data-theme="blueprint"] .simple-field input,
html[data-theme="blueprint"] .simple-field textarea {
  border: 1.5px solid var(--b-line-soft);
  border-radius: 0;
  background: rgba(13, 53, 102, 0.55);
  color: var(--b-text);
}

html[data-theme="blueprint"] .simple-field input::placeholder,
html[data-theme="blueprint"] .simple-field textarea::placeholder {
  color: var(--b-muted);
}

html[data-theme="blueprint"] .simple-field input:focus,
html[data-theme="blueprint"] .simple-field textarea:focus {
  border-color: var(--b-pencil);
  box-shadow: none;
}

html[data-theme="blueprint"] .simple-status.system { color: var(--b-text); background: rgba(235, 244, 255, 0.1); }

/* ---- Profile header ---- */
html[data-theme="blueprint"] .profile-photo-ring {
  padding: 5px;
  background: var(--b-paper-deep);
  border: 1.5px solid var(--b-line);
  box-shadow: 0 0 0 7px var(--b-paper), 0 0 0 8.5px var(--b-line-soft);
}

html[data-theme="blueprint"] .profile-photo-ring:hover {
  box-shadow: 0 0 0 7px var(--b-paper), 0 0 0 8.5px var(--b-pencil);
}

html[data-theme="blueprint"] .profile-photo-mask {
  background: var(--b-paper-deep);
}

html[data-theme="blueprint"] .profile-photo-glow {
  display: none;
}

html[data-theme="blueprint"] .experience-badge {
  border: 1.5px solid var(--b-line);
  border-radius: 0;
  background: var(--b-paper-deep);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="blueprint"] .experience-badge .label {
  font-family: var(--b-mono);
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .experience-badge .value {
  font-family: var(--b-mono);
  color: var(--b-text);
}

/* The name is plotted in outline, then hatched in */
html[data-theme="blueprint"] .profile-name {
  font-family: var(--b-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--b-line);
  text-shadow: none;
}

/* Wide monospace capitals: scale down on phones so the name stays on one line */
@media (max-width: 767px) {
  html[data-theme="blueprint"] .profile-name {
    font-size: 1.95rem;
  }
}

/* Hatched fill; on the letters when they exist, otherwise on the heading itself */
html[data-theme="blueprint"] .profile-name:not(:has(.name-char)),
html[data-theme="blueprint"] .name-char {
  background: repeating-linear-gradient(-45deg, rgba(235, 244, 255, 0.55) 0 1px, transparent 1px 5px);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="blueprint"] .name-char {
  display: inline-block;
}

html[data-theme="blueprint"].fx .profile-name.is-intro .name-char {
  animation: plot-letter 0.45s linear both;
  animation-delay: calc(0.2s + var(--i) * 0.09s);
}

@keyframes plot-letter {
  from { clip-path: inset(-20% 100% -20% -20%); }
  to { clip-path: inset(-20% -20% -20% -20%); }
}

html[data-theme="blueprint"] .profile-title {
  font-family: var(--b-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b-muted);
}

html[data-theme="blueprint"] .profile-title::before {
  content: "ROLE: ";
  color: var(--b-pencil);
}

@media (min-width: 768px) {
  html[data-theme="blueprint"] .profile-title {
    font-size: 1.1rem;
  }
}

/* ---- "Need a website?" as a hand-lettered callout ---- */
html[data-theme="blueprint"] .neon-cta .glow-backdrop {
  display: none;
}

html[data-theme="blueprint"] .neon-cta-content {
  transition: opacity 0.6s ease;
}

html[data-theme="blueprint"] .neon-title,
html[data-theme="blueprint"] .neon-title.flicker {
  font-family: var(--b-hand);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--b-text);
  text-shadow: none;
  animation: none;
  text-decoration: underline wavy var(--b-pencil);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

html[data-theme="blueprint"] .neon-subtitle,
html[data-theme="blueprint"] .neon-subtitle.flicker {
  font-family: var(--b-mono);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b-muted);
  text-shadow: none;
  animation: none;
}

/* ---- Switch offer: a revision note pinned to the drawing ---- */
html[data-theme="blueprint"] .switch-offer {
  overflow: visible;
  background: var(--b-panel);
  border: 1.5px dashed var(--b-line);
  border-radius: 0;
  box-shadow: none;
}

/* The shimmer becomes a revision tag */
html[data-theme="blueprint"] .switch-offer::before {
  content: "REV B";
  inset: auto;
  top: -0.8rem;
  right: 1rem;
  padding: 0.15rem 0.55rem;
  border: 1.5px solid var(--b-red);
  background: var(--b-paper-deep);
  font-family: var(--b-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--b-red);
  transform: none;
  animation: none;
}

html[data-theme="blueprint"] .platform-pill,
html[data-theme="blueprint"] .feature-pill {
  border: 1.5px solid var(--b-line-soft);
  border-radius: 0;
  background: transparent;
  font-family: var(--b-mono);
  font-weight: 600;
  color: var(--b-text);
  text-shadow: none;
  box-shadow: none;
}

html[data-theme="blueprint"] .platform-pill {
  border-color: var(--b-pencil);
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .switch-offer-title {
  font-family: var(--b-hand);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--b-text);
  text-shadow: none;
}

html[data-theme="blueprint"] .switch-offer-text {
  color: var(--b-body);
}

html[data-theme="blueprint"] .switch-offer-text strong,
html[data-theme="blueprint"].fx .switch-offer-text strong {
  color: var(--b-pencil);
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

html[data-theme="blueprint"] .switch-offer-includes-label,
html[data-theme="blueprint"] .offer-progress-label {
  font-family: var(--b-mono);
  color: var(--b-muted);
}

html[data-theme="blueprint"] .offer-progress-count strong {
  color: var(--b-pencil);
  text-shadow: none;
}

html[data-theme="blueprint"] .offer-progress-track {
  border: 1.5px solid var(--b-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="blueprint"] .offer-progress-fill {
  border-radius: 0;
  background: repeating-linear-gradient(-45deg, var(--b-line) 0 2px, transparent 2px 6px);
  box-shadow: none;
  animation: none;
}

html[data-theme="blueprint"] .offer-progress-note {
  color: var(--b-muted);
}

/* ---- Bio: drafting notes ---- */
html[data-theme="blueprint"] .terminal-box {
  margin-top: 2.5rem;
  background: var(--b-panel);
  border: 1.5px solid var(--b-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="blueprint"] .terminal-box::before {
  content: "NOTES";
  position: absolute;
  left: -1.5px;
  bottom: 100%;
  padding: 0.2rem 0.6rem;
  border: 1.5px solid var(--b-line);
  border-bottom: none;
  background: var(--b-paper-deep);
  font-family: var(--b-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .terminal-box .prompt-line {
  font-family: var(--b-hand);
  font-size: 1.05rem;
  line-height: 1.65;
}

html[data-theme="blueprint"] .terminal-box .typed-text {
  color: var(--b-text);
}

html[data-theme="blueprint"] .terminal-box .prompt-arrow,
html[data-theme="blueprint"] .terminal-box .cursor {
  color: var(--b-pencil);
}

/* ---- Content sections: figures on the sheet ---- */
html[data-theme="blueprint"] .content-sections {
  counter-reset: fig;
}

html[data-theme="blueprint"] .content-section,
html[data-theme="blueprint"] .content-section:hover {
  border: 1.5px solid var(--b-line);
  border-radius: 0;
  background: var(--b-panel);
  backdrop-filter: none;
  box-shadow: none;
  outline: 1px solid var(--b-faint);
  outline-offset: 5px;
  overflow: visible;
}

html[data-theme="blueprint"] .section-header {
  background: none;
  border-bottom: 1.5px solid var(--b-line-soft);
  color: var(--b-text);
  font-family: var(--b-mono);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-theme="blueprint"] .section-header::before {
  counter-increment: fig;
  content: "FIG. " counter(fig, decimal-leading-zero) " —";
  flex-shrink: 0;
  color: var(--b-pencil);
}

/* Leader line from the label to the edge of the figure */
html[data-theme="blueprint"] .section-header::after {
  content: "";
  flex: 1;
  min-width: 1rem;
  height: 7px;
  background:
    radial-gradient(circle, var(--b-line-soft) 0 3px, transparent 3.5px) right center / 7px 7px no-repeat,
    linear-gradient(var(--b-line-soft), var(--b-line-soft)) left center / calc(100% - 4px) 1px no-repeat;
  transform-origin: left;
}

html[data-theme="blueprint"] .section-header .icon {
  color: var(--b-pencil);
}

/* Phones: the figure number becomes a caption above the title, so the title gets the full row */
@media (max-width: 479px) {
  html[data-theme="blueprint"] .section-header {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  html[data-theme="blueprint"] .section-header::before {
    flex-basis: 100%;
    font-size: 0.7rem;
  }
}

html[data-theme="blueprint"].fx .section-header.is-powering,
html[data-theme="blueprint"].fx .content-section.is-powering {
  animation: none;
}

html[data-theme="blueprint"].fx .section-header::after {
  transform: scaleX(0);
}

html[data-theme="blueprint"].fx .section-header.is-powering::after {
  animation: leader-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both;
}

@keyframes leader-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

html[data-theme="blueprint"] .type-cursor {
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .section-body {
  color: var(--b-body);
}

/* ---- Website highlights ---- */
html[data-theme="blueprint"] .site-intro {
  border-bottom: 1px dashed var(--b-line-soft);
}

html[data-theme="blueprint"] .site-intro p,
html[data-theme="blueprint"] .site-entry p,
html[data-theme="blueprint"] .project-entry p,
html[data-theme="blueprint"] .timeline-entry ul {
  color: var(--b-body);
}

html[data-theme="blueprint"] .site-intro .site-legend {
  font-family: var(--b-mono);
  color: var(--b-muted);
}

html[data-theme="blueprint"] .site-dot.live {
  background: var(--b-line);
  box-shadow: none;
}

html[data-theme="blueprint"] .site-dot.retired {
  background: transparent;
  border: 1.5px solid var(--b-line-soft);
  box-shadow: none;
}

html[data-theme="blueprint"] .site-link-row a {
  font-family: var(--b-mono);
  font-weight: 600;
  color: var(--b-text);
  text-decoration: underline dashed var(--b-line-soft);
  text-underline-offset: 0.25em;
}

html[data-theme="blueprint"] .site-link-row a:hover,
html[data-theme="blueprint"] .site-link-row a:focus-visible {
  color: var(--b-pencil);
  text-decoration-color: var(--b-pencil);
  animation: none;
  text-shadow: none;
}

html[data-theme="blueprint"] .site-shot {
  border: 1.5px solid var(--b-line);
  border-radius: 0;
  box-shadow: none;
  outline: 1px dashed var(--b-line-soft);
  outline-offset: 5px;
}

html[data-theme="blueprint"] .site-shot:hover,
html[data-theme="blueprint"] .site-shot:focus-visible {
  box-shadow: none;
  outline-color: var(--b-pencil);
}

html[data-theme="blueprint"] .site-shot:focus-visible {
  outline-style: solid;
}

/* Reveal: effects.js hatches the image in with a drafting pen over a blank panel */
html[data-theme="blueprint"].fx .site-shot .site-screenshot,
html[data-theme="blueprint"].fx .site-shot.is-revealed .site-screenshot {
  clip-path: none;
  animation: none;
}

html[data-theme="blueprint"].fx .site-shot::after {
  display: none;
}

html[data-theme="blueprint"] .shot-cover {
  background: #15477f;
}

html[data-theme="blueprint"] .shot-cover.is-painting {
  background: none;
}

html[data-theme="blueprint"] .shot-pen {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 1.4rem;
  height: 1.4rem;
  margin: -0.7rem 0 0 -0.7rem;
  border: 1.5px solid var(--b-pencil);
  border-radius: 50%;
  background:
    linear-gradient(var(--b-pencil), var(--b-pencil)) center / 100% 1px no-repeat,
    linear-gradient(var(--b-pencil), var(--b-pencil)) center / 1px 100% no-repeat;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

html[data-theme="blueprint"] .shot-pen.is-done {
  opacity: 0;
}

/* ---- Projects + timeline ---- */
html[data-theme="blueprint"] .project-entry h3,
html[data-theme="blueprint"] .timeline-entry h3 {
  font-family: var(--b-sans);
  font-weight: 600;
  color: var(--b-text);
}

html[data-theme="blueprint"] .project-entry .project-title-row .icon {
  color: var(--b-pencil);
}

/* The timeline becomes a dimension line with ticks */
html[data-theme="blueprint"] .timeline::before,
html[data-theme="blueprint"].fx .timeline::before {
  left: calc(0.5rem - 4px);
  width: 9px;
  background:
    linear-gradient(var(--b-line), var(--b-line)) center / 1.5px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--b-line-soft) 0 1px, transparent 1px 20px);
  box-shadow: none;
}

html[data-theme="blueprint"] .timeline-dot,
html[data-theme="blueprint"].fx .timeline-dot {
  border: 1.5px solid var(--b-line-soft);
  background:
    linear-gradient(var(--b-line-soft), var(--b-line-soft)) center / 100% 1px no-repeat,
    linear-gradient(var(--b-line-soft), var(--b-line-soft)) center / 1px 100% no-repeat,
    var(--b-paper-deep);
  box-shadow: none;
}

html[data-theme="blueprint"]:not(.fx) .timeline-dot,
html[data-theme="blueprint"].fx .timeline-entry.is-lit .timeline-dot {
  border-color: var(--b-pencil);
  background:
    linear-gradient(var(--b-pencil), var(--b-pencil)) center / 100% 1px no-repeat,
    linear-gradient(var(--b-pencil), var(--b-pencil)) center / 1px 100% no-repeat,
    var(--b-paper-deep);
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.2);
}

html[data-theme="blueprint"] .timeline-date {
  font-family: var(--b-mono);
  font-size: 0.8rem;
  color: var(--b-pencil);
}

/* ---- Section nav ---- */
html[data-theme="blueprint"] .section-nav {
  border: 1.5px solid var(--b-line);
  background: rgba(13, 53, 102, 0.95);
  box-shadow: none;
}

@media (min-width: 1024px) {
  html[data-theme="blueprint"] .section-nav {
    border-left: none;
  }
}

@media (max-width: 1023px) {
  html[data-theme="blueprint"] .section-nav {
    border-width: 1.5px 0 0;
  }
}

html[data-theme="blueprint"] .section-nav-link {
  color: var(--b-text);
}

html[data-theme="blueprint"] .section-nav-link .icon {
  border: 1.5px solid var(--b-line-soft);
  background: transparent;
}

html[data-theme="blueprint"] .section-nav-link:hover .icon,
html[data-theme="blueprint"] .section-nav-link:focus-visible .icon {
  color: var(--b-pencil);
  border-color: var(--b-pencil);
  box-shadow: none;
}

html[data-theme="blueprint"] .section-nav-link.active .icon {
  color: var(--b-paper-deep);
  border-color: var(--b-line);
  background: var(--b-line);
  box-shadow: 0 0 0 4px rgba(235, 244, 255, 0.15);
}

html[data-theme="blueprint"] .section-nav-link.active .section-nav-avatar {
  background: none;
}

html[data-theme="blueprint"] .section-nav-label {
  font-family: var(--b-mono);
}

html[data-theme="blueprint"] .section-nav-link.active .section-nav-label {
  color: var(--b-text);
}

@media (min-width: 1024px) {
  html[data-theme="blueprint"] .section-nav-label {
    border: 1.5px solid var(--b-line);
    border-radius: 0;
    background: var(--b-paper-deep);
    color: var(--b-text);
    box-shadow: none;
  }
}

/* ---- Social ---- */
html[data-theme="blueprint"] .social-icon-link {
  background: transparent;
  border: 1.5px solid var(--b-line);
  box-shadow: 0 0 0 5px var(--b-paper), 0 0 0 6px var(--b-faint);
}

html[data-theme="blueprint"] .social-icon-link:hover {
  border-color: var(--b-pencil);
  box-shadow: 0 0 0 5px var(--b-paper), 0 0 0 6px var(--b-pencil);
}

html[data-theme="blueprint"] .social-icon-link .icon {
  color: var(--b-text);
}

html[data-theme="blueprint"] .social-icon-link:hover .icon {
  color: var(--b-pencil);
}

/* ---- Contact page ---- */
html[data-theme="blueprint"] .terminal-window {
  background: rgba(13, 53, 102, 0.82);
  backdrop-filter: none;
}

html[data-theme="blueprint"] .terminal-titlebar {
  background: transparent;
  border-bottom: 1.5px solid var(--b-line-soft);
}

html[data-theme="blueprint"] .terminal-titlebar .terminal-label,
html[data-theme="blueprint"] .terminal-log .line.system {
  color: var(--b-text);
}

html[data-theme="blueprint"] .terminal-log .line.user,
html[data-theme="blueprint"] .terminal-input-row .prompt,
html[data-theme="blueprint"] .terminal-input-wrap input,
html[data-theme="blueprint"] .terminal-input-wrap .fake-cursor {
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .terminal-input-row,
html[data-theme="blueprint"] .turnstile-wrap,
html[data-theme="blueprint"] .terminal-suggestions .box {
  background: rgba(235, 244, 255, 0.06);
  border-color: var(--b-line-soft);
}

html[data-theme="blueprint"] .terminal-suggestions .box-label {
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .terminal-suggestions .chip {
  border: 1px solid var(--b-line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--b-text);
}

html[data-theme="blueprint"] .simple-contact-title {
  font-family: var(--b-hand);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--b-text);
}

html[data-theme="blueprint"] .simple-contact-intro {
  color: var(--b-body);
}

/* ---- Estimator ---- */
html[data-theme="blueprint"] .estimate-bar {
  background: rgba(13, 53, 102, 0.95);
  border-bottom: 1.5px solid var(--b-line);
}

html[data-theme="blueprint"] .estimate-stat-label {
  font-family: var(--b-mono);
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .estimate-stat-value {
  font-family: var(--b-mono);
  color: var(--b-text);
  text-shadow: none;
}

html[data-theme="blueprint"] .breakdown-toggle {
  border: 1.5px solid var(--b-line-soft);
  border-radius: 0;
  font-family: var(--b-mono);
  color: var(--b-text);
}

html[data-theme="blueprint"] .breakdown-toggle:hover:not(:disabled) {
  color: var(--b-pencil);
  border-color: var(--b-pencil);
  background: transparent;
}

html[data-theme="blueprint"] .estimate-breakdown {
  background: rgba(0, 20, 50, 0.3);
}

html[data-theme="blueprint"] .breakdown-row,
html[data-theme="blueprint"] .breakdown-compare {
  color: var(--b-body);
}

html[data-theme="blueprint"] .breakdown-row-price,
html[data-theme="blueprint"] .breakdown-total {
  font-family: var(--b-mono);
  color: var(--b-text);
}

/* Breakdown dividers, which otherwise keep the neon purple */
html[data-theme="blueprint"] .estimate-breakdown,
html[data-theme="blueprint"] .breakdown-total,
html[data-theme="blueprint"] .breakdown-compare {
  border-top-color: var(--b-line-soft);
}

html[data-theme="blueprint"] .breakdown-compare strong {
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .estimator-header h1,
html[data-theme="blueprint"] .page-heading {
  font-family: var(--b-hand);
  font-weight: 400;
  background: none;
  color: var(--b-text);
  -webkit-text-fill-color: currentColor;
}

html[data-theme="blueprint"] .estimator-intro,
html[data-theme="blueprint"] .page-intro,
html[data-theme="blueprint"] .section-subtitle {
  color: var(--b-body);
}

html[data-theme="blueprint"] .section-title {
  font-family: var(--b-mono);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b-text);
}

html[data-theme="blueprint"] .option-btn {
  border: 1.5px solid var(--b-line-soft);
  border-radius: 0;
  background: var(--b-panel);
}

html[data-theme="blueprint"] .option-btn:hover {
  border-color: var(--b-line);
  background: rgba(25, 82, 145, 0.95);
}

html[data-theme="blueprint"] .option-btn.selected {
  border-color: var(--b-pencil);
  background: rgba(255, 209, 102, 0.1);
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.15);
}

html[data-theme="blueprint"] .option-btn .option-label {
  color: var(--b-text);
}

html[data-theme="blueprint"] .option-btn .option-price {
  font-family: var(--b-mono);
  color: var(--b-pencil);
}

html[data-theme="blueprint"] .option-btn .option-desc {
  color: var(--b-body);
}

html[data-theme="blueprint"] .option-btn .option-market {
  color: var(--b-muted);
}

html[data-theme="blueprint"] .contact-section {
  border: 1.5px solid var(--b-line);
  border-radius: 0;
  background: var(--b-panel);
}

/* ---- 404 ---- */
html[data-theme="blueprint"] .glitch-heading .code {
  font-family: var(--b-mono);
  color: transparent;
  -webkit-text-stroke: 2px var(--b-line);
  text-shadow: none;
  animation: none;
}

html[data-theme="blueprint"] .glitch-heading .code::before,
html[data-theme="blueprint"] .glitch-heading .code::after {
  display: none;
}

html[data-theme="blueprint"] .error-subtitle {
  font-family: var(--b-mono);
  color: var(--b-red);
  text-shadow: none;
  animation: none;
}

html[data-theme="blueprint"] .boot-terminal,
html[data-theme="blueprint"] .hud-badge {
  border: 1.5px solid var(--b-line);
  border-radius: 0;
  background: var(--b-panel);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="blueprint"] .boot-terminal .boot-line,
html[data-theme="blueprint"] .hud-badge .hud-label,
html[data-theme="blueprint"] .not-found .hint {
  color: var(--b-body);
}

html[data-theme="blueprint"] .planet-core {
  background: var(--b-paper-deep);
  border: 1.5px solid var(--b-line);
  box-shadow: none;
}

html[data-theme="blueprint"] .orbit-scene .orbit-ring {
  border-color: var(--b-line-soft);
}

/* ================================================================== */
/* PROFESSIONAL                                                         */
/* After the MJ Hub studio site: pure black, heavy tight-set headings,  */
/* muted grey copy, hairline dividers, white pill buttons and slow      */
/* eased reveals in place of the showier effects                        */
/* ================================================================== */
html[data-theme="professional"] {
  --p-bg: #000000;
  --p-surface: #0a0a0a;
  --p-surface-2: #111111;
  --p-surface-3: #1d1d1f;
  /* Panels let a little of the background photo through at the edges */
  --p-panel: rgba(10, 10, 10, 0.88);
  --p-panel-hover: rgba(17, 17, 17, 0.92);
  --p-text: #ffffff;
  --p-fg: #f5f5f7;
  --p-body: #a1a1a6;
  --p-muted: #86868b;
  --p-muted-dark: #3a3a3c;
  --p-line: rgba(255, 255, 255, 0.1);
  --p-line-strong: rgba(255, 255, 255, 0.15);
  --p-success: #30d158;
  --p-danger: #ff6b60;
  --p-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-wipe: cubic-bezier(0.77, 0, 0.18, 1);
  --p-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --p-alt-font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

html[data-theme="professional"] body {
  font-family: var(--p-font);
  color: var(--p-fg);
  background: var(--p-bg);
}

html[data-theme="professional"] ::selection {
  background: #fff;
  color: #000;
}

/* A darkened office photo (Unsplash, as on MJ Hub) pinned behind the page; the content scrolls
   over it. Sized to the largest viewport so it doesn't jump as mobile toolbars come and go. */
html[data-theme="professional"] .page-shell::before {
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100lvh;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.66) 45%, rgba(0, 0, 0, 0.88)),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=1800&h=1200&fit=crop&auto=format") center / cover no-repeat,
    var(--p-bg);
}

@media (max-width: 767px) {
  html[data-theme="professional"] .page-shell::before {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.66) 45%, rgba(0, 0, 0, 0.88)),
      url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&h=1600&fit=crop&auto=format") center / cover no-repeat,
      var(--p-bg);
  }
}

html[data-theme="professional"] .animated-bg,
html[data-theme="professional"] .cursor-glow,
html[data-theme="professional"] .scanline-overlay,
html[data-theme="professional"] .profile-photo-glow,
html[data-theme="professional"] .neon-cta .glow-backdrop {
  display: none;
}

/* Eyebrow: the small, widely tracked uppercase label MJ Hub sets above headings */
html[data-theme="professional"] .experience-badge .label,
html[data-theme="professional"] .section-header,
html[data-theme="professional"] .theme-picker-heading,
html[data-theme="professional"] .switch-offer-includes-label,
html[data-theme="professional"] .offer-progress-label,
html[data-theme="professional"] .timeline-date,
html[data-theme="professional"] .estimate-stat-label,
html[data-theme="professional"] .terminal-suggestions .box-label {
  font-family: var(--p-alt-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--p-muted);
}

/* ---- Picker ---- */
html[data-theme="professional"] .theme-picker-toggle {
  border: 1px solid var(--p-line-strong);
  background: var(--p-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

html[data-theme="professional"] .theme-picker-toggle:hover,
html[data-theme="professional"] .theme-picker.is-open .theme-picker-toggle {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

html[data-theme="professional"] .theme-picker-menu {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  background: rgba(12, 12, 12, 0.96);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
}

html[data-theme="professional"] .theme-option {
  color: var(--p-text);
  border-radius: 1rem;
}

html[data-theme="professional"] .theme-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="professional"] .theme-option[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="professional"] .theme-option[aria-pressed="true"]::after {
  border-color: #fff;
}

html[data-theme="professional"] .theme-option-name {
  font-weight: 800;
  letter-spacing: -0.01em;
}

html[data-theme="professional"] .theme-option-desc {
  font-family: var(--p-alt-font);
  color: var(--p-muted);
}

html[data-theme="professional"] .theme-picker-toggle:focus-visible,
html[data-theme="professional"] .theme-option:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* ---- Buttons: white pills with black text ---- */
html[data-theme="professional"] .btn-glow,
html[data-theme="professional"] .switch-btn-primary,
html[data-theme="professional"] .neon-cta-button {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 9999px;
  color: #000;
  font-family: var(--p-font);
  font-weight: 600;
  box-shadow: none;
  text-shadow: none;
  transform: none;
  transition: background 0.2s, transform 0.2s, outline-color 0.45s;
}

html[data-theme="professional"] .btn-glow:hover:not(:disabled),
html[data-theme="professional"] .switch-btn-primary:hover,
html[data-theme="professional"] .neon-cta-button:hover {
  background: var(--p-fg);
  box-shadow: none;
  transform: none;
}

html[data-theme="professional"] .btn-glow:active:not(:disabled),
html[data-theme="professional"] .switch-btn-primary:active,
html[data-theme="professional"] .neon-cta-button:active,
html[data-theme="professional"] .btn-pill:active {
  transform: scale(0.97);
}

html[data-theme="professional"] .btn-glow:disabled {
  background: var(--p-surface-3);
  border-color: var(--p-surface-3);
  color: var(--p-muted);
  opacity: 0.6;
}

html[data-theme="professional"] .neon-cta-button .icon,
html[data-theme="professional"] .neon-cta-button span {
  color: #000;
  text-shadow: none;
  filter: none;
}

html[data-theme="professional"] .neon-cta-button span {
  font-size: 1rem;
}

/* Secondary buttons: hairline outline pills */
html[data-theme="professional"] .btn-pill {
  border-radius: 9999px;
  border: 1px solid var(--p-line-strong);
  background: transparent;
  color: var(--p-fg);
  font-family: var(--p-font);
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

html[data-theme="professional"] .btn-pill:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: none;
  transform: none;
}
html[data-theme="professional"] .btn-pill.btn-pill--alt {
  color: var(--p-fg);
}

html[data-theme="professional"] .switch-btn:focus-visible,
html[data-theme="professional"] .btn-pill:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* Text links underline by drawing a hairline across */
html[data-theme="professional"] .back-link,
html[data-theme="professional"] .reset-link,
html[data-theme="professional"] .site-link-row a {
  color: var(--p-fg);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color 0.2s, background-size 0.3s var(--p-ease);
}

html[data-theme="professional"] .back-link:hover,
html[data-theme="professional"] .reset-link:hover,
html[data-theme="professional"] .site-link-row a:hover,
html[data-theme="professional"] .site-link-row a:focus-visible {
  color: #fff;
  background-size: 100% 1px;
  text-decoration: none;
  text-shadow: none;
  animation: none;
}

/* Site names are the entry titles, so they're set like the other headings */
html[data-theme="professional"] .site-link-row a {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}

/* ---- Form fields ---- */
html[data-theme="professional"] .simple-field label {
  font-family: var(--p-alt-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--p-muted);
}

html[data-theme="professional"] .simple-field input,
html[data-theme="professional"] .simple-field textarea {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--p-alt-font);
  transition: border-color 0.2s, background 0.2s;
}

html[data-theme="professional"] .simple-field input::placeholder,
html[data-theme="professional"] .simple-field textarea::placeholder {
  color: var(--p-muted-dark);
}

html[data-theme="professional"] .simple-field input:focus,
html[data-theme="professional"] .simple-field textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html[data-theme="professional"] .simple-status {
  font-family: var(--p-alt-font);
}

html[data-theme="professional"] .simple-status.system { color: var(--p-fg); background: rgba(255, 255, 255, 0.06); }
html[data-theme="professional"] .simple-status.success { color: var(--p-success); background: rgba(48, 209, 88, 0.1); }
html[data-theme="professional"] .simple-status.error { color: var(--p-danger); background: rgba(255, 107, 96, 0.1); }

/* ---- Profile header ---- */
html[data-theme="professional"] .profile-photo-ring {
  background: var(--p-surface-3);
  box-shadow: 0 0 0 1px var(--p-line);
}

html[data-theme="professional"] .profile-photo-ring:hover {
  box-shadow: 0 0 0 1px var(--p-line-strong);
}

html[data-theme="professional"] .profile-photo-mask {
  background: var(--p-surface-3);
}

html[data-theme="professional"] .experience-badge {
  border: 1px solid var(--p-line-strong);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="professional"] .experience-badge .value {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

html[data-theme="professional"] .profile-name {
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  background: none;
  color: #fff;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

html[data-theme="professional"].fx .profile-name.is-intro {
  animation: pro-rise 0.9s var(--p-ease) both;
}

@keyframes pro-rise {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}

html[data-theme="professional"] .profile-title {
  color: var(--p-muted);
  font-weight: 500;
}

/* ---- Call to action ---- */
/* No power-on flicker (home.js): the title, subtitle and button fade up in turn once shown */
html[data-theme="professional"] .neon-cta-content {
  transition: none;
}

html[data-theme="professional"].fx .neon-cta-content.visible > * {
  animation: pro-rise 0.9s var(--p-ease) both;
}

html[data-theme="professional"].fx .neon-cta-content.visible > :nth-child(2) { animation-delay: 0.12s; }
html[data-theme="professional"].fx .neon-cta-content.visible > :nth-child(3) { animation-delay: 0.24s; }

html[data-theme="professional"] .neon-title,
html[data-theme="professional"] .neon-title.flicker {
  font-size: 3rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: none;
  animation: none;
}

@media (min-width: 768px) {
  html[data-theme="professional"] .neon-title,
  html[data-theme="professional"] .neon-title.flicker { font-size: 4.5rem; }
}

html[data-theme="professional"] .neon-subtitle,
html[data-theme="professional"] .neon-subtitle.flicker {
  color: var(--p-muted);
  text-shadow: none;
  animation: none;
}

/* ---- Switch offer card ---- */
html[data-theme="professional"] .switch-offer {
  background: var(--p-panel);
  border: 1px solid var(--p-line);
  border-radius: 0;
  box-shadow: none;
  transition: background 0.3s;
}

html[data-theme="professional"] .switch-offer:hover {
  background: var(--p-panel-hover);
}

html[data-theme="professional"] .switch-offer::before {
  display: none;
}

html[data-theme="professional"] .platform-pill,
html[data-theme="professional"] .feature-pill {
  border: 1px solid var(--p-line-strong);
  border-radius: 9999px;
  background: transparent;
  color: var(--p-muted);
  font-family: var(--p-alt-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-shadow: none;
  box-shadow: none;
}

html[data-theme="professional"] .switch-offer-title {
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-shadow: none;
}

html[data-theme="professional"] .switch-offer-text {
  color: var(--p-body);
}

html[data-theme="professional"] .switch-offer-text strong,
html[data-theme="professional"].fx .switch-offer-text strong {
  color: #fff;
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

html[data-theme="professional"] .offer-progress-count strong {
  color: #fff;
  font-weight: 900;
  text-shadow: none;
}

html[data-theme="professional"] .offer-progress-track {
  border: none;
  border-radius: 0;
  height: 1px;
  background: var(--p-line-strong);
  box-shadow: none;
}

html[data-theme="professional"] .offer-progress-fill {
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  animation: none;
}

html[data-theme="professional"] .offer-progress-fill.is-counting {
  transition: width 1.4s var(--p-ease-wipe);
}

html[data-theme="professional"] .offer-progress-note {
  font-family: var(--p-alt-font);
  color: var(--p-muted);
}

/* ---- Bio as an intro statement ---- */
html[data-theme="professional"] .terminal-box {
  background: transparent;
  border: none;
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="professional"] .terminal-box .prompt-line {
  font-family: var(--p-font);
  font-size: 1.125rem;
  line-height: 1.625;
}

html[data-theme="professional"] .terminal-box .prompt-arrow {
  display: none;
}

html[data-theme="professional"] .terminal-box .typed-text {
  color: var(--p-body);
}

html[data-theme="professional"] .terminal-box .cursor {
  color: #fff;
}

/* ---- Content sections: flat panels split by hairlines ---- */
html[data-theme="professional"] .content-section {
  border: 1px solid var(--p-line);
  border-radius: 0;
  background: var(--p-panel);
  backdrop-filter: none;
  box-shadow: none;
  transition: background 0.3s;
}

html[data-theme="professional"] .content-section:hover {
  background: var(--p-panel-hover);
  box-shadow: none;
}

/* Section titles read as an eyebrow label (see above) */
html[data-theme="professional"] .section-header {
  padding: 2rem 2rem 0;
  background: none;
  border-bottom: none;
}

html[data-theme="professional"] .section-header .icon {
  display: none;
}

html[data-theme="professional"] .section-body {
  padding: 1.5rem 2rem 2rem;
  color: var(--p-body);
}

@media (min-width: 768px) {
  html[data-theme="professional"] .section-header { padding: 3rem 3.5rem 0; }
  html[data-theme="professional"] .section-body { padding: 2rem 3.5rem 3.5rem; }
}

html[data-theme="professional"].fx .content-section.is-powering {
  animation: none;
}

html[data-theme="professional"].fx .section-header.is-powering {
  animation: pro-rise 0.9s var(--p-ease) both;
}

html[data-theme="professional"] .type-cursor {
  display: none;
}

/* ---- Website highlights ---- */
html[data-theme="professional"] .site-intro {
  border-bottom: 1px solid var(--p-line);
}

html[data-theme="professional"] .site-intro p,
html[data-theme="professional"] .site-entry p,
html[data-theme="professional"] .project-entry p,
html[data-theme="professional"] .timeline-entry ul {
  color: var(--p-body);
  line-height: 1.625;
}

html[data-theme="professional"] .site-intro .site-legend {
  font-family: var(--p-alt-font);
  color: var(--p-muted);
}

html[data-theme="professional"] .site-dot.live {
  background: var(--p-success);
  box-shadow: none;
}

html[data-theme="professional"] .site-dot.retired {
  background: var(--p-muted-dark);
  box-shadow: none;
}

html[data-theme="professional"] .site-shot {
  border: 1px solid var(--p-line);
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="professional"] .site-shot:hover {
  border-color: var(--p-line-strong);
  box-shadow: none;
}

html[data-theme="professional"] .site-shot-glare {
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%);
}

/* Reveal: the screenshot wipes in left to right while settling from a slight zoom */
html[data-theme="professional"].fx .site-shot::after {
  display: none;
}

html[data-theme="professional"].fx .site-shot .site-screenshot {
  animation: none;
  opacity: 0.5;
  clip-path: inset(0 100% 0 0);
  transform: scale(1.15);
  filter: none;
  transition: clip-path 1.6s var(--p-ease-wipe), transform 2.2s var(--p-ease), opacity 1.6s var(--p-ease);
}

html[data-theme="professional"].fx .site-shot.is-revealed .site-screenshot {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* ---- Projects + timeline ---- */
html[data-theme="professional"] .site-entry h3,
html[data-theme="professional"] .project-entry h3,
html[data-theme="professional"] .timeline-entry h3 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

html[data-theme="professional"] .project-entry .project-title-row .icon {
  color: var(--p-muted);
}

html[data-theme="professional"] .timeline-skills img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.5s, opacity 0.5s;
}

html[data-theme="professional"] .timeline-entry:hover .timeline-skills img {
  filter: grayscale(0);
  opacity: 1;
}

html[data-theme="professional"] .timeline::before,
html[data-theme="professional"].fx .timeline::before {
  background: var(--p-line-strong);
  box-shadow: none;
}

html[data-theme="professional"] .timeline-dot,
html[data-theme="professional"].fx .timeline-dot {
  background: var(--p-bg);
  border: 1px solid var(--p-line-strong);
  box-shadow: none;
}

html[data-theme="professional"]:not(.fx) .timeline-dot,
html[data-theme="professional"].fx .timeline-entry.is-lit .timeline-dot {
  background: #fff;
  border-color: #fff;
  box-shadow: none;
}

html[data-theme="professional"] .timeline-date {
  letter-spacing: 0.1em;
}

/* Entries fade up on MJ Hub's long ease */
html[data-theme="professional"].fx .site-entry,
html[data-theme="professional"].fx .project-entry,
html[data-theme="professional"].fx .timeline-entry {
  transition-duration: 0.9s;
  transition-timing-function: var(--p-ease);
}

/* ---- Section nav ---- */
html[data-theme="professional"] .section-nav {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: none;
}

@media (min-width: 1024px) {
  html[data-theme="professional"] .section-nav {
    border-left: none;
  }
}

@media (max-width: 1023px) {
  html[data-theme="professional"] .section-nav {
    border-width: 1px 0 0;
    box-shadow: none;
  }
}

html[data-theme="professional"] .section-nav-link {
  color: var(--p-muted);
}

html[data-theme="professional"] .section-nav-link .icon {
  border: 1px solid var(--p-line-strong);
  background: transparent;
}

html[data-theme="professional"] .section-nav-link:hover .icon,
html[data-theme="professional"] .section-nav-link:focus-visible .icon {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

html[data-theme="professional"] .section-nav-link.active .icon {
  color: #000;
  border-color: #fff;
  background: #fff;
  box-shadow: none;
}

html[data-theme="professional"] .section-nav-label {
  font-family: var(--p-alt-font);
  letter-spacing: 0.22em;
}

html[data-theme="professional"] .section-nav-link.active .section-nav-label {
  color: #fff;
}

@media (min-width: 1024px) {
  html[data-theme="professional"] .section-nav-label {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    background: rgba(12, 12, 12, 0.96);
    color: var(--p-fg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}

/* ---- Social ---- */
html[data-theme="professional"] .social-icon-link {
  background: transparent;
  border: 1px solid var(--p-line-strong);
  box-shadow: none;
  transition: border-color 0.2s, background 0.2s;
}

html[data-theme="professional"] .social-icon-link:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

html[data-theme="professional"] .social-icon-link .icon {
  color: var(--p-muted);
}

html[data-theme="professional"] .social-icon-link:hover .icon {
  color: #fff;
}

/* ---- Contact page ---- */
html[data-theme="professional"] .terminal-window {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  background: rgba(12, 12, 12, 0.96);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}

html[data-theme="professional"] .terminal-titlebar {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="professional"] .terminal-titlebar .terminal-label,
html[data-theme="professional"] .terminal-log .line.system {
  color: var(--p-body);
}

html[data-theme="professional"] .terminal-log .line.user,
html[data-theme="professional"] .terminal-input-row .prompt,
html[data-theme="professional"] .terminal-input-wrap input,
html[data-theme="professional"] .terminal-input-wrap .fake-cursor {
  color: #fff;
}

html[data-theme="professional"] .terminal-input-wrap input::placeholder {
  color: var(--p-muted-dark);
}

html[data-theme="professional"] .terminal-log .line.error { color: var(--p-danger); }
html[data-theme="professional"] .terminal-log .line.success { color: var(--p-success); }

html[data-theme="professional"] .terminal-input-row,
html[data-theme="professional"] .turnstile-wrap {
  background: rgba(255, 255, 255, 0.03);
}

html[data-theme="professional"] .terminal-suggestions .box {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="professional"] .terminal-suggestions .chip {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  background: transparent;
  color: var(--p-muted);
  font-family: var(--p-alt-font);
  font-weight: 600;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

html[data-theme="professional"] .terminal-suggestions .chip:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

html[data-theme="professional"] .simple-contact-title {
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.025em;
}

html[data-theme="professional"] .simple-contact-intro {
  color: var(--p-muted);
}

/* ---- Estimator ---- */
html[data-theme="professional"] .estimate-bar {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html[data-theme="professional"] .estimate-stat-value {
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-shadow: none;
}

html[data-theme="professional"] .breakdown-toggle {
  border: 1px solid var(--p-line-strong);
  border-radius: 9999px;
  color: var(--p-fg);
}

html[data-theme="professional"] .breakdown-toggle:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="professional"] .estimate-breakdown {
  background: var(--p-surface);
}

html[data-theme="professional"] .breakdown-row,
html[data-theme="professional"] .breakdown-compare {
  color: var(--p-body);
}

html[data-theme="professional"] .breakdown-row-price,
html[data-theme="professional"] .breakdown-total {
  color: #fff;
}

/* Breakdown dividers, which otherwise keep the neon purple */
html[data-theme="professional"] .estimate-breakdown,
html[data-theme="professional"] .breakdown-total,
html[data-theme="professional"] .breakdown-compare {
  border-top-color: var(--p-line);
}

html[data-theme="professional"] .breakdown-compare strong {
  color: var(--p-success);
}

html[data-theme="professional"] .estimator-header h1,
html[data-theme="professional"] .page-heading {
  background: none;
  color: #fff;
  -webkit-text-fill-color: currentColor;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

html[data-theme="professional"] .estimator-intro,
html[data-theme="professional"] .page-intro,
html[data-theme="professional"] .section-subtitle {
  color: var(--p-muted);
}

html[data-theme="professional"] .section-title {
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.025em;
}

html[data-theme="professional"] .option-btn {
  border: 1px solid var(--p-line);
  border-radius: 0;
  background: var(--p-surface);
  box-shadow: none;
  transition: background 0.3s, border-color 0.2s;
}

html[data-theme="professional"] .option-btn:hover {
  border-color: var(--p-line-strong);
  background: var(--p-surface-2);
  box-shadow: none;
}

html[data-theme="professional"] .option-btn.selected {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html[data-theme="professional"] .option-btn .option-label {
  color: #fff;
  font-weight: 800;
}

html[data-theme="professional"] .option-btn .option-price {
  color: #fff;
  font-weight: 600;
}

html[data-theme="professional"] .option-btn .option-desc {
  color: var(--p-body);
}

html[data-theme="professional"] .option-btn .option-market {
  font-family: var(--p-alt-font);
  color: var(--p-muted);
}

html[data-theme="professional"] .contact-section {
  border: 1px solid var(--p-line);
  border-radius: 0;
  background: var(--p-surface);
  box-shadow: none;
}

/* ---- 404 ---- */
html[data-theme="professional"] .glitch-heading .code {
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow: none;
  animation: none;
}

html[data-theme="professional"] .glitch-heading .code::before,
html[data-theme="professional"] .glitch-heading .code::after {
  display: none;
}

html[data-theme="professional"] .error-subtitle {
  color: var(--p-muted);
  text-shadow: none;
  animation: none;
}

html[data-theme="professional"] .boot-terminal,
html[data-theme="professional"] .hud-badge {
  border: 1px solid var(--p-line);
  border-radius: 0;
  background: var(--p-surface);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="professional"] .boot-terminal .boot-line,
html[data-theme="professional"] .hud-badge .hud-label,
html[data-theme="professional"] .not-found .hint,
html[data-theme="professional"] .satellite {
  color: var(--p-body);
}

html[data-theme="professional"] .telemetry {
  color: var(--p-muted);
}

html[data-theme="professional"] .boot-terminal .boot-line.is-error .line-text,
html[data-theme="professional"] .hud-badge .hud-value { color: var(--p-danger); }
html[data-theme="professional"] .boot-terminal .boot-line.is-ok .line-text { color: var(--p-success); }

html[data-theme="professional"] .planet-core {
  background: radial-gradient(circle at 35% 35%, #f5f5f7, #86868b 70%);
  box-shadow: none;
}

html[data-theme="professional"] .orbit-scene .orbit-ring {
  border-color: var(--p-line-strong);
}

/* ---- Headshot in place of the cartoon ---- */
/* The <img> keeps the cartoon for the other themes; here its own picture is pushed out of the box
   and the headshot is drawn as its background instead */
html[data-theme="professional"] .profile-photo-mask img,
html[data-theme="professional"] .section-nav-link .icon.section-nav-avatar,
html[data-theme="professional"] .section-nav-link.active .icon.section-nav-avatar {
  background: url("../professional_profile_photo.jpg") center / cover no-repeat;
  object-position: -99999px 0;
}

/* ---- Text straight on the photo ---- */
/* Panels keep the muted grey, but out on the photo it can land on a bright window, so copy there
   is lifted to a light grey and given a soft shadow to separate it from the picture */
html[data-theme="professional"] {
  --p-on-photo: #d2d2d7;
  --p-photo-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 0, 0, 0.55);
}

html[data-theme="professional"] .profile-name,
html[data-theme="professional"] .neon-title,
html[data-theme="professional"] .neon-title.flicker,
html[data-theme="professional"] .bio-statement {
  text-shadow: var(--p-photo-shadow);
}

html[data-theme="professional"] .profile-title,
html[data-theme="professional"] .neon-subtitle,
html[data-theme="professional"] .neon-subtitle.flicker,
html[data-theme="professional"] .experience-badge .label,
html[data-theme="professional"] .estimator-intro,
html[data-theme="professional"] .page-intro,
html[data-theme="professional"] .simple-contact-intro {
  color: var(--p-on-photo);
  text-shadow: var(--p-photo-shadow);
}

/* Outline pills and the experience badge get a dark glass fill so their labels never sit on the photo */
html[data-theme="professional"] .btn-pill,
html[data-theme="professional"] .experience-badge,
html[data-theme="professional"] .social-icon-link {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.25);
}

html[data-theme="professional"] .btn-pill:hover,
html[data-theme="professional"] .social-icon-link:hover {
  background: rgba(40, 40, 40, 0.75);
}

html[data-theme="professional"] .social-icon-link .icon {
  color: var(--p-on-photo);
}

/* Bio hairlines and carousel bars are brighter so they still read against the picture */
html[data-theme="professional"] .terminal-box {
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="professional"] .bio-bar::before {
  background: rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="professional"] .timeline-skills img {
    transition: none;
  }
}

/* ================================================================== */
/* BIO MODES (typewriter.js)                                            */
/* Neon keeps the terminal prompt; graffiti and blueprint swap it for   */
/* a stage that typewriter.js fills, flagged with data-bio on the box   */
/* ================================================================== */
.bio-stage {
  display: none;
}

.terminal-box[data-bio="graffiti"] .prompt-line,
.terminal-box[data-bio="blueprint"] .prompt-line,
.terminal-box[data-bio="professional"] .prompt-line {
  display: none;
}

.terminal-box[data-bio="graffiti"] .bio-stage,
.terminal-box[data-bio="blueprint"] .bio-stage,
.terminal-box[data-bio="professional"] .bio-stage {
  display: grid;
  position: relative;
}

/* ---- Professional: the statements crossfade above a row of hairline progress bars ---- */
.terminal-box[data-bio="professional"] .bio-stage {
  gap: 1rem;
}

.bio-statement {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--p-fg);
}

@media (min-width: 768px) {
  .bio-statement { font-size: 1.25rem; }
}

/* Reduced motion: all three listed, the first leading in white */
.bio-stage.is-static .bio-statement:not(:first-child) {
  color: var(--p-body);
}

/* Every statement shares one grid cell, so the box is always as tall as the longest */
.bio-stage.is-carousel .bio-statement {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s var(--p-ease), transform 0.9s var(--p-ease);
  pointer-events: none;
}

.bio-stage.is-carousel .bio-statement.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s; /* lets the outgoing statement clear first */
  pointer-events: auto;
}

.bio-bars {
  grid-area: 2 / 1;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Tall hit area around a 1px line */
.bio-bar {
  position: relative;
  flex: 0 0 2.5rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: none;
}

.bio-bar::before,
.bio-bar-fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.bio-bar::before {
  background: var(--p-line-strong);
}

.bio-bar-fill {
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.bio-bar.is-active .bio-bar-fill {
  animation: bio-bar-fill 7s linear forwards;
}

.bio-bar:hover::before {
  background: rgba(255, 255, 255, 0.4);
}

.bio-bar:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* Hovering with a mouse, or tabbing onto a bar, holds the current statement. Tapping a bar
   leaves neither behind, so on touch the carousel carries on from the chosen statement. */
@media (hover: hover) {
  .terminal-box:hover .bio-bar-fill {
    animation-play-state: paused;
  }
}

.terminal-box:has(:focus-visible) .bio-bar-fill {
  animation-play-state: paused;
}

@keyframes bio-bar-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Graffiti: tag, hold, buff, repeat ---- */
/* A patch of rendered wall rather than a dashed terminal box */
html[data-theme="graffiti"] .terminal-box[data-bio="graffiti"] {
  border: 3px solid var(--g-ink);
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.035) 0 2px, transparent 3px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.25) 0 1.5px, transparent 2.5px) 0 0 / 17px 21px,
    #272325;
  box-shadow: 7px 7px 0 var(--g-lime);
}

.bio-tag {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
  font-family: var(--g-marker);
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--paint, var(--g-pink));
  text-shadow: 2px 2px 0 var(--g-ink);
}

.bio-tag.is-active {
  visibility: visible;
}

.bio-word {
  display: inline-block;
}

/* Words are written on by wiping them in left to right behind the marker */
.bio-stage:not(.is-static) .bio-word {
  clip-path: inset(-25% 100% -25% 0);
  transition: clip-path 0.12s linear;
}

.bio-stage:not(.is-static) .bio-word.is-on {
  clip-path: inset(-25% -10% -25% -10%);
}

/* Reduced motion: every statement, stacked and finished */
.bio-stage.is-static {
  gap: 0.75rem;
}

.bio-stage.is-static .bio-tag {
  grid-area: auto;
  visibility: visible;
}

.bio-stage.is-static .bio-tag:nth-child(2) { color: var(--g-yellow); }
.bio-stage.is-static .bio-tag:nth-child(3) { color: var(--g-cyan); }

/* Fat marker that rides along the end of the line being written */
.bio-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.85rem;
  height: 2.6rem;
  margin: -1.2rem 0 0 -0.1rem;
  border: 2px solid var(--g-ink);
  border-radius: 0.2rem 0.2rem 0.35rem 0.35rem;
  background:
    linear-gradient(var(--paint, var(--g-pink)) 0 30%, var(--g-cream) 30% 36%, #1d1a1b 36%);
  transform-origin: 50% 100%;
  transform: rotate(28deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.11s linear, opacity 0.3s ease;
}

.bio-marker.is-writing {
  opacity: 1;
}

/* Council-grey buff rolled over the piece, ghosting the old text */
.bio-buff {
  position: absolute;
  inset: -0.6rem -0.8rem;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 7px, transparent 7px 15px),
    #4a4547;
  opacity: 0.9;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

.bio-roller {
  position: absolute;
  top: -1.1rem;
  bottom: -1.1rem;
  left: -0.8rem;
  z-index: 2;
  width: 1rem;
  margin-left: -0.5rem;
  border: 2px solid var(--g-ink);
  border-radius: 0.35rem;
  background: repeating-linear-gradient(0deg, #5a5457 0 4px, #4a4547 4px 8px);
  opacity: 0;
  pointer-events: none;
}

.bio-stage.is-buffing .bio-buff {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.45, 0, 0.55, 1);
}

.bio-stage.is-buffing .bio-roller {
  left: calc(100% + 0.8rem);
  opacity: 1;
  transition: left 0.9s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.15s ease;
}

.bio-stage.is-buffed .bio-buff,
.bio-stage.is-buffed .bio-roller,
.bio-stage.is-buffed .bio-tag.is-active {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ---- Blueprint: general notes, ruled then lettered ---- */
html[data-theme="blueprint"] .terminal-box::before {
  content: "GENERAL NOTES";
}

.bio-notes {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bio-notes li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  font-family: var(--b-hand);
  font-size: 1.05rem;
  line-height: 1.7rem;
  color: var(--b-text);
}

/* Lettering guide lines ruled under each note before it's written */
.bio-notes li::before {
  content: "";
  position: absolute;
  inset: 0 0 0 2rem;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(1.7rem - 1px), rgba(235, 244, 255, 0.2) calc(1.7rem - 1px) 1.7rem);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.bio-notes li.is-ruled::before,
.bio-stage.is-static .bio-notes li::before {
  transform: none;
}

.bio-note-num {
  font-family: var(--b-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--b-pencil);
}

.bio-pen {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  margin: 0.4rem 0 0 -0.2rem;
  border: 1.5px solid var(--b-pencil);
  border-radius: 50%;
  background:
    linear-gradient(var(--b-pencil), var(--b-pencil)) center / 100% 1px no-repeat,
    linear-gradient(var(--b-pencil), var(--b-pencil)) center / 1px 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.12s linear, opacity 0.3s ease;
}

.bio-pen.is-writing {
  opacity: 1;
}

/* ================================================================== */
/* HEADING LETTERS (effects.js)                                         */
/* ================================================================== */
.heading-word {
  display: inline-block;
  white-space: nowrap;
}

.heading-char {
  display: inline-block;
}

/* Graffiti: each letter sprayed through a stencil once the stripe is rolled on */
html[data-theme="graffiti"].fx .section-header.is-powering .heading-char {
  animation: stencil-spray 0.4s ease-out both;
  animation-delay: calc(0.5s + var(--i) * 0.045s);
}

@keyframes stencil-spray {
  0% { opacity: 0; transform: scale(1.35); filter: blur(5px); text-shadow: 0 0 10px rgba(13, 13, 13, 0.7); }
  60% { opacity: 1; filter: blur(0.6px); }
  100% { opacity: 1; transform: none; filter: none; text-shadow: none; }
}

/* Blueprint: a guide line is ruled under the label, then the letters are plotted onto it */
html[data-theme="blueprint"] .section-header > span {
  padding-bottom: 2px;
  background: linear-gradient(var(--b-line-soft), var(--b-line-soft)) 0 100% / 100% 1px no-repeat;
}

html[data-theme="blueprint"].fx .section-header > span {
  background-size: 0 1px;
}

html[data-theme="blueprint"].fx .section-header.is-powering > span {
  animation: guide-rule 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s both;
}

@keyframes guide-rule {
  from { background-size: 0 1px; }
  to { background-size: 100% 1px; }
}

html[data-theme="blueprint"].fx .section-header.is-powering .heading-char {
  animation: plot-letter 0.18s linear both;
  animation-delay: calc(0.35s + var(--i) * 0.035s);
}

/* ================================================================== */
/* COOKIE CONSENT PANEL + FOOTER (consent.css)                          */
/* Each theme sets the panel tokens; its buttons are already themed     */
/* through btn-glow and btn-pill                                        */
/* ================================================================== */
html[data-theme="graffiti"] {
  --cc-bg: var(--g-cream);
  --cc-text: var(--g-ink);
  --cc-muted: rgba(13, 13, 13, 0.75);
  --cc-border: var(--g-ink);
  --cc-card-bg: #fffaf0;
  --cc-card-border: var(--g-ink);
  --cc-accent: var(--g-pink);
  --cc-knob: var(--g-cream);
  --cc-radius: 14px;
  --cc-card-radius: var(--g-rough-lg);
  --cc-shadow: 0 -6px 0 var(--g-pink), 0 -10px 30px rgba(0, 0, 0, 0.5);
  --cc-heading-font: var(--g-marker);
  --cc-heading-weight: 400;
  --cc-link: var(--g-cyan);
}

/* The panel is cream paper, so its link needs a darker ink than the cyan used on the wall */
html[data-theme="graffiti"] .cc-policy {
  color: #0b6e70;
}

html[data-theme="graffiti"] .cc-sheet {
  border-top-width: 3px;
}

html[data-theme="graffiti"] .cc-card {
  border-width: 2px;
  box-shadow: 3px 3px 0 var(--g-ink);
}

html[data-theme="graffiti"] .site-footer {
  font-family: var(--g-marker);
}

html[data-theme="blueprint"] {
  --cc-bg: rgba(13, 53, 102, 0.98);
  --cc-text: var(--b-text);
  --cc-muted: var(--b-body);
  --cc-border: var(--b-line);
  --cc-card-bg: rgba(235, 244, 255, 0.05);
  --cc-card-border: var(--b-line-soft);
  --cc-accent: var(--b-pencil);
  --cc-knob: var(--b-paper-deep);
  --cc-radius: 0;
  --cc-card-radius: 0;
  --cc-shadow: 0 -8px 30px rgba(0, 10, 30, 0.5);
  --cc-font: var(--b-sans);
  --cc-heading-font: var(--b-mono);
  --cc-heading-weight: 600;
  --cc-link: var(--b-pencil);
}

html[data-theme="blueprint"] .cc-sheet {
  border-top-width: 1.5px;
}

html[data-theme="blueprint"] .cc-title,
html[data-theme="blueprint"] .site-footer {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="blueprint"] .site-footer {
  font-family: var(--b-mono);
}

html[data-theme="blueprint"] .cc-switch-track {
  border-radius: 0;
}

html[data-theme="blueprint"] .cc-switch-track::after {
  border-radius: 0;
}

html[data-theme="professional"] {
  --cc-bg: rgba(12, 12, 12, 0.97);
  --cc-text: #fff;
  --cc-muted: var(--p-body);
  --cc-border: rgba(255, 255, 255, 0.12);
  --cc-card-bg: rgba(255, 255, 255, 0.03);
  --cc-card-border: var(--p-line);
  --cc-accent: #fff;
  --cc-knob: #000;
  --cc-radius: 1.5rem;
  --cc-card-radius: 0;
  --cc-shadow: 0 -24px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --cc-font: var(--p-font);
  --cc-heading-font: var(--p-font);
  --cc-heading-weight: 900;
  --cc-link: var(--p-on-photo);
}

html[data-theme="professional"] .cc-title {
  letter-spacing: -0.025em;
}

html[data-theme="professional"] .cc-card-title {
  font-weight: 800;
}

html[data-theme="professional"] .cc-switch input:not(:checked) + .cc-switch-track::after {
  background: var(--p-muted);
}

html[data-theme="professional"] .site-footer {
  font-family: var(--p-alt-font);
  text-shadow: var(--p-photo-shadow);
}

/* In the consent panel every graffiti button gets the same plain shadow, so the pink overspray
   on btn-pill never makes "Accept all" stand out more than "Reject all" */
html[data-theme="graffiti"] .cc-actions .cc-btn {
  box-shadow: 5px 5px 0 var(--g-ink);
}

html[data-theme="graffiti"] .cc-actions .cc-btn:hover {
  box-shadow: 7px 7px 0 var(--g-ink);
}