/* v3 · art direction from the Pinterest board "py_core.png" (2026-11-12)
   Retro ad print + rebel-creator symbols. Black, newsprint, ONE spot red.
   Red only means: control (the strings), the choice (red pill, coupon), the one who leaves (red figure), YOU. */
:root { --red: #D42A20; --red-dk: #A81E16; }

/* ---------- small red touches on the v2 system ---------- */
.mast { border-bottom-color: var(--ink); box-shadow: 0 6px 0 -3px var(--red); }
.head .pg { color: var(--red); }
.result b { color: var(--red); }
.strip-title span { color: var(--red); }
.bonus { background: var(--red); border-color: var(--red); }
.bonus b { color: var(--red); }

/* Jo turns red once she decides (panel 3 on): she's the one who leaves the crowd */
.strip .panel:nth-child(n+3) .man.jo { fill: var(--red); }
.strip .panel:nth-child(n+3) .man.jo .limb { stroke: var(--red); }

/* ---------- 1 · hero: the recruitment poster ---------- */
.field.poster { background: var(--red); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 22px 30px; gap: 0; color: var(--paper); text-align: center; }
.poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(../assets/img/paper.jpg) repeat; background-size: 512px; mix-blend-mode: multiply; opacity: .55; }
.poster .p-top { width: 100%; display: flex; justify-content: space-between; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 7px 2px; font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.poster .kitch { width: min(86%, 470px); height: auto; margin: 14px 0 -6px; transform-origin: 50% 90%; }
.poster .p-line { font: 400 clamp(20px, 2.3vw, 32px)/1 var(--hd); text-transform: uppercase; letter-spacing: .02em; background: var(--ink); color: var(--paper); padding: 8px 14px 9px; position: relative; z-index: 2; }
.poster .p-you { font: 400 clamp(120px, 15vw, 210px)/.82 var(--hd); text-transform: uppercase; color: var(--paper); margin-top: 8px; letter-spacing: .01em; text-shadow: 6px 6px 0 var(--ink); }
.poster .p-foot { margin-top: 14px; font: 700 13px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.js .poster .kitch { opacity: 0; transform: translateY(40px) scale(.94); transition: opacity .8s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.js .poster.on .kitch { opacity: 1; transform: none; }
.js .poster .p-you { transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1) .55s, opacity .2s ease .55s; }
.js .poster.on .p-you { transform: none; opacity: 1; }
.bang { left: -150px; top: 650px; }

/* ---------- 2b · the puppet strings ---------- */
.strings { margin: 0 0 92px; border: 4px solid var(--ink); background: var(--ink); position: relative; }
.strings svg { display: block; width: 100%; height: auto; }
.strings figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; justify-content: center; padding: 14px 18px 16px; background: var(--paper); border-top: 4px solid var(--ink); text-align: center; }
.strings figcaption b { font: 400 clamp(24px, 2.6vw, 36px)/1 var(--hd); text-transform: uppercase; color: var(--red); }
.strings figcaption span { font: italic 400 18px/1.35 var(--serif); }
.js .strings path[stroke="#D42A20"] { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s ease .2s; }
.js .strings.in path[stroke="#D42A20"] { stroke-dashoffset: 0; }
.js .strings svg > g { transition: transform 1.4s cubic-bezier(.3,1.4,.5,1); }

/* ---------- 3 · the fork ---------- */
.fork { margin: 0 0 28px; border: 4px solid var(--ink); background: var(--paper); }
.fork svg { display: block; width: 100%; height: auto; }
.fork figcaption { display: grid; grid-template-columns: 1fr 1fr 1.2fr; border-top: 4px solid var(--ink); }
.fork figcaption > * { padding: 12px 16px; font: 400 16px/1.35 var(--serif); }
.fork figcaption > * + * { border-left: 2px solid var(--ink); }
.fork figcaption b { background: var(--red); color: var(--paper); font-weight: 700; }

/* ---------- 3b · create, don't consume ---------- */
.create { position: relative; background: var(--ink); color: var(--paper); margin: 44px 0; border: 4px solid var(--ink); overflow: hidden; }
.create .hands { margin: 0; position: relative; }
.create .hands img { display: block; width: 100%; height: auto; }
.create .win { position: absolute; left: 45.5%; top: 18%; width: 9%; height: 44%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.create .win::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 16px; border-bottom: 2px solid var(--paper); background: var(--red); }
.create .win i { position: absolute; top: 1px; left: 6px; font: 700 10px/14px var(--mono); font-style: normal; letter-spacing: .06em; color: var(--paper); white-space: nowrap; }
.create-copy { padding: 20px clamp(18px, 4vw, 48px) 34px; text-align: center; }
.cc-a { font: 400 clamp(26px, 3.4vw, 46px)/1.05 var(--hd); text-transform: uppercase; }
.cc-a s { text-decoration: none; position: relative; color: #8d8a83; }
.cc-a s::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: .14em; background: var(--red); transform: rotate(-4deg); }
.cc-b { font: 400 clamp(54px, 8vw, 118px)/.9 var(--hd); text-transform: uppercase; color: var(--red); margin: 6px 0 14px; }
.cc-c { font: 400 18px/1.5 var(--serif); max-width: 560px; margin: 0 auto; color: #d9d5cb; }

/* ---------- 4 · steps: the summit poster ---------- */
.stk.summit { width: 210px; right: 14px; top: -300px; background: var(--red); padding: 12px 12px 10px; border: 3px solid var(--ink); filter: var(--sticker-shadow); }
.summit img { display: block; width: 100%; height: auto; margin-top: 44px; }
.summit .climber { position: absolute; left: 44%; top: 34px; width: 22px; height: 52px; fill: var(--ink); }
.summit figcaption { color: var(--paper); text-align: center; padding-top: 6px; }
.summit figcaption b { display: block; font: 400 34px/1 var(--hd); text-transform: uppercase; }
.summit figcaption span { font: 700 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- 5 · proof: tabloid flag ---------- */
.case.tabloid { padding-top: 0; }
.case .flag { margin: 0 -1px 14px; background: var(--red); color: var(--paper); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
.case .flag b { font: 400 clamp(26px, 3vw, 38px)/1 var(--hd); text-transform: uppercase; letter-spacing: .01em; font-style: italic; }
.case .flag span { font: 700 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- 6b · fit: the flyer + the blindfolded bust ---------- */
.fit-art { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin: 0 0 22px; }
.fit-art figure { margin: 0; border: 4px solid var(--ink); position: relative; }
.fit-art figcaption { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; border-top: 4px solid var(--ink); background: var(--paper); }
.flyer { background: var(--paper); }
.flyer svg { display: block; width: 100%; height: auto; }
.flyer figcaption { color: var(--red); }
.bust { background: var(--ink); overflow: hidden; display: flex; flex-direction: column; }
.bust img { display: block; width: 100%; height: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: 50% 30%; }
.bust .blind { position: absolute; left: 6%; right: 6%; top: 39%; height: 13%; background: var(--red); transform: rotate(-4deg); display: grid; place-items: center; font: 400 clamp(20px, 2.4vw, 32px)/1 var(--hd); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); }
.js .bust .blind { transform: rotate(-4deg) scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.8,.2,1) .4s; }
.js .bust.in .blind { transform: rotate(-4deg) scaleX(1); }

/* ---------- 7 · the pills + no salesman will call ---------- */
.pills { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; background: var(--ink); color: var(--paper); border: 4px solid var(--ink); padding: 28px clamp(16px, 3vw, 40px); margin-bottom: 22px; text-align: center; }
.pill-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pill { display: block; width: 92px; height: 42px; border-radius: 21px; transform: rotate(-24deg); margin-bottom: 14px; box-shadow: inset -8px -8px 0 rgba(0,0,0,.25), inset 6px 6px 0 rgba(255,255,255,.18); }
.pill.black { background: #2b2a28; border: 3px solid var(--paper); }
.pill.red { background: var(--red); border: 3px solid var(--paper); transform: rotate(24deg); }
.pill-col b { font: 400 clamp(22px, 2.4vw, 32px)/1 var(--hd); text-transform: uppercase; }
.pill-col:last-child b { color: var(--red); }
.pill-col small { font: italic 400 16px/1.3 var(--serif); color: #cfcbc1; }
.pills-or { font: 400 italic 30px/1 var(--serif); color: #8d8a83; }
.coupon .nosales { position: absolute; right: 16px; top: 14px; transform: rotate(9deg); border: 3px solid var(--red); color: var(--red); font: 400 15px/1.05 var(--hd); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 6px 9px; outline: 1px solid var(--red); outline-offset: 2px; }
.btn { background: var(--red); border-color: var(--red); }

@media (max-width: 900px) {
  .fork figcaption { grid-template-columns: 1fr; }
  .fork figcaption > * + * { border-left: 0; border-top: 2px solid var(--ink); }
  .fit-art { grid-template-columns: 1fr; }
  .stk.summit { position: relative; right: auto; top: auto; margin: 16px auto 0; width: 210px; }
  .create .win i { font-size: 8px; }
  .field.poster { aspect-ratio: auto; min-height: 0; }
  .bang { left: auto; right: 10px; top: -40px; }
}
@media (max-width: 560px) {
  .pills { grid-template-columns: 1fr; }
  .poster .p-top span:last-child { display: none; }
  .poster .p-top { justify-content: center; }
  .coupon .nosales { top: -34px; right: 6px; font-size: 12px; background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .js .poster .kitch, .js .poster .p-you, .js .bust .blind { opacity: 1; transform: none; transition: none; }
  .js .strings path[stroke="#D42A20"] { stroke-dashoffset: 0; transition: none; }
}