/*
  Principles: overview (all five) and detail (single).
*/

.page-principles {
  background: var(--bg-dark);
  color: var(--ink-inverse);
  min-block-size: calc(100dvh - var(--nav-height));
  padding-block: var(--space-4xl);
  padding-inline: max(var(--space-md), calc((100vw - var(--width-content)) / 2));
}
.page-principles > h1 {
  text-align: center;
  color: color-mix(in oklch, var(--ink-inverse) 80%, var(--brand));
  margin-block-end: var(--space-xl);
}
.page-principles > .principles {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  counter-reset: principle;
  max-inline-size: var(--width-narrow);
}
.page-principles > aside.ai-statement {
  max-inline-size: var(--width-narrow);
  margin: var(--space-3xl) auto 0;
  padding: var(--space-xl) var(--space-lg);
  background: var(--bg-tint-cream);
  color: var(--ink-body);
  border-inline-start: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.page-principles > aside.ai-statement h2 {
  color: var(--accent);
  margin-block-end: var(--space-md);
  font-size: 1.15rem;
}
.page-principles > aside.ai-statement p {
  font-size: .88rem;
  line-height: 1.55;
  margin-block-end: .35rem;
}

/* Wide screens: lay the AI statement next to the principles instead of below. */
@media (min-width: 60em) {
  .page-principles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-3xl);
    row-gap: var(--space-xl);
    align-items: start;
  }
  .page-principles > h1 { grid-column: 1 / -1; }
  .page-principles > .principles { margin: 0; max-inline-size: none; justify-self: end; inline-size: min(100%, var(--width-narrow)); }
  .page-principles > aside.ai-statement { margin: 0; max-inline-size: none; justify-self: start; inline-size: min(100%, var(--width-narrow)); }
}

/* ---- Detail page ---- */

.page-principles.detail {
  display: grid;
  place-items: center;
  position: relative;
}
.page-principles.detail .principle.detail {
  max-inline-size: var(--width-narrow);
}

/* Close button: X in top-right returns to the overview. Deliberately not a
   circle (those are reserved for prev/next sibling nav). */
.page-principles.detail > a.close {
  position: fixed;
  top: calc(var(--nav-height) + .25rem);
  right: var(--space-sm);
  z-index: 5;
  padding: .4rem .7rem;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink-inverse);
  text-decoration: none;
  opacity: .55;
  transition: opacity var(--duration-normal);
}
.page-principles.detail > a.close:hover,
.page-principles.detail > a.close:focus-visible { opacity: 1; color: var(--ink-inverse); }