.dept-page {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  padding: 0 var(--wrap);
  overflow-x: hidden;
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem);
}

@media (max-width: 768px) {

  .dept-specs-id {
    display: none;
  }

  .dept-spec-item {
    padding: 15px 0;
  }

  .dept-spec-text {
    font-size: 1rem;
  }

  .dept-specs-line {
    display: none;
  }

  .dept-page {
    padding: 0;
  }
  
}

.dept-container {
  padding: 0 var(--wrap);
  margin: 0 auto;
  width: 100%;
}

.dept-section {
  margin-top: 0;
  padding: clamp(40px, 5vw, 80px) 0;
}

.dept-section--dark {
  background-color: var(--color-blue-200);
  color: var(--color-white);
}

.dept-title {
  color: var(--color-text-heading);
  font-weight: 700;
  position: relative;
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* One size for every section heading on the page, the mission block included. */
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
}

.dept-title--light {
  color: var(--color-white);
}

.dept-title--left {
  text-align: left;
  margin-top: 0;
}

.dept-hero-bento {
  padding: 60px 0 40px;
  background-color: var(--color-blue-200);
  min-height: auto;
  margin-top: 7rem;
  color: var(--color-white);
}

.dept-bento-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  grid-template-rows: auto auto;
  gap: 16px;
  grid-template-areas:
    "main visual"
    "action visual"
    "nav nav";
}

.dept-bento-card {
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  padding: clamp(20px, 2.2vw, 32px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s;
  color: var(--color-white);
  border-radius: 0;
  background: transparent;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.dept-bento-card--main {
  grid-area: main;
  min-height: 0;
  gap: 28px;
  justify-content: space-between;
}

.dept-bento-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
  gap: 15px;
}

.dept-hero__breadcrumbs {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 500;

  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.dept-hero__breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* On the navy hero the link lightens to white; the site's link blue would sink into the background. */
.dept-hero__breadcrumbs a:hover,
.dept-hero__breadcrumbs a:focus-visible {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Brand capitals and weight for presence; kept to a size that a long unit name can carry. */
.dept-bento-title {
  font-size: clamp(1.4rem, 1rem + 1vw, 2.125rem);
  line-height: 1.22;
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  position: relative;
  z-index: 2;
  color: var(--color-white);
  text-wrap: balance;
}

/* The caption stands outside the H1, so the heading carries only the unit's name. */
.dept-bento-title__small {
  display: block;
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.dept-btn-icon {
  display: flex;
}

.dept-bento-card--visual {
  grid-area: visual;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.dept-bento-logo-wrap {
  width: clamp(160px, 82%, 320px);
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.dept-bento-card:hover .dept-bento-logo-wrap {
  transform: scale(1.03);
}

.dept-bento-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.dept-bento-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.15);
  z-index: 1;
  pointer-events: none;
}

.dept-bento-year {
  position: absolute;
  bottom: 25px;
  right: 30px;
  text-align: right;
  z-index: 2;
}

.dept-bento-year span {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.dept-bento-year strong {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--color-white);
  opacity: 0.25;
  line-height: 0.9;
}

.dept-bento-card--actions {
  grid-area: action;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

/* A card with only the description keeps it in the middle, with even room above and below. */
.dept-bento-card--actions:not(:has(.dept-bento-bottom-actions)) {
  justify-content: center;
}

.dept-bento-card--actions:not(:has(.dept-bento-bottom-actions)) .dept-bento-desc {
  flex: none;
}

.dept-bento-desc {
  flex: 1;
  font-size: 1rem;
  color: var(--color-white);
  line-height: 1.6;
  hyphens: auto;
  word-wrap: break-word;
}

.dept-bento-desc p {
  margin: 0;
  max-width: 100%;

  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.dept-bento-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: stretch;
}

.dept-btn {
  display: inline-flex;
  align-items: center;
  
  padding: 6px 12px;
  height: auto;
  min-height: 54px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
  font-size: 0.9rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 280px;
}

.dept-btn--icon {
  gap: 12px;
}

/* The hero is navy in both themes, so its white button keeps fixed colours too. */
.dept-btn--primary {
  background: var(--color-white);
  color: var(--color-blue-200);
  border: 2px solid var(--color-white);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.dept-btn--primary:hover {
  background: transparent;
  color: var(--color-white);
  box-shadow: none;
}

.dept-btn--outline-dark {
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: var(--color-white);
  background: transparent;
}

.dept-btn--outline-dark:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
}

.dept-section--light {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}

/*
 * The list block keeps its original check list; the section sits on the
 * second paper tone with the university arms as a faint watermark on the right.
 */
.dept-section--principles {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.dept-section--principles::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../media/departments/gerb-watermark.webp") right -12% center / min(40%, 540px) no-repeat;
  opacity: 0.04;
  pointer-events: none;
}

.dept-section--principles .dept-container {
  position: relative;
  z-index: 1;
}

.dept-specs-id {
  font-family: monospace;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}

.dept-specs-wrapper {
  display: flex;
  gap: 30px;
  position: relative;
}

.dept-specs-line {
  width: 4px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-text-heading),
    var(--color-text-heading) 10px,
    transparent 10px,
    transparent 20px
  );
  opacity: 0.3;
  flex-shrink: 0;
}

.dept-specs-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dept-spec-item {
  display: flex;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(var(--color-ink--rgb), 0.08);
  transition: background-color 0.3s ease;
}

.dept-spec-item:last-child {
  border-bottom: none;
}

.dept-spec-item:hover {
  background-color: rgba(var(--color-tint--rgb), 0.02);
}

.dept-spec-marker {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-color: var(--color-blue-200);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  margin-top: 2px;
  box-shadow: 0 4px 10px rgba(var(--color-blue-200--rgb), 0.2);
}

.dept-spec-text {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-text-heading);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding-top: 3px;
  max-width: 70ch;
}

.dept-spec-marker .ph-icon {
  width: 18px;
  height: 18px;
}

.dept-section--services {
  background-color: var(--color-blue-200);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dept-services-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px
  );
  background-size: 30px 30px;
  opacity: 0.5;
  pointer-events: none;
}

.dept-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 10px;
}

.dept-deco-line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, var(--color-white), transparent);
  margin-left: 35px;
  opacity: 0.3;
}

.dept-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.dept-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dept-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dept-service-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  overflow: hidden;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.dept-service-card:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.dept-service-card__img {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
}

.dept-service-card--image-only {
  min-height: 260px;
}
.dept-service-card--image-only .dept-service-card__img {
  padding-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dept-service-card__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  padding: 0;
  pointer-events: none;
}
.dept-service-card:hover img {
  transform: scale(1.05);
}

.dept-service-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.dept-service-card__num {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--color-blue-200);
  opacity: 0.2;
  z-index: 3;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
  line-height: 1;
}

.dept-service-card:hover .dept-service-card__num {
  transform: translateY(-5px);
}

.dept-service-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 2;
}

.dept-service-card__content {
  padding: 25px 30px 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dept-service-card__header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.dept-service-card__accent {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.dept-service-card:hover .dept-service-card__accent {
  width: 60px;
  background: var(--color-white);
}

.dept-service-card__desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.dept-service-card__desc p {
  margin: 0 0 10px 0;
}
.dept-service-card__desc p:last-child {
  margin-bottom: 0;
}

.dept-service-card__title {
  font-size: clamp(1.1rem, 1.2vw, 1.3rem);
  color: var(--color-white);
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}

.dept-service-card__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.dept-service-card__link-text {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}

.dept-service-card:hover .dept-service-card__link-text {
  color: var(--color-white);
}

.dept-service-card__arrow {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.dept-service-card:hover .dept-service-card__arrow {
  background: var(--color-white);
  color: var(--color-blue-200);
  border-color: var(--color-white);
  transform: translateX(5px);
}

.dept-section--docs {
  background-color: var(--color-bg-primary);
}

.dept-deco-line--blue {
  background: linear-gradient(to right, var(--color-text-heading), transparent);
  opacity: 0.2;
}

.dept-docs-grid {
  display: grid;
  gap: 20px;
}

.dept-doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
  position: relative;
  overflow: hidden;
  gap: 15px;
}

.dept-doc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: var(--color-text-heading);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  transform-origin: bottom;
}

.dept-doc-card:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}

.dept-doc-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 30px rgba(var(--color-blue-200--rgb), 0.08);
}

.dept-doc-card__icon {
  color: var(--color-text-muted);
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.dept-doc-card:hover .dept-doc-card__icon {
  color: var(--color-text-heading);
}

.dept-doc-card__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dept-doc-card__title {
  font-size: 1rem;
  color: var(--color-text-primary);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  transition: color 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dept-doc-card:hover .dept-doc-card__title {
  color: var(--color-text-heading);
}

.dept-doc-card__action {
  color: var(--color-grey-050);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
  transform: translateY(5px);
  opacity: 0;
  flex-shrink: 0;
}

.dept-doc-card:hover .dept-doc-card__action {
  opacity: 1;
  transform: translateY(0);
  color: var(--color-text-heading);
}

.dept-section--team-tech {
  background-color: var(--color-blue-200);
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.dept-section--team-tech::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-image: url('../../../media/departments/gerb-watermark.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(80%, 800px);
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.dept-section--team-tech .dept-container {
  position: relative;
  z-index: 1;
}

.dept-leader-dossier {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  transition: border-color 0.3s ease;
  text-decoration: none;
  overflow: hidden;
}

.dept-leader-dossier:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.dept-leader-dossier__visual {
  flex: 0 0 320px;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dept-leader-dossier__visual img {
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
  width: 100%;
}

.dept-leader-dossier__content {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dept-leader-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 5px;
  opacity: 0.7;
}

.dept-leader-name-tech {
  font-size: clamp(1rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0 0 10px 0;
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.02ch;
}

.dept-leader-role-tech {
  font-size: clamp(0.8rem, 1vw, 1rem);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Contacts sit above the card's link overlay, so a phone or e-mail is clickable without opening the profile. */
.dept-team-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
}

.dept-card-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.dept-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.dept-contact-link span {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease, color 0.2s ease;
}

a.dept-contact-link:hover,
a.dept-contact-link:focus-visible {
  color: var(--color-white);
}

a.dept-contact-link:hover span,
a.dept-contact-link:focus-visible span {
  background-size: 100% 1px;
}

/* The room is information, not an action. */
.dept-contact-link--static {
  color: rgba(255, 255, 255, 0.7);
}

.dept-contact-link .ph-icon,
.dept-contact-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}


.dept-team-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0 auto;
}

.dept-member-row {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  text-decoration: none;
}

.dept-member-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

.dept-member-row__visual {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dept-member-row__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A portrait cut to a square keeps the face, not the chest. */
  object-position: center top;
  display: block;
}

.dept-member-row__info {
  padding: 0 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.dept-member-row__name {
  font-size: 1.3rem;
  color: var(--color-white);
  margin: 0 0 4px 0;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02ch;
}

.dept-member-row__role {
  font-size: 0.85rem;
  color: var(--color-grey-050);
  margin: 0;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dept-member-row__meta {
  padding-right: 30px;
  opacity: 0.3;
  font-family: monospace;
  font-size: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  height: 80px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  color: var(--color-white);
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .dept-grid--4,
  .dept-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dept-docs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  /* The fixed header is about 58px tall here; the hero starts below it. */
  .dept-hero-bento {
    margin-top: 60px;
  }
  
  .dept-bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "action" "visual" "nav";
  }

  /* In one column the emblem's card stands among the others, so it takes their ground and frame. */
  .dept-bento-card--visual {
    min-height: 0;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
  }

  .dept-bento-card--actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .dept-bento-desc {
    width: 100%;
  }

  .dept-bento-btns {
    width: 100%;
    flex-direction: row;
  }

  .dept-docs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dept-leader-dossier__visual {
    flex: 0 0 240px;
  }

  .dept-sf-nav-menu {
    -webkit-mask-image: linear-gradient(to right, var(--color-black) 85%, transparent 100%);
    mask-image: linear-gradient(to right, var(--color-black) 85%, transparent 100%);
  }

  .dept-sf-nav-menu::after {
    content: "";
    flex: 0 0 15%;
  }
}

@media (max-width: 768px) {







  .dept-grid--4,
  .dept-grid--3 {
    grid-template-columns: 1fr;
  }

  .dept-member-row__meta {
    display: none;
  }
}

@media (max-width: 576px) {
  .dept-deco-line {
    margin-left: 5px;
  }
  .dept-hero-bento {
    padding-top: 20px;
  }

  .dept-bento-title {
    font-size: 1.25rem;
  }

  .dept-bento-btns {
    flex-direction: column;
  }

  


  .dept-docs-grid {
    grid-template-columns: 1fr;
  }

  .dept-member-row {
    flex-direction: row;
    align-items: center;
    padding: 10px;
  }

  .dept-member-row:hover {
    transform: none;
  }

  .dept-member-row__visual {
    width: 150px;
    height: 150px;
    border-right: none;
    overflow: hidden;
  }

  .dept-member-row__info {
    padding: 0 0 0 15px;
  }

  .dept-member-row__name {
    font-size: 0.95rem;
    white-space: normal;
  }

  .dept-member-row__role {
    font-size: 0.75rem;
    white-space: normal;
  }


  .dept-leader-dossier {
    flex-direction: column;
  }

  .dept-leader-dossier__visual {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
  }

  .dept-leader-dossier__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dept-leader-dossier__content {
    padding: 30px 20px;
  }

  .dept-grid,
  .dept-grid--4,
  .dept-grid--3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
        grid-template-columns: 1fr;
        gap: 15px;
    width: 100%;
  }

  .dept-grid--4 .dept-service-card,
  .dept-grid--3 .dept-service-card {
    width: 100%;
    min-width: 0;
    min-height: 160px;
        min-height: 220px;
    height: auto;
    aspect-ratio: 1 / 1.1;
        aspect-ratio: auto;
    margin: 0;
  }

  .dept-service-card__content {
    padding: 12px;
        padding: 20px;
    align-items: flex-end;
  }

  .dept-service-card__title {
    font-size: 0.75rem;
        font-size: 1rem;
    line-height: 1.3;
    max-width: 70%;
        max-width: 80%;
    word-break: break-word;
  }

  .dept-service-card__arrow {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
        width: 36px;
        height: 36px;
        font-size: 1rem;
  }

  .dept-service-card__num {
    font-size: 1.5rem;
    top: 8px;
    right: 10px;
        font-size: 2.2rem;
        top: 15px;
        right: 20px;
  }

.dept-bento-card--visual:has(.dept-bento-year) {
    padding-bottom: 70px;
  }

  .dept-bento-year {
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
  }

  .dept-bento-year span {
    font-size: 0.9rem;
  }

  .dept-bento-year strong {
    font-size: 2.5rem; 
  }
  
}

.dept-section--tasks-modern {
  background-color: var(--color-blue-200);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dept-section--tasks-modern::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-image: url('../../../media/departments/gerb-watermark.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(80%, 800px);
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.dept-section--tasks-modern .dept-container {
  position: relative;
  z-index: 1;
}

.dept-tasks-grid-modern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dept-gap);
}

.dept-task-card-modern {
  flex: 1 1 320px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 35px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.dept-task-card-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.dept-task-card-modern:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.dept-task-card-modern:hover::before {
  transform: scaleX(1);
}

.dept-task-card-modern__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.4s ease;
}

.dept-task-card-modern:hover .dept-task-card-modern__header {
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.dept-task-card-modern__icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.dept-task-card-modern:hover .dept-task-card-modern__icon {
  background: var(--color-white);
  color: var(--color-blue-200);
  transform: scale(1.1);
}

.dept-task-card-modern__num {
  font-family: monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.1);
  line-height: 1;
  transition: color 0.4s ease;
}

.dept-task-card-modern:hover .dept-task-card-modern__num {
  color: rgba(255, 255, 255, 0.5);
}

.dept-task-card-modern__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.dept-task-card-modern__desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.6;
  font-weight: 400;

  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 992px) {
  .dept-tasks-grid-modern {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .dept-tasks-grid-modern {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .dept-task-card-modern {
    padding: 25px 20px;
  }
  .dept-task-card-modern__icon {
    width: 44px;
    height: 44px;
  }
  .dept-task-card-modern__num {
    font-size: 1.5rem;
  }
  .dept-task-card-modern__title {
    font-size: 1rem;
  }
  .dept-task-card-modern__desc {
    font-size: 0.9rem;
  }
}

.dept-section--mission {
  background-color: var(--color-bg-primary);
}

.dept-mission-split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: start;
}

.dept-mission-left .dept-title {
  margin: 0;
  text-align: left;
}

.dept-mission-right {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dept-mission-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0;
}

.dept-mission-text strong {
  color: var(--color-text-heading);
  font-weight: 700;
}

@media (max-width: 992px) {
  .dept-mission-split {
    grid-template-columns: 260px 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .dept-mission-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 576px) {
  .dept-mission-text {
    font-size: 1rem;
  }
}
.dept-section--categories {
  background-color: var(--color-bg-primary);
}

.dept-categories-grid {
  display: grid;
  gap: 20px;
}

.dept-category-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 30px;
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-heading);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
  position: relative;
  overflow: hidden;
}

.dept-category-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-right: 15px;
  color: var(--color-text-heading);
  transition: color 0.3s ease;
}

.dept-category-card__icon {
  flex-shrink: 0;
  color: var(--color-text-heading);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dept-category-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 10px 25px rgba(var(--color-blue-200--rgb), 0.08);
}

.dept-category-card:hover .dept-category-card__icon {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .dept-categories-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .dept-category-card {
    padding: 20px;
  }
  
  .dept-category-card__title {
    font-size: 1rem;
  }
}

.dept-gallery-wrapper {
  margin-top: 40px;
  position: relative;
}

.dept-gallery-swiper {
  width: 100%;
  height: 100%;
  padding-bottom: 50px;
}

.dept-gallery-swiper .swiper-slide {
  height: 300px;
  overflow: hidden;
  border: 1px solid rgba(var(--color-ink--rgb), 0.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.dept-gallery-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.dept-gallery-swiper .swiper-slide:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .dept-gallery-wrapper {
    padding: 0;
  }
}

.dept-section--slider-features {
  position: relative;
}

.dept-sf-wrapper {
  margin-top: 40px;
}

.dept-sf-swiper {
  width: 100%;
}

.dept-sf-card {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.dept-sf-card__visual {
  flex: 0 0 35%;
  position: relative;
  min-height: 350px;
}

.dept-sf-card__visual img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dept-sf-card__content {
  flex: 1;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dept-sf-card__title {
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 20px 0;
  line-height: 1.3;

  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.dept-sf-card__desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.6;
}

.dept-sf-card__desc p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.dept-sf-card__desc p:last-child {
  margin-bottom: 0;
}

.dept-sf-card__desc a {
  color: var(--color-highlight, #f8b739);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.dept-sf-card__desc a:hover {
  color: var(--color-white);
}

.dept-sf-card__desc ul,
.dept-sf-card__desc ol {
  margin: 1rem 0;
  padding-left: 20px;
}

.dept-sf-card__desc li {
  margin-bottom: 8px;
}

.dept-sf-card__desc ul li::marker {
  color: var(--color-highlight, #f8b739);
}

.dept-sf-swiper .swiper-button-next,
.dept-sf-swiper .swiper-button-prev {
  color: var(--color-white);
  background: transparent;
  width: 44px;
  height: 44px;
  margin-top: -45px;
  transition: opacity 0.3s ease;
  opacity: 0.7;
  z-index: 10;
}

.dept-sf-swiper .swiper-button-next:after,
.dept-sf-swiper .swiper-button-prev:after {
  font-size: 18px;
}

.dept-sf-swiper .swiper-button-next:hover,
.dept-sf-swiper .swiper-button-prev:hover {
  background: transparent;
  opacity: 1;
}


.dept-sf-nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.dept-sf-nav-menu .swiper-pagination-bullet {
  width: auto;
  height: auto;
  margin: 0 !important;
  opacity: 1;
  background: transparent;
  border-radius: 0;
  padding: 5px;
}

.dept-sf-nav-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
  font-family: inherit;
}

.dept-sf-nav-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.dept-sf-nav-menu .swiper-pagination-bullet-active.dept-sf-nav-btn {
  background: var(--color-blue-100);
  border-color: var(--color-blue-100);
  color: var(--color-white);
}

@media (max-width: 992px) {
  .dept-sf-wrapper {
    padding: 0;
  }
  .dept-sf-card {
    flex-direction: column;
  }
  .dept-sf-card__visual {
    flex: none;
    height: 300px;
    min-height: auto;
  }
  .dept-sf-card__visual img {
    position: relative;
  }
  .dept-sf-swiper .swiper-button-next,
  .dept-sf-swiper .swiper-button-prev {
    display: none;
  }
  .dept-sf-nav-menu {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-blue-200) rgba(0, 0, 0, 0.05);
    flex-direction: row;
    width: 100%;
  }
  .dept-sf-nav-menu::-webkit-scrollbar {
    height: 6px;
  }
  .dept-sf-nav-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .dept-sf-nav-menu::-webkit-scrollbar-thumb {
    background: var(--color-blue-200);
    border-radius: 4px;
  }
  .dept-sf-nav-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 576px) {
  .dept-sf-card__content {
    padding: 30px 20px;
  }
}

.dept-accordion-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.dept-accordion-item {
  overflow: hidden;
  background: var(--color-surface-card);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.dept-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 25px;
  background: var(--color-blue-200);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.3s ease;
  font-family: inherit;
}

.dept-accordion-title {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 600;
  padding-right: 20px;
  line-height: 1.4;
}

.dept-accordion-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.dept-accordion-item.is-active .dept-accordion-icon {
  transform: rotate(180deg);
}

.dept-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, visibility 0.6s;
  opacity: 0;
  visibility: hidden;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
}

.dept-accordion-item.is-active .dept-accordion-content {
  opacity: 1;
  visibility: visible;
}

.dept-accordion-content-inner {
  padding: 25px;
  border-top: 1px solid rgba(var(--color-tint--rgb), 0.05);
}

@media (max-width: 576px) {
  .dept-accordion-header {
    padding: 12px 15px;
  }
  .dept-accordion-title {
    font-size: 0.95rem;
  }
  .dept-accordion-icon {
    width: 24px;
    height: 24px;
  }
  .dept-accordion-icon svg {
    width: 16px;
    height: 16px;
  }
  .dept-accordion-content-inner {
    padding: 15px;
    font-size: 0.9rem;
  }
}
/* Extra Elements */
.dept-bento-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}
.dept-extra-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1px solid #a9b3bc;
  border-radius: 0;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 280px;
  text-decoration: none;
  color: var(--color-white, #ffffff);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}
.dept-extra-item--link {
  background: var(--color-highlight);
  color: #1a1a1a;
  border-color: var(--color-highlight);
  cursor: pointer;
}
.dept-extra-item--link:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  filter: brightness(1.05);
}
.dept-extra-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: transparent;
  color: var(--color-highlight);
  flex-shrink: 0;
}
.dept-extra-icon svg {
  width: 32px;
  height: 32px;
}
.dept-extra-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.dept-extra-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.dept-extra-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-white, #ffffff);
}
.dept-extra-single-text {
  color: var(--color-white, #ffffff);
}
.dept-extra-item--link .dept-extra-single-text,
.dept-extra-item--link .dept-extra-val,
.dept-extra-item--link .dept-extra-icon,
.dept-extra-item--link .dept-extra-actions {
  color: var(--color-blue-200);
}
.dept-extra-item--link .dept-extra-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease;
}
.dept-extra-item--link:hover .dept-extra-actions {
  transform: translateX(3px);
}
.dept-bento-bottom-actions {
  width: 100%;
}
@media (max-width: 992px) {
  .dept-bento-extras, .dept-bento-btns {
    flex-direction: column;
    display: flex;
    width: 100%;
  }
  .dept-extra-item, .dept-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
  }
}
@media (max-width: 768px) {
  .dept-btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  .dept-extra-item {
    padding: 8px 12px;
  }
  .dept-extra-icon {
    width: 32px;
    height: 32px;
  }
  .dept-extra-icon svg {
    width: 20px;
    height: 20px;
  }
  .dept-extra-val {
    font-size: 0.85rem;
  }
  .dept-extra-single-text {
    font-size: 0.85rem !important;
  }
  .dept-bento-extras, .dept-bento-btns {
    gap: 10px;
  }
}

/* ==========================================================================
   Hero section links: a framed strip of equal cells under the hero cards,
   drawn like the cards themselves so it reads as one control with a clear end.
   ========================================================================== */

.dept-hero-nav {
  grid-area: nav;
  /* A grid item keeps its content width by default; the strip scrolls sideways instead of widening the hero. */
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}

.dept-hero-nav::-webkit-scrollbar {
  display: none;
}

.dept-hero-nav__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dept-hero-nav__list li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.dept-hero-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dept-hero-nav__link:hover,
.dept-hero-nav__link:focus-visible {
  background: var(--color-white);
  color: var(--color-blue-200);
}

.dept-hero-nav__link:active {
  background: rgba(255, 255, 255, 0.85);
}

/* The section bar (.dept-subnav) is a shared component now:
   css-components/section-subnav.css. */

/* An anchor jump stops below the site header and the bar. */
.dept-page section[id] {
  scroll-margin-top: calc(var(--dept-header-h, 0px) + var(--dept-subnav-h, 48px));
}

/* ==========================================================================
   Phosphor icons inside the shared blocks: the icons are 1em by default, so
   each place sets the size it was designed for.
   ========================================================================== */

.dept-btn-icon .ph-icon {
  width: 20px;
  height: 20px;
}

.dept-task-card-modern__icon .ph-icon {
  width: 24px;
  height: 24px;
}


.dept-doc-card__icon .ph-icon {
  width: 28px;
  height: 28px;
}

.dept-doc-card__action .ph-icon {
  width: 20px;
  height: 20px;
}

/* A round emblem floats on the navy card instead of sitting in a white square. */
.dept-bento-logo-wrap img {
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}

/* ==========================================================================
   Project / event block (spotlight): intro, numbered points, link tiles.
   One markup serves a navy and a paper section; each variant only sets the
   local tokens below.
   ========================================================================== */

.dept-spot {
  position: relative;
  overflow: hidden;
}

/* The navy variant is a designed brand section: fixed colours in both themes. */
.dept-spot--dark {
  background-color: var(--color-blue-200);
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  --spot-heading: var(--color-white);
  --spot-text: rgba(255, 255, 255, 0.94);
  --spot-muted: rgba(255, 255, 255, 0.84);
  --spot-line: rgba(255, 255, 255, 0.12);
  --spot-accent: var(--color-white);
  --spot-wash: rgba(255, 255, 255, 0.05);
  --spot-card-bg: rgba(255, 255, 255, 0.04);
  --spot-card-hover: rgba(255, 255, 255, 0.08);
  --spot-card-border: rgba(255, 255, 255, 0.14);
  --spot-card-border-hover: rgba(255, 255, 255, 0.45);
  --spot-tag-bg: var(--color-white);
  --spot-tag-text: var(--color-blue-200);
}

/*
 * Over the watermark the text blocks sit on a translucent navy panel: the arms
 * still show through as a hint, the letters stand on an even ground.
 */
.dept-spot--dark :is(.dept-spot__lead, .dept-spot__points) {
  background: rgba(var(--color-blue-200--rgb), 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dept-spot--dark .dept-spot__lead {
  padding: 24px;
}

.dept-spot--dark .dept-spot__points {
  padding: 24px 24px 8px;
}

.dept-spot--dark .dept-spot__list {
  border-top: none;
}

.dept-spot--dark .dept-spot__point:last-child {
  border-bottom: none;
}

@media (prefers-reduced-transparency: reduce) {
  .dept-spot--dark :is(.dept-spot__lead, .dept-spot__points) {
    background: var(--color-blue-200);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* The paper variant follows the page theme through the semantic tokens. */
.dept-spot--light {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  --spot-heading: var(--color-text-heading);
  --spot-text: var(--color-text-primary);
  --spot-muted: var(--color-text-secondary);
  --spot-line: var(--color-border);
  --spot-accent: var(--color-text-heading);
  --spot-wash: rgba(var(--color-tint--rgb), 0.04);
  --spot-card-bg: var(--color-surface-card);
  --spot-card-hover: var(--color-surface-card);
  --spot-card-border: var(--color-border);
  --spot-card-border-hover: var(--color-border-strong);
  --spot-tag-bg: var(--color-blue-200);
  --spot-tag-text: var(--color-white);
}

.dept-spot .dept-container {
  position: relative;
  z-index: 1;
}

/* The navy variant carries the university arms as a faint watermark, like the team block. */
.dept-spot--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../media/departments/gerb-watermark.webp") center / min(80%, 800px) no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.dept-spot__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
}

.dept-spot__heading .dept-title {
  margin: 0;
  max-width: 52ch;
}

/* With a caption above the title, the side rule lines up with the title, not between the two. */
.dept-spot .dept-header-wrap {
  align-items: flex-end;
}

.dept-spot .dept-header-wrap .dept-deco-line {
  margin-bottom: 0.6em;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
}

/* The same quiet caption as the hero's: a short rule and the text, no box. */
.dept-spot__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--spot-muted);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.dept-spot__body {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.dept-spot__body--split {
  grid-template-columns: 5fr 7fr;
}

/* Text beside a photo gets the wider column. */
.dept-spot__body--media {
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 3vw, 40px);
}

.dept-spot__main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Beside a long list the description and photo stay in view while the list scrolls past. */
.dept-spot__body--points .dept-spot__main {
  position: sticky;
  top: calc(var(--dept-header-h, 0px) + var(--dept-subnav-h, 52px) + 24px);
}

/*
 * Text beside a list, with no photo: both columns start level and share one
 * height, and the last paragraph settles at the foot of the text panel.
 */
.dept-spot__body--text {
  align-items: stretch;
}

.dept-spot__body--text .dept-spot__main {
  position: static;
}

.dept-spot__body--text .dept-spot__lead {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dept-spot__body--text .dept-spot__lead > p:last-child:not(:first-child) {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--spot-line);
}

.dept-spot__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--spot-text);
  max-width: 72ch;
  hyphens: auto;
  overflow-wrap: break-word;
}

.dept-spot__lead p {
  margin: 0 0 1em;
}

/* Beside a photo or a list the column already sets the line length. */
.dept-spot__body--split .dept-spot__lead {
  max-width: none;
}

.dept-spot__lead > :last-child {
  margin-bottom: 0;
}

.dept-spot__lead strong {
  color: var(--spot-heading);
}

.dept-spot__lead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dept-spot__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--spot-card-border);
  overflow: hidden;
}

.dept-spot__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dept-spot__body--media .dept-spot__photo {
  align-self: stretch;
  aspect-ratio: auto;
  min-height: 320px;
}

/* A logo or emblem is shown whole, without the photo frame. */
.dept-spot__photo--contain,
.dept-spot__body--media .dept-spot__photo--contain {
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: min(100%, 260px);
  margin: 8px auto 0;
  border: none;
  overflow: visible;
}

.dept-spot__photo--contain img {
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.3));
}

/* Several photos: one frame, paged with square arrows and a counter along the foot. */
.dept-spot__photo--gallery .dept-spot-gallery {
  position: absolute;
  inset: 0;
}

.dept-spot-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dept-spot-gallery__zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.dept-spot-gallery__bar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: stretch;
  background: rgba(10, 20, 45, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-white);
}

.dept-spot-gallery__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dept-spot-gallery__btn .ph-icon {
  width: 16px;
  height: 16px;
}

.dept-spot-gallery__btn:hover,
.dept-spot-gallery__btn:focus-visible {
  background: var(--color-white);
  color: var(--color-blue-200);
}

.dept-spot-gallery__btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Swiper styles its fraction counter as an overlay across the slider; here it sits in the bar. */
.dept-spot-gallery__bar .dept-spot-gallery__count {
  position: static;
  width: auto;
  inset: auto;
  transform: none;
  text-align: center;
}

.dept-spot-gallery__count {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.dept-spot__subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--spot-heading);
}

.dept-spot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--spot-line);
}

.dept-spot__point {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--spot-line);
}

/* A plain figure in a square, like the check markers of the list block. */
.dept-spot__point-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 0;
  border: 1px solid var(--spot-card-border-hover);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--spot-heading);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dept-spot__point:hover .dept-spot__point-num {
  background: var(--spot-accent);
  border-color: var(--spot-accent);
  color: var(--spot-tag-text);
}

.dept-spot--light .dept-spot__point:hover .dept-spot__point-num {
  color: var(--color-bg-primary);
}

.dept-spot__point-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--spot-muted);
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Only the term itself stands on its own line; bold words inside the explanation stay inline. */
.dept-spot__point-text > strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--spot-heading);
}

/* The closing statement of a block is set as its takeaway: larger, on a wash, led by a brand-yellow stroke. */
.dept-spot__note {
  margin: 24px 0 0;
  padding: 22px 24px;
  background: var(--spot-wash);
  color: var(--spot-heading);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 500;
  line-height: 1.55;
}

.dept-spot--dark .dept-spot__note {
  background: rgba(255, 255, 255, 0.08);
}

/* A note with words set in bold reads quieter around them, so the bold words carry the accent. */
.dept-spot__note:has(strong) {
  font-weight: 400;
  color: var(--spot-text);
}

.dept-spot__note strong {
  font-weight: 700;
  color: var(--spot-heading);
}

.dept-spot__links {
  margin-top: clamp(36px, 4vw, 56px);
}

.dept-header-wrap + .dept-spot__links {
  margin-top: 0;
}

.dept-spot__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.dept-spot-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 188px;
  padding: 22px 24px;
  background: var(--spot-card-bg);
  border: 1px solid var(--spot-card-border);
  color: var(--spot-heading);
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/*
 * Cards answer the pointer with colour, rule and shadow but stay in place: a card that
 * rose under the cursor slipped out from under it at the bottom edge and flickered.
 */
.dept-spot-tile:hover,
.dept-spot-tile:focus-visible {
  background: var(--spot-card-hover);
  border-color: var(--spot-card-border-hover);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

/* Feedback on the press itself, not only after the click. */
.dept-spot-tile:active {
  transform: scale(0.99);
  transition-duration: 0.1s;
}

.dept-spot-tile__body {
  display: flex;
  flex-direction: column;
}

.dept-spot-tile__kicker {
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--spot-heading);
  opacity: 0.45;
  margin-bottom: 14px;
}

.dept-spot-tile__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--spot-heading);
  overflow-wrap: break-word;
}

.dept-spot-tile__desc {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--spot-muted);
}

.dept-spot-tile__footer {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dept-spot-tile__more {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--spot-muted);
}

.dept-spot-tile__arrow {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--spot-card-border);
  color: var(--spot-heading);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.dept-spot-tile__arrow .ph-icon {
  width: 18px;
  height: 18px;
}

.dept-spot-tile:hover .dept-spot-tile__arrow {
  background: var(--spot-accent);
  border-color: var(--spot-accent);
  color: var(--spot-tag-text);
  transform: translateX(3px);
}

.dept-spot--light .dept-spot-tile:hover .dept-spot-tile__arrow {
  color: var(--color-bg-primary);
}

/*
 * A tile with a photo: the photo fills the whole card and the text sits on a
 * dark wash rising from the bottom, so it reads on any picture. Photos are
 * fixed objects, so the colours here are fixed too.
 */
.dept-spot-tile--media {
  --spot-heading: var(--color-white);
  --spot-muted: rgba(255, 255, 255, 0.82);
  --spot-card-border: rgba(255, 255, 255, 0.4);
  --spot-accent: var(--color-white);
  --spot-tag-text: var(--color-blue-200);
  min-height: 300px;
  justify-content: flex-end;
  border-color: transparent;
  background: var(--color-blue-200);
  isolation: isolate;
}

.dept-spot-tile--media:hover,
.dept-spot-tile--media:focus-visible {
  background: var(--color-blue-200);
  border-color: transparent;
}

.dept-spot-tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.dept-spot-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.dept-spot-tile--media:hover .dept-spot-tile__img img {
  transform: scale(1.04);
}

.dept-spot-tile--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 20, 45, 0.94) 0%, rgba(10, 20, 45, 0.72) 38%, rgba(10, 20, 45, 0.18) 72%, rgba(10, 20, 45, 0.05) 100%);
}

/* On a photo the text settles at the foot of the card, on the darkest part of the wash. */
.dept-spot-tile--media .dept-spot-tile__body {
  margin-top: auto;
}

.dept-spot-tile--media .dept-spot-tile__footer {
  margin-top: 0;
  padding-top: 16px;
}

.dept-spot-tile--media .dept-spot-tile__title,
.dept-spot-tile--media .dept-spot-tile__desc {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* The year becomes a small frosted label in the corner of the photo. */
.dept-spot-tile--media .dept-spot-tile__kicker {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
  padding: 6px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 1;
  background: rgba(10, 20, 45, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* A lone tile reads as a wide banner rather than one narrow card. */
.dept-spot__tiles--single .dept-spot-tile {
  flex-direction: row;
  align-items: center;
  min-height: 0;
  gap: 28px;
}

.dept-spot__tiles--single .dept-spot-tile__body {
  flex: 1;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 4px;
}

.dept-spot__tiles--single .dept-spot-tile__kicker {
  margin-bottom: 0;
}

.dept-spot__tiles--single .dept-spot-tile__footer {
  margin-top: 0;
  padding-top: 0;
}

.dept-spot__tiles--single .dept-spot-tile--media {
  min-height: 200px;
  align-items: flex-end;
}

/* ==========================================================================
   Publication covers: one row across the full width, each card a first-page
   preview in book proportions beside the year and title.
   ========================================================================== */

.dept-spot__covers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.dept-spot-cover {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 20px;
  background: var(--spot-card-bg);
  border: 1px solid var(--spot-card-border);
  color: var(--spot-heading);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.dept-spot-cover:hover,
.dept-spot-cover:focus-visible {
  background: var(--spot-card-hover);
  border-color: var(--spot-card-border-hover);
}

/* The cover sits on white like a printed page, whatever the section colour. */
.dept-spot-cover__img {
  flex: 0 0 clamp(110px, 9vw, 140px);
  aspect-ratio: 1 / 1.414;
  background: var(--color-white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.dept-spot-cover__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.5s ease;
}

.dept-spot-cover:hover .dept-spot-cover__img img {
  transform: scale(1.04);
}

.dept-spot-cover__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 0;
}

.dept-spot-cover__kicker {
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--spot-muted);
}

.dept-spot-cover__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--spot-heading);
}

.dept-spot-cover__desc {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--spot-muted);
}

.dept-spot-cover__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--spot-heading);
}

.dept-spot-cover__more .ph-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.dept-spot-cover:hover .dept-spot-cover__more .ph-icon {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   Divider between two paper sections in a row: a plain hairline, standing
   where the second section would start its top padding.
   ========================================================================== */

:is(.dept-section--light, .dept-section--mission, .dept-section--docs, .dept-section--categories, .dept-contacts, .dept-spot--light)
  + :is(.dept-section--light, .dept-section--mission, .dept-section--docs, .dept-section--categories, .dept-contacts, .dept-spot--light),
:is(.dept-section--light, .dept-section--mission, .dept-section--docs, .dept-section--categories, .dept-contacts, .dept-spot--light)
  + script + :is(.dept-section--light, .dept-section--mission, .dept-section--docs, .dept-section--categories, .dept-contacts, .dept-spot--light) {
  padding-top: 0;
}

:is(.dept-section--light, .dept-section--mission, .dept-section--docs, .dept-section--categories, .dept-contacts, .dept-spot--light)
  + :is(.dept-section--light, .dept-section--mission, .dept-section--docs, .dept-section--categories, .dept-contacts, .dept-spot--light) > .dept-container::before,
:is(.dept-section--light, .dept-section--mission, .dept-section--docs, .dept-section--categories, .dept-contacts, .dept-spot--light)
  + script + :is(.dept-section--light, .dept-section--mission, .dept-section--docs, .dept-section--categories, .dept-contacts, .dept-spot--light) > .dept-container::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(40px, 5vw, 80px);
  background: var(--color-border);
}

/* ==========================================================================
   Documents: a long list shows its first few and opens the rest on request.
   ========================================================================== */

.dept-doc-card[hidden] {
  display: none;
}

.dept-docs-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-heading);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dept-docs-more:hover,
.dept-docs-more:focus-visible {
  background: var(--color-blue-200);
  border-color: var(--color-blue-200);
  color: var(--color-white);
}

.dept-docs-more .ph-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.dept-docs-more[aria-expanded="true"] .ph-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   Contacts block: a grid of cells divided by hairlines (the grid gap shows
   the border colour), a small labelled icon above each value.
   ========================================================================== */

.dept-contacts {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.dept-contacts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.dept-contacts__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px;
  background: var(--color-bg-primary);
  transition: background-color 0.2s ease;
}

.dept-contacts__row:hover {
  background: var(--color-bg-secondary);
}

.dept-contacts__row dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-heading);
}

.dept-contacts__row dt .ph-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-heading);
  opacity: 0.8;
}

.dept-contacts__row dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.dept-contacts__row dd .dept-contacts__sub {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.dept-contacts__row dd :is(a, span) {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.dept-contacts__row dd a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease, color 0.2s ease;
}

.dept-contacts__row dd a:hover,
.dept-contacts__row dd a:focus-visible {
  color: var(--color-link);
  background-size: 100% 1px;
}

.dept-contacts__socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dept-contacts__socials .ph-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
}

@media (max-width: 576px) {
  .dept-contacts__list {
    grid-template-columns: 1fr;
  }

  .dept-contacts__row {
    padding: 18px 20px;
  }
}

/* ==========================================================================
   Mission block with photos: even text beside a row of three square photos;
   more than three page along the row with the arrows under it.
   ========================================================================== */

.dept-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.dept-about__gallery {
  min-width: 0;
}

.dept-about__strip .swiper-slide {
  height: auto;
}

.dept-about__photo {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
}

.dept-about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.dept-about__photo:hover img {
  transform: scale(1.03);
}

/* While every photo fits the row Swiper locks both arrows; the bar then has nothing to do. */
.dept-about__bar:has(.swiper-button-lock) {
  display: none;
}

/* The paging bar lies on the photos, in the corner of the row, like the project galleries. */
.dept-about__gallery {
  position: relative;
}

@media (max-width: 992px) {
  .dept-about__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .dept-about__para {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Shared intro paragraph under a block heading.
   ========================================================================== */

.dept-block-intro {
  max-width: 72ch;
  margin: -15px 0 32px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Partners block: one row of equal compact cards, logo beside the name.
   ========================================================================== */

.dept-partners-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.dept-partner-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 168px;
  padding: 20px 56px 20px 20px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

a.dept-partner-card:hover,
a.dept-partner-card:focus-visible {
  border-color: var(--color-border-strong);
  box-shadow: 0 10px 26px rgba(var(--color-blue-200--rgb), 0.1);
}

a.dept-partner-card:active {
  transform: scale(0.99);
  transition-duration: 0.1s;
}

/* Partner logos are drawn for white paper, so the plate stays white and is only dimmed on the dark theme. */
.dept-partner-card__plate {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  padding: 10px;
  background: var(--color-white);
  filter: var(--logo-plate-filter);
  border: 1px solid var(--color-border);
}

/* An explicit box: WordPress lazy images size themselves from their layout width (sizes="auto"). */
.dept-partner-card__plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dept-partner-card__initials {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-blue-200);
}

.dept-partner-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dept-partner-card__note {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.dept-partner-card__name {
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-heading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dept-partner-card__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  color: var(--color-text-muted);
  transition: color 0.25s ease, transform 0.25s ease;
}

.dept-partner-card__arrow .ph-icon {
  width: 20px;
  height: 20px;
}

a.dept-partner-card:hover .dept-partner-card__arrow {
  color: var(--color-text-heading);
  transform: translate(2px, -2px);
}

/* ==========================================================================
   Responsive and reduced motion for the blocks above.
   ========================================================================== */

@media (max-width: 992px) {
  .dept-partners-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .dept-spot__body--split,
  .dept-spot__body--media {
    grid-template-columns: 1fr;
  }

  .dept-spot__body--points .dept-spot__main {
    position: static;
  }

  .dept-spot__body--media .dept-spot__photo {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .dept-hero-nav__link {
    min-height: 46px;
    padding: 0 14px;
    font-size: 0.875rem;
  }

  .dept-spot__tiles--single .dept-spot-tile,
  .dept-spot__tiles--single .dept-spot-tile__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .dept-spot__tiles--single .dept-spot-tile__kicker {
    margin-bottom: 12px;
  }

  .dept-spot__tiles--single .dept-spot-tile__footer {
    width: 100%;
    padding-top: 20px;
  }
}

@media (max-width: 576px) {
  .dept-spot__lead {
    font-size: 1rem;
  }

  .dept-spot__point {
    gap: 12px;
  }

  .dept-spot-tile {
    min-height: 0;
    padding: 20px;
  }

  .dept-spot-tile--media {
    min-height: 240px;
  }

  .dept-partners-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dept-partner-card {
    min-height: 120px;
    gap: 18px;
    padding: 14px 44px 14px 14px;
  }

  .dept-partner-card__plate {
    width: 92px;
    height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dept-spot-tile,
  .dept-spot-tile:hover,
  .dept-spot-tile:active,
  a.dept-partner-card,
  a.dept-partner-card:hover,
  a.dept-partner-card:active,
  .dept-spot-tile__arrow,
  .dept-spot-tile__img img,
  .dept-hero-nav__link {
    transition: none;
    transform: none;
  }

  .dept-spot-tile:hover .dept-spot-tile__arrow,
  .dept-spot-tile--media:hover .dept-spot-tile__img img {
    transform: none;
  }
}

/* ==========================================================================
   Interaction across the template: feedback on the press itself, one visible
   focus ring for keyboard users, and a still page for reduced motion.
   ========================================================================== */

.dept-page :is(.dept-btn, .dept-doc-card, .dept-category-card, .dept-service-card, .dept-spot-cover, .dept-contacts__route, .dept-contacts__social, .dept-docs-more, .dept-hero-nav__link, .dept-subnav__link, .dept-spot-gallery__btn):active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

.dept-page :is(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dept-page *,
  .dept-page *::before,
  .dept-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .dept-page :is(a, button):active {
    transform: none;
  }
}

/* ==========================================================================
   Phone: the hero shrinks to what a small screen can take in at once, the
   section links become a two-column grid that shows every section without
   sideways scrolling, and long text wraps instead of being cut.
   ========================================================================== */

@media (max-width: 768px) {
  /* Long unit names make breadcrumbs of four lines; two are enough to show the way back. */
  .dept-hero__breadcrumbs {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
  }

  .dept-bento-card--visual {
    padding: 20px;
  }

  .dept-bento-logo-wrap {
    width: 150px;
  }

  .dept-hero-nav {
    overflow: visible;
  }

  .dept-hero-nav__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dept-hero-nav__list li + li {
    border-left: none;
  }

  .dept-hero-nav__list li {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .dept-hero-nav__list li:nth-child(-n + 2) {
    border-top: none;
  }

  .dept-hero-nav__list li:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* An odd last section takes the whole row, so the grid ends square instead of with a half cell. */
  .dept-hero-nav__list li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .dept-hero-nav__link {
    justify-content: center;
    text-align: center;
    min-height: 46px;
    padding: 0 14px;
    white-space: normal;
    line-height: 1.25;
  }

  .dept-doc-card__title {
    white-space: normal;
  }

  .dept-team-contacts {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 576px) {
  /* The head of the unit as a row like the members below, a little larger: the whole upright
     portrait beside the name. Across the full width it filled the screen and lost its foot. */
  .dept-leader-dossier {
    flex-direction: row;
    align-items: center;
  }

  .dept-leader-dossier__visual {
    flex: 0 0 46%;
    width: 46%;
    aspect-ratio: 4 / 5;
    align-self: flex-start;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .dept-leader-dossier__visual img {
    object-position: center top;
  }

  .dept-leader-dossier .dept-leader-dossier__content {
    padding: 14px 14px 14px 16px;
    min-width: 0;
  }

  .dept-leader-name-tech {
    font-size: 1.25rem;
  }

  /* A larger portrait beside the name: about two fifths of the row, upright like a photo of a person.
     A small square left the faces too small to make out. */
  .dept-member-row {
    align-items: stretch;
  }

  .dept-member-row__visual {
    width: 40%;
    height: auto;
    aspect-ratio: 4 / 5;
    align-self: flex-start;
  }

  .dept-member-row__visual img {
    object-position: center top;
  }

  .dept-member-row__info {
    padding: 12px 0 12px 14px;
    justify-content: center;
  }

  .dept-contact-link {
    font-size: 0.875rem;
  }

  .dept-bento-title__small {
    font-size: 0.75rem;
  }
}

/* Phone hero: every part a size down so the whole hero fits about one screen. */
@media (max-width: 576px) {
  .dept-hero-bento {
    padding: 16px 0 24px;
  }

  .dept-bento-grid {
    gap: 10px;
  }

  .dept-bento-card {
    padding: 16px;
  }

  .dept-bento-card--main {
    gap: 14px;
  }

  .dept-bento-card__header {
    margin-bottom: 0;
  }

  .dept-hero__breadcrumbs {
    font-size: 0.75rem;
  }

  .dept-bento-title {
    font-size: 1.125rem;
    line-height: 1.25;
  }

  .dept-bento-title__small {
    margin-bottom: 8px;
  }

  .dept-bento-card--visual {
    padding: 14px;
  }

  .dept-bento-logo-wrap {
    width: 96px;
  }

  .dept-bento-card--actions {
    gap: 16px;
  }

  .dept-bento-desc {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .dept-btn {
    min-height: 44px;
    font-size: 0.8125rem;
  }

  .dept-hero-nav__link {
    min-height: 42px;
    padding: 0 12px;
    font-size: 0.8125rem;
  }

  .dept-spot-cover {
    gap: 16px;
    padding: 14px;
  }

  .dept-spot-cover__img {
    flex-basis: 88px;
  }

  .dept-spot-cover__title {
    font-size: 1rem;
  }

  .dept-spot-cover__desc {
    font-size: 0.8125rem;
  }
}

/* Phone: on a narrow screen the text on navy runs full width; panels would only eat its margins. */
@media (max-width: 576px) {
  .dept-spot--dark :is(.dept-spot__lead, .dept-spot__points) {
    padding: 0;
    background: none;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   Formatted text from the editor fields (bold, italic, links, lists): the
   same rhythm and link style wherever such a field is printed.
   ========================================================================== */

:is(.dept-mission-text, .dept-about__para, .dept-spec-text, .dept-spot__point-text, .dept-spot__note, .dept-bento-desc, .dept-task-card-modern__desc) :is(p, ul, ol) {
  margin: 0;
}

:is(.dept-mission-text, .dept-about__para, .dept-spec-text, .dept-spot__point-text, .dept-spot__note, .dept-bento-desc, .dept-task-card-modern__desc) :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: 0.6em;
}

:is(.dept-mission-text, .dept-about__para, .dept-spec-text, .dept-spot__point-text, .dept-spot__note, .dept-bento-desc, .dept-task-card-modern__desc) :is(ul, ol) {
  padding-left: 1.2em;
}

:is(.dept-mission-text, .dept-about__para, .dept-spec-text, .dept-spot__point-text, .dept-spot__note, .dept-bento-desc, .dept-task-card-modern__desc) a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s ease;
}

:is(.dept-mission-text, .dept-about__para, .dept-spec-text, .dept-spot__point-text, .dept-spot__note, .dept-bento-desc, .dept-task-card-modern__desc) a:hover {
  text-decoration-thickness: 2px;
}

/* Paragraph fields of the mission block with photos keep their own spacing. */
.dept-about__para + .dept-about__para {
  margin-top: 1em;
}

.dept-about__para {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

/* ==========================================================================
   A lone link tile is the block's call to action: filled, so it reads as a
   button at a glance (white on navy, navy on paper).
   ========================================================================== */

.dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) {
  --spot-heading: var(--spot-tag-text);
  --spot-muted: var(--spot-tag-text);
  --spot-card-border: var(--spot-tag-text);
  --spot-accent: var(--spot-tag-text);
  background: var(--spot-tag-bg);
  border-color: var(--spot-tag-bg);
  padding-top: 20px;
  padding-bottom: 20px;
}

.dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media):hover,
.dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media):focus-visible {
  background: var(--spot-tag-bg);
  border-color: var(--spot-tag-bg);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__desc,
.dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__more {
  opacity: 0.75;
}

.dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media):hover .dept-spot-tile__arrow {
  background: var(--spot-tag-text);
  border-color: var(--spot-tag-text);
  color: var(--spot-tag-bg);
}

/* ==========================================================================
   Text and photo beside a list: both columns share one height, the photo
   stretching to fill what the text leaves (never below 220px).
   ========================================================================== */

.dept-spot__body--points:not(.dept-spot__body--text) {
  align-items: stretch;
}

.dept-spot__body--points:not(.dept-spot__body--text) .dept-spot__main {
  position: static;
}

.dept-spot__body--points:not(.dept-spot__body--text) .dept-spot__main > .dept-spot__photo {
  /* Zero basis: the photo only fills what the text leaves and never sets the height itself. */
  flex: 1 1 0;
  aspect-ratio: auto;
  min-height: 220px;
}

/* The list panel ends with its content instead of stretching an empty tail below it. */
.dept-spot__body--points:not(.dept-spot__body--text) .dept-spot__points {
  align-self: start;
}

@media (max-width: 992px) {
  .dept-spot__body--points:not(.dept-spot__body--text) .dept-spot__main > .dept-spot__photo {
    flex: none;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* ==========================================================================
   Photos without empty margins. A lone photo keeps its own proportions; a
   gallery is a 4:3 frame at the top of its column that each photo fills, so
   paging never jumps and no ground shows around the picture.
   ========================================================================== */

.dept-spot .dept-spot__body .dept-spot__photo.dept-spot__photo--single {
  flex: none;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  align-self: start;
}

.dept-spot .dept-spot__body .dept-spot__photo.dept-spot__photo--single img {
  height: auto;
}

/* The slides are absolutely placed, so the frame has no width of its own: in the text column's
   flex it would shrink to nothing at the start of the row unless told to span it. */
.dept-spot .dept-spot__body .dept-spot__photo.dept-spot__photo--gallery {
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: start;
}


/*
 * Text and photo beside a list (the forum, the book of councils): the text column
 * takes half the width, and the photo under it is a low 16:9 band, so the
 * description leads and the photo only accompanies it.
 */
.dept-spot__body--points:not(.dept-spot__body--text) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dept-spot .dept-spot__body--points .dept-spot__main > .dept-spot__photo.dept-spot__photo--single {
  aspect-ratio: 16 / 9;
}

.dept-spot .dept-spot__body--points .dept-spot__main > .dept-spot__photo.dept-spot__photo--single img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 992px) {
  .dept-spot__body--points:not(.dept-spot__body--text) {
    grid-template-columns: 1fr;
  }
}

/*
 * A description of several paragraphs opens with its first one set as an
 * introduction: larger and brighter, the rest reading on at body size.
 */
.dept-spot__lead > p:first-child:not(:only-child) {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.6;
  color: color-mix(in srgb, var(--spot-heading) 90%, transparent);
}

/* A block about publications carries a faint open book in the corner of its text. */
.dept-spot--covers .dept-spot__lead {
  position: relative;
  overflow: hidden;
}

.dept-spot--covers .dept-spot__lead::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 150px;
  height: 150px;
  background: var(--spot-accent);
  opacity: 0.07;
  -webkit-mask: url("../../../media/icons/phosphor/book-open.svg") center / contain no-repeat;
  mask: url("../../../media/icons/phosphor/book-open.svg") center / contain no-repeat;
  pointer-events: none;
}

.dept-spot--covers .dept-spot__lead > * {
  position: relative;
}

/* The university arms, as small as in the site header, mark every link tile in its top right corner. */
.dept-spot-tile__crest {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.dept-spot-tile__crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The text keeps clear of the arms. */
.dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__body {
  padding-right: 36px;
}

/* In a lone wide tile the arms lead the row instead, clear of the arrow at its end. */
.dept-spot__tiles--single .dept-spot-tile__crest {
  position: static;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__body {
  padding-right: 0;
}

/*
 * A block of publications with no photo: the description keeps its own height,
 * and the space under it holds a fan of the publications' covers, opening out
 * when the pointer comes near.
 */
.dept-spot--covers .dept-spot__body--text .dept-spot__lead {
  flex: none;
}

.dept-spot--covers .dept-spot__body--text .dept-spot__lead > p:last-child:not(:first-child) {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.dept-spot__fan {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 16px 0;
}

.dept-spot__fan-item {
  position: relative;
  width: clamp(92px, 24%, 140px);
  aspect-ratio: 1 / 1.414;
  margin: 0 -18px;
  background: var(--color-white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dept-spot__fan-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.dept-spot__fan--3 .dept-spot__fan-item:nth-child(1) {
  transform: rotate(-9deg) translateY(10px);
}

.dept-spot__fan--3 .dept-spot__fan-item:nth-child(2) {
  z-index: 2;
  transform: translateY(-6px);
}

.dept-spot__fan--3 .dept-spot__fan-item:nth-child(3) {
  transform: rotate(9deg) translateY(10px);
}

.dept-spot__fan--2 .dept-spot__fan-item:nth-child(1) {
  transform: rotate(-6deg);
}

.dept-spot__fan--2 .dept-spot__fan-item:nth-child(2) {
  transform: rotate(6deg);
}

.dept-spot__main:hover .dept-spot__fan--3 .dept-spot__fan-item:nth-child(1) {
  transform: rotate(-12deg) translate(-22px, 6px);
}

.dept-spot__main:hover .dept-spot__fan--3 .dept-spot__fan-item:nth-child(2) {
  transform: translateY(-12px);
}

.dept-spot__main:hover .dept-spot__fan--3 .dept-spot__fan-item:nth-child(3) {
  transform: rotate(12deg) translate(22px, 6px);
}

@media (max-width: 992px) {
  .dept-spot__fan {
    min-height: 0;
    padding: 24px 0 8px;
  }
}

/* ==========================================================================
   Narrow screens: a lone link tile stays one compact row (arms, text, arrow)
   instead of a tall card with its label on a line of its own.
   ========================================================================== */

@media (max-width: 992px) {
  .dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px;
  }

  .dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__body {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__kicker {
    margin-bottom: 4px;
    font-size: 1.125rem;
  }

  .dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__desc {
    margin-top: 2px;
  }

  .dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__footer {
    width: auto;
    padding-top: 0;
  }

  .dept-spot__tiles--single .dept-spot-tile:not(.dept-spot-tile--media) .dept-spot-tile__more {
    display: none;
  }
}

/* ==========================================================================
   Phone: several link cards or publications run in a sideways strip, the next
   card peeking in at the edge, rather than a column several screens long.
   ========================================================================== */

@media (max-width: 576px) {
  .dept-spot__tiles:not(.dept-spot__tiles--single),
  .dept-spot__covers {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--wrap));
    padding-inline: var(--wrap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--wrap);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .dept-spot__tiles:not(.dept-spot__tiles--single)::-webkit-scrollbar,
  .dept-spot__covers::-webkit-scrollbar {
    display: none;
  }

  .dept-spot__tiles:not(.dept-spot__tiles--single) > .dept-spot-tile,
  .dept-spot__covers > .dept-spot-cover {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  /* Cards in the strip share one height; a cover keeps its page proportions at the top of its card. */
  .dept-spot__covers .dept-spot-cover__img {
    align-self: flex-start;
  }

  .dept-spot__tiles:not(.dept-spot__tiles--single) > .dept-spot-tile--media {
    min-height: 220px;
  }

  .dept-docs-grid {
    gap: 10px;
  }

  .dept-doc-card {
    padding: 14px 16px;
  }
}

/* A touch screen or a narrow one has no hover, so a document shows its icon and action from the start. */
@media (hover: none), (max-width: 992px) {
  .dept-doc-card__icon {
    color: var(--color-text-heading);
  }

  .dept-doc-card__action {
    opacity: 1;
    transform: none;
    color: var(--color-text-heading);
  }
}

/* ==========================================================================
   Gallery rows: two bands of photos running slowly in opposite directions,
   edge to edge. A photo is as tall as its row and as wide as its proportions
   make it (--ratio, set inline; Safari 15 miscounts aspect-ratio on flex
   items, so the width is worked out here), so nothing is cropped. Each track holds
   its photos twice and moves by half its length, so the loop has no seam.
   Without scripts the rows run on a CSS animation; dept-blocks.js takes them
   over (.is-js) to let them be dragged, stop under the pointer and while off
   screen. With motion turned down they stand still and move by hand.
   ========================================================================== */

.dept-marquee {
  --marquee-row: clamp(170px, 19vw, 280px);
}

/* Between the rows: a quiet navy band with the arms and the unit's name, which parts the two
   streams of photos so they do not run together. Fixed colours: a brand band in either theme. */
.dept-marquee__band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--color-blue-200);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.dept-marquee__band img {
  flex: none;
  width: 20px;
  height: 20px;
}

.dept-marquee__row {
  height: var(--marquee-row);
  overflow: hidden;
}

/* Rows the script drives: dragged sideways by hand, while the page still scrolls up and down. */
.dept-marquee.is-js .dept-marquee__row {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.dept-marquee.is-js .dept-marquee__row.is-dragging {
  cursor: grabbing;
}

.dept-marquee.is-js .dept-marquee__track {
  animation: none;
  will-change: transform;
}

.dept-marquee__item img {
  -webkit-user-drag: none;
}

.dept-marquee__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: dept-marquee var(--marquee-time, 60s) linear infinite;
}

.dept-marquee__row--back .dept-marquee__track {
  animation-direction: reverse;
}

.dept-marquee.is-offscreen .dept-marquee__track {
  animation-play-state: paused;
}

/* Only where there is a pointer: on a touch screen a tap leaves :hover stuck and the rows would stop. */
@media (hover: hover) {
  .dept-marquee:hover .dept-marquee__track {
    animation-play-state: paused;
  }

  .dept-marquee__item:hover::after {
    background: rgba(22, 41, 91, 0);
  }
}

@keyframes dept-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.dept-marquee__item {
  position: relative;
  flex: none;
  display: block;
  width: calc(var(--marquee-row) * var(--ratio, 1.5));
  height: 100%;
  overflow: hidden;
  cursor: zoom-in;
  background-color: var(--color-bg-secondary);
}

.dept-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* A light navy veil brings the photos' many colours into one key, so the moving rows read calmly;
   it lifts from the photo under the pointer. */
.dept-marquee__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 41, 91, 0.14);
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.dept-marquee__item:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: -3px;
}

.dept-marquee__hidden {
  display: none;
}

.dept-marquee__all {
  display: block;
  margin: 16px 0 0 auto;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-heading);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 5px;
  cursor: pointer;
}

.dept-marquee__all:hover,
.dept-marquee__all:focus-visible {
  text-decoration-color: currentColor;
}

@media (max-width: 767px) {
  .dept-marquee {
    --marquee-row: 150px;
  }

  .dept-marquee__band {
    min-height: 40px;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  .dept-marquee__all {
    margin-right: auto;
  }
}

/* Without scripts and with motion turned down, the rows stand still and scroll by hand. */
@media (prefers-reduced-motion: reduce) {
  .dept-marquee:not(.is-js) .dept-marquee__row {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .dept-marquee__track {
    animation: none;
  }

  .dept-marquee:not(.is-js) .dept-marquee__copy {
    display: none;
  }
}

/* ==========================================================================
   The unit's events in the look of the events calendar: the widget's own
   cards and group headings (widget-calendar.css, loaded on every page), set
   out on the page two to a row. The selectors carry .dept-events because the
   widget's sheet loads later.
   ========================================================================== */

.dept-events__group + .dept-events__group {
  margin-top: 28px;
}

/* In the panel the heading sticks to its top on a grey ground; on the page it is a plain label. */
.dept-events .calendar-group-divider {
  position: static;
  margin: 0 0 12px;
  padding: 0 0 6px;
  background: none;
}

.dept-events__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* The widget fades its cards in as the panel opens; here they are simply there. */
.dept-events .calendar-card {
  opacity: 1;
  margin-bottom: 0;
}

.dept-events .dept-events__badge--past {
  background: var(--color-border);
  color: var(--color-text-secondary);
}

.dept-events__actions {
  display: flex;
  gap: 12px;
  max-width: 560px;
  margin-top: 24px;
}

.dept-events__actions .calendar-footer-btn {
  cursor: pointer;
  font-family: inherit;
}

@media (max-width: 900px) {
  .dept-events__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .dept-events__actions {
    flex-direction: column;
    max-width: none;
  }
}

/* ==========================================================================
   Contacts call to action: a navy panel with the arms as a watermark, above
   the row of contacts, the text on the left and a white button on the right,
   like the hero. It is a designed brand object, so its colours stay the same
   in the dark theme.
   ========================================================================== */

.dept-contacts__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(20px, 2.5vw, 32px);
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 40px);
  background: var(--color-blue-200);
  color: var(--color-white);
}

/* The university arms as a faint watermark at the panel's right, as in the navy sections. */
.dept-contacts__cta::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -4%;
  bottom: -30%;
  width: min(46%, 420px);
  background: url("../../../media/departments/gerb-watermark.webp") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

.dept-contacts__cta > * {
  position: relative;
}

.dept-contacts__cta-text {
  max-width: 720px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.dept-contacts__cta-text p {
  margin: 0 0 0.4em;
}

.dept-contacts__cta-text p:last-child {
  margin-bottom: 0;
}

/* The question leads, set as a heading line; the rest reads on below it. */
.dept-contacts__cta-text p:first-child {
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-white);
}

.dept-contacts__cta-text a {
  color: var(--color-white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 3px;
}

.dept-contacts__cta-btn {
  flex: 0 0 auto;
  width: auto;
  padding: 6px 28px;
}

@media (max-width: 768px) {
  .dept-contacts__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .dept-contacts__cta-btn {
    justify-content: center;
  }
}

/* ==========================================================================
   Contacts with the way-in video: the call to action and the address on the
   left, a narrow upright video on the right, about as tall as they are, its
   caption laid over its foot. On phones the video follows the contacts.
   ========================================================================== */

.dept-contacts__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 13vw, 180px);
  gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
}

.dept-contacts__main .dept-contacts__cta:last-child {
  margin-bottom: 0;
}

.dept-contacts__way {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-blue-200);
}

.dept-contacts__way-zoom {
  display: block;
  cursor: zoom-in;
}

.dept-contacts__way-zoom:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

.dept-contacts__way-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* Fixed colours: white words on the dark foot of a photo, in either theme. */
.dept-contacts__way-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 32px 8px 8px 12px;
  background: linear-gradient(to top, rgba(10, 20, 45, 0.88), rgba(10, 20, 45, 0));
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.8125rem;
  line-height: 1.4;
  pointer-events: none;
}

.dept-contacts__way-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dept-contacts__way-caption strong {
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--color-white);
}

/* A link to the video lands here; the fixed header and the section bar must not cover it. */
.dept-contacts__way {
  scroll-margin-top: 140px;
}

/* Share: the icon alone, no ground, on the caption's line at its right; a soft shadow keeps it
   readable on any frame. «Link copied» rises above it. */
.dept-contacts__way-share {
  pointer-events: auto;
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.dept-contacts__way-share .ph-icon {
  width: 22px;
  height: 22px;
}

.dept-contacts__way-share:hover,
.dept-contacts__way-share:focus-visible {
  transform: scale(1.12);
  outline: none;
}

.dept-contacts__way-share:focus-visible .ph-icon {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}

.dept-contacts__way-share-note:empty {
  display: none;
}

.dept-contacts__way-share-note {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  padding: 6px 8px;
  background: rgba(10, 20, 45, 0.9);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  animation: dept-note-in 0.2s ease;
}

@keyframes dept-note-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .dept-contacts__layout {
    grid-template-columns: 1fr;
  }

  /* On phones the video stands under the contacts across the block's width, its caption over its foot. */
  .dept-contacts__way {
    width: 100%;
  }
}

/* ==========================================================================
   Hero logo as a background on phones (the «Фоном першого екрана» choice):
   in one column the logo's own card would stand as a stub between the text
   and the links, so it gives way to a faint copy of the logo behind them.
   ========================================================================== */

@media (max-width: 992px) {
  .dept-hero-bento--logo-bg .dept-bento-card--visual {
    display: none;
  }

  .dept-hero-bento--logo-bg .dept-bento-grid {
    position: relative;
    isolation: isolate;
  }

  .dept-hero-bento--logo-bg .dept-bento-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-logo) center / min(78%, 360px) no-repeat;
    /* A white silhouette, barely there: in colour it fought with the text laid over it. */
    filter: brightness(0) invert(1);
    opacity: 0.07;
    pointer-events: none;
  }
}

/* ==========================================================================
   Light on weak phones. Photos fade in over their previews (dept-blocks.js
   marks the ones still loading); blurring what lies behind a panel is costly
   to redraw while scrolling, so phones get the plain translucent panel.
   ========================================================================== */

.dept-page img.js-fade {
  transition: opacity 0.45s ease, transform 0.6s ease;
}

.dept-page img.is-loading {
  opacity: 0;
}

@media (max-width: 768px) {
  .dept-page *,
  .dept-page *::before,
  .dept-page *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}