/* Pilgrimage of the Penitent landing page (templates/collection.pilgrimage-of-the-penitent.json, sections/pop-*).
   Everything is scoped to .t-pop, the wrapper on every pop-* section root, so nothing leaks into the rest of the site.
   Accents come from each section's "Page accents" colour settings (--pk magenta, --gd gold, --pu purple); the values
   below are only the defaults sampled from the book cover. Louder than the rest of Chain Assembly on purpose. */
body:has(main .t-pop){background:#0b080b}
.t-pop{--pk:#e2339f;--gd:#f2c200;--pu:#6b1d6e;--ink:#0b080b;--bone:#f3ece4;background:var(--ink);color:var(--bone);overflow:hidden}
.t-pop section{position:relative;scroll-margin-top:24px}
.t-pop .wrap{position:relative;z-index:1}

/* type */
.t-pop .pop-eb{display:inline-block;font:800 calc(13px * var(--fs-b))/calc(16px * var(--fs-b)) var(--f-body);letter-spacing:.32em;text-transform:uppercase;color:var(--pk)}
.t-pop .pop-h1,.t-pop .pop-h2{font-family:var(--f-head);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;color:var(--gd);text-wrap:balance}
.t-pop .pop-h1{font-size:clamp(44px,5.8vw,88px);line-height:.92;margin:20px 0 28px;text-shadow:5px 5px 0 var(--pu);overflow-wrap:normal;word-break:keep-all;hyphens:none}
.t-pop .pop-h2{font-size:clamp(36px,5vw,72px);line-height:.92;margin-bottom:24px;text-shadow:4px 4px 0 var(--pu)}
.t-pop .pop-body{font:400 calc(18px * var(--fs-b))/calc(30px * var(--fs-b)) var(--f-body);max-width:680px;opacity:.92}

/* buttons: the site's riso button, gold face with a magenta halftone offset */
.t-pop .btn.pop-btn{background:var(--gd);color:var(--ink);border-radius:0}
.t-pop .btn.pop-btn::before{color:var(--pk);opacity:1}
.t-pop .btn.pop-btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px var(--pk)}
.t-pop .btn.pop-btn.ghost::before{display:none}
.t-pop .btn.pop-btn.ghost:hover{background:var(--pk);color:var(--ink)}
.t-pop .btn.pop-btn:disabled{background:#3a3238;color:var(--bone);opacity:1}
.t-pop .btn.pop-btn:disabled::before{display:none}

/* 4.1 hero */
.pop-hero{min-height:clamp(560px,88vh,900px);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.pop-hero-bg{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.pop-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:100% 35%}
.pop-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,8,11,calc(var(--ov,.55) + .35)) 0%,rgba(11,8,11,calc(var(--ov,.55) + .25)) 50%,rgba(11,8,11,calc(var(--ov,.55) - .3)) 72%,rgba(11,8,11,calc(var(--ov,.55) - .45)) 100%),linear-gradient(0deg,var(--ink) 0%,transparent 35%)}
.pop-hero-c{max-width:680px;padding:120px 0 72px}
.pop-lede{font:400 calc(20px * var(--fs-b))/calc(32px * var(--fs-b)) var(--f-body);max-width:620px}
.pop-by{margin-top:20px;font:700 calc(13px * var(--fs-b))/calc(18px * var(--fs-b)) var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--pk)}
.pop-q{margin-top:12px;font:italic 400 calc(16px * var(--fs-b))/calc(24px * var(--fs-b)) var(--f-body);opacity:.75;max-width:560px}
.pop-ctas{display:flex;flex-wrap:wrap;gap:20px 28px;margin-top:40px}
.pop-notice{position:relative;z-index:1;background:var(--pu);color:var(--bone);font:600 calc(12px * var(--fs-b))/calc(18px * var(--fs-b)) var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:12px 0}
.pop-notice .wrap{display:block}

/* 4.2 art and stats */
.pop-stats{padding:112px 0}
.pop-pair{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:end}
.pop-fr{margin:0;position:relative;background:#140f14;box-shadow:12px 12px 0 var(--pk)}
.pop-fr img{width:100%;height:auto}
.pop-fr-pin{box-shadow:12px 12px 0 var(--gd);align-self:center}
.pop-statrow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:88px;border-top:2px solid var(--pk);border-bottom:2px solid var(--pk)}
.pop-stat{padding:28px 20px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:6px;font:800 calc(12px * var(--fs-b))/calc(17px * var(--fs-b)) var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.pop-stat+.pop-stat{border-left:1px solid color-mix(in srgb,var(--pk) 45%,transparent)}
.pop-stat b{font:600 clamp(36px,4vw,56px)/1 var(--f-head);letter-spacing:0;color:var(--gd)}
.pop-stat.txt span{font-size:calc(13px * var(--fs-b));color:var(--bone)}

/* 4.3 theme */
.pop-theme{padding:120px 0;background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--pu) 55%,var(--ink)) 100%)}
.pop-theme .wrap{max-width:calc(900px + 2 * var(--gutter));text-align:center}
.pop-theme .pop-body{margin:0 auto;font-size:calc(20px * var(--fs-b));line-height:calc(34px * var(--fs-b))}

/* 4.4 how it plays */
.pop-play{padding:120px 0;background:color-mix(in srgb,var(--pu) 55%,var(--ink))}
.pop-steps{list-style:none;counter-reset:pop;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:24px}
.pop-step{counter-increment:pop;position:relative;padding:72px 28px 32px;background:var(--ink);border-top:6px solid var(--pk)}
.pop-step::before{content:counter(pop,upper-roman);position:absolute;top:18px;left:28px;font:600 calc(32px * var(--fs-h))/1 var(--f-head);color:var(--gd)}
.pop-step p{font:400 calc(17px * var(--fs-b))/calc(28px * var(--fs-b)) var(--f-body)}
.pop-step b{display:block;margin-bottom:8px;font:600 calc(24px * var(--fs-h))/calc(28px * var(--fs-h)) var(--f-head);text-transform:uppercase;color:var(--bone)}
.pop-note{margin-top:48px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 32px;align-items:center;padding:28px 32px;background:var(--gd);color:var(--ink)}
.pop-note b{font:800 calc(13px * var(--fs-b))/calc(18px * var(--fs-b)) var(--f-body);letter-spacing:.24em;text-transform:uppercase;padding:8px 14px;background:var(--ink);color:var(--gd)}
.pop-note p{font:600 calc(17px * var(--fs-b))/calc(26px * var(--fs-b)) var(--f-body)}

/* 4.5 toolbox */
.pop-toolbox{padding:120px 0}
.pop-tb{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;align-items:center}
.pop-icons{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:88px}
.pop-ic{display:flex;flex-direction:column;gap:10px}
.pop-ic-i{display:block;aspect-ratio:1;overflow:hidden;border:2px solid var(--pk);margin-bottom:8px}
.pop-ic-i img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:saturate(1.1);transition:transform .6s var(--ease)}
.pop-ic:hover .pop-ic-i img{transform:scale(1.05)}
.pop-ic b{font:600 calc(24px * var(--fs-h))/calc(28px * var(--fs-h)) var(--f-head);text-transform:uppercase;color:var(--gd)}
.pop-ic p{font:400 calc(16px * var(--fs-b))/calc(24px * var(--fs-b)) var(--f-body);opacity:.88}

/* 4.6 product rows (stock product card, .pc2.pop) */
.pop-prods{padding:112px 0}
.pop-prods+.pop-prods,.section:has(.pop-prods)+.section .pop-prods{padding-top:0}
.pop-prods-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 72px;align-items:end}
.pop-prods-h .pop-h2{margin-bottom:0}
.pc2.pop{--c:#1c121c;--cd:var(--pu);background:var(--ink);border-radius:0;padding:6px;box-shadow:0 0 0 2px color-mix(in srgb,var(--pk) 55%,transparent),0 24px 48px -16px rgba(0,0,0,.8)}
.pc2.pop:hover{box-shadow:0 0 0 2px var(--pk),0 36px 64px -16px rgba(0,0,0,.9)}
.pc2.pop .pc-in{border-radius:0}
.pc2.pop .pc-n{text-transform:uppercase;letter-spacing:.01em}
.pc2.pop .pc-p{color:var(--gd)}
/* the struck compare-at price sits above the price so price + button fit the framed (featured) card */
.pc2.pop .pc-p s{display:block;margin:0 0 2px}
.pc2.pop .add,.pc2.pop .ca-add{border-radius:0;background:var(--gd);color:var(--ink);letter-spacing:.12em;text-transform:uppercase}
.pc2.pop .add:hover,.pc2.pop .add.done,.pc2.pop .ca-add:hover,.pc2.pop .ca-add.done{background:var(--pk);color:var(--ink)}
.pc2.pop .pc-tag{border-radius:0;background:var(--pk);color:var(--ink)}
.pc2.pop.feat{padding:10px;background:var(--pk);box-shadow:10px 10px 0 var(--gd),0 36px 64px -16px rgba(0,0,0,.9)}
.pc2.pop.feat .pc-tag{background:var(--gd)}

/* 4.7 collector's edition */
.pop-coll{min-height:clamp(620px,92vh,980px);display:flex;align-items:center;isolation:isolate;padding:120px 0}
/* desktop: the photo fills the right side and fades into the ink behind the text, so the box stays visible */
.pop-coll-m{position:absolute;inset:0 0 0 34%;z-index:-2;background:#140f14}
.pop-coll-m img,.pop-coll-m video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(1.25) contrast(1.05)}
.pop-coll::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 34%,rgba(11,8,11,.55) 48%,rgba(11,8,11,0) 66%),radial-gradient(60% 70% at 72% 50%,color-mix(in srgb,var(--pk) 18%,transparent),transparent 70%)}
.pop-coll-c{max-width:540px}
.pop-coll .pop-h2{font-size:clamp(40px,5.6vw,84px)}
.pop-coll .pop-body{margin-bottom:32px}
.t-pop .pop-price{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:24px;font:600 calc(40px * var(--fs-h))/calc(44px * var(--fs-h)) var(--f-head);color:var(--gd)}
.t-pop .pop-price s{font:400 calc(22px * var(--fs-b))/calc(26px * var(--fs-b)) var(--f-body);color:var(--bone);opacity:.6}
.t-pop .pop-price .b-tag{background:var(--pk);color:var(--ink);padding:6px 12px;font:800 calc(12px * var(--fs-b))/calc(16px * var(--fs-b)) var(--f-body);letter-spacing:.18em}
.pop-low{margin:-8px 0 24px;font:800 calc(13px * var(--fs-b))/calc(18px * var(--fs-b)) var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--pk)}

/* 4.8 license */
.pop-lic{padding:48px 0 64px;border-top:1px solid color-mix(in srgb,var(--bone) 14%,transparent)}
.pop-lic .wrap{font:400 calc(12px * var(--fs-b))/calc(19px * var(--fs-b)) var(--f-body);opacity:.6;max-width:calc(900px + 2 * var(--gutter))}
.pop-lic p+p{margin-top:6px}

@media (prefers-reduced-motion:reduce){.pop-ic-i img{transition:none}}

/* tablet */
@media (max-width:1023px){
  .pop-tb,.pop-prods-h{grid-template-columns:1fr;gap:40px}
  .pop-icons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pop-statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pop-stat:nth-child(3){border-left:0}
  .pop-stat:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--pk) 45%,transparent)}
  .pop-steps{grid-template-columns:1fr}
}
/* phone */
@media (max-width:767px){
  .pop-hero-c{padding:96px 0 48px}
  .pop-hero .pop-h1{text-shadow:4px 4px 0 var(--pu)}
  .pop-ctas{flex-direction:column;align-items:stretch;gap:20px}
  .pop-ctas .btn{padding:18px 20px;font-size:calc(12px * var(--fs-b));letter-spacing:.1em}
  .pop-stats,.pop-theme,.pop-play,.pop-toolbox,.pop-prods{padding:80px 0}
  .pop-pair{grid-template-columns:1fr;gap:40px}
  .pop-fr{box-shadow:8px 8px 0 var(--pk);margin-right:8px}
  .pop-fr-pin{box-shadow:8px 8px 0 var(--gd);max-width:420px}
  .pop-statrow{margin-top:56px}
  .pop-stat{padding:22px 12px}
  .pop-note{grid-template-columns:1fr;padding:24px}
  .pop-note b{justify-self:start}
  .pop-icons{gap:32px 16px;margin-top:56px}
  .pc2.pop.feat{box-shadow:6px 6px 0 var(--gd)}
  .pop-coll{min-height:0;flex-direction:column;align-items:stretch;padding:0 0 64px}
  .pop-coll-m{position:relative;inset:auto;aspect-ratio:4/5;z-index:0}
  .pop-coll-m img{filter:brightness(1.2)}
  .pop-coll::before{display:none}
  .pop-coll-m::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,var(--ink))}
  .pop-coll-c{position:relative;z-index:1;margin-top:-72px}
  .pop-coll .btn{width:100%;padding:18px 20px;font-size:calc(12px * var(--fs-b));letter-spacing:.1em}
}