/* ==========================================================================
   IKC — Shell, chrome and section grammar.
   Structure comes from hairline rules and the 12-column grid. There are no
   cards: a rule tells the reader where a thing ends, a box tells them
   nothing. Radius stays at the token ceiling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHELL & GRID
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

@media (max-width: 47.99rem) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Reading measure for prose surfaces */
.prose {
  max-width: var(--measure);
}

.prose--narrow {
  max-width: var(--measure-narrow);
}

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   METADATA LABEL
   Small, tracked, Archivo. Used for column headers, relationship labels,
   dates and section register — never stacked above a heading as an eyebrow.
   -------------------------------------------------------------------------- */

.meta {
  font-family: var(--font-ui);
  font-variation-settings: 'wdth' var(--wd-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}

.meta--ink {
  color: var(--ink-soft);
}

.meta--signal {
  color: var(--signal-ink);
}

/* --------------------------------------------------------------------------
   ACTIONS
   Two registers only. The primary action is a filled signal bar; the secondary
   is a ruled link with a rule that extends on hover. No third button style,
   no ghost buttons, no pills.
   -------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
}

.action {
  --action-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.875rem;
  padding: var(--s-3) var(--s-5);
  background: var(--signal);
  color: var(--action-fg);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out);
}

.action:hover,
.action:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.action__mark {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  transition: transform var(--d-base) var(--ease-out);
}

.action:hover .action__mark {
  transform: translateX(0.25rem);
}

/* Secondary: a ruled link */
.action-quiet {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.875rem;
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out);
}

.action-quiet:hover,
.action-quiet:focus-visible {
  color: var(--signal-ink);
  border-color: var(--signal);
}

.action-quiet .action__mark {
  width: 0.7rem;
  height: 0.7rem;
}

.action-quiet:hover .action__mark {
  transform: translateX(0.25rem);
}

.section--ink .action {
  background: var(--paper);
  color: var(--ink);
}

.section--ink .action:hover,
.section--ink .action:focus-visible {
  background: var(--signal);
  color: var(--paper);
}

.section--ink .action-quiet {
  color: var(--on-ink);
  border-color: var(--on-ink-soft);
}

.section--ink .action-quiet:hover,
.section--ink .action-quiet:focus-visible {
  color: var(--paper);
  border-color: var(--signal-on-ink);
}

.hero--signal .action,
.section--signal .action {
  background: var(--paper);
  color: var(--ink);
}

.hero--signal .action:hover,
.hero--signal .action:focus-visible,
.section--signal .action:hover,
.section--signal .action:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.hero--signal .action-quiet,
.section--signal .action-quiet {
  color: var(--on-signal);
  border-color: var(--on-signal-soft);
}

.hero--signal .action-quiet:hover,
.hero--signal .action-quiet:focus-visible,
.section--signal .action-quiet:hover,
.section--signal .action-quiet:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

/* --------------------------------------------------------------------------
   HEADER
   Sits on the paper, not floating over it, and never becomes a pill. Fixed
   rather than sticky: a sticky header sits in flow, so any change to its box
   reflows the document beneath it. Its full height is reserved on <body>.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--ease-out),
    background var(--d-base) var(--ease-out);
}

.site-header[data-scrolled='true'] {
  border-bottom-color: var(--line);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--header-h);
}

/* The header does not shrink on scroll. Animating its height would animate a
   layout property, and the scrolled state already reads clearly through the
   hairline and the translucent ground above. See DECISIONS.md. */

/* ---- Wordmark ----------------------------------------------------------
   Header, nav panel and footer: the supplied symbol plus live Montserrat
   brand type. The whole lockup is one colour and reverses in the footer.
   ------------------------------------------------------------------------ */

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  height: 2.75rem;
  flex: none;
}

.wordmark__lockup {
  display: block;
  height: 2.75rem;
  width: auto;
}

.wordmark--brand {
  gap: var(--s-2);
  height: var(--wordmark-h);
  color: var(--brand-mark);
}

.wordmark__symbol {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/ikon-simetrik.svg') center / contain no-repeat;
  mask: url('/assets/img/ikon-simetrik.svg') center / contain no-repeat;
}

.wordmark__type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  color: inherit;
}

.wordmark__initials {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--t-wordmark);
  font-weight: var(--fw-wordmark);
  line-height: var(--lh-wordmark);
  letter-spacing: var(--tr-wordmark);
  text-transform: uppercase;
  color: inherit;
  font-synthesis: none;
}

.wordmark__descriptor {
  display: block;
  margin-top: var(--wordmark-type-gap);
  font-family: var(--font-brand);
  font-size: var(--t-wordmark-sub);
  font-weight: var(--fw-wordmark-sub);
  line-height: var(--lh-wordmark-sub);
  letter-spacing: var(--tr-wordmark-sub);
  color: inherit;
  font-synthesis: none;
}

.site-header .wordmark--brand,
.nav-panel .wordmark--brand {
  min-height: 0;
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 29.99rem) {
  /* Icon-only menu control keeps the live lockup intact at narrow widths. */
  .site-header .menu-button > span:not(.menu-button__glyph) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- Desktop navigation ------------------------------------------------- */

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
}

.site-nav__link {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 550;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: var(--s-2);
  position: relative;
  transition: color var(--d-fast) var(--ease-out);
}

.site-nav__link:hover {
  color: var(--ink);
}

/* Current-section indicator: a short signal rule, not a pill or a fill. */
.site-nav__link[aria-current='page'] {
  color: var(--ink);
}

.site-nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--signal);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: none;
}

/* ---- Language switcher -------------------------------------------------- */

.lang-switch {
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang-switch__item {
  padding: 0.45rem 0.6rem;
  color: var(--stone);
  text-decoration: none;
  transition: background var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out);
}

.lang-switch__item:hover {
  color: var(--ink);
  background: var(--paper-sunk);
}

.lang-switch__item[aria-current='true'] {
  background: var(--ink);
  color: var(--paper);
}

/* ---- Menu button -------------------------------------------------------- */

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding-inline: var(--s-2);
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink);
}

.menu-button__glyph {
  display: grid;
  gap: 4px;
  width: 1.125rem;
}

.menu-button__glyph span {
  height: 1px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease-out),
    opacity var(--d-fast) var(--ease-out);
}

.menu-button[aria-expanded='true'] .menu-button__glyph span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.menu-button[aria-expanded='true'] .menu-button__glyph span:nth-child(2) {
  opacity: 0;
}

.menu-button[aria-expanded='true'] .menu-button__glyph span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* The menu button stays at every width. The full index lives one click away;
   the bar carries the five routes a visitor most often wants. */
@media (min-width: 64rem) {
  .site-nav {
    display: block;
  }

  .menu-button {
    padding-inline: var(--s-3);
    border-inline-start: var(--rule);
    margin-inline-start: var(--s-2);
  }
}

/* --------------------------------------------------------------------------
   FULL-SCREEN NAVIGATION
   A designed editorial menu: the primary routes set at heading scale, the
   institutional layer below in the metadata register. Not a drawer.
   -------------------------------------------------------------------------- */

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  background: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out),
    visibility 0s linear var(--d-base);
}

.nav-panel[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--d-base) var(--ease-out), visibility 0s;
}

.nav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--header-h);
  border-bottom: var(--rule);
}

.nav-panel__body {
  padding-block: var(--s-7) var(--s-9);
}

.nav-panel__primary {
  list-style: none;
  border-top: var(--rule-soft);
}

.nav-panel__primary li {
  border-bottom: var(--rule-soft);
}

.nav-panel__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 106;
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: var(--tr-heading);
  text-decoration: none;
  color: var(--ink);
  /* Elements enter from an already-visible default; the transform is the
     only thing animated. */
  transform: translateY(0.5rem);
  opacity: 0;
  transition: transform var(--d-slow) var(--ease-out),
    opacity var(--d-base) var(--ease-out), color var(--d-fast) var(--ease-out);
}

.nav-panel[data-open='true'] .nav-panel__link {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 26ms * var(--motion-scale));
}

.nav-panel__link:hover {
  color: var(--signal-ink);
}

.nav-panel__link .meta {
  transition: color var(--d-fast) var(--ease-out);
}

.nav-panel__secondary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--rule);
}

.nav-panel__secondary a {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--graphite);
  text-decoration: none;
}

.nav-panel__secondary a:hover {
  color: var(--signal-ink);
}

body[data-nav-open='true'] {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   SECTION GRAMMAR
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-y);
  border-top: var(--rule);
}

.section--tight {
  padding-block: var(--section-y-tight);
}

.section--flush {
  border-top: 0;
}

.section--ink {
  background: var(--ink-surface);
  color: var(--on-ink);
  border-top: 0;
}

.section--signal {
  background: var(--signal);
  color: var(--on-signal);
  border-top: 0;
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--on-ink);
}

.section--signal h1,
.section--signal h2,
.section--signal h3,
.section--signal h4 {
  color: var(--on-signal);
}

.section--ink .meta {
  color: var(--on-ink-soft);
}

.section--ink .lead {
  color: var(--on-ink-soft);
}

.section--signal .meta {
  color: var(--on-signal-soft);
}

.section--signal .lead {
  color: var(--on-signal-soft);
}

/* Section head: heading on the left of the editorial grid, supporting prose
   to its right. Never a centred stack. */
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-5);
  align-items: start;
  margin-bottom: var(--s-8);
}

.section-head__title {
  grid-column: 1 / -1;
}

.section-head__aside {
  grid-column: 1 / -1;
}

.section-head__aside > * + * {
  margin-top: var(--s-4);
}

@media (min-width: 60rem) {
  .section-head__title {
    grid-column: 1 / span 6;
  }

  .section-head__aside {
    grid-column: 8 / span 5;
    padding-top: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   EDITORIAL ROWS
   The site's one repeating structure. Used for investment themes, companies,
   capabilities, perspectives, news and governance documents. A row is a rule
   plus content, not a card.
   -------------------------------------------------------------------------- */

.rows {
  list-style: none;
  border-top: var(--rule);
}

.row {
  border-bottom: var(--rule);
}

.row__link,
.row__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-3);
  padding-block: var(--s-6);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background var(--d-base) var(--ease-out);
}

.row__link {
  padding-inline: var(--s-4);
  margin-inline: calc(var(--s-4) * -1);
}

.row__link:hover {
  background: var(--signal-wash);
}

.row__index {
  grid-column: 1 / -1;
  align-self: start;
}

.row__title {
  grid-column: 1 / -1;
  font-size: var(--t-h3);
}

.row__body {
  grid-column: 1 / -1;
  color: var(--ink-soft);
}

.row__aside {
  grid-column: 1 / -1;
}

/* A row's aside is usually a short label. When it carries a whole sentence —
   the signature question under an investment theme — it must read as prose,
   not as tracked capitals. */
.row__aside.row__question {
  font-family: var(--font-text);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--graphite);
  font-style: italic;
  text-align: start;
}

@media (min-width: 60rem) {
  .row__index {
    grid-column: 1 / span 1;
    padding-top: 0.5rem;
  }

  .row__title {
    grid-column: 2 / span 4;
  }

  .row__body {
    grid-column: 7 / span 4;
  }

  .row__aside {
    grid-column: 11 / span 2;
    text-align: end;
    padding-top: 0.5rem;
  }

  /* A theme row has no index: the title, the scope and the question fill the
     grid in three even measures. */
  .row--theme .row__title {
    grid-column: 1 / span 4;
  }

  .row--theme .row__body {
    grid-column: 5 / span 4;
  }

  .row--theme .row__aside {
    grid-column: 9 / span 4;
    text-align: start;
  }
}

.row__link:hover .row__title {
  color: var(--signal-ink);
}

/* --------------------------------------------------------------------------
   STATEMENT
   The site's rhetorical device: one sentence at display scale, alone.
   -------------------------------------------------------------------------- */

.statement {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 104;
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
  max-width: 20ch;
  margin: 0;
}

.statement--wide {
  max-width: 26ch;
}

.statement em {
  font-style: normal;
  color: var(--signal-ink);
}

.section--ink .statement em {
  color: var(--signal-on-ink);
}

.hero--signal .statement em,
.section--signal .statement em {
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   PLACEHOLDER
   Unknown data is modelled, not faked. A pending record renders as an
   explicit, quiet notice — never as a fabricated value and never as a broken
   empty space. `data-approval="pending"` is the single hook that marks it.
   -------------------------------------------------------------------------- */

.pending {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--graphite);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 0.3rem 0.55rem;
}

.pending::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--line-strong);
  border-radius: 50%;
  flex: none;
}

.empty-state {
  border-top: var(--rule);
  padding-top: var(--s-6);
  color: var(--ink-soft);
  max-width: var(--measure-narrow);
}

.empty-state p + p {
  margin-top: var(--s-4);
}

.empty-state a {
  padding-block: var(--s-1);
}

/* --------------------------------------------------------------------------
   REVEAL
   One authored entrance, used once per section. Content is visible by
   default; JS adds `data-reveal` only when it can also remove it.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--d-slow) var(--ease-out),
    transform var(--d-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms * var(--motion-scale));
}

[data-reveal='in'] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   FOOTER
   Carries the institutional layer the primary navigation must not clutter.
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink-surface);
  color: var(--on-ink);
  padding-block: var(--s-10) var(--s-6);
}

.site-footer a {
  color: var(--on-ink-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--paper);
}

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--ink-surface-line);
}

.site-footer__brand {
  grid-column: 1 / -1;
}

.site-footer__brand .wordmark--brand {
  height: var(--wordmark-h);
}

.site-footer .wordmark--brand {
  color: var(--brand-mark-reversed);
}

.footer-col {
  grid-column: span 4;
}

@media (min-width: 60rem) {
  .site-footer__brand {
    grid-column: 1 / span 6;
  }

  .footer-col {
    grid-column: span 2;
  }
}

.footer-col h2 {
  font-size: var(--t-meta);
  font-family: var(--font-ui);
  font-weight: 650;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-ink-soft);
  margin-bottom: var(--s-4);
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-small);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  color: var(--on-ink-soft);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--on-ink-soft);
}

/* The statutory / registry line. Renders only the fields that are approved;
   `data-approval="pending"` fields are omitted from the DOM, not blanked. */
.registry-line {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--on-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  list-style: none;
}

.legal-note {
  max-width: var(--measure-wide);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--on-ink-soft);
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   TOUCH TARGETS
   Dense link registers — the footer columns, the navigation panel's
   institutional row, the breadcrumb and the wordmark — are still targets a
   thumb has to hit. Their type stays small; the hit area does not.
   -------------------------------------------------------------------------- */

.wordmark {
  min-height: 2.75rem;
}

.footer-col ul {
  gap: 0;
}

.footer-col ul a,
.nav-panel__secondary a,
.breadcrumb a,
.site-footer__bottom a,
.footer-legal a,
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
}

.nav-panel__secondary {
  gap: 0 var(--s-6);
}

.site-footer__bottom {
  align-items: center;
}

/* --------------------------------------------------------------------------
   NARROW-WIDTH READING ORDER
   On the editorial grid these metadata labels sit in their own column, beside
   the heading. Stacked, they would land directly above it — an eyebrow, which
   this system does not use anywhere. Below the grid breakpoint the heading
   comes first and the label reads after it, as the classification it is.
   -------------------------------------------------------------------------- */

@media (max-width: 59.99rem) {
  .row__title {
    order: 1;
  }
  .row__index {
    order: 2;
  }
  .row__body {
    order: 3;
  }
  .row__aside {
    order: 4;
  }

  .capability__name {
    order: 1;
  }
  .capability__stage {
    order: 2;
  }
  .capability__list {
    order: 3;
  }
}

/* A row without an index label must not inherit the indent that column
   reserved: its title starts on column one, aligned with the section heading
   above it. */
@media (min-width: 60rem) {
  .row__inner:not(:has(.row__index)) .row__title,
  .row__link:not(:has(.row__index)) .row__title {
    grid-column: 1 / span 4;
  }

  .row__inner:not(:has(.row__index)) .row__body,
  .row__link:not(:has(.row__index)) .row__body {
    grid-column: 6 / span 5;
  }
}