/* =====================
   RESUME VIEW (/r/:id)
   ===================== */

/* ── Shader background canvases ── */
#resume-wave,
#resume-grain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    display: block;
}

#resume-wave {
    z-index: -2;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 72%);
}

#resume-grain {
    z-index: -1;
    mix-blend-mode: screen;
    opacity: 0.28;
}

.resume-page {
    padding: var(--header-offset) var(--space-page) var(--space-page);
    max-width: 1080px;
    margin: 0 auto;
}

/* ── Top meta bar ── */
.resume-meta {
    margin-bottom: var(--gap-lg);
}

.resume-meta-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: var(--glow-sm) var(--gold);
    flex-shrink: 0;
}

/* ── Name block ── */
.resume-name-block {
    gap: var(--gap-lg);
    margin-bottom: var(--gap-lg);
}

.resume-name {
    font-size: var(--font-size-hero);
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--tracking-tightest);
    line-height: var(--lh-display);
    color: var(--white-color);
}

.resume-name-italic {
    display: block;
    font-family: var(--display-font-family);
    font-weight: var(--font-weight-bold);
    color: var(--gold);
}

.resume-title-block {
    width: var(--resume-sidebar-w);
    flex-shrink: 0;
    gap: var(--gap-xs);
    padding-left: var(--gap-base);
    border-left: var(--border-width) solid var(--gold-border-strong);
    font-size: var(--font-size-nav);
    color: var(--mute);
}

.resume-title-block strong {
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-semibold);
    color: var(--white-color);
}

/* ── Tagline ── */
.resume-tagline {
    gap: var(--gap-2xs);
    margin-bottom: var(--gap-lg);
}

.resume-tagline-line {
    font-family: var(--display-font-family);
    font-size: clamp(22px, 3vw, 38px);
    font-weight: var(--font-weight-bold);
    color: var(--white-color);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-sm);
}

.resume-tagline-line:last-child {
    color: var(--gold);
}

/* ── Body grid ── */
.resume-body {
    display: flex;
    gap: var(--gap-lg);
    margin-bottom: var(--gap-lg);
}

.resume-col-left {
    width: var(--resume-sidebar-w);
    flex-shrink: 0;
}

/* ── Section ── */
.resume-section {
    margin-bottom: var(--gap-lg);
}

.resume-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--gap-md);
    padding-bottom: var(--gap-xs);
    border-bottom: var(--border-width) solid var(--line);
}

.resume-section-head h2 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--white-color);
    margin: 0;
}

.resume-section-num {
    font-size: var(--font-size-xs);
    color: var(--gold);
}

/* ── Portrait ── */
.resume-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--surface-8);
    border: var(--border-width) solid var(--gold-border);
    overflow: hidden;
    margin-bottom: var(--gap-lg);
    box-shadow: var(--glow-md) var(--gold-soft);
}

.resume-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.2);
}

.resume-portrait-initials {
    font-family: var(--display-font-family);
    font-size: var(--resume-initials-size);
    font-weight: var(--font-weight-bold);
    color: var(--gold);
    letter-spacing: -0.04em;
}

/* ── Contact rows ── */
.resume-contact-row {
    gap: var(--gap-sm);
    padding: var(--gap-xs) 0;
    border-bottom: var(--border-width) dashed var(--line);
    font-size: var(--font-size-sm);
}

.resume-contact-row:last-child {
    border-bottom: none;
}

.resume-contact-lbl {
    width: var(--resume-contact-lbl-w);
    flex-shrink: 0;
    font-family: var(--mono-font-family);
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--mute);
}

.resume-contact-val {
    color: var(--white-color);
    word-break: break-all;
}

/* ── Skills dots ── */
.resume-skill-row {
    gap: var(--gap-sm);
    padding: var(--gap-xs) 0;
    border-bottom: var(--border-width) dashed var(--line);
    font-size: var(--font-size-sm);
}

.resume-skill-row:last-child {
    border-bottom: none;
}

.resume-skill-name {
    color: var(--white-color);
}

.resume-skill-dots {
    gap: var(--gap-3xs);
}

.r-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--surface-8);
    border: var(--border-width) solid var(--line-strong);
}

.r-dot.on {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: var(--glow-sm) var(--gold-soft);
}

/* ── Languages ── */
.resume-lang-grid {
    display: flex;
    gap: var(--gap-sm);
}

.resume-lang {
    flex: 1;
    gap: var(--gap-3xs);
    padding: var(--gap-xs) var(--gap-sm);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-tag);
}

.resume-lang-name {
    font-size: var(--font-size-sm);
    color: var(--white-color);
}

.resume-lang-level {
    font-family: var(--mono-font-family);
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold-soft);
}

/* ── Stack chips ── */
.resume-stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
}

.resume-chip {
    font-family: var(--mono-font-family);
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-sm);
    padding: var(--padding-tag);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-tag);
    color: var(--mute);
}

.resume-chip.lit {
    --_i: var(--chip-intensity, 100%);
    color: color-mix(in srgb, var(--gold) var(--_i), var(--mute));
    border-color: color-mix(in srgb, var(--gold-border-strong) var(--_i), var(--line));
    background: color-mix(in srgb, var(--gold-bg) var(--_i), transparent);
}

/* ── Profile ── */
.resume-profile p {
    font-size: var(--font-size-nav);
    line-height: var(--lh-relaxed);
    color: var(--mute);
    margin: 0;
}

/* ── Experience ── */
.resume-exp-item {
    display: flex;
    gap: var(--gap-md);
    padding: var(--gap-md) 0;
    border-bottom: var(--border-width) solid var(--line);
}

.resume-exp-item:last-child {
    border-bottom: none;
}

.resume-exp-role {
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-semibold);
    color: var(--white-color);
    margin: 0 0 var(--gap-3xs);
    letter-spacing: var(--tracking-card);
}

.resume-exp-company {
    font-size: var(--font-size-sm);
    color: var(--gold);
    margin-bottom: var(--gap-sm);
    font-family: var(--mono-font-family);
    letter-spacing: var(--tracking-sm);
}

.resume-exp-bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: var(--gap-3xs);
}

.resume-exp-bullets li {
    font-size: var(--font-size-sm);
    line-height: var(--lh-relaxed);
    color: var(--mute);
    padding-left: var(--gap-md);
    position: relative;
}

.resume-exp-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: var(--gap-sm);
    height: 1px;
    background: var(--line-strong);
}

.resume-exp-period {
    width: var(--resume-period-w);
    flex-shrink: 0;
    font-family: var(--mono-font-family);
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-sm);
    color: var(--gold-soft);
    text-align: right;
    padding-top: var(--gap-3xs);
}

/* ── Education ── */
.resume-edu-item {
    display: flex;
    gap: var(--gap-md);
    padding: var(--gap-sm) 0;
    border-bottom: var(--border-width) solid var(--line);
}

.resume-edu-item:last-child {
    border-bottom: none;
}

.resume-edu-degree {
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-semibold);
    color: var(--white-color);
    margin: 0 0 var(--gap-3xs);
}

.resume-edu-school {
    font-size: var(--font-size-sm);
    color: var(--mute);
}

.resume-edu-period {
    width: var(--resume-period-w);
    flex-shrink: 0;
    font-family: var(--mono-font-family);
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-sm);
    color: var(--gold-soft);
    text-align: right;
}

/* ── Recognition pills ── */
.resume-recog-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.resume-pill {
    gap: var(--gap-sm);
    padding: var(--gap-xs) var(--gap-sm);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
}

.resume-pill-year {
    font-family: var(--mono-font-family);
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--gold-soft);
    border-right: var(--border-width) solid var(--line-strong);
    padding-right: var(--gap-sm);
}

.resume-pill-name {
    color: var(--white-color);
}

/* ── Currently exploring ── */
.resume-exploring p {
    font-family: var(--display-font-family);
    font-size: var(--h6-font-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-relaxed);
    color: var(--white-color);
    margin: 0;
    letter-spacing: var(--tracking-sm);
    opacity: 0.85;
}

/* ── Footer ── */
.resume-footer {
    padding-top: var(--gap-lg);
    border-top: var(--border-width) solid var(--line);
    margin-top: var(--gap-lg);
}

.resume-available {
    gap: var(--gap-sm);
}

.resume-pulse-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--green);
    position: relative;
    box-shadow: var(--glow-sm) var(--green);
    flex-shrink: 0;
}

.resume-pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: var(--border-width) solid var(--green);
    animation: resume-pulse 1.8s ease-out infinite;
}

@keyframes resume-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.9;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ── Responsive ── */
@media screen and (max-width: 991px) {
    .resume-page {
        padding: var(--header-offset) var(--space-page-md) var(--space-page-md);
    }

    .resume-name-block {
        flex-direction: column;
        align-items: flex-start;
    }

    .resume-name {
        width: 100%;
    }

    .resume-title-block {
        width: 100%;
        padding-left: 0;
        border-left: none;
        border-top: var(--border-width) solid var(--gold-border);
        padding-top: var(--gap-md);
    }

    .resume-body {
        flex-direction: column;
    }

    .resume-col-left {
        width: 100%;
    }
}

@media screen and (max-width: 640px) {
    .resume-page {
        padding: var(--header-offset) var(--space-page-sm) var(--space-page-sm);
    }

    .resume-exp-item,
    .resume-edu-item {
        flex-direction: column;
    }

    .resume-exp-period,
    .resume-edu-period {
        width: auto;
        text-align: left;
    }
}