/* page.css — page-specific layout for /uses.
   Depends on styles.css (the shared design system). */

/* ---- Header --------------------------------------------------------------- */
.uses-head { padding-block: clamp(3rem, 9vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); }
.uses-head .display { margin-bottom: 1.4rem; }
.uses-head .lede { max-width: 42ch; }

/* ---- Section label (mono index + serif title + status) -------------------- */
.uses-label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .65rem 1rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.uses-label-mark {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; color: var(--accent);
}
.uses-label h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.uses-label .badge { align-self: center; }
.uses-sub {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); align-self: center;
}

/* ---- Definition-style rows (label | value) -------------------------------- */
.def-list { border-top: 1px solid var(--line-2); }
.def-row {
  display: grid; grid-template-columns: minmax(150px, 220px) 1fr;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding: clamp(.9rem, 2vw, 1.25rem) 0;
  border-bottom: 1px solid var(--line-2);
  align-items: baseline;
}
.def-row dt {
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  padding-top: .15rem;
}
.def-row dd { color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }
.def-row dd strong { color: var(--ink); font-weight: 600; }

/* ---- Skills list ---------------------------------------------------------- */
.skill-list {
  display: grid; gap: 0;
  border-top: 1px solid var(--line-2);
}
.skill-list li {
  position: relative;
  font-family: var(--font-reading); font-size: 1.15rem; line-height: 1.5;
  color: var(--ink);
  padding: clamp(.85rem, 2vw, 1.15rem) 0 clamp(.85rem, 2vw, 1.15rem) 1.6rem;
  border-bottom: 1px solid var(--line-2);
}
.skill-list li::before {
  content: "▸"; position: absolute; left: 0; top: clamp(.85rem, 2vw, 1.15rem);
  color: var(--accent); font-family: var(--font-mono); font-size: .9rem;
}

/* ---- Tools wrap ----------------------------------------------------------- */
.uses-tags { gap: .6rem; }
.uses-tags .tag { font-size: .76rem; padding: .42em .8em; }

/* ---- Footer link below stack ---------------------------------------------- */
.uses-foot { margin-top: clamp(1.8rem, 4vw, 2.4rem); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 760px) {
  .def-row { grid-template-columns: 1fr; gap: .3rem; }
  .def-row dt { padding-top: 0; }
}