/* Phase 1 institutional type and 12-column architecture; load with the new slice. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/vendor/Fraunces-latin_basic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/vendor/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/vendor/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.ab-institution, .ab-institution * { box-sizing: border-box; }

.ab-institution {
  --ab-gutter: clamp(20px, 4vw, 48px);
  --ab-column-gap: clamp(12px, 1.7vw, 24px);
  --ab-section-space: clamp(44px, 4vw, 68px);
  font-family: "Atkinson Hyperlegible", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.ab-container {
  inline-size: min(calc(100% - var(--ab-gutter) - var(--ab-gutter)), 1440px);
  margin-inline: auto;
}

.ab-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ab-column-gap);
}

.ab-grid > * { min-inline-size: 0; }
.ab-span-12 { grid-column: span 12; }
.ab-span-8 { grid-column: span 8; }
.ab-span-6 { grid-column: span 6; }
.ab-span-5 { grid-column: span 5; }
.ab-span-4 { grid-column: span 4; }
.ab-span-3 { grid-column: span 3; }
.ab-start-3 { grid-column-start: 3; }

.ab-institution p { margin-block: 0 1.25em; }
.ab-institution .ab-prose { max-inline-size: min(680px, 65ch); }
.ab-institution .ab-display, .ab-institution .ab-title,
.ab-institution .ab-heading-2, .ab-institution .ab-heading-3,
.ab-institution .ab-heading-4 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
  margin-block: 0 0.55em;
}

.ab-institution .ab-display { font-size: clamp(56px, 6vw, 72px); }
.ab-institution .ab-title { font-size: 44px; }
.ab-institution .ab-heading-2 { font-size: 35px; }
.ab-institution .ab-heading-3 { font-size: 28px; }
.ab-institution .ab-heading-4 { font-size: 22px; }
.ab-institution .ab-small { font-size: 14px; line-height: 1.5; }
.ab-institution .ab-label, .ab-institution .ab-data {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.ab-institution .ab-label {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ab-section { padding-block: var(--ab-section-space); }

@media (max-width: 900px) {
  .ab-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .ab-span-12, .ab-span-8 { grid-column: span 8; }
  .ab-span-6 { grid-column: span 4; }
  .ab-span-5 { grid-column: span 4; }
  .ab-span-4, .ab-span-3 { grid-column: span 4; }
  .ab-start-3 { grid-column-start: auto; }
}

@media (max-width: 600px) {
  .ab-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab-span-12, .ab-span-8, .ab-span-6, .ab-span-5, .ab-span-4, .ab-span-3 { grid-column: span 4; }
  .ab-span-2-mobile { grid-column: span 2; }
  .ab-institution .ab-display { font-size: clamp(42px, 13vw, 56px); }
  .ab-institution .ab-title { font-size: 38px; }
  .ab-institution .ab-heading-2 { font-size: 31px; }
  .ab-section { padding-block: clamp(40px, 9vw, 56px); }
}