/*
 * Final requested website refinements.
 * Loaded after all older page-specific styles.
 */

/* ==========================================================
   1. HOME HERO — 25% SHORTER
   Original desktop ratio: 10 / 3.
   New height = 75% of original -> ratio 40 / 9.
   ========================================================== */

.hero {
  aspect-ratio: 40 / 9 !important;
  min-height: 0 !important;
  background-position: var(--hero-position) !important;
  background-size: cover !important;
}

/* ==========================================================
   1b. HOME NAVIGATION ART — 25% LARGER
   The live page contains six tiles, so all six are enlarged
   consistently.
   ========================================================== */

.navigation-grid {
  /* Compensates for the upward growth of scaled artwork. */
  margin-top: 96px !important;
}

.navigation-grid .navigation-tile a {
  font-size: 1.275rem !important;
}

.navigation-grid .navigation-tile img {
  transform: scale(1.25) !important;
  transform-origin: center bottom !important;
}

.navigation-grid .navigation-tile:hover img,
.navigation-grid .navigation-tile:focus-within img {
  transform: translateY(-3px) scale(1.25) !important;
}

/* ==========================================================
   3. RESEARCH INTRODUCTION
   Illustration on left, three-paragraph research statement
   on right.
   ========================================================== */

.r5-header.research-intro-header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 66px !important;
}

.research-intro-layout {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.82fr)
    minmax(0, 1.18fr);
  gap: 58px;
  align-items: center;
  width: 100%;
}

.research-intro-illustration {
  display: flex;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  justify-self: start;
  margin: 0;
}

.research-intro-illustration img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 390px;
  object-fit: contain;
  object-position: center;
}

.research-intro-copy {
  min-width: 0;
}

.research-intro-copy .r5-lead {
  max-width: none;
}

.research-intro-copy .r5-intro {
  max-width: none;
}

.research-intro-copy .research-programme-note {
  max-width: none;
  margin: 0.85rem 0 0;
  color: #536068;
  font-size: 0.87rem;
  line-height: 1.64;
}

/* ==========================================================
   4. PUBLICATIONS
   Smaller outside gutters and narrower illustration column
   give substantially more horizontal room to publication
   titles now that year navigation is gone.
   ========================================================== */

.publications-main.container {
  /*
   * Global gutter is 64px total. 51.2px is exactly 20% less.
   */
  width: min(calc(100% - 51.2px), 1500px) !important;
}

.publications-layout {
  grid-template-columns:
    minmax(270px, 25%)
    minmax(0, 75%) !important;
  gap: 50px !important;
}

.publications-sidebar {
  min-width: 0;
}

.publications-illustration {
  max-width: 400px !important;
  margin-top: 0 !important;
}

.publications-scholar-note {
  max-width: 410px;
  margin: 0 0 1.2rem;
  color: #536068;
  font-size: 0.74rem;
  line-height: 1.52;
}

.publications-scholar-note a {
  font-weight: 600;
}

/* ==========================================================
   5. SOFTWARE INTRODUCTION
   Text on left, software illustration on right.
   ========================================================== */

.software-intro-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 360px);
  gap: 56px;
  align-items: center;
  margin: 0 0 2.25rem;
}

.software-intro-copy {
  min-width: 0;
}

.software-intro-copy .software-lead {
  max-width: none;
}

.software-intro-copy .software-introduction {
  max-width: none;
  margin-bottom: 0;
}

.software-intro-illustration {
  display: flex;
  width: 100%;
  max-width: 360px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  margin: 0;
}

.software-intro-illustration img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 315px;
  object-fit: contain;
  object-position: center;
}

/* ==========================================================
   7. MOBILE — HEADER ALWAYS AVAILABLE
   ========================================================== */

@media (max-width: 767.98px) {
  html {
    scroll-padding-top: 76px;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .site-nav {
    inset: 68px 0 0 !important;
    z-index: 1001 !important;
  }

  /* Hero remains exactly 25% shorter than previous 220px. */
  .hero {
    aspect-ratio: auto !important;
    min-height: 165px !important;
  }

  .research-intro-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .research-intro-illustration {
    width: min(100%, 500px);
    max-width: 500px;
    justify-self: center;
  }

  .research-intro-copy {
    width: 100%;
  }

  .software-intro-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .software-intro-illustration {
    width: min(100%, 390px);
    max-width: 390px;
    justify-self: center;
  }

  .publications-main.container {
    width: min(calc(100% - 22.4px), 1500px) !important;
  }

  .publications-layout {
    display: flex !important;
    flex-direction: column;
    gap: 30px !important;
  }

  .publications-scholar-note {
    max-width: 100%;
  }
}

/*
 * On very narrow phones a literal 1.25 transform would make
 * a full-width illustration overflow the viewport. Increase
 * the available image box instead and keep it inside the screen.
 */
@media (max-width: 519.98px) {
  .navigation-grid {
    margin-top: 72px !important;
  }

  .navigation-grid .navigation-tile img {
    width: 100% !important;
    max-width: 412px !important;
    height: 275px !important;
    transform: none !important;
  }

  .navigation-grid .navigation-tile:hover img,
  .navigation-grid .navigation-tile:focus-within img {
    transform: translateY(-3px) !important;
  }

  .navigation-grid .navigation-tile a {
    font-size: 1.275rem !important;
  }
}

/* VISUAL-REFINEMENT-V3-START */

/* ==========================================================
   HOME HERO

   ONE image only.

   Keep the requested 25%-reduced banner height and preserve
   the full edge-to-edge width.

   Because the original image is much taller than the banner,
   some vertical cropping is unavoidable with background-size:
   cover. Anchor the image to the TOP so all cropping happens
   from the unattractive bottom portion rather than the top.
   ========================================================== */

.hero {
  position: relative !important;
  width: 100% !important;

  aspect-ratio: 40 / 9 !important;
  min-height: 0 !important;

  overflow: hidden !important;

  background-image: url("home/hero.png") !important;
  background-size: cover !important;

  /* Preserve the top; crop the bottom. */
  background-position: center top !important;

  background-repeat: no-repeat !important;

  border-bottom: 1px solid #dce1e8 !important;
}

/*
 * Explicitly kill the previous second-image overlay.
 * This guarantees there can never be two hero images.
 */
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}


/* ==========================================================
   HOME SIX PICTURES

   The previous positive top margins did not solve the visual
   gap. Move the entire six-picture section upward.

   The original combined whitespace was roughly 80–100px.
   This removes approximately 70% of that visual separation.
   ========================================================== */

.home-information {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.navigation-grid.container {
  width: min(calc(100% - 32px), 1500px) !important;
  max-width: none !important;

  /*
   * Negative margin deliberately pulls the entire image/label
   * row upward toward the content above.
   */
  margin-top: -58px !important;
  margin-bottom: 12px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: 0 !important;
}

.navigation-grid .tile-grid {
  position: relative !important;
  top: 0 !important;

  display: grid !important;
  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;

  column-gap: 22px !important;
  row-gap: 36px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: end !important;
}

.navigation-grid .navigation-tile {
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  border: 0 !important;
  overflow: visible !important;
}

.navigation-grid .navigation-tile a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 6px !important;

  font-size: 1.275rem !important;
  line-height: 1.15 !important;

  transform: none !important;
}

.navigation-grid .navigation-tile img {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  height: 281px !important;

  margin: 0 auto 8px !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center bottom !important;

  transform: none !important;
}

.navigation-grid .navigation-tile:hover img,
.navigation-grid .navigation-tile:focus-within img {
  transform: translateY(-3px) !important;
}


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

   Keep the almost edge-to-edge Research page so the text has
   room, but reduce the illustration from ~1040px to ~520px.
   Since the SVG keeps its aspect ratio, height is reduced by
   the same factor automatically.
   ========================================================== */

@media (min-width: 1101px) {

  #main.r5-main {
    width: min(calc(100% - 20px), 1760px) !important;
    max-width: none !important;

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

  .r5-header.research-intro-header {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 60px !important;
  }

  .research-intro-layout {
    display: grid !important;

    /*
     * Illustration returned to about half its previous width.
     * Remaining horizontal space goes to the paragraphs.
     */
    grid-template-columns:
      minmax(420px, 520px)
      minmax(0, 1fr) !important;

    gap: 48px !important;

    width: 100% !important;

    align-items: center !important;
  }

  .research-intro-illustration {
    display: flex !important;

    width: 100% !important;
    max-width: 520px !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    align-items: center !important;
    justify-content: center !important;
    justify-self: start !important;

    background:
      linear-gradient(
        180deg,
        rgba(249, 251, 255, 0.96),
        rgba(243, 247, 255, 0.92)
      ) !important;

    border: 1px solid #e2e8f3 !important;
    border-radius: 10px !important;

    box-shadow:
      0 6px 18px rgba(36, 51, 60, 0.055) !important;
  }

  .research-intro-illustration img {
    display: block !important;

    width: 100% !important;
    max-width: 500px !important;

    height: auto !important;
    max-height: 270px !important;

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

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .research-intro-copy {
    min-width: 0 !important;
    width: 100% !important;
  }

  .research-intro-copy .r5-lead,
  .research-intro-copy .r5-intro,
  .research-intro-copy .research-programme-note {
    width: 100% !important;
    max-width: none !important;
  }
}


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

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

  .navigation-grid.container {
    width: min(calc(100% - 40px), 1220px) !important;
    margin-top: -40px !important;
  }

  .navigation-grid .tile-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    column-gap: 36px !important;
    row-gap: 40px !important;
  }

  .navigation-grid .navigation-tile img {
    height: 306px !important;
  }
}


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

@media (min-width: 768px) and (max-width: 1100.98px) {

  #main.r5-main {
    width: min(calc(100% - 32px), 1100px) !important;
  }

  .research-intro-layout {
    display: grid !important;

    grid-template-columns:
      minmax(300px, 420px)
      minmax(0, 1fr) !important;

    gap: 34px !important;

    align-items: center !important;
  }

  .research-intro-illustration {
    width: 100% !important;
    max-width: 420px !important;

    margin: 0 !important;
    padding: 10px !important;

    background: #f8faff !important;
    border: 1px solid #e2e8f3 !important;
    border-radius: 9px !important;
  }

  .research-intro-illustration img {
    width: 100% !important;
    max-height: 230px !important;

    object-fit: contain !important;
  }
}


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

@media (min-width: 520px) and (max-width: 899.98px) {

  .navigation-grid.container {
    width: min(calc(100% - 32px), 860px) !important;
    margin-top: -24px !important;
  }

  .navigation-grid .tile-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 30px !important;
    row-gap: 36px !important;
  }

  .navigation-grid .navigation-tile img {
    height: 281px !important;
  }
}


/* ==========================================================
   PHONE
   ========================================================== */

@media (max-width: 767.98px) {

  /*
   * Same principle on phones:
   * full-width image, top preserved, bottom cropped.
   */
  .hero {
    aspect-ratio: auto !important;
    min-height: 165px !important;

    background-size: cover !important;
    background-position: center top !important;
  }

  .hero::before,
  .hero::after {
    content: none !important;
    display: none !important;
  }

  #main.r5-main {
    width: min(calc(100% - 28px), 760px) !important;
  }

  .research-intro-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .research-intro-illustration {
    width: min(100%, 480px) !important;
    max-width: 480px !important;

    justify-self: center !important;

    margin: 0 auto !important;
    padding: 10px !important;

    background: #f8faff !important;
    border: 1px solid #e2e8f3 !important;
    border-radius: 9px !important;
  }

  .research-intro-illustration img {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;

    object-fit: contain !important;
  }
}


@media (max-width: 519.98px) {

  /*
   * Do not use the large negative desktop offset on a
   * single-column phone layout.
   */
  .navigation-grid.container {
    width: min(calc(100% - 28px), 500px) !important;

    margin-top: -10px !important;
    margin-bottom: 20px !important;
  }

  .navigation-grid .tile-grid {
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }

  .navigation-grid .navigation-tile img {
    width: 100% !important;
    max-width: 410px !important;
    height: 275px !important;

    margin-inline: auto !important;

    transform: none !important;
  }
}

/* VISUAL-REFINEMENT-V3-END */