/* P9 Everyone (is here): dated stamp wall delivered as a parcel (see assets/crowd.js).
   Client pick 8 Oct, from Design/variations/2026-10-08-crowd/parcel-final.html. Scoped to #crowd. */
#crowd { --page: var(--cotton); }
#crowd .sec__head { margin-bottom: var(--s6); }

/* the stamps */
#crowd .cr-stage { position: relative; }
#crowd .cr-stamps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 auto; max-width: 960px; padding: 0; text-align: left; }
#crowd .cr-stamp { --fill: var(--white); position: relative; padding: 12px; will-change: transform, opacity; background:
  radial-gradient(circle at 50% 0, var(--page) 5px, transparent 5.5px) 0 0 / 18px 18px repeat-x,
  radial-gradient(circle at 50% 100%, var(--page) 5px, transparent 5.5px) 0 100% / 18px 18px repeat-x,
  radial-gradient(circle at 0 50%, var(--page) 5px, transparent 5.5px) 0 0 / 18px 18px repeat-y,
  radial-gradient(circle at 100% 50%, var(--page) 5px, transparent 5.5px) 100% 0 / 18px 18px repeat-y,
  var(--fill);
  filter: drop-shadow(0 10px 16px rgba(16,22,52,.12)); }
#crowd .cr-stamp__in { position: relative; height: 100%; min-height: 172px; display: flex; flex-direction: column; padding: 16px 18px 18px; border: 2px solid var(--ink); border-radius: 6px; }
#crowd .cr-stamp__d { font: 700 14px/1 var(--text); }
#crowd .cr-stamp__n { margin-top: auto; padding-top: 24px; font: 800 clamp(34px, 3.6vw, 48px)/.95 var(--display); font-variation-settings: "wdth" 80; font-variant-numeric: tabular-nums; }
#crowd .cr-stamp__l { margin-top: 6px; font: 600 15px/1.35 var(--text); color: var(--ink-2); }
#crowd .cr-stamp--g { --fill: var(--green-soft); }
#crowd .cr-stamp--y { --fill: var(--gold-soft); }
#crowd .cr-stamp--f { --fill: var(--fuch-soft); }
#crowd .cr-stamp--now { --fill: var(--green); }
#crowd .cr-stamp--now .cr-stamp__l { color: var(--ink); }
#crowd .cr-stamp--now.is-unlit { --fill: var(--white); }
#crowd .cr-stamp--now.is-unlit .cr-stamp__l { color: var(--ink-2); }
#crowd .cr-stage.is-pre .cr-stamp { opacity: 0; }

/* corner peel: only the bottom-right corner lifts, the card never moves */
@property --cr-peel { syntax: '<length>'; inherits: true; initial-value: 0px; }
#crowd .cr-stamp { --cr-peel: 0px; transition: --cr-peel .35s var(--ease-out); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cr-peel)), calc(100% - var(--cr-peel)) 100%, 0 100%); }
#crowd .cr-stamp.is-peeled, #crowd .cr-stamp:focus-visible { --cr-peel: var(--peel, 88px); }
@media (hover: hover) { #crowd .cr-stamp:has(.cr-peel-hit:hover) { --cr-peel: var(--peel, 88px); } }
#crowd .cr-stamp:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
#crowd .cr-peel { position: absolute; right: 0; bottom: 0; width: var(--cr-peel); height: var(--cr-peel); filter: drop-shadow(-4px -4px 5px rgba(16,22,52,.25)); pointer-events: none; z-index: 2; }
#crowd .cr-peel i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 0 100%); background: linear-gradient(135deg, #FBF8F1 0%, #EDE6D8 36%, #CFC6B3 50%); }
#crowd .cr-peel svg { position: absolute; left: 7%; top: 7%; width: 46%; height: 46%; opacity: .8; transform: rotate(-12deg); }
#crowd .cr-peel-hit { position: absolute; right: 0; bottom: 0; width: 34%; height: 50%; z-index: 3; }

/* the parcel, hands and dust (built by crowd.js) */
#crowd .cr-delivery { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#crowd .cr-delivery > * { position: absolute; }
#crowd .cr-parcel { pointer-events: auto; z-index: 1; }
#crowd .cr-ground { height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(16,22,52,.32), rgba(16,22,52,0)); z-index: 0; }
#crowd .cr-dust { width: 22px; height: 22px; border-radius: 50%; background: #D9CBB4; z-index: 0; }
#crowd .cr-hand { overflow: visible; max-width: none; } /* the side hands are wider than a phone stage; the global svg max-width squashed them off-screen */
#crowd .cr-paper { position: absolute; inset: 0; border-radius: 8px; background: repeating-linear-gradient(100deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px), linear-gradient(160deg, #D2AC7B, #B98E5C); border: 2.5px solid var(--ink); }
#crowd .cr-twine { position: absolute; background: repeating-linear-gradient(45deg, #8A6038 0 3px, #5E3D22 3px 6px); box-shadow: 0 2px 3px rgba(16,22,52,.25); }
#crowd .cr-twine--h { left: -6px; right: -6px; top: calc(46% - 5px); height: 10px; }
#crowd .cr-twine--v { top: -6px; bottom: -6px; left: calc(50% - 5px); width: 10px; }
#crowd .cr-bow { position: absolute; left: 50%; top: 46%; width: 34%; aspect-ratio: 3 / 2; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; border-radius: 12px; cursor: pointer; }
#crowd .cr-bow svg { display: block; width: 100%; height: 100%; overflow: visible; }
#crowd .cr-loops, #crowd .cr-ends { transform-box: fill-box; }
#crowd .cr-loops { transform-origin: 50% 50%; }
#crowd .cr-ends { transform-origin: 50% 0; }
#crowd .cr-label { position: absolute; left: 6%; bottom: 9%; max-width: 38%; padding: 6px 10px; background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; font: 800 clamp(9px, 1.1vw, 12px)/1.25 var(--text); letter-spacing: .04em; transform: rotate(-2deg); }
#crowd .cr-postmark { position: absolute; left: 7%; top: 8%; width: 22%; aspect-ratio: 1; color: var(--ink); opacity: .75; transform: rotate(12deg); }

/* replay + sound, then the rotating quote */
#crowd .cr-ctl { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
#crowd .cr-textbtn { min-height: 44px; padding: 0 16px; border: 0; background: none; font: 700 15px/1 var(--text); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; border-radius: 10px; cursor: pointer; }
#crowd .cr-textbtn:hover { text-decoration-color: var(--fuch); }
#crowd .cr-lux-wrap { max-width: 1000px; margin: 80px auto 0; outline-offset: 10px; }
#crowd .cr-lux__clip { clip-path: inset(-200px -200px 0 -200px); padding-bottom: 22px; }
#crowd .cr-lux { position: relative; background: #FFFEFB; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(16,22,52,.28), 0 0 0 1px rgba(16,22,52,.08); display: grid; grid-template-columns: 1.7fr 1px 1fr; gap: 64px; padding: 80px 72px; min-height: 560px; text-align: left; }
#crowd .cr-lux__q { display: grid; align-items: center; }
#crowd .cr-lux__q figure { margin: 0; }
#crowd .cr-lux__q blockquote { margin: 0; font: 700 clamp(30px, 3.8vw, 50px)/1.08 var(--display); font-variation-settings: "wdth" 82; letter-spacing: -.015em; text-wrap: balance; }
#crowd .cr-lux__q figcaption { margin-top: 28px; font: 600 14px var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
#crowd .cr-lux__rule { background: rgba(16,22,52,.16); }
#crowd .cr-lux__side { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
#crowd .cr-lux__lines { align-self: stretch; display: grid; gap: 28px; }
#crowd .cr-lux__lines i { display: block; height: 1px; background: rgba(16,22,52,.18); }
#crowd .cr-pmark { position: absolute; width: 230px; height: 170px; right: 64px; top: 70px; pointer-events: none; }
#crowd .cr-lstamp { --c: 0px; --sfill: var(--green); position: relative; width: 116px; height: 140px; padding: 8px; flex: none; color: var(--ink); transition: --c .35s var(--ease-out);
  background: radial-gradient(circle at 50% 0, #FFFEFB 4px, transparent 4.5px) 0 0 / 13px 13px repeat-x, radial-gradient(circle at 50% 100%, #FFFEFB 4px, transparent 4.5px) 0 100% / 13px 13px repeat-x,
    radial-gradient(circle at 0 50%, #FFFEFB 4px, transparent 4.5px) 0 0 / 13px 13px repeat-y, radial-gradient(circle at 100% 50%, #FFFEFB 4px, transparent 4.5px) 100% 0 / 13px 13px repeat-y, var(--sfill);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%); }
#crowd .cr-lstamp[data-tone="gold"] { --sfill: var(--gold); }
#crowd .cr-lstamp[data-tone="fuch"] { --sfill: var(--fuch); }
#crowd .cr-lstamp__in { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 4px 4px; border: 1.5px solid var(--ink); border-radius: 2px; }
#crowd .cr-lstamp__in small { font: 800 8.5px/1 var(--text); letter-spacing: .12em; }
#crowd .cr-lstamp__in svg { width: 56px; height: 44px; }
#crowd .cr-lstamp__in b { align-self: flex-end; font: 800 17px/1 var(--display); font-variation-settings: "wdth" 80; }
#crowd .cr-lstamp__flap { position: absolute; right: 0; bottom: 0; width: var(--c); height: var(--c); filter: drop-shadow(-2px -2px 3px rgba(16,22,52,.3)); pointer-events: none; }
#crowd .cr-lstamp__flap i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 0 100%); background: linear-gradient(135deg, #FFFDF8 0%, #EFE9DC 40%, #D3CBB8 50%); }
@media (hover: hover) { #crowd .cr-lstamp:hover { --c: 26px; } }
#crowd .cr-lux__slot { position: relative; height: 26px; margin: -4px -1.5% 0; border-radius: 14px; background: linear-gradient(#C99A3B, #F2D78C 40%, #A87522); box-shadow: 0 10px 18px -8px rgba(16,22,52,.4); }
#crowd .cr-lux__slot::after { content: ""; position: absolute; left: 3%; right: 3%; top: 8px; height: 9px; border-radius: 6px; background: linear-gradient(#0B1030, #1B2350); box-shadow: inset 0 3px 4px rgba(0,0,0,.6); }
#crowd .cr-lux__ctrl { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 30px 0 var(--s8); }
#crowd .cr-lux__ctrl button { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
#crowd .cr-lux__ctrl button svg { width: 18px; height: 18px; }
#crowd .cr-lux__ctrl button:hover { background: var(--ink); color: var(--paper); }
#crowd .cr-lux__count { min-width: 44px; text-align: center; font: 700 14px var(--text); font-variant-numeric: tabular-nums; }
#crowd .cr-lux__auto { width: 64px; height: 2px; background: rgba(16,22,52,.12); border-radius: 1px; overflow: hidden; }
#crowd .cr-lux__auto i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

/* "Covered by": woven garment labels, two rows drifting in opposite directions (never pause; static row under reduced motion) */
#crowd .cr-press { display: flex; align-items: center; gap: 28px; margin-top: var(--s8); }
#crowd .cr-press__lbl { flex: none; white-space: nowrap; font: 700 15px var(--text); color: var(--ink-2); }
#crowd .cr-press__rows { flex: 1; min-width: 0; display: grid; gap: 16px; }
#crowd .cr-press__row { overflow: hidden; padding: 4px 0 14px; }
#crowd .cr-press__track { display: flex; }
#crowd .cr-press__set { display: flex; flex-wrap: wrap; gap: 14px 16px; margin: 0; padding: 0; list-style: none; }
#crowd .cr-press.is-moving .cr-press__row { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
#crowd .cr-press.is-moving .cr-press__track { width: max-content; will-change: transform; }
#crowd .cr-press.is-moving .cr-press__set { flex-wrap: nowrap; padding-right: 16px; }
#crowd .cr-press.is-moving .cr-press__row--a .cr-press__track { animation: crPress 40s linear infinite; }
#crowd .cr-press.is-moving .cr-press__row--b .cr-press__track { animation: crPress 52s linear infinite reverse; }
@keyframes crPress { to { transform: translateX(-50%); } }
#crowd .cr-wlabel { position: relative; display: inline-flex; flex-direction: column; justify-content: center; flex: none; min-width: 168px; height: 72px; padding: 0 26px 0 34px; white-space: nowrap;
  background-color: var(--fill, var(--paper)); color: var(--tc, var(--ink)); border-radius: 2px;
  background-image: repeating-linear-gradient(0deg, rgba(16,22,52,.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(16,22,52,.05) 0 1px, transparent 1px 2px);
  box-shadow: 0 1px 0 rgba(16,22,52,.12), 0 10px 16px -10px rgba(16,22,52,.4); }
#crowd .cr-wlabel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.04) 70%, rgba(255,255,255,.25)); border-right: 1px solid rgba(0,0,0,.12); }
#crowd .cr-wlabel::after { content: ""; position: absolute; top: 7px; bottom: 7px; left: 23px; right: 7px; border-left: 2px dashed currentColor; border-right: 2px dashed currentColor; opacity: .35; pointer-events: none; }
#crowd .cr-wlabel small { font: 800 9px/1 var(--text); letter-spacing: .26em; opacity: .75; }
#crowd .cr-wlabel b { margin-top: 5px; font: 700 21px/1 var(--display); font-variation-settings: "wdth" 85; }
#crowd .cr-wlabel:nth-child(6n+2) { --fill: var(--etu); --tc: var(--gold-soft); }
#crowd .cr-wlabel:nth-child(6n+3) { --fill: var(--gold-soft); }
#crowd .cr-wlabel:nth-child(6n+4) { --fill: var(--green-soft); }
#crowd .cr-wlabel:nth-child(6n+5) { --fill: var(--etu); --tc: var(--paper); }
#crowd .cr-wlabel:nth-child(6n) { --fill: var(--fuch-soft); }
@media (max-width: 760px) {
  #crowd .cr-press { flex-direction: column; align-items: stretch; gap: 14px; }
  #crowd .cr-wlabel { min-width: 150px; height: 64px; } #crowd .cr-wlabel b { font-size: 18px; }
}

@media (max-width: 760px) {
  #crowd .cr-stamps { grid-template-columns: 1fr 1fr; gap: 14px; }
  #crowd .cr-stamp { --peel: 64px; }
  #crowd .cr-stamp__in { min-height: 140px; padding: 12px; }
  #crowd .cr-lux-wrap { margin-top: 56px; }
  #crowd .cr-lux { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; min-height: 0; }
  #crowd .cr-lux__q { min-height: 250px; }
  #crowd .cr-lux__rule { height: 1px; }
  #crowd .cr-lux__side { flex-direction: row-reverse; align-items: flex-start; min-height: 150px; }
  #crowd .cr-pmark { width: 170px; height: 125px; right: 96px; top: 10px; }
  #crowd .cr-lux__lines { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #crowd .cr-stamp { transition: none; --cr-peel: 0px !important; }
  #crowd .cr-peel, #crowd .cr-peel-hit { display: none; }
  #crowd .cr-lstamp { transition: none; --c: 0px !important; }
  #crowd .cr-lstamp__flap, #crowd .cr-lux__auto { display: none; }
}
.reduce-motion #crowd .cr-stamp { transition: none; --cr-peel: 0px !important; }
.reduce-motion #crowd .cr-peel, .reduce-motion #crowd .cr-peel-hit { display: none; }
.reduce-motion #crowd .cr-lstamp { transition: none; --c: 0px !important; }
.reduce-motion #crowd .cr-lstamp__flap, .reduce-motion #crowd .cr-lux__auto { display: none; }

/* quote arrows: drawn chevrons, optically centred (client, 8 Oct) */
#crowd .cr-chev { width: 22px; height: 22px; display: block; margin: auto; }

/* client 9 Oct: no Replay buttons */
#crowd #cr-replay, #crowd .cr-ctl { display: none !important; }