/* RRuna — identidade monocromática violeta aprovada. */
:root{
  --plum:#24102f;
  --deep:#100b14;
  --cream:#f3eff4;
  --paper:#ded7e2;
  --acid:#b99acd;
  --orange:#7e4fa0;
  --lilac:#b99acd;
  --pink:#5b2a75;
  --ink:#100b14;
  --line:rgba(243,239,244,.22);
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif;
}

.announcement{display:none}
.site-header{height:112px;background:linear-gradient(180deg,rgba(16,11,20,.94),rgba(36,16,47,.68),transparent);padding:0 4vw;position:absolute;top:0;left:0;right:0;border-bottom:1px solid rgba(185,154,205,.3)}
.site-header::after{content:"✦";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;display:grid;place-items:center;background:var(--plum);color:var(--lilac);font-size:.62rem}
.brand{gap:0}
.brand-logo-mask{display:block;width:218px;height:78px;background:var(--lilac);-webkit-mask:url("rruna-logo-acid.png") left center/contain no-repeat;mask:url("rruna-logo-acid.png") left center/contain no-repeat}
.loader-monogram{display:block;width:128px;height:128px;margin:auto;background:var(--lilac);-webkit-mask:url("rruna-monogram-acid.png") center/contain no-repeat;mask:url("rruna-monogram-acid.png") center/contain no-repeat;animation:rrunaPulse 1.15s ease-in-out infinite alternate}
.hero{min-height:100vh;padding-top:0}
footer .brand-logo-mask{width:190px;height:70px}
.manifesto-symbol{display:flex;align-items:center;justify-content:center;padding:0}
.manifesto-logo-mask{display:block;width:min(100%,520px);aspect-ratio:3/2;background:var(--lilac);-webkit-mask:url("rruna-monogram-acid.png") center/contain no-repeat;mask:url("rruna-monogram-acid.png") center/contain no-repeat}

/* Tipografia editorial e componentes de marca. */
.hero h1,.section h2{font-weight:500;line-height:.82}
.hero-copy>p:not(.eyebrow){font-size:1.05rem;line-height:1.75}
.eyebrow{font-weight:600;letter-spacing:.32em}
.button{font-size:.72rem;font-weight:600;letter-spacing:.16em;border:1px solid currentColor;box-shadow:none}
.button:hover{box-shadow:4px 4px 0 #5b2a75}
.nav-cta{font-weight:600;letter-spacing:.13em}

/* O grafismo nasce do fundo, sem sticker flutuante. */
.hero-copy{overflow:hidden}
.hero-copy::before,.hero-copy::after{position:absolute;z-index:-1;color:rgba(185,154,205,.12);font-family:var(--display);line-height:1;pointer-events:none}
.hero-copy::before{content:"☾";font-size:24rem;right:-5rem;top:7rem;transform:rotate(-18deg)}
.hero-copy::after{content:"✦";font-size:7rem;left:4vw;bottom:2rem}
.hero-image::before{content:"";position:absolute;z-index:2;inset:22px;border:1px solid rgba(243,239,244,.28);pointer-events:none}

/* Estampa oficial: luas, estrelas de quatro pontas e fluxos orgânicos. */
.brand-pattern{height:160px;background-color:#24102f;background-image:url("rruna-pattern.svg");background-size:420px 170px;background-position:center;background-repeat:repeat-x;overflow:hidden;border-top:1px solid rgba(185,154,205,.3);border-bottom:1px solid rgba(185,154,205,.3)}

.product-note{position:relative;overflow:hidden;background:linear-gradient(155deg,#24102f,#100b14)}
.product-note::before{content:"";position:absolute;inset:0;background:url("rruna-pattern.svg") center/420px 170px repeat;opacity:.08;pointer-events:none}
.product-note>*{position:relative;z-index:1}

.vibe-card{border-color:rgba(16,11,20,.12)}
.vibe-card.astral{background:#b99acd;color:#100b14}
.vibe-card.philosophy{background:#7e4fa0;color:#f3eff4}
.vibe-card.musical{background:#5b2a75;color:#f3eff4}
.vibe-card.psychedelic{background:#32203e;color:#f3eff4}
.ticker{background:#7e4fa0;color:#f3eff4}
.social{background:#b99acd;color:#100b14;position:relative;overflow:hidden}
.social::before{content:"✦";position:absolute;left:47%;top:2rem;color:rgba(36,16,47,.15);font:12rem/1 var(--display)}
.social-poster{background:#24102f;color:#f3eff4;box-shadow:none;transform:none;min-height:470px;border:1px solid rgba(243,239,244,.28);padding:48px;overflow:hidden}
.social-poster::before{content:"";position:absolute;inset:18px;border:1px solid rgba(185,154,205,.32)}
.social-poster::after{content:"";position:absolute;left:0;right:0;bottom:0;height:145px;background:url("rruna-pattern.svg") center bottom/360px 146px repeat-x;opacity:.18}
.social-poster p{position:relative;z-index:2;font:500 clamp(3.4rem,5.8vw,6.8rem)/.76 var(--display);letter-spacing:-.045em;text-transform:none;margin:62px 0 0}
.social-poster .poster-script{position:relative;z-index:2;display:block;font:italic 2.7rem/1 var(--display);margin-top:36px;color:#b99acd}
.social-poster .poster-moon{position:absolute;z-index:2;right:46px;top:38px;font:3rem/1 var(--display);margin:0;color:#b99acd}
.social-poster i{z-index:2;color:#b99acd;font-size:4rem;right:38px;bottom:30px}
.manifesto{position:relative;overflow:hidden}
.manifesto::before{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:url("rruna-pattern.svg") center bottom/444px 180px repeat-x;opacity:.075}
.manifesto>*{position:relative;z-index:1}
footer{border-top:1px solid rgba(185,154,205,.28)}

@keyframes rrunaPulse{to{opacity:.58;transform:scale(.96)}}
.hero-copy{padding-top:150px}
.hero h1,.section h2{line-height:1}
.section-head{grid-template-columns:1fr}
.product-info{grid-template-columns:1fr auto}
.product-info p{font-size:1rem}
.product-info a,.underlink,nav,.button{font-size:.875rem}
.product-note{justify-content:center;gap:48px}
.product-note blockquote{border:0;padding:0;margin:0;font-size:clamp(2.2rem,3.4vw,3.8rem);line-height:1.15;text-align:center}
.vibes.section{padding:64px 6vw;text-align:center}
.vibes h2{max-width:1100px;margin:auto;font-size:clamp(2.5rem,5vw,5rem);line-height:1.15;letter-spacing:-.025em}
.manifesto-copy>p{line-height:1.75;margin-top:28px}
@media(max-width:900px){.hero-copy{padding-top:100px}.product-info{grid-template-columns:1fr}.product-info a{justify-self:start}.product-note{min-height:330px;padding:36px 28px;gap:30px}.vibes.section{padding:46px 22px}.manifesto{gap:35px}.manifesto-copy h2{font-size:clamp(3rem,12vw,5rem)}}
@media(max-width:900px){
  .site-header{height:86px;padding:0 20px}
  .brand-logo-mask{width:158px;height:62px}
  nav{inset:0}
  .hero{padding-top:30px}
  .brand-pattern{height:116px}
  .brand-pattern{background-size:300px 121px}
  .social-poster{min-height:390px;padding:34px}
  .social-poster p{margin-top:58px;font-size:clamp(3.5rem,14vw,5.8rem)}
  .social-poster .poster-moon{right:32px;top:30px}
}