/* ==========================================================================
   SANAD ElevateHer — site styles
   Palette and typeface are the approved SANAD ElevateHer brand values.
   brown #5C2607 · orange #F28627 · peach #F3C59B · cream #FBEEDD · Mulish
   ========================================================================== */

/* --- Fonts --------------------------------------------------------------- */

@font-face {
  font-family: "Mulish";
  src: url("../fonts/Mulish_400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mulish";
  src: url("../fonts/Mulish_800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mulish";
  src: url("../fonts/Mulish_900.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --brown: #5c2607;
  --orange: #f28627;
  --peach: #f3c59b;
  --cream: #fbeedd;

  /* Deep burnt orange. The brand orange fails contrast as text on cream,
     so small type that needs to read warm uses this instead. 4.9:1 on cream. */
  --rust: #a94c0b;

  /* Seedstars blue, used only for the Seedstars mark and its own link. */
  --seedstars: #0865ac;

  --paper: #ffffff;
  --logo-plate-black: #000000;
  --logo-plate-grey: #f8f8f8;
  --logo-plate-ivory: #fbfbf5;
  --ink: var(--brown);
  /* Secondary copy stays warm but remains crisp at small sizes. */
  --ink-soft: #6b3f1e;
  --rule: rgba(92, 38, 7, 0.16);
  --rule-strong: rgba(92, 38, 7, 0.32);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --shell: min(1240px, 100% - (2 * var(--gutter)));

  --step-eyebrow: 0.75rem;
  --step-body: 1.0625rem;
  --step-lead: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --step-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  --step-h2: clamp(1.9rem, 1.1rem + 3.2vw, 3.35rem);
  /* The floor is set so that "entrepreneurship" still fits inside a 360px
     viewport without breaking. Do not raise it without re-testing at 360. */
  --step-display: clamp(2.05rem, 1rem + 4.7vw, 4.9rem);

  --band: clamp(4rem, 9vw, 8.5rem);
  --radius: 4px;
}

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--ink);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: var(--rust);
}

:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Rust does not carry 3:1 against the brown surface, so dark bands take the
   brand orange for their focus ring instead. */
.band--brown :focus-visible,
.atlas-cover :focus-visible,
.atlas-chapter--ssa :focus-visible,
.event-card--primary :focus-visible {
  outline-color: var(--orange);
}

/* The sticky header would otherwise cover an anchored section heading. */
section[id],
.company[id] {
  scroll-margin-top: clamp(5rem, 10vh, 7rem);
}

main {
  scroll-margin-top: clamp(5rem, 10vh, 7rem);
}

/* --- Skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100vh;
  z-index: 100;
  background: var(--brown);
  color: var(--cream);
  padding: 0.75rem 1.15rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 0.75rem;
}

/* --- Layout primitives --------------------------------------------------- */

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.band {
  padding-block: var(--band);
  position: relative;
}

.band--tight {
  padding-block: clamp(2.75rem, 5vw, 4.75rem);
}

.band--brown {
  background: var(--brown);
  color: var(--cream);
  overflow: hidden;
}

.band--brown a {
  color: var(--cream);
  text-decoration-color: rgba(251, 238, 221, 0.5);
}

.band--brown a:hover {
  text-decoration-color: var(--orange);
}

.band--peach {
  background: var(--peach);
  overflow: hidden;
}

/* Rust is intentionally reserved for cream. On peach it falls below the
   small-text AA threshold, so labels use the primary brown. */
.band--peach .eyebrow {
  color: var(--brown);
}

.band--ruled {
  border-top: 1px solid var(--rule);
}

/* Asymmetric editorial grid. Content never centres by default. */
.grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 62rem) {
  .grid--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .grid--split-reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
}

/* --- Type ---------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: var(--step-eyebrow);
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.9rem;
}

.eyebrow::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: 0.85rem;
  background: var(--orange);
}

.band--brown .eyebrow {
  color: var(--peach);
}

.display {
  font-size: var(--step-display);
  font-weight: 900;
  line-height: 0.97;
  letter-spacing: -0.032em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.h2 {
  font-size: var(--step-h2);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.h3 {
  font-size: var(--step-h3);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.52;
  max-width: 38ch;
}

.prose p + p {
  margin-top: 1.1em;
}

.prose {
  max-width: 62ch;
}

.note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
}

.band--brown .note {
  color: var(--peach);
}

.stack > * + * {
  margin-top: clamp(1.15rem, 2vw, 1.75rem);
}

.stack-tight > * + * {
  margin-top: 0.8rem;
}

/* --- Links and actions --------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  align-items: center;
}

.action {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius);
  background: var(--brown);
  color: var(--cream);
  border: 2px solid var(--brown);
}

.action:hover,
.action:focus-visible {
  background: #431c05;
  border-color: #431c05;
}

.action--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.action--quiet:hover,
.action--quiet:focus-visible {
  background: transparent;
  border-color: var(--brown);
}

/* Keep the secondary home action legible as the decorative pyramid field
   rises behind it on narrow screens. */
.hero .action--quiet,
.hero .action--quiet:hover,
.hero .action--quiet:focus-visible {
  background: var(--cream);
}

.action .arrow {
  font-weight: 800;
}

.band--brown .action {
  background: var(--cream);
  color: var(--brown);
  border-color: var(--cream);
}

.textlink {
  font-weight: 800;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
}

/* --- Decorative pattern and pyramids ------------------------------------- */

/* Tonal triangle grid, reproduced from the approved print artwork:
   150-unit spacing, alternating orientation, half-step row offset. */
.pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%23FBEEDD' fill-opacity='0.06'%3E%3Cpath d='M-18.5 56h37L0 19z'/%3E%3Cpath d='M131.5 56h37L150 19z'/%3E%3Cpath d='M56.5 19h37L75 56z'/%3E%3Cpath d='M-18.5 94h37L0 131z'/%3E%3Cpath d='M131.5 94h37L150 131z'/%3E%3Cpath d='M56.5 131h37L75 94z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
}

.band--peach .pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%235C2607' fill-opacity='0.05'%3E%3Cpath d='M-18.5 56h37L0 19z'/%3E%3Cpath d='M131.5 56h37L150 19z'/%3E%3Cpath d='M56.5 19h37L75 56z'/%3E%3Cpath d='M-18.5 94h37L0 131z'/%3E%3Cpath d='M131.5 94h37L150 131z'/%3E%3Cpath d='M56.5 131h37L75 94z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Overlapping pyramid forms. Bases sit below the container edge, as in the
   approved artwork. Rounded vertices come from a matching round-joined
   stroke rather than a separate shape. */
.pyramids {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: clamp(20rem, 46vw, 42rem);
  bottom: -6%;
  right: -8%;
}

.pyramids svg {
  display: block;
  width: 100%;
  height: auto;
}

/* A round-joined stroke in the fill colour gives the vertices the same soft
   corner as the official artwork without altering the silhouette. */
.pyramids polygon {
  stroke-width: 26;
  stroke-linejoin: round;
}

.pyramids .p1 {
  fill: var(--peach);
  stroke: var(--peach);
}

.pyramids .p2 {
  fill: var(--orange);
  stroke: var(--orange);
}

.pyramids .p3 {
  fill: var(--cream);
  stroke: var(--cream);
}

/* Warm variant for cream surfaces: soft tan behind, peach, then orange. */
.pyramids--warm .p1 {
  fill: #efd9c0;
  stroke: #efd9c0;
}

.pyramids--warm .p2 {
  fill: var(--peach);
  stroke: var(--peach);
}

.pyramids--warm .p3 {
  fill: var(--orange);
  stroke: var(--orange);
}

.band > .shell {
  position: relative;
  z-index: 1;
}

/* --- Alexandria event pathway ------------------------------------------ */

.event-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 48rem) {
  .event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.event-card {
  position: relative;
  min-height: 21rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.event-card--primary {
  background: var(--brown);
  color: var(--cream);
  border-color: var(--brown);
}

.event-card > * {
  position: relative;
  z-index: 1;
}

.event-card .h3 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem);
}

.event-card > p:not(.eyebrow):not(.event-card__number) {
  margin-top: 1rem;
  max-width: 42ch;
}

.event-card > .textlink,
.event-card__actions {
  margin-top: auto;
  padding-top: 2rem;
}

.event-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.event-card--primary .eyebrow,
.event-card--primary .textlink {
  color: var(--peach);
}

.event-card--primary .textlink {
  text-decoration-color: var(--orange);
}

/* --- Digital Founder Atlas --------------------------------------------- */

.atlas-cover {
  position: relative;
  min-height: min(48rem, calc(100svh - 5rem));
  padding-block: clamp(4rem, 9vw, 8rem);
  overflow: hidden;
  background: var(--brown);
  color: var(--cream);
  display: grid;
  align-items: center;
}

.atlas-cover .pattern {
  opacity: 0.9;
}

.atlas-cover__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.atlas-cover .eyebrow,
.atlas-cover .lead {
  color: var(--peach);
}

.atlas-cover .display {
  font-size: clamp(3rem, 2.1rem + 8vw, 10rem);
  line-height: 0.78;
  letter-spacing: -0.065em;
  max-width: 8ch;
}

.atlas-cover .pyramids {
  width: clamp(28rem, 55vw, 60rem);
  bottom: -12%;
  right: -10%;
}

@media (max-width: 40rem) {
  .atlas-cover {
    padding-bottom: 10rem;
  }

  .atlas-cover .pyramids {
    width: 27rem;
    bottom: -20%;
    right: -32%;
  }
}

.atlas-statline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem clamp(2.5rem, 6vw, 6rem);
  margin-top: clamp(1rem, 3vw, 2rem);
}

.atlas-statline li {
  display: grid;
  gap: 0.15rem;
}

.atlas-statline strong {
  font-size: clamp(2.25rem, 1.7rem + 2vw, 4rem);
  font-weight: 900;
  line-height: 1;
  color: var(--orange);
}

.atlas-statline span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach);
}

.atlas-chapter {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem);
  overflow: hidden;
}

.atlas-chapter--mena {
  background: var(--peach);
}

.atlas-chapter--mena .eyebrow,
.atlas-chapter--mena .atlas-index span {
  color: var(--brown);
}

.atlas-chapter--ssa {
  background: var(--brown);
  color: var(--cream);
}

.atlas-chapter__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
}

@media (min-width: 62rem) {
  .atlas-chapter__layout {
    grid-template-columns: minmax(17rem, 4fr) minmax(0, 7fr);
    align-items: start;
  }

  .atlas-chapter__header {
    position: sticky;
    top: 7rem;
  }
}

.atlas-chapter__number {
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  font-weight: 900;
  line-height: 0.8;
  color: rgba(92, 38, 7, 0.13);
}

.atlas-chapter--ssa .atlas-chapter__number {
  color: rgba(251, 238, 221, 0.12);
}

.atlas-chapter--ssa .eyebrow,
.atlas-chapter--ssa .lead {
  color: var(--peach);
}

.atlas-chapter--ssa .action {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--brown);
}

.atlas-index {
  border-top: 1px solid var(--rule-strong);
}

.atlas-chapter--ssa .atlas-index {
  border-top-color: rgba(251, 238, 221, 0.28);
}

.atlas-index li {
  border-bottom: 1px solid var(--rule-strong);
}

.atlas-chapter--ssa .atlas-index li {
  border-bottom-color: rgba(251, 238, 221, 0.28);
}

.atlas-index a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 1rem;
  color: inherit;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
  transition: padding-inline-start 160ms ease, background-color 160ms ease;
}

.atlas-index a:hover {
  padding-inline-start: 0.35rem;
}

.atlas-index a:focus-visible {
  outline-offset: -3px;
  background: rgba(92, 38, 7, 0.07);
}

.atlas-chapter--ssa .atlas-index a:focus-visible {
  background: rgba(251, 238, 221, 0.08);
}

.atlas-index span {
  padding-top: 0.12rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--rust);
}

.atlas-chapter--ssa .atlas-index span {
  color: var(--peach);
}

.atlas-profiles {
  grid-column: 1 / -1;
  scroll-margin-top: clamp(5rem, 10vh, 7rem);
  margin-top: clamp(1rem, 3vw, 2.5rem);
  padding-top: clamp(2rem, 5vw, 4rem);
  border-top: 2px solid var(--rule-strong);
}

.atlas-chapter--ssa .atlas-profiles {
  border-top-color: rgba(251, 238, 221, 0.35);
}

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

.atlas-chapter--ssa .atlas-loading {
  color: var(--peach);
}

.atlas-profile-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.atlas-chapter--ssa .atlas-profile {
  border-color: rgba(251, 238, 221, 0.3);
}

.atlas-chapter--ssa .atlas-profile .company__body {
  background: var(--brown);
}

.atlas-chapter--ssa .atlas-profile .company__place,
.atlas-chapter--ssa .atlas-profile .company__description {
  color: var(--peach);
}

.atlas-chapter--ssa .atlas-profile .company__link {
  color: var(--peach);
  text-decoration-color: var(--orange);
}

/* --- Event alert --------------------------------------------------------- */

.event-alert {
  background: var(--brown);
  color: var(--cream);
  border-bottom: 1px solid rgba(251, 238, 221, 0.2);
}

.event-alert__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-block: 0.65rem;
  font-size: 0.875rem;
  line-height: 1.35;
}

.event-alert__inner p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
}

.event-alert__inner strong {
  color: var(--peach);
}

.event-alert a {
  flex: 0 0 auto;
  color: var(--cream);
  font-weight: 800;
  text-decoration-color: var(--orange);
}

@media (max-width: 42rem) {
  .event-alert__inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 0 rgba(92, 38, 7, 0.04);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.brand img {
  display: block;
  width: clamp(9.5rem, 20vw, 13.5rem);
  height: auto;
}

.nav-toggle {
  display: none;
  font: inherit;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.55rem 0.95rem;
  cursor: pointer;
}

.js .nav-toggle {
  display: inline-block;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.6rem;
}

.site-nav a {
  display: inline-block;
  padding: 0.35rem 0;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.site-nav a:hover {
  border-bottom-color: var(--orange);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--brown);
}

@media (max-width: 54rem) {
  .js .site-nav {
    display: none;
    width: 100%;
  }

  .js .site-nav.is-open {
    display: block;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.75rem;
  }

  .site-nav li + li {
    border-top: 1px solid var(--rule);
  }

  .site-nav a {
    padding: 0.85rem 0;
    border-bottom: 0;
    padding-left: 0.85rem;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    border-bottom-color: transparent;
    background: rgba(242, 134, 39, 0.12);
  }
}

@media (min-width: 54.0625rem) {
  .js .nav-toggle {
    display: none;
  }

  .js .site-nav {
    display: block;
  }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.25rem, 5.5vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 2.25vw, 2rem);
}

.hero__inner > * {
  max-width: 56rem;
}

/* Interior-page copy keeps a deliberate clear zone around the pyramid field.
   The home hero is exempt because its larger composition already creates that
   separation through its own height and action layout. */
@media (min-width: 54.0625rem) {
  .hero--page .hero__inner {
    padding-right: clamp(16rem, 30vw, 25rem);
  }
}

@media (max-width: 54rem) {
  .hero--page {
    padding-bottom: clamp(8rem, 23vw, 11rem);
  }

  .hero--page .pyramids {
    bottom: -22%;
  }
}

.hero .display {
  max-width: 17ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.hero__meta .dot {
  color: var(--orange);
}

/* Below the width where both credits fit on one line, the flex row wraps and
   strands the separator at the end of the first line. Stack the credits and
   drop the dot instead; it is decorative and already aria-hidden. */
@media (max-width: 40rem) {
  .hero__meta {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
  }

  .hero__meta .dot {
    display: none;
  }
}

/* --- Founder illustration anchor ----------------------------------------- */

.anchor-figure {
  position: relative;
  margin: 0;
}

/* The official master has a hard lower edge where the figures were cut. The
   approved print and deck treatment softens it with an alpha fade rather than
   redrawing anything, so the same fade is applied here as a CSS mask. The
   image file itself is untouched. */
.anchor-figure img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}

.anchor-figure figcaption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* --- Facts list ---------------------------------------------------------- */

.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  max-width: 44rem;
}

.band--brown .facts {
  border-top-color: rgba(251, 238, 221, 0.28);
}

.facts > div {
  display: grid;
  gap: 0.15rem 2rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
}

.band--brown .facts > div {
  border-bottom-color: rgba(251, 238, 221, 0.28);
}

@media (min-width: 40rem) {
  .facts > div {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.facts dt {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}

.band--brown .facts dt {
  color: var(--peach);
}

.facts dd {
  margin: 0;
  font-weight: 800;
  font-size: var(--step-h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* --- Program story ------------------------------------------------------- */

.section-intro {
  max-width: 54rem;
}

.program-steps {
  list-style: none;
  counter-reset: program-step;
  border-top: 1px solid var(--rule-strong);
}

.program-step {
  counter-increment: program-step;
  display: grid;
  grid-template-columns: clamp(3.25rem, 7vw, 5.75rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.3rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--rule-strong);
}

.program-step::before {
  content: "0" counter(program-step);
  padding-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--rust);
}

.program-step h3 {
  margin-bottom: 0.45rem;
}

.program-step p,
.partner-role p {
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 62ch;
}

.program-tools {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.program-context {
  align-items: start;
}

.partner-roles {
  border-top: 1px solid var(--rule);
}

.partner-role {
  padding-block: clamp(1.3rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid var(--rule);
}

.partner-role .textlink {
  display: inline-block;
  margin-top: 1rem;
}

/* --- Attending team ------------------------------------------------------ */

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
  max-width: 70rem;
}

.team-member {
  min-width: 0;
  flex: 0 1 calc((100% - clamp(1rem, 3vw, 2.5rem)) / 2);
}

.team-member img {
  display: block;
  width: min(100%, 15rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--cream);
  box-shadow: 0 1rem 2.5rem rgba(92, 38, 7, 0.12);
}

.team-member .h3 {
  margin-top: 0.9rem;
  max-width: 16ch;
}

@media (min-width: 42rem) {
  .team-member {
    flex-basis: calc((100% - (2 * clamp(1rem, 3vw, 2.5rem))) / 3);
  }
}

@media (min-width: 68rem) {
  .team-member {
    flex-basis: calc((100% - (4 * clamp(1rem, 3vw, 2.5rem))) / 5);
  }
}

.techne-lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
  border-bottom: 1px solid rgba(251, 238, 221, 0.28);
}

.techne-lockup span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--peach);
}

.techne-lockup a {
  display: inline-flex;
  text-decoration: none;
}

.techne-lockup img {
  display: block;
  width: clamp(10rem, 20vw, 15rem);
  height: auto;
}

/* --- Cohort grid --------------------------------------------------------- */

.cohort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.company {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.company:target {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 134, 39, 0.22);
}

/* Logo plate is deliberately white. Many supplied marks carry an intrinsic
   white background, so a cream plate would show a visible fringe. Marks are
   never recoloured, cropped or stretched. */
.company__plate {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 3 / 2;
  /* The plate is a flex item, so its automatic minimum height would otherwise
     let a tall logo push it past the 3:2 box. Tiles that fall back to a
     typographic wordmark keep the declared ratio, so mixed rows lose their
     shared baseline. Pin the minimum so every plate is the same box. */
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.company__plate img {
  display: block;
  position: absolute;
  inset: 1.5rem;
  width: calc(100% - 3rem);
  height: calc(100% - 3rem);
  object-fit: contain;
  object-position: center;
}

/* A few source logos carry their own opaque canvas. Match the plate to that
   canvas so the supplied mark remains untouched and reads as intentional. */
.company--plate-black .company__plate {
  background: var(--logo-plate-black);
}

.company--plate-grey .company__plate {
  background: var(--logo-plate-grey);
}

.company--plate-ivory .company__plate {
  background: var(--logo-plate-ivory);
}

.company--logo-compact .company__plate img {
  position: static;
  inset: auto;
  width: 6.5rem;
  height: 7rem;
}

.company__plate .wordmark-fallback {
  padding: 1.5rem;
  max-width: 80%;
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--brown);
  text-align: center;
  overflow-wrap: anywhere;
}

.company__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem clamp(1.1rem, 2.4vw, 1.5rem) 1.25rem;
}

.company__name {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.company__place {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ink-soft);
}

.company__description {
  margin-top: 0.8rem;
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.company__link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--rust);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
}

.company__link:hover {
  color: var(--brown);
}

/* --- Roster list --------------------------------------------------------- */

.roster {
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  font-size: 0.9375rem;
}

@media (max-width: 30rem) {
  .roster {
    columns: 1;
  }
}

@media (min-width: 56rem) {
  .roster {
    columns: 3;
  }
}

.roster li {
  break-inside: avoid;
  padding-block: 0.3rem;
  font-weight: 800;
  line-height: 1.35;
}

.roster li span {
  display: block;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.875rem;
}

.band--brown .roster li span {
  color: var(--peach);
}

@media (max-width: 30rem) {
  .roster li {
    padding-block: 0.5rem;
  }
}

.roster-group + .roster-group {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.roster-group h3 {
  margin-bottom: 0.75rem;
}

/* --- Partner lockup ------------------------------------------------------ */

.lockup img {
  display: block;
  width: clamp(15rem, 34vw, 24rem);
  height: auto;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--cream);
  border-top: 4px solid var(--brown);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.site-footer__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 52rem) {
  .site-footer__top {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

.footer-nav ul {
  display: grid;
  gap: 0.55rem;
}

.footer-nav a {
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.footer-nav a:hover {
  border-bottom-color: var(--orange);
}

.site-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.site-footer__bottom a {
  color: var(--ink-soft);
}

.site-footer__bottom a.seedstars-link {
  color: var(--seedstars);
  text-decoration-color: var(--seedstars);
  font-weight: 800;
}

/* --- 404 ----------------------------------------------------------------- */

.error-page {
  min-height: 58vh;
  display: grid;
  align-content: center;
}

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .site-header,
  .pyramids,
  .pattern,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}