/*
Theme Name: Chicago Pulls Placeholder
Theme URI: https://chicagopulls.org
Author: Brandon Pfeiffer
Description: Single-page placeholder for Chicago Pulls — free, public, participatory events where the show gets passed around the room. Implements the Chicago Pulls Design System (woodcut / hand-pulled gig-poster) as a minimal classic theme with an email + ZIP signup.
Version: 0.1.1
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chicago-pulls
*/

/* ==========================================================================
   Chicago Pulls Design System — tokens
   Source of truth: https://claude.ai/design/p/3c5bdd4f-e775-42f9-9011-5b53b2d9c05c
   Namespace: ChicagoPullsDesignSystem_3c5bdd
   ========================================================================== */

/* Fonts are enqueued separately in functions.php rather than @import-ed here —
   an @import inside this file would chain a second blocking request behind it. */

:root {
  /* Paper stock — backgrounds are stock, never a flat hex */
  --paper-1: #efe3c8;
  --paper-2: #e4d3ae;
  --paper-3: #f6eedc;
  --paper-4: #d9c39a;

  /* Ink — the first print pass */
  --ink-1: #1c1613;
  --ink-2: #2b2320;
  --ink-3: #4a3e36;

  /* Brick red — the second print pass */
  --brick-1: #b23a22;
  --brick-2: #8e2c17;
  --brick-3: #c9502f;

  /* Ochre — the sparing third ink */
  --ochre-1: #d69a2d;
  --ochre-2: #b87c1b;
  --ochre-3: #e7b348;

  /* Semantic */
  --surface-page: var(--paper-1);
  --surface-page-alt: var(--paper-2);
  --surface-card: var(--paper-3);
  --surface-ink: var(--ink-1);
  --text-body: var(--ink-2);
  --text-ink: var(--ink-1);
  --text-muted: var(--ink-3);
  --text-on-ink: var(--paper-3);
  --text-on-brick: var(--paper-3);
  --accent-red: var(--brick-1);
  --accent-red-deep: var(--brick-2);
  --accent-red-lit: var(--brick-3);
  --accent-ochre: var(--ochre-1);
  --line-ink: var(--ink-1);
  --line-red: var(--brick-1);
  --misreg-red: var(--brick-1);
  --misreg-ochre: var(--ochre-1);

  /* Type */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-type: "Special Elite", "Courier New", monospace;
  --w-display-black: 800;
  --w-display-bold: 700;
  --w-display-mid: 600;
  --w-body-reg: 400;
  --w-body-med: 500;
  --w-body-bold: 700;
  --fs-hero: clamp(3.4rem, 8.5vw, 7.5rem);
  --fs-d1: clamp(2.75rem, 6vw, 5rem);
  --fs-d2: clamp(2.4rem, 5.5vw, 4.4rem);
  --fs-d3: 1.75rem;
  --fs-lead: clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-label: 0.8125rem;
  --fs-micro: 0.6875rem;
  --lh-tight: 0.86;
  --lh-snug: 1.02;
  --lh-body: 1.5;
  --lh-label: 1.1;
  --tr-display: 0.01em;
  --tr-label: 0.22em;

  /* Space — compressed poster rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --section-y: clamp(48px, 7vw, 96px);
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1240px;

  /* Ink doesn't do soft radii */
  --radius-0: 0px;
  --radius-1: 2px;
  --rule-hair: 2px;
  --rule-1: 3px;
  --rule-2: 5px;
  --rule-3: 8px;
  --rule-4: 12px;

  /* Misregistration + tilt */
  --misreg-x: 3px;
  --misreg-y: 3px;
  --misreg-x-lg: 5px;
  --misreg-y-lg: 4px;
  --tilt-sm: -1.2deg;
  --tilt-md: -2.4deg;
  --tilt-pos: 1.6deg;

  /* Texture */
  --grain-opacity: 0.16;
  --grain-scale: 160px;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background-color: var(--surface-page);
  background-image: var(--paper-grain);
  background-blend-mode: multiply;
  background-size: var(--grain-scale) var(--grain-scale);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.cp-display {
  font-family: var(--font-display);
  font-weight: var(--w-display-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--text-ink);
  margin: 0 0 0.35em;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--accent-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-1);
  transition:
    color 0.12s steps(2, end),
    text-decoration-color 0.12s steps(2, end);
}

a:hover {
  color: var(--accent-red-deep);
  text-decoration-color: var(--brick-1);
}

:focus-visible {
  outline: var(--rule-1) solid var(--accent-ochre);
  outline-offset: 2px;
}

::selection {
  background: var(--brick-1);
  color: var(--paper-3);
}

.cp-skip {
  position: absolute;
  left: -9999px;
}

.cp-skip:focus {
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 10;
  background: var(--paper-3);
  color: var(--ink-1);
  padding: var(--sp-3) var(--sp-4);
  border: var(--rule-1) solid var(--ink-1);
}

/* ==========================================================================
   Utilities — paper, ink, carved edges, misregistration
   ========================================================================== */

.cp-wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ink surfaces take grain as a LOW-OPACITY OVERLAY, not a full-strength `screen`
   blend. Screen over near-black is the trap: screen(0.07, ~0.5 noise) lands around
   0.54, so #1C1613 renders as a washed-out mid-grey band instead of ink. The
   overlay keeps the near-black and still shows tooth. */
.cp-paper--ink {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-ink);
  color: var(--text-on-ink);
}

.cp-paper--ink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--paper-grain);
  background-size: var(--grain-scale) var(--grain-scale);
  mix-blend-mode: screen;
  opacity: var(--grain-opacity);
}

/* Keep content above the grain layer so it isn't lightened along with the field. */
.cp-paper--ink > * {
  position: relative;
  z-index: 1;
}

.cp-paper--brick {
  background-color: var(--brick-1);
  background-image: var(--paper-grain);
  background-blend-mode: multiply;
  background-size: var(--grain-scale) var(--grain-scale);
  color: var(--text-on-brick);
}

.cp-label {
  font-family: var(--font-display);
  font-weight: var(--w-display-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--accent-red);
  margin: 0 0 10px;
}

.cp-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: var(--w-display-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
}

.ink-rough {
  filter: url(#ink-rough);
}

/* Red ghost of the element slipped down-left, like a shifted print run.
   Never on body copy. */
/* `z-index: 0` is load-bearing: it makes each .misreg element its own stacking
   context, so the negative-z ghost paints behind its own text but still ON TOP of
   any ancestor's background. Without it the ghost escapes to the nearest ancestor
   stacking context — e.g. a tilted .cp-card, whose `transform` creates one — and
   disappears behind that ancestor's fill. */
/* `display: block` + a full-width ghost are both load-bearing. The ghost is a
   separate absolutely-positioned copy of the text, so it only lines up if it wraps
   at exactly the same width as the real text. On an inline element that spans two
   lines the ghost breaks at a different point and reads as a broken duplicate
   rather than a print slip. */
.misreg {
  position: relative;
  z-index: 0;
  display: block;
}

.misreg::before {
  content: attr(data-ghost);
  position: absolute;
  left: calc(-1 * var(--misreg-x));
  top: var(--misreg-y);
  width: 100%;
  color: var(--misreg-red);
  z-index: -1;
  pointer-events: none;
  filter: url(#ink-rough);
}

.misreg--lg::before {
  left: calc(-1 * var(--misreg-x-lg));
  top: var(--misreg-y-lg);
}

.misreg--ochre::before {
  color: var(--misreg-ochre);
}

/* ==========================================================================
   Components — Badge, Button, Input, Card
   ========================================================================== */

/* Badge — stamped, tilted label chip with a misregistered ghost layer */
.cp-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--w-display-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  font-size: var(--fs-label);
  line-height: 1;
  padding: 7px 12px 6px;
  border: var(--rule-hair) solid var(--ink-1);
  background: var(--paper-3);
  color: var(--ink-1);
  transform: rotate(var(--tilt-sm));
}

.cp-badge--red {
  background: var(--brick-1);
  color: var(--paper-3);
  border-color: var(--ink-1);
  transform: rotate(var(--tilt-pos));
}

.cp-badge--ink {
  background: var(--ink-1);
  color: var(--paper-3);
  transform: rotate(var(--tilt-sm));
}

.cp-badge--ochre {
  background: var(--ochre-1);
  color: var(--ink-1);
  transform: rotate(var(--tilt-pos));
}

/* Button — carved wood-type block with an offset ink second-pass shadow.
   Pressing translates the button into its own shadow, like a stamp landing. */
.cp-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--w-display-black);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.125rem;
  line-height: 1;
  padding: 16px 26px 14px;
  border: var(--rule-1) solid var(--ink-1);
  border-radius: var(--radius-0);
  background: var(--brick-1);
  color: var(--paper-3);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 6px 6px 0 var(--ink-1);
  transition:
    background-color 0.1s steps(2, end),
    box-shadow 0.1s steps(2, end),
    transform 0.1s steps(2, end);
}

.cp-btn:hover {
  background: var(--brick-3);
  color: var(--paper-3);
  text-decoration: none;
}

.cp-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink-1);
}

.cp-btn--ochre {
  background: var(--ochre-1);
  color: var(--ink-1);
}

.cp-btn--ochre:hover {
  background: var(--ochre-3);
  color: var(--ink-1);
}

.cp-btn--ghost {
  background: transparent;
  color: var(--ink-1);
  box-shadow: 6px 6px 0 var(--brick-1);
}

.cp-btn--ghost:hover {
  background: var(--paper-3);
  color: var(--ink-1);
}

/* Input — carved single-line field; bottom rule thickens to brick on focus */
.cp-field {
  display: block;
}

.cp-field-label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-display-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--paper-3);
  margin-bottom: 6px;
}

.cp-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink-1);
  background: var(--paper-3);
  border: var(--rule-hair) solid var(--ink-1);
  border-bottom-width: var(--rule-1);
  border-radius: var(--radius-0);
  padding: 13px 14px;
  box-shadow: 5px 5px 0 var(--ink-1);
  transition:
    border-color 0.1s steps(2, end),
    box-shadow 0.1s steps(2, end);
}

.cp-input::placeholder {
  color: var(--ink-3);
  opacity: 0.75;
}

.cp-input:focus {
  outline: none;
  border-bottom-width: var(--rule-2);
  border-bottom-color: var(--brick-1);
  box-shadow: 5px 5px 0 var(--brick-2);
}

.cp-input:focus-visible {
  outline: var(--rule-1) solid var(--ochre-3);
  outline-offset: 2px;
}

/* Honeypot — visually removed, still reachable to naive bots. Not display:none,
   which some bots skip. */
.cp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Card — poster panel: heavy ink frame, hard offset block shadow, spot
   illustration well, misregistered title, slight tilt (taped up, not aligned) */
.cp-card {
  background: var(--surface-card);
  border: var(--rule-3) solid var(--ink-1);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  color: var(--ink-2);
}

.cp-card--a {
  box-shadow: 12px 12px 0 var(--brick-1);
  transform: rotate(-1.4deg);
}

.cp-card--b {
  box-shadow: 12px 12px 0 var(--ochre-1);
  transform: rotate(1.5deg);
}

.cp-card-well {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  border-bottom: var(--rule-hair) solid var(--ink-1);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.cp-card-well img {
  width: 96px;
  height: auto;
  display: block;
}

.cp-card-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-display-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  font-size: var(--fs-label);
  color: var(--brick-1);
  margin: 0 0 6px;
}

.cp-card--b .cp-card-eyebrow {
  color: var(--ochre-2);
}

.cp-card-title {
  font-size: var(--fs-d3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

/* ==========================================================================
   Sections
   ========================================================================== */

/* Masthead — wordmark only. A one-page placeholder has nowhere to navigate. */
.cp-masthead {
  border-bottom: var(--rule-2) solid var(--ink-1);
}

.cp-masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-4);
}

.cp-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-display-black);
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-1);
  margin: 0;
}

.cp-masthead-note {
  font-family: var(--font-type);
  font-size: var(--fs-label);
  color: var(--ink-3);
  margin: 0;
}

/* Hero */
.cp-hero {
  position: relative;
  overflow: hidden;
}

.cp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px);
}

.cp-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.cp-hero h1 {
  font-size: var(--fs-hero);
  line-height: 0.82;
  letter-spacing: 0.005em;
  margin: 0;
}

.cp-hero-line2 {
  display: block;
  color: var(--brick-1);
}

.cp-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
  margin: 26px 0 30px;
}

.cp-art-frame {
  justify-self: center;
  background: var(--paper-3);
  border: var(--rule-3) solid var(--ink-1);
  box-shadow: 12px 12px 0 var(--brick-1);
  transform: rotate(-2deg);
  padding: 18px;
}

.cp-art-frame img {
  width: min(46vw, 520px);
  display: block;
}

/* The Pulls — ink band */
.cp-pulls {
  position: relative;
  border-top: var(--rule-2) solid var(--ink-1);
  border-bottom: var(--rule-2) solid var(--ink-1);
  overflow: hidden;
}

.cp-pulls-inner {
  padding-block: clamp(48px, 7vw, 96px);
}

.cp-pulls .cp-label {
  color: var(--ochre-1);
}

.cp-pulls h2 {
  color: var(--paper-3);
  font-size: var(--fs-d2);
  max-width: 16ch;
  margin: 0 0 clamp(32px, 5vw, 56px);
}

.cp-spine {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  color: rgba(214, 154, 45, 0.5);
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  pointer-events: none;
}

.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

/* Signup — brick band */
.cp-signup {
  position: relative;
  overflow: hidden;
  border-bottom: var(--rule-2) solid var(--ink-1);
}

.cp-signup-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 90px);
}

.cp-signup .cp-label {
  color: var(--paper-3);
}

.cp-signup h2 {
  color: var(--paper-3);
  font-size: var(--fs-d2);
  max-width: 14ch;
  margin: 0 0 8px;
}

.cp-signup-sub {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  color: var(--paper-3);
  margin: 0 0 24px;
}

.cp-form-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.cp-form-row .cp-field--email {
  flex: 1 1 240px;
}

.cp-form-row .cp-field--zip {
  flex: 0 0 130px;
}

.cp-form-row .cp-btn {
  flex: 0 0 auto;
}

.cp-form-note {
  font-family: var(--font-type);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--paper-2);
  margin: 18px 0 0;
  max-width: 46ch;
}

.cp-notice {
  font-family: var(--font-display);
  font-weight: var(--w-display-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--paper-3);
  border: var(--rule-1) solid var(--paper-3);
  padding: 16px 22px;
  display: inline-block;
}

.cp-notice-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--paper-3);
  margin: 16px 0 0;
  max-width: 40ch;
}

.cp-error {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--paper-3);
  background: var(--brick-2);
  border: var(--rule-hair) solid var(--paper-3);
  padding: 10px 14px;
  margin: 0 0 18px;
}

.cp-signup .cp-art-frame {
  box-shadow: 12px 12px 0 var(--ink-1);
  transform: rotate(2deg);
  padding: 16px;
}

.cp-signup .cp-art-frame img {
  width: min(40vw, 420px);
}

/* Footer */
.cp-footer {
  border-top: var(--rule-2) solid var(--ink-1);
  color: var(--paper-2);
}

.cp-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-end;
  justify-content: space-between;
  padding-block: clamp(40px, 5vw, 64px);
}

.cp-footer-mark {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.cp-footer-mark img {
  width: 68px;
  filter: invert(1);
}

.cp-footer h2 {
  color: var(--paper-3);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.85;
  margin: 0 0 10px;
}

.cp-footer-tag {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--paper-2);
  max-width: 42ch;
  margin: 0;
}

.cp-footer-fine {
  font-family: var(--font-type);
  font-size: var(--fs-label);
  color: var(--paper-4);
  text-align: right;
  line-height: 1.6;
  margin: 0;
}

.cp-footer a {
  color: var(--ochre-3);
  text-decoration-color: var(--ochre-1);
}

.cp-footer a:hover {
  color: var(--ochre-1);
  text-decoration-color: var(--paper-3);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .cp-hero-inner,
  .cp-signup-inner {
    grid-template-columns: 1fr;
  }

  .cp-art-frame img,
  .cp-signup .cp-art-frame img {
    width: min(78vw, 460px);
  }

  .cp-spine {
    display: none;
  }

  .cp-footer-fine {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .cp-form-row .cp-field--email,
  .cp-form-row .cp-field--zip {
    flex: 1 1 100%;
  }

  .cp-form-row .cp-btn {
    width: 100%;
    text-align: center;
  }

  .cp-card--a,
  .cp-card--b {
    transform: none;
    box-shadow: 8px 8px 0 var(--brick-1);
  }

  .cp-card--b {
    box-shadow: 8px 8px 0 var(--ochre-1);
  }
}

/* Stepped transitions mimic a stamp landing — honour reduced-motion anyway. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}