/* Sidebar project filter: pills beside the Projects label (js/site.js) */
.project-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.project-filter { position: relative; display: flex; gap: 3px; }

/* With JS, a single black pill slides between categories (js/site.js) instead of each button
   painting its own background */
.project-filter-pill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 6px;
    background-color: #000;
    pointer-events: none;
}
.project-filter.has-pill button { position: relative; z-index: 1; }
.project-filter.has-pill button[aria-pressed="true"],
.project-filter.has-pill button[aria-pressed="true"]:hover { background-color: transparent; color: #fff; }
.project-filter:not(.has-pill) .project-filter-pill { display: none; }

/* GSAP moves the rows; a CSS transition on size or transform would fight it */
.projects-buttons .project { transition-property: background-color, color; overflow: hidden; }

/* A row the filter just removed stays laid out while GSAP folds it shut (js/site.js) */
html[data-projects] .menu-projects .menu-row.is-leaving { display: flex !important; }

.project-filter button {
    padding: 3px 10px;
    border: 0;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.6);
    font-family: var(--inter, 'Inter'), sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.3px;
    line-height: 150%;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.project-filter button:hover { background-color: rgba(0, 0, 0, 0.1); color: #000; }
.project-filter button[aria-pressed="true"] { background-color: #000; color: #fff; }
.project-filter button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Before JS runs, the filter saved in boot.js already applies. The page you're on always shows. */
html[data-projects="product"] .menu-projects .menu-row[data-type]:not([data-type~="product"], .selected),
html[data-projects="website"] .menu-projects .menu-row[data-type]:not([data-type~="website"], .selected),
html[data-projects="creative"] .menu-projects .menu-row[data-type]:not([data-type~="creative"], .selected) {
    display: none;
}

/* Experience rows: always one line. A fixed name column so roles line up row to row, dates on the
   right. Where the sidebar is narrow, titles and dates switch to short forms (Sr., Now, 2017–25)
   and the text steps down to 12px. */
.projects-container { container-type: inline-size; }

:is(.project, .project-rh):has(.type-container) {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
    white-space: nowrap;
}

:is(.project, .project-rh):has(.type-container) :is(.type, .project-name-text) {
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(.project, .project-rh) .sm { display: none; }

@container (max-width: 440px) {
    :is(.project, .project-rh):has(.type-container) { grid-template-columns: 6.4rem minmax(0, 1fr) auto; }
    :is(.project, .project-rh) .lg { display: none; }
    :is(.project, .project-rh) .sm { display: inline; }
}

@container (max-width: 380px) {
    :is(.project, .project-rh):has(.type-container) { grid-template-columns: 6rem minmax(0, 1fr) auto; column-gap: 8px; }
    :is(.project, .project-rh):has(.type-container) :is(h3, .type, .date, .project-name-text) { font-size: 12px; }
}

/* Bio tags: the companies in the bio as small links. On hover a band of the brand's own colors
   sweeps through the name; on click the tag pulses in that color (js/site.js adds .is-tapped). */
.bio-tag {
    --ink: rgba(0, 0, 0, 0.8);
    padding: 1px 4px;
    font-weight: inherit;
    pointer-events: auto; /* the bio is an h3, and headings ignore the pointer site-wide */
    cursor: pointer;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--ink);
    text-decoration: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.bio-tag span {
    background-image: linear-gradient(100deg, var(--ink) 0 34%, var(--b1) 42%, var(--b2) 50%, var(--b3) 58%, var(--ink) 66% 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
}

.bio-tag:hover { background-color: var(--tint); }
.bio-tag:hover span { color: transparent; animation: bio-shimmer 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bio-tag:focus-visible { outline: 2px solid var(--b2); outline-offset: 2px; }
.bio-tag.is-tapped { animation: bio-tap 0.6s ease-out; }
.bio-tag.is-tapped span { color: transparent; animation: bio-shimmer 0.6s ease-out both; }

@keyframes bio-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes bio-tap {
    from { box-shadow: 0 0 0 0 var(--b2); }
    to { box-shadow: 0 0 0 7px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .bio-tag:hover span, .bio-tag.is-tapped span { animation: none; color: var(--b2); }
    .bio-tag.is-tapped { animation: none; }
}

/* The open-to-roles line on About: a link to Contact whose shimmer also plays by itself every
   few seconds, in the ring's spectrum */
.bio-tag.is-open { --b1: #e0529f; --b2: #4f7cf2; --b3: #17a77e; --tint: rgba(79, 124, 242, 0.1); }
.bio-tag.is-open span { color: transparent; animation: bio-every 6s cubic-bezier(0.22, 1, 0.36, 1) 2.4s infinite both; }
.bio-tag.is-open:hover span { animation: bio-shimmer 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bio-every { 0% { background-position: 100% 0; } 20%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .bio-tag.is-open span { animation: none; color: var(--ink); }
    .bio-tag.is-open:hover span { animation: none; color: var(--b2); }
}

/* Each brand's colors, sampled from its own site (deepened a touch to stay readable) */
.bio-tag[data-brand="asmallstudio"] { --b1: #2fc9a0; --b2: #4a9ff5; --b3: #8f4ff0; --tint: rgba(74, 159, 245, 0.12); }
.bio-tag[data-brand="awwwards"]     { --b1: #f2a900; --b2: #fa5d29; --b3: #f2a900; --tint: rgba(250, 93, 41, 0.11); }
.bio-tag[data-brand="msb"]          { --b1: #46367f; --b2: #0088cc; --b3: #c9a227; --tint: rgba(70, 54, 127, 0.11); }
.bio-tag[data-brand="smartstop"]    { --b1: #406ef6; --b2: #ff8a1f; --b3: #406ef6; --tint: rgba(64, 110, 246, 0.11); }
.bio-tag[data-brand="one"]          { --b1: #10153b; --b2: #0898fb; --b3: #10153b; --tint: rgba(8, 152, 251, 0.11); }

/* The side nav floats inside the window: 16px from the edges, rounded, with a soft shadow,
   instead of a full-height panel against the edge. On case pages it gives up 16px of width so
   it never covers the story. On phones the open menu floats the same way, 12px in. */
@media (min-width: 781px) {
    .right-side-menu {
        top: 16px;
        right: 16px;
        bottom: 16px;
        height: auto;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 48px -16px rgba(0, 0, 0, 0.16);
        overflow: hidden auto;
    }
    #right-side-menu {
        width: calc(max(30vw, 400px) - 16px);
        min-width: 0;
    }
    .right-side-menu .menu-container { height: 100%; }
}

@media (max-width: 780px) {
    .right-side-menu.open {
        inset: 12px;
        width: auto;
        min-width: 0;
        height: auto;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.2);
    }
}

/* Selected work rows get room to breathe: taller rows, a little more space between them */
.projects-buttons { gap: 4px; }
.projects-buttons .project { padding: 9px 14px; }
.project-header-row + .projects-buttons { margin-top: 14px; }


/* "More about me" under the bio: underlined text and a Heroicons arrow. GSAP drives the hover
   (js/site.js): the underline wipes off to the right and back in from the left, the arrow nudges. */
.bio-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 2px;
    color: rgba(0, 0, 0, 0.42);
    white-space: nowrap;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.3s ease;
}
.bio-more:hover, .bio-more:focus-visible { color: rgba(0, 0, 0, 0.85); }
.bio-more-text { position: relative; padding-bottom: 2px; }
.bio-more-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    transform-origin: left;
}
.bio-more-arrow { width: 0.9em; height: 0.9em; flex-shrink: 0; }
.bio-more:focus-visible { outline: 2px solid #000; outline-offset: 3px; border-radius: 2px; }

/* Text can be selected anywhere; images and video can't be selected or dragged.
   The selection is a very light grey. */
body, h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, span {
    -webkit-user-select: text;
    user-select: text;
}
h1, h2, h3, h4, h5, h6, p { pointer-events: auto; cursor: auto; }
a :is(h1, h2, h3, h4, h5, h6, p, span), button :is(span, svg) { cursor: pointer; }
img, video, svg, picture, canvas {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
::selection { background-color: #ebebe9; color: #111; }

/* Heroicons (20 solid), inline everywhere so they take the text color */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; }
.menu-icon { width: 20px; height: 20px; vertical-align: middle; }
.icon-to { width: 0.7em; height: 0.7em; vertical-align: 0.05em; margin: 0 0.04em; }
.story-facts a .icon { width: 12px; height: 12px; vertical-align: -1px; }

/* Text for screen readers and search engines only (the home page's heading, form status lines) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Hide / show the side nav on case pages (desktop). Collapsing slides the nav out to the right
   and lets the story take the full window; a floating Menu pill brings it back (js/site.js). */
.nav-toggle, .nav-open { display: none; }
@media (min-width: 781px) {
    .top-info-header-rh { display: flex; align-items: center; gap: 8px; }
    .nav-toggle {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 0;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.05);
        color: rgba(0, 0, 0, 0.6);
        cursor: pointer;
        transition: background-color 0.25s ease, color 0.25s ease;
    }
    .nav-toggle:hover { background-color: rgba(0, 0, 0, 0.1); color: #000; }
    .nav-toggle .icon { width: 16px; height: 16px; }

    .nav-open {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 112;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 200px;
        background-color: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.18);
        color: rgba(0, 0, 0, 0.85);
        font: inherit;
        font-size: 13px;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
    }
    .nav-open .icon { width: 16px; height: 16px; }

    #right-side-menu { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, visibility 0s linear 0s; }
    .page-content-wrapper { transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), margin-right 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

    html.nav-collapsed #right-side-menu {
        transform: translateX(calc(100% + 24px));
        opacity: 0;
        visibility: hidden;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, visibility 0s linear 0.6s;
    }
    html.nav-collapsed .page-content-wrapper { width: 100vw; margin-right: 0; }
    html.nav-collapsed .nav-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0.2s, 0.2s, 0s; }
}
@media (prefers-reduced-motion: reduce) {
    #right-side-menu, .page-content-wrapper, .nav-open { transition: none !important; }
}

/* Floating tooltip for [data-tip] buttons (js/site.js) */
.tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6000;
    padding: 5px 9px;
    border-radius: 7px;
    background-color: rgba(22, 22, 21, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12px;
    letter-spacing: -0.1px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.tip.is-on { opacity: 1; }

/* Skip to content: hidden until it has keyboard focus */
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 16px; border-radius: 200px; background-color: #161615; color: #fff; font-size: 13px; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus-visible { transform: none; outline: 2px solid #161615; outline-offset: 2px; }

/* Password-protected case studies: a small lock after the name (.claude/build_menu.py) */
.lock { display: inline-flex; vertical-align: -1px; margin-left: 6px; opacity: 0.55; }
.lock .icon { width: 11px; height: 11px; }

/* Soft button with a spectrum-ring hover: "Learn more about me" on the home page, Contact on About.
   The ring sweeps around it with a soft halo behind (after the Cosmos reference); pure CSS, and
   the spin runs only while hovered. .ring-hover adds just the ring to a button that keeps its own
   size and colours: every other Contact button (menu, top bar, case-study sign-off, About). */
.ring-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    color: #4a4a46;
    font-size: 15px;
    letter-spacing: -0.2px;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.ring-button:hover { background-color: #fff; color: var(--ink); }

@property --ring {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
:is(.ring-button, .ring-hover) { position: relative; } /* no isolation: the halo (z -1) must sit behind the button itself */
:is(.ring-button, .ring-hover)::before,
:is(.ring-button, .ring-hover)::after {
    content: "";
    position: absolute;
    border-radius: 12px;
    background: conic-gradient(from var(--ring), #ff8ad8, #8ab4ff, #7de8ff, #8dffc0, #ffe680, #ffad7a, #ff8ad8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    animation: ring-spin 2.6s linear infinite paused;
}
:is(.ring-button, .ring-hover)::before {
    inset: -1.5px;
    padding: 1.5px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:is(.ring-button, .ring-hover)::after { inset: -3px; z-index: -1; filter: blur(12px); }
.ring-hover::before, .ring-hover::after { border-radius: inherit; }
/* While hovered, every Contact button turns white like "Learn more about me", so the halo glows
   around it and never tints its middle */
html :is(.menu-contact, .navbar-pill, .story-sign-button, .about-button, .ring-button).ring-hover:hover { background-color: #fff; color: var(--ink, #111); }
:is(.ring-button, .ring-hover):hover::before { opacity: 1; animation-play-state: running; }
:is(.ring-button, .ring-hover):hover::after { opacity: 0.5; animation-play-state: running; }
@keyframes ring-spin { to { --ring: 360deg; } }
.ring-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ring-button .icon { width: 15px; height: 15px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ring-button:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .ring-button, .ring-button .icon { transition: none; }
    :is(.ring-button, .ring-hover)::before, :is(.ring-button, .ring-hover)::after { animation: none; }
}