/* Composition adapted from the supplied videos, using Serveur Minecraft's own artwork. */
.reference-layout{--sand:#f1d3a2;--sand-ink:#975327;--ocean:#06a9e0;background:var(--sand)}
.reference-layout .container{width:min(1030px,calc(100% - 64px))}
.reference-layout .hero{min-height:650px}
.reference-layout .hero-content{top:48%}
.reference-layout .hero-logo.hero-logo-image{width:clamp(280px,26vw,410px);margin-bottom:-32px}
.reference-layout .hero .wood-sign{width:clamp(260px,22vw,350px)}
.reference-layout .hero .wood-sign strong{font-size:clamp(16px,1.4vw,20px)}
.reference-layout .hero .wood-sign-content>span{font-size:10px}
.reference-layout .discover{bottom:70px;font-size:8px;opacity:.8}
.reference-layout .hero .wave{height:65px;fill:#08aee0;filter:drop-shadow(0 -7px 0 #b9f6f5) drop-shadow(0 -13px 0 #67dce9)}
.reference-layout .server-intro{min-height:700px;padding:130px 0 65px;background:linear-gradient(115deg,transparent 24%,#50e4f529 33%,transparent 40%,#4cdced3d 57%,transparent 65%),#06a9e0}
.reference-layout .join-grid{grid-template-columns:1.05fr 1fr;gap:70px}
.reference-layout .server-intro h1{font-size:26px}
.reference-layout .server-intro .hero-description{font-size:14px;line-height:1.65;margin-bottom:12px}
.reference-layout .server-card{padding:28px;border:11px solid #178eb6;border-radius:9px;background:#176c9dcc;box-shadow:0 12px 24px #02659b25}
.reference-layout .card-leaf{font-size:78px;right:-29px;top:-51px}
.reference-layout .four-season-tokens{margin-top:95px;gap:45px}
.reference-layout .four-season-tokens>span{font-size:35px}
.reference-layout .four-season-tokens b{font-size:10px}
.reference-layout .adventure{position:relative;padding:35px 0 150px;background:linear-gradient(115deg,transparent 38%,#52dfef24 48%,transparent 60%),#06a9e0}
.reference-layout .adventure::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:100px;background:url('assets/shore-divider.svg') center/100% 100%;pointer-events:none}
.reference-layout .adventure-grid{width:min(870px,calc(100% - 64px));grid-template-columns:1.1fr 1fr;padding:35px;gap:40px;border:1px solid #81e0f185;background:#328fd532;border-radius:5px}
.reference-layout .adventure-copy .eyebrow{display:none}
.reference-layout .adventure-copy h2{font-size:23px;text-transform:uppercase}
.reference-layout .adventure-copy h2 em{color:#ffe894}
.reference-layout .adventure-copy p{font-size:12px;margin:12px 0;line-height:1.65}
.reference-layout .feature-photo{height:235px;border-radius:16px;border-width:6px}
.reference-layout .photo-caption{font-size:18px;bottom:18px;left:18px}
.reference-layout .button{font-size:12px;min-height:40px;padding:11px 19px}
.reference-layout .stats{padding:85px 0 60px;background:var(--sand);border-radius:0}
.reference-layout .stats .eyebrow,.reference-layout .stats>.container>p{display:none}
.reference-layout .stats h2{font-size:23px;text-transform:uppercase;color:var(--sand-ink);letter-spacing:0}
.reference-layout .stats h2 em{color:inherit}
.reference-layout .stats-grid{margin:40px auto 26px;max-width:720px;gap:55px}
.reference-layout .stats-grid strong{width:190px;height:184px;font-size:26px!important;white-space:nowrap}
.reference-layout .stats-grid::before{top:89px;left:calc((min(1030px,100vw - 64px) - 100vw)/2);right:calc((min(1030px,100vw - 64px) - 100vw)/2)}
.reference-layout .demo-note{font-size:10px;color:#8b613e}
.reference-layout .discord-section{padding:75px 0 135px;background:var(--sand);overflow:visible}
.reference-layout .discord-section::after{display:none}
.reference-layout .discord-inner{position:relative;display:grid;grid-template-columns:1fr 175px;gap:20px 45px;width:min(850px,calc(100% - 64px));padding:35px 40px;background:#d4a478;border:2px solid #b17a4d;border-radius:6px;box-shadow:inset 0 0 25px #b67e4333;text-align:left}
.reference-layout .discord-inner>div:not(.discord-orb):not(.community-mascot){grid-column:1;grid-row:1}
.reference-layout .discord-inner .eyebrow{display:none}
.reference-layout .discord-inner h2{font-size:23px;text-transform:uppercase;color:#fff2d8}
.reference-layout .discord-inner h2 em{color:#7460cd}
.reference-layout .discord-inner p{font-size:12px;color:#fff4df;line-height:1.65;margin-top:12px}
.reference-layout .discord-inner .button{grid-column:1;justify-self:start;margin:0;background:#8270dd;color:white;border-color:#a99bea;box-shadow:0 4px #6552b1}
.reference-layout .discord-orb{grid-column:2;grid-row:1/3;width:140px;height:140px;border-radius:30px;transform:rotate(9deg);box-shadow:7px 10px #a170493b;background:#8979e7;border:3px solid #b6a9ff}
.reference-layout .discord-orb svg{width:82px;height:82px}
.reference-layout .discord-inner{grid-template-columns:minmax(0,1fr) 230px;overflow:hidden}
.reference-layout .community-mascot{grid-column:2;grid-row:1/3;align-self:center;position:relative;height:260px;pointer-events:none}
.community-mascot img{position:absolute;bottom:0;left:0;width:100%;max-width:100%;height:100%;object-fit:contain;object-position:center;transform-origin:50% 85%;filter:drop-shadow(6px 8px 0 #90542b26);animation:community-sway 4.8s ease-in-out infinite;animation-play-state:paused}
.discord-section.motion-in-view .community-mascot img{animation-play-state:running}
@keyframes community-sway{0%,100%{transform:translateX(-9px) rotate(-3deg)}50%{transform:translateX(9px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.community-mascot img{animation:none;transform:none}}
.reference-layout .news{position:relative;padding:145px 0 145px;background:#191505;border-radius:0;margin:0;color:white}
.reference-layout .news::before,.reference-layout .news::after{content:'';position:absolute;left:0;right:0;height:70px;background:url('assets/sand-divider.svg?v=2') center/100% 100% no-repeat;pointer-events:none}
.reference-layout .news::before{top:-1px}
.reference-layout .news::after{bottom:-1px;transform:rotate(180deg)}
.reference-layout .section-heading h2{font-size:23px;text-transform:uppercase;letter-spacing:0;color:#fff5e5}
.reference-layout .section-heading h2 em{color:inherit}
.reference-layout .news-grid{max-width:950px;margin:auto;gap:30px;align-items:stretch}
.reference-layout .news-card{display:flex;flex-direction:column;min-width:0}
.reference-layout .article-cover{border-width:6px;border-radius:18px;margin-bottom:12px}
.reference-layout .article-plank{height:68px;min-height:68px;display:flex;align-items:center;justify-content:center;padding:12px 18px 16px;font-size:12px;line-height:1.4}
.reference-layout .article-cover::before,.reference-layout .article-cover::after{width:44px;height:17px;box-shadow:2px 2px #a58c6a33}
.reference-layout .article-cover::before{right:-17px;top:0}
.reference-layout .article-cover::after{left:-18px;bottom:0}
.reference-layout .article-tag{font-size:8px}
.reference-layout .blog-link{margin-top:35px}
.reference-layout .final-cta{min-height:430px;display:grid;place-items:center;background:var(--sand);color:var(--sand-ink);padding:85px 0}
.reference-layout .final-cta::before,.reference-layout .final-cta::after{display:none}
.reference-layout .final-cta .eyebrow{display:none}
.reference-layout .final-cta h2{font-size:26px;text-transform:uppercase;letter-spacing:0;text-shadow:none;color:var(--sand-ink)}
.reference-layout .final-cta h2 em{color:inherit}
.reference-layout .final-cta p{color:#946746;font-size:13px}
.reference-layout .final-ip{color:#975327}
.reference-layout .final-cta [data-discord]{background:#8270dd;color:white;border-color:#a99bea;box-shadow:0 4px #6552b1}
.reference-layout .site-footer{background:#a34e16;padding:40px 0}
.reference-layout .site-footer .footer-grid h3{font-size:13px;text-transform:none}
.reference-layout .site-footer .footer-grid a,.reference-layout .site-footer .footer-grid button,.reference-layout .site-footer .footer-brand p{color:#ffe9d5;font-size:11px}
@media(max-width:760px){
 .reference-layout .container{width:calc(100% - 36px)}
 .reference-layout .hero-logo.hero-logo-image{width:min(330px,85vw)}
 .reference-layout .hero .wood-sign{width:min(300px,85vw)}
 .reference-layout .server-intro{padding:90px 0 55px;min-height:0}
 .reference-layout .join-grid{grid-template-columns:1fr;gap:50px}
 .reference-layout .server-intro h1{font-size:24px}
 .reference-layout .four-season-tokens{gap:24px;margin-top:60px}
 .reference-layout .adventure{padding:20px 0 110px}
 .reference-layout .adventure-grid{width:calc(100% - 36px);grid-template-columns:1fr;padding:24px;gap:25px}
 .reference-layout .stats{padding:55px 0 25px}
 .reference-layout .stats h2{font-size:20px;margin:auto}
 .reference-layout .stats-grid{gap:4px}
 .reference-layout .stats-grid strong{width:clamp(96px,28vw,125px);height:clamp(104px,30vw,136px);font-size:18px!important}
 .reference-layout .stats-grid::before{top:clamp(50px,14.5vw,65px);left:0;right:0}
 .reference-layout .discord-section{padding:45px 0 70px}
 .reference-layout .discord-inner{width:calc(100% - 36px);grid-template-columns:1fr 65px;padding:25px 20px;gap:18px 12px}
 .reference-layout .discord-inner{grid-template-columns:minmax(0,1fr) 85px}
 .reference-layout .community-mascot{height:125px;align-self:center}
 .community-mascot img{width:100%;left:0;bottom:0}
 .reference-layout .discord-orb{width:60px;height:65px;border-radius:15px;align-self:start}
 .reference-layout .discord-orb svg{width:38px;height:38px}
 .reference-layout .discord-inner h2{font-size:19px}
 .reference-layout .discord-inner .desktop-break{display:none}
 .reference-layout .news{padding:110px 0}
 .reference-layout .section-heading h2{font-size:20px}
 .reference-layout .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}
 .reference-layout .article-plank{font-size:10px}
 .reference-layout .final-cta{min-height:350px;padding:60px 0}
 .reference-layout .final-cta h2{font-size:23px}
}
@media(max-width:390px){.reference-layout .news-grid{grid-template-columns:1fr;max-width:280px}.reference-layout .stats-grid strong{width:clamp(86px,28vw,109px);height:clamp(94px,30vw,117px);font-size:16px!important}.reference-layout .stats-grid strong span{font-size:13px}.reference-layout .four-season-tokens{gap:17px}}
