/* Philosophy page: every section is presented differently. One type style, kept large and short. Tokens only. */

/* 0. Hero: one statement, set large */
.ph-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; background: var(--color-bg); overflow: hidden; }
.ph-hero__inner { width: 100%; display: grid; gap: var(--space-8); padding-top: 8rem; padding-bottom: 7rem; }
.ph-hero__title { font: var(--t-statement-xl); letter-spacing: var(--ls-statement-xl); max-width: 14ch; }
.ph-w { display: inline-block; opacity: 0; transform: translateY(40%); animation: ph-rise .9s var(--ease-expo) forwards; animation-delay: calc(.15s + var(--i) * .08s); }
.ph-mark { display: inline-block; position: relative; z-index: 0; padding: 0 .08em; color: var(--color-text); animation: ph-ink .3s ease 1.35s forwards; }
.ph-mark::before { content: ""; position: absolute; inset: .04em 0 .02em; background: var(--color-accent); z-index: -1; transform: scaleX(0); transform-origin: left; animation: ph-wipe .8s var(--ease-gleasing) 1.05s forwards; }
.ph-hero__lede { font: var(--t-copy-20); color: var(--color-text-body); max-width: 28rem; opacity: 0; animation: ph-fade .9s ease 1.4s forwards; }
@keyframes ph-rise { to { opacity: 1; transform: none; } }
@keyframes ph-wipe { to { transform: scaleX(1); } }
@keyframes ph-fade { to { opacity: 1; } }
@keyframes ph-ink { to { color: var(--color-on-accent); } }
.ph-scroll { position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font: var(--t-label-12-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.ph-scroll i { position: relative; display: block; width: 1px; height: var(--space-10); background: var(--border-1); overflow: hidden; }
.ph-scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 50%; background: currentColor; animation: ph-scroll 1.8s var(--ease-gleasing) infinite; }
@keyframes ph-scroll { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }
@media (min-width: 64em) { .ph-hero__inner { grid-template-columns: 1fr 1fr; align-items: end; } .ph-hero__label, .ph-hero__title { grid-column: 1 / -1; } .ph-hero__lede { grid-column: 2; justify-self: end; max-width: 24rem; } }
@media (prefers-reduced-motion: reduce) { .ph-w, .ph-hero__lede { opacity: 1; transform: none; animation: none; } .ph-mark::before { transform: none; animation: none; } .ph-mark { color: var(--color-on-accent); animation: none; } .ph-scroll i::after { animation: none; } }

/* 1. The belief: sticky passage, words light up with scroll */
.ph-scrub { height: 230vh; position: relative; }
.ph-scrub__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.ph-scrub__inner { display: grid; gap: var(--space-8); }
.ph-scrub__text { font: var(--t-heading-72); letter-spacing: var(--ls-heading-72); max-width: 26ch; }
.ph-scrub__text .w { opacity: .16; transition: opacity .25s ease; }
.ph-scrub__text .w.on { opacity: 1; }

/* 2. Why we exist: a field of ideas that fill in as you scroll */
.ph-odds { height: 260vh; background: var(--surface-inverse); color: var(--color-text-inverse); position: relative; }
.ph-odds__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.ph-odds__inner { display: grid; gap: var(--space-10); align-items: center; }
.ph-odds__copy { display: grid; gap: var(--space-5); }
.ph-odds__title { font: var(--t-heading-72); letter-spacing: var(--ls-heading-72); max-width: 12ch; }
.ph-odds__line { font: var(--t-copy-20); color: var(--color-text-inverse-secondary); }
.ph-odds__field { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.4rem, 1vw, .8rem); }
.ph-odds__field i { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--border-inverse); transition: background var(--duration-base) ease, border-color var(--duration-base) ease, transform var(--duration-base) var(--ease-expo); }
.ph-odds__field i.on { background: var(--color-bg); border-color: var(--color-bg); transform: scale(1.08); }
.ph-odds__field i.hit { background: var(--color-accent); border-color: var(--color-accent); }
@media (min-width: 64em) { .ph-odds__inner { grid-template-columns: 1fr 1fr; gap: var(--space-24); } }

/* 3. Five beliefs: full-screen cards that stack */
.ph-stack { position: relative; }
.ph-card { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 1fr; padding: var(--space-24) var(--ph-pad, var(--space-6)) var(--space-12); box-shadow: 0 -1px 0 var(--border-1); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ph-card--ink { background: var(--surface-inverse); color: var(--color-text-inverse); }
.ph-card--paper { background: var(--color-bg); color: var(--color-text); }
.ph-card--red { background: var(--color-accent); color: var(--color-on-accent); }
.ph-card--card { background: var(--surface-1); color: var(--color-text); }
.ph-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.ph-card__count { font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; opacity: .7; }
.ph-card__label { opacity: 1; }
.ph-card__body { align-self: center; display: grid; gap: var(--space-6); max-width: 60rem; }
.ph-card__title { font: var(--t-statement-lg); letter-spacing: var(--ls-statement-lg); }
.ph-card__line { font: var(--t-copy-20); max-width: 34rem; opacity: .85; }
@media (min-width: 64em) { .ph-card { --ph-pad: var(--space-10); padding-top: 7rem; } }
@media (min-width: 90em) { .ph-card { --ph-pad: var(--space-24); } }

/* 4. Image with a line over it (shared with the Method page) */
.ph-image { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--surface-inverse); color: var(--color-text-inverse); display: flex; align-items: flex-end; }
.ph-image__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; transform: scale(1.2); }
.ph-image__shade { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--surface-inverse) 75%, transparent), transparent 60%); }
.ph-image__text { position: relative; display: grid; gap: var(--space-6); padding-bottom: var(--space-16); justify-items: start; }
.ph-image__quote { font: var(--t-statement-lg); letter-spacing: var(--ls-statement-lg); max-width: 14ch; }
.ph-image__link { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; font: var(--t-button-16); border-bottom: 1px solid color-mix(in srgb, currentColor 50%, transparent); padding-bottom: var(--space-1); }
.ph-image__link svg { width: 1rem; height: 1rem; }

/* 5. Where next: large rows */
.ph-rows { padding-top: var(--space-24); padding-bottom: var(--space-24); display: grid; }
.ph-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2) var(--space-4); padding: 2.25rem 0; border-top: 1px solid var(--border-1); color: inherit; text-decoration: none; transition: padding var(--duration-slow) var(--ease-expo); }
.ph-row:last-child { border-bottom: 1px solid var(--border-1); }
.ph-row__label { grid-column: 1 / -1; font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.ph-row__title { font: var(--t-statement-lg); letter-spacing: var(--ls-statement-lg); }
.ph-row__arrow { width: clamp(1.75rem, 4vw, 3rem); height: clamp(1.75rem, 4vw, 3rem); transition: transform var(--duration-slow) var(--ease-expo); }
.ph-row__arrow svg { width: 100%; height: 100%; }
.ph-row:hover { padding-left: var(--space-6); }
.ph-row:hover .ph-row__arrow { transform: translateX(-1rem); }

@media (prefers-reduced-motion: reduce) {
    .ph-scrub, .ph-odds { height: auto; }
    .ph-scrub__pin, .ph-odds__pin { position: static; height: auto; padding: var(--space-24) 0; }
    .ph-scrub__text .w { opacity: 1; }
    .ph-image__img { transform: none; }
}