.art-hero{padding: var(--sp-8) var(--sp-5) var(--sp-9);} .home .art-hero{position:relative;isolation:isolate;display:grid;align-content:center;min-height:300px;padding:var(--sp-8) var(--sp-5) var(--sp-9);background: linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 85%,transparent),transparent 28%,transparent 72%,color-mix(in srgb,var(--bg-deep) 85%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 35%,transparent),color-mix(in srgb,var(--bg-deep) 12%,transparent) 44%,color-mix(in srgb,var(--bg-deep) 80%,transparent)),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-panel) 100%);border-top:1px solid var(--gold-2-a35);border-bottom:1px solid var(--gold-2-a25);} .home .art-hero::before{content:"CHOOSE YOUR VANGUARD";display:block;width:max-content;max-width:100%;margin:0 auto;padding:0 var(--sp-6) var(--sp-3);border-bottom:1px solid var(--gold-2-a50);color:var(--gold-bright);font-size:var(--fs-caption);font-weight:700;letter-spacing:.25em;line-height:1.2;text-align:center;text-shadow:0 2px 14px var(--black-a95);} .home .art-class-row{display:none;} .home .art-class-row figure{position:relative;overflow:hidden;padding:var(--sp-1);background:linear-gradient(145deg,var(--gold-2-a50),var(--white-a7) 36%,var(--black-a75) 78%);border:1px solid var(--gold-2-a35);box-shadow:0 12px 26px var(--black-a55),inset 0 1px var(--white-a16);} .home .art-class-row figure::after{content:"";position:absolute;inset:7px;border:1px solid var(--white-a12);pointer-events:none;} .home .art-class-row img{height:190px;filter:brightness(1.12) saturate(1.08) contrast(1.04);} .home .art-figure-cap{position:absolute;z-index:1;right:3px;bottom:3px;left:3px;margin:0;padding:var(--sp-4) var(--sp-2) var(--sp-2);background:linear-gradient(180deg,transparent,var(--black-a95));color:var(--text-primary);text-shadow:0 1px 4px var(--black-a95);} .art-hero-caption{max-width: var(--frame);margin: 0 auto;padding: 0 0 var(--sp-4);} .art-hero-kicker{margin: 0 0 var(--sp-1);font-size: var(--fs-caption);font-weight: 700;letter-spacing: .22em;text-transform: uppercase;color: var(--gold-mid);} .art-hero-title{margin: 0 0 var(--sp-1);font-size: var(--fs-h3);font-weight: 700;line-height: 1.2;color: var(--text-bright);} .art-hero-sub{margin: 0 0 var(--sp-3);font-size: var(--fs-body);color: var(--text-secondary);} .art-hero-cta{display: inline-block;font-size: var(--fs-small);font-weight: 700;} .art-class-row{max-width: var(--frame);margin: 0 auto;display: grid;grid-template-columns: repeat(6,1fr);gap: var(--sp-4);} .art-class-row img{display: block;width: 100%;height: auto;aspect-ratio: 3 / 2;object-fit: cover;} .art-class-row img.tile-top{object-position: 50% 22%;} .art-class-row figure{margin: 0;} .art-figure-cap{margin-top: var(--sp-2);text-align: center;font-size: var(--fs-caption);font-weight: 700;letter-spacing: .22em;text-transform: uppercase;color: var(--text-secondary);} @media (max-width: 720px){.art-class-row{grid-template-columns: repeat(2,1fr);} .home .art-class-row img{height:auto;} .home .art-hero{min-height:280px;}} .home .class-art-sigil{display: flex;align-items: center;justify-content: center;font-size: var(--fs-h2);font-weight: 700;line-height: 1;letter-spacing: 0.04em;color: color-mix(in srgb,var(--gold-mid) 60%,var(--text-body));user-select: none;} .overview-grid{gap: var(--sp-4);} .overview-grid .ov-name{line-height: 1.2;min-height: 2.4em;} .lb-head{padding-bottom: var(--sp-6);} .main > .view-tabs{background: linear-gradient(180deg,var(--panel),var(--well));border: var(--hairline) solid var(--line);border-radius: var(--radius-2) var(--radius-2) 0 0;} #guide{position: relative;border-top: var(--hairline) solid var(--line);border-radius: var(--radius-2) var(--radius-2) 0 0;background: linear-gradient(180deg,color-mix(in srgb,var(--panel) 55%,transparent) 0%,transparent 100%);} #guide::before{content: "";position: absolute;left: 0;right: 0;top: calc(-1 * var(--sp-6));height: var(--sp-6);pointer-events: none;background: linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bg-deep) 40%,transparent) 55%,color-mix(in srgb,var(--panel) 55%,transparent) 100%);} .lb-head{background-image: linear-gradient(90deg,color-mix(in srgb,var(--well) 96%,transparent) 0%,color-mix(in srgb,var(--well) 88%,transparent) 46%,color-mix(in srgb,var(--well) 55%,transparent) 72%,color-mix(in srgb,var(--well) 18%,transparent) 100%),radial-gradient(ellipse 50% 50% at 50% 50%,transparent 52%,color-mix(in srgb,var(--well) 40%,transparent) 100%),url("/assets/art/tile-guardian.webp");background-size: auto,auto 88%,auto 88%;background-position: 0 0,right var(--sp-6) center,right var(--sp-6) center;background-repeat: no-repeat;} .podium-card{background-image: linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--raised),var(--well));background-size: 100% 100%,auto 150%,100% 100%;background-position: 0 0,right top,0 0;background-repeat: no-repeat;} .podium-card:nth-child(1){background-image: linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--pt-gold),var(--well));} .podium-card:nth-child(2){background-image: linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--pt-silver),var(--well));} .podium-card:nth-child(3){background-image: linear-gradient(90deg,var(--well) 58%,color-mix(in srgb,var(--well) 55%,transparent) 74%,transparent 92%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--pt-bronze),var(--well));} .home .art-hero{background: linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 88%,transparent) 0%,transparent 28%,transparent 72%,color-mix(in srgb,var(--bg-deep) 88%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 38%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 8%,transparent) 44%,color-mix(in srgb,var(--bg-deep) 82%,transparent) 100%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-panel) 100%);} .home .hero::after{content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 168px;pointer-events: none;background: linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bg-deep) 34%,transparent) 58%,var(--bg-deep) 100%);} #guide .feature-grid{align-items: stretch;} #guide .feature-card{display: flex;flex-direction: column;} #guide .feature-card{background-image: linear-gradient(180deg,color-mix(in srgb,var(--shade-warm) 92%,transparent) 0%,color-mix(in srgb,var(--shade-warm) 88%,transparent) 34%,color-mix(in srgb,var(--shade-warm) 44%,transparent) 100%),url("/assets/art/tile-guardian.webp"),linear-gradient(180deg,var(--bg-panel) 0%,var(--cellar) 100%);background-size: auto,46% auto,auto;background-position: 0 0,100% 100%,0 0;background-repeat: no-repeat,no-repeat,repeat;} .class-grid .class-desc{color: var(--text-primary);} .slot-glyph{filter: brightness(1.4) saturate(1.15) contrast(1.05);} #guide .feature-grid{grid-auto-rows: 1fr;} #guide .feature-card{height: 100%;} .home #guide{padding-top:var(--sp-9);background: radial-gradient(ellipse 74% 52% at 50% 0%,color-mix(in srgb,var(--gold-dark) 18%,transparent),transparent 72%),linear-gradient(180deg,var(--bg-deep),var(--cellar) 42%,var(--bg-deep));} .home #guide .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:var(--sp-4);} .home #guide .feature-card{min-height:150px;padding:var(--sp-5);border:1px solid var(--gold-2-a25);box-shadow:inset 0 1px var(--white-a14),0 10px 26px var(--black-a40);background: linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--cellar) 94%,transparent));} .home #guide .feature-card:first-child{grid-column:span 2;grid-row:span 2;min-height:290px;justify-content:flex-end;background: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 82%,transparent) 48%,color-mix(in srgb,var(--bg-deep) 20%,transparent) 100%),linear-gradient(180deg,transparent 38%,var(--bg-deep) 100%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-panel) 100%);} .home #guide .feature-card:nth-child(2){grid-column:span 2;min-height:120px;justify-content:flex-end;background: linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 94%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 54%,transparent) 54%,transparent 100%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-panel) 100%);} .home #guide .feature-card:first-child .feature-desc{max-width:38ch;} .home #guide .feature-card:nth-child(3){grid-column:span 2;grid-row:span 2;min-height:288px;justify-content:flex-end;background: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 80%,transparent) 48%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,transparent 36%,var(--bg-deep) 100%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-panel) 100%);} .home #guide .feature-card:nth-child(3) .feature-desc{max-width:38ch;} .home #guide .feature-card:nth-child(4){grid-column:span 2;min-height:120px;background: linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 96%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 62%,transparent) 54%,transparent 100%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-panel) 100%);} .home #guide .feature-card:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)){background: linear-gradient(135deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--cellar) 90%,transparent)),linear-gradient(180deg,var(--bg-panel) 0%,var(--cellar) 100%);} .home #guide .feature-card:nth-child(5),.home #guide .feature-card:nth-child(6),.home #guide .feature-card:nth-child(7),.home #guide .feature-card:nth-child(8){grid-column:span 2;min-height:148px;justify-content:flex-end;} .home #guide .feature-card:nth-child(5){background: linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 94%,transparent),color-mix(in srgb,var(--gold-dark) 28%,transparent)),linear-gradient(180deg,var(--bg-panel) 0%,var(--cellar) 100%);} .home #guide .feature-card:nth-child(6){background: linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 94%,transparent),color-mix(in srgb,var(--navy) 70%,transparent)),linear-gradient(180deg,var(--bg-panel) 0%,var(--cellar) 100%);} .home #guide .feature-card:nth-child(7){background: linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 94%,transparent),color-mix(in srgb,var(--dusk) 54%,transparent)),linear-gradient(180deg,var(--bg-panel) 0%,var(--cellar) 100%);} .home #guide .feature-card:nth-child(8){background: linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 94%,transparent),color-mix(in srgb,var(--copper) 34%,transparent)),linear-gradient(180deg,var(--bg-panel) 0%,var(--cellar) 100%);} .home #guide .feature-card:nth-child(5),.home #guide .feature-card:nth-child(6),.home #guide .feature-card:nth-child(7),.home #guide .feature-card:nth-child(8){min-height:190px;} @media (max-width:900px){.home #guide .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:640px){.home #guide .feature-grid{grid-template-columns:1fr;} .home #guide .feature-card:first-child,.home #guide .feature-card:nth-child(2),.home #guide .feature-card:nth-child(3),.home #guide .feature-card:nth-child(4),.home #guide .feature-card:nth-child(n+5){grid-column:auto;grid-row:auto;min-height:250px;}}