/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: #e9e9e9;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;
    font-size: var(--font-base);
    line-height: 1.5;
}

/* ── HOME VIEW ────────────────────────────────────────────────────────────── */
body.view-home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 3rem;
}

body.view-home #app {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#bg-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 3rem;
    position: relative;
    z-index: 1;
}

.hero-name    { font-size: 2.5rem; font-weight: 300; color: #1e1e1e; margin-bottom: 0.4rem; }
.hero-tagline { font-size: var(--font-base); color: #999; }



/* ── MUSIC VIEW ───────────────────────────────────────────────────────────── */
body.view-music { padding-bottom: 3rem; }

.artist-section {
    display: grid;
    grid-template-columns: 35% 65%;
}

.col-bio, .col-releases { padding: 2.5rem 2rem; }

/* isrand — light */
.isrand .col-bio      { background: #f8f8f8; }
.isrand .col-releases { background: #f1f1f1; }

/* SSSSUPERDRAGON — dark */
.superdragon .col-bio      { background: #252525; color: #bbb; }
.superdragon .col-releases { background: #1e1e1e; color: #bbb; }
.superdragon .section-header         { color: #555; border-bottom-color: #333; }
.superdragon .artist-name            { color: #fff; }
.superdragon .genre-line             { color: #666; }
.superdragon .bio p                  { color: #999; }
.superdragon .bio strong             { color: #ccc; }
.superdragon .release                { background: #2a2a2a; border-left-color: #dc2626; }
.superdragon .release.no-audio       { border-left-color: #3a3a3a; }
.superdragon .release-title          { color: #e5e5e5; }
.superdragon .release-year           { color: #555; }
.superdragon .release-genres .tag    { color: #555; }
.superdragon .release-genres::before { color: #444; }
.superdragon .release-genres .tag + .tag::before { color: #444; }
.superdragon a.bc-btn                { color: #dc2626; }
.superdragon a.bc-btn:hover          { color: #ef4444; }

.artist-name  { font-size: var(--font-heading); font-weight: 300; color: #1e1e1e; margin-bottom: 0.2rem; }
.genre-line   { font-size: var(--font-base); color: #888; margin-bottom: 2rem; }
.bio p        { font-size: var(--font-base); line-height: 1.7; color: #444; margin-bottom: 0.9rem; }
.bio strong   { font-weight: 500; color: #222; }


.releases { display: flex; flex-direction: column; gap: 0.5rem; }

.release {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #eaeaea;
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--accent);
}
.release.no-audio { border-left-color: #ccc; }

.release-cover  { width: 48px; height: 48px; object-fit: cover; flex-shrink: 0; }
.release-info   { flex: 1; min-width: 0; }
.release-title  { font-size: var(--font-base); font-weight: 400; color: #1e1e1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.release-year   { font-size: var(--font-sm); color: #999; margin-top: 0.2rem; display: inline; }

.release-genres                      { display: inline; }
.release-genres::before              { content: " · "; color: #ccc; font-size: var(--font-sm); }
.release-genres .tag                 { display: inline; font-size: var(--font-sm); color: #bbb; }
.release-genres .tag + .tag::before  { content: " / "; color: #ccc; }

.release-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

a.bc-btn       { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; }
a.bc-btn svg   { width: 1.1rem; height: 1.1rem; fill: currentColor; }
a.bc-btn:hover { color: #e0a000; }



/* ── RESUME VIEW ──────────────────────────────────────────────────────────── */
html:has(body.view-resume),
body.view-resume { height: 100%; overflow: hidden; }

body.view-resume #app {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 3rem;
}

/* Resume typography */
body.view-resume b          { font-weight: 450; }
body.view-resume h1,
body.view-resume h2         { font-weight: 300; }
body.view-resume h3         { font-weight: 300; margin-bottom: 0.75rem; margin-top: 1.5rem; }
body.view-resume p,
body.view-resume li         { font-weight: 300; }
body.view-resume li         { padding-left: 1em; margin-bottom: 0.25rem; }
body.view-resume ul         { list-style-type: square; margin-left: 1.5rem; }
body.view-resume .grid a:not(.stag)          { background: #dddddd; color: #363636; }
body.view-resume .grid a:not(.stag):visited  { text-decoration: none; }

.grid {
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-areas: "left right";
    height: 100%;
}

.hide-when-smallest { display: block; }

.column-left {
    padding: 2.5rem 2rem;
    min-width: 0;
    background: #f8f8f8;
    overflow-y: auto;
    overflow-x: hidden;
    grid-area: left;
}

.column-right {
    padding: 2.5rem 2rem;
    min-width: 0;
    background: #f1f1f1;
    overflow-y: auto;
    grid-area: right;
}

/* Section structure */
.cv-section     { margin-bottom: 2rem; }

.section-header {
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.4rem;
    margin-bottom: 1.25rem;
}

.section-divider { border-top: 1px solid #ddd; margin: 2rem 0; }

/* Left column identity */

.name                { font-size: var(--font-heading); font-weight: 300; }
.roles               { font-weight: 300; margin-top: 1rem; }
.company-and-location { font-weight: 300; margin-top: 0.75rem; color: #888; }

/* Language tags */
.lang-tags { margin-top: 0.75rem; }

.lang-tag {
    display: inline-block;
    background: color-mix(in srgb, var(--accent) 35%, white);
    color: #1e1e1e;
    padding: 0.2rem 0.5rem;
    margin: 0.15rem 0.1rem;
    font-size: var(--font-sm);
}

.lang-tag.learning {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, #ddd);
    color: color-mix(in srgb, var(--accent) 25%, #999);
}

/* Skills */
.skills-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.4rem;
    margin-bottom: 1.25rem;
}

.skills-header .section-header { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.tier-legend   { display: flex; gap: 0.3rem; }
.skills-table  { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }

.skill-row     { display: flex; align-items: baseline; gap: 1rem; }

.skill-category {
    width: 9rem;
    flex-shrink: 0;
    font-size: var(--font-sm-2);
    color: #999;
    font-weight: 400;
}

.skill-tags { flex: 1; }

.stag {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    margin: 0.1rem 0.1rem;
    font-size: var(--font-sm);
}

.stag.expert     { background: color-mix(in srgb, var(--accent) 35%, white); color: #1e1e1e; }
.stag.proficient { background: color-mix(in srgb, var(--accent) 18%, white); color: #444; }
.stag.familiar   { background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 35%, #ddd); color: color-mix(in srgb, var(--accent) 25%, #999); }

/* Feedback */
blockquote.feedback {
    border-left: 3px solid var(--accent);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: #eaeaea;
    font-style: italic;
}
blockquote.feedback p      { color: #555; }
blockquote.feedback footer { font-style: normal; color: #999; text-align: right; margin-top: 0.5rem; }

/* Experience groups */
.exp-group       { display: flex; flex-direction: column; gap: 0.4rem; }

.exp-group-label {
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #bbb;
    margin: 1.25rem 0 0.5rem;
}

.exp-group-label:first-child { margin-top: 0; }

/* Company group */
.company-group {
    background: #eaeaea;
    border-left: 3px solid #ccc;
    padding: 0.8rem 1rem;
}

.company-group-header { display: flex; align-items: center; gap: 1rem; cursor: pointer; }
.company-group:hover  { background: #e2e2e2; }

.company-group-body {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
    border-top: 1px solid #d8d8d8;
    padding-top: 0.75rem;
}

.company-group.open .company-group-body   { display: flex; }
.company-group-body .position             { background: #f6f6f6; border-left-color: #ddd; }
.company-group-body .position:hover       { background: #efefef; }

/* Position cards */
.position {
    display: flex;
    flex-direction: column;
    background: #eaeaea;
    padding: 0.8rem 1rem;
    border-left: 3px solid #ccc;
}

.position.ongoing        { border-left-color: var(--accent); }
.position:hover          { background: #e2e2e2; }
.position-header         { display: flex; align-items: center; gap: 1rem; cursor: pointer; }

.pos-company  { width: 5rem; flex-shrink: 0; line-height: 1.5; }
.pos-employer { font-weight: 400; color: #444; }
.pos-client   { color: #888; font-size: var(--font-sm); }
.pos-info     { flex: 1; min-width: 0; }
.pos-project  { font-size: var(--font-base); font-weight: 400; color: #1e1e1e; }
.pos-role     { font-size: var(--font-sm); color: #888; margin-top: 0.15rem; }
.pos-right    { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.pos-dates    { font-size: var(--font-sm); color: #aaa; text-align: right; white-space: nowrap; }

.position-toggle { color: #ccc; flex-shrink: 0; display: inline-block; transition: transform 0.15s; font-size: var(--font-sm); }
.position.open .position-toggle,
.company-group.open .position-toggle { transform: rotate(90deg); }

.position-body {
    display: none;
    padding-top: 0.75rem;
    border-top: 1px solid #d8d8d8;
    margin-top: 0.75rem;
    font-size: var(--font-sm-2);
}

.position.open .position-body { display: block; }

.position-body > p,
.position-body > ul,
.position-body > blockquote { margin-bottom: 0.75rem; }

/* Certs + Courses */
.certs-courses { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }

/* Tags (resume experience) */
.position .tags { margin-top: 1rem; }

.position .tag {
    display: inline-block;
    background: #dddddd;
    color: #3f3f3f;
    padding: 0.4rem 0.6rem;
    margin: 0.2rem;
}

.tag-list            { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tag-list .stag      { background: #dddddd; color: #3f3f3f; }

/* Resume entrance animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.anim {
    opacity: 0;
    animation: fadeUp 0.4s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .anim { opacity: 1; animation: none; }
}

/* Resume responsive */
@media (max-width: 860px) {
    .grid { grid-template-areas: "left" "right"; grid-template-columns: 1fr; height: auto; }

    html:has(body.view-resume),
    body.view-resume { height: auto; overflow: auto; }

    body.view-resume #app { position: static; padding-bottom: 3rem; }
    .hide-when-smallest   { display: none; }

    .skills-table    { grid-template-columns: 1fr; }
    .certs-courses   { grid-template-columns: 1fr; }
    .artist-section  { grid-template-columns: 1fr; }
}