/* Landing */
.hero {
  padding-top: var(--layout-hero-y-start);
  padding-bottom: var(--layout-hero-y-end);
  background: var(--surface-page-bg);
}

.hero-copy,
.section-grid {
  max-width: var(--max-public);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--public-grid-columns);
  column-gap: var(--public-column-gap);
}

.hero-copy {
  row-gap: 0;
  align-items: start;
}

.hero-headline,
.hero-lede,
.hero-meta {
  grid-column: 1 / -1;
}

.hero-meta,
.section-number {
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-mono);
}

.hero-headline {
  font-family: var(--font-display-light);
  font-weight: 400;
  font-size: var(--type-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--hero-title-fg);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero-meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: 400;
  margin: var(--layout-grid-gap) 0 0 0;
}

.hero-lede {
  font-family: var(--font-sans-regular);
  font-weight: 400;
  font-size: var(--type-lede);
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-subhead);
  color: var(--hero-lede-fg);
  margin: var(--layout-block-gap) 0 0 0;
  max-width: 50ch;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.section-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.identity-section {
  padding-block: var(--layout-section-y);
  border-top: 1px solid var(--line-soft);
}

.section-grid {
  row-gap: var(--layout-grid-gap);
  align-items: baseline;
}

.section-heading {
  display: contents;
  row-gap: var(--space-s);
}

.section-number {
  grid-column: 1;
}

.section-title,
.section-thesis,
.section-body {
  grid-column: 2;
}

.section-title {
  font-family: var(--font-display-regular);
  font-weight: 400;
  font-size: var(--type-heading);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-heading);
  color: var(--heading-fg);
  margin: 0;
  overflow-wrap: break-word;
}

.section-thesis {
  font-family: var(--font-sans-regular);
  font-style: normal;
  font-weight: 400;
  font-size: var(--type-subhead);
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-subhead);
  color: var(--text-muted);
  margin-top: 0;
  max-width: var(--max-prose);
  text-wrap: pretty;
}

.section-body,
.thesis-body {
  font-family: var(--font-sans-regular);
  font-size: var(--type-section);
  line-height: var(--leading-prose);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  overflow-wrap: break-word;
  max-width: var(--max-prose);
}

.section-body p + p,
.thesis-body p + p {
  margin-top: var(--layout-copy-gap);
}

.thesis-line {
  font-family: var(--font-sans-semibold);
  font-weight: 400;
  color: var(--text-primary);
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.case-card {
  --case-header-gap: var(--space-s);
  --case-header-slot-y: 2.4rem;
  --case-left-track: calc(var(--public-label-col) + var(--public-column-gap) - var(--card-column-gap));
  --case-logo-slot-x: 3.75rem;
  --case-logo-slot-y: var(--case-header-slot-y);
  --case-fact-label-col: var(--section-detail-label-col);
  --case-fact-row-gap: var(--space-l);
  background: var(--surface-card-bg);
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  padding: var(--case-card-y) 0;
  display: grid;
  grid-template-columns: var(--case-left-track) var(--case-fact-label-col) minmax(0, var(--case-content-measure));
  grid-template-rows: minmax(var(--case-header-slot-y), auto) auto auto;
  column-gap: var(--card-column-gap);
  row-gap: var(--case-header-gap);
  align-items: start;
  min-width: 0;
}

.case-card:last-child {
  padding-bottom: 0;
}

.case-head {
  display: contents;
}

.case-content {
  display: contents;
  row-gap: var(--space-m);
}

.case-title,
.case-company,
.case-facts dt,
.case-facts dd {
  margin: 0;
  font-family: var(--font-sans-regular);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.case-title {
  grid-column: 2 / -1;
  grid-row: 1;
  align-self: end;
  font-family: var(--font-sans-semibold);
  font-weight: 400;
  font-size: var(--type-subhead);
  line-height: var(--leading-control);
  letter-spacing: var(--tracking-subhead);
  color: var(--text-primary);
  overflow-wrap: break-word;
  max-width: var(--case-content-measure);
}

.case-company-row {
  display: contents;
}

.case-company {
  grid-column: 1;
  grid-row: 2;
  align-self: baseline;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-mono);
  overflow-wrap: normal;
  text-wrap: balance;
  white-space: normal;
}

.case-logo-frame {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  display: grid;
  place-items: end start;
  width: var(--case-logo-slot-x);
  height: var(--case-logo-slot-y);
  overflow: hidden;
}

.case-logo {
  display: block;
  width: var(--case-logo-width, auto);
  height: var(--case-logo-height, auto);
  max-width: 100%;
  max-height: var(--case-logo-slot-y);
  color: var(--color-ink-faint);
  opacity: 0.82;
}

.case-logo--mark {
  width: var(--case-logo-width, 2rem);
  height: var(--case-logo-height, 2rem);
}

.case-logo--wide {
  width: var(--case-logo-width, var(--case-logo-slot-x));
  height: var(--case-logo-height, var(--case-logo-slot-y));
}

.case-logo--hsbc {
  --case-logo-width: 3.15rem;
  --case-logo-height: 1.575rem;
}

.case-logo--rheinmetall {
  --case-logo-width: 1.45rem;
  --case-logo-height: 2.05rem;
}

.case-logo--emco {
  --case-logo-width: 3.75rem;
  --case-logo-height: 1.17rem;
}

.case-logo--ycombinator {
  --case-logo-width: 2.4rem;
  --case-logo-height: 2.4rem;
}

.case-facts {
  display: contents;
}

.case-facts div {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: var(--section-detail-label-col) minmax(0, 1fr);
  column-gap: var(--space-l);
  align-items: baseline;
  align-self: baseline;
  min-width: 0;
}

.case-facts dt {
  grid-column: 1;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

.case-facts dd {
  grid-column: 2;
  color: var(--text-primary);
  line-height: var(--leading-prose);
  max-width: var(--case-content-measure);
}

.case-facts div:first-child {
  grid-row: 2;
}

.case-facts div:nth-child(2) {
  grid-row: 3;
  margin-top: calc(var(--case-fact-row-gap) - var(--case-header-gap));
}

.identity-section--record .section-thesis {
  grid-column: 2;
}

.identity-section--record .section-grid {
  row-gap: var(--layout-block-gap);
}

.identity-section--record .case-grid {
  grid-column: 1 / -1;
}

.identity-section--principles,
.identity-section--contact {
  border-top: 1px solid var(--line-soft);
}

.principles-body {
  max-width: var(--max-prose);
}

.principle-list {
  display: grid;
  row-gap: var(--space-l);
  list-style: none;
  padding: 0;
  margin: 0;
}

.principle-item {
  display: grid;
  grid-template-columns: var(--section-detail-label-col) minmax(0, 1fr);
  column-gap: var(--section-detail-column-gap);
  row-gap: var(--space-2xs);
  align-items: start;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--case-card-y-compact);
  min-width: 0;
}

.principle-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.principle-title {
  grid-column: 1 / -1;
  font-family: var(--font-sans-semibold);
  font-size: var(--type-subhead);
  font-weight: 400;
  line-height: var(--leading-control);
  letter-spacing: var(--tracking-subhead);
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.principle-item p {
  grid-column: 1 / -1;
  margin: 0;
  max-width: var(--max-prose);
}

.contact-body {
  max-width: var(--max-prose);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--layout-block-gap);
}

.contact-action {
  text-decoration: none;
}

@media (max-width: 920px) {
  .hero-copy,
  .section-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-grid-gap);
  }

  .hero-headline,
  .hero-lede,
  .hero-meta,
  .section-heading,
  .section-number,
  .section-title,
  .section-thesis,
  .section-body {
    grid-column: 1;
  }

  .section-heading {
    display: grid;
    align-content: start;
    gap: var(--space-s);
  }

  .identity-section--record .section-number,
  .identity-section--record .section-title,
  .identity-section--record .section-thesis,
  .identity-section--record .case-grid {
    grid-column: 1;
    grid-row: auto;
  }

  .case-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 860px) {
  .identity-section {
    padding-block: var(--layout-section-y-compact);
  }
}

@media (max-width: 920px) {
  .identity-section {
    --section-detail-column-gap: var(--section-detail-column-gap-compact);
  }

  .case-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 0;
    row-gap: var(--space-m);
    padding-block: var(--case-card-y-compact);
  }

  .case-head,
  .case-content {
    display: grid;
    grid-column: 1;
    row-gap: var(--space-m);
    min-width: 0;
  }

  .case-company-row,
  .case-title {
    grid-column: 1;
    grid-row: auto;
  }

  .case-company-row {
    display: grid;
    grid-template-rows: var(--case-header-slot-y) auto;
    grid-template-columns: 1fr;
    row-gap: var(--case-header-gap);
    align-items: start;
    min-width: 0;
  }

  .case-facts {
    display: grid;
    row-gap: var(--space-s);
    min-width: 0;
  }

  .case-facts div {
    display: grid;
    grid-template-columns: var(--case-fact-label-col) minmax(0, 1fr);
    column-gap: var(--section-detail-column-gap);
    row-gap: 0;
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }

  .case-facts dt,
  .case-facts dd,
  .case-facts div:first-child,
  .case-facts div:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }
}

@media (max-width: 520px) {
  .section-thesis {
    font-size: var(--type-body);
  }

  .principle-item {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}