/* ==========================================================================
   THEATRUM ANIMI — layout: container, grid, bands, the visible grid, heroes
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--page-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

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

/* repeat() will not accept a custom property for its count, so the column
   count is written literally and stepped down at each breakpoint. */
@media (max-width: 63.99em) {
  .grid, .split, .hero__inner { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 47.99em) {
  .grid, .split, .hero__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: 1fr; }
}

/* column spans — collapse to full width below 768 */
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.col-start-7 { grid-column: 7 / span 6; }
.col-start-8 { grid-column: 8 / span 5; }
.col-start-9 { grid-column: 9 / span 4; }

@media (max-width: 63.99em) {
  .col-3, .col-4  { grid-column: span 4; }
  .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 8; }
  .col-start-7, .col-start-8, .col-start-9 { grid-column: span 8; }
}
@media (max-width: 47.99em) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12,
  .col-start-7, .col-start-8, .col-start-9 { grid-column: span 4; }
}

/* --- bands ---------------------------------------------------------------- */

.band { padding-block: clamp(3rem, 1.5rem + 6vw, 6rem); }
.band--tight { padding-block: clamp(2rem, 1rem + 4vw, 3.5rem); }
.band--sunken { background: var(--color-surface-sunken); }
.band--raised { background: var(--color-surface-raised); }
.band--inverse { background: var(--color-surface-inverse); color: var(--color-ink-inverse); }
.band--deep { background: var(--color-surface-deep); color: var(--color-ink-inverse); }
.band--rule { border-top: var(--border-hairline) solid var(--color-border-default); }

.band__header { margin-bottom: var(--space-2xl); }
.band__header .lead { margin-top: var(--space-md); }

/* a heading row with an action pinned to the right */
.band__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

/* --- the visible grid device ---------------------------------------------- */
/* Decorative only: hidden from assistive technology, drawn under type,
   never used as the sole means of understanding a layout. */

.gridlines { position: relative; isolation: isolate; }
.gridlines > * { position: relative; z-index: 1; }
.gridlines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  inset-inline: var(--page-margin);
  background-image: repeating-linear-gradient(
    to right,
    var(--grid-rule-light) 0 1px,
    transparent 1px calc((100% + var(--grid-gutter)) / 12)
  );
}
.gridlines--dark::before { background-image: repeating-linear-gradient(
    to right,
    var(--grid-rule-dark) 0 1px,
    transparent 1px calc((100% + var(--grid-gutter)) / 12)
  ); }
@media (max-width: 63.99em) {
  .gridlines::before,
  .gridlines--dark::before { background-size: calc((100% + var(--grid-gutter)) / 8) 100%; }
}
@media (max-width: 47.99em) {
  .gridlines::before,
  .gridlines--dark::before { background-size: calc((100% + var(--grid-gutter)) / 4) 100%; }
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(46rem, 88vh);
  padding-block: clamp(6rem, 4rem + 10vw, 10rem) clamp(3rem, 2rem + 4vw, 5rem);
  color: var(--color-ink-inverse);
  background: var(--color-surface-deep);
  overflow: hidden;
}
.hero--short { min-height: min(30rem, 62vh); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The scrim is not optional: it is what guarantees 4.5:1 over any photograph. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.hero__media--strong::after { background: var(--scrim-strong); }

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--grid-gutter);
  align-content: center;
}
/* everything in the hero sits in the first seven columns; the marginalia takes
   the outer column, so it can never overflow the container. */
.hero__inner > * { grid-column: 1 / span 7; }
@media (max-width: 63.99em) { .hero__inner > * { grid-column: 1 / -1; } }
.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.25;
  margin-top: var(--space-md);
}
.hero__body { margin-top: var(--space-md); max-width: 34rem; color: var(--color-ink-inverse-secondary); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__inner > .hero__aside {
  grid-column: 8 / -1;
  grid-row: 2 / span 3;
  align-self: center;
  justify-self: start;
  max-width: 100%;
  margin-top: 0;
}
/* the hero always sits on a scrim, so marginalia there is always Crepito */
.hero .marginalia { color: var(--color-ink-inverse); }
@media (max-width: 63.99em) {
  .hero__inner > .hero__aside { grid-column: 1 / -1; grid-row: auto; margin-top: var(--space-xl); }
}

.hero__funding { margin-top: var(--space-2xl); }

/* --- editorial split ------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}
.split__text { grid-column: span 5; }
.split__media { grid-column: 7 / span 6; }
.split--reverse .split__text { grid-column: 8 / span 5; }
.split--reverse .split__media { grid-column: span 6; }
@media (max-width: 63.99em) {
  .split__text, .split__media,
  .split--reverse .split__text, .split--reverse .split__media { grid-column: 1 / -1; }
}

/* Editorial images are cropped to a consistent ratio so a portrait source
   never stretches the row it sits in. */
.split__media > img,
.figure > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figure figcaption { margin-top: var(--space-xs); }

/* --- generic card grids --------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--space-lg) var(--grid-gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 47.99em) { .cards--2 { grid-template-columns: 1fr; } }
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* --- stats ---------------------------------------------------------------- */

.stats { display: grid; gap: var(--space-lg) var(--grid-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.stat__figure {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__label { margin-top: var(--space-xs); font-size: var(--type-body-sm); color: var(--color-ink-inverse-secondary); }

/* --- numbered pillars ----------------------------------------------------- */

.pillars { display: grid; gap: var(--space-2xl) var(--grid-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pillar { border-top: var(--border-rule) solid var(--color-rasa); padding-top: var(--space-md); }
.pillar h3 { margin-top: var(--space-sm); }
.pillar p { margin-top: var(--space-xs); color: var(--color-ink-secondary); }

/* --- timeline ------------------------------------------------------------- */

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 1.5rem 8rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline) solid var(--color-border-subtle);
}
.timeline__dot { width: 14px; height: 14px; border: 2px solid var(--color-rasa); border-radius: 50%; margin-top: 0.55em; }
.timeline li[aria-current="step"] .timeline__dot { background: var(--color-rasa); }
.timeline__when { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; }
@media (max-width: 47.99em) {
  .timeline li { grid-template-columns: 1.5rem 1fr; }
  .timeline__what { grid-column: 2; }
}

/* --- work-package list ---------------------------------------------------- */

.wp-list { list-style: none; margin: 0; padding: 0; }
.wp-list li {
  display: grid;
  grid-template-columns: 4rem 14rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--border-hairline) solid var(--color-border-subtle);
}
.wp-list__id { font-family: var(--font-display); font-weight: 900; font-size: 1.375rem; }
.wp-list p { color: var(--color-ink-secondary); }
@media (max-width: 63.99em) { .wp-list li { grid-template-columns: 4rem 1fr; } .wp-list li > p { grid-column: 2; } }