/* ============================================================================
   PORTFOLIO PAGE - Public profile at /u/{username}
   Only loaded on u.html.
   ============================================================================ */

/* ============= CONTAINER ============= */
.portfolio-page { max-width: 44rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

/* ============= PROFILE HEADER - stacked + centered ============= */
.portfolio-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    position: relative;
}

.portfolio-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--brand);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.portfolio-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-identity { flex: 1; min-width: 0; }

.portfolio-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.portfolio-username-lg {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.5rem;
}

.portfolio-bio {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 0.75rem;
    max-width: 540px;
}

.portfolio-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.portfolio-meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Job title - sits between name and bio */
.portfolio-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 0.125rem;
    margin-bottom: 0.5rem;
}

/* Social links row (icon buttons under bio) */
.portfolio-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    margin-bottom: 0.875rem;
}

.portfolio-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}

.portfolio-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* Tickets closed - small label + colored difficulty pills */
.portfolio-tickets-closed {
    margin-top: 0.5rem;
}

.portfolio-tickets-closed-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.portfolio-tickets-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.difficulty-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    border-radius: 8px;
    /* Background / border colors inherit from .difficulty-{level} classes below */
}

.difficulty-pill-count {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.difficulty-pill-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* Empty state when user has no completions yet */
.portfolio-no-completions {
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Role badge */
.portfolio-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Default fallback: brand orange. Each role-XXX modifier paints the
       proper background/border/color using the same role palette as the
       homepage queue + portfolio gallery. */
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
    color: var(--brand-deep);
}
.portfolio-role-badge.role-devops {
    background: color-mix(in srgb, var(--role-devops, #7C3AED) 10%, transparent);
    border-color: color-mix(in srgb, var(--role-devops, #7C3AED) 25%, transparent);
    color: var(--role-devops, #7C3AED);
}
.portfolio-role-badge.role-backend {
    background: color-mix(in srgb, var(--role-backend, #2563EB) 10%, transparent);
    border-color: color-mix(in srgb, var(--role-backend, #2563EB) 25%, transparent);
    color: var(--role-backend, #2563EB);
}
.portfolio-role-badge.role-security {
    background: color-mix(in srgb, var(--role-security, #BE123C) 10%, transparent);
    border-color: color-mix(in srgb, var(--role-security, #BE123C) 25%, transparent);
    color: var(--role-security, #BE123C);
}
.portfolio-role-badge.role-data {
    background: color-mix(in srgb, var(--role-data, #CA8A04) 10%, transparent);
    border-color: color-mix(in srgb, var(--role-data, #CA8A04) 25%, transparent);
    color: var(--role-data, #CA8A04);
}
.portfolio-role-badge.role-ai,
.portfolio-role-badge.role-ml {
    background: color-mix(in srgb, var(--role-ai, #7C3AED) 10%, transparent);
    border-color: color-mix(in srgb, var(--role-ai, #7C3AED) 25%, transparent);
    color: var(--role-ai, #7C3AED);
}
.portfolio-role-badge.role-kubernetes {
    background: color-mix(in srgb, var(--role-k8s, #0891B2) 10%, transparent);
    border-color: color-mix(in srgb, var(--role-k8s, #0891B2) 25%, transparent);
    color: var(--role-k8s, #0891B2);
}
.portfolio-role-badge.role-fullstack {
    background: color-mix(in srgb, #DB2777 10%, transparent);
    border-color: color-mix(in srgb, #DB2777 25%, transparent);
    color: #DB2777;
}

.portfolio-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.portfolio-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.portfolio-header-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ============= SECTION HEADINGS ============= */
.portfolio-section { margin-bottom: 2rem; text-align: left; }
.portfolio-section .completed-list { text-align: left; }
.portfolio-section .completed-item { text-align: left; }

.portfolio-section-header {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 1rem;
}

.portfolio-section-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

.portfolio-section-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.portfolio-section-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
}

/* ============================================================
   Skill Coverage grid - "chocolate bar" 16x3 layout, colored by
   ticket type, intensity = how many of the user's tickets touch
   that skill.
   ============================================================ */
.sc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 1.25rem 1.5rem 1.125rem;
}

/* Wrapper for the grid label + grid + legend (sits next to the donut).
   Sizes to the grid (max 360px) rather than eating the whole row, so the
   donut + grid read as one centered unit instead of donut-left / grid-right. */
.sc-grid-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 1 360px;
    min-width: 0;
    align-items: center;
}

/* Type legend below the grid - which color = which ticket type. Centered
   under the grid and capped at a max-width that forces a 2-row layout
   (typically 3 items in row 1, 2 in row 2). The grid is also two rows so
   the legend visually rhymes with the squares above it. */
.sc-type-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    justify-content: center;
    max-width: 280px;
    margin: 0 auto;
}
.sc-tl-item { display: flex; align-items: center; gap: 0.375rem; }
.sc-tl-dot {
    width: 10px; height: 10px; border-radius: 3px;
    display: inline-block; flex-shrink: 0;
}
.sc-tl-item b {
    color: var(--text-primary); font-weight: 700;
    margin-left: 0.15rem;
}

/* Difficulty donut + grid layout - same row, centered together so the whole
   activity card reads as a balanced unit instead of left-aligned. */
.sc-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}
.sc-diff {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}
.sc-donut {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.sc-donut-hole {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sc-donut-num {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.sc-donut-lbl {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
.sc-diff-legend {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.sc-diff-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.sc-diff-item.zero { opacity: 0.35; }
.sc-diff-dot {
    width: 9px; height: 9px; border-radius: 2px;
    display: inline-block; flex-shrink: 0;
}
.sc-diff-item b {
    color: var(--text-primary);
    font-weight: 600;
    margin-left: 0.2rem;
}

/* Type mosaic grid - 18x2 = 36 cells. Fluid tracks + square cells so the two
   rows scale to the available width (never overflow on mobile). */
.sc-grid {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: 3px;
    width: 100%;
    max-width: 360px;
    align-content: center;
}
.sc-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 3px;
    transition: outline-color .12s;
}
.sc-cell.lit { cursor: pointer; }
.sc-cell.lit:hover { outline: 2px solid rgba(11,13,18,0.18); outline-offset: 1px; }
.sc-cell.l1 { opacity: 0.45; }
.sc-cell.l2 { opacity: 0.65; }
.sc-cell.l3 { opacity: 0.85; }
.sc-cell.l4 { opacity: 1.00; }

.sc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 0.875rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.sc-legend-item { display: flex; align-items: center; gap: 0.375rem; }
.sc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}
.sc-intensity {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-left: 0.5rem;
}
.sc-int {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #8b5cf6; /* purple - architecture - used as the neutral demo hue */
}
.sc-int.l0 {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.045);
}
.sc-int.l1 { filter: saturate(0.7) brightness(0.55); }
.sc-int.l2 { filter: saturate(0.85) brightness(0.75); }
.sc-int.l3 { filter: saturate(1) brightness(0.95); }
.sc-int.l4 { filter: saturate(1.1) brightness(1.1); }

/* Mobile: difficulty donut stacks above the grid; grid columns shrink to fit */
@media (max-width: 720px) {
    .sc-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .sc-card { padding: 1rem 1.125rem; }
}
@media (max-width: 720px) {
    .sc-grid { grid-template-columns: repeat(12, 18px); }
}
@media (max-width: 480px) {
    .sc-grid { grid-template-columns: repeat(9, 22px); }
    .sc-type-legend { gap: 0.375rem 0.75rem; font-size: 0.6875rem; }
}

/* ============= OVERVIEW ROW: DONUT + SPARKLINE ============= */
.overview-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.overview-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.stats-donut-ring {
    width: 110px;
    height: 110px;
    position: relative;
    flex-shrink: 0;
}

.stats-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.stats-donut-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stats-donut-label {
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.stats-donut-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 1.25rem;
}

.stats-donut-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.stats-donut-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.stats-donut-item-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stats-donut-item-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Activity sparkline (right side of overview) */
.overview-activity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--border);
    padding-left: 1.5rem;
}

.activity-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0.625rem;
}

.sparkline {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 48px;
}

.spark-bar {
    flex: 1;
    background: var(--bg-tertiary);
    border-radius: 1px 1px 0 0;
    min-height: 2px;
    transition: background 0.2s;
}

.spark-bar.lvl-1 { background: rgba(var(--accent-rgb), 0.35); }
.spark-bar.lvl-2 { background: rgba(var(--accent-rgb), 0.65); }
.spark-bar.lvl-3 { background: var(--accent); }

.sparkline-markers {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.sparkline-marker {
    font-size: 0.5rem;
    color: var(--text-muted);
}


/* ============= FEATURED TICKETS ============= */
.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.featured-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s;
}

.featured-card:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.08);
}

.featured-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.featured-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.featured-card-summary {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.featured-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: auto;
}

.tag-chip {
    padding: 0.125rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 9999px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Verified badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--green-rgb), 0.1);
    border: 1px solid rgba(var(--green-rgb), 0.2);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--green);
}

/* Difficulty badges */
.difficulty-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.difficulty-junior {
    background: rgba(var(--green-rgb), 0.1);
    color: var(--green);
    border: 1px solid rgba(var(--green-rgb), 0.2);
}

.difficulty-mid {
    background: rgba(var(--yellow-rgb), 0.1);
    color: var(--yellow);
    border: 1px solid rgba(var(--yellow-rgb), 0.2);
}

.difficulty-senior {
    background: rgba(var(--red-rgb), 0.1);
    color: var(--red);
    border: 1px solid rgba(var(--red-rgb), 0.2);
}

/* Ticket ID */
.ticket-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Type badge - colored by ticket type, matching the Ticket Activity
   bar segments + skill-cell color encoding. */
.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.type-badge.type-bug            { background: rgba(239,  68, 68, 0.14); border-color: rgba(239,  68, 68, 0.32); color: #ef4444; }
.type-badge.type-incident       { background: rgba(249, 115, 22, 0.14); border-color: rgba(249, 115, 22, 0.32); color: #f97316; }
.type-badge.type-feature        { background: rgba( 34, 197, 94, 0.14); border-color: rgba( 34, 197, 94, 0.32); color: #22c55e; }
.type-badge.type-performance    { background: rgba(234, 179,  8, 0.14); border-color: rgba(234, 179,  8, 0.34); color: #eab308; }
.type-badge.type-architecture   { background: rgba(139,  92, 246,0.14); border-color: rgba(139,  92, 246,0.34); color: #a78bfa; }
.type-badge.type-refactor       { background: rgba( 20, 184, 166,0.14); border-color: rgba( 20, 184, 166,0.34); color: #2dd4bf; }
.type-badge.type-build          { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.34); color: #fbbf24; }
.type-badge.type-infrastructure { background: rgba( 14, 165, 233,0.14); border-color: rgba( 14, 165, 233,0.34); color: #38bdf8; }

/* ============= SKILLS PILLS ============= */
.skills-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 6px 12px;
    background: var(--wf-bg-tint, var(--bg-secondary));
    border: 1px solid var(--wf-border, var(--border));
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wf-text, var(--text-primary));
    transition: border-color 0.2s, background 0.2s;
}

.skill-pill:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }

.skill-pill-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* ============= COMPLETED TICKETS ============= */
.completed-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.filter-pill {
    padding: 7px 14px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--wf-border, var(--border));
    background: var(--wf-bg-card, var(--bg-primary));
    color: var(--wf-text-mid, var(--text-secondary));
    transition: all 0.15s;
}

.filter-pill:hover { color: var(--wf-text, var(--text-primary)); border-color: var(--wf-border-mid, var(--text-muted)); }

/* Active filter goes to a deep neutral - same as the homepage queue's
   "All" pill. No more accent blue. */
.filter-pill.active {
    border-color: #0B0D12;
    background: #0B0D12;
    color: #fff;
}

.completed-list {
    display: flex;
    flex-direction: column;
}

.completed-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--border);
}

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

.completed-item-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.completed-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.completed-item-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.completed-item-summary {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.completed-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.completed-item-date {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

/* Load more button - replaces the previous scroll-on-overflow behavior */
.load-more-btn {
    display: block;
    margin: 1.25rem auto 0;
    padding: 0.625rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9999px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.load-more-btn:hover {
    background: var(--bg-inset);
    border-color: var(--accent);
    color: var(--text-primary);
}
.load-more-btn span {
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 768px) {
    .portfolio-page { padding: 1.25rem 1rem 2rem; }

    /* Hero - avatar above identity, all left-aligned (GitHub/LinkedIn style) */
    .portfolio-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
    }

    .portfolio-avatar-lg { width: 72px; height: 72px; font-size: 1.5rem; }

    .portfolio-name { font-size: 1.375rem; }

    .portfolio-title { font-size: 0.9375rem; }

    .portfolio-bio { font-size: 0.875rem; }

    /* Social links + tickets-closed stay flush left to match the header */
    .portfolio-links { justify-content: flex-start; }
    .portfolio-tickets-closed { text-align: left; }
    .portfolio-tickets-pills { justify-content: flex-start; }

    /* Difficulty pills shrink slightly so all three fit one row on narrow phones */
    .difficulty-pill { padding: 0.35rem 0.625rem; }
    .difficulty-pill-count { font-size: 0.9375rem; }
    .difficulty-pill-label { font-size: 0.6875rem; }

    /* Section spacing tighter on mobile */
    .portfolio-section { margin-bottom: 1.5rem; }
    .portfolio-section-header { flex-wrap: wrap; gap: 0.5rem; }

    /* Featured + completed: cards stack full width */
    .featured-grid { grid-template-columns: 1fr; }

    /* Completed-list filter pills can scroll horizontally instead of wrapping */
    .completed-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    .completed-filters .filter-pill { flex-shrink: 0; }

    /* Completed-item: stack date below content instead of side-by-side */
    .completed-item { flex-direction: column; gap: 0.5rem; }
    .completed-item-date { font-size: 0.75rem; }
}

@media (max-width: 380px) {
    /* Very narrow phones - pills wrap to two rows rather than overflow */
    .portfolio-tickets-pills { flex-wrap: wrap; }
}