/* ============================================================
   CHOICES v2 · inner pages: shop, drops, story, notify, 404
   Loaded after styles.css. Extends the wall kit in DESIGN.md
   (wall band, tag heading, paste-up, tape, sticker, buttons) and
   never restyles the header, drawer or footer.
============================================================ */

/* ---------- shared (the page-head primitive itself lives in styles.css) ---------- */
.stage .tag-h,.arc .tag-h,.craft .tag-h,.mural .tag-h{width:fit-content;max-width:100%}
.arc,.shop-grid,.story{padding-top:var(--sp-7)}

/* tape label: a torn scrap of the tape strip, marks a drop's state */
.tape-l{display:inline-block;padding:8px 14px 7px;font-size:11px;font-weight:900;font-variation-settings:"wdth" 112;letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap;color:#08080a;background:var(--wing);transform:rotate(-3deg);clip-path:polygon(3% 8%,97% 0,100% 34%,96% 64%,99% 100%,2% 92%,0 60%,4% 30%)}
.tape-l.royal{background:var(--royal-deep);color:#f0f0f0}

/* photo paste-up: a campaign print wheatpasted with tape (reuses .paste tape + settle) */
.paste.photo .paste-sheet{aspect-ratio:auto;padding:2.4%}
.paste.photo .paste-sheet img{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:var(--ar,16/9);object-fit:cover;filter:contrast(1.06) saturate(.92)}
figure.paste:hover .paste-sheet{transform:rotate(var(--rot,0deg));box-shadow:0 22px 44px -16px rgba(0,0,0,.95),0 4px 12px rgba(0,0,0,.55)}

/* ---------- shop: fit, sizing and blanks band ---------- */
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--sp-8);border-top:1px solid var(--line);border-bottom:1px solid var(--line);counter-reset:sp}
.spec li{position:relative;padding:var(--sp-6) var(--sp-4) var(--sp-5);counter-increment:sp}
.spec li+li{border-left:1px solid var(--line-2)}
.spec li::before{content:counter(sp,decimal-leading-zero);position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--stone)}
.spec-k{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
.spec-v{display:block;margin-top:var(--sp-3);font-weight:900;font-variation-settings:"wdth" 112;text-transform:uppercase;font-size:clamp(20px,2vw,30px);line-height:1;letter-spacing:.01em;color:var(--wing)}
.spec-s{margin-top:var(--sp-3);max-width:36ch;font-size:14.5px;line-height:1.6;color:var(--stone)}
.spec-s a{color:var(--bone);border-bottom:1px solid var(--line);transition:color .25s,border-color .25s}
.spec-s a:hover{color:var(--ice);border-color:var(--ice)}

/* ---------- drops: every drop, numbered ---------- */
.arc-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);align-items:center}
.arc-media{grid-column:1 / span 7;position:relative;padding-top:14px}
.arc-media .pp-b{width:54%;margin:-10% 2% 0 auto;z-index:2}
.arc-01 .arc-info{grid-column:9 / span 4}
.arc-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4);font-weight:900;font-variation-settings:"wdth" 112;text-transform:uppercase;font-size:clamp(20px,1.9vw,28px);line-height:1.05;letter-spacing:.01em;color:var(--wing)}
.arc-facts{margin-top:var(--sp-5);border-top:1px solid var(--line)}
.arc-facts li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 2px;border-bottom:1px solid var(--line-2);font-size:13px;font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:.12em;text-transform:uppercase;color:var(--wing)}
.arc-facts li::before{content:"\2726";font-size:12px;color:var(--royal)}
.arc-pieces{display:flex;flex-wrap:wrap;gap:var(--sp-1) 9px;margin-top:var(--sp-4);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.6;color:var(--stone)}
.arc-pieces a{white-space:nowrap;transition:color .25s}
.arc-pieces a:hover{color:var(--ice)}
.arc-pieces a:not(:last-child)::after{content:"\00B7";padding-left:9px;color:var(--stone)}
.arc-cta{margin-top:var(--sp-5)}
.arc-02{margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid var(--line-2)}
.arc-02 .arc-info{grid-column:2 / span 4}
.arc-02 .torn{grid-column:7 / span 5}
.arc-sub{margin-top:var(--sp-4);max-width:34ch;font-size:15.5px;line-height:1.6;color:var(--stone)}
.arc-02 .tlink{margin-top:var(--sp-5)}

/* torn blank paste-up: the next drop, still unwritten */
.torn{position:relative;width:100%;max-width:480px;justify-self:end;container-type:inline-size}
.torn-sheet{position:relative;transform:rotate(var(--rot,1.6deg));filter:drop-shadow(0 22px 24px rgba(0,0,0,.9)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.torn-sheet::before,.torn-sheet::after{content:"";position:absolute;z-index:3;top:-13px;width:26%;height:28px;background:rgba(232,230,224,.68);clip-path:polygon(3% 8%,97% 0,100% 34%,96% 64%,99% 100%,2% 92%,0 60%,4% 30%);pointer-events:none}
.torn-sheet::before{left:-4%;transform:rotate(-8deg)}
.torn-sheet::after{right:-4%;transform:rotate(9deg)}
.torn-paper{position:relative;aspect-ratio:1/1.1;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,3vw,40px) 7.5% 36%;background:var(--paper) url(assets/wall/paper.webp) center/cover;color:#0b0b0c;clip-path:polygon(0 0,100% 0,100% 67%,97.2% 74.5%,94.6% 69.8%,90.1% 78.2%,87.3% 71.6%,83.4% 80.4%,80.8% 73.1%,74.9% 82.6%,71.6% 75.4%,67.9% 88.1%,64.4% 77.2%,59.1% 84.9%,55.8% 78.6%,50.2% 87.3%,46.9% 80.4%,41.1% 90.8%,37.6% 82.1%,33.4% 89.4%,29.1% 95.6%,24.6% 85.7%,19.3% 93.2%,15.4% 86.4%,9.8% 97.1%,5.1% 88.9%,0 96.2%)}
.torn-w{font-weight:900;font-variation-settings:"wdth" 118;text-transform:uppercase;font-size:clamp(30px,3.4vw,48px);font-size:10cqi;line-height:.86;letter-spacing:-.02em;color:rgba(11,11,12,.88);mix-blend-mode:multiply}

/* ---------- story ---------- */
.story-grid,.craft-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px)}
.story-grid{align-items:start}
.story-lede{grid-column:1 / span 6;font-size:clamp(23px,2.35vw,36px);font-weight:600;font-variation-settings:"wdth" 104;line-height:1.3;letter-spacing:-.005em;color:var(--wing)}
.story-body{grid-column:8 / span 5;padding-top:clamp(6px,.8vw,12px)}
.story-body p{font-size:clamp(16px,1.2vw,18px);line-height:1.75;color:var(--stone)}
.story-body p+p{margin-top:1.5em}
.story-body strong{font-weight:700;color:var(--wing)}
.spray{position:relative;isolation:isolate;display:inline-block;white-space:nowrap}
.spray::before{content:"";position:absolute;z-index:-1;left:-4%;right:-6%;top:-52%;height:212%;background:var(--royal);opacity:.55;-webkit-mask:url(assets/wall/spray-stroke.webp) center/100% 100% no-repeat;mask:url(assets/wall/spray-stroke.webp) center/100% 100% no-repeat;transform:rotate(-1.5deg);pointer-events:none}
.mural-line{margin-top:var(--sp-3);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.craft-grid{align-items:center}
.craft-img{grid-column:1 / span 6}
.craft-in{grid-column:8 / span 5}
.craft-lede{margin-top:var(--sp-4);font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--stone)}
.craft-notes{margin-top:var(--sp-5);border-top:1px solid var(--line);counter-reset:cn}
.craft-notes li{display:grid;grid-template-columns:clamp(100px,8.4vw,128px) minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-4) 2px var(--sp-4) 0;border-bottom:1px solid var(--line-2);counter-increment:cn}
.cn-k{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:900;font-variation-settings:"wdth" 112;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;color:var(--wing)}
.cn-k::before{content:counter(cn,decimal-leading-zero);font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--stone)}
.craft-notes p{font-size:15px;line-height:1.6;color:var(--stone)}

/* ---------- stage: one screen of wall (notify, 404) ---------- */
.stage{min-height:calc(100svh - 64px);display:flex;align-items:center;padding:var(--sp-5) 0}
.stage>.wrap{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.stage-mark{width:clamp(200px,18vw,260px);height:auto}
.notify-w .poster{width:100%;max-width:700px;margin-top:var(--sp-4);text-align:left}
.notify-w .poster-sheet{padding-top:var(--sp-6)}
.notify-w .poster-h{font-size:clamp(44px,4.8vw,70px)}
.notify-soc{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-5)}
.notify-handle{font-size:clamp(15px,1.3vw,18px);font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:.03em;color:var(--wing)}
.nf{min-height:min(calc(100svh - 64px),640px)}
.nf .stage-mark{width:clamp(170px,15vw,220px)}
.nf .eb{margin-top:var(--sp-4)}
.nf .tag-h{justify-content:center;margin:var(--sp-3) auto 0}
.nf .ph-line{margin:var(--sp-3) auto 0}
.nf-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-5)}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1024px){
  .arc-media,.arc-01 .arc-info,.arc-02 .arc-info,.arc-02 .torn{grid-column:1 / -1}
  .arc-01 .arc-info{margin-top:var(--sp-7);max-width:640px}
  .arc-02 .torn{justify-self:center;max-width:440px;margin-top:var(--sp-7)}
}
@media (max-width:820px){
  .spec{grid-template-columns:1fr;margin-top:var(--sp-8);border-bottom:0}
  .spec li{padding:var(--sp-5) 4px var(--sp-5) 44px;border-bottom:1px solid var(--line-2)}
  .spec li+li{border-left:0}
  .spec li::before{top:31px;left:6px}
  .arc-media .pp-b{width:64%;margin-top:-8%}
  .arc-02{margin-top:var(--sp-8);padding-top:var(--sp-7)}
  .arc-02 .torn{justify-self:end;max-width:min(440px,84%);margin-top:var(--sp-6)}
  .story-grid,.craft-grid{grid-template-columns:minmax(0,1fr)}
  .story-lede,.story-body,.craft-img,.craft-in{grid-column:1 / -1}
  .story-body{margin-top:var(--sp-5);padding-top:0}
  .craft-in{margin-top:var(--sp-7)}
  .stage{min-height:calc(100svh - 60px);padding:var(--sp-5) 0}
  .stage-mark{width:min(200px,56vw)}
  .nf{min-height:min(calc(100svh - 60px),600px)}
  .nf .stage-mark{width:min(170px,48vw)}
  .notify-soc{flex-direction:column;align-items:stretch;width:100%;max-width:460px}
  .notify-soc .follow-btns .btn{flex:1 1 140px}
  .nf-cta{width:100%;max-width:460px}
  .nf-cta .btn{flex:1 1 140px}
}
@media (max-width:560px){
  .story-lede{font-size:21px}
  .craft-notes li{grid-template-columns:minmax(0,1fr);gap:6px}
}