:root {
    --bg: #0e1116;
    --panel: rgba(20, 24, 31, .72);
    --panel-border: rgba(255, 255, 255, .08);
    --text: #e8edf4;
    --muted: #aab3c2;
    --accent: #efb95f;
    --accent-2: #4cc6d3;
    --link: #8fd3f4;
    --shadow: 0 10px 30px rgba(0, 0, 0, .25);
    --radius: 18px;
    --edge-pad: clamp(16px, 2vw, 28px);
    --section-gap: clamp(24px, 5vh, 48px)
}

:root.light {
    --bg: #f7f8fb;
    --panel: rgba(255, 255, 255, .78);
    --panel-border: rgba(15, 23, 42, .08);
    --text: #0f172a;
    --muted: #475569;
    --accent: #be7f1a;
    --accent-2: #0ea5b3;
    --link: #0369a1;
    --shadow: 0 10px 30px rgba(2, 6, 23, .08)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    color: var(--text);
    background: radial-gradient(1200px 800px at 10% -10%, #101a2b 0%, transparent 60%), radial-gradient(1000px 700px at 110% 10%, #10261f 0%, transparent 50%), var(--bg);
    min-height: 100vh;
    display: grid;
    grid-template-columns: 320px 1fr
}

:root.light body {
    background-image: none !important
}

aside {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--edge-pad);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    background: var(--panel);
    border-right: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 18px
}

.aside-hint {
    position: sticky;
    bottom: 0;
    z-index: 1;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    padding: 10px 0 8px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--panel) 80%, transparent) 60%);
    border-top: 1px solid var(--panel-border);
    -webkit-backdrop-filter: saturate(120%) blur(3px);
    backdrop-filter: saturate(120%) blur(3px);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none
}

aside:hover .aside-hint {
    opacity: .9;
    transform: translateY(0)
}

.aside-hint.is-hidden {
    opacity: 0 !important;
    transform: translateY(4px) !important
}

.brand {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    align-items: center
}

.avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 180deg, var(--accent), var(--accent-2), var(--accent));
    display: grid;
    place-items: center;
    overflow: hidden
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    aspect-ratio: 1/1
}

.avatar:hover img {
    animation: spin 10s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.name {
    font-family: "Space Grotesk", Inter, system-ui;
    font-size: 26px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: .4px
}

.role {
    color: var(--muted);
    font-size: 14px;
    margin-top: 6px
}

.cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    border: 1px solid var(--panel-border);
    color: var(--text);
    text-decoration: none;
    font-weight: 600
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow)
}

.btn:focus-visible,
.nav a:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px
}

.ico {
    width: 18px;
    height: 18px
}

nav {
    margin-top: 8px
}

.nav {
    display: grid;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0
}

.nav a {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent
}

.nav a:hover {
    background: rgba(255, 255, 255, .06);
    border-color: var(--panel-border)
}

.nav a.active {
    background: linear-gradient(90deg, rgba(239, 185, 95, .18), transparent);
    color: var(--text)
}

.tag {
    font-size: 11px;
    color: var(--muted)
}

.contact {
    margin-top: auto;
    display: grid;
    gap: 8px;
    font-size: 14px
}

.contact a {
    color: var(--link);
    text-decoration: none
}

.contact a:hover {
    text-decoration: underline
}

.toggle-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between
}

.toggle {
    --w: 52px;
    --h: 28px;
    --dot: 22px;
    width: var(--w);
    height: var(--h);
    border-radius: var(--h);
    background: rgba(255, 255, 255, .12);
    border: 1px solid var(--panel-border);
    position: relative;
    cursor: pointer
}

.toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    translate: 0 -50%;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: #fff;
    transition: transform .25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25)
}

:root.light .toggle::after {
    background: #0f172a
}

:root.light .toggle {
    background: rgba(0, 0, 0, .06)
}

.toggle.on::after,
:root.light .toggle.on::after {
    transform: translateX(24px)
}

main {
    height: 100%;
    overflow: auto;
    padding: var(--edge-pad)
}

.wrap {
    max-width: 980px;
    margin: 0 auto
}

section {
    scroll-margin-top: 24px;
    margin-bottom: var(--section-gap)
}

h2 {
    font-family: "Space Grotesk", Inter, system-ui;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 14px;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

h2::after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    margin-top: 6px;
    background: linear-gradient(90deg, var(--accent), transparent);
    animation: sweep 1.6s ease forwards
}

@keyframes sweep {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

p {
    line-height: 1.75;
    color: var(--text);
    opacity: .96
}

ul {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

li {
    list-style: none;
    line-height: 1.7;
    color: var(--text);
    opacity: .92
}

.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: clamp(16px, 1.8vw, 22px);
    box-shadow: var(--shadow)
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.timeline {
    position: relative
}

.timeline li {
    position: relative;
    padding-left: 26px
}

.timeline li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(239, 185, 95, .2)
}

.timeline::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(var(--accent), transparent);
    opacity: .35
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tagpill {
    border: 1px solid var(--panel-border);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-size: 13px
}

main a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--link) 50%, transparent)
}

main a:hover {
    text-decoration: underline;
    border-bottom-style: solid
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 1px, 1px);
    white-space: nowrap;
    border: 0
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    white-space: normal;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff3
}

.print-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 10px;
    flex-wrap: wrap
}

/* Responsive */
@media (max-width:980px) {
    body {
        grid-template-columns: 1fr
    }

    aside {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--panel-border)
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr
    }
}

/* Print polish */
@media print {
    @page {
        margin: 16mm
    }

    body {
        background: #fff;
        color: #000;
        display: block
    }

    aside {
        display: none
    }

    main {
        padding: 0
    }

    .card {
        border: none;
        box-shadow: none;
        background: transparent
    }

    h2 {
        color: #000;
        -webkit-text-fill-color: initial;
        background: none
    }

    h2::after {
        display: none
    }

    section {
        page-break-inside: avoid
    }

    a {
        color: #000;
        text-decoration: none
    }
}

/* Reduced-motion support */
@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* ===== FINAL: print-bar buttons (both) — no underline + soft glow ===== */
.print-bar .btn,
.print-bar .btn:hover,
.print-bar .btn:focus {
    text-decoration: none !important;
    /* beats main a:hover underline */
    border-bottom: none !important;
    /* beats main a/border-bottom */
}

.print-bar .btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06));
    border-color: color-mix(in srgb, var(--link) 40%, var(--panel-border));
    box-shadow: var(--shadow), 0 0 0 2px color-mix(in srgb, var(--link) 30%, transparent) inset;
}

.print-bar .btn:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}