/* Rui Leitão – overrides on top of the Rayo template */

/* hero: round, slowly rotating artwork */
.hero-08-headline__image img {
  width: 100%;
  border-radius: 50%;
}

/* project cards: keep the 4:3 project covers readable */
.mxd-projects-stack__image {
  background-color: #161616;
}

/* homepage pinned projects: frames follow the 4:3 project covers instead of tall portrait crops */
.mxd-project-item__media {
  height: auto !important;
  aspect-ratio: 4 / 3;
}
.mxd-project-item__preview {
  height: 100% !important;
  background-size: cover;
  background-position: center;
}

/* about: show the whole graphic instead of cropping it */
.mxd-block__image.contain img {
  object-fit: contain;
  /* 125px smaller than the full box, centred */
  width: calc(100% - 125px);
  height: calc(100% - 125px);
  margin: 62.5px auto;
}

/* project pages: media cards keep the artwork's own proportions (no cropping) */
.mxd-project-cards__item.auto,
.mxd-project-cards__inner.auto {
  height: auto !important;
  overflow: hidden;
}
.mxd-project-cards__inner.auto img,
.mxd-project-cards__inner.auto video {
  display: block;
  width: 100%;
  height: auto;
}
.mxd-project__paragraph a {
  word-break: break-word;
}

/* Figure A (project-vti): mechanic → outcome chord diagram */
.ol-figure {
  --olf-surface: var(--base-tint);
  --olf-node: #d3c6b1;
  --olf-c1: #522174; --olf-c2: #006fa2; --olf-c3: #ffcc00; --olf-c4: #b9998a;
  --olf-c5: #7ad375; --olf-c6: #00b2f1; --olf-c7: #ec722e; --olf-c8: #df2227;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.4rem 2rem;
  margin: 0;
  background-color: var(--base-tint);
  border-radius: var(--_radius-m);
}
@media (prefers-color-scheme: dark) {
  :root:not([color-scheme=light]) .ol-figure {
    --olf-c1: #9b6cc4;
  }
}
:root[color-scheme=dark] .ol-figure {
  --olf-c1: #9b6cc4;
}
@media only screen and (min-width: 768px) {
  .ol-figure { padding: 4rem; }
}
.ol-figure__eyebrow {
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t-muted);
}
.ol-figure__title { margin: 0; }
.ol-figure__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  font-size: 1.4rem;
  color: var(--t-medium);
}
.ol-figure__toggle {
  display: inline-flex;
  border: 1px solid var(--st-muted);
  border-radius: 10rem;
  overflow: hidden;
}
.ol-figure__toggle button {
  font: inherit;
  padding: .7rem 1.6rem;
  border: 0;
  background: transparent;
  color: var(--t-medium);
  cursor: pointer;
}
.ol-figure__toggle button[aria-pressed="true"] {
  background: var(--base-opp);
  color: var(--t-opp-bright);
}
.ol-figure__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  font-size: 1.4rem;
  color: var(--t-medium);
}
.ol-figure__legend span { display: inline-flex; align-items: center; gap: .6rem; }
.ol-figure__legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ol-figure__scroll { overflow-x: auto; }
.ol-figure svg {
  display: block;
  width: 100%;
  min-width: 560px;
  max-width: 760px;
  margin: 0 auto;
}
.ol-figure svg text {
  fill: var(--t-bright);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
}
.ol-figure svg path { transition: opacity .15s; }
.ol-figure svg .dim { opacity: .12; }
.ol-figure figcaption {
  font-size: 1.4rem;
  color: var(--t-medium);
  max-width: 72ch;
}
.ol-figure__tip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  max-width: 280px;
  padding: .8rem 1rem;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--t-bright);
  background: var(--base);
  border: 1px solid var(--st-muted);
  border-radius: .8rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.ol-figure__tip b { display: block; margin-bottom: 2px; }
.ol-figure__tip .muted { color: var(--t-medium); }
@media (prefers-reduced-motion: reduce) {
  .ol-figure svg path { transition: none; }
}

/* header logo without the icon */
.mxd-logo__text {
  margin-left: 0;
}

/* homepage hero title: DESIGN RESEARCH & DEVELOPMENT image */
.hero-title-img {
  margin: 0;
  line-height: 0;
}
/* keep the hero as tall as the rotating zoetrope now that the title is a single short image */
.hero-08-headline__title {
  mix-blend-mode: normal; /* no "difference" blend: the title image shows in its own colours over the zoetrope */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(50vw + 175px);
}
@media only screen and (min-width: 768px) {
  .hero-08-headline__title { min-height: calc(28vw + 175px); }
}
@media only screen and (min-width: 1600px) {
  .hero-08-headline__title { min-height: calc(24vw + 175px); }
}
.hero-title-img img {
  display: block;
  width: calc(100vw - 6rem);
  height: auto;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .hero-title-img img { width: min(72vw, 1100px); }
}

/* homepage hero: rotating zoetrope image, 175px larger than the template size */
.hero-08-headline__image { width: calc(50vw + 175px); }
@media only screen and (min-width: 768px) {
  .hero-08-headline__image { width: calc(28vw + 175px); }
}
@media only screen and (min-width: 1600px) {
  .hero-08-headline__image { width: calc(24vw + 175px); }
}

/* header logo: DR&D image */
.mxd-logo__img {
  display: block;
  width: auto;
  height: 3.6rem;
}
@media only screen and (min-width: 768px) {
  .mxd-logo__img { height: 4.4rem; }
}

/* menu & hamburger: the button's base expands into the open menu panel */
.hamburger__base {
  background-color: #7FD0FF;
}
/* keep the menu text and hamburger lines dark in both themes, for contrast on #7FD0FF */
.hamburger__line { background-color: #161616; }
.mxd-menu__contain .main-menu__link,
.mxd-menu__contain .main-menu__link .btn-caption { color: #161616; }
.mxd-menu__caption,
.menu-promo__caption,
.mxd-menu__data,
.mxd-menu__data p,
.mxd-menu__data a { color: #303030; }

/* header controls (light/dark switch + Say Hello): original line look, in blue #7FD0FF (matches the logo) */
.mxd-header__controls .mxd-color-switcher,
.mxd-header__controls .mxd-color-switcher i {
  color: #7FD0FF;
}
.mxd-header__controls .btn-outline {
  border-color: #7FD0FF;
  color: #7FD0FF;
}
.mxd-header__controls .btn-outline .btn-caption,
.mxd-header__controls .btn-outline i {
  color: #7FD0FF;
}

/* project text: the template resets <em> to upright; restore italics */
.mxd-project__paragraph em,
.inner-headline__paragraph em {
  font-style: italic;
}

/* footer: the three info columns 200px shorter than the template's 650px */
@media only screen and (min-width: 1200px) {
  .footer-blocks__column { height: 450px; }
}

/* project banner that shows the whole image (no parallax zoom); set aspect-ratio inline to match the image */
.mxd-divider.whole-image-frame {
  height: auto !important;
}
.mxd-divider__image.whole-image {
  height: auto !important;
  background-size: cover;
  background-position: center;
}

/* Design for the Ocean – student work cards (services-card look, one contained image on the right) */
.student-cards .mxd-services-cards__title p {
  font-size: 3.6rem;
}
.student-card__image {
  margin-top: 3.4rem;
  border-radius: 1.6rem;
  overflow: hidden;
}
.student-card__image img {
  display: block;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1199px) {
  .student-cards .mxd-services-cards__item { height: auto; }
}
@media only screen and (min-width: 768px) {
  .student-cards .mxd-services-cards__title p { font-size: 4.6rem; }
}
@media only screen and (min-width: 1200px) {
  .student-card__image {
    position: absolute;
    top: 50%;
    right: 4rem;
    width: 34%;
    margin-top: 0;
    transform: translateY(-50%);
    z-index: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .student-cards .mxd-services-cards__item { height: 440px; }
}
@media only screen and (min-width: 1600px) {
  .student-cards .mxd-services-cards__item { height: 580px; }
  .student-cards .mxd-services-cards__title p { font-size: 5.6rem; }
  .student-card__image { width: 34%; right: 5rem; }
}

/* section headings with one long word ("Communications"): shrink on laptop widths so the word never splits */
@media only screen and (min-width: 1200px) {
  .mxd-project__subtitle h2.fit-long-word {
    font-size: min(7rem, 4.4vw);
  }
}

/* slight zoom inside the card (~50px on a half-width card) – card size unchanged, edges cropped */
.mxd-project-cards__inner.zoom-in-slight img {
  transform: scale(1.063);
}
/* lighter zoom for full-width slides (just enough to hide the edge) */
.mxd-project-cards__inner.zoom-in-light img {
  transform: scale(1.02);
}

/* two cards stacked in one column (VTI heartless video + process image): fill the row height, same 30px gap as the columns */
.mxd-project-cards__item.stack-col {
  display: flex;
  flex-direction: column;
}
.mxd-project-cards__item.stack-col .stack-below {
  flex: 1 1 auto;
  margin-top: 30px;
}
.mxd-project-cards__item.stack-col .stack-below img,
.mxd-project-cards__item.stack-col .stack-below video {
  height: 100%;
  object-fit: cover;
}

/* project info list: breathing space between the two columns so long names don't touch */
.mxd-data-list__column {
  padding-right: 30px;
}
/* stacked column whose cards share the height of the neighbouring card (desktop only) */
@media only screen and (min-width: 1200px) {
  .mxd-project-cards__item.stack-col.stack-fill .mxd-project-cards__inner {
    flex: 1 1 0;
    min-height: 0;
  }
  .mxd-project-cards__item.stack-col.stack-fill .mxd-project-cards__inner img,
  .mxd-project-cards__item.stack-col.stack-fill .mxd-project-cards__inner video {
    height: 100%;
    object-fit: cover;
  }
}

/* homepage service card filled with an image (Ghost nets) */
.mxd-services-cards__inner.card-bg-image {
  position: relative;
  overflow: hidden;
  background-color: #2b303d;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}
.mxd-services-cards__inner.card-bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 23, 31, 0.85) 0%, rgba(20, 23, 31, 0.7) 45%, rgba(20, 23, 31, 0) 75%);
}
.mxd-services-cards__inner.card-bg-image > *:not(.mxd-services-cards__controls) {
  position: relative;
  z-index: 1;
}
.mxd-services-cards__inner.card-bg-image > .mxd-services-cards__controls {
  z-index: 2;
}
.mxd-services-cards__inner.card-bg-image .opposite,
.mxd-services-cards__inner.card-bg-image .t-opposite {
  color: #ffffff;
}
.mxd-services-cards__inner.card-bg-image .tag-outline-opposite {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}
@media only screen and (max-width: 1199px) {
  .mxd-services-cards__inner.card-bg-image {
    background-size: cover;
    background-position: center;
  }
  .mxd-services-cards__inner.card-bg-image::before {
    background: rgba(20, 23, 31, 0.72);
  }
}

/* shorter homepage service cards (Ghost nets + Ocean literacy row) */
@media only screen and (min-width: 768px) {
  .mxd-services-cards__item.card-short { height: 340px; }
  /* no room for the corner illustration in the shorter card */
  .mxd-services-cards__item.card-short .mxd-services-cards__image { display: none; }
}
@media only screen and (min-width: 1600px) {
  .mxd-services-cards__item.card-short { height: 440px; }
}

/* Parallax banner 75px shorter than the template default */
.mxd-divider.divider-minus-75 { height: 385px; }
@media only screen and (min-width: 768px) { .mxd-divider.divider-minus-75 { height: 525px; } }
@media only screen and (min-width: 1200px) { .mxd-divider.divider-minus-75 { height: 685px; } }
@media only screen and (min-width: 1600px) { .mxd-divider.divider-minus-75 { height: 855px; } }
/* Visual explorations banner: raise the image 50px inside its frame */
.mxd-divider__image.shift-up-50 { margin-top: -50px; }
/* Space between consecutive intro paragraphs in the page headline */
.inner-headline__paragraph p + p { margin-top: 1em; }
/* Image group that ends like a section (same bottom space as a project block) */
.mxd-project__block.no-margin.section-gap-bottom { margin-bottom: 13.1rem; }
@media only screen and (min-width: 768px) { .mxd-project__block.no-margin.section-gap-bottom { margin-bottom: 15.1rem; } }
@media only screen and (min-width: 1600px) { .mxd-project__block.no-margin.section-gap-bottom { margin-bottom: 19rem; } }
/* when an image group continues after a section gap, drop the row spacing so the gap matches the section end */
.mxd-project__block.section-gap-bottom + .mxd-project__block > .mxd-project-cards { margin-top: -30px; }

/* homepage Visual explorations card: light image background (plastic fish) */
.mxd-services-cards__inner.card-bg-image.card-bg-light { background-color: #d3c5b2; }
.mxd-services-cards__inner.card-bg-image.card-bg-light::before {
  background: linear-gradient(90deg, rgba(211,197,178,0.92) 0%, rgba(211,197,178,0.75) 45%, rgba(211,197,178,0) 70%);
}
.card-bg-light .mxd-services-cards__title p,
.card-bg-light .mxd-services-cards__info p { color: #1f2430; }
.card-bg-light .tag.tag-outline { color: #1f2430; border-color: rgba(31,36,48,0.55); }
@media (max-width: 1199px) {
  .mxd-services-cards__inner.card-bg-image.card-bg-light::before { background: rgba(211,197,178,0.8); }
}
@media (min-width: 1200px) {
  .mxd-services-cards__inner.card-bg-image.card-bg-light { background-size: auto 78%; background-position: right 24px bottom 18px; }
  .mxd-services-cards__inner.card-bg-image.card-bg-light::before { background: linear-gradient(90deg, rgba(211,197,178,0.9) 0%, rgba(211,197,178,0.6) 50%, rgba(211,197,178,0) 62%); }
}
/* homepage cards: move both images 100px in from the right edge */
@media (min-width: 1200px) {
  .mxd-services-cards__inner.card-bg-image { background-position: right 100px center; }
  .mxd-services-cards__inner.card-bg-image.card-bg-light { background-position: right 124px bottom 18px; }
}
@media (min-width: 1200px) {
  /* fade the Ghost nets image's lighter right edge into the card colour */
  .mxd-services-cards__inner.card-bg-image:not(.card-bg-light)::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(270deg, #2b303d 0, #2b303d 100px, rgba(43,48,61,0) 170px);
  }
}
/* Ghost nets home image is wide (16:9): also fade its left edge into the card */
@media (min-width: 1200px) {
  .mxd-services-cards__inner.card-bg-image:not(.card-bg-light)::after {
    background:
      linear-gradient(270deg, #2b303d 0, #2b303d 100px, rgba(43,48,61,0) 170px),
      linear-gradient(90deg, #2b303d calc(100% - 704px), rgba(43,48,61,0) calc(100% - 584px));
  }
}
@media (min-width: 1600px) {
  .mxd-services-cards__inner.card-bg-image:not(.card-bg-light)::after {
    background:
      linear-gradient(270deg, #2b303d 0, #2b303d 100px, rgba(43,48,61,0) 170px),
      linear-gradient(90deg, #2b303d calc(100% - 882px), rgba(43,48,61,0) calc(100% - 762px));
  }
}
/* homepage cards without images: keep the colours, drop overlays and fades */
.mxd-services-cards__inner.card-bg-image.no-card-image { background-image: none !important; }
.mxd-services-cards__inner.card-bg-image.no-card-image::before,
.mxd-services-cards__inner.card-bg-image.no-card-image::after { display: none !important; }
/* About: handwritten signature after the intro text (black ink, inverted to white in dark mode) */
.about-signature { display: block; width: 107px; height: auto; margin-top: 2.4rem; }
[color-scheme="dark"] .about-signature { filter: invert(1); }
/* homepage marquee: the "About Me" words replaced by the 3D fish (transparent PNG), same sliding motion */
.marquee__item .marquee__fish {
  display: block;
  width: auto;
  height: clamp(70px, 10vw, 150px);
  object-fit: contain;
}
/* room between the fish in the marquee (30px → 160px) */
.marquee__item .marquee__fish { margin-inline: 65px; }
/* footer: UN SDG icons in place of the big "ruileitão" name, centred */
.mxd-footer__fullwidth-text .mxd-footer__sdg {
  display: block;
  width: 65%; /* scaled down proportionally: about 75px less in height than full width */
  max-width: 1040px;
  height: auto;
  margin: 0 auto;
  position: relative;
  top: -10px; /* nudged 10px up */
}

/* site colour: replace the template's lime #DDF160 with sky blue #7FD0FF
   (dark mode accent: text selection, scrollbar, footer counter; light mode "additional") */
:root {
  --accent--dark: #7FD0FF;
  --accent-rgb--dark: 127, 208, 255;
  --additional--light: #7FD0FF;
  --additional-rgb--light: 127, 208, 255;
}

/* Phones: the spinning zoetrope in the homepage hero is wider than the screen,
   which made the whole page pan sideways (and the burger appear to move). Clip it. */
.mxd-hero-08 { overflow-x: clip; }

/* Phones: show the SDG icons a bit larger in the footer */
@media only screen and (max-width: 767px) {
  .mxd-footer__fullwidth-text .mxd-footer__sdg { width: 85%; }
}

/* Phones: about graphic a bit larger (50px smaller than its box instead of 125px) */
@media only screen and (max-width: 767px) {
  .mxd-block__image.contain img {
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    margin: 25px auto;
  }
}

/* homepage project tags: outline pills like the "Say Hello" button (blue line, no fill) */
.mxd-project-item__tags .tag {
  background-color: transparent;
  border: 2px solid #7FD0FF;
  color: #7FD0FF;
}