/* ==============================================================
   Base — typography + structure shared across pages.
   ============================================================== */

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--font-sans);
    font-size:var(--t-base);
    font-weight:420;
    line-height:var(--lh-body);
    letter-spacing:var(--ls-body);
    transition:background-color .4s var(--ease), color .4s var(--ease);
    overflow-x:hidden;
}

/* ---------- Sticky top bar (all pages) ---------- */
.topbar{
    position:sticky;
    top:0;
    z-index:50;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:1rem;
    padding:var(--space-page) var(--space-page) 1rem;
    background:linear-gradient(to bottom, var(--bg) 75%, transparent);
    pointer-events:none;
}
.topbar > *{ pointer-events:auto; }

.wordmark{
    display:inline-flex;
    align-items:baseline;
    gap:.6em;
    font-family:var(--font-sans);
    font-size:1rem;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--fg);
}
.wordmark .star{
    font-family:var(--font-mono);
    color:var(--accent);
    font-size:.9em;
}

/* Inline four-point star used as a separator/bullet (e.g. in .tools tags,
   footer copyright). Sized way down so it reads as a small bullet. */
.star{
    display:inline-block;
    font-size:.4em;
    vertical-align:middle;
    line-height:1;
    margin-inline:.2em;
    transform:translateY(-.1em);
}
.wordmark .role{
    color:var(--fg-muted);
    font-weight:420;
}

.topbar-nav{
    display:flex;
    gap:1.75rem;
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
}
.topbar-nav a{
    color:var(--fg-muted);
    transition:color var(--dur) var(--ease);
    position:relative;
}
.topbar-nav a:hover,
.topbar-nav a.is-active{
    color:var(--fg);
}
.topbar-nav a.is-active::before{
    content:'';
    position:absolute;
    left:-.75em;
    top:50%;
    width:.4em;
    height:.4em;
    background:var(--accent);
    border-radius:50%;
    transform:translateY(-50%);
}

/* ---------- Theme + footer chrome ---------- */
.bottombar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:50;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.25rem var(--space-page) calc(var(--space-page) - .5rem);
    background:linear-gradient(to top, var(--bg) 60%, transparent);
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-faint);
    pointer-events:none;
}
.bottombar > *{ pointer-events:auto; }

.theme-toggle{
    /* Hidden for now — site is locked to light mode universally. */
    display:none;
    gap:.25rem;
    align-items:center;
    background:var(--bg);
    padding:.4rem .75rem;
    border:1px solid var(--rule);
    border-radius:999px;
}
.theme-toggle button{
    font-family:inherit;
    font-size:inherit;
    letter-spacing:inherit;
    text-transform:inherit;
    color:var(--fg-faint);
    padding:.3rem;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.theme-toggle button.is-active{
    color:var(--bg);
    background:var(--fg);
}
.theme-icon{
    width:.95rem;
    height:.95rem;
    display:block;
}

/* ---------- Section headings ---------- */
.section-label{
    display:flex;
    align-items:baseline;
    gap:.75rem;
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-muted);
}
.section-label::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--rule);
}

/* ---------- Link styles ---------- */
.link{
    color:inherit;
    border-bottom:1px solid var(--rule-strong);
    transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    padding-bottom:.05em;
}
.link:hover{
    color:var(--accent);
    border-color:var(--accent);
}

/* Highlight-wipe variant — brand-blue sweeps in from the left on hover and
   flips the text to white. Underline (border-bottom) matches base .link so
   sibling links stay visually aligned. */
.link--highlight{
    padding-inline:0 .25em;
    margin-inline:.05em -.25em;
    background-image:linear-gradient(var(--accent), var(--accent));
    background-repeat:no-repeat;
    background-position:left center;
    background-size:0% 100%;
    transition:color var(--dur) var(--ease),
               border-color var(--dur) var(--ease),
               background-size .35s var(--ease);
}
.link--highlight:hover{
    color:#fff;
    background-size:100% 100%;
    border-color:transparent;
}

/* ---------- Small inline arrow utility ---------- */
.arr{
    display:inline-block;
    transform:translateY(-.05em);
    margin:0 .12em;
}

/* ---------- Mono inline tag ---------- */
.mono{
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-muted);
}

/* ---------- Mobile topbar ---------- */
@media (max-width:680px){
    .topbar-nav{ gap:1rem; }
    .topbar-nav a.is-active::before{ display:none; }
    .wordmark .role{ display:none; }
    .bottombar{
        font-size:.55rem;
        white-space:nowrap;
        gap:.75rem;
    }
}

/* ---------- Cursor trail (binary + soba easter egg) ---------- */
.cursor-trail{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.cursor-bit{
    position:fixed;
    font-family:'Switzer', system-ui, sans-serif;
    letter-spacing:.02em;
    font-size:10px;
    color:var(--fg);
    opacity:.4;
    transform:translate(-50%, -50%);
    animation:cursor-bit-fade .6s linear forwards;
    will-change:opacity, transform;
}

@keyframes cursor-bit-fade{
    from{ opacity:.4; transform:translate(-50%, -50%); }
    to  { opacity:0;  transform:translate(-50%, calc(-50% - 12px)); }
}

@media (hover:none), (prefers-reduced-motion: reduce){
    .cursor-trail{ display:none; }
}