.cl-wrap {
  --cl-primary: var(--green, #45a07b);
  --cl-primary-dark: var(--green-dk, #357a5e);
  --cl-bg: var(--gray-lt, #f7f6f3);
  --cl-border: var(--gray-bdr, #e2ddd8);
  --cl-text: var(--dark, #191919);
  /* Not tied to the theme's --gray-mid (#7a7a7a) — that fails WCAG AA
     (4.5:1) at the small sizes muted text is used at here (tags,
     excerpts, back-link). #5a5a5a matches the safe muted shade the
     theme's own program/learn cards already use elsewhere. */
  --cl-muted: #5a5a5a;
  --cl-radius: var(--radius-lg, 20px);
  --cl-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.07));
  --cl-font-body: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --cl-font-head: var(--font-head, var(--cl-font-body));
  color: var(--cl-text);
  font-family: var(--cl-font-body);
  font-size: 16px;
  line-height: 1.5;
}
.cl-wrap * { box-sizing: border-box; }
.cl-wrap h1, .cl-wrap h2, .cl-wrap h3 { font-family: var(--cl-font-head); line-height: 1.2; }

/* Employment-type colors — reuse the studio's own brand palette
   (the same greens/teals/yellows/purples used for Art/Crochet/Sewing
   elsewhere) so job types read at a glance instead of every card
   looking identical. */
.is-green  { --cl-accent: var(--green, #45a07b);  --cl-accent-soft: rgba(69,160,123,.14);  --cl-accent-text: var(--green-dk, #357a5e); }
.is-teal   { --cl-accent: var(--teal, #9ddae0);   --cl-accent-soft: rgba(157,218,224,.25); --cl-accent-text: #2e9aa6; }
.is-yellow { --cl-accent: var(--yellow, #eabf54); --cl-accent-soft: rgba(234,191,84,.22);  --cl-accent-text: #a3790c; }
.is-purple { --cl-accent: var(--purple, #9f8ed8); --cl-accent-soft: rgba(159,142,216,.22); --cl-accent-text: #6b55b8; }

.cl-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--cl-accent-soft);
  color: var(--cl-accent-text);
  margin-bottom: 16px;
}

/* Archive hero */
.cl-hero { text-align: center; max-width: 640px; margin: 0 auto; }
.cl-hero .cl-icon-circle { width: 64px; height: 64px; margin: 0 auto 22px; }
.cl-eyebrow {
  display: inline-block;
  font-family: var(--cl-font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-primary);
  margin-bottom: 12px;
}
.cl-hero h1 { font-size: 2.2rem; font-weight: 800; text-transform: uppercase; margin: 0 0 14px; }
.cl-hero p { color: var(--cl-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }

.cl-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; color: var(--cl-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.cl-back-link:hover { color: var(--cl-primary); }

/* Job grid + cards */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.cl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--cl-text);
  box-shadow: var(--cl-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cl-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(15,23,42,.12); }
.cl-card-top { height: 6px; background: var(--cl-accent); }
.cl-card-body { padding: 24px 26px 8px; flex: 1; }
.cl-card-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 10px; }
.cl-card-excerpt { font-size: 0.92rem; color: var(--cl-muted); line-height: 1.55; margin: 14px 0 0; }
.cl-card-footer { padding: 18px 26px; border-top: 1px solid var(--cl-border); }
.cl-card-cta { font-weight: 700; font-size: 0.9rem; color: var(--cl-primary); }

.cl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-tag {
  display: inline-block;
  background: var(--cl-bg);
  border: 1px solid var(--cl-border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--cl-muted);
}
.cl-tag.is-green, .cl-tag.is-teal, .cl-tag.is-yellow, .cl-tag.is-purple {
  background: var(--cl-accent-soft);
  border-color: transparent;
  color: var(--cl-accent-text);
}

.cl-empty { color: var(--cl-muted); text-align: center; padding: 60px 0; font-size: 1.05rem; }

/* Buttons */
.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.cl-btn--primary { background: var(--cl-primary); color: #fff; }
.cl-btn--primary:hover { background: var(--cl-primary-dark); transform: translateY(-1px); }

/* Single job page */
.cl-job-head { max-width: 760px; margin: 0 auto; text-align: center; }
.cl-job-head .cl-icon-circle { margin-left: auto; margin-right: auto; }
.cl-job-head h1 { font-size: 2rem; font-weight: 800; text-transform: uppercase; margin: 14px 0 16px; line-height: 1.15; }
.cl-job-head .cl-tags { justify-content: center; margin-bottom: 8px; }
.cl-job-status {
  display: inline-block;
  background: #fdf3e3;
  color: #8a5a00;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  margin: 20px 0;
}
/* The theme's global h1-h6 rule is sized for big page-section headers
   (clamp up to 2.2rem, uppercase Anton) — fine for marketing pages,
   way too loud for an in-body subheading here, so it's overridden
   explicitly. Same reasoning for p/li: the theme's global `p` rule
   sets a large 1.25rem, but plain `li` gets no such rule and falls
   back to 16px, so paragraphs and list items in the same block ended
   up visibly different sizes — both are pinned to the same size below. */
.cl-job-content { max-width: 760px; margin: 0 auto; font-size: 1.05rem; line-height: 1.75; color: var(--cl-text); }
.cl-job-content h2, .cl-job-content h3 {
  font-family: var(--cl-font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--cl-text);
  line-height: 1.2;
  margin: 30px 0 12px;
}
.cl-job-content h2 { font-size: 1.4rem; }
.cl-job-content h3 { font-size: 1.2rem; }
.cl-job-content h2:first-child, .cl-job-content h3:first-child { margin-top: 0; }
.cl-job-content p, .cl-job-content li { font-size: 1.05rem; }
.cl-job-content p { margin: 0 0 18px; }
.cl-job-content ul { list-style: disc; margin: 0 0 18px 1.3em; padding: 0; }
.cl-job-content ol { list-style: decimal; margin: 0 0 18px 1.3em; padding: 0; }
.cl-job-content li { margin-bottom: 8px; }
.cl-job-content li::marker { color: var(--cl-primary); }

.cl-apply-box {
  max-width: 640px;
  margin: 32px auto 0;
  background: var(--cream, #eee9e3);
  border-radius: var(--cl-radius);
  padding: 36px;
  text-align: center;
}
.cl-apply-box h2 { font-size: 1.3rem; margin: 0 0 8px; }
.cl-apply-box p { color: var(--cl-muted); margin: 0 0 22px; font-size: 0.98rem; }

/* Application form */
.cl-form { text-align: left; }
.cl-form-row { margin-bottom: 18px; }
.cl-form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cl-form label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cl-text);
  margin-bottom: 6px;
}
.cl-required { color: var(--red, #db4949); }
.cl-form-hint { font-weight: 400; color: var(--cl-muted); font-size: 0.82rem; }
.cl-form input[type="text"],
.cl-form input[type="email"],
.cl-form input[type="tel"],
.cl-form input[type="file"],
.cl-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--cl-border);
  border-radius: 10px;
  font-family: var(--cl-font-body);
  font-size: 0.98rem;
  color: var(--cl-text);
  background: #fff;
}
.cl-form input:focus, .cl-form textarea:focus {
  outline: none;
  border-color: var(--cl-primary);
}
.cl-form textarea { resize: vertical; min-height: 110px; }
.cl-form .cl-btn { width: 100%; margin-top: 4px; }
.cl-form-error {
  background: #fdecec;
  color: #a12a2a;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  margin: 0 0 18px;
}

@media (max-width: 600px) {
  .cl-hero h1, .cl-job-head h1 { font-size: 1.6rem; }
  .cl-form-row--split { grid-template-columns: 1fr; }
}