/* THE GODMAKER PROJECT — candlelit reliquary ground: warm near-black · bone: parchment text · ember: candle accent */ :root{ --ground:#141110; --raised:#1c1714; --bone:#eae3d3; --dim:#96897a; --ember:#c9772e; --ember-deep:#8a4a1a; --hair:rgba(234,227,211,.13); --display:'Oswald','Avenir Next Condensed','Arial Narrow',sans-serif; --body:'EB Garamond','Iowan Old Style',Palatino,Georgia,serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* no scroll-behavior:smooth — it fights Lenis; anchors scroll via JS */ body{ background:var(--ground); color:var(--bone); font-family:var(--body); font-size:1.05rem; line-height:1.6; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} a:focus-visible{outline:1px solid var(--ember);outline-offset:4px} /* faint paper grain */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); } .label{ font-family:var(--display);font-weight:400;font-size:.72rem; letter-spacing:.32em;text-transform:uppercase;color:var(--dim); } .label .tick{color:var(--ember)} section,footer{position:relative;padding:0 6vw} .rule{border:none;border-top:1px solid var(--hair);margin:0 6vw} /* ---------- reveal machinery (JS adds .js to ; no-JS stays visible) ---------- */ .js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1)} .js .rv.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} .halo,.masthead-halo{animation:none!important} html{scroll-behavior:auto} } /* ---------- crown (fixed header) ---------- */ .crown{ position:fixed;top:0;left:0;right:0;z-index:40; display:flex;justify-content:space-between;align-items:center; padding:1.1rem 6vw; background:linear-gradient(to bottom,rgba(20,17,16,.92),rgba(20,17,16,0)); pointer-events:none; } .crown a{pointer-events:auto;text-decoration:none} .crown-mark{ font-family:var(--display);font-weight:600;text-transform:uppercase; letter-spacing:.18em;font-size:.95rem; } .crown-mark .dot,.mark .dot{color:var(--ember)} .crown-nav{display:flex;gap:2.2rem} .crown-nav a{ font-family:var(--display);font-weight:400;font-size:.7rem; letter-spacing:.28em;text-transform:uppercase;color:var(--dim); transition:color .3s; } .crown-nav a:hover{color:var(--ember)} /* ---------- I. masthead ---------- */ .masthead{ min-height:96vh;display:flex;flex-direction:column;justify-content:center; gap:2.4rem;padding-top:10vh; } .masthead-halo{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(80vw,760px);aspect-ratio:1;border-radius:50%;z-index:-1; background:radial-gradient(circle,rgba(201,119,46,.10) 0%,rgba(201,119,46,.03) 45%,transparent 70%); animation:breathe 7s ease-in-out infinite; } .masthead h1{ font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(3.4rem,12.5vw,11rem);line-height:.96;letter-spacing:.02em; text-wrap:balance; } .masthead h1 .the{ display:block;font-size:.16em;letter-spacing:.9em;font-weight:400;color:var(--dim); margin-bottom:1.1em;margin-left:.2em; } .masthead h1 .word{display:block} .js .masthead h1 .word{animation:track 1.6s cubic-bezier(.19,1,.22,1) both} .js .masthead h1 .word:nth-child(3){animation-delay:.15s} .word--stroke{color:transparent;-webkit-text-stroke:1px var(--bone)} @keyframes track{from{letter-spacing:.18em;opacity:0}to{letter-spacing:.02em;opacity:1}} @media (prefers-reduced-motion:reduce){.js .masthead h1 .word{animation:none}} .masthead .thesis{ max-width:36ch;font-size:clamp(1.15rem,1.8vw,1.5rem);color:var(--dim); font-style:italic;text-wrap:balance; } .masthead .thesis em{color:var(--ember);font-style:italic} .masthead .down{ position:absolute;bottom:5vh;left:6vw;display:flex;align-items:center;gap:1rem; } .masthead .down .line{width:56px;height:1px;background:var(--ember);display:inline-block} /* ---------- II. premise ---------- */ .premise{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:6vw;padding-top:16vh;padding-bottom:16vh;align-items:start; } .premise-main{display:flex;flex-direction:column;gap:1.6rem} .premise .big{ font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.4;font-weight:400; text-wrap:balance; } .premise .big em{color:var(--ember)} .premise-aside{display:flex;flex-direction:column} .premise-aside .label{margin-bottom:1.4rem} .virtue{ display:flex;justify-content:space-between;align-items:baseline;gap:1rem; padding:.55rem 0;border-bottom:1px solid var(--hair); font-family:var(--display);font-weight:400;font-size:.85rem;letter-spacing:.08em; text-transform:uppercase; } .virtue .n{color:var(--ember-deep);font-size:.7rem;letter-spacing:.15em} /* ---------- III. pantheon index ---------- */ .pantheon{padding-top:12vh;padding-bottom:12vh} .pantheon > .label{display:block;margin-bottom:3rem} .god-row{ display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;align-items:baseline;gap:2vw; padding:1.1rem 0;border-bottom:1px solid var(--hair); text-decoration:none; transition:padding-left .45s cubic-bezier(.19,1,.22,1),background .45s; } .god-row:first-of-type{border-top:1px solid var(--hair)} .god-row .num{ font-family:var(--display);font-size:.7rem;letter-spacing:.2em; color:var(--ember-deep); } .god-row .name{ font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(1.7rem,4.6vw,3.6rem);line-height:1;letter-spacing:.04em; transition:color .45s; } .god-row .epi{ font-family:var(--display);font-weight:400;font-size:.75rem;letter-spacing:.3em; text-transform:uppercase;color:var(--dim);transition:color .45s;white-space:nowrap; } .god-row:hover,.god-row:focus-visible{ padding-left:1.2vw; background:linear-gradient(90deg,rgba(201,119,46,.06),transparent 60%); } .god-row:hover .name,.god-row:focus-visible .name{color:var(--ember)} .god-row:hover .epi,.god-row:focus-visible .epi{color:var(--bone)} /* ---------- IV. shrines ---------- */ .shrine{padding-top:6vh;padding-bottom:6vh} .shrine-stage{ position:relative;min-height:96vh; display:flex;align-items:center;justify-content:center; } .halo{ position:absolute;width:min(72vw,620px);aspect-ratio:1;border-radius:50%;z-index:0; background:radial-gradient(circle,rgba(201,119,46,.15) 0%,rgba(201,119,46,.05) 45%,transparent 70%); animation:breathe 6s ease-in-out infinite; } .halo--dark{ background:radial-gradient(circle,rgba(120,90,160,.12) 0%,rgba(120,90,160,.04) 45%,transparent 70%); } @keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}} .shrine-name{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; z-index:1;pointer-events:none; } .shrine-name span{ font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(3.2rem,14.5vw,13rem);line-height:.9;letter-spacing:.03em; color:var(--bone);opacity:.9;white-space:nowrap; } /* no filter on the doll — it must stay a plain compositor layer for smooth parallax; depth comes from the halo glow + plinth shadow instead */ .doll{ position:relative;z-index:2;height:min(72vh,620px);width:auto; will-change:transform; } .doll--wide{ height:auto;width:min(80vw,680px); } .plinth{ position:absolute;bottom:8%;z-index:1;width:min(50vw,400px);height:30px;border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%); } .shrine-meta{ position:absolute;z-index:3;left:0;bottom:2%; display:flex;flex-direction:column;gap:.8rem;max-width:30ch; } .shrine--flip .shrine-meta{left:auto;right:0;text-align:right;align-items:flex-end} .shrine-meta .num{ font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.4em; text-transform:uppercase;color:var(--ember); } .shrine-meta .domain{ font-size:clamp(1.15rem,1.9vw,1.5rem);font-style:italic;line-height:1.35; } .shrine-meta .origin{font-size:.9rem;color:var(--dim)} .legend-link{ font-family:var(--display);font-weight:500;font-size:.7rem;letter-spacing:.28em; text-transform:uppercase;color:var(--ember);text-decoration:none; padding-bottom:.2rem;border-bottom:1px solid var(--ember-deep); transition:color .3s,border-color .3s;width:max-content; } .legend-link:hover{color:var(--bone);border-color:var(--bone)} .scripture{ position:absolute;z-index:3;right:0;top:8%;max-width:24ch; display:flex;flex-direction:column;gap:.8rem;align-items:flex-end;text-align:right; } .shrine--flip .scripture{right:auto;left:0;align-items:flex-start;text-align:left} .scripture blockquote{ font-size:clamp(1.15rem,1.8vw,1.5rem);font-style:italic;line-height:1.5; } .scripture blockquote::before{content:"\201C";color:var(--ember)} .scripture blockquote::after{content:"\201D";color:var(--ember)} .scripture cite{ font-family:var(--display);font-style:normal;font-size:.68rem; letter-spacing:.28em;text-transform:uppercase;color:var(--dim); } /* wide shrine (Estremoz): the bear is horizontal and would swallow a centered name — ride the name high so it clears her back */ @media (min-width:821px){ .shrine--wide .shrine-name{align-items:flex-start;padding-top:10vh} .shrine--wide .doll--wide{margin-top:10vh} } /* ---------- V. the path ---------- */ .path{padding-top:14vh;padding-bottom:14vh;display:flex;flex-direction:column;gap:3.5rem} .path-lead{ font-size:clamp(1.4rem,2.6vw,2.1rem);max-width:26ch;line-height:1.4;text-wrap:balance; } .path-steps{ list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2vw; } .path-steps li{ display:flex;flex-direction:column;gap:.8rem; background:var(--raised);border:1px solid var(--hair);padding:2rem 1.6rem; } .step-n{ font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--ember); letter-spacing:.2em; } .path-steps h3{ font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:1.15rem;letter-spacing:.05em;line-height:1.25;text-wrap:balance; } .path-steps p{font-size:.95rem;color:var(--dim)} .path-invite{display:flex;flex-direction:column;gap:1rem;max-width:44ch} .path-invite p{ font-size:clamp(1.3rem,2.2vw,1.8rem);font-style:italic;line-height:1.5; } /* ---------- VI. the book ---------- */ .book{ padding-top:12vh;padding-bottom:12vh; display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5vw;align-items:start; } .book-card{ background:var(--raised);border:1px solid var(--hair);padding:2.6rem 2.2rem; display:flex;flex-direction:column;gap:1.1rem; } .book-card h2{ font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:1.9rem;letter-spacing:.05em; } .book-card p{color:var(--dim)} .book-card .provenance{font-size:.9rem;font-style:italic} .book-link{ font-family:var(--display);font-weight:500;font-size:.75rem;letter-spacing:.28em; text-transform:uppercase;text-decoration:none;color:var(--ground); background:var(--ember);padding:.85rem 1.6rem;width:max-content;margin-top:.6rem; transition:background .3s; } .book-link:hover{background:var(--bone)} .archive{display:flex;flex-direction:column;gap:1.6rem} .archive-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vw} .archive-strip figure{display:flex;flex-direction:column;gap:.7rem} .archive-strip img{ width:100%;border:1px solid var(--hair); filter:sepia(.25) contrast(1.02) brightness(.92); } .archive-strip figcaption{ font-family:var(--display);font-size:.68rem;letter-spacing:.24em; text-transform:uppercase;color:var(--dim); } /* ---------- colophon ---------- */ .colophon{ padding-top:12vh;padding-bottom:10vh;display:flex;flex-direction:column; align-items:center;gap:1.4rem;text-align:center; } .colophon .mark{ font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:.12em; } .colophon p{color:var(--dim);font-style:italic} .colophon a{color:var(--bone);text-decoration-color:var(--ember-deep)} .colophon a:hover{color:var(--ember)} /* ---------- responsive ---------- */ @media (max-width:820px){ .crown-nav{gap:1.4rem} .crown-nav a:not(:last-child){display:none} .premise{grid-template-columns:1fr;gap:3.5rem} .shrine-stage{flex-direction:column;justify-content:flex-start;min-height:0;gap:1.5rem;padding-top:4vh} .shrine-name{position:relative;inset:auto;order:1} .shrine-name span{font-size:clamp(2.6rem,11vw,4.5rem);white-space:normal;text-align:center} .doll{order:2;height:min(56vh,460px)} .doll--wide{height:auto;width:88vw} .plinth{display:none} .shrine-meta,.scripture{position:static;max-width:none;order:3} .shrine--flip .shrine-meta,.shrine--flip .scripture{text-align:left;align-items:flex-start} .scripture{order:4;text-align:left;align-items:flex-start} .god-row{grid-template-columns:2.2rem minmax(0,1fr)} .god-row .epi{grid-column:2;justify-self:start;white-space:normal} .path-steps{grid-template-columns:1fr} .book{grid-template-columns:1fr;gap:4rem} }