/* ==========================================================================
   comic.css — panels, gutters, bursts, captions, folds, speed lines
   Each block is a reusable component. Copy the HTML snippet in README.md.
   ========================================================================== */

/* ---------- Panels & gutters ---------- */
.panel-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.panel {
  position: relative;
  border: var(--line) solid var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 22px 22px 26px;
  overflow: hidden;
}
.panel > * { position: relative; z-index: 2; }
.panel-wide { grid-column: 1 / -1; }
.panel-tilt-l { transform: rotate(-1deg); }
.panel-tilt-r { transform: rotate(1deg); }

/* ---------- Diagonal / angled section cuts ---------- */
.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%); }
.cut-top    { clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); }
.cut-both   { clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%); }

/* ---------- Diagonal fold-over panel (dog-ear / page peel) ----------
   <div class="panel fold-panel"> ...content...
     <div class="fold"><span>New!</span></div>
   </div>
   Set --fold on the panel to change the flap size.
*/
.fold-panel { --fold: 96px; clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%); }
.fold-panel > :not(.fold):first-child,
.fold-panel > h3, .fold-panel > h2 { max-width: calc(100% - var(--fold) + 10px); }
.fold {
  position: absolute; z-index: 3;
  top: 0; right: 0;
  width: var(--fold); height: var(--fold);
  background: var(--yellow);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  box-shadow: inset -8px 8px 14px rgba(20,20,20,0.35);
  background-image: radial-gradient(circle, rgba(20,20,20,0.25) 1px, transparent 1.3px);
  background-size: 5px 5px;
}
.fold::before {   /* ink keyline along the hinge */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - 2px), var(--ink) calc(50% - 2px), var(--ink) calc(50% + 2px), transparent calc(50% + 2px));
}
.fold span {
  position: absolute; left: 33%; top: 67%; width: 120%;
  transform: translate(-50%, -50%) rotate(45deg);
  font-family: var(--font-caption); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  white-space: nowrap;
}

/* ---------- Starburst / action burst ----------
   The element is the ink outline; ::before is the coloured inner star.
   <button class="burst">Press to<br>program</button>
*/
.burst {
  position: relative; display: inline-grid; place-items: center;
  padding: 30px 36px;
  font-family: var(--font-sfx); text-align: center; line-height: 0.95;
  color: var(--ink); background: var(--ink); border: 0;
  clip-path: polygon(50.0% 0.0%, 58.0% 14.9%, 71.7% 5.0%, 75.6% 17.9%, 89.1% 18.8%, 82.4% 34.4%, 98.7% 38.9%, 86.0% 50.0%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 72.4% 78.1%, 71.7% 95.0%, 58.0% 85.1%, 50.0% 100.0%, 40.9% 90.0%, 28.3% 95.0%, 27.6% 78.1%, 10.9% 81.2%, 17.6% 65.6%, 1.3% 61.1%, 9.0% 50.0%, 1.3% 38.9%, 17.6% 34.4%, 10.9% 18.8%, 27.6% 21.9%, 28.3% 5.0%, 40.9% 10.0%);
  filter: drop-shadow(5px 5px 0 var(--ink));
  --burst-fill: var(--yellow);
}
.burst::before {
  content: ""; position: absolute; inset: 5px; z-index: -1;
  background: var(--burst-fill);
  clip-path: polygon(50.0% 0.0%, 58.0% 14.9%, 71.7% 5.0%, 75.6% 17.9%, 89.1% 18.8%, 82.4% 34.4%, 98.7% 38.9%, 86.0% 50.0%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 72.4% 78.1%, 71.7% 95.0%, 58.0% 85.1%, 50.0% 100.0%, 40.9% 90.0%, 28.3% 95.0%, 27.6% 78.1%, 10.9% 81.2%, 17.6% 65.6%, 1.3% 61.1%, 9.0% 50.0%, 1.3% 38.9%, 17.6% 34.4%, 10.9% 18.8%, 27.6% 21.9%, 28.3% 5.0%, 40.9% 10.0%);
}
.burst:hover { --burst-fill: var(--magenta); color: var(--white); }
.burst-magenta { --burst-fill: var(--magenta); color: var(--white); }
.burst-magenta:hover { --burst-fill: var(--cyan); color: var(--ink); }
.burst-cyan    { --burst-fill: var(--cyan); }
.burst-sm { padding: 20px 24px; font-size: 1rem; }

/* ---------- Speed lines / action lines ---------- */
.speedlines { position: relative; }
.speedlines::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 0deg at var(--sl-x, 70%) var(--sl-y, 50%),
              var(--ink) 0deg 0.45deg, transparent 0.45deg 5deg);
  -webkit-mask-image: radial-gradient(circle at var(--sl-x, 70%) var(--sl-y, 50%), transparent 18%, #000 60%, transparent 85%);
          mask-image: radial-gradient(circle at var(--sl-x, 70%) var(--sl-y, 50%), transparent 18%, #000 60%, transparent 85%);
  opacity: 0.55;
}
.speedlines-h::before {   /* parallel horizontal streaks */
  background: repeating-linear-gradient(0deg, transparent 0 7px, var(--ink) 7px 9px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  opacity: 0.35;
}

/* ---------- Caption box (narrator box) ---------- */
.caption {
  display: inline-block;
  background: var(--yellow);
  border: var(--line) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 14px;
  font-family: var(--font-caption); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.3;
}
.caption-white { background: var(--white); }
.caption-cyan  { background: var(--cyan); }

/* ---------- Speech balloon (optional) ---------- */
.balloon {
  position: relative; display: inline-block;
  background: var(--white); border: var(--line) solid var(--ink);
  border-radius: 24px; padding: 12px 18px;
  font-family: var(--font-caption); font-weight: 700;
}
.balloon::after {
  content: ""; position: absolute; left: 30px; bottom: -18px;
  border: 10px solid transparent; border-top-color: var(--ink);
  border-left-width: 4px; border-right-width: 12px;
}

/* ---------- Magazine furniture ---------- */
.kicker {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink);
  display: inline-block; padding: 3px 8px;
  background: var(--cyan); border: 2px solid var(--ink);
}
.deck {
  font-family: var(--font-body); font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--ink-soft); line-height: 1.45; max-width: 60ch;
}
.pullquote {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.02; text-transform: uppercase;
  border-left: var(--line-heavy) solid var(--magenta);
  padding-left: 18px; margin: 28px 0;
}
.dropcap::first-letter {
  font-family: var(--font-display); font-size: 4.2em; line-height: 0.8;
  float: left; padding: 6px 10px 0 0; color: var(--magenta);
}
.cover-line {
  position: absolute; z-index: 5;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(0.9rem, 1.6vw, 1.3rem); line-height: 1;
  background: var(--white); border: var(--line) solid var(--ink);
  padding: 8px 12px; box-shadow: 4px 4px 0 var(--ink);
  max-width: 240px;
}
.cover-line em { font-style: normal; color: var(--magenta); }
.issue-badge {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em;
  border: 2px solid var(--ink); padding: 6px 10px; display: inline-block;
  background: var(--white);
}
.price-tag {
  font-family: var(--font-display); font-size: 1.1rem;
  background: var(--magenta); color: var(--white);
  border: var(--line) solid var(--ink); padding: 6px 10px;
  display: inline-block; transform: rotate(6deg);
}
.barcode {
  display: inline-block; height: 44px; width: 120px;
  border: 2px solid var(--ink); background-color: var(--white);
  background-image: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 14px, var(--ink) 14px 15px, transparent 15px 19px,
    var(--ink) 19px 21px, transparent 21px 22px);
  background-size: 22px 100%;
  background-clip: content-box; padding: 4px 6px;
}