:root{
    --bg:#121610;
    --surface:#1b2018;
    --surface-raised:#23291e;
    --line:#343b2e;
    --text:#f5f3e9;
    --muted:#adb5a3;
    --gold:#efbd57;
    --gold-light:#ffda85;
    --green:#a7c780;
    --max:1200px;
    --heading:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
    --body:'Barlow','Segoe UI',sans-serif;
    color-scheme:dark
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:100px
}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.65 var(--body);
    -webkit-font-smoothing:antialiased
}
a{
    color:inherit;
    text-decoration:none
}
button,input,select{
    font:inherit
}
button,a,input,select{
    touch-action:manipulation
}
button{
    cursor:pointer
}
img{
    max-width:100%;
    display:block
}
h1,h2,h3,p{
    margin-top:0
}
h1,h2,h3{
    line-height:1.08;
    letter-spacing:-.02em
}
h1,h2{
    font-family:var(--heading);
    font-weight:700
}
h2{
    font-size:clamp(34px,3.6vw,49px)
}
h3{
    font-size:24px
}
p{
    color:var(--muted)
}
em{
    font-style:normal;
    color:var(--gold)
}
::selection{
    background:var(--gold);
    color:var(--bg)
}
:focus-visible{
    outline:3px solid var(--gold-light);
    outline-offset:5px
}
.page-shell{
    width:min(var(--max),calc(100% - 80px));
    margin-inline:auto
}
.eyebrow,.page-kicker{
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--gold);
    margin-bottom:18px
}
.text-link{
    font-weight:600;
    color:var(--gold);
    display:inline-flex;
    gap:14px;
    align-items:center
}
.text-link:hover{
    color:var(--gold-light);
    text-decoration:underline;
    text-underline-offset:5px
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    min-height:46px;
    padding:12px 22px;
    border-radius:5px;
    border:1px solid transparent;
    font-weight:700;
    font-size:14px;
    line-height:1.35;
    transition:background .18s,transform .18s;
    color:var(--text);
    white-space:normal;
    text-align:center
}
.button:hover{
    transform:translateY(-2px)
}
.button-primary{
    background:var(--gold);
    border-color:var(--gold);
    color:#272013;
    box-shadow:0 3px 0 #9c7231
}
.button-primary:hover{
    background:var(--gold-light);
    border-color:var(--gold-light)
}
.button-secondary{
    background:var(--surface-raised);
    border-color:var(--line)
}
.button-secondary:hover{
    background:#303929
}
.button-glass{
    background:#1e231a66;
    border-color:#ffffff4a;
    color:#fff;
    backdrop-filter:blur(8px)
}
.button-glass:hover{
    background:#ffffff20
}
.skip-link{
    position:fixed;
    top:-100px;
    left:20px;
    padding:12px 20px;
    background:var(--gold);
    color:#151910;
    z-index:100
}
.skip-link:focus{
    top:15px
}
.visually-hidden{
    position:absolute!important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.site-header{
    height:88px;
    background:#151910f5;
    border-bottom:1px solid #ffffff0d;
    position:relative;
    z-index:20
}
.header-inner{
    width:min(1340px,calc(100% - 64px));
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.brand{
    display:flex;
    align-items:center;
    gap:11px;
    font-size:21px;
    font-weight:800;
    letter-spacing:1.3px;
    line-height:1.15
}
.brand img{
    object-fit:contain;
    width:60px;
    height:60px
}
.brand-sub{
    font-family:var(--body);
    font-size:8px;
    letter-spacing:2.2px;
    color:var(--muted);
    display:block;
    margin-top:7px
}
.main-nav{
    display:flex;
    gap:34px;
    align-items:center;
    height:100%;
    font-size:14px;
    font-weight:600
}
.main-nav>a{
    display:flex;
    align-items:center;
    gap:6px;
    height:100%;
    position:relative;
    color:#c8cebf;
    white-space:nowrap
}
.main-nav>a:hover,.main-nav>a[aria-current=page]{
    color:var(--gold)
}
.main-nav>a[aria-current=page]:after{
    content:'';
    position:absolute;
    height:3px;
    background:var(--gold);
    bottom:0;
    left:0;
    right:0
}
.external-arrow{
    color:#859077
}
.header-join{
    min-height:42px;
    padding:11px 20px
}
.menu-toggle{
    display:none
}
.home-hero{
    position:relative;
    min-height:655px;
    isolation:isolate;
    overflow:hidden
}
.hero-background{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 56%;
    z-index:-3
}
.hero-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#0a100ced 0%,#0b120bab 40%,#0b130d26 75%),linear-gradient(0deg,#121610 0%,transparent 25%,#0f160e22 80%);
    z-index:-2
}
.hero-content{
    min-height:565px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding-top:34px
}
.hero-copy{
    position:relative;
    z-index:1;
    max-width:650px
}
.hero-copy .eyebrow{
    font-size:11px;
    letter-spacing:2.8px;
    display:flex;
    align-items:center;
    gap:10px
}
.tiny-block{
    display:block;
    width:8px;
    height:8px;
    background:var(--gold);
    box-shadow:0 0 16px #e7b85255
}
.hero-copy h1{
    font-size:clamp(70px,7.7vw,112px);
    letter-spacing:-2px;
    line-height:.99;
    margin-bottom:25px;
    font-weight:800
}
.hero-description{
    color:#d4d7c9;
    line-height:1.7;
    font-size:17px;
    margin-bottom:28px
}
.hero-actions{
    display:flex;
    gap:14px;
    align-items:stretch
}
.copy-ip{
    text-align:left;
    gap:14px;
    padding:14px 20px
}
.copy-ip small{
    display:block;
    font-size:12px;
    font-weight:500;
    margin-top:4px;
    opacity:.8
}
.play-icon{
    font-size:18px
}
.copy-icon{
    margin-left:12px;
    font-size:21px;
    opacity:.7
}
.hero-footnote{
    font-size:9px;
    letter-spacing:1.7px;
    color:#b5bea7;
    margin-top:20px
}
.hero-footnote span{
    padding:0 10px;
    color:var(--gold)
}
.hero-logo{
    width:clamp(260px,32vw,410px);
    height:auto;
    filter:drop-shadow(0 16px 35px #000b);
    transform:rotate(-3deg);
    margin-top:30px
}
.hero-bottom{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:25px;
    border-top:1px solid #bdc4ac26;
    margin-top:15px;
    font-size:12px;
    color:#bbc2af
}
.hero-bottom>a{
    font-size:10px;
    letter-spacing:2px;
    font-weight:600;
    display:flex;
    gap:25px
}
.hero-bottom>a:hover{
    color:var(--gold)
}
.hero-bottom>a span{
    color:var(--gold);
    font-size:18px
}
.world-section{
    padding-block:78px
}
.section-intro{
    display:flex;
    justify-content:space-between;
    gap:50px;
    align-items:flex-end;
    margin-bottom:30px
}
.section-intro>div{
    flex:1
}
.section-intro h2{
    margin:0
}
.section-intro>p{
    max-width:385px;
    font-size:14px;
    line-height:1.8;
    margin-bottom:0
}
.world-grid{
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:22px
}
.world-tile{
    position:relative;
    min-height:310px;
    overflow:hidden;
    border-radius:7px;
    border:1px solid #ffffff12
}
.world-tile>img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    transition:transform .6s
}
.world-tile:hover>img{
    transform:scale(1.035)
}
.world-tile:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#0c120cdd,transparent 85%)
}
.world-tile-overlay{
    position:absolute;
    left:26px;
    bottom:25px;
    right:26px;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px
}
.world-tile-overlay small{
    display:block;
    font-size:10px;
    letter-spacing:2px;
    color:var(--gold);
    margin-bottom:9px;
    font-weight:600
}
.world-tile-overlay strong{
    font-size:28px;
    font-family:var(--heading);
    font-weight:600;
    line-height:1.15;
    display:block
}
.circle-arrow{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border:1px solid #ffffff60;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:21px;
    transition:background .2s
}
.world-tile:hover .circle-arrow{
    background:var(--gold);
    color:var(--bg);
    border-color:var(--gold)
}
.world-caption{
    display:flex;
    justify-content:space-between;
    margin-top:17px;
    font-size:12px;
    color:#87937e
}
.world-caption a{
    font-size:12px
}
.arena-feature{
    border-block:1px solid #ffffff0b;
    background:radial-gradient(ellipse at 20% 70%,#43532a13,transparent 60%),#191e15
}
.arena-feature-inner{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:105px;
    padding-block:72px;
    align-items:center
}
.arena-feature h2{
    font-size:60px;
    line-height:1.04;
    margin-bottom:25px
}
.arena-feature-copy>p:not(.eyebrow){
    font-size:15px;
    max-width:390px;
    margin-bottom:28px
}
.arena-feature-copy .eyebrow>span{
    font-size:19px;
    padding-right:8px
}
.feature-secondary{
    display:block;
    margin-top:21px;
    font-size:13px
}
.leaderboard-preview{
    background:#20261b;
    border:1px solid #3d4732;
    border-radius:8px;
    padding:27px 30px 0;
    box-shadow:0 12px 50px #00000017
}
.preview-heading{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.preview-heading .eyebrow{
    font-size:10px;
    letter-spacing:2px;
    margin:0
}
.preview-heading a{
    font-size:22px;
    color:#c3cdb5
}
.leaderboard-preview h3{
    font-family:var(--heading);
    font-size:32px;
    line-height:1.2;
    margin-top:14px;
    margin-bottom:32px
}
.preview-label{
    display:flex;
    justify-content:space-between;
    font-size:9px;
    color:#97a38b;
    letter-spacing:1.3px;
    margin-bottom:10px
}
.preview-player{
    display:flex;
    gap:14px;
    align-items:center;
    border-top:1px solid #3c4433;
    padding:18px 0
}
.preview-player:hover{
    background:#ffffff04
}
.preview-rank{
    color:var(--gold);
    font-size:14px;
    font-weight:600;
    min-width:20px
}
.player-avatar{
    display:block;
    flex-shrink:0;
    width:34px;
    height:34px;
    object-fit:cover;
    image-rendering:pixelated;
    background:#3d4c2b url('/images/default-player.svg') center/cover;
    border:1px solid #5c7041;
    border-radius:4px
}
.preview-player .player-avatar{
    width:36px;
    height:36px
}
.player-heading{
    display:flex;
    align-items:center;
    gap:20px;
    margin-block:16px
}
.player-heading h1{
    margin:0;
    overflow-wrap:anywhere
}
.player-heading .player-avatar{
    width:72px;
    height:72px;
    border-radius:6px
}
.preview-player-name{
    font-size:14px;
    font-weight:600;
    flex:1;
    min-width:0;
    overflow-wrap:anywhere
}
.preview-player-name small{
    display:block;
    font-size:10px;
    font-weight:400;
    color:#99a58c;
    margin-top:3px
}
.preview-player>strong{
    font-size:19px;
    font-family:var(--heading);
    font-weight:600;
    color:#e8ecd7;
    white-space:nowrap
}
.preview-status{
    display:flex;
    align-items:center;
    gap:8px;
    border-top:1px solid #3c4433;
    font-size:10px;
    color:#a8b299;
    margin-top:12px;
    padding:19px 0
}
.preview-status>span:last-child{
    margin-left:auto;
    color:var(--gold)
}
.status-dot{
    width:6px;
    height:6px;
    background:var(--gold);
    border-radius:50%;
    display:inline-block;
    flex-shrink:0
}
.preview-empty{
    text-align:center;
    padding:15px 12px
}
.preview-empty>span{
    font-size:35px;
    color:var(--gold);
    display:block
}
.preview-empty>strong{
    display:block
}
.preview-empty p{
    font-size:13px;
    margin-top:12px
}
.join-strip{
    padding-block:68px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px
}
.join-strip .eyebrow{
    font-size:10px
}
.join-strip h2{
    font-size:40px;
    margin-bottom:15px
}
.join-strip p:not(.eyebrow){
    font-size:14px;
    margin-bottom:0
}
.join-strip>div:last-child{
    min-width:315px
}
.server-copy{
    display:block;
    border:1px solid #746036;
    border-radius:5px;
    background:#2c2c1b;
    padding:16px 24px;
    text-align:left;
    color:var(--gold);
    width:100%
}
.server-copy:hover{
    background:#373523;
    border-color:var(--gold)
}
.server-copy small{
    display:block;
    color:#b4aa85;
    font-size:9px;
    letter-spacing:1.6px;
    margin-bottom:7px
}
.server-copy>span{
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-weight:700;
    font-size:21px;
    line-height:1.3;
    overflow-wrap:anywhere
}
.server-copy>span>span{
    font-size:17px;
    align-self:center;
    color:#baad76
}
.join-strip>div>a{
    display:block;
    text-align:center;
    font-size:11px;
    color:var(--muted);
    margin-top:13px
}
.join-strip>div>a:hover{
    color:var(--gold)
}
.site-footer{
    border-top:1px solid #30372a;
    background:#0e120d
}
.footer-main{
    display:flex;
    justify-content:space-between;
    padding-block:38px;
    align-items:center;
    gap:30px
}
.footer-brand{
    font-size:21px;
    font-weight:800;
    letter-spacing:1.3px
}
.footer-brand span{
    font-size:10px;
    color:var(--gold);
    background:#2a301e;
    border:1px solid #454d34;
    border-radius:3px;
    vertical-align:middle;
    margin-left:10px;
    padding:3px 6px
}
.footer-main p{
    font-size:12px;
    margin:8px 0 0;
    color:#8a9680
}
.footer-main nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:12px 24px;
    max-width:720px;
    font-size:12px;
    color:#b0b8a6
}
.footer-main nav a:hover{
    color:var(--gold)
}
.footer-bottom{
    border-top:1px solid #292e24;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-block:20px;
    color:#8c9682;
    font-size:10px
}
.toast{
    position:fixed;
    bottom:25px;
    left:50%;
    transform:translate(-50%,20px);
    max-width:calc(100% - 32px);
    width:max-content;
    background:var(--gold-light);
    color:#201c13;
    padding:13px 24px;
    border-radius:6px;
    box-shadow:0 8px 30px #0007;
    z-index:100;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s,transform .2s;
    font-size:14px;
    font-weight:600
}
.toast.is-visible{
    opacity:1;
    transform:translate(-50%,0)
}
.arena-page,.join-page,.prose-page{
    padding-block:52px 72px;
    min-height:65vh
}
.page-heading{
    font-size:clamp(42px,5vw,64px);
    margin-bottom:16px
}
.page-kicker{
    font-size:11px;
    margin-bottom:15px
}
.page-lede{
    max-width:760px;
    line-height:1.75;
    margin-bottom:28px
}
.arena-subnav{
    display:flex;
    gap:25px;
    border-bottom:1px solid var(--line);
    margin:28px 0 22px;
    overflow-x:auto;
    padding:0 2px;
    white-space:nowrap
}
.arena-subnav a{
    padding:12px 0 15px;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    border-bottom:3px solid transparent
}
.arena-subnav a[aria-current=page],.arena-subnav a.active{
    color:var(--gold);
    border-bottom-color:var(--gold)
}
.arena-subnav a:hover{
    color:var(--text)
}
.arena-status-strip{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    border:1px solid #53503a;
    background:#302d1b55;
    padding:12px 16px;
    border-radius:5px;
    font-size:12px;
    color:#c9c3a5;
    margin-bottom:26px
}
.arena-status-strip p{
    margin:0;
    color:inherit
}
.arena-status-strip a{
    color:var(--gold);
    text-decoration:underline;
    text-underline-offset:4px
}
.arena-status-strip .text-link{
    margin-left:auto
}
.stat-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface);
    margin:24px 0 35px;
    overflow:hidden
}
.stat-item{
    padding:25px;
    border-right:1px solid var(--line);
    min-width:0
}
.stat-item:last-child{
    border:0
}
.stat-label{
    display:block;
    font-size:11px;
    letter-spacing:.3px;
    color:var(--muted);
    margin-bottom:10px
}
.stat-value{
    display:block;
    font-size:36px;
    font-weight:600;
    font-family:var(--heading);
    line-height:1.1;
    color:var(--text);
    overflow-wrap:anywhere
}
.stat-item p{
    font-size:11px;
    margin:8px 0 0
}
.arena-section{
    margin-top:38px
}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:18px
}
.section-heading h2{
    font-size:30px;
    margin:0
}
.section-heading .text-link{
    font-size:13px
}
.filter-bar{
    display:flex;
    gap:16px;
    align-items:flex-end;
    flex-wrap:wrap;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    padding:20px;
    margin:24px 0
}
.filter-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    flex:1;
    min-width:170px
}
.filter-field label{
    font-size:12px;
    font-weight:600;
    color:#d1d7c8
}
.filter-field input,.filter-field select{
    min-height:45px;
    padding:10px 12px;
    border-radius:4px;
    border:1px solid #4b5541;
    color:var(--text);
    background:#141a10;
    width:100%;
    font-size:14px
}
.filter-field input::placeholder{
    color:#8c987f
}
.filter-actions{
    display:flex;
    gap:10px
}
.filter-actions .button{
    min-height:45px
}
.table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface)
}
.arena-table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:14px
}
.arena-table thead{
    background:#242b1e
}
.arena-table th{
    padding:14px 18px;
    color:#aebba1;
    font-size:10px;
    font-weight:600;
    letter-spacing:.8px;
    text-transform:uppercase;
    white-space:nowrap;
    border-bottom:1px solid var(--line)
}
.arena-table td{
    padding:17px 18px;
    border-bottom:1px solid #323a2b;
    vertical-align:middle
}
.arena-table tbody tr:last-child td{
    border-bottom:0
}
.arena-table tbody tr:hover{
    background:#ffffff03
}
.arena-table a:hover{
    color:var(--gold);
    text-decoration:underline;
    text-underline-offset:4px
}
.table-player{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;
    min-width:170px
}
.table-meta{
    display:block;
    color:#98a58b;
    font-size:11px;
    font-weight:400;
    margin-top:3px
}
.table-number{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap
}
.table-rank{
    color:var(--gold);
    font-weight:600;
    width:55px
}
.table-accent{
    color:var(--gold);
    font-weight:600
}
.badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:4px;
    padding:4px 8px;
    font-size:10px;
    font-weight:600;
    white-space:nowrap;
    line-height:1.5;
    background:#30382a;
    color:#c4cdb9;
    border:1px solid #48533f
}
.badge-confirmed{
    background:#2c3c24;
    color:#c2df9f;
    border-color:#4e683c
}
.badge-pending{
    background:#3d3520;
    color:#ebcb80;
    border-color:#65532d
}
.badge-cancelled{
    background:#3d2e26;
    color:#e7b494;
    border-color:#664b3c
}
.badge-neutral{
    background:#2f352b;
    color:#c5cfbc;
    border-color:#4b5442
}
.arena-pagination{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    margin-top:22px;
    font-size:12px;
    color:var(--muted)
}
.arena-pagination>div{
    display:flex;
    gap:10px;
    align-items:center
}
.arena-pagination .button{
    min-height:38px;
    padding:8px 15px;
    font-size:12px
}
.arena-empty{
    padding:45px 24px;
    border:1px dashed #4b553f;
    border-radius:6px;
    background:var(--surface);
    text-align:center
}
.arena-empty h2,.arena-empty h3{
    font-size:28px;
    margin-bottom:10px
}
.arena-empty p{
    margin:0 auto;
    max-width:520px;
    font-size:14px
}
.arena-note{
    font-size:12px;
    color:#9eac90;
    line-height:1.8;
    margin-block:15px
}
.arena-note a{
    color:var(--gold)
}
.arena-uuid{
    font-family:ui-monospace,Consolas,monospace;
    font-size:12px;
    overflow-wrap:anywhere;
    color:#b8c5ab
}
.arena-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:28px
}
.arena-detail-grid>section,.arena-detail-grid>div{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    padding:25px
}
.arena-detail-grid h2{
    font-size:30px
}
.arena-detail-list{
    margin:0
}
.arena-detail-list>div{
    display:grid;
    grid-template-columns:minmax(125px,.7fr) 1fr;
    gap:20px;
    border-bottom:1px solid #343b2d;
    padding:12px 0
}
.arena-detail-list>div:last-child{
    border:0
}
.arena-detail-list dt{
    font-size:12px;
    color:#9ead90
}
.arena-detail-list dd{
    margin:0;
    font-size:13px;
    overflow-wrap:anywhere
}
.arena-detail-list dd .badge{
    vertical-align:top
}
.arena-detail-list dd code{
    font-size:11px
}
.arena-detail-list time{
    white-space:normal
}
.arena-explainer{
    font-size:13px;
    color:var(--muted)
}
.arena-explainer p:last-child{
    margin-bottom:0
}
.join-layout{
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:65px;
    margin-top:45px
}
.join-steps{
    list-style:none;
    padding:0;
    margin:0
}
.join-steps li{
    display:flex;
    gap:24px;
    padding:0 0 32px;
    margin-bottom:30px;
    border-bottom:1px solid var(--line)
}
.join-steps li:last-child{
    border:0;
    margin-bottom:0
}
.join-steps li>span{
    font-family:var(--heading);
    font-size:29px;
    color:var(--gold);
    line-height:1.2
}
.join-steps h2{
    font-size:29px;
    margin-bottom:12px
}
.join-steps p{
    font-size:14px
}
.join-steps .server-copy{
    margin-top:25px
}
.join-steps strong{
    color:#e4e9da
}
.join-image{
    border-radius:7px;
    position:relative;
    overflow:hidden;
    min-height:480px;
    border:1px solid var(--line)
}
.join-image>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.join-image:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#0b120cf2,transparent 85%)
}
.join-image>div{
    position:absolute;
    bottom:35px;
    left:30px;
    right:30px;
    z-index:1
}
.join-image h2{
    font-size:42px;
    margin-bottom:15px
}
.join-image p{
    font-size:14px;
    color:#d1d9c6
}
.prose-page{
    max-width:850px
}
.prose-page h2{
    font-size:30px;
    margin-top:35px
}
.prose-page li{
    color:var(--muted);
    margin-block:10px
}
.prose-page a{
    color:var(--gold);
    text-decoration:underline
}
@media(min-width:1600px){
    .home-hero{
        min-height:735px
    }
    .hero-content{
        min-height:640px
    }
    .hero-copy h1{
        font-size:118px
    }
    .hero-logo{
        width:450px
    }
}
@media(max-width:1100px){
    .header-inner{
        gap:20px;
        width:calc(100% - 40px)
    }
    .main-nav{
        gap:23px
    }
    .brand{
        font-size:18px
    }
    .brand img{
        width:50px;
        height:50px
    }
    .brand-sub{
        font-size:7px
    }
    .header-join{
        padding:10px 15px;
        font-size:12px
    }
    .hero-logo{
        width:32vw
    }
    .hero-copy h1{
        font-size:85px
    }
    .arena-feature-inner{
        gap:55px
    }
    .leaderboard-preview{
        padding:22px 24px 0
    }
    .stat-item{
        padding:20px
    }
    .table-wrap{
        border-radius:5px
    }
    .arena-detail-grid{
        gap:20px
    }
}
@media(min-width:801px) and (max-width:1100px){
    .header-join{margin-left:auto}
    .menu-toggle{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text);font-size:12px;order:3}
    .main-nav{display:none;position:absolute;top:88px;left:0;right:0;background:#181f14;height:auto;border-bottom:1px solid var(--line);padding:14px 20px;box-shadow:0 8px 15px #0004}
    .main-nav.is-open{display:flex;flex-wrap:wrap;gap:5px 25px}
    .main-nav>a{padding:12px 0;height:auto}
    .main-nav>a[aria-current=page]:after{bottom:4px}
}
@media(max-width:800px){
    .page-shell{
        width:calc(100% - 40px)
    }
    .site-header{
        height:76px
    }
    .header-inner{
        gap:15px
    }
    .brand-sub{
        font-size:7px
    }
    .brand img{
        height:48px;
        width:48px
    }
    .header-join{
        margin-left:auto
    }
    .menu-toggle{
        display:flex;
        align-items:center;
        gap:10px;
        padding:8px 10px;
        border:1px solid var(--line);
        border-radius:4px;
        background:var(--surface);
        color:var(--text);
        font-size:12px;
        order:3
    }
    .main-nav{
        display:none;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        background:#181f14;
        height:auto;
        border-bottom:1px solid var(--line);
        padding:14px 20px;
        box-shadow:0 8px 15px #0004
    }
    .main-nav.is-open{
        display:flex;
        flex-wrap:wrap;
        gap:5px 25px
    }
    .main-nav>a{
        padding:12px 0;
        height:auto
    }
    .main-nav>a[aria-current=page]:after{
        bottom:4px
    }
    .hero-content{
        min-height:550px;
        gap:0;
        padding-top:25px
    }
    .hero-copy h1{
        font-size:79px
    }
    .hero-copy{
        max-width:490px
    }
    .hero-logo{
        position:absolute;
        right:-55px;
        top:62px;
        width:300px;
        opacity:.25;
        z-index:-1;
        transform:rotate(-8deg)
    }
    .hero-shade{
        background:linear-gradient(90deg,#0c150ce6,#0b130c55),linear-gradient(0deg,#121610,transparent 45%)
    }
    .hero-background{
        object-position:65% 50%
    }
    .home-hero{
        min-height:640px
    }
    .hero-bottom{
        font-size:11px
    }
    .hero-bottom a{
        font-size:9px;
        gap:15px
    }
    .world-section{
        padding-block:55px
    }
    .section-intro{
        display:block
    }
    .section-intro>p{
        max-width:550px;
        margin-top:20px
    }
    .world-grid{
        gap:16px;
        grid-template-columns:1fr 1fr
    }
    .world-tile{
        min-height:285px
    }
    .world-tile-overlay{
        left:18px;
        right:18px;
        bottom:20px
    }
    .world-tile-overlay strong{
        font-size:26px
    }
    .world-tile-overlay small{
        font-size:8px;
        letter-spacing:1.4px
    }
    .circle-arrow{
        width:30px;
        height:30px;
        flex-basis:30px;
        font-size:17px
    }
    .arena-feature-inner{
        gap:35px;
        grid-template-columns:1fr 1.1fr;
        padding-block:50px
    }
    .arena-feature h2{
        font-size:46px
    }
    .arena-feature-copy>p:not(.eyebrow){
        font-size:13px
    }
    .leaderboard-preview{
        padding:19px 18px 0
    }
    .leaderboard-preview h3{
        font-size:26px
    }
    .preview-player{
        gap:8px
    }
    .preview-player-name{
        font-size:12px
    }
    .preview-rank{
        min-width:16px;
        font-size:11px
    }
    .preview-player .player-avatar{
        width:29px;
        height:29px
    }
    .preview-player>strong{
        font-size:17px
    }
    .preview-status{
        font-size:9px
    }
    .join-strip{
        gap:30px;
        padding-block:50px
    }
    .join-strip h2{
        font-size:34px
    }
    .join-strip>div:last-child{
        min-width:265px
    }
    .server-copy{
        padding:16px 18px
    }
    .server-copy>span{
        font-size:19px
    }
    .footer-main nav{
        gap:20px;
        font-size:11px
    }
    .footer-bottom{
        font-size:9px
    }
    .stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .stat-item:nth-child(2){
        border-right:0
    }
    .stat-item:nth-child(-n+2){
        border-bottom:1px solid var(--line)
    }
    .arena-detail-grid{
        grid-template-columns:1fr
    }
    .join-layout{
        gap:35px;
        grid-template-columns:1fr .65fr
    }
    .join-steps li{
        gap:17px
    }
    .join-image>div{
        left:20px;
        right:20px;
        bottom:25px
    }
    .join-image h2{
        font-size:34px
    }
}
@media(max-width:560px){
    .page-shell{
        width:calc(100% - 36px)
    }
    .header-inner{
        width:calc(100% - 28px);
        gap:10px
    }
    .brand{
        gap:6px;
        font-size:16px
    }
    .brand img{
        width:43px;
        height:43px
    }
    .brand-sub{
        font-size:6px;
        letter-spacing:1.4px
    }
    .header-join{
        font-size:11px;
        padding:9px 12px;
        min-height:38px;
        gap:8px
    }
    .header-join>span{
        display:none
    }
    .menu-toggle{
        min-height:38px;
        padding:7px 9px
    }
    .menu-toggle>span:first-child{
        display:none
    }
    .hero-copy .eyebrow{
        font-size:8px;
        letter-spacing:2px;
        gap:8px
    }
    .home-hero{
        min-height:610px
    }
    .hero-content{
        min-height:525px;
        padding-top:16px
    }
    .hero-copy h1{
        font-size:76px;
        letter-spacing:-1px;
        margin-bottom:24px
    }
    .hero-description{
        font-size:14px;
        line-height:1.8
    }
    .hero-logo{
        right:-45px;
        top:18px;
        width:230px;
        opacity:.13
    }
    .hero-actions{
        gap:10px
    }
    .hero-actions .button{
        font-size:12px;
        padding:13px 13px;
        gap:9px
    }
    .copy-ip small{
        font-size:10px
    }
    .copy-icon{
        display:none
    }
    .play-icon{
        font-size:14px
    }
    .hero-footnote{
        font-size:8px;
        letter-spacing:.8px
    }
    .hero-footnote span{
        padding:0 6px
    }
    .hero-bottom{
        padding-top:20px;
        margin-top:0
    }
    .hero-bottom>span{
        max-width:150px;
        font-size:10px
    }
    .hero-bottom a{
        font-size:8px;
        letter-spacing:1px;
        gap:10px
    }
    .world-section{
        padding-block:42px
    }
    .eyebrow{
        font-size:9px;
        letter-spacing:1.6px
    }
    .section-intro h2{
        font-size:36px
    }
    .section-intro>p{
        font-size:13px;
        margin-top:17px
    }
    .world-grid{
        grid-template-columns:1fr
    }
    .world-tile{
        min-height:265px
    }
    .world-tile-overlay strong{
        font-size:29px
    }
    .world-tile-overlay small{
        font-size:9px
    }
    .world-caption{
        gap:15px;
        font-size:10px
    }
    .world-caption a{
        font-size:10px;
        gap:6px
    }
    .arena-feature-inner{
        grid-template-columns:1fr;
        gap:35px;
        padding-block:42px
    }
    .arena-feature h2{
        font-size:57px
    }
    .arena-feature-copy>p:not(.eyebrow){
        max-width:100%;
        font-size:14px
    }
    .feature-secondary{
        display:inline-block;
        margin-left:16px;
        font-size:11px
    }
    .arena-feature-copy .button{
        font-size:12px;
        padding:13px 17px
    }
    .leaderboard-preview{
        padding:23px 23px 0
    }
    .leaderboard-preview h3{
        font-size:31px
    }
    .preview-player{
        gap:12px
    }
    .preview-player-name{
        font-size:14px
    }
    .preview-player>strong{
        font-size:21px
    }
    .preview-player .player-avatar{
        width:34px;
        height:34px
    }
    .preview-status{
        font-size:10px
    }
    .join-strip{
        display:block;
        padding-block:42px
    }
    .join-strip h2{
        font-size:36px
    }
    .join-strip>div:last-child{
        margin-top:26px;
        min-width:0
    }
    .server-copy>span{
        font-size:21px
    }
    .footer-main{
        display:block;
        padding-block:30px
    }
    .footer-main nav{
        margin-top:25px;
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:14px 24px;
        font-size:12px
    }
    .footer-bottom{
        display:block;
        font-size:9px
    }
    .footer-bottom>span{
        display:block
    }
    .footer-bottom>span+span{
        margin-top:9px;
        max-width:300px
    }
    .arena-page,.join-page,.prose-page{
        padding-block:35px 45px
    }
    .page-heading{
        font-size:46px
    }
    .page-lede{
        font-size:14px
    }
    .arena-subnav{
        gap:23px
    }
    .arena-subnav a{
        font-size:13px
    }
    .arena-status-strip{
        font-size:11px;
        gap:8px;
        padding:12px
    }
    .stat-grid{
        margin-bottom:25px
    }
    .stat-item{
        padding:18px 15px
    }
    .stat-label{
        font-size:10px
    }
    .stat-value{
        font-size:31px
    }
    .section-heading h2{
        font-size:27px
    }
    .section-heading .text-link{
        font-size:11px;
        gap:7px
    }
    .filter-bar{
        padding:16px;
        gap:14px
    }
    .filter-field{
        flex-basis:100%;
        min-width:0
    }
    .filter-actions{
        width:100%
    }
    .filter-actions .button{
        flex:1
    }
    .arena-table th{
        padding:12px 14px
    }
    .arena-table td{
        padding:14px
    }
    .arena-pagination{
        align-items:flex-start;
        flex-direction:column;
        gap:12px
    }
    .arena-pagination>div{
        width:100%;
        justify-content:space-between
    }
    .arena-detail-grid>section,.arena-detail-grid>div{
        padding:20px
    }
    .arena-detail-list>div{
        grid-template-columns:1fr 1.15fr;
        gap:12px
    }
    .arena-detail-list dt{
        font-size:11px
    }
    .arena-detail-list dd{
        font-size:12px
    }
    .join-layout{
        grid-template-columns:1fr;
        gap:0
    }
    .join-steps h2{
        font-size:29px
    }
    .join-steps li{
        gap:17px
    }
    .join-image{
        min-height:390px
    }
    .join-image>div{
        left:25px;
        bottom:30px
    }
    .toast{
        font-size:12px;
        padding:12px 17px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        transition:none!important;
        animation:none!important
    }
}
header.page-heading{
    font-size:16px
}
header.page-heading h1{
    font-size:clamp(42px,5vw,64px);
    margin-bottom:16px
}
.page-lede{
    font-size:16px;
    letter-spacing:normal;
    font-family:var(--body);
    font-weight:400
}
.stat-value{
    margin-left:0
}
.arena-table tbody th{
    padding:17px 18px;
    font-size:14px;
    text-transform:none;
    letter-spacing:normal;
    color:var(--text);
    border-bottom:1px solid #323a2b;
    font-weight:600
}
.arena-table tbody tr:last-child th{
    border-bottom:0
}
.page-heading-secondary{
    font-size:32px
}
.arena-settlements{
    display:grid;
    gap:12px
}
.arena-settlement{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px
}
.arena-settlement>summary{
    display:flex;
    align-items:center;
    gap:16px;
    padding:17px 20px;
    cursor:pointer;
    flex-wrap:wrap
}
.arena-settlement>summary:before{
    content:'+';
    font-size:22px;
    color:var(--gold);
    line-height:1
}
.arena-settlement[open]>summary:before{
    content:'−'
}
.arena-settlement>summary .table-number{
    margin-left:auto
}
.arena-settlement-body{
    padding:0 22px 22px;
    border-top:1px solid var(--line)
}
.arena-settlement-body .arena-detail-list{
    margin-top:8px
}
.arena-status-message{
    background:var(--surface);
    border-left:3px solid var(--gold);
    padding:17px 20px;
    color:#c9d2bf;
    font-size:14px
}
.arena-table details>summary{
    cursor:pointer;
    color:var(--gold)
}
.section-heading .page-kicker{
    margin-bottom:8px
}
@media(max-width:560px){
    header.page-heading h1{
        font-size:43px
    }
    .page-lede{
        font-size:14px
    }
    .arena-table tbody th{
        padding:14px
    }
    .arena-settlement>summary{
        gap:10px;
        padding:15px
    }
    .arena-settlement-body{
        padding:0 16px 18px
    }
}
.edition-guides{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-block:35px
}
.edition-guide{
    padding:30px;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--surface)
}
.edition-heading{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:32px
}
.edition-heading .eyebrow{
    font-size:9px;
    margin-bottom:8px
}
.edition-heading h2{
    font-size:38px;
    margin:0
}
.edition-symbol{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    font-size:32px;
    color:var(--gold);
    background:#343825;
    border:1px solid #62663c;
    border-radius:5px
}
.edition-guide .join-steps li{
    gap:19px;
    padding-bottom:24px;
    margin-bottom:24px
}
.edition-guide .join-steps li:last-child{
    padding-bottom:0;
    margin-bottom:0
}
.edition-guide h3{
    font-size:20px;
    margin-bottom:10px
}
.edition-guide .join-steps p{
    font-size:13px;
    margin-bottom:0
}
.edition-guide .server-copy{
    padding:13px 16px;
    margin-top:20px
}
.edition-guide .server-copy>span{
    font-size:18px
}
.bedrock-port{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
    font-size:10px;
    color:var(--muted);
    letter-spacing:1px
}
.bedrock-port strong{
    color:var(--gold);
    font:600 18px var(--body);
    letter-spacing:0
}
.join-help{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-block:40px
}
.join-help h2{
    font-size:32px;
    margin-bottom:10px
}
.join-help p{
    font-size:14px;
    margin:0
}
.join-map-banner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:38px;
    border-radius:7px;
    overflow:hidden;
    min-height:220px;
    isolation:isolate;
    gap:25px
}
.join-map-banner>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2
}
.join-map-banner:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#0d160ce8,#0d160c44);
    z-index:-1
}
.join-map-banner small{
    display:block;
    font-size:10px;
    letter-spacing:2px;
    color:var(--gold);
    margin-bottom:10px
}
.join-map-banner strong{
    display:block;
    font:600 38px/1.1 var(--heading);
    max-width:450px
}
.join-map-banner:hover .circle-arrow{
    background:var(--gold);
    color:var(--bg)
}
@media(max-width:800px){
    .edition-guides{
        gap:18px
    }
    .edition-guide{
        padding:23px
    }
    .edition-guide .join-steps li{
        gap:14px
    }
    .edition-guide .server-copy>span{
        font-size:16px
    }
    .edition-guide .server-copy{
        padding:12px
    }
    .edition-guide .server-copy>span>span{
        display:none
    }
}
@media(max-width:600px){
    .edition-guides{
        grid-template-columns:1fr
    }
    .edition-guide{
        padding:24px
    }
    .edition-guide .server-copy>span{
        font-size:19px
    }
    .edition-guide .server-copy>span>span{
        display:inline
    }
    .join-help{
        display:block
    }
    .join-help .button{
        margin-top:20px
    }
    .join-map-banner{
        padding:25px;
        min-height:240px
    }
    .join-map-banner strong{
        font-size:32px
    }
}
.home-guides{
    display:flex;
    align-items:center;
    gap:28px;
    padding-block:43px;
    border-bottom:1px solid var(--line)
}
.home-guides>div:nth-child(2){
    flex:1
}
.home-guides h2{
    font-size:34px;
    margin-bottom:10px
}
.home-guides p:not(.eyebrow){
    font-size:14px;
    margin:0
}
.home-guides .eyebrow{
    font-size:9px;
    margin-bottom:11px
}
.home-guides-symbol{
    font-size:44px;
    color:var(--gold);
    width:75px;
    height:75px;
    display:grid;
    place-items:center;
    border:1px solid #4c5739;
    border-radius:7px;
    background:#242c1c
}
.guides-page,.guide-article-page{
    padding-block:52px 72px;
    min-height:65vh
}
.guide-featured{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    background:linear-gradient(100deg,#2b3521,#1d271a);
    border:1px solid #505d39;
    border-radius:7px;
    padding:35px 40px;
    margin:32px 0 35px;
    overflow:hidden
}
.guide-featured-copy{
    max-width:740px
}
.guide-featured h2{
    font-size:39px;
    margin-bottom:15px
}
.guide-featured p:not(.page-kicker){
    max-width:650px;
    font-size:14px
}
.guide-featured-mark{
    font:700 120px/1 var(--heading);
    color:#89934c44;
    align-self:center;
    user-select:none
}
.guide-meta{
    display:flex;
    gap:10px 20px;
    flex-wrap:wrap;
    font-size:11px;
    color:#a7b797;
    margin-block:15px
}
.guide-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.guide-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:27px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px;
    transition:background .18s,border-color .18s,transform .18s
}
.guide-card:hover{
    background:#252e1e;
    border-color:#768054;
    transform:translateY(-3px)
}
.guide-category{
    display:block;
    font-size:9px;
    color:var(--gold);
    letter-spacing:1.6px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:17px
}
.guide-card h3{
    font-family:var(--heading);
    font-size:29px;
    margin-bottom:16px
}
.guide-card p{
    font-size:13px;
    line-height:1.8;
    flex:1
}
.guide-card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    color:var(--gold);
    font-size:11px;
    margin-top:10px;
    padding-top:15px;
    border-top:1px solid #3c4632
}
.guide-card-footer>span:last-child{
    font-size:18px
}
.guide-breadcrumbs{
    display:flex;
    gap:12px;
    align-items:center;
    color:#9eae8d;
    font-size:12px;
    margin-bottom:28px;
    flex-wrap:wrap
}
.guide-breadcrumbs a{
    color:var(--gold)
}
.guide-breadcrumbs a:hover{
    text-decoration:underline
}
.guide-article-layout{
    display:grid;
    grid-template-columns:235px 1fr;
    gap:60px;
    align-items:start;
    margin-top:35px;
    border-top:1px solid var(--line);
    padding-top:38px
}
.guide-toc{
    position:sticky;
    top:25px;
    padding:22px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:6px
}
.guide-toc h2{
    font-family:var(--body);
    font-size:12px;
    letter-spacing:.8px;
    margin-bottom:18px;
    color:var(--gold)
}
.guide-toc ul,.guide-toc ol{
    list-style:none;
    margin:0;
    padding:0
}
.guide-toc li+li{
    margin-top:13px
}
.guide-toc a{
    font-size:12px;
    line-height:1.6;
    display:block;
    color:#bcc8b0
}
.guide-toc a:hover{
    color:var(--gold)
}
.guide-prose{
    max-width:760px
}
.guide-section{
    margin-bottom:42px;
    scroll-margin-top:28px
}
.guide-section h2{
    font-size:34px;
    margin-bottom:18px
}
.guide-section h3{
    font-size:21px;
    margin:25px 0 12px
}
.guide-section p{
    font-size:15px;
    line-height:1.85
}
.guide-steps{
    padding-left:22px;
    color:#b7c3ab;
    font-size:14px;
    line-height:1.9
}
.guide-steps li{
    padding-left:8px;
    margin-bottom:12px
}
.guide-steps li::marker{
    color:var(--gold);
    font-weight:700
}
.guide-tips{
    padding:18px 20px 18px 36px;
    background:#27321e;
    border-left:3px solid #8fa463;
    border-radius:0 4px 4px 0;
    color:#c1d0b0;
    font-size:13px;
    line-height:1.9;
    margin-block:22px
}
.guide-tips li+li{
    margin-top:8px
}
.guide-facts{
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    margin-block:22px
}
.guide-facts>div{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:20px;
    background:var(--surface);
    padding:15px 20px;
    border-bottom:1px solid var(--line)
}
.guide-facts>div:last-child{
    border:0
}
.guide-facts dt{
    font-size:12px;
    color:var(--gold);
    font-weight:600
}
.guide-facts dd{
    margin:0;
    color:#b8c5ac;
    font-size:13px;
    line-height:1.8;
    overflow-wrap:anywhere
}
.guide-links{
    display:flex;
    flex-wrap:wrap;
    gap:14px 22px;
    margin-block:20px
}
.guide-links a{
    color:var(--gold);
    font-size:13px;
    text-decoration:underline;
    text-underline-offset:4px
}
.guide-related{
    border-top:1px solid var(--line);
    margin-top:25px;
    padding-top:30px
}
.guide-related h2{
    font-size:33px
}
.guide-related .guide-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
}
@media(max-width:1000px){
    .main-nav{
        gap:23px
    }
    .guide-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .guide-article-layout{
        grid-template-columns:210px 1fr;
        gap:30px
    }
    .guide-facts>div{
        grid-template-columns:120px 1fr;
        gap:15px
    }
}
@media(max-width:800px){
    .main-nav{
        gap:5px 25px
    }
    .home-guides{
        gap:20px;
        flex-wrap:wrap
    }
    .home-guides-symbol{
        width:58px;
        height:58px;
        font-size:34px
    }
    .home-guides h2{
        font-size:29px
    }
    .home-guides>.button{
        margin-left:78px
    }
    .guide-featured{
        padding:28px
    }
    .guide-featured-mark{
        font-size:85px
    }
    .guide-article-layout{
        grid-template-columns:1fr;
        gap:32px
    }
    .guide-toc{
        position:static
    }
    .guide-toc ul,.guide-toc ol{
        display:flex;
        flex-wrap:wrap;
        gap:12px 20px
    }
    .guide-toc li+li{
        margin-top:0
    }
    .guide-prose{
        max-width:none
    }
}
@media(max-width:560px){
    .guides-page,.guide-article-page{
        padding-block:35px 45px
    }
    .home-guides{
        padding-block:32px;
        gap:18px
    }
    .home-guides-symbol{
        display:none
    }
    .home-guides>.button{
        margin-left:0
    }
    .home-guides h2{
        font-size:31px
    }
    .guide-featured{
        padding:25px;
        gap:0
    }
    .guide-featured h2{
        font-size:34px
    }
    .guide-featured-mark{
        display:none
    }
    .guide-grid,.guide-related .guide-grid{
        grid-template-columns:1fr;
        gap:16px
    }
    .guide-card{
        padding:24px
    }
    .guide-card h3{
        font-size:30px
    }
    .guide-article-layout{
        padding-top:25px;
        margin-top:25px
    }
    .guide-section h2{
        font-size:30px
    }
    .guide-section p{
        font-size:14px
    }
    .guide-facts>div{
        grid-template-columns:1fr;
        gap:6px;
        padding:14px 18px
    }
    .guide-related h2{
        font-size:30px
    }
}
.guide-featured-mark{
    text-align:center;
    flex:0 0 180px
}
.guide-featured-mark>span{
    display:block
}
.guide-featured-mark small{
    display:block;
    font:600 9px/1.6 var(--body);
    letter-spacing:2px;
    max-width:130px;
    margin:12px auto 0;
    color:#9dac7f
}
.guide-toc>.text-link{
    margin-top:24px;
    font-size:12px
}
.guide-tips{
    padding:19px 22px
}
.guide-tips h3{
    font:700 13px var(--body);
    margin:0 0 11px;
    color:#dce7ca
}
.guide-tips p{
    font-size:13px;
    line-height:1.8;
    color:#bacda7;
    margin-bottom:10px
}
.guide-tips p:last-child{
    margin-bottom:0
}
.guide-related .guide-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.guide-facts dt{
    overflow-wrap:anywhere
}
@media(max-width:1000px){
    .guide-related .guide-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:560px){
    .guide-related .guide-grid{
        grid-template-columns:1fr
    }
}