/* MIMAS · treatments library page (treatments/index.html). Tokens come from main.css.
   Flush hairline rows, no shadows, radius 2px max. Every :hover sits inside @media (hover: hover). */

.page-treatments main { padding-bottom: 88px; }

/* ---------- head ---------- */
.tl-hero { padding: 128px 0 4px; }   /* clears the sticky nav pill that overlaps the page top */
.tl-hero h1 { font-size: clamp(34px, 3.6vw, 48px); letter-spacing: -0.01em; line-height: 1.08; }
.tl-intro { margin-top: 14px; max-width: 58ch; color: var(--ink-soft); }

.tl-jump { margin-top: 28px; }
.tl-jump ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tl-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
.tl-jump a span { color: var(--sage-700); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- one family ---------- */
.tl-family { margin-top: 44px; }
.tl-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 14px;
  border-top: 1px solid var(--ink);
  list-style: none;
  cursor: default;
}
.tl-sum::-webkit-details-marker { display: none; }
.tl-sum h2 { font-size: clamp(26px, 2.8vw, 34px); }
.tl-count { color: var(--sage-700); font-weight: 600; font-size: 15px; white-space: nowrap; }
.tl-expand { font-size: 15px; color: var(--ink-soft); margin: -6px 0 10px; }
.tl-line { font-size: 15px; font-weight: 600; color: var(--sage-700); margin-bottom: 6px; }
.tl-lead { max-width: 68ch; color: var(--ink-soft); font-size: 16px; margin-bottom: 22px; }
.tl-lead strong { color: var(--ink); font-weight: 600; }

/* ---------- rows ---------- */
.tl-rows { list-style: none; border-bottom: 1px solid var(--line); }
.tl-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr) auto;
  grid-template-areas: "name effect ask" "tech effect ask" ". ideal ask";
  gap: 6px 32px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.tl-row > * { min-width: 0; }
.tl-item { grid-area: name; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; }
.tl-tech { grid-area: tech; font-size: 14px; color: var(--sage-700); }
.tl-effect { grid-area: effect; font-size: 16px; }
.tl-ideal { grid-area: ideal; font-size: 14px; color: var(--ink-soft); }
.tl-ideal span { color: var(--sage-700); font-weight: 600; }
.tl-ask {
  grid-area: ask;
  justify-self: end;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.tl-disclaimer {
  margin-top: 20px;
  max-width: 72ch;
  font-size: 14px;
  color: var(--ink-soft);
  border-left: 2px solid var(--sage-300);
  padding: 2px 0 2px 14px;
}
.tl-sub { margin-top: 36px; }
.tl-subname { font-size: 24px; margin-bottom: 4px; }

@media (hover: hover) {
  .tl-jump a:hover { border-color: var(--ink); }
  .tl-ask:hover { color: var(--sage-700); text-decoration-thickness: 2px; }
}

/* desktop: families always open, the summary is a heading, not a toggle */
@media (min-width: 720px) {
  .tl-sum { pointer-events: none; }
}

/* mobile: families collapse (JS closes them; the markup ships open) */
@media (max-width: 719px) {
  .tl-hero { padding-top: 104px; }
  .tl-family { margin-top: 0; }
  .tl-family:first-of-type { margin-top: 28px; }
  .tl-sum {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 20px 40px 18px 0;
    cursor: pointer;
  }
  .tl-sum::after {
    content: "+";
    position: absolute;
    right: 2px;
    top: 18px;
    font-family: var(--sans);
    font-size: 26px;
    line-height: 1;
    color: var(--sage-700);
    transition: transform 0.2s ease;
  }
  .tl-details[open] .tl-sum::after { transform: rotate(45deg); }
  .tl-body { padding-bottom: 28px; }
  .tl-rows { border-bottom: 0; }
  .tl-row { grid-template-columns: 1fr; grid-template-areas: "name" "tech" "effect" "ideal" "ask"; gap: 4px; }
  .tl-ask { justify-self: start; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tl-sum::after { transition: none; } }

/* deep links must not land under the sticky nav */
.tl-row, .tl-family, [id] { scroll-margin-top: calc(var(--nav-h) + 28px); }

/* a way in: concern chips for people who arrive without a treatment name */
.tl-entry { padding: 28px 0 30px; margin-top: 20px; border-top: 1px solid var(--line); }
.tl-entry-line { color: var(--ink-soft); max-width: 62ch; margin-bottom: 16px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-chip {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  text-decoration: none;
}
@media (hover: hover) { .tl-chip:hover { border-color: var(--acc-numeral); background: var(--beige-2); } }

/* a way out: the page no longer ends into the footer */
.tl-closer { background: var(--beige-2); padding: 64px 0; margin-top: 56px; }
.tl-closer h2 { margin-bottom: 10px; }
.tl-closer p { color: var(--ink-soft); max-width: 56ch; margin-bottom: 22px; }

/* the homepage's system reaches this page: family marks and tonal alternation.
   This page is the destination of every CTA and was 15,693px of unbroken white. */
.tl-sum { display: flex; align-items: center; gap: 14px; }
.tl-sum h2 { margin-right: auto; }
.tl-sum .tl-count { margin-left: 0; flex: none; }
.tl-icwrap { display: block; flex: none; color: var(--acc-numeral); }
.tl-icwrap .tl-ic { display: block; }

.tl-family:nth-of-type(even) { background: var(--beige-2); }
.tl-family { padding: 8px 0 4px; }
.tl-family:nth-of-type(4n+3) { background: #F7F1E8; }