/* =========================================================
   About page: "Where I've worked" timeline.
   Layout idea from kishanvagale.com (company on the left, the work done there on the right),
   drawn in the portfolio's own style: white panel, pencil border, teal, Bricolage Grotesque + Figtree.
   ========================================================= */

.tl-section {
    padding: 24px 24px 72px;
    scroll-margin-top: 96px;
}

.tl-panel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 64px 40px;
    background: #FFFFFF;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 24px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.06);
}

.tl-head {
    margin-bottom: 40px;
}

.tl-title {
    margin: 0;
    font-family: var(--font-sketch);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-accent-ink, #14545E);
}

.tl-sub {
    max-width: 640px;
    margin: 10px 0 0;
    font-family: var(--font-ui);
    font-size: 1.1rem;
    line-height: 1.6;
    color: #6B6B66;
}

.tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: #55554F;
}

.tl-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ----- one company = one row ----- */
.tl-grid {
    border-top: 1px solid #ECE6DA;
}

.tl-entry {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    border-bottom: 1px solid #ECE6DA;
    scroll-margin-top: 96px;
}

.tl-pos {
    border-right: 1px solid #ECE6DA;
    padding: 28px 28px 32px 0;
}

.tl-pos-inner {
    position: sticky;
    top: 104px;
}

.tl-company {
    margin: 0;
    font-family: var(--font-sketch);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-pencil, #1A1A18);
}

.tl-company small {
    display: block;
    margin-top: 2px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    color: #6B6B66;
}

.tl-period {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: #55554F;
}

.tl-now {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-highlight, #266268);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Role ladder: dots joined by a thin line */
.tl-roles {
    position: relative;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-ui);
}

.tl-roles li {
    position: relative;
    padding-left: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    color: #33332F;
}

.tl-roles li + li {
    margin-top: 16px;
}

.tl-roles li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--color-highlight, #266268);
    background: #fff;
}

.tl-roles li:first-child::before {
    background: var(--color-highlight, #266268);
}

.tl-roles li + li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: -12px;
    height: 16px;
    border-left: 1px dashed #C9C5BA;
}

.tl-roles small {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    font-weight: 500;
    color: #6B6B66;
}

.tl-kind {
    display: inline-block;
    margin-top: 16px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 0.5px solid #C9C5BA;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #55554F;
}

.tl-kind.is-founding {
    border-color: #E8B04B;
    background: #FFF6E3;
    color: #8A5A00;
}

.tl-kind.is-work {
    border-color: var(--color-highlight, #266268);
    background: #EEF6F6;
    color: var(--color-highlight-dark, #1B4A4F);
}

/* ----- the work, on the right ----- */
.tl-projects {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-project {
    padding: 28px 0 28px 32px;
    transition: opacity 0.45s ease;
}

.tl-project + .tl-project {
    border-top: 1px solid #ECE6DA;
}

.tl-p-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.tl-p-title {
    margin: 0;
    font-family: var(--font-sketch);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-accent-ink, #14545E);
}

.tl-project.is-feature .tl-p-title {
    font-size: 2.3rem;
}

.tl-chip {
    padding: 2px 9px;
    border-radius: 999px;
    border: 0.5px solid #C9C5BA;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #55554F;
    white-space: nowrap;
}

.tl-chip.is-case {
    border-color: var(--color-highlight, #266268);
    color: var(--color-highlight-dark, #1B4A4F);
}

.tl-chip.is-win {
    border-color: #E8B04B;
    color: #8A5A00;
    background: #FFF6E3;
}

.tl-p-desc {
    max-width: 620px;
    margin: 10px 0 0;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    color: #444440;
}

.tl-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-pencil, #1A1A18);
}

.tl-metrics li + li::before {
    content: "·";
    margin: 0 10px;
    color: #A8A397;
    font-weight: 700;
}

.tl-media {
    display: block;
    max-width: 720px;
    margin-top: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 16px;
    background: #F4F1EA;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tl-media:hover {
    transform: translateY(-3px);
    box-shadow: 7px 9px 0 rgba(0, 0, 0, 0.1);
}

/* A plain screenshot with no case study (e.g. Scogo): same frame, no lift, normal cursor */
.tl-media.tl-media-static {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.tl-media.tl-media-static:hover {
    transform: none;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.08);
}

.tl-media video,
.tl-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 9px 16px;
    border: 1px solid var(--color-highlight, #266268);
    border-radius: 8px;
    background: var(--color-highlight, #266268);
    color: #FCFBF4;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.tl-link:hover {
    background: var(--color-highlight-dark, #1B4A4F);
}

.tl-link svg {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform 0.2s ease;
}

.tl-link:hover svg {
    transform: translateX(3px);
}

.tl-link:focus-visible,
.tl-media:focus-visible {
    outline: 2px solid var(--color-highlight, #266268);
    outline-offset: 3px;
}

/* Small rows: hackathons and where it started */
.tl-entry.is-small .tl-project {
    padding-top: 20px;
    padding-bottom: 20px;
}

.tl-entry.is-small .tl-p-title {
    font-size: 1.35rem;
}

.tl-when {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: #6B6B66;
}

/* Scroll focus (JS only): the work you are reading is full strength, the rest is softer */
.tl-js .tl-project {
    opacity: 0.42;
}

.tl-js .tl-project.is-lit {
    opacity: 1;
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
    .tl-panel {
        padding: 48px 36px 28px;
    }

    .tl-entry {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .tl-project.is-feature .tl-p-title {
        font-size: 2rem;
    }
}

/* ----- Phone: company on top, work below ----- */
@media (max-width: 760px) {
    .tl-section {
        padding: 16px 12px 48px;
    }

    .tl-panel {
        padding: 32px 20px 12px;
        border-radius: 18px;
    }

    .tl-title {
        font-size: 2.4rem;
    }

    .tl-sub {
        font-size: 1rem;
    }

    .tl-entry {
        grid-template-columns: 1fr;
    }

    .tl-pos {
        border-right: 0;
        border-bottom: 1px dashed #ECE6DA;
        padding: 24px 0 18px;
    }

    .tl-pos-inner {
        position: static;
    }

    .tl-roles {
        margin-top: 14px;
    }

    .tl-project {
        padding: 20px 0 24px;
    }

    .tl-metrics {
        flex-direction: column;
        gap: 4px;
    }

    .tl-metrics li::before,
    .tl-metrics li + li::before {
        content: "•";
        margin: 0 8px 0 0;
        color: #A39E94;
    }

    .tl-p-title,
    .tl-project.is-feature .tl-p-title {
        font-size: 1.6rem;
    }

    .tl-js .tl-project {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tl-project,
    .tl-media,
    .tl-link,
    .tl-link svg {
        transition: none;
    }

    .tl-js .tl-project {
        opacity: 1;
    }
}

/* About timeline (asked 2026-10-04): no line above the first entry and none under the last one;
   the lines between entries stay */
.tl-grid { border-top: 0; }
.tl-grid > .tl-entry:last-child { border-bottom: 0; }

/* Company logos (asked 2026-10-04): a 44px rounded tile above each company name.
   Real logos from the companies' own sites (assets/logos/); a teal letter tile where no
   verified logo exists (Structr Labs, Devlogs, Clinqo, QuickServe). */
.tl-logo {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 0.5px solid var(--line, #E5E1D8);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06);
}
.tl-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-logo.is-letter {
    background: #E8F1F1;
    color: var(--color-highlight-dark, #1B4A4F);
    font-family: var(--t-head, var(--font-sketch));
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.tl-entry.is-small .tl-logo { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 10px; }
.tl-entry.is-small .tl-logo.is-letter { font-size: 1rem; }
@media (max-width: 760px) {
    .tl-logo { width: 40px; height: 40px; margin-bottom: 10px; }
}

/* JailMail kiosk screens (asked 4 Oct 2026): the same screens as the home strip, 2 by 2 in the
   tl-media frame width on desktop; on phones one row you swipe through, each screen 82% wide */
.tl-shots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 720px;
    margin-top: 20px;
}

.tl-shot {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1013 / 720;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 12px;
    background: #F4F1EA;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08);
}

.tl-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-shots:focus-visible {
    outline: 2px solid var(--color-highlight, #266268);
    outline-offset: 4px;
    border-radius: 12px;
}

@media (max-width: 760px) {
    .tl-shots {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 6px 8px 0; /* room for the card shadows */
        overscroll-behavior-x: contain;
    }

    .tl-shots::-webkit-scrollbar {
        display: none;
    }

    .tl-shot {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

/* ----- Phone redesign (asked 4 Oct 2026) -----
   No big outer panel: every company is its own white card, like the home sections.
   Card top: logo beside the company name, then one meta row (dates, Now, kind chip),
   then the roles. The work below sits on dashed dividers with smaller type, metrics as
   soft pills and a full width button. The scroll dimming is off so nothing reads faded.
   #experience + !important because type.css sets these sizes with !important. */
@media (max-width: 760px) {
    #experience .tl-panel {
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    #experience .tl-grid {
        display: grid;
        gap: 16px;
    }

    #experience .tl-entry,
    #experience .tl-grid > .tl-entry:last-child {
        padding: 20px 16px 4px;
        background: #FFFFFF;
        border: 0.5px solid var(--line, #E5E1D8);
        border-radius: 18px;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06);
    }

    #experience .tl-pos {
        padding: 0 0 16px;
        border-bottom: 1px dashed #E5E1D8;
    }

    #experience .tl-project {
        padding: 16px 0 20px;
    }

    #experience .tl-project + .tl-project {
        border-top: 1px dashed #E5E1D8;
    }

    #experience .tl-p-head {
        gap: 6px 8px;
    }

    #experience .tl-p-title,
    #experience .tl-project.is-feature .tl-p-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    #experience .tl-project.is-feature .tl-p-title {
        font-size: 20px !important;
    }

    #experience .tl-chip {
        padding: 2px 8px;
        font-size: 10px !important;
        letter-spacing: 0.06em;
    }

    #experience .tl-p-desc {
        margin-top: 8px;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* metrics as soft pills that wrap */
    #experience .tl-metrics {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 12px;
    }

    #experience .tl-metrics li {
        padding: 4px 10px;
        border-radius: 999px;
        background: #F4F1EA;
        font-size: 12px !important;
        line-height: 1.3 !important;
        font-weight: 600;
    }

    #experience .tl-metrics li::before,
    #experience .tl-metrics li + li::before {
        content: none;
    }

    #experience .tl-media,
    #experience .tl-shots {
        margin-top: 16px;
    }

    #experience .tl-media {
        border-radius: 12px;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06);
    }

    #experience .tl-link {
        display: flex !important;
        width: 100%;
        justify-content: center;
        margin-top: 16px;
    }

    .tl-js #experience .tl-project {
        opacity: 1;
    }
}

/* NIT Rourkela row: Main Building photo plus its Wikimedia Commons credit (4 Oct 2026) */
.tl-credit {
    margin: 10px 0 0;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    line-height: 1.4;
    color: #8A867C;
}
.tl-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tl-credit a:hover { color: var(--color-highlight-dark, #266268); }

/* Scogo AI (asked 2026-10-04): more screens under the Integrations shot, like JailMail,
   in the wider desktop app shape so nothing is cropped */
.tl-shots.is-wide .tl-shot { aspect-ratio: 1153 / 720; }

/* ----- Left column, one clear order (asked 4 Oct 2026) -----
   1. logo beside the company name (and its one line about the company)
   2. the role, the most important line after the company
   3. dates with the kind chip on the same line, quieter
   The role no longer repeats "Internship" / "Founding team"; that lives only in the chip.
   A single role is plain text; the dot ladder is kept only where there are two roles. */
/* desktop: the left column is narrow (200 to 240px), so the logo sits above the name;
   on phones the card is wide, so it sits beside it */
#experience .tl-id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

#experience .tl-logo {
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 10px;
}

#experience .tl-entry.is-small .tl-logo {
    width: 36px;
    height: 36px;
}

#experience .tl-company {
    font-size: 22px !important;
    line-height: 1.2 !important;
}

#experience .tl-company small {
    margin-top: 2px;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

#experience .tl-role {
    margin: 16px 0 0;
    font-family: var(--t-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-pencil, #1A1A18);
}

#experience .tl-roles {
    margin-top: 16px;
}

#experience .tl-roles li {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--text-pencil, #1A1A18);
}

#experience .tl-roles li + li {
    margin-top: 12px;
    font-weight: 400 !important;
    color: #55554F;
}

#experience .tl-roles li::before {
    top: 6px;
}

#experience .tl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
}

#experience .tl-period {
    margin: 0;
    gap: 6px;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6B6B66;
}

#experience .tl-now {
    padding: 2px 7px;
    font-size: 10px !important;
}

#experience .tl-kind {
    margin: 0;
    padding: 2px 8px;
    font-size: 10px !important;
    letter-spacing: 0.06em;
}

@media (max-width: 760px) {
    #experience .tl-id {
        flex-direction: row;
        align-items: center;
    }

    #experience .tl-company {
        font-size: 18px !important;
    }

    #experience .tl-role,
    #experience .tl-roles {
        margin-top: 14px;
    }

    #experience .tl-roles li {
        font-size: 14px !important;
    }
}