/* The philosophy page. One claim on the first screen, then one line per rule,
   set large, with nothing beside it. The page carries no boxes at all: the
   only marks on it are the rules between the lines and the small square that
   starts each one. */

.ph-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 8vw, 6rem);
}
.ph-wash {
  position: absolute;
  inset: -20% -10% 30%;
  z-index: -1;
  background-image: var(--dither-checker-25);
  background-size: calc(var(--dither-cell) * 3) calc(var(--dither-cell) * 3);
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(70% 65% at 30% 25%, #000, transparent 100%);
  mask-image: radial-gradient(70% 65% at 30% 25%, #000, transparent 100%);
  will-change: transform;
}
.ph-hero-inner { position: relative; }
.ph-hero h1.ph-claim {
  text-transform: none;
  font-size: var(--display-2);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 26ch;
  text-wrap: balance;
}
/* The sentence that sums the rules up. It sits under the opener and above the
   list, set apart from both, so it reads as the summary it is and never as
   one more rule. */
.ph-summary {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--support);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--text-dim);
  max-width: 44ch;
  text-wrap: pretty;
}

.ph-band { border-block: var(--line-w) solid var(--border-2); }

.ph-h2 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.ph-list {
  display: flex;
  flex-direction: column;
  max-width: 54rem;
  border-top: var(--line-w) solid var(--border);
}
.ph-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-20);
  padding-block: clamp(1.25rem, 2.6vw, 2rem);
  border-bottom: var(--line-w) solid var(--border);
}
.ph-mark {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--accent);
  transform: translateY(-0.15em);
}
.ph-text {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.1vw, 1.875rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: pretty;
}

@media (max-width: 899px) {
  .ph-hero { min-height: auto; padding-block: clamp(4rem, 18vw, 6rem) clamp(2rem, 8vw, 3rem); }
  .ph-claim { font-size: clamp(1.5rem, 7vw, 2.25rem); max-width: none; }
  .ph-summary { max-width: none; }
  .ph-line { gap: var(--space-12); padding-block: var(--space-18); }
  .ph-text { font-size: var(--text-lg); }
}