/* Figma Loading → Top. The same artwork lands above the ink-colored logo. */
.ds5-front .site-header { z-index: auto; }
.ds5-front .site-logo { position: fixed; z-index: 10; transform-origin: top left; line-height: 1; }
.ds5-front .site-logo a { display: block; }
.ds5-front .global-nav { z-index: 30; }
.ds5-front .hero { overflow: clip; }
.ds5-front .hero__shape { z-index: 12; pointer-events: none; }
.ds5-front .hero__tagline { z-index: 13; }
.hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__shape:has(canvas) .hero__fallback { display: none; }
.top-loader { display: none; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.ds5-loading .top-loader { display: block; }
.ds5-loading .hero__shape { visibility: hidden; }
.ds5-loading .hero__shape.is-loading-art { visibility: visible; z-index: 1; }
.ds5-loading :is(.site-logo, .global-nav, .hero__tagline, .hero__stamp, .hero__totop) { visibility: hidden; }
.top-loader__backdrop { position: absolute; inset: 0; background: var(--c-bg); }
.top-loader__graphic { position: absolute; left: 51.04%; top: 50.18%; width: 31.389vw; height: auto; max-width: none; transform: translate(-50%, -50%); }
.top-loader__progress { position: absolute; right: 2.01vw; bottom: 0; margin: 0; font-family: var(--f-en); font-size: 9.0916vw; line-height: 1; font-variant-numeric: tabular-nums; }
.titles__groups { min-width: 0; display: grid; gap: clamp(5rem, 10vw, 12rem); }
.titles__group { min-width: 0; scroll-margin-top: 18vh; }
.titles__skip { display: inline-flex; align-items: center; gap: 1.25em; margin-top: clamp(2rem, 5vw, 5rem); font: 1.15rem / 1.3 var(--f-en); padding-block: .75rem; border-bottom: 1px solid currentColor; }
.titles__skip:hover { color: var(--c-red); }
#faq { scroll-margin-top: 5rem; }
.motion-heading__char { opacity: 0; }
.motion-heading__char.is-shown { opacity: 1; }
@media (max-width: 600px) {
  .top-loader__graphic { width: 62vw; }
  .top-loader__progress { font-size: 19vw; right: 6vw; bottom: 3svh; }
  .titles__bar { display: contents; }
  .titles__heading { margin-bottom: 1.5rem; }
  .titles__bar-inner { position: sticky; top: 4.25rem; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem 0; margin-bottom: 1.5rem; background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
  .titles__tabs { font-size: clamp(1.1rem, 5.25vw, 1.4rem); gap: .85em; }
  .titles__skip { position: static; flex-shrink: 0; margin: 0; font-size: .875rem; gap: .55em; padding-block: .7rem; border: 0; }
  .titles__group { scroll-margin-top: 9.5rem; }
  .admin-bar .titles__bar-inner { top: calc(4.25rem + 46px); }
  .admin-bar .site-logo { margin-top: 46px; }
}
@media (min-width: 601px) {
  .titles__bar { top: max(5rem, calc(50svh - var(--titles-bar-height, 28rem) / 2)); }
  .admin-bar .titles__bar { top: max(7rem, calc(50svh - var(--titles-bar-height, 28rem) / 2 + 16px)); }
  .admin-bar .site-logo { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .top-loader { display: none !important; }
  .ds5-loading .hero__shape { visibility: visible; }
  .motion-heading__char { opacity: 1; }
  .ds5-loading :is(.site-logo, .global-nav, .hero__tagline, .hero__stamp, .hero__totop) { visibility: visible; }
}

.titles__group-meta { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1.2rem; padding-top: .65rem; border-top: 1px solid var(--c-border); font: .75rem/1.5 var(--f-en); }
.titles__group-meta > span:first-child { text-transform: uppercase; letter-spacing: .05em; }
@media(max-width:600px) { .titles__grid { padding-top: 0; } .titles__group-meta { border-top: 0; padding-top: 0; } }

/* Keep moving artwork and card text clear of the compact mobile masthead. */
@media(max-width:600px) {
 .ds5-front.has-scrolled-hero .site-header::before { content:''; position:fixed; inset:0 0 auto; height:4.25rem; background:var(--c-bg); z-index:9; }
 .ds5-front.has-scrolled-hero.has-dark-ending .site-header::before { background:var(--c-ink); }
 .admin-bar.ds5-front.has-scrolled-hero .site-header::before { height:calc(4.25rem + 46px); }
}

/* Covers follow each glyph's advance width without changing line wrapping. */
.motion-heading__char { position:relative; }
.motion-heading__char[data-cover]::after { content:''; position:absolute; inset:.06em -.025em auto; height:.85em; background:currentColor; opacity:var(--cover-opacity,0); transform:translateX(var(--cover-shift,0em)) scaleY(var(--cover-scale,1)); pointer-events:none; }
.motion-heading__char[data-cover="round"]::after { border-radius:50%; }
@media(prefers-reduced-motion:reduce) { .motion-heading__char::after { display:none; } }

/* The loader is a window onto the FV, not a separate enlarged artwork. */
.top-loader__graphic { visibility:hidden; }
.top-loader__window { position:absolute; border:1px solid var(--c-ink); }
.ds5-loading .hero__shape,
.ds5-loading :is(.site-logo, .global-nav, .hero__tagline, .hero__stamp, .hero__totop) { visibility:visible; }
.ds5-loading .hero__stamp, .ds5-loading .hero__totop { opacity:0; }

/* The temporary box follows the real glyph width; text never shifts. */
.motion-heading__char[data-cover="box"]::after { inset:.06em 0 auto; height:.85em; border:1px solid currentColor; border-radius:0; background:var(--cover-fill,currentColor); transform:none; box-sizing:border-box; }

.motion-heading__baseline { display:inline-block; width:0; height:0; padding:0; margin:0; vertical-align:baseline; }
.motion-heading__decode { position:absolute; left:0; top:0; line-height:inherit; white-space:nowrap; visibility:hidden; pointer-events:none; }
.motion-heading__char[data-cover="box"]::after { inset:auto; left:var(--box-left,0); top:var(--box-top,0); width:var(--box-width,1ch); height:var(--box-height,1em); }