/* ==========================================================================
   Aliya's Beauty — treatment pages (/treatments/, /treatments/<page>/)
   --------------------------------------------------------------------------
   Built on the homepage's frame: css/ds/aliya-ds.css for the abx tokens and
   components, css/landing.css for the stage, bar, menu, chapters, sheet,
   closing scene and footer. This file adds what only these pages have; its
   classes are .tx-*.

   Two layers, as on the homepage:

     1. The page as ordinary flowing sections — what renders with
        JavaScript off, without WebGL, or with reduced motion requested.
     2. html.alt-live (set by script/treatments/main.js) — the opening and
        the scene become pinned stages, performed on the WebGL canvas.

   The opening is laid out the same way in both, so switching to the live
   layer moves nothing that is on screen.

   Sections: 1 Opening · 2 Scene · 3 Sheet · 4 Booking bar · 5 Live layer
             6 Wide screens · 7 Motion preferences
   ========================================================================== */

.abx-app.tx {
  --tx-measure: 44rem;
  --tx-fs-h2: clamp(2rem, min(7.4vw, calc(var(--alt-vh) * 8)), 4rem);
  --tx-fs-name: clamp(2.7rem, min(12.6vw, calc(var(--alt-vh) * 8.6)), 7rem);
  --tx-fs-card: clamp(2.3rem, min(11vw, calc(var(--alt-vh) * 7.2)), 5.25rem);
  --tx-dock-h: 4.25rem;
}

/* The canvas paints the backdrop from the start where it can (the opening
   is ink either way); the paper of the scene appears once the stage runs. */
.tx .tx-main {
  overflow-x: clip;
}

/* 1. OPENING =============================================================== */

.tx-hero .alt-ch__pin {
  min-height: 100vh;
  min-height: calc(var(--alt-vh) * 100);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.75rem, calc(var(--alt-vh) * 2.2), 1.75rem);
  padding: var(--alt-bar-h) var(--alt-gutter) clamp(1.5rem, calc(var(--alt-vh) * 5.5), 4rem);
}

/* The figure's box. With a still of the figure (images/treatments/) the
   plain page shows that; the live page draws the figure here instead. */
.tx-hero__figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--alt-vh) * 22);
}

.tx .tx-hero .alt-ch__pin > .tx-hero__figure {
  display: grid;
}

/* Only where the stage will not run: no script, reduced motion, less data,
   no WebGL (html.tx-still, set in the page head and by main.js). */
.tx-poster {
  display: none;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: calc(var(--alt-vh) * 46);
  object-fit: contain;
  /* The still has the stage's own ink and glow; feather it into the page. */
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 52%, transparent);
  mask-image: radial-gradient(ellipse closest-side, #000 52%, transparent);
  transition: opacity 0.9s var(--abx-ease);
}

.tx-hero__copy {
  display: grid;
  justify-items: start;
  gap: clamp(0.7rem, calc(var(--alt-vh) * 1.8), 1.25rem);
  max-width: 46rem;
}

.tx-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  font-family: var(--abx-font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
}

.tx-crumbs li + li::before {
  content: '/';
  margin: 0 0.5rem;
  opacity: 0.6;
}

.tx-crumbs a {
  color: var(--abx-text-muted);
  transition: color var(--abx-dur-2) var(--abx-ease);
}

.tx-crumbs a:hover {
  color: var(--abx-text);
}

.tx-crumbs [aria-current] {
  color: var(--abx-text-muted);
}

.tx-hero__title {
  display: grid;
  gap: clamp(0.5rem, calc(var(--alt-vh) * 1.2), 0.85rem);
}

.tx-hero__name {
  font-family: var(--alt-serif);
  font-size: var(--tx-fs-name);
  line-height: 0.94;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

.tx-hero__where {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.tx-hero__lede {
  max-width: 38ch;
  font-size: var(--alt-fs-lede);
  font-weight: 300;
  line-height: 1.45;
  color: var(--abx-text-muted);
  text-wrap: pretty;
}

/* Three facts in a row: label above, figure below. */
.tx-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(30%, 9rem), 1fr));
  width: 100%;
  max-width: 34rem;
  border-top: 1px solid var(--abx-border);
}

.tx-facts > div {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.75rem 0.75rem 0 0;
}

.tx-facts > div + div {
  padding-left: 0.85rem;
  border-left: 1px solid var(--abx-border);
}

.tx-facts dt {
  font-family: var(--abx-font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
}

.tx-facts dd {
  font-family: var(--alt-serif);
  font-size: clamp(1.15rem, calc(0.95rem + 1vw), 1.6rem);
  line-height: 1.1;
}

.tx-facts dd small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--abx-font-sans);
  font-size: var(--abx-fs-50);
  letter-spacing: 0.02em;
  color: var(--abx-text-muted);
}

/* In the "at a glance" list the parts stay on one line. */
.tx-glance__facts dd small {
  font-size: inherit;
  color: var(--abx-text-muted);
}

.tx-glance__facts dd small::before {
  content: '· ';
}

.tx-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(0.15rem, calc(var(--alt-vh) * 0.8), 0.6rem);
}

/* The plain page has no stage behind the bar; it stays with the opening. */
html:not(.alt-live) .tx .alt-bar {
  position: absolute;
}

.tx-empty {
  padding: clamp(3rem, 8vw, 5rem) var(--alt-gutter);
  background: var(--alt-paper);
}

.tx-empty a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2. SCENE ================================================================= */

.tx-looks__head,
.tx-drop__head {
  display: grid;
  gap: clamp(0.6rem, calc(var(--alt-vh) * 1.5), 1.1rem);
}

.tx-looks .alt-h2,
.tx-drop .alt-h2 {
  font-size: var(--tx-fs-h2);
}

.tx-looks__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.tx-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: clamp(0.55rem, calc(var(--alt-vh) * 1.3), 0.9rem);
}

.tx-card__no {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.tx-card__no span {
  color: var(--abx-text-subtle);
}

.tx-card__name {
  font-family: var(--alt-serif);
  font-size: var(--tx-fs-card);
  line-height: 0.94;
  letter-spacing: -0.016em;
}

.tx-card__text {
  max-width: 36ch;
  font-size: clamp(0.98rem, calc(0.9rem + 0.3vw), 1.12rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--abx-text-muted);
  text-wrap: pretty;
}

.tx-card__rows {
  width: 100%;
  max-width: 26rem;
  border-top: 1px solid var(--abx-border-strong);
}

.tx-card__rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(3.4ch, auto);
  align-items: baseline;
  gap: 0.85rem;
  padding: clamp(0.4rem, calc(var(--alt-vh) * 1), 0.65rem) 0;
  border-bottom: 1px solid var(--abx-border);
  font-size: clamp(0.92rem, calc(0.86rem + 0.2vw), 1.02rem);
  line-height: 1.3;
}

.tx-card__row-time {
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  color: var(--abx-text-muted);
  white-space: nowrap;
}

.tx-card__row-price {
  font-family: var(--abx-font-display);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tx-card__rows li.tx-card__more {
  display: block;
  color: var(--abx-text-muted);
  font-size: var(--abx-fs-100);
}

.tx-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 0.2rem;
}

.tx-looks__tabs,
.tx-looks__before {
  display: none;
}

/* Droplet scene (facials, waxing) */

.tx-drop__copy {
  display: grid;
  justify-items: start;
  gap: clamp(1rem, calc(var(--alt-vh) * 2.4), 1.75rem);
  width: 100%;
  max-width: 34rem;
}

.tx-drop__panels {
  display: grid;
  gap: clamp(2rem, calc(var(--alt-vh) * 4), 2.75rem);
  width: 100%;
}

.tx-drop__panel {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
}

.tx-drop__word {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  width: 100%;
  font-family: var(--alt-serif);
  font-size: clamp(2.4rem, min(12vw, calc(var(--alt-vh) * 8.5)), 5rem);
  line-height: 1;
}

.tx-drop__cat {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.tx-drop__text {
  max-width: 36ch;
  font-weight: 300;
  line-height: 1.45;
  color: var(--abx-text-muted);
}

/* 3. SHEET ================================================================= */

.tx-sheet__inner {
  display: block;
  max-width: 82rem;
}

.tx-sheet__body {
  display: grid;
  gap: clamp(3.5rem, calc(var(--alt-vh) * 10), 6.5rem);
  min-width: 0;
}

/* On this page: a row of chips at the top of the sheet on a phone, a
   contents column beside it on a wide screen (section 6). */
.tx-toc {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, calc(var(--alt-vh) * 7), 4rem);
}

.tx-toc__title {
  display: none;
}

.tx-toc ol {
  display: flex;
  gap: 0.5rem;
  margin: 0 calc(var(--alt-gutter) * -1);
  padding: 0.15rem var(--alt-gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--alt-gutter);
}

.tx-toc ol::-webkit-scrollbar {
  display: none;
}

.tx-toc ol a {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 1rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-50);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease), border-color var(--abx-dur-2) var(--abx-ease);
}

.tx-toc ol a[aria-current="true"] {
  border-color: var(--abx-text);
  background: var(--abx-text);
  color: var(--abx-inverse);
}

.tx .tx-toc__book {
  display: none;
}

/* A section of the sheet. */
.tx-block {
  display: grid;
  gap: clamp(1.25rem, calc(var(--alt-vh) * 3), 2rem);
  min-width: 0;
  scroll-margin-top: calc(var(--alt-bar-h) + 1rem);
}

.tx-block__head {
  display: grid;
  gap: clamp(0.75rem, calc(var(--alt-vh) * 1.8), 1.15rem);
}

.tx-block__title {
  font-size: var(--tx-fs-h2);
}

.tx-block__note {
  font-size: var(--abx-fs-100);
  line-height: 1.5;
  color: var(--abx-text-muted);
}

.tx-block__note a:not(.alt-link) {
  color: var(--abx-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* At a glance — the paragraph an answer engine would quote, then the facts. */
.tx-glance__text {
  max-width: var(--tx-measure);
  font-size: clamp(1.08rem, calc(1rem + 0.35vw), 1.3rem);
  font-weight: 300;
  line-height: 1.55;
  text-wrap: pretty;
}

.tx-glance__facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  border-top: 1px solid var(--abx-border-strong);
}

.tx-glance__facts > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.6fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--abx-border);
}

.tx-glance__facts dt {
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-50);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.tx-glance__facts dd {
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Tables ------------------------------------------------------------------ */

.tx-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.tx-table__caption {
  padding-bottom: 0.75rem;
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--abx-text-muted);
}

.tx-table thead th {
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--abx-border-strong);
  font-family: var(--abx-font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abx-text-subtle);
}

.tx-table tbody th,
.tx-table td {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--abx-border);
  vertical-align: baseline;
}

.tx-table tbody th {
  font-weight: 500;
}

.tx-table__time {
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  color: var(--abx-text-muted);
  white-space: nowrap;
}

.tx-table__price {
  font-family: var(--abx-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tx-table--prices th:nth-child(2),
.tx-table--prices td:nth-child(2) {
  padding-inline: 1rem;
  text-align: right;
}

.tx-table--prices th:nth-child(3),
.tx-table--prices td:nth-child(3) {
  text-align: right;
}

.tx-table__book {
  width: 1%;
  padding-left: 1.25rem !important;
  text-align: right;
}

/* A small "Book" pill for a row. */
.alt .tx-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  height: 2.25rem;
  padding: 0 1rem;
  border: 1px solid var(--abx-text);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-50);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease);
}

.alt .tx-pill:hover,
.alt .tx-pill:focus-visible {
  background: var(--abx-text);
  color: var(--abx-inverse);
}

/* Phones: a price row is one line — name and time stacked, price, button. */
@media (max-width: 47.99rem) {
  .tx-table--prices thead {
    display: none;
  }

  .tx-table--prices tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: 'name price book' 'time price book';
    align-items: center;
    column-gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--abx-border);
  }

  .tx-table--prices tbody th,
  .tx-table--prices td {
    padding: 0 !important;
    border: 0;
  }

  .tx-table--prices tbody th {
    grid-area: name;
  }

  .tx-table--prices td.tx-table__time {
    grid-area: time;
    text-align: left;
  }

  .tx-table--prices td.tx-table__price {
    grid-area: price;
  }

  .tx-table--prices td.tx-table__book {
    grid-area: book;
    width: auto;
  }

  .tx-table--prices tbody tr:first-child {
    border-top: 1px solid var(--abx-border-strong);
  }
}

/* Compare: a table on a wide screen, a card per set on a phone. */
.tx-compare__wrap {
  min-width: 0;
}

.tx-table--compare thead th:nth-child(n + 3),
.tx-table--compare td.tx-table__price {
  padding-left: 1.25rem;
  text-align: right;
}

.tx-table--compare tbody th {
  font-family: var(--alt-serif);
  font-size: clamp(1.5rem, calc(1.2rem + 1vw), 2rem);
  font-weight: 400;
  line-height: 1.1;
  padding-right: 1.5rem;
}

.tx-table--compare tbody th a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tx-table__text {
  max-width: 30ch;
  padding-right: 1rem !important;
  font-weight: 300;
  line-height: 1.45;
  color: var(--abx-text-muted);
}

@media (max-width: 47.99rem) {
  .tx-table--compare thead {
    display: none;
  }

  .tx-table--compare tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--abx-border-strong);
  }

  .tx-table--compare tbody th,
  .tx-table--compare td {
    padding: 0 !important;
    border: 0;
    text-align: left !important;
  }

  .tx-table--compare tbody th,
  .tx-table--compare td.tx-table__text {
    grid-column: 1 / -1;
    max-width: none;
  }

  .tx-table--compare td.tx-table__price {
    display: grid;
    gap: 0.2rem;
    padding-top: 0.5rem !important;
  }

  .tx-table--compare td.tx-table__price::before {
    content: attr(data-label);
    font-family: var(--abx-font-display);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--abx-text-subtle);
  }
}

/* The work ------------------------------------------------------------------ */

.tx-work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 1rem);
}

.tx-work__grid--1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 30rem;
}

.tx-work__item figure {
  position: relative;
  overflow: hidden;
  border-radius: clamp(0.75rem, 2vw, 1.25rem);
  background: var(--abx-surface-sunken);
  aspect-ratio: 1;
}

.tx-work__item img {
  display: block;
  width: 100%;
  height: 112%;
  object-fit: cover;
  transform: translateY(var(--tx-shift, -5%));
  will-change: transform;
}

.tx-work__item figcaption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--abx-radius-pill);
  background: rgba(23, 23, 22, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--abx-font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-beige-100);
}

.tx-work__item figcaption span {
  opacity: 0.6;
}

/* Your visit ---------------------------------------------------------------- */

.tx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  counter-reset: tx-step;
}

.tx-steps__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--abx-border-strong);
}

/* The rule above each step draws itself in as the step arrives. */
.tx-steps__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--abx-text);
  transform: scaleX(var(--tx-drawn, 1));
  transform-origin: left center;
}

.tx-steps__no {
  font-family: var(--alt-serif);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--abx-text-subtle);
}

.tx-steps__title {
  font-family: var(--alt-serif);
  font-size: clamp(1.5rem, calc(1.2rem + 1vw), 2rem);
  line-height: 1.1;
}

.alt .tx-steps__points li {
  font-weight: 300;
  line-height: 1.5;
}

.tx-steps__points {
  gap: 0.7rem;
}

.tx-forms {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: var(--tx-measure);
  padding: 1rem 1.15rem;
  border-radius: var(--abx-radius-lg);
  background: var(--abx-surface-sunken);
  font-size: var(--abx-fs-100);
  line-height: 1.5;
}

.tx-forms__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
}

.ax-i {
  width: 1.25rem;
  height: 1.25rem;
}

.tx-forms a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tx-note {
  display: grid;
  gap: 0.75rem;
  max-width: var(--tx-measure);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-lg);
}

.tx-note__title {
  font-family: var(--alt-serif);
  font-size: clamp(1.4rem, calc(1.15rem + 0.9vw), 1.85rem);
  line-height: 1.1;
}

.tx-note p {
  font-weight: 300;
  line-height: 1.55;
  color: var(--abx-text-muted);
}

/* Reviews ------------------------------------------------------------------- */

.tx-reviews__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.tx-quote {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.tx-quote blockquote {
  font-family: var(--alt-serif);
  font-size: clamp(1.45rem, calc(1.1rem + 1.4vw), 2.25rem);
  line-height: 1.18;
  text-wrap: balance;
}

.tx-quote blockquote p::before {
  content: '“';
}

.tx-quote blockquote p::after {
  content: '”';
}

.tx-quote figcaption {
  font-family: var(--abx-font-display);
  font-size: var(--alt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.tx-stars {
  display: inline-flex;
  gap: 0.2rem;
}

.tx-stars i {
  width: 0.8rem;
  height: 0.8rem;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Questions ----------------------------------------------------------------- */

.tx-faq__list {
  max-width: 52rem;
  border-top: 1px solid var(--abx-border-strong);
}

.tx-faq__item summary {
  padding: 1.15rem 0;
  font-size: clamp(1rem, calc(0.94rem + 0.25vw), 1.12rem);
}

.tx-faq__item .alt-faq__answer {
  max-width: 44rem;
}

.alt .tx-faq__item .alt-faq__answer ul {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.1rem;
  list-style: disc;
}

/* Related ------------------------------------------------------------------- */

.tx-related__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.alt .tx-related__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'glyph name' 'glyph blurb' 'glyph from';
  align-content: start;
  column-gap: 1rem;
  row-gap: 0.35rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-lg);
  transition: border-color var(--abx-dur-2) var(--abx-ease), background-color var(--abx-dur-3) var(--abx-ease), transform var(--abx-dur-3) var(--alt-ease-out);
}

@media (hover: hover) {
  .alt .tx-related__card:hover {
    border-color: var(--abx-text);
    background: var(--abx-surface-sunken);
    transform: translateY(-3px);
  }

  .alt .tx-related__card:hover .tx-related__from svg {
    transform: translateX(0.3rem);
  }
}

.tx-glyph {
  grid-area: glyph;
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tx-related__name {
  grid-area: name;
  font-family: var(--alt-serif);
  font-size: clamp(1.35rem, calc(1.15rem + 0.8vw), 1.75rem);
  line-height: 1.1;
}

.tx-related__blurb {
  grid-area: blurb;
  font-weight: 300;
  line-height: 1.45;
  color: var(--abx-text-muted);
}

.tx-related__from {
  grid-area: from;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-family: var(--abx-font-display);
  font-size: var(--abx-fs-100);
  font-weight: 600;
}

.tx-related__from svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--abx-dur-3) var(--alt-ease-out);
}

/* The menu (hub) ------------------------------------------------------------ */

.tx-menu {
  gap: clamp(2.5rem, calc(var(--alt-vh) * 6), 4rem);
}

.tx-menu__group {
  display: grid;
  gap: 0.75rem;
  scroll-margin-top: calc(var(--alt-bar-h) + 1rem);
}

.tx-menu__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.tx-menu__head .tx-glyph {
  grid-area: auto;
  width: 2.4rem;
  height: 2.4rem;
}

.tx-menu__head .alt-h3 {
  font-size: clamp(1.6rem, calc(1.2rem + 1.5vw), 2.5rem);
}

.tx-menu__head .alt-h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

@media (max-width: 30rem) {
  .tx-menu__more {
    display: none;
  }
}

/* Find us: the homepage's block, at home in a column. */
.tx-visit__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
}

/* Footer pieces the shell's footer brings (css/app.css is not loaded here). */
.ax-footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--abx-text-muted);
  font-variant-numeric: tabular-nums;
}

.ax-footer__hours li.is-today {
  color: var(--abx-text);
}

/* The closing scene's phone number is a link. */
.tx-finale .alt-lede a {
  color: var(--abx-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* On a phone the footer's columns pair up; the long ones take a full row. */
@media (max-width: 47.99rem) {
  .tx .alt-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tx .alt-footer__cols > div:nth-last-child(-n + 3) {
    grid-column: 1 / -1;
  }
}

.ax-footer__hours li span:last-child {
  white-space: nowrap;
}

/* 4. BOOKING BAR =========================================================== */

/* A small dark bar at the foot of the screen: what you are looking at, what
   it costs, and the button. It follows the scene (script/treatments/dock.js). */
.tx-dock {
  position: fixed;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(calc(100% - 1.5rem), 30rem);
  min-height: var(--tx-dock-h);
  padding: 0.55rem 0.55rem 0.55rem 1.25rem;
  border: 1px solid rgba(214, 211, 205, 0.14);
  border-radius: var(--abx-radius-pill);
  background: rgba(23, 23, 22, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.32);
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.6s var(--alt-ease-out), opacity 0.4s var(--abx-ease);
  pointer-events: none;
}

.tx-dock[hidden] {
  display: none;
}

.tx-dock.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.tx-dock__info {
  display: grid;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.tx-dock__label {
  overflow: hidden;
  font-family: var(--alt-serif);
  font-size: 1.15rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tx-dock__meta {
  overflow: hidden;
  font-size: var(--abx-fs-50);
  letter-spacing: 0.02em;
  color: var(--abx-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.alt .tx-dock__cta {
  flex: none;
  height: 3rem;
  padding: 0 1.6rem;
}

/* The cookie notice sits where the bar would; the bar waits for it. */
body:has(#cookie-consent-banner:not([hidden])) .tx-dock,
html.alt-menu-open .tx-dock {
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
}

/* Room at the end of the page so the bar never covers the last line. */
.tx .alt-footer {
  padding-bottom: max(calc(var(--tx-dock-h) + 2rem), env(safe-area-inset-bottom));
}

.no-js .tx-poster,
.tx-still .tx-poster {
  display: block;
}

/* 5. LIVE LAYER ============================================================ */

/* The bar is see-through over the stage; over the sheet and the footer,
   which scroll beneath it, it gets a frosted strip of their colour
   (html.tx-barred, from script/treatments/main.js). */
.tx .alt-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(244, 241, 235, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(23, 23, 22, 0.06);
  opacity: 0;
  transition: opacity var(--abx-dur-3) var(--abx-ease), background-color var(--abx-dur-3) var(--abx-ease);
  pointer-events: none;
}

html[data-alt-top="ink"] .tx .alt-bar::before {
  background: rgba(18, 18, 17, 0.82);
  box-shadow: 0 1px 0 rgba(214, 211, 205, 0.08);
}

html.tx-barred .tx .alt-bar::before {
  opacity: 1;
}

html.alt-menu-open .tx .alt-bar::before {
  opacity: 0;
}


/* Opening (live): same layout as the plain page, now pinned. */
html.alt-live .tx-hero .alt-ch__pin {
  grid-template-rows: minmax(0, 1fr) auto;
  padding: var(--alt-bar-h) var(--alt-gutter) clamp(1.5rem, calc(var(--alt-vh) * 5.5), 4rem);
}

html.alt-live .tx-hero__figure {
  min-height: calc(var(--alt-vh) * 20);
}

/* Scene (live) */

html.alt-live .tx-looks .alt-ch__pin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(0.5rem, calc(var(--alt-vh) * 1.6), 1.25rem);
  padding-top: calc(var(--alt-bar-h) + clamp(0.25rem, calc(var(--alt-vh) * 1.5), 1.25rem));
}

html.alt-live .tx-looks__figure {
  min-height: calc(var(--alt-vh) * 16);
}

/* Every card shares one cell; the script shows one at a time. */
html.alt-live .tx-looks__cards {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

html.alt-live .tx-card {
  grid-area: 1 / 1;
}

/* Before the first card: the figure as it starts ("Your lashes"). */
html.alt-live .tx-looks__before {
  display: block;
  grid-row: 3;
  grid-column: 1;
  align-self: end;
  font-family: var(--alt-serif);
  font-size: var(--tx-fs-card);
  line-height: 0.94;
  color: transparent;
  -webkit-text-stroke: 1px var(--abx-border-strong);
  pointer-events: none;
}

html.alt-live .tx-looks__cards {
  grid-row: 3;
  grid-column: 1;
}

html.alt-live .tx-looks__tabs {
  display: inline-flex;
  justify-self: start;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

html.alt-live .tx-looks__tabs .abx-segmented__radio {
  min-height: 2.25rem;
  padding: 0 clamp(0.6rem, 2.4vw, 1rem);
  font-size: var(--abx-fs-50);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 59.99rem) {
  html.alt-live .tx-looks__head .alt-lede,
  html.alt-live .tx-card__no {
    display: none;
  }

  html.alt-live .tx-looks__head .alt-h2 {
    font-size: clamp(1.75rem, min(7.4vw, calc(var(--alt-vh) * 5)), 2.75rem);
  }

  html.alt-live .tx-looks__head .alt-kicker {
    display: none;
  }
}

/* Droplet scene (live): figure above, copy below; side by side when wide. */
html.alt-live .tx-drop .alt-ch__pin {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.6rem, calc(var(--alt-vh) * 2), 1.5rem);
}

html.alt-live .tx-drop__figure {
  min-height: calc(var(--alt-vh) * 19);
}

html.alt-live .tx-drop__panels {
  grid-template-columns: minmax(0, 1fr);
}

html.alt-live .tx-drop__panel {
  grid-area: 1 / 1;
  align-content: start;
}

@media (max-width: 59.99rem) {
  html.alt-live .tx-drop__head .alt-lede {
    display: none;
  }

  html.alt-live .tx-drop__head .alt-h2 {
    font-size: clamp(1.75rem, min(7.4vw, calc(var(--alt-vh) * 5)), 2.75rem);
  }

  html.alt-live .tx-drop__copy {
    max-width: none;
  }
}

/* Short phones: the supporting lines give way so each figure keeps its room. */
@media (max-width: 47.99rem) and (max-height: 46rem) {
  html.alt-live .tx-card__text,
  html.alt-live .tx-drop__text,
  html.alt-live .tx-crumbs {
    display: none;
  }
}

@media (max-width: 47.99rem) and (max-height: 41rem) {
  .tx-facts,
  html.alt-live .tx-hero__lede {
    display: none;
  }
}

/* 6. WIDE SCREENS ========================================================== */

@media (min-width: 60rem) {
  /* Opening: copy at the foot of the left half, the figure large beside it. */
  .tx-hero .alt-ch__pin {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }

  .tx-hero__copy {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: clamp(0.5rem, calc(var(--alt-vh) * 2), 2rem);
  }

  .tx-hero__figure,
  html.alt-live .tx-hero__figure {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 0;
  }

  html.alt-live .tx-hero .alt-ch__pin {
    grid-template-rows: minmax(0, 1fr);
  }

  .tx-poster {
    max-height: calc(var(--alt-vh) * 62);
  }

  /* Scene: copy left, figure right (as the homepage's lashes). */
  html.alt-live .tx-looks .alt-ch__pin {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }

  html.alt-live .tx-looks__head {
    grid-column: 1;
    grid-row: 1;
  }

  /* The card has the column below the heading to itself; the tabs sit
     under the figure, where they read as its controls. */
  html.alt-live .tx-looks__cards,
  html.alt-live .tx-looks__before {
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: center;
  }

  html.alt-live .tx-looks__tabs {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
  }

  html.alt-live .tx-looks__figure {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  html.alt-live .tx-looks .alt-h2 {
    --tx-fs-h2: clamp(2.1rem, min(4.4vw, calc(var(--alt-vh) * 7.5)), 4.25rem);
  }

  html.alt-live .tx-drop .alt-ch__pin {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }

  html.alt-live .tx-drop__copy {
    grid-column: 1;
    grid-row: 1;
  }

  html.alt-live .tx-drop__figure {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }

  /* Sheet: contents on the left, held in view; the page on the right. */
  .tx-sheet__inner {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 7rem);
  }

  .tx-toc {
    position: sticky;
    top: calc(var(--alt-bar-h) + 1.5rem);
    align-self: start;
    align-content: start;
    gap: 1.25rem;
    margin: 0;
  }

  .tx-toc__title {
    display: block;
  }

  .tx-toc ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-top: 1px solid var(--abx-border-strong);
  }

  .tx-toc ol a {
    position: relative;
    display: flex;
    height: auto;
    padding: 0.7rem 0 0.7rem 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--abx-border);
    border-radius: 0;
    font-size: var(--abx-fs-100);
    color: var(--abx-text-muted);
  }

  .tx-toc ol a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.55rem;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    transition: width var(--abx-dur-3) var(--alt-ease-out), opacity var(--abx-dur-2) var(--abx-ease);
  }

  .tx-toc ol a[aria-current="true"] {
    background: none;
    color: var(--abx-text);
  }

  .tx-toc ol a[aria-current="true"]::before {
    width: 0.9rem;
    opacity: 1;
  }

  .tx-toc ol a:hover {
    color: var(--abx-text);
  }

  .tx .tx-toc__book {
    display: inline-flex;
    justify-self: start;
  }

  .tx-work__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tx-work__grid--1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .tx-glance__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }

  /* Beside the sheet, the contents column holds the booking button in
     view, so the bar at the foot is not needed. */
  .tx .tx-dock {
    display: none;
  }
}

/* The chapter rail would sit over the sheet's right-hand column. */
html.tx-barred .alt-rail {
  opacity: 0;
  pointer-events: none;
}

/* Squat desktop windows: keep the essentials of each pinned scene. */
@media (min-width: 60rem) and (max-height: 47rem) {
  html.alt-live .tx-looks__head .alt-lede,
  html.alt-live .tx-card__no,
  html.alt-live .tx-crumbs {
    display: none;
  }
}

/* 7. MOTION PREFERENCES ==================================================== */

/* The opening's copy rises in on load (no script needed); it is there from
   the first paint for anyone who would rather not have it move. */
@keyframes tx-rise {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .tx-hero__copy > * {
    animation: tx-rise 0.9s var(--alt-ease-out) backwards;
  }

  .js .tx-hero__copy > :nth-child(2) { animation-delay: 0.06s; }
  .js .tx-hero__copy > :nth-child(3) { animation-delay: 0.12s; }
  .js .tx-hero__copy > :nth-child(4) { animation-delay: 0.18s; }
  .js .tx-hero__copy > :nth-child(5) { animation-delay: 0.24s; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-dock {
    transition: none;
  }

  .tx-work__item img {
    height: 100%;
    transform: none;
  }
}