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

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

ul,
ol {
    list-style: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

address {
    font-style: normal;
}

/* Made for icons in the footer */
.visually-hidden { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: var(--border-medium) solid var(--color-focus-ring);
    outline-offset: 3px;
    box-shadow: var(--shadow-glow);
}

/* ---- Variables ---- */

:root {
    /* == Fonts == */
    --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

    /* == Type scale == */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.5rem;
    --text-5xl:  3.5rem;

    /* == Spacing scale == */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  0.75rem;
    --space-lg:  1rem;
    --space-xl:  1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
    --space-5xl: 5rem;
    --space-6xl: 6rem;

    /* == Line heights == */
    --leading-tight:   1.15;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;

    /* == Letter spacing == */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.08em;
    --tracking-wider:   0.15em;

    /* == Font weights == */
    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* == Primitives — raw palette values == */

    --navy-900: #0a1929;
    --navy-800: #0f2235;
    --navy-700: #142d44;
    --navy-600: #1e3a52;
    --navy-500: #2a4866;

    --ink-100: #e6f1ff;
    --ink-300: #8ba3c7;
    --ink-500: #5a7595;

    --cyan-300: #a3ffe4;
    --cyan-500: #64ffda;
    --cyan-700: #3dccaa;

    /* == Light theme primitives — warm paper aesthetic == */
    --paper-100: #f5f1e8;
    --paper-200: #ebe6d8;
    --paper-300: #ddd6c3;
    --paper-400: #c8c0a9;
    --paper-500: #a8a08a;

    --ink-dark-100: #1a1f2e;
    --ink-dark-300: #4a5468;
    --ink-dark-500: #7a8294;

    --cyan-muted-300: #1a8a72;
    --cyan-muted-500: #0d7058;
    --cyan-muted-700: #064839;

    /* == Semantic tokens — roles == */

    --color-text-primary:   var(--ink-100);
    --color-text-secondary: var(--ink-300);
    --color-text-muted:     var(--ink-500);
    --color-text-accent:    var(--cyan-500);
    --color-text-emphasis:  var(--cyan-300);

    --color-bg-deck:     var(--navy-900);
    --color-bg-page:     var(--navy-800);
    --color-bg-elevated: var(--navy-700);

    --color-border-subtle:   var(--navy-600);
    --color-border-default:  var(--navy-500);
    --color-border-emphasis: var(--cyan-500);

    --color-link:       var(--cyan-500);
    --color-link-hover: var(--cyan-700);
    --color-focus-ring: var(--cyan-500);

    /* == Border widths == */
    --border-thin:   1px;
    --border-medium: 2px;
    --border-thick:  3px;

    /* == Focus glow == */
    --shadow-glow: 0 0 0 3px rgba(100, 255, 218, 0.15);

    /* == Z-index scale == */
    --z-nav:   100;
    --z-modal: 1000;
}

[data-theme="light"] {
    --color-text-primary:   var(--ink-dark-100);
    --color-text-secondary: var(--ink-dark-300);
    --color-text-muted:     var(--ink-dark-500);
    --color-text-accent:    var(--cyan-muted-500);
    --color-text-emphasis:  var(--cyan-muted-300);

    --color-bg-page:        var(--paper-100);
    --color-bg-deck:        var(--paper-200);
    --color-bg-elevated:    var(--paper-300);

    --color-border-subtle:   var(--paper-400);
    --color-border-default:  var(--paper-500);
    --color-border-emphasis: var(--cyan-muted-500);

    --color-link:        var(--cyan-muted-500);
    --color-link-hover:  var(--cyan-muted-700);
    --color-focus-ring:  var(--cyan-muted-500);

    --shadow-glow: 0 0 0 3px rgba(13, 112, 88, 0.2);
}

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

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ---- Theme transitions ---- */

body,
.site-header,
footer,
.hero,
.exp-card,
.form-group input,
.form-group textarea,
.btn {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    body,
    .site-header,
    footer,
    .hero,
    .exp-card,
    .form-group input,
    .form-group textarea,
    .btn {
        transition: none;
    }
}

/* ---- Container + page rhythm ---- */

body > * {
    width: 100%;
    margin: 0;
}

.container {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
}

main > .container {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}

.site-header {
    padding: var(--space-lg) 0;
    background: var(--color-bg-deck);
    border-bottom: var(--border-thin) solid var(--color-border-subtle);
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
}

section {
    margin-bottom: var(--space-6xl);
    position: relative;
}

section:last-child {
    margin-bottom: 0;
}

footer {
    background: var(--color-bg-deck);
    border-top: var(--border-thin) solid var(--color-border-subtle);
    padding: var(--space-4xl) 0 var(--space-5xl);
}

/* ---- Headings ---- */

h1 {
    font-family: var(--font-sans);
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

h2 {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-2xl);
    padding-left: var(--space-xl);
    padding-bottom: var(--space-lg);
    position: relative;
}

h2:first-child {
    margin-top: 0;
}

h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.75rem;
    height: 2px;
    background: var(--color-border-emphasis);
}

h2.no-tick::before {
    display: none;
}

h2.no-tick {
    padding-left: 0;
}

h3 {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.section-number {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6em;
    font-weight: var(--font-semibold);
    color: var(--color-text-accent);
    letter-spacing: var(--tracking-wider);
    margin-right: var(--space-md);
    vertical-align: 0.2em;
}

/* ---- Paragraphs ---- */

p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
    max-width: 65ch;
}

section > p:first-of-type {
    font-size: 1.1875rem;
    line-height: 1.85;
    margin-bottom: var(--space-2xl);
}

p + p {
    margin-top: var(--space-xl);
}

p:last-child {
    margin-bottom: 0;
}

/* ---- Links ---- */

a {
    color: var(--color-link);
    text-decoration: none;
    border-bottom: var(--border-thin) solid currentColor;
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
    color: var(--color-link-hover);
}

/* ---- Navigation ---- */

nav[aria-label="Primary navigation"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.nav-list {
    display: flex;
    gap: var(--space-xl);
}

.nav-list a {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-bottom: var(--border-thin) solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-list a:hover {
    color: var(--color-text-accent);
    border-color: var(--color-text-accent);
}

/* ---- Theme toggle ---- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: var(--border-thin) solid transparent;
    border-radius: 2px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.theme-toggle:hover {
    color: var(--color-text-accent);
    border-color: var(--color-border-emphasis);
}

.theme-icon {
    width: 20px;
    height: 20px;
}

/* Dark mode: show sun clicking goes to light */
.theme-icon-moon {
    display: none;
}

/* Light mode: show moon clicking goes to dark */
[data-theme="light"] .theme-icon-sun {
    display: none;
}

[data-theme="light"] .theme-icon-moon {
    display: inline-block;
}

/* ---- Lists ---- */

main ul,
main ol {
    padding-left: var(--space-2xl);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

main li {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-sm);
    position: relative;
}

main li:last-child {
    margin-bottom: 0;
}

main ul li::before {
    content: '+';
    position: absolute;
    left: calc(-1 * var(--space-xl));
    color: var(--color-text-accent);
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
}

/* ---- Definition list ---- */

dl {
    margin-top: var(--space-xl);
}

dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-top: var(--space-2xl);
    margin-bottom: 0.25rem;
}

dt:first-child {
    margin-top: 0;
}

dd {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin-left: 0;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: var(--border-thin) solid var(--color-border-default);
}

/* ---- Address ---- */

address {
    margin-top: var(--space-2xl);
}

/* ---- Social links ---- */

.social-links {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    border-bottom: var(--border-thin) solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.social-links a:hover {
    color: var(--color-text-accent);
    border-color: var(--color-text-accent);
}

.social-links svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.social-label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* ---- Page header ---- */

.page-header {
    margin-bottom: var(--space-5xl);
    padding-top: var(--space-2xl);
}

.page-header h1 {
    margin-bottom: var(--space-xl);
}

.page-header .hero-lede {
    margin-bottom: 0;
}

/* ---- Hero ---- */

.hero {
    background: var(--color-bg-deck);
    padding: var(--space-6xl) 0;
    margin-bottom: 0;
}

.hero h1 {
    max-width: 16ch;
    margin-bottom: var(--space-xl);
}

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-accent);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
    max-width: none;
}

.hero-lede {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2xl);
    max-width: 40ch;
}

/* ---- Buttons ---- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: var(--space-md) var(--space-xl);
    border-radius: 2px;
    border: var(--border-thin) solid currentColor;
    background: transparent;
    color: var(--color-text-accent);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
    background: var(--color-text-accent);
    color: var(--color-bg-deck);
}

.btn,
.btn:hover {
    border-bottom-width: var(--border-thin);
    padding-bottom: var(--space-md);
}

/* ---- Experience cards ---- */

.exp-card {
    background: var(--color-bg-deck);
    border: var(--border-thin) solid var(--color-border-subtle);
    border-radius: 2px;
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.exp-card:last-child {
    margin-bottom: 0;
}

.exp-card-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-xl);
    align-items: baseline;
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-xl);
    border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.exp-card-number {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-accent);
    letter-spacing: var(--tracking-wider);
    margin: 0;
}

.exp-card-meta h3 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--text-xl);
}

.exp-card-role {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin: 0;
    max-width: none;
}

.exp-card-date {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-accent);
    letter-spacing: var(--tracking-wide);
    margin: 0;
    text-align: right;
    display: block;
    white-space: nowrap;
}

.exp-card ul {
    padding-left: var(--space-2xl);
    margin-top: 0;
    margin-bottom: 0;
}

.exp-card li:last-child {
    margin-bottom: 0;
}

/* ---- Contact form ---- */

.contact-form {
    margin-top: var(--space-4xl);
}

.form-group {
    margin-bottom: var(--space-2xl);
}

.form-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-sm);
}

.form-group input,
.form-group textarea {
    display: block;
    width: 100%;
    background: var(--color-bg-deck);
    border: var(--border-thin) solid var(--color-border-default);
    border-radius: 2px;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    padding: var(--space-md) var(--space-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-border-emphasis);
    box-shadow: var(--shadow-glow);
}

.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
    border-color: #c0392b;
}

.form-group textarea {
    resize: vertical;
    min-height: 8rem;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

.form-fallback {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0;
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    :root {
        --text-5xl: 2.25rem;
        --text-4xl: 1.875rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
        --text-xl:  1.125rem;
        --text-lg:  1.0625rem;

        --space-3xl: 2rem;
        --space-4xl: 2.5rem;
        --space-5xl: 3.5rem;
        --space-6xl: 4.5rem;
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .hero {
        padding: var(--space-3xl) 0;
    }

    .hero h1 {
        font-size: var(--text-4xl);
    }

    .exp-card {
        padding: var(--space-xl);
    }

    .exp-card-header {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        align-items: flex-start;
    }

    .exp-card-number {
        order: -1;
    }

    .exp-card-date {
        text-align: left;
        order: 3;
    }

    .section-number {
        font-size: 0.55em;
        margin-right: var(--space-sm);
    }

    nav[aria-label="Primary navigation"] {
        gap: var(--space-md);
    }

    .nav-list {
        gap: var(--space-md);
    }
}

/* ---- Print ---- */

@media print {
    body {
        background: white;
        color: black;
    }

    .site-header {
        position: static;
        background: white;
        border: 0;
    }

    footer {
        background: white;
        border: 0;
    }

    section {
        margin-bottom: 2rem;
        page-break-inside: avoid;
    }

    a {
        color: black;
        border-bottom-color: black;
    }

    h1,
    h2,
    h3 {
        page-break-after: avoid;
    }

    .hero {
        padding: 0;
        background: white;
    }

    .btn {
        border: 1px solid black;
        color: black;
        background: transparent;
    }

    .exp-card {
        background: white;
        border: 1px solid black;
        margin-bottom: 1rem;
        padding: 1rem;
        page-break-inside: avoid;
    }

    .exp-card-header {
        border-bottom-color: black;
    }

    .exp-card-number,
    .exp-card-role,
    .exp-card-date {
        color: black;
    }

    .section-number {
        color: black;
    }

    .theme-toggle {
        display: none;
    }
}