/* =====================================================================
   PAPER THEME — white page, dark ink, faint 24px grid.
   Loaded last on every page except Artboard.html. Delete the <link> to
   paper-theme.css in a page's <head> to return that page to the sky theme.
   ===================================================================== */
:root {
  --ink: #14181f;
  --line: rgba(20,24,31,0.14);
  --paper-ink: #14181f;
  --paper-mute: #5b6472;
  --nature-ink: #14181f;
  --pixel-rgb: 20,24,31;
}
html, body { color: #14181f; }
/* The page background lives on <html> so the gradient tiles (bg-tiles.js, z-index -1) can sit between it and the content. */
html body { background: transparent !important; }
html:root {
  background-color: #ffffff;
  background-image:
    url("assets/dither/page-dots.png"),
    linear-gradient(rgba(20,24,31,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,31,0.045) 1px, transparent 1px);
  background-size: 240px 240px, 24px 24px, 24px 24px;
  background-position: 0 0, -1px -1px, -1px -1px;
  background-attachment: scroll;
}

/* ---- auto-mapped text / border colors ---- */
html body .sitenav { border-bottom: 1px solid rgba(20,24,31,0.14); }
html body .nav-brand { color: rgb(20,24,31); text-shadow: none; }
html body .nav-links a { color: rgba(20,24,31,0.82); }
html body .nav-links a[aria-current="page"] { color: rgb(20,24,31); }
html body .site-footer { border-top: 1px solid rgba(20,24,31,0.14); color: rgb(20,24,31); }
html body .footer-brand { color: rgb(20,24,31); }
html body .footer-social { border: 1px solid rgba(20,24,31,0.14); background: rgba(20,24,31,0.013); color: rgba(20,24,31,0.90); }
html body .footer-copyright { color: rgba(20,24,31,0.70); }
html body .footer-nav-links a { color: rgba(20,24,31,0.70); }
html body .footer-nav-links a:hover { color: rgb(20,24,31); }
html body .eyebrow { color: rgba(20,24,31,0.78); }
html body .project-title,
html body .page-title { text-shadow: none; }
html body .project-lede,
html body .page-lede { color: rgba(20,24,31,0.90); }
html body .head-rule { background: rgba(20,24,31,0.035); }
html body .work-frame { background: rgba(20,24,31,0.035); }
html body .work-title { color: rgb(20,24,31); text-shadow: none; }
html body .work-tags { color: rgba(20,24,31,0.85); }
html body .work-desc { color: rgba(20,24,31,0.90); }
html body .work-cap .chip { color: rgb(20,24,31); background: rgba(20,24,31,0.025); border-color: rgba(20,24,31,0.14); }
html body .case-overview { background: rgba(20,24,31,0.035); }
html body .case-section { background: rgba(20,24,31,0.035); }
html body .footer-line { color: rgba(20,24,31,0.82); }
html body .block-caption { color: rgba(20,24,31,0.82); }
html body .case-text-block { background: rgba(20,24,31,0.035); }
html body .blog-card-meta { color: rgba(20,24,31,0.80); }
html body .blog-title { color: rgb(20,24,31); text-shadow: none; }
html body .blog-excerpt { color: rgba(20,24,31,0.90); }
html body .blog-card .chip { color: rgb(20,24,31); background: rgba(20,24,31,0.025); border-color: rgba(20,24,31,0.14); }
html body .blog-readmore { color: rgb(20,24,31); }
html body .blog-empty { color: rgba(20,24,31,0.85); }
html body .blog-post-tags .chip { color: rgb(20,24,31); background: rgba(20,24,31,0.030); border-color: rgba(20,24,31,0.14); }
html body .blog-back { color: rgb(20,24,31); }
html body .case-toc-title { color: rgba(20,24,31,0.70); }
html body .case-toc a { border-left: 2px solid rgba(20,24,31,0.14); color: rgba(20,24,31,0.70); }
html body .case-toc a:hover { color: rgb(20,24,31); }
html body .case-toc a.active { color: rgb(20,24,31); }
html body .corner { color: rgba(20,24,31,0.85); }
html body .hero-title { color: rgb(20,24,31); text-shadow: none; }
html body .hero-blurb { color: rgba(20,24,31,0.94); text-shadow: none; }
html body .name { color: rgb(20,24,31); text-shadow: none; }
html body .subhero { color: rgba(20,24,31,0.95); text-shadow: none; }
html body .subhero-focus { color: rgb(20,24,31); }
html body .subhero::before,
html body .subhero::after { background: rgba(20,24,31,0.035); }
html body .scrollhint { color: rgba(20,24,31,0.70); }
html body .scrollhint .dot { background: rgba(20,24,31,0.035); }
html body .logos { background: rgba(20,24,31,0.015); border-top: 1px solid rgba(20,24,31,0.14); border-bottom: 1px solid rgba(20,24,31,0.14); }
html body .logos-eyebrow { color: rgba(20,24,31,0.85); }
html body .logo { color: rgba(20,24,31,0.96); }
html body .eyebrow { color: rgba(20,24,31,0.85); }
html body .section-title { color: rgb(20,24,31); text-shadow: none; }
html body .section-lede { color: rgba(20,24,31,0.92); }
html body .work-frame { background: rgba(20,24,31,0.035); }
html body .work-title { color: rgb(20,24,31); text-shadow: none; }
html body .work-tags { color: rgba(20,24,31,0.85); }
html body .about-para { color: rgba(20,24,31,0.95); }
html body .t-hint { color: rgba(20,24,31,0.75); }
html body .contact .chat-eyebrow,
html body .contact .chat-title,
html body .contact .chat-sub { color: rgb(20,24,31); text-shadow: none; }
html body .contact .chat-sub a { color: rgb(20,24,31); border-bottom-color: rgba(20,24,31,0.14); }
html body .chat-eyebrow { color: rgba(20,24,31,0.95); }
html body .chat-title { color: rgb(20,24,31); text-shadow: none; }
html body .chat-sub { color: rgba(20,24,31,0.95); }
html body .chat-sub a { color: rgb(20,24,31); border-bottom: 1px solid rgba(20,24,31,0.14); }
html body .site-footer-dark { color: rgba(20,24,31,0.88); }

/* ---- surfaces that were translucent white on blue ---- */
html body .case-overview,
html body .case-section,
html body .case-text-block {
  background: #ffffff;
  border: 1px solid rgba(20,24,31,0.10);
  box-shadow: 0 18px 40px -32px rgba(20,24,31,0.35);
}

/* ---- nav: light glass ---- */
html body .sitenav {
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(20,24,31,0.10);
}
html body .nav-links a:not(.nav-cta):hover,
html body .nav-links a:not(.nav-cta):focus-visible { color: #14181f; text-shadow: none; }
html body .nav-links a:not(.nav-cta)::after { background: #14181f; box-shadow: none; }
html body .mnav-panel { background: rgba(255,255,255,0.97); }
html body .mnav-inner a:not(.nav-cta) { color: #14181f; border-color: rgba(20,24,31,0.12); }
html body .mnav-toggle, html body .mnav-toggle span { color: #14181f; border-color: rgba(20,24,31,0.2); }

/* ---- dock chips: solid ink so they read on white ---- */
body[data-dock] .dock-item { background: rgba(20,24,31,0.86) !important; border-color: transparent !important; }

/* ---- footer: light ---- */
html body .site-footer,
html body .site-footer-dark {
  background: rgba(255,255,255,0.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid rgba(20,24,31,0.12);
  color: #14181f;
}
html body .footer-social:hover,
html body .footer-social:focus-visible { background: #14181f; color: #fff; border-color: #14181f; }

/* ---- table of contents ---- */
html body .case-toc {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(20,24,31,0.12);
  box-shadow: 0 24px 50px -34px rgba(20,24,31,0.4);
}
html body .case-toc a.active { border-left-color: #14181f; }
html body .case-toc::-webkit-scrollbar-thumb { background: rgba(20,24,31,0.25); }

/* ---- clouds: the soft photo clouds disappear on white; pixel clouds/birds go black ---- */
html body .project-clouds,
html body .clouds-bg,
html body .work-cta-clouds,
html body #clouds { display: none !important; }

/* ---- client logos: one ink color ---- */
html body .logo img { filter: brightness(0) saturate(0); opacity: 0.78; }
html body .logo .mark { border-color: rgba(20,24,31,0.4); color: #14181f; }

/* ---- testimonials scrollbar ---- */
html body .t-scroll { scrollbar-color: rgba(20,24,31,0.35) rgba(20,24,31,0.06); }
html body .t-scroll::-webkit-scrollbar-track { background: rgba(20,24,31,0.06); }
html body .t-scroll::-webkit-scrollbar-thumb { background: rgba(20,24,31,0.32); }
html body .t-scroll::-webkit-scrollbar-thumb:hover { background: rgba(20,24,31,0.5); }

/* ---- polaroids need an edge on white ---- */
html body .photo { box-shadow: 0 0 0 1px rgba(20,24,31,0.06), 0 14px 24px -12px rgba(20,24,31,0.35), 0 4px 10px -3px rgba(20,24,31,0.18); }

/* ---- dither behind the footer ---- */
html body .site-footer,
html body .site-footer-dark { position: relative; isolation: isolate; overflow: hidden; }
html body .site-footer::before,
html body .site-footer-dark::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%; max-height: 260px;
  z-index: -1;
  pointer-events: none;
  background: url("assets/dither/footer-dither.png") center bottom / max(1400px, 100%) auto no-repeat;
  opacity: 0.1;
}

/* ---- footer availability pill ---- */
html body .footer-avail { color: #166534; border-color: rgba(22,101,52,0.28); background: rgba(34,197,94,0.1); }
html body .footer-dot { background: #16a34a; }

/* main buttons: keep the base colour on hover; the pixel wipe does the work */
html body .px-btn:hover { background: #101820; }

/* ---- squarer buttons (4px) ---- */
html body .nav-links a.nav-cta,
html body .mnav-inner a.nav-cta,
html body .chat-cta,
html body .hero-cta,
html body .pill-btn,
html body .yt-channel,
html body .footer-social,
html body .footer-avail,
html body .t-linkedin { border-radius: 4px; }
html body .footer-social:hover,
html body .footer-social:focus-visible { background: #7c5cff; border-color: #7c5cff; color: #fff; }
html body .t-linkedin:hover, html body .t-linkedin:focus-visible { background: #7c5cff; }
html body .site-footer, html body .site-footer-dark { padding-bottom: clamp(10px, 1.4vw, 20px); }
html body .footer-wordmark { color: #14181f; }

/* ---- "Work with me": plain off-white paper, very faint grain ---- */
html body .work-cta {
  color: #1f1d1a;
  background-color: #fff !important;
  background-image: url("assets/cta-flowers-left.png"), url("assets/cta-flowers-right.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left 18px bottom 0, right 28px bottom 0 !important;
  background-size: 200px auto, 136px auto !important;
  image-rendering: pixelated;
  border: 1px solid rgba(31,29,26,0.08) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(31,29,26,0.04), 0 18px 40px -28px rgba(31,29,26,0.18);
}
html body .work-cta::before { display: none; }
html body .work-cta-eyebrow { color: #4b2bbf !important; opacity: 1 !important; }
html body .work-cta-title { color: #1f1d1a !important; text-shadow: none; font-weight: 400 !important; font-synthesis: none; }
@media (max-width: 640px) { html body .work-cta { background-size: 110px auto, 76px auto !important; } }
html body .work-cta-media { border-radius: 4px; box-shadow: 0 14px 30px -22px rgba(31,29,26,0.35); }

/* ---- Artboard page ---- */
html body .board-caption { background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0) 100%); }
html body .board-caption .eyebrow { color: #5b6472; }
html body .board-caption h1 { color: #14181f; text-shadow: none; }
html body .board-caption p { color: #3b4250; text-shadow: none; }
html body .board-cue { color: #14181f; }
html body .board-hint { color: #14181f; background: rgba(255,255,255,0.85); border: 1px solid rgba(20,24,31,0.12); border-radius: 4px; }

/* Artboard page surface: light paper pinboard (the home drawer board stays dark) */
html body .work-stage .board {
  background-color: #f6f4ef;
  background-image:
    linear-gradient(rgba(20,24,31,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,31,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid rgba(20,24,31,0.12);
  border-radius: 4px;
  box-shadow: 0 30px 70px -50px rgba(20,24,31,0.4);
}
html body .work-stage .board::after { box-shadow: none; }
html body .work-stage .board-caption { background: linear-gradient(180deg, #f6f4ef 0%, rgba(246,244,239,0.75) 55%, rgba(246,244,239,0) 100%); }

/* ---- Purple accents (#7c5cff light, #4b2bbf dark for text) ---- */
::selection { background: #ddd3ff; color: #14181f; }
html body .eyebrow,
html body .logos-eyebrow,
html body .chat-eyebrow { color: #4b2bbf; }
html body .section-title em,
html body .page-title em,
html body .chat-title em { color: #4b2bbf; }
html body .nav-links a:not(.nav-cta)::after { background: #7c5cff !important; }
html body .nav-links a[aria-current="page"] { color: #4b2bbf; }
html body .nav-links a:not(.nav-cta):hover { color: #4b2bbf; text-shadow: none; }
html body a:not([class]):hover { color: #4b2bbf; text-decoration-color: #7c5cff; }
html body .case-toc a.active { color: #4b2bbf; border-left-color: #7c5cff; }
html body .case-toc a:hover { color: #4b2bbf; }
html body .t-card::before { color: #7c5cff; opacity: 1; }
html body .bento-label .arr { color: #b9a6ff; }
html body .head-count span:first-child { color: #4b2bbf; }
html body .case-content ul li::marker, html body .blog-article ul li::marker { color: #7c5cff; }
html body .stat + .stat::before { content: none; }
:focus-visible { outline-color: #7c5cff; }

/* ---- Brand wordmark (nav + footer) ---- */
html body .nav-brand, html body .footer-brand { font-family: 'Instrument Serif', serif; font-style: normal; font-weight: 700; letter-spacing: -0.01em; color: #14181f; }
html body .nav-brand span, html body .footer-brand span { display: none; }

/* ---- Project page link buttons ---- */
html body .project-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
html body .project-link-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 4px;
  font-family: 'Urbanist', 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 1;
  color: #fff; background-color: #14181f; text-decoration: none;
  background-image: linear-gradient(#7c5cff, #7c5cff); background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size 320ms cubic-bezier(.2,.7,.2,1);
}
html body .project-link-btn:hover { color: #fff; background-size: 100% 100%; }
html body .project-link-btn span { font-size: 12px; }

/* ---- No small uppercase labels anywhere ---- */
html body .eyebrow, html body .logos-eyebrow, html body .chat-eyebrow, html body .work-cta-eyebrow,
html body .hero .corner, html body .hero .scrollhint { display: none !important; }

/* ===== Palette J: purple + magenta ===== */
:root { --c-purple: #4b2bbf; --c-violet: #7c5cff; --c-magenta: #d63bd6; --c-magenta-ink: #b52bb5; --c-pink: #ff7ac6; }
html body .stat-plus { color: #d63bd6; }
html body .footer-avail { color: #8a1f8a; border-color: rgba(214,59,214,0.3); background: rgba(214,59,214,0.08); }
html body .footer-dot { background: #d63bd6; }
html body .t-card::before { color: #d63bd6; }
html body .case-content ul li::marker, html body .blog-article ul li::marker { color: #d63bd6; }
html body .project-link-btn { background-image: linear-gradient(90deg, #7c5cff, #d63bd6); }
::selection { background: #f4c9f0; color: #14181f; }

/* ---- Urbanist for body copy, nav, buttons and testimonials ---- */
html body, html body p, html body li, html body input, html body textarea { font-family: 'Urbanist', 'Inter', sans-serif; }
html body .nav-links a, html body .nav-cta, html body .chat-cta, html body .work-cta a, html body .btn, html body button,
html body .px-btn, html body .project-link-btn, html body .yt-cta, html body .resume-btn { font-family: 'Urbanist', 'Inter', sans-serif !important; }
html body .nav-links a { font-size: 14px; letter-spacing: 0.08em; font-weight: 500; }
html body .nav-cta, html body .chat-cta { font-weight: 600; letter-spacing: 0.06em; }
html body .t-quote { font-family: 'Urbanist', 'Inter', sans-serif !important; font-size: 16px; line-height: 1.55; }
html body .t-name { font-family: 'Urbanist', 'Inter', sans-serif !important; font-style: normal; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; }
html body .t-role { font-family: 'Urbanist', 'Inter', sans-serif !important; font-size: 12px; letter-spacing: 0.06em; font-weight: 500; }
html body .t-more, html body .t-card.is-clamped .t-more { display: none !important; }
html body .chat-sub, html body .chat-sub a { font-family: 'Urbanist', 'Inter', sans-serif !important; font-size: 17px; }
html body .hero-badges li { background: #14181f !important; color: #fff !important; }