/* GeekScope: Campaigns page (campaigns.html). Loads after css/system.css.
   No authored scroll moment: the pencil line uses the shared draw-on utility (.u-draw),
   and the route steps use .u-step. js/campaigns.js draws the pencil marks to fit the text. */

/* ---------- hero ---------- */
.cp-hero { max-width: var(--max); margin: 0 auto; padding: 28px var(--g) 0; }
.cp-hero h1 { max-width: 12em; }
@media (max-width: 767px) { .cp-hero h1 .ln { white-space: normal; } }
@media (min-width: 1100px) {
  .cp-hero { padding-top: clamp(36px, 7vh, 84px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .cp-hero h1 { grid-column: 1 / -1; max-width: none; }
  .cp-hero h1 .ln { display: block; }
  .cp-hero-b { grid-column: 1 / span 6; }
}

/* ---------- the centrepiece: evidence beside the email it informs ---------- */
.cite { margin-top: 64px; background: var(--slide); box-shadow: 0 -1px 0 var(--ink), 0 1px 0 var(--ink); }
.cite-in { position: relative; max-width: var(--max); margin: 0 auto; padding: 40px var(--g) 48px; display: grid; gap: 40px; }
.cite-in .reg-tl, .cite-in .reg-tr { top: 22px; }
.cite-in .reg-bl, .cite-in .reg-br { bottom: 22px; }
.cite-ev, .cite-mail { margin: 0; position: relative; z-index: 1; min-width: 0; }
.cite-l { font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); margin-bottom: 14px; }
.cite-ev .lens-card { margin-top: 0; }
.lc-title span { box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.mail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; box-shadow: 0 1px 0 var(--ink); }
.mail-h { margin: 0; padding: 4px 0 0; }
.mail-h div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: 10px 0; box-shadow: 0 1px 0 var(--rule); }
.mail-h dt { font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.mail-h dd { margin: 0; font-size: 16px; }
.mail-b { margin-top: 24px; font-size: 21px; line-height: 1.58; letter-spacing: -0.008em; max-width: 30em; }
.slot { font: 450 0.84em/1 var(--mono); font-variation-settings: "wdth" 87; letter-spacing: -0.02em; color: var(--ink-2); }
/* the cited phrase: tinted halo until the pencil is drawn over it */
.cited { background: var(--halo); color: inherit; padding: 0.04em 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pen-on .cited { background: transparent; }

/* pencil overlays (filled by js/campaigns.js) */
.pen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }

@media (min-width: 900px) {
  .cite-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding-top: 56px; padding-bottom: 64px; }
  .cite-ev { grid-column: 1 / span 5; }
  .cite-mail { grid-column: 7 / span 6; }
}
@media (min-width: 1100px) {
  .cite { margin-top: 88px; }
  .cite-in { padding-top: 72px; padding-bottom: 80px; }
  .cite-ev { grid-column: 1 / span 4; }
  .cite-ev .lens-card { padding: 16px 20px 18px; }
  .cite-mail { grid-column: 6 / span 7; }
  .mail-b { font-size: clamp(22px, 1.75vw, 25px); margin-top: 28px; }
}

/* ---------- how a campaign runs: one route, five stations of their own width ---------- */
.runs { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--g) 0; }
.route { margin-top: 44px; display: grid; }
.rs { position: relative; padding: 0 0 36px 32px; }
/* phone: a vertical ink route on the left, a tick at each station */
.route::before { content: none; }
.rs::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.rs::after { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 2px; background: var(--ink); }
.rs:last-child::before { bottom: auto; height: 14px; }
.rt { color: var(--ink-2); max-width: 30em; }
.rt strong { color: var(--ink); font-weight: 650; }
.rt code { font-size: 0.88em; }
.opener { text-decoration: line-through; text-decoration-color: var(--ink-2); }
.pen-on .opener { text-decoration: none; }
.rs-2 .rt { font-size: 20px; line-height: 1.5; }
.rs-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.rs-key span { display: inline-flex; align-items: center; gap: 8px; }
.rs-key svg { width: 14px; height: 14px; fill: var(--ink); }

/* send cadence: one week as a ruler */
.cad { margin: 22px 0 0; max-width: 320px; }
.cad-r { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: end; column-gap: 12px; height: 26px; }
.cad-l { font: 450 15px/1 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.cad-svg { width: 100%; height: 14px; overflow: visible; }
.cad-base { fill: none; stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cad-t { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cad-fine { stroke-width: 5; }
.cad-f { margin-top: 8px; padding-left: 76px; font: 450 15px/1 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }

@media (min-width: 1100px) {
  .route { margin-top: 64px; grid-template-columns: 0.82fr 1.34fr 1.12fr 1fr 0.86fr; column-gap: 40px; padding-top: 30px; position: relative; }
  .route::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); }
  .rs { padding: 0; }
  .rs::before { left: 0; top: -39px; bottom: auto; width: 2px; height: 18px; }
  .rs::after { content: none; }
  .rs + .rs::after { content: ""; position: absolute; left: -26px; top: -35px; width: 9px; height: 9px; background: none; border-right: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg); }
  .rs:last-child::before { height: 18px; }
  .rs-2 .rt { font-size: 21px; }
}

/* ---------- GeekScope or Beanstalks? ---------- */
.pick { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--g) 0; }
.sides { margin-top: 44px; display: grid; box-shadow: 0 -2px 0 var(--ink); }
.side { display: grid; align-content: start; padding: 28px 0 36px; }
.side + .or + .side, .or + .side { box-shadow: 0 -1px 0 var(--rule); }
.side h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.sis { font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); letter-spacing: 0; }
.side-lead { margin-top: 14px; color: var(--ink-2); max-width: 30em; }
.side-lead strong { color: var(--ink); font-weight: 650; }
.pr { margin-top: 28px; display: grid; gap: 8px; max-width: 26em; }
.pr-pre { font-size: 16px; color: var(--ink-2); }
.side-gs .pr-pre { display: none; }
.pr-n { font: 500 clamp(56px, 16vw, 72px)/0.9 var(--mono); font-variation-settings: "wdth" 112; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pr-u { font-size: 17px; line-height: 1.45; color: var(--ink); }
.side-a { margin-top: 14px; }
.or { display: none; }
.both { margin-top: 8px; padding-top: 22px; box-shadow: 0 -1px 0 var(--ink); color: var(--ink-2); }
.both strong { color: var(--ink); font-weight: 650; }
.both .lnk { margin-left: 4px; display: inline; padding: 0; }
@media (min-width: 900px) {
  .sides { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 0; }
  .side { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; row-gap: 0; padding: 32px 48px 40px 0; }
  .side-bs { padding: 32px 0 40px 48px; }
  .or + .side { box-shadow: none; }
  .side-gs .pr-pre { display: block; visibility: hidden; }
  .or { display: block; grid-row: 1 / span 4; position: relative; margin: 0; background: var(--ink); width: 1px; }
  .or span { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); padding: 6px 8px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--ink); font: 450 15px/1 var(--mono); font-variation-settings: "wdth" 87; }
  .pr-n { font-size: clamp(64px, 6vw, 88px); }
}

/* ---------- run it from ChatGPT or Claude ---------- */
.cp-ai { margin-top: var(--sec); background: var(--slide); box-shadow: 0 -1px 0 var(--ink); }
.cp-ai-in { position: relative; max-width: var(--max); margin: 0 auto; padding: 64px var(--g) 72px; display: grid; gap: 40px; }
.cp-ai-in .reg-tl, .cp-ai-in .reg-tr { top: 28px; }
.cp-ai-in .reg-bl, .cp-ai-in .reg-br { bottom: 28px; }
.cp-ai-text p { margin-top: 20px; color: var(--ink-2); max-width: 30em; }
.cp-ai-text .actions { gap: 12px 24px; }
.cp-ai .t-ai { background: var(--plate); }
.cp-ai .t-you { padding-left: 0; }
@media (min-width: 768px) { .cp-ai .t-you { padding-left: 24px; } }
@media (min-width: 1100px) {
  .cp-ai-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 104px var(--g) 112px; }
  .cp-ai-text { grid-column: 1 / span 5; }
  .cp-ai .log { grid-column: 7 / span 6; }
  .cp-ai .turn { grid-template-columns: 168px minmax(0, 1fr); }
}

/* CSP-safe positions from the approved mockup. */