/* 04 How we work: three principles as quiet light panels in the content column, all visible at
   once. The Trail art alternates sides to keep a reading rhythm; only each sign-off is in Seal. */
.principles__list {
  grid-column: 4 / -1;
  grid-row: 1;
  display: grid;
  gap: 14px;
}

.principle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  min-height: 340px;
  overflow: hidden;
  background: var(--sheet);
  border: 1px solid var(--mist);
  color: var(--ink);
}
.principle:nth-child(even) { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
.principle:nth-child(even) .principle__art { order: 2; }

.principle__art { position: relative; min-height: 300px; }
.principle__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.principle__copy {
  display: flex;
  flex-direction: column;
  padding: 28px 32px 32px;
}
.principle__num {
  color: var(--ink-2);
  font: 400 12px/1 var(--mono);
  letter-spacing: .06em;
}
.principle__title {
  margin-top: 18px;
  max-width: 11em;
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -0.035em;
}
.principle__text {
  max-width: 420px;
  margin-top: auto;
  padding-top: 28px;
  color: var(--ink-2);
  font: 400 clamp(16px, 1.25vw, 18px)/1.45 var(--sans);
  letter-spacing: -0.01em;
}

@media (max-width: 1099px) {
  .principle, .principle:nth-child(even) { grid-template-columns: 1fr; min-height: 0; }
  .principle:nth-child(even) .principle__art { order: 0; }
  .principle__art { min-height: 0; height: clamp(220px, 36vw, 300px); }
}

@media (max-width: 767px) {
  .principles__list { grid-column: 1 / -1; grid-row: auto; }
  .principle__art { height: clamp(200px, 58vw, 260px); }
  .principle__copy { padding: 20px var(--margin) 26px; }
  .principle__text { font-size: 16px; }
}