/* ==========================================================================
   WHAT CAME BACK — anonymised matters.

   Six of the twelve Egyptian firms in the audit carry these, and none of them
   uses a results table: they are short notes, situation then outcome. The
   shape here follows that, because a table of figures reads as a boast and a
   note reads as a memory.

   Two lines per matter, and the outcome is the one in the accent, so the eye
   can run down the right of the column and read only the endings.
   ========================================================================== */

.won {
  position: relative;
  z-index: 2;
  background: var(--haq-ground, #061019);
  color: #f4efe4;
  padding-block: var(--haq-band, clamp(56px, 9vh, 100px));
  padding-inline: var(--haq-gutter, clamp(20px, 4vw, 48px));
}
.won-in { max-width: 1080px; margin-inline: auto; }

.won-head small {
  display: block;
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--haq-eyebrow, .74rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--record-amber, #f49f2e);
}
[dir="rtl"] .won-head small { letter-spacing: 0; }
.won-head h2 {
  margin: 14px 0 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  line-height: 1.04;
  max-width: 22ch;
  text-wrap: balance;
}

.won-list {
  list-style: none;
  margin: clamp(28px, 5vh, 48px) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
/* The stories are written to about 34ch, so a 705-wide screen was running one
   narrow column down the left and leaving the other half empty. They pair up
   as soon as two columns of that measure fit. */
@media (min-width: 620px) {
  .won-list { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); }
}
.won-item {
  padding-block: clamp(18px, 3vh, 26px);
  border-top: 1px solid rgba(244,239,228,.13);
}
.won-tag {
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,239,228,.5);
}
[dir="rtl"] .won-tag { letter-spacing: 0; }
.won-story {
  margin: 10px 0 0;
  font-family: "Instrument Serif", Newsreader, Georgia, serif;
  font-size: clamp(1.1rem, 2.6vw, 1.32rem);
  line-height: 1.34;
  color: #f4efe4;
  max-width: 34ch;
}
.won-end {
  margin: 8px 0 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--record-amber, #f49f2e);
  max-width: 34ch;
}
.won-foot {
  margin: clamp(26px, 4.5vh, 40px) 0 0;
  padding-top: clamp(18px, 3vh, 26px);
  border-top: 1px solid rgba(244,239,228,.13);
  max-width: 44ch;
  line-height: 1.6;
  color: rgba(244,239,228,.66);
}

/* Entrance, gated. Without the script the whole list stands finished. */
@media (prefers-reduced-motion: no-preference) {
  html.won-js .won-head > *,
  html.won-js .won-item,
  html.won-js .won-foot { opacity: 0; translate: 0 14px; }
  html.won-js .won.in .won-head > *,
  html.won-js .won.in .won-item,
  html.won-js .won.in .won-foot {
    opacity: 1;
    translate: 0 0;
    transition: opacity .55s ease, translate .6s cubic-bezier(.25, .8, .25, 1);
  }
  html.won-js .won.in .won-item:nth-child(1) { transition-delay: .05s; }
  html.won-js .won.in .won-item:nth-child(2) { transition-delay: .10s; }
  html.won-js .won.in .won-item:nth-child(3) { transition-delay: .15s; }
  html.won-js .won.in .won-item:nth-child(4) { transition-delay: .20s; }
  html.won-js .won.in .won-item:nth-child(5) { transition-delay: .25s; }
  html.won-js .won.in .won-item:nth-child(6) { transition-delay: .30s; }
  html.won-js .won.in .won-item:nth-child(7) { transition-delay: .35s; }
  html.won-js .won.in .won-item:nth-child(8) { transition-delay: .40s; }
  html.won-js .won.in .won-foot { transition-delay: .46s; }
}