/* About section — night half. Giant Newsreader back-plane, editorial two-column, one oversized pull quote.
   Motion = the shared .reveal (opacity/transform). Reduced motion is handled by base.css. */

.about { border-top: 1px solid var(--night-line); }
.about > .wrap { position: relative; z-index: 1; }

/* Giant decorative word. Bleeds off the edge on phones; the section's overflow clip cuts it. */
.ab-back {
  position: absolute; z-index: 0; top: clamp(8px, 2vw, 28px); left: var(--gutter);
  margin: 0; font-size: 34vw; line-height: .86; white-space: nowrap;
  color: var(--night-text); opacity: .05; pointer-events: none; user-select: none;
}

.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: clamp(40px, 12vw, 120px); }
.ab-h {
  margin: 0; max-width: 14ch; color: var(--night-text);
  font: 400 clamp(2rem, 1.1rem + 3.2vw, 3.5rem)/1.04 var(--font-atlas); letter-spacing: -.02em;
}
.ab-ln { display: block; color: var(--glow); font-style: italic; }
.ab-body { display: grid; gap: 1.1em; max-width: 56ch; }
.ab-body p { margin: 0; font-size: var(--t-md); line-height: 1.6; color: var(--night-muted); }
.ab-body p:first-child { color: var(--night-text); }

/* Oversized pull quote with a glow-tinted rule beside it. */
.ab-quote { position: relative; margin: clamp(48px, 9vw, 112px) 0 0; padding-left: clamp(18px, 2.6vw, 36px); }
.ab-quote::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px; background: var(--glow); box-shadow: 0 0 22px 1px var(--glow-soft), 0 0 8px 0 rgba(95, 184, 159, .45); }
.ab-quote blockquote { margin: 0; }
.ab-quote p {
  margin: 0; max-width: 15em; color: var(--night-text); text-wrap: balance;
  font: italic 400 clamp(2.25rem, 1rem + 6.4vw, 6.5rem)/1.04 var(--font-atlas); letter-spacing: -.03em;
}

/* Principles: three tiny mono items, thin top rules. */
.ab-pr { list-style: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ab-pr li { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--night-line); }
.ab-pr .kicker { color: var(--glow); }
.ab-pr p { margin: 0; font: 400 var(--t-xs)/1.5 var(--font-mono); letter-spacing: .02em; color: var(--night-muted); }

@media (min-width: 880px) {
  .ab-back { font-size: clamp(10rem, 1rem + 25vw, 28rem); }
  .ab-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 8vw, 128px); align-items: start; margin-top: clamp(96px, 12vw, 200px); }
  .ab-body { padding-top: .6em; }
  .ab-pr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}