/* AJ cinematic system. Loaded after page styles; no external assets. */
:root {
    color-scheme: dark;
    --primary: #ff3038; --primary-rgb: 255,48,56;
    --primary-hover: #ff646a; --primary-soft: #ff303815;
    --secondary: #151113; --dark: #080708; --dark-2: #100d0f;
    --dark-3: #191416; --dark-light: #20191c; --dark-card: #171214;
    --dark-card-2: #130f11; --surface: #171214ed; --surface-strong: #1c1518;
    --white: #f6f2f3; --light: #bfb4b9; --muted: #a99ca3;
    --border: #ffffff12; --border-strong: #ffffff26; --border-red: #ff303834;
    --shadow: 0 16px 40px #0005; --shadow-lg: 0 24px 70px #0007;
    --primary-glow: 0 0 22px #ff303818;
    --radius: 20px; --radius-sm: 12px; --radius-lg: 28px; --radius-xl: 32px;
    --sidebar-width: 306px; --top-navbar-height: 76px;
    --aj-red: var(--primary); --aj-red-soft: var(--primary-hover);
    --aj-border: var(--border-strong); --aj-muted: var(--light);
    --aj-card: var(--dark-card); --aj-card-light: var(--dark-card-2);
    --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
}
html { scroll-padding-top: 112px; }
#spinner,#spinner.show { transition: opacity .2s ease,visibility .2s ease; }
#spinner .loading-box::before,#spinner .loading-core,#spinner .loading-dot,#spinner .loading-text { animation: none; }
body { color: var(--white); font-family: 'Vazirmatn FD',sans-serif; background: #060405; }
button,input,textarea,select,pre,h1,h2,h3,h4,h5,h6 { font-family: inherit; }
img { max-width: 100%; }
a,button,input,textarea,select { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline: 2px solid #ff7077; outline-offset: 4px; }
.content { min-width: 0; padding: 20px 12px 28px; background: transparent; }
.content > .container-fluid { max-width: 1600px; }
.content > .navbar.top-navbar { margin: 0 12px 8px; top: 20px; min-height: 64px; border: 1px solid #b0a0a02e; border-radius: 24px; background: linear-gradient(115deg,#1c0d105c,#100c0ce0 48%) !important; box-shadow: 0 10px 30px #0004,inset 0 1px 0 #ffffff05; backdrop-filter: blur(10px); }
.site-navigation { display: flex; align-items: center; justify-content: center; gap: 12px; margin-inline: auto; flex: 1; }
.site-navigation a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; color: #f1ebee; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 30px; text-decoration: none; white-space: nowrap; }
.site-navigation a:hover { color: #fff; background: #ffffff08; }
.site-navigation a.active { background: linear-gradient(180deg,#9d0e1680,#300707a0); border-color: #ff242a9c; color: #fff; box-shadow: inset 0 1px 0 #ff7c7c30,0 0 22px #ff001520; }
.site-navigation i { font-size: 15px; }
.sidebar { top: 20px; right: 18px; bottom: 20px; width: calc(var(--sidebar-width) - 30px); height: calc(100dvh - 40px); padding: 0 !important; border: 1px solid #ff30382e; border-radius: 26px; background: radial-gradient(ellipse at 100% 100%,#a0001918,transparent 46%),linear-gradient(155deg,#1a0e10f2,#0b090af5 55%); box-shadow: 0 20px 60px #0005,inset 0 1px 0 #ffffff0a; backdrop-filter: none; }
.sidebar .navbar { min-height: 100%; flex-direction: column; align-items: stretch; }
.sidebar .navbar-brand { margin: 10px 16px 16px !important; white-space: normal; }
.sidebar .armanjafari_brand_row { position: relative; justify-content: flex-start; gap: 13px; margin: 0; padding: 14px 4px 20px; border-bottom: 1px solid #ffffff0e; text-align: right; }
.sidebar .armanjafari_brand_row::after { content: ''; position: absolute; bottom: -1px; right: 0; width: 64%; height: 1px; background: linear-gradient(to left,#ff3038a0,transparent); }
.sidebar .sidebar-brand-emblem { display: grid; place-items: center; width: 58px; height: 62px; flex-shrink: 0; border: 1px solid #ff303838; border-radius: 17px 7px 17px 7px; background: radial-gradient(ellipse at center,#a40c2438,transparent 75%),#ffffff03; box-shadow: inset 0 1px 0 #ffffff09; }
.sidebar .sidebar-brand-wordmark { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sidebar .sidebar-brand-wordmark strong { color: #f3e9ed; font-size: 20px; line-height: 1.6; font-weight: 850; overflow-wrap: anywhere; }
.sidebar .sidebar-brand-wordmark small { color: #ff6973; font-family: Arial,sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 2.4px; text-align: right; }
.sidebar .armanjafari_brand_row:hover { transform: none; filter: none; }
.sidebar .armanjafari_brand_row img { width: 44px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 8px #ff303830); }
.sidebar .sidebar-profile.d-flex.align-items-center { display: flex; flex-direction: column; gap: 14px; width: auto !important; margin: 4px 18px 20px !important; padding: 8px 8px 22px !important; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; text-align: center; }
.sidebar .sidebar-profile img { width: 104px !important; height: 104px !important; border: 2px solid #ff3038c0; box-shadow: 0 0 24px #ff30382c; }
.sidebar .sidebar-profile h6 { font-size: 20px; line-height: 1.8; }
.sidebar .sidebar-profile.sidebar-account { gap: 12px; padding: 20px 12px !important; margin: 4px 18px 20px !important; border: 1px solid #ff303828; border-radius: 20px; background: linear-gradient(145deg,#39131b45,#ffffff03); }
.sidebar .sidebar-account-avatar { position: relative; display: block; flex-shrink: 0; }
.sidebar .sidebar-account-avatar img { width: 76px !important; height: 76px !important; object-fit: cover; }
.sidebar .sidebar-account-details { min-width: 0; width: 100%; text-align: center; }
.sidebar .sidebar-account-details h6 { font-size: 16px; margin: 0 0 6px; overflow-wrap: anywhere; }
.sidebar .sidebar-account-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .7px; }
.sidebar .sidebar-account-phone i { color: #ff7078; font-size: 13px; }
.sidebar .sidebar-account-dot { position: absolute; bottom: 3px; right: 3px; width: 13px; height: 13px; border: 3px solid #171014; background: #30c77c; border-radius: 50%; }
.sidebar .sidebar-account-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 9px 10px; border: 1px solid #ff303830; border-radius: 10px; color: #efcbd1; font-size: 11px; text-decoration: none; }
.sidebar .sidebar-account-action:hover { background: #ff303815; color: #fff; }
.sidebar .sidebar-profile span { font-size: 11px; color: #c3b5bb; }
.sidebar .navbar .navbar-nav .nav-link { margin: 0 18px; min-height: 44px; padding: 10px 16px; border-radius: 13px; font-size: 14px; gap: 12px; }
.sidebar .navbar .navbar-nav .nav-link i { color: #c6bac0; font-size: 16px; }
.sidebar .navbar .navbar-nav .nav-link.active { background: linear-gradient(110deg,#3b1116,#780e1970); border-color: #ff303863; box-shadow: inset 0 1px 0 #ff898915; }
.sidebar .navbar .navbar-nav .nav-link.active i { color: var(--primary); }
.sidebar .navbar .navbar-nav .nav-link::before { display: none; }
.sidebar .navbar-nav { gap: 5px; }
.sidebar .sidebar-section-label { display: flex; align-items: center; gap: 12px; margin: 15px 24px 7px; }
.sidebar .sidebar-section-label:first-child { margin-top: 0; }
.sidebar .sidebar-section-label > span { flex-shrink: 0; color: #b8a4ae; font-size: 10px; font-weight: 600; line-height: 1.8; }
.sidebar .sidebar-section-label > hr { flex: 1; min-width: 12px; margin: 0; border: 0; height: 1px; background: linear-gradient(to left,#ff30384a,#ffffff12); opacity: 1; }
.sidebar .sidebar-account-exit { margin: 0; }
.sidebar .navbar .navbar-nav .sidebar-logout { width: calc(100% - 36px); text-align: right; background: transparent; color: #ff8c94; }
.sidebar .navbar .navbar-nav .sidebar-logout:hover { background: #ff303812; color: #fff; }
.sidebar-socials { display: flex; justify-content: center; gap: 20px; margin: auto 18px 18px; padding: 15px; border: 1px solid var(--border); border-radius: 16px; background: #ffffff03; }
.sidebar-socials a { color: #e6dce1; font-size: 19px; }
.sidebar-socials a:hover { color: var(--primary); }
.sidebar-toggler { width: 38px; height: 38px; border-radius: 12px; background: #ffffff05; box-shadow: none; }
.user-dropdown { border-radius: 14px; background: #ffffff03; box-shadow: none; }
.user-avatar { border-color: #ff30384d; width: 34px; height: 34px; }
.user-meta .user-status { color: #c2b4bb; }
.skip-navigation { position: fixed; top: -100px; right: 16px; z-index: 1000000; padding: 12px 20px; background: #b50018; color: white; border-radius: 12px; }
.skip-navigation:focus { top: 16px; }
/* Shared surface, including legacy page-specific cards. */
body .bg-secondary,body .aj-section,body .skill-card,body .portfolio-card,body .profile-card,body .desktop-project-panel,body .testimonials .item,body .auth-panel,body .modal-content,body .dropdown-menu,body .card {
    background: radial-gradient(ellipse at 0 0,#8c102015,transparent 45%),linear-gradient(135deg,#1b1518ed,#0d0b0dee) !important;
    border: 1px solid var(--border-strong); box-shadow: var(--shadow),inset 0 1px 0 #ffffff04;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body .aj-section { padding: 30px; border-radius: 30px; margin-bottom: 20px; border-color: #ff606039; background: radial-gradient(ellipse at 0 0,#700a161c,transparent 45%),linear-gradient(120deg,#211719d9,#0c0a0bef) !important; }
body .aj-section::before,body .skill-card::before,body .portfolio-card::before,body .desktop-project-panel::before { background: none; }
body .profile-card { box-shadow: none; border: 0; border-radius: 22px; background: transparent !important; padding: 0; }
body .skill-card,body .portfolio-card { border-radius: 23px; padding: 24px; border-color: #ff6b6b35; background: radial-gradient(ellipse at 100% 0,#8b10202c,transparent 55%),linear-gradient(145deg,#211719d9,#0e0b0ceb) !important; box-shadow: inset 0 1px 0 #ffffff06,0 12px 24px #0003; }
body .skill-card:hover,body .portfolio-card:hover { border-color: #ff30385c; box-shadow: 0 14px 32px #0005; transform: translateY(-3px); }
body .skill-icon,body .portfolio-icon { background: linear-gradient(145deg,#73182370,#271217); border: 1px solid #ff303829; color: #ff4049; box-shadow: inset 0 1px 0 #ff909020; border-radius: 16px; }
body .aj-title { font-size: clamp(24px,2.7vw,40px); line-height: 1.7; letter-spacing: -.8px; }
body .aj-title::before,body .aj-title::after { width: 42px; background: linear-gradient(90deg,transparent,#ff3038,transparent); }
body .aj-subtitle,body .profile-text { color: #c4b9bf; }
body .skill-category-title { justify-content: center; font-size: 20px; margin: 0 auto 28px; width: fit-content; padding: 9px 26px; border-radius: 999px; border: 1px solid #ff303880; background: linear-gradient(180deg,#65101770,#1b0b0d); box-shadow: 0 0 24px #ff001012; }
body .skill-category-title::before { width: 7px; height: 7px; flex-basis: 7px; box-shadow: none; }
body .progress { height: 11px; background: #ffffff17; box-shadow: inset 0 1px 3px #0005; border-radius: 999px; }
body .progress-bar { box-shadow: none; }
body .portfolio-feature,body .hero-tag { background: linear-gradient(135deg,#64101c3d,#110b0e); border: 1px solid #ff30384d; color: #f0e8eb; }
body .desktop-project-panel { border-radius: 22px; }
body .desktop-feature-item { background: #ffffff03; border-color: var(--border); }
body .social-btn { background: #1a1115; border: 1px solid #ff30383d; box-shadow: none; color: #e9dfe4; border-radius: 18px; }
body .social-btn:hover { background: #4c1020; color: white; box-shadow: 0 6px 20px #ff30381a; }
/* The original AJ asset is used without modifying it. */
body .hero-box { min-height: calc(100svh - 116px); background: transparent !important; border: 0; box-shadow: none; padding: 34px 20px 58px; margin-bottom: 0; }
.hero-emblem { width: clamp(160px,15vw,230px); height: clamp(160px,15vw,230px); object-fit: contain; display: block; margin: 0 auto 25px; background: radial-gradient(ellipse,#ff001e60,transparent 66%); filter: drop-shadow(0 0 17px #ff182c45); }
body .hero-brand { gap: 16px; }
body .hero-brand .hero-logo { display: none; }
body .hero-brand h1 { font-size: clamp(44px,5.5vw,84px); font-weight: 900; line-height: 1.6; }
body .hero-description { color: #ded8db; font-size: clamp(14px,1.6vw,22px); max-width: 920px; margin-top: 16px; }
body .hero-tags { margin-top: 35px; gap: 26px; }
body .hero-tag { min-width: 230px; padding: 12px 30px; font-size: 18px; letter-spacing: .5px; border-color: #ff232ab3; background: linear-gradient(180deg,#5b080d9c,#110608b3); box-shadow: inset 0 1px 0 #ff888835,0 0 18px #ff00151a; }
.hero-horizon { width: min(480px,65%); height: 2px; background: linear-gradient(90deg,transparent,#ff001b 40%,#fff 50%,#ff001b 60%,transparent); margin: 44px auto 0; box-shadow: 0 0 18px #ff142c; }
.portfolio-page--home .hero-brand h1::before,.portfolio-page--home .hero-brand h1::after { width: clamp(30px,6vw,110px); height: 2px; box-shadow: 0 0 12px #ff001f80; }
.portfolio-page:not(.portfolio-page--home) .hero-box { min-height: 210px; padding: 10px 16px 24px; }
.portfolio-page:not(.portfolio-page--home) .hero-emblem { display: none; }
.portfolio-page:not(.portfolio-page--home) .hero-brand .hero-logo { display: block; width: 74px; height: 82px; background: radial-gradient(ellipse,#ff001e66,transparent 67%); filter: drop-shadow(0 0 10px #ff001f66); }
.portfolio-page:not(.portfolio-page--home) .hero-brand h1 { font-size: 44px; }
.portfolio-page:not(.portfolio-page--home) .hero-description { margin-top: 8px; font-size: 14px; }
.portfolio-page:not(.portfolio-page--home) .hero-tags { margin-top: 14px; gap: 22px; }
.portfolio-page:not(.portfolio-page--home) .hero-tag { font-size: 12px; padding: 7px 24px; min-width: 150px; }
.about-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.about-facts > div { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 16px 8px; border: 1px solid #ff30383f; border-radius: 19px; background: linear-gradient(135deg,#5b101929,#100c0c); }
.about-facts i { color: #ff3038; font-size: 24px; margin-bottom: 4px; }
.about-facts small { font-size: 11px; color: #c9bec4; }
.about-facts strong { font-size: 13px; }
.about-details-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.about-details-grid h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; margin-bottom: 28px; }
.about-details-grid h2 i { color: #ff3038; font-size: 25px; }
.about-journey ol { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0; margin: 0; list-style: none; gap: 12px; }
.about-journey ol::before { content: ''; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg,#ff303830,#ff3038,#ff303830); }
.about-journey li { display: flex; align-items: center; flex-direction: column; gap: 10px; text-align: center; position: relative; }
.about-journey li i { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #ff303870; border-radius: 16px; background: linear-gradient(135deg,#4d0c16,#130b0e); color: #ff3038; font-size: 23px; margin-bottom: 9px; }
.about-journey li strong { font-size: 12px; }
.about-journey li span { font-size: 11px; color: #bfb4bb; }
.about-interests > div { display: flex; flex-wrap: wrap; gap: 16px 12px; }
.about-interests > div > span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid #ff30386b; border-radius: 999px; background: linear-gradient(135deg,#4d0c1630,#130b0e); color: #e3dce0; font-size: 12px; }
.about-interests > div i { color: #ff3038; font-size: 20px; }
.portfolio-page #about .profile-text { font-size: 16px; line-height: 2.2; }
.portfolio-page #about .profile-card > .aj-title { margin-bottom: 12px !important; }
.portfolio-page #about .profile-carousel-card { height: 100%; display: flex; align-items: center; }
.portfolio-page .profile-image-frame { min-height: 0; }
.portfolio-page .owl-armanprofiles .arman-jafari-profile-image { max-width: 100%; max-height: 400px; object-fit: cover; }
.portfolio-page--about #about .col-lg-4 { flex: 0 0 28%; width: 28%; }
.portfolio-page--about #about .col-lg-8 { flex: 0 0 72%; width: 72%; }
.portfolio-page--about #about .arman-jafari-profile-image { width: 100%; height: 300px; max-height: 300px; object-fit: cover; }
.portfolio-page--about #about .profile-text { font-size: 18px; line-height: 1.95; }
.portfolio-page--about #about .owl-dots { margin-top: 10px; }
.sidebar .navbar { min-height: calc(100% - 2px); }
.portfolio-page .sidebar-toggler { display: none; }
.portfolio-page .user-navbar { margin-right: 0 !important; }
.portfolio-page .user-dropdown { padding: 6px; border: 0; background: transparent; }
.portfolio-page .user-dropdown::after { display: none; }
.portfolio-page .user-dropdown .user-avatar { width: 28px; height: 28px; }
.portfolio-page .user-meta { display: none !important; }
.sidebar-socials a:has(.fa-youtube) { color: #ff1832; }
.sidebar-socials a:has(.fa-instagram) { color: #ff4b8a; }
.hero-explore { display: flex; justify-content: center; margin-top: 30px; }
.hero-explore a { color: #cbbec5; text-decoration: none; font-size: 12px; display: inline-flex; gap: 12px; align-items: center; }
.hero-explore a:hover { color: #ff6169; }
body .arman-jafari-profile-image { border-radius: 24px; border: 1px solid #ff303870; box-shadow: 0 0 18px #ff303818; }
body .testimonials .item::before { background: none; }
/* Form and data components. Semantic status colours remain meaningful. */
body .form-control,body .form-select,body .auth-input-wrap .form-control { background-color: #0d0a0c !important; border: 1px solid #ffffff20; color: #f6f2f3; border-radius: 12px; min-height: 46px; box-shadow: inset 0 1px 3px #0003; }
body .form-control::placeholder { color: #9e8f98; opacity: 1; }
body .form-control:focus,body .form-select:focus { border-color: #ff3038a0; box-shadow: 0 0 0 3px #ff303818; }
body .form-label,body label { color: #ded3d9; }
body .btn { border-radius: 12px; font-weight: 600; transition: background .16s,border-color .16s,transform .16s; }
body .btn-primary { background: linear-gradient(135deg,#e72534,#ac1020); border: 1px solid #ff515d; box-shadow: 0 5px 16px #d7152420; }
body .btn-primary:hover { background: linear-gradient(135deg,#ff3947,#ca1829); transform: translateY(-1px); box-shadow: 0 8px 22px #d7152430; }
body .btn-outline-primary { border-color: #ff30385c; color: #ff8c94; background: #ff303808; }
body .btn-outline-primary:hover { background: #701321; color: #fff; }
body .table { --bs-table-bg: transparent; --bs-table-color: #d9cdd3; --bs-table-hover-bg: #ff303807; --bs-table-striped-bg: #ffffff03; }
body .table th { background: #24171de0; color: #efe5eb; font-size: 12px; padding: 16px; }
body .table td { border-color: #ffffff0b; padding: 14px 16px; font-size: 13px; }
body .table-responsive { border-radius: 16px; border-color: var(--border); }
body .table tbody tr:hover { background: #ff303807; }
body .dropdown-menu { border-radius: 16px; padding: 8px; }
body .dropdown-item { color: #dfd3da; border-radius: 9px; padding: 10px 14px; }
body .dropdown-item:hover,body .dropdown-item:focus,body .dropdown-item.active { background: #ff303818; color: #fff; }
body .modal-content { border-radius: 24px; }
body .modal-header,body .modal-footer { border-color: var(--border); }
body .alert { border-radius: 14px; box-shadow: none; backdrop-filter: none; }
body .page-link { background: #160f13; border-color: #ffffff14; color: #d7c7d0; border-radius: 9px; margin: 0 3px; }
body .page-item.active .page-link { background: #af1426; border-color: #ff3038; color: white; }
body .page-item.disabled .page-link { background: #100c0e; color: #887780; border-color: #ffffff0d; }
body .nav-tabs { border-color: var(--border); gap: 6px; }
body .nav-tabs .nav-link { color: #c8b7c1; border-radius: 12px 12px 0 0; }
body .nav-tabs .nav-link.active { color: #ff7b84; background: #231219; border-color: #ff30383d; }
body .tooltip-inner { background: #30171f; color: #fff; padding: 8px 12px; border: 1px solid #ff303830; border-radius: 10px; }
body .comments-empty { background: #120c10; border-color: #ffffff20; box-shadow: none; border-radius: 20px; }
body .auth-page { padding: 32px 18px; }
body .auth-orb,body .auth-page::before { display: none; }
body .auth-panel { border-radius: 28px; border-color: #ff30382e; }
body .auth-side { background: linear-gradient(150deg,#4b0b1870,#120c10); border-color: var(--border); }
body .auth-content { padding: 40px; }
body .auth-brand-logo { filter: drop-shadow(0 0 12px #ff303830); }
body .auth-feature,body .auth-mini-card,body .auth-input-wrap { backdrop-filter: none; box-shadow: none; }
body .auth-input-wrap { background: transparent; }
body .bg-gray-100,body .bg-white,body .dark\:bg-gray-900,body .dark\:bg-gray-800 { background-color: #140e12; color: #f2e8ee; }
body .text-gray-900,body .text-gray-800,body .text-gray-700,body .text-gray-600 { color: #d5c6d0; }
body .shadow-md { border: 1px solid #ff303829; border-radius: 22px; }
body .border-gray-300 { border-color: #ffffff26; background-color: #0c080b; color: #f6edf2; }
@media(min-width: 992px) { .sidebar.open { margin-right: calc(var(--sidebar-width) * -1); } }
@media(max-width: 1399px) { .site-navigation a { padding: 9px 10px; font-size: 12px; gap: 6px; } .user-meta { display: none !important; } }
@media(max-width: 1199px) { .site-navigation { gap: 0; } .site-navigation a { padding: 9px; } .site-navigation i { display: none; } }
@media(max-width: 991.98px) {
    .about-details-grid { grid-template-columns: 1fr; }
    .content { padding: 10px 0 20px; }
    .content > .navbar.top-navbar { top: 8px; margin: 0 16px 8px; }
    .site-navigation { display: none; }
    .sidebar { top: 88px; right: 12px; bottom: 12px; height: auto !important; width: min(282px,86vw); padding-top: 0; margin-right: calc(min(282px,86vw) * -1 - 24px); }
    .sidebar.open { margin-right: 0; }
    .sidebar .sidebar-profile { gap: 10px; }
    .sidebar .sidebar-profile img { width: 64px !important; height: 64px !important; }
    body .hero-box { min-height: 620px; }
    .content .container-fluid.p-4,.content .container-fluid.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
    body { background-attachment: scroll; background-size: 100% 900px,cover,cover; background-position: center top,center,center; }
    .portfolio-page--about #about .col-lg-4,.portfolio-page--about #about .col-lg-8 { flex: 0 0 100%; width: 100%; }
    .portfolio-page .sidebar-toggler { display: inline-flex; }
}
@media(max-width: 575.98px) {
    body .aj-section { padding: 22px 16px; border-radius: 22px; margin-bottom: 18px; }
    body .hero-box { min-height: 540px; padding: 35px 6px; }
    body .hero-brand h1 { font-size: 40px; }
    body .hero-tags { gap: 12px; }
    body .hero-tag { min-width: 132px; padding: 9px 14px; font-size: 11px; }
    .hero-emblem { width: 155px; height: 155px; }
    .portfolio-page:not(.portfolio-page--home) .hero-brand h1 { font-size: 29px; }
    .portfolio-page:not(.portfolio-page--home) .hero-brand { flex-direction: row; gap: 8px; }
    .portfolio-page:not(.portfolio-page--home) .hero-brand .hero-logo { width: 48px; height: 54px; }
    .portfolio-page:not(.portfolio-page--home) .hero-description { font-size: 12px; }
    .portfolio-page:not(.portfolio-page--home) .hero-box { min-height: 230px; }
    .portfolio-page:not(.portfolio-page--home) .hero-tag { min-width: 120px; font-size: 10px; padding: 7px 15px; }
    .about-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body .hero-description { line-height: 2.2; }
    body .skill-card,body .portfolio-card { padding: 20px; }
    body .auth-content { padding: 26px 20px; }
    .content > .navbar.top-navbar { border-radius: 17px; min-height: 64px; }
    body .aj-title { gap: 9px; font-size: 25px; }
    body .aj-title::before,body .aj-title::after { width: 22px; flex-shrink: 0; }
    .sidebar-socials { margin-top: 16px; }
    .notification-wrapper { max-width: 100vw; }
}
@media(prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Rendering below-fold portfolio sections can wait until they approach the viewport. */
.portfolio-page--home #about,.portfolio-page--home #skills,.portfolio-page--home #contact,.portfolio-page--home #projects { content-visibility: auto; contain-intrinsic-size: auto 700px; }