/* text.css — live HTML type placed on the PSB baselines.
 *
 * GEOMETRY (all generated by build/build.cjs from art/textspec.json):
 *   .tb   a zero-size block pinned at the paragraph's PSB anchor x (left:%), top 0.
 *   .ln   one line. top = (baseline - 2em) in cqw, font-size in cqw.
 *
 * METRIC-FREE BASELINES: the line box is line-height:0 and its ::before strut is a 2em
 * inline-block sitting ON the baseline, so the line box spans exactly [baseline-2em,
 * baseline] in every font. Placing the line's top at (baseline - 2em) therefore puts the
 * glyph baseline on the PSB baseline whatever the face — a fallback font (Cochin on
 * Android) changes shapes, never vertical position.
 *
 * Horizontal: centred lines are 120cqw-wide boxes centred on the anchor (no transform —
 * transform belongs to the reveal); left / right lines hang off the anchor.
 */
.tb {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  z-index: 400;
  margin: 0;
  font-weight: 400;
}
.ln {
  position: absolute;
  top: calc(var(--y) * 1cqw);
  left: calc(-60cqw + var(--dx, 0) * 1cqw);
  right: calc(-60cqw - var(--dx, 0) * 1cqw);
  display: block;
  font-size: calc(var(--fs) * 1cqw);
  line-height: 0;
  white-space: pre;
  text-align: center;
  color: var(--c, #fbc580);
  font-family: var(--f-trajan);
}
.ln::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 2em;
  vertical-align: baseline;
}
.tb--left .ln  { left: calc(var(--dx, 0) * 1cqw); right: auto; text-align: left; }
.tb--right .ln { left: auto; right: calc(var(--dx, 0) * -1cqw); text-align: right; }

.f-edwardian { font-family: var(--f-edwardian); }
.f-cochin    { font-family: var(--f-cochin); }
.f-dubiel    { font-family: var(--f-dubiel); font-style: italic; }

.ln b { font-weight: 700; }
.ln .sup { font-size: 0.583em; vertical-align: 0.571em; line-height: 0; }

/* tab-separated line (the three mantras): spread across the PSB bbox */
.ln--spread {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  left: calc(var(--sx) * 1cqw);
  right: auto;
  width: calc(var(--sw) * 1cqw);
}
.ln--spread > span { line-height: 0; }

/* script titles + names: the PSB colours them with a top-to-bottom gold gradient (its
   DIVIDE raster copies). background-clip:text paints nothing outside the box, and the
   Edwardian swashes overhang their advance widths, so the gradient span is padded to
   contain the ink (pukhraj-poorva iOS swash-clip fix) and the stops are remapped onto
   the glyph band inside that padding. */
.gt {
  display: inline-block;
  line-height: 1;
  padding: 0.5em 0.45em;
  margin: -0.5em -0.45em;
  background-image: linear-gradient(180deg, var(--g1) 30%, var(--g2) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--g2);
}

/* the one interactive line in the art: directions */
.ln a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  pointer-events: auto;
  border-radius: 0.2em;
}
.ln a:focus-visible { outline: 2px solid #fbe6c6; outline-offset: 0.25em; }
.ln a[href^="tel:"] { text-decoration: none; }
.ln a[href^="tel:"]:focus-visible,
.ln a[href^="tel:"]:hover { text-decoration: underline; }

/* map labels sit on the parchment map */
.tb--map .ln { color: var(--c); }