/*
 * Section heading 「中文標題 + English script」 — ONE component for the whole public site
 * (Tina 2026-10-17:「官網排版標題可以中文在前面」, creator page 「關於我 About Me」 mockup).
 *
 * The localized title comes FIRST, the pink English script sits on the same line to its right
 * (baseline-aligned, glow). When both don't fit (phones), the script wraps to the next line,
 * pushed to the right edge — it never overlaps the title.
 *
 *   <div class="ttl"><h2 class="ttl-h" id="…">關於我</h2><span class="ttl-script" aria-hidden="true">About Me</span></div>
 *
 * Size: set --ttl-size on .ttl (or an ancestor) to change the title size; the script follows.
 * The title keeps the page's own font family/weight; this file owns size, margin and wrapping.
 * When the localized title already says the script's words (English pages), site.js / the
 * Angular home add [data-dup] to the script and it is hidden.
 *
 * Used by: static pages via <link href="/assets/site/heading.css">, the SEO page generator
 * (SITE_KIT_HEAD), and the Angular home (src/styles.scss @use's this same file).
 */
.ttl {
  --ttl-size: clamp(1.5rem, 2.6vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.45em;
  row-gap: 0;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  font-size: var(--ttl-size);
}
.ttl .ttl-h {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1em;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.ttl .ttl-script {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  text-align: right;
  margin: 0 0 0 auto;
  padding-right: 0.12em; /* Great Vibes swashes ink past the glyph box — keep them inside */
  font-family: var(--script, "Great Vibes", "Snell Roundhand", cursive);
  font-size: 1.12em;
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal; /* a script longer than the line breaks between words instead of overflowing */
  color: var(--pink-1, #ff79a8);
  text-shadow: 0 0 16px rgba(255, 121, 168, 0.55);
}
.ttl .ttl-script[data-dup],
.ttl .ttl-script:empty { display: none; }
/* Centered headings (CTA blocks) */
.ttl.ttl-center { margin-inline: auto; justify-content: center; }
.ttl.ttl-center .ttl-script { margin-left: 0; text-align: center; }
/* Sub-page hero titles (site.css .page-hero h1 size) */
.page-hero .ttl { --ttl-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 0.5rem 0 0.6rem; }