section.banner-title .mobile-nav {
  pointer-events: all;
  position: relative;
  z-index: 2;
}
/* ----- fonts ----- */
@font-face {
  font-family: "Rand";
  src: url("fonts/Rand/Rand-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rand";
  src: url("fonts/Rand/Rand-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Rand";
  src: url("fonts/Rand/Rand-MediumItalic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}

/* ----- vars ----- */
:root {
  /* 2027 palette (Figma: Web-organismo) */
  --color-light-1: #ededed;   /* right-hand content panel */
  --color-light-2: #ffffff;   /* buttons and pills */
  --color-light-3: #d9d9d9;

  --color-dark: #000000;
  --color-glow: #69f4b8;      /* mint glow behind the title blocks */
  --color-accent: #ff2c2c;

  --border-hairline: 1.6px solid var(--color-dark);

  --spacing-xs: 5px;
  --spacing-m: 20px;

  --font-s: 16px;
  --font-m: 22px;
  --font-l: 42px;
  --font-xl: 62px;
  --font-xxl: 80px;

  /* Uniform frame gutter (Figma: 40px at 1920). */
  --spacing-l: 40px;
  --font-ml: 30px;
}

/* ----- resets ----- */
.mobileMarker,
.menuOverlay,
.lightboxOverlay,
.lightbox,
.navbar,
.menuHolder,
.footerHolder,
.mainFooter {
  display: none !important;
}

.fullContainer {
  margin: 0;
}

header {
  position: unset;
  top: unset;
  background-color: unset;
  z-index: unset;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

strong {
  font-family: inherit;
  letter-spacing: unset;
  font-weight: bold;
}

button {
  background-color: unset;
  border: none;
  cursor: pointer;
  color: inherit;
}

a.bg-dark:visited {
  color: var(--color-light-2);
}

a.doc-image-close:visited {
  color: var(--color-light-1);
}

/* ----- utils ----- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.bg-dark {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

.bg-light-1 {
  background-color: var(--color-light-1);
}

.bg-light-2 {
  background-color: var(--color-light-2);
}

.bg-light-3 {
  background-color: var(--color-light-3);
}

.min-height-100 {
  min-height: 100vh;
}

.hover:hover {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

.mobile-only {
  display: none;
}

.underline {
  border-bottom: 3px solid var(--color-dark);
}

/* ----- general ----- */
* {
  line-height: 1;
  font-family: "Rand", sans-serif;
}

body {
  background-color: var(--color-light-1);
  font-size: var(--font-m);
  padding: 0;
}

/* ----- background video ----- */
.background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -20;
  overflow: hidden;
  /* pointer-events: none; */
}

.background-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- header ----- */
header {
  padding: var(--spacing-m);
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  font-size: var(--font-m);
}

header h1 a {
  display: flex;
  gap: var(--spacing-xs);
}

header h1 a:hover span {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

header nav ul {
  display: flex;
  gap: var(--spacing-xs);
}

/* ----- main ----- */
.main-container {
  width: 100%;
  height: 100%;
  display: flex;
}

.left-placeholder {
  width: 50%;
  height: 100%;
  pointer-events: none;
}

.main-container main {
  width: 50%;
  /* width: 100%; */
  padding: var(--spacing-m);
  font-size: var(--font-s);
  z-index: 10;
}

main p {
  line-height: 1.2;
  margin-bottom: var(--spacing-m);
}

main p span {
  display: inline;
  background-color: var(--color-light-2);
}

main.legal p span {
  background-color: unset;
}

/* ----- banners ----- */
section.banner-title {
  padding: var(--spacing-m);
  position: fixed;
  bottom: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: -10;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section.banner-title a {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  pointer-events: all;
  width: fit-content;
}

section.banner-title a:hover span {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

section.banner-title span {
  display: block;
  width: fit-content;
  font-size: var(--font-xl);
}

.mobile-nav {
  margin-top: calc(2 * var(--spacing-m));
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.mobile-nav ul li {
  width: fit-content;
}

.mobile-language-switcher {
  display: flex;
  gap: var(--spacing-xs);
}

section.banner-apply {
  /* background: #e4f0e4;
  background: linear-gradient(
    0deg,
    var(--color-light-2) 0%,
    rgba(178, 197, 192, 1) 84%,
    rgba(148, 195, 192, 1) 90%,
    rgba(128, 197, 181, 1) 94%,
    rgba(102, 221, 80, 1) 97%
  ); */
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50%;
  /* max-width: 50%; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  /* gap: var(--spacing-m); */
}

.banner-apply-links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pinned-logos {
  display: flex;
  align-items: flex-end;
}

.pinned-logos a {
  font-size: unset !important;
  line-height: unset !important;
}

.pinned-sponsor img {
  max-height: 40px;
}

.banner-apply-links ul {
  display: flex;
  gap: var(--spacing-xs);
  align-items: flex-end;
  padding: var(--spacing-m);
  flex-wrap: wrap;
}

.banner-apply-links ul li {
  line-height: 1.2;
}

.credits-wrapper-section {
  border-top: 2px solid var(--color-dark);
  margin-top: calc(var(--spacing-m) * 2);
  padding-top: calc(var(--spacing-m) * 2);
  padding-bottom: var(--spacing-m);
}

.credits {
  padding-top: var(--spacing-m);
  display: flex;
  gap: var(--spacing-m);
  pointer-events: all;
  flex-wrap: wrap;
}

.credits-section-header {
  font-size: var(--font-s);
  width: fit-content;
}

.credits-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.credits-section-images {
  flex-shrink: 0;
  width: 100%;
}

.credits-section-images ul {
  display: flex;
  gap: var(--spacing-m);
  width: 100%;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.credits-section-images a img {
  max-height: 50px;
  display: block;
}

.credits-section-images.pinned a img {
  max-height: 40px;
  display: block;
}

section.banner-apply a {
  font-size: var(--font-xl);
  pointer-events: all;
  line-height: 1.2;
}

section.banner-apply a.medium {
  font-size: var(--font-m);
  pointer-events: all;
}

.about-text {
  font-size: var(--font-m);
}

.legal-text {
  font-size: var(--font-s);
}

/* .about p:first-of-type {
  padding-top: calc(var(--spacing-m) * 2);
} */

section.case-studies h3,
h4 {
  font-size: var(--font-l);
  display: inline-block;
}

section.case-studies h3 {
  margin-top: calc(var(--spacing-m) * 2);
  /* margin-left: calc(var(--font-l) + var(--spacing-xs));*/
  margin-bottom: var(--spacing-m);
}

section.case-studies .case-studies-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

section.case-studies .case-study-header {
  display: flex;
  gap: var(--spacing-xs);
}

.collaborators-header {
  margin-left: calc(var(--font-l) + var(--spacing-xs));
  margin-bottom: var(--spacing-m);
}

section.case-studies .case-study-arrow {
  display: block;
  width: var(--font-l);
  height: var(--font-l);
  flex-shrink: 0;
}

section.case-studies .case-study-body {
  margin-top: var(--spacing-xs);
  margin-left: calc(var(--font-l) + var(--spacing-xs));
}

section.case-studies .case-study-body-more {
  margin-top: var(--spacing-xs);
  margin-left: calc(2 * var(--font-l) + 2 * var(--spacing-xs));
  display: none;
}

section.case-studies .case-study.open .case-study-body-more,
section.case-studies .case-study.collaborators .case-study-body-more {
  display: block;
}

.case-study-header h4,
.case-study-header h4 span {
  text-align: left;
  display: inline;
  line-height: 1.2;
}

section.case-studies .case-study.open .case-study-header h4 span,
section.case-studies .case-study .case-study-header:hover h4 span,
section.case-studies .case-study .case-study-header:hover h4 span {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

section.case-studies
  .case-study
  .case-study-header.collaborators-header:hover
  h4
  span {
  background-color: var(--color-light-2);
  color: inherit;
}

.subtitle {
  font-size: var(--font-m);
  line-height: 1.2;
}

section.case-studies .case-study-body p,
section.case-studies .case-study-body-more p {
  margin-bottom: var(--spacing-xs);
}

section.case-studies .case-study-body p span,
section.case-studies .case-study-body-more p span {
  display: inline;
  background-color: var(--color-light-2);
}

section.case-studies .case-study.open .case-study-body p span {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

section.case-studies .case-study .case-study-arrow {
  background-color: var(--color-light-2);
  transform: rotate(-90deg);
}

section.case-studies .case-study.open .case-study-arrow {
  background-color: var(--color-dark);
  color: var(--color-light-2);
  transform: rotate(0deg);
}

section.case-studies .case-study .case-study-header:hover .case-study-arrow {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

.case-study-links {
  display: flex;
  column-gap: var(--spacing-m);
  row-gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.download-link {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  font-size: var(--font-m);
  margin-top: var(--spacing-m);
  width: fit-content;
}

.download-link-image {
  height: var(--font-m);
  display: inline-block;
  border-bottom: 3px solid var(--color-dark);
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
}

.download-link-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.download-link-image {
  background-color: var(--color-light-2);
}

.doc-image {
  position: relative;
  max-width: 500px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.doc-image img {
  display: block;
}

.doc-image-actions {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
}

.doc-image-download {
  height: var(--font-m);
  aspect-ratio: 1 / 1;
  display: inline-block;
  box-sizing: border-box;
  background-color: var(--color-dark);
  color: var(--color-light-1);
  padding: 2px;
}

.doc-image-close {
  height: var(--font-m);
  aspect-ratio: 1 / 1;
  display: inline-block;
  box-sizing: border-box;
  background-color: var(--color-dark);
  color: var(--color-light-1);
  padding: 5px;
}

.doc-image-download svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid var(--color-light-1);
}

.doc-image-close svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- floating div ----- */
#floating-div {
  position: fixed;
  top: calc(50% - (315px + 60px) / 2);
  left: calc(50% - 280px);
  width: 560;
  height: calc(315px + 60px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  z-index: 9999;
  overflow: hidden;
}

#floating-div .floating-content {
  padding: 20px;
}

#floating-div .floating-header {
  cursor: move;
  background: var(--color-dark);
  height: 20px;
  user-select: none;
  position: relative;
}

#floating-div .floating-close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--color-dark);
  color: var(--color-light-2);
  border: none;
  font-size: 20px;
  line-height: 20px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#floating-div .floating-close-btn:hover {
  background: var(--color-light-2);
  color: var(--color-dark);
}

#floating-div .floating-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: var(--color-dark);
  cursor: se-resize;
}

/* ----- cookie warning ----- */

#cookie_warning {
  background-color: var(--color-dark);
  color: var(--color-light-1);
}

#cookie_warning button {
  background-color: var(--color-light-1);
  color: var(--color-dark);
}

.cookieRight button {
  border-radius: 0;
  font-size: var(--font-m) !important;
  /* padding: 0; */
}

#cookie_warning button,
#data_cookies button {
  /* padding: 0; */
}

.cookie_warning_text {
  margin-top: 10px;
}

/* ----- swup ----- */
html {
  --swup-slide-theme-direction: 1;
  --swup-slide-theme-translate: 50vw;
  --swup-slide-theme-duration-slide: 0.5s;
  --swup-slide-theme-translate-forward: calc(
    var(--swup-slide-theme-direction) * var(--swup-slide-theme-translate)
  );
  --swup-slide-theme-translate-backward: calc(
    var(--swup-slide-theme-translate-forward)
  );
}

html.is-animating {
  cursor: progress;
}

html.is-changing .swup-transition-main {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform var(--swup-slide-theme-duration-slide);
}

html.is-animating .swup-transition-main {
  opacity: 1;
  transform: translate3d(var(--swup-slide-theme-translate-backward), 0, 0);
}

html.is-animating.is-leaving .swup-transition-main {
  transform: translate3d(var(--swup-slide-theme-translate-forward), 0, 0);
}

@media screen and (max-width: 1200px) {
  :root {
    --spacing-xs: 5px;
    --spacing-m: 10px;

    --font-s: 12px;
    --font-m: 13.5px;
    --font-l: 20px;
    --font-xl: 28px;
    --font-xxl: 34px;
    --spacing-l: 20px;
    --font-ml: 18px;
  }

  header {
    gap: var(--spacing-xs);
    align-items: flex-end;
  }

  header h1 a {
    flex-direction: column;
  }

  header h1 a span {
    width: fit-content;
  }

  main {
    width: 100%;
  }

  .min-height-100 {
    min-height: auto;
  }

  .main-container {
    display: block;
  }

  .main-container main {
    width: 100%;
  }

  .left-placeholder {
    display: none;
  }

  section.banner-title {
    position: relative;
    padding: calc(var(--spacing-m) * 2) var(--spacing-m);
    /* margin-bottom: calc(var(--font-xl) + var(--spacing-m)); */
    z-index: 0;
  }

  section.banner-apply {
    position: fixed;
    bottom: 0;
    height: fit-content;
    background: none;
    max-width: unset;
  }

  .credits-section-images.pinned a img {
    max-height: 20px;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .mobile-header {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-xs);
  }

  .padding-bottom {
    padding-bottom: calc(2 * var(--spacing-m) + var(--font-xl));
  }

  #floating-div {
    display: none;
  }

  .banner-apply-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .credits-section-images.pinned ul {
    flex-wrap: nowrap;
  }

  .banner-apply-links ul {
    padding-top: 0;
  }

  /* ----- swup ----- */
  html {
    --swup-slide-theme-direction: 1;
    --swup-slide-theme-translate: 100%;
    --swup-slide-theme-duration-slide: 0.5s;
    --swup-slide-theme-translate-forward: calc(
      var(--swup-slide-theme-direction) * var(--swup-slide-theme-translate)
    );
    --swup-slide-theme-translate-backward: calc(
      -1 * var(--swup-slide-theme-translate-forward)
    );
  }

  html.swup-theme-reverse {
    --swup-slide-theme-direction: -1;
  }

  html.is-changing .swup-transition-main {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      transform var(--swup-slide-theme-duration-slide),
      opacity var(--swup-slide-theme-duration-slide);
  }

  html.is-animating .swup-transition-main {
    opacity: 1;
    transform: translate3d(0, var(--swup-slide-theme-translate-backward), 0);
    transition:
      transform var(--swup-slide-theme-duration-slide),
      opacity var(--swup-slide-theme-duration-slide);
  }

  html.is-animating.is-leaving .swup-transition-main {
    opacity: 1;
    transform: translate3d(
      0,
      calc(-1 * var(--swup-slide-theme-translate-forward)),
      0
    );
    transition:
      transform var(--swup-slide-theme-duration-slide),
      opacity var(--swup-slide-theme-duration-slide);
  }
}


/* ============================================================
   2027 edition — design overrides
   Figma: Web-organismo (file UKEqHNXbZVJFJDBSwdiOFM)
   ============================================================ */

/* The hairline belongs on pills and buttons only -- never on the big
   bg-light-1 content panel, which would draw a box round the whole page. */
header.header-2027 .desktop-nav a,
.mobile-header > a,
.mobile-language-switcher a,
.mobile-nav a,
.banner-apply-links nav a,
section.banner-title span {
  border: var(--border-hairline);
}

header.header-2027 .desktop-nav a.bg-dark,
.mobile-header > a.bg-dark,
.mobile-language-switcher a.bg-dark,
.mobile-nav a.bg-dark,
.banner-apply-links nav a.bg-dark {
  border-color: var(--color-light-2);
}

/* The title lock-up sits over the video and glows mint. */
section.banner-title span {
  border: var(--border-hairline);
  padding: 0 var(--spacing-xs);
}

section.banner-title span.banner-title-main {
  font-size: var(--font-xl);
  letter-spacing: -0.03em;
  box-shadow: 2px 10px 20px 5px var(--color-glow);
}

section.banner-title span.banner-title-sub {
  font-size: var(--font-ml);
  letter-spacing: -0.01em;
  background-color: var(--color-dark);
  color: var(--color-light-2);
  border-color: var(--color-light-2);
  box-shadow: 0 3px 5px 2px var(--color-glow);
}

section.banner-title a:hover span.banner-title-sub {
  background-color: var(--color-dark);
  color: var(--color-light-2);
}

/* 2027 drops the title from the header: it lives in the left column. */
header h1.visually-hidden-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Header nav starts at the left edge of the right-hand 50% panel.
   The header's own var(--spacing-m) padding is cancelled out because the
   percentage resolves against the nav box (viewport - 2 * spacing-m), so the
   items land exactly on the 50% line. The language switcher stays hard right. */
header.header-2027 {
  justify-content: flex-start;
}

header.header-2027 .desktop-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: calc(50% + 20px);
}

header.header-2027 .desktop-nav > ul.language-switcher {
  flex: 0 0 auto;
}

/* ----- box padding -----
   The design gives every white box room around its label: the About pill is
   107px wide around an 87px word at 30px type, and 37px tall. That is
   ~0.33em horizontally and ~0.12em vertically, so the padding scales with
   the type instead of being pinned to one viewport size. */
header.header-2027 .desktop-nav a,
.mobile-header > a,
.mobile-language-switcher a,
.mobile-nav a,
section.banner-title span,
.banner-apply-links nav a {
  padding: 0.12em 0.33em;
}

/* The title block is proportionally roomier: 647x116 around 599x99. */
section.banner-title span.banner-title-main {
  padding: 0.1em 0.3em;
}

/* Apply matches the title. Contact / Legal keep their own .medium size. */
section.banner-apply a {
  font-size: var(--font-xl);
}

/* Apply / Contact / Legal are white over the video in 2027, not panel grey. */
.banner-apply-links nav a.bg-light-1 {
  background-color: var(--color-light-2);
  border: var(--border-hairline);
}

.banner-apply-links nav a.bg-light-1:hover,
.banner-apply-links nav a.bg-dark {
  background-color: var(--color-dark);
  color: var(--color-light-2);
  border-color: var(--color-light-2);
}

/* ----- open call index (Open Call / Terms / Critical Encounters) ----- */
.open-call-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.open-call-index li {
  width: fit-content;
}

.open-call-index a {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  font-size: var(--font-l);
  letter-spacing: -0.01em;
  color: var(--color-dark);
  width: fit-content;
}

.open-call-index a:hover {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* The icon keeps its intrinsic 33.09px size from the design export. */
.open-call-index .open-call-index-icon {
  flex: 0 0 auto;
  display: block;
}

.open-call-index a[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

@media screen and (max-width: 1200px) {
  .open-call-index a {
    font-size: var(--font-m);
    gap: var(--spacing-xs);
  }

  .open-call-index .open-call-index-icon {
    transform: scale(0.7);
    transform-origin: left center;
  }

  header.header-2027 .desktop-nav {
    padding-left: 0;
  }
}

/* ----- uniform frame gutter -----
   The design insets the header, the title lock-up and the footer links by the
   same 40px. Percentage padding on the nav resolves against the nav box, so
   widening the header gutter leaves the 50% alignment untouched. */
header.header-2027 {
  padding: var(--spacing-l);
}

section.banner-title {
  padding: var(--spacing-l);
}


section.banner-apply .banner-apply-links ul {
  padding: var(--spacing-l);
}

/* ----- footer links share a baseline -----
   Apply is set much larger than Contact and Legal. As inline boxes with
   line-height 1.2 their half-leading scales with font-size, so the bordered
   boxes ended up on different bottom edges. Making them block boxes with
   line-height 1 lets align-items: flex-end do what it promises. */
section.banner-apply a {
  display: block;
  line-height: 1;
}

.banner-apply-links ul {
  align-items: flex-end;
}

.banner-apply-links ul li {
  line-height: 1;
  display: flex;
  align-items: flex-end;
}

/* ============================================================
   2027 about page
   Figma frame "case studies" (53:3812). Everything is open, text sits
   directly on the panel, no white highlight behind paragraphs.
   ============================================================ */

/* 2026 paints a light box behind every paragraph; 2027 does not.
   organismo-2027.js still wraps paragraph contents in a span, which is
   harmless once the background is cleared. */
main.about-2027 p span,
main.about-2027 .about-text p span {
  background-color: transparent;
}

/* Figma sets the intro at 30px on a 1920px canvas, but the body copy below it
   is scaled to --font-s here, so 30px left the intro looking oversized next to
   it. Dropped to the --font-m step to sit in the same scale. */
main.about-2027 .about-text {
  font-size: var(--font-m);
}

/* The intro's last paragraph carries margin-bottom from the base `main p`
   rule, which stacks on top of the heading's own margin-top and made the gap
   above larger than the one below. Drop it so the heading alone sets both. */
main.about-2027 .about-text > p:last-child {
  margin-bottom: 0;
}

/* Figma has equal air above and below "Case Studies:" (~40px at 1920). */
main.about-2027 .case-studies-heading {
  font-size: var(--font-ml);
  background-color: transparent;
  width: auto;
  margin-top: calc(var(--spacing-m) * 1.5);
  margin-bottom: calc(var(--spacing-m) * 1.5);
}

main.about-2027 .case-studies-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-m) * 2);
}

/* Scaled with the rest of the page: 42px on the 1920px canvas -> --font-ml. */
/* Title and subtitle sit in white boxes like every other label in the design
   (same 0.12em/0.33em padding formula and hairline as the nav pills), and the
   two are bound together: a tight gap under the title, a full gap under the
   subtitle, so the subtitle reads as part of the heading rather than as the
   first line of the entity credits below it. */
main.about-2027 .case-study-title {
  font-size: var(--font-ml);
  letter-spacing: -0.01em;
  background-color: var(--color-light-2);
  border: var(--border-hairline);
  padding: 0.12em 0.33em;
  width: fit-content;
  margin-bottom: var(--spacing-xs);
}

/* The credit block under each title: bold, small, tight. */
main.about-2027 .case-study-teaser {
  font-size: var(--font-s);
  /* font-weight: bold; */
  margin-bottom: var(--spacing-m);
}

main.about-2027 .case-study-teaser p {
  line-height: 1.25;
  margin-bottom: var(--spacing-xs);
}

main.about-2027 .case-study-teaser p.subtitle {
  font-weight: bold;
  background-color: var(--color-light-2);
  border: var(--border-hairline);
  padding: 0.12em 0.33em;
  width: fit-content;
  margin-bottom: var(--spacing-m);
}

/* "facilitated by" / "in collaboration with" are set regular against the
   bold entity names; "pulso" is italic. */
main.about-2027 .case-study-teaser .label {
  font-weight: normal;
}

main.about-2027 .case-study-teaser em {
  font-style: italic;
  font-weight: normal;
}

main.about-2027 .case-study-text {
  font-size: var(--font-s);
}

main.about-2027 .case-study-text p {
  line-height: 1.35;
  margin-bottom: var(--spacing-m);
}

/* Download white paper: icon plus plain label, no pill, no underline. */
main.about-2027 .case-study-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-m);
}

main.about-2027 .download-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-s);
  width: fit-content;
}

/* Only the label span: this must not match .download-link-image, whose white
   tile and full border would otherwise be stripped by it. */
main.about-2027 .download-link span:not(.download-link-image) {
  background-color: transparent;
  border-bottom: none;
}

main.about-2027 .download-link:hover span:last-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Match the Open Call index icon: a square white tile with a hairline rule.
   The 2026 base gives this element a 3px bottom border, no box padding and an
   svg at 100%/100%, so the arrow sat flush against the bottom edge and clipped
   it. Reset the border on all four sides, centre the glyph and inset it. */
main.about-2027 .download-link-image {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 1.45em;
  height: 1.45em;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.14em;
  line-height: 0;
  overflow: visible;
  background-color: var(--color-light-2);
  border: var(--border-hairline);
}

main.about-2027 .download-link-image svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Collaborators sits below a rule, same type scale as the case studies. */
main.about-2027 .credits-wrapper-section {
  border-top: 1.6px solid var(--color-dark);
}

main.about-2027 .credits {
  background-color: transparent;
}

main.about-2027 .credits-section-header {
  font-size: var(--font-s);
  background-color: transparent;
}

/* ----- harmonised collaborator logos -----
   The supplied marks range from 0.52:1 (portrait) to 8.37:1 (wide wordmark).
   Capping height alone made the wordmarks ~400px wide and the portrait marks
   ~25px, so each logo is instead fitted into one shared box: wide marks are
   limited by width, compact marks by height. Nothing is cropped or distorted. */
main.about-2027 .credits-section-images ul {
  align-items: center;
  row-gap: var(--spacing-m);
  column-gap: calc(var(--spacing-m) * 1.5);
}

main.about-2027 .credits-section-images li {
  display: flex;
  align-items: center;
  min-height: 52px;
}

main.about-2027 .credits-section-images a {
  display: flex;
  align-items: center;
}

main.about-2027 .credits-section-images a img {
  max-height: 52px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media screen and (max-width: 1200px) {
  main.about-2027 .credits-section-images li {
    min-height: 34px;
  }

  main.about-2027 .credits-section-images a img {
    max-height: 34px;
    max-width: 100px;
  }
}

/* ============================================================
   2027 mobile — Figma frame 309:5 (390x720)
   Title pill at the top, EN/ES beneath it on the right, then
   About / Open Call / Apply stacked full width, a Contact + Legal
   row, and the pinned logos at the foot.
   Sizes are expressed against the 390px design width so they scale
   down on narrower phones instead of overflowing.
   ============================================================ */
@media screen and (max-width: 1200px) {
  :root {
    /* Figma mobile uses a 23px gutter at 390px wide; expressed against the
       design width so it scales. The title block and the apply block both
       derive their width from this, so they stay flush with each other. */
    --spacing-l: min(23px, 5.9vw);

    --m-title: min(44px, 11.3vw);   /* 44px at 390 */
    --m-nav: min(40px, 10.3vw);     /* 40px at 390 */
    --m-lang: min(30px, 7.7vw);     /* 30px at 390 */
    --m-small: min(20px, 5.1vw);    /* 20px at 390 */
    --m-title-h: calc(var(--m-title) * 1.32);
    --m-gap: 13px;
  }

  /* ----- title pill, pinned to the top ----- */
  section.banner-title {
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: auto;
    padding: var(--spacing-l);
    z-index: 30;
  }

  section.banner-title a {
    width: 100%;
  }

  section.banner-title span.banner-title-main {
    width: 100%;
    height: var(--m-title-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--m-title);
    letter-spacing: -0.035em;
    padding: 0;
    box-shadow: 0 9px 12px -2px var(--color-glow);
  }

  /* The strapline is not part of the mobile design. */
  section.banner-title span.banner-title-sub {
    display: none;
  }

  /* The desktop nav is marked .desktop-only, but the rule that lays it out
     (header.header-2027 .desktop-nav) is more specific than .desktop-only's
     display:none, so it has to be hidden explicitly here. */
  header.header-2027 .desktop-nav {
    display: none;
  }

  /* ----- language switcher, directly under the title ----- */
  header.header-2027 {
    padding: var(--spacing-l);
    padding-top: calc(var(--spacing-l) + var(--m-title-h) + 10px);
    justify-content: flex-end;
    pointer-events: none;
  }

  header.header-2027 .mobile-header {
    margin-left: auto;
    pointer-events: all;
  }

  .mobile-language-switcher {
    display: flex;
    gap: var(--spacing-xs);
  }

  .mobile-language-switcher a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--m-lang) * 1.8);
    height: calc(var(--m-lang) * 1.24);
    font-size: var(--m-lang);
    padding: 0;
  }

  /* ----- stacked primary nav + contact row + logos ----- */
  section.banner-apply {
    height: auto;
    padding: var(--spacing-l);
    gap: var(--m-gap);
  }

  .banner-apply-links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--m-gap);
  }

  /* The uniform-gutter rule puts padding on this ul as well, which nested
     inside the section's own padding and made every button narrower than the
     title. Zeroed here at matching specificity so the two line up exactly. */
  section.banner-apply .banner-apply-links ul {
    padding: 0;
  }

  .mobile-stack-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--m-gap);
    padding: 0;
    width: 100%;
  }

  /* The desktop baseline fix makes every .banner-apply-links li a flex row
     with align-items: flex-end, and .banner-apply-links nav a adds pill
     padding. Both outrank a bare .mobile-stack-nav selector, so these use
     `ul li` / `ul li a` to match their specificity and win on source order. */
  .mobile-stack-nav ul li {
    display: block;
    width: 100%;
    line-height: 1;
  }

  .mobile-stack-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: var(--m-title-h);
    font-size: var(--m-title);
    line-height: 1;
    letter-spacing: -0.03em;
    padding: 0;
    border: var(--border-hairline);
  }

  /* Apply already appears in the stack above. */
  .banner-apply-links nav:not(.mobile-stack-nav) .apply-item {
    display: none;
  }

  .banner-apply-links nav:not(.mobile-stack-nav) ul {
    display: flex;
    flex-direction: row;
    gap: 17px;
    padding: 0;
    width: 100%;
  }

  .banner-apply-links nav:not(.mobile-stack-nav) ul li {
    flex: 1 1 0;
    display: block;
    line-height: 1;
  }

  .banner-apply-links nav:not(.mobile-stack-nav) ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: calc(var(--m-small) * 1.3);
    font-size: var(--m-small);
    line-height: 1;
    padding: 0;
    border: var(--border-hairline);
  }

  .pinned-logos {
    width: 100%;
  }

  .credits-section-images.pinned ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-m);
  }

  .credits-section-images.pinned a img {
    max-height: 36px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
  }
}

/* ============================================================
   2027 mobile — subpages
   On the landing page the apply banner is pinned to the viewport.
   Once a subpage is open the page scrolls, so it flows at the end of
   the content instead of covering it.
   ============================================================ */
@media screen and (max-width: 1200px) {
  body.organismo-subpage section.banner-apply {
    position: static;
    height: auto;
    width: 100%;
    margin-top: calc(var(--spacing-l) * 2);
  }

  /* The title stays pinned, so the content needs to clear it. */
  body.organismo-subpage .main-container main {
    padding-top: calc(var(--spacing-l) * 2 + var(--m-title-h));
  }

  body.organismo-subpage .main-container,
  body.organismo-subpage .main-container main {
    width: 100%;
  }

  body.organismo-subpage .left-placeholder {
    display: none;
  }

  /* ----- open call index ----- */
  .open-call-index a {
    font-size: var(--m-lang);
    gap: var(--spacing-m);
    line-height: 1.1;
  }

  .open-call-index .open-call-index-icon {
    transform: none;
  }
}

/* ============================================================
   2027 index subpage
   One collapsible <details> per edition, newest open by default.
   The summary rows reuse the Open Call index treatment: arrow icon
   plus plain label, no pill.
   ============================================================ */
.edition-index {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-m) * 1.5);
}

.edition-group summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  font-size: var(--font-l);
  letter-spacing: -0.01em;
  color: var(--color-dark);
  width: fit-content;
  cursor: pointer;
  list-style: none;
}

/* Hide the native disclosure triangle; the arrow asset is the affordance. */
.edition-group summary::-webkit-details-marker {
  display: none;
}

.edition-group summary::marker {
  content: "";
}

.edition-group summary:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.edition-group[open] summary .open-call-index-icon {
  transform: rotate(180deg);
}

/* Each edition holds fully rendered case studies, indented under its header
   and spaced like the about page's list. */
.edition-case-studies {
  margin: calc(var(--spacing-m) * 1.5) 0 0 calc(33px + var(--spacing-m));
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-m) * 2);
}

@media screen and (max-width: 1200px) {
  .edition-group summary {
    font-size: var(--m-lang);
    gap: var(--spacing-m);
    line-height: 1.1;
  }

  /* Indent costs too much width on a phone. */
  .edition-case-studies {
    margin-left: 0;
  }
}

/* ----- download icon -----
   The base rules give this a 3px bottom-only border with the svg at 100%/100%
   and no inset, so the glyph ran into the frame and clipped it. Declared last
   and unscoped so it wins regardless of which page renders it. */
.download-link-image {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.45em;
  height: 1.45em;
  aspect-ratio: 1 / 1;
  padding: 0.14em;
  line-height: 0;
  vertical-align: middle;
  overflow: visible;
  background-color: #ffffff;
  border: 1.6px solid var(--color-dark);
  border-bottom: 1.6px solid var(--color-dark);
}

.download-link-image svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The video keeps the base 100vw. 100% was right only while a scrollbar
   gutter was reserved; without one it is the viewport MINUS the scrollbar, so
   opening a subpage (which starts scrolling) narrowed the box and object-fit
   re-centred the frame inside it -- the video appeared to slide left. A fixed
   element adds no scrollable overflow, so 100vw costs nothing here and stays
   put whether or not a scrollbar is showing, like the rest of the layout. */

/* ----- a scroll-stable column divide -----
   `%` resolves against the viewport minus the scrollbar, so a 50% split moved
   left by half the scrollbar width whenever a subpage started scrolling. `vw`
   is measured against the window and does not change, so the divide is pinned
   at 50vw and the right panel simply takes whatever is left. Its left edge --
   where the eye actually tracks -- stays put; only its right edge moves. */
.left-placeholder {
  width: 50vw;
  flex: 0 0 50vw;
}

.main-container main {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* The header nav aligns to the same divide, so it is anchored the same way.
   The header's own gutter is subtracted because this padding sits inside it. */
header.header-2027 .desktop-nav {
  /* Sizing the nav box in vw rather than % also pins its right edge, which is
     where justify-content: space-between puts the language switcher -- so ES/EN
     stops sliding when a scrollbar appears. The right edge lands at
     100vw - 40px, clear of a ~15px scrollbar, so nothing hides beneath it. */
  width: calc(100vw - 2 * var(--spacing-l));
  padding-left: calc(50vw - var(--spacing-l) + 20px);
  /* The nav is a flex item, so the width above is only a basis: the default
     flex-shrink: 1 shrank it back to the header's content box, which does not
     include the scrollbar, and ES/EN slid left the moment a subpage started
     scrolling. Pinned, the right edge stays at 100vw - 40px. It overhangs the
     header's content box by the scrollbar width, but that lands inside the
     header's own 40px right padding, so nothing overflows the viewport. */
  flex-shrink: 0;
}

/* The treat mark sits taller in its artwork than the other logos, so at the
   shared 52px cap it reads noticeably larger. Trimmed ~23% to sit with them. */
main.about-2027 .credits-section-images a img[src$="treat.png"] {
  max-height: 40px;
}

/* ----- per-logo optical sizing -------------------------------------------
   The shared cap is max-height 52px / max-width 150px, but every wide
   wordmark hits the WIDTH first, so its rendered height falls out of the
   aspect ratio: Creative Intelligence Lab (7.17:1) landed at 20.9px while
   HEAT (3.61:1) landed at 41.6px -- a 2x spread for logos meant to read as
   equals. These override the width so each one resolves to a chosen height.
   Values are <target height> x <aspect ratio>. */
/* Thyssen and TBA21-Academy sit side by side as the two initiators, so they
   share one height. */
main.about-2027 .credits-section-images a img[src$="organismo2027-thyssen.png"] {
  max-width: 305px;   /* 8.01:1 -> 38px tall */
  max-height: 38px;
}

main.about-2027 .credits-section-images a img[src$="tba21-academy-logo.png"] {
  max-width: 147px;   /* 3.86:1 -> 38px tall */
  max-height: 38px;
}

main.about-2027 .credits-section-images a img[src$="organismo2027-parque-de-las-ciencias.svg"] {
  max-width: 215px;   /* 6.71:1 -> 32px tall */
  max-height: 32px;
}

main.about-2027 .credits-section-images a img[src$="organismo2027-creative-intelligence-lab-bsc.svg"] {
  max-width: 230px;   /* 7.17:1 -> 32px tall */
  max-height: 32px;
}

main.about-2027 .credits-section-images a img[src$="FECYT-BN 1.png"] {
  max-width: 214px;   /* 6.68:1 -> 32px tall */
  max-height: 32px;
}


main.about-2027 .credits-section-images a img[src$="organismo2027-heat-upm.png"] {
  max-width: 101px;   /* 3.61:1 -> 28px tall */
  max-height: 28px;
}


/* Mobile keeps the same proportions against the 34px cap (x0.654). */
@media screen and (max-width: 1200px) {
  main.about-2027 .credits-section-images a img[src$="organismo2027-thyssen.png"] {
    max-width: 201px;
    max-height: 25px;
  }

  main.about-2027 .credits-section-images a img[src$="tba21-academy-logo.png"] {
    max-width: 97px;
    max-height: 25px;
  }

  main.about-2027 .credits-section-images a img[src$="organismo2027-parque-de-las-ciencias.svg"] {
    max-width: 141px;
    max-height: 21px;
  }

  main.about-2027 .credits-section-images a img[src$="organismo2027-creative-intelligence-lab-bsc.svg"] {
    max-width: 151px;
    max-height: 21px;
  }

  main.about-2027 .credits-section-images a img[src$="FECYT-BN 1.png"] {
    max-width: 140px;
    max-height: 21px;
  }


  main.about-2027 .credits-section-images a img[src$="organismo2027-heat-upm.png"] {
    max-width: 65px;
    max-height: 18px;
  }

}

/* ----- centre the Organismo box in the viewport -----
   The inherited rule pins this to the top half (bottom: 50%; height: 50%) and
   centres within it, which puts the box at roughly a quarter of the way down.
   Full height instead, so it sits on the vertical centre of the screen. */
section.banner-title {
  top: 0;
  bottom: auto;
  /* Not 100%: a percentage height resolves against the containing block, and
     Swup puts a transform on the transition wrappers during a page change,
     which makes an ancestor the containing block for this fixed element. The
     wrapper then came out shorter than the screen and the box centred inside
     that. A viewport unit is immune to it. */
  height: 100vh;
  min-height: 100vh;
  justify-content: center;
}

/* Centring the link centres the pill *and* the strapline beneath it, which
   leaves the Organismo box sitting above the midpoint. Taking the strapline
   out of flow makes the link exactly as tall as the box, so the box itself
   lands on the vertical centre and the strapline hangs below it. */
section.banner-title a {
  position: relative;
}

section.banner-title span.banner-title-sub {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  white-space: nowrap;
}

/* ----- mobile: the title sits at the top ---------------------------------
   Figma 309:5 puts the title box at the top of the screen (y=19) with the
   EN/ES switcher directly beneath it (y=87), and 309:116 shows the same box
   above the content on a subpage. It is not centred in the viewport on either,
   so there is nothing to centre here -- the earlier rule at the top of the
   file already pins it to the top. All this block does is undo the desktop
   sizing that would otherwise reach the phone. */
@media screen and (max-width: 1200px) {
  /* The desktop centring rule is unscoped and sits after the mobile ones, so
     its full-viewport box carries into the phone layout and covers the screen.
     Height has to come back to auto here or the section swallows the page. */
  section.banner-title {
    height: auto;
    min-height: 0;
    bottom: auto;
  }

  /* `section.banner-title` (0-1-1) outranks a bare `.desktop-only` (0-1-0),
     so the base display:flex would keep the box visible on a phone wherever
     the markup asks for it to be hidden. */
  section.banner-title.desktop-only {
    display: none;
  }

  /* the strapline is hidden on mobile, so the box is the whole link */
  section.banner-title a {
    width: 100%;
  }
}