@layer layout {
  .container {
    width: min(1296px, 100% - 2 * var(--gutter, 72px));
    margin-inline: auto;
  }

  @media (max-width: 1023px) {
    .container {
      --gutter: 16px;
    }
  }
}

@layer surface {
  .empty .btn {
    min-height: var(--target-public);
  }

  .site-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: 80px;
  }

  .site-header__logo {
    display: flex;
    align-items: center;
    min-height: var(--target-public);
  }

  .site-header__logo .logo {
    height: 40px;
  }

  .site-nav {
    & > ul {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      margin: 0;
      padding: 0;
    }

    & a,
    & summary {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      min-height: var(--target-public);
      padding: 0 10px;
      border-radius: var(--radius-control);
      color: var(--text-1);
      font: 500 15px / 20px var(--font-body);
      text-decoration: none;

      &:hover {
        background: var(--surface-sunk);
        text-decoration: none;
      }
    }

    & summary {
      list-style: none;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }

      & .icon {
        width: 14px;
        height: 14px;
        color: var(--text-2);
        transition: transform 120ms ease-out;
      }
    }
  }

  .site-nav__menu {
    position: relative;

    &[open] summary .icon {
      transform: rotate(180deg);
    }
  }

  .site-nav__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    min-width: 220px;
    margin: 0;
    padding: var(--space-2);
    border-radius: var(--radius-card);

    & a {
      display: flex;
      width: 100%;
    }
  }

  .site-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 200px;
    min-height: var(--target-public);
    margin-left: auto;
    padding: 0 var(--space-3);
    border-radius: var(--radius-control);
    background: var(--surface-sunk);
    color: var(--text-2);

    & .icon {
      width: 16px;
      height: 16px;
    }

    & input {
      align-self: stretch;
      width: 100%;
      min-width: 0;
      min-height: var(--target-public);
      border: 0;
      background: transparent;
      font: var(--type-interface);
      color: var(--text-1);
      outline: none;

      &::placeholder {
        color: var(--text-3);
      }
    }

    &:focus-within {
      background: var(--surface);
      box-shadow: inset 0 0 0 1px var(--accent-text);
    }
  }

  .site-header__actions {
    display: flex;
    gap: var(--space-3);

    & .btn {
      min-height: var(--target-public);
    }
  }

  .site-flash:has(.flashes) {
    padding-top: var(--space-4);
  }

  .site-main {
    display: block;
  }

  .site-footer {
    padding: var(--space-18) 0 var(--space-10);
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 360px) repeat(4, minmax(0, 1fr));
    gap: var(--space-12);
  }

  .site-footer__brand {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    color: var(--band-text-2);
    font: 400 14px / 22px var(--font-body);

    & .logo {
      height: 44px;
    }
  }

  .site-footer__col {
    display: grid;
    align-content: start;
    gap: var(--space-3);

    & h2 {
      color: var(--band-text);
      font: 600 14px / 20px var(--font-body);
    }

    & ul {
      display: grid;
      gap: var(--space-3);
      margin: 0;
      padding: 0;
    }

    & a {
      color: var(--band-text-2);
      font: var(--type-interface);
      text-decoration: none;

      &:hover {
        color: var(--band-text);
        text-decoration: underline;
      }
    }
  }

  .site-footer__contact a {
    overflow-wrap: anywhere;
  }

  .site-footer__col .site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--band-line);
    color: var(--band-text-2);
    font: 500 13px / 20px var(--font-body);

    & ul {
      display: flex;
      gap: var(--space-6);
      margin: 0;
      padding: 0;
    }

    & a {
      color: var(--band-text);
    }
  }

  .site-menu {
    display: none;
    position: static;
  }

  .site-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--target-public);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-1);
    font: var(--type-interface);
    font-weight: 600;
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .site-menu[open] .site-menu__toggle {
    border-color: var(--accent-text);
    background: var(--accent-tint);
    color: var(--accent-text);
  }

  .site-menu__panel {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: grid;
    gap: var(--space-6);
    max-height: calc(100dvh - 80px);
    padding: var(--space-5) var(--space-4) var(--space-6);
    overflow-y: auto;
    border-radius: 0 0 var(--radius-dialog) var(--radius-dialog);
  }

  .site-search--menu {
    display: flex;
    width: 100%;
    min-height: var(--target-public);
    margin: 0;
  }

  .site-menu__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-5) var(--space-4);
  }

  .site-menu__group {
    display: grid;
    align-content: start;
    gap: var(--space-1);

    & ul {
      display: grid;
      margin: 0;
      padding: 0;
    }

    & a {
      display: flex;
      align-items: center;
      min-height: var(--target-public);
      color: var(--text-1);
      font: 500 16px / 24px var(--font-body);
      text-decoration: none;

      &:hover {
        color: var(--accent-text);
      }
    }
  }

  .site-menu__label {
    font: var(--type-label);
    color: var(--text-3);
  }

  /* ---------- Hero on the band, and section rhythm ---------- */
  .hero {
    padding-block: var(--section-space);
  }

  .hero__inner {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
  }

  .hero__kicker {
    font: var(--type-interface);
    font-weight: 600;
    color: var(--band-highlight);
  }

  .hero__title {
    max-width: 18ch;
    font: var(--type-display);
    color: var(--band-text);

    & em {
      font-style: normal;
      color: var(--band-highlight);
    }
  }

  .hero__body {
    max-width: 56ch;
    font: var(--type-body-large);
    color: var(--band-text-2);
  }

  .hero .actions {
    margin-top: var(--space-3);
  }

  .section {
    padding-block: var(--section-space);
  }

  .section + .section {
    padding-top: 0;
  }

  .section__head {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
  }

  .section__title {
    font: var(--type-section);
  }

  .section__intro {
    max-width: 60ch;
    font: var(--type-body);
    color: var(--text-2);
  }

  @media (max-width: 1279px) {
    .site-search:not(.site-search--menu) {
      display: none;
    }

    .site-header__actions {
      margin-left: auto;
    }
  }

  /* Below 1100 the nav no longer fits beside the actions; it moves into a disclosure menu. */
  @media (max-width: 1099px) {
    .site-nav,
    .site-header__counsellor {
      display: none;
    }

    .site-menu {
      display: block;
    }

    .site-header__inner {
      min-height: 72px;
    }
  }

  @media (max-width: 1023px) {
    .site-footer__top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-8);
    }

    .site-footer__brand {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 599px) {
    .site-header__inner {
      gap: var(--space-3);
    }

    .site-header__logo .logo {
      height: 32px;
    }

    .site-footer__top {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- University and field cards, shared by the home page and the catalogue ---------- */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);

    & > li {
      display: grid;
    }
  }

  .uni-card,
  .field-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text-1);
    text-decoration: none;
    transition: border-color 120ms ease-out;

    &:hover {
      border-color: var(--line-strong);
      text-decoration: none;
    }

    &:hover :is(h2, h3) {
      color: var(--accent-text);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.18em;
    }
  }

  .uni-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    padding: var(--space-6);

    & > .logo-tile,
    & > .monogram {
      width: 72px;
      height: 72px;
      margin-bottom: var(--space-5);
    }
  }

  .uni-card__type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-2);
    font: var(--type-micro);

    &::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }
  }

  .uni-card__name {
    justify-self: stretch;
    margin-top: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
    font: var(--type-subsection);
  }

  .uni-card__facts {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    color: var(--text-2);
    font: var(--type-interface);
    font-weight: 400;

    & li {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    & .icon {
      width: 16px;
      height: 16px;
      color: var(--text-3);
    }
  }

  .field-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
  }

  .field-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: var(--wash);
  }

  .field-card__monogram {
    display: grid;
    place-items: center;
    color: var(--text-1);
    font: 600 36px / 44px var(--font-display);
  }

  .field-card__body {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-5);
  }

  .field-card__name {
    margin-bottom: var(--space-1);
    font: var(--type-subsection);
  }

  .field-card__meta {
    color: var(--text-2);
    font: var(--type-interface);
    font-weight: 400;
  }

  @media (max-width: 1023px) {
    .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 599px) {
    .card-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .uni-card {
      grid-template-columns: 64px minmax(0, 1fr);
      column-gap: var(--space-4);
      padding: var(--space-4);

      & > .logo-tile,
      & > .monogram {
        grid-row: span 3;
        width: 64px;
        height: 64px;
        margin-bottom: 0;
      }
    }

    .uni-card__name {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .uni-card__facts {
      margin-top: var(--space-2);
    }
  }
}