/* =====================================================================
   SUBPAGES — construction measured from RDR2 feature pages
   (centered head + chevron, red poster panels with figures breaking the
   top edge, catalogue newsprint, paper slips)
   ===================================================================== */
.section{padding-top:var(--s7);padding-bottom:var(--s9)}

/* ---- page head (RDR: centered title, slab 20/32, subtitle, chevron) ---- */
.page-head{position:relative;text-align:center;padding:calc(var(--nav) + 72px) var(--s5) var(--s7);overflow:hidden}
.page-head .ph-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;opacity:.55}
.page-head:not(.plain)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.6) 0,rgba(11,11,11,.3) 45%,var(--bg) 100%)}
.ph-copy{position:relative;z-index:1;max-width:840px;margin:0 auto}
.page-head h1{font:700 clamp(64px,7vw,104px)/.86 var(--f-display);text-transform:uppercase;color:#fff;letter-spacing:-.5px;filter:url(#rough-lg)}
.page-head p{font:400 20px/32px var(--f-body);letter-spacing:-.5px;color:#fff;margin-top:var(--s5)}
.ph-sub{font:700 34px/1 var(--f-display);text-transform:uppercase;color:var(--red);margin-top:var(--s5);letter-spacing:.3px;filter:url(#rough-sm)}
.chev{display:block;width:16px;height:16px;margin:var(--s6) auto 0;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);opacity:.85;animation:chev 1.8s var(--ease) infinite}
@keyframes chev{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}}

/* ---- paper slip (ride panel, verifier) ---- */
.slip{position:relative;background:#e9dcc0 url(img/paper/wanted.jpg) center/cover;color:#2a2016;padding:var(--s5) var(--s5) var(--s6);box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.25)}
.slip::before{content:"";position:absolute;inset:10px;border:1.5px solid rgba(42,32,22,.55);outline:1px solid rgba(42,32,22,.3);outline-offset:3px;pointer-events:none}
.slip > *{position:relative}
.slip .muted,.slip p.muted{color:rgba(42,32,22,.72)!important}
.slip .eyebrow{color:rgba(42,32,22,.6)}
.slip .h3{color:#2a2016}
.slip-head{display:flex;justify-content:space-between;gap:12px;font:700 11px/1 var(--f-ui);letter-spacing:1.3px;text-transform:uppercase;color:rgba(42,32,22,.62);padding-bottom:12px;border-bottom:1px dashed rgba(42,32,22,.4)}
.slip-title{font:700 46px/.9 var(--f-display);text-transform:uppercase;color:#2a2016;margin:var(--s4) 0 var(--s2);filter:url(#rough-md)}

.ride.slip{position:sticky;padding:var(--s6) var(--s5)}
.slip .who{border-bottom:1px dashed rgba(42,32,22,.4)}
.slip .who .addr{color:#2a2016}
.slip .who .wanted i{background:rgba(42,32,22,.18)}
.slip .who .wanted i.on{background:var(--red)}
.slip .row{border-bottom:1px dashed rgba(42,32,22,.3);color:rgba(42,32,22,.7)}
.slip .row b{color:#2a2016}
.slip .stake{border:1.5px solid #2a2016;background:rgba(255,250,235,.45)}
.slip .stake:focus-within{border-color:#2a2016;box-shadow:0 0 0 3px rgba(42,32,22,.15)}
.slip .stake input{color:#2a2016}
.slip .stake span{color:rgba(42,32,22,.6)}
.slip .chips button{border-color:rgba(42,32,22,.45);color:#2a2016;background:rgba(255,250,235,.3)}
.slip .chips button:hover{border-color:#2a2016;background:rgba(255,250,235,.7)}
.slip .pill.solid{background:#1d1610;color:#f3e9d2}
.slip .pill.solid:hover{background:#000}
.slip .pill.outline{border-color:#2a2016;color:#2a2016}
.slip .pill.outline:hover{background:#2a2016;color:#f3e9d2}
.slip .err{color:#a3141a}
.slip .receipt{background:rgba(255,250,235,.5);border:1px dashed rgba(42,32,22,.45);color:rgba(42,32,22,.75)}
.slip .receipt b{color:#2a2016}
.slip .receipt .k{color:rgba(42,32,22,.55)}
.slip .connect-alt summary{color:rgba(42,32,22,.7)}
.slip .connect-alt summary:hover{color:#2a2016}
.slip .connect-alt input{background:rgba(255,250,235,.5);border-color:rgba(42,32,22,.5);color:#2a2016}
.slip .rollbar{background:rgba(42,32,22,.14)}
.slip .rollbar .zone{background:rgba(42,32,22,.32)}
.slip .rollbar-scale{color:rgba(42,32,22,.5)}
.slip .verdict{text-align:center;padding:var(--s2) 0 var(--s3);border-bottom:1px dashed rgba(42,32,22,.35);margin:0 0 var(--s3)}
.slip .verdict .line{color:rgba(42,32,22,.75)}

/* rubber stamp */
.stamp{display:inline-block;padding:10px 18px 6px;border:4px double currentColor;font:700 54px/.9 var(--f-display);text-transform:uppercase;letter-spacing:1px;transform:rotate(-5deg);filter:url(#rough-lg);mix-blend-mode:multiply;animation:stamp .32s cubic-bezier(.2,1.6,.4,1) both}
.stamp.win{color:#2c6b2f}
.stamp.lose{color:#b3121a}
@keyframes stamp{from{opacity:0;transform:rotate(-5deg) scale(1.6)}to{opacity:1;transform:rotate(-5deg) scale(1)}}

.job .odds{font-size:84px}
.job .img{box-shadow:0 14px 30px rgba(0,0,0,.4)}

/* ---- GANG posters (RDR van der Linde construction) ---- */
.posters{display:flex;flex-direction:column;gap:var(--s7);max-width:1600px;margin:var(--s4) auto 0;padding:0 var(--s6)}
.poster{position:relative;padding-top:130px}
.poster .name{position:absolute;right:28px;top:76px;z-index:3;font:700 56px/1 var(--f-display);text-transform:uppercase;color:#fff;letter-spacing:.5px;filter:url(#rough-md)}
.poster.flip .name{right:auto;left:28px}
.poster .panel{position:relative;height:540px;background:var(--red) center 70%/cover;clip-path:url(#band-soft)}
.poster .fig{position:absolute;z-index:2;bottom:110px;left:7%;height:660px;width:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
.poster.flip .fig{left:auto;right:7%}
.poster .quote{position:absolute;z-index:3;right:6%;top:230px;max-width:46%;text-align:right;font:700 clamp(34px,3.3vw,56px)/1 var(--f-display);text-transform:uppercase;color:#fff;letter-spacing:.3px;filter:url(#rough-md)}
.poster.flip .quote{right:auto;left:6%;text-align:left}
.poster .tagline{display:block;font:700 13px/1 var(--f-ui);letter-spacing:2px;color:rgba(255,255,255,.75);margin-bottom:14px;filter:none}
.poster .desc{position:relative;z-index:3;margin-top:-118px;padding:84px var(--s5) 0;text-align:center;background:linear-gradient(180deg,rgba(11,11,11,0),var(--bg) 46%)}
.poster .desc p{max-width:640px;margin:0 auto;font:400 20px/32px var(--f-body);color:#fff}
.roster-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.roster-head .filters{margin:0}

/* ---- VAULT gazette (RDR catalogue newsprint) ---- */
.gazette{position:relative;margin:var(--s7) 0 0;padding:44px 48px 40px;background:#d9d6cf url(img/paper/news.jpg) center/cover;color:#2e2e2c;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.gz-mast{text-align:center;border-top:6px double #3a3a37;border-bottom:6px double #3a3a37;padding:18px 0 14px}
.gz-mast .small{font:700 13px/1 var(--f-ui);letter-spacing:3px;text-transform:uppercase;color:#4a4a46}
.gz-mast h2{font:700 clamp(56px,7.2vw,116px)/.86 var(--f-display);text-transform:uppercase;color:#3a3a37;letter-spacing:-.5px;margin:10px 0 6px;filter:url(#rough-lg)}
.gz-mast .tag{font:700 clamp(22px,2.2vw,34px)/1 var(--f-display);text-transform:uppercase;color:#3a3a37;letter-spacing:.6px}
.gz-strip{display:flex;justify-content:space-around;flex-wrap:wrap;gap:8px 24px;padding:12px 0;border-bottom:2px solid #3a3a37;font:700 16px/1 var(--f-display);text-transform:uppercase;letter-spacing:1px;color:#3a3a37}
.gz-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.gz{position:relative;padding:26px 22px 24px;border-bottom:1px dashed #6b6b66}
.gz.br{border-right:1px dashed #6b6b66}
.gz.w2{grid-column:span 2}.gz.w3{grid-column:span 3}.gz.w4{grid-column:span 4}.gz.w6{grid-column:span 6}
.gz img{width:100%;height:210px;object-fit:contain;mix-blend-mode:multiply}
.gz.side{display:grid;grid-template-columns:42% 1fr;gap:26px;align-items:center}
.gz.side img{height:320px}
.gz .no{font:700 13px/1 var(--f-ui);letter-spacing:2px;color:#a3141a}
.gz h3{font:700 clamp(40px,3.9vw,66px)/.88 var(--f-display);text-transform:uppercase;color:#3a3a37;letter-spacing:-.3px;margin:8px 0 10px;filter:url(#rough-md)}
.gz.side h3{font-size:clamp(52px,5.2vw,92px)}
.gz .deck{font:700 21px/1.05 var(--f-display);text-transform:uppercase;color:#3a3a37;letter-spacing:.4px;margin-bottom:10px}
.gz p{font:400 16px/1.45 var(--f-body);letter-spacing:-.2px;color:#2e2e2c;text-align:justify;hyphens:auto}
.gz-foot{display:flex;justify-content:space-between;gap:12px;padding-top:14px;font:700 12px/1 var(--f-ui);letter-spacing:2px;text-transform:uppercase;color:#4a4a46}

/* ---- FAIR ---- */
.steps4{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);counter-reset:s}
.steps4 li{counter-increment:s;background:#e4e1da url(img/paper/news.jpg) center/cover;color:#2e2e2c;padding:20px 20px 24px;position:relative;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.steps4 li::before{content:counter(s,decimal-leading-zero);position:absolute;right:18px;top:16px;font:700 13px/1 var(--f-ui);letter-spacing:1.5px;color:#a3141a}
.steps4 img{width:100%;height:150px;object-fit:contain;mix-blend-mode:multiply}
.steps4 b{display:block;font:700 36px/.9 var(--f-display);text-transform:uppercase;color:#3a3a37;margin:12px 0 8px;filter:url(#rough-sm)}
.steps4 p{font:400 15.5px/1.45 var(--f-body);letter-spacing:-.2px;color:#2e2e2c}
.steps4 code.i{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.15);color:#1d1d1b}
.fair-desk{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:var(--s7);margin-top:var(--s8);align-items:start}
.verify.slip{padding:var(--s6) var(--s6) var(--s6)}
.verify.slip label{color:rgba(42,32,22,.65)}
.verify.slip input,.verify.slip select{background:rgba(255,250,235,.5);border:1.5px solid rgba(42,32,22,.55);color:#2a2016}
.verify.slip input::placeholder{color:rgba(42,32,22,.4)}
.verify.slip input:focus,.verify.slip select:focus{border-color:#2a2016;box-shadow:0 0 0 3px rgba(42,32,22,.15)}
.verify.slip select{background-image:linear-gradient(45deg,transparent 50%,#2a2016 50%),linear-gradient(135deg,#2a2016 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.slip-out{margin-top:var(--s5);padding-top:var(--s4);border-top:1px dashed rgba(42,32,22,.45);font:400 12.5px/1.55 ui-monospace,Consolas,monospace;color:rgba(42,32,22,.78);word-break:break-all;min-height:80px}
.slip-out .k{display:block;font:700 10.5px/1 var(--f-ui);letter-spacing:1.2px;text-transform:uppercase;color:rgba(42,32,22,.55);margin:10px 0 4px}
.slip-out .k:first-child{margin-top:0}
.slip-out b{color:#2a2016;font-weight:600}
.slip-out .stamp{display:table;font-size:46px;margin-top:var(--s4)}
.slip-out .hint{font:400 16px/1.45 var(--f-body);color:rgba(42,32,22,.7);word-break:normal}
.shell pre{background:#0d0d0d;border:1px solid var(--line);padding:var(--s5);font:400 14px/1.8 ui-monospace,Consolas,monospace;color:var(--ink-2);white-space:pre-wrap;word-break:break-all}

/* ---- WANTED wall ---- */
.wanted-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);align-items:start;padding-top:var(--s3)}
.wposter{background:#e9dcc0 url(img/paper/wanted.jpg) center/cover;color:#2a2016;padding:26px 26px 30px;text-align:center;box-shadow:0 22px 44px rgba(0,0,0,.5);transition:transform .25s var(--ease)}
.wposter:nth-child(1){transform:rotate(-1.6deg)}
.wposter:nth-child(2){transform:rotate(1.2deg) translateY(28px)}
.wposter:nth-child(3){transform:rotate(-.6deg) translateY(10px)}
.wposter:hover{transform:rotate(0) translateY(-4px)}
.wposter .w{font:700 clamp(64px,6vw,100px)/.84 var(--f-display);text-transform:uppercase;letter-spacing:1px;filter:url(#rough-lg)}
.wposter .sub{font:700 18px/1 var(--f-display);text-transform:uppercase;letter-spacing:2px;margin:8px 0 14px;border-top:2px solid #2a2016;border-bottom:2px solid #2a2016;padding:7px 0 5px}
.wposter .pic{aspect-ratio:1;background:rgba(255,250,235,.35);border:2px solid #2a2016;display:grid;place-items:center;overflow:hidden}
.wposter .pic img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply;filter:sepia(.35) contrast(1.05)}
.wposter .pic .none{font:700 64px/1 var(--f-display);color:rgba(42,32,22,.25);text-transform:uppercase}
.wposter .who{font:700 30px/1 var(--f-display);text-transform:uppercase;margin-top:14px;letter-spacing:.5px}
.wposter .rw{font:700 13px/1 var(--f-ui);letter-spacing:2px;text-transform:uppercase;margin-top:14px;color:rgba(42,32,22,.7)}
.wposter .amt{font:700 52px/.9 var(--f-display);margin-top:6px;filter:url(#rough-md)}
.wposter .stars{display:flex;justify-content:center;gap:5px;margin-top:12px}
.wposter .stars i{width:16px;height:16px;background:rgba(42,32,22,.2);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.wposter .stars i.on{background:#b3121a}

@media (max-width:1280px){
  .gz-grid{grid-template-columns:repeat(2,1fr)}
  .gz.w2,.gz.w3,.gz.w4{grid-column:span 1}
  .gz.w6{grid-column:span 2}
  .gz.br{border-right:0}
  .gz-grid > .gz:not(.w6):nth-child(odd){border-right:1px dashed #6b6b66}
  .steps4{grid-template-columns:repeat(2,1fr)}
  .poster .fig{height:540px}
}
@media (max-width:1080px){
  .fair-desk{grid-template-columns:minmax(0,1fr)}
  .ride.slip{position:relative;top:0}
  .wanted-wall{grid-template-columns:minmax(0,1fr);max-width:440px;margin:0 auto}
  .wposter:nth-child(n){transform:none}
  .roster-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  .page-head{padding:calc(var(--nav) + 40px) 16px var(--s6)}
  .page-head h1{font-size:60px}
  .page-head p{font-size:17px;line-height:28px}
  .ph-sub{font-size:26px}
  .posters{padding:0 12px;gap:var(--s6)}
  .poster{padding-top:72px}
  .poster .name,.poster.flip .name{top:20px;left:12px;right:auto;font-size:34px}
  .poster .panel{height:400px}
  .poster .fig,.poster.flip .fig{height:400px;left:50%;right:auto;transform:translateX(-50%);bottom:auto;top:40px}
  .poster .quote,.poster.flip .quote{position:relative;left:auto;right:auto;top:auto;max-width:none;text-align:center;font-size:28px;padding:20px 8px 0}
  .poster .desc{margin-top:0;padding-top:12px;background:none}
  .poster .desc p{font-size:16px;line-height:26px}
  .gazette{padding:24px 16px 28px}
  .gz-grid{grid-template-columns:minmax(0,1fr)}
  .gz.w2,.gz.w3,.gz.w4,.gz.w6{grid-column:span 1}
  .gz-grid > .gz:nth-child(n){border-right:0}
  .gz.side{grid-template-columns:1fr}
  .gz.side img,.gz img{height:180px}
  .gz-foot{flex-direction:column;align-items:center}
  .steps4{grid-template-columns:minmax(0,1fr)}
  .verify.slip{padding:var(--s5)}
  .slip-title{font-size:38px}
  .stamp{font-size:42px}
}
