/* ==========================================================================
   Case study pages: one long article, like the earlier portfolio. No side
   navigation; one centered column; pictures as wide as the column. Loaded
   after site.css (tokens, top bar, menu, theme, cursor) and nothing else.

   Hierarchy, five levels, each clearly different from the next:
     1  page title     Antonio 700, capitals, 56-112px, ink
     2  act title      Antonio 700, capitals, 40-64px, accent
     3  part title     Inter 600, 20px, accent
     4  point name     Inter 600, 17px, ink
     5  text           Inter 400, 17px, grey; labels and captions 14px muted

   Spacing, one scale:
     12px  a title to its text, a point name to its text
     16px  paragraph to paragraph, point to point
     32px  text to a picture, a group to what follows
     72px  part to part (with a small accent dot halfway)
     128px act to act
   ========================================================================== */

.article {
  --a-col: 1040px;
  --a-read: 720px;
  --a-1: 12px;
  --a-2: 16px;
  --a-3: 32px;
  --a-4: 144px;
  --a-5: 240px;
  max-width: calc(var(--a-col) + 2 * var(--gx));
  margin: 0 auto;
  padding: 48px var(--gx) var(--a-5);
}


/* ---- text ---------------------------------------------------------------- */
.article p,
.article li,
.article dd {
  margin: 0;
  font-family: var(--body-font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
}
.article strong {
  font-weight: 600;
  color: var(--ink);
}
.article a:not(.button, .a-back, .a-more a) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.article ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}
.article li::marker {
  color: var(--accent);
}
.article .small,
.article figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}
.article .label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- 1. the top ----------------------------------------------------------- */
.a-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--a-3);
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}
.a-back:hover {
  color: var(--ink);
}
.a-back svg {
  width: 16px;
  height: 16px;
}
.a-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--a-3);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.a-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent-text);
}
.a-note p {
  font-size: 0.9375rem;
  line-height: 1.5;
}
.a-head {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
}
.a-tag {
  align-self: flex-start;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--accent-text);
}
.a-title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(3.5rem, 2rem + 5vw, 7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.a-sub {
  max-width: var(--a-read);
}
.a-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--a-2) var(--a-3);
  margin: var(--a-2) 0 0;
}
.a-facts div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.a-facts dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.a-facts dd {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.a-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--a-1);
}
.a-hero {
  margin: var(--a-3) 0 0;
}
.a-hero img,
.a-hero video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* ---- 2. acts --------------------------------------------------------------- */
.a-act {
  padding-top: var(--a-5);
}
.a-act > h2 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---- 3. parts -------------------------------------------------------------- */
.a-part {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
  padding-top: var(--a-4);
}
.a-act > h2 + .a-part {
  padding-top: var(--a-3);
}
.a-part > h3 {
  margin: 0;
  font-family: var(--body-font);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--accent-text);
}
.a-part > :is(p, ul, .points, .a-quote, .stats, details, dl) {
  max-width: var(--a-read);
}
.a-part > h3 + * {
  margin-top: calc(var(--a-1) - var(--a-2));
}
.a-part > :is(figure, .figs, .row) {
  margin: calc(var(--a-3) - var(--a-2)) 0;
}

/* ---- 4. points: a name, then its text ------------------------------------ */
.points {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.points > * {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.points :is(h4, .point-name) {
  margin: 0;
  font-family: var(--body-font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.points .label {
  margin-bottom: 2px;
}
.points .is-ok { color: var(--ok-text); }
.points .is-open { color: var(--warn-text); }
.points-head {
  margin: var(--a-1) 0 0;
  font-family: var(--body-font);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---- 5. pictures ---------------------------------------------------------- */
.article figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.article figure :is(img, svg, video) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.figs {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  gap: var(--a-2);
}
.figs figure :is(img, svg) {
  border-radius: 12px;
}
.figs--icons {
  --n: 6;
}
.figs--icons figure :is(img) {
  border-radius: 8px;
  background: var(--surface);
}

/* text beside a picture, taking turns */
.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-3);
  align-items: center;
}
.row > div {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
}
.row--flip > :first-child {
  order: 2;
}

/* ---- 6. quotes, notes, numbers, more -------------------------------------- */
.a-quote {
  margin: var(--a-1) 0;
  padding: 0 0 0 var(--a-2);
  border-left: 2px solid var(--accent);
}
.a-quote p {
  color: var(--ink);
}
.a-quote .label {
  margin-bottom: 4px;
}
.a-pull {
  max-width: 820px;
  margin: var(--a-3) auto;
  font-family: var(--heading-font);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3) 64px;
  margin: var(--a-1) 0;
  padding: 0;
  list-style: none;
}
.stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
}
.stats b {
  font-family: var(--heading-font);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.stats span {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}
/* a long list folded away, opened on request */
.article details {
  border: 1px solid var(--line);
  border-radius: 12px;
}
.article summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.article summary::-webkit-details-marker {
  display: none;
}
.article summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent-text);
}
.article details[open] summary::after {
  content: "\2212";
}
.article details > .points {
  padding: 4px 18px 18px;
}
.article summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 12px;
}
.a-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-3);
}
.a-two > div {
  display: flex;
  flex-direction: column;
  gap: var(--a-1);
}

/* more projects */
.a-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a-3);
  margin-top: var(--a-3);
}
.a-more a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.a-more img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
}
.a-more b {
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.a-more span {
  font-size: 0.875rem;
  color: var(--muted);
}
.a-more a:hover b {
  color: var(--accent-text);
}

/* ---- 7. phones ------------------------------------------------------------ */
@media (max-width: 760px) {
  .article {
    --a-4: 80px;
    --a-5: 128px;
    padding-top: 32px;
  }
  .row,
  .a-two,
  .a-more {
    grid-template-columns: minmax(0, 1fr);
  }
  .row--flip > :first-child {
    order: 0;
  }
  .figs {
    --n: 1;
  }
  .figs--three {
    --n: 3;
  }
  .figs--icons {
    --n: 3;
  }
}

/* status colors for the review list */
:root {
  --ok-text: #0d5228;
  --warn-text: #5e3f00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ok-text: #5dd68a;
    --warn-text: #e0a93b;
  }
}
:root[data-theme="dark"] {
  --ok-text: #5dd68a;
  --warn-text: #e0a93b;
}
/* the opening part (my contribution) sits closer to the picture */
.a-act--intro {
  padding-top: var(--a-4);
}
.a-act--intro > .a-part:first-child {
  padding-top: 0;
}
/* three phone screens side by side stay at reading width, so a tall
   phone picture never fills the screen */
.figs--three {
  max-width: var(--a-read);
}

/* these beat the plain text and list defaults above */
.article .points {
  padding-left: 0;
  list-style: none;
}
.article .points-head {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.article .a-pull {
  font-family: var(--heading-font);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}
.article .a-tag {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--accent-text);
}
.article .a-sub {
  color: var(--text);
}
/* a group heading is small grey capitals, so it never reads like one of
   the point names under it */
.article .points-head {
  margin-top: var(--a-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.article .points {
  gap: 20px;
}

/* ==========================================================================
   Accordions: a list of points shows only the names; each opens to its text.
   Quiet rows on a soft tint, no lines; a plus turns into a minus when open.
   ========================================================================== */
.article .accs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: var(--a-read);
  margin: 0;
  padding: 0;
  list-style: none;
}
.article .accs > li {
  margin: 0;
}
.article .acc {
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.article .acc > summary,
.article .acc--plain {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  font-weight: 400;
  list-style: none;
}
.article .acc > summary {
  cursor: pointer;
}
.article .acc > summary::-webkit-details-marker {
  display: none;
}
.article .acc > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
}
.article .acc[open] > summary::after {
  content: "\2212";
}
.article .acc > summary:hover .acc__name {
  color: var(--accent-text);
}
.article .acc > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 12px;
}
.article .acc__label {
  flex: none;
  min-width: 4.5em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.article .acc__label.is-ok { color: var(--ok-text); }
.article .acc__label.is-open { color: var(--warn-text); }
.article .acc__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.article .acc__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 16px;
}
.article .acc__body p,
.article .acc__body li {
  font-size: 1rem;
}
@media (max-width: 760px) {
  .article .acc > summary,
  .article .acc--plain {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .article .acc__label {
    flex-basis: 100%;
  }
}

/* the outcome at the top, between the facts and the picture */
.a-outcome {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--a-read);
  margin-top: var(--a-3);
}
.a-outcome .label {
  color: var(--accent-text);
}

/* open points: a short accent label (when there is one), the name, then
   its text; clear room between points so each reads as its own item */
.article .points {
  gap: 24px;
}
.article .points .label {
  color: var(--accent-text);
}
.article .points .label.is-ok { color: var(--ok-text); }
.article .points .label.is-open { color: var(--warn-text); }

/* room for the floating pill bar above the article */
.pv .article {
  padding-top: 112px;
}
/* numbers sit side by side, not as a bulleted list */
.article .stats {
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}

/* ==========================================================================
   Three ways to lay out points, chosen by what they are:
     cards   a few short points side by side (two columns; an odd last one
             runs the full width)
     steps   points with an order: a large number or word, then the point
     accs    long reference lists only: names, each opening to its text
   ========================================================================== */
.article .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article .card-pt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.article .cards > .card-pt:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.article .card-pt h4 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.article .card-pt p {
  font-size: 1rem;
  line-height: 1.6;
}
.article .card-pt .label {
  color: var(--accent-text);
}
.article .card-pt .label.is-ok { color: var(--ok-text); }
.article .card-pt .label.is-open { color: var(--warn-text); }
.article .card-pt ul {
  gap: 4px;
}

.article .steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: var(--a-read);
  margin: 0;
  padding: 0;
  list-style: none;
}
.article .step {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
}
.article .step__num {
  font-family: var(--heading-font);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent-text);
}
.article .step > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article .step h4 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
@media (max-width: 760px) {
  .article .cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .article .step {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
  }
  .article .step__num {
    font-size: 1.75rem;
  }
}
.article :is(.card-pt, .step) h4 {
  font-family: var(--body-font);
  letter-spacing: 0;
  text-transform: none;
}
/* the number sits level with the top of its point */
.article .step {
  align-items: start;
}
.article .step__num {
  margin-top: -2px;
}

/* ==========================================================================
   On this page: a sticky outline at the top right, beside the article.
   It hides below 1180px, where the article needs the whole width.
   ========================================================================== */
.a-layout {
  display: grid;
  grid-template-columns: minmax(0, 1040px) 200px;
  justify-content: center;
  column-gap: 56px;
  padding-inline: var(--gx);
}
.a-layout > .article {
  max-width: none;
  margin: 0;
  padding-inline: 0;
}
.a-toc {
  position: sticky;
  top: 104px;
  align-self: start;
  max-height: calc(100vh - 128px);
  margin-top: 112px;
  overflow-y: auto;
}
.a-toc__title {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.a-toc ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.a-toc ol ol {
  margin: 2px 0 10px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.a-toc a {
  display: block;
  padding: 4px 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
}
.a-toc a.a-toc__act {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.a-toc a:hover {
  color: var(--ink);
}
.a-toc a[aria-current] {
  color: var(--accent-text);
}
.a-toc a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* jumps land below the pill bar */
.article [id] {
  scroll-margin-top: 96px;
}
@media (max-width: 1179px) {
  .a-layout {
    display: block;
    padding-inline: 0;
  }
  .a-layout > .article {
    max-width: calc(1040px + 2 * var(--gx));
    margin: 0 auto;
    padding-inline: var(--gx);
  }
  .a-toc {
    display: none;
  }
}
.a-toc {
  scrollbar-width: thin;
}

/* ==========================================================================
   Case study hero, as before: the title across the top; the picture with a
   card beside it holding the project links and the focus; then the outcome
   numbers and the facts.
   ========================================================================== */
.a-hero2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  grid-template-areas:
    "intro intro"
    "image aside"
    "meta  meta";
  gap: 24px clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.a-hero2__intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.a-hero2__image {
  grid-area: image;
  margin: 0;
}
.a-hero2__image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
}
.a-hero2__aside {
  grid-area: aside;
  display: flex;
}
.a-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.article .a-card__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.a-card .a-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}
.a-card .a-links .button {
  justify-content: center;
}
.a-card__part {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.article .a-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.a-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-text);
}
.a-hero2__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 16px;
}
.a-hero2__meta .a-outcome {
  margin-top: 0;
  max-width: none;
}
.a-hero2__meta .a-facts {
  margin: 0;
}
@media (max-width: 860px) {
  .a-hero2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "image"
      "aside"
      "meta";
  }
}
/* the picture keeps its own shape; the card beside it matches its height */
.a-hero2__image img {
  height: auto;
}
.a-hero2 {
  align-items: start;
}
.a-hero2__aside {
  align-self: stretch;
}

/* ==========================================================================
   My contribution: the background as tags, methods as labeled rows, what I
   did as a grid of short cards with a check, the team in its own card.
   ========================================================================== */
.article .contrib__bg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.contrib__bg-label {
  margin-right: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.article .contrib__bg .a-chip {
  font-size: 0.875rem;
}
.article .contrib__facts {
  display: grid;
  gap: 12px;
  max-width: var(--a-read);
  margin: 0;
}
.contrib__facts div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
}
.article .contrib__facts dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--accent-text);
}
.article .contrib__facts dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.contrib {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.article .dids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article .did {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
.dids > .did:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.did__icon {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.contrib__team {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.article .contrib__team ul {
  gap: 6px;
}
.article .contrib__team li {
  color: var(--ink);
}
@media (max-width: 760px) {
  .article .dids {
    grid-template-columns: minmax(0, 1fr);
  }
  .contrib__facts div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}
/* the side card hugs its content: no stretched gap under the links */
.a-hero2__aside {
  align-self: start;
}
.a-card__part {
  margin-top: 0;
}

/* ==========================================================================
   Case study top bar: the breadcrumb on the left, a horizontal menu of the
   section headers in the middle, the pause and theme buttons on the right.
   It stays at the top as you read. On narrower screens the menu moves to a
   second row and scrolls sideways by itself.
   ========================================================================== */
.a-layout {
  display: block;
  padding-inline: 0;
}
.a-layout > .article {
  max-width: calc(1040px + 2 * var(--gx));
  margin: 0 auto;
  padding: 48px var(--gx) var(--a-5);
}
.a-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "crumbs sections end";
  align-items: center;
  gap: 8px 24px;
}
.a-crumbs {
  grid-area: crumbs;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}
.a-crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
}
.a-crumbs a:hover {
  color: var(--ink);
}
.a-crumbs svg {
  width: 16px;
  height: 16px;
}
.a-crumbs__sep {
  color: var(--muted);
}
.a-crumbs [aria-current] {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--ink);
}
.a-bar__end {
  grid-area: end;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.a-sections {
  grid-area: sections;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.a-sections::-webkit-scrollbar {
  display: none;
}
.a-sections ol {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  list-style: none;
}
.a-sections a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.a-sections a:hover {
  color: var(--ink);
}
.a-sections a[aria-current] {
  background: var(--accent);
  color: var(--on-accent);
}
.a-sections a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* jumps land below the bar */
.article [id] {
  scroll-margin-top: 88px;
}
@media (max-width: 1100px) {
  .a-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "crumbs end"
      "sections sections";
    padding-bottom: 8px;
  }
  .a-sections {
    justify-self: start;
    max-width: 100%;
  }
  .article [id] {
    scroll-margin-top: 136px;
  }
}

/* the section menu, take two: always its own row under the breadcrumb, and
   nothing like the pill bar elsewhere: a numbered tab strip in small
   capitals along the bottom edge of the bar, the section you are reading
   underlined in the accent */
.a-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "crumbs end"
    "sections sections";
  row-gap: 0;
  padding-bottom: 0;
}
.a-sections {
  justify-self: stretch;
  max-width: none;
  margin-inline: calc(-1 * var(--gx));
  padding-inline: var(--gx);
  border-top: 1px solid var(--line);
}
.a-sections ol {
  gap: clamp(16px, 3vw, 40px);
  padding: 0;
  border: 0;
  border-radius: 0;
}
.a-sections a,
.a-sections a[aria-current] {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 12px 0 10px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.a-sections__num {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0.7;
}
.a-sections a:hover {
  color: var(--ink);
}
.a-sections a[aria-current] {
  border-bottom-color: var(--accent);
  color: var(--ink);
}
.a-sections a[aria-current] .a-sections__num {
  color: var(--accent-text);
  opacity: 1;
}
.article [id] {
  scroll-margin-top: 128px;
}

/* the tab strip, more prominent: the display face in capitals, a tinted
   strip of its own, a thicker accent underline; and clear room below the
   bar before the page starts */
.a-sections {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.a-sections ol {
  gap: clamp(20px, 3.5vw, 48px);
}
.a-sections a,
.a-sections a[aria-current] {
  gap: 10px;
  min-height: 56px;
  padding: 16px 0 13px;
  border-bottom-width: 3px;
  font-family: var(--heading-font);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}
.a-sections__num {
  font-family: var(--body-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.a-layout > .article {
  padding-top: clamp(64px, 9vh, 96px);
}
.article [id] {
  scroll-margin-top: 150px;
}

/* ==========================================================================
   Wide screens: the outline on the left, as before, with only the section
   headers; the bar keeps just the breadcrumb and the buttons. Narrow
   screens: no left column; the tab strip under the breadcrumb instead.
   ========================================================================== */
.a-side {
  display: none;
}
@media (min-width: 1101px) {
  .a-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1040px);
    justify-content: center;
    column-gap: 48px;
    padding-inline: var(--gx);
  }
  .a-layout > .article {
    max-width: none;
    margin: 0;
    padding-inline: 0;
  }
  .a-side {
    display: block;
  }
  .a-outline {
    position: sticky;
    top: calc(var(--bar-h) + 48px);
    margin-top: clamp(64px, 9vh, 96px);
  }
  .a-sections {
    display: none;
  }
  .a-bar {
    grid-template-areas: "crumbs end";
  }
  /* the page's scroll padding already clears the bar */
  .article [id] {
    scroll-margin-top: 24px;
  }
}
.a-outline ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.a-outline a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.a-outline__num {
  min-width: 1.4em;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.a-outline a:hover {
  color: var(--ink);
}
.a-outline a[aria-current] {
  border-left-color: var(--accent);
  font-weight: 600;
  color: var(--ink);
}
.a-outline a[aria-current] .a-outline__num {
  color: var(--accent-text);
}
.a-outline a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Pictures open full screen (js/viewer.js), with previous and next buttons
   ========================================================================== */
.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}
.zoom img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.zoom:hover img {
  opacity: 0.9;
}
.zoom:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.viewer-open {
  overflow: hidden;
}
.viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 3vw, 24px);
  border: 0;
  background: #08080a;
  color: #f2f2ee;
}
.viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}
.viewer::backdrop {
  background: rgb(8 8 10 / 0.7);
}
.viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.viewer__count {
  margin: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.viewer__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  min-height: 0;
}
.viewer__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.viewer__stage {
  height: 100%;
}
.viewer__btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.viewer__btn svg {
  width: 22px;
  height: 22px;
}
.viewer__btn:hover {
  border-color: #d0ff71;
  background: #d0ff71;
  color: #0b0b0c;
}
.viewer__btn:focus-visible {
  outline: 3px solid #d0ff71;
  outline-offset: 3px;
}
.viewer__caption {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
  color: rgb(242 242 238 / 0.85);
}
@media (max-width: 640px) {
  .viewer__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .viewer__img {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .viewer__prev {
    grid-row: 2;
    justify-self: end;
  }
  .viewer__next {
    grid-row: 2;
    justify-self: start;
  }
}

/* the breadcrumb row keeps the full bar height on every screen, so on
   phones the crumbs and buttons are not pressed against the top edge */
.a-bar {
  grid-template-rows: minmax(var(--bar-h), auto);
}

/* key parts, listed under their act in the left outline */
/* nested as in the earlier outline: indented under the section's name,
   on a short rail of their own */
.a-outline .a-outline__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* the rail starts right under the section's name (after its number) */
  margin: 4px 0 8px 44px;
  padding: 0;
  list-style: none;
}
.a-outline .a-outline__sub a {
  padding: 4px 0 4px 12px;
  font-size: 0.8125rem;
}
/* the act stays marked while you are inside one of its key parts */
.a-outline li:has(.a-outline__sub a[aria-current]) > a {
  border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ink);
}

/* ==========================================================================
   Moving heroes: a short muted video (KU Brand), or a few existing screens
   that fade one into the next like a GIF (pure CSS). Paused with the motion
   button; with reduced motion they hold on the final frame.
   ========================================================================== */
.hero-loop,
.hero-video {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
}
.hero-video {
  display: block;
  height: auto;
  object-fit: cover;
}
/* one cell the size of the frame, so a tall screen cannot stretch it */
.hero-loop {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}
.article .hero-loop img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  opacity: 0;
  animation: hero-frame calc(var(--n) * 3s) linear infinite both;
  animation-delay: calc(var(--i) * 3s);
}
/* phone screens sit whole in the middle of the frame */
.article .hero-loop--contain img {
  padding: 24px 0;
  object-fit: contain;
}
@keyframes hero-frame {
  0% { opacity: 0; }
  5% { opacity: 1; }
  33% { opacity: 1; }
  38% { opacity: 0; }
  100% { opacity: 0; }
}
:root.motion-paused .article .hero-loop img {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .article .hero-loop img {
    animation: none;
  }
  .article .hero-loop img:last-child {
    opacity: 1;
  }
}

/* Everything under a green part title sits in a little from it, so the
   titles stand out at the edge; the titles stay where they are. */
.article .a-part > :not(h3) {
  margin-inline-start: clamp(24px, 3.2vw, 48px);
}

/* ==========================================================================
   Outline, with every part listed. The section you are in reads clearly;
   the others dim back (to --outline-dim, which still meets 4.5:1). The link
   you are reading is marked as in the earlier outline: an accent bar, a soft
   accent wash fading out to the right, and accent text in bold.
   ========================================================================== */
.a-outline > ol > li > a,
.a-outline .a-outline__sub a {
  color: var(--text);
}
.a-outline > ol:has(a[aria-current]) > li:not(:has(a[aria-current])) a {
  color: var(--outline-dim);
}
.a-outline a:hover,
.a-outline > ol:has(a[aria-current]) > li:not(:has(a[aria-current])) a:hover {
  color: var(--ink);
}
.a-outline a[aria-current] {
  border-left-color: var(--accent);
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 18%, transparent),
      color-mix(in srgb, var(--accent) 6%, transparent) 55%,
      transparent);
  font-weight: 600;
  color: var(--accent-text);
}
.a-outline a[aria-current] .a-outline__num {
  color: var(--accent-text);
}
/* the act stays marked, more quietly, while you read one of its parts */
.a-outline li:has(.a-outline__sub a[aria-current]) > a {
  border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
  font-weight: 600;
  color: var(--ink);
}
/* a long outline scrolls on its own, inside the screen */
@media (min-width: 1101px) {
  .a-outline {
    max-height: calc(100dvh - var(--bar-h) - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}