/* Each new cover uses its own artwork. Portrait originals stay framed. */
.cover-new{container-type:inline-size;container-name:cover}
.cover-new .command-header{max-width:1600px;min-height:112px;padding:18px 6%;z-index:3;background:#030912b8;backdrop-filter:blur(12px)}
.cover-new .command-center{max-width:1600px;min-height:calc(100svh - 112px);padding:55px 7%;align-items:center}
.cover-new .command-copy{width:48%;max-width:720px;padding:30px 0}
.cover-new .command-copy h1{font-size:76px;line-height:1.15;letter-spacing:2px;white-space:normal;margin:25px 0 38px}
.cover-new .command-copy h1 span{display:block;font-size:.68em;letter-spacing:4px;margin-top:8px}
.cover-new .command-actions{gap:14px;flex-wrap:wrap}
.cover-new .command-actions .console-button{font-size:16px;min-height:60px;min-width:185px}
.cover-new .valley-art{inset:0;overflow:hidden}
.cover-new .valley-art img{opacity:1;filter:none;object-fit:cover;object-position:center}
.cover-new .valley-art:after{background:linear-gradient(90deg,#030a13f2 0%,#07132585 40%,transparent 75%),linear-gradient(0deg,#040a14c9,transparent 35%)}
.cover-new .valley-signature{color:#8dabce;margin-top:34px;font-size:15px}
.cover-new .command-aurebesh{z-index:2;bottom:24px;font-size:13px;opacity:.48}
.cover-new .valley-north{z-index:2;top:22px;font-size:13px;opacity:.55}
.cover-new .valley-east{z-index:2;opacity:.45}

/* 6 — A stone memorial as a framed illustration. */
.cover-6 .command-center{background:radial-gradient(ellipse at 70% 50%,#16344377,transparent 70%)}
.cover-6 .valley-art{inset:auto 9% auto auto;width:430px;height:580px;border:1px solid #567796;border-radius:220px 220px 5px 5px;box-shadow:0 0 90px #3574a82b}
.cover-6 .valley-art img{object-fit:contain}
.cover-6 .valley-art:after{background:linear-gradient(0deg,#07131c66,transparent 30%)}
.cover-6 .command-copy h1{font-family:Georgia,serif;font-size:90px;letter-spacing:5px}
.cover-6 .command-copy h1 span{font-size:.59em}
.cover-6 .command-rule i:last-child{width:180px}


/* 7 — The duel occupies the screen; controls sit below its faces. */
:is(.cover-7,.cover-16) .command-center{align-items:flex-end;padding-bottom:75px}
:is(.cover-7,.cover-16) .valley-art img{object-position:center 36%}
:is(.cover-7,.cover-16) .valley-art:after{background:linear-gradient(0deg,#030815 0%,#030815c9 19%,transparent 57%)}
:is(.cover-7,.cover-16) .command-copy{width:100%;max-width:none;padding:0;display:grid;grid-template-columns:1fr auto;align-items:end;gap:25px}
:is(.cover-7,.cover-16) .command-copy h1{font-size:67px;margin:0;grid-column:1}
:is(.cover-7,.cover-16) .command-copy h1 span{font-size:.64em}
:is(.cover-7,.cover-16) .command-rule{display:none}
:is(.cover-7,.cover-16) .command-actions{grid-column:2;grid-row:1;align-self:end;margin-bottom:9px}
:is(.cover-7,.cover-16) .command-resume{grid-column:2;grid-row:2;margin:0}

/* 8 — Legends illustration on the left, book typography on the right. */
.cover-8 .valley-art{inset:4% 53% 4% 5%;border:1px solid #76728780;background:#16101f}
.cover-8 .valley-art img{object-fit:contain}
.cover-8 .valley-art:after{background:linear-gradient(0deg,#060b1844,transparent 35%)}
.cover-8 .command-copy{margin-left:53%;width:47%;padding-left:25px}
.cover-8 .command-copy h1{font-family:Georgia,serif;font-size:87px;letter-spacing:3px}
.cover-8 .command-actions{flex-direction:column;align-items:flex-start}
.cover-8 .command-actions .console-button{min-width:245px}
.cover-8 .valley-north{right:auto;left:5%}

/* 9 — A retrospective console window on the Force nexus. */
.cover-9 .valley-art{inset:11% 5% 15% 40%;border:1px solid #477da7;box-shadow:12px 12px 0 #0c1d30,0 0 50px #447baf22;border-radius:5px}
.cover-9 .valley-art img{object-fit:contain;background:#090e16}
.cover-9 .valley-art:after{background:repeating-linear-gradient(0deg,transparent 0 4px,#10172925 4px 5px)}
.cover-9 .command-copy{width:41%;padding:25px;background:linear-gradient(90deg,#04101ae8,#071522cf);border-left:2px solid #77baff}
.cover-9 .command-copy h1{font-size:62px}
.cover-9 .command-actions{display:grid}
.cover-9 .command-actions .console-button{justify-content:flex-start}

/* 10 — Darth Bane fills the right-hand side. */
.cover-10 .valley-art{left:43%;background:#0b0a18}
.cover-10 .valley-art img{object-position:center 32%}
.cover-10 .valley-art:after{background:linear-gradient(90deg,#040914,transparent 33%),linear-gradient(0deg,#030815,transparent 40%)}
.cover-10 .command-copy{border-left:3px solid #f66c84;padding-left:30px;width:48%}
.cover-10 .command-copy h1{font-size:80px}
.cover-10 .command-copy h1 span{color:#ffadba}
.cover-10 .command-actions{flex-direction:column;align-items:flex-start}
.cover-10 .command-rule i:last-child{background:#ed6980}

/* 11 — A diagonal window into the battle of Tython. */
.cover-11 .valley-art{left:39%;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);border-right:3px solid #699ce3}
.cover-11 .valley-art img{object-position:55% center}
.cover-11 .valley-art:after{background:linear-gradient(90deg,#07132f99,transparent 40%),linear-gradient(0deg,#050b1ac9,transparent 35%)}
.cover-11 .command-copy{width:43%;margin-left:-2%;padding:30px 25px 30px 0}
.cover-11 .command-copy h1{font-size:69px}
.cover-11 .command-actions{flex-direction:column;align-items:flex-start}
.cover-11 .command-rule i:last-child{width:190px}

/* 12 — Two Sith, rendered as a gallery painting rather than a crop. */
.cover-12 .valley-art{inset:4% 5% 4% 39%;border:1px solid #6b576b;background:#102632}
.cover-12 .valley-art img{object-fit:contain}
.cover-12 .valley-art:after{background:linear-gradient(0deg,#030b1b44,transparent 30%)}
.cover-12 .command-copy{width:37%;border-top:1px solid #ce6b8177;border-bottom:1px solid #547ba666;padding:38px 0}
.cover-12 .command-copy h1{font-family:Georgia,serif;font-size:91px;letter-spacing:1px}
.cover-12 .command-copy h1 span{font-size:.58em;color:#d6e5f7}
.cover-12 .command-actions{flex-direction:column;align-items:flex-start}

/* 13 — Ruusan orbit, kept at the original image's scale. */
.cover-13 .command-center{background:#030811 url('/assets/space-table.svg') center/cover}
.cover-13 .valley-art{inset:auto 6% auto auto;width:570px;height:570px;border-radius:50%;border:1px solid #5885ae;box-shadow:0 0 0 23px #6498db0c,0 0 0 24px #638bb72c,0 0 0 65px #367fc305,0 0 0 66px #638bb71c}
.cover-13 .valley-art img{object-fit:contain;mix-blend-mode:screen}
.cover-13 .valley-art:after{background:linear-gradient(90deg,#0b163052,transparent)}
.cover-13 .command-copy{width:48%}
.cover-13 .command-copy h1{font-family:'Segoe UI',sans-serif;font-weight:300;font-size:94px;letter-spacing:9px}
.cover-13 .command-copy h1 span{font-size:.59em;letter-spacing:10px}
.cover-13 .command-rule i:last-child{width:220px}

/* 14 — Small original art stays crisp inside an architectural frame. */
.cover-14 .command-center{background:linear-gradient(150deg,#071629,#0a0b16)}
.cover-14 .valley-art{inset:auto 5% auto auto;width:650px;height:365px;border:1px solid #7692b7;border-radius:4px;box-shadow:18px 18px 0 #0b1628,19px 19px 0 #3a4a6870}
.cover-14 .valley-art img{object-fit:contain}
.cover-14 .valley-art:after{background:none}
.cover-14 .command-copy{width:43%;padding-bottom:45px}
.cover-14 .command-copy h1{font-family:Georgia,serif;font-size:90px;letter-spacing:2px}
.cover-14 .command-copy h1 span{font-size:.56em}
.cover-14 .command-actions{flex-direction:column;align-items:flex-start}

/* 15 — A full comic illustration, displayed as a narrow poster. */
.cover-15 .valley-art{inset:auto 12% auto auto;width:440px;height:676px;background:#231927;border:1px solid #947b7966;box-shadow:20px 20px 0 #351825,21px 21px 0 #ae627355}
.cover-15 .valley-art img{object-fit:contain}
.cover-15 .valley-art:after{background:linear-gradient(0deg,#09111b44,transparent 25%)}
.cover-15 .command-copy{width:47%}
.cover-15 .command-copy h1{font-family:'Segoe UI',sans-serif;font-weight:900;font-size:105px;letter-spacing:-4px;line-height:.95}
.cover-15 .command-copy h1 span{font-size:.58em;color:#99c8ff;letter-spacing:0;margin-top:18px}
.cover-15 .command-rule i:last-child{width:200px}

.cover-6 .valley-art,.cover-13 .valley-art,.cover-14 .valley-art,.cover-15 .valley-art{top:50%;transform:translateY(-50%)}

.cover-new .valley-members{font-size:14px;opacity:.65}
@media(max-width:700px){
 .cover-new .command-header{flex-wrap:wrap}
 .cover-new .command-header nav{flex:1;justify-content:flex-end}
 .cover-new .valley-members{font-size:11px}
}
@media(max-width:480px){
 .cover-new .command-header{flex-direction:column;align-items:flex-start;gap:14px}
 .cover-new .command-header nav{width:100%}
 .cover-new .command-header nav .console-button{flex:1}
}

@container cover (max-width:1100px){
 .cover-new .command-center{padding-left:5%;padding-right:5%}
 .cover-new .command-copy h1{font-size:66px}
 .cover-new .command-actions .console-button{font-size:14px;min-width:150px;padding:13px}
 .cover-6 .valley-art{right:6%;width:36%;height:550px}
 .cover-13 .valley-art{right:6%;width:43cqw;height:43cqw}
 .cover-14 .valley-art{right:5%;width:49%;height:340px}
 .cover-15 .valley-art{right:7%;width:38%;height:630px}
 :is(.cover-7,.cover-16) .command-copy h1{font-size:58px}
}
@container cover (max-width:760px){
 .cover-new .command-center{min-height:calc(100svh - 160px);padding:30px 7% 110px;align-items:flex-end}
 .cover-new .command-copy,.cover-8 .command-copy{width:100%;margin:0;padding:25px 0;max-width:none;background:none;border:0;position:relative}
 .cover-new .command-copy h1{font-size:clamp(42px,10cqw,65px);letter-spacing:1px;margin:18px 0 28px}
 .cover-new .command-copy h1 span{letter-spacing:2px}
 .cover-new .command-actions{display:flex;flex-direction:row;gap:10px}
 .cover-new .command-actions .console-button{font-size:13px;min-width:0;min-height:52px;padding:13px}
 .cover-new .valley-art{transform:none;inset:3% 7% 20%;width:auto;height:auto;border-radius:4px;clip-path:none;box-shadow:none;border:0;opacity:.66}
 .cover-new .valley-art img{object-fit:cover}
 .cover-new .valley-art:after{background:linear-gradient(0deg,#030914 0%,#030914bb 30%,transparent 85%)}
 .cover-new .valley-signature{margin-top:25px;font-size:12px}
 .cover-new .valley-north{right:6%;left:auto}
 :is(.cover-7,.cover-16) .command-copy{display:block}
 :is(.cover-7,.cover-16) .command-actions{margin-top:28px}
 .cover-8 .valley-art img{object-position:center 20%}
 .cover-10 .valley-art img{object-position:center 22%}
 .cover-13 .valley-art{inset:5% 15% auto;width:70%;height:70cqw;border-radius:50%;opacity:.8}
 .cover-13 .valley-art img{object-fit:contain}
 .cover-13 .valley-art:after{background:linear-gradient(0deg,#030914b8,transparent)}
 .cover-14 .valley-art{inset:10% 5% auto;width:90%;height:50cqw}
 .cover-14 .valley-art img{object-fit:contain}
 .cover-15 .valley-art img{object-position:center top}
}

/* Keep every destination readable when the header runs out of horizontal room. */
@media(max-width:1280px){
 .command-home .command-header{flex-direction:column;align-items:flex-start;gap:16px}
 .command-home .command-header nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%;flex:none}
 .command-home .command-header nav .console-button{min-width:0;min-height:46px;padding:11px 12px;font-size:13px;white-space:normal;text-align:left}
 .command-home .command-header nav .site-menu-label{min-width:0;white-space:normal;line-height:1.4}
}
@media(max-width:900px){
 .command-home .command-header nav{grid-template-columns:repeat(3,minmax(0,1fr))}
 .command-home .command-header nav .console-button:last-child{grid-column:span 2}
}
@media(max-width:600px){
 .command-home .command-header{padding:14px 15px;gap:14px}
 .command-home .command-header nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .command-home .command-header nav .console-button{padding:10px;font-size:13px}
 .command-home .command-header .site-brand{gap:10px;max-width:100%}
 .command-home .command-header .site-brand .site-brand-logos{width:clamp(104px,30vw,145px);flex:none}
 .command-home .command-header .site-brand-title{font-size:clamp(14px,3.8vw,17px)}
}