/* =========================================================
   THE OUTPUT. 8.5x11, full color, eight themes.
   All sizing in cqw so a 4-up flyer scales identically.
   Markup: .poster > .p-body(.p-head/.p-mid/.p-strip) + .p-tear
   Headline is split into .w word spans -> per-word placement.
   ========================================================= */

.poster{
  --paper:#fff;
  --ink:#000;
  --pop:#000;
  --pop2:var(--pop);
  --mute:color-mix(in srgb, var(--ink) 62%, var(--paper));
  aspect-ratio:8.5/11;
  background:var(--paper);
  color:var(--ink);
  container-type:inline-size;
  display:flex;flex-direction:column;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 48px rgba(0,0,0,.13);
  font-family:"Archivo",sans-serif;
  min-width:0;
}
/* decoration layer stays out of the tear-off strip */
.poster::before{
  content:"";position:absolute;inset:0 0 30cqw 0;z-index:0;pointer-events:none;
}

.p-body{
  flex:1;min-height:0;min-width:0;
  display:flex;flex-direction:column;
  padding:6.5cqw;
  position:relative;z-index:1;
}
.p-head{padding-bottom:4cqw}

/* ---------- kicker ---------- */
.p-tag{
  display:inline-block;
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 92,"wght" 700;
  font-size:2.4cqw;
  letter-spacing:.3em;
  text-transform:uppercase;
}

/* ---------- headline ---------- */
.p-hook{
  font-variation-settings:"wdth" 118,"wght" 900;
  font-size:13cqw;line-height:.86;
  letter-spacing:-.045em;
  margin:4cqw 0 0;
  overflow-wrap:break-word;
}
.p-hook .w{display:inline-block;transform-origin:50% 60%}
.p-hook .w.long{font-size:.86em}
.poster[data-len="s"] .p-hook{font-size:19cqw}
.poster[data-len="m"] .p-hook{font-size:14.5cqw}
.poster[data-len="l"] .p-hook{font-size:11cqw}
.poster[data-len="xl"] .p-hook{font-size:8.6cqw}

.p-payoff{
  font-family:"Instrument Sans",sans-serif;
  font-size:3.5cqw;font-weight:500;line-height:1.3;
  letter-spacing:-.01em;
  margin:3.4cqw 0 0;max-width:32ch;
}

/* ---------- qr block ---------- */
.p-mid{
  margin-top:auto;
  display:flex;align-items:flex-end;gap:4.5cqw;
  padding-top:5cqw;
}
.p-qr{
  width:28cqw;height:28cqw;flex:none;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.p-qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.p-qrmeta{display:flex;flex-direction:column;gap:1.4cqw;min-width:0;padding-bottom:.6cqw}
.p-scan{
  font-variation-settings:"wdth" 118,"wght" 900;
  font-size:7cqw;line-height:.84;letter-spacing:-.04em;
}
.p-host{
  font-family:"IBM Plex Mono",monospace;
  font-size:2.6cqw;letter-spacing:.02em;
  overflow-wrap:anywhere;
}

.p-strip{
  margin:4.5cqw 0 0;
  padding:2.4cqw 0 0;
  border-top:0.3cqw solid var(--ink);
}
.p-strip span{
  font-family:"Caveat",cursive;
  font-weight:700;
  font-size:4.2cqw;letter-spacing:.01em;
}

/* ---------- tear-off codes ---------- */
.p-tear{flex:none;position:relative;z-index:1}
.p-cut{
  display:block;
  border-top:0.28cqw dashed var(--ink);
  font-family:"Caveat",cursive;
  font-weight:600;
  font-size:3.4cqw;line-height:1;letter-spacing:.01em;
  padding:1.6cqw 0 1cqw 6.5cqw;
  opacity:.82;
}
.p-tabs{display:flex;height:23cqw}
.tab{
  flex:1;min-width:0;overflow:hidden;
  border-left:0.28cqw dashed var(--ink);
  display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);
  gap:1.8cqw;
  padding:1.4cqw 0;
}
.tab:first-child{border-left:0}
.tab b{
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;font-size:2.4cqw;letter-spacing:.06em;
  white-space:nowrap;
}
.tab i{
  font-style:normal;
  font-family:"IBM Plex Mono",monospace;
  font-size:1.85cqw;letter-spacing:.22em;
  opacity:.6;white-space:nowrap;
}

/* =========================================================
   ACID - lime paper, magenta hits, one outlined word,
   kicker running up the left margin
   ========================================================= */
.poster[data-theme="acid"]{--paper:#E4FF3C;--ink:#0B0B0B;--pop:#FF2E93}
.poster[data-theme="acid"]::before{
  background:radial-gradient(circle at 92% 86%, var(--pop) 0 13cqw, transparent 13.4cqw);
}
.poster[data-theme="acid"] .p-body{padding-left:12cqw}
.poster[data-theme="acid"] .p-tag{
  position:absolute;left:2.6cqw;top:64cqw;
  transform:rotate(-90deg);transform-origin:0 0;
  white-space:nowrap;letter-spacing:.5em;font-size:2.4cqw;
}
.poster[data-theme="acid"] .p-hook{margin-top:2cqw;letter-spacing:-.055em}
.poster[data-theme="acid"] .p-hook .w:nth-child(2n){color:var(--pop)}
.poster[data-theme="acid"] .p-hook .w:nth-child(3n){transform:rotate(-3.5deg) translateY(-.04em)}
.poster[data-theme="acid"] .p-hook .w:nth-child(4n){
  color:transparent;-webkit-text-stroke:0.3cqw var(--ink);
}
.poster[data-theme="acid"] .p-payoff{
  background:var(--ink);color:var(--paper);
  display:inline-block;padding:1.2cqw 2cqw;
}
.poster[data-theme="acid"] .p-qr{outline:0.7cqw solid var(--ink);outline-offset:0}
.poster[data-theme="acid"] .p-scan{color:var(--pop);-webkit-text-stroke:0.22cqw var(--ink)}
.poster[data-theme="acid"] .p-cut{padding-left:12cqw}

/* =========================================================
   RISO - warm stock, navy ink misregistered in orange,
   serif + mono words alternating
   ========================================================= */
.poster[data-theme="riso"]{--paper:#FBE9D4;--ink:#16255A;--pop:#FF4B1F}
.poster[data-theme="riso"]::before{
  background:
    radial-gradient(circle at 88% 90%, var(--pop) 0 16cqw, transparent 16.5cqw),
    radial-gradient(rgba(22,37,90,.13) 24%, transparent 26%);
  background-size:auto, 2.6cqw 2.6cqw;
  opacity:.9;
}
.poster[data-theme="riso"] .p-tag{
  border:0.28cqw solid var(--ink);padding:1cqw 1.8cqw;border-radius:9cqw;
}
.poster[data-theme="riso"] .p-hook{
  font-family:"Instrument Serif",serif;
  font-variation-settings:normal;font-weight:400;
  letter-spacing:-.02em;line-height:.9;
  text-shadow:0.07em 0.06em 0 var(--pop);
}
.poster[data-theme="riso"] .p-hook .w:nth-child(2n){
  font-family:"IBM Plex Mono",monospace;
  font-size:.5em;letter-spacing:-.02em;
  text-shadow:none;
  transform:translateY(-.12em);
}
.poster[data-theme="riso"] .p-hook .w:nth-child(3n){font-style:italic}
.poster[data-theme="riso"] .p-payoff{
  font-family:"Instrument Serif",serif;font-style:italic;
  font-size:4.6cqw;line-height:1.15;
}
.poster[data-theme="riso"] .p-qr{
  padding:1.6cqw;background:var(--paper);
  box-shadow:0.9cqw 0.9cqw 0 var(--pop),0 0 0 0.28cqw var(--ink);
}
.poster[data-theme="riso"] .p-scan{
  font-family:"Instrument Serif",serif;font-variation-settings:normal;
  font-weight:400;font-size:9cqw;letter-spacing:-.02em;
}

/* =========================================================
   PUNK - xerox halftone, Anton ransom note, words boxed,
   rotated, mismatched sizes
   ========================================================= */
.poster[data-theme="punk"]{--paper:#EDEDE6;--ink:#0A0A0A;--pop:#E4002B}
.poster[data-theme="punk"]::before{
  background:
    radial-gradient(rgba(0,0,0,.16) 26%, transparent 28%);
  background-size:2.2cqw 2.2cqw;
}
.poster[data-theme="punk"] .p-tag{
  background:var(--pop);color:#fff;
  padding:1.1cqw 2cqw;transform:rotate(-1.6deg);
  letter-spacing:.3em;
}
.poster[data-theme="punk"] .p-hook{
  font-family:"Anton",sans-serif;font-variation-settings:normal;font-weight:400;
  letter-spacing:-.005em;line-height:.92;
}
.poster[data-theme="punk"] .p-hook .w{margin-right:.12em}
.poster[data-theme="punk"] .p-hook .w:nth-child(2n){
  background:var(--ink);color:var(--paper);
  padding:0 .1em;transform:rotate(1.8deg);
}
.poster[data-theme="punk"] .p-hook .w:nth-child(3n){
  color:var(--pop);transform:rotate(-2.4deg) scale(1.12);
}
.poster[data-theme="punk"] .p-hook .w:nth-child(5n){font-size:.68em;transform:translateY(-.16em)}
.poster[data-theme="punk"] .p-payoff{
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:3.2cqw;
}
.poster[data-theme="punk"] .p-qr{outline:0.5cqw solid var(--ink)}
.poster[data-theme="punk"] .p-scan{
  font-family:"Anton",sans-serif;font-variation-settings:normal;font-weight:400;
  font-size:8cqw;letter-spacing:0;
}
.poster[data-theme="punk"] .p-strip{background:var(--ink);color:var(--paper);padding:1.6cqw 2cqw;margin-left:-2cqw;margin-right:-2cqw}
.poster[data-theme="punk"] .tab:nth-child(2n) b{color:var(--pop)}

/* =========================================================
   MIDNIGHT - near-black stock, lime accent, condensed
   staircase headline, inverted QR
   ========================================================= */
.poster[data-theme="midnight"]{--paper:#0B0B10;--ink:#F3F3EC;--pop:#B4FF3B}
.poster[data-theme="midnight"]::before{
  background:
    linear-gradient(180deg, rgba(180,255,59,.16), transparent 46%),
    radial-gradient(rgba(243,243,236,.16) 22%, transparent 24%);
  background-size:auto, 3cqw 3cqw;
}
.poster[data-theme="midnight"] .p-tag{color:var(--pop);letter-spacing:.5em}
.poster[data-theme="midnight"] .p-hook{
  font-variation-settings:"wdth" 68,"wght" 800;
  font-size:16cqw;line-height:.82;letter-spacing:-.01em;
}
.poster[data-theme="midnight"][data-len="l"] .p-hook{font-size:14cqw}
.poster[data-theme="midnight"][data-len="xl"] .p-hook{font-size:11cqw}
.poster[data-theme="midnight"] .p-hook .w{display:block}
.poster[data-theme="midnight"] .p-hook .w:nth-child(2n){margin-left:1.2em;color:var(--pop)}
.poster[data-theme="midnight"] .p-hook .w:nth-child(3n){margin-left:.5em}
.poster[data-theme="midnight"] .p-hook .w:nth-child(4n){margin-left:2em;font-size:.62em}
.poster[data-theme="midnight"] .p-payoff{color:var(--pop);font-family:"IBM Plex Mono",monospace;font-size:2.9cqw;letter-spacing:.02em}
.poster[data-theme="midnight"] .p-qr{background:var(--pop);padding:1.4cqw}
.poster[data-theme="midnight"] .p-qr img{mix-blend-mode:multiply}
.poster[data-theme="midnight"] .p-scan{font-variation-settings:"wdth" 68,"wght" 800;letter-spacing:.06em}
.poster[data-theme="midnight"] .p-strip{border-top-color:var(--pop)}
.poster[data-theme="midnight"] .p-cut{border-top-color:var(--pop);border-top-style:dashed}
.poster[data-theme="midnight"] .tab{border-left-color:rgba(243,243,236,.55)}
.poster[data-theme="midnight"] .tab b{color:var(--pop)}

/* =========================================================
   SUGAR - hot pink stock, yellow pops, words on a wonky arc
   ========================================================= */
.poster[data-theme="sugar"]{--paper:#FF6FB5;--ink:#2A0A3C;--pop:#FFE84D}
.poster[data-theme="sugar"]::before{
  background:
    radial-gradient(circle at 84% 82%, var(--pop) 0 20cqw, transparent 20.5cqw),
    radial-gradient(circle at 6% 6%, rgba(255,255,255,.5) 0 12cqw, transparent 12.5cqw);
}
.poster[data-theme="sugar"] .p-tag{
  background:var(--pop);padding:1.1cqw 2.2cqw;border-radius:9cqw;
  transform:rotate(-2deg);
}
.poster[data-theme="sugar"] .p-hook{
  font-variation-settings:"wdth" 125,"wght" 900;
  letter-spacing:-.05em;line-height:.82;
}
.poster[data-theme="sugar"] .p-hook .w:nth-child(1){transform:rotate(-6deg)}
.poster[data-theme="sugar"] .p-hook .w:nth-child(2){transform:rotate(3.5deg) translateY(.06em);color:var(--pop)}
.poster[data-theme="sugar"] .p-hook .w:nth-child(3){transform:rotate(-2deg) translateY(-.05em)}
.poster[data-theme="sugar"] .p-hook .w:nth-child(4){transform:rotate(5deg);color:#fff}
.poster[data-theme="sugar"] .p-hook .w:nth-child(5){transform:rotate(-4deg) scale(1.08)}
.poster[data-theme="sugar"] .p-hook .w:nth-child(6){color:var(--pop);transform:rotate(2deg)}
.poster[data-theme="sugar"] .p-payoff{
  font-weight:600;font-size:3.6cqw;color:#fff;
  text-shadow:0.04em 0.04em 0 var(--ink);
}
.poster[data-theme="sugar"] .p-qr{border-radius:2cqw;padding:1.4cqw;box-shadow:0 0 0 0.6cqw var(--ink)}
.poster[data-theme="sugar"] .p-scan{font-variation-settings:"wdth" 125,"wght" 900;color:var(--pop);-webkit-text-stroke:0.2cqw var(--ink)}
.poster[data-theme="sugar"] .tab:nth-child(2n){background:rgba(255,232,77,.55)}

/* =========================================================
   BULLETIN - civic notice, blue band, first word oversized
   ========================================================= */
.poster[data-theme="bulletin"]{--paper:#F5F2E6;--ink:#101010;--pop:#1B4DEB;--pop2:#E8452C}
.poster[data-theme="bulletin"] .p-body{padding-top:0}
.poster[data-theme="bulletin"] .p-tag{
  display:block;margin:0 -6.5cqw 0;padding:3cqw 6.5cqw;
  background:var(--pop);color:#fff;letter-spacing:.46em;text-align:center;
}
.poster[data-theme="bulletin"] .p-hook{
  font-variation-settings:"wdth" 76,"wght" 800;
  letter-spacing:-.01em;line-height:.9;margin-top:5cqw;
}
.poster[data-theme="bulletin"] .p-hook .w:nth-child(1){
  display:block;font-size:1.5em;color:var(--pop2);line-height:.82;
}
.poster[data-theme="bulletin"] .p-hook .w:nth-child(3n){color:var(--pop)}
.poster[data-theme="bulletin"] .p-payoff{
  border-left:0.6cqw solid var(--pop2);padding-left:2.2cqw;
  font-size:3.3cqw;
}
.poster[data-theme="bulletin"] .p-mid{border-top:0.3cqw solid var(--ink);align-items:center}
.poster[data-theme="bulletin"] .p-scan{font-variation-settings:"wdth" 76,"wght" 800;font-size:8cqw;letter-spacing:.02em}
.poster[data-theme="bulletin"] .p-strip{background:var(--pop2);color:#fff;padding:1.6cqw 2cqw;margin:4.5cqw -2cqw 0;border:0}

/* =========================================================
   COURT - deep green stock, orange accent, tall stacked type
   ========================================================= */
.poster[data-theme="court"]{--paper:#0F5C3F;--ink:#F4EFE0;--pop:#FF9E1B}
.poster[data-theme="court"]::before{
  background:
    radial-gradient(circle at 50% -10%, rgba(255,158,27,.24), transparent 55%),
    radial-gradient(rgba(244,239,224,.15) 22%, transparent 24%);
  background-size:auto, 3.2cqw 3.2cqw;
}
.poster[data-theme="court"] .p-tag{
  border:0.28cqw solid var(--pop);color:var(--pop);
  padding:1cqw 2cqw;letter-spacing:.36em;
}
.poster[data-theme="court"] .p-hook{
  font-variation-settings:"wdth" 112,"wght" 900;
  line-height:.84;letter-spacing:-.05em;
}
.poster[data-theme="court"] .p-hook .w:nth-child(3n+1){color:var(--pop)}
.poster[data-theme="court"] .p-hook .w:nth-child(2n){
  font-family:"Instrument Serif",serif;font-variation-settings:normal;
  font-style:italic;font-weight:400;text-transform:lowercase;letter-spacing:-.01em;
}
.poster[data-theme="court"] .p-payoff{font-family:"IBM Plex Mono",monospace;font-size:2.9cqw;letter-spacing:.02em}
.poster[data-theme="court"] .p-qr{padding:1.4cqw;background:var(--ink);box-shadow:0.8cqw 0.8cqw 0 var(--pop)}
.poster[data-theme="court"] .p-scan{font-variation-settings:"wdth" 112,"wght" 900;color:var(--pop)}
.poster[data-theme="court"] .p-strip{border-top-color:var(--pop)}
.poster[data-theme="court"] .p-cut{border-top-color:var(--pop)}
.poster[data-theme="court"] .tab{border-left-color:rgba(244,239,224,.5)}
.poster[data-theme="court"] .tab b{color:var(--pop)}

/* =========================================================
   PLAIN - toner saver. black on white, still off-grid.
   ========================================================= */
.poster[data-theme="plain"]{--paper:#FFFFFF;--ink:#000000;--pop:#000000}
.poster[data-theme="plain"] .p-tag{display:block;border-bottom:0.28cqw solid var(--ink);padding-bottom:2.2cqw}
.poster[data-theme="plain"] .p-hook .w:nth-child(3n){transform:rotate(-2deg)}
.poster[data-theme="plain"] .p-hook .w:nth-child(4n){color:transparent;-webkit-text-stroke:0.26cqw var(--ink)}
.poster[data-theme="plain"] .p-payoff{color:#4A4A46}
.poster[data-theme="plain"] .p-mid{border-top:0.3cqw solid var(--ink)}