/* RED AS TYPE BECOMES EMBER ON DARK. Solid --marrow-red is 1.62:1 on the
   dark ground. --marrow-ember-text is the shipped accessibility token for
   exactly this case, measured 7.69:1. Red still points; it just does not
   colour a word at 1.62. */
/* ===== /lamella/skills/, page scoped layout only =====
   Rules honored in this file, and pinned by skills-page.test.mjs:
     - Zero new custom properties. Every colour is a var() already defined in
       /css/styles.css.
     - Zero hex literals. There is no brand identity invented here.
     - Marrow red is used for rules, top borders, dots and small mono eyebrows
       on LIGHT surfaces only. It is never body type, and there is no dark
       surface on this page at all, so the 1.62:1 red on bone black failure
       cannot recur here.
     - Every surface on this page is bone cream or bone white. Body copy is
       --steel, which measures better than 6:1 on both, and headings are
       --bone-black.
     - Every transition is disabled under prefers-reduced-motion at the bottom.
     - Focus is visible on every interactive element, including the one
       <summary> on the page.
   Layout, spacing and rhythm only.
*/

/* ---------- shared section rhythm ---------- */
.sk-section {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--line);
}
.sk-section-alt { background: var(--bone-white); }
.sk-narrow { max-width: 860px; }

.sk-h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--bone-black);
  margin: 0 0 var(--space-3);
}
.sk-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--steel);
  max-width: 66ch;
  margin: 0 0 var(--space-4);
}
.sk-lede:last-child { margin-bottom: 0; }

/* A single emphasised paragraph. Bone black type, red bar on the left.
   The red POINTS at the sentence. It never colours it. */
.sk-claim {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--bone-black);
  max-width: 66ch;
  margin: var(--space-4) 0 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--marrow-red);
}

/* ---------- hero ---------- */
.sk-hero {
  padding: var(--space-8) 0 var(--space-7);
  background: var(--bone-white);
  border-bottom: 1px solid var(--line);
}
.sk-hero-inner { max-width: 900px; }
.sk-hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--bone-black);
  margin: 0 0 var(--space-3);
}
.sk-hero-lede {
  font-size: 20px;
  line-height: 1.6;
  color: var(--steel);
  max-width: 62ch;
  margin: 0 0 var(--space-2);
}
.sk-hero-lede strong { color: var(--bone-black); font-weight: 600; }
.sk-rule {
  width: 72px;
  height: 3px;
  background: var(--marrow-red);
  border: 0;
  margin: 0 0 var(--space-4);
}
.sk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.sk-hero-note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin: var(--space-3) 0 0;
}

/* ---------- three numbered steps ---------- */
.sk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sk-step {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: var(--space-4) var(--space-3);
}
.sk-section-alt .sk-step { background: var(--bone-cream); }
.sk-step-num {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin: 0 0 var(--space-2);
}
.sk-step h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bone-black);
  margin: 0 0 10px;
}
.sk-step p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  margin: 0 0 10px;
}
.sk-step p:last-child { margin-bottom: 0; }
.sk-step-link a {
  font-weight: 600;
  color: var(--bone-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sk-step-link a:hover { color: var(--marrow-ember-text); }

/* ---------- job cards ---------- */
.sk-jobs {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-job {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: var(--space-4);
}
.sk-section-alt .sk-job { background: var(--bone-cream); }
.sk-job-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin: 0 0 var(--space-2);
}
.sk-job h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--bone-black);
  margin: 0 0 var(--space-2);
}

/* The sentence a coach actually says. Held apart from the explanation so a
   reader can scan the page for the one that matches their problem. */
.sk-job-say {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--bone-black);
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--space-2);
  margin: 0 0 var(--space-3);
}
.sk-section-alt .sk-job-say { background: var(--bone-white); }
.sk-job-key {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin-bottom: 6px;
}

.sk-job-body { margin: 0; }
.sk-job-body dt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-black);
  margin: 0 0 6px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.sk-job-body dt:first-child { padding-top: 0; border-top: 0; }
.sk-job-body dd {
  font-size: 15px;
  line-height: 1.62;
  color: var(--steel);
  margin: 0 0 var(--space-2);
}
.sk-job-body dd:last-child { margin-bottom: 0; }

/* ---------- boundary list ---------- */
.sk-bounds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.sk-bounds li {
  position: relative;
  font-size: 17px;
  line-height: 1.6;
  color: var(--steel);
  padding-left: var(--space-3);
}
.sk-bounds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 3px;
  background: var(--marrow-red);
}
.sk-bounds strong { color: var(--bone-black); font-weight: 600; }

/* ---------- the technical surface ---------- */
.sk-deep {
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: var(--space-3);
}
.sk-deep summary {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-black);
  cursor: pointer;
}
.sk-deep summary:focus-visible {
  outline: 3px solid var(--marrow-red);
  outline-offset: 3px;
}
.sk-deep[open] summary { margin-bottom: var(--space-3); }
.sk-deep-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--steel);
  margin: 0 0 var(--space-3);
}
/* Scoped past .sk-deep-body p, which is one specificity point higher than a
   bare .sk-deep-label and was silently repainting these eyebrows as plain
   steel body copy. Caught by a computed style read in the browser, not by
   looking at the file. */
.sk-deep-body .sk-deep-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin: 0 0 var(--space-2);
}
.sk-tools {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: 4px var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-tools li {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--bone-black);
  overflow-wrap: anywhere;
}
.sk-deep-list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
}
.sk-deep-list li {
  font-size: 15px;
  line-height: 1.62;
  color: var(--steel);
  margin-bottom: var(--space-2);
}
.sk-deep-list li::marker { color: var(--marrow-ember-text); }

/* ---------- roadmap ---------- */
.sk-road {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.sk-road li {
  font-size: 16px;
  line-height: 1.62;
  color: var(--steel);
  padding: var(--space-3);
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel-light);
  border-radius: 2px;
}
.sk-road strong {
  display: block;
  color: var(--bone-black);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 6px;
}

/* ---------- closing call to action ---------- */
.sk-cta {
  padding: var(--space-7) 0 var(--space-8);
  background: var(--bone-white);
  border-top: 1px solid var(--line);
}
.sk-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.sk-cta-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  max-width: 60ch;
  margin: var(--space-3) 0 0;
}
.sk-cta-sub a {
  color: var(--bone-black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sk-cta-sub a:hover { color: var(--marrow-ember-text); }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .sk-steps,
  .sk-jobs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sk-section,
  .sk-cta { padding: var(--space-6) 0; }
  .sk-hero { padding: var(--space-7) 0 var(--space-6); }
  .sk-tools { grid-template-columns: 1fr; }
  .sk-job { padding: var(--space-3); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sk-step-link a,
  .sk-cta-sub a,
  .sk-deep summary,
  .sk-job {
    transition: none !important;
    animation: none !important;
  }
}