/* =========================================================
   TTC PROJECT SHOWCASE
   CLEAN RESPONSIVE VERSION
   Desktop:
   - Sticky category sidebar
   - 2-column project cards

   Tablet / Mobile:
   - Hide top category sidebar
   - Each category heading appears before its own project group
   - Mobile Showcase = 2 cards / row
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.ttcp-showcase,
.ttcp-archive,
.ttcp-single {
    --ttcp-primary: var(--primary-color, #f2bb46);
    --ttcp-ink: #102449;
    --ttcp-muted: #495a71;
    --ttcp-border: #e4eaf1;
    --ttcp-soft: #eaf1f6;

    color: var(--ttcp-ink);
    font-family: inherit;
}

.ttcp-showcase *,
.ttcp-archive *,
.ttcp-single * {
    box-sizing: border-box;
}

.ttcp-showcase a,
.ttcp-archive a,
.ttcp-single a {
    text-decoration: none;
}


/* =========================================================
   SHOWCASE - DESKTOP
   ========================================================= */

.ttcp-showcase {
    --ttcp-sticky-top: 90px;

    position: relative;
    width: 100%;
}


/* FULL WIDTH */

.ttcp-showcase--full {
    width: 100vw;
    max-width: none !important;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow-x: clip;
}


/* HEADING */

.ttcp-showcase__heading {
    max-width: 1280px;
    width: calc(100% - 48px);

    margin: 0 auto 28px;

    text-align: center;

    font-size: clamp(25px, 3vw, 36px);
    font-weight: 800;

    color: var(--ttcp-ink);
}


/* MAIN LAYOUT */

.ttcp-showcase__layout {
    --ttcp-left-col: 34%;

    position: relative;
    isolation: isolate;

    display: grid;

    grid-template-columns:
        minmax(0, var(--ttcp-left-col))
        minmax(0, 1fr);

    align-items: stretch;

    gap: 0;

    max-width: 1280px;
    width: calc(100% - 48px);

    margin: 0 auto;

    background:
        linear-gradient(
            to right,
            var(--ttcp-primary) 0 var(--ttcp-left-col),
            var(--ttcp-soft) var(--ttcp-left-col) 100%
        );
}


/* FULL BLEED COLOR PLANES */

.ttcp-showcase--full
.ttcp-showcase__layout::before,

.ttcp-showcase--full
.ttcp-showcase__layout::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    z-index: -1;

    pointer-events: none;
}

.ttcp-showcase--full
.ttcp-showcase__layout::before {
    right: calc(100% - var(--ttcp-left-col));

    width: 100vw;

    background: var(--ttcp-primary);
}

.ttcp-showcase--full
.ttcp-showcase__layout::after {
    left: var(--ttcp-left-col);

    width: 100vw;

    background: var(--ttcp-soft);
}


/* =========================================================
   DESKTOP STICKY NAVIGATION
   ========================================================= */

.ttcp-showcase__nav {
    position: sticky;

    top: var(--ttcp-sticky-top);

    z-index: 2;

    align-self: start;

    height: calc(
        100vh - var(--ttcp-sticky-top) - 16px
    );

    height: calc(
        100svh - var(--ttcp-sticky-top) - 16px
    );

    min-height: 340px;
    min-width: 0;

    background: var(--ttcp-primary);
}

.admin-bar .ttcp-showcase {
    --ttcp-sticky-top: 122px;
}


/* TABS */

.ttcp-showcase__tabs {
    height: 100%;

    display: flex;
    flex-direction: column;
}


/* NAV ITEM */

.ttcp-nav-item {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;

    flex: 1 1 0;

    min-height: 0;

    padding-inline: clamp(
        16px,
        2vw,
        35px
    );

    background: var(--ttcp-primary);

    background:
        color-mix(
            in srgb,
            var(--ttcp-primary) 90%,
            white 10%
        );

    border-bottom:
        1px solid rgba(255,255,255,.33);

    transition:
        background-color .2s ease;
}

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

.ttcp-nav-item.is-active {
    background: var(--ttcp-primary);

    box-shadow:
        inset 4px 0 0 rgba(255,255,255,.8);
}


/* TAB BUTTON */

.ttcp-tab {
    appearance: none;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    border-radius: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    width: 100%;

    text-align: left;

    padding: 12px 0 4px;
    margin: 0;

    color: #fff !important;

    font-family: inherit;

    font-weight: 750;

    font-size: clamp(
        15px,
        1.5vw,
        22px
    );

    line-height: 1.3;

    cursor: pointer;

    min-height: 38px;

    letter-spacing: 0;

    text-transform: none;
}

.ttcp-tab:hover,
.ttcp-tab:focus-visible {
    color: #fff !important;

    box-shadow: none !important;

    outline-offset: 3px;
}


/* ARROW */

.ttcp-tab__arrow {
    display: grid;

    place-items: center;

    flex: none;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #fff;

    color: var(--ttcp-ink);

    font: 700 20px/1 sans-serif;

    opacity: 0;

    transition:
        opacity .2s;
}

.ttcp-nav-item.is-active
.ttcp-tab__arrow,

.ttcp-nav-item:hover
.ttcp-tab__arrow {
    opacity: 1;
}


/* ARCHIVE LINK */

.ttcp-nav-item__archive {
    display: inline-block;

    align-self: flex-start;

    color: #fff !important;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;

    border-bottom:
        1px solid rgba(255,255,255,.75);

    padding: 3px 0;

    margin: 2px 0 9px;

    opacity: .9;
}

.ttcp-nav-item__archive:hover {
    color: #fff !important;

    opacity: 1;
}


/* =========================================================
   PROJECT PANELS
   ========================================================= */

.ttcp-showcase__panels {
    position: relative;

    z-index: 1;

    min-width: 0;

    padding:
        32px
        0
        40px
        clamp(18px, 2.5vw, 38px);
}


/* PANEL */

.ttcp-panel {
    scroll-margin-top:
        calc(
            var(--ttcp-sticky-top) + 12px
        );

    min-width: 0;

    padding: 0 0 46px;

    margin: 0 0 39px;

    border-bottom:
        1px solid #d6e0e8;
}

.ttcp-panel:last-child {
    border-bottom: 0;

    margin-bottom: 0;

    padding-bottom: 6px;
}


/* PANEL HEADER */

.ttcp-panel__header {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 3px 0 20px;
}


/* CATEGORY TITLE */

.ttcp-panel__group-heading {
    font-size:
        clamp(17px, 1.6vw, 23px);

    line-height: 1.3;

    font-weight: 800;

    margin: 3px 0 20px;

    color: var(--ttcp-ink);
}

.ttcp-panel__header
.ttcp-panel__group-heading {
    margin: 0;
}


/* MOBILE ELEMENTS HIDDEN ON DESKTOP */

.ttcp-panel__index,
.ttcp-panel__mobile-archive {
    display: none;
}


/* =========================================================
   PROJECT GRID
   ========================================================= */

.ttcp-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}


/* CARD */

.ttcp-card {
    min-width: 0;

    overflow: hidden;

    border-radius: 13px;

    border:
        1px solid var(--ttcp-border);

    background: #fff;

    padding: 12px;

    box-shadow:
        0 4px 20px rgba(16,36,73,.035);

    transition:
        transform .22s ease,
        box-shadow .22s ease;

    display: flex;

    flex-direction: column;
}

.ttcp-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px rgba(16,36,73,.095);
}


/* IMAGE */

.ttcp-card__image-link {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 9px;

    background: #f1f6fa;
}

.ttcp-card__image,
.ttcp-card__placeholder {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    display: block;
}

.ttcp-card__placeholder {
    background:
        linear-gradient(
            130deg,
            #e5edf5,
            #fef3e0 60%,
            #e5edf5
        );
}


/* NUMBER */

.ttcp-card__number {
    position: absolute;

    left: 9px;
    top: 9px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 27px;
    height: 27px;

    padding: 0 5px;

    border-radius: 6px;

    background:
        var(--ttcp-primary);

    color:
        var(--ttcp-ink);

    font-size: 12px;
    font-weight: 800;

    line-height: 1;
}


/* CARD CONTENT */

.ttcp-card__content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding:
        10px
        2px
        4px;
}

.ttcp-card__title {
    color:
        var(--ttcp-ink);

    font-size:
        clamp(15px, 1.25vw, 18px);

    line-height: 1.35;

    font-weight: 750;

    margin:
        0
        0
        8px;
}

.ttcp-card__title a {
    color: inherit;
}

.ttcp-card__title a:hover {
    color:
        var(--ttcp-primary);
}


/* EXCERPT */

.ttcp-card__excerpt {
    color:
        var(--ttcp-muted);

    font-size: 13px;

    line-height: 1.55;

    margin:
        0
        0
        11px;

    min-height: 2.9em;

    display: -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* MORE LINK */

.ttcp-card__more {
    color: #b77907;

    font-size: 13px;

    font-weight: 750;

    display: inline-flex;

    gap: 6px;

    align-items: center;

    margin-top: auto;
}

.ttcp-card__more:hover,
.ttcp-panel__all:hover {
    color:
        var(--ttcp-ink);
}


/* =========================================================
   PANEL FOOTER
   ========================================================= */

.ttcp-panel__footer {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    flex-wrap: wrap;

    gap:
        12px
        20px;

    padding-top: 23px;
}

.ttcp-panel__count {
    margin: 0;

    color:
        var(--ttcp-muted);

    font-size: 13px;
}


/* VIEW ALL */

.ttcp-panel__all {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 0;

    padding:
        13px
        23px;

    background:
        var(--ttcp-primary);

    border-radius: 100px;

    color:
        var(--ttcp-ink);

    font-size: 14px;

    font-weight: 800;

    line-height: 1.4;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.ttcp-panel__all:hover {
    color:
        var(--ttcp-ink);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(16,36,73,.11);
}


/* =========================================================
   CATEGORY BANNER
   ========================================================= */

.ttcp-panel__banner {
    position: relative;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    border-radius: 12px;

    background:
        var(--ttcp-primary);

    min-height: 155px;

    margin-bottom: 18px;
}

.ttcp-panel__banner-img {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
}

.ttcp-panel__banner::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(16,36,73,.65),
            transparent 80%
        );
}

.ttcp-panel__banner-content {
    position: relative;

    z-index: 1;

    padding: 22px;

    color: #fff;

    display: grid;

    gap: 6px;
}

.ttcp-panel__banner-content strong {
    font-size: 23px;

    line-height: 1.2;

    color: #fff;
}

.ttcp-panel__banner-content small {
    font-size: 13px;

    color: #fff;
}


/* EMPTY */

.ttcp-empty {
    border:
        1px dashed var(--ttcp-border);

    padding: 28px;

    border-radius: 12px;

    text-align: center;

    color:
        var(--ttcp-muted);
}


/* =========================================================
   GENERIC CONTAINER
   ========================================================= */

.ttcp-container {
    width:
        calc(100% - 48px);

    max-width: 1220px;

    margin-inline: auto;
}


/* =========================================================
   ARCHIVE
   ========================================================= */

.ttcp-archive-hero {
    background:
        linear-gradient(
            115deg,
            var(--ttcp-primary),
            #fff1c9
        );

    position: relative;

    min-height: 270px;

    display: flex;

    align-items: center;

    overflow: hidden;
}

.ttcp-archive-hero.has-image {
    background: #b3bfd0;
}

.ttcp-archive-hero__image {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
}

.ttcp-archive-hero.has-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(9,30,63,.78),
            rgba(9,30,63,.25)
        );
}

.ttcp-archive-hero__content {
    position: relative;

    z-index: 1;

    padding-block: 65px;

    color:
        var(--ttcp-ink);
}

.ttcp-archive-hero.has-image
.ttcp-archive-hero__content {
    color: #fff;
}

.ttcp-archive-hero__content h1 {
    color: inherit;

    font-weight: 800;

    font-size:
        clamp(32px, 5vw, 54px);

    line-height: 1.15;

    margin:
        17px
        0
        12px;
}

.ttcp-archive-hero__content p {
    color: inherit;

    max-width: 640px;

    font-size: 16px;

    line-height: 1.7;

    margin: 0;
}


/* BREADCRUMB */

.ttcp-crumb {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    align-items: center;

    font-size: 13px;

    line-height: 1.5;
}

.ttcp-crumb a {
    color: inherit !important;

    text-decoration: underline;

    text-underline-offset: 3px;
}


/* ARCHIVE BODY */

.ttcp-archive-body {
    padding-block:
        44px
        74px;
}


/* CATEGORY FILTER */

.ttcp-archive-groups {
    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-bottom: 32px;
}

.ttcp-archive-groups a {
    border:
        1px solid var(--ttcp-border);

    border-radius: 100px;

    padding:
        10px
        20px;

    font-size: 14px;

    color:
        var(--ttcp-ink);

    font-weight: 750;
}

.ttcp-archive-groups a.is-active,
.ttcp-archive-groups a:hover {
    background:
        var(--ttcp-primary);

    border-color:
        var(--ttcp-primary);

    color:
        var(--ttcp-ink);
}


/* ARCHIVE HEADING */

.ttcp-archive-body__heading {
    color:
        var(--ttcp-ink);

    font-size:
        clamp(22px, 3vw, 30px);

    font-weight: 750;

    margin-bottom: 25px;
}


/* ARCHIVE GRID */

.ttcp-card-grid--archive {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;
}


/* PAGINATION */

.ttcp-pagination {
    margin-top: 40px;
}

.ttcp-pagination ul {
    display: flex;

    justify-content: center;

    gap: 9px;

    list-style: none;

    margin: 0;

    padding: 0;
}

.ttcp-pagination a,
.ttcp-pagination span {
    display: grid;

    place-items: center;

    min-width: 38px;
    height: 38px;

    border:
        1px solid var(--ttcp-border);

    border-radius: 8px;

    padding:
        0
        9px;

    color:
        var(--ttcp-ink);
}

.ttcp-pagination .current {
    background:
        var(--ttcp-primary);

    border-color:
        var(--ttcp-primary);
}


/* =========================================================
   SINGLE PROJECT
   ========================================================= */

.ttcp-single-breadcrumb {
    padding-block:
        26px
        20px;
}


/* COVER FIRST */

.ttcp-single-cover {
    margin:
        0
        auto
        28px;
}

.ttcp-single-cover img {
    display: block;

    width: 100%;

    height: auto;

    max-height: 630px;

    object-fit: cover;

    border-radius: 15px;
}


/* SINGLE HEADER */

.ttcp-single-header {
    padding-block:
        0
        30px;
}

.ttcp-single-header h1 {
    color:
        var(--ttcp-ink);

    font-size:
        clamp(32px, 4.2vw, 52px);

    line-height: 1.16;

    font-weight: 850;

    max-width: 1020px;

    margin:
        0
        0
        12px;
}

.ttcp-single-lead {
    color:
        var(--ttcp-muted);

    font-size:
        clamp(16px, 2vw, 20px);

    line-height: 1.7;

    max-width: 850px;

    margin: 0;
}


/* CONTENT */

.ttcp-prose {
    max-width: 850px;

    margin:
        0
        auto
        60px;

    width:
        calc(100% - 48px);

    color:
        var(--ttcp-ink);

    font-size: 17px;

    line-height: 1.85;
}

.ttcp-prose h2,
.ttcp-prose h3,
.ttcp-prose h4 {
    color:
        var(--ttcp-ink);

    font-weight: 800;

    margin-top: 1.5em;
}

.ttcp-prose img {
    border-radius: 10px;

    height: auto;

    max-width: 100%;
}

.ttcp-prose figure {
    max-width: 100%;
}

.ttcp-prose a {
    color: #aa740f;

    text-decoration: underline;
}


/* RELATED */

.ttcp-single-after {
    padding-bottom: 75px;
}

.ttcp-related {
    padding-block:
        33px
        43px;

    border-top:
        1px solid var(--ttcp-border);
}

.ttcp-related h2 {
    color:
        var(--ttcp-ink);

    margin:
        0
        0
        23px;

    font-weight: 800;
}

.ttcp-card-grid--related {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


/* =========================================================
   TABLET
   CATEGORY HEADING BELONGS TO EACH GROUP
   ========================================================= */

@media (max-width: 849px) {

    /* =============================
       SHOWCASE FULL WIDTH
       ============================= */

    .ttcp-showcase--full {
        width: 100%;

        margin-inline: 0;

        overflow-x: clip;
    }


    .ttcp-showcase__layout {
        display: block;

        width: 100%;

        max-width: none;

        margin: 0;

        background:
            var(--ttcp-soft);
    }


    .ttcp-showcase--full
    .ttcp-showcase__layout::before,

    .ttcp-showcase--full
    .ttcp-showcase__layout::after {
        display: none;
    }


    /* =============================
       HIDE DESKTOP CATEGORY NAV
       ============================= */

    .ttcp-showcase__nav {
        display: none !important;
    }


    /* =============================
       HEADING
       ============================= */

    .ttcp-showcase__heading {
        width:
            calc(100% - 36px);

        font-size:
            clamp(23px, 4vw, 30px);

        margin:
            0
            auto
            23px;
    }


    /* =============================
       PANELS
       ============================= */

    .ttcp-showcase__panels {
        max-width: 760px;

        width: 100%;

        margin:
            0
            auto;

        padding:
            24px
            18px
            34px;
    }


    .ttcp-panel {
        scroll-margin-top:
            82px;

        padding-bottom:
            30px;

        margin-bottom:
            25px;
    }


    /* =============================
       CATEGORY HEADER
       ============================= */

    .ttcp-panel__header {
        min-height:
            76px;

        padding:
            16px
            18px;

        border-radius:
            12px;

        background:
            var(--ttcp-primary);

        margin:
            0
            0
            18px;

        flex-wrap:
            wrap;

        gap:
            10px;
    }


    .ttcp-panel__index {
        display:
            inline-flex;

        flex: none;

        align-items: center;

        justify-content:
            center;

        min-width:
            34px;

        min-height:
            34px;

        padding:
            5px
            7px;

        border-radius:
            8px;

        background:
            #fff;

        color:
            var(--ttcp-ink);

        font-size:
            13px;

        font-weight:
            800;
    }


    .ttcp-panel__header
    .ttcp-panel__group-heading {
        flex: 1;

        min-width: 0;

        color:
            #fff !important;

        font-size:
            clamp(17px, 2.8vw, 22px);

        line-height:
            1.3;

        margin:
            0;
    }


    .ttcp-panel__mobile-archive {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            5px;

        margin-left:
            auto;

        color:
            #fff !important;

        font-size:
            12px;

        font-weight:
            750;

        text-decoration:
            underline;

        text-underline-offset:
            3px;
    }


    .ttcp-panel__mobile-archive:hover,
    .ttcp-panel__mobile-archive:focus-visible {
        color:
            #fff !important;
    }


    /* =============================
       SHOWCASE GRID = 2 COL
       ============================= */

    .ttcp-showcase
    .ttcp-panel
    .ttcp-card-grid {
        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            14px !important;
    }


    /* =============================
       CATEGORY BANNER
       ============================= */

    .ttcp-panel__banner {
        min-height:
            135px;
    }


    /* =============================
       ARCHIVE
       ============================= */

    .ttcp-archive-hero {
        min-height:
            240px;
    }


    .ttcp-archive-hero__content {
        padding-block:
            44px;
    }


    .ttcp-container {
        width:
            calc(100% - 36px);
    }


    .ttcp-archive-body {
        padding-block:
            34px
            54px;
    }


    .ttcp-archive-groups {
        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            7px;

        -webkit-overflow-scrolling:
            touch;
    }


    .ttcp-archive-groups a {
        white-space:
            nowrap;

        flex:
            none;
    }


    .ttcp-card-grid--archive,
    .ttcp-card-grid--related {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            15px;
    }


    /* =============================
       SINGLE
       ============================= */

    .ttcp-single-breadcrumb {
        padding-block:
            20px
            16px;
    }


    .ttcp-single-cover {
        margin-bottom:
            23px;
    }


    .ttcp-single-header {
        padding-block:
            0
            25px;
    }


    .ttcp-single-header h1 {
        font-size:
            clamp(
                29px,
                4.5vw,
                42px
            );
    }


    .ttcp-prose {
        width:
            calc(100% - 36px);

        font-size:
            16px;

        overflow-wrap:
            break-word;
    }


    .ttcp-single-after {
        padding-bottom:
            45px;
    }
}


/* =========================================================
   MOBILE
   SHOWCASE LIKE OUR NETWORK
   ========================================================= */

@media (max-width: 599px) {

    /* =============================
       PAGE HEADING
       ============================= */

    .ttcp-showcase__heading {
        margin-bottom:
            18px;

        font-size:
            24px;
    }


    /* =============================
       PANELS AREA
       ============================= */

    .ttcp-showcase__panels {
        padding:
            18px
            10px
            32px;
    }


    .ttcp-panel {
        margin-bottom:
            24px;

        padding-bottom:
            26px;
    }


    /* =============================
       CATEGORY HEADER
       FULL WIDTH LIKE OUR NETWORK
       ============================= */

    .ttcp-panel__header {
        width:
            calc(100% + 20px);

        margin-left:
            -10px;

        margin-right:
            -10px;

        margin-bottom:
            12px;

        padding:
            14px
            14px;

        min-height:
            62px;

        border-radius:
            0;

        background:
            var(--ttcp-primary);
    }


    /* Hide 01/02 circle on mobile */
    .ttcp-panel__index {
        display:
            none !important;
    }


    .ttcp-panel__header
    .ttcp-panel__group-heading {
        flex:
            1;

        margin:
            0 !important;

        color:
            #fff !important;

        font-size:
            16px;

        font-weight:
            750;

        line-height:
            1.3;
    }


    .ttcp-panel__mobile-archive {
        display:
            inline-flex;

        margin-left:
            auto;

        color:
            #fff !important;

        font-size:
            9px;

        font-weight:
            700;

        white-space:
            nowrap;
    }


    /* =====================================================
       MOST IMPORTANT
       SHOWCASE MOBILE = 2 COLUMNS
       ===================================================== */

    .ttcp-showcase
    .ttcp-panel
    .ttcp-card-grid {
        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            8px !important;

        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;
    }


    /* =============================
       CARD COMPACT
       ============================= */

    .ttcp-showcase
    .ttcp-card {
        width:
            100%;

        min-width:
            0;

        padding:
            6px;

        border-radius:
            9px;
    }


    /* IMAGE */

    .ttcp-showcase
    .ttcp-card__image-link {
        width:
            100%;

        aspect-ratio:
            1 / 1;

        border-radius:
            7px;
    }


    .ttcp-showcase
    .ttcp-card__image,

    .ttcp-showcase
    .ttcp-card__placeholder {
        width:
            100% !important;

        height:
            100% !important;

        object-fit:
            cover;
    }


    /* NUMBER */

    .ttcp-showcase
    .ttcp-card__number {
        left:
            6px;

        top:
            6px;

        min-width:
            21px;

        height:
            21px;

        padding:
            0
            4px;

        border-radius:
            5px;

        font-size:
            8px;
    }


    /* CONTENT */

    .ttcp-showcase
    .ttcp-card__content {
        padding:
            7px
            2px
            3px;
    }


    .ttcp-showcase
    .ttcp-card__title {
        margin:
            0
            0
            5px;

        font-size:
            10px;

        line-height:
            1.3;

        display:
            -webkit-box;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            2;

        overflow:
            hidden;
    }


    .ttcp-showcase
    .ttcp-card__excerpt {
        min-height:
            0;

        margin:
            0
            0
            5px;

        font-size:
            8px;

        line-height:
            1.35;

        -webkit-line-clamp:
            2;
    }


    .ttcp-showcase
    .ttcp-card__more {
        font-size:
            8px;
    }


    /* =============================
       PANEL FOOTER
       ============================= */

    .ttcp-panel__footer {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            9px;

        padding-top:
            13px;
    }


    .ttcp-panel__count {
        font-size:
            9px;
    }


    .ttcp-panel__all {
        width:
            100%;

        padding:
            9px
            12px;

        text-align:
            center;

        font-size:
            10px;
    }


    /* =============================
       CATEGORY BANNER
       ============================= */

    .ttcp-panel__banner {
        min-height:
            105px;

        margin-bottom:
            10px;

        border-radius:
            8px;
    }


    /* =====================================================
       ARCHIVE AND RELATED
       KEEP SINGLE COLUMN ON SMALL PHONE
       ===================================================== */

    .ttcp-card-grid--archive,
    .ttcp-card-grid--related {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            15px;
    }


    /* =============================
       ARCHIVE
       ============================= */

    .ttcp-container,
    .ttcp-prose {
        width:
            calc(100% - 28px);
    }


    .ttcp-archive-hero {
        min-height:
            205px;
    }


    .ttcp-archive-hero__content {
        padding-block:
            34px;
    }


    .ttcp-archive-hero__content h1 {
        font-size:
            29px;

        margin:
            10px
            0;
    }


    .ttcp-archive-hero__content p {
        font-size:
            14px;

        line-height:
            1.55;
    }


    .ttcp-archive-body {
        padding-block:
            26px
            42px;
    }


    .ttcp-archive-body__heading {
        font-size:
            21px;

        margin-bottom:
            19px;
    }


    /* =============================
       SINGLE
       ============================= */

    .ttcp-single-breadcrumb {
        padding-block:
            16px
            13px;
    }


    .ttcp-single-cover {
        margin-bottom:
            19px;
    }


    .ttcp-single-cover img {
        border-radius:
            10px;
    }


    .ttcp-single-header {
        padding-block:
            0
            20px;
    }


    .ttcp-single-header h1 {
        font-size:
            clamp(
                27px,
                7vw,
                34px
            );

        line-height:
            1.22;
    }


    .ttcp-single-lead {
        font-size:
            15px;

        line-height:
            1.6;
    }


    .ttcp-prose {
        font-size:
            15.5px;

        line-height:
            1.75;

        margin-bottom:
            38px;
    }


    .ttcp-related {
        padding-block:
            24px
            29px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ttcp-showcase * {
        transition:
            none !important;
    }
}