/* =========================================================
   THE OUTPUT. black ink on white paper, 8.5x11.
   sizing in cqw so a 4-up flyer scales identically.
   ========================================================= */

.poster{
  --ink:#000000;
  aspect-ratio:8.5/11;
  background:#fff;
  color:var(--ink);
  container-type:inline-size;
  display:flex;flex-direction:column;
  overflow:hidden;
  position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 44px rgba(0,0,0,.10);
  font-family:"Archivo",sans-serif;
}

.p-body{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  padding:6.5cqw;
  position:relative;
}

.p-tag{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  font-weight:500;font-size:2.2cqw;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.p-hook{
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:12cqw;line-height:.9;
  letter-spacing:-.045em;
  text-wrap:balance;
  margin:4cqw 0 0;
}
.p-payoff{
  font-family:"Instrument Sans",sans-serif;
  font-size:3.5cqw;font-weight:400;line-height:1.32;
  letter-spacing:-.01em;
  color:#5C5C58;
  margin:3cqw 0 0;max-width:30ch;
}

.p-head{padding-bottom:6cqw}

.p-mid{
  margin-top:auto;
  display:flex;align-items:flex-end;gap:4.5cqw;
  padding-top:5cqw;
}
.p-qr{
  width:27cqw;height:27cqw;flex:none;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.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-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:7cqw;line-height:.86;letter-spacing:-.04em;
}
.p-host{
  font-family:"IBM Plex Mono",monospace;
  font-size:2.6cqw;letter-spacing:.02em;
  color:#5C5C58;
  overflow-wrap:anywhere;
}

.p-strip{
  margin:4.5cqw 0 0;
  padding:2.4cqw 0 0;
  border-top:1px solid var(--ink);
}
.p-strip span{
  font-family:"IBM Plex Mono",monospace;
  font-size:2.2cqw;letter-spacing:.2em;
  text-transform:uppercase;
}

/* ---------- tear-off codes ---------- */
.p-tear{flex:none;position:relative}
.p-cut{
  display:block;
  border-top:0.28cqw dashed var(--ink);
  font-family:"IBM Plex Mono",monospace;
  font-size:1.95cqw;line-height:1;letter-spacing:.14em;
  text-transform:uppercase;
  padding:1.9cqw 0 1.3cqw 6.5cqw;
  color:#77776F;
}
.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;
  color:#8C8C86;white-space:nowrap;
}

/* =========================================================
   GROTESK - expanded Archivo, brick headline, hairline grid
   ========================================================= */
.poster[data-style="grotesk"] .p-tag{
  display:block;
  padding-bottom:2.4cqw;
  border-bottom:1px solid var(--ink);
}
.poster[data-style="grotesk"] .p-hook{font-size:13cqw;margin-top:5cqw}
.poster[data-style="grotesk"] .p-mid{border-top:1px solid var(--ink)}

/* =========================================================
   NOTICE - condensed caps, centered, municipal but clean
   ========================================================= */
.poster[data-style="notice"] .p-body{padding-top:0}
.poster[data-style="notice"] .p-head{text-align:center}
.poster[data-style="notice"] .p-tag{
  display:block;
  margin:0 -6.5cqw;padding:3.2cqw 0;
  font-size:2.3cqw;letter-spacing:.46em;
  border-bottom:1px solid var(--ink);
}
.poster[data-style="notice"] .p-hook{
  font-variation-settings:"wdth" 74,"wght" 700;
  font-size:15cqw;line-height:.92;letter-spacing:-.01em;
  margin-top:6cqw;
}
.poster[data-style="notice"] .p-payoff{margin:3.4cqw auto 0;text-align:center}
.poster[data-style="notice"] .p-mid{
  flex-direction:column;align-items:center;text-align:center;
  gap:2.6cqw;
  border-top:1px solid var(--ink);
  padding-top:4.5cqw;
}
.poster[data-style="notice"] .p-qr{width:30cqw;height:30cqw}
.poster[data-style="notice"] .p-qrmeta{align-items:center}
.poster[data-style="notice"] .p-scan{
  font-variation-settings:"wdth" 74,"wght" 700;
  font-size:5cqw;letter-spacing:.2em;
}
.poster[data-style="notice"] .p-strip{text-align:center}

/* =========================================================
   SERIF - Instrument Serif, gallery-wall editorial
   ========================================================= */
.poster[data-style="serif"] .p-head{padding-top:2cqw}
.poster[data-style="serif"] .p-tag{font-size:2.1cqw;letter-spacing:.4em}
.poster[data-style="serif"] .p-hook{
  font-family:"Instrument Serif",serif;
  font-variation-settings:normal;
  font-weight:400;
  font-size:14.5cqw;line-height:.92;letter-spacing:-.02em;
  text-transform:none;
  margin-top:5cqw;
}
.poster[data-style="serif"] .p-payoff{
  font-family:"Instrument Serif",serif;
  font-style:italic;
  font-size:4.4cqw;line-height:1.22;letter-spacing:0;
  color:var(--ink);
  margin-top:3.4cqw;
}
.poster[data-style="serif"] .p-mid{align-items:flex-end;border-top:1px solid var(--ink)}
.poster[data-style="serif"] .p-scan{
  font-family:"Instrument Serif",serif;
  font-variation-settings:normal;
  font-weight:400;
  font-size:8cqw;letter-spacing:-.01em;
}
.poster[data-style="serif"] .p-strip{border-top-width:1px}