/* Page composition only. The cascade is assembled in the page head, which links
   tokens, the shared website base and this file in that order - four parallel
   requests rather than a chain of @imports the browser can only discover one at
   a time. Nothing here may be the first stylesheet a page loads. */

/* Keep the authored light/dark palettes when a browser honours the automatic
   recolouring opt-out. Match the dark token selector's specificity so its
   colour-scheme declaration does not discard `only`. Some in-app browsers
   force their own palette regardless; this is not a guarantee against those. */
:root:not([data-theme]) {
  color-scheme: only light dark;
}

/* The horizontal lockup alone, inlined and filled with currentColor so one file
   serves both schemes through --mark-color. Why inline rather than masked, and why
   the pictorial mark is not paired with the wordmark: MASTER.md section 5.7.

   The one local measurement: the file carries 0.25em clear space, so its ink is
   0.635 of the box. Measured, not assumed. Recompute if the master is rebuilt. */
.wordmark {
  --wordmark-ink: var(--space-6);
  display: flex;
  align-items: center;
  width: min(100%, calc(var(--wordmark-ink) / 0.635 * 929.335 / 136.66));
  color: var(--mark-color);
}

.wordmark__horizontal {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
}

/* The hero stacks three blocks: the statement, the diagram, then the copy and its
   button. The row gap is one step above the 32px lede-to-button gap inside the
   copy block, so the gap around a group stays larger than the gap within it. */
.hero .grid {
  row-gap: var(--space-7);
}

/* text-wrap: pretty, not balance: balance re-breaks the desktop line mid-phrase
   ("built / as a practice"), while pretty keeps the hand-set desktop break and
   still refuses to leave "owns." alone on the last line between 585 and 800px. */
.hero-title {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.hero-copy .lede {
  margin-top: 0;
}

/* Source order is statement, diagram, copy - the reading order on a phone. Above
   the breakpoint the two are placed side by side, copy left, diagram right. */
@media (min-width: 720px) {
  .hero-copy {
    grid-column: 1 / span 6;
    grid-row: 2;
  }

  .hero-flow {
    grid-column: 7 / span 6;
    grid-row: 2;
  }
}

.practice-intro {
  grid-column: 1 / -1;
}

.pillar h3 {
  margin-top: 0;
}

.pillar__heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pillar__icon {
  flex: 0 0 var(--space-7);
  width: var(--space-7);
  height: var(--space-7);
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--line-width-meaningful);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.pillar__heading + p {
  margin-top: var(--space-4);
}

.portrait {
  aspect-ratio: 1;
  border-radius: var(--radius-portrait);
  object-fit: cover;
}

/* Top-aligned and flush left: the portrait shares the page's left edge and the
   name's top edge. Centring it did neither - it floated the portrait up to 159px
   below the name at tablet widths and sat it 16 to 20px off the left axis. */
.profile-card {
  align-items: start;
}

.profile-card__portrait {
  width: min(100%, 18rem);
}

.profile-card__name {
  font-size: var(--size-web-31);
}

.profile-card__role {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--size-web-20);
}

.profile-card__summary {
  margin-top: var(--space-5);
}

.profile-card__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.profile-card__details dd {
  margin-block-start: var(--space-2);
  margin-inline-start: 0;
  overflow-wrap: anywhere;
}

.footer__line {
  padding-top: 0;
  border-top: 0;
}

.flow__node + .flow__node::before {
  left: 50%;
  height: calc(var(--space-5) - var(--space-2));
  transform: translateX(-50%);
}

.flow__node + .flow__node::after {
  position: absolute;
  top: calc(var(--space-2) * -1);
  left: 50%;
  width: var(--space-2);
  height: var(--space-2);
  border-right: var(--line-width-meaningful) solid var(--line-meaningful);
  border-bottom: var(--line-width-meaningful) solid var(--line-meaningful);
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}