/* /publish/ (pass 2): hero with a real live community game, four publishing paths, compact facts, answers in drawers. */
.pb-hero{display:grid;gap:var(--sc-6);align-items:center}
@media(min-width:1000px){.pb-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sc-7)}}
.pb-hero-copy{display:grid;gap:var(--sc-3);justify-items:start}
.pb-hero-copy .sc-h1{font-size:clamp(30px,1.6vw + 18px,46px);max-width:22ch}
.pb-hero-copy .sc-actions{margin-top:var(--sc-2)}
.pb-runs{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sc-3)}
.pb-runs li{padding:6px 12px;border-radius:999px;background:var(--sc-surface-2);box-shadow:inset 0 0 0 1px var(--sc-line);font-size:var(--sc-fs-13);font-weight:700;color:var(--sc-ink-2)}
.pb-hero-art{margin:0;display:grid;gap:var(--sc-2);max-width:600px;width:100%}
.pb-hero-art>a{display:block;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(15,42,85,.28),0 0 0 1px var(--sc-line);transform:rotate(-1deg);transition:transform .2s ease}
.pb-hero-art>a:hover{transform:rotate(0)}
.pb-hero-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.pb-hero-art figcaption{font-size:var(--sc-fs-14);color:var(--sc-ink-3);padding-inline:4px}
.pb-hero-art figcaption b{color:var(--sc-ink)}
.pb-paths{display:grid;gap:var(--sc-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media(min-width:1280px){.pb-paths{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pb-path{position:relative;display:flex;flex-direction:column;gap:var(--sc-2);padding:var(--sc-5);border-radius:16px;background:var(--sc-surface);box-shadow:0 0 0 1px var(--sc-line),0 10px 30px rgba(15,42,85,.06);transition:box-shadow .15s ease,transform .15s ease}
.pb-path:target,.pb-path:hover{box-shadow:0 0 0 2px var(--sc-orange-600),0 16px 36px rgba(15,42,85,.12)}
.pb-num{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--sc-2);border-radius:12px;background:var(--sc-navy-900);color:#fff;font:900 22px/1 var(--sc-display)}
.pb-path:first-child .pb-num{background:var(--sc-orange-600)}
.pb-kicker{font-size:var(--sc-fs-13);font-weight:800;color:var(--sc-orange-700)}
.pb-title{font:900 clamp(24px,.8vw + 18px,30px)/1 var(--sc-display);text-transform:uppercase;letter-spacing:.3px;color:var(--sc-navy-900)}
.pb-line{color:var(--sc-ink-2);flex:1 1 auto}
.pb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sc-2) var(--sc-3);margin-top:var(--sc-2)}
.pb-more{font-size:var(--sc-fs-14);font-weight:700}
.pb-details{margin-top:var(--sc-3);border-top:1px solid var(--sc-line-2);padding-top:var(--sc-3)}
.pb-details summary,.pb-qa summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sc-3);font-weight:800;color:var(--sc-navy-700)}
.pb-details summary::-webkit-details-marker,.pb-qa summary::-webkit-details-marker{display:none}
.pb-details summary::after,.pb-qa summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .15s ease}
.pb-details[open] summary::after,.pb-qa details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.pb-details :is(ul,ol){display:grid;gap:var(--sc-2);margin:var(--sc-3) 0 0;padding-left:1.2em;font-size:var(--sc-fs-14);color:var(--sc-ink-2)}
.pb-details ul{list-style:disc}
.pb-gets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--sc-2) var(--sc-5)}
.pb-gets li{display:grid;gap:2px;padding:var(--sc-3) 0;border-top:1px solid var(--sc-line)}
.pb-gets b{font-size:var(--sc-fs-16)}
.pb-gets span{color:var(--sc-ink-2);font-size:var(--sc-fs-14)}
.pb-qa{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:0 var(--sc-6)}
.pb-qa details{border-top:1px solid var(--sc-line)}
.pb-qa summary{padding:var(--sc-3) 0;color:var(--sc-ink)}
.pb-qa h3{font:700 var(--sc-fs-16)/1.35 var(--sc-body);margin:0}
.pb-qa p{padding:0 0 var(--sc-4);color:var(--sc-ink-2);max-width:60ch}
@media(prefers-reduced-motion:reduce){.pb-hero-art>a{transform:none;transition:none}}

/* Miniclip pass: the three sections are boxes with navy bars; the path cards sit flat inside */
.mc-sec .pb-path{border-radius:var(--sc-r-md);box-shadow:0 0 0 1px var(--sc-line);background:var(--sc-surface)}
.mc-sec .pb-path:target,.mc-sec .pb-path:hover{box-shadow:0 0 0 2px var(--sc-orange-600)}
.mc-sec .pb-num{border-radius:var(--sc-r-md)}
.mc-sec .pb-gets{gap:var(--sc-4) var(--sc-5)}
@media(min-width:600px){.mc-sec .pb-gets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.mc-sec .pb-gets{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mc-sec .pb-gets li{border-top:0;padding:0 0 0 var(--sc-3);box-shadow:inset 3px 0 0 var(--sc-orange-600)}
.mc-sec .pb-qa{margin-top:calc(var(--sc-3) * -1)}
.mc-sec .pb-qa details{border-top:0;border-bottom:1px solid var(--sc-line-2)}