body.home{--text-muted: var(--drab);--border-subtle: var(--white-a7);--shadow-emblem-well: inset 0 0 18px var(--black-a60);--shadow-emblem-glow: 0 0 18px var(--gold-2-a10);} :where(body.home,.home *){margin:0;padding:0;box-sizing:border-box;} body.home{background: var(--bg-dark);color: var(--text-primary);font-family:var(--font-body);line-height: 1.65;font-size: var(--fs-body);overflow-x: hidden;} .home a:not(.btn){color: var(--gold);text-decoration:none;transition: color var(--dur-quick) var(--ease-out);} .home a:not(.btn):hover{color: var(--gold-bright);} .home a:not(.btn):focus-visible{color: var(--gold-bright);} body.home .site-nav a,body.home .site-footer-links.nav a{color:var(--ink-2);} body.home .site-nav a:hover,body.home .site-footer-links.nav a:hover{color:var(--ink-1);} body.home .site-nav a:focus-visible,body.home .site-footer-links.nav a:focus-visible{color:var(--ink-1);} body.home .site-nav a[aria-current="page"],body.home .site-footer-links.nav a[aria-current="page"]{color:var(--gold-2);} .home .btn-outline{color: var(--text-primary);} .home img{display:block;max-width:100%;} .home .hero{position:relative;isolation:isolate;display:grid;align-items:center;justify-items:start;overflow:hidden;height:auto;min-height:clamp(560px,72svh,650px);padding-block:var(--sp-5);background:var(--bg-panel);border-radius:0;} .home .hero::before,.home .hero::after{content: none;} .home .hero-bg{position:absolute;inset:0;background:var(--bg-deep);filter: brightness(1.54) contrast(1.14) saturate(1.16);-webkit-mask-image:linear-gradient(to bottom,black 55%,transparent 100%);mask-image:linear-gradient(to bottom,black 55%,transparent 100%);} .home .hero-bg::after{content:"";position:absolute;inset:0;background: linear-gradient(100deg,var(--scrim-cool-a82) 0%,var(--scrim-cool-a52) 44%,var(--scrim-cool-a8) 88%),linear-gradient(180deg,var(--bg-darker-a20),transparent 50%);} .home .hero-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;} .home .hero-embers::before,.home .hero-embers::after{content:"";position:absolute;left:-8px;bottom:-8px;border-radius:50%;will-change: transform,opacity;} .home .hero-embers::before{width:3px;height:3px;background:var(--gold-2-a45);filter: blur(1px);box-shadow: 5vw 62vh 2px 1px var(--gold-2-a35),13vw 18vh 1px 1px var(--gold-2-a25),21vw 74vh 2px 2px var(--gold-2-a40),29vw 38vh 2px 0 var(--gold-2-a25),36vw 84vh 1px 1px var(--gold-2-a35),43vw 12vh 2px 1px var(--gold-2-a25),50vw 56vh 2px 1px var(--gold-2-a35),57vw 26vh 1px 0 var(--gold-2-a22),64vw 78vh 2px 2px var(--gold-2-a40),71vw 44vh 1px 1px var(--gold-2-a35),78vw 15vh 2px 0 var(--gold-2-a25),85vw 60vh 1px 1px var(--gold-2-a35),92vw 32vh 2px 1px var(--gold-2-a25),9vw 40vh 1px 0 var(--gold-2-a25),17vw 90vh 2px 1px var(--gold-2-a35),33vw 55vh 1px 1px var(--gold-2-a22),47vw 90vh 2px 0 var(--gold-2-a35),61vw 90vh 1px 1px var(--gold-2-a35),75vw 90vh 2px 1px var(--gold-2-a25),89vw 90vh 1px 0 var(--gold-2-a35);animation: ember-rise-far 26s linear infinite;animation-delay:-13s;} .home .hero-embers::after{width:3px;height:3px;background:var(--gold-2-a85);box-shadow: 7vw 70vh 3px 3px var(--gold-2-a50),18vw 30vh 2px 2px var(--gold-2-a45),30vw 82vh 3px 2px var(--gold-2-a50),41vw 18vh 2px 3px var(--gold-2-a45),52vw 62vh 3px 2px var(--gold-2-a72),63vw 38vh 2px 2px var(--gold-2-a45),74vw 86vh 3px 3px var(--gold-2-a50),85vw 48vh 2px 2px var(--gold-2-a45),95vw 24vh 3px 2px var(--gold-2-a45),12vw 50vh 2px 2px var(--gold-2-a50),25vw 8vh 3px 2px var(--gold-2-a45),38vw 44vh 2px 2px var(--gold-2-a72),58vw 90vh 3px 3px var(--gold-2-a50),69vw 12vh 2px 2px var(--gold-2-a45),81vw 70vh 3px 2px var(--gold-2-a45),93vw 60vh 2px 3px var(--gold-2-a50);animation: ember-rise-near 11s linear infinite;animation-delay:-6s;} @keyframes ember-rise-far{0%{transform:translate3d(0,0,0);opacity:0;} 8%{opacity:.7;} 25%{transform:translate3d(-2vw,-28vh,0);opacity:.95;} 45%{transform:translate3d(.5vw,-47vh,0);opacity:.75;} 62%{transform:translate3d(-2.5vw,-63vh,0);opacity:.9;} 80%{opacity:.6;} 100%{transform:translate3d(-1vw,-86vh,0);opacity:0;}} @keyframes ember-rise-near{0%{transform:translate3d(0,0,0);opacity:0;} 7%{opacity:1;} 22%{transform:translate3d(1.5vw,-24vh,0);opacity:.9;} 48%{transform:translate3d(-1vw,-52vh,0);opacity:1;} 70%{transform:translate3d(2vw,-74vh,0);opacity:.8;} 100%{transform:translate3d(.5vw,-94vh,0);opacity:0;}} @media (prefers-reduced-motion: reduce){.home .hero-embers::before,.home .hero-embers::after{animation:none;}} .home .hero-inner{position:relative;z-index:2;text-align:left;width:100%;max-width:var(--frame);margin:0 auto;padding: var(--sp-9) var(--gutter);} .home .hero-inner > *{max-width:676px;} .home .hero-tagline{font-size: var(--fs-h4);font-weight: 700;color: var(--game-text);text-shadow: 0 2px 16px var(--black-a95),0 0 40px var(--black-a60);margin: var(--sp-3) 0 0;line-height:1.4;max-width: 28ch;text-wrap: pretty;} .home .hero-kicker{margin:0 0 var(--sp-2);color:var(--gold-bright);font-size:var(--fs-small);font-weight:700;letter-spacing:var(--ls-overline);text-transform:uppercase;} .home .hero h1{position:relative;display:table;margin:0;} .home .hero-ctas{display:flex;justify-content:flex-start;gap:var(--sp-4);flex-wrap:wrap;} body.home #guide{padding-block:var(--sp-7);} @media(max-width:720px){.home .hero{justify-items:center;min-height:clamp(480px,68svh,640px);} .home .hero-inner{margin-left:0;text-align:center;max-width:100%;} .home .hero h1{margin-inline:auto;} .home .hero-tagline{margin-inline:auto;font-size:var(--fs-h6);font-weight:400;line-height:1.45;max-width:28ch;text-wrap:balance;} .home .hero-kicker{font-size:var(--fs-caption);letter-spacing:var(--ls-caps);} .home .hero-ctas{justify-content:center;}} @media(min-width:721px){.home .hero-kicker{margin-bottom: var(--sp-1);} .home .hero-tagline{margin-top: var(--sp-5);}} .home .hero-ctas .btn{min-width:236px;justify-content:center;text-align:center;} .home .hero-ctas .btn-lg{padding:var(--sp-4) var(--sp-7);} .home .hero-ctas a.btn-gold{border-image:none;} .home .hero-ctas .btn-outline{border-color:var(--game-ink-dim);background:var(--panel-deep-a62);box-shadow:0 0 0 1px var(--black-a55);} .home .hero-ctas .btn-outline:hover{border-color:var(--game-ink);background:var(--panel-deep-a50);} .home .hero-ctas .btn-outline:focus-visible{border-color:var(--game-ink);background:var(--panel-deep-a50);} .home .section{padding: var(--sp-5) var(--gutter);position:relative;} .home .section-alt{background: var(--bg-panel);} .home .container{max-width:calc(var(--frame) - 2 * var(--gutter));margin:auto;} .home .section-head{margin-bottom:var(--sp-4);max-width:720px;} .home .section-label{font-size:var(--fs-caption);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color: var(--gold-dim);margin-bottom:12px;} .home .section-title{font-size: var(--fs-h3);font-weight:var(--fw-display);font-synthesis:none;color:var(--text-bright);letter-spacing:-.01em;line-height:1.15;} .home .section-desc{color:var(--text-secondary);margin-top:var(--sp-4);font-size:var(--fs-body);line-height:1.55;} .home .home-faq{padding-block:var(--sp-5);background:var(--bg-deep);} .home .home-faq-list{max-width:var(--measure);margin-inline:auto;} .home .home-faq-list > details{border-bottom:1px solid var(--border);} .home .home-faq-list summary{padding-block:var(--sp-4);min-height:44px;font-family:var(--font-body);font-size:var(--fs-h4);line-height:1.4;color:var(--game-ink);cursor:pointer;} .home .home-faq-list p{padding-bottom:var(--sp-4);color:var(--text-secondary);line-height:1.6;} .home .home-faq-list a{text-decoration:underline;text-underline-offset:3px;} .home .class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;} .home .vocation-tile{position:relative;border-radius:var(--radius-2);overflow:hidden;background:var(--grad-panel);border:1px solid var(--border);box-shadow: inset 0 1px 0 var(--white-a12),inset 0 -1px 0 var(--black-a60),0 14px 36px var(--black-a80);transition:transform var(--dur-settled) var(--ease-out),border-color var(--dur-settled) var(--ease-out),box-shadow var(--dur-settled) var(--ease-out);} .home .vocation-tile:hover{transform:translateY(-2px);border-color:var(--line-gold);box-shadow:var(--shadow-2),0 14px 40px var(--black-a60),0 0 24px var(--gold-2-a10),inset 0 0 30px var(--gold-2-a4);} .home .vocation-tile:focus-within{transform:translateY(-2px);border-color:var(--line-gold);box-shadow:var(--shadow-2),0 14px 40px var(--black-a60),0 0 24px var(--gold-2-a10),inset 0 0 30px var(--gold-2-a4);} .home #classes .vocation-tile::after{content:"VIEW DETAILS";position:absolute;right:var(--sp-3);bottom:var(--sp-3);padding:var(--sp-1) var(--sp-2);color:var(--gold-bright);font-size:var(--fs-caption);font-weight:700;letter-spacing:.1em;opacity:0;pointer-events:none;transition:opacity var(--dur-quick) var(--ease-out);background:var(--black-a75);border:1px solid var(--gold-2-a45);} .home #classes .vocation-tile:hover::after{opacity:1;} .home #classes .vocation-tile:focus-visible::after,.home #classes .vocation-tile:focus-within::after{opacity:1;} .home .class-art{position:relative;aspect-ratio: 3/4;overflow:hidden;background:radial-gradient(circle at 50% 35%,var(--panel-lift) 0%,var(--pit) 75%);} .home .class-info{padding:var(--sp-4) 16px 16px;} .home .class-name{font-size:var(--fs-body);font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-2);letter-spacing:.03em;white-space:nowrap;} .home .class-desc{font-size:var(--fs-small);color:var(--text-secondary);line-height:1.6;} .home .feature-card{position:relative;isolation:isolate;box-shadow:inset 0 1px 0 var(--white-a5);overflow:hidden;} .home .feature-card:hover{transform:translateY(-2px);border-color:var(--line-gold);box-shadow:var(--shadow-2),inset 0 1px 0 var(--white-a5);} .home .feature-card:focus-within{transform:translateY(-2px);border-color:var(--line-gold);box-shadow:var(--shadow-2),inset 0 1px 0 var(--white-a5);} .home .feature-title{margin-bottom:0;padding-bottom:var(--sp-1);} .home .feature-desc{color:var(--ink-2);} .home #guide .feature-title{background-image:linear-gradient(var(--line-gold),var(--line-gold));background-size:48px 1px;background-position:left bottom;background-repeat:no-repeat;} .home .feature-card::after{content:none;} .home .feature-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--gold-mid) 22%,var(--gold-bright) 50%,var(--gold-mid) 78%,transparent);opacity:.5;transition:opacity var(--dur-settled) var(--ease-out);} .home .feature-card:hover::before{opacity:1;} .home .feature-card:focus-within::before{opacity:1;} .home .guide-tile{position:relative;} .home .guide-tile::before{height:2px;background-image:linear-gradient(90deg,transparent,var(--gold-mid) 22%,var(--gold-bright) 50%,var(--gold-mid) 78%,transparent);opacity:.85;} .home .tile-seal{position:absolute;top:14px;right:14px;width:46px;height:46px;-webkit-mask:var(--glyph) center/44px 44px no-repeat;mask:var(--glyph) center/44px 44px no-repeat;background-color:var(--gold-mid);transition:background-color var(--dur-settled) var(--ease-out);} .home .guide-tile:hover .tile-seal{background-color:var(--gold-bright);} .home .guide-tile:focus-within .tile-seal{background-color:var(--gold-bright);} .home .seal-craft .tile-seal{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 15.2h4.9l1.2-2.4h2.8l1.2 2.4h4.9v2H4.5zM10.6 12.8 12 6.4l1.4 6.4M8.1 8.3l3.9 1.8' stroke-width='1.25'/%3E%3Cpath d='M12 4.4 13.1 5.5 12 6.6 10.9 5.5Z' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E");} .home .seal-mounts .tile-seal{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 9.6 8.4 6.2l2 2.4h3.2l2-2.4 2.1 3.4v5.2l-2.2 3H8.5l-2.2-3zM8.8 12.2h1.6M13.6 12.2h1.6M10 15.7h4' stroke-width='1.25'/%3E%3Cpath d='M8.4 6.2 9.6 8M15.6 8l1.2-1.8' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");} .home .seal-dye .tile-seal{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.8h5v2.5l2.8 5.1a4.8 4.8 0 0 1-4.2 7.1h-2.2a4.8 4.8 0 0 1-4.2-7.1l2.8-5.1zM9.5 7.3h5M8.3 13.1h7.4' stroke-width='1.2'/%3E%3Cpath d='m17.9 5.3.6 1.3 1.3.6-1.3.6-.6 1.3-.6-1.3-1.3-.6 1.3-.6Z' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");} .home .seal-quests .tile-seal{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4.3 2.1 5.6 5.6 2.1-5.6 2.1-2.1 5.6-2.1-5.6-5.6-2.1 5.6-2.1Z' stroke-width='1.2'/%3E%3Cpath d='M12 8v8M8 12h8' stroke-width='.85'/%3E%3C/g%3E%3C/svg%3E");} .home #guide .feature-card.guide-tile{justify-content:flex-end;} .home #guide .feature-card.guide-tile::before{content:"";position:absolute;z-index:0;top:0;left:0;right:0;height:var(--guide-band,118px);background: radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--seal-accent,var(--gold-2)) 18%,transparent),transparent 64%),linear-gradient(180deg,color-mix(in srgb,var(--panel-deep) 38%,transparent),transparent 88%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 66%,transparent),color-mix(in srgb,var(--bg-deep) 82%,transparent)),url("/assets/art/tile-material-iron.webp");background-size:auto,auto,auto,128px 128px;background-repeat:no-repeat,no-repeat,no-repeat,repeat;border-bottom:1px solid color-mix(in srgb,var(--seal-accent,var(--gold-2)) 30%,transparent);opacity:1;} .home #guide .feature-card.guide-tile > .tile-seal{top:22px;left:50%;right:auto;transform:translateX(-50%);width:70px;height:70px;-webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat;} @media (min-width:901px){.home #guide .feature-card.guide-tile::before{height:var(--guide-band,72px);} .home #guide .feature-card.guide-tile > .tile-seal{top:calc((var(--guide-band,72px) - 44px) / 2);width:44px;height:44px;} .home #guide .feature-card.guide-tile{padding-top:calc(var(--guide-band,72px) + var(--sp-2));}} .home #news .news-card:hover{transform:translateY(-3px);border-color:var(--line-gold);box-shadow:var(--shadow-2),0 14px 40px var(--black-a60),inset 0 1px 0 var(--white-a5);} .home #news .news-card:focus-within{transform:translateY(-3px);border-color:var(--line-gold);box-shadow:var(--shadow-2),0 14px 40px var(--black-a60),inset 0 1px 0 var(--white-a5);} .home .news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--sp-4) var(--sp-5);} .home .news-card{position:relative;background:var(--grad-panel);border:1px solid var(--border);border-radius:var(--radius-2);transition:background var(--dur-settled) var(--ease-out),transform var(--dur-settled) var(--ease-out),box-shadow var(--dur-settled) var(--ease-out),border-color var(--dur-settled) var(--ease-out);background-color:var(--bg-deep);background-position:center 52%;background-size:cover;background-repeat:no-repeat;border-color:color-mix(in srgb,var(--gold-dim) 50%,var(--border-subtle));} .home .news-card .news-card-link{background:linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 68%,transparent) 44%,color-mix(in srgb,var(--bg-deep) 4%,transparent) 100%);min-height:214px;display:flex;flex-direction:column;justify-content:end;} .home .news-card:hover{background-color:var(--bg-panel-hover);transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--gold-2-a20);} .home .news-card:focus-within{background-color:var(--bg-panel-hover);transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--gold-2-a20);} .home .news-date{font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-dim);margin-bottom:12px;} .home .news-title{font-size:var(--fs-lead);font-weight:700;color:var(--white);margin-bottom:var(--sp-2);line-height:1.35;} .home .news-body{font-size:var(--fs-body);color:var(--text-secondary);line-height:1.65;max-width:588px;} .home .news-index-link{display:inline;font-size:var(--fs-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright);} .home .news-card-link{display:block;height:100%;min-height:214px;padding:var(--sp-5);color:inherit;text-decoration:none;} .home .news-card-cta{display:inline-block;margin-top:var(--sp-4);font-size:var(--fs-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);} .home .news-card:hover .news-card-cta{color:var(--cream);} .home .news-card:focus-within .news-card-cta{color:var(--cream);} .home .news-card-link:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:4px;} @media(max-width:900px){.home .section{padding: var(--sp-7) var(--gutter);} .home .hero-inner{padding: var(--sp-8) var(--gutter);}} @media(max-width:388px){.home .news-grid{grid-template-columns:minmax(0,1fr);}} @media(min-width:721px){.home .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .home .news-grid .news-card:first-child{grid-column:1 / -1;}} .home .vocation-tile{display:flex;flex-direction:column;} .home .vocation-tile .class-info{flex:1;} .home .class-grid{grid-template-columns:repeat(5,1fr);gap:var(--sp-4);} .home .class-archetype{font-size:var(--fs-caption);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--gold-bright);margin-bottom:var(--sp-1);} .home .class-art{aspect-ratio:auto;display:flex;justify-content:center;} .home .class-info{padding:var(--sp-2) var(--sp-3);text-align:center;} .home .class-name{font-size:var(--fs-body);margin-bottom:2px;} .home .class-desc{font-size:var(--fs-caption);line-height:1.35;} .home #classes .vocation-tile .class-art{height:132px;flex:none;display:flex;align-items:flex-end;justify-content:center;background: radial-gradient(circle at 50% 42%,var(--panel-lift),var(--pit) 72%);} .home #classes{position:relative;isolation:isolate;overflow:visible;background:var(--bg-panel);border-top:1px solid var(--gold-2-a35);} .home #classes::before{content:"";position:absolute;z-index:-1;inset:0;background: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 22%,transparent),var(--bg-panel) 96%);opacity:.98;} .home #classes .section-head{max-width:none;min-height:0;padding-top:0;margin-bottom:var(--sp-4);text-align:left;} .home #classes .class-grid{position:relative;z-index:1;} @media (max-width:620px){.home .class-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;} .home #classes .section-head{min-height:0;padding-top:0;}} .home-community{position:relative;isolation:isolate;overflow:hidden;padding-block: var(--sp-5);background: radial-gradient(72% 110% at 50% 118%,var(--gold-earth-a25),transparent 60%),radial-gradient(130% 80% at 50% -10%,var(--white-a6),transparent 56%),linear-gradient(180deg,var(--panel-lift) 0%,var(--pit) 88%);border-top:1px solid var(--line-gold);box-shadow:inset 0 1px 0 var(--white-a12),inset 0 0 0 1px var(--gold-2-a8),inset 0 -18px 40px var(--black-a40);} .home-community-copy{max-width:530px;} .home #classes .vocation-tile{min-height:210px;background-position:center 20%;background-size:cover;background-repeat:no-repeat;border-color:var(--gold-2-a35);} .home #classes .vocation-tile .class-art{background:radial-gradient(circle at 50% 46%,var(--panel-lift) 0%,var(--pit) 78%);align-items:center;} .home #classes .vocation-tile .class-art::before{content:"";flex:none;width:32px;height:32px;border-radius:var(--radius-2);background-size:32px 32px;background-position:center;background-repeat:no-repeat;border:1px solid color-mix(in srgb,var(--gold-mid) 58%,transparent);box-shadow: inset 0 1px 0 color-mix(in srgb,var(--gold-bright) 22%,transparent),inset 0 -10px 18px color-mix(in srgb,var(--bg-deep) 70%,transparent),0 6px 14px var(--black-a60);transition:transform var(--dur-slow) var(--ease-out),border-color var(--dur-quick) var(--ease-out);} .home #classes .vocation-tile:hover .class-art::before{transform:scale(1.06);border-color:var(--gold-bright);} .home #classes .vocation-tile:focus-visible .class-art::before,.home #classes .vocation-tile:focus-within .class-art::before{transform:scale(1.06);border-color:var(--gold-bright);} .home #classes .vocation-tile .class-info{position:relative;background:none;} @media (min-width:901px){.home #classes .class-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4);}} .home #guide .feature-card.guide-tile{--seal-accent:var(--gold-2);} .home #guide .feature-card.seal-mounts{--seal-accent:var(--blue);} .home #guide .feature-card.seal-dye{--seal-accent:var(--verdant);} .home #guide .feature-card.seal-quests{--seal-accent:var(--lilac);} .home #guide .feature-card.guide-tile::after,.home #play .feature-card.guide-tile::after{display:block;} .home #guide .feature-card.guide-tile > .tile-seal{z-index:2;} .home #guide .feature-card.guide-tile > .feature-title,.home #guide .feature-card.guide-tile > .feature-desc{position:relative;z-index:1;} .home #play .feature-card.guide-tile > .feature-icon,.home #play .feature-card.guide-tile > .feature-title,.home #play .feature-card.guide-tile > .feature-desc{position:relative;z-index:1;} .site-header .site-brand{background:linear-gradient(var(--lantern),var(--gold-bright) 42%,var(--gold-dark));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .home .tile-seal{width:56px;height:56px;-webkit-mask-size:52px 52px;mask-size:52px 52px;background-image:linear-gradient(145deg,var(--waxlight) 0%,var(--gold-bright) 34%,var(--gold-mid) 62%,var(--gold-dark) 100%);background-color:var(--gold-mid);filter: drop-shadow(-1px -1px 0 color-mix(in srgb,var(--waxlight) 70%,transparent)) drop-shadow(1px 1px 0 color-mix(in srgb,var(--gold-dark) 80%,transparent)) drop-shadow(0 4px 8px var(--black-a60)) drop-shadow(0 0 6px color-mix(in srgb,var(--seal-accent,var(--gold-2)) 42%,transparent));transition:background-color var(--dur-settled) var(--ease-out),background-image var(--dur-settled) var(--ease-out),filter var(--dur-quick) var(--ease-out),transform var(--dur-quick) var(--ease-out);} .home .guide-tile:hover .tile-seal{background-image:linear-gradient(145deg,var(--cornsilk) 0%,var(--waxlight) 32%,var(--gold-bright) 58%,var(--gold-mid) 100%);transform:translateY(-1px) scale(1.03);} .home .guide-tile:focus-within .tile-seal{background-image:linear-gradient(145deg,var(--cornsilk) 0%,var(--waxlight) 32%,var(--gold-bright) 58%,var(--gold-mid) 100%);transform:translateY(-1px) scale(1.03);} .home .hero-art{position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 46%;} .home .news-card--art-dispatch{background-image:url('/assets/art/dispatch-feature-v1-1024.webp');} .home .news-card--art-dungeon{background-image:url('/assets/art/dungeon-feature-v1-1024.webp');} .home .news-card--art-battleground{background-image:url('/assets/art/battleground-feature-v1-1024.webp');} .home #classes::before{background: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 22%,transparent),var(--bg-panel) 96%),url('/assets/art/classes-pantheon-v1-1024.webp') center top / cover no-repeat;} .home #classes .vocation-tile{background-image:linear-gradient(180deg,transparent 18%,var(--bg-deep) 100%);} .home #classes .vocation-tile[data-vocation="Guardian"] .class-art::before{background-image:url('/assets/classes/guardian-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Assassin"] .class-art::before{background-image:url('/assets/classes/assassin-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Hexweaver"] .class-art::before{background-image:url('/assets/classes/hexweaver-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Priest"] .class-art::before{background-image:url('/assets/classes/priest-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Berserker"] .class-art::before{background-image:url('/assets/classes/berserker-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Crusader"] .class-art::before{background-image:url('/assets/classes/crusader-icon-32.webp');} .home #classes .vocation-tile[data-vocation="DemonKnight"] .class-art::before{background-image:url('/assets/classes/demonknight-icon-32.webp');} .home #classes .vocation-tile[data-vocation="DragonKnight"] .class-art::before{background-image:url('/assets/classes/dragonknight-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Druid"] .class-art::before{background-image:url('/assets/classes/druid-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Ranger"] .class-art::before{background-image:url('/assets/classes/ranger-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Shadowblade"] .class-art::before{background-image:url('/assets/classes/shadowblade-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Spellblade"] .class-art::before{background-image:url('/assets/classes/spellblade-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Brawler"] .class-art::before{background-image:url('/assets/classes/brawler-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Paladin"] .class-art::before{background-image:url('/assets/classes/paladin-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Warden"] .class-art::before{background-image:url('/assets/classes/warden-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Soulweaver"] .class-art::before{background-image:url('/assets/classes/soulweaver-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Earthguard"] .class-art::before{background-image:url('/assets/classes/earthguard-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Duskbow"] .class-art::before{background-image:url('/assets/classes/duskbow-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Hunter"] .class-art::before{background-image:url('/assets/classes/hunter-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Elementalist"] .class-art::before{background-image:url('/assets/classes/elementalist-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Shadowcaster"] .class-art::before{background-image:url('/assets/classes/shadowcaster-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Illusionist"] .class-art::before{background-image:url('/assets/classes/illusionist-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Infuser"] .class-art::before{background-image:url('/assets/classes/infuser-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Enchanter"] .class-art::before{background-image:url('/assets/classes/enchanter-icon-32.webp');} .home #classes .vocation-tile[data-vocation="Cultist"] .class-art::before{background-image:url('/assets/classes/cultist-icon-32.webp');} .home #guide .feature-card{--guide-band:160px;} .home #guide .section-head{max-width:none;margin-bottom:var(--sp-6);text-align:left;} .home :is(#guide,#classes) .section-title{text-wrap:balance;} .home :is(#guide,#classes) .section-desc{max-width:52ch;margin-inline:0;} .home #classes{padding-block:var(--sp-5);} .home #guide .feature-card:first-child{display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;background: linear-gradient(90deg,var(--bg-deep) 0%,var(--bg-deep) 30%,color-mix(in srgb,var(--bg-deep) 78%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 8%,transparent) 100%),linear-gradient(180deg,transparent 38%,var(--bg-deep) 100%),url('/assets/art/vanguard-mural-v1-1024.webp') right center / cover no-repeat;} .home #guide .feature-card:first-child > .feature-title{font-size:var(--fs-card-title-lead);max-width:20ch;} .home #guide .feature-card:first-child > .feature-desc{max-width:40ch;} .home #guide .feature-card:nth-child(2),.home #guide .feature-card:nth-child(3),.home #guide .feature-card:nth-child(4){background:var(--grad-panel);padding-top:calc(var(--guide-band) + var(--sp-5));} .home #guide .feature-card:nth-child(2)::before,.home #guide .feature-card:nth-child(3)::before,.home #guide .feature-card:nth-child(4)::before{content:"";position:absolute;z-index:0;inset:0 0 auto;height:var(--guide-band);opacity:1;border-bottom:1px solid var(--line-gold);background-size:auto,cover;background-repeat:no-repeat;} .home #guide .feature-card:nth-child(2)::before{background-image:linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),url('/assets/art/dungeon-feature-v1-1024.webp');background-position:center,center 54%;} .home #guide .feature-card:nth-child(3)::before{background-image:linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),url('/assets/art/battleground-feature-v1-1024.webp');background-position:center,center 40%;} .home #guide .feature-card:nth-child(4)::before{background-image:linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),url('/assets/art/hero-home.webp');background-position:center,center 55%;} .home #guide .feature-card:nth-child(2) > .feature-title,.home #guide .feature-card:nth-child(3) > .feature-title,.home #guide .feature-card:nth-child(4) > .feature-title,.home #guide .feature-card:nth-child(2) > .feature-desc,.home #guide .feature-card:nth-child(3) > .feature-desc,.home #guide .feature-card:nth-child(4) > .feature-desc{position:relative;z-index:1;} .home #guide .feature-card:not(:first-child)::after{content:none;} @media (min-width:901px){.home #guide .feature-card{--guide-band:180px;} .home #guide .feature-card:first-child{grid-column:span 2;}} .home #guide .feature-card:nth-child(5){background:var(--grad-panel);padding-top:calc(var(--guide-band) + var(--sp-5));} .home #guide .feature-card:nth-child(5)::before{content:"";position:absolute;z-index:0;inset:0 0 auto;height:var(--guide-band);opacity:1;border-bottom:1px solid var(--line-gold);background-image:linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),url('/assets/art/patchnotes-forge-v1-1024.webp');background-position:center,center 62%;background-size:auto,cover;background-repeat:no-repeat;} .home #guide .feature-card:nth-child(5) > .feature-title,.home #guide .feature-card:nth-child(5) > .feature-desc{position:relative;z-index:1;} .home .guide-ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--sp-4);border:1px solid var(--white-a10);border-radius:var(--radius-2);background:var(--grad-panel);box-shadow:inset 0 1px 0 var(--white-a5);} .home .ledger-tile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-3);align-items:center;padding:var(--sp-4);} .home .ledger-tile + .ledger-tile{border-left:1px solid var(--white-a10);} .home .ledger-tile > .tile-seal{position:static;display:block;grid-row:1;width:44px;height:44px;-webkit-mask-size:40px 40px;mask-size:40px 40px;} .home .ledger-tile > .feature-title{margin:0;padding-bottom:var(--sp-1);background-image:linear-gradient(var(--line-gold),var(--line-gold));background-size:48px 1px;background-position:left bottom;background-repeat:no-repeat;} .home .ledger-tile > .feature-desc{grid-column:1 / -1;margin:var(--sp-2) 0 0;font-size:var(--fs-small);} @media (max-width:900px){.home .guide-ledger{grid-template-columns:1fr;} .home .ledger-tile + .ledger-tile{border-left:0;border-top:1px solid var(--white-a10);}} .home .relic-lede{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:center;max-width:56rem;margin:var(--sp-5) auto 0;padding:var(--sp-4) var(--sp-5);text-align:left;border-top:1px solid color-mix(in srgb,var(--gold-dark) 45%,transparent);border-bottom:1px solid color-mix(in srgb,var(--gold-dark) 45%,transparent);background:radial-gradient(60% 120% at 8% 50%,color-mix(in srgb,var(--gold-bright) 7%,transparent),transparent 70%)} .home .relic-lede-gem{width:clamp(72px,9vw,104px);height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:var(--radius-2);padding:var(--sp-2);background:none;border:1px solid color-mix(in srgb,var(--gold-mid) 58%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gold-bright) 22%,transparent),inset 0 -10px 18px color-mix(in srgb,var(--bg-deep) 70%,transparent),0 6px 14px var(--black-a60);filter:contrast(1.6) brightness(1.06) saturate(1.3)} .home .relic-lede-line{margin:0;font-size:var(--fs-lead);line-height:1.3;color:var(--text-bright);max-width:62ch} .home .relic-lede-fact{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-small);line-height:1.5;color:var(--text-body);max-width:44ch} .home .relic-lede-cta{display:inline;font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold-bright) 45%,transparent);padding-bottom:var(--sp-1);transition:color var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)} .home .relic-lede-cta:hover{color:var(--gold-bright);border-color:var(--gold-bright)} .home .relic-lede-cta:focus-visible{color:var(--gold-bright);border-color:var(--gold-bright)} @media(max-width:640px){.home .relic-lede{grid-template-columns:1fr;justify-items:center;text-align:center;padding:var(--sp-4)}.home .relic-lede-fact{margin-left:auto;margin-right:auto}} .home #classes .vocation-tile{min-height:210px;} .home #classes .class-desc{min-height:calc(3 * 1.35em);} @media (max-width:900px){.home #guide .feature-card.guide-tile{padding-top:calc(118px + var(--sp-2));}} .home #guide .feature-grid{grid-auto-rows:auto;align-items:stretch;} .home #guide .feature-card{height:100%;} .home #guide .feature-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));} .home #guide .feature-desc{font-size:var(--fs-body);margin-top:var(--sp-3);} @supports (background-image: image-set(url("data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=") 1x)){.home .news-card--art-dispatch{background-image:image-set(url('/assets/art/dispatch-feature-v1-640.webp') 1x,url('/assets/art/dispatch-feature-v1-1024.webp') 2x);} .home .news-card--art-dungeon{background-image:image-set(url('/assets/art/dungeon-feature-v1-640.webp') 1x,url('/assets/art/dungeon-feature-v1-1024.webp') 2x);} .home .news-card--art-battleground{background-image:image-set(url('/assets/art/battleground-feature-v1-640.webp') 1x,url('/assets/art/battleground-feature-v1-1024.webp') 2x);} .home #classes::before{background-image: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 22%,transparent),var(--bg-panel) 96%),image-set(url('/assets/art/classes-pantheon-v1-640.webp') 1x,url('/assets/art/classes-pantheon-v1-1440.webp') 2x);} .home #guide .feature-card:first-child{background-image: linear-gradient(90deg,var(--bg-deep) 0%,var(--bg-deep) 30%,color-mix(in srgb,var(--bg-deep) 78%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 8%,transparent) 100%),linear-gradient(180deg,transparent 38%,var(--bg-deep) 100%),image-set(url('/assets/art/vanguard-mural-v1-456.webp') 1x,url('/assets/art/vanguard-mural-v1-1024.webp') 2x);} .home #guide .feature-card:nth-child(2)::before{background-image: linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),image-set(url('/assets/art/dungeon-feature-v1-456.webp') 1x,url('/assets/art/dungeon-feature-v1-1024.webp') 2x);} .home #guide .feature-card:nth-child(3)::before{background-image: linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),image-set(url('/assets/art/battleground-feature-v1-456.webp') 1x,url('/assets/art/battleground-feature-v1-1024.webp') 2x);} .home #guide .feature-card:nth-child(4)::before{background-image: linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),image-set(url('/assets/art/hero-home-456.webp') 1x,url('/assets/art/hero-home.webp') 2x);} .home #classes .vocation-tile[data-vocation="Guardian"] .class-art::before{background-image:image-set(url('/assets/classes/guardian-icon-32.webp') 1x,url('/assets/classes/guardian-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Assassin"] .class-art::before{background-image:image-set(url('/assets/classes/assassin-icon-32.webp') 1x,url('/assets/classes/assassin-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Hexweaver"] .class-art::before{background-image:image-set(url('/assets/classes/hexweaver-icon-32.webp') 1x,url('/assets/classes/hexweaver-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Priest"] .class-art::before{background-image:image-set(url('/assets/classes/priest-icon-32.webp') 1x,url('/assets/classes/priest-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Berserker"] .class-art::before{background-image:image-set(url('/assets/classes/berserker-icon-32.webp') 1x,url('/assets/classes/berserker-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Crusader"] .class-art::before{background-image:image-set(url('/assets/classes/crusader-icon-32.webp') 1x,url('/assets/classes/crusader-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="DemonKnight"] .class-art::before{background-image:image-set(url('/assets/classes/demonknight-icon-32.webp') 1x,url('/assets/classes/demonknight-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="DragonKnight"] .class-art::before{background-image:image-set(url('/assets/classes/dragonknight-icon-32.webp') 1x,url('/assets/classes/dragonknight-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Druid"] .class-art::before{background-image:image-set(url('/assets/classes/druid-icon-32.webp') 1x,url('/assets/classes/druid-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Ranger"] .class-art::before{background-image:image-set(url('/assets/classes/ranger-icon-32.webp') 1x,url('/assets/classes/ranger-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Shadowblade"] .class-art::before{background-image:image-set(url('/assets/classes/shadowblade-icon-32.webp') 1x,url('/assets/classes/shadowblade-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Spellblade"] .class-art::before{background-image:image-set(url('/assets/classes/spellblade-icon-32.webp') 1x,url('/assets/classes/spellblade-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Brawler"] .class-art::before{background-image:image-set(url('/assets/classes/brawler-icon-32.webp') 1x,url('/assets/classes/brawler-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Paladin"] .class-art::before{background-image:image-set(url('/assets/classes/paladin-icon-32.webp') 1x,url('/assets/classes/paladin-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Warden"] .class-art::before{background-image:image-set(url('/assets/classes/warden-icon-32.webp') 1x,url('/assets/classes/warden-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Soulweaver"] .class-art::before{background-image:image-set(url('/assets/classes/soulweaver-icon-32.webp') 1x,url('/assets/classes/soulweaver-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Earthguard"] .class-art::before{background-image:image-set(url('/assets/classes/earthguard-icon-32.webp') 1x,url('/assets/classes/earthguard-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Duskbow"] .class-art::before{background-image:image-set(url('/assets/classes/duskbow-icon-32.webp') 1x,url('/assets/classes/duskbow-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Hunter"] .class-art::before{background-image:image-set(url('/assets/classes/hunter-icon-32.webp') 1x,url('/assets/classes/hunter-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Elementalist"] .class-art::before{background-image:image-set(url('/assets/classes/elementalist-icon-32.webp') 1x,url('/assets/classes/elementalist-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Shadowcaster"] .class-art::before{background-image:image-set(url('/assets/classes/shadowcaster-icon-32.webp') 1x,url('/assets/classes/shadowcaster-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Illusionist"] .class-art::before{background-image:image-set(url('/assets/classes/illusionist-icon-32.webp') 1x,url('/assets/classes/illusionist-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Infuser"] .class-art::before{background-image:image-set(url('/assets/classes/infuser-icon-32.webp') 1x,url('/assets/classes/infuser-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Enchanter"] .class-art::before{background-image:image-set(url('/assets/classes/enchanter-icon-32.webp') 1x,url('/assets/classes/enchanter-icon-64.webp') 2x);} .home #classes .vocation-tile[data-vocation="Cultist"] .class-art::before{background-image:image-set(url('/assets/classes/cultist-icon-32.webp') 1x,url('/assets/classes/cultist-icon-64.webp') 2x);} .home #guide .feature-card.guide-tile::before{background-image: radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--seal-accent,var(--gold-2)) 18%,transparent),transparent 64%),linear-gradient(180deg,color-mix(in srgb,var(--panel-deep) 38%,transparent),transparent 88%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 66%,transparent),color-mix(in srgb,var(--bg-deep) 82%,transparent)),image-set(url('/assets/art/tile-material-iron-128.webp') 1x,url('/assets/art/tile-material-iron-256.webp') 2x);} @media (min-width:621px){.home #classes::before{background-image: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 22%,transparent),var(--bg-panel) 96%),image-set(url('/assets/art/classes-pantheon-v1-1024.webp') 1x,url('/assets/art/classes-pantheon-v1.webp') 2x);}} @media (min-width:721px){.home .news-card--art-dispatch{background-image:image-set(url('/assets/art/dispatch-feature-v1-lead1280.webp') 1x,url('/assets/art/dispatch-feature-v1-1440.webp') 2x);}} @media (min-width:721px) and (max-width:1099px){.home #guide .feature-card:first-child{background-image: linear-gradient(90deg,var(--bg-deep) 0%,var(--bg-deep) 30%,color-mix(in srgb,var(--bg-deep) 78%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 8%,transparent) 100%),linear-gradient(180deg,transparent 38%,var(--bg-deep) 100%),image-set(url('/assets/art/vanguard-mural-v1-1024.webp') 1x,url('/assets/art/vanguard-mural-v1.webp') 2x);} .home #guide .feature-card:nth-child(2)::before{background-image: linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),image-set(url('/assets/art/dungeon-feature-v1-1024.webp') 1x,url('/assets/art/dungeon-feature-v1.webp') 2x);} .home #guide .feature-card:nth-child(3)::before{background-image: linear-gradient(180deg,transparent 55%,var(--bg-deep) 100%),image-set(url('/assets/art/battleground-feature-v1-1024.webp') 1x,url('/assets/art/battleground-feature-v1.webp') 2x);}} @media (min-width:1100px){.home .news-card--art-dungeon{background-image:image-set(url('/assets/art/dungeon-feature-v1-card592.webp') 1x,url('/assets/art/dungeon-feature-v1-card1184.webp') 2x);} .home .news-card--art-battleground{background-image:image-set(url('/assets/art/battleground-feature-v1-card592.webp') 1x,url('/assets/art/battleground-feature-v1-card1184.webp') 2x);} .home #classes::before{background-image: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 22%,transparent),var(--bg-panel) 96%),image-set(url('/assets/art/classes-pantheon-v1-1440x620.webp') 1x,url('/assets/art/classes-pantheon-v1.webp') 2x);} .home #guide .feature-card:first-child{background-image: linear-gradient(90deg,var(--bg-deep) 0%,var(--bg-deep) 30%,color-mix(in srgb,var(--bg-deep) 78%,transparent) 52%,color-mix(in srgb,var(--bg-deep) 8%,transparent) 100%),linear-gradient(180deg,transparent 38%,var(--bg-deep) 100%),image-set(url('/assets/art/vanguard-mural-v1-lead1024.webp') 1x,url('/assets/art/vanguard-mural-v1-lead1672.webp') 2x);}} @media (min-width:1400px){.home #classes::before{background-image: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 22%,transparent),var(--bg-panel) 96%),image-set(url('/assets/art/classes-pantheon-v1-1440x470.webp') 1x,url('/assets/art/classes-pantheon-v1.webp') 2x);}} @media (min-width:721px) and (min-resolution:1.5dppx){.home .news-card--art-dispatch{background-image: linear-gradient(90deg,var(--bg-deep) 42%,transparent 60%),image-set(url('/assets/art/dispatch-feature-v1-lead1280.webp') 2x);background-size: auto,auto;background-position: 0 0,right 52%;}} @media (min-width:621px) and (min-resolution:1.5dppx){.home #classes::before{background-image: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 22%,transparent),var(--bg-panel) 96%),image-set(url('/assets/art/classes-pantheon-v1.webp') 2x);background-size: auto,auto,auto;background-position: 0 0,0 0,100% 0;}} @media (min-width:2100px){.home #classes::before{background-image: linear-gradient(90deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 86%,transparent) 40%,color-mix(in srgb,var(--bg-deep) 18%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 22%,transparent),var(--bg-panel) 96%),image-set(url('/assets/art/classes-pantheon-v1-1440x470.webp') 1x);background-size: auto,auto,auto;background-position: 0 0,0 0,100% 0;}}} .home .home-compendium{isolation: isolate;background: var(--bg-panel);border-top:1px solid var(--game-hairline);} .home .home-compendium::before{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;background: linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 92%,transparent) 0px,color-mix(in srgb,var(--bg-deep) 60%,transparent) 34px,color-mix(in srgb,var(--bg-deep) 20%,transparent) 104px,transparent 190px),radial-gradient(96% 300px at 78% 42%,color-mix(in srgb,var(--ember) 26%,transparent) 0%,color-mix(in srgb,var(--ember) 8%,transparent) 48%,transparent 80%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 84%,transparent),color-mix(in srgb,var(--bg-deep) 91%,transparent)),image-set(url('/assets/art/tile-material-iron-128.webp') 1x,url('/assets/art/tile-material-iron-256.webp') 2x);background-size: auto,auto,auto,128px 128px;background-repeat: no-repeat,no-repeat,no-repeat,repeat;} .home #guide{isolation: isolate;} .home #guide::before{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;background: linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 91%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 88%,transparent) 45%,color-mix(in srgb,var(--bg-deep) 94%,transparent) 100%),image-set(url('/assets/art/tile-material-iron-128.webp') 1x,url('/assets/art/tile-material-iron-256.webp') 2x);background-size: auto,128px 128px;background-repeat: no-repeat,repeat;} .home-compendium .compendium-grid{display: grid;grid-template-columns: minmax(0,1fr);gap: var(--sp-3);} .home-compendium .compendium-lockup{text-align: left;max-width: 68ch;} body.home #compendium{padding-block:var(--sp-5);} .home-compendium .compendium-figures{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: var(--sp-2);margin: 0;padding: 0;list-style: none;} .home-compendium .compendium-figures > li{margin: 0;min-width: 0;} .home-compendium .compendium-figure{display: flex;flex-direction: column;justify-content: center;min-height: 72px;min-width: 0;padding: var(--sp-2);border: 1px solid var(--border);border-image: var(--game-frame) 1;border-radius: var(--radius-1);background: linear-gradient(180deg,var(--bg-3),var(--bg-2) 55%,var(--bg-deep));box-shadow: var(--game-rim),var(--shadow-1);color: var(--text-primary);text-decoration: none;transition: border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out);} .home-compendium .compendium-figure:hover{border-image: var(--game-frame-selected) 1;} .home-compendium .compendium-figure:active{box-shadow: var(--shadow-press);} .home-compendium .compendium-figure:focus-visible{outline: 2px solid var(--gold-bright);outline-offset: var(--focus-offset);} .home-compendium .cf-n{display: block;font-size: var(--fs-body);font-family: var(--font-display);font-weight: var(--fw-display);font-synthesis: none;line-height: var(--lh-tight);font-variant-numeric: tabular-nums;letter-spacing: var(--ls-tight);color: var(--gold-bright);} .home-compendium .cf-l{display: block;margin-top: var(--sp-1);padding-top: var(--sp-1);font-size: var(--fs-caption);font-weight: 700;text-transform: uppercase;letter-spacing: var(--tr-label);color: var(--game-ink);overflow-wrap: anywhere;background: linear-gradient(90deg,color-mix(in srgb,var(--game-ink) 44%,transparent) 0%,color-mix(in srgb,var(--game-ink) 12%,transparent) 48%,transparent 84%) top left / min(100%,12ch) 1px no-repeat;} .home-compendium .cf-l:only-child{margin-top: 0;padding-top: 0;background: none;} @media (min-width: 600px){.home-compendium .compendium-figures{grid-template-columns: repeat(4,minmax(0,1fr));}} @media (min-width: 1200px){.home-compendium .compendium-figures{grid-template-columns: repeat(8,minmax(0,1fr));}} .home #classes .class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-4);max-width:none;margin:0;} .home #classes .class-discipline{min-width:0;} .home #classes .class-discipline[hidden]{display:none;} .home #classes .class-grid.has-discipline-selector{grid-template-columns:minmax(0,1fr);} .home .discipline-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin-bottom:var(--sp-5);} .home .discipline-selector .btn{min-width:0;min-height:44px;padding:var(--sp-2);font-size:var(--fs-small);text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;} .home .discipline-selector .btn:last-child:nth-child(odd){grid-column:1 / -1;} .home .discipline-selector .btn[aria-pressed="true"]{color:var(--game-ink);border-color:var(--game-ink);background:var(--game-row);} .home .home-faq-list summary:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;} .home #classes .class-discipline-title{margin:0 0 var(--sp-2);padding-bottom:var(--sp-1);border-bottom:1px solid var(--sand-gold-line);color:var(--sand-gold);font-family:var(--font-body);font-size:var(--fs-small);font-weight:400;text-align:left;} .home #classes .class-discipline > .vocation-tile{display:flex;flex-direction:row;align-items:center;gap:var(--sp-2);break-inside:avoid;width:100%;max-width:none;min-width:0;min-height:44px;margin-bottom:var(--sp-1);padding:var(--sp-1);background:none;border:1px solid transparent;box-shadow:none;overflow:visible;text-align:left;cursor:pointer;} .home #classes .vocation-tile:hover,.home #classes .vocation-tile:focus-within{transform:none;border-color:transparent;box-shadow:none;} .home #classes .class-discipline > .vocation-tile:not(:disabled):hover{background:var(--game-row);border-color:var(--game-hairline);} .home #classes .vocation-tile::after{content:none;} .home #classes .vocation-tile .class-art{flex:0 0 32px;width:32px;height:auto;background:none;display:block;overflow:visible;} .home #classes .vocation-tile .class-art::before{display:block;margin:0 auto;width:100%;height:auto;aspect-ratio:1;background-size:cover;border-radius:var(--radius-2);border:1px solid var(--gold-2-a35);box-shadow:var(--shadow-emblem-well);transition:transform var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out);} .home #classes .vocation-tile:hover .class-art::before,.home #classes .vocation-tile:focus-visible .class-art::before{transform:translateY(-2px);border-color:var(--game-text-secondary);box-shadow:var(--shadow-emblem-well);} .home #classes .vocation-tile.is-active .class-art::before{border-color:var(--game-text-secondary);box-shadow:0 0 0 2px var(--game-hairline);} .home #classes .vocation-tile:focus-visible{outline:2px solid var(--game-text-secondary);outline-offset:var(--focus-offset);} .home #classes .class-discipline > .vocation-tile{appearance:none;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;} .home #classes .vocation-tile.is-active{background:var(--game-row);border-color:var(--game-hairline);box-shadow:var(--shadow-tile-rail-muted);} @media (forced-colors: active){.home #classes .vocation-tile.is-active{border-color:Highlight;}} .home #classes .class-discipline > .vocation-tile[disabled]{cursor:default;opacity:.55;} .home #classes .class-discipline > .vocation-tile[disabled]:hover .class-art::before{transform:none;border-color:var(--gold-2-a35);box-shadow:var(--shadow-emblem-well);} .home #classes .class-discipline > .vocation-tile[disabled]:hover .class-name{color:var(--text-secondary);} .home #classes .class-info{min-width:0;padding:0;text-align:left;} .home #classes .class-archetype,.home #classes .class-desc{display:none;} .home #classes .class-name{font-size:var(--fs-caption);font-weight:700;white-space:normal;line-height:1.35;color:var(--text-secondary);margin:0;overflow-wrap:anywhere;} .home #classes .vocation-tile.is-active .class-name,.home #classes .vocation-tile:hover .class-name{color:var(--game-text);} .home .relic-layout{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--sp-5);align-items:start;} .home .relic-wall-col{min-width:0;padding:var(--sp-4);background:var(--grad-panel);border:1px solid var(--border);border-radius:var(--radius-2);} .home .relic-board{min-width:0;background:var(--grad-panel);border:1px solid var(--line-gold);border-radius:var(--radius-2);box-shadow:inset 0 1px 0 var(--white-a5),0 18px 44px var(--black-a60);} .home .relic-board > .relic-briefing{padding:var(--sp-4);} .home .relic-board .relic-panel-head{padding-right:0;} .home .relic-wall-hint{max-width:52ch;margin:var(--sp-2) 0 0;text-align:left;color:var(--text-secondary);font-size:var(--fs-small);} .home .relic-panel-head{display:flex;align-items:center;gap:var(--sp-4);padding-bottom:var(--sp-4);padding-right:var(--sp-6);border-bottom:1px solid var(--border);} .home .relic-panel-sigil{flex:none;display:block;padding:6px;background:radial-gradient(circle at 50% 40%,var(--panel-lift),var(--pit) 78%);border:1px solid var(--gold-2-a35);border-radius:var(--radius-2);box-shadow:inset 0 1px 0 var(--white-a5),0 6px 14px var(--black-a60);} .home .relic-panel-mark{display:block;width:72px;height:72px;} .home .relic-panel-class{font-size:var(--fs-h3);color:var(--gold-bright);margin:0;} .home .relic-panel-meta{font-size:var(--fs-caption);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary);margin:0 0 2px;} .home .relic-panel-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);align-items:start;margin-top:var(--sp-4);} .home .relic-panel-aside{text-align:left;padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);} .home .relic-panel-book{min-width:0;} .home .relic-panel-book > .relic-panel-label:first-child{margin-top:0;} .home .relic-panel-role{margin:0;color:var(--text-primary);line-height:1.6;max-width:560px;} .home .relic-panel-relic{margin:var(--sp-3) 0 0;color:var(--text-secondary);font-size:var(--fs-small);} .home .relic-panel-relic-label{font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--gold-bright);} .home .relic-panel-label{margin:var(--sp-5) 0 var(--sp-3);font-size:var(--fs-caption);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--gold-bright);} .home .relic-panel-spells{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--sp-3);counter-reset:none;} .home .relic-spell{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3);background:var(--game-deep);border:1px solid var(--border);border-radius:var(--radius-2);transition:border-color var(--dur-quick) var(--ease-out),background-color var(--dur-quick) var(--ease-out);} .home .relic-spell:hover{border-color:var(--game-ink-dim);} .home .relic-spell-plate{position:relative;flex:none;width:48px;height:48px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,var(--panel-lift),var(--pit) 80%);border:1px solid var(--gold-2-a35);border-radius:var(--radius-2);box-shadow:inset 0 1px 0 var(--white-a5),inset 0 -8px 14px var(--black-a60);} .home .relic-spell-plate img{display:block;width:32px;height:32px;border-radius:var(--radius-2);} .home .relic-spell-slot{position:absolute;bottom:-1px;right:-1px;min-width:15px;padding:0 3px;font-size:var(--fs-caption);font-weight:700;line-height:14px;text-align:center;color:var(--gold-bright);background:var(--bg-deep);border:1px solid var(--gold-2-a35);border-radius:var(--radius-1);} .home .relic-spell-plate.is-unpainted .relic-spell-slot{position:static;font-size:var(--fs-caption);line-height:1;min-width:0;padding:0;border:0;background:none;color:var(--text-secondary);} .home .relic-spell-text{display:block;min-width:0;} .home .relic-spell-name{display:block;font-size:var(--fs-body);font-weight:700;color:var(--game-ink);line-height:1.3;} .home .relic-spell-note{display:block;margin-top:var(--sp-1);font-size:var(--fs-small);font-weight:400;line-height:1.55;color:var(--text-secondary);} .home .relic-spell-cooldown{display:block;margin-top:var(--sp-2);font-size:var(--fs-caption);line-height:1.5;font-variant-numeric:tabular-nums;color:var(--gold-bright);} .home .relic-panel-count{margin-left:var(--sp-2);font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-secondary);} .home .relic-panel-foot{margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--border);font-size:var(--fs-small);color:var(--text-secondary);} @media (max-width:1080px){.home .relic-layout{grid-template-columns:minmax(0,280px) minmax(0,1fr);}} @media (max-width:900px){.home .relic-layout{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);} .home .relic-wall-hint{margin-left:auto;margin-right:auto;text-align:center;}} @media (max-width:620px){.home .relic-panel-spells{grid-template-columns:1fr;} .home .relic-wall-col{padding:var(--sp-2);}}