/* Sacred Wire 28 Home: the poster cover. Loaded after ds-web.css and style-web.css (shared .pz- parts live there).
   Ink on paper, one canary (#f6df5e), stock colours only on the covers. No gradients, shadows or rounded corners. No motion. */

.h-main { display: block; }

/* ---------- poster: headline and plate in the first viewport (nav 52px + form strip 32px above, first covers peek below) ---------- */
.h-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border-bottom: 3px solid #000; overflow: hidden;
    min-height: clamp(420px, 56dvh, 560px); }
.h-hl { padding: 40px 32px 36px; display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; min-width: 0; }
.h-title { margin: 0; font-family: "Saira Condensed", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(80px, 10.2vw, 170px); line-height: 0.8; letter-spacing: 0; }
@media (min-width: 601px) { .h-title { white-space: nowrap; } .h-hl .pz-acts, .h-cell--t .pz-acts { flex-wrap: nowrap; } }
.h-28 { display: block; width: fit-content; background: #f6df5e; border: 3px solid #000; padding: 0 0.08em; margin-top: 0.1em; }
.h-sub { font-style: italic; font-size: 24px; line-height: 1.3; margin: 0 0 22px; max-width: 46ch; }
.h-art { background: #f6df5e; border-left: 3px solid #000; position: relative; min-height: 0; }
.h-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }

/* ---------- variant A covers: five equal booklets in one row from 1024 px, a scroll-snap shelf of equal cards below ---------- */
.h-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px); gap: 3px; background: #000; border-bottom: 3px solid #000;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.h-row::-webkit-scrollbar { display: none; }
.h-row:focus-visible { outline: 3px solid #f6df5e; outline-offset: -3px; }
.h-row .pz-cv { grid-column: auto; scroll-snap-align: start; padding: 20px 16px 24px; }
.h-row .pz-cv__in { flex-direction: column; gap: 0; }
.h-row .pz-cv__pic { flex: none; width: auto; aspect-ratio: 4 / 5; margin: 0 0 14px; align-self: auto; }
.h-row .pz-cv__pic img, .h-bk .pz-cv__pic img { object-position: var(--op, 50% 30%); }
.h-row .pz-cv__t { font-size: clamp(26px, 13cqi, 38px); margin-bottom: 14px; }
.h-row .pz-acts, .h-bk .pz-acts { flex-wrap: nowrap; gap: 6px; }
.h-row .pz-b, .h-bk .pz-b { flex: 1; min-width: 0; padding: 0 8px; font-size: 18px; letter-spacing: 1px; min-height: 42px; }
@media (min-width: 1024px) {
    .h-row { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
}

/* ---------- variant B: hero and books in one bento of seven cells (title, plate, Core Rules, four booklets) ---------- */
.h-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; background: #000; border-bottom: 3px solid #000; }
.h-cell { min-width: 0; }
.h-cell--t { background: #fff; padding: 28px 16px; display: flex; flex-direction: column; gap: 24px; }
.h-cell--t .h-title { font-size: 27vw; }
.h-cell--t .h-title > span { display: block; }
.h-cell--t .h-sub { font-size: 20px; max-width: none; }
.h-cell--t .pz-acts { flex-direction: column; align-items: stretch; }
.h-cell--p { background: #f6df5e; position: relative; aspect-ratio: 579 / 500; overflow: hidden; }
.h-cell--p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; display: block; }
.h-bk { padding: 16px; min-height: 190px; }
.h-bk .pz-cv__in { flex-direction: row; gap: 16px; }
.h-bk .pz-cv__pic { flex: 0 0 36%; margin: 0; aspect-ratio: auto; align-self: stretch; }
.h-bk .pz-cv__t { font-size: clamp(26px, 8cqi, 34px); margin-bottom: 12px; }
@media (min-width: 601px) {
    .h-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h-bento .h-cell--t, .h-bento .h-cell--p, .h-bento .h-bk--lead { grid-column: 1 / -1; }
    .h-bento .h-bk:not(.h-bk--lead) { grid-column: auto; }
    .h-cell--t { padding: 36px 32px; }
    .h-cell--t .h-title { font-size: clamp(96px, 17vw, 150px); }
    .h-cell--t .h-title > span:not(.h-28) { display: inline; }
    .h-cell--t .pz-acts { flex-direction: row; align-items: center; }
    .h-cell--p { aspect-ratio: 21 / 9; }
    .h-bk--lead { min-height: 280px; }
}
@media (min-width: 1024px) {
    .h-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(clamp(430px, 52dvh, 540px), auto) 252px 252px; }
    .h-bento .h-cell--t { grid-column: 1 / span 7; padding: 40px 32px 36px; }
    .h-cell--t .h-title { font-size: clamp(80px, 10.2vw, 170px); }
    .h-bento .h-cell--p { grid-column: 8 / span 5; aspect-ratio: auto; }
    .h-bento .h-bk:not(.h-bk--lead), .h-bento .h-bk--lead { grid-column: span 4; }
    .h-bk { min-height: 0; padding: 18px 16px 20px; }
    .h-bk--lead { grid-row: span 2; padding: 20px 20px 24px; }
    .h-bk--lead .pz-cv__in { flex-direction: column; gap: 0; }
    .h-bk--lead .pz-cv__pic { flex: 1 1 0; min-height: 0; margin: 0 0 14px; align-self: auto; }
    .h-bk--lead .pz-cv__b { flex: none; }
    .h-bk--lead .pz-cv__t { font-size: clamp(34px, 11cqi, 52px); }
    .h-bk--lead .pz-b { font-size: 22px; min-height: 48px; }
}
.h-bk--lead .pz-cv__m { font-size: 14px; }

/* ---------- section heads ---------- */
.h-h2 { margin: 0; font-family: "Saira Condensed", sans-serif; font-weight: 800; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; text-transform: uppercase; }

/* ---------- six factions ---------- */
.h-fac { padding: 44px 32px 48px; border-bottom: 3px solid #000; }
.h-lead { margin: 10px 0 24px; font-style: italic; font-size: 22px; line-height: 1.3; }
.h-facs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; background: #000; border: 2px solid #000; }
.h-facs a { background: #fff; color: #000; display: flex; align-items: center; min-height: 76px; padding: 10px 16px; font-family: "Saira Condensed", sans-serif; font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; }
.h-facs a:hover { background: #f6df5e; }
.h-facs a:focus-visible, .h-go__c:focus-visible { outline: 3px solid #000; outline-offset: -3px; }

/* ---------- how to start: two tools and the table sheet ---------- */
.h-go { background: #000; color: #fff; padding: 48px 32px 52px; }
.h-go .h-h2 { color: #fff; font-size: clamp(40px, 5.2vw, 76px); margin-bottom: 28px; }
.h-go__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.h-go .h-go__c { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 6px 16px; align-items: start; border: 2px solid #fff; padding: 18px 20px 20px; color: #fff; text-decoration: none; min-height: 128px; }
.h-go__t { font-family: "Saira Condensed", sans-serif; font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; }
.h-go__d { grid-column: 1; font-family: "Ubuntu Mono", monospace; font-size: 14px; line-height: 1.4; }
.h-go .h-go__c .sw-arrow { grid-column: 2; grid-row: 1; margin: 8px 0 0; }
.h-go .h-go__c:hover { background: #f6df5e; border-color: #f6df5e; color: #000; }
.h-go .h-go__c:focus-visible { outline-color: #f6df5e; outline-offset: 3px; }
.h-go .h-go__c:hover:focus-visible { outline-color: #fff; }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
    .h-facs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- phone ---------- */
@media (max-width: 900px) {
    .h-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .h-hl { padding: 28px 16px 28px; gap: 24px; }
    .h-title { font-size: 27vw; }
    .h-title > span { display: block; }
    .h-sub { font-size: 20px; margin-bottom: 18px; max-width: none; }
    .h-hl .pz-acts { flex-direction: column; align-items: stretch; }
    .h-hl .pz-b, .h-hl .pz-b--big { padding: 0 14px; font-size: 22px; }
    .h-art { border-left: 0; border-top: 3px solid #000; aspect-ratio: 579 / 500; }
    .h-fac { padding: 32px 16px 36px; }
    .h-lead { font-size: 20px; }
    .h-go { padding: 36px 16px 40px; }
    .h-go__g { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .h-go .h-go__c { min-height: 0; }
}
@media (max-width: 560px) {
    .h-facs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h-facs a { font-size: 21px; min-height: 68px; padding: 10px 12px; }
}