/* =========================================================
   Home page below the hero (structure modelled on benshih.design):
   recent work timeline, other things I do, connect.
   Uses the portfolio's own fonts, teal and pencil card style.
   ========================================================= */

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

main > .bw-panel:first-of-type {
    margin-top: 24px;
}

.bw-head {
    margin-bottom: 28px;
}

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

.bw-note {
    margin: 8px 0 0;
    font-family: var(--font-ui);
    font-size: 1.15rem;
    color: #6B6B66;
}

.bw-more {
    margin-top: 16px;
    padding-left: 208px;
}

/* ----- Recent work timeline ----- */
.rw-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rw-item {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 88px;
}

.rw-item:last-child {
    padding-bottom: 32px;
}

.rw-year {
    position: sticky;
    top: 110px;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sketch);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #C9C5BA;
}

.rw-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1.5px solid #C9C5BA;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 10px #C9C5BA;
}

.rw-body {
    min-width: 0;
}

.rw-kicker {
    margin: 0 0 8px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B6B66;
}

.rw-name {
    margin: 0 0 12px;
    font-family: var(--font-sketch);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-accent-ink, #14545E);
}

.rw-desc {
    max-width: 600px;
    margin: 0 0 24px;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444440;
}

.rw-media {
    display: block;
    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 var(--ease-polish), box-shadow 0.3s var(--ease-polish);
}

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

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

.rw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 18px;
    border: 1px solid var(--color-highlight);
    border-radius: 8px;
    background: var(--color-highlight);
    color: #FCFBF4;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rw-btn:hover {
    background: var(--color-highlight-dark);
}

.rw-btn svg {
    transition: transform 0.2s ease;
}

.rw-btn:hover svg {
    transform: translateX(3px);
}

.rw-btn-line {
    background: transparent;
    color: var(--color-highlight-dark);
}

.rw-btn-line:hover {
    background: rgba(50, 127, 134, 0.08);
}

.rw-btn:focus-visible,
.rw-media:focus-visible,
.ot-app:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 3px;
}

/* ----- Other things I do ----- */
.ot-intro {
    max-width: 640px;
    margin: 16px 0 0;
    font-family: var(--font-ui);
    font-size: 1.2rem;
    line-height: 1.6;
    color: #55554F;
}

.ot-block {
    padding: 48px 0;
    border-top: 1px dashed rgba(26, 26, 24, 0.2);
    scroll-margin-top: 96px;
}

.ot-block:last-child {
    padding-bottom: 0;
}

.ot-label {
    margin: 0 0 20px;
    font-family: var(--font-sketch);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-pencil);
}

.ot-lede {
    max-width: 640px;
    margin: -8px 0 28px;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    line-height: 1.6;
    color: #55554F;
}

/* App card */
.ot-app {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 20px;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 16px;
    background: #FFFCF6;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.08);
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s var(--ease-polish), box-shadow 0.3s var(--ease-polish);
}

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

.ot-app img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 0.5px solid rgba(26, 26, 24, 0.25);
}

.ot-app-name {
    margin: 0 0 10px;
    font-family: var(--font-sketch);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-accent-ink, #14545E);
}

.ot-app .rw-desc {
    margin-bottom: 16px;
}

.ot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ot-tags span,
.ot-tag {
    padding: 4px 12px;
    border: 1px solid rgba(26, 26, 24, 0.35);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: #55554F;
    white-space: nowrap;
}

/* Writing: the list keeps its own styles; just space it */
#articles .wr-featured {
    margin-top: 0;
}

.ot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* Hackathons */
.ot-events {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ot-event {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px dashed rgba(26, 26, 24, 0.2);
}

.ot-event:first-child {
    border-top: 1px dashed rgba(26, 26, 24, 0.2);
}

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

.ot-what {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-pencil);
}

.ot-what strong {
    color: var(--color-accent-ink, #14545E);
}

/* Books: let the shelf run to the panel edges */
.ot-read {
    padding-bottom: 0;
}

.ot-library.library-section {
    margin: 0 -48px;
    overflow: hidden;
    padding: 8px 0 0;
    background: transparent;
}

/* ----- Connect ----- */
.bw-connect {
    text-align: center;
    padding: 72px 32px;
}

.cn-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.cn-actions .footer-copy {
    border-radius: 8px;
    border: 1px solid var(--color-highlight);
    color: var(--color-highlight-dark);
    padding: 10px 18px;
    font-size: 0.95rem;
}

.cn-actions .footer-copy.is-copied {
    border-color: var(--color-highlight);
    color: var(--color-highlight);
    background: rgba(50, 127, 134, 0.08);
}

/* Testimonials sit between panels: match the panel width */
#testimonials.tq-section {
    max-width: 1200px;
    margin: 0 auto 48px;
}

/* ----- Tablet ----- */
@media (max-width: 1000px) {
    .bw-panel {
        margin: 0 16px 20px;
        padding: 36px 28px 32px;
    }

    .rw-item {
        grid-template-columns: 136px minmax(0, 1fr);
    }

    .rw-year {
        font-size: 1.7rem;
    }

    .bw-more {
        padding-left: 160px;
    }

    .ot-app {
        grid-template-columns: 1fr;
    }

    .ot-library.library-section {
        margin: 0 -28px;
    }
}

/* ----- Phone ----- */
@media (max-width: 640px) {
    .bw-panel {
        margin: 0 12px 16px;
        padding: 28px 18px 24px;
        border-radius: 18px;
    }

    .bw-title {
        font-size: 2.3rem;
    }

    .bw-head {
        margin-bottom: 32px;
    }

    .rw-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-bottom: 56px;
    }

    .rw-year {
        position: static;
        font-size: 1.6rem;
    }

    .rw-name {
        font-size: 1.9rem;
    }

    .bw-more {
        padding-left: 0;
    }

    .ot-label {
        font-size: 1.6rem;
    }

    .ot-event {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ot-tag {
        justify-self: start;
    }

    .ot-library.library-section {
        margin: 0 -18px;
    }

    .bw-connect {
        padding: 48px 20px;
    }
}

/* Writing has its own panel between "Some other things I do" and the hackathons panel */
.wr-section .wr-cards-head .bw-title {
    margin-bottom: 16px;
}

.wr-section .wr-cards-head .ot-lede {
    margin-top: 0;
}

/* A panel that starts with a block needs no divider line on top */
.bw-panel > .ot-block:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Books on the home page: smaller covers so more fit on screen */
.ot-library .library-marquee-container {
    margin-top: 0.5rem;
    padding: 1.25rem 0;
    overflow: hidden;
    /* No edge fade (asked 1 Oct 2026): covers slide in and out at full strength */
}

.ot-library .library-track {
    gap: 1.75rem !important;
    padding-left: 1.75rem;
}

.ot-library .book-cover {
    height: 220px !important;
}

@media (max-width: 640px) {
    .ot-library .library-track {
        gap: 1rem !important;
    }

    .ot-library .book-cover {
        height: 170px !important;
    }
}

/* Hackathons: photo cards */
.hk-cards {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hk-card {
    margin: 0;
    background: var(--bg-paper, #FFFCF6);
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 14px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.25s var(--ease-polish, ease), box-shadow 0.25s ease;
}

.hk-card:hover {
    transform: translateY(-3px);
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.12);
}

.hk-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-bottom: 0.5px solid var(--line, #E5E1D8);
    background: #E1DACD;
}

.hk-body {
    padding: 16px 18px 20px;
}

.hk-when {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6F6A61; /* was #8A857C, too light to read (contrast 3.7) */
}

.hk-result {
    margin: 6px 0 4px;
    font-family: var(--font-sketch);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-accent-ink, #14545E);
}

.hk-event {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.98rem;
    line-height: 1.5;
    color: #45453F;
}

@media (max-width: 900px) {
    .hk-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hk-card {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
    }

    .hk-card img {
        height: 100%;
        aspect-ratio: auto;
        border-bottom: 0;
        border-right: 0.5px solid var(--line, #E5E1D8);
    }

    .hk-result {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hk-card { transition: none; }
}

/* Home work: 2 case studies, then two ways to see more */
.bw-more {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bw-more .rw-btn {
    margin-top: 0;
}

@media (max-width: 760px) {
    .bw-more {
        padding-left: 0;
    }
}

/* Selected work: 2 cards side by side (idea from kishanvagale.com "Career & selected work") */
.sw-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}

.sw-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sw-media {
    display: block;
    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 var(--ease-polish, ease), box-shadow 0.3s var(--ease-polish, ease);
}

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

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

.sw-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 22px;
    font-family: var(--font-ui);
}

.sw-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-pencil);
}

.sw-chip {
    padding: 2px 10px;
    border-radius: 999px;
    border: 0.5px solid var(--line, #E5E1D8);
    background: #EEF6F6;
    color: var(--color-highlight-dark);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.sw-headline {
    margin: 10px 0 0;
    font-family: var(--font-sketch);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.12;
    color: var(--color-accent-ink, #14545E);
}

.sw-line {
    margin: 10px 0 0;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    color: #55554F;
}

.sw-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-bottom: 2px;
    border-bottom: 1.5px solid var(--color-highlight);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-highlight-dark);
    text-decoration: none;
    white-space: nowrap;
}

.sw-link svg {
    flex: none;
    transition: transform 0.2s ease;
}

.sw-link:hover svg {
    transform: translate(2px, -2px);
}

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

#work .bw-more {
    padding-left: 0;
    margin-top: 44px;
}

@media (max-width: 860px) {
    .sw-cards {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .sw-headline {
        font-size: 1.8rem;
    }
}

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

/* ----- Home: screens marquee right under the hero (moved from about.html) -----
   Steps one screen to the left every 3 seconds (marquee.js), no edge fade, pauses on hover.
   Images show at 360px tall: the 1x files are exactly 360px and the 2x files exactly 720px,
   so neither is resampled on screen. */
.home-journey {
    padding: 8px 0 56px;
    overflow: hidden;
}

.hj-viewport {
    overflow: hidden;
}

.hj-track {
    display: flex;
    gap: 32px;
    width: max-content;
    padding: 8px 0 4px;
    will-change: transform;
}

.home-journey .journey-shot {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.home-journey .journey-shot img {
    height: 360px;
    width: auto;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 12px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06);
    background: #fff;
    image-rendering: auto;
}

.home-journey .journey-shot figcaption {
    margin-top: 10px;
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
    color: #6B6B66;
}

@media (max-width: 760px) {
    .home-journey { padding-bottom: 24px; }
    .hj-track { gap: 18px; }
    .home-journey .journey-shot img { height: 240px; border-radius: 10px; }
    .home-journey .journey-shot figcaption { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hj-viewport { overflow-x: auto; }
}

/* ----- Home: short About with the DJ mascot (moved from about.html) ----- */
.home-about .about-split {
    gap: 56px;
    max-width: none;
}

.home-about .about-sketch {
    flex: 0 0 38%;
}

.home-about .about-sketch .mascot-wrapper {
    max-width: 420px;
    margin: 0 auto;
}

.home-about .about-text .bw-title {
    margin: 0 0 20px;
}

/* Home About: no outer card, black heading, brand logos pop in one by one (asked 2026-10-20) */
.bw-panel.home-about {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body[data-page="home"] .home-about .about-text .bw-title {
    color: var(--text-pencil, #1A1A18);
}

.home-about .about-sketch {
    flex: 0 0 44%;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 short rows, about as tall as the text beside it */
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 14px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.brand-tile--wide {
    grid-column: 1 / -1;
}

.brand-tile img {
    display: block;
    max-width: 100%;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply; /* with the filter, hides the near-white edges of the cropped logos */
    filter: brightness(1.04) contrast(1.04);
}

.brand-tile--wide img {
    max-height: 40px;
}

.brand-tile:hover {
    transform: translateY(-2px);
    box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.08);
}

/* brands.js adds .will-pop (hide) then .is-in (play) when the grid scrolls into view; without JS the logos simply show.
   A calm fade and short rise, one after another: professional, not bouncy (asked 2026-10-20) */
.brand-grid.will-pop:not(.is-in) .brand-tile {
    opacity: 0;
    transform: translateY(12px);
}

.brand-grid.is-in .brand-tile {
    animation: brand-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i) * 80ms);
}

@keyframes brand-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-grid.will-pop:not(.is-in) .brand-tile { opacity: 1; transform: none; }
    .brand-grid.is-in .brand-tile { animation: none; }
    .brand-tile:hover { transform: none; }
}

@media (max-width: 900px) {
    .home-about .about-sketch { flex: none; }
    .brand-tile { height: 80px; padding: 14px 16px; }
    .brand-tile img { max-height: 42px; }
    .brand-tile--wide img { max-height: 36px; }
}

@media (max-width: 420px) {
    .brand-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .brand-tile { height: 76px; padding: 12px 14px; border-radius: 12px; }
    .brand-tile img { max-height: 40px; }
    .brand-tile--wide img { max-height: 34px; }
}

.home-about .about-text p {
    font-size: 1.2rem;
    margin-bottom: 28px;
}

@media (max-width: 900px) {
    .home-about .about-split {
        flex-direction: column;
        gap: 24px;
        text-align: left;
    }

    .home-about .about-sketch {
        flex: none;
        width: 100%;
    }

    .home-about .about-sketch .mascot-wrapper {
        max-width: 300px;
    }
}

/* ----- About page: film on top ----- */
.af-section {
    margin-top: 24px;
}

.af-section .ot-lede {
    margin: 12px 0 0;
}

.af-film {
    margin: 32px 0 0;
    border: 0.5px solid var(--text-pencil);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    background: #111;
}

.af-film video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ----- About page: Gallery of Love on the page background, fading at both edges ----- */
#gallery-love.gallery-love-section {
    background: transparent;
}

#gallery-love .love-marquee-container {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

@media (max-width: 760px) {
    #gallery-love .love-marquee-container {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
}

/* Resume button: icon sits closer to the text. Journey captions: no bold names (asked 2026-09-28) */
.cta-container .btn-filled { gap: 6px !important; }
.journey-shot figcaption strong { font-weight: inherit !important; }

/* Home: every section title uses the H3 size, and the button next to it sits at the top, level with the title (asked 2026-09-28) */
body[data-page="home"] h2.bw-title {
    font-size: var(--t-h3) !important;
}

@media (min-width: 601px) {
    body[data-page="home"] .bw-head-row,
    body[data-page="home"] .wr-cards-head {
        align-items: flex-start;
    }
}

/* Selected work cards (asked 2026-09-28): no "Read the case study" link, the headline is the link,
   smaller headline that always sits on 2 lines, chip on the right of the company name */
.sw-meta { justify-content: space-between; }
.sw-headline,
body[data-page="home"] .sw-headline {
    font-size: var(--t-h5) !important;
    line-height: 1.2 !important;
}
.sw-headline a { color: inherit; text-decoration: none; }
.sw-headline a:hover { color: var(--color-highlight-dark); }
.sw-headline a:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; border-radius: 4px; }
@media (min-width: 861px) and (max-width: 1000px) {
    body[data-page="home"] .sw-headline { font-size: 23px !important; }
}
@media (max-width: 480px) {
    body[data-page="home"] .sw-headline { font-size: 20px !important; }
}

/* "I build tools with AI" card: title matches the Selected work headlines (asked 2026-09-28) */
body[data-page="home"] .ib-name {
    font-size: var(--t-h5) !important;
    line-height: 1.2 !important;
}
@media (min-width: 861px) and (max-width: 1000px) {
    body[data-page="home"] .ib-name { font-size: 23px !important; }
}
@media (max-width: 480px) {
    body[data-page="home"] .ib-name { font-size: 20px !important; }
}

/* About film inside the home About panel */
.home-about-film {
    margin-top: 36px;
}

.home-about-film-cap {
    padding: 12px 18px;
    background: #FFFCF6;
    border-top: 0.5px solid var(--text-pencil);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    color: #55554F;
}

/* Selected work, Building with AI and I talk about AI and design: dark headings */
#work .bw-title,
#bai-title,
#tk-title {
    color: var(--text-pencil);
}

#work .bw-head-row {
    align-items: center;
}

/* More breathing room between the screens strip and the Selected work card */
body[data-page="home"] .home-journey + #work {
    margin-top: 56px;
}

@media (max-width: 768px) {
    body[data-page="home"] .home-journey + #work {
        margin-top: 8px; /* phones: the strip already ends with 24px of padding */
    }
}

/* "Show all posts" button sits in the middle under the posts (asked 2026-10-02) */
body[data-page="home"] .tk-more:not([hidden]) {
    display: flex !important;
    width: fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Selected work card headlines (asked 2026-10-01): a touch lighter (Bricolage 600 read as bold,
   500 reads as semibold) and a little more room between the two lines */
.sw-headline,
body[data-page="home"] .sw-headline {
    font-weight: 500 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.005em !important;
}

/* About page (asked 2026-10-04): "About me" and its line sit above the film card on the page,
   not inside it; the card now only holds the film */
.af-head {
    max-width: 1200px;
    margin: 48px auto 24px;
    padding: 0 8px;
}
.af-head .ot-lede { margin: 12px 0 0; }
.about-page .af-section { margin-top: 0; padding: 24px; }
.about-page .af-section .af-film { margin-top: 0; }
@media (max-width: 1248px) {
    .af-head { padding: 0 32px; }
}
@media (max-width: 760px) {
    .af-head { margin-top: 32px; padding: 0 20px; }
    .about-page .af-section { padding: 12px; }
}

/* ===== About page redesign (asked 2026-10-04): same rhythm as the rest of the site =====
   Centred page heading (eyebrow, H1, line) like the other pages, the film in a white card
   with a quick facts row, and every section opened by the same left aligned head
   (eyebrow, H2, muted line) sitting on the page above its panel. 72px between sections. */
.about-page .ab-hero { text-align: center; margin: 56px auto 32px; }
.about-page .ab-hero .ot-lede { max-width: 620px; margin: 12px auto 0; }
/* About title is a statement now, like Growth: black, with the key words in the darkest teal (4 Oct 2026) */
.about-page .ab-hero .bw-title { color: var(--text-pencil, #1A1A18) !important; text-wrap: balance; }
.about-page .ab-hero .bw-title em { font-style: normal; color: var(--color-highlight-dark, #1B4A4F); }

.ab-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--t-body, var(--font-ui));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-highlight-dark, #1B4A4F);
}

.ab-head {
    max-width: 1200px;
    margin: 0 auto 28px;
    padding: 0 8px;
}
.ab-h2 {
    margin: 0;
    font-family: var(--t-head, var(--font-sketch));
    font-size: var(--t-h2, 52px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-pencil, #1A1A18);
}
.ab-sub {
    max-width: 680px;
    margin: 12px 0 0;
    font-family: var(--t-body, var(--font-ui));
    font-size: 1.05rem;
    line-height: 1.65;
    color: #55554F;
}

/* film card + quick facts */
.about-page .af-section { padding: 24px 24px 8px; margin-bottom: 0; }
.ab-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 22px 0 16px;
    font-family: var(--t-body, var(--font-ui));
}
.ab-facts > div { padding: 0 24px; border-left: 1px solid var(--line, #E5E1D8); }
.ab-facts > div:first-child { border-left: 0; }
.ab-facts strong {
    display: block;
    font-family: var(--t-head, var(--font-sketch));
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-accent-ink, #14545E);
    white-space: nowrap;
}
.ab-facts span { display: block; margin-top: 4px; font-size: 0.9rem; color: #6B6B66; }

/* experience: head now sits above the panel */
.about-page .tl-section { padding: 72px 24px 0; }
.about-page .tl-panel { padding-top: 40px; }

/* gallery: same head, contained to the page width; marquee stays full bleed */
.about-page #gallery-love.gallery-love-section { padding: 72px 0 0; }
.about-page .wop-section { padding: 56px 0 72px; }

@media (max-width: 1248px) {
    .ab-head { padding: 0 32px; }
    .about-page .tl-section .ab-head { padding: 0 8px; }
}
@media (max-width: 860px) {
    .ab-facts { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
    .ab-facts > div:nth-child(3) { border-left: 0; }
}
@media (max-width: 760px) {
    .about-page .ab-hero { margin: 32px auto 24px; padding: 0 20px; }
    .about-page .af-section { padding: 12px 12px 4px; }
    .ab-head { padding: 0 20px; margin-bottom: 20px; }
    .about-page .tl-section { padding: 48px 12px 0; }
    .about-page .tl-section .ab-head { padding: 0 8px; }
    .about-page #gallery-love.gallery-love-section { padding-top: 48px; }
    .ab-facts > div { padding: 0 14px; }
    .ab-facts strong { font-size: 1.4rem; white-space: normal; }
    .ab-facts span { font-size: 0.82rem; }
}

/* About page section heads centred too, like the page heading (asked 2026-10-04) */
.about-page .ab-head { text-align: center; }
.about-page .ab-head .ab-sub { margin-left: auto; margin-right: auto; }

/* About Gallery of Love (asked 2026-10-04): moves like the home screens strip (marquee.js:
   one photo centred, glides to the next every 3s, drag or swipe), and no fade at the edges */
#gallery-love .love-viewport { overflow: hidden; -webkit-mask-image: none; mask-image: none; }
#gallery-love .love-step-track { gap: 32px; padding: 8px 0 12px; }
#gallery-love .love-step-track .love-item { flex: none; }
#gallery-love .love-step-track img { -webkit-user-drag: none; user-select: none; }
@media (max-width: 760px) {
    #gallery-love .love-step-track { gap: 18px; }
    #gallery-love .love-step-track .love-item { width: 260px; height: 260px; }
}

/* Selected work on phones and touch screens (4 Oct 2026): heading and a short subheading,
   no "See all my work" button, each case study as its own card ending in a Read case study button.
   With a mouse the cards stay as they were and the hover cursor says "Read case study". */
/* #work prefix: type.css forces every .rw-btn to inline-flex !important and loads later */
#work .sw-sub,
#work .sw-card .sw-cta {
    display: none !important;
}

@media (hover: none), (max-width: 760px) {
    #work .sw-card .sw-cta {
        display: inline-flex !important;
        align-self: stretch;
        justify-content: center;
        margin-top: 18px;
    }
}

@media (max-width: 760px) {
    /* no outer panel on phones: the section sits on the page and the cards get the full width */
    #work.bw-panel {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        margin-bottom: 24px; /* same 24px as the gap between the cards, so the the tool card below sits evenly */
    }

    /* every home section after Selected work sits 32px from the next one on phones */
    body[data-page="home"] main > .bw-panel,
    body[data-page="home"] #testimonials.wm-section,
    body[data-page="home"] #contact.lt-section {
        margin-bottom: 32px;
    }

    /* Building with AI has no panel on phones, so its title needs a little more room from the the tool card */
    body[data-page="home"] #other.bw-panel,
    body[data-page="home"] #building.bw-panel,
    body[data-page="home"] #talks.bw-panel {
        margin-bottom: 48px;
    }

    /* Hackathons on phones: no outer panel, title and lede centred on the page,
       wider white cards with their own stroke */
    #hackathons.bw-panel {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    #hackathons .ot-label,
    #hackathons .ot-lede {
        padding: 0 4px;
        text-align: center;
    }

    #hackathons .ot-lede {
        margin-bottom: 0;
    }

    /* "building with my team." gets its own line on phones */
    #hackathons .hk-lede-2 {
        display: block;
    }

    #hackathons .hk-cards {
        gap: 24px;
        margin-top: 24px;
    }

    /* !important: the one stroke rule in styles.css clears card strokes inside a panel */
    #hackathons .hk-card {
        background: #FFFFFF;
        border: 0.5px solid var(--line, #E5E1D8) !important;
        border-radius: 18px;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06);
    }

    #hackathons .hk-card img {
        border-color: var(--line, #E5E1D8) !important;
    }

    #work .bw-head-row {
        display: block;
        padding: 0 4px;
        text-align: center;
    }

    #work .bw-head-row > .rw-btn {
        display: none !important;
    }

    #work .sw-sub {
        display: block !important;
        margin: 8px 0 0;
    }

    .sw-cards {
        gap: 24px;
    }

    .sw-card {
        padding: 12px 12px 16px;
        background: #FFFFFF;
        border: 0.5px solid var(--line, #E5E1D8);
        border-radius: 18px;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06);
    }

    .sw-card .sw-media {
        box-shadow: none;
        border-radius: 12px;
    }

    .sw-card .sw-meta,
    .sw-card .sw-headline,
    .sw-card .sw-line {
        padding: 0 4px;
    }

    /* the desktop line break leaves one word alone on a phone */
    .sw-card .sw-br {
        display: none;
    }
}

/* Paper grain on the cream background now lives in layout.css for every page (4 Oct 2026). */

/* About on phones (asked 5 Oct 2026): 48px from the last timeline card to the Gallery of Love
   heading, the same as above the timeline heading; section ledes a step smaller and balanced
   so no word sits alone; 24px from the lede to the photos */
@media (max-width: 760px) {
    .about-page #experience.tl-section {
        padding-bottom: 44px; /* + 4px the timeline already leaves = 48px */
    }

    .about-page .ab-head .ab-sub {
        font-size: 15px;
        line-height: 1.55;
        text-wrap: balance;
    }

    .about-page #gallery-love .ab-head {
        margin-bottom: 24px;
    }
}

/* photo credit in the About footer, under the copyright line */
.footer-bottom .footer-credit {
    margin-top: 4px;
    font-size: 12px !important;
}

.footer-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* About quick facts: 3 facts now (hackathon results removed 2026-10-05) */
/* Four milestones since Changes 1 (Oct 2026): 4 in a row, 2 by 2 below 860px */
.ab-facts { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
    .ab-facts { grid-template-columns: repeat(2, 1fr); }
    .ab-facts > div:nth-child(3) { border-left: 0; }
}

/* ----- How I use AI (Changes 1, Oct 2026): replaces the books shelf on the home page.
   Layout follows Pavan's reference: title and View more on the left, two notes and two cards on the right. */
.ai-grid {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 48px;
}

.ai-head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.ai-title {
    margin: 0;
    font-family: var(--font-sketch);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-pencil);
}

.ai-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--text-pencil);
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-pencil);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ai-more:hover {
    background: var(--text-pencil);
    color: #FCFBF4;
}

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

.ai-line strong {
    font-weight: 600;
    color: var(--text-pencil);
}

.ai-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.ai-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.ai-tag {
    margin: 0 0 12px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-highlight);
}

.ai-tag span {
    margin: 0 4px;
    color: #A9A398;
}

.ai-media {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 12px;
    background: #1E4F55;
    transition: transform 0.3s var(--ease-polish, ease), box-shadow 0.3s var(--ease-polish, ease);
}

a.ai-card:hover .ai-media {
    transform: translateY(-3px);
    box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.08);
}

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

.ai-cap {
    margin: 14px 0 0;
    font-family: var(--font-sketch);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-pencil);
}

.ai-more:focus-visible,
a.ai-card:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 3px;
    border-radius: 8px;
}

@media (max-width: 860px) {
    .ai-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ai-head {
        display: contents;
    }

    .ai-title { order: 1; }
    .ai-body { order: 2; }
    .ai-more { order: 3; align-self: stretch; justify-content: center; }

    .ai-cards {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-media { transition: none; }
}

/* ----- Selected work, card version (Changes 1, Oct 2026). Pavan's reference: each case study is a
   white card with a fresh thumbnail, a small eyebrow, title, one line and an always-visible
   "Read case study" link, then a "View more" button under the cards. ----- */
.sw-v2 .sw-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0 0;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-highlight);
}

.sw-v2 .sw-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line, #E5E1D8);
}

.sw-v2 .sw-cards {
    gap: 28px;
}

.sw-v2 .sw-card {
    padding: 12px 12px 24px;
    background: #FFFFFF;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 20px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.06);
    transition: transform 0.3s var(--ease-polish, ease), box-shadow 0.3s var(--ease-polish, ease);
}

.sw-v2 .sw-card:hover {
    transform: translateY(-3px);
    box-shadow: 7px 9px 0 rgba(0, 0, 0, 0.08);
}

.sw-v2 .sw-card .sw-media,
.sw-v2 .sw-card:hover .sw-media {
    border-radius: 12px;
    box-shadow: none;
    transform: none;
}

.sw-v2 .sw-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 12px;
}

.sw-v2 .sw-kicker {
    margin: 22px 0 0;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-highlight);
}

.sw-v2 .sw-kicker span {
    margin: 0 2px;
    color: #A9A398;
}

.sw-v2 .sw-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 18px;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-highlight-dark);
    text-decoration: none;
}

.sw-v2 .sw-read svg {
    transition: transform 0.2s ease;
}

.sw-v2 .sw-card:hover .sw-read svg {
    transform: translateX(3px);
}

.sw-v2 .sw-read:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 3px;
    border-radius: 4px;
}

.sw-v2 .sw-more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.sw-v2 .sw-more .rw-btn {
    margin-top: 0;
}

@media (max-width: 760px) {
    .sw-v2 .sw-eyebrow { margin-top: 20px; }
    .sw-v2 .sw-body { padding: 0 4px; }
    .sw-v2 .sw-more .rw-btn { align-self: stretch; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .sw-v2 .sw-card,
    .sw-v2 .sw-read svg { transition: none; }
}

/* Selected work without the outer box (20 Oct 2026): the case studies are already white
   cards, so the panel around them goes. The cards span the same width as the boxed
   sections above and below, so their edges line up. */
.bw-panel.sw-v2 {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 40px;
    padding-bottom: 32px;
}

.sw-v2 .bw-head {
    margin-bottom: 24px;
}

/* "What my camera taught me about design" without the outer box (20 Oct 2026): the photo
   cards are already framed, so the panel around them goes, like Selected work. The cards
   span the same width as the boxed sections around them. */
.bw-panel.lens-section {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 40px;
    padding-bottom: 32px;
}