:root{
  --cb-yellow:#FFE600;
  --cb-cyan:#55DDE0;
  --cb-magenta:#FF4D9D;

  /* New colours */
  --cb-red:#f3585e;
  --cb-orange:#faa156;
  --cb-blue:#2156f9;
  --cb-gold:#eac246;
  --cb-navy:#193193;
  --cb-deep:#061864;
  --cb-ice:#c1effe;
  --cb-green:#34C759;

  --cb-paper:#FFF7E8;
  --cb-black:#000000;
  --cb-white:#FFFFFF;
  --cb-border:4px;
  --cb-radius:24px;
  --cb-shadow:10px 10px 0 0 #000;
  --cb-shadow-sticker:6px 6px 0 0 #000;
}
/* FRONT-END TEST: cb-palette-2026-02-26 */
/* Background: soft colour blobs + halftone + grain */
body{
  background: var(--cb-paper);
  position: relative;
}
body:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(closest-side at 15% 15%, rgba(85,221,224,.25), transparent 60%),
    radial-gradient(closest-side at 85% 80%, rgba(255,77,157,.22), transparent 60%),
    radial-gradient(closest-side at 80% 15%, rgba(255,230,0,.18), transparent 55%);
  filter: blur(24px);
}
body:after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(#000 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,0,0,.05), rgba(0,0,0,0)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
  background-size: 10px 10px, auto, auto;
  opacity: .10;
  mix-blend-mode: multiply;
}

/* Utility colour blocks */
.cb-bg-yellow{ background: var(--cb-yellow) !important; }
.cb-bg-cyan{ background: var(--cb-cyan) !important; }
.cb-bg-magenta{ background: var(--cb-magenta) !important; }
.cb-bg-white{ background: var(--cb-white) !important; }
.cb-bg-paper{ background: var(--cb-paper) !important; }

/* New utility colour blocks */
.cb-bg-red{ background: var(--cb-red) !important; }
.cb-bg-orange{ background: var(--cb-orange) !important; }
.cb-bg-blue{ background: var(--cb-blue) !important; }
.cb-bg-gold{ background: var(--cb-gold) !important; }
.cb-bg-navy{ background: var(--cb-navy) !important; }
.cb-bg-deep{ background: var(--cb-deep) !important; }
.cb-bg-ice{ background: var(--cb-ice) !important; }
.cb-bg-green{ background: var(--cb-green) !important; }

/* Panel */
.cb-panel{
  border: var(--cb-border) solid var(--cb-black);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  background: var(--cb-white);
  padding: 22px;
}

/* Sticker */
.cb-sticker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: var(--cb-border) solid var(--cb-black);
  border-radius: 999px;
  box-shadow: var(--cb-shadow-sticker);
  background: var(--cb-yellow);
  padding: 8px 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
}

/* Bubble */
.cb-bubble{
  --bubble-fill: #FFFFFF;
  position: relative;
  border: var(--cb-border) solid var(--cb-black);
  border-radius: var(--cb-radius);
  box-shadow: 8px 8px 0 0 #000;
  background: var(--bubble-fill);
  padding: 18px;
}
.cb-bubble:after{
  content:"";
  position:absolute;
  bottom:-18px;
  left:22px;
  width:0;height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:20px solid #000;
  filter: drop-shadow(4px 4px 0 #000);
}
.cb-bubble:before{
  content:"";
  position:absolute;
  bottom:-14px;
  left:24px;
  width:0;height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:18px solid var(--bubble-fill);
}
.cb-bubble.cb-bg-yellow{ --bubble-fill: var(--cb-yellow); }
.cb-bubble.cb-bg-cyan{ --bubble-fill: var(--cb-cyan); }
.cb-bubble.cb-bg-magenta{ --bubble-fill: var(--cb-magenta); }
.cb-bubble.cb-bg-white{ --bubble-fill: var(--cb-white); }
.cb-bubble.cb-bg-red{ --bubble-fill: var(--cb-red); }
.cb-bubble.cb-bg-orange{ --bubble-fill: var(--cb-orange); }
.cb-bubble.cb-bg-blue{ --bubble-fill: var(--cb-blue); }
.cb-bubble.cb-bg-gold{ --bubble-fill: var(--cb-gold); }
.cb-bubble.cb-bg-navy{ --bubble-fill: var(--cb-navy); }
.cb-bubble.cb-bg-deep{ --bubble-fill: var(--cb-deep); }
.cb-bubble.cb-bg-ice{ --bubble-fill: var(--cb-ice); }
.cb-bubble.cb-bg-green{ --bubble-fill: var(--cb-green); }

/* Navigation: pill links with chunky shadow */
.wp-block-navigation__container .wp-block-navigation-item__content{
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  padding: 8px 14px;
  box-shadow: 4px 4px 0 0 #000;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 12px;
}
.wp-block-navigation__container .wp-block-navigation-item__content:hover{
  transform: translateY(-2px);
}

/* Buttons: comic feel */
.wp-block-button .wp-block-button__link{
  border-width: 4px !important;
  border-style: solid !important;
  border-color: #000 !important;
  box-shadow: var(--cb-shadow-sticker) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}
.wp-block-button .wp-block-button__link:hover{ transform: translateY(-2px); }

/* Punchy headings */
h1, h2, h3, h4{
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Small badge */
.cb-badge{
  display:inline-block;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* === Story Grid === */
/* Responsive 3-up on desktop, 1-up on mobile */
.cb-story-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 781px){
  .cb-story-grid{ grid-template-columns: 1fr; }
}

/* Story card wrapper */
.cb-story-card{
  border: var(--cb-border) solid var(--cb-black);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  padding: 12px;
  overflow: hidden;
}

/* Image container (Cover block) */
.cb-story-card .wp-block-cover{
  border-radius: calc(var(--cb-radius) - 6px);
  overflow: hidden;
  min-height: 420px;
}
@media (max-width: 781px){
  .cb-story-card .wp-block-cover{ min-height: 520px; }
}

/* Caption chips */
.cb-story-top,
.cb-story-bottom{
  position: absolute;
  z-index: 3;
  max-width: 80%;
  background: rgba(255,255,255,.94);
  border: 3px solid #000;
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 6px 6px 0 0 #000;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
  font-family: "Segoe Script","Brush Script MT","Apple Chancery","Comic Sans MS",cursive;
  font-size: 16px;
  margin: 0;
}

.cb-story-top{
  top: 12px;
  left: 12px;
}

.cb-story-bottom{
  bottom: 12px;
  right: 12px;
  text-align: right;
}

/* === Issue Cards (Split) === */
/* Dots utility (for per-panel halftone) */
.cb-dots{
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 0 0;
}

/* Issue card: coloured top + white bottom */
.cb-panel.cb-issue-card{
  padding: 0;           /* override default panel padding */
  overflow: hidden;
}
.cb-issue-top{
  position: relative;
  padding: 18px;
}
.cb-issue-top:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 10px 10px;
}
.cb-issue-top > *{ position: relative; } /* keep content above dots */

.cb-issue-bottom{
  background: #fff;
  padding: 18px;
}

/* Pills inside issue cards */
.cb-pill{
  display:inline-block;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Compact badge inside card */
.cb-badge{
  display:inline-block;
}