@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
    --cream:      #f0ede6;
    --dark: #3D4321;
    --mid:        #6b6b5a;
    --font-serif: 'Albra Book Light', Georgia, serif;
    --font-sans:  'Albra Book Light', sans-serif;
    --font-weight: 400;
    --container:  1440px;
    --gutter:     60px;
}

/* ── Hero (optional full-width banner image) ── */
.sp-hero {
    width: calc( var(--feat-width) / 12 * 100% );
    overflow: hidden;
    line-height: 0;
    margin-bottom: 60px;
    margin-top: 80px;
}
.sp-feat-pos-left   { margin-left: 0; margin-right: auto; }
.sp-feat-pos-center { margin-left: auto; margin-right: auto; }
.sp-feat-pos-right  { margin-left: auto; margin-right: 0; }
.sp-hero img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 900px) {
    .sp-hero { width: 100% !important; }
}

/* ── Body wrapper ── */
.sp-body {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 25px;
    font-weight: 400;
    font-style: normal;
}

/* ══════════════════════════════════════════════
   ROW 1 — Tagline: full width
   ══════════════════════════════════════════════ */
.sp-tagline-bar {
    padding: 36px 0 0;
    margin-bottom: 12px;
}
.sp-tagline-text {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 400;
    /*letter-spacing: .18em;*/
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1.5;
    margin: 0;
}
.sp-tagline{
    font-size:18px;
    margin-bottom: 30px;
}

/* ══════════════════════════════════════════════
   ROW 2 — Two-column layout
   Left:  title + details table + icons + image sections
   Right: details image + text/image+text sections
   ══════════════════════════════════════════════ */
.sp-intro-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 0 40px;
    align-items: stretch;
}
/* sp-left-col wraps details + left image, spans full height of grid */
.sp-left-col          { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; }
.sp-intro-right       { grid-column: 2; grid-row: 1; }
.sp-mb-bottom-row     { grid-column: 2; grid-row: 2; align-self: end; }

/* Inside sp-left-col: details fixed height, image sits directly below */
.sp-left-col .sp-intro-left      { flex-shrink: 0; }
.sp-left-col .sp-intro-left-image { line-height: 0; margin-top: 120px; }

@media (max-width: 900px) {
    .sp-left-col .sp-intro-left-image { margin-top: 40px; }
}

/* ── LEFT COLUMN ── */
.sp-intro-left {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
}

.sp-title {
    font-family: 'Albra Book Light', sans-serif;
    font-size: 45px;
    font-weight: 400;
    line-height: 1;
    color: #3D4321;
    margin: 0 0 40px;
    text-transform:uppercase;
    /*letter-spacing: -.01em;*/
}

.sp-details-table {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 16px;
    font-family: 'Atlas Grotesk Regular';
    font-size: 18px;
    line-height: 1.5;
    color: var(--dark);
    margin-bottom: 18px;
}
.sp-details-label {
    color: var(--dark);
    white-space: nowrap;
}

/* Supporting icons */
.sp-supporting {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sp-supporting span,
.sp-supporting-link {
    display: inline-flex;
    align-items: center;
}
.sp-supporting-link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    opacity: 1;
    transition: opacity .2s, transform .2s;
    border-radius: 4px;
}
.sp-supporting-link:hover {
    opacity: .6;
    transform: scale(1.12);
}
.sp-supporting svg {
    width: 28px;
    height: 28px;
    display: block;
}

/* Image sections inside left column */
.sp-img-block {
    margin-top: 0;
    line-height: 0;
}
.sp-img-block img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ── RIGHT COLUMN ── */
.sp-intro-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: space-between;
}

/* Image+Text+Audio: image and audio row stay together at top of right col */
.sp-mb-img-audio-group {
    display: flex;
    flex-direction: column;
}

/* Details image at top of right column */
.sp-right-hero-img {
    line-height: 0;
    margin-bottom: 0;
}
.sp-right-hero-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* image+text section in right col */
.sp-right-sec {
    margin-top: 0;
}
.sp-right-img-text img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    line-height: 0;
}
.sp-right-text {
    padding: 28px 0 0;
}

/* text-only section in right col */
.sp-right-text-only {
    padding: 28px 0 0;
}

/* Shared label + body */
.sp-block-label {
    font-family: 'Atlas Grotesk Regular';
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #3D4321;
    margin: 0 0 10px;
}
.sp-block-body {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.3;
    color: var(--dark);
    margin: 0;
}

/* ── Prev / Next nav ── */
.sp-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 72px;
    font-family: var(--font-sans);
    font-size: 18px;
    letter-spacing: .06em;
}
.sp-nav-prev,
.sp-nav-next {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dark);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .2s;
    font-size: 34px;
    line-height: 40px;
}
.sp-nav-arrow {
    font-size: 34px;
    line-height: 1;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    overflow: visible;
}

.sp-nav-svg-defs {
    position: absolute;
    width: 0;
    height: 0;
}
.sp-nav-line {
    flex: 1;
    height: 1px;
    background: rgba(42,42,30,.2);
    display: block;
}
.sp-nav-empty {
    min-width: 0;
}
.sp-nav-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}
.sp-nav-prev:hover,
.sp-nav-next:hover { opacity: .45; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    :root { --gutter: 40px; }
    .sp-intro-cols { gap: 0 40px; }
}
@media (max-width: 900px) {
    /* Switch grid to flex-column so we can order all direct children freely */
    .sp-intro-cols {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /*
     * display:contents makes sp-left-col's children direct flex items
     * of sp-intro-cols, allowing free ordering across the two columns.
     */
    .sp-left-col {
        display: contents;
    }

    .sp-intro-left        { order: 1; }
    .sp-intro-right       { order: 2; margin-top: 24px; }
    .sp-intro-left-image  { order: 3; margin-top: 24px; }
    .sp-mb-bottom-row     { order: 4; margin-top: 24px !important; }
}
@media (max-width: 600px) {
    :root { --gutter: 24px; }

    .sp-body { padding-bottom: 60px; }
    .sp-title { font-size: 32px; }

    .sp-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        text-align: left;
    }
    .sp-nav-prev {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 20px;
        font-size: 24px;
        text-align: center;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
    .sp-nav-line {
        width: 100%;
        height: 1px;
        flex: none;
    }
    .sp-nav-next {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 8px;
        padding-top: 20px;
        font-size: 24px;
        text-align: center;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
    /* hide the inline stretch lines on mobile — we use the single divider line */
    .sp-nav-empty:not(.sp-nav-disabled) { display: none; }
}

/* ══════════════════════════════════════════════
   SECTION 3 — Content Sections
   ══════════════════════════════════════════════ */
.sp-intro-section {
    margin-bottom: 40px;
}

.sp-content-section {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Single Image block ── */
.sp-single-image-block {
    line-height: 0;
}
.sp-single-image-block img {
    display: block;
    height: auto;
    width: calc( var(--si-width) / 12 * 100% );
}
.sp-si-pos-left   img { margin-left: 0; margin-right: auto; }
.sp-si-pos-center img { margin-left: auto; margin-right: auto; }
.sp-si-pos-right  img { margin-left: auto; margin-right: 0; }

/* ── Image + Text Row block ── */
.sp-itr-block {
    display: grid;
    gap: 0 40px;
    align-items: end;
}
.sp-itr-left,
.sp-itr-right {
    grid-template-columns: 1fr 1fr;
}
.sp-itr-left  .sp-itr-image { order: 0; }
.sp-itr-left  .sp-itr-text  { order: 1; }
.sp-itr-right .sp-itr-image { order: 1; }
.sp-itr-right .sp-itr-text  { order: 0; }

.sp-itr-image {
    line-height: 0;
}
.sp-itr-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* text always bottom-aligned via align-items: end on grid */
.sp-itr-text {
    padding-bottom: 0;
}

@media (max-width: 900px) {
    .sp-itr-block {
        grid-template-columns: 1fr !important;
        gap: 24px 0;
    }
    .sp-itr-right .sp-itr-image,
    .sp-itr-right .sp-itr-text  { order: unset; }
    .sp-single-image-block img   { width: 100% !important; }
}

/* ── Intro left image (inside sp-left-col) ── */
.sp-intro-left-image {
    padding-top: 0;
    line-height: 0;
}
.sp-intro-left-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ── Intro right text (below details image) ── */
.sp-intro-right-text {
    padding-top: 28px;
}

/* ── Two Image Row ── */
.sp-tir-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
}
.sp-tir-image {
    line-height: 0;
}
.sp-tir-image img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 900px) {
    .sp-tir-block {
        grid-template-columns: 1fr !important;
        gap: 40px 0;
    }
}

/* ── Text + Logo + Image block ── */
.sp-tli-block {
    display: grid;
    align-items: end;
    gap: 50px;
}
.sp-tli-right {
    grid-template-columns: 1fr calc( var(--tli-img-cols) / 12 * 100% );
}
.sp-tli-left-layout {
    grid-template-columns: calc( var(--tli-img-cols) / 12 * 100% ) 1fr;
}
/* image right (default) */
.sp-tli-right .sp-tli-left  { order: 0; }
.sp-tli-right .sp-tli-image { order: 1; }
/* image left */
.sp-tli-left-layout .sp-tli-left  { order: 1; }
.sp-tli-left-layout .sp-tli-image { order: 0; }

/* inner 2-col: text | stem logo */
.sp-tli-text-logo {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 40px;
    align-items: end;
    height: 100%;
}

.sp-tli-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
}

.sp-tli-heading {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dark);
    margin: 0;
}

.sp-tli-desc {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.75;
    color: var(--dark);
    margin: 0;
}

.sp-tli-link {
    font-family: var(--font-sans);
    font-size: 18px;
    color: var(--dark);
    text-decoration: none;
    display: inline-block;
}
.sp-tli-link:hover { opacity: .5; }

/* STEM logo grid */
.sp-tli-logo {
    display: flex;
    align-items: flex-end;
}
.sp-tli-logo-img {
    width: auto;
    max-width: 120px;
    height: auto;
    display: block;
}




.sp-tli-image {
    line-height: 0;
}
.sp-tli-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .sp-tli-block {
        grid-template-columns: 1fr !important;
    }
    .sp-tli-right .sp-tli-left,
    .sp-tli-right .sp-tli-image,
    .sp-tli-left-layout .sp-tli-left,
    .sp-tli-left-layout .sp-tli-image { order: unset; }
}

/* ── Two Col Text block ── */
.sp-tct-block {
    display: grid;
    gap: 0 40px;
    align-items: start;
    border-top: 1px solid rgba(42,42,30,.2);
    border-bottom: 1px solid rgba(42,42,30,.2);
    padding: 40px 0;
}

.sp-tct-left {
    padding-top: 4px;
}

.sp-tct-heading {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--dark);
    margin: 0;
    letter-spacing: -.01em;
    white-space: pre-line;
}

.sp-tct-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-tct-body {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.75;
    color: var(--dark);
    margin: 0;
}

.sp-tct-link {
    font-family: var(--font-sans);
    font-size: 18px;
    color: var(--dark);
    text-decoration: none;
    letter-spacing: .02em;
}
.sp-tct-link:hover { opacity: .5; }

@media (max-width: 900px) {
    .sp-tct-block {
        grid-template-columns: 1fr !important;
        gap: 24px 0;
    }
}

/* ══════════════════════════════════════════════
   SCROLL FADE-IN — images on single project page
   ══════════════════════════════════════════════ */

/* Initial hidden state — applied via JS so non-JS users always see images */
.sp-img-fade {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

/* Triggered state — added by IntersectionObserver */
.sp-img-fade.sp-img-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero image gets a slightly longer, more dramatic entrance */
.sp-hero .sp-img-fade {
    transform: translateY(28px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Stagger left/right intro images slightly */
.sp-intro-left-image .sp-img-fade {
    transition-delay: 0.1s;
}
.sp-intro-right .sp-img-fade {
    transition-delay: 0.15s;
}

/* Content section images fade in with a subtle left/right lean
   depending on their natural position — keeps it feeling alive */
.sp-single-image-block .sp-img-fade,
.sp-itr-image .sp-img-fade,
.sp-tir-image .sp-img-fade,
.sp-tli-image .sp-img-fade {
    transition: opacity 0.75s ease, transform 0.75s ease;
}
/* ── Metabox block: audio player ── */
.sp-mb-audio {
    margin-top: 16px;
    padding: 14px 0 0;
}
.sp-mb-audio-label {
    font-family: 'Atlas Grotesk Regular';
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #3D4321;
    margin: 0 0 8px;
}
.sp-mb-audio audio {
    width: 100%;
    display: block;
}

/* ══════════════════════════════════════════════
   METABOX INTRO BLOCK — frontend
   ══════════════════════════════════════════════ */

/* Top image */
.sp-mb-top-img {
    line-height: 0;
}
.sp-mb-top-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Audio toggle row */
.sp-mb-audio-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0 0;
    flex-wrap: wrap;
}
.sp-mb-audio-prompt {
    font-family: 'Atlas Grotesk Regular';
    font-size: 16px;
    color: var(--dark);
    flex: 1;
    min-width: 0;
}
.sp-mb-audio-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.sp-mb-audio-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* Track: ●──── */
.sp-mb-toggle-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 80px;
    height: 16px;
}
.sp-mb-toggle-line {
    position: absolute;
    left: 24px;
    right: 8px;
    height: 1px;
    background: var(--dark, #3D4321);
    opacity: .5;
}
.sp-mb-toggle-thumb {
    position: absolute;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dark, #3D4321);
    transition: left .25s ease;
    z-index: 1;
}
/* checked state: thumb moves right */
.sp-mb-audio-cb:checked ~ .sp-mb-toggle-track .sp-mb-toggle-thumb {
    left: calc(100% - 10px);
}
/* Y label sits just after the thumb dot */
.sp-mb-toggle-y {
    position: absolute;
    left: 14px;
    font-family: 'Atlas Grotesk Regular';
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dark, #3D4321);
    line-height: 16px;
}
.sp-mb-toggle-label {
    font-family: 'Atlas Grotesk Regular';
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dark, #3D4321);
    opacity: .5;
    transition: opacity .2s;
}
.sp-mb-label-listen { order: -1; }
/* active label brightens */
.sp-mb-audio-cb:not(:checked) ~ .sp-mb-toggle-track ~ .sp-mb-label-listen,
.sp-mb-audio-cb:checked       ~ .sp-mb-toggle-track ~ .sp-mb-label-no {
    opacity: 1;
}
.sp-mb-audio-el {
    display: none;
}

/* Bottom text + logo two-column block */
.sp-mb-bottom-row {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}
.sp-mb-bottom-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-mb-learn-more {
    font-family: 'Atlas Grotesk Regular';
    font-size: 18px;
    color: var(--dark, #3D4321);
    text-decoration: none;
    letter-spacing: 0;
    margin-top: 4px;
    display: inline-block;
}
.sp-mb-learn-more:hover { opacity: .6; }
.sp-mb-logo {
    flex-shrink: 0;
}
.sp-mb-logo img {
    max-width: 120px;
    height: auto;
    display: block;
    object-fit: contain;
}

@media (max-width: 900px) {
    .sp-mb-audio-prompt { flex: unset; }
    .sp-mb-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 24px;
        gap: 16px;
    }
    .sp-mb-bottom-text {
        width: 100%;
    }
    .sp-mb-logo {
        width: 100%;
    }
    .sp-mb-logo img {
        max-width: 120px;
    }
}