/* 561 Media — "Option B" sticker-collage design kit.
 * Ported from ~/561-media-agents/output/social-designs/ai-audit/build-stickers.mjs.
 * Drop-in, framework-agnostic. Pair with the Typekit kit for Obviously Narrow:
 *   <link rel="stylesheet" href="https://use.typekit.net/vmt1ngp.css">
 * Then use .graph-paper backgrounds, .stk die-cut stickers, .sk-headline / .sk-accent type.
 */

:root {
  --sk-navy: #1a3648;
  --sk-orange: #ec6a2a;
  --sk-amber: #ff8400;
  --sk-sky: #54baf8;
  --sk-blue: #2d6b97;
  --sk-cobalt: #2540ff;
  --sk-lime: #c2f53f;
  /* Errors and warnings ONLY (approved 7/28/2026). Never decorative, never a
     border tint, never a hover state. Orange means "this is the action" and
     cannot also mean "this is wrong", which is why error earns its own slot.
     Always pair with an icon and with words: colour alone is not a signal.
       --sk-brick        5.47:1 on cream, 2.03:1 on navy  -> light surfaces
       --sk-brick-light  6.17:1 on navy                   -> inside a band
     Same relationship cobalt and lime have. */
  --sk-brick: #b3311d;
  --sk-brick-light: #ff9b85;
  --sk-cream: #f1f1e6;
  --sk-disp: "obviously-narrow", "Barlow Condensed", "Arial Narrow", sans-serif;
  /* Brush accent face (added 8/20/2026). Brush Up ships in the same Typekit
     kit vmt1ngp, single weight 400 (brush-up-too is the heavier 500 partner).
     It is a CAPS-ONLY rough brush display face, not a connected script -
     lowercase input renders as caps, so case in the markup does not matter.
     ACCENT ONLY: one brush moment per piece, on the accent line or a single
     swapped headline word. Never body copy, never a sticker label, never
     more than one per canvas. It REPLACES the cobalt-italic accent - never
     stack brush and italic in the same piece. Optical size: it reads much
     smaller than Obviously Narrow, so set it ~1.7x the italic size it
     replaces (58px italic -> ~104px brush) to hold the same weight. */
  --sk-script: "brush-up", "brush-up-too", cursive;
}

/* ---- Background: cream + graph-paper grid ---- */
.graph-paper {
  background-color: var(--sk-cream);
  background-image:
    repeating-linear-gradient(0deg, rgba(26, 54, 72, 0.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(26, 54, 72, 0.05) 0 1px, transparent 1px 46px);
}
/* Same grid as an overlay you can drop on any colored surface */
.graph-grid {
  background-image:
    repeating-linear-gradient(0deg, rgba(26, 54, 72, 0.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(26, 54, 72, 0.05) 0 1px, transparent 1px 46px);
}
/* On dark surfaces, use a light grid */
.graph-grid-light {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px);
}

/* ---- Typography ---- */
.sk-headline {
  font-family: var(--sk-disp);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.sk-accent {
  font-family: var(--sk-disp);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--sk-cobalt);
}
.sk-script {
  font-family: var(--sk-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sk-cobalt);
}
.sk-kicker {
  font-family: var(--sk-disp);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Die-cut stickers ---- */
.stk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-family: var(--sk-disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  border: 5px solid #fff;
  box-shadow: 0 12px 28px rgba(26, 54, 72, 0.24);
}
/* Larger 7px border for big print/social contexts */
.stk-thick { border-width: 7px; }

/* Square die-cut is the ONLY sticker shape (v2, 7/14/2026).
 * .pill / .tag / .oval used to set 999px / 14px / 50% radii. They are REMOVED,
 * not just deprecated, so a rounded sticker cannot be produced even by loading
 * sticker.css on its own (dossier.css only force-flattens under .dz-page, which
 * social builds do not use). Legacy markup keeps its padding and renders square. */
.stk { border-radius: 0; }
.stk.pill { padding: 12px 22px; }
.stk.tag { padding: 14px 20px; }
.stk.oval { padding: 18px 28px; }
/* Preferred class going forward: */
.stk.dz-square, .stk.square { padding: 16px 24px; }

.stk-navy { background: var(--sk-navy); }
.stk-orange { background: var(--sk-orange); }
.stk-amber { background: var(--sk-amber); }
.stk-cobalt { background: var(--sk-cobalt); }
.stk-blue { background: var(--sk-blue); }
.stk-sky { background: var(--sk-sky); color: var(--sk-navy); }
.stk-lime { background: var(--sk-lime); color: var(--sk-navy); }
.stk-white { background: #fff; color: var(--sk-navy); }

/* Natural hand-placed tilt helpers */
.tilt-l { transform: rotate(-7deg); }
.tilt-r { transform: rotate(7deg); }
.tilt-l2 { transform: rotate(-10deg); }
.tilt-r2 { transform: rotate(10deg); }

/* ---- Footer rule (CTA left, orange URL right) ---- */
.sk-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sk-disp);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 2px solid var(--sk-navy);
  padding-top: 16px;
}
.sk-foot .sk-url { color: var(--sk-orange); }