/* ---- TRANSMUTATION (#transmutation, page-transmutation.js); the nav's Free group is nav-free.css ----
   Loaded on every page (index.html). The page's
   colours come from the app's own dark theme (TRANSMUTATION static/css/tokens.css: page
   #0B1118, cyan #4DD0E1), eased into the site's ladder the way SKIN and Unholy are. */
body[data-product=transmutation] {
  --bg: #0a0e12; --ground: #0b1015; --well: #111922;
  --ink: #eef1f3; --muted: #9ea8b3; --dim: rgba(238, 241, 243, 0.58);
  --accent: #6fd0dc; --hot: #4dd0e1; --glow: rgba(77, 208, 225, 0.16); --ring: rgba(77, 208, 225, 0.14);
}

/* ---- hero: the same hero, with room for a thirteen-letter name ---- */
.hero--transmutation { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.hero--transmutation h1.tm-title { font-size: clamp(34px, 3.6vw, 60px); letter-spacing: .06em; line-height: 1; margin: 22px 0 22px; }
.hero--transmutation .hero-line { max-width: 420px; }
.tm-shot-missing { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 8px; background: var(--well); }

/* ---- how it works: the two stages, then the eight engines ---- */
.tm-how__body { display: grid; gap: 52px; min-width: 0; }
.tm-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; }
.tm-stage { padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(180deg, var(--well), transparent 85%); }
.tm-stage__label { font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.tm-stage h3 { margin: 6px 0 12px; font-size: 19px; font-weight: 420; line-height: 1.3; }
.tm-stage ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.tm-stage li + li { margin-top: 4px; }
.tm-stage__arrow { align-self: center; font: 14px var(--mono); color: var(--dim); }
.tm-engines__title { font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.tm-engines__note { margin-top: 10px; max-width: 560px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.tm-engine-list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.tm-engine { display: grid; grid-template-columns: 62px minmax(0, .9fr) minmax(0, 1.35fr); gap: 8px 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
/* The engine chips as the app draws them: short mono keys in a bordered box. */
.tm-chip { display: inline-block; width: 56px; padding: 4px 0; border: 1px solid var(--control-line); border-radius: 3px; text-align: center; font: 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--accent); }
.tm-engine__name { font-size: 15px; line-height: 1.35; color: var(--ink); }
.tm-engine__name small { display: block; margin-top: 3px; font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.tm-engine__good { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---- listen ---- */
.tm-player-mount { min-width: 0; }
.tm-player .track-choice .track-number { font-weight: 500; }

/* ---- download ---- */
.tm-download__body { min-width: 0; align-self: start; }
.tm-file { max-width: 560px; padding: 26px 30px 28px; border: 1px solid var(--line); }
.tm-file__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.tm-file__name { font: 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tm-file__status { padding: 5px 12px 5px calc(12px + .1em); border: 1px dashed var(--control-line); border-radius: 999px; font: 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tm-file__meta { margin-top: 16px; font: 12px var(--mono); letter-spacing: .06em; color: var(--dim); font-variant-numeric: tabular-nums; }
.tm-file__note { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.tm-download__source { max-width: 560px; margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---- licence ---- */
.tm-licence__copy { margin-top: 20px; font: 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--dim); }
.tm-licence__source { margin-top: 12px; }
.tm-licence__body { min-width: 0; }
.tm-notices__title { font: 12px/1.6 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.tm-table-wrap { overflow-x: auto; }
.tm-notices { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.tm-notices th, .tm-notices td { text-align: left; vertical-align: top; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--line); }
.tm-notices thead th { padding-top: 0; font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 400; border-bottom-color: var(--control-line); }
.tm-notices tbody th { font-weight: 450; color: var(--ink); }
.tm-notices td { color: var(--muted); }
.tm-notices td:last-child { padding-right: 0; }
.tm-rubberband { max-width: 560px; margin-top: 26px; }

@media (max-width: 1050px) {
  .hero--transmutation { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
@media (max-width: 760px) {
  .hero--transmutation { grid-template-columns: minmax(0, 1fr); }
  .hero--transmutation h1.tm-title { font-size: min(8.4vw, 44px); letter-spacing: .04em; margin: 16px 0 18px; }
  .tm-stages { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tm-stage__arrow { justify-self: center; transform: rotate(90deg); }
  .tm-engine { grid-template-columns: 62px minmax(0, 1fr); }
  .tm-engine__good { grid-column: 2; }
  .tm-file { padding: 22px 20px 24px; }
}
@media (max-width: 620px) {
  /* The notices as a list: one block per component, the column names hidden. */
  .tm-notices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tm-notices, .tm-notices tbody, .tm-notices tr, .tm-notices th, .tm-notices td { display: block; }
  .tm-notices tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tm-notices th, .tm-notices td { padding: 0; border: 0; }
  .tm-notices td { margin-top: 4px; }
  .tm-notices td:last-child { font: 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--dim); }
}