/* =========================================================================
   Theme: Vcorps
   A soft, split-panel portfolio. The identity holds still on the left; the
   work scrolls past on the right. Warm paper, pastel violet, rounded cards.

   Ported from a standalone HTML/CSS page with the design left alone. Only the
   three things the platform will not carry were rewritten:

     - the webfont links (external requests are refused by the installer, so
       Inter and Outfit are asked for by name and fall back to the system
       stack);
     - `overflow-x: hidden` on the body, which would have broken the sticky
       left panel — templates/shared/base.css already clips the html element;
     - everything that needed JavaScript. The mobile menu now runs on
       `:target`, the cursor spotlight drifts on its own, and the scroll
       reveal is `animation-timeline: view()`.

   Every entrance animation sits inside `prefers-reduced-motion: no-preference`,
   so a visitor who asked for less movement gets a still page rather than a
   page with pieces missing.
   ========================================================================= */

.theme-vcorps {
    /* Colour — soft/pastel palette, the design's own values */
    --vc-bg-primary: #FDF8F4;
    --vc-bg-secondary: #F0EBF8;
    --vc-bg-card: #FFFFFF;
    --vc-text-primary: #2D2D3A;
    --vc-text-secondary: #6B7280;
    --vc-text-tertiary: #9CA3AF;
    --vc-accent-primary: #A78BFA;
    --vc-accent-secondary: #F9A8D4;
    --vc-accent-tertiary: #86EFAC;
    --vc-border: #E5E7EB;
    --vc-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);

    /* Type. No webfont is loaded: the two families are used when the reader
       already has them and the system stack stands in when they do not. */
    --vc-font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --vc-font-display: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Spacing */
    --vc-space-xs: 4px;
    --vc-space-sm: 8px;
    --vc-space-md: 16px;
    --vc-space-lg: 24px;
    --vc-space-xl: 32px;
    --vc-space-2xl: 48px;
    --vc-space-3xl: 64px;
    --vc-space-4xl: 96px;
    --vc-space-5xl: 128px;

    /* Transitions */
    --vc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --vc-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --vc-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --vc-panel-width: 48%;
    --vc-content-max-width: 1400px;
    --vc-nav-indicator-width: 24px;
    --vc-nav-indicator-active-width: 56px;

    font-family: var(--vc-font-primary);
    color: var(--vc-text-primary);
    background-color: var(--vc-bg-primary);
    line-height: 1.7;
    position: relative;
}

.theme-vcorps a { transition: color var(--vc-transition-base); }

.theme-vcorps ::selection {
    background-color: rgba(167, 139, 250, 0.2);
    color: var(--vc-text-primary);
}

/* -------------------------------------------------------------------------
   Ambient wash
   The original page moved this with the pointer. A template cannot ship
   JavaScript, so it drifts instead — same gradient, same weight, no script.
   ------------------------------------------------------------------------- */
.vc-spotlight {
    position: fixed;
    top: 22%;
    left: 62%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        circle,
        rgba(167, 139, 250, 0.06) 0%,
        rgba(249, 168, 212, 0.03) 30%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0;
}

.theme-vcorps:hover .vc-spotlight { opacity: 1; }

/* -------------------------------------------------------------------------
   Layout — split panel
   ------------------------------------------------------------------------- */
.vc-wrap {
    max-width: var(--vc-content-max-width);
    margin: 0 auto;
    display: flex;
    min-height: 100vh;
    position: relative;
    padding: 0 var(--vc-space-lg);
}

/* Left panel — fixed on desktop */
.vc-panel {
    position: sticky;
    top: 0;
    width: var(--vc-panel-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: var(--vc-space-4xl) var(--vc-space-2xl) var(--vc-space-2xl) var(--vc-space-lg);
    flex-shrink: 0;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.vc-panel::-webkit-scrollbar { display: none; }

/* The user's decorations for the header zone hang off this box rather than off
   the panel itself: layers.css gives any element with a zone child
   `position: relative`, which on the panel would have cancelled its sticky. */
.vc-panel__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-width: 0;
}

/* Right panel — scrolls */
.vc-main {
    flex: 1;
    min-width: 0;
    padding: var(--vc-space-4xl) var(--vc-space-lg) var(--vc-space-2xl) var(--vc-space-2xl);
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------------------------
   Identity
   ------------------------------------------------------------------------- */
.vc-identity__avatar-wrap {
    margin-bottom: var(--vc-space-md);
    position: relative;
    display: inline-block;
}

.vc-identity__avatar-wrap::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vc-accent-primary) 0%, var(--vc-accent-secondary) 100%);
    z-index: -1;
    opacity: 0.6;
    filter: blur(8px);
    transition: opacity var(--vc-transition-base), filter var(--vc-transition-base);
}

.vc-identity__avatar-wrap:hover::after {
    opacity: 0.8;
    filter: blur(12px);
}

.vc-identity__avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--vc-bg-primary);
    box-shadow: var(--vc-shadow-soft);
    transition: transform var(--vc-transition-base), box-shadow var(--vc-transition-base);
    background-color: var(--vc-bg-secondary);
}

/* No photograph on the account: the monogram fills the same circle so the
   panel never opens a hole where a face was meant to be. */
.vc-identity__avatar--mono {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vc-font-display);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--vc-accent-primary);
    background: linear-gradient(135deg, var(--vc-bg-secondary) 0%, var(--vc-bg-card) 100%);
}

.vc-identity__avatar:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(167, 139, 250, 0.25);
}

.vc-identity__name {
    /* The design's size, kept as the ceiling. A name may be 80 characters with
       no space in it, and the second term shrinks the type to whatever the
       column can actually hold before that happens. 0.6 is the average glyph
       width of the display face in `em`. */
    --vc-name-cap: clamp(40px, 5vw, 52px);
    --vc-name-col: min(30rem, 84vw);
    --vc-name-len: 10;

    font-family: var(--vc-font-display);
    font-size: max(26px, min(var(--vc-name-cap), calc(var(--vc-name-col) / var(--vc-name-len) / 0.6)));
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: var(--vc-space-sm);
    min-width: 0;
    overflow-wrap: anywhere;
}

.vc-identity__name a {
    background: linear-gradient(135deg, var(--vc-text-primary) 0%, var(--vc-accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vc-identity__name a:hover {
    background: linear-gradient(135deg, var(--vc-accent-primary) 0%, var(--vc-accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vc-identity__title {
    font-family: var(--vc-font-display);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    color: var(--vc-text-secondary);
    margin-bottom: var(--vc-space-md);
    letter-spacing: -0.3px;
    overflow-wrap: anywhere;
}

.vc-identity__tagline {
    font-size: 15px;
    color: var(--vc-text-tertiary);
    line-height: 1.6;
    max-width: 340px;
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */
.vc-nav { margin-top: var(--vc-space-3xl); }

.vc-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-sm);
}

.vc-nav__link {
    display: flex;
    align-items: center;
    gap: var(--vc-space-md);
    padding: var(--vc-space-sm) 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--vc-text-tertiary);
    transition: color var(--vc-transition-base);
}

.vc-nav__indicator {
    display: inline-block;
    width: var(--vc-nav-indicator-width);
    height: 1.5px;
    flex-shrink: 0;
    background-color: var(--vc-text-tertiary);
    transition: width var(--vc-transition-base), background-color var(--vc-transition-base);
}

.vc-nav__link:hover { color: var(--vc-text-primary); }

.vc-nav__link:hover .vc-nav__indicator {
    width: var(--vc-nav-indicator-active-width);
    background-color: var(--vc-text-primary);
}

/* -------------------------------------------------------------------------
   Social links
   ------------------------------------------------------------------------- */
.vc-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vc-space-lg);
    margin-top: auto;
    padding-top: var(--vc-space-2xl);
}

.vc-social {
    color: var(--vc-text-tertiary);
    transition: color var(--vc-transition-base), transform var(--vc-transition-base);
}

.vc-social:hover { color: var(--vc-accent-primary); transform: translateY(-2px); }

.vc-social--static { cursor: default; }

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */
.vc-section {
    margin-bottom: var(--vc-space-5xl);
    scroll-margin-top: var(--vc-space-4xl);
}

.vc-section__header { margin-bottom: var(--vc-space-xl); }

.vc-section__title {
    font-family: var(--vc-font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--vc-text-primary);
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--vc-space-md) 0;
    background-color: rgba(253, 248, 244, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none; /* visible only on mobile */
}

/* A section with nothing in it is nothing to look at, but in the studio it is
   still a place to drop a decoration — so it keeps enough height to aim at. */
.theme-vcorps.is-editing .vc-section { min-height: 7rem; }

/* -------------------------------------------------------------------------
   About
   ------------------------------------------------------------------------- */
.vc-about p {
    color: var(--vc-text-secondary);
    font-size: 15px;
    margin-bottom: var(--vc-space-md);
    line-height: 1.75;
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Video

   This theme sizes the player itself instead of leaning on the .embed rules in
   templates/shared/base.css. Those live in the application rather than in this
   archive, so a server running an older base.css gives an iframe no width and
   no height at all — and an unstyled iframe falls back to its intrinsic 300x150,
   which looks exactly like a video refusing to fill its box and cannot be fixed
   by re-uploading the theme, because the missing rule was never in the theme.

   So: the wrapper owns the shape, and the player is absolutely positioned to
   fill it. Nothing here needs base.css to have heard of video.
   ------------------------------------------------------------------------- */
/* Scoped with .theme-vcorps so the 16:9 outranks the 16:10 on .vc-project__thumb
   whatever order the two end up in. Equal specificity here let the still-image
   ratio win and put a thin letterbox inside every player. */
.theme-vcorps .vc-film,
.theme-vcorps .vc-project__thumb--film {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--vc-bg-secondary);
}

.theme-vcorps .vc-film .embed,
.theme-vcorps .vc-project__thumb--film .embed {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    background: var(--vc-bg-secondary);
}

.theme-vcorps .vc-film .embed__frame,
.theme-vcorps .vc-project__thumb--film .embed__frame,
.theme-vcorps .vc-film iframe,
.theme-vcorps .vc-project__thumb--film iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The story film, framed exactly like a project thumbnail so the two read as
   the same kind of object. */
.vc-film {
    margin-bottom: var(--vc-space-lg);
    border-radius: 12px;
    border: 1.5px solid var(--vc-border);
}

.vc-block { margin-top: var(--vc-space-xl); }

.vc-block__heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--vc-text-primary);
    margin-bottom: var(--vc-space-md);
}

/* Stats */
.vc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vc-space-md) var(--vc-space-2xl);
    margin: var(--vc-space-lg) 0 var(--vc-space-md);
}

.vc-stats__item { min-width: 0; }

.vc-stats__value {
    font-family: var(--vc-font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--vc-accent-primary);
    overflow-wrap: anywhere;
}

.vc-stats__label {
    font-size: 13px;
    color: var(--vc-text-tertiary);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Services */
.vc-services {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-xs);
}

.vc-service {
    padding: var(--vc-space-md);
    margin-left: calc(var(--vc-space-md) * -1);
    border-radius: 12px;
    transition: background-color var(--vc-transition-base);
}

.vc-service:hover { background-color: rgba(167, 139, 250, 0.04); }

.vc-service__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--vc-text-primary);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.vc-service__blurb {
    font-size: 14px;
    color: var(--vc-text-secondary);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* Skills */
.vc-tech__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vc-space-sm) var(--vc-space-xl);
}

.vc-tech__item {
    font-size: 14px;
    color: var(--vc-text-secondary);
    position: relative;
    padding-left: var(--vc-space-lg);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Drawn rather than typed: a character in `content` is a word the owner of the
   portfolio could never change. */
.vc-tech__item::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--vc-accent-primary);
}

/* -------------------------------------------------------------------------
   Experience
   ------------------------------------------------------------------------- */
.vc-exp-list {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-sm);
}

.vc-exp {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--vc-space-lg);
    padding: var(--vc-space-lg);
    border-radius: 12px;
    transition: background-color var(--vc-transition-base), box-shadow var(--vc-transition-base);
    color: inherit;
    position: relative;
}

.vc-exp:hover {
    background-color: rgba(167, 139, 250, 0.04);
    box-shadow: inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
}

.vc-exp__date {
    font-size: 13px;
    font-weight: 500;
    color: var(--vc-text-tertiary);
    letter-spacing: 0.3px;
    padding-top: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vc-exp__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--vc-text-primary);
    line-height: 1.4;
    margin-bottom: var(--vc-space-sm);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vc-exp__company { color: var(--vc-accent-primary); }

/* The middle dot between role and employer, as a shape. */
.vc-exp__sep {
    align-self: center;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.45;
}

.vc-arrow {
    display: inline-block;
    transition: transform var(--vc-transition-base);
    margin-left: 4px;
    flex-shrink: 0;
    vertical-align: middle;
}

.vc-exp:hover .vc-arrow { transform: translate(3px, -3px); }
.vc-exp:hover .vc-exp__title { color: var(--vc-accent-primary); }

.vc-exp__description {
    font-size: 14px;
    color: var(--vc-text-secondary);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* Recognition */
.vc-recog {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-sm);
}

.vc-recog__row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--vc-space-lg);
    padding: var(--vc-space-xs) 0;
}

.vc-recog__year {
    font-size: 13px;
    font-weight: 500;
    color: var(--vc-text-tertiary);
    letter-spacing: 0.3px;
    overflow-wrap: anywhere;
}

.vc-recog__text {
    font-size: 14px;
    color: var(--vc-text-secondary);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Projects
   ------------------------------------------------------------------------- */
.vc-project-list {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-sm);
}

.vc-project {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--vc-space-lg);
    padding: var(--vc-space-lg);
    border-radius: 12px;
    transition: background-color var(--vc-transition-base), box-shadow var(--vc-transition-base);
    color: inherit;
}

.vc-project:hover {
    background-color: rgba(167, 139, 250, 0.04);
    box-shadow: inset 0 1px 0 0 rgba(167, 139, 250, 0.08);
}

.vc-project__thumb {
    overflow: hidden;
    border-radius: 8px;
    border: 1.5px solid var(--vc-border);
    transition: border-color var(--vc-transition-base), box-shadow var(--vc-transition-base);
    aspect-ratio: 16 / 10;
}

.vc-project:hover .vc-project__thumb {
    border-color: rgba(167, 139, 250, 0.3);
    box-shadow: 0 2px 12px rgba(167, 139, 250, 0.08);
}

/* The shared artwork block, reshaped to this theme's frame. It arrives as a
   4:3 box on brutalist paper; here it fills a 16:10 card in pastel. */
.theme-vcorps .vc-project__thumb .art {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    background: var(--vc-bg-secondary);
    transition: transform var(--vc-transition-slow);

    /* The drawn placeholder paints its blocks with the shared ink and paper
       tokens. Redefining them here keeps that inside the card rather than
       dropping near-black rectangles into a pastel page. */
    --ink: var(--vc-text-primary);
    --paper: var(--vc-bg-card);
    --paper-2: var(--vc-bg-secondary);
}

/* A card with a film in it stacks instead of sitting in two columns: the 140px
   thumbnail column is narrower than a player's own controls, so a video in it
   would be a picture of a video rather than a video. Everything else about the
   card — padding, radius, hover, the text below — is unchanged, and on a phone
   every card is already stacked, so this is the same shape one breakpoint
   early. */
/* No max-width. A still sits in a 140px column beside its text, so capping it
   keeps the row tidy; a film is the row, and a player that stops short of the
   card it is sitting in reads as a broken image rather than as restraint. */
.vc-project--film { grid-template-columns: minmax(0, 1fr); }
.vc-project--film .vc-project__thumb { max-width: none; }

/* The hover scale is dropped on a film: a player that creeps away when the
   pointer reaches it is a player you cannot press a button on. The 16:9 shape
   and the fill are set in the video block above. */
.theme-vcorps .vc-project:hover .vc-project__thumb--film { transform: none; }

.theme-vcorps .vc-project__thumb .art > span { border-width: 1.5px; }
.theme-vcorps .vc-project__thumb .art__photo { width: 100%; height: 100%; object-fit: cover; }
.theme-vcorps .vc-project:hover .art { transform: scale(1.03); }

/* Accent map, softened to the theme's own range. */
.theme-vcorps .art-cyan   { --art-accent: #A5E8F0; }
.theme-vcorps .art-orange { --art-accent: #FDBA9B; }
.theme-vcorps .art-lime   { --art-accent: var(--vc-accent-tertiary); }
.theme-vcorps .art-purple { --art-accent: var(--vc-accent-primary); }
.theme-vcorps .art-pink   { --art-accent: var(--vc-accent-secondary); }
.theme-vcorps .art-yellow { --art-accent: #FDE68A; }

.vc-project__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--vc-text-primary);
    line-height: 1.4;
    margin-bottom: var(--vc-space-xs);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vc-project:hover .vc-arrow { transform: translate(3px, -3px); }
.vc-project:hover .vc-project__title { color: var(--vc-accent-primary); }

.vc-project__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vc-space-sm);
    margin-bottom: var(--vc-space-sm);
    font-size: 13px;
    color: var(--vc-text-tertiary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.vc-project__cat {
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--vc-accent-primary);
}

.vc-project__description {
    font-size: 14px;
    color: var(--vc-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--vc-space-md);
    overflow-wrap: anywhere;
}

/* Tags */
.vc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vc-space-sm);
}

.vc-tag {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    background-color: rgba(167, 139, 250, 0.08);
    color: var(--vc-accent-primary);
    letter-spacing: 0.3px;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: background-color var(--vc-transition-base);
}

.vc-project:hover .vc-tag { background-color: rgba(167, 139, 250, 0.14); }

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */
.vc-contact__status {
    display: flex;
    align-items: center;
    gap: var(--vc-space-sm);
    color: var(--vc-text-secondary);
    font-size: 15px;
    line-height: 1.75;
    max-width: 500px;
    margin-bottom: var(--vc-space-xl);
    overflow-wrap: anywhere;
}

.vc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--vc-accent-tertiary);
    box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.22);
}

.vc-contact__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-sm);
    padding: 14px 32px;
    max-width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: var(--vc-accent-primary);
    border: 1.5px solid var(--vc-accent-primary);
    border-radius: 8px;
    background: transparent;
    transition: background-color var(--vc-transition-base), transform var(--vc-transition-base),
                box-shadow var(--vc-transition-base);
    letter-spacing: 0.3px;
    overflow-wrap: anywhere;
}

.vc-contact__btn:hover {
    background-color: rgba(167, 139, 250, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(167, 139, 250, 0.15);
}

.vc-contact__btn svg {
    flex-shrink: 0;
    transition: transform var(--vc-transition-base);
}

.vc-contact__btn:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.vc-foot { padding: var(--vc-space-3xl) 0 var(--vc-space-2xl); }

.vc-foot__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vc-space-sm);
    font-size: 13px;
    color: var(--vc-text-tertiary);
    line-height: 1.7;
    max-width: 500px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vc-foot__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: currentColor;
    opacity: 0.5;
}

/* -------------------------------------------------------------------------
   Mobile navigation — no JavaScript
   Opening points the URL at the overlay, so `:target` shows it. Tapping any
   link inside moves the target to a section, which closes it on the way.
   ------------------------------------------------------------------------- */
.vc-burger {
    display: none;
    position: fixed;
    top: var(--vc-space-lg);
    right: var(--vc-space-lg);
    z-index: 100;
    width: 44px;
    height: 44px;
    background-color: rgba(253, 248, 244, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--vc-border);
    border-radius: 10px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background-color var(--vc-transition-base);
    box-shadow: var(--vc-shadow-soft);
}

.vc-burger__line {
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: var(--vc-text-primary);
    border-radius: 2px;
    transition: transform var(--vc-transition-base), opacity var(--vc-transition-base);
}

.vc-burger--close .vc-burger__line:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.vc-burger--close .vc-burger__line:nth-child(2) { opacity: 0; }
.vc-burger--close .vc-burger__line:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

.vc-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: rgba(253, 248, 244, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--vc-transition-slow), visibility var(--vc-transition-slow);
}

.vc-mobile-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-xl);
    text-align: center;
}

.vc-mobile-nav__link {
    font-family: var(--vc-font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--vc-text-primary);
    letter-spacing: -0.5px;
    transition: color var(--vc-transition-base);
}

.vc-mobile-nav__link:hover { color: var(--vc-accent-primary); }

/* -------------------------------------------------------------------------
   Entrance
   Every rule whose opening state hides something lives in here. Outside this
   block the page is simply correct — which is what a visitor who asked for
   reduced motion gets, rather than a page whose pieces never faded in.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes vc-rise {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .vc-identity__avatar-wrap { animation: vc-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
    .vc-identity__name        { animation: vc-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
    .vc-identity__title       { animation: vc-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
    .vc-identity__tagline     { animation: vc-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
    .vc-nav                   { animation: vc-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
    .vc-socials               { animation: vc-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }

    /* The drift that replaces the cursor spotlight. */
    @keyframes vc-drift {
        0%   { transform: translate(-50%, -50%); }
        50%  { transform: translate(-58%, -42%); }
        100% { transform: translate(-50%, -50%); }
    }

    .vc-spotlight { animation: vc-drift 26s ease-in-out infinite; }

    /* Cards rise as they come into view. `view()` is the only way to do this
       without JavaScript; `@supports` keeps the hidden opening state away from
       browsers that would never animate it back. The range ends inside the
       entry so a fast scroll never lands on a half-empty screen. */
    @supports (animation-timeline: view()) {
        @keyframes vc-reveal {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .vc-exp,
        .vc-project,
        .vc-service,
        .vc-recog__row {
            animation: vc-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }
}

/* -------------------------------------------------------------------------
   Responsive — short screens
   ------------------------------------------------------------------------- */
@media (max-height: 750px) and (min-width: 1025px) {
    .vc-panel {
        padding-top: var(--vc-space-2xl);
        padding-bottom: var(--vc-space-xl);
    }
    .vc-nav { margin-top: var(--vc-space-xl); }
    .vc-socials { padding-top: var(--vc-space-xl); }
}

/* -------------------------------------------------------------------------
   Responsive — tablet
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .vc-wrap { flex-direction: column; }

    .vc-panel {
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible;
        padding: var(--vc-space-4xl) var(--vc-space-lg) var(--vc-space-2xl);
    }

    .vc-panel .vc-nav { display: none; }

    .vc-panel .vc-socials {
        margin-top: var(--vc-space-xl);
        padding-top: 0;
    }

    .vc-main { padding: var(--vc-space-xl) var(--vc-space-lg) var(--vc-space-2xl); }

    .vc-section__title { display: block; }

    .vc-burger--open { display: flex; }

    .vc-mobile-nav:target {
        opacity: 1;
        visibility: visible;
    }

    .vc-mobile-nav:target ~ .vc-burger--open { display: none; }
    .vc-mobile-nav:target ~ .vc-burger--close { display: flex; }

    .vc-exp,
    .vc-recog__row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vc-space-sm);
    }

    .vc-project {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vc-space-md);
    }

    /* A still keeps the design's 280px cap once the card stacks. A film does
       not: at this width the card is the screen, and a 280px player on a phone
       is smaller than the thumbnail it replaced. */
    .vc-project__thumb { max-width: 280px; }
    .vc-project--film .vc-project__thumb { max-width: none; }
}

/* -------------------------------------------------------------------------
   Responsive — mobile
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .vc-wrap { padding: 0 var(--vc-space-md); }

    .vc-panel { padding: var(--vc-space-3xl) var(--vc-space-md) var(--vc-space-xl); }

    .vc-main { padding: var(--vc-space-lg) var(--vc-space-md) var(--vc-space-xl); }

    .vc-identity__name { --vc-name-cap: 36px; }

    .vc-section { margin-bottom: var(--vc-space-4xl); }

    .vc-tech__list { grid-template-columns: minmax(0, 1fr); }

    .vc-exp { padding: var(--vc-space-md); }

    .vc-project { padding: var(--vc-space-md); }

    .vc-service { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   Responsive — small mobile
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .vc-identity__name { --vc-name-cap: 32px; }

    .vc-identity__title { font-size: 16px; }

    .vc-contact__btn {
        width: 100%;
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .vc-spotlight { display: none; }
}

.theme-vcorps a:focus-visible {
    outline: 2px solid var(--vc-accent-primary);
    outline-offset: 4px;
    border-radius: 4px;
}