/* ozymandosis.com — builds on ozy.css (tokens, type, buttons) */
body { overflow-x: hidden; }
.hero { position: relative; min-height: min(92vh, 860px); display: grid; place-items: center; text-align: center; padding: 72px 16px 56px; overflow: hidden; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url(img/choir.jpg) center/cover no-repeat; opacity: .55; filter: blur(1.5px) saturate(1.15); transform: scale(1.06); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, rgba(2, 7, 10, .2), rgba(2, 7, 10, .92) 72%), linear-gradient(to bottom, transparent 70%, var(--abyss)); }
.hero .logo { font-size: clamp(2.1rem, 9vw, 5rem); margin: 0; }
.hero .lede { font-family: var(--display); font-size: clamp(1rem, 2.6vw, 1.35rem); letter-spacing: .06em; color: var(--ink-soft); margin: 14px auto 8px; max-width: 34ch; text-wrap: balance; }
.hero .verse { font-style: italic; color: var(--ink-dim); max-width: 46ch; margin: 0 auto 28px; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .cta .btn { min-width: 200px; min-height: 52px; font-size: 1.02rem; }
.platforms { margin-top: 18px; color: var(--ink-dim); font-size: .9rem; }
nav.site { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
nav.site .mark { font-family: 'Cinzel Decorative', var(--display); font-weight: 700; letter-spacing: .04em; color: var(--ink); text-decoration: none; }
nav.site .links { display: flex; gap: 6px; flex-wrap: wrap; }
nav.site .links a { color: var(--ink-soft); text-decoration: none; padding: 8px 12px; border-radius: 999px; }
nav.site .links a:hover { color: #fff; background: rgba(96, 240, 255, .08); }
section.band { max-width: 1120px; margin: 0 auto; padding: 56px 16px; }
section.band > h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); text-align: center; margin-bottom: 10px; }
section.band > p.intro { text-align: center; color: var(--ink-soft); max-width: 62ch; margin: 0 auto 32px; text-wrap: pretty; }
.cultures { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.culture { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.culture img { width: 100%; aspect-ratio: 820 / 560; object-fit: cover; display: block; background: #031015; }
.culture .tx { padding: 14px 16px 18px; }
.culture h3 { font-size: 1.1rem; margin: 0 0 4px; }
.culture .role { font-size: .85rem; color: var(--accent); margin: 0 0 8px; }
.culture p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pillar { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.pillar h3 { font-size: 1.05rem; }
.pillar p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.price { text-align: center; max-width: 560px; margin: 0 auto; }
.price .amount { font: 700 3rem/1 var(--body); margin: 8px 0; }
.price .amount small { font-size: 1rem; color: var(--ink-soft); font-weight: 500; }
.price ul { text-align: left; margin: 16px auto 24px; padding-left: 20px; color: var(--ink-soft); max-width: 420px; line-height: 1.7; }
footer.site { border-top: 1px solid var(--line); padding: 28px 16px 40px; text-align: center; color: var(--ink-dim); font-size: .9rem; }
footer.site a { color: var(--ink-soft); margin: 0 8px; }
.doc { max-width: 760px; margin: 0 auto; padding: 88px 16px 56px; line-height: 1.65; }
.doc h1 { font-size: 1.8rem; } .doc h2 { font-size: 1.2rem; margin-top: 32px; }
.doc p, .doc li { color: var(--ink-soft); } .doc strong { color: var(--ink); }
.doc .note { border: 1px solid rgba(255, 179, 71, .45); border-radius: 12px; padding: 12px 14px; color: #ffd8a0; }
@media (max-width: 560px) { nav.site .links a:not(:last-child) { display: none; } .hero .cta .btn { min-width: 0; width: 100%; } }
/* living title placements */
.hero-title { width: min(94vw, 1000px); }
nav.site { top: auto; position: absolute; }
nav.site .mark { display: inline-flex; align-items: center; gap: 8px; }
nav.site .mark canvas { width: 190px; }
nav.site .mark .beta-badge { font-size: .62rem; padding: 4px 7px 3px; }
.beta-banner + nav.site { top: auto; }
.hero { padding-top: 96px; }
.doc { padding-top: 110px; }
@media (max-width: 560px) { nav.site .mark canvas { width: 150px; } }