/* ---------------------------------------------------------------------------
 * neodev.co.za — styles.css
 * Layered top to bottom: @font-face → tokens → reset → base typography.
 * ------------------------------------------------------------------------- */

/* --- @font-face ---------------------------------------------------------- */

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/jost-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Cascadia Code NF';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/cascadia-code-nf-400.woff2') format('woff2');
}

/* --- Design tokens ------------------------------------------------------- */

:root {
    /* Inks — page surfaces, dark to slightly-less-dark */
    --ink-0: #0B0A12;       /* page background — near-black with 4% purple shift */
    --ink-1: #15131D;       /* surface (cards, dividers backdrop) */
    --ink-2: #26222F;       /* hairlines, subtle borders */

    /* Text */
    --text-hi: #EDEAF2;     /* body — off-white, faint violet tint */
    --text-lo: #9B96A8;     /* secondary, captions, marginalia */

    /* Brand & accent */
    --brand-purple: #42145F;                       /* sacred, brand-spec; logo & hero only */
    --accent-violet: #A576E6;                      /* links, focus, active — brand purple lifted */
    --accent-violet-glow: rgba(165, 118, 230, 0.35);
    --mono-accent: #7CFFB2;                        /* reserved — used at most once on the page */

    /* Type families */
    --font-display: 'Jost', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'Cascadia Code NF', ui-monospace, 'Cascadia Code', SFMono-Regular, Menlo, monospace;

    /* Spacing scale — modular, used throughout */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Type scale — fluid, mobile to desktop, modular ratio ~1.25 */
    --text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.85rem);
    --text-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
    --text-base: clamp(1rem,     0.95rem + 0.22vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1.06rem + 0.32vw, 1.31rem);
    --text-xl:   clamp(1.4rem,   1.28rem + 0.6vw,  1.75rem);
    --text-2xl:  clamp(1.75rem,  1.55rem + 1vw,    2.4rem);
    --text-3xl:  clamp(2.25rem,  1.85rem + 2vw,    3.5rem);
    --text-4xl:  clamp(3rem,     2.3rem + 3.4vw,   5rem);

    /* Motion */
    --motion-fast: 160ms;
    --motion-slow: 400ms;
    --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);

    color-scheme: dark;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--ink-0);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote { margin: 0; }

ul, ol { padding: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
    color: var(--accent-violet);
    text-decoration: none;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color var(--motion-fast) var(--ease-out);
}

a:hover, a:focus-visible {
    color: var(--text-hi);
    text-decoration: underline;
    text-decoration-color: var(--accent-violet);
}

a:focus-visible {
    outline: 2px solid var(--accent-violet);
    outline-offset: 3px;
    border-radius: 1px;
}

::selection {
    background: var(--accent-violet);
    color: var(--ink-0);
}

/* --- Base typography ----------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-hi);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--text-hi); }

small, .text-sm { font-size: var(--text-sm); color: var(--text-lo); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

code {
    color: var(--text-hi);
    background: var(--ink-1);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    border: 1px solid var(--ink-2);
}

pre {
    background: var(--ink-1);
    border: 1px solid var(--ink-2);
    border-radius: 4px;
    padding: var(--space-4);
    overflow-x: auto;
    line-height: 1.55;
}

pre code {
    background: transparent;
    border: 0;
    padding: 0;
}

/* --- Layout -------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-2);
    background: var(--ink-1);
    color: var(--text-hi);
    padding: var(--space-3) var(--space-4);
    z-index: 100;
    text-decoration: none;
    border: 1px solid var(--accent-violet);
    border-radius: 3px;
    font-size: var(--text-sm);
}

.skip-link:focus-visible {
    top: var(--space-2);
}

.container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--space-6);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--space-12); }
}

.hero {
    min-height: 80dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: var(--space-12);
    padding-inline: var(--space-6);
    max-width: 1280px;
    margin-inline: auto;
    position: relative;
}

@media (min-width: 768px) {
    .hero { padding-inline: var(--space-12); }
}

.hero-inner {
    margin-block: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 56rem;
}

.wordmark {
    width: min(60vw, 32rem);
    height: auto;
    /* Static glow — animation is layered on top under no-preference. */
    filter: drop-shadow(0 0 32px var(--accent-violet-glow));
}

.wm-neo { fill: var(--text-hi); }
.wm-dev { fill: var(--accent-violet); }

@keyframes glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 26px var(--accent-violet-glow)); }
    50%      { filter: drop-shadow(0 0 44px var(--accent-violet-glow)); }
}

@media (prefers-reduced-motion: no-preference) {
    .wordmark { animation: glow-pulse 6s ease-in-out infinite; }
}

.hero-tagline {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--text-hi);
    text-wrap: balance;
    margin-block-start: var(--space-12);
}

.hero-desc {
    color: var(--text-lo);
    font-size: var(--text-base);
    max-width: 56ch;
    line-height: 1.55;
    margin-block-start: var(--space-4);
}

/* Caret — CSS-drawn rectangle so it's font-independent and renders identically
 * regardless of which fallback supplies block-element glyphs. */
.caret {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background: var(--accent-violet);
    vertical-align: -0.08em;
    margin-inline-start: 0.25em;
}

@keyframes blink {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .caret { animation: blink 1s step-end infinite; }
}

.scroll-cue {
    color: var(--text-lo);
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    line-height: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: 4px;
    transition: color var(--motion-fast) var(--ease-out);
    /* Decoupled from the centered content block: sits in the lower portion
     * of the hero (≈18% from bottom of 80dvh) so it gets its own visual zone
     * without pinning to the absolute bottom edge. Phone-only — see ≥768
     * media query below. */
    position: absolute;
    inset-inline: 0;
    inset-block-end: 18%;
    margin-inline: auto;
    width: max-content;
}

.scroll-cue:hover, .scroll-cue:focus-visible {
    color: var(--accent-violet);
    text-decoration: none;
}

/* On tablet and up, the next section's marginalia label peeks above the
 * fold and the scrollbar UI carries the scroll affordance. The arrow only
 * earns its place on phone-sized viewports. */
@media (min-width: 768px) {
    .scroll-cue { display: none; }
}

main > section {
    padding-block: var(--space-16);
}

.marginalia {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-lo);
    margin-block-end: var(--space-4);
}

.reading {
    max-width: 68ch;
}

.reading > * + * {
    margin-block-start: var(--space-4);
}

/* Editorial two-track: marginalia in the left margin, prose to its right. */
@media (min-width: 1024px) {
    main > section {
        display: grid;
        grid-template-columns: minmax(0, 200px) minmax(0, 68ch);
        column-gap: var(--space-12);
        justify-content: center;
        align-items: start;
    }
    main > section > .marginalia {
        text-align: right;
        margin-block-end: 0;
        /* Nudge label baseline closer to the heading's cap height. */
        padding-block-start: 0.55em;
    }
    main > section > .reading {
        max-width: none;
    }
}

/* Section divider: hairline rule, full content width, with a quiet
 * monospace flourish at the trailing edge. The flourish sits on the
 * line itself, masked by the page background so the rule appears to
 * pause briefly at its end. */
.divider {
    height: 1px;
    background: var(--ink-2);
    position: relative;
    margin: 0;
}

.divider::after {
    content: '\00B7  \00B7';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    background: var(--ink-0);
    color: var(--text-lo);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1;
    padding-inline: var(--space-3);
    letter-spacing: 0.1em;
}

footer {
    padding-block: var(--space-12);
    border-top: 1px solid var(--ink-2);
    color: var(--text-lo);
    font-size: var(--text-sm);
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3) var(--space-8);
}

.footer-row > p { margin: 0; }

@media (max-width: 640px) {
    .footer-row { justify-content: center; text-align: center; }
}

/* --- Stack pills --------------------------------------------------------- */

.stack-pills {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 2rem;
    padding-inline: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-hi);
    background: var(--ink-1);
    border: 1px solid var(--ink-2);
    border-radius: 4px;
    line-height: 1;
}

.pill-icon {
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
    fill: var(--accent-violet);
}

/* --- How-we-work numbered list (terminal-flavoured, no frame) ------------ */

.how-list {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-6);
    counter-reset: how-line;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    display: grid;
    gap: var(--space-2);
}

.how-list > li {
    counter-increment: how-line;
    color: var(--text-hi);
    display: grid;
    grid-template-columns: 2.5ch 1fr;
    column-gap: 0.5ch;
}

.how-list > li::before {
    content: counter(how-line) ".";
    color: var(--accent-violet);
}

/* --- Prompt-mailto ------------------------------------------------------- */

.prompt-mailto {
    display: block;
    margin-block-start: var(--space-8);
    max-width: 100%;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1;
    text-decoration: none;
    color: var(--text-lo);
    border-radius: 4px;
}

.prompt-mailto:hover,
.prompt-mailto:focus-visible {
    color: var(--text-lo);  /* override default `a:hover` color shift */
    text-decoration: none;
}

.prompt-mailto:focus-visible {
    outline: 2px solid var(--accent-violet);
    outline-offset: 4px;
}

.pm-row {
    display: inline-flex;
    align-items: stretch;
}

.pm-user {
    background: var(--ink-1);
    color: var(--text-lo);
    padding: var(--space-2) var(--space-3);
}

.pm-sep {
    /* Powerline U+E0B0 chevron, painted in the user-segment fill so the
     * segment visually wedges into the no-fill region. Glyph is injected
     * via ::before to keep the HTML free of the codepoint and to keep
     * the chevron out of the user's text-selection of the link. */
    color: var(--ink-1);
    padding-block: var(--space-2);
    margin-inline-end: var(--space-2);
}

.pm-sep::before { content: '\e0b0'; }

.pm-path,
.pm-prompt,
.pm-cmd {
    padding-block: var(--space-2);
}

.pm-prompt {
    color: var(--accent-violet);
    padding-inline: var(--space-2);
    transition: color var(--motion-fast) var(--ease-out);
}

.pm-cmd { color: var(--text-hi); }

.pm-addr {
    color: var(--accent-violet);
    transition: color var(--motion-fast) var(--ease-out),
                text-shadow var(--motion-fast) var(--ease-out);
}

.prompt-mailto:hover .pm-prompt,
.prompt-mailto:focus-visible .pm-prompt {
    color: var(--text-hi);
}

.prompt-mailto:hover .pm-addr,
.prompt-mailto:focus-visible .pm-addr {
    color: var(--text-hi);
    text-decoration: underline;
    text-decoration-color: var(--accent-violet);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    text-shadow: 0 0 8px var(--accent-violet-glow);
}

.pm-flag { color: var(--text-lo); }

/* Caret inside the prompt-mailto: sized to the text (~1em tall) and
 * vertically centered on the text line — not the full padded row. */
.pm-row > .caret {
    height: 1em;
    width: 0.45em;
    align-self: center;
    margin-inline-start: 0.35em;
}

/* On narrow viewports the user@host segment + chevron + subject flag eat
 * too much room and push the address off the visible strip. Drop the
 * decorative prefix and the `-s "..."` flag; the action collapses to
 * `% mutt careers@…` and the address stays visible. The subject still
 * travels in the mailto:?subject= URL. */
@media (max-width: 480px) {
    .pm-user, .pm-sep, .pm-flag { display: none; }
}

/* --- Footer general-inquiry email ---------------------------------------- */

.footer-email {
    color: var(--text-lo);
    text-decoration: underline;
    text-decoration-color: var(--ink-2);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.footer-email:hover,
.footer-email:focus-visible {
    color: var(--accent-violet);
    text-decoration-color: var(--accent-violet);
}