/* why-the-name: Romans 8:29 at hero scale with the spinning seal */
.keystone{--bg:var(--plum);overflow:clip}
.keystone .glow{position:absolute;left:50%;top:50%;width:min(860px,110vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(247,213,107,.22) 0 6deg,transparent 6deg 22deg) ;border-radius:50%;
  mask:radial-gradient(circle,#000 18%,transparent 56%);-webkit-mask:radial-gradient(circle,#000 18%,transparent 56%);animation:spin 90s linear infinite}
.verse.big{max-width:1080px;margin:16px auto 44px;padding:clamp(40px,6vw,84px) clamp(26px,6vw,90px);background:var(--tex),var(--cream);color:var(--plum);text-align:center;
  box-shadow:0 10px 0 var(--sun),0 40px 60px -24px rgba(0,0,0,.6)}
.verse.big blockquote{font:400 clamp(1.7rem,3.8vw,3.3rem)/1.12 "Lilita One",sans-serif;text-wrap:balance}
.verse.big cite{font-size:.62em;color:var(--terra-d)}
.verse.big svg{width:clamp(96px,11vw,150px);top:clamp(-56px,-4vw,-40px);right:clamp(10px,4vw,48px)}
.keystone .lead{color:var(--cream)}

.words{--bg:var(--sage)}
.words h2{color:var(--plum)}
.words .trio{margin:56px 0 0}
.word{font:400 clamp(3rem,5vw,4.4rem)/.9 "Lilita One",sans-serif;color:var(--sun);text-shadow:0 4px 0 var(--plum);margin:0 0 .25em;rotate:-3deg}
.refs{margin:14px 0 0;font-weight:700;font-size:.9rem;color:var(--leaf)}
.trio p.refs:last-child{margin-top:14px}

.arcband{--bg:var(--blue)}
.arc{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);counter-reset:a}
.arc li{position:relative;background:var(--tex),var(--cream);color:var(--ink);border-radius:22px;padding:56px 24px 24px;box-shadow:0 6px 0 rgba(0,0,0,.18),0 22px 30px -16px rgba(0,0,0,.5);transition:transform .45s var(--spring)}
.arc li:nth-child(odd){rotate:-1deg}.arc li:nth-child(even){rotate:1deg}
.arc li:hover{transform:translateY(-6px) rotate(-1.5deg)}
.arc li:nth-child(5){background:var(--tex),var(--sun-l)}
.arc .ref{position:absolute;top:-18px;left:20px;font:400 1.3rem/1 "Lilita One",sans-serif;padding:.45em .8em;border-radius:14px;background:var(--terra);color:var(--plum);box-shadow:var(--cut);rotate:-4deg}
.arc li:nth-child(5) .ref{background:var(--plum);color:var(--cream)}
.arc blockquote{margin:0 0 14px;font-style:italic;color:#33435C}
.arc h3{font-size:1.6rem;color:var(--plum)}
.arc p{margin:0;color:#24344F!important}

.principles{--bg:var(--paper)}
.principles h2{color:var(--plum)}

.storyband{--bg:var(--terra)}
.tale{max-width:980px;margin:0 auto 48px;text-align:center}
.tale h2{color:var(--plum);text-shadow:0 5px 0 var(--sun-l)}
.tale .big{font:400 clamp(1.5rem,2.8vw,2.3rem)/1.2 "Lilita One",sans-serif;color:var(--plum);text-wrap:balance}
.tale p{font-size:clamp(1.05rem,1.4vw,1.2rem)}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);max-width:980px;margin:0 auto}
.mv h3{font-size:2rem;color:var(--terra-d)}
.mv .m{font:400 clamp(1.4rem,2.2vw,1.8rem)/1.2 "Lilita One",sans-serif;color:var(--plum)!important;margin:0}
.mv .card:first-child{rotate:-1.2deg}.mv .card:last-child{rotate:1.2deg}
.three{margin:0;padding-left:1.3em;color:#24344F;font-weight:600}
.three li + li{margin-top:6px}

.lines{--bg:var(--sage)}
.lines h2{color:var(--plum)}
.tags{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.tags li{display:flex;align-items:center;justify-content:center;min-height:120px;padding:20px 18px;border-radius:18px;background:var(--tex),var(--cream);
  font:400 clamp(1.15rem,1.7vw,1.45rem)/1.1 "Lilita One",sans-serif;color:var(--plum);box-shadow:0 6px 0 var(--sage-d),0 18px 24px -14px rgba(16,30,56,.5);transition:transform .45s var(--spring)}
.tags li:nth-child(odd){rotate:-1.5deg}.tags li:nth-child(even){rotate:1.5deg;background:var(--tex),var(--sun-l)}
.tags li:last-child{background:var(--tex),var(--plum);color:var(--sun-l)}
.tags li:hover{transform:translateY(-6px) rotate(-2deg)}

@media (max-width:1099px){ .arc{grid-template-columns:repeat(2,1fr);row-gap:40px} }
@media (max-width:899px){ .tags{grid-template-columns:repeat(2,1fr)} }
@media (max-width:759px){ .mv{grid-template-columns:1fr} }
@media (max-width:599px){ .arc{grid-template-columns:1fr} .tags{grid-template-columns:1fr} .tags li{min-height:84px} }
@media (max-height:520px) and (orientation:landscape){ .tags{grid-template-columns:repeat(4,1fr)} .tags li{min-height:96px;font-size:1.1rem} }