/* ==========================================================================
   IBRA — Award list

   The problem this layout solves is a long award name on the left and a
   short stack of links on the right, repeated fifteen times. Floated
   columns drift apart as soon as one description runs to four lines; a
   grid row keeps the links level with the name they belong to, which is
   what makes the list scannable rather than a wall.
   ========================================================================== */

.ibra-awards__inner {
  max-width: var(--ibra-max, 1240px);
  margin-inline: auto;
}

/* Heading ---------------------------------------------------------------- */

.ibra-awards__heading {
  position: relative;
  margin: 0 0 14px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.ibra-awards__heading--center { text-align: center; }

/* A short bar rather than a full underline: it marks the heading without
   drawing a line across the page that the rows below already own. */
.ibra-awards__heading.has-rule { padding-bottom: 14px; }

.ibra-awards__heading.has-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 190px;
  max-width: 40%;
  height: 3px;
  background: var(--accent, #7E1220);
}

.ibra-awards__heading--center.has-rule::after {
  left: 50%;
  transform: translateX(-50%);
}

/* The copy runs the full width of the list below it and reads from the
   left, whatever the heading above is doing. A centred heading is a title;
   centred body copy is a ragged left edge the eye has to find again on
   every line. */
.ibra-awards__intro {
  margin: 0 0 34px;
  line-height: 1.65;
  text-align: left;
}

.ibra-awards__intro p { margin: 0 0 .8em; }
.ibra-awards__intro p:last-child { margin-bottom: 0; }

/* The list --------------------------------------------------------------- */

.ibra-awards__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ibra-awards__item { padding: 24px 0; }

/* The row is a grid INSIDE the item, not the item itself: a panel has to
   span both columns, and a grid child cannot do that from within a cell. */
.ibra-awards__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--actions-w, 260px);
  align-items: start;
  gap: 10px 40px;
}

.ibra-awards--actions-left .ibra-awards__row {
  grid-template-columns: var(--actions-w, 260px) minmax(0, 1fr);
}

.ibra-awards--actions-left .ibra-awards__main { order: 2; }
.ibra-awards--actions-left .ibra-awards__actions { order: 1; }

/* A rule between rows, not around the block: the first row needs no line
   above it and the last none below. */
.ibra-awards.has-rules .ibra-awards__item + .ibra-awards__item {
  border-top: 1px solid rgba(16, 38, 48, .12);
}

/* Left: the award ---------------------------------------------------------
   The name carries the accent; the description is set back so a reader
   scanning names is not fighting the body copy for attention. */

.ibra-awards__main { min-width: 0; }

.ibra-awards__title {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--accent, #7E1220);
  text-wrap: pretty;
}

.ibra-awards__title a {
  color: inherit !important;
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .3s ease;
}

.ibra-awards__title a:hover,
.ibra-awards__title a:focus { background-size: 100% 1px; }

.ibra-awards__title a:focus-visible {
  outline: 2px solid var(--accent, #7E1220);
  outline-offset: 3px;
}

.ibra-awards__detail {
  font-size: .89rem;
  line-height: 1.6;
  color: #4A5862;
  max-width: 72ch;
}

.ibra-awards__detail p { margin: 0 0 .6em; }
.ibra-awards__detail p:last-child { margin-bottom: 0; }
.ibra-awards__detail ul { margin: .4em 0; padding-left: 1.1em; }

/* Right: what a reader can do --------------------------------------------
   Stacked, right aligned to the column edge, each with an arrow that
   moves on hover. The arrow is what tells the reader these are links
   rather than a caption, without underlining four lines of text. */

.ibra-awards__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.ibra-awards--actions-right .ibra-awards__actions { align-items: flex-end; text-align: right; }
.ibra-awards--actions-left .ibra-awards__actions { align-items: flex-start; }

.ibra-awards__actions:empty { display: none; }

.ibra-awards__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.35;
  color: #22333F !important;
  text-decoration: none !important;
  transition: color .2s ease;
}

.ibra-awards--actions-right .ibra-awards__action { flex-direction: row-reverse; }

.ibra-awards__arrow {
  flex: none;
  width: 18px;
  height: 8px;
  opacity: .55;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

.ibra-awards--actions-right .ibra-awards__arrow { transform: scaleX(-1); }

.ibra-awards__action:hover { color: var(--accent, #7E1220) !important; }
.ibra-awards__action:hover .ibra-awards__arrow { opacity: 1; transform: translateX(3px); }
.ibra-awards--actions-right .ibra-awards__action:hover .ibra-awards__arrow { transform: scaleX(-1) translateX(3px); }

.ibra-awards__action:focus-visible {
  outline: 2px solid var(--accent, #7E1220);
  outline-offset: 3px;
}

/* A button in the links column ------------------------------------------
   The theme styles every <button> as a solid pill. These are links that
   happen to open a panel, so everything the theme applies is undone and
   the anchor's appearance is used instead. */

.ibra-awards__action {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: inherit !important;
  text-transform: none !important;
  cursor: pointer;
}

.ibra-awards__chev {
  flex: none;
  width: 10px;
  height: 6px;
  opacity: .55;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

.ibra-awards__action:hover .ibra-awards__chev { opacity: 1; }
.ibra-awards__action.is-open .ibra-awards__chev { transform: rotate(180deg); opacity: 1; }
.ibra-awards__action.is-open { color: var(--accent, #7E1220) !important; }

/* Panels -----------------------------------------------------------------
   Height is animated from a measured pixel value and handed back to auto
   once the transition ends, so a photograph that loads late or a form
   that resizes is never clipped. */

.ibra-awards__panel.is-collapsible {
  overflow: hidden;
  transition: height .35s cubic-bezier(.4, 0, .2, 1);
}

/* The closed height must NOT apply while the panel is open. The script
   animates to a measured height and then clears the inline value so the
   panel can grow — a photograph loading late, a form resizing itself. If
   this rule were unguarded, clearing that value would fall back to zero
   and the panel would snap shut the moment it finished opening. */
.ibra-awards__panel.is-collapsible:not(.is-open) { height: 0; }

/* No padding on the panel itself: with height 0 the padding would still
   add its own height and leave a closed panel showing a gap. The space
   goes on the first child, where it collapses away with the content. */
.ibra-awards__panel { padding: 0; }
.ibra-awards__panel > * { margin-top: 0; }
.ibra-awards__panel > *:first-child { margin-top: 20px; }
.ibra-awards__panel > * + * { margin-top: 18px; }

.ibra-awards__panel-copy {
  max-width: 72ch;
  font-size: .89rem;
  line-height: 1.65;
  color: #4A5862;
}

.ibra-awards__panel-copy p { margin: 0 0 .7em; }
.ibra-awards__panel-copy p:last-child { margin-bottom: 0; }

.ibra-awards__pending {
  padding: 14px 18px;
  border: 1px dashed rgba(16, 38, 48, .25);
  border-radius: 6px;
  font-size: .85rem;
  color: #6B7A85;
  background: rgba(16, 38, 48, .02);
}

.ibra-awards__form { max-width: 620px; }

/* The awardee grid -------------------------------------------------------
   Square photographs rather than circles, which is what a formal portrait
   wants: a circle crops the shoulders and pushes every face to the same
   size whether the original was tight or wide.

   auto-fill rather than a fixed column count, so the number per row
   follows the width instead of a guess at one. */

.ibra-awards__people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 170px), 1fr));
  gap: 26px 22px;
  padding: 0 0 6px;
  list-style: none;
}

.ibra-awards__person {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ibra-awards__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #E7EDF1;
  display: grid;
  place-items: center;
  /* It can be a div, an <a> or a <button>; the theme styles the last of
     those as a solid pill, so everything it applies is undone here. */
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  text-decoration: none !important;
  font: inherit;
  color: inherit;
  appearance: none;
}

.ibra-awards__photo.is-interactive { cursor: pointer; }

.ibra-awards__photo.is-interactive:focus-visible {
  outline: 2px solid var(--accent, #7E1220);
  outline-offset: 3px;
}

.ibra-awards--photo-4-5 .ibra-awards__photo { aspect-ratio: 4 / 5; }
.ibra-awards--photo-3-4 .ibra-awards__photo { aspect-ratio: 3 / 4; }
.ibra-awards--photo-4-3 .ibra-awards__photo { aspect-ratio: 4 / 3; }

.ibra-awards__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit high in a portrait, so a square crop should keep the top */
  object-position: 50% 22%;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* Hover ------------------------------------------------------------------
   Set by the option rather than always on: a wall of portraits that all
   move at once is busier than it is premium. */

.ibra-awards--hover-zoom .ibra-awards__person:hover .ibra-awards__photo img,
.ibra-awards--hover-both .ibra-awards__person:hover .ibra-awards__photo img {
  transform: scale(1.045);
}

.ibra-awards__person {
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.ibra-awards--hover-lift .ibra-awards__person:hover,
.ibra-awards--hover-both .ibra-awards__person:hover {
  transform: translateY(-4px);
}

/* Muted until hovered. Portraits come from twenty different photographers
   over twenty years; a common treatment is the one thing that makes them
   read as one set, and the colour returns on the one being looked at. */
.ibra-awards.is-mono .ibra-awards__photo img {
  filter: grayscale(1) contrast(1.02);
  opacity: .9;
  transition: filter .4s ease, opacity .4s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}

.ibra-awards.is-mono .ibra-awards__person:hover .ibra-awards__photo img,
.ibra-awards.is-mono .ibra-awards__person:focus-within .ibra-awards__photo img {
  filter: none;
  opacity: 1;
}

/* Card styles ------------------------------------------------------------
   'shadow' lifts the photograph off the page; 'card' puts the photograph
   and the name on one white panel, which suits a page with a tinted
   background where a bare photograph would float. */

.ibra-awards--cards-shadow .ibra-awards__photo {
  box-shadow:
    0 1px 2px rgba(16, 38, 48, .06),
    0 10px 24px -14px rgba(16, 38, 48, .45);
  transition: box-shadow .3s ease;
}

.ibra-awards--cards-shadow .ibra-awards__person:hover .ibra-awards__photo {
  box-shadow:
    0 2px 4px rgba(16, 38, 48, .08),
    0 22px 40px -20px rgba(16, 38, 48, .55);
}

.ibra-awards--cards-card .ibra-awards__person {
  gap: 0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(16, 38, 48, .1),
    0 1px 2px rgba(16, 38, 48, .04);
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}

.ibra-awards--cards-card .ibra-awards__photo { border-radius: 0; }

.ibra-awards--cards-card .ibra-awards__who { padding: 14px 15px 16px; }

.ibra-awards--cards-card .ibra-awards__person:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent, #7E1220) 28%, transparent),
    0 2px 4px rgba(16, 38, 48, .06),
    0 22px 40px -22px rgba(16, 38, 48, .5);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .ibra-awards--cards-card .ibra-awards__person:hover {
    box-shadow:
      inset 0 0 0 1px rgba(126, 18, 32, .28),
      0 2px 4px rgba(16, 38, 48, .06),
      0 22px 40px -22px rgba(16, 38, 48, .5);
  }
}

/* The cue ----------------------------------------------------------------
   A clickable photograph needs to say so. It appears on hover and on
   keyboard focus, and sits opposite the year so the two never collide. */

.ibra-awards__cue {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  background: rgba(10, 24, 34, .72);
  color: #fff;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ibra-awards__cue svg { width: 13px; height: 13px; }

.ibra-awards__person:hover .ibra-awards__cue,
.ibra-awards__photo.is-interactive:focus-visible .ibra-awards__cue {
  opacity: 1;
  transform: none;
}

.ibra-awards__initials {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9DAEBA;
}

.ibra-awards__year {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(10, 24, 34, .74);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.ibra-awards__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ibra-awards__person-name {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  color: #22333F;
}

.ibra-awards__affil {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: #6B7A85;
}

/* The icon is the only link on the card, so it needs to look like one
   without a label taking a whole line. */
.ibra-awards__li {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 5px;
  border-radius: 3px;
  color: #5B6770 !important;
  background: rgba(16, 38, 48, .06);
  transition: background-color .2s ease, color .2s ease;
}

.ibra-awards__li svg { width: 14px; height: 14px; }

.ibra-awards__li:hover,
.ibra-awards__li:focus {
  background: #0A66C2;
  color: #fff !important;
}

.ibra-awards__li:focus-visible {
  outline: 2px solid var(--accent, #7E1220);
  outline-offset: 2px;
}

/* An outlined box ---------------------------------------------------------
   For the one action that opens a list rather than a form — it reads as a
   thing to open rather than as a third link in a stack.

   No chevron inside: the box is already the affordance, and a chevron
   inside a bordered chip reads as a select. The open state is carried by
   the fill instead, which is a stronger signal than a rotated arrow. */

.ibra-awards__action--box {
  padding: 8px 16px !important;
  border: 1px solid color-mix(in srgb, var(--accent, #7E1220) 45%, transparent) !important;
  border-radius: 3px !important;
  color: var(--accent, #7E1220) !important;
  font-weight: 600 !important;
  background: transparent !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .ibra-awards__action--box { border-color: rgba(126, 18, 32, .45) !important; }
}

.ibra-awards__action--box .ibra-awards__chev { display: none; }

.ibra-awards__action--box:hover {
  border-color: var(--accent, #7E1220) !important;
  background: color-mix(in srgb, var(--accent, #7E1220) 7%, transparent) !important;
  color: var(--accent, #7E1220) !important;
}

.ibra-awards__action--box.is-open {
  background: var(--accent, #7E1220) !important;
  border-color: var(--accent, #7E1220) !important;
  color: #fff !important;
}

.ibra-awards__action--box:focus-visible {
  outline: 2px solid var(--accent, #7E1220);
  outline-offset: 2px;
}

/* Emphasis --------------------------------------------------------------- */

.ibra-awards__action--strong {
  font-weight: 700;
  color: var(--accent, #7E1220) !important;
}

.ibra-awards__action--strong .ibra-awards__arrow,
.ibra-awards__action--strong .ibra-awards__chev { opacity: .85; }

.ibra-awards__action--quiet {
  font-weight: 500;
  font-size: .8rem;
  color: #6B7A85 !important;
}

/* Responsive --------------------------------------------------------------
   Below the breakpoint the two columns become one. The links keep their
   order under the description, but lay out in a wrapping row rather than
   a tall stack, which would otherwise double the height of every row. */

@media (max-width: 899px) {
  .ibra-awards__row,
  .ibra-awards--actions-left .ibra-awards__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ibra-awards__item { padding: 22px 0; }

  .ibra-awards--actions-left .ibra-awards__main,
  .ibra-awards--actions-left .ibra-awards__actions { order: 0; }

  .ibra-awards__actions,
  .ibra-awards--actions-right .ibra-awards__actions,
  .ibra-awards--actions-left .ibra-awards__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 8px 22px;
  }

  .ibra-awards--actions-right .ibra-awards__action { flex-direction: row; }
  .ibra-awards--actions-right .ibra-awards__arrow { transform: none; }
  .ibra-awards--actions-right .ibra-awards__action:hover svg { transform: translateX(3px); }
}

@media (max-width: 520px) {
  .ibra-awards__title { font-size: .96rem; }
  .ibra-awards__detail { font-size: .85rem; }
  .ibra-awards__heading.has-rule::after { max-width: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .ibra-awards__action,
  .ibra-awards__action--box,
  .ibra-awards__arrow,
  .ibra-awards__chev,
  .ibra-awards__panel,
  .ibra-awards__title a { transition: none !important; }
  .ibra-awards__action:hover .ibra-awards__arrow { transform: none !important; }
  .ibra-awards--actions-right .ibra-awards__action:hover .ibra-awards__arrow { transform: scaleX(-1) !important; }
}

/* ==========================================================================
   The awardee pop-up

   A <dialog>, so the focus trap, the backdrop and Escape are the browser's
   job rather than this file's. Only the appearance is set here.
   ========================================================================== */

.ibra-awards__modal {
  width: min(880px, calc(100vw - 40px));
  max-height: min(78vh, 620px);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #22333F;
  box-shadow: 0 30px 80px -30px rgba(10, 24, 34, .7);
  overflow: hidden;
}

.ibra-awards__modal::backdrop {
  background: rgba(8, 20, 28, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Browsers without <dialog> get the same box, positioned by hand */
.ibra-awards__modal.is-fallback {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* The scrolling column needs a height it can actually resolve against.
   `height: 100%` inside a box whose own height is auto resolves to auto,
   so the grid row grew to fit the citation, the dialog hit its max-height,
   and `overflow: hidden` simply cut the text off with no scrollbar. The
   limit therefore goes on the column itself, in units that always
   resolve. */
.ibra-awards__modal-body {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: stretch;
}

/* Without a citation there is nothing to put beside the photograph */
.ibra-awards__modal-body:not(:has(.ibra-awards__modal-text)) {
  grid-template-columns: 1fr;
}

.ibra-awards__modal-body:not(:has(.ibra-awards__modal-text)) .ibra-awards__modal-aside {
  flex-direction: row;
  align-items: center;
  gap: 22px;
}

.ibra-awards__modal-body:not(:has(.ibra-awards__modal-text)) .ibra-awards__modal-photo {
  flex: 0 0 200px;
}

/* The left column ---------------------------------------------------------
   Photograph and identity together. Putting the name here rather than
   above the citation is what stops this column ending in a tall empty
   panel when the citation runs long — which is exactly what it did when
   the photograph was the only thing in it. */

.ibra-awards__modal-aside {
  display: flex;
  flex-direction: column;
  background: #F2F5F7;
  border-right: 1px solid rgba(16, 38, 48, .08);
  overflow: hidden auto;
  min-height: 0;
  max-height: min(78vh, 620px);
  box-sizing: border-box;
}

.ibra-awards__modal-photo {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 5;
  background: #E7EDF1;
  overflow: hidden;
}

.ibra-awards__modal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.ibra-awards--photo-1-1 .ibra-awards__modal-photo { aspect-ratio: 1 / 1; }
.ibra-awards--photo-4-3 .ibra-awards__modal-photo { aspect-ratio: 4 / 3; }
.ibra-awards--photo-3-4 .ibra-awards__modal-photo { aspect-ratio: 3 / 4; }

.ibra-awards__modal-id {
  padding: 18px 20px 22px;
  box-sizing: border-box;
}

.ibra-awards__modal-year {
  margin: 0 0 7px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent, #7E1220);
  font-variant-numeric: tabular-nums;
}

.ibra-awards__modal-name {
  margin: 0 0 4px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #16222B;
}

.ibra-awards__modal-affil {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: #6B7A85;
}

.ibra-awards__modal-li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 7px 13px;
  border-radius: 3px;
  background: #0A66C2;
  color: #fff !important;
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .2s ease;
}

.ibra-awards__modal-li svg { width: 13px; height: 13px; }
.ibra-awards__modal-li:hover { background: #084d92; color: #fff !important; }

/* The right column --------------------------------------------------------
   Only the citation scrolls; the identity beside it stays put, so a
   reader partway down a long citation can still see whose it is. */

.ibra-awards__modal-text {
  padding: 30px 34px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* the page behind must not scroll on */
  min-height: 0;
  max-height: min(78vh, 620px);
  /* The theme does not set border-box globally, and without it the 62px of
     padding is added on top of the limit — which pushed the column past
     the dialog and clipped the last inch of the scroll. */
  box-sizing: border-box;
}

.ibra-awards__modal-bio {
  font-size: .89rem;
  line-height: 1.7;
  color: #4A5862;
  max-width: 62ch;
}

.ibra-awards__modal-bio p { margin: 0 0 1em; }
.ibra-awards__modal-bio p:last-child { margin-bottom: 0; }
.ibra-awards__modal-bio ul,
.ibra-awards__modal-bio ol { margin: .6em 0 1em; padding-left: 1.2em; }
.ibra-awards__modal-bio li { margin-bottom: .35em; }

/* A line break inside a paragraph is how most editors separate two
   thoughts. Left alone the two run together, so a break is given a
   little air rather than none at all. */
.ibra-awards__modal-bio br { content: ""; display: block; height: .5em; }

/* Headings, so a citation with sections reads as one */
.ibra-awards__modal-bio h1,
.ibra-awards__modal-bio h2,
.ibra-awards__modal-bio h3,
.ibra-awards__modal-bio h4,
.ibra-awards__modal-bio h5,
.ibra-awards__modal-bio h6 {
  margin: 1.5em 0 .5em;
  font-size: .72rem !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #16222B !important;
}

.ibra-awards__modal-bio > :first-child { margin-top: 0 !important; }

.ibra-awards__modal-bio a {
  color: var(--accent, #7E1220) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ibra-awards__modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #33475B !important;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(16, 38, 48, .2);
  transition: background-color .2s ease, color .2s ease;
}

.ibra-awards__modal-close svg { width: 11px; height: 11px; }

.ibra-awards__modal-close:hover {
  background: #16222B !important;
  color: #fff !important;
}

.ibra-awards__modal-close:focus-visible {
  outline: 2px solid var(--accent, #7E1220);
  outline-offset: 2px;
}

@media (max-width: 679px) {
  .ibra-awards__modal { max-height: 86vh; }

  /* Stacked, the identity comes first and the citation scrolls under it */
  .ibra-awards__modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .ibra-awards__modal-aside {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(16, 38, 48, .08);
  }

  .ibra-awards__modal-photo,
  .ibra-awards--photo-1-1 .ibra-awards__modal-photo {
    flex: 0 0 96px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
  }

  .ibra-awards__modal-id { padding: 0; }
  .ibra-awards__modal-li { margin-top: 10px; }
  .ibra-awards__modal-text { padding: 20px 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ibra-awards__person,
  .ibra-awards__cue,
  .ibra-awards__photo img,
  .ibra-awards__modal-close { transition: none !important; }
  .ibra-awards--hover-lift .ibra-awards__person:hover,
  .ibra-awards--hover-both .ibra-awards__person:hover { transform: none !important; }
  .ibra-awards--hover-zoom .ibra-awards__person:hover .ibra-awards__photo img,
  .ibra-awards--hover-both .ibra-awards__person:hover .ibra-awards__photo img { transform: none !important; }
}

/* ==========================================================================
   Pop-up: photograph across the top

   The alternative arrangement. The photograph gets the full width as a
   shallow band and the identity sits over its lower edge, so the space the
   band costs is paid back — nothing is stacked underneath it.

   A deep photograph here would push the citation below the fold on every
   open, which is the reason the side arrangement remains the default.
   ========================================================================== */

.ibra-awards--modal-top .ibra-awards__modal {
  width: min(680px, calc(100vw - 40px));
}

.ibra-awards--modal-top .ibra-awards__modal-body {
  grid-template-columns: minmax(0, 1fr);
}

.ibra-awards--modal-top .ibra-awards__modal-aside {
  position: relative;
  flex-direction: column;
  border-right: 0;
  border-bottom: 1px solid rgba(16, 38, 48, .08);
  max-height: none;
  overflow: hidden;
}

.ibra-awards--modal-top .ibra-awards__modal-photo,
.ibra-awards--modal-top.ibra-awards--photo-1-1 .ibra-awards__modal-photo,
.ibra-awards--modal-top.ibra-awards--photo-4-3 .ibra-awards__modal-photo,
.ibra-awards--modal-top.ibra-awards--photo-3-4 .ibra-awards__modal-photo {
  aspect-ratio: 20 / 9;
}

/* A face sits high in a portrait, and a shallow band crops hard, so the
   frame is held near the top rather than the middle. */
.ibra-awards--modal-top .ibra-awards__modal-photo img { object-position: 50% 28%; }

/* Over the photograph, on a scrim that only darkens the lower edge */
.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-id {
  position: absolute;
  inset: auto 0 0;
  padding: 44px 24px 18px;
  background: linear-gradient(to top,
    rgba(7, 20, 30, .84) 0%,
    rgba(7, 20, 30, .55) 45%,
    transparent 100%);
}

.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-year { color: #fff; opacity: .82; }
.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-name { color: #fff; font-size: 1.32rem; }
.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-affil { color: rgba(255, 255, 255, .8); }

/* The button would sit on the scrim and crowd the name, so it moves out
   to the right of it on the same line. */
.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-id {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 16px;
}

.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-year,
.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-name,
.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-affil { grid-column: 1; }

.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-li {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  margin-top: 0;
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-li:hover {
  background: #0A66C2 !important;
  border-color: #0A66C2;
}

.ibra-awards--modal-top .ibra-awards__modal-text { max-height: min(56vh, 420px); }

@media (max-width: 679px) {
  .ibra-awards--modal-top .ibra-awards__modal-aside { flex-direction: column; padding: 0; }
  .ibra-awards--modal-top .ibra-awards__modal-photo,
  .ibra-awards--modal-top.ibra-awards--photo-1-1 .ibra-awards__modal-photo {
    flex: none;
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }
  .ibra-awards--modal-top .ibra-awards__modal-aside:has(.ibra-awards__modal-photo) .ibra-awards__modal-id {
    padding: 36px 18px 16px;
  }
}

/* ==========================================================================
   Pop-up: photograph centred above the text

   The whole panel is one scrolling column here, rather than a fixed
   identity beside a scrolling citation. That is the point of it: the
   photograph scrolls away, so after the first screenful the citation has
   the entire height of the panel rather than a 420px window.

   The photograph is also shown whole — sized by its own proportions with
   nothing cropped — which is what a formal portrait wants.
   ========================================================================== */

.ibra-awards--modal-centre .ibra-awards__modal {
  width: min(720px, calc(100vw - 40px));
  max-height: min(86vh, 760px);
}

.ibra-awards--modal-centre .ibra-awards__modal-body {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: min(86vh, 760px);
  box-sizing: border-box;
  background: #fff;
}

.ibra-awards--modal-centre .ibra-awards__modal-aside {
  display: block;
  padding: 38px 40px 0;
  background: transparent;
  border: 0;
  max-height: none;
  overflow: visible;
  text-align: center;
}

/* No ratio and no cover: the frame takes the picture's own shape, so a
   portrait, a square and a landscape shot are all shown entire. */
.ibra-awards--modal-centre .ibra-awards__modal-photo,
.ibra-awards--modal-centre.ibra-awards--photo-1-1 .ibra-awards__modal-photo,
.ibra-awards--modal-centre.ibra-awards--photo-4-3 .ibra-awards__modal-photo,
.ibra-awards--modal-centre.ibra-awards--photo-3-4 .ibra-awards__modal-photo {
  aspect-ratio: auto;
  width: 250px;
  max-width: 62%;
  margin: 0 auto;
  background: transparent;
  border-radius: 4px;
}

.ibra-awards--modal-centre .ibra-awards__modal-photo img {
  height: auto;
  object-fit: contain;
  object-position: center;
}

.ibra-awards--modal-centre .ibra-awards__modal-id {
  padding: 24px 0 0;
  text-align: center;
}

.ibra-awards--modal-centre .ibra-awards__modal-year {
  margin-bottom: 9px;
  font-size: .7rem;
  letter-spacing: .16em;
}

.ibra-awards--modal-centre .ibra-awards__modal-name {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

/* A short rule under the name, rather than a line across the panel: it
   closes the heading without dividing the card in two. */
.ibra-awards--modal-centre .ibra-awards__modal-name::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 17px auto 16px;
  background: var(--accent, #7E1220);
}

.ibra-awards--modal-centre .ibra-awards__modal-affil {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
  color: #33475B;
}

.ibra-awards--modal-centre .ibra-awards__modal-li { margin-top: 18px; }

/* The citation reads from the left even though the identity above it is
   centred — centred body copy gives the eye a new left edge to find on
   every line. */
.ibra-awards--modal-centre .ibra-awards__modal-text {
  max-height: none;
  overflow: visible;
  padding: 26px 40px 36px;
  text-align: left;
}

.ibra-awards--modal-centre .ibra-awards__modal-bio { max-width: none; }

/* On white, the close button needs an edge to sit against */
.ibra-awards--modal-centre .ibra-awards__modal-close {
  background: rgba(16, 38, 48, .07) !important;
  box-shadow: none;
}

.ibra-awards--modal-centre .ibra-awards__modal-close:hover {
  background: #16222B !important;
}

@media (max-width: 679px) {
  .ibra-awards--modal-centre .ibra-awards__modal-aside {
    display: block;
    padding: 30px 20px 0;
  }

  .ibra-awards--modal-centre .ibra-awards__modal-photo,
  .ibra-awards--modal-centre.ibra-awards--photo-1-1 .ibra-awards__modal-photo {
    flex: none;
    width: 170px;
    max-width: 55%;
    aspect-ratio: auto;
    border-radius: 4px;
  }

  .ibra-awards--modal-centre .ibra-awards__modal-id { padding: 20px 0 0; }
  .ibra-awards--modal-centre .ibra-awards__modal-text { padding: 20px 20px 28px; }
}