/* ==========================================================================
   Orcheum Philosophy — page styles.

   The landing sheet (landing/landing.css) is the design system: tokens, type
   scale, masks, reveals, pauses, buttons, header and footer all come from it
   unchanged. This file adds only what a page of argument needs that a page of
   product does not — a measure narrow enough to read, a numbered tenet, and a
   list of refusals.

   Nothing here restates a landing rule, and nothing here is used by any other
   page.
   ========================================================================== */

/* ── Overture ───────────────────────────────────────────────────────────────
   The Studios overture proportions, held to the same opening rhythm so the two
   secondary pages feel like one house. */
.ph-overture {
  position: relative;
  min-height: min(70vh, 700px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 9vh, 104px) 0 clamp(64px, 10vh, 120px);
  overflow: clip;
  text-align: center;
}
.ph-overture__inner {
  width: min(var(--lp-max), calc(100% - 48px));
  margin: 0 auto;
}
.ph-overture__title {
  margin: 0;
  font-family: var(--lp-serif);
  font-weight: 700;
  font-size: clamp(52px, 9.4vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.042em;
  color: var(--lp-ink);
}
.ph-overture__held {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  font-family: var(--lp-serif);
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
}
.ph-overture__held .lp-mask { display: block; }
.ph-dim { color: var(--lp-ink-ghost); }

.ph-overture__support {
  margin: clamp(24px, 3vw, 36px) auto 0;
  max-width: 28rem;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lp-ink-mute);
}

/* ── Reading measure ────────────────────────────────────────────────────────
   Argument is read, not scanned. A single column at a comfortable measure,
   centred in the shell — the landing's grid is for product, not for prose. */
.ph-column {
  max-width: 42rem;
}
.ph-body {
  margin: 18px 0 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: var(--lp-ink-soft);
}
.ph-h2--center { text-align: center; }

/* ── The six tenets ─────────────────────────────────────────────────────────
   Two columns of numbered statements. The numeral and its rule echo the
   Studios room headings, which is where a reader last saw a Roman numeral. */
.ph-tenets {
  list-style: none;
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 64px) clamp(40px, 6vw, 80px);
}
.ph-tenet { margin: 0; }
.ph-tenet__rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}
.ph-tenet__rule i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(42, 29, 22, 0.22), transparent);
}
.ph-numeral {
  font-family: var(--lp-serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--lp-orange);
}
.ph-tenet__name {
  margin: 0 0 10px;
  font-family: var(--lp-serif);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--lp-ink);
}
.ph-tenet__body {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--lp-ink-soft);
}

/* ── The refusals ───────────────────────────────────────────────────────────
   Set as a list of struck-through statements: the page says what it will not
   build, and the type says it too. */
.ph-refusals {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(24px, 4vw, 48px);
}
.ph-refusals li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.45;
  color: var(--lp-ink-struck);
  border-bottom: 1px solid rgba(42, 29, 22, 0.08);
}
/* The rule through the words, drawn in the brand's own struck orange — the
   same gesture the landing uses across “ARTIFICIAL”. */
.ph-refusals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--lp-orange-soft);
}

/* ── Finale ─────────────────────────────────────────────────────────────────
   The Studios finale proportions. The mark arrives only once the line has
   settled; `philosophy.js` adds `.is-lit`. */
.ph-final {
  padding: clamp(112px, 18vh, 200px) 0 clamp(96px, 15vh, 168px);
  text-align: center;
}
.ph-final__title {
  margin: 0;
  font-family: var(--lp-serif);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--lp-ink);
}
.ph-final__title .lp-mask { display: block; }
.ph-final__title .lp-sun {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 900ms var(--lp-ease), transform 900ms var(--lp-ease);
}
.ph-final__title.is-lit .lp-sun {
  opacity: 1;
  transform: none;
}
.ph-final__cta { margin-top: clamp(32px, 4vw, 48px); }

/* The current page reads as current, matching how Studios marks its own tab. */
.ph-nav-current { color: var(--lp-ink); }

@media (prefers-reduced-motion: reduce) {
  .ph-final__title .lp-sun { transition: none; }
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ph-tenets { grid-template-columns: 1fr; }
  .ph-refusals { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ph-overture { min-height: 0; }
  .ph-overture__title { font-size: clamp(44px, 15vw, 72px); }
}