/* ===========================================================
   UNAMIQ — shared styles
   Loaded on every page: reset, base body, custom cursor, the
   top navigation, and small reusable pieces (section labels).
   Page-specific look lives in home.css or pages.css instead.
=========================================================== */

:root{
    --bg-color: rgb(7,7,8);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    width:100%;
}

body{
    background:var(--bg-color);
    color:white;
    font-family:"Space Grotesk", sans-serif;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
}

/* ===========================================================
   CUSTOM CURSOR
   A minimal reticle — thin circle with four corner ticks —
   in place of the default arrow. Only on devices that actually
   have a precise pointer; touch devices are untouched.
=========================================================== */

@media (hover:hover) and (pointer:fine){

    body{
        cursor:
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="7" fill="none" stroke="white" stroke-opacity="0.75" stroke-width="1"/><line x1="14" y1="1" x2="14" y2="6" stroke="white" stroke-opacity="0.75" stroke-width="1"/><line x1="14" y1="22" x2="14" y2="27" stroke="white" stroke-opacity="0.75" stroke-width="1"/><line x1="1" y1="14" x2="6" y2="14" stroke="white" stroke-opacity="0.75" stroke-width="1"/><line x1="22" y1="14" x2="27" y2="14" stroke="white" stroke-opacity="0.75" stroke-width="1"/></svg>') 14 14,
            crosshair;
    }

}

/* ===========================================================
   TOP NAVIGATION
   Fixed, same on every page. A soft top-fade behind it keeps
   the links legible over a bright hero image; on the black
   subpages that gradient is invisible against the background,
   so one set of rules works everywhere.
=========================================================== */

.site-nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:28px 44px;

    background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent);

    pointer-events:none; /* re-enabled on the links themselves */
}

.site-nav a{
    pointer-events:auto;
    display:inline-block;

    text-decoration:none;
    font-family:"Space Grotesk", sans-serif;
    font-weight:700;
    font-size:.8rem;
    letter-spacing:.1em;
    text-transform:uppercase;

    color:rgba(255,255,255,.85);
    transition:opacity .3s ease, color .3s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}

.site-nav a:hover{
    color:rgba(255,255,255,1);
    transform:scale(1.08);
}

.site-nav a.current{
    color:white;
}

.nav-links{
    display:flex;
    gap:36px;
}

.back-link{
    font-size:.72rem !important;
    letter-spacing:.08em !important;
    color:rgba(255,255,255,.6) !important;
}

.back-link:hover{
    color:rgba(255,255,255,.9) !important;
}

@media(max-width:600px){

    .site-nav{ padding:20px 24px; }
    .nav-links{ gap:20px; }
    .site-nav a{ font-size:.7rem; letter-spacing:.06em; }

}

/* ===========================================================
   SHARED SMALL CAPTION LABEL
   Used above page headings on About / Projects / Contact —
   same small tracked mono style as the home page telemetry.
=========================================================== */

.section-label{
    font-family:"Space Mono", monospace;
    font-size:.72rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
    margin-bottom:18px;
}