
.section-5{padding:25px 0 75px;color:#e8dac0;position:relative}.section-5 .section-title{margin-bottom:26px}.section-5 .section-title img{width:min(100%,650px)}.classes-frame{position:relative;padding:26px;background:linear-gradient(125deg,#17151bed,#120e12f2);border:1px solid #77603f;box-shadow:0 14px 36px #0005,inset 0 0 45px #0006}.classes-frame::before{content:"";position:absolute;inset:-14px;pointer-events:none;background:url("./c843907d9870-frame-opt.webp") center/100% 100% no-repeat;z-index:0}.class-tabs,.class-detail{position:relative;z-index:1}.class-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px 8px;padding-bottom:24px;border-bottom:1px solid #a4854d44}.class-tabs button{display:flex;align-items:center;flex-direction:column;gap:7px;background:transparent;border:0;color:#baad98;padding:5px 2px;font:14px Beaufort,Georgia,serif;line-height:1.15;cursor:pointer;transition:color .2s,background .2s}.class-icon{width:60px;height:66px;border:1px solid #756249;border-radius:9px;overflow:hidden;background:#27222a;box-shadow:0 3px 7px #0007;transition:border-color .2s,transform .2s}.class-icon img{width:100%;height:100%;object-fit:cover;object-position:center 10%;display:block}.class-tabs button:hover,.class-tabs button[aria-selected=true]{color:#ffe0a0;background:linear-gradient(transparent,#c79c5020);border-radius:5px}.class-tabs button:hover .class-icon{transform:translateY(-2px)}.class-tabs button[aria-selected=true] .class-icon{border-color:#e5bb70;box-shadow:0 0 12px #bd7a3544}.class-tabs button:focus-visible{outline:2px solid #e0b56f;outline-offset:3px}.class-detail{display:grid;grid-template-columns:1.1fr 1fr;min-height:380px;align-items:center;gap:28px;padding:22px 26px 0}.class-eyebrow{font:12px Beaufort,Georgia,serif;letter-spacing:3px;color:#b69a69}.class-copy h3{font:700 clamp(28px,3vw,43px) Beaufort,Georgia,serif;color:#f4d598;margin:10px 0 14px}.class-copy h3 small{font-size:17px;color:#bba078;margin-left:7px}.class-role{display:inline-block;padding:6px 12px;border:1px solid #82633888;border-radius:3px;color:#dcc49d;font-size:14px;background:#a7752420}.class-description{font:17px/1.7 Beaufort,Georgia,serif;color:#cbbfae;margin:20px 0}.class-copy dl{display:flex;gap:35px;margin:0 0 22px;padding-top:16px;border-top:1px solid #8b70432e}.class-copy dt{font-size:12px;color:#9b8c77;margin-bottom:5px;font-weight:400}.class-copy dd{font-size:15px;color:#e0c49b;margin:0}.class-count{font:10px Beaufort,Georgia,serif;letter-spacing:2px;color:#8f7a5b}.class-art{height:350px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 55%,#b5803133,transparent 65%);overflow:hidden}.class-art>img{position:relative;height:310px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 18px #0009);z-index:1}.class-rune{position:absolute;font-size:310px;line-height:1;color:#b58a3f15;transform:rotate(15deg)}.class-art-caption{position:absolute;bottom:0;font:10px Beaufort,Georgia,serif;letter-spacing:4px;color:#967a4f}.class-detail.class-changing{animation:class-reveal .28s ease-out}@keyframes class-reveal{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1023px){.section-5{padding:20px 0 45px}.section-5>.container{padding:0 22px;max-width:100%}.classes-frame{padding:18px}.class-detail{padding:22px 8px 0;gap:15px}.class-tabs{gap:12px 3px}.class-tabs button{font-size:12px}.class-icon{width:50px;height:56px}.class-description{font-size:16px}.class-copy dl{gap:20px}}
@media(max-width:600px){.class-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 4px;padding-bottom:18px}.class-detail{grid-template-columns:1fr;gap:5px}.class-art{grid-row:1;height:235px}.class-art>img{height:220px}.class-art-caption{display:none}.class-copy{text-align:center}.class-copy h3{font-size:30px}.class-copy dl{justify-content:center}.class-description{font-size:16px;line-height:1.6}.class-count{display:block;margin-bottom:10px}.class-eyebrow{font-size:11px}.section-5 .section-title{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.class-detail.class-changing{animation:none}.class-tabs button,.class-icon{transition:none}}

/* Share the exact section 4 title artwork and overlapping bronze frame. */
.section-5{padding:140px 0 90px;background:radial-gradient(ellipse 75% 25% at 50% 100%,#68233326,transparent 80%)}
.section-5 .section-title{margin-bottom:4.5rem}.section-5 .section-title img{width:auto;max-width:100%}
.classes-title-art{display:inline-block;position:relative;width:844px;max-width:100%;vertical-align:middle}.classes-title-art img{display:block;width:100%!important;height:auto}.classes-title-art>span{position:absolute;left:28%;top:27%;width:44%;height:35%;display:flex;align-items:center;justify-content:center;background:#150d0d;color:#f5dfa6;font:700 clamp(12px,2.1vw,28px)/1 Beaufort,Georgia,serif;white-space:nowrap;text-shadow:0 1px 2px #000}
.classes-frame{width:58rem;max-width:82vw;margin:0 auto;border:1px solid #a16c35;box-shadow:0 0 0 4px #180b0d,0 0 0 5px #95653470,0 8px 25px #0008;background:linear-gradient(125deg,#170e12ed,#10090df2)}
.classes-frame::before,.classes-frame::after{content:'';position:absolute;z-index:2;pointer-events:none;background:none;border:1px solid #bb804388;opacity:1;inset:-9px -6px;transform:rotate(-1deg)}
.classes-frame::after{inset:-5px -12px;transform:rotate(1.2deg);border-color:#b17c3870}
@media(max-width:1023px){.section-5{padding:70px 0 60px}.section-5 .section-title{margin-bottom:48px}.classes-title-art{width:min(70vw,360px)}.classes-title-art>span{font-size:clamp(9px,1.8vw,12px)}.classes-frame{width:88vw;max-width:680px}.section-5 .section-title img{width:100%}}
@media(max-width:600px){.section-5{padding-top:55px}.section-5 .section-title{margin-bottom:38px}.classes-title-art{width:92vw;max-width:440px}.classes-title-art>span{font-size:clamp(10px,2.6vw,14px)}}

.section-5{font-family:Beaufort,Georgia,serif}.class-copy h3,.class-description,.class-tabs button,.class-role,.class-copy dt,.class-copy dd{font-family:Beaufort,Georgia,serif}

/* Match the complete section 4 swiper container, including adjacent slides. */
@media(min-width:1024px){.section-5 .classes-frame{width:100%;max-width:none;box-sizing:border-box}}

/* User supplied character artwork: transparent PNG cutouts, text-facing composition. */
.class-detail{grid-template-columns:1fr 1.1fr;min-height:420px}.class-art{height:390px;overflow:visible;background:radial-gradient(ellipse at 50% 65%,#b580311c,transparent 65%)}.class-art>img{height:380px;width:100%;max-width:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 12px #0004);mask-image:linear-gradient(#000 91%,transparent 100%)}.class-art>img[data-art-class="gc"]{transform:scaleX(-1)}.class-rune{display:none}.class-art-caption{bottom:-4px;opacity:.6}
@media(max-width:600px){.class-detail{grid-template-columns:1fr;min-height:0}.class-art{height:280px}.class-art>img{height:280px}.class-art-caption{display:none}}

/* Same arrow artwork as section 4, safely inside the class frame. */
.classes-frame .class-arrow{position:absolute;top:65%;transform:translateY(-50%);z-index:4;width:44px;height:60px;padding:8px;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 5px #0009);transition:filter .2s}
.class-arrow-prev{left:1px}.class-arrow-next{right:1px}.class-arrow img{display:block;width:27px;height:auto;max-height:44px;object-fit:contain}.class-arrow:hover{filter:brightness(1.3) drop-shadow(0 0 6px #d4aa5966)}.class-arrow:focus-visible{outline:2px solid #d6b06b;outline-offset:-3px;border-radius:4px}.class-detail{touch-action:pan-y}
@media(max-width:600px){.classes-frame .class-arrow{top:57%;width:40px;height:52px;padding:8px}.class-arrow img{width:23px}.class-arrow-prev{left:-8px}.class-arrow-next{right:-8px}}
@media(prefers-reduced-motion:reduce){.classes-frame .class-arrow{transition:none}}
