/* ============================================================ PHĪME · The Evidence Chain · page-scoped stylesheet Pass 1 of 7 — variables + minimal page base only. Title block, link blocks, expand controls, reveal mechanic, and connector-line styling are authored in subsequent passes. ============================================================ */ /* ── SS Pass palette · declared per the brief, page-scoped ── These names shadow the existing phime.css globals (--v0, --s0, --ink, --myc, --vio, --teal, --amb) but read in the brief's semantic register. Hex values are exact and non-negotiable. */ :root { /* Ground */ --ss-vellum: #F5ECD7; --ss-vellum-shadow: #EAD9BE; /* Spine */ --ss-spine: #1A1410; --ss-sepia-deep: #3D2B1F; /* Biological-illustration register */ --ss-sepia-ink: #7B5C3E; --ss-warm-mid: #A87D5A; /* Four semantic accents — DOMAIN USE ONLY, never decorative on this page */ --ss-mycelial: #4A7C59; /* ecological systems · living networks */ --ss-violet: #6B4E8A; /* canonical architecture · transformation */ --ss-teal: #2E7D8A; /* regenerative ecology · systemic recovery */ --ss-amber: #C4892A; /* clinical signal · threshold · alert */ /* Typography lock — corrected 13 May 2026 */ --serif: 'EB Garamond', Georgia, serif; --sans: Arial, Helvetica, sans-serif; } /* ── PAGE CONTAINER ── The existing phime.css already sets vellum bg + Arial body on and offsets
by 80px to clear the spine nav. The .ec-page just adds vertical breathing room and a generous lateral gutter so the inner text columns sit comfortably regardless of viewport. */ .ec-page { padding: 0 6% 6rem; color: var(--ss-spine); } /* ── A11Y · Skip-to-content link ── Visually hidden until it receives keyboard focus; appears top-left the moment a Tab brings it to the front. Lets keyboard and screen-reader users bypass the spine nav and land directly at the chain. */ .ec-skip { position: absolute; left: -9999px; top: 0; background: var(--ss-spine); color: var(--ss-vellum); padding: .8rem 1.2rem; font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; z-index: 9999; } .ec-skip:focus, .ec-skip:focus-visible { left: 1rem; top: 1rem; outline: 1px solid var(--ss-amber); outline-offset: 2px; } /* ── TITLE BLOCK ── */ .ec-title { max-width: 620px; margin: 0 auto; padding: 9rem 0 5rem; } .ec-eyebrow { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ss-sepia-ink); margin-bottom: 2.4rem; } .ec-h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.15rem, 4.6vw, 2.65rem); line-height: 1.08; letter-spacing: -.01em; color: var(--ss-spine); margin-bottom: 2.4rem; } .ec-lead { font-family: var(--sans); font-size: 1.06rem; line-height: 1.72; color: var(--ss-sepia-deep); max-width: 560px; } .ec-lead p + p { margin-top: 1.1rem; } .ec-begin { display: inline-flex; align-items: center; gap: .9rem; margin-top: 3.2rem; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ss-sepia-ink); text-decoration: none; transition: color .3s ease; } .ec-begin:hover { color: var(--ss-spine); } .ec-begin:focus-visible { outline: 1px solid var(--ss-sepia-ink); outline-offset: 2px; } .ec-begin-arrow { display: inline-block; font-family: var(--sans); font-size: .95rem; animation: ec-begin-drift 1.5s ease-in-out infinite; } @keyframes ec-begin-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ── THE CHAIN ── */ .ec-chain { max-width: 620px; margin: 0 auto; } .ec-link { padding: 2.5rem 0; } /* A thin vellum-shadow rule separates each link block from the next. The first link has no top rule (the title block sits above it). */ .ec-link + .ec-connector + .ec-link { border-top: 0.5px solid var(--ss-vellum-shadow); } .ec-link-num { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 2rem; } .ec-num-fig { color: var(--ss-sepia-ink); } .ec-num-of { color: var(--ss-warm-mid); margin-left: .9em; } .ec-link-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 3.2vw, 2rem); line-height: 1.2; letter-spacing: -.005em; color: var(--ss-spine); max-width: 580px; margin-bottom: 2.2rem; } .ec-link-body { font-family: var(--sans); font-size: 1rem; line-height: 1.7; color: var(--ss-sepia-deep); max-width: 580px; } .ec-link-body p + p { margin-top: 1.1rem; } /* ── EXPAND CONTROL ──