/* Selene Studio · Sobre (/sobre). Page styles on top of /site/site.css, drawn in Doop
   (frames "Sobre · …" at x 26060 and "Sobre celular · …" at x 27580): the S of the Selene, the Asterallis
   with the endorsement (desktop only) and the five rules that guide the Selene. */

/* The current page lights up in the footer (the FAQ page does the same; not in the kit yet). */
.rd-col a[aria-current="page"]{color:var(--signal)}

/* top: the S, the title and one sentence about the name, on the paper with a soft light and the dots */
:root{--sb-luz:radial-gradient(40% 420px at 50% 120px,#fff 0%,rgb(255 255 255 / 0) 100%)}
html.dark{--sb-luz:radial-gradient(40% 420px at 50% 120px,rgb(255 255 255 / .06) 0%,rgb(255 255 255 / 0) 100%)}
.sb-topo{position:relative;isolation:isolate;padding:128px 0 72px;text-align:center}
.sb-topo::before{content:"";position:absolute;z-index:-2;left:0;right:0;top:0;height:560px;background:var(--sb-luz);pointer-events:none}
.sb-pontos{position:absolute;z-index:-1;left:0;right:0;top:0;height:560px;background:radial-gradient(var(--dots) 1px,transparent 1.4px) 0 0/18px 18px;-webkit-mask-image:radial-gradient(52% 60% at 50% 40%,transparent 40%,#000 100%),linear-gradient(#000 70%,transparent);mask-image:radial-gradient(52% 60% at 50% 40%,transparent 40%,#000 100%),linear-gradient(#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;pointer-events:none}
.sb-s{height:91px;display:flex;justify-content:center}
.sb-s svg{height:91px;width:auto}
.anim .sb-s{visibility:hidden}
.sb-topo h1{margin-top:20px;font:500 56px/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.sb-lead{margin:20px auto 0;max-width:660px;font-size:20px;line-height:1.5;color:var(--muted-fg);text-wrap:balance}

/* made by the Asterallis: the endorsed signature (at least 519 px wide, so never shrunk) and the story */
.sb-ast .wrap{display:grid;grid-template-columns:640px 1fr;gap:72px;align-items:center}
.sb-selo{height:400px;border-radius:24px;background:radial-gradient(46% 52% at 50% 50%,var(--glow) 0%,rgb(37 88 232 / 0) 100%),radial-gradient(var(--dots) 1px,transparent 1.4px) 0 0/18px 18px,var(--card);box-shadow:var(--window);display:grid;place-items:center}
.sb-selo img{width:540px;height:auto}
.sb-txt .lead{font-size:18px}
.sb-txt p+p{margin-top:18px;font-size:17px;line-height:1.6;color:var(--muted-fg);text-wrap:pretty}
.sb-ext{margin-top:24px!important}
.sb-ext a{display:inline-flex;align-items:center;gap:6px;font:500 16px/1 var(--sans);color:var(--signal);text-decoration:none}
.sb-ext a:hover{text-decoration:underline;text-underline-offset:4px}
.sb-ext svg{width:16px;height:16px;flex:none}

/* the five rules */
.sb-reg .wrap{display:grid;grid-template-columns:400px 1fr;gap:80px;align-items:start}
.sb-reg-cab .lead{margin-top:16px}
.sb-lista{list-style:none;padding:0;border-top:1px solid var(--border)}
.sb-lista li{display:grid;grid-template-columns:36px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--border)}
.sb-lista h3{font:600 18px/1.35 var(--sans)}
.sb-lista p{margin-top:4px;font-size:16px;line-height:1.5;color:var(--muted-fg)}

/* Between 960 and 1295 px the kit zooms the sections; the endorsement would drop under its 519 px minimum,
   so this section keeps its size and stacks while the window is narrower than the two columns. */
@media (min-width:960px) and (max-width:1295px){.sec.sb-ast{zoom:1}}
@media (min-width:960px) and (max-width:1199px){
  .sb-ast .wrap{grid-template-columns:1fr;gap:48px}
  .sb-selo{width:640px;margin:0 auto}
  .sb-txt{max-width:640px;margin:0 auto}
}

/* phones: one column, no endorsement (it needs 455 px or more) */
@media (max-width:959px){
  .sb-topo{padding:100px 0 0}
  .sb-topo::before,.sb-pontos{height:420px}
  .sb-s,.sb-s svg{height:70px}
  .sb-topo h1{margin-top:16px;font-size:36px}
  .sb-lead{margin-top:14px;font-size:17px}
  .sb-ast{padding-top:72px}
  .sb-ast .wrap{display:block}
  .sb-selo{display:none}
  .sb-txt .lead{font-size:17px}
  .sb-txt p+p{font-size:16px;margin-top:14px}
  .sb-ext{margin-top:8px!important}
  .sb-ext a{height:44px}
  .sb-reg{padding-top:0}
  .sb-reg .wrap{display:block}
  .sb-lista{margin-top:20px}
  .sb-lista li{gap:14px;padding:16px 0}
  .sb-lista h3{font-size:16px}
  .sb-lista p{font-size:15px}
}