@charset "UTF-8";

/* =====================================================
   DESIGN TOKENS
===================================================== */
:root {
    /* Colour */
    --ink:        #0a0a0a;
    --ink-soft:   #333333;
    --ink-muted:  #888888;
    --rule:       #e0e0e0;
    --rule-light: #ececec;
    --surface:    #f6f6f4;
    --white:      #ffffff;
    --blue:       #1A52CC;
    --blue-dark:  #1240A8;
    --blue-tint:  #EDF1FB;

    /* Typography */
    --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body:    -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif:   "New York", "Georgia", serif;
    --font-mono:    "SF Mono", "Fira Mono", "Courier New", monospace;

    /* Spacing unit */
    --u: 8px;

    /* Page margin — all pages align to this */
    --m: 50px;

    /* Grid gutter */
    --gap: 10px;
}

/* =====================================================
   RESET
===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-body);
    color: var(--blue);
    background: var(--surface);
    line-height: 1.5;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }

/* =====================================================
   NAV
===================================================== */
header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 var(--m);
    background: #ebebeb;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-logo {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--ink);
    transition: color 0.15s ease;
}
.nav-logo:hover { color: var(--ink-muted); }

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links li a {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--ink);
    transition: color 0.15s ease;
}
.nav-links li a:hover { color: var(--ink-muted); }

/* =====================================================
   TYPOGRAPHY
===================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink);
}

h2 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: calc(var(--u) * 2);
}

p {
    font-size: 0.875rem;
    line-height: 1.72;
    font-weight: 300;
    color: var(--ink-soft);
}

strong { font-weight: 600; color: var(--ink); }

ul { padding-left: 1.25rem; }

/* =====================================================
   META ROW  (used on project pages)
===================================================== */
.meta-row {
    display: flex;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    margin-bottom: calc(var(--u) * 4);
}

.meta-field {
    flex: 1;
    padding: calc(var(--u) * 1.75) calc(var(--u) * 2.5);
    border-right: 1px solid var(--rule);
}
.meta-field:last-child { border-right: none; }

.meta-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

.meta-value {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ink);
}

/* =====================================================
   DIVIDER
===================================================== */
hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: calc(var(--u) * 4.5) 0;
}

/* =====================================================
   FOOTER
===================================================== */
footer {
    padding: calc(var(--u) * 3) var(--m);
    border-top: 1px solid var(--rule);
    font-size: 0.75rem;
    color: var(--ink-muted);
    text-align: center;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1200px) {
    :root { --m: 80px; }
}

@media (max-width: 900px) {
    :root { --m: 40px; }
}

@media (max-width: 767px) {
    :root { --m: 16px; }

    header {
        height: auto;
        min-height: 48px;
    }
    nav { padding: 0.6rem 0; }
    .nav-links { gap: 1.25rem; }
    .nav-links li a { font-size: 0.78rem; }

    footer { padding: calc(var(--u) * 2) var(--m); }

    .meta-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .meta-row::-webkit-scrollbar { display: none; }
    .meta-field { flex: 0 0 auto; min-width: 110px; }
}