/* IR-webdesign Reference presentation.
 * The index is project-owned; Reference data and detail remain RWS-owned.
 */

.site-reference h1,
.site-reference h2,
.site-reference h3,
.site-reference blockquote {
  font-family: "Playfair Display", Georgia, serif;
}

/* Reference index: project-owned catalog presentation over the public RWS Reference API. */
.site-reference--default .site-main {
  background: var(--ir-surface);
}

.ir-reference-intro__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .72fr);
  column-gap: var(--ir-gap-columns-wide);
  row-gap: 2.25rem;
}

.ir-reference-intro__heading {
  grid-column: 1;
  min-width: 0;
}

.ir-reference-intro__heading .ir-hero__title {
  max-width: none;
}

.ir-reference-intro__statement {
  max-width: 47rem;
  margin: 1.625rem 0 0;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: clamp(1.85rem, 2.5vw, 2.65rem);
  line-height: 1.3;
  font-weight: 600;
}

.ir-reference-intro__statement strong {
  color: var(--ir-coral);
  font-weight: 600;
}

.ir-reference-intro__copy {
  grid-column: 2;
  align-self: end;
  padding-bottom: .25rem;
}

.ir-reference-intro__copy p {
  max-width: 35rem;
  margin: 0;
  color: var(--ir-text-body);
  font-size: 1rem;
  line-height: 1.8;
}

.ir-reference-filter {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: center;
}

.ir-reference-filter a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;
  padding: 0 .95rem;
  border: 1px solid var(--ir-line-soft);
  border-radius: .65rem;
  color: var(--ir-ink);
  background: #fff;
  box-shadow: 0 8px 22px rgba(15,17,23,.045);
  font-size: .75rem;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ir-reference-filter a:hover,
.ir-reference-filter a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,77,77,.35);
  color: var(--ir-coral-deep);
}

.ir-reference-filter a:focus-visible {
  outline: 3px solid rgba(255,77,77,.18);
  outline-offset: 3px;
}

.ir-reference-filter a.is-active {
  border-color: var(--ir-coral);
  color: #fff;
  background: var(--ir-coral);
  box-shadow: 0 10px 22px rgba(255,77,77,.18);
}

.ir-reference-catalog {
  padding: 3.5rem 0 9.25rem;
  background: var(--ir-surface);
}

.ir-reference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 5.5rem;
  align-items: start;
}

.ir-reference-card {
  position: relative;
  min-width: 0;
}

.ir-reference-card__image {
  width: 100%;
  max-width: none;
  aspect-ratio: 161 / 136;
  margin: 0 0 1.15rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #ece7e0;
  box-shadow: 0 22px 58px rgba(15,17,23,.11);
}

.ir-reference-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  box-shadow: none;
  transition: transform .28s ease;
}

.ir-reference-card:hover .ir-reference-card__image img {
  transform: scale(1.015);
}

.ir-reference-card__body {
  min-width: 0;
}

.ir-reference-card__category,
.ir-reference-featured__category {
  margin: 0 0 .7rem;
  color: var(--ir-coral-deep);
  font-family: var(--ir-font-body);
  font-size: .7rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ir-reference-card h2 {
  margin: 0;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: clamp(1.55rem, 1.75vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: .004em;
  font-weight: 600;
}

.ir-reference-card h2 a {
  color: inherit;
  text-decoration: none;
}

.ir-reference-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ir-reference-card__summary {
  max-width: 42ch;
  margin: .75rem 0 0;
  color: #626872;
  font-size: .875rem;
  line-height: 1.68;
}

.ir-reference-tags,
.site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > ul,
.site-reference--detail .content-detail + section .article-list-item > ul {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.ir-reference-tags li,
.site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > ul li,
.site-reference--detail .content-detail + section .article-list-item > ul li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 1.85rem;
  padding: .25rem .65rem;
  border: 1px solid rgba(15,17,23,.1);
  border-radius: .55rem;
  color: #474d56;
  background: #fff;
  font-family: var(--ir-font-body);
  font-size: .68rem;
  line-height: 1.25;
  font-weight: 600;
}

.ir-reference-tags li::before,
.site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > ul li::before,
.site-reference--detail .content-detail + section .article-list-item > ul li::before {
  content: "";
  flex: 0 0 auto;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: var(--ir-coral);
}

.ir-reference-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(24rem, .82fr);
  gap: 2.75rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: 1.65rem;
  background:
    radial-gradient(circle at 92% 20%, rgba(255,77,87,.075), transparent 32%),
    #faf5f0;
  box-shadow: 0 24px 64px rgba(15,17,23,.055);
}

.ir-reference-featured__visual {
  min-width: 0;
}

.ir-reference-featured__image {
  width: 100%;
  max-width: none;
  min-height: 24rem;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15,17,23,.1);
}

.ir-reference-featured__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 24rem;
  object-fit: cover;
  object-position: top center;
}

.ir-reference-featured__copy {
  min-width: 0;
  padding: 2.25rem 2.25rem 2.25rem .25rem;
}

.ir-reference-featured__copy .ir-eyebrow {
  margin-bottom: 1.25rem;
}

.ir-reference-featured__copy h2 {
  max-width: 35rem;
  margin: 0;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: .004em;
  font-weight: 600;
}

.ir-reference-featured__lead {
  max-width: 37rem;
  margin: 1.25rem 0 0;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: clamp(1.25rem, 1.65vw, 1.65rem);
  line-height: 1.42;
  font-weight: 500;
}

.ir-reference-featured__context {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: var(--ir-text-body);
  font-size: .9rem;
  line-height: 1.72;
}

.ir-reference-featured__context > :first-child {
  margin-top: 0;
}

.ir-reference-featured__context > :last-child {
  margin-bottom: 0;
}

.ir-reference-featured__context p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.ir-reference-featured__facts {
  margin-top: 1.25rem;
}

.ir-reference-featured__link {
  position: relative;
  z-index: 2;
  margin-top: 1.4rem;
  color: var(--ir-coral-deep);
  font-size: .82rem;
}

.ir-reference-empty {
  margin: 0;
  padding: 3rem 0 1rem;
  color: var(--ir-text-body);
  font-size: 1rem;
  line-height: 1.7;
}

.ir-reference-closing h2 {
  max-width: 48rem;
  margin: 0;
  color: var(--ir-ink);
  font-size: var(--ir-h2-size);
  line-height: var(--ir-h2-line);
  letter-spacing: .004em;
  font-weight: 600;
}

.ir-reference-closing .ir-closing__lead {
  margin: var(--ir-space-title-body) 0 0;
}

@media (max-width: 74rem) {
  .ir-reference-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 66.25rem) {
  .ir-reference-intro__panel {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .ir-reference-intro__heading,
  .ir-reference-intro__copy,
  .ir-reference-filter {
    grid-column: 1;
  }

  .ir-reference-intro__copy {
    padding-bottom: 0;
  }

  .ir-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ir-reference-featured {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ir-reference-featured__copy {
    padding: 2.5rem 1.25rem 1.5rem;
  }

  .ir-reference-featured__image,
  .ir-reference-featured__image img {
    min-height: 0;
    height: auto;
  }

  .ir-reference-featured__image img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 43.75rem) {
  .ir-reference-intro__panel {
    row-gap: 1.75rem;
  }

  .ir-reference-intro__statement {
    margin-top: 1.35rem;
    font-size: clamp(1.65rem, 7.5vw, 2.1rem);
  }

  .ir-reference-filter {
    gap: .5rem;
  }

  .ir-reference-filter a {
    min-height: 2.25rem;
    padding-inline: .8rem;
  }

  .ir-reference-catalog {
    padding-top: 2.75rem;
    padding-bottom: 6.5rem;
  }

  .ir-reference-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 4.25rem;
  }

  .ir-reference-featured {
    padding: .9rem;
    border-radius: 1.25rem;
  }

  .ir-reference-featured__image {
    border-radius: 1rem;
  }

  .ir-reference-featured__copy {
    padding: 2rem .75rem 1rem;
  }

  .ir-reference-card h2 {
    font-size: 1.75rem;
  }

  .ir-reference-closing h2 {
    font-size: var(--ir-h2-size-mobile);
  }
}

/* Reference detail: project-owned presentation over the RWS detail markup. */
.site-reference--detail .site-main {
  overflow-x: clip;
  background: var(--ir-surface);
}

.site-reference--detail .content-detail {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Full-width surfaces surround the same content container as other pages.
 * This also keeps the original, uncomposed markup readable without JS. */
.site-reference--detail .content-detail > :not(.ir-reference-detail-hero),
.site-reference--detail .content-detail + section {
  width: min(calc(100% - 4rem), var(--ir-container));
  max-width: none;
  margin-inline: auto;
}

.ir-reference-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  column-gap: var(--ir-gap-columns-tight);
  align-items: start;
}

.ir-reference-hero__copy {
  min-width: 0;
}

.ir-reference-hero__grid--without-image {
  grid-template-columns: 1fr;
}

.site-reference--detail .content-detail-header {
  max-width: none;
  margin: 54px 0 24px;
}

.site-reference--detail .content-detail-title {
  margin: 0;
  font-size: clamp(58px, 6vw, 86px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 600;
}

.site-reference--detail .content-detail-perex {
  max-width: 38ch;
  margin: 27px 0 0;
  color: var(--ir-text-body);
  font-size: 18px;
  line-height: 1.75;
}

.site-reference--detail .ir-reference-detail-hero--with-intro .content-detail-perex {
  color: var(--ir-ink);
  font-weight: 700;
}

.ir-reference-hero__intro {
  margin-top: var(--ir-space-body-body);
}

/* The RWS metadata partial emits group badges, item badges, then axes. */
.site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > ul {
  margin: .5rem 0 0;
}

.site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  width: 100%;
  margin: 1.5rem 0 0;
}
/* Without JavaScript the dt/dd pairs remain readable in document order. */
.site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > dl > dt { grid-column: 1 / -1; font-weight: 700; }
.site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > dl > dd { grid-column: 1 / -1; margin: -.75rem 0 0; }
.site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > dl .ir-reference-fact {
  min-width: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--ir-line-soft);
  border-radius: .8rem;
  background: #fff;
}
.site-reference--detail .ir-reference-fact dt {
  margin: 0 0 .25rem;
  color: var(--ir-text-muted);
  font-family: var(--ir-font-body);
  font-size: .68rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-reference--detail .ir-reference-fact dd {
  min-width: 0;
  margin: 0;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 600;
}

.site-reference--detail :is(.content-detail, .ir-reference-hero__grid) > .media-main-image {
  grid-column: 2;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #ece7e0;
  box-shadow: 0 30px 80px rgba(15,17,23,.14);
}
.site-reference--detail :is(.content-detail, .ir-reference-hero__grid) > .media-main-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

/* Section order is marked by the project presentation script. Every visible
 * section, including optional media and related references, participates. */
.site-reference--detail .ir-reference-band {
  --ir-reference-band: var(--ir-surface);
  position: relative;
  z-index: 0;
  display: flow-root;
  margin-block: 0;
  padding: var(--ir-section-compact);
}
.site-reference--detail .ir-reference-band--soft {
  --ir-reference-band: var(--ir-surface-soft);
}
.site-reference--detail .ir-reference-band::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--ir-reference-band);
  pointer-events: none;
}

/* The opening p and first h2 occupy the left column; remaining editor content
 * flows independently on the right. Preserve the established text spacing. */
.site-reference--detail .content-detail > .page-block {
  --ir-reference-column-gap: var(--ir-gap-columns-tight);
  --ir-reference-heading-width: calc((100% - var(--ir-reference-column-gap)) * .41);
  display: flow-root;
  padding: 100px 0 108px;
}
.site-reference--detail .page-block > * { min-width: 0; }
.site-reference--detail .page-block > p:first-child {
  margin: 0 0 1.25rem;
  color: var(--ir-coral-deep);
  font-family: var(--ir-font-body);
  font-size: .75rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-reference--detail .page-block > p:first-child::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 10px;
  background: var(--ir-coral);
}
.site-reference--detail .page-block > p:first-child strong { font: inherit; }
.site-reference--detail .page-block > h2:first-of-type {
  margin: 0;
  color: var(--ir-ink);
  font-size: clamp(38px, 3.8vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 600;
}
.site-reference--detail .page-block > h2:not(:first-of-type) {
  margin: 2.5rem 0 1rem;
  color: var(--ir-ink);
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  line-height: 1.2;
}
.site-reference--detail .page-block > p:not(:first-child) {
  max-width: var(--ir-width-copy);
  margin: 0 0 var(--ir-space-body-body);
  color: var(--ir-text-body);
  font-family: var(--ir-font-body);
  font-size: var(--ir-body-size);
  line-height: var(--ir-body-line);
}
.site-reference--detail .page-block > p:not(:first-child) strong { color: var(--ir-ink); }
.site-reference--detail .page-block > ul,
.site-reference--detail .page-block > ol {
  max-width: var(--ir-width-copy);
  margin: .5rem 0 1.5rem;
  padding-left: 1.35em;
  color: var(--ir-text-body);
  font-family: var(--ir-font-body);
  font-size: var(--ir-body-size);
  line-height: var(--ir-body-line);
}
.site-reference--detail .page-block ul { list-style: disc; }
.site-reference--detail .page-block ol { list-style: decimal; }
.site-reference--detail .page-block li + li { margin-top: .5em; }
.site-reference--detail .page-block li::marker { color: var(--ir-coral); }
.site-reference--detail .page-block a { color: var(--ir-ink); text-underline-offset: .16em; }
.site-reference--detail .page-block > blockquote {
  margin: 1.5rem 0 2rem;
}

/* Floats retain the existing flat editor HTML. The fixed column offset keeps
 * all body elements on the right even below the heading; flow-root makes the
 * band contain whichever column is taller. No shared grid rows stretch p's. */
.site-reference--detail .page-block > :is(p:first-child, h2:first-of-type) {
  float: left;
  clear: left;
  width: var(--ir-reference-heading-width);
}
.site-reference--detail .page-block > :not(:is(p:first-child, h2:first-of-type)) {
  margin-left: calc(var(--ir-reference-heading-width) + var(--ir-reference-column-gap));
}

/* Reference detail gallery: use the full content width and preserve each uploaded crop. */
.site-reference--detail .content-detail > .media-gallery .media-gallery-title,
.site-reference--detail .content-detail > .media-files .media-files-title {
  margin: 0 0 36px;
  color: var(--ir-ink);
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 600;
}

.site-reference--detail .content-detail > .media-files {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.site-reference--detail .content-detail > .media-gallery .media-gallery-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px 32px;
  align-items: start;
}

.site-reference--detail .content-detail > .media-gallery .media-gallery-item {
  min-width: 0;
  margin: 0;
}

.site-reference--detail .content-detail > .media-gallery .media-gallery-link {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: #faf8f5;
  box-shadow: 0 22px 58px rgba(15,17,23,.09);
  transition: transform .2s ease, box-shadow .2s ease;
}

.site-reference--detail .content-detail > .media-gallery .media-gallery-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 66px rgba(15,17,23,.12);
}

.site-reference--detail .content-detail > .media-gallery .media-gallery-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.site-reference--detail .content-detail > .media-gallery .media-gallery-caption {
  margin: 12px 2px 0;
  color: #6b717a;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1060px) {
  .ir-reference-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--ir-hero-gap);
  }

  .site-reference--detail :is(.content-detail, .ir-reference-hero__grid) > .media-main-image {
    grid-column: 1;
    max-width: 780px;
    height: auto;
  }

  .site-reference--detail .content-detail-header {
    margin-top: 0;
  }

  .site-reference--detail .content-detail > .media-gallery .media-gallery-items {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .site-reference--detail .content-detail > .page-block {
    padding: 76px 0 84px;
  }

  .site-reference--detail .page-block > :is(p:first-child, h2:first-of-type) {
    float: none;
    clear: none;
    width: auto;
  }

  .site-reference--detail .page-block > :not(:is(p:first-child, h2:first-of-type)) {
    margin-left: 0;
  }

  .site-reference--detail .page-block > h2:first-of-type + * {
    margin-top: 1.5rem;
  }
}

@media (max-width: 43.75em) {
  .site-reference--detail .content-detail > :not(.ir-reference-detail-hero),
  .site-reference--detail .content-detail + section {
    width: min(calc(100% - 2.25rem), var(--ir-container));
  }

  .site-reference--detail .ir-reference-band {
    padding: var(--ir-section-mobile);
  }
}

@media (max-width: 720px) {
  .site-reference--detail .content-detail-title {
    font-size: clamp(48px, 15vw, 66px);
  }

  .site-reference--detail :is(.content-detail, .ir-reference-hero__grid) > .media-main-image {
    height: auto;
    border-radius: 18px;
  }

  .site-reference--detail .content-detail > .media-gallery .media-gallery-title,
  .site-reference--detail .content-detail > .media-files .media-files-title {
    margin-bottom: 26px;
    font-size: clamp(31px, 9vw, 40px);
  }

  .site-reference--detail .content-detail > .media-gallery .media-gallery-link {
    border-radius: 16px;
  }

  .site-reference--detail .content-detail > .page-block {
    padding: 68px 0 74px;
  }
  .site-reference--detail :is(.content-detail, .ir-reference-hero__copy) > dl {
    grid-template-columns: 1fr;
  }
  .site-reference--detail .page-block > h2:first-of-type {
    font-size: clamp(34px, 10vw, 48px);
  }
}

/* Related references on Reference detail: reuse the visual language of the Reference index. */
.site-reference--detail .content-detail + section > h2 {
  margin: 0 0 42px;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: clamp(2.375rem, 3.5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: .004em;
  font-weight: 600;
}

.site-reference--detail .content-detail + section .article-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px 34px;
}

.site-reference--detail .content-detail + section .article-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.site-reference--detail .content-detail + section .article-list-item > ul {
  order: 5;
  align-self: stretch;
}

.site-reference--detail .content-detail + section .article-list-item > .media-main-image {
  order: 1;
  width: 100%;
  max-width: none;
  aspect-ratio: 161 / 136;
  margin: 0 0 19px;
  overflow: hidden;
  border-radius: 20px;
  background: #ece7e0;
  box-shadow: 0 22px 58px rgba(15,17,23,.11);
}

.site-reference--detail .content-detail + section .article-list-item > .media-main-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  box-shadow: none;
  transition: transform .28s ease;
}

.site-reference--detail .content-detail + section .article-list-item:hover > .media-main-image img {
  transform: scale(1.015);
}

.site-reference--detail .content-detail + section .article-list-item > dl {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  color: var(--ir-coral-deep);
  font-family: var(--ir-font-body);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-reference--detail .content-detail + section .article-list-item > dl dt {
  display: none;
}

.site-reference--detail .content-detail + section .article-list-item > dl dd {
  margin: 0;
}

.site-reference--detail .content-detail + section .article-list-item > h2,
.site-reference--detail .content-detail + section .article-list-item > h3 {
  order: 3;
  margin: 9px 0 10px;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: clamp(1.625rem, 2.1vw, 2rem);
  line-height: 1.2;
  letter-spacing: .004em;
  font-weight: 600;
}

.site-reference--detail .content-detail + section .article-list-item > h2 a,
.site-reference--detail .content-detail + section .article-list-item > h3 a {
  color: var(--ir-ink);
  text-decoration: none;
}

.site-reference--detail .content-detail + section .article-list-item > h2 a::after,
.site-reference--detail .content-detail + section .article-list-item > h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.site-reference--detail .content-detail + section .article-list-item > p {
  order: 4;
  max-width: 44ch;
  margin: 0;
  color: #626872;
  font-family: var(--ir-font-body);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .site-reference--detail .content-detail + section > h2 {
    margin-bottom: 30px;
    font-size: clamp(2.125rem, 10vw, 2.75rem);
  }

  .site-reference--detail .content-detail + section .article-list {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}