/* Jack Davidson - Sign painter (3B)
   Drop-in brand primitives. Pair with ../../brand-guidelines-signpainter.md.
   Fonts: https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap */

:root {
  /* ground + text */
  --jd-paper: #FFF4E2;
  --jd-card: #FFFBF3;
  --jd-ink: #1A1A2E;
  --jd-ink-soft: #4A4A5E;
  --jd-rule: #E6D7BC;

  /* two accents only: red = action, cobalt = everything else */
  --jd-red: #CF3A23;      /* action only */
  --jd-red-hover: #B53220;
  --jd-cobalt: #2B4FD8;
  --jd-on-color: #FFF4E2; /* text on red, cobalt, ink */
  --jd-on-color-soft: rgba(255,244,226,.72); /* second clause of a headline on cobalt/ink */

  /* type */
  --jd-sign: Anton, 'Arial Narrow', sans-serif;
  --jd-sans: 'DM Sans', system-ui, sans-serif;

  /* space + shape */
  --jd-u: 8px;
  --jd-pad-section: 88px;
  --jd-radius-panel: 6px;
  --jd-radius-control: 4px;
  --jd-outline: 2px solid var(--jd-ink);

  --jd-scrim: linear-gradient(95deg, rgba(26,26,46,.9) 0%, rgba(26,26,46,.7) 45%, rgba(26,26,46,.35) 100%);
}

body {
  margin: 0;
  background: var(--jd-paper);
  color: var(--jd-ink);
  font: 400 17px/1.6 var(--jd-sans);
  text-wrap: pretty;
}

a { color: var(--jd-red); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--jd-ink); }

/* --- type ------------------------------------------------------------- */

.jd-display, h1, .jd-h1 {
  font: 400 88px/.92 var(--jd-sign);
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
}
h2, .jd-h2 {
  font: 400 48px/.98 var(--jd-sign);
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
}
h3, .jd-h3 { font: 700 22px/1.2 var(--jd-sans); margin: 0; }
p { margin: 0; max-width: 68ch; }
.jd-lead { font: 500 19px/1.55 var(--jd-sans); }
.jd-small { font-size: 15px; }

/* second clause of a two-tone headline */
.jd-quiet { color: var(--jd-red); }

/* sign plate label */
.jd-label {
  display: inline-block;
  align-self: flex-start;
  font: 700 12px/1 var(--jd-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--jd-ink);
  color: var(--jd-on-color);
  padding: 6px 9px;
  border-radius: var(--jd-radius-control);
}
.jd-descriptor {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 700 12px/1 var(--jd-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jd-ink-soft);
}
.jd-descriptor .jd-slash { color: var(--jd-red); }

/* --- logo ------------------------------------------------------------- */

.jd-wordmark { font: 400 72px/.9 var(--jd-sign); text-transform: uppercase; letter-spacing: .005em; }
.jd-wordmark.jd-wordmark--inline { font-size: 22px; line-height: 1; }
.jd-stamp {
  width: 96px; height: 72px;
  display: grid; place-items: center;
  background: var(--jd-cobalt); color: var(--jd-on-color);
  border: var(--jd-outline); border-radius: var(--jd-radius-panel);
  font: 400 40px/1 var(--jd-sign);
}

/* --- surfaces --------------------------------------------------------- */

.jd-panel { border-radius: var(--jd-radius-panel); padding: 28px; }
.jd-panel--card { background: var(--jd-card); border: var(--jd-outline); }
.jd-panel--ink { background: var(--jd-ink); color: var(--jd-on-color); }
.jd-panel--cobalt { background: var(--jd-cobalt); color: var(--jd-on-color); }

.jd-panel--ink .jd-label, .jd-panel--cobalt .jd-label { background: var(--jd-on-color); color: var(--jd-ink); }
.jd-panel--cobalt .jd-quiet, .jd-panel--ink .jd-quiet { color: var(--jd-on-color-soft); }

/* dates card: a plain card for "Coming up" (replaced the green freeway board, 22 Sep) */
.jd-dates { background: var(--jd-card); color: var(--jd-ink); border: var(--jd-outline); border-radius: var(--jd-radius-panel); padding: 22px 24px; }

/* --- controls --------------------------------------------------------- */

.jd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px/1 var(--jd-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: var(--jd-radius-control);
  border: 2px solid transparent;
  cursor: pointer;
}
.jd-btn:hover { text-decoration: none; }
.jd-btn--primary { background: var(--jd-red); border-color: var(--jd-red); color: var(--jd-on-color); }
.jd-btn--primary:hover { background: var(--jd-red-hover); border-color: var(--jd-red-hover); color: var(--jd-on-color); }
.jd-btn--ghost { background: none; border-color: var(--jd-ink); color: var(--jd-ink); }
.jd-btn--ghost:hover { background: var(--jd-ink); color: var(--jd-on-color); }
.jd-btn--ink { background: var(--jd-ink); border-color: var(--jd-ink); color: var(--jd-on-color); }
.jd-btn--ink:hover { background: var(--jd-cobalt); border-color: var(--jd-cobalt); color: var(--jd-on-color); }

.jd-input {
  font: 400 16px/1.2 var(--jd-sans);
  padding: 12px 14px;
  border: var(--jd-outline);
  border-radius: var(--jd-radius-control);
  background: var(--jd-card);
  color: var(--jd-ink);
}
.jd-input::placeholder { color: var(--jd-ink-soft); opacity: .8; }
.jd-input:focus { outline: 3px solid var(--jd-cobalt); outline-offset: 0; }

/* --- responsive ------------------------------------------------------- */

@media (max-width: 860px) {
  :root { --jd-pad-section: 52px; }
  .jd-display, h1, .jd-h1 { font-size: 52px; }
  h2, .jd-h2 { font-size: 34px; }
  .jd-wordmark { font-size: 52px; }
}