/* Same card and live pane as the projects grid. One business per row.
   White page; overview lives under the tagline as Read more — no (i) flip. */
html body.ventures-page {
    background: #fff !important;
    color: #111;
}
html body.ventures-page .page-content {
    color: #111;
}
.ventures-page .projects-section {
    margin-top: 0;
}
html body.ventures-page .projects-grid,
html body.ventures-page .projects-grid:not(.list-view),
html body.ventures-page .projects-grid:not(.list-view):not(.presentation-view) {
    --projects-cols: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 80px;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.ventures-page .project-item {
    opacity: 1;
    transform: none;
}
html body.ventures-page .project-card-flip-btn,
html body.ventures-page .project-card-flip-layer,
html body.ventures-page .project-card-back {
    display: none !important;
}
html body.ventures-page .projects-grid:not(.list-view) .project-card-inner {
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    outline: 1px solid rgba(0, 0, 0, 0.08);
    outline-offset: -1px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.06);
}
/* Default project thumbs use a black media well; on white Co. cards that
   reads as a dark fringe around the live pane at the rounded corners. */
html body.ventures-page .projects-grid:not(.list-view) .project-card-front,
html body.ventures-page .projects-grid:not(.list-view) .project-thumbnail,
html body.ventures-page .projects-grid:not(.list-view) .project-thumbnail-wrap {
    background: #fff !important;
    background-color: #fff !important;
}
html body.ventures-page .project-title {
    color: #111;
    -webkit-text-fill-color: #111;
}
html body.ventures-page .project-category {
    margin-bottom: 0;
    color: #666;
    -webkit-text-fill-color: #666;
}
html body.ventures-page .venture-read-more,
html body.ventures-page .venture-about {
    display: none !important;
}

/* 3D only while this card is flipping or showing its back. Idle cards stay flat. */
.project-item.is-flip-3d {
    perspective: 1800px;
    /* Subtle shift of vanishing point per tap (set via --flip-origin-* from JS) */
    perspective-origin: calc(50% + var(--flip-origin-x, 0px)) calc(50% + var(--flip-origin-y, 0px));
}
.project-item.fade-in {
    opacity: 1;
    transform: translateY(0);
}
.project-card-inner {
    position: relative;
    z-index: 2; /* above .project-hover-overlay when card is flipped */
    width: 100%;
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0);
    /* backface-visibility on .inner breaks hit-testing to the back face in WebKit; faces set it per-face */
    /* Duration from JS; easing fixed: slow ease-in, medium ease-out (no snappy fast taps) */
    -webkit-transition:
        -webkit-transform var(--flip-dur, 0.45s) var(--flip-ease, cubic-bezier(0.55, 0.06, 0.22, 1)),
        box-shadow var(--flip-dur, 0.45s) var(--flip-ease, cubic-bezier(0.55, 0.06, 0.22, 1));
    transition:
        transform var(--flip-dur, 0.45s) var(--flip-ease, cubic-bezier(0.55, 0.06, 0.22, 1)),
        box-shadow var(--flip-dur, 0.45s) var(--flip-ease, cubic-bezier(0.55, 0.06, 0.22, 1));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    /* Do NOT use overflow:hidden here — it breaks 3D back faces in Chrome/Safari */
}
.project-item.is-flip-3d .project-card-inner {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
@media screen and (max-width: 768px) {
    .project-card-inner {
        /* Slower default on phones if --flip-dur is missing; WebKit uses -webkit-transform in some builds */
        -webkit-transition:
            -webkit-transform var(--flip-dur, 0.95s) var(--flip-ease, cubic-bezier(0.33, 0, 0.2, 1)),
            box-shadow var(--flip-dur, 0.95s) var(--flip-ease, cubic-bezier(0.33, 0, 0.2, 1));
        transition:
            transform var(--flip-dur, 0.95s) var(--flip-ease, cubic-bezier(0.33, 0, 0.2, 1)),
            box-shadow var(--flip-dur, 0.95s) var(--flip-ease, cubic-bezier(0.33, 0, 0.2, 1));
    }
    .project-item.is-flipped .project-card-inner {
        -webkit-transform: rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0);
    }
}
/*
 * Grid view: flip box must match the visible thumb (theme .project-thumbnail = 16/10 + margin-bottom).
 * Margin was inside .project-card-front, so the back face was taller than the image; spacer moves to .project-meta.
 */
.projects-grid:not(.list-view) .project-card-inner {
    aspect-ratio: 16 / 10;
}
.projects-grid:not(.list-view) .project-card-inner .project-thumbnail {
    margin-bottom: 0 !important;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    box-sizing: border-box;
}
.projects-grid:not(.list-view) .project-card-front .project-thumbnail-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.projects-grid:not(.list-view) .project-item > .project-meta {
    margin-top: 10px;
}
.project-item.is-flipped .project-card-inner {
    transform: rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}
.project-item.is-flipped {
    z-index: 5;
}
/* Invisible front can still sit above the back in hit-test order after rotateY(180) on the inner; WebKit/Safari */
.project-item.is-flipped .project-card-front {
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .project-item {
        perspective-origin: 50% 50%;
        transform: none;
        transition-duration: 0.35s;
    }
    .project-item.fade-in {
        transform: none;
    }
    .project-card-inner {
        transition-duration: 0.2s;
        transition-timing-function: ease;
    }
    .project-item.is-flipped .project-card-inner {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
}
.project-card-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.project-card-front {
    position: relative;
    transform: rotateY(0deg) translateZ(2px);
    overflow: hidden;
    border-radius: 4px; /* match theme .project-thumbnail */
    background: #000; /* media well; back face stays white */
}
/* Must follow .project-card-front so this wins over position: relative */
.projects-grid:not(.list-view) .project-card-front {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.project-card-back {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: rotateY(180deg) translateZ(2px);
    background: #fff !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    display: block;
    border-radius: 4px; /* match front / theme thumb */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    /* Same type scale as .hero-text #heroText (see block ~L53) */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0;
    font-weight: 400;
}
/* Scrollable overview only — close (×) stays fixed on the card face */
.project-card-back-scroll {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem 2.35rem 0.75rem;
}
.project-card-back-overview {
    margin: 0;
    position: relative;
    z-index: 1;
}
.project-card-back-title {
    display: block;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 0.8;
}
.project-card-back-cats {
    margin: 0 0 0.85em;
    padding: 0;
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
.project-card-back-overview .project-card-about-text {
    display: block;
    margin: 0;
    opacity: 0.8;
}
.project-card-back-facts {
    margin-top: 1.1em;
}
.project-card-back-facts .project-active-fact {
    margin: 0 0 0.85em;
}
.project-card-back-facts .project-active-fact:last-child {
    margin-bottom: 0;
}
.project-card-back-facts .project-active-fact-label,
.project-card-back-facts .project-active-fact-value {
    display: block;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    opacity: 0.8;
}
/* Inline first “line” of the overview block (same <p> as body, like Overview<br>sentence…) */
.project-card-back-overview-headline {
    display: inline;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    font-style: inherit;
    color: #111;
    -webkit-text-fill-color: #111;
    opacity: 0.8;
}
.project-card-back-section {
    margin-bottom: 1rem;
}
.project-card-back-section:last-child {
    margin-bottom: 0;
}
.project-card-back-label {
    margin: 0 0 0.35rem;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: inherit;
    opacity: 0.8;
}
.project-card-back-body {
    margin: 0;
    font-weight: 400;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}
.project-card-back-body.project-card-back-credits {
    white-space: pre-line;
}
.project-card-scope-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.project-card-scope-list li {
    margin: 0 0 0.2rem;
    padding: 0;
}
.project-card-empty {
    color: rgba(0,0,0,0.4) !important;
    -webkit-text-fill-color: rgba(0,0,0,0.4) !important;
}
/* Static disc: lives outside .project-card-inner so it does not ride rotateY */
.project-card-flip-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
    z-index: 1002;
    pointer-events: none;
    transform: none;
    transform-style: flat;
    isolation: isolate;
}
.project-card-flip-layer > .project-card-flip-btn {
    pointer-events: auto;
}
.projects-grid.list-view .project-card-flip-layer,
.project-item--venture .project-card-flip-layer {
    display: none !important;
}
/* Front + back: same corner, same circle — i opens, x closes (glyphs swap; disc stays put) */
.project-card-flip-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 1002;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.5);
    color: #fff !important;
    font: 600 12px/1 HaasGrot, Helvetica, Arial, sans-serif;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    pointer-events: auto;
    transform: none;
    transition-property: background, transform;
    transition-duration: 0.2s, 0.15s;
    transition-timing-function: ease, ease;
}
.project-card-flip-btn:hover {
    background: rgba(0,0,0,0.72);
    transform: scale(1.06);
}
.project-card-flip-btn--open {
    width: 22px;
    height: 22px;
    padding: 0;
    border-width: 1px;
    box-sizing: border-box;
    font-style: normal;
    font-family: HaasGrot, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    overflow: visible;
    isolation: isolate;
    box-shadow: none;
}
.project-card-flip-btn--open .project-card-flip-glyph {
    position: relative;
    z-index: 2;
    display: block;
    font-style: normal;
    font-weight: 600;
    font-family: HaasGrot, Helvetica, Arial, sans-serif;
    line-height: 1;
    /* Lowercase i sits high in the em-box; nudge down to optically center */
    transform: translateY(0.5px);
    opacity: 1;
    scale: 1;
    filter: blur(0px);
    transition-property: opacity, filter, scale;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.project-card-flip-close-glyph {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
    transition-property: opacity, filter, scale;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.project-card-flip-close-glyph .project-card-close-icon {
    display: block;
    width: 10px;
    height: 10px;
    color: #fff;
}
.project-card-flip-close-glyph .project-card-close-icon path {
    stroke: currentColor;
}
.project-item.is-flipped .project-card-flip-btn--open .project-card-flip-glyph {
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
    pointer-events: none;
}
.project-item.is-flipped .project-card-flip-close-glyph {
    opacity: 1;
    scale: 1;
    filter: blur(0px);
}
.project-item.is-flipped .project-card-flip-btn--slideshow-wait .thumbnail-slideshow-spinner {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}
/* Slideshow thumbs: spinner sits in the same circle; “i” appears only when wrap is .slideshow-ready */
.project-thumbnail-wrap:not(.slideshow-ready) .project-card-flip-btn--slideshow-wait .project-card-flip-glyph,
.project-item:has(.project-thumbnail-wrap:not(.slideshow-ready)) .project-card-flip-btn--slideshow-wait .project-card-flip-glyph,
.project-item:not(.slideshow-ready):has(.project-card-flip-btn--slideshow-wait) .project-card-flip-btn--slideshow-wait .project-card-flip-glyph {
    opacity: 0;
}
.project-thumbnail-wrap.slideshow-ready .project-card-flip-btn--slideshow-wait .project-card-flip-glyph,
.project-item:has(.project-thumbnail-wrap.slideshow-ready):not(.is-flipped) .project-card-flip-btn--slideshow-wait .project-card-flip-glyph,
.project-item.slideshow-ready:not(.is-flipped) .project-card-flip-btn--slideshow-wait .project-card-flip-glyph {
    opacity: 1;
}
.project-thumbnail-wrap:not(.slideshow-ready) .project-card-flip-btn--slideshow-wait,
.project-item:has(.project-thumbnail-wrap:not(.slideshow-ready)) .project-card-flip-btn--slideshow-wait,
.project-item:not(.slideshow-ready):has(.project-card-flip-btn--slideshow-wait) .project-card-flip-btn--slideshow-wait {
    pointer-events: none;
    cursor: default;
}
.project-thumbnail-wrap.slideshow-ready .project-card-flip-btn--slideshow-wait,
.project-item:has(.project-thumbnail-wrap.slideshow-ready) .project-card-flip-btn--slideshow-wait,
.project-item.slideshow-ready .project-card-flip-btn--slideshow-wait {
    pointer-events: auto;
    cursor: pointer;
}

/* Frontend tile + / J-K cover picker removed (edit media in WP admin) */
.project-tile-add,
.project-tile-cover-hint,
.project-tile-drop-hint,
.project-tile-file {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.project-tile-add-legacy-unused {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 1003;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.5);
    color: #fff;
    font: 500 16px/1 Helvetica, Arial, sans-serif;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.15s cubic-bezier(0.2, 0, 0, 1), background 0.2s ease;
    pointer-events: none;
}
.project-item:hover .project-tile-add,
.project-item:focus-within .project-tile-add,
.project-thumbnail-wrap.is-tile-drop .project-tile-add,
.project-thumbnail-wrap.is-tile-uploading .project-tile-add {
    opacity: 1;
    transform: scale(1);
}
.project-tile-add:hover {
    background: rgba(0,0,0,0.72);
    transform: scale(1.06);
}
.project-tile-add:active {
    transform: scale(0.96);
}
.project-tile-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.project-tile-drop-hint {
    position: absolute;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.42);
    color: #fff;
    font: 400 12px/1.4 Helvetica, Arial, sans-serif;
    text-align: center;
    padding: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.project-thumbnail-wrap.is-tile-drop .project-tile-drop-hint,
.project-thumbnail-wrap.is-tile-uploading .project-tile-drop-hint {
    opacity: 1;
}
.project-thumbnail-wrap.is-tile-uploading .project-tile-drop-hint {
    background: rgba(0,0,0,0.5);
}
.project-tile-cover-hint {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 1004;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: 500 11px/1.3 Helvetica, Arial, sans-serif;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.project-item.is-cover-picking .project-tile-cover-hint {
    display: flex;
}
.project-tile-cover-hint strong {
    font-weight: 600;
}
.projects-grid.list-view .project-tile-add {
    opacity: 1;
}
.projects-grid.list-view .project-tile-cover-hint {
    display: none !important;
}
.project-card-flip-btn--open .thumbnail-slideshow-spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    width: 11px;
    height: 11px;
    border-width: 2px;
}
.project-card-flip-btn--close {
    width: 22px;
    height: 22px;
    padding: 0;
    border-width: 1px;
    box-sizing: border-box;
    font-size: 0; /* hide stray text; icon is SVG */
    line-height: 0;
    box-shadow: none;
}
.project-card-flip-btn--close .project-card-close-icon {
    display: block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: #fff;
}
.project-card-flip-btn--close .project-card-close-icon path {
    stroke: #fff;
}
/* Close on back: hoisted disc owns (x); hide leftover back-face buttons */
.project-card-back .project-card-flip-btn--close {
    display: none !important;
    pointer-events: none !important;
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 1003;
    border: 1px solid rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.5) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none;
}
.project-card-back .project-card-flip-btn--close .project-card-close-icon,
.project-card-back .project-card-flip-btn--close .project-card-close-icon path {
    stroke: #fff !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.project-card-back .project-card-flip-btn--close:hover {
    background: rgba(0,0,0,0.72) !important;
    border-color: rgba(255,255,255,0.9);
}
.projects-grid.list-view .project-card-flip-btn {
    display: none !important;
}
/*
 * Overview panel: override theme + body.dark-background / dark-transition (often sets white + -webkit-text-fill on grid)
 */
body.dark-background .projects-grid .project-item .project-card-back,
body.dark-transition .projects-grid .project-item .project-card-back {
    background: #fff !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
body.dark-background .projects-grid .project-item .project-card-back .project-card-back-body,
body.dark-background .projects-grid .project-item .project-card-back .project-card-back-overview,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-back-body,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-back-overview {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}
body.dark-background .projects-grid .project-item .project-card-back .project-card-empty,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-empty {
    color: rgba(0,0,0,0.4) !important;
    -webkit-text-fill-color: rgba(0,0,0,0.4) !important;
}
body.dark-background .projects-grid .project-item .project-card-back .project-card-back-label,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-back-label {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    opacity: 0.8;
}
body.dark-background .projects-grid .project-item .project-card-back .project-card-back-overview-headline,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-back-overview-headline,
body.dark-background .projects-grid .project-item .project-card-back .project-card-back-title,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-back-title,
body.dark-background .projects-grid .project-item .project-card-back .project-card-about-text,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-about-text,
body.dark-background .projects-grid .project-item .project-card-back .project-active-fact-label,
body.dark-transition .projects-grid .project-item .project-card-back .project-active-fact-label,
body.dark-background .projects-grid .project-item .project-card-back .project-active-fact-value,
body.dark-transition .projects-grid .project-item .project-card-back .project-active-fact-value {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
}
body.dark-background .projects-grid .project-item .project-card-back .project-card-flip-btn--close,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-flip-btn--close {
    background: rgba(0,0,0,0.5) !important;
    border-color: rgba(255,255,255,0.9) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
}
body.dark-background .projects-grid .project-item .project-card-back .project-card-flip-btn--close .project-card-close-icon path,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-flip-btn--close .project-card-close-icon path {
    stroke: #fff !important;
}
body.dark-background .projects-grid .project-item .project-card-back .project-card-flip-btn--close:hover,
body.dark-transition .projects-grid .project-item .project-card-back .project-card-flip-btn--close:hover {
    background: rgba(0,0,0,0.72) !important;
    border-color: rgba(255,255,255,0.9) !important;
}
.project-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 999;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.project-item:focus-within .project-hover-overlay,
.project-item.hovered .project-hover-overlay,
.project-item:focus-within:not(.hovered) .project-hover-overlay {
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Flip lives only on .project-card-inner; keep back face above overlay */
.project-item.is-flipped .project-hover-overlay {
    z-index: 0;
}

/* Era headers: title+dates left; blurb is a measure-width block hugging the right. */
.projects-group-headline {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--type-measure, 42ch));
    column-gap: 80px;
    row-gap: 1rem;
    align-items: start;
    margin: 0;
    padding: 3rem 0 1rem 0;
    overflow: visible;
}
.projects-group-headline:first-child {
    padding-top: 0.25rem;
}
.projects-group-title,
.projects-group-date,
.projects-group-description {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
}
.projects-group-heading {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
    justify-self: start;
    min-width: 0;
}
.projects-group-title {
    color: #000;
}
.projects-group-date,
.projects-group-description {
    opacity: 0.5;
}
.projects-group-description {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    min-width: 0;
}
/* After preload: title/date enter from off-screen left; blurb from off-screen right. */
.projects-group-headline .projects-group-heading {
    opacity: 0;
    transform: translate3d(-100vw, 0, 0);
    transition-property: opacity, transform;
    transition-duration: var(--aktuell-headline-ms, 1.2s);
    transition-timing-function: var(--aktuell-headline-ease, cubic-bezier(0.05, 0.7, 0.1, 1));
    will-change: transform, opacity;
}
.projects-group-headline .projects-group-description {
    opacity: 0;
    transform: translate3d(100vw, 0, 0);
    transition-property: opacity, transform;
    transition-duration: var(--aktuell-headline-ms, 1.2s);
    transition-timing-function: var(--aktuell-headline-ease, cubic-bezier(0.05, 0.7, 0.1, 1));
    transition-delay: 0.08s;
    will-change: transform, opacity;
}
.projects-group-headline.is-revealed .projects-group-heading {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.projects-group-headline.is-revealed .projects-group-title {
    opacity: 1;
}
.projects-group-headline.is-revealed .projects-group-date {
    opacity: 0.5;
}
.projects-group-headline.is-revealed .projects-group-description {
    opacity: 0.5;
    transform: translate3d(0, 0, 0);
}
html.aktuell-enter-left .projects-group-headline:not(.is-revealed) .projects-group-heading,
html.aktuell-enter-right .projects-group-headline:not(.is-revealed) .projects-group-heading,
.page-content.slide-in-left:not(.slide-active) .projects-group-headline:not(.is-revealed) .projects-group-heading,
.page-content.slide-in-right:not(.slide-active) .projects-group-headline:not(.is-revealed) .projects-group-heading {
    opacity: 0 !important;
    transform: translate3d(-100vw, 0, 0) !important;
    transition: none !important;
}
html.aktuell-enter-left .projects-group-headline:not(.is-revealed) .projects-group-description,
html.aktuell-enter-right .projects-group-headline:not(.is-revealed) .projects-group-description,
.page-content.slide-in-left:not(.slide-active) .projects-group-headline:not(.is-revealed) .projects-group-description,
.page-content.slide-in-right:not(.slide-active) .projects-group-headline:not(.is-revealed) .projects-group-description {
    opacity: 0 !important;
    transform: translate3d(100vw, 0, 0) !important;
    transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .projects-group-headline .projects-group-heading,
    .projects-group-headline .projects-group-description {
        transform: none;
        transition-duration: 0.35s;
        transition-delay: 0s;
    }
}
body.dark-background .projects-group-title,
body.dark-transition .projects-group-title {
    color: #fff;
}
body.dark-background .projects-group-date,
body.dark-transition .projects-group-date,
body.dark-background .projects-group-description,
body.dark-transition .projects-group-description {
    color: #fff;
}
/* Scroll black fade — soft black instead of pure #000 */

@media (max-width: 1024px) {
    .projects-group-headline {
        column-gap: 50px;
    }
}
@media (max-width: 768px) {
    .projects-group-headline {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 0.5rem;
    }
    .projects-group-heading,
    .projects-group-description {
        grid-column: 1;
        text-align: left;
    }
    .projects-group-headline .projects-group-description {
        transform: translate3d(-100vw, 0, 0);
    }
    html.aktuell-enter-left .projects-group-headline:not(.is-revealed) .projects-group-description,
    html.aktuell-enter-right .projects-group-headline:not(.is-revealed) .projects-group-description,
    .page-content.slide-in-left:not(.slide-active) .projects-group-headline:not(.is-revealed) .projects-group-description,
    .page-content.slide-in-right:not(.slide-active) .projects-group-headline:not(.is-revealed) .projects-group-description {
        transform: translate3d(-100vw, 0, 0) !important;
    }
}