/* =========================================================
   RADWAN PORTFOLIO V2
   Japanese Work Page — Typography & Layout Adjustments
========================================================= */


/* =========================================================
   Scope
========================================================= */

html[lang="ja"] .jp-work-v2 {
    --work-section-space:
        clamp(7rem, 10vw, 10rem);
}


/* =========================================================
   Japanese Heading Typography
========================================================= */

html[lang="ja"] .jp-work-v2 .work-v2-hero h1,
html[lang="ja"] .jp-work-v2 .work-v2-section-heading h2,
html[lang="ja"] .jp-work-v2 .work-v2-project-content h3,
html[lang="ja"] .jp-work-v2 .work-v2-capability-grid h3,
html[lang="ja"] .jp-work-v2 .work-v2-contact h2 {
    word-break: auto-phrase;
    line-break: strict;
    overflow-wrap: normal;

    text-wrap: pretty;

    letter-spacing: -0.025em;
}


html[lang="ja"] .jp-work-v2 .work-v2-hero h1 {
    max-width: 900px;

    font-size:
        clamp(2.7rem, 4.35vw, 4.45rem);

    line-height: 1.22;
}


html[lang="ja"] .jp-work-v2 .work-v2-hero-lead {
    max-width: 780px;

    font-size:
        clamp(1rem, 1.3vw, 1.12rem);

    line-height: 2;
}


html[lang="ja"] .jp-work-v2 .work-v2-section-heading h2 {
    font-size:
        clamp(2.15rem, 3.45vw, 3.55rem);

    line-height: 1.34;
}


html[lang="ja"] .jp-work-v2 .work-v2-section-heading>p {
    line-height: 2;
}


html[lang="ja"] .jp-work-v2 .work-v2-project-content h3 {
    max-width: 720px;

    font-size:
        clamp(1.95rem, 3.15vw, 3.15rem);

    line-height: 1.38;
}


html[lang="ja"] .jp-work-v2 .work-v2-project-summary {
    font-size:
        clamp(0.98rem, 1.2vw, 1.08rem);

    line-height: 2;
}


html[lang="ja"] .jp-work-v2 .work-v2-project-evidence p {
    line-height: 1.9;
}


html[lang="ja"] .jp-work-v2 .work-v2-capability-grid h3 {
    font-size:
        clamp(1.35rem, 1.9vw, 1.8rem);

    line-height: 1.55;
}


html[lang="ja"] .jp-work-v2 .work-v2-contact h2 {
    font-size:
        clamp(2.3rem, 3.8vw, 3.8rem);

    line-height: 1.32;
}


html[lang="ja"] .jp-work-v2 .work-v2-contact p {
    line-height: 1.95;
}


/* =========================================================
   Labels
========================================================= */

html[lang="ja"] .jp-work-v2 .work-v2-hero-meta p,
html[lang="ja"] .jp-work-v2 .work-v2-project-index>p,
html[lang="ja"] .jp-work-v2 .work-v2-project-kicker,
html[lang="ja"] .jp-work-v2 .work-v2-project-evidence span,
html[lang="ja"] .jp-work-v2 .work-v2-capability-grid article>p {
    text-transform: none;

    letter-spacing: 0.08em;
}


html[lang="ja"] .jp-work-v2 .work-v2-project-facts dt {
    text-transform: none;

    letter-spacing: 0.07em;
}


/* =========================================================
   Hero / Signal Panel
========================================================= */

html[lang="ja"] .jp-work-v2 .work-v2-hero-grid {
    grid-template-columns:
        minmax(0, 1.36fr) minmax(340px, 0.64fr);

    gap:
        clamp(3.5rem, 6vw, 6rem);
}


html[lang="ja"] .jp-work-v2 .work-v2-signal-list strong {
    font-size: 0.92rem;

    line-height: 1.55;
}


html[lang="ja"] .jp-work-v2 .work-v2-signal-list small {
    line-height: 1.7;
}


/* =========================================================
   Flagship Projects
========================================================= */

html[lang="ja"] .jp-work-v2 .work-v2-project {
    grid-template-columns:
        145px minmax(0, 1.08fr) minmax(400px, 0.92fr);

    gap:
        clamp(2.5rem, 4.5vw, 4.5rem);
}


html[lang="ja"] .jp-work-v2 .work-v2-project-number {
    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;
}


html[lang="ja"] .jp-work-v2 .work-v2-project-facts dd {
    line-height: 1.7;
}


html[lang="ja"] .jp-work-v2 .work-v2-tag-list li {
    line-height: 1.45;
}




/* =========================================================
   Business System Visual — Japanese
   Matches the Japanese homepage component
========================================================= */

html[lang="ja"] .jp-work-v2 .work-v2-system-visual .work-v2-window {
    border-radius: 22px;
}


html[lang="ja"] .jp-work-v2 .work-v2-window-bar {
    height: 54px;

    padding-inline: 18px;
}


html[lang="ja"] .jp-work-v2 .work-v2-window-bar>div {
    gap: 7px;
}


html[lang="ja"] .jp-work-v2 .work-v2-window-bar i {
    width: 8px;
    height: 8px;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-layout {
    min-height: 390px;

    grid-template-columns:
        68px 1fr;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-nav {
    gap: 18px;

    padding-top: 28px;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-nav i {
    width: 22px;
    height: 22px;

    border-radius: 6px;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-main {
    padding:
        32px 28px;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-title {
    display: block;

    margin-bottom: 38px;

    color: var(--color-text);

    font-size: 0.92rem;
    font-weight: 700;

    line-height: 1.5;

    letter-spacing: 0;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-flow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 38px;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-flow span {
    flex: 1;

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

    display: grid;
    place-items: center;

    border:
        1px solid rgba(140, 169, 255, 0.2);

    border-radius: 10px;

    background:
        rgba(140, 169, 255, 0.055);

    color: var(--color-text-soft);

    font-size: 0.69rem;
    font-weight: 650;

    line-height: 1.4;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-flow i {
    width: 18px;
    height: 1px;

    flex: 0 0 auto;

    display: block;

    background: var(--color-accent);
}


html[lang="ja"] .jp-work-v2 .work-v2-system-table {
    display: grid;

    gap: 10px;
}


html[lang="ja"] .jp-work-v2 .work-v2-system-table i {
    height: 34px;

    display: block;

    border-radius: 6px;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.025));
}


/* =========================================================
   Archive
========================================================= */

html[lang="ja"] .jp-work-v2 .project-archive-meta {
    text-transform: none;

    letter-spacing: 0.06em;
}


html[lang="ja"] .jp-work-v2 .project-archive-card h3 {
    line-height: 1.42;
}


html[lang="ja"] .jp-work-v2 .project-archive-card>p {
    line-height: 1.9;
}


html[lang="ja"] .jp-work-v2 .project-filter-button {
    white-space: nowrap;
}


/* =========================================================
   Capability Map
========================================================= */

html[lang="ja"] .jp-work-v2 .work-v2-capability-grid li {
    line-height: 1.75;
}


/* =========================================================
   Large Desktop
========================================================= */

@media (max-width: 1180px) {

    html[lang="ja"] .jp-work-v2 .work-v2-project {
        grid-template-columns:
            110px minmax(0, 1fr);
    }

    html[lang="ja"] .jp-work-v2 .work-v2-project-visual {
        grid-column: 2;

        width: 100%;
        max-width: 760px;

        margin-top: 1.5rem;
    }

}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 980px) {

    html[lang="ja"] .jp-work-v2 .work-v2-hero-grid,
    html[lang="ja"] .jp-work-v2 .work-v2-section-heading,
    html[lang="ja"] .jp-work-v2 .work-v2-contact-grid {
        grid-template-columns: 1fr;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-hero-grid {
        gap: 4rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-hero h1 {
        max-width: 800px;

        font-size:
            clamp(2.45rem, 6vw, 3.65rem);

        line-height: 1.3;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-signal-panel {
        max-width: 680px;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-section-heading {
        align-items: start;

        gap: 1.8rem;
    }


    html[lang="ja"] .jp-work-v2 .project-archive-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    html[lang="ja"] .jp-work-v2 .work-v2-capability-grid {
        grid-template-columns: 1fr;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-capability-grid article,
    html[lang="ja"] .jp-work-v2 .work-v2-capability-grid article:first-child,
    html[lang="ja"] .jp-work-v2 .work-v2-capability-grid article:last-child {
        min-height: auto;

        border-right: 0;
        border-bottom:
            1px solid var(--work-line);

        padding:
            2.8rem 0;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 700px) {

    html[lang="ja"] .jp-work-v2 {
        --work-section-space: 5.2rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-hero {
        padding-block:
            4.6rem 5.4rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-hero h1 {
        font-size:
            clamp(2.05rem, 8.8vw, 2.8rem);

        line-height: 1.4;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-hero-lead {
        font-size: 0.98rem;

        line-height: 1.95;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-hero-actions {
        width: 100%;

        align-items: stretch;

        flex-direction: column;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-hero-actions .button {
        width: 100%;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-hero-actions .work-v2-text-link {
        margin:
            0.7rem 0 0;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-section-nav-inner {
        gap: 1.3rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-section-nav a {
        font-size: 0.65rem;

        text-transform: none;

        white-space: nowrap;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-section-heading h2,
    html[lang="ja"] .jp-work-v2 .work-v2-contact h2 {
        font-size:
            clamp(1.8rem, 7.3vw, 2.4rem);

        line-height: 1.5;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-project {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-project-number {
        font-size: 4.5rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-project-content h3 {
        font-size:
            clamp(1.75rem, 7.2vw, 2.3rem);

        line-height: 1.5;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-project-summary {
        font-size: 0.98rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-project-evidence {
        grid-template-columns: 1fr;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-project-visual {
        grid-column: auto;

        margin-top: 0.7rem;
    }


    html[lang="ja"] .jp-work-v2 .project-filter-group {
        flex-wrap: nowrap;
        overflow-x: auto;

        padding-bottom: 0.45rem;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }


    html[lang="ja"] .jp-work-v2 .project-filter-group::-webkit-scrollbar {
        display: none;
    }


    html[lang="ja"] .jp-work-v2 .project-archive-grid {
        grid-template-columns: 1fr;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-contact-actions {
        align-items: stretch;

        flex-direction: column;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-contact-actions .button {
        width: 100%;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-contact-actions .work-v2-text-link {
        margin-top: 0.4rem;
    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 420px) {

    html[lang="ja"] .jp-work-v2 .work-v2-hero h1 {
        font-size: 2rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-system-main {
        padding:
            24px 18px;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-system-title {
        margin-bottom: 28px;

        font-size: 0.82rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-system-flow {
        gap: 5px;

        margin-bottom: 28px;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-system-flow span {
        min-height: 50px;

        border-radius: 8px;

        font-size: 0.56rem;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-system-flow i {
        width: 8px;
    }


    html[lang="ja"] .jp-work-v2 .work-v2-system-table i {
        height: 28px;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

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

    html[lang="ja"] .jp-work-v2 .work-v2-text-link,
    html[lang="ja"] .jp-work-v2 .work-v2-project-link {
        transition: none;
    }

}