/* ===========================================================================
   horotron.therapy — technique.html
   Loaded after styles.css, which owns the palette, the type, the buttons and
   the shared motion curves. Reuses .phead and .svcs__cta from services.css
   (same page family — this is the story behind the list services.html
   prices out) rather than redefining a page head and a closing CTA.
   =========================================================================== */

.trads { padding-bottom: var(--section); }
.trads .thread { margin-bottom: clamp(56px, 8vh, 96px); }

.trads__lead {
  max-width: 62ch;
  margin-bottom: clamp(56px, 8vh, 104px);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.75;
  color: var(--bone-dim);
}

.trad-list { display: grid; }

.trad { padding-block: clamp(44px, 6.5vh, 84px); }
.trad + .trad { border-top: 1px solid var(--hair); }
.trad:first-child { padding-top: 0; }

.trad__n {
  display: block;
  font-family: var(--display);
  font-weight: 200;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  opacity: 0.75;
}

.trad__t {
  margin-top: 10px;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(24px, 3.1vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.032em;
}

.trad__origin {
  margin-top: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--bone-fade);
}

.trad__body {
  margin-top: clamp(18px, 2.4vh, 26px);
  max-width: 66ch;
  display: grid;
  gap: 14px;
}
.trad__body p { color: var(--bone-dim); line-height: 1.75; }

.trad__chips {
  margin-top: clamp(18px, 2.4vh, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trad__chips a {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--bone-dim);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.trad__chips a:hover { border-color: var(--gold-soft); color: var(--gold); }