/* ==========================================================
   JAVIER RUBIO — MASTER CSS
   Theme: Profile
   ========================================================== */


/* ==========================================================
   1. DESIGN SYSTEM
   ========================================================== */

:root {
    --jr-dark: #253438;
    --jr-teal-dark: #315f68;
    --jr-teal: #477f89;
    --jr-teal-light: #66aeb8;
    --jr-muted: #6f7f83;
    --jr-line: rgba(71,127,137,0.20);

    --jr-radius: 8px;

    --jr-card-bg:
        linear-gradient(
            135deg,
            rgba(71,127,137,0.045),
            rgba(102,174,184,0.01)
        );

    --jr-card-bg-hover:
        linear-gradient(
            135deg,
            rgba(71,127,137,0.11),
            rgba(102,174,184,0.03)
        );

    --jr-font:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* ==========================================================
   2. GLOBAL
   ========================================================== */

html {
    scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
    font-family: var(--jr-font) !important;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   Paragraphs — justified globally
   ---------------------------------------------------------- */

p,
.wp-block-paragraph,
.justified-text {
    font-size: 1rem;
    line-height: 1.65;

    text-align: justify !important;
    text-justify: inter-word;
}


/*
   Some legacy pages use h5 as paragraph text.
*/

.entry-content h5 {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;

    text-align: justify !important;
    text-justify: inter-word;
}


/* ----------------------------------------------------------
   Links
   ---------------------------------------------------------- */

a {
    font-weight: 500;
}


/* ----------------------------------------------------------
   Headings
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
    font-family: var(--jr-font) !important;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h1 {
    font-size: clamp(2.4rem,5vw,4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}

h2 {
    font-size: clamp(1.9rem,3.5vw,2.6rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.45rem,2.5vw,1.8rem);
    font-weight: 650;
}

h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

h6 {
    font-size: 0.95rem;
    font-weight: 600;
}


/* ==========================================================
   3. PROFILE THEME — HEADER
   ========================================================== */

#header .site-title,
#header .site-title a,
#header .site-description,
.site-title,
.site-description {
    display: none !important;
}

#navigation,
.main-navigation,
#site-navigation {
    display: none !important;
}

#header #masthead {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#header,
.home-header {
    position: relative !important;

    min-height: 210px !important;
    height: 210px !important;

    overflow: visible !important;

    background-size: cover !important;
    background-position: center 48% !important;
}


/* ==========================================================
   4. PROFILE PHOTO
   ========================================================== */

#header img.avatar,
#header .avatar,
#header img.profile-image,
#header .profile-image,
#header img.custom-logo,
#header .custom-logo {
    width: 260px !important;
    height: 260px !important;

    max-width: 260px !important;
    max-height: 260px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    display: block !important;

    margin-left: auto !important;
    margin-right: auto !important;

    position: relative !important;
    z-index: 20 !important;
}


/* ==========================================================
   5. WORDPRESS / JETPACK / THEME CLEANUP
   ========================================================== */

/* Jetpack / WordPress extras */
.sharedaddy,
.sd-sharing-enabled,
.sd-like,
.jetpack-likes-widget-wrapper,
.jp-relatedposts,
.comments-area,
#comments,
.comment-respond,
.entry-footer .edit-link,
div.sharedaddy.sd-like-enabled,
div.sharedaddy.sd-block,
div.sd-content,
div.sd-title,
#jp-post-flair,

/* Profile theme sidebar / widget area */
#secondary,
.widget-area,
.sidebar,
#sidebar,
.sidebar-primary,
.site-sidebar,
.row .four {
    display: none !important;
}


/*
   Profile theme uses a 12-column grid:
   .eight = main content, .four = sidebar.
   Once the sidebar is removed, let the main column occupy
   the entire available row.
*/
.row .eight,
#primary,
.content-area,
.main-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
   Keep the theme's outer .row container responsive.
   We expand the content into the sidebar space without
   forcing the page itself to the physical screen edges.
*/
.row {
    width: 100% !important;
}


/* ==========================================================
   6. SHARED JR PAGE SYSTEM
   ========================================================== */

.jr-home,
.jr-service-page,
.jr-teaching-page,
.jr-supervision-page {
    width: 100%;

    font-family: var(--jr-font);

    font-size: 17px;
    line-height: 1.65;

    color: inherit;
}


/* ----------------------------------------------------------
   Shared labels / kickers
   ---------------------------------------------------------- */

.jr-section-label,
.jr-service-kicker,
.jr-service-label,
.jr-teaching-kicker,
.jr-teaching-label,
.jr-supervision-kicker,
.jr-supervision-label {
    color: var(--jr-teal);

    font-size: 0.75rem;
    font-weight: 750;

    letter-spacing: 0.16em;
}

.jr-section-label {
    margin-bottom: 0.8rem;
}

.jr-service-kicker,
.jr-teaching-kicker,
.jr-supervision-kicker {
    margin-bottom: 1rem;
}

.jr-service-label,
.jr-teaching-label,
.jr-supervision-label {
    margin-bottom: 0.7rem;
}


/* ----------------------------------------------------------
   Shared page intros
   ---------------------------------------------------------- */

.jr-service-intro,
.jr-teaching-intro,
.jr-supervision-intro {
    max-width: 920px;
    padding: 3rem 0 5rem;
}

.jr-service-intro h1,
.jr-teaching-intro h1,
.jr-supervision-intro h1 {
    font-size: clamp(2.8rem,6vw,4.6rem) !important;
    line-height: 1 !important;

    letter-spacing: -0.05em !important;

    font-weight: 750 !important;

    margin: 0 0 1.5rem !important;
}

.jr-service-lead,
.jr-teaching-lead,
.jr-supervision-lead {
    max-width: 820px;

    font-size: clamp(1.15rem,2vw,1.35rem) !important;
    line-height: 1.6 !important;

    opacity: 0.88;
}


/* ----------------------------------------------------------
   Shared internal sections
   ---------------------------------------------------------- */

.jr-service-section,
.jr-teaching-section,
.jr-supervision-section {
    padding: 4.5rem 0;

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

.jr-service-section-head,
.jr-teaching-section-head,
.jr-supervision-section-head {
    display: grid;

    grid-template-columns: 1.15fr 1fr;

    gap: 3rem;

    align-items: end;

    margin-bottom: 2.5rem;
}

.jr-service-section-head > p,
.jr-teaching-section-head > p,
.jr-supervision-section-head > p {
    max-width: 520px;

    margin: 0;

    opacity: 0.76;
}

.jr-service-section h2,
.jr-teaching-section h2,
.jr-supervision-section h2 {
    font-size: clamp(2rem,3.5vw,2.8rem) !important;
    line-height: 1.1 !important;

    font-weight: 700 !important;

    letter-spacing: -0.035em !important;
}


/* ==========================================================
   7. HOMEPAGE
   ========================================================== */

.jr-home {
    line-height: 1.68;
}

.jr-home p {
    line-height: 1.68;
    margin-top: 0;
}

.jr-home a {
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* ----------------------------------------------------------
   Homepage anchors
   ---------------------------------------------------------- */

#about,
#research,
#publications,
#projects,
#teaching-supervision,
#responsibilities,
#outreach,
#news {
    scroll-margin-top: 40px;
}


/* ----------------------------------------------------------
   Hero
   ---------------------------------------------------------- */

.jr-intro {
    max-width: 920px;

    padding: 2.3rem 0 4rem;
}

.jr-name {
    font-size: clamp(3rem,7vw,5.3rem) !important;
    line-height: 0.98 !important;

    letter-spacing: -0.055em !important;

    font-weight: 750 !important;

    margin: 0 0 0.8rem !important;
}

.jr-position {
    font-size: clamp(1.05rem,2vw,1.30rem);

    font-weight: 500;

    margin-bottom: 1.8rem;

    opacity: 0.88;
}

.jr-tagline {
    max-width: 780px;

    font-size: clamp(1.18rem,2.2vw,1.45rem) !important;
    line-height: 1.55 !important;

    font-weight: 400;

    margin-bottom: 2.2rem !important;
}


/* ----------------------------------------------------------
   Hero buttons
   ---------------------------------------------------------- */

.jr-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 0.65rem;
}

.jr-button {
    display: inline-block;

    padding: 0.66rem 1.05rem;

    border: 1px solid var(--jr-teal);
    border-radius: 5px;

    color: inherit !important;

    background: rgba(255,255,255,0.02);

    text-decoration: none !important;

    font-size: 0.89rem;
    font-weight: 600;
}

.jr-button:hover {
    background: var(--jr-teal);

    border-color: var(--jr-teal);

    color: #fff !important;

    transform: translateY(-2px);
}

.jr-button-primary {
    background: var(--jr-teal);

    color: #fff !important;
}

.jr-button-primary:hover {
    background: var(--jr-teal-dark);

    border-color: var(--jr-teal-dark);
}


/* ==========================================================
   8. HOMEPAGE — SECTIONS
   ========================================================== */

.jr-section {
    padding: 4.8rem 0;

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

/* More compact rhythm for the final homepage sections. */
.jr-section-compact {
    padding: 3.8rem 0;
}

.jr-section h2 {
    font-size: clamp(2rem,3.5vw,2.8rem) !important;

    line-height: 1.12 !important;

    letter-spacing: -0.035em !important;

    font-weight: 700 !important;

    margin: 0 0 1.5rem !important;
}

.jr-section-intro {
    max-width: 720px;

    font-size: 1.08rem !important;

    margin-bottom: 2.4rem !important;

    opacity: 0.85;
}

.jr-more {
    margin-top: 2rem;
}

.jr-more a {
    color: var(--jr-teal) !important;

    font-weight: 650;

    text-decoration: none !important;
}

.jr-more a:hover {
    color: var(--jr-teal-light) !important;
}


/* ==========================================================
   9. ABOUT
   ========================================================== */

.jr-about-grid {
    display: grid;

    grid-template-columns: 1.55fr 1fr;

    gap: clamp(2rem,6vw,5rem);
}

.jr-about-main p:first-child {
    font-size: 1.1rem;
}

.jr-about-secondary {
    border-left: 2px solid var(--jr-teal);

    padding-left: 1.7rem;

    opacity: 0.82;
}


/* ==========================================================
   10. RESEARCH — HOMEPAGE
   ========================================================== */

.jr-research-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1.2rem;
}

.jr-research-card {
    display: flex;
    flex-direction: column;

    min-height: 285px;

    padding: 2rem;

    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);

    color: inherit !important;
    text-decoration: none !important;

    background: var(--jr-card-bg);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.jr-research-card:hover {
    transform: translateY(-4px);

    border-color: var(--jr-teal);

    background: var(--jr-card-bg-hover);

    box-shadow: 0 12px 30px rgba(20,40,45,0.08);
}

.jr-card-number {
    display: block;

    margin: 0 0 1.8rem;

    color: var(--jr-teal-light);

    font-size: 0.76rem;
    line-height: 1;

    font-weight: 750;

    letter-spacing: 0.10em;
}

.jr-research-card h3 {
    margin: 0 0 0.9rem !important;

    color: inherit !important;

    font-size: 1.65rem !important;
    line-height: 1.2 !important;

    font-weight: 650 !important;

    letter-spacing: -0.025em !important;
}

.jr-research-card p {
    margin: 0 0 1.6rem !important;

    font-size: 0.98rem;
    line-height: 1.6;

    opacity: 0.80;
}

.jr-research-card-link {
    display: block;

    margin-top: auto;

    color: var(--jr-teal);

    font-size: 0.86rem;
    font-weight: 650;
}

.jr-research-card:hover .jr-research-card-link {
    color: var(--jr-teal-dark);
}


/* ==========================================================
   RESEARCH PAGE
   ========================================================== */

.jr-research-page {
    width: 100%;

    font-family: var(--jr-font);

    font-size: 17px;
    line-height: 1.65;

    color: inherit;
}


/* ----------------------------------------------------------
   Intro
   ---------------------------------------------------------- */

.jr-research-page-intro {
    max-width: 920px;

    padding: 3rem 0 4.5rem;
}

.jr-research-page-kicker {
    margin-bottom: 1rem;

    color: var(--jr-teal);

    font-size: 0.75rem;
    font-weight: 750;

    letter-spacing: 0.16em;
}

.jr-research-page-intro h1 {
    margin: 0 !important;

    font-size: clamp(2.8rem,6vw,4.6rem) !important;
    line-height: 1 !important;

    letter-spacing: -0.05em !important;

    font-weight: 750 !important;
}


/* ----------------------------------------------------------
   Main research sections
   ---------------------------------------------------------- */

.jr-research-page-section {
    position: relative;

    padding: 4.8rem 0;

    border-top: 1px solid var(--jr-line);

    scroll-margin-top: 40px;
}

.jr-research-topic-layout {
    display: grid;

    grid-template-columns: minmax(170px,0.34fr) minmax(0,1fr);

    gap: clamp(2.5rem,6vw,5rem);
}


/* ----------------------------------------------------------
   Left column
   ---------------------------------------------------------- */

.jr-research-topic-side {
    position: relative;
}

.jr-research-topic-number {
    margin-bottom: 2.2rem;

    color: var(--jr-teal-light);

    font-size: clamp(2.8rem,5vw,4.4rem);
    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.05em;

    opacity: 0.55;
}


/* ----------------------------------------------------------
   Focus box
   ---------------------------------------------------------- */

.jr-research-focus {
    padding: 1.25rem 1.3rem;

    border-left: 3px solid var(--jr-teal);

    background:
        linear-gradient(
            135deg,
            rgba(71,127,137,0.055),
            rgba(102,174,184,0.012)
        );
}

.jr-research-focus-label {
    margin-bottom: 0.8rem;

    color: var(--jr-teal);

    font-size: 0.67rem;
    font-weight: 750;

    letter-spacing: 0.14em;
}

.jr-research-focus ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.jr-research-focus li {
    position: relative;

    margin-bottom: 0.65rem;
    padding-left: 0.9rem;

    color: rgba(0,0,0,0.58);

    font-size: 0.84rem;
    line-height: 1.45;

    font-weight: 550;
}

.jr-research-focus li:last-child {
    margin-bottom: 0;
}

.jr-research-focus li::before {
    content: "";

    position: absolute;

    top: 0.58em;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--jr-teal-light);
}


/* ----------------------------------------------------------
   Main content
   ---------------------------------------------------------- */

.jr-research-topic-main {
    max-width: 900px;
}

.jr-research-topic-main h2 {
    margin: 0 0 0.55rem !important;

    color: #111 !important;

    font-size: clamp(2.1rem,4vw,3.1rem) !important;
    line-height: 1.08 !important;

    font-weight: 700 !important;

    letter-spacing: -0.04em !important;
}

.jr-research-topic-subtitle {
    margin-bottom: 2rem;

    color: var(--jr-teal);

    font-size: clamp(1rem,1.6vw,1.15rem);

    line-height: 1.45;

    font-weight: 600;
}

.jr-research-topic-main p {
    max-width: 850px;

    margin: 0 0 1.25rem;

    font-size: 1rem;
    line-height: 1.7;

    opacity: 0.84;

    text-align: justify !important;
    text-justify: inter-word;
}


/* ----------------------------------------------------------
   Slight visual alternation
   ---------------------------------------------------------- */

.jr-research-topic-alt::before {
    content: "";

    position: absolute;

    top: 1.5rem;
    right: -2rem;
    bottom: 1.5rem;
    left: -2rem;

    z-index: -1;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(71,127,137,0.035),
            rgba(102,174,184,0.008)
        );
}


/* ----------------------------------------------------------
   Topic tags
   ---------------------------------------------------------- */

.jr-research-topic-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    margin-top: 1.8rem;
}

.jr-research-topic-tags span {
    display: inline-block;

    padding: 0.32rem 0.6rem;

    border: 1px solid rgba(71,127,137,0.22);
    border-radius: 4px;

    background: rgba(71,127,137,0.045);

    color: var(--jr-teal);

    font-size: 0.69rem;

    font-weight: 650;

    letter-spacing: 0.035em;
}


/* ----------------------------------------------------------
   Publications footer
   ---------------------------------------------------------- */

.jr-research-page-footer {
    padding: 3.5rem 0 1rem;

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

.jr-research-publications-link {
    color: var(--jr-teal) !important;

    text-decoration: none !important;

    font-size: 1rem;

    font-weight: 650;
}

.jr-research-publications-link:hover {
    color: var(--jr-teal-dark) !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width:900px) {

    .jr-research-topic-layout {
        grid-template-columns: 145px minmax(0,1fr);

        gap: 2rem;
    }

    .jr-research-topic-number {
        font-size: 3rem;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width:700px) {

    .jr-research-page {
        font-size: 16px;
    }

    .jr-research-page-intro {
        padding: 2.5rem 0 3.5rem;
    }

    .jr-research-page-section {
        padding: 3.5rem 0;
    }

    .jr-research-topic-layout {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .jr-research-topic-side {
        display: grid;

        grid-template-columns: auto 1fr;

        gap: 1.3rem;

        align-items: start;
    }

    .jr-research-topic-number {
        margin: 0;

        font-size: 2.5rem;
    }

    .jr-research-focus {
        padding: 1rem 1.1rem;
    }

    .jr-research-topic-alt::before {
        right: -1rem;
        left: -1rem;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media screen and (max-width:500px) {

    .jr-research-page-intro h1 {
        font-size: 2.8rem !important;
    }

    .jr-research-topic-side {
        grid-template-columns: 1fr;
    }

    .jr-research-topic-number {
        font-size: 2.2rem;
    }

    .jr-research-focus {
        margin-top: 0;
    }

    .jr-research-topic-main h2 {
        font-size: 2rem !important;
    }

}

/* ==========================================================
   11. LATEST PUBLICATIONS
   ========================================================== */

.jr-publications-home {
    margin-top: 1rem;
}

.jr-latest-paper {
    padding: 1.35rem 0;

    border-bottom: 1px solid var(--jr-line);
}

.jr-latest-paper:first-child {
    border-top: 1px solid var(--jr-line);
}

.jr-latest-year {
    color: var(--jr-teal);

    font-size: 0.82rem;

    font-weight: 700;

    margin-bottom: 0.25rem;
}

.jr-latest-title {
    font-size: 1.15rem;

    font-weight: 650;

    line-height: 1.4;
}

.jr-latest-title a {
    color: inherit !important;

    text-decoration: none !important;
}

.jr-latest-title a:hover {
    color: var(--jr-teal) !important;
}

.jr-latest-authors {
    font-size: 0.9rem;

    opacity: 0.72;

    margin-top: 0.3rem;
}


/* ==========================================================
   12. PROJECTS
   ========================================================== */

.jr-project-grid {
    display: grid;

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

    gap: 1.2rem;
}

.jr-project-card {
    display: block;

    padding: 2rem;

    border-top: 4px solid var(--jr-teal);

    border-radius: 6px;

    color: inherit !important;
    text-decoration: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(71,127,137,0.10),
            rgba(102,174,184,0.025)
        );

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.jr-project-card:hover {
    transform: translateY(-4px);

    background:
        linear-gradient(
            135deg,
            rgba(71,127,137,0.14),
            rgba(102,174,184,0.04)
        );

    box-shadow: 0 12px 30px rgba(20,40,45,0.08);
}

.jr-project-meta {
    color: var(--jr-teal);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.09em;

    margin-bottom: 1rem;
}

.jr-project-card h3 {
    color: inherit !important;

    font-size: 1.5rem !important;
    line-height: 1.2 !important;

    margin: 0 0 0.45rem !important;
}

.jr-project-subtitle {
    font-weight: 550;

    margin-bottom: 1.2rem !important;
}

.jr-project-external {
    margin-top: 1.4rem;

    color: var(--jr-teal);

    font-size: 0.84rem;

    font-weight: 650;
}

.jr-project-card:hover .jr-project-external {
    color: var(--jr-teal-dark);
}


/* ==========================================================
   13. TEACHING / SUPERVISION — HOMEPAGE
   ========================================================== */

.jr-two-columns {
    display: grid;

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

    gap: 1.2rem;
}

.jr-feature-card {
    display: block;

    min-height: 260px;

    padding: 2rem;

    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);

    color: inherit !important;

    text-decoration: none !important;

    background: var(--jr-card-bg);
}

.jr-feature-card:hover {
    transform: translateY(-4px);

    border-color: var(--jr-teal);

    background: var(--jr-card-bg-hover);
}

.jr-feature-top {
    color: var(--jr-teal);

    font-size: 0.73rem;

    font-weight: 700;

    letter-spacing: 0.15em;
}

.jr-feature-card h2 {
    font-size: 1.7rem !important;

    margin: 1.2rem 0 1rem !important;
}

.jr-feature-card span {
    color: var(--jr-teal);

    font-weight: 600;
}


/* ==========================================================
   14. OUTREACH
   ========================================================== */

.jr-outreach p {
    max-width: 780px;

    font-size: 1.08rem;
}


/* ==========================================================
   15. BACK TO TOP
   ========================================================== */

.jr-back-top {
    padding: 2.5rem 0 1rem;

    border-top: 1px solid var(--jr-line);

    text-align: right;
}

.jr-back-top a {
    color: var(--jr-teal) !important;

    font-size: 0.85rem;

    font-weight: 650;

    text-decoration: none !important;
}


/* ==========================================================
   16. FULL PUBLICATIONS PAGE
   ========================================================== */

.inspire-publications {
    width: 100%;

    max-width: 100%;
}

.publication-year {
    margin-top: 2.8rem !important;

    margin-bottom: 1.2rem !important;

    font-family: var(--jr-font) !important;

    font-size: 1.55rem !important;

    font-weight: 700 !important;

    letter-spacing: -0.02em;

    color: var(--jr-teal) !important;
}

.publication-item {
    margin-bottom: 1.8rem;
}

.publication-authors {
    margin-bottom: 0.18rem;

    font-size: 0.94rem;

    line-height: 1.5;

    opacity: 0.87;
}

.publication-title {
    font-size: 1.05rem;

    font-weight: 600;

    line-height: 1.4;
}

.publication-title a {
    text-decoration: none;
}

.publication-title a:hover {
    text-decoration: underline;
}

.publication-journal {
    margin-top: 0.18rem;

    font-size: 0.94rem;

    opacity: 0.90;
}

.publication-links {
    margin-top: 0.30rem;

    font-size: 0.88rem;
}

.publication-links a {
    text-decoration: none;

    font-weight: 500;
}


/* ==========================================================
   17. SECONDARY NAVIGATION
   ========================================================== */

.jr-subnav {
    display: flex;

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

    gap: 1.5rem;

    padding: 1.1rem 0 1.3rem;

    border-bottom: 1px solid var(--jr-line);

    font-size: 0.86rem;
}


/* ----------------------------------------------------------
   All links
   ---------------------------------------------------------- */

.jr-subnav a {
    position: relative;

    color: inherit !important;

    text-decoration: none !important;

    font-weight: 600;

    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}


/* ----------------------------------------------------------
   Home
   ---------------------------------------------------------- */

.jr-subnav-home {
    flex-shrink: 0;

    color: var(--jr-teal) !important;
}

.jr-subnav-home:hover {
    color: var(--jr-teal-dark) !important;
}


/* ----------------------------------------------------------
   Navigation links
   ---------------------------------------------------------- */

.jr-subnav-links {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 1.1rem;
}

.jr-subnav-links a {
    padding: 0.15rem 0;
}

.jr-subnav-links a:hover {
    color: var(--jr-teal) !important;
}


/* ----------------------------------------------------------
   Active section
   ---------------------------------------------------------- */

.jr-subnav-links a.jr-subnav-active {
    color: var(--jr-teal) !important;

    font-weight: 750;
}

.jr-subnav-links a.jr-subnav-active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -0.45rem;

    height: 2px;

    border-radius: 999px;

    background: var(--jr-teal);
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media screen and (max-width:700px) {

    .jr-subnav-links a.jr-subnav-active::after {
        bottom: -0.25rem;
    }

}

/* ==========================================================
   18. TEACHING PAGE
   ========================================================== */

.jr-teaching-section h2 {
    margin: 0 !important;
}

.jr-teaching-grid {
    display: grid;

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

    gap: 1.2rem;
}

.jr-teaching-card {
    display: flex;
    flex-direction: column;

    min-height: 350px;

    padding: 2rem 2.1rem;

    border: 1px solid var(--jr-line);
    border-top: 5px solid var(--jr-teal);
    border-radius: var(--jr-radius);

    color: inherit !important;

    text-decoration: none !important;

    background: var(--jr-card-bg);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.jr-teaching-card:hover {
    transform: translateY(-4px);

    border-color: var(--jr-teal);

    background: var(--jr-card-bg-hover);

    box-shadow: 0 12px 30px rgba(20,40,45,0.08);
}

.jr-teaching-card-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1.4rem;
}

.jr-teaching-card-meta {
    color: var(--jr-teal);

    font-size: 0.70rem;

    font-weight: 750;

    line-height: 1.45;

    letter-spacing: 0.10em;
}

.jr-teaching-language {
    flex-shrink: 0;

    padding: 0.27rem 0.48rem;

    border: 1px solid rgba(71,127,137,0.25);
    border-radius: 4px;

    background: rgba(71,127,137,0.055);

    color: var(--jr-teal);

    font-size: 0.61rem;

    font-weight: 750;

    line-height: 1.2;

    letter-spacing: 0.10em;
}

.jr-teaching-card h3 {
    color: #111 !important;

    font-size: 1.55rem !important;
    line-height: 1.18 !important;

    font-weight: 500 !important;

    letter-spacing: -0.025em !important;

    margin: 0 0 0.6rem !important;
}

.jr-teaching-card-subtitle {
    color: rgba(0,0,0,0.55);

    font-size: 1rem;

    line-height: 1.45;

    font-weight: 650;

    margin-bottom: 1.35rem;
}

.jr-teaching-card p {
    color: rgba(0,0,0,0.52);

    font-size: 0.97rem;

    line-height: 1.6;

    margin: 0 0 1.5rem;
}

.jr-teaching-card-footer {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 1rem;

    margin-top: auto;

    padding-top: 1.1rem;

    border-top: 1px solid var(--jr-line);

    color: var(--jr-muted);

    font-size: 0.82rem;

    font-weight: 550;
}

.jr-teaching-card-link {
    color: var(--jr-teal);

    font-weight: 650;

    white-space: nowrap;
}

.jr-teaching-card:hover .jr-teaching-card-link {
    color: var(--jr-teal-dark);
}


/* ==========================================================
   19. SUPERVISION PAGE
   ========================================================== */

.jr-supervision-section h2 {
    margin: 0 0 2.3rem !important;
}

.jr-supervision-section-head h2 {
    margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   Opportunities
   ---------------------------------------------------------- */

.jr-opportunity-grid {
    display: grid;

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

    gap: 1rem;
}

.jr-opportunity-card {
    padding: 1.8rem;

    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);

    background: var(--jr-card-bg);
}

.jr-opportunity-number {
    color: var(--jr-teal-light);

    font-size: 0.74rem;

    font-weight: 750;

    letter-spacing: 0.1em;
}

.jr-opportunity-card h3 {
    color: var(--jr-teal) !important;

    font-size: 1.35rem !important;

    margin: 1rem 0 0.8rem !important;
}

.jr-opportunity-card p {
    margin: 0;

    opacity: 0.8;
}

.jr-supervision-contact {
    margin-top: 1.8rem;
}

.jr-supervision-contact a {
    color: var(--jr-teal) !important;

    text-decoration: none !important;

    font-weight: 650;
}


/* ----------------------------------------------------------
   Current group
   ---------------------------------------------------------- */

.jr-current-grid {
    display: grid;

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

    gap: 1.2rem;
}

.jr-person-card {
    overflow: hidden;

    padding-bottom: 1.8rem;

    border: 1px solid var(--jr-line);
    border-top: 5px solid var(--jr-teal);
    border-radius: 9px;

    background: var(--jr-card-bg);
}

.jr-person-photo {
    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    margin-bottom: 1.5rem;
}

.jr-person-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}

.jr-person-card > .jr-person-role,
.jr-person-card > h3,
.jr-person-card > .jr-person-affiliation,
.jr-person-card > p,
.jr-person-card > .jr-person-links {
    margin-left: 1.7rem;
    margin-right: 1.7rem;
}

.jr-person-role {
    color: var(--jr-teal);

    font-size: 0.69rem;

    font-weight: 750;

    letter-spacing: 0.12em;

    margin-bottom: 0.65rem;
}

.jr-person-card h3,
.jr-former-card h3 {
    color: #111 !important;

    font-size: 1.45rem !important;
    line-height: 1.18 !important;

    font-weight: 600 !important;

    letter-spacing: -0.025em !important;

    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
}

.jr-person-affiliation {
    color: var(--jr-muted);

    font-size: 0.84rem;

    font-weight: 550;

    margin-bottom: 1rem;
}

.jr-person-card p {
    font-size: 0.94rem;

    line-height: 1.58;

    opacity: 0.8;
}


/* ----------------------------------------------------------
   Person links
   ---------------------------------------------------------- */

.jr-person-links {
    margin-top: 1.3rem;
}

.jr-person-links a {
    color: var(--jr-teal) !important;

    text-decoration: none !important;

    font-size: 0.84rem;

    font-weight: 650;
}

.jr-person-links a:hover {
    color: var(--jr-teal-dark) !important;
}


/* ----------------------------------------------------------
   Former PhD students
   ---------------------------------------------------------- */

.jr-former-grid {
    display: grid;

    gap: 1rem;
}

.jr-former-card {
    display: grid;

    grid-template-columns: 190px minmax(0,1fr);

    overflow: hidden;

    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);

    background: var(--jr-card-bg);
}

.jr-former-photo {
    min-height: 240px;

    overflow: hidden;
}

.jr-former-photo img {
    width: 100%;
    height: 100%;

    min-height: 240px;

    object-fit: cover;
    object-position: center;

    display: block;
}

.jr-former-content {
    padding: 1.7rem 2rem;
}

.jr-thesis-title {
    margin: 1rem 0 0.8rem !important;

    font-size: 1rem !important;

    font-weight: 650;

    line-height: 1.45;
}

.jr-person-photo-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            rgba(71,127,137,0.16),
            rgba(102,174,184,0.06)
        );

    color: var(--jr-teal);

    font-size: 2rem;

    font-weight: 650;

    letter-spacing: 0.08em;
}


/* ==========================================================
   20. ACADEMIC SERVICE / EVENTS
   ========================================================== */

.jr-service-section h2 {
    margin: 0 !important;
}

.jr-event-grid {
    display: grid;

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

    gap: 1rem;
}

.jr-event-card {
    display: flex;
    flex-direction: column;

    min-height: 230px;

    padding: 1.7rem 1.8rem;

    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);

    color: inherit !important;

    text-decoration: none !important;

    background: var(--jr-card-bg);
}

.jr-event-card:hover {
    transform: translateY(-4px);

    border-color: var(--jr-teal);

    background: var(--jr-card-bg-hover);
}

.jr-event-card-featured {
    border-top: 4px solid var(--jr-teal);
}

.jr-event-type {
    display: block;

    color: var(--jr-teal);

    font-size: 0.70rem;

    font-weight: 750;

    letter-spacing: 0.13em;

    margin-bottom: 1rem;
}

.jr-event-card h3 {
    color: inherit !important;

    font-size: 1.28rem !important;
    line-height: 1.28 !important;

    font-weight: 650 !important;

    margin: 0 0 0.7rem !important;
}

.jr-event-card p {
    margin: 0 0 1.3rem;

    font-size: 0.96rem;

    line-height: 1.55;

    opacity: 0.76;
}

.jr-card-link {
    margin-top: auto;

    color: var(--jr-teal);

    font-size: 0.85rem;

    font-weight: 650;
}


/* ----------------------------------------------------------
   Editorial role
   ---------------------------------------------------------- */

.jr-editorial-card {
    display: grid;

    grid-template-columns: 85px 1fr;

    gap: 1.8rem;

    align-items: center;

    max-width: 760px;

    padding: 2rem;

    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);
}

.jr-editorial-mark {
    width: 75px;
    height: 75px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--jr-teal-dark),
            var(--jr-teal-light)
        );

    color: #fff;

    font-size: 2rem;

    font-weight: 700;
}

.jr-editorial-role {
    color: var(--jr-teal);

    font-size: 0.70rem;

    font-weight: 750;

    letter-spacing: 0.13em;

    margin-bottom: 0.4rem;
}

.jr-editorial-content h3 {
    font-size: 1.4rem !important;

    margin: 0 0 0.5rem !important;
}

.jr-editorial-content p {
    margin: 0 0 0.8rem;

    opacity: 0.78;
}

.jr-editorial-content a {
    color: var(--jr-teal) !important;

    text-decoration: none !important;

    font-weight: 650;
}


/* ----------------------------------------------------------
   Journal review
   ---------------------------------------------------------- */

.jr-journal-grid {
    display: grid;

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

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

.jr-journal {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 76px;

    padding: 1rem 2.5rem 1rem 0;

    border-bottom: 1px solid var(--jr-line);

    color: inherit !important;

    text-decoration: none !important;

    font-weight: 550;
}

.jr-journal:nth-child(odd) {
    margin-right: 2rem;
}


/* ==========================================================
   21. TABLET
   ========================================================== */

@media screen and (min-width:601px) and (max-width:900px) {

    #header,
    .home-header {
        min-height: 180px !important;
        height: 180px !important;

        background-position: center 48% !important;
    }

    #header img.avatar,
    #header .avatar,
    #header img.profile-image,
    #header .profile-image,
    #header img.custom-logo,
    #header .custom-logo {
        width: 230px !important;
        height: 230px !important;

        max-width: 230px !important;
        max-height: 230px !important;
    }

    .jr-current-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .jr-opportunity-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   22. MOBILE / NARROW
   ========================================================== */

@media screen and (max-width:800px) {

    .jr-home,
    .jr-service-page,
    .jr-teaching-page,
    .jr-supervision-page {
        font-size: 16px;
    }

    .jr-service-intro,
    .jr-teaching-intro,
    .jr-supervision-intro {
        padding: 2.5rem 0 3.5rem;
    }

    .jr-service-section,
    .jr-teaching-section,
    .jr-supervision-section {
        padding: 3.5rem 0;
    }

    .jr-service-section-head,
    .jr-teaching-section-head,
    .jr-supervision-section-head {
        grid-template-columns: 1fr;

        gap: 1rem;

        margin-bottom: 2rem;
    }

    .jr-teaching-grid {
        grid-template-columns: 1fr;
    }

    .jr-teaching-card {
        min-height: auto;
    }

}


@media screen and (max-width:700px) {

    .jr-subnav {
        display: block;
    }

    .jr-subnav-home {
        display: inline-block;

        margin-bottom: 0.8rem;
    }

    .jr-subnav-links {
        gap: 0.65rem 1rem;
    }

    .jr-current-grid {
        grid-template-columns: 1fr;
    }

    .jr-former-card {
        grid-template-columns: 125px minmax(0,1fr);
    }

    .jr-former-photo,
    .jr-former-photo img {
        min-height: 200px;
    }

}


/* ==========================================================
   23. MOBILE
   ========================================================== */

@media screen and (max-width:600px) {

    body {
        font-size: 16px;
    }

    #header,
    .home-header {
        min-height: 118px !important;
        height: 118px !important;

        overflow: visible !important;

        background-size: cover !important;
        background-position: center 48% !important;
    }

    #header #masthead {
        padding: 0 !important;

        min-height: 0 !important;
    }

    #header img.avatar,
    #header .avatar,
    #header img.profile-image,
    #header .profile-image,
    #header img.custom-logo,
    #header .custom-logo {
        width: 175px !important;
        height: 175px !important;

        max-width: 175px !important;
        max-height: 175px !important;

        object-fit: cover !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .jr-intro {
        padding: 1.4rem 0 3.2rem;
    }

    .jr-name {
        font-size: 2.9rem !important;
    }

    .jr-tagline {
        font-size: 1.12rem !important;
    }

    .jr-buttons {
        gap: 0.5rem;
    }

    .jr-button {
        padding: 0.58rem 0.78rem;

        font-size: 0.82rem;
    }

    .jr-section {
        padding: 3.5rem 0;
    }

    .jr-section-compact {
        padding: 3rem 0;
    }

    .jr-about-grid,
    .jr-research-grid,
    .jr-project-grid,
    .jr-two-columns,
    .jr-event-grid,
    .jr-journal-grid {
        grid-template-columns: 1fr;
    }

    .jr-about-secondary {
        border-left: 0;

        border-top: 2px solid var(--jr-teal);

        padding-left: 0;
        padding-top: 1.4rem;
    }

    .jr-research-card,
    .jr-feature-card,
    .jr-event-card {
        min-height: auto;
    }

    .jr-journal:nth-child(odd) {
        margin-right: 0;
    }

    .publication-year {
        font-size: 1.35rem !important;
    }

    .jr-editorial-card {
        grid-template-columns: 1fr;
    }

    .jr-editorial-mark {
        width: 60px;
        height: 60px;

        font-size: 1.6rem;
    }

}


/* ==========================================================
   24. SMALL MOBILE
   ========================================================== */

@media screen and (max-width:500px) {

    .jr-service-intro h1,
    .jr-teaching-intro h1,
    .jr-supervision-intro h1 {
        font-size: 2.8rem !important;
    }

    .jr-teaching-card {
        padding: 1.6rem;
    }

    .jr-teaching-card-top {
        display: block;
    }

    .jr-teaching-language {
        display: inline-block;

        margin-top: 0.55rem;
    }

    .jr-teaching-card h3 {
        font-size: 1.45rem !important;
    }

    .jr-teaching-card-footer {
        display: block;
    }

    .jr-teaching-card-link {
        display: block;

        margin-top: 0.4rem;

        white-space: normal;
    }

    .jr-former-card {
        grid-template-columns: 1fr;
    }

    .jr-former-photo {
        aspect-ratio: 16 / 10;

        min-height: 0;
    }

    .jr-former-photo img {
        min-height: 0;

        aspect-ratio: 16 / 10;
    }

}

/* ==========================================================
   PROJECTS PAGE
   ========================================================== */

.jr-projects-page {
    width: 100%;

    font-family: var(--jr-font);

    font-size: 17px;
    line-height: 1.65;

    color: inherit;
}

.jr-projects-intro {
    max-width: 920px;

    padding: 3rem 0 5rem;
}

.jr-projects-kicker,
.jr-projects-label {
    color: var(--jr-teal);

    font-size: 0.75rem;
    font-weight: 750;

    letter-spacing: 0.16em;
}

.jr-projects-kicker {
    margin-bottom: 1rem;
}

.jr-projects-label {
    margin-bottom: 0.7rem;
}

.jr-projects-intro h1 {
    font-size: clamp(2.8rem,6vw,4.6rem) !important;

    line-height: 1 !important;

    letter-spacing: -0.05em !important;

    font-weight: 750 !important;

    margin: 0 0 1.5rem !important;
}

.jr-projects-lead {
    max-width: 820px;

    font-size: clamp(1.15rem,2vw,1.35rem) !important;

    line-height: 1.6 !important;

    opacity: 0.88;
}

.jr-projects-section {
    padding: 4.5rem 0;

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

.jr-projects-section h2 {
    font-size: clamp(2rem,3.5vw,2.8rem) !important;

    line-height: 1.1 !important;

    font-weight: 700 !important;

    letter-spacing: -0.035em !important;

    margin: 0 0 2.5rem !important;
}

.jr-project-dates {
    margin: -0.45rem 0 1.2rem;

    color: var(--jr-muted);

    font-size: 0.82rem;

    font-weight: 550;
}

.jr-project-empty {
    opacity: 0.7;
}

@media screen and (max-width:800px) {

    .jr-projects-page {
        font-size: 16px;
    }

    .jr-projects-intro {
        padding: 2.5rem 0 3.5rem;
    }

    .jr-projects-section {
        padding: 3.5rem 0;
    }

}

@media screen and (max-width:500px) {

    .jr-projects-intro h1 {
        font-size: 2.8rem !important;
    }

}

/* ==========================================================
   FLOATING BACK TO TOP
   ========================================================== */

.jr-page-top-anchor {
    position: relative;
    top: 0;
}

.jr-floating-top {
    position: fixed !important;

    right: 1.2rem;
    bottom: 1.2rem;

    z-index: 99999 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    visibility: visible !important;
    opacity: 1 !important;

    padding: 0.55rem 0.8rem;

    border: 1px solid var(--jr-line);
    border-radius: 999px;

    background: rgba(255,255,255,0.94);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    color: var(--jr-teal) !important;
    text-decoration: none !important;

    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1;

    box-shadow: 0 6px 20px rgba(20,40,45,0.10);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.jr-floating-top:hover {
    transform: translateY(-2px);

    border-color: var(--jr-teal);

    background: #fff;

    box-shadow: 0 8px 24px rgba(20,40,45,0.14);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width:600px) {

    .jr-floating-top {
        position: fixed !important;

        right: 0.75rem !important;
        bottom: 0.75rem !important;

        z-index: 99999 !important;

        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        padding: 0.5rem 0.7rem;

        font-size: 0.74rem;

        background: rgba(255,255,255,0.96);
    }

}


/* ==========================================================
   EXTRA SAFETY FOR HOME
   ========================================================== */

.jr-home .jr-floating-top,
body.home .jr-floating-top,
body.front-page .jr-floating-top {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================
   OUTREACH PAGE
   ========================================================== */

.jr-outreach-page {
    width: 100%;

    font-family: var(--jr-font);

    font-size: 17px;
    line-height: 1.65;

    color: inherit;
}


/* ==========================================================
   INTRO
   ========================================================== */

.jr-outreach-page-intro {
    max-width: 920px;

    padding: 3rem 0 5rem;
}

.jr-outreach-page-kicker {
    margin-bottom: 1rem;

    color: var(--jr-teal);

    font-size: 0.75rem;
    font-weight: 750;

    letter-spacing: 0.16em;
}

.jr-outreach-page-intro h1 {
    margin: 0 0 1.5rem !important;

    font-size: clamp(2.8rem,6vw,4.6rem) !important;
    line-height: 1 !important;

    font-weight: 750 !important;

    letter-spacing: -0.05em !important;
}

.jr-outreach-page-lead {
    max-width: 820px;

    margin: 0 !important;

    font-size: clamp(1.15rem,2vw,1.35rem) !important;
    line-height: 1.6 !important;

    opacity: 0.88;
}


/* ==========================================================
   SECTIONS
   ========================================================== */

.jr-outreach-page-section {
    position: relative;

    padding: 5rem 0;

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

.jr-outreach-page-section-alt::before {
    content: "";

    position: absolute;

    top: 1.5rem;
    right: -2rem;
    bottom: 1.5rem;
    left: -2rem;

    z-index: -1;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(71,127,137,0.035),
            rgba(102,174,184,0.008)
        );
}


/* ==========================================================
   FEATURE SECTIONS
   ========================================================== */

.jr-outreach-feature {
    display: grid;

    grid-template-columns:
        minmax(0,0.88fr)
        minmax(0,1.12fr);

    gap: clamp(2.5rem,6vw,5rem);

    align-items: center;
}

.jr-outreach-feature-content {
    max-width: 620px;
}


/* ==========================================================
   NUMBERS / LABELS
   ========================================================== */

.jr-outreach-section-number {
    margin-bottom: 0.35rem;

    color: var(--jr-teal-light);

    font-size: 0.74rem;
    font-weight: 750;

    letter-spacing: 0.10em;
}

.jr-outreach-section-label {
    margin-bottom: 1rem;

    color: var(--jr-teal);

    font-size: 0.70rem;
    font-weight: 750;

    letter-spacing: 0.15em;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

.jr-outreach-page-section h2,
.jr-outreach-page-closing h2 {
    margin: 0 0 1.6rem !important;

    color: var(--jr-dark) !important;

    font-size: clamp(2rem,3.5vw,2.8rem) !important;
    line-height: 1.12 !important;

    font-weight: 700 !important;

    letter-spacing: -0.035em !important;
}

.jr-outreach-feature-content p {
    margin: 0 0 1.2rem;

    line-height: 1.7;

    opacity: 0.82;

    text-align: justify !important;
    text-justify: inter-word;
}


/* ==========================================================
   ACTION LINKS
   ========================================================== */

.jr-outreach-action {
    display: inline-flex;

    align-items: center;

    margin-top: 0.8rem;

    padding: 0.62rem 0.9rem;

    border: 1px solid rgba(71,127,137,0.25);
    border-radius: 999px;

    background: rgba(71,127,137,0.035);

    color: var(--jr-teal) !important;

    text-decoration: none !important;

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

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.jr-outreach-action:hover {
    transform: translateY(-2px);

    border-color: var(--jr-teal);

    background: rgba(71,127,137,0.075);

    color: var(--jr-teal-dark) !important;
}


/* ==========================================================
   VIDEOS
   ========================================================== */

.jr-outreach-video {
    width: 100%;
}

.jr-outreach-video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid var(--jr-line);
    border-radius: 10px;

    background: #000;

    box-shadow:
        0 14px 35px
        rgba(20,40,45,0.08);
}

.jr-outreach-video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* ==========================================================
   PUBLIC ENGAGEMENT
   ========================================================== */

.jr-outreach-engagement-head {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,0.85fr);

    gap: clamp(2rem,6vw,5rem);

    align-items: end;

    margin-bottom: 2.4rem;
}

.jr-outreach-engagement-head h2 {
    margin-bottom: 0 !important;
}

.jr-outreach-engagement-head > p {
    max-width: 520px;

    margin: 0;

    opacity: 0.78;
}


/* ==========================================================
   GALLERY / POSTERS
   ========================================================== */

.jr-outreach-gallery {
    display: flex;

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

    flex-wrap: wrap;

    gap: 1.5rem;

    margin-top: 0.5rem;
}

.jr-outreach-gallery-item {
    width: min(250px, 42%);

    margin: 0;

    background: transparent;
}

.jr-outreach-gallery-image {
    display: flex;

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

    width: 100%;

    padding: 0;

    overflow: hidden;

    border: 1px solid var(--jr-line);
    border-radius: 6px;

    background: #fff;

    box-shadow:
        0 5px 15px
        rgba(20,40,45,0.045);
}

.jr-outreach-gallery-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 300px;

    object-fit: contain;
    object-position: center;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.jr-outreach-gallery-item:hover
.jr-outreach-gallery-image img {
    transform: scale(1.015);
}

.jr-outreach-gallery-item figcaption {
    padding: 0.55rem 0.15rem 0;

    color: var(--jr-muted);

    font-size: 0.68rem;
    line-height: 1.4;

    text-align: center;
}


/* ==========================================================
   CLOSING
   ========================================================== */

.jr-outreach-page-closing {
    display: grid;

    grid-template-columns: 100px minmax(0,1fr);

    gap: 2rem;

    align-items: center;

    margin-top: 1rem;

    padding: 4rem 0 1rem;

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

.jr-outreach-closing-mark {
    display: flex;

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

    width: 78px;
    height: 78px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--jr-teal-dark),
            var(--jr-teal-light)
        );

    color: #fff;

    font-size: 2.2rem;
    font-weight: 500;
}

.jr-outreach-closing-text {
    max-width: 750px;
}

.jr-outreach-closing-text h2 {
    margin-bottom: 0.8rem !important;
}

.jr-outreach-closing-text p {
    margin: 0;

    opacity: 0.78;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width:900px) {

    .jr-outreach-feature {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .jr-outreach-feature-content {
        max-width: 760px;
    }

    .jr-outreach-engagement-head {
        grid-template-columns: 1fr;

        gap: 1.2rem;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width:700px) {

    .jr-outreach-page {
        font-size: 16px;
    }

    .jr-outreach-page-intro {
        padding: 2.5rem 0 3.5rem;
    }

    .jr-outreach-page-section {
        padding: 3.5rem 0;
    }

    .jr-outreach-page-section-alt::before {
        right: -1rem;
        left: -1rem;
    }

    .jr-outreach-gallery {
        gap: 1rem;
    }

    .jr-outreach-gallery-item {
        width: min(220px, 46%);
    }

    .jr-outreach-gallery-image img {
        max-height: 260px;
    }

    .jr-outreach-page-closing {
        grid-template-columns: 1fr;

        gap: 1.3rem;

        padding-top: 3rem;
    }

    .jr-outreach-closing-mark {
        width: 60px;
        height: 60px;

        font-size: 1.7rem;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media screen and (max-width:500px) {

    .jr-outreach-page-intro h1 {
        font-size: 2.8rem !important;
    }

    .jr-outreach-gallery-item {
        width: min(180px, 46%);
    }

    .jr-outreach-gallery-image img {
        max-height: 230px;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media screen and (max-width:380px) {

    .jr-outreach-gallery-item {
        width: min(230px,100%);
    }

}

.sharedaddy,
.sd-sharing-enabled,
.sd-like,
.jetpack-likes-widget-wrapper,
.jp-relatedposts,
.comments-area,
#comments,
.comment-respond,
.entry-footer .edit-link,
div.sharedaddy.sd-like-enabled,
div.sharedaddy.sd-block,
div.sd-content,
div.sd-title,
#jp-post-flair {
    display: none !important;
}

/* ==========================================================
   WORDPRESS SIDEBAR / WIDGET AREA
   ========================================================== */

#secondary,
.widget-area,
.sidebar,
#sidebar,
.sidebar-primary,
.site-sidebar {
    display: none !important;
}

#primary,
.content-area,
.site-content,
.main-content,
#content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}