@font-face {font-family: 'FC-Azonix'; src: url('../fonts/FC-Azonix.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap;}    

:root {
    --solaw-c-navy:       #000435;  
    --solaw-c-orange:     #F97316;  
    --solaw-c-white:      #ffffff;  

    --solaw-c-gray-0:     #f8fafc;
    --solaw-c-gray-1:     #f1f5f9;  
    --solaw-c-gray-2:     #e2e8f0;  
    --solaw-c-gray-3:     #cbd5e1;
    --solaw-c-gray-4:     #94a3b8;
    --solaw-c-gray-5:     #64748b;
    --solaw-c-gray-6:     #475569;
    --solaw-c-gray-7:     #334155;
    --solaw-c-gray-8:     #1e293b; 
    --solaw-c-gray-9:     #0f172a; 
    
    --solaw-c-rose-1:     #fff1f2;
    --solaw-c-rose-3:     #fda4af;
    --solaw-c-rose-6:     #e11d48;

    --solaw-c-orange-4:   #fb923c;
    --solaw-c-orange-5:   #f97316;

    --solaw-p-1:          12px;  
    --solaw-p-2:          20px;  
    --solaw-p-3:          32px; 

    --solaw-r-1:          8px;   
    --solaw-r-2:          12px;  
    --solaw-r-3:          16px;  

    --solaw-f-ui:         'Source Serif 4', serif; 
    --solaw-f-legal:      'Gentium Plus', serif;    
    --solaw-f-brand:      'FC-Azonix', serif; 
    --solaw-f-latinh:     'Bodoni Moda', serif;      
    
    --solaw-s-default-bg: #f1f5f9; 
    --solaw-s-default-c:  #64748b;
    
    --solaw-s-info-bg:    #e0f2fe;
    --solaw-s-info-c:     #0ea5e9;

    --solaw-s-warning-bg: #fef3c7;
    --solaw-s-warning-c:  #f59e0b;

    --solaw-s-success-bg: #d1fae5;
    --solaw-s-success-c:  #10b981;

    --solaw-s-danger-bg:  #ffe4e6;
    --solaw-s-danger-c:   #f43f5e;
    
    --solaw-s-primary-bg: #e0e7ff;
    --solaw-s-primary-c:  #6366f1;

    --solaw-s-founder-bg: #1e293b; 
    --solaw-s-founder-c:  #f8fafc;
}

*                                                       {margin: 0; padding: 0; box-sizing: border-box;}    
    .frons                                              {position: fixed; width: 100%; height: 4rem; display: flex; align-items: center; padding: 2rem;}
    .nomen                                              {font-family: var(--solaw-f-latinh); text-decoration: none; font-weight: 700; color: var(--solaw-c-navy); font-size: 1.2rem;}
    .actio                                              {margin-left: auto; display: flex; align-items: center; gap: 15px;}
    .facies                                             {width: 32px; height: 32px; border-radius: 50%; background-color: var(--solaw-c-navy); cursor: pointer; overflow: hidden;}
    .initium                                            {display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px;  background-color: var(--solaw-c-navy); border-radius: 50px; text-decoration: none; height: 44px;}
    .initium:hover                                      {background-color: #000000;}
    .home .initium:hover .signum                        {color: #000000;}
    .verbum                                             {color: #ffffff; font-weight: 700; font-size: 0.95rem;}
    .signum                                             {width: 32px; height: 32px; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000435;}

        .home .intro                                    {height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
        .home .quote                                    {font-size: 72px; color: var(--solaw-c-gray-7); font-weight: 500; letter-spacing: -0.03em; max-width: 1000px;}
        .home .tag                                      {color: var(--solaw-c-gray-4); font-size: 16px; font-family: var(--solaw-f-brand);  margin-top: 2rem;  letter-spacing: 0.2em;}
        .home .grid                                     {padding: 100px 2rem; min-height: 100vh; display: flex; justify-content: center;}
            .home .card                                 {width: 100%; max-width: 1000px;}
            .home .head                                 {margin-bottom: 40px;}
                .home .head .item:hover                 {font-weight: 700; color: var(--solaw-c-gray-8); border-bottom: 1px solid var(--solaw-c-gray-2);} 
                .home .head                             {font-family: var(--solaw-f-ui); font-size: 14px; color: var(--solaw-c-gray-7); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; display: block; font-weight: 700;}
                .home .item                             {display: flex; justify-content: space-between; align-items: baseline; text-decoration: none; color: var(--solaw-c-gray-5); padding: 12px 0; transition: color 0.2s ease;}

        .lectio .involucrum                             {padding: 120px 2rem 4rem 2rem; min-height: 100vh; display: flex; justify-content: center;}
        .lectio .dispositio                             {display: grid; grid-template-columns: 240px 1fr; gap: 40px; width: 100%; max-width: 1200px;}
        .lectio .margo                                  {position: sticky; top: 4rem; height: fit-content; padding-right: 20px;}
        .lectio .index                                  {font-size: 16px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--solaw-c-gray-4); margin-bottom: 12px; display: block; font-weight: 700;}
        .lectio .nexus                                  {display: block; font-family: var(--solaw-f-ui); font-size: 14px; color: var(--solaw-c-gray-5); text-decoration: none; padding: 8px 0; transition: color 0.2s;}
            .lectio .minor                              {margin-left: 12px}
            .lectio .nexus:hover, .lectio .nexus.active {color: var(--solaw-c-gray-7); font-weight: 600;}
        .lectio .materies                               {width: 100%; max-width: 800px;}
        .lectio .fasciculus                             {margin-bottom: 40px;}
        .lectio .inscriptio                             {font-family: var(--solaw-f-ui); font-size: 28px; color: var(--solaw-c-gray-7); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; font-weight: 700;}
        .lectio .versus                                 {display: flex; flex-direction: column; align-items: baseline; text-decoration: none;  color: var(--solaw-c-gray-5); padding: 12px 0;}
        .lectio .titulus                                {font-weight: 700;}
        .lectio .sententia                              {margin-bottom: 16px; line-height: 1.6; color: var(--solaw-c-gray-7); text-align: justify; font-size: 20px;}