:root { --obsidian:#080a0b; --bone:#eeeae1; --ivory:#e6ded0; --gold:#a7873f; --bronze:#68593d; --ash:#86837d; --serif: Georgia, 'Times New Roman', serif; --sans: Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
html { background:var(--obsidian); scroll-behavior:smooth; }
body { margin:0; background:var(--obsidian); color:var(--bone); font-family:var(--sans); font-size:17.5px; line-height:1.72; overflow-x:hidden; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; top:0; z-index:10; background:var(--bone); color:var(--obsidian); padding:.6rem 1rem; }
.skip-link:focus { left:1rem; top:1rem; }
.section { width:min(100% - 48px, 680px); margin:0 auto; padding:7.25rem 0; }
.expanded { width:min(100% - 72px, 1080px); }
.reading-column { width:min(100% - 48px, 680px); margin-left:auto; margin-right:auto; }
.hero { min-height:96svh; display:grid; align-content:center; justify-items:center; gap:3rem; padding:6rem 24px 5rem; }
.hero-lockup { width:auto; }
.brand-lockup { display:block; width:auto; height:auto; max-width:100%; object-fit:contain; }
.hero-brand-lockup { width:clamp(180px, 18vw, 280px); height:auto; aspect-ratio:auto; margin-inline:auto; }
.hero-copy { text-align:center; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; letter-spacing:-.025em; line-height:1.08; }
h1 { font-size:clamp(2.55rem, 5.45vw, 4.95rem); margin-bottom:1.55rem; }
h2 { font-size:clamp(2.05rem, 4.3vw, 3.8rem); margin-bottom:1.65rem; }
h3 { font-size:clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom:.4rem; }
p { color:var(--bone); max-width:65ch; }
.hero-copy > p { font-size:clamp(1.05rem, 1.8vw, 1.25rem); color:var(--ash); margin:0 auto 2rem; }
.eyebrow,.subtitle,.contrast-label { color:var(--gold); font-size:.7rem; letter-spacing:.17em; line-height:1.4; font-weight:700; text-transform:uppercase; }
.subtitle { color:var(--ash); margin-top:-1.15rem; }
.cta { display:inline-flex; border:1px solid var(--gold); padding:.85rem 1.15rem; color:var(--bone); font-size:.72rem; font-weight:700; letter-spacing:.13em; line-height:1.2; text-decoration:none; text-transform:uppercase; transition:background-color .2s,color .2s,border-color .2s; }
.cta:hover { background:var(--gold); color:var(--obsidian); }
.cta:active { background:var(--bronze); border-color:var(--bone); color:var(--bone); }
.cta:focus-visible, a:focus-visible { outline:2px solid var(--bone); outline-offset:5px; }
.mirror-split { display:grid; grid-template-columns:1fr 1fr; gap:14vw; align-items:center; }
.mirror-phrase { font-family:var(--serif); font-size:clamp(1.85rem, 4vw, 3.75rem); line-height:1.07; letter-spacing:-.03em; margin:0; }
.mirror-phrase:last-child { text-align:right; }
.plain-list { list-style:none; margin:2.2rem 0 0; padding:0; color:var(--ash); }
.plain-list li { border-top:1px solid color-mix(in srgb, var(--bronze), transparent 35%); padding:.6rem 0; }
.persona .eyebrow { color:var(--ash); font-size:.64rem; }
.persona h2 { font-size:clamp(2.18rem, 4.55vw, 4.05rem); }
.persona > p:not(.eyebrow) { font-size:1.05em; }
.question-break { width:min(100% - 48px, 950px); min-height:76svh; display:grid; align-content:center; padding:10.5rem 0; text-align:center; }
.question-break h2 { margin:0 auto; max-width:20ch; }
.contrast-grid,.qualification { display:grid; grid-template-columns:1fr 1fr; gap:clamp(4rem, 12vw, 13rem); }
.contrast-grid > div { border-top:1px solid var(--bronze); padding-top:1rem; }
.contrast-grid > div:last-child { text-align:right; }
.contrast-grid > div:last-child p { margin-left:auto; }
.ceiling,.investment { min-height:80svh; display:grid; justify-items:center; align-content:center; text-align:center; padding:7rem 24px; }
.ceiling { min-height:70svh; padding:5rem 24px; }
.ceiling-sequence { display:grid; gap:.12rem; color:var(--ash); font-size:.61rem; letter-spacing:.16em; }
.ceiling-sequence i { color:var(--gold); font-style:normal; }
.ceiling h2 { margin-top:3.8rem; font-size:clamp(2.45rem, 5.1vw, 4.55rem); text-transform:uppercase; }
.thesis { min-height:82svh; display:grid; place-items:center; padding:5rem 24px; text-align:center; }
.thesis h2 { max-width:18ch; margin:0; text-transform:uppercase; }
.thesis span { color:var(--gold); }
.eep { padding-top:9rem; padding-bottom:9rem; }
.section-heading { margin-bottom:4.5rem; }
.eep .mirror-split { gap:clamp(8.5rem, 20.25vw, 15rem); }
.movement-list,.acts-list,.outcome-list,.codex-list { list-style:none; padding:0; margin:2.4rem 0 0; }
.movement-list li { padding:2.45rem 0; border-top:1px solid var(--bronze); }
.movement-list p { color:var(--bone); margin:0; }
.era { min-height:78svh; display:grid; place-items:center; position:relative; overflow:hidden; padding:5rem 24px; text-align:center; }
.era-portal { position:absolute; width:min(460px, 70vw); height:auto; opacity:.045; pointer-events:none; }
.era-content { position:relative; }
.era h2 { color:var(--gold); font-size:clamp(5rem, 15vw, 11rem); margin:0; }
.era p { font-size:.75rem; letter-spacing:.2em; margin:0 0 1.6rem; }
.era span { color:var(--ash); font-size:.9rem; }
.acts-list { counter-reset:acts; }
.acts-list li { display:grid; grid-template-columns:3rem 1fr; gap:1rem; align-items:baseline; padding:1.4rem 0; border-top:1px solid var(--bronze); }
.acts-list span { color:var(--gold); font:1.1rem var(--serif); }
.acts-list h3,.acts-list p { margin:0; }
.acts-list p { color:var(--bone); }
.evidence { width:min(100% - 48px, 880px); min-height:min(62svh, 680px); display:grid; align-content:center; justify-items:center; margin:8rem auto; padding:clamp(4.8rem, 8vw, 8rem) clamp(2rem, 6vw, 6rem); position:relative; background:var(--ivory); border:1px solid var(--gold); color:var(--obsidian); text-align:center; }
.evidence::before { content:''; position:absolute; inset:12px; border:1px solid var(--bronze); pointer-events:none; }
.evidence h2 { max-width:17ch; position:relative; font-size:clamp(2.5rem, 6vw, 5rem); margin-bottom:1.6rem; text-transform:uppercase; }
.evidence p { position:relative; color:var(--obsidian); margin-top:2.35rem; }
.not-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:2.2rem 0; border-top:1px solid var(--bronze); }
.not-grid span { padding:1rem .35rem; border-bottom:1px solid var(--bronze); color:rgba(238,234,225,.76); font-size:.65rem; letter-spacing:.08em; }
.qualification { padding-top:7rem; padding-bottom:7rem; }
.qualification p:not(.eyebrow) { font-family:var(--serif); font-size:1.45rem; line-height:1.25; }
.qualification > div:last-child { text-align:right; }
.qualification > div:last-child p { margin-left:auto; }
.outcome-list { counter-reset:outcome; }
.outcome-list li { counter-increment:outcome; border-top:1px solid var(--bronze); padding:1.2rem 0 1.2rem 3rem; position:relative; }
.outcome-list li::before { content:'0' counter(outcome); position:absolute; left:0; color:var(--gold); font-size:.7rem; letter-spacing:.1em; }
.outcomes h2 { font-size:clamp(2.2rem, 4.7vw, 4.15rem); }
.magnus h2 { font-size:clamp(2.67rem, 5.42vw, 4.9rem); }
.magnus .subtitle { color:var(--bone); font-size:.8rem; letter-spacing:.18em; }
.seal-signature { margin-top:2.9rem; display:grid; justify-items:start; gap:.8rem; }
.seal { width:108px; height:108px; display:block; background:url('assets/brand/mysf-seal-old-gold.png') center / contain no-repeat; }
.seal-signature p { color:var(--bone); font-size:.68rem; letter-spacing:.15em; }
.continuity-list { margin-top:2.2rem; }
.continuity-list p { margin:0; border-top:1px solid var(--bronze); padding:1.05rem 0; font:1.62rem/1.3 var(--serif); }
.continuity-list span { color:var(--ash); font: .78rem var(--sans); }
.codex-list li { padding:.8rem 0; border-top:1px solid var(--bronze); font:clamp(1.2rem,2vw,1.6rem)/1.3 var(--serif); }
.codex-list span { color:var(--gold); margin-right:1rem; }
.format-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:1.85rem; border-top:1px solid var(--bronze); }
.format-grid > * { padding:.8rem 0; border-bottom:1px solid var(--bronze); font-size:.68rem; letter-spacing:.1em; }
.format-grid > *:nth-child(even) { text-align:right; }
.format-grid strong { color:var(--gold); font-size:1rem; }
.investment h2 { color:var(--gold); font-size:clamp(4rem,10vw,7.5rem); margin:.8rem 0 2.8rem; }
.investment p { margin:.15rem 0; }
.final-question { min-height:80svh; padding-top:10.5rem; padding-bottom:10.5rem; }
.final-question p { color:var(--ash); margin:4rem auto 0; max-width:32ch; }
.final-cta { padding-top:12rem; padding-bottom:12rem; }
.final-cta > p:not(.eyebrow) { color:var(--ash); font-size:1.15rem; margin-bottom:2.1rem; }
.final-cta .cta { border-color:var(--bone); padding:1.05rem 1.55rem; }
.post-cta { min-height:52svh; display:grid; justify-items:center; align-items:center; align-content:center; gap:1.5rem; padding:4rem 24px; }
.footer-brand-lockup { width:clamp(90px, 8vw, 130px); height:auto; aspect-ratio:auto; margin-inline:auto; align-self:center; opacity:.75; }
.post-cta a { color:var(--ash); font-size:.7rem; letter-spacing:.13em; text-decoration:none; }
.footer { width:min(100% - 48px, 1180px); margin:auto; padding:2.3rem 0; border-top:1px solid var(--bronze); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
.footer a { color:var(--ash); font-size:.68rem; letter-spacing:.08em; text-decoration:none; }
.footer a:hover { color:var(--bone); }
.footer-legal { width:min(100% - 48px, 1180px); max-width:none; margin:0 auto; padding:1.15rem 0 2.3rem; border-top:1px solid var(--bronze); color:var(--ash); font-size:.75rem; letter-spacing:.04em; text-align:center; }
.js .reveal { opacity:0; transform:translateY(12px); transition:opacity .7s ease,transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:650px) { body { font-size:17px; } .section { padding:5.25rem 0; } .expanded { width:min(100% - 48px,1080px); } .hero { min-height:90svh; gap:2.6rem; } .mirror-split,.contrast-grid,.qualification { grid-template-columns:1fr; gap:4.5rem; } .eep { padding-top:7.5rem; padding-bottom:7.5rem; } .eep .mirror-split { gap:5.75rem; } .mirror-phrase:last-child,.contrast-grid > div:last-child,.qualification > div:last-child { text-align:left; } .contrast-grid > div:last-child p,.qualification > div:last-child p { margin-left:0; } .question-break { min-height:71svh; padding-top:8rem; padding-bottom:8rem; } .final-question { min-height:78svh; padding-top:8rem; padding-bottom:8rem; } .evidence { width:calc(100% - 56px); min-height:62svh; margin:5.25rem auto; padding:4.25rem 1.4rem; } .evidence::before { inset:9px; } .seal { width:96px; height:96px; } .not-grid { grid-template-columns:1fr 1fr; } .format-grid { grid-template-columns:1fr; } .format-grid > *:nth-child(even) { text-align:left; } .final-cta .cta { width:100%; justify-content:center; min-height:52px; } .footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }