/* Porcelain and ink by day; black, graphite and restrained gold by night. */
@media screen {
  :root {
    --page:#f6f3ec;
    --page-alt:#ebe7de;
    --panel:rgba(255,253,248,.96);
    --panel-solid:#fffdf8;
    --panel-soft:#f1ece3;
    --text:#3d3a36;
    --heading:#22211f;
    --subtle:#625d56;
    --border:rgba(52,47,40,.16);
    --accent:#7e5a22;
    --accent-strong:#68481a;
    --accent-soft:rgba(126,90,34,.105);
    --signal:#806543;
    --teal:#8d806d;
    --warm:#b59058;
    --shadow:0 20px 58px rgba(33,31,29,.075);
    --grid:rgba(77,69,61,.03);
    --scroll-thumb:#b8b2a5;
    --ink:var(--heading);
    --muted:var(--subtle);
    --surface:var(--panel);
    --surface-strong:var(--panel-solid);
    --line:var(--border);
    --cyan:var(--signal);
    --violet:var(--accent);
    --lime:var(--teal);
    color-scheme:light;
  }
  html[data-theme="dark"],body.dark-mode {
    --page:#0b0d0f;
    --page-alt:#111315;
    --panel:rgba(23,25,28,.97);
    --panel-solid:#17191c;
    --panel-soft:#202225;
    --text:#f5f5f5;
    --heading:#f5f5f5;
    --subtle:#a6a8af;
    --border:#333538;
    --accent:#f5ba5a;
    --accent-strong:#f8cb7b;
    --accent-soft:rgba(245,186,90,.11);
    --signal:#b59058;
    --teal:#b9a481;
    --warm:#f8cb7b;
    --shadow:0 22px 60px rgba(0,0,0,.24);
    --grid:rgba(230,220,197,.025);
    --scroll-thumb:#4b4b4b;
    --ink:var(--heading);
    --muted:var(--subtle);
    --surface:var(--panel);
    --surface-strong:var(--panel-solid);
    --line:var(--border);
    --cyan:var(--signal);
    --violet:var(--accent);
    --lime:var(--teal);
    color-scheme:dark;
  }

  body { color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  /* Page copy remains visible if the optional scroll library cannot initialize. */
  [data-aos]:not(.aos-init) { opacity:1 !important; transform:none !important; }
  ::selection { color:var(--heading); background:color-mix(in srgb,var(--accent) 27%,var(--page)); }
  :focus-visible { outline:2px solid var(--accent-strong); outline-offset:4px; }
  body::before,body::after,body.dark-mode::before,body.dark-mode::after { display:none; }
  body .main-wrapper { background:var(--page); }
  body.home-page .ai-hero { background:linear-gradient(120deg,var(--page),var(--page-alt)) !important; }
  body.home-page .ai-hero::before { opacity:.12; }
  body .scroll-progress { background:var(--accent); box-shadow:none; }
  body .section-title::after { width:42px; height:2px; background:var(--accent); box-shadow:none; }

  /* Navigation uses one quiet accent, with a clear active state. */
  body .header { background:#fffdf8; box-shadow:4px 0 22px rgba(33,31,29,.035); }
  html[data-theme="dark"] .header,body.dark-mode .header { background:#090b0c; box-shadow:4px 0 24px rgba(0,0,0,.18); }
  body .header .dark-mode-toggle { display:none; }
  body .header .blog-name a::after { color:var(--signal); }
  body .profile-section .profile-image { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)) !important; box-shadow:0 0 0 5px var(--accent-soft),0 12px 28px rgba(0,0,0,.1); }
  body .header .nav-link .svg-inline--fa { color:var(--accent); background:var(--accent-soft); box-shadow:none; }
  body .header .nav-item .nav-link:hover,
  body .header :is(.home-nav,.sidebar-nav) .nav-item.active .nav-link,
  body.dark-mode .header :is(.home-nav,.sidebar-nav) .nav-item.active .nav-link {
    background:linear-gradient(100deg,var(--accent-soft),color-mix(in srgb,var(--signal) 4%,transparent));
    border-color:color-mix(in srgb,var(--accent) 23%,var(--border));
    box-shadow:none;
  }
  body .header :is(.home-nav,.sidebar-nav) .nav-item.active .nav-link .svg-inline--fa { color:#0b0d0f !important; background:#f5ba5a; box-shadow:none; transform:none; }
  html[data-theme="dark"] body .header :is(.home-nav,.sidebar-nav) .nav-item.active .nav-link .svg-inline--fa { color:#0b0d0f !important; background:#f5ba5a; }
  body .header .nav-item.active .nav-link::before { background:var(--accent); box-shadow:none; }
  body .header[dir="rtl"] .sidebar-nav { text-align:right !important; }
  body .header[dir="rtl"] .nav-link .svg-inline--fa { margin-right:0 !important; margin-left:.5rem !important; }
  body .header[dir="rtl"] .nav-item.active .nav-link::before { left:auto; right:-6px; }
  body .header[dir="rtl"] .nav-link { overflow-wrap:anywhere; }
  body .main-wrapper[dir="rtl"] .text-left { text-align:right !important; }
  body .main-wrapper[dir="rtl"] .mr-2 { margin-right:0 !important; margin-left:.5rem !important; }
  body .main-wrapper[dir="rtl"] ul:not(.list-unstyled):not(.list-inline) { padding-left:0; padding-right:1.25rem; }
  body .hero-role-rotator { flex-wrap:wrap; }
  body #hero-role-text { overflow-wrap:anywhere; }
  body .social-list a,body.dark-mode .social-list a { box-shadow:none; }
  body .social-list a:hover,body.dark-mode .social-list a:hover { color:var(--heading); background:var(--accent-soft); border-color:var(--accent); }
  body .mobile-theme-toggle,body .portfolio-language-control { box-shadow:0 4px 14px rgba(0,0,0,.055); }
  body .portfolio-language-menu { box-shadow:0 18px 50px rgba(0,0,0,.17); }

  /* Gold is reserved for primary actions and small navigation markers. */
  body .btn-primary,body.dark-mode .btn-primary,
  body .header .btn-primary,body.dark-mode .header .btn-primary {
    color:#0b0d0f;
    background:linear-gradient(115deg,#f5ba5a,#d6a54f);
    box-shadow:0 7px 20px rgba(181,144,88,.14);
  }
  body .btn-primary:hover,body.dark-mode .btn-primary:hover { color:#0b0d0f; background:linear-gradient(115deg,#f8cb7b,#e6b661); box-shadow:0 11px 25px rgba(181,144,88,.21); }
  html[data-theme="dark"] body .btn-primary,body.dark-mode .btn-primary,
  html[data-theme="dark"] body .header .btn-primary,body.dark-mode .header .btn-primary {
    color:#0b0d0f;
    background:linear-gradient(115deg,#f5ba5a,#d6a54f);
  }
  html[data-theme="dark"] body .btn-primary:hover,
  html[data-theme="dark"] body .header .btn-primary:hover { color:#0b0d0f; background:linear-gradient(115deg,#f8cb7b,#e6b661); }
  body .btn-secondary,body.dark-mode .btn-secondary { color:var(--text); background:var(--panel-solid); border-color:var(--border); box-shadow:none; }
  body .btn-secondary:hover,body.dark-mode .btn-secondary:hover { color:var(--heading); border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); background:var(--panel-soft); }
  /* Services uses Bootstrap's light button classes; give each action an
     explicit surface so its text stays readable in both site themes. */
  body .service-hero .btn-light,body .cta-section .btn-light,
  body .service-hero .btn-light:hover,body .cta-section .btn-light:hover {
    color:#0b0d0f;
    border:1px solid #d6a54f;
    background:linear-gradient(115deg,#f5ba5a,#d6a54f);
    box-shadow:0 8px 22px rgba(181,144,88,.15);
  }
  html[data-theme="dark"] body .service-hero .btn-light,
  html[data-theme="dark"] body .cta-section .btn-light,
  html[data-theme="dark"] body .service-hero .btn-light:hover,
  html[data-theme="dark"] body .cta-section .btn-light:hover {
    color:#0b0d0f;
    border-color:#d6a54f;
    background:linear-gradient(115deg,#f5ba5a,#d6a54f);
  }
  body .service-hero .btn-outline-light,body .cta-section .btn-outline-light,
  body .service-hero .btn-outline-light:hover,body .cta-section .btn-outline-light:hover {
    color:var(--accent-strong);
    border:1px solid color-mix(in srgb,var(--accent) 60%,var(--border));
    background:var(--panel-solid);
    box-shadow:none;
  }
  body .service-hero .btn-outline-light:hover,body .cta-section .btn-outline-light:hover {
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  body .service-card,body .why-item { border-color:var(--border) !important; background:linear-gradient(150deg,var(--panel-solid),var(--panel-soft)) !important; box-shadow:0 10px 28px rgba(33,31,29,.055) !important; }
  body .service-card:hover { border-color:color-mix(in srgb,var(--signal) 40%,var(--border)) !important; box-shadow:0 16px 36px rgba(33,31,29,.11) !important; }
  body .service-icon { color:var(--signal) !important; }
  body .price-badge { color:var(--signal); border-color:color-mix(in srgb,var(--signal) 24%,var(--border)); background:color-mix(in srgb,var(--signal) 7%,var(--panel-solid)); }
  body .service-hero { background:radial-gradient(ellipse at 65% 15%,color-mix(in srgb,var(--signal) 8%,transparent),transparent 55%),linear-gradient(140deg,var(--page-alt),var(--page)); }
  body .contact-form .form-control { background:var(--panel-solid); }
  body .contact-form .form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

  /* Carry the entrance's ink-to-gold name treatment into page headings and sidebar branding. */
  body .hamza-name-gradient,
  body .header .blog-name a,
  body .profile-teaser .blog-name a {
    color:#22211f;
    background:linear-gradient(100deg,#22211f 35%,#9b6b29 82%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  html[data-theme="dark"] body .hamza-name-gradient,
  html[data-theme="dark"] body .header .blog-name a,
  html[data-theme="dark"] body .profile-teaser .blog-name a,
  body.dark-mode .hamza-name-gradient,
  body.dark-mode .header .blog-name a,
  body.dark-mode .profile-teaser .blog-name a {
    color:#f5f5f5;
    background-image:linear-gradient(100deg,#f5f5f5 35%,#f8cb7b 82%);
  }
  body .header .blog-name a::after { -webkit-text-fill-color:var(--signal); }
  /* The resume is white paper even when the surrounding site is dark. */
  body.resume-page .resume-wrapper .hamza-name-gradient {
    color:#22211f;
    background-image:linear-gradient(100deg,#22211f 35%,#9b6b29 82%);
  }
  body .hero-role-label { color:#0b0d0f; background:linear-gradient(115deg,#f5ba5a,#d6a54f); }
  .home-page .ai-hero .bio { color:var(--subtle) !important; }
  body .ai-hero .bio strong { color:var(--text); }
  body.home-page .ai-hero .hero-image-frame,
  body.home-page .ai-hero .hero-image-col:hover .hero-image-frame { box-shadow:10px 15px 0 color-mix(in srgb,var(--accent) 7%,transparent),0 24px 48px rgba(33,31,29,.14); }
  body .about-me-section .hero-image-col::before {
    background:radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--accent) 21%,transparent),transparent 38%),
               radial-gradient(circle at 82% 74%,color-mix(in srgb,var(--signal) 17%,transparent),transparent 42%);
  }
  body .about-me-section .hero-image-frame::after {
    background:linear-gradient(135deg,var(--accent) 2%,var(--signal) 42%,var(--teal) 70%,var(--warm) 96%);
    box-shadow:8px 10px 0 var(--accent-soft),0 27px 58px rgba(33,31,29,.15);
  }
  body .ai-domain { box-shadow:0 4px 0 color-mix(in srgb,var(--domain-accent) 5%,var(--page-alt)),0 10px 25px rgba(33,31,29,.035); }
  body .ai-domain:hover { box-shadow:0 5px 0 color-mix(in srgb,var(--domain-accent) 9%,var(--page-alt)),0 15px 28px rgba(33,31,29,.08); }
  body .ai-domain--vision { --domain-accent:#94671f; }
  body .ai-domain--agents { --domain-accent:#806543; }
  body .ai-domain--generative { --domain-accent:#8b7652; }
  body .ai-domain--ml { --domain-accent:#67635c; }
  html[data-theme="dark"] .ai-domain--vision,body.dark-mode .ai-domain--vision { --domain-accent:#f5ba5a; }
  html[data-theme="dark"] .ai-domain--agents,body.dark-mode .ai-domain--agents { --domain-accent:#d0ad74; }
  html[data-theme="dark"] .ai-domain--generative,body.dark-mode .ai-domain--generative { --domain-accent:#b9a481; }
  html[data-theme="dark"] .ai-domain--ml,body.dark-mode .ai-domain--ml { --domain-accent:#a6a8af; }
  body .entry-core #entry-core-glass stop:first-child { stop-color:var(--accent); }
  body .entry-core #entry-core-glass stop:last-child { stop-color:var(--signal); }
  body .entry-enter { border-color:#d6a54f; box-shadow:0 6px 20px rgba(181,144,88,.14); }

  /* The central capability map and project diagrams use the same materials. */
  body .systems-map__core {
    background:radial-gradient(circle at 42% 34%,#414038,#1b1d1e 62%,#0b0d0f) !important;
    border-color:color-mix(in srgb,var(--accent) 70%,var(--panel-solid)) !important;
  }
  body .systems-map__core > span { color:#f8cb7b; }
  body .systems-map__core > small { color:#ded9cc; }
  body .project-visual { --pv:var(--accent); --pv2:var(--signal); }

  /* The assistant's reading area stays calm; focus remains easy to identify. */
  body .portfolio-assistant-dialog { border-top-color:var(--signal); background:var(--panel-solid); box-shadow:0 22px 64px rgba(0,0,0,.22); }
  body .portfolio-assistant__header { background:color-mix(in srgb,var(--page-alt) 45%,var(--panel-solid)); }
  body .portfolio-assistant__header h2 { font-weight:600; letter-spacing:-.025em; }
  body .portfolio-assistant__note { color:var(--subtle); font-size:11px; line-height:1.65; }
  body .portfolio-assistant__suggestions button { color:var(--accent-strong); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 14%,var(--border)); font-size:10.5px; }
  body .portfolio-assistant__suggestions button:hover { color:var(--heading); border-color:var(--accent); }
  body .portfolio-assistant__conversation { scrollbar-gutter:stable; }
  body .portfolio-assistant__message { color:var(--text); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
  body .portfolio-assistant__message--user { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 15%,var(--border)); }
  body .portfolio-assistant__message--answer { background:var(--panel-soft); }
  body .portfolio-assistant__sources { font-size:11px; }
  body .portfolio-assistant__sources a { color:var(--accent-strong); text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent); }
  body #portfolio-assistant-form { background:color-mix(in srgb,var(--page-alt) 30%,var(--panel-solid)); }
  body #portfolio-assistant-question { background:var(--panel-solid); caret-color:var(--signal); font-size:13px; }
  body #portfolio-assistant-question::placeholder { color:var(--subtle); opacity:1; }
  body #portfolio-assistant-question:focus,body #portfolio-assistant-question:focus-visible {
    outline:none;
    border-color:color-mix(in srgb,var(--accent) 70%,var(--border));
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  body .portfolio-assistant__send { color:#0b0d0f; border-color:transparent; background:linear-gradient(115deg,#f5ba5a,#d6a54f); box-shadow:0 3px 9px rgba(181,144,88,.15); }
  body .portfolio-assistant__send:hover { background:linear-gradient(115deg,#f8cb7b,#e6b661); }
  body .portfolio-assistant__close:hover { color:var(--heading); border-color:var(--accent); }
  body .portfolio-assistant__footer button:hover { color:var(--accent-strong); }

  /* Keep every project filter legible in both themes, including the active
     gold pill that the old dark-mode stylesheet colored teal. */
  body.portfolio-page .filters .type {
    color:var(--text);
    background:var(--panel-solid);
    border-color:var(--border);
    font-weight:600;
  }
  body.portfolio-page .filters .type:hover,
  body.portfolio-page .filters .type:focus-visible {
    color:var(--heading);
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  body.portfolio-page .filters .type.active,
  body.portfolio-page .filters .type.active:hover,
  body.portfolio-page .filters .type.active:focus-visible {
    color:var(--page);
    background:var(--accent);
    border-color:var(--accent);
  }

  /* Thin slate scrollbars avoid a saturated line through every surface. */
  html,.header,.portfolio-entry,.portfolio-assistant__conversation,.portfolio-language-options { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
  body::-webkit-scrollbar { width:9px; }
  body::-webkit-scrollbar-thumb { border:2px solid var(--page); border-radius:999px; background:var(--scroll-thumb); }
  body::-webkit-scrollbar-track { background:var(--page); }
  .header::-webkit-scrollbar-thumb { background:var(--scroll-thumb) !important; }
  .portfolio-entry::-webkit-scrollbar,.portfolio-assistant__conversation::-webkit-scrollbar,.portfolio-language-options::-webkit-scrollbar { width:6px; }
  .portfolio-entry::-webkit-scrollbar-track,.portfolio-assistant__conversation::-webkit-scrollbar-track,.portfolio-language-options::-webkit-scrollbar-track { background:transparent; }
  .portfolio-entry::-webkit-scrollbar-thumb,.portfolio-assistant__conversation::-webkit-scrollbar-thumb,.portfolio-language-options::-webkit-scrollbar-thumb { border:1px solid var(--panel-solid); border-radius:999px; background:var(--scroll-thumb); }

  /* The resume stays white paper in either theme, with readable bronze details. */
  body.resume-page .resume-wrapper,html[data-theme="dark"] body.resume-page .resume-wrapper {
    --accent:#7e5a22;
    --accent-strong:#68481a;
    --accent-soft:rgba(126,90,34,.09);
    --signal:#806543;
  }
}
@media screen and (max-width:991.98px) {
  body .header #navigation.navbar-collapse,
  body .header #navigation.navbar-collapse.collapsing,
  body.dark-mode .header #navigation.navbar-collapse { background:var(--panel-solid) !important; border-color:var(--border); }
  body .header #navigation :is(.home-nav,.sidebar-nav) .nav-link { color:var(--text) !important; }
  body .header #navigation .profile-section .bio { color:var(--subtle) !important; }
  body .header #navigation hr { border-color:var(--border) !important; }
  body .header #navigation .social-list a { color:var(--text); background:var(--panel-soft); border-color:var(--border); }
  body .header #navigation :is(.home-nav,.sidebar-nav) .nav-item.active .nav-link { color:var(--heading) !important; background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 28%,var(--border)); box-shadow:none; }
  body .header #navigation :is(.home-nav,.sidebar-nav) .nav-link:hover { color:var(--heading) !important; background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 23%,var(--border)); }
  body.mobile-menu-open .mobile-theme-toggle { color:var(--accent-strong); background:var(--panel-solid); border-color:var(--border); box-shadow:0 8px 20px rgba(0,0,0,.16); }
}
@media screen and (min-width:992px) {
  body.home-page .header .profile-image { width:100px !important; height:100px !important; margin-bottom:.65rem !important; }
  body.home-page .header .profile-section { padding-top:.65rem !important; }
  body.home-page .header .profile-section .bio { margin-bottom:.65rem !important; font-size:.76rem; }
  body.home-page .header .social-list { padding-top:.35rem !important; padding-bottom:.35rem !important; margin-bottom:.65rem !important; }
  body.home-page .header .profile-section hr { margin-top:.65rem; margin-bottom:.8rem; }
}
@media screen and (max-width:575.98px) {
  body #portfolio-assistant-question { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  [data-aos] { opacity:1 !important; transform:none !important; transition:none !important; }
}
@media print {
  .resume-page .resume-wrapper a,
  .resume-page .resume-wrapper .resume-section-heading,
  .resume-page .resume-wrapper .resume-name { color:#68481a !important; }
}