/* ==========================================================================
   Sketch / mockup theme  —  [data-theme="sketch"]
   Purely additive: every selector is scoped, so this file is inert unless
   the sketch mode is active. Deleting the file cleanly removes the theme.
   ========================================================================== */

[data-theme="sketch"] {
  --paper:        #F6F3EA;
  --paper-card:   #FBF9F3;
  --graphite:     #2F2D29;
  --graphite-mid: #5C584F;
  --graphite-lt:  #918C81;
  --rule:         rgba(120, 140, 170, 0.09);
  --pencil-blue:  #3D6B9E;
  --pencil-pink:  #D98BA4;
  --hatch:        repeating-linear-gradient(45deg, transparent 0 6px, rgba(61,107,158,0.10) 6px 7px);
  --hatch-dense:  repeating-linear-gradient(45deg, transparent 0 4px, rgba(61,107,158,0.16) 4px 5px);

  /* neutralise the colour system the other themes rely on */
  --md-primary: var(--pencil-blue);
  --md-secondary: var(--pencil-blue);
  --md-tertiary: var(--pencil-pink);
  --md-on-primary: var(--paper);
  --md-primary-container: transparent;
  --md-surface: var(--paper);
  --md-surface-variant: var(--paper-card);
  --md-on-surface: var(--graphite);
  --md-on-surface-variant: var(--graphite-mid);
  --md-outline: var(--graphite-lt);
  --md-shadow: none;
  --md-shadow-lg: none;
  --md-shadow-xl: none;
  --section-alt-bg: var(--paper);
  --pride-gradient: none;
  --pride-gradient-soft: none;
  --pride-gradient-text: none;
  --pride-gradient-cta: none;
}

/* ---------- paper ground ---------------------------------------------- */
[data-theme="sketch"] body {
  font-family: 'Kalam', cursive;
  font-weight: 300;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  color: var(--graphite);
}

[data-theme="sketch"] .hero-title,
[data-theme="sketch"] .section-title,
[data-theme="sketch"] .case-title,
[data-theme="sketch"] .project-title,
[data-theme="sketch"] .timeline-title,
[data-theme="sketch"] .subsection-title,
[data-theme="sketch"] .section-label,
[data-theme="sketch"] .stat-number,
[data-theme="sketch"] .btn,
[data-theme="sketch"] .logo-text,
[data-theme="sketch"] .contact h2,
[data-theme="sketch"] .contact-link,
[data-theme="sketch"] .skill-card h3,
[data-theme="sketch"] .edu-degree,
[data-theme="sketch"] .volunteer-content h3,
[data-theme="sketch"] .cert-info h4,
[data-theme="sketch"] .floating-stat-number,
[data-theme="sketch"] .case-metric-value {
  font-family: 'Architects Daughter', cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* ---------- kill the colour-era motion & atmosphere -------------------- */
[data-theme="sketch"] .hero::before,
[data-theme="sketch"] .bg-shapes,
[data-theme="sketch"] .about::before,
[data-theme="sketch"] .contact::before {
  display: none !important;
}

[data-theme="sketch"] *,
[data-theme="sketch"] *::before,
[data-theme="sketch"] *::after {
  animation: none !important;
  text-shadow: none !important;
}

[data-theme="sketch"] .hero-badge,
[data-theme="sketch"] .skill-card,
[data-theme="sketch"] .cert-card,
[data-theme="sketch"] .edu-card,
[data-theme="sketch"] .case-card,
[data-theme="sketch"] .project-card,
[data-theme="sketch"] .timeline-content,
[data-theme="sketch"] .volunteer-card,
[data-theme="sketch"] .floating-card,
[data-theme="sketch"] .highlight-card,
[data-theme="sketch"] .contact-link,
[data-theme="sketch"] .carousel-arrow,
[data-theme="sketch"] .btn {
  box-shadow: none !important;
}

/* ---------- hand-drawn box primitives ---------------------------------- */
[data-theme="sketch"] .skill-card,
[data-theme="sketch"] .cert-card,
[data-theme="sketch"] .edu-card,
[data-theme="sketch"] .volunteer-card,
[data-theme="sketch"] .timeline-content,
[data-theme="sketch"] .case-card,
[data-theme="sketch"] .project-card,
[data-theme="sketch"] .floating-card {
  background: var(--paper-card) !important;
  border: 2px solid var(--graphite) !important;
  border-radius: 14px 22px 16px 20px / 20px 14px 22px 16px !important;
  filter: url(#sketch-wobble);
}

[data-theme="sketch"] .skill-card:hover,
[data-theme="sketch"] .cert-card:hover,
[data-theme="sketch"] .edu-card:hover,
[data-theme="sketch"] .volunteer-card:hover,
[data-theme="sketch"] .case-card:hover,
[data-theme="sketch"] .project-card:hover,
[data-theme="sketch"] .timeline-content:hover {
  background: var(--paper-card) !important;
  border-color: var(--pencil-blue) !important;
  transform: translateY(-3px) !important;
}

/* ---------- nav -------------------------------------------------------- */
[data-theme="sketch"] .nav.scrolled {
  background: rgba(246, 243, 234, 0.94) !important;
  border-bottom: 2px solid var(--graphite);
  backdrop-filter: blur(4px);
}
[data-theme="sketch"] .nav-links a { color: var(--graphite-mid); }
[data-theme="sketch"] .nav-links a::before { display: none; }
[data-theme="sketch"] .nav-links a::after { background: var(--pencil-blue) !important; }
[data-theme="sketch"] .nav-links a:hover { color: var(--pencil-blue); }
[data-theme="sketch"] .logo-text { color: var(--graphite) !important; -webkit-text-fill-color: var(--graphite) !important; }
[data-theme="sketch"] .logo-img { filter: grayscale(1) contrast(1.1); }

[data-theme="sketch"] .theme-toggle,
[data-theme="sketch"] .sketch-toggle,
[data-theme="sketch"] .mobile-menu-btn {
  background: var(--paper-card) !important;
  border: 2px solid var(--graphite) !important;
  color: var(--graphite) !important;
  border-radius: 12px 16px 12px 16px / 16px 12px 16px 12px;
  filter: url(#sketch-wobble);
}

[data-theme="sketch"] .sketch-toggle[aria-pressed="true"] {
  background: var(--pencil-blue) !important;
  border-color: var(--pencil-blue) !important;
  color: var(--paper) !important;
}

[data-theme="sketch"] .scroll-progress {
  background: var(--pencil-blue) !important;
  height: 2px;
}

/* ---------- hero ------------------------------------------------------- */
[data-theme="sketch"] .hero-badge {
  background: transparent !important;
  border: 2px solid var(--graphite-mid);
  color: var(--graphite-mid) !important;
  filter: url(#sketch-wobble);
}

[data-theme="sketch"] .hero-title { color: var(--graphite); }
[data-theme="sketch"] .hero-title span {
  background: none !important;
  -webkit-text-fill-color: var(--pencil-blue) !important;
  color: var(--pencil-blue) !important;
  position: relative;
}
/* pink highlighter swipe under the name */
[data-theme="sketch"] .hero-title span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.22em;
  background: var(--pencil-pink);
  opacity: 0.42;
  border-radius: 40% 60% 50% 45%;
  z-index: -1;
}

[data-theme="sketch"] .hero-subtitle { color: var(--graphite-mid); }

[data-theme="sketch"] .cert-badge {
  background: var(--paper-card) !important;
  border: 2px solid var(--graphite-mid) !important;
  border-radius: 12px 16px 13px 15px / 15px 12px 16px 13px;
  filter: url(#sketch-wobble);
}
[data-theme="sketch"] .cert-badge img,
[data-theme="sketch"] .cert-svg { filter: grayscale(1) contrast(1.05) opacity(0.72); }
[data-theme="sketch"] .cert-badge-name { color: var(--graphite-mid) !important; }

/* buttons — outlined, one filled in blue pencil */
[data-theme="sketch"] .btn {
  border: 2px solid var(--graphite) !important;
  background: transparent !important;
  color: var(--graphite) !important;
  filter: url(#sketch-wobble);
}
[data-theme="sketch"] .btn::after { display: none !important; }
[data-theme="sketch"] .btn-primary {
  background: var(--pencil-blue) !important;
  border-color: var(--pencil-blue) !important;
  color: var(--paper) !important;
}
[data-theme="sketch"] .btn-outline:hover,
[data-theme="sketch"] .btn-primary:hover {
  background: var(--pencil-blue) !important;
  border-color: var(--pencil-blue) !important;
  color: var(--paper) !important;
  transform: translateY(-2px) !important;
}

/* ---------- photographs: taped colour snapshots ------------------------ */
/* The arch is a colour-theme device; in sketch mode the portrait becomes a
   photo taped to the page, so the frame goes square and white.            */
[data-theme="sketch"] .hero-image-wrapper {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 14px 14px 44px !important;
  /* visible so the tape can hang off the edges */
  overflow: visible !important;
  box-shadow: 2px 5px 14px rgba(47, 45, 41, 0.26) !important;
  transform: rotate(-1.5deg);
  filter: none;
}

/* washi tape, straddling the top-left and bottom-right corners.
   The image is pinned to z-index 0 so the tape reliably sits on top of it. */
[data-theme="sketch"] .hero-image-wrapper::before,
[data-theme="sketch"] .hero-image-wrapper::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  width: 112px;
  height: 28px;
  background: rgba(250, 226, 140, 0.88);
  box-shadow: 0 1px 3px rgba(47, 45, 41, 0.2);
  z-index: 6 !important;
  pointer-events: none;
}
[data-theme="sketch"] .hero-image-wrapper::before {
  top: -12px;
  left: -34px;
  transform: rotate(-45deg);
}
[data-theme="sketch"] .hero-image-wrapper::after {
  bottom: 30px;
  right: -34px;
  transform: rotate(-45deg);
}

[data-theme="sketch"] .hero-image-wrapper img {
  border-radius: 0 !important;
  /* the colour themes zoom with scale(); that would spill over the white
     border and defeat overflow:visible, so crop with object-position here */
  transform: none !important;
  object-position: 50% 16% !important;
  height: 430px !important;
  position: relative;
  z-index: 0 !important;
  /* full colour, warmed very slightly so it sits on the paper */
  filter: saturate(1.03) brightness(1.02) sepia(0.05) !important;
  mix-blend-mode: normal !important;
}

/* about portrait — same paper and tape, tilted the other way.
   The tilt lives on the container so the tape rotates with the photo. */
[data-theme="sketch"] .about-image {
  transform: rotate(1.6deg);
}
[data-theme="sketch"] .about-image img {
  border: none !important;
  border-radius: 2px !important;
  background: #FFFFFF;
  padding: 12px 12px 38px;
  box-shadow: 2px 5px 14px rgba(47, 45, 41, 0.24);
  position: relative;
  z-index: 0;
  filter: saturate(1.03) brightness(1.02) sepia(0.05) !important;
  mix-blend-mode: normal !important;
}
[data-theme="sketch"] .about-image::before,
[data-theme="sketch"] .about-image::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  width: 104px;
  height: 26px;
  background: rgba(250, 226, 140, 0.88);
  box-shadow: 0 1px 3px rgba(47, 45, 41, 0.2);
  z-index: 6 !important;
  pointer-events: none;
  /* the base ::before is a decorative blue outline square — clear its
     border and radius, or the tape inherits them */
  border: none !important;
  border-radius: 0 !important;
  inset: auto;
}
[data-theme="sketch"] .about-image::before {
  top: -10px;
  right: -32px;
  transform: rotate(45deg);
}
[data-theme="sketch"] .about-image::after {
  bottom: 26px;
  left: -32px;
  transform: rotate(45deg);
}

[data-theme="sketch"] .floating-stat-number { color: var(--pencil-blue); }
[data-theme="sketch"] .floating-stat-label { color: var(--graphite-mid); }

/* ---------- stats band — hatched, not filled --------------------------- */
[data-theme="sketch"] .stats {
  background: var(--hatch) !important;
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
}
[data-theme="sketch"] .stat-item {
  background: transparent !important;
  backdrop-filter: none !important;
  color: var(--graphite) !important;
}
[data-theme="sketch"] .stat-number {
  background: none !important;
  -webkit-text-fill-color: var(--pencil-blue) !important;
  color: var(--pencil-blue) !important;
}
[data-theme="sketch"] .stat-label { color: var(--graphite-mid) !important; opacity: 1; }

/* ---------- section headers -------------------------------------------- */
[data-theme="sketch"] .section-label {
  background: none !important;
  -webkit-text-fill-color: var(--pencil-blue) !important;
  color: var(--pencil-blue) !important;
}
[data-theme="sketch"] .section-label .material-icons {
  background: transparent !important;
  border: 2px solid var(--pencil-blue);
  color: var(--pencil-blue) !important;
  -webkit-text-fill-color: var(--pencil-blue) !important;
  border-radius: 9px 12px 9px 12px / 12px 9px 12px 9px;
}
[data-theme="sketch"] .section-title { color: var(--graphite); }
[data-theme="sketch"] .section-subtitle { color: var(--graphite-mid); }
[data-theme="sketch"] .subsection-title { color: var(--graphite); }
[data-theme="sketch"] .subsection-title .material-icons { color: var(--pencil-blue); }

/* ---------- about ------------------------------------------------------ */
[data-theme="sketch"] .about-content p { color: var(--graphite-mid); }
[data-theme="sketch"] .about-content strong { color: var(--graphite); }
[data-theme="sketch"] .highlight-card {
  background: var(--paper-card) !important;
  border: 2px solid var(--graphite-lt) !important;
  border-left: 3px solid var(--pencil-blue) !important;
  border-radius: 0 16px 14px 0 / 0 14px 16px 0 !important;
}
[data-theme="sketch"] .highlight-card h4 { color: var(--pencil-blue) !important; }

/* ---------- case studies & projects ------------------------------------ */
/* Card imagery stays in colour but untilted — these sit inside card frames,
   so a rotation would break the layout rather than read as "stuck on". */
[data-theme="sketch"] .case-image img,
[data-theme="sketch"] .project-thumbnail img {
  filter: saturate(1.03) brightness(1.02) sepia(0.05) !important;
  mix-blend-mode: normal !important;
}
[data-theme="sketch"] .case-tag,
[data-theme="sketch"] .project-tag {
  background: transparent !important;
  border: 1.5px solid var(--graphite-mid) !important;
  color: var(--graphite-mid) !important;
  border-radius: 100px;
}
[data-theme="sketch"] .case-metric-value { color: var(--pencil-blue) !important; }
[data-theme="sketch"] .case-metric-label,
[data-theme="sketch"] .case-description,
[data-theme="sketch"] .case-subtitle,
[data-theme="sketch"] .project-description { color: var(--graphite-mid) !important; }
[data-theme="sketch"] .project-card:hover .project-tag {
  border-color: var(--pencil-blue) !important;
  color: var(--pencil-blue) !important;
}

[data-theme="sketch"] .carousel-arrow {
  background: var(--paper-card) !important;
  border: 2px solid var(--graphite) !important;
  color: var(--graphite) !important;
  filter: url(#sketch-wobble);
}
[data-theme="sketch"] .carousel-dot {
  background: transparent !important;
  border: 2px solid var(--graphite-mid);
}
[data-theme="sketch"] .carousel-dot.active {
  background: var(--pencil-blue) !important;
  border-color: var(--pencil-blue);
}

/* ---------- skills ------------------------------------------------------ */
[data-theme="sketch"] .skill-icon {
  background: var(--hatch-dense) !important;
  border: 2px solid var(--graphite);
  border-radius: 11px 15px 12px 14px / 14px 11px 15px 12px;
}
[data-theme="sketch"] .skill-icon .material-icons { color: var(--graphite) !important; }
[data-theme="sketch"] .skill-list li { color: var(--graphite-mid); }
[data-theme="sketch"] .skill-list li::before { color: var(--pencil-blue) !important; }

/* ---------- timeline ---------------------------------------------------- */
[data-theme="sketch"] .timeline::before {
  background: var(--graphite-mid) !important;
  width: 2px;
}
[data-theme="sketch"] .timeline-item::before {
  background: var(--pencil-blue) !important;
  border: 3px solid var(--paper) !important;
}
[data-theme="sketch"] .timeline-company { color: var(--pencil-blue) !important; }
[data-theme="sketch"] .timeline-date {
  background: transparent !important;
  border: 2px solid var(--graphite-mid);
  color: var(--graphite-mid) !important;
}
[data-theme="sketch"] .timeline-list li { color: var(--graphite-mid); }
[data-theme="sketch"] .timeline-list li::before {
  background: var(--pencil-blue) !important;
}

/* ---------- education & certs ------------------------------------------- */
[data-theme="sketch"] .edu-icon {
  background: var(--paper) !important;
  border: 2px solid var(--graphite-lt);
  border-radius: 12px 16px 13px 15px / 15px 12px 16px 13px;
}
[data-theme="sketch"] .edu-icon img,
[data-theme="sketch"] .cert-card img,
[data-theme="sketch"] .volunteer-logo { filter: none !important; }
[data-theme="sketch"] .edu-field { color: var(--pencil-blue) !important; }
[data-theme="sketch"] .edu-institute,
[data-theme="sketch"] .cert-info p { color: var(--graphite-mid) !important; }
[data-theme="sketch"] .edu-date {
  background: transparent !important;
  border: 2px solid var(--graphite-mid);
  color: var(--graphite-mid) !important;
}
[data-theme="sketch"] .cert-icon-fallback {
  background: var(--hatch-dense) !important;
  border: 2px solid var(--graphite);
}
[data-theme="sketch"] .cert-icon-fallback .material-icons { color: var(--graphite) !important; }

/* ---------- volunteer ---------------------------------------------------- */
[data-theme="sketch"] .volunteer-icon {
  background: var(--paper) !important;
  border: 2px solid var(--graphite-lt);
  border-radius: 12px 16px 13px 15px / 15px 12px 16px 13px;
}
[data-theme="sketch"] .volunteer-role { color: var(--pencil-pink) !important; }
[data-theme="sketch"] .volunteer-org { color: var(--pencil-blue) !important; }
[data-theme="sketch"] .volunteer-desc { color: var(--graphite-mid) !important; }

/* ---------- contact & footer --------------------------------------------- */
[data-theme="sketch"] .contact {
  background: var(--hatch) !important;
  color: var(--graphite) !important;
  border-top: 2px solid var(--graphite);
  border-bottom: 2px solid var(--graphite);
}
[data-theme="sketch"] .contact h2 { color: var(--graphite) !important; }
[data-theme="sketch"] .contact p { color: var(--graphite-mid) !important; opacity: 1; }
[data-theme="sketch"] .contact-link {
  background: var(--paper-card) !important;
  border: 2px solid var(--graphite) !important;
  color: var(--graphite) !important;
  border-radius: 100px;
  filter: url(#sketch-wobble);
}
[data-theme="sketch"] .contact-link:hover {
  background: var(--pencil-blue) !important;
  border-color: var(--pencil-blue) !important;
  color: var(--paper) !important;
}

[data-theme="sketch"] footer {
  background: var(--paper) !important;
  color: var(--graphite-mid) !important;
  border-top: 2px solid var(--graphite);
}
[data-theme="sketch"] .social-link {
  background: transparent !important;
  border: 2px solid var(--graphite-mid) !important;
  color: var(--graphite) !important;
  filter: url(#sketch-wobble);
}
[data-theme="sketch"] .social-link:hover {
  background: var(--pencil-blue) !important;
  border-color: var(--pencil-blue) !important;
  color: var(--paper) !important;
}

/* ==========================================================================
   Sticky notes — logos and badges keep their colour, pinned to the page
   as tilted squares of note paper. Colours cycle per position.
   ========================================================================== */
[data-theme="sketch"] .cert-badge,
[data-theme="sketch"] .cert-card img,
[data-theme="sketch"] .edu-icon,
[data-theme="sketch"] .volunteer-icon {
  border: none !important;
  border-radius: 2px !important;
  box-shadow: 2px 3px 0 rgba(47, 45, 41, 0.17) !important;
  filter: none !important;
  background: #FCE9A0 !important;
}

[data-theme="sketch"] .cert-badge { padding: 0.7rem 0.55rem !important; }
[data-theme="sketch"] .cert-card img { padding: 9px; }
[data-theme="sketch"] .edu-icon,
[data-theme="sketch"] .volunteer-icon { padding: 9px !important; }

/* colour + tilt cycle */
[data-theme="sketch"] .hero-creds .cert-badge:nth-child(4n+1),
[data-theme="sketch"] .cert-grid .cert-card:nth-child(4n+1) img,
[data-theme="sketch"] .education-grid .edu-card:nth-child(4n+1) .edu-icon,
[data-theme="sketch"] .volunteer-grid .volunteer-card:nth-child(4n+1) .volunteer-icon {
  background: #FCE9A0 !important;
  transform: rotate(-3deg);
}
[data-theme="sketch"] .hero-creds .cert-badge:nth-child(4n+2),
[data-theme="sketch"] .cert-grid .cert-card:nth-child(4n+2) img,
[data-theme="sketch"] .education-grid .edu-card:nth-child(4n+2) .edu-icon,
[data-theme="sketch"] .volunteer-grid .volunteer-card:nth-child(4n+2) .volunteer-icon {
  background: #BFE3F5 !important;
  transform: rotate(2.2deg);
}
[data-theme="sketch"] .hero-creds .cert-badge:nth-child(4n+3),
[data-theme="sketch"] .cert-grid .cert-card:nth-child(4n+3) img,
[data-theme="sketch"] .education-grid .edu-card:nth-child(4n+3) .edu-icon,
[data-theme="sketch"] .volunteer-grid .volunteer-card:nth-child(4n+3) .volunteer-icon {
  background: #F8C8D8 !important;
  transform: rotate(-1.6deg);
}
[data-theme="sketch"] .hero-creds .cert-badge:nth-child(4n+4),
[data-theme="sketch"] .cert-grid .cert-card:nth-child(4n+4) img,
[data-theme="sketch"] .education-grid .edu-card:nth-child(4n+4) .edu-icon,
[data-theme="sketch"] .volunteer-grid .volunteer-card:nth-child(4n+4) .volunteer-icon {
  background: #CDE9C0 !important;
  transform: rotate(3deg);
}

/* the cert-badge label sits below the sticky, on the page */
[data-theme="sketch"] .cert-badge-name { color: var(--graphite-mid) !important; }
[data-theme="sketch"] .cert-badge img,
[data-theme="sketch"] .cert-svg { filter: none !important; }

/* keep the Nash SVG badge legible on its sticky */
[data-theme="sketch"] .cert-badge:hover { transform: rotate(0deg) translateY(-4px); }

/* ---------- selection & scrollbar ---------------------------------------- */
[data-theme="sketch"] ::selection {
  background: rgba(217, 139, 164, 0.35);
  color: var(--graphite);
}
[data-theme="sketch"] ::-webkit-scrollbar-thumb {
  background: var(--pencil-blue) !important;
  border: 3px solid var(--paper);
}
[data-theme="sketch"] html { scrollbar-color: var(--pencil-blue) transparent; }

/* ---------- reduced motion / small screens -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="sketch"] * { filter: none !important; }
}

@media (max-width: 768px) {
  /* the displacement filter is costly on mobile — keep the irregular
     radii, drop the per-element wobble */
  [data-theme="sketch"] * { filter: none !important; }
  [data-theme="sketch"] .hero-image-wrapper img,
  [data-theme="sketch"] .about-image img,
  [data-theme="sketch"] .case-image img,
  [data-theme="sketch"] .project-thumbnail img {
    filter: saturate(1.03) brightness(1.02) sepia(0.05) !important;
  }
  /* tape and tilt get busy on a phone — flatten them */
  [data-theme="sketch"] .hero-image-wrapper,
  [data-theme="sketch"] .about-image { transform: none !important; }
  [data-theme="sketch"] .hero-image-wrapper::before,
  [data-theme="sketch"] .hero-image-wrapper::after,
  [data-theme="sketch"] .about-image::before,
  [data-theme="sketch"] .about-image::after { display: none !important; }
}