/* BOOKTILY_PAQCARD_SCMA_REWRITE_V1 + BOOKTILY_PAQCARD_GEOMETRY_V2 — see MANIFEST_PAQCARD_SCMA_REWRITE_CORETRIA_EXTRACT_20260619.txt */
/* modules/paqcard/paqcard.css
   ===========================
   THE PaQ Card geometry authority. This file — and only this file — defines a
   PaQ card's box: width, height, min-height, flex, aspect-ratio, border-radius.

   HARD RULE (the reason the card broke for 48h was that this rule did not exist):
     No other stylesheet may set width / height / min-height / flex / aspect-ratio
     on `.paq-card` or any `.paq-<size>` selector. Containers (feed grid, hero
     slots) POSITION cards; they never RESIZE them. To render a card smaller, wrap
     it in `.paq-fit` and set `--s` — never override the card's width.

   Single namespace: a card is `.paq-card` + one of `.paq-slim | .paq-standard |
   .paq-tall | .paq-feature`. Internals (`.pack-art`, `.pack-label`,
   `.overlay-meta`, `.design-*`, …) are single-authored here and emitted by
   paqcard.js; they are not duplicated anywhere.

   Sizes (PaQ Card System spec — width LOCKED at 248px, only height varies):
     slim     248 × 300   (title 18px)
     standard 248 × 372   (title 20px, default)
     tall     248 × 468   (title 23px)
     feature  248 × 560   (title 28px)
*/

:root {
  --paq-w-slim: 248px;     --paq-h-slim: 300px;
  --paq-w-standard: 248px; --paq-h-standard: 372px;
  --paq-w-tall: 248px;     --paq-h-tall: 468px;
  --paq-w-feature: 248px;  --paq-h-feature: 560px;
  --paq-radius: 16px;
}

/* ---- base card ----------------------------------------------------------- */
.paq-card {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --packA: #5c271f;
  --packB: #a0462a;
  --packC: #d59d55;
  --packGlow: #ffdda0;
  --packImageOpacity: .24;
  --packImageBlur: 12px;
  --packShapeOpacity: .9;
  position: relative;
  display: block;
  flex: 0 0 248px;
  width: 248px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: #18140f;
  border: 1px solid color-mix(in srgb, white 18%, transparent);
  box-shadow: 0 18px 52px color-mix(in srgb, #000 32%, transparent);
  transform: translateZ(0);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  border-radius: var(--paq-radius);
  min-height: 372px;
  text-decoration: none;
}
.paq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 74px color-mix(in srgb, #000 38%, transparent);
  border-color: color-mix(in srgb, white 32%, transparent);
}

/* ---- sizes (the ONLY width/height authority) ----------------------------- */
.paq-card.paq-slim {
  flex: 0 0 var(--paq-w-slim); width: var(--paq-w-slim);
  height: var(--paq-h-slim); min-height: var(--paq-h-slim);
  border-radius: var(--paq-radius);
}
.paq-card.paq-standard {
  flex: 0 0 var(--paq-w-standard); width: var(--paq-w-standard);
  height: var(--paq-h-standard); min-height: var(--paq-h-standard);
  border-radius: var(--paq-radius);
}
.paq-card.paq-tall {
  flex: 0 0 var(--paq-w-tall); width: var(--paq-w-tall);
  height: var(--paq-h-tall); min-height: var(--paq-h-tall);
  border-radius: var(--paq-radius);
}
.paq-card.paq-feature {
  flex: 0 0 var(--paq-w-feature); width: var(--paq-w-feature);
  height: var(--paq-h-feature); min-height: var(--paq-h-feature);
  border-radius: var(--paq-radius);
}

/* ---- scaling primitive --------------------------------------------------- *
 * Render a card at a fraction of intrinsic size WITHOUT touching its width.
 * The wrapper reserves the scaled footprint so surrounding layout stays correct.
 * Default footprint is slim; a consumer scaling a non-slim card sets
 * --paq-fit-w / --paq-fit-h. Used by the hero module. */
.paq-fit {
  --s: 1;
  --paq-fit-w: var(--paq-w-slim);
  --paq-fit-h: var(--paq-h-slim);
  width: calc(var(--paq-fit-w) * var(--s));
  height: calc(var(--paq-fit-h) * var(--s));
  flex: 0 0 auto;
}
.paq-fit > .paq-card {
  transform: scale(var(--s));
  transform-origin: top left;
}
.paq-fit > .paq-card:hover { transform: scale(var(--s)) translateY(-4px); }

/* ---- art layers ---------------------------------------------------------- */
.pack-art { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
/* Art bed (z0) — the documented artString recipe: two corner radials
   (glow @ 20% alpha top-left, c @ 40% alpha bottom-right) over a 152° linear. */
.pack-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--packColorZ, 10);
  background:
    radial-gradient(120% 110% at 16% 8%, color-mix(in srgb, var(--packGlow) 20%, transparent), transparent 46%),
    radial-gradient(96% 90% at 90% 96%, color-mix(in srgb, var(--packC) 40%, transparent), transparent 52%),
    linear-gradient(152deg, var(--packB), var(--packA) 80%);
}
/* Scrim (z5) — bottom-up dark so footer chrome stays legible. */
.pack-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8,6,4,.7));
}
.pack-color-layer { position: absolute; inset: 0; z-index: var(--packColorZ, 10); background: radial-gradient(120% 110% at 16% 8%, color-mix(in srgb, var(--packGlow) 20%, transparent), transparent 46%), radial-gradient(96% 90% at 90% 96%, color-mix(in srgb, var(--packC) 40%, transparent), transparent 52%), linear-gradient(152deg, var(--packB), var(--packA) 80%); }
.pack-design-layer { position: absolute; inset: 0; z-index: var(--packDesignZ, 20); pointer-events: none; }
.pack-image-layer,
.image-layer {
  position: absolute;
  inset: -8%;
  opacity: var(--packImageOpacity);
  filter: blur(var(--packImageBlur));
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 16%), radial-gradient(circle at 75% 35%, rgba(255,255,255,.26), transparent 18%), linear-gradient(135deg, rgba(255,255,255,.18), transparent 55%);
  mix-blend-mode: screen;
}
.pack-image-layer { z-index: var(--packImageZ, 30); background-size: cover; background-position: center; background-repeat: no-repeat; }
.pack-image-layer.imported { mix-blend-mode: normal; background-color: transparent; }

.shape,
.pack-shape {
  position: absolute;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(1px);
  opacity: var(--packShapeOpacity);
}
.shape.s1,
.pack-shape.s1 { width: 42%; height: 62%; right: -8%; top: 9%; border-radius: 38% 62% 44% 56%; transform: rotate(17deg); }
.shape.s2,
.pack-shape.s2 { width: 28%; height: 28%; left: 12%; top: 17%; border-radius: 50%; transform: rotate(-18deg); }
.shape.s3,
.pack-shape.s3 { width: 72%; height: 18%; left: -20%; bottom: 30%; border-radius: 999px; transform: rotate(-19deg); }
.pack-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(255,255,255,.07) 18px 19px); opacity: .35; mask-image: linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent); }

/* ---- named design systems ------------------------------------------------ */
.design-orbital .shape.s1, .design-orbital .pack-shape.s1 { width: 46%; height: 62%; right: -10%; top: 8%; border-radius: 50%; transform: rotate(12deg); }
.design-orbital .shape.s2, .design-orbital .pack-shape.s2 { width: 30%; height: 30%; left: 11%; top: 18%; border-radius: 50%; }
.design-orbital .shape.s3, .design-orbital .pack-shape.s3 { width: 74%; height: 18%; left: -20%; bottom: 31%; border-radius: 999px; transform: rotate(-19deg); }
.design-arcfield .shape.s1, .design-arcfield .pack-shape.s1 { width: 70%; height: 70%; right: -26%; top: -2%; border-radius: 50%; background: transparent; }
.design-arcfield .shape.s2, .design-arcfield .pack-shape.s2 { width: 58%; height: 58%; left: -20%; bottom: -8%; border-radius: 50%; background: transparent; }
.design-arcfield .shape.s3, .design-arcfield .pack-shape.s3 { width: 62%; height: 12%; left: 22%; top: 48%; border-radius: 999px; transform: rotate(26deg); }
.design-ribbonstack .shape.s1, .design-ribbonstack .pack-shape.s1 { width: 88%; height: 16%; left: -18%; top: 22%; border-radius: 999px; transform: rotate(-20deg); }
.design-ribbonstack .shape.s2, .design-ribbonstack .pack-shape.s2 { width: 92%; height: 14%; right: -24%; top: 43%; border-radius: 999px; transform: rotate(18deg); }
.design-ribbonstack .shape.s3, .design-ribbonstack .pack-shape.s3 { width: 72%; height: 12%; left: -8%; bottom: 18%; border-radius: 999px; transform: rotate(-10deg); }
.design-shardmap .shape.s1, .design-shardmap .pack-shape.s1 { width: 38%; height: 50%; right: 4%; top: 9%; border-radius: 8px 46px 12px 64px; clip-path: polygon(20% 0,100% 28%,76% 100%,0 76%); }
.design-shardmap .shape.s2, .design-shardmap .pack-shape.s2 { width: 32%; height: 36%; left: 10%; top: 26%; border-radius: 22px; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.design-shardmap .shape.s3, .design-shardmap .pack-shape.s3 { width: 54%; height: 24%; left: 18%; bottom: 18%; border-radius: 18px; clip-path: polygon(0 22%,100% 0,76% 100%,9% 80%); }
.design-bloomgrid .shape.s1, .design-bloomgrid .pack-shape.s1 { width: 36%; height: 36%; right: 7%; top: 14%; border-radius: 50% 20% 50% 20%; transform: rotate(28deg); }
.design-bloomgrid .shape.s2, .design-bloomgrid .pack-shape.s2 { width: 30%; height: 30%; left: 15%; top: 18%; border-radius: 20% 50% 20% 50%; transform: rotate(-24deg); }
.design-bloomgrid .shape.s3, .design-bloomgrid .pack-shape.s3 { width: 46%; height: 46%; left: 26%; bottom: 17%; border-radius: 50% 20% 50% 20%; transform: rotate(45deg); }
.design-framecut .shape.s1, .design-framecut .pack-shape.s1 { width: 75%; height: 75%; right: -24%; top: 5%; border-radius: 34px; background: transparent; }
.design-framecut .shape.s2, .design-framecut .pack-shape.s2 { width: 56%; height: 56%; left: -18%; top: 18%; border-radius: 28px; background: transparent; }
.design-framecut .shape.s3, .design-framecut .pack-shape.s3 { width: 44%; height: 44%; right: 24%; bottom: 11%; border-radius: 24px; background: transparent; }
.design-wavepress .shape.s1, .design-wavepress .pack-shape.s1 { width: 105%; height: 16%; left: -8%; top: 24%; border-radius: 48% 52% 48% 52%; transform: rotate(-7deg); }
.design-wavepress .shape.s2, .design-wavepress .pack-shape.s2 { width: 105%; height: 14%; right: -12%; top: 43%; border-radius: 48% 52% 48% 52%; transform: rotate(9deg); }
.design-wavepress .shape.s3, .design-wavepress .pack-shape.s3 { width: 105%; height: 18%; left: -18%; bottom: 20%; border-radius: 48% 52% 48% 52%; transform: rotate(-12deg); }
.design-circuitseal .shape.s1, .design-circuitseal .pack-shape.s1 { width: 56%; height: 56%; right: -8%; top: 9%; border-radius: 22%; background: transparent; }
.design-circuitseal .shape.s2, .design-circuitseal .pack-shape.s2 { width: 26%; height: 26%; left: 14%; top: 20%; border-radius: 12px; }
.design-circuitseal .shape.s3, .design-circuitseal .pack-shape.s3 { width: 70%; height: 10%; left: 12%; bottom: 31%; border-radius: 4px; transform: rotate(0deg); }
.design-stampfield .shape.s1, .design-stampfield .pack-shape.s1 { width: 50%; height: 62%; right: 3%; top: 13%; border-radius: 18px; transform: rotate(7deg); border-style: dashed; }
.design-stampfield .shape.s2, .design-stampfield .pack-shape.s2 { width: 34%; height: 34%; left: 13%; top: 17%; border-radius: 50%; border-style: dashed; }
.design-stampfield .shape.s3, .design-stampfield .pack-shape.s3 { width: 58%; height: 18%; left: 12%; bottom: 24%; border-radius: 999px; transform: rotate(-8deg); border-style: dashed; }
.design-lensflare .shape.s1, .design-lensflare .pack-shape.s1 { width: 68%; height: 68%; right: -18%; top: 5%; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.14),transparent 55%); }
.design-lensflare .shape.s2, .design-lensflare .pack-shape.s2 { width: 32%; height: 32%; left: 13%; top: 22%; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.18),transparent 62%); }
.design-lensflare .shape.s3, .design-lensflare .pack-shape.s3 { width: 78%; height: 8%; left: 2%; bottom: 34%; border-radius: 999px; transform: rotate(-28deg); }
.design-prismtrio .shape.s1, .design-prismtrio .pack-shape.s1 { width: 46%; height: 58%; right: -2%; top: 7%; clip-path: polygon(0 0,100% 16%,40% 100%); border-radius: 6px; }
.design-prismtrio .shape.s2, .design-prismtrio .pack-shape.s2 { width: 30%; height: 34%; left: 11%; top: 20%; clip-path: polygon(50% 0,100% 100%,0 100%); }
.design-prismtrio .shape.s3, .design-prismtrio .pack-shape.s3 { width: 52%; height: 22%; left: 14%; bottom: 16%; clip-path: polygon(0 4%,100% 28%,84% 100%,10% 72%); }
.design-halonest .shape.s1, .design-halonest .pack-shape.s1 { width: 74%; height: 74%; right: -16%; top: 3%; border-radius: 50%; background: transparent; }
.design-halonest .shape.s2, .design-halonest .pack-shape.s2 { width: 48%; height: 48%; right: -2%; top: 17%; border-radius: 50%; background: transparent; }
.design-halonest .shape.s3, .design-halonest .pack-shape.s3 { width: 24%; height: 24%; right: 10%; top: 29%; border-radius: 50%; }
.design-nodelink .shape.s1, .design-nodelink .pack-shape.s1 { width: 22%; height: 22%; left: 14%; top: 15%; border-radius: 50%; }
.design-nodelink .shape.s2, .design-nodelink .pack-shape.s2 { width: 16%; height: 16%; right: 15%; bottom: 22%; border-radius: 50%; }
.design-nodelink .shape.s3, .design-nodelink .pack-shape.s3 { width: 80%; height: 7%; left: 7%; top: 42%; border-radius: 999px; transform: rotate(33deg); }
.design-tidalbars .shape.s1, .design-tidalbars .pack-shape.s1 { width: 13%; height: 62%; left: 17%; top: 13%; border-radius: 999px; }
.design-tidalbars .shape.s2, .design-tidalbars .pack-shape.s2 { width: 13%; height: 44%; left: 43%; top: 26%; border-radius: 999px; }
.design-tidalbars .shape.s3, .design-tidalbars .pack-shape.s3 { width: 13%; height: 54%; right: 19%; top: 17%; border-radius: 999px; }
.design-crescentdusk .shape.s1, .design-crescentdusk .pack-shape.s1 { width: 56%; height: 56%; right: -8%; top: 9%; border-radius: 50%; -webkit-mask: radial-gradient(circle at 70% 40%,transparent 47%,#000 49%); mask: radial-gradient(circle at 70% 40%,transparent 47%,#000 49%); }
.design-crescentdusk .shape.s2, .design-crescentdusk .pack-shape.s2 { width: 30%; height: 30%; left: 13%; top: 21%; border-radius: 50%; -webkit-mask: radial-gradient(circle at 32% 62%,transparent 49%,#000 51%); mask: radial-gradient(circle at 32% 62%,transparent 49%,#000 51%); }
.design-crescentdusk .shape.s3, .design-crescentdusk .pack-shape.s3 { width: 58%; height: 15%; left: 14%; bottom: 20%; border-radius: 999px; transform: rotate(-12deg); }
.design-pulsecore .shape.s1, .design-pulsecore .pack-shape.s1 { width: 62%; height: 62%; left: 19%; top: 13%; border-radius: 50%; background: transparent; }
.design-pulsecore .shape.s2, .design-pulsecore .pack-shape.s2 { width: 40%; height: 40%; left: 30%; top: 24%; border-radius: 50%; background: transparent; }
.design-pulsecore .shape.s3, .design-pulsecore .pack-shape.s3 { width: 20%; height: 20%; left: 40%; top: 34%; border-radius: 50%; }
.design-meshweave .shape.s1, .design-meshweave .pack-shape.s1 { width: 98%; height: 9%; left: 1%; top: 30%; border-radius: 999px; transform: rotate(23deg); }
.design-meshweave .shape.s2, .design-meshweave .pack-shape.s2 { width: 98%; height: 9%; left: 1%; top: 46%; border-radius: 999px; transform: rotate(-23deg); }
.design-meshweave .shape.s3, .design-meshweave .pack-shape.s3 { width: 38%; height: 38%; left: 31%; top: 31%; border-radius: 12px; transform: rotate(45deg); }

/* ---- card chrome (label / strip / overlay meta) — sized for the 248px card */
.pack-label { position: absolute; top: 13px; left: 13px; right: 13px; z-index: 4; display: flex; justify-content: space-between; gap: 8px; }
.pack-label .tag,
.pack-label .date { border: 1px solid rgba(255,255,255,.28); background: rgba(12,12,14,.32); color: #fff; border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; backdrop-filter: blur(12px); }
.pack-label .date { font-weight: 800; text-transform: none; letter-spacing: .02em; color: rgba(255,255,255,.82); white-space: nowrap; }
.side-strip { position: absolute; z-index: 3; right: 12px; top: 46px; writing-mode: vertical-rl; text-orientation: mixed; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 950; letter-spacing: .2em; text-transform: uppercase; }
.side-strip.off { display: none; }
.overlay-meta { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45) 12%, rgba(0,0,0,.72)); color: white; }
.creator { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 800; }
.creator .mini,
.mini { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22); font-size: 12px; color: white; }
.overlay-meta h3 { font-weight: 700; line-height: 1.0; letter-spacing: -.01em; margin: 0; color: #fff; text-wrap: balance; }
.paq-slim .overlay-meta h3 { font-size: 18px; }
.paq-standard .overlay-meta h3 { font-size: 20px; }
.paq-tall .overlay-meta h3 { font-size: 23px; }
.paq-feature .overlay-meta h3 { font-size: 28px; }
.overlay-meta p { margin: 6px 0 0; color: rgba(255,255,255,.74); line-height: 1.3; font-size: 12.5px; }
.actions-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.readnow { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.88); color: #111; border-radius: 999px; padding: 9px 12px; font-weight: 900; font-size: 12px; }
.social { display: flex; gap: 6px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 850; }
.social span { padding: 7px 8px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16); }

/* ---- design mini swatch (studio publish picker) -------------------------- */
.pack-design-mini { width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%); border: 1px solid var(--line-strong); position: relative; overflow: hidden; display: block; }
.pack-design-mini b { position: absolute; display: block; border: 1px solid color-mix(in srgb, var(--accent) 70%, white 15%); background: var(--accent-soft); opacity: .95; }
.pack-design-mini .lines { inset: 0; border: 0; opacity: .32; background: repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--accent) 65%, transparent) 8px 9px); }
.pack-design-mini.design-approved_overlay .s1 { width: 62%; height: 62%; left: 22%; top: 9%; border-radius: 46% 54% 38% 62%; transform: rotate(18deg); }
.pack-design-mini.design-approved_overlay .s2 { width: 26%; height: 26%; left: 12%; top: 18%; border-radius: 50%; }
.pack-design-mini.design-approved_overlay .s3 { width: 72%; height: 15%; left: -18%; bottom: 26%; border-radius: 999px; transform: rotate(-16deg); }
.pack-design-mini.design-orbital .s1 { width: 66%; height: 66%; right: -18%; top: 3%; border-radius: 50%; background: transparent; }
.pack-design-mini.design-orbital .s2 { width: 28%; height: 28%; left: 12%; top: 18%; border-radius: 50%; }
.pack-design-mini.design-orbital .s3 { width: 74%; height: 14%; left: -18%; bottom: 28%; border-radius: 999px; transform: rotate(-20deg); }
.pack-design-mini.design-arcfield .s1 { width: 82%; height: 82%; right: -35%; top: -12%; border-radius: 50%; background: transparent; border-width: 2px; }
.pack-design-mini.design-arcfield .s2 { width: 60%; height: 60%; right: -23%; top: 8%; border-radius: 50%; background: transparent; }
.pack-design-mini.design-arcfield .s3 { width: 52%; height: 12%; left: 10%; bottom: 22%; border-radius: 999px; transform: rotate(-10deg); }
.pack-design-mini.design-ribbonstack .s1 { width: 86%; height: 16%; left: -10%; top: 18%; border-radius: 999px; transform: rotate(-16deg); }
.pack-design-mini.design-ribbonstack .s2 { width: 76%; height: 14%; right: -12%; top: 43%; border-radius: 999px; transform: rotate(14deg); }
.pack-design-mini.design-ribbonstack .s3 { width: 64%; height: 13%; left: 14%; bottom: 18%; border-radius: 999px; transform: rotate(-5deg); }
.pack-design-mini.design-shardmap .s1 { width: 50%; height: 56%; right: 4%; top: 8%; clip-path: polygon(30% 0, 100% 24%, 72% 100%, 0 68%); }
.pack-design-mini.design-shardmap .s2 { width: 32%; height: 36%; left: 11%; top: 22%; clip-path: polygon(0 20%, 80% 0, 100% 80%, 18% 100%); }
.pack-design-mini.design-shardmap .s3 { width: 54%; height: 18%; left: 8%; bottom: 15%; clip-path: polygon(8% 0, 100% 18%, 82% 100%, 0 74%); }
.pack-design-mini.design-bloomgrid .s1 { width: 28%; height: 28%; left: 16%; top: 12%; border-radius: 50%; }
.pack-design-mini.design-bloomgrid .s2 { width: 28%; height: 28%; right: 16%; top: 28%; border-radius: 50%; }
.pack-design-mini.design-bloomgrid .s3 { width: 28%; height: 28%; left: 34%; bottom: 12%; border-radius: 50%; }
.pack-design-mini.design-framecut .s1 { width: 70%; height: 70%; left: 15%; top: 13%; border-radius: 10px; background: transparent; border-width: 2px; }
.pack-design-mini.design-framecut .s2 { width: 36%; height: 36%; right: -5%; top: -4%; border-radius: 10px; }
.pack-design-mini.design-framecut .s3 { width: 58%; height: 12%; left: 8%; bottom: 16%; border-radius: 999px; }
.pack-design-mini.design-wavepress .s1 { width: 90%; height: 20%; left: -15%; top: 25%; border-radius: 999px; transform: rotate(-25deg); }
.pack-design-mini.design-wavepress .s2 { width: 90%; height: 20%; right: -18%; top: 46%; border-radius: 999px; transform: rotate(-25deg); }
.pack-design-mini.design-wavepress .s3 { width: 70%; height: 16%; left: 4%; bottom: 13%; border-radius: 999px; transform: rotate(-25deg); }
.pack-design-mini.design-circuitseal .s1 { width: 62%; height: 62%; left: 19%; top: 14%; border-radius: 50%; background: transparent; }
.pack-design-mini.design-circuitseal .s2 { width: 6px; height: 74%; left: 49%; top: 13%; border-radius: 999px; }
.pack-design-mini.design-circuitseal .s3 { width: 74%; height: 6px; left: 13%; top: 49%; border-radius: 999px; }
.pack-design-mini.design-stampfield .s1 { width: 62%; height: 42%; left: 16%; top: 11%; border-radius: 8px; border-style: dashed; transform: rotate(8deg); }
.pack-design-mini.design-stampfield .s2 { width: 36%; height: 30%; right: 8%; bottom: 9%; border-radius: 7px; border-style: dashed; transform: rotate(-11deg); }
.pack-design-mini.design-stampfield .s3 { width: 58%; height: 12%; left: 10%; bottom: 26%; border-radius: 999px; transform: rotate(-8deg); border-style: dashed; }
.pack-design-mini.design-lensflare .s1 { width: 70%; height: 70%; right: -18%; top: 5%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.2), transparent 55%); }
.pack-design-mini.design-lensflare .s2 { width: 34%; height: 34%; left: 12%; top: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 62%); }
.pack-design-mini.design-lensflare .s3 { width: 80%; height: 8%; left: 0; bottom: 34%; border-radius: 999px; transform: rotate(-28deg); }
.pack-design-mini.design-prismtrio .s1 { width: 48%; height: 58%; right: 0; top: 8%; clip-path: polygon(0 0, 100% 16%, 40% 100%); }
.pack-design-mini.design-prismtrio .s2 { width: 30%; height: 34%; left: 12%; top: 20%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pack-design-mini.design-prismtrio .s3 { width: 52%; height: 20%; left: 14%; bottom: 14%; clip-path: polygon(0 4%, 100% 28%, 84% 100%, 10% 72%); }
.pack-design-mini.design-halonest .s1 { width: 74%; height: 74%; right: -12%; top: 4%; border-radius: 50%; background: transparent; border-width: 2px; }
.pack-design-mini.design-halonest .s2 { width: 46%; height: 46%; right: 2%; top: 18%; border-radius: 50%; background: transparent; }
.pack-design-mini.design-halonest .s3 { width: 22%; height: 22%; right: 14%; top: 30%; border-radius: 50%; }
.pack-design-mini.design-nodelink .s1 { width: 22%; height: 22%; left: 14%; top: 15%; border-radius: 50%; }
.pack-design-mini.design-nodelink .s2 { width: 16%; height: 16%; right: 15%; bottom: 22%; border-radius: 50%; }
.pack-design-mini.design-nodelink .s3 { width: 80%; height: 8%; left: 7%; top: 42%; border-radius: 999px; transform: rotate(33deg); }
.pack-design-mini.design-tidalbars .s1 { width: 14%; height: 62%; left: 17%; top: 13%; border-radius: 999px; }
.pack-design-mini.design-tidalbars .s2 { width: 14%; height: 44%; left: 43%; top: 26%; border-radius: 999px; }
.pack-design-mini.design-tidalbars .s3 { width: 14%; height: 54%; right: 19%; top: 17%; border-radius: 999px; }
.pack-design-mini.design-crescentdusk .s1 { width: 56%; height: 56%; right: -6%; top: 10%; border-radius: 50%; background: transparent; border-width: 2px; }
.pack-design-mini.design-crescentdusk .s2 { width: 30%; height: 30%; left: 14%; top: 22%; border-radius: 50%; background: transparent; }
.pack-design-mini.design-crescentdusk .s3 { width: 56%; height: 14%; left: 14%; bottom: 20%; border-radius: 999px; transform: rotate(-12deg); }
.pack-design-mini.design-pulsecore .s1 { width: 62%; height: 62%; left: 19%; top: 13%; border-radius: 50%; background: transparent; }
.pack-design-mini.design-pulsecore .s2 { width: 40%; height: 40%; left: 30%; top: 24%; border-radius: 50%; background: transparent; }
.pack-design-mini.design-pulsecore .s3 { width: 20%; height: 20%; left: 40%; top: 34%; border-radius: 50%; }
.pack-design-mini.design-meshweave .s1 { width: 98%; height: 12%; left: 1%; top: 28%; border-radius: 999px; transform: rotate(23deg); }
.pack-design-mini.design-meshweave .s2 { width: 98%; height: 12%; left: 1%; top: 48%; border-radius: 999px; transform: rotate(-23deg); }
.pack-design-mini.design-meshweave .s3 { width: 34%; height: 34%; left: 33%; top: 30%; border-radius: 8px; transform: rotate(45deg); }

/* ---- responsive card chrome (discover context) -------------------------- */
@media (max-width: 680px) {
  .page.discover .overlay-meta { padding: 12px; }
  .page.discover .paq-card { flex-shrink: 0; }
  .page.discover .social { display: none; }
}

/* ---- studio publish preview (card rendered inside the editor) ------------ *
 * The preview node is `paq-card paq-<size> studio-pack-preview`; its height per
 * size and the publish-modal fixed footprint are CARD geometry, so they live
 * here, not in app.css. The publish MODAL chrome (overlay, grid, form, option
 * pickers) remains studio's in app.css. */
.studio-pack-preview { width: 100%; min-height: 372px; }
.studio-pack-preview.paq-slim { height: 300px; min-height: 300px; }
.studio-pack-preview.paq-standard { height: 372px; min-height: 372px; }
.studio-pack-preview.paq-tall { height: 468px; min-height: 468px; }
.studio-pack-preview.paq-feature { height: 560px; min-height: 560px; }

.pack-publish-preview .studio-pack-preview { transform-origin: center; max-width: none; }
.pack-publish-preview .studio-pack-preview.paq-slim { width: 248px; height: 300px; min-height: 300px; flex: 0 0 auto; }
.pack-publish-preview .studio-pack-preview.paq-standard { width: 248px; height: 372px; min-height: 372px; flex: 0 0 auto; }
.pack-publish-preview .studio-pack-preview.paq-tall { width: 248px; height: 468px; min-height: 468px; flex: 0 0 auto; }
.pack-publish-preview .studio-pack-preview.paq-feature { width: 248px; height: 560px; min-height: 560px; flex: 0 0 auto; }